ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error_color;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: 4;
21
-GtkDialog-action-area-border: 0;
22
// We use the outline properties to signal the focus properties
24
// to the adwaita engine: using real CSS properties is faster,
25
// and we don't use any outlines for now.
26
outline-style: solid;
28
outline-width: 2px;
29
outline-color: transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: 2px;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
switch:focus slider,
37
notebook:focus tab,
38
*:focus { outline-color: $fill_color; }
39
/***************
42
* Base States *
43
***************/
44
.background {
45
background-color: $bg_color;
46
color: $fg_color;
47
}
48
/*
50
These wildcard seems unavoidable, need to investigate.
51
Wildcards are bad and troublesome, use them with care,
52
or better, just don't.
53
Everytime a wildcard is used a kitten dies, painfully.
54
*/
55
*:disabled { -gtk-icon-effect: dim; }
57
.gtkstyle-fallback {
59
background-color: $bg_color;
60
color: $fg_color;
61
&:hover {
63
background-color: darken($bg_color, 5%);
64
color: $fg_color;
65
}
66
&:active {
68
background-color: darken($bg_color, 10%);
69
color: $fg_color;
70
}
71
&:disabled {
73
background-color: $bg_color;
74
color: $disabled_fg_color;
75
}
76
&:selected {
78
background-color: $primary_color;
79
color: $inverse_fg_color;
80
}
81
}
82
.view {
84
@extend row.activatable;
85
background-color: $base_color;
87
color: $fg_color;
88
&:disabled { color: $disabled_fg_color; }
90
&:hover, &:active, &:selected { border-radius: 2px; }
92
selection,
94
&:selected { @extend %selected_items; }
95
}
96
textview {
98
// FIXME: we need to override background-color to ensure text rendering
99
text { background-color: $base_color; }
100
border {
102
background-color: $alt_base_color;
103
color: $tertiary_fg_color; // FIXME: not working
104
}
105
}
106
// iconview { @extend .view; }
108
.rubberband,
110
rubberband {
111
border: 1px solid $alt_primary_color;
112
background-color: rgba($alt_primary_color, $lower_opacity);
113
}
114
flowbox {
116
rubberband { @extend rubberband; }
117
flowboxchild {
119
padding: 4px;
120
border-radius: 2px;
121
&:selected { @extend %selected_items; }
123
}
124
}
125
.content-view .tile {
127
// margin: 2px;
128
// padding: 0;
129
// border-radius: 0;
130
// background-color: $black;
131
&:selected {
133
background-color: transparent;
134
color: inherit;
135
}
136
}
137
label {
139
caret-color: currentColor; // this shouldn't be needed.
140
&.separator {
142
@extend .dim-label;
143
color: $fg_color;
145
}
146
row:selected &,
148
&:selected { @extend %nobg_selected_items; }
149
selection {
151
background-color: $primary_color;
152
color: $inverse_fg_color;
153
}
154
&:disabled {
156
color: $disabled_fg_color;
157
selection { @extend %selected_items:disabled; }
159
tab &,
161
button & { color: inherit; }
162
}
163
}
164
.dim-label { opacity: $tertiary_opacity; }
166
assistant {
168
.sidebar {
169
padding: 4px 0;
170
// background-color: $base_color;
171
// border-top: 1px solid $border_color;
172
}
173
// &.csd .sidebar { border-top-style: none; }
175
.sidebar label {
177
min-height: $medium_size;
178
padding: 0 12px;
179
color: $tertiary_fg_color;
180
font-weight: 500;
181
&.highlight { color: $fg_color; }
183
}
184
}
185
%osd, .osd { opacity: $higher_opacity; }
187
/*********************
190
* Spinner Animation *
191
*********************/
192
@keyframes spin {
193
to { -gtk-icon-transform: rotate(1turn); }
194
}
195
spinner {
197
background: none;
198
opacity: 0; // non spinning spinner makes no sense
199
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
200
&:checked {
202
opacity: 1;
203
animation: spin 1s linear infinite;
204
&:disabled { opacity: $disabled_opacity; }
206
}
207
}
208
/****************
211
* Text Entries *
212
****************/
213
%entry,
214
entry {
215
%entry_basic, & {
216
min-height: $medium_size;
217
padding: 0 8px;
218
border-radius: 2px;
219
@include entry(normal);
221
&:focus { @include entry(focus); }
223
&:disabled { @include entry(disabled); }
225
&.flat {
227
border-radius: 0;
228
@include entry(flat-normal);
230
&:focus { @include entry(flat-focus); }
232
&:disabled { @include entry(flat-disabled); }
234
}
235
image { // icons inside the entry
237
// @extend %simple_flat_button;
238
// min-height: $small_size;
240
// min-width: $small_size;
241
// border-radius: $circular_radius;
242
// -gtk-outline-radius: $circular_radius;
243
color: $secondary_fg_color;
244
&:hover, &:active { color: $fg_color; }
246
&:disabled { color: $tertiary_fg_color; }
248
&.left {
250
margin-left: ($medium_size - 16px) / 2 - 8px;
251
margin-right: 6px;
252
}
253
&.right {
255
margin-left: 6px;
256
margin-right: ($medium_size - 16px) / 2 - 8px;
257
}
258
}
259
undershoot {
261
&.left { @include undershoot(left); }
262
&.right { @include undershoot(right); }
264
}
265
selection { @extend %selected_items; }
267
// entry error and warning style
269
@each $e_type, $e_color in (error, $error_color),
270
(warning, $warning_color) {
271
&.#{$e_type} {
272
@include entry(normal, $e_color);
273
&:focus { @include entry(focus, $e_color); }
275
&:disabled { @include entry(disabled, $e_color); }
277
&.flat {
279
@include entry(flat-normal, $e_color);
280
&:focus { @include entry(flat-focus, $e_color); }
282
&:disabled { @include entry(flat-disabled, $e_color); }
284
}
285
image {
287
color: $secondary_inverse_fg_color;
288
&:hover, &:active { color: $inverse_fg_color; }
290
&:disabled { color: $tertiary_inverse_fg_color; }
292
}
293
}
294
}
295
&:drop(active) {
297
// box-shadow: inset 0 0 0 2px $accent_color;
298
}
299
.osd & {
301
}
302
}
303
progress {
305
margin: 2px (2px - 8px);
306
border-bottom: 2px solid $primary_color;
307
background-color: transparent;
308
}
309
// linked entries
311
.linked:not(.vertical) > & { @extend %linked; }
312
// Vertically linked entries
314
.linked.vertical > & { @extend %linked_vertical; }
315
.linked:not(.vertical) > &.flat,
317
.linked.vertical > &.flat { border-radius: 0; }
318
}
319
treeview entry {
321
&.flat, & {
322
min-height: 0;
323
padding: 2px;
324
border-radius: 0;
325
background-color: $base_color;
326
&, &:focus {
328
border-image: none;
329
box-shadow: none;
330
}
331
}
332
}
333
.entry-tag {
335
$tag_height: 24px;
336
$tag_margin: ($medium_size - $tag_height) / 2;
337
margin: $tag_margin; // instead of min-height: $tag_height;
339
border-radius: $circular_radius;
340
box-shadow: none;
341
background-color: $primary_color;
342
color: $inverse_fg_color;
343
&:hover { box-shadow: $shadow_1; }
345
// side margins: compensate the entry padding with a negative margin
347
// then the negative margin itself
348
:dir(ltr) & {
349
margin-left: 8px;
350
margin-right: $tag_margin - 8px;
351
padding-left: 8px;
352
padding-right: ($tag_height - 16px) / 2;
353
}
354
:dir(rtl) & {
356
margin-left: $tag_margin - 8px;
357
margin-right: 8px;
358
padding-left: ($tag_height - 16px) / 2;
359
padding-right: 8px;
360
}
361
// seems any sizing doesn't work
363
&.button {
364
box-shadow: none;
365
background-color: transparent;
366
&:not(:hover):not(:active) { color: $secondary_inverse_fg_color; }
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($accent_color),
382
to(transparent));
383
}
384
to {
386
background-image: -gtk-gradient(radial,
387
center center, 0,
388
center center, 0.5,
389
to($accent_color),
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: 2px;
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: 2px;
445
-gtk-outline-radius: 2px;
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: 2px;
463
&.image-button { @extend %circular_button; }
465
&.text-button.image-button {
467
border-radius: 2px;
468
-gtk-outline-radius: 2px;
469
}
470
}
471
&:drop(active) {
473
// box-shadow: inset 0 0 0 2px $accent_color;
474
}
475
}
476
@at-root %button_selected, row:selected & {
478
&:disabled { color: $disabled_secondary_inverse_fg_color; }
479
}
480
// big standalone buttons like in Documents pager
482
&.osd {
483
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
484
&.image-button { padding: ($large_size - 24px) / 2; }
486
&:disabled { opacity: 0; }
488
}
489
// overlay / OSD style
491
@at-root %osd_button,
492
.osd & {
493
}
494
// Suggested and Destructive Action buttons
496
@each $b_type, $b_color in (suggested-action, $suggested_color),
497
(destructive-action, $destructive_color) {
498
&.#{$b_type} {
499
background-color: $b_color;
500
color: $inverse_fg_color;
501
&:disabled { @include button(disabled, $b_color); }
503
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
505
&.flat {
507
background-color: transparent;
508
color: $b_color;
509
&:disabled { @include button(flat-disabled, $b_color); }
511
&:checked { background-color: rgba($b_color, 0.3); }
513
}
514
.osd & {
516
}
517
}
518
}
519
.stack-switcher > & {
521
// to position the needs attention dot, padding is added to the button
522
// child, a label needs just lateral padding while an icon needs vertical
523
// padding added too.
524
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
526
> label {
528
padding-left: 6px; // label padding
529
padding-right: 6px; //
530
}
531
> image {
533
padding-left: 6px; // image padding
534
padding-right: 6px; //
535
padding-top: 3px; //
536
padding-bottom: 3px; //
537
}
538
&.text-button {
540
// compensate text-button paddings
541
padding-left: 16px - 6px;
542
padding-right: 16px - 6px;
543
}
544
&.image-button {
546
// we want image buttons to have a 1:1 aspect ratio, so compensation
547
// of the padding added to the GtkImage is needed
548
padding-left: ($medium_size - 16px) / 2 - 6px;
549
padding-right: ($medium_size - 16px) / 2 - 6px;
550
}
551
&.needs-attention {
553
> label,
554
> image { @extend %needs_attention; }
555
&:checked {
557
> label,
558
> image {
559
animation: none;
560
background-image: none;
561
}
562
}
563
}
564
}
565
// hide separators
567
&.font,
568
&.file { separator { @extend %hide_separators; }}
569
// &.font { > box > box > label { font-weight: bold; }}
571
// inline-toolbar buttons
573
.inline-toolbar & {
574
// @extend %button_basic.flat;
575
&:not(.text-button) { @extend %circular_button; }
577
}
578
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
580
@at-root %circular_button,
582
&.close,
583
&.circular { // The Bloody Circul Button
584
border-radius: $circular_radius;
585
-gtk-outline-radius: $circular_radius;
586
// label { padding: 0; }
588
}
589
@at-root %small_button {
591
min-height: $small_size;
592
min-width: $small_size;
593
padding: 0;
594
border-radius: $circular_radius;
595
-gtk-outline-radius: $circular_radius;
596
}
597
}
598
%needs_attention {
600
animation: needs_attention $longer_duration $deceleration_curve forwards;
601
background-repeat: no-repeat;
602
background-position: right 3px;
603
background-size: 6px 6px;
604
&:dir(rtl) { background-position: left 3px; }
606
}
607
// all the following is for the +|- buttons on inline toolbars, that way
609
// should really be deprecated...
610
.inline-toolbar toolbutton > button { // redefining the button look is
611
// needed since those are flat...
612
}
613
// More inline toolbar buttons
615
toolbar.inline-toolbar toolbutton {
616
// > button.flat { @extend %linked_middle; }
617
// &:first-child > button.flat { @extend %linked:first-child; }
619
// &:last-child > button.flat { @extend %linked:last-child; }
621
// &:only-child > button.flat { @extend %linked:only-child; }
623
}
624
%linked_middle {
626
border-radius: 0;
627
-gtk-outline-radius: 2px;
628
}
629
%linked {
631
@extend %linked_middle;
632
&:first-child {
634
border-top-left-radius: 2px;
635
border-bottom-left-radius: 2px;
636
}
637
&:last-child {
639
border-top-right-radius: 2px;
640
border-bottom-right-radius: 2px;
641
}
642
&:only-child {
644
border-radius: 2px;
645
}
646
}
647
%linked_vertical_middle {
649
border-radius: 0;
650
-gtk-outline-radius: 2px;
651
}
652
%linked_vertical {
654
@extend %linked_vertical_middle;
655
&:first-child {
657
border-top-left-radius: 2px;
658
border-top-right-radius: 2px;
659
}
660
&:last-child {
662
border-bottom-left-radius: 2px;
663
border-bottom-right-radius: 2px;
664
}
665
&:only-child {
667
border-radius: 2px;
668
}
669
}
670
/* menu buttons */
672
modelbutton.flat,
673
.menuitem.button.flat {
674
min-height: $menuitem_size;
675
padding: 0 8px;
676
border-radius: 2px;
677
color: inherit;
678
@extend %simple_flat_button;
680
&:selected { @extend %selected_items; }
682
}
683
modelbutton.flat arrow {
685
background: none;
686
&:hover { background: none; }
688
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
690
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
692
}
693
button.color {
695
min-height: $small_size;
696
min-width: $small_size;
697
padding: $container_padding;
698
colorswatch:only-child {
700
// &, overlay { border-radius: 0; }
701
}
702
}
703
/*********
706
* Links *
707
*********/
708
*:link {
709
&, &:hover, &:active { color: $link_color; }
710
&:visited {
712
&, &:hover, &:active { color: $visited_link_color; }
713
}
714
@at-root %link_selected,
716
&:selected,
717
*:selected & { color: $inverse_fg_color; }
718
}
719
button:link,
721
button:visited {
722
@extend *:link;
723
> label { text-decoration-line: underline; }
725
}
726
/*****************
728
* GtkSpinButton *
729
*****************/
730
spinbutton {
731
&:not(.vertical) {
732
// in this horizontal configuration, the whole spinbutton
733
// behaves as the entry, so we extend the entry styling
734
// and nuke the style on the internal entry
735
@extend %entry;
736
padding: 0;
738
%spinbutton_entry,
740
entry {
741
min-width: $large_size - 8px * 2;
742
// reset all the other props since the spinbutton node is styled here
743
margin: 0;
744
border-image: none;
745
border-radius: 0;
746
box-shadow: none;
747
background-color: transparent;
748
//
749
// This will help to simplify spinbutton's code, but unfortunatelly
750
// doesn't work properly in :dir(rtl). It needs z-index property.
751
//
752
// min-width: $large_size - 8px;
753
//
754
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
755
//
756
// &:dir(ltr) {
757
// margin-right: -$spinbuttons_width;
758
// padding-right: $spinbuttons_width;
759
// }
760
//
761
// &:dir(rtl) {
762
// margin-left: -$spinbuttons_width;
763
// padding-left: $spinbuttons_width;
764
// }
765
}
766
button {
768
// margin: $container_padding;
769
border: solid $container_padding transparent;
770
@extend %simple_flat_button;
772
@extend %small_button;
774
&.up:dir(ltr),
776
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
777
&.up:dir(rtl),
779
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
780
}
781
}
782
// OSD horizontal
784
.osd &:not(.vertical) {
785
button {
786
}
787
}
788
// Vertical
790
&.vertical {
791
// in the vertical configuration, we treat the spinbutton
792
// as a box, and tweak the style of the entry in the middle
793
// so that it's linked
794
// FIXME: this should not be set at all, but otherwise it gets the wrong
796
// color
797
&:disabled { color: $disabled_fg_color; }
798
&:drop(active) {
800
box-shadow: none;
801
}
802
entry {
804
min-height: $medium_size;
805
min-width: $large_size;
806
padding: 0;
807
}
808
button {
810
min-height: $medium_size;
811
min-width: $large_size;
812
padding: 0;
813
@extend %simple_flat_button;
815
&.up { border-radius: 2px 2px 0 0; }
817
&.down { border-radius: 0 0 2px 2px; }
819
}
820
}
821
// OSD vertical
823
.osd &.vertical button:first-child {
824
}
825
// Misc
827
treeview &:not(.vertical) {
828
min-height: 0;
829
border-style: none;
830
border-radius: 0;
831
entry {
833
min-height: 0;
834
padding: 1px 2px;
835
}
836
}
837
}
838
/**************
841
* ComboBoxes *
842
**************/
843
combobox {
844
arrow {
845
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
846
min-height: 16px;
847
min-width: 16px;
848
}
849
decoration,
851
button.combo:checked { transition: none; } // workaround for menuitem selection
852
button.combo cellview {
854
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
855
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
856
}
857
#gtk-combobox-popup-menu {
859
padding: 2px 0;
860
menuitem {
862
min-height: $medium_size - 2px * 2;
863
padding: 0 8px;
864
}
865
// overflow arrows
867
> arrow {
868
&.top { margin-top: -2px; }
869
&.bottom { margin-bottom: -2px * 3; }
871
}
872
}
873
&.linked {
875
button:nth-child(2) {
876
&:dir(ltr) { @extend %linked:last-child; }
877
&:dir(rtl) { @extend %linked:first-child; }
878
}
879
}
880
&:drop(active) { // FIXME: untested
882
box-shadow: none;
883
// button.combo { @extend %button_basic:drop(active); }
885
}
886
}
887
// the combo is a composite widget so the way we do button linking doesn't
889
// work, special case needed. See
890
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
891
.linked:not(.vertical) > combobox {
893
> box > button.combo { @extend %linked_middle; }
894
&:first-child > box > button.combo { @extend %linked:first-child; }
896
&:last-child > box > button.combo { @extend %linked:last-child; }
898
&:only-child > box > button.combo { @extend %linked:only-child; }
900
}
901
.linked.vertical > combobox {
903
> box > button.combo { @extend %linked_vertical_middle; }
904
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
906
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
908
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
910
}
911
%combo_flat {
913
border-radius: 0;
914
background-image: none;
915
font-weight: inherit;
916
@include entry(flat-normal);
918
&:hover { box-shadow: inset 0 -2px $tertiary_fg_color; }
920
&:checked {
922
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
923
$primary_color 100%,
924
transparent 0%)
925
0 0 2 / 0 0 2px;
926
}
927
&:disabled { color: $disabled_fg_color; }
929
}
930
/************
933
* Toolbars *
934
************/
935
toolbar {
936
-GtkWidget-window-dragging: true;
937
padding: $container_padding / 2;
938
background-color: $bg_color;
939
button { @extend %button_basic.flat; }
941
// on OSD
943
.osd & { background-color: transparent; }
944
// stand-alone OSD toolbars
946
&.osd {
947
transition: $shadow_transition;
948
padding: $container_padding;
949
border-radius: 2px;
950
box-shadow: $shadow_2, inset 0 1px $highlight_color;
951
background-color: $base_color;
952
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
954
&.left,
956
&.right,
957
&.top,
958
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
959
}
960
// toolbar separators
962
&.horizontal separator { margin: $container_padding / 2; }
963
&.vertical separator { margin: $container_padding / 2; }
964
&:not(.inline-toolbar):not(.osd) {
966
scale,
967
entry,
968
spinbutton,
969
button { margin: $container_padding / 2; }
970
.linked entry,
972
.linked spinbutton,
973
.linked button {
974
&:not(:first-child) { margin-left: 0; }
975
&:not(:last-child) { margin-right: 0; }
976
}
977
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
979
}
980
}
981
// searchbar, location-bar & inline-toolbar
983
.inline-toolbar {
984
padding: $container_padding;
985
border-style: solid;
986
border-width: 0 1px 1px;
987
border-color: $border_color;
988
background-color: $alt_base_color;
989
}
990
searchbar,
992
.location-bar {
993
padding: $container_padding;
994
border-style: solid;
995
border-width: 0 0 1px;
996
border-color: $border_color;
997
background-color: $bg_color;
998
background-clip: border-box;
999
}
1000
/***************
1003
* Header bars *
1004
***************/
1005
%titlebar,
1006
headerbar {
1007
transition: background-color $shorter_duration $deceleration_curve;
1008
min-height: $large_size;
1009
padding: 0 $container_padding;
1010
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1011
background-color: $titlebar_bg_color;
1012
color: $titlebar_fg_color;
1013
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
1015
&:backdrop {
1017
color: $secondary_titlebar_fg_color;
1018
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
1020
}
1021
.title {
1023
transition: $longer_transition;
1024
padding: 0 12px;
1025
font-weight: bold;
1026
}
1027
.subtitle {
1029
transition: $longer_transition;
1030
padding: 0 12px;
1031
font-size: smaller;
1032
@extend .dim-label;
1034
}
1035
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
1037
button:not(.suggested-action):not(.destructive-action) {
1039
@extend %button_basic.flat;
1040
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1042
$titlebar_indicator_color 0%,
1043
transparent 0%)
1044
0 0 0 / 0 0 0px;
1045
color: $secondary_titlebar_fg_color;
1046
&:hover, &:active { color: $titlebar_fg_color; }
1048
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1050
&:checked {
1052
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1053
$titlebar_indicator_color 100%,
1054
transparent 0%)
1055
0 0 2 / 0 0 2px;
1056
color: $titlebar_fg_color;
1057
&:disabled { color: $disabled_titlebar_fg_color; }
1059
&, &:disabled { background-color: transparent; }
1061
}
1062
&:backdrop {
1064
color: $tertiary_titlebar_fg_color;
1065
&:hover, &:active { color: $secondary_titlebar_fg_color; }
1067
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1069
&:checked {
1071
color: $secondary_titlebar_fg_color;
1072
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1074
}
1075
}
1076
}
1077
button.suggested-action, button.destructive-action {
1079
&:disabled {
1080
background-color: $titlebar_divider_color;
1081
color: $disabled_titlebar_fg_color;
1082
}
1083
}
1084
&.selection-mode {
1086
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1087
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1088
transition: background-color 0.00001s $longer_duration;
1089
animation: header_ripple_effect $longer_duration $deceleration_curve;
1090
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1091
background-color: $primary_color;
1092
color: $inverse_fg_color;
1093
&:backdrop {
1095
color: $secondary_inverse_fg_color;
1096
}
1097
.subtitle:link { @extend *:link:selected; }
1099
button:not(.suggested-action):not(.destructive-action) {
1101
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1102
currentColor 0%,
1103
transparent 0%)
1104
0 0 0 / 0 0 0px;
1105
color: $inverse_fg_color;
1106
&:disabled { color: $disabled_inverse_fg_color; }
1108
&:checked {
1110
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1111
currentColor 100%,
1112
transparent 0%)
1113
0 0 2 / 0 0 2px;
1114
color: $inverse_fg_color;
1115
&:disabled { color: $disabled_inverse_fg_color; }
1117
}
1118
&:backdrop {
1120
color: $secondary_inverse_fg_color;
1121
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1123
&:checked {
1125
color: $secondary_inverse_fg_color;
1126
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1128
}
1129
}
1130
}
1131
.selection-menu {
1133
padding-left: 16px;
1134
padding-right: 16px;
1135
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1137
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1139
}
1140
}
1141
.fullscreen &,
1143
.tiled &,
1144
.maximized & {
1145
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1146
box-shadow: $shadow_1;
1147
}
1148
&.default-decoration {
1150
min-height: $small_size;
1151
padding: $container_padding;
1152
box-shadow: inset 0 1px $titlebar_highlight_color;
1153
.fullscreen &,
1155
.tiled &,
1156
.maximized & { box-shadow: none; }
1157
button.titlebutton {
1159
min-height: $small_size;
1160
min-width: $small_size;
1161
margin: 0;
1162
padding: 0;
1163
}
1164
// workaround for non-animatable buttons
1166
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1167
}
1168
.solid-csd & {
1170
&:dir(rtl), &:dir(ltr) { // specificity bump
1171
// margin-left: -2px;
1172
// margin-right: -2px;
1173
// margin-top: -2px;
1174
// border-radius: 0;
1175
// box-shadow: inset 0 1px $titlebar_highlight_color;
1176
}
1177
}
1178
}
1179
headerbar {
1181
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1182
entry,
1183
spinbutton,
1184
// separator,
1185
button {
1186
margin-top: $container_padding;
1187
margin-bottom: $container_padding;
1188
}
1189
switch {
1191
margin-top: $container_padding * 2;
1192
margin-bottom: $container_padding * 2;
1193
}
1194
// reset button margins of the spinbutton
1196
spinbutton button {
1197
margin-top: 0;
1198
margin-bottom: 0;
1199
}
1200
}
1201
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1203
border-top-left-radius: 2px;
1204
border-top-right-radius: 2px;
1205
}
1206
headerbar { // headerbar border rounding
1208
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1209
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1210
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1212
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1214
&:first-child, &:last-child {
1215
border-top-left-radius: 2px;
1216
border-top-right-radius: 2px;
1217
}
1218
}
1219
}
1220
.titlebar:not(headerbar) {
1222
window.csd > & {
1223
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1224
padding: 0;
1225
background-color: transparent;
1226
background-image: none;
1227
border-style: none;
1228
box-shadow: none;
1229
}
1230
> separator {
1232
background-color: $titlebar_bg_color;
1233
background-image: image($border_color);
1234
}
1235
@extend %titlebar;
1237
}
1238
/************
1241
* Pathbars *
1242
************/
1243
%pathbar_button,
1244
.path-bar button {
1245
padding-left: ($medium_size - 24px) / 2;
1246
padding-right: ($medium_size - 24px) / 2;
1247
label:not(:only-child) {
1249
&:first-child { margin-left: 4px; }
1250
&:last-child { margin-right: 4px; }
1252
}
1253
&.slider-button {
1255
padding-left: (24px - 16px) / 2;
1256
padding-right: (24px - 16px) / 2;
1257
}
1258
:not(headerbar) & {
1260
@extend %flat_button;
1261
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1263
$primary_color 0%,
1264
transparent 0%)
1265
0 0 0 / 0 0 0px;
1266
border-radius: 2px;
1267
&:checked {
1269
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1270
$primary_color 100%,
1271
transparent 0%)
1272
0 0 2 / 0 0 2px;
1273
&, &:disabled { background-color: transparent; }
1275
}
1276
}
1277
}
1278
/**************
1281
* Tree Views *
1282
**************/
1283
treeview.view {
1284
@at-root * {
1285
-GtkTreeView-horizontal-separator: 4;
1286
-GtkTreeView-grid-line-width: 1;
1287
-GtkTreeView-grid-line-pattern: '';
1288
-GtkTreeView-tree-line-width: 1;
1289
-GtkTreeView-tree-line-pattern: '';
1290
-GtkTreeView-expander-size: 16;
1291
}
1292
border-left-color: $fill_color; // this is actually the tree lines color,
1294
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1295
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1297
&:hover, &:active, &:selected { border-radius: 0; }
1299
&.separator {
1301
min-height: 1px + 2px * 2;
1302
color: $border_color;
1303
}
1304
&:drop(active) {
1306
border-style: solid none;
1307
border-width: 1px;
1308
border-color: $accent_color;
1309
&.after { border-top-style: none; }
1311
&.before { border-bottom-style: none; }
1313
}
1314
&.expander {
1316
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1317
-gtk-icon-transform: rotate(-90deg);
1318
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1320
&:checked { -gtk-icon-transform: unset; }
1322
color: $secondary_fg_color;
1324
&:hover, &:active { color: $fg_color; }
1326
&:disabled { color: $disabled_secondary_fg_color; }
1328
&:selected {
1330
color: $secondary_inverse_fg_color;
1331
&:hover, &:active { color: $inverse_fg_color; }
1333
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1335
}
1336
}
1337
&.progressbar { // progress bar in treeviews
1339
border-bottom: $bar_size solid $primary_color;
1340
box-shadow: none;
1341
background-color: transparent;
1342
&:selected { border-bottom-color: $inverse_fg_color; }
1344
}
1345
&.trough { // progress bar trough in treeviews
1347
border-bottom: $bar_size solid rgba($primary_color, $lower_opacity);
1348
box-shadow: none;
1349
background-color: transparent;
1350
&:selected { border-bottom-color: $inverse_track_color; }
1352
}
1353
header {
1355
button {
1356
@extend row.activatable;
1357
padding: 2px 6px;
1359
border-style: none solid solid none;
1360
border-width: 1px;
1361
border-color: $border_color;
1362
border-radius: 0;
1363
background-clip: border-box;
1364
&, &:hover, &:active { box-shadow: none; }
1366
&, &:disabled { background-color: $base_color; }
1368
&:last-child { border-right-style: none; }
1370
}
1371
}
1372
button.dnd,
1374
header.button.dnd { // for treeview-like derive widgets
1375
padding: 2px 6px;
1376
border-style: none solid solid;
1377
border-width: 1px;
1378
border-color: $border_color;
1379
border-radius: 0;
1380
box-shadow: none;
1381
background-color: $base_color;
1382
background-clip: border-box;
1383
color: $primary_color;
1384
}
1385
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1387
}
1388
/*********
1391
* Menus *
1392
*********/
1393
menubar,
1394
.menubar {
1395
-GtkWidget-window-dragging: true;
1396
padding: 0;
1397
// box-shadow: inset 0 -1px $border_color;
1398
background-color: $titlebar_bg_color;
1399
> menuitem {
1401
transition: $shorter_transition;
1402
min-height: 20px;
1403
padding: 4px 8px;
1404
color: $secondary_titlebar_fg_color;
1405
&:hover { // Seems like it :hover even with keyboard focus
1407
transition: none;
1408
background-color: $titlebar_divider_color;
1409
color: $titlebar_fg_color;
1410
}
1411
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1413
}
1414
}
1415
.csd.popup { background-color: transparent; }
1417
menu,
1419
.menu,
1420
.context-menu {
1421
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1422
padding: 4px 0;
1423
box-shadow: inset 0 1px $highlight_color;
1424
background-color: $base_color;
1425
border: 1px solid $border_color; // adds borders in a non composited env
1426
.csd & {
1428
border: none; // axes borders in a composited env
1429
border-radius: 2px;
1430
}
1431
menuitem {
1433
transition: $shorter_transition;
1434
min-height: 20px;
1435
min-width: 40px;
1436
padding: 4px 8px;
1437
font: initial;
1438
text-shadow: none;
1439
&:hover {
1441
transition: none;
1442
background-color: $divider_color;
1443
}
1444
&:disabled { color: $disabled_fg_color; }
1446
// submenu indicators
1448
arrow {
1449
min-height: 16px;
1450
min-width: 16px;
1451
&:dir(ltr) {
1453
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1454
margin-left: 8px;
1455
}
1456
&:dir(rtl) {
1458
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1459
margin-right: 8px;
1460
}
1461
}
1462
// avoids labels color being overridden, see
1464
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1465
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1466
}
1467
// overflow arrows
1469
> arrow {
1470
min-height: 16px;
1471
min-width: 16px;
1472
padding: 4px;
1473
background-color: $base_color;
1474
color: $secondary_fg_color;
1475
&.top {
1477
margin-top: -4px;
1478
border-bottom: 1px solid $border_color;
1479
border-radius: 2px 2px 0 0;
1480
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1481
}
1482
&.bottom {
1484
margin-bottom: -4px * 3;
1485
border-top: 1px solid $border_color;
1486
border-radius: 0 0 2px 2px;
1487
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1488
}
1489
&:hover {
1491
background-image: image($divider_color);
1492
color: $fg_color;
1493
}
1494
&:disabled {
1496
border-color: transparent;
1497
background-color: transparent;
1498
color: transparent;
1499
// color: $disabled_secondary_fg_color;
1500
}
1501
}
1502
separator { margin: 4px 0; }
1504
}
1505
menuitem {
1507
accelerator { color: $secondary_fg_color; }
1508
}
1509
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1511
// Electron/Atom render all translucent colors in opaque colors.
1512
// It's a very critical issue for this theme and should be fixed by upstream...
1513
.popup:not(.csd) menu {
1514
$opaque_fg_color: if($variant == 'light', $grey_900, $white);
1515
$opaque_divider_color: if($variant == 'light', $grey_300, mix($white, $base_color, percentage(0.12)));
1516
$opaque_disabled_fg_color: if($variant == 'light', $grey_500, mix($white, $base_color, percentage(0.5)));
1517
$opaque_secondary_fg_color: if($variant == 'light', $grey_600, mix($white, $base_color, percentage(0.7)));
1518
menuitem {
1520
color: $opaque_fg_color;
1521
&:hover { background-color: $opaque_divider_color; }
1523
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1525
}
1526
// TODO: not working this, where/how i can set the accelerators?
1528
accelerator { color: $opaque_secondary_fg_color; }
1529
}
1530
/************
1533
* Popovers *
1534
************/
1535
popover.background {
1536
transition: $shadow_transition;
1537
padding: 2px;
1538
box-shadow: $shadow_2; // TODO: this should really have a highlight
1539
background-color: $lighter_bg_color;
1540
&:backdrop { box-shadow: $shadow_1; }
1542
&, .csd & {
1544
border-style: solid;
1545
border-width: 1px;
1546
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1547
border-radius: 2px + 1px;
1548
}
1549
> stack { margin: -4px; } // remove extra padding from menu style popovers
1551
> toolbar { margin: -2px; }
1553
> list,
1555
> .view,
1556
> toolbar {
1557
border-style: none;
1558
box-shadow: none;
1559
background-color: transparent;
1560
}
1561
&.touch-selection,
1563
&.magnifier,
1564
&.osd { @extend %osd; }
1565
// entry { @extend %entry.flat; }
1567
// button.combo { @extend %combo_flat; }
1569
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1571
&.menu button,
1573
button.model {
1574
@extend %simple_flat_button;
1575
min-height: 32px;
1577
padding: 0 8px;
1578
border-radius: 2px;
1579
&:checked { @extend %selected_items; }
1581
}
1582
separator { margin: 4px 0; }
1584
list separator { margin: 0; }
1586
}
1587
/*************
1589
* Notebooks *
1590
*************/
1591
notebook {
1592
> header {
1593
border-width: 1px;
1594
border-color: $border_color;
1595
background-color: $bg_color;
1596
background-clip: border-box;
1597
&.top {
1599
border-bottom-style: solid;
1600
> tabs {
1601
margin-bottom: -1px;
1602
> tab {
1603
&:hover { box-shadow: inset 0 -2px $track_color; }
1605
&:checked { box-shadow: inset 0 -2px $primary_color; }
1607
}
1608
}
1609
}
1610
&.bottom {
1612
border-top-style: solid;
1613
> tabs {
1614
margin-top: -1px;
1615
> tab {
1616
&:hover { box-shadow: inset 0 2px $track_color; }
1618
&:checked { box-shadow: inset 0 2px $primary_color; }
1620
}
1621
}
1622
}
1623
&.left {
1625
border-right-style: solid;
1626
> tabs {
1627
margin-right: -1px;
1628
> tab {
1629
&:hover { box-shadow: inset -2px 0 $track_color; }
1631
&:checked { box-shadow: inset -2px 0 $primary_color; }
1633
}
1634
}
1635
}
1636
&.right {
1638
border-left-style: solid;
1639
> tabs {
1640
margin-left: -1px;
1641
> tab {
1642
&:hover { box-shadow: inset 2px 0 $track_color; }
1644
&:checked { box-shadow: inset 2px 0 $primary_color; }
1646
}
1647
}
1648
}
1649
&.top > tabs > arrow {
1651
@extend %notebook_vert_arrows;
1652
border-top-style: none;
1654
}
1655
&.bottom > tabs > arrow {
1657
@extend %notebook_vert_arrows;
1658
border-bottom-style: none;
1660
}
1661
@at-root %notebook_vert_arrows {
1663
padding-left: 4px;
1664
padding-right: 4px;
1665
&.down {
1667
margin-left: -8px;
1668
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1669
}
1670
&.up {
1672
margin-right: -8px;
1673
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1674
}
1675
}
1676
&.left > tabs > arrow {
1678
@extend %notebook_horz_arrows;
1679
border-left-style: none;
1681
}
1682
&.right > tabs > arrow {
1684
@extend %notebook_horz_arrows;
1685
border-right-style: none;
1687
}
1688
@at-root %notebook_horz_arrows {
1690
padding-top: 4px;
1691
padding-bottom: 4px;
1692
&.down {
1694
margin-top: -8px;
1695
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1696
}
1697
&.up {
1699
margin-bottom: -8px;
1700
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1701
}
1702
}
1703
> tabs > arrow {
1705
@extend %simple_flat_button;
1706
min-height: 16px;
1708
min-width: 16px;
1709
border-radius: 0;
1710
}
1711
tab {
1713
transition: $longer_transition,
1714
background-size 0,
1715
background-image 0;
1716
min-height: $small_size;
1717
min-width: $small_size;
1718
padding: $container_padding 12px;
1719
outline-offset: -6px;
1721
border-width: 1px; // for reorderable tabs
1723
border-color: transparent; //
1724
background-image: radial-gradient(circle farthest-corner at center,
1726
$primary_color 10%,
1727
transparent 0%);
1728
background-repeat: no-repeat;
1729
background-position: center;
1730
background-size: 0% 0%;
1731
color: $secondary_fg_color;
1733
font-weight: 500;
1734
&:hover {
1736
color: $fg_color;
1737
&.reorderable-page {
1739
border-color: $border_color;
1740
background-color: $alt_base_color;
1741
}
1742
}
1743
&:disabled { color: $disabled_secondary_fg_color; }
1745
&:checked {
1747
transition: $longer_transition,
1748
background-size $longer_duration $deceleration_curve,
1749
background-image $longer_duration + $ripple_duration $deceleration_curve;
1750
background-image: radial-gradient(circle farthest-corner at center,
1751
transparent 10%,
1752
transparent 0%);
1753
background-size: 1000% 1000%;
1754
color: $fg_color;
1755
&:disabled { color: $disabled_fg_color; }
1757
&.reorderable-page {
1759
border-color: $border_color;
1760
background-color: $base_color;
1761
}
1762
}
1763
// colors the button like the label, overridden otherwise
1765
button.flat {
1766
@extend %small_button;
1767
&:last-child {
1769
margin-left: $container_padding;
1770
margin-right: $container_padding - 12px;
1771
}
1772
&:first-child {
1774
margin-left: $container_padding - 12px;
1775
margin-right: $container_padding;
1776
}
1777
}
1778
}
1779
&.top,
1781
&.bottom {
1782
tabs {
1783
padding-left: 8px;
1784
padding-right: 8px;
1785
&:not(:only-child) {
1787
&:first-child { margin-left: 0; }
1788
&:last-child { margin-right: 0; }
1789
}
1790
tab {
1792
&.reorderable-page {
1793
margin: 0 -1px;
1794
border-style: none solid;
1795
}
1796
}
1797
}
1798
}
1799
&.left,
1801
&.right {
1802
tabs {
1803
padding-top: 8px;
1804
padding-bottom: 8px;
1805
&:not(:only-child) {
1807
&:first-child { margin-top: 0; }
1808
&:last-child { margin-bottom: 0; }
1809
}
1810
tab {
1812
&.reorderable-page {
1813
margin: -1px 0;
1814
border-style: solid none;
1815
}
1816
}
1817
}
1818
}
1819
}
1820
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1822
background-color: $base_color;
1823
entry:not(.search),
1825
spinbutton:not(.vertical) { @extend %entry.flat; }
1826
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1828
button.combo { @extend %combo_flat; }
1830
}
1831
}
1832
/**************
1835
* Scrollbars *
1836
**************/
1837
scrollbar {
1838
$_slider_min_length: 24px;
1839
// disable steppers
1841
@at-root * {
1842
-GtkScrollbar-has-backward-stepper: false;
1843
-GtkScrollbar-has-forward-stepper: false;
1844
}
1845
transition: $longer_transition;
1847
background-color: $base_color;
1848
background-clip: $extra_background_clip;
1849
// scrollbar border
1851
&.top { border-bottom: 1px solid $border_color; }
1852
&.bottom { border-top: 1px solid $border_color; }
1853
&.left { border-right: 1px solid $border_color; }
1854
&.right { border-left: 1px solid $border_color; }
1855
// slider
1857
slider {
1858
transition: $shorter_transition, margin 0, border-width 0;
1859
min-width: 8px;
1860
min-height: 8px;
1861
border: 4px solid transparent;
1862
border-radius: $circular_radius;
1863
background-clip: padding-box;
1864
background-color: $tertiary_fg_color;
1865
&:hover { background-color: $secondary_fg_color; }
1867
&:active { background-color: $fg_color; }
1869
&:disabled { background-color: $disabled_secondary_fg_color; }
1871
}
1872
&.fine-tune {
1874
slider {
1875
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1876
min-width: 4px;
1877
min-height: 4px;
1878
}
1879
&.horizontal slider { margin: 2px 0; }
1881
&.vertical slider { margin: 0 2px; }
1883
}
1884
&.overlay-indicator {
1886
&:not(.dragging):not(.hovering) {
1887
border-color: transparent;
1888
background-color: transparent;
1889
slider {
1891
min-width: 4px;
1892
min-height: 4px;
1893
margin: 4px - 1px;
1894
border: 1px solid rgba($base_color, $lower_opacity);
1895
}
1896
button {
1898
min-width: 4px;
1899
min-height: 4px;
1900
margin: 4px - 1px;
1901
border: 1px solid rgba($base_color, $lower_opacity);
1902
border-radius: $circular_radius;
1903
background-color: $tertiary_fg_color;
1904
background-clip: padding-box;
1905
-gtk-icon-source: none;
1906
&:disabled { background-color: $disabled_secondary_fg_color; }
1908
}
1909
&.horizontal {
1911
slider { min-width: $_slider_min_length; }
1912
button { min-width: 8px; }
1914
}
1915
&.vertical {
1917
slider { min-height: $_slider_min_length; }
1918
button { min-height: 8px; }
1920
}
1921
}
1922
&.dragging,
1924
&.hovering { background-color: rgba($base_color, $higher_opacity); }
1925
}
1926
&.horizontal slider { min-width: $_slider_min_length; }
1928
&.vertical slider { min-height: $_slider_min_length; }
1930
// button styling
1932
button {
1933
@extend %simple_flat_button;
1934
min-width: 16px;
1936
min-height: 16px;
1937
padding: 0;
1938
border-radius: 0;
1939
}
1940
// button icons
1942
&.vertical {
1943
button {
1944
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1945
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1947
}
1948
}
1949
&.horizontal {
1951
button {
1952
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1953
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1955
}
1956
}
1957
}
1958
/**********
1961
* Switch *
1962
**********/
1963
switch {
1964
transition: $longer_transition;
1965
margin: $container_padding 0;
1966
padding: 0 2px;
1967
border: 4px solid transparent;
1968
border-radius: $circular_radius;
1969
background-color: $track_color;
1970
background-clip: padding-box;
1971
font-size: 0;
1972
&:disabled { background-color: $divider_color; }
1974
&:checked {
1976
background-color: rgba($accent_color, 0.5);
1977
&:disabled { background-color: rgba($accent_color, 0.3); }
1979
}
1980
slider {
1982
transition: $longer_transition, $shadow_transition;
1983
min-width: 20px;
1984
min-height: 20px;
1985
margin: -3px -2px;
1986
border-radius: $circular_radius;
1987
-gtk-outline-radius: $circular_radius;
1988
box-shadow: $shadow_1;
1989
background-color: $base_color;
1990
}
1991
&:hover slider { box-shadow: $shadow_2; }
1993
&:checked slider {
1995
transition: $longer_transition, $shadow_transition, background-image 0, background-color 0.00001s $longer_duration;
1996
animation: needs_attention $longer_duration $deceleration_curve;
1997
background-color: $accent_color;
1998
color: $inverse_fg_color;
1999
}
2000
&:disabled slider { background-color: $alt_base_color; }
2002
&:checked:disabled slider { animation: none; }
2004
row:selected & {
2006
}
2007
}
2008
/*************************
2011
* Check and Radio items *
2012
*************************/
2013
// draw regular check and radio items using our PNG assets
2014
// all assets are rendered from assets.svg. never add pngs directly
2015
// selection-mode
2017
.view.content-view.check:not(list),
2018
.content-view .tile check:not(list) {
2019
min-height: 40px;
2020
min-width: 40px;
2021
margin: 0;
2022
padding: 0;
2023
box-shadow: none;
2024
background-color: transparent;
2025
background-image: none;
2026
-gtk-icon-shadow: $shadow_1;
2027
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2029
@each $s, $as in ('', '-unchecked'),
2031
(':checked', '-checked') {
2032
&#{$s} {
2033
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2034
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2035
}
2036
}
2037
}
2038
checkbutton.text-button,
2040
radiobutton.text-button {
2041
// this is for a nice focus on check and radios text
2042
padding: 2px;
2043
outline-offset: 0;
2044
label:not(:only-child) { margin: 0 4px; }
2046
}
2047
check,
2049
radio {
2050
min-height: 24px;
2051
min-width: 24px;
2052
margin: -($large_size - 24px) / 2;
2053
padding: ($large_size - 24px) / 2;
2054
@extend %simple_flat_button;
2056
@extend %circular_button;
2058
&:checked, &:indeterminate {
2060
color: $accent_color;
2061
&:disabled { color: $disabled_accent_color; }
2063
}
2064
// &:only-child { margin: -12px; }
2066
row:selected &:not(:checked):not(:indeterminate) {
2068
color: $secondary_inverse_fg_color;
2069
&:hover, &:active { color: $inverse_fg_color; }
2071
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2073
}
2074
popover & {
2076
&, &:hover, &:disabled {
2077
box-shadow: none;
2078
background-image: none;
2079
}
2080
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2082
&.left:dir(rtl) {
2084
margin-left: -16px;
2085
margin-right: -8px;
2086
}
2087
&.right:dir(ltr) {
2089
margin-left: -8px;
2090
margin-right: -16px;
2091
}
2092
}
2093
menu menuitem & {
2095
transition: none;
2096
min-height: 16px;
2097
min-width: 16px;
2098
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2099
padding: 0;
2100
&:dir(ltr) { margin-right: 8px; }
2102
&:dir(rtl) { margin-left: 8px; }
2104
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2106
&, &:hover, &:disabled {
2108
box-shadow: none;
2109
// color: inherit;
2110
}
2111
}
2112
}
2113
%check,
2115
check {
2116
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2117
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2118
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2120
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2121
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2123
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2124
}
2125
%radio,
2127
radio {
2128
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2129
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2130
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2132
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2133
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2135
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2136
border-image-slice: $large_size / 2px;
2138
border-image-width: $large_size / 2;
2139
$radio_indicator: 10px / $large_size / 2;
2141
& {
2143
border-image-source: -gtk-gradient(radial,
2144
center center, 0,
2145
center center, 0.001,
2146
to($accent_color),
2147
to(transparent));
2148
}
2149
&:checked:not(:indeterminate) {
2151
border-image-source: -gtk-gradient(radial,
2152
center center, 0,
2153
center center, $radio_indicator,
2154
to($accent_color),
2155
to(transparent));
2156
}
2157
&:checked:not(:indeterminate):disabled {
2159
border-image-source: -gtk-gradient(radial,
2160
center center, 0,
2161
center center, $radio_indicator,
2162
to($disabled_accent_color),
2163
to(transparent));
2164
}
2165
}
2166
%small_check,
2168
menu menuitem check {
2169
& {
2170
border-radius: 2px;
2171
-gtk-outline-radius: 2px;
2172
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2173
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2174
}
2175
&:checked {
2177
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2178
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2179
}
2180
&:indeterminate {
2182
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2183
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2184
}
2185
}
2186
%small_radio,
2188
menu menuitem radio {
2189
& {
2190
border-image: none;
2191
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2192
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2193
}
2194
&:checked {
2196
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2197
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2198
}
2199
&:indeterminate {
2201
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2202
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2203
}
2204
}
2205
// ANIMATION:
2207
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2208
// the transformation is set on the active state and it get reset on the checked state.
2209
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2210
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2212
check:not(:checked):indeterminate:active,
2214
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2215
check:not(:checked),
2217
radio:not(:checked) {
2218
& {
2219
transition: $longer_transition,
2220
background-size $ripple_duration $deceleration_curve,
2221
background-image $ripple_duration * 2 $deceleration_curve,
2222
-gtk-icon-transform 0;
2223
}
2224
&:active {
2226
transition: $longer_transition,
2227
background-size 0,
2228
background-image 0,
2229
-gtk-icon-transform 0;
2230
}
2231
menu menuitem & { transition: none; }
2233
}
2234
treeview.view check,
2236
treeview.view radio {
2237
padding: 0;
2238
&:hover {
2240
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2241
&:disabled { box-shadow: none; }
2243
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2245
}
2246
& {
2248
color: $secondary_fg_color;
2249
&:hover, &:active { color: $fg_color; }
2251
&:disabled { color: $disabled_secondary_fg_color; }
2253
&:checked, &:indeterminate { color: $accent_color; }
2255
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2257
}
2258
&:selected {
2260
color: $secondary_inverse_fg_color;
2261
&:hover, &:active { color: $inverse_fg_color; }
2263
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2265
&:checked, &:indeterminate { color: $accent_color; }
2267
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2269
}
2270
}
2271
treeview.view radio:checked {
2273
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2274
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2275
border-image: none;
2276
}
2277
/************
2280
* GtkScale *
2281
************/
2282
scale {
2283
// sizing
2284
$_marks_length: 8px;
2285
$_marks_distance: 8px;
2286
$trough_size: 2px;
2288
$slider_size: 24px;
2290
$marks_slider_size: 30px;
2291
$slider_margin: -($slider_size - $trough_size) / 2;
2293
$marks_slider_margin: -($marks_slider_size - $trough_size) - $slider_margin;
2294
$color_slider_margin: -($slider_size) / 2;
2296
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2297
min-height: $medium_size - $slider_size;
2299
min-width: $medium_size - $slider_size;
2300
padding: ($slider_size / 2);
2301
* { transition: $longer_transition; }
2303
// the slider is inside the trough, so to have make it bigger there's a negative margin
2305
slider {
2306
min-height: $slider_size;
2307
min-width: $slider_size;
2308
margin: $slider_margin;
2309
}
2310
// the backing bit
2312
trough {
2313
outline-offset: 2px;
2314
background-color: $track_color;
2315
&:disabled { background-color: $divider_color; }
2317
}
2318
// the colored part of the backing bit
2320
highlight {
2321
background-color: $accent_color;
2322
&:disabled { background-color: transparent; }
2324
}
2325
// this is another differently styled part of the backing bit, the most relevant use case is for example
2327
// in media player to indicate how much video stream as been cached
2328
fill {
2329
background-color: $track_color;
2330
&:disabled { background-color: transparent; }
2332
}
2333
slider {
2335
transition: all $shorter_duration $standard_curve;
2336
// border-radius: 100%;
2337
// background-color: $accent_color;
2338
background-repeat: no-repeat;
2339
background-position: center;
2340
@each $s, $as in ('', ''),
2342
(':disabled', '-disabled') {
2343
&#{$s} {
2344
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2345
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2347
}
2348
}
2349
background-size: calc(100% - 10px);
2351
&:hover { background-size: calc(100% - 8px); }
2353
&:active { background-size: calc(100% - 6px); }
2355
}
2356
// click-and-hold the slider to activate
2358
&.fine-tune {
2359
// to make the slider shrink in fine-tune mode
2360
slider { background-size: calc(100% - 12px); }
2361
}
2362
value { color: $tertiary_fg_color; }
2364
marks {
2366
color: $track_color;
2367
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2369
(bottom, bottom, top),
2370
(top, left, right),
2371
(bottom, right, left) {
2372
&.#{$marks_class} {
2373
margin-#{$marks_margin}: $_marks_distance;
2374
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2375
}
2376
}
2377
}
2378
&.horizontal {
2380
indicator {
2381
min-height: $_marks_length;
2382
min-width: 1px;
2383
}
2384
}
2385
&.vertical {
2387
indicator {
2388
min-height: 1px;
2389
min-width: $_marks_length;
2390
}
2391
}
2392
// *WARNING* scale with marks madness following
2394
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2396
('vertical', 'vert') {
2397
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2398
('marks-after', 'marks-after:not(.marks-before)') {
2399
&.#{$dir_class}.#{$marks_class} {
2400
slider {
2401
@each $state, $state_infix in ('', ''),
2402
(':disabled', '-disabled') {
2403
&#{$state} {
2404
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2405
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2407
}
2408
}
2409
@if $dir_class == 'horizontal' {
2411
min-height: $marks_slider_size;
2412
min-width: $slider_size;
2413
@if $marks_infix == 'marks-before' {
2415
margin-top: $marks_slider_margin;
2416
background-position: center calc(100% - 5px);
2418
&:hover { background-position: center calc(100% - 4px); }
2420
&:active { background-position: center calc(100% - 3px); }
2422
}
2423
@if $marks_infix == 'marks-after' {
2425
margin-bottom: $marks_slider_margin;
2426
background-position: center calc(5px);
2428
&:hover { background-position: center calc(4px); }
2430
&:active { background-position: center calc(3px); }
2432
}
2433
}
2434
@if $dir_class == 'vertical' {
2436
min-height: $slider_size;
2437
min-width: $marks_slider_size;
2438
@if $marks_infix == 'marks-before' {
2440
margin-left: $marks_slider_margin;
2441
background-position: calc(5px) center;
2443
&:hover { background-position: calc(4px) center; }
2445
&:active { background-position: calc(3px) center; }
2447
}
2448
@if $marks_infix == 'marks-after' {
2450
margin-right: $marks_slider_margin;
2451
background-position: calc(100% - 5px) center;
2453
&:hover { background-position: calc(100% - 4px) center; }
2455
&:active { background-position: calc(100% - 3px) center; }
2457
}
2458
}
2459
}
2460
&.fine-tune slider {
2462
@if $dir_class == 'horizontal' {
2463
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2464
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2466
}
2467
@if $dir_class == 'vertical' {
2469
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2470
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2472
}
2473
}
2474
}
2475
}
2476
}
2477
&.color {
2479
min-height: 0;
2480
min-width: 0;
2481
&.horizontal {
2483
padding: 0 0 12px 0;
2484
slider {
2486
&:dir(ltr), &:dir(rtl) { // specificity bump
2487
margin-bottom: $color_slider_margin;
2488
margin-top: $color_marks_slider_margin;
2489
}
2490
}
2491
}
2492
&.vertical {
2494
&:dir(ltr) {
2495
padding: 0 0 0 12px;
2496
slider {
2498
margin-left: $color_slider_margin;
2499
margin-right: $color_marks_slider_margin;
2500
}
2501
}
2502
&:dir(rtl) {
2504
padding: 0 12px 0 0;
2505
slider {
2507
margin-right: $color_slider_margin;
2508
margin-left: $color_marks_slider_margin;
2509
}
2510
}
2511
}
2512
}
2513
}
2514
/*****************
2517
* Progress bars *
2518
*****************/
2519
progressbar {
2520
// sizing
2521
&.horizontal {
2522
trough,
2523
progress { min-height: $bar_size; }
2524
}
2525
&.vertical {
2527
trough,
2528
progress { min-width: $bar_size; }
2529
}
2530
// FIXME: insensitive state missing and some other state should be set probably
2532
color: $tertiary_fg_color;
2533
font-size: smaller;
2534
trough { background-color: rgba($primary_color, $lower_opacity); }
2536
progress { background-color: $primary_color; }
2538
&.osd { // progressbar.osd used for epiphany page loading progress
2540
// min-width: $bar_size;
2541
// min-height: $bar_size;
2542
// background-color: transparent;
2543
// trough { background-color: transparent; }
2545
// progress { background-color: $primary_color; }
2547
}
2548
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2550
}
2551
/*************
2554
* Level Bar *
2555
*************/
2556
levelbar {
2557
block {
2558
min-width: $medium_size;
2559
min-height: $bar_size;
2560
}
2561
&.vertical block {
2563
min-width: $bar_size;
2564
min-height: $medium_size;
2565
}
2566
// imitate the entry style
2568
trough {
2569
padding: 2px;
2570
border-radius: 2px;
2571
box-shadow: $shadow_1;
2572
background-color: $base_color;
2573
&:disabled { background-color: $alt_base_color; }
2575
}
2576
&.horizontal.discrete {
2578
block { margin: 0 1px; }
2579
trough { padding: 2px 1px; }
2581
}
2582
&.vertical.discrete {
2584
block { margin: 1px 0; }
2585
trough { padding: 1px 2px; }
2587
}
2588
block {
2590
&.low { background-color: $warning_color; }
2591
&.high,
2593
&:not(.empty) { background-color: $primary_color; }
2594
&.full { background-color: $success_color; }
2596
&.empty { background-color: $divider_color; }
2598
}
2599
}
2600
/****************
2603
* Print dialog *
2604
*****************/
2605
printdialog {
2606
paper {
2607
padding: 0;
2608
border: 1px solid $border_color;
2609
background-color: $base_color;
2610
color: $fg_color;
2611
}
2612
.dialog-action-box { margin: 12px; }
2614
}
2615
/**********
2618
* Frames *
2619
**********/
2620
frame > border,
2621
.frame {
2622
margin: 0;
2623
padding: 0;
2624
border: 1px solid $border_color;
2625
border-radius: 0;
2626
box-shadow: none;
2627
&.flat { border-style: none; }
2629
}
2630
frame.flat > border { @extend .frame.flat; } // for backporting
2632
actionbar > revealer > box {
2634
padding: $container_padding;
2635
border-top: 1px solid $border_color;
2636
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2638
}
2639
scrolledwindow {
2641
viewport.frame { // avoid double borders when viewport inside scrolled window
2642
border-style: none;
2643
}
2644
// This is used when content is touch-dragged past boundaries.
2646
// draws a box on top of the content, the size changes programmatically.
2647
@at-root overshoot {
2648
&.top { @include overshoot(top); }
2649
&.bottom { @include overshoot(bottom); }
2651
&.left { @include overshoot(left); }
2653
&.right { @include overshoot(right); }
2655
}
2656
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2658
@at-root undershoot {
2659
&.top { @include undershoot(top); }
2660
&.bottom { @include undershoot(bottom); }
2662
&.left { @include undershoot(left); }
2664
&.right { @include undershoot(right); }
2666
}
2667
@at-root junction { // the small square between two scrollbars
2669
border-style: solid none none solid;
2670
border-width: 1px;
2671
border-color: $border_color;
2672
background-color: $base_color;
2673
&:dir(rtl) { border-style: solid solid none none; }
2675
}
2676
}
2677
// vbox and hbox separators
2679
separator {
2680
min-width: 1px;
2681
min-height: 1px;
2682
background-color: $border_color;
2683
}
2684
%hide_separators {
2686
min-width: 0;
2687
min-height: 0;
2688
background-color: transparent;
2689
}
2690
/*********
2693
* Lists *
2694
*********/
2695
list {
2696
border-color: $border_color;
2697
background-color: $base_color;
2698
row { padding: 2px; }
2700
}
2701
// FIXME
2703
$row_transition: $longer_transition, background-color 0, color 0;
2704
row {
2706
&.activatable {
2707
transition: $row_transition,
2708
background-size $ripple_duration $deceleration_curve,
2709
background-image $ripple_duration * 2 $deceleration_curve;
2710
box-shadow: inset 0 0 0 9999px transparent;
2711
background-image: radial-gradient(circle farthest-corner at center,
2712
transparent 10%,
2713
transparent 0%);
2714
background-repeat: no-repeat;
2715
background-position: center;
2716
background-size: 1000% 1000%;
2717
&:hover {
2719
transition: $row_transition,
2720
box-shadow 0,
2721
background-size $ripple_duration $deceleration_curve,
2722
background-image $ripple_duration * 2 $deceleration_curve;
2723
box-shadow: inset 0 0 0 9999px $row_fill_color;
2724
}
2725
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2727
&:active {
2728
transition: $row_transition,
2729
background-size 0,
2730
background-image 0;
2731
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2732
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2733
background-image: radial-gradient(circle farthest-corner at center,
2734
$semi_fill_color 10%,
2735
transparent 0%);
2736
background-size: 0% 0%;
2737
}
2738
}
2739
&:selected { @extend %selected_items; }
2741
}
2742
/*********************
2745
* App Notifications *
2746
*********************/
2747
.app-notification {
2748
@extend %osd;
2749
@extend toolbar.osd;
2751
margin: 8px;
2753
button { @extend %button_basic.flat; }
2755
&.frame,
2757
border { border-style: none; }
2758
}
2759
/*************
2762
* Expanders *
2763
*************/
2764
expander {
2765
arrow {
2766
transition: all $shorter_duration $standard_curve;
2767
min-width: 16px;
2768
min-height: 16px;
2769
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2770
-gtk-icon-transform: rotate(-90deg);
2771
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2773
&:checked { -gtk-icon-transform: unset; }
2775
color: $secondary_fg_color;
2777
&:hover, &:active { color: $fg_color; }
2779
&:disabled { color: $disabled_secondary_fg_color; }
2781
&:selected {
2783
color: $secondary_inverse_fg_color;
2784
&:hover, &:active { color: $inverse_fg_color; }
2786
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2788
}
2789
}
2790
}
2791
/************
2794
* Calendar *
2795
************/
2796
calendar {
2797
padding: 1px;
2798
border: 1px solid $border_color;
2799
color: $fg_color;
2800
&:disabled { color: $disabled_fg_color; }
2802
&:selected {
2804
@extend %selected_items;
2805
border-radius: 2px + 1px;
2807
}
2808
&.header {
2810
border-style: none none solid;
2811
border-radius: 0;
2812
}
2813
&.button { @extend %simple_flat_button; }
2815
&.highlight {
2817
color: $secondary_fg_color;
2818
font-weight: 500;
2819
}
2820
&:indeterminate { color: $disabled_secondary_fg_color; }
2822
}
2823
/***********
2826
* Dialogs *
2827
***********/
2828
messagedialog { // Message Dialog styling
2829
&.background { background-color: $lighter_bg_color; }
2830
.titlebar {
2832
min-height: $small_size;
2833
border-style: none;
2834
box-shadow: inset 0 1px $highlight_color;
2835
background-color: $lighter_bg_color;
2836
color: $fg_color;
2837
&:backdrop { color: $secondary_fg_color; }
2839
}
2840
&.csd { // rounded bottom border styling for csd version
2842
&.background {
2843
// bigger radius for better antialiasing
2844
border-bottom-left-radius: 2px;
2845
border-bottom-right-radius: 2px;
2846
}
2847
.dialog-action-area button {
2849
padding: 8px 16px;
2850
border-top: 1px solid $border_color;
2851
border-radius: 0;
2852
@extend %simple_flat_button;
2854
&:first-child { border-bottom-left-radius: 2px; }
2856
&:last-child { border-bottom-right-radius: 2px; }
2858
}
2859
}
2860
entry { @extend %entry.flat; }
2862
}
2863
filechooser {
2865
.dialog-action-box { border-top: 1px solid $border_color; }
2866
#pathbarbox {
2868
border-bottom: 1px solid $border_color;
2869
background-color: $bg_color;
2870
}
2871
}
2872
filechooserbutton:drop(active) {
2874
box-shadow: none;
2875
}
2876
/***********
2879
* Sidebar *
2880
***********/
2881
.sidebar {
2882
border-style: none;
2883
background-color: $lighter_bg_color;
2884
@at-root %sidebar_left,
2886
&:dir(ltr),
2887
&.left,
2888
&.left:dir(rtl) {
2889
border-right: 1px solid $border_color;
2890
border-left-style: none;
2891
}
2892
@at-root %sidebar_right,
2894
&:dir(rtl),
2895
&.right {
2896
border-left: 1px solid $border_color;
2897
border-right-style: none;
2898
}
2899
list { background-color: transparent; }
2901
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2903
}
2904
stacksidebar {
2906
&.sidebar {
2907
&:dir(ltr),
2908
&.left,
2909
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2910
&:dir(rtl),
2912
&.right { list { @extend %sidebar_right; }}
2913
}
2914
row {
2916
padding: 10px 4px;
2917
> label {
2919
padding-left: 6px;
2920
padding-right: 6px;
2921
}
2922
&.needs-attention > label { @extend %needs_attention; }
2924
}
2925
}
2926
/****************
2929
* File chooser *
2930
****************/
2931
placessidebar {
2932
> viewport.frame { border-style: none; }
2933
list { padding: (4px - 3px) 0 4px; }
2935
row {
2937
// Needs overriding of the GtkListBoxRow padding
2938
min-height: 32px;
2939
margin: -1px 0; // Remove unknown margins
2940
padding: 0;
2941
// Using margins/padding directly in the SidebarRow
2943
// will make the animation of the new bookmark row jump
2944
> revealer { padding: 0 12px; }
2945
&:selected { color: $inverse_fg_color; }
2947
&:disabled { color: $disabled_fg_color; }
2949
image.sidebar-icon {
2951
color: $secondary_fg_color; // dim the device icons
2952
&:dir(ltr) { padding-right: 8px; }
2954
&:dir(rtl) { padding-left: 8px; }
2955
}
2956
&:selected image.sidebar-icon { color: $secondary_inverse_fg_color; }
2958
label.sidebar-label {
2960
&:dir(ltr) { padding-right: 2px; }
2961
&:dir(rtl) { padding-left: 2px; }
2962
}
2963
@at-root button.sidebar-button {
2965
@extend %simple_flat_button;
2966
@extend %small_button;
2968
row:selected & {
2970
}
2971
}
2972
&.sidebar-placeholder-row {
2974
min-height: 2px;
2975
padding: 0 8px;
2976
background-image: image($accent_color);
2977
background-clip: content-box;
2978
}
2979
&.sidebar-new-bookmark-row { color: $accent_color; }
2981
&:drop(active):not(:disabled) {
2983
box-shadow: inset 0 0 0 2px $accent_color;
2984
&:selected {
2986
// background-color: $accent_color;
2987
// color: $inverse_fg_color;
2988
}
2989
}
2990
}
2991
}
2992
placesview {
2994
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2995
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2997
// this selects the "connect to server" label
2999
> actionbar > revealer > box > label {
3000
padding-left: 8px;
3001
padding-right: 8px;
3002
}
3003
}
3004
/*********
3007
* Paned *
3008
*********/
3009
paned {
3010
> separator {
3011
min-width: 1px;
3012
min-height: 1px;
3013
-gtk-icon-source: none; // defeats the ugly default handle decoration
3014
border-style: none; // just to be sure
3015
background-color: transparent;
3016
// workaround, using background istead of a border since the border will get rendered twice (?)
3017
background-image: image($border_color);
3018
background-size: 1px 1px;
3019
background-clip: content-box; // avoids borders image being rendered twice (?)
3020
&.wide {
3022
min-width: 6px;
3023
min-height: 6px;
3024
background-color: $bg_color;
3025
background-image: image($border_color), image($border_color);
3026
background-size: 1px 1px, 1px 1px;
3027
}
3028
}
3029
&.horizontal > separator {
3031
background-repeat: repeat-y;
3032
&:dir(ltr) {
3034
margin: 0 -8px 0 0;
3035
padding: 0 8px 0 0;
3036
background-position: left;
3037
}
3038
&:dir(rtl) {
3040
margin: 0 0 0 -8px;
3041
padding: 0 0 0 8px;
3042
background-position: right;
3043
}
3044
&.wide {
3046
margin: 0;
3047
padding: 0;
3048
background-repeat: repeat-y, repeat-y;
3049
background-position: left, right;
3050
}
3051
}
3052
&.vertical > separator {
3054
margin: 0 0 -8px 0;
3055
padding: 0 0 8px 0;
3056
background-repeat: repeat-x;
3057
background-position: top;
3058
&.wide {
3060
margin: 0;
3061
padding: 0;
3062
background-repeat: repeat-x, repeat-x;
3063
background-position: bottom, top;
3064
}
3065
}
3066
}
3067
/**************
3070
* GtkInfoBar *
3071
**************/
3072
infobar {
3073
border-style: none;
3074
&.info { background-color: $info_bg_color; }
3076
&.question { background-color: $question_bg_color; }
3078
&.warning { background-color: $warning_bg_color; }
3080
&.error { background-color: $error_bg_color; }
3082
&.info,
3084
&.question,
3085
&.warning,
3086
&.error {
3087
> label, & { color: $inverse_fg_color; }
3088
button { @extend %button_selected; }
3090
selection {}
3092
*:link { @extend %link_selected; }
3094
}
3095
}
3096
/************
3099
* Tooltips *
3100
************/
3101
tooltip {
3102
&.background {
3103
// background-color needs to be set this way otherwise it gets drawn twice
3104
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3105
box-shadow: inset 0 1px $highlight_color;
3106
background-color: rgba($base_color, $higher_opacity);
3107
}
3108
// @extend %osd;
3110
// padding: 4px; /* not working */
3112
border-radius: 2px;
3113
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3114
&:not(.csd):not(.unity-csd) {
3116
border: 1px solid $border_color;
3117
border-radius: 2px + 1px;
3118
background-clip: $extra_background_clip;
3119
}
3120
// FIXME: we need a border or tooltips vanish on black background.
3122
decoration { background-color: transparent; }
3123
label {
3125
// tooltip label already seems to have 6px margins
3126
min-height: 32px - 6px * 2;
3127
padding: 0 8px - 6px;
3128
}
3129
* {
3131
// workaround for Eclipse.
3132
// do not include any declaration here.
3133
// padding: 0;
3134
// background-color: transparent;
3135
// color: inherit;
3136
}
3137
}
3138
/*****************
3141
* Color Chooser *
3142
*****************/
3143
colorswatch {
3144
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3145
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3146
// applied to the overlay box.
3147
// base color corners rounding
3149
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3150
// sports a bigger radius.
3151
// nth-child is needed by the custom color strip.
3152
&.top {
3154
border-top-left-radius: $material_radius + 0.5px;
3155
border-top-right-radius: $material_radius + 0.5px;
3156
overlay {
3158
border-top-left-radius: $material_radius;
3159
border-top-right-radius: $material_radius;
3160
}
3161
}
3162
&.bottom {
3164
border-bottom-left-radius: $material_radius + 0.5px;
3165
border-bottom-right-radius: $material_radius + 0.5px;
3166
overlay {
3168
border-bottom-left-radius: $material_radius;
3169
border-bottom-right-radius: $material_radius;
3170
}
3171
}
3172
&.left,
3174
&:first-child:not(.top) {
3175
border-top-left-radius: $material_radius + 0.5px;
3176
border-bottom-left-radius: $material_radius + 0.5px;
3177
overlay {
3179
border-top-left-radius: $material_radius;
3180
border-bottom-left-radius: $material_radius;
3181
}
3182
}
3183
&.right,
3185
&:last-child:not(.bottom) {
3186
border-top-right-radius: $material_radius + 0.5px;
3187
border-bottom-right-radius: $material_radius + 0.5px;
3188
overlay {
3190
border-top-right-radius: $material_radius;
3191
border-bottom-right-radius: $material_radius;
3192
}
3193
}
3194
&.dark overlay { color: $light_fg_color; }
3196
&.light overlay { color: $dark_fg_color; }
3198
&.dark { color: $light_fg_color; } // for focus ring
3200
&.light { color: $dark_fg_color; } // for focus ring
3202
&:drop(active) {
3204
box-shadow: none;
3205
&.light overlay {
3207
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3208
}
3209
&.dark overlay {
3211
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3212
}
3213
}
3214
overlay {
3216
transition: $shadow_transition;
3217
box-shadow: $shadow_1;
3218
&:hover { box-shadow: $shadow_2; }
3220
}
3221
&#add-color-button {
3223
border-radius: $material_radius $material_radius 0 0;
3224
color: $light_fg_color; // for focus ring
3225
&:only-child { border-radius: $material_radius; }
3227
overlay {
3229
background-image: linear-gradient(to right,
3230
$error_bg_color 25%,
3231
$warning_bg_color 25%, $warning_bg_color 50%,
3232
$info_bg_color 50%, $info_bg_color 75%,
3233
$question_bg_color 75%);
3234
color: $light_fg_color;
3235
}
3236
}
3237
&:disabled {
3239
opacity: $disabled_opacity;
3240
overlay { box-shadow: none; }
3242
}
3243
row:selected & {
3245
}
3246
&#editor-color-sample {
3248
border-radius: $material_radius + 0.5px;
3249
overlay { border-radius: $material_radius; }
3251
// overlay:hover { box-shadow: $shadow_1; }
3253
}
3254
}
3255
// colorscale popup
3257
colorchooser .popover.osd {
3258
transition: $shadow_transition;
3259
border-radius: 2px;
3260
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3261
background-color: $base_color;
3262
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3264
spinbutton:not(.vertical) { @extend %entry.flat; }
3266
}
3267
/********
3270
* Misc *
3271
********/
3272
// content view (grid/list)
3273
.content-view {
3274
background-color: $bg_color;
3275
// &:hover { -gtk-icon-effect: highlight; }
3277
rubberband, .rubberband { @extend rubberband; }
3279
}
3280
.scale-popup {
3282
.osd & { @extend %osd; }
3283
.osd & button.flat { // FIXME: quick hack, redo properly
3285
}
3286
button { // +/- buttons on GtkVolumeButton popup
3288
}
3289
}
3290
/**********************
3293
* Window Decorations *
3294
**********************/
3295
decoration {
3296
transition: $shadow_transition;
3297
border-radius: 2px 2px 0 0;
3298
box-shadow: $shadow_4, 0 16px 16px transparent;
3299
// FIXME rationalize shadows
3301
// this is used for the resize cursor area
3303
margin: 8px;
3304
&:backdrop {
3306
// the transparent shadow here is to enforce that the shadow extents don't
3307
// change when we go to backdrop, to prevent jumping windows.
3308
// The biggest shadow should be in the same order then in the active state
3309
// or the jumping will happen during the transition.
3310
box-shadow: $shadow_2, 0 16px 16px transparent;
3311
}
3312
.maximized &,
3314
.fullscreen &,
3315
.tiled & { border-radius: 0; }
3316
.popup & { box-shadow: none; }
3318
// server-side decorations as used by mutter
3320
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3321
.csd.popup & {
3323
border-radius: 2px;
3324
box-shadow: $shadow_2;
3325
}
3326
tooltip.csd & {
3328
border-radius: 2px;
3329
box-shadow: $shadow_2;
3330
}
3331
messagedialog.csd & {
3333
border-radius: 2px;
3334
// box-shadow: $shadow_4, 0 16px 16px transparent;
3335
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3337
}
3338
.solid-csd & {
3340
margin: 0;
3341
// padding: 4px;
3342
border-radius: 0;
3343
box-shadow: none;
3344
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3345
background-color: $titlebar_bg_color;
3346
}
3347
}
3348
// Window Close button
3350
button.titlebutton {
3351
// @extend %simple_flat_button;
3352
@extend %circular_button;
3354
.selection-mode & {
3356
}
3357
}
3358
// catch all extend :)
3361
%selected_items {
3363
background-color: $primary_color;
3364
@at-root %nobg_selected_items, & {
3366
color: $inverse_fg_color;
3367
&:disabled { color: $disabled_inverse_fg_color; }
3369
}
3370
}
3371
.monospace { font-family: monospace; }
3373
/**********************
3376
* Touch Copy & Paste *
3377
**********************/
3378
// touch selection handlebars for the Popover.osd above
3379
cursor-handle {
3380
border-radius: $circular_radius;
3381
background-color: $accent_color;
3382
background-image: none;
3383
&.top:dir(ltr), &.bottom:dir(rtl) {
3385
padding-left: 6px;
3386
border-top-right-radius: 0;
3387
}
3388
&.bottom:dir(ltr), &.top:dir(rtl) {
3390
padding-right: 6px;
3391
border-top-left-radius: 0;
3392
}
3393
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3395
-GtkWidget-text-handle-width: 24;
3396
-GtkWidget-text-handle-height: 30;
3397
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3399
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3400
url('#{$_url}@2.png'));
3401
}
3402
}
3403
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3405
// shortcut window keys
3407
.keycap {
3408
min-width: 28px - 8px * 2;
3409
min-height: 28px - 2px;
3410
margin-top: 2px;
3411
padding-bottom: 2px;
3412
padding-left: 8px;
3413
padding-right: 8px;
3414
border: solid 1px $border_color;
3416
border-radius: 2px + 1px;
3417
box-shadow: inset 0 -2px $border_color;
3418
background-color: $base_color;
3419
color: $fg_color;
3420
font-size: smaller;
3421
}
3422
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3424
transition: $longer_transition;
3425
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3426
caret-color: $accent_color;
3427
}
3428
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3430
stackswitcher button.circular,
3432
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3433
min-width: $medium_size;
3434
min-height: $medium_size;
3435
padding: 0;
3436
}
3437