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: scale-alpha($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
@keyframes spin_colors {
197
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
198
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
199
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
200
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
201
}
202
spinner {
204
background: none;
205
opacity: 0; // non spinning spinner makes no sense
206
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
207
&:checked {
209
opacity: 1;
210
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
211
&:disabled { opacity: $disabled_opacity; }
213
}
214
}
215
/****************
218
* Text Entries *
219
****************/
220
%entry,
221
entry {
222
%entry_basic, & {
223
min-height: $medium_size;
224
padding: 0 8px;
225
border-radius: 2px;
226
@include entry(normal);
228
&:focus { @include entry(focus); }
230
&:disabled { @include entry(disabled); }
232
&.flat {
234
border-radius: 0;
235
@include entry(flat-normal);
237
&:focus { @include entry(flat-focus); }
239
&:disabled { @include entry(flat-disabled); }
241
}
242
image { // icons inside the entry
244
// @extend %simple_flat_button;
245
// min-height: $small_size;
247
// min-width: $small_size;
248
// border-radius: $circular_radius;
249
// -gtk-outline-radius: $circular_radius;
250
color: gtkalpha(currentColor, $secondary_opacity);
251
&:hover, &:active { color: currentColor; }
253
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
255
&.left { margin-left: 2px; margin-right: 6px; }
257
&.right { margin-left: 6px; margin-right: 2px; }
259
}
260
undershoot {
262
&.left { @include undershoot(left); }
263
&.right { @include undershoot(right); }
265
}
266
selection { @extend %selected_items; }
268
// entry error and warning style
270
@each $e_type, $e_color in (error, $error_color),
271
(warning, $warning_color) {
272
&.#{$e_type} {
273
@include entry(normal, $e_color);
274
&:focus { @include entry(focus, $e_color); }
276
&:disabled { @include entry(disabled, $e_color); }
278
&.flat {
280
@include entry(flat-normal, $e_color);
281
&:focus { @include entry(flat-focus, $e_color); }
283
&:disabled { @include entry(flat-disabled, $e_color); }
285
}
286
}
287
}
288
&:drop(active) {
290
// box-shadow: inset 0 0 0 2px $accent_color;
291
}
292
.osd & {
294
}
295
}
296
progress {
298
margin: 2px (2px - 8px);
299
border-bottom: 2px solid $primary_color;
300
background-color: transparent;
301
}
302
// linked entries
304
.linked:not(.vertical) > & { @extend %linked; }
305
// Vertically linked entries
307
.linked.vertical > & { @extend %linked_vertical; }
308
.linked:not(.vertical) > &.flat,
310
.linked.vertical > &.flat { border-radius: 0; }
311
}
312
treeview entry {
314
&.flat, & {
315
min-height: 0;
316
padding: 2px;
317
border-radius: 0;
318
background-color: $base_color;
319
&, &:focus {
321
border-image: none;
322
box-shadow: none;
323
}
324
}
325
}
326
/***********
329
* Buttons *
330
***********/
331
// stuff for .needs-attention
332
@keyframes needs_attention {
333
from {
334
background-image: -gtk-gradient(radial,
335
center center, 0,
336
center center, 0.001,
337
to($accent_color),
338
to(transparent));
339
}
340
to {
342
background-image: -gtk-gradient(radial,
343
center center, 0,
344
center center, 0.5,
345
to($accent_color),
346
to(transparent));
347
}
348
}
349
%button,
351
button {
352
@at-root %button_basic, & {
353
min-height: 24px;
354
min-width: 16px;
355
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
356
border-radius: 2px;
357
font-weight: 500;
358
@include button(normal);
360
&:hover { @include button(hover); }
362
&:active { @include button(active); }
364
&:disabled { @include button(disabled); }
366
&:checked { @include button(checked); }
368
&:checked:disabled { @include button(checked-disabled); }
370
@at-root %flat_button, &.flat {
372
@at-root %simple_flat_button, & {
373
@include button(flat-normal);
374
&:hover { @include button(flat-hover); }
376
&:active { @include button(flat-active); }
378
&:disabled { @include button(flat-disabled); }
380
}
381
&:checked { @include button(flat-checked); }
383
&:checked:disabled { @include button(flat-checked-disabled); }
385
}
386
&.text-button {
388
padding-left: 16px;
389
padding-right: 16px;
390
}
391
&.image-button {
393
min-width: 24px;
394
padding: ($medium_size - 24px) / 2;
395
&:not(.text-button) { @extend %circular_button; }
397
}
398
&.text-button.image-button {
400
label {
401
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
402
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
404
}
405
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
407
}
408
.linked > & { @extend %linked; }
410
.linked.vertical > & { @extend %linked_vertical; }
412
.linked > &.flat,
414
.linked.vertical > &.flat {
415
border-radius: 2px;
416
&.image-button:not(.text-button) { @extend %circular_button; }
418
}
419
&:drop(active) {
421
// box-shadow: inset 0 0 0 2px $accent_color;
422
}
423
}
424
@at-root %button_selected, row:selected & {
426
&:disabled { color: $disabled_secondary_inverse_fg_color; }
427
}
428
// big standalone buttons like in Documents pager
430
&.osd {
431
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
432
&.image-button { padding: ($large_size - 24px) / 2; }
434
&:disabled { opacity: 0; }
436
}
437
// overlay / OSD style
439
@at-root %osd_button,
440
.osd & {
441
}
442
// Suggested and Destructive Action buttons
444
@each $b_type, $b_color in (suggested-action, $suggested_color),
445
(destructive-action, $destructive_color) {
446
&.#{$b_type} {
447
background-color: $b_color;
448
color: $inverse_fg_color;
449
&:disabled { @include button(disabled, $b_color); }
451
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
453
&.flat {
455
background-color: transparent;
456
color: $b_color;
457
&:disabled { @include button(flat-disabled, $b_color); }
459
&:checked { background-color: $fill_color; }
461
}
462
.osd & {
464
}
465
}
466
}
467
.stack-switcher > & {
469
// to position the needs attention dot, padding is added to the button
470
// child, a label needs just lateral padding while an icon needs vertical
471
// padding added too.
472
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
474
> label {
476
padding-left: 6px; // label padding
477
padding-right: 6px; //
478
}
479
> image {
481
padding-left: 6px; // image padding
482
padding-right: 6px; //
483
padding-top: 3px; //
484
padding-bottom: 3px; //
485
}
486
&.text-button {
488
// compensate text-button paddings
489
padding-left: 16px - 6px;
490
padding-right: 16px - 6px;
491
}
492
&.image-button {
494
// we want image buttons to have a 1:1 aspect ratio, so compensation
495
// of the padding added to the GtkImage is needed
496
padding-left: ($medium_size - 16px) / 2 - 6px;
497
padding-right: ($medium_size - 16px) / 2 - 6px;
498
}
499
&.needs-attention {
501
> label,
502
> image { @extend %needs_attention; }
503
&:checked {
505
> label,
506
> image {
507
animation: none;
508
background-image: none;
509
}
510
}
511
}
512
}
513
// hide separators
515
&.font,
516
&.file { separator { @extend %hide_separators; }}
517
// &.font { > box > box > label { font-weight: bold; }}
519
// inline-toolbar buttons
521
.inline-toolbar & {
522
// @extend %button_basic.flat;
523
&:not(.text-button) { @extend %circular_button; }
525
}
526
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
528
@at-root %circular_button,
530
&.close,
531
&.circular { // The Bloody Circul Button
532
border-radius: $circular_radius;
533
-gtk-outline-radius: $circular_radius;
534
// label { padding: 0; }
536
}
537
@at-root %small_button {
539
min-height: $small_size;
540
min-width: $small_size;
541
padding: 0;
542
border-radius: $circular_radius;
543
-gtk-outline-radius: $circular_radius;
544
}
545
}
546
%needs_attention {
548
animation: needs_attention $longer_duration $deceleration_curve forwards;
549
background-repeat: no-repeat;
550
background-position: right 3px;
551
background-size: 6px 6px;
552
&:dir(rtl) { background-position: left 3px; }
554
}
555
// all the following is for the +|- buttons on inline toolbars, that way
557
// should really be deprecated...
558
.inline-toolbar toolbutton > button { // redefining the button look is
559
// needed since those are flat...
560
}
561
// More inline toolbar buttons
563
toolbar.inline-toolbar toolbutton {
564
// > button.flat { @extend %linked_middle; }
565
// &:first-child > button.flat { @extend %linked:first-child; }
567
// &:last-child > button.flat { @extend %linked:last-child; }
569
// &:only-child > button.flat { @extend %linked:only-child; }
571
}
572
%linked_middle {
574
border-radius: 0;
575
-gtk-outline-radius: 2px;
576
}
577
%linked {
579
@extend %linked_middle;
580
&:first-child {
582
border-top-left-radius: 2px;
583
border-bottom-left-radius: 2px;
584
}
585
&:last-child {
587
border-top-right-radius: 2px;
588
border-bottom-right-radius: 2px;
589
}
590
&:only-child {
592
border-radius: 2px;
593
}
594
}
595
%linked_vertical_middle {
597
border-radius: 0;
598
-gtk-outline-radius: 2px;
599
}
600
%linked_vertical {
602
@extend %linked_vertical_middle;
603
&:first-child {
605
border-top-left-radius: 2px;
606
border-top-right-radius: 2px;
607
}
608
&:last-child {
610
border-bottom-left-radius: 2px;
611
border-bottom-right-radius: 2px;
612
}
613
&:only-child {
615
border-radius: 2px;
616
}
617
}
618
/* menu buttons */
620
modelbutton.flat,
621
.menuitem.button.flat {
622
min-height: $menuitem_size;
623
padding: 0 8px;
624
border-radius: 2px;
625
color: inherit;
626
@extend %simple_flat_button;
628
&:selected { @extend %selected_items; }
630
}
631
modelbutton.flat arrow {
633
background: none;
634
&:hover { background: none; }
636
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
638
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
640
}
641
button.color {
643
min-height: $small_size;
644
min-width: $small_size;
645
padding: $container_padding;
646
colorswatch:only-child {
648
// &, overlay { border-radius: 0; }
649
}
650
}
651
/*********
654
* Links *
655
*********/
656
*:link {
657
&, &:hover, &:active { color: $link_color; }
658
&:visited {
660
&, &:hover, &:active { color: $visited_link_color; }
661
}
662
@at-root %link_selected,
664
&:selected,
665
*:selected & { color: $inverse_fg_color; }
666
}
667
button:link,
669
button:visited {
670
@extend *:link;
671
> label { text-decoration-line: underline; }
673
}
674
/*****************
676
* GtkSpinButton *
677
*****************/
678
spinbutton {
679
&:not(.vertical) {
680
// in this horizontal configuration, the whole spinbutton
681
// behaves as the entry, so we extend the entry styling
682
// and nuke the style on the internal entry
683
@extend %entry;
684
padding: 0;
686
%spinbutton_entry,
688
entry {
689
min-width: $large_size - 8px * 2;
690
// reset all the other props since the spinbutton node is styled here
691
margin: 0;
692
border-image: none;
693
border-radius: 0;
694
box-shadow: none;
695
background-color: transparent;
696
//
697
// This will help to simplify spinbutton's code, but unfortunatelly
698
// doesn't work properly in :dir(rtl). It needs z-index property.
699
//
700
// min-width: $large_size - 8px;
701
//
702
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
703
//
704
// &:dir(ltr) {
705
// margin-right: -$spinbuttons_width;
706
// padding-right: $spinbuttons_width;
707
// }
708
//
709
// &:dir(rtl) {
710
// margin-left: -$spinbuttons_width;
711
// padding-left: $spinbuttons_width;
712
// }
713
}
714
button {
716
// margin: $container_padding;
717
border: solid $container_padding transparent;
718
@extend %simple_flat_button;
720
@extend %small_button;
722
&.up:dir(ltr),
724
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
725
&.up:dir(rtl),
727
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
728
}
729
}
730
// OSD horizontal
732
.osd &:not(.vertical) {
733
button {
734
}
735
}
736
// Vertical
738
&.vertical {
739
// in the vertical configuration, we treat the spinbutton
740
// as a box, and tweak the style of the entry in the middle
741
// so that it's linked
742
// FIXME: this should not be set at all, but otherwise it gets the wrong
744
// color
745
&:disabled { color: $disabled_fg_color; }
746
&:drop(active) {
748
box-shadow: none;
749
}
750
entry {
752
min-height: $medium_size;
753
min-width: $large_size;
754
padding: 0;
755
}
756
button {
758
min-height: $medium_size;
759
min-width: $large_size;
760
padding: 0;
761
@extend %simple_flat_button;
763
&.up { border-radius: 2px 2px 0 0; }
765
&.down { border-radius: 0 0 2px 2px; }
767
}
768
}
769
// OSD vertical
771
.osd &.vertical button:first-child {
772
}
773
// Misc
775
treeview &:not(.vertical) {
776
min-height: 0;
777
border-style: none;
778
border-radius: 0;
779
entry {
781
min-height: 0;
782
padding: 1px 2px;
783
}
784
}
785
}
786
/**************
789
* ComboBoxes *
790
**************/
791
combobox {
792
arrow {
793
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
794
min-height: 16px;
795
min-width: 16px;
796
}
797
decoration,
799
button.combo:checked { transition: none; } // workaround for menuitem selection
800
button.combo cellview {
802
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
803
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
804
}
805
#gtk-combobox-popup-menu {
807
padding: 2px 0;
808
menuitem {
810
min-height: $medium_size - 2px * 2;
811
padding: 0 8px;
812
}
813
// overflow arrows
815
> arrow {
816
&.top { margin-top: -2px; }
817
&.bottom { margin-bottom: -2px * 3; }
819
}
820
}
821
&.linked {
823
button:nth-child(2) {
824
&:dir(ltr) { @extend %linked:last-child; }
825
&:dir(rtl) { @extend %linked:first-child; }
826
}
827
}
828
&:drop(active) { // FIXME: untested
830
box-shadow: none;
831
// button.combo { @extend %button_basic:drop(active); }
833
}
834
}
835
// the combo is a composite widget so the way we do button linking doesn't
837
// work, special case needed. See
838
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
839
.linked:not(.vertical) > combobox {
841
> box > button.combo { @extend %linked_middle; }
842
&:first-child > box > button.combo { @extend %linked:first-child; }
844
&:last-child > box > button.combo { @extend %linked:last-child; }
846
&:only-child > box > button.combo { @extend %linked:only-child; }
848
}
849
.linked.vertical > combobox {
851
> box > button.combo { @extend %linked_vertical_middle; }
852
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
854
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
856
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
858
}
859
%combo_flat {
861
border-radius: 0;
862
background-image: none;
863
font-weight: inherit;
864
@include entry(flat-normal);
866
&:hover { box-shadow: inset 0 -2px $fill_color; }
868
&:checked {
870
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
871
$primary_color 100%,
872
transparent 0%)
873
0 0 2 / 0 0 2px;
874
}
875
&:disabled { color: $disabled_fg_color; }
877
}
878
/************
881
* Toolbars *
882
************/
883
toolbar {
884
-GtkWidget-window-dragging: true;
885
padding: $container_padding / 2;
886
background-color: $bg_color;
887
button { @extend %button_basic.flat; }
889
// on OSD
891
.osd & { background-color: transparent; }
892
// stand-alone OSD toolbars
894
&.osd {
895
transition: $shadow_transition;
896
padding: $container_padding;
897
border-radius: 2px;
898
box-shadow: $shadow_2, inset 0 1px $highlight_color;
899
background-color: $base_color;
900
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
902
&.left,
904
&.right,
905
&.top,
906
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
907
}
908
// toolbar separators
910
&.horizontal separator { margin: $container_padding / 2; }
911
&.vertical separator { margin: $container_padding / 2; }
912
&:not(.inline-toolbar):not(.osd) {
914
scale,
915
entry,
916
spinbutton,
917
button { margin: $container_padding / 2; }
918
.linked entry,
920
.linked spinbutton,
921
.linked button {
922
&:not(:first-child) { margin-left: 0; }
923
&:not(:last-child) { margin-right: 0; }
924
}
925
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
927
}
928
}
929
// searchbar, location-bar & inline-toolbar
931
.inline-toolbar {
932
padding: $container_padding;
933
border-style: solid;
934
border-width: 0 1px 1px;
935
border-color: $border_color;
936
background-color: $alt_base_color;
937
}
938
searchbar,
940
.location-bar {
941
padding: $container_padding;
942
border-style: solid;
943
border-width: 0 0 1px;
944
border-color: $border_color;
945
background-color: $bg_color;
946
background-clip: border-box;
947
}
948
/***************
951
* Header bars *
952
***************/
953
%titlebar,
954
headerbar {
955
transition: background-color $shorter_duration $deceleration_curve;
956
min-height: $large_size;
957
padding: 0 $container_padding;
958
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
959
background-color: $titlebar_bg_color;
960
color: $titlebar_fg_color;
961
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
963
&:backdrop {
965
color: $secondary_titlebar_fg_color;
966
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
968
}
969
.title {
971
transition: $longer_transition;
972
padding: 0 12px;
973
font-weight: bold;
974
}
975
.subtitle {
977
transition: $longer_transition;
978
padding: 0 12px;
979
font-size: smaller;
980
@extend .dim-label;
982
}
983
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
985
button:not(.suggested-action):not(.destructive-action) {
987
@extend %button_basic.flat;
988
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
990
$titlebar_indicator_color 0%,
991
transparent 0%)
992
0 0 0 / 0 0 0px;
993
&:checked {
995
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
996
$titlebar_indicator_color 100%,
997
transparent 0%)
998
0 0 2 / 0 0 2px;
999
&, &:disabled { background-color: transparent; }
1001
}
1002
}
1003
button.suggested-action, button.destructive-action {
1005
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1006
}
1007
&.selection-mode {
1009
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1010
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1011
transition: background-color 0.00001s $longer_duration;
1012
animation: header_ripple_effect $longer_duration $deceleration_curve;
1013
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1014
background-color: $primary_color;
1015
color: $inverse_fg_color;
1016
&:backdrop {
1018
color: $secondary_inverse_fg_color;
1019
}
1020
.subtitle:link { @extend *:link:selected; }
1022
button:not(.suggested-action):not(.destructive-action) {
1024
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1025
currentColor 0%,
1026
transparent 0%)
1027
0 0 0 / 0 0 0px;
1028
color: currentColor;
1029
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1031
&:checked {
1033
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1034
currentColor 100%,
1035
transparent 0%)
1036
0 0 2 / 0 0 2px;
1037
color: currentColor;
1038
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1040
}
1041
}
1042
.selection-menu {
1044
padding-left: 16px;
1045
padding-right: 16px;
1046
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1048
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1050
}
1051
}
1052
.fullscreen &,
1054
.tiled &,
1055
.maximized & {
1056
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1057
box-shadow: $shadow_1;
1058
}
1059
&.default-decoration {
1061
min-height: $small_size;
1062
padding: $container_padding;
1063
box-shadow: inset 0 1px $titlebar_highlight_color;
1064
.fullscreen &,
1066
.tiled &,
1067
.maximized & { box-shadow: none; }
1068
button.titlebutton {
1070
min-height: $small_size;
1071
min-width: $small_size;
1072
margin: 0;
1073
padding: 0;
1074
}
1075
// workaround for non-animatable buttons
1077
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1078
}
1079
.solid-csd & {
1081
&:dir(rtl), &:dir(ltr) { // specificity bump
1082
// margin-left: -2px;
1083
// margin-right: -2px;
1084
// margin-top: -2px;
1085
// border-radius: 0;
1086
// box-shadow: inset 0 1px $titlebar_highlight_color;
1087
}
1088
}
1089
}
1090
headerbar {
1092
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1093
entry,
1094
spinbutton,
1095
// separator,
1096
button {
1097
margin-top: $container_padding;
1098
margin-bottom: $container_padding;
1099
}
1100
switch {
1102
margin-top: $container_padding * 2;
1103
margin-bottom: $container_padding * 2;
1104
}
1105
// reset button margins of the spinbutton
1107
spinbutton button {
1108
margin-top: 0;
1109
margin-bottom: 0;
1110
}
1111
}
1112
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1114
border-top-left-radius: 2px;
1115
border-top-right-radius: 2px;
1116
}
1117
headerbar { // headerbar border rounding
1119
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1120
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1121
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1123
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1125
&:first-child, &:last-child {
1126
border-top-left-radius: 2px;
1127
border-top-right-radius: 2px;
1128
}
1129
}
1130
}
1131
.titlebar:not(headerbar) {
1133
window.csd > & {
1134
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1135
padding: 0;
1136
background-color: transparent;
1137
background-image: none;
1138
border-style: none;
1139
box-shadow: none;
1140
}
1141
> separator {
1143
background-color: $titlebar_bg_color;
1144
background-image: image($border_color);
1145
}
1146
@extend %titlebar;
1148
}
1149
/************
1152
* Pathbars *
1153
************/
1154
%pathbar_button,
1155
.path-bar button {
1156
padding-left: ($medium_size - 24px) / 2;
1157
padding-right: ($medium_size - 24px) / 2;
1158
label:not(:only-child) {
1160
&:first-child { margin-left: 4px; }
1161
&:last-child { margin-right: 4px; }
1163
}
1164
&.slider-button {
1166
padding-left: (24px - 16px) / 2;
1167
padding-right: (24px - 16px) / 2;
1168
}
1169
:not(headerbar) & {
1171
@extend %flat_button;
1172
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1174
$primary_color 0%,
1175
transparent 0%)
1176
0 0 0 / 0 0 0px;
1177
border-radius: 2px;
1178
&:checked {
1180
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1181
$primary_color 100%,
1182
transparent 0%)
1183
0 0 2 / 0 0 2px;
1184
&, &:disabled { background-color: transparent; }
1186
}
1187
}
1188
}
1189
/**************
1192
* Tree Views *
1193
**************/
1194
treeview.view {
1195
@at-root * {
1196
-GtkTreeView-horizontal-separator: 4;
1197
-GtkTreeView-grid-line-width: 1;
1198
-GtkTreeView-grid-line-pattern: '';
1199
-GtkTreeView-tree-line-width: 1;
1200
-GtkTreeView-tree-line-pattern: '';
1201
-GtkTreeView-expander-size: 16;
1202
}
1203
border-left-color: $fill_color; // this is actually the tree lines color,
1205
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1206
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1208
&:hover, &:active, &:selected { border-radius: 0; }
1210
&.separator {
1212
min-height: 1px + 2px * 2;
1213
color: $border_color;
1214
}
1215
&:drop(active) {
1217
border-style: solid none;
1218
border-width: 1px;
1219
border-color: $accent_color;
1220
&.after { border-top-style: none; }
1222
&.before { border-bottom-style: none; }
1224
}
1225
&.expander {
1227
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1228
-gtk-icon-transform: rotate(-90deg);
1229
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1231
&:checked { -gtk-icon-transform: unset; }
1233
color: $secondary_fg_color;
1235
&:hover, &:active { color: $fg_color; }
1237
&:disabled { color: $disabled_secondary_fg_color; }
1239
&:selected {
1241
color: $secondary_inverse_fg_color;
1242
&:hover, &:active { color: $inverse_fg_color; }
1244
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1246
}
1247
}
1248
&.progressbar { // progress bar in treeviews
1250
border-bottom: $bar_size solid $primary_color;
1251
box-shadow: none;
1252
background-color: transparent;
1253
&:selected { border-bottom-color: currentColor; }
1255
}
1256
&.trough { // progress bar trough in treeviews
1258
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1259
box-shadow: none;
1260
background-color: transparent;
1261
&:selected { border-bottom-color: $fill_color; }
1263
}
1264
header {
1266
button {
1267
@extend row.activatable;
1268
padding: 2px 6px;
1270
border-style: none solid solid none;
1271
border-width: 1px;
1272
border-color: $border_color;
1273
border-radius: 0;
1274
background-clip: border-box;
1275
&, &:hover, &:active { box-shadow: none; }
1277
&, &:disabled { background-color: $base_color; }
1279
&:last-child { border-right-style: none; }
1281
}
1282
}
1283
button.dnd,
1285
header.button.dnd { // for treeview-like derive widgets
1286
padding: 2px 6px;
1287
border-style: none solid solid;
1288
border-width: 1px;
1289
border-color: $border_color;
1290
border-radius: 0;
1291
box-shadow: none;
1292
background-color: $base_color;
1293
background-clip: border-box;
1294
color: $primary_color;
1295
}
1296
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1298
}
1299
/*********
1302
* Menus *
1303
*********/
1304
menubar,
1305
.menubar {
1306
-GtkWidget-window-dragging: true;
1307
padding: 0;
1308
// box-shadow: inset 0 -1px $border_color;
1309
background-color: $titlebar_bg_color;
1310
> menuitem {
1312
transition: $shorter_transition;
1313
min-height: 20px;
1314
padding: 4px 8px;
1315
color: $secondary_titlebar_fg_color;
1316
&:hover { // Seems like it :hover even with keyboard focus
1318
transition: none;
1319
background-color: $semi_fill_color;
1320
color: $titlebar_fg_color;
1321
}
1322
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1324
}
1325
}
1326
.csd.popup { border-radius: 2px; }
1328
menu,
1330
.menu,
1331
.context-menu {
1332
margin: 4px 0;
1333
padding: 4px 0;
1334
box-shadow: inset 0 1px $highlight_color;
1335
background-color: $base_color;
1336
border: 1px solid $border_color; // adds borders in a non composited env
1337
.csd & {
1339
border: none; // axes borders in a composited env
1340
border-radius: 2px;
1341
}
1342
menuitem {
1344
transition: $shorter_transition;
1345
min-height: 20px;
1346
min-width: 40px;
1347
padding: 4px 8px;
1348
font: initial;
1349
text-shadow: none;
1350
&:hover {
1352
transition: none;
1353
background-color: $semi_fill_color;
1354
}
1355
&:disabled { color: $disabled_fg_color; }
1357
// submenu indicators
1359
arrow {
1360
min-height: 16px;
1361
min-width: 16px;
1362
&:dir(ltr) {
1364
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1365
margin-left: 8px;
1366
}
1367
&:dir(rtl) {
1369
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1370
margin-right: 8px;
1371
}
1372
}
1373
// avoids labels color being overridden, see
1375
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1376
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1377
}
1378
// overflow arrows
1380
> arrow {
1381
min-height: 16px;
1382
min-width: 16px;
1383
padding: 4px;
1384
background-color: $base_color;
1385
color: $secondary_fg_color;
1386
&.top {
1388
margin-top: -4px;
1389
border-bottom: 1px solid $border_color;
1390
border-radius: 2px 2px 0 0;
1391
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1392
}
1393
&.bottom {
1395
margin-bottom: -4px * 3;
1396
border-top: 1px solid $border_color;
1397
border-radius: 0 0 2px 2px;
1398
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1399
}
1400
&:hover {
1402
background-image: image($semi_fill_color);
1403
color: $fg_color;
1404
}
1405
&:disabled {
1407
border-color: transparent;
1408
background-color: transparent;
1409
color: transparent;
1410
// color: $disabled_secondary_fg_color;
1411
}
1412
}
1413
separator { margin: 4px 0; }
1415
}
1416
menuitem {
1418
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1419
}
1420
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1422
// Electron/Atom render all translucent colors in opaque colors.
1423
// It's a very critical issue for this theme and should be fixed by upstream...
1424
.popup:not(.csd) menu {
1425
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1426
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1427
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1428
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1429
menuitem {
1431
color: $opaque_fg_color;
1432
&:hover { background-color: $opaque_semi_fill_color; }
1434
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1436
}
1437
// TODO: not working this, where/how i can set the accelerators?
1439
accelerator { color: $opaque_tertiary_fg_color; }
1440
}
1441
/************
1444
* Popovers *
1445
************/
1446
popover.background {
1447
transition: $shadow_transition;
1448
padding: 2px;
1449
box-shadow: $shadow_2; // TODO: this should really have a highlight
1450
background-color: $lighter_bg_color;
1451
&:backdrop { box-shadow: $shadow_1; }
1453
&, .csd & {
1455
border-style: solid;
1456
border-width: 1px;
1457
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1458
border-radius: 2px + 1px;
1459
}
1460
> stack { margin: -4px; } // remove extra padding from menu style popovers
1462
> toolbar { margin: -2px; }
1464
> list,
1466
> .view,
1467
> toolbar {
1468
border-style: none;
1469
box-shadow: none;
1470
background-color: transparent;
1471
}
1472
&.touch-selection,
1474
&.magnifier,
1475
&.osd { @extend %osd; }
1476
// entry { @extend %entry.flat; }
1478
// button.combo { @extend %combo_flat; }
1480
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1482
&.menu button,
1484
button.model {
1485
@extend %simple_flat_button;
1486
min-height: 32px;
1488
padding: 0 8px;
1489
border-radius: 2px;
1490
&:checked { @extend %selected_items; }
1492
}
1493
separator { margin: 4px 0; }
1495
list separator { margin: 0; }
1497
}
1498
/*************
1500
* Notebooks *
1501
*************/
1502
notebook {
1503
> header {
1504
border-width: 1px;
1505
border-color: $border_color;
1506
background-color: $bg_color;
1507
background-clip: border-box;
1508
&.top {
1510
border-bottom-style: solid;
1511
> tabs {
1512
margin-bottom: -1px;
1513
> tab {
1514
&:hover { box-shadow: inset 0 -2px $fill_color; }
1516
&:checked { box-shadow: inset 0 -2px $primary_color; }
1518
}
1519
}
1520
}
1521
&.bottom {
1523
border-top-style: solid;
1524
> tabs {
1525
margin-top: -1px;
1526
> tab {
1527
&:hover { box-shadow: inset 0 2px $fill_color; }
1529
&:checked { box-shadow: inset 0 2px $primary_color; }
1531
}
1532
}
1533
}
1534
&.left {
1536
border-right-style: solid;
1537
> tabs {
1538
margin-right: -1px;
1539
> tab {
1540
&:hover { box-shadow: inset -2px 0 $fill_color; }
1542
&:checked { box-shadow: inset -2px 0 $primary_color; }
1544
}
1545
}
1546
}
1547
&.right {
1549
border-left-style: solid;
1550
> tabs {
1551
margin-left: -1px;
1552
> tab {
1553
&:hover { box-shadow: inset 2px 0 $fill_color; }
1555
&:checked { box-shadow: inset 2px 0 $primary_color; }
1557
}
1558
}
1559
}
1560
&.top > tabs > arrow {
1562
@extend %notebook_vert_arrows;
1563
border-top-style: none;
1565
}
1566
&.bottom > tabs > arrow {
1568
@extend %notebook_vert_arrows;
1569
border-bottom-style: none;
1571
}
1572
@at-root %notebook_vert_arrows {
1574
padding-left: 4px;
1575
padding-right: 4px;
1576
&.down {
1578
margin-left: -8px;
1579
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1580
}
1581
&.up {
1583
margin-right: -8px;
1584
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1585
}
1586
}
1587
&.left > tabs > arrow {
1589
@extend %notebook_horz_arrows;
1590
border-left-style: none;
1592
}
1593
&.right > tabs > arrow {
1595
@extend %notebook_horz_arrows;
1596
border-right-style: none;
1598
}
1599
@at-root %notebook_horz_arrows {
1601
padding-top: 4px;
1602
padding-bottom: 4px;
1603
&.down {
1605
margin-top: -8px;
1606
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1607
}
1608
&.up {
1610
margin-bottom: -8px;
1611
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1612
}
1613
}
1614
> tabs > arrow {
1616
@extend %simple_flat_button;
1617
min-height: 16px;
1619
min-width: 16px;
1620
border-radius: 0;
1621
}
1622
tab {
1624
transition: $longer_transition,
1625
background-size 0,
1626
background-image 0;
1627
min-height: $small_size;
1628
min-width: $small_size;
1629
padding: $container_padding 12px;
1630
outline-offset: -6px;
1632
border-width: 1px; // for reorderable tabs
1634
border-color: transparent; //
1635
background-image: radial-gradient(circle farthest-corner at center,
1637
$primary_color 10%,
1638
transparent 0%);
1639
background-repeat: no-repeat;
1640
background-position: center;
1641
background-size: 0% 0%;
1642
color: $secondary_fg_color;
1644
font-weight: 500;
1645
&:hover {
1647
color: $fg_color;
1648
&.reorderable-page {
1650
border-color: $border_color;
1651
background-color: $alt_base_color;
1652
}
1653
}
1654
&:disabled { color: $disabled_secondary_fg_color; }
1656
&:checked {
1658
transition: $longer_transition,
1659
background-size $longer_duration $deceleration_curve,
1660
background-image $longer_duration + $ripple_duration $deceleration_curve;
1661
background-image: radial-gradient(circle farthest-corner at center,
1662
transparent 10%,
1663
transparent 0%);
1664
background-size: 1000% 1000%;
1665
color: $fg_color;
1666
&:disabled { color: $disabled_fg_color; }
1668
&.reorderable-page {
1670
border-color: $border_color;
1671
background-color: $base_color;
1672
}
1673
}
1674
// colors the button like the label, overridden otherwise
1676
button.flat {
1677
@extend %small_button;
1678
&:last-child {
1680
margin-left: $container_padding;
1681
margin-right: $container_padding - 12px;
1682
}
1683
&:first-child {
1685
margin-left: $container_padding - 12px;
1686
margin-right: $container_padding;
1687
}
1688
}
1689
}
1690
&.top,
1692
&.bottom {
1693
tabs {
1694
padding-left: 8px;
1695
padding-right: 8px;
1696
&:not(:only-child) {
1698
&:first-child { margin-left: 0; }
1699
&:last-child { margin-right: 0; }
1700
}
1701
tab {
1703
&.reorderable-page {
1704
margin: 0 -1px;
1705
border-style: none solid;
1706
}
1707
}
1708
}
1709
}
1710
&.left,
1712
&.right {
1713
tabs {
1714
padding-top: 8px;
1715
padding-bottom: 8px;
1716
&:not(:only-child) {
1718
&:first-child { margin-top: 0; }
1719
&:last-child { margin-bottom: 0; }
1720
}
1721
tab {
1723
&.reorderable-page {
1724
margin: -1px 0;
1725
border-style: solid none;
1726
}
1727
}
1728
}
1729
}
1730
}
1731
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1733
background-color: $base_color;
1734
entry:not(.search),
1736
spinbutton:not(.vertical) { @extend %entry.flat; }
1737
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1739
button.combo { @extend %combo_flat; }
1741
}
1742
}
1743
/**************
1746
* Scrollbars *
1747
**************/
1748
scrollbar {
1749
$_slider_min_length: 24px;
1750
// disable steppers
1752
@at-root * {
1753
-GtkScrollbar-has-backward-stepper: false;
1754
-GtkScrollbar-has-forward-stepper: false;
1755
}
1756
transition: $longer_transition;
1758
background-color: $base_color;
1759
background-clip: $extra_background_clip;
1760
// scrollbar border
1762
&.top { border-bottom: 1px solid $border_color; }
1763
&.bottom { border-top: 1px solid $border_color; }
1764
&.left { border-right: 1px solid $border_color; }
1765
&.right { border-left: 1px solid $border_color; }
1766
// slider
1768
slider {
1769
transition: $shorter_transition, margin 0, border-width 0;
1770
min-width: 8px;
1771
min-height: 8px;
1772
border: 4px solid transparent;
1773
border-radius: $circular_radius;
1774
background-clip: padding-box;
1775
background-color: $tertiary_fg_color;
1776
&:hover { background-color: $secondary_fg_color; }
1778
&:active { background-color: $fg_color; }
1780
&:disabled { background-color: $disabled_tertiary_fg_color; }
1782
}
1783
&.fine-tune {
1785
slider {
1786
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1787
min-width: 4px;
1788
min-height: 4px;
1789
}
1790
&.horizontal slider { margin: 2px 0; }
1792
&.vertical slider { margin: 0 2px; }
1794
}
1795
&.overlay-indicator {
1797
&:not(.dragging):not(.hovering) {
1798
border-color: transparent;
1799
background-color: transparent;
1800
slider {
1802
min-width: 4px;
1803
min-height: 4px;
1804
margin: 4px - 1px;
1805
border: 1px solid scale-alpha($base_color, $lower_opacity);
1806
}
1807
button {
1809
min-width: 4px;
1810
min-height: 4px;
1811
margin: 4px - 1px;
1812
border: 1px solid scale-alpha($base_color, $lower_opacity);
1813
border-radius: $circular_radius;
1814
background-color: $tertiary_fg_color;
1815
background-clip: padding-box;
1816
-gtk-icon-source: none;
1817
&:disabled { background-color: $disabled_tertiary_fg_color; }
1819
}
1820
&.horizontal {
1822
slider { min-width: $_slider_min_length; }
1823
button { min-width: 8px; }
1825
}
1826
&.vertical {
1828
slider { min-height: $_slider_min_length; }
1829
button { min-height: 8px; }
1831
}
1832
}
1833
&.dragging,
1835
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1836
}
1837
&.horizontal slider { min-width: $_slider_min_length; }
1839
&.vertical slider { min-height: $_slider_min_length; }
1841
// button styling
1843
button {
1844
@extend %simple_flat_button;
1845
min-width: 16px;
1847
min-height: 16px;
1848
padding: 0;
1849
border-radius: 0;
1850
}
1851
// button icons
1853
&.vertical {
1854
button {
1855
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1856
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1858
}
1859
}
1860
&.horizontal {
1862
button {
1863
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1864
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1866
}
1867
}
1868
}
1869
/**********
1872
* Switch *
1873
**********/
1874
switch {
1875
transition: $longer_transition;
1876
margin: $container_padding 0;
1877
border: 4px solid transparent;
1878
border-radius: $circular_radius;
1879
background-color: $fill_color;
1880
background-clip: padding-box;
1881
font-size: 0;
1882
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1884
&:checked {
1886
background-color: scale-alpha($accent_color, 0.5);
1887
&:disabled {
1889
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1890
color: $disabled_fg_color;
1891
}
1892
}
1893
slider {
1895
@include entry(normal);
1896
transition: $longer_transition, $shadow_transition, margin 0;
1898
min-width: $small_size;
1899
min-height: $small_size;
1900
margin: -4px 0 -4px -4px;
1901
border-radius: $circular_radius;
1902
-gtk-outline-radius: $circular_radius;
1903
}
1904
&:hover slider { @include entry(focus); }
1906
&:checked slider {
1908
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1909
animation: needs_attention $longer_duration $deceleration_curve;
1910
margin: -4px -4px -4px 0;
1911
background-color: $accent_color;
1912
color: $inverse_fg_color;
1913
}
1914
&:disabled slider { @include entry(disabled); }
1916
&:checked:disabled slider { animation: none; }
1918
row:selected & {
1920
}
1921
}
1922
/*************************
1925
* Check and Radio items *
1926
*************************/
1927
// draw regular check and radio items using our PNG assets
1928
// all assets are rendered from assets.svg. never add pngs directly
1929
// selection-mode
1931
.view.content-view.check:not(list),
1932
.content-view .tile check:not(list) {
1933
min-height: 40px;
1934
min-width: 40px;
1935
margin: 0;
1936
padding: 0;
1937
box-shadow: none;
1938
background-color: transparent;
1939
background-image: none;
1940
-gtk-icon-shadow: $shadow_1;
1941
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1943
@each $s, $as in ('', '-unchecked'),
1945
(':checked', '-checked') {
1946
&#{$s} {
1947
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1948
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1949
}
1950
}
1951
}
1952
checkbutton.text-button,
1954
radiobutton.text-button {
1955
// this is for a nice focus on check and radios text
1956
padding: 2px;
1957
outline-offset: 0;
1958
label:not(:only-child) { margin: 0 4px; }
1960
}
1961
check,
1963
radio {
1964
min-height: 24px;
1965
min-width: 24px;
1966
margin: -($large_size - 24px) / 2;
1967
padding: ($large_size - 24px) / 2;
1968
@extend %simple_flat_button;
1970
@extend %circular_button;
1972
&:checked, &:indeterminate {
1974
color: $accent_color;
1975
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1977
}
1978
// &:only-child { margin: -12px; }
1980
row &:not(:checked):not(:indeterminate) {
1982
color: gtkalpha(currentColor, $secondary_opacity);
1983
&:hover, &:active { color: currentColor; }
1985
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1987
}
1988
popover & {
1990
&, &:hover, &:disabled {
1991
box-shadow: none;
1992
background-image: none;
1993
}
1994
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1996
&.left:dir(rtl) {
1998
margin-left: -16px;
1999
margin-right: -8px;
2000
}
2001
&.right:dir(ltr) {
2003
margin-left: -8px;
2004
margin-right: -16px;
2005
}
2006
}
2007
menu menuitem & {
2009
transition: none;
2010
min-height: 16px;
2011
min-width: 16px;
2012
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2013
padding: 0;
2014
&:dir(ltr) { margin-right: 8px; }
2016
&:dir(rtl) { margin-left: 8px; }
2018
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2020
&, &:hover, &:disabled {
2022
box-shadow: none;
2023
// color: inherit;
2024
}
2025
}
2026
}
2027
%check,
2029
check {
2030
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2031
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2032
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2034
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2035
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2037
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2038
}
2039
%radio,
2041
radio {
2042
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2043
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2044
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2046
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2047
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2049
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2050
border-image-slice: $large_size / 2px;
2052
border-image-width: $large_size / 2;
2053
$radio_indicator: 10px / $large_size / 2;
2055
& {
2057
border-image-source: -gtk-gradient(radial,
2058
center center, 0,
2059
center center, 0.001,
2060
to($accent_color),
2061
to(transparent));
2062
}
2063
&:checked:not(:indeterminate) {
2065
border-image-source: -gtk-gradient(radial,
2066
center center, 0,
2067
center center, $radio_indicator,
2068
to($accent_color),
2069
to(transparent));
2070
}
2071
&:checked:not(:indeterminate):disabled {
2073
border-image-source: -gtk-gradient(radial,
2074
center center, 0,
2075
center center, $radio_indicator,
2076
to(scale-alpha($accent_color, $disabled_opacity)),
2077
to(transparent));
2078
}
2079
}
2080
%small_check,
2082
menu menuitem check {
2083
& {
2084
border-radius: 2px;
2085
-gtk-outline-radius: 2px;
2086
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2087
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2088
}
2089
&:checked {
2091
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2092
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2093
}
2094
&:indeterminate {
2096
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2097
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2098
}
2099
}
2100
%small_radio,
2102
menu menuitem radio {
2103
& {
2104
border-image: none;
2105
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2106
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2107
}
2108
&:checked {
2110
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2111
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2112
}
2113
&:indeterminate {
2115
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2116
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2117
}
2118
}
2119
// ANIMATION:
2121
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2122
// the transformation is set on the active state and it get reset on the checked state.
2123
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2124
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2126
check:not(:checked):indeterminate:active,
2128
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2129
check:not(:checked),
2131
radio:not(:checked) {
2132
& {
2133
transition: $longer_transition,
2134
background-size $ripple_duration $deceleration_curve,
2135
background-image $ripple_duration * 2 $deceleration_curve,
2136
-gtk-icon-transform 0;
2137
}
2138
&:active {
2140
transition: $longer_transition,
2141
background-size 0,
2142
background-image 0,
2143
-gtk-icon-transform 0;
2144
}
2145
menu menuitem & { transition: none; }
2147
}
2148
treeview.view check,
2150
treeview.view radio {
2151
padding: 0;
2152
&:hover {
2154
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2155
&:disabled { box-shadow: none; }
2157
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2159
}
2160
& {
2162
color: $secondary_fg_color;
2163
&:hover, &:active { color: $fg_color; }
2165
&:disabled { color: $disabled_secondary_fg_color; }
2167
&:checked, &:indeterminate { color: $accent_color; }
2169
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2171
}
2172
&:selected {
2174
color: $secondary_inverse_fg_color;
2175
&:hover, &:active { color: $inverse_fg_color; }
2177
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2179
&:checked, &:indeterminate { color: $accent_color; }
2181
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2183
}
2184
}
2185
treeview.view radio:checked {
2187
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2188
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2189
border-image: none;
2190
}
2191
/************
2194
* GtkScale *
2195
************/
2196
scale {
2197
// sizing
2198
$_marks_lenght: 8px;
2199
$_marks_distance: 8px;
2200
$slider_size: 24px;
2202
$marks_slider_size: 30px;
2203
$slider_margin: -($slider_size - $bar_size) / 2;
2205
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2206
$color_slider_margin: -($slider_size) / 2;
2208
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2209
min-height: $medium_size - $slider_size;
2211
min-width: $medium_size - $slider_size;
2212
padding: ($slider_size / 2);
2213
* { transition: $longer_transition; }
2215
// the slider is inside the trough, so to have make it bigger there's a negative margin
2217
slider {
2218
min-height: $slider_size;
2219
min-width: $slider_size;
2220
margin: $slider_margin;
2221
}
2222
// the backing bit
2224
trough {
2225
outline-offset: 2px;
2226
background-color: $fill_color;
2227
&:disabled { color: $disabled_fg_color; }
2229
}
2230
// the colored part of the backing bit
2232
highlight {
2233
background-color: $accent_color;
2234
&:disabled { background-color: transparent; }
2236
}
2237
// this is another differently styled part of the backing bit, the most relevant use case is for example
2239
// in media player to indicate how much video stream as been cached
2240
fill {
2241
background-color: $fill_color;
2242
&:disabled { background-color: transparent; }
2244
}
2245
slider {
2247
transition: all $shorter_duration $standard_curve;
2248
// border-radius: 100%;
2249
// background-color: $accent_color;
2250
background-repeat: no-repeat;
2251
background-position: center;
2252
@each $s, $as in ('', ''),
2254
(':disabled', '-disabled') {
2255
&#{$s} {
2256
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2257
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2259
}
2260
}
2261
background-size: calc(100% - 8px);
2263
&:hover { background-size: calc(100% - 4px); }
2265
&:active { background-size: calc(100% - 0px); }
2267
}
2268
// click-and-hold the slider to activate
2270
&.fine-tune {
2271
// to make the slider shrink in fine-tune mode
2272
slider { background-size: calc(100% - 12px); }
2273
}
2274
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2276
marks {
2278
color: $fill_color;
2279
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2281
(bottom, bottom, top),
2282
(top, left, right),
2283
(bottom, right, left) {
2284
&.#{$marks_class} {
2285
margin-#{$marks_margin}: $_marks_distance;
2286
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2287
}
2288
}
2289
}
2290
&.horizontal {
2292
indicator {
2293
min-height: $_marks_lenght;
2294
min-width: 1px;
2295
}
2296
}
2297
&.vertical {
2299
indicator {
2300
min-height: 1px;
2301
min-width: $_marks_lenght;
2302
}
2303
}
2304
// *WARNING* scale with marks madness following
2306
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2308
('vertical', 'vert') {
2309
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2310
('marks-after', 'marks-after:not(.marks-before)') {
2311
&.#{$dir_class}.#{$marks_class} {
2312
slider {
2313
@each $state, $state_infix in ('', ''),
2314
(':disabled', '-disabled') {
2315
&#{$state} {
2316
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2317
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2319
}
2320
}
2321
@if $dir_class == 'horizontal' {
2323
min-height: $marks_slider_size;
2324
min-width: $slider_size;
2325
@if $marks_infix == 'marks-before' {
2327
margin-top: $marks_slider_margin;
2328
background-position: center calc(100% - 4px);
2330
&:hover { background-position: center calc(100% - 2px); }
2332
&:active { background-position: center calc(100% - 0px); }
2334
}
2335
@if $marks_infix == 'marks-after' {
2337
margin-bottom: $marks_slider_margin;
2338
background-position: center calc(4px);
2340
&:hover { background-position: center calc(2px); }
2342
&:active { background-position: center calc(0px); }
2344
}
2345
}
2346
@if $dir_class == 'vertical' {
2348
min-height: $slider_size;
2349
min-width: $marks_slider_size;
2350
@if $marks_infix == 'marks-before' {
2352
margin-left: $marks_slider_margin;
2353
background-position: calc(4px) center;
2355
&:hover { background-position: calc(2px) center; }
2357
&:active { background-position: calc(0px) center; }
2359
}
2360
@if $marks_infix == 'marks-after' {
2362
margin-right: $marks_slider_margin;
2363
background-position: calc(100% - 4px) center;
2365
&:hover { background-position: calc(100% - 2px) center; }
2367
&:active { background-position: calc(100% - 0px) center; }
2369
}
2370
}
2371
}
2372
&.fine-tune slider {
2374
@if $dir_class == 'horizontal' {
2375
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2376
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2378
}
2379
@if $dir_class == 'vertical' {
2381
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2382
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2384
}
2385
}
2386
}
2387
}
2388
}
2389
&.color {
2391
min-height: 0;
2392
min-width: 0;
2393
&.horizontal {
2395
padding: 0 0 12px 0;
2396
slider {
2398
&:dir(ltr), &:dir(rtl) { // specificity bump
2399
margin-bottom: $color_slider_margin;
2400
margin-top: $color_marks_slider_margin;
2401
}
2402
}
2403
}
2404
&.vertical {
2406
&:dir(ltr) {
2407
padding: 0 0 0 12px;
2408
slider {
2410
margin-left: $color_slider_margin;
2411
margin-right: $color_marks_slider_margin;
2412
}
2413
}
2414
&:dir(rtl) {
2416
padding: 0 12px 0 0;
2417
slider {
2419
margin-right: $color_slider_margin;
2420
margin-left: $color_marks_slider_margin;
2421
}
2422
}
2423
}
2424
}
2425
}
2426
/*****************
2429
* Progress bars *
2430
*****************/
2431
progressbar {
2432
// sizing
2433
&.horizontal {
2434
trough,
2435
progress { min-height: $bar_size; }
2436
}
2437
&.vertical {
2439
trough,
2440
progress { min-width: $bar_size; }
2441
}
2442
// FIXME: insensitive state missing and some other state should be set probably
2444
color: $tertiary_fg_color;
2445
font-size: smaller;
2446
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2448
progress { background-color: $primary_color; }
2450
&.osd { // progressbar.osd used for epiphany page loading progress
2452
// min-width: $bar_size;
2453
// min-height: $bar_size;
2454
// background-color: transparent;
2455
// trough { background-color: transparent; }
2457
// progress { background-color: $primary_color; }
2459
}
2460
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2462
}
2463
/*************
2466
* Level Bar *
2467
*************/
2468
levelbar {
2469
block {
2470
min-width: $medium_size;
2471
min-height: $bar_size;
2472
}
2473
&.vertical block {
2475
min-width: $bar_size;
2476
min-height: $medium_size;
2477
}
2478
trough {
2480
padding: 2px;
2481
border-radius: 2px;
2482
@include entry(normal);
2484
&:disabled { @include entry(disabled); }
2486
}
2487
&.horizontal.discrete {
2489
block { margin: 0 1px; }
2490
trough { padding: 2px 1px; }
2492
}
2493
&.vertical.discrete {
2495
block { margin: 1px 0; }
2496
trough { padding: 1px 2px; }
2498
}
2499
block {
2501
&.low { background-color: $warning_color; }
2502
&.high,
2504
&:not(.empty) { background-color: $primary_color; }
2505
&.full { background-color: $success_color; }
2507
&.empty {
2509
background-color: $fill_color;
2510
color: $disabled_fg_color;
2511
}
2512
}
2513
}
2514
/****************
2517
* Print dialog *
2518
*****************/
2519
printdialog {
2520
paper {
2521
padding: 0;
2522
border: 1px solid $border_color;
2523
background-color: $base_color;
2524
color: $fg_color;
2525
}
2526
.dialog-action-box { margin: 12px; }
2528
}
2529
/**********
2532
* Frames *
2533
**********/
2534
frame > border,
2535
.frame {
2536
margin: 0;
2537
padding: 0;
2538
border: 1px solid $border_color;
2539
border-radius: 0;
2540
box-shadow: none;
2541
&.flat { border-style: none; }
2543
}
2544
frame.flat > border { @extend .frame.flat; } // for backporting
2546
actionbar > revealer > box {
2548
padding: $container_padding;
2549
border-top: 1px solid $border_color;
2550
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2552
}
2553
scrolledwindow {
2555
viewport.frame { // avoid double borders when viewport inside scrolled window
2556
border-style: none;
2557
}
2558
// This is used when content is touch-dragged past boundaries.
2560
// draws a box on top of the content, the size changes programmatically.
2561
@at-root overshoot {
2562
&.top { @include overshoot(top); }
2563
&.bottom { @include overshoot(bottom); }
2565
&.left { @include overshoot(left); }
2567
&.right { @include overshoot(right); }
2569
}
2570
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2572
@at-root undershoot {
2573
&.top { @include undershoot(top); }
2574
&.bottom { @include undershoot(bottom); }
2576
&.left { @include undershoot(left); }
2578
&.right { @include undershoot(right); }
2580
}
2581
@at-root junction { // the small square between two scrollbars
2583
border-style: solid none none solid;
2584
border-width: 1px;
2585
border-color: $border_color;
2586
background-color: $base_color;
2587
&:dir(rtl) { border-style: solid solid none none; }
2589
}
2590
}
2591
// vbox and hbox separators
2593
separator {
2594
min-width: 1px;
2595
min-height: 1px;
2596
background-color: $border_color;
2597
}
2598
%hide_separators {
2600
min-width: 0;
2601
min-height: 0;
2602
background-color: transparent;
2603
}
2604
/*********
2607
* Lists *
2608
*********/
2609
list {
2610
border-color: $border_color;
2611
background-color: $base_color;
2612
row { padding: 2px; }
2614
}
2615
// FIXME
2617
$row_transition: $longer_transition, background-color 0, color 0;
2618
row {
2620
&.activatable {
2621
transition: $row_transition,
2622
background-size $ripple_duration $deceleration_curve,
2623
background-image $ripple_duration * 2 $deceleration_curve;
2624
box-shadow: inset 0 0 0 9999px transparent;
2625
background-image: radial-gradient(circle farthest-corner at center,
2626
transparent 10%,
2627
transparent 0%);
2628
background-repeat: no-repeat;
2629
background-position: center;
2630
background-size: 1000% 1000%;
2631
&:hover {
2633
transition: $row_transition,
2634
box-shadow 0,
2635
background-size $ripple_duration $deceleration_curve,
2636
background-image $ripple_duration * 2 $deceleration_curve;
2637
box-shadow: inset 0 0 0 9999px $row_fill_color;
2638
}
2639
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2641
&:active {
2642
transition: $row_transition,
2643
background-size 0,
2644
background-image 0;
2645
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2646
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2647
background-image: radial-gradient(circle farthest-corner at center,
2648
$semi_fill_color 10%,
2649
transparent 0%);
2650
background-size: 0% 0%;
2651
}
2652
}
2653
&:selected { @extend %selected_items; }
2655
}
2656
/*********************
2659
* App Notifications *
2660
*********************/
2661
.app-notification {
2662
@extend %osd;
2663
@extend toolbar.osd;
2665
margin: 8px;
2667
button { @extend %button_basic.flat; }
2669
&.frame,
2671
border { border-style: none; }
2672
}
2673
/*************
2676
* Expanders *
2677
*************/
2678
expander {
2679
arrow {
2680
transition: all $shorter_duration $standard_curve;
2681
min-width: 16px;
2682
min-height: 16px;
2683
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2684
-gtk-icon-transform: rotate(-90deg);
2685
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2687
&:checked { -gtk-icon-transform: unset; }
2689
color: $secondary_fg_color;
2691
&:hover, &:active { color: $fg_color; }
2693
&:disabled { color: $disabled_secondary_fg_color; }
2695
&:selected {
2697
color: $secondary_inverse_fg_color;
2698
&:hover, &:active { color: $inverse_fg_color; }
2700
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2702
}
2703
}
2704
}
2705
/************
2708
* Calendar *
2709
************/
2710
calendar {
2711
padding: 1px;
2712
border: 1px solid $border_color;
2713
color: $fg_color;
2714
&:disabled { color: $disabled_fg_color; }
2716
&:selected {
2718
@extend %selected_items;
2719
border-radius: 2px + 1px;
2721
}
2722
&.header {
2724
border-style: none none solid;
2725
border-radius: 0;
2726
}
2727
&.button { @extend %simple_flat_button; }
2729
&.highlight {
2731
color: gtkalpha(currentColor, $tertiary_opacity);
2732
font-weight: 500;
2733
}
2734
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2736
}
2737
/***********
2740
* Dialogs *
2741
***********/
2742
messagedialog { // Message Dialog styling
2743
&.background { background-color: $lighter_bg_color; }
2744
.titlebar {
2746
min-height: $small_size;
2747
border-style: none;
2748
box-shadow: inset 0 1px $highlight_color;
2749
background-color: $lighter_bg_color;
2750
color: $fg_color;
2751
&:backdrop { color: $secondary_fg_color; }
2753
}
2754
&.csd { // rounded bottom border styling for csd version
2756
&.background {
2757
// bigger radius for better antialiasing
2758
border-bottom-left-radius: 2px;
2759
border-bottom-right-radius: 2px;
2760
}
2761
.dialog-action-area button {
2763
padding: 8px 16px;
2764
border-top: 1px solid $border_color;
2765
border-radius: 0;
2766
@extend %simple_flat_button;
2768
&:first-child { border-bottom-left-radius: 2px; }
2770
&:last-child { border-bottom-right-radius: 2px; }
2772
}
2773
}
2774
entry { @extend %entry.flat; }
2776
}
2777
filechooser {
2779
.dialog-action-box { border-top: 1px solid $border_color; }
2780
#pathbarbox {
2782
border-bottom: 1px solid $border_color;
2783
background-color: $bg_color;
2784
}
2785
}
2786
filechooserbutton:drop(active) {
2788
box-shadow: none;
2789
}
2790
/***********
2793
* Sidebar *
2794
***********/
2795
.sidebar {
2796
border-style: none;
2797
background-color: $lighter_bg_color;
2798
@at-root %sidebar_left,
2800
&:dir(ltr),
2801
&.left,
2802
&.left:dir(rtl) {
2803
border-right: 1px solid $border_color;
2804
border-left-style: none;
2805
}
2806
@at-root %sidebar_right,
2808
&:dir(rtl),
2809
&.right {
2810
border-left: 1px solid $border_color;
2811
border-right-style: none;
2812
}
2813
list { background-color: transparent; }
2815
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2817
}
2818
stacksidebar {
2820
&.sidebar {
2821
&:dir(ltr),
2822
&.left,
2823
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2824
&:dir(rtl),
2826
&.right { list { @extend %sidebar_right; }}
2827
}
2828
row {
2830
padding: 10px 4px;
2831
> label {
2833
padding-left: 6px;
2834
padding-right: 6px;
2835
}
2836
&.needs-attention > label { @extend %needs_attention; }
2838
}
2839
}
2840
/****************
2843
* File chooser *
2844
****************/
2845
placessidebar {
2846
> viewport.frame { border-style: none; }
2847
list { padding: (4px - 3px) 0 4px; }
2849
row {
2851
// Needs overriding of the GtkListBoxRow padding
2852
min-height: 32px;
2853
margin: -1px 0; // Remove unknown margins
2854
padding: 0;
2855
// Using margins/padding directly in the SidebarRow
2857
// will make the animation of the new bookmark row jump
2858
> revealer { padding: 0 12px; }
2859
&:selected { color: $inverse_fg_color; }
2861
&:disabled { color: $disabled_fg_color; }
2863
image.sidebar-icon {
2865
opacity: $tertiary_opacity; // dim the device icons
2866
&:dir(ltr) { padding-right: 8px; }
2868
&:dir(rtl) { padding-left: 8px; }
2869
}
2870
label.sidebar-label {
2872
&:dir(ltr) { padding-right: 2px; }
2873
&:dir(rtl) { padding-left: 2px; }
2874
}
2875
@at-root button.sidebar-button {
2877
@extend %simple_flat_button;
2878
@extend %small_button;
2880
row:selected & {
2882
}
2883
}
2884
&.sidebar-placeholder-row {
2886
min-height: 2px;
2887
padding: 0 8px;
2888
background-image: image($accent_color);
2889
background-clip: content-box;
2890
}
2891
&.sidebar-new-bookmark-row { color: $accent_color; }
2893
&:drop(active):not(:disabled) {
2895
box-shadow: inset 0 0 0 2px $accent_color;
2896
&:selected {
2898
// background-color: $accent_color;
2899
// color: $inverse_fg_color;
2900
}
2901
}
2902
}
2903
}
2904
placesview {
2906
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2907
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2909
// this selects the "connect to server" label
2911
> actionbar > revealer > box > label {
2912
padding-left: 8px;
2913
padding-right: 8px;
2914
}
2915
}
2916
/*********
2919
* Paned *
2920
*********/
2921
paned {
2922
> separator {
2923
min-width: 1px;
2924
min-height: 1px;
2925
-gtk-icon-source: none; // defeats the ugly default handle decoration
2926
border-style: none; // just to be sure
2927
background-color: transparent;
2928
// workaround, using background istead of a border since the border will get rendered twice (?)
2929
background-image: image($border_color);
2930
background-size: 1px 1px;
2931
background-clip: content-box; // avoids borders image being rendered twice (?)
2932
&.wide {
2934
min-width: 6px;
2935
min-height: 6px;
2936
background-color: $bg_color;
2937
background-image: image($border_color), image($border_color);
2938
background-size: 1px 1px, 1px 1px;
2939
}
2940
}
2941
&.horizontal > separator {
2943
background-repeat: repeat-y;
2944
&:dir(ltr) {
2946
margin: 0 -8px 0 0;
2947
padding: 0 8px 0 0;
2948
background-position: left;
2949
}
2950
&:dir(rtl) {
2952
margin: 0 0 0 -8px;
2953
padding: 0 0 0 8px;
2954
background-position: right;
2955
}
2956
&.wide {
2958
margin: 0;
2959
padding: 0;
2960
background-repeat: repeat-y, repeat-y;
2961
background-position: left, right;
2962
}
2963
}
2964
&.vertical > separator {
2966
margin: 0 0 -8px 0;
2967
padding: 0 0 8px 0;
2968
background-repeat: repeat-x;
2969
background-position: top;
2970
&.wide {
2972
margin: 0;
2973
padding: 0;
2974
background-repeat: repeat-x, repeat-x;
2975
background-position: bottom, top;
2976
}
2977
}
2978
}
2979
/**************
2982
* GtkInfoBar *
2983
**************/
2984
infobar {
2985
border-style: none;
2986
&.info { background-color: $info_bg_color; }
2988
&.question { background-color: $question_bg_color; }
2990
&.warning { background-color: $warning_bg_color; }
2992
&.error { background-color: $error_bg_color; }
2994
&.info,
2996
&.question,
2997
&.warning,
2998
&.error {
2999
> label, & { color: $inverse_fg_color; }
3000
button { @extend %button_selected; }
3002
selection {}
3004
*:link { @extend %link_selected; }
3006
}
3007
}
3008
/************
3011
* Tooltips *
3012
************/
3013
tooltip {
3014
&.background {
3015
// background-color needs to be set this way otherwise it gets drawn twice
3016
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3017
box-shadow: inset 0 1px $highlight_color;
3018
background-color: scale-alpha($base_color, $higher_opacity);
3019
}
3020
// @extend %osd;
3022
// padding: 4px; /* not working */
3024
border-radius: 2px;
3025
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3026
&:not(.csd):not(.unity-csd) {
3028
border: 1px solid $border_color;
3029
border-radius: 2px + 1px;
3030
background-clip: $extra_background_clip;
3031
}
3032
// FIXME: we need a border or tooltips vanish on black background.
3034
decoration { background-color: transparent; }
3035
label {
3037
// tooltip label already seems to have 6px margins
3038
min-height: 32px - 6px * 2;
3039
padding: 0 8px - 6px;
3040
}
3041
* {
3043
// workaround for Eclipse.
3044
// do not include any declaration here.
3045
// padding: 0;
3046
// background-color: transparent;
3047
// color: inherit;
3048
}
3049
}
3050
/*****************
3053
* Color Chooser *
3054
*****************/
3055
colorswatch {
3056
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3057
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3058
// applied to the overlay box.
3059
// base color corners rounding
3061
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3062
// sports a bigger radius.
3063
// nth-child is needed by the custom color strip.
3064
&.top {
3066
border-top-left-radius: $material_radius + 0.5px;
3067
border-top-right-radius: $material_radius + 0.5px;
3068
overlay {
3070
border-top-left-radius: $material_radius;
3071
border-top-right-radius: $material_radius;
3072
}
3073
}
3074
&.bottom {
3076
border-bottom-left-radius: $material_radius + 0.5px;
3077
border-bottom-right-radius: $material_radius + 0.5px;
3078
overlay {
3080
border-bottom-left-radius: $material_radius;
3081
border-bottom-right-radius: $material_radius;
3082
}
3083
}
3084
&.left,
3086
&:first-child:not(.top) {
3087
border-top-left-radius: $material_radius + 0.5px;
3088
border-bottom-left-radius: $material_radius + 0.5px;
3089
overlay {
3091
border-top-left-radius: $material_radius;
3092
border-bottom-left-radius: $material_radius;
3093
}
3094
}
3095
&.right,
3097
&:last-child:not(.bottom) {
3098
border-top-right-radius: $material_radius + 0.5px;
3099
border-bottom-right-radius: $material_radius + 0.5px;
3100
overlay {
3102
border-top-right-radius: $material_radius;
3103
border-bottom-right-radius: $material_radius;
3104
}
3105
}
3106
&.dark overlay { color: $light_fg_color; }
3108
&.light overlay { color: $dark_fg_color; }
3110
&.dark { color: $light_fg_color; } // for focus ring
3112
&.light { color: $dark_fg_color; } // for focus ring
3114
&:drop(active) {
3116
box-shadow: none;
3117
&.light overlay {
3119
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3120
}
3121
&.dark overlay {
3123
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3124
}
3125
}
3126
overlay {
3128
transition: $shadow_transition;
3129
box-shadow: $shadow_1;
3130
&:hover { box-shadow: $shadow_2; }
3132
}
3133
&#add-color-button {
3135
border-radius: $material_radius $material_radius 0 0;
3136
color: $light_fg_color; // for focus ring
3137
&:only-child { border-radius: $material_radius; }
3139
overlay {
3141
background-image: linear-gradient(to right,
3142
$error_bg_color 25%,
3143
$warning_bg_color 25%, $warning_bg_color 50%,
3144
$info_bg_color 50%, $info_bg_color 75%,
3145
$question_bg_color 75%);
3146
color: $light_fg_color;
3147
}
3148
}
3149
&:disabled {
3151
opacity: $disabled_opacity;
3152
overlay { box-shadow: none; }
3154
}
3155
row:selected & {
3157
}
3158
&#editor-color-sample {
3160
border-radius: $material_radius + 0.5px;
3161
overlay { border-radius: $material_radius; }
3163
// overlay:hover { box-shadow: $shadow_1; }
3165
}
3166
}
3167
// colorscale popup
3169
colorchooser .popover.osd {
3170
transition: $shadow_transition;
3171
border-radius: 2px;
3172
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3173
background-color: $base_color;
3174
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3176
spinbutton:not(.vertical) { @extend %entry.flat; }
3178
}
3179
/********
3182
* Misc *
3183
********/
3184
// content view (grid/list)
3185
.content-view {
3186
background-color: $bg_color;
3187
// &:hover { -gtk-icon-effect: highlight; }
3189
rubberband, .rubberband { @extend rubberband; }
3191
}
3192
.scale-popup {
3194
.osd & { @extend %osd; }
3195
.osd & button.flat { // FIXME: quick hack, redo properly
3197
}
3198
button { // +/- buttons on GtkVolumeButton popup
3200
}
3201
}
3202
/**********************
3205
* Window Decorations *
3206
**********************/
3207
decoration {
3208
transition: $shadow_transition;
3209
border-radius: 2px 2px 0 0;
3210
box-shadow: $shadow_4, 0 16px 16px transparent;
3211
// FIXME rationalize shadows
3213
// this is used for the resize cursor area
3215
margin: 8px;
3216
&:backdrop {
3218
// the transparent shadow here is to enforce that the shadow extents don't
3219
// change when we go to backdrop, to prevent jumping windows.
3220
// The biggest shadow should be in the same order then in the active state
3221
// or the jumping will happen during the transition.
3222
box-shadow: $shadow_2, 0 16px 16px transparent;
3223
}
3224
.maximized &,
3226
.fullscreen &,
3227
.tiled & { border-radius: 0; }
3228
.popup & { box-shadow: none; }
3230
// server-side decorations as used by mutter
3232
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3233
.csd.popup & {
3235
border-radius: 2px;
3236
box-shadow: $shadow_2;
3237
}
3238
tooltip.csd & {
3240
border-radius: 2px;
3241
box-shadow: $shadow_2;
3242
}
3243
messagedialog.csd & {
3245
border-radius: 2px;
3246
// box-shadow: $shadow_4, 0 16px 16px transparent;
3247
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3249
}
3250
.solid-csd & {
3252
margin: 0;
3253
// padding: 4px;
3254
border-radius: 0;
3255
box-shadow: none;
3256
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3257
background-color: $titlebar_bg_color;
3258
}
3259
}
3260
// Window Close button
3262
button.titlebutton {
3263
// @extend %simple_flat_button;
3264
@extend %circular_button;
3266
.selection-mode & {
3268
}
3269
}
3270
// catch all extend :)
3273
%selected_items {
3275
background-color: $primary_color;
3276
@at-root %nobg_selected_items, & {
3278
color: $inverse_fg_color;
3279
&:disabled { color: $disabled_inverse_fg_color; }
3281
}
3282
}
3283
.monospace { font-family: monospace; }
3285
/**********************
3288
* Touch Copy & Paste *
3289
**********************/
3290
// touch selection handlebars for the Popover.osd above
3291
cursor-handle {
3292
border-radius: $circular_radius;
3293
background-color: $accent_color;
3294
background-image: none;
3295
&.top:dir(ltr), &.bottom:dir(rtl) {
3297
padding-left: 6px;
3298
border-top-right-radius: 0;
3299
}
3300
&.bottom:dir(ltr), &.top:dir(rtl) {
3302
padding-right: 6px;
3303
border-top-left-radius: 0;
3304
}
3305
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3307
-GtkWidget-text-handle-width: 24;
3308
-GtkWidget-text-handle-height: 30;
3309
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3311
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3312
url('#{$_url}@2.png'));
3313
}
3314
}
3315
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3317
// shortcut window keys
3319
.keycap {
3320
min-width: 28px - 8px * 2;
3321
min-height: 28px - 2px;
3322
margin-top: 2px;
3323
padding-bottom: 2px;
3324
padding-left: 8px;
3325
padding-right: 8px;
3326
border: solid 1px $border_color;
3328
border-radius: 2px + 1px;
3329
box-shadow: inset 0 -2px $border_color;
3330
background-color: $base_color;
3331
color: $fg_color;
3332
font-size: smaller;
3333
}
3334
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3336
transition: $longer_transition;
3337
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3338
caret-color: $accent_color;
3339
}
3340
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3342
stackswitcher button.circular,
3344
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3345
min-width: $medium_size;
3346
min-height: $medium_size;
3347
padding: 0;
3348
}
3349