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, $lower_opacity);
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: $hint_opacity; }
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: $higher_opacity; }
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: $disabled_opacity; }
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
$tag_height: 24px;
335
$tag_margin: ($medium_size - $tag_height) / 2;
336
margin: $tag_margin; // instead of min-height: $tag_height;
338
border-radius: $circular_radius;
339
box-shadow: none;
340
background-color: $primary_color;
341
color: $inverse_fg_color;
342
&:hover { box-shadow: $shadow_1; }
344
// side margins: compensate the entry padding with a negative margin
346
// then the negative margin itself
347
:dir(ltr) & {
348
margin-left: 8px;
349
margin-right: $tag_margin - 8px;
350
padding-left: 8px;
351
padding-right: ($tag_height - 16px) / 2;
352
}
353
:dir(rtl) & {
355
margin-left: $tag_margin - 8px;
356
margin-right: 8px;
357
padding-left: ($tag_height - 16px) / 2;
358
padding-right: 8px;
359
}
360
// seems any sizing doesn't work
362
&.button {
363
box-shadow: none;
364
background-color: transparent;
365
&:not(:hover):not(:active) { color: $inverse_secondary_fg_color; }
367
}
368
}
369
/***********
372
* Buttons *
373
***********/
374
// stuff for .needs-attention
375
@keyframes needs_attention {
376
from {
377
background-image: -gtk-gradient(radial,
378
center center, 0,
379
center center, 0.001,
380
to($accent_color),
381
to(transparent));
382
}
383
to {
385
background-image: -gtk-gradient(radial,
386
center center, 0,
387
center center, 0.5,
388
to($accent_color),
389
to(transparent));
390
}
391
}
392
%button,
394
button {
395
@at-root %button_basic, & {
396
min-height: 24px;
397
min-width: 16px;
398
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
399
border-radius: 2px;
400
font-weight: 500;
401
@include button(normal);
403
&:hover { @include button(hover); }
405
&:active { @include button(active); }
407
&:disabled { @include button(disabled); }
409
&:checked { @include button(checked); }
411
&:checked:disabled { @include button(checked-disabled); }
413
@at-root %flat_button, &.flat {
415
@at-root %simple_flat_button, & {
416
@include button(flat-normal);
417
&:hover { @include button(flat-hover); }
419
&:active { @include button(flat-active); }
421
&:disabled { @include button(flat-disabled); }
423
}
424
&:checked { @include button(flat-checked); }
426
&:checked:disabled { @include button(flat-checked-disabled); }
428
}
429
&.text-button {
431
padding-left: 16px;
432
padding-right: 16px;
433
}
434
&.image-button {
436
min-width: 24px;
437
padding: ($medium_size - 24px) / 2;
438
@extend %circular_button;
440
}
441
&.text-button.image-button {
443
border-radius: 2px;
444
-gtk-outline-radius: 2px;
445
label {
447
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
448
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
450
}
451
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
453
}
454
.linked > & { @extend %linked; }
456
.linked.vertical > & { @extend %linked_vertical; }
458
.linked > &.flat,
460
.linked.vertical > &.flat {
461
border-radius: 2px;
462
&.image-button { @extend %circular_button; }
464
&.text-button.image-button {
466
border-radius: 2px;
467
-gtk-outline-radius: 2px;
468
}
469
}
470
&:drop(active) {
472
// box-shadow: inset 0 0 0 2px $accent_color;
473
}
474
}
475
@at-root %button_selected, row:selected & {
477
&:disabled {
478
background-color: $inverse_divider_color;
479
color: $inverse_disabled_secondary_fg_color;
480
}
481
&.flat {
483
color: $inverse_secondary_fg_color;
484
&:hover, &:active { color: $inverse_fg_color; }
486
&:disabled { color: $inverse_disabled_secondary_fg_color; }
488
&:checked {
490
background-color: $inverse_track_color;
491
color: $inverse_fg_color;
492
}
493
&:checked:disabled {
495
background-color: $inverse_divider_color;
496
color: $inverse_disabled_fg_color;
497
}
498
}
499
}
500
// big standalone buttons like in Documents pager
502
&.osd {
503
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
504
&.image-button { padding: ($large_size - 24px) / 2; }
506
&:disabled { opacity: 0; }
508
}
509
// overlay / OSD style
511
@at-root %osd_button,
512
.osd & {
513
}
514
// Suggested and Destructive Action buttons
516
@each $b_type, $b_color in (suggested-action, $suggested_color),
517
(destructive-action, $destructive_color) {
518
&.#{$b_type} {
519
background-color: $b_color;
520
color: $inverse_fg_color;
521
&:disabled { @include button(disabled, $b_color); }
523
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
525
&.flat {
527
background-color: transparent;
528
color: $b_color;
529
&:disabled { @include button(flat-disabled, $b_color); }
531
&:checked { background-color: rgba($b_color, 0.3); }
533
}
534
.osd & {
536
}
537
}
538
}
539
.stack-switcher > & {
541
// to position the needs attention dot, padding is added to the button
542
// child, a label needs just lateral padding while an icon needs vertical
543
// padding added too.
544
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
546
> label {
548
padding-left: 6px; // label padding
549
padding-right: 6px; //
550
}
551
> image {
553
padding-left: 6px; // image padding
554
padding-right: 6px; //
555
padding-top: 3px; //
556
padding-bottom: 3px; //
557
}
558
&.text-button {
560
// compensate text-button paddings
561
padding-left: 16px - 6px;
562
padding-right: 16px - 6px;
563
}
564
&.image-button {
566
// we want image buttons to have a 1:1 aspect ratio, so compensation
567
// of the padding added to the GtkImage is needed
568
padding-left: ($medium_size - 16px) / 2 - 6px;
569
padding-right: ($medium_size - 16px) / 2 - 6px;
570
}
571
&.needs-attention {
573
> label,
574
> image { @extend %needs_attention; }
575
&:checked {
577
> label,
578
> image {
579
animation: none;
580
background-image: none;
581
}
582
}
583
}
584
}
585
// hide separators
587
&.font,
588
&.file { separator { @extend %hide_separators; }}
589
// &.font { > box > box > label { font-weight: bold; }}
591
// inline-toolbar buttons
593
.inline-toolbar & {
594
// @extend %button_basic.flat;
595
&:not(.text-button) { @extend %circular_button; }
597
}
598
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
600
@at-root %circular_button,
602
&.close,
603
&.circular { // The Bloody Circul Button
604
border-radius: $circular_radius;
605
-gtk-outline-radius: $circular_radius;
606
// label { padding: 0; }
608
}
609
@at-root %small_button {
611
min-height: $small_size;
612
min-width: $small_size;
613
padding: 0;
614
border-radius: $circular_radius;
615
-gtk-outline-radius: $circular_radius;
616
}
617
}
618
%needs_attention {
620
animation: needs_attention $longer_duration $deceleration_curve forwards;
621
background-repeat: no-repeat;
622
background-position: right 3px;
623
background-size: 6px 6px;
624
&:dir(rtl) { background-position: left 3px; }
626
}
627
// all the following is for the +|- buttons on inline toolbars, that way
629
// should really be deprecated...
630
.inline-toolbar toolbutton > button { // redefining the button look is
631
// needed since those are flat...
632
}
633
// More inline toolbar buttons
635
toolbar.inline-toolbar toolbutton {
636
// > button.flat { @extend %linked_middle; }
637
// &:first-child > button.flat { @extend %linked:first-child; }
639
// &:last-child > button.flat { @extend %linked:last-child; }
641
// &:only-child > button.flat { @extend %linked:only-child; }
643
}
644
%linked_middle {
646
border-radius: 0;
647
-gtk-outline-radius: 2px;
648
}
649
%linked {
651
@extend %linked_middle;
652
&:first-child {
654
border-top-left-radius: 2px;
655
border-bottom-left-radius: 2px;
656
}
657
&:last-child {
659
border-top-right-radius: 2px;
660
border-bottom-right-radius: 2px;
661
}
662
&:only-child {
664
border-radius: 2px;
665
}
666
}
667
%linked_vertical_middle {
669
border-radius: 0;
670
-gtk-outline-radius: 2px;
671
}
672
%linked_vertical {
674
@extend %linked_vertical_middle;
675
&:first-child {
677
border-top-left-radius: 2px;
678
border-top-right-radius: 2px;
679
}
680
&:last-child {
682
border-bottom-left-radius: 2px;
683
border-bottom-right-radius: 2px;
684
}
685
&:only-child {
687
border-radius: 2px;
688
}
689
}
690
/* menu buttons */
692
modelbutton.flat,
693
.menuitem.button.flat {
694
min-height: $menuitem_size;
695
padding: 0 8px;
696
border-radius: 2px;
697
color: inherit;
698
@extend %simple_flat_button;
700
&:selected { @extend %selected_items; }
702
}
703
modelbutton.flat arrow {
705
background: none;
706
&:hover { background: none; }
708
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
710
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
712
}
713
button.color {
715
min-height: $small_size;
716
min-width: $small_size;
717
padding: $container_padding;
718
colorswatch:only-child {
720
// &, overlay { border-radius: 0; }
721
}
722
}
723
/*********
726
* Links *
727
*********/
728
*:link {
729
&, &:hover, &:active { color: $link_color; }
730
&:visited {
732
&, &:hover, &:active { color: $visited_link_color; }
733
}
734
@at-root %link_selected,
736
&:selected,
737
*:selected & { color: $inverse_fg_color; }
738
}
739
button:link,
741
button:visited {
742
@extend *:link;
743
> label { text-decoration-line: underline; }
745
}
746
/*****************
748
* GtkSpinButton *
749
*****************/
750
spinbutton {
751
&:not(.vertical) {
752
// in this horizontal configuration, the whole spinbutton
753
// behaves as the entry, so we extend the entry styling
754
// and nuke the style on the internal entry
755
@extend %entry;
756
padding: 0;
758
%spinbutton_entry,
760
entry {
761
min-width: $large_size - 8px * 2;
762
// reset all the other props since the spinbutton node is styled here
763
margin: 0;
764
border-image: none;
765
border-radius: 0;
766
box-shadow: none;
767
background-color: transparent;
768
//
769
// This will help to simplify spinbutton's code, but unfortunatelly
770
// doesn't work properly in :dir(rtl). It needs z-index property.
771
//
772
// min-width: $large_size - 8px;
773
//
774
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
775
//
776
// &:dir(ltr) {
777
// margin-right: -$spinbuttons_width;
778
// padding-right: $spinbuttons_width;
779
// }
780
//
781
// &:dir(rtl) {
782
// margin-left: -$spinbuttons_width;
783
// padding-left: $spinbuttons_width;
784
// }
785
}
786
button {
788
// margin: $container_padding;
789
border: solid $container_padding transparent;
790
@extend %simple_flat_button;
792
@extend %small_button;
794
&.up:dir(ltr),
796
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
797
&.up:dir(rtl),
799
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
800
}
801
}
802
// OSD horizontal
804
.osd &:not(.vertical) {
805
button {
806
}
807
}
808
// Vertical
810
&.vertical {
811
// in the vertical configuration, we treat the spinbutton
812
// as a box, and tweak the style of the entry in the middle
813
// so that it's linked
814
// FIXME: this should not be set at all, but otherwise it gets the wrong
816
// color
817
&:disabled { color: $disabled_fg_color; }
818
&:drop(active) {
820
box-shadow: none;
821
}
822
entry {
824
min-height: $medium_size;
825
min-width: $large_size;
826
padding: 0;
827
}
828
button {
830
min-height: $medium_size;
831
min-width: $large_size;
832
padding: 0;
833
@extend %simple_flat_button;
835
&.up { border-radius: 2px 2px 0 0; }
837
&.down { border-radius: 0 0 2px 2px; }
839
}
840
}
841
// OSD vertical
843
.osd &.vertical button:first-child {
844
}
845
// Misc
847
treeview &:not(.vertical) {
848
min-height: 0;
849
border-style: none;
850
border-radius: 0;
851
entry {
853
min-height: 0;
854
padding: 1px 2px;
855
}
856
}
857
}
858
/**************
861
* ComboBoxes *
862
**************/
863
combobox {
864
arrow {
865
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
866
min-height: 16px;
867
min-width: 16px;
868
}
869
decoration,
871
button.combo:checked { transition: none; } // workaround for menuitem selection
872
button.combo cellview {
874
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
875
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
876
}
877
#gtk-combobox-popup-menu {
879
padding: 2px 0;
880
menuitem {
882
min-height: $medium_size - 2px * 2;
883
padding: 0 8px;
884
}
885
// overflow arrows
887
> arrow {
888
&.top { margin-top: -2px; }
889
&.bottom { margin-bottom: -2px * 3; }
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: $base_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,
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
/***************
1031
* Header bars *
1032
***************/
1033
%titlebar,
1034
headerbar {
1035
transition: background-color $shorter_duration $deceleration_curve, color $longer_duration $deceleration_curve;
1036
min-height: $large_size;
1037
padding: 0 $container_padding;
1038
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1039
background-color: $titlebar_bg_color;
1040
color: $titlebar_fg_color;
1041
&:disabled :not(button) > label { color: $titlebar_disabled_fg_color; }
1043
&:backdrop {
1045
color: $titlebar_secondary_fg_color;
1046
&:disabled :not(button) > label { color: $titlebar_disabled_secondary_fg_color; }
1048
}
1049
.title {
1051
padding: 0 12px;
1052
font-weight: bold;
1053
}
1054
.subtitle {
1056
padding: 0 12px;
1057
font-size: smaller;
1058
@extend .dim-label;
1060
}
1061
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
1063
button:not(.suggested-action):not(.destructive-action) {
1065
@extend %button_basic.flat;
1066
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1068
$titlebar_indicator_color 0%,
1069
transparent 0%)
1070
0 0 0 / 0 0 0px;
1071
color: $titlebar_secondary_fg_color;
1072
&:hover, &:active { color: $titlebar_fg_color; }
1074
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1076
&:checked {
1078
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1079
$titlebar_indicator_color 100%,
1080
transparent 0%)
1081
0 0 2 / 0 0 2px;
1082
color: $titlebar_fg_color;
1083
&:disabled { color: $titlebar_disabled_fg_color; }
1085
&, &:disabled { background-color: transparent; }
1087
}
1088
&:backdrop {
1090
color: $titlebar_hint_fg_color;
1091
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1093
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1095
&:checked {
1097
color: $titlebar_secondary_fg_color;
1098
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1100
}
1101
}
1102
}
1103
button.suggested-action, button.destructive-action {
1105
&:disabled {
1106
background-color: $titlebar_divider_color;
1107
color: $titlebar_disabled_fg_color;
1108
}
1109
}
1110
&.selection-mode {
1112
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1113
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1114
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1115
animation: header_ripple_effect $longer_duration $deceleration_curve;
1116
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1117
background-color: $primary_color;
1118
color: $inverse_fg_color;
1119
&:backdrop {
1121
color: $inverse_secondary_fg_color;
1122
}
1123
.subtitle:link { @extend *:link:selected; }
1125
button:not(.suggested-action):not(.destructive-action) {
1127
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1128
currentColor 0%,
1129
transparent 0%)
1130
0 0 0 / 0 0 0px;
1131
color: $inverse_fg_color;
1132
&:disabled { color: $inverse_disabled_fg_color; }
1134
&:checked {
1136
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1137
currentColor 100%,
1138
transparent 0%)
1139
0 0 2 / 0 0 2px;
1140
color: $inverse_fg_color;
1141
&:disabled { color: $inverse_disabled_fg_color; }
1143
}
1144
&:backdrop {
1146
color: $inverse_secondary_fg_color;
1147
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1149
&:checked {
1151
color: $inverse_secondary_fg_color;
1152
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1154
}
1155
}
1156
}
1157
.selection-menu {
1159
padding-left: 16px;
1160
padding-right: 16px;
1161
arrow { -GtkArrow-arrow-scaling: 1; }
1163
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1165
}
1166
}
1167
// squared corners when the window is maximized, tiled, or fullscreen
1169
.tiled &,
1170
.tiled-top &,
1171
.tiled-right &,
1172
.tiled-bottom &,
1173
.tiled-left &,
1174
.maximized &,
1175
.fullscreen & {
1176
border-radius: 0;
1177
box-shadow: $shadow_1;
1178
}
1179
&.default-decoration {
1181
min-height: $small_size;
1182
padding: $container_padding;
1183
box-shadow: inset 0 1px $titlebar_highlight_color;
1184
.tiled &,
1186
.maximized &,
1187
.fullscreen & { box-shadow: none; }
1188
button.titlebutton {
1190
min-height: $small_size;
1191
min-width: $small_size;
1192
margin: 0;
1193
padding: 0;
1194
}
1195
// workaround for non-animatable buttons
1197
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1198
}
1199
.solid-csd & {
1201
&:dir(rtl), &:dir(ltr) { // specificity bump
1202
// margin-left: -2px;
1203
// margin-right: -2px;
1204
// margin-top: -2px;
1205
// border-radius: 0;
1206
// box-shadow: inset 0 1px $titlebar_highlight_color;
1207
}
1208
}
1209
}
1210
headerbar {
1212
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1213
entry,
1214
spinbutton,
1215
// separator,
1216
button {
1217
margin-top: $container_padding;
1218
margin-bottom: $container_padding;
1219
}
1220
switch {
1222
margin-top: ($large_size - 24px) / 2;
1223
margin-bottom: ($large_size - 24px) / 2;
1224
}
1225
// reset button margins of the spinbutton
1227
spinbutton button {
1228
margin-top: 0;
1229
margin-bottom: 0;
1230
}
1231
}
1232
.background .titlebar {
1234
border-top-left-radius: 2px;
1235
border-top-right-radius: 2px;
1236
}
1237
.background.tiled .titlebar,
1239
.background.tiled-top .titlebar,
1240
.background.tiled-right .titlebar,
1241
.background.tiled-bottom .titlebar,
1242
.background.tiled-left .titlebar,
1243
.background.maximized .titlebar,
1244
.background.solid-csd .titlebar {
1245
border-top-left-radius: 0;
1246
border-top-right-radius: 0;
1247
}
1248
headerbar { // headerbar border rounding
1250
window separator:first-child + &, // tackles the paned container case
1251
window &:first-child { border-top-left-radius: 2px; }
1252
window &:last-child { border-top-right-radius: 2px; }
1254
window stack & { // tackles the stacked headerbars case
1256
&:first-child, &:last-child {
1257
border-top-left-radius: 2px;
1258
border-top-right-radius: 2px;
1259
}
1260
}
1261
window.tiled &,
1263
window.tiled-top &,
1264
window.tiled-right &,
1265
window.tiled-bottom &,
1266
window.tiled-left &,
1267
window.maximized &,
1268
window.fullscreen &,
1269
window.solid-csd & {
1270
&,
1271
&:first-child,
1272
&:last-child,
1273
&:only-child {
1274
border-top-left-radius: 0;
1275
border-top-right-radius: 0;
1276
}
1277
}
1278
}
1279
.titlebar:not(headerbar) {
1281
window.csd > & {
1282
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1283
padding: 0;
1284
background-color: transparent;
1285
background-image: none;
1286
border-style: none;
1287
box-shadow: none;
1288
}
1289
> separator {
1291
background-color: $titlebar_bg_color;
1292
background-image: image($border_color);
1293
}
1294
@extend %titlebar;
1296
}
1297
/************
1300
* Pathbars *
1301
************/
1302
%pathbar_button,
1303
.path-bar button {
1304
padding-left: ($medium_size - 24px) / 2;
1305
padding-right: ($medium_size - 24px) / 2;
1306
label:not(:only-child) {
1308
&:first-child { margin-left: 4px; }
1309
&:last-child { margin-right: 4px; }
1311
}
1312
&.slider-button {
1314
padding-left: (24px - 16px) / 2;
1315
padding-right: (24px - 16px) / 2;
1316
}
1317
:not(headerbar) & {
1319
@extend %flat_button;
1320
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1322
$primary_color 0%,
1323
transparent 0%)
1324
0 0 0 / 0 0 0px;
1325
border-radius: 2px;
1326
&:checked {
1328
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1329
$primary_color 100%,
1330
transparent 0%)
1331
0 0 2 / 0 0 2px;
1332
&, &:disabled { background-color: transparent; }
1334
}
1335
}
1336
}
1337
/**************
1340
* Tree Views *
1341
**************/
1342
treeview.view {
1343
@at-root * {
1344
-GtkTreeView-horizontal-separator: 4;
1345
-GtkTreeView-grid-line-width: 1;
1346
-GtkTreeView-grid-line-pattern: '';
1347
-GtkTreeView-tree-line-width: 1;
1348
-GtkTreeView-tree-line-pattern: '';
1349
-GtkTreeView-expander-size: 16;
1350
}
1351
border-left-color: $track_color; // this is actually the tree lines color,
1353
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1354
&:selected { border-left-color: $inverse_track_color; }
1356
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1358
&:hover, &:active, &:selected { border-radius: 0; }
1360
&.separator {
1362
min-height: 1px + 2px * 2;
1363
color: $border_color;
1364
}
1365
&:drop(active) {
1367
border-style: solid none;
1368
border-width: 1px;
1369
border-color: $accent_color;
1370
&.after { border-top-style: none; }
1372
&.before { border-bottom-style: none; }
1374
}
1375
&.expander {
1377
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1378
-gtk-icon-transform: rotate(-90deg);
1379
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1381
&:checked { -gtk-icon-transform: unset; }
1383
color: $secondary_fg_color;
1385
&:hover, &:active { color: $fg_color; }
1387
&:disabled { color: $disabled_secondary_fg_color; }
1389
&:selected {
1391
color: $inverse_secondary_fg_color;
1392
&:hover, &:active { color: $inverse_fg_color; }
1394
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1396
}
1397
}
1398
&.progressbar { // progress bar in treeviews
1400
border-bottom: $bar_size solid $primary_color;
1401
box-shadow: none;
1402
background-color: transparent;
1403
&:selected { border-bottom-color: $inverse_fg_color; }
1405
}
1406
&.trough { // progress bar trough in treeviews
1408
border-bottom: $bar_size solid rgba($primary_color, $lower_opacity);
1409
box-shadow: none;
1410
background-color: transparent;
1411
&:selected { border-bottom-color: $inverse_track_color; }
1413
}
1414
header {
1416
button {
1417
@extend row.activatable;
1418
padding: 2px 6px;
1420
border-style: none solid solid none;
1421
border-width: 1px;
1422
border-color: $border_color;
1423
border-radius: 0;
1424
background-clip: border-box;
1425
&, &:hover, &:active { box-shadow: none; }
1427
&, &:disabled { background-color: $base_color; }
1429
&:last-child { border-right-style: none; }
1431
}
1432
}
1433
button.dnd,
1435
header.button.dnd { // for treeview-like derive widgets
1436
padding: 2px 6px;
1437
border-style: none solid solid;
1438
border-width: 1px;
1439
border-color: $border_color;
1440
border-radius: 0;
1441
box-shadow: none;
1442
background-color: $base_color;
1443
background-clip: border-box;
1444
color: $primary_color;
1445
}
1446
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1448
}
1449
/*********
1452
* Menus *
1453
*********/
1454
menubar,
1455
.menubar {
1456
-GtkWidget-window-dragging: true;
1457
padding: 0;
1458
// box-shadow: inset 0 -1px $border_color;
1459
background-color: $titlebar_bg_color;
1460
> menuitem {
1462
transition: $shorter_transition;
1463
min-height: 20px;
1464
padding: 4px 8px;
1465
color: $titlebar_secondary_fg_color;
1466
&:hover { // Seems like it :hover even with keyboard focus
1468
transition: none;
1469
background-color: $titlebar_divider_color;
1470
color: $titlebar_fg_color;
1471
}
1472
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1474
label:disabled { color: inherit; } // to inherit the above color
1476
}
1477
}
1478
.csd.popup { background-color: transparent; }
1480
menu,
1482
.menu,
1483
.context-menu {
1484
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1485
padding: 4px 0;
1486
box-shadow: inset 0 1px $highlight_color;
1487
background-color: $base_color;
1488
border: 1px solid $border_color; // adds borders in a non composited env
1489
.csd & {
1491
border: none; // axes borders in a composited env
1492
border-radius: 2px;
1493
}
1494
menuitem {
1496
transition: background-color $shorter_duration $deceleration_curve;
1497
min-height: 20px;
1498
min-width: 40px;
1499
padding: 4px 8px;
1500
font: initial;
1501
text-shadow: none;
1502
&:hover {
1504
transition: none;
1505
background-color: $divider_color;
1506
}
1507
&:disabled { color: $disabled_fg_color; }
1509
// submenu indicators
1511
arrow {
1512
min-height: 16px;
1513
min-width: 16px;
1514
&:dir(ltr) {
1516
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1517
margin-left: 8px;
1518
}
1519
&:dir(rtl) {
1521
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1522
margin-right: 8px;
1523
}
1524
}
1525
// avoids labels color being overridden, see
1527
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1528
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1529
}
1530
// overflow arrows
1532
> arrow {
1533
min-height: 16px;
1534
min-width: 16px;
1535
padding: 4px;
1536
background-color: $base_color;
1537
color: $secondary_fg_color;
1538
&.top {
1540
margin-top: -4px;
1541
border-bottom: 1px solid $border_color;
1542
border-radius: 2px 2px 0 0;
1543
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1544
}
1545
&.bottom {
1547
margin-bottom: -4px * 3;
1548
border-top: 1px solid $border_color;
1549
border-radius: 0 0 2px 2px;
1550
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1551
}
1552
&:hover {
1554
background-image: image($divider_color);
1555
color: $fg_color;
1556
}
1557
&:disabled {
1559
border-color: transparent;
1560
background-color: transparent;
1561
color: transparent;
1562
// color: $disabled_secondary_fg_color;
1563
}
1564
}
1565
separator { margin: 4px 0; }
1567
}
1568
menuitem {
1570
accelerator { color: $secondary_fg_color; }
1571
}
1572
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1574
// Electron/Atom render all translucent colors in opaque colors.
1575
// It's a very critical issue for this theme and should be fixed by upstream...
1576
.popup:not(.csd) menu {
1577
menuitem {
1578
color: $opaque_fg_color;
1579
&:hover { background-color: $opaque_divider_color; }
1581
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1583
}
1584
// FIXME: not working this
1586
accelerator { color: $opaque_secondary_fg_color; }
1587
}
1588
/************
1591
* Popovers *
1592
************/
1593
popover.background {
1594
transition: $shadow_transition;
1595
padding: 2px;
1596
box-shadow: $shadow_2; // TODO: this should really have a highlight
1597
background-color: $lighter_bg_color;
1598
&:backdrop { box-shadow: $shadow_1; }
1600
&, .csd & {
1602
border-style: solid;
1603
border-width: 1px;
1604
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1605
border-radius: 2px + 1px;
1606
}
1607
> stack { margin: -4px; } // remove extra padding from menu style popovers
1609
> toolbar { margin: -2px; }
1611
> list,
1613
> .view,
1614
> toolbar {
1615
border-style: none;
1616
box-shadow: none;
1617
background-color: transparent;
1618
}
1619
&.touch-selection,
1621
&.magnifier,
1622
&.osd { @extend %osd; }
1623
// entry { @extend %entry.flat; }
1625
// button.combo { @extend %combo_flat; }
1627
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1629
&.menu button,
1631
button.model {
1632
@extend %simple_flat_button;
1633
min-height: 32px;
1635
padding: 0 8px;
1636
border-radius: 2px;
1637
&:checked { @extend %selected_items; }
1639
}
1640
separator { margin: 4px 0; }
1642
list separator { margin: 0; }
1644
}
1645
/*************
1647
* Notebooks *
1648
*************/
1649
notebook {
1650
> header {
1651
border-width: 1px;
1652
border-color: $border_color;
1653
background-color: $bg_color;
1654
background-clip: border-box;
1655
&.top {
1657
border-bottom-style: solid;
1658
> tabs {
1659
margin-bottom: -1px;
1660
> tab {
1661
&:hover { box-shadow: inset 0 -2px $track_color; }
1663
&:checked { box-shadow: inset 0 -2px $primary_color; }
1665
}
1666
}
1667
}
1668
&.bottom {
1670
border-top-style: solid;
1671
> tabs {
1672
margin-top: -1px;
1673
> tab {
1674
&:hover { box-shadow: inset 0 2px $track_color; }
1676
&:checked { box-shadow: inset 0 2px $primary_color; }
1678
}
1679
}
1680
}
1681
&.left {
1683
border-right-style: solid;
1684
> tabs {
1685
margin-right: -1px;
1686
> tab {
1687
&:hover { box-shadow: inset -2px 0 $track_color; }
1689
&:checked { box-shadow: inset -2px 0 $primary_color; }
1691
}
1692
}
1693
}
1694
&.right {
1696
border-left-style: solid;
1697
> tabs {
1698
margin-left: -1px;
1699
> tab {
1700
&:hover { box-shadow: inset 2px 0 $track_color; }
1702
&:checked { box-shadow: inset 2px 0 $primary_color; }
1704
}
1705
}
1706
}
1707
&.top > tabs > arrow {
1709
@extend %notebook_vert_arrows;
1710
border-top-style: none;
1712
}
1713
&.bottom > tabs > arrow {
1715
@extend %notebook_vert_arrows;
1716
border-bottom-style: none;
1718
}
1719
@at-root %notebook_vert_arrows {
1721
padding-left: 4px;
1722
padding-right: 4px;
1723
&.down {
1725
margin-left: -8px;
1726
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1727
}
1728
&.up {
1730
margin-right: -8px;
1731
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1732
}
1733
}
1734
&.left > tabs > arrow {
1736
@extend %notebook_horz_arrows;
1737
border-left-style: none;
1739
}
1740
&.right > tabs > arrow {
1742
@extend %notebook_horz_arrows;
1743
border-right-style: none;
1745
}
1746
@at-root %notebook_horz_arrows {
1748
padding-top: 4px;
1749
padding-bottom: 4px;
1750
&.down {
1752
margin-top: -8px;
1753
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1754
}
1755
&.up {
1757
margin-bottom: -8px;
1758
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1759
}
1760
}
1761
> tabs > arrow {
1763
@extend %simple_flat_button;
1764
min-height: 16px;
1766
min-width: 16px;
1767
border-radius: 0;
1768
}
1769
tab {
1771
transition: $longer_transition,
1772
background-size 0,
1773
background-image 0;
1774
min-height: $small_size;
1775
min-width: $small_size;
1776
padding: $container_padding 12px;
1777
outline-offset: -6px;
1779
border-width: 1px; // for reorderable tabs
1781
border-color: transparent; //
1782
background-image: radial-gradient(circle farthest-corner at center,
1784
$primary_color 10%,
1785
transparent 0%);
1786
background-repeat: no-repeat;
1787
background-position: center;
1788
background-size: 0% 0%;
1789
color: $secondary_fg_color;
1791
font-weight: 500;
1792
&:hover {
1794
color: $fg_color;
1795
&.reorderable-page {
1797
border-color: $border_color;
1798
background-color: $alt_base_color;
1799
}
1800
}
1801
&:disabled { color: $disabled_secondary_fg_color; }
1803
&:checked {
1805
transition: $longer_transition,
1806
background-size $longer_duration $deceleration_curve,
1807
background-image $longer_duration + $ripple_duration $deceleration_curve;
1808
background-image: radial-gradient(circle farthest-corner at center,
1809
transparent 10%,
1810
transparent 0%);
1811
background-size: 1000% 1000%;
1812
color: $fg_color;
1813
&:disabled { color: $disabled_fg_color; }
1815
&.reorderable-page {
1817
border-color: $border_color;
1818
background-color: $base_color;
1819
}
1820
}
1821
// colors the button like the label, overridden otherwise
1823
button.flat {
1824
@extend %small_button;
1825
&:last-child {
1827
margin-left: $container_padding;
1828
margin-right: $container_padding - 12px;
1829
}
1830
&:first-child {
1832
margin-left: $container_padding - 12px;
1833
margin-right: $container_padding;
1834
}
1835
}
1836
}
1837
&.top,
1839
&.bottom {
1840
tabs {
1841
padding-left: 8px;
1842
padding-right: 8px;
1843
&:not(:only-child) {
1845
&:first-child { margin-left: 0; }
1846
&:last-child { margin-right: 0; }
1847
}
1848
tab {
1850
&.reorderable-page {
1851
margin: 0 -1px;
1852
border-style: none solid;
1853
}
1854
}
1855
}
1856
}
1857
&.left,
1859
&.right {
1860
tabs {
1861
padding-top: 8px;
1862
padding-bottom: 8px;
1863
&:not(:only-child) {
1865
&:first-child { margin-top: 0; }
1866
&:last-child { margin-bottom: 0; }
1867
}
1868
tab {
1870
&.reorderable-page {
1871
margin: -1px 0;
1872
border-style: solid none;
1873
}
1874
}
1875
}
1876
}
1877
}
1878
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1880
background-color: $base_color;
1881
entry:not(.search),
1883
spinbutton:not(.vertical) { @extend %entry.flat; }
1884
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1886
button.combo { @extend %combo_flat; }
1888
}
1889
}
1890
/**************
1893
* Scrollbars *
1894
**************/
1895
scrollbar {
1896
$_slider_min_length: 24px;
1897
// disable steppers
1899
@at-root * {
1900
-GtkScrollbar-has-backward-stepper: false;
1901
-GtkScrollbar-has-forward-stepper: false;
1902
}
1903
transition: $longer_transition;
1905
background-color: $base_color;
1906
background-clip: $extra_background_clip;
1907
// scrollbar border
1909
&.top { border-bottom: 1px solid $border_color; }
1910
&.bottom { border-top: 1px solid $border_color; }
1911
&.left { border-right: 1px solid $border_color; }
1912
&.right { border-left: 1px solid $border_color; }
1913
// slider
1915
slider {
1916
transition: $shorter_transition, margin 0, border-width 0;
1917
min-width: 8px;
1918
min-height: 8px;
1919
border: 4px solid transparent;
1920
border-radius: $circular_radius;
1921
background-clip: padding-box;
1922
background-color: $hint_fg_color;
1923
&:hover { background-color: $secondary_fg_color; }
1925
&:active { background-color: $fg_color; }
1927
&:disabled { background-color: $disabled_secondary_fg_color; }
1929
}
1930
&.fine-tune {
1932
slider {
1933
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1934
min-width: 4px;
1935
min-height: 4px;
1936
}
1937
&.horizontal slider { margin: 2px 0; }
1939
&.vertical slider { margin: 0 2px; }
1941
}
1942
&.overlay-indicator {
1944
&:not(.dragging):not(.hovering) {
1945
border-color: transparent;
1946
background-color: transparent;
1947
slider {
1949
min-width: 4px;
1950
min-height: 4px;
1951
margin: 4px - 1px;
1952
border: 1px solid rgba($base_color, $lower_opacity);
1953
}
1954
button {
1956
min-width: 4px;
1957
min-height: 4px;
1958
margin: 4px - 1px;
1959
border: 1px solid rgba($base_color, $lower_opacity);
1960
border-radius: $circular_radius;
1961
background-color: $hint_fg_color;
1962
background-clip: padding-box;
1963
-gtk-icon-source: none;
1964
&:disabled { background-color: $disabled_secondary_fg_color; }
1966
}
1967
&.horizontal {
1969
slider { min-width: $_slider_min_length; }
1970
button { min-width: 8px; }
1972
}
1973
&.vertical {
1975
slider { min-height: $_slider_min_length; }
1976
button { min-height: 8px; }
1978
}
1979
}
1980
&.dragging,
1982
&.hovering { background-color: rgba($base_color, $higher_opacity); }
1983
}
1984
&.horizontal slider { min-width: $_slider_min_length; }
1986
&.vertical slider { min-height: $_slider_min_length; }
1988
// button styling
1990
button {
1991
@extend %simple_flat_button;
1992
min-width: 16px;
1994
min-height: 16px;
1995
padding: 0;
1996
border-radius: 0;
1997
}
1998
// button icons
2000
&.vertical {
2001
button {
2002
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2003
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2005
}
2006
}
2007
&.horizontal {
2009
button {
2010
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2011
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2013
}
2014
}
2015
}
2016
/**********
2019
* Switch *
2020
**********/
2021
switch {
2022
transition: $longer_transition;
2023
margin: $container_padding 0;
2024
padding: 0 2px;
2025
border: 5px solid transparent;
2026
border-radius: $circular_radius;
2027
background-color: $track_color;
2028
background-clip: padding-box;
2029
font-size: 0;
2030
&:disabled { background-color: $divider_color; }
2032
&:checked {
2034
background-color: rgba($accent_color, 0.5);
2035
&:disabled { background-color: rgba($accent_color, 0.3); }
2037
}
2038
slider {
2040
transition: $shorter_transition, $shadow_transition;
2041
min-width: 20px;
2042
min-height: 20px;
2043
margin: -3px -2px;
2044
border-radius: $circular_radius;
2045
outline-width: 0;
2046
outline-color: $divider_color;
2047
outline-offset: 0;
2048
-gtk-outline-radius: $circular_radius;
2049
box-shadow: $shadow_1;
2050
background-color: $lighter_bg_color;
2051
}
2052
&:focus slider { outline-width: (48px - 20px) / 2; }
2054
&:hover slider { box-shadow: $shadow_2; }
2056
&:checked slider {
2058
background-color: $accent_color;
2059
outline-color: rgba($accent_color, 0.2);
2060
}
2061
&:disabled slider { background-color: $bg_color; }
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.text-button,
2099
radiobutton.text-button {
2100
// this is for a nice focus on check and radios text
2101
padding: 2px;
2102
outline-offset: 0;
2103
label:not(:only-child) { margin: 0 4px; }
2105
}
2106
$check_radio_size: 40px;
2108
check,
2110
radio {
2111
min-height: 24px;
2112
min-width: 24px;
2113
margin: -($check_radio_size - 24px) / 2;
2114
padding: ($check_radio_size - 24px) / 2;
2115
@extend %simple_flat_button;
2117
@extend %circular_button;
2119
&:checked, &:indeterminate {
2121
color: $accent_color;
2122
&:disabled { color: $disabled_accent_color; }
2124
}
2125
// &:only-child { margin: -12px; }
2127
row:selected &:not(:checked):not(:indeterminate) {
2129
color: $inverse_secondary_fg_color;
2130
&:hover, &:active { color: $inverse_fg_color; }
2132
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2134
}
2135
popover & {
2137
&, &:hover, &:active, &:disabled {
2138
box-shadow: none;
2139
background-image: none;
2140
}
2141
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2143
&.left:dir(rtl) {
2145
margin-left: -12px;
2146
margin-right: -4px;
2147
}
2148
&.right:dir(ltr) {
2150
margin-left: -4px;
2151
margin-right: -12px;
2152
}
2153
}
2154
menu menuitem & {
2156
transition: none;
2157
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2158
padding: 0;
2159
&:dir(ltr) { margin-right: 8px; }
2161
&:dir(rtl) { margin-left: 8px; }
2163
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2165
&, &:hover, &:disabled {
2167
box-shadow: none;
2168
// color: inherit;
2169
}
2170
}
2171
}
2172
%check,
2174
check {
2175
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2176
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2178
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2180
}
2181
%radio,
2183
radio {
2184
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2185
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2187
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2189
border-image-slice: $check_radio_size / 2px;
2191
border-image-width: $check_radio_size / 2;
2192
$radio_indicator: 10px / $check_radio_size / 2;
2194
& {
2196
border-image-source: -gtk-gradient(radial,
2197
center center, 0,
2198
center center, 0.001,
2199
to($accent_color),
2200
to(transparent));
2201
}
2202
&:checked:not(:indeterminate) {
2204
border-image-source: -gtk-gradient(radial,
2205
center center, 0,
2206
center center, $radio_indicator,
2207
to($accent_color),
2208
to(transparent));
2209
}
2210
&:checked:not(:indeterminate):disabled {
2212
border-image-source: -gtk-gradient(radial,
2213
center center, 0,
2214
center center, $radio_indicator,
2215
to($disabled_accent_color),
2216
to(transparent));
2217
}
2218
}
2219
%small_check,
2221
menu menuitem check {
2222
& {
2223
min-height: 16px;
2224
min-width: 16px;
2225
border-radius: 2px;
2226
-gtk-outline-radius: 2px;
2227
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2228
}
2229
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2231
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2233
}
2234
%small_radio,
2236
menu menuitem radio {
2237
& {
2238
min-height: 16px;
2239
min-width: 16px;
2240
border-image: none;
2241
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2242
}
2243
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2245
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2247
}
2248
// ANIMATION:
2250
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2251
// the transformation is set on the active state and it get reset on the checked state.
2252
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2253
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2255
check:not(:checked):indeterminate:active,
2257
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2258
check:not(:checked),
2260
radio:not(:checked) {
2261
& {
2262
transition: $longer_transition,
2263
background-size $ripple_duration $deceleration_curve,
2264
background-image $ripple_duration * 2 $deceleration_curve,
2265
-gtk-icon-transform 0;
2266
}
2267
&:active {
2269
transition: $longer_transition,
2270
background-size 0,
2271
background-image 0,
2272
-gtk-icon-transform 0;
2273
}
2274
menu menuitem & { transition: none; }
2276
}
2277
treeview.view check,
2279
treeview.view radio {
2280
padding: 0;
2281
&:hover {
2283
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2284
&:disabled { box-shadow: none; }
2286
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2288
}
2289
& {
2291
color: $secondary_fg_color;
2292
&:hover, &:active { color: $fg_color; }
2294
&:disabled { color: $disabled_secondary_fg_color; }
2296
&:checked, &:indeterminate { color: $accent_color; }
2298
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2300
}
2301
&:selected {
2303
color: $inverse_secondary_fg_color;
2304
&:hover, &:active { color: $inverse_fg_color; }
2306
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2308
&:checked, &:indeterminate { color: $accent_color; }
2310
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2312
}
2313
}
2314
treeview.view radio:checked {
2316
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2317
border-image: none;
2318
}
2319
/************
2322
* GtkScale *
2323
************/
2324
scale {
2325
// sizing
2326
$_marks_length: 8px;
2327
$_marks_distance: 8px;
2328
$trough_size: 2px;
2330
$slider_size: 24px;
2332
$marks_slider_size: 30px;
2333
$slider_margin: -($slider_size - $trough_size) / 2;
2335
$marks_slider_margin: -($marks_slider_size - $trough_size) - $slider_margin;
2336
$color_slider_margin: -($slider_size) / 2;
2338
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2339
min-height: $medium_size - $slider_size;
2341
min-width: $medium_size - $slider_size;
2342
padding: ($slider_size / 2);
2343
// the slider is inside the trough, so to have make it bigger there's a negative margin
2345
slider {
2346
min-height: $slider_size;
2347
min-width: $slider_size;
2348
margin: $slider_margin;
2349
}
2350
// the backing bit
2352
trough {
2353
transition: $longer_transition;
2354
outline-offset: 2px;
2355
background-color: $track_color;
2356
&:disabled { background-color: $divider_color; }
2358
}
2359
// the colored part of the backing bit
2361
highlight {
2362
transition: $longer_transition;
2363
background-color: $accent_color;
2364
&:disabled { background-color: transparent; }
2366
}
2367
// this is another differently styled part of the backing bit, the most relevant use case is for example
2369
// in media player to indicate how much video stream as been cached
2370
fill {
2371
transition: $longer_transition;
2372
background-color: $track_color;
2373
&:disabled { background-color: transparent; }
2375
}
2376
slider {
2378
transition: all $shorter_duration $standard_curve;
2379
// border-radius: 100%;
2380
// background-color: $accent_color;
2381
background-repeat: no-repeat;
2382
background-position: center;
2383
@each $s, $as in ('', ''),
2385
(':disabled', '-disabled') {
2386
&#{$s} {
2387
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2388
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2390
}
2391
}
2392
background-size: calc(100% - 10px);
2394
&:hover { background-size: calc(100% - 8px); }
2396
&:active { background-size: calc(100% - 6px); }
2398
}
2399
// click-and-hold the slider to activate
2401
&.fine-tune {
2402
// to make the slider shrink in fine-tune mode
2403
slider { background-size: calc(100% - 12px); }
2404
}
2405
marks label,
2407
value { color: $hint_fg_color; }
2408
marks {
2410
color: $track_color;
2411
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2413
(bottom, bottom, top),
2414
(top, left, right),
2415
(bottom, right, left) {
2416
&.#{$marks_class} {
2417
margin-#{$marks_margin}: $_marks_distance;
2418
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2419
}
2420
}
2421
}
2422
&.horizontal {
2424
indicator {
2425
min-height: $_marks_length;
2426
min-width: 1px;
2427
}
2428
}
2429
&.vertical {
2431
indicator {
2432
min-height: 1px;
2433
min-width: $_marks_length;
2434
}
2435
}
2436
// *WARNING* scale with marks madness following
2438
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2440
('vertical', 'vert') {
2441
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2442
('marks-after', 'marks-after:not(.marks-before)') {
2443
&.#{$dir_class}.#{$marks_class} {
2444
slider {
2445
@each $state, $state_infix in ('', ''),
2446
(':disabled', '-disabled') {
2447
&#{$state} {
2448
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2449
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2451
}
2452
}
2453
@if $dir_class == 'horizontal' {
2455
min-height: $marks_slider_size;
2456
min-width: $slider_size;
2457
@if $marks_infix == 'marks-before' {
2459
margin-top: $marks_slider_margin;
2460
background-position: center calc(100% - 5px);
2462
&:hover { background-position: center calc(100% - 4px); }
2464
&:active { background-position: center calc(100% - 3px); }
2466
}
2467
@if $marks_infix == 'marks-after' {
2469
margin-bottom: $marks_slider_margin;
2470
background-position: center calc(5px);
2472
&:hover { background-position: center calc(4px); }
2474
&:active { background-position: center calc(3px); }
2476
}
2477
}
2478
@if $dir_class == 'vertical' {
2480
min-height: $slider_size;
2481
min-width: $marks_slider_size;
2482
@if $marks_infix == 'marks-before' {
2484
margin-left: $marks_slider_margin;
2485
background-position: calc(5px) center;
2487
&:hover { background-position: calc(4px) center; }
2489
&:active { background-position: calc(3px) center; }
2491
}
2492
@if $marks_infix == 'marks-after' {
2494
margin-right: $marks_slider_margin;
2495
background-position: calc(100% - 5px) center;
2497
&:hover { background-position: calc(100% - 4px) center; }
2499
&:active { background-position: calc(100% - 3px) center; }
2501
}
2502
}
2503
}
2504
&.fine-tune slider {
2506
@if $dir_class == 'horizontal' {
2507
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2508
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2510
}
2511
@if $dir_class == 'vertical' {
2513
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2514
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2516
}
2517
}
2518
}
2519
}
2520
}
2521
&.color {
2523
min-height: 0;
2524
min-width: 0;
2525
&.horizontal {
2527
padding: 0 0 12px 0;
2528
slider {
2530
&:dir(ltr), &:dir(rtl) { // specificity bump
2531
margin-bottom: $color_slider_margin;
2532
margin-top: $color_marks_slider_margin;
2533
}
2534
}
2535
}
2536
&.vertical {
2538
&:dir(ltr) {
2539
padding: 0 0 0 12px;
2540
slider {
2542
margin-left: $color_slider_margin;
2543
margin-right: $color_marks_slider_margin;
2544
}
2545
}
2546
&:dir(rtl) {
2548
padding: 0 12px 0 0;
2549
slider {
2551
margin-right: $color_slider_margin;
2552
margin-left: $color_marks_slider_margin;
2553
}
2554
}
2555
}
2556
}
2557
}
2558
/*****************
2561
* Progress bars *
2562
*****************/
2563
progressbar {
2564
// sizing
2565
&.horizontal {
2566
trough,
2567
progress { min-height: $bar_size; }
2568
}
2569
&.vertical {
2571
trough,
2572
progress { min-width: $bar_size; }
2573
}
2574
// FIXME: insensitive state missing and some other state should be set probably
2576
color: $hint_fg_color;
2577
font-size: smaller;
2578
trough { background-color: rgba($primary_color, $lower_opacity); }
2580
progress { background-color: $primary_color; }
2582
&.osd { // progressbar.osd used for epiphany page loading progress
2584
// min-width: $bar_size;
2585
// min-height: $bar_size;
2586
// background-color: transparent;
2587
// trough { background-color: transparent; }
2589
// progress { background-color: $primary_color; }
2591
}
2592
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2594
}
2595
/*************
2598
* Level Bar *
2599
*************/
2600
levelbar {
2601
&.horizontal {
2602
block { min-height: $bar_size; }
2603
&.discrete block {
2605
min-width: $medium_size;
2606
&:not(:last-child) { margin-right: 2px; }
2608
}
2609
}
2610
&.vertical {
2612
block { min-width: $bar_size; }
2613
&.discrete block {
2615
min-height: $medium_size;
2616
&:not(:last-child) { margin-bottom: 2px; }
2618
}
2619
}
2620
// imitate the entry style
2622
trough {
2623
padding: 2px;
2624
border-radius: 2px;
2625
box-shadow: $shadow_1;
2626
background-color: $base_color;
2627
&:disabled { background-color: $alt_base_color; }
2629
}
2630
block {
2632
&.low { background-color: $warning_color; }
2633
&.high,
2635
&:not(.empty) { background-color: $primary_color; }
2636
&.full { background-color: $success_color; }
2638
&.empty { background-color: $divider_color; }
2640
}
2641
}
2642
/****************
2645
* Print dialog *
2646
*****************/
2647
printdialog {
2648
paper {
2649
padding: 0;
2650
border: 1px solid $border_color;
2651
background-color: $base_color;
2652
color: $fg_color;
2653
}
2654
.dialog-action-box { margin: 12px; }
2656
}
2657
/**********
2660
* Frames *
2661
**********/
2662
frame > border,
2663
.frame {
2664
margin: 0;
2665
padding: 0;
2666
border: 1px solid $border_color;
2667
border-radius: 0;
2668
box-shadow: none;
2669
&.flat { border-style: none; }
2671
}
2672
frame.flat > border { @extend .frame.flat; } // for backporting
2674
actionbar > revealer > box {
2676
padding: $container_padding;
2677
border-top: 1px solid $border_color;
2678
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2680
}
2681
scrolledwindow {
2683
viewport.frame { // avoid double borders when viewport inside scrolled window
2684
border-style: none;
2685
}
2686
// This is used when content is touch-dragged past boundaries.
2688
// draws a box on top of the content, the size changes programmatically.
2689
@at-root overshoot {
2690
&.top { @include overshoot(top); }
2691
&.bottom { @include overshoot(bottom); }
2693
&.left { @include overshoot(left); }
2695
&.right { @include overshoot(right); }
2697
}
2698
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2700
@at-root undershoot {
2701
&.top { @include undershoot(top); }
2702
&.bottom { @include undershoot(bottom); }
2704
&.left { @include undershoot(left); }
2706
&.right { @include undershoot(right); }
2708
}
2709
@at-root junction { // the small square between two scrollbars
2711
border-style: solid none none solid;
2712
border-width: 1px;
2713
border-color: $border_color;
2714
background-color: $base_color;
2715
&:dir(rtl) { border-style: solid solid none none; }
2717
}
2718
}
2719
// vbox and hbox separators
2721
separator {
2722
min-width: 1px;
2723
min-height: 1px;
2724
background-color: $border_color;
2725
}
2726
%hide_separators {
2728
min-width: 0;
2729
min-height: 0;
2730
background-color: transparent;
2731
}
2732
/*********
2735
* Lists *
2736
*********/
2737
list {
2738
border-color: $border_color;
2739
background-color: $base_color;
2740
row { padding: 2px; }
2742
}
2743
// FIXME
2745
$row_transition: $longer_transition, background-color 0, color 0;
2746
row {
2748
&.activatable {
2749
transition: $row_transition,
2750
background-size $ripple_duration $deceleration_curve,
2751
background-image $ripple_duration * 2 $deceleration_curve;
2752
box-shadow: inset 0 0 0 9999px transparent;
2753
background-image: radial-gradient(circle farthest-corner at center,
2754
transparent 10%,
2755
transparent 0%);
2756
background-repeat: no-repeat;
2757
background-position: center;
2758
background-size: 1000% 1000%;
2759
&:hover {
2761
transition: $row_transition,
2762
box-shadow 0,
2763
background-size $ripple_duration $deceleration_curve,
2764
background-image $ripple_duration * 2 $deceleration_curve;
2765
box-shadow: inset 0 0 0 9999px $row_fill_color;
2766
}
2767
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2769
&:active {
2770
transition: $row_transition,
2771
background-size 0,
2772
background-image 0;
2773
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2774
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2775
background-image: radial-gradient(circle farthest-corner at center,
2776
$semi_fill_color 10%,
2777
transparent 0%);
2778
background-size: 0% 0%;
2779
}
2780
}
2781
&:selected { @extend %selected_items; }
2783
}
2784
/*********************
2787
* App Notifications *
2788
*********************/
2789
.app-notification {
2790
@extend %osd;
2791
@extend toolbar.osd;
2793
margin: 8px;
2795
button { @extend %button_basic.flat; }
2797
&.frame,
2799
border { border-style: none; }
2800
}
2801
/*************
2804
* Expanders *
2805
*************/
2806
expander {
2807
title > arrow {
2808
transition: all $shorter_duration $standard_curve;
2809
min-width: 16px;
2810
min-height: 16px;
2811
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2812
-gtk-icon-transform: rotate(-90deg);
2813
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2815
&:checked { -gtk-icon-transform: unset; }
2817
color: $secondary_fg_color;
2819
&:hover, &:active { color: $fg_color; }
2821
&:disabled { color: $disabled_secondary_fg_color; }
2823
&:selected {
2825
color: $inverse_secondary_fg_color;
2826
&:hover, &:active { color: $inverse_fg_color; }
2828
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2830
}
2831
}
2832
}
2833
/************
2836
* Calendar *
2837
************/
2838
calendar {
2839
padding: 1px;
2840
border: 1px solid $border_color;
2841
color: $fg_color;
2842
&:disabled { color: $disabled_fg_color; }
2844
&:selected {
2846
@extend %selected_items;
2847
border-radius: 2px + 1px;
2849
}
2850
&.header {
2852
border-style: none none solid;
2853
border-radius: 0;
2854
}
2855
&.button { @extend %simple_flat_button; }
2857
&.highlight {
2859
color: $secondary_fg_color;
2860
font-weight: 500;
2861
}
2862
&:indeterminate { color: $disabled_secondary_fg_color; }
2864
}
2865
/***********
2868
* Dialogs *
2869
***********/
2870
messagedialog { // Message Dialog styling
2871
&.background { background-color: $lighter_bg_color; }
2872
.titlebar {
2874
min-height: $small_size;
2875
border-style: none;
2876
box-shadow: inset 0 1px $highlight_color;
2877
background-color: $lighter_bg_color;
2878
color: $fg_color;
2879
&:backdrop { color: $secondary_fg_color; }
2881
}
2882
&.csd { // rounded bottom border styling for csd version
2884
&.background {
2885
// bigger radius for better antialiasing
2886
border-bottom-left-radius: 2px;
2887
border-bottom-right-radius: 2px;
2888
}
2889
.dialog-action-area button {
2891
padding: 8px 16px;
2892
border-top: 1px solid $border_color;
2893
border-radius: 0;
2894
@extend %simple_flat_button;
2896
&:first-child { border-bottom-left-radius: 2px; }
2898
&:last-child { border-bottom-right-radius: 2px; }
2900
}
2901
}
2902
entry { @extend %entry.flat; }
2904
}
2905
filechooser {
2907
.dialog-action-box { border-top: 1px solid $border_color; }
2908
#pathbarbox {
2910
border-bottom: 1px solid $border_color;
2911
background-color: $bg_color;
2912
}
2913
}
2914
filechooserbutton:drop(active) {
2916
box-shadow: none;
2917
}
2918
/***********
2921
* Sidebar *
2922
***********/
2923
.sidebar {
2924
border-style: none;
2925
background-color: $alt_base_color;
2926
@at-root %sidebar_left,
2928
&:dir(ltr),
2929
&.left,
2930
&.left:dir(rtl) {
2931
border-right: 1px solid $border_color;
2932
border-left-style: none;
2933
}
2934
@at-root %sidebar_right,
2936
&:dir(rtl),
2937
&.right {
2938
border-left: 1px solid $border_color;
2939
border-right-style: none;
2940
}
2941
list { background-color: transparent; }
2943
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2945
}
2946
stacksidebar {
2948
&.sidebar {
2949
&:dir(ltr),
2950
&.left,
2951
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2952
&:dir(rtl),
2954
&.right { list { @extend %sidebar_right; }}
2955
}
2956
row {
2958
padding: 10px 4px;
2959
> label {
2961
padding-left: 6px;
2962
padding-right: 6px;
2963
}
2964
&.needs-attention > label { @extend %needs_attention; }
2966
}
2967
}
2968
/****************
2971
* File chooser *
2972
****************/
2973
// dim the sidebar icons, see bug #786613 for details on this oddity
2974
row {
2975
image.sidebar-icon { color: $secondary_fg_color; }
2976
&:selected image.sidebar-icon { color: $inverse_secondary_fg_color; }
2978
}
2979
placessidebar {
2981
> viewport.frame { border-style: none; }
2982
list { padding: (4px - 3px) 0 4px; }
2984
row {
2986
// Needs overriding of the GtkListBoxRow padding
2987
min-height: 32px;
2988
margin: -1px 0; // Remove unknown margins
2989
padding: 0;
2990
// Using margins/padding directly in the SidebarRow
2992
// will make the animation of the new bookmark row jump
2993
> revealer { padding: 0 12px; }
2994
&:selected { color: $inverse_fg_color; }
2996
&:disabled { color: $disabled_fg_color; }
2998
image.sidebar-icon {
3000
&:dir(ltr) { padding-right: 8px; }
3001
&:dir(rtl) { padding-left: 8px; }
3002
}
3003
label.sidebar-label {
3005
&:dir(ltr) { padding-right: 2px; }
3006
&:dir(rtl) { padding-left: 2px; }
3007
}
3008
@at-root button.sidebar-button {
3010
@extend %simple_flat_button;
3011
@extend %small_button;
3013
row:selected & { @extend %button_selected.flat; }
3015
}
3016
&.sidebar-placeholder-row {
3018
min-height: 2px;
3019
padding: 0 8px;
3020
background-image: image($accent_color);
3021
background-clip: content-box;
3022
}
3023
&.sidebar-new-bookmark-row { color: $accent_color; }
3025
&:drop(active):not(:disabled) {
3027
box-shadow: inset 0 0 0 2px $accent_color;
3028
&:selected {
3030
// background-color: $accent_color;
3031
// color: $inverse_fg_color;
3032
}
3033
}
3034
}
3035
}
3036
placesview {
3038
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3039
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3041
// this selects the "connect to server" label
3043
> actionbar > revealer > box > label {
3044
padding-left: 8px;
3045
padding-right: 8px;
3046
}
3047
}
3048
/*********
3051
* Paned *
3052
*********/
3053
paned {
3054
> separator {
3055
min-width: 1px;
3056
min-height: 1px;
3057
-gtk-icon-source: none; // defeats the ugly default handle decoration
3058
border-style: none; // just to be sure
3059
background-color: transparent;
3060
// workaround, using background istead of a border since the border will get rendered twice (?)
3061
background-image: image($border_color);
3062
background-size: 1px 1px;
3063
background-clip: content-box; // avoids borders image being rendered twice (?)
3064
&.wide {
3066
min-width: 6px;
3067
min-height: 6px;
3068
background-color: $bg_color;
3069
background-image: image($border_color), image($border_color);
3070
background-size: 1px 1px, 1px 1px;
3071
}
3072
}
3073
&.horizontal > separator {
3075
background-repeat: repeat-y;
3076
&:dir(ltr) {
3078
margin: 0 -8px 0 0;
3079
padding: 0 8px 0 0;
3080
background-position: left;
3081
}
3082
&:dir(rtl) {
3084
margin: 0 0 0 -8px;
3085
padding: 0 0 0 8px;
3086
background-position: right;
3087
}
3088
&.wide {
3090
margin: 0;
3091
padding: 0;
3092
background-repeat: repeat-y, repeat-y;
3093
background-position: left, right;
3094
}
3095
}
3096
&.vertical > separator {
3098
margin: 0 0 -8px 0;
3099
padding: 0 0 8px 0;
3100
background-repeat: repeat-x;
3101
background-position: top;
3102
&.wide {
3104
margin: 0;
3105
padding: 0;
3106
background-repeat: repeat-x, repeat-x;
3107
background-position: bottom, top;
3108
}
3109
}
3110
}
3111
/**************
3114
* GtkInfoBar *
3115
**************/
3116
infobar {
3117
border-style: none;
3118
&.info { background-color: $info_bg_color; }
3120
&.question { background-color: $question_bg_color; }
3122
&.warning { background-color: $warning_bg_color; }
3124
&.error { background-color: $error_bg_color; }
3126
&.info,
3128
&.question,
3129
&.warning,
3130
&.error {
3131
> label, & { color: $inverse_fg_color; }
3132
button { @extend %button_selected; }
3134
selection {}
3136
*:link { @extend %link_selected; }
3138
}
3139
}
3140
/************
3143
* Tooltips *
3144
************/
3145
tooltip {
3146
&.background {
3147
// background-color needs to be set this way otherwise it gets drawn twice
3148
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3149
// box-shadow: inset 0 1px $highlight_color;
3150
background-color: rgba($tooltip_bg_color, $higher_opacity);
3151
color: $inverse_fg_color;
3152
}
3153
// @extend %osd;
3155
// padding: 4px; /* not working */
3157
border-radius: 2px;
3158
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3159
&:not(.csd):not(.unity-csd) {
3161
// border: 1px solid $border_color;
3162
// border-radius: 2px + 1px;
3163
// background-clip: $extra_background_clip;
3164
}
3165
// FIXME: we need a border or tooltips vanish on black background.
3167
decoration { background-color: transparent; }
3168
label {
3170
// tooltip label already seems to have 6px margins
3171
min-height: 32px - 6px * 2;
3172
padding: 0 8px - 6px;
3173
}
3174
* {
3176
// workaround for Eclipse.
3177
// do not include any declaration here.
3178
// padding: 0;
3179
// background-color: transparent;
3180
// color: inherit;
3181
}
3182
}
3183
/*****************
3186
* Color Chooser *
3187
*****************/
3188
colorswatch {
3189
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3190
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3191
// applied to the overlay box.
3192
// base color corners rounding
3194
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3195
// sports a bigger radius.
3196
// nth-child is needed by the custom color strip.
3197
&.top {
3199
border-top-left-radius: $material_radius + 0.5px;
3200
border-top-right-radius: $material_radius + 0.5px;
3201
overlay {
3203
border-top-left-radius: $material_radius;
3204
border-top-right-radius: $material_radius;
3205
}
3206
}
3207
&.bottom {
3209
border-bottom-left-radius: $material_radius + 0.5px;
3210
border-bottom-right-radius: $material_radius + 0.5px;
3211
overlay {
3213
border-bottom-left-radius: $material_radius;
3214
border-bottom-right-radius: $material_radius;
3215
}
3216
}
3217
&.left,
3219
&:first-child:not(.top) {
3220
border-top-left-radius: $material_radius + 0.5px;
3221
border-bottom-left-radius: $material_radius + 0.5px;
3222
overlay {
3224
border-top-left-radius: $material_radius;
3225
border-bottom-left-radius: $material_radius;
3226
}
3227
}
3228
&.right,
3230
&:last-child:not(.bottom) {
3231
border-top-right-radius: $material_radius + 0.5px;
3232
border-bottom-right-radius: $material_radius + 0.5px;
3233
overlay {
3235
border-top-right-radius: $material_radius;
3236
border-bottom-right-radius: $material_radius;
3237
}
3238
}
3239
&.dark { color: $light_fg_color; }
3241
&.light { color: $dark_fg_color; }
3243
&:drop(active) {
3245
box-shadow: none;
3246
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $accent_color; }
3248
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $accent_color; }
3250
}
3251
overlay {
3253
transition: $shadow_transition;
3254
box-shadow: $shadow_1;
3255
&:hover { box-shadow: $shadow_2; }
3257
}
3258
&#add-color-button {
3260
border-radius: $material_radius $material_radius 0 0;
3261
color: $light_fg_color;
3262
&:only-child { border-radius: $material_radius; }
3264
overlay {
3266
background-image: linear-gradient(to right,
3267
$error_bg_color 25%,
3268
$warning_bg_color 25%, $warning_bg_color 50%,
3269
$info_bg_color 50%, $info_bg_color 75%,
3270
$question_bg_color 75%);
3271
}
3272
}
3273
&:disabled {
3275
opacity: $disabled_opacity;
3276
overlay { box-shadow: none; }
3278
}
3279
row:selected & {
3281
}
3282
&#editor-color-sample {
3284
border-radius: $material_radius + 0.5px;
3285
overlay { border-radius: $material_radius; }
3287
// overlay:hover { box-shadow: $shadow_1; }
3289
}
3290
}
3291
// colorscale popup
3293
colorchooser .popover.osd {
3294
transition: $shadow_transition;
3295
border-radius: 2px;
3296
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3297
background-color: $base_color;
3298
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3300
spinbutton:not(.vertical) { @extend %entry.flat; }
3302
}
3303
/********
3306
* Misc *
3307
********/
3308
// content view (grid/list)
3309
.content-view {
3310
background-color: $bg_color;
3311
// &:hover { -gtk-icon-effect: highlight; }
3313
rubberband, .rubberband { @extend rubberband; }
3315
}
3316
.scale-popup {
3318
.osd & { @extend %osd; }
3319
.osd & button.flat { // FIXME: quick hack, redo properly
3321
}
3322
button { // +/- buttons on GtkVolumeButton popup
3324
}
3325
}
3326
/**********************
3329
* Window Decorations *
3330
**********************/
3331
decoration {
3332
transition: $shadow_transition;
3333
border-radius: 2px 2px 0 0;
3334
box-shadow: $shadow_4, 0 16px 16px transparent;
3335
// FIXME rationalize shadows
3337
// this is used for the resize cursor area
3339
margin: 8px;
3340
&:backdrop {
3342
// the transparent shadow here is to enforce that the shadow extents don't
3343
// change when we go to backdrop, to prevent jumping windows.
3344
// The biggest shadow should be in the same order then in the active state
3345
// or the jumping will happen during the transition.
3346
box-shadow: $shadow_2, 0 16px 16px transparent;
3347
}
3348
.maximized &,
3350
.fullscreen &,
3351
.tiled &,
3352
.tiled-top &,
3353
.tiled-right &,
3354
.tiled-bottom &,
3355
.tiled-left & { border-radius: 0; }
3356
.popup & { box-shadow: none; }
3358
// server-side decorations as used by mutter
3360
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3361
.csd.popup & {
3363
border-radius: 2px;
3364
box-shadow: $shadow_2;
3365
}
3366
tooltip.csd & {
3368
border-radius: 2px;
3369
box-shadow: none;
3370
}
3371
messagedialog.csd & {
3373
border-radius: 2px;
3374
// box-shadow: $shadow_4, 0 16px 16px transparent;
3375
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3377
}
3378
.solid-csd & {
3380
margin: 0;
3381
// padding: 4px;
3382
border-radius: 0;
3383
box-shadow: none;
3384
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3385
background-color: $titlebar_bg_color;
3386
}
3387
}
3388
// Window Close button
3390
button.titlebutton {
3391
// @extend %simple_flat_button;
3392
@extend %circular_button;
3394
.selection-mode & {
3396
}
3397
}
3398
// catch all extend :)
3401
%selected_items {
3403
background-color: $primary_color;
3404
@at-root %nobg_selected_items, & {
3406
color: $inverse_fg_color;
3407
&:disabled { color: $inverse_disabled_fg_color; }
3409
}
3410
}
3411
.monospace { font-family: monospace; }
3413
/**********************
3416
* Touch Copy & Paste *
3417
**********************/
3418
// touch selection handlebars for the Popover.osd above
3419
cursor-handle {
3420
border-radius: $circular_radius;
3421
background-color: $accent_color;
3422
background-image: none;
3423
&.top:dir(ltr), &.bottom:dir(rtl) {
3425
padding-left: 6px;
3426
border-top-right-radius: 0;
3427
}
3428
&.bottom:dir(ltr), &.top:dir(rtl) {
3430
padding-right: 6px;
3431
border-top-left-radius: 0;
3432
}
3433
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3435
-GtkWidget-text-handle-width: 24;
3436
-GtkWidget-text-handle-height: 30;
3437
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3439
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3440
url('#{$_url}@2.png'));
3441
}
3442
}
3443
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3445
// shortcut window keys
3447
.keycap {
3448
min-width: 28px - 8px * 2;
3449
min-height: 28px - 2px;
3450
margin-top: 2px;
3451
padding-bottom: 2px;
3452
padding-left: 8px;
3453
padding-right: 8px;
3454
border: solid 1px $border_color;
3456
border-radius: 2px + 1px;
3457
box-shadow: inset 0 -2px $border_color;
3458
background-color: $base_color;
3459
color: $fg_color;
3460
font-size: smaller;
3461
}
3462
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3464
transition: $longer_transition;
3465
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3466
caret-color: $accent_color;
3467
}
3468
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3470
stackswitcher button.circular,
3472
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3473
min-width: $medium_size;
3474
min-height: $medium_size;
3475
padding: 0;
3476
}
3477
/*********
3480
* Emoji *
3481
*********/
3482
popover.emoji-picker {
3483
padding: 0;
3484
entry {
3486
border-bottom: 1px solid $border_color;
3487
border-bottom-left-radius: 0;
3488
border-bottom-right-radius: 0;
3489
box-shadow: none;
3490
}
3491
scrolledwindow { border-bottom: 1px solid $border_color; }
3493
}
3494
// mimic tab style
3496
button.emoji-section {
3497
margin-top: -1px;
3498
padding: 0 8px;
3499
min-width: 24px;
3500
min-height: $medium_size;
3501
border-radius: 0;
3502
outline-offset: -6px;
3503
box-shadow: none;
3504
&:hover { box-shadow: inset 0 2px $track_color; }
3506
&:active {
3508
box-shadow: inset 0 2px $primary_color;
3509
background-image: radial-gradient(circle farthest-corner at center,
3510
rgba($primary_color, 0.7) 10%,
3511
transparent 0%);
3512
}
3513
&:checked {
3515
box-shadow: inset 0 2px $primary_color;
3516
background-color: transparent;
3517
}
3518
&:first-child { margin-left: 4px; }
3520
&:last-child { margin-right: 4px; }
3522
}
3523
.emoji {
3525
min-width: 3em;
3526
min-height: 3em;
3527
padding: 0;
3528
// font-size: large;
3529
widget {
3531
transition: $shorter_transition;
3532
&:hover { font-size: larger; }
3534
}
3535
}
3536