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: $hint_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: $hint_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: $hint_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: $hint_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: $inverse_secondary_fg_color;
288
&:hover, &:active { color: $inverse_fg_color; }
290
&:disabled { color: $inverse_hint_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: $inverse_secondary_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 {
479
background-color: $inverse_divider_color;
480
color: $inverse_disabled_secondary_fg_color;
481
}
482
&.flat {
484
color: $inverse_secondary_fg_color;
485
&:hover, &:active { color: $inverse_fg_color; }
487
&:disabled { color: $inverse_disabled_secondary_fg_color; }
489
&:checked {
491
background-color: $inverse_track_color;
492
color: $inverse_fg_color;
493
}
494
&:checked:disabled {
496
background-color: $inverse_divider_color;
497
color: $inverse_disabled_fg_color;
498
}
499
}
500
}
501
// big standalone buttons like in Documents pager
503
&.osd {
504
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
505
&.image-button { padding: ($large_size - 24px) / 2; }
507
&:disabled { opacity: 0; }
509
}
510
// overlay / OSD style
512
@at-root %osd_button,
513
.osd & {
514
}
515
// Suggested and Destructive Action buttons
517
@each $b_type, $b_color in (suggested-action, $suggested_color),
518
(destructive-action, $destructive_color) {
519
&.#{$b_type} {
520
background-color: $b_color;
521
color: $inverse_fg_color;
522
&:disabled { @include button(disabled, $b_color); }
524
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
526
&.flat {
528
background-color: transparent;
529
color: $b_color;
530
&:disabled { @include button(flat-disabled, $b_color); }
532
&:checked { background-color: rgba($b_color, 0.3); }
534
}
535
.osd & {
537
}
538
}
539
}
540
.stack-switcher > & {
542
// to position the needs attention dot, padding is added to the button
543
// child, a label needs just lateral padding while an icon needs vertical
544
// padding added too.
545
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
547
> label {
549
padding-left: 6px; // label padding
550
padding-right: 6px; //
551
}
552
> image {
554
padding-left: 6px; // image padding
555
padding-right: 6px; //
556
padding-top: 3px; //
557
padding-bottom: 3px; //
558
}
559
&.text-button {
561
// compensate text-button paddings
562
padding-left: 16px - 6px;
563
padding-right: 16px - 6px;
564
}
565
&.image-button {
567
// we want image buttons to have a 1:1 aspect ratio, so compensation
568
// of the padding added to the GtkImage is needed
569
padding-left: ($medium_size - 16px) / 2 - 6px;
570
padding-right: ($medium_size - 16px) / 2 - 6px;
571
}
572
&.needs-attention {
574
> label,
575
> image { @extend %needs_attention; }
576
&:checked {
578
> label,
579
> image {
580
animation: none;
581
background-image: none;
582
}
583
}
584
}
585
}
586
// hide separators
588
&.font,
589
&.file { separator { @extend %hide_separators; }}
590
// &.font { > box > box > label { font-weight: bold; }}
592
// inline-toolbar buttons
594
.inline-toolbar & {
595
// @extend %button_basic.flat;
596
&:not(.text-button) { @extend %circular_button; }
598
}
599
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
601
@at-root %circular_button,
603
&.close,
604
&.circular { // The Bloody Circul Button
605
border-radius: $circular_radius;
606
-gtk-outline-radius: $circular_radius;
607
// label { padding: 0; }
609
}
610
@at-root %small_button {
612
min-height: $small_size;
613
min-width: $small_size;
614
padding: 0;
615
border-radius: $circular_radius;
616
-gtk-outline-radius: $circular_radius;
617
}
618
}
619
%needs_attention {
621
animation: needs_attention $longer_duration $deceleration_curve forwards;
622
background-repeat: no-repeat;
623
background-position: right 3px;
624
background-size: 6px 6px;
625
&:dir(rtl) { background-position: left 3px; }
627
}
628
// all the following is for the +|- buttons on inline toolbars, that way
630
// should really be deprecated...
631
.inline-toolbar toolbutton > button { // redefining the button look is
632
// needed since those are flat...
633
}
634
// More inline toolbar buttons
636
toolbar.inline-toolbar toolbutton {
637
// > button.flat { @extend %linked_middle; }
638
// &:first-child > button.flat { @extend %linked:first-child; }
640
// &:last-child > button.flat { @extend %linked:last-child; }
642
// &:only-child > button.flat { @extend %linked:only-child; }
644
}
645
%linked_middle {
647
border-radius: 0;
648
-gtk-outline-radius: 2px;
649
}
650
%linked {
652
@extend %linked_middle;
653
&:first-child {
655
border-top-left-radius: 2px;
656
border-bottom-left-radius: 2px;
657
}
658
&:last-child {
660
border-top-right-radius: 2px;
661
border-bottom-right-radius: 2px;
662
}
663
&:only-child {
665
border-radius: 2px;
666
}
667
}
668
%linked_vertical_middle {
670
border-radius: 0;
671
-gtk-outline-radius: 2px;
672
}
673
%linked_vertical {
675
@extend %linked_vertical_middle;
676
&:first-child {
678
border-top-left-radius: 2px;
679
border-top-right-radius: 2px;
680
}
681
&:last-child {
683
border-bottom-left-radius: 2px;
684
border-bottom-right-radius: 2px;
685
}
686
&:only-child {
688
border-radius: 2px;
689
}
690
}
691
/* menu buttons */
693
modelbutton.flat,
694
.menuitem.button.flat {
695
min-height: $menuitem_size;
696
padding: 0 8px;
697
border-radius: 2px;
698
color: inherit;
699
@extend %simple_flat_button;
701
&:selected { @extend %selected_items; }
703
}
704
modelbutton.flat arrow {
706
background: none;
707
&:hover { background: none; }
709
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
711
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
713
}
714
button.color {
716
min-height: $small_size;
717
min-width: $small_size;
718
padding: $container_padding;
719
colorswatch:only-child {
721
// &, overlay { border-radius: 0; }
722
}
723
}
724
/*********
727
* Links *
728
*********/
729
*:link {
730
&, &:hover, &:active { color: $link_color; }
731
&:visited {
733
&, &:hover, &:active { color: $visited_link_color; }
734
}
735
@at-root %link_selected,
737
&:selected,
738
*:selected & { color: $inverse_fg_color; }
739
}
740
button:link,
742
button:visited {
743
@extend *:link;
744
> label { text-decoration-line: underline; }
746
}
747
/*****************
749
* GtkSpinButton *
750
*****************/
751
spinbutton {
752
&:not(.vertical) {
753
// in this horizontal configuration, the whole spinbutton
754
// behaves as the entry, so we extend the entry styling
755
// and nuke the style on the internal entry
756
@extend %entry;
757
padding: 0;
759
%spinbutton_entry,
761
entry {
762
min-width: $large_size - 8px * 2;
763
// reset all the other props since the spinbutton node is styled here
764
margin: 0;
765
border-image: none;
766
border-radius: 0;
767
box-shadow: none;
768
background-color: transparent;
769
//
770
// This will help to simplify spinbutton's code, but unfortunatelly
771
// doesn't work properly in :dir(rtl). It needs z-index property.
772
//
773
// min-width: $large_size - 8px;
774
//
775
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
776
//
777
// &:dir(ltr) {
778
// margin-right: -$spinbuttons_width;
779
// padding-right: $spinbuttons_width;
780
// }
781
//
782
// &:dir(rtl) {
783
// margin-left: -$spinbuttons_width;
784
// padding-left: $spinbuttons_width;
785
// }
786
}
787
button {
789
// margin: $container_padding;
790
border: solid $container_padding transparent;
791
@extend %simple_flat_button;
793
@extend %small_button;
795
&.up:dir(ltr),
797
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
798
&.up:dir(rtl),
800
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
801
}
802
}
803
// OSD horizontal
805
.osd &:not(.vertical) {
806
button {
807
}
808
}
809
// Vertical
811
&.vertical {
812
// in the vertical configuration, we treat the spinbutton
813
// as a box, and tweak the style of the entry in the middle
814
// so that it's linked
815
// FIXME: this should not be set at all, but otherwise it gets the wrong
817
// color
818
&:disabled { color: $disabled_fg_color; }
819
&:drop(active) {
821
box-shadow: none;
822
}
823
entry {
825
min-height: $medium_size;
826
min-width: $large_size;
827
padding: 0;
828
}
829
button {
831
min-height: $medium_size;
832
min-width: $large_size;
833
padding: 0;
834
@extend %simple_flat_button;
836
&.up { border-radius: 2px 2px 0 0; }
838
&.down { border-radius: 0 0 2px 2px; }
840
}
841
}
842
// OSD vertical
844
.osd &.vertical button:first-child {
845
}
846
// Misc
848
treeview &:not(.vertical) {
849
min-height: 0;
850
border-style: none;
851
border-radius: 0;
852
entry {
854
min-height: 0;
855
padding: 1px 2px;
856
}
857
}
858
}
859
/**************
862
* ComboBoxes *
863
**************/
864
combobox {
865
arrow {
866
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
867
min-height: 16px;
868
min-width: 16px;
869
}
870
decoration,
872
button.combo:checked { transition: none; } // workaround for menuitem selection
873
button.combo cellview {
875
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
876
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
877
}
878
#gtk-combobox-popup-menu {
880
padding: 2px 0;
881
menuitem {
883
min-height: $medium_size - 2px * 2;
884
padding: 0 8px;
885
}
886
// overflow arrows
888
> arrow {
889
&.top { margin-top: -2px; }
890
&.bottom { margin-bottom: -2px * 3; }
892
}
893
}
894
&.linked {
896
button:nth-child(2) {
897
&:dir(ltr) { @extend %linked:last-child; }
898
&:dir(rtl) { @extend %linked:first-child; }
899
}
900
}
901
&:drop(active) { // FIXME: untested
903
box-shadow: none;
904
// button.combo { @extend %button_basic:drop(active); }
906
}
907
}
908
// the combo is a composite widget so the way we do button linking doesn't
910
// work, special case needed. See
911
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
912
.linked:not(.vertical) > combobox {
914
> box > button.combo { @extend %linked_middle; }
915
&:first-child > box > button.combo { @extend %linked:first-child; }
917
&:last-child > box > button.combo { @extend %linked:last-child; }
919
&:only-child > box > button.combo { @extend %linked:only-child; }
921
}
922
.linked.vertical > combobox {
924
> box > button.combo { @extend %linked_vertical_middle; }
925
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
927
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
929
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
931
}
932
%combo_flat {
934
border-radius: 0;
935
background-image: none;
936
font-weight: inherit;
937
@include entry(flat-normal);
939
&:hover { box-shadow: inset 0 -2px $hint_fg_color; }
941
&:checked {
943
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
944
$primary_color 100%,
945
transparent 0%)
946
0 0 2 / 0 0 2px;
947
}
948
&:disabled {
950
box-shadow: inset 0 -1px $divider_color;
951
color: $disabled_fg_color;
952
}
953
}
954
/************
957
* Toolbars *
958
************/
959
toolbar {
960
-GtkWidget-window-dragging: true;
961
padding: 2px;
962
background-color: $bg_color;
963
button { @extend %button_basic.flat; }
965
// on OSD
967
.osd & { background-color: transparent; }
968
// stand-alone OSD toolbars
970
&.osd {
971
transition: $shadow_transition;
972
padding: $container_padding;
973
border-radius: 2px;
974
box-shadow: $shadow_2, inset 0 1px $highlight_color;
975
background-color: $base_color;
976
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
978
&.left,
980
&.right,
981
&.top,
982
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
983
}
984
// toolbar separators
986
&.horizontal > separator { margin: 2px; }
987
&.vertical > separator { margin: 2px; }
988
&:not(.inline-toolbar):not(.osd) {
990
scale,
991
entry,
992
spinbutton,
993
button { margin: 2px; }
994
.linked entry,
996
.linked spinbutton,
997
.linked button {
998
&:not(:first-child) { margin-left: 0; }
999
&:not(:last-child) { margin-right: 0; }
1000
}
1001
spinbutton {
1003
entry,
1004
button { margin: 0; }
1005
}
1006
switch { margin: 2px + $container_padding 2px; }
1008
}
1009
}
1010
// searchbar, location-bar & inline-toolbar
1012
.inline-toolbar {
1013
padding: $container_padding;
1014
border-style: solid;
1015
border-width: 0 1px 1px;
1016
border-color: $border_color;
1017
background-color: $alt_base_color;
1018
}
1019
searchbar,
1021
.location-bar {
1022
padding: $container_padding;
1023
border-style: solid;
1024
border-width: 0 0 1px;
1025
border-color: $border_color;
1026
background-color: $bg_color;
1027
background-clip: border-box;
1028
}
1029
/***************
1032
* Header bars *
1033
***************/
1034
%titlebar,
1035
headerbar {
1036
transition: background-color $shorter_duration $deceleration_curve, color $longer_duration $deceleration_curve;
1037
min-height: $large_size;
1038
padding: 0 $container_padding;
1039
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1040
background-color: $titlebar_bg_color;
1041
color: $titlebar_fg_color;
1042
&:disabled :not(button) > label { color: $titlebar_disabled_fg_color; }
1044
&:backdrop {
1046
color: $titlebar_secondary_fg_color;
1047
&:disabled :not(button) > label { color: $titlebar_disabled_secondary_fg_color; }
1049
}
1050
.title {
1052
padding: 0 12px;
1053
font-weight: bold;
1054
}
1055
.subtitle {
1057
padding: 0 12px;
1058
font-size: smaller;
1059
@extend .dim-label;
1061
}
1062
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
1064
button:not(.suggested-action):not(.destructive-action) {
1066
@extend %button_basic.flat;
1067
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1069
$titlebar_indicator_color 0%,
1070
transparent 0%)
1071
0 0 0 / 0 0 0px;
1072
color: $titlebar_secondary_fg_color;
1073
&:hover, &:active { color: $titlebar_fg_color; }
1075
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1077
&:checked {
1079
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1080
$titlebar_indicator_color 100%,
1081
transparent 0%)
1082
0 0 2 / 0 0 2px;
1083
color: $titlebar_fg_color;
1084
&:disabled { color: $titlebar_disabled_fg_color; }
1086
&, &:disabled { background-color: transparent; }
1088
}
1089
&:backdrop {
1091
color: $titlebar_hint_fg_color;
1092
&:hover, &:active { color: $titlebar_secondary_fg_color; }
1094
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1096
&:checked {
1098
color: $titlebar_secondary_fg_color;
1099
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1101
}
1102
}
1103
}
1104
button.suggested-action, button.destructive-action {
1106
&:disabled {
1107
background-color: $titlebar_divider_color;
1108
color: $titlebar_disabled_fg_color;
1109
}
1110
}
1111
&.selection-mode {
1113
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1114
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1115
transition: background-color 0.00001s $longer_duration, color $longer_duration $deceleration_curve;
1116
animation: header_ripple_effect $longer_duration $deceleration_curve;
1117
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1118
background-color: $primary_color;
1119
color: $inverse_fg_color;
1120
&:backdrop {
1122
color: $inverse_secondary_fg_color;
1123
}
1124
.subtitle:link { @extend *:link:selected; }
1126
button:not(.suggested-action):not(.destructive-action) {
1128
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1129
currentColor 0%,
1130
transparent 0%)
1131
0 0 0 / 0 0 0px;
1132
color: $inverse_fg_color;
1133
&:disabled { color: $inverse_disabled_fg_color; }
1135
&:checked {
1137
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1138
currentColor 100%,
1139
transparent 0%)
1140
0 0 2 / 0 0 2px;
1141
color: $inverse_fg_color;
1142
&:disabled { color: $inverse_disabled_fg_color; }
1144
}
1145
&:backdrop {
1147
color: $inverse_secondary_fg_color;
1148
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1150
&:checked {
1152
color: $inverse_secondary_fg_color;
1153
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1155
}
1156
}
1157
}
1158
.selection-menu {
1160
padding-left: 16px;
1161
padding-right: 16px;
1162
arrow { -GtkArrow-arrow-scaling: 1; }
1164
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1166
}
1167
}
1168
// squared corners when the window is maximized, tiled, or fullscreen
1170
.tiled &,
1171
.tiled-top &,
1172
.tiled-right &,
1173
.tiled-bottom &,
1174
.tiled-left &,
1175
.maximized &,
1176
.fullscreen & {
1177
border-radius: 0;
1178
box-shadow: $shadow_1;
1179
}
1180
&.default-decoration {
1182
min-height: $small_size;
1183
padding: $container_padding;
1184
box-shadow: inset 0 1px $titlebar_highlight_color;
1185
.tiled &,
1187
.maximized &,
1188
.fullscreen & { box-shadow: none; }
1189
button.titlebutton {
1191
min-height: $small_size;
1192
min-width: $small_size;
1193
margin: 0;
1194
padding: 0;
1195
}
1196
// workaround for non-animatable buttons
1198
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1199
}
1200
.solid-csd & {
1202
&:dir(rtl), &:dir(ltr) { // specificity bump
1203
// margin-left: -2px;
1204
// margin-right: -2px;
1205
// margin-top: -2px;
1206
// border-radius: 0;
1207
// box-shadow: inset 0 1px $titlebar_highlight_color;
1208
}
1209
}
1210
}
1211
headerbar {
1213
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1214
entry,
1215
spinbutton,
1216
// separator,
1217
button {
1218
margin-top: $container_padding;
1219
margin-bottom: $container_padding;
1220
}
1221
switch {
1223
margin-top: $container_padding * 2;
1224
margin-bottom: $container_padding * 2;
1225
}
1226
// reset button margins of the spinbutton
1228
spinbutton button {
1229
margin-top: 0;
1230
margin-bottom: 0;
1231
}
1232
}
1233
.background .titlebar {
1235
border-top-left-radius: 2px;
1236
border-top-right-radius: 2px;
1237
}
1238
.background.tiled .titlebar,
1240
.background.tiled-top .titlebar,
1241
.background.tiled-right .titlebar,
1242
.background.tiled-bottom .titlebar,
1243
.background.tiled-left .titlebar,
1244
.background.maximized .titlebar,
1245
.background.solid-csd .titlebar {
1246
border-top-left-radius: 0;
1247
border-top-right-radius: 0;
1248
}
1249
headerbar { // headerbar border rounding
1251
window separator:first-child + &, // tackles the paned container case
1252
window &:first-child { border-top-left-radius: 2px; }
1253
window &:last-child { border-top-right-radius: 2px; }
1255
window stack & { // tackles the stacked headerbars case
1257
&:first-child, &:last-child {
1258
border-top-left-radius: 2px;
1259
border-top-right-radius: 2px;
1260
}
1261
}
1262
window.tiled &,
1264
window.tiled-top &,
1265
window.tiled-right &,
1266
window.tiled-bottom &,
1267
window.tiled-left &,
1268
window.maximized &,
1269
window.fullscreen &,
1270
window.solid-csd & {
1271
&,
1272
&:first-child,
1273
&:last-child,
1274
&:only-child {
1275
border-top-left-radius: 0;
1276
border-top-right-radius: 0;
1277
}
1278
}
1279
}
1280
.titlebar:not(headerbar) {
1282
window.csd > & {
1283
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1284
padding: 0;
1285
background-color: transparent;
1286
background-image: none;
1287
border-style: none;
1288
box-shadow: none;
1289
}
1290
> separator {
1292
background-color: $titlebar_bg_color;
1293
background-image: image($border_color);
1294
}
1295
@extend %titlebar;
1297
}
1298
/************
1301
* Pathbars *
1302
************/
1303
%pathbar_button,
1304
.path-bar button {
1305
padding-left: ($medium_size - 24px) / 2;
1306
padding-right: ($medium_size - 24px) / 2;
1307
label:not(:only-child) {
1309
&:first-child { margin-left: 4px; }
1310
&:last-child { margin-right: 4px; }
1312
}
1313
&.slider-button {
1315
padding-left: (24px - 16px) / 2;
1316
padding-right: (24px - 16px) / 2;
1317
}
1318
:not(headerbar) & {
1320
@extend %flat_button;
1321
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1323
$primary_color 0%,
1324
transparent 0%)
1325
0 0 0 / 0 0 0px;
1326
border-radius: 2px;
1327
&:checked {
1329
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1330
$primary_color 100%,
1331
transparent 0%)
1332
0 0 2 / 0 0 2px;
1333
&, &:disabled { background-color: transparent; }
1335
}
1336
}
1337
}
1338
/**************
1341
* Tree Views *
1342
**************/
1343
treeview.view {
1344
@at-root * {
1345
-GtkTreeView-horizontal-separator: 4;
1346
-GtkTreeView-grid-line-width: 1;
1347
-GtkTreeView-grid-line-pattern: '';
1348
-GtkTreeView-tree-line-width: 1;
1349
-GtkTreeView-tree-line-pattern: '';
1350
-GtkTreeView-expander-size: 16;
1351
}
1352
border-left-color: $track_color; // this is actually the tree lines color,
1354
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1355
&:selected { border-left-color: $inverse_track_color; }
1357
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1359
&:hover, &:active, &:selected { border-radius: 0; }
1361
&.separator {
1363
min-height: 1px + 2px * 2;
1364
color: $border_color;
1365
}
1366
&:drop(active) {
1368
border-style: solid none;
1369
border-width: 1px;
1370
border-color: $accent_color;
1371
&.after { border-top-style: none; }
1373
&.before { border-bottom-style: none; }
1375
}
1376
&.expander {
1378
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1379
-gtk-icon-transform: rotate(-90deg);
1380
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1382
&:checked { -gtk-icon-transform: unset; }
1384
color: $secondary_fg_color;
1386
&:hover, &:active { color: $fg_color; }
1388
&:disabled { color: $disabled_secondary_fg_color; }
1390
&:selected {
1392
color: $inverse_secondary_fg_color;
1393
&:hover, &:active { color: $inverse_fg_color; }
1395
&:disabled { color: $inverse_disabled_secondary_fg_color; }
1397
}
1398
}
1399
&.progressbar { // progress bar in treeviews
1401
border-bottom: $bar_size solid $primary_color;
1402
box-shadow: none;
1403
background-color: transparent;
1404
&:selected { border-bottom-color: $inverse_fg_color; }
1406
}
1407
&.trough { // progress bar trough in treeviews
1409
border-bottom: $bar_size solid rgba($primary_color, $lower_opacity);
1410
box-shadow: none;
1411
background-color: transparent;
1412
&:selected { border-bottom-color: $inverse_track_color; }
1414
}
1415
header {
1417
button {
1418
@extend row.activatable;
1419
padding: 2px 6px;
1421
border-style: none solid solid none;
1422
border-width: 1px;
1423
border-color: $border_color;
1424
border-radius: 0;
1425
background-clip: border-box;
1426
&, &:hover, &:active { box-shadow: none; }
1428
&, &:disabled { background-color: $base_color; }
1430
&:last-child { border-right-style: none; }
1432
}
1433
}
1434
button.dnd,
1436
header.button.dnd { // for treeview-like derive widgets
1437
padding: 2px 6px;
1438
border-style: none solid solid;
1439
border-width: 1px;
1440
border-color: $border_color;
1441
border-radius: 0;
1442
box-shadow: none;
1443
background-color: $base_color;
1444
background-clip: border-box;
1445
color: $primary_color;
1446
}
1447
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1449
}
1450
/*********
1453
* Menus *
1454
*********/
1455
menubar,
1456
.menubar {
1457
-GtkWidget-window-dragging: true;
1458
padding: 0;
1459
// box-shadow: inset 0 -1px $border_color;
1460
background-color: $titlebar_bg_color;
1461
> menuitem {
1463
transition: $shorter_transition;
1464
min-height: 20px;
1465
padding: 4px 8px;
1466
color: $titlebar_secondary_fg_color;
1467
&:hover { // Seems like it :hover even with keyboard focus
1469
transition: none;
1470
background-color: $titlebar_divider_color;
1471
color: $titlebar_fg_color;
1472
}
1473
&:disabled { color: $titlebar_disabled_secondary_fg_color; }
1475
label:disabled { color: inherit; } // to inherit the above color
1477
}
1478
}
1479
.csd.popup { background-color: transparent; }
1481
menu,
1483
.menu,
1484
.context-menu {
1485
margin: 4px 0; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
1486
padding: 4px 0;
1487
box-shadow: inset 0 1px $highlight_color;
1488
background-color: $base_color;
1489
border: 1px solid $border_color; // adds borders in a non composited env
1490
.csd & {
1492
border: none; // axes borders in a composited env
1493
border-radius: 2px;
1494
}
1495
menuitem {
1497
transition: background-color $shorter_duration $deceleration_curve;
1498
min-height: 20px;
1499
min-width: 40px;
1500
padding: 4px 8px;
1501
font: initial;
1502
text-shadow: none;
1503
&:hover {
1505
transition: none;
1506
background-color: $divider_color;
1507
}
1508
&:disabled { color: $disabled_fg_color; }
1510
// submenu indicators
1512
arrow {
1513
min-height: 16px;
1514
min-width: 16px;
1515
&:dir(ltr) {
1517
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1518
margin-left: 8px;
1519
}
1520
&:dir(rtl) {
1522
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1523
margin-right: 8px;
1524
}
1525
}
1526
// avoids labels color being overridden, see
1528
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1529
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1530
}
1531
// overflow arrows
1533
> arrow {
1534
min-height: 16px;
1535
min-width: 16px;
1536
padding: 4px;
1537
background-color: $base_color;
1538
color: $secondary_fg_color;
1539
&.top {
1541
margin-top: -4px;
1542
border-bottom: 1px solid $border_color;
1543
border-radius: 2px 2px 0 0;
1544
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1545
}
1546
&.bottom {
1548
margin-bottom: -4px * 3;
1549
border-top: 1px solid $border_color;
1550
border-radius: 0 0 2px 2px;
1551
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1552
}
1553
&:hover {
1555
background-image: image($divider_color);
1556
color: $fg_color;
1557
}
1558
&:disabled {
1560
border-color: transparent;
1561
background-color: transparent;
1562
color: transparent;
1563
// color: $disabled_secondary_fg_color;
1564
}
1565
}
1566
separator { margin: 4px 0; }
1568
}
1569
menuitem {
1571
accelerator { color: $secondary_fg_color; }
1572
}
1573
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1575
// Electron/Atom render all translucent colors in opaque colors.
1576
// It's a very critical issue for this theme and should be fixed by upstream...
1577
.popup:not(.csd) menu {
1578
$opaque_fg_color: if($variant == 'light', $grey_900, $white);
1579
$opaque_secondary_fg_color: if($variant == 'light', $grey_600, mix($white, $base_color, percentage(0.7)));
1580
$opaque_disabled_fg_color: if($variant == 'light', $grey_500, mix($white, $base_color, percentage(0.5)));
1581
$opaque_divider_color: if($variant == 'light', $grey_300, mix($white, $base_color, percentage(0.12)));
1582
menuitem {
1584
color: $opaque_fg_color;
1585
&:hover { background-color: $opaque_divider_color; }
1587
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1589
}
1590
// TODO: not working this, where/how i can set the accelerators?
1592
accelerator { color: $opaque_secondary_fg_color; }
1593
}
1594
/************
1597
* Popovers *
1598
************/
1599
popover.background {
1600
transition: $shadow_transition;
1601
padding: 2px;
1602
box-shadow: $shadow_2; // TODO: this should really have a highlight
1603
background-color: $lighter_bg_color;
1604
&:backdrop { box-shadow: $shadow_1; }
1606
&, .csd & {
1608
border-style: solid;
1609
border-width: 1px;
1610
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1611
border-radius: 2px + 1px;
1612
}
1613
> stack { margin: -4px; } // remove extra padding from menu style popovers
1615
> toolbar { margin: -2px; }
1617
> list,
1619
> .view,
1620
> toolbar {
1621
border-style: none;
1622
box-shadow: none;
1623
background-color: transparent;
1624
}
1625
&.touch-selection,
1627
&.magnifier,
1628
&.osd { @extend %osd; }
1629
// entry { @extend %entry.flat; }
1631
// button.combo { @extend %combo_flat; }
1633
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1635
&.menu button,
1637
button.model {
1638
@extend %simple_flat_button;
1639
min-height: 32px;
1641
padding: 0 8px;
1642
border-radius: 2px;
1643
&:checked { @extend %selected_items; }
1645
}
1646
separator { margin: 4px 0; }
1648
list separator { margin: 0; }
1650
}
1651
/*************
1653
* Notebooks *
1654
*************/
1655
notebook {
1656
> header {
1657
border-width: 1px;
1658
border-color: $border_color;
1659
background-color: $bg_color;
1660
background-clip: border-box;
1661
&.top {
1663
border-bottom-style: solid;
1664
> tabs {
1665
margin-bottom: -1px;
1666
> tab {
1667
&:hover { box-shadow: inset 0 -2px $track_color; }
1669
&:checked { box-shadow: inset 0 -2px $primary_color; }
1671
}
1672
}
1673
}
1674
&.bottom {
1676
border-top-style: solid;
1677
> tabs {
1678
margin-top: -1px;
1679
> tab {
1680
&:hover { box-shadow: inset 0 2px $track_color; }
1682
&:checked { box-shadow: inset 0 2px $primary_color; }
1684
}
1685
}
1686
}
1687
&.left {
1689
border-right-style: solid;
1690
> tabs {
1691
margin-right: -1px;
1692
> tab {
1693
&:hover { box-shadow: inset -2px 0 $track_color; }
1695
&:checked { box-shadow: inset -2px 0 $primary_color; }
1697
}
1698
}
1699
}
1700
&.right {
1702
border-left-style: solid;
1703
> tabs {
1704
margin-left: -1px;
1705
> tab {
1706
&:hover { box-shadow: inset 2px 0 $track_color; }
1708
&:checked { box-shadow: inset 2px 0 $primary_color; }
1710
}
1711
}
1712
}
1713
&.top > tabs > arrow {
1715
@extend %notebook_vert_arrows;
1716
border-top-style: none;
1718
}
1719
&.bottom > tabs > arrow {
1721
@extend %notebook_vert_arrows;
1722
border-bottom-style: none;
1724
}
1725
@at-root %notebook_vert_arrows {
1727
padding-left: 4px;
1728
padding-right: 4px;
1729
&.down {
1731
margin-left: -8px;
1732
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1733
}
1734
&.up {
1736
margin-right: -8px;
1737
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1738
}
1739
}
1740
&.left > tabs > arrow {
1742
@extend %notebook_horz_arrows;
1743
border-left-style: none;
1745
}
1746
&.right > tabs > arrow {
1748
@extend %notebook_horz_arrows;
1749
border-right-style: none;
1751
}
1752
@at-root %notebook_horz_arrows {
1754
padding-top: 4px;
1755
padding-bottom: 4px;
1756
&.down {
1758
margin-top: -8px;
1759
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1760
}
1761
&.up {
1763
margin-bottom: -8px;
1764
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1765
}
1766
}
1767
> tabs > arrow {
1769
@extend %simple_flat_button;
1770
min-height: 16px;
1772
min-width: 16px;
1773
border-radius: 0;
1774
}
1775
tab {
1777
transition: $longer_transition,
1778
background-size 0,
1779
background-image 0;
1780
min-height: $small_size;
1781
min-width: $small_size;
1782
padding: $container_padding 12px;
1783
outline-offset: -6px;
1785
border-width: 1px; // for reorderable tabs
1787
border-color: transparent; //
1788
background-image: radial-gradient(circle farthest-corner at center,
1790
$primary_color 10%,
1791
transparent 0%);
1792
background-repeat: no-repeat;
1793
background-position: center;
1794
background-size: 0% 0%;
1795
color: $secondary_fg_color;
1797
font-weight: 500;
1798
&:hover {
1800
color: $fg_color;
1801
&.reorderable-page {
1803
border-color: $border_color;
1804
background-color: $alt_base_color;
1805
}
1806
}
1807
&:disabled { color: $disabled_secondary_fg_color; }
1809
&:checked {
1811
transition: $longer_transition,
1812
background-size $longer_duration $deceleration_curve,
1813
background-image $longer_duration + $ripple_duration $deceleration_curve;
1814
background-image: radial-gradient(circle farthest-corner at center,
1815
transparent 10%,
1816
transparent 0%);
1817
background-size: 1000% 1000%;
1818
color: $fg_color;
1819
&:disabled { color: $disabled_fg_color; }
1821
&.reorderable-page {
1823
border-color: $border_color;
1824
background-color: $base_color;
1825
}
1826
}
1827
// colors the button like the label, overridden otherwise
1829
button.flat {
1830
@extend %small_button;
1831
&:last-child {
1833
margin-left: $container_padding;
1834
margin-right: $container_padding - 12px;
1835
}
1836
&:first-child {
1838
margin-left: $container_padding - 12px;
1839
margin-right: $container_padding;
1840
}
1841
}
1842
}
1843
&.top,
1845
&.bottom {
1846
tabs {
1847
padding-left: 8px;
1848
padding-right: 8px;
1849
&:not(:only-child) {
1851
&:first-child { margin-left: 0; }
1852
&:last-child { margin-right: 0; }
1853
}
1854
tab {
1856
&.reorderable-page {
1857
margin: 0 -1px;
1858
border-style: none solid;
1859
}
1860
}
1861
}
1862
}
1863
&.left,
1865
&.right {
1866
tabs {
1867
padding-top: 8px;
1868
padding-bottom: 8px;
1869
&:not(:only-child) {
1871
&:first-child { margin-top: 0; }
1872
&:last-child { margin-bottom: 0; }
1873
}
1874
tab {
1876
&.reorderable-page {
1877
margin: -1px 0;
1878
border-style: solid none;
1879
}
1880
}
1881
}
1882
}
1883
}
1884
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1886
background-color: $base_color;
1887
entry:not(.search),
1889
spinbutton:not(.vertical) { @extend %entry.flat; }
1890
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1892
button.combo { @extend %combo_flat; }
1894
}
1895
}
1896
/**************
1899
* Scrollbars *
1900
**************/
1901
scrollbar {
1902
$_slider_min_length: 24px;
1903
// disable steppers
1905
@at-root * {
1906
-GtkScrollbar-has-backward-stepper: false;
1907
-GtkScrollbar-has-forward-stepper: false;
1908
}
1909
transition: $longer_transition;
1911
background-color: $base_color;
1912
background-clip: $extra_background_clip;
1913
// scrollbar border
1915
&.top { border-bottom: 1px solid $border_color; }
1916
&.bottom { border-top: 1px solid $border_color; }
1917
&.left { border-right: 1px solid $border_color; }
1918
&.right { border-left: 1px solid $border_color; }
1919
// slider
1921
slider {
1922
transition: $shorter_transition, margin 0, border-width 0;
1923
min-width: 8px;
1924
min-height: 8px;
1925
border: 4px solid transparent;
1926
border-radius: $circular_radius;
1927
background-clip: padding-box;
1928
background-color: $hint_fg_color;
1929
&:hover { background-color: $secondary_fg_color; }
1931
&:active { background-color: $fg_color; }
1933
&:disabled { background-color: $disabled_secondary_fg_color; }
1935
}
1936
&.fine-tune {
1938
slider {
1939
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1940
min-width: 4px;
1941
min-height: 4px;
1942
}
1943
&.horizontal slider { margin: 2px 0; }
1945
&.vertical slider { margin: 0 2px; }
1947
}
1948
&.overlay-indicator {
1950
&:not(.dragging):not(.hovering) {
1951
border-color: transparent;
1952
background-color: transparent;
1953
slider {
1955
min-width: 4px;
1956
min-height: 4px;
1957
margin: 4px - 1px;
1958
border: 1px solid rgba($base_color, $lower_opacity);
1959
}
1960
button {
1962
min-width: 4px;
1963
min-height: 4px;
1964
margin: 4px - 1px;
1965
border: 1px solid rgba($base_color, $lower_opacity);
1966
border-radius: $circular_radius;
1967
background-color: $hint_fg_color;
1968
background-clip: padding-box;
1969
-gtk-icon-source: none;
1970
&:disabled { background-color: $disabled_secondary_fg_color; }
1972
}
1973
&.horizontal {
1975
slider { min-width: $_slider_min_length; }
1976
button { min-width: 8px; }
1978
}
1979
&.vertical {
1981
slider { min-height: $_slider_min_length; }
1982
button { min-height: 8px; }
1984
}
1985
}
1986
&.dragging,
1988
&.hovering { background-color: rgba($base_color, $higher_opacity); }
1989
}
1990
&.horizontal slider { min-width: $_slider_min_length; }
1992
&.vertical slider { min-height: $_slider_min_length; }
1994
// button styling
1996
button {
1997
@extend %simple_flat_button;
1998
min-width: 16px;
2000
min-height: 16px;
2001
padding: 0;
2002
border-radius: 0;
2003
}
2004
// button icons
2006
&.vertical {
2007
button {
2008
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2009
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
2011
}
2012
}
2013
&.horizontal {
2015
button {
2016
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2017
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
2019
}
2020
}
2021
}
2022
/**********
2025
* Switch *
2026
**********/
2027
switch {
2028
transition: $longer_transition;
2029
margin: $container_padding 0;
2030
padding: 0 2px;
2031
border: 5px solid transparent;
2032
border-radius: $circular_radius;
2033
background-color: $track_color;
2034
background-clip: padding-box;
2035
font-size: 0;
2036
&:disabled { background-color: $divider_color; }
2038
&:checked {
2040
background-color: rgba($accent_color, 0.5);
2041
&:disabled { background-color: rgba($accent_color, 0.3); }
2043
}
2044
slider {
2046
transition: $longer_transition, $shadow_transition;
2047
min-width: 20px;
2048
min-height: 20px;
2049
margin: -3px -2px;
2050
border-radius: $circular_radius;
2051
-gtk-outline-radius: $circular_radius;
2052
box-shadow: $shadow_1;
2053
background-color: $base_color;
2054
}
2055
&:hover slider { box-shadow: $shadow_2; }
2057
&:checked slider {
2059
transition: $longer_transition, $shadow_transition, background-image 0, background-color 0.00001s $longer_duration;
2060
animation: needs_attention $longer_duration $deceleration_curve;
2061
background-color: $accent_color;
2062
color: $inverse_fg_color;
2063
}
2064
&:disabled slider { background-color: $alt_base_color; }
2066
&:checked:disabled slider { animation: none; }
2068
row:selected & {
2070
}
2071
}
2072
/*************************
2075
* Check and Radio items *
2076
*************************/
2077
// draw regular check and radio items using our PNG assets
2078
// all assets are rendered from assets.svg. never add pngs directly
2079
// selection-mode
2081
.view.content-view.check:not(list),
2082
.content-view .tile check:not(list) {
2083
min-height: 40px;
2084
min-width: 40px;
2085
margin: 0;
2086
padding: 0;
2087
box-shadow: none;
2088
background-color: transparent;
2089
background-image: none;
2090
-gtk-icon-shadow: $shadow_1;
2091
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
2093
@each $s, $as in ('', '-unchecked'),
2095
(':checked', '-checked') {
2096
&#{$s} {
2097
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
2098
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
2099
}
2100
}
2101
}
2102
checkbutton.text-button,
2104
radiobutton.text-button {
2105
// this is for a nice focus on check and radios text
2106
padding: 2px;
2107
outline-offset: 0;
2108
label:not(:only-child) { margin: 0 4px; }
2110
}
2111
check,
2113
radio {
2114
min-height: 24px;
2115
min-width: 24px;
2116
margin: -($large_size - 24px) / 2;
2117
padding: ($large_size - 24px) / 2;
2118
@extend %simple_flat_button;
2120
@extend %circular_button;
2122
&:checked, &:indeterminate {
2124
color: $accent_color;
2125
&:disabled { color: $disabled_accent_color; }
2127
}
2128
// &:only-child { margin: -12px; }
2130
row:selected &:not(:checked):not(:indeterminate) {
2132
color: $inverse_secondary_fg_color;
2133
&:hover, &:active { color: $inverse_fg_color; }
2135
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2137
}
2138
popover & {
2140
&, &:hover, &:disabled {
2141
box-shadow: none;
2142
background-image: none;
2143
}
2144
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2146
&.left:dir(rtl) {
2148
margin-left: -16px;
2149
margin-right: -8px;
2150
}
2151
&.right:dir(ltr) {
2153
margin-left: -8px;
2154
margin-right: -16px;
2155
}
2156
}
2157
menu menuitem & {
2159
transition: none;
2160
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2161
padding: 0;
2162
&:dir(ltr) { margin-right: 8px; }
2164
&:dir(rtl) { margin-left: 8px; }
2166
&:not(:checked):not(:indeterminate):not(:disabled) { color: $secondary_fg_color; }
2168
&, &:hover, &:disabled {
2170
box-shadow: none;
2171
// color: inherit;
2172
}
2173
}
2174
}
2175
%check,
2177
check {
2178
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2179
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2180
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2182
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2183
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2185
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2186
}
2187
%radio,
2189
radio {
2190
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2191
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2192
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2194
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2195
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2197
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2198
border-image-slice: $large_size / 2px;
2200
border-image-width: $large_size / 2;
2201
$radio_indicator: 10px / $large_size / 2;
2203
& {
2205
border-image-source: -gtk-gradient(radial,
2206
center center, 0,
2207
center center, 0.001,
2208
to($accent_color),
2209
to(transparent));
2210
}
2211
&:checked:not(:indeterminate) {
2213
border-image-source: -gtk-gradient(radial,
2214
center center, 0,
2215
center center, $radio_indicator,
2216
to($accent_color),
2217
to(transparent));
2218
}
2219
&:checked:not(:indeterminate):disabled {
2221
border-image-source: -gtk-gradient(radial,
2222
center center, 0,
2223
center center, $radio_indicator,
2224
to($disabled_accent_color),
2225
to(transparent));
2226
}
2227
}
2228
%small_check,
2230
menu menuitem check {
2231
& {
2232
min-height: 16px;
2233
min-width: 16px;
2234
border-radius: 2px;
2235
-gtk-outline-radius: 2px;
2236
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2237
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2238
}
2239
&:checked {
2241
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2242
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2243
}
2244
&:indeterminate {
2246
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2247
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2248
}
2249
}
2250
%small_radio,
2252
menu menuitem radio {
2253
& {
2254
min-height: 16px;
2255
min-width: 16px;
2256
border-image: none;
2257
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2258
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2259
}
2260
&:checked {
2262
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2263
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2264
}
2265
&:indeterminate {
2267
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2268
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2269
}
2270
}
2271
// ANIMATION:
2273
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2274
// the transformation is set on the active state and it get reset on the checked state.
2275
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2276
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2278
check:not(:checked):indeterminate:active,
2280
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2281
check:not(:checked),
2283
radio:not(:checked) {
2284
& {
2285
transition: $longer_transition,
2286
background-size $ripple_duration $deceleration_curve,
2287
background-image $ripple_duration * 2 $deceleration_curve,
2288
-gtk-icon-transform 0;
2289
}
2290
&:active {
2292
transition: $longer_transition,
2293
background-size 0,
2294
background-image 0,
2295
-gtk-icon-transform 0;
2296
}
2297
menu menuitem & { transition: none; }
2299
}
2300
treeview.view check,
2302
treeview.view radio {
2303
padding: 0;
2304
&:hover {
2306
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2307
&:disabled { box-shadow: none; }
2309
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2311
}
2312
& {
2314
color: $secondary_fg_color;
2315
&:hover, &:active { color: $fg_color; }
2317
&:disabled { color: $disabled_secondary_fg_color; }
2319
&:checked, &:indeterminate { color: $accent_color; }
2321
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2323
}
2324
&:selected {
2326
color: $inverse_secondary_fg_color;
2327
&:hover, &:active { color: $inverse_fg_color; }
2329
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2331
&:checked, &:indeterminate { color: $accent_color; }
2333
&:checked:disabled, &:indeterminate:disabled { color: $disabled_accent_color; }
2335
}
2336
}
2337
treeview.view radio:checked {
2339
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2340
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2341
border-image: none;
2342
}
2343
/************
2346
* GtkScale *
2347
************/
2348
scale {
2349
// sizing
2350
$_marks_length: 8px;
2351
$_marks_distance: 8px;
2352
$trough_size: 2px;
2354
$slider_size: 24px;
2356
$marks_slider_size: 30px;
2357
$slider_margin: -($slider_size - $trough_size) / 2;
2359
$marks_slider_margin: -($marks_slider_size - $trough_size) - $slider_margin;
2360
$color_slider_margin: -($slider_size) / 2;
2362
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2363
min-height: $medium_size - $slider_size;
2365
min-width: $medium_size - $slider_size;
2366
padding: ($slider_size / 2);
2367
// the slider is inside the trough, so to have make it bigger there's a negative margin
2369
slider {
2370
min-height: $slider_size;
2371
min-width: $slider_size;
2372
margin: $slider_margin;
2373
}
2374
// the backing bit
2376
trough {
2377
transition: $longer_transition;
2378
outline-offset: 2px;
2379
background-color: $track_color;
2380
&:disabled { background-color: $divider_color; }
2382
}
2383
// the colored part of the backing bit
2385
highlight {
2386
transition: $longer_transition;
2387
background-color: $accent_color;
2388
&:disabled { background-color: transparent; }
2390
}
2391
// this is another differently styled part of the backing bit, the most relevant use case is for example
2393
// in media player to indicate how much video stream as been cached
2394
fill {
2395
transition: $longer_transition;
2396
background-color: $track_color;
2397
&:disabled { background-color: transparent; }
2399
}
2400
slider {
2402
transition: all $shorter_duration $standard_curve;
2403
// border-radius: 100%;
2404
// background-color: $accent_color;
2405
background-repeat: no-repeat;
2406
background-position: center;
2407
@each $s, $as in ('', ''),
2409
(':disabled', '-disabled') {
2410
&#{$s} {
2411
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2412
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2414
}
2415
}
2416
background-size: calc(100% - 10px);
2418
&:hover { background-size: calc(100% - 8px); }
2420
&:active { background-size: calc(100% - 6px); }
2422
}
2423
// click-and-hold the slider to activate
2425
&.fine-tune {
2426
// to make the slider shrink in fine-tune mode
2427
slider { background-size: calc(100% - 12px); }
2428
}
2429
marks label,
2431
value { color: $hint_fg_color; }
2432
marks {
2434
color: $track_color;
2435
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2437
(bottom, bottom, top),
2438
(top, left, right),
2439
(bottom, right, left) {
2440
&.#{$marks_class} {
2441
margin-#{$marks_margin}: $_marks_distance;
2442
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
2443
}
2444
}
2445
}
2446
&.horizontal {
2448
indicator {
2449
min-height: $_marks_length;
2450
min-width: 1px;
2451
}
2452
}
2453
&.vertical {
2455
indicator {
2456
min-height: 1px;
2457
min-width: $_marks_length;
2458
}
2459
}
2460
// *WARNING* scale with marks madness following
2462
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2464
('vertical', 'vert') {
2465
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2466
('marks-after', 'marks-after:not(.marks-before)') {
2467
&.#{$dir_class}.#{$marks_class} {
2468
slider {
2469
@each $state, $state_infix in ('', ''),
2470
(':disabled', '-disabled') {
2471
&#{$state} {
2472
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2473
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2475
}
2476
}
2477
@if $dir_class == 'horizontal' {
2479
min-height: $marks_slider_size;
2480
min-width: $slider_size;
2481
@if $marks_infix == 'marks-before' {
2483
margin-top: $marks_slider_margin;
2484
background-position: center calc(100% - 5px);
2486
&:hover { background-position: center calc(100% - 4px); }
2488
&:active { background-position: center calc(100% - 3px); }
2490
}
2491
@if $marks_infix == 'marks-after' {
2493
margin-bottom: $marks_slider_margin;
2494
background-position: center calc(5px);
2496
&:hover { background-position: center calc(4px); }
2498
&:active { background-position: center calc(3px); }
2500
}
2501
}
2502
@if $dir_class == 'vertical' {
2504
min-height: $slider_size;
2505
min-width: $marks_slider_size;
2506
@if $marks_infix == 'marks-before' {
2508
margin-left: $marks_slider_margin;
2509
background-position: calc(5px) center;
2511
&:hover { background-position: calc(4px) center; }
2513
&:active { background-position: calc(3px) center; }
2515
}
2516
@if $marks_infix == 'marks-after' {
2518
margin-right: $marks_slider_margin;
2519
background-position: calc(100% - 5px) center;
2521
&:hover { background-position: calc(100% - 4px) center; }
2523
&:active { background-position: calc(100% - 3px) center; }
2525
}
2526
}
2527
}
2528
&.fine-tune slider {
2530
@if $dir_class == 'horizontal' {
2531
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2532
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2534
}
2535
@if $dir_class == 'vertical' {
2537
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2538
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2540
}
2541
}
2542
}
2543
}
2544
}
2545
&.color {
2547
min-height: 0;
2548
min-width: 0;
2549
&.horizontal {
2551
padding: 0 0 12px 0;
2552
slider {
2554
&:dir(ltr), &:dir(rtl) { // specificity bump
2555
margin-bottom: $color_slider_margin;
2556
margin-top: $color_marks_slider_margin;
2557
}
2558
}
2559
}
2560
&.vertical {
2562
&:dir(ltr) {
2563
padding: 0 0 0 12px;
2564
slider {
2566
margin-left: $color_slider_margin;
2567
margin-right: $color_marks_slider_margin;
2568
}
2569
}
2570
&:dir(rtl) {
2572
padding: 0 12px 0 0;
2573
slider {
2575
margin-right: $color_slider_margin;
2576
margin-left: $color_marks_slider_margin;
2577
}
2578
}
2579
}
2580
}
2581
}
2582
/*****************
2585
* Progress bars *
2586
*****************/
2587
progressbar {
2588
// sizing
2589
&.horizontal {
2590
trough,
2591
progress { min-height: $bar_size; }
2592
}
2593
&.vertical {
2595
trough,
2596
progress { min-width: $bar_size; }
2597
}
2598
// FIXME: insensitive state missing and some other state should be set probably
2600
color: $hint_fg_color;
2601
font-size: smaller;
2602
trough { background-color: rgba($primary_color, $lower_opacity); }
2604
progress { background-color: $primary_color; }
2606
&.osd { // progressbar.osd used for epiphany page loading progress
2608
// min-width: $bar_size;
2609
// min-height: $bar_size;
2610
// background-color: transparent;
2611
// trough { background-color: transparent; }
2613
// progress { background-color: $primary_color; }
2615
}
2616
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2618
}
2619
/*************
2622
* Level Bar *
2623
*************/
2624
levelbar {
2625
&.horizontal {
2626
block { min-height: $bar_size; }
2627
&.discrete block {
2629
min-width: $medium_size;
2630
&:not(:last-child) { margin-right: 2px; }
2632
}
2633
}
2634
&.vertical {
2636
block { min-width: $bar_size; }
2637
&.discrete block {
2639
min-height: $medium_size;
2640
&:not(:last-child) { margin-bottom: 2px; }
2642
}
2643
}
2644
// imitate the entry style
2646
trough {
2647
padding: 2px;
2648
border-radius: 2px;
2649
box-shadow: $shadow_1;
2650
background-color: $base_color;
2651
&:disabled { background-color: $alt_base_color; }
2653
}
2654
block {
2656
&.low { background-color: $warning_color; }
2657
&.high,
2659
&:not(.empty) { background-color: $primary_color; }
2660
&.full { background-color: $success_color; }
2662
&.empty { background-color: $divider_color; }
2664
}
2665
}
2666
/****************
2669
* Print dialog *
2670
*****************/
2671
printdialog {
2672
paper {
2673
padding: 0;
2674
border: 1px solid $border_color;
2675
background-color: $base_color;
2676
color: $fg_color;
2677
}
2678
.dialog-action-box { margin: 12px; }
2680
}
2681
/**********
2684
* Frames *
2685
**********/
2686
frame > border,
2687
.frame {
2688
margin: 0;
2689
padding: 0;
2690
border: 1px solid $border_color;
2691
border-radius: 0;
2692
box-shadow: none;
2693
&.flat { border-style: none; }
2695
}
2696
frame.flat > border { @extend .frame.flat; } // for backporting
2698
actionbar > revealer > box {
2700
padding: $container_padding;
2701
border-top: 1px solid $border_color;
2702
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2704
}
2705
scrolledwindow {
2707
viewport.frame { // avoid double borders when viewport inside scrolled window
2708
border-style: none;
2709
}
2710
// This is used when content is touch-dragged past boundaries.
2712
// draws a box on top of the content, the size changes programmatically.
2713
@at-root overshoot {
2714
&.top { @include overshoot(top); }
2715
&.bottom { @include overshoot(bottom); }
2717
&.left { @include overshoot(left); }
2719
&.right { @include overshoot(right); }
2721
}
2722
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2724
@at-root undershoot {
2725
&.top { @include undershoot(top); }
2726
&.bottom { @include undershoot(bottom); }
2728
&.left { @include undershoot(left); }
2730
&.right { @include undershoot(right); }
2732
}
2733
@at-root junction { // the small square between two scrollbars
2735
border-style: solid none none solid;
2736
border-width: 1px;
2737
border-color: $border_color;
2738
background-color: $base_color;
2739
&:dir(rtl) { border-style: solid solid none none; }
2741
}
2742
}
2743
// vbox and hbox separators
2745
separator {
2746
min-width: 1px;
2747
min-height: 1px;
2748
background-color: $border_color;
2749
}
2750
%hide_separators {
2752
min-width: 0;
2753
min-height: 0;
2754
background-color: transparent;
2755
}
2756
/*********
2759
* Lists *
2760
*********/
2761
list {
2762
border-color: $border_color;
2763
background-color: $base_color;
2764
row { padding: 2px; }
2766
}
2767
// FIXME
2769
$row_transition: $longer_transition, background-color 0, color 0;
2770
row {
2772
&.activatable {
2773
transition: $row_transition,
2774
background-size $ripple_duration $deceleration_curve,
2775
background-image $ripple_duration * 2 $deceleration_curve;
2776
box-shadow: inset 0 0 0 9999px transparent;
2777
background-image: radial-gradient(circle farthest-corner at center,
2778
transparent 10%,
2779
transparent 0%);
2780
background-repeat: no-repeat;
2781
background-position: center;
2782
background-size: 1000% 1000%;
2783
&:hover {
2785
transition: $row_transition,
2786
box-shadow 0,
2787
background-size $ripple_duration $deceleration_curve,
2788
background-image $ripple_duration * 2 $deceleration_curve;
2789
box-shadow: inset 0 0 0 9999px $row_fill_color;
2790
}
2791
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2793
&:active {
2794
transition: $row_transition,
2795
background-size 0,
2796
background-image 0;
2797
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2798
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2799
background-image: radial-gradient(circle farthest-corner at center,
2800
$semi_fill_color 10%,
2801
transparent 0%);
2802
background-size: 0% 0%;
2803
}
2804
}
2805
&:selected { @extend %selected_items; }
2807
}
2808
/*********************
2811
* App Notifications *
2812
*********************/
2813
.app-notification {
2814
@extend %osd;
2815
@extend toolbar.osd;
2817
margin: 8px;
2819
button { @extend %button_basic.flat; }
2821
&.frame,
2823
border { border-style: none; }
2824
}
2825
/*************
2828
* Expanders *
2829
*************/
2830
expander {
2831
arrow {
2832
transition: all $shorter_duration $standard_curve;
2833
min-width: 16px;
2834
min-height: 16px;
2835
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2836
-gtk-icon-transform: rotate(-90deg);
2837
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2839
&:checked { -gtk-icon-transform: unset; }
2841
color: $secondary_fg_color;
2843
&:hover, &:active { color: $fg_color; }
2845
&:disabled { color: $disabled_secondary_fg_color; }
2847
&:selected {
2849
color: $inverse_secondary_fg_color;
2850
&:hover, &:active { color: $inverse_fg_color; }
2852
&:disabled { color: $inverse_disabled_secondary_fg_color; }
2854
}
2855
}
2856
}
2857
/************
2860
* Calendar *
2861
************/
2862
calendar {
2863
padding: 1px;
2864
border: 1px solid $border_color;
2865
color: $fg_color;
2866
&:disabled { color: $disabled_fg_color; }
2868
&:selected {
2870
@extend %selected_items;
2871
border-radius: 2px + 1px;
2873
}
2874
&.header {
2876
border-style: none none solid;
2877
border-radius: 0;
2878
}
2879
&.button { @extend %simple_flat_button; }
2881
&.highlight {
2883
color: $secondary_fg_color;
2884
font-weight: 500;
2885
}
2886
&:indeterminate { color: $disabled_secondary_fg_color; }
2888
}
2889
/***********
2892
* Dialogs *
2893
***********/
2894
messagedialog { // Message Dialog styling
2895
&.background { background-color: $lighter_bg_color; }
2896
.titlebar {
2898
min-height: $small_size;
2899
border-style: none;
2900
box-shadow: inset 0 1px $highlight_color;
2901
background-color: $lighter_bg_color;
2902
color: $fg_color;
2903
&:backdrop { color: $secondary_fg_color; }
2905
}
2906
&.csd { // rounded bottom border styling for csd version
2908
&.background {
2909
// bigger radius for better antialiasing
2910
border-bottom-left-radius: 2px;
2911
border-bottom-right-radius: 2px;
2912
}
2913
.dialog-action-area button {
2915
padding: 8px 16px;
2916
border-top: 1px solid $border_color;
2917
border-radius: 0;
2918
@extend %simple_flat_button;
2920
&:first-child { border-bottom-left-radius: 2px; }
2922
&:last-child { border-bottom-right-radius: 2px; }
2924
}
2925
}
2926
entry { @extend %entry.flat; }
2928
}
2929
filechooser {
2931
.dialog-action-box { border-top: 1px solid $border_color; }
2932
#pathbarbox {
2934
border-bottom: 1px solid $border_color;
2935
background-color: $bg_color;
2936
}
2937
}
2938
filechooserbutton:drop(active) {
2940
box-shadow: none;
2941
}
2942
/***********
2945
* Sidebar *
2946
***********/
2947
.sidebar {
2948
border-style: none;
2949
background-color: $lighter_bg_color;
2950
@at-root %sidebar_left,
2952
&:dir(ltr),
2953
&.left,
2954
&.left:dir(rtl) {
2955
border-right: 1px solid $border_color;
2956
border-left-style: none;
2957
}
2958
@at-root %sidebar_right,
2960
&:dir(rtl),
2961
&.right {
2962
border-left: 1px solid $border_color;
2963
border-right-style: none;
2964
}
2965
list { background-color: transparent; }
2967
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2969
}
2970
stacksidebar {
2972
&.sidebar {
2973
&:dir(ltr),
2974
&.left,
2975
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2976
&:dir(rtl),
2978
&.right { list { @extend %sidebar_right; }}
2979
}
2980
row {
2982
padding: 10px 4px;
2983
> label {
2985
padding-left: 6px;
2986
padding-right: 6px;
2987
}
2988
&.needs-attention > label { @extend %needs_attention; }
2990
}
2991
}
2992
/****************
2995
* File chooser *
2996
****************/
2997
// dim the sidebar icons, see bug #786613 for details on this oddity
2998
row {
2999
image.sidebar-icon { color: $secondary_fg_color; }
3000
&:selected image.sidebar-icon { color: $inverse_secondary_fg_color; }
3002
}
3003
placessidebar {
3005
> viewport.frame { border-style: none; }
3006
list { padding: (4px - 3px) 0 4px; }
3008
row {
3010
// Needs overriding of the GtkListBoxRow padding
3011
min-height: 32px;
3012
margin: -1px 0; // Remove unknown margins
3013
padding: 0;
3014
// Using margins/padding directly in the SidebarRow
3016
// will make the animation of the new bookmark row jump
3017
> revealer { padding: 0 12px; }
3018
&:selected { color: $inverse_fg_color; }
3020
&:disabled { color: $disabled_fg_color; }
3022
image.sidebar-icon {
3024
&:dir(ltr) { padding-right: 8px; }
3025
&:dir(rtl) { padding-left: 8px; }
3026
}
3027
label.sidebar-label {
3029
&:dir(ltr) { padding-right: 2px; }
3030
&:dir(rtl) { padding-left: 2px; }
3031
}
3032
@at-root button.sidebar-button {
3034
@extend %simple_flat_button;
3035
@extend %small_button;
3037
row:selected & { @extend %button_selected.flat; }
3039
}
3040
&.sidebar-placeholder-row {
3042
min-height: 2px;
3043
padding: 0 8px;
3044
background-image: image($accent_color);
3045
background-clip: content-box;
3046
}
3047
&.sidebar-new-bookmark-row { color: $accent_color; }
3049
&:drop(active):not(:disabled) {
3051
box-shadow: inset 0 0 0 2px $accent_color;
3052
&:selected {
3054
// background-color: $accent_color;
3055
// color: $inverse_fg_color;
3056
}
3057
}
3058
}
3059
}
3060
placesview {
3062
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
3063
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
3065
// this selects the "connect to server" label
3067
> actionbar > revealer > box > label {
3068
padding-left: 8px;
3069
padding-right: 8px;
3070
}
3071
}
3072
/*********
3075
* Paned *
3076
*********/
3077
paned {
3078
> separator {
3079
min-width: 1px;
3080
min-height: 1px;
3081
-gtk-icon-source: none; // defeats the ugly default handle decoration
3082
border-style: none; // just to be sure
3083
background-color: transparent;
3084
// workaround, using background istead of a border since the border will get rendered twice (?)
3085
background-image: image($border_color);
3086
background-size: 1px 1px;
3087
background-clip: content-box; // avoids borders image being rendered twice (?)
3088
&.wide {
3090
min-width: 6px;
3091
min-height: 6px;
3092
background-color: $bg_color;
3093
background-image: image($border_color), image($border_color);
3094
background-size: 1px 1px, 1px 1px;
3095
}
3096
}
3097
&.horizontal > separator {
3099
background-repeat: repeat-y;
3100
&:dir(ltr) {
3102
margin: 0 -8px 0 0;
3103
padding: 0 8px 0 0;
3104
background-position: left;
3105
}
3106
&:dir(rtl) {
3108
margin: 0 0 0 -8px;
3109
padding: 0 0 0 8px;
3110
background-position: right;
3111
}
3112
&.wide {
3114
margin: 0;
3115
padding: 0;
3116
background-repeat: repeat-y, repeat-y;
3117
background-position: left, right;
3118
}
3119
}
3120
&.vertical > separator {
3122
margin: 0 0 -8px 0;
3123
padding: 0 0 8px 0;
3124
background-repeat: repeat-x;
3125
background-position: top;
3126
&.wide {
3128
margin: 0;
3129
padding: 0;
3130
background-repeat: repeat-x, repeat-x;
3131
background-position: bottom, top;
3132
}
3133
}
3134
}
3135
/**************
3138
* GtkInfoBar *
3139
**************/
3140
infobar {
3141
border-style: none;
3142
&.info { background-color: $info_bg_color; }
3144
&.question { background-color: $question_bg_color; }
3146
&.warning { background-color: $warning_bg_color; }
3148
&.error { background-color: $error_bg_color; }
3150
&.info,
3152
&.question,
3153
&.warning,
3154
&.error {
3155
> label, & { color: $inverse_fg_color; }
3156
button { @extend %button_selected; }
3158
selection {}
3160
*:link { @extend %link_selected; }
3162
}
3163
}
3164
/************
3167
* Tooltips *
3168
************/
3169
tooltip {
3170
&.background {
3171
// background-color needs to be set this way otherwise it gets drawn twice
3172
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3173
box-shadow: inset 0 1px $highlight_color;
3174
background-color: rgba($base_color, $higher_opacity);
3175
}
3176
// @extend %osd;
3178
// padding: 4px; /* not working */
3180
border-radius: 2px;
3181
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3182
&:not(.csd):not(.unity-csd) {
3184
border: 1px solid $border_color;
3185
border-radius: 2px + 1px;
3186
background-clip: $extra_background_clip;
3187
}
3188
// FIXME: we need a border or tooltips vanish on black background.
3190
decoration { background-color: transparent; }
3191
label {
3193
// tooltip label already seems to have 6px margins
3194
min-height: 32px - 6px * 2;
3195
padding: 0 8px - 6px;
3196
}
3197
* {
3199
// workaround for Eclipse.
3200
// do not include any declaration here.
3201
// padding: 0;
3202
// background-color: transparent;
3203
// color: inherit;
3204
}
3205
}
3206
/*****************
3209
* Color Chooser *
3210
*****************/
3211
colorswatch {
3212
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3213
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3214
// applied to the overlay box.
3215
// base color corners rounding
3217
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3218
// sports a bigger radius.
3219
// nth-child is needed by the custom color strip.
3220
&.top {
3222
border-top-left-radius: $material_radius + 0.5px;
3223
border-top-right-radius: $material_radius + 0.5px;
3224
overlay {
3226
border-top-left-radius: $material_radius;
3227
border-top-right-radius: $material_radius;
3228
}
3229
}
3230
&.bottom {
3232
border-bottom-left-radius: $material_radius + 0.5px;
3233
border-bottom-right-radius: $material_radius + 0.5px;
3234
overlay {
3236
border-bottom-left-radius: $material_radius;
3237
border-bottom-right-radius: $material_radius;
3238
}
3239
}
3240
&.left,
3242
&:first-child:not(.top) {
3243
border-top-left-radius: $material_radius + 0.5px;
3244
border-bottom-left-radius: $material_radius + 0.5px;
3245
overlay {
3247
border-top-left-radius: $material_radius;
3248
border-bottom-left-radius: $material_radius;
3249
}
3250
}
3251
&.right,
3253
&:last-child:not(.bottom) {
3254
border-top-right-radius: $material_radius + 0.5px;
3255
border-bottom-right-radius: $material_radius + 0.5px;
3256
overlay {
3258
border-top-right-radius: $material_radius;
3259
border-bottom-right-radius: $material_radius;
3260
}
3261
}
3262
&.dark { color: $light_fg_color; }
3264
&.light { color: $dark_fg_color; }
3266
&:drop(active) {
3268
box-shadow: none;
3269
&.light overlay { box-shadow: $shadow_1, 0 0 0 2px $accent_color; }
3271
&.dark overlay { box-shadow: $shadow_1, 0 0 0 2px $accent_color; }
3273
}
3274
overlay {
3276
transition: $shadow_transition;
3277
box-shadow: $shadow_1;
3278
&:hover { box-shadow: $shadow_2; }
3280
}
3281
&#add-color-button {
3283
border-radius: $material_radius $material_radius 0 0;
3284
color: $light_fg_color;
3285
&:only-child { border-radius: $material_radius; }
3287
overlay {
3289
background-image: linear-gradient(to right,
3290
$error_bg_color 25%,
3291
$warning_bg_color 25%, $warning_bg_color 50%,
3292
$info_bg_color 50%, $info_bg_color 75%,
3293
$question_bg_color 75%);
3294
}
3295
}
3296
&:disabled {
3298
opacity: $disabled_opacity;
3299
overlay { box-shadow: none; }
3301
}
3302
row:selected & {
3304
}
3305
&#editor-color-sample {
3307
border-radius: $material_radius + 0.5px;
3308
overlay { border-radius: $material_radius; }
3310
// overlay:hover { box-shadow: $shadow_1; }
3312
}
3313
}
3314
// colorscale popup
3316
colorchooser .popover.osd {
3317
transition: $shadow_transition;
3318
border-radius: 2px;
3319
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3320
background-color: $base_color;
3321
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3323
spinbutton:not(.vertical) { @extend %entry.flat; }
3325
}
3326
/********
3329
* Misc *
3330
********/
3331
// content view (grid/list)
3332
.content-view {
3333
background-color: $bg_color;
3334
// &:hover { -gtk-icon-effect: highlight; }
3336
rubberband, .rubberband { @extend rubberband; }
3338
}
3339
.scale-popup {
3341
.osd & { @extend %osd; }
3342
.osd & button.flat { // FIXME: quick hack, redo properly
3344
}
3345
button { // +/- buttons on GtkVolumeButton popup
3347
}
3348
}
3349
/**********************
3352
* Window Decorations *
3353
**********************/
3354
decoration {
3355
transition: $shadow_transition;
3356
border-radius: 2px 2px 0 0;
3357
box-shadow: $shadow_4, 0 16px 16px transparent;
3358
// FIXME rationalize shadows
3360
// this is used for the resize cursor area
3362
margin: 8px;
3363
&:backdrop {
3365
// the transparent shadow here is to enforce that the shadow extents don't
3366
// change when we go to backdrop, to prevent jumping windows.
3367
// The biggest shadow should be in the same order then in the active state
3368
// or the jumping will happen during the transition.
3369
box-shadow: $shadow_2, 0 16px 16px transparent;
3370
}
3371
.maximized &,
3373
.fullscreen &,
3374
.tiled &,
3375
.tiled-top &,
3376
.tiled-right &,
3377
.tiled-bottom &,
3378
.tiled-left & { border-radius: 0; }
3379
.popup & { box-shadow: none; }
3381
// server-side decorations as used by mutter
3383
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3384
.csd.popup & {
3386
border-radius: 2px;
3387
box-shadow: $shadow_2;
3388
}
3389
tooltip.csd & {
3391
border-radius: 2px;
3392
box-shadow: $shadow_2;
3393
}
3394
messagedialog.csd & {
3396
border-radius: 2px;
3397
// box-shadow: $shadow_4, 0 16px 16px transparent;
3398
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3400
}
3401
.solid-csd & {
3403
margin: 0;
3404
// padding: 4px;
3405
border-radius: 0;
3406
box-shadow: none;
3407
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3408
background-color: $titlebar_bg_color;
3409
}
3410
}
3411
// Window Close button
3413
button.titlebutton {
3414
// @extend %simple_flat_button;
3415
@extend %circular_button;
3417
.selection-mode & {
3419
}
3420
}
3421
// catch all extend :)
3424
%selected_items {
3426
background-color: $primary_color;
3427
@at-root %nobg_selected_items, & {
3429
color: $inverse_fg_color;
3430
&:disabled { color: $inverse_disabled_fg_color; }
3432
}
3433
}
3434
.monospace { font-family: monospace; }
3436
/**********************
3439
* Touch Copy & Paste *
3440
**********************/
3441
// touch selection handlebars for the Popover.osd above
3442
cursor-handle {
3443
border-radius: $circular_radius;
3444
background-color: $accent_color;
3445
background-image: none;
3446
&.top:dir(ltr), &.bottom:dir(rtl) {
3448
padding-left: 6px;
3449
border-top-right-radius: 0;
3450
}
3451
&.bottom:dir(ltr), &.top:dir(rtl) {
3453
padding-right: 6px;
3454
border-top-left-radius: 0;
3455
}
3456
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3458
-GtkWidget-text-handle-width: 24;
3459
-GtkWidget-text-handle-height: 30;
3460
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3462
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3463
url('#{$_url}@2.png'));
3464
}
3465
}
3466
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3468
// shortcut window keys
3470
.keycap {
3471
min-width: 28px - 8px * 2;
3472
min-height: 28px - 2px;
3473
margin-top: 2px;
3474
padding-bottom: 2px;
3475
padding-left: 8px;
3476
padding-right: 8px;
3477
border: solid 1px $border_color;
3479
border-radius: 2px + 1px;
3480
box-shadow: inset 0 -2px $border_color;
3481
background-color: $base_color;
3482
color: $fg_color;
3483
font-size: smaller;
3484
}
3485
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3487
transition: $longer_transition;
3488
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3489
caret-color: $accent_color;
3490
}
3491
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3493
stackswitcher button.circular,
3495
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3496
min-width: $medium_size;
3497
min-height: $medium_size;
3498
padding: 0;
3499
}
3500
/*********
3503
* Emoji *
3504
*********/
3505
popover.emoji-picker {
3506
padding: 0;
3507
entry {
3509
border-bottom: 1px solid $border_color;
3510
border-bottom-left-radius: 0;
3511
border-bottom-right-radius: 0;
3512
box-shadow: none;
3513
}
3514
scrolledwindow { border-bottom: 1px solid $border_color; }
3516
}
3517
// mimic tab style
3519
button.emoji-section {
3520
margin-top: -1px;
3521
padding: 0 8px;
3522
min-width: 24px;
3523
min-height: $medium_size;
3524
border-radius: 0;
3525
outline-offset: -6px;
3526
box-shadow: none;
3527
&:hover { box-shadow: inset 0 2px $track_color; }
3529
&:active {
3531
box-shadow: inset 0 2px $primary_color;
3532
background-image: radial-gradient(circle farthest-corner at center,
3533
rgba($primary_color, 0.7) 10%,
3534
transparent 0%);
3535
}
3536
&:checked {
3538
box-shadow: inset 0 2px $primary_color;
3539
background-color: transparent;
3540
}
3541
&:first-child { margin-left: 4px; }
3543
&:last-child { margin-right: 4px; }
3545
}
3546
.emoji {
3548
min-width: 3em;
3549
min-height: 3em;
3550
padding: 0;
3551
// font-size: large;
3552
widget {
3554
transition: $shorter_transition;
3555
&:hover { font-size: larger; }
3557
}
3558
}
3559