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: 2px;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
notebook:focus tab,
37
*:focus { outline-color: $fill_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: 2px; }
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: 2px;
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: 2px;
218
@include entry(normal);
220
&:focus { @include entry(focus); }
222
&:disabled { @include entry(disabled); }
224
&.flat {
226
border-radius: 0;
227
@include entry(flat-normal);
229
&:focus { @include entry(flat-focus); }
231
&:disabled { @include entry(flat-disabled); }
233
}
234
image { // icons inside the entry
236
// @extend %simple_flat_button;
237
// min-height: $small_size;
239
// min-width: $small_size;
240
// border-radius: $circular_radius;
241
// -gtk-outline-radius: $circular_radius;
242
color: $secondary_fg_color;
243
&:hover, &:active { color: $fg_color; }
245
&:disabled { color: $hint_fg_color; }
247
&.left {
249
margin-left: ($medium_size - 16px) / 2 - 8px;
250
margin-right: 6px;
251
}
252
&.right {
254
margin-left: 6px;
255
margin-right: ($medium_size - 16px) / 2 - 8px;
256
}
257
}
258
undershoot {
260
&.left { @include undershoot(left); }
261
&.right { @include undershoot(right); }
263
}
264
selection { @extend %selected_items; }
266
// entry error and warning style
268
@each $e_type, $e_color in (error, $error_color),
269
(warning, $warning_color) {
270
&.#{$e_type} {
271
@include entry(normal, $e_color);
272
&:focus { @include entry(focus, $e_color); }
274
&:disabled { @include entry(disabled, $e_color); }
276
&.flat {
278
@include entry(flat-normal, $e_color);
279
&:focus { @include entry(flat-focus, $e_color); }
281
&:disabled { @include entry(flat-disabled, $e_color); }
283
}
284
image {
286
color: $inverse_secondary_fg_color;
287
&:hover, &:active { color: $inverse_fg_color; }
289
&:disabled { color: $inverse_hint_fg_color; }
291
}
292
}
293
}
294
&:drop(active) {
296
// box-shadow: inset 0 0 0 2px $accent_color;
297
}
298
.osd & {
300
}
301
}
302
progress {
304
margin: 2px (2px - 8px);
305
border-bottom: 2px solid $primary_color;
306
background-color: transparent;
307
}
308
// linked entries
310
.linked:not(.vertical) > & { @extend %linked; }
311
// Vertically linked entries
313
.linked.vertical > & { @extend %linked_vertical; }
314
.linked:not(.vertical) > &.flat,
316
.linked.vertical > &.flat { border-radius: 0; }
317
}
318
treeview entry {
320
&.flat, & {
321
min-height: 0;
322
padding: 2px;
323
border-radius: 0;
324
background-color: $base_color;
325
&, &:focus {
327
border-image: none;
328
box-shadow: none;
329
}
330
}
331
}
332
.entry-tag {
334
margin: 2px;
335
border-radius: $circular_radius;
336
box-shadow: none;
337
background-color: $divider_color;
338
color: $fg_color;
339
&:hover { background-image: image($divider_color); }
341
// side margins: compensate the entry padding with a negative margin
343
// then the negative margin itself
344
:dir(ltr) & {
345
margin-left: 4px;
346
margin-right: 0;
347
padding-left: 12px;
348
padding-right: 8px;
349
}
350
:dir(rtl) & {
352
margin-left: 0;
353
margin-right: 4px;
354
padding-left: 8px;
355
padding-right: 12px;
356
}
357
// seems any sizing doesn't work
359
&.button {
360
box-shadow: none;
361
background-color: transparent;
362
&:not(:hover):not(:active) { color: $secondary_fg_color; }
364
}
365
}
366
/***********
369
* Buttons *
370
***********/
371
// stuff for .needs-attention
372
@keyframes needs_attention {
373
from {
374
background-image: -gtk-gradient(radial,
375
center center, 0,
376
center center, 0.001,
377
to($accent_color),
378
to(transparent));
379
}
380
to {
382
background-image: -gtk-gradient(radial,
383
center center, 0,
384
center center, 0.5,
385
to($accent_color),
386
to(transparent));
387
}
388
}
389
%button,
391
button {
392
@at-root %button_basic, & {
393
min-height: 24px;
394
min-width: 16px;
395
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
396
border-radius: 2px;
397
font-weight: 500;
398
@include button(normal);
400
&:hover { @include button(hover); }
402
&:active { @include button(active); }
404
&:disabled { @include button(disabled); }
406
&:checked { @include button(checked); }
408
&:checked:disabled { @include button(checked-disabled); }
410
@at-root %flat_button, &.flat {
412
@at-root %simple_flat_button, & {
413
@include button(flat-normal);
414
&:hover { @include button(flat-hover); }
416
&:active { @include button(flat-active); }
418
&:disabled { @include button(flat-disabled); }
420
}
421
&:checked { @include button(flat-checked); }
423
&:checked:disabled { @include button(flat-checked-disabled); }
425
}
426
&.text-button {
428
padding-left: 16px;
429
padding-right: 16px;
430
}
431
&.image-button {
433
min-width: 24px;
434
padding: ($medium_size - 24px) / 2;
435
@extend %circular_button;
437
}
438
&.text-button.image-button {
440
border-radius: 2px;
441
-gtk-outline-radius: 2px;
442
label {
444
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
445
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
447
}
448
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
450
}
451
.linked > & { @extend %linked; }
453
.linked.vertical > & { @extend %linked_vertical; }
455
.linked > &.flat,
457
.linked.vertical > &.flat {
458
border-radius: 2px;
459
&.image-button { @extend %circular_button; }
461
&.text-button.image-button {
463
border-radius: 2px;
464
-gtk-outline-radius: 2px;
465
}
466
}
467
&:drop(active) {
469
// box-shadow: inset 0 0 0 2px $accent_color;
470
}
471
}
472
@at-root %button_selected, row:selected & {
474
&:disabled {
475
background-color: $inverse_divider_color;
476
color: $inverse_disabled_secondary_fg_color;
477
}
478
&.flat {
480
color: $inverse_secondary_fg_color;
481
&:hover, &:active { color: $inverse_fg_color; }
483
&:disabled { color: $inverse_disabled_secondary_fg_color; }
485
&:checked {
487
background-color: $inverse_track_color;
488
color: $inverse_fg_color;
489
}
490
&:checked:disabled {
492
background-color: $inverse_divider_color;
493
color: $inverse_disabled_fg_color;
494
}
495
}
496
}
497
// big standalone buttons like in Documents pager
499
&.osd {
500
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
501
&.image-button { padding: ($large_size - 24px) / 2; }
503
&:disabled { opacity: 0; }
505
}
506
// overlay / OSD style
508
@at-root %osd_button,
509
.osd & {
510
}
511
// Suggested and Destructive Action buttons
513
@each $b_type, $b_color in (suggested-action, $suggested_color),
514
(destructive-action, $destructive_color) {
515
&.#{$b_type} {
516
background-color: $b_color;
517
color: $inverse_fg_color;
518
&:disabled { @include button(disabled, $b_color); }
520
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage(0.3)); }
522
&.flat {
524
background-color: transparent;
525
color: $b_color;
526
&:disabled { @include button(flat-disabled, $b_color); }
528
&:checked { background-color: rgba($b_color, 0.3); }
530
}
531
.osd & {
533
}
534
}
535
}
536
.stack-switcher > & {
538
// to position the needs attention dot, padding is added to the button
539
// child, a label needs just lateral padding while an icon needs vertical
540
// padding added too.
541
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
543
> label {
545
padding-left: 6px; // label padding
546
padding-right: 6px; //
547
}
548
> image {
550
padding-left: 6px; // image padding
551
padding-right: 6px; //
552
padding-top: 3px; //
553
padding-bottom: 3px; //
554
}
555
&.text-button {
557
// compensate text-button paddings
558
padding-left: 16px - 6px;
559
padding-right: 16px - 6px;
560
}
561
&.image-button {
563
// we want image buttons to have a 1:1 aspect ratio, so compensation
564
// of the padding added to the GtkImage is needed
565
padding-left: ($medium_size - 16px) / 2 - 6px;
566
padding-right: ($medium_size - 16px) / 2 - 6px;
567
}
568
&.needs-attention {
570
> label,
571
> image { @extend %needs_attention; }
572
&:checked {
574
> label,
575
> image {
576
animation: none;
577
background-image: none;
578
}
579
}
580
}
581
}
582
// hide separators
584
&.font,
585
&.file { separator { @extend %hide_separators; }}
586
// &.font { > box > box > label { font-weight: bold; }}
588
// inline-toolbar buttons
590
.inline-toolbar & {
591
// @extend %button_basic.flat;
592
&:not(.text-button) { @extend %circular_button; }
594
}
595
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
597
@at-root %circular_button,
599
&.close,
600
&.circular { // The Bloody Circul Button
601
border-radius: $circular_radius;
602
-gtk-outline-radius: $circular_radius;
603
// label { padding: 0; }
605
}
606
@at-root %small_button {
608
min-height: $small_size;
609
min-width: $small_size;
610
padding: 0;
611
border-radius: $circular_radius;
612
-gtk-outline-radius: $circular_radius;
613
}
614
}
615
%needs_attention {
617
animation: needs_attention $longer_duration $deceleration_curve forwards;
618
background-repeat: no-repeat;
619
background-position: right 3px;
620
background-size: 6px 6px;
621
&:dir(rtl) { background-position: left 3px; }
623
}
624
// all the following is for the +|- buttons on inline toolbars, that way
626
// should really be deprecated...
627
.inline-toolbar toolbutton > button { // redefining the button look is
628
// needed since those are flat...
629
}
630
// More inline toolbar buttons
632
toolbar.inline-toolbar toolbutton {
633
// > button.flat { @extend %linked_middle; }
634
// &:first-child > button.flat { @extend %linked:first-child; }
636
// &:last-child > button.flat { @extend %linked:last-child; }
638
// &:only-child > button.flat { @extend %linked:only-child; }
640
}
641
%linked_middle {
643
border-radius: 0;
644
-gtk-outline-radius: 2px;
645
}
646
%linked {
648
@extend %linked_middle;
649
&:first-child {
651
border-top-left-radius: 2px;
652
border-bottom-left-radius: 2px;
653
}
654
&:last-child {
656
border-top-right-radius: 2px;
657
border-bottom-right-radius: 2px;
658
}
659
&:only-child {
661
border-radius: 2px;
662
}
663
}
664
%linked_vertical_middle {
666
border-radius: 0;
667
-gtk-outline-radius: 2px;
668
}
669
%linked_vertical {
671
@extend %linked_vertical_middle;
672
&:first-child {
674
border-top-left-radius: 2px;
675
border-top-right-radius: 2px;
676
}
677
&:last-child {
679
border-bottom-left-radius: 2px;
680
border-bottom-right-radius: 2px;
681
}
682
&:only-child {
684
border-radius: 2px;
685
}
686
}
687
/* menu buttons */
689
modelbutton.flat,
690
.menuitem.button.flat {
691
min-height: $menuitem_size;
692
padding: 0 8px;
693
border-radius: 2px;
694
color: inherit;
695
@extend %simple_flat_button;
697
&:selected { @extend %selected_items; }
699
}
700
modelbutton.flat arrow {
702
background: none;
703
&:hover { background: none; }
705
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
707
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
709
}
710
button.color {
712
min-height: $small_size;
713
min-width: $small_size;
714
padding: $container_padding;
715
colorswatch:only-child {
717
// &, overlay { border-radius: 0; }
718
}
719
}
720
/*********
723
* Links *
724
*********/
725
*:link {
726
&, &:hover, &:active { color: $link_color; }
727
&:visited {
729
&, &:hover, &:active { color: $visited_link_color; }
730
}
731
@at-root %link_selected,
733
&:selected,
734
*:selected & { color: $inverse_fg_color; }
735
}
736
button:link,
738
button:visited {
739
@extend *:link;
740
> label { text-decoration-line: underline; }
742
}
743
/*****************
745
* GtkSpinButton *
746
*****************/
747
spinbutton {
748
&:not(.vertical) {
749
// in this horizontal configuration, the whole spinbutton
750
// behaves as the entry, so we extend the entry styling
751
// and nuke the style on the internal entry
752
@extend %entry;
753
padding: 0;
755
%spinbutton_entry,
757
entry {
758
min-width: $large_size - 8px * 2;
759
// reset all the other props since the spinbutton node is styled here
760
margin: 0;
761
border-image: none;
762
border-radius: 0;
763
box-shadow: none;
764
background-color: transparent;
765
//
766
// This will help to simplify spinbutton's code, but unfortunatelly
767
// doesn't work properly in :dir(rtl). It needs z-index property.
768
//
769
// min-width: $large_size - 8px;
770
//
771
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
772
//
773
// &:dir(ltr) {
774
// margin-right: -$spinbuttons_width;
775
// padding-right: $spinbuttons_width;
776
// }
777
//
778
// &:dir(rtl) {
779
// margin-left: -$spinbuttons_width;
780
// padding-left: $spinbuttons_width;
781
// }
782
}
783
button {
785
// margin: $container_padding;
786
border: solid $container_padding transparent;
787
@extend %simple_flat_button;
789
@extend %small_button;
791
&.up:dir(ltr),
793
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
794
&.up:dir(rtl),
796
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
797
}
798
}
799
// OSD horizontal
801
.osd &:not(.vertical) {
802
button {
803
}
804
}
805
// Vertical
807
&.vertical {
808
// in the vertical configuration, we treat the spinbutton
809
// as a box, and tweak the style of the entry in the middle
810
// so that it's linked
811
// FIXME: this should not be set at all, but otherwise it gets the wrong
813
// color
814
&:disabled { color: $disabled_fg_color; }
815
&:drop(active) {
817
box-shadow: none;
818
}
819
entry {
821
min-height: $medium_size;
822
min-width: $large_size;
823
padding: 0;
824
}
825
button {
827
min-height: $medium_size;
828
min-width: $large_size;
829
padding: 0;
830
@extend %simple_flat_button;
832
&.up { border-radius: 2px 2px 0 0; }
834
&.down { border-radius: 0 0 2px 2px; }
836
}
837
}
838
// OSD vertical
840
.osd &.vertical button:first-child {
841
}
842
// Misc
844
treeview &:not(.vertical) {
845
min-height: 0;
846
border-style: none;
847
border-radius: 0;
848
entry {
850
min-height: 0;
851
padding: 1px 2px;
852
}
853
}
854
}
855
/**************
858
* ComboBoxes *
859
**************/
860
combobox {
861
arrow {
862
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
863
min-height: 16px;
864
min-width: 16px;
865
}
866
decoration,
868
button.combo:checked { transition: none; } // workaround for menuitem selection
869
button.combo cellview {
871
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
872
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
873
}
874
#gtk-combobox-popup-menu {
876
padding: 2px 0;
877
menuitem {
879
min-height: $medium_size - 2px * 2;
880
padding: 0 8px;
881
}
882
// overflow arrows
884
> arrow {
885
&.top { margin-top: -2px; }
886
&.bottom {
888
margin-top: 2px * 2;
889
margin-bottom: -2px * 3;
890
}
891
}
892
}
893
&.linked {
895
button:nth-child(2) {
896
&:dir(ltr) { @extend %linked:last-child; }
897
&:dir(rtl) { @extend %linked:first-child; }
898
}
899
}
900
&:drop(active) { // FIXME: untested
902
box-shadow: none;
903
// button.combo { @extend %button_basic:drop(active); }
905
}
906
}
907
// the combo is a composite widget so the way we do button linking doesn't
909
// work, special case needed. See
910
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
911
.linked:not(.vertical) > combobox {
913
> box > button.combo { @extend %linked_middle; }
914
&:first-child > box > button.combo { @extend %linked:first-child; }
916
&:last-child > box > button.combo { @extend %linked:last-child; }
918
&:only-child > box > button.combo { @extend %linked:only-child; }
920
}
921
.linked.vertical > combobox {
923
> box > button.combo { @extend %linked_vertical_middle; }
924
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
926
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
928
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
930
}
931
%combo_flat {
933
border-radius: 0;
934
background-image: none;
935
font-weight: inherit;
936
@include entry(flat-normal);
938
&:hover { box-shadow: inset 0 -2px $hint_fg_color; }
940
&:checked {
942
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
943
$primary_color 100%,
944
transparent 0%)
945
0 0 2 / 0 0 2px;
946
}
947
&:disabled {
949
box-shadow: inset 0 -1px $divider_color;
950
color: $disabled_fg_color;
951
}
952
}
953
/************
956
* Toolbars *
957
************/
958
toolbar {
959
-GtkWidget-window-dragging: true;
960
padding: 2px;
961
background-color: $bg_color;
962
button { @extend %button_basic.flat; }
964
// on OSD
966
.osd & { background-color: transparent; }
967
// stand-alone OSD toolbars
969
&.osd {
970
transition: $shadow_transition;
971
padding: $container_padding;
972
border-radius: 2px;
973
box-shadow: $shadow_2, inset 0 1px $highlight_color;
974
background-color: $popup_bg_color;
975
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
977
&.left,
979
&.right,
980
&.top,
981
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
982
}
983
// toolbar separators
985
&.horizontal > separator { margin: 2px; }
986
&.vertical > separator { margin: 2px; }
987
&:not(.inline-toolbar):not(.osd) {
989
scale,
990
entry,
991
spinbutton,
992
button { margin: 2px; }
993
.linked entry,
995
.linked spinbutton,
996
.linked button {
997
&:not(:first-child) { margin-left: 0; }
998
&:not(:last-child) { margin-right: 0; }
999
}
1000
spinbutton {
1002
entry,
1003
button { margin: 0; }
1004
}
1005
switch { margin: 2px + $container_padding 2px; }
1007
}
1008
}
1009
// searchbar, location-bar & inline-toolbar
1011
.inline-toolbar {
1012
padding: $container_padding;
1013
border-style: solid;
1014
border-width: 0 1px 1px;
1015
border-color: $border_color;
1016
background-color: $alt_base_color;
1017
}
1018
searchbar > revealer > box,
1020
.location-bar {
1021
padding: $container_padding;
1022
border-style: solid;
1023
border-width: 0 0 1px;
1024
border-color: $border_color;
1025
background-color: $bg_color;
1026
background-clip: border-box;
1027
}
1028
searchbar > revealer > box {
1030
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1031
margin: -$container_padding;
1032
padding: $container_padding;
1033
}
1034
/***************
1037
* Header bars *
1038
***************/
1039
%titlebar,
1040
headerbar {
1041
transition: background-color $shorter_duration $deceleration_curve, color $longer_duration $deceleration_curve;
1042
min-height: $large_size;
1043
padding: 0 $container_padding;
1044
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1045
background-color: $titlebar_bg_color;
1046
color: $titlebar_fg_color;
1047
&:disabled :not(button) > label { color: $titlebar_disabled_fg_color; }
1049
&:backdrop {
1051
color: $titlebar_secondary_fg_color;
1052
&:disabled :not(button) > label { color: $titlebar_disabled_secondary_fg_color; }
1054
}
1055
.title {
1057
padding: 0 12px;
1058
font-weight: bold;
1059
}
1060
.subtitle {
1062
padding: 0 12px;
1063
font-size: smaller;
1064
@extend .dim-label;
1066
}
1067
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
1069
button:not(.suggested-action):not(.destructive-action) {
1071
@extend %button_basic.flat;
1072
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1074
$titlebar_indicator_color 0%,
1075
transparent 0%)
1076
0 0 0 / 0 0 0px;
1077
color: $titlebar_secondary_fg_color;
1078
&:hover, &:active { color: $titlebar_fg_color; }
1080
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1082
&:checked {
1084
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1085
$titlebar_indicator_color 100%,
1086
transparent 0%)
1087
0 0 2 / 0 0 2px;
1088
color: $titlebar_fg_color;
1089
&:disabled { color: $titlebar_disabled_fg_color; }
1091
&, &:disabled { background-color: transparent; }
1093
}
1094
&:backdrop {
1096
color: $titlebar_hint_fg_color;
1097
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1099
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1101
&:checked {
1103
color: $titlebar_secondary_fg_color;
1104
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1106
}
1107
}
1108
}
1109
button.suggested-action, button.destructive-action {
1111
&:disabled {
1112
background-color: $titlebar_divider_color;
1113
color: $titlebar_disabled_fg_color;
1114
}
1115
}
1116
&.selection-mode {
1118
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1119
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1120
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1121
animation: header_ripple_effect $longer_duration $deceleration_curve;
1122
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1123
background-color: $primary_color;
1124
color: $inverse_fg_color;
1125
&:backdrop {
1127
color: $inverse_secondary_fg_color;
1128
}
1129
.subtitle:link { @extend *:link:selected; }
1131
button:not(.suggested-action):not(.destructive-action) {
1133
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1134
currentColor 0%,
1135
transparent 0%)
1136
0 0 0 / 0 0 0px;
1137
color: $inverse_fg_color;
1138
&:disabled { color: $inverse_disabled_fg_color; }
1140
&:checked {
1142
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1143
currentColor 100%,
1144
transparent 0%)
1145
0 0 2 / 0 0 2px;
1146
color: $inverse_fg_color;
1147
&:disabled { color: $inverse_disabled_fg_color; }
1149
}
1150
&:backdrop {
1152
color: $inverse_secondary_fg_color;
1153
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1155
&:checked {
1157
color: $inverse_secondary_fg_color;
1158
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1160
}
1161
}
1162
}
1163
.selection-menu {
1165
padding-left: 16px;
1166
padding-right: 16px;
1167
arrow { -GtkArrow-arrow-scaling: 1; }
1169
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1171
}
1172
}
1173
// squared corners when the window is maximized, tiled, or fullscreen
1175
.tiled &,
1176
.tiled-top &,
1177
.tiled-right &,
1178
.tiled-bottom &,
1179
.tiled-left &,
1180
.maximized &,
1181
.fullscreen & {
1182
border-radius: 0;
1183
box-shadow: $shadow_1;
1184
}
1185
&.default-decoration {
1187
min-height: $small_size;
1188
padding: $container_padding;
1189
box-shadow: inset 0 1px $titlebar_highlight_color;
1190
.tiled &,
1192
.maximized &,
1193
.fullscreen & { box-shadow: none; }
1194
button.titlebutton {
1196
min-height: $small_size;
1197
min-width: $small_size;
1198
margin: 0;
1199
padding: 0;
1200
}
1201
// workaround for non-animatable buttons
1203
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1204
}
1205
.solid-csd & {
1207
&:dir(rtl), &:dir(ltr) { // specificity bump
1208
// margin-left: -2px;
1209
// margin-right: -2px;
1210
// margin-top: -2px;
1211
// border-radius: 0;
1212
// box-shadow: inset 0 1px $titlebar_highlight_color;
1213
}
1214
}
1215
}
1216
headerbar {
1218
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1219
entry,
1220
spinbutton,
1221
// separator,
1222
button {
1223
margin-top: $container_padding;
1224
margin-bottom: $container_padding;
1225
}
1226
switch {
1228
margin-top: ($large_size - 24px) / 2;
1229
margin-bottom: ($large_size - 24px) / 2;
1230
}
1231
// reset button margins of the spinbutton
1233
spinbutton button {
1234
margin-top: 0;
1235
margin-bottom: 0;
1236
}
1237
}
1238
.background .titlebar {
1240
border-top-left-radius: 2px;
1241
border-top-right-radius: 2px;
1242
}
1243
.background.tiled .titlebar,
1245
.background.tiled-top .titlebar,
1246
.background.tiled-right .titlebar,
1247
.background.tiled-bottom .titlebar,
1248
.background.tiled-left .titlebar,
1249
.background.maximized .titlebar,
1250
.background.solid-csd .titlebar {
1251
border-top-left-radius: 0;
1252
border-top-right-radius: 0;
1253
}
1254
headerbar { // headerbar border rounding
1256
window separator:first-child + &, // tackles the paned container case
1257
window &:first-child { border-top-left-radius: 2px; }
1258
window &:last-child { border-top-right-radius: 2px; }
1260
window stack & { // tackles the stacked headerbars case
1262
&:first-child, &:last-child {
1263
border-top-left-radius: 2px;
1264
border-top-right-radius: 2px;
1265
}
1266
}
1267
window.tiled &,
1269
window.tiled-top &,
1270
window.tiled-right &,
1271
window.tiled-bottom &,
1272
window.tiled-left &,
1273
window.maximized &,
1274
window.fullscreen &,
1275
window.solid-csd & {
1276
&,
1277
&:first-child,
1278
&:last-child,
1279
&:only-child {
1280
border-top-left-radius: 0;
1281
border-top-right-radius: 0;
1282
}
1283
}
1284
}
1285
.titlebar:not(headerbar) {
1287
window.csd > & {
1288
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1289
padding: 0;
1290
background-color: transparent;
1291
background-image: none;
1292
border-style: none;
1293
box-shadow: none;
1294
}
1295
> separator {
1297
background-color: $titlebar_bg_color;
1298
background-image: image($border_color);
1299
}
1300
@extend %titlebar;
1302
}
1303
/************
1306
* Pathbars *
1307
************/
1308
%pathbar_button,
1309
.path-bar button {
1310
padding-left: ($medium_size - 24px) / 2;
1311
padding-right: ($medium_size - 24px) / 2;
1312
label:not(:only-child) {
1314
&:first-child { margin-left: 4px; }
1315
&:last-child { margin-right: 4px; }
1317
}
1318
&.slider-button {
1320
padding-left: (24px - 16px) / 2;
1321
padding-right: (24px - 16px) / 2;
1322
}
1323
:not(headerbar) & {
1325
@extend %flat_button;
1326
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1328
$primary_color 0%,
1329
transparent 0%)
1330
0 0 0 / 0 0 0px;
1331
border-radius: 2px;
1332
&:checked {
1334
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1335
$primary_color 100%,
1336
transparent 0%)
1337
0 0 2 / 0 0 2px;
1338
&, &:disabled { background-color: transparent; }
1340
}
1341
}
1342
}
1343
/**************
1346
* Tree Views *
1347
**************/
1348
treeview.view {
1349
@at-root * {
1350
-GtkTreeView-horizontal-separator: 4;
1351
-GtkTreeView-grid-line-width: 1;
1352
-GtkTreeView-grid-line-pattern: '';
1353
-GtkTreeView-tree-line-width: 1;
1354
-GtkTreeView-tree-line-pattern: '';
1355
-GtkTreeView-expander-size: 16;
1356
}
1357
border-left-color: $track_color; // this is actually the tree lines color,
1359
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1360
&:selected { border-left-color: $inverse_track_color; }
1362
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1364
&:hover, &:active, &:selected { border-radius: 0; }
1366
&.separator {
1368
min-height: 1px + 2px * 2;
1369
color: $border_color;
1370
}
1371
&:drop(active) {
1373
border-style: solid none;
1374
border-width: 1px;
1375
border-color: $accent_color;
1376
&.after { border-top-style: none; }
1378
&.before { border-bottom-style: none; }
1380
}
1381
&.expander {
1383
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1384
-gtk-icon-transform: rotate(-90deg);
1385
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1387
&:checked { -gtk-icon-transform: unset; }
1389
color: $secondary_fg_color;
1391
&:hover, &:active { color: $fg_color; }
1393
&:disabled { color: $disabled_secondary_fg_color; }
1395
&:selected {
1397
color: $inverse_secondary_fg_color;
1398
&:hover, &:active { color: $inverse_fg_color; }
1400
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1402
}
1403
}
1404
&.progressbar { // progress bar in treeviews
1406
border-bottom: $bar_size solid $primary_color;
1407
box-shadow: none;
1408
background-color: transparent;
1409
&:selected { border-bottom-color: $inverse_fg_color; }
1411
}
1412
&.trough { // progress bar trough in treeviews
1414
border-bottom: $bar_size solid rgba($primary_color, 0.3);
1415
box-shadow: none;
1416
background-color: transparent;
1417
&:selected { border-bottom-color: $inverse_track_color; }
1419
}
1420
header {
1422
button {
1423
@extend row.activatable;
1424
padding: 2px 6px;
1426
border-style: none solid solid none;
1427
border-width: 1px;
1428
border-color: $border_color;
1429
border-radius: 0;
1430
background-clip: border-box;
1431
&, &:hover, &:active { box-shadow: none; }
1433
&, &:disabled { background-color: $base_color; }
1435
&:last-child { border-right-style: none; }
1437
}
1438
}
1439
button.dnd,
1441
header.button.dnd { // for treeview-like derive widgets
1442
padding: 2px 6px;
1443
border-style: none solid solid;
1444
border-width: 1px;
1445
border-color: $border_color;
1446
border-radius: 0;
1447
box-shadow: none;
1448
background-color: $base_color;
1449
background-clip: border-box;
1450
color: $primary_color;
1451
}
1452
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1454
}
1455
/*********
1458
* Menus *
1459
*********/
1460
menubar,
1461
.menubar {
1462
-GtkWidget-window-dragging: true;
1463
padding: 0;
1464
// box-shadow: inset 0 -1px $border_color;
1465
background-color: $titlebar_bg_color;
1466
> menuitem {
1468
transition: $shorter_transition;
1469
min-height: 20px;
1470
padding: 4px 8px;
1471
color: $titlebar_secondary_fg_color;
1472
&:hover { // Seems like it :hover even with keyboard focus
1474
transition: none;
1475
background-color: $titlebar_divider_color;
1476
color: $titlebar_fg_color;
1477
}
1478
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1480
label:disabled { color: inherit; } // to inherit the above color
1482
}
1483
}
1484
.csd.popup { background-color: transparent; }
1486
menu,
1488
.menu,
1489
.context-menu {
1490
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1491
padding: 4px 0;
1492
box-shadow: inset 0 1px $highlight_color;
1493
background-color: $popup_bg_color;
1494
border: 1px solid $border_color; // adds borders in a non composited env
1495
.csd & {
1497
border: none; // axes borders in a composited env
1498
border-radius: 2px;
1499
}
1500
menuitem {
1502
transition: background-color $shorter_duration $deceleration_curve;
1503
min-height: 20px;
1504
min-width: 40px;
1505
padding: 4px 8px;
1506
font: initial;
1507
text-shadow: none;
1508
&:hover {
1510
transition: none;
1511
background-color: $divider_color;
1512
}
1513
&:disabled { color: $disabled_fg_color; }
1515
// submenu indicators
1517
arrow {
1518
min-height: 16px;
1519
min-width: 16px;
1520
&:dir(ltr) {
1522
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1523
margin-left: 8px;
1524
}
1525
&:dir(rtl) {
1527
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1528
margin-right: 8px;
1529
}
1530
}
1531
// avoids labels color being overridden, see
1533
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1534
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1535
}
1536
// overflow arrows
1538
> arrow {
1539
min-height: 16px;
1540
min-width: 16px;
1541
padding: 4px;
1542
background-color: $popup_bg_color;
1543
color: $secondary_fg_color;
1544
&.top {
1546
margin-top: -4px;
1547
border-bottom: 1px solid $border_color;
1548
border-radius: 2px 2px 0 0;
1549
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1550
}
1551
&.bottom {
1553
margin-top: 4px * 2;
1554
margin-bottom: -4px * 3;
1555
border-top: 1px solid $border_color;
1556
border-radius: 0 0 2px 2px;
1557
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1558
}
1559
&:hover {
1561
background-image: image($divider_color);
1562
color: $fg_color;
1563
}
1564
&:disabled {
1566
border-color: transparent;
1567
background-color: transparent;
1568
color: transparent;
1569
// color: $disabled_secondary_fg_color;
1570
}
1571
}
1572
separator { margin: 4px 0; }
1574
}
1575
menuitem {
1577
accelerator { color: $secondary_fg_color; }
1578
}
1579
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1581
// Electron/Atom render all translucent colors in opaque colors.
1582
// It's a very critical issue for this theme and should be fixed by upstream...
1583
.popup:not(.csd) menu {
1584
menuitem {
1585
color: $opaque_fg_color;
1586
&:hover { background-color: $opaque_divider_color; }
1588
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1590
}
1591
// FIXME: not working this
1593
accelerator { color: $opaque_secondary_fg_color; }
1594
}
1595
/************
1598
* Popovers *
1599
************/
1600
popover.background {
1601
transition: $shadow_transition;
1602
padding: 2px;
1603
box-shadow: $shadow_2; // TODO: this should really have a highlight
1604
background-color: $popup_bg_color;
1605
&:backdrop { box-shadow: $shadow_1; }
1607
&, .csd & {
1609
border-style: solid;
1610
border-width: 1px;
1611
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1612
border-radius: 2px + 1px;
1613
}
1614
> stack { margin: -4px; } // remove extra padding from menu style popovers
1616
> toolbar { margin: -2px; }
1618
> list,
1620
> .view,
1621
> toolbar {
1622
border-style: none;
1623
box-shadow: none;
1624
background-color: transparent;
1625
}
1626
// &.touch-selection,
1628
// &.magnifier,
1629
// &.osd { @extend %osd; }
1630
// entry { @extend %entry.flat; }
1632
// button.combo { @extend %combo_flat; }
1634
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1636
&.menu button,
1638
button.model {
1639
@extend %simple_flat_button;
1640
min-height: 32px;
1642
padding: 0 8px;
1643
border-radius: 2px;
1644
&:checked { @extend %selected_items; }
1646
}
1647
separator { margin: 4px 0; }
1649
list separator { margin: 0; }
1651
}
1652
/*************
1654
* Notebooks *
1655
*************/
1656
notebook {
1657
> header {
1658
border-width: 1px;
1659
border-color: $border_color;
1660
background-color: $bg_color;
1661
background-clip: border-box;
1662
&.top {
1664
border-bottom-style: solid;
1665
> tabs {
1666
margin-bottom: -1px;
1667
> tab {
1668
&:hover { box-shadow: inset 0 -2px $track_color; }
1670
&:checked { box-shadow: inset 0 -2px $primary_color; }
1672
}
1673
}
1674
}
1675
&.bottom {
1677
border-top-style: solid;
1678
> tabs {
1679
margin-top: -1px;
1680
> tab {
1681
&:hover { box-shadow: inset 0 2px $track_color; }
1683
&:checked { box-shadow: inset 0 2px $primary_color; }
1685
}
1686
}
1687
}
1688
&.left {
1690
border-right-style: solid;
1691
> tabs {
1692
margin-right: -1px;
1693
> tab {
1694
&:hover { box-shadow: inset -2px 0 $track_color; }
1696
&:checked { box-shadow: inset -2px 0 $primary_color; }
1698
}
1699
}
1700
}
1701
&.right {
1703
border-left-style: solid;
1704
> tabs {
1705
margin-left: -1px;
1706
> tab {
1707
&:hover { box-shadow: inset 2px 0 $track_color; }
1709
&:checked { box-shadow: inset 2px 0 $primary_color; }
1711
}
1712
}
1713
}
1714
&.top > tabs > arrow {
1716
@extend %notebook_vert_arrows;
1717
border-top-style: none;
1719
}
1720
&.bottom > tabs > arrow {
1722
@extend %notebook_vert_arrows;
1723
border-bottom-style: none;
1725
}
1726
@at-root %notebook_vert_arrows {
1728
padding-left: 4px;
1729
padding-right: 4px;
1730
&.down {
1732
margin-left: -8px;
1733
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1734
}
1735
&.up {
1737
margin-right: -8px;
1738
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1739
}
1740
}
1741
&.left > tabs > arrow {
1743
@extend %notebook_horz_arrows;
1744
border-left-style: none;
1746
}
1747
&.right > tabs > arrow {
1749
@extend %notebook_horz_arrows;
1750
border-right-style: none;
1752
}
1753
@at-root %notebook_horz_arrows {
1755
padding-top: 4px;
1756
padding-bottom: 4px;
1757
&.down {
1759
margin-top: -8px;
1760
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1761
}
1762
&.up {
1764
margin-bottom: -8px;
1765
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1766
}
1767
}
1768
> tabs > arrow {
1770
@extend %simple_flat_button;
1771
min-height: 16px;
1773
min-width: 16px;
1774
border-radius: 0;
1775
}
1776
tab {
1778
transition: $longer_transition,
1779
background-size 0,
1780
background-image 0;
1781
min-height: $small_size;
1782
min-width: $small_size;
1783
padding: $container_padding 12px;
1784
outline-offset: -6px;
1786
border-width: 1px; // for reorderable tabs
1788
border-color: transparent; //
1789
background-image: radial-gradient(circle farthest-corner at center,
1791
$primary_color 10%,
1792
transparent 0%);
1793
background-repeat: no-repeat;
1794
background-position: center;
1795
background-size: 0% 0%;
1796
color: $secondary_fg_color;
1798
font-weight: 500;
1799
&:hover {
1801
color: $fg_color;
1802
&.reorderable-page {
1804
border-color: $border_color;
1805
background-color: $alt_base_color;
1806
}
1807
}
1808
&:disabled { color: $disabled_secondary_fg_color; }
1810
&:checked {
1812
transition: $longer_transition,
1813
background-size $longer_duration $deceleration_curve,
1814
background-image $longer_duration + $ripple_duration $deceleration_curve;
1815
background-image: radial-gradient(circle farthest-corner at center,
1816
transparent 10%,
1817
transparent 0%);
1818
background-size: 1000% 1000%;
1819
color: $fg_color;
1820
&:disabled { color: $disabled_fg_color; }
1822
&.reorderable-page {
1824
border-color: $border_color;
1825
background-color: $base_color;
1826
}
1827
}
1828
// colors the button like the label, overridden otherwise
1830
button.flat {
1831
@extend %small_button;
1832
&:last-child {
1834
margin-left: $container_padding;
1835
margin-right: $container_padding - 12px;
1836
}
1837
&:first-child {
1839
margin-left: $container_padding - 12px;
1840
margin-right: $container_padding;
1841
}
1842
}
1843
}
1844
&.top,
1846
&.bottom {
1847
tabs {
1848
padding-left: 8px;
1849
padding-right: 8px;
1850
&:not(:only-child) {
1852
&:first-child { margin-left: 0; }
1853
&:last-child { margin-right: 0; }
1854
}
1855
tab {
1857
&.reorderable-page {
1858
margin: 0 -1px;
1859
border-style: none solid;
1860
}
1861
}
1862
}
1863
}
1864
&.left,
1866
&.right {
1867
tabs {
1868
padding-top: 8px;
1869
padding-bottom: 8px;
1870
&:not(:only-child) {
1872
&:first-child { margin-top: 0; }
1873
&:last-child { margin-bottom: 0; }
1874
}
1875
tab {
1877
&.reorderable-page {
1878
margin: -1px 0;
1879
border-style: solid none;
1880
}
1881
}
1882
}
1883
}
1884
}
1885
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1887
background-color: $base_color;
1888
entry:not(.search),
1890
spinbutton:not(.vertical) { @extend %entry.flat; }
1891
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1893
button.combo { @extend %combo_flat; }
1895
}
1896
}
1897
/**************
1900
* Scrollbars *
1901
**************/
1902
scrollbar {
1903
$_slider_min_length: 24px;
1904
// disable steppers
1906
@at-root * {
1907
-GtkScrollbar-has-backward-stepper: false;
1908
-GtkScrollbar-has-forward-stepper: false;
1909
}
1910
transition: $longer_transition;
1912
background-color: $base_color;
1913
background-clip: $extra_background_clip;
1914
// scrollbar border
1916
&.top { border-bottom: 1px solid $border_color; }
1917
&.bottom { border-top: 1px solid $border_color; }
1918
&.left { border-right: 1px solid $border_color; }
1919
&.right { border-left: 1px solid $border_color; }
1920
// slider
1922
slider {
1923
transition: $shorter_transition, margin 0, border-width 0;
1924
min-width: 8px;
1925
min-height: 8px;
1926
border: 4px solid transparent;
1927
border-radius: $circular_radius;
1928
background-clip: padding-box;
1929
background-color: $hint_fg_color;
1930
&:hover { background-color: $secondary_fg_color; }
1932
&:active { background-color: $fg_color; }
1934
&:disabled { background-color: $disabled_secondary_fg_color; }
1936
}
1937
&.fine-tune {
1939
slider {
1940
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1941
min-width: 4px;
1942
min-height: 4px;
1943
}
1944
&.horizontal slider { margin: 2px 0; }
1946
&.vertical slider { margin: 0 2px; }
1948
}
1949
&.overlay-indicator {
1951
&:not(.dragging):not(.hovering) {
1952
border-color: transparent;
1953
background-color: transparent;
1954
slider {
1956
min-width: 4px;
1957
min-height: 4px;
1958
margin: 4px - 1px;
1959
border: 1px solid rgba($base_color, 0.3);
1960
}
1961
button {
1963
min-width: 4px;
1964
min-height: 4px;
1965
margin: 4px - 1px;
1966
border: 1px solid rgba($base_color, 0.3);
1967
border-radius: $circular_radius;
1968
background-color: $hint_fg_color;
1969
background-clip: padding-box;
1970
-gtk-icon-source: none;
1971
&:disabled { background-color: $disabled_secondary_fg_color; }
1973
}
1974
&.horizontal {
1976
slider { min-width: $_slider_min_length; }
1977
button { min-width: 8px; }
1979
}
1980
&.vertical {
1982
slider { min-height: $_slider_min_length; }
1983
button { min-height: 8px; }
1985
}
1986
}
1987
&.dragging,
1989
&.hovering { background-color: rgba($base_color, 0.9); }
1990
}
1991
&.horizontal slider { min-width: $_slider_min_length; }
1993
&.vertical slider { min-height: $_slider_min_length; }
1995
// button styling
1997
button {
1998
@extend %simple_flat_button;
1999
min-width: 16px;
2001
min-height: 16px;
2002
padding: 0;
2003
border-radius: 0;
2004
}
2005
// button icons
2007
&.vertical {
2008
button {
2009
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2010
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2012
}
2013
}
2014
&.horizontal {
2016
button {
2017
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2018
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2020
}
2021
}
2022
}
2023
/**********
2026
* Switch *
2027
**********/
2028
switch {
2029
transition: background-color 100ms $deceleration_curve, opacity $longer_duration $deceleration_curve;
2030
margin: $container_padding 0;
2031
padding: 0 2px;
2032
border: 5px solid transparent;
2033
border-radius: $circular_radius;
2034
background-color: $track_color;
2035
background-clip: padding-box;
2036
font-size: 0;
2037
&:checked { background-color: rgba($accent_color, 0.5); }
2039
&:disabled { opacity: 0.5; }
2041
slider {
2043
transition: all 100ms $deceleration_curve, box-shadow $longer_duration $deceleration_curve;
2044
min-width: 20px;
2045
min-height: 20px;
2046
margin: -3px -2px;
2047
border-radius: $circular_radius;
2048
box-shadow: 0 0 0 10px transparent, $shadow_1;
2049
background-color: $popup_bg_color;
2050
color: $secondary_fg_color;
2051
}
2052
&:hover slider { box-shadow: 0 0 0 10px gtkalpha(currentColor, 0.16), $shadow_1; }
2054
&:focus slider { box-shadow: 0 0 0 10px gtkalpha(currentColor, 0.2), $shadow_1; }
2056
&:focus:hover slider { box-shadow: 0 0 0 10px gtkalpha(currentColor, 0.24), $shadow_1; }
2058
&:checked slider {
2060
background-color: $accent_color;
2061
color: $accent_color;
2062
}
2063
row:selected & {
2065
}
2066
}
2067
/*************************
2070
* Check and Radio items *
2071
*************************/
2072
// draw regular check and radio items using our PNG assets
2073
// all assets are rendered from assets.svg. never add pngs directly
2074
// selection-mode
2076
.view.content-view.check:not(list),
2077
.content-view .tile check:not(list) {
2078
min-height: 40px;
2079
min-width: 40px;
2080
margin: 0;
2081
padding: 0;
2082
box-shadow: none;
2083
background-color: transparent;
2084
background-image: none;
2085
-gtk-icon-shadow: $shadow_1;
2086
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2088
@each $s, $as in ('', '-unchecked'),
2090
(':checked', '-checked') {
2091
&#{$s} {
2092
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2093
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2094
}
2095
}
2096
}
2097
checkbutton,
2099
radiobutton {
2100
outline: none;
2101
}
2102
checkbutton.text-button,
2104
radiobutton.text-button {
2105
// this is for a nice focus on check and radios text
2106
padding: 2px;
2107
label:not(:only-child) { margin: 0 4px; }
2109
}
2110
$check_radio_size: 40px;
2112
check,
2114
radio {
2115
min-height: 24px;
2116
min-width: 24px;
2117
margin: -($check_radio_size - 24px) / 2;
2118
padding: ($check_radio_size - 24px) / 2;
2119
@extend %simple_flat_button;
2121
@extend %circular_button;
2123
&:focus { box-shadow: inset 0 0 0 9999px gtkalpha(currentColor, 0.2); }
2125
&:hover { box-shadow: inset 0 0 0 9999px $semi_fill_color; }
2127
&:checked, &:indeterminate {
2129
color: $accent_color;
2130
&:disabled { color: $disabled_accent_color; }
2132
}
2133
// &:only-child { margin: -12px; }
2135
row:selected &:not(:checked):not(:indeterminate) {
2137
color: $inverse_secondary_fg_color;
2138
&:hover, &:active { color: $inverse_fg_color; }
2140
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2142
}
2143
popover & {
2145
&, &:focus, &:hover, &:active, &:disabled {
2146
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2147
box-shadow: none;
2148
background-image: none;
2149
}
2150
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2152
&.left:dir(rtl) {
2154
margin-left: -12px;
2155
margin-right: -4px;
2156
}
2157
&.right:dir(ltr) {
2159
margin-left: -4px;
2160
margin-right: -12px;
2161
}
2162
}
2163
menu menuitem & {
2165
transition: none;
2166
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2167
padding: 0;
2168
&:dir(ltr) { margin-right: 8px; }
2170
&:dir(rtl) { margin-left: 8px; }
2172
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2174
&, &:hover, &:disabled {
2176
box-shadow: none;
2177
// color: inherit;
2178
}
2179
}
2180
}
2181
%check,
2183
check {
2184
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2185
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2187
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2189
}
2190
%radio,
2192
radio {
2193
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2194
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2196
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2198
border-image-slice: $check_radio_size / 2px;
2200
border-image-width: $check_radio_size / 2;
2201
$radio_indicator: 10px / $check_radio_size / 2;
2203
& {
2205
border-image-source: -gtk-gradient(radial,
2206
center center, 0,
2207
center center, 0.001,
2208
to($accent_color),
2209
to(transparent));
2210
}
2211
&:checked:not(:indeterminate) {
2213
border-image-source: -gtk-gradient(radial,
2214
center center, 0,
2215
center center, $radio_indicator,
2216
to($accent_color),
2217
to(transparent));
2218
}
2219
&:checked:not(:indeterminate):disabled {
2221
border-image-source: -gtk-gradient(radial,
2222
center center, 0,
2223
center center, $radio_indicator,
2224
to($disabled_accent_color),
2225
to(transparent));
2226
}
2227
}
2228
%small_check,
2230
menu menuitem check {
2231
& {
2232
min-height: 16px;
2233
min-width: 16px;
2234
border-radius: 2px;
2235
-gtk-outline-radius: 2px;
2236
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2237
}
2238
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2240
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2242
}
2243
%small_radio,
2245
menu menuitem radio {
2246
& {
2247
min-height: 16px;
2248
min-width: 16px;
2249
border-image: none;
2250
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2251
}
2252
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2254
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2256
}
2257
// ANIMATION:
2259
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2260
// the transformation is set on the active state and it get reset on the checked state.
2261
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2262
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2264
check:not(:checked):indeterminate:active,
2266
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2267
check:not(:checked),
2269
radio:not(:checked) {
2270
& {
2271
transition: $longer_transition,
2272
background-size $ripple_duration $deceleration_curve,
2273
background-image $ripple_opacity_duration $deceleration_curve,
2274
-gtk-icon-transform 0;
2275
}
2276
&:active {
2278
transition: $longer_transition,
2279
background-size 0,
2280
background-image 0,
2281
-gtk-icon-transform 0;
2282
}
2283
menu menuitem & { transition: none; }
2285
}
2286
treeview.view check,
2288
treeview.view radio {
2289
padding: 0;
2290
&:hover {
2292
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2293
&:disabled { box-shadow: none; }
2295
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2297
}
2298
& {
2300
color: $secondary_fg_color;
2301
&:hover, &:active { color: $fg_color; }
2303
&:disabled { color: $disabled_secondary_fg_color; }
2305
&:checked, &:indeterminate { color: $accent_color; }
2307
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2309
}
2310
&:selected {
2312
color: $inverse_secondary_fg_color;
2313
&:hover, &:active { color: $inverse_fg_color; }
2315
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2317
&:checked, &:indeterminate { color: $accent_color; }
2319
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2321
}
2322
}
2323
treeview.view radio:checked {
2325
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2326
border-image: none;
2327
}
2328
/************
2331
* GtkScale *
2332
************/
2333
scale {
2334
// sizing
2335
$_marks_length: 8px;
2336
$_marks_distance: 7px;
2337
$trough_size: 2px;
2339
$finetune_trough_size: 4px;
2340
$slider_size: 32px;
2342
$slider_margin: -($slider_size - $trough_size) / 2;
2344
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2345
$color_slider_margin: -($slider_size) * 3 / 4;
2347
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2348
min-height: $trough_size;
2350
min-width: $trough_size;
2351
&.horizontal { padding: ($medium_size - $trough_size) / 2 12px; }
2353
&.vertical { padding: 12px ($medium_size - $trough_size) / 2; }
2355
// the slider is inside the trough, so to have make it bigger there's a negative margin
2357
slider {
2358
min-height: $slider_size;
2359
min-width: $slider_size;
2360
margin: $slider_margin;
2361
}
2362
// click-and-hold the slider to activate
2364
&.fine-tune {
2365
&.horizontal {
2366
min-height: $finetune_trough_size;
2367
padding-top: ($medium_size - $finetune_trough_size) / 2;
2368
padding-bottom: ($medium_size - $finetune_trough_size) / 2;
2369
}
2370
&.vertical {
2372
min-width: $finetune_trough_size;
2373
padding-left: ($medium_size - $finetune_trough_size) / 2;
2374
padding-right: ($medium_size - $finetune_trough_size) / 2;
2375
}
2376
// to make the trough grow in fine-tune mode
2378
slider { margin: $finetune_slider_margin; }
2379
}
2380
// the backing bit
2382
trough {
2383
transition: background-color $longer_duration $deceleration_curve;
2384
outline: none;
2385
background-color: $track_color;
2386
&:disabled { background-color: $divider_color; }
2388
}
2389
// the colored part of the backing bit
2391
highlight {
2392
transition: background-color $longer_duration $deceleration_curve;
2393
background-color: $accent_color;
2394
&:disabled { background-color: transparent; }
2396
}
2397
// this is another differently styled part of the backing bit, the most relevant use case is for example
2399
// in media player to indicate how much video stream as been cached
2400
fill {
2401
transition: background-color $longer_duration $deceleration_curve;
2402
background-color: $track_color;
2403
&:disabled { background-color: transparent; }
2405
}
2406
slider {
2408
transition: background-color $longer_duration $deceleration_curve,
2409
background-size $ripple_duration $deceleration_curve,
2410
background-image $ripple_opacity_duration $deceleration_curve;
2411
background-repeat: no-repeat;
2412
background-position: center;
2413
background-size: auto, 1000% 1000%;
2414
border-radius: 50%;
2415
color: transparent;
2416
@each $s, $as in ('', ''),
2418
(':disabled', '-disabled') {
2419
&#{$s} {
2420
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2421
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2423
radial-gradient(circle farthest-corner at center,
2424
currentColor 10%,
2425
transparent 0%);
2426
}
2427
}
2428
&:focus { background-color: rgba($accent_color, 0.16); }
2430
&:hover { background-color: rgba($accent_color, 0.12); }
2432
&:active {
2434
transition: background-color $longer_duration $deceleration_curve,
2435
background-size 0,
2436
background-image 0;
2437
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
2438
background-size: auto, 0% 0%;
2439
background-color: rgba($accent_color, 0.12);
2440
color: rgba($accent_color, 0.12);
2441
}
2442
}
2443
marks label,
2445
value { color: $hint_fg_color; }
2446
marks {
2448
color: $track_color;
2449
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2451
(bottom, bottom, top),
2452
(left, left, right),
2453
(right, right, left) {
2454
&.#{$marks_class} {
2455
margin-#{$marks_margin}: $_marks_distance;
2456
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2457
}
2458
}
2459
}
2460
&.fine-tune marks {
2462
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2463
(bottom, bottom, top),
2464
(left, left, right),
2465
(right, right, left) {
2466
&.#{$marks_class} {
2467
margin-#{$marks_margin}: $_marks_distance - 1px;
2468
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2469
}
2470
}
2471
}
2472
&.horizontal {
2474
indicator {
2475
min-height: $_marks_length;
2476
min-width: 1px;
2477
}
2478
}
2479
&.vertical {
2481
indicator {
2482
min-height: 1px;
2483
min-width: $_marks_length;
2484
}
2485
}
2486
// *WARNING* scale with marks madness following
2488
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2490
('vertical', 'vert') {
2491
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2492
('marks-after', 'marks-after:not(.marks-before)') {
2493
&.#{$dir_class}.#{$marks_class} {
2494
slider {
2495
@each $state, $state_infix in ('', ''),
2496
(':disabled', '-disabled') {
2497
&#{$state} {
2498
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2499
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2501
radial-gradient(circle farthest-corner at center,
2502
currentColor 10%,
2503
transparent 0%);
2504
}
2505
}
2506
}
2507
}
2508
}
2509
}
2510
&.color {
2512
min-height: 0;
2513
min-width: 0;
2514
&.horizontal {
2516
padding: 0 0 12px 0;
2517
slider {
2519
&:dir(ltr), &:dir(rtl) { // specificity bump
2520
margin-bottom: $color_slider_margin;
2521
margin-top: $color_marks_slider_margin;
2522
}
2523
}
2524
}
2525
&.vertical {
2527
&:dir(ltr) {
2528
padding: 0 0 0 12px;
2529
slider {
2531
margin-left: $color_slider_margin;
2532
margin-right: $color_marks_slider_margin;
2533
}
2534
}
2535
&:dir(rtl) {
2537
padding: 0 12px 0 0;
2538
slider {
2540
margin-right: $color_slider_margin;
2541
margin-left: $color_marks_slider_margin;
2542
}
2543
}
2544
}
2545
}
2546
}
2547
/*****************
2550
* Progress bars *
2551
*****************/
2552
progressbar {
2553
// sizing
2554
&.horizontal {
2555
trough,
2556
progress { min-height: $bar_size; }
2557
}
2558
&.vertical {
2560
trough,
2561
progress { min-width: $bar_size; }
2562
}
2563
// FIXME: insensitive state missing and some other state should be set probably
2565
color: $hint_fg_color;
2566
font-size: smaller;
2567
trough { background-color: rgba($primary_color, 0.3); }
2569
progress { background-color: $primary_color; }
2571
&.osd { // progressbar.osd used for epiphany page loading progress
2573
// min-width: $bar_size;
2574
// min-height: $bar_size;
2575
// background-color: transparent;
2576
// trough { background-color: transparent; }
2578
// progress { background-color: $primary_color; }
2580
}
2581
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2583
}
2584
/*************
2587
* Level Bar *
2588
*************/
2589
levelbar {
2590
&.horizontal {
2591
block { min-height: $bar_size; }
2592
&.discrete block {
2594
min-width: $medium_size;
2595
&:not(:last-child) { margin-right: 2px; }
2597
}
2598
}
2599
&.vertical {
2601
block { min-width: $bar_size; }
2602
&.discrete block {
2604
min-height: $medium_size;
2605
&:not(:last-child) { margin-bottom: 2px; }
2607
}
2608
}
2609
// imitate the entry style
2611
trough {
2612
// padding: 2px;
2613
// border-radius: 2px;
2614
// box-shadow: $shadow_1;
2615
// background-color: $base_color;
2616
// &:disabled { background-color: $alt_base_color; }
2618
}
2619
block {
2621
&.low { background-color: $warning_color; }
2622
&.high,
2624
&:not(.empty) { background-color: $primary_color; }
2625
&.full { background-color: $success_color; }
2627
&.empty { background-color: $divider_color; }
2629
}
2630
}
2631
/****************
2634
* Print dialog *
2635
*****************/
2636
printdialog {
2637
paper {
2638
padding: 0;
2639
border: 1px solid $border_color;
2640
background-color: $base_color;
2641
color: $fg_color;
2642
}
2643
.dialog-action-box { margin: 12px; }
2645
}
2646
/**********
2649
* Frames *
2650
**********/
2651
frame > border,
2652
.frame {
2653
margin: 0;
2654
padding: 0;
2655
border: 1px solid $border_color;
2656
border-radius: 0;
2657
box-shadow: none;
2658
&.flat { border-style: none; }
2660
}
2661
frame.flat > border { @extend .frame.flat; } // for backporting
2663
actionbar > revealer > box {
2665
padding: $container_padding;
2666
border-top: 1px solid $border_color;
2667
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2669
}
2670
scrolledwindow {
2672
viewport.frame { // avoid double borders when viewport inside scrolled window
2673
border-style: none;
2674
}
2675
// This is used when content is touch-dragged past boundaries.
2677
// draws a box on top of the content, the size changes programmatically.
2678
@at-root overshoot {
2679
&.top { @include overshoot(top); }
2680
&.bottom { @include overshoot(bottom); }
2682
&.left { @include overshoot(left); }
2684
&.right { @include overshoot(right); }
2686
}
2687
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2689
@at-root undershoot {
2690
&.top { @include undershoot(top); }
2691
&.bottom { @include undershoot(bottom); }
2693
&.left { @include undershoot(left); }
2695
&.right { @include undershoot(right); }
2697
}
2698
@at-root junction { // the small square between two scrollbars
2700
border-style: solid none none solid;
2701
border-width: 1px;
2702
border-color: $border_color;
2703
background-color: $base_color;
2704
&:dir(rtl) { border-style: solid solid none none; }
2706
}
2707
}
2708
// vbox and hbox separators
2710
separator {
2711
min-width: 1px;
2712
min-height: 1px;
2713
background-color: $border_color;
2714
}
2715
%hide_separators {
2717
min-width: 0;
2718
min-height: 0;
2719
background-color: transparent;
2720
}
2721
/*********
2724
* Lists *
2725
*********/
2726
list {
2727
border-color: $border_color;
2728
background-color: $base_color;
2729
row { padding: 2px; }
2731
}
2732
// FIXME
2734
$row_transition: $longer_transition, background-color 0, color 0;
2735
row {
2737
&.activatable {
2738
transition: $row_transition,
2739
background-size $ripple_duration $deceleration_curve,
2740
background-image $ripple_opacity_duration $deceleration_curve;
2741
box-shadow: inset 0 0 0 9999px transparent;
2742
background-image: radial-gradient(circle farthest-corner at center,
2743
transparent 10%,
2744
transparent 0%);
2745
background-repeat: no-repeat;
2746
background-position: center;
2747
background-size: 1000% 1000%;
2748
&:hover {
2750
transition: $row_transition,
2751
box-shadow 0,
2752
background-size $ripple_duration $deceleration_curve,
2753
background-image $ripple_opacity_duration $deceleration_curve;
2754
box-shadow: inset 0 0 0 9999px $row_fill_color;
2755
}
2756
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2758
&:active {
2759
transition: $row_transition,
2760
background-size 0,
2761
background-image 0;
2762
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2763
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2764
background-image: radial-gradient(circle farthest-corner at center,
2765
$semi_fill_color 10%,
2766
transparent 0%);
2767
background-size: 0% 0%;
2768
}
2769
}
2770
&:selected { @extend %selected_items; }
2772
}
2773
/*********************
2776
* App Notifications *
2777
*********************/
2778
.app-notification {
2779
// @extend %osd;
2780
@extend toolbar.osd;
2782
margin: 8px;
2784
button { @extend %button_basic.flat; }
2786
&.frame,
2788
border { border-style: none; }
2789
}
2790
/*************
2793
* Expanders *
2794
*************/
2795
expander {
2796
title > arrow {
2797
transition: all $shorter_duration $standard_curve;
2798
min-width: 16px;
2799
min-height: 16px;
2800
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2801
-gtk-icon-transform: rotate(-90deg);
2802
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2804
&:checked { -gtk-icon-transform: unset; }
2806
color: $secondary_fg_color;
2808
&:hover, &:active { color: $fg_color; }
2810
&:disabled { color: $disabled_secondary_fg_color; }
2812
&:selected {
2814
color: $inverse_secondary_fg_color;
2815
&:hover, &:active { color: $inverse_fg_color; }
2817
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2819
}
2820
}
2821
}
2822
/************
2825
* Calendar *
2826
************/
2827
calendar {
2828
padding: 1px;
2829
border: 1px solid $border_color;
2830
color: $fg_color;
2831
&:disabled { color: $disabled_fg_color; }
2833
&:selected {
2835
@extend %selected_items;
2836
border-radius: 2px + 1px;
2838
}
2839
&.header {
2841
border-style: none none solid;
2842
border-radius: 0;
2843
}
2844
&.button { @extend %simple_flat_button; }
2846
&.highlight {
2848
color: $secondary_fg_color;
2849
font-weight: 500;
2850
}
2851
&:indeterminate { color: $disabled_secondary_fg_color; }
2853
}
2854
/***********
2857
* Dialogs *
2858
***********/
2859
messagedialog { // Message Dialog styling
2860
&.background { background-color: $popup_bg_color; }
2861
.titlebar {
2863
min-height: $small_size;
2864
border-style: none;
2865
box-shadow: inset 0 1px $highlight_color;
2866
background-color: $popup_bg_color;
2867
color: $fg_color;
2868
&:backdrop { color: $secondary_fg_color; }
2870
}
2871
&.csd { // rounded bottom border styling for csd version
2873
&.background {
2874
// bigger radius for better antialiasing
2875
border-bottom-left-radius: 2px;
2876
border-bottom-right-radius: 2px;
2877
}
2878
.dialog-action-area {
2880
margin-top: -$container_padding;
2881
padding: $container_padding;
2882
button {
2884
@extend %simple_flat_button;
2885
border-radius: 2px;
2886
&:not(:last-child) { margin-right: $container_padding; }
2888
&.suggested-action:not(:disabled) { color: $suggested_color; }
2890
&.destructive-action:not(:disabled) { color: $destructive_color; }
2892
}
2893
}
2894
}
2895
entry { @extend %entry.flat; }
2897
}
2898
filechooser {
2900
.dialog-action-box { border-top: 1px solid $border_color; }
2901
#pathbarbox {
2903
border-bottom: 1px solid $border_color;
2904
background-color: $bg_color;
2905
}
2906
}
2907
filechooserbutton:drop(active) {
2909
box-shadow: none;
2910
}
2911
/***********
2914
* Sidebar *
2915
***********/
2916
.sidebar {
2917
border-style: none;
2918
background-color: $alt_base_color;
2919
@at-root %sidebar_left,
2921
&:dir(ltr),
2922
&.left,
2923
&.left:dir(rtl) {
2924
border-right: 1px solid $border_color;
2925
border-left-style: none;
2926
}
2927
@at-root %sidebar_right,
2929
&:dir(rtl),
2930
&.right {
2931
border-left: 1px solid $border_color;
2932
border-right-style: none;
2933
}
2934
list { background-color: transparent; }
2936
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2938
}
2939
stacksidebar {
2941
&.sidebar {
2942
&:dir(ltr),
2943
&.left,
2944
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2945
&:dir(rtl),
2947
&.right { list { @extend %sidebar_right; }}
2948
}
2949
row {
2951
padding: 10px 4px;
2952
> label {
2954
padding-left: 6px;
2955
padding-right: 6px;
2956
}
2957
&.needs-attention > label { @extend %needs_attention; }
2959
}
2960
}
2961
/****************
2964
* File chooser *
2965
****************/
2966
// dim the sidebar icons, see bug #786613 for details on this oddity
2967
row {
2968
image.sidebar-icon { color: $secondary_fg_color; }
2969
&:selected image.sidebar-icon { color: $inverse_secondary_fg_color; }
2971
}
2972
placessidebar {
2974
> viewport.frame { border-style: none; }
2975
list { padding: (4px - 3px) 0 4px; }
2977
row {
2979
// Needs overriding of the GtkListBoxRow padding
2980
min-height: 32px;
2981
margin: -1px 0; // Remove unknown margins
2982
padding: 0;
2983
// Using margins/padding directly in the SidebarRow
2985
// will make the animation of the new bookmark row jump
2986
> revealer { padding: 0 12px; }
2987
&:selected { color: $inverse_fg_color; }
2989
&:disabled { color: $disabled_fg_color; }
2991
image.sidebar-icon {
2993
&:dir(ltr) { padding-right: 8px; }
2994
&:dir(rtl) { padding-left: 8px; }
2995
}
2996
label.sidebar-label {
2998
&:dir(ltr) { padding-right: 2px; }
2999
&:dir(rtl) { padding-left: 2px; }
3000
}
3001
@at-root button.sidebar-button {
3003
@extend %simple_flat_button;
3004
@extend %small_button;
3006
row:selected & { @extend %button_selected.flat; }
3008
}
3009
&.sidebar-placeholder-row {
3011
min-height: 2px;
3012
padding: 0 8px;
3013
background-image: image($accent_color);
3014
background-clip: content-box;
3015
}
3016
&.sidebar-new-bookmark-row { color: $accent_color; }
3018
&:drop(active):not(:disabled) {
3020
box-shadow: inset 0 0 0 2px $accent_color;
3021
&:selected {
3023
// background-color: $accent_color;
3024
// color: $inverse_fg_color;
3025
}
3026
}
3027
}
3028
}
3029
placesview {
3031
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3032
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3034
// this selects the "connect to server" label
3036
> actionbar > revealer > box > label {
3037
padding-left: 8px;
3038
padding-right: 8px;
3039
}
3040
}
3041
/*********
3044
* Paned *
3045
*********/
3046
paned {
3047
> separator {
3048
min-width: 1px;
3049
min-height: 1px;
3050
-gtk-icon-source: none; // defeats the ugly default handle decoration
3051
border-style: none; // just to be sure
3052
background-color: transparent;
3053
// workaround, using background istead of a border since the border will get rendered twice (?)
3054
background-image: image($border_color);
3055
background-size: 1px 1px;
3056
background-clip: content-box; // avoids borders image being rendered twice (?)
3057
&.wide {
3059
min-width: 6px;
3060
min-height: 6px;
3061
background-color: $bg_color;
3062
background-image: image($border_color), image($border_color);
3063
background-size: 1px 1px, 1px 1px;
3064
}
3065
}
3066
&.horizontal > separator {
3068
background-repeat: repeat-y;
3069
&:dir(ltr) {
3071
margin: 0 -8px 0 0;
3072
padding: 0 8px 0 0;
3073
background-position: left;
3074
}
3075
&:dir(rtl) {
3077
margin: 0 0 0 -8px;
3078
padding: 0 0 0 8px;
3079
background-position: right;
3080
}
3081
&.wide {
3083
margin: 0;
3084
padding: 0;
3085
background-repeat: repeat-y, repeat-y;
3086
background-position: left, right;
3087
}
3088
}
3089
&.vertical > separator {
3091
margin: 0 0 -8px 0;
3092
padding: 0 0 8px 0;
3093
background-repeat: repeat-x;
3094
background-position: top;
3095
&.wide {
3097
margin: 0;
3098
padding: 0;
3099
background-repeat: repeat-x, repeat-x;
3100
background-position: bottom, top;
3101
}
3102
}
3103
}
3104
/**************
3107
* GtkInfoBar *
3108
**************/
3109
infobar {
3110
border-style: none;
3111
&.info { background-color: $info_bg_color; }
3113
&.question { background-color: $question_bg_color; }
3115
&.warning { background-color: $warning_bg_color; }
3117
&.error { background-color: $error_bg_color; }
3119
&.info,
3121
&.question,
3122
&.warning,
3123
&.error {
3124
> label, & { color: $inverse_fg_color; }
3125
button { @extend %button_selected; }
3127
selection {}
3129
*:link { @extend %link_selected; }
3131
}
3132
}
3133
/************
3136
* Tooltips *
3137
************/
3138
tooltip {
3139
&.background {
3140
// background-color needs to be set this way otherwise it gets drawn twice
3141
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3142
// box-shadow: inset 0 1px $highlight_color;
3143
background-color: $tooltip_bg_color;
3144
color: $tooltip_fg_color;
3145
}
3146
// padding: 4px; /* not working */
3148
border-radius: 2px;
3149
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3150
&:not(.csd):not(.unity-csd) {
3152
// border: 1px solid $border_color;
3153
// border-radius: 2px + 1px;
3154
// background-clip: $extra_background_clip;
3155
}
3156
// FIXME: we need a border or tooltips vanish on black background.
3158
decoration { background-color: transparent; }
3159
label {
3161
// tooltip label already seems to have 6px margins
3162
min-height: 32px - 6px * 2;
3163
padding: 0 8px - 6px;
3164
}
3165
* {
3167
// workaround for Eclipse.
3168
// do not include any declaration here.
3169
// padding: 0;
3170
// background-color: transparent;
3171
// color: inherit;
3172
}
3173
}
3174
/*****************
3177
* Color Chooser *
3178
*****************/
3179
colorswatch {
3180
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3181
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3182
// applied to the overlay box.
3183
// base color corners rounding
3185
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3186
// sports a bigger radius.
3187
// nth-child is needed by the custom color strip.
3188
&.top {
3190
border-top-left-radius: $material_radius + 0.5px;
3191
border-top-right-radius: $material_radius + 0.5px;
3192
overlay {
3194
border-top-left-radius: $material_radius;
3195
border-top-right-radius: $material_radius;
3196
}
3197
}
3198
&.bottom {
3200
border-bottom-left-radius: $material_radius + 0.5px;
3201
border-bottom-right-radius: $material_radius + 0.5px;
3202
overlay {
3204
border-bottom-left-radius: $material_radius;
3205
border-bottom-right-radius: $material_radius;
3206
}
3207
}
3208
&.left,
3210
&:first-child:not(.top) {
3211
border-top-left-radius: $material_radius + 0.5px;
3212
border-bottom-left-radius: $material_radius + 0.5px;
3213
overlay {
3215
border-top-left-radius: $material_radius;
3216
border-bottom-left-radius: $material_radius;
3217
}
3218
}
3219
&.right,
3221
&:last-child:not(.bottom) {
3222
border-top-right-radius: $material_radius + 0.5px;
3223
border-bottom-right-radius: $material_radius + 0.5px;
3224
overlay {
3226
border-top-right-radius: $material_radius;
3227
border-bottom-right-radius: $material_radius;
3228
}
3229
}
3230
&.dark { color: $light_fg_color; }
3232
&.light { color: $dark_fg_color; }
3234
&:drop(active) {
3236
box-shadow: none;
3237
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $accent_color; }
3239
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $accent_color; }
3241
}
3242
overlay {
3244
transition: $shadow_transition;
3245
box-shadow: $shadow_1;
3246
&:hover { box-shadow: $shadow_2; }
3248
}
3249
&#add-color-button {
3251
border-radius: $material_radius $material_radius 0 0;
3252
color: $light_fg_color;
3253
&:only-child { border-radius: $material_radius; }
3255
overlay {
3257
background-image: linear-gradient(to right,
3258
$error_bg_color 25%,
3259
$warning_bg_color 25%, $warning_bg_color 50%,
3260
$info_bg_color 50%, $info_bg_color 75%,
3261
$question_bg_color 75%);
3262
}
3263
}
3264
&:disabled {
3266
opacity: 0.5;
3267
overlay { box-shadow: none; }
3269
}
3270
row:selected & {
3272
}
3273
&#editor-color-sample {
3275
border-radius: $material_radius + 0.5px;
3276
overlay { border-radius: $material_radius; }
3278
// overlay:hover { box-shadow: $shadow_1; }
3280
}
3281
}
3282
// colorscale popup
3284
colorchooser .popover.osd {
3285
transition: $shadow_transition;
3286
border-radius: 2px;
3287
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3288
background-color: $popup_bg_color;
3289
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3291
spinbutton:not(.vertical) { @extend %entry.flat; }
3293
}
3294
/********
3297
* Misc *
3298
********/
3299
// content view (grid/list)
3300
.content-view {
3301
background-color: $bg_color;
3302
// &:hover { -gtk-icon-effect: highlight; }
3304
rubberband, .rubberband { @extend rubberband; }
3306
}
3307
.scale-popup {
3309
// .osd & { @extend %osd; }
3310
.osd & button.flat { // FIXME: quick hack, redo properly
3312
}
3313
button { // +/- buttons on GtkVolumeButton popup
3315
}
3316
}
3317
/**********************
3320
* Window Decorations *
3321
**********************/
3322
decoration {
3323
transition: $shadow_transition;
3324
border-radius: 2px 2px 0 0;
3325
box-shadow: $shadow_4, 0 16px 16px transparent;
3326
// FIXME rationalize shadows
3328
// this is used for the resize cursor area
3330
margin: 8px;
3331
&:backdrop {
3333
// the transparent shadow here is to enforce that the shadow extents don't
3334
// change when we go to backdrop, to prevent jumping windows.
3335
// The biggest shadow should be in the same order then in the active state
3336
// or the jumping will happen during the transition.
3337
box-shadow: $shadow_2, 0 16px 16px transparent;
3338
}
3339
.maximized &,
3341
.fullscreen &,
3342
.tiled &,
3343
.tiled-top &,
3344
.tiled-right &,
3345
.tiled-bottom &,
3346
.tiled-left & { border-radius: 0; }
3347
.popup & { box-shadow: none; }
3349
// server-side decorations as used by mutter
3351
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3352
.csd.popup & {
3354
border-radius: 2px;
3355
box-shadow: $shadow_2;
3356
}
3357
tooltip.csd & {
3359
border-radius: 2px;
3360
box-shadow: none;
3361
}
3362
messagedialog.csd & {
3364
border-radius: 2px;
3365
// box-shadow: $shadow_4, 0 16px 16px transparent;
3366
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3368
}
3369
.solid-csd & {
3371
margin: 0;
3372
// padding: 4px;
3373
border-radius: 0;
3374
box-shadow: none;
3375
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3376
background-color: $titlebar_bg_color;
3377
}
3378
}
3379
// Window Close button
3381
button.titlebutton {
3382
// @extend %simple_flat_button;
3383
@extend %circular_button;
3385
.selection-mode & {
3387
}
3388
}
3389
// catch all extend :)
3392
%selected_items {
3394
background-color: $primary_color;
3395
@at-root %nobg_selected_items, & {
3397
color: $inverse_fg_color;
3398
&:disabled { color: $inverse_disabled_fg_color; }
3400
}
3401
}
3402
.monospace { font-family: monospace; }
3404
/**********************
3407
* Touch Copy & Paste *
3408
**********************/
3409
// touch selection handlebars for the Popover.osd above
3410
cursor-handle {
3411
border-radius: $circular_radius;
3412
background-color: $accent_color;
3413
background-image: none;
3414
&.top:dir(ltr), &.bottom:dir(rtl) {
3416
padding-left: 6px;
3417
border-top-right-radius: 0;
3418
}
3419
&.bottom:dir(ltr), &.top:dir(rtl) {
3421
padding-right: 6px;
3422
border-top-left-radius: 0;
3423
}
3424
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3426
-GtkWidget-text-handle-width: 24;
3427
-GtkWidget-text-handle-height: 30;
3428
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3430
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3431
url('#{$_url}@2.png'));
3432
}
3433
}
3434
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3436
// shortcut window keys
3438
.keycap {
3439
min-width: 28px - 8px * 2;
3440
min-height: 28px - 2px;
3441
margin-top: 2px;
3442
padding-bottom: 2px;
3443
padding-left: 8px;
3444
padding-right: 8px;
3445
border: solid 1px $border_color;
3447
border-radius: 2px + 1px;
3448
box-shadow: inset 0 -2px $border_color;
3449
background-color: $popup_bg_color;
3450
color: $fg_color;
3451
font-size: smaller;
3452
}
3453
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3455
transition: $longer_transition;
3456
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3457
caret-color: $accent_color;
3458
}
3459
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3461
stackswitcher button.circular,
3463
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3464
min-width: $medium_size;
3465
min-height: $medium_size;
3466
padding: 0;
3467
}
3468
/*********
3471
* Emoji *
3472
*********/
3473
popover.emoji-picker {
3474
padding: 0;
3475
entry {
3477
border-bottom: 1px solid $border_color;
3478
border-bottom-left-radius: 0;
3479
border-bottom-right-radius: 0;
3480
box-shadow: none;
3481
}
3482
scrolledwindow { border-bottom: 1px solid $border_color; }
3484
}
3485
// mimic tab style
3487
button.emoji-section {
3488
margin-top: -1px;
3489
padding: 0 8px;
3490
min-width: 24px;
3491
min-height: $medium_size;
3492
border-radius: 0;
3493
outline-offset: -6px;
3494
box-shadow: none;
3495
&:hover { box-shadow: inset 0 2px $track_color; }
3497
&:active {
3499
box-shadow: inset 0 2px $primary_color;
3500
background-image: radial-gradient(circle farthest-corner at center,
3501
rgba($primary_color, 0.7) 10%,
3502
transparent 0%);
3503
}
3504
&:checked {
3506
box-shadow: inset 0 2px $primary_color;
3507
background-color: transparent;
3508
}
3509
&:first-child { margin-left: 4px; }
3511
&:last-child { margin-right: 4px; }
3513
}
3514
.emoji {
3516
min-width: 3em;
3517
min-height: 3em;
3518
padding: 0;
3519
// font-size: large;
3520
widget {
3522
transition: $shorter_transition;
3523
&:hover { font-size: larger; }
3525
}
3526
}
3527