A fork of the Materia GTK theme.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 _common.scss

View raw Download
text/plain • 77.4 kiB
ASCII text
        
            
1
$asset_suffix: if($variant=='dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
4
$small_size: if($laptop == 'true', 20px, 24px);
5
$medium_size: if($laptop == 'true', 32px, 36px);
6
$large_size: if($laptop == 'true', 44px, 48px);
7
8
$container_padding: 6px;
9
10
$bar_size: 4px;
11
$menuitem_size: 28px;
12
13
$md_radius: 2px;
14
$circular_radius: 100px;
15
16
$shorter_duration: 0.2s;
17
$longer_duration: 0.3s;
18
19
$standard_curve: cubic-bezier(0.4, 0.0, 0.2, 1);
20
$deceleration_curve: cubic-bezier(0.0, 0.0, 0.2, 1);
21
$acceleration_curve: cubic-bezier(0.4, 0.0, 1, 1);
22
$sharp_curve: cubic-bezier(0.4, 0.0, 0.6, 1);
23
24
$shorter_transition: all $shorter_duration $deceleration_curve;
25
$longer_transition: all $longer_duration $deceleration_curve;
26
$shadow_transition: box-shadow $shorter_duration $deceleration_curve;
27
28
* {
29
padding: 0;
30
background-clip: padding-box;
31
32
-GtkToolButton-icon-spacing: 4;
33
-GtkTextView-error-underline-color: $error_color;
34
35
// The size for scrollbars. The slider is 2px smaller, but we keep it
36
// up so that the whole area is sensitive to button presses for the
37
// slider. The stepper button is larger in both directions, the slider
38
// only in the width
39
40
-GtkScrolledWindow-scrollbar-spacing: 0;
41
42
-GtkToolItemGroup-expander-size: 11;
43
44
-GtkWidget-text-handle-width: 24;
45
-GtkWidget-text-handle-height: 24;
46
47
-GtkDialog-button-spacing: 4;
48
-GtkDialog-action-area-border: 0;
49
50
// We use the outline properties to signal the focus properties
51
// to the adwaita engine: using real CSS properties is faster,
52
// and we don't use any outlines for now.
53
54
outline-style: solid;
55
outline-width: 2px;
56
outline-color: $track_color;
57
outline-offset: -4px;
58
-gtk-outline-radius: 2px;
59
60
-gtk-secondary-caret-color: $primary_color;
61
}
62
63
64
/***************
65
* Base States *
66
***************/
67
.background {
68
background-color: $bg_color;
69
color: $fg_color;
70
}
71
72
/*
73
These wildcard seems unavoidable, need to investigate.
74
Wildcards are bad and troublesome, use them with care,
75
or better, just don't.
76
Everytime a wildcard is used a kitten dies, painfully.
77
*/
78
79
*:disabled { -gtk-icon-effect: dim; }
80
81
.gtkstyle-fallback {
82
background-color: $bg_color;
83
color: $fg_color;
84
85
&:hover {
86
background-color: darken($bg_color, 5%);
87
color: $fg_color;
88
}
89
90
&:active {
91
background-color: darken($bg_color, 10%);
92
color: $fg_color;
93
}
94
95
&:disabled {
96
background-color: $bg_color;
97
color: $disabled_fg_color;
98
}
99
100
&:selected {
101
background-color: $primary_color;
102
color: $inversed_fg_color;
103
}
104
}
105
106
.view,
107
%view {
108
@extend row.activatable;
109
110
background-color: $base_color;
111
color: $fg_color;
112
113
&:hover, &:active, &:selected { border-radius: 2px; }
114
115
&:disabled {
116
// background-color: $alt_base_color;
117
color: $disabled_fg_color;
118
}
119
120
&:selected { @extend %selected_items; }
121
}
122
123
.view,
124
textview {
125
text {
126
// @extend %view;
127
128
background-color: $base_color;
129
color: $fg_color;
130
131
&:disabled {
132
// background-color: $alt_base_color;
133
color: $disabled_fg_color;
134
}
135
136
selection { @extend %selected_items; }
137
}
138
}
139
140
textview border {
141
background-color: $alt_base_color;
142
color: $tertiary_fg_color;
143
}
144
145
iconview { @extend .view; }
146
147
.rubberband,
148
rubberband {
149
border: 1px solid $alt_primary_color;
150
background-color: scale-alpha($alt_primary_color, $lower_opacity);
151
}
152
153
flowbox {
154
rubberband { @extend rubberband; }
155
156
flowboxchild {
157
outline-offset: -2px;
158
padding: 4px;
159
border-radius: 2px;
160
161
&:selected { @extend %selected_items; }
162
}
163
}
164
165
label {
166
caret-color: currentColor; // this shouldn't be needed.
167
168
&.separator {
169
@extend .dim-label;
170
171
color: $fg_color;
172
}
173
174
row:selected &,
175
&:selected { @extend %nobg_selected_items; }
176
177
selection {
178
background-color: $primary_color;
179
color: $inversed_fg_color;
180
}
181
182
&:disabled {
183
color: $disabled_fg_color;
184
185
selection { @extend %selected_items:disabled; }
186
}
187
}
188
189
.dim-label { opacity: $hint_opacity; }
190
191
assistant {
192
.sidebar {
193
padding: 4px 0;
194
// background-color: $base_color;
195
// border-top: 1px solid $borders_color;
196
}
197
198
// &.csd .sidebar { border-top-style: none; }
199
200
.sidebar label {
201
min-height: $medium_size;
202
padding: 0 12px;
203
color: $tertiary_fg_color;
204
font-weight: 500;
205
206
&.highlight { color: $fg_color; }
207
}
208
}
209
210
%osd, .osd { opacity: $higher_opacity; }
211
212
213
/*********************
214
* Spinner Animation *
215
*********************/
216
@keyframes spin {
217
to { -gtk-icon-transform: rotate(1turn); }
218
}
219
220
@keyframes spin_colors {
221
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
222
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
223
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
224
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
225
}
226
227
spinner {
228
background: none;
229
opacity: 0; // non spinning spinner makes no sense
230
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
231
232
&:checked {
233
opacity: 1;
234
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
235
236
&:disabled { opacity: $disabled_opacity; }
237
}
238
}
239
240
241
/****************
242
* Text Entries *
243
****************/
244
%entry,
245
entry {
246
%entry_basic, & {
247
min-height: $medium_size;
248
padding: 0 8px;
249
border-radius: 2px;
250
251
@include entry(normal);
252
253
&:focus { @include entry(focus); }
254
255
&:disabled { @include entry(disabled); }
256
257
&.flat {
258
border-radius: 0;
259
260
@include entry(flat-normal);
261
262
&:focus { @include entry(flat-focus); }
263
264
&:disabled { @include entry(flat-disabled); }
265
}
266
267
image { // icons inside the entry
268
// @extend %simple_flat_button;
269
270
min-height: $small_size;
271
min-width: $small_size;
272
-gtk-outline-radius: $circular_radius;
273
border-radius: $circular_radius;
274
color: gtkalpha(currentColor, $enabled_opacity);
275
276
&:hover, &:active { color: currentColor; }
277
278
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
279
280
&.left { margin-left: -2px; margin-right: 2px; }
281
282
&.right { margin-left: 2px; margin-right: -2px; }
283
}
284
285
undershoot {
286
&.left { @include undershoot(left); }
287
288
&.right { @include undershoot(right); }
289
}
290
291
selection { @extend %selected_items; }
292
293
// entry error and warning style
294
@each $e_type, $e_color in (error, $error_color),
295
(warning, $warning_color) {
296
&.#{$e_type} {
297
@include entry(normal, $e_color);
298
299
&:focus { @include entry(focus, $e_color); }
300
301
&:disabled { @include entry(disabled, $e_color); }
302
303
&.flat {
304
@include entry(flat-normal, $e_color);
305
306
&:focus { @include entry(flat-focus, $e_color); }
307
308
&:disabled { @include entry(flat-disabled, $e_color); }
309
}
310
}
311
}
312
313
&:drop(active) {
314
// box-shadow: inset 0 0 0 2px $accent_color;
315
}
316
317
.osd & {
318
}
319
}
320
321
progress {
322
margin: 2px (2px - 8px);
323
border-style: none none solid;
324
border-width: 2px;
325
border-color: $primary_color;
326
// border-radius: 0;
327
// box-shadow: none;
328
background-color: transparent;
329
// background-image: none;
330
}
331
332
// linked entries
333
.linked:not(.vertical) > & { @extend %linked; }
334
335
// Vertically linked entries
336
.linked.vertical > & { @extend %linked_vertical; }
337
338
.linked:not(.vertical) > &.flat,
339
.linked.vertical > &.flat { border-radius: 0; }
340
}
341
342
treeview entry {
343
&.flat, & {
344
min-height: 0;
345
padding: 2px;
346
border-radius: 0;
347
background-color: $base_color;
348
349
&, &:focus {
350
border-image: none;
351
box-shadow: none;
352
}
353
}
354
}
355
356
357
/***********
358
* Buttons *
359
***********/
360
// stuff for .needs-attention
361
@keyframes needs_attention {
362
from {
363
background-image: -gtk-gradient(radial,
364
center center, 0,
365
center center, 0.001,
366
to($accent_color),
367
to(transparent));
368
}
369
370
to {
371
background-image: -gtk-gradient(radial,
372
center center, 0,
373
center center, 0.5,
374
to($accent_color),
375
to(transparent));
376
}
377
}
378
379
%button,
380
button {
381
@at-root %button_basic, & {
382
min-height: 24px;
383
min-width: 16px;
384
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
385
border-radius: 2px;
386
font-weight: 500;
387
388
@include button(normal);
389
390
&:hover { @include button(hover); }
391
392
&:active { @include button(active); }
393
394
&:disabled { @include button(disabled); }
395
396
&:checked { @include button(checked); }
397
398
&:checked:disabled { @include button(checked-disabled); }
399
400
@at-root %flat_button, &.flat {
401
@at-root %simple_flat_button, & {
402
@include button(flat-normal);
403
404
&:hover { @include button(flat-hover); }
405
406
&:active { @include button(flat-active); }
407
408
&:disabled { @include button(flat-disabled); }
409
}
410
411
&:checked { @include button(flat-checked); }
412
413
&:checked:disabled { @include button(flat-checked-disabled); }
414
}
415
416
&.text-button {
417
padding-left: 16px;
418
padding-right: 16px;
419
}
420
421
&.image-button {
422
min-width: 24px;
423
padding: ($medium_size - 24px) / 2;
424
-gtk-outline-radius: $circular_radius;
425
border-radius: $circular_radius;
426
}
427
428
&.text-button.image-button {
429
-gtk-outline-radius: 2px;
430
border-radius: 2px;
431
432
label {
433
&:first-child {
434
margin-left: 16px - ($medium_size - 24px) / 2;
435
margin-right: 2px;
436
}
437
438
&:last-child {
439
margin-left: 2px;
440
margin-right: 16px - ($medium_size - 24px) / 2;
441
}
442
}
443
444
image:not(:only-child) {
445
&:first-child { margin-left: (24px - 16px) / 2; }
446
447
&:last-child { margin-right: (24px - 16px) / 2; }
448
}
449
}
450
451
.linked > & { @extend %linked; }
452
453
.linked.vertical > & { @extend %linked_vertical; }
454
455
.linked > &.flat,
456
.linked.vertical > &.flat {
457
border-radius: 2px;
458
459
&.image-button {
460
-gtk-outline-radius: $circular_radius;
461
border-radius: $circular_radius;
462
}
463
464
&.text-button.image-button {
465
-gtk-outline-radius: 2px;
466
border-radius: 2px;
467
}
468
}
469
470
&:drop(active) {
471
// box-shadow: inset 0 0 0 2px $accent_color;
472
}
473
}
474
475
@at-root %button_selected, row:selected & {
476
&:disabled { color: $disabled_secondary_inversed_fg_color; }
477
}
478
479
// big standalone buttons like in Documents pager
480
&.osd {
481
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
482
483
&.image-button { padding: ($large_size - 24px) / 2; }
484
485
&:disabled { opacity: 0; }
486
}
487
488
//overlay / OSD style
489
@at-root %osd_button,
490
.osd & {
491
}
492
493
// Suggested and Destructive Action buttons
494
@each $b_type, $b_color in (suggested-action, $suggested_color),
495
(destructive-action, $destructive_color) {
496
&.#{$b_type} {
497
background-color: $b_color;
498
color: $inversed_fg_color;
499
500
// @include button(normal, $b_color, $inversed_fg_color);
501
502
// &:hover { @include button(hover, $b_color, $inversed_fg_color); }
503
504
// &:active, &:checked { @include button(active, $b_color, $inversed_fg_color); }
505
506
&:disabled { @include button(disabled, $b_color, $inversed_fg_color); }
507
508
&:checked { background-color: mix($inversed_fg_color, $b_color, percentage($lower_opacity)); }
509
510
&.flat {
511
background-color: transparent;
512
color: $b_color;
513
514
// @include button(flat-normal, $b_color, $inversed_fg_color);
515
516
// &:hover { @include button(flat-hover, $b_color, $inversed_fg_color); }
517
518
// &:active, &:checked { @include button(flat-active, $b_color, $inversed_fg_color); }
519
520
&:disabled { @include button(flat-disabled, $b_color, $inversed_fg_color); }
521
}
522
523
.osd & {
524
}
525
}
526
}
527
528
.stack-switcher > & {
529
// to position the needs attention dot, padding is added to the button
530
// child, a label needs just lateral padding while an icon needs vertical
531
// padding added too.
532
533
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
534
535
> label {
536
padding-left: 6px; // label padding
537
padding-right: 6px; //
538
}
539
540
> image {
541
padding-left: 6px; // image padding
542
padding-right: 6px; //
543
padding-top: 3px; //
544
padding-bottom: 3px; //
545
}
546
547
&.text-button {
548
// compensate text-button paddings
549
padding-left: 16px - 6px;
550
padding-right: 16px - 6px;
551
}
552
553
&.image-button {
554
// we want image buttons to have a 1:1 aspect ratio, so compensation
555
// of the padding added to the GtkImage is needed
556
padding-left: ($medium_size - 16px) / 2 - 6px;
557
padding-right: ($medium_size - 16px) / 2 - 6px;
558
}
559
560
&.needs-attention {
561
> label,
562
> image { @extend %needs_attention; }
563
564
&:checked {
565
> label,
566
> image {
567
animation: none;
568
background-image: none;
569
}
570
}
571
}
572
}
573
574
// hide separators
575
separator {
576
min-width: 0;
577
min-height: 0;
578
background: transparent;
579
}
580
581
// &.font,
582
// &.file { separator { background-color: transparent; }}
583
584
// &.font { > box > box > label { font-weight: bold; }}
585
586
// inline-toolbar buttons
587
.inline-toolbar & {
588
// @extend %button_basic.flat;
589
590
&:not(.text-button) { @extend %circular_button; }
591
}
592
593
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
594
}
595
596
%needs_attention {
597
animation: needs_attention $longer_duration $deceleration_curve forwards;
598
background-repeat: no-repeat;
599
background-position: right 3px;
600
background-size: 6px 6px;
601
602
&:dir(rtl) { background-position: left 3px; }
603
}
604
605
// all the following is for the +|- buttons on inline toolbars, that way
606
// should really be deprecated...
607
.inline-toolbar toolbutton > button { // redefining the button look is
608
// needed since those are flat...
609
}
610
611
// More inline toolbar buttons
612
toolbar.inline-toolbar toolbutton {
613
// > button.flat { @extend %linked_middle; }
614
615
// &:first-child > button.flat { @extend %linked:first-child; }
616
617
// &:last-child > button.flat { @extend %linked:last-child; }
618
619
// &:only-child > button.flat { @extend %linked:only-child; }
620
}
621
622
%linked_middle {
623
-gtk-outline-radius: 2px;
624
border-radius: 0;
625
}
626
627
%linked {
628
@extend %linked_middle;
629
630
&:first-child {
631
border-top-left-radius: 2px;
632
border-bottom-left-radius: 2px;
633
}
634
635
&:last-child {
636
border-top-right-radius: 2px;
637
border-bottom-right-radius: 2px;
638
}
639
640
&:only-child {
641
border-radius: 2px;
642
}
643
}
644
645
%linked_vertical_middle {
646
-gtk-outline-radius: 2px;
647
border-radius: 0;
648
}
649
650
%linked_vertical{
651
@extend %linked_vertical_middle;
652
653
&:first-child {
654
border-top-left-radius: 2px;
655
border-top-right-radius: 2px;
656
}
657
658
&:last-child {
659
border-bottom-left-radius: 2px;
660
border-bottom-right-radius: 2px;
661
}
662
663
&:only-child {
664
border-radius: 2px;
665
}
666
}
667
668
/* menu buttons */
669
modelbutton.flat,
670
.menuitem.button.flat {
671
min-height: $menuitem_size;
672
padding: 0 8px;
673
border-radius: 2px;
674
color: inherit;
675
676
@extend %simple_flat_button;
677
678
&:selected { @extend %selected_items; }
679
680
check,
681
radio {
682
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
683
684
&, &:hover { background-image: none; }
685
686
&:active { animation: none; }
687
688
&:last-child { margin-left: -8px; margin-right: -16px; }
689
690
&:first-child { margin-left: -16px; margin-right: -8px; }
691
}
692
693
check:not(:indeterminate):checked { @extend %check_checked; }
694
695
// radio:not(:indeterminate):checked { @extend %radio_checked; }
696
697
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
698
}
699
700
modelbutton.flat arrow {
701
background: none;
702
703
&:hover { background: none; }
704
705
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
706
707
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
708
}
709
710
button.color {
711
min-height: $small_size;
712
min-width: $small_size;
713
padding: $container_padding;
714
715
colorswatch:only-child {
716
// &, overlay { border-radius: 0; }
717
}
718
}
719
720
721
/*********
722
* Links *
723
*********/
724
*:link {
725
&, &:hover, &:active { color: $link_color; }
726
727
&:visited {
728
&, &:hover, &:active { color: $link_visited_color; }
729
}
730
731
@at-root %link_selected,
732
&:selected,
733
*:selected & { color: $inversed_fg_color; }
734
}
735
736
button:link,
737
button:visited {
738
@extend *:link;
739
740
> label { text-decoration-line: underline; }
741
}
742
743
/*****************
744
* GtkSpinButton *
745
*****************/
746
spinbutton {
747
&:not(.vertical) {
748
// in this horizontal configuration, the whole spinbutton
749
// behaves as the entry, so we extend the entry styling
750
// and nuke the style on the internal entry
751
@extend %entry;
752
753
padding: 0;
754
755
%spinbutton_entry,
756
entry {
757
min-width: $large_size - 8px * 2;
758
// reset all the other props since the spinbutton node is styled here
759
margin: 0;
760
border-image: none;
761
border-radius: 0;
762
box-shadow: none;
763
background-color: transparent;
764
}
765
766
button {
767
// margin: $container_padding;
768
border: solid $container_padding transparent;
769
770
@extend %simple_flat_button;
771
772
@extend %small_button;
773
774
&.up:dir(ltr),
775
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
776
777
&.up:dir(rtl),
778
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
779
}
780
}
781
782
// OSD horizontal
783
.osd &:not(.vertical) {
784
button {
785
}
786
}
787
788
// Vertical
789
&.vertical {
790
// in the vertical configuration, we treat the spinbutton
791
// as a box, and tweak the style of the entry in the middle
792
// so that it's linked
793
794
// FIXME: this should not be set at all, but otherwise it gets the wrong
795
// color
796
&:disabled { color: $disabled_fg_color; }
797
798
&:drop(active) {
799
box-shadow: none;
800
}
801
802
entry {
803
min-height: $medium_size;
804
min-width: $large_size;
805
padding: 0;
806
}
807
808
button {
809
min-height: $medium_size;
810
min-width: $large_size;
811
padding: 0;
812
813
@extend %simple_flat_button;
814
815
&.up { border-radius: 2px 2px 0 0; }
816
817
&.down { border-radius: 0 0 2px 2px; }
818
}
819
}
820
821
// OSD vertical
822
.osd &.vertical button:first-child {
823
}
824
825
// Misc
826
treeview &:not(.vertical) {
827
min-height: 0;
828
border-style: none;
829
border-radius: 0;
830
831
entry {
832
min-height: 0;
833
padding: 1px 2px;
834
}
835
}
836
}
837
838
839
/**************
840
* ComboBoxes *
841
**************/
842
combobox {
843
arrow {
844
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
845
min-height: 16px;
846
min-width: 16px;
847
}
848
849
button.combo:checked { transition: none; } // workaround for menuitem selection
850
851
menu,
852
.menu,
853
.context-menu {
854
padding: 2px 0;
855
856
menuitem {
857
min-height: $medium_size - 2px * 2;
858
padding: 0 ($medium_size - 16px) / 2;
859
}
860
}
861
862
&.linked {
863
button:nth-child(2) {
864
&:dir(ltr) { @extend %linked:last-child; }
865
&:dir(rtl) { @extend %linked:first-child; }
866
}
867
}
868
869
&:drop(active) { // FIXME: untested
870
box-shadow: none;
871
872
// button.combo { @extend %button_basic:drop(active); }
873
}
874
}
875
876
.linked > combobox > box > button.combo {
877
// the combo is a composite widget so the way we do button linking doesn't
878
// work, special case needed. See
879
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
880
881
&:dir(ltr),
882
&:dir(rtl) { @extend %linked_middle; } // specificity bump
883
}
884
885
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
886
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
887
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
888
889
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
890
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
891
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
892
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
893
894
895
/************
896
* Toolbars *
897
************/
898
toolbar {
899
-GtkWidget-window-dragging: true;
900
padding: $container_padding / 2;
901
background-color: $bg_color;
902
903
button { @extend %button_basic.flat; }
904
905
// on OSD
906
.osd & { background-color: transparent; }
907
908
// stand-alone OSD toolbars
909
&.osd {
910
transition: $shadow_transition;
911
padding: $container_padding;
912
border-radius: 2px;
913
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
914
background-color: $base_color;
915
916
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
917
918
&.left,
919
&.right,
920
&.top,
921
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
922
}
923
924
// toolbar separators
925
&.horizontal separator { margin: $container_padding / 2; }
926
&.vertical separator { margin: $container_padding / 2; }
927
928
&:not(.inline-toolbar):not(.osd) {
929
scale,
930
entry,
931
spinbutton,
932
button { margin: $container_padding / 2; }
933
934
.linked entry,
935
.linked spinbutton,
936
.linked button {
937
&:not(:first-child) { margin-left: 0; }
938
&:not(:last-child) { margin-right: 0; }
939
}
940
941
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
942
}
943
}
944
945
//searchbar, location-bar & inline-toolbar
946
.inline-toolbar {
947
padding: $container_padding;
948
border-style: solid;
949
border-width: 0 1px 1px;
950
border-color: $borders_color;
951
background-color: $alt_base_color;
952
}
953
954
searchbar,
955
.location-bar {
956
padding: $container_padding;
957
border-style: solid;
958
border-width: 0 0 1px;
959
border-color: $borders_color;
960
background-color: $bg_color;
961
background-clip: border-box;
962
}
963
964
965
/***************
966
* Header bars *
967
***************/
968
%titlebar,
969
headerbar {
970
transition: background-color $shorter_duration $deceleration_curve;
971
min-height: $large_size;
972
padding: 0 $container_padding;
973
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
974
background-color: $headerbar_color;
975
color: $inversed_fg_color;
976
977
&:backdrop {
978
color: $secondary_inversed_fg_color;
979
}
980
981
.title {
982
transition: $longer_transition;
983
padding: 0 12px;
984
font-weight: bold;
985
}
986
987
.subtitle {
988
transition: $longer_transition;
989
padding: 0 12px;
990
font-size: smaller;
991
992
@extend .dim-label;
993
}
994
995
button:not(.suggested-action):not(.destructive-action) {
996
@extend %button_basic.flat;
997
998
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
999
currentColor 0%,
1000
transparent 0%)
1001
0 0 0 / 0 0 0px;
1002
1003
&:checked {
1004
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1005
currentColor 100%,
1006
transparent 0%)
1007
0 0 2 / 0 0 2px;
1008
1009
&, &:disabled { background-color: transparent; }
1010
}
1011
}
1012
1013
button.suggested-action, button.destructive-action {
1014
&:disabled {
1015
color: gtkalpha(currentColor, $disabled_opacity);
1016
1017
> label { color: inherit; }
1018
}
1019
}
1020
1021
&.selection-mode {
1022
transition: background-color 0 $longer_duration;
1023
animation: header_ripple_effect $longer_duration $deceleration_curve;
1024
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1025
background-color: $primary_color;
1026
color: $inversed_fg_color;
1027
1028
&:backdrop {
1029
color: $secondary_inversed_fg_color;
1030
}
1031
1032
.subtitle:link { @extend *:link:selected; }
1033
1034
button:not(.suggested-action):not(.destructive-action) {
1035
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1036
currentColor 0%,
1037
transparent 0%)
1038
0 0 0 / 0 0 0px;
1039
color: currentColor;
1040
1041
&:disabled {
1042
color: gtkalpha(currentColor, $disabled_opacity);
1043
1044
> label { color: inherit; }
1045
}
1046
1047
&:checked {
1048
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1049
currentColor 100%,
1050
transparent 0%)
1051
0 0 2 / 0 0 2px;
1052
color: currentColor;
1053
1054
&:disabled {
1055
color: gtkalpha(currentColor, $disabled_opacity);
1056
1057
> label { color: inherit; }
1058
}
1059
}
1060
}
1061
1062
.selection-menu {
1063
padding-left: 16px;
1064
padding-right: 16px;
1065
1066
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1067
1068
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1069
}
1070
}
1071
1072
.fullscreen &,
1073
.tiled &,
1074
.maximized & {
1075
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1076
box-shadow: $z-depth-1;
1077
}
1078
1079
&.default-decoration {
1080
min-height: $small_size;
1081
padding: $container_padding;
1082
border-width: 0;
1083
1084
button.titlebutton {
1085
min-height: $small_size;
1086
min-width: $small_size;
1087
margin: 0;
1088
padding: 0;
1089
1090
&:active { // add fallback
1091
background-image: radial-gradient(circle farthest-corner at center,
1092
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1093
transparent 0%),
1094
image(gtkalpha(currentColor, $lower_opacity / 2));
1095
}
1096
}
1097
}
1098
1099
.solid-csd & {
1100
&:dir(rtl), &:dir(ltr) { // specificity bump
1101
margin-left: -2px;
1102
margin-right: -2px;
1103
margin-top: -2px;
1104
// border-radius: 0;
1105
box-shadow: inset 0 1px $secondary_highlight_color;
1106
}
1107
}
1108
}
1109
1110
headerbar {
1111
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1112
entry,
1113
spinbutton,
1114
// separator,
1115
button {
1116
margin-top: $container_padding;
1117
margin-bottom: $container_padding;
1118
}
1119
1120
switch {
1121
margin-top: $container_padding * 2;
1122
margin-bottom: $container_padding * 2;
1123
}
1124
}
1125
1126
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1127
border-top-left-radius: 2px;
1128
border-top-right-radius: 2px;
1129
}
1130
1131
headerbar {
1132
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1133
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1134
1135
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1136
}
1137
1138
.titlebar:not(headerbar) {
1139
window.csd > & {
1140
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1141
padding: 0;
1142
background-color: transparent;
1143
background-image: none;
1144
border-style: none;
1145
box-shadow: none;
1146
}
1147
1148
> separator {
1149
background-color: $headerbar_color;
1150
background-image: image($borders_color);
1151
}
1152
1153
@extend %titlebar;
1154
}
1155
1156
1157
/************
1158
* Pathbars *
1159
************/
1160
%pathbar_button,
1161
.path-bar button {
1162
&.text-button, &.image-button, & {
1163
padding-left: 6px;
1164
padding-right: 6px;
1165
}
1166
1167
&.text-button.image-button, & {
1168
// label:last-child { padding-left: 2px; padding-right: 8px; }
1169
// label:first-child { padding-left: 8px; padding-right: 2px; }
1170
}
1171
1172
image {
1173
padding-left: ($medium_size - 16px) / 2 - 6px;
1174
padding-right: ($medium_size - 16px) / 2 - 6px;
1175
}
1176
1177
&.slider-button {
1178
padding-left: 0;
1179
padding-right: 0;
1180
}
1181
1182
:not(headerbar) & {
1183
@extend %flat_button;
1184
1185
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1186
$primary_color 0%,
1187
transparent 0%)
1188
0 0 0 / 0 0 0px;
1189
border-radius: 2px;
1190
1191
&:checked {
1192
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1193
$primary_color 100%,
1194
transparent 0%)
1195
0 0 2 / 0 0 2px;
1196
1197
&, &:disabled { background-color: transparent; }
1198
}
1199
}
1200
}
1201
1202
1203
/**************
1204
* Tree Views *
1205
**************/
1206
treeview.view {
1207
@at-root * {
1208
-GtkTreeView-horizontal-separator: 4;
1209
-GtkTreeView-grid-line-width: 1;
1210
-GtkTreeView-grid-line-pattern: '';
1211
-GtkTreeView-tree-line-width: 1;
1212
-GtkTreeView-tree-line-pattern: '';
1213
-GtkTreeView-expander-size: 16;
1214
}
1215
1216
border-left-color: $track_color; // this is actually the tree lines color,
1217
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1218
1219
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1220
1221
&:hover, &:active, &:selected { border-radius: 0; }
1222
1223
&.separator {
1224
min-height: 1px + 2px * 2;
1225
color: $borders_color;
1226
}
1227
1228
&:drop(active) {
1229
border-style: solid none;
1230
border-width: 1px;
1231
border-color: $accent_color;
1232
1233
&.after { border-top-style: none; }
1234
1235
&.before { border-bottom-style: none; }
1236
}
1237
1238
&.expander {
1239
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1240
-gtk-icon-transform: rotate(-90deg);
1241
1242
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1243
1244
&:checked { -gtk-icon-transform: unset; }
1245
1246
color: $secondary_fg_color;
1247
1248
&:hover, &:active { color: $fg_color; }
1249
1250
&:disabled { color: $disabled_secondary_fg_color; }
1251
1252
&:selected {
1253
color: $secondary_inversed_fg_color;
1254
1255
&:hover, &:active { color: $inversed_fg_color; }
1256
1257
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1258
}
1259
}
1260
1261
&.progressbar { // progress bar in treeviews
1262
border-style: none none solid;
1263
border-width: $bar_size;
1264
border-color: $primary_color;
1265
box-shadow: none;
1266
background-color: transparent;
1267
1268
&:selected { border-color: currentColor; }
1269
}
1270
1271
&.trough { // progress bar trough in treeviews
1272
border-style: none none solid;
1273
border-width: $bar_size;
1274
border-color: scale-alpha($primary_color, $lower_opacity);
1275
box-shadow: none;
1276
background-color: transparent;
1277
1278
&:selected { border-color: $track_color; }
1279
}
1280
1281
header {
1282
button {
1283
@extend row.activatable;
1284
1285
padding: 2px 6px;
1286
border-style: none solid solid none;
1287
border-width: 1px;
1288
border-color: $borders_color;
1289
border-radius: 0;
1290
background-clip: border-box;
1291
1292
&, &:hover, &:active { box-shadow: none; }
1293
1294
&, &:disabled { background-color: $base_color; }
1295
1296
&:last-child { border-right-style: none; }
1297
}
1298
}
1299
1300
button.dnd,
1301
header.button.dnd { // for treeview-like derive widgets
1302
padding: 2px 6px;
1303
border-style: none solid solid;
1304
border-width: 1px;
1305
border-color: $borders_color;
1306
border-radius: 0;
1307
box-shadow: none;
1308
background-color: $base_color;
1309
background-clip: border-box;
1310
color: $primary_color;
1311
}
1312
1313
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1314
}
1315
1316
1317
/*********
1318
* Menus *
1319
*********/
1320
menubar,
1321
.menubar {
1322
-GtkWidget-window-dragging: true;
1323
padding: 0;
1324
// box-shadow: inset 0 -1px $borders_color;
1325
background-color: $headerbar_color;
1326
1327
> menuitem {
1328
transition: $shorter_transition;
1329
min-height: 20px;
1330
padding: 4px 8px;
1331
color: $secondary_inversed_fg_color;
1332
1333
&:hover { //Seems like it :hover even with keyboard focus
1334
transition: none;
1335
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1336
color: $inversed_fg_color;
1337
}
1338
1339
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1340
}
1341
}
1342
1343
menu,
1344
.menu,
1345
.context-menu {
1346
margin: 4px 0;
1347
padding: 4px 0;
1348
box-shadow: inset 0 1px $highlight_color;
1349
background-color: $base_color;
1350
border: 1px solid $borders_color; // adds borders in a non composited env
1351
1352
.csd & {
1353
border: none; // axes borders in a composited env
1354
border-radius: 2px;
1355
}
1356
1357
menuitem {
1358
transition: $shorter_transition;
1359
min-height: 20px;
1360
min-width: 40px;
1361
padding: 4px 8px;
1362
font: initial;
1363
text-shadow: none;
1364
1365
&:hover {
1366
transition: none;
1367
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1368
}
1369
1370
&:disabled { color: $disabled_fg_color; }
1371
1372
// submenu indicators
1373
arrow {
1374
min-height: 16px;
1375
min-width: 16px;
1376
1377
&:dir(ltr) {
1378
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1379
margin-left: 8px;
1380
}
1381
1382
&:dir(rtl) {
1383
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1384
margin-right: 8px;
1385
}
1386
}
1387
1388
// avoids labels color being overridden, see
1389
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1390
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1391
}
1392
1393
// overflow arrows
1394
> arrow {
1395
min-height: 16px;
1396
min-width: 16px;
1397
padding: 4px;
1398
border-radius: 0;
1399
background-color: $base_color;
1400
color: $secondary_fg_color;
1401
1402
&.top {
1403
margin-top: -4px;
1404
border-bottom: 1px solid $borders_color;
1405
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1406
}
1407
1408
&.bottom {
1409
margin-bottom: -4px;
1410
border-top: 1px solid $borders_color;
1411
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1412
}
1413
1414
&:hover {
1415
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1416
color: $fg_color;
1417
}
1418
1419
&:disabled {
1420
border-color: transparent;
1421
background-color: transparent;
1422
color: transparent;
1423
// color: $disabled_secondary_fg_color;
1424
}
1425
}
1426
1427
separator { margin: 4px 0; }
1428
}
1429
1430
menuitem {
1431
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1432
1433
check,
1434
radio {
1435
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1436
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1437
}
1438
}
1439
1440
.csd.popup { border-radius: 2px; }
1441
1442
1443
/***************
1444
* Popovers *
1445
***************/
1446
popover.background {
1447
transition: $shadow_transition;
1448
padding: 0;
1449
box-shadow: $z-depth-2; // TODO: this should really have a highlight
1450
background-color: $lighter_bg_color;
1451
1452
&:backdrop { box-shadow: $z-depth-1; }
1453
1454
&, .csd & {
1455
border-style: solid;
1456
border-width: 1px;
1457
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1458
border-radius: 2px + 1px;
1459
}
1460
1461
> list,
1462
> .view,
1463
> toolbar {
1464
border-style: none;
1465
box-shadow: none;
1466
background-color: transparent;
1467
}
1468
1469
&, .csd & {
1470
&.touch-selection,
1471
&.magnifier,
1472
&.osd { @extend %osd; }
1473
}
1474
1475
// entry { @extend %entry.flat; }
1476
1477
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1478
1479
button.model {
1480
@extend %simple_flat_button;
1481
1482
min-height: 32px;
1483
padding: 0 8px;
1484
border-radius: 2px;
1485
1486
&:checked {
1487
background-color: $primary_color;
1488
color: $inversed_fg_color;
1489
}
1490
}
1491
1492
separator { margin: 4px 0; }
1493
1494
list separator { margin: 0; }
1495
}
1496
1497
/*************
1498
* Notebooks *
1499
*************/
1500
notebook {
1501
> header {
1502
border-width: 1px;
1503
border-color: $borders_color;
1504
background-color: $bg_color;
1505
background-clip: border-box;
1506
1507
&.top {
1508
border-bottom-style: solid;
1509
> tabs {
1510
margin-bottom: -1px;
1511
> tab {
1512
1513
&:hover { box-shadow: inset 0 -2px $track_color; }
1514
1515
&:checked { box-shadow: inset 0 -2px $primary_color; }
1516
}
1517
}
1518
}
1519
1520
&.bottom {
1521
border-top-style: solid;
1522
> tabs {
1523
margin-top: -1px;
1524
> tab {
1525
1526
&:hover { box-shadow: inset 0 2px $track_color; }
1527
1528
&:checked { box-shadow: inset 0 2px $primary_color; }
1529
}
1530
}
1531
}
1532
1533
&.left {
1534
border-right-style: solid;
1535
> tabs {
1536
margin-right: -1px;
1537
> tab {
1538
1539
&:hover { box-shadow: inset -2px 0 $track_color; }
1540
1541
&:checked { box-shadow: inset -2px 0 $primary_color; }
1542
}
1543
}
1544
}
1545
1546
&.right {
1547
border-left-style: solid;
1548
> tabs {
1549
margin-left: -1px;
1550
> tab {
1551
1552
&:hover { box-shadow: inset 2px 0 $track_color; }
1553
1554
&:checked { box-shadow: inset 2px 0 $primary_color; }
1555
}
1556
}
1557
}
1558
1559
&.top > tabs > arrow {
1560
@extend %notebook_vert_arrows;
1561
1562
border-top-style: none;
1563
}
1564
1565
&.bottom > tabs > arrow {
1566
@extend %notebook_vert_arrows;
1567
1568
border-bottom-style: none;
1569
}
1570
1571
@at-root %notebook_vert_arrows {
1572
padding-left: 4px;
1573
padding-right: 4px;
1574
1575
&.down {
1576
margin-left: -8px;
1577
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1578
}
1579
1580
&.up {
1581
margin-right: -8px;
1582
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1583
}
1584
}
1585
1586
&.left > tabs > arrow {
1587
@extend %notebook_horz_arrows;
1588
1589
border-left-style: none;
1590
}
1591
1592
&.right > tabs > arrow {
1593
@extend %notebook_horz_arrows;
1594
1595
border-right-style: none;
1596
}
1597
1598
@at-root %notebook_horz_arrows {
1599
padding-top: 4px;
1600
padding-bottom: 4px;
1601
1602
&.down {
1603
margin-top: -8px;
1604
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1605
}
1606
1607
&.up {
1608
margin-bottom: -8px;
1609
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1610
}
1611
}
1612
1613
> tabs > arrow {
1614
@extend %simple_flat_button;
1615
1616
min-height: 16px;
1617
min-width: 16px;
1618
border-radius: 0;
1619
}
1620
1621
tab {
1622
transition: $longer_transition;
1623
min-height: $small_size;
1624
min-width: $small_size;
1625
padding: $container_padding 12px;
1626
1627
outline-offset: -6px;
1628
1629
border-width: 1px; // for reorderable tabs
1630
border-color: transparent; //
1631
1632
color: $secondary_fg_color;
1633
font-weight: 500;
1634
1635
&:hover {
1636
color: $fg_color;
1637
1638
&.reorderable-page {
1639
border-color: $borders_color;
1640
background-color: $alt_base_color;
1641
}
1642
}
1643
1644
&:disabled { color: $disabled_secondary_fg_color; }
1645
1646
&:checked {
1647
animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
1648
color: $fg_color;
1649
1650
&:disabled { color: $disabled_fg_color; }
1651
1652
&.reorderable-page {
1653
border-color: $borders_color;
1654
background-color: $base_color;
1655
}
1656
}
1657
1658
// colors the button like the label, overridden otherwise
1659
button.flat {
1660
@extend %small_button;
1661
1662
&:last-child {
1663
margin-left: $container_padding;
1664
margin-right: $container_padding - 12px;
1665
}
1666
1667
&:first-child {
1668
margin-left: $container_padding - 12px;
1669
margin-right: $container_padding;
1670
}
1671
}
1672
}
1673
1674
&.top,
1675
&.bottom {
1676
tabs {
1677
padding-left: 8px;
1678
padding-right: 8px;
1679
1680
&:not(:only-child) {
1681
&:first-child { margin-left: 0; }
1682
&:last-child { margin-right: 0; }
1683
}
1684
1685
tab {
1686
&.reorderable-page {
1687
margin: 0 -1px;
1688
border-style: none solid;
1689
}
1690
}
1691
}
1692
}
1693
1694
&.left,
1695
&.right {
1696
tabs {
1697
padding-top: 8px;
1698
padding-bottom: 8px;
1699
1700
&:not(:only-child) {
1701
&:first-child { margin-top: 0; }
1702
&:last-child { margin-bottom: 0; }
1703
}
1704
1705
tab {
1706
&.reorderable-page {
1707
margin: -1px 0;
1708
border-style: solid none;
1709
}
1710
}
1711
}
1712
}
1713
}
1714
1715
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1716
background-color: $base_color;
1717
1718
entry,
1719
spinbutton:not(.vertical) { @extend %entry.flat; }
1720
1721
revealer entry,
1722
revealer spinbutton:not(.vertical) { @extend %entry; }
1723
1724
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1725
}
1726
}
1727
1728
1729
/**************
1730
* Scrollbars *
1731
**************/
1732
scrollbar {
1733
$_slider_min_length: 24px;
1734
1735
// disable steppers
1736
@at-root * {
1737
-GtkScrollbar-has-backward-stepper: false;
1738
-GtkScrollbar-has-forward-stepper: false;
1739
}
1740
1741
transition: $longer_transition;
1742
background-color: $base_color;
1743
background-clip: $extra_background_clip;
1744
1745
// scrollbar border
1746
&.top { border-bottom: 1px solid $borders_color; }
1747
&.bottom { border-top: 1px solid $borders_color; }
1748
&.left { border-right: 1px solid $borders_color; }
1749
&.right { border-left: 1px solid $borders_color; }
1750
1751
// slider
1752
slider {
1753
transition: $shorter_transition, margin 0, border-width 0;
1754
min-width: 8px;
1755
min-height: 8px;
1756
border: 4px solid transparent;
1757
border-radius: $circular_radius;
1758
background-clip: padding-box;
1759
background-color: $tertiary_fg_color;
1760
1761
&:hover { background-color: $secondary_fg_color; }
1762
1763
&:active { background-color: $fg_color; }
1764
1765
&:disabled { background-color: $disabled_tertiary_fg_color; }
1766
}
1767
1768
&.fine-tune {
1769
slider {
1770
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1771
min-width: 4px;
1772
min-height: 4px;
1773
}
1774
1775
&.horizontal slider { margin: 2px 0; }
1776
1777
&.vertical slider { margin: 0 2px; }
1778
}
1779
1780
&.overlay-indicator {
1781
&:not(.dragging):not(.hovering) {
1782
border-color: transparent;
1783
background-color: transparent;
1784
1785
slider {
1786
min-width: 4px;
1787
min-height: 4px;
1788
margin: 4px - 1px;
1789
border: 1px solid scale-alpha($base_color, $lower_opacity);
1790
}
1791
1792
button {
1793
min-width: 4px;
1794
min-height: 4px;
1795
margin: 4px - 1px;
1796
border: 1px solid scale-alpha($base_color, $lower_opacity);
1797
border-radius: $circular_radius;
1798
background-color: $tertiary_fg_color;
1799
background-clip: padding-box;
1800
-gtk-icon-source: none;
1801
1802
&:disabled { background-color: $disabled_tertiary_fg_color; }
1803
}
1804
1805
&.horizontal {
1806
slider { min-width: $_slider_min_length; }
1807
1808
button { min-width: 8px; }
1809
}
1810
1811
&.vertical {
1812
slider { min-height: $_slider_min_length; }
1813
1814
button { min-height: 8px; }
1815
}
1816
}
1817
1818
&.dragging,
1819
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1820
}
1821
1822
&.horizontal slider { min-width: $_slider_min_length; }
1823
1824
&.vertical slider { min-height: $_slider_min_length; }
1825
1826
// button styling
1827
button {
1828
@extend %simple_flat_button;
1829
1830
min-width: 16px;
1831
min-height: 16px;
1832
padding: 0;
1833
border-radius: 0;
1834
}
1835
1836
// button icons
1837
&.vertical {
1838
button {
1839
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1840
1841
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1842
}
1843
}
1844
1845
&.horizontal {
1846
button {
1847
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1848
1849
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1850
}
1851
}
1852
}
1853
1854
1855
/**********
1856
* Switch *
1857
**********/
1858
switch {
1859
transition: $longer_transition;
1860
margin: $container_padding 0;
1861
border: 4px solid transparent;
1862
border-radius: $circular_radius;
1863
background-color: $track_color;
1864
background-clip: padding-box;
1865
font-size: 0;
1866
1867
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1868
1869
&:checked {
1870
background-color: scale-alpha($accent_color, 0.5);
1871
1872
&:disabled {
1873
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1874
color: $disabled_fg_color;
1875
}
1876
}
1877
1878
slider {
1879
@include entry(normal);
1880
1881
transition: $longer_transition, $shadow_transition, margin 0;
1882
min-width: $small_size;
1883
min-height: $small_size;
1884
margin: -4px 0 -4px -4px;
1885
-gtk-outline-radius: $circular_radius;
1886
border-radius: $circular_radius;
1887
}
1888
1889
&:hover slider { @include entry(focus); }
1890
1891
&:checked slider {
1892
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0 $longer_duration;
1893
animation: needs_attention $longer_duration $deceleration_curve;
1894
margin: -4px -4px -4px 0;
1895
background-color: $accent_color;
1896
color: $inversed_fg_color;
1897
}
1898
1899
&:disabled slider { @include entry(disabled); }
1900
1901
&:checked:disabled slider { animation: none; }
1902
1903
row:selected & {
1904
}
1905
}
1906
1907
1908
/*************************
1909
* Check and Radio items *
1910
*************************/
1911
// draw regular check and radio items using our PNG assets
1912
// all assets are rendered from assets.svg. never add pngs directly
1913
1914
//selection-mode
1915
@each $s,$as in ('','-selectionmode'),
1916
(':hover', '-hover-selectionmode'),
1917
(':checked', '-checked-selectionmode'),
1918
(':checked:hover', '-checked-hover-selectionmode') {
1919
.view.content-view.check#{$s}:not(list) {
1920
-gtk-icon-shadow: $z-depth-1;
1921
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1922
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1923
margin: 8px;
1924
background-color: transparent;
1925
}
1926
}
1927
1928
checkbutton.text-button,
1929
radiobutton.text-button {
1930
// this is for a nice focus on check and radios text
1931
padding: 2px;
1932
outline-offset: 0;
1933
1934
label:not(:only-child) { margin: 0 4px; }
1935
}
1936
1937
check,
1938
radio {
1939
min-height: 24px;
1940
min-width: 24px;
1941
margin: -($large_size - 24px) / 2;
1942
padding: ($large_size - 24px) / 2;
1943
1944
@extend %simple_flat_button;
1945
1946
@extend %circular_button;
1947
1948
&:checked, &:indeterminate { color: $accent_color; }
1949
1950
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1951
1952
// &:only-child { margin: -12px; }
1953
1954
row &:not(:checked):not(:indeterminate) {
1955
color: gtkalpha(currentColor, $enabled_opacity);
1956
1957
&:hover, &:active { color: currentColor; }
1958
1959
&:disabled { color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity); }
1960
}
1961
1962
menu menuitem & {
1963
transition: none;
1964
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1965
1966
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1967
1968
&, &:hover, &:disabled {
1969
background-image: none;
1970
// color: inherit;
1971
// animation: none;
1972
}
1973
}
1974
}
1975
1976
%check,
1977
check {
1978
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1979
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1980
1981
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1982
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1983
1984
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1985
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1986
}
1987
1988
$radio_indicator: 10 / ($large_size / 1px) / 2;
1989
$radio_radius_slice: #{$large_size / 2 / 1px};
1990
$radio_radius_width: #{$large_size / 2};
1991
1992
%radio,
1993
radio {
1994
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1995
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1996
1997
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1998
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1999
2000
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2001
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2002
2003
border-image: -gtk-gradient(radial,
2004
center center, 0,
2005
center center, 0.001,
2006
to($accent_color),
2007
to(transparent))
2008
$radio_radius_slice / $radio_radius_width;
2009
2010
&:checked {
2011
border-image: -gtk-gradient(radial,
2012
center center, 0,
2013
center center, $radio_indicator,
2014
to($accent_color),
2015
to(transparent))
2016
$radio_radius_slice / $radio_radius_width;
2017
}
2018
2019
&:checked:disabled {
2020
border-image: -gtk-gradient(radial,
2021
center center, 0,
2022
center center, $radio_indicator,
2023
to(scale-alpha($accent_color, $disabled_opacity)),
2024
to(transparent))
2025
$radio_radius_slice / $radio_radius_width;
2026
}
2027
2028
&:indeterminate:checked {
2029
border-image: -gtk-gradient(radial,
2030
center center, 0,
2031
center center, 0.001,
2032
to($accent_color),
2033
to(transparent))
2034
$radio_radius_slice / $radio_radius_width;
2035
}
2036
}
2037
2038
// let's animate things
2039
@keyframes check_check {
2040
from { -gtk-icon-transform: rotate(90deg); }
2041
to { -gtk-icon-transform: unset; }
2042
}
2043
2044
@keyframes check_radio { // FIXME: cannot animate border-image
2045
from {
2046
border-image: -gtk-gradient(radial,
2047
center center, 0,
2048
center center, 0.001,
2049
to($accent_color),
2050
to(transparent))
2051
$radio_radius_slice / $radio_radius_width;
2052
}
2053
2054
to {
2055
border-image: -gtk-gradient(radial,
2056
center center, 0,
2057
center center, $radio_indicator,
2058
to($accent_color),
2059
to(transparent))
2060
$radio_radius_slice / $radio_radius_width;
2061
}
2062
}
2063
2064
@keyframes check_indeterminate {
2065
from { -gtk-icon-transform: unset; }
2066
50% { -gtk-icon-transform: scale(0, 1); }
2067
to { -gtk-icon-transform: unset; }
2068
}
2069
2070
%check_checked,
2071
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2072
2073
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2074
2075
// %radio_checked,
2076
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2077
2078
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2079
2080
%indeterminate_checked,
2081
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2082
2083
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2084
2085
// no animations in menus
2086
menu menuitem {
2087
check:not(:indeterminate):checked,
2088
radio:not(:indeterminate):checked,
2089
check:indeterminate:checked,
2090
radio:indeterminate:checked { animation: none; }
2091
}
2092
2093
treeview.view check,
2094
treeview.view radio {
2095
padding: 0;
2096
2097
&:hover {
2098
box-shadow: inset 0 0 0 10000px gtkalpha($fg_color, 0.05);
2099
background-image: none;
2100
2101
&:disabled { box-shadow: none; }
2102
2103
&:selected { box-shadow: inset 0 0 0 10000px gtkalpha($inversed_fg_color, 0.05); }
2104
}
2105
2106
& {
2107
color: $secondary_fg_color;
2108
2109
&:hover, &:active { color: $fg_color; }
2110
2111
&:disabled { color: $disabled_secondary_fg_color; }
2112
2113
&:checked, &:indeterminate { color: $accent_color; }
2114
2115
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2116
}
2117
2118
&:selected {
2119
color: $secondary_inversed_fg_color;
2120
2121
&:hover, &:active { color: $inversed_fg_color; }
2122
2123
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2124
2125
&:checked, &:indeterminate { color: $accent_color; }
2126
2127
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2128
}
2129
}
2130
2131
treeview.view radio:checked {
2132
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2133
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2134
border-image: none;
2135
}
2136
2137
2138
/************
2139
* GtkScale *
2140
************/
2141
scale {
2142
// sizing
2143
$_marks_lenght: 8px;
2144
$_marks_distance: 8px;
2145
2146
$slider_size: 24px;
2147
$marks_slider_size: 30px;
2148
2149
$slider_margin: -($slider_size - $bar_size) / 2;
2150
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2151
2152
$color_slider_margin: -($slider_size) / 2;
2153
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2154
2155
min-height: $medium_size - $slider_size;
2156
min-width: $medium_size - $slider_size;
2157
padding: ($slider_size / 2);
2158
2159
* { transition: $longer_transition; }
2160
2161
// the slider is inside the trough, so to have make it bigger there's a negative margin
2162
slider {
2163
min-height: $slider_size;
2164
min-width: $slider_size;
2165
margin: $slider_margin;
2166
}
2167
2168
// the backing bit
2169
trough {
2170
outline-offset: 2px;
2171
background-color: $track_color;
2172
2173
&:disabled { color: $disabled_fg_color; }
2174
}
2175
2176
// the colored part of the backing bit
2177
highlight {
2178
background-color: $accent_color;
2179
2180
&:disabled { background-color: transparent; }
2181
}
2182
2183
// this is another differently styled part of the backing bit, the most relevant use case is for example
2184
// in media player to indicate how much video stream as been cached
2185
fill {
2186
background-color: $track_color;
2187
2188
&:disabled { background-color: transparent; }
2189
}
2190
2191
slider {
2192
transition: all $shorter_duration $standard_curve;
2193
// border-radius: 100%;
2194
// background-color: $accent_color;
2195
background-repeat: no-repeat;
2196
background-position: center;
2197
2198
@each $s,$as in ('',''),
2199
(':disabled','-insensitive') {
2200
&#{$s} {
2201
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2202
background-image: -gtk-scaled(url('#{$_url}.png'),
2203
url('#{$_url}@2.png'));
2204
}
2205
}
2206
2207
background-size: calc(100% - 8px);
2208
2209
&:hover { background-size: calc(100% - 4px); }
2210
2211
&:active { background-size: calc(100% - 0px); }
2212
}
2213
2214
// click-and-hold the slider to activate
2215
&.fine-tune {
2216
// to make the slider shrink in fine-tune mode
2217
slider { background-size: calc(100% - 12px); }
2218
}
2219
2220
value { color: gtkalpha(currentColor, $hint_opacity); }
2221
2222
marks {
2223
color: $track_color;
2224
2225
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2226
(bottom, bottom, top),
2227
(top, left, right),
2228
(bottom, right, left) {
2229
&.#{$marks_class} {
2230
margin-#{$marks_margin}: $_marks_distance;
2231
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2232
}
2233
}
2234
}
2235
2236
&.horizontal {
2237
indicator {
2238
min-height: $_marks_lenght;
2239
min-width: 1px;
2240
}
2241
}
2242
2243
&.vertical {
2244
indicator {
2245
min-height: 1px;
2246
min-width: $_marks_lenght;
2247
}
2248
}
2249
2250
// *WARNING* scale with marks madness following
2251
$suffix: if($variant == 'light', '', '-dark');
2252
2253
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2254
('vertical', 'vert') {
2255
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2256
('scale-has-marks-below', ':first-child:not(:only-child)') {
2257
@each $state, $state_infix in ('', ''),
2258
(':disabled', '-insensitive') {
2259
&.#{$dir_class} {
2260
%#{$marks_infix}-#{$dir_infix},
2261
contents#{$nth_child} > trough > slider {
2262
&#{$state} {
2263
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2264
2265
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2266
}
2267
2268
@if $dir_class == 'horizontal' {
2269
min-height: $marks_slider_size;
2270
min-width: $slider_size;
2271
2272
@if $marks_infix == 'scale-has-marks-above' {
2273
margin-top: $marks_slider_margin;
2274
2275
background-position: center calc(100% - 4px);
2276
2277
&:hover { background-position: center calc(100% - 2px); }
2278
2279
&:active { background-position: center calc(100% - 0px); }
2280
}
2281
2282
@if $marks_infix == 'scale-has-marks-below' {
2283
margin-bottom: $marks_slider_margin;
2284
2285
background-position: center calc(4px);
2286
2287
&:hover { background-position: center calc(2px); }
2288
2289
&:active { background-position: center calc(0px); }
2290
}
2291
}
2292
2293
@if $dir_class == 'vertical' {
2294
min-height: $slider_size;
2295
min-width: $marks_slider_size;
2296
2297
@if $marks_infix == 'scale-has-marks-above' {
2298
margin-left: $marks_slider_margin;
2299
2300
background-position: calc(4px) center;
2301
2302
&:hover { background-position: calc(2px) center; }
2303
2304
&:active { background-position: calc(0px) center; }
2305
}
2306
2307
@if $marks_infix == 'scale-has-marks-below' {
2308
margin-right: $marks_slider_margin;
2309
2310
background-position: calc(100% - 4px) center;
2311
2312
&:hover { background-position: calc(100% - 2px) center; }
2313
2314
&:active { background-position: calc(100% - 0px) center; }
2315
}
2316
}
2317
}
2318
2319
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2320
&.fine-tune contents#{$nth_child} > trough > slider {
2321
// bigger negative margins to make the trough grow here as well
2322
2323
@if $dir_class == 'horizontal' {
2324
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2325
2326
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2327
}
2328
2329
@if $dir_class == 'vertical' {
2330
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2331
2332
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2333
}
2334
}
2335
}
2336
}
2337
}
2338
}
2339
2340
&.color {
2341
min-height: 0;
2342
min-width: 0;
2343
2344
&.horizontal {
2345
padding: 0 0 12px 0;
2346
2347
// trough { padding-bottom: $bar_size; }
2348
2349
slider {
2350
@extend %scale-has-marks-above-horz;
2351
2352
margin-bottom: $color_slider_margin;
2353
margin-top: $color_marks_slider_margin;
2354
}
2355
}
2356
2357
&.vertical {
2358
&:dir(ltr) {
2359
padding: 0 0 0 12px;
2360
2361
// trough { padding-left: $bar_size; }
2362
2363
slider {
2364
@extend %scale-has-marks-below-vert;
2365
2366
margin-left: $color_slider_margin;
2367
margin-right: $color_marks_slider_margin;
2368
}
2369
}
2370
2371
&:dir(rtl) {
2372
padding: 0 12px 0 0;
2373
2374
// trough { padding-right: $bar_size; }
2375
2376
slider {
2377
@extend %scale-has-marks-above-vert;
2378
2379
margin-right: $color_slider_margin;
2380
margin-left: $color_marks_slider_margin;
2381
}
2382
}
2383
}
2384
2385
&.fine-tune {
2386
&.horizontal {
2387
slider {
2388
@extend %scale-has-marks-above-horz-fine-tune;
2389
}
2390
}
2391
2392
&.vertical {
2393
&:dir(ltr) {
2394
slider {
2395
@extend %scale-has-marks-below-vert-fine-tune;
2396
}
2397
}
2398
2399
&:dir(rtl) {
2400
slider {
2401
@extend %scale-has-marks-above-vert-fine-tune;
2402
}
2403
}
2404
}
2405
}
2406
}
2407
}
2408
2409
2410
/*****************
2411
* Progress bars *
2412
*****************/
2413
progressbar {
2414
// sizing
2415
&.horizontal {
2416
trough,
2417
progress { min-height: $bar_size; }
2418
}
2419
2420
&.vertical {
2421
trough,
2422
progress { min-width: $bar_size; }
2423
}
2424
2425
// FIXME: insensitive state missing and some other state should be set probably
2426
color: $tertiary_fg_color;
2427
font-size: smaller;
2428
2429
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2430
2431
progress { background-color: $primary_color; }
2432
2433
&.osd { // progressbar.osd used for epiphany page loading progress
2434
// min-width: $bar_size;
2435
// min-height: $bar_size;
2436
// background-color: transparent;
2437
2438
// trough { background-color: transparent; }
2439
2440
progress {
2441
}
2442
}
2443
}
2444
2445
2446
/*************
2447
* Level Bar *
2448
*************/
2449
levelbar {
2450
block {
2451
min-width: $medium_size;
2452
min-height: $bar_size;
2453
}
2454
2455
&.vertical block {
2456
min-width: $bar_size;
2457
min-height: $medium_size;
2458
}
2459
2460
trough {
2461
padding: 2px;
2462
border-radius: 2px;
2463
2464
@include entry(normal);
2465
2466
&:disabled { @include entry(disabled); }
2467
}
2468
2469
&.horizontal.discrete block { margin: 0 1px; }
2470
2471
&.vertical.discrete block { margin: 1px 0; }
2472
2473
&.horizontal.discrete trough { padding: 2px 1px; }
2474
2475
&.vertical.discrete trough { padding: 1px 2px; }
2476
2477
block {
2478
&.low {
2479
background-color: $warning_color;
2480
}
2481
2482
&.high,
2483
&:not(.empty) {
2484
background-color: $primary_color;
2485
}
2486
2487
&.full {
2488
background-color: $success_color;
2489
}
2490
2491
&.empty {
2492
background-color: $track_color;
2493
color: $disabled_fg_color;
2494
}
2495
}
2496
}
2497
2498
2499
/****************
2500
* Print dialog *
2501
*****************/
2502
printdialog {
2503
paper {
2504
padding: 0;
2505
border: 1px solid $borders_color;
2506
background: $base_color;
2507
color: $fg_color;
2508
}
2509
2510
.dialog-action-box { margin: 12px; }
2511
}
2512
2513
2514
/**********
2515
* Frames *
2516
**********/
2517
frame > border,
2518
.frame {
2519
margin: 0;
2520
padding: 0;
2521
border: 1px solid $borders_color;
2522
border-radius: 0;
2523
box-shadow: none;
2524
2525
&.flat { border-style: none; }
2526
}
2527
2528
actionbar > revealer > box {
2529
padding: $container_padding;
2530
border-top: 1px solid $borders_color;
2531
2532
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2533
}
2534
2535
scrolledwindow {
2536
viewport.frame { // avoid double borders when viewport inside scrolled window
2537
border-style: none;
2538
}
2539
2540
// This is used when content is touch-dragged past boundaries.
2541
// draws a box on top of the content, the size changes programmatically.
2542
@at-root overshoot {
2543
&.top { @include overshoot(top); }
2544
2545
&.bottom { @include overshoot(bottom); }
2546
2547
&.left { @include overshoot(left); }
2548
2549
&.right { @include overshoot(right); }
2550
}
2551
2552
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2553
@at-root undershoot {
2554
&.top { @include undershoot(top); }
2555
2556
&.bottom { @include undershoot(bottom); }
2557
2558
&.left { @include undershoot(left); }
2559
2560
&.right { @include undershoot(right); }
2561
}
2562
2563
@at-root junction { // the small square between two scrollbars
2564
border-style: solid none none solid;
2565
border-width: 1px;
2566
border-color: $borders_color;
2567
background-color: $base_color;
2568
2569
&:dir(rtl) { border-style: solid solid none none; }
2570
}
2571
}
2572
2573
//vbox and hbox separators
2574
separator {
2575
min-width: 1px;
2576
min-height: 1px;
2577
background: $borders_color;
2578
}
2579
2580
2581
/*********
2582
* Lists *
2583
*********/
2584
list {
2585
border-color: $borders_color;
2586
background-color: $base_color;
2587
2588
row { padding: 2px; }
2589
}
2590
2591
// FIXME
2592
$row_transition: $longer_transition, background-color 0, color 0;
2593
2594
row {
2595
&.activatable {
2596
transition: $row_transition;
2597
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0);
2598
background-image: radial-gradient(circle farthest-corner at center,
2599
gtkalpha(currentColor, 0) 100%,
2600
transparent 0%),
2601
image(gtkalpha(currentColor, 0));
2602
2603
&:hover {
2604
transition: $row_transition, box-shadow 0;
2605
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0.05);
2606
}
2607
2608
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2609
&:active {
2610
transition: $row_transition, background-image 0;
2611
animation: row_ripple_effect $longer_duration $deceleration_curve forwards;
2612
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, $lower_opacity / 2);
2613
}
2614
}
2615
2616
&:selected { @extend %selected_items; }
2617
}
2618
2619
2620
/*********************
2621
* App Notifications *
2622
*********************/
2623
.app-notification,
2624
.app-notification.frame {
2625
@extend %osd;
2626
2627
@extend toolbar.osd;
2628
2629
margin: 8px;
2630
2631
button { @extend %button_basic.flat; }
2632
2633
border { border: none; }
2634
}
2635
2636
2637
/*************
2638
* Expanders *
2639
*************/
2640
expander {
2641
arrow {
2642
transition: all $shorter_duration $standard_curve;
2643
min-width: 16px;
2644
min-height: 16px;
2645
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2646
-gtk-icon-transform: rotate(-90deg);
2647
2648
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2649
2650
&:checked { -gtk-icon-transform: unset; }
2651
2652
color: $secondary_fg_color;
2653
2654
&:hover, &:active { color: $fg_color; }
2655
2656
&:disabled { color: $disabled_secondary_fg_color; }
2657
2658
&:selected {
2659
color: $secondary_inversed_fg_color;
2660
2661
&:hover, &:active { color: $inversed_fg_color; }
2662
2663
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2664
}
2665
}
2666
}
2667
2668
2669
/************
2670
* Calendar *
2671
***********/
2672
calendar {
2673
padding: 1px;
2674
border: 1px solid $borders_color;
2675
color: $fg_color;
2676
2677
&:disabled { color: $disabled_fg_color; }
2678
2679
&:selected {
2680
@extend %selected_items;
2681
2682
border-radius: 2px + 1px;
2683
}
2684
2685
&.header {
2686
border-style: none none solid;
2687
border-radius: 0;
2688
}
2689
2690
&.button { @extend %simple_flat_button; }
2691
2692
&.highlight {
2693
color: gtkalpha(currentColor, $hint_opacity);
2694
font-weight: 500;
2695
}
2696
2697
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2698
}
2699
2700
2701
/***********
2702
* Dialogs *
2703
***********/
2704
messagedialog { // Message Dialog styling
2705
&.background { background-color: $lighter_bg_color; }
2706
2707
.titlebar {
2708
min-height: $small_size;
2709
border-style: none;
2710
box-shadow: inset 0 1px $highlight_color;
2711
background-color: $lighter_bg_color;
2712
}
2713
2714
&.csd { // rounded bottom border styling for csd version
2715
&.background {
2716
// bigger radius for better antialiasing
2717
border-bottom-left-radius: 2px;
2718
border-bottom-right-radius: 2px;
2719
}
2720
2721
.dialog-action-area button {
2722
padding: 8px 16px;
2723
border-top: 1px solid $borders_color;
2724
border-radius: 0;
2725
2726
@extend %simple_flat_button;
2727
2728
&:first-child { border-bottom-left-radius: 2px; }
2729
2730
&:last-child { border-bottom-right-radius: 2px; }
2731
}
2732
}
2733
}
2734
2735
filechooser {
2736
.dialog-action-box { border-top: 1px solid $borders_color; }
2737
2738
#pathbarbox {
2739
border-bottom: 1px solid $borders_color;
2740
background-color: $bg_color;
2741
}
2742
}
2743
2744
filechooserbutton:drop(active) {
2745
box-shadow: none;
2746
}
2747
2748
2749
/***********
2750
* Sidebar *
2751
***********/
2752
.sidebar {
2753
border-style: none;
2754
background-color: $lighter_bg_color;
2755
2756
@at-root %sidebar_left,
2757
&:dir(ltr),
2758
&.left,
2759
&.left:dir(rtl) {
2760
border-right: 1px solid $borders_color;
2761
border-left-style: none;
2762
}
2763
2764
@at-root %sidebar_right
2765
&:dir(rtl),
2766
&.right {
2767
border-left: 1px solid $borders_color;
2768
border-right-style: none;
2769
}
2770
2771
list { background-color: transparent; }
2772
2773
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2774
}
2775
2776
stacksidebar {
2777
&.sidebar {
2778
&:dir(ltr),
2779
&.left,
2780
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2781
2782
&:dir(rtl),
2783
&.right { list { @extend %sidebar_right; }}
2784
}
2785
2786
row {
2787
padding: 10px 4px;
2788
2789
> label {
2790
padding-left: 6px;
2791
padding-right: 6px;
2792
}
2793
2794
&.needs-attention > label { @extend %needs_attention; }
2795
}
2796
}
2797
2798
2799
/****************
2800
* File chooser *
2801
****************/
2802
placessidebar {
2803
> viewport.frame { border-style: none; }
2804
2805
list { padding: (4px - 3px) 0 4px; }
2806
2807
row {
2808
// Needs overriding of the GtkListBoxRow padding
2809
min-height: 32px;
2810
margin: -1px 0; // Remove unknown margins
2811
padding: 0;
2812
2813
// Using margins/padding directly in the SidebarRow
2814
// will make the animation of the new bookmark row jump
2815
> revealer { padding: 0 12px; }
2816
2817
&:selected { color: $inversed_fg_color; }
2818
2819
&:disabled { color: $disabled_fg_color; }
2820
2821
image.sidebar-icon {
2822
opacity: $hint_opacity; // dim the device icons
2823
2824
&:dir(ltr) { padding-right: 8px; }
2825
&:dir(rtl) { padding-left: 8px; }
2826
}
2827
2828
label.sidebar-label {
2829
&:dir(ltr) { padding-right: 2px; }
2830
&:dir(rtl) { padding-left: 2px; }
2831
}
2832
2833
@at-root button.sidebar-button {
2834
@extend %simple_flat_button;
2835
2836
@extend %small_button;
2837
2838
row:selected & {
2839
}
2840
}
2841
2842
&.sidebar-placeholder-row {
2843
min-height: 2px;
2844
padding: 0 8px;
2845
background-image: image($accent_color);
2846
background-clip: content-box;
2847
}
2848
2849
&.sidebar-new-bookmark-row { color: $accent_color; }
2850
2851
&:drop(active):not(:disabled) {
2852
box-shadow: inset 0 0 0 2px $accent_color;
2853
2854
&:selected {
2855
// background-color: $accent_color;
2856
// color: $inversed_fg_color;
2857
}
2858
}
2859
}
2860
}
2861
2862
placesview {
2863
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2864
2865
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2866
2867
// this selects the "connect to server" label
2868
> actionbar > revealer > box > label {
2869
padding-left: 8px;
2870
padding-right: 8px;
2871
}
2872
}
2873
2874
2875
/*********
2876
* Paned *
2877
*********/
2878
paned {
2879
> separator {
2880
min-width: 1px;
2881
min-height: 1px;
2882
-gtk-icon-source: none; // defeats the ugly default handle decoration
2883
border-style: none; // just to be sure
2884
background-color: transparent;
2885
// workaround, using background istead of a border since the border will get rendered twice (?)
2886
background-image: image($borders_color);
2887
background-size: 1px 1px;
2888
2889
&.wide {
2890
min-width: 6px;
2891
min-height: 6px;
2892
background-color: $bg_color;
2893
background-image: image($borders_color), image($borders_color);
2894
background-size: 1px 1px, 1px 1px;
2895
}
2896
}
2897
2898
&.horizontal > separator {
2899
background-repeat: repeat-y;
2900
2901
&:dir(ltr) {
2902
margin: 0 -8px 0 0;
2903
padding: 0 8px 0 0;
2904
background-position: left;
2905
}
2906
2907
&:dir(rtl) {
2908
margin: 0 0 0 -8px;
2909
padding: 0 0 0 8px;
2910
background-position: right;
2911
}
2912
2913
&.wide {
2914
margin: 0;
2915
padding: 0;
2916
background-repeat: repeat-y, repeat-y;
2917
background-position: left, right;
2918
}
2919
}
2920
2921
&.vertical > separator {
2922
margin: 0 0 -8px 0;
2923
padding: 0 0 8px 0;
2924
background-repeat: repeat-x;
2925
background-position: top;
2926
2927
&.wide {
2928
margin: 0;
2929
padding: 0;
2930
background-repeat: repeat-x, repeat-x;
2931
background-position: bottom, top;
2932
}
2933
}
2934
}
2935
2936
2937
/**************
2938
* GtkInfoBar *
2939
**************/
2940
infobar {
2941
border-style: none;
2942
2943
&.info { background-color: $info_bg_color; }
2944
2945
&.question { background-color: $question_bg_color; }
2946
2947
&.warning { background-color: $warning_bg_color; }
2948
2949
&.error { background-color: $error_bg_color; }
2950
2951
&.info,
2952
&.question,
2953
&.warning,
2954
&.error {
2955
> label, & { color: $inversed_fg_color; }
2956
2957
button { @extend %button_selected; }
2958
2959
selection { }
2960
2961
*:link { @extend %link_selected; }
2962
}
2963
}
2964
2965
2966
/************
2967
* Tooltips *
2968
************/
2969
tooltip {
2970
&.background {
2971
// background-color needs to be set this way otherwise it gets drawn twice
2972
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2973
box-shadow: inset 0 1px $highlight_color;
2974
background-color: scale-alpha($base_color, $higher_opacity);
2975
}
2976
2977
// @extend %osd;
2978
2979
// padding: 4px; /* not working */
2980
border-radius: 2px;
2981
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2982
2983
// FIXME: we need a border or tooltips vanish on black background.
2984
decoration { background-color: transparent; }
2985
2986
label {
2987
// tooltip label has already 6px margins
2988
min-height: 32px - 6px * 2;
2989
padding: 0 8px - 6px;
2990
}
2991
2992
* { // Yeah this is ugly
2993
padding: 0;
2994
background-color: transparent;
2995
color: inherit;
2996
}
2997
}
2998
2999
3000
/*****************
3001
* Color Chooser *
3002
*****************/
3003
colorswatch {
3004
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3005
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3006
// applied to the overlay box.
3007
3008
// base color corners rounding
3009
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3010
// sports a bigger radius.
3011
// nth-child is needed by the custom color strip.
3012
3013
&.top {
3014
border-top-left-radius: $md_radius + 0.5px;
3015
border-top-right-radius: $md_radius + 0.5px;
3016
3017
overlay {
3018
border-top-left-radius: $md_radius;
3019
border-top-right-radius: $md_radius;
3020
}
3021
}
3022
3023
&.bottom {
3024
border-bottom-left-radius: $md_radius + 0.5px;
3025
border-bottom-right-radius: $md_radius + 0.5px;
3026
3027
overlay {
3028
border-bottom-left-radius: $md_radius;
3029
border-bottom-right-radius: $md_radius;
3030
}
3031
}
3032
3033
&.left,
3034
&:first-child:not(.top) {
3035
border-top-left-radius: $md_radius + 0.5px;
3036
border-bottom-left-radius: $md_radius + 0.5px;
3037
3038
overlay {
3039
border-top-left-radius: $md_radius;
3040
border-bottom-left-radius: $md_radius;
3041
}
3042
}
3043
3044
&.right,
3045
&:last-child:not(.bottom) {
3046
border-top-right-radius: $md_radius + 0.5px;
3047
border-bottom-right-radius: $md_radius + 0.5px;
3048
3049
overlay {
3050
border-top-right-radius: $md_radius;
3051
border-bottom-right-radius: $md_radius;
3052
}
3053
}
3054
3055
&.dark overlay { color: $dark_contrast_color; }
3056
3057
&.light overlay { color: $light_contrast_color; }
3058
3059
&.dark { color: $dark_contrast_color; } // for focus ring
3060
3061
&.light { color: $light_contrast_color; } // for focus ring
3062
3063
&:drop(active) {
3064
box-shadow: none;
3065
3066
&.light overlay {
3067
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3068
}
3069
3070
&.dark overlay {
3071
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3072
}
3073
}
3074
3075
overlay {
3076
transition: $shadow_transition;
3077
box-shadow: $z-depth-1;
3078
3079
&:hover { box-shadow: $z-depth-2; }
3080
}
3081
3082
&#add-color-button {
3083
border-radius: $md_radius $md_radius 0 0;
3084
color: $dark_contrast_color; // for focus ring
3085
3086
&:only-child { border-radius: $md_radius; }
3087
3088
overlay {
3089
background-image: linear-gradient(to right,
3090
$error_bg_color 25%,
3091
$warning_bg_color 25%, $warning_bg_color 50%,
3092
$info_bg_color 50%, $info_bg_color 75%,
3093
$question_bg_color 75%);
3094
color: $dark_contrast_color;
3095
}
3096
}
3097
3098
&:disabled {
3099
opacity: $disabled_opacity;
3100
3101
overlay { box-shadow: none; }
3102
}
3103
3104
row:selected & {
3105
}
3106
3107
&#editor-color-sample {
3108
border-radius: $md_radius + 0.5px;
3109
3110
overlay { border-radius: $md_radius; }
3111
3112
// overlay:hover { box-shadow: $z-depth-1; }
3113
}
3114
}
3115
3116
// colorscale popup
3117
colorchooser .popover.osd {
3118
transition: $shadow_transition;
3119
border-radius: 2px;
3120
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
3121
background-color: $base_color;
3122
3123
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
3124
3125
spinbutton:not(.vertical) { @extend %entry.flat; }
3126
}
3127
3128
3129
/********
3130
* Misc *
3131
********/
3132
//content view (grid/list)
3133
.content-view {
3134
background-color: $bg_color;
3135
3136
// &:hover { -gtk-icon-effect: highlight; }
3137
3138
rubberband { @extend rubberband; }
3139
}
3140
3141
.scale-popup {
3142
.osd & { @extend %osd; }
3143
3144
.osd & button.flat { //FIXME: quick hack, redo properly
3145
}
3146
3147
button { // +/- buttons on GtkVolumeButton popup
3148
}
3149
}
3150
3151
3152
/**********************
3153
* Window Decorations *
3154
*********************/
3155
decoration {
3156
transition: $shadow_transition;
3157
border-radius: 2px 2px 0 0;
3158
box-shadow: $z-depth-4, 0 16px 16px transparent;
3159
3160
// FIXME rationalize shadows
3161
3162
// this is used for the resize cursor area
3163
margin: 8px;
3164
3165
&:backdrop {
3166
// the transparent shadow here is to enforce that the shadow extents don't
3167
// change when we go to backdrop, to prevent jumping windows.
3168
// The biggest shadow should be in the same order then in the active state
3169
// or the jumping will happen during the transition.
3170
box-shadow: $z-depth-2, 0 16px 16px transparent;
3171
}
3172
3173
.maximized &,
3174
.fullscreen &,
3175
.tiled & { border-radius: 0; }
3176
3177
.popup & { box-shadow: none; }
3178
3179
// server-side decorations as used by mutter
3180
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3181
3182
.csd.popup & {
3183
border-radius: 2px;
3184
box-shadow: $z-depth-2;
3185
}
3186
3187
tooltip.csd & {
3188
border-radius: 2px;
3189
box-shadow: $z-depth-2;
3190
}
3191
3192
messagedialog.csd & {
3193
border-radius: 2px;
3194
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3195
3196
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3197
}
3198
3199
.solid-csd & {
3200
margin: 0;
3201
padding: 4px;
3202
// border: solid 1px $borders_color;
3203
// border-radius: 0;
3204
box-shadow: inset 0 0 0 4px $headerbar_color;
3205
// background-color: $borders_color;
3206
}
3207
}
3208
3209
// Window Close button
3210
button.titlebutton {
3211
// @extend %simple_flat_button;
3212
3213
@extend %circular_button;
3214
3215
.selection-mode & {
3216
}
3217
}
3218
3219
3220
// catch all extend :)
3221
3222
%selected_items {
3223
background-color: $primary_color;
3224
3225
@at-root %nobg_selected_items, & {
3226
color: $inversed_fg_color;
3227
3228
&:disabled { color: $disabled_inversed_fg_color; }
3229
}
3230
}
3231
3232
.monospace { font-family: monospace; }
3233
3234
3235
/**********************
3236
* Touch Copy & Paste *
3237
*********************/
3238
//touch selection handlebars for the Popover.osd above
3239
cursor-handle {
3240
border-radius: $circular_radius;
3241
background-color: $accent_color;
3242
background-image: none;
3243
3244
&.top:dir(ltr), &.bottom:dir(rtl) {
3245
padding-left: 6px;
3246
border-top-right-radius: 0;
3247
}
3248
3249
&.bottom:dir(ltr), &.top:dir(rtl) {
3250
padding-right: 6px;
3251
border-top-left-radius: 0;
3252
}
3253
3254
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3255
-GtkWidget-text-handle-width: 24;
3256
-GtkWidget-text-handle-height: 30;
3257
3258
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3259
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3260
url('#{$_url}@2.png'));
3261
}
3262
}
3263
3264
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3265
3266
%circular_button,
3267
button.circular { // FIXME: aggregate to buttons
3268
border-radius: $circular_radius;
3269
-gtk-outline-radius: $circular_radius;
3270
3271
// label { padding: 0; }
3272
}
3273
3274
%small_button {
3275
min-height: $small_size;
3276
min-width: $small_size;
3277
padding: 0;
3278
border-radius: $circular_radius;
3279
-gtk-outline-radius: $circular_radius;
3280
}
3281
3282
// shortcut window keys
3283
.keycap {
3284
min-width: 28px - 8px * 2;
3285
min-height: 28px - 2px;
3286
margin-top: 2px;
3287
padding-bottom: 2px;
3288
padding-left: 8px;
3289
padding-right: 8px;
3290
3291
border: solid 1px $borders_color;
3292
border-radius: 2px + 1px;
3293
box-shadow: inset 0 -2px $borders_color;
3294
background-color: $base_color;
3295
color: $fg_color;
3296
font-size: smaller;
3297
}
3298
3299
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3300
transition: $longer_transition;
3301
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_color;
3302
caret-color: $accent_color;
3303
}
3304
3305
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3306
3307
stackswitcher button.circular,
3308
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3309
min-width: $medium_size;
3310
min-height: $medium_size;
3311
padding: 0;
3312
}
3313