ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error_color;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: 4;
21
-GtkDialog-action-area-border: 0;
22
// We use the outline properties to signal the focus properties
24
// to the adwaita engine: using real CSS properties is faster,
25
// and we don't use any outlines for now.
26
outline-style: solid;
28
outline-width: 2px;
29
outline-color: transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: $material_radius;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
notebook:focus tab,
37
*:focus { outline-color: $checked_overlay_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
&:hover { box-shadow: inset 0 0 0 9999px $hover_overlay_color; }
89
&:selected:hover { box-shadow: inset 0 0 0 9999px rgba($primary_color, 0.08); }
91
&:disabled { color: $disabled_fg_color; }
93
&:hover, &:selected { border-radius: $material_radius; }
95
selection,
97
&:selected { @extend %selected_items; }
98
}
99
textview {
101
// FIXME: we need to override background-color to ensure text rendering
102
text { background-color: $base_color; }
103
border {
105
background-color: $alt_base_color;
106
color: $secondary_fg_color; // FIXME: not working
107
}
108
}
109
// iconview { @extend .view; }
111
.rubberband,
113
rubberband {
114
border: 1px solid $alt_primary_color;
115
background-color: rgba($alt_primary_color, 0.3);
116
}
117
flowbox {
119
rubberband { @extend rubberband; }
120
flowboxchild {
122
padding: 4px;
123
border-radius: $material_radius;
124
&:selected { @extend %selected_items; }
126
}
127
}
128
.content-view .tile {
130
// margin: 2px;
131
// padding: 0;
132
// border-radius: 0;
133
// background-color: black;
134
&:selected {
136
background-color: transparent;
137
color: inherit;
138
}
139
}
140
label {
142
caret-color: currentColor; // this shouldn't be needed.
143
&.separator {
145
@extend .dim-label;
146
color: $fg_color;
148
}
149
selection { @extend %selected_items; }
151
&:disabled {
153
color: $disabled_fg_color;
154
// selection { @extend %selected_items:disabled; }
156
headerbar &,
158
tab &,
159
button & { color: inherit; }
160
}
161
}
162
.dim-label { opacity: 0.6; }
164
assistant {
166
.sidebar {
167
padding: 4px 0;
168
// background-color: $base_color;
169
// border-top: 1px solid $border_color;
170
}
171
// &.csd .sidebar { border-top-style: none; }
173
.sidebar label {
175
min-height: $medium_size;
176
padding: 0 12px;
177
color: $disabled_fg_color;
178
font-weight: 500;
179
&.highlight { color: $fg_color; }
181
}
182
}
183
// %osd, .osd { opacity: 0.9; }
185
/*********************
188
* Spinner Animation *
189
*********************/
190
@keyframes spin {
191
to { -gtk-icon-transform: rotate(1turn); }
192
}
193
spinner {
195
background: none;
196
opacity: 0; // non spinning spinner makes no sense
197
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
198
&:checked {
200
opacity: 1;
201
animation: spin 1s linear infinite;
202
&:disabled { opacity: 0.5; }
204
}
205
}
206
/****************
209
* Text Entries *
210
****************/
211
%entry,
212
entry {
213
%entry_basic, & {
214
min-height: $medium_size;
215
padding: 0 8px;
216
border-radius: $material_radius $material_radius 0 0;
217
@include entry(normal);
219
&:focus { @include entry(focus); }
221
&:disabled { @include entry(disabled); }
223
&.flat {
225
min-height: 0;
226
padding: 2px;
227
border-radius: 0;
228
background-color: transparent;
229
}
230
image { // icons inside the entry
232
// @extend %simple_flat_button;
233
// min-height: $small_size;
235
// min-width: $small_size;
236
// border-radius: $circular_radius;
237
// -gtk-outline-radius: $circular_radius;
238
color: $secondary_fg_color;
239
&:hover, &:active { color: $fg_color; }
241
&:disabled { color: $disabled_fg_color; }
243
&.left {
245
margin-left: ($medium_size - 16px) / 2 - 8px;
246
margin-right: 6px;
247
}
248
&.right {
250
margin-left: 6px;
251
margin-right: ($medium_size - 16px) / 2 - 8px;
252
}
253
}
254
undershoot {
256
&.left { @include undershoot(left); }
257
&.right { @include undershoot(right); }
259
}
260
selection { @extend %selected_items; }
262
// entry error and warning style
264
@each $e_type, $e_color in (error, $error_color),
265
(warning, $warning_color) {
266
&.#{$e_type} {
267
@include entry(normal, $e_color);
268
&:focus { @include entry(focus, $e_color); }
270
&:disabled { @include entry(disabled, $e_color); }
272
}
273
}
274
&:drop(active) {
276
// box-shadow: inset 0 0 0 2px $primary_color;
277
}
278
.osd & {
280
}
281
}
282
progress {
284
margin: 2px (2px - 8px);
285
border-bottom: 2px solid $primary_color;
286
background-color: transparent;
287
}
288
// linked entries
290
.linked:not(.vertical) > & { @extend %linked_entry; }
291
// Vertically linked entries
293
.linked.vertical > & { @extend %linked_vertical_entry; }
294
}
295
%entry_raised {
297
border-radius: $material_radius;
298
@include entry(raised-normal);
300
&:focus { @include entry(raised-focus); }
302
&:disabled { @include entry(raised-disabled); }
304
// entry error and warning style
306
@each $e_type, $e_color in (error, $error_color),
307
(warning, $warning_color) {
308
&.#{$e_type} {
309
@include entry(raised-normal, $e_color);
310
&:focus { @include entry(raised-focus, $e_color); }
312
&:disabled { @include entry(raised-disabled, $e_color); }
314
image {
316
color: $inverse_secondary_fg_color;
317
&:hover, &:active { color: $inverse_fg_color; }
319
&:disabled { color: $inverse_disabled_fg_color; }
321
}
322
}
323
}
324
}
325
treeview entry {
327
&.flat, & {
328
background-color: $base_color;
329
&, &:focus {
331
border-image: none;
332
box-shadow: none;
333
}
334
}
335
}
336
.entry-tag {
338
margin: 2px;
339
border-radius: $circular_radius;
340
box-shadow: none;
341
background-color: $divider_color;
342
color: $fg_color;
343
&:hover { background-image: image($divider_color); }
345
// side margins: compensate the entry padding with a negative margin
347
// then the negative margin itself
348
:dir(ltr) & {
349
margin-left: 4px;
350
margin-right: 0;
351
padding-left: 12px;
352
padding-right: 8px;
353
}
354
:dir(rtl) & {
356
margin-left: 0;
357
margin-right: 4px;
358
padding-left: 8px;
359
padding-right: 12px;
360
}
361
// seems any sizing doesn't work
363
&.button {
364
box-shadow: none;
365
background-color: transparent;
366
&:not(:hover):not(:active) { color: $secondary_fg_color; }
368
}
369
}
370
/***********
373
* Buttons *
374
***********/
375
// stuff for .needs-attention
376
@keyframes needs_attention {
377
from {
378
background-image: -gtk-gradient(radial,
379
center center, 0,
380
center center, 0.001,
381
to($primary_color),
382
to(transparent));
383
}
384
to {
386
background-image: -gtk-gradient(radial,
387
center center, 0,
388
center center, 0.5,
389
to($primary_color),
390
to(transparent));
391
}
392
}
393
%button,
395
button {
396
@at-root %button_basic, & {
397
min-height: 24px;
398
min-width: 16px;
399
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
400
border-radius: $material_radius;
401
font-weight: 500;
402
@include button(normal);
404
&:hover { @include button(hover); }
406
&:active { @include button(active); }
408
&:disabled { @include button(disabled); }
410
&:checked { @include button(checked); }
412
&:checked:disabled { @include button(checked-disabled); }
414
@at-root %flat_button, &.flat {
416
@at-root %simple_flat_button, & {
417
@include button(flat-normal);
418
&:hover { @include button(flat-hover); }
420
&:active { @include button(flat-active); }
422
&:disabled { @include button(flat-disabled); }
424
}
425
&:checked { @include button(flat-checked); }
427
&:checked:disabled { @include button(flat-checked-disabled); }
429
}
430
&.text-button {
432
padding-left: 16px;
433
padding-right: 16px;
434
}
435
&.image-button {
437
min-width: 24px;
438
padding: ($medium_size - 24px) / 2;
439
@extend %circular_button;
441
}
442
&.text-button.image-button {
444
border-radius: $material_radius;
445
-gtk-outline-radius: $material_radius;
446
label {
448
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
449
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
451
}
452
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
454
}
455
.linked > & { @extend %linked; }
457
.linked.vertical > & { @extend %linked_vertical; }
459
.linked > &.flat,
461
.linked.vertical > &.flat {
462
border-radius: $material_radius;
463
&.image-button { @extend %circular_button; }
465
&.text-button.image-button {
467
border-radius: $material_radius;
468
-gtk-outline-radius: $material_radius;
469
}
470
}
471
&:drop(active) {
473
// box-shadow: inset 0 0 0 2px $primary_color;
474
}
475
}
476
@at-root %button_selected {
478
&.flat {
479
color: $inverse_secondary_fg_color;
480
&:hover, &:active { color: $inverse_fg_color; }
482
&:disabled { color: $inverse_disabled_secondary_fg_color; }
484
&:checked {
486
background-color: $inverse_track_color;
487
color: $inverse_fg_color;
488
}
489
&:checked:disabled {
491
background-color: $inverse_divider_color;
492
color: $inverse_disabled_fg_color;
493
}
494
}
495
}
496
// big standalone buttons like in Documents pager
498
&.osd {
499
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
500
&.image-button { padding: ($large_size - 24px) / 2; }
502
&:disabled { opacity: 0; }
504
}
505
// overlay / OSD style
507
@at-root %osd_button,
508
.osd & {
509
}
510
// Suggested and Destructive Action buttons
512
@each $b_type, $b_color in (suggested-action, $suggested_color),
513
(destructive-action, $destructive_color) {
514
&.#{$b_type} {
515
background-color: $b_color;
516
color: $inverse_fg_color;
517
&:disabled { @include button(disabled); }
519
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage(0.3)); }
521
&.flat {
523
background-color: transparent;
524
color: $b_color;
525
&:disabled { @include button(flat-disabled); }
527
&:checked { background-color: rgba($b_color, 0.3); }
529
}
530
.osd & {
532
}
533
}
534
}
535
.stack-switcher > & {
537
// to position the needs attention dot, padding is added to the button
538
// child, a label needs just lateral padding while an icon needs vertical
539
// padding added too.
540
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
542
> label {
544
padding-left: 6px; // label padding
545
padding-right: 6px; //
546
}
547
> image {
549
padding-left: 6px; // image padding
550
padding-right: 6px; //
551
padding-top: 3px; //
552
padding-bottom: 3px; //
553
}
554
&.text-button {
556
// compensate text-button paddings
557
padding-left: 16px - 6px;
558
padding-right: 16px - 6px;
559
}
560
&.image-button {
562
// we want image buttons to have a 1:1 aspect ratio, so compensation
563
// of the padding added to the GtkImage is needed
564
padding-left: ($medium_size - 16px) / 2 - 6px;
565
padding-right: ($medium_size - 16px) / 2 - 6px;
566
}
567
&.needs-attention {
569
> label,
570
> image { @extend %needs_attention; }
571
&:checked {
573
> label,
574
> image {
575
animation: none;
576
background-image: none;
577
}
578
}
579
}
580
}
581
// hide separators
583
&.font,
584
&.file { separator { @extend %hide_separators; }}
585
// &.font { > box > box > label { font-weight: bold; }}
587
// inline-toolbar buttons
589
.inline-toolbar & {
590
// @extend %button_basic.flat;
591
&:not(.text-button) { @extend %circular_button; }
593
}
594
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
596
@at-root %circular_button,
598
&.close,
599
&.circular { // The Bloody Circul Button
600
border-radius: $circular_radius;
601
-gtk-outline-radius: $circular_radius;
602
// label { padding: 0; }
604
}
605
@at-root %small_button {
607
min-height: $small_size;
608
min-width: $small_size;
609
padding: 0;
610
border-radius: $circular_radius;
611
-gtk-outline-radius: $circular_radius;
612
}
613
}
614
%needs_attention {
616
animation: needs_attention $longer_duration $deceleration_curve forwards;
617
background-repeat: no-repeat;
618
background-position: right 3px;
619
background-size: 6px 6px;
620
&:dir(rtl) { background-position: left 3px; }
622
}
623
// all the following is for the +|- buttons on inline toolbars, that way
625
// should really be deprecated...
626
.inline-toolbar toolbutton > button { // redefining the button look is
627
// needed since those are flat...
628
}
629
// More inline toolbar buttons
631
toolbar.inline-toolbar toolbutton {
632
// > button.flat { @extend %linked_middle; }
633
// &:first-child > button.flat { @extend %linked:first-child; }
635
// &:last-child > button.flat { @extend %linked:last-child; }
637
// &:only-child > button.flat { @extend %linked:only-child; }
639
}
640
%linked_middle {
642
border-radius: 0;
643
-gtk-outline-radius: $material_radius;
644
}
645
%linked {
647
@extend %linked_middle;
648
&:first-child {
650
border-top-left-radius: $material_radius;
651
border-bottom-left-radius: $material_radius;
652
}
653
&:last-child {
655
border-top-right-radius: $material_radius;
656
border-bottom-right-radius: $material_radius;
657
}
658
&:only-child {
660
border-radius: $material_radius;
661
}
662
}
663
%linked_vertical_middle {
665
border-radius: 0;
666
-gtk-outline-radius: $material_radius;
667
}
668
%linked_vertical {
670
@extend %linked_vertical_middle;
671
&:first-child {
673
border-top-left-radius: $material_radius;
674
border-top-right-radius: $material_radius;
675
}
676
&:last-child {
678
border-bottom-left-radius: $material_radius;
679
border-bottom-right-radius: $material_radius;
680
}
681
&:only-child {
683
border-radius: $material_radius;
684
}
685
}
686
%linked_entry {
688
@extend %linked_middle;
689
&:first-child {
691
border-radius: $material_radius 0 0 0;
692
}
693
&:last-child {
695
border-radius: 0 $material_radius 0 0;
696
}
697
&:only-child {
699
border-radius: $material_radius $material_radius 0 0;
700
}
701
}
702
%linked_vertical_entry {
704
@extend %linked_vertical_middle;
705
&:first-child {
707
border-radius: $material_radius $material_radius 0 0;
708
}
709
&:last-child {
711
border-radius: 0;
712
}
713
&:only-child {
715
border-radius: $material_radius $material_radius 0 0;
716
}
717
}
718
/* menu buttons */
720
modelbutton.flat,
721
.menuitem.button.flat {
722
min-height: $menuitem_size;
723
padding: 0 8px;
724
border-radius: $material_radius;
725
color: inherit;
726
@extend %simple_flat_button;
728
&:selected { @extend %selected_items; }
730
}
731
modelbutton.flat arrow {
733
background: none;
734
&:hover { background: none; }
736
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
738
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
740
}
741
button.color {
743
min-height: $small_size;
744
min-width: $small_size;
745
padding: $container_padding;
746
colorswatch:only-child {
748
// &, overlay { border-radius: 0; }
749
}
750
}
751
/*********
754
* Links *
755
*********/
756
*:link {
757
&, &:hover, &:active { color: $link_color; }
758
&:visited {
760
&, &:hover, &:active { color: $visited_link_color; }
761
}
762
@at-root %link_selected,
764
&:selected,
765
*:selected & { color: $inverse_fg_color; }
766
}
767
button:link,
769
button:visited {
770
@extend *:link;
771
> label { text-decoration-line: underline; }
773
}
774
/*****************
776
* GtkSpinButton *
777
*****************/
778
spinbutton {
779
&:not(.vertical) {
780
// in this horizontal configuration, the whole spinbutton
781
// behaves as the entry, so we extend the entry styling
782
// and nuke the style on the internal entry
783
@extend %entry;
784
padding: 0;
786
entry {
788
min-width: $large_size - 8px * 2;
789
// reset all the other props since the spinbutton node is styled here
790
margin: 0;
791
border-image: none;
792
border-radius: 0;
793
box-shadow: none;
794
background-color: transparent;
795
//
796
// This will help to simplify spinbutton's code, but unfortunatelly
797
// doesn't work properly in :dir(rtl). It needs z-index property.
798
//
799
// min-width: $large_size - 8px;
800
//
801
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
802
//
803
// &:dir(ltr) {
804
// margin-right: -$spinbuttons_width;
805
// padding-right: $spinbuttons_width;
806
// }
807
//
808
// &:dir(rtl) {
809
// margin-left: -$spinbuttons_width;
810
// padding-left: $spinbuttons_width;
811
// }
812
}
813
button {
815
// margin: $container_padding;
816
border: solid $container_padding transparent;
817
@extend %simple_flat_button;
819
@extend %small_button;
821
&.up:dir(ltr),
823
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
824
&.up:dir(rtl),
826
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
827
}
828
}
829
// OSD horizontal
831
.osd &:not(.vertical) {
832
button {
833
}
834
}
835
// Vertical
837
&.vertical {
838
// in the vertical configuration, we treat the spinbutton
839
// as a box, and tweak the style of the entry in the middle
840
// so that it's linked
841
// FIXME: this should not be set at all, but otherwise it gets the wrong
843
// color
844
&:disabled { color: $disabled_fg_color; }
845
&:drop(active) {
847
box-shadow: none;
848
}
849
entry {
851
@extend %entry_raised;
852
min-height: $medium_size;
854
min-width: $large_size;
855
padding: 0;
856
}
857
button {
859
min-height: $medium_size;
860
min-width: $large_size;
861
padding: 0;
862
@extend %simple_flat_button;
864
&.up { border-radius: $material_radius $material_radius 0 0; }
866
&.down { border-radius: 0 0 $material_radius $material_radius; }
868
}
869
}
870
// OSD vertical
872
.osd &.vertical button:first-child {
873
}
874
// Misc
876
treeview &:not(.vertical) {
877
min-height: 0;
878
border-style: none;
879
border-radius: 0;
880
entry {
882
min-height: 0;
883
padding: 1px 2px;
884
}
885
}
886
}
887
/**************
890
* ComboBoxes *
891
**************/
892
combobox {
893
arrow {
894
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
895
min-height: 16px;
896
min-width: 16px;
897
}
898
decoration,
900
button.combo:checked { transition: none; } // workaround for menuitem selection
901
button.combo cellview {
903
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
904
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
905
}
906
#gtk-combobox-popup-menu {
908
padding: 2px 0;
909
menuitem {
911
min-height: $medium_size - 2px * 2;
912
padding: 0 8px;
913
}
914
// overflow arrows
916
> arrow {
917
&.top { margin-top: -2px; }
918
&.bottom {
920
margin-top: 2px * 2;
921
margin-bottom: -2px * 3;
922
}
923
}
924
}
925
&.linked {
927
button:nth-child(2) {
928
&:dir(ltr) { @extend %linked_entry:last-child; }
929
&:dir(rtl) { @extend %linked_entry:first-child; }
930
}
931
}
932
> .linked > button {
934
@extend %linked_middle;
935
&:first-child { @extend %linked_entry:first-child; }
937
&:last-child { @extend %linked_entry:last-child; }
939
&:only-child { @extend %linked_entry:only-child; }
941
}
942
&:drop(active) { // FIXME: untested
944
box-shadow: none;
945
// button.combo { @extend %button_basic:drop(active); }
947
}
948
}
949
// the combo is a composite widget so the way we do button linking doesn't
951
// work, special case needed. See
952
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
953
.linked:not(.vertical) > combobox {
955
> box > button.combo { @extend %linked_middle; }
956
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
958
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
960
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
962
}
963
.linked.vertical > combobox {
965
> box > button.combo { @extend %linked_vertical_middle; }
966
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
968
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
970
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
972
}
973
button.combo {
975
border-radius: $material_radius $material_radius 0 0;
976
background-image: none;
977
font-weight: inherit;
978
@include entry(normal);
980
&:hover { box-shadow: inset 0 -1px $fg_color; }
982
&:checked { @include entry(focus); }
984
&:disabled { @include entry(disabled); }
986
}
987
/************
990
* Toolbars *
991
************/
992
toolbar {
993
-GtkWidget-window-dragging: true;
994
padding: 2px;
995
background-color: $bg_color;
996
button { @extend %button_basic.flat; }
998
// on OSD
1000
.osd & { background-color: transparent; }
1001
// stand-alone OSD toolbars
1003
&.osd {
1004
transition: $shadow_transition;
1005
padding: $container_padding;
1006
border-radius: $material_radius;
1007
box-shadow: $shadow_2, inset 0 1px $highlight_color;
1008
background-color: $surface_color;
1009
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
1011
&.left,
1013
&.right,
1014
&.top,
1015
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
1016
}
1017
// toolbar separators
1019
&.horizontal > separator { margin: 2px; }
1020
&.vertical > separator { margin: 2px; }
1021
&:not(.inline-toolbar):not(.osd) {
1023
scale,
1024
entry,
1025
spinbutton,
1026
button { margin: 2px; }
1027
.linked entry,
1029
.linked spinbutton,
1030
.linked button {
1031
&:not(:first-child) { margin-left: 0; }
1032
&:not(:last-child) { margin-right: 0; }
1033
}
1034
spinbutton {
1036
entry,
1037
button { margin: 0; }
1038
}
1039
switch { margin: 2px + $container_padding 2px; }
1041
}
1042
}
1043
// searchbar, location-bar & inline-toolbar
1045
.inline-toolbar {
1046
padding: $container_padding;
1047
border-style: solid;
1048
border-width: 0 1px 1px;
1049
border-color: $border_color;
1050
background-color: $alt_base_color;
1051
}
1052
searchbar > revealer > box,
1054
.location-bar {
1055
padding: $container_padding;
1056
border-style: solid;
1057
border-width: 0 0 1px;
1058
border-color: $border_color;
1059
background-color: $bg_color;
1060
background-clip: border-box;
1061
}
1062
searchbar > revealer > box {
1064
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1065
margin: -6px;
1066
padding: $container_padding;
1067
}
1068
/***************
1071
* Header bars *
1072
***************/
1073
%titlebar,
1074
headerbar {
1075
transition: background-color $shorter_duration $deceleration_curve, color $shorter_duration $deceleration_curve;
1076
min-height: $large_size;
1077
padding: 0 $container_padding;
1078
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1079
background-color: $titlebar_bg_color;
1080
color: $titlebar_fg_color;
1081
&:disabled { color: $titlebar_disabled_fg_color; }
1083
&:backdrop {
1085
color: $titlebar_secondary_fg_color;
1086
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1088
}
1089
.title {
1091
padding: 0 12px;
1092
font-weight: bold;
1093
}
1094
.subtitle {
1096
padding: 0 12px;
1097
font-size: smaller;
1098
@extend .dim-label;
1100
}
1101
.linked:not(.vertical) > entry:not(.flat) { border-radius: $material_radius; }
1103
button:not(.suggested-action):not(.destructive-action) {
1105
@extend %button_basic.flat;
1106
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1108
$titlebar_indicator_color 0%,
1109
transparent 0%)
1110
0 0 0 / 0 0 0px;
1111
color: $titlebar_secondary_fg_color;
1112
&:hover, &:active { color: $titlebar_fg_color; }
1114
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1116
&:checked {
1118
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1119
$titlebar_indicator_color 100%,
1120
transparent 0%)
1121
0 0 2 / 0 0 2px;
1122
color: $titlebar_fg_color;
1123
&:disabled { color: $titlebar_disabled_fg_color; }
1125
&, &:disabled { background-color: transparent; }
1127
}
1128
&:backdrop {
1130
color: $titlebar_disabled_fg_color;
1131
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1133
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1135
&:checked {
1137
color: $titlebar_secondary_fg_color;
1138
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1140
}
1141
}
1142
}
1143
button.suggested-action, button.destructive-action {
1145
&:disabled {
1146
background-color: $titlebar_fill_color;
1147
color: $titlebar_disabled_fg_color;
1148
}
1149
}
1150
&.selection-mode {
1152
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1153
// but let's keep it for backwards compatibility.
1154
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1155
animation: header_ripple_effect $longer_duration $deceleration_curve;
1156
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1157
background-color: $primary_color;
1158
color: $inverse_fg_color;
1159
&:backdrop {
1161
color: $inverse_secondary_fg_color;
1162
}
1163
.subtitle:link { @extend *:link:selected; }
1165
button:not(.suggested-action):not(.destructive-action) {
1167
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1168
currentColor 0%,
1169
transparent 0%)
1170
0 0 0 / 0 0 0px;
1171
color: $inverse_fg_color;
1172
&:disabled { color: $inverse_disabled_fg_color; }
1174
&:checked {
1176
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1177
currentColor 100%,
1178
transparent 0%)
1179
0 0 2 / 0 0 2px;
1180
color: $inverse_fg_color;
1181
&:disabled { color: $inverse_disabled_fg_color; }
1183
}
1184
&:backdrop {
1186
color: $inverse_secondary_fg_color;
1187
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1189
&:checked {
1191
color: $inverse_secondary_fg_color;
1192
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1194
}
1195
}
1196
}
1197
.selection-menu {
1199
padding-left: 16px;
1200
padding-right: 16px;
1201
arrow { -GtkArrow-arrow-scaling: 1; }
1203
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1205
}
1206
}
1207
// squared corners when the window is maximized, tiled, or fullscreen
1209
.tiled &,
1210
.tiled-top &,
1211
.tiled-right &,
1212
.tiled-bottom &,
1213
.tiled-left &,
1214
.maximized &,
1215
.fullscreen & {
1216
border-radius: 0;
1217
box-shadow: $shadow_1;
1218
}
1219
&.default-decoration {
1221
min-height: $small_size;
1222
padding: $container_padding;
1223
box-shadow: inset 0 1px $titlebar_highlight_color;
1224
.tiled &,
1226
.maximized &,
1227
.fullscreen & { box-shadow: none; }
1228
button.titlebutton {
1230
min-height: $small_size;
1231
min-width: $small_size;
1232
margin: 0;
1233
padding: 0;
1234
}
1235
// workaround for non-animatable buttons
1237
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1238
}
1239
.solid-csd & {
1241
&:dir(rtl), &:dir(ltr) { // specificity bump
1242
// margin-left: -2px;
1243
// margin-right: -2px;
1244
// margin-top: -2px;
1245
// border-radius: 0;
1246
box-shadow: $shadow_1; // Remove highlight as window managers should have it
1247
}
1248
}
1249
}
1250
headerbar {
1252
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1253
entry,
1254
spinbutton,
1255
button {
1256
margin-top: $container_padding;
1257
margin-bottom: $container_padding;
1258
}
1259
separator {
1261
margin-top: $large_size / 4;
1262
margin-bottom: $large_size / 4;
1263
background-color: $titlebar_divider_color;
1264
}
1265
switch {
1267
margin-top: ($large_size - 24px) / 2;
1268
margin-bottom: ($large_size - 24px) / 2;
1269
}
1270
// reset button margins of the spinbutton
1272
spinbutton button {
1273
margin-top: 0;
1274
margin-bottom: 0;
1275
}
1276
// FIXME: This is a hacky workaround.
1278
.entry-tag {
1279
margin-top: 5px;
1280
margin-bottom: 5px;
1281
}
1282
}
1283
.background .titlebar {
1285
border-top-left-radius: $material_radius;
1286
border-top-right-radius: $material_radius;
1287
}
1288
.background.tiled .titlebar,
1290
.background.tiled-top .titlebar,
1291
.background.tiled-right .titlebar,
1292
.background.tiled-bottom .titlebar,
1293
.background.tiled-left .titlebar,
1294
.background.maximized .titlebar,
1295
.background.solid-csd .titlebar {
1296
border-top-left-radius: 0;
1297
border-top-right-radius: 0;
1298
}
1299
headerbar { // headerbar border rounding
1301
window separator:first-child + &, // tackles the paned container case
1302
window &:first-child { border-top-left-radius: $material_radius; }
1303
window &:last-child { border-top-right-radius: $material_radius; }
1305
window stack & { // tackles the stacked headerbars case
1307
&:first-child, &:last-child {
1308
border-top-left-radius: $material_radius;
1309
border-top-right-radius: $material_radius;
1310
}
1311
}
1312
window.tiled &,
1314
window.tiled-top &,
1315
window.tiled-right &,
1316
window.tiled-bottom &,
1317
window.tiled-left &,
1318
window.maximized &,
1319
window.fullscreen &,
1320
window.solid-csd & {
1321
&,
1322
&:first-child,
1323
&:last-child,
1324
&:only-child {
1325
border-top-left-radius: 0;
1326
border-top-right-radius: 0;
1327
}
1328
}
1329
}
1330
.titlebar:not(headerbar) {
1332
window.csd > & {
1333
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1334
padding: 0;
1335
background-color: transparent;
1336
background-image: none;
1337
border-style: none;
1338
box-shadow: none;
1339
}
1340
> separator {
1342
background-color: $titlebar_bg_color;
1343
background-image: image($border_color);
1344
}
1345
@extend %titlebar;
1347
}
1348
/************
1351
* Pathbars *
1352
************/
1353
%pathbar_button,
1354
.path-bar button {
1355
padding-left: ($medium_size - 24px) / 2;
1356
padding-right: ($medium_size - 24px) / 2;
1357
label:not(:only-child) {
1359
&:first-child { margin-left: 4px; }
1360
&:last-child { margin-right: 4px; }
1362
}
1363
&.slider-button {
1365
padding-left: (24px - 16px) / 2;
1366
padding-right: (24px - 16px) / 2;
1367
}
1368
:not(headerbar) & {
1370
@extend %flat_button;
1371
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1373
$primary_color 0%,
1374
transparent 0%)
1375
0 0 0 / 0 0 0px;
1376
border-radius: $material_radius;
1377
&:checked {
1379
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1380
$primary_color 100%,
1381
transparent 0%)
1382
0 0 2 / 0 0 2px;
1383
&, &:disabled { background-color: transparent; }
1385
}
1386
}
1387
}
1388
/**************
1391
* Tree Views *
1392
**************/
1393
treeview.view {
1394
@at-root * {
1395
-GtkTreeView-horizontal-separator: 4;
1396
-GtkTreeView-grid-line-width: 1;
1397
-GtkTreeView-grid-line-pattern: '';
1398
-GtkTreeView-tree-line-width: 1;
1399
-GtkTreeView-tree-line-pattern: '';
1400
-GtkTreeView-expander-size: 16;
1401
}
1402
border-left-color: $track_color; // this is actually the tree lines color,
1404
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1405
// FIXME: Avoid transparency background-color being slightly darker
1407
&:selected {
1408
background-color: $base_color;
1409
background-image: image($selected_overlay_color);
1410
}
1411
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1413
&:hover, &:selected { border-radius: 0; }
1415
&.separator {
1417
min-height: 1px + 2px * 2;
1418
color: $border_color;
1419
}
1420
&:drop(active) {
1422
border-style: solid none;
1423
border-width: 1px;
1424
border-color: $primary_color;
1425
&.after { border-top-style: none; }
1427
&.before { border-bottom-style: none; }
1429
}
1430
&.expander {
1432
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1433
-gtk-icon-transform: rotate(-90deg);
1434
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1436
&:checked { -gtk-icon-transform: unset; }
1438
color: $secondary_fg_color;
1440
&:hover, &:active { color: $fg_color; }
1442
&:disabled { color: $disabled_secondary_fg_color; }
1444
}
1445
&.progressbar { // progress bar in treeviews
1447
border-bottom: $bar_size solid $primary_color;
1448
box-shadow: none;
1449
background-color: transparent;
1450
}
1451
&.trough { // progress bar trough in treeviews
1453
border-bottom: $bar_size solid $divider_color;
1454
box-shadow: none;
1455
background-color: transparent;
1456
}
1457
header {
1459
button {
1460
@extend row.activatable;
1461
padding: 2px 6px;
1463
border-style: none solid solid none;
1464
border-width: 1px;
1465
border-color: $border_color;
1466
border-radius: 0;
1467
background-clip: border-box;
1468
&:not(:hover):not(:active) { color: $secondary_fg_color; }
1470
&, &:hover, &:active { box-shadow: none; }
1472
&, &:disabled { background-color: $base_color; }
1474
&:last-child { border-right-style: none; }
1476
}
1477
}
1478
button.dnd,
1480
header.button.dnd { // for treeview-like derive widgets
1481
padding: 2px 6px;
1482
border-style: none solid solid;
1483
border-width: 1px;
1484
border-color: $border_color;
1485
border-radius: 0;
1486
box-shadow: none;
1487
background-color: $base_color;
1488
background-clip: border-box;
1489
color: $primary_color;
1490
}
1491
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1493
}
1494
/*********
1497
* Menus *
1498
*********/
1499
menubar,
1500
.menubar {
1501
-GtkWidget-window-dragging: true;
1502
padding: 0;
1503
// box-shadow: inset 0 -1px $border_color;
1504
background-color: $titlebar_bg_color;
1505
> menuitem {
1507
transition: $shorter_transition;
1508
min-height: 20px;
1509
padding: 4px 8px;
1510
color: $titlebar_secondary_fg_color;
1511
&:hover { // Seems like it :hover even with keyboard focus
1513
transition: none;
1514
background-color: $titlebar_divider_color;
1515
color: $titlebar_fg_color;
1516
}
1517
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1519
label:disabled { color: inherit; } // to inherit the above color
1521
}
1522
}
1523
.csd.popup { background-color: transparent; }
1525
menu,
1527
.menu,
1528
.context-menu {
1529
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1530
padding: 4px 0;
1531
box-shadow: inset 0 1px $highlight_color;
1532
background-color: $surface_color;
1533
border: 1px solid $border_color; // adds borders in a non composited env
1534
.csd & {
1536
border: none; // axes borders in a composited env
1537
border-radius: $material_radius;
1538
}
1539
menuitem {
1541
transition: background-color $shorter_duration $deceleration_curve;
1542
min-height: 20px;
1543
min-width: 40px;
1544
padding: 4px 8px;
1545
font: initial;
1546
text-shadow: none;
1547
&:hover {
1549
transition: none;
1550
background-color: $divider_color;
1551
}
1552
&:disabled { color: $disabled_fg_color; }
1554
// submenu indicators
1556
arrow {
1557
min-height: 16px;
1558
min-width: 16px;
1559
&:dir(ltr) {
1561
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1562
margin-left: 8px;
1563
}
1564
&:dir(rtl) {
1566
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1567
margin-right: 8px;
1568
}
1569
}
1570
// avoids labels color being overridden, see
1572
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1573
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1574
}
1575
// overflow arrows
1577
> arrow {
1578
min-height: 16px;
1579
min-width: 16px;
1580
padding: 4px;
1581
background-color: $surface_color;
1582
color: $secondary_fg_color;
1583
&.top {
1585
margin-top: -4px;
1586
border-bottom: 1px solid $border_color;
1587
border-radius: $material_radius $material_radius 0 0;
1588
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1589
}
1590
&.bottom {
1592
margin-top: 4px * 2;
1593
margin-bottom: -4px * 3;
1594
border-top: 1px solid $border_color;
1595
border-radius: 0 0 $material_radius $material_radius;
1596
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1597
}
1598
&:hover {
1600
background-image: image($divider_color);
1601
color: $fg_color;
1602
}
1603
&:disabled {
1605
border-color: transparent;
1606
background-color: transparent;
1607
color: transparent;
1608
// color: $disabled_secondary_fg_color;
1609
}
1610
}
1611
separator { margin: 4px 0; }
1613
}
1614
menuitem {
1616
accelerator { color: $secondary_fg_color; }
1617
&:disabled accelerator { color: $disabled_secondary_fg_color; }
1619
}
1620
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1622
// Electron/Atom render all translucent colors in opaque colors.
1623
// It's a very critical issue for this theme and should be fixed by upstream...
1624
.popup:not(.csd) menu {
1625
menuitem {
1626
color: $opaque_fg_color;
1627
&:hover { background-color: $opaque_divider_color; }
1629
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1631
}
1632
// FIXME: not working this
1634
accelerator { color: $opaque_secondary_fg_color; }
1635
}
1636
/************
1639
* Popovers *
1640
************/
1641
popover.background {
1642
transition: $shadow_transition;
1643
padding: 2px;
1644
box-shadow: $shadow_2; // TODO: this should really have a highlight
1645
background-color: $surface_color;
1646
&:backdrop { box-shadow: $shadow_1; }
1648
&, .csd & {
1650
border-style: solid;
1651
border-width: 1px;
1652
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1653
border-radius: $material_radius + 1px;
1654
}
1655
> stack { margin: -4px; } // remove extra padding from menu style popovers
1657
> toolbar { margin: -2px; }
1659
> list,
1661
> .view,
1662
> toolbar {
1663
border-style: none;
1664
box-shadow: none;
1665
background-color: transparent;
1666
}
1667
// FIXME: Use the popover color instead of transparent as a workaround for .view
1669
list,
1670
.view:not(:selected),
1671
toolbar { background-color: $surface_color; }
1672
// &.touch-selection,
1674
// &.magnifier,
1675
// &.osd { @extend %osd; }
1676
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1678
&.menu button,
1680
button.model {
1681
@extend %simple_flat_button;
1682
min-height: 32px;
1684
padding: 0 8px;
1685
border-radius: $material_radius;
1686
&:checked { @extend %selected_items; }
1688
}
1689
separator { margin: 4px 0; }
1691
list separator { margin: 0; }
1693
}
1694
/*************
1696
* Notebooks *
1697
*************/
1698
notebook {
1699
frame > paned > & > header,
1700
&.frame > header { background-color: $alt_base_color; }
1701
&:focus tab:checked {
1703
box-shadow: inset 0 0 0 9999px rgba($primary_color, 0.12);
1704
outline: none;
1705
}
1706
> header {
1708
border-width: 1px;
1709
border-color: $border_color;
1710
background-color: $bg_color;
1711
background-clip: border-box;
1712
&.top {
1714
border-bottom-style: solid;
1715
> tabs {
1717
margin-bottom: -1px;
1718
> tab {
1720
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1721
&:checked { border-image-source: linear-gradient(to top, $primary_color 2px, $border_color 2px); }
1723
&.reorderable-page { border-image-width: 0 1px 2px; }
1725
}
1726
}
1727
}
1728
&.bottom {
1730
border-top-style: solid;
1731
> tabs {
1733
margin-top: -1px;
1734
> tab {
1736
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1737
&:checked { border-image-source: linear-gradient(to bottom, $primary_color 2px, $border_color 2px); }
1739
&.reorderable-page { border-image-width: 2px 1px 0; }
1741
}
1742
}
1743
}
1744
&.left {
1746
border-right-style: solid;
1747
> tabs {
1749
margin-right: -1px;
1750
> tab {
1752
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1753
&:checked { border-image-source: linear-gradient(to left, $primary_color 2px, $border_color 2px); }
1755
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1757
}
1758
}
1759
}
1760
&.right {
1762
border-left-style: solid;
1763
> tabs {
1765
margin-left: -1px;
1766
> tab {
1768
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1769
&:checked { border-image-source: linear-gradient(to right, $primary_color 2px, $border_color 2px); }
1771
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1773
}
1774
}
1775
}
1776
&.top > tabs > arrow {
1778
@extend %notebook_vert_arrows;
1779
border-top-style: none;
1781
}
1782
&.bottom > tabs > arrow {
1784
@extend %notebook_vert_arrows;
1785
border-bottom-style: none;
1787
}
1788
@at-root %notebook_vert_arrows {
1790
padding-left: 4px;
1791
padding-right: 4px;
1792
&.down {
1794
margin-left: -8px;
1795
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1796
}
1797
&.up {
1799
margin-right: -8px;
1800
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1801
}
1802
}
1803
&.left > tabs > arrow {
1805
@extend %notebook_horz_arrows;
1806
border-left-style: none;
1808
}
1809
&.right > tabs > arrow {
1811
@extend %notebook_horz_arrows;
1812
border-right-style: none;
1814
}
1815
@at-root %notebook_horz_arrows {
1817
padding-top: 4px;
1818
padding-bottom: 4px;
1819
&.down {
1821
margin-top: -8px;
1822
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1823
}
1824
&.up {
1826
margin-bottom: -8px;
1827
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1828
}
1829
}
1830
> tabs > arrow {
1832
@extend %simple_flat_button;
1833
min-height: 16px;
1835
min-width: 16px;
1836
border-radius: 0;
1837
}
1838
tab {
1840
transition: $shorter_transition,
1841
background-size 0,
1842
background-image 0;
1843
min-height: $small_size;
1844
min-width: $small_size;
1845
padding: $container_padding 12px;
1846
outline-offset: -6px;
1848
border-width: 1px; // for reorderable tabs
1850
border-color: transparent; //
1851
background-image: radial-gradient(circle farthest-corner at center,
1853
$primary_color 10%,
1854
transparent 0%);
1855
background-repeat: no-repeat;
1856
background-position: center;
1857
background-size: 0% 0%;
1858
background-clip: border-box;
1859
color: $secondary_fg_color;
1861
font-weight: 500;
1862
&:hover {
1864
background-color: $hover_overlay_color;
1865
color: $fg_color;
1866
}
1867
&:disabled { color: $disabled_secondary_fg_color; }
1869
&:checked {
1871
transition: $shorter_transition,
1872
background-size $longer_duration $deceleration_curve,
1873
background-image $longer_duration + $ripple_duration $deceleration_curve;
1874
background-color: transparent;
1875
background-image: radial-gradient(circle farthest-corner at center,
1876
transparent 10%,
1877
transparent 0%);
1878
background-size: 1000% 1000%;
1879
background-clip: padding-box;
1880
color: $fg_color;
1881
&:disabled { color: $disabled_fg_color; }
1883
&.reorderable-page {
1885
border-color: $border_color;
1886
background-color: $base_color;
1887
}
1888
}
1889
// colors the button like the label, overridden otherwise
1891
button.flat {
1892
@extend %small_button;
1893
&:last-child {
1895
margin-left: $container_padding;
1896
margin-right: $container_padding - 12px;
1897
}
1898
&:first-child {
1900
margin-left: $container_padding - 12px;
1901
margin-right: $container_padding;
1902
}
1903
}
1904
}
1905
&.top,
1907
&.bottom {
1908
tabs {
1909
padding-left: 8px;
1910
padding-right: 8px;
1911
&:not(:only-child) {
1913
&:first-child { margin-left: 0; }
1914
&:last-child { margin-right: 0; }
1916
}
1917
tab.reorderable-page { border-style: none solid; }
1919
}
1920
}
1921
&.left,
1923
&.right {
1924
tabs {
1925
padding-top: 8px;
1926
padding-bottom: 8px;
1927
&:not(:only-child) {
1929
&:first-child { margin-top: 0; }
1930
&:last-child { margin-bottom: 0; }
1932
}
1933
tab.reorderable-page { border-style: solid none; }
1935
}
1936
}
1937
}
1938
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1940
background-color: $base_color;
1941
}
1942
}
1943
/**************
1946
* Scrollbars *
1947
**************/
1948
scrollbar {
1949
$_slider_min_length: 24px;
1950
// disable steppers
1952
@at-root * {
1953
-GtkScrollbar-has-backward-stepper: false;
1954
-GtkScrollbar-has-forward-stepper: false;
1955
}
1956
transition: $shorter_transition;
1958
background-color: $base_color;
1959
background-clip: $extra_background_clip;
1960
// scrollbar border
1962
&.top { border-bottom: 1px solid $border_color; }
1963
&.bottom { border-top: 1px solid $border_color; }
1964
&.left { border-right: 1px solid $border_color; }
1965
&.right { border-left: 1px solid $border_color; }
1966
// slider
1968
slider {
1969
transition: $shorter_transition, margin 0, border-width 0;
1970
min-width: 8px;
1971
min-height: 8px;
1972
border: 4px solid transparent;
1973
border-radius: $circular_radius;
1974
background-clip: padding-box;
1975
background-color: $disabled_fg_color;
1976
&:hover { background-color: $secondary_fg_color; }
1978
&:active { background-color: $fg_color; }
1980
&:disabled { background-color: $disabled_secondary_fg_color; }
1982
}
1983
&.fine-tune {
1985
slider {
1986
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1987
min-width: 4px;
1988
min-height: 4px;
1989
}
1990
&.horizontal slider { margin: 2px 0; }
1992
&.vertical slider { margin: 0 2px; }
1994
}
1995
&.overlay-indicator {
1997
&:not(.dragging):not(.hovering) {
1998
border-color: transparent;
1999
background-color: transparent;
2000
slider {
2002
min-width: 4px;
2003
min-height: 4px;
2004
margin: 4px - 1px;
2005
border: 1px solid rgba($base_color, 0.3);
2006
}
2007
button {
2009
min-width: 4px;
2010
min-height: 4px;
2011
margin: 4px - 1px;
2012
border: 1px solid rgba($base_color, 0.3);
2013
border-radius: $circular_radius;
2014
background-color: $disabled_fg_color;
2015
background-clip: padding-box;
2016
-gtk-icon-source: none;
2017
&:disabled { background-color: $disabled_secondary_fg_color; }
2019
}
2020
&.horizontal {
2022
slider { min-width: $_slider_min_length; }
2023
button { min-width: 8px; }
2025
}
2026
&.vertical {
2028
slider { min-height: $_slider_min_length; }
2029
button { min-height: 8px; }
2031
}
2032
}
2033
&.dragging,
2035
&.hovering { background-color: rgba($base_color, 0.9); }
2036
}
2037
&.horizontal slider { min-width: $_slider_min_length; }
2039
&.vertical slider { min-height: $_slider_min_length; }
2041
// button styling
2043
button {
2044
@extend %simple_flat_button;
2045
min-width: 16px;
2047
min-height: 16px;
2048
padding: 0;
2049
border-radius: 0;
2050
}
2051
// button icons
2053
&.vertical {
2054
button {
2055
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2056
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2058
}
2059
}
2060
&.horizontal {
2062
button {
2063
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2064
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2066
}
2067
}
2068
}
2069
/**********
2072
* Switch *
2073
**********/
2074
switch {
2075
transition: all $shorter_duration $deceleration_curve;
2076
margin: $container_padding 0;
2077
padding: 0 2px;
2078
border: 5px solid transparent;
2079
border-radius: $circular_radius;
2080
background-color: $track_color;
2081
background-clip: padding-box;
2082
font-size: 0;
2083
&:checked { background-color: rgba($primary_color, 0.5); }
2085
&:disabled { opacity: 0.5; }
2087
slider {
2089
transition: all $shorter_duration $deceleration_curve;
2090
min-width: 20px;
2091
min-height: 20px;
2092
margin: -3px -2px;
2093
border-radius: $circular_radius;
2094
box-shadow: 0 0 0 10px transparent, $shadow_1;
2095
background-color: $surface_color;
2096
}
2097
&:hover slider { box-shadow: 0 0 0 10px $hover_overlay_color, $shadow_1; }
2099
&:focus slider { box-shadow: 0 0 0 10px $focus_overlay_color, $shadow_1; }
2101
&:focus:hover slider { box-shadow: 0 0 0 10px $hover_focus_overlay_color, $shadow_1; }
2103
&:checked slider {
2105
background-color: $primary_color;
2106
color: $primary_color;
2107
}
2108
row:selected & {
2110
}
2111
}
2112
/*************************
2115
* Check and Radio items *
2116
*************************/
2117
// draw regular check and radio items using our PNG assets
2118
// all assets are rendered from assets.svg. never add pngs directly
2119
// selection-mode
2121
.view.content-view.check:not(list),
2122
.content-view .tile check:not(list) {
2123
min-height: 40px;
2124
min-width: 40px;
2125
margin: 0;
2126
padding: 0;
2127
box-shadow: none;
2128
background-color: transparent;
2129
background-image: none;
2130
-gtk-icon-shadow: $shadow_1;
2131
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2133
@each $s, $as in ('', '-unchecked'),
2135
(':checked', '-checked') {
2136
&#{$s} {
2137
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2138
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2139
}
2140
}
2141
}
2142
checkbutton,
2144
radiobutton {
2145
outline: none;
2146
}
2147
checkbutton.text-button,
2149
radiobutton.text-button {
2150
// this is for a nice focus on check and radios text
2151
padding: 2px;
2152
label:not(:only-child) { margin: 0 4px; }
2154
}
2155
$check_radio_size: 40px;
2157
check,
2159
radio {
2160
min-height: 24px;
2161
min-width: 24px;
2162
margin: -($check_radio_size - 24px) / 2;
2163
padding: ($check_radio_size - 24px) / 2;
2164
@extend %simple_flat_button;
2166
@extend %circular_button;
2168
&:hover { box-shadow: inset 0 0 0 9999px $hover_overlay_color; }
2170
&:focus { box-shadow: inset 0 0 0 9999px $focus_overlay_color; }
2172
&:focus:hover { box-shadow: inset 0 0 0 9999px $hover_focus_overlay_color; }
2174
&:checked, &:indeterminate {
2176
color: $primary_color;
2177
&:disabled { color: $disabled_secondary_fg_color; }
2179
}
2180
// &:only-child { margin: -12px; }
2182
popover & {
2184
&, &:hover, &:focus, &:focus:hover, &:active, &:disabled {
2185
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2186
box-shadow: none;
2187
background-image: none;
2188
}
2189
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2191
&.left:dir(rtl) {
2193
margin-left: -12px;
2194
margin-right: -4px;
2195
}
2196
&.right:dir(ltr) {
2198
margin-left: -4px;
2199
margin-right: -12px;
2200
}
2201
}
2202
menu menuitem & {
2204
transition: none;
2205
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2206
padding: 0;
2207
&:dir(ltr) { margin-right: 8px; }
2209
&:dir(rtl) { margin-left: 8px; }
2211
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2213
&, &:hover, &:disabled {
2215
box-shadow: none;
2216
// color: inherit;
2217
}
2218
}
2219
}
2220
%check,
2222
check {
2223
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2224
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2226
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2228
}
2229
%radio,
2231
radio {
2232
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2233
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2235
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2237
border-image-slice: $check_radio_size / 2px;
2239
border-image-width: $check_radio_size / 2;
2240
$radio_indicator: 10px / $check_radio_size / 2;
2242
& {
2244
border-image-source: -gtk-gradient(radial,
2245
center center, 0,
2246
center center, 0.001,
2247
to($primary_color),
2248
to(transparent));
2249
}
2250
&:checked:not(:indeterminate) {
2252
border-image-source: -gtk-gradient(radial,
2253
center center, 0,
2254
center center, $radio_indicator,
2255
to($primary_color),
2256
to(transparent));
2257
}
2258
&:checked:not(:indeterminate):disabled {
2260
border-image-source: -gtk-gradient(radial,
2261
center center, 0,
2262
center center, $radio_indicator,
2263
to($disabled_secondary_fg_color),
2264
to(transparent));
2265
}
2266
}
2267
%small_check,
2269
menu menuitem check {
2270
& {
2271
min-height: 16px;
2272
min-width: 16px;
2273
border-radius: $material_radius;
2274
-gtk-outline-radius: $material_radius;
2275
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2276
}
2277
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2279
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2281
}
2282
%small_radio,
2284
menu menuitem radio {
2285
& {
2286
min-height: 16px;
2287
min-width: 16px;
2288
border-image: none;
2289
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2290
}
2291
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2293
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2295
}
2296
// ANIMATION:
2298
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2299
// the transformation is set on the active state and it get reset on the checked state.
2300
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2301
treeview.view check,
2303
treeview.view radio {
2304
padding: 0;
2305
&:hover, &:selected {
2307
box-shadow: none;
2308
background-color: transparent;
2309
}
2310
& {
2312
color: $secondary_fg_color;
2313
&:hover, &:active { color: $fg_color; }
2315
&:disabled { color: $disabled_secondary_fg_color; }
2317
&:checked, &:indeterminate { color: $primary_color; }
2319
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_fg_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 $shorter_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 $shorter_duration $deceleration_curve;
2393
background-color: $primary_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 $shorter_duration $deceleration_curve;
2402
background-color: $track_color;
2403
&:disabled { background-color: transparent; }
2405
}
2406
slider {
2408
transition: background-color $shorter_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
&:hover { background-color: rgba($primary_color, 0.08); }
2430
&:focus { background-color: rgba($primary_color, 0.12); }
2432
&:focus:hover { background-color: rgba($primary_color, 0.16); }
2434
&:active {
2436
transition: background-color $shorter_duration $deceleration_curve,
2437
background-size 0,
2438
background-image 0;
2439
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
2440
background-size: auto, 0% 0%;
2441
background-color: rgba($primary_color, 0.08);
2442
color: rgba($primary_color, 0.12);
2443
}
2444
}
2445
marks label,
2447
value { color: $secondary_fg_color; }
2448
marks {
2450
color: $track_color;
2451
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2453
(bottom, bottom, top),
2454
(left, left, right),
2455
(right, right, left) {
2456
&.#{$marks_class} {
2457
margin-#{$marks_margin}: $_marks_distance;
2458
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2459
}
2460
}
2461
}
2462
&.fine-tune marks {
2464
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2465
(bottom, bottom, top),
2466
(left, left, right),
2467
(right, right, left) {
2468
&.#{$marks_class} {
2469
margin-#{$marks_margin}: $_marks_distance - 1px;
2470
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2471
}
2472
}
2473
}
2474
&.horizontal {
2476
indicator {
2477
min-height: $_marks_length;
2478
min-width: 1px;
2479
}
2480
}
2481
&.vertical {
2483
indicator {
2484
min-height: 1px;
2485
min-width: $_marks_length;
2486
}
2487
}
2488
// *WARNING* scale with marks madness following
2490
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2492
('vertical', 'vert') {
2493
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2494
('marks-after', 'marks-after:not(.marks-before)') {
2495
&.#{$dir_class}.#{$marks_class} {
2496
slider {
2497
@each $state, $state_infix in ('', ''),
2498
(':disabled', '-disabled') {
2499
&#{$state} {
2500
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2501
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2503
radial-gradient(circle farthest-corner at center,
2504
currentColor 10%,
2505
transparent 0%);
2506
}
2507
}
2508
}
2509
}
2510
}
2511
}
2512
&.color {
2514
min-height: 0;
2515
min-width: 0;
2516
&.horizontal {
2518
padding: 0 0 12px 0;
2519
slider {
2521
&:dir(ltr), &:dir(rtl) { // specificity bump
2522
margin-bottom: $color_slider_margin;
2523
margin-top: $color_marks_slider_margin;
2524
}
2525
}
2526
}
2527
&.vertical {
2529
&:dir(ltr) {
2530
padding: 0 0 0 12px;
2531
slider {
2533
margin-left: $color_slider_margin;
2534
margin-right: $color_marks_slider_margin;
2535
}
2536
}
2537
&:dir(rtl) {
2539
padding: 0 12px 0 0;
2540
slider {
2542
margin-right: $color_slider_margin;
2543
margin-left: $color_marks_slider_margin;
2544
}
2545
}
2546
}
2547
}
2548
}
2549
/*****************
2552
* Progress bars *
2553
*****************/
2554
progressbar {
2555
// sizing
2556
&.horizontal {
2557
trough,
2558
progress { min-height: $bar_size; }
2559
}
2560
&.vertical {
2562
trough,
2563
progress { min-width: $bar_size; }
2564
}
2565
// FIXME: insensitive state missing and some other state should be set probably
2567
color: $secondary_fg_color;
2568
font-size: smaller;
2569
trough { background-color: $divider_color; }
2571
progress { background-color: $primary_color; }
2573
&.osd { // progressbar.osd used for epiphany page loading progress
2575
// min-width: $bar_size;
2576
// min-height: $bar_size;
2577
// background-color: transparent;
2578
// trough { background-color: transparent; }
2580
// progress { background-color: $primary_color; }
2582
}
2583
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2585
}
2586
/*************
2589
* Level Bar *
2590
*************/
2591
levelbar {
2592
&.horizontal {
2593
block { min-height: $bar_size; }
2594
&.discrete block {
2596
min-width: $medium_size;
2597
&:not(:last-child) { margin-right: 2px; }
2599
}
2600
}
2601
&.vertical {
2603
block { min-width: $bar_size; }
2604
&.discrete block {
2606
min-height: $medium_size;
2607
&:not(:last-child) { margin-bottom: 2px; }
2609
}
2610
}
2611
// imitate the entry style
2613
trough {
2614
// padding: 2px;
2615
// border-radius: $material_radius;
2616
// box-shadow: $shadow_1;
2617
// background-color: $base_color;
2618
// &:disabled { background-color: $alt_base_color; }
2620
}
2621
block {
2623
&.low { background-color: $warning_color; }
2624
&.high,
2626
&:not(.empty) { background-color: $primary_color; }
2627
&.full { background-color: $success_color; }
2629
&.empty { background-color: $divider_color; }
2631
}
2632
}
2633
/****************
2636
* Print dialog *
2637
*****************/
2638
printdialog {
2639
paper {
2640
padding: 0;
2641
border: 1px solid $border_color;
2642
background-color: $base_color;
2643
color: $fg_color;
2644
}
2645
.dialog-action-box { margin: 12px; }
2647
}
2648
/**********
2651
* Frames *
2652
**********/
2653
frame > border,
2654
.frame {
2655
margin: 0;
2656
padding: 0;
2657
border: 1px solid $border_color;
2658
border-radius: 0;
2659
box-shadow: none;
2660
&.flat { border-style: none; }
2662
}
2663
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2665
actionbar > revealer > box {
2667
padding: $container_padding;
2668
border-top: 1px solid $border_color;
2669
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2671
}
2672
scrolledwindow {
2674
viewport.frame { // avoid double borders when viewport inside scrolled window
2675
border-style: none;
2676
}
2677
// This is used when content is touch-dragged past boundaries.
2679
// draws a box on top of the content, the size changes programmatically.
2680
@at-root overshoot {
2681
&.top { @include overshoot(top); }
2682
&.bottom { @include overshoot(bottom); }
2684
&.left { @include overshoot(left); }
2686
&.right { @include overshoot(right); }
2688
}
2689
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2691
@at-root undershoot {
2692
&.top { @include undershoot(top); }
2693
&.bottom { @include undershoot(bottom); }
2695
&.left { @include undershoot(left); }
2697
&.right { @include undershoot(right); }
2699
}
2700
@at-root junction { // the small square between two scrollbars
2702
border-style: solid none none solid;
2703
border-width: 1px;
2704
border-color: $border_color;
2705
background-color: $base_color;
2706
&:dir(rtl) { border-style: solid solid none none; }
2708
}
2709
}
2710
// vbox and hbox separators
2712
separator {
2713
min-width: 1px;
2714
min-height: 1px;
2715
background-color: $border_color;
2716
}
2717
%hide_separators {
2719
min-width: 0;
2720
min-height: 0;
2721
background-color: transparent;
2722
}
2723
/*********
2726
* Lists *
2727
*********/
2728
list {
2729
border-color: $border_color;
2730
background-color: $base_color;
2731
row { padding: 2px; }
2733
}
2734
row {
2736
&.activatable {
2737
transition: $shorter_transition,
2738
background-size $ripple_duration $deceleration_curve,
2739
background-image $ripple_opacity_duration $deceleration_curve;
2740
box-shadow: inset 0 0 0 9999px transparent;
2741
background-image: radial-gradient(circle farthest-corner at center,
2742
transparent 10%,
2743
transparent 0%);
2744
background-repeat: no-repeat;
2745
background-position: center;
2746
background-size: 1000% 1000%;
2747
&:hover {
2749
transition: $shorter_transition,
2750
box-shadow 0,
2751
background-size $ripple_duration $deceleration_curve,
2752
background-image $ripple_opacity_duration $deceleration_curve;
2753
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2754
}
2755
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2757
&:active {
2758
transition: $shorter_transition,
2759
background-size 0,
2760
background-image 0;
2761
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2762
box-shadow: inset 0 0 0 9999px $hover_overlay_color;
2763
background-image: radial-gradient(circle farthest-corner at center,
2764
$active_overlay_color 10%,
2765
transparent 0%);
2766
background-size: 0% 0%;
2767
}
2768
}
2769
&:selected {
2771
@extend %selected_items;
2772
color: $primary_color; // for overlays
2773
image,
2775
label { color: $fg_color; }
2776
button image,
2778
button label { color: inherit; }
2779
}
2780
}
2781
/*********************
2784
* App Notifications *
2785
*********************/
2786
.app-notification {
2787
// @extend %osd;
2788
@extend toolbar.osd;
2790
margin: 8px;
2792
button { @extend %button_basic.flat; }
2794
&.frame,
2796
border { border-style: none; }
2797
}
2798
/*************
2801
* Expanders *
2802
*************/
2803
expander {
2804
title > arrow {
2805
transition: all $shorter_duration $deceleration_curve;
2806
min-width: 16px;
2807
min-height: 16px;
2808
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2809
-gtk-icon-transform: rotate(-90deg);
2810
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2812
&:checked { -gtk-icon-transform: unset; }
2814
color: $secondary_fg_color;
2816
&:hover, &:active { color: $fg_color; }
2818
&:disabled { color: $disabled_secondary_fg_color; }
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: $material_radius + 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: $surface_color; }
2861
.titlebar {
2863
min-height: $small_size;
2864
border-style: none;
2865
box-shadow: inset 0 1px $highlight_color;
2866
background-color: $surface_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: $material_radius;
2876
border-bottom-right-radius: $material_radius;
2877
}
2878
.dialog-action-area {
2880
margin-top: -$container_padding;
2881
padding: $container_padding;
2882
button {
2884
@extend %simple_flat_button;
2885
border-radius: $material_radius;
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
}
2896
filechooser {
2898
.dialog-action-box { border-top: 1px solid $border_color; }
2899
#pathbarbox {
2901
border-bottom: 1px solid $border_color;
2902
background-color: $bg_color;
2903
> stack > box > button { // The new folder button
2905
@extend %button_basic.flat;
2906
@extend %circular_button;
2907
}
2908
}
2909
}
2910
filechooserbutton:drop(active) {
2912
box-shadow: none;
2913
}
2914
/***********
2917
* Sidebar *
2918
***********/
2919
.sidebar {
2920
border-style: none;
2921
background-color: $alt_base_color;
2922
@at-root %sidebar_left,
2924
&:dir(ltr),
2925
&.left,
2926
&.left:dir(rtl) {
2927
border-right: 1px solid $border_color;
2928
border-left-style: none;
2929
}
2930
@at-root %sidebar_right,
2932
&:dir(rtl),
2933
&.right {
2934
border-left: 1px solid $border_color;
2935
border-right-style: none;
2936
}
2937
list { background-color: transparent; }
2939
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2941
}
2942
stacksidebar {
2944
&.sidebar {
2945
&:dir(ltr),
2946
&.left,
2947
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2948
&:dir(rtl),
2950
&.right { list { @extend %sidebar_right; }}
2951
}
2952
row {
2954
padding: 10px 4px;
2955
> label {
2957
padding-left: 6px;
2958
padding-right: 6px;
2959
}
2960
&.needs-attention > label { @extend %needs_attention; }
2962
}
2963
}
2964
/****************
2967
* File chooser *
2968
****************/
2969
// dim the sidebar icons, see bug #786613 for details on this oddity
2970
row {
2971
image.sidebar-icon { color: $secondary_fg_color; }
2972
}
2973
placessidebar {
2975
> viewport.frame { border-style: none; }
2976
list { padding: (4px - 3px) 0 4px; }
2978
row {
2980
// Needs overriding of the GtkListBoxRow padding
2981
min-height: 32px;
2982
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
2983
padding: 0;
2984
border-radius: $material_radius;
2985
// Using margins/padding directly in the SidebarRow
2987
// will make the animation of the new bookmark row jump
2988
> revealer { padding: 0 8px; }
2989
&:selected { font-weight: 500; }
2991
&:disabled { color: $disabled_fg_color; }
2993
image.sidebar-icon {
2995
&:dir(ltr) { padding-right: 8px; }
2996
&:dir(rtl) { padding-left: 8px; }
2997
}
2998
label.sidebar-label {
3000
&:dir(ltr) { padding-right: 2px; }
3001
&:dir(rtl) { padding-left: 2px; }
3002
}
3003
&:selected image.sidebar-icon,
3005
&:selected label.sidebar-label { color: inherit; }
3006
@at-root button.sidebar-button {
3008
@extend %simple_flat_button;
3009
@extend %small_button;
3010
}
3011
&.sidebar-placeholder-row {
3013
min-height: 2px;
3014
padding: 0 8px;
3015
background-image: image($primary_color);
3016
background-clip: content-box;
3017
}
3018
&.sidebar-new-bookmark-row { color: $primary_color; }
3020
&:drop(active):not(:disabled) {
3022
box-shadow: inset 0 0 0 2px $primary_color;
3023
}
3024
}
3025
}
3026
placesview {
3028
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3029
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3031
// this selects the "connect to server" label
3033
> actionbar > revealer > box > label {
3034
padding-left: 8px;
3035
padding-right: 8px;
3036
}
3037
}
3038
/*********
3041
* Paned *
3042
*********/
3043
paned {
3044
> separator {
3045
min-width: 1px;
3046
min-height: 1px;
3047
-gtk-icon-source: none; // defeats the ugly default handle decoration
3048
border-style: none; // just to be sure
3049
background-color: transparent;
3050
// workaround, using background istead of a border since the border will get rendered twice (?)
3051
background-image: image($border_color);
3052
background-size: 1px 1px;
3053
background-clip: content-box; // avoids borders image being rendered twice (?)
3054
&.wide {
3056
min-width: 6px;
3057
min-height: 6px;
3058
background-color: $bg_color;
3059
background-image: image($border_color), image($border_color);
3060
background-size: 1px 1px, 1px 1px;
3061
}
3062
}
3063
&.horizontal > separator {
3065
background-repeat: repeat-y;
3066
&:dir(ltr) {
3068
margin: 0 -8px 0 0;
3069
padding: 0 8px 0 0;
3070
background-position: left;
3071
}
3072
&:dir(rtl) {
3074
margin: 0 0 0 -8px;
3075
padding: 0 0 0 8px;
3076
background-position: right;
3077
}
3078
&.wide {
3080
margin: 0;
3081
padding: 0;
3082
background-repeat: repeat-y, repeat-y;
3083
background-position: left, right;
3084
}
3085
}
3086
&.vertical > separator {
3088
margin: 0 0 -8px 0;
3089
padding: 0 0 8px 0;
3090
background-repeat: repeat-x;
3091
background-position: top;
3092
&.wide {
3094
margin: 0;
3095
padding: 0;
3096
background-repeat: repeat-x, repeat-x;
3097
background-position: bottom, top;
3098
}
3099
}
3100
}
3101
/**************
3104
* GtkInfoBar *
3105
**************/
3106
infobar {
3107
border-style: none;
3108
&.info { background-color: $info_bg_color; }
3110
&.question { background-color: $question_bg_color; }
3112
&.warning { background-color: $warning_bg_color; }
3114
&.error { background-color: $error_bg_color; }
3116
&.info,
3118
&.question,
3119
&.warning,
3120
&.error {
3121
> label, & { color: $inverse_fg_color; }
3122
button { @extend %button_selected; }
3124
selection {}
3126
*:link { @extend %link_selected; }
3128
}
3129
}
3130
/************
3133
* Tooltips *
3134
************/
3135
tooltip {
3136
&.background {
3137
// background-color needs to be set this way otherwise it gets drawn twice
3138
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3139
// box-shadow: inset 0 1px $highlight_color;
3140
background-color: $tooltip_bg_color;
3141
color: $tooltip_fg_color;
3142
}
3143
// padding: 4px; /* not working */
3145
border-radius: $material_radius;
3146
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3147
&:not(.csd):not(.unity-csd) {
3149
// border: 1px solid $border_color;
3150
// border-radius: $material_radius + 1px;
3151
// background-clip: $extra_background_clip;
3152
}
3153
// FIXME: we need a border or tooltips vanish on black background.
3155
decoration { background-color: transparent; }
3156
label {
3158
// tooltip label already seems to have 6px margins
3159
min-height: 32px - 6px * 2;
3160
padding: 0 8px - 6px;
3161
}
3162
* {
3164
// workaround for Eclipse.
3165
// do not include any declaration here.
3166
// padding: 0;
3167
// background-color: transparent;
3168
// color: inherit;
3169
}
3170
}
3171
/*****************
3174
* Color Chooser *
3175
*****************/
3176
colorswatch {
3177
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3178
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3179
// applied to the overlay box.
3180
// base color corners rounding
3182
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3183
// sports a bigger radius.
3184
// nth-child is needed by the custom color strip.
3185
&.top {
3187
border-top-left-radius: $material_radius + 0.5px;
3188
border-top-right-radius: $material_radius + 0.5px;
3189
overlay {
3191
border-top-left-radius: $material_radius;
3192
border-top-right-radius: $material_radius;
3193
}
3194
}
3195
&.bottom {
3197
border-bottom-left-radius: $material_radius + 0.5px;
3198
border-bottom-right-radius: $material_radius + 0.5px;
3199
overlay {
3201
border-bottom-left-radius: $material_radius;
3202
border-bottom-right-radius: $material_radius;
3203
}
3204
}
3205
&.left,
3207
&:first-child:not(.top) {
3208
border-top-left-radius: $material_radius + 0.5px;
3209
border-bottom-left-radius: $material_radius + 0.5px;
3210
overlay {
3212
border-top-left-radius: $material_radius;
3213
border-bottom-left-radius: $material_radius;
3214
}
3215
}
3216
&.right,
3218
&:last-child:not(.bottom) {
3219
border-top-right-radius: $material_radius + 0.5px;
3220
border-bottom-right-radius: $material_radius + 0.5px;
3221
overlay {
3223
border-top-right-radius: $material_radius;
3224
border-bottom-right-radius: $material_radius;
3225
}
3226
}
3227
&.dark { color: $light_fg_color; }
3229
&.light { color: $dark_fg_color; }
3231
&:drop(active) {
3233
box-shadow: none;
3234
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3236
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $primary_color; }
3238
}
3239
overlay {
3241
transition: $shadow_transition;
3242
box-shadow: $shadow_1;
3243
&:hover { box-shadow: $shadow_2; }
3245
}
3246
&#add-color-button {
3248
border-radius: $material_radius $material_radius 0 0;
3249
color: $light_fg_color;
3250
&:only-child { border-radius: $material_radius; }
3252
overlay {
3254
background-image: linear-gradient(to right,
3255
$error_bg_color 25%,
3256
$warning_bg_color 25%, $warning_bg_color 50%,
3257
$info_bg_color 50%, $info_bg_color 75%,
3258
$question_bg_color 75%);
3259
}
3260
}
3261
&:disabled {
3263
opacity: 0.5;
3264
overlay { box-shadow: none; }
3266
}
3267
row:selected & {
3269
}
3270
&#editor-color-sample {
3272
border-radius: $material_radius + 0.5px;
3273
overlay { border-radius: $material_radius; }
3275
// overlay:hover { box-shadow: $shadow_1; }
3277
}
3278
}
3279
// colorscale popup
3281
colorchooser .popover.osd {
3282
transition: $shadow_transition;
3283
border-radius: $material_radius;
3284
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3285
background-color: $surface_color;
3286
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3288
}
3289
/********
3292
* Misc *
3293
********/
3294
// content view (grid/list)
3295
.content-view {
3296
background-color: $bg_color;
3297
// &:hover { -gtk-icon-effect: highlight; }
3299
rubberband, .rubberband { @extend rubberband; }
3301
}
3302
.scale-popup {
3304
// .osd & { @extend %osd; }
3305
.osd & button.flat { // FIXME: quick hack, redo properly
3307
}
3308
button { // +/- buttons on GtkVolumeButton popup
3310
}
3311
}
3312
/**********************
3315
* Window Decorations *
3316
**********************/
3317
decoration {
3318
transition: $shadow_transition;
3319
border-radius: $material_radius $material_radius 0 0;
3320
box-shadow: $shadow_4, 0 16px 16px transparent;
3321
// FIXME rationalize shadows
3323
// this is used for the resize cursor area
3325
margin: 8px;
3326
&:backdrop {
3328
// the transparent shadow here is to enforce that the shadow extents don't
3329
// change when we go to backdrop, to prevent jumping windows.
3330
// The biggest shadow should be in the same order then in the active state
3331
// or the jumping will happen during the transition.
3332
box-shadow: $shadow_2, 0 16px 16px transparent;
3333
}
3334
.maximized &,
3336
.fullscreen &,
3337
.tiled &,
3338
.tiled-top &,
3339
.tiled-right &,
3340
.tiled-bottom &,
3341
.tiled-left & { border-radius: 0; }
3342
.popup & { box-shadow: none; }
3344
// server-side decorations as used by mutter
3346
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3347
.csd.popup & {
3349
border-radius: $material_radius;
3350
box-shadow: $shadow_2;
3351
}
3352
tooltip.csd & {
3354
border-radius: $material_radius;
3355
box-shadow: none;
3356
}
3357
messagedialog.csd & {
3359
border-radius: $material_radius;
3360
// box-shadow: $shadow_4, 0 16px 16px transparent;
3361
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3363
}
3364
.solid-csd & {
3366
margin: 0;
3367
// padding: 4px;
3368
border-radius: 0;
3369
box-shadow: none;
3370
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3371
background-color: $titlebar_bg_color;
3372
}
3373
}
3374
// Window Close button
3376
button.titlebutton {
3377
// @extend %simple_flat_button;
3378
@extend %circular_button;
3380
.selection-mode & {
3382
}
3383
}
3384
// catch all extend :)
3387
%selected_items {
3389
background-color: $selected_overlay_color;
3390
}
3391
.monospace { font-family: monospace; }
3393
/**********************
3396
* Touch Copy & Paste *
3397
**********************/
3398
// touch selection handlebars for the Popover.osd above
3399
cursor-handle {
3400
border-radius: $circular_radius;
3401
background-color: $primary_color;
3402
background-image: none;
3403
&.top:dir(ltr), &.bottom:dir(rtl) {
3405
padding-left: 6px;
3406
border-top-right-radius: 0;
3407
}
3408
&.bottom:dir(ltr), &.top:dir(rtl) {
3410
padding-right: 6px;
3411
border-top-left-radius: 0;
3412
}
3413
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3415
-GtkWidget-text-handle-width: 24;
3416
-GtkWidget-text-handle-height: 30;
3417
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3419
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3420
url('#{$_url}@2.png'));
3421
}
3422
}
3423
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3425
// shortcut window keys
3427
.keycap {
3428
min-width: 28px - 8px * 2;
3429
min-height: 28px - 2px;
3430
margin-top: 2px;
3431
padding-bottom: 2px;
3432
padding-left: 8px;
3433
padding-right: 8px;
3434
border: solid 1px $border_color;
3436
border-radius: $material_radius + 1px;
3437
box-shadow: inset 0 -2px $border_color;
3438
background-color: $surface_color;
3439
color: $fg_color;
3440
font-size: smaller;
3441
}
3442
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3444
transition: $shorter_transition;
3445
box-shadow: $shadow_1, inset 0 0 0 2px $primary_color;
3446
caret-color: $primary_color;
3447
}
3448
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3450
stackswitcher button.circular,
3452
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3453
min-width: $medium_size;
3454
min-height: $medium_size;
3455
padding: 0;
3456
}
3457
/*********
3460
* Emoji *
3461
*********/
3462
popover.emoji-picker {
3463
padding: 0;
3464
entry {
3466
border-bottom: 1px solid $border_color;
3467
border-radius: 0;
3468
box-shadow: none;
3469
background-color: transparent;
3470
}
3471
scrolledwindow { border-bottom: 1px solid $border_color; }
3473
}
3474
// mimic tab style
3476
button.emoji-section {
3477
margin-top: -1px;
3478
padding: 0 8px;
3479
min-width: 24px;
3480
min-height: $medium_size;
3481
border-radius: 0;
3482
outline-offset: -6px;
3483
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3485
&:checked {
3487
box-shadow: inset 0 2px $primary_color;
3488
background-color: transparent;
3489
}
3490
&:hover, &:active { background-color: $hover_overlay_color; }
3492
&:first-child { margin-left: 4px; }
3494
&:last-child { margin-right: 4px; }
3496
}
3497
.emoji {
3499
min-width: 3em;
3500
min-height: 3em;
3501
padding: 0 8px;
3502
// font-size: larger;
3503
widget {
3505
transition: $shorter_transition;
3506
border-radius: $material_radius;
3507
&:hover { background-color: $hover_overlay_color; }
3509
}
3510
}
3511