ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error;
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: $corner-radius;
32
-gtk-secondary-caret-color: $primary;
34
&:focus { outline-color: $overlay-checked; }
36
}
37
/***************
40
* Base States *
41
***************/
42
.background {
43
background-color: $background;
44
color: $text;
45
}
46
/*
48
These wildcard seems unavoidable, need to investigate.
49
Wildcards are bad and troublesome, use them with care,
50
or better, just don't.
51
Everytime a wildcard is used a kitten dies, painfully.
52
*/
53
*:disabled { -gtk-icon-effect: dim; }
55
.gtkstyle-fallback {
57
background-color: $background;
58
color: $text;
59
&:hover {
61
background-color: darken($background, 5%);
62
color: $text;
63
}
64
&:active {
66
background-color: darken($background, 10%);
67
color: $text;
68
}
69
&:disabled {
71
background-color: $background;
72
color: $text-disabled;
73
}
74
&:selected {
76
background-color: $primary;
77
color: on($primary);
78
}
79
}
80
.view {
82
// @extend row.activatable;
83
background-color: $base;
85
color: $text;
86
&:hover { box-shadow: inset 0 0 0 9999px $overlay-hover; }
88
&:selected:hover { box-shadow: inset 0 0 0 9999px rgba($primary, 0.08); }
90
&:disabled { color: $text-disabled; }
92
&:hover, &:selected { border-radius: $corner-radius; }
94
selection,
96
&:selected { @extend %selected_items; }
97
}
98
textview {
100
// FIXME: we need to override background-color to ensure text rendering
101
text { background-color: $base; }
102
border {
104
background-color: $base-alt;
105
color: $text-secondary; // FIXME: not working
106
}
107
}
108
// iconview { @extend .view; }
110
.rubberband,
112
rubberband {
113
border: 1px solid $primary-light;
114
background-color: rgba($primary-light, 0.3);
115
}
116
flowbox {
118
rubberband { @extend rubberband; }
119
flowboxchild {
121
padding: 4px;
122
border-radius: $corner-radius;
123
&:selected { @extend %selected_items; }
125
}
126
}
127
.content-view .tile {
129
// margin: 2px;
130
// padding: 0;
131
// border-radius: 0;
132
// background-color: black;
133
&:selected {
135
background-color: transparent;
136
}
137
}
138
label {
140
caret-color: currentColor; // this shouldn't be needed.
141
&.separator {
143
@extend .dim-label;
144
color: $text;
146
}
147
selection { @extend %selected_items; }
149
&:disabled {
151
color: $text-disabled;
152
// selection { @extend %selected_items:disabled; }
154
headerbar &,
156
tab &,
157
button & { color: inherit; }
158
}
159
}
160
.dim-label { opacity: 0.6; }
162
assistant {
164
.sidebar {
165
padding: 4px 0;
166
// background-color: $base;
167
// border-top: 1px solid $divider;
168
}
169
// &.csd .sidebar { border-top-style: none; }
171
.sidebar label {
173
min-height: $medium-size;
174
padding: 0 12px;
175
color: $text-disabled;
176
font-weight: 500;
177
&.highlight { color: $text; }
179
}
180
}
181
// %osd, .osd { opacity: 0.9; }
183
/*********************
186
* Spinner Animation *
187
*********************/
188
@keyframes spin {
189
to { -gtk-icon-transform: rotate(1turn); }
190
}
191
spinner {
193
background: none;
194
opacity: 0; // non spinning spinner makes no sense
195
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
196
&:checked {
198
opacity: 1;
199
animation: spin 1s linear infinite;
200
&:disabled { opacity: 0.5; }
202
}
203
}
204
/****************
207
* Text Entries *
208
****************/
209
%entry,
210
entry {
211
%entry_basic, & {
212
min-height: $medium-size;
213
padding: 0 8px;
214
border-radius: $corner-radius $corner-radius 0 0;
215
caret-color: currentColor; // this shouldn't be needed.
216
@include entry(normal);
218
&:focus { @include entry(checked); }
220
&:drop(active) { @include entry(hover); }
222
&:disabled { @include entry(disabled); }
224
&.flat {
226
min-height: 0;
227
padding: 2px;
228
border-radius: 0;
229
background-color: transparent;
230
}
231
image { // icons inside the entry
233
// @extend %simple_flat_button;
234
// min-height: $small-size;
236
// min-width: $small-size;
237
// border-radius: $circular-radius;
238
color: $text-secondary;
239
&:hover, &:active { color: $text; }
241
&:disabled { color: $text-disabled; }
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),
265
(warning, $warning) {
266
&.#{$e_type} {
267
@include entry(normal, $e_color);
268
&:focus { @include entry(checked, $e_color); }
270
&:disabled { @include entry(disabled, $e_color); }
272
}
273
}
274
.osd & {
276
}
277
}
278
progress {
280
margin: 2px -8px;
281
border-bottom: 2px solid $primary;
282
background-color: transparent;
283
}
284
// linked entries
286
.linked:not(.vertical) > & { @extend %linked_entry; }
287
// Vertically linked entries
289
.linked.vertical > & { @extend %linked_vertical_entry; }
290
}
291
%entry_raised {
293
border-radius: $corner-radius;
294
@include entry(raised-normal);
296
&:focus { @include entry(raised-focus); }
298
&:drop(active) { @include entry(raised-hover); }
300
&:disabled { @include entry(raised-disabled); }
302
// entry error and warning style
304
@each $e_type, $e_color in (error, $error),
305
(warning, $warning) {
306
&.#{$e_type} {
307
@include entry(raised-normal, $e_color);
308
&:focus { @include entry(raised-focus, $e_color); }
310
&:disabled { @include entry(raised-disabled, $e_color); }
312
image {
314
color: on($e_color, secondary);
315
&:hover, &:active { color: on($e_color); }
317
&:disabled { color: on($e_color, disabled); }
319
}
320
}
321
}
322
}
323
treeview entry {
325
&.flat, & {
326
background-color: $base;
327
&, &:focus {
329
border-image: none;
330
box-shadow: none;
331
}
332
}
333
}
334
.entry-tag {
336
margin: 2px;
337
border-radius: $circular-radius;
338
box-shadow: none;
339
background-color: $track-disabled;
340
color: $text;
341
&:hover { background-image: image($overlay-hover); }
343
// side margins: compensate the entry padding with a negative margin
345
// then the negative margin itself
346
:dir(ltr) & {
347
margin-left: 4px;
348
margin-right: 0;
349
padding-left: 12px;
350
padding-right: 8px;
351
}
352
:dir(rtl) & {
354
margin-left: 0;
355
margin-right: 4px;
356
padding-left: 8px;
357
padding-right: 12px;
358
}
359
// seems any sizing doesn't work
361
&.button {
362
box-shadow: none;
363
background-color: transparent;
364
&:not(:hover):not(:active) { color: $text-secondary; }
366
}
367
}
368
/***********
371
* Buttons *
372
***********/
373
// stuff for .needs-attention
374
@keyframes needs-attention {
375
from {
376
background-image: -gtk-gradient(radial,
377
center center, 0,
378
center center, 0.001,
379
to($primary),
380
to(transparent));
381
}
382
to {
384
background-image: -gtk-gradient(radial,
385
center center, 0,
386
center center, 0.5,
387
to($primary),
388
to(transparent));
389
}
390
}
391
%button,
393
button {
394
@at-root %button_basic, & {
395
min-height: 24px;
396
min-width: 16px;
397
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
398
border-radius: $corner-radius;
399
font-weight: 500;
400
@include button(normal);
402
&:focus { @include button(focus); }
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
&:drop(active) { @extend button:hover; }
416
@at-root %flat_button, &.flat {
418
@at-root %simple_flat_button, & {
419
@include button(flat-normal);
420
&:focus { @include button(flat-focus); }
422
&:hover { @include button(flat-hover); }
424
&:active { @include button(flat-active); }
426
&:disabled { @include button(flat-disabled); }
428
}
429
&:checked { @include button(flat-checked); }
431
&:checked:disabled { @include button(flat-checked-disabled); }
433
}
434
&.text-button {
436
padding-left: 16px;
437
padding-right: 16px;
438
}
439
&.image-button {
441
min-width: 24px;
442
padding: ($medium-size - 24px) / 2;
443
@extend %circular_button;
445
}
446
&.text-button.image-button {
448
border-radius: $corner-radius;
449
label {
451
&:first-child { margin-left: 16px - ($medium-size - 24px) / 2; }
452
&:last-child { margin-right: 16px - ($medium-size - 24px) / 2; }
454
}
455
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
457
}
458
.linked > & { @extend %linked; }
460
.linked.vertical > & { @extend %linked_vertical; }
462
.linked > &.flat,
464
.linked.vertical > &.flat {
465
border-radius: $corner-radius;
466
&.image-button { @extend %circular_button; }
468
&.text-button.image-button {
470
border-radius: $corner-radius;
471
}
472
}
473
}
474
@at-root %button_selected {
476
&.flat {
477
color: on(dark, secondary);
478
&:focus, &:hover, &:active, &:checked { color: on(dark); }
480
&:disabled { color: on(dark, secondary-disabled); }
482
&:checked:disabled { color: on(dark, disabled); }
484
}
485
}
486
// big standalone buttons like in Documents pager
488
&.osd {
489
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
490
&.image-button { padding: ($large-size - 24px) / 2; }
492
&:disabled { opacity: 0; }
494
}
495
// overlay / OSD style
497
@at-root %osd_button,
498
.osd & {
499
}
500
// Suggested and Destructive Action buttons
502
@each $b_type, $b_color in (suggested-action, $suggested),
503
(destructive-action, $destructive) {
504
&.#{$b_type} {
505
background-color: $b_color;
506
color: on($b_color);
507
&:disabled { @include button(disabled); }
509
&:checked { background-color: mix(on($b_color), $b_color, percentage(0.3)); }
511
&.flat {
513
background-color: transparent;
514
color: $b_color;
515
&:disabled { @include button(flat-disabled); }
517
&:checked { background-color: rgba($b_color, 0.3); }
519
}
520
.osd & {
522
}
523
}
524
}
525
.stack-switcher > & {
527
// to position the needs attention dot, padding is added to the button
528
// child, a label needs just lateral padding while an icon needs vertical
529
// padding added too.
530
> label {
532
padding-left: 6px; // label padding
533
padding-right: 6px; //
534
}
535
> image {
537
padding-left: 6px; // image padding
538
padding-right: 6px; //
539
padding-top: 3px; //
540
padding-bottom: 3px; //
541
}
542
&.text-button {
544
// compensate text-button paddings
545
padding-left: 16px - 6px;
546
padding-right: 16px - 6px;
547
}
548
&.image-button {
550
// we want image buttons to have a 1:1 aspect ratio, so compensation
551
// of the padding added to the GtkImage is needed
552
padding-left: ($medium-size - 16px) / 2 - 6px;
553
padding-right: ($medium-size - 16px) / 2 - 6px;
554
}
555
&.needs-attention {
557
> label,
558
> image { @extend %needs-attention; }
559
&:checked {
561
> label,
562
> image {
563
animation: none;
564
background-image: none;
565
}
566
}
567
}
568
}
569
// hide separators
571
&.font,
572
&.file { separator { @extend %hide_separators; }}
573
// &.font { > box > box > label { font-weight: bold; }}
575
// inline-toolbar buttons
577
.inline-toolbar & {
578
// @extend %button_basic.flat;
579
&:not(.text-button) { @extend %circular_button; }
581
}
582
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
584
@at-root %circular_button,
586
&.close,
587
&.circular { // The Bloody Circul Button
588
border-radius: $circular-radius;
589
// label { padding: 0; }
591
}
592
@at-root %small_button {
594
min-height: $small-size;
595
min-width: $small-size;
596
padding: 0;
597
border-radius: $circular-radius;
598
}
599
}
600
%needs-attention {
602
animation: needs-attention $ripple-fade-in-duration $ease-out forwards;
603
background-repeat: no-repeat;
604
background-position: right 3px;
605
background-size: 6px 6px;
606
&:dir(rtl) { background-position: left 3px; }
608
}
609
// all the following is for the +|- buttons on inline toolbars, that way
611
// should really be deprecated...
612
.inline-toolbar toolbutton > button { // redefining the button look is
613
// needed since those are flat...
614
}
615
// More inline toolbar buttons
617
toolbar.inline-toolbar toolbutton {
618
// > button.flat { @extend %linked_middle; }
619
// &:first-child > button.flat { @extend %linked:first-child; }
621
// &:last-child > button.flat { @extend %linked:last-child; }
623
// &:only-child > button.flat { @extend %linked:only-child; }
625
}
626
%linked_middle {
628
border-radius: 0;
629
}
630
%linked {
632
@extend %linked_middle;
633
&:first-child {
635
border-top-left-radius: $corner-radius;
636
border-bottom-left-radius: $corner-radius;
637
}
638
&:last-child {
640
border-top-right-radius: $corner-radius;
641
border-bottom-right-radius: $corner-radius;
642
}
643
&:only-child {
645
border-radius: $corner-radius;
646
}
647
}
648
%linked_vertical_middle {
650
border-radius: 0;
651
}
652
%linked_vertical {
654
@extend %linked_vertical_middle;
655
&:first-child {
657
border-top-left-radius: $corner-radius;
658
border-top-right-radius: $corner-radius;
659
}
660
&:last-child {
662
border-bottom-left-radius: $corner-radius;
663
border-bottom-right-radius: $corner-radius;
664
}
665
&:only-child {
667
border-radius: $corner-radius;
668
}
669
}
670
%linked_entry {
672
@extend %linked_middle;
673
&:first-child {
675
border-radius: $corner-radius 0 0 0;
676
}
677
&:last-child {
679
border-radius: 0 $corner-radius 0 0;
680
}
681
&:only-child {
683
border-radius: $corner-radius $corner-radius 0 0;
684
}
685
}
686
%linked_vertical_entry {
688
@extend %linked_vertical_middle;
689
&:first-child {
691
border-radius: $corner-radius $corner-radius 0 0;
692
}
693
&:last-child {
695
border-radius: 0;
696
}
697
&:only-child {
699
border-radius: $corner-radius $corner-radius 0 0;
700
}
701
}
702
/* menu buttons */
704
modelbutton.flat,
705
.menuitem.button.flat {
706
min-height: $menuitem-size;
707
padding: 0 8px;
708
border-radius: $corner-radius;
709
color: inherit;
710
@extend %simple_flat_button;
712
&:selected { @extend %selected_items; }
714
}
715
modelbutton.flat arrow {
717
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
718
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
720
}
721
button.color {
723
min-height: $small-size;
724
min-width: $small-size;
725
padding: $container-padding;
726
colorswatch:only-child {
728
// &, overlay { border-radius: 0; }
729
}
730
}
731
/*********
734
* Links *
735
*********/
736
*:link {
737
color: $link;
738
&:visited { color: $link-visited; }
740
}
741
button:link,
743
button:visited {
744
&, &:focus, &:hover, &:active { @extend *:link; }
745
> label { text-decoration-line: underline; }
747
}
748
/*****************
750
* GtkSpinButton *
751
*****************/
752
spinbutton {
753
&:not(.vertical) {
754
// in this horizontal configuration, the whole spinbutton
755
// behaves as the entry, so we extend the entry styling
756
// and nuke the style on the internal entry
757
@extend %entry;
758
padding: 0;
760
entry {
762
min-width: $large-size - 8px * 2;
763
// reset all the other props since the spinbutton node is styled here
764
margin: 0;
765
border-image: none;
766
border-radius: 0;
767
box-shadow: none;
768
background-color: transparent;
769
}
770
button {
772
// margin: $container-padding;
773
border: solid $container-padding transparent;
774
@extend %simple_flat_button;
776
@extend %small_button;
778
// Remove unwanted focus indicator
780
&:focus:not(:hover):not(:active) {
781
box-shadow: inset 0 0 0 9999px transparent;
782
color: $text-secondary;
783
}
784
&.up:dir(ltr),
786
&.down:dir(rtl) { margin-left: -$container-padding / 2; }
787
&.up:dir(rtl),
789
&.down:dir(ltr) { margin-right: -$container-padding / 2; }
790
}
791
}
792
// OSD horizontal
794
.osd &:not(.vertical) {
795
}
796
// Vertical
798
&.vertical {
799
// in the vertical configuration, we treat the spinbutton
800
// as a box, and tweak the style of the entry in the middle
801
// so that it's linked
802
// FIXME: this should not be set at all, but otherwise it gets the wrong
804
// color
805
&:disabled { color: $text-disabled; }
806
entry {
808
@extend %entry_raised;
809
min-height: $medium-size;
811
min-width: $large-size;
812
padding: 0;
813
}
814
button {
816
min-height: $medium-size;
817
min-width: $large-size;
818
padding: 0;
819
@extend %simple_flat_button;
821
// Remove unwanted focus indicator
823
&:focus:not(:hover):not(:active) {
824
box-shadow: inset 0 0 0 9999px transparent;
825
color: $text-secondary;
826
}
827
&.up { border-radius: $corner-radius $corner-radius 0 0; }
829
&.down { border-radius: 0 0 $corner-radius $corner-radius; }
831
}
832
}
833
// OSD vertical
835
.osd &.vertical {
836
}
837
// Misc
839
treeview &:not(.vertical) {
840
min-height: 0;
841
border-style: none;
842
border-radius: 0;
843
entry {
845
min-height: 0;
846
padding: 1px 2px;
847
}
848
}
849
}
850
/**************
853
* ComboBoxes *
854
**************/
855
combobox {
856
arrow {
857
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
858
min-height: 16px;
859
min-width: 16px;
860
}
861
decoration,
863
button.combo:checked { transition: none; } // workaround for menuitem selection
864
button.combo cellview {
866
&:dir(ltr) { margin-left: 8px - ($medium-size - 16px) / 2; }
867
&:dir(rtl) { margin-right: 8px - ($medium-size - 16px) / 2; }
868
}
869
#gtk-combobox-popup-menu {
871
padding: 2px 0;
872
menuitem {
874
min-height: $medium-size - 2px * 2;
875
padding: 0 8px;
876
}
877
// overflow arrows
879
> arrow {
880
&.top { margin-top: -2px; }
881
&.bottom {
883
margin-top: 2px * 2;
884
margin-bottom: -2px * 3;
885
}
886
}
887
}
888
&.linked {
890
button:nth-child(2) {
891
&:dir(ltr) { @extend %linked_entry:last-child; }
892
&:dir(rtl) { @extend %linked_entry:first-child; }
893
}
894
}
895
> .linked > button {
897
@extend %linked_middle;
898
&:first-child { @extend %linked_entry:first-child; }
900
&:last-child { @extend %linked_entry:last-child; }
902
&:only-child { @extend %linked_entry:only-child; }
904
}
905
}
906
// the combo is a composite widget so the way we do button linking doesn't
908
// work, special case needed. See
909
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
910
.linked:not(.vertical) > combobox {
912
> box > button.combo { @extend %linked_middle; }
913
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
915
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
917
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
919
}
920
.linked.vertical > combobox {
922
> box > button.combo { @extend %linked_vertical_middle; }
923
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
925
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
927
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
929
}
930
button.combo {
932
border-radius: $corner-radius $corner-radius 0 0;
933
background-image: none;
934
font-weight: inherit;
935
@include entry(normal);
937
&:focus { @include entry(focus); }
939
&:hover { @include entry(hover); }
941
&:checked { @include entry(checked); }
943
&:disabled { @include entry(disabled); }
945
}
946
/************
949
* Toolbars *
950
************/
951
toolbar {
952
-GtkWidget-window-dragging: true;
953
padding: 2px;
954
background-color: $background;
955
button { @extend %button_basic.flat; }
957
// on OSD
959
.osd & { background-color: transparent; }
960
// stand-alone OSD toolbars
962
&.osd {
963
transition: $transition-shadow;
964
padding: $container-padding;
965
border-radius: $corner-radius;
966
box-shadow: $shadow-2, inset 0 1px highlight($surface);
967
background-color: $surface;
968
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
970
&.left,
972
&.right,
973
&.top,
974
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
975
&.bottom {
977
box-shadow: none;
978
background-color: transparent;
979
background-image: linear-gradient(to bottom,
980
transparent,
981
rgba(black, 0.1) 30%,
982
rgba(black, 0.2) 50%,
983
rgba(black, 0.4));
984
}
985
}
986
// toolbar separators
988
&.horizontal > separator { margin: 2px; }
989
&.vertical > separator { margin: 2px; }
990
&:not(.inline-toolbar):not(.osd) {
992
scale,
993
entry,
994
spinbutton,
995
button { margin: 2px; }
996
.linked entry,
998
.linked spinbutton,
999
.linked button {
1000
&:not(:first-child) { margin-left: 0; }
1001
&:not(:last-child) { margin-right: 0; }
1002
}
1003
spinbutton {
1005
entry,
1006
button { margin: 0; }
1007
}
1008
switch { margin: 2px + $container-padding 2px; }
1010
}
1011
}
1012
// searchbar, location-bar & inline-toolbar
1014
.inline-toolbar {
1015
padding: $container-padding;
1016
border-style: solid;
1017
border-width: 0 1px 1px;
1018
border-color: $frame;
1019
background-color: $base-alt;
1020
}
1021
searchbar > revealer > box,
1023
.location-bar {
1024
padding: $container-padding;
1025
border-style: solid;
1026
border-width: 0 0 1px;
1027
border-color: $divider;
1028
background-color: $background;
1029
background-clip: border-box;
1030
}
1031
searchbar > revealer > box {
1033
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1034
margin: -6px;
1035
padding: $container-padding;
1036
}
1037
/***************
1040
* Header bars *
1041
***************/
1042
.titlebar {
1043
transition: background-color $duration $ease-out, color $duration $ease-out;
1044
border-radius: $corner-radius $corner-radius 0 0;
1045
box-shadow: $shadow-1, inset 0 1px highlight($titlebar);
1046
background-color: $titlebar;
1047
color: $titlebar-text;
1048
&:disabled { color: $titlebar-text-disabled; }
1050
&:backdrop {
1052
background-color: $titlebar-backdrop;
1053
color: $titlebar-text-secondary;
1054
&:disabled { color: $titlebar-text-secondary-disabled; }
1056
}
1057
.title {
1059
padding: 0 12px;
1060
font-weight: bold;
1061
}
1062
.subtitle {
1064
padding: 0 12px;
1065
font-size: smaller;
1066
@extend .dim-label;
1068
}
1069
// Don't draw titlebar above titlebar
1071
.titlebar {
1072
background-color: transparent;
1073
box-shadow: none;
1074
}
1075
&:not(headerbar) > separator {
1077
background-color: $divider;
1078
}
1079
entry {
1081
box-shadow: inset 0 -1px $titlebar-track;
1082
background-color: $titlebar-fill;
1083
color: $titlebar-text;
1084
&:disabled {
1086
box-shadow: inset 0 -1px $titlebar-track-disabled;
1087
background-color: $titlebar-fill;
1088
color: $titlebar-text-disabled;
1089
}
1090
image {
1092
color: $titlebar-text-secondary;
1093
&:hover, &:active { color: $titlebar-text; }
1095
&:disabled { color: $titlebar-text-disabled; }
1097
}
1098
}
1099
.linked:not(.vertical) > entry:not(.flat) { border-radius: $corner-radius $corner-radius 0 0; }
1101
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1103
@extend %button_basic.flat;
1104
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1106
$titlebar-indicator 0%,
1107
transparent 0%)
1108
0 0 0 / 0 0 0px;
1109
color: $titlebar-text-secondary;
1110
&:focus, &:hover, &:active { color: $titlebar-text; }
1112
&:disabled { color: $titlebar-text-secondary-disabled; }
1114
&:checked {
1116
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1117
$titlebar-indicator 100%,
1118
transparent 0%)
1119
0 0 2 / 0 0 2px;
1120
color: $titlebar-text;
1121
&:disabled { color: $titlebar-text-disabled; }
1123
&, &:disabled { background-color: transparent; }
1125
}
1126
&:backdrop {
1128
color: $titlebar-text-disabled;
1129
&:focus, &:hover, &:active { color: $titlebar-text-secondary; }
1131
&:disabled { color: $titlebar-text-secondary-disabled; }
1133
&:checked {
1135
color: $titlebar-text-secondary;
1136
&:disabled { color: $titlebar-text-secondary-disabled; }
1138
}
1139
}
1140
}
1141
button.suggested-action, button.destructive-action {
1143
&:disabled {
1144
background-color: $titlebar-fill;
1145
color: $titlebar-text-disabled;
1146
}
1147
}
1148
&.selection-mode {
1150
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1151
// but let's keep it for backwards compatibility.
1152
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1153
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1154
box-shadow: $shadow-1, inset 0 1px highlight($primary-dark);
1155
background-color: $primary-dark;
1156
color: on($primary-dark);
1157
&:backdrop {
1159
color: on($primary-dark, secondary);
1160
}
1161
.subtitle:link { color: on($primary-dark); }
1163
button:not(.suggested-action):not(.destructive-action) {
1165
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1166
currentColor 0%,
1167
transparent 0%)
1168
0 0 0 / 0 0 0px;
1169
color: on($primary-dark);
1170
&:disabled { color: on($primary-dark, disabled); }
1172
&:checked {
1174
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1175
currentColor 100%,
1176
transparent 0%)
1177
0 0 2 / 0 0 2px;
1178
color: on($primary-dark);
1179
&:disabled { color: on($primary-dark, disabled); }
1181
}
1182
&:backdrop {
1184
color: on($primary-dark, secondary);
1185
&:disabled { color: on($primary-dark, secondary-disabled); }
1187
&:checked {
1189
color: on($primary-dark, secondary);
1190
&:disabled { color: on($primary-dark, secondary-disabled); }
1192
}
1193
}
1194
}
1195
.selection-menu {
1197
padding-left: 16px;
1198
padding-right: 16px;
1199
arrow { -GtkArrow-arrow-scaling: 1; }
1201
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1203
}
1204
}
1205
.selection-mode {
1207
box-shadow: inset 0 1px highlight($primary-dark); // Avoid double shadows
1208
background-color: $primary-dark;
1209
}
1210
// squared corners when the window is maximized, tiled, or fullscreen
1212
.tiled &,
1213
.tiled-top &,
1214
.tiled-right &,
1215
.tiled-bottom &,
1216
.tiled-left &,
1217
.maximized &,
1218
.fullscreen & {
1219
border-radius: 0;
1220
box-shadow: $shadow-1;
1221
}
1222
&.default-decoration {
1224
min-height: $small-size;
1225
padding: $container-padding;
1226
box-shadow: inset 0 1px highlight($titlebar);
1227
.tiled &,
1229
.maximized &,
1230
.fullscreen & { box-shadow: none; }
1231
button.titlebutton {
1233
min-height: $small-size;
1234
min-width: $small-size;
1235
margin: 0;
1236
padding: 0;
1237
}
1238
// workaround for non-animatable buttons
1240
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1241
}
1242
.solid-csd & {
1244
&:dir(rtl), &:dir(ltr) { // specificity bump
1245
// margin-left: -2px;
1246
// margin-right: -2px;
1247
// margin-top: -2px;
1248
border-radius: 0;
1249
box-shadow: $shadow-1; // Remove highlight as window managers should have it
1250
}
1251
}
1252
}
1253
headerbar {
1255
min-height: $large-size;
1256
padding: 0 $container-padding;
1257
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1259
entry,
1260
spinbutton,
1261
button {
1262
margin-top: $container-padding;
1263
margin-bottom: $container-padding;
1264
}
1265
separator.titlebutton {
1267
margin-top: $large-size / 4;
1268
margin-bottom: $large-size / 4;
1269
background-color: $titlebar-divider;
1270
}
1271
switch {
1273
margin-top: ($large-size - 24px) / 2;
1274
margin-bottom: ($large-size - 24px) / 2;
1275
}
1276
// reset button margins of the spinbutton
1278
spinbutton button {
1279
margin-top: 0;
1280
margin-bottom: 0;
1281
}
1282
// FIXME: This is a hacky workaround.
1284
.entry-tag {
1285
margin-top: 5px;
1286
margin-bottom: 5px;
1287
}
1288
}
1289
// Development versions of apps to use a differently styled headerbar
1291
window.devel .titlebar:not(.selection-mode) {
1292
}
1293
/************
1296
* Pathbars *
1297
************/
1298
%pathbar_button,
1299
.path-bar button {
1300
padding-left: ($medium-size - 24px) / 2;
1301
padding-right: ($medium-size - 24px) / 2;
1302
label:not(:only-child) {
1304
&:first-child { margin-left: 4px; }
1305
&:last-child { margin-right: 4px; }
1307
}
1308
&.slider-button {
1310
padding-left: (24px - 16px) / 2;
1311
padding-right: (24px - 16px) / 2;
1312
}
1313
:not(headerbar) & {
1315
@extend %flat_button;
1316
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1318
$primary 0%,
1319
transparent 0%)
1320
0 0 0 / 0 0 0px;
1321
border-radius: $corner-radius;
1322
&:checked {
1324
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1325
$primary 100%,
1326
transparent 0%)
1327
0 0 2 / 0 0 2px;
1328
&, &:disabled { background-color: transparent; }
1330
}
1331
}
1332
}
1333
/**************
1336
* Tree Views *
1337
**************/
1338
treeview.view {
1339
@at-root * {
1340
-GtkTreeView-horizontal-separator: 4;
1341
-GtkTreeView-grid-line-width: 1;
1342
-GtkTreeView-grid-line-pattern: '';
1343
-GtkTreeView-tree-line-width: 1;
1344
-GtkTreeView-tree-line-pattern: '';
1345
-GtkTreeView-expander-size: 16;
1346
}
1347
border-left-color: $track; // this is actually the tree lines color,
1349
border-top-color: $divider; // while this is the grid lines color, better then nothing
1350
// FIXME: Avoid transparency background-color being slightly darker
1352
&:selected {
1353
background-color: $base;
1354
background-image: image($overlay-selected);
1355
}
1356
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1358
&:hover, &:selected { border-radius: 0; }
1360
&.separator {
1362
min-height: 1px + 2px * 2;
1363
color: $divider;
1364
}
1365
// FIXME: box-shadow, background-color and background-image are not available here.
1367
&:drop(active) {
1368
border-style: solid none;
1369
border-width: 9999px;
1370
border-color: $overlay-hover;
1371
&.after { border-top-style: none; }
1373
&.before { border-bottom-style: none; }
1375
}
1376
&.expander {
1378
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1379
-gtk-icon-transform: rotate(-90deg);
1380
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1382
&:checked { -gtk-icon-transform: unset; }
1384
color: $text-secondary;
1386
&:hover, &:active { color: $text; }
1388
&:disabled { color: $text-secondary-disabled; }
1390
}
1391
&.progressbar { // progress bar in treeviews
1393
border-bottom: $bar-size solid $primary;
1394
box-shadow: none;
1395
background-color: transparent;
1396
background-image: none;
1397
&:selected:hover { box-shadow: none; }
1399
}
1400
&.trough { // progress bar trough in treeviews
1402
border-bottom: $bar-size solid $track-disabled;
1403
box-shadow: none;
1404
background-color: transparent;
1405
background-image: none;
1406
&:selected:hover { box-shadow: none; }
1408
}
1409
header {
1411
button {
1412
@extend row.activatable;
1413
padding: 2px 6px;
1415
border-style: none solid solid none;
1416
border-width: 1px;
1417
border-color: $divider;
1418
border-radius: 0;
1419
background-clip: border-box;
1420
&:not(:focus):not(:hover):not(:active) { color: $text-secondary; }
1422
&, &:hover, &:active { box-shadow: none; }
1424
&, &:disabled { background-color: $base; }
1426
&:last-child { border-right-style: none; }
1428
}
1429
}
1430
button.dnd,
1432
header.button.dnd { // for treeview-like derive widgets
1433
padding: 2px 6px;
1434
border-style: none solid solid;
1435
border-width: 1px;
1436
border-color: $divider;
1437
border-radius: 0;
1438
box-shadow: none;
1439
background-color: $base;
1440
background-clip: border-box;
1441
color: $primary;
1442
}
1443
acceleditor > label { background-color: $primary; } // see tests/testaccel to test
1445
}
1446
/*********
1449
* Menus *
1450
*********/
1451
menubar,
1452
.menubar {
1453
-GtkWidget-window-dragging: true;
1454
padding: 0;
1455
// box-shadow: inset 0 -1px $divider;
1456
background-color: $titlebar;
1457
color: $titlebar-text;
1458
&:backdrop {
1460
background-color: $titlebar-backdrop;
1461
color: $titlebar-text-secondary;
1462
}
1463
.csd & { transition: $transition; }
1465
> menuitem {
1467
transition: $transition;
1468
min-height: 20px;
1469
padding: 4px 8px;
1470
color: $titlebar-text-secondary;
1471
&:hover { // Seems like it :hover even with keyboard focus
1473
transition: none;
1474
background-color: $overlay-checked;
1475
color: $titlebar-text;
1476
}
1477
&:disabled { color: $titlebar-text-secondary-disabled; }
1479
label:disabled { color: inherit; } // to inherit the above color
1481
}
1482
}
1483
// Needed to make the border-radius of menus work
1485
// otherwise the background bleeds out of the menu edges
1486
.background.popup { background-color: transparent; }
1487
menu,
1489
.menu,
1490
.context-menu {
1491
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1492
padding: 4px 0;
1493
box-shadow: inset 0 1px highlight($surface);
1494
background-color: $surface;
1495
border: 1px solid $frame; // adds borders in a non composited env
1496
.csd & {
1498
border: none; // axes borders in a composited env
1499
border-radius: $corner-radius;
1500
}
1501
menuitem {
1503
transition: background-color $duration $ease-out;
1504
min-height: 20px;
1505
min-width: 40px;
1506
padding: 4px 8px;
1507
color: $text;
1508
font: initial;
1509
text-shadow: none;
1510
&:hover {
1512
transition: none;
1513
background-color: $overlay-hover;
1514
}
1515
&:disabled { color: $text-disabled; }
1517
// submenu indicators
1519
arrow {
1520
min-height: 16px;
1521
min-width: 16px;
1522
&:dir(ltr) {
1524
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1525
margin-left: 8px;
1526
}
1527
&:dir(rtl) {
1529
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1530
margin-right: 8px;
1531
}
1532
}
1533
// avoids labels color being overridden, see
1535
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1536
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1537
}
1538
// overflow arrows
1540
> arrow {
1541
min-height: 16px;
1542
min-width: 16px;
1543
padding: 4px;
1544
background-color: $surface;
1545
color: $text-secondary;
1546
&.top {
1548
margin-top: -4px;
1549
border-bottom: 1px solid $divider;
1550
border-radius: $corner-radius $corner-radius 0 0;
1551
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1552
}
1553
&.bottom {
1555
margin-top: 4px * 2;
1556
margin-bottom: -4px * 3;
1557
border-top: 1px solid $divider;
1558
border-radius: 0 0 $corner-radius $corner-radius;
1559
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1560
}
1561
&:hover {
1563
background-image: image($overlay-hover);
1564
color: $text;
1565
}
1566
&:disabled {
1568
border-color: transparent;
1569
background-color: transparent;
1570
color: transparent;
1571
// color: $text-secondary-disabled;
1572
}
1573
}
1574
separator { margin: 4px 0; }
1576
}
1577
menuitem {
1579
accelerator { color: $text-secondary; }
1580
&:disabled accelerator { color: $text-secondary-disabled; }
1582
}
1583
/************
1586
* Popovers *
1587
************/
1588
popover.background {
1589
transition: $transition-shadow;
1590
padding: 2px;
1591
box-shadow: $shadow-2; // TODO: this should really have a highlight
1592
background-color: $surface;
1593
&:backdrop { box-shadow: $shadow-1; }
1595
&, .csd & {
1597
border-style: solid;
1598
border-width: 1px;
1599
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1600
border-radius: $corner-radius + 1px;
1601
}
1602
> stack { margin: -4px; } // remove extra padding from menu style popovers
1604
> toolbar { margin: -2px; }
1606
> list,
1608
> .view,
1609
> toolbar {
1610
border-style: none;
1611
box-shadow: none;
1612
background-color: transparent;
1613
}
1614
// FIXME: Use the popover color instead of transparent as a workaround for .view
1616
list,
1617
.view:not(:selected),
1618
toolbar { background-color: $surface; }
1619
// &.touch-selection,
1621
// &.magnifier,
1622
// &.osd { @extend %osd; }
1623
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1625
&.menu button,
1627
button.model {
1628
@extend %simple_flat_button;
1629
min-height: 32px;
1631
padding: 0 8px;
1632
border-radius: $corner-radius;
1633
&:checked { @extend %selected_items; }
1635
}
1636
separator { margin: 4px 0; }
1638
list separator { margin: 0; }
1640
}
1641
/*************
1643
* Notebooks *
1644
*************/
1645
notebook {
1646
frame > paned > & > header,
1647
&.frame > header { background-color: $base-alt; }
1648
&:focus tab:checked {
1650
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
1651
}
1652
> header {
1654
border-width: 1px;
1655
border-color: $divider;
1656
background-color: $background;
1657
background-clip: border-box;
1658
&.top {
1660
border-bottom-style: solid;
1661
> tabs {
1663
margin-bottom: -1px;
1664
> tab {
1666
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1667
&:checked { border-image-source: linear-gradient(to top, $primary 2px, $frame 2px); }
1669
&.reorderable-page { border-image-width: 0 1px 2px; }
1671
}
1672
}
1673
}
1674
&.bottom {
1676
border-top-style: solid;
1677
> tabs {
1679
margin-top: -1px;
1680
> tab {
1682
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1683
&:checked { border-image-source: linear-gradient(to bottom, $primary 2px, $frame 2px); }
1685
&.reorderable-page { border-image-width: 2px 1px 0; }
1687
}
1688
}
1689
}
1690
&.left {
1692
border-right-style: solid;
1693
> tabs {
1695
margin-right: -1px;
1696
> tab {
1698
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1699
&:checked { border-image-source: linear-gradient(to left, $primary 2px, $frame 2px); }
1701
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1703
}
1704
}
1705
}
1706
&.right {
1708
border-left-style: solid;
1709
> tabs {
1711
margin-left: -1px;
1712
> tab {
1714
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1715
&:checked { border-image-source: linear-gradient(to right, $primary 2px, $frame 2px); }
1717
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1719
}
1720
}
1721
}
1722
&.top > tabs > arrow {
1724
@extend %notebook_vert_arrows;
1725
border-top-style: none;
1727
}
1728
&.bottom > tabs > arrow {
1730
@extend %notebook_vert_arrows;
1731
border-bottom-style: none;
1733
}
1734
@at-root %notebook_vert_arrows {
1736
padding-left: 4px;
1737
padding-right: 4px;
1738
&.down {
1740
margin-left: -8px;
1741
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1742
}
1743
&.up {
1745
margin-right: -8px;
1746
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1747
}
1748
}
1749
&.left > tabs > arrow {
1751
@extend %notebook_horz_arrows;
1752
border-left-style: none;
1754
}
1755
&.right > tabs > arrow {
1757
@extend %notebook_horz_arrows;
1758
border-right-style: none;
1760
}
1761
@at-root %notebook_horz_arrows {
1763
padding-top: 4px;
1764
padding-bottom: 4px;
1765
&.down {
1767
margin-top: -8px;
1768
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1769
}
1770
&.up {
1772
margin-bottom: -8px;
1773
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1774
}
1775
}
1776
> tabs > arrow {
1778
@extend %simple_flat_button;
1779
min-height: 16px;
1781
min-width: 16px;
1782
border-radius: 0;
1783
}
1784
tab {
1786
transition: $transition,
1787
background-size 0ms,
1788
background-image 0ms;
1789
min-height: $small-size;
1790
min-width: $small-size;
1791
padding: $container-padding 12px;
1792
border-width: 1px; // for reorderable tabs
1794
border-color: transparent; //
1795
outline: none;
1797
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
1798
background-repeat: no-repeat;
1799
background-position: center;
1800
background-size: 0% 0%;
1801
background-clip: border-box;
1802
color: $text-secondary;
1804
font-weight: 500;
1805
&:hover {
1807
background-color: $overlay-hover;
1808
color: $text;
1809
}
1810
&:disabled { color: $text-secondary-disabled; }
1812
&:checked {
1814
transition: $transition,
1815
background-size $ripple-fade-in-duration $ease-out,
1816
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
1817
background-color: transparent;
1818
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
1819
background-size: 1000% 1000%;
1820
background-clip: padding-box;
1821
color: $text;
1822
&:disabled { color: $text-disabled; }
1824
&.reorderable-page {
1826
border-color: $frame;
1827
background-color: $base;
1828
}
1829
}
1830
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
1832
> box {
1833
transition: background-color $duration $ease-out;
1834
margin: -$container-padding -12px;
1835
padding: $container-padding 12px;
1836
&:drop(active) { @extend tab:hover; }
1838
}
1839
// colors the button like the label, overridden otherwise
1841
button.flat {
1842
@extend %small_button;
1843
&:last-child {
1845
margin-left: $container-padding;
1846
margin-right: $container-padding - 12px;
1847
}
1848
&:first-child {
1850
margin-left: $container-padding - 12px;
1851
margin-right: $container-padding;
1852
}
1853
}
1854
}
1855
&.top,
1857
&.bottom {
1858
tabs {
1859
padding-left: 8px;
1860
padding-right: 8px;
1861
&:not(:only-child) {
1863
&:first-child { margin-left: 0; }
1864
&:last-child { margin-right: 0; }
1866
}
1867
tab.reorderable-page { border-style: none solid; }
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; }
1882
}
1883
tab.reorderable-page { border-style: solid none; }
1885
}
1886
}
1887
}
1888
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1890
background-color: $base;
1891
}
1892
}
1893
/**************
1896
* Scrollbars *
1897
**************/
1898
scrollbar {
1899
$_slider_min_length: 24px;
1900
// disable steppers
1902
@at-root * {
1903
-GtkScrollbar-has-backward-stepper: false;
1904
-GtkScrollbar-has-forward-stepper: false;
1905
}
1906
transition: $transition;
1908
background-color: $base;
1909
background-clip: $background-clip-extra;
1910
// scrollbar border
1912
&.top { border-bottom: 1px solid $divider; }
1913
&.bottom { border-top: 1px solid $divider; }
1914
&.left { border-right: 1px solid $divider; }
1915
&.right { border-left: 1px solid $divider; }
1916
// slider
1918
slider {
1919
transition: $transition, margin 0ms, border-width 0ms;
1920
min-width: 8px;
1921
min-height: 8px;
1922
border: 4px solid transparent;
1923
border-radius: $circular-radius;
1924
background-clip: padding-box;
1925
background-color: $text-disabled;
1926
&:hover { background-color: $text-secondary; }
1928
&:active { background-color: $text; }
1930
&:disabled { background-color: $text-secondary-disabled; }
1932
}
1933
&.fine-tune {
1935
slider {
1936
transition: $transition, margin 0ms, border-width 0ms, min-width 0ms, min-height 0ms;
1937
min-width: 4px;
1938
min-height: 4px;
1939
}
1940
&.horizontal slider { margin: 2px 0; }
1942
&.vertical slider { margin: 0 2px; }
1944
}
1945
&.overlay-indicator {
1947
&:not(.dragging):not(.hovering) {
1948
border-color: transparent;
1949
background-color: transparent;
1950
slider {
1952
min-width: 4px;
1953
min-height: 4px;
1954
margin: 4px - 1px;
1955
border: 1px solid rgba($base, 0.3);
1956
}
1957
button {
1959
min-width: 4px;
1960
min-height: 4px;
1961
margin: 4px - 1px;
1962
border: 1px solid rgba($base, 0.3);
1963
border-radius: $circular-radius;
1964
background-color: $text-disabled;
1965
background-clip: padding-box;
1966
-gtk-icon-source: none;
1967
&:disabled { background-color: $text-secondary-disabled; }
1969
}
1970
&.horizontal {
1972
slider { min-width: $_slider_min_length; }
1973
button { min-width: 8px; }
1975
}
1976
&.vertical {
1978
slider { min-height: $_slider_min_length; }
1979
button { min-height: 8px; }
1981
}
1982
}
1983
&.dragging,
1985
&.hovering { background-color: rgba($base, 0.9); }
1986
}
1987
&.horizontal slider { min-width: $_slider_min_length; }
1989
&.vertical slider { min-height: $_slider_min_length; }
1991
// button styling
1993
button {
1994
@extend %simple_flat_button;
1995
min-width: 16px;
1997
min-height: 16px;
1998
padding: 0;
1999
border-radius: 0;
2000
}
2001
// button icons
2003
&.vertical {
2004
button {
2005
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2006
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2008
}
2009
}
2010
&.horizontal {
2012
button {
2013
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2014
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2016
}
2017
}
2018
}
2019
/**********
2022
* Switch *
2023
**********/
2024
switch {
2025
transition: all $duration $ease-out;
2026
margin: $container-padding 0;
2027
padding: 0 2px;
2028
border: 5px solid transparent;
2029
border-radius: $circular-radius;
2030
background-color: $track;
2031
background-clip: padding-box;
2032
font-size: 0;
2033
&:checked { background-color: rgba($primary, 0.5); }
2035
&:disabled { opacity: 0.5; }
2037
// hide on/off icons for >=3.24.5
2039
image {
2040
margin: -8px;
2041
-gtk-icon-transform: scale(0);
2042
}
2043
slider {
2045
transition: all $duration $ease-out;
2046
min-width: 20px;
2047
min-height: 20px;
2048
margin: -3px -2px;
2049
border-radius: $circular-radius;
2050
outline: none;
2051
box-shadow: 0 0 0 10px transparent, $shadow-1;
2052
background-color: $surface;
2053
}
2054
&:focus slider { box-shadow: 0 0 0 10px $overlay-focus, $shadow-1; }
2056
&:hover slider { box-shadow: 0 0 0 10px $overlay-hover, $shadow-1; }
2058
&:focus:hover slider { box-shadow: 0 0 0 10px $overlay-focus-hover, $shadow-1; }
2060
&:checked slider {
2062
background-color: $primary;
2063
color: $primary;
2064
}
2065
row:selected & {
2067
}
2068
}
2069
/*************************
2072
* Check and Radio items *
2073
*************************/
2074
// draw regular check and radio items using our PNG assets
2075
// all assets are rendered from assets.svg. never add pngs directly
2076
// selection-mode
2078
.view.content-view.check:not(list),
2079
.content-view .tile check:not(list) {
2080
min-height: 40px;
2081
min-width: 40px;
2082
margin: 0;
2083
padding: 0;
2084
box-shadow: none;
2085
background-color: transparent;
2086
background-image: none;
2087
-gtk-icon-shadow: $shadow-1;
2088
&:hover, &:active { -gtk-icon-shadow: $shadow-2; }
2090
@each $s, $as in ('', '-unchecked'),
2092
(':checked', '-checked') {
2093
&#{$s} {
2094
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}.png"),
2095
url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}@2.png"));
2096
}
2097
}
2098
}
2099
checkbutton,
2101
radiobutton {
2102
outline: none;
2103
}
2104
checkbutton.text-button,
2106
radiobutton.text-button {
2107
// this is for a nice focus on check and radios text
2108
padding: 2px;
2109
label:not(:only-child) { margin: 0 4px; }
2111
}
2112
$check_radio_size: 40px;
2114
check,
2116
radio {
2117
min-height: 24px;
2118
min-width: 24px;
2119
margin: -($check_radio_size - 24px) / 2;
2120
padding: ($check_radio_size - 24px) / 2;
2121
@extend %simple_flat_button;
2123
@extend %circular_button;
2125
&:checked, &:indeterminate {
2127
color: $primary;
2128
&:disabled { color: $text-secondary-disabled; }
2130
}
2131
// &:only-child { margin: -12px; }
2133
popover modelbutton.flat & {
2135
&, &:focus, &:hover, &:focus:hover, &:active, &:disabled {
2136
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2137
box-shadow: none;
2138
background-image: none;
2139
}
2140
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2142
&.left:dir(rtl) {
2144
margin-left: -12px;
2145
margin-right: -4px;
2146
}
2147
&.right:dir(ltr) {
2149
margin-left: -4px;
2150
margin-right: -12px;
2151
}
2152
}
2153
menu menuitem & {
2155
transition: none;
2156
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2157
padding: 0;
2158
&:dir(ltr) { margin-right: 8px; }
2160
&:dir(rtl) { margin-left: 8px; }
2162
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2164
&, &:hover, &:disabled {
2166
box-shadow: none;
2167
// color: inherit;
2168
}
2169
}
2170
}
2171
%check,
2173
check {
2174
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2175
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2177
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2179
}
2180
%radio,
2182
radio {
2183
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2184
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2186
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2188
border-image-slice: $check_radio_size / 2px;
2190
border-image-width: $check_radio_size / 2;
2191
$radio_indicator: 10px / $check_radio_size / 2;
2193
& {
2195
border-image-source: -gtk-gradient(radial,
2196
center center, 0,
2197
center center, 0.001,
2198
to($primary),
2199
to(transparent));
2200
}
2201
&:checked:not(:indeterminate) {
2203
border-image-source: -gtk-gradient(radial,
2204
center center, 0,
2205
center center, $radio_indicator,
2206
to($primary),
2207
to(transparent));
2208
}
2209
&:checked:not(:indeterminate):disabled {
2211
border-image-source: -gtk-gradient(radial,
2212
center center, 0,
2213
center center, $radio_indicator,
2214
to($text-secondary-disabled),
2215
to(transparent));
2216
}
2217
}
2218
%small_check,
2220
menu menuitem check {
2221
& {
2222
min-height: 16px;
2223
min-width: 16px;
2224
border-radius: $corner-radius;
2225
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2226
}
2227
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2229
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2231
}
2232
%small_radio,
2234
menu menuitem radio {
2235
& {
2236
min-height: 16px;
2237
min-width: 16px;
2238
border-image: none;
2239
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2240
}
2241
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2243
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2245
}
2246
// ANIMATION:
2248
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2249
// the transformation is set on the active state and it get reset on the checked state.
2250
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2251
treeview.view check,
2253
treeview.view radio {
2254
padding: 0;
2255
&:hover, &:selected {
2257
box-shadow: none;
2258
background-color: transparent;
2259
}
2260
& {
2262
color: $text-secondary;
2263
&:hover, &:active { color: $text; }
2265
&:disabled { color: $text-secondary-disabled; }
2267
&:checked, &:indeterminate { color: $primary; }
2269
&:checked:disabled, &:indeterminate:disabled { color: $text-secondary-disabled; }
2271
}
2272
}
2273
treeview.view radio:checked {
2275
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2276
border-image: none;
2277
}
2278
/************
2281
* GtkScale *
2282
************/
2283
scale {
2284
// sizing
2285
$_marks_length: 8px;
2286
$_marks_distance: 7px;
2287
$trough_size: 2px;
2289
$finetune_trough_size: 4px;
2290
$slider_size: 32px;
2292
$slider_margin: -($slider_size - $trough_size) / 2;
2294
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2295
$color_slider_margin: -($slider_size) * 3 / 4;
2297
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2298
min-height: $trough_size;
2300
min-width: $trough_size;
2301
&.horizontal { padding: ($medium-size - $trough_size) / 2 12px; }
2303
&.vertical { padding: 12px ($medium-size - $trough_size) / 2; }
2305
// the slider is inside the trough, so to have make it bigger there's a negative margin
2307
slider {
2308
min-height: $slider_size;
2309
min-width: $slider_size;
2310
margin: $slider_margin;
2311
}
2312
// click-and-hold the slider to activate
2314
&.fine-tune {
2315
&.horizontal {
2316
min-height: $finetune_trough_size;
2317
padding-top: ($medium-size - $finetune_trough_size) / 2;
2318
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2319
}
2320
&.vertical {
2322
min-width: $finetune_trough_size;
2323
padding-left: ($medium-size - $finetune_trough_size) / 2;
2324
padding-right: ($medium-size - $finetune_trough_size) / 2;
2325
}
2326
// to make the trough grow in fine-tune mode
2328
slider { margin: $finetune_slider_margin; }
2329
}
2330
// the backing bit
2332
trough {
2333
transition: background-color $duration $ease-out;
2334
outline: none;
2335
background-color: $track;
2336
&:disabled { background-color: $track-disabled; }
2338
}
2339
// the colored part of the backing bit
2341
highlight {
2342
transition: background-color $duration $ease-out;
2343
background-color: $primary;
2344
&:disabled { background-color: transparent; }
2346
}
2347
// this is another differently styled part of the backing bit, the most relevant use case is for example
2349
// in media player to indicate how much video stream as been cached
2350
fill {
2351
transition: background-color $duration $ease-out;
2352
background-color: $track;
2353
&:disabled { background-color: transparent; }
2355
}
2356
slider {
2358
transition: background-color $duration $ease-out,
2359
background-size $ripple-fade-out-duration $ease-out,
2360
background-image $ripple-fade-out-opacity-duration $ease-out;
2361
background-repeat: no-repeat;
2362
background-position: center;
2363
background-size: auto, 1000% 1000%;
2364
border-radius: 50%;
2365
color: $primary;
2366
@each $s, $as in ('', ''),
2368
(':disabled', '-disabled') {
2369
&#{$s} {
2370
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
2371
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2373
radial-gradient(circle, transparent 10%, transparent 0%);
2374
}
2375
}
2376
&:focus { background-color: $overlay-focus; }
2378
&:hover { background-color: $overlay-hover; }
2380
&:focus:hover { background-color: $overlay-focus-hover; }
2382
&:active {
2384
$_url: 'assets/scale-slider#{$asset-suffix}';
2385
transition: background-color $duration $ease-out,
2387
background-size 0ms,
2388
background-image 0ms;
2389
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2390
background-color: $overlay-hover;
2391
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2392
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2393
background-size: auto, 0% 0%;
2394
}
2395
}
2396
marks label,
2398
value { color: $text-secondary; }
2399
marks {
2401
color: $track;
2402
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2404
(bottom, bottom, top),
2405
(left, left, right),
2406
(right, right, left) {
2407
&.#{$marks_class} {
2408
margin-#{$marks_margin}: $_marks_distance;
2409
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2410
}
2411
}
2412
}
2413
&.fine-tune marks {
2415
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2416
(bottom, bottom, top),
2417
(left, left, right),
2418
(right, right, left) {
2419
&.#{$marks_class} {
2420
margin-#{$marks_margin}: $_marks_distance - 1px;
2421
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2422
}
2423
}
2424
}
2425
&.horizontal {
2427
indicator {
2428
min-height: $_marks_length;
2429
min-width: 1px;
2430
}
2431
}
2432
&.vertical {
2434
indicator {
2435
min-height: 1px;
2436
min-width: $_marks_length;
2437
}
2438
}
2439
// *WARNING* scale with marks madness following
2441
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2443
('vertical', 'vert') {
2444
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2445
('marks-after', 'marks-after:not(.marks-before)') {
2446
&.#{$dir_class}.#{$marks_class} {
2447
slider {
2448
@each $state, $state_infix in ('', ''),
2449
(':disabled', '-disabled') {
2450
&#{$state} {
2451
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2452
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2454
radial-gradient(circle, transparent 10%, transparent 0%);
2455
}
2456
}
2457
&:active {
2459
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$asset-suffix}';
2460
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2462
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2463
}
2464
}
2465
}
2466
}
2467
}
2468
&.color {
2470
min-height: 0;
2471
min-width: 0;
2472
&.horizontal {
2474
padding: 0 0 12px 0;
2475
slider {
2477
&:dir(ltr), &:dir(rtl) { // specificity bump
2478
margin-bottom: $color_slider_margin;
2479
margin-top: $color_marks_slider_margin;
2480
}
2481
}
2482
}
2483
&.vertical {
2485
&:dir(ltr) {
2486
padding: 0 0 0 12px;
2487
slider {
2489
margin-left: $color_slider_margin;
2490
margin-right: $color_marks_slider_margin;
2491
}
2492
}
2493
&:dir(rtl) {
2495
padding: 0 12px 0 0;
2496
slider {
2498
margin-right: $color_slider_margin;
2499
margin-left: $color_marks_slider_margin;
2500
}
2501
}
2502
}
2503
}
2504
}
2505
/*****************
2508
* Progress bars *
2509
*****************/
2510
progressbar {
2511
// sizing
2512
&.horizontal {
2513
trough,
2514
progress { min-height: $bar-size; }
2515
}
2516
&.vertical {
2518
trough,
2519
progress { min-width: $bar-size; }
2520
}
2521
// FIXME: insensitive state missing and some other state should be set probably
2523
color: $text-secondary;
2524
font-size: smaller;
2525
trough { background-color: $track-disabled; }
2527
progress { background-color: $primary; }
2529
&.osd { // progressbar.osd used for epiphany page loading progress
2531
// min-width: $bar-size;
2532
// min-height: $bar-size;
2533
// background-color: transparent;
2534
// trough { background-color: transparent; }
2536
// progress { background-color: $primary; }
2538
}
2539
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2541
}
2542
/*************
2545
* Level Bar *
2546
*************/
2547
levelbar {
2548
&.horizontal {
2549
block { min-height: $bar-size; }
2550
&.discrete block {
2552
min-width: $medium-size;
2553
&:not(:last-child) { margin-right: 2px; }
2555
}
2556
}
2557
&.vertical {
2559
block { min-width: $bar-size; }
2560
&.discrete block {
2562
min-height: $medium-size;
2563
&:not(:last-child) { margin-bottom: 2px; }
2565
}
2566
}
2567
// imitate the entry style
2569
trough {
2570
// padding: 2px;
2571
// border-radius: $corner-radius;
2572
// box-shadow: $shadow-1;
2573
// background-color: $base;
2574
// &:disabled { background-color: $base-alt; }
2576
}
2577
block {
2579
&.low { background-color: $warning; }
2580
&.high,
2582
&:not(.empty) { background-color: $primary; }
2583
&.full { background-color: $success; }
2585
&.empty { background-color: $track-disabled; }
2587
}
2588
}
2589
/****************
2592
* Print dialog *
2593
*****************/
2594
printdialog {
2595
paper {
2596
padding: 0;
2597
border: 1px solid $frame;
2598
background-color: $base;
2599
color: $text;
2600
}
2601
.dialog-action-box { margin: 12px; }
2603
}
2604
/**********
2607
* Frames *
2608
**********/
2609
frame > border,
2610
.frame {
2611
margin: 0;
2612
padding: 0;
2613
border: 1px solid $frame;
2614
border-radius: 0;
2615
box-shadow: none;
2616
&.flat { border-style: none; }
2618
}
2619
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2621
actionbar > revealer > box {
2623
padding: $container-padding;
2624
border-top: 1px solid $divider;
2625
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2627
}
2628
scrolledwindow {
2630
viewport.frame { // avoid double borders when viewport inside scrolled window
2631
border-style: none;
2632
}
2633
// This is used when content is touch-dragged past boundaries.
2635
// draws a box on top of the content, the size changes programmatically.
2636
@at-root overshoot {
2637
&.top { @include overshoot(top); }
2638
&.bottom { @include overshoot(bottom); }
2640
&.left { @include overshoot(left); }
2642
&.right { @include overshoot(right); }
2644
}
2645
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2647
@at-root undershoot {
2648
&.top { @include undershoot(top); }
2649
&.bottom { @include undershoot(bottom); }
2651
&.left { @include undershoot(left); }
2653
&.right { @include undershoot(right); }
2655
}
2656
@at-root junction { // the small square between two scrollbars
2658
border-style: solid none none solid;
2659
border-width: 1px;
2660
border-color: $divider;
2661
background-color: $base;
2662
&:dir(rtl) { border-style: solid solid none none; }
2664
}
2665
}
2666
// vbox and hbox separators
2668
separator {
2669
min-width: 1px;
2670
min-height: 1px;
2671
background-color: $divider;
2672
}
2673
%hide_separators {
2675
min-width: 0;
2676
min-height: 0;
2677
background-color: transparent;
2678
}
2679
/*********
2682
* Lists *
2683
*********/
2684
list {
2685
border-color: $frame;
2686
background-color: $base;
2687
row { padding: 2px; }
2689
}
2690
row {
2692
&.activatable {
2693
transition: $transition,
2694
background-size $ripple-fade-out-duration $ease-out,
2695
background-image $ripple-fade-out-opacity-duration $ease-out;
2696
outline: none;
2697
box-shadow: inset 0 0 0 9999px transparent;
2698
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2699
background-repeat: no-repeat;
2700
background-position: center;
2701
background-size: 1000% 1000%;
2702
&:focus {
2704
box-shadow: inset 0 0 0 9999px $overlay-focus;
2705
}
2706
&:hover {
2708
transition: $transition,
2709
box-shadow 0ms,
2710
background-size $ripple-fade-out-duration $ease-out,
2711
background-image $ripple-fade-out-opacity-duration $ease-out;
2712
box-shadow: inset 0 0 0 9999px $overlay-hover;
2713
}
2714
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2716
&:active {
2717
transition: $transition,
2718
background-size 0ms,
2719
background-image 0ms;
2720
animation: ripple $ripple-fade-in-duration $ease-out forwards;
2721
box-shadow: inset 0 0 0 9999px $overlay-hover;
2722
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
2723
background-size: 0% 0%;
2724
}
2725
}
2726
&:selected {
2728
@extend %selected_items;
2729
color: $primary; // for overlays
2730
image,
2732
label { color: $text; }
2733
button image,
2735
button label { color: inherit; }
2736
&:disabled {
2738
image,
2739
label { color: $text-disabled; }
2740
}
2741
}
2742
}
2743
/*********************
2746
* App Notifications *
2747
*********************/
2748
.app-notification {
2749
// @extend %osd;
2750
@extend toolbar.osd;
2752
margin: 8px;
2754
button { @extend %button_basic.flat; }
2756
&.frame,
2758
border { border-style: none; }
2759
}
2760
/*************
2763
* Expanders *
2764
*************/
2765
expander {
2766
title > arrow {
2767
transition: all $duration $ease-out;
2768
min-width: 16px;
2769
min-height: 16px;
2770
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2771
-gtk-icon-transform: rotate(-90deg);
2772
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2774
&:checked { -gtk-icon-transform: unset; }
2776
color: $text-secondary;
2778
&:hover, &:active { color: $text; }
2780
&:disabled { color: $text-secondary-disabled; }
2782
}
2783
}
2784
/************
2787
* Calendar *
2788
************/
2789
calendar {
2790
padding: 1px;
2791
border: 1px solid $frame;
2792
color: $text;
2793
&:disabled { color: $text-disabled; }
2795
&:selected {
2797
@extend %selected_items;
2798
border-radius: $corner-radius + 1px;
2800
}
2801
&.header {
2803
border-style: none none solid;
2804
border-color: $divider;
2805
border-radius: 0;
2806
}
2807
&.button { @extend %simple_flat_button; }
2809
&.highlight {
2811
color: $text-secondary;
2812
font-weight: 500;
2813
}
2814
&:indeterminate { color: $text-secondary-disabled; }
2816
}
2817
/***********
2820
* Dialogs *
2821
***********/
2822
messagedialog { // Message Dialog styling
2823
&.background { background-color: $surface; }
2824
.titlebar {
2826
min-height: $small-size;
2827
border-style: none;
2828
box-shadow: inset 0 1px highlight($surface);
2829
background-color: $surface;
2830
color: $text;
2831
&:backdrop {
2833
background-color: $surface;
2834
color: $text-secondary;
2835
}
2836
}
2837
&.csd { // rounded bottom border styling for csd version
2839
&.background {
2840
// bigger radius for better antialiasing
2841
border-bottom-left-radius: $corner-radius;
2842
border-bottom-right-radius: $corner-radius;
2843
}
2844
.dialog-action-area {
2846
margin-top: -$container-padding;
2847
padding: $container-padding;
2848
button {
2850
@extend %simple_flat_button;
2851
border-radius: $corner-radius;
2852
&:not(:last-child) { margin-right: $container-padding; }
2854
&:not(:disabled) { color: $primary; }
2856
// &.suggested-action:not(:disabled) { color: $suggested; }
2858
&.destructive-action:not(:disabled) { color: $destructive; }
2860
}
2861
}
2862
}
2863
}
2864
filechooser {
2866
.dialog-action-box { border-top: 1px solid $divider; }
2867
#pathbarbox {
2869
border-bottom: 1px solid $divider;
2870
background-color: $background;
2871
> stack > box > button { // The new folder button
2873
@extend %button_basic.flat;
2874
@extend %circular_button;
2875
}
2876
}
2877
}
2878
filechooserbutton:drop(active) {
2880
box-shadow: none;
2881
}
2882
/***********
2885
* Sidebar *
2886
***********/
2887
.sidebar {
2888
border-style: none;
2889
background-color: $base-alt;
2890
&:not(separator) {
2892
@at-root %sidebar_left,
2893
&:dir(ltr),
2894
&.left,
2895
&.left:dir(rtl) {
2896
border-right: 1px solid $divider;
2897
border-left-style: none;
2898
}
2899
@at-root %sidebar_right,
2901
&:dir(rtl),
2902
&.right {
2903
border-left: 1px solid $divider;
2904
border-right-style: none;
2905
}
2906
}
2907
list { background-color: transparent; }
2909
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2911
}
2912
stacksidebar.sidebar {
2914
& {
2915
&:dir(ltr),
2916
&.left,
2917
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2918
&:dir(rtl),
2920
&.right { list { @extend %sidebar_right; }}
2921
}
2922
+ separator.vertical,
2924
separator.horizontal { @extend %hide_separators; }
2925
list {
2927
padding: 4px;
2928
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
2929
}
2930
row {
2932
min-height: 32px;
2933
padding: 0 8px - 6px;
2934
border-radius: $corner-radius;
2935
&:selected {
2937
background-color: $overlay-checked;
2938
font-weight: 500;
2939
}
2940
+ row { margin-top: 4px; }
2942
> label {
2944
padding-left: 6px;
2945
padding-right: 6px;
2946
color: inherit;
2947
}
2948
&.needs-attention > label { @extend %needs-attention; }
2950
}
2951
}
2952
separator.sidebar {
2954
background-color: $divider;
2955
&.selection-mode,
2957
.selection-mode & {
2958
// background-color: $divider;
2959
}
2960
}
2961
/****************
2964
* File chooser *
2965
****************/
2966
// dim the sidebar icons, see bug #786613 for details on this oddity
2967
row {
2968
image.sidebar-icon { color: $text-secondary; }
2969
}
2970
placessidebar.sidebar {
2972
> viewport.frame { border-style: none; }
2973
list { padding: (4px - 3px) 0 4px; }
2975
row {
2977
// Needs overriding of the GtkListBoxRow padding
2978
min-height: 32px;
2979
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
2980
padding: 0;
2981
border-radius: $corner-radius;
2982
// Using margins/padding directly in the SidebarRow
2984
// will make the animation of the new bookmark row jump
2985
> revealer { padding: 0 8px; }
2986
&:selected { font-weight: 500; }
2988
&:disabled { color: $text-disabled; }
2990
image.sidebar-icon {
2992
&:dir(ltr) { padding-right: 8px; }
2993
&:dir(rtl) { padding-left: 8px; }
2994
}
2995
label.sidebar-label {
2997
&:dir(ltr) { padding-right: 2px; }
2998
&:dir(rtl) { padding-left: 2px; }
2999
}
3000
&:selected image.sidebar-icon,
3002
&:selected label.sidebar-label { color: inherit; }
3003
@at-root button.sidebar-button {
3005
@extend %simple_flat_button;
3006
@extend %small_button;
3007
}
3008
&.sidebar-placeholder-row { background-color: $overlay-hover; }
3010
&.sidebar-new-bookmark-row { color: $primary; }
3012
&:drop(active) { @extend row:hover; }
3014
}
3015
}
3016
placesview {
3018
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3019
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3021
// this selects the "connect to server" label
3023
> actionbar > revealer > box > label {
3024
padding-left: 8px;
3025
padding-right: 8px;
3026
}
3027
}
3028
/*********
3031
* Paned *
3032
*********/
3033
paned {
3034
> separator {
3035
min-width: 1px;
3036
min-height: 1px;
3037
-gtk-icon-source: none; // defeats the ugly default handle decoration
3038
border-style: none; // just to be sure
3039
background-color: transparent;
3040
// workaround, using background istead of a border since the border will get rendered twice (?)
3041
background-image: image($divider);
3042
background-size: 1px 1px;
3043
background-clip: content-box; // avoids borders image being rendered twice (?)
3044
&.wide {
3046
min-width: 6px;
3047
min-height: 6px;
3048
background-color: $background;
3049
background-image: image($divider), image($divider);
3050
background-size: 1px 1px, 1px 1px;
3051
}
3052
}
3053
&.horizontal > separator {
3055
background-repeat: repeat-y;
3056
&:dir(ltr) {
3058
margin: 0 -8px 0 0;
3059
padding: 0 8px 0 0;
3060
background-position: left;
3061
}
3062
&:dir(rtl) {
3064
margin: 0 0 0 -8px;
3065
padding: 0 0 0 8px;
3066
background-position: right;
3067
}
3068
&.wide {
3070
margin: 0;
3071
padding: 0;
3072
background-repeat: repeat-y, repeat-y;
3073
background-position: left, right;
3074
}
3075
}
3076
&.vertical > separator {
3078
margin: 0 0 -8px 0;
3079
padding: 0 0 8px 0;
3080
background-repeat: repeat-x;
3081
background-position: top;
3082
&.wide {
3084
margin: 0;
3085
padding: 0;
3086
background-repeat: repeat-x, repeat-x;
3087
background-position: bottom, top;
3088
}
3089
}
3090
}
3091
/**************
3094
* GtkInfoBar *
3095
**************/
3096
infobar {
3097
border-style: none;
3098
&.info,
3100
&.question {
3101
border-bottom: 1px solid $divider;
3102
background-color: $base;
3103
button {
3105
@extend %simple_flat_button;
3106
&.text-button {
3108
padding-left: 8px;
3109
padding-right: 8px;
3110
&:not(:disabled) { color: $primary; }
3112
}
3113
}
3114
}
3115
&.warning {
3117
background-color: $warning;
3118
color: on($warning);
3119
// button { @extend %button_selected; }
3121
selection {}
3123
*:link { color: on($warning); }
3125
}
3126
&.error {
3128
background-color: $error;
3129
color: on($error);
3130
button { @extend %button_selected; }
3132
selection {}
3134
*:link { color: on($error); }
3136
}
3137
}
3138
/************
3141
* Tooltips *
3142
************/
3143
tooltip {
3144
&.background {
3145
// background-color needs to be set this way otherwise it gets drawn twice
3146
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3147
background-color: $tooltip;
3148
color: on($tooltip);
3149
}
3150
// padding: 4px; /* not working */
3152
border-radius: $corner-radius;
3153
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3154
&:not(.csd):not(.unity-csd) {
3156
// border: 1px solid $frame;
3157
// border-radius: $corner-radius + 1px;
3158
// background-clip: $background-clip-extra;
3159
}
3160
// FIXME: we need a border or tooltips vanish on black background.
3162
decoration { background-color: transparent; }
3163
> box {
3165
margin: -6px; // Remove hard-coded 6px padding
3166
min-height: 32px - 4px * 2;
3167
padding: 4px 8px;
3168
}
3169
* {
3171
// workaround for Eclipse.
3172
// do not include any declaration here.
3173
// padding: 0;
3174
// background-color: transparent;
3175
// color: inherit;
3176
}
3177
}
3178
/*****************
3181
* Color Chooser *
3182
*****************/
3183
colorswatch {
3184
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3185
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3186
// applied to the overlay box.
3187
// base color corners rounding
3189
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3190
// sports a bigger radius.
3191
// nth-child is needed by the custom color strip.
3192
&.top {
3194
border-top-left-radius: $corner-radius + 0.5px;
3195
border-top-right-radius: $corner-radius + 0.5px;
3196
overlay {
3198
border-top-left-radius: $corner-radius;
3199
border-top-right-radius: $corner-radius;
3200
}
3201
}
3202
&.bottom {
3204
border-bottom-left-radius: $corner-radius + 0.5px;
3205
border-bottom-right-radius: $corner-radius + 0.5px;
3206
overlay {
3208
border-bottom-left-radius: $corner-radius;
3209
border-bottom-right-radius: $corner-radius;
3210
}
3211
}
3212
&.left,
3214
&:first-child:not(.top) {
3215
border-top-left-radius: $corner-radius + 0.5px;
3216
border-bottom-left-radius: $corner-radius + 0.5px;
3217
overlay {
3219
border-top-left-radius: $corner-radius;
3220
border-bottom-left-radius: $corner-radius;
3221
}
3222
}
3223
&.right,
3225
&:last-child:not(.bottom) {
3226
border-top-right-radius: $corner-radius + 0.5px;
3227
border-bottom-right-radius: $corner-radius + 0.5px;
3228
overlay {
3230
border-top-right-radius: $corner-radius;
3231
border-bottom-right-radius: $corner-radius;
3232
}
3233
}
3234
&.dark { color: on(dark); }
3236
&.light { color: on(light); }
3238
overlay {
3240
transition: $transition-shadow;
3241
box-shadow: $shadow-1;
3242
&:hover { box-shadow: $shadow-2; }
3244
&:drop(active) { box-shadow: $shadow-2; }
3246
}
3247
&#add-color-button {
3249
border-radius: $corner-radius $corner-radius 0 0;
3250
color: on(dark);
3251
&:only-child { border-radius: $corner-radius; }
3253
overlay {
3255
background-image: linear-gradient(to right,
3256
$red 25%,
3257
$yellow 25%, $yellow 50%,
3258
$green 50%, $green 75%,
3259
$blue 75%);
3260
}
3261
}
3262
&:disabled {
3264
opacity: 0.5;
3265
overlay { box-shadow: none; }
3267
}
3268
row:selected & {
3270
}
3271
&#editor-color-sample {
3273
border-radius: $corner-radius + 0.5px;
3274
overlay { border-radius: $corner-radius; }
3276
// overlay:hover { box-shadow: $shadow-1; }
3278
}
3279
}
3280
// colorscale popup
3282
colorchooser .popover.osd {
3283
transition: $transition-shadow;
3284
border-radius: $corner-radius;
3285
box-shadow: $shadow-2, inset 0 1px highlight($surface);
3286
background-color: $surface;
3287
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
3289
}
3290
/********
3293
* Misc *
3294
********/
3295
// content view (grid/list)
3296
.content-view {
3297
background-color: $background;
3298
// &:hover { -gtk-icon-effect: highlight; }
3300
rubberband, .rubberband { @extend rubberband; }
3302
}
3303
.scale-popup {
3305
// .osd & { @extend %osd; }
3306
.osd & button.flat { // FIXME: quick hack, redo properly
3308
}
3309
button { // +/- buttons on GtkVolumeButton popup
3311
}
3312
}
3313
/**********************
3316
* Window Decorations *
3317
**********************/
3318
decoration {
3319
transition: $transition-shadow;
3320
border-radius: $corner-radius $corner-radius 0 0;
3321
box-shadow: $shadow-4, 0 16px 16px transparent;
3322
// FIXME rationalize shadows
3324
// this is used for the resize cursor area
3326
margin: 8px;
3327
&:backdrop {
3329
// the transparent shadow here is to enforce that the shadow extents don't
3330
// change when we go to backdrop, to prevent jumping windows.
3331
// The biggest shadow should be in the same order then in the active state
3332
// or the jumping will happen during the transition.
3333
box-shadow: $shadow-2, 0 16px 16px transparent;
3334
}
3335
.maximized &,
3337
.fullscreen &,
3338
.tiled &,
3339
.tiled-top &,
3340
.tiled-right &,
3341
.tiled-bottom &,
3342
.tiled-left & { border-radius: 0; }
3343
.popup & { box-shadow: none; }
3345
// server-side decorations as used by mutter
3347
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3348
.csd.popup & {
3350
border-radius: $corner-radius;
3351
box-shadow: $shadow-2;
3352
}
3353
tooltip.csd & {
3355
border-radius: $corner-radius;
3356
box-shadow: none;
3357
}
3358
messagedialog.csd & {
3360
border-radius: $corner-radius;
3361
// box-shadow: $shadow-4, 0 16px 16px transparent;
3362
// &:backdrop { box-shadow: $shadow-2, 0 16px 16px transparent; }
3364
}
3365
.solid-csd & {
3367
margin: 0;
3368
// padding: 4px;
3369
border-radius: 0;
3370
box-shadow: none;
3371
// box-shadow: inset 0 0 0 4px $titlebar;
3372
background-color: $titlebar;
3373
}
3374
}
3375
// Window Close button
3377
button.titlebutton {
3378
// @extend %simple_flat_button;
3379
@extend %circular_button;
3381
.selection-mode & {
3383
}
3384
}
3385
// catch all extend :)
3388
%selected_items {
3390
background-color: $overlay-selected;
3391
}
3392
.monospace { font-family: monospace; }
3394
/**********************
3397
* Touch Copy & Paste *
3398
**********************/
3399
// touch selection handlebars for the Popover.osd above
3400
cursor-handle {
3401
color: $primary;
3402
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
3403
&.top:dir(ltr), &.bottom:dir(rtl) {
3405
-gtk-icon-transform: rotate(90deg);
3406
}
3407
&.bottom:dir(ltr), &.top:dir(rtl) {
3409
-gtk-icon-transform: unset;
3410
}
3411
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3413
padding-top: 6px;
3414
-gtk-icon-transform: rotate(45deg);
3415
}
3416
}
3417
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3419
// shortcut window keys
3421
.keycap {
3422
min-width: 28px - 8px * 2;
3423
min-height: 28px - 2px;
3424
margin-top: 2px;
3425
padding-bottom: 2px;
3426
padding-left: 8px;
3427
padding-right: 8px;
3428
border: solid 1px $frame;
3430
border-radius: $corner-radius + 1px;
3431
box-shadow: inset 0 -2px $frame;
3432
background-color: $surface;
3433
color: $text;
3434
font-size: smaller;
3435
}
3436
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3438
caret-color: $primary;
3439
}
3440
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3442
stackswitcher button.circular,
3444
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3445
min-width: $medium-size;
3446
min-height: $medium-size;
3447
padding: 0;
3448
}
3449
/*************
3452
* App Icons *
3453
*************/
3454
// Outline for low res icons
3455
.lowres-icon {
3456
// -gtk-icon-shadow: none;
3457
}
3458
// Drapshadow for large icons
3460
.icon-dropshadow {
3461
// -gtk-icon-shadow: none;
3462
}
3463
/*********
3466
* Emoji *
3467
*********/
3468
popover.emoji-picker {
3469
padding: 0;
3470
entry {
3472
border-bottom: 1px solid $divider;
3473
border-image: none;
3474
border-radius: 0;
3475
box-shadow: none;
3476
background-color: transparent;
3477
}
3478
scrolledwindow { border-bottom: 1px solid $divider; }
3480
}
3481
button.emoji-section {
3483
margin: 4px;
3484
&:checked {
3486
// background-color: transparent;
3487
color: $primary;
3488
}
3489
&:not(:last-child) { margin-right: 0; }
3491
}
3492
popover.emoji-picker .emoji {
3494
min-width: 3em;
3495
min-height: 3em;
3496
padding: 0 8px;
3497
// font-size: larger;
3498
widget {
3500
transition: $transition;
3501
border-radius: $corner-radius;
3502
&:hover { background-color: $overlay-hover; }
3504
}
3505
}
3506
popover.emoji-completion {
3508
padding: 8px 0;
3509
arrow {
3511
border: none;
3512
background: none;
3513
}
3514
.emoji-completion-row {
3516
min-height: $menuitem-size;
3517
padding: 0 12px;
3518
}
3519
.emoji:hover {
3521
background-color: $overlay-hover;
3522
}
3523
}
3524