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
headerbar {
1044
transition: background-color $duration $ease-out, color $duration $ease-out;
1045
min-height: $large-size;
1046
padding: 0 $container-padding;
1047
box-shadow: $shadow-1, inset 0 1px highlight($titlebar);
1048
background-color: $titlebar;
1049
color: $titlebar-text;
1050
&:disabled { color: $titlebar-text-disabled; }
1052
&:backdrop {
1054
color: $titlebar-text-secondary;
1055
&:disabled { color: $titlebar-text-secondary-disabled; }
1057
}
1058
.title {
1060
padding: 0 12px;
1061
font-weight: bold;
1062
}
1063
.subtitle {
1065
padding: 0 12px;
1066
font-size: smaller;
1067
@extend .dim-label;
1069
}
1070
entry {
1072
box-shadow: inset 0 -1px $titlebar-track;
1073
background-color: $titlebar-fill;
1074
color: $titlebar-text;
1075
&:disabled {
1077
box-shadow: inset 0 -1px $titlebar-track-disabled;
1078
background-color: $titlebar-fill;
1079
color: $titlebar-text-disabled;
1080
}
1081
image {
1083
color: $titlebar-text-secondary;
1084
&:hover, &:active { color: $titlebar-text; }
1086
&:disabled { color: $titlebar-text-disabled; }
1088
}
1089
}
1090
.linked:not(.vertical) > entry:not(.flat) { border-radius: $corner-radius $corner-radius 0 0; }
1092
@at-root %titlebar-button, & button:not(.suggested-action):not(.destructive-action) {
1094
@extend %button_basic.flat;
1095
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1097
$titlebar-indicator 0%,
1098
transparent 0%)
1099
0 0 0 / 0 0 0px;
1100
color: $titlebar-text-secondary;
1101
&:focus, &:hover, &:active { color: $titlebar-text; }
1103
&:disabled { color: $titlebar-text-secondary-disabled; }
1105
&:checked {
1107
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1108
$titlebar-indicator 100%,
1109
transparent 0%)
1110
0 0 2 / 0 0 2px;
1111
color: $titlebar-text;
1112
&:disabled { color: $titlebar-text-disabled; }
1114
&, &:disabled { background-color: transparent; }
1116
}
1117
&:backdrop {
1119
color: $titlebar-text-disabled;
1120
&:focus, &:hover, &:active { color: $titlebar-text-secondary; }
1122
&:disabled { color: $titlebar-text-secondary-disabled; }
1124
&:checked {
1126
color: $titlebar-text-secondary;
1127
&:disabled { color: $titlebar-text-secondary-disabled; }
1129
}
1130
}
1131
}
1132
button.suggested-action, button.destructive-action {
1134
&:disabled {
1135
background-color: $titlebar-fill;
1136
color: $titlebar-text-disabled;
1137
}
1138
}
1139
&.selection-mode {
1141
// 0.1ms was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1142
// but let's keep it for backwards compatibility.
1143
transition: background-color 0.1ms $ripple-fade-in-duration, color $duration $ease-out;
1144
animation: ripple-on-headerbar $ripple-fade-in-duration $ease-out;
1145
box-shadow: $shadow-1, inset 0 1px highlight($primary-dark);
1146
background-color: $primary-dark;
1147
color: on($primary-dark);
1148
&:backdrop {
1150
color: on($primary-dark, secondary);
1151
}
1152
.subtitle:link { color: on($primary-dark); }
1154
button:not(.suggested-action):not(.destructive-action) {
1156
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1157
currentColor 0%,
1158
transparent 0%)
1159
0 0 0 / 0 0 0px;
1160
color: on($primary-dark);
1161
&:disabled { color: on($primary-dark, disabled); }
1163
&:checked {
1165
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1166
currentColor 100%,
1167
transparent 0%)
1168
0 0 2 / 0 0 2px;
1169
color: on($primary-dark);
1170
&:disabled { color: on($primary-dark, disabled); }
1172
}
1173
&:backdrop {
1175
color: on($primary-dark, secondary);
1176
&:disabled { color: on($primary-dark, secondary-disabled); }
1178
&:checked {
1180
color: on($primary-dark, secondary);
1181
&:disabled { color: on($primary-dark, secondary-disabled); }
1183
}
1184
}
1185
}
1186
.selection-menu {
1188
padding-left: 16px;
1189
padding-right: 16px;
1190
arrow { -GtkArrow-arrow-scaling: 1; }
1192
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1194
}
1195
}
1196
// squared corners when the window is maximized, tiled, or fullscreen
1198
.tiled &,
1199
.tiled-top &,
1200
.tiled-right &,
1201
.tiled-bottom &,
1202
.tiled-left &,
1203
.maximized &,
1204
.fullscreen & {
1205
border-radius: 0;
1206
box-shadow: $shadow-1;
1207
}
1208
&.default-decoration {
1210
min-height: $small-size;
1211
padding: $container-padding;
1212
box-shadow: inset 0 1px highlight($titlebar);
1213
.tiled &,
1215
.maximized &,
1216
.fullscreen & { box-shadow: none; }
1217
button.titlebutton {
1219
min-height: $small-size;
1220
min-width: $small-size;
1221
margin: 0;
1222
padding: 0;
1223
}
1224
// workaround for non-animatable buttons
1226
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1227
}
1228
.solid-csd & {
1230
&:dir(rtl), &:dir(ltr) { // specificity bump
1231
// margin-left: -2px;
1232
// margin-right: -2px;
1233
// margin-top: -2px;
1234
// border-radius: 0;
1235
box-shadow: $shadow-1; // Remove highlight as window managers should have it
1236
}
1237
}
1238
}
1239
headerbar {
1241
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1242
entry,
1243
spinbutton,
1244
button {
1245
margin-top: $container-padding;
1246
margin-bottom: $container-padding;
1247
}
1248
separator.titlebutton {
1250
margin-top: $large-size / 4;
1251
margin-bottom: $large-size / 4;
1252
background-color: $titlebar-divider;
1253
}
1254
switch {
1256
margin-top: ($large-size - 24px) / 2;
1257
margin-bottom: ($large-size - 24px) / 2;
1258
}
1259
// reset button margins of the spinbutton
1261
spinbutton button {
1262
margin-top: 0;
1263
margin-bottom: 0;
1264
}
1265
// FIXME: This is a hacky workaround.
1267
.entry-tag {
1268
margin-top: 5px;
1269
margin-bottom: 5px;
1270
}
1271
&.titlebar headerbar:not(.titlebar) {
1273
// Drop the background of non-titlebar nested headerbars. This is needed to
1274
// work around headerbar sliding animation issues without refactoring
1275
// Adwaita's support of titlebars and headerbars as it may break
1276
// applications.
1277
// See https://gitlab.gnome.org/GNOME/gtk/issues/1264 for more information.
1278
background-color: transparent;
1279
box-shadow: none;
1280
}
1281
}
1282
.background .titlebar {
1284
border-top-left-radius: $corner-radius;
1285
border-top-right-radius: $corner-radius;
1286
}
1287
.background.tiled .titlebar,
1289
.background.tiled-top .titlebar,
1290
.background.tiled-right .titlebar,
1291
.background.tiled-bottom .titlebar,
1292
.background.tiled-left .titlebar,
1293
.background.maximized .titlebar,
1294
.background.solid-csd .titlebar {
1295
border-top-left-radius: 0;
1296
border-top-right-radius: 0;
1297
}
1298
headerbar { // headerbar border rounding
1300
window separator:first-child + &, // tackles the paned container case
1301
window &:first-child { border-top-left-radius: $corner-radius; }
1302
window &:last-child { border-top-right-radius: $corner-radius; }
1304
window stack & { // tackles the stacked headerbars case
1306
&:first-child, &:last-child {
1307
border-top-left-radius: $corner-radius;
1308
border-top-right-radius: $corner-radius;
1309
}
1310
}
1311
window.tiled &,
1313
window.tiled-top &,
1314
window.tiled-right &,
1315
window.tiled-bottom &,
1316
window.tiled-left &,
1317
window.maximized &,
1318
window.fullscreen &,
1319
window.solid-csd & {
1320
&,
1321
&:first-child,
1322
&:last-child,
1323
&:only-child {
1324
border-top-left-radius: 0;
1325
border-top-right-radius: 0;
1326
}
1327
}
1328
}
1329
.titlebar:not(headerbar) {
1331
window.csd > & {
1332
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1333
padding: 0;
1334
background-color: transparent;
1335
background-image: none;
1336
border-style: none;
1337
box-shadow: none;
1338
}
1339
> separator {
1341
background-color: $titlebar;
1342
background-image: image($divider);
1343
}
1344
@extend %titlebar;
1346
}
1347
// Development versions of apps to use a differently styled headerbar
1349
window.devel headerbar.titlebar:not(.selection-mode) {
1350
}
1351
/************
1354
* Pathbars *
1355
************/
1356
%pathbar_button,
1357
.path-bar button {
1358
padding-left: ($medium-size - 24px) / 2;
1359
padding-right: ($medium-size - 24px) / 2;
1360
label:not(:only-child) {
1362
&:first-child { margin-left: 4px; }
1363
&:last-child { margin-right: 4px; }
1365
}
1366
&.slider-button {
1368
padding-left: (24px - 16px) / 2;
1369
padding-right: (24px - 16px) / 2;
1370
}
1371
:not(headerbar) & {
1373
@extend %flat_button;
1374
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1376
$primary 0%,
1377
transparent 0%)
1378
0 0 0 / 0 0 0px;
1379
border-radius: $corner-radius;
1380
&:checked {
1382
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1383
$primary 100%,
1384
transparent 0%)
1385
0 0 2 / 0 0 2px;
1386
&, &:disabled { background-color: transparent; }
1388
}
1389
}
1390
}
1391
/**************
1394
* Tree Views *
1395
**************/
1396
treeview.view {
1397
@at-root * {
1398
-GtkTreeView-horizontal-separator: 4;
1399
-GtkTreeView-grid-line-width: 1;
1400
-GtkTreeView-grid-line-pattern: '';
1401
-GtkTreeView-tree-line-width: 1;
1402
-GtkTreeView-tree-line-pattern: '';
1403
-GtkTreeView-expander-size: 16;
1404
}
1405
border-left-color: $track; // this is actually the tree lines color,
1407
border-top-color: $divider; // while this is the grid lines color, better then nothing
1408
// FIXME: Avoid transparency background-color being slightly darker
1410
&:selected {
1411
background-color: $base;
1412
background-image: image($overlay-selected);
1413
}
1414
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1416
&:hover, &:selected { border-radius: 0; }
1418
&.separator {
1420
min-height: 1px + 2px * 2;
1421
color: $divider;
1422
}
1423
// FIXME: box-shadow, background-color and background-image are not available here.
1425
&:drop(active) {
1426
border-style: solid none;
1427
border-width: 9999px;
1428
border-color: $overlay-hover;
1429
&.after { border-top-style: none; }
1431
&.before { border-bottom-style: none; }
1433
}
1434
&.expander {
1436
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1437
-gtk-icon-transform: rotate(-90deg);
1438
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1440
&:checked { -gtk-icon-transform: unset; }
1442
color: $text-secondary;
1444
&:hover, &:active { color: $text; }
1446
&:disabled { color: $text-secondary-disabled; }
1448
}
1449
&.progressbar { // progress bar in treeviews
1451
border-bottom: $bar-size solid $primary;
1452
box-shadow: none;
1453
background-color: transparent;
1454
background-image: none;
1455
&:selected:hover { box-shadow: none; }
1457
}
1458
&.trough { // progress bar trough in treeviews
1460
border-bottom: $bar-size solid $track-disabled;
1461
box-shadow: none;
1462
background-color: transparent;
1463
background-image: none;
1464
&:selected:hover { box-shadow: none; }
1466
}
1467
header {
1469
button {
1470
@extend row.activatable;
1471
padding: 2px 6px;
1473
border-style: none solid solid none;
1474
border-width: 1px;
1475
border-color: $divider;
1476
border-radius: 0;
1477
background-clip: border-box;
1478
&:not(:focus):not(:hover):not(:active) { color: $text-secondary; }
1480
&, &:hover, &:active { box-shadow: none; }
1482
&, &:disabled { background-color: $base; }
1484
&:last-child { border-right-style: none; }
1486
}
1487
}
1488
button.dnd,
1490
header.button.dnd { // for treeview-like derive widgets
1491
padding: 2px 6px;
1492
border-style: none solid solid;
1493
border-width: 1px;
1494
border-color: $divider;
1495
border-radius: 0;
1496
box-shadow: none;
1497
background-color: $base;
1498
background-clip: border-box;
1499
color: $primary;
1500
}
1501
acceleditor > label { background-color: $primary; } // see tests/testaccel to test
1503
}
1504
/*********
1507
* Menus *
1508
*********/
1509
menubar,
1510
.menubar {
1511
-GtkWidget-window-dragging: true;
1512
padding: 0;
1513
// box-shadow: inset 0 -1px $divider;
1514
background-color: $titlebar;
1515
color: $titlebar-text;
1516
> menuitem {
1518
transition: $transition;
1519
min-height: 20px;
1520
padding: 4px 8px;
1521
color: $titlebar-text-secondary;
1522
&:hover { // Seems like it :hover even with keyboard focus
1524
transition: none;
1525
background-color: $overlay-checked;
1526
color: $titlebar-text;
1527
}
1528
&:disabled { color: $titlebar-text-secondary-disabled; }
1530
label:disabled { color: inherit; } // to inherit the above color
1532
}
1533
}
1534
// Needed to make the border-radius of menus work
1536
// otherwise the background bleeds out of the menu edges
1537
.background.popup { background-color: transparent; }
1538
menu,
1540
.menu,
1541
.context-menu {
1542
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1543
padding: 4px 0;
1544
box-shadow: inset 0 1px highlight($surface);
1545
background-color: $surface;
1546
border: 1px solid $frame; // adds borders in a non composited env
1547
.csd & {
1549
border: none; // axes borders in a composited env
1550
border-radius: $corner-radius;
1551
}
1552
menuitem {
1554
transition: background-color $duration $ease-out;
1555
min-height: 20px;
1556
min-width: 40px;
1557
padding: 4px 8px;
1558
color: $text;
1559
font: initial;
1560
text-shadow: none;
1561
&:hover {
1563
transition: none;
1564
background-color: $overlay-hover;
1565
}
1566
&:disabled { color: $text-disabled; }
1568
// submenu indicators
1570
arrow {
1571
min-height: 16px;
1572
min-width: 16px;
1573
&:dir(ltr) {
1575
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1576
margin-left: 8px;
1577
}
1578
&:dir(rtl) {
1580
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1581
margin-right: 8px;
1582
}
1583
}
1584
// avoids labels color being overridden, see
1586
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1587
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1588
}
1589
// overflow arrows
1591
> arrow {
1592
min-height: 16px;
1593
min-width: 16px;
1594
padding: 4px;
1595
background-color: $surface;
1596
color: $text-secondary;
1597
&.top {
1599
margin-top: -4px;
1600
border-bottom: 1px solid $divider;
1601
border-radius: $corner-radius $corner-radius 0 0;
1602
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1603
}
1604
&.bottom {
1606
margin-top: 4px * 2;
1607
margin-bottom: -4px * 3;
1608
border-top: 1px solid $divider;
1609
border-radius: 0 0 $corner-radius $corner-radius;
1610
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1611
}
1612
&:hover {
1614
background-image: image($overlay-hover);
1615
color: $text;
1616
}
1617
&:disabled {
1619
border-color: transparent;
1620
background-color: transparent;
1621
color: transparent;
1622
// color: $text-secondary-disabled;
1623
}
1624
}
1625
separator { margin: 4px 0; }
1627
}
1628
menuitem {
1630
accelerator { color: $text-secondary; }
1631
&:disabled accelerator { color: $text-secondary-disabled; }
1633
}
1634
/************
1637
* Popovers *
1638
************/
1639
popover.background {
1640
transition: $transition-shadow;
1641
padding: 2px;
1642
box-shadow: $shadow-2; // TODO: this should really have a highlight
1643
background-color: $surface;
1644
&:backdrop { box-shadow: $shadow-1; }
1646
&, .csd & {
1648
border-style: solid;
1649
border-width: 1px;
1650
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1651
border-radius: $corner-radius + 1px;
1652
}
1653
> stack { margin: -4px; } // remove extra padding from menu style popovers
1655
> toolbar { margin: -2px; }
1657
> list,
1659
> .view,
1660
> toolbar {
1661
border-style: none;
1662
box-shadow: none;
1663
background-color: transparent;
1664
}
1665
// FIXME: Use the popover color instead of transparent as a workaround for .view
1667
list,
1668
.view:not(:selected),
1669
toolbar { background-color: $surface; }
1670
// &.touch-selection,
1672
// &.magnifier,
1673
// &.osd { @extend %osd; }
1674
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1676
&.menu button,
1678
button.model {
1679
@extend %simple_flat_button;
1680
min-height: 32px;
1682
padding: 0 8px;
1683
border-radius: $corner-radius;
1684
&:checked { @extend %selected_items; }
1686
}
1687
separator { margin: 4px 0; }
1689
list separator { margin: 0; }
1691
}
1692
/*************
1694
* Notebooks *
1695
*************/
1696
notebook {
1697
frame > paned > & > header,
1698
&.frame > header { background-color: $base-alt; }
1699
&:focus tab:checked {
1701
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
1702
}
1703
> header {
1705
border-width: 1px;
1706
border-color: $divider;
1707
background-color: $background;
1708
background-clip: border-box;
1709
&.top {
1711
border-bottom-style: solid;
1712
> tabs {
1714
margin-bottom: -1px;
1715
> tab {
1717
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1718
&:checked { border-image-source: linear-gradient(to top, $primary 2px, $frame 2px); }
1720
&.reorderable-page { border-image-width: 0 1px 2px; }
1722
}
1723
}
1724
}
1725
&.bottom {
1727
border-top-style: solid;
1728
> tabs {
1730
margin-top: -1px;
1731
> tab {
1733
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1734
&:checked { border-image-source: linear-gradient(to bottom, $primary 2px, $frame 2px); }
1736
&.reorderable-page { border-image-width: 2px 1px 0; }
1738
}
1739
}
1740
}
1741
&.left {
1743
border-right-style: solid;
1744
> tabs {
1746
margin-right: -1px;
1747
> tab {
1749
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1750
&:checked { border-image-source: linear-gradient(to left, $primary 2px, $frame 2px); }
1752
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1754
}
1755
}
1756
}
1757
&.right {
1759
border-left-style: solid;
1760
> tabs {
1762
margin-left: -1px;
1763
> tab {
1765
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1766
&:checked { border-image-source: linear-gradient(to right, $primary 2px, $frame 2px); }
1768
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1770
}
1771
}
1772
}
1773
&.top > tabs > arrow {
1775
@extend %notebook_vert_arrows;
1776
border-top-style: none;
1778
}
1779
&.bottom > tabs > arrow {
1781
@extend %notebook_vert_arrows;
1782
border-bottom-style: none;
1784
}
1785
@at-root %notebook_vert_arrows {
1787
padding-left: 4px;
1788
padding-right: 4px;
1789
&.down {
1791
margin-left: -8px;
1792
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1793
}
1794
&.up {
1796
margin-right: -8px;
1797
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1798
}
1799
}
1800
&.left > tabs > arrow {
1802
@extend %notebook_horz_arrows;
1803
border-left-style: none;
1805
}
1806
&.right > tabs > arrow {
1808
@extend %notebook_horz_arrows;
1809
border-right-style: none;
1811
}
1812
@at-root %notebook_horz_arrows {
1814
padding-top: 4px;
1815
padding-bottom: 4px;
1816
&.down {
1818
margin-top: -8px;
1819
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1820
}
1821
&.up {
1823
margin-bottom: -8px;
1824
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1825
}
1826
}
1827
> tabs > arrow {
1829
@extend %simple_flat_button;
1830
min-height: 16px;
1832
min-width: 16px;
1833
border-radius: 0;
1834
}
1835
tab {
1837
transition: $transition,
1838
background-size 0ms,
1839
background-image 0ms;
1840
min-height: $small-size;
1841
min-width: $small-size;
1842
padding: $container-padding 12px;
1843
border-width: 1px; // for reorderable tabs
1845
border-color: transparent; //
1846
outline: none;
1848
background-image: radial-gradient(circle, $primary 10%, transparent 0%);
1849
background-repeat: no-repeat;
1850
background-position: center;
1851
background-size: 0% 0%;
1852
background-clip: border-box;
1853
color: $text-secondary;
1855
font-weight: 500;
1856
&:hover {
1858
background-color: $overlay-hover;
1859
color: $text;
1860
}
1861
&:disabled { color: $text-secondary-disabled; }
1863
&:checked {
1865
transition: $transition,
1866
background-size $ripple-fade-in-duration $ease-out,
1867
background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
1868
background-color: transparent;
1869
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
1870
background-size: 1000% 1000%;
1871
background-clip: padding-box;
1872
color: $text;
1873
&:disabled { color: $text-disabled; }
1875
&.reorderable-page {
1877
border-color: $frame;
1878
background-color: $base;
1879
}
1880
}
1881
// FIXME: The tab node doesn't have :drop(active), instead its child box has it.
1883
> box {
1884
transition: $transition;
1885
margin: -$container-padding -12px;
1886
padding: $container-padding 12px;
1887
&:drop(active) { @extend tab:hover; }
1889
}
1890
// colors the button like the label, overridden otherwise
1892
button.flat {
1893
@extend %small_button;
1894
&:last-child {
1896
margin-left: $container-padding;
1897
margin-right: $container-padding - 12px;
1898
}
1899
&:first-child {
1901
margin-left: $container-padding - 12px;
1902
margin-right: $container-padding;
1903
}
1904
}
1905
}
1906
&.top,
1908
&.bottom {
1909
tabs {
1910
padding-left: 8px;
1911
padding-right: 8px;
1912
&:not(:only-child) {
1914
&:first-child { margin-left: 0; }
1915
&:last-child { margin-right: 0; }
1917
}
1918
tab.reorderable-page { border-style: none solid; }
1920
}
1921
}
1922
&.left,
1924
&.right {
1925
tabs {
1926
padding-top: 8px;
1927
padding-bottom: 8px;
1928
&:not(:only-child) {
1930
&:first-child { margin-top: 0; }
1931
&:last-child { margin-bottom: 0; }
1933
}
1934
tab.reorderable-page { border-style: solid none; }
1936
}
1937
}
1938
}
1939
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1941
background-color: $base;
1942
}
1943
}
1944
/**************
1947
* Scrollbars *
1948
**************/
1949
scrollbar {
1950
$_slider_min_length: 24px;
1951
// disable steppers
1953
@at-root * {
1954
-GtkScrollbar-has-backward-stepper: false;
1955
-GtkScrollbar-has-forward-stepper: false;
1956
}
1957
transition: $transition;
1959
background-color: $base;
1960
background-clip: $background-clip-extra;
1961
// scrollbar border
1963
&.top { border-bottom: 1px solid $divider; }
1964
&.bottom { border-top: 1px solid $divider; }
1965
&.left { border-right: 1px solid $divider; }
1966
&.right { border-left: 1px solid $divider; }
1967
// slider
1969
slider {
1970
transition: $transition, margin 0ms, border-width 0ms;
1971
min-width: 8px;
1972
min-height: 8px;
1973
border: 4px solid transparent;
1974
border-radius: $circular-radius;
1975
background-clip: padding-box;
1976
background-color: $text-disabled;
1977
&:hover { background-color: $text-secondary; }
1979
&:active { background-color: $text; }
1981
&:disabled { background-color: $text-secondary-disabled; }
1983
}
1984
&.fine-tune {
1986
slider {
1987
transition: $transition, margin 0ms, border-width 0ms, min-width 0ms, min-height 0ms;
1988
min-width: 4px;
1989
min-height: 4px;
1990
}
1991
&.horizontal slider { margin: 2px 0; }
1993
&.vertical slider { margin: 0 2px; }
1995
}
1996
&.overlay-indicator {
1998
&:not(.dragging):not(.hovering) {
1999
border-color: transparent;
2000
background-color: transparent;
2001
slider {
2003
min-width: 4px;
2004
min-height: 4px;
2005
margin: 4px - 1px;
2006
border: 1px solid rgba($base, 0.3);
2007
}
2008
button {
2010
min-width: 4px;
2011
min-height: 4px;
2012
margin: 4px - 1px;
2013
border: 1px solid rgba($base, 0.3);
2014
border-radius: $circular-radius;
2015
background-color: $text-disabled;
2016
background-clip: padding-box;
2017
-gtk-icon-source: none;
2018
&:disabled { background-color: $text-secondary-disabled; }
2020
}
2021
&.horizontal {
2023
slider { min-width: $_slider_min_length; }
2024
button { min-width: 8px; }
2026
}
2027
&.vertical {
2029
slider { min-height: $_slider_min_length; }
2030
button { min-height: 8px; }
2032
}
2033
}
2034
&.dragging,
2036
&.hovering { background-color: rgba($base, 0.9); }
2037
}
2038
&.horizontal slider { min-width: $_slider_min_length; }
2040
&.vertical slider { min-height: $_slider_min_length; }
2042
// button styling
2044
button {
2045
@extend %simple_flat_button;
2046
min-width: 16px;
2048
min-height: 16px;
2049
padding: 0;
2050
border-radius: 0;
2051
}
2052
// button icons
2054
&.vertical {
2055
button {
2056
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2057
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2059
}
2060
}
2061
&.horizontal {
2063
button {
2064
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2065
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2067
}
2068
}
2069
}
2070
/**********
2073
* Switch *
2074
**********/
2075
switch {
2076
transition: all $duration $ease-out;
2077
margin: $container-padding 0;
2078
padding: 0 2px;
2079
border: 5px solid transparent;
2080
border-radius: $circular-radius;
2081
background-color: $track;
2082
background-clip: padding-box;
2083
font-size: 0;
2084
&:checked { background-color: rgba($primary, 0.5); }
2086
&:disabled { opacity: 0.5; }
2088
// hide on/off icons for >=3.24.5
2090
image {
2091
margin: -8px;
2092
-gtk-icon-transform: scale(0);
2093
}
2094
slider {
2096
transition: all $duration $ease-out;
2097
min-width: 20px;
2098
min-height: 20px;
2099
margin: -3px -2px;
2100
border-radius: $circular-radius;
2101
outline: none;
2102
box-shadow: 0 0 0 10px transparent, $shadow-1;
2103
background-color: $surface;
2104
}
2105
&:focus slider { box-shadow: 0 0 0 10px $overlay-focus, $shadow-1; }
2107
&:hover slider { box-shadow: 0 0 0 10px $overlay-hover, $shadow-1; }
2109
&:focus:hover slider { box-shadow: 0 0 0 10px $overlay-focus-hover, $shadow-1; }
2111
&:checked slider {
2113
background-color: $primary;
2114
color: $primary;
2115
}
2116
row:selected & {
2118
}
2119
}
2120
/*************************
2123
* Check and Radio items *
2124
*************************/
2125
// draw regular check and radio items using our PNG assets
2126
// all assets are rendered from assets.svg. never add pngs directly
2127
// selection-mode
2129
.view.content-view.check:not(list),
2130
.content-view .tile check:not(list) {
2131
min-height: 40px;
2132
min-width: 40px;
2133
margin: 0;
2134
padding: 0;
2135
box-shadow: none;
2136
background-color: transparent;
2137
background-image: none;
2138
-gtk-icon-shadow: $shadow-1;
2139
&:hover, &:active { -gtk-icon-shadow: $shadow-2; }
2141
@each $s, $as in ('', '-unchecked'),
2143
(':checked', '-checked') {
2144
&#{$s} {
2145
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}.png"),
2146
url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}@2.png"));
2147
}
2148
}
2149
}
2150
checkbutton,
2152
radiobutton {
2153
outline: none;
2154
}
2155
checkbutton.text-button,
2157
radiobutton.text-button {
2158
// this is for a nice focus on check and radios text
2159
padding: 2px;
2160
label:not(:only-child) { margin: 0 4px; }
2162
}
2163
$check_radio_size: 40px;
2165
check,
2167
radio {
2168
min-height: 24px;
2169
min-width: 24px;
2170
margin: -($check_radio_size - 24px) / 2;
2171
padding: ($check_radio_size - 24px) / 2;
2172
@extend %simple_flat_button;
2174
@extend %circular_button;
2176
&:checked, &:indeterminate {
2178
color: $primary;
2179
&:disabled { color: $text-secondary-disabled; }
2181
}
2182
// &:only-child { margin: -12px; }
2184
popover modelbutton.flat & {
2186
&, &:focus, &:hover, &:focus:hover, &:active, &:disabled {
2187
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2188
box-shadow: none;
2189
background-image: none;
2190
}
2191
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2193
&.left:dir(rtl) {
2195
margin-left: -12px;
2196
margin-right: -4px;
2197
}
2198
&.right:dir(ltr) {
2200
margin-left: -4px;
2201
margin-right: -12px;
2202
}
2203
}
2204
menu menuitem & {
2206
transition: none;
2207
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2208
padding: 0;
2209
&:dir(ltr) { margin-right: 8px; }
2211
&:dir(rtl) { margin-left: 8px; }
2213
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2215
&, &:hover, &:disabled {
2217
box-shadow: none;
2218
// color: inherit;
2219
}
2220
}
2221
}
2222
%check,
2224
check {
2225
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2226
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2228
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2230
}
2231
%radio,
2233
radio {
2234
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2235
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2237
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2239
border-image-slice: $check_radio_size / 2px;
2241
border-image-width: $check_radio_size / 2;
2242
$radio_indicator: 10px / $check_radio_size / 2;
2244
& {
2246
border-image-source: -gtk-gradient(radial,
2247
center center, 0,
2248
center center, 0.001,
2249
to($primary),
2250
to(transparent));
2251
}
2252
&:checked:not(:indeterminate) {
2254
border-image-source: -gtk-gradient(radial,
2255
center center, 0,
2256
center center, $radio_indicator,
2257
to($primary),
2258
to(transparent));
2259
}
2260
&:checked:not(:indeterminate):disabled {
2262
border-image-source: -gtk-gradient(radial,
2263
center center, 0,
2264
center center, $radio_indicator,
2265
to($text-secondary-disabled),
2266
to(transparent));
2267
}
2268
}
2269
%small_check,
2271
menu menuitem check {
2272
& {
2273
min-height: 16px;
2274
min-width: 16px;
2275
border-radius: $corner-radius;
2276
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2277
}
2278
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2280
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2282
}
2283
%small_radio,
2285
menu menuitem radio {
2286
& {
2287
min-height: 16px;
2288
min-width: 16px;
2289
border-image: none;
2290
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2291
}
2292
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2294
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2296
}
2297
// ANIMATION:
2299
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2300
// the transformation is set on the active state and it get reset on the checked state.
2301
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2302
treeview.view check,
2304
treeview.view radio {
2305
padding: 0;
2306
&:hover, &:selected {
2308
box-shadow: none;
2309
background-color: transparent;
2310
}
2311
& {
2313
color: $text-secondary;
2314
&:hover, &:active { color: $text; }
2316
&:disabled { color: $text-secondary-disabled; }
2318
&:checked, &:indeterminate { color: $primary; }
2320
&:checked:disabled, &:indeterminate:disabled { color: $text-secondary-disabled; }
2322
}
2323
}
2324
treeview.view radio:checked {
2326
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2327
border-image: none;
2328
}
2329
/************
2332
* GtkScale *
2333
************/
2334
scale {
2335
// sizing
2336
$_marks_length: 8px;
2337
$_marks_distance: 7px;
2338
$trough_size: 2px;
2340
$finetune_trough_size: 4px;
2341
$slider_size: 32px;
2343
$slider_margin: -($slider_size - $trough_size) / 2;
2345
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2346
$color_slider_margin: -($slider_size) * 3 / 4;
2348
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2349
min-height: $trough_size;
2351
min-width: $trough_size;
2352
&.horizontal { padding: ($medium-size - $trough_size) / 2 12px; }
2354
&.vertical { padding: 12px ($medium-size - $trough_size) / 2; }
2356
// the slider is inside the trough, so to have make it bigger there's a negative margin
2358
slider {
2359
min-height: $slider_size;
2360
min-width: $slider_size;
2361
margin: $slider_margin;
2362
}
2363
// click-and-hold the slider to activate
2365
&.fine-tune {
2366
&.horizontal {
2367
min-height: $finetune_trough_size;
2368
padding-top: ($medium-size - $finetune_trough_size) / 2;
2369
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2370
}
2371
&.vertical {
2373
min-width: $finetune_trough_size;
2374
padding-left: ($medium-size - $finetune_trough_size) / 2;
2375
padding-right: ($medium-size - $finetune_trough_size) / 2;
2376
}
2377
// to make the trough grow in fine-tune mode
2379
slider { margin: $finetune_slider_margin; }
2380
}
2381
// the backing bit
2383
trough {
2384
transition: background-color $duration $ease-out;
2385
outline: none;
2386
background-color: $track;
2387
&:disabled { background-color: $track-disabled; }
2389
}
2390
// the colored part of the backing bit
2392
highlight {
2393
transition: background-color $duration $ease-out;
2394
background-color: $primary;
2395
&:disabled { background-color: transparent; }
2397
}
2398
// this is another differently styled part of the backing bit, the most relevant use case is for example
2400
// in media player to indicate how much video stream as been cached
2401
fill {
2402
transition: background-color $duration $ease-out;
2403
background-color: $track;
2404
&:disabled { background-color: transparent; }
2406
}
2407
slider {
2409
transition: background-color $duration $ease-out,
2410
background-size $ripple-fade-out-duration $ease-out,
2411
background-image $ripple-fade-out-opacity-duration $ease-out;
2412
background-repeat: no-repeat;
2413
background-position: center;
2414
background-size: auto, 1000% 1000%;
2415
border-radius: 50%;
2416
color: $primary;
2417
@each $s, $as in ('', ''),
2419
(':disabled', '-disabled') {
2420
&#{$s} {
2421
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
2422
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2424
radial-gradient(circle, transparent 10%, transparent 0%);
2425
}
2426
}
2427
&:focus { background-color: $overlay-focus; }
2429
&:hover { background-color: $overlay-hover; }
2431
&:focus:hover { background-color: $overlay-focus-hover; }
2433
&:active {
2435
$_url: 'assets/scale-slider#{$asset-suffix}';
2436
transition: background-color $duration $ease-out,
2438
background-size 0ms,
2439
background-image 0ms;
2440
animation: ripple-on-slider $ripple-fade-in-duration $ease-out forwards;
2441
background-color: $overlay-hover;
2442
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2443
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2444
background-size: auto, 0% 0%;
2445
}
2446
}
2447
marks label,
2449
value { color: $text-secondary; }
2450
marks {
2452
color: $track;
2453
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2455
(bottom, bottom, top),
2456
(left, left, right),
2457
(right, right, left) {
2458
&.#{$marks_class} {
2459
margin-#{$marks_margin}: $_marks_distance;
2460
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2461
}
2462
}
2463
}
2464
&.fine-tune marks {
2466
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2467
(bottom, bottom, top),
2468
(left, left, right),
2469
(right, right, left) {
2470
&.#{$marks_class} {
2471
margin-#{$marks_margin}: $_marks_distance - 1px;
2472
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2473
}
2474
}
2475
}
2476
&.horizontal {
2478
indicator {
2479
min-height: $_marks_length;
2480
min-width: 1px;
2481
}
2482
}
2483
&.vertical {
2485
indicator {
2486
min-height: 1px;
2487
min-width: $_marks_length;
2488
}
2489
}
2490
// *WARNING* scale with marks madness following
2492
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2494
('vertical', 'vert') {
2495
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2496
('marks-after', 'marks-after:not(.marks-before)') {
2497
&.#{$dir_class}.#{$marks_class} {
2498
slider {
2499
@each $state, $state_infix in ('', ''),
2500
(':disabled', '-disabled') {
2501
&#{$state} {
2502
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2503
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2505
radial-gradient(circle, transparent 10%, transparent 0%);
2506
}
2507
}
2508
&:active {
2510
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$asset-suffix}';
2511
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2513
radial-gradient(circle, $overlay-active 10%, transparent 0%);
2514
}
2515
}
2516
}
2517
}
2518
}
2519
&.color {
2521
min-height: 0;
2522
min-width: 0;
2523
&.horizontal {
2525
padding: 0 0 12px 0;
2526
slider {
2528
&:dir(ltr), &:dir(rtl) { // specificity bump
2529
margin-bottom: $color_slider_margin;
2530
margin-top: $color_marks_slider_margin;
2531
}
2532
}
2533
}
2534
&.vertical {
2536
&:dir(ltr) {
2537
padding: 0 0 0 12px;
2538
slider {
2540
margin-left: $color_slider_margin;
2541
margin-right: $color_marks_slider_margin;
2542
}
2543
}
2544
&:dir(rtl) {
2546
padding: 0 12px 0 0;
2547
slider {
2549
margin-right: $color_slider_margin;
2550
margin-left: $color_marks_slider_margin;
2551
}
2552
}
2553
}
2554
}
2555
}
2556
/*****************
2559
* Progress bars *
2560
*****************/
2561
progressbar {
2562
// sizing
2563
&.horizontal {
2564
trough,
2565
progress { min-height: $bar-size; }
2566
}
2567
&.vertical {
2569
trough,
2570
progress { min-width: $bar-size; }
2571
}
2572
// FIXME: insensitive state missing and some other state should be set probably
2574
color: $text-secondary;
2575
font-size: smaller;
2576
trough { background-color: $track-disabled; }
2578
progress { background-color: $primary; }
2580
&.osd { // progressbar.osd used for epiphany page loading progress
2582
// min-width: $bar-size;
2583
// min-height: $bar-size;
2584
// background-color: transparent;
2585
// trough { background-color: transparent; }
2587
// progress { background-color: $primary; }
2589
}
2590
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2592
}
2593
/*************
2596
* Level Bar *
2597
*************/
2598
levelbar {
2599
&.horizontal {
2600
block { min-height: $bar-size; }
2601
&.discrete block {
2603
min-width: $medium-size;
2604
&:not(:last-child) { margin-right: 2px; }
2606
}
2607
}
2608
&.vertical {
2610
block { min-width: $bar-size; }
2611
&.discrete block {
2613
min-height: $medium-size;
2614
&:not(:last-child) { margin-bottom: 2px; }
2616
}
2617
}
2618
// imitate the entry style
2620
trough {
2621
// padding: 2px;
2622
// border-radius: $corner-radius;
2623
// box-shadow: $shadow-1;
2624
// background-color: $base;
2625
// &:disabled { background-color: $base-alt; }
2627
}
2628
block {
2630
&.low { background-color: $warning; }
2631
&.high,
2633
&:not(.empty) { background-color: $primary; }
2634
&.full { background-color: $success; }
2636
&.empty { background-color: $track-disabled; }
2638
}
2639
}
2640
/****************
2643
* Print dialog *
2644
*****************/
2645
printdialog {
2646
paper {
2647
padding: 0;
2648
border: 1px solid $frame;
2649
background-color: $base;
2650
color: $text;
2651
}
2652
.dialog-action-box { margin: 12px; }
2654
}
2655
/**********
2658
* Frames *
2659
**********/
2660
frame > border,
2661
.frame {
2662
margin: 0;
2663
padding: 0;
2664
border: 1px solid $frame;
2665
border-radius: 0;
2666
box-shadow: none;
2667
&.flat { border-style: none; }
2669
}
2670
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2672
actionbar > revealer > box {
2674
padding: $container-padding;
2675
border-top: 1px solid $divider;
2676
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2678
}
2679
scrolledwindow {
2681
viewport.frame { // avoid double borders when viewport inside scrolled window
2682
border-style: none;
2683
}
2684
// This is used when content is touch-dragged past boundaries.
2686
// draws a box on top of the content, the size changes programmatically.
2687
@at-root overshoot {
2688
&.top { @include overshoot(top); }
2689
&.bottom { @include overshoot(bottom); }
2691
&.left { @include overshoot(left); }
2693
&.right { @include overshoot(right); }
2695
}
2696
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2698
@at-root undershoot {
2699
&.top { @include undershoot(top); }
2700
&.bottom { @include undershoot(bottom); }
2702
&.left { @include undershoot(left); }
2704
&.right { @include undershoot(right); }
2706
}
2707
@at-root junction { // the small square between two scrollbars
2709
border-style: solid none none solid;
2710
border-width: 1px;
2711
border-color: $divider;
2712
background-color: $base;
2713
&:dir(rtl) { border-style: solid solid none none; }
2715
}
2716
}
2717
// vbox and hbox separators
2719
separator {
2720
min-width: 1px;
2721
min-height: 1px;
2722
background-color: $divider;
2723
}
2724
%hide_separators {
2726
min-width: 0;
2727
min-height: 0;
2728
background-color: transparent;
2729
}
2730
/*********
2733
* Lists *
2734
*********/
2735
list {
2736
border-color: $frame;
2737
background-color: $base;
2738
row { padding: 2px; }
2740
}
2741
row {
2743
&.activatable {
2744
transition: $transition,
2745
background-size $ripple-fade-out-duration $ease-out,
2746
background-image $ripple-fade-out-opacity-duration $ease-out;
2747
outline: none;
2748
box-shadow: inset 0 0 0 9999px transparent;
2749
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
2750
background-repeat: no-repeat;
2751
background-position: center;
2752
background-size: 1000% 1000%;
2753
&:focus {
2755
box-shadow: inset 0 0 0 9999px $overlay-focus;
2756
}
2757
&:hover {
2759
transition: $transition,
2760
box-shadow 0ms,
2761
background-size $ripple-fade-out-duration $ease-out,
2762
background-image $ripple-fade-out-opacity-duration $ease-out;
2763
box-shadow: inset 0 0 0 9999px $overlay-hover;
2764
}
2765
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2767
&:active {
2768
transition: $transition,
2769
background-size 0ms,
2770
background-image 0ms;
2771
animation: ripple $ripple-fade-in-duration $ease-out forwards;
2772
box-shadow: inset 0 0 0 9999px $overlay-hover;
2773
background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
2774
background-size: 0% 0%;
2775
}
2776
}
2777
&:selected {
2779
@extend %selected_items;
2780
color: $primary; // for overlays
2781
image,
2783
label { color: $text; }
2784
button image,
2786
button label { color: inherit; }
2787
&:disabled {
2789
image,
2790
label { color: $text-disabled; }
2791
}
2792
}
2793
}
2794
/*********************
2797
* App Notifications *
2798
*********************/
2799
.app-notification {
2800
// @extend %osd;
2801
@extend toolbar.osd;
2803
margin: 8px;
2805
button { @extend %button_basic.flat; }
2807
&.frame,
2809
border { border-style: none; }
2810
}
2811
/*************
2814
* Expanders *
2815
*************/
2816
expander {
2817
title > arrow {
2818
transition: all $duration $ease-out;
2819
min-width: 16px;
2820
min-height: 16px;
2821
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2822
-gtk-icon-transform: rotate(-90deg);
2823
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2825
&:checked { -gtk-icon-transform: unset; }
2827
color: $text-secondary;
2829
&:hover, &:active { color: $text; }
2831
&:disabled { color: $text-secondary-disabled; }
2833
}
2834
}
2835
/************
2838
* Calendar *
2839
************/
2840
calendar {
2841
padding: 1px;
2842
border: 1px solid $frame;
2843
color: $text;
2844
&:disabled { color: $text-disabled; }
2846
&:selected {
2848
@extend %selected_items;
2849
border-radius: $corner-radius + 1px;
2851
}
2852
&.header {
2854
border-style: none none solid;
2855
border-color: $divider;
2856
border-radius: 0;
2857
}
2858
&.button { @extend %simple_flat_button; }
2860
&.highlight {
2862
color: $text-secondary;
2863
font-weight: 500;
2864
}
2865
&:indeterminate { color: $text-secondary-disabled; }
2867
}
2868
/***********
2871
* Dialogs *
2872
***********/
2873
messagedialog { // Message Dialog styling
2874
&.background { background-color: $surface; }
2875
.titlebar {
2877
min-height: $small-size;
2878
border-style: none;
2879
box-shadow: inset 0 1px highlight($surface);
2880
background-color: $surface;
2881
color: $text;
2882
&:backdrop { color: $text-secondary; }
2884
}
2885
&.csd { // rounded bottom border styling for csd version
2887
&.background {
2888
// bigger radius for better antialiasing
2889
border-bottom-left-radius: $corner-radius;
2890
border-bottom-right-radius: $corner-radius;
2891
}
2892
.dialog-action-area {
2894
margin-top: -$container-padding;
2895
padding: $container-padding;
2896
button {
2898
@extend %simple_flat_button;
2899
border-radius: $corner-radius;
2900
&:not(:last-child) { margin-right: $container-padding; }
2902
&:not(:disabled) { color: $primary; }
2904
// &.suggested-action:not(:disabled) { color: $suggested; }
2906
&.destructive-action:not(:disabled) { color: $destructive; }
2908
}
2909
}
2910
}
2911
}
2912
filechooser {
2914
.dialog-action-box { border-top: 1px solid $divider; }
2915
#pathbarbox {
2917
border-bottom: 1px solid $divider;
2918
background-color: $background;
2919
> stack > box > button { // The new folder button
2921
@extend %button_basic.flat;
2922
@extend %circular_button;
2923
}
2924
}
2925
}
2926
filechooserbutton:drop(active) {
2928
box-shadow: none;
2929
}
2930
/***********
2933
* Sidebar *
2934
***********/
2935
.sidebar {
2936
border-style: none;
2937
background-color: $base-alt;
2938
&:not(separator) {
2940
@at-root %sidebar_left,
2941
&:dir(ltr),
2942
&.left,
2943
&.left:dir(rtl) {
2944
border-right: 1px solid $divider;
2945
border-left-style: none;
2946
}
2947
@at-root %sidebar_right,
2949
&:dir(rtl),
2950
&.right {
2951
border-left: 1px solid $divider;
2952
border-right-style: none;
2953
}
2954
}
2955
list { background-color: transparent; }
2957
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2959
}
2960
stacksidebar.sidebar {
2962
& {
2963
&:dir(ltr),
2964
&.left,
2965
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2966
&:dir(rtl),
2968
&.right { list { @extend %sidebar_right; }}
2969
}
2970
+ separator.vertical,
2972
separator.horizontal { @extend %hide_separators; }
2973
list {
2975
padding: 4px;
2976
background-color: $base-alt; // This should not be necessary, but the parent stacksidebar ignores background-color.
2977
}
2978
row {
2980
min-height: 32px;
2981
padding: 0 8px - 6px;
2982
border-radius: $corner-radius;
2983
&:selected {
2985
background-color: $overlay-checked;
2986
font-weight: 500;
2987
}
2988
+ row { margin-top: 4px; }
2990
> label {
2992
padding-left: 6px;
2993
padding-right: 6px;
2994
color: inherit;
2995
}
2996
&.needs-attention > label { @extend %needs-attention; }
2998
}
2999
}
3000
separator.sidebar {
3002
background-color: $divider;
3003
&.selection-mode,
3005
.selection-mode & {
3006
// background-color: $divider;
3007
}
3008
}
3009
/****************
3012
* File chooser *
3013
****************/
3014
// dim the sidebar icons, see bug #786613 for details on this oddity
3015
row {
3016
image.sidebar-icon { color: $text-secondary; }
3017
}
3018
placessidebar.sidebar {
3020
> viewport.frame { border-style: none; }
3021
list { padding: (4px - 3px) 0 4px; }
3023
row {
3025
// Needs overriding of the GtkListBoxRow padding
3026
min-height: 32px;
3027
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3028
padding: 0;
3029
border-radius: $corner-radius;
3030
// Using margins/padding directly in the SidebarRow
3032
// will make the animation of the new bookmark row jump
3033
> revealer { padding: 0 8px; }
3034
&:selected { font-weight: 500; }
3036
&:disabled { color: $text-disabled; }
3038
image.sidebar-icon {
3040
&:dir(ltr) { padding-right: 8px; }
3041
&:dir(rtl) { padding-left: 8px; }
3042
}
3043
label.sidebar-label {
3045
&:dir(ltr) { padding-right: 2px; }
3046
&:dir(rtl) { padding-left: 2px; }
3047
}
3048
&:selected image.sidebar-icon,
3050
&:selected label.sidebar-label { color: inherit; }
3051
@at-root button.sidebar-button {
3053
@extend %simple_flat_button;
3054
@extend %small_button;
3055
}
3056
&.sidebar-placeholder-row { background-color: $overlay-hover; }
3058
&.sidebar-new-bookmark-row { color: $primary; }
3060
&:drop(active) { @extend row:hover; }
3062
}
3063
}
3064
placesview {
3066
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3067
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3069
// this selects the "connect to server" label
3071
> actionbar > revealer > box > label {
3072
padding-left: 8px;
3073
padding-right: 8px;
3074
}
3075
}
3076
/*********
3079
* Paned *
3080
*********/
3081
paned {
3082
> separator {
3083
min-width: 1px;
3084
min-height: 1px;
3085
-gtk-icon-source: none; // defeats the ugly default handle decoration
3086
border-style: none; // just to be sure
3087
background-color: transparent;
3088
// workaround, using background istead of a border since the border will get rendered twice (?)
3089
background-image: image($divider);
3090
background-size: 1px 1px;
3091
background-clip: content-box; // avoids borders image being rendered twice (?)
3092
&.wide {
3094
min-width: 6px;
3095
min-height: 6px;
3096
background-color: $background;
3097
background-image: image($divider), image($divider);
3098
background-size: 1px 1px, 1px 1px;
3099
}
3100
}
3101
&.horizontal > separator {
3103
background-repeat: repeat-y;
3104
&:dir(ltr) {
3106
margin: 0 -8px 0 0;
3107
padding: 0 8px 0 0;
3108
background-position: left;
3109
}
3110
&:dir(rtl) {
3112
margin: 0 0 0 -8px;
3113
padding: 0 0 0 8px;
3114
background-position: right;
3115
}
3116
&.wide {
3118
margin: 0;
3119
padding: 0;
3120
background-repeat: repeat-y, repeat-y;
3121
background-position: left, right;
3122
}
3123
}
3124
&.vertical > separator {
3126
margin: 0 0 -8px 0;
3127
padding: 0 0 8px 0;
3128
background-repeat: repeat-x;
3129
background-position: top;
3130
&.wide {
3132
margin: 0;
3133
padding: 0;
3134
background-repeat: repeat-x, repeat-x;
3135
background-position: bottom, top;
3136
}
3137
}
3138
}
3139
/**************
3142
* GtkInfoBar *
3143
**************/
3144
infobar {
3145
border-style: none;
3146
&.info,
3148
&.question {
3149
border-bottom: 1px solid $divider;
3150
background-color: $base;
3151
button {
3153
@extend %simple_flat_button;
3154
&.text-button {
3156
padding-left: 8px;
3157
padding-right: 8px;
3158
&:not(:disabled) { color: $primary; }
3160
}
3161
}
3162
}
3163
&.warning {
3165
background-color: $warning;
3166
color: on($warning);
3167
// button { @extend %button_selected; }
3169
selection {}
3171
*:link { color: on($warning); }
3173
}
3174
&.error {
3176
background-color: $error;
3177
color: on($error);
3178
button { @extend %button_selected; }
3180
selection {}
3182
*:link { color: on($error); }
3184
}
3185
}
3186
/************
3189
* Tooltips *
3190
************/
3191
tooltip {
3192
&.background {
3193
// background-color needs to be set this way otherwise it gets drawn twice
3194
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3195
background-color: $tooltip;
3196
color: on($tooltip);
3197
}
3198
// padding: 4px; /* not working */
3200
border-radius: $corner-radius;
3201
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3202
&:not(.csd):not(.unity-csd) {
3204
// border: 1px solid $frame;
3205
// border-radius: $corner-radius + 1px;
3206
// background-clip: $background-clip-extra;
3207
}
3208
// FIXME: we need a border or tooltips vanish on black background.
3210
decoration { background-color: transparent; }
3211
> box {
3213
margin: -6px; // Remove hard-coded 6px padding
3214
min-height: 32px - 4px * 2;
3215
padding: 4px 8px;
3216
}
3217
* {
3219
// workaround for Eclipse.
3220
// do not include any declaration here.
3221
// padding: 0;
3222
// background-color: transparent;
3223
// color: inherit;
3224
}
3225
}
3226
/*****************
3229
* Color Chooser *
3230
*****************/
3231
colorswatch {
3232
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3233
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3234
// applied to the overlay box.
3235
// base color corners rounding
3237
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3238
// sports a bigger radius.
3239
// nth-child is needed by the custom color strip.
3240
&.top {
3242
border-top-left-radius: $corner-radius + 0.5px;
3243
border-top-right-radius: $corner-radius + 0.5px;
3244
overlay {
3246
border-top-left-radius: $corner-radius;
3247
border-top-right-radius: $corner-radius;
3248
}
3249
}
3250
&.bottom {
3252
border-bottom-left-radius: $corner-radius + 0.5px;
3253
border-bottom-right-radius: $corner-radius + 0.5px;
3254
overlay {
3256
border-bottom-left-radius: $corner-radius;
3257
border-bottom-right-radius: $corner-radius;
3258
}
3259
}
3260
&.left,
3262
&:first-child:not(.top) {
3263
border-top-left-radius: $corner-radius + 0.5px;
3264
border-bottom-left-radius: $corner-radius + 0.5px;
3265
overlay {
3267
border-top-left-radius: $corner-radius;
3268
border-bottom-left-radius: $corner-radius;
3269
}
3270
}
3271
&.right,
3273
&:last-child:not(.bottom) {
3274
border-top-right-radius: $corner-radius + 0.5px;
3275
border-bottom-right-radius: $corner-radius + 0.5px;
3276
overlay {
3278
border-top-right-radius: $corner-radius;
3279
border-bottom-right-radius: $corner-radius;
3280
}
3281
}
3282
&.dark { color: on(dark); }
3284
&.light { color: on(light); }
3286
overlay {
3288
transition: $transition-shadow;
3289
box-shadow: $shadow-1;
3290
&:hover { box-shadow: $shadow-2; }
3292
&:drop(active) { box-shadow: $shadow-2; }
3294
}
3295
&#add-color-button {
3297
border-radius: $corner-radius $corner-radius 0 0;
3298
color: on(dark);
3299
&:only-child { border-radius: $corner-radius; }
3301
overlay {
3303
background-image: linear-gradient(to right,
3304
$red 25%,
3305
$yellow 25%, $yellow 50%,
3306
$green 50%, $green 75%,
3307
$blue 75%);
3308
}
3309
}
3310
&:disabled {
3312
opacity: 0.5;
3313
overlay { box-shadow: none; }
3315
}
3316
row:selected & {
3318
}
3319
&#editor-color-sample {
3321
border-radius: $corner-radius + 0.5px;
3322
overlay { border-radius: $corner-radius; }
3324
// overlay:hover { box-shadow: $shadow-1; }
3326
}
3327
}
3328
// colorscale popup
3330
colorchooser .popover.osd {
3331
transition: $transition-shadow;
3332
border-radius: $corner-radius;
3333
box-shadow: $shadow-2, inset 0 1px highlight($surface);
3334
background-color: $surface;
3335
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
3337
}
3338
/********
3341
* Misc *
3342
********/
3343
// content view (grid/list)
3344
.content-view {
3345
background-color: $background;
3346
// &:hover { -gtk-icon-effect: highlight; }
3348
rubberband, .rubberband { @extend rubberband; }
3350
}
3351
.scale-popup {
3353
// .osd & { @extend %osd; }
3354
.osd & button.flat { // FIXME: quick hack, redo properly
3356
}
3357
button { // +/- buttons on GtkVolumeButton popup
3359
}
3360
}
3361
/**********************
3364
* Window Decorations *
3365
**********************/
3366
decoration {
3367
transition: $transition-shadow;
3368
border-radius: $corner-radius $corner-radius 0 0;
3369
box-shadow: $shadow-4, 0 16px 16px transparent;
3370
// FIXME rationalize shadows
3372
// this is used for the resize cursor area
3374
margin: 8px;
3375
&:backdrop {
3377
// the transparent shadow here is to enforce that the shadow extents don't
3378
// change when we go to backdrop, to prevent jumping windows.
3379
// The biggest shadow should be in the same order then in the active state
3380
// or the jumping will happen during the transition.
3381
box-shadow: $shadow-2, 0 16px 16px transparent;
3382
}
3383
.maximized &,
3385
.fullscreen &,
3386
.tiled &,
3387
.tiled-top &,
3388
.tiled-right &,
3389
.tiled-bottom &,
3390
.tiled-left & { border-radius: 0; }
3391
.popup & { box-shadow: none; }
3393
// server-side decorations as used by mutter
3395
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3396
.csd.popup & {
3398
border-radius: $corner-radius;
3399
box-shadow: $shadow-2;
3400
}
3401
tooltip.csd & {
3403
border-radius: $corner-radius;
3404
box-shadow: none;
3405
}
3406
messagedialog.csd & {
3408
border-radius: $corner-radius;
3409
// box-shadow: $shadow-4, 0 16px 16px transparent;
3410
// &:backdrop { box-shadow: $shadow-2, 0 16px 16px transparent; }
3412
}
3413
.solid-csd & {
3415
margin: 0;
3416
// padding: 4px;
3417
border-radius: 0;
3418
box-shadow: none;
3419
// box-shadow: inset 0 0 0 4px $titlebar;
3420
background-color: $titlebar;
3421
}
3422
}
3423
// Window Close button
3425
button.titlebutton {
3426
// @extend %simple_flat_button;
3427
@extend %circular_button;
3429
.selection-mode & {
3431
}
3432
}
3433
// catch all extend :)
3436
%selected_items {
3438
background-color: $overlay-selected;
3439
}
3440
.monospace { font-family: monospace; }
3442
/**********************
3445
* Touch Copy & Paste *
3446
**********************/
3447
// touch selection handlebars for the Popover.osd above
3448
cursor-handle {
3449
color: $primary;
3450
-gtk-icon-source: -gtk-recolor(url("assets/scalable/cursor-handle-symbolic.svg"));
3451
&.top:dir(ltr), &.bottom:dir(rtl) {
3453
-gtk-icon-transform: rotate(90deg);
3454
}
3455
&.bottom:dir(ltr), &.top:dir(rtl) {
3457
-gtk-icon-transform: unset;
3458
}
3459
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3461
padding-top: 6px;
3462
-gtk-icon-transform: rotate(45deg);
3463
}
3464
}
3465
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3467
// shortcut window keys
3469
.keycap {
3470
min-width: 28px - 8px * 2;
3471
min-height: 28px - 2px;
3472
margin-top: 2px;
3473
padding-bottom: 2px;
3474
padding-left: 8px;
3475
padding-right: 8px;
3476
border: solid 1px $frame;
3478
border-radius: $corner-radius + 1px;
3479
box-shadow: inset 0 -2px $frame;
3480
background-color: $surface;
3481
color: $text;
3482
font-size: smaller;
3483
}
3484
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3486
caret-color: $primary;
3487
}
3488
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3490
stackswitcher button.circular,
3492
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3493
min-width: $medium-size;
3494
min-height: $medium-size;
3495
padding: 0;
3496
}
3497
/*************
3500
* App Icons *
3501
*************/
3502
// Outline for low res icons
3503
.lowres-icon {
3504
// -gtk-icon-shadow: none;
3505
}
3506
// Drapshadow for large icons
3508
.icon-dropshadow {
3509
// -gtk-icon-shadow: none;
3510
}
3511
/*********
3514
* Emoji *
3515
*********/
3516
popover.emoji-picker {
3517
padding: 0;
3518
entry {
3520
border-bottom: 1px solid $divider;
3521
border-image: none;
3522
border-radius: 0;
3523
box-shadow: none;
3524
background-color: transparent;
3525
}
3526
scrolledwindow { border-bottom: 1px solid $divider; }
3528
}
3529
// mimic tab style
3531
button.emoji-section {
3532
margin-top: -1px;
3533
padding: 0 8px;
3534
min-width: 24px;
3535
min-height: $medium-size;
3536
border-radius: 0;
3537
outline-offset: -6px;
3538
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3540
&:checked {
3542
box-shadow: inset 0 2px $primary;
3543
background-color: transparent;
3544
}
3545
&:hover, &:active { background-color: $overlay-hover; }
3547
&:first-child { margin-left: 4px; }
3549
&:last-child { margin-right: 4px; }
3551
}
3552
popover.emoji-picker .emoji {
3554
min-width: 3em;
3555
min-height: 3em;
3556
padding: 0 8px;
3557
// font-size: larger;
3558
widget {
3560
transition: $transition;
3561
border-radius: $corner-radius;
3562
&:hover { background-color: $overlay-hover; }
3564
}
3565
}
3566
popover.emoji-completion {
3568
padding: 8px 0;
3569
arrow {
3571
border: none;
3572
background: none;
3573
}
3574
.emoji-completion-row {
3576
min-height: $menuitem-size;
3577
padding: 0 12px;
3578
}
3579
.emoji:hover {
3581
background-color: $overlay-hover;
3582
}
3583
}
3584