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-alt;
114
background-color: rgba($primary-alt, 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
color: inherit;
137
}
138
}
139
label {
141
caret-color: currentColor; // this shouldn't be needed.
142
&.separator {
144
@extend .dim-label;
145
color: $text;
147
}
148
selection { @extend %selected_items; }
150
&:disabled {
152
color: $text-disabled;
153
// selection { @extend %selected_items:disabled; }
155
headerbar &,
157
tab &,
158
button & { color: inherit; }
159
}
160
}
161
.dim-label { opacity: 0.6; }
163
assistant {
165
.sidebar {
166
padding: 4px 0;
167
// background-color: $base;
168
// border-top: 1px solid $border;
169
}
170
// &.csd .sidebar { border-top-style: none; }
172
.sidebar label {
174
min-height: $medium-size;
175
padding: 0 12px;
176
color: $text-disabled;
177
font-weight: 500;
178
&.highlight { color: $text; }
180
}
181
}
182
// %osd, .osd { opacity: 0.9; }
184
/*********************
187
* Spinner Animation *
188
*********************/
189
@keyframes spin {
190
to { -gtk-icon-transform: rotate(1turn); }
191
}
192
spinner {
194
background: none;
195
opacity: 0; // non spinning spinner makes no sense
196
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
197
&:checked {
199
opacity: 1;
200
animation: spin 1s linear infinite;
201
&:disabled { opacity: 0.5; }
203
}
204
}
205
/****************
208
* Text Entries *
209
****************/
210
%entry,
211
entry {
212
%entry_basic, & {
213
min-height: $medium-size;
214
padding: 0 8px;
215
border-radius: $corner-radius $corner-radius 0 0;
216
caret-color: currentColor; // this shouldn't be needed.
217
@include entry(normal);
219
&:focus { @include entry(focus); }
221
&:disabled { @include entry(disabled); }
223
&.flat {
225
min-height: 0;
226
padding: 2px;
227
border-radius: 0;
228
background-color: transparent;
229
}
230
image { // icons inside the entry
232
// @extend %simple_flat_button;
233
// min-height: $small-size;
235
// min-width: $small-size;
236
// border-radius: $circular-radius;
237
// -gtk-outline-radius: $circular-radius;
238
color: $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(focus, $e_color); }
270
&:disabled { @include entry(disabled, $e_color); }
272
}
273
}
274
&:drop(active) {
276
// box-shadow: inset 0 0 0 2px $primary;
277
}
278
.osd & {
280
}
281
}
282
progress {
284
margin: 2px (2px - 8px);
285
border-bottom: 2px solid $primary;
286
background-color: transparent;
287
}
288
// linked entries
290
.linked:not(.vertical) > & { @extend %linked_entry; }
291
// Vertically linked entries
293
.linked.vertical > & { @extend %linked_vertical_entry; }
294
}
295
%entry_raised {
297
border-radius: $corner-radius;
298
@include entry(raised-normal);
300
&:focus { @include entry(raised-focus); }
302
&:disabled { @include entry(raised-disabled); }
304
// entry error and warning style
306
@each $e_type, $e_color in (error, $error),
307
(warning, $warning) {
308
&.#{$e_type} {
309
@include entry(raised-normal, $e_color);
310
&:focus { @include entry(raised-focus, $e_color); }
312
&:disabled { @include entry(raised-disabled, $e_color); }
314
image {
316
color: on($e_color, secondary);
317
&:hover, &:active { color: on($e_color); }
319
&:disabled { color: on($e_color, disabled); }
321
}
322
}
323
}
324
}
325
treeview entry {
327
&.flat, & {
328
background-color: $base;
329
&, &:focus {
331
border-image: none;
332
box-shadow: none;
333
}
334
}
335
}
336
.entry-tag {
338
margin: 2px;
339
border-radius: $circular-radius;
340
box-shadow: none;
341
background-color: $divider;
342
color: $text;
343
&:hover { background-image: image($divider); }
345
// side margins: compensate the entry padding with a negative margin
347
// then the negative margin itself
348
:dir(ltr) & {
349
margin-left: 4px;
350
margin-right: 0;
351
padding-left: 12px;
352
padding-right: 8px;
353
}
354
:dir(rtl) & {
356
margin-left: 0;
357
margin-right: 4px;
358
padding-left: 8px;
359
padding-right: 12px;
360
}
361
// seems any sizing doesn't work
363
&.button {
364
box-shadow: none;
365
background-color: transparent;
366
&:not(:hover):not(:active) { color: $text-secondary; }
368
}
369
}
370
/***********
373
* Buttons *
374
***********/
375
// stuff for .needs-attention
376
@keyframes needs_attention {
377
from {
378
background-image: -gtk-gradient(radial,
379
center center, 0,
380
center center, 0.001,
381
to($primary),
382
to(transparent));
383
}
384
to {
386
background-image: -gtk-gradient(radial,
387
center center, 0,
388
center center, 0.5,
389
to($primary),
390
to(transparent));
391
}
392
}
393
%button,
395
button {
396
@at-root %button_basic, & {
397
min-height: 24px;
398
min-width: 16px;
399
padding: ($medium-size - 24px) / 2 ($medium-size - 16px) / 2;
400
border-radius: $corner-radius;
401
font-weight: 500;
402
@include button(normal);
404
&:hover { @include button(hover); }
406
&:active { @include button(active); }
408
&:disabled { @include button(disabled); }
410
&:checked { @include button(checked); }
412
&:checked:disabled { @include button(checked-disabled); }
414
@at-root %flat_button, &.flat {
416
@at-root %simple_flat_button, & {
417
@include button(flat-normal);
418
&:hover { @include button(flat-hover); }
420
&:active { @include button(flat-active); }
422
&:disabled { @include button(flat-disabled); }
424
}
425
&:checked { @include button(flat-checked); }
427
&:checked:disabled { @include button(flat-checked-disabled); }
429
}
430
&.text-button {
432
padding-left: 16px;
433
padding-right: 16px;
434
}
435
&.image-button {
437
min-width: 24px;
438
padding: ($medium-size - 24px) / 2;
439
@extend %circular_button;
441
}
442
&.text-button.image-button {
444
border-radius: $corner-radius;
445
-gtk-outline-radius: $corner-radius;
446
label {
448
&:first-child { margin-left: 16px - ($medium-size - 24px) / 2; }
449
&:last-child { margin-right: 16px - ($medium-size - 24px) / 2; }
451
}
452
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
454
}
455
.linked > & { @extend %linked; }
457
.linked.vertical > & { @extend %linked_vertical; }
459
.linked > &.flat,
461
.linked.vertical > &.flat {
462
border-radius: $corner-radius;
463
&.image-button { @extend %circular_button; }
465
&.text-button.image-button {
467
border-radius: $corner-radius;
468
-gtk-outline-radius: $corner-radius;
469
}
470
}
471
&:drop(active) {
473
// box-shadow: inset 0 0 0 2px $primary;
474
}
475
}
476
@at-root %button_selected {
478
&.flat {
479
color: on(black, secondary);
480
&:hover, &:active { color: on(black); }
482
&:disabled { color: on(black, secondary-disabled); }
484
&:checked {
486
background-color: on(black, track);
487
color: on(black);
488
}
489
&:checked:disabled {
491
background-color: on(black, divider);
492
color: on(black, disabled);
493
}
494
}
495
}
496
// big standalone buttons like in Documents pager
498
&.osd {
499
padding: ($large-size - 24px) / 2 ($large-size - 16px) / 2;
500
&.image-button { padding: ($large-size - 24px) / 2; }
502
&:disabled { opacity: 0; }
504
}
505
// overlay / OSD style
507
@at-root %osd_button,
508
.osd & {
509
}
510
// Suggested and Destructive Action buttons
512
@each $b_type, $b_color in (suggested-action, $suggested),
513
(destructive-action, $destructive) {
514
&.#{$b_type} {
515
background-color: $b_color;
516
color: on($b_color);
517
&:disabled { @include button(disabled); }
519
&:checked { background-color: mix(on($b_color), $b_color, percentage(0.3)); }
521
&.flat {
523
background-color: transparent;
524
color: $b_color;
525
&:disabled { @include button(flat-disabled); }
527
&:checked { background-color: rgba($b_color, 0.3); }
529
}
530
.osd & {
532
}
533
}
534
}
535
.stack-switcher > & {
537
// to position the needs attention dot, padding is added to the button
538
// child, a label needs just lateral padding while an icon needs vertical
539
// padding added too.
540
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
542
> label {
544
padding-left: 6px; // label padding
545
padding-right: 6px; //
546
}
547
> image {
549
padding-left: 6px; // image padding
550
padding-right: 6px; //
551
padding-top: 3px; //
552
padding-bottom: 3px; //
553
}
554
&.text-button {
556
// compensate text-button paddings
557
padding-left: 16px - 6px;
558
padding-right: 16px - 6px;
559
}
560
&.image-button {
562
// we want image buttons to have a 1:1 aspect ratio, so compensation
563
// of the padding added to the GtkImage is needed
564
padding-left: ($medium-size - 16px) / 2 - 6px;
565
padding-right: ($medium-size - 16px) / 2 - 6px;
566
}
567
&.needs-attention {
569
> label,
570
> image { @extend %needs_attention; }
571
&:checked {
573
> label,
574
> image {
575
animation: none;
576
background-image: none;
577
}
578
}
579
}
580
}
581
// hide separators
583
&.font,
584
&.file { separator { @extend %hide_separators; }}
585
// &.font { > box > box > label { font-weight: bold; }}
587
// inline-toolbar buttons
589
.inline-toolbar & {
590
// @extend %button_basic.flat;
591
&:not(.text-button) { @extend %circular_button; }
593
}
594
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
596
@at-root %circular_button,
598
&.close,
599
&.circular { // The Bloody Circul Button
600
border-radius: $circular-radius;
601
-gtk-outline-radius: $circular-radius;
602
// label { padding: 0; }
604
}
605
@at-root %small_button {
607
min-height: $small-size;
608
min-width: $small-size;
609
padding: 0;
610
border-radius: $circular-radius;
611
-gtk-outline-radius: $circular-radius;
612
}
613
}
614
%needs_attention {
616
animation: needs_attention $duration-ripple $ease-out forwards;
617
background-repeat: no-repeat;
618
background-position: right 3px;
619
background-size: 6px 6px;
620
&:dir(rtl) { background-position: left 3px; }
622
}
623
// all the following is for the +|- buttons on inline toolbars, that way
625
// should really be deprecated...
626
.inline-toolbar toolbutton > button { // redefining the button look is
627
// needed since those are flat...
628
}
629
// More inline toolbar buttons
631
toolbar.inline-toolbar toolbutton {
632
// > button.flat { @extend %linked_middle; }
633
// &:first-child > button.flat { @extend %linked:first-child; }
635
// &:last-child > button.flat { @extend %linked:last-child; }
637
// &:only-child > button.flat { @extend %linked:only-child; }
639
}
640
%linked_middle {
642
border-radius: 0;
643
-gtk-outline-radius: $corner-radius;
644
}
645
%linked {
647
@extend %linked_middle;
648
&:first-child {
650
border-top-left-radius: $corner-radius;
651
border-bottom-left-radius: $corner-radius;
652
}
653
&:last-child {
655
border-top-right-radius: $corner-radius;
656
border-bottom-right-radius: $corner-radius;
657
}
658
&:only-child {
660
border-radius: $corner-radius;
661
}
662
}
663
%linked_vertical_middle {
665
border-radius: 0;
666
-gtk-outline-radius: $corner-radius;
667
}
668
%linked_vertical {
670
@extend %linked_vertical_middle;
671
&:first-child {
673
border-top-left-radius: $corner-radius;
674
border-top-right-radius: $corner-radius;
675
}
676
&:last-child {
678
border-bottom-left-radius: $corner-radius;
679
border-bottom-right-radius: $corner-radius;
680
}
681
&:only-child {
683
border-radius: $corner-radius;
684
}
685
}
686
%linked_entry {
688
@extend %linked_middle;
689
&:first-child {
691
border-radius: $corner-radius 0 0 0;
692
}
693
&:last-child {
695
border-radius: 0 $corner-radius 0 0;
696
}
697
&:only-child {
699
border-radius: $corner-radius $corner-radius 0 0;
700
}
701
}
702
%linked_vertical_entry {
704
@extend %linked_vertical_middle;
705
&:first-child {
707
border-radius: $corner-radius $corner-radius 0 0;
708
}
709
&:last-child {
711
border-radius: 0;
712
}
713
&:only-child {
715
border-radius: $corner-radius $corner-radius 0 0;
716
}
717
}
718
/* menu buttons */
720
modelbutton.flat,
721
.menuitem.button.flat {
722
min-height: $menuitem-size;
723
padding: 0 8px;
724
border-radius: $corner-radius;
725
color: inherit;
726
@extend %simple_flat_button;
728
&:selected { @extend %selected_items; }
730
}
731
modelbutton.flat arrow {
733
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
734
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
736
}
737
button.color {
739
min-height: $small-size;
740
min-width: $small-size;
741
padding: $container-padding;
742
colorswatch:only-child {
744
// &, overlay { border-radius: 0; }
745
}
746
}
747
/*********
750
* Links *
751
*********/
752
*:link {
753
color: $link;
754
&:visited { color: $link-visited; }
756
}
757
button:link,
759
button:visited {
760
&, &:hover, &:active { @extend *:link; }
761
> label { text-decoration-line: underline; }
763
}
764
/*****************
766
* GtkSpinButton *
767
*****************/
768
spinbutton {
769
&:not(.vertical) {
770
// in this horizontal configuration, the whole spinbutton
771
// behaves as the entry, so we extend the entry styling
772
// and nuke the style on the internal entry
773
@extend %entry;
774
padding: 0;
776
entry {
778
min-width: $large-size - 8px * 2;
779
// reset all the other props since the spinbutton node is styled here
780
margin: 0;
781
border-image: none;
782
border-radius: 0;
783
box-shadow: none;
784
background-color: transparent;
785
//
786
// This will help to simplify spinbutton's code, but unfortunatelly
787
// doesn't work properly in :dir(rtl). It needs z-index property.
788
//
789
// min-width: $large-size - 8px;
790
//
791
// $spinbuttons_width: $small-size * 2 + $container-padding * 3;
792
//
793
// &:dir(ltr) {
794
// margin-right: -$spinbuttons_width;
795
// padding-right: $spinbuttons_width;
796
// }
797
//
798
// &:dir(rtl) {
799
// margin-left: -$spinbuttons_width;
800
// padding-left: $spinbuttons_width;
801
// }
802
}
803
button {
805
// margin: $container-padding;
806
border: solid $container-padding transparent;
807
@extend %simple_flat_button;
809
@extend %small_button;
811
&.up:dir(ltr),
813
&.down:dir(rtl) { margin-left: -$container-padding / 2; }
814
&.up:dir(rtl),
816
&.down:dir(ltr) { margin-right: -$container-padding / 2; }
817
}
818
}
819
// OSD horizontal
821
.osd &:not(.vertical) {
822
button {
823
}
824
}
825
// Vertical
827
&.vertical {
828
// in the vertical configuration, we treat the spinbutton
829
// as a box, and tweak the style of the entry in the middle
830
// so that it's linked
831
// FIXME: this should not be set at all, but otherwise it gets the wrong
833
// color
834
&:disabled { color: $text-disabled; }
835
&:drop(active) {
837
box-shadow: none;
838
}
839
entry {
841
@extend %entry_raised;
842
min-height: $medium-size;
844
min-width: $large-size;
845
padding: 0;
846
}
847
button {
849
min-height: $medium-size;
850
min-width: $large-size;
851
padding: 0;
852
@extend %simple_flat_button;
854
&.up { border-radius: $corner-radius $corner-radius 0 0; }
856
&.down { border-radius: 0 0 $corner-radius $corner-radius; }
858
}
859
}
860
// OSD vertical
862
.osd &.vertical button:first-child {
863
}
864
// Misc
866
treeview &:not(.vertical) {
867
min-height: 0;
868
border-style: none;
869
border-radius: 0;
870
entry {
872
min-height: 0;
873
padding: 1px 2px;
874
}
875
}
876
}
877
/**************
880
* ComboBoxes *
881
**************/
882
combobox {
883
arrow {
884
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
885
min-height: 16px;
886
min-width: 16px;
887
}
888
decoration,
890
button.combo:checked { transition: none; } // workaround for menuitem selection
891
button.combo cellview {
893
&:dir(ltr) { margin-left: 8px - ($medium-size - 16px) / 2; }
894
&:dir(rtl) { margin-right: 8px - ($medium-size - 16px) / 2; }
895
}
896
#gtk-combobox-popup-menu {
898
padding: 2px 0;
899
menuitem {
901
min-height: $medium-size - 2px * 2;
902
padding: 0 8px;
903
}
904
// overflow arrows
906
> arrow {
907
&.top { margin-top: -2px; }
908
&.bottom {
910
margin-top: 2px * 2;
911
margin-bottom: -2px * 3;
912
}
913
}
914
}
915
&.linked {
917
button:nth-child(2) {
918
&:dir(ltr) { @extend %linked_entry:last-child; }
919
&:dir(rtl) { @extend %linked_entry:first-child; }
920
}
921
}
922
> .linked > button {
924
@extend %linked_middle;
925
&:first-child { @extend %linked_entry:first-child; }
927
&:last-child { @extend %linked_entry:last-child; }
929
&:only-child { @extend %linked_entry:only-child; }
931
}
932
&:drop(active) { // FIXME: untested
934
box-shadow: none;
935
// button.combo { @extend %button_basic:drop(active); }
937
}
938
}
939
// the combo is a composite widget so the way we do button linking doesn't
941
// work, special case needed. See
942
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
943
.linked:not(.vertical) > combobox {
945
> box > button.combo { @extend %linked_middle; }
946
&:first-child > box > button.combo { @extend %linked_entry:first-child; }
948
&:last-child > box > button.combo { @extend %linked_entry:last-child; }
950
&:only-child > box > button.combo { @extend %linked_entry:only-child; }
952
}
953
.linked.vertical > combobox {
955
> box > button.combo { @extend %linked_vertical_middle; }
956
&:first-child > box > button.combo { @extend %linked_vertical_entry:first-child; }
958
&:last-child > box > button.combo { @extend %linked_vertical_entry:last-child; }
960
&:only-child > box > button.combo { @extend %linked_vertical_entry:only-child; }
962
}
963
button.combo {
965
border-radius: $corner-radius $corner-radius 0 0;
966
background-image: none;
967
font-weight: inherit;
968
@include entry(normal);
970
&:hover { box-shadow: inset 0 -1px $text; }
972
&:checked { @include entry(focus); }
974
&:disabled { @include entry(disabled); }
976
}
977
/************
980
* Toolbars *
981
************/
982
toolbar {
983
-GtkWidget-window-dragging: true;
984
padding: 2px;
985
background-color: $background;
986
button { @extend %button_basic.flat; }
988
// on OSD
990
.osd & { background-color: transparent; }
991
// stand-alone OSD toolbars
993
&.osd {
994
transition: $transition-shadow;
995
padding: $container-padding;
996
border-radius: $corner-radius;
997
box-shadow: $shadow-2, inset 0 1px highlight($surface);
998
background-color: $surface;
999
&:backdrop { box-shadow: $shadow-1, inset 0 1px highlight($surface); }
1001
&.left,
1003
&.right,
1004
&.top,
1005
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
1006
}
1007
// toolbar separators
1009
&.horizontal > separator { margin: 2px; }
1010
&.vertical > separator { margin: 2px; }
1011
&:not(.inline-toolbar):not(.osd) {
1013
scale,
1014
entry,
1015
spinbutton,
1016
button { margin: 2px; }
1017
.linked entry,
1019
.linked spinbutton,
1020
.linked button {
1021
&:not(:first-child) { margin-left: 0; }
1022
&:not(:last-child) { margin-right: 0; }
1023
}
1024
spinbutton {
1026
entry,
1027
button { margin: 0; }
1028
}
1029
switch { margin: 2px + $container-padding 2px; }
1031
}
1032
}
1033
// searchbar, location-bar & inline-toolbar
1035
.inline-toolbar {
1036
padding: $container-padding;
1037
border-style: solid;
1038
border-width: 0 1px 1px;
1039
border-color: $border;
1040
background-color: $base-alt;
1041
}
1042
searchbar > revealer > box,
1044
.location-bar {
1045
padding: $container-padding;
1046
border-style: solid;
1047
border-width: 0 0 1px;
1048
border-color: $border;
1049
background-color: $background;
1050
background-clip: border-box;
1051
}
1052
searchbar > revealer > box {
1054
// workaround: undo the GtkContainer:border-width and use CSS padding instead
1055
margin: -6px;
1056
padding: $container-padding;
1057
}
1058
/***************
1061
* Header bars *
1062
***************/
1063
%titlebar,
1064
headerbar {
1065
transition: background-color $duration $ease-out, color $duration $ease-out;
1066
min-height: $large-size;
1067
padding: 0 $container-padding;
1068
box-shadow: $shadow-1, inset 0 1px highlight($titlebar);
1069
background-color: $titlebar;
1070
color: $titlebar-text;
1071
&:disabled { color: $titlebar-text-disabled; }
1073
&:backdrop {
1075
color: $titlebar-text-secondary;
1076
&:disabled { color: $titlebar-text-secondary-disabled; }
1078
}
1079
.title {
1081
padding: 0 12px;
1082
font-weight: bold;
1083
}
1084
.subtitle {
1086
padding: 0 12px;
1087
font-size: smaller;
1088
@extend .dim-label;
1090
}
1091
entry {
1093
box-shadow: inset 0 -1px $titlebar-track;
1094
background-color: $titlebar-fill;
1095
color: $titlebar-text;
1096
&:disabled {
1098
box-shadow: inset 0 -1px $titlebar-divider;
1099
background-color: $titlebar-fill;
1100
color: $titlebar-text-disabled;
1101
}
1102
image {
1104
color: $titlebar-text-secondary;
1105
&:hover, &:active { color: $titlebar-text; }
1107
&:disabled { color: $titlebar-text-disabled; }
1109
}
1110
}
1111
.linked:not(.vertical) > entry:not(.flat) { border-radius: $corner-radius $corner-radius 0 0; }
1113
button:not(.suggested-action):not(.destructive-action) {
1115
@extend %button_basic.flat;
1116
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1118
$titlebar-indicator 0%,
1119
transparent 0%)
1120
0 0 0 / 0 0 0px;
1121
color: $titlebar-text-secondary;
1122
&:hover, &:active { color: $titlebar-text; }
1124
&:disabled { color: $titlebar-text-secondary-disabled; }
1126
&:checked {
1128
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1129
$titlebar-indicator 100%,
1130
transparent 0%)
1131
0 0 2 / 0 0 2px;
1132
color: $titlebar-text;
1133
&:disabled { color: $titlebar-text-disabled; }
1135
&, &:disabled { background-color: transparent; }
1137
}
1138
&:backdrop {
1140
color: $titlebar-text-disabled;
1141
&:hover, &:active { color: $titlebar-text-secondary; }
1143
&:disabled { color: $titlebar-text-secondary-disabled; }
1145
&:checked {
1147
color: $titlebar-text-secondary;
1148
&:disabled { color: $titlebar-text-secondary-disabled; }
1150
}
1151
}
1152
}
1153
button.suggested-action, button.destructive-action {
1155
&:disabled {
1156
background-color: $titlebar-fill;
1157
color: $titlebar-text-disabled;
1158
}
1159
}
1160
&.selection-mode {
1162
// 0.00001s was a workaround for https://gitlab.gnome.org/GNOME/gtk/issues/698
1163
// but let's keep it for backwards compatibility.
1164
transition: background-color 0.00001s $duration-ripple, color $duration-ripple $ease-out;
1165
animation: header_ripple_effect $duration-ripple $ease-out;
1166
box-shadow: $shadow-1, inset 0 1px highlight($primary);
1167
background-color: $primary;
1168
color: on($primary);
1169
&:backdrop {
1171
color: on($primary, secondary);
1172
}
1173
.subtitle:link { color: on($primary); }
1175
button:not(.suggested-action):not(.destructive-action) {
1177
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1178
currentColor 0%,
1179
transparent 0%)
1180
0 0 0 / 0 0 0px;
1181
color: on($primary);
1182
&:disabled { color: on($primary, disabled); }
1184
&:checked {
1186
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1187
currentColor 100%,
1188
transparent 0%)
1189
0 0 2 / 0 0 2px;
1190
color: on($primary);
1191
&:disabled { color: on($primary, disabled); }
1193
}
1194
&:backdrop {
1196
color: on($primary, secondary);
1197
&:disabled { color: on($primary, secondary-disabled); }
1199
&:checked {
1201
color: on($primary, secondary);
1202
&:disabled { color: on($primary, secondary-disabled); }
1204
}
1205
}
1206
}
1207
.selection-menu {
1209
padding-left: 16px;
1210
padding-right: 16px;
1211
arrow { -GtkArrow-arrow-scaling: 1; }
1213
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1215
}
1216
}
1217
// squared corners when the window is maximized, tiled, or fullscreen
1219
.tiled &,
1220
.tiled-top &,
1221
.tiled-right &,
1222
.tiled-bottom &,
1223
.tiled-left &,
1224
.maximized &,
1225
.fullscreen & {
1226
border-radius: 0;
1227
box-shadow: $shadow-1;
1228
}
1229
&.default-decoration {
1231
min-height: $small-size;
1232
padding: $container-padding;
1233
box-shadow: inset 0 1px highlight($titlebar);
1234
.tiled &,
1236
.maximized &,
1237
.fullscreen & { box-shadow: none; }
1238
button.titlebutton {
1240
min-height: $small-size;
1241
min-width: $small-size;
1242
margin: 0;
1243
padding: 0;
1244
}
1245
// workaround for non-animatable buttons
1247
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1248
}
1249
.solid-csd & {
1251
&:dir(rtl), &:dir(ltr) { // specificity bump
1252
// margin-left: -2px;
1253
// margin-right: -2px;
1254
// margin-top: -2px;
1255
// border-radius: 0;
1256
box-shadow: $shadow-1; // Remove highlight as window managers should have it
1257
}
1258
}
1259
}
1260
headerbar {
1262
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1263
entry,
1264
spinbutton,
1265
button {
1266
margin-top: $container-padding;
1267
margin-bottom: $container-padding;
1268
}
1269
separator.titlebutton {
1271
margin-top: $large-size / 4;
1272
margin-bottom: $large-size / 4;
1273
background-color: $titlebar-divider;
1274
}
1275
switch {
1277
margin-top: ($large-size - 24px) / 2;
1278
margin-bottom: ($large-size - 24px) / 2;
1279
}
1280
// reset button margins of the spinbutton
1282
spinbutton button {
1283
margin-top: 0;
1284
margin-bottom: 0;
1285
}
1286
// FIXME: This is a hacky workaround.
1288
.entry-tag {
1289
margin-top: 5px;
1290
margin-bottom: 5px;
1291
}
1292
&.titlebar headerbar:not(.titlebar) {
1294
// Drop the background of non-titlebar nested headerbars. This is needed to
1295
// work around headerbar sliding animation issues without refactoring
1296
// Adwaita's support of titlebars and headerbars as it may break
1297
// applications.
1298
// See https://gitlab.gnome.org/GNOME/gtk/issues/1264 for more information.
1299
background-color: transparent;
1300
box-shadow: none;
1301
}
1302
}
1303
.background .titlebar {
1305
border-top-left-radius: $corner-radius;
1306
border-top-right-radius: $corner-radius;
1307
}
1308
.background.tiled .titlebar,
1310
.background.tiled-top .titlebar,
1311
.background.tiled-right .titlebar,
1312
.background.tiled-bottom .titlebar,
1313
.background.tiled-left .titlebar,
1314
.background.maximized .titlebar,
1315
.background.solid-csd .titlebar {
1316
border-top-left-radius: 0;
1317
border-top-right-radius: 0;
1318
}
1319
headerbar { // headerbar border rounding
1321
window separator:first-child + &, // tackles the paned container case
1322
window &:first-child { border-top-left-radius: $corner-radius; }
1323
window &:last-child { border-top-right-radius: $corner-radius; }
1325
window stack & { // tackles the stacked headerbars case
1327
&:first-child, &:last-child {
1328
border-top-left-radius: $corner-radius;
1329
border-top-right-radius: $corner-radius;
1330
}
1331
}
1332
window.tiled &,
1334
window.tiled-top &,
1335
window.tiled-right &,
1336
window.tiled-bottom &,
1337
window.tiled-left &,
1338
window.maximized &,
1339
window.fullscreen &,
1340
window.solid-csd & {
1341
&,
1342
&:first-child,
1343
&:last-child,
1344
&:only-child {
1345
border-top-left-radius: 0;
1346
border-top-right-radius: 0;
1347
}
1348
}
1349
}
1350
.titlebar:not(headerbar) {
1352
window.csd > & {
1353
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1354
padding: 0;
1355
background-color: transparent;
1356
background-image: none;
1357
border-style: none;
1358
box-shadow: none;
1359
}
1360
> separator {
1362
background-color: $titlebar;
1363
background-image: image($border);
1364
}
1365
@extend %titlebar;
1367
}
1368
// Development versions of apps to use a differently styled headerbar
1370
window.devel headerbar.titlebar:not(.selection-mode) {
1371
}
1372
/************
1375
* Pathbars *
1376
************/
1377
%pathbar_button,
1378
.path-bar button {
1379
padding-left: ($medium-size - 24px) / 2;
1380
padding-right: ($medium-size - 24px) / 2;
1381
label:not(:only-child) {
1383
&:first-child { margin-left: 4px; }
1384
&:last-child { margin-right: 4px; }
1386
}
1387
&.slider-button {
1389
padding-left: (24px - 16px) / 2;
1390
padding-right: (24px - 16px) / 2;
1391
}
1392
:not(headerbar) & {
1394
@extend %flat_button;
1395
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1397
$primary 0%,
1398
transparent 0%)
1399
0 0 0 / 0 0 0px;
1400
border-radius: $corner-radius;
1401
&:checked {
1403
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1404
$primary 100%,
1405
transparent 0%)
1406
0 0 2 / 0 0 2px;
1407
&, &:disabled { background-color: transparent; }
1409
}
1410
}
1411
}
1412
/**************
1415
* Tree Views *
1416
**************/
1417
treeview.view {
1418
@at-root * {
1419
-GtkTreeView-horizontal-separator: 4;
1420
-GtkTreeView-grid-line-width: 1;
1421
-GtkTreeView-grid-line-pattern: '';
1422
-GtkTreeView-tree-line-width: 1;
1423
-GtkTreeView-tree-line-pattern: '';
1424
-GtkTreeView-expander-size: 16;
1425
}
1426
border-left-color: $track; // this is actually the tree lines color,
1428
border-top-color: $border; // while this is the grid lines color, better then nothing
1429
// FIXME: Avoid transparency background-color being slightly darker
1431
&:selected {
1432
background-color: $base;
1433
background-image: image($overlay-selected);
1434
}
1435
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1437
&:hover, &:selected { border-radius: 0; }
1439
&.separator {
1441
min-height: 1px + 2px * 2;
1442
color: $border;
1443
}
1444
&:drop(active) {
1446
border-style: solid none;
1447
border-width: 1px;
1448
border-color: $primary;
1449
&.after { border-top-style: none; }
1451
&.before { border-bottom-style: none; }
1453
}
1454
&.expander {
1456
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1457
-gtk-icon-transform: rotate(-90deg);
1458
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1460
&:checked { -gtk-icon-transform: unset; }
1462
color: $text-secondary;
1464
&:hover, &:active { color: $text; }
1466
&:disabled { color: $text-secondary-disabled; }
1468
}
1469
&.progressbar { // progress bar in treeviews
1471
border-bottom: $bar-size solid $primary;
1472
box-shadow: none;
1473
background-color: transparent;
1474
background-image: none;
1475
&:selected:hover { box-shadow: none; }
1477
}
1478
&.trough { // progress bar trough in treeviews
1480
border-bottom: $bar-size solid $divider;
1481
box-shadow: none;
1482
background-color: transparent;
1483
background-image: none;
1484
&:selected:hover { box-shadow: none; }
1486
}
1487
header {
1489
button {
1490
@extend row.activatable;
1491
padding: 2px 6px;
1493
border-style: none solid solid none;
1494
border-width: 1px;
1495
border-color: $border;
1496
border-radius: 0;
1497
background-clip: border-box;
1498
&:not(:hover):not(:active) { color: $text-secondary; }
1500
&, &:hover, &:active { box-shadow: none; }
1502
&, &:disabled { background-color: $base; }
1504
&:last-child { border-right-style: none; }
1506
}
1507
}
1508
button.dnd,
1510
header.button.dnd { // for treeview-like derive widgets
1511
padding: 2px 6px;
1512
border-style: none solid solid;
1513
border-width: 1px;
1514
border-color: $border;
1515
border-radius: 0;
1516
box-shadow: none;
1517
background-color: $base;
1518
background-clip: border-box;
1519
color: $primary;
1520
}
1521
acceleditor > label { background-color: $primary; } // see tests/testaccel to test
1523
}
1524
/*********
1527
* Menus *
1528
*********/
1529
menubar,
1530
.menubar {
1531
-GtkWidget-window-dragging: true;
1532
padding: 0;
1533
// box-shadow: inset 0 -1px $border;
1534
background-color: $titlebar;
1535
> menuitem {
1537
transition: $transition;
1538
min-height: 20px;
1539
padding: 4px 8px;
1540
color: $titlebar-text-secondary;
1541
&:hover { // Seems like it :hover even with keyboard focus
1543
transition: none;
1544
background-color: $titlebar-divider;
1545
color: $titlebar-text;
1546
}
1547
&:disabled { color: $titlebar-text-secondary-disabled; }
1549
label:disabled { color: inherit; } // to inherit the above color
1551
}
1552
}
1553
// Needed to make the border-radius of menus work
1555
// otherwise the background bleeds out of the menu edges
1556
.background.popup { background-color: transparent; }
1557
menu,
1559
.menu,
1560
.context-menu {
1561
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1562
padding: 4px 0;
1563
box-shadow: inset 0 1px highlight($surface);
1564
background-color: $surface;
1565
border: 1px solid $border; // adds borders in a non composited env
1566
.csd & {
1568
border: none; // axes borders in a composited env
1569
border-radius: $corner-radius;
1570
}
1571
menuitem {
1573
transition: background-color $duration $ease-out;
1574
min-height: 20px;
1575
min-width: 40px;
1576
padding: 4px 8px;
1577
font: initial;
1578
text-shadow: none;
1579
&:hover {
1581
transition: none;
1582
background-color: $divider;
1583
}
1584
&:disabled { color: $text-disabled; }
1586
// submenu indicators
1588
arrow {
1589
min-height: 16px;
1590
min-width: 16px;
1591
&:dir(ltr) {
1593
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1594
margin-left: 8px;
1595
}
1596
&:dir(rtl) {
1598
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1599
margin-right: 8px;
1600
}
1601
}
1602
// avoids labels color being overridden, see
1604
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1605
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1606
}
1607
// overflow arrows
1609
> arrow {
1610
min-height: 16px;
1611
min-width: 16px;
1612
padding: 4px;
1613
background-color: $surface;
1614
color: $text-secondary;
1615
&.top {
1617
margin-top: -4px;
1618
border-bottom: 1px solid $border;
1619
border-radius: $corner-radius $corner-radius 0 0;
1620
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1621
}
1622
&.bottom {
1624
margin-top: 4px * 2;
1625
margin-bottom: -4px * 3;
1626
border-top: 1px solid $border;
1627
border-radius: 0 0 $corner-radius $corner-radius;
1628
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1629
}
1630
&:hover {
1632
background-image: image($divider);
1633
color: $text;
1634
}
1635
&:disabled {
1637
border-color: transparent;
1638
background-color: transparent;
1639
color: transparent;
1640
// color: $text-secondary-disabled;
1641
}
1642
}
1643
separator { margin: 4px 0; }
1645
}
1646
menuitem {
1648
accelerator { color: $text-secondary; }
1649
&:disabled accelerator { color: $text-secondary-disabled; }
1651
}
1652
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1654
// Electron/Atom render all translucent colors in opaque colors.
1655
// It's a very critical issue for this theme and should be fixed by upstream...
1656
.popup:not(.csd) menu {
1657
menuitem {
1658
color: $solid-text;
1659
&:hover { background-color: $solid-divider; }
1661
&:disabled { color: $solid-text-disabled; } // separator/border also use this color.
1663
}
1664
// FIXME: not working this
1666
accelerator { color: $solid-text-secondary; }
1667
}
1668
/************
1671
* Popovers *
1672
************/
1673
popover.background {
1674
transition: $transition-shadow;
1675
padding: 2px;
1676
box-shadow: $shadow-2; // TODO: this should really have a highlight
1677
background-color: $surface;
1678
&:backdrop { box-shadow: $shadow-1; }
1680
&, .csd & {
1682
border-style: solid;
1683
border-width: 1px;
1684
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1685
border-radius: $corner-radius + 1px;
1686
}
1687
> stack { margin: -4px; } // remove extra padding from menu style popovers
1689
> toolbar { margin: -2px; }
1691
> list,
1693
> .view,
1694
> toolbar {
1695
border-style: none;
1696
box-shadow: none;
1697
background-color: transparent;
1698
}
1699
// FIXME: Use the popover color instead of transparent as a workaround for .view
1701
list,
1702
.view:not(:selected),
1703
toolbar { background-color: $surface; }
1704
// &.touch-selection,
1706
// &.magnifier,
1707
// &.osd { @extend %osd; }
1708
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1710
&.menu button,
1712
button.model {
1713
@extend %simple_flat_button;
1714
min-height: 32px;
1716
padding: 0 8px;
1717
border-radius: $corner-radius;
1718
&:checked { @extend %selected_items; }
1720
}
1721
separator { margin: 4px 0; }
1723
list separator { margin: 0; }
1725
}
1726
/*************
1728
* Notebooks *
1729
*************/
1730
notebook {
1731
frame > paned > & > header,
1732
&.frame > header { background-color: $base-alt; }
1733
&:focus tab:checked {
1735
box-shadow: inset 0 0 0 9999px rgba($primary, 0.12);
1736
outline: none;
1737
}
1738
> header {
1740
border-width: 1px;
1741
border-color: $border;
1742
background-color: $background;
1743
background-clip: border-box;
1744
&.top {
1746
border-bottom-style: solid;
1747
> tabs {
1749
margin-bottom: -1px;
1750
> tab {
1752
border-image: linear-gradient(to top, transparent 2px, transparent 2px) 2 / 0 0 2px;
1753
&:checked { border-image-source: linear-gradient(to top, $primary 2px, $border 2px); }
1755
&.reorderable-page { border-image-width: 0 1px 2px; }
1757
}
1758
}
1759
}
1760
&.bottom {
1762
border-top-style: solid;
1763
> tabs {
1765
margin-top: -1px;
1766
> tab {
1768
border-image: linear-gradient(to bottom, transparent 2px, transparent 2px) 2 / 2px 0 0;
1769
&:checked { border-image-source: linear-gradient(to bottom, $primary 2px, $border 2px); }
1771
&.reorderable-page { border-image-width: 2px 1px 0; }
1773
}
1774
}
1775
}
1776
&.left {
1778
border-right-style: solid;
1779
> tabs {
1781
margin-right: -1px;
1782
> tab {
1784
border-image: linear-gradient(to left, transparent 2px, transparent 2px) 2 / 0 2px 0 0;
1785
&:checked { border-image-source: linear-gradient(to left, $primary 2px, $border 2px); }
1787
&.reorderable-page { border-image-width: 1px 2px 1px 0; }
1789
}
1790
}
1791
}
1792
&.right {
1794
border-left-style: solid;
1795
> tabs {
1797
margin-left: -1px;
1798
> tab {
1800
border-image: linear-gradient(to right, transparent 2px, transparent 2px) 2 / 0 0 0 2px;
1801
&:checked { border-image-source: linear-gradient(to right, $primary 2px, $border 2px); }
1803
&.reorderable-page { border-image-width: 1px 0 1px 2px; }
1805
}
1806
}
1807
}
1808
&.top > tabs > arrow {
1810
@extend %notebook_vert_arrows;
1811
border-top-style: none;
1813
}
1814
&.bottom > tabs > arrow {
1816
@extend %notebook_vert_arrows;
1817
border-bottom-style: none;
1819
}
1820
@at-root %notebook_vert_arrows {
1822
padding-left: 4px;
1823
padding-right: 4px;
1824
&.down {
1826
margin-left: -8px;
1827
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1828
}
1829
&.up {
1831
margin-right: -8px;
1832
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1833
}
1834
}
1835
&.left > tabs > arrow {
1837
@extend %notebook_horz_arrows;
1838
border-left-style: none;
1840
}
1841
&.right > tabs > arrow {
1843
@extend %notebook_horz_arrows;
1844
border-right-style: none;
1846
}
1847
@at-root %notebook_horz_arrows {
1849
padding-top: 4px;
1850
padding-bottom: 4px;
1851
&.down {
1853
margin-top: -8px;
1854
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1855
}
1856
&.up {
1858
margin-bottom: -8px;
1859
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1860
}
1861
}
1862
> tabs > arrow {
1864
@extend %simple_flat_button;
1865
min-height: 16px;
1867
min-width: 16px;
1868
border-radius: 0;
1869
}
1870
tab {
1872
transition: $transition,
1873
background-size 0,
1874
background-image 0;
1875
min-height: $small-size;
1876
min-width: $small-size;
1877
padding: $container-padding 12px;
1878
outline-offset: -6px;
1880
border-width: 1px; // for reorderable tabs
1882
border-color: transparent; //
1883
background-image: radial-gradient(circle farthest-corner at center,
1885
$primary 10%,
1886
transparent 0%);
1887
background-repeat: no-repeat;
1888
background-position: center;
1889
background-size: 0% 0%;
1890
background-clip: border-box;
1891
color: $text-secondary;
1893
font-weight: 500;
1894
&:hover {
1896
background-color: $overlay-hover;
1897
color: $text;
1898
}
1899
&:disabled { color: $text-secondary-disabled; }
1901
&:checked {
1903
transition: $transition,
1904
background-size $duration-ripple $ease-out,
1905
background-image $duration-ripple + $duration-ripple-aftermath $ease-out;
1906
background-color: transparent;
1907
background-image: radial-gradient(circle farthest-corner at center,
1908
transparent 10%,
1909
transparent 0%);
1910
background-size: 1000% 1000%;
1911
background-clip: padding-box;
1912
color: $text;
1913
&:disabled { color: $text-disabled; }
1915
&.reorderable-page {
1917
border-color: $border;
1918
background-color: $base;
1919
}
1920
}
1921
// colors the button like the label, overridden otherwise
1923
button.flat {
1924
@extend %small_button;
1925
&:last-child {
1927
margin-left: $container-padding;
1928
margin-right: $container-padding - 12px;
1929
}
1930
&:first-child {
1932
margin-left: $container-padding - 12px;
1933
margin-right: $container-padding;
1934
}
1935
}
1936
}
1937
&.top,
1939
&.bottom {
1940
tabs {
1941
padding-left: 8px;
1942
padding-right: 8px;
1943
&:not(:only-child) {
1945
&:first-child { margin-left: 0; }
1946
&:last-child { margin-right: 0; }
1948
}
1949
tab.reorderable-page { border-style: none solid; }
1951
}
1952
}
1953
&.left,
1955
&.right {
1956
tabs {
1957
padding-top: 8px;
1958
padding-bottom: 8px;
1959
&:not(:only-child) {
1961
&:first-child { margin-top: 0; }
1962
&:last-child { margin-bottom: 0; }
1964
}
1965
tab.reorderable-page { border-style: solid none; }
1967
}
1968
}
1969
}
1970
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1972
background-color: $base;
1973
}
1974
}
1975
/**************
1978
* Scrollbars *
1979
**************/
1980
scrollbar {
1981
$_slider_min_length: 24px;
1982
// disable steppers
1984
@at-root * {
1985
-GtkScrollbar-has-backward-stepper: false;
1986
-GtkScrollbar-has-forward-stepper: false;
1987
}
1988
transition: $transition;
1990
background-color: $base;
1991
background-clip: $background-clip-extra;
1992
// scrollbar border
1994
&.top { border-bottom: 1px solid $border; }
1995
&.bottom { border-top: 1px solid $border; }
1996
&.left { border-right: 1px solid $border; }
1997
&.right { border-left: 1px solid $border; }
1998
// slider
2000
slider {
2001
transition: $transition, margin 0, border-width 0;
2002
min-width: 8px;
2003
min-height: 8px;
2004
border: 4px solid transparent;
2005
border-radius: $circular-radius;
2006
background-clip: padding-box;
2007
background-color: $text-disabled;
2008
&:hover { background-color: $text-secondary; }
2010
&:active { background-color: $text; }
2012
&:disabled { background-color: $text-secondary-disabled; }
2014
}
2015
&.fine-tune {
2017
slider {
2018
transition: $transition, margin 0, border-width 0, min-width 0, min-height 0;
2019
min-width: 4px;
2020
min-height: 4px;
2021
}
2022
&.horizontal slider { margin: 2px 0; }
2024
&.vertical slider { margin: 0 2px; }
2026
}
2027
&.overlay-indicator {
2029
&:not(.dragging):not(.hovering) {
2030
border-color: transparent;
2031
background-color: transparent;
2032
slider {
2034
min-width: 4px;
2035
min-height: 4px;
2036
margin: 4px - 1px;
2037
border: 1px solid rgba($base, 0.3);
2038
}
2039
button {
2041
min-width: 4px;
2042
min-height: 4px;
2043
margin: 4px - 1px;
2044
border: 1px solid rgba($base, 0.3);
2045
border-radius: $circular-radius;
2046
background-color: $text-disabled;
2047
background-clip: padding-box;
2048
-gtk-icon-source: none;
2049
&:disabled { background-color: $text-secondary-disabled; }
2051
}
2052
&.horizontal {
2054
slider { min-width: $_slider_min_length; }
2055
button { min-width: 8px; }
2057
}
2058
&.vertical {
2060
slider { min-height: $_slider_min_length; }
2061
button { min-height: 8px; }
2063
}
2064
}
2065
&.dragging,
2067
&.hovering { background-color: rgba($base, 0.9); }
2068
}
2069
&.horizontal slider { min-width: $_slider_min_length; }
2071
&.vertical slider { min-height: $_slider_min_length; }
2073
// button styling
2075
button {
2076
@extend %simple_flat_button;
2077
min-width: 16px;
2079
min-height: 16px;
2080
padding: 0;
2081
border-radius: 0;
2082
}
2083
// button icons
2085
&.vertical {
2086
button {
2087
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2088
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2090
}
2091
}
2092
&.horizontal {
2094
button {
2095
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2096
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2098
}
2099
}
2100
}
2101
/**********
2104
* Switch *
2105
**********/
2106
switch {
2107
transition: all $duration $ease-out;
2108
margin: $container-padding 0;
2109
padding: 0 2px;
2110
border: 5px solid transparent;
2111
border-radius: $circular-radius;
2112
background-color: $track;
2113
background-clip: padding-box;
2114
font-size: 0;
2115
&:checked { background-color: rgba($primary, 0.5); }
2117
&:disabled { opacity: 0.5; }
2119
// hide on/off icons for >=3.24.4
2121
image {
2122
margin: -8px;
2123
-gtk-icon-transform: scale(0);
2124
}
2125
slider {
2127
transition: all $duration $ease-out;
2128
min-width: 20px;
2129
min-height: 20px;
2130
margin: -3px -2px;
2131
border-radius: $circular-radius;
2132
box-shadow: 0 0 0 10px transparent, $shadow-1;
2133
background-color: $surface;
2134
}
2135
&:hover slider { box-shadow: 0 0 0 10px $overlay-hover, $shadow-1; }
2137
&:focus slider { box-shadow: 0 0 0 10px $overlay-focus, $shadow-1; }
2139
&:focus:hover slider { box-shadow: 0 0 0 10px $overlay-focus-hover, $shadow-1; }
2141
&:checked slider {
2143
background-color: $primary;
2144
color: $primary;
2145
}
2146
row:selected & {
2148
}
2149
}
2150
/*************************
2153
* Check and Radio items *
2154
*************************/
2155
// draw regular check and radio items using our PNG assets
2156
// all assets are rendered from assets.svg. never add pngs directly
2157
// selection-mode
2159
.view.content-view.check:not(list),
2160
.content-view .tile check:not(list) {
2161
min-height: 40px;
2162
min-width: 40px;
2163
margin: 0;
2164
padding: 0;
2165
box-shadow: none;
2166
background-color: transparent;
2167
background-image: none;
2168
-gtk-icon-shadow: $shadow-1;
2169
&:hover, &:active { -gtk-icon-shadow: $shadow-2; }
2171
@each $s, $as in ('', '-unchecked'),
2173
(':checked', '-checked') {
2174
&#{$s} {
2175
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}.png"),
2176
url("assets/selectionmode-checkbox#{$as}#{$asset-suffix}@2.png"));
2177
}
2178
}
2179
}
2180
checkbutton,
2182
radiobutton {
2183
outline: none;
2184
}
2185
checkbutton.text-button,
2187
radiobutton.text-button {
2188
// this is for a nice focus on check and radios text
2189
padding: 2px;
2190
label:not(:only-child) { margin: 0 4px; }
2192
}
2193
$check_radio_size: 40px;
2195
check,
2197
radio {
2198
min-height: 24px;
2199
min-width: 24px;
2200
margin: -($check_radio_size - 24px) / 2;
2201
padding: ($check_radio_size - 24px) / 2;
2202
@extend %simple_flat_button;
2204
@extend %circular_button;
2206
&:hover { box-shadow: inset 0 0 0 9999px $overlay-hover; }
2208
&:focus { box-shadow: inset 0 0 0 9999px $overlay-focus; }
2210
&:focus:hover { box-shadow: inset 0 0 0 9999px $overlay-focus-hover; }
2212
&:checked, &:indeterminate {
2214
color: $primary;
2215
&:disabled { color: $text-secondary-disabled; }
2217
}
2218
// &:only-child { margin: -12px; }
2220
popover modelbutton.flat & {
2222
&, &:hover, &:focus, &:focus:hover, &:active, &:disabled {
2223
transition: none; // FIXME: this is a workaround for a popover check/radio long transition issue
2224
box-shadow: none;
2225
background-image: none;
2226
}
2227
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2229
&.left:dir(rtl) {
2231
margin-left: -12px;
2232
margin-right: -4px;
2233
}
2234
&.right:dir(ltr) {
2236
margin-left: -4px;
2237
margin-right: -12px;
2238
}
2239
}
2240
menu menuitem & {
2242
transition: none;
2243
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2244
padding: 0;
2245
&:dir(ltr) { margin-right: 8px; }
2247
&:dir(rtl) { margin-left: 8px; }
2249
&:not(:checked):not(:indeterminate):not(:disabled) { color: $text-secondary; }
2251
&, &:hover, &:disabled {
2253
box-shadow: none;
2254
// color: inherit;
2255
}
2256
}
2257
}
2258
%check,
2260
check {
2261
-gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg"));
2262
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")); }
2264
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")); }
2266
}
2267
%radio,
2269
radio {
2270
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg"));
2271
// &:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")); }
2273
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")); }
2275
border-image-slice: $check_radio_size / 2px;
2277
border-image-width: $check_radio_size / 2;
2278
$radio_indicator: 10px / $check_radio_size / 2;
2280
& {
2282
border-image-source: -gtk-gradient(radial,
2283
center center, 0,
2284
center center, 0.001,
2285
to($primary),
2286
to(transparent));
2287
}
2288
&:checked:not(:indeterminate) {
2290
border-image-source: -gtk-gradient(radial,
2291
center center, 0,
2292
center center, $radio_indicator,
2293
to($primary),
2294
to(transparent));
2295
}
2296
&:checked:not(:indeterminate):disabled {
2298
border-image-source: -gtk-gradient(radial,
2299
center center, 0,
2300
center center, $radio_indicator,
2301
to($text-secondary-disabled),
2302
to(transparent));
2303
}
2304
}
2305
%small_check,
2307
menu menuitem check {
2308
& {
2309
min-height: 16px;
2310
min-width: 16px;
2311
border-radius: $corner-radius;
2312
-gtk-outline-radius: $corner-radius;
2313
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg"));
2314
}
2315
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")); }
2317
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")); }
2319
}
2320
%small_radio,
2322
menu menuitem radio {
2323
& {
2324
min-height: 16px;
2325
min-width: 16px;
2326
border-image: none;
2327
-gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg"));
2328
}
2329
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")); }
2331
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")); }
2333
}
2334
// ANIMATION:
2336
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2337
// the transformation is set on the active state and it get reset on the checked state.
2338
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2339
treeview.view check,
2341
treeview.view radio {
2342
padding: 0;
2343
&:hover, &:selected {
2345
box-shadow: none;
2346
background-color: transparent;
2347
}
2348
& {
2350
color: $text-secondary;
2351
&:hover, &:active { color: $text; }
2353
&:disabled { color: $text-secondary-disabled; }
2355
&:checked, &:indeterminate { color: $primary; }
2357
&:checked:disabled, &:indeterminate:disabled { color: $text-secondary-disabled; }
2359
}
2360
}
2361
treeview.view radio:checked {
2363
-gtk-icon-source: -gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg"));
2364
border-image: none;
2365
}
2366
/************
2369
* GtkScale *
2370
************/
2371
scale {
2372
// sizing
2373
$_marks_length: 8px;
2374
$_marks_distance: 7px;
2375
$trough_size: 2px;
2377
$finetune_trough_size: 4px;
2378
$slider_size: 32px;
2380
$slider_margin: -($slider_size - $trough_size) / 2;
2382
$finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2;
2383
$color_slider_margin: -($slider_size) * 3 / 4;
2385
$color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin;
2386
min-height: $trough_size;
2388
min-width: $trough_size;
2389
&.horizontal { padding: ($medium-size - $trough_size) / 2 12px; }
2391
&.vertical { padding: 12px ($medium-size - $trough_size) / 2; }
2393
// the slider is inside the trough, so to have make it bigger there's a negative margin
2395
slider {
2396
min-height: $slider_size;
2397
min-width: $slider_size;
2398
margin: $slider_margin;
2399
}
2400
// click-and-hold the slider to activate
2402
&.fine-tune {
2403
&.horizontal {
2404
min-height: $finetune_trough_size;
2405
padding-top: ($medium-size - $finetune_trough_size) / 2;
2406
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
2407
}
2408
&.vertical {
2410
min-width: $finetune_trough_size;
2411
padding-left: ($medium-size - $finetune_trough_size) / 2;
2412
padding-right: ($medium-size - $finetune_trough_size) / 2;
2413
}
2414
// to make the trough grow in fine-tune mode
2416
slider { margin: $finetune_slider_margin; }
2417
}
2418
// the backing bit
2420
trough {
2421
transition: background-color $duration $ease-out;
2422
outline: none;
2423
background-color: $track;
2424
&:disabled { background-color: $divider; }
2426
}
2427
// the colored part of the backing bit
2429
highlight {
2430
transition: background-color $duration $ease-out;
2431
background-color: $primary;
2432
&:disabled { background-color: transparent; }
2434
}
2435
// this is another differently styled part of the backing bit, the most relevant use case is for example
2437
// in media player to indicate how much video stream as been cached
2438
fill {
2439
transition: background-color $duration $ease-out;
2440
background-color: $track;
2441
&:disabled { background-color: transparent; }
2443
}
2444
slider {
2446
transition: background-color $duration $ease-out,
2447
background-size $duration-ripple-aftermath $ease-out,
2448
background-image $duration-ripple-aftermath-opacity $ease-out;
2449
background-repeat: no-repeat;
2450
background-position: center;
2451
background-size: auto, 1000% 1000%;
2452
border-radius: 50%;
2453
color: transparent;
2454
@each $s, $as in ('', ''),
2456
(':disabled', '-disabled') {
2457
&#{$s} {
2458
$_url: 'assets/scale-slider#{$as}#{$asset-suffix}';
2459
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png')),
2461
radial-gradient(circle farthest-corner at center,
2462
currentColor 10%,
2463
transparent 0%);
2464
}
2465
}
2466
&:hover { background-color: rgba($primary, 0.08); }
2468
&:focus { background-color: rgba($primary, 0.12); }
2470
&:focus:hover { background-color: rgba($primary, 0.16); }
2472
&:active {
2474
transition: background-color $duration $ease-out,
2475
background-size 0,
2476
background-image 0;
2477
animation: scale_ripple_effect $duration-ripple $ease-out forwards;
2478
background-size: auto, 0% 0%;
2479
background-color: rgba($primary, 0.08);
2480
color: rgba($primary, 0.12);
2481
}
2482
}
2483
marks label,
2485
value { color: $text-secondary; }
2486
marks {
2488
color: $track;
2489
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2491
(bottom, bottom, top),
2492
(left, left, right),
2493
(right, right, left) {
2494
&.#{$marks_class} {
2495
margin-#{$marks_margin}: $_marks_distance;
2496
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2497
}
2498
}
2499
}
2500
&.fine-tune marks {
2502
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2503
(bottom, bottom, top),
2504
(left, left, right),
2505
(right, right, left) {
2506
&.#{$marks_class} {
2507
margin-#{$marks_margin}: $_marks_distance - 1px;
2508
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 1px);
2509
}
2510
}
2511
}
2512
&.horizontal {
2514
indicator {
2515
min-height: $_marks_length;
2516
min-width: 1px;
2517
}
2518
}
2519
&.vertical {
2521
indicator {
2522
min-height: 1px;
2523
min-width: $_marks_length;
2524
}
2525
}
2526
// *WARNING* scale with marks madness following
2528
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2530
('vertical', 'vert') {
2531
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2532
('marks-after', 'marks-after:not(.marks-before)') {
2533
&.#{$dir_class}.#{$marks_class} {
2534
slider {
2535
@each $state, $state_infix in ('', ''),
2536
(':disabled', '-disabled') {
2537
&#{$state} {
2538
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset-suffix}';
2539
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')),
2541
radial-gradient(circle farthest-corner at center,
2542
currentColor 10%,
2543
transparent 0%);
2544
}
2545
}
2546
}
2547
}
2548
}
2549
}
2550
&.color {
2552
min-height: 0;
2553
min-width: 0;
2554
&.horizontal {
2556
padding: 0 0 12px 0;
2557
slider {
2559
&:dir(ltr), &:dir(rtl) { // specificity bump
2560
margin-bottom: $color_slider_margin;
2561
margin-top: $color_marks_slider_margin;
2562
}
2563
}
2564
}
2565
&.vertical {
2567
&:dir(ltr) {
2568
padding: 0 0 0 12px;
2569
slider {
2571
margin-left: $color_slider_margin;
2572
margin-right: $color_marks_slider_margin;
2573
}
2574
}
2575
&:dir(rtl) {
2577
padding: 0 12px 0 0;
2578
slider {
2580
margin-right: $color_slider_margin;
2581
margin-left: $color_marks_slider_margin;
2582
}
2583
}
2584
}
2585
}
2586
}
2587
/*****************
2590
* Progress bars *
2591
*****************/
2592
progressbar {
2593
// sizing
2594
&.horizontal {
2595
trough,
2596
progress { min-height: $bar-size; }
2597
}
2598
&.vertical {
2600
trough,
2601
progress { min-width: $bar-size; }
2602
}
2603
// FIXME: insensitive state missing and some other state should be set probably
2605
color: $text-secondary;
2606
font-size: smaller;
2607
trough { background-color: $divider; }
2609
progress { background-color: $primary; }
2611
&.osd { // progressbar.osd used for epiphany page loading progress
2613
// min-width: $bar-size;
2614
// min-height: $bar-size;
2615
// background-color: transparent;
2616
// trough { background-color: transparent; }
2618
// progress { background-color: $primary; }
2620
}
2621
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2623
}
2624
/*************
2627
* Level Bar *
2628
*************/
2629
levelbar {
2630
&.horizontal {
2631
block { min-height: $bar-size; }
2632
&.discrete block {
2634
min-width: $medium-size;
2635
&:not(:last-child) { margin-right: 2px; }
2637
}
2638
}
2639
&.vertical {
2641
block { min-width: $bar-size; }
2642
&.discrete block {
2644
min-height: $medium-size;
2645
&:not(:last-child) { margin-bottom: 2px; }
2647
}
2648
}
2649
// imitate the entry style
2651
trough {
2652
// padding: 2px;
2653
// border-radius: $corner-radius;
2654
// box-shadow: $shadow-1;
2655
// background-color: $base;
2656
// &:disabled { background-color: $base-alt; }
2658
}
2659
block {
2661
&.low { background-color: $warning; }
2662
&.high,
2664
&:not(.empty) { background-color: $primary; }
2665
&.full { background-color: $success; }
2667
&.empty { background-color: $divider; }
2669
}
2670
}
2671
/****************
2674
* Print dialog *
2675
*****************/
2676
printdialog {
2677
paper {
2678
padding: 0;
2679
border: 1px solid $border;
2680
background-color: $base;
2681
color: $text;
2682
}
2683
.dialog-action-box { margin: 12px; }
2685
}
2686
/**********
2689
* Frames *
2690
**********/
2691
frame > border,
2692
.frame {
2693
margin: 0;
2694
padding: 0;
2695
border: 1px solid $border;
2696
border-radius: 0;
2697
box-shadow: none;
2698
&.flat { border-style: none; }
2700
}
2701
frame.flat > border { @extend .frame.flat; } // for backward compatibility
2703
actionbar > revealer > box {
2705
padding: $container-padding;
2706
border-top: 1px solid $border;
2707
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2709
}
2710
scrolledwindow {
2712
viewport.frame { // avoid double borders when viewport inside scrolled window
2713
border-style: none;
2714
}
2715
// This is used when content is touch-dragged past boundaries.
2717
// draws a box on top of the content, the size changes programmatically.
2718
@at-root overshoot {
2719
&.top { @include overshoot(top); }
2720
&.bottom { @include overshoot(bottom); }
2722
&.left { @include overshoot(left); }
2724
&.right { @include overshoot(right); }
2726
}
2727
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2729
@at-root undershoot {
2730
&.top { @include undershoot(top); }
2731
&.bottom { @include undershoot(bottom); }
2733
&.left { @include undershoot(left); }
2735
&.right { @include undershoot(right); }
2737
}
2738
@at-root junction { // the small square between two scrollbars
2740
border-style: solid none none solid;
2741
border-width: 1px;
2742
border-color: $border;
2743
background-color: $base;
2744
&:dir(rtl) { border-style: solid solid none none; }
2746
}
2747
}
2748
// vbox and hbox separators
2750
separator {
2751
min-width: 1px;
2752
min-height: 1px;
2753
background-color: $border;
2754
}
2755
%hide_separators {
2757
min-width: 0;
2758
min-height: 0;
2759
background-color: transparent;
2760
}
2761
/*********
2764
* Lists *
2765
*********/
2766
list {
2767
border-color: $border;
2768
background-color: $base;
2769
row { padding: 2px; }
2771
}
2772
row {
2774
&.activatable {
2775
transition: $transition,
2776
background-size $duration-ripple-aftermath $ease-out,
2777
background-image $duration-ripple-aftermath-opacity $ease-out;
2778
box-shadow: inset 0 0 0 9999px transparent;
2779
background-image: radial-gradient(circle farthest-corner at center,
2780
transparent 10%,
2781
transparent 0%);
2782
background-repeat: no-repeat;
2783
background-position: center;
2784
background-size: 1000% 1000%;
2785
&:hover {
2787
transition: $transition,
2788
box-shadow 0,
2789
background-size $duration-ripple-aftermath $ease-out,
2790
background-image $duration-ripple-aftermath-opacity $ease-out;
2791
box-shadow: inset 0 0 0 9999px $overlay-hover;
2792
}
2793
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2795
&:active {
2796
transition: $transition,
2797
background-size 0,
2798
background-image 0;
2799
animation: ripple_effect $duration-ripple $ease-out forwards;
2800
box-shadow: inset 0 0 0 9999px $overlay-hover;
2801
background-image: radial-gradient(circle farthest-corner at center,
2802
$overlay-active 10%,
2803
transparent 0%);
2804
background-size: 0% 0%;
2805
}
2806
}
2807
&:selected {
2809
@extend %selected_items;
2810
color: $primary; // for overlays
2811
image,
2813
label { color: $text; }
2814
button image,
2816
button label { color: inherit; }
2817
}
2818
}
2819
/*********************
2822
* App Notifications *
2823
*********************/
2824
.app-notification {
2825
// @extend %osd;
2826
@extend toolbar.osd;
2828
margin: 8px;
2830
button { @extend %button_basic.flat; }
2832
&.frame,
2834
border { border-style: none; }
2835
}
2836
/*************
2839
* Expanders *
2840
*************/
2841
expander {
2842
title > arrow {
2843
transition: all $duration $ease-out;
2844
min-width: 16px;
2845
min-height: 16px;
2846
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2847
-gtk-icon-transform: rotate(-90deg);
2848
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2850
&:checked { -gtk-icon-transform: unset; }
2852
color: $text-secondary;
2854
&:hover, &:active { color: $text; }
2856
&:disabled { color: $text-secondary-disabled; }
2858
}
2859
}
2860
/************
2863
* Calendar *
2864
************/
2865
calendar {
2866
padding: 1px;
2867
border: 1px solid $border;
2868
color: $text;
2869
&:disabled { color: $text-disabled; }
2871
&:selected {
2873
@extend %selected_items;
2874
border-radius: $corner-radius + 1px;
2876
}
2877
&.header {
2879
border-style: none none solid;
2880
border-radius: 0;
2881
}
2882
&.button { @extend %simple_flat_button; }
2884
&.highlight {
2886
color: $text-secondary;
2887
font-weight: 500;
2888
}
2889
&:indeterminate { color: $text-secondary-disabled; }
2891
}
2892
/***********
2895
* Dialogs *
2896
***********/
2897
messagedialog { // Message Dialog styling
2898
&.background { background-color: $surface; }
2899
.titlebar {
2901
min-height: $small-size;
2902
border-style: none;
2903
box-shadow: inset 0 1px highlight($surface);
2904
background-color: $surface;
2905
color: $text;
2906
&:backdrop { color: $text-secondary; }
2908
}
2909
&.csd { // rounded bottom border styling for csd version
2911
&.background {
2912
// bigger radius for better antialiasing
2913
border-bottom-left-radius: $corner-radius;
2914
border-bottom-right-radius: $corner-radius;
2915
}
2916
.dialog-action-area {
2918
margin-top: -$container-padding;
2919
padding: $container-padding;
2920
button {
2922
@extend %simple_flat_button;
2923
border-radius: $corner-radius;
2924
&:not(:last-child) { margin-right: $container-padding; }
2926
&.suggested-action:not(:disabled) { color: $suggested; }
2928
&.destructive-action:not(:disabled) { color: $destructive; }
2930
}
2931
}
2932
}
2933
}
2934
filechooser {
2936
.dialog-action-box { border-top: 1px solid $border; }
2937
#pathbarbox {
2939
border-bottom: 1px solid $border;
2940
background-color: $background;
2941
> stack > box > button { // The new folder button
2943
@extend %button_basic.flat;
2944
@extend %circular_button;
2945
}
2946
}
2947
}
2948
filechooserbutton:drop(active) {
2950
box-shadow: none;
2951
}
2952
/***********
2955
* Sidebar *
2956
***********/
2957
.sidebar {
2958
border-style: none;
2959
background-color: $base-alt;
2960
&:not(separator) {
2962
@at-root %sidebar_left,
2963
&:dir(ltr),
2964
&.left,
2965
&.left:dir(rtl) {
2966
border-right: 1px solid $border;
2967
border-left-style: none;
2968
}
2969
@at-root %sidebar_right,
2971
&:dir(rtl),
2972
&.right {
2973
border-left: 1px solid $border;
2974
border-right-style: none;
2975
}
2976
}
2977
list { background-color: transparent; }
2979
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2981
}
2982
stacksidebar {
2984
&.sidebar {
2985
&:dir(ltr),
2986
&.left,
2987
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2988
&:dir(rtl),
2990
&.right { list { @extend %sidebar_right; }}
2991
}
2992
row {
2994
padding: 10px 4px;
2995
> label {
2997
padding-left: 6px;
2998
padding-right: 6px;
2999
}
3000
&.needs-attention > label { @extend %needs_attention; }
3002
}
3003
}
3004
separator.sidebar {
3006
// background-color: $border;
3007
&.selection-mode,
3009
.selection-mode & {
3010
// background-color: $border;
3011
}
3012
}
3013
/****************
3016
* File chooser *
3017
****************/
3018
// dim the sidebar icons, see bug #786613 for details on this oddity
3019
row {
3020
image.sidebar-icon { color: $text-secondary; }
3021
}
3022
placessidebar {
3024
> viewport.frame { border-style: none; }
3025
list { padding: (4px - 3px) 0 4px; }
3027
row {
3029
// Needs overriding of the GtkListBoxRow padding
3030
min-height: 32px;
3031
margin: -1px 4px; // Remove unwanted hard-coded vertical margins with -1px
3032
padding: 0;
3033
border-radius: $corner-radius;
3034
// Using margins/padding directly in the SidebarRow
3036
// will make the animation of the new bookmark row jump
3037
> revealer { padding: 0 8px; }
3038
&:selected { font-weight: 500; }
3040
&:disabled { color: $text-disabled; }
3042
image.sidebar-icon {
3044
&:dir(ltr) { padding-right: 8px; }
3045
&:dir(rtl) { padding-left: 8px; }
3046
}
3047
label.sidebar-label {
3049
&:dir(ltr) { padding-right: 2px; }
3050
&:dir(rtl) { padding-left: 2px; }
3051
}
3052
&:selected image.sidebar-icon,
3054
&:selected label.sidebar-label { color: inherit; }
3055
@at-root button.sidebar-button {
3057
@extend %simple_flat_button;
3058
@extend %small_button;
3059
}
3060
&.sidebar-placeholder-row {
3062
min-height: 2px;
3063
padding: 0 8px;
3064
background-image: image($primary);
3065
background-clip: content-box;
3066
}
3067
&.sidebar-new-bookmark-row { color: $primary; }
3069
&:drop(active):not(:disabled) {
3071
box-shadow: inset 0 0 0 2px $primary;
3072
}
3073
}
3074
}
3075
placesview {
3077
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3078
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3080
// this selects the "connect to server" label
3082
> actionbar > revealer > box > label {
3083
padding-left: 8px;
3084
padding-right: 8px;
3085
}
3086
}
3087
/*********
3090
* Paned *
3091
*********/
3092
paned {
3093
> separator {
3094
min-width: 1px;
3095
min-height: 1px;
3096
-gtk-icon-source: none; // defeats the ugly default handle decoration
3097
border-style: none; // just to be sure
3098
background-color: transparent;
3099
// workaround, using background istead of a border since the border will get rendered twice (?)
3100
background-image: image($border);
3101
background-size: 1px 1px;
3102
background-clip: content-box; // avoids borders image being rendered twice (?)
3103
&.wide {
3105
min-width: 6px;
3106
min-height: 6px;
3107
background-color: $background;
3108
background-image: image($border), image($border);
3109
background-size: 1px 1px, 1px 1px;
3110
}
3111
}
3112
&.horizontal > separator {
3114
background-repeat: repeat-y;
3115
&:dir(ltr) {
3117
margin: 0 -8px 0 0;
3118
padding: 0 8px 0 0;
3119
background-position: left;
3120
}
3121
&:dir(rtl) {
3123
margin: 0 0 0 -8px;
3124
padding: 0 0 0 8px;
3125
background-position: right;
3126
}
3127
&.wide {
3129
margin: 0;
3130
padding: 0;
3131
background-repeat: repeat-y, repeat-y;
3132
background-position: left, right;
3133
}
3134
}
3135
&.vertical > separator {
3137
margin: 0 0 -8px 0;
3138
padding: 0 0 8px 0;
3139
background-repeat: repeat-x;
3140
background-position: top;
3141
&.wide {
3143
margin: 0;
3144
padding: 0;
3145
background-repeat: repeat-x, repeat-x;
3146
background-position: bottom, top;
3147
}
3148
}
3149
}
3150
/**************
3153
* GtkInfoBar *
3154
**************/
3155
infobar {
3156
border-style: none;
3157
&.info { background-color: $infobar-info; }
3159
&.question { background-color: $infobar-question; }
3161
&.warning { background-color: $infobar-warning; }
3163
&.error { background-color: $infobar-error; }
3165
&.info,
3167
&.question,
3168
&.warning,
3169
&.error {
3170
> label, & { color: on(black); }
3171
button { @extend %button_selected; }
3173
selection {}
3175
*:link { color: on(black); }
3177
}
3178
}
3179
/************
3182
* Tooltips *
3183
************/
3184
tooltip {
3185
&.background {
3186
// background-color needs to be set this way otherwise it gets drawn twice
3187
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3188
// box-shadow: inset 0 1px highlight($tooltip);
3189
background-color: $tooltip;
3190
color: on($tooltip);
3191
}
3192
// padding: 4px; /* not working */
3194
border-radius: $corner-radius;
3195
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3196
&:not(.csd):not(.unity-csd) {
3198
// border: 1px solid $border;
3199
// border-radius: $corner-radius + 1px;
3200
// background-clip: $background-clip-extra;
3201
}
3202
// FIXME: we need a border or tooltips vanish on black background.
3204
decoration { background-color: transparent; }
3205
label {
3207
// tooltip label already seems to have 6px margins
3208
min-height: 32px - 6px * 2;
3209
padding: 0 8px - 6px;
3210
}
3211
* {
3213
// workaround for Eclipse.
3214
// do not include any declaration here.
3215
// padding: 0;
3216
// background-color: transparent;
3217
// color: inherit;
3218
}
3219
}
3220
/*****************
3223
* Color Chooser *
3224
*****************/
3225
colorswatch {
3226
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3227
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3228
// applied to the overlay box.
3229
// base color corners rounding
3231
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3232
// sports a bigger radius.
3233
// nth-child is needed by the custom color strip.
3234
&.top {
3236
border-top-left-radius: $corner-radius + 0.5px;
3237
border-top-right-radius: $corner-radius + 0.5px;
3238
overlay {
3240
border-top-left-radius: $corner-radius;
3241
border-top-right-radius: $corner-radius;
3242
}
3243
}
3244
&.bottom {
3246
border-bottom-left-radius: $corner-radius + 0.5px;
3247
border-bottom-right-radius: $corner-radius + 0.5px;
3248
overlay {
3250
border-bottom-left-radius: $corner-radius;
3251
border-bottom-right-radius: $corner-radius;
3252
}
3253
}
3254
&.left,
3256
&:first-child:not(.top) {
3257
border-top-left-radius: $corner-radius + 0.5px;
3258
border-bottom-left-radius: $corner-radius + 0.5px;
3259
overlay {
3261
border-top-left-radius: $corner-radius;
3262
border-bottom-left-radius: $corner-radius;
3263
}
3264
}
3265
&.right,
3267
&:last-child:not(.bottom) {
3268
border-top-right-radius: $corner-radius + 0.5px;
3269
border-bottom-right-radius: $corner-radius + 0.5px;
3270
overlay {
3272
border-top-right-radius: $corner-radius;
3273
border-bottom-right-radius: $corner-radius;
3274
}
3275
}
3276
&.dark { color: on(black); }
3278
&.light { color: on(white); }
3280
&:drop(active) {
3282
box-shadow: none;
3283
&.light overlay { box-shadow: $shadow-1, 0 0 0 2px $primary; }
3285
&.dark overlay { box-shadow: $shadow-1, 0 0 0 2px $primary; }
3287
}
3288
overlay {
3290
transition: $transition-shadow;
3291
box-shadow: $shadow-1;
3292
&:hover { box-shadow: $shadow-2; }
3294
}
3295
&#add-color-button {
3297
border-radius: $corner-radius $corner-radius 0 0;
3298
color: on(black);
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 $border;
3478
border-radius: $corner-radius + 1px;
3479
box-shadow: inset 0 -2px $border;
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
transition: $transition;
3487
box-shadow: $shadow-1, inset 0 0 0 2px $primary;
3488
caret-color: $primary;
3489
}
3490
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3492
stackswitcher button.circular,
3494
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3495
min-width: $medium-size;
3496
min-height: $medium-size;
3497
padding: 0;
3498
}
3499
/*************
3502
* App Icons *
3503
*************/
3504
// Outline for low res icons
3505
.lowres-icon {
3506
// -gtk-icon-shadow: none;
3507
}
3508
// Drapshadow for large icons
3510
.icon-dropshadow {
3511
// -gtk-icon-shadow: none;
3512
}
3513
/*********
3516
* Emoji *
3517
*********/
3518
popover.emoji-picker {
3519
padding: 0;
3520
entry {
3522
border-bottom: 1px solid $border;
3523
border-image: none;
3524
border-radius: 0;
3525
box-shadow: none;
3526
background-color: transparent;
3527
}
3528
scrolledwindow { border-bottom: 1px solid $border; }
3530
}
3531
// mimic tab style
3533
button.emoji-section {
3534
margin-top: -1px;
3535
padding: 0 8px;
3536
min-width: 24px;
3537
min-height: $medium-size;
3538
border-radius: 0;
3539
outline-offset: -6px;
3540
&, &:hover, &:active { box-shadow: inset 0 2px transparent; }
3542
&:checked {
3544
box-shadow: inset 0 2px $primary;
3545
background-color: transparent;
3546
}
3547
&:hover, &:active { background-color: $overlay-hover; }
3549
&:first-child { margin-left: 4px; }
3551
&:last-child { margin-right: 4px; }
3553
}
3554
popover.emoji-picker .emoji {
3556
min-width: 3em;
3557
min-height: 3em;
3558
padding: 0 8px;
3559
// font-size: larger;
3560
widget {
3562
transition: $transition;
3563
border-radius: $corner-radius;
3564
&:hover { background-color: $overlay-hover; }
3566
}
3567
}
3568
popover.emoji-completion {
3570
padding: 8px 0;
3571
arrow {
3573
border: none;
3574
background: none;
3575
}
3576
.emoji-completion-row {
3578
min-height: $menuitem-size;
3579
padding: 0 12px;
3580
}
3581
.emoji:hover {
3583
background-color: $overlay-hover;
3584
}
3585
}
3586