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
color: $titlebar-text-secondary;
1053
&:disabled { color: $titlebar-text-secondary-disabled; }
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
// Don't draw titlebar above titlebar
1070
.titlebar {
1071
background-color: transparent;
1072
box-shadow: none;
1073
}
1074
&:not(headerbar) > separator {
1076
background-color: $divider;
1077
}
1078
entry {
1080
box-shadow: inset 0 -1px $titlebar-track;
1081
background-color: $titlebar-fill;
1082
color: $titlebar-text;
1083
&:disabled {
1085
box-shadow: inset 0 -1px $titlebar-track-disabled;
1086
background-color: $titlebar-fill;
1087
color: $titlebar-text-disabled;
1088
}
1089
image {
1091
color: $titlebar-text-secondary;
1092
&:hover, &:active { color: $titlebar-text; }
1094
&:disabled { color: $titlebar-text-disabled; }
1096
}
1097
}
1098
.linked:not(.vertical) > entry:not(.flat) { border-radius: $corner-radius $corner-radius 0 0; }
1100
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1102
@extend %button_basic.flat;
1103
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1105
$titlebar-indicator 0%,
1106
transparent 0%)
1107
0 0 0 / 0 0 0px;
1108
color: $titlebar-text-secondary;
1109
&:focus, &:hover, &:active { color: $titlebar-text; }
1111
&:disabled { color: $titlebar-text-secondary-disabled; }
1113
&:checked {
1115
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1116
$titlebar-indicator 100%,
1117
transparent 0%)
1118
0 0 2 / 0 0 2px;
1119
color: $titlebar-text;
1120
&:disabled { color: $titlebar-text-disabled; }
1122
&, &:disabled { background-color: transparent; }
1124
}
1125
&:backdrop {
1127
color: $titlebar-text-disabled;
1128
&:focus, &:hover, &:active { color: $titlebar-text-secondary; }
1130
&:disabled { color: $titlebar-text-secondary-disabled; }
1132
&:checked {
1134
color: $titlebar-text-secondary;
1135
&:disabled { color: $titlebar-text-secondary-disabled; }
1137
}
1138
}
1139
}
1140
button.suggested-action, button.destructive-action {
1142
&:disabled {
1143
background-color: $titlebar-fill;
1144
color: $titlebar-text-disabled;
1145
}
1146
}
1147
&.selection-mode {
1149
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1150
// but let's keep it for backwards compatibility.
1151
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1152
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1153
box-shadow: $shadow-1, inset 0 1px highlight($primary-dark);
1154
background-color: $primary-dark;
1155
color: on($primary-dark);
1156
&:backdrop {
1158
color: on($primary-dark, secondary);
1159
}
1160
.subtitle:link { color: on($primary-dark); }
1162
button:not(.suggested-action):not(.destructive-action) {
1164
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1165
currentColor 0%,
1166
transparent 0%)
1167
0 0 0 / 0 0 0px;
1168
color: on($primary-dark);
1169
&:disabled { color: on($primary-dark, disabled); }
1171
&:checked {
1173
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1174
currentColor 100%,
1175
transparent 0%)
1176
0 0 2 / 0 0 2px;
1177
color: on($primary-dark);
1178
&:disabled { color: on($primary-dark, disabled); }
1180
}
1181
&:backdrop {
1183
color: on($primary-dark, secondary);
1184
&:disabled { color: on($primary-dark, secondary-disabled); }
1186
&:checked {
1188
color: on($primary-dark, secondary);
1189
&:disabled { color: on($primary-dark, secondary-disabled); }
1191
}
1192
}
1193
}
1194
.selection-menu {
1196
padding-left: 16px;
1197
padding-right: 16px;
1198
arrow { -GtkArrow-arrow-scaling: 1; }
1200
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1202
}
1203
}
1204
.selection-mode {
1206
box-shadow: inset 0 1px highlight($primary-dark); // Avoid double shadows
1207
background-color: $primary-dark;
1208
}
1209
// squared corners when the window is maximized, tiled, or fullscreen
1211
.tiled &,
1212
.tiled-top &,
1213
.tiled-right &,
1214
.tiled-bottom &,
1215
.tiled-left &,
1216
.maximized &,
1217
.fullscreen & {
1218
border-radius: 0;
1219
box-shadow: $shadow-1;
1220
}
1221
&.default-decoration {
1223
min-height: $small-size;
1224
padding: $container-padding;
1225
box-shadow: inset 0 1px highlight($titlebar);
1226
.tiled &,
1228
.maximized &,
1229
.fullscreen & { box-shadow: none; }
1230
button.titlebutton {
1232
min-height: $small-size;
1233
min-width: $small-size;
1234
margin: 0;
1235
padding: 0;
1236
}
1237
// workaround for non-animatable buttons
1239
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1240
}
1241
.solid-csd & {
1243
&:dir(rtl), &:dir(ltr) { // specificity bump
1244
// margin-left: -2px;
1245
// margin-right: -2px;
1246
// margin-top: -2px;
1247
border-radius: 0;
1248
box-shadow: $shadow-1; // Remove highlight as window managers should have it
1249
}
1250
}
1251
}
1252
headerbar {
1254
min-height: $large-size;
1255
padding: 0 $container-padding;
1256
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1258
entry,
1259
spinbutton,
1260
button {
1261
margin-top: $container-padding;
1262
margin-bottom: $container-padding;
1263
}
1264
separator.titlebutton {
1266
margin-top: $large-size / 4;
1267
margin-bottom: $large-size / 4;
1268
background-color: $titlebar-divider;
1269
}
1270
switch {
1272
margin-top: ($large-size - 24px) / 2;
1273
margin-bottom: ($large-size - 24px) / 2;
1274
}
1275
// reset button margins of the spinbutton
1277
spinbutton button {
1278
margin-top: 0;
1279
margin-bottom: 0;
1280
}
1281
// FIXME: This is a hacky workaround.
1283
.entry-tag {
1284
margin-top: 5px;
1285
margin-bottom: 5px;
1286
}
1287
}
1288
// Development versions of apps to use a differently styled headerbar
1290
window.devel .titlebar:not(.selection-mode) {
1291
}
1292
/************
1295
* Pathbars *
1296
************/
1297
%pathbar_button,
1298
.path-bar button {
1299
padding-left: ($medium-size - 24px) / 2;
1300
padding-right: ($medium-size - 24px) / 2;
1301
label:not(:only-child) {
1303
&:first-child { margin-left: 4px; }
1304
&:last-child { margin-right: 4px; }
1306
}
1307
&.slider-button {
1309
padding-left: (24px - 16px) / 2;
1310
padding-right: (24px - 16px) / 2;
1311
}
1312
:not(headerbar) & {
1314
@extend %flat_button;
1315
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1317
$primary 0%,
1318
transparent 0%)
1319
0 0 0 / 0 0 0px;
1320
border-radius: $corner-radius;
1321
&:checked {
1323
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1324
$primary 100%,
1325
transparent 0%)
1326
0 0 2 / 0 0 2px;
1327
&, &:disabled { background-color: transparent; }
1329
}
1330
}
1331
}
1332
/**************
1335
* Tree Views *
1336
**************/
1337
treeview.view {
1338
@at-root * {
1339
-GtkTreeView-horizontal-separator: 4;
1340
-GtkTreeView-grid-line-width: 1;
1341
-GtkTreeView-grid-line-pattern: '';
1342
-GtkTreeView-tree-line-width: 1;
1343
-GtkTreeView-tree-line-pattern: '';
1344
-GtkTreeView-expander-size: 16;
1345
}
1346
border-left-color: $track; // this is actually the tree lines color,
1348
border-top-color: $divider; // while this is the grid lines color, better then nothing
1349
// FIXME: Avoid transparency background-color being slightly darker
1351
&:selected {
1352
background-color: $base;
1353
background-image: image($overlay-selected);
1354
}
1355
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1357
&:hover, &:selected { border-radius: 0; }
1359
&.separator {
1361
min-height: 1px + 2px * 2;
1362
color: $divider;
1363
}
1364
// FIXME: box-shadow, background-color and background-image are not available here.
1366
&:drop(active) {
1367
border-style: solid none;
1368
border-width: 9999px;
1369
border-color: $overlay-hover;
1370
&.after { border-top-style: none; }
1372
&.before { border-bottom-style: none; }
1374
}
1375
&.expander {
1377
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1378
-gtk-icon-transform: rotate(-90deg);
1379
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1381
&:checked { -gtk-icon-transform: unset; }
1383
color: $text-secondary;
1385
&:hover, &:active { color: $text; }
1387
&:disabled { color: $text-secondary-disabled; }
1389
}
1390
&.progressbar { // progress bar in treeviews
1392
border-bottom: $bar-size solid $primary;
1393
box-shadow: none;
1394
background-color: transparent;
1395
background-image: none;
1396
&:selected:hover { box-shadow: none; }
1398
}
1399
&.trough { // progress bar trough in treeviews
1401
border-bottom: $bar-size solid $track-disabled;
1402
box-shadow: none;
1403
background-color: transparent;
1404
background-image: none;
1405
&:selected:hover { box-shadow: none; }
1407
}
1408
header {
1410
button {
1411
@extend row.activatable;
1412
padding: 2px 6px;
1414
border-style: none solid solid none;
1415
border-width: 1px;
1416
border-color: $divider;
1417
border-radius: 0;
1418
background-clip: border-box;
1419
&:not(:focus):not(:hover):not(:active) { color: $text-secondary; }
1421
&, &:hover, &:active { box-shadow: none; }
1423
&, &:disabled { background-color: $base; }
1425
&:last-child { border-right-style: none; }
1427
}
1428
}
1429
button.dnd,
1431
header.button.dnd { // for treeview-like derive widgets
1432
padding: 2px 6px;
1433
border-style: none solid solid;
1434
border-width: 1px;
1435
border-color: $divider;
1436
border-radius: 0;
1437
box-shadow: none;
1438
background-color: $base;
1439
background-clip: border-box;
1440
color: $primary;
1441
}
1442
acceleditor > label { background-color: $primary; } // see tests/testaccel to test
1444
}
1445
/*********
1448
* Menus *
1449
*********/
1450
menubar,
1451
.menubar {
1452
-GtkWidget-window-dragging: true;
1453
padding: 0;
1454
// box-shadow: inset 0 -1px $divider;
1455
background-color: $titlebar;
1456
color: $titlebar-text;
1457
> menuitem {
1459
transition: $transition;
1460
min-height: 20px;
1461
padding: 4px 8px;
1462
color: $titlebar-text-secondary;
1463
&:hover { // Seems like it :hover even with keyboard focus
1465
transition: none;
1466
background-color: $overlay-checked;
1467
color: $titlebar-text;
1468
}
1469
&:disabled { color: $titlebar-text-secondary-disabled; }
1471
label:disabled { color: inherit; } // to inherit the above color
1473
}
1474
}
1475
// Needed to make the border-radius of menus work
1477
// otherwise the background bleeds out of the menu edges
1478
.background.popup { background-color: transparent; }
1479
menu,
1481
.menu,
1482
.context-menu {
1483
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1484
padding: 4px 0;
1485
box-shadow: inset 0 1px highlight($surface);
1486
background-color: $surface;
1487
border: 1px solid $frame; // adds borders in a non composited env
1488
.csd & {
1490
border: none; // axes borders in a composited env
1491
border-radius: $corner-radius;
1492
}
1493
menuitem {
1495
transition: background-color $duration $ease-out;
1496
min-height: 20px;
1497
min-width: 40px;
1498
padding: 4px 8px;
1499
color: $text;
1500
font: initial;
1501
text-shadow: none;
1502
&:hover {
1504
transition: none;
1505
background-color: $overlay-hover;
1506
}
1507
&:disabled { color: $text-disabled; }
1509
// submenu indicators
1511
arrow {
1512
min-height: 16px;
1513
min-width: 16px;
1514
&:dir(ltr) {
1516
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1517
margin-left: 8px;
1518
}
1519
&:dir(rtl) {
1521
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1522
margin-right: 8px;
1523
}
1524
}
1525
// avoids labels color being overridden, see
1527
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1528
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1529
}
1530
// overflow arrows
1532
> arrow {
1533
min-height: 16px;
1534
min-width: 16px;
1535
padding: 4px;
1536
background-color: $surface;
1537
color: $text-secondary;
1538
&.top {
1540
margin-top: -4px;
1541
border-bottom: 1px solid $divider;
1542
border-radius: $corner-radius $corner-radius 0 0;
1543
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1544
}
1545
&.bottom {
1547
margin-top: 4px * 2;
1548
margin-bottom: -4px * 3;
1549
border-top: 1px solid $divider;
1550
border-radius: 0 0 $corner-radius $corner-radius;
1551
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1552
}
1553
&:hover {
1555
background-image: image($overlay-hover);
1556
color: $text;
1557
}
1558
&:disabled {
1560
border-color: transparent;
1561
background-color: transparent;
1562
color: transparent;
1563
// color: $text-secondary-disabled;
1564
}
1565
}
1566
separator { margin: 4px 0; }
1568
}
1569
menuitem {
1571
accelerator { color: $text-secondary; }
1572
&:disabled accelerator { color: $text-secondary-disabled; }
1574
}
1575
/************
1578
* Popovers *
1579
************/
1580
popover.background {
1581
transition: $transition-shadow;
1582
padding: 2px;
1583
box-shadow: $shadow-2; // TODO: this should really have a highlight
1584
background-color: $surface;
1585
&:backdrop { box-shadow: $shadow-1; }
1587
&, .csd & {
1589
border-style: solid;
1590
border-width: 1px;
1591
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1592
border-radius: $corner-radius + 1px;
1593
}
1594
> stack { margin: -4px; } // remove extra padding from menu style popovers
1596
> toolbar { margin: -2px; }
1598
> list,
1600
> .view,
1601
> toolbar {
1602
border-style: none;
1603
box-shadow: none;
1604
background-color: transparent;
1605
}
1606
// FIXME: Use the popover color instead of transparent as a workaround for .view
1608
list,
1609
.view:not(:selected),
1610
toolbar { background-color: $surface; }
1611
// &.touch-selection,
1613
// &.magnifier,
1614
// &.osd { @extend %osd; }
1615
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1617
&.menu button,
1619
button.model {
1620
@extend %simple_flat_button;
1621
min-height: 32px;
1623
padding: 0 8px;
1624
border-radius: $corner-radius;
1625
&:checked { @extend %selected_items; }
1627
}
1628
separator { margin: 4px 0; }
1630
list separator { margin: 0; }
1632
}
1633
/*************
1635
* Notebooks *
1636
*************/
1637
notebook {
1638
frame > paned > & > header,
1639
&.frame > header { background-color: $base-alt; }
1640
&:focus tab:checked {
1642
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
1643
}
1644
> header {
1646
border-width: 1px;
1647
border-color: $divider;
1648
background-color: $background;
1649
background-clip: border-box;
1650
&.top {
1652
border-bottom-style: solid;
1653
> tabs {
1655
margin-bottom: -1px;
1656
> tab {
1658
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1659
&:checked { border-image-source: linear-gradient(to top, $primary 2px, $frame 2px); }
1661
&.reorderable-page { border-image-width: 0 1px 2px; }
1663
}
1664
}
1665
}
1666
&.bottom {
1668
border-top-style: solid;
1669
> tabs {
1671
margin-top: -1px;
1672
> tab {
1674
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1675
&:checked { border-image-source: linear-gradient(to bottom, $primary 2px, $frame 2px); }
1677
&.reorderable-page { border-image-width: 2px 1px 0; }
1679
}
1680
}
1681
}
1682
&.left {
1684
border-right-style: solid;
1685
> tabs {
1687
margin-right: -1px;
1688
> tab {
1690
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1691
&:checked { border-image-source: linear-gradient(to left, $primary 2px, $frame 2px); }
1693
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1695
}
1696
}
1697
}
1698
&.right {
1700
border-left-style: solid;
1701
> tabs {
1703
margin-left: -1px;
1704
> tab {
1706
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1707
&:checked { border-image-source: linear-gradient(to right, $primary 2px, $frame 2px); }
1709
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1711
}
1712
}
1713
}
1714
&.top > tabs > arrow {
1716
@extend %notebook_vert_arrows;
1717
border-top-style: none;
1719
}
1720
&.bottom > tabs > arrow {
1722
@extend %notebook_vert_arrows;
1723
border-bottom-style: none;
1725
}
1726
@at-root %notebook_vert_arrows {
1728
padding-left: 4px;
1729
padding-right: 4px;
1730
&.down {
1732
margin-left: -8px;
1733
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1734
}
1735
&.up {
1737
margin-right: -8px;
1738
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1739
}
1740
}
1741
&.left > tabs > arrow {
1743
@extend %notebook_horz_arrows;
1744
border-left-style: none;
1746
}
1747
&.right > tabs > arrow {
1749
@extend %notebook_horz_arrows;
1750
border-right-style: none;
1752
}
1753
@at-root %notebook_horz_arrows {
1755
padding-top: 4px;
1756
padding-bottom: 4px;
1757
&.down {
1759
margin-top: -8px;
1760
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1761
}
1762
&.up {
1764
margin-bottom: -8px;
1765
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1766
}
1767
}
1768
> tabs > arrow {
1770
@extend %simple_flat_button;
1771
min-height: 16px;
1773
min-width: 16px;
1774
border-radius: 0;
1775
}
1776
tab {
1778
transition: $transition,
1779
background-size 0ms,
1780
background-image 0ms;
1781
min-height: $small-size;
1782
min-width: $small-size;
1783
padding: $container-padding 12px;
1784
border-width: 1px; // for reorderable tabs
1786
border-color: transparent; //
1787
outline: none;
1789
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
1790
background-repeat: no-repeat;
1791
background-position: center;
1792
background-size: 0% 0%;
1793
background-clip: border-box;
1794
color: $text-secondary;
1796
font-weight: 500;
1797
&:hover {
1799
background-color: $overlay-hover;
1800
color: $text;
1801
}
1802
&:disabled { color: $text-secondary-disabled; }
1804
&:checked {
1806
transition: $transition,
1807
background-size $ripple-fade-in-duration $ease-out,
1808
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
1809
background-color: transparent;
1810
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
1811
background-size: 1000% 1000%;
1812
background-clip: padding-box;
1813
color: $text;
1814
&:disabled { color: $text-disabled; }
1816
&.reorderable-page {
1818
border-color: $frame;
1819
background-color: $base;
1820
}
1821
}
1822
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
1824
> box {
1825
transition: $transition;
1826
margin: -$container-padding -12px;
1827
padding: $container-padding 12px;
1828
&:drop(active) { @extend tab:hover; }
1830
}
1831
// colors the button like the label, overridden otherwise
1833
button.flat {
1834
@extend %small_button;
1835
&:last-child {
1837
margin-left: $container-padding;
1838
margin-right: $container-padding - 12px;
1839
}
1840
&:first-child {
1842
margin-left: $container-padding - 12px;
1843
margin-right: $container-padding;
1844
}
1845
}
1846
}
1847
&.top,
1849
&.bottom {
1850
tabs {
1851
padding-left: 8px;
1852
padding-right: 8px;
1853
&:not(:only-child) {
1855
&:first-child { margin-left: 0; }
1856
&:last-child { margin-right: 0; }
1858
}
1859
tab.reorderable-page { border-style: none solid; }
1861
}
1862
}
1863
&.left,
1865
&.right {
1866
tabs {
1867
padding-top: 8px;
1868
padding-bottom: 8px;
1869
&:not(:only-child) {
1871
&:first-child { margin-top: 0; }
1872
&:last-child { margin-bottom: 0; }
1874
}
1875
tab.reorderable-page { border-style: solid none; }
1877
}
1878
}
1879
}
1880
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1882
background-color: $base;
1883
}
1884
}
1885
/**************
1888
* Scrollbars *
1889
**************/
1890
scrollbar {
1891
$_slider_min_length: 24px;
1892
// disable steppers
1894
@at-root * {
1895
-GtkScrollbar-has-backward-stepper: false;
1896
-GtkScrollbar-has-forward-stepper: false;
1897
}
1898
transition: $transition;
1900
background-color: $base;
1901
background-clip: $background-clip-extra;
1902
// scrollbar border
1904
&.top { border-bottom: 1px solid $divider; }
1905
&.bottom { border-top: 1px solid $divider; }
1906
&.left { border-right: 1px solid $divider; }
1907
&.right { border-left: 1px solid $divider; }
1908
// slider
1910
slider {
1911
transition: $transition, margin 0ms, border-width 0ms;
1912
min-width: 8px;
1913
min-height: 8px;
1914
border: 4px solid transparent;
1915
border-radius: $circular-radius;
1916
background-clip: padding-box;
1917
background-color: $text-disabled;
1918
&:hover { background-color: $text-secondary; }
1920
&:active { background-color: $text; }
1922
&:disabled { background-color: $text-secondary-disabled; }
1924
}
1925
&.fine-tune {
1927
slider {
1928
transition: $transition, margin 0ms, border-width 0ms, min-width 0ms, min-height 0ms;
1929
min-width: 4px;
1930
min-height: 4px;
1931
}
1932
&.horizontal slider { margin: 2px 0; }
1934
&.vertical slider { margin: 0 2px; }
1936
}
1937
&.overlay-indicator {
1939
&:not(.dragging):not(.hovering) {
1940
border-color: transparent;
1941
background-color: transparent;
1942
slider {
1944
min-width: 4px;
1945
min-height: 4px;
1946
margin: 4px - 1px;
1947
border: 1px solid rgba($base, 0.3);
1948
}
1949
button {
1951
min-width: 4px;
1952
min-height: 4px;
1953
margin: 4px - 1px;
1954
border: 1px solid rgba($base, 0.3);
1955
border-radius: $circular-radius;
1956
background-color: $text-disabled;
1957
background-clip: padding-box;
1958
-gtk-icon-source: none;
1959
&:disabled { background-color: $text-secondary-disabled; }
1961
}
1962
&.horizontal {
1964
slider { min-width: $_slider_min_length; }
1965
button { min-width: 8px; }
1967
}
1968
&.vertical {
1970
slider { min-height: $_slider_min_length; }
1971
button { min-height: 8px; }
1973
}
1974
}
1975
&.dragging,
1977
&.hovering { background-color: rgba($base, 0.9); }
1978
}
1979
&.horizontal slider { min-width: $_slider_min_length; }
1981
&.vertical slider { min-height: $_slider_min_length; }
1983
// button styling
1985
button {
1986
@extend %simple_flat_button;
1987
min-width: 16px;
1989
min-height: 16px;
1990
padding: 0;
1991
border-radius: 0;
1992
}
1993
// button icons
1995
&.vertical {
1996
button {
1997
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1998
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2000
}
2001
}
2002
&.horizontal {
2004
button {
2005
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2006
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2008
}
2009
}
2010
}
2011
/**********
2014
* Switch *
2015
**********/
2016
switch {
2017
transition: all $duration $ease-out;
2018
margin: $container-padding 0;
2019
padding: 0 2px;
2020
border: 5px solid transparent;
2021
border-radius: $circular-radius;
2022
background-color: $track;
2023
background-clip: padding-box;
2024
font-size: 0;
2025
&:checked { background-color: rgba($primary, 0.5); }
2027
&:disabled { opacity: 0.5; }
2029
// hide on/off icons for >=3.24.5
2031
image {
2032
margin: -8px;
2033
-gtk-icon-transform: scale(0);
2034
}
2035
slider {
2037
transition: all $duration $ease-out;
2038
min-width: 20px;
2039
min-height: 20px;
2040
margin: -3px -2px;
2041
border-radius: $circular-radius;
2042
outline: none;
2043
box-shadow: 0 0 0 10px transparent, $shadow-1;
2044
background-color: $surface;
2045
}
2046
&:focus slider { box-shadow: 0 0 0 10px $overlay-focus, $shadow-1; }
2048
&:hover slider { box-shadow: 0 0 0 10px $overlay-hover, $shadow-1; }
2050
&:focus:hover slider { box-shadow: 0 0 0 10px $overlay-focus-hover, $shadow-1; }
2052
&:checked slider {
2054
background-color: $primary;
2055
color: $primary;
2056
}
2057
row:selected & {
2059
}
2060
}
2061
/*************************
2064
* Check and Radio items *
2065
*************************/
2066
// draw regular check and radio items using our PNG assets
2067
// all assets are rendered from assets.svg. never add pngs directly
2068
// selection-mode
2070
.view.content-view.check:not(list),
2071
.content-view .tile check:not(list) {
2072
min-height: 40px;
2073
min-width: 40px;
2074
margin: 0;
2075
padding: 0;
2076
box-shadow: none;
2077
background-color: transparent;
2078
background-image: none;
2079
-gtk-icon-shadow: $shadow-1;
2080
&:hover, &:active { -gtk-icon-shadow: $shadow-2; }
2082
@each $s, $as in ('', '-unchecked'),
2084
(':checked', '-checked') {
2085
&#{$s} {
2086
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}.png"),
2087
url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}@2.png"));
2088
}
2089
}
2090
}
2091
checkbutton,
2093
radiobutton {
2094
outline: none;
2095
}
2096
checkbutton.text-button,
2098
radiobutton.text-button {
2099
// this is for a nice focus on check and radios text
2100
padding: 2px;
2101
label:not(:only-child) { margin: 0 4px; }
2103
}
2104
$check_radio_size: 40px;
2106
check,
2108
radio {
2109
min-height: 24px;
2110
min-width: 24px;
2111
margin: -($check_radio_size - 24px) / 2;
2112
padding: ($check_radio_size - 24px) / 2;
2113
@extend %simple_flat_button;
2115
@extend %circular_button;
2117
&:checked, &:indeterminate {
2119
color: $primary;
2120
&:disabled { color: $text-secondary-disabled; }
2122
}
2123
// &:only-child { margin: -12px; }
2125
popover modelbutton.flat & {
2127
&, &:focus, &:hover, &:focus:hover, &:active, &:disabled {
2128
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2129
box-shadow: none;
2130
background-image: none;
2131
}
2132
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2134
&.left:dir(rtl) {
2136
margin-left: -12px;
2137
margin-right: -4px;
2138
}
2139
&.right:dir(ltr) {
2141
margin-left: -4px;
2142
margin-right: -12px;
2143
}
2144
}
2145
menu menuitem & {
2147
transition: none;
2148
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2149
padding: 0;
2150
&:dir(ltr) { margin-right: 8px; }
2152
&:dir(rtl) { margin-left: 8px; }
2154
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2156
&, &:hover, &:disabled {
2158
box-shadow: none;
2159
// color: inherit;
2160
}
2161
}
2162
}
2163
%check,
2165
check {
2166
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2167
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2169
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2171
}
2172
%radio,
2174
radio {
2175
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2176
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2178
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2180
border-image-slice: $check_radio_size / 2px;
2182
border-image-width: $check_radio_size / 2;
2183
$radio_indicator: 10px / $check_radio_size / 2;
2185
& {
2187
border-image-source: -gtk-gradient(radial,
2188
center center, 0,
2189
center center, 0.001,
2190
to($primary),
2191
to(transparent));
2192
}
2193
&:checked:not(:indeterminate) {
2195
border-image-source: -gtk-gradient(radial,
2196
center center, 0,
2197
center center, $radio_indicator,
2198
to($primary),
2199
to(transparent));
2200
}
2201
&:checked:not(:indeterminate):disabled {
2203
border-image-source: -gtk-gradient(radial,
2204
center center, 0,
2205
center center, $radio_indicator,
2206
to($text-secondary-disabled),
2207
to(transparent));
2208
}
2209
}
2210
%small_check,
2212
menu menuitem check {
2213
& {
2214
min-height: 16px;
2215
min-width: 16px;
2216
border-radius: $corner-radius;
2217
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2218
}
2219
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2221
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2223
}
2224
%small_radio,
2226
menu menuitem radio {
2227
& {
2228
min-height: 16px;
2229
min-width: 16px;
2230
border-image: none;
2231
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2232
}
2233
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2235
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2237
}
2238
// ANIMATION:
2240
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2241
// the transformation is set on the active state and it get reset on the checked state.
2242
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2243
treeview.view check,
2245
treeview.view radio {
2246
padding: 0;
2247
&:hover, &:selected {
2249
box-shadow: none;
2250
background-color: transparent;
2251
}
2252
& {
2254
color: $text-secondary;
2255
&:hover, &:active { color: $text; }
2257
&:disabled { color: $text-secondary-disabled; }
2259
&:checked, &:indeterminate { color: $primary; }
2261
&:checked:disabled, &:indeterminate:disabled { color: $text-secondary-disabled; }
2263
}
2264
}
2265
treeview.view radio:checked {
2267
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2268
border-image: none;
2269
}
2270
/************
2273
* GtkScale *
2274
************/
2275
scale {
2276
// sizing
2277
$_marks_length: 8px;
2278
$_marks_distance: 7px;
2279
$trough_size: 2px;
2281
$finetune_trough_size: 4px;
2282
$slider_size: 32px;
2284
$slider_margin: -($slider_size - $trough_size) / 2;
2286
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2287
$color_slider_margin: -($slider_size) * 3 / 4;
2289
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2290
min-height: $trough_size;
2292
min-width: $trough_size;
2293
&.horizontal { padding: ($medium-size - $trough_size) / 2 12px; }
2295
&.vertical { padding: 12px ($medium-size - $trough_size) / 2; }
2297
// the slider is inside the trough, so to have make it bigger there's a negative margin
2299
slider {
2300
min-height: $slider_size;
2301
min-width: $slider_size;
2302
margin: $slider_margin;
2303
}
2304
// click-and-hold the slider to activate
2306
&.fine-tune {
2307
&.horizontal {
2308
min-height: $finetune_trough_size;
2309
padding-top: ($medium-size - $finetune_trough_size) / 2;
2310
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2311
}
2312
&.vertical {
2314
min-width: $finetune_trough_size;
2315
padding-left: ($medium-size - $finetune_trough_size) / 2;
2316
padding-right: ($medium-size - $finetune_trough_size) / 2;
2317
}
2318
// to make the trough grow in fine-tune mode
2320
slider { margin: $finetune_slider_margin; }
2321
}
2322
// the backing bit
2324
trough {
2325
transition: background-color $duration $ease-out;
2326
outline: none;
2327
background-color: $track;
2328
&:disabled { background-color: $track-disabled; }
2330
}
2331
// the colored part of the backing bit
2333
highlight {
2334
transition: background-color $duration $ease-out;
2335
background-color: $primary;
2336
&:disabled { background-color: transparent; }
2338
}
2339
// this is another differently styled part of the backing bit, the most relevant use case is for example
2341
// in media player to indicate how much video stream as been cached
2342
fill {
2343
transition: background-color $duration $ease-out;
2344
background-color: $track;
2345
&:disabled { background-color: transparent; }
2347
}
2348
slider {
2350
transition: background-color $duration $ease-out,
2351
background-size $ripple-fade-out-duration $ease-out,
2352
background-image $ripple-fade-out-opacity-duration $ease-out;
2353
background-repeat: no-repeat;
2354
background-position: center;
2355
background-size: auto, 1000% 1000%;
2356
border-radius: 50%;
2357
color: $primary;
2358
@each $s, $as in ('', ''),
2360
(':disabled', '-disabled') {
2361
&#{$s} {
2362
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
2363
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2365
radial-gradient(circle, transparent 10%, transparent 0%);
2366
}
2367
}
2368
&:focus { background-color: $overlay-focus; }
2370
&:hover { background-color: $overlay-hover; }
2372
&:focus:hover { background-color: $overlay-focus-hover; }
2374
&:active {
2376
$_url: 'assets/scale-slider#{$asset-suffix}';
2377
transition: background-color $duration $ease-out,
2379
background-size 0ms,
2380
background-image 0ms;
2381
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2382
background-color: $overlay-hover;
2383
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2384
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2385
background-size: auto, 0% 0%;
2386
}
2387
}
2388
marks label,
2390
value { color: $text-secondary; }
2391
marks {
2393
color: $track;
2394
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2396
(bottom, bottom, top),
2397
(left, left, right),
2398
(right, right, left) {
2399
&.#{$marks_class} {
2400
margin-#{$marks_margin}: $_marks_distance;
2401
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2402
}
2403
}
2404
}
2405
&.fine-tune marks {
2407
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2408
(bottom, bottom, top),
2409
(left, left, right),
2410
(right, right, left) {
2411
&.#{$marks_class} {
2412
margin-#{$marks_margin}: $_marks_distance - 1px;
2413
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2414
}
2415
}
2416
}
2417
&.horizontal {
2419
indicator {
2420
min-height: $_marks_length;
2421
min-width: 1px;
2422
}
2423
}
2424
&.vertical {
2426
indicator {
2427
min-height: 1px;
2428
min-width: $_marks_length;
2429
}
2430
}
2431
// *WARNING* scale with marks madness following
2433
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2435
('vertical', 'vert') {
2436
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2437
('marks-after', 'marks-after:not(.marks-before)') {
2438
&.#{$dir_class}.#{$marks_class} {
2439
slider {
2440
@each $state, $state_infix in ('', ''),
2441
(':disabled', '-disabled') {
2442
&#{$state} {
2443
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2444
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2446
radial-gradient(circle, transparent 10%, transparent 0%);
2447
}
2448
}
2449
&:active {
2451
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$asset-suffix}';
2452
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2454
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2455
}
2456
}
2457
}
2458
}
2459
}
2460
&.color {
2462
min-height: 0;
2463
min-width: 0;
2464
&.horizontal {
2466
padding: 0 0 12px 0;
2467
slider {
2469
&:dir(ltr), &:dir(rtl) { // specificity bump
2470
margin-bottom: $color_slider_margin;
2471
margin-top: $color_marks_slider_margin;
2472
}
2473
}
2474
}
2475
&.vertical {
2477
&:dir(ltr) {
2478
padding: 0 0 0 12px;
2479
slider {
2481
margin-left: $color_slider_margin;
2482
margin-right: $color_marks_slider_margin;
2483
}
2484
}
2485
&:dir(rtl) {
2487
padding: 0 12px 0 0;
2488
slider {
2490
margin-right: $color_slider_margin;
2491
margin-left: $color_marks_slider_margin;
2492
}
2493
}
2494
}
2495
}
2496
}
2497
/*****************
2500
* Progress bars *
2501
*****************/
2502
progressbar {
2503
// sizing
2504
&.horizontal {
2505
trough,
2506
progress { min-height: $bar-size; }
2507
}
2508
&.vertical {
2510
trough,
2511
progress { min-width: $bar-size; }
2512
}
2513
// FIXME: insensitive state missing and some other state should be set probably
2515
color: $text-secondary;
2516
font-size: smaller;
2517
trough { background-color: $track-disabled; }
2519
progress { background-color: $primary; }
2521
&.osd { // progressbar.osd used for epiphany page loading progress
2523
// min-width: $bar-size;
2524
// min-height: $bar-size;
2525
// background-color: transparent;
2526
// trough { background-color: transparent; }
2528
// progress { background-color: $primary; }
2530
}
2531
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2533
}
2534
/*************
2537
* Level Bar *
2538
*************/
2539
levelbar {
2540
&.horizontal {
2541
block { min-height: $bar-size; }
2542
&.discrete block {
2544
min-width: $medium-size;
2545
&:not(:last-child) { margin-right: 2px; }
2547
}
2548
}
2549
&.vertical {
2551
block { min-width: $bar-size; }
2552
&.discrete block {
2554
min-height: $medium-size;
2555
&:not(:last-child) { margin-bottom: 2px; }
2557
}
2558
}
2559
// imitate the entry style
2561
trough {
2562
// padding: 2px;
2563
// border-radius: $corner-radius;
2564
// box-shadow: $shadow-1;
2565
// background-color: $base;
2566
// &:disabled { background-color: $base-alt; }
2568
}
2569
block {
2571
&.low { background-color: $warning; }
2572
&.high,
2574
&:not(.empty) { background-color: $primary; }
2575
&.full { background-color: $success; }
2577
&.empty { background-color: $track-disabled; }
2579
}
2580
}
2581
/****************
2584
* Print dialog *
2585
*****************/
2586
printdialog {
2587
paper {
2588
padding: 0;
2589
border: 1px solid $frame;
2590
background-color: $base;
2591
color: $text;
2592
}
2593
.dialog-action-box { margin: 12px; }
2595
}
2596
/**********
2599
* Frames *
2600
**********/
2601
frame > border,
2602
.frame {
2603
margin: 0;
2604
padding: 0;
2605
border: 1px solid $frame;
2606
border-radius: 0;
2607
box-shadow: none;
2608
&.flat { border-style: none; }
2610
}
2611
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2613
actionbar > revealer > box {
2615
padding: $container-padding;
2616
border-top: 1px solid $divider;
2617
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2619
}
2620
scrolledwindow {
2622
viewport.frame { // avoid double borders when viewport inside scrolled window
2623
border-style: none;
2624
}
2625
// This is used when content is touch-dragged past boundaries.
2627
// draws a box on top of the content, the size changes programmatically.
2628
@at-root overshoot {
2629
&.top { @include overshoot(top); }
2630
&.bottom { @include overshoot(bottom); }
2632
&.left { @include overshoot(left); }
2634
&.right { @include overshoot(right); }
2636
}
2637
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2639
@at-root undershoot {
2640
&.top { @include undershoot(top); }
2641
&.bottom { @include undershoot(bottom); }
2643
&.left { @include undershoot(left); }
2645
&.right { @include undershoot(right); }
2647
}
2648
@at-root junction { // the small square between two scrollbars
2650
border-style: solid none none solid;
2651
border-width: 1px;
2652
border-color: $divider;
2653
background-color: $base;
2654
&:dir(rtl) { border-style: solid solid none none; }
2656
}
2657
}
2658
// vbox and hbox separators
2660
separator {
2661
min-width: 1px;
2662
min-height: 1px;
2663
background-color: $divider;
2664
}
2665
%hide_separators {
2667
min-width: 0;
2668
min-height: 0;
2669
background-color: transparent;
2670
}
2671
/*********
2674
* Lists *
2675
*********/
2676
list {
2677
border-color: $frame;
2678
background-color: $base;
2679
row { padding: 2px; }
2681
}
2682
row {
2684
&.activatable {
2685
transition: $transition,
2686
background-size $ripple-fade-out-duration $ease-out,
2687
background-image $ripple-fade-out-opacity-duration $ease-out;
2688
outline: none;
2689
box-shadow: inset 0 0 0 9999px transparent;
2690
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2691
background-repeat: no-repeat;
2692
background-position: center;
2693
background-size: 1000% 1000%;
2694
&:focus {
2696
box-shadow: inset 0 0 0 9999px $overlay-focus;
2697
}
2698
&:hover {
2700
transition: $transition,
2701
box-shadow 0ms,
2702
background-size $ripple-fade-out-duration $ease-out,
2703
background-image $ripple-fade-out-opacity-duration $ease-out;
2704
box-shadow: inset 0 0 0 9999px $overlay-hover;
2705
}
2706
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2708
&:active {
2709
transition: $transition,
2710
background-size 0ms,
2711
background-image 0ms;
2712
animation: ripple $ripple-fade-in-duration $ease-out forwards;
2713
box-shadow: inset 0 0 0 9999px $overlay-hover;
2714
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
2715
background-size: 0% 0%;
2716
}
2717
}
2718
&:selected {
2720
@extend %selected_items;
2721
color: $primary; // for overlays
2722
image,
2724
label { color: $text; }
2725
button image,
2727
button label { color: inherit; }
2728
&:disabled {
2730
image,
2731
label { color: $text-disabled; }
2732
}
2733
}
2734
}
2735
/*********************
2738
* App Notifications *
2739
*********************/
2740
.app-notification {
2741
// @extend %osd;
2742
@extend toolbar.osd;
2744
margin: 8px;
2746
button { @extend %button_basic.flat; }
2748
&.frame,
2750
border { border-style: none; }
2751
}
2752
/*************
2755
* Expanders *
2756
*************/
2757
expander {
2758
title > arrow {
2759
transition: all $duration $ease-out;
2760
min-width: 16px;
2761
min-height: 16px;
2762
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2763
-gtk-icon-transform: rotate(-90deg);
2764
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2766
&:checked { -gtk-icon-transform: unset; }
2768
color: $text-secondary;
2770
&:hover, &:active { color: $text; }
2772
&:disabled { color: $text-secondary-disabled; }
2774
}
2775
}
2776
/************
2779
* Calendar *
2780
************/
2781
calendar {
2782
padding: 1px;
2783
border: 1px solid $frame;
2784
color: $text;
2785
&:disabled { color: $text-disabled; }
2787
&:selected {
2789
@extend %selected_items;
2790
border-radius: $corner-radius + 1px;
2792
}
2793
&.header {
2795
border-style: none none solid;
2796
border-color: $divider;
2797
border-radius: 0;
2798
}
2799
&.button { @extend %simple_flat_button; }
2801
&.highlight {
2803
color: $text-secondary;
2804
font-weight: 500;
2805
}
2806
&:indeterminate { color: $text-secondary-disabled; }
2808
}
2809
/***********
2812
* Dialogs *
2813
***********/
2814
messagedialog { // Message Dialog styling
2815
&.background { background-color: $surface; }
2816
.titlebar {
2818
min-height: $small-size;
2819
border-style: none;
2820
box-shadow: inset 0 1px highlight($surface);
2821
background-color: $surface;
2822
color: $text;
2823
&:backdrop { color: $text-secondary; }
2825
}
2826
&.csd { // rounded bottom border styling for csd version
2828
&.background {
2829
// bigger radius for better antialiasing
2830
border-bottom-left-radius: $corner-radius;
2831
border-bottom-right-radius: $corner-radius;
2832
}
2833
.dialog-action-area {
2835
margin-top: -$container-padding;
2836
padding: $container-padding;
2837
button {
2839
@extend %simple_flat_button;
2840
border-radius: $corner-radius;
2841
&:not(:last-child) { margin-right: $container-padding; }
2843
&:not(:disabled) { color: $primary; }
2845
// &.suggested-action:not(:disabled) { color: $suggested; }
2847
&.destructive-action:not(:disabled) { color: $destructive; }
2849
}
2850
}
2851
}
2852
}
2853
filechooser {
2855
.dialog-action-box { border-top: 1px solid $divider; }
2856
#pathbarbox {
2858
border-bottom: 1px solid $divider;
2859
background-color: $background;
2860
> stack > box > button { // The new folder button
2862
@extend %button_basic.flat;
2863
@extend %circular_button;
2864
}
2865
}
2866
}
2867
filechooserbutton:drop(active) {
2869
box-shadow: none;
2870
}
2871
/***********
2874
* Sidebar *
2875
***********/
2876
.sidebar {
2877
border-style: none;
2878
background-color: $base-alt;
2879
&:not(separator) {
2881
@at-root %sidebar_left,
2882
&:dir(ltr),
2883
&.left,
2884
&.left:dir(rtl) {
2885
border-right: 1px solid $divider;
2886
border-left-style: none;
2887
}
2888
@at-root %sidebar_right,
2890
&:dir(rtl),
2891
&.right {
2892
border-left: 1px solid $divider;
2893
border-right-style: none;
2894
}
2895
}
2896
list { background-color: transparent; }
2898
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2900
}
2901
stacksidebar.sidebar {
2903
& {
2904
&:dir(ltr),
2905
&.left,
2906
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2907
&:dir(rtl),
2909
&.right { list { @extend %sidebar_right; }}
2910
}
2911
+ separator.vertical,
2913
separator.horizontal { @extend %hide_separators; }
2914
list {
2916
padding: 4px;
2917
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
2918
}
2919
row {
2921
min-height: 32px;
2922
padding: 0 8px - 6px;
2923
border-radius: $corner-radius;
2924
&:selected {
2926
background-color: $overlay-checked;
2927
font-weight: 500;
2928
}
2929
+ row { margin-top: 4px; }
2931
> label {
2933
padding-left: 6px;
2934
padding-right: 6px;
2935
color: inherit;
2936
}
2937
&.needs-attention > label { @extend %needs-attention; }
2939
}
2940
}
2941
separator.sidebar {
2943
background-color: $divider;
2944
&.selection-mode,
2946
.selection-mode & {
2947
// background-color: $divider;
2948
}
2949
}
2950
/****************
2953
* File chooser *
2954
****************/
2955
// dim the sidebar icons, see bug #786613 for details on this oddity
2956
row {
2957
image.sidebar-icon { color: $text-secondary; }
2958
}
2959
placessidebar.sidebar {
2961
> viewport.frame { border-style: none; }
2962
list { padding: (4px - 3px) 0 4px; }
2964
row {
2966
// Needs overriding of the GtkListBoxRow padding
2967
min-height: 32px;
2968
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
2969
padding: 0;
2970
border-radius: $corner-radius;
2971
// Using margins/padding directly in the SidebarRow
2973
// will make the animation of the new bookmark row jump
2974
> revealer { padding: 0 8px; }
2975
&:selected { font-weight: 500; }
2977
&:disabled { color: $text-disabled; }
2979
image.sidebar-icon {
2981
&:dir(ltr) { padding-right: 8px; }
2982
&:dir(rtl) { padding-left: 8px; }
2983
}
2984
label.sidebar-label {
2986
&:dir(ltr) { padding-right: 2px; }
2987
&:dir(rtl) { padding-left: 2px; }
2988
}
2989
&:selected image.sidebar-icon,
2991
&:selected label.sidebar-label { color: inherit; }
2992
@at-root button.sidebar-button {
2994
@extend %simple_flat_button;
2995
@extend %small_button;
2996
}
2997
&.sidebar-placeholder-row { background-color: $overlay-hover; }
2999
&.sidebar-new-bookmark-row { color: $primary; }
3001
&:drop(active) { @extend row:hover; }
3003
}
3004
}
3005
placesview {
3007
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3008
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3010
// this selects the "connect to server" label
3012
> actionbar > revealer > box > label {
3013
padding-left: 8px;
3014
padding-right: 8px;
3015
}
3016
}
3017
/*********
3020
* Paned *
3021
*********/
3022
paned {
3023
> separator {
3024
min-width: 1px;
3025
min-height: 1px;
3026
-gtk-icon-source: none; // defeats the ugly default handle decoration
3027
border-style: none; // just to be sure
3028
background-color: transparent;
3029
// workaround, using background istead of a border since the border will get rendered twice (?)
3030
background-image: image($divider);
3031
background-size: 1px 1px;
3032
background-clip: content-box; // avoids borders image being rendered twice (?)
3033
&.wide {
3035
min-width: 6px;
3036
min-height: 6px;
3037
background-color: $background;
3038
background-image: image($divider), image($divider);
3039
background-size: 1px 1px, 1px 1px;
3040
}
3041
}
3042
&.horizontal > separator {
3044
background-repeat: repeat-y;
3045
&:dir(ltr) {
3047
margin: 0 -8px 0 0;
3048
padding: 0 8px 0 0;
3049
background-position: left;
3050
}
3051
&:dir(rtl) {
3053
margin: 0 0 0 -8px;
3054
padding: 0 0 0 8px;
3055
background-position: right;
3056
}
3057
&.wide {
3059
margin: 0;
3060
padding: 0;
3061
background-repeat: repeat-y, repeat-y;
3062
background-position: left, right;
3063
}
3064
}
3065
&.vertical > separator {
3067
margin: 0 0 -8px 0;
3068
padding: 0 0 8px 0;
3069
background-repeat: repeat-x;
3070
background-position: top;
3071
&.wide {
3073
margin: 0;
3074
padding: 0;
3075
background-repeat: repeat-x, repeat-x;
3076
background-position: bottom, top;
3077
}
3078
}
3079
}
3080
/**************
3083
* GtkInfoBar *
3084
**************/
3085
infobar {
3086
border-style: none;
3087
&.info,
3089
&.question {
3090
border-bottom: 1px solid $divider;
3091
background-color: $base;
3092
button {
3094
@extend %simple_flat_button;
3095
&.text-button {
3097
padding-left: 8px;
3098
padding-right: 8px;
3099
&:not(:disabled) { color: $primary; }
3101
}
3102
}
3103
}
3104
&.warning {
3106
background-color: $warning;
3107
color: on($warning);
3108
// button { @extend %button_selected; }
3110
selection {}
3112
*:link { color: on($warning); }
3114
}
3115
&.error {
3117
background-color: $error;
3118
color: on($error);
3119
button { @extend %button_selected; }
3121
selection {}
3123
*:link { color: on($error); }
3125
}
3126
}
3127
/************
3130
* Tooltips *
3131
************/
3132
tooltip {
3133
&.background {
3134
// background-color needs to be set this way otherwise it gets drawn twice
3135
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3136
background-color: $tooltip;
3137
color: on($tooltip);
3138
}
3139
// padding: 4px; /* not working */
3141
border-radius: $corner-radius;
3142
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3143
&:not(.csd):not(.unity-csd) {
3145
// border: 1px solid $frame;
3146
// border-radius: $corner-radius + 1px;
3147
// background-clip: $background-clip-extra;
3148
}
3149
// FIXME: we need a border or tooltips vanish on black background.
3151
decoration { background-color: transparent; }
3152
> box {
3154
margin: -6px; // Remove hard-coded 6px padding
3155
min-height: 32px - 4px * 2;
3156
padding: 4px 8px;
3157
}
3158
* {
3160
// workaround for Eclipse.
3161
// do not include any declaration here.
3162
// padding: 0;
3163
// background-color: transparent;
3164
// color: inherit;
3165
}
3166
}
3167
/*****************
3170
* Color Chooser *
3171
*****************/
3172
colorswatch {
3173
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3174
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3175
// applied to the overlay box.
3176
// base color corners rounding
3178
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3179
// sports a bigger radius.
3180
// nth-child is needed by the custom color strip.
3181
&.top {
3183
border-top-left-radius: $corner-radius + 0.5px;
3184
border-top-right-radius: $corner-radius + 0.5px;
3185
overlay {
3187
border-top-left-radius: $corner-radius;
3188
border-top-right-radius: $corner-radius;
3189
}
3190
}
3191
&.bottom {
3193
border-bottom-left-radius: $corner-radius + 0.5px;
3194
border-bottom-right-radius: $corner-radius + 0.5px;
3195
overlay {
3197
border-bottom-left-radius: $corner-radius;
3198
border-bottom-right-radius: $corner-radius;
3199
}
3200
}
3201
&.left,
3203
&:first-child:not(.top) {
3204
border-top-left-radius: $corner-radius + 0.5px;
3205
border-bottom-left-radius: $corner-radius + 0.5px;
3206
overlay {
3208
border-top-left-radius: $corner-radius;
3209
border-bottom-left-radius: $corner-radius;
3210
}
3211
}
3212
&.right,
3214
&:last-child:not(.bottom) {
3215
border-top-right-radius: $corner-radius + 0.5px;
3216
border-bottom-right-radius: $corner-radius + 0.5px;
3217
overlay {
3219
border-top-right-radius: $corner-radius;
3220
border-bottom-right-radius: $corner-radius;
3221
}
3222
}
3223
&.dark { color: on(dark); }
3225
&.light { color: on(light); }
3227
overlay {
3229
transition: $transition-shadow;
3230
box-shadow: $shadow-1;
3231
&:hover { box-shadow: $shadow-2; }
3233
&:drop(active) { box-shadow: $shadow-2; }
3235
}
3236
&#add-color-button {
3238
border-radius: $corner-radius $corner-radius 0 0;
3239
color: on(dark);
3240
&:only-child { border-radius: $corner-radius; }
3242
overlay {
3244
background-image: linear-gradient(to right,
3245
$red 25%,
3246
$yellow 25%, $yellow 50%,
3247
$green 50%, $green 75%,
3248
$blue 75%);
3249
}
3250
}
3251
&:disabled {
3253
opacity: 0.5;
3254
overlay { box-shadow: none; }
3256
}
3257
row:selected & {
3259
}
3260
&#editor-color-sample {
3262
border-radius: $corner-radius + 0.5px;
3263
overlay { border-radius: $corner-radius; }
3265
// overlay:hover { box-shadow: $shadow-1; }
3267
}
3268
}
3269
// colorscale popup
3271
colorchooser .popover.osd {
3272
transition: $transition-shadow;
3273
border-radius: $corner-radius;
3274
box-shadow: $shadow-2, inset 0 1px highlight($surface);
3275
background-color: $surface;
3276
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
3278
}
3279
/********
3282
* Misc *
3283
********/
3284
// content view (grid/list)
3285
.content-view {
3286
background-color: $background;
3287
// &:hover { -gtk-icon-effect: highlight; }
3289
rubberband, .rubberband { @extend rubberband; }
3291
}
3292
.scale-popup {
3294
// .osd & { @extend %osd; }
3295
.osd & button.flat { // FIXME: quick hack, redo properly
3297
}
3298
button { // +/- buttons on GtkVolumeButton popup
3300
}
3301
}
3302
/**********************
3305
* Window Decorations *
3306
**********************/
3307
decoration {
3308
transition: $transition-shadow;
3309
border-radius: $corner-radius $corner-radius 0 0;
3310
box-shadow: $shadow-4, 0 16px 16px transparent;
3311
// FIXME rationalize shadows
3313
// this is used for the resize cursor area
3315
margin: 8px;
3316
&:backdrop {
3318
// the transparent shadow here is to enforce that the shadow extents don't
3319
// change when we go to backdrop, to prevent jumping windows.
3320
// The biggest shadow should be in the same order then in the active state
3321
// or the jumping will happen during the transition.
3322
box-shadow: $shadow-2, 0 16px 16px transparent;
3323
}
3324
.maximized &,
3326
.fullscreen &,
3327
.tiled &,
3328
.tiled-top &,
3329
.tiled-right &,
3330
.tiled-bottom &,
3331
.tiled-left & { border-radius: 0; }
3332
.popup & { box-shadow: none; }
3334
// server-side decorations as used by mutter
3336
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3337
.csd.popup & {
3339
border-radius: $corner-radius;
3340
box-shadow: $shadow-2;
3341
}
3342
tooltip.csd & {
3344
border-radius: $corner-radius;
3345
box-shadow: none;
3346
}
3347
messagedialog.csd & {
3349
border-radius: $corner-radius;
3350
// box-shadow: $shadow-4, 0 16px 16px transparent;
3351
// &:backdrop { box-shadow: $shadow-2, 0 16px 16px transparent; }
3353
}
3354
.solid-csd & {
3356
margin: 0;
3357
// padding: 4px;
3358
border-radius: 0;
3359
box-shadow: none;
3360
// box-shadow: inset 0 0 0 4px $titlebar;
3361
background-color: $titlebar;
3362
}
3363
}
3364
// Window Close button
3366
button.titlebutton {
3367
// @extend %simple_flat_button;
3368
@extend %circular_button;
3370
.selection-mode & {
3372
}
3373
}
3374
// catch all extend :)
3377
%selected_items {
3379
background-color: $overlay-selected;
3380
}
3381
.monospace { font-family: monospace; }
3383
/**********************
3386
* Touch Copy & Paste *
3387
**********************/
3388
// touch selection handlebars for the Popover.osd above
3389
cursor-handle {
3390
color: $primary;
3391
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
3392
&.top:dir(ltr), &.bottom:dir(rtl) {
3394
-gtk-icon-transform: rotate(90deg);
3395
}
3396
&.bottom:dir(ltr), &.top:dir(rtl) {
3398
-gtk-icon-transform: unset;
3399
}
3400
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3402
padding-top: 6px;
3403
-gtk-icon-transform: rotate(45deg);
3404
}
3405
}
3406
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3408
// shortcut window keys
3410
.keycap {
3411
min-width: 28px - 8px * 2;
3412
min-height: 28px - 2px;
3413
margin-top: 2px;
3414
padding-bottom: 2px;
3415
padding-left: 8px;
3416
padding-right: 8px;
3417
border: solid 1px $frame;
3419
border-radius: $corner-radius + 1px;
3420
box-shadow: inset 0 -2px $frame;
3421
background-color: $surface;
3422
color: $text;
3423
font-size: smaller;
3424
}
3425
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3427
caret-color: $primary;
3428
}
3429
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3431
stackswitcher button.circular,
3433
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3434
min-width: $medium-size;
3435
min-height: $medium-size;
3436
padding: 0;
3437
}
3438
/*************
3441
* App Icons *
3442
*************/
3443
// Outline for low res icons
3444
.lowres-icon {
3445
// -gtk-icon-shadow: none;
3446
}
3447
// Drapshadow for large icons
3449
.icon-dropshadow {
3450
// -gtk-icon-shadow: none;
3451
}
3452
/*********
3455
* Emoji *
3456
*********/
3457
popover.emoji-picker {
3458
padding: 0;
3459
entry {
3461
border-bottom: 1px solid $divider;
3462
border-image: none;
3463
border-radius: 0;
3464
box-shadow: none;
3465
background-color: transparent;
3466
}
3467
scrolledwindow { border-bottom: 1px solid $divider; }
3469
}
3470
button.emoji-section {
3472
margin: 4px;
3473
&:checked {
3475
// background-color: transparent;
3476
color: $primary;
3477
}
3478
&:not(:last-child) { margin-right: 0; }
3480
}
3481
popover.emoji-picker .emoji {
3483
min-width: 3em;
3484
min-height: 3em;
3485
padding: 0 8px;
3486
// font-size: larger;
3487
widget {
3489
transition: $transition;
3490
border-radius: $corner-radius;
3491
&:hover { background-color: $overlay-hover; }
3493
}
3494
}
3495
popover.emoji-completion {
3497
padding: 8px 0;
3498
arrow {
3500
border: none;
3501
background: none;
3502
}
3503
.emoji-completion-row {
3505
min-height: $menuitem-size;
3506
padding: 0 12px;
3507
}
3508
.emoji:hover {
3510
background-color: $overlay-hover;
3511
}
3512
}
3513