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
separator {
513
min-width: 0;
514
min-height: 0;
515
background-color: transparent;
516
}
517
// &.font,
519
// &.file { separator { background-color: transparent; }}
520
// &.font { > box > box > label { font-weight: bold; }}
522
// inline-toolbar buttons
524
.inline-toolbar & {
525
// @extend %button_basic.flat;
526
&:not(.text-button) { @extend %circular_button; }
528
}
529
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
531
@at-root %circular_button,
533
&.close,
534
&.circular { // The Bloody Circul Button
535
border-radius: $circular_radius;
536
-gtk-outline-radius: $circular_radius;
537
// label { padding: 0; }
539
}
540
@at-root %small_button {
542
min-height: $small_size;
543
min-width: $small_size;
544
padding: 0;
545
border-radius: $circular_radius;
546
-gtk-outline-radius: $circular_radius;
547
}
548
}
549
%needs_attention {
551
animation: needs_attention $longer_duration $deceleration_curve forwards;
552
background-repeat: no-repeat;
553
background-position: right 3px;
554
background-size: 6px 6px;
555
&:dir(rtl) { background-position: left 3px; }
557
}
558
// all the following is for the +|- buttons on inline toolbars, that way
560
// should really be deprecated...
561
.inline-toolbar toolbutton > button { // redefining the button look is
562
// needed since those are flat...
563
}
564
// More inline toolbar buttons
566
toolbar.inline-toolbar toolbutton:not(:only-child) {
567
// > button.flat { @extend %linked_middle; }
568
// &:first-child > button.flat { @extend %linked_first; }
570
// &:last-child > button.flat { @extend %linked_last; }
572
}
573
%linked:not(:only-child) {
575
@at-root %linked_middle,
576
& {
577
border-radius: 0;
578
-gtk-outline-radius: 2px;
579
}
580
@at-root %linked_first,
582
&:first-child { border-radius: 2px 0 0 2px; }
583
@at-root %linked_last,
585
&:last-child { border-radius: 0 2px 2px 0; }
586
}
587
%linked_vertical:not(:only-child) {
589
@at-root %linked_vertical_middle,
590
& {
591
border-radius: 0;
592
-gtk-outline-radius: 2px;
593
}
594
@at-root %linked_vertical_first,
596
&:first-child { border-radius: 2px 2px 0 0; }
597
@at-root %linked_vertical_last,
599
&:last-child { border-radius: 0 0 2px 2px; }
600
}
601
/* menu buttons */
603
modelbutton.flat,
604
.menuitem.button.flat {
605
min-height: $menuitem_size;
606
padding: 0 8px;
607
border-radius: 2px;
608
color: inherit;
609
@extend %simple_flat_button;
611
&:selected { @extend %selected_items; }
613
check,
615
radio {
616
box-shadow: none;
617
background-image: none;
618
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
620
&:last-child { margin-left: -8px; margin-right: -16px; }
622
&:first-child { margin-left: -16px; margin-right: -8px; }
624
}
625
}
626
modelbutton.flat arrow {
628
background: none;
629
&:hover { background: none; }
631
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
633
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
635
}
636
button.color {
638
min-height: $small_size;
639
min-width: $small_size;
640
padding: $container_padding;
641
colorswatch:only-child {
643
// &, overlay { border-radius: 0; }
644
}
645
}
646
/*********
649
* Links *
650
*********/
651
*:link {
652
&, &:hover, &:active { color: $link_color; }
653
&:visited {
655
&, &:hover, &:active { color: $visited_link_color; }
656
}
657
@at-root %link_selected,
659
&:selected,
660
*:selected & { color: $inverse_fg_color; }
661
}
662
button:link,
664
button:visited {
665
@extend *:link;
666
> label { text-decoration-line: underline; }
668
}
669
/*****************
671
* GtkSpinButton *
672
*****************/
673
spinbutton {
674
&:not(.vertical) {
675
// in this horizontal configuration, the whole spinbutton
676
// behaves as the entry, so we extend the entry styling
677
// and nuke the style on the internal entry
678
@extend %entry;
679
padding: 0;
681
%spinbutton_entry,
683
entry {
684
min-width: $large_size - 8px * 2;
685
// reset all the other props since the spinbutton node is styled here
686
margin: 0;
687
border-image: none;
688
border-radius: 0;
689
box-shadow: none;
690
background-color: transparent;
691
//
692
// This will help to simplify spinbutton's code, but unfortunatelly
693
// doesn't work properly in :dir(rtl). It needs z-index property.
694
//
695
// min-width: $large_size - 8px;
696
//
697
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
698
//
699
// &:dir(ltr) {
700
// margin-right: -$spinbuttons_width;
701
// padding-right: $spinbuttons_width;
702
// }
703
//
704
// &:dir(rtl) {
705
// margin-left: -$spinbuttons_width;
706
// padding-left: $spinbuttons_width;
707
// }
708
}
709
button {
711
// margin: $container_padding;
712
border: solid $container_padding transparent;
713
@extend %simple_flat_button;
715
@extend %small_button;
717
&.up:dir(ltr),
719
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
720
&.up:dir(rtl),
722
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
723
}
724
}
725
// OSD horizontal
727
.osd &:not(.vertical) {
728
button {
729
}
730
}
731
// Vertical
733
&.vertical {
734
// in the vertical configuration, we treat the spinbutton
735
// as a box, and tweak the style of the entry in the middle
736
// so that it's linked
737
// FIXME: this should not be set at all, but otherwise it gets the wrong
739
// color
740
&:disabled { color: $disabled_fg_color; }
741
&:drop(active) {
743
box-shadow: none;
744
}
745
entry {
747
min-height: $medium_size;
748
min-width: $large_size;
749
padding: 0;
750
}
751
button {
753
min-height: $medium_size;
754
min-width: $large_size;
755
padding: 0;
756
@extend %simple_flat_button;
758
&.up { border-radius: 2px 2px 0 0; }
760
&.down { border-radius: 0 0 2px 2px; }
762
}
763
}
764
// OSD vertical
766
.osd &.vertical button:first-child {
767
}
768
// Misc
770
treeview &:not(.vertical) {
771
min-height: 0;
772
border-style: none;
773
border-radius: 0;
774
entry {
776
min-height: 0;
777
padding: 1px 2px;
778
}
779
}
780
}
781
/**************
784
* ComboBoxes *
785
**************/
786
combobox {
787
arrow {
788
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
789
min-height: 16px;
790
min-width: 16px;
791
}
792
button.combo:checked { transition: none; } // workaround for menuitem selection
794
button.combo cellview {
796
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
797
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
798
}
799
#gtk-combobox-popup-menu {
801
padding: 2px 0;
802
menuitem {
804
min-height: $medium_size - 2px * 2;
805
padding: 0 8px;
806
}
807
}
808
&.linked {
810
button:nth-child(2) {
811
&:dir(ltr) { @extend %linked:last-child; }
812
&:dir(rtl) { @extend %linked:first-child; }
813
}
814
}
815
&:drop(active) { // FIXME: untested
817
box-shadow: none;
818
// button.combo { @extend %button_basic:drop(active); }
820
}
821
}
822
// the combo is a composite widget so the way we do button linking doesn't
824
// work, special case needed. See
825
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
826
.linked:not(.vertical) > combobox:not(:only-child) {
828
> box > button.combo { @extend %linked_middle; }
829
&:first-child > box > button.combo { @extend %linked_first; }
831
&:last-child > box > button.combo { @extend %linked_last; }
833
}
834
.linked.vertical > combobox:not(:only-child) {
836
> box > button.combo { @extend %linked_vertical_middle; }
837
&:first-child > box > button.combo { @extend %linked_vertical_first; }
839
&:last-child > box > button.combo { @extend %linked_vertical_last; }
841
}
842
%combo_flat {
844
border-radius: 0;
845
background-image: none;
846
font-weight: inherit;
847
@include entry(flat-normal);
849
&:hover { box-shadow: inset 0 -2px $fill_color; }
851
&:checked {
853
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
854
$primary_color 100%,
855
transparent 0%)
856
0 0 2 / 0 0 2px;
857
}
858
&:disabled { color: $disabled_fg_color; }
860
}
861
/************
864
* Toolbars *
865
************/
866
toolbar {
867
-GtkWidget-window-dragging: true;
868
padding: $container_padding / 2;
869
background-color: $bg_color;
870
button { @extend %button_basic.flat; }
872
// on OSD
874
.osd & { background-color: transparent; }
875
// stand-alone OSD toolbars
877
&.osd {
878
transition: $shadow_transition;
879
padding: $container_padding;
880
border-radius: 2px;
881
box-shadow: $shadow_2, inset 0 1px $highlight_color;
882
background-color: $base_color;
883
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
885
&.left,
887
&.right,
888
&.top,
889
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
890
}
891
// toolbar separators
893
&.horizontal separator { margin: $container_padding / 2; }
894
&.vertical separator { margin: $container_padding / 2; }
895
&:not(.inline-toolbar):not(.osd) {
897
scale,
898
entry,
899
spinbutton,
900
button { margin: $container_padding / 2; }
901
.linked entry,
903
.linked spinbutton,
904
.linked button {
905
&:not(:first-child) { margin-left: 0; }
906
&:not(:last-child) { margin-right: 0; }
907
}
908
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
910
}
911
}
912
// searchbar, location-bar & inline-toolbar
914
.inline-toolbar {
915
padding: $container_padding;
916
border-style: solid;
917
border-width: 0 1px 1px;
918
border-color: $border_color;
919
background-color: $alt_base_color;
920
}
921
searchbar,
923
.location-bar {
924
padding: $container_padding;
925
border-style: solid;
926
border-width: 0 0 1px;
927
border-color: $border_color;
928
background-color: $bg_color;
929
background-clip: border-box;
930
}
931
/***************
934
* Header bars *
935
***************/
936
%titlebar,
937
headerbar {
938
transition: background-color $shorter_duration $deceleration_curve;
939
min-height: $large_size;
940
padding: 0 $container_padding;
941
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
942
background-color: $titlebar_bg_color;
943
color: $titlebar_fg_color;
944
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
946
&:backdrop {
948
color: $secondary_titlebar_fg_color;
949
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
951
}
952
.title {
954
transition: $longer_transition;
955
padding: 0 12px;
956
font-weight: bold;
957
}
958
.subtitle {
960
transition: $longer_transition;
961
padding: 0 12px;
962
font-size: smaller;
963
@extend .dim-label;
965
}
966
button:not(.suggested-action):not(.destructive-action) {
968
@extend %button_basic.flat;
969
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
971
$titlebar_indicator_color 0%,
972
transparent 0%)
973
0 0 0 / 0 0 0px;
974
&:checked {
976
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
977
$titlebar_indicator_color 100%,
978
transparent 0%)
979
0 0 2 / 0 0 2px;
980
&, &:disabled { background-color: transparent; }
982
}
983
}
984
button.suggested-action, button.destructive-action {
986
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
987
}
988
&.selection-mode {
990
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
991
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
992
transition: background-color 0.00001s $longer_duration;
993
animation: header_ripple_effect $longer_duration $deceleration_curve;
994
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
995
background-color: $primary_color;
996
color: $inverse_fg_color;
997
&:backdrop {
999
color: $secondary_inverse_fg_color;
1000
}
1001
.subtitle:link { @extend *:link:selected; }
1003
button:not(.suggested-action):not(.destructive-action) {
1005
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1006
currentColor 0%,
1007
transparent 0%)
1008
0 0 0 / 0 0 0px;
1009
color: currentColor;
1010
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1012
&:checked {
1014
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1015
currentColor 100%,
1016
transparent 0%)
1017
0 0 2 / 0 0 2px;
1018
color: currentColor;
1019
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1021
}
1022
}
1023
.selection-menu {
1025
padding-left: 16px;
1026
padding-right: 16px;
1027
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1029
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1031
}
1032
}
1033
.fullscreen &,
1035
.tiled &,
1036
.maximized & {
1037
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1038
box-shadow: $shadow_1;
1039
}
1040
&.default-decoration {
1042
min-height: $small_size;
1043
padding: $container_padding;
1044
box-shadow: inset 0 1px $titlebar_highlight_color;
1045
.fullscreen &,
1047
.tiled &,
1048
.maximized & { box-shadow: none; }
1049
button.titlebutton {
1051
min-height: $small_size;
1052
min-width: $small_size;
1053
margin: 0;
1054
padding: 0;
1055
}
1056
// workaround for non-animatable buttons
1058
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1059
}
1060
.solid-csd & {
1062
&:dir(rtl), &:dir(ltr) { // specificity bump
1063
// margin-left: -2px;
1064
// margin-right: -2px;
1065
// margin-top: -2px;
1066
// border-radius: 0;
1067
// box-shadow: inset 0 1px $titlebar_highlight_color;
1068
}
1069
}
1070
}
1071
headerbar {
1073
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1074
entry,
1075
spinbutton,
1076
// separator,
1077
button {
1078
margin-top: $container_padding;
1079
margin-bottom: $container_padding;
1080
}
1081
switch {
1083
margin-top: $container_padding * 2;
1084
margin-bottom: $container_padding * 2;
1085
}
1086
// reset button margins of the spinbutton
1088
spinbutton button {
1089
margin-top: 0;
1090
margin-bottom: 0;
1091
}
1092
}
1093
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1095
border-top-left-radius: 2px;
1096
border-top-right-radius: 2px;
1097
}
1098
headerbar { // headerbar border rounding
1100
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1101
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1102
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1104
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1106
&:first-child, &:last-child {
1107
border-top-left-radius: 2px;
1108
border-top-right-radius: 2px;
1109
}
1110
}
1111
}
1112
.titlebar:not(headerbar) {
1114
window.csd > & {
1115
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1116
padding: 0;
1117
background-color: transparent;
1118
background-image: none;
1119
border-style: none;
1120
box-shadow: none;
1121
}
1122
> separator {
1124
background-color: $titlebar_bg_color;
1125
background-image: image($border_color);
1126
}
1127
@extend %titlebar;
1129
}
1130
/************
1133
* Pathbars *
1134
************/
1135
%pathbar_button,
1136
.path-bar button {
1137
padding-left: ($medium_size - 24px) / 2;
1138
padding-right: ($medium_size - 24px) / 2;
1139
label:not(:only-child) {
1141
&:first-child { margin-left: 4px; }
1142
&:last-child { margin-right: 4px; }
1144
}
1145
&.slider-button {
1147
padding-left: (24px - 16px) / 2;
1148
padding-right: (24px - 16px) / 2;
1149
}
1150
:not(headerbar) & {
1152
@extend %flat_button;
1153
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1155
$primary_color 0%,
1156
transparent 0%)
1157
0 0 0 / 0 0 0px;
1158
border-radius: 2px;
1159
&:checked {
1161
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1162
$primary_color 100%,
1163
transparent 0%)
1164
0 0 2 / 0 0 2px;
1165
&, &:disabled { background-color: transparent; }
1167
}
1168
}
1169
}
1170
/**************
1173
* Tree Views *
1174
**************/
1175
treeview.view {
1176
@at-root * {
1177
-GtkTreeView-horizontal-separator: 4;
1178
-GtkTreeView-grid-line-width: 1;
1179
-GtkTreeView-grid-line-pattern: '';
1180
-GtkTreeView-tree-line-width: 1;
1181
-GtkTreeView-tree-line-pattern: '';
1182
-GtkTreeView-expander-size: 16;
1183
}
1184
border-left-color: $fill_color; // this is actually the tree lines color,
1186
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1187
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1189
&.separator {
1191
min-height: 1px + 2px * 2;
1192
color: $border_color;
1193
}
1194
&:drop(active) {
1196
border-style: solid none;
1197
border-width: 1px;
1198
border-color: $accent_color;
1199
&.after { border-top-style: none; }
1201
&.before { border-bottom-style: none; }
1203
}
1204
&.expander {
1206
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1207
-gtk-icon-transform: rotate(-90deg);
1208
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1210
&:checked { -gtk-icon-transform: unset; }
1212
color: $secondary_fg_color;
1214
&:hover, &:active { color: $fg_color; }
1216
&:disabled { color: $disabled_secondary_fg_color; }
1218
&:selected {
1220
color: $secondary_inverse_fg_color;
1221
&:hover, &:active { color: $inverse_fg_color; }
1223
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1225
}
1226
}
1227
&.progressbar { // progress bar in treeviews
1229
border-bottom: $bar_size solid $primary_color;
1230
box-shadow: none;
1231
background-color: transparent;
1232
&:selected { border-bottom-color: currentColor; }
1234
}
1235
&.trough { // progress bar trough in treeviews
1237
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1238
box-shadow: none;
1239
background-color: transparent;
1240
&:selected { border-bottom-color: $fill_color; }
1242
}
1243
header {
1245
button {
1246
@extend row.activatable;
1247
padding: 2px 6px;
1249
border-style: none solid solid none;
1250
border-width: 1px;
1251
border-color: $border_color;
1252
border-radius: 0;
1253
background-clip: border-box;
1254
&, &:hover, &:active { box-shadow: none; }
1256
&, &:disabled { background-color: $base_color; }
1258
&:last-child { border-right-style: none; }
1260
}
1261
}
1262
button.dnd,
1264
header.button.dnd { // for treeview-like derive widgets
1265
padding: 2px 6px;
1266
border-style: none solid solid;
1267
border-width: 1px;
1268
border-color: $border_color;
1269
border-radius: 0;
1270
box-shadow: none;
1271
background-color: $base_color;
1272
background-clip: border-box;
1273
color: $primary_color;
1274
}
1275
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1277
}
1278
/*********
1281
* Menus *
1282
*********/
1283
menubar,
1284
.menubar {
1285
-GtkWidget-window-dragging: true;
1286
padding: 0;
1287
// box-shadow: inset 0 -1px $border_color;
1288
background-color: $titlebar_bg_color;
1289
> menuitem {
1291
transition: $shorter_transition;
1292
min-height: 20px;
1293
padding: 4px 8px;
1294
color: $secondary_titlebar_fg_color;
1295
&:hover { // Seems like it :hover even with keyboard focus
1297
transition: none;
1298
background-color: $semi_fill_color;
1299
color: $titlebar_fg_color;
1300
}
1301
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1303
}
1304
}
1305
.csd.popup { border-radius: 2px; }
1307
menu,
1309
.menu,
1310
.context-menu {
1311
margin: 4px 0;
1312
padding: 4px 0;
1313
box-shadow: inset 0 1px $highlight_color;
1314
background-color: $base_color;
1315
border: 1px solid $border_color; // adds borders in a non composited env
1316
.csd & {
1318
border: none; // axes borders in a composited env
1319
border-radius: 2px;
1320
}
1321
menuitem {
1323
transition: $shorter_transition;
1324
min-height: 20px;
1325
min-width: 40px;
1326
padding: 4px 8px;
1327
font: initial;
1328
text-shadow: none;
1329
&:hover {
1331
transition: none;
1332
background-color: $semi_fill_color;
1333
}
1334
&:disabled { color: $disabled_fg_color; }
1336
// submenu indicators
1338
arrow {
1339
min-height: 16px;
1340
min-width: 16px;
1341
&:dir(ltr) {
1343
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1344
margin-left: 8px;
1345
}
1346
&:dir(rtl) {
1348
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1349
margin-right: 8px;
1350
}
1351
}
1352
// avoids labels color being overridden, see
1354
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1355
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1356
}
1357
// overflow arrows
1359
> arrow {
1360
min-height: 16px;
1361
min-width: 16px;
1362
padding: 4px;
1363
border-radius: 0;
1364
background-color: $base_color;
1365
color: $secondary_fg_color;
1366
&.top {
1368
margin-top: -4px;
1369
border-bottom: 1px solid $border_color;
1370
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1371
}
1372
&.bottom {
1374
margin-bottom: -4px;
1375
border-top: 1px solid $border_color;
1376
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1377
}
1378
&:hover {
1380
background-image: image($semi_fill_color);
1381
color: $fg_color;
1382
}
1383
&:disabled {
1385
border-color: transparent;
1386
background-color: transparent;
1387
color: transparent;
1388
// color: $disabled_secondary_fg_color;
1389
}
1390
}
1391
separator { margin: 4px 0; }
1393
}
1394
menuitem {
1396
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1397
check,
1399
radio {
1400
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1401
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1402
}
1403
}
1404
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1406
// Electron/Atom render all translucent colors in opaque colors.
1407
// It's a very critical issue for this theme and should be fixed by upstream...
1408
.popup:not(.csd) menu {
1409
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1410
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1411
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1412
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1413
menuitem {
1415
color: $opaque_fg_color;
1416
&:hover { background-color: $opaque_semi_fill_color; }
1418
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1420
}
1421
// TODO: not working this, where/how i can set the accelerators?
1423
accelerator { color: $opaque_tertiary_fg_color; }
1424
}
1425
/************
1428
* Popovers *
1429
************/
1430
popover.background {
1431
transition: $shadow_transition;
1432
padding: 2px;
1433
box-shadow: $shadow_2; // TODO: this should really have a highlight
1434
background-color: $lighter_bg_color;
1435
&:backdrop { box-shadow: $shadow_1; }
1437
&, .csd & {
1439
border-style: solid;
1440
border-width: 1px;
1441
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1442
border-radius: 2px + 1px;
1443
}
1444
> stack { margin: -4px; } // remove extra padding from menu style popovers
1446
> toolbar { margin: -2px; }
1448
> list,
1450
> .view,
1451
> toolbar {
1452
border-style: none;
1453
box-shadow: none;
1454
background-color: transparent;
1455
}
1456
&.touch-selection,
1458
&.magnifier,
1459
&.osd { @extend %osd; }
1460
// entry { @extend %entry.flat; }
1462
// button.combo { @extend %combo_flat; }
1464
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1466
&.menu button,
1468
button.model {
1469
@extend %simple_flat_button;
1470
min-height: 32px;
1472
padding: 0 8px;
1473
border-radius: 2px;
1474
&:checked { @extend %selected_items; }
1476
}
1477
separator { margin: 4px 0; }
1479
list separator { margin: 0; }
1481
}
1482
/*************
1484
* Notebooks *
1485
*************/
1486
notebook {
1487
> header {
1488
border-width: 1px;
1489
border-color: $border_color;
1490
background-color: $bg_color;
1491
background-clip: border-box;
1492
&.top {
1494
border-bottom-style: solid;
1495
> tabs {
1496
margin-bottom: -1px;
1497
> tab {
1498
&:hover { box-shadow: inset 0 -2px $fill_color; }
1500
&:checked { box-shadow: inset 0 -2px $primary_color; }
1502
}
1503
}
1504
}
1505
&.bottom {
1507
border-top-style: solid;
1508
> tabs {
1509
margin-top: -1px;
1510
> tab {
1511
&:hover { box-shadow: inset 0 2px $fill_color; }
1513
&:checked { box-shadow: inset 0 2px $primary_color; }
1515
}
1516
}
1517
}
1518
&.left {
1520
border-right-style: solid;
1521
> tabs {
1522
margin-right: -1px;
1523
> tab {
1524
&:hover { box-shadow: inset -2px 0 $fill_color; }
1526
&:checked { box-shadow: inset -2px 0 $primary_color; }
1528
}
1529
}
1530
}
1531
&.right {
1533
border-left-style: solid;
1534
> tabs {
1535
margin-left: -1px;
1536
> tab {
1537
&:hover { box-shadow: inset 2px 0 $fill_color; }
1539
&:checked { box-shadow: inset 2px 0 $primary_color; }
1541
}
1542
}
1543
}
1544
&.top > tabs > arrow {
1546
@extend %notebook_vert_arrows;
1547
border-top-style: none;
1549
}
1550
&.bottom > tabs > arrow {
1552
@extend %notebook_vert_arrows;
1553
border-bottom-style: none;
1555
}
1556
@at-root %notebook_vert_arrows {
1558
padding-left: 4px;
1559
padding-right: 4px;
1560
&.down {
1562
margin-left: -8px;
1563
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1564
}
1565
&.up {
1567
margin-right: -8px;
1568
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1569
}
1570
}
1571
&.left > tabs > arrow {
1573
@extend %notebook_horz_arrows;
1574
border-left-style: none;
1576
}
1577
&.right > tabs > arrow {
1579
@extend %notebook_horz_arrows;
1580
border-right-style: none;
1582
}
1583
@at-root %notebook_horz_arrows {
1585
padding-top: 4px;
1586
padding-bottom: 4px;
1587
&.down {
1589
margin-top: -8px;
1590
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1591
}
1592
&.up {
1594
margin-bottom: -8px;
1595
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1596
}
1597
}
1598
> tabs > arrow {
1600
@extend %simple_flat_button;
1601
min-height: 16px;
1603
min-width: 16px;
1604
border-radius: 0;
1605
}
1606
tab {
1608
transition: $longer_transition,
1609
background-size 0,
1610
background-image 0;
1611
min-height: $small_size;
1612
min-width: $small_size;
1613
padding: $container_padding 12px;
1614
outline-offset: -6px;
1616
border-width: 1px; // for reorderable tabs
1618
border-color: transparent; //
1619
background-image: radial-gradient(circle farthest-corner at center,
1621
$primary_color 10%,
1622
transparent 0%);
1623
background-repeat: no-repeat;
1624
background-position: center;
1625
background-size: 0% 0%;
1626
color: $secondary_fg_color;
1628
font-weight: 500;
1629
&:hover {
1631
color: $fg_color;
1632
&.reorderable-page {
1634
border-color: $border_color;
1635
background-color: $alt_base_color;
1636
}
1637
}
1638
&:disabled { color: $disabled_secondary_fg_color; }
1640
&:checked {
1642
transition: $longer_transition,
1643
background-size $longer_duration $deceleration_curve,
1644
background-image $longer_duration + $ripple_duration $deceleration_curve;
1645
background-image: radial-gradient(circle farthest-corner at center,
1646
transparent 10%,
1647
transparent 0%);
1648
background-size: 1000% 1000%;
1649
color: $fg_color;
1650
&:disabled { color: $disabled_fg_color; }
1652
&.reorderable-page {
1654
border-color: $border_color;
1655
background-color: $base_color;
1656
}
1657
}
1658
// colors the button like the label, overridden otherwise
1660
button.flat {
1661
@extend %small_button;
1662
&:last-child {
1664
margin-left: $container_padding;
1665
margin-right: $container_padding - 12px;
1666
}
1667
&:first-child {
1669
margin-left: $container_padding - 12px;
1670
margin-right: $container_padding;
1671
}
1672
}
1673
}
1674
&.top,
1676
&.bottom {
1677
tabs {
1678
padding-left: 8px;
1679
padding-right: 8px;
1680
&:not(:only-child) {
1682
&:first-child { margin-left: 0; }
1683
&:last-child { margin-right: 0; }
1684
}
1685
tab {
1687
&.reorderable-page {
1688
margin: 0 -1px;
1689
border-style: none solid;
1690
}
1691
}
1692
}
1693
}
1694
&.left,
1696
&.right {
1697
tabs {
1698
padding-top: 8px;
1699
padding-bottom: 8px;
1700
&:not(:only-child) {
1702
&:first-child { margin-top: 0; }
1703
&:last-child { margin-bottom: 0; }
1704
}
1705
tab {
1707
&.reorderable-page {
1708
margin: -1px 0;
1709
border-style: solid none;
1710
}
1711
}
1712
}
1713
}
1714
}
1715
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1717
background-color: $base_color;
1718
entry:not(.search),
1720
spinbutton:not(.vertical) { @extend %entry.flat; }
1721
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1723
button.combo { @extend %combo_flat; }
1725
}
1726
}
1727
/**************
1730
* Scrollbars *
1731
**************/
1732
scrollbar {
1733
$_slider_min_length: 24px;
1734
// disable steppers
1736
@at-root * {
1737
-GtkScrollbar-has-backward-stepper: false;
1738
-GtkScrollbar-has-forward-stepper: false;
1739
}
1740
transition: $longer_transition;
1742
background-color: $base_color;
1743
background-clip: $extra_background_clip;
1744
// scrollbar border
1746
&.top { border-bottom: 1px solid $border_color; }
1747
&.bottom { border-top: 1px solid $border_color; }
1748
&.left { border-right: 1px solid $border_color; }
1749
&.right { border-left: 1px solid $border_color; }
1750
// slider
1752
slider {
1753
transition: $shorter_transition, margin 0, border-width 0;
1754
min-width: 8px;
1755
min-height: 8px;
1756
border: 4px solid transparent;
1757
border-radius: $circular_radius;
1758
background-clip: padding-box;
1759
background-color: $tertiary_fg_color;
1760
&:hover { background-color: $secondary_fg_color; }
1762
&:active { background-color: $fg_color; }
1764
&:disabled { background-color: $disabled_tertiary_fg_color; }
1766
}
1767
&.fine-tune {
1769
slider {
1770
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1771
min-width: 4px;
1772
min-height: 4px;
1773
}
1774
&.horizontal slider { margin: 2px 0; }
1776
&.vertical slider { margin: 0 2px; }
1778
}
1779
&.overlay-indicator {
1781
&:not(.dragging):not(.hovering) {
1782
border-color: transparent;
1783
background-color: transparent;
1784
slider {
1786
min-width: 4px;
1787
min-height: 4px;
1788
margin: 4px - 1px;
1789
border: 1px solid scale-alpha($base_color, $lower_opacity);
1790
}
1791
button {
1793
min-width: 4px;
1794
min-height: 4px;
1795
margin: 4px - 1px;
1796
border: 1px solid scale-alpha($base_color, $lower_opacity);
1797
border-radius: $circular_radius;
1798
background-color: $tertiary_fg_color;
1799
background-clip: padding-box;
1800
-gtk-icon-source: none;
1801
&:disabled { background-color: $disabled_tertiary_fg_color; }
1803
}
1804
&.horizontal {
1806
slider { min-width: $_slider_min_length; }
1807
button { min-width: 8px; }
1809
}
1810
&.vertical {
1812
slider { min-height: $_slider_min_length; }
1813
button { min-height: 8px; }
1815
}
1816
}
1817
&.dragging,
1819
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1820
}
1821
&.horizontal slider { min-width: $_slider_min_length; }
1823
&.vertical slider { min-height: $_slider_min_length; }
1825
// button styling
1827
button {
1828
@extend %simple_flat_button;
1829
min-width: 16px;
1831
min-height: 16px;
1832
padding: 0;
1833
border-radius: 0;
1834
}
1835
// button icons
1837
&.vertical {
1838
button {
1839
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1840
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1842
}
1843
}
1844
&.horizontal {
1846
button {
1847
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1848
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1850
}
1851
}
1852
}
1853
/**********
1856
* Switch *
1857
**********/
1858
switch {
1859
transition: $longer_transition;
1860
margin: $container_padding 0;
1861
border: 4px solid transparent;
1862
border-radius: $circular_radius;
1863
background-color: $fill_color;
1864
background-clip: padding-box;
1865
font-size: 0;
1866
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1868
&:checked {
1870
background-color: scale-alpha($accent_color, 0.5);
1871
&:disabled {
1873
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1874
color: $disabled_fg_color;
1875
}
1876
}
1877
slider {
1879
@include entry(normal);
1880
transition: $longer_transition, $shadow_transition, margin 0;
1882
min-width: $small_size;
1883
min-height: $small_size;
1884
margin: -4px 0 -4px -4px;
1885
border-radius: $circular_radius;
1886
-gtk-outline-radius: $circular_radius;
1887
}
1888
&:hover slider { @include entry(focus); }
1890
&:checked slider {
1892
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1893
animation: needs_attention $longer_duration $deceleration_curve;
1894
margin: -4px -4px -4px 0;
1895
background-color: $accent_color;
1896
color: $inverse_fg_color;
1897
}
1898
&:disabled slider { @include entry(disabled); }
1900
&:checked:disabled slider { animation: none; }
1902
row:selected & {
1904
}
1905
}
1906
/*************************
1909
* Check and Radio items *
1910
*************************/
1911
// draw regular check and radio items using our PNG assets
1912
// all assets are rendered from assets.svg. never add pngs directly
1913
// selection-mode
1915
.view.content-view.check:not(list),
1916
.content-view .tile check:not(list) {
1917
min-height: 40px;
1918
min-width: 40px;
1919
margin: 0;
1920
padding: 0;
1921
box-shadow: none;
1922
background-color: transparent;
1923
background-image: none;
1924
-gtk-icon-shadow: $shadow_1;
1925
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1927
@each $s, $as in ('', '-unchecked'),
1929
(':checked', '-checked') {
1930
&#{$s} {
1931
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1932
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1933
}
1934
}
1935
}
1936
checkbutton.text-button,
1938
radiobutton.text-button {
1939
// this is for a nice focus on check and radios text
1940
padding: 2px;
1941
outline-offset: 0;
1942
label:not(:only-child) { margin: 0 4px; }
1944
}
1945
check,
1947
radio {
1948
min-height: 24px;
1949
min-width: 24px;
1950
margin: -($large_size - 24px) / 2;
1951
padding: ($large_size - 24px) / 2;
1952
@extend %simple_flat_button;
1954
@extend %circular_button;
1956
&:checked, &:indeterminate {
1958
color: $accent_color;
1959
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1961
}
1962
// &:only-child { margin: -12px; }
1964
row &:not(:checked):not(:indeterminate) {
1966
color: gtkalpha(currentColor, $secondary_opacity);
1967
&:hover, &:active { color: currentColor; }
1969
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1971
}
1972
menu menuitem & {
1974
transition: none;
1975
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1976
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1978
&, &:hover, &:disabled {
1980
box-shadow: none;
1981
// color: inherit;
1982
}
1983
}
1984
}
1985
%check,
1987
check {
1988
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
1989
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
1990
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
1992
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
1993
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
1995
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
1996
}
1997
%radio,
1999
radio {
2000
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2001
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2002
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2004
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2005
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2007
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2008
border-image-slice: $large_size / 2px;
2010
border-image-width: $large_size / 2;
2011
$radio_indicator: 10px / $large_size / 2;
2013
& {
2015
border-image-source: -gtk-gradient(radial,
2016
center center, 0,
2017
center center, 0.001,
2018
to($accent_color),
2019
to(transparent));
2020
}
2021
&:checked:not(:indeterminate) {
2023
border-image-source: -gtk-gradient(radial,
2024
center center, 0,
2025
center center, $radio_indicator,
2026
to($accent_color),
2027
to(transparent));
2028
}
2029
&:checked:not(:indeterminate):disabled {
2031
border-image-source: -gtk-gradient(radial,
2032
center center, 0,
2033
center center, $radio_indicator,
2034
to(scale-alpha($accent_color, $disabled_opacity)),
2035
to(transparent));
2036
}
2037
}
2038
// ANIMATION:
2040
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2041
// the transformation is set on the active state and it get reset on the checked state.
2042
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2043
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2045
check:not(:checked):indeterminate:active,
2047
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2048
check:not(:checked),
2050
radio:not(:checked) {
2051
& {
2052
transition: $longer_transition,
2053
background-size $ripple_duration $deceleration_curve,
2054
background-image $ripple_duration * 2 $deceleration_curve,
2055
-gtk-icon-transform 0;
2056
}
2057
&:active {
2059
transition: $longer_transition,
2060
background-size 0,
2061
background-image 0,
2062
-gtk-icon-transform 0;
2063
}
2064
menu menuitem & { transition: none; }
2066
}
2067
treeview.view check,
2069
treeview.view radio {
2070
padding: 0;
2071
&:hover {
2073
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2074
&:disabled { box-shadow: none; }
2076
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2078
}
2079
& {
2081
color: $secondary_fg_color;
2082
&:hover, &:active { color: $fg_color; }
2084
&:disabled { color: $disabled_secondary_fg_color; }
2086
&:checked, &:indeterminate { color: $accent_color; }
2088
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2090
}
2091
&:selected {
2093
color: $secondary_inverse_fg_color;
2094
&:hover, &:active { color: $inverse_fg_color; }
2096
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2098
&:checked, &:indeterminate { color: $accent_color; }
2100
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2102
}
2103
}
2104
treeview.view radio:checked {
2106
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2107
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2108
border-image: none;
2109
}
2110
/************
2113
* GtkScale *
2114
************/
2115
scale {
2116
// sizing
2117
$_marks_lenght: 8px;
2118
$_marks_distance: 8px;
2119
$slider_size: 24px;
2121
$marks_slider_size: 30px;
2122
$slider_margin: -($slider_size - $bar_size) / 2;
2124
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2125
$color_slider_margin: -($slider_size) / 2;
2127
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2128
min-height: $medium_size - $slider_size;
2130
min-width: $medium_size - $slider_size;
2131
padding: ($slider_size / 2);
2132
* { transition: $longer_transition; }
2134
// the slider is inside the trough, so to have make it bigger there's a negative margin
2136
slider {
2137
min-height: $slider_size;
2138
min-width: $slider_size;
2139
margin: $slider_margin;
2140
}
2141
// the backing bit
2143
trough {
2144
outline-offset: 2px;
2145
background-color: $fill_color;
2146
&:disabled { color: $disabled_fg_color; }
2148
}
2149
// the colored part of the backing bit
2151
highlight {
2152
background-color: $accent_color;
2153
&:disabled { background-color: transparent; }
2155
}
2156
// this is another differently styled part of the backing bit, the most relevant use case is for example
2158
// in media player to indicate how much video stream as been cached
2159
fill {
2160
background-color: $fill_color;
2161
&:disabled { background-color: transparent; }
2163
}
2164
slider {
2166
transition: all $shorter_duration $standard_curve;
2167
// border-radius: 100%;
2168
// background-color: $accent_color;
2169
background-repeat: no-repeat;
2170
background-position: center;
2171
@each $s, $as in ('', ''),
2173
(':disabled', '-disabled') {
2174
&#{$s} {
2175
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2176
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2178
}
2179
}
2180
background-size: calc(100% - 8px);
2182
&:hover { background-size: calc(100% - 4px); }
2184
&:active { background-size: calc(100% - 0px); }
2186
}
2187
// click-and-hold the slider to activate
2189
&.fine-tune {
2190
// to make the slider shrink in fine-tune mode
2191
slider { background-size: calc(100% - 12px); }
2192
}
2193
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2195
marks {
2197
color: $fill_color;
2198
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2200
(bottom, bottom, top),
2201
(top, left, right),
2202
(bottom, right, left) {
2203
&.#{$marks_class} {
2204
margin-#{$marks_margin}: $_marks_distance;
2205
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2206
}
2207
}
2208
}
2209
&.horizontal {
2211
indicator {
2212
min-height: $_marks_lenght;
2213
min-width: 1px;
2214
}
2215
}
2216
&.vertical {
2218
indicator {
2219
min-height: 1px;
2220
min-width: $_marks_lenght;
2221
}
2222
}
2223
// *WARNING* scale with marks madness following
2225
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2227
('vertical', 'vert') {
2228
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2229
('marks-after', 'marks-after:not(.marks-before)') {
2230
&.#{$dir_class}.#{$marks_class} {
2231
slider {
2232
@each $state, $state_infix in ('', ''),
2233
(':disabled', '-disabled') {
2234
&#{$state} {
2235
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2236
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2238
}
2239
}
2240
@if $dir_class == 'horizontal' {
2242
min-height: $marks_slider_size;
2243
min-width: $slider_size;
2244
@if $marks_infix == 'marks-before' {
2246
margin-top: $marks_slider_margin;
2247
background-position: center calc(100% - 4px);
2249
&:hover { background-position: center calc(100% - 2px); }
2251
&:active { background-position: center calc(100% - 0px); }
2253
}
2254
@if $marks_infix == 'marks-after' {
2256
margin-bottom: $marks_slider_margin;
2257
background-position: center calc(4px);
2259
&:hover { background-position: center calc(2px); }
2261
&:active { background-position: center calc(0px); }
2263
}
2264
}
2265
@if $dir_class == 'vertical' {
2267
min-height: $slider_size;
2268
min-width: $marks_slider_size;
2269
@if $marks_infix == 'marks-before' {
2271
margin-left: $marks_slider_margin;
2272
background-position: calc(4px) center;
2274
&:hover { background-position: calc(2px) center; }
2276
&:active { background-position: calc(0px) center; }
2278
}
2279
@if $marks_infix == 'marks-after' {
2281
margin-right: $marks_slider_margin;
2282
background-position: calc(100% - 4px) center;
2284
&:hover { background-position: calc(100% - 2px) center; }
2286
&:active { background-position: calc(100% - 0px) center; }
2288
}
2289
}
2290
}
2291
&.fine-tune slider {
2293
@if $dir_class == 'horizontal' {
2294
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2295
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2297
}
2298
@if $dir_class == 'vertical' {
2300
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2301
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2303
}
2304
}
2305
}
2306
}
2307
}
2308
&.color {
2310
min-height: 0;
2311
min-width: 0;
2312
&.horizontal {
2314
padding: 0 0 12px 0;
2315
slider {
2317
&:dir(ltr), &:dir(rtl) { // specificity bump
2318
margin-bottom: $color_slider_margin;
2319
margin-top: $color_marks_slider_margin;
2320
}
2321
}
2322
}
2323
&.vertical {
2325
&:dir(ltr) {
2326
padding: 0 0 0 12px;
2327
slider {
2329
margin-left: $color_slider_margin;
2330
margin-right: $color_marks_slider_margin;
2331
}
2332
}
2333
&:dir(rtl) {
2335
padding: 0 12px 0 0;
2336
slider {
2338
margin-right: $color_slider_margin;
2339
margin-left: $color_marks_slider_margin;
2340
}
2341
}
2342
}
2343
}
2344
}
2345
/*****************
2348
* Progress bars *
2349
*****************/
2350
progressbar {
2351
// sizing
2352
&.horizontal {
2353
trough,
2354
progress { min-height: $bar_size; }
2355
}
2356
&.vertical {
2358
trough,
2359
progress { min-width: $bar_size; }
2360
}
2361
// FIXME: insensitive state missing and some other state should be set probably
2363
color: $tertiary_fg_color;
2364
font-size: smaller;
2365
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2367
progress { background-color: $primary_color; }
2369
&.osd { // progressbar.osd used for epiphany page loading progress
2371
// min-width: $bar_size;
2372
// min-height: $bar_size;
2373
// background-color: transparent;
2374
// trough { background-color: transparent; }
2376
// progress { background-color: $primary_color; }
2378
}
2379
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2381
}
2382
/*************
2385
* Level Bar *
2386
*************/
2387
levelbar {
2388
block {
2389
min-width: $medium_size;
2390
min-height: $bar_size;
2391
}
2392
&.vertical block {
2394
min-width: $bar_size;
2395
min-height: $medium_size;
2396
}
2397
trough {
2399
padding: 2px;
2400
border-radius: 2px;
2401
@include entry(normal);
2403
&:disabled { @include entry(disabled); }
2405
}
2406
&.horizontal.discrete {
2408
block { margin: 0 1px; }
2409
trough { padding: 2px 1px; }
2411
}
2412
&.vertical.discrete {
2414
block { margin: 1px 0; }
2415
trough { padding: 1px 2px; }
2417
}
2418
block {
2420
&.low { background-color: $warning_color; }
2421
&.high,
2423
&:not(.empty) { background-color: $primary_color; }
2424
&.full { background-color: $success_color; }
2426
&.empty {
2428
background-color: $fill_color;
2429
color: $disabled_fg_color;
2430
}
2431
}
2432
}
2433
/****************
2436
* Print dialog *
2437
*****************/
2438
printdialog {
2439
paper {
2440
padding: 0;
2441
border: 1px solid $border_color;
2442
background-color: $base_color;
2443
color: $fg_color;
2444
}
2445
.dialog-action-box { margin: 12px; }
2447
}
2448
/**********
2451
* Frames *
2452
**********/
2453
frame > border,
2454
.frame {
2455
margin: 0;
2456
padding: 0;
2457
border: 1px solid $border_color;
2458
border-radius: 0;
2459
box-shadow: none;
2460
&.flat { border-style: none; }
2462
}
2463
frame.flat > border { @extend .frame.flat; } // for backporting
2465
actionbar > revealer > box {
2467
padding: $container_padding;
2468
border-top: 1px solid $border_color;
2469
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2471
}
2472
scrolledwindow {
2474
viewport.frame { // avoid double borders when viewport inside scrolled window
2475
border-style: none;
2476
}
2477
// This is used when content is touch-dragged past boundaries.
2479
// draws a box on top of the content, the size changes programmatically.
2480
@at-root overshoot {
2481
&.top { @include overshoot(top); }
2482
&.bottom { @include overshoot(bottom); }
2484
&.left { @include overshoot(left); }
2486
&.right { @include overshoot(right); }
2488
}
2489
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2491
@at-root undershoot {
2492
&.top { @include undershoot(top); }
2493
&.bottom { @include undershoot(bottom); }
2495
&.left { @include undershoot(left); }
2497
&.right { @include undershoot(right); }
2499
}
2500
@at-root junction { // the small square between two scrollbars
2502
border-style: solid none none solid;
2503
border-width: 1px;
2504
border-color: $border_color;
2505
background-color: $base_color;
2506
&:dir(rtl) { border-style: solid solid none none; }
2508
}
2509
}
2510
// vbox and hbox separators
2512
separator {
2513
min-width: 1px;
2514
min-height: 1px;
2515
background-color: $border_color;
2516
}
2517
/*********
2520
* Lists *
2521
*********/
2522
list {
2523
border-color: $border_color;
2524
background-color: $base_color;
2525
row { padding: 2px; }
2527
}
2528
// FIXME
2530
$row_transition: $longer_transition, background-color 0, color 0;
2531
row {
2533
&.activatable {
2534
transition: $row_transition,
2535
background-size $ripple_duration $deceleration_curve,
2536
background-image $ripple_duration * 2 $deceleration_curve;
2537
box-shadow: inset 0 0 0 9999px transparent;
2538
background-image: radial-gradient(circle farthest-corner at center,
2539
transparent 10%,
2540
transparent 0%);
2541
background-repeat: no-repeat;
2542
background-position: center;
2543
background-size: 1000% 1000%;
2544
&:hover {
2546
transition: $row_transition,
2547
box-shadow 0,
2548
background-size $ripple_duration $deceleration_curve,
2549
background-image $ripple_duration * 2 $deceleration_curve;
2550
box-shadow: inset 0 0 0 9999px $row_fill_color;
2551
}
2552
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2554
&:active {
2555
transition: $row_transition,
2556
background-size 0,
2557
background-image 0;
2558
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2559
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2560
background-image: radial-gradient(circle farthest-corner at center,
2561
$semi_fill_color 10%,
2562
transparent 0%);
2563
background-size: 0% 0%;
2564
}
2565
}
2566
&:selected { @extend %selected_items; }
2568
}
2569
/*********************
2572
* App Notifications *
2573
*********************/
2574
.app-notification {
2575
@extend %osd;
2576
@extend toolbar.osd;
2578
margin: 8px;
2580
button { @extend %button_basic.flat; }
2582
&.frame,
2584
border { border-style: none; }
2585
}
2586
/*************
2589
* Expanders *
2590
*************/
2591
expander {
2592
arrow {
2593
transition: all $shorter_duration $standard_curve;
2594
min-width: 16px;
2595
min-height: 16px;
2596
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2597
-gtk-icon-transform: rotate(-90deg);
2598
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2600
&:checked { -gtk-icon-transform: unset; }
2602
color: $secondary_fg_color;
2604
&:hover, &:active { color: $fg_color; }
2606
&:disabled { color: $disabled_secondary_fg_color; }
2608
&:selected {
2610
color: $secondary_inverse_fg_color;
2611
&:hover, &:active { color: $inverse_fg_color; }
2613
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2615
}
2616
}
2617
}
2618
/************
2621
* Calendar *
2622
***********/
2623
calendar {
2624
padding: 1px;
2625
border: 1px solid $border_color;
2626
color: $fg_color;
2627
&:disabled { color: $disabled_fg_color; }
2629
&:selected {
2631
@extend %selected_items;
2632
border-radius: 2px + 1px;
2634
}
2635
&.header {
2637
border-style: none none solid;
2638
border-radius: 0;
2639
}
2640
&.button { @extend %simple_flat_button; }
2642
&.highlight {
2644
color: gtkalpha(currentColor, $tertiary_opacity);
2645
font-weight: 500;
2646
}
2647
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2649
}
2650
/***********
2653
* Dialogs *
2654
***********/
2655
messagedialog { // Message Dialog styling
2656
&.background { background-color: $lighter_bg_color; }
2657
.titlebar {
2659
min-height: $small_size;
2660
border-style: none;
2661
box-shadow: inset 0 1px $highlight_color;
2662
background-color: $lighter_bg_color;
2663
color: $fg_color;
2664
&:backdrop { color: $secondary_fg_color; }
2666
}
2667
&.csd { // rounded bottom border styling for csd version
2669
&.background {
2670
// bigger radius for better antialiasing
2671
border-bottom-left-radius: 2px;
2672
border-bottom-right-radius: 2px;
2673
}
2674
.dialog-action-area button {
2676
padding: 8px 16px;
2677
border-top: 1px solid $border_color;
2678
border-radius: 0;
2679
@extend %simple_flat_button;
2681
&:first-child { border-bottom-left-radius: 2px; }
2683
&:last-child { border-bottom-right-radius: 2px; }
2685
}
2686
}
2687
}
2688
filechooser {
2690
.dialog-action-box { border-top: 1px solid $border_color; }
2691
#pathbarbox {
2693
border-bottom: 1px solid $border_color;
2694
background-color: $bg_color;
2695
}
2696
}
2697
filechooserbutton:drop(active) {
2699
box-shadow: none;
2700
}
2701
/***********
2704
* Sidebar *
2705
***********/
2706
.sidebar {
2707
border-style: none;
2708
background-color: $lighter_bg_color;
2709
@at-root %sidebar_left,
2711
&:dir(ltr),
2712
&.left,
2713
&.left:dir(rtl) {
2714
border-right: 1px solid $border_color;
2715
border-left-style: none;
2716
}
2717
@at-root %sidebar_right,
2719
&:dir(rtl),
2720
&.right {
2721
border-left: 1px solid $border_color;
2722
border-right-style: none;
2723
}
2724
list { background-color: transparent; }
2726
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2728
}
2729
stacksidebar {
2731
&.sidebar {
2732
&:dir(ltr),
2733
&.left,
2734
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2735
&:dir(rtl),
2737
&.right { list { @extend %sidebar_right; }}
2738
}
2739
row {
2741
padding: 10px 4px;
2742
> label {
2744
padding-left: 6px;
2745
padding-right: 6px;
2746
}
2747
&.needs-attention > label { @extend %needs_attention; }
2749
}
2750
}
2751
/****************
2754
* File chooser *
2755
****************/
2756
placessidebar {
2757
> viewport.frame { border-style: none; }
2758
list { padding: (4px - 3px) 0 4px; }
2760
row {
2762
// Needs overriding of the GtkListBoxRow padding
2763
min-height: 32px;
2764
margin: -1px 0; // Remove unknown margins
2765
padding: 0;
2766
// Using margins/padding directly in the SidebarRow
2768
// will make the animation of the new bookmark row jump
2769
> revealer { padding: 0 12px; }
2770
&:selected { color: $inverse_fg_color; }
2772
&:disabled { color: $disabled_fg_color; }
2774
image.sidebar-icon {
2776
opacity: $tertiary_opacity; // dim the device icons
2777
&:dir(ltr) { padding-right: 8px; }
2779
&:dir(rtl) { padding-left: 8px; }
2780
}
2781
label.sidebar-label {
2783
&:dir(ltr) { padding-right: 2px; }
2784
&:dir(rtl) { padding-left: 2px; }
2785
}
2786
@at-root button.sidebar-button {
2788
@extend %simple_flat_button;
2789
@extend %small_button;
2791
row:selected & {
2793
}
2794
}
2795
&.sidebar-placeholder-row {
2797
min-height: 2px;
2798
padding: 0 8px;
2799
background-image: image($accent_color);
2800
background-clip: content-box;
2801
}
2802
&.sidebar-new-bookmark-row { color: $accent_color; }
2804
&:drop(active):not(:disabled) {
2806
box-shadow: inset 0 0 0 2px $accent_color;
2807
&:selected {
2809
// background-color: $accent_color;
2810
// color: $inverse_fg_color;
2811
}
2812
}
2813
}
2814
}
2815
placesview {
2817
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2818
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2820
// this selects the "connect to server" label
2822
> actionbar > revealer > box > label {
2823
padding-left: 8px;
2824
padding-right: 8px;
2825
}
2826
}
2827
/*********
2830
* Paned *
2831
*********/
2832
paned {
2833
> separator {
2834
min-width: 1px;
2835
min-height: 1px;
2836
-gtk-icon-source: none; // defeats the ugly default handle decoration
2837
border-style: none; // just to be sure
2838
background-color: transparent;
2839
// workaround, using background istead of a border since the border will get rendered twice (?)
2840
background-image: image($border_color);
2841
background-size: 1px 1px;
2842
background-clip: content-box; // avoids borders image being rendered twice (?)
2843
&.wide {
2845
min-width: 6px;
2846
min-height: 6px;
2847
background-color: $bg_color;
2848
background-image: image($border_color), image($border_color);
2849
background-size: 1px 1px, 1px 1px;
2850
}
2851
}
2852
&.horizontal > separator {
2854
background-repeat: repeat-y;
2855
&:dir(ltr) {
2857
margin: 0 -8px 0 0;
2858
padding: 0 8px 0 0;
2859
background-position: left;
2860
}
2861
&:dir(rtl) {
2863
margin: 0 0 0 -8px;
2864
padding: 0 0 0 8px;
2865
background-position: right;
2866
}
2867
&.wide {
2869
margin: 0;
2870
padding: 0;
2871
background-repeat: repeat-y, repeat-y;
2872
background-position: left, right;
2873
}
2874
}
2875
&.vertical > separator {
2877
margin: 0 0 -8px 0;
2878
padding: 0 0 8px 0;
2879
background-repeat: repeat-x;
2880
background-position: top;
2881
&.wide {
2883
margin: 0;
2884
padding: 0;
2885
background-repeat: repeat-x, repeat-x;
2886
background-position: bottom, top;
2887
}
2888
}
2889
}
2890
/**************
2893
* GtkInfoBar *
2894
**************/
2895
infobar {
2896
border-style: none;
2897
&.info { background-color: $info_bg_color; }
2899
&.question { background-color: $question_bg_color; }
2901
&.warning { background-color: $warning_bg_color; }
2903
&.error { background-color: $error_bg_color; }
2905
&.info,
2907
&.question,
2908
&.warning,
2909
&.error {
2910
> label, & { color: $inverse_fg_color; }
2911
button { @extend %button_selected; }
2913
selection {}
2915
*:link { @extend %link_selected; }
2917
}
2918
}
2919
/************
2922
* Tooltips *
2923
************/
2924
tooltip {
2925
&.background {
2926
// background-color needs to be set this way otherwise it gets drawn twice
2927
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2928
box-shadow: inset 0 1px $highlight_color;
2929
background-color: scale-alpha($base_color, $higher_opacity);
2930
}
2931
// @extend %osd;
2933
// padding: 4px; /* not working */
2935
border-radius: 2px;
2936
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2937
&:not(.csd) {
2939
border: 1px solid $border_color;
2940
border-radius: 2px + 1px;
2941
background-clip: $extra_background_clip;
2942
}
2943
// FIXME: we need a border or tooltips vanish on black background.
2945
decoration { background-color: transparent; }
2946
label {
2948
// tooltip label has already 6px margins
2949
min-height: 32px - 6px * 2;
2950
padding: 0 8px - 6px;
2951
}
2952
* {
2954
// workaround for Eclipse.
2955
// do not include any declaration here.
2956
// padding: 0;
2957
// background-color: transparent;
2958
// color: inherit;
2959
}
2960
}
2961
/*****************
2964
* Color Chooser *
2965
*****************/
2966
colorswatch {
2967
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2968
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2969
// applied to the overlay box.
2970
// base color corners rounding
2972
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2973
// sports a bigger radius.
2974
// nth-child is needed by the custom color strip.
2975
&.top {
2977
border-top-left-radius: $material_radius + 0.5px;
2978
border-top-right-radius: $material_radius + 0.5px;
2979
overlay {
2981
border-top-left-radius: $material_radius;
2982
border-top-right-radius: $material_radius;
2983
}
2984
}
2985
&.bottom {
2987
border-bottom-left-radius: $material_radius + 0.5px;
2988
border-bottom-right-radius: $material_radius + 0.5px;
2989
overlay {
2991
border-bottom-left-radius: $material_radius;
2992
border-bottom-right-radius: $material_radius;
2993
}
2994
}
2995
&.left,
2997
&:first-child:not(.top) {
2998
border-top-left-radius: $material_radius + 0.5px;
2999
border-bottom-left-radius: $material_radius + 0.5px;
3000
overlay {
3002
border-top-left-radius: $material_radius;
3003
border-bottom-left-radius: $material_radius;
3004
}
3005
}
3006
&.right,
3008
&:last-child:not(.bottom) {
3009
border-top-right-radius: $material_radius + 0.5px;
3010
border-bottom-right-radius: $material_radius + 0.5px;
3011
overlay {
3013
border-top-right-radius: $material_radius;
3014
border-bottom-right-radius: $material_radius;
3015
}
3016
}
3017
&.dark overlay { color: $light_fg_color; }
3019
&.light overlay { color: $dark_fg_color; }
3021
&.dark { color: $light_fg_color; } // for focus ring
3023
&.light { color: $dark_fg_color; } // for focus ring
3025
&:drop(active) {
3027
box-shadow: none;
3028
&.light overlay {
3030
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3031
}
3032
&.dark overlay {
3034
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3035
}
3036
}
3037
overlay {
3039
transition: $shadow_transition;
3040
box-shadow: $shadow_1;
3041
&:hover { box-shadow: $shadow_2; }
3043
}
3044
&#add-color-button {
3046
border-radius: $material_radius $material_radius 0 0;
3047
color: $light_fg_color; // for focus ring
3048
&:only-child { border-radius: $material_radius; }
3050
overlay {
3052
background-image: linear-gradient(to right,
3053
$error_bg_color 25%,
3054
$warning_bg_color 25%, $warning_bg_color 50%,
3055
$info_bg_color 50%, $info_bg_color 75%,
3056
$question_bg_color 75%);
3057
color: $light_fg_color;
3058
}
3059
}
3060
&:disabled {
3062
opacity: $disabled_opacity;
3063
overlay { box-shadow: none; }
3065
}
3066
row:selected & {
3068
}
3069
&#editor-color-sample {
3071
border-radius: $material_radius + 0.5px;
3072
overlay { border-radius: $material_radius; }
3074
// overlay:hover { box-shadow: $shadow_1; }
3076
}
3077
}
3078
// colorscale popup
3080
colorchooser .popover.osd {
3081
transition: $shadow_transition;
3082
border-radius: 2px;
3083
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3084
background-color: $base_color;
3085
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3087
spinbutton:not(.vertical) { @extend %entry.flat; }
3089
}
3090
/********
3093
* Misc *
3094
********/
3095
// content view (grid/list)
3096
.content-view {
3097
background-color: $bg_color;
3098
// &:hover { -gtk-icon-effect: highlight; }
3100
rubberband, .rubberband { @extend rubberband; }
3102
}
3103
.scale-popup {
3105
.osd & { @extend %osd; }
3106
.osd & button.flat { // FIXME: quick hack, redo properly
3108
}
3109
button { // +/- buttons on GtkVolumeButton popup
3111
}
3112
}
3113
/**********************
3116
* Window Decorations *
3117
*********************/
3118
decoration {
3119
transition: $shadow_transition;
3120
border-radius: 2px 2px 0 0;
3121
box-shadow: $shadow_4, 0 16px 16px transparent;
3122
// FIXME rationalize shadows
3124
// this is used for the resize cursor area
3126
margin: 8px;
3127
&:backdrop {
3129
// the transparent shadow here is to enforce that the shadow extents don't
3130
// change when we go to backdrop, to prevent jumping windows.
3131
// The biggest shadow should be in the same order then in the active state
3132
// or the jumping will happen during the transition.
3133
box-shadow: $shadow_2, 0 16px 16px transparent;
3134
}
3135
.maximized &,
3137
.fullscreen &,
3138
.tiled & { border-radius: 0; }
3139
.popup & { box-shadow: none; }
3141
// server-side decorations as used by mutter
3143
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3144
.csd.popup & {
3146
border-radius: 2px;
3147
box-shadow: $shadow_2;
3148
}
3149
tooltip.csd & {
3151
border-radius: 2px;
3152
box-shadow: $shadow_2;
3153
}
3154
messagedialog.csd & {
3156
border-radius: 2px;
3157
// box-shadow: $shadow_4, 0 16px 16px transparent;
3158
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3160
}
3161
.solid-csd & {
3163
margin: 0;
3164
// padding: 4px;
3165
border-radius: 0;
3166
box-shadow: none;
3167
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3168
background-color: $titlebar_bg_color;
3169
}
3170
}
3171
// Window Close button
3173
button.titlebutton {
3174
// @extend %simple_flat_button;
3175
@extend %circular_button;
3177
.selection-mode & {
3179
}
3180
}
3181
// catch all extend :)
3184
%selected_items {
3186
background-color: $primary_color;
3187
@at-root %nobg_selected_items, & {
3189
color: $inverse_fg_color;
3190
&:disabled { color: $disabled_inverse_fg_color; }
3192
}
3193
}
3194
.monospace { font-family: monospace; }
3196
/**********************
3199
* Touch Copy & Paste *
3200
*********************/
3201
// touch selection handlebars for the Popover.osd above
3202
cursor-handle {
3203
border-radius: $circular_radius;
3204
background-color: $accent_color;
3205
background-image: none;
3206
&.top:dir(ltr), &.bottom:dir(rtl) {
3208
padding-left: 6px;
3209
border-top-right-radius: 0;
3210
}
3211
&.bottom:dir(ltr), &.top:dir(rtl) {
3213
padding-right: 6px;
3214
border-top-left-radius: 0;
3215
}
3216
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3218
-GtkWidget-text-handle-width: 24;
3219
-GtkWidget-text-handle-height: 30;
3220
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3222
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3223
url('#{$_url}@2.png'));
3224
}
3225
}
3226
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3228
// shortcut window keys
3230
.keycap {
3231
min-width: 28px - 8px * 2;
3232
min-height: 28px - 2px;
3233
margin-top: 2px;
3234
padding-bottom: 2px;
3235
padding-left: 8px;
3236
padding-right: 8px;
3237
border: solid 1px $border_color;
3239
border-radius: 2px + 1px;
3240
box-shadow: inset 0 -2px $border_color;
3241
background-color: $base_color;
3242
color: $fg_color;
3243
font-size: smaller;
3244
}
3245
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3247
transition: $longer_transition;
3248
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3249
caret-color: $accent_color;
3250
}
3251
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3253
stackswitcher button.circular,
3255
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3256
min-width: $medium_size;
3257
min-height: $medium_size;
3258
padding: 0;
3259
}
3260