ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error_color;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: 4;
21
-GtkDialog-action-area-border: 0;
22
// We use the outline properties to signal the focus properties
24
// to the adwaita engine: using real CSS properties is faster,
25
// and we don't use any outlines for now.
26
outline-style: solid;
28
outline-width: 2px;
29
outline-color: transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: $material_radius;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
notebook:focus tab,
37
*:focus { outline-color: $checked_bg_color; }
38
/***************
41
* Base States *
42
***************/
43
.background {
44
background-color: $bg_color;
45
color: $fg_color;
46
}
47
/*
49
These wildcard seems unavoidable, need to investigate.
50
Wildcards are bad and troublesome, use them with care,
51
or better, just don't.
52
Everytime a wildcard is used a kitten dies, painfully.
53
*/
54
*:disabled { -gtk-icon-effect: dim; }
56
.gtkstyle-fallback {
58
background-color: $bg_color;
59
color: $fg_color;
60
&:hover {
62
background-color: darken($bg_color, 5%);
63
color: $fg_color;
64
}
65
&:active {
67
background-color: darken($bg_color, 10%);
68
color: $fg_color;
69
}
70
&:disabled {
72
background-color: $bg_color;
73
color: $disabled_fg_color;
74
}
75
&:selected {
77
background-color: $primary_color;
78
color: $inverse_fg_color;
79
}
80
}
81
.view {
83
@extend row.activatable;
84
background-color: $base_color;
86
color: $fg_color;
87
&:disabled { color: $disabled_fg_color; }
89
&:hover, &:active, &:selected { border-radius: $material_radius; }
91
selection,
93
&:selected { @extend %selected_items; }
94
}
95
textview {
97
// FIXME: we need to override background-color to ensure text rendering
98
text { background-color: $base_color; }
99
border {
101
background-color: $alt_base_color;
102
color: $hint_fg_color; // FIXME: not working
103
}
104
}
105
// iconview { @extend .view; }
107
.rubberband,
109
rubberband {
110
border: 1px solid $alt_primary_color;
111
background-color: rgba($alt_primary_color, 0.3);
112
}
113
flowbox {
115
rubberband { @extend rubberband; }
116
flowboxchild {
118
padding: 4px;
119
border-radius: $material_radius;
120
&:selected { @extend %selected_items; }
122
}
123
}
124
.content-view .tile {
126
// margin: 2px;
127
// padding: 0;
128
// border-radius: 0;
129
// background-color: black;
130
&:selected {
132
background-color: transparent;
133
color: inherit;
134
}
135
}
136
label {
138
caret-color: currentColor; // this shouldn't be needed.
139
&.separator {
141
@extend .dim-label;
142
color: $fg_color;
144
}
145
row:selected &,
147
&:selected { @extend %nobg_selected_items; }
148
selection {
150
background-color: $primary_color;
151
color: $inverse_fg_color;
152
}
153
&:disabled {
155
color: $disabled_fg_color;
156
selection { @extend %selected_items:disabled; }
158
tab &,
160
button & { color: inherit; }
161
}
162
}
163
.dim-label { opacity: 0.6; }
165
assistant {
167
.sidebar {
168
padding: 4px 0;
169
// background-color: $base_color;
170
// border-top: 1px solid $border_color;
171
}
172
// &.csd .sidebar { border-top-style: none; }
174
.sidebar label {
176
min-height: $medium_size;
177
padding: 0 12px;
178
color: $hint_fg_color;
179
font-weight: 500;
180
&.highlight { color: $fg_color; }
182
}
183
}
184
// %osd, .osd { opacity: 0.9; }
186
/*********************
189
* Spinner Animation *
190
*********************/
191
@keyframes spin {
192
to { -gtk-icon-transform: rotate(1turn); }
193
}
194
spinner {
196
background: none;
197
opacity: 0; // non spinning spinner makes no sense
198
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
199
&:checked {
201
opacity: 1;
202
animation: spin 1s linear infinite;
203
&:disabled { opacity: 0.5; }
205
}
206
}
207
/****************
210
* Text Entries *
211
****************/
212
%entry,
213
entry {
214
%entry_basic, & {
215
min-height: $medium_size;
216
padding: 0 8px;
217
border-radius: $material_radius $material_radius 0 0;
218
@include entry(normal);
220
&:focus { @include entry(focus); }
222
&:disabled { @include entry(disabled); }
224
&.flat {
226
min-height: 0;
227
padding: 2px;
228
border-radius: 0;
229
background-color: transparent;
230
}
231
image { // icons inside the entry
233
// @extend %simple_flat_button;
234
// min-height: $small_size;
236
// min-width: $small_size;
237
// border-radius: $circular_radius;
238
// -gtk-outline-radius: $circular_radius;
239
color: $secondary_fg_color;
240
&:hover, &:active { color: $fg_color; }
242
&:disabled { color: $hint_fg_color; }
244
&.left {
246
margin-left: ($medium_size - 16px) / 2 - 8px;
247
margin-right: 6px;
248
}
249
&.right {
251
margin-left: 6px;
252
margin-right: ($medium_size - 16px) / 2 - 8px;
253
}
254
}
255
undershoot {
257
&.left { @include undershoot(left); }
258
&.right { @include undershoot(right); }
260
}
261
selection { @extend %selected_items; }
263
// entry error and warning style
265
@each $e_type, $e_color in (error, $error_color),
266
(warning, $warning_color) {
267
&.#{$e_type} {
268
@include entry(normal, $e_color);
269
&:focus { @include entry(focus, $e_color); }
271
&:disabled { @include entry(disabled, $e_color); }
273
}
274
}
275
&:drop(active) {
277
// box-shadow: inset 0 0 0 2px $secondary_color;
278
}
279
.osd & {
281
}
282
}
283
progress {
285
margin: 2px (2px - 8px);
286
border-bottom: 2px solid $primary_color;
287
background-color: transparent;
288
}
289
// linked entries
291
.linked:not(.vertical) > & { @extend %linked_entry; }
292
// Vertically linked entries
294
.linked.vertical > & { @extend %linked_vertical_entry; }
295
}
296
%entry_raised {
298
border-radius: $material_radius;
299
@include entry(raised-normal);
301
&:focus { @include entry(raised-focus); }
303
&:disabled { @include entry(raised-disabled); }
305
// entry error and warning style
307
@each $e_type, $e_color in (error, $error_color),
308
(warning, $warning_color) {
309
&.#{$e_type} {
310
@include entry(raised-normal, $e_color);
311
&:focus { @include entry(raised-focus, $e_color); }
313
&:disabled { @include entry(raised-disabled, $e_color); }
315
image {
317
color: $inverse_secondary_fg_color;
318
&:hover, &:active { color: $inverse_fg_color; }
320
&:disabled { color: $inverse_hint_fg_color; }
322
}
323
}
324
}
325
}
326
treeview entry {
328
&.flat, & {
329
background-color: $base_color;
330
&, &:focus {
332
border-image: none;
333
box-shadow: none;
334
}
335
}
336
}
337
.entry-tag {
339
margin: 2px;
340
border-radius: $circular_radius;
341
box-shadow: none;
342
background-color: $divider_color;
343
color: $fg_color;
344
&:hover { background-image: image($divider_color); }
346
// side margins: compensate the entry padding with a negative margin
348
// then the negative margin itself
349
:dir(ltr) & {
350
margin-left: 4px;
351
margin-right: 0;
352
padding-left: 12px;
353
padding-right: 8px;
354
}
355
:dir(rtl) & {
357
margin-left: 0;
358
margin-right: 4px;
359
padding-left: 8px;
360
padding-right: 12px;
361
}
362
// seems any sizing doesn't work
364
&.button {
365
box-shadow: none;
366
background-color: transparent;
367
&:not(:hover):not(:active) { color: $secondary_fg_color; }
369
}
370
}
371
/***********
374
* Buttons *
375
***********/
376
// stuff for .needs-attention
377
@keyframes needs_attention {
378
from {
379
background-image: -gtk-gradient(radial,
380
center center, 0,
381
center center, 0.001,
382
to($secondary_color),
383
to(transparent));
384
}
385
to {
387
background-image: -gtk-gradient(radial,
388
center center, 0,
389
center center, 0.5,
390
to($secondary_color),
391
to(transparent));
392
}
393
}
394
%button,
396
button {
397
@at-root %button_basic, & {
398
min-height: 24px;
399
min-width: 16px;
400
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
401
border-radius: $material_radius;
402
font-weight: 500;
403
@include button(normal);
405
&:hover { @include button(hover); }
407
&:active { @include button(active); }
409
&:disabled { @include button(disabled); }
411
&:checked { @include button(checked); }
413
&:checked:disabled { @include button(checked-disabled); }
415
@at-root %flat_button, &.flat {
417
@at-root %simple_flat_button, & {
418
@include button(flat-normal);
419
&:hover { @include button(flat-hover); }
421
&:active { @include button(flat-active); }
423
&:disabled { @include button(flat-disabled); }
425
}
426
&:checked { @include button(flat-checked); }
428
&:checked:disabled { @include button(flat-checked-disabled); }
430
}
431
&.text-button {
433
padding-left: 16px;
434
padding-right: 16px;
435
}
436
&.image-button {
438
min-width: 24px;
439
padding: ($medium_size - 24px) / 2;
440
@extend %circular_button;
442
}
443
&.text-button.image-button {
445
border-radius: $material_radius;
446
-gtk-outline-radius: $material_radius;
447
label {
449
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
450
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
452
}
453
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
455
}
456
.linked > & { @extend %linked; }
458
.linked.vertical > & { @extend %linked_vertical; }
460
.linked > &.flat,
462
.linked.vertical > &.flat {
463
border-radius: $material_radius;
464
&.image-button { @extend %circular_button; }
466
&.text-button.image-button {
468
border-radius: $material_radius;
469
-gtk-outline-radius: $material_radius;
470
}
471
}
472
&:drop(active) {
474
// box-shadow: inset 0 0 0 2px $secondary_color;
475
}
476
}
477
@at-root %button_selected, row:selected & {
479
&:disabled {
480
background-color: $inverse_divider_color;
481
color: $inverse_disabled_secondary_fg_color;
482
}
483
&.flat {
485
color: $inverse_secondary_fg_color;
486
&:hover, &:active { color: $inverse_fg_color; }
488
&:disabled { color: $inverse_disabled_secondary_fg_color; }
490
&:checked {
492
background-color: $inverse_track_color;
493
color: $inverse_fg_color;
494
}
495
&:checked:disabled {
497
background-color: $inverse_divider_color;
498
color: $inverse_disabled_fg_color;
499
}
500
}
501
}
502
// big standalone buttons like in Documents pager
504
&.osd {
505
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
506
&.image-button { padding: ($large_size - 24px) / 2; }
508
&:disabled { opacity: 0; }
510
}
511
// overlay / OSD style
513
@at-root %osd_button,
514
.osd & {
515
}
516
// Suggested and Destructive Action buttons
518
@each $b_type, $b_color in (suggested-action, $suggested_color),
519
(destructive-action, $destructive_color) {
520
&.#{$b_type} {
521
background-color: $b_color;
522
color: $inverse_fg_color;
523
&:disabled { @include button(disabled, $b_color); }
525
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage(0.3)); }
527
&.flat {
529
background-color: transparent;
530
color: $b_color;
531
&:disabled { @include button(flat-disabled, $b_color); }
533
&:checked { background-color: rgba($b_color, 0.3); }
535
}
536
.osd & {
538
}
539
}
540
}
541
.stack-switcher > & {
543
// to position the needs attention dot, padding is added to the button
544
// child, a label needs just lateral padding while an icon needs vertical
545
// padding added too.
546
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
548
> label {
550
padding-left: 6px; // label padding
551
padding-right: 6px; //
552
}
553
> image {
555
padding-left: 6px; // image padding
556
padding-right: 6px; //
557
padding-top: 3px; //
558
padding-bottom: 3px; //
559
}
560
&.text-button {
562
// compensate text-button paddings
563
padding-left: 16px - 6px;
564
padding-right: 16px - 6px;
565
}
566
&.image-button {
568
// we want image buttons to have a 1:1 aspect ratio, so compensation
569
// of the padding added to the GtkImage is needed
570
padding-left: ($medium_size - 16px) / 2 - 6px;
571
padding-right: ($medium_size - 16px) / 2 - 6px;
572
}
573
&.needs-attention {
575
> label,
576
> image { @extend %needs_attention; }
577
&:checked {
579
> label,
580
> image {
581
animation: none;
582
background-image: none;
583
}
584
}
585
}
586
}
587
// hide separators
589
&.font,
590
&.file { separator { @extend %hide_separators; }}
591
// &.font { > box > box > label { font-weight: bold; }}
593
// inline-toolbar buttons
595
.inline-toolbar & {
596
// @extend %button_basic.flat;
597
&:not(.text-button) { @extend %circular_button; }
599
}
600
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
602
@at-root %circular_button,
604
&.close,
605
&.circular { // The Bloody Circul Button
606
border-radius: $circular_radius;
607
-gtk-outline-radius: $circular_radius;
608
// label { padding: 0; }
610
}
611
@at-root %small_button {
613
min-height: $small_size;
614
min-width: $small_size;
615
padding: 0;
616
border-radius: $circular_radius;
617
-gtk-outline-radius: $circular_radius;
618
}
619
}
620
%needs_attention {
622
animation: needs_attention $longer_duration $deceleration_curve forwards;
623
background-repeat: no-repeat;
624
background-position: right 3px;
625
background-size: 6px 6px;
626
&:dir(rtl) { background-position: left 3px; }
628
}
629
// all the following is for the +|- buttons on inline toolbars, that way
631
// should really be deprecated...
632
.inline-toolbar toolbutton > button { // redefining the button look is
633
// needed since those are flat...
634
}
635
// More inline toolbar buttons
637
toolbar.inline-toolbar toolbutton {
638
// > button.flat { @extend %linked_middle; }
639
// &:first-child > button.flat { @extend %linked:first-child; }
641
// &:last-child > button.flat { @extend %linked:last-child; }
643
// &:only-child > button.flat { @extend %linked:only-child; }
645
}
646
%linked_middle {
648
border-radius: 0;
649
-gtk-outline-radius: $material_radius;
650
}
651
%linked {
653
@extend %linked_middle;
654
&:first-child {
656
border-top-left-radius: $material_radius;
657
border-bottom-left-radius: $material_radius;
658
}
659
&:last-child {
661
border-top-right-radius: $material_radius;
662
border-bottom-right-radius: $material_radius;
663
}
664
&:only-child {
666
border-radius: $material_radius;
667
}
668
}
669
%linked_vertical_middle {
671
border-radius: 0;
672
-gtk-outline-radius: $material_radius;
673
}
674
%linked_vertical {
676
@extend %linked_vertical_middle;
677
&:first-child {
679
border-top-left-radius: $material_radius;
680
border-top-right-radius: $material_radius;
681
}
682
&:last-child {
684
border-bottom-left-radius: $material_radius;
685
border-bottom-right-radius: $material_radius;
686
}
687
&:only-child {
689
border-radius: $material_radius;
690
}
691
}
692
%linked_entry {
694
@extend %linked_middle;
695
&:first-child {
697
border-radius: $material_radius 0 0 0;
698
}
699
&:last-child {
701
border-radius: 0 $material_radius 0 0;
702
}
703
&:only-child {
705
border-radius: $material_radius $material_radius 0 0;
706
}
707
}
708
%linked_vertical_entry {
710
@extend %linked_vertical_middle;
711
&:first-child {
713
border-radius: $material_radius $material_radius 0 0;
714
}
715
&:last-child {
717
border-radius: 0;
718
}
719
&:only-child {
721
border-radius: $material_radius $material_radius 0 0;
722
}
723
}
724
/* menu buttons */
726
modelbutton.flat,
727
.menuitem.button.flat {
728
min-height: $menuitem_size;
729
padding: 0 8px;
730
border-radius: $material_radius;
731
color: inherit;
732
@extend %simple_flat_button;
734
&:selected { @extend %selected_items; }
736
}
737
modelbutton.flat arrow {
739
background: none;
740
&:hover { background: none; }
742
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
744
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
746
}
747
button.color {
749
min-height: $small_size;
750
min-width: $small_size;
751
padding: $container_padding;
752
colorswatch:only-child {
754
// &, overlay { border-radius: 0; }
755
}
756
}
757
/*********
760
* Links *
761
*********/
762
*:link {
763
&, &:hover, &:active { color: $link_color; }
764
&:visited {
766
&, &:hover, &:active { color: $visited_link_color; }
767
}
768
@at-root %link_selected,
770
&:selected,
771
*:selected & { color: $inverse_fg_color; }
772
}
773
button:link,
775
button:visited {
776
@extend *:link;
777
> label { text-decoration-line: underline; }
779
}
780
/*****************
782
* GtkSpinButton *
783
*****************/
784
spinbutton {
785
&:not(.vertical) {
786
// in this horizontal configuration, the whole spinbutton
787
// behaves as the entry, so we extend the entry styling
788
// and nuke the style on the internal entry
789
@extend %entry;
790
padding: 0;
792
entry {
794
min-width: $large_size - 8px * 2;
795
// reset all the other props since the spinbutton node is styled here
796
margin: 0;
797
border-image: none;
798
border-radius: 0;
799
box-shadow: none;
800
background-color: transparent;
801
//
802
// This will help to simplify spinbutton's code, but unfortunatelly
803
// doesn't work properly in :dir(rtl). It needs z-index property.
804
//
805
// min-width: $large_size - 8px;
806
//
807
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
808
//
809
// &:dir(ltr) {
810
// margin-right: -$spinbuttons_width;
811
// padding-right: $spinbuttons_width;
812
// }
813
//
814
// &:dir(rtl) {
815
// margin-left: -$spinbuttons_width;
816
// padding-left: $spinbuttons_width;
817
// }
818
}
819
button {
821
// margin: $container_padding;
822
border: solid $container_padding transparent;
823
@extend %simple_flat_button;
825
@extend %small_button;
827
&.up:dir(ltr),
829
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
830
&.up:dir(rtl),
832
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
833
}
834
}
835
// OSD horizontal
837
.osd &:not(.vertical) {
838
button {
839
}
840
}
841
// Vertical
843
&.vertical {
844
// in the vertical configuration, we treat the spinbutton
845
// as a box, and tweak the style of the entry in the middle
846
// so that it's linked
847
// FIXME: this should not be set at all, but otherwise it gets the wrong
849
// color
850
&:disabled { color: $disabled_fg_color; }
851
&:drop(active) {
853
box-shadow: none;
854
}
855
entry {
857
@extend %entry_raised;
858
min-height: $medium_size;
860
min-width: $large_size;
861
padding: 0;
862
}
863
button {
865
min-height: $medium_size;
866
min-width: $large_size;
867
padding: 0;
868
@extend %simple_flat_button;
870
&.up { border-radius: $material_radius $material_radius 0 0; }
872
&.down { border-radius: 0 0 $material_radius $material_radius; }
874
}
875
}
876
// OSD vertical
878
.osd &.vertical button:first-child {
879
}
880
// Misc
882
treeview &:not(.vertical) {
883
min-height: 0;
884
border-style: none;
885
border-radius: 0;
886
entry {
888
min-height: 0;
889
padding: 1px 2px;
890
}
891
}
892
}
893
/**************
896
* ComboBoxes *
897
**************/
898
combobox {
899
arrow {
900
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
901
min-height: 16px;
902
min-width: 16px;
903
}
904
decoration,
906
button.combo:checked { transition: none; } // workaround for menuitem selection
907
button.combo cellview {
909
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
910
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
911
}
912
#gtk-combobox-popup-menu {
914
padding: 2px 0;
915
menuitem {
917
min-height: $medium_size - 2px * 2;
918
padding: 0 8px;
919
}
920
// overflow arrows
922
> arrow {
923
&.top { margin-top: -2px; }
924
&.bottom {
926
margin-top: 2px * 2;
927
margin-bottom: -2px * 3;
928
}
929
}
930
}
931
&.linked {
933
button:nth-child(2) {
934
&:dir(ltr) { @extend %linked_entry:last-child; }
935
&:dir(rtl) { @extend %linked_entry:first-child; }
936
}
937
}
938
> .linked > button {
940
@extend %linked_middle;
941
&:first-child { @extend %linked_entry:first-child; }
943
&:last-child { @extend %linked_entry:last-child; }
945
&:only-child { @extend %linked_entry:only-child; }
947
}
948
&:drop(active) { // FIXME: untested
950
box-shadow: none;
951
// button.combo { @extend %button_basic:drop(active); }
953
}
954
}
955
// the combo is a composite widget so the way we do button linking doesn't
957
// work, special case needed. See
958
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
959
.linked:not(.vertical) > combobox {
961
> box > button.combo { @extend %linked_middle; }
962
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
964
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
966
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
968
}
969
.linked.vertical > combobox {
971
> box > button.combo { @extend %linked_vertical_middle; }
972
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
974
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
976
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
978
}
979
button.combo {
981
border-radius: $material_radius $material_radius 0 0;
982
background-image: none;
983
font-weight: inherit;
984
@include entry(normal);
986
&:hover { box-shadow: inset 0 -1px $fg_color; }
988
&:checked { @include entry(focus); }
990
&:disabled { @include entry(disabled); }
992
}
993
/************
996
* Toolbars *
997
************/
998
toolbar {
999
-GtkWidget-window-dragging: true;
1000
padding: 2px;
1001
background-color: $bg_color;
1002
button { @extend %button_basic.flat; }
1004
// on OSD
1006
.osd & { background-color: transparent; }
1007
// stand-alone OSD toolbars
1009
&.osd {
1010
transition: $shadow_transition;
1011
padding: $container_padding;
1012
border-radius: $material_radius;
1013
box-shadow: $shadow_2, inset 0 1px $highlight_color;
1014
background-color: $popup_bg_color;
1015
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
1017
&.left,
1019
&.right,
1020
&.top,
1021
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
1022
}
1023
// toolbar separators
1025
&.horizontal > separator { margin: 2px; }
1026
&.vertical > separator { margin: 2px; }
1027
&:not(.inline-toolbar):not(.osd) {
1029
scale,
1030
entry,
1031
spinbutton,
1032
button { margin: 2px; }
1033
.linked entry,
1035
.linked spinbutton,
1036
.linked button {
1037
&:not(:first-child) { margin-left: 0; }
1038
&:not(:last-child) { margin-right: 0; }
1039
}
1040
spinbutton {
1042
entry,
1043
button { margin: 0; }
1044
}
1045
switch { margin: 2px + $container_padding 2px; }
1047
}
1048
}
1049
// searchbar, location-bar & inline-toolbar
1051
.inline-toolbar {
1052
padding: $container_padding;
1053
border-style: solid;
1054
border-width: 0 1px 1px;
1055
border-color: $border_color;
1056
background-color: $alt_base_color;
1057
}
1058
searchbar > revealer > box,
1060
.location-bar {
1061
padding: $container_padding;
1062
border-style: solid;
1063
border-width: 0 0 1px;
1064
border-color: $border_color;
1065
background-color: $bg_color;
1066
background-clip: border-box;
1067
}
1068
searchbar > revealer > box {
1070
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1071
margin: -6px;
1072
padding: $container_padding;
1073
}
1074
/***************
1077
* Header bars *
1078
***************/
1079
%titlebar,
1080
headerbar {
1081
transition: background-color $shorter_duration $deceleration_curve, color $shorter_duration $deceleration_curve;
1082
min-height: $large_size;
1083
padding: 0 $container_padding;
1084
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1085
background-color: $titlebar_bg_color;
1086
color: $titlebar_fg_color;
1087
&:disabled :not(button) > label { color: $titlebar_disabled_fg_color; }
1089
&:backdrop {
1091
color: $titlebar_secondary_fg_color;
1092
&:disabled :not(button) > label { color: $titlebar_disabled_secondary_fg_color; }
1094
}
1095
.title {
1097
padding: 0 12px;
1098
font-weight: bold;
1099
}
1100
.subtitle {
1102
padding: 0 12px;
1103
font-size: smaller;
1104
@extend .dim-label;
1106
}
1107
.linked:not(.vertical) > entry:not(.flat) { border-radius: $material_radius; }
1109
button:not(.suggested-action):not(.destructive-action) {
1111
@extend %button_basic.flat;
1112
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1114
$titlebar_indicator_color 0%,
1115
transparent 0%)
1116
0 0 0 / 0 0 0px;
1117
color: $titlebar_secondary_fg_color;
1118
&:hover, &:active { color: $titlebar_fg_color; }
1120
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1122
&:checked {
1124
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1125
$titlebar_indicator_color 100%,
1126
transparent 0%)
1127
0 0 2 / 0 0 2px;
1128
color: $titlebar_fg_color;
1129
&:disabled { color: $titlebar_disabled_fg_color; }
1131
&, &:disabled { background-color: transparent; }
1133
}
1134
&:backdrop {
1136
color: $titlebar_hint_fg_color;
1137
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1139
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1141
&:checked {
1143
color: $titlebar_secondary_fg_color;
1144
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1146
}
1147
}
1148
}
1149
button.suggested-action, button.destructive-action {
1151
&:disabled {
1152
background-color: $titlebar_divider_color;
1153
color: $titlebar_disabled_fg_color;
1154
}
1155
}
1156
&.selection-mode {
1158
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1159
// but let's keep it for backwards compatibility.
1160
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1161
animation: header_ripple_effect $longer_duration $deceleration_curve;
1162
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1163
background-color: $primary_color;
1164
color: $inverse_fg_color;
1165
&:backdrop {
1167
color: $inverse_secondary_fg_color;
1168
}
1169
.subtitle:link { @extend *:link:selected; }
1171
button:not(.suggested-action):not(.destructive-action) {
1173
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1174
currentColor 0%,
1175
transparent 0%)
1176
0 0 0 / 0 0 0px;
1177
color: $inverse_fg_color;
1178
&:disabled { color: $inverse_disabled_fg_color; }
1180
&:checked {
1182
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1183
currentColor 100%,
1184
transparent 0%)
1185
0 0 2 / 0 0 2px;
1186
color: $inverse_fg_color;
1187
&:disabled { color: $inverse_disabled_fg_color; }
1189
}
1190
&:backdrop {
1192
color: $inverse_secondary_fg_color;
1193
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1195
&:checked {
1197
color: $inverse_secondary_fg_color;
1198
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1200
}
1201
}
1202
}
1203
.selection-menu {
1205
padding-left: 16px;
1206
padding-right: 16px;
1207
arrow { -GtkArrow-arrow-scaling: 1; }
1209
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1211
}
1212
}
1213
// squared corners when the window is maximized, tiled, or fullscreen
1215
.tiled &,
1216
.tiled-top &,
1217
.tiled-right &,
1218
.tiled-bottom &,
1219
.tiled-left &,
1220
.maximized &,
1221
.fullscreen & {
1222
border-radius: 0;
1223
box-shadow: $shadow_1;
1224
}
1225
&.default-decoration {
1227
min-height: $small_size;
1228
padding: $container_padding;
1229
box-shadow: inset 0 1px $titlebar_highlight_color;
1230
.tiled &,
1232
.maximized &,
1233
.fullscreen & { box-shadow: none; }
1234
button.titlebutton {
1236
min-height: $small_size;
1237
min-width: $small_size;
1238
margin: 0;
1239
padding: 0;
1240
}
1241
// workaround for non-animatable buttons
1243
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1244
}
1245
.solid-csd & {
1247
&:dir(rtl), &:dir(ltr) { // specificity bump
1248
// margin-left: -2px;
1249
// margin-right: -2px;
1250
// margin-top: -2px;
1251
// border-radius: 0;
1252
// box-shadow: inset 0 1px $titlebar_highlight_color;
1253
}
1254
}
1255
}
1256
headerbar {
1258
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1259
entry,
1260
spinbutton,
1261
// separator,
1262
button {
1263
margin-top: $container_padding;
1264
margin-bottom: $container_padding;
1265
}
1266
switch {
1268
margin-top: ($large_size - 24px) / 2;
1269
margin-bottom: ($large_size - 24px) / 2;
1270
}
1271
// reset button margins of the spinbutton
1273
spinbutton button {
1274
margin-top: 0;
1275
margin-bottom: 0;
1276
}
1277
// FIXME: This is a hacky workaround.
1279
.entry-tag {
1280
margin-top: 5px;
1281
margin-bottom: 5px;
1282
}
1283
}
1284
.background .titlebar {
1286
border-top-left-radius: $material_radius;
1287
border-top-right-radius: $material_radius;
1288
}
1289
.background.tiled .titlebar,
1291
.background.tiled-top .titlebar,
1292
.background.tiled-right .titlebar,
1293
.background.tiled-bottom .titlebar,
1294
.background.tiled-left .titlebar,
1295
.background.maximized .titlebar,
1296
.background.solid-csd .titlebar {
1297
border-top-left-radius: 0;
1298
border-top-right-radius: 0;
1299
}
1300
headerbar { // headerbar border rounding
1302
window separator:first-child + &, // tackles the paned container case
1303
window &:first-child { border-top-left-radius: $material_radius; }
1304
window &:last-child { border-top-right-radius: $material_radius; }
1306
window stack & { // tackles the stacked headerbars case
1308
&:first-child, &:last-child {
1309
border-top-left-radius: $material_radius;
1310
border-top-right-radius: $material_radius;
1311
}
1312
}
1313
window.tiled &,
1315
window.tiled-top &,
1316
window.tiled-right &,
1317
window.tiled-bottom &,
1318
window.tiled-left &,
1319
window.maximized &,
1320
window.fullscreen &,
1321
window.solid-csd & {
1322
&,
1323
&:first-child,
1324
&:last-child,
1325
&:only-child {
1326
border-top-left-radius: 0;
1327
border-top-right-radius: 0;
1328
}
1329
}
1330
}
1331
.titlebar:not(headerbar) {
1333
window.csd > & {
1334
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1335
padding: 0;
1336
background-color: transparent;
1337
background-image: none;
1338
border-style: none;
1339
box-shadow: none;
1340
}
1341
> separator {
1343
background-color: $titlebar_bg_color;
1344
background-image: image($border_color);
1345
}
1346
@extend %titlebar;
1348
}
1349
/************
1352
* Pathbars *
1353
************/
1354
%pathbar_button,
1355
.path-bar button {
1356
padding-left: ($medium_size - 24px) / 2;
1357
padding-right: ($medium_size - 24px) / 2;
1358
label:not(:only-child) {
1360
&:first-child { margin-left: 4px; }
1361
&:last-child { margin-right: 4px; }
1363
}
1364
&.slider-button {
1366
padding-left: (24px - 16px) / 2;
1367
padding-right: (24px - 16px) / 2;
1368
}
1369
:not(headerbar) & {
1371
@extend %flat_button;
1372
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1374
$primary_color 0%,
1375
transparent 0%)
1376
0 0 0 / 0 0 0px;
1377
border-radius: $material_radius;
1378
&:checked {
1380
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1381
$primary_color 100%,
1382
transparent 0%)
1383
0 0 2 / 0 0 2px;
1384
&, &:disabled { background-color: transparent; }
1386
}
1387
}
1388
}
1389
/**************
1392
* Tree Views *
1393
**************/
1394
treeview.view {
1395
@at-root * {
1396
-GtkTreeView-horizontal-separator: 4;
1397
-GtkTreeView-grid-line-width: 1;
1398
-GtkTreeView-grid-line-pattern: '';
1399
-GtkTreeView-tree-line-width: 1;
1400
-GtkTreeView-tree-line-pattern: '';
1401
-GtkTreeView-expander-size: 16;
1402
}
1403
border-left-color: $track_color; // this is actually the tree lines color,
1405
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1406
&:selected { border-left-color: $inverse_track_color; }
1408
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1410
&:hover, &:active, &:selected { border-radius: 0; }
1412
&.separator {
1414
min-height: 1px + 2px * 2;
1415
color: $border_color;
1416
}
1417
&:drop(active) {
1419
border-style: solid none;
1420
border-width: 1px;
1421
border-color: $secondary_color;
1422
&.after { border-top-style: none; }
1424
&.before { border-bottom-style: none; }
1426
}
1427
&.expander {
1429
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1430
-gtk-icon-transform: rotate(-90deg);
1431
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1433
&:checked { -gtk-icon-transform: unset; }
1435
color: $secondary_fg_color;
1437
&:hover, &:active { color: $fg_color; }
1439
&:disabled { color: $disabled_secondary_fg_color; }
1441
&:selected {
1443
color: $inverse_secondary_fg_color;
1444
&:hover, &:active { color: $inverse_fg_color; }
1446
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1448
}
1449
}
1450
&.progressbar { // progress bar in treeviews
1452
border-bottom: $bar_size solid $primary_color;
1453
box-shadow: none;
1454
background-color: transparent;
1455
&:selected { border-bottom-color: $inverse_fg_color; }
1457
}
1458
&.trough { // progress bar trough in treeviews
1460
border-bottom: $bar_size solid rgba($primary_color, 0.3);
1461
box-shadow: none;
1462
background-color: transparent;
1463
&:selected { border-bottom-color: $inverse_track_color; }
1465
}
1466
header {
1468
button {
1469
@extend row.activatable;
1470
padding: 2px 6px;
1472
border-style: none solid solid none;
1473
border-width: 1px;
1474
border-color: $border_color;
1475
border-radius: 0;
1476
background-clip: border-box;
1477
&, &:hover, &:active { box-shadow: none; }
1479
&, &:disabled { background-color: $base_color; }
1481
&:last-child { border-right-style: none; }
1483
}
1484
}
1485
button.dnd,
1487
header.button.dnd { // for treeview-like derive widgets
1488
padding: 2px 6px;
1489
border-style: none solid solid;
1490
border-width: 1px;
1491
border-color: $border_color;
1492
border-radius: 0;
1493
box-shadow: none;
1494
background-color: $base_color;
1495
background-clip: border-box;
1496
color: $primary_color;
1497
}
1498
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1500
}
1501
/*********
1504
* Menus *
1505
*********/
1506
menubar,
1507
.menubar {
1508
-GtkWidget-window-dragging: true;
1509
padding: 0;
1510
// box-shadow: inset 0 -1px $border_color;
1511
background-color: $titlebar_bg_color;
1512
> menuitem {
1514
transition: $shorter_transition;
1515
min-height: 20px;
1516
padding: 4px 8px;
1517
color: $titlebar_secondary_fg_color;
1518
&:hover { // Seems like it :hover even with keyboard focus
1520
transition: none;
1521
background-color: $titlebar_divider_color;
1522
color: $titlebar_fg_color;
1523
}
1524
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1526
label:disabled { color: inherit; } // to inherit the above color
1528
}
1529
}
1530
.csd.popup { background-color: transparent; }
1532
menu,
1534
.menu,
1535
.context-menu {
1536
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1537
padding: 4px 0;
1538
box-shadow: inset 0 1px $highlight_color;
1539
background-color: $popup_bg_color;
1540
border: 1px solid $border_color; // adds borders in a non composited env
1541
.csd & {
1543
border: none; // axes borders in a composited env
1544
border-radius: $material_radius;
1545
}
1546
menuitem {
1548
transition: background-color $shorter_duration $deceleration_curve;
1549
min-height: 20px;
1550
min-width: 40px;
1551
padding: 4px 8px;
1552
font: initial;
1553
text-shadow: none;
1554
&:hover {
1556
transition: none;
1557
background-color: $divider_color;
1558
}
1559
&:disabled { color: $disabled_fg_color; }
1561
// submenu indicators
1563
arrow {
1564
min-height: 16px;
1565
min-width: 16px;
1566
&:dir(ltr) {
1568
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1569
margin-left: 8px;
1570
}
1571
&:dir(rtl) {
1573
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1574
margin-right: 8px;
1575
}
1576
}
1577
// avoids labels color being overridden, see
1579
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1580
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1581
}
1582
// overflow arrows
1584
> arrow {
1585
min-height: 16px;
1586
min-width: 16px;
1587
padding: 4px;
1588
background-color: $popup_bg_color;
1589
color: $secondary_fg_color;
1590
&.top {
1592
margin-top: -4px;
1593
border-bottom: 1px solid $border_color;
1594
border-radius: $material_radius $material_radius 0 0;
1595
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1596
}
1597
&.bottom {
1599
margin-top: 4px * 2;
1600
margin-bottom: -4px * 3;
1601
border-top: 1px solid $border_color;
1602
border-radius: 0 0 $material_radius $material_radius;
1603
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1604
}
1605
&:hover {
1607
background-image: image($divider_color);
1608
color: $fg_color;
1609
}
1610
&:disabled {
1612
border-color: transparent;
1613
background-color: transparent;
1614
color: transparent;
1615
// color: $disabled_secondary_fg_color;
1616
}
1617
}
1618
separator { margin: 4px 0; }
1620
}
1621
menuitem {
1623
accelerator { color: $secondary_fg_color; }
1624
&:disabled accelerator { color: $disabled_secondary_fg_color; }
1626
}
1627
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1629
// Electron/Atom render all translucent colors in opaque colors.
1630
// It's a very critical issue for this theme and should be fixed by upstream...
1631
.popup:not(.csd) menu {
1632
menuitem {
1633
color: $opaque_fg_color;
1634
&:hover { background-color: $opaque_divider_color; }
1636
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1638
}
1639
// FIXME: not working this
1641
accelerator { color: $opaque_secondary_fg_color; }
1642
}
1643
/************
1646
* Popovers *
1647
************/
1648
popover.background {
1649
transition: $shadow_transition;
1650
padding: 2px;
1651
box-shadow: $shadow_2; // TODO: this should really have a highlight
1652
background-color: $popup_bg_color;
1653
&:backdrop { box-shadow: $shadow_1; }
1655
&, .csd & {
1657
border-style: solid;
1658
border-width: 1px;
1659
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1660
border-radius: $material_radius + 1px;
1661
}
1662
> stack { margin: -4px; } // remove extra padding from menu style popovers
1664
> toolbar { margin: -2px; }
1666
> list,
1668
> .view,
1669
> toolbar {
1670
border-style: none;
1671
box-shadow: none;
1672
background-color: transparent;
1673
}
1674
// FIXME: Use the popover color instead of transparent as a workaround for .view
1676
list,
1677
.view:not(:selected),
1678
toolbar { background-color: $popup_bg_color; }
1679
// &.touch-selection,
1681
// &.magnifier,
1682
// &.osd { @extend %osd; }
1683
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1685
&.menu button,
1687
button.model {
1688
@extend %simple_flat_button;
1689
min-height: 32px;
1691
padding: 0 8px;
1692
border-radius: $material_radius;
1693
&:checked { @extend %selected_items; }
1695
}
1696
separator { margin: 4px 0; }
1698
list separator { margin: 0; }
1700
}
1701
/*************
1703
* Notebooks *
1704
*************/
1705
notebook {
1706
frame > paned > & > header,
1707
&.frame > header { background-color: $alt_base_color; }
1708
> header {
1710
border-width: 1px;
1711
border-color: $border_color;
1712
background-color: $bg_color;
1713
background-clip: border-box;
1714
&.top {
1716
border-bottom-style: solid;
1717
> tabs {
1719
margin-bottom: -1px;
1720
> tab {
1722
box-shadow: inset 0 -2px transparent;
1723
&:checked { box-shadow: inset 0 -2px $primary_color; }
1725
}
1726
}
1727
}
1728
&.bottom {
1730
border-top-style: solid;
1731
> tabs {
1733
margin-top: -1px;
1734
> tab {
1736
box-shadow: inset 0 2px transparent;
1737
&:checked { box-shadow: inset 0 2px $primary_color; }
1739
}
1740
}
1741
}
1742
&.left {
1744
border-right-style: solid;
1745
> tabs {
1747
margin-right: -1px;
1748
> tab {
1750
box-shadow: inset -2px 0 transparent;
1751
&:checked { box-shadow: inset -2px 0 $primary_color; }
1753
}
1754
}
1755
}
1756
&.right {
1758
border-left-style: solid;
1759
> tabs {
1761
margin-left: -1px;
1762
> tab {
1764
box-shadow: inset 2px 0 transparent;
1765
&:checked { box-shadow: inset 2px 0 $primary_color; }
1767
}
1768
}
1769
}
1770
&.top > tabs > arrow {
1772
@extend %notebook_vert_arrows;
1773
border-top-style: none;
1775
}
1776
&.bottom > tabs > arrow {
1778
@extend %notebook_vert_arrows;
1779
border-bottom-style: none;
1781
}
1782
@at-root %notebook_vert_arrows {
1784
padding-left: 4px;
1785
padding-right: 4px;
1786
&.down {
1788
margin-left: -8px;
1789
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1790
}
1791
&.up {
1793
margin-right: -8px;
1794
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1795
}
1796
}
1797
&.left > tabs > arrow {
1799
@extend %notebook_horz_arrows;
1800
border-left-style: none;
1802
}
1803
&.right > tabs > arrow {
1805
@extend %notebook_horz_arrows;
1806
border-right-style: none;
1808
}
1809
@at-root %notebook_horz_arrows {
1811
padding-top: 4px;
1812
padding-bottom: 4px;
1813
&.down {
1815
margin-top: -8px;
1816
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1817
}
1818
&.up {
1820
margin-bottom: -8px;
1821
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1822
}
1823
}
1824
> tabs > arrow {
1826
@extend %simple_flat_button;
1827
min-height: 16px;
1829
min-width: 16px;
1830
border-radius: 0;
1831
}
1832
tab {
1834
transition: $shorter_transition,
1835
background-size 0,
1836
background-image 0;
1837
min-height: $small_size;
1838
min-width: $small_size;
1839
padding: $container_padding 12px;
1840
outline-offset: -6px;
1842
border-width: 1px; // for reorderable tabs
1844
border-color: transparent; //
1845
background-image: radial-gradient(circle farthest-corner at center,
1847
$primary_color 10%,
1848
transparent 0%);
1849
background-repeat: no-repeat;
1850
background-position: center;
1851
background-size: 0% 0%;
1852
background-clip: border-box;
1853
color: $secondary_fg_color;
1855
font-weight: 500;
1856
&:hover {
1858
background-color: $hover_bg_color;
1859
color: $fg_color;
1860
}
1861
&:disabled { color: $disabled_secondary_fg_color; }
1863
&:checked {
1865
transition: $shorter_transition,
1866
background-size $longer_duration $deceleration_curve,
1867
background-image $longer_duration + $ripple_duration $deceleration_curve;
1868
background-color: transparent;
1869
background-image: radial-gradient(circle farthest-corner at center,
1870
transparent 10%,
1871
transparent 0%);
1872
background-size: 1000% 1000%;
1873
background-clip: padding-box;
1874
color: $fg_color;
1875
&:disabled { color: $disabled_fg_color; }
1877
&.reorderable-page {
1879
border-color: $border_color;
1880
background-color: $base_color;
1881
}
1882
}
1883
// colors the button like the label, overridden otherwise
1885
button.flat {
1886
@extend %small_button;
1887
&:last-child {
1889
margin-left: $container_padding;
1890
margin-right: $container_padding - 12px;
1891
}
1892
&:first-child {
1894
margin-left: $container_padding - 12px;
1895
margin-right: $container_padding;
1896
}
1897
}
1898
}
1899
&.top,
1901
&.bottom {
1902
tabs {
1903
padding-left: 8px;
1904
padding-right: 8px;
1905
&:not(:only-child) {
1907
&:first-child { margin-left: 0; }
1908
&:last-child { margin-right: 0; }
1910
}
1911
tab.reorderable-page { border-style: none solid; }
1913
}
1914
}
1915
&.left,
1917
&.right {
1918
tabs {
1919
padding-top: 8px;
1920
padding-bottom: 8px;
1921
&:not(:only-child) {
1923
&:first-child { margin-top: 0; }
1924
&:last-child { margin-bottom: 0; }
1926
}
1927
tab.reorderable-page { border-style: solid none; }
1929
}
1930
}
1931
}
1932
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1934
background-color: $base_color;
1935
}
1936
}
1937
/**************
1940
* Scrollbars *
1941
**************/
1942
scrollbar {
1943
$_slider_min_length: 24px;
1944
// disable steppers
1946
@at-root * {
1947
-GtkScrollbar-has-backward-stepper: false;
1948
-GtkScrollbar-has-forward-stepper: false;
1949
}
1950
transition: $shorter_transition;
1952
background-color: $base_color;
1953
background-clip: $extra_background_clip;
1954
// scrollbar border
1956
&.top { border-bottom: 1px solid $border_color; }
1957
&.bottom { border-top: 1px solid $border_color; }
1958
&.left { border-right: 1px solid $border_color; }
1959
&.right { border-left: 1px solid $border_color; }
1960
// slider
1962
slider {
1963
transition: $shorter_transition, margin 0, border-width 0;
1964
min-width: 8px;
1965
min-height: 8px;
1966
border: 4px solid transparent;
1967
border-radius: $circular_radius;
1968
background-clip: padding-box;
1969
background-color: $hint_fg_color;
1970
&:hover { background-color: $secondary_fg_color; }
1972
&:active { background-color: $fg_color; }
1974
&:disabled { background-color: $disabled_secondary_fg_color; }
1976
}
1977
&.fine-tune {
1979
slider {
1980
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1981
min-width: 4px;
1982
min-height: 4px;
1983
}
1984
&.horizontal slider { margin: 2px 0; }
1986
&.vertical slider { margin: 0 2px; }
1988
}
1989
&.overlay-indicator {
1991
&:not(.dragging):not(.hovering) {
1992
border-color: transparent;
1993
background-color: transparent;
1994
slider {
1996
min-width: 4px;
1997
min-height: 4px;
1998
margin: 4px - 1px;
1999
border: 1px solid rgba($base_color, 0.3);
2000
}
2001
button {
2003
min-width: 4px;
2004
min-height: 4px;
2005
margin: 4px - 1px;
2006
border: 1px solid rgba($base_color, 0.3);
2007
border-radius: $circular_radius;
2008
background-color: $hint_fg_color;
2009
background-clip: padding-box;
2010
-gtk-icon-source: none;
2011
&:disabled { background-color: $disabled_secondary_fg_color; }
2013
}
2014
&.horizontal {
2016
slider { min-width: $_slider_min_length; }
2017
button { min-width: 8px; }
2019
}
2020
&.vertical {
2022
slider { min-height: $_slider_min_length; }
2023
button { min-height: 8px; }
2025
}
2026
}
2027
&.dragging,
2029
&.hovering { background-color: rgba($base_color, 0.9); }
2030
}
2031
&.horizontal slider { min-width: $_slider_min_length; }
2033
&.vertical slider { min-height: $_slider_min_length; }
2035
// button styling
2037
button {
2038
@extend %simple_flat_button;
2039
min-width: 16px;
2041
min-height: 16px;
2042
padding: 0;
2043
border-radius: 0;
2044
}
2045
// button icons
2047
&.vertical {
2048
button {
2049
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2050
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2052
}
2053
}
2054
&.horizontal {
2056
button {
2057
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2058
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2060
}
2061
}
2062
}
2063
/**********
2066
* Switch *
2067
**********/
2068
switch {
2069
transition: all $shorter_duration $deceleration_curve;
2070
margin: $container_padding 0;
2071
padding: 0 2px;
2072
border: 5px solid transparent;
2073
border-radius: $circular_radius;
2074
background-color: $track_color;
2075
background-clip: padding-box;
2076
font-size: 0;
2077
&:checked { background-color: rgba($secondary_color, 0.5); }
2079
&:disabled { opacity: 0.5; }
2081
slider {
2083
transition: all $shorter_duration $deceleration_curve;
2084
min-width: 20px;
2085
min-height: 20px;
2086
margin: -3px -2px;
2087
border-radius: $circular_radius;
2088
box-shadow: 0 0 0 10px transparent, $shadow_1;
2089
background-color: $popup_bg_color;
2090
}
2091
&:hover slider { box-shadow: 0 0 0 10px $hover_bg_color, $shadow_1; }
2093
&:focus slider { box-shadow: 0 0 0 10px $focus_bg_color, $shadow_1; }
2095
&:focus:hover slider { box-shadow: 0 0 0 10px $hover_focus_bg_color, $shadow_1; }
2097
&:checked slider {
2099
background-color: $secondary_color;
2100
color: $secondary_color;
2101
}
2102
row:selected & {
2104
}
2105
}
2106
/*************************
2109
* Check and Radio items *
2110
*************************/
2111
// draw regular check and radio items using our PNG assets
2112
// all assets are rendered from assets.svg. never add pngs directly
2113
// selection-mode
2115
.view.content-view.check:not(list),
2116
.content-view .tile check:not(list) {
2117
min-height: 40px;
2118
min-width: 40px;
2119
margin: 0;
2120
padding: 0;
2121
box-shadow: none;
2122
background-color: transparent;
2123
background-image: none;
2124
-gtk-icon-shadow: $shadow_1;
2125
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2127
@each $s, $as in ('', '-unchecked'),
2129
(':checked', '-checked') {
2130
&#{$s} {
2131
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2132
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2133
}
2134
}
2135
}
2136
checkbutton,
2138
radiobutton {
2139
outline: none;
2140
}
2141
checkbutton.text-button,
2143
radiobutton.text-button {
2144
// this is for a nice focus on check and radios text
2145
padding: 2px;
2146
label:not(:only-child) { margin: 0 4px; }
2148
}
2149
$check_radio_size: 40px;
2151
check,
2153
radio {
2154
min-height: 24px;
2155
min-width: 24px;
2156
margin: -($check_radio_size - 24px) / 2;
2157
padding: ($check_radio_size - 24px) / 2;
2158
@extend %simple_flat_button;
2160
@extend %circular_button;
2162
&:hover { box-shadow: inset 0 0 0 9999px $hover_bg_color; }
2164
&:focus { box-shadow: inset 0 0 0 9999px $focus_bg_color; }
2166
&:focus:hover { box-shadow: inset 0 0 0 9999px $hover_focus_bg_color; }
2168
&:checked, &:indeterminate {
2170
color: $secondary_color;
2171
&:disabled { color: $disabled_secondary_color; }
2173
}
2174
// &:only-child { margin: -12px; }
2176
row:selected &:not(:checked):not(:indeterminate) {
2178
color: $inverse_secondary_fg_color;
2179
&:hover, &:active { color: $inverse_fg_color; }
2181
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2183
}
2184
popover & {
2186
&, &:hover, &:focus, &:focus:hover, &:active, &:disabled {
2187
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2188
box-shadow: none;
2189
background-image: none;
2190
}
2191
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2193
&.left:dir(rtl) {
2195
margin-left: -12px;
2196
margin-right: -4px;
2197
}
2198
&.right:dir(ltr) {
2200
margin-left: -4px;
2201
margin-right: -12px;
2202
}
2203
}
2204
menu menuitem & {
2206
transition: none;
2207
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2208
padding: 0;
2209
&:dir(ltr) { margin-right: 8px; }
2211
&:dir(rtl) { margin-left: 8px; }
2213
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2215
&, &:hover, &:disabled {
2217
box-shadow: none;
2218
// color: inherit;
2219
}
2220
}
2221
}
2222
%check,
2224
check {
2225
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2226
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2228
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2230
}
2231
%radio,
2233
radio {
2234
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2235
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2237
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2239
border-image-slice: $check_radio_size / 2px;
2241
border-image-width: $check_radio_size / 2;
2242
$radio_indicator: 10px / $check_radio_size / 2;
2244
& {
2246
border-image-source: -gtk-gradient(radial,
2247
center center, 0,
2248
center center, 0.001,
2249
to($secondary_color),
2250
to(transparent));
2251
}
2252
&:checked:not(:indeterminate) {
2254
border-image-source: -gtk-gradient(radial,
2255
center center, 0,
2256
center center, $radio_indicator,
2257
to($secondary_color),
2258
to(transparent));
2259
}
2260
&:checked:not(:indeterminate):disabled {
2262
border-image-source: -gtk-gradient(radial,
2263
center center, 0,
2264
center center, $radio_indicator,
2265
to($disabled_secondary_color),
2266
to(transparent));
2267
}
2268
}
2269
%small_check,
2271
menu menuitem check {
2272
& {
2273
min-height: 16px;
2274
min-width: 16px;
2275
border-radius: $material_radius;
2276
-gtk-outline-radius: $material_radius;
2277
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2278
}
2279
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2281
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2283
}
2284
%small_radio,
2286
menu menuitem radio {
2287
& {
2288
min-height: 16px;
2289
min-width: 16px;
2290
border-image: none;
2291
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2292
}
2293
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2295
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2297
}
2298
// ANIMATION:
2300
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2301
// the transformation is set on the active state and it get reset on the checked state.
2302
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2303
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2305
check:not(:checked):indeterminate:active,
2307
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2308
check:not(:checked),
2310
radio:not(:checked) {
2311
& {
2312
transition: $shorter_transition,
2313
background-size $ripple_duration $deceleration_curve,
2314
background-image $ripple_opacity_duration $deceleration_curve,
2315
-gtk-icon-transform 0;
2316
}
2317
&:active {
2319
transition: $shorter_transition,
2320
background-size 0,
2321
background-image 0,
2322
-gtk-icon-transform 0;
2323
}
2324
menu menuitem & { transition: none; }
2326
}
2327
treeview.view check,
2329
treeview.view radio {
2330
padding: 0;
2331
&:hover {
2333
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.08);
2334
&:disabled { box-shadow: none; }
2336
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.08); }
2338
}
2339
& {
2341
color: $secondary_fg_color;
2342
&:hover, &:active { color: $fg_color; }
2344
&:disabled { color: $disabled_secondary_fg_color; }
2346
&:checked, &:indeterminate { color: $secondary_color; }
2348
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_color; }
2350
}
2351
&:selected {
2353
color: $inverse_secondary_fg_color;
2354
&:hover, &:active { color: $inverse_fg_color; }
2356
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2358
&:checked, &:indeterminate { color: $secondary_color; }
2360
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_color; }
2362
}
2363
}
2364
treeview.view radio:checked {
2366
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2367
border-image: none;
2368
}
2369
/************
2372
* GtkScale *
2373
************/
2374
scale {
2375
// sizing
2376
$_marks_length: 8px;
2377
$_marks_distance: 7px;
2378
$trough_size: 2px;
2380
$finetune_trough_size: 4px;
2381
$slider_size: 32px;
2383
$slider_margin: -($slider_size - $trough_size) / 2;
2385
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2386
$color_slider_margin: -($slider_size) * 3 / 4;
2388
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2389
min-height: $trough_size;
2391
min-width: $trough_size;
2392
&.horizontal { padding: ($medium_size - $trough_size) / 2 12px; }
2394
&.vertical { padding: 12px ($medium_size - $trough_size) / 2; }
2396
// the slider is inside the trough, so to have make it bigger there's a negative margin
2398
slider {
2399
min-height: $slider_size;
2400
min-width: $slider_size;
2401
margin: $slider_margin;
2402
}
2403
// click-and-hold the slider to activate
2405
&.fine-tune {
2406
&.horizontal {
2407
min-height: $finetune_trough_size;
2408
padding-top: ($medium_size - $finetune_trough_size) / 2;
2409
padding-bottom: ($medium_size - $finetune_trough_size) / 2;
2410
}
2411
&.vertical {
2413
min-width: $finetune_trough_size;
2414
padding-left: ($medium_size - $finetune_trough_size) / 2;
2415
padding-right: ($medium_size - $finetune_trough_size) / 2;
2416
}
2417
// to make the trough grow in fine-tune mode
2419
slider { margin: $finetune_slider_margin; }
2420
}
2421
// the backing bit
2423
trough {
2424
transition: background-color $shorter_duration $deceleration_curve;
2425
outline: none;
2426
background-color: $track_color;
2427
&:disabled { background-color: $divider_color; }
2429
}
2430
// the colored part of the backing bit
2432
highlight {
2433
transition: background-color $shorter_duration $deceleration_curve;
2434
background-color: $secondary_color;
2435
&:disabled { background-color: transparent; }
2437
}
2438
// this is another differently styled part of the backing bit, the most relevant use case is for example
2440
// in media player to indicate how much video stream as been cached
2441
fill {
2442
transition: background-color $shorter_duration $deceleration_curve;
2443
background-color: $track_color;
2444
&:disabled { background-color: transparent; }
2446
}
2447
slider {
2449
transition: background-color $shorter_duration $deceleration_curve,
2450
background-size $ripple_duration $deceleration_curve,
2451
background-image $ripple_opacity_duration $deceleration_curve;
2452
background-repeat: no-repeat;
2453
background-position: center;
2454
background-size: auto, 1000% 1000%;
2455
border-radius: 50%;
2456
color: transparent;
2457
@each $s, $as in ('', ''),
2459
(':disabled', '-disabled') {
2460
&#{$s} {
2461
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2462
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2464
radial-gradient(circle farthest-corner at center,
2465
currentColor 10%,
2466
transparent 0%);
2467
}
2468
}
2469
&:hover { background-color: rgba($secondary_color, 0.08); }
2471
&:focus { background-color: rgba($secondary_color, 0.12); }
2473
&:focus:hover { background-color: rgba($secondary_color, 0.16); }
2475
&:active {
2477
transition: background-color $shorter_duration $deceleration_curve,
2478
background-size 0,
2479
background-image 0;
2480
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
2481
background-size: auto, 0% 0%;
2482
background-color: rgba($secondary_color, 0.08);
2483
color: rgba($secondary_color, 0.12);
2484
}
2485
}
2486
marks label,
2488
value { color: $hint_fg_color; }
2489
marks {
2491
color: $track_color;
2492
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2494
(bottom, bottom, top),
2495
(left, left, right),
2496
(right, right, left) {
2497
&.#{$marks_class} {
2498
margin-#{$marks_margin}: $_marks_distance;
2499
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2500
}
2501
}
2502
}
2503
&.fine-tune marks {
2505
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2506
(bottom, bottom, top),
2507
(left, left, right),
2508
(right, right, left) {
2509
&.#{$marks_class} {
2510
margin-#{$marks_margin}: $_marks_distance - 1px;
2511
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2512
}
2513
}
2514
}
2515
&.horizontal {
2517
indicator {
2518
min-height: $_marks_length;
2519
min-width: 1px;
2520
}
2521
}
2522
&.vertical {
2524
indicator {
2525
min-height: 1px;
2526
min-width: $_marks_length;
2527
}
2528
}
2529
// *WARNING* scale with marks madness following
2531
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2533
('vertical', 'vert') {
2534
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2535
('marks-after', 'marks-after:not(.marks-before)') {
2536
&.#{$dir_class}.#{$marks_class} {
2537
slider {
2538
@each $state, $state_infix in ('', ''),
2539
(':disabled', '-disabled') {
2540
&#{$state} {
2541
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2542
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2544
radial-gradient(circle farthest-corner at center,
2545
currentColor 10%,
2546
transparent 0%);
2547
}
2548
}
2549
}
2550
}
2551
}
2552
}
2553
&.color {
2555
min-height: 0;
2556
min-width: 0;
2557
&.horizontal {
2559
padding: 0 0 12px 0;
2560
slider {
2562
&:dir(ltr), &:dir(rtl) { // specificity bump
2563
margin-bottom: $color_slider_margin;
2564
margin-top: $color_marks_slider_margin;
2565
}
2566
}
2567
}
2568
&.vertical {
2570
&:dir(ltr) {
2571
padding: 0 0 0 12px;
2572
slider {
2574
margin-left: $color_slider_margin;
2575
margin-right: $color_marks_slider_margin;
2576
}
2577
}
2578
&:dir(rtl) {
2580
padding: 0 12px 0 0;
2581
slider {
2583
margin-right: $color_slider_margin;
2584
margin-left: $color_marks_slider_margin;
2585
}
2586
}
2587
}
2588
}
2589
}
2590
/*****************
2593
* Progress bars *
2594
*****************/
2595
progressbar {
2596
// sizing
2597
&.horizontal {
2598
trough,
2599
progress { min-height: $bar_size; }
2600
}
2601
&.vertical {
2603
trough,
2604
progress { min-width: $bar_size; }
2605
}
2606
// FIXME: insensitive state missing and some other state should be set probably
2608
color: $hint_fg_color;
2609
font-size: smaller;
2610
trough { background-color: rgba($primary_color, 0.3); }
2612
progress { background-color: $primary_color; }
2614
&.osd { // progressbar.osd used for epiphany page loading progress
2616
// min-width: $bar_size;
2617
// min-height: $bar_size;
2618
// background-color: transparent;
2619
// trough { background-color: transparent; }
2621
// progress { background-color: $primary_color; }
2623
}
2624
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2626
}
2627
/*************
2630
* Level Bar *
2631
*************/
2632
levelbar {
2633
&.horizontal {
2634
block { min-height: $bar_size; }
2635
&.discrete block {
2637
min-width: $medium_size;
2638
&:not(:last-child) { margin-right: 2px; }
2640
}
2641
}
2642
&.vertical {
2644
block { min-width: $bar_size; }
2645
&.discrete block {
2647
min-height: $medium_size;
2648
&:not(:last-child) { margin-bottom: 2px; }
2650
}
2651
}
2652
// imitate the entry style
2654
trough {
2655
// padding: 2px;
2656
// border-radius: $material_radius;
2657
// box-shadow: $shadow_1;
2658
// background-color: $base_color;
2659
// &:disabled { background-color: $alt_base_color; }
2661
}
2662
block {
2664
&.low { background-color: $warning_color; }
2665
&.high,
2667
&:not(.empty) { background-color: $primary_color; }
2668
&.full { background-color: $success_color; }
2670
&.empty { background-color: $divider_color; }
2672
}
2673
}
2674
/****************
2677
* Print dialog *
2678
*****************/
2679
printdialog {
2680
paper {
2681
padding: 0;
2682
border: 1px solid $border_color;
2683
background-color: $base_color;
2684
color: $fg_color;
2685
}
2686
.dialog-action-box { margin: 12px; }
2688
}
2689
/**********
2692
* Frames *
2693
**********/
2694
frame > border,
2695
.frame {
2696
margin: 0;
2697
padding: 0;
2698
border: 1px solid $border_color;
2699
border-radius: 0;
2700
box-shadow: none;
2701
&.flat { border-style: none; }
2703
}
2704
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2706
actionbar > revealer > box {
2708
padding: $container_padding;
2709
border-top: 1px solid $border_color;
2710
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2712
}
2713
scrolledwindow {
2715
viewport.frame { // avoid double borders when viewport inside scrolled window
2716
border-style: none;
2717
}
2718
// This is used when content is touch-dragged past boundaries.
2720
// draws a box on top of the content, the size changes programmatically.
2721
@at-root overshoot {
2722
&.top { @include overshoot(top); }
2723
&.bottom { @include overshoot(bottom); }
2725
&.left { @include overshoot(left); }
2727
&.right { @include overshoot(right); }
2729
}
2730
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2732
@at-root undershoot {
2733
&.top { @include undershoot(top); }
2734
&.bottom { @include undershoot(bottom); }
2736
&.left { @include undershoot(left); }
2738
&.right { @include undershoot(right); }
2740
}
2741
@at-root junction { // the small square between two scrollbars
2743
border-style: solid none none solid;
2744
border-width: 1px;
2745
border-color: $border_color;
2746
background-color: $base_color;
2747
&:dir(rtl) { border-style: solid solid none none; }
2749
}
2750
}
2751
// vbox and hbox separators
2753
separator {
2754
min-width: 1px;
2755
min-height: 1px;
2756
background-color: $border_color;
2757
}
2758
%hide_separators {
2760
min-width: 0;
2761
min-height: 0;
2762
background-color: transparent;
2763
}
2764
/*********
2767
* Lists *
2768
*********/
2769
list {
2770
border-color: $border_color;
2771
background-color: $base_color;
2772
row { padding: 2px; }
2774
}
2775
// FIXME
2777
$row_transition: $shorter_transition, background-color 0, color 0;
2778
row {
2780
&.activatable {
2781
transition: $row_transition,
2782
background-size $ripple_duration $deceleration_curve,
2783
background-image $ripple_opacity_duration $deceleration_curve;
2784
box-shadow: inset 0 0 0 9999px transparent;
2785
background-image: radial-gradient(circle farthest-corner at center,
2786
transparent 10%,
2787
transparent 0%);
2788
background-repeat: no-repeat;
2789
background-position: center;
2790
background-size: 1000% 1000%;
2791
&:hover {
2793
transition: $row_transition,
2794
box-shadow 0,
2795
background-size $ripple_duration $deceleration_curve,
2796
background-image $ripple_opacity_duration $deceleration_curve;
2797
box-shadow: inset 0 0 0 9999px $hover_bg_color;
2798
}
2799
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2801
&:active {
2802
transition: $row_transition,
2803
background-size 0,
2804
background-image 0;
2805
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2806
box-shadow: inset 0 0 0 9999px $hover_bg_color;
2807
background-image: radial-gradient(circle farthest-corner at center,
2808
$active_bg_color 10%,
2809
transparent 0%);
2810
background-size: 0% 0%;
2811
}
2812
}
2813
&:selected { @extend %selected_items; }
2815
}
2816
/*********************
2819
* App Notifications *
2820
*********************/
2821
.app-notification {
2822
// @extend %osd;
2823
@extend toolbar.osd;
2825
margin: 8px;
2827
button { @extend %button_basic.flat; }
2829
&.frame,
2831
border { border-style: none; }
2832
}
2833
/*************
2836
* Expanders *
2837
*************/
2838
expander {
2839
title > arrow {
2840
transition: all $shorter_duration $deceleration_curve;
2841
min-width: 16px;
2842
min-height: 16px;
2843
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2844
-gtk-icon-transform: rotate(-90deg);
2845
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2847
&:checked { -gtk-icon-transform: unset; }
2849
color: $secondary_fg_color;
2851
&:hover, &:active { color: $fg_color; }
2853
&:disabled { color: $disabled_secondary_fg_color; }
2855
&:selected {
2857
color: $inverse_secondary_fg_color;
2858
&:hover, &:active { color: $inverse_fg_color; }
2860
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2862
}
2863
}
2864
}
2865
/************
2868
* Calendar *
2869
************/
2870
calendar {
2871
padding: 1px;
2872
border: 1px solid $border_color;
2873
color: $fg_color;
2874
&:disabled { color: $disabled_fg_color; }
2876
&:selected {
2878
@extend %selected_items;
2879
border-radius: $material_radius + 1px;
2881
}
2882
&.header {
2884
border-style: none none solid;
2885
border-radius: 0;
2886
}
2887
&.button { @extend %simple_flat_button; }
2889
&.highlight {
2891
color: $secondary_fg_color;
2892
font-weight: 500;
2893
}
2894
&:indeterminate { color: $disabled_secondary_fg_color; }
2896
}
2897
/***********
2900
* Dialogs *
2901
***********/
2902
messagedialog { // Message Dialog styling
2903
&.background { background-color: $popup_bg_color; }
2904
.titlebar {
2906
min-height: $small_size;
2907
border-style: none;
2908
box-shadow: inset 0 1px $highlight_color;
2909
background-color: $popup_bg_color;
2910
color: $fg_color;
2911
&:backdrop { color: $secondary_fg_color; }
2913
}
2914
&.csd { // rounded bottom border styling for csd version
2916
&.background {
2917
// bigger radius for better antialiasing
2918
border-bottom-left-radius: $material_radius;
2919
border-bottom-right-radius: $material_radius;
2920
}
2921
.dialog-action-area {
2923
margin-top: -$container_padding;
2924
padding: $container_padding;
2925
button {
2927
@extend %simple_flat_button;
2928
border-radius: $material_radius;
2929
&:not(:last-child) { margin-right: $container_padding; }
2931
&.suggested-action:not(:disabled) { color: $suggested_color; }
2933
&.destructive-action:not(:disabled) { color: $destructive_color; }
2935
}
2936
}
2937
}
2938
}
2939
filechooser {
2941
.dialog-action-box { border-top: 1px solid $border_color; }
2942
#pathbarbox {
2944
border-bottom: 1px solid $border_color;
2945
background-color: $bg_color;
2946
}
2947
}
2948
filechooserbutton:drop(active) {
2950
box-shadow: none;
2951
}
2952
/***********
2955
* Sidebar *
2956
***********/
2957
.sidebar {
2958
border-style: none;
2959
background-color: $alt_base_color;
2960
@at-root %sidebar_left,
2962
&:dir(ltr),
2963
&.left,
2964
&.left:dir(rtl) {
2965
border-right: 1px solid $border_color;
2966
border-left-style: none;
2967
}
2968
@at-root %sidebar_right,
2970
&:dir(rtl),
2971
&.right {
2972
border-left: 1px solid $border_color;
2973
border-right-style: none;
2974
}
2975
list { background-color: transparent; }
2977
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2979
}
2980
stacksidebar {
2982
&.sidebar {
2983
&:dir(ltr),
2984
&.left,
2985
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2986
&:dir(rtl),
2988
&.right { list { @extend %sidebar_right; }}
2989
}
2990
row {
2992
padding: 10px 4px;
2993
> label {
2995
padding-left: 6px;
2996
padding-right: 6px;
2997
}
2998
&.needs-attention > label { @extend %needs_attention; }
3000
}
3001
}
3002
/****************
3005
* File chooser *
3006
****************/
3007
// dim the sidebar icons, see bug #786613 for details on this oddity
3008
row {
3009
image.sidebar-icon { color: $secondary_fg_color; }
3010
&:selected image.sidebar-icon { color: $inverse_secondary_fg_color; }
3012
}
3013
placessidebar {
3015
> viewport.frame { border-style: none; }
3016
list { padding: (4px - 3px) 0 4px; }
3018
row {
3020
// Needs overriding of the GtkListBoxRow padding
3021
min-height: 32px;
3022
margin: -1px 0; // Remove unknown margins
3023
padding: 0;
3024
// Using margins/padding directly in the SidebarRow
3026
// will make the animation of the new bookmark row jump
3027
> revealer { padding: 0 12px; }
3028
&:selected { color: $inverse_fg_color; }
3030
&:disabled { color: $disabled_fg_color; }
3032
image.sidebar-icon {
3034
&:dir(ltr) { padding-right: 8px; }
3035
&:dir(rtl) { padding-left: 8px; }
3036
}
3037
label.sidebar-label {
3039
&:dir(ltr) { padding-right: 2px; }
3040
&:dir(rtl) { padding-left: 2px; }
3041
}
3042
@at-root button.sidebar-button {
3044
@extend %simple_flat_button;
3045
@extend %small_button;
3047
row:selected & { @extend %button_selected.flat; }
3049
}
3050
&.sidebar-placeholder-row {
3052
min-height: 2px;
3053
padding: 0 8px;
3054
background-image: image($secondary_color);
3055
background-clip: content-box;
3056
}
3057
&.sidebar-new-bookmark-row { color: $secondary_color; }
3059
&:drop(active):not(:disabled) {
3061
box-shadow: inset 0 0 0 2px $secondary_color;
3062
&:selected {
3064
// background-color: $secondary_color;
3065
// color: $inverse_fg_color;
3066
}
3067
}
3068
}
3069
}
3070
placesview {
3072
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3073
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3075
// this selects the "connect to server" label
3077
> actionbar > revealer > box > label {
3078
padding-left: 8px;
3079
padding-right: 8px;
3080
}
3081
}
3082
/*********
3085
* Paned *
3086
*********/
3087
paned {
3088
> separator {
3089
min-width: 1px;
3090
min-height: 1px;
3091
-gtk-icon-source: none; // defeats the ugly default handle decoration
3092
border-style: none; // just to be sure
3093
background-color: transparent;
3094
// workaround, using background istead of a border since the border will get rendered twice (?)
3095
background-image: image($border_color);
3096
background-size: 1px 1px;
3097
background-clip: content-box; // avoids borders image being rendered twice (?)
3098
&.wide {
3100
min-width: 6px;
3101
min-height: 6px;
3102
background-color: $bg_color;
3103
background-image: image($border_color), image($border_color);
3104
background-size: 1px 1px, 1px 1px;
3105
}
3106
}
3107
&.horizontal > separator {
3109
background-repeat: repeat-y;
3110
&:dir(ltr) {
3112
margin: 0 -8px 0 0;
3113
padding: 0 8px 0 0;
3114
background-position: left;
3115
}
3116
&:dir(rtl) {
3118
margin: 0 0 0 -8px;
3119
padding: 0 0 0 8px;
3120
background-position: right;
3121
}
3122
&.wide {
3124
margin: 0;
3125
padding: 0;
3126
background-repeat: repeat-y, repeat-y;
3127
background-position: left, right;
3128
}
3129
}
3130
&.vertical > separator {
3132
margin: 0 0 -8px 0;
3133
padding: 0 0 8px 0;
3134
background-repeat: repeat-x;
3135
background-position: top;
3136
&.wide {
3138
margin: 0;
3139
padding: 0;
3140
background-repeat: repeat-x, repeat-x;
3141
background-position: bottom, top;
3142
}
3143
}
3144
}
3145
/**************
3148
* GtkInfoBar *
3149
**************/
3150
infobar {
3151
border-style: none;
3152
&.info { background-color: $info_bg_color; }
3154
&.question { background-color: $question_bg_color; }
3156
&.warning { background-color: $warning_bg_color; }
3158
&.error { background-color: $error_bg_color; }
3160
&.info,
3162
&.question,
3163
&.warning,
3164
&.error {
3165
> label, & { color: $inverse_fg_color; }
3166
button { @extend %button_selected; }
3168
selection {}
3170
*:link { @extend %link_selected; }
3172
}
3173
}
3174
/************
3177
* Tooltips *
3178
************/
3179
tooltip {
3180
&.background {
3181
// background-color needs to be set this way otherwise it gets drawn twice
3182
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3183
// box-shadow: inset 0 1px $highlight_color;
3184
background-color: $tooltip_bg_color;
3185
color: $tooltip_fg_color;
3186
}
3187
// padding: 4px; /* not working */
3189
border-radius: $material_radius;
3190
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3191
&:not(.csd):not(.unity-csd) {
3193
// border: 1px solid $border_color;
3194
// border-radius: $material_radius + 1px;
3195
// background-clip: $extra_background_clip;
3196
}
3197
// FIXME: we need a border or tooltips vanish on black background.
3199
decoration { background-color: transparent; }
3200
label {
3202
// tooltip label already seems to have 6px margins
3203
min-height: 32px - 6px * 2;
3204
padding: 0 8px - 6px;
3205
}
3206
* {
3208
// workaround for Eclipse.
3209
// do not include any declaration here.
3210
// padding: 0;
3211
// background-color: transparent;
3212
// color: inherit;
3213
}
3214
}
3215
/*****************
3218
* Color Chooser *
3219
*****************/
3220
colorswatch {
3221
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3222
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3223
// applied to the overlay box.
3224
// base color corners rounding
3226
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3227
// sports a bigger radius.
3228
// nth-child is needed by the custom color strip.
3229
&.top {
3231
border-top-left-radius: $material_radius + 0.5px;
3232
border-top-right-radius: $material_radius + 0.5px;
3233
overlay {
3235
border-top-left-radius: $material_radius;
3236
border-top-right-radius: $material_radius;
3237
}
3238
}
3239
&.bottom {
3241
border-bottom-left-radius: $material_radius + 0.5px;
3242
border-bottom-right-radius: $material_radius + 0.5px;
3243
overlay {
3245
border-bottom-left-radius: $material_radius;
3246
border-bottom-right-radius: $material_radius;
3247
}
3248
}
3249
&.left,
3251
&:first-child:not(.top) {
3252
border-top-left-radius: $material_radius + 0.5px;
3253
border-bottom-left-radius: $material_radius + 0.5px;
3254
overlay {
3256
border-top-left-radius: $material_radius;
3257
border-bottom-left-radius: $material_radius;
3258
}
3259
}
3260
&.right,
3262
&:last-child:not(.bottom) {
3263
border-top-right-radius: $material_radius + 0.5px;
3264
border-bottom-right-radius: $material_radius + 0.5px;
3265
overlay {
3267
border-top-right-radius: $material_radius;
3268
border-bottom-right-radius: $material_radius;
3269
}
3270
}
3271
&.dark { color: $light_fg_color; }
3273
&.light { color: $dark_fg_color; }
3275
&:drop(active) {
3277
box-shadow: none;
3278
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $secondary_color; }
3280
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $secondary_color; }
3282
}
3283
overlay {
3285
transition: $shadow_transition;
3286
box-shadow: $shadow_1;
3287
&:hover { box-shadow: $shadow_2; }
3289
}
3290
&#add-color-button {
3292
border-radius: $material_radius $material_radius 0 0;
3293
color: $light_fg_color;
3294
&:only-child { border-radius: $material_radius; }
3296
overlay {
3298
background-image: linear-gradient(to right,
3299
$error_bg_color 25%,
3300
$warning_bg_color 25%, $warning_bg_color 50%,
3301
$info_bg_color 50%, $info_bg_color 75%,
3302
$question_bg_color 75%);
3303
}
3304
}
3305
&:disabled {
3307
opacity: 0.5;
3308
overlay { box-shadow: none; }
3310
}
3311
row:selected & {
3313
}
3314
&#editor-color-sample {
3316
border-radius: $material_radius + 0.5px;
3317
overlay { border-radius: $material_radius; }
3319
// overlay:hover { box-shadow: $shadow_1; }
3321
}
3322
}
3323
// colorscale popup
3325
colorchooser .popover.osd {
3326
transition: $shadow_transition;
3327
border-radius: $material_radius;
3328
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3329
background-color: $popup_bg_color;
3330
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3332
}
3333
/********
3336
* Misc *
3337
********/
3338
// content view (grid/list)
3339
.content-view {
3340
background-color: $bg_color;
3341
// &:hover { -gtk-icon-effect: highlight; }
3343
rubberband, .rubberband { @extend rubberband; }
3345
}
3346
.scale-popup {
3348
// .osd & { @extend %osd; }
3349
.osd & button.flat { // FIXME: quick hack, redo properly
3351
}
3352
button { // +/- buttons on GtkVolumeButton popup
3354
}
3355
}
3356
/**********************
3359
* Window Decorations *
3360
**********************/
3361
decoration {
3362
transition: $shadow_transition;
3363
border-radius: $material_radius $material_radius 0 0;
3364
box-shadow: $shadow_4, 0 16px 16px transparent;
3365
// FIXME rationalize shadows
3367
// this is used for the resize cursor area
3369
margin: 8px;
3370
&:backdrop {
3372
// the transparent shadow here is to enforce that the shadow extents don't
3373
// change when we go to backdrop, to prevent jumping windows.
3374
// The biggest shadow should be in the same order then in the active state
3375
// or the jumping will happen during the transition.
3376
box-shadow: $shadow_2, 0 16px 16px transparent;
3377
}
3378
.maximized &,
3380
.fullscreen &,
3381
.tiled &,
3382
.tiled-top &,
3383
.tiled-right &,
3384
.tiled-bottom &,
3385
.tiled-left & { border-radius: 0; }
3386
.popup & { box-shadow: none; }
3388
// server-side decorations as used by mutter
3390
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3391
.csd.popup & {
3393
border-radius: $material_radius;
3394
box-shadow: $shadow_2;
3395
}
3396
tooltip.csd & {
3398
border-radius: $material_radius;
3399
box-shadow: none;
3400
}
3401
messagedialog.csd & {
3403
border-radius: $material_radius;
3404
// box-shadow: $shadow_4, 0 16px 16px transparent;
3405
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3407
}
3408
.solid-csd & {
3410
margin: 0;
3411
// padding: 4px;
3412
border-radius: 0;
3413
box-shadow: none;
3414
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3415
background-color: $titlebar_bg_color;
3416
}
3417
}
3418
// Window Close button
3420
button.titlebutton {
3421
// @extend %simple_flat_button;
3422
@extend %circular_button;
3424
.selection-mode & {
3426
}
3427
}
3428
// catch all extend :)
3431
%selected_items {
3433
background-color: $primary_color;
3434
@at-root %nobg_selected_items, & {
3436
color: $inverse_fg_color;
3437
&:disabled { color: $inverse_disabled_fg_color; }
3439
}
3440
}
3441
.monospace { font-family: monospace; }
3443
/**********************
3446
* Touch Copy & Paste *
3447
**********************/
3448
// touch selection handlebars for the Popover.osd above
3449
cursor-handle {
3450
border-radius: $circular_radius;
3451
background-color: $secondary_color;
3452
background-image: none;
3453
&.top:dir(ltr), &.bottom:dir(rtl) {
3455
padding-left: 6px;
3456
border-top-right-radius: 0;
3457
}
3458
&.bottom:dir(ltr), &.top:dir(rtl) {
3460
padding-right: 6px;
3461
border-top-left-radius: 0;
3462
}
3463
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3465
-GtkWidget-text-handle-width: 24;
3466
-GtkWidget-text-handle-height: 30;
3467
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3469
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3470
url('#{$_url}@2.png'));
3471
}
3472
}
3473
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3475
// shortcut window keys
3477
.keycap {
3478
min-width: 28px - 8px * 2;
3479
min-height: 28px - 2px;
3480
margin-top: 2px;
3481
padding-bottom: 2px;
3482
padding-left: 8px;
3483
padding-right: 8px;
3484
border: solid 1px $border_color;
3486
border-radius: $material_radius + 1px;
3487
box-shadow: inset 0 -2px $border_color;
3488
background-color: $popup_bg_color;
3489
color: $fg_color;
3490
font-size: smaller;
3491
}
3492
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3494
transition: $shorter_transition;
3495
box-shadow: $shadow_1, inset 0 0 0 2px $secondary_color;
3496
caret-color: $secondary_color;
3497
}
3498
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3500
stackswitcher button.circular,
3502
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3503
min-width: $medium_size;
3504
min-height: $medium_size;
3505
padding: 0;
3506
}
3507
/*********
3510
* Emoji *
3511
*********/
3512
popover.emoji-picker {
3513
padding: 0;
3514
entry {
3516
border-bottom: 1px solid $border_color;
3517
border-radius: 0;
3518
box-shadow: none;
3519
background-color: transparent;
3520
}
3521
scrolledwindow { border-bottom: 1px solid $border_color; }
3523
}
3524
// mimic tab style
3526
button.emoji-section {
3527
margin-top: -1px;
3528
padding: 0 8px;
3529
min-width: 24px;
3530
min-height: $medium_size;
3531
border-radius: 0;
3532
outline-offset: -6px;
3533
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3535
&:checked {
3537
box-shadow: inset 0 2px $primary_color;
3538
background-color: transparent;
3539
}
3540
&:hover, &:active { background-color: $hover_bg_color; }
3542
&:first-child { margin-left: 4px; }
3544
&:last-child { margin-right: 4px; }
3546
}
3547
.emoji {
3549
min-width: 3em;
3550
min-height: 3em;
3551
padding: 0 8px;
3552
// font-size: larger;
3553
widget {
3555
transition: $shorter_transition;
3556
border-radius: $material_radius;
3557
&:hover { background-color: $hover_bg_color; }
3559
}
3560
}
3561