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: $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: $material_radius; }
91
selection,
93
&:selected { @extend %selected_items; }
94
}
95
textview {
97
// FIXME: we need to override background-color to ensure text rendering
98
text { background-color: $base_color; }
99
border {
101
background-color: $alt_base_color;
102
color: $hint_fg_color; // FIXME: not working
103
}
104
}
105
// iconview { @extend .view; }
107
.rubberband,
109
rubberband {
110
border: 1px solid $alt_primary_color;
111
background-color: rgba($alt_primary_color, 0.3);
112
}
113
flowbox {
115
rubberband { @extend rubberband; }
116
flowboxchild {
118
padding: 4px;
119
border-radius: $material_radius;
120
&:selected { @extend %selected_items; }
122
}
123
}
124
.content-view .tile {
126
// margin: 2px;
127
// padding: 0;
128
// border-radius: 0;
129
// background-color: black;
130
&:selected {
132
background-color: transparent;
133
color: inherit;
134
}
135
}
136
label {
138
caret-color: currentColor; // this shouldn't be needed.
139
&.separator {
141
@extend .dim-label;
142
color: $fg_color;
144
}
145
row:selected &,
147
&:selected { @extend %nobg_selected_items; }
148
selection {
150
background-color: $primary_color;
151
color: $inverse_fg_color;
152
}
153
&:disabled {
155
color: $disabled_fg_color;
156
selection { @extend %selected_items:disabled; }
158
tab &,
160
button & { color: inherit; }
161
}
162
}
163
.dim-label { opacity: 0.6; }
165
assistant {
167
.sidebar {
168
padding: 4px 0;
169
// background-color: $base_color;
170
// border-top: 1px solid $border_color;
171
}
172
// &.csd .sidebar { border-top-style: none; }
174
.sidebar label {
176
min-height: $medium_size;
177
padding: 0 12px;
178
color: $hint_fg_color;
179
font-weight: 500;
180
&.highlight { color: $fg_color; }
182
}
183
}
184
// %osd, .osd { opacity: 0.9; }
186
/*********************
189
* Spinner Animation *
190
*********************/
191
@keyframes spin {
192
to { -gtk-icon-transform: rotate(1turn); }
193
}
194
spinner {
196
background: none;
197
opacity: 0; // non spinning spinner makes no sense
198
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
199
&:checked {
201
opacity: 1;
202
animation: spin 1s linear infinite;
203
&:disabled { opacity: 0.5; }
205
}
206
}
207
/****************
210
* Text Entries *
211
****************/
212
%entry,
213
entry {
214
%entry_basic, & {
215
min-height: $medium_size;
216
padding: 0 8px;
217
border-radius: $material_radius;
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 $secondary_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
treeview entry {
321
&.flat, & {
322
min-height: 0;
323
padding: 2px;
324
border-radius: 0;
325
background-color: $base_color;
326
&, &:focus {
328
border-image: none;
329
box-shadow: none;
330
}
331
}
332
}
333
.entry-tag {
335
margin: 2px;
336
border-radius: $circular_radius;
337
box-shadow: none;
338
background-color: $divider_color;
339
color: $fg_color;
340
&:hover { background-image: image($divider_color); }
342
// side margins: compensate the entry padding with a negative margin
344
// then the negative margin itself
345
:dir(ltr) & {
346
margin-left: 4px;
347
margin-right: 0;
348
padding-left: 12px;
349
padding-right: 8px;
350
}
351
:dir(rtl) & {
353
margin-left: 0;
354
margin-right: 4px;
355
padding-left: 8px;
356
padding-right: 12px;
357
}
358
// seems any sizing doesn't work
360
&.button {
361
box-shadow: none;
362
background-color: transparent;
363
&:not(:hover):not(:active) { color: $secondary_fg_color; }
365
}
366
}
367
/***********
370
* Buttons *
371
***********/
372
// stuff for .needs-attention
373
@keyframes needs_attention {
374
from {
375
background-image: -gtk-gradient(radial,
376
center center, 0,
377
center center, 0.001,
378
to($secondary_color),
379
to(transparent));
380
}
381
to {
383
background-image: -gtk-gradient(radial,
384
center center, 0,
385
center center, 0.5,
386
to($secondary_color),
387
to(transparent));
388
}
389
}
390
%button,
392
button {
393
@at-root %button_basic, & {
394
min-height: 24px;
395
min-width: 16px;
396
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
397
border-radius: $material_radius;
398
font-weight: 500;
399
@include button(normal);
401
&:hover { @include button(hover); }
403
&:active { @include button(active); }
405
&:disabled { @include button(disabled); }
407
&:checked { @include button(checked); }
409
&:checked:disabled { @include button(checked-disabled); }
411
@at-root %flat_button, &.flat {
413
@at-root %simple_flat_button, & {
414
@include button(flat-normal);
415
&:hover { @include button(flat-hover); }
417
&:active { @include button(flat-active); }
419
&:disabled { @include button(flat-disabled); }
421
}
422
&:checked { @include button(flat-checked); }
424
&:checked:disabled { @include button(flat-checked-disabled); }
426
}
427
&.text-button {
429
padding-left: 16px;
430
padding-right: 16px;
431
}
432
&.image-button {
434
min-width: 24px;
435
padding: ($medium_size - 24px) / 2;
436
@extend %circular_button;
438
}
439
&.text-button.image-button {
441
border-radius: $material_radius;
442
-gtk-outline-radius: $material_radius;
443
label {
445
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
446
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
448
}
449
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
451
}
452
.linked > & { @extend %linked; }
454
.linked.vertical > & { @extend %linked_vertical; }
456
.linked > &.flat,
458
.linked.vertical > &.flat {
459
border-radius: $material_radius;
460
&.image-button { @extend %circular_button; }
462
&.text-button.image-button {
464
border-radius: $material_radius;
465
-gtk-outline-radius: $material_radius;
466
}
467
}
468
&:drop(active) {
470
// box-shadow: inset 0 0 0 2px $secondary_color;
471
}
472
}
473
@at-root %button_selected, row:selected & {
475
&:disabled {
476
background-color: $inverse_divider_color;
477
color: $inverse_disabled_secondary_fg_color;
478
}
479
&.flat {
481
color: $inverse_secondary_fg_color;
482
&:hover, &:active { color: $inverse_fg_color; }
484
&:disabled { color: $inverse_disabled_secondary_fg_color; }
486
&:checked {
488
background-color: $inverse_track_color;
489
color: $inverse_fg_color;
490
}
491
&:checked:disabled {
493
background-color: $inverse_divider_color;
494
color: $inverse_disabled_fg_color;
495
}
496
}
497
}
498
// big standalone buttons like in Documents pager
500
&.osd {
501
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
502
&.image-button { padding: ($large_size - 24px) / 2; }
504
&:disabled { opacity: 0; }
506
}
507
// overlay / OSD style
509
@at-root %osd_button,
510
.osd & {
511
}
512
// Suggested and Destructive Action buttons
514
@each $b_type, $b_color in (suggested-action, $suggested_color),
515
(destructive-action, $destructive_color) {
516
&.#{$b_type} {
517
background-color: $b_color;
518
color: $inverse_fg_color;
519
&:disabled { @include button(disabled, $b_color); }
521
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage(0.3)); }
523
&.flat {
525
background-color: transparent;
526
color: $b_color;
527
&:disabled { @include button(flat-disabled, $b_color); }
529
&:checked { background-color: rgba($b_color, 0.3); }
531
}
532
.osd & {
534
}
535
}
536
}
537
.stack-switcher > & {
539
// to position the needs attention dot, padding is added to the button
540
// child, a label needs just lateral padding while an icon needs vertical
541
// padding added too.
542
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
544
> label {
546
padding-left: 6px; // label padding
547
padding-right: 6px; //
548
}
549
> image {
551
padding-left: 6px; // image padding
552
padding-right: 6px; //
553
padding-top: 3px; //
554
padding-bottom: 3px; //
555
}
556
&.text-button {
558
// compensate text-button paddings
559
padding-left: 16px - 6px;
560
padding-right: 16px - 6px;
561
}
562
&.image-button {
564
// we want image buttons to have a 1:1 aspect ratio, so compensation
565
// of the padding added to the GtkImage is needed
566
padding-left: ($medium_size - 16px) / 2 - 6px;
567
padding-right: ($medium_size - 16px) / 2 - 6px;
568
}
569
&.needs-attention {
571
> label,
572
> image { @extend %needs_attention; }
573
&:checked {
575
> label,
576
> image {
577
animation: none;
578
background-image: none;
579
}
580
}
581
}
582
}
583
// hide separators
585
&.font,
586
&.file { separator { @extend %hide_separators; }}
587
// &.font { > box > box > label { font-weight: bold; }}
589
// inline-toolbar buttons
591
.inline-toolbar & {
592
// @extend %button_basic.flat;
593
&:not(.text-button) { @extend %circular_button; }
595
}
596
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
598
@at-root %circular_button,
600
&.close,
601
&.circular { // The Bloody Circul Button
602
border-radius: $circular_radius;
603
-gtk-outline-radius: $circular_radius;
604
// label { padding: 0; }
606
}
607
@at-root %small_button {
609
min-height: $small_size;
610
min-width: $small_size;
611
padding: 0;
612
border-radius: $circular_radius;
613
-gtk-outline-radius: $circular_radius;
614
}
615
}
616
%needs_attention {
618
animation: needs_attention $longer_duration $deceleration_curve forwards;
619
background-repeat: no-repeat;
620
background-position: right 3px;
621
background-size: 6px 6px;
622
&:dir(rtl) { background-position: left 3px; }
624
}
625
// all the following is for the +|- buttons on inline toolbars, that way
627
// should really be deprecated...
628
.inline-toolbar toolbutton > button { // redefining the button look is
629
// needed since those are flat...
630
}
631
// More inline toolbar buttons
633
toolbar.inline-toolbar toolbutton {
634
// > button.flat { @extend %linked_middle; }
635
// &:first-child > button.flat { @extend %linked:first-child; }
637
// &:last-child > button.flat { @extend %linked:last-child; }
639
// &:only-child > button.flat { @extend %linked:only-child; }
641
}
642
%linked_middle {
644
border-radius: 0;
645
-gtk-outline-radius: $material_radius;
646
}
647
%linked {
649
@extend %linked_middle;
650
&:first-child {
652
border-top-left-radius: $material_radius;
653
border-bottom-left-radius: $material_radius;
654
}
655
&:last-child {
657
border-top-right-radius: $material_radius;
658
border-bottom-right-radius: $material_radius;
659
}
660
&:only-child {
662
border-radius: $material_radius;
663
}
664
}
665
%linked_vertical_middle {
667
border-radius: 0;
668
-gtk-outline-radius: $material_radius;
669
}
670
%linked_vertical {
672
@extend %linked_vertical_middle;
673
&:first-child {
675
border-top-left-radius: $material_radius;
676
border-top-right-radius: $material_radius;
677
}
678
&:last-child {
680
border-bottom-left-radius: $material_radius;
681
border-bottom-right-radius: $material_radius;
682
}
683
&:only-child {
685
border-radius: $material_radius;
686
}
687
}
688
/* menu buttons */
690
modelbutton.flat,
691
.menuitem.button.flat {
692
min-height: $menuitem_size;
693
padding: 0 8px;
694
border-radius: $material_radius;
695
color: inherit;
696
@extend %simple_flat_button;
698
&:selected { @extend %selected_items; }
700
}
701
modelbutton.flat arrow {
703
background: none;
704
&:hover { background: none; }
706
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
708
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
710
}
711
button.color {
713
min-height: $small_size;
714
min-width: $small_size;
715
padding: $container_padding;
716
colorswatch:only-child {
718
// &, overlay { border-radius: 0; }
719
}
720
}
721
/*********
724
* Links *
725
*********/
726
*:link {
727
&, &:hover, &:active { color: $link_color; }
728
&:visited {
730
&, &:hover, &:active { color: $visited_link_color; }
731
}
732
@at-root %link_selected,
734
&:selected,
735
*:selected & { color: $inverse_fg_color; }
736
}
737
button:link,
739
button:visited {
740
@extend *:link;
741
> label { text-decoration-line: underline; }
743
}
744
/*****************
746
* GtkSpinButton *
747
*****************/
748
spinbutton {
749
&:not(.vertical) {
750
// in this horizontal configuration, the whole spinbutton
751
// behaves as the entry, so we extend the entry styling
752
// and nuke the style on the internal entry
753
@extend %entry;
754
padding: 0;
756
%spinbutton_entry,
758
entry {
759
min-width: $large_size - 8px * 2;
760
// reset all the other props since the spinbutton node is styled here
761
margin: 0;
762
border-image: none;
763
border-radius: 0;
764
box-shadow: none;
765
background-color: transparent;
766
//
767
// This will help to simplify spinbutton's code, but unfortunatelly
768
// doesn't work properly in :dir(rtl). It needs z-index property.
769
//
770
// min-width: $large_size - 8px;
771
//
772
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
773
//
774
// &:dir(ltr) {
775
// margin-right: -$spinbuttons_width;
776
// padding-right: $spinbuttons_width;
777
// }
778
//
779
// &:dir(rtl) {
780
// margin-left: -$spinbuttons_width;
781
// padding-left: $spinbuttons_width;
782
// }
783
}
784
button {
786
// margin: $container_padding;
787
border: solid $container_padding transparent;
788
@extend %simple_flat_button;
790
@extend %small_button;
792
&.up:dir(ltr),
794
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
795
&.up:dir(rtl),
797
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
798
}
799
}
800
// OSD horizontal
802
.osd &:not(.vertical) {
803
button {
804
}
805
}
806
// Vertical
808
&.vertical {
809
// in the vertical configuration, we treat the spinbutton
810
// as a box, and tweak the style of the entry in the middle
811
// so that it's linked
812
// FIXME: this should not be set at all, but otherwise it gets the wrong
814
// color
815
&:disabled { color: $disabled_fg_color; }
816
&:drop(active) {
818
box-shadow: none;
819
}
820
entry {
822
min-height: $medium_size;
823
min-width: $large_size;
824
padding: 0;
825
}
826
button {
828
min-height: $medium_size;
829
min-width: $large_size;
830
padding: 0;
831
@extend %simple_flat_button;
833
&.up { border-radius: $material_radius $material_radius 0 0; }
835
&.down { border-radius: 0 0 $material_radius $material_radius; }
837
}
838
}
839
// OSD vertical
841
.osd &.vertical button:first-child {
842
}
843
// Misc
845
treeview &:not(.vertical) {
846
min-height: 0;
847
border-style: none;
848
border-radius: 0;
849
entry {
851
min-height: 0;
852
padding: 1px 2px;
853
}
854
}
855
}
856
/**************
859
* ComboBoxes *
860
**************/
861
combobox {
862
arrow {
863
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
864
min-height: 16px;
865
min-width: 16px;
866
}
867
decoration,
869
button.combo:checked { transition: none; } // workaround for menuitem selection
870
button.combo cellview {
872
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
873
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
874
}
875
#gtk-combobox-popup-menu {
877
padding: 2px 0;
878
menuitem {
880
min-height: $medium_size - 2px * 2;
881
padding: 0 8px;
882
}
883
// overflow arrows
885
> arrow {
886
&.top { margin-top: -2px; }
887
&.bottom {
889
margin-top: 2px * 2;
890
margin-bottom: -2px * 3;
891
}
892
}
893
}
894
&.linked {
896
button:nth-child(2) {
897
&:dir(ltr) { @extend %linked:last-child; }
898
&:dir(rtl) { @extend %linked:first-child; }
899
}
900
}
901
&:drop(active) { // FIXME: untested
903
box-shadow: none;
904
// button.combo { @extend %button_basic:drop(active); }
906
}
907
}
908
// the combo is a composite widget so the way we do button linking doesn't
910
// work, special case needed. See
911
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
912
.linked:not(.vertical) > combobox {
914
> box > button.combo { @extend %linked_middle; }
915
&:first-child > box > button.combo { @extend %linked:first-child; }
917
&:last-child > box > button.combo { @extend %linked:last-child; }
919
&:only-child > box > button.combo { @extend %linked:only-child; }
921
}
922
.linked.vertical > combobox {
924
> box > button.combo { @extend %linked_vertical_middle; }
925
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
927
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
929
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
931
}
932
%combo_flat {
934
border-radius: 0;
935
background-image: none;
936
font-weight: inherit;
937
@include entry(flat-normal);
939
&:hover { box-shadow: inset 0 -2px $hint_fg_color; }
941
&:checked {
943
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
944
$primary_color 100%,
945
transparent 0%)
946
0 0 2 / 0 0 2px;
947
}
948
&:disabled {
950
box-shadow: inset 0 -1px $divider_color;
951
color: $disabled_fg_color;
952
}
953
}
954
/************
957
* Toolbars *
958
************/
959
toolbar {
960
-GtkWidget-window-dragging: true;
961
padding: 2px;
962
background-color: $bg_color;
963
button { @extend %button_basic.flat; }
965
// on OSD
967
.osd & { background-color: transparent; }
968
// stand-alone OSD toolbars
970
&.osd {
971
transition: $shadow_transition;
972
padding: $container_padding;
973
border-radius: $material_radius;
974
box-shadow: $shadow_2, inset 0 1px $highlight_color;
975
background-color: $popup_bg_color;
976
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
978
&.left,
980
&.right,
981
&.top,
982
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
983
}
984
// toolbar separators
986
&.horizontal > separator { margin: 2px; }
987
&.vertical > separator { margin: 2px; }
988
&:not(.inline-toolbar):not(.osd) {
990
scale,
991
entry,
992
spinbutton,
993
button { margin: 2px; }
994
.linked entry,
996
.linked spinbutton,
997
.linked button {
998
&:not(:first-child) { margin-left: 0; }
999
&:not(:last-child) { margin-right: 0; }
1000
}
1001
spinbutton {
1003
entry,
1004
button { margin: 0; }
1005
}
1006
switch { margin: 2px + $container_padding 2px; }
1008
}
1009
}
1010
// searchbar, location-bar & inline-toolbar
1012
.inline-toolbar {
1013
padding: $container_padding;
1014
border-style: solid;
1015
border-width: 0 1px 1px;
1016
border-color: $border_color;
1017
background-color: $alt_base_color;
1018
}
1019
searchbar > revealer > box,
1021
.location-bar {
1022
padding: $container_padding;
1023
border-style: solid;
1024
border-width: 0 0 1px;
1025
border-color: $border_color;
1026
background-color: $bg_color;
1027
background-clip: border-box;
1028
}
1029
searchbar > revealer > box {
1031
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1032
margin: -6px;
1033
padding: $container_padding;
1034
}
1035
/***************
1038
* Header bars *
1039
***************/
1040
%titlebar,
1041
headerbar {
1042
transition: background-color $shorter_duration $deceleration_curve, color $shorter_duration $deceleration_curve;
1043
min-height: $large_size;
1044
padding: 0 $container_padding;
1045
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1046
background-color: $titlebar_bg_color;
1047
color: $titlebar_fg_color;
1048
&:disabled :not(button) > label { color: $titlebar_disabled_fg_color; }
1050
&:backdrop {
1052
color: $titlebar_secondary_fg_color;
1053
&:disabled :not(button) > label { color: $titlebar_disabled_secondary_fg_color; }
1055
}
1056
.title {
1058
padding: 0 12px;
1059
font-weight: bold;
1060
}
1061
.subtitle {
1063
padding: 0 12px;
1064
font-size: smaller;
1065
@extend .dim-label;
1067
}
1068
.linked:not(.vertical) > entry:not(.flat) { border-radius: $material_radius; }
1070
button:not(.suggested-action):not(.destructive-action) {
1072
@extend %button_basic.flat;
1073
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1075
$titlebar_indicator_color 0%,
1076
transparent 0%)
1077
0 0 0 / 0 0 0px;
1078
color: $titlebar_secondary_fg_color;
1079
&:hover, &:active { color: $titlebar_fg_color; }
1081
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1083
&:checked {
1085
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1086
$titlebar_indicator_color 100%,
1087
transparent 0%)
1088
0 0 2 / 0 0 2px;
1089
color: $titlebar_fg_color;
1090
&:disabled { color: $titlebar_disabled_fg_color; }
1092
&, &:disabled { background-color: transparent; }
1094
}
1095
&:backdrop {
1097
color: $titlebar_hint_fg_color;
1098
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1100
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1102
&:checked {
1104
color: $titlebar_secondary_fg_color;
1105
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1107
}
1108
}
1109
}
1110
button.suggested-action, button.destructive-action {
1112
&:disabled {
1113
background-color: $titlebar_divider_color;
1114
color: $titlebar_disabled_fg_color;
1115
}
1116
}
1117
&.selection-mode {
1119
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1120
// but let's keep it for backwards compatibility.
1121
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1122
animation: header_ripple_effect $longer_duration $deceleration_curve;
1123
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1124
background-color: $primary_color;
1125
color: $inverse_fg_color;
1126
&:backdrop {
1128
color: $inverse_secondary_fg_color;
1129
}
1130
.subtitle:link { @extend *:link:selected; }
1132
button:not(.suggested-action):not(.destructive-action) {
1134
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1135
currentColor 0%,
1136
transparent 0%)
1137
0 0 0 / 0 0 0px;
1138
color: $inverse_fg_color;
1139
&:disabled { color: $inverse_disabled_fg_color; }
1141
&:checked {
1143
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1144
currentColor 100%,
1145
transparent 0%)
1146
0 0 2 / 0 0 2px;
1147
color: $inverse_fg_color;
1148
&:disabled { color: $inverse_disabled_fg_color; }
1150
}
1151
&:backdrop {
1153
color: $inverse_secondary_fg_color;
1154
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1156
&:checked {
1158
color: $inverse_secondary_fg_color;
1159
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1161
}
1162
}
1163
}
1164
.selection-menu {
1166
padding-left: 16px;
1167
padding-right: 16px;
1168
arrow { -GtkArrow-arrow-scaling: 1; }
1170
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1172
}
1173
}
1174
// squared corners when the window is maximized, tiled, or fullscreen
1176
.tiled &,
1177
.tiled-top &,
1178
.tiled-right &,
1179
.tiled-bottom &,
1180
.tiled-left &,
1181
.maximized &,
1182
.fullscreen & {
1183
border-radius: 0;
1184
box-shadow: $shadow_1;
1185
}
1186
&.default-decoration {
1188
min-height: $small_size;
1189
padding: $container_padding;
1190
box-shadow: inset 0 1px $titlebar_highlight_color;
1191
.tiled &,
1193
.maximized &,
1194
.fullscreen & { box-shadow: none; }
1195
button.titlebutton {
1197
min-height: $small_size;
1198
min-width: $small_size;
1199
margin: 0;
1200
padding: 0;
1201
}
1202
// workaround for non-animatable buttons
1204
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1205
}
1206
.solid-csd & {
1208
&:dir(rtl), &:dir(ltr) { // specificity bump
1209
// margin-left: -2px;
1210
// margin-right: -2px;
1211
// margin-top: -2px;
1212
// border-radius: 0;
1213
// box-shadow: inset 0 1px $titlebar_highlight_color;
1214
}
1215
}
1216
}
1217
headerbar {
1219
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1220
entry,
1221
spinbutton,
1222
// separator,
1223
button {
1224
margin-top: $container_padding;
1225
margin-bottom: $container_padding;
1226
}
1227
switch {
1229
margin-top: ($large_size - 24px) / 2;
1230
margin-bottom: ($large_size - 24px) / 2;
1231
}
1232
// reset button margins of the spinbutton
1234
spinbutton button {
1235
margin-top: 0;
1236
margin-bottom: 0;
1237
}
1238
// FIXME: This is a hacky workaround.
1240
.entry-tag {
1241
margin-top: 5px;
1242
margin-bottom: 5px;
1243
}
1244
}
1245
.background .titlebar {
1247
border-top-left-radius: $material_radius;
1248
border-top-right-radius: $material_radius;
1249
}
1250
.background.tiled .titlebar,
1252
.background.tiled-top .titlebar,
1253
.background.tiled-right .titlebar,
1254
.background.tiled-bottom .titlebar,
1255
.background.tiled-left .titlebar,
1256
.background.maximized .titlebar,
1257
.background.solid-csd .titlebar {
1258
border-top-left-radius: 0;
1259
border-top-right-radius: 0;
1260
}
1261
headerbar { // headerbar border rounding
1263
window separator:first-child + &, // tackles the paned container case
1264
window &:first-child { border-top-left-radius: $material_radius; }
1265
window &:last-child { border-top-right-radius: $material_radius; }
1267
window stack & { // tackles the stacked headerbars case
1269
&:first-child, &:last-child {
1270
border-top-left-radius: $material_radius;
1271
border-top-right-radius: $material_radius;
1272
}
1273
}
1274
window.tiled &,
1276
window.tiled-top &,
1277
window.tiled-right &,
1278
window.tiled-bottom &,
1279
window.tiled-left &,
1280
window.maximized &,
1281
window.fullscreen &,
1282
window.solid-csd & {
1283
&,
1284
&:first-child,
1285
&:last-child,
1286
&:only-child {
1287
border-top-left-radius: 0;
1288
border-top-right-radius: 0;
1289
}
1290
}
1291
}
1292
.titlebar:not(headerbar) {
1294
window.csd > & {
1295
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1296
padding: 0;
1297
background-color: transparent;
1298
background-image: none;
1299
border-style: none;
1300
box-shadow: none;
1301
}
1302
> separator {
1304
background-color: $titlebar_bg_color;
1305
background-image: image($border_color);
1306
}
1307
@extend %titlebar;
1309
}
1310
/************
1313
* Pathbars *
1314
************/
1315
%pathbar_button,
1316
.path-bar button {
1317
padding-left: ($medium_size - 24px) / 2;
1318
padding-right: ($medium_size - 24px) / 2;
1319
label:not(:only-child) {
1321
&:first-child { margin-left: 4px; }
1322
&:last-child { margin-right: 4px; }
1324
}
1325
&.slider-button {
1327
padding-left: (24px - 16px) / 2;
1328
padding-right: (24px - 16px) / 2;
1329
}
1330
:not(headerbar) & {
1332
@extend %flat_button;
1333
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1335
$primary_color 0%,
1336
transparent 0%)
1337
0 0 0 / 0 0 0px;
1338
border-radius: $material_radius;
1339
&:checked {
1341
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1342
$primary_color 100%,
1343
transparent 0%)
1344
0 0 2 / 0 0 2px;
1345
&, &:disabled { background-color: transparent; }
1347
}
1348
}
1349
}
1350
/**************
1353
* Tree Views *
1354
**************/
1355
treeview.view {
1356
@at-root * {
1357
-GtkTreeView-horizontal-separator: 4;
1358
-GtkTreeView-grid-line-width: 1;
1359
-GtkTreeView-grid-line-pattern: '';
1360
-GtkTreeView-tree-line-width: 1;
1361
-GtkTreeView-tree-line-pattern: '';
1362
-GtkTreeView-expander-size: 16;
1363
}
1364
border-left-color: $track_color; // this is actually the tree lines color,
1366
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1367
&:selected { border-left-color: $inverse_track_color; }
1369
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1371
&:hover, &:active, &:selected { border-radius: 0; }
1373
&.separator {
1375
min-height: 1px + 2px * 2;
1376
color: $border_color;
1377
}
1378
&:drop(active) {
1380
border-style: solid none;
1381
border-width: 1px;
1382
border-color: $secondary_color;
1383
&.after { border-top-style: none; }
1385
&.before { border-bottom-style: none; }
1387
}
1388
&.expander {
1390
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1391
-gtk-icon-transform: rotate(-90deg);
1392
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1394
&:checked { -gtk-icon-transform: unset; }
1396
color: $secondary_fg_color;
1398
&:hover, &:active { color: $fg_color; }
1400
&:disabled { color: $disabled_secondary_fg_color; }
1402
&:selected {
1404
color: $inverse_secondary_fg_color;
1405
&:hover, &:active { color: $inverse_fg_color; }
1407
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1409
}
1410
}
1411
&.progressbar { // progress bar in treeviews
1413
border-bottom: $bar_size solid $primary_color;
1414
box-shadow: none;
1415
background-color: transparent;
1416
&:selected { border-bottom-color: $inverse_fg_color; }
1418
}
1419
&.trough { // progress bar trough in treeviews
1421
border-bottom: $bar_size solid rgba($primary_color, 0.3);
1422
box-shadow: none;
1423
background-color: transparent;
1424
&:selected { border-bottom-color: $inverse_track_color; }
1426
}
1427
header {
1429
button {
1430
@extend row.activatable;
1431
padding: 2px 6px;
1433
border-style: none solid solid none;
1434
border-width: 1px;
1435
border-color: $border_color;
1436
border-radius: 0;
1437
background-clip: border-box;
1438
&, &:hover, &:active { box-shadow: none; }
1440
&, &:disabled { background-color: $base_color; }
1442
&:last-child { border-right-style: none; }
1444
}
1445
}
1446
button.dnd,
1448
header.button.dnd { // for treeview-like derive widgets
1449
padding: 2px 6px;
1450
border-style: none solid solid;
1451
border-width: 1px;
1452
border-color: $border_color;
1453
border-radius: 0;
1454
box-shadow: none;
1455
background-color: $base_color;
1456
background-clip: border-box;
1457
color: $primary_color;
1458
}
1459
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1461
}
1462
/*********
1465
* Menus *
1466
*********/
1467
menubar,
1468
.menubar {
1469
-GtkWidget-window-dragging: true;
1470
padding: 0;
1471
// box-shadow: inset 0 -1px $border_color;
1472
background-color: $titlebar_bg_color;
1473
> menuitem {
1475
transition: $shorter_transition;
1476
min-height: 20px;
1477
padding: 4px 8px;
1478
color: $titlebar_secondary_fg_color;
1479
&:hover { // Seems like it :hover even with keyboard focus
1481
transition: none;
1482
background-color: $titlebar_divider_color;
1483
color: $titlebar_fg_color;
1484
}
1485
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1487
label:disabled { color: inherit; } // to inherit the above color
1489
}
1490
}
1491
.csd.popup { background-color: transparent; }
1493
menu,
1495
.menu,
1496
.context-menu {
1497
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1498
padding: 4px 0;
1499
box-shadow: inset 0 1px $highlight_color;
1500
background-color: $popup_bg_color;
1501
border: 1px solid $border_color; // adds borders in a non composited env
1502
.csd & {
1504
border: none; // axes borders in a composited env
1505
border-radius: $material_radius;
1506
}
1507
menuitem {
1509
transition: background-color $shorter_duration $deceleration_curve;
1510
min-height: 20px;
1511
min-width: 40px;
1512
padding: 4px 8px;
1513
font: initial;
1514
text-shadow: none;
1515
&:hover {
1517
transition: none;
1518
background-color: $divider_color;
1519
}
1520
&:disabled { color: $disabled_fg_color; }
1522
// submenu indicators
1524
arrow {
1525
min-height: 16px;
1526
min-width: 16px;
1527
&:dir(ltr) {
1529
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1530
margin-left: 8px;
1531
}
1532
&:dir(rtl) {
1534
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1535
margin-right: 8px;
1536
}
1537
}
1538
// avoids labels color being overridden, see
1540
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1541
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1542
}
1543
// overflow arrows
1545
> arrow {
1546
min-height: 16px;
1547
min-width: 16px;
1548
padding: 4px;
1549
background-color: $popup_bg_color;
1550
color: $secondary_fg_color;
1551
&.top {
1553
margin-top: -4px;
1554
border-bottom: 1px solid $border_color;
1555
border-radius: $material_radius $material_radius 0 0;
1556
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1557
}
1558
&.bottom {
1560
margin-top: 4px * 2;
1561
margin-bottom: -4px * 3;
1562
border-top: 1px solid $border_color;
1563
border-radius: 0 0 $material_radius $material_radius;
1564
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1565
}
1566
&:hover {
1568
background-image: image($divider_color);
1569
color: $fg_color;
1570
}
1571
&:disabled {
1573
border-color: transparent;
1574
background-color: transparent;
1575
color: transparent;
1576
// color: $disabled_secondary_fg_color;
1577
}
1578
}
1579
separator { margin: 4px 0; }
1581
}
1582
menuitem {
1584
accelerator { color: $secondary_fg_color; }
1585
}
1586
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1588
// Electron/Atom render all translucent colors in opaque colors.
1589
// It's a very critical issue for this theme and should be fixed by upstream...
1590
.popup:not(.csd) menu {
1591
menuitem {
1592
color: $opaque_fg_color;
1593
&:hover { background-color: $opaque_divider_color; }
1595
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1597
}
1598
// FIXME: not working this
1600
accelerator { color: $opaque_secondary_fg_color; }
1601
}
1602
/************
1605
* Popovers *
1606
************/
1607
popover.background {
1608
transition: $shadow_transition;
1609
padding: 2px;
1610
box-shadow: $shadow_2; // TODO: this should really have a highlight
1611
background-color: $popup_bg_color;
1612
&:backdrop { box-shadow: $shadow_1; }
1614
&, .csd & {
1616
border-style: solid;
1617
border-width: 1px;
1618
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1619
border-radius: $material_radius + 1px;
1620
}
1621
> stack { margin: -4px; } // remove extra padding from menu style popovers
1623
> toolbar { margin: -2px; }
1625
> list,
1627
> .view,
1628
> toolbar {
1629
border-style: none;
1630
box-shadow: none;
1631
background-color: transparent;
1632
}
1633
// &.touch-selection,
1635
// &.magnifier,
1636
// &.osd { @extend %osd; }
1637
// entry { @extend %entry.flat; }
1639
// button.combo { @extend %combo_flat; }
1641
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1643
&.menu button,
1645
button.model {
1646
@extend %simple_flat_button;
1647
min-height: 32px;
1649
padding: 0 8px;
1650
border-radius: $material_radius;
1651
&:checked { @extend %selected_items; }
1653
}
1654
separator { margin: 4px 0; }
1656
list separator { margin: 0; }
1658
}
1659
/*************
1661
* Notebooks *
1662
*************/
1663
notebook {
1664
> header {
1665
border-width: 1px;
1666
border-color: $border_color;
1667
background-color: $bg_color;
1668
background-clip: border-box;
1669
&.top {
1671
border-bottom-style: solid;
1672
> tabs {
1673
margin-bottom: -1px;
1674
> tab {
1675
&:hover { box-shadow: inset 0 -2px $track_color; }
1677
&:checked { box-shadow: inset 0 -2px $primary_color; }
1679
}
1680
}
1681
}
1682
&.bottom {
1684
border-top-style: solid;
1685
> tabs {
1686
margin-top: -1px;
1687
> tab {
1688
&:hover { box-shadow: inset 0 2px $track_color; }
1690
&:checked { box-shadow: inset 0 2px $primary_color; }
1692
}
1693
}
1694
}
1695
&.left {
1697
border-right-style: solid;
1698
> tabs {
1699
margin-right: -1px;
1700
> tab {
1701
&:hover { box-shadow: inset -2px 0 $track_color; }
1703
&:checked { box-shadow: inset -2px 0 $primary_color; }
1705
}
1706
}
1707
}
1708
&.right {
1710
border-left-style: solid;
1711
> tabs {
1712
margin-left: -1px;
1713
> tab {
1714
&:hover { box-shadow: inset 2px 0 $track_color; }
1716
&:checked { box-shadow: inset 2px 0 $primary_color; }
1718
}
1719
}
1720
}
1721
&.top > tabs > arrow {
1723
@extend %notebook_vert_arrows;
1724
border-top-style: none;
1726
}
1727
&.bottom > tabs > arrow {
1729
@extend %notebook_vert_arrows;
1730
border-bottom-style: none;
1732
}
1733
@at-root %notebook_vert_arrows {
1735
padding-left: 4px;
1736
padding-right: 4px;
1737
&.down {
1739
margin-left: -8px;
1740
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1741
}
1742
&.up {
1744
margin-right: -8px;
1745
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1746
}
1747
}
1748
&.left > tabs > arrow {
1750
@extend %notebook_horz_arrows;
1751
border-left-style: none;
1753
}
1754
&.right > tabs > arrow {
1756
@extend %notebook_horz_arrows;
1757
border-right-style: none;
1759
}
1760
@at-root %notebook_horz_arrows {
1762
padding-top: 4px;
1763
padding-bottom: 4px;
1764
&.down {
1766
margin-top: -8px;
1767
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1768
}
1769
&.up {
1771
margin-bottom: -8px;
1772
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1773
}
1774
}
1775
> tabs > arrow {
1777
@extend %simple_flat_button;
1778
min-height: 16px;
1780
min-width: 16px;
1781
border-radius: 0;
1782
}
1783
tab {
1785
transition: $shorter_transition,
1786
background-size 0,
1787
background-image 0;
1788
min-height: $small_size;
1789
min-width: $small_size;
1790
padding: $container_padding 12px;
1791
outline-offset: -6px;
1793
border-width: 1px; // for reorderable tabs
1795
border-color: transparent; //
1796
background-image: radial-gradient(circle farthest-corner at center,
1798
$primary_color 10%,
1799
transparent 0%);
1800
background-repeat: no-repeat;
1801
background-position: center;
1802
background-size: 0% 0%;
1803
color: $secondary_fg_color;
1805
font-weight: 500;
1806
&:hover {
1808
color: $fg_color;
1809
&.reorderable-page {
1811
border-color: $border_color;
1812
background-color: $alt_base_color;
1813
}
1814
}
1815
&:disabled { color: $disabled_secondary_fg_color; }
1817
&:checked {
1819
transition: $shorter_transition,
1820
background-size $longer_duration $deceleration_curve,
1821
background-image $longer_duration * 2 $deceleration_curve;
1822
background-image: radial-gradient(circle farthest-corner at center,
1823
transparent 10%,
1824
transparent 0%);
1825
background-size: 1000% 1000%;
1826
color: $fg_color;
1827
&:disabled { color: $disabled_fg_color; }
1829
&.reorderable-page {
1831
border-color: $border_color;
1832
background-color: $base_color;
1833
}
1834
}
1835
// colors the button like the label, overridden otherwise
1837
button.flat {
1838
@extend %small_button;
1839
&:last-child {
1841
margin-left: $container_padding;
1842
margin-right: $container_padding - 12px;
1843
}
1844
&:first-child {
1846
margin-left: $container_padding - 12px;
1847
margin-right: $container_padding;
1848
}
1849
}
1850
}
1851
&.top,
1853
&.bottom {
1854
tabs {
1855
padding-left: 8px;
1856
padding-right: 8px;
1857
&:not(:only-child) {
1859
&:first-child { margin-left: 0; }
1860
&:last-child { margin-right: 0; }
1861
}
1862
tab {
1864
&.reorderable-page {
1865
margin: 0 -1px;
1866
border-style: none solid;
1867
}
1868
}
1869
}
1870
}
1871
&.left,
1873
&.right {
1874
tabs {
1875
padding-top: 8px;
1876
padding-bottom: 8px;
1877
&:not(:only-child) {
1879
&:first-child { margin-top: 0; }
1880
&:last-child { margin-bottom: 0; }
1881
}
1882
tab {
1884
&.reorderable-page {
1885
margin: -1px 0;
1886
border-style: solid none;
1887
}
1888
}
1889
}
1890
}
1891
}
1892
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1894
background-color: $base_color;
1895
entry:not(.search),
1897
spinbutton:not(.vertical) { @extend %entry.flat; }
1898
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1900
treeview entry:not(.search),
1902
treeview spinbutton:not(.vertical) { @extend %treeview_entry; }
1903
button.combo { @extend %combo_flat; }
1905
}
1906
}
1907
/**************
1910
* Scrollbars *
1911
**************/
1912
scrollbar {
1913
$_slider_min_length: 24px;
1914
// disable steppers
1916
@at-root * {
1917
-GtkScrollbar-has-backward-stepper: false;
1918
-GtkScrollbar-has-forward-stepper: false;
1919
}
1920
transition: $shorter_transition;
1922
background-color: $base_color;
1923
background-clip: $extra_background_clip;
1924
// scrollbar border
1926
&.top { border-bottom: 1px solid $border_color; }
1927
&.bottom { border-top: 1px solid $border_color; }
1928
&.left { border-right: 1px solid $border_color; }
1929
&.right { border-left: 1px solid $border_color; }
1930
// slider
1932
slider {
1933
transition: $shorter_transition, margin 0, border-width 0;
1934
min-width: 8px;
1935
min-height: 8px;
1936
border: 4px solid transparent;
1937
border-radius: $circular_radius;
1938
background-clip: padding-box;
1939
background-color: $hint_fg_color;
1940
&:hover { background-color: $secondary_fg_color; }
1942
&:active { background-color: $fg_color; }
1944
&:disabled { background-color: $disabled_secondary_fg_color; }
1946
}
1947
&.fine-tune {
1949
slider {
1950
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1951
min-width: 4px;
1952
min-height: 4px;
1953
}
1954
&.horizontal slider { margin: 2px 0; }
1956
&.vertical slider { margin: 0 2px; }
1958
}
1959
&.overlay-indicator {
1961
&:not(.dragging):not(.hovering) {
1962
border-color: transparent;
1963
background-color: transparent;
1964
slider {
1966
min-width: 4px;
1967
min-height: 4px;
1968
margin: 4px - 1px;
1969
border: 1px solid rgba($base_color, 0.3);
1970
}
1971
button {
1973
min-width: 4px;
1974
min-height: 4px;
1975
margin: 4px - 1px;
1976
border: 1px solid rgba($base_color, 0.3);
1977
border-radius: $circular_radius;
1978
background-color: $hint_fg_color;
1979
background-clip: padding-box;
1980
-gtk-icon-source: none;
1981
&:disabled { background-color: $disabled_secondary_fg_color; }
1983
}
1984
&.horizontal {
1986
slider { min-width: $_slider_min_length; }
1987
button { min-width: 8px; }
1989
}
1990
&.vertical {
1992
slider { min-height: $_slider_min_length; }
1993
button { min-height: 8px; }
1995
}
1996
}
1997
&.dragging,
1999
&.hovering { background-color: rgba($base_color, 0.9); }
2000
}
2001
&.horizontal slider { min-width: $_slider_min_length; }
2003
&.vertical slider { min-height: $_slider_min_length; }
2005
// button styling
2007
button {
2008
@extend %simple_flat_button;
2009
min-width: 16px;
2011
min-height: 16px;
2012
padding: 0;
2013
border-radius: 0;
2014
}
2015
// button icons
2017
&.vertical {
2018
button {
2019
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2020
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2022
}
2023
}
2024
&.horizontal {
2026
button {
2027
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2028
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2030
}
2031
}
2032
}
2033
/**********
2036
* Switch *
2037
**********/
2038
switch {
2039
transition: background-color 100ms $deceleration_curve, opacity $shorter_duration $deceleration_curve;
2040
margin: $container_padding 0;
2041
padding: 0 2px;
2042
border: 5px solid transparent;
2043
border-radius: $circular_radius;
2044
background-color: $track_color;
2045
background-clip: padding-box;
2046
font-size: 0;
2047
&:checked { background-color: rgba($secondary_color, 0.5); }
2049
&:disabled { opacity: 0.5; }
2051
slider {
2053
transition: all 100ms $deceleration_curve, box-shadow $shorter_duration $deceleration_curve;
2054
min-width: 20px;
2055
min-height: 20px;
2056
margin: -3px -2px;
2057
border-radius: $circular_radius;
2058
box-shadow: 0 0 0 10px transparent, $shadow_1;
2059
background-color: $popup_bg_color;
2060
color: $secondary_fg_color;
2061
}
2062
&:hover slider { box-shadow: 0 0 0 10px gtkalpha(currentColor, 0.16), $shadow_1; }
2064
&:focus slider { box-shadow: 0 0 0 10px gtkalpha(currentColor, 0.2), $shadow_1; }
2066
&:focus:hover slider { box-shadow: 0 0 0 10px gtkalpha(currentColor, 0.24), $shadow_1; }
2068
&:checked slider {
2070
background-color: $secondary_color;
2071
color: $secondary_color;
2072
}
2073
row:selected & {
2075
}
2076
}
2077
/*************************
2080
* Check and Radio items *
2081
*************************/
2082
// draw regular check and radio items using our PNG assets
2083
// all assets are rendered from assets.svg. never add pngs directly
2084
// selection-mode
2086
.view.content-view.check:not(list),
2087
.content-view .tile check:not(list) {
2088
min-height: 40px;
2089
min-width: 40px;
2090
margin: 0;
2091
padding: 0;
2092
box-shadow: none;
2093
background-color: transparent;
2094
background-image: none;
2095
-gtk-icon-shadow: $shadow_1;
2096
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2098
@each $s, $as in ('', '-unchecked'),
2100
(':checked', '-checked') {
2101
&#{$s} {
2102
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2103
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2104
}
2105
}
2106
}
2107
checkbutton,
2109
radiobutton {
2110
outline: none;
2111
}
2112
checkbutton.text-button,
2114
radiobutton.text-button {
2115
// this is for a nice focus on check and radios text
2116
padding: 2px;
2117
label:not(:only-child) { margin: 0 4px; }
2119
}
2120
$check_radio_size: 40px;
2122
check,
2124
radio {
2125
min-height: 24px;
2126
min-width: 24px;
2127
margin: -($check_radio_size - 24px) / 2;
2128
padding: ($check_radio_size - 24px) / 2;
2129
@extend %simple_flat_button;
2131
@extend %circular_button;
2133
&:focus { box-shadow: inset 0 0 0 9999px gtkalpha(currentColor, 0.2); }
2135
&:hover { box-shadow: inset 0 0 0 9999px $semi_fill_color; }
2137
&:checked, &:indeterminate {
2139
color: $secondary_color;
2140
&:disabled { color: $disabled_secondary_color; }
2142
}
2143
// &:only-child { margin: -12px; }
2145
row:selected &:not(:checked):not(:indeterminate) {
2147
color: $inverse_secondary_fg_color;
2148
&:hover, &:active { color: $inverse_fg_color; }
2150
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2152
}
2153
popover & {
2155
&, &:focus, &:hover, &:active, &:disabled {
2156
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2157
box-shadow: none;
2158
background-image: none;
2159
}
2160
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2162
&.left:dir(rtl) {
2164
margin-left: -12px;
2165
margin-right: -4px;
2166
}
2167
&.right:dir(ltr) {
2169
margin-left: -4px;
2170
margin-right: -12px;
2171
}
2172
}
2173
menu menuitem & {
2175
transition: none;
2176
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2177
padding: 0;
2178
&:dir(ltr) { margin-right: 8px; }
2180
&:dir(rtl) { margin-left: 8px; }
2182
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2184
&, &:hover, &:disabled {
2186
box-shadow: none;
2187
// color: inherit;
2188
}
2189
}
2190
}
2191
%check,
2193
check {
2194
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2195
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2197
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2199
}
2200
%radio,
2202
radio {
2203
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2204
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2206
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2208
border-image-slice: $check_radio_size / 2px;
2210
border-image-width: $check_radio_size / 2;
2211
$radio_indicator: 10px / $check_radio_size / 2;
2213
& {
2215
border-image-source: -gtk-gradient(radial,
2216
center center, 0,
2217
center center, 0.001,
2218
to($secondary_color),
2219
to(transparent));
2220
}
2221
&:checked:not(:indeterminate) {
2223
border-image-source: -gtk-gradient(radial,
2224
center center, 0,
2225
center center, $radio_indicator,
2226
to($secondary_color),
2227
to(transparent));
2228
}
2229
&:checked:not(:indeterminate):disabled {
2231
border-image-source: -gtk-gradient(radial,
2232
center center, 0,
2233
center center, $radio_indicator,
2234
to($disabled_secondary_color),
2235
to(transparent));
2236
}
2237
}
2238
%small_check,
2240
menu menuitem check {
2241
& {
2242
min-height: 16px;
2243
min-width: 16px;
2244
border-radius: $material_radius;
2245
-gtk-outline-radius: $material_radius;
2246
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2247
}
2248
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2250
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2252
}
2253
%small_radio,
2255
menu menuitem radio {
2256
& {
2257
min-height: 16px;
2258
min-width: 16px;
2259
border-image: none;
2260
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2261
}
2262
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2264
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2266
}
2267
// ANIMATION:
2269
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2270
// the transformation is set on the active state and it get reset on the checked state.
2271
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2272
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2274
check:not(:checked):indeterminate:active,
2276
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2277
check:not(:checked),
2279
radio:not(:checked) {
2280
& {
2281
transition: $shorter_transition,
2282
background-size $ripple_duration $deceleration_curve,
2283
background-image $ripple_opacity_duration $deceleration_curve,
2284
-gtk-icon-transform 0;
2285
}
2286
&:active {
2288
transition: $shorter_transition,
2289
background-size 0,
2290
background-image 0,
2291
-gtk-icon-transform 0;
2292
}
2293
menu menuitem & { transition: none; }
2295
}
2296
treeview.view check,
2298
treeview.view radio {
2299
padding: 0;
2300
&:hover {
2302
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2303
&:disabled { box-shadow: none; }
2305
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2307
}
2308
& {
2310
color: $secondary_fg_color;
2311
&:hover, &:active { color: $fg_color; }
2313
&:disabled { color: $disabled_secondary_fg_color; }
2315
&:checked, &:indeterminate { color: $secondary_color; }
2317
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_color; }
2319
}
2320
&:selected {
2322
color: $inverse_secondary_fg_color;
2323
&:hover, &:active { color: $inverse_fg_color; }
2325
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2327
&:checked, &:indeterminate { color: $secondary_color; }
2329
&:checked:disabled, &:indeterminate:disabled { color: $disabled_secondary_color; }
2331
}
2332
}
2333
treeview.view radio:checked {
2335
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2336
border-image: none;
2337
}
2338
/************
2341
* GtkScale *
2342
************/
2343
scale {
2344
// sizing
2345
$_marks_length: 8px;
2346
$_marks_distance: 7px;
2347
$trough_size: 2px;
2349
$finetune_trough_size: 4px;
2350
$slider_size: 32px;
2352
$slider_margin: -($slider_size - $trough_size) / 2;
2354
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2355
$color_slider_margin: -($slider_size) * 3 / 4;
2357
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2358
min-height: $trough_size;
2360
min-width: $trough_size;
2361
&.horizontal { padding: ($medium_size - $trough_size) / 2 12px; }
2363
&.vertical { padding: 12px ($medium_size - $trough_size) / 2; }
2365
// the slider is inside the trough, so to have make it bigger there's a negative margin
2367
slider {
2368
min-height: $slider_size;
2369
min-width: $slider_size;
2370
margin: $slider_margin;
2371
}
2372
// click-and-hold the slider to activate
2374
&.fine-tune {
2375
&.horizontal {
2376
min-height: $finetune_trough_size;
2377
padding-top: ($medium_size - $finetune_trough_size) / 2;
2378
padding-bottom: ($medium_size - $finetune_trough_size) / 2;
2379
}
2380
&.vertical {
2382
min-width: $finetune_trough_size;
2383
padding-left: ($medium_size - $finetune_trough_size) / 2;
2384
padding-right: ($medium_size - $finetune_trough_size) / 2;
2385
}
2386
// to make the trough grow in fine-tune mode
2388
slider { margin: $finetune_slider_margin; }
2389
}
2390
// the backing bit
2392
trough {
2393
transition: background-color $shorter_duration $deceleration_curve;
2394
outline: none;
2395
background-color: $track_color;
2396
&:disabled { background-color: $divider_color; }
2398
}
2399
// the colored part of the backing bit
2401
highlight {
2402
transition: background-color $shorter_duration $deceleration_curve;
2403
background-color: $secondary_color;
2404
&:disabled { background-color: transparent; }
2406
}
2407
// this is another differently styled part of the backing bit, the most relevant use case is for example
2409
// in media player to indicate how much video stream as been cached
2410
fill {
2411
transition: background-color $shorter_duration $deceleration_curve;
2412
background-color: $track_color;
2413
&:disabled { background-color: transparent; }
2415
}
2416
slider {
2418
transition: background-color $shorter_duration $deceleration_curve,
2419
background-size $ripple_duration $deceleration_curve,
2420
background-image $ripple_opacity_duration $deceleration_curve;
2421
background-repeat: no-repeat;
2422
background-position: center;
2423
background-size: auto, 1000% 1000%;
2424
border-radius: 50%;
2425
color: transparent;
2426
@each $s, $as in ('', ''),
2428
(':disabled', '-disabled') {
2429
&#{$s} {
2430
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2431
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2433
radial-gradient(circle farthest-corner at center,
2434
currentColor 10%,
2435
transparent 0%);
2436
}
2437
}
2438
&:focus { background-color: rgba($secondary_color, 0.16); }
2440
&:hover { background-color: rgba($secondary_color, 0.12); }
2442
&:active {
2444
transition: background-color $shorter_duration $deceleration_curve,
2445
background-size 0,
2446
background-image 0;
2447
animation: scale_ripple_effect $longer_duration $deceleration_curve forwards;
2448
background-size: auto, 0% 0%;
2449
background-color: rgba($secondary_color, 0.12);
2450
color: rgba($secondary_color, 0.12);
2451
}
2452
}
2453
marks label,
2455
value { color: $hint_fg_color; }
2456
marks {
2458
color: $track_color;
2459
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2461
(bottom, bottom, top),
2462
(left, left, right),
2463
(right, right, left) {
2464
&.#{$marks_class} {
2465
margin-#{$marks_margin}: $_marks_distance;
2466
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2467
}
2468
}
2469
}
2470
&.fine-tune marks {
2472
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2473
(bottom, bottom, top),
2474
(left, left, right),
2475
(right, right, left) {
2476
&.#{$marks_class} {
2477
margin-#{$marks_margin}: $_marks_distance - 1px;
2478
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2479
}
2480
}
2481
}
2482
&.horizontal {
2484
indicator {
2485
min-height: $_marks_length;
2486
min-width: 1px;
2487
}
2488
}
2489
&.vertical {
2491
indicator {
2492
min-height: 1px;
2493
min-width: $_marks_length;
2494
}
2495
}
2496
// *WARNING* scale with marks madness following
2498
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2500
('vertical', 'vert') {
2501
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2502
('marks-after', 'marks-after:not(.marks-before)') {
2503
&.#{$dir_class}.#{$marks_class} {
2504
slider {
2505
@each $state, $state_infix in ('', ''),
2506
(':disabled', '-disabled') {
2507
&#{$state} {
2508
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2509
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2511
radial-gradient(circle farthest-corner at center,
2512
currentColor 10%,
2513
transparent 0%);
2514
}
2515
}
2516
}
2517
}
2518
}
2519
}
2520
&.color {
2522
min-height: 0;
2523
min-width: 0;
2524
&.horizontal {
2526
padding: 0 0 12px 0;
2527
slider {
2529
&:dir(ltr), &:dir(rtl) { // specificity bump
2530
margin-bottom: $color_slider_margin;
2531
margin-top: $color_marks_slider_margin;
2532
}
2533
}
2534
}
2535
&.vertical {
2537
&:dir(ltr) {
2538
padding: 0 0 0 12px;
2539
slider {
2541
margin-left: $color_slider_margin;
2542
margin-right: $color_marks_slider_margin;
2543
}
2544
}
2545
&:dir(rtl) {
2547
padding: 0 12px 0 0;
2548
slider {
2550
margin-right: $color_slider_margin;
2551
margin-left: $color_marks_slider_margin;
2552
}
2553
}
2554
}
2555
}
2556
}
2557
/*****************
2560
* Progress bars *
2561
*****************/
2562
progressbar {
2563
// sizing
2564
&.horizontal {
2565
trough,
2566
progress { min-height: $bar_size; }
2567
}
2568
&.vertical {
2570
trough,
2571
progress { min-width: $bar_size; }
2572
}
2573
// FIXME: insensitive state missing and some other state should be set probably
2575
color: $hint_fg_color;
2576
font-size: smaller;
2577
trough { background-color: rgba($primary_color, 0.3); }
2579
progress { background-color: $primary_color; }
2581
&.osd { // progressbar.osd used for epiphany page loading progress
2583
// min-width: $bar_size;
2584
// min-height: $bar_size;
2585
// background-color: transparent;
2586
// trough { background-color: transparent; }
2588
// progress { background-color: $primary_color; }
2590
}
2591
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2593
}
2594
/*************
2597
* Level Bar *
2598
*************/
2599
levelbar {
2600
&.horizontal {
2601
block { min-height: $bar_size; }
2602
&.discrete block {
2604
min-width: $medium_size;
2605
&:not(:last-child) { margin-right: 2px; }
2607
}
2608
}
2609
&.vertical {
2611
block { min-width: $bar_size; }
2612
&.discrete block {
2614
min-height: $medium_size;
2615
&:not(:last-child) { margin-bottom: 2px; }
2617
}
2618
}
2619
// imitate the entry style
2621
trough {
2622
// padding: 2px;
2623
// border-radius: $material_radius;
2624
// box-shadow: $shadow_1;
2625
// background-color: $base_color;
2626
// &:disabled { background-color: $alt_base_color; }
2628
}
2629
block {
2631
&.low { background-color: $warning_color; }
2632
&.high,
2634
&:not(.empty) { background-color: $primary_color; }
2635
&.full { background-color: $success_color; }
2637
&.empty { background-color: $divider_color; }
2639
}
2640
}
2641
/****************
2644
* Print dialog *
2645
*****************/
2646
printdialog {
2647
paper {
2648
padding: 0;
2649
border: 1px solid $border_color;
2650
background-color: $base_color;
2651
color: $fg_color;
2652
}
2653
.dialog-action-box { margin: 12px; }
2655
}
2656
/**********
2659
* Frames *
2660
**********/
2661
frame > border,
2662
.frame {
2663
margin: 0;
2664
padding: 0;
2665
border: 1px solid $border_color;
2666
border-radius: 0;
2667
box-shadow: none;
2668
&.flat { border-style: none; }
2670
}
2671
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2673
actionbar > revealer > box {
2675
padding: $container_padding;
2676
border-top: 1px solid $border_color;
2677
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2679
}
2680
scrolledwindow {
2682
viewport.frame { // avoid double borders when viewport inside scrolled window
2683
border-style: none;
2684
}
2685
// This is used when content is touch-dragged past boundaries.
2687
// draws a box on top of the content, the size changes programmatically.
2688
@at-root overshoot {
2689
&.top { @include overshoot(top); }
2690
&.bottom { @include overshoot(bottom); }
2692
&.left { @include overshoot(left); }
2694
&.right { @include overshoot(right); }
2696
}
2697
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2699
@at-root undershoot {
2700
&.top { @include undershoot(top); }
2701
&.bottom { @include undershoot(bottom); }
2703
&.left { @include undershoot(left); }
2705
&.right { @include undershoot(right); }
2707
}
2708
@at-root junction { // the small square between two scrollbars
2710
border-style: solid none none solid;
2711
border-width: 1px;
2712
border-color: $border_color;
2713
background-color: $base_color;
2714
&:dir(rtl) { border-style: solid solid none none; }
2716
}
2717
}
2718
// vbox and hbox separators
2720
separator {
2721
min-width: 1px;
2722
min-height: 1px;
2723
background-color: $border_color;
2724
}
2725
%hide_separators {
2727
min-width: 0;
2728
min-height: 0;
2729
background-color: transparent;
2730
}
2731
/*********
2734
* Lists *
2735
*********/
2736
list {
2737
border-color: $border_color;
2738
background-color: $base_color;
2739
row { padding: 2px; }
2741
}
2742
// FIXME
2744
$row_transition: $shorter_transition, background-color 0, color 0;
2745
row {
2747
&.activatable {
2748
transition: $row_transition,
2749
background-size $ripple_duration $deceleration_curve,
2750
background-image $ripple_opacity_duration $deceleration_curve;
2751
box-shadow: inset 0 0 0 9999px transparent;
2752
background-image: radial-gradient(circle farthest-corner at center,
2753
transparent 10%,
2754
transparent 0%);
2755
background-repeat: no-repeat;
2756
background-position: center;
2757
background-size: 1000% 1000%;
2758
&:hover {
2760
transition: $row_transition,
2761
box-shadow 0,
2762
background-size $ripple_duration $deceleration_curve,
2763
background-image $ripple_opacity_duration $deceleration_curve;
2764
box-shadow: inset 0 0 0 9999px $row_fill_color;
2765
}
2766
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2768
&:active {
2769
transition: $row_transition,
2770
background-size 0,
2771
background-image 0;
2772
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2773
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2774
background-image: radial-gradient(circle farthest-corner at center,
2775
$semi_fill_color 10%,
2776
transparent 0%);
2777
background-size: 0% 0%;
2778
}
2779
}
2780
&:selected { @extend %selected_items; }
2782
}
2783
/*********************
2786
* App Notifications *
2787
*********************/
2788
.app-notification {
2789
// @extend %osd;
2790
@extend toolbar.osd;
2792
margin: 8px;
2794
button { @extend %button_basic.flat; }
2796
&.frame,
2798
border { border-style: none; }
2799
}
2800
/*************
2803
* Expanders *
2804
*************/
2805
expander {
2806
title > arrow {
2807
transition: all $shorter_duration $deceleration_curve;
2808
min-width: 16px;
2809
min-height: 16px;
2810
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2811
-gtk-icon-transform: rotate(-90deg);
2812
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2814
&:checked { -gtk-icon-transform: unset; }
2816
color: $secondary_fg_color;
2818
&:hover, &:active { color: $fg_color; }
2820
&:disabled { color: $disabled_secondary_fg_color; }
2822
&:selected {
2824
color: $inverse_secondary_fg_color;
2825
&:hover, &:active { color: $inverse_fg_color; }
2827
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2829
}
2830
}
2831
}
2832
/************
2835
* Calendar *
2836
************/
2837
calendar {
2838
padding: 1px;
2839
border: 1px solid $border_color;
2840
color: $fg_color;
2841
&:disabled { color: $disabled_fg_color; }
2843
&:selected {
2845
@extend %selected_items;
2846
border-radius: $material_radius + 1px;
2848
}
2849
&.header {
2851
border-style: none none solid;
2852
border-radius: 0;
2853
}
2854
&.button { @extend %simple_flat_button; }
2856
&.highlight {
2858
color: $secondary_fg_color;
2859
font-weight: 500;
2860
}
2861
&:indeterminate { color: $disabled_secondary_fg_color; }
2863
}
2864
/***********
2867
* Dialogs *
2868
***********/
2869
messagedialog { // Message Dialog styling
2870
&.background { background-color: $popup_bg_color; }
2871
.titlebar {
2873
min-height: $small_size;
2874
border-style: none;
2875
box-shadow: inset 0 1px $highlight_color;
2876
background-color: $popup_bg_color;
2877
color: $fg_color;
2878
&:backdrop { color: $secondary_fg_color; }
2880
}
2881
&.csd { // rounded bottom border styling for csd version
2883
&.background {
2884
// bigger radius for better antialiasing
2885
border-bottom-left-radius: $material_radius;
2886
border-bottom-right-radius: $material_radius;
2887
}
2888
.dialog-action-area {
2890
margin-top: -$container_padding;
2891
padding: $container_padding;
2892
button {
2894
@extend %simple_flat_button;
2895
border-radius: $material_radius;
2896
&:not(:last-child) { margin-right: $container_padding; }
2898
&.suggested-action:not(:disabled) { color: $suggested_color; }
2900
&.destructive-action:not(:disabled) { color: $destructive_color; }
2902
}
2903
}
2904
}
2905
entry { @extend %entry.flat; }
2907
}
2908
filechooser {
2910
.dialog-action-box { border-top: 1px solid $border_color; }
2911
#pathbarbox {
2913
border-bottom: 1px solid $border_color;
2914
background-color: $bg_color;
2915
}
2916
}
2917
filechooserbutton:drop(active) {
2919
box-shadow: none;
2920
}
2921
/***********
2924
* Sidebar *
2925
***********/
2926
.sidebar {
2927
border-style: none;
2928
background-color: $alt_base_color;
2929
@at-root %sidebar_left,
2931
&:dir(ltr),
2932
&.left,
2933
&.left:dir(rtl) {
2934
border-right: 1px solid $border_color;
2935
border-left-style: none;
2936
}
2937
@at-root %sidebar_right,
2939
&:dir(rtl),
2940
&.right {
2941
border-left: 1px solid $border_color;
2942
border-right-style: none;
2943
}
2944
list { background-color: transparent; }
2946
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2948
}
2949
stacksidebar {
2951
&.sidebar {
2952
&:dir(ltr),
2953
&.left,
2954
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2955
&:dir(rtl),
2957
&.right { list { @extend %sidebar_right; }}
2958
}
2959
row {
2961
padding: 10px 4px;
2962
> label {
2964
padding-left: 6px;
2965
padding-right: 6px;
2966
}
2967
&.needs-attention > label { @extend %needs_attention; }
2969
}
2970
}
2971
/****************
2974
* File chooser *
2975
****************/
2976
// dim the sidebar icons, see bug #786613 for details on this oddity
2977
row {
2978
image.sidebar-icon { color: $secondary_fg_color; }
2979
&:selected image.sidebar-icon { color: $inverse_secondary_fg_color; }
2981
}
2982
placessidebar {
2984
> viewport.frame { border-style: none; }
2985
list { padding: (4px - 3px) 0 4px; }
2987
row {
2989
// Needs overriding of the GtkListBoxRow padding
2990
min-height: 32px;
2991
margin: -1px 0; // Remove unknown margins
2992
padding: 0;
2993
// Using margins/padding directly in the SidebarRow
2995
// will make the animation of the new bookmark row jump
2996
> revealer { padding: 0 12px; }
2997
&:selected { color: $inverse_fg_color; }
2999
&:disabled { color: $disabled_fg_color; }
3001
image.sidebar-icon {
3003
&:dir(ltr) { padding-right: 8px; }
3004
&:dir(rtl) { padding-left: 8px; }
3005
}
3006
label.sidebar-label {
3008
&:dir(ltr) { padding-right: 2px; }
3009
&:dir(rtl) { padding-left: 2px; }
3010
}
3011
@at-root button.sidebar-button {
3013
@extend %simple_flat_button;
3014
@extend %small_button;
3016
row:selected & { @extend %button_selected.flat; }
3018
}
3019
&.sidebar-placeholder-row {
3021
min-height: 2px;
3022
padding: 0 8px;
3023
background-image: image($secondary_color);
3024
background-clip: content-box;
3025
}
3026
&.sidebar-new-bookmark-row { color: $secondary_color; }
3028
&:drop(active):not(:disabled) {
3030
box-shadow: inset 0 0 0 2px $secondary_color;
3031
&:selected {
3033
// background-color: $secondary_color;
3034
// color: $inverse_fg_color;
3035
}
3036
}
3037
}
3038
}
3039
placesview {
3041
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3042
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3044
// this selects the "connect to server" label
3046
> actionbar > revealer > box > label {
3047
padding-left: 8px;
3048
padding-right: 8px;
3049
}
3050
}
3051
/*********
3054
* Paned *
3055
*********/
3056
paned {
3057
> separator {
3058
min-width: 1px;
3059
min-height: 1px;
3060
-gtk-icon-source: none; // defeats the ugly default handle decoration
3061
border-style: none; // just to be sure
3062
background-color: transparent;
3063
// workaround, using background istead of a border since the border will get rendered twice (?)
3064
background-image: image($border_color);
3065
background-size: 1px 1px;
3066
background-clip: content-box; // avoids borders image being rendered twice (?)
3067
&.wide {
3069
min-width: 6px;
3070
min-height: 6px;
3071
background-color: $bg_color;
3072
background-image: image($border_color), image($border_color);
3073
background-size: 1px 1px, 1px 1px;
3074
}
3075
}
3076
&.horizontal > separator {
3078
background-repeat: repeat-y;
3079
&:dir(ltr) {
3081
margin: 0 -8px 0 0;
3082
padding: 0 8px 0 0;
3083
background-position: left;
3084
}
3085
&:dir(rtl) {
3087
margin: 0 0 0 -8px;
3088
padding: 0 0 0 8px;
3089
background-position: right;
3090
}
3091
&.wide {
3093
margin: 0;
3094
padding: 0;
3095
background-repeat: repeat-y, repeat-y;
3096
background-position: left, right;
3097
}
3098
}
3099
&.vertical > separator {
3101
margin: 0 0 -8px 0;
3102
padding: 0 0 8px 0;
3103
background-repeat: repeat-x;
3104
background-position: top;
3105
&.wide {
3107
margin: 0;
3108
padding: 0;
3109
background-repeat: repeat-x, repeat-x;
3110
background-position: bottom, top;
3111
}
3112
}
3113
}
3114
/**************
3117
* GtkInfoBar *
3118
**************/
3119
infobar {
3120
border-style: none;
3121
&.info { background-color: $info_bg_color; }
3123
&.question { background-color: $question_bg_color; }
3125
&.warning { background-color: $warning_bg_color; }
3127
&.error { background-color: $error_bg_color; }
3129
&.info,
3131
&.question,
3132
&.warning,
3133
&.error {
3134
> label, & { color: $inverse_fg_color; }
3135
button { @extend %button_selected; }
3137
selection {}
3139
*:link { @extend %link_selected; }
3141
}
3142
}
3143
/************
3146
* Tooltips *
3147
************/
3148
tooltip {
3149
&.background {
3150
// background-color needs to be set this way otherwise it gets drawn twice
3151
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3152
// box-shadow: inset 0 1px $highlight_color;
3153
background-color: $tooltip_bg_color;
3154
color: $tooltip_fg_color;
3155
}
3156
// padding: 4px; /* not working */
3158
border-radius: $material_radius;
3159
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3160
&:not(.csd):not(.unity-csd) {
3162
// border: 1px solid $border_color;
3163
// border-radius: $material_radius + 1px;
3164
// background-clip: $extra_background_clip;
3165
}
3166
// FIXME: we need a border or tooltips vanish on black background.
3168
decoration { background-color: transparent; }
3169
label {
3171
// tooltip label already seems to have 6px margins
3172
min-height: 32px - 6px * 2;
3173
padding: 0 8px - 6px;
3174
}
3175
* {
3177
// workaround for Eclipse.
3178
// do not include any declaration here.
3179
// padding: 0;
3180
// background-color: transparent;
3181
// color: inherit;
3182
}
3183
}
3184
/*****************
3187
* Color Chooser *
3188
*****************/
3189
colorswatch {
3190
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3191
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3192
// applied to the overlay box.
3193
// base color corners rounding
3195
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3196
// sports a bigger radius.
3197
// nth-child is needed by the custom color strip.
3198
&.top {
3200
border-top-left-radius: $material_radius + 0.5px;
3201
border-top-right-radius: $material_radius + 0.5px;
3202
overlay {
3204
border-top-left-radius: $material_radius;
3205
border-top-right-radius: $material_radius;
3206
}
3207
}
3208
&.bottom {
3210
border-bottom-left-radius: $material_radius + 0.5px;
3211
border-bottom-right-radius: $material_radius + 0.5px;
3212
overlay {
3214
border-bottom-left-radius: $material_radius;
3215
border-bottom-right-radius: $material_radius;
3216
}
3217
}
3218
&.left,
3220
&:first-child:not(.top) {
3221
border-top-left-radius: $material_radius + 0.5px;
3222
border-bottom-left-radius: $material_radius + 0.5px;
3223
overlay {
3225
border-top-left-radius: $material_radius;
3226
border-bottom-left-radius: $material_radius;
3227
}
3228
}
3229
&.right,
3231
&:last-child:not(.bottom) {
3232
border-top-right-radius: $material_radius + 0.5px;
3233
border-bottom-right-radius: $material_radius + 0.5px;
3234
overlay {
3236
border-top-right-radius: $material_radius;
3237
border-bottom-right-radius: $material_radius;
3238
}
3239
}
3240
&.dark { color: $light_fg_color; }
3242
&.light { color: $dark_fg_color; }
3244
&:drop(active) {
3246
box-shadow: none;
3247
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $secondary_color; }
3249
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $secondary_color; }
3251
}
3252
overlay {
3254
transition: $shadow_transition;
3255
box-shadow: $shadow_1;
3256
&:hover { box-shadow: $shadow_2; }
3258
}
3259
&#add-color-button {
3261
border-radius: $material_radius $material_radius 0 0;
3262
color: $light_fg_color;
3263
&:only-child { border-radius: $material_radius; }
3265
overlay {
3267
background-image: linear-gradient(to right,
3268
$error_bg_color 25%,
3269
$warning_bg_color 25%, $warning_bg_color 50%,
3270
$info_bg_color 50%, $info_bg_color 75%,
3271
$question_bg_color 75%);
3272
}
3273
}
3274
&:disabled {
3276
opacity: 0.5;
3277
overlay { box-shadow: none; }
3279
}
3280
row:selected & {
3282
}
3283
&#editor-color-sample {
3285
border-radius: $material_radius + 0.5px;
3286
overlay { border-radius: $material_radius; }
3288
// overlay:hover { box-shadow: $shadow_1; }
3290
}
3291
}
3292
// colorscale popup
3294
colorchooser .popover.osd {
3295
transition: $shadow_transition;
3296
border-radius: $material_radius;
3297
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3298
background-color: $popup_bg_color;
3299
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3301
spinbutton:not(.vertical) { @extend %entry.flat; }
3303
}
3304
/********
3307
* Misc *
3308
********/
3309
// content view (grid/list)
3310
.content-view {
3311
background-color: $bg_color;
3312
// &:hover { -gtk-icon-effect: highlight; }
3314
rubberband, .rubberband { @extend rubberband; }
3316
}
3317
.scale-popup {
3319
// .osd & { @extend %osd; }
3320
.osd & button.flat { // FIXME: quick hack, redo properly
3322
}
3323
button { // +/- buttons on GtkVolumeButton popup
3325
}
3326
}
3327
/**********************
3330
* Window Decorations *
3331
**********************/
3332
decoration {
3333
transition: $shadow_transition;
3334
border-radius: $material_radius $material_radius 0 0;
3335
box-shadow: $shadow_4, 0 16px 16px transparent;
3336
// FIXME rationalize shadows
3338
// this is used for the resize cursor area
3340
margin: 8px;
3341
&:backdrop {
3343
// the transparent shadow here is to enforce that the shadow extents don't
3344
// change when we go to backdrop, to prevent jumping windows.
3345
// The biggest shadow should be in the same order then in the active state
3346
// or the jumping will happen during the transition.
3347
box-shadow: $shadow_2, 0 16px 16px transparent;
3348
}
3349
.maximized &,
3351
.fullscreen &,
3352
.tiled &,
3353
.tiled-top &,
3354
.tiled-right &,
3355
.tiled-bottom &,
3356
.tiled-left & { border-radius: 0; }
3357
.popup & { box-shadow: none; }
3359
// server-side decorations as used by mutter
3361
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3362
.csd.popup & {
3364
border-radius: $material_radius;
3365
box-shadow: $shadow_2;
3366
}
3367
tooltip.csd & {
3369
border-radius: $material_radius;
3370
box-shadow: none;
3371
}
3372
messagedialog.csd & {
3374
border-radius: $material_radius;
3375
// box-shadow: $shadow_4, 0 16px 16px transparent;
3376
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3378
}
3379
.solid-csd & {
3381
margin: 0;
3382
// padding: 4px;
3383
border-radius: 0;
3384
box-shadow: none;
3385
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3386
background-color: $titlebar_bg_color;
3387
}
3388
}
3389
// Window Close button
3391
button.titlebutton {
3392
// @extend %simple_flat_button;
3393
@extend %circular_button;
3395
.selection-mode & {
3397
}
3398
}
3399
// catch all extend :)
3402
%selected_items {
3404
background-color: $primary_color;
3405
@at-root %nobg_selected_items, & {
3407
color: $inverse_fg_color;
3408
&:disabled { color: $inverse_disabled_fg_color; }
3410
}
3411
}
3412
.monospace { font-family: monospace; }
3414
/**********************
3417
* Touch Copy & Paste *
3418
**********************/
3419
// touch selection handlebars for the Popover.osd above
3420
cursor-handle {
3421
border-radius: $circular_radius;
3422
background-color: $secondary_color;
3423
background-image: none;
3424
&.top:dir(ltr), &.bottom:dir(rtl) {
3426
padding-left: 6px;
3427
border-top-right-radius: 0;
3428
}
3429
&.bottom:dir(ltr), &.top:dir(rtl) {
3431
padding-right: 6px;
3432
border-top-left-radius: 0;
3433
}
3434
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3436
-GtkWidget-text-handle-width: 24;
3437
-GtkWidget-text-handle-height: 30;
3438
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3440
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3441
url('#{$_url}@2.png'));
3442
}
3443
}
3444
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3446
// shortcut window keys
3448
.keycap {
3449
min-width: 28px - 8px * 2;
3450
min-height: 28px - 2px;
3451
margin-top: 2px;
3452
padding-bottom: 2px;
3453
padding-left: 8px;
3454
padding-right: 8px;
3455
border: solid 1px $border_color;
3457
border-radius: $material_radius + 1px;
3458
box-shadow: inset 0 -2px $border_color;
3459
background-color: $popup_bg_color;
3460
color: $fg_color;
3461
font-size: smaller;
3462
}
3463
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3465
transition: $shorter_transition;
3466
box-shadow: $shadow_1, inset 0 0 0 2px $secondary_color;
3467
caret-color: $secondary_color;
3468
}
3469
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3471
stackswitcher button.circular,
3473
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3474
min-width: $medium_size;
3475
min-height: $medium_size;
3476
padding: 0;
3477
}
3478
/*********
3481
* Emoji *
3482
*********/
3483
popover.emoji-picker {
3484
padding: 0;
3485
entry {
3487
border-bottom: 1px solid $border_color;
3488
border-bottom-left-radius: 0;
3489
border-bottom-right-radius: 0;
3490
box-shadow: none;
3491
}
3492
scrolledwindow { border-bottom: 1px solid $border_color; }
3494
}
3495
// mimic tab style
3497
button.emoji-section {
3498
margin-top: -1px;
3499
padding: 0 8px;
3500
min-width: 24px;
3501
min-height: $medium_size;
3502
border-radius: 0;
3503
outline-offset: -6px;
3504
box-shadow: none;
3505
&:hover { box-shadow: inset 0 2px $track_color; }
3507
&:active {
3509
box-shadow: inset 0 2px $primary_color;
3510
background-image: radial-gradient(circle farthest-corner at center,
3511
rgba($primary_color, 0.7) 10%,
3512
transparent 0%);
3513
}
3514
&:checked {
3516
box-shadow: inset 0 2px $primary_color;
3517
background-color: transparent;
3518
}
3519
&:first-child { margin-left: 4px; }
3521
&:last-child { margin-right: 4px; }
3523
}
3524
.emoji {
3526
min-width: 3em;
3527
min-height: 3em;
3528
padding: 0;
3529
// font-size: large;
3530
widget {
3532
transition: $shorter_transition;
3533
&:hover { font-size: larger; }
3535
}
3536
}
3537