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
decoration,
794
button.combo:checked { transition: none; } // workaround for menuitem selection
795
button.combo cellview {
797
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
798
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
799
}
800
#gtk-combobox-popup-menu {
802
padding: 2px 0;
803
menuitem {
805
min-height: $medium_size - 2px * 2;
806
padding: 0 8px;
807
}
808
}
809
&.linked {
811
button:nth-child(2) {
812
&:dir(ltr) { @extend %linked:last-child; }
813
&:dir(rtl) { @extend %linked:first-child; }
814
}
815
}
816
&:drop(active) { // FIXME: untested
818
box-shadow: none;
819
// button.combo { @extend %button_basic:drop(active); }
821
}
822
}
823
// the combo is a composite widget so the way we do button linking doesn't
825
// work, special case needed. See
826
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
827
.linked:not(.vertical) > combobox:not(:only-child) {
829
> box > button.combo { @extend %linked_middle; }
830
&:first-child > box > button.combo { @extend %linked_first; }
832
&:last-child > box > button.combo { @extend %linked_last; }
834
}
835
.linked.vertical > combobox:not(:only-child) {
837
> box > button.combo { @extend %linked_vertical_middle; }
838
&:first-child > box > button.combo { @extend %linked_vertical_first; }
840
&:last-child > box > button.combo { @extend %linked_vertical_last; }
842
}
843
%combo_flat {
845
border-radius: 0;
846
background-image: none;
847
font-weight: inherit;
848
@include entry(flat-normal);
850
&:hover { box-shadow: inset 0 -2px $fill_color; }
852
&:checked {
854
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
855
$primary_color 100%,
856
transparent 0%)
857
0 0 2 / 0 0 2px;
858
}
859
&:disabled { color: $disabled_fg_color; }
861
}
862
/************
865
* Toolbars *
866
************/
867
toolbar {
868
-GtkWidget-window-dragging: true;
869
padding: $container_padding / 2;
870
background-color: $bg_color;
871
button { @extend %button_basic.flat; }
873
// on OSD
875
.osd & { background-color: transparent; }
876
// stand-alone OSD toolbars
878
&.osd {
879
transition: $shadow_transition;
880
padding: $container_padding;
881
border-radius: 2px;
882
box-shadow: $shadow_2, inset 0 1px $highlight_color;
883
background-color: $base_color;
884
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
886
&.left,
888
&.right,
889
&.top,
890
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
891
}
892
// toolbar separators
894
&.horizontal separator { margin: $container_padding / 2; }
895
&.vertical separator { margin: $container_padding / 2; }
896
&:not(.inline-toolbar):not(.osd) {
898
scale,
899
entry,
900
spinbutton,
901
button { margin: $container_padding / 2; }
902
.linked entry,
904
.linked spinbutton,
905
.linked button {
906
&:not(:first-child) { margin-left: 0; }
907
&:not(:last-child) { margin-right: 0; }
908
}
909
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
911
}
912
}
913
// searchbar, location-bar & inline-toolbar
915
.inline-toolbar {
916
padding: $container_padding;
917
border-style: solid;
918
border-width: 0 1px 1px;
919
border-color: $border_color;
920
background-color: $alt_base_color;
921
}
922
searchbar,
924
.location-bar {
925
padding: $container_padding;
926
border-style: solid;
927
border-width: 0 0 1px;
928
border-color: $border_color;
929
background-color: $bg_color;
930
background-clip: border-box;
931
}
932
/***************
935
* Header bars *
936
***************/
937
%titlebar,
938
headerbar {
939
transition: background-color $shorter_duration $deceleration_curve;
940
min-height: $large_size;
941
padding: 0 $container_padding;
942
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
943
background-color: $titlebar_bg_color;
944
color: $titlebar_fg_color;
945
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
947
&:backdrop {
949
color: $secondary_titlebar_fg_color;
950
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
952
}
953
.title {
955
transition: $longer_transition;
956
padding: 0 12px;
957
font-weight: bold;
958
}
959
.subtitle {
961
transition: $longer_transition;
962
padding: 0 12px;
963
font-size: smaller;
964
@extend .dim-label;
966
}
967
button:not(.suggested-action):not(.destructive-action) {
969
@extend %button_basic.flat;
970
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
972
$titlebar_indicator_color 0%,
973
transparent 0%)
974
0 0 0 / 0 0 0px;
975
&:checked {
977
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
978
$titlebar_indicator_color 100%,
979
transparent 0%)
980
0 0 2 / 0 0 2px;
981
&, &:disabled { background-color: transparent; }
983
}
984
}
985
button.suggested-action, button.destructive-action {
987
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
988
}
989
&.selection-mode {
991
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
992
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
993
transition: background-color 0.00001s $longer_duration;
994
animation: header_ripple_effect $longer_duration $deceleration_curve;
995
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
996
background-color: $primary_color;
997
color: $inverse_fg_color;
998
&:backdrop {
1000
color: $secondary_inverse_fg_color;
1001
}
1002
.subtitle:link { @extend *:link:selected; }
1004
button:not(.suggested-action):not(.destructive-action) {
1006
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1007
currentColor 0%,
1008
transparent 0%)
1009
0 0 0 / 0 0 0px;
1010
color: currentColor;
1011
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1013
&:checked {
1015
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1016
currentColor 100%,
1017
transparent 0%)
1018
0 0 2 / 0 0 2px;
1019
color: currentColor;
1020
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1022
}
1023
}
1024
.selection-menu {
1026
padding-left: 16px;
1027
padding-right: 16px;
1028
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1030
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1032
}
1033
}
1034
.fullscreen &,
1036
.tiled &,
1037
.maximized & {
1038
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1039
box-shadow: $shadow_1;
1040
}
1041
&.default-decoration {
1043
min-height: $small_size;
1044
padding: $container_padding;
1045
box-shadow: inset 0 1px $titlebar_highlight_color;
1046
.fullscreen &,
1048
.tiled &,
1049
.maximized & { box-shadow: none; }
1050
button.titlebutton {
1052
min-height: $small_size;
1053
min-width: $small_size;
1054
margin: 0;
1055
padding: 0;
1056
}
1057
// workaround for non-animatable buttons
1059
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1060
}
1061
.solid-csd & {
1063
&:dir(rtl), &:dir(ltr) { // specificity bump
1064
// margin-left: -2px;
1065
// margin-right: -2px;
1066
// margin-top: -2px;
1067
// border-radius: 0;
1068
// box-shadow: inset 0 1px $titlebar_highlight_color;
1069
}
1070
}
1071
}
1072
headerbar {
1074
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1075
entry,
1076
spinbutton,
1077
// separator,
1078
button {
1079
margin-top: $container_padding;
1080
margin-bottom: $container_padding;
1081
}
1082
switch {
1084
margin-top: $container_padding * 2;
1085
margin-bottom: $container_padding * 2;
1086
}
1087
// reset button margins of the spinbutton
1089
spinbutton button {
1090
margin-top: 0;
1091
margin-bottom: 0;
1092
}
1093
}
1094
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1096
border-top-left-radius: 2px;
1097
border-top-right-radius: 2px;
1098
}
1099
headerbar { // headerbar border rounding
1101
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1102
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1103
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1105
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1107
&:first-child, &:last-child {
1108
border-top-left-radius: 2px;
1109
border-top-right-radius: 2px;
1110
}
1111
}
1112
}
1113
.titlebar:not(headerbar) {
1115
window.csd > & {
1116
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1117
padding: 0;
1118
background-color: transparent;
1119
background-image: none;
1120
border-style: none;
1121
box-shadow: none;
1122
}
1123
> separator {
1125
background-color: $titlebar_bg_color;
1126
background-image: image($border_color);
1127
}
1128
@extend %titlebar;
1130
}
1131
/************
1134
* Pathbars *
1135
************/
1136
%pathbar_button,
1137
.path-bar button {
1138
padding-left: ($medium_size - 24px) / 2;
1139
padding-right: ($medium_size - 24px) / 2;
1140
label:not(:only-child) {
1142
&:first-child { margin-left: 4px; }
1143
&:last-child { margin-right: 4px; }
1145
}
1146
&.slider-button {
1148
padding-left: (24px - 16px) / 2;
1149
padding-right: (24px - 16px) / 2;
1150
}
1151
:not(headerbar) & {
1153
@extend %flat_button;
1154
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1156
$primary_color 0%,
1157
transparent 0%)
1158
0 0 0 / 0 0 0px;
1159
border-radius: 2px;
1160
&:checked {
1162
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1163
$primary_color 100%,
1164
transparent 0%)
1165
0 0 2 / 0 0 2px;
1166
&, &:disabled { background-color: transparent; }
1168
}
1169
}
1170
}
1171
/**************
1174
* Tree Views *
1175
**************/
1176
treeview.view {
1177
@at-root * {
1178
-GtkTreeView-horizontal-separator: 4;
1179
-GtkTreeView-grid-line-width: 1;
1180
-GtkTreeView-grid-line-pattern: '';
1181
-GtkTreeView-tree-line-width: 1;
1182
-GtkTreeView-tree-line-pattern: '';
1183
-GtkTreeView-expander-size: 16;
1184
}
1185
border-left-color: $fill_color; // this is actually the tree lines color,
1187
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1188
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1190
&.separator {
1192
min-height: 1px + 2px * 2;
1193
color: $border_color;
1194
}
1195
&:drop(active) {
1197
border-style: solid none;
1198
border-width: 1px;
1199
border-color: $accent_color;
1200
&.after { border-top-style: none; }
1202
&.before { border-bottom-style: none; }
1204
}
1205
&.expander {
1207
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1208
-gtk-icon-transform: rotate(-90deg);
1209
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1211
&:checked { -gtk-icon-transform: unset; }
1213
color: $secondary_fg_color;
1215
&:hover, &:active { color: $fg_color; }
1217
&:disabled { color: $disabled_secondary_fg_color; }
1219
&:selected {
1221
color: $secondary_inverse_fg_color;
1222
&:hover, &:active { color: $inverse_fg_color; }
1224
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1226
}
1227
}
1228
&.progressbar { // progress bar in treeviews
1230
border-bottom: $bar_size solid $primary_color;
1231
box-shadow: none;
1232
background-color: transparent;
1233
&:selected { border-bottom-color: currentColor; }
1235
}
1236
&.trough { // progress bar trough in treeviews
1238
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1239
box-shadow: none;
1240
background-color: transparent;
1241
&:selected { border-bottom-color: $fill_color; }
1243
}
1244
header {
1246
button {
1247
@extend row.activatable;
1248
padding: 2px 6px;
1250
border-style: none solid solid none;
1251
border-width: 1px;
1252
border-color: $border_color;
1253
border-radius: 0;
1254
background-clip: border-box;
1255
&, &:hover, &:active { box-shadow: none; }
1257
&, &:disabled { background-color: $base_color; }
1259
&:last-child { border-right-style: none; }
1261
}
1262
}
1263
button.dnd,
1265
header.button.dnd { // for treeview-like derive widgets
1266
padding: 2px 6px;
1267
border-style: none solid solid;
1268
border-width: 1px;
1269
border-color: $border_color;
1270
border-radius: 0;
1271
box-shadow: none;
1272
background-color: $base_color;
1273
background-clip: border-box;
1274
color: $primary_color;
1275
}
1276
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1278
}
1279
/*********
1282
* Menus *
1283
*********/
1284
menubar,
1285
.menubar {
1286
-GtkWidget-window-dragging: true;
1287
padding: 0;
1288
// box-shadow: inset 0 -1px $border_color;
1289
background-color: $titlebar_bg_color;
1290
> menuitem {
1292
transition: $shorter_transition;
1293
min-height: 20px;
1294
padding: 4px 8px;
1295
color: $secondary_titlebar_fg_color;
1296
&:hover { // Seems like it :hover even with keyboard focus
1298
transition: none;
1299
background-color: $semi_fill_color;
1300
color: $titlebar_fg_color;
1301
}
1302
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1304
}
1305
}
1306
.csd.popup { border-radius: 2px; }
1308
menu,
1310
.menu,
1311
.context-menu {
1312
margin: 4px 0;
1313
padding: 4px 0;
1314
box-shadow: inset 0 1px $highlight_color;
1315
background-color: $base_color;
1316
border: 1px solid $border_color; // adds borders in a non composited env
1317
.csd & {
1319
border: none; // axes borders in a composited env
1320
border-radius: 2px;
1321
}
1322
menuitem {
1324
transition: $shorter_transition;
1325
min-height: 20px;
1326
min-width: 40px;
1327
padding: 4px 8px;
1328
font: initial;
1329
text-shadow: none;
1330
&:hover {
1332
transition: none;
1333
background-color: $semi_fill_color;
1334
}
1335
&:disabled { color: $disabled_fg_color; }
1337
// submenu indicators
1339
arrow {
1340
min-height: 16px;
1341
min-width: 16px;
1342
&:dir(ltr) {
1344
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1345
margin-left: 8px;
1346
}
1347
&:dir(rtl) {
1349
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1350
margin-right: 8px;
1351
}
1352
}
1353
// avoids labels color being overridden, see
1355
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1356
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1357
}
1358
// overflow arrows
1360
> arrow {
1361
min-height: 16px;
1362
min-width: 16px;
1363
padding: 4px;
1364
border-radius: 0;
1365
background-color: $base_color;
1366
color: $secondary_fg_color;
1367
&.top {
1369
margin-top: -4px;
1370
border-bottom: 1px solid $border_color;
1371
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1372
}
1373
&.bottom {
1375
margin-bottom: -4px;
1376
border-top: 1px solid $border_color;
1377
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1378
}
1379
&:hover {
1381
background-image: image($semi_fill_color);
1382
color: $fg_color;
1383
}
1384
&:disabled {
1386
border-color: transparent;
1387
background-color: transparent;
1388
color: transparent;
1389
// color: $disabled_secondary_fg_color;
1390
}
1391
}
1392
separator { margin: 4px 0; }
1394
}
1395
menuitem {
1397
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1398
check,
1400
radio {
1401
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1402
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1403
}
1404
}
1405
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1407
// Electron/Atom render all translucent colors in opaque colors.
1408
// It's a very critical issue for this theme and should be fixed by upstream...
1409
.popup:not(.csd) menu {
1410
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1411
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1412
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1413
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1414
menuitem {
1416
color: $opaque_fg_color;
1417
&:hover { background-color: $opaque_semi_fill_color; }
1419
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1421
}
1422
// TODO: not working this, where/how i can set the accelerators?
1424
accelerator { color: $opaque_tertiary_fg_color; }
1425
}
1426
/************
1429
* Popovers *
1430
************/
1431
popover.background {
1432
transition: $shadow_transition;
1433
padding: 2px;
1434
box-shadow: $shadow_2; // TODO: this should really have a highlight
1435
background-color: $lighter_bg_color;
1436
&:backdrop { box-shadow: $shadow_1; }
1438
&, .csd & {
1440
border-style: solid;
1441
border-width: 1px;
1442
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1443
border-radius: 2px + 1px;
1444
}
1445
> stack { margin: -4px; } // remove extra padding from menu style popovers
1447
> toolbar { margin: -2px; }
1449
> list,
1451
> .view,
1452
> toolbar {
1453
border-style: none;
1454
box-shadow: none;
1455
background-color: transparent;
1456
}
1457
&.touch-selection,
1459
&.magnifier,
1460
&.osd { @extend %osd; }
1461
// entry { @extend %entry.flat; }
1463
// button.combo { @extend %combo_flat; }
1465
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1467
&.menu button,
1469
button.model {
1470
@extend %simple_flat_button;
1471
min-height: 32px;
1473
padding: 0 8px;
1474
border-radius: 2px;
1475
&:checked { @extend %selected_items; }
1477
}
1478
separator { margin: 4px 0; }
1480
list separator { margin: 0; }
1482
}
1483
/*************
1485
* Notebooks *
1486
*************/
1487
notebook {
1488
> header {
1489
border-width: 1px;
1490
border-color: $border_color;
1491
background-color: $bg_color;
1492
background-clip: border-box;
1493
&.top {
1495
border-bottom-style: solid;
1496
> tabs {
1497
margin-bottom: -1px;
1498
> tab {
1499
&:hover { box-shadow: inset 0 -2px $fill_color; }
1501
&:checked { box-shadow: inset 0 -2px $primary_color; }
1503
}
1504
}
1505
}
1506
&.bottom {
1508
border-top-style: solid;
1509
> tabs {
1510
margin-top: -1px;
1511
> tab {
1512
&:hover { box-shadow: inset 0 2px $fill_color; }
1514
&:checked { box-shadow: inset 0 2px $primary_color; }
1516
}
1517
}
1518
}
1519
&.left {
1521
border-right-style: solid;
1522
> tabs {
1523
margin-right: -1px;
1524
> tab {
1525
&:hover { box-shadow: inset -2px 0 $fill_color; }
1527
&:checked { box-shadow: inset -2px 0 $primary_color; }
1529
}
1530
}
1531
}
1532
&.right {
1534
border-left-style: solid;
1535
> tabs {
1536
margin-left: -1px;
1537
> tab {
1538
&:hover { box-shadow: inset 2px 0 $fill_color; }
1540
&:checked { box-shadow: inset 2px 0 $primary_color; }
1542
}
1543
}
1544
}
1545
&.top > tabs > arrow {
1547
@extend %notebook_vert_arrows;
1548
border-top-style: none;
1550
}
1551
&.bottom > tabs > arrow {
1553
@extend %notebook_vert_arrows;
1554
border-bottom-style: none;
1556
}
1557
@at-root %notebook_vert_arrows {
1559
padding-left: 4px;
1560
padding-right: 4px;
1561
&.down {
1563
margin-left: -8px;
1564
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1565
}
1566
&.up {
1568
margin-right: -8px;
1569
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1570
}
1571
}
1572
&.left > tabs > arrow {
1574
@extend %notebook_horz_arrows;
1575
border-left-style: none;
1577
}
1578
&.right > tabs > arrow {
1580
@extend %notebook_horz_arrows;
1581
border-right-style: none;
1583
}
1584
@at-root %notebook_horz_arrows {
1586
padding-top: 4px;
1587
padding-bottom: 4px;
1588
&.down {
1590
margin-top: -8px;
1591
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1592
}
1593
&.up {
1595
margin-bottom: -8px;
1596
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1597
}
1598
}
1599
> tabs > arrow {
1601
@extend %simple_flat_button;
1602
min-height: 16px;
1604
min-width: 16px;
1605
border-radius: 0;
1606
}
1607
tab {
1609
transition: $longer_transition,
1610
background-size 0,
1611
background-image 0;
1612
min-height: $small_size;
1613
min-width: $small_size;
1614
padding: $container_padding 12px;
1615
outline-offset: -6px;
1617
border-width: 1px; // for reorderable tabs
1619
border-color: transparent; //
1620
background-image: radial-gradient(circle farthest-corner at center,
1622
$primary_color 10%,
1623
transparent 0%);
1624
background-repeat: no-repeat;
1625
background-position: center;
1626
background-size: 0% 0%;
1627
color: $secondary_fg_color;
1629
font-weight: 500;
1630
&:hover {
1632
color: $fg_color;
1633
&.reorderable-page {
1635
border-color: $border_color;
1636
background-color: $alt_base_color;
1637
}
1638
}
1639
&:disabled { color: $disabled_secondary_fg_color; }
1641
&:checked {
1643
transition: $longer_transition,
1644
background-size $longer_duration $deceleration_curve,
1645
background-image $longer_duration + $ripple_duration $deceleration_curve;
1646
background-image: radial-gradient(circle farthest-corner at center,
1647
transparent 10%,
1648
transparent 0%);
1649
background-size: 1000% 1000%;
1650
color: $fg_color;
1651
&:disabled { color: $disabled_fg_color; }
1653
&.reorderable-page {
1655
border-color: $border_color;
1656
background-color: $base_color;
1657
}
1658
}
1659
// colors the button like the label, overridden otherwise
1661
button.flat {
1662
@extend %small_button;
1663
&:last-child {
1665
margin-left: $container_padding;
1666
margin-right: $container_padding - 12px;
1667
}
1668
&:first-child {
1670
margin-left: $container_padding - 12px;
1671
margin-right: $container_padding;
1672
}
1673
}
1674
}
1675
&.top,
1677
&.bottom {
1678
tabs {
1679
padding-left: 8px;
1680
padding-right: 8px;
1681
&:not(:only-child) {
1683
&:first-child { margin-left: 0; }
1684
&:last-child { margin-right: 0; }
1685
}
1686
tab {
1688
&.reorderable-page {
1689
margin: 0 -1px;
1690
border-style: none solid;
1691
}
1692
}
1693
}
1694
}
1695
&.left,
1697
&.right {
1698
tabs {
1699
padding-top: 8px;
1700
padding-bottom: 8px;
1701
&:not(:only-child) {
1703
&:first-child { margin-top: 0; }
1704
&:last-child { margin-bottom: 0; }
1705
}
1706
tab {
1708
&.reorderable-page {
1709
margin: -1px 0;
1710
border-style: solid none;
1711
}
1712
}
1713
}
1714
}
1715
}
1716
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1718
background-color: $base_color;
1719
entry:not(.search),
1721
spinbutton:not(.vertical) { @extend %entry.flat; }
1722
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1724
button.combo { @extend %combo_flat; }
1726
}
1727
}
1728
/**************
1731
* Scrollbars *
1732
**************/
1733
scrollbar {
1734
$_slider_min_length: 24px;
1735
// disable steppers
1737
@at-root * {
1738
-GtkScrollbar-has-backward-stepper: false;
1739
-GtkScrollbar-has-forward-stepper: false;
1740
}
1741
transition: $longer_transition;
1743
background-color: $base_color;
1744
background-clip: $extra_background_clip;
1745
// scrollbar border
1747
&.top { border-bottom: 1px solid $border_color; }
1748
&.bottom { border-top: 1px solid $border_color; }
1749
&.left { border-right: 1px solid $border_color; }
1750
&.right { border-left: 1px solid $border_color; }
1751
// slider
1753
slider {
1754
transition: $shorter_transition, margin 0, border-width 0;
1755
min-width: 8px;
1756
min-height: 8px;
1757
border: 4px solid transparent;
1758
border-radius: $circular_radius;
1759
background-clip: padding-box;
1760
background-color: $tertiary_fg_color;
1761
&:hover { background-color: $secondary_fg_color; }
1763
&:active { background-color: $fg_color; }
1765
&:disabled { background-color: $disabled_tertiary_fg_color; }
1767
}
1768
&.fine-tune {
1770
slider {
1771
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1772
min-width: 4px;
1773
min-height: 4px;
1774
}
1775
&.horizontal slider { margin: 2px 0; }
1777
&.vertical slider { margin: 0 2px; }
1779
}
1780
&.overlay-indicator {
1782
&:not(.dragging):not(.hovering) {
1783
border-color: transparent;
1784
background-color: transparent;
1785
slider {
1787
min-width: 4px;
1788
min-height: 4px;
1789
margin: 4px - 1px;
1790
border: 1px solid scale-alpha($base_color, $lower_opacity);
1791
}
1792
button {
1794
min-width: 4px;
1795
min-height: 4px;
1796
margin: 4px - 1px;
1797
border: 1px solid scale-alpha($base_color, $lower_opacity);
1798
border-radius: $circular_radius;
1799
background-color: $tertiary_fg_color;
1800
background-clip: padding-box;
1801
-gtk-icon-source: none;
1802
&:disabled { background-color: $disabled_tertiary_fg_color; }
1804
}
1805
&.horizontal {
1807
slider { min-width: $_slider_min_length; }
1808
button { min-width: 8px; }
1810
}
1811
&.vertical {
1813
slider { min-height: $_slider_min_length; }
1814
button { min-height: 8px; }
1816
}
1817
}
1818
&.dragging,
1820
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1821
}
1822
&.horizontal slider { min-width: $_slider_min_length; }
1824
&.vertical slider { min-height: $_slider_min_length; }
1826
// button styling
1828
button {
1829
@extend %simple_flat_button;
1830
min-width: 16px;
1832
min-height: 16px;
1833
padding: 0;
1834
border-radius: 0;
1835
}
1836
// button icons
1838
&.vertical {
1839
button {
1840
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1841
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1843
}
1844
}
1845
&.horizontal {
1847
button {
1848
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1849
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1851
}
1852
}
1853
}
1854
/**********
1857
* Switch *
1858
**********/
1859
switch {
1860
transition: $longer_transition;
1861
margin: $container_padding 0;
1862
border: 4px solid transparent;
1863
border-radius: $circular_radius;
1864
background-color: $fill_color;
1865
background-clip: padding-box;
1866
font-size: 0;
1867
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1869
&:checked {
1871
background-color: scale-alpha($accent_color, 0.5);
1872
&:disabled {
1874
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1875
color: $disabled_fg_color;
1876
}
1877
}
1878
slider {
1880
@include entry(normal);
1881
transition: $longer_transition, $shadow_transition, margin 0;
1883
min-width: $small_size;
1884
min-height: $small_size;
1885
margin: -4px 0 -4px -4px;
1886
border-radius: $circular_radius;
1887
-gtk-outline-radius: $circular_radius;
1888
}
1889
&:hover slider { @include entry(focus); }
1891
&:checked slider {
1893
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1894
animation: needs_attention $longer_duration $deceleration_curve;
1895
margin: -4px -4px -4px 0;
1896
background-color: $accent_color;
1897
color: $inverse_fg_color;
1898
}
1899
&:disabled slider { @include entry(disabled); }
1901
&:checked:disabled slider { animation: none; }
1903
row:selected & {
1905
}
1906
}
1907
/*************************
1910
* Check and Radio items *
1911
*************************/
1912
// draw regular check and radio items using our PNG assets
1913
// all assets are rendered from assets.svg. never add pngs directly
1914
// selection-mode
1916
.view.content-view.check:not(list),
1917
.content-view .tile check:not(list) {
1918
min-height: 40px;
1919
min-width: 40px;
1920
margin: 0;
1921
padding: 0;
1922
box-shadow: none;
1923
background-color: transparent;
1924
background-image: none;
1925
-gtk-icon-shadow: $shadow_1;
1926
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1928
@each $s, $as in ('', '-unchecked'),
1930
(':checked', '-checked') {
1931
&#{$s} {
1932
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1933
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1934
}
1935
}
1936
}
1937
checkbutton.text-button,
1939
radiobutton.text-button {
1940
// this is for a nice focus on check and radios text
1941
padding: 2px;
1942
outline-offset: 0;
1943
label:not(:only-child) { margin: 0 4px; }
1945
}
1946
check,
1948
radio {
1949
min-height: 24px;
1950
min-width: 24px;
1951
margin: -($large_size - 24px) / 2;
1952
padding: ($large_size - 24px) / 2;
1953
@extend %simple_flat_button;
1955
@extend %circular_button;
1957
&:checked, &:indeterminate {
1959
color: $accent_color;
1960
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1962
}
1963
// &:only-child { margin: -12px; }
1965
row &:not(:checked):not(:indeterminate) {
1967
color: gtkalpha(currentColor, $secondary_opacity);
1968
&:hover, &:active { color: currentColor; }
1970
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1972
}
1973
menu menuitem & {
1975
transition: none;
1976
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1977
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1979
&, &:hover, &:disabled {
1981
box-shadow: none;
1982
// color: inherit;
1983
}
1984
}
1985
}
1986
%check,
1988
check {
1989
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
1990
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
1991
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
1993
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
1994
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
1996
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
1997
}
1998
%radio,
2000
radio {
2001
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2002
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2003
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2005
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2006
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2008
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2009
border-image-slice: $large_size / 2px;
2011
border-image-width: $large_size / 2;
2012
$radio_indicator: 10px / $large_size / 2;
2014
& {
2016
border-image-source: -gtk-gradient(radial,
2017
center center, 0,
2018
center center, 0.001,
2019
to($accent_color),
2020
to(transparent));
2021
}
2022
&:checked:not(:indeterminate) {
2024
border-image-source: -gtk-gradient(radial,
2025
center center, 0,
2026
center center, $radio_indicator,
2027
to($accent_color),
2028
to(transparent));
2029
}
2030
&:checked:not(:indeterminate):disabled {
2032
border-image-source: -gtk-gradient(radial,
2033
center center, 0,
2034
center center, $radio_indicator,
2035
to(scale-alpha($accent_color, $disabled_opacity)),
2036
to(transparent));
2037
}
2038
}
2039
// ANIMATION:
2041
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2042
// the transformation is set on the active state and it get reset on the checked state.
2043
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2044
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2046
check:not(:checked):indeterminate:active,
2048
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2049
check:not(:checked),
2051
radio:not(:checked) {
2052
& {
2053
transition: $longer_transition,
2054
background-size $ripple_duration $deceleration_curve,
2055
background-image $ripple_duration * 2 $deceleration_curve,
2056
-gtk-icon-transform 0;
2057
}
2058
&:active {
2060
transition: $longer_transition,
2061
background-size 0,
2062
background-image 0,
2063
-gtk-icon-transform 0;
2064
}
2065
menu menuitem & { transition: none; }
2067
}
2068
treeview.view check,
2070
treeview.view radio {
2071
padding: 0;
2072
&:hover {
2074
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2075
&:disabled { box-shadow: none; }
2077
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2079
}
2080
& {
2082
color: $secondary_fg_color;
2083
&:hover, &:active { color: $fg_color; }
2085
&:disabled { color: $disabled_secondary_fg_color; }
2087
&:checked, &:indeterminate { color: $accent_color; }
2089
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2091
}
2092
&:selected {
2094
color: $secondary_inverse_fg_color;
2095
&:hover, &:active { color: $inverse_fg_color; }
2097
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2099
&:checked, &:indeterminate { color: $accent_color; }
2101
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2103
}
2104
}
2105
treeview.view radio:checked {
2107
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2108
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2109
border-image: none;
2110
}
2111
/************
2114
* GtkScale *
2115
************/
2116
scale {
2117
// sizing
2118
$_marks_lenght: 8px;
2119
$_marks_distance: 8px;
2120
$slider_size: 24px;
2122
$marks_slider_size: 30px;
2123
$slider_margin: -($slider_size - $bar_size) / 2;
2125
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2126
$color_slider_margin: -($slider_size) / 2;
2128
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2129
min-height: $medium_size - $slider_size;
2131
min-width: $medium_size - $slider_size;
2132
padding: ($slider_size / 2);
2133
* { transition: $longer_transition; }
2135
// the slider is inside the trough, so to have make it bigger there's a negative margin
2137
slider {
2138
min-height: $slider_size;
2139
min-width: $slider_size;
2140
margin: $slider_margin;
2141
}
2142
// the backing bit
2144
trough {
2145
outline-offset: 2px;
2146
background-color: $fill_color;
2147
&:disabled { color: $disabled_fg_color; }
2149
}
2150
// the colored part of the backing bit
2152
highlight {
2153
background-color: $accent_color;
2154
&:disabled { background-color: transparent; }
2156
}
2157
// this is another differently styled part of the backing bit, the most relevant use case is for example
2159
// in media player to indicate how much video stream as been cached
2160
fill {
2161
background-color: $fill_color;
2162
&:disabled { background-color: transparent; }
2164
}
2165
slider {
2167
transition: all $shorter_duration $standard_curve;
2168
// border-radius: 100%;
2169
// background-color: $accent_color;
2170
background-repeat: no-repeat;
2171
background-position: center;
2172
@each $s, $as in ('', ''),
2174
(':disabled', '-disabled') {
2175
&#{$s} {
2176
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2177
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2179
}
2180
}
2181
background-size: calc(100% - 8px);
2183
&:hover { background-size: calc(100% - 4px); }
2185
&:active { background-size: calc(100% - 0px); }
2187
}
2188
// click-and-hold the slider to activate
2190
&.fine-tune {
2191
// to make the slider shrink in fine-tune mode
2192
slider { background-size: calc(100% - 12px); }
2193
}
2194
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2196
marks {
2198
color: $fill_color;
2199
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2201
(bottom, bottom, top),
2202
(top, left, right),
2203
(bottom, right, left) {
2204
&.#{$marks_class} {
2205
margin-#{$marks_margin}: $_marks_distance;
2206
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2207
}
2208
}
2209
}
2210
&.horizontal {
2212
indicator {
2213
min-height: $_marks_lenght;
2214
min-width: 1px;
2215
}
2216
}
2217
&.vertical {
2219
indicator {
2220
min-height: 1px;
2221
min-width: $_marks_lenght;
2222
}
2223
}
2224
// *WARNING* scale with marks madness following
2226
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2228
('vertical', 'vert') {
2229
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2230
('marks-after', 'marks-after:not(.marks-before)') {
2231
&.#{$dir_class}.#{$marks_class} {
2232
slider {
2233
@each $state, $state_infix in ('', ''),
2234
(':disabled', '-disabled') {
2235
&#{$state} {
2236
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2237
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2239
}
2240
}
2241
@if $dir_class == 'horizontal' {
2243
min-height: $marks_slider_size;
2244
min-width: $slider_size;
2245
@if $marks_infix == 'marks-before' {
2247
margin-top: $marks_slider_margin;
2248
background-position: center calc(100% - 4px);
2250
&:hover { background-position: center calc(100% - 2px); }
2252
&:active { background-position: center calc(100% - 0px); }
2254
}
2255
@if $marks_infix == 'marks-after' {
2257
margin-bottom: $marks_slider_margin;
2258
background-position: center calc(4px);
2260
&:hover { background-position: center calc(2px); }
2262
&:active { background-position: center calc(0px); }
2264
}
2265
}
2266
@if $dir_class == 'vertical' {
2268
min-height: $slider_size;
2269
min-width: $marks_slider_size;
2270
@if $marks_infix == 'marks-before' {
2272
margin-left: $marks_slider_margin;
2273
background-position: calc(4px) center;
2275
&:hover { background-position: calc(2px) center; }
2277
&:active { background-position: calc(0px) center; }
2279
}
2280
@if $marks_infix == 'marks-after' {
2282
margin-right: $marks_slider_margin;
2283
background-position: calc(100% - 4px) center;
2285
&:hover { background-position: calc(100% - 2px) center; }
2287
&:active { background-position: calc(100% - 0px) center; }
2289
}
2290
}
2291
}
2292
&.fine-tune slider {
2294
@if $dir_class == 'horizontal' {
2295
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2296
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2298
}
2299
@if $dir_class == 'vertical' {
2301
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2302
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2304
}
2305
}
2306
}
2307
}
2308
}
2309
&.color {
2311
min-height: 0;
2312
min-width: 0;
2313
&.horizontal {
2315
padding: 0 0 12px 0;
2316
slider {
2318
&:dir(ltr), &:dir(rtl) { // specificity bump
2319
margin-bottom: $color_slider_margin;
2320
margin-top: $color_marks_slider_margin;
2321
}
2322
}
2323
}
2324
&.vertical {
2326
&:dir(ltr) {
2327
padding: 0 0 0 12px;
2328
slider {
2330
margin-left: $color_slider_margin;
2331
margin-right: $color_marks_slider_margin;
2332
}
2333
}
2334
&:dir(rtl) {
2336
padding: 0 12px 0 0;
2337
slider {
2339
margin-right: $color_slider_margin;
2340
margin-left: $color_marks_slider_margin;
2341
}
2342
}
2343
}
2344
}
2345
}
2346
/*****************
2349
* Progress bars *
2350
*****************/
2351
progressbar {
2352
// sizing
2353
&.horizontal {
2354
trough,
2355
progress { min-height: $bar_size; }
2356
}
2357
&.vertical {
2359
trough,
2360
progress { min-width: $bar_size; }
2361
}
2362
// FIXME: insensitive state missing and some other state should be set probably
2364
color: $tertiary_fg_color;
2365
font-size: smaller;
2366
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2368
progress { background-color: $primary_color; }
2370
&.osd { // progressbar.osd used for epiphany page loading progress
2372
// min-width: $bar_size;
2373
// min-height: $bar_size;
2374
// background-color: transparent;
2375
// trough { background-color: transparent; }
2377
// progress { background-color: $primary_color; }
2379
}
2380
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2382
}
2383
/*************
2386
* Level Bar *
2387
*************/
2388
levelbar {
2389
block {
2390
min-width: $medium_size;
2391
min-height: $bar_size;
2392
}
2393
&.vertical block {
2395
min-width: $bar_size;
2396
min-height: $medium_size;
2397
}
2398
trough {
2400
padding: 2px;
2401
border-radius: 2px;
2402
@include entry(normal);
2404
&:disabled { @include entry(disabled); }
2406
}
2407
&.horizontal.discrete {
2409
block { margin: 0 1px; }
2410
trough { padding: 2px 1px; }
2412
}
2413
&.vertical.discrete {
2415
block { margin: 1px 0; }
2416
trough { padding: 1px 2px; }
2418
}
2419
block {
2421
&.low { background-color: $warning_color; }
2422
&.high,
2424
&:not(.empty) { background-color: $primary_color; }
2425
&.full { background-color: $success_color; }
2427
&.empty {
2429
background-color: $fill_color;
2430
color: $disabled_fg_color;
2431
}
2432
}
2433
}
2434
/****************
2437
* Print dialog *
2438
*****************/
2439
printdialog {
2440
paper {
2441
padding: 0;
2442
border: 1px solid $border_color;
2443
background-color: $base_color;
2444
color: $fg_color;
2445
}
2446
.dialog-action-box { margin: 12px; }
2448
}
2449
/**********
2452
* Frames *
2453
**********/
2454
frame > border,
2455
.frame {
2456
margin: 0;
2457
padding: 0;
2458
border: 1px solid $border_color;
2459
border-radius: 0;
2460
box-shadow: none;
2461
&.flat { border-style: none; }
2463
}
2464
frame.flat > border { @extend .frame.flat; } // for backporting
2466
actionbar > revealer > box {
2468
padding: $container_padding;
2469
border-top: 1px solid $border_color;
2470
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2472
}
2473
scrolledwindow {
2475
viewport.frame { // avoid double borders when viewport inside scrolled window
2476
border-style: none;
2477
}
2478
// This is used when content is touch-dragged past boundaries.
2480
// draws a box on top of the content, the size changes programmatically.
2481
@at-root overshoot {
2482
&.top { @include overshoot(top); }
2483
&.bottom { @include overshoot(bottom); }
2485
&.left { @include overshoot(left); }
2487
&.right { @include overshoot(right); }
2489
}
2490
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2492
@at-root undershoot {
2493
&.top { @include undershoot(top); }
2494
&.bottom { @include undershoot(bottom); }
2496
&.left { @include undershoot(left); }
2498
&.right { @include undershoot(right); }
2500
}
2501
@at-root junction { // the small square between two scrollbars
2503
border-style: solid none none solid;
2504
border-width: 1px;
2505
border-color: $border_color;
2506
background-color: $base_color;
2507
&:dir(rtl) { border-style: solid solid none none; }
2509
}
2510
}
2511
// vbox and hbox separators
2513
separator {
2514
min-width: 1px;
2515
min-height: 1px;
2516
background-color: $border_color;
2517
}
2518
/*********
2521
* Lists *
2522
*********/
2523
list {
2524
border-color: $border_color;
2525
background-color: $base_color;
2526
row { padding: 2px; }
2528
}
2529
// FIXME
2531
$row_transition: $longer_transition, background-color 0, color 0;
2532
row {
2534
&.activatable {
2535
transition: $row_transition,
2536
background-size $ripple_duration $deceleration_curve,
2537
background-image $ripple_duration * 2 $deceleration_curve;
2538
box-shadow: inset 0 0 0 9999px transparent;
2539
background-image: radial-gradient(circle farthest-corner at center,
2540
transparent 10%,
2541
transparent 0%);
2542
background-repeat: no-repeat;
2543
background-position: center;
2544
background-size: 1000% 1000%;
2545
&:hover {
2547
transition: $row_transition,
2548
box-shadow 0,
2549
background-size $ripple_duration $deceleration_curve,
2550
background-image $ripple_duration * 2 $deceleration_curve;
2551
box-shadow: inset 0 0 0 9999px $row_fill_color;
2552
}
2553
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2555
&:active {
2556
transition: $row_transition,
2557
background-size 0,
2558
background-image 0;
2559
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2560
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2561
background-image: radial-gradient(circle farthest-corner at center,
2562
$semi_fill_color 10%,
2563
transparent 0%);
2564
background-size: 0% 0%;
2565
}
2566
}
2567
&:selected { @extend %selected_items; }
2569
}
2570
/*********************
2573
* App Notifications *
2574
*********************/
2575
.app-notification {
2576
@extend %osd;
2577
@extend toolbar.osd;
2579
margin: 8px;
2581
button { @extend %button_basic.flat; }
2583
&.frame,
2585
border { border-style: none; }
2586
}
2587
/*************
2590
* Expanders *
2591
*************/
2592
expander {
2593
arrow {
2594
transition: all $shorter_duration $standard_curve;
2595
min-width: 16px;
2596
min-height: 16px;
2597
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2598
-gtk-icon-transform: rotate(-90deg);
2599
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2601
&:checked { -gtk-icon-transform: unset; }
2603
color: $secondary_fg_color;
2605
&:hover, &:active { color: $fg_color; }
2607
&:disabled { color: $disabled_secondary_fg_color; }
2609
&:selected {
2611
color: $secondary_inverse_fg_color;
2612
&:hover, &:active { color: $inverse_fg_color; }
2614
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2616
}
2617
}
2618
}
2619
/************
2622
* Calendar *
2623
***********/
2624
calendar {
2625
padding: 1px;
2626
border: 1px solid $border_color;
2627
color: $fg_color;
2628
&:disabled { color: $disabled_fg_color; }
2630
&:selected {
2632
@extend %selected_items;
2633
border-radius: 2px + 1px;
2635
}
2636
&.header {
2638
border-style: none none solid;
2639
border-radius: 0;
2640
}
2641
&.button { @extend %simple_flat_button; }
2643
&.highlight {
2645
color: gtkalpha(currentColor, $tertiary_opacity);
2646
font-weight: 500;
2647
}
2648
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2650
}
2651
/***********
2654
* Dialogs *
2655
***********/
2656
messagedialog { // Message Dialog styling
2657
&.background { background-color: $lighter_bg_color; }
2658
.titlebar {
2660
min-height: $small_size;
2661
border-style: none;
2662
box-shadow: inset 0 1px $highlight_color;
2663
background-color: $lighter_bg_color;
2664
color: $fg_color;
2665
&:backdrop { color: $secondary_fg_color; }
2667
}
2668
&.csd { // rounded bottom border styling for csd version
2670
&.background {
2671
// bigger radius for better antialiasing
2672
border-bottom-left-radius: 2px;
2673
border-bottom-right-radius: 2px;
2674
}
2675
.dialog-action-area button {
2677
padding: 8px 16px;
2678
border-top: 1px solid $border_color;
2679
border-radius: 0;
2680
@extend %simple_flat_button;
2682
&:first-child { border-bottom-left-radius: 2px; }
2684
&:last-child { border-bottom-right-radius: 2px; }
2686
}
2687
}
2688
}
2689
filechooser {
2691
.dialog-action-box { border-top: 1px solid $border_color; }
2692
#pathbarbox {
2694
border-bottom: 1px solid $border_color;
2695
background-color: $bg_color;
2696
}
2697
}
2698
filechooserbutton:drop(active) {
2700
box-shadow: none;
2701
}
2702
/***********
2705
* Sidebar *
2706
***********/
2707
.sidebar {
2708
border-style: none;
2709
background-color: $lighter_bg_color;
2710
@at-root %sidebar_left,
2712
&:dir(ltr),
2713
&.left,
2714
&.left:dir(rtl) {
2715
border-right: 1px solid $border_color;
2716
border-left-style: none;
2717
}
2718
@at-root %sidebar_right,
2720
&:dir(rtl),
2721
&.right {
2722
border-left: 1px solid $border_color;
2723
border-right-style: none;
2724
}
2725
list { background-color: transparent; }
2727
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2729
}
2730
stacksidebar {
2732
&.sidebar {
2733
&:dir(ltr),
2734
&.left,
2735
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2736
&:dir(rtl),
2738
&.right { list { @extend %sidebar_right; }}
2739
}
2740
row {
2742
padding: 10px 4px;
2743
> label {
2745
padding-left: 6px;
2746
padding-right: 6px;
2747
}
2748
&.needs-attention > label { @extend %needs_attention; }
2750
}
2751
}
2752
/****************
2755
* File chooser *
2756
****************/
2757
placessidebar {
2758
> viewport.frame { border-style: none; }
2759
list { padding: (4px - 3px) 0 4px; }
2761
row {
2763
// Needs overriding of the GtkListBoxRow padding
2764
min-height: 32px;
2765
margin: -1px 0; // Remove unknown margins
2766
padding: 0;
2767
// Using margins/padding directly in the SidebarRow
2769
// will make the animation of the new bookmark row jump
2770
> revealer { padding: 0 12px; }
2771
&:selected { color: $inverse_fg_color; }
2773
&:disabled { color: $disabled_fg_color; }
2775
image.sidebar-icon {
2777
opacity: $tertiary_opacity; // dim the device icons
2778
&:dir(ltr) { padding-right: 8px; }
2780
&:dir(rtl) { padding-left: 8px; }
2781
}
2782
label.sidebar-label {
2784
&:dir(ltr) { padding-right: 2px; }
2785
&:dir(rtl) { padding-left: 2px; }
2786
}
2787
@at-root button.sidebar-button {
2789
@extend %simple_flat_button;
2790
@extend %small_button;
2792
row:selected & {
2794
}
2795
}
2796
&.sidebar-placeholder-row {
2798
min-height: 2px;
2799
padding: 0 8px;
2800
background-image: image($accent_color);
2801
background-clip: content-box;
2802
}
2803
&.sidebar-new-bookmark-row { color: $accent_color; }
2805
&:drop(active):not(:disabled) {
2807
box-shadow: inset 0 0 0 2px $accent_color;
2808
&:selected {
2810
// background-color: $accent_color;
2811
// color: $inverse_fg_color;
2812
}
2813
}
2814
}
2815
}
2816
placesview {
2818
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2819
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2821
// this selects the "connect to server" label
2823
> actionbar > revealer > box > label {
2824
padding-left: 8px;
2825
padding-right: 8px;
2826
}
2827
}
2828
/*********
2831
* Paned *
2832
*********/
2833
paned {
2834
> separator {
2835
min-width: 1px;
2836
min-height: 1px;
2837
-gtk-icon-source: none; // defeats the ugly default handle decoration
2838
border-style: none; // just to be sure
2839
background-color: transparent;
2840
// workaround, using background istead of a border since the border will get rendered twice (?)
2841
background-image: image($border_color);
2842
background-size: 1px 1px;
2843
background-clip: content-box; // avoids borders image being rendered twice (?)
2844
&.wide {
2846
min-width: 6px;
2847
min-height: 6px;
2848
background-color: $bg_color;
2849
background-image: image($border_color), image($border_color);
2850
background-size: 1px 1px, 1px 1px;
2851
}
2852
}
2853
&.horizontal > separator {
2855
background-repeat: repeat-y;
2856
&:dir(ltr) {
2858
margin: 0 -8px 0 0;
2859
padding: 0 8px 0 0;
2860
background-position: left;
2861
}
2862
&:dir(rtl) {
2864
margin: 0 0 0 -8px;
2865
padding: 0 0 0 8px;
2866
background-position: right;
2867
}
2868
&.wide {
2870
margin: 0;
2871
padding: 0;
2872
background-repeat: repeat-y, repeat-y;
2873
background-position: left, right;
2874
}
2875
}
2876
&.vertical > separator {
2878
margin: 0 0 -8px 0;
2879
padding: 0 0 8px 0;
2880
background-repeat: repeat-x;
2881
background-position: top;
2882
&.wide {
2884
margin: 0;
2885
padding: 0;
2886
background-repeat: repeat-x, repeat-x;
2887
background-position: bottom, top;
2888
}
2889
}
2890
}
2891
/**************
2894
* GtkInfoBar *
2895
**************/
2896
infobar {
2897
border-style: none;
2898
&.info { background-color: $info_bg_color; }
2900
&.question { background-color: $question_bg_color; }
2902
&.warning { background-color: $warning_bg_color; }
2904
&.error { background-color: $error_bg_color; }
2906
&.info,
2908
&.question,
2909
&.warning,
2910
&.error {
2911
> label, & { color: $inverse_fg_color; }
2912
button { @extend %button_selected; }
2914
selection {}
2916
*:link { @extend %link_selected; }
2918
}
2919
}
2920
/************
2923
* Tooltips *
2924
************/
2925
tooltip {
2926
&.background {
2927
// background-color needs to be set this way otherwise it gets drawn twice
2928
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2929
box-shadow: inset 0 1px $highlight_color;
2930
background-color: scale-alpha($base_color, $higher_opacity);
2931
}
2932
// @extend %osd;
2934
// padding: 4px; /* not working */
2936
border-radius: 2px;
2937
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2938
&:not(.csd) {
2940
border: 1px solid $border_color;
2941
border-radius: 2px + 1px;
2942
background-clip: $extra_background_clip;
2943
}
2944
// FIXME: we need a border or tooltips vanish on black background.
2946
decoration { background-color: transparent; }
2947
label {
2949
// tooltip label has already 6px margins
2950
min-height: 32px - 6px * 2;
2951
padding: 0 8px - 6px;
2952
}
2953
* {
2955
// workaround for Eclipse.
2956
// do not include any declaration here.
2957
// padding: 0;
2958
// background-color: transparent;
2959
// color: inherit;
2960
}
2961
}
2962
/*****************
2965
* Color Chooser *
2966
*****************/
2967
colorswatch {
2968
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2969
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2970
// applied to the overlay box.
2971
// base color corners rounding
2973
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2974
// sports a bigger radius.
2975
// nth-child is needed by the custom color strip.
2976
&.top {
2978
border-top-left-radius: $material_radius + 0.5px;
2979
border-top-right-radius: $material_radius + 0.5px;
2980
overlay {
2982
border-top-left-radius: $material_radius;
2983
border-top-right-radius: $material_radius;
2984
}
2985
}
2986
&.bottom {
2988
border-bottom-left-radius: $material_radius + 0.5px;
2989
border-bottom-right-radius: $material_radius + 0.5px;
2990
overlay {
2992
border-bottom-left-radius: $material_radius;
2993
border-bottom-right-radius: $material_radius;
2994
}
2995
}
2996
&.left,
2998
&:first-child:not(.top) {
2999
border-top-left-radius: $material_radius + 0.5px;
3000
border-bottom-left-radius: $material_radius + 0.5px;
3001
overlay {
3003
border-top-left-radius: $material_radius;
3004
border-bottom-left-radius: $material_radius;
3005
}
3006
}
3007
&.right,
3009
&:last-child:not(.bottom) {
3010
border-top-right-radius: $material_radius + 0.5px;
3011
border-bottom-right-radius: $material_radius + 0.5px;
3012
overlay {
3014
border-top-right-radius: $material_radius;
3015
border-bottom-right-radius: $material_radius;
3016
}
3017
}
3018
&.dark overlay { color: $light_fg_color; }
3020
&.light overlay { color: $dark_fg_color; }
3022
&.dark { color: $light_fg_color; } // for focus ring
3024
&.light { color: $dark_fg_color; } // for focus ring
3026
&:drop(active) {
3028
box-shadow: none;
3029
&.light overlay {
3031
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3032
}
3033
&.dark overlay {
3035
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3036
}
3037
}
3038
overlay {
3040
transition: $shadow_transition;
3041
box-shadow: $shadow_1;
3042
&:hover { box-shadow: $shadow_2; }
3044
}
3045
&#add-color-button {
3047
border-radius: $material_radius $material_radius 0 0;
3048
color: $light_fg_color; // for focus ring
3049
&:only-child { border-radius: $material_radius; }
3051
overlay {
3053
background-image: linear-gradient(to right,
3054
$error_bg_color 25%,
3055
$warning_bg_color 25%, $warning_bg_color 50%,
3056
$info_bg_color 50%, $info_bg_color 75%,
3057
$question_bg_color 75%);
3058
color: $light_fg_color;
3059
}
3060
}
3061
&:disabled {
3063
opacity: $disabled_opacity;
3064
overlay { box-shadow: none; }
3066
}
3067
row:selected & {
3069
}
3070
&#editor-color-sample {
3072
border-radius: $material_radius + 0.5px;
3073
overlay { border-radius: $material_radius; }
3075
// overlay:hover { box-shadow: $shadow_1; }
3077
}
3078
}
3079
// colorscale popup
3081
colorchooser .popover.osd {
3082
transition: $shadow_transition;
3083
border-radius: 2px;
3084
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3085
background-color: $base_color;
3086
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3088
spinbutton:not(.vertical) { @extend %entry.flat; }
3090
}
3091
/********
3094
* Misc *
3095
********/
3096
// content view (grid/list)
3097
.content-view {
3098
background-color: $bg_color;
3099
// &:hover { -gtk-icon-effect: highlight; }
3101
rubberband, .rubberband { @extend rubberband; }
3103
}
3104
.scale-popup {
3106
.osd & { @extend %osd; }
3107
.osd & button.flat { // FIXME: quick hack, redo properly
3109
}
3110
button { // +/- buttons on GtkVolumeButton popup
3112
}
3113
}
3114
/**********************
3117
* Window Decorations *
3118
*********************/
3119
decoration {
3120
transition: $shadow_transition;
3121
border-radius: 2px 2px 0 0;
3122
box-shadow: $shadow_4, 0 16px 16px transparent;
3123
// FIXME rationalize shadows
3125
// this is used for the resize cursor area
3127
margin: 8px;
3128
&:backdrop {
3130
// the transparent shadow here is to enforce that the shadow extents don't
3131
// change when we go to backdrop, to prevent jumping windows.
3132
// The biggest shadow should be in the same order then in the active state
3133
// or the jumping will happen during the transition.
3134
box-shadow: $shadow_2, 0 16px 16px transparent;
3135
}
3136
.maximized &,
3138
.fullscreen &,
3139
.tiled & { border-radius: 0; }
3140
.popup & { box-shadow: none; }
3142
// server-side decorations as used by mutter
3144
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3145
.csd.popup & {
3147
border-radius: 2px;
3148
box-shadow: $shadow_2;
3149
}
3150
tooltip.csd & {
3152
border-radius: 2px;
3153
box-shadow: $shadow_2;
3154
}
3155
messagedialog.csd & {
3157
border-radius: 2px;
3158
// box-shadow: $shadow_4, 0 16px 16px transparent;
3159
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3161
}
3162
.solid-csd & {
3164
margin: 0;
3165
// padding: 4px;
3166
border-radius: 0;
3167
box-shadow: none;
3168
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3169
background-color: $titlebar_bg_color;
3170
}
3171
}
3172
// Window Close button
3174
button.titlebutton {
3175
// @extend %simple_flat_button;
3176
@extend %circular_button;
3178
.selection-mode & {
3180
}
3181
}
3182
// catch all extend :)
3185
%selected_items {
3187
background-color: $primary_color;
3188
@at-root %nobg_selected_items, & {
3190
color: $inverse_fg_color;
3191
&:disabled { color: $disabled_inverse_fg_color; }
3193
}
3194
}
3195
.monospace { font-family: monospace; }
3197
/**********************
3200
* Touch Copy & Paste *
3201
*********************/
3202
// touch selection handlebars for the Popover.osd above
3203
cursor-handle {
3204
border-radius: $circular_radius;
3205
background-color: $accent_color;
3206
background-image: none;
3207
&.top:dir(ltr), &.bottom:dir(rtl) {
3209
padding-left: 6px;
3210
border-top-right-radius: 0;
3211
}
3212
&.bottom:dir(ltr), &.top:dir(rtl) {
3214
padding-right: 6px;
3215
border-top-left-radius: 0;
3216
}
3217
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3219
-GtkWidget-text-handle-width: 24;
3220
-GtkWidget-text-handle-height: 30;
3221
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3223
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3224
url('#{$_url}@2.png'));
3225
}
3226
}
3227
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3229
// shortcut window keys
3231
.keycap {
3232
min-width: 28px - 8px * 2;
3233
min-height: 28px - 2px;
3234
margin-top: 2px;
3235
padding-bottom: 2px;
3236
padding-left: 8px;
3237
padding-right: 8px;
3238
border: solid 1px $border_color;
3240
border-radius: 2px + 1px;
3241
box-shadow: inset 0 -2px $border_color;
3242
background-color: $base_color;
3243
color: $fg_color;
3244
font-size: smaller;
3245
}
3246
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3248
transition: $longer_transition;
3249
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3250
caret-color: $accent_color;
3251
}
3252
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3254
stackswitcher button.circular,
3256
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3257
min-width: $medium_size;
3258
min-height: $medium_size;
3259
padding: 0;
3260
}
3261