ASCII text
1
* {
2
padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 4;
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: $fill_color;
30
outline-offset: -4px;
31
-gtk-outline-radius: 2px;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
/***************
38
* Base States *
39
***************/
40
.background {
41
background-color: $bg_color;
42
color: $fg_color;
43
}
44
/*
46
These wildcard seems unavoidable, need to investigate.
47
Wildcards are bad and troublesome, use them with care,
48
or better, just don't.
49
Everytime a wildcard is used a kitten dies, painfully.
50
*/
51
*:disabled { -gtk-icon-effect: dim; }
53
.gtkstyle-fallback {
55
background-color: $bg_color;
56
color: $fg_color;
57
&:hover {
59
background-color: darken($bg_color, 5%);
60
color: $fg_color;
61
}
62
&:active {
64
background-color: darken($bg_color, 10%);
65
color: $fg_color;
66
}
67
&:disabled {
69
background-color: $bg_color;
70
color: $disabled_fg_color;
71
}
72
&:selected {
74
background-color: $primary_color;
75
color: $inverse_fg_color;
76
}
77
}
78
.view {
80
@extend row.activatable;
81
background-color: $base_color;
83
color: $fg_color;
84
&:disabled { color: $disabled_fg_color; }
86
selection,
88
&:selected { @extend %selected_items; }
89
}
90
textview {
92
// FIXME: we need to override background-color to ensure text rendering
93
text { background-color: $base_color; }
94
// FIXME: we cannot specify text color for the border node
96
border { background-color: $alt_base_color; }
97
}
98
iconview { border-radius: 2px; }
100
.rubberband,
102
rubberband {
103
border: 1px solid $alt_primary_color;
104
background-color: scale-alpha($alt_primary_color, $lower_opacity);
105
}
106
flowbox {
108
rubberband { @extend rubberband; }
109
flowboxchild {
111
padding: 4px;
112
border-radius: 2px;
113
outline-offset: -2px;
114
&:selected { @extend %selected_items; }
116
}
117
}
118
label {
120
caret-color: currentColor; // this shouldn't be needed.
121
&.separator {
123
@extend .dim-label;
124
color: $fg_color;
126
}
127
row:selected &,
129
&:selected { @extend %nobg_selected_items; }
130
selection {
132
background-color: $primary_color;
133
color: $inverse_fg_color;
134
}
135
&:disabled {
137
color: $disabled_fg_color;
138
selection { @extend %selected_items:disabled; }
140
tab &,
142
button & { color: inherit; }
143
}
144
}
145
.dim-label { opacity: $tertiary_opacity; }
147
assistant {
149
.sidebar {
150
padding: 4px 0;
151
// background-color: $base_color;
152
// border-top: 1px solid $border_color;
153
}
154
// &.csd .sidebar { border-top-style: none; }
156
.sidebar label {
158
min-height: $medium_size;
159
padding: 0 12px;
160
color: $tertiary_fg_color;
161
font-weight: 500;
162
&.highlight { color: $fg_color; }
164
}
165
}
166
%osd, .osd { opacity: $higher_opacity; }
168
/*********************
171
* Spinner Animation *
172
*********************/
173
@keyframes spin {
174
to { -gtk-icon-transform: rotate(1turn); }
175
}
176
@keyframes spin_colors {
178
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
179
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
180
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
181
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
182
}
183
spinner {
185
background: none;
186
opacity: 0; // non spinning spinner makes no sense
187
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
188
&:checked {
190
opacity: 1;
191
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
192
&:disabled { opacity: $disabled_opacity; }
194
}
195
}
196
/****************
199
* Text Entries *
200
****************/
201
%entry,
202
entry {
203
%entry_basic, & {
204
min-height: $medium_size;
205
padding: 0 8px;
206
border-radius: 2px;
207
@include entry(normal);
209
&:focus { @include entry(focus); }
211
&:disabled { @include entry(disabled); }
213
&.flat {
215
border-radius: 0;
216
@include entry(flat-normal);
218
&:focus { @include entry(flat-focus); }
220
&:disabled { @include entry(flat-disabled); }
222
}
223
image { // icons inside the entry
225
// @extend %simple_flat_button;
226
// min-height: $small_size;
228
// min-width: $small_size;
229
// border-radius: $circular_radius;
230
// -gtk-outline-radius: $circular_radius;
231
color: gtkalpha(currentColor, $secondary_opacity);
232
&:hover, &:active { color: currentColor; }
234
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
236
&.left { margin-left: 2px; margin-right: 6px; }
238
&.right { margin-left: 6px; margin-right: 2px; }
240
}
241
undershoot {
243
&.left { @include undershoot(left); }
244
&.right { @include undershoot(right); }
246
}
247
selection { @extend %selected_items; }
249
// entry error and warning style
251
@each $e_type, $e_color in (error, $error_color),
252
(warning, $warning_color) {
253
&.#{$e_type} {
254
@include entry(normal, $e_color);
255
&:focus { @include entry(focus, $e_color); }
257
&:disabled { @include entry(disabled, $e_color); }
259
&.flat {
261
@include entry(flat-normal, $e_color);
262
&:focus { @include entry(flat-focus, $e_color); }
264
&:disabled { @include entry(flat-disabled, $e_color); }
266
}
267
}
268
}
269
&:drop(active) {
271
// box-shadow: inset 0 0 0 2px $accent_color;
272
}
273
.osd & {
275
}
276
}
277
progress {
279
margin: 2px (2px - 8px);
280
border-style: none none solid;
281
border-width: 2px;
282
border-color: $primary_color;
283
// border-radius: 0;
284
// box-shadow: none;
285
background-color: transparent;
286
// background-image: none;
287
}
288
// linked entries
290
.linked:not(.vertical) > & { @extend %linked; }
291
// Vertically linked entries
293
.linked.vertical > & { @extend %linked_vertical; }
294
.linked:not(.vertical) > &.flat,
296
.linked.vertical > &.flat { border-radius: 0; }
297
}
298
treeview entry {
300
&.flat, & {
301
min-height: 0;
302
padding: 2px;
303
border-radius: 0;
304
background-color: $base_color;
305
&, &:focus {
307
border-image: none;
308
box-shadow: none;
309
}
310
}
311
}
312
/***********
315
* Buttons *
316
***********/
317
// stuff for .needs-attention
318
@keyframes needs_attention {
319
from {
320
background-image: -gtk-gradient(radial,
321
center center, 0,
322
center center, 0.001,
323
to($accent_color),
324
to(transparent));
325
}
326
to {
328
background-image: -gtk-gradient(radial,
329
center center, 0,
330
center center, 0.5,
331
to($accent_color),
332
to(transparent));
333
}
334
}
335
%button,
337
button {
338
@at-root %button_basic, & {
339
min-height: 24px;
340
min-width: 16px;
341
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
342
border-radius: 2px;
343
font-weight: 500;
344
@include button(normal);
346
&:hover { @include button(hover); }
348
&:active { @include button(active); }
350
&:disabled { @include button(disabled); }
352
&:checked { @include button(checked); }
354
&:checked:disabled { @include button(checked-disabled); }
356
@at-root %flat_button, &.flat {
358
@at-root %simple_flat_button, & {
359
@include button(flat-normal);
360
&:hover { @include button(flat-hover); }
362
&:active { @include button(flat-active); }
364
&:disabled { @include button(flat-disabled); }
366
}
367
&:checked { @include button(flat-checked); }
369
&:checked:disabled { @include button(flat-checked-disabled); }
371
}
372
&.text-button {
374
padding-left: 16px;
375
padding-right: 16px;
376
}
377
&.image-button {
379
min-width: 24px;
380
padding: ($medium_size - 24px) / 2;
381
border-radius: $circular_radius;
382
-gtk-outline-radius: $circular_radius;
383
}
384
&.text-button.image-button {
386
border-radius: 2px;
387
-gtk-outline-radius: 2px;
388
label {
390
&:first-child {
391
margin-left: 16px - ($medium_size - 24px) / 2;
392
margin-right: 2px;
393
}
394
&:last-child {
396
margin-left: 2px;
397
margin-right: 16px - ($medium_size - 24px) / 2;
398
}
399
&:only-child {
401
margin-left: 16px - ($medium_size - 24px) / 2;
402
margin-right: 16px - ($medium_size - 24px) / 2;
403
}
404
}
405
image:not(:only-child) {
407
&:first-child { margin-left: (24px - 16px) / 2; }
408
&:last-child { margin-right: (24px - 16px) / 2; }
410
}
411
}
412
.linked > & { @extend %linked; }
414
.linked.vertical > & { @extend %linked_vertical; }
416
.linked > &.flat,
418
.linked.vertical > &.flat {
419
border-radius: 2px;
420
&.image-button {
422
border-radius: $circular_radius;
423
-gtk-outline-radius: $circular_radius;
424
}
425
&.text-button.image-button {
427
border-radius: 2px;
428
-gtk-outline-radius: 2px;
429
}
430
}
431
&:drop(active) {
433
// box-shadow: inset 0 0 0 2px $accent_color;
434
}
435
}
436
@at-root %button_selected, row:selected & {
438
&:disabled { color: $disabled_secondary_inverse_fg_color; }
439
}
440
// big standalone buttons like in Documents pager
442
&.osd {
443
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
444
&.image-button { padding: ($large_size - 24px) / 2; }
446
&:disabled { opacity: 0; }
448
}
449
// overlay / OSD style
451
@at-root %osd_button,
452
.osd & {
453
}
454
// Suggested and Destructive Action buttons
456
@each $b_type, $b_color in (suggested-action, $suggested_color),
457
(destructive-action, $destructive_color) {
458
&.#{$b_type} {
459
background-color: $b_color;
460
color: $inverse_fg_color;
461
&:disabled { @include button(disabled, $b_color); }
463
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
465
&.flat {
467
background-color: transparent;
468
color: $b_color;
469
&:disabled { @include button(flat-disabled, $b_color); }
471
&:checked { background-color: $fill_color; }
473
}
474
.osd & {
476
}
477
}
478
}
479
.stack-switcher > & {
481
// to position the needs attention dot, padding is added to the button
482
// child, a label needs just lateral padding while an icon needs vertical
483
// padding added too.
484
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
486
> label {
488
padding-left: 6px; // label padding
489
padding-right: 6px; //
490
}
491
> image {
493
padding-left: 6px; // image padding
494
padding-right: 6px; //
495
padding-top: 3px; //
496
padding-bottom: 3px; //
497
}
498
&.text-button {
500
// compensate text-button paddings
501
padding-left: 16px - 6px;
502
padding-right: 16px - 6px;
503
}
504
&.image-button {
506
// we want image buttons to have a 1:1 aspect ratio, so compensation
507
// of the padding added to the GtkImage is needed
508
padding-left: ($medium_size - 16px) / 2 - 6px;
509
padding-right: ($medium_size - 16px) / 2 - 6px;
510
}
511
&.needs-attention {
513
> label,
514
> image { @extend %needs_attention; }
515
&:checked {
517
> label,
518
> image {
519
animation: none;
520
background-image: none;
521
}
522
}
523
}
524
}
525
// hide separators
527
separator {
528
min-width: 0;
529
min-height: 0;
530
background-color: transparent;
531
}
532
// &.font,
534
// &.file { separator { background-color: transparent; }}
535
// &.font { > box > box > label { font-weight: bold; }}
537
// inline-toolbar buttons
539
.inline-toolbar & {
540
// @extend %button_basic.flat;
541
&:not(.text-button) { @extend %circular_button; }
543
}
544
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
546
@at-root %circular_button,
548
&.close,
549
&.circular { // The Bloody Circul Button
550
border-radius: $circular_radius;
551
-gtk-outline-radius: $circular_radius;
552
// label { padding: 0; }
554
}
555
@at-root %small_button {
557
min-height: $small_size;
558
min-width: $small_size;
559
padding: 0;
560
border-radius: $circular_radius;
561
-gtk-outline-radius: $circular_radius;
562
}
563
}
564
%needs_attention {
566
animation: needs_attention $longer_duration $deceleration_curve forwards;
567
background-repeat: no-repeat;
568
background-position: right 3px;
569
background-size: 6px 6px;
570
&:dir(rtl) { background-position: left 3px; }
572
}
573
// all the following is for the +|- buttons on inline toolbars, that way
575
// should really be deprecated...
576
.inline-toolbar toolbutton > button { // redefining the button look is
577
// needed since those are flat...
578
}
579
// More inline toolbar buttons
581
toolbar.inline-toolbar toolbutton {
582
// > button.flat { @extend %linked_middle; }
583
// &:first-child > button.flat { @extend %linked:first-child; }
585
// &:last-child > button.flat { @extend %linked:last-child; }
587
// &:only-child > button.flat { @extend %linked:only-child; }
589
}
590
%linked_middle {
592
border-radius: 0;
593
-gtk-outline-radius: 2px;
594
}
595
%linked {
597
@extend %linked_middle;
598
&:first-child {
600
border-top-left-radius: 2px;
601
border-bottom-left-radius: 2px;
602
}
603
&:last-child {
605
border-top-right-radius: 2px;
606
border-bottom-right-radius: 2px;
607
}
608
&:only-child {
610
border-radius: 2px;
611
}
612
}
613
%linked_vertical_middle {
615
border-radius: 0;
616
-gtk-outline-radius: 2px;
617
}
618
%linked_vertical{
620
@extend %linked_vertical_middle;
621
&:first-child {
623
border-top-left-radius: 2px;
624
border-top-right-radius: 2px;
625
}
626
&:last-child {
628
border-bottom-left-radius: 2px;
629
border-bottom-right-radius: 2px;
630
}
631
&:only-child {
633
border-radius: 2px;
634
}
635
}
636
/* menu buttons */
638
modelbutton.flat,
639
.menuitem.button.flat {
640
min-height: $menuitem_size;
641
padding: 0 8px;
642
border-radius: 2px;
643
color: inherit;
644
@extend %simple_flat_button;
646
&:selected { @extend %selected_items; }
648
check,
650
radio {
651
box-shadow: none;
652
background-image: none;
653
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
655
&:last-child { margin-left: -8px; margin-right: -16px; }
657
&:first-child { margin-left: -16px; margin-right: -8px; }
659
}
660
}
661
modelbutton.flat arrow {
663
background: none;
664
&:hover { background: none; }
666
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
668
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
670
}
671
button.color {
673
min-height: $small_size;
674
min-width: $small_size;
675
padding: $container_padding;
676
colorswatch:only-child {
678
// &, overlay { border-radius: 0; }
679
}
680
}
681
/*********
684
* Links *
685
*********/
686
*:link {
687
&, &:hover, &:active { color: $link_color; }
688
&:visited {
690
&, &:hover, &:active { color: $visited_link_color; }
691
}
692
@at-root %link_selected,
694
&:selected,
695
*:selected & { color: $inverse_fg_color; }
696
}
697
button:link,
699
button:visited {
700
@extend *:link;
701
> label { text-decoration-line: underline; }
703
}
704
/*****************
706
* GtkSpinButton *
707
*****************/
708
spinbutton {
709
&:not(.vertical) {
710
// in this horizontal configuration, the whole spinbutton
711
// behaves as the entry, so we extend the entry styling
712
// and nuke the style on the internal entry
713
@extend %entry;
714
padding: 0;
716
%spinbutton_entry,
718
entry {
719
min-width: $large_size - 8px * 2;
720
// reset all the other props since the spinbutton node is styled here
721
margin: 0;
722
border-image: none;
723
border-radius: 0;
724
box-shadow: none;
725
background-color: transparent;
726
//
727
// This will help to simplify spinbutton's code, but unfortunatelly
728
// doesn't work properly in :dir(rtl). It needs z-index property.
729
//
730
// min-width: $large_size - 8px;
731
//
732
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
733
//
734
// &:dir(ltr) {
735
// margin-right: -$spinbuttons_width;
736
// padding-right: $spinbuttons_width;
737
// }
738
//
739
// &:dir(rtl) {
740
// margin-left: -$spinbuttons_width;
741
// padding-left: $spinbuttons_width;
742
// }
743
}
744
button {
746
// margin: $container_padding;
747
border: solid $container_padding transparent;
748
@extend %simple_flat_button;
750
@extend %small_button;
752
&.up:dir(ltr),
754
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
755
&.up:dir(rtl),
757
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
758
}
759
}
760
// OSD horizontal
762
.osd &:not(.vertical) {
763
button {
764
}
765
}
766
// Vertical
768
&.vertical {
769
// in the vertical configuration, we treat the spinbutton
770
// as a box, and tweak the style of the entry in the middle
771
// so that it's linked
772
// FIXME: this should not be set at all, but otherwise it gets the wrong
774
// color
775
&:disabled { color: $disabled_fg_color; }
776
&:drop(active) {
778
box-shadow: none;
779
}
780
entry {
782
min-height: $medium_size;
783
min-width: $large_size;
784
padding: 0;
785
}
786
button {
788
min-height: $medium_size;
789
min-width: $large_size;
790
padding: 0;
791
@extend %simple_flat_button;
793
&.up { border-radius: 2px 2px 0 0; }
795
&.down { border-radius: 0 0 2px 2px; }
797
}
798
}
799
// OSD vertical
801
.osd &.vertical button:first-child {
802
}
803
// Misc
805
treeview &:not(.vertical) {
806
min-height: 0;
807
border-style: none;
808
border-radius: 0;
809
entry {
811
min-height: 0;
812
padding: 1px 2px;
813
}
814
}
815
}
816
/**************
819
* ComboBoxes *
820
**************/
821
combobox {
822
arrow {
823
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
824
min-height: 16px;
825
min-width: 16px;
826
}
827
button.combo:checked { transition: none; } // workaround for menuitem selection
829
button.combo cellview {
831
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
832
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
833
}
834
#gtk-combobox-popup-menu {
836
padding: 2px 0;
837
menuitem {
839
min-height: $medium_size - 2px * 2;
840
padding: 0 8px;
841
}
842
}
843
&.linked {
845
button:nth-child(2) {
846
&:dir(ltr) { @extend %linked:last-child; }
847
&:dir(rtl) { @extend %linked:first-child; }
848
}
849
}
850
&:drop(active) { // FIXME: untested
852
box-shadow: none;
853
// button.combo { @extend %button_basic:drop(active); }
855
}
856
}
857
.linked > combobox > box > button.combo {
859
// the combo is a composite widget so the way we do button linking doesn't
860
// work, special case needed. See
861
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
862
&:dir(ltr),
864
&:dir(rtl) { @extend %linked_middle; } // specificity bump
865
}
866
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
868
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
869
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
870
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
872
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
873
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
874
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
875
%combo_flat {
877
border-radius: 0;
878
background-image: none;
879
font-weight: inherit;
880
@include entry(flat-normal);
882
&:hover { box-shadow: inset 0 -2px $fill_color; }
884
&:checked {
886
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
887
$primary_color 100%,
888
transparent 0%)
889
0 0 2 / 0 0 2px;
890
}
891
&:disabled { color: $disabled_fg_color; }
893
}
894
/************
897
* Toolbars *
898
************/
899
toolbar {
900
-GtkWidget-window-dragging: true;
901
padding: $container_padding / 2;
902
background-color: $bg_color;
903
button { @extend %button_basic.flat; }
905
// on OSD
907
.osd & { background-color: transparent; }
908
// stand-alone OSD toolbars
910
&.osd {
911
transition: $shadow_transition;
912
padding: $container_padding;
913
border-radius: 2px;
914
box-shadow: $shadow_2, inset 0 1px $highlight_color;
915
background-color: $base_color;
916
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
918
&.left,
920
&.right,
921
&.top,
922
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
923
}
924
// toolbar separators
926
&.horizontal separator { margin: $container_padding / 2; }
927
&.vertical separator { margin: $container_padding / 2; }
928
&:not(.inline-toolbar):not(.osd) {
930
scale,
931
entry,
932
spinbutton,
933
button { margin: $container_padding / 2; }
934
.linked entry,
936
.linked spinbutton,
937
.linked button {
938
&:not(:first-child) { margin-left: 0; }
939
&:not(:last-child) { margin-right: 0; }
940
}
941
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
943
}
944
}
945
// searchbar, location-bar & inline-toolbar
947
.inline-toolbar {
948
padding: $container_padding;
949
border-style: solid;
950
border-width: 0 1px 1px;
951
border-color: $border_color;
952
background-color: $alt_base_color;
953
}
954
searchbar,
956
.location-bar {
957
padding: $container_padding;
958
border-style: solid;
959
border-width: 0 0 1px;
960
border-color: $border_color;
961
background-color: $bg_color;
962
background-clip: border-box;
963
}
964
/***************
967
* Header bars *
968
***************/
969
%titlebar,
970
headerbar {
971
transition: background-color $shorter_duration $deceleration_curve;
972
min-height: $large_size;
973
padding: 0 $container_padding;
974
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
975
background-color: $titlebar_bg_color;
976
color: $titlebar_fg_color;
977
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
979
&:backdrop {
981
color: $secondary_titlebar_fg_color;
982
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
984
}
985
.title {
987
transition: $longer_transition;
988
padding: 0 12px;
989
font-weight: bold;
990
}
991
.subtitle {
993
transition: $longer_transition;
994
padding: 0 12px;
995
font-size: smaller;
996
@extend .dim-label;
998
}
999
button:not(.suggested-action):not(.destructive-action) {
1001
@extend %button_basic.flat;
1002
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1004
$titlebar_indicator_color 0%,
1005
transparent 0%)
1006
0 0 0 / 0 0 0px;
1007
&:checked {
1009
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1010
$titlebar_indicator_color 100%,
1011
transparent 0%)
1012
0 0 2 / 0 0 2px;
1013
&, &:disabled { background-color: transparent; }
1015
}
1016
}
1017
button.suggested-action, button.destructive-action {
1019
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1020
}
1021
&.selection-mode {
1023
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1024
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1025
transition: background-color 0.00001s $longer_duration;
1026
animation: header_ripple_effect $longer_duration $deceleration_curve;
1027
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1028
background-color: $primary_color;
1029
color: $inverse_fg_color;
1030
&:backdrop {
1032
color: $secondary_inverse_fg_color;
1033
}
1034
.subtitle:link { @extend *:link:selected; }
1036
button:not(.suggested-action):not(.destructive-action) {
1038
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1039
currentColor 0%,
1040
transparent 0%)
1041
0 0 0 / 0 0 0px;
1042
color: currentColor;
1043
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1045
&:checked {
1047
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1048
currentColor 100%,
1049
transparent 0%)
1050
0 0 2 / 0 0 2px;
1051
color: currentColor;
1052
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1054
}
1055
}
1056
.selection-menu {
1058
padding-left: 16px;
1059
padding-right: 16px;
1060
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1062
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1064
}
1065
}
1066
.fullscreen &,
1068
.tiled &,
1069
.maximized & {
1070
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1071
box-shadow: $shadow_1;
1072
}
1073
&.default-decoration {
1075
min-height: $small_size;
1076
padding: $container_padding;
1077
box-shadow: inset 0 1px $titlebar_highlight_color;
1078
.fullscreen &,
1080
.tiled &,
1081
.maximized & { box-shadow: none; }
1082
button.titlebutton {
1084
min-height: $small_size;
1085
min-width: $small_size;
1086
margin: 0;
1087
padding: 0;
1088
}
1089
// workaround for non-animatable buttons
1091
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1092
}
1093
.solid-csd & {
1095
&:dir(rtl), &:dir(ltr) { // specificity bump
1096
// margin-left: -2px;
1097
// margin-right: -2px;
1098
// margin-top: -2px;
1099
// border-radius: 0;
1100
// box-shadow: inset 0 1px $titlebar_highlight_color;
1101
}
1102
}
1103
}
1104
headerbar {
1106
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1107
entry,
1108
spinbutton,
1109
// separator,
1110
button {
1111
margin-top: $container_padding;
1112
margin-bottom: $container_padding;
1113
}
1114
switch {
1116
margin-top: $container_padding * 2;
1117
margin-bottom: $container_padding * 2;
1118
}
1119
// reset button margins of the spinbutton
1121
spinbutton button {
1122
margin-top: 0;
1123
margin-bottom: 0;
1124
}
1125
}
1126
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1128
border-top-left-radius: 2px;
1129
border-top-right-radius: 2px;
1130
}
1131
headerbar { // headerbar border rounding
1133
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1134
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1135
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1137
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1139
&:first-child, &:last-child {
1140
border-top-left-radius: 2px;
1141
border-top-right-radius: 2px;
1142
}
1143
}
1144
}
1145
.titlebar:not(headerbar) {
1147
window.csd > & {
1148
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1149
padding: 0;
1150
background-color: transparent;
1151
background-image: none;
1152
border-style: none;
1153
box-shadow: none;
1154
}
1155
> separator {
1157
background-color: $titlebar_bg_color;
1158
background-image: image($border_color);
1159
}
1160
@extend %titlebar;
1162
}
1163
/************
1166
* Pathbars *
1167
************/
1168
%pathbar_button,
1169
.path-bar button {
1170
padding-left: ($medium_size - 24px) / 2;
1171
padding-right: ($medium_size - 24px) / 2;
1172
label:not(:only-child) {
1174
&:first-child { margin-left: 4px; }
1175
&:last-child { margin-right: 4px; }
1177
}
1178
&.slider-button {
1180
padding-left: (24px - 16px) / 2;
1181
padding-right: (24px - 16px) / 2;
1182
}
1183
:not(headerbar) & {
1185
@extend %flat_button;
1186
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1188
$primary_color 0%,
1189
transparent 0%)
1190
0 0 0 / 0 0 0px;
1191
border-radius: 2px;
1192
&:checked {
1194
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1195
$primary_color 100%,
1196
transparent 0%)
1197
0 0 2 / 0 0 2px;
1198
&, &:disabled { background-color: transparent; }
1200
}
1201
}
1202
}
1203
/**************
1206
* Tree Views *
1207
**************/
1208
treeview.view {
1209
@at-root * {
1210
-GtkTreeView-horizontal-separator: 4;
1211
-GtkTreeView-grid-line-width: 1;
1212
-GtkTreeView-grid-line-pattern: '';
1213
-GtkTreeView-tree-line-width: 1;
1214
-GtkTreeView-tree-line-pattern: '';
1215
-GtkTreeView-expander-size: 16;
1216
}
1217
border-left-color: $fill_color; // this is actually the tree lines color,
1219
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1220
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1222
&.separator {
1224
min-height: 1px + 2px * 2;
1225
color: $border_color;
1226
}
1227
&:drop(active) {
1229
border-style: solid none;
1230
border-width: 1px;
1231
border-color: $accent_color;
1232
&.after { border-top-style: none; }
1234
&.before { border-bottom-style: none; }
1236
}
1237
&.expander {
1239
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1240
-gtk-icon-transform: rotate(-90deg);
1241
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1243
&:checked { -gtk-icon-transform: unset; }
1245
color: $secondary_fg_color;
1247
&:hover, &:active { color: $fg_color; }
1249
&:disabled { color: $disabled_secondary_fg_color; }
1251
&:selected {
1253
color: $secondary_inverse_fg_color;
1254
&:hover, &:active { color: $inverse_fg_color; }
1256
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1258
}
1259
}
1260
&.progressbar { // progress bar in treeviews
1262
border-style: none none solid;
1263
border-width: $bar_size;
1264
border-color: $primary_color;
1265
box-shadow: none;
1266
background-color: transparent;
1267
&:selected { border-color: currentColor; }
1269
}
1270
&.trough { // progress bar trough in treeviews
1272
border-style: none none solid;
1273
border-width: $bar_size;
1274
border-color: scale-alpha($primary_color, $lower_opacity);
1275
box-shadow: none;
1276
background-color: transparent;
1277
&:selected { border-color: $fill_color; }
1279
}
1280
header {
1282
button {
1283
@extend row.activatable;
1284
padding: 2px 6px;
1286
border-style: none solid solid none;
1287
border-width: 1px;
1288
border-color: $border_color;
1289
border-radius: 0;
1290
background-clip: border-box;
1291
&, &:hover, &:active { box-shadow: none; }
1293
&, &:disabled { background-color: $base_color; }
1295
&:last-child { border-right-style: none; }
1297
}
1298
}
1299
button.dnd,
1301
header.button.dnd { // for treeview-like derive widgets
1302
padding: 2px 6px;
1303
border-style: none solid solid;
1304
border-width: 1px;
1305
border-color: $border_color;
1306
border-radius: 0;
1307
box-shadow: none;
1308
background-color: $base_color;
1309
background-clip: border-box;
1310
color: $primary_color;
1311
}
1312
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1314
}
1315
/*********
1318
* Menus *
1319
*********/
1320
menubar,
1321
.menubar {
1322
-GtkWidget-window-dragging: true;
1323
padding: 0;
1324
// box-shadow: inset 0 -1px $border_color;
1325
background-color: $titlebar_bg_color;
1326
> menuitem {
1328
transition: $shorter_transition;
1329
min-height: 20px;
1330
padding: 4px 8px;
1331
color: $secondary_titlebar_fg_color;
1332
&:hover { // Seems like it :hover even with keyboard focus
1334
transition: none;
1335
background-color: $semi_fill_color;
1336
color: $titlebar_fg_color;
1337
}
1338
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1340
}
1341
}
1342
.csd.popup { border-radius: 2px; }
1344
menu,
1346
.menu,
1347
.context-menu {
1348
margin: 4px 0;
1349
padding: 4px 0;
1350
box-shadow: inset 0 1px $highlight_color;
1351
background-color: $base_color;
1352
border: 1px solid $border_color; // adds borders in a non composited env
1353
.csd & {
1355
border: none; // axes borders in a composited env
1356
border-radius: 2px;
1357
}
1358
menuitem {
1360
transition: $shorter_transition;
1361
min-height: 20px;
1362
min-width: 40px;
1363
padding: 4px 8px;
1364
font: initial;
1365
text-shadow: none;
1366
&:hover {
1368
transition: none;
1369
background-color: $semi_fill_color;
1370
}
1371
&:disabled { color: $disabled_fg_color; }
1373
// submenu indicators
1375
arrow {
1376
min-height: 16px;
1377
min-width: 16px;
1378
&:dir(ltr) {
1380
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1381
margin-left: 8px;
1382
}
1383
&:dir(rtl) {
1385
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1386
margin-right: 8px;
1387
}
1388
}
1389
// avoids labels color being overridden, see
1391
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1392
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1393
}
1394
// overflow arrows
1396
> arrow {
1397
min-height: 16px;
1398
min-width: 16px;
1399
padding: 4px;
1400
border-radius: 0;
1401
background-color: $base_color;
1402
color: $secondary_fg_color;
1403
&.top {
1405
margin-top: -4px;
1406
border-bottom: 1px solid $border_color;
1407
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1408
}
1409
&.bottom {
1411
margin-bottom: -4px;
1412
border-top: 1px solid $border_color;
1413
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1414
}
1415
&:hover {
1417
background-image: image($semi_fill_color);
1418
color: $fg_color;
1419
}
1420
&:disabled {
1422
border-color: transparent;
1423
background-color: transparent;
1424
color: transparent;
1425
// color: $disabled_secondary_fg_color;
1426
}
1427
}
1428
separator { margin: 4px 0; }
1430
}
1431
menuitem {
1433
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1434
check,
1436
radio {
1437
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1438
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1439
}
1440
}
1441
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1443
// Electron/Atom render all translucent colors in opaque colors.
1444
// It's a very critical issue for this theme and should be fixed by upstream...
1445
.popup:not(.csd) menu {
1446
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1447
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1448
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1449
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1450
menuitem {
1452
color: $opaque_fg_color;
1453
&:hover { background-color: $opaque_semi_fill_color; }
1455
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1457
}
1458
// TODO: not working this, where/how i can set the accelerators?
1460
accelerator { color: $opaque_tertiary_fg_color; }
1461
}
1462
/************
1465
* Popovers *
1466
************/
1467
popover.background {
1468
transition: $shadow_transition;
1469
padding: 2px;
1470
box-shadow: $shadow_2; // TODO: this should really have a highlight
1471
background-color: $lighter_bg_color;
1472
&:backdrop { box-shadow: $shadow_1; }
1474
&, .csd & {
1476
border-style: solid;
1477
border-width: 1px;
1478
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1479
border-radius: 2px + 1px;
1480
}
1481
> stack { margin: -4px; } // remove extra padding from menu style popovers
1483
> toolbar { margin: -2px; }
1485
> list,
1487
> .view,
1488
> toolbar {
1489
border-style: none;
1490
box-shadow: none;
1491
background-color: transparent;
1492
}
1493
&.touch-selection,
1495
&.magnifier,
1496
&.osd { @extend %osd; }
1497
// entry { @extend %entry.flat; }
1499
// button.combo { @extend %combo_flat; }
1501
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1503
&.menu button,
1505
button.model {
1506
@extend %simple_flat_button;
1507
min-height: 32px;
1509
padding: 0 8px;
1510
border-radius: 2px;
1511
&:checked { @extend %selected_items; }
1513
}
1514
separator { margin: 4px 0; }
1516
list separator { margin: 0; }
1518
}
1519
/*************
1521
* Notebooks *
1522
*************/
1523
notebook {
1524
> header {
1525
border-width: 1px;
1526
border-color: $border_color;
1527
background-color: $bg_color;
1528
background-clip: border-box;
1529
&.top {
1531
border-bottom-style: solid;
1532
> tabs {
1533
margin-bottom: -1px;
1534
> tab {
1535
&:hover { box-shadow: inset 0 -2px $fill_color; }
1537
&:checked { box-shadow: inset 0 -2px $primary_color; }
1539
}
1540
}
1541
}
1542
&.bottom {
1544
border-top-style: solid;
1545
> tabs {
1546
margin-top: -1px;
1547
> tab {
1548
&:hover { box-shadow: inset 0 2px $fill_color; }
1550
&:checked { box-shadow: inset 0 2px $primary_color; }
1552
}
1553
}
1554
}
1555
&.left {
1557
border-right-style: solid;
1558
> tabs {
1559
margin-right: -1px;
1560
> tab {
1561
&:hover { box-shadow: inset -2px 0 $fill_color; }
1563
&:checked { box-shadow: inset -2px 0 $primary_color; }
1565
}
1566
}
1567
}
1568
&.right {
1570
border-left-style: solid;
1571
> tabs {
1572
margin-left: -1px;
1573
> tab {
1574
&:hover { box-shadow: inset 2px 0 $fill_color; }
1576
&:checked { box-shadow: inset 2px 0 $primary_color; }
1578
}
1579
}
1580
}
1581
&.top > tabs > arrow {
1583
@extend %notebook_vert_arrows;
1584
border-top-style: none;
1586
}
1587
&.bottom > tabs > arrow {
1589
@extend %notebook_vert_arrows;
1590
border-bottom-style: none;
1592
}
1593
@at-root %notebook_vert_arrows {
1595
padding-left: 4px;
1596
padding-right: 4px;
1597
&.down {
1599
margin-left: -8px;
1600
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1601
}
1602
&.up {
1604
margin-right: -8px;
1605
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1606
}
1607
}
1608
&.left > tabs > arrow {
1610
@extend %notebook_horz_arrows;
1611
border-left-style: none;
1613
}
1614
&.right > tabs > arrow {
1616
@extend %notebook_horz_arrows;
1617
border-right-style: none;
1619
}
1620
@at-root %notebook_horz_arrows {
1622
padding-top: 4px;
1623
padding-bottom: 4px;
1624
&.down {
1626
margin-top: -8px;
1627
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1628
}
1629
&.up {
1631
margin-bottom: -8px;
1632
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1633
}
1634
}
1635
> tabs > arrow {
1637
@extend %simple_flat_button;
1638
min-height: 16px;
1640
min-width: 16px;
1641
border-radius: 0;
1642
}
1643
tab {
1645
transition: $longer_transition,
1646
background-size 0,
1647
background-image 0;
1648
min-height: $small_size;
1649
min-width: $small_size;
1650
padding: $container_padding 12px;
1651
outline-offset: -6px;
1653
border-width: 1px; // for reorderable tabs
1655
border-color: transparent; //
1656
background-image: radial-gradient(circle farthest-corner at center,
1658
$primary_color 10%,
1659
transparent 0%);
1660
background-repeat: no-repeat;
1661
background-position: center;
1662
background-size: 0% 0%;
1663
color: $secondary_fg_color;
1665
font-weight: 500;
1666
&:hover {
1668
color: $fg_color;
1669
&.reorderable-page {
1671
border-color: $border_color;
1672
background-color: $alt_base_color;
1673
}
1674
}
1675
&:disabled { color: $disabled_secondary_fg_color; }
1677
&:checked {
1679
transition: $longer_transition,
1680
background-size $longer_duration $deceleration_curve,
1681
background-image $longer_duration + $ripple_duration $deceleration_curve;
1682
background-image: radial-gradient(circle farthest-corner at center,
1683
transparent 10%,
1684
transparent 0%);
1685
background-size: 1000% 1000%;
1686
color: $fg_color;
1687
&:disabled { color: $disabled_fg_color; }
1689
&.reorderable-page {
1691
border-color: $border_color;
1692
background-color: $base_color;
1693
}
1694
}
1695
// colors the button like the label, overridden otherwise
1697
button.flat {
1698
@extend %small_button;
1699
&:last-child {
1701
margin-left: $container_padding;
1702
margin-right: $container_padding - 12px;
1703
}
1704
&:first-child {
1706
margin-left: $container_padding - 12px;
1707
margin-right: $container_padding;
1708
}
1709
}
1710
}
1711
&.top,
1713
&.bottom {
1714
tabs {
1715
padding-left: 8px;
1716
padding-right: 8px;
1717
&:not(:only-child) {
1719
&:first-child { margin-left: 0; }
1720
&:last-child { margin-right: 0; }
1721
}
1722
tab {
1724
&.reorderable-page {
1725
margin: 0 -1px;
1726
border-style: none solid;
1727
}
1728
}
1729
}
1730
}
1731
&.left,
1733
&.right {
1734
tabs {
1735
padding-top: 8px;
1736
padding-bottom: 8px;
1737
&:not(:only-child) {
1739
&:first-child { margin-top: 0; }
1740
&:last-child { margin-bottom: 0; }
1741
}
1742
tab {
1744
&.reorderable-page {
1745
margin: -1px 0;
1746
border-style: solid none;
1747
}
1748
}
1749
}
1750
}
1751
}
1752
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1754
background-color: $base_color;
1755
entry:not(.search),
1757
spinbutton:not(.vertical) { @extend %entry.flat; }
1758
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1760
button.combo { @extend %combo_flat; }
1762
}
1763
}
1764
/**************
1767
* Scrollbars *
1768
**************/
1769
scrollbar {
1770
$_slider_min_length: 24px;
1771
// disable steppers
1773
@at-root * {
1774
-GtkScrollbar-has-backward-stepper: false;
1775
-GtkScrollbar-has-forward-stepper: false;
1776
}
1777
transition: $longer_transition;
1779
background-color: $base_color;
1780
background-clip: $extra_background_clip;
1781
// scrollbar border
1783
&.top { border-bottom: 1px solid $border_color; }
1784
&.bottom { border-top: 1px solid $border_color; }
1785
&.left { border-right: 1px solid $border_color; }
1786
&.right { border-left: 1px solid $border_color; }
1787
// slider
1789
slider {
1790
transition: $shorter_transition, margin 0, border-width 0;
1791
min-width: 8px;
1792
min-height: 8px;
1793
border: 4px solid transparent;
1794
border-radius: $circular_radius;
1795
background-clip: padding-box;
1796
background-color: $tertiary_fg_color;
1797
&:hover { background-color: $secondary_fg_color; }
1799
&:active { background-color: $fg_color; }
1801
&:disabled { background-color: $disabled_tertiary_fg_color; }
1803
}
1804
&.fine-tune {
1806
slider {
1807
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1808
min-width: 4px;
1809
min-height: 4px;
1810
}
1811
&.horizontal slider { margin: 2px 0; }
1813
&.vertical slider { margin: 0 2px; }
1815
}
1816
&.overlay-indicator {
1818
&:not(.dragging):not(.hovering) {
1819
border-color: transparent;
1820
background-color: transparent;
1821
slider {
1823
min-width: 4px;
1824
min-height: 4px;
1825
margin: 4px - 1px;
1826
border: 1px solid scale-alpha($base_color, $lower_opacity);
1827
}
1828
button {
1830
min-width: 4px;
1831
min-height: 4px;
1832
margin: 4px - 1px;
1833
border: 1px solid scale-alpha($base_color, $lower_opacity);
1834
border-radius: $circular_radius;
1835
background-color: $tertiary_fg_color;
1836
background-clip: padding-box;
1837
-gtk-icon-source: none;
1838
&:disabled { background-color: $disabled_tertiary_fg_color; }
1840
}
1841
&.horizontal {
1843
slider { min-width: $_slider_min_length; }
1844
button { min-width: 8px; }
1846
}
1847
&.vertical {
1849
slider { min-height: $_slider_min_length; }
1850
button { min-height: 8px; }
1852
}
1853
}
1854
&.dragging,
1856
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1857
}
1858
&.horizontal slider { min-width: $_slider_min_length; }
1860
&.vertical slider { min-height: $_slider_min_length; }
1862
// button styling
1864
button {
1865
@extend %simple_flat_button;
1866
min-width: 16px;
1868
min-height: 16px;
1869
padding: 0;
1870
border-radius: 0;
1871
}
1872
// button icons
1874
&.vertical {
1875
button {
1876
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1877
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1879
}
1880
}
1881
&.horizontal {
1883
button {
1884
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1885
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1887
}
1888
}
1889
}
1890
/**********
1893
* Switch *
1894
**********/
1895
switch {
1896
transition: $longer_transition;
1897
margin: $container_padding 0;
1898
border: 4px solid transparent;
1899
border-radius: $circular_radius;
1900
background-color: $fill_color;
1901
background-clip: padding-box;
1902
font-size: 0;
1903
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1905
&:checked {
1907
background-color: scale-alpha($accent_color, 0.5);
1908
&:disabled {
1910
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1911
color: $disabled_fg_color;
1912
}
1913
}
1914
slider {
1916
@include entry(normal);
1917
transition: $longer_transition, $shadow_transition, margin 0;
1919
min-width: $small_size;
1920
min-height: $small_size;
1921
margin: -4px 0 -4px -4px;
1922
border-radius: $circular_radius;
1923
-gtk-outline-radius: $circular_radius;
1924
}
1925
&:hover slider { @include entry(focus); }
1927
&:checked slider {
1929
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1930
animation: needs_attention $longer_duration $deceleration_curve;
1931
margin: -4px -4px -4px 0;
1932
background-color: $accent_color;
1933
color: $inverse_fg_color;
1934
}
1935
&:disabled slider { @include entry(disabled); }
1937
&:checked:disabled slider { animation: none; }
1939
row:selected & {
1941
}
1942
}
1943
/*************************
1946
* Check and Radio items *
1947
*************************/
1948
// draw regular check and radio items using our PNG assets
1949
// all assets are rendered from assets.svg. never add pngs directly
1950
// selection-mode
1952
@each $s, $as in ('', '-unchecked'),
1953
(':checked', '-checked') {
1954
.view.content-view.check#{$s}:not(list) {
1955
margin: 8px;
1956
box-shadow: none;
1957
background-color: transparent;
1958
background-image: none;
1959
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1960
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1961
-gtk-icon-shadow: $shadow_1;
1962
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1964
}
1965
}
1966
checkbutton.text-button,
1968
radiobutton.text-button {
1969
// this is for a nice focus on check and radios text
1970
padding: 2px;
1971
outline-offset: 0;
1972
label:not(:only-child) { margin: 0 4px; }
1974
}
1975
check,
1977
radio {
1978
min-height: 24px;
1979
min-width: 24px;
1980
margin: -($large_size - 24px) / 2;
1981
padding: ($large_size - 24px) / 2;
1982
@extend %simple_flat_button;
1984
@extend %circular_button;
1986
&:checked, &:indeterminate {
1988
color: $accent_color;
1989
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1991
}
1992
// &:only-child { margin: -12px; }
1994
row &:not(:checked):not(:indeterminate) {
1996
color: gtkalpha(currentColor, $secondary_opacity);
1997
&:hover, &:active { color: currentColor; }
1999
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
2001
}
2002
menu menuitem & {
2004
transition: none;
2005
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2006
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2008
&, &:hover, &:disabled {
2010
box-shadow: none;
2011
// color: inherit;
2012
}
2013
}
2014
}
2015
%check,
2017
check {
2018
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2019
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2020
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2022
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2023
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2025
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2026
}
2027
$radio_indicator: 10px / $large_size / 2;
2029
$radio_radius_slice: #{$large_size / 2px};
2030
$radio_radius_width: #{$large_size / 2};
2031
%radio,
2033
radio {
2034
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2035
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2036
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2038
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2039
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2041
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2042
border-image: -gtk-gradient(radial,
2044
center center, 0,
2045
center center, 0.001,
2046
to($accent_color),
2047
to(transparent))
2048
$radio_radius_slice / $radio_radius_width;
2049
&:checked {
2051
border-image: -gtk-gradient(radial,
2052
center center, 0,
2053
center center, $radio_indicator,
2054
to($accent_color),
2055
to(transparent))
2056
$radio_radius_slice / $radio_radius_width;
2057
}
2058
&:checked:disabled {
2060
border-image: -gtk-gradient(radial,
2061
center center, 0,
2062
center center, $radio_indicator,
2063
to(scale-alpha($accent_color, $disabled_opacity)),
2064
to(transparent))
2065
$radio_radius_slice / $radio_radius_width;
2066
}
2067
&:indeterminate:checked {
2069
border-image: -gtk-gradient(radial,
2070
center center, 0,
2071
center center, 0.001,
2072
to($accent_color),
2073
to(transparent))
2074
$radio_radius_slice / $radio_radius_width;
2075
}
2076
}
2077
// ANIMATION:
2079
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2080
// the transformation is set on the active state and it get reset on the checked state.
2081
check:not(:indeterminate):not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2082
// radio:not(:indeterminate):not(:checked):active { -gtk-icon-transform: scale(0); }
2084
check:indeterminate:not(:checked):active,
2086
radio:indeterminate:not(:checked):active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2087
check:not(:checked),
2089
radio:not(:checked) {
2090
& {
2091
transition: $longer_transition,
2092
background-size $ripple_duration $deceleration_curve,
2093
background-image $ripple_duration * 2 $deceleration_curve,
2094
-gtk-icon-transform 0;
2095
}
2096
&:active {
2098
transition: $longer_transition,
2099
background-size 0,
2100
background-image 0,
2101
-gtk-icon-transform 0;
2102
}
2103
}
2104
menu menuitem {
2106
check,
2107
radio {
2108
&:checked, &:indeterminate { transition: none; }
2109
}
2110
}
2111
treeview.view check,
2113
treeview.view radio {
2114
padding: 0;
2115
&:hover {
2117
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2118
&:disabled { box-shadow: none; }
2120
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2122
}
2123
& {
2125
color: $secondary_fg_color;
2126
&:hover, &:active { color: $fg_color; }
2128
&:disabled { color: $disabled_secondary_fg_color; }
2130
&:checked, &:indeterminate { color: $accent_color; }
2132
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2134
}
2135
&:selected {
2137
color: $secondary_inverse_fg_color;
2138
&:hover, &:active { color: $inverse_fg_color; }
2140
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2142
&:checked, &:indeterminate { color: $accent_color; }
2144
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2146
}
2147
}
2148
treeview.view radio:checked {
2150
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2151
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2152
border-image: none;
2153
}
2154
/************
2157
* GtkScale *
2158
************/
2159
scale {
2160
// sizing
2161
$_marks_lenght: 8px;
2162
$_marks_distance: 8px;
2163
$slider_size: 24px;
2165
$marks_slider_size: 30px;
2166
$slider_margin: -($slider_size - $bar_size) / 2;
2168
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2169
$color_slider_margin: -($slider_size) / 2;
2171
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2172
min-height: $medium_size - $slider_size;
2174
min-width: $medium_size - $slider_size;
2175
padding: ($slider_size / 2);
2176
* { transition: $longer_transition; }
2178
// the slider is inside the trough, so to have make it bigger there's a negative margin
2180
slider {
2181
min-height: $slider_size;
2182
min-width: $slider_size;
2183
margin: $slider_margin;
2184
}
2185
// the backing bit
2187
trough {
2188
outline-offset: 2px;
2189
background-color: $fill_color;
2190
&:disabled { color: $disabled_fg_color; }
2192
}
2193
// the colored part of the backing bit
2195
highlight {
2196
background-color: $accent_color;
2197
&:disabled { background-color: transparent; }
2199
}
2200
// this is another differently styled part of the backing bit, the most relevant use case is for example
2202
// in media player to indicate how much video stream as been cached
2203
fill {
2204
background-color: $fill_color;
2205
&:disabled { background-color: transparent; }
2207
}
2208
slider {
2210
transition: all $shorter_duration $standard_curve;
2211
// border-radius: 100%;
2212
// background-color: $accent_color;
2213
background-repeat: no-repeat;
2214
background-position: center;
2215
@each $s, $as in ('', ''),
2217
(':disabled', '-disabled') {
2218
&#{$s} {
2219
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2220
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2222
}
2223
}
2224
background-size: calc(100% - 8px);
2226
&:hover { background-size: calc(100% - 4px); }
2228
&:active { background-size: calc(100% - 0px); }
2230
}
2231
// click-and-hold the slider to activate
2233
&.fine-tune {
2234
// to make the slider shrink in fine-tune mode
2235
slider { background-size: calc(100% - 12px); }
2236
}
2237
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2239
marks {
2241
color: $fill_color;
2242
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2244
(bottom, bottom, top),
2245
(top, left, right),
2246
(bottom, right, left) {
2247
&.#{$marks_class} {
2248
margin-#{$marks_margin}: $_marks_distance;
2249
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2250
}
2251
}
2252
}
2253
&.horizontal {
2255
indicator {
2256
min-height: $_marks_lenght;
2257
min-width: 1px;
2258
}
2259
}
2260
&.vertical {
2262
indicator {
2263
min-height: 1px;
2264
min-width: $_marks_lenght;
2265
}
2266
}
2267
// *WARNING* scale with marks madness following
2269
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2271
('vertical', 'vert') {
2272
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2273
('marks-after', 'marks-after:not(.marks-before)') {
2274
&.#{$dir_class}.#{$marks_class} {
2275
slider {
2276
@each $state, $state_infix in ('', ''),
2277
(':disabled', '-disabled') {
2278
&#{$state} {
2279
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2280
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2282
}
2283
}
2284
@if $dir_class == 'horizontal' {
2286
min-height: $marks_slider_size;
2287
min-width: $slider_size;
2288
@if $marks_infix == 'marks-before' {
2290
margin-top: $marks_slider_margin;
2291
background-position: center calc(100% - 4px);
2293
&:hover { background-position: center calc(100% - 2px); }
2295
&:active { background-position: center calc(100% - 0px); }
2297
}
2298
@if $marks_infix == 'marks-after' {
2300
margin-bottom: $marks_slider_margin;
2301
background-position: center calc(4px);
2303
&:hover { background-position: center calc(2px); }
2305
&:active { background-position: center calc(0px); }
2307
}
2308
}
2309
@if $dir_class == 'vertical' {
2311
min-height: $slider_size;
2312
min-width: $marks_slider_size;
2313
@if $marks_infix == 'marks-before' {
2315
margin-left: $marks_slider_margin;
2316
background-position: calc(4px) center;
2318
&:hover { background-position: calc(2px) center; }
2320
&:active { background-position: calc(0px) center; }
2322
}
2323
@if $marks_infix == 'marks-after' {
2325
margin-right: $marks_slider_margin;
2326
background-position: calc(100% - 4px) center;
2328
&:hover { background-position: calc(100% - 2px) center; }
2330
&:active { background-position: calc(100% - 0px) center; }
2332
}
2333
}
2334
}
2335
&.fine-tune slider {
2337
@if $dir_class == 'horizontal' {
2338
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2339
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2341
}
2342
@if $dir_class == 'vertical' {
2344
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2345
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2347
}
2348
}
2349
}
2350
}
2351
}
2352
&.color {
2354
min-height: 0;
2355
min-width: 0;
2356
&.horizontal {
2358
padding: 0 0 12px 0;
2359
slider {
2361
&:dir(ltr), &:dir(rtl) { // specificity bump
2362
margin-bottom: $color_slider_margin;
2363
margin-top: $color_marks_slider_margin;
2364
}
2365
}
2366
}
2367
&.vertical {
2369
&:dir(ltr) {
2370
padding: 0 0 0 12px;
2371
slider {
2373
margin-left: $color_slider_margin;
2374
margin-right: $color_marks_slider_margin;
2375
}
2376
}
2377
&:dir(rtl) {
2379
padding: 0 12px 0 0;
2380
slider {
2382
margin-right: $color_slider_margin;
2383
margin-left: $color_marks_slider_margin;
2384
}
2385
}
2386
}
2387
}
2388
}
2389
/*****************
2392
* Progress bars *
2393
*****************/
2394
progressbar {
2395
// sizing
2396
&.horizontal {
2397
trough,
2398
progress { min-height: $bar_size; }
2399
}
2400
&.vertical {
2402
trough,
2403
progress { min-width: $bar_size; }
2404
}
2405
// FIXME: insensitive state missing and some other state should be set probably
2407
color: $tertiary_fg_color;
2408
font-size: smaller;
2409
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2411
progress { background-color: $primary_color; }
2413
&.osd { // progressbar.osd used for epiphany page loading progress
2415
// min-width: $bar_size;
2416
// min-height: $bar_size;
2417
// background-color: transparent;
2418
// trough { background-color: transparent; }
2420
progress {
2422
}
2423
}
2424
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2426
}
2427
/*************
2430
* Level Bar *
2431
*************/
2432
levelbar {
2433
block {
2434
min-width: $medium_size;
2435
min-height: $bar_size;
2436
}
2437
&.vertical block {
2439
min-width: $bar_size;
2440
min-height: $medium_size;
2441
}
2442
trough {
2444
padding: 2px;
2445
border-radius: 2px;
2446
@include entry(normal);
2448
&:disabled { @include entry(disabled); }
2450
}
2451
&.horizontal.discrete block { margin: 0 1px; }
2453
&.vertical.discrete block { margin: 1px 0; }
2455
&.horizontal.discrete trough { padding: 2px 1px; }
2457
&.vertical.discrete trough { padding: 1px 2px; }
2459
block {
2461
&.low {
2462
background-color: $warning_color;
2463
}
2464
&.high,
2466
&:not(.empty) {
2467
background-color: $primary_color;
2468
}
2469
&.full {
2471
background-color: $success_color;
2472
}
2473
&.empty {
2475
background-color: $fill_color;
2476
color: $disabled_fg_color;
2477
}
2478
}
2479
}
2480
/****************
2483
* Print dialog *
2484
*****************/
2485
printdialog {
2486
paper {
2487
padding: 0;
2488
border: 1px solid $border_color;
2489
background-color: $base_color;
2490
color: $fg_color;
2491
}
2492
.dialog-action-box { margin: 12px; }
2494
}
2495
/**********
2498
* Frames *
2499
**********/
2500
frame > border,
2501
.frame {
2502
margin: 0;
2503
padding: 0;
2504
border: 1px solid $border_color;
2505
border-radius: 0;
2506
box-shadow: none;
2507
&.flat { border-style: none; }
2509
}
2510
frame.flat > border { @extend .frame.flat; } // for backporting
2512
actionbar > revealer > box {
2514
padding: $container_padding;
2515
border-top: 1px solid $border_color;
2516
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2518
}
2519
scrolledwindow {
2521
viewport.frame { // avoid double borders when viewport inside scrolled window
2522
border-style: none;
2523
}
2524
// This is used when content is touch-dragged past boundaries.
2526
// draws a box on top of the content, the size changes programmatically.
2527
@at-root overshoot {
2528
&.top { @include overshoot(top); }
2529
&.bottom { @include overshoot(bottom); }
2531
&.left { @include overshoot(left); }
2533
&.right { @include overshoot(right); }
2535
}
2536
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2538
@at-root undershoot {
2539
&.top { @include undershoot(top); }
2540
&.bottom { @include undershoot(bottom); }
2542
&.left { @include undershoot(left); }
2544
&.right { @include undershoot(right); }
2546
}
2547
@at-root junction { // the small square between two scrollbars
2549
border-style: solid none none solid;
2550
border-width: 1px;
2551
border-color: $border_color;
2552
background-color: $base_color;
2553
&:dir(rtl) { border-style: solid solid none none; }
2555
}
2556
}
2557
// vbox and hbox separators
2559
separator {
2560
min-width: 1px;
2561
min-height: 1px;
2562
background-color: $border_color;
2563
}
2564
/*********
2567
* Lists *
2568
*********/
2569
list {
2570
border-color: $border_color;
2571
background-color: $base_color;
2572
row { padding: 2px; }
2574
}
2575
// FIXME
2577
$row_transition: $longer_transition, background-color 0, color 0;
2578
row {
2580
&.activatable {
2581
transition: $row_transition,
2582
background-size $ripple_duration $deceleration_curve,
2583
background-image $ripple_duration * 2 $deceleration_curve;
2584
box-shadow: inset 0 0 0 9999px transparent;
2585
background-image: radial-gradient(circle farthest-corner at center,
2586
transparent 10%,
2587
transparent 0%);
2588
background-repeat: no-repeat;
2589
background-position: center;
2590
background-size: 1000% 1000%;
2591
&:hover {
2593
transition: $row_transition,
2594
box-shadow 0,
2595
background-size $ripple_duration $deceleration_curve,
2596
background-image $ripple_duration * 2 $deceleration_curve;
2597
box-shadow: inset 0 0 0 9999px $row_fill_color;
2598
}
2599
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2601
&:active {
2602
transition: $row_transition,
2603
background-size 0,
2604
background-image 0;
2605
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2606
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2607
background-image: radial-gradient(circle farthest-corner at center,
2608
$semi_fill_color 10%,
2609
transparent 0%);
2610
background-size: 0% 0%;
2611
}
2612
}
2613
&:selected { @extend %selected_items; }
2615
}
2616
/*********************
2619
* App Notifications *
2620
*********************/
2621
.app-notification {
2622
@extend %osd;
2623
@extend toolbar.osd;
2625
margin: 8px;
2627
button { @extend %button_basic.flat; }
2629
&.frame,
2631
border { border-style: none; }
2632
}
2633
/*************
2636
* Expanders *
2637
*************/
2638
expander {
2639
arrow {
2640
transition: all $shorter_duration $standard_curve;
2641
min-width: 16px;
2642
min-height: 16px;
2643
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2644
-gtk-icon-transform: rotate(-90deg);
2645
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2647
&:checked { -gtk-icon-transform: unset; }
2649
color: $secondary_fg_color;
2651
&:hover, &:active { color: $fg_color; }
2653
&:disabled { color: $disabled_secondary_fg_color; }
2655
&:selected {
2657
color: $secondary_inverse_fg_color;
2658
&:hover, &:active { color: $inverse_fg_color; }
2660
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2662
}
2663
}
2664
}
2665
/************
2668
* Calendar *
2669
***********/
2670
calendar {
2671
padding: 1px;
2672
border: 1px solid $border_color;
2673
color: $fg_color;
2674
&:disabled { color: $disabled_fg_color; }
2676
&:selected {
2678
@extend %selected_items;
2679
border-radius: 2px + 1px;
2681
}
2682
&.header {
2684
border-style: none none solid;
2685
border-radius: 0;
2686
}
2687
&.button { @extend %simple_flat_button; }
2689
&.highlight {
2691
color: gtkalpha(currentColor, $tertiary_opacity);
2692
font-weight: 500;
2693
}
2694
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2696
}
2697
/***********
2700
* Dialogs *
2701
***********/
2702
messagedialog { // Message Dialog styling
2703
&.background { background-color: $lighter_bg_color; }
2704
.titlebar {
2706
min-height: $small_size;
2707
border-style: none;
2708
box-shadow: inset 0 1px $highlight_color;
2709
background-color: $lighter_bg_color;
2710
color: $fg_color;
2711
&:backdrop { color: $secondary_fg_color; }
2713
}
2714
&.csd { // rounded bottom border styling for csd version
2716
&.background {
2717
// bigger radius for better antialiasing
2718
border-bottom-left-radius: 2px;
2719
border-bottom-right-radius: 2px;
2720
}
2721
.dialog-action-area button {
2723
padding: 8px 16px;
2724
border-top: 1px solid $border_color;
2725
border-radius: 0;
2726
@extend %simple_flat_button;
2728
&:first-child { border-bottom-left-radius: 2px; }
2730
&:last-child { border-bottom-right-radius: 2px; }
2732
}
2733
}
2734
}
2735
filechooser {
2737
.dialog-action-box { border-top: 1px solid $border_color; }
2738
#pathbarbox {
2740
border-bottom: 1px solid $border_color;
2741
background-color: $bg_color;
2742
}
2743
}
2744
filechooserbutton:drop(active) {
2746
box-shadow: none;
2747
}
2748
/***********
2751
* Sidebar *
2752
***********/
2753
.sidebar {
2754
border-style: none;
2755
background-color: $lighter_bg_color;
2756
@at-root %sidebar_left,
2758
&:dir(ltr),
2759
&.left,
2760
&.left:dir(rtl) {
2761
border-right: 1px solid $border_color;
2762
border-left-style: none;
2763
}
2764
@at-root %sidebar_right,
2766
&:dir(rtl),
2767
&.right {
2768
border-left: 1px solid $border_color;
2769
border-right-style: none;
2770
}
2771
list { background-color: transparent; }
2773
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2775
}
2776
stacksidebar {
2778
&.sidebar {
2779
&:dir(ltr),
2780
&.left,
2781
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2782
&:dir(rtl),
2784
&.right { list { @extend %sidebar_right; }}
2785
}
2786
row {
2788
padding: 10px 4px;
2789
> label {
2791
padding-left: 6px;
2792
padding-right: 6px;
2793
}
2794
&.needs-attention > label { @extend %needs_attention; }
2796
}
2797
}
2798
/****************
2801
* File chooser *
2802
****************/
2803
placessidebar {
2804
> viewport.frame { border-style: none; }
2805
list { padding: (4px - 3px) 0 4px; }
2807
row {
2809
// Needs overriding of the GtkListBoxRow padding
2810
min-height: 32px;
2811
margin: -1px 0; // Remove unknown margins
2812
padding: 0;
2813
// Using margins/padding directly in the SidebarRow
2815
// will make the animation of the new bookmark row jump
2816
> revealer { padding: 0 12px; }
2817
&:selected { color: $inverse_fg_color; }
2819
&:disabled { color: $disabled_fg_color; }
2821
image.sidebar-icon {
2823
opacity: $tertiary_opacity; // dim the device icons
2824
&:dir(ltr) { padding-right: 8px; }
2826
&:dir(rtl) { padding-left: 8px; }
2827
}
2828
label.sidebar-label {
2830
&:dir(ltr) { padding-right: 2px; }
2831
&:dir(rtl) { padding-left: 2px; }
2832
}
2833
@at-root button.sidebar-button {
2835
@extend %simple_flat_button;
2836
@extend %small_button;
2838
row:selected & {
2840
}
2841
}
2842
&.sidebar-placeholder-row {
2844
min-height: 2px;
2845
padding: 0 8px;
2846
background-image: image($accent_color);
2847
background-clip: content-box;
2848
}
2849
&.sidebar-new-bookmark-row { color: $accent_color; }
2851
&:drop(active):not(:disabled) {
2853
box-shadow: inset 0 0 0 2px $accent_color;
2854
&:selected {
2856
// background-color: $accent_color;
2857
// color: $inverse_fg_color;
2858
}
2859
}
2860
}
2861
}
2862
placesview {
2864
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2865
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2867
// this selects the "connect to server" label
2869
> actionbar > revealer > box > label {
2870
padding-left: 8px;
2871
padding-right: 8px;
2872
}
2873
}
2874
/*********
2877
* Paned *
2878
*********/
2879
paned {
2880
> separator {
2881
min-width: 1px;
2882
min-height: 1px;
2883
-gtk-icon-source: none; // defeats the ugly default handle decoration
2884
border-style: none; // just to be sure
2885
background-color: transparent;
2886
// workaround, using background istead of a border since the border will get rendered twice (?)
2887
background-image: image($border_color);
2888
background-size: 1px 1px;
2889
background-clip: content-box; // avoids borders image being rendered twice (?)
2890
&.wide {
2892
min-width: 6px;
2893
min-height: 6px;
2894
background-color: $bg_color;
2895
background-image: image($border_color), image($border_color);
2896
background-size: 1px 1px, 1px 1px;
2897
}
2898
}
2899
&.horizontal > separator {
2901
background-repeat: repeat-y;
2902
&:dir(ltr) {
2904
margin: 0 -8px 0 0;
2905
padding: 0 8px 0 0;
2906
background-position: left;
2907
}
2908
&:dir(rtl) {
2910
margin: 0 0 0 -8px;
2911
padding: 0 0 0 8px;
2912
background-position: right;
2913
}
2914
&.wide {
2916
margin: 0;
2917
padding: 0;
2918
background-repeat: repeat-y, repeat-y;
2919
background-position: left, right;
2920
}
2921
}
2922
&.vertical > separator {
2924
margin: 0 0 -8px 0;
2925
padding: 0 0 8px 0;
2926
background-repeat: repeat-x;
2927
background-position: top;
2928
&.wide {
2930
margin: 0;
2931
padding: 0;
2932
background-repeat: repeat-x, repeat-x;
2933
background-position: bottom, top;
2934
}
2935
}
2936
}
2937
/**************
2940
* GtkInfoBar *
2941
**************/
2942
infobar {
2943
border-style: none;
2944
&.info { background-color: $info_bg_color; }
2946
&.question { background-color: $question_bg_color; }
2948
&.warning { background-color: $warning_bg_color; }
2950
&.error { background-color: $error_bg_color; }
2952
&.info,
2954
&.question,
2955
&.warning,
2956
&.error {
2957
> label, & { color: $inverse_fg_color; }
2958
button { @extend %button_selected; }
2960
selection {}
2962
*:link { @extend %link_selected; }
2964
}
2965
}
2966
/************
2969
* Tooltips *
2970
************/
2971
tooltip {
2972
&.background {
2973
// background-color needs to be set this way otherwise it gets drawn twice
2974
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2975
box-shadow: inset 0 1px $highlight_color;
2976
background-color: scale-alpha($base_color, $higher_opacity);
2977
}
2978
// @extend %osd;
2980
// padding: 4px; /* not working */
2982
border-radius: 2px;
2983
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2984
&:not(.csd) {
2986
border: 1px solid $border_color;
2987
border-radius: 2px + 1px;
2988
background-clip: $extra_background_clip;
2989
}
2990
// FIXME: we need a border or tooltips vanish on black background.
2992
decoration { background-color: transparent; }
2993
label {
2995
// tooltip label has already 6px margins
2996
min-height: 32px - 6px * 2;
2997
padding: 0 8px - 6px;
2998
}
2999
* {
3001
// workaround for Eclipse.
3002
// do not include any declaration here.
3003
// padding: 0;
3004
// background-color: transparent;
3005
// color: inherit;
3006
}
3007
}
3008
/*****************
3011
* Color Chooser *
3012
*****************/
3013
colorswatch {
3014
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3015
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3016
// applied to the overlay box.
3017
// base color corners rounding
3019
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3020
// sports a bigger radius.
3021
// nth-child is needed by the custom color strip.
3022
&.top {
3024
border-top-left-radius: $material_radius + 0.5px;
3025
border-top-right-radius: $material_radius + 0.5px;
3026
overlay {
3028
border-top-left-radius: $material_radius;
3029
border-top-right-radius: $material_radius;
3030
}
3031
}
3032
&.bottom {
3034
border-bottom-left-radius: $material_radius + 0.5px;
3035
border-bottom-right-radius: $material_radius + 0.5px;
3036
overlay {
3038
border-bottom-left-radius: $material_radius;
3039
border-bottom-right-radius: $material_radius;
3040
}
3041
}
3042
&.left,
3044
&:first-child:not(.top) {
3045
border-top-left-radius: $material_radius + 0.5px;
3046
border-bottom-left-radius: $material_radius + 0.5px;
3047
overlay {
3049
border-top-left-radius: $material_radius;
3050
border-bottom-left-radius: $material_radius;
3051
}
3052
}
3053
&.right,
3055
&:last-child:not(.bottom) {
3056
border-top-right-radius: $material_radius + 0.5px;
3057
border-bottom-right-radius: $material_radius + 0.5px;
3058
overlay {
3060
border-top-right-radius: $material_radius;
3061
border-bottom-right-radius: $material_radius;
3062
}
3063
}
3064
&.dark overlay { color: $light_fg_color; }
3066
&.light overlay { color: $dark_fg_color; }
3068
&.dark { color: $light_fg_color; } // for focus ring
3070
&.light { color: $dark_fg_color; } // for focus ring
3072
&:drop(active) {
3074
box-shadow: none;
3075
&.light overlay {
3077
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3078
}
3079
&.dark overlay {
3081
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3082
}
3083
}
3084
overlay {
3086
transition: $shadow_transition;
3087
box-shadow: $shadow_1;
3088
&:hover { box-shadow: $shadow_2; }
3090
}
3091
&#add-color-button {
3093
border-radius: $material_radius $material_radius 0 0;
3094
color: $light_fg_color; // for focus ring
3095
&:only-child { border-radius: $material_radius; }
3097
overlay {
3099
background-image: linear-gradient(to right,
3100
$error_bg_color 25%,
3101
$warning_bg_color 25%, $warning_bg_color 50%,
3102
$info_bg_color 50%, $info_bg_color 75%,
3103
$question_bg_color 75%);
3104
color: $light_fg_color;
3105
}
3106
}
3107
&:disabled {
3109
opacity: $disabled_opacity;
3110
overlay { box-shadow: none; }
3112
}
3113
row:selected & {
3115
}
3116
&#editor-color-sample {
3118
border-radius: $material_radius + 0.5px;
3119
overlay { border-radius: $material_radius; }
3121
// overlay:hover { box-shadow: $shadow_1; }
3123
}
3124
}
3125
// colorscale popup
3127
colorchooser .popover.osd {
3128
transition: $shadow_transition;
3129
border-radius: 2px;
3130
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3131
background-color: $base_color;
3132
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3134
spinbutton:not(.vertical) { @extend %entry.flat; }
3136
}
3137
/********
3140
* Misc *
3141
********/
3142
// content view (grid/list)
3143
.content-view {
3144
background-color: $bg_color;
3145
// &:hover { -gtk-icon-effect: highlight; }
3147
rubberband, .rubberband { @extend rubberband; }
3149
}
3150
.scale-popup {
3152
.osd & { @extend %osd; }
3153
.osd & button.flat { // FIXME: quick hack, redo properly
3155
}
3156
button { // +/- buttons on GtkVolumeButton popup
3158
}
3159
}
3160
/**********************
3163
* Window Decorations *
3164
*********************/
3165
decoration {
3166
transition: $shadow_transition;
3167
border-radius: 2px 2px 0 0;
3168
box-shadow: $shadow_4, 0 16px 16px transparent;
3169
// FIXME rationalize shadows
3171
// this is used for the resize cursor area
3173
margin: 8px;
3174
&:backdrop {
3176
// the transparent shadow here is to enforce that the shadow extents don't
3177
// change when we go to backdrop, to prevent jumping windows.
3178
// The biggest shadow should be in the same order then in the active state
3179
// or the jumping will happen during the transition.
3180
box-shadow: $shadow_2, 0 16px 16px transparent;
3181
}
3182
.maximized &,
3184
.fullscreen &,
3185
.tiled & { border-radius: 0; }
3186
.popup & { box-shadow: none; }
3188
// server-side decorations as used by mutter
3190
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3191
.csd.popup & {
3193
border-radius: 2px;
3194
box-shadow: $shadow_2;
3195
}
3196
tooltip.csd & {
3198
border-radius: 2px;
3199
box-shadow: $shadow_2;
3200
}
3201
messagedialog.csd & {
3203
border-radius: 2px;
3204
// box-shadow: $shadow_4, 0 16px 16px transparent;
3205
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3207
}
3208
.solid-csd & {
3210
margin: 0;
3211
// padding: 4px;
3212
border-radius: 0;
3213
box-shadow: none;
3214
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3215
background-color: $titlebar_bg_color;
3216
}
3217
}
3218
// Window Close button
3220
button.titlebutton {
3221
// @extend %simple_flat_button;
3222
@extend %circular_button;
3224
.selection-mode & {
3226
}
3227
}
3228
// catch all extend :)
3231
%selected_items {
3233
background-color: $primary_color;
3234
@at-root %nobg_selected_items, & {
3236
color: $inverse_fg_color;
3237
&:disabled { color: $disabled_inverse_fg_color; }
3239
}
3240
}
3241
.monospace { font-family: monospace; }
3243
/**********************
3246
* Touch Copy & Paste *
3247
*********************/
3248
// touch selection handlebars for the Popover.osd above
3249
cursor-handle {
3250
border-radius: $circular_radius;
3251
background-color: $accent_color;
3252
background-image: none;
3253
&.top:dir(ltr), &.bottom:dir(rtl) {
3255
padding-left: 6px;
3256
border-top-right-radius: 0;
3257
}
3258
&.bottom:dir(ltr), &.top:dir(rtl) {
3260
padding-right: 6px;
3261
border-top-left-radius: 0;
3262
}
3263
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3265
-GtkWidget-text-handle-width: 24;
3266
-GtkWidget-text-handle-height: 30;
3267
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3269
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3270
url('#{$_url}@2.png'));
3271
}
3272
}
3273
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3275
// shortcut window keys
3277
.keycap {
3278
min-width: 28px - 8px * 2;
3279
min-height: 28px - 2px;
3280
margin-top: 2px;
3281
padding-bottom: 2px;
3282
padding-left: 8px;
3283
padding-right: 8px;
3284
border: solid 1px $border_color;
3286
border-radius: 2px + 1px;
3287
box-shadow: inset 0 -2px $border_color;
3288
background-color: $base_color;
3289
color: $fg_color;
3290
font-size: smaller;
3291
}
3292
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3294
transition: $longer_transition;
3295
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3296
caret-color: $accent_color;
3297
}
3298
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3300
stackswitcher button.circular,
3302
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3303
min-width: $medium_size;
3304
min-height: $medium_size;
3305
padding: 0;
3306
}
3307