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
check:not(:indeterminate):checked { @extend %check_checked; }
662
// radio:not(:indeterminate):checked { @extend %radio_checked; }
664
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
666
}
667
modelbutton.flat arrow {
669
background: none;
670
&:hover { background: none; }
672
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
674
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
676
}
677
button.color {
679
min-height: $small_size;
680
min-width: $small_size;
681
padding: $container_padding;
682
colorswatch:only-child {
684
// &, overlay { border-radius: 0; }
685
}
686
}
687
/*********
690
* Links *
691
*********/
692
*:link {
693
&, &:hover, &:active { color: $link_color; }
694
&:visited {
696
&, &:hover, &:active { color: $visited_link_color; }
697
}
698
@at-root %link_selected,
700
&:selected,
701
*:selected & { color: $inverse_fg_color; }
702
}
703
button:link,
705
button:visited {
706
@extend *:link;
707
> label { text-decoration-line: underline; }
709
}
710
/*****************
712
* GtkSpinButton *
713
*****************/
714
spinbutton {
715
&:not(.vertical) {
716
// in this horizontal configuration, the whole spinbutton
717
// behaves as the entry, so we extend the entry styling
718
// and nuke the style on the internal entry
719
@extend %entry;
720
padding: 0;
722
%spinbutton_entry,
724
entry {
725
min-width: $large_size - 8px * 2;
726
// reset all the other props since the spinbutton node is styled here
727
margin: 0;
728
border-image: none;
729
border-radius: 0;
730
box-shadow: none;
731
background-color: transparent;
732
//
733
// This will help to simplify spinbutton's code, but unfortunatelly
734
// doesn't work properly in :dir(rtl). It needs z-index property.
735
//
736
// min-width: $large_size - 8px;
737
//
738
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
739
//
740
// &:dir(ltr) {
741
// margin-right: -$spinbuttons_width;
742
// padding-right: $spinbuttons_width;
743
// }
744
//
745
// &:dir(rtl) {
746
// margin-left: -$spinbuttons_width;
747
// padding-left: $spinbuttons_width;
748
// }
749
}
750
button {
752
// margin: $container_padding;
753
border: solid $container_padding transparent;
754
@extend %simple_flat_button;
756
@extend %small_button;
758
&.up:dir(ltr),
760
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
761
&.up:dir(rtl),
763
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
764
}
765
}
766
// OSD horizontal
768
.osd &:not(.vertical) {
769
button {
770
}
771
}
772
// Vertical
774
&.vertical {
775
// in the vertical configuration, we treat the spinbutton
776
// as a box, and tweak the style of the entry in the middle
777
// so that it's linked
778
// FIXME: this should not be set at all, but otherwise it gets the wrong
780
// color
781
&:disabled { color: $disabled_fg_color; }
782
&:drop(active) {
784
box-shadow: none;
785
}
786
entry {
788
min-height: $medium_size;
789
min-width: $large_size;
790
padding: 0;
791
}
792
button {
794
min-height: $medium_size;
795
min-width: $large_size;
796
padding: 0;
797
@extend %simple_flat_button;
799
&.up { border-radius: 2px 2px 0 0; }
801
&.down { border-radius: 0 0 2px 2px; }
803
}
804
}
805
// OSD vertical
807
.osd &.vertical button:first-child {
808
}
809
// Misc
811
treeview &:not(.vertical) {
812
min-height: 0;
813
border-style: none;
814
border-radius: 0;
815
entry {
817
min-height: 0;
818
padding: 1px 2px;
819
}
820
}
821
}
822
/**************
825
* ComboBoxes *
826
**************/
827
combobox {
828
arrow {
829
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
830
min-height: 16px;
831
min-width: 16px;
832
}
833
button.combo:checked { transition: none; } // workaround for menuitem selection
835
button.combo cellview {
837
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
838
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
839
}
840
#gtk-combobox-popup-menu {
842
padding: 2px 0;
843
menuitem {
845
min-height: $medium_size - 2px * 2;
846
padding: 0 8px;
847
}
848
}
849
&.linked {
851
button:nth-child(2) {
852
&:dir(ltr) { @extend %linked:last-child; }
853
&:dir(rtl) { @extend %linked:first-child; }
854
}
855
}
856
&:drop(active) { // FIXME: untested
858
box-shadow: none;
859
// button.combo { @extend %button_basic:drop(active); }
861
}
862
}
863
.linked > combobox > box > button.combo {
865
// the combo is a composite widget so the way we do button linking doesn't
866
// work, special case needed. See
867
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
868
&:dir(ltr),
870
&:dir(rtl) { @extend %linked_middle; } // specificity bump
871
}
872
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
874
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
875
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
876
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
878
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
879
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
880
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
881
%combo_flat {
883
border-radius: 0;
884
background-image: none;
885
font-weight: inherit;
886
@include entry(flat-normal);
888
&:hover { box-shadow: inset 0 -2px $fill_color; }
890
&:checked {
892
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
893
$primary_color 100%,
894
transparent 0%)
895
0 0 2 / 0 0 2px;
896
}
897
&:disabled { color: $disabled_fg_color; }
899
}
900
/************
903
* Toolbars *
904
************/
905
toolbar {
906
-GtkWidget-window-dragging: true;
907
padding: $container_padding / 2;
908
background-color: $bg_color;
909
button { @extend %button_basic.flat; }
911
// on OSD
913
.osd & { background-color: transparent; }
914
// stand-alone OSD toolbars
916
&.osd {
917
transition: $shadow_transition;
918
padding: $container_padding;
919
border-radius: 2px;
920
box-shadow: $shadow_2, inset 0 1px $highlight_color;
921
background-color: $base_color;
922
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
924
&.left,
926
&.right,
927
&.top,
928
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
929
}
930
// toolbar separators
932
&.horizontal separator { margin: $container_padding / 2; }
933
&.vertical separator { margin: $container_padding / 2; }
934
&:not(.inline-toolbar):not(.osd) {
936
scale,
937
entry,
938
spinbutton,
939
button { margin: $container_padding / 2; }
940
.linked entry,
942
.linked spinbutton,
943
.linked button {
944
&:not(:first-child) { margin-left: 0; }
945
&:not(:last-child) { margin-right: 0; }
946
}
947
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
949
}
950
}
951
// searchbar, location-bar & inline-toolbar
953
.inline-toolbar {
954
padding: $container_padding;
955
border-style: solid;
956
border-width: 0 1px 1px;
957
border-color: $border_color;
958
background-color: $alt_base_color;
959
}
960
searchbar,
962
.location-bar {
963
padding: $container_padding;
964
border-style: solid;
965
border-width: 0 0 1px;
966
border-color: $border_color;
967
background-color: $bg_color;
968
background-clip: border-box;
969
}
970
/***************
973
* Header bars *
974
***************/
975
%titlebar,
976
headerbar {
977
transition: background-color $shorter_duration $deceleration_curve;
978
min-height: $large_size;
979
padding: 0 $container_padding;
980
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
981
background-color: $titlebar_bg_color;
982
color: $titlebar_fg_color;
983
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
985
&:backdrop {
987
color: $secondary_titlebar_fg_color;
988
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
990
}
991
.title {
993
transition: $longer_transition;
994
padding: 0 12px;
995
font-weight: bold;
996
}
997
.subtitle {
999
transition: $longer_transition;
1000
padding: 0 12px;
1001
font-size: smaller;
1002
@extend .dim-label;
1004
}
1005
button:not(.suggested-action):not(.destructive-action) {
1007
@extend %button_basic.flat;
1008
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1010
$titlebar_indicator_color 0%,
1011
transparent 0%)
1012
0 0 0 / 0 0 0px;
1013
&:checked {
1015
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1016
$titlebar_indicator_color 100%,
1017
transparent 0%)
1018
0 0 2 / 0 0 2px;
1019
&, &:disabled { background-color: transparent; }
1021
}
1022
}
1023
button.suggested-action, button.destructive-action {
1025
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1026
}
1027
&.selection-mode {
1029
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1030
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1031
transition: background-color 0.00001s $longer_duration;
1032
animation: header_ripple_effect $longer_duration $deceleration_curve;
1033
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1034
background-color: $primary_color;
1035
color: $inverse_fg_color;
1036
&:backdrop {
1038
color: $secondary_inverse_fg_color;
1039
}
1040
.subtitle:link { @extend *:link:selected; }
1042
button:not(.suggested-action):not(.destructive-action) {
1044
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1045
currentColor 0%,
1046
transparent 0%)
1047
0 0 0 / 0 0 0px;
1048
color: currentColor;
1049
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1051
&:checked {
1053
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1054
currentColor 100%,
1055
transparent 0%)
1056
0 0 2 / 0 0 2px;
1057
color: currentColor;
1058
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1060
}
1061
}
1062
.selection-menu {
1064
padding-left: 16px;
1065
padding-right: 16px;
1066
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1068
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1070
}
1071
}
1072
.fullscreen &,
1074
.tiled &,
1075
.maximized & {
1076
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1077
box-shadow: $shadow_1;
1078
}
1079
&.default-decoration {
1081
min-height: $small_size;
1082
padding: $container_padding;
1083
box-shadow: inset 0 1px $titlebar_highlight_color;
1084
.fullscreen &,
1086
.tiled &,
1087
.maximized & { box-shadow: none; }
1088
button.titlebutton {
1090
min-height: $small_size;
1091
min-width: $small_size;
1092
margin: 0;
1093
padding: 0;
1094
}
1095
// workaround for non-animatable buttons
1097
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1098
}
1099
.solid-csd & {
1101
&:dir(rtl), &:dir(ltr) { // specificity bump
1102
// margin-left: -2px;
1103
// margin-right: -2px;
1104
// margin-top: -2px;
1105
// border-radius: 0;
1106
// box-shadow: inset 0 1px $titlebar_highlight_color;
1107
}
1108
}
1109
}
1110
headerbar {
1112
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1113
entry,
1114
spinbutton,
1115
// separator,
1116
button {
1117
margin-top: $container_padding;
1118
margin-bottom: $container_padding;
1119
}
1120
switch {
1122
margin-top: $container_padding * 2;
1123
margin-bottom: $container_padding * 2;
1124
}
1125
// reset button margins of the spinbutton
1127
spinbutton button {
1128
margin-top: 0;
1129
margin-bottom: 0;
1130
}
1131
}
1132
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1134
border-top-left-radius: 2px;
1135
border-top-right-radius: 2px;
1136
}
1137
headerbar { // headerbar border rounding
1139
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1140
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1141
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1143
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1145
&:first-child, &:last-child {
1146
border-top-left-radius: 2px;
1147
border-top-right-radius: 2px;
1148
}
1149
}
1150
}
1151
.titlebar:not(headerbar) {
1153
window.csd > & {
1154
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1155
padding: 0;
1156
background-color: transparent;
1157
background-image: none;
1158
border-style: none;
1159
box-shadow: none;
1160
}
1161
> separator {
1163
background-color: $titlebar_bg_color;
1164
background-image: image($border_color);
1165
}
1166
@extend %titlebar;
1168
}
1169
/************
1172
* Pathbars *
1173
************/
1174
%pathbar_button,
1175
.path-bar button {
1176
padding-left: ($medium_size - 24px) / 2;
1177
padding-right: ($medium_size - 24px) / 2;
1178
label:not(:only-child) {
1180
&:first-child { margin-left: 4px; }
1181
&:last-child { margin-right: 4px; }
1183
}
1184
&.slider-button {
1186
padding-left: (24px - 16px) / 2;
1187
padding-right: (24px - 16px) / 2;
1188
}
1189
:not(headerbar) & {
1191
@extend %flat_button;
1192
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1194
$primary_color 0%,
1195
transparent 0%)
1196
0 0 0 / 0 0 0px;
1197
border-radius: 2px;
1198
&:checked {
1200
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1201
$primary_color 100%,
1202
transparent 0%)
1203
0 0 2 / 0 0 2px;
1204
&, &:disabled { background-color: transparent; }
1206
}
1207
}
1208
}
1209
/**************
1212
* Tree Views *
1213
**************/
1214
treeview.view {
1215
@at-root * {
1216
-GtkTreeView-horizontal-separator: 4;
1217
-GtkTreeView-grid-line-width: 1;
1218
-GtkTreeView-grid-line-pattern: '';
1219
-GtkTreeView-tree-line-width: 1;
1220
-GtkTreeView-tree-line-pattern: '';
1221
-GtkTreeView-expander-size: 16;
1222
}
1223
border-left-color: $fill_color; // this is actually the tree lines color,
1225
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1226
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1228
&.separator {
1230
min-height: 1px + 2px * 2;
1231
color: $border_color;
1232
}
1233
&:drop(active) {
1235
border-style: solid none;
1236
border-width: 1px;
1237
border-color: $accent_color;
1238
&.after { border-top-style: none; }
1240
&.before { border-bottom-style: none; }
1242
}
1243
&.expander {
1245
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1246
-gtk-icon-transform: rotate(-90deg);
1247
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1249
&:checked { -gtk-icon-transform: unset; }
1251
color: $secondary_fg_color;
1253
&:hover, &:active { color: $fg_color; }
1255
&:disabled { color: $disabled_secondary_fg_color; }
1257
&:selected {
1259
color: $secondary_inverse_fg_color;
1260
&:hover, &:active { color: $inverse_fg_color; }
1262
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1264
}
1265
}
1266
&.progressbar { // progress bar in treeviews
1268
border-style: none none solid;
1269
border-width: $bar_size;
1270
border-color: $primary_color;
1271
box-shadow: none;
1272
background-color: transparent;
1273
&:selected { border-color: currentColor; }
1275
}
1276
&.trough { // progress bar trough in treeviews
1278
border-style: none none solid;
1279
border-width: $bar_size;
1280
border-color: scale-alpha($primary_color, $lower_opacity);
1281
box-shadow: none;
1282
background-color: transparent;
1283
&:selected { border-color: $fill_color; }
1285
}
1286
header {
1288
button {
1289
@extend row.activatable;
1290
padding: 2px 6px;
1292
border-style: none solid solid none;
1293
border-width: 1px;
1294
border-color: $border_color;
1295
border-radius: 0;
1296
background-clip: border-box;
1297
&, &:hover, &:active { box-shadow: none; }
1299
&, &:disabled { background-color: $base_color; }
1301
&:last-child { border-right-style: none; }
1303
}
1304
}
1305
button.dnd,
1307
header.button.dnd { // for treeview-like derive widgets
1308
padding: 2px 6px;
1309
border-style: none solid solid;
1310
border-width: 1px;
1311
border-color: $border_color;
1312
border-radius: 0;
1313
box-shadow: none;
1314
background-color: $base_color;
1315
background-clip: border-box;
1316
color: $primary_color;
1317
}
1318
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1320
}
1321
/*********
1324
* Menus *
1325
*********/
1326
menubar,
1327
.menubar {
1328
-GtkWidget-window-dragging: true;
1329
padding: 0;
1330
// box-shadow: inset 0 -1px $border_color;
1331
background-color: $titlebar_bg_color;
1332
> menuitem {
1334
transition: $shorter_transition;
1335
min-height: 20px;
1336
padding: 4px 8px;
1337
color: $secondary_titlebar_fg_color;
1338
&:hover { // Seems like it :hover even with keyboard focus
1340
transition: none;
1341
background-color: $semi_fill_color;
1342
color: $titlebar_fg_color;
1343
}
1344
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1346
}
1347
}
1348
.csd.popup { border-radius: 2px; }
1350
menu,
1352
.menu,
1353
.context-menu {
1354
margin: 4px 0;
1355
padding: 4px 0;
1356
box-shadow: inset 0 1px $highlight_color;
1357
background-color: $base_color;
1358
border: 1px solid $border_color; // adds borders in a non composited env
1359
.csd & {
1361
border: none; // axes borders in a composited env
1362
border-radius: 2px;
1363
}
1364
menuitem {
1366
transition: $shorter_transition;
1367
min-height: 20px;
1368
min-width: 40px;
1369
padding: 4px 8px;
1370
font: initial;
1371
text-shadow: none;
1372
&:hover {
1374
transition: none;
1375
background-color: $semi_fill_color;
1376
}
1377
&:disabled { color: $disabled_fg_color; }
1379
// submenu indicators
1381
arrow {
1382
min-height: 16px;
1383
min-width: 16px;
1384
&:dir(ltr) {
1386
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1387
margin-left: 8px;
1388
}
1389
&:dir(rtl) {
1391
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1392
margin-right: 8px;
1393
}
1394
}
1395
// avoids labels color being overridden, see
1397
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1398
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1399
}
1400
// overflow arrows
1402
> arrow {
1403
min-height: 16px;
1404
min-width: 16px;
1405
padding: 4px;
1406
border-radius: 0;
1407
background-color: $base_color;
1408
color: $secondary_fg_color;
1409
&.top {
1411
margin-top: -4px;
1412
border-bottom: 1px solid $border_color;
1413
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1414
}
1415
&.bottom {
1417
margin-bottom: -4px;
1418
border-top: 1px solid $border_color;
1419
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1420
}
1421
&:hover {
1423
background-image: image($semi_fill_color);
1424
color: $fg_color;
1425
}
1426
&:disabled {
1428
border-color: transparent;
1429
background-color: transparent;
1430
color: transparent;
1431
// color: $disabled_secondary_fg_color;
1432
}
1433
}
1434
separator { margin: 4px 0; }
1436
}
1437
menuitem {
1439
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1440
check,
1442
radio {
1443
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1444
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1445
}
1446
}
1447
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1449
// Electron/Atom render all translucent colors in opaque colors.
1450
// It's a very critical issue for this theme and should be fixed by upstream...
1451
.popup:not(.csd) menu {
1452
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1453
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1454
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1455
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1456
menuitem {
1458
color: $opaque_fg_color;
1459
&:hover { background-color: $opaque_semi_fill_color; }
1461
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1463
}
1464
// TODO: not working this, where/how i can set the accelerators?
1466
accelerator { color: $opaque_tertiary_fg_color; }
1467
}
1468
/************
1471
* Popovers *
1472
************/
1473
popover.background {
1474
transition: $shadow_transition;
1475
padding: 2px;
1476
box-shadow: $shadow_2; // TODO: this should really have a highlight
1477
background-color: $lighter_bg_color;
1478
&:backdrop { box-shadow: $shadow_1; }
1480
&, .csd & {
1482
border-style: solid;
1483
border-width: 1px;
1484
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1485
border-radius: 2px + 1px;
1486
}
1487
> stack { margin: -4px; } // remove extra padding from menu style popovers
1489
> toolbar { margin: -2px; }
1491
> list,
1493
> .view,
1494
> toolbar {
1495
border-style: none;
1496
box-shadow: none;
1497
background-color: transparent;
1498
}
1499
&.touch-selection,
1501
&.magnifier,
1502
&.osd { @extend %osd; }
1503
// entry { @extend %entry.flat; }
1505
// button.combo { @extend %combo_flat; }
1507
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1509
&.menu button,
1511
button.model {
1512
@extend %simple_flat_button;
1513
min-height: 32px;
1515
padding: 0 8px;
1516
border-radius: 2px;
1517
&:checked { @extend %selected_items; }
1519
}
1520
separator { margin: 4px 0; }
1522
list separator { margin: 0; }
1524
}
1525
/*************
1527
* Notebooks *
1528
*************/
1529
notebook {
1530
> header {
1531
border-width: 1px;
1532
border-color: $border_color;
1533
background-color: $bg_color;
1534
background-clip: border-box;
1535
&.top {
1537
border-bottom-style: solid;
1538
> tabs {
1539
margin-bottom: -1px;
1540
> tab {
1541
&:hover { box-shadow: inset 0 -2px $fill_color; }
1543
&:checked { box-shadow: inset 0 -2px $primary_color; }
1545
}
1546
}
1547
}
1548
&.bottom {
1550
border-top-style: solid;
1551
> tabs {
1552
margin-top: -1px;
1553
> tab {
1554
&:hover { box-shadow: inset 0 2px $fill_color; }
1556
&:checked { box-shadow: inset 0 2px $primary_color; }
1558
}
1559
}
1560
}
1561
&.left {
1563
border-right-style: solid;
1564
> tabs {
1565
margin-right: -1px;
1566
> tab {
1567
&:hover { box-shadow: inset -2px 0 $fill_color; }
1569
&:checked { box-shadow: inset -2px 0 $primary_color; }
1571
}
1572
}
1573
}
1574
&.right {
1576
border-left-style: solid;
1577
> tabs {
1578
margin-left: -1px;
1579
> tab {
1580
&:hover { box-shadow: inset 2px 0 $fill_color; }
1582
&:checked { box-shadow: inset 2px 0 $primary_color; }
1584
}
1585
}
1586
}
1587
&.top > tabs > arrow {
1589
@extend %notebook_vert_arrows;
1590
border-top-style: none;
1592
}
1593
&.bottom > tabs > arrow {
1595
@extend %notebook_vert_arrows;
1596
border-bottom-style: none;
1598
}
1599
@at-root %notebook_vert_arrows {
1601
padding-left: 4px;
1602
padding-right: 4px;
1603
&.down {
1605
margin-left: -8px;
1606
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1607
}
1608
&.up {
1610
margin-right: -8px;
1611
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1612
}
1613
}
1614
&.left > tabs > arrow {
1616
@extend %notebook_horz_arrows;
1617
border-left-style: none;
1619
}
1620
&.right > tabs > arrow {
1622
@extend %notebook_horz_arrows;
1623
border-right-style: none;
1625
}
1626
@at-root %notebook_horz_arrows {
1628
padding-top: 4px;
1629
padding-bottom: 4px;
1630
&.down {
1632
margin-top: -8px;
1633
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1634
}
1635
&.up {
1637
margin-bottom: -8px;
1638
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1639
}
1640
}
1641
> tabs > arrow {
1643
@extend %simple_flat_button;
1644
min-height: 16px;
1646
min-width: 16px;
1647
border-radius: 0;
1648
}
1649
tab {
1651
transition: $longer_transition,
1652
background-size 0,
1653
background-image 0;
1654
min-height: $small_size;
1655
min-width: $small_size;
1656
padding: $container_padding 12px;
1657
outline-offset: -6px;
1659
border-width: 1px; // for reorderable tabs
1661
border-color: transparent; //
1662
background-image: radial-gradient(circle farthest-corner at center,
1664
$primary_color 10%,
1665
transparent 0%);
1666
background-repeat: no-repeat;
1667
background-position: center;
1668
background-size: 0% 0%;
1669
color: $secondary_fg_color;
1671
font-weight: 500;
1672
&:hover {
1674
color: $fg_color;
1675
&.reorderable-page {
1677
border-color: $border_color;
1678
background-color: $alt_base_color;
1679
}
1680
}
1681
&:disabled { color: $disabled_secondary_fg_color; }
1683
&:checked {
1685
transition: $longer_transition,
1686
background-size $longer_duration $deceleration_curve,
1687
background-image $longer_duration + $ripple_duration $deceleration_curve;
1688
background-image: radial-gradient(circle farthest-corner at center,
1689
transparent 10%,
1690
transparent 0%);
1691
background-size: 1000% 1000%;
1692
color: $fg_color;
1693
&:disabled { color: $disabled_fg_color; }
1695
&.reorderable-page {
1697
border-color: $border_color;
1698
background-color: $base_color;
1699
}
1700
}
1701
// colors the button like the label, overridden otherwise
1703
button.flat {
1704
@extend %small_button;
1705
&:last-child {
1707
margin-left: $container_padding;
1708
margin-right: $container_padding - 12px;
1709
}
1710
&:first-child {
1712
margin-left: $container_padding - 12px;
1713
margin-right: $container_padding;
1714
}
1715
}
1716
}
1717
&.top,
1719
&.bottom {
1720
tabs {
1721
padding-left: 8px;
1722
padding-right: 8px;
1723
&:not(:only-child) {
1725
&:first-child { margin-left: 0; }
1726
&:last-child { margin-right: 0; }
1727
}
1728
tab {
1730
&.reorderable-page {
1731
margin: 0 -1px;
1732
border-style: none solid;
1733
}
1734
}
1735
}
1736
}
1737
&.left,
1739
&.right {
1740
tabs {
1741
padding-top: 8px;
1742
padding-bottom: 8px;
1743
&:not(:only-child) {
1745
&:first-child { margin-top: 0; }
1746
&:last-child { margin-bottom: 0; }
1747
}
1748
tab {
1750
&.reorderable-page {
1751
margin: -1px 0;
1752
border-style: solid none;
1753
}
1754
}
1755
}
1756
}
1757
}
1758
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1760
background-color: $base_color;
1761
entry:not(.search),
1763
spinbutton:not(.vertical) { @extend %entry.flat; }
1764
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1766
button.combo { @extend %combo_flat; }
1768
}
1769
}
1770
/**************
1773
* Scrollbars *
1774
**************/
1775
scrollbar {
1776
$_slider_min_length: 24px;
1777
// disable steppers
1779
@at-root * {
1780
-GtkScrollbar-has-backward-stepper: false;
1781
-GtkScrollbar-has-forward-stepper: false;
1782
}
1783
transition: $longer_transition;
1785
background-color: $base_color;
1786
background-clip: $extra_background_clip;
1787
// scrollbar border
1789
&.top { border-bottom: 1px solid $border_color; }
1790
&.bottom { border-top: 1px solid $border_color; }
1791
&.left { border-right: 1px solid $border_color; }
1792
&.right { border-left: 1px solid $border_color; }
1793
// slider
1795
slider {
1796
transition: $shorter_transition, margin 0, border-width 0;
1797
min-width: 8px;
1798
min-height: 8px;
1799
border: 4px solid transparent;
1800
border-radius: $circular_radius;
1801
background-clip: padding-box;
1802
background-color: $tertiary_fg_color;
1803
&:hover { background-color: $secondary_fg_color; }
1805
&:active { background-color: $fg_color; }
1807
&:disabled { background-color: $disabled_tertiary_fg_color; }
1809
}
1810
&.fine-tune {
1812
slider {
1813
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1814
min-width: 4px;
1815
min-height: 4px;
1816
}
1817
&.horizontal slider { margin: 2px 0; }
1819
&.vertical slider { margin: 0 2px; }
1821
}
1822
&.overlay-indicator {
1824
&:not(.dragging):not(.hovering) {
1825
border-color: transparent;
1826
background-color: transparent;
1827
slider {
1829
min-width: 4px;
1830
min-height: 4px;
1831
margin: 4px - 1px;
1832
border: 1px solid scale-alpha($base_color, $lower_opacity);
1833
}
1834
button {
1836
min-width: 4px;
1837
min-height: 4px;
1838
margin: 4px - 1px;
1839
border: 1px solid scale-alpha($base_color, $lower_opacity);
1840
border-radius: $circular_radius;
1841
background-color: $tertiary_fg_color;
1842
background-clip: padding-box;
1843
-gtk-icon-source: none;
1844
&:disabled { background-color: $disabled_tertiary_fg_color; }
1846
}
1847
&.horizontal {
1849
slider { min-width: $_slider_min_length; }
1850
button { min-width: 8px; }
1852
}
1853
&.vertical {
1855
slider { min-height: $_slider_min_length; }
1856
button { min-height: 8px; }
1858
}
1859
}
1860
&.dragging,
1862
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1863
}
1864
&.horizontal slider { min-width: $_slider_min_length; }
1866
&.vertical slider { min-height: $_slider_min_length; }
1868
// button styling
1870
button {
1871
@extend %simple_flat_button;
1872
min-width: 16px;
1874
min-height: 16px;
1875
padding: 0;
1876
border-radius: 0;
1877
}
1878
// button icons
1880
&.vertical {
1881
button {
1882
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1883
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1885
}
1886
}
1887
&.horizontal {
1889
button {
1890
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1891
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1893
}
1894
}
1895
}
1896
/**********
1899
* Switch *
1900
**********/
1901
switch {
1902
transition: $longer_transition;
1903
margin: $container_padding 0;
1904
border: 4px solid transparent;
1905
border-radius: $circular_radius;
1906
background-color: $fill_color;
1907
background-clip: padding-box;
1908
font-size: 0;
1909
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1911
&:checked {
1913
background-color: scale-alpha($accent_color, 0.5);
1914
&:disabled {
1916
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1917
color: $disabled_fg_color;
1918
}
1919
}
1920
slider {
1922
@include entry(normal);
1923
transition: $longer_transition, $shadow_transition, margin 0;
1925
min-width: $small_size;
1926
min-height: $small_size;
1927
margin: -4px 0 -4px -4px;
1928
border-radius: $circular_radius;
1929
-gtk-outline-radius: $circular_radius;
1930
}
1931
&:hover slider { @include entry(focus); }
1933
&:checked slider {
1935
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1936
animation: needs_attention $longer_duration $deceleration_curve;
1937
margin: -4px -4px -4px 0;
1938
background-color: $accent_color;
1939
color: $inverse_fg_color;
1940
}
1941
&:disabled slider { @include entry(disabled); }
1943
&:checked:disabled slider { animation: none; }
1945
row:selected & {
1947
}
1948
}
1949
/*************************
1952
* Check and Radio items *
1953
*************************/
1954
// draw regular check and radio items using our PNG assets
1955
// all assets are rendered from assets.svg. never add pngs directly
1956
// selection-mode
1958
@each $s, $as in ('', '-unchecked'),
1959
(':checked', '-checked') {
1960
.view.content-view.check#{$s}:not(list) {
1961
margin: 8px;
1962
box-shadow: none;
1963
background-color: transparent;
1964
background-image: none;
1965
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1966
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1967
-gtk-icon-shadow: $shadow_1;
1968
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1970
}
1971
}
1972
checkbutton.text-button,
1974
radiobutton.text-button {
1975
// this is for a nice focus on check and radios text
1976
padding: 2px;
1977
outline-offset: 0;
1978
label:not(:only-child) { margin: 0 4px; }
1980
}
1981
check,
1983
radio {
1984
min-height: 24px;
1985
min-width: 24px;
1986
margin: -($large_size - 24px) / 2;
1987
padding: ($large_size - 24px) / 2;
1988
@extend %simple_flat_button;
1990
@extend %circular_button;
1992
&:checked, &:indeterminate { color: $accent_color; }
1994
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1996
// &:only-child { margin: -12px; }
1998
row &:not(:checked):not(:indeterminate) {
2000
color: gtkalpha(currentColor, $secondary_opacity);
2001
&:hover, &:active { color: currentColor; }
2003
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
2005
}
2006
menu menuitem & {
2008
transition: none;
2009
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2010
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2012
&, &:hover, &:disabled {
2014
box-shadow: none;
2015
// color: inherit;
2016
// animation: none;
2017
}
2018
}
2019
}
2020
%check,
2022
check {
2023
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2024
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2025
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2027
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2028
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2030
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2031
}
2032
$radio_indicator: 10px / $large_size / 2;
2034
$radio_radius_slice: #{$large_size / 2px};
2035
$radio_radius_width: #{$large_size / 2};
2036
%radio,
2038
radio {
2039
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2040
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2041
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2043
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2044
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2046
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2047
border-image: -gtk-gradient(radial,
2049
center center, 0,
2050
center center, 0.001,
2051
to($accent_color),
2052
to(transparent))
2053
$radio_radius_slice / $radio_radius_width;
2054
&:checked {
2056
border-image: -gtk-gradient(radial,
2057
center center, 0,
2058
center center, $radio_indicator,
2059
to($accent_color),
2060
to(transparent))
2061
$radio_radius_slice / $radio_radius_width;
2062
}
2063
&:checked:disabled {
2065
border-image: -gtk-gradient(radial,
2066
center center, 0,
2067
center center, $radio_indicator,
2068
to(scale-alpha($accent_color, $disabled_opacity)),
2069
to(transparent))
2070
$radio_radius_slice / $radio_radius_width;
2071
}
2072
&:indeterminate:checked {
2074
border-image: -gtk-gradient(radial,
2075
center center, 0,
2076
center center, 0.001,
2077
to($accent_color),
2078
to(transparent))
2079
$radio_radius_slice / $radio_radius_width;
2080
}
2081
}
2082
// let's animate things
2084
@keyframes check_check {
2085
from { -gtk-icon-transform: rotate(90deg); }
2086
to { -gtk-icon-transform: unset; }
2087
}
2088
@keyframes check_radio { // FIXME: cannot animate border-image
2090
from {
2091
border-image: -gtk-gradient(radial,
2092
center center, 0,
2093
center center, 0.001,
2094
to($accent_color),
2095
to(transparent))
2096
$radio_radius_slice / $radio_radius_width;
2097
}
2098
to {
2100
border-image: -gtk-gradient(radial,
2101
center center, 0,
2102
center center, $radio_indicator,
2103
to($accent_color),
2104
to(transparent))
2105
$radio_radius_slice / $radio_radius_width;
2106
}
2107
}
2108
@keyframes check_indeterminate {
2110
from { -gtk-icon-transform: unset; }
2111
50% { -gtk-icon-transform: scale(0, 1); }
2112
to { -gtk-icon-transform: unset; }
2113
}
2114
%check_checked,
2116
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2117
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2119
// %radio_checked,
2121
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2122
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2124
%indeterminate_checked,
2126
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2127
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2129
// no animations in menus
2131
menu menuitem {
2132
check:not(:indeterminate):checked,
2133
radio:not(:indeterminate):checked,
2134
check:indeterminate:checked,
2135
radio:indeterminate:checked { animation: none; }
2136
}
2137
treeview.view check,
2139
treeview.view radio {
2140
padding: 0;
2141
&:hover {
2143
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2144
&:disabled { box-shadow: none; }
2146
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2148
}
2149
& {
2151
color: $secondary_fg_color;
2152
&:hover, &:active { color: $fg_color; }
2154
&:disabled { color: $disabled_secondary_fg_color; }
2156
&:checked, &:indeterminate { color: $accent_color; }
2158
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2160
}
2161
&:selected {
2163
color: $secondary_inverse_fg_color;
2164
&:hover, &:active { color: $inverse_fg_color; }
2166
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2168
&:checked, &:indeterminate { color: $accent_color; }
2170
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2172
}
2173
}
2174
treeview.view radio:checked {
2176
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2177
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2178
border-image: none;
2179
}
2180
/************
2183
* GtkScale *
2184
************/
2185
scale {
2186
// sizing
2187
$_marks_lenght: 8px;
2188
$_marks_distance: 8px;
2189
$slider_size: 24px;
2191
$marks_slider_size: 30px;
2192
$slider_margin: -($slider_size - $bar_size) / 2;
2194
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2195
$color_slider_margin: -($slider_size) / 2;
2197
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2198
min-height: $medium_size - $slider_size;
2200
min-width: $medium_size - $slider_size;
2201
padding: ($slider_size / 2);
2202
* { transition: $longer_transition; }
2204
// the slider is inside the trough, so to have make it bigger there's a negative margin
2206
slider {
2207
min-height: $slider_size;
2208
min-width: $slider_size;
2209
margin: $slider_margin;
2210
}
2211
// the backing bit
2213
trough {
2214
outline-offset: 2px;
2215
background-color: $fill_color;
2216
&:disabled { color: $disabled_fg_color; }
2218
}
2219
// the colored part of the backing bit
2221
highlight {
2222
background-color: $accent_color;
2223
&:disabled { background-color: transparent; }
2225
}
2226
// this is another differently styled part of the backing bit, the most relevant use case is for example
2228
// in media player to indicate how much video stream as been cached
2229
fill {
2230
background-color: $fill_color;
2231
&:disabled { background-color: transparent; }
2233
}
2234
slider {
2236
transition: all $shorter_duration $standard_curve;
2237
// border-radius: 100%;
2238
// background-color: $accent_color;
2239
background-repeat: no-repeat;
2240
background-position: center;
2241
@each $s, $as in ('', ''),
2243
(':disabled', '-disabled') {
2244
&#{$s} {
2245
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2246
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2248
}
2249
}
2250
background-size: calc(100% - 8px);
2252
&:hover { background-size: calc(100% - 4px); }
2254
&:active { background-size: calc(100% - 0px); }
2256
}
2257
// click-and-hold the slider to activate
2259
&.fine-tune {
2260
// to make the slider shrink in fine-tune mode
2261
slider { background-size: calc(100% - 12px); }
2262
}
2263
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2265
marks {
2267
color: $fill_color;
2268
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2270
(bottom, bottom, top),
2271
(top, left, right),
2272
(bottom, right, left) {
2273
&.#{$marks_class} {
2274
margin-#{$marks_margin}: $_marks_distance;
2275
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2276
}
2277
}
2278
}
2279
&.horizontal {
2281
indicator {
2282
min-height: $_marks_lenght;
2283
min-width: 1px;
2284
}
2285
}
2286
&.vertical {
2288
indicator {
2289
min-height: 1px;
2290
min-width: $_marks_lenght;
2291
}
2292
}
2293
// *WARNING* scale with marks madness following
2295
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2297
('vertical', 'vert') {
2298
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2299
('marks-after', 'marks-after:not(.marks-before)') {
2300
&.#{$dir_class}.#{$marks_class} {
2301
slider {
2302
@each $state, $state_infix in ('', ''),
2303
(':disabled', '-disabled') {
2304
&#{$state} {
2305
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2306
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2308
}
2309
}
2310
@if $dir_class == 'horizontal' {
2312
min-height: $marks_slider_size;
2313
min-width: $slider_size;
2314
@if $marks_infix == 'marks-before' {
2316
margin-top: $marks_slider_margin;
2317
background-position: center calc(100% - 4px);
2319
&:hover { background-position: center calc(100% - 2px); }
2321
&:active { background-position: center calc(100% - 0px); }
2323
}
2324
@if $marks_infix == 'marks-after' {
2326
margin-bottom: $marks_slider_margin;
2327
background-position: center calc(4px);
2329
&:hover { background-position: center calc(2px); }
2331
&:active { background-position: center calc(0px); }
2333
}
2334
}
2335
@if $dir_class == 'vertical' {
2337
min-height: $slider_size;
2338
min-width: $marks_slider_size;
2339
@if $marks_infix == 'marks-before' {
2341
margin-left: $marks_slider_margin;
2342
background-position: calc(4px) center;
2344
&:hover { background-position: calc(2px) center; }
2346
&:active { background-position: calc(0px) center; }
2348
}
2349
@if $marks_infix == 'marks-after' {
2351
margin-right: $marks_slider_margin;
2352
background-position: calc(100% - 4px) center;
2354
&:hover { background-position: calc(100% - 2px) center; }
2356
&:active { background-position: calc(100% - 0px) center; }
2358
}
2359
}
2360
}
2361
&.fine-tune slider {
2363
@if $dir_class == 'horizontal' {
2364
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2365
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2367
}
2368
@if $dir_class == 'vertical' {
2370
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2371
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2373
}
2374
}
2375
}
2376
}
2377
}
2378
&.color {
2380
min-height: 0;
2381
min-width: 0;
2382
&.horizontal {
2384
padding: 0 0 12px 0;
2385
slider {
2387
&:dir(ltr), &:dir(rtl) { // specificity bump
2388
margin-bottom: $color_slider_margin;
2389
margin-top: $color_marks_slider_margin;
2390
}
2391
}
2392
}
2393
&.vertical {
2395
&:dir(ltr) {
2396
padding: 0 0 0 12px;
2397
slider {
2399
margin-left: $color_slider_margin;
2400
margin-right: $color_marks_slider_margin;
2401
}
2402
}
2403
&:dir(rtl) {
2405
padding: 0 12px 0 0;
2406
slider {
2408
margin-right: $color_slider_margin;
2409
margin-left: $color_marks_slider_margin;
2410
}
2411
}
2412
}
2413
}
2414
}
2415
/*****************
2418
* Progress bars *
2419
*****************/
2420
progressbar {
2421
// sizing
2422
&.horizontal {
2423
trough,
2424
progress { min-height: $bar_size; }
2425
}
2426
&.vertical {
2428
trough,
2429
progress { min-width: $bar_size; }
2430
}
2431
// FIXME: insensitive state missing and some other state should be set probably
2433
color: $tertiary_fg_color;
2434
font-size: smaller;
2435
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2437
progress { background-color: $primary_color; }
2439
&.osd { // progressbar.osd used for epiphany page loading progress
2441
// min-width: $bar_size;
2442
// min-height: $bar_size;
2443
// background-color: transparent;
2444
// trough { background-color: transparent; }
2446
progress {
2448
}
2449
}
2450
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2452
}
2453
/*************
2456
* Level Bar *
2457
*************/
2458
levelbar {
2459
block {
2460
min-width: $medium_size;
2461
min-height: $bar_size;
2462
}
2463
&.vertical block {
2465
min-width: $bar_size;
2466
min-height: $medium_size;
2467
}
2468
trough {
2470
padding: 2px;
2471
border-radius: 2px;
2472
@include entry(normal);
2474
&:disabled { @include entry(disabled); }
2476
}
2477
&.horizontal.discrete block { margin: 0 1px; }
2479
&.vertical.discrete block { margin: 1px 0; }
2481
&.horizontal.discrete trough { padding: 2px 1px; }
2483
&.vertical.discrete trough { padding: 1px 2px; }
2485
block {
2487
&.low {
2488
background-color: $warning_color;
2489
}
2490
&.high,
2492
&:not(.empty) {
2493
background-color: $primary_color;
2494
}
2495
&.full {
2497
background-color: $success_color;
2498
}
2499
&.empty {
2501
background-color: $fill_color;
2502
color: $disabled_fg_color;
2503
}
2504
}
2505
}
2506
/****************
2509
* Print dialog *
2510
*****************/
2511
printdialog {
2512
paper {
2513
padding: 0;
2514
border: 1px solid $border_color;
2515
background-color: $base_color;
2516
color: $fg_color;
2517
}
2518
.dialog-action-box { margin: 12px; }
2520
}
2521
/**********
2524
* Frames *
2525
**********/
2526
frame > border,
2527
.frame {
2528
margin: 0;
2529
padding: 0;
2530
border: 1px solid $border_color;
2531
border-radius: 0;
2532
box-shadow: none;
2533
&.flat { border-style: none; }
2535
}
2536
frame.flat > border { @extend .frame.flat; } // for backporting
2538
actionbar > revealer > box {
2540
padding: $container_padding;
2541
border-top: 1px solid $border_color;
2542
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2544
}
2545
scrolledwindow {
2547
viewport.frame { // avoid double borders when viewport inside scrolled window
2548
border-style: none;
2549
}
2550
// This is used when content is touch-dragged past boundaries.
2552
// draws a box on top of the content, the size changes programmatically.
2553
@at-root overshoot {
2554
&.top { @include overshoot(top); }
2555
&.bottom { @include overshoot(bottom); }
2557
&.left { @include overshoot(left); }
2559
&.right { @include overshoot(right); }
2561
}
2562
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2564
@at-root undershoot {
2565
&.top { @include undershoot(top); }
2566
&.bottom { @include undershoot(bottom); }
2568
&.left { @include undershoot(left); }
2570
&.right { @include undershoot(right); }
2572
}
2573
@at-root junction { // the small square between two scrollbars
2575
border-style: solid none none solid;
2576
border-width: 1px;
2577
border-color: $border_color;
2578
background-color: $base_color;
2579
&:dir(rtl) { border-style: solid solid none none; }
2581
}
2582
}
2583
// vbox and hbox separators
2585
separator {
2586
min-width: 1px;
2587
min-height: 1px;
2588
background-color: $border_color;
2589
}
2590
/*********
2593
* Lists *
2594
*********/
2595
list {
2596
border-color: $border_color;
2597
background-color: $base_color;
2598
row { padding: 2px; }
2600
}
2601
// FIXME
2603
$row_transition: $longer_transition, background-color 0, color 0;
2604
row {
2606
&.activatable {
2607
transition: $row_transition,
2608
background-size $ripple_duration $deceleration_curve,
2609
background-image $ripple_duration * 2 $deceleration_curve;
2610
box-shadow: inset 0 0 0 9999px transparent;
2611
background-image: radial-gradient(circle farthest-corner at center,
2612
transparent 10%,
2613
transparent 0%);
2614
background-repeat: no-repeat;
2615
background-position: center;
2616
background-size: 1000% 1000%;
2617
&:hover {
2619
transition: $row_transition,
2620
box-shadow 0,
2621
background-size $ripple_duration $deceleration_curve,
2622
background-image $ripple_duration * 2 $deceleration_curve;
2623
box-shadow: inset 0 0 0 9999px $row_fill_color;
2624
}
2625
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2627
&:active {
2628
transition: $row_transition,
2629
background-size 0,
2630
background-image 0;
2631
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2632
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2633
background-image: radial-gradient(circle farthest-corner at center,
2634
$semi_fill_color 10%,
2635
transparent 0%);
2636
background-size: 0% 0%;
2637
}
2638
}
2639
&:selected { @extend %selected_items; }
2641
}
2642
/*********************
2645
* App Notifications *
2646
*********************/
2647
.app-notification {
2648
@extend %osd;
2649
@extend toolbar.osd;
2651
margin: 8px;
2653
button { @extend %button_basic.flat; }
2655
&.frame,
2657
border { border-style: none; }
2658
}
2659
/*************
2662
* Expanders *
2663
*************/
2664
expander {
2665
arrow {
2666
transition: all $shorter_duration $standard_curve;
2667
min-width: 16px;
2668
min-height: 16px;
2669
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2670
-gtk-icon-transform: rotate(-90deg);
2671
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2673
&:checked { -gtk-icon-transform: unset; }
2675
color: $secondary_fg_color;
2677
&:hover, &:active { color: $fg_color; }
2679
&:disabled { color: $disabled_secondary_fg_color; }
2681
&:selected {
2683
color: $secondary_inverse_fg_color;
2684
&:hover, &:active { color: $inverse_fg_color; }
2686
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2688
}
2689
}
2690
}
2691
/************
2694
* Calendar *
2695
***********/
2696
calendar {
2697
padding: 1px;
2698
border: 1px solid $border_color;
2699
color: $fg_color;
2700
&:disabled { color: $disabled_fg_color; }
2702
&:selected {
2704
@extend %selected_items;
2705
border-radius: 2px + 1px;
2707
}
2708
&.header {
2710
border-style: none none solid;
2711
border-radius: 0;
2712
}
2713
&.button { @extend %simple_flat_button; }
2715
&.highlight {
2717
color: gtkalpha(currentColor, $tertiary_opacity);
2718
font-weight: 500;
2719
}
2720
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2722
}
2723
/***********
2726
* Dialogs *
2727
***********/
2728
messagedialog { // Message Dialog styling
2729
&.background { background-color: $lighter_bg_color; }
2730
.titlebar {
2732
min-height: $small_size;
2733
border-style: none;
2734
box-shadow: inset 0 1px $highlight_color;
2735
background-color: $lighter_bg_color;
2736
color: $fg_color;
2737
&:backdrop { color: $secondary_fg_color; }
2739
}
2740
&.csd { // rounded bottom border styling for csd version
2742
&.background {
2743
// bigger radius for better antialiasing
2744
border-bottom-left-radius: 2px;
2745
border-bottom-right-radius: 2px;
2746
}
2747
.dialog-action-area button {
2749
padding: 8px 16px;
2750
border-top: 1px solid $border_color;
2751
border-radius: 0;
2752
@extend %simple_flat_button;
2754
&:first-child { border-bottom-left-radius: 2px; }
2756
&:last-child { border-bottom-right-radius: 2px; }
2758
}
2759
}
2760
}
2761
filechooser {
2763
.dialog-action-box { border-top: 1px solid $border_color; }
2764
#pathbarbox {
2766
border-bottom: 1px solid $border_color;
2767
background-color: $bg_color;
2768
}
2769
}
2770
filechooserbutton:drop(active) {
2772
box-shadow: none;
2773
}
2774
/***********
2777
* Sidebar *
2778
***********/
2779
.sidebar {
2780
border-style: none;
2781
background-color: $lighter_bg_color;
2782
@at-root %sidebar_left,
2784
&:dir(ltr),
2785
&.left,
2786
&.left:dir(rtl) {
2787
border-right: 1px solid $border_color;
2788
border-left-style: none;
2789
}
2790
@at-root %sidebar_right,
2792
&:dir(rtl),
2793
&.right {
2794
border-left: 1px solid $border_color;
2795
border-right-style: none;
2796
}
2797
list { background-color: transparent; }
2799
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2801
}
2802
stacksidebar {
2804
&.sidebar {
2805
&:dir(ltr),
2806
&.left,
2807
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2808
&:dir(rtl),
2810
&.right { list { @extend %sidebar_right; }}
2811
}
2812
row {
2814
padding: 10px 4px;
2815
> label {
2817
padding-left: 6px;
2818
padding-right: 6px;
2819
}
2820
&.needs-attention > label { @extend %needs_attention; }
2822
}
2823
}
2824
/****************
2827
* File chooser *
2828
****************/
2829
placessidebar {
2830
> viewport.frame { border-style: none; }
2831
list { padding: (4px - 3px) 0 4px; }
2833
row {
2835
// Needs overriding of the GtkListBoxRow padding
2836
min-height: 32px;
2837
margin: -1px 0; // Remove unknown margins
2838
padding: 0;
2839
// Using margins/padding directly in the SidebarRow
2841
// will make the animation of the new bookmark row jump
2842
> revealer { padding: 0 12px; }
2843
&:selected { color: $inverse_fg_color; }
2845
&:disabled { color: $disabled_fg_color; }
2847
image.sidebar-icon {
2849
opacity: $tertiary_opacity; // dim the device icons
2850
&:dir(ltr) { padding-right: 8px; }
2852
&:dir(rtl) { padding-left: 8px; }
2853
}
2854
label.sidebar-label {
2856
&:dir(ltr) { padding-right: 2px; }
2857
&:dir(rtl) { padding-left: 2px; }
2858
}
2859
@at-root button.sidebar-button {
2861
@extend %simple_flat_button;
2862
@extend %small_button;
2864
row:selected & {
2866
}
2867
}
2868
&.sidebar-placeholder-row {
2870
min-height: 2px;
2871
padding: 0 8px;
2872
background-image: image($accent_color);
2873
background-clip: content-box;
2874
}
2875
&.sidebar-new-bookmark-row { color: $accent_color; }
2877
&:drop(active):not(:disabled) {
2879
box-shadow: inset 0 0 0 2px $accent_color;
2880
&:selected {
2882
// background-color: $accent_color;
2883
// color: $inverse_fg_color;
2884
}
2885
}
2886
}
2887
}
2888
placesview {
2890
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2891
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2893
// this selects the "connect to server" label
2895
> actionbar > revealer > box > label {
2896
padding-left: 8px;
2897
padding-right: 8px;
2898
}
2899
}
2900
/*********
2903
* Paned *
2904
*********/
2905
paned {
2906
> separator {
2907
min-width: 1px;
2908
min-height: 1px;
2909
-gtk-icon-source: none; // defeats the ugly default handle decoration
2910
border-style: none; // just to be sure
2911
background-color: transparent;
2912
// workaround, using background istead of a border since the border will get rendered twice (?)
2913
background-image: image($border_color);
2914
background-size: 1px 1px;
2915
background-clip: content-box; // avoids borders image being rendered twice (?)
2916
&.wide {
2918
min-width: 6px;
2919
min-height: 6px;
2920
background-color: $bg_color;
2921
background-image: image($border_color), image($border_color);
2922
background-size: 1px 1px, 1px 1px;
2923
}
2924
}
2925
&.horizontal > separator {
2927
background-repeat: repeat-y;
2928
&:dir(ltr) {
2930
margin: 0 -8px 0 0;
2931
padding: 0 8px 0 0;
2932
background-position: left;
2933
}
2934
&:dir(rtl) {
2936
margin: 0 0 0 -8px;
2937
padding: 0 0 0 8px;
2938
background-position: right;
2939
}
2940
&.wide {
2942
margin: 0;
2943
padding: 0;
2944
background-repeat: repeat-y, repeat-y;
2945
background-position: left, right;
2946
}
2947
}
2948
&.vertical > separator {
2950
margin: 0 0 -8px 0;
2951
padding: 0 0 8px 0;
2952
background-repeat: repeat-x;
2953
background-position: top;
2954
&.wide {
2956
margin: 0;
2957
padding: 0;
2958
background-repeat: repeat-x, repeat-x;
2959
background-position: bottom, top;
2960
}
2961
}
2962
}
2963
/**************
2966
* GtkInfoBar *
2967
**************/
2968
infobar {
2969
border-style: none;
2970
&.info { background-color: $info_bg_color; }
2972
&.question { background-color: $question_bg_color; }
2974
&.warning { background-color: $warning_bg_color; }
2976
&.error { background-color: $error_bg_color; }
2978
&.info,
2980
&.question,
2981
&.warning,
2982
&.error {
2983
> label, & { color: $inverse_fg_color; }
2984
button { @extend %button_selected; }
2986
selection {}
2988
*:link { @extend %link_selected; }
2990
}
2991
}
2992
/************
2995
* Tooltips *
2996
************/
2997
tooltip {
2998
&.background {
2999
// background-color needs to be set this way otherwise it gets drawn twice
3000
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3001
box-shadow: inset 0 1px $highlight_color;
3002
background-color: scale-alpha($base_color, $higher_opacity);
3003
}
3004
// @extend %osd;
3006
// padding: 4px; /* not working */
3008
border-radius: 2px;
3009
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3010
&:not(.csd) {
3012
border: 1px solid $border_color;
3013
border-radius: 2px + 1px;
3014
background-clip: $extra_background_clip;
3015
}
3016
// FIXME: we need a border or tooltips vanish on black background.
3018
decoration { background-color: transparent; }
3019
label {
3021
// tooltip label has already 6px margins
3022
min-height: 32px - 6px * 2;
3023
padding: 0 8px - 6px;
3024
}
3025
* {
3027
// workaround for Eclipse.
3028
// do not include any declaration here.
3029
// padding: 0;
3030
// background-color: transparent;
3031
// color: inherit;
3032
}
3033
}
3034
/*****************
3037
* Color Chooser *
3038
*****************/
3039
colorswatch {
3040
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3041
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3042
// applied to the overlay box.
3043
// base color corners rounding
3045
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3046
// sports a bigger radius.
3047
// nth-child is needed by the custom color strip.
3048
&.top {
3050
border-top-left-radius: $material_radius + 0.5px;
3051
border-top-right-radius: $material_radius + 0.5px;
3052
overlay {
3054
border-top-left-radius: $material_radius;
3055
border-top-right-radius: $material_radius;
3056
}
3057
}
3058
&.bottom {
3060
border-bottom-left-radius: $material_radius + 0.5px;
3061
border-bottom-right-radius: $material_radius + 0.5px;
3062
overlay {
3064
border-bottom-left-radius: $material_radius;
3065
border-bottom-right-radius: $material_radius;
3066
}
3067
}
3068
&.left,
3070
&:first-child:not(.top) {
3071
border-top-left-radius: $material_radius + 0.5px;
3072
border-bottom-left-radius: $material_radius + 0.5px;
3073
overlay {
3075
border-top-left-radius: $material_radius;
3076
border-bottom-left-radius: $material_radius;
3077
}
3078
}
3079
&.right,
3081
&:last-child:not(.bottom) {
3082
border-top-right-radius: $material_radius + 0.5px;
3083
border-bottom-right-radius: $material_radius + 0.5px;
3084
overlay {
3086
border-top-right-radius: $material_radius;
3087
border-bottom-right-radius: $material_radius;
3088
}
3089
}
3090
&.dark overlay { color: $light_fg_color; }
3092
&.light overlay { color: $dark_fg_color; }
3094
&.dark { color: $light_fg_color; } // for focus ring
3096
&.light { color: $dark_fg_color; } // for focus ring
3098
&:drop(active) {
3100
box-shadow: none;
3101
&.light overlay {
3103
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3104
}
3105
&.dark overlay {
3107
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3108
}
3109
}
3110
overlay {
3112
transition: $shadow_transition;
3113
box-shadow: $shadow_1;
3114
&:hover { box-shadow: $shadow_2; }
3116
}
3117
&#add-color-button {
3119
border-radius: $material_radius $material_radius 0 0;
3120
color: $light_fg_color; // for focus ring
3121
&:only-child { border-radius: $material_radius; }
3123
overlay {
3125
background-image: linear-gradient(to right,
3126
$error_bg_color 25%,
3127
$warning_bg_color 25%, $warning_bg_color 50%,
3128
$info_bg_color 50%, $info_bg_color 75%,
3129
$question_bg_color 75%);
3130
color: $light_fg_color;
3131
}
3132
}
3133
&:disabled {
3135
opacity: $disabled_opacity;
3136
overlay { box-shadow: none; }
3138
}
3139
row:selected & {
3141
}
3142
&#editor-color-sample {
3144
border-radius: $material_radius + 0.5px;
3145
overlay { border-radius: $material_radius; }
3147
// overlay:hover { box-shadow: $shadow_1; }
3149
}
3150
}
3151
// colorscale popup
3153
colorchooser .popover.osd {
3154
transition: $shadow_transition;
3155
border-radius: 2px;
3156
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3157
background-color: $base_color;
3158
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3160
spinbutton:not(.vertical) { @extend %entry.flat; }
3162
}
3163
/********
3166
* Misc *
3167
********/
3168
// content view (grid/list)
3169
.content-view {
3170
background-color: $bg_color;
3171
// &:hover { -gtk-icon-effect: highlight; }
3173
rubberband, .rubberband { @extend rubberband; }
3175
}
3176
.scale-popup {
3178
.osd & { @extend %osd; }
3179
.osd & button.flat { // FIXME: quick hack, redo properly
3181
}
3182
button { // +/- buttons on GtkVolumeButton popup
3184
}
3185
}
3186
/**********************
3189
* Window Decorations *
3190
*********************/
3191
decoration {
3192
transition: $shadow_transition;
3193
border-radius: 2px 2px 0 0;
3194
box-shadow: $shadow_4, 0 16px 16px transparent;
3195
// FIXME rationalize shadows
3197
// this is used for the resize cursor area
3199
margin: 8px;
3200
&:backdrop {
3202
// the transparent shadow here is to enforce that the shadow extents don't
3203
// change when we go to backdrop, to prevent jumping windows.
3204
// The biggest shadow should be in the same order then in the active state
3205
// or the jumping will happen during the transition.
3206
box-shadow: $shadow_2, 0 16px 16px transparent;
3207
}
3208
.maximized &,
3210
.fullscreen &,
3211
.tiled & { border-radius: 0; }
3212
.popup & { box-shadow: none; }
3214
// server-side decorations as used by mutter
3216
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3217
.csd.popup & {
3219
border-radius: 2px;
3220
box-shadow: $shadow_2;
3221
}
3222
tooltip.csd & {
3224
border-radius: 2px;
3225
box-shadow: $shadow_2;
3226
}
3227
messagedialog.csd & {
3229
border-radius: 2px;
3230
// box-shadow: $shadow_4, 0 16px 16px transparent;
3231
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3233
}
3234
.solid-csd & {
3236
margin: 0;
3237
// padding: 4px;
3238
border-radius: 0;
3239
box-shadow: none;
3240
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3241
background-color: $titlebar_bg_color;
3242
}
3243
}
3244
// Window Close button
3246
button.titlebutton {
3247
// @extend %simple_flat_button;
3248
@extend %circular_button;
3250
.selection-mode & {
3252
}
3253
}
3254
// catch all extend :)
3257
%selected_items {
3259
background-color: $primary_color;
3260
@at-root %nobg_selected_items, & {
3262
color: $inverse_fg_color;
3263
&:disabled { color: $disabled_inverse_fg_color; }
3265
}
3266
}
3267
.monospace { font-family: monospace; }
3269
/**********************
3272
* Touch Copy & Paste *
3273
*********************/
3274
// touch selection handlebars for the Popover.osd above
3275
cursor-handle {
3276
border-radius: $circular_radius;
3277
background-color: $accent_color;
3278
background-image: none;
3279
&.top:dir(ltr), &.bottom:dir(rtl) {
3281
padding-left: 6px;
3282
border-top-right-radius: 0;
3283
}
3284
&.bottom:dir(ltr), &.top:dir(rtl) {
3286
padding-right: 6px;
3287
border-top-left-radius: 0;
3288
}
3289
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3291
-GtkWidget-text-handle-width: 24;
3292
-GtkWidget-text-handle-height: 30;
3293
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3295
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3296
url('#{$_url}@2.png'));
3297
}
3298
}
3299
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3301
// shortcut window keys
3303
.keycap {
3304
min-width: 28px - 8px * 2;
3305
min-height: 28px - 2px;
3306
margin-top: 2px;
3307
padding-bottom: 2px;
3308
padding-left: 8px;
3309
padding-right: 8px;
3310
border: solid 1px $border_color;
3312
border-radius: 2px + 1px;
3313
box-shadow: inset 0 -2px $border_color;
3314
background-color: $base_color;
3315
color: $fg_color;
3316
font-size: smaller;
3317
}
3318
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3320
transition: $longer_transition;
3321
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3322
caret-color: $accent_color;
3323
}
3324
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3326
stackswitcher button.circular,
3328
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3329
min-width: $medium_size;
3330
min-height: $medium_size;
3331
padding: 0;
3332
}
3333