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
selection,
92
&:selected { @extend %selected_items; }
93
}
94
textview {
96
// FIXME: we need to override background-color to ensure text rendering
97
text { background-color: $base_color; }
98
// FIXME: we cannot specify text color for the border node
100
border { background-color: $alt_base_color; }
101
}
102
iconview { border-radius: 2px; }
104
.rubberband,
106
rubberband {
107
border: 1px solid $alt_primary_color;
108
background-color: scale-alpha($alt_primary_color, $lower_opacity);
109
}
110
flowbox {
112
rubberband { @extend rubberband; }
113
flowboxchild {
115
padding: 4px;
116
border-radius: 2px;
117
// outline-offset: -2px;
118
&:selected { @extend %selected_items; }
120
}
121
}
122
.content-view .tile {
124
// margin: 2px;
125
// padding: 0;
126
// border-radius: 0;
127
// background-color: $black;
128
&:selected {
130
background-color: transparent;
131
color: inherit;
132
}
133
}
134
label {
136
caret-color: currentColor; // this shouldn't be needed.
137
&.separator {
139
@extend .dim-label;
140
color: $fg_color;
142
}
143
row:selected &,
145
&:selected { @extend %nobg_selected_items; }
146
selection {
148
background-color: $primary_color;
149
color: $inverse_fg_color;
150
}
151
&:disabled {
153
color: $disabled_fg_color;
154
selection { @extend %selected_items:disabled; }
156
tab &,
158
button & { color: inherit; }
159
}
160
}
161
.dim-label { opacity: $tertiary_opacity; }
163
assistant {
165
.sidebar {
166
padding: 4px 0;
167
// background-color: $base_color;
168
// border-top: 1px solid $border_color;
169
}
170
// &.csd .sidebar { border-top-style: none; }
172
.sidebar label {
174
min-height: $medium_size;
175
padding: 0 12px;
176
color: $tertiary_fg_color;
177
font-weight: 500;
178
&.highlight { color: $fg_color; }
180
}
181
}
182
%osd, .osd { opacity: $higher_opacity; }
184
/*********************
187
* Spinner Animation *
188
*********************/
189
@keyframes spin {
190
to { -gtk-icon-transform: rotate(1turn); }
191
}
192
@keyframes spin_colors {
194
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
195
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
196
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
197
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
198
}
199
spinner {
201
background: none;
202
opacity: 0; // non spinning spinner makes no sense
203
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
204
&:checked {
206
opacity: 1;
207
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
208
&:disabled { opacity: $disabled_opacity; }
210
}
211
}
212
/****************
215
* Text Entries *
216
****************/
217
%entry,
218
entry {
219
%entry_basic, & {
220
min-height: $medium_size;
221
padding: 0 8px;
222
border-radius: 2px;
223
@include entry(normal);
225
&:focus { @include entry(focus); }
227
&:disabled { @include entry(disabled); }
229
&.flat {
231
border-radius: 0;
232
@include entry(flat-normal);
234
&:focus { @include entry(flat-focus); }
236
&:disabled { @include entry(flat-disabled); }
238
}
239
image { // icons inside the entry
241
// @extend %simple_flat_button;
242
// min-height: $small_size;
244
// min-width: $small_size;
245
// border-radius: $circular_radius;
246
// -gtk-outline-radius: $circular_radius;
247
color: gtkalpha(currentColor, $secondary_opacity);
248
&:hover, &:active { color: currentColor; }
250
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
252
&.left { margin-left: 2px; margin-right: 6px; }
254
&.right { margin-left: 6px; margin-right: 2px; }
256
}
257
undershoot {
259
&.left { @include undershoot(left); }
260
&.right { @include undershoot(right); }
262
}
263
selection { @extend %selected_items; }
265
// entry error and warning style
267
@each $e_type, $e_color in (error, $error_color),
268
(warning, $warning_color) {
269
&.#{$e_type} {
270
@include entry(normal, $e_color);
271
&:focus { @include entry(focus, $e_color); }
273
&:disabled { @include entry(disabled, $e_color); }
275
&.flat {
277
@include entry(flat-normal, $e_color);
278
&:focus { @include entry(flat-focus, $e_color); }
280
&:disabled { @include entry(flat-disabled, $e_color); }
282
}
283
}
284
}
285
&:drop(active) {
287
// box-shadow: inset 0 0 0 2px $accent_color;
288
}
289
.osd & {
291
}
292
}
293
progress {
295
margin: 2px (2px - 8px);
296
border-bottom: 2px solid $primary_color;
297
background-color: transparent;
298
}
299
// linked entries
301
.linked:not(.vertical) > & { @extend %linked; }
302
// Vertically linked entries
304
.linked.vertical > & { @extend %linked_vertical; }
305
.linked:not(.vertical) > &.flat,
307
.linked.vertical > &.flat { border-radius: 0; }
308
}
309
treeview entry {
311
&.flat, & {
312
min-height: 0;
313
padding: 2px;
314
border-radius: 0;
315
background-color: $base_color;
316
&, &:focus {
318
border-image: none;
319
box-shadow: none;
320
}
321
}
322
}
323
/***********
326
* Buttons *
327
***********/
328
// stuff for .needs-attention
329
@keyframes needs_attention {
330
from {
331
background-image: -gtk-gradient(radial,
332
center center, 0,
333
center center, 0.001,
334
to($accent_color),
335
to(transparent));
336
}
337
to {
339
background-image: -gtk-gradient(radial,
340
center center, 0,
341
center center, 0.5,
342
to($accent_color),
343
to(transparent));
344
}
345
}
346
%button,
348
button {
349
@at-root %button_basic, & {
350
min-height: 24px;
351
min-width: 16px;
352
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
353
border-radius: 2px;
354
font-weight: 500;
355
@include button(normal);
357
&:hover { @include button(hover); }
359
&:active { @include button(active); }
361
&:disabled { @include button(disabled); }
363
&:checked { @include button(checked); }
365
&:checked:disabled { @include button(checked-disabled); }
367
@at-root %flat_button, &.flat {
369
@at-root %simple_flat_button, & {
370
@include button(flat-normal);
371
&:hover { @include button(flat-hover); }
373
&:active { @include button(flat-active); }
375
&:disabled { @include button(flat-disabled); }
377
}
378
&:checked { @include button(flat-checked); }
380
&:checked:disabled { @include button(flat-checked-disabled); }
382
}
383
&.text-button {
385
padding-left: 16px;
386
padding-right: 16px;
387
}
388
&.image-button {
390
min-width: 24px;
391
padding: ($medium_size - 24px) / 2;
392
&:not(.text-button) { @extend %circular_button; }
394
}
395
&.text-button.image-button {
397
label {
398
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
399
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
401
}
402
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
404
}
405
.linked > & { @extend %linked; }
407
.linked.vertical > & { @extend %linked_vertical; }
409
.linked > &.flat,
411
.linked.vertical > &.flat {
412
border-radius: 2px;
413
&.image-button:not(.text-button) { @extend %circular_button; }
415
}
416
&:drop(active) {
418
// box-shadow: inset 0 0 0 2px $accent_color;
419
}
420
}
421
@at-root %button_selected, row:selected & {
423
&:disabled { color: $disabled_secondary_inverse_fg_color; }
424
}
425
// big standalone buttons like in Documents pager
427
&.osd {
428
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
429
&.image-button { padding: ($large_size - 24px) / 2; }
431
&:disabled { opacity: 0; }
433
}
434
// overlay / OSD style
436
@at-root %osd_button,
437
.osd & {
438
}
439
// Suggested and Destructive Action buttons
441
@each $b_type, $b_color in (suggested-action, $suggested_color),
442
(destructive-action, $destructive_color) {
443
&.#{$b_type} {
444
background-color: $b_color;
445
color: $inverse_fg_color;
446
&:disabled { @include button(disabled, $b_color); }
448
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
450
&.flat {
452
background-color: transparent;
453
color: $b_color;
454
&:disabled { @include button(flat-disabled, $b_color); }
456
&:checked { background-color: $fill_color; }
458
}
459
.osd & {
461
}
462
}
463
}
464
.stack-switcher > & {
466
// to position the needs attention dot, padding is added to the button
467
// child, a label needs just lateral padding while an icon needs vertical
468
// padding added too.
469
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
471
> label {
473
padding-left: 6px; // label padding
474
padding-right: 6px; //
475
}
476
> image {
478
padding-left: 6px; // image padding
479
padding-right: 6px; //
480
padding-top: 3px; //
481
padding-bottom: 3px; //
482
}
483
&.text-button {
485
// compensate text-button paddings
486
padding-left: 16px - 6px;
487
padding-right: 16px - 6px;
488
}
489
&.image-button {
491
// we want image buttons to have a 1:1 aspect ratio, so compensation
492
// of the padding added to the GtkImage is needed
493
padding-left: ($medium_size - 16px) / 2 - 6px;
494
padding-right: ($medium_size - 16px) / 2 - 6px;
495
}
496
&.needs-attention {
498
> label,
499
> image { @extend %needs_attention; }
500
&:checked {
502
> label,
503
> image {
504
animation: none;
505
background-image: none;
506
}
507
}
508
}
509
}
510
// hide separators
512
&.font,
513
&.file { separator { @extend %hide_separators; }}
514
// &.font { > box > box > label { font-weight: bold; }}
516
// inline-toolbar buttons
518
.inline-toolbar & {
519
// @extend %button_basic.flat;
520
&:not(.text-button) { @extend %circular_button; }
522
}
523
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
525
@at-root %circular_button,
527
&.close,
528
&.circular { // The Bloody Circul Button
529
border-radius: $circular_radius;
530
-gtk-outline-radius: $circular_radius;
531
// label { padding: 0; }
533
}
534
@at-root %small_button {
536
min-height: $small_size;
537
min-width: $small_size;
538
padding: 0;
539
border-radius: $circular_radius;
540
-gtk-outline-radius: $circular_radius;
541
}
542
}
543
%needs_attention {
545
animation: needs_attention $longer_duration $deceleration_curve forwards;
546
background-repeat: no-repeat;
547
background-position: right 3px;
548
background-size: 6px 6px;
549
&:dir(rtl) { background-position: left 3px; }
551
}
552
// all the following is for the +|- buttons on inline toolbars, that way
554
// should really be deprecated...
555
.inline-toolbar toolbutton > button { // redefining the button look is
556
// needed since those are flat...
557
}
558
// More inline toolbar buttons
560
toolbar.inline-toolbar toolbutton {
561
// > button.flat { @extend %linked_middle; }
562
// &:first-child > button.flat { @extend %linked:first-child; }
564
// &:last-child > button.flat { @extend %linked:last-child; }
566
// &:only-child > button.flat { @extend %linked:only-child; }
568
}
569
%linked_middle {
571
border-radius: 0;
572
-gtk-outline-radius: 2px;
573
}
574
%linked {
576
@extend %linked_middle;
577
&:first-child {
579
border-top-left-radius: 2px;
580
border-bottom-left-radius: 2px;
581
}
582
&:last-child {
584
border-top-right-radius: 2px;
585
border-bottom-right-radius: 2px;
586
}
587
&:only-child {
589
border-radius: 2px;
590
}
591
}
592
%linked_vertical_middle {
594
border-radius: 0;
595
-gtk-outline-radius: 2px;
596
}
597
%linked_vertical {
599
@extend %linked_vertical_middle;
600
&:first-child {
602
border-top-left-radius: 2px;
603
border-top-right-radius: 2px;
604
}
605
&:last-child {
607
border-bottom-left-radius: 2px;
608
border-bottom-right-radius: 2px;
609
}
610
&:only-child {
612
border-radius: 2px;
613
}
614
}
615
/* menu buttons */
617
modelbutton.flat,
618
.menuitem.button.flat {
619
min-height: $menuitem_size;
620
padding: 0 8px;
621
border-radius: 2px;
622
color: inherit;
623
@extend %simple_flat_button;
625
&:selected { @extend %selected_items; }
627
}
628
modelbutton.flat arrow {
630
background: none;
631
&:hover { background: none; }
633
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
635
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
637
}
638
button.color {
640
min-height: $small_size;
641
min-width: $small_size;
642
padding: $container_padding;
643
colorswatch:only-child {
645
// &, overlay { border-radius: 0; }
646
}
647
}
648
/*********
651
* Links *
652
*********/
653
*:link {
654
&, &:hover, &:active { color: $link_color; }
655
&:visited {
657
&, &:hover, &:active { color: $visited_link_color; }
658
}
659
@at-root %link_selected,
661
&:selected,
662
*:selected & { color: $inverse_fg_color; }
663
}
664
button:link,
666
button:visited {
667
@extend *:link;
668
> label { text-decoration-line: underline; }
670
}
671
/*****************
673
* GtkSpinButton *
674
*****************/
675
spinbutton {
676
&:not(.vertical) {
677
// in this horizontal configuration, the whole spinbutton
678
// behaves as the entry, so we extend the entry styling
679
// and nuke the style on the internal entry
680
@extend %entry;
681
padding: 0;
683
%spinbutton_entry,
685
entry {
686
min-width: $large_size - 8px * 2;
687
// reset all the other props since the spinbutton node is styled here
688
margin: 0;
689
border-image: none;
690
border-radius: 0;
691
box-shadow: none;
692
background-color: transparent;
693
//
694
// This will help to simplify spinbutton's code, but unfortunatelly
695
// doesn't work properly in :dir(rtl). It needs z-index property.
696
//
697
// min-width: $large_size - 8px;
698
//
699
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
700
//
701
// &:dir(ltr) {
702
// margin-right: -$spinbuttons_width;
703
// padding-right: $spinbuttons_width;
704
// }
705
//
706
// &:dir(rtl) {
707
// margin-left: -$spinbuttons_width;
708
// padding-left: $spinbuttons_width;
709
// }
710
}
711
button {
713
// margin: $container_padding;
714
border: solid $container_padding transparent;
715
@extend %simple_flat_button;
717
@extend %small_button;
719
&.up:dir(ltr),
721
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
722
&.up:dir(rtl),
724
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
725
}
726
}
727
// OSD horizontal
729
.osd &:not(.vertical) {
730
button {
731
}
732
}
733
// Vertical
735
&.vertical {
736
// in the vertical configuration, we treat the spinbutton
737
// as a box, and tweak the style of the entry in the middle
738
// so that it's linked
739
// FIXME: this should not be set at all, but otherwise it gets the wrong
741
// color
742
&:disabled { color: $disabled_fg_color; }
743
&:drop(active) {
745
box-shadow: none;
746
}
747
entry {
749
min-height: $medium_size;
750
min-width: $large_size;
751
padding: 0;
752
}
753
button {
755
min-height: $medium_size;
756
min-width: $large_size;
757
padding: 0;
758
@extend %simple_flat_button;
760
&.up { border-radius: 2px 2px 0 0; }
762
&.down { border-radius: 0 0 2px 2px; }
764
}
765
}
766
// OSD vertical
768
.osd &.vertical button:first-child {
769
}
770
// Misc
772
treeview &:not(.vertical) {
773
min-height: 0;
774
border-style: none;
775
border-radius: 0;
776
entry {
778
min-height: 0;
779
padding: 1px 2px;
780
}
781
}
782
}
783
/**************
786
* ComboBoxes *
787
**************/
788
combobox {
789
arrow {
790
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
791
min-height: 16px;
792
min-width: 16px;
793
}
794
decoration,
796
button.combo:checked { transition: none; } // workaround for menuitem selection
797
button.combo cellview {
799
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
800
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
801
}
802
#gtk-combobox-popup-menu {
804
padding: 2px 0;
805
menuitem {
807
min-height: $medium_size - 2px * 2;
808
padding: 0 8px;
809
}
810
// overflow arrows
812
> arrow {
813
&.top { margin-top: -2px; }
814
&.bottom { margin-bottom: -2px * 3; }
816
}
817
}
818
&.linked {
820
button:nth-child(2) {
821
&:dir(ltr) { @extend %linked:last-child; }
822
&:dir(rtl) { @extend %linked:first-child; }
823
}
824
}
825
&:drop(active) { // FIXME: untested
827
box-shadow: none;
828
// button.combo { @extend %button_basic:drop(active); }
830
}
831
}
832
// the combo is a composite widget so the way we do button linking doesn't
834
// work, special case needed. See
835
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
836
.linked:not(.vertical) > combobox {
838
> box > button.combo { @extend %linked_middle; }
839
&:first-child > box > button.combo { @extend %linked:first-child; }
841
&:last-child > box > button.combo { @extend %linked:last-child; }
843
&:only-child > box > button.combo { @extend %linked:only-child; }
845
}
846
.linked.vertical > combobox {
848
> box > button.combo { @extend %linked_vertical_middle; }
849
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
851
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
853
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
855
}
856
%combo_flat {
858
border-radius: 0;
859
background-image: none;
860
font-weight: inherit;
861
@include entry(flat-normal);
863
&:hover { box-shadow: inset 0 -2px $fill_color; }
865
&:checked {
867
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
868
$primary_color 100%,
869
transparent 0%)
870
0 0 2 / 0 0 2px;
871
}
872
&:disabled { color: $disabled_fg_color; }
874
}
875
/************
878
* Toolbars *
879
************/
880
toolbar {
881
-GtkWidget-window-dragging: true;
882
padding: $container_padding / 2;
883
background-color: $bg_color;
884
button { @extend %button_basic.flat; }
886
// on OSD
888
.osd & { background-color: transparent; }
889
// stand-alone OSD toolbars
891
&.osd {
892
transition: $shadow_transition;
893
padding: $container_padding;
894
border-radius: 2px;
895
box-shadow: $shadow_2, inset 0 1px $highlight_color;
896
background-color: $base_color;
897
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
899
&.left,
901
&.right,
902
&.top,
903
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
904
}
905
// toolbar separators
907
&.horizontal separator { margin: $container_padding / 2; }
908
&.vertical separator { margin: $container_padding / 2; }
909
&:not(.inline-toolbar):not(.osd) {
911
scale,
912
entry,
913
spinbutton,
914
button { margin: $container_padding / 2; }
915
.linked entry,
917
.linked spinbutton,
918
.linked button {
919
&:not(:first-child) { margin-left: 0; }
920
&:not(:last-child) { margin-right: 0; }
921
}
922
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
924
}
925
}
926
// searchbar, location-bar & inline-toolbar
928
.inline-toolbar {
929
padding: $container_padding;
930
border-style: solid;
931
border-width: 0 1px 1px;
932
border-color: $border_color;
933
background-color: $alt_base_color;
934
}
935
searchbar,
937
.location-bar {
938
padding: $container_padding;
939
border-style: solid;
940
border-width: 0 0 1px;
941
border-color: $border_color;
942
background-color: $bg_color;
943
background-clip: border-box;
944
}
945
/***************
948
* Header bars *
949
***************/
950
%titlebar,
951
headerbar {
952
transition: background-color $shorter_duration $deceleration_curve;
953
min-height: $large_size;
954
padding: 0 $container_padding;
955
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
956
background-color: $titlebar_bg_color;
957
color: $titlebar_fg_color;
958
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
960
&:backdrop {
962
color: $secondary_titlebar_fg_color;
963
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
965
}
966
.title {
968
transition: $longer_transition;
969
padding: 0 12px;
970
font-weight: bold;
971
}
972
.subtitle {
974
transition: $longer_transition;
975
padding: 0 12px;
976
font-size: smaller;
977
@extend .dim-label;
979
}
980
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
982
button:not(.suggested-action):not(.destructive-action) {
984
@extend %button_basic.flat;
985
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
987
$titlebar_indicator_color 0%,
988
transparent 0%)
989
0 0 0 / 0 0 0px;
990
&:checked {
992
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
993
$titlebar_indicator_color 100%,
994
transparent 0%)
995
0 0 2 / 0 0 2px;
996
&, &:disabled { background-color: transparent; }
998
}
999
}
1000
button.suggested-action, button.destructive-action {
1002
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1003
}
1004
&.selection-mode {
1006
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1007
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1008
transition: background-color 0.00001s $longer_duration;
1009
animation: header_ripple_effect $longer_duration $deceleration_curve;
1010
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1011
background-color: $primary_color;
1012
color: $inverse_fg_color;
1013
&:backdrop {
1015
color: $secondary_inverse_fg_color;
1016
}
1017
.subtitle:link { @extend *:link:selected; }
1019
button:not(.suggested-action):not(.destructive-action) {
1021
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1022
currentColor 0%,
1023
transparent 0%)
1024
0 0 0 / 0 0 0px;
1025
color: currentColor;
1026
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1028
&:checked {
1030
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1031
currentColor 100%,
1032
transparent 0%)
1033
0 0 2 / 0 0 2px;
1034
color: currentColor;
1035
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1037
}
1038
}
1039
.selection-menu {
1041
padding-left: 16px;
1042
padding-right: 16px;
1043
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1045
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1047
}
1048
}
1049
.fullscreen &,
1051
.tiled &,
1052
.maximized & {
1053
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1054
box-shadow: $shadow_1;
1055
}
1056
&.default-decoration {
1058
min-height: $small_size;
1059
padding: $container_padding;
1060
box-shadow: inset 0 1px $titlebar_highlight_color;
1061
.fullscreen &,
1063
.tiled &,
1064
.maximized & { box-shadow: none; }
1065
button.titlebutton {
1067
min-height: $small_size;
1068
min-width: $small_size;
1069
margin: 0;
1070
padding: 0;
1071
}
1072
// workaround for non-animatable buttons
1074
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1075
}
1076
.solid-csd & {
1078
&:dir(rtl), &:dir(ltr) { // specificity bump
1079
// margin-left: -2px;
1080
// margin-right: -2px;
1081
// margin-top: -2px;
1082
// border-radius: 0;
1083
// box-shadow: inset 0 1px $titlebar_highlight_color;
1084
}
1085
}
1086
}
1087
headerbar {
1089
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1090
entry,
1091
spinbutton,
1092
// separator,
1093
button {
1094
margin-top: $container_padding;
1095
margin-bottom: $container_padding;
1096
}
1097
switch {
1099
margin-top: $container_padding * 2;
1100
margin-bottom: $container_padding * 2;
1101
}
1102
// reset button margins of the spinbutton
1104
spinbutton button {
1105
margin-top: 0;
1106
margin-bottom: 0;
1107
}
1108
}
1109
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1111
border-top-left-radius: 2px;
1112
border-top-right-radius: 2px;
1113
}
1114
headerbar { // headerbar border rounding
1116
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1117
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1118
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1120
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1122
&:first-child, &:last-child {
1123
border-top-left-radius: 2px;
1124
border-top-right-radius: 2px;
1125
}
1126
}
1127
}
1128
.titlebar:not(headerbar) {
1130
window.csd > & {
1131
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1132
padding: 0;
1133
background-color: transparent;
1134
background-image: none;
1135
border-style: none;
1136
box-shadow: none;
1137
}
1138
> separator {
1140
background-color: $titlebar_bg_color;
1141
background-image: image($border_color);
1142
}
1143
@extend %titlebar;
1145
}
1146
/************
1149
* Pathbars *
1150
************/
1151
%pathbar_button,
1152
.path-bar button {
1153
padding-left: ($medium_size - 24px) / 2;
1154
padding-right: ($medium_size - 24px) / 2;
1155
label:not(:only-child) {
1157
&:first-child { margin-left: 4px; }
1158
&:last-child { margin-right: 4px; }
1160
}
1161
&.slider-button {
1163
padding-left: (24px - 16px) / 2;
1164
padding-right: (24px - 16px) / 2;
1165
}
1166
:not(headerbar) & {
1168
@extend %flat_button;
1169
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1171
$primary_color 0%,
1172
transparent 0%)
1173
0 0 0 / 0 0 0px;
1174
border-radius: 2px;
1175
&:checked {
1177
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1178
$primary_color 100%,
1179
transparent 0%)
1180
0 0 2 / 0 0 2px;
1181
&, &:disabled { background-color: transparent; }
1183
}
1184
}
1185
}
1186
/**************
1189
* Tree Views *
1190
**************/
1191
treeview.view {
1192
@at-root * {
1193
-GtkTreeView-horizontal-separator: 4;
1194
-GtkTreeView-grid-line-width: 1;
1195
-GtkTreeView-grid-line-pattern: '';
1196
-GtkTreeView-tree-line-width: 1;
1197
-GtkTreeView-tree-line-pattern: '';
1198
-GtkTreeView-expander-size: 16;
1199
}
1200
border-left-color: $fill_color; // this is actually the tree lines color,
1202
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1203
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1205
&.separator {
1207
min-height: 1px + 2px * 2;
1208
color: $border_color;
1209
}
1210
&:drop(active) {
1212
border-style: solid none;
1213
border-width: 1px;
1214
border-color: $accent_color;
1215
&.after { border-top-style: none; }
1217
&.before { border-bottom-style: none; }
1219
}
1220
&.expander {
1222
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1223
-gtk-icon-transform: rotate(-90deg);
1224
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1226
&:checked { -gtk-icon-transform: unset; }
1228
color: $secondary_fg_color;
1230
&:hover, &:active { color: $fg_color; }
1232
&:disabled { color: $disabled_secondary_fg_color; }
1234
&:selected {
1236
color: $secondary_inverse_fg_color;
1237
&:hover, &:active { color: $inverse_fg_color; }
1239
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1241
}
1242
}
1243
&.progressbar { // progress bar in treeviews
1245
border-bottom: $bar_size solid $primary_color;
1246
box-shadow: none;
1247
background-color: transparent;
1248
&:selected { border-bottom-color: currentColor; }
1250
}
1251
&.trough { // progress bar trough in treeviews
1253
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1254
box-shadow: none;
1255
background-color: transparent;
1256
&:selected { border-bottom-color: $fill_color; }
1258
}
1259
header {
1261
button {
1262
@extend row.activatable;
1263
padding: 2px 6px;
1265
border-style: none solid solid none;
1266
border-width: 1px;
1267
border-color: $border_color;
1268
border-radius: 0;
1269
background-clip: border-box;
1270
&, &:hover, &:active { box-shadow: none; }
1272
&, &:disabled { background-color: $base_color; }
1274
&:last-child { border-right-style: none; }
1276
}
1277
}
1278
button.dnd,
1280
header.button.dnd { // for treeview-like derive widgets
1281
padding: 2px 6px;
1282
border-style: none solid solid;
1283
border-width: 1px;
1284
border-color: $border_color;
1285
border-radius: 0;
1286
box-shadow: none;
1287
background-color: $base_color;
1288
background-clip: border-box;
1289
color: $primary_color;
1290
}
1291
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1293
}
1294
/*********
1297
* Menus *
1298
*********/
1299
menubar,
1300
.menubar {
1301
-GtkWidget-window-dragging: true;
1302
padding: 0;
1303
// box-shadow: inset 0 -1px $border_color;
1304
background-color: $titlebar_bg_color;
1305
> menuitem {
1307
transition: $shorter_transition;
1308
min-height: 20px;
1309
padding: 4px 8px;
1310
color: $secondary_titlebar_fg_color;
1311
&:hover { // Seems like it :hover even with keyboard focus
1313
transition: none;
1314
background-color: $semi_fill_color;
1315
color: $titlebar_fg_color;
1316
}
1317
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1319
}
1320
}
1321
.csd.popup { border-radius: 2px; }
1323
menu,
1325
.menu,
1326
.context-menu {
1327
margin: 4px 0;
1328
padding: 4px 0;
1329
box-shadow: inset 0 1px $highlight_color;
1330
background-color: $base_color;
1331
border: 1px solid $border_color; // adds borders in a non composited env
1332
.csd & {
1334
border: none; // axes borders in a composited env
1335
border-radius: 2px;
1336
}
1337
menuitem {
1339
transition: $shorter_transition;
1340
min-height: 20px;
1341
min-width: 40px;
1342
padding: 4px 8px;
1343
font: initial;
1344
text-shadow: none;
1345
&:hover {
1347
transition: none;
1348
background-color: $semi_fill_color;
1349
}
1350
&:disabled { color: $disabled_fg_color; }
1352
// submenu indicators
1354
arrow {
1355
min-height: 16px;
1356
min-width: 16px;
1357
&:dir(ltr) {
1359
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1360
margin-left: 8px;
1361
}
1362
&:dir(rtl) {
1364
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1365
margin-right: 8px;
1366
}
1367
}
1368
// avoids labels color being overridden, see
1370
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1371
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1372
}
1373
// overflow arrows
1375
> arrow {
1376
min-height: 16px;
1377
min-width: 16px;
1378
padding: 4px;
1379
background-color: $base_color;
1380
color: $secondary_fg_color;
1381
&.top {
1383
margin-top: -4px;
1384
border-bottom: 1px solid $border_color;
1385
border-radius: 2px 2px 0 0;
1386
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1387
}
1388
&.bottom {
1390
margin-bottom: -4px * 3;
1391
border-top: 1px solid $border_color;
1392
border-radius: 0 0 2px 2px;
1393
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1394
}
1395
&:hover {
1397
background-image: image($semi_fill_color);
1398
color: $fg_color;
1399
}
1400
&:disabled {
1402
border-color: transparent;
1403
background-color: transparent;
1404
color: transparent;
1405
// color: $disabled_secondary_fg_color;
1406
}
1407
}
1408
separator { margin: 4px 0; }
1410
}
1411
menuitem {
1413
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1414
}
1415
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1417
// Electron/Atom render all translucent colors in opaque colors.
1418
// It's a very critical issue for this theme and should be fixed by upstream...
1419
.popup:not(.csd) menu {
1420
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1421
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1422
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1423
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1424
menuitem {
1426
color: $opaque_fg_color;
1427
&:hover { background-color: $opaque_semi_fill_color; }
1429
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1431
}
1432
// TODO: not working this, where/how i can set the accelerators?
1434
accelerator { color: $opaque_tertiary_fg_color; }
1435
}
1436
/************
1439
* Popovers *
1440
************/
1441
popover.background {
1442
transition: $shadow_transition;
1443
padding: 2px;
1444
box-shadow: $shadow_2; // TODO: this should really have a highlight
1445
background-color: $lighter_bg_color;
1446
&:backdrop { box-shadow: $shadow_1; }
1448
&, .csd & {
1450
border-style: solid;
1451
border-width: 1px;
1452
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1453
border-radius: 2px + 1px;
1454
}
1455
> stack { margin: -4px; } // remove extra padding from menu style popovers
1457
> toolbar { margin: -2px; }
1459
> list,
1461
> .view,
1462
> toolbar {
1463
border-style: none;
1464
box-shadow: none;
1465
background-color: transparent;
1466
}
1467
&.touch-selection,
1469
&.magnifier,
1470
&.osd { @extend %osd; }
1471
// entry { @extend %entry.flat; }
1473
// button.combo { @extend %combo_flat; }
1475
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1477
&.menu button,
1479
button.model {
1480
@extend %simple_flat_button;
1481
min-height: 32px;
1483
padding: 0 8px;
1484
border-radius: 2px;
1485
&:checked { @extend %selected_items; }
1487
}
1488
separator { margin: 4px 0; }
1490
list separator { margin: 0; }
1492
}
1493
/*************
1495
* Notebooks *
1496
*************/
1497
notebook {
1498
> header {
1499
border-width: 1px;
1500
border-color: $border_color;
1501
background-color: $bg_color;
1502
background-clip: border-box;
1503
&.top {
1505
border-bottom-style: solid;
1506
> tabs {
1507
margin-bottom: -1px;
1508
> tab {
1509
&:hover { box-shadow: inset 0 -2px $fill_color; }
1511
&:checked { box-shadow: inset 0 -2px $primary_color; }
1513
}
1514
}
1515
}
1516
&.bottom {
1518
border-top-style: solid;
1519
> tabs {
1520
margin-top: -1px;
1521
> tab {
1522
&:hover { box-shadow: inset 0 2px $fill_color; }
1524
&:checked { box-shadow: inset 0 2px $primary_color; }
1526
}
1527
}
1528
}
1529
&.left {
1531
border-right-style: solid;
1532
> tabs {
1533
margin-right: -1px;
1534
> tab {
1535
&:hover { box-shadow: inset -2px 0 $fill_color; }
1537
&:checked { box-shadow: inset -2px 0 $primary_color; }
1539
}
1540
}
1541
}
1542
&.right {
1544
border-left-style: solid;
1545
> tabs {
1546
margin-left: -1px;
1547
> tab {
1548
&:hover { box-shadow: inset 2px 0 $fill_color; }
1550
&:checked { box-shadow: inset 2px 0 $primary_color; }
1552
}
1553
}
1554
}
1555
&.top > tabs > arrow {
1557
@extend %notebook_vert_arrows;
1558
border-top-style: none;
1560
}
1561
&.bottom > tabs > arrow {
1563
@extend %notebook_vert_arrows;
1564
border-bottom-style: none;
1566
}
1567
@at-root %notebook_vert_arrows {
1569
padding-left: 4px;
1570
padding-right: 4px;
1571
&.down {
1573
margin-left: -8px;
1574
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1575
}
1576
&.up {
1578
margin-right: -8px;
1579
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1580
}
1581
}
1582
&.left > tabs > arrow {
1584
@extend %notebook_horz_arrows;
1585
border-left-style: none;
1587
}
1588
&.right > tabs > arrow {
1590
@extend %notebook_horz_arrows;
1591
border-right-style: none;
1593
}
1594
@at-root %notebook_horz_arrows {
1596
padding-top: 4px;
1597
padding-bottom: 4px;
1598
&.down {
1600
margin-top: -8px;
1601
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1602
}
1603
&.up {
1605
margin-bottom: -8px;
1606
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1607
}
1608
}
1609
> tabs > arrow {
1611
@extend %simple_flat_button;
1612
min-height: 16px;
1614
min-width: 16px;
1615
border-radius: 0;
1616
}
1617
tab {
1619
transition: $longer_transition,
1620
background-size 0,
1621
background-image 0;
1622
min-height: $small_size;
1623
min-width: $small_size;
1624
padding: $container_padding 12px;
1625
outline-offset: -6px;
1627
border-width: 1px; // for reorderable tabs
1629
border-color: transparent; //
1630
background-image: radial-gradient(circle farthest-corner at center,
1632
$primary_color 10%,
1633
transparent 0%);
1634
background-repeat: no-repeat;
1635
background-position: center;
1636
background-size: 0% 0%;
1637
color: $secondary_fg_color;
1639
font-weight: 500;
1640
&:hover {
1642
color: $fg_color;
1643
&.reorderable-page {
1645
border-color: $border_color;
1646
background-color: $alt_base_color;
1647
}
1648
}
1649
&:disabled { color: $disabled_secondary_fg_color; }
1651
&:checked {
1653
transition: $longer_transition,
1654
background-size $longer_duration $deceleration_curve,
1655
background-image $longer_duration + $ripple_duration $deceleration_curve;
1656
background-image: radial-gradient(circle farthest-corner at center,
1657
transparent 10%,
1658
transparent 0%);
1659
background-size: 1000% 1000%;
1660
color: $fg_color;
1661
&:disabled { color: $disabled_fg_color; }
1663
&.reorderable-page {
1665
border-color: $border_color;
1666
background-color: $base_color;
1667
}
1668
}
1669
// colors the button like the label, overridden otherwise
1671
button.flat {
1672
@extend %small_button;
1673
&:last-child {
1675
margin-left: $container_padding;
1676
margin-right: $container_padding - 12px;
1677
}
1678
&:first-child {
1680
margin-left: $container_padding - 12px;
1681
margin-right: $container_padding;
1682
}
1683
}
1684
}
1685
&.top,
1687
&.bottom {
1688
tabs {
1689
padding-left: 8px;
1690
padding-right: 8px;
1691
&:not(:only-child) {
1693
&:first-child { margin-left: 0; }
1694
&:last-child { margin-right: 0; }
1695
}
1696
tab {
1698
&.reorderable-page {
1699
margin: 0 -1px;
1700
border-style: none solid;
1701
}
1702
}
1703
}
1704
}
1705
&.left,
1707
&.right {
1708
tabs {
1709
padding-top: 8px;
1710
padding-bottom: 8px;
1711
&:not(:only-child) {
1713
&:first-child { margin-top: 0; }
1714
&:last-child { margin-bottom: 0; }
1715
}
1716
tab {
1718
&.reorderable-page {
1719
margin: -1px 0;
1720
border-style: solid none;
1721
}
1722
}
1723
}
1724
}
1725
}
1726
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1728
background-color: $base_color;
1729
entry:not(.search),
1731
spinbutton:not(.vertical) { @extend %entry.flat; }
1732
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1734
button.combo { @extend %combo_flat; }
1736
}
1737
}
1738
/**************
1741
* Scrollbars *
1742
**************/
1743
scrollbar {
1744
$_slider_min_length: 24px;
1745
// disable steppers
1747
@at-root * {
1748
-GtkScrollbar-has-backward-stepper: false;
1749
-GtkScrollbar-has-forward-stepper: false;
1750
}
1751
transition: $longer_transition;
1753
background-color: $base_color;
1754
background-clip: $extra_background_clip;
1755
// scrollbar border
1757
&.top { border-bottom: 1px solid $border_color; }
1758
&.bottom { border-top: 1px solid $border_color; }
1759
&.left { border-right: 1px solid $border_color; }
1760
&.right { border-left: 1px solid $border_color; }
1761
// slider
1763
slider {
1764
transition: $shorter_transition, margin 0, border-width 0;
1765
min-width: 8px;
1766
min-height: 8px;
1767
border: 4px solid transparent;
1768
border-radius: $circular_radius;
1769
background-clip: padding-box;
1770
background-color: $tertiary_fg_color;
1771
&:hover { background-color: $secondary_fg_color; }
1773
&:active { background-color: $fg_color; }
1775
&:disabled { background-color: $disabled_tertiary_fg_color; }
1777
}
1778
&.fine-tune {
1780
slider {
1781
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1782
min-width: 4px;
1783
min-height: 4px;
1784
}
1785
&.horizontal slider { margin: 2px 0; }
1787
&.vertical slider { margin: 0 2px; }
1789
}
1790
&.overlay-indicator {
1792
&:not(.dragging):not(.hovering) {
1793
border-color: transparent;
1794
background-color: transparent;
1795
slider {
1797
min-width: 4px;
1798
min-height: 4px;
1799
margin: 4px - 1px;
1800
border: 1px solid scale-alpha($base_color, $lower_opacity);
1801
}
1802
button {
1804
min-width: 4px;
1805
min-height: 4px;
1806
margin: 4px - 1px;
1807
border: 1px solid scale-alpha($base_color, $lower_opacity);
1808
border-radius: $circular_radius;
1809
background-color: $tertiary_fg_color;
1810
background-clip: padding-box;
1811
-gtk-icon-source: none;
1812
&:disabled { background-color: $disabled_tertiary_fg_color; }
1814
}
1815
&.horizontal {
1817
slider { min-width: $_slider_min_length; }
1818
button { min-width: 8px; }
1820
}
1821
&.vertical {
1823
slider { min-height: $_slider_min_length; }
1824
button { min-height: 8px; }
1826
}
1827
}
1828
&.dragging,
1830
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1831
}
1832
&.horizontal slider { min-width: $_slider_min_length; }
1834
&.vertical slider { min-height: $_slider_min_length; }
1836
// button styling
1838
button {
1839
@extend %simple_flat_button;
1840
min-width: 16px;
1842
min-height: 16px;
1843
padding: 0;
1844
border-radius: 0;
1845
}
1846
// button icons
1848
&.vertical {
1849
button {
1850
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1851
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1853
}
1854
}
1855
&.horizontal {
1857
button {
1858
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1859
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1861
}
1862
}
1863
}
1864
/**********
1867
* Switch *
1868
**********/
1869
switch {
1870
transition: $longer_transition;
1871
margin: $container_padding 0;
1872
border: 4px solid transparent;
1873
border-radius: $circular_radius;
1874
background-color: $fill_color;
1875
background-clip: padding-box;
1876
font-size: 0;
1877
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1879
&:checked {
1881
background-color: scale-alpha($accent_color, 0.5);
1882
&:disabled {
1884
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1885
color: $disabled_fg_color;
1886
}
1887
}
1888
slider {
1890
@include entry(normal);
1891
transition: $longer_transition, $shadow_transition, margin 0;
1893
min-width: $small_size;
1894
min-height: $small_size;
1895
margin: -4px 0 -4px -4px;
1896
border-radius: $circular_radius;
1897
-gtk-outline-radius: $circular_radius;
1898
}
1899
&:hover slider { @include entry(focus); }
1901
&:checked slider {
1903
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1904
animation: needs_attention $longer_duration $deceleration_curve;
1905
margin: -4px -4px -4px 0;
1906
background-color: $accent_color;
1907
color: $inverse_fg_color;
1908
}
1909
&:disabled slider { @include entry(disabled); }
1911
&:checked:disabled slider { animation: none; }
1913
row:selected & {
1915
}
1916
}
1917
/*************************
1920
* Check and Radio items *
1921
*************************/
1922
// draw regular check and radio items using our PNG assets
1923
// all assets are rendered from assets.svg. never add pngs directly
1924
// selection-mode
1926
.view.content-view.check:not(list),
1927
.content-view .tile check:not(list) {
1928
min-height: 40px;
1929
min-width: 40px;
1930
margin: 0;
1931
padding: 0;
1932
box-shadow: none;
1933
background-color: transparent;
1934
background-image: none;
1935
-gtk-icon-shadow: $shadow_1;
1936
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1938
@each $s, $as in ('', '-unchecked'),
1940
(':checked', '-checked') {
1941
&#{$s} {
1942
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1943
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1944
}
1945
}
1946
}
1947
checkbutton.text-button,
1949
radiobutton.text-button {
1950
// this is for a nice focus on check and radios text
1951
padding: 2px;
1952
outline-offset: 0;
1953
label:not(:only-child) { margin: 0 4px; }
1955
}
1956
check,
1958
radio {
1959
min-height: 24px;
1960
min-width: 24px;
1961
margin: -($large_size - 24px) / 2;
1962
padding: ($large_size - 24px) / 2;
1963
@extend %simple_flat_button;
1965
@extend %circular_button;
1967
&:checked, &:indeterminate {
1969
color: $accent_color;
1970
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1972
}
1973
// &:only-child { margin: -12px; }
1975
row &:not(:checked):not(:indeterminate) {
1977
color: gtkalpha(currentColor, $secondary_opacity);
1978
&:hover, &:active { color: currentColor; }
1980
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1982
}
1983
popover & {
1985
&, &:hover, &:disabled {
1986
box-shadow: none;
1987
background-image: none;
1988
}
1989
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1991
&.left:dir(rtl) {
1993
margin-left: -16px;
1994
margin-right: -8px;
1995
}
1996
&.right:dir(ltr) {
1998
margin-left: -8px;
1999
margin-right: -16px;
2000
}
2001
}
2002
menu menuitem & {
2004
transition: none;
2005
min-height: 16px;
2006
min-width: 16px;
2007
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2008
padding: 0;
2009
&:dir(ltr) { margin-right: 8px; }
2011
&:dir(rtl) { margin-left: 8px; }
2013
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2015
&, &:hover, &:disabled {
2017
box-shadow: none;
2018
// color: inherit;
2019
}
2020
}
2021
}
2022
%check,
2024
check {
2025
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2026
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2027
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2029
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2030
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2032
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2033
}
2034
%radio,
2036
radio {
2037
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2038
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2039
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2041
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2042
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2044
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2045
border-image-slice: $large_size / 2px;
2047
border-image-width: $large_size / 2;
2048
$radio_indicator: 10px / $large_size / 2;
2050
& {
2052
border-image-source: -gtk-gradient(radial,
2053
center center, 0,
2054
center center, 0.001,
2055
to($accent_color),
2056
to(transparent));
2057
}
2058
&:checked:not(:indeterminate) {
2060
border-image-source: -gtk-gradient(radial,
2061
center center, 0,
2062
center center, $radio_indicator,
2063
to($accent_color),
2064
to(transparent));
2065
}
2066
&:checked:not(:indeterminate):disabled {
2068
border-image-source: -gtk-gradient(radial,
2069
center center, 0,
2070
center center, $radio_indicator,
2071
to(scale-alpha($accent_color, $disabled_opacity)),
2072
to(transparent));
2073
}
2074
}
2075
%small_check,
2077
menu menuitem check {
2078
& {
2079
border-radius: 2px;
2080
-gtk-outline-radius: 2px;
2081
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2082
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2083
}
2084
&:checked {
2086
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2087
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2088
}
2089
&:indeterminate {
2091
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2092
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2093
}
2094
}
2095
%small_radio,
2097
menu menuitem radio {
2098
& {
2099
border-image: none;
2100
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2101
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2102
}
2103
&:checked {
2105
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2106
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2107
}
2108
&:indeterminate {
2110
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2111
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2112
}
2113
}
2114
// ANIMATION:
2116
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2117
// the transformation is set on the active state and it get reset on the checked state.
2118
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2119
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2121
check:not(:checked):indeterminate:active,
2123
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2124
check:not(:checked),
2126
radio:not(:checked) {
2127
& {
2128
transition: $longer_transition,
2129
background-size $ripple_duration $deceleration_curve,
2130
background-image $ripple_duration * 2 $deceleration_curve,
2131
-gtk-icon-transform 0;
2132
}
2133
&:active {
2135
transition: $longer_transition,
2136
background-size 0,
2137
background-image 0,
2138
-gtk-icon-transform 0;
2139
}
2140
menu menuitem & { transition: none; }
2142
}
2143
treeview.view check,
2145
treeview.view radio {
2146
padding: 0;
2147
&:hover {
2149
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2150
&:disabled { box-shadow: none; }
2152
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2154
}
2155
& {
2157
color: $secondary_fg_color;
2158
&:hover, &:active { color: $fg_color; }
2160
&:disabled { color: $disabled_secondary_fg_color; }
2162
&:checked, &:indeterminate { color: $accent_color; }
2164
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2166
}
2167
&:selected {
2169
color: $secondary_inverse_fg_color;
2170
&:hover, &:active { color: $inverse_fg_color; }
2172
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2174
&:checked, &:indeterminate { color: $accent_color; }
2176
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2178
}
2179
}
2180
treeview.view radio:checked {
2182
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2183
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2184
border-image: none;
2185
}
2186
/************
2189
* GtkScale *
2190
************/
2191
scale {
2192
// sizing
2193
$_marks_lenght: 8px;
2194
$_marks_distance: 8px;
2195
$slider_size: 24px;
2197
$marks_slider_size: 30px;
2198
$slider_margin: -($slider_size - $bar_size) / 2;
2200
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2201
$color_slider_margin: -($slider_size) / 2;
2203
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2204
min-height: $medium_size - $slider_size;
2206
min-width: $medium_size - $slider_size;
2207
padding: ($slider_size / 2);
2208
* { transition: $longer_transition; }
2210
// the slider is inside the trough, so to have make it bigger there's a negative margin
2212
slider {
2213
min-height: $slider_size;
2214
min-width: $slider_size;
2215
margin: $slider_margin;
2216
}
2217
// the backing bit
2219
trough {
2220
outline-offset: 2px;
2221
background-color: $fill_color;
2222
&:disabled { color: $disabled_fg_color; }
2224
}
2225
// the colored part of the backing bit
2227
highlight {
2228
background-color: $accent_color;
2229
&:disabled { background-color: transparent; }
2231
}
2232
// this is another differently styled part of the backing bit, the most relevant use case is for example
2234
// in media player to indicate how much video stream as been cached
2235
fill {
2236
background-color: $fill_color;
2237
&:disabled { background-color: transparent; }
2239
}
2240
slider {
2242
transition: all $shorter_duration $standard_curve;
2243
// border-radius: 100%;
2244
// background-color: $accent_color;
2245
background-repeat: no-repeat;
2246
background-position: center;
2247
@each $s, $as in ('', ''),
2249
(':disabled', '-disabled') {
2250
&#{$s} {
2251
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2252
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2254
}
2255
}
2256
background-size: calc(100% - 8px);
2258
&:hover { background-size: calc(100% - 4px); }
2260
&:active { background-size: calc(100% - 0px); }
2262
}
2263
// click-and-hold the slider to activate
2265
&.fine-tune {
2266
// to make the slider shrink in fine-tune mode
2267
slider { background-size: calc(100% - 12px); }
2268
}
2269
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2271
marks {
2273
color: $fill_color;
2274
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2276
(bottom, bottom, top),
2277
(top, left, right),
2278
(bottom, right, left) {
2279
&.#{$marks_class} {
2280
margin-#{$marks_margin}: $_marks_distance;
2281
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2282
}
2283
}
2284
}
2285
&.horizontal {
2287
indicator {
2288
min-height: $_marks_lenght;
2289
min-width: 1px;
2290
}
2291
}
2292
&.vertical {
2294
indicator {
2295
min-height: 1px;
2296
min-width: $_marks_lenght;
2297
}
2298
}
2299
// *WARNING* scale with marks madness following
2301
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2303
('vertical', 'vert') {
2304
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2305
('marks-after', 'marks-after:not(.marks-before)') {
2306
&.#{$dir_class}.#{$marks_class} {
2307
slider {
2308
@each $state, $state_infix in ('', ''),
2309
(':disabled', '-disabled') {
2310
&#{$state} {
2311
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2312
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2314
}
2315
}
2316
@if $dir_class == 'horizontal' {
2318
min-height: $marks_slider_size;
2319
min-width: $slider_size;
2320
@if $marks_infix == 'marks-before' {
2322
margin-top: $marks_slider_margin;
2323
background-position: center calc(100% - 4px);
2325
&:hover { background-position: center calc(100% - 2px); }
2327
&:active { background-position: center calc(100% - 0px); }
2329
}
2330
@if $marks_infix == 'marks-after' {
2332
margin-bottom: $marks_slider_margin;
2333
background-position: center calc(4px);
2335
&:hover { background-position: center calc(2px); }
2337
&:active { background-position: center calc(0px); }
2339
}
2340
}
2341
@if $dir_class == 'vertical' {
2343
min-height: $slider_size;
2344
min-width: $marks_slider_size;
2345
@if $marks_infix == 'marks-before' {
2347
margin-left: $marks_slider_margin;
2348
background-position: calc(4px) center;
2350
&:hover { background-position: calc(2px) center; }
2352
&:active { background-position: calc(0px) center; }
2354
}
2355
@if $marks_infix == 'marks-after' {
2357
margin-right: $marks_slider_margin;
2358
background-position: calc(100% - 4px) center;
2360
&:hover { background-position: calc(100% - 2px) center; }
2362
&:active { background-position: calc(100% - 0px) center; }
2364
}
2365
}
2366
}
2367
&.fine-tune slider {
2369
@if $dir_class == 'horizontal' {
2370
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2371
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2373
}
2374
@if $dir_class == 'vertical' {
2376
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2377
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2379
}
2380
}
2381
}
2382
}
2383
}
2384
&.color {
2386
min-height: 0;
2387
min-width: 0;
2388
&.horizontal {
2390
padding: 0 0 12px 0;
2391
slider {
2393
&:dir(ltr), &:dir(rtl) { // specificity bump
2394
margin-bottom: $color_slider_margin;
2395
margin-top: $color_marks_slider_margin;
2396
}
2397
}
2398
}
2399
&.vertical {
2401
&:dir(ltr) {
2402
padding: 0 0 0 12px;
2403
slider {
2405
margin-left: $color_slider_margin;
2406
margin-right: $color_marks_slider_margin;
2407
}
2408
}
2409
&:dir(rtl) {
2411
padding: 0 12px 0 0;
2412
slider {
2414
margin-right: $color_slider_margin;
2415
margin-left: $color_marks_slider_margin;
2416
}
2417
}
2418
}
2419
}
2420
}
2421
/*****************
2424
* Progress bars *
2425
*****************/
2426
progressbar {
2427
// sizing
2428
&.horizontal {
2429
trough,
2430
progress { min-height: $bar_size; }
2431
}
2432
&.vertical {
2434
trough,
2435
progress { min-width: $bar_size; }
2436
}
2437
// FIXME: insensitive state missing and some other state should be set probably
2439
color: $tertiary_fg_color;
2440
font-size: smaller;
2441
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2443
progress { background-color: $primary_color; }
2445
&.osd { // progressbar.osd used for epiphany page loading progress
2447
// min-width: $bar_size;
2448
// min-height: $bar_size;
2449
// background-color: transparent;
2450
// trough { background-color: transparent; }
2452
// progress { background-color: $primary_color; }
2454
}
2455
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2457
}
2458
/*************
2461
* Level Bar *
2462
*************/
2463
levelbar {
2464
block {
2465
min-width: $medium_size;
2466
min-height: $bar_size;
2467
}
2468
&.vertical block {
2470
min-width: $bar_size;
2471
min-height: $medium_size;
2472
}
2473
trough {
2475
padding: 2px;
2476
border-radius: 2px;
2477
@include entry(normal);
2479
&:disabled { @include entry(disabled); }
2481
}
2482
&.horizontal.discrete {
2484
block { margin: 0 1px; }
2485
trough { padding: 2px 1px; }
2487
}
2488
&.vertical.discrete {
2490
block { margin: 1px 0; }
2491
trough { padding: 1px 2px; }
2493
}
2494
block {
2496
&.low { background-color: $warning_color; }
2497
&.high,
2499
&:not(.empty) { background-color: $primary_color; }
2500
&.full { background-color: $success_color; }
2502
&.empty {
2504
background-color: $fill_color;
2505
color: $disabled_fg_color;
2506
}
2507
}
2508
}
2509
/****************
2512
* Print dialog *
2513
*****************/
2514
printdialog {
2515
paper {
2516
padding: 0;
2517
border: 1px solid $border_color;
2518
background-color: $base_color;
2519
color: $fg_color;
2520
}
2521
.dialog-action-box { margin: 12px; }
2523
}
2524
/**********
2527
* Frames *
2528
**********/
2529
frame > border,
2530
.frame {
2531
margin: 0;
2532
padding: 0;
2533
border: 1px solid $border_color;
2534
border-radius: 0;
2535
box-shadow: none;
2536
&.flat { border-style: none; }
2538
}
2539
frame.flat > border { @extend .frame.flat; } // for backporting
2541
actionbar > revealer > box {
2543
padding: $container_padding;
2544
border-top: 1px solid $border_color;
2545
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2547
}
2548
scrolledwindow {
2550
viewport.frame { // avoid double borders when viewport inside scrolled window
2551
border-style: none;
2552
}
2553
// This is used when content is touch-dragged past boundaries.
2555
// draws a box on top of the content, the size changes programmatically.
2556
@at-root overshoot {
2557
&.top { @include overshoot(top); }
2558
&.bottom { @include overshoot(bottom); }
2560
&.left { @include overshoot(left); }
2562
&.right { @include overshoot(right); }
2564
}
2565
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2567
@at-root undershoot {
2568
&.top { @include undershoot(top); }
2569
&.bottom { @include undershoot(bottom); }
2571
&.left { @include undershoot(left); }
2573
&.right { @include undershoot(right); }
2575
}
2576
@at-root junction { // the small square between two scrollbars
2578
border-style: solid none none solid;
2579
border-width: 1px;
2580
border-color: $border_color;
2581
background-color: $base_color;
2582
&:dir(rtl) { border-style: solid solid none none; }
2584
}
2585
}
2586
// vbox and hbox separators
2588
separator {
2589
min-width: 1px;
2590
min-height: 1px;
2591
background-color: $border_color;
2592
}
2593
%hide_separators {
2595
min-width: 0;
2596
min-height: 0;
2597
background-color: transparent;
2598
}
2599
/*********
2602
* Lists *
2603
*********/
2604
list {
2605
border-color: $border_color;
2606
background-color: $base_color;
2607
row { padding: 2px; }
2609
}
2610
// FIXME
2612
$row_transition: $longer_transition, background-color 0, color 0;
2613
row {
2615
&.activatable {
2616
transition: $row_transition,
2617
background-size $ripple_duration $deceleration_curve,
2618
background-image $ripple_duration * 2 $deceleration_curve;
2619
box-shadow: inset 0 0 0 9999px transparent;
2620
background-image: radial-gradient(circle farthest-corner at center,
2621
transparent 10%,
2622
transparent 0%);
2623
background-repeat: no-repeat;
2624
background-position: center;
2625
background-size: 1000% 1000%;
2626
&:hover {
2628
transition: $row_transition,
2629
box-shadow 0,
2630
background-size $ripple_duration $deceleration_curve,
2631
background-image $ripple_duration * 2 $deceleration_curve;
2632
box-shadow: inset 0 0 0 9999px $row_fill_color;
2633
}
2634
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2636
&:active {
2637
transition: $row_transition,
2638
background-size 0,
2639
background-image 0;
2640
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2641
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2642
background-image: radial-gradient(circle farthest-corner at center,
2643
$semi_fill_color 10%,
2644
transparent 0%);
2645
background-size: 0% 0%;
2646
}
2647
}
2648
&:selected { @extend %selected_items; }
2650
}
2651
/*********************
2654
* App Notifications *
2655
*********************/
2656
.app-notification {
2657
@extend %osd;
2658
@extend toolbar.osd;
2660
margin: 8px;
2662
button { @extend %button_basic.flat; }
2664
&.frame,
2666
border { border-style: none; }
2667
}
2668
/*************
2671
* Expanders *
2672
*************/
2673
expander {
2674
arrow {
2675
transition: all $shorter_duration $standard_curve;
2676
min-width: 16px;
2677
min-height: 16px;
2678
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2679
-gtk-icon-transform: rotate(-90deg);
2680
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2682
&:checked { -gtk-icon-transform: unset; }
2684
color: $secondary_fg_color;
2686
&:hover, &:active { color: $fg_color; }
2688
&:disabled { color: $disabled_secondary_fg_color; }
2690
&:selected {
2692
color: $secondary_inverse_fg_color;
2693
&:hover, &:active { color: $inverse_fg_color; }
2695
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2697
}
2698
}
2699
}
2700
/************
2703
* Calendar *
2704
************/
2705
calendar {
2706
padding: 1px;
2707
border: 1px solid $border_color;
2708
color: $fg_color;
2709
&:disabled { color: $disabled_fg_color; }
2711
&:selected {
2713
@extend %selected_items;
2714
border-radius: 2px + 1px;
2716
}
2717
&.header {
2719
border-style: none none solid;
2720
border-radius: 0;
2721
}
2722
&.button { @extend %simple_flat_button; }
2724
&.highlight {
2726
color: gtkalpha(currentColor, $tertiary_opacity);
2727
font-weight: 500;
2728
}
2729
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2731
}
2732
/***********
2735
* Dialogs *
2736
***********/
2737
messagedialog { // Message Dialog styling
2738
&.background { background-color: $lighter_bg_color; }
2739
.titlebar {
2741
min-height: $small_size;
2742
border-style: none;
2743
box-shadow: inset 0 1px $highlight_color;
2744
background-color: $lighter_bg_color;
2745
color: $fg_color;
2746
&:backdrop { color: $secondary_fg_color; }
2748
}
2749
&.csd { // rounded bottom border styling for csd version
2751
&.background {
2752
// bigger radius for better antialiasing
2753
border-bottom-left-radius: 2px;
2754
border-bottom-right-radius: 2px;
2755
}
2756
.dialog-action-area button {
2758
padding: 8px 16px;
2759
border-top: 1px solid $border_color;
2760
border-radius: 0;
2761
@extend %simple_flat_button;
2763
&:first-child { border-bottom-left-radius: 2px; }
2765
&:last-child { border-bottom-right-radius: 2px; }
2767
}
2768
}
2769
entry { @extend %entry.flat; }
2771
}
2772
filechooser {
2774
.dialog-action-box { border-top: 1px solid $border_color; }
2775
#pathbarbox {
2777
border-bottom: 1px solid $border_color;
2778
background-color: $bg_color;
2779
}
2780
}
2781
filechooserbutton:drop(active) {
2783
box-shadow: none;
2784
}
2785
/***********
2788
* Sidebar *
2789
***********/
2790
.sidebar {
2791
border-style: none;
2792
background-color: $lighter_bg_color;
2793
@at-root %sidebar_left,
2795
&:dir(ltr),
2796
&.left,
2797
&.left:dir(rtl) {
2798
border-right: 1px solid $border_color;
2799
border-left-style: none;
2800
}
2801
@at-root %sidebar_right,
2803
&:dir(rtl),
2804
&.right {
2805
border-left: 1px solid $border_color;
2806
border-right-style: none;
2807
}
2808
list { background-color: transparent; }
2810
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2812
}
2813
stacksidebar {
2815
&.sidebar {
2816
&:dir(ltr),
2817
&.left,
2818
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2819
&:dir(rtl),
2821
&.right { list { @extend %sidebar_right; }}
2822
}
2823
row {
2825
padding: 10px 4px;
2826
> label {
2828
padding-left: 6px;
2829
padding-right: 6px;
2830
}
2831
&.needs-attention > label { @extend %needs_attention; }
2833
}
2834
}
2835
/****************
2838
* File chooser *
2839
****************/
2840
placessidebar {
2841
> viewport.frame { border-style: none; }
2842
list { padding: (4px - 3px) 0 4px; }
2844
row {
2846
// Needs overriding of the GtkListBoxRow padding
2847
min-height: 32px;
2848
margin: -1px 0; // Remove unknown margins
2849
padding: 0;
2850
// Using margins/padding directly in the SidebarRow
2852
// will make the animation of the new bookmark row jump
2853
> revealer { padding: 0 12px; }
2854
&:selected { color: $inverse_fg_color; }
2856
&:disabled { color: $disabled_fg_color; }
2858
image.sidebar-icon {
2860
opacity: $tertiary_opacity; // dim the device icons
2861
&:dir(ltr) { padding-right: 8px; }
2863
&:dir(rtl) { padding-left: 8px; }
2864
}
2865
label.sidebar-label {
2867
&:dir(ltr) { padding-right: 2px; }
2868
&:dir(rtl) { padding-left: 2px; }
2869
}
2870
@at-root button.sidebar-button {
2872
@extend %simple_flat_button;
2873
@extend %small_button;
2875
row:selected & {
2877
}
2878
}
2879
&.sidebar-placeholder-row {
2881
min-height: 2px;
2882
padding: 0 8px;
2883
background-image: image($accent_color);
2884
background-clip: content-box;
2885
}
2886
&.sidebar-new-bookmark-row { color: $accent_color; }
2888
&:drop(active):not(:disabled) {
2890
box-shadow: inset 0 0 0 2px $accent_color;
2891
&:selected {
2893
// background-color: $accent_color;
2894
// color: $inverse_fg_color;
2895
}
2896
}
2897
}
2898
}
2899
placesview {
2901
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2902
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2904
// this selects the "connect to server" label
2906
> actionbar > revealer > box > label {
2907
padding-left: 8px;
2908
padding-right: 8px;
2909
}
2910
}
2911
/*********
2914
* Paned *
2915
*********/
2916
paned {
2917
> separator {
2918
min-width: 1px;
2919
min-height: 1px;
2920
-gtk-icon-source: none; // defeats the ugly default handle decoration
2921
border-style: none; // just to be sure
2922
background-color: transparent;
2923
// workaround, using background istead of a border since the border will get rendered twice (?)
2924
background-image: image($border_color);
2925
background-size: 1px 1px;
2926
background-clip: content-box; // avoids borders image being rendered twice (?)
2927
&.wide {
2929
min-width: 6px;
2930
min-height: 6px;
2931
background-color: $bg_color;
2932
background-image: image($border_color), image($border_color);
2933
background-size: 1px 1px, 1px 1px;
2934
}
2935
}
2936
&.horizontal > separator {
2938
background-repeat: repeat-y;
2939
&:dir(ltr) {
2941
margin: 0 -8px 0 0;
2942
padding: 0 8px 0 0;
2943
background-position: left;
2944
}
2945
&:dir(rtl) {
2947
margin: 0 0 0 -8px;
2948
padding: 0 0 0 8px;
2949
background-position: right;
2950
}
2951
&.wide {
2953
margin: 0;
2954
padding: 0;
2955
background-repeat: repeat-y, repeat-y;
2956
background-position: left, right;
2957
}
2958
}
2959
&.vertical > separator {
2961
margin: 0 0 -8px 0;
2962
padding: 0 0 8px 0;
2963
background-repeat: repeat-x;
2964
background-position: top;
2965
&.wide {
2967
margin: 0;
2968
padding: 0;
2969
background-repeat: repeat-x, repeat-x;
2970
background-position: bottom, top;
2971
}
2972
}
2973
}
2974
/**************
2977
* GtkInfoBar *
2978
**************/
2979
infobar {
2980
border-style: none;
2981
&.info { background-color: $info_bg_color; }
2983
&.question { background-color: $question_bg_color; }
2985
&.warning { background-color: $warning_bg_color; }
2987
&.error { background-color: $error_bg_color; }
2989
&.info,
2991
&.question,
2992
&.warning,
2993
&.error {
2994
> label, & { color: $inverse_fg_color; }
2995
button { @extend %button_selected; }
2997
selection {}
2999
*:link { @extend %link_selected; }
3001
}
3002
}
3003
/************
3006
* Tooltips *
3007
************/
3008
tooltip {
3009
&.background {
3010
// background-color needs to be set this way otherwise it gets drawn twice
3011
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3012
box-shadow: inset 0 1px $highlight_color;
3013
background-color: scale-alpha($base_color, $higher_opacity);
3014
}
3015
// @extend %osd;
3017
// padding: 4px; /* not working */
3019
border-radius: 2px;
3020
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3021
&:not(.csd):not(.unity-csd) {
3023
border: 1px solid $border_color;
3024
border-radius: 2px + 1px;
3025
background-clip: $extra_background_clip;
3026
}
3027
// FIXME: we need a border or tooltips vanish on black background.
3029
decoration { background-color: transparent; }
3030
label {
3032
// tooltip label already seems to have 6px margins
3033
min-height: 32px - 6px * 2;
3034
padding: 0 8px - 6px;
3035
}
3036
* {
3038
// workaround for Eclipse.
3039
// do not include any declaration here.
3040
// padding: 0;
3041
// background-color: transparent;
3042
// color: inherit;
3043
}
3044
}
3045
/*****************
3048
* Color Chooser *
3049
*****************/
3050
colorswatch {
3051
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3052
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3053
// applied to the overlay box.
3054
// base color corners rounding
3056
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3057
// sports a bigger radius.
3058
// nth-child is needed by the custom color strip.
3059
&.top {
3061
border-top-left-radius: $material_radius + 0.5px;
3062
border-top-right-radius: $material_radius + 0.5px;
3063
overlay {
3065
border-top-left-radius: $material_radius;
3066
border-top-right-radius: $material_radius;
3067
}
3068
}
3069
&.bottom {
3071
border-bottom-left-radius: $material_radius + 0.5px;
3072
border-bottom-right-radius: $material_radius + 0.5px;
3073
overlay {
3075
border-bottom-left-radius: $material_radius;
3076
border-bottom-right-radius: $material_radius;
3077
}
3078
}
3079
&.left,
3081
&:first-child:not(.top) {
3082
border-top-left-radius: $material_radius + 0.5px;
3083
border-bottom-left-radius: $material_radius + 0.5px;
3084
overlay {
3086
border-top-left-radius: $material_radius;
3087
border-bottom-left-radius: $material_radius;
3088
}
3089
}
3090
&.right,
3092
&:last-child:not(.bottom) {
3093
border-top-right-radius: $material_radius + 0.5px;
3094
border-bottom-right-radius: $material_radius + 0.5px;
3095
overlay {
3097
border-top-right-radius: $material_radius;
3098
border-bottom-right-radius: $material_radius;
3099
}
3100
}
3101
&.dark overlay { color: $light_fg_color; }
3103
&.light overlay { color: $dark_fg_color; }
3105
&.dark { color: $light_fg_color; } // for focus ring
3107
&.light { color: $dark_fg_color; } // for focus ring
3109
&:drop(active) {
3111
box-shadow: none;
3112
&.light overlay {
3114
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3115
}
3116
&.dark overlay {
3118
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3119
}
3120
}
3121
overlay {
3123
transition: $shadow_transition;
3124
box-shadow: $shadow_1;
3125
&:hover { box-shadow: $shadow_2; }
3127
}
3128
&#add-color-button {
3130
border-radius: $material_radius $material_radius 0 0;
3131
color: $light_fg_color; // for focus ring
3132
&:only-child { border-radius: $material_radius; }
3134
overlay {
3136
background-image: linear-gradient(to right,
3137
$error_bg_color 25%,
3138
$warning_bg_color 25%, $warning_bg_color 50%,
3139
$info_bg_color 50%, $info_bg_color 75%,
3140
$question_bg_color 75%);
3141
color: $light_fg_color;
3142
}
3143
}
3144
&:disabled {
3146
opacity: $disabled_opacity;
3147
overlay { box-shadow: none; }
3149
}
3150
row:selected & {
3152
}
3153
&#editor-color-sample {
3155
border-radius: $material_radius + 0.5px;
3156
overlay { border-radius: $material_radius; }
3158
// overlay:hover { box-shadow: $shadow_1; }
3160
}
3161
}
3162
// colorscale popup
3164
colorchooser .popover.osd {
3165
transition: $shadow_transition;
3166
border-radius: 2px;
3167
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3168
background-color: $base_color;
3169
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3171
spinbutton:not(.vertical) { @extend %entry.flat; }
3173
}
3174
/********
3177
* Misc *
3178
********/
3179
// content view (grid/list)
3180
.content-view {
3181
background-color: $bg_color;
3182
// &:hover { -gtk-icon-effect: highlight; }
3184
rubberband, .rubberband { @extend rubberband; }
3186
}
3187
.scale-popup {
3189
.osd & { @extend %osd; }
3190
.osd & button.flat { // FIXME: quick hack, redo properly
3192
}
3193
button { // +/- buttons on GtkVolumeButton popup
3195
}
3196
}
3197
/**********************
3200
* Window Decorations *
3201
**********************/
3202
decoration {
3203
transition: $shadow_transition;
3204
border-radius: 2px 2px 0 0;
3205
box-shadow: $shadow_4, 0 16px 16px transparent;
3206
// FIXME rationalize shadows
3208
// this is used for the resize cursor area
3210
margin: 8px;
3211
&:backdrop {
3213
// the transparent shadow here is to enforce that the shadow extents don't
3214
// change when we go to backdrop, to prevent jumping windows.
3215
// The biggest shadow should be in the same order then in the active state
3216
// or the jumping will happen during the transition.
3217
box-shadow: $shadow_2, 0 16px 16px transparent;
3218
}
3219
.maximized &,
3221
.fullscreen &,
3222
.tiled & { border-radius: 0; }
3223
.popup & { box-shadow: none; }
3225
// server-side decorations as used by mutter
3227
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3228
.csd.popup & {
3230
border-radius: 2px;
3231
box-shadow: $shadow_2;
3232
}
3233
tooltip.csd & {
3235
border-radius: 2px;
3236
box-shadow: $shadow_2;
3237
}
3238
messagedialog.csd & {
3240
border-radius: 2px;
3241
// box-shadow: $shadow_4, 0 16px 16px transparent;
3242
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3244
}
3245
.solid-csd & {
3247
margin: 0;
3248
// padding: 4px;
3249
border-radius: 0;
3250
box-shadow: none;
3251
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3252
background-color: $titlebar_bg_color;
3253
}
3254
}
3255
// Window Close button
3257
button.titlebutton {
3258
// @extend %simple_flat_button;
3259
@extend %circular_button;
3261
.selection-mode & {
3263
}
3264
}
3265
// catch all extend :)
3268
%selected_items {
3270
background-color: $primary_color;
3271
@at-root %nobg_selected_items, & {
3273
color: $inverse_fg_color;
3274
&:disabled { color: $disabled_inverse_fg_color; }
3276
}
3277
}
3278
.monospace { font-family: monospace; }
3280
/**********************
3283
* Touch Copy & Paste *
3284
**********************/
3285
// touch selection handlebars for the Popover.osd above
3286
cursor-handle {
3287
border-radius: $circular_radius;
3288
background-color: $accent_color;
3289
background-image: none;
3290
&.top:dir(ltr), &.bottom:dir(rtl) {
3292
padding-left: 6px;
3293
border-top-right-radius: 0;
3294
}
3295
&.bottom:dir(ltr), &.top:dir(rtl) {
3297
padding-right: 6px;
3298
border-top-left-radius: 0;
3299
}
3300
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3302
-GtkWidget-text-handle-width: 24;
3303
-GtkWidget-text-handle-height: 30;
3304
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3306
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3307
url('#{$_url}@2.png'));
3308
}
3309
}
3310
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3312
// shortcut window keys
3314
.keycap {
3315
min-width: 28px - 8px * 2;
3316
min-height: 28px - 2px;
3317
margin-top: 2px;
3318
padding-bottom: 2px;
3319
padding-left: 8px;
3320
padding-right: 8px;
3321
border: solid 1px $border_color;
3323
border-radius: 2px + 1px;
3324
box-shadow: inset 0 -2px $border_color;
3325
background-color: $base_color;
3326
color: $fg_color;
3327
font-size: smaller;
3328
}
3329
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3331
transition: $longer_transition;
3332
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3333
caret-color: $accent_color;
3334
}
3335
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3337
stackswitcher button.circular,
3339
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3340
min-width: $medium_size;
3341
min-height: $medium_size;
3342
padding: 0;
3343
}
3344