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: transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: 2px;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
switch:focus slider,
37
notebook:focus tab,
38
*:focus { outline-color: $fill_color; }
39
/***************
42
* Base States *
43
***************/
44
.background {
45
background-color: $bg_color;
46
color: $fg_color;
47
}
48
/*
50
These wildcard seems unavoidable, need to investigate.
51
Wildcards are bad and troublesome, use them with care,
52
or better, just don't.
53
Everytime a wildcard is used a kitten dies, painfully.
54
*/
55
*:disabled { -gtk-icon-effect: dim; }
57
.gtkstyle-fallback {
59
background-color: $bg_color;
60
color: $fg_color;
61
&:hover {
63
background-color: darken($bg_color, 5%);
64
color: $fg_color;
65
}
66
&:active {
68
background-color: darken($bg_color, 10%);
69
color: $fg_color;
70
}
71
&:disabled {
73
background-color: $bg_color;
74
color: $disabled_fg_color;
75
}
76
&:selected {
78
background-color: $primary_color;
79
color: $inverse_fg_color;
80
}
81
}
82
.view {
84
@extend row.activatable;
85
background-color: $base_color;
87
color: $fg_color;
88
&:disabled { color: $disabled_fg_color; }
90
selection,
92
&:selected { @extend %selected_items; }
93
}
94
textview {
96
// FIXME: we need to override background-color to ensure text rendering
97
text { background-color: $base_color; }
98
// FIXME: we cannot specify text color for the border node
100
border { background-color: $alt_base_color; }
101
}
102
iconview { border-radius: 2px; }
104
.rubberband,
106
rubberband {
107
border: 1px solid $alt_primary_color;
108
background-color: scale-alpha($alt_primary_color, $lower_opacity);
109
}
110
flowbox {
112
rubberband { @extend rubberband; }
113
flowboxchild {
115
padding: 4px;
116
border-radius: 2px;
117
outline-offset: -2px;
118
&:selected { @extend %selected_items; }
120
}
121
}
122
label {
124
caret-color: currentColor; // this shouldn't be needed.
125
&.separator {
127
@extend .dim-label;
128
color: $fg_color;
130
}
131
row:selected &,
133
&:selected { @extend %nobg_selected_items; }
134
selection {
136
background-color: $primary_color;
137
color: $inverse_fg_color;
138
}
139
&:disabled {
141
color: $disabled_fg_color;
142
selection { @extend %selected_items:disabled; }
144
tab &,
146
button & { color: inherit; }
147
}
148
}
149
.dim-label { opacity: $tertiary_opacity; }
151
assistant {
153
.sidebar {
154
padding: 4px 0;
155
// background-color: $base_color;
156
// border-top: 1px solid $border_color;
157
}
158
// &.csd .sidebar { border-top-style: none; }
160
.sidebar label {
162
min-height: $medium_size;
163
padding: 0 12px;
164
color: $tertiary_fg_color;
165
font-weight: 500;
166
&.highlight { color: $fg_color; }
168
}
169
}
170
%osd, .osd { opacity: $higher_opacity; }
172
/*********************
175
* Spinner Animation *
176
*********************/
177
@keyframes spin {
178
to { -gtk-icon-transform: rotate(1turn); }
179
}
180
@keyframes spin_colors {
182
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
183
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
184
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
185
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
186
}
187
spinner {
189
background: none;
190
opacity: 0; // non spinning spinner makes no sense
191
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
192
&:checked {
194
opacity: 1;
195
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
196
&:disabled { opacity: $disabled_opacity; }
198
}
199
}
200
/****************
203
* Text Entries *
204
****************/
205
%entry,
206
entry {
207
%entry_basic, & {
208
min-height: $medium_size;
209
padding: 0 8px;
210
border-radius: 2px;
211
@include entry(normal);
213
&:focus { @include entry(focus); }
215
&:disabled { @include entry(disabled); }
217
&.flat {
219
border-radius: 0;
220
@include entry(flat-normal);
222
&:focus { @include entry(flat-focus); }
224
&:disabled { @include entry(flat-disabled); }
226
}
227
image { // icons inside the entry
229
// @extend %simple_flat_button;
230
// min-height: $small_size;
232
// min-width: $small_size;
233
// border-radius: $circular_radius;
234
// -gtk-outline-radius: $circular_radius;
235
color: gtkalpha(currentColor, $secondary_opacity);
236
&:hover, &:active { color: currentColor; }
238
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
240
&.left { margin-left: 2px; margin-right: 6px; }
242
&.right { margin-left: 6px; margin-right: 2px; }
244
}
245
undershoot {
247
&.left { @include undershoot(left); }
248
&.right { @include undershoot(right); }
250
}
251
selection { @extend %selected_items; }
253
// entry error and warning style
255
@each $e_type, $e_color in (error, $error_color),
256
(warning, $warning_color) {
257
&.#{$e_type} {
258
@include entry(normal, $e_color);
259
&:focus { @include entry(focus, $e_color); }
261
&:disabled { @include entry(disabled, $e_color); }
263
&.flat {
265
@include entry(flat-normal, $e_color);
266
&:focus { @include entry(flat-focus, $e_color); }
268
&:disabled { @include entry(flat-disabled, $e_color); }
270
}
271
}
272
}
273
&:drop(active) {
275
// box-shadow: inset 0 0 0 2px $accent_color;
276
}
277
.osd & {
279
}
280
}
281
progress {
283
margin: 2px (2px - 8px);
284
border-bottom: 2px solid $primary_color;
285
background-color: transparent;
286
}
287
// linked entries
289
.linked:not(.vertical) > & { @extend %linked; }
290
// Vertically linked entries
292
.linked.vertical > & { @extend %linked_vertical; }
293
.linked:not(.vertical) > &.flat,
295
.linked.vertical > &.flat { border-radius: 0; }
296
}
297
treeview entry {
299
&.flat, & {
300
min-height: 0;
301
padding: 2px;
302
border-radius: 0;
303
background-color: $base_color;
304
&, &:focus {
306
border-image: none;
307
box-shadow: none;
308
}
309
}
310
}
311
/***********
314
* Buttons *
315
***********/
316
// stuff for .needs-attention
317
@keyframes needs_attention {
318
from {
319
background-image: -gtk-gradient(radial,
320
center center, 0,
321
center center, 0.001,
322
to($accent_color),
323
to(transparent));
324
}
325
to {
327
background-image: -gtk-gradient(radial,
328
center center, 0,
329
center center, 0.5,
330
to($accent_color),
331
to(transparent));
332
}
333
}
334
%button,
336
button {
337
@at-root %button_basic, & {
338
min-height: 24px;
339
min-width: 16px;
340
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
341
border-radius: 2px;
342
font-weight: 500;
343
@include button(normal);
345
&:hover { @include button(hover); }
347
&:active { @include button(active); }
349
&:disabled { @include button(disabled); }
351
&:checked { @include button(checked); }
353
&:checked:disabled { @include button(checked-disabled); }
355
@at-root %flat_button, &.flat {
357
@at-root %simple_flat_button, & {
358
@include button(flat-normal);
359
&:hover { @include button(flat-hover); }
361
&:active { @include button(flat-active); }
363
&:disabled { @include button(flat-disabled); }
365
}
366
&:checked { @include button(flat-checked); }
368
&:checked:disabled { @include button(flat-checked-disabled); }
370
}
371
&.text-button {
373
padding-left: 16px;
374
padding-right: 16px;
375
}
376
&.image-button {
378
min-width: 24px;
379
padding: ($medium_size - 24px) / 2;
380
border-radius: $circular_radius;
381
-gtk-outline-radius: $circular_radius;
382
}
383
&.text-button.image-button {
385
border-radius: 2px;
386
-gtk-outline-radius: 2px;
387
label {
389
&:first-child {
390
margin-left: 16px - ($medium_size - 24px) / 2;
391
margin-right: 2px;
392
}
393
&:last-child {
395
margin-left: 2px;
396
margin-right: 16px - ($medium_size - 24px) / 2;
397
}
398
&:only-child {
400
margin-left: 16px - ($medium_size - 24px) / 2;
401
margin-right: 16px - ($medium_size - 24px) / 2;
402
}
403
}
404
image:not(:only-child) {
406
&:first-child { margin-left: (24px - 16px) / 2; }
407
&:last-child { margin-right: (24px - 16px) / 2; }
409
}
410
}
411
.linked > & { @extend %linked; }
413
.linked.vertical > & { @extend %linked_vertical; }
415
.linked > &.flat,
417
.linked.vertical > &.flat {
418
border-radius: 2px;
419
&.image-button {
421
border-radius: $circular_radius;
422
-gtk-outline-radius: $circular_radius;
423
}
424
&.text-button.image-button {
426
border-radius: 2px;
427
-gtk-outline-radius: 2px;
428
}
429
}
430
&:drop(active) {
432
// box-shadow: inset 0 0 0 2px $accent_color;
433
}
434
}
435
@at-root %button_selected, row:selected & {
437
&:disabled { color: $disabled_secondary_inverse_fg_color; }
438
}
439
// big standalone buttons like in Documents pager
441
&.osd {
442
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
443
&.image-button { padding: ($large_size - 24px) / 2; }
445
&:disabled { opacity: 0; }
447
}
448
// overlay / OSD style
450
@at-root %osd_button,
451
.osd & {
452
}
453
// Suggested and Destructive Action buttons
455
@each $b_type, $b_color in (suggested-action, $suggested_color),
456
(destructive-action, $destructive_color) {
457
&.#{$b_type} {
458
background-color: $b_color;
459
color: $inverse_fg_color;
460
&:disabled { @include button(disabled, $b_color); }
462
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
464
&.flat {
466
background-color: transparent;
467
color: $b_color;
468
&:disabled { @include button(flat-disabled, $b_color); }
470
&:checked { background-color: $fill_color; }
472
}
473
.osd & {
475
}
476
}
477
}
478
.stack-switcher > & {
480
// to position the needs attention dot, padding is added to the button
481
// child, a label needs just lateral padding while an icon needs vertical
482
// padding added too.
483
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
485
> label {
487
padding-left: 6px; // label padding
488
padding-right: 6px; //
489
}
490
> image {
492
padding-left: 6px; // image padding
493
padding-right: 6px; //
494
padding-top: 3px; //
495
padding-bottom: 3px; //
496
}
497
&.text-button {
499
// compensate text-button paddings
500
padding-left: 16px - 6px;
501
padding-right: 16px - 6px;
502
}
503
&.image-button {
505
// we want image buttons to have a 1:1 aspect ratio, so compensation
506
// of the padding added to the GtkImage is needed
507
padding-left: ($medium_size - 16px) / 2 - 6px;
508
padding-right: ($medium_size - 16px) / 2 - 6px;
509
}
510
&.needs-attention {
512
> label,
513
> image { @extend %needs_attention; }
514
&:checked {
516
> label,
517
> image {
518
animation: none;
519
background-image: none;
520
}
521
}
522
}
523
}
524
// hide separators
526
separator {
527
min-width: 0;
528
min-height: 0;
529
background-color: transparent;
530
}
531
// &.font,
533
// &.file { separator { background-color: transparent; }}
534
// &.font { > box > box > label { font-weight: bold; }}
536
// inline-toolbar buttons
538
.inline-toolbar & {
539
// @extend %button_basic.flat;
540
&:not(.text-button) { @extend %circular_button; }
542
}
543
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
545
@at-root %circular_button,
547
&.close,
548
&.circular { // The Bloody Circul Button
549
border-radius: $circular_radius;
550
-gtk-outline-radius: $circular_radius;
551
// label { padding: 0; }
553
}
554
@at-root %small_button {
556
min-height: $small_size;
557
min-width: $small_size;
558
padding: 0;
559
border-radius: $circular_radius;
560
-gtk-outline-radius: $circular_radius;
561
}
562
}
563
%needs_attention {
565
animation: needs_attention $longer_duration $deceleration_curve forwards;
566
background-repeat: no-repeat;
567
background-position: right 3px;
568
background-size: 6px 6px;
569
&:dir(rtl) { background-position: left 3px; }
571
}
572
// all the following is for the +|- buttons on inline toolbars, that way
574
// should really be deprecated...
575
.inline-toolbar toolbutton > button { // redefining the button look is
576
// needed since those are flat...
577
}
578
// More inline toolbar buttons
580
toolbar.inline-toolbar toolbutton {
581
// > button.flat { @extend %linked_middle; }
582
// &:first-child > button.flat { @extend %linked:first-child; }
584
// &:last-child > button.flat { @extend %linked:last-child; }
586
// &:only-child > button.flat { @extend %linked:only-child; }
588
}
589
%linked_middle {
591
border-radius: 0;
592
-gtk-outline-radius: 2px;
593
}
594
%linked {
596
@extend %linked_middle;
597
&:first-child {
599
border-top-left-radius: 2px;
600
border-bottom-left-radius: 2px;
601
}
602
&:last-child {
604
border-top-right-radius: 2px;
605
border-bottom-right-radius: 2px;
606
}
607
&:only-child {
609
border-radius: 2px;
610
}
611
}
612
%linked_vertical_middle {
614
border-radius: 0;
615
-gtk-outline-radius: 2px;
616
}
617
%linked_vertical{
619
@extend %linked_vertical_middle;
620
&:first-child {
622
border-top-left-radius: 2px;
623
border-top-right-radius: 2px;
624
}
625
&:last-child {
627
border-bottom-left-radius: 2px;
628
border-bottom-right-radius: 2px;
629
}
630
&:only-child {
632
border-radius: 2px;
633
}
634
}
635
/* menu buttons */
637
modelbutton.flat,
638
.menuitem.button.flat {
639
min-height: $menuitem_size;
640
padding: 0 8px;
641
border-radius: 2px;
642
color: inherit;
643
@extend %simple_flat_button;
645
&:selected { @extend %selected_items; }
647
check,
649
radio {
650
box-shadow: none;
651
background-image: none;
652
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
654
&:last-child { margin-left: -8px; margin-right: -16px; }
656
&:first-child { margin-left: -16px; margin-right: -8px; }
658
}
659
}
660
modelbutton.flat arrow {
662
background: none;
663
&:hover { background: none; }
665
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
667
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
669
}
670
button.color {
672
min-height: $small_size;
673
min-width: $small_size;
674
padding: $container_padding;
675
colorswatch:only-child {
677
// &, overlay { border-radius: 0; }
678
}
679
}
680
/*********
683
* Links *
684
*********/
685
*:link {
686
&, &:hover, &:active { color: $link_color; }
687
&:visited {
689
&, &:hover, &:active { color: $visited_link_color; }
690
}
691
@at-root %link_selected,
693
&:selected,
694
*:selected & { color: $inverse_fg_color; }
695
}
696
button:link,
698
button:visited {
699
@extend *:link;
700
> label { text-decoration-line: underline; }
702
}
703
/*****************
705
* GtkSpinButton *
706
*****************/
707
spinbutton {
708
&:not(.vertical) {
709
// in this horizontal configuration, the whole spinbutton
710
// behaves as the entry, so we extend the entry styling
711
// and nuke the style on the internal entry
712
@extend %entry;
713
padding: 0;
715
%spinbutton_entry,
717
entry {
718
min-width: $large_size - 8px * 2;
719
// reset all the other props since the spinbutton node is styled here
720
margin: 0;
721
border-image: none;
722
border-radius: 0;
723
box-shadow: none;
724
background-color: transparent;
725
//
726
// This will help to simplify spinbutton's code, but unfortunatelly
727
// doesn't work properly in :dir(rtl). It needs z-index property.
728
//
729
// min-width: $large_size - 8px;
730
//
731
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
732
//
733
// &:dir(ltr) {
734
// margin-right: -$spinbuttons_width;
735
// padding-right: $spinbuttons_width;
736
// }
737
//
738
// &:dir(rtl) {
739
// margin-left: -$spinbuttons_width;
740
// padding-left: $spinbuttons_width;
741
// }
742
}
743
button {
745
// margin: $container_padding;
746
border: solid $container_padding transparent;
747
@extend %simple_flat_button;
749
@extend %small_button;
751
&.up:dir(ltr),
753
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
754
&.up:dir(rtl),
756
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
757
}
758
}
759
// OSD horizontal
761
.osd &:not(.vertical) {
762
button {
763
}
764
}
765
// Vertical
767
&.vertical {
768
// in the vertical configuration, we treat the spinbutton
769
// as a box, and tweak the style of the entry in the middle
770
// so that it's linked
771
// FIXME: this should not be set at all, but otherwise it gets the wrong
773
// color
774
&:disabled { color: $disabled_fg_color; }
775
&:drop(active) {
777
box-shadow: none;
778
}
779
entry {
781
min-height: $medium_size;
782
min-width: $large_size;
783
padding: 0;
784
}
785
button {
787
min-height: $medium_size;
788
min-width: $large_size;
789
padding: 0;
790
@extend %simple_flat_button;
792
&.up { border-radius: 2px 2px 0 0; }
794
&.down { border-radius: 0 0 2px 2px; }
796
}
797
}
798
// OSD vertical
800
.osd &.vertical button:first-child {
801
}
802
// Misc
804
treeview &:not(.vertical) {
805
min-height: 0;
806
border-style: none;
807
border-radius: 0;
808
entry {
810
min-height: 0;
811
padding: 1px 2px;
812
}
813
}
814
}
815
/**************
818
* ComboBoxes *
819
**************/
820
combobox {
821
arrow {
822
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
823
min-height: 16px;
824
min-width: 16px;
825
}
826
button.combo:checked { transition: none; } // workaround for menuitem selection
828
button.combo cellview {
830
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
831
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
832
}
833
#gtk-combobox-popup-menu {
835
padding: 2px 0;
836
menuitem {
838
min-height: $medium_size - 2px * 2;
839
padding: 0 8px;
840
}
841
}
842
&.linked {
844
button:nth-child(2) {
845
&:dir(ltr) { @extend %linked:last-child; }
846
&:dir(rtl) { @extend %linked:first-child; }
847
}
848
}
849
&:drop(active) { // FIXME: untested
851
box-shadow: none;
852
// button.combo { @extend %button_basic:drop(active); }
854
}
855
}
856
.linked > combobox > box > button.combo {
858
// the combo is a composite widget so the way we do button linking doesn't
859
// work, special case needed. See
860
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
861
&:dir(ltr),
863
&:dir(rtl) { @extend %linked_middle; } // specificity bump
864
}
865
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
867
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
868
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
869
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
871
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
872
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
873
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
874
%combo_flat {
876
border-radius: 0;
877
background-image: none;
878
font-weight: inherit;
879
@include entry(flat-normal);
881
&:hover { box-shadow: inset 0 -2px $fill_color; }
883
&:checked {
885
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
886
$primary_color 100%,
887
transparent 0%)
888
0 0 2 / 0 0 2px;
889
}
890
&:disabled { color: $disabled_fg_color; }
892
}
893
/************
896
* Toolbars *
897
************/
898
toolbar {
899
-GtkWidget-window-dragging: true;
900
padding: $container_padding / 2;
901
background-color: $bg_color;
902
button { @extend %button_basic.flat; }
904
// on OSD
906
.osd & { background-color: transparent; }
907
// stand-alone OSD toolbars
909
&.osd {
910
transition: $shadow_transition;
911
padding: $container_padding;
912
border-radius: 2px;
913
box-shadow: $shadow_2, inset 0 1px $highlight_color;
914
background-color: $base_color;
915
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
917
&.left,
919
&.right,
920
&.top,
921
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
922
}
923
// toolbar separators
925
&.horizontal separator { margin: $container_padding / 2; }
926
&.vertical separator { margin: $container_padding / 2; }
927
&:not(.inline-toolbar):not(.osd) {
929
scale,
930
entry,
931
spinbutton,
932
button { margin: $container_padding / 2; }
933
.linked entry,
935
.linked spinbutton,
936
.linked button {
937
&:not(:first-child) { margin-left: 0; }
938
&:not(:last-child) { margin-right: 0; }
939
}
940
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
942
}
943
}
944
// searchbar, location-bar & inline-toolbar
946
.inline-toolbar {
947
padding: $container_padding;
948
border-style: solid;
949
border-width: 0 1px 1px;
950
border-color: $border_color;
951
background-color: $alt_base_color;
952
}
953
searchbar,
955
.location-bar {
956
padding: $container_padding;
957
border-style: solid;
958
border-width: 0 0 1px;
959
border-color: $border_color;
960
background-color: $bg_color;
961
background-clip: border-box;
962
}
963
/***************
966
* Header bars *
967
***************/
968
%titlebar,
969
headerbar {
970
transition: background-color $shorter_duration $deceleration_curve;
971
min-height: $large_size;
972
padding: 0 $container_padding;
973
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
974
background-color: $titlebar_bg_color;
975
color: $titlebar_fg_color;
976
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
978
&:backdrop {
980
color: $secondary_titlebar_fg_color;
981
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
983
}
984
.title {
986
transition: $longer_transition;
987
padding: 0 12px;
988
font-weight: bold;
989
}
990
.subtitle {
992
transition: $longer_transition;
993
padding: 0 12px;
994
font-size: smaller;
995
@extend .dim-label;
997
}
998
button:not(.suggested-action):not(.destructive-action) {
1000
@extend %button_basic.flat;
1001
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1003
$titlebar_indicator_color 0%,
1004
transparent 0%)
1005
0 0 0 / 0 0 0px;
1006
&:checked {
1008
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1009
$titlebar_indicator_color 100%,
1010
transparent 0%)
1011
0 0 2 / 0 0 2px;
1012
&, &:disabled { background-color: transparent; }
1014
}
1015
}
1016
button.suggested-action, button.destructive-action {
1018
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1019
}
1020
&.selection-mode {
1022
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1023
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1024
transition: background-color 0.00001s $longer_duration;
1025
animation: header_ripple_effect $longer_duration $deceleration_curve;
1026
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1027
background-color: $primary_color;
1028
color: $inverse_fg_color;
1029
&:backdrop {
1031
color: $secondary_inverse_fg_color;
1032
}
1033
.subtitle:link { @extend *:link:selected; }
1035
button:not(.suggested-action):not(.destructive-action) {
1037
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1038
currentColor 0%,
1039
transparent 0%)
1040
0 0 0 / 0 0 0px;
1041
color: currentColor;
1042
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1044
&:checked {
1046
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1047
currentColor 100%,
1048
transparent 0%)
1049
0 0 2 / 0 0 2px;
1050
color: currentColor;
1051
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1053
}
1054
}
1055
.selection-menu {
1057
padding-left: 16px;
1058
padding-right: 16px;
1059
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1061
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1063
}
1064
}
1065
.fullscreen &,
1067
.tiled &,
1068
.maximized & {
1069
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1070
box-shadow: $shadow_1;
1071
}
1072
&.default-decoration {
1074
min-height: $small_size;
1075
padding: $container_padding;
1076
box-shadow: inset 0 1px $titlebar_highlight_color;
1077
.fullscreen &,
1079
.tiled &,
1080
.maximized & { box-shadow: none; }
1081
button.titlebutton {
1083
min-height: $small_size;
1084
min-width: $small_size;
1085
margin: 0;
1086
padding: 0;
1087
}
1088
// workaround for non-animatable buttons
1090
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1091
}
1092
.solid-csd & {
1094
&:dir(rtl), &:dir(ltr) { // specificity bump
1095
// margin-left: -2px;
1096
// margin-right: -2px;
1097
// margin-top: -2px;
1098
// border-radius: 0;
1099
// box-shadow: inset 0 1px $titlebar_highlight_color;
1100
}
1101
}
1102
}
1103
headerbar {
1105
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1106
entry,
1107
spinbutton,
1108
// separator,
1109
button {
1110
margin-top: $container_padding;
1111
margin-bottom: $container_padding;
1112
}
1113
switch {
1115
margin-top: $container_padding * 2;
1116
margin-bottom: $container_padding * 2;
1117
}
1118
// reset button margins of the spinbutton
1120
spinbutton button {
1121
margin-top: 0;
1122
margin-bottom: 0;
1123
}
1124
}
1125
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1127
border-top-left-radius: 2px;
1128
border-top-right-radius: 2px;
1129
}
1130
headerbar { // headerbar border rounding
1132
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1133
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1134
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1136
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1138
&:first-child, &:last-child {
1139
border-top-left-radius: 2px;
1140
border-top-right-radius: 2px;
1141
}
1142
}
1143
}
1144
.titlebar:not(headerbar) {
1146
window.csd > & {
1147
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1148
padding: 0;
1149
background-color: transparent;
1150
background-image: none;
1151
border-style: none;
1152
box-shadow: none;
1153
}
1154
> separator {
1156
background-color: $titlebar_bg_color;
1157
background-image: image($border_color);
1158
}
1159
@extend %titlebar;
1161
}
1162
/************
1165
* Pathbars *
1166
************/
1167
%pathbar_button,
1168
.path-bar button {
1169
padding-left: ($medium_size - 24px) / 2;
1170
padding-right: ($medium_size - 24px) / 2;
1171
label:not(:only-child) {
1173
&:first-child { margin-left: 4px; }
1174
&:last-child { margin-right: 4px; }
1176
}
1177
&.slider-button {
1179
padding-left: (24px - 16px) / 2;
1180
padding-right: (24px - 16px) / 2;
1181
}
1182
:not(headerbar) & {
1184
@extend %flat_button;
1185
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1187
$primary_color 0%,
1188
transparent 0%)
1189
0 0 0 / 0 0 0px;
1190
border-radius: 2px;
1191
&:checked {
1193
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1194
$primary_color 100%,
1195
transparent 0%)
1196
0 0 2 / 0 0 2px;
1197
&, &:disabled { background-color: transparent; }
1199
}
1200
}
1201
}
1202
/**************
1205
* Tree Views *
1206
**************/
1207
treeview.view {
1208
@at-root * {
1209
-GtkTreeView-horizontal-separator: 4;
1210
-GtkTreeView-grid-line-width: 1;
1211
-GtkTreeView-grid-line-pattern: '';
1212
-GtkTreeView-tree-line-width: 1;
1213
-GtkTreeView-tree-line-pattern: '';
1214
-GtkTreeView-expander-size: 16;
1215
}
1216
border-left-color: $fill_color; // this is actually the tree lines color,
1218
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1219
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1221
&.separator {
1223
min-height: 1px + 2px * 2;
1224
color: $border_color;
1225
}
1226
&:drop(active) {
1228
border-style: solid none;
1229
border-width: 1px;
1230
border-color: $accent_color;
1231
&.after { border-top-style: none; }
1233
&.before { border-bottom-style: none; }
1235
}
1236
&.expander {
1238
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1239
-gtk-icon-transform: rotate(-90deg);
1240
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1242
&:checked { -gtk-icon-transform: unset; }
1244
color: $secondary_fg_color;
1246
&:hover, &:active { color: $fg_color; }
1248
&:disabled { color: $disabled_secondary_fg_color; }
1250
&:selected {
1252
color: $secondary_inverse_fg_color;
1253
&:hover, &:active { color: $inverse_fg_color; }
1255
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1257
}
1258
}
1259
&.progressbar { // progress bar in treeviews
1261
border-bottom: $bar_size solid $primary_color;
1262
box-shadow: none;
1263
background-color: transparent;
1264
&:selected { border-bottom-color: currentColor; }
1266
}
1267
&.trough { // progress bar trough in treeviews
1269
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1270
box-shadow: none;
1271
background-color: transparent;
1272
&:selected { border-bottom-color: $fill_color; }
1274
}
1275
header {
1277
button {
1278
@extend row.activatable;
1279
padding: 2px 6px;
1281
border-style: none solid solid none;
1282
border-width: 1px;
1283
border-color: $border_color;
1284
border-radius: 0;
1285
background-clip: border-box;
1286
&, &:hover, &:active { box-shadow: none; }
1288
&, &:disabled { background-color: $base_color; }
1290
&:last-child { border-right-style: none; }
1292
}
1293
}
1294
button.dnd,
1296
header.button.dnd { // for treeview-like derive widgets
1297
padding: 2px 6px;
1298
border-style: none solid solid;
1299
border-width: 1px;
1300
border-color: $border_color;
1301
border-radius: 0;
1302
box-shadow: none;
1303
background-color: $base_color;
1304
background-clip: border-box;
1305
color: $primary_color;
1306
}
1307
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1309
}
1310
/*********
1313
* Menus *
1314
*********/
1315
menubar,
1316
.menubar {
1317
-GtkWidget-window-dragging: true;
1318
padding: 0;
1319
// box-shadow: inset 0 -1px $border_color;
1320
background-color: $titlebar_bg_color;
1321
> menuitem {
1323
transition: $shorter_transition;
1324
min-height: 20px;
1325
padding: 4px 8px;
1326
color: $secondary_titlebar_fg_color;
1327
&:hover { // Seems like it :hover even with keyboard focus
1329
transition: none;
1330
background-color: $semi_fill_color;
1331
color: $titlebar_fg_color;
1332
}
1333
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1335
}
1336
}
1337
.csd.popup { border-radius: 2px; }
1339
menu,
1341
.menu,
1342
.context-menu {
1343
margin: 4px 0;
1344
padding: 4px 0;
1345
box-shadow: inset 0 1px $highlight_color;
1346
background-color: $base_color;
1347
border: 1px solid $border_color; // adds borders in a non composited env
1348
.csd & {
1350
border: none; // axes borders in a composited env
1351
border-radius: 2px;
1352
}
1353
menuitem {
1355
transition: $shorter_transition;
1356
min-height: 20px;
1357
min-width: 40px;
1358
padding: 4px 8px;
1359
font: initial;
1360
text-shadow: none;
1361
&:hover {
1363
transition: none;
1364
background-color: $semi_fill_color;
1365
}
1366
&:disabled { color: $disabled_fg_color; }
1368
// submenu indicators
1370
arrow {
1371
min-height: 16px;
1372
min-width: 16px;
1373
&:dir(ltr) {
1375
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1376
margin-left: 8px;
1377
}
1378
&:dir(rtl) {
1380
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1381
margin-right: 8px;
1382
}
1383
}
1384
// avoids labels color being overridden, see
1386
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1387
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1388
}
1389
// overflow arrows
1391
> arrow {
1392
min-height: 16px;
1393
min-width: 16px;
1394
padding: 4px;
1395
border-radius: 0;
1396
background-color: $base_color;
1397
color: $secondary_fg_color;
1398
&.top {
1400
margin-top: -4px;
1401
border-bottom: 1px solid $border_color;
1402
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1403
}
1404
&.bottom {
1406
margin-bottom: -4px;
1407
border-top: 1px solid $border_color;
1408
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1409
}
1410
&:hover {
1412
background-image: image($semi_fill_color);
1413
color: $fg_color;
1414
}
1415
&:disabled {
1417
border-color: transparent;
1418
background-color: transparent;
1419
color: transparent;
1420
// color: $disabled_secondary_fg_color;
1421
}
1422
}
1423
separator { margin: 4px 0; }
1425
}
1426
menuitem {
1428
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1429
check,
1431
radio {
1432
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1433
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1434
}
1435
}
1436
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1438
// Electron/Atom render all translucent colors in opaque colors.
1439
// It's a very critical issue for this theme and should be fixed by upstream...
1440
.popup:not(.csd) menu {
1441
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1442
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1443
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1444
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1445
menuitem {
1447
color: $opaque_fg_color;
1448
&:hover { background-color: $opaque_semi_fill_color; }
1450
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1452
}
1453
// TODO: not working this, where/how i can set the accelerators?
1455
accelerator { color: $opaque_tertiary_fg_color; }
1456
}
1457
/************
1460
* Popovers *
1461
************/
1462
popover.background {
1463
transition: $shadow_transition;
1464
padding: 2px;
1465
box-shadow: $shadow_2; // TODO: this should really have a highlight
1466
background-color: $lighter_bg_color;
1467
&:backdrop { box-shadow: $shadow_1; }
1469
&, .csd & {
1471
border-style: solid;
1472
border-width: 1px;
1473
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1474
border-radius: 2px + 1px;
1475
}
1476
> stack { margin: -4px; } // remove extra padding from menu style popovers
1478
> toolbar { margin: -2px; }
1480
> list,
1482
> .view,
1483
> toolbar {
1484
border-style: none;
1485
box-shadow: none;
1486
background-color: transparent;
1487
}
1488
&.touch-selection,
1490
&.magnifier,
1491
&.osd { @extend %osd; }
1492
// entry { @extend %entry.flat; }
1494
// button.combo { @extend %combo_flat; }
1496
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1498
&.menu button,
1500
button.model {
1501
@extend %simple_flat_button;
1502
min-height: 32px;
1504
padding: 0 8px;
1505
border-radius: 2px;
1506
&:checked { @extend %selected_items; }
1508
}
1509
separator { margin: 4px 0; }
1511
list separator { margin: 0; }
1513
}
1514
/*************
1516
* Notebooks *
1517
*************/
1518
notebook {
1519
> header {
1520
border-width: 1px;
1521
border-color: $border_color;
1522
background-color: $bg_color;
1523
background-clip: border-box;
1524
&.top {
1526
border-bottom-style: solid;
1527
> tabs {
1528
margin-bottom: -1px;
1529
> tab {
1530
&:hover { box-shadow: inset 0 -2px $fill_color; }
1532
&:checked { box-shadow: inset 0 -2px $primary_color; }
1534
}
1535
}
1536
}
1537
&.bottom {
1539
border-top-style: solid;
1540
> tabs {
1541
margin-top: -1px;
1542
> tab {
1543
&:hover { box-shadow: inset 0 2px $fill_color; }
1545
&:checked { box-shadow: inset 0 2px $primary_color; }
1547
}
1548
}
1549
}
1550
&.left {
1552
border-right-style: solid;
1553
> tabs {
1554
margin-right: -1px;
1555
> tab {
1556
&:hover { box-shadow: inset -2px 0 $fill_color; }
1558
&:checked { box-shadow: inset -2px 0 $primary_color; }
1560
}
1561
}
1562
}
1563
&.right {
1565
border-left-style: solid;
1566
> tabs {
1567
margin-left: -1px;
1568
> tab {
1569
&:hover { box-shadow: inset 2px 0 $fill_color; }
1571
&:checked { box-shadow: inset 2px 0 $primary_color; }
1573
}
1574
}
1575
}
1576
&.top > tabs > arrow {
1578
@extend %notebook_vert_arrows;
1579
border-top-style: none;
1581
}
1582
&.bottom > tabs > arrow {
1584
@extend %notebook_vert_arrows;
1585
border-bottom-style: none;
1587
}
1588
@at-root %notebook_vert_arrows {
1590
padding-left: 4px;
1591
padding-right: 4px;
1592
&.down {
1594
margin-left: -8px;
1595
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1596
}
1597
&.up {
1599
margin-right: -8px;
1600
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1601
}
1602
}
1603
&.left > tabs > arrow {
1605
@extend %notebook_horz_arrows;
1606
border-left-style: none;
1608
}
1609
&.right > tabs > arrow {
1611
@extend %notebook_horz_arrows;
1612
border-right-style: none;
1614
}
1615
@at-root %notebook_horz_arrows {
1617
padding-top: 4px;
1618
padding-bottom: 4px;
1619
&.down {
1621
margin-top: -8px;
1622
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1623
}
1624
&.up {
1626
margin-bottom: -8px;
1627
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1628
}
1629
}
1630
> tabs > arrow {
1632
@extend %simple_flat_button;
1633
min-height: 16px;
1635
min-width: 16px;
1636
border-radius: 0;
1637
}
1638
tab {
1640
transition: $longer_transition,
1641
background-size 0,
1642
background-image 0;
1643
min-height: $small_size;
1644
min-width: $small_size;
1645
padding: $container_padding 12px;
1646
outline-offset: -6px;
1648
border-width: 1px; // for reorderable tabs
1650
border-color: transparent; //
1651
background-image: radial-gradient(circle farthest-corner at center,
1653
$primary_color 10%,
1654
transparent 0%);
1655
background-repeat: no-repeat;
1656
background-position: center;
1657
background-size: 0% 0%;
1658
color: $secondary_fg_color;
1660
font-weight: 500;
1661
&:hover {
1663
color: $fg_color;
1664
&.reorderable-page {
1666
border-color: $border_color;
1667
background-color: $alt_base_color;
1668
}
1669
}
1670
&:disabled { color: $disabled_secondary_fg_color; }
1672
&:checked {
1674
transition: $longer_transition,
1675
background-size $longer_duration $deceleration_curve,
1676
background-image $longer_duration + $ripple_duration $deceleration_curve;
1677
background-image: radial-gradient(circle farthest-corner at center,
1678
transparent 10%,
1679
transparent 0%);
1680
background-size: 1000% 1000%;
1681
color: $fg_color;
1682
&:disabled { color: $disabled_fg_color; }
1684
&.reorderable-page {
1686
border-color: $border_color;
1687
background-color: $base_color;
1688
}
1689
}
1690
// colors the button like the label, overridden otherwise
1692
button.flat {
1693
@extend %small_button;
1694
&:last-child {
1696
margin-left: $container_padding;
1697
margin-right: $container_padding - 12px;
1698
}
1699
&:first-child {
1701
margin-left: $container_padding - 12px;
1702
margin-right: $container_padding;
1703
}
1704
}
1705
}
1706
&.top,
1708
&.bottom {
1709
tabs {
1710
padding-left: 8px;
1711
padding-right: 8px;
1712
&:not(:only-child) {
1714
&:first-child { margin-left: 0; }
1715
&:last-child { margin-right: 0; }
1716
}
1717
tab {
1719
&.reorderable-page {
1720
margin: 0 -1px;
1721
border-style: none solid;
1722
}
1723
}
1724
}
1725
}
1726
&.left,
1728
&.right {
1729
tabs {
1730
padding-top: 8px;
1731
padding-bottom: 8px;
1732
&:not(:only-child) {
1734
&:first-child { margin-top: 0; }
1735
&:last-child { margin-bottom: 0; }
1736
}
1737
tab {
1739
&.reorderable-page {
1740
margin: -1px 0;
1741
border-style: solid none;
1742
}
1743
}
1744
}
1745
}
1746
}
1747
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1749
background-color: $base_color;
1750
entry:not(.search),
1752
spinbutton:not(.vertical) { @extend %entry.flat; }
1753
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1755
button.combo { @extend %combo_flat; }
1757
}
1758
}
1759
/**************
1762
* Scrollbars *
1763
**************/
1764
scrollbar {
1765
$_slider_min_length: 24px;
1766
// disable steppers
1768
@at-root * {
1769
-GtkScrollbar-has-backward-stepper: false;
1770
-GtkScrollbar-has-forward-stepper: false;
1771
}
1772
transition: $longer_transition;
1774
background-color: $base_color;
1775
background-clip: $extra_background_clip;
1776
// scrollbar border
1778
&.top { border-bottom: 1px solid $border_color; }
1779
&.bottom { border-top: 1px solid $border_color; }
1780
&.left { border-right: 1px solid $border_color; }
1781
&.right { border-left: 1px solid $border_color; }
1782
// slider
1784
slider {
1785
transition: $shorter_transition, margin 0, border-width 0;
1786
min-width: 8px;
1787
min-height: 8px;
1788
border: 4px solid transparent;
1789
border-radius: $circular_radius;
1790
background-clip: padding-box;
1791
background-color: $tertiary_fg_color;
1792
&:hover { background-color: $secondary_fg_color; }
1794
&:active { background-color: $fg_color; }
1796
&:disabled { background-color: $disabled_tertiary_fg_color; }
1798
}
1799
&.fine-tune {
1801
slider {
1802
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1803
min-width: 4px;
1804
min-height: 4px;
1805
}
1806
&.horizontal slider { margin: 2px 0; }
1808
&.vertical slider { margin: 0 2px; }
1810
}
1811
&.overlay-indicator {
1813
&:not(.dragging):not(.hovering) {
1814
border-color: transparent;
1815
background-color: transparent;
1816
slider {
1818
min-width: 4px;
1819
min-height: 4px;
1820
margin: 4px - 1px;
1821
border: 1px solid scale-alpha($base_color, $lower_opacity);
1822
}
1823
button {
1825
min-width: 4px;
1826
min-height: 4px;
1827
margin: 4px - 1px;
1828
border: 1px solid scale-alpha($base_color, $lower_opacity);
1829
border-radius: $circular_radius;
1830
background-color: $tertiary_fg_color;
1831
background-clip: padding-box;
1832
-gtk-icon-source: none;
1833
&:disabled { background-color: $disabled_tertiary_fg_color; }
1835
}
1836
&.horizontal {
1838
slider { min-width: $_slider_min_length; }
1839
button { min-width: 8px; }
1841
}
1842
&.vertical {
1844
slider { min-height: $_slider_min_length; }
1845
button { min-height: 8px; }
1847
}
1848
}
1849
&.dragging,
1851
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1852
}
1853
&.horizontal slider { min-width: $_slider_min_length; }
1855
&.vertical slider { min-height: $_slider_min_length; }
1857
// button styling
1859
button {
1860
@extend %simple_flat_button;
1861
min-width: 16px;
1863
min-height: 16px;
1864
padding: 0;
1865
border-radius: 0;
1866
}
1867
// button icons
1869
&.vertical {
1870
button {
1871
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1872
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1874
}
1875
}
1876
&.horizontal {
1878
button {
1879
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1880
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1882
}
1883
}
1884
}
1885
/**********
1888
* Switch *
1889
**********/
1890
switch {
1891
transition: $longer_transition;
1892
margin: $container_padding 0;
1893
border: 4px solid transparent;
1894
border-radius: $circular_radius;
1895
background-color: $fill_color;
1896
background-clip: padding-box;
1897
font-size: 0;
1898
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1900
&:checked {
1902
background-color: scale-alpha($accent_color, 0.5);
1903
&:disabled {
1905
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1906
color: $disabled_fg_color;
1907
}
1908
}
1909
slider {
1911
@include entry(normal);
1912
transition: $longer_transition, $shadow_transition, margin 0;
1914
min-width: $small_size;
1915
min-height: $small_size;
1916
margin: -4px 0 -4px -4px;
1917
border-radius: $circular_radius;
1918
-gtk-outline-radius: $circular_radius;
1919
}
1920
&:hover slider { @include entry(focus); }
1922
&:checked slider {
1924
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1925
animation: needs_attention $longer_duration $deceleration_curve;
1926
margin: -4px -4px -4px 0;
1927
background-color: $accent_color;
1928
color: $inverse_fg_color;
1929
}
1930
&:disabled slider { @include entry(disabled); }
1932
&:checked:disabled slider { animation: none; }
1934
row:selected & {
1936
}
1937
}
1938
/*************************
1941
* Check and Radio items *
1942
*************************/
1943
// draw regular check and radio items using our PNG assets
1944
// all assets are rendered from assets.svg. never add pngs directly
1945
// selection-mode
1947
@each $s, $as in ('', '-unchecked'),
1948
(':checked', '-checked') {
1949
.view.content-view.check#{$s}:not(list) {
1950
margin: 8px;
1951
box-shadow: none;
1952
background-color: transparent;
1953
background-image: none;
1954
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1955
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1956
-gtk-icon-shadow: $shadow_1;
1957
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1959
}
1960
}
1961
checkbutton.text-button,
1963
radiobutton.text-button {
1964
// this is for a nice focus on check and radios text
1965
padding: 2px;
1966
outline-offset: 0;
1967
label:not(:only-child) { margin: 0 4px; }
1969
}
1970
check,
1972
radio {
1973
min-height: 24px;
1974
min-width: 24px;
1975
margin: -($large_size - 24px) / 2;
1976
padding: ($large_size - 24px) / 2;
1977
@extend %simple_flat_button;
1979
@extend %circular_button;
1981
&:checked, &:indeterminate {
1983
color: $accent_color;
1984
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1986
}
1987
// &:only-child { margin: -12px; }
1989
row &:not(:checked):not(:indeterminate) {
1991
color: gtkalpha(currentColor, $secondary_opacity);
1992
&:hover, &:active { color: currentColor; }
1994
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1996
}
1997
menu menuitem & {
1999
transition: none;
2000
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2001
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2003
&, &:hover, &:disabled {
2005
box-shadow: none;
2006
// color: inherit;
2007
}
2008
}
2009
}
2010
%check,
2012
check {
2013
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2014
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2015
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2017
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2018
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2020
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2021
}
2022
%radio,
2024
radio {
2025
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2026
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2027
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2029
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2030
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2032
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2033
border-image-slice: $large_size / 2px;
2035
border-image-width: $large_size / 2;
2036
$radio_indicator: 10px / $large_size / 2;
2038
& {
2040
border-image-source: -gtk-gradient(radial,
2041
center center, 0,
2042
center center, 0.001,
2043
to($accent_color),
2044
to(transparent));
2045
}
2046
&:checked:not(:indeterminate) {
2048
border-image-source: -gtk-gradient(radial,
2049
center center, 0,
2050
center center, $radio_indicator,
2051
to($accent_color),
2052
to(transparent));
2053
}
2054
&:checked:not(:indeterminate):disabled {
2056
border-image-source: -gtk-gradient(radial,
2057
center center, 0,
2058
center center, $radio_indicator,
2059
to(scale-alpha($accent_color, $disabled_opacity)),
2060
to(transparent));
2061
}
2062
}
2063
// ANIMATION:
2065
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2066
// the transformation is set on the active state and it get reset on the checked state.
2067
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2068
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2070
check:not(:checked):indeterminate:active,
2072
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2073
check:not(:checked),
2075
radio:not(:checked) {
2076
& {
2077
transition: $longer_transition,
2078
background-size $ripple_duration $deceleration_curve,
2079
background-image $ripple_duration * 2 $deceleration_curve,
2080
-gtk-icon-transform 0;
2081
}
2082
&:active {
2084
transition: $longer_transition,
2085
background-size 0,
2086
background-image 0,
2087
-gtk-icon-transform 0;
2088
}
2089
menu menuitem & { transition: none; }
2091
}
2092
treeview.view check,
2094
treeview.view radio {
2095
padding: 0;
2096
&:hover {
2098
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2099
&:disabled { box-shadow: none; }
2101
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2103
}
2104
& {
2106
color: $secondary_fg_color;
2107
&:hover, &:active { color: $fg_color; }
2109
&:disabled { color: $disabled_secondary_fg_color; }
2111
&:checked, &:indeterminate { color: $accent_color; }
2113
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2115
}
2116
&:selected {
2118
color: $secondary_inverse_fg_color;
2119
&:hover, &:active { color: $inverse_fg_color; }
2121
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2123
&:checked, &:indeterminate { color: $accent_color; }
2125
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2127
}
2128
}
2129
treeview.view radio:checked {
2131
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2132
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2133
border-image: none;
2134
}
2135
/************
2138
* GtkScale *
2139
************/
2140
scale {
2141
// sizing
2142
$_marks_lenght: 8px;
2143
$_marks_distance: 8px;
2144
$slider_size: 24px;
2146
$marks_slider_size: 30px;
2147
$slider_margin: -($slider_size - $bar_size) / 2;
2149
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2150
$color_slider_margin: -($slider_size) / 2;
2152
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2153
min-height: $medium_size - $slider_size;
2155
min-width: $medium_size - $slider_size;
2156
padding: ($slider_size / 2);
2157
* { transition: $longer_transition; }
2159
// the slider is inside the trough, so to have make it bigger there's a negative margin
2161
slider {
2162
min-height: $slider_size;
2163
min-width: $slider_size;
2164
margin: $slider_margin;
2165
}
2166
// the backing bit
2168
trough {
2169
outline-offset: 2px;
2170
background-color: $fill_color;
2171
&:disabled { color: $disabled_fg_color; }
2173
}
2174
// the colored part of the backing bit
2176
highlight {
2177
background-color: $accent_color;
2178
&:disabled { background-color: transparent; }
2180
}
2181
// this is another differently styled part of the backing bit, the most relevant use case is for example
2183
// in media player to indicate how much video stream as been cached
2184
fill {
2185
background-color: $fill_color;
2186
&:disabled { background-color: transparent; }
2188
}
2189
slider {
2191
transition: all $shorter_duration $standard_curve;
2192
// border-radius: 100%;
2193
// background-color: $accent_color;
2194
background-repeat: no-repeat;
2195
background-position: center;
2196
@each $s, $as in ('', ''),
2198
(':disabled', '-disabled') {
2199
&#{$s} {
2200
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2201
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2203
}
2204
}
2205
background-size: calc(100% - 8px);
2207
&:hover { background-size: calc(100% - 4px); }
2209
&:active { background-size: calc(100% - 0px); }
2211
}
2212
// click-and-hold the slider to activate
2214
&.fine-tune {
2215
// to make the slider shrink in fine-tune mode
2216
slider { background-size: calc(100% - 12px); }
2217
}
2218
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2220
marks {
2222
color: $fill_color;
2223
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2225
(bottom, bottom, top),
2226
(top, left, right),
2227
(bottom, right, left) {
2228
&.#{$marks_class} {
2229
margin-#{$marks_margin}: $_marks_distance;
2230
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2231
}
2232
}
2233
}
2234
&.horizontal {
2236
indicator {
2237
min-height: $_marks_lenght;
2238
min-width: 1px;
2239
}
2240
}
2241
&.vertical {
2243
indicator {
2244
min-height: 1px;
2245
min-width: $_marks_lenght;
2246
}
2247
}
2248
// *WARNING* scale with marks madness following
2250
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2252
('vertical', 'vert') {
2253
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2254
('marks-after', 'marks-after:not(.marks-before)') {
2255
&.#{$dir_class}.#{$marks_class} {
2256
slider {
2257
@each $state, $state_infix in ('', ''),
2258
(':disabled', '-disabled') {
2259
&#{$state} {
2260
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2261
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2263
}
2264
}
2265
@if $dir_class == 'horizontal' {
2267
min-height: $marks_slider_size;
2268
min-width: $slider_size;
2269
@if $marks_infix == 'marks-before' {
2271
margin-top: $marks_slider_margin;
2272
background-position: center calc(100% - 4px);
2274
&:hover { background-position: center calc(100% - 2px); }
2276
&:active { background-position: center calc(100% - 0px); }
2278
}
2279
@if $marks_infix == 'marks-after' {
2281
margin-bottom: $marks_slider_margin;
2282
background-position: center calc(4px);
2284
&:hover { background-position: center calc(2px); }
2286
&:active { background-position: center calc(0px); }
2288
}
2289
}
2290
@if $dir_class == 'vertical' {
2292
min-height: $slider_size;
2293
min-width: $marks_slider_size;
2294
@if $marks_infix == 'marks-before' {
2296
margin-left: $marks_slider_margin;
2297
background-position: calc(4px) center;
2299
&:hover { background-position: calc(2px) center; }
2301
&:active { background-position: calc(0px) center; }
2303
}
2304
@if $marks_infix == 'marks-after' {
2306
margin-right: $marks_slider_margin;
2307
background-position: calc(100% - 4px) center;
2309
&:hover { background-position: calc(100% - 2px) center; }
2311
&:active { background-position: calc(100% - 0px) center; }
2313
}
2314
}
2315
}
2316
&.fine-tune slider {
2318
@if $dir_class == 'horizontal' {
2319
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2320
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2322
}
2323
@if $dir_class == 'vertical' {
2325
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2326
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2328
}
2329
}
2330
}
2331
}
2332
}
2333
&.color {
2335
min-height: 0;
2336
min-width: 0;
2337
&.horizontal {
2339
padding: 0 0 12px 0;
2340
slider {
2342
&:dir(ltr), &:dir(rtl) { // specificity bump
2343
margin-bottom: $color_slider_margin;
2344
margin-top: $color_marks_slider_margin;
2345
}
2346
}
2347
}
2348
&.vertical {
2350
&:dir(ltr) {
2351
padding: 0 0 0 12px;
2352
slider {
2354
margin-left: $color_slider_margin;
2355
margin-right: $color_marks_slider_margin;
2356
}
2357
}
2358
&:dir(rtl) {
2360
padding: 0 12px 0 0;
2361
slider {
2363
margin-right: $color_slider_margin;
2364
margin-left: $color_marks_slider_margin;
2365
}
2366
}
2367
}
2368
}
2369
}
2370
/*****************
2373
* Progress bars *
2374
*****************/
2375
progressbar {
2376
// sizing
2377
&.horizontal {
2378
trough,
2379
progress { min-height: $bar_size; }
2380
}
2381
&.vertical {
2383
trough,
2384
progress { min-width: $bar_size; }
2385
}
2386
// FIXME: insensitive state missing and some other state should be set probably
2388
color: $tertiary_fg_color;
2389
font-size: smaller;
2390
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2392
progress { background-color: $primary_color; }
2394
&.osd { // progressbar.osd used for epiphany page loading progress
2396
// min-width: $bar_size;
2397
// min-height: $bar_size;
2398
// background-color: transparent;
2399
// trough { background-color: transparent; }
2401
progress {
2403
}
2404
}
2405
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2407
}
2408
/*************
2411
* Level Bar *
2412
*************/
2413
levelbar {
2414
block {
2415
min-width: $medium_size;
2416
min-height: $bar_size;
2417
}
2418
&.vertical block {
2420
min-width: $bar_size;
2421
min-height: $medium_size;
2422
}
2423
trough {
2425
padding: 2px;
2426
border-radius: 2px;
2427
@include entry(normal);
2429
&:disabled { @include entry(disabled); }
2431
}
2432
&.horizontal.discrete block { margin: 0 1px; }
2434
&.vertical.discrete block { margin: 1px 0; }
2436
&.horizontal.discrete trough { padding: 2px 1px; }
2438
&.vertical.discrete trough { padding: 1px 2px; }
2440
block {
2442
&.low {
2443
background-color: $warning_color;
2444
}
2445
&.high,
2447
&:not(.empty) {
2448
background-color: $primary_color;
2449
}
2450
&.full {
2452
background-color: $success_color;
2453
}
2454
&.empty {
2456
background-color: $fill_color;
2457
color: $disabled_fg_color;
2458
}
2459
}
2460
}
2461
/****************
2464
* Print dialog *
2465
*****************/
2466
printdialog {
2467
paper {
2468
padding: 0;
2469
border: 1px solid $border_color;
2470
background-color: $base_color;
2471
color: $fg_color;
2472
}
2473
.dialog-action-box { margin: 12px; }
2475
}
2476
/**********
2479
* Frames *
2480
**********/
2481
frame > border,
2482
.frame {
2483
margin: 0;
2484
padding: 0;
2485
border: 1px solid $border_color;
2486
border-radius: 0;
2487
box-shadow: none;
2488
&.flat { border-style: none; }
2490
}
2491
frame.flat > border { @extend .frame.flat; } // for backporting
2493
actionbar > revealer > box {
2495
padding: $container_padding;
2496
border-top: 1px solid $border_color;
2497
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2499
}
2500
scrolledwindow {
2502
viewport.frame { // avoid double borders when viewport inside scrolled window
2503
border-style: none;
2504
}
2505
// This is used when content is touch-dragged past boundaries.
2507
// draws a box on top of the content, the size changes programmatically.
2508
@at-root overshoot {
2509
&.top { @include overshoot(top); }
2510
&.bottom { @include overshoot(bottom); }
2512
&.left { @include overshoot(left); }
2514
&.right { @include overshoot(right); }
2516
}
2517
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2519
@at-root undershoot {
2520
&.top { @include undershoot(top); }
2521
&.bottom { @include undershoot(bottom); }
2523
&.left { @include undershoot(left); }
2525
&.right { @include undershoot(right); }
2527
}
2528
@at-root junction { // the small square between two scrollbars
2530
border-style: solid none none solid;
2531
border-width: 1px;
2532
border-color: $border_color;
2533
background-color: $base_color;
2534
&:dir(rtl) { border-style: solid solid none none; }
2536
}
2537
}
2538
// vbox and hbox separators
2540
separator {
2541
min-width: 1px;
2542
min-height: 1px;
2543
background-color: $border_color;
2544
}
2545
/*********
2548
* Lists *
2549
*********/
2550
list {
2551
border-color: $border_color;
2552
background-color: $base_color;
2553
row { padding: 2px; }
2555
}
2556
// FIXME
2558
$row_transition: $longer_transition, background-color 0, color 0;
2559
row {
2561
&.activatable {
2562
transition: $row_transition,
2563
background-size $ripple_duration $deceleration_curve,
2564
background-image $ripple_duration * 2 $deceleration_curve;
2565
box-shadow: inset 0 0 0 9999px transparent;
2566
background-image: radial-gradient(circle farthest-corner at center,
2567
transparent 10%,
2568
transparent 0%);
2569
background-repeat: no-repeat;
2570
background-position: center;
2571
background-size: 1000% 1000%;
2572
&:hover {
2574
transition: $row_transition,
2575
box-shadow 0,
2576
background-size $ripple_duration $deceleration_curve,
2577
background-image $ripple_duration * 2 $deceleration_curve;
2578
box-shadow: inset 0 0 0 9999px $row_fill_color;
2579
}
2580
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2582
&:active {
2583
transition: $row_transition,
2584
background-size 0,
2585
background-image 0;
2586
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2587
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2588
background-image: radial-gradient(circle farthest-corner at center,
2589
$semi_fill_color 10%,
2590
transparent 0%);
2591
background-size: 0% 0%;
2592
}
2593
}
2594
&:selected { @extend %selected_items; }
2596
}
2597
/*********************
2600
* App Notifications *
2601
*********************/
2602
.app-notification {
2603
@extend %osd;
2604
@extend toolbar.osd;
2606
margin: 8px;
2608
button { @extend %button_basic.flat; }
2610
&.frame,
2612
border { border-style: none; }
2613
}
2614
/*************
2617
* Expanders *
2618
*************/
2619
expander {
2620
arrow {
2621
transition: all $shorter_duration $standard_curve;
2622
min-width: 16px;
2623
min-height: 16px;
2624
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2625
-gtk-icon-transform: rotate(-90deg);
2626
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2628
&:checked { -gtk-icon-transform: unset; }
2630
color: $secondary_fg_color;
2632
&:hover, &:active { color: $fg_color; }
2634
&:disabled { color: $disabled_secondary_fg_color; }
2636
&:selected {
2638
color: $secondary_inverse_fg_color;
2639
&:hover, &:active { color: $inverse_fg_color; }
2641
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2643
}
2644
}
2645
}
2646
/************
2649
* Calendar *
2650
***********/
2651
calendar {
2652
padding: 1px;
2653
border: 1px solid $border_color;
2654
color: $fg_color;
2655
&:disabled { color: $disabled_fg_color; }
2657
&:selected {
2659
@extend %selected_items;
2660
border-radius: 2px + 1px;
2662
}
2663
&.header {
2665
border-style: none none solid;
2666
border-radius: 0;
2667
}
2668
&.button { @extend %simple_flat_button; }
2670
&.highlight {
2672
color: gtkalpha(currentColor, $tertiary_opacity);
2673
font-weight: 500;
2674
}
2675
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2677
}
2678
/***********
2681
* Dialogs *
2682
***********/
2683
messagedialog { // Message Dialog styling
2684
&.background { background-color: $lighter_bg_color; }
2685
.titlebar {
2687
min-height: $small_size;
2688
border-style: none;
2689
box-shadow: inset 0 1px $highlight_color;
2690
background-color: $lighter_bg_color;
2691
color: $fg_color;
2692
&:backdrop { color: $secondary_fg_color; }
2694
}
2695
&.csd { // rounded bottom border styling for csd version
2697
&.background {
2698
// bigger radius for better antialiasing
2699
border-bottom-left-radius: 2px;
2700
border-bottom-right-radius: 2px;
2701
}
2702
.dialog-action-area button {
2704
padding: 8px 16px;
2705
border-top: 1px solid $border_color;
2706
border-radius: 0;
2707
@extend %simple_flat_button;
2709
&:first-child { border-bottom-left-radius: 2px; }
2711
&:last-child { border-bottom-right-radius: 2px; }
2713
}
2714
}
2715
}
2716
filechooser {
2718
.dialog-action-box { border-top: 1px solid $border_color; }
2719
#pathbarbox {
2721
border-bottom: 1px solid $border_color;
2722
background-color: $bg_color;
2723
}
2724
}
2725
filechooserbutton:drop(active) {
2727
box-shadow: none;
2728
}
2729
/***********
2732
* Sidebar *
2733
***********/
2734
.sidebar {
2735
border-style: none;
2736
background-color: $lighter_bg_color;
2737
@at-root %sidebar_left,
2739
&:dir(ltr),
2740
&.left,
2741
&.left:dir(rtl) {
2742
border-right: 1px solid $border_color;
2743
border-left-style: none;
2744
}
2745
@at-root %sidebar_right,
2747
&:dir(rtl),
2748
&.right {
2749
border-left: 1px solid $border_color;
2750
border-right-style: none;
2751
}
2752
list { background-color: transparent; }
2754
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2756
}
2757
stacksidebar {
2759
&.sidebar {
2760
&:dir(ltr),
2761
&.left,
2762
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2763
&:dir(rtl),
2765
&.right { list { @extend %sidebar_right; }}
2766
}
2767
row {
2769
padding: 10px 4px;
2770
> label {
2772
padding-left: 6px;
2773
padding-right: 6px;
2774
}
2775
&.needs-attention > label { @extend %needs_attention; }
2777
}
2778
}
2779
/****************
2782
* File chooser *
2783
****************/
2784
placessidebar {
2785
> viewport.frame { border-style: none; }
2786
list { padding: (4px - 3px) 0 4px; }
2788
row {
2790
// Needs overriding of the GtkListBoxRow padding
2791
min-height: 32px;
2792
margin: -1px 0; // Remove unknown margins
2793
padding: 0;
2794
// Using margins/padding directly in the SidebarRow
2796
// will make the animation of the new bookmark row jump
2797
> revealer { padding: 0 12px; }
2798
&:selected { color: $inverse_fg_color; }
2800
&:disabled { color: $disabled_fg_color; }
2802
image.sidebar-icon {
2804
opacity: $tertiary_opacity; // dim the device icons
2805
&:dir(ltr) { padding-right: 8px; }
2807
&:dir(rtl) { padding-left: 8px; }
2808
}
2809
label.sidebar-label {
2811
&:dir(ltr) { padding-right: 2px; }
2812
&:dir(rtl) { padding-left: 2px; }
2813
}
2814
@at-root button.sidebar-button {
2816
@extend %simple_flat_button;
2817
@extend %small_button;
2819
row:selected & {
2821
}
2822
}
2823
&.sidebar-placeholder-row {
2825
min-height: 2px;
2826
padding: 0 8px;
2827
background-image: image($accent_color);
2828
background-clip: content-box;
2829
}
2830
&.sidebar-new-bookmark-row { color: $accent_color; }
2832
&:drop(active):not(:disabled) {
2834
box-shadow: inset 0 0 0 2px $accent_color;
2835
&:selected {
2837
// background-color: $accent_color;
2838
// color: $inverse_fg_color;
2839
}
2840
}
2841
}
2842
}
2843
placesview {
2845
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2846
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2848
// this selects the "connect to server" label
2850
> actionbar > revealer > box > label {
2851
padding-left: 8px;
2852
padding-right: 8px;
2853
}
2854
}
2855
/*********
2858
* Paned *
2859
*********/
2860
paned {
2861
> separator {
2862
min-width: 1px;
2863
min-height: 1px;
2864
-gtk-icon-source: none; // defeats the ugly default handle decoration
2865
border-style: none; // just to be sure
2866
background-color: transparent;
2867
// workaround, using background istead of a border since the border will get rendered twice (?)
2868
background-image: image($border_color);
2869
background-size: 1px 1px;
2870
background-clip: content-box; // avoids borders image being rendered twice (?)
2871
&.wide {
2873
min-width: 6px;
2874
min-height: 6px;
2875
background-color: $bg_color;
2876
background-image: image($border_color), image($border_color);
2877
background-size: 1px 1px, 1px 1px;
2878
}
2879
}
2880
&.horizontal > separator {
2882
background-repeat: repeat-y;
2883
&:dir(ltr) {
2885
margin: 0 -8px 0 0;
2886
padding: 0 8px 0 0;
2887
background-position: left;
2888
}
2889
&:dir(rtl) {
2891
margin: 0 0 0 -8px;
2892
padding: 0 0 0 8px;
2893
background-position: right;
2894
}
2895
&.wide {
2897
margin: 0;
2898
padding: 0;
2899
background-repeat: repeat-y, repeat-y;
2900
background-position: left, right;
2901
}
2902
}
2903
&.vertical > separator {
2905
margin: 0 0 -8px 0;
2906
padding: 0 0 8px 0;
2907
background-repeat: repeat-x;
2908
background-position: top;
2909
&.wide {
2911
margin: 0;
2912
padding: 0;
2913
background-repeat: repeat-x, repeat-x;
2914
background-position: bottom, top;
2915
}
2916
}
2917
}
2918
/**************
2921
* GtkInfoBar *
2922
**************/
2923
infobar {
2924
border-style: none;
2925
&.info { background-color: $info_bg_color; }
2927
&.question { background-color: $question_bg_color; }
2929
&.warning { background-color: $warning_bg_color; }
2931
&.error { background-color: $error_bg_color; }
2933
&.info,
2935
&.question,
2936
&.warning,
2937
&.error {
2938
> label, & { color: $inverse_fg_color; }
2939
button { @extend %button_selected; }
2941
selection {}
2943
*:link { @extend %link_selected; }
2945
}
2946
}
2947
/************
2950
* Tooltips *
2951
************/
2952
tooltip {
2953
&.background {
2954
// background-color needs to be set this way otherwise it gets drawn twice
2955
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2956
box-shadow: inset 0 1px $highlight_color;
2957
background-color: scale-alpha($base_color, $higher_opacity);
2958
}
2959
// @extend %osd;
2961
// padding: 4px; /* not working */
2963
border-radius: 2px;
2964
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2965
&:not(.csd) {
2967
border: 1px solid $border_color;
2968
border-radius: 2px + 1px;
2969
background-clip: $extra_background_clip;
2970
}
2971
// FIXME: we need a border or tooltips vanish on black background.
2973
decoration { background-color: transparent; }
2974
label {
2976
// tooltip label has already 6px margins
2977
min-height: 32px - 6px * 2;
2978
padding: 0 8px - 6px;
2979
}
2980
* {
2982
// workaround for Eclipse.
2983
// do not include any declaration here.
2984
// padding: 0;
2985
// background-color: transparent;
2986
// color: inherit;
2987
}
2988
}
2989
/*****************
2992
* Color Chooser *
2993
*****************/
2994
colorswatch {
2995
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2996
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2997
// applied to the overlay box.
2998
// base color corners rounding
3000
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3001
// sports a bigger radius.
3002
// nth-child is needed by the custom color strip.
3003
&.top {
3005
border-top-left-radius: $material_radius + 0.5px;
3006
border-top-right-radius: $material_radius + 0.5px;
3007
overlay {
3009
border-top-left-radius: $material_radius;
3010
border-top-right-radius: $material_radius;
3011
}
3012
}
3013
&.bottom {
3015
border-bottom-left-radius: $material_radius + 0.5px;
3016
border-bottom-right-radius: $material_radius + 0.5px;
3017
overlay {
3019
border-bottom-left-radius: $material_radius;
3020
border-bottom-right-radius: $material_radius;
3021
}
3022
}
3023
&.left,
3025
&:first-child:not(.top) {
3026
border-top-left-radius: $material_radius + 0.5px;
3027
border-bottom-left-radius: $material_radius + 0.5px;
3028
overlay {
3030
border-top-left-radius: $material_radius;
3031
border-bottom-left-radius: $material_radius;
3032
}
3033
}
3034
&.right,
3036
&:last-child:not(.bottom) {
3037
border-top-right-radius: $material_radius + 0.5px;
3038
border-bottom-right-radius: $material_radius + 0.5px;
3039
overlay {
3041
border-top-right-radius: $material_radius;
3042
border-bottom-right-radius: $material_radius;
3043
}
3044
}
3045
&.dark overlay { color: $light_fg_color; }
3047
&.light overlay { color: $dark_fg_color; }
3049
&.dark { color: $light_fg_color; } // for focus ring
3051
&.light { color: $dark_fg_color; } // for focus ring
3053
&:drop(active) {
3055
box-shadow: none;
3056
&.light overlay {
3058
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3059
}
3060
&.dark overlay {
3062
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3063
}
3064
}
3065
overlay {
3067
transition: $shadow_transition;
3068
box-shadow: $shadow_1;
3069
&:hover { box-shadow: $shadow_2; }
3071
}
3072
&#add-color-button {
3074
border-radius: $material_radius $material_radius 0 0;
3075
color: $light_fg_color; // for focus ring
3076
&:only-child { border-radius: $material_radius; }
3078
overlay {
3080
background-image: linear-gradient(to right,
3081
$error_bg_color 25%,
3082
$warning_bg_color 25%, $warning_bg_color 50%,
3083
$info_bg_color 50%, $info_bg_color 75%,
3084
$question_bg_color 75%);
3085
color: $light_fg_color;
3086
}
3087
}
3088
&:disabled {
3090
opacity: $disabled_opacity;
3091
overlay { box-shadow: none; }
3093
}
3094
row:selected & {
3096
}
3097
&#editor-color-sample {
3099
border-radius: $material_radius + 0.5px;
3100
overlay { border-radius: $material_radius; }
3102
// overlay:hover { box-shadow: $shadow_1; }
3104
}
3105
}
3106
// colorscale popup
3108
colorchooser .popover.osd {
3109
transition: $shadow_transition;
3110
border-radius: 2px;
3111
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3112
background-color: $base_color;
3113
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3115
spinbutton:not(.vertical) { @extend %entry.flat; }
3117
}
3118
/********
3121
* Misc *
3122
********/
3123
// content view (grid/list)
3124
.content-view {
3125
background-color: $bg_color;
3126
// &:hover { -gtk-icon-effect: highlight; }
3128
rubberband, .rubberband { @extend rubberband; }
3130
}
3131
.scale-popup {
3133
.osd & { @extend %osd; }
3134
.osd & button.flat { // FIXME: quick hack, redo properly
3136
}
3137
button { // +/- buttons on GtkVolumeButton popup
3139
}
3140
}
3141
/**********************
3144
* Window Decorations *
3145
*********************/
3146
decoration {
3147
transition: $shadow_transition;
3148
border-radius: 2px 2px 0 0;
3149
box-shadow: $shadow_4, 0 16px 16px transparent;
3150
// FIXME rationalize shadows
3152
// this is used for the resize cursor area
3154
margin: 8px;
3155
&:backdrop {
3157
// the transparent shadow here is to enforce that the shadow extents don't
3158
// change when we go to backdrop, to prevent jumping windows.
3159
// The biggest shadow should be in the same order then in the active state
3160
// or the jumping will happen during the transition.
3161
box-shadow: $shadow_2, 0 16px 16px transparent;
3162
}
3163
.maximized &,
3165
.fullscreen &,
3166
.tiled & { border-radius: 0; }
3167
.popup & { box-shadow: none; }
3169
// server-side decorations as used by mutter
3171
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3172
.csd.popup & {
3174
border-radius: 2px;
3175
box-shadow: $shadow_2;
3176
}
3177
tooltip.csd & {
3179
border-radius: 2px;
3180
box-shadow: $shadow_2;
3181
}
3182
messagedialog.csd & {
3184
border-radius: 2px;
3185
// box-shadow: $shadow_4, 0 16px 16px transparent;
3186
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3188
}
3189
.solid-csd & {
3191
margin: 0;
3192
// padding: 4px;
3193
border-radius: 0;
3194
box-shadow: none;
3195
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3196
background-color: $titlebar_bg_color;
3197
}
3198
}
3199
// Window Close button
3201
button.titlebutton {
3202
// @extend %simple_flat_button;
3203
@extend %circular_button;
3205
.selection-mode & {
3207
}
3208
}
3209
// catch all extend :)
3212
%selected_items {
3214
background-color: $primary_color;
3215
@at-root %nobg_selected_items, & {
3217
color: $inverse_fg_color;
3218
&:disabled { color: $disabled_inverse_fg_color; }
3220
}
3221
}
3222
.monospace { font-family: monospace; }
3224
/**********************
3227
* Touch Copy & Paste *
3228
*********************/
3229
// touch selection handlebars for the Popover.osd above
3230
cursor-handle {
3231
border-radius: $circular_radius;
3232
background-color: $accent_color;
3233
background-image: none;
3234
&.top:dir(ltr), &.bottom:dir(rtl) {
3236
padding-left: 6px;
3237
border-top-right-radius: 0;
3238
}
3239
&.bottom:dir(ltr), &.top:dir(rtl) {
3241
padding-right: 6px;
3242
border-top-left-radius: 0;
3243
}
3244
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3246
-GtkWidget-text-handle-width: 24;
3247
-GtkWidget-text-handle-height: 30;
3248
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3250
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3251
url('#{$_url}@2.png'));
3252
}
3253
}
3254
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3256
// shortcut window keys
3258
.keycap {
3259
min-width: 28px - 8px * 2;
3260
min-height: 28px - 2px;
3261
margin-top: 2px;
3262
padding-bottom: 2px;
3263
padding-left: 8px;
3264
padding-right: 8px;
3265
border: solid 1px $border_color;
3267
border-radius: 2px + 1px;
3268
box-shadow: inset 0 -2px $border_color;
3269
background-color: $base_color;
3270
color: $fg_color;
3271
font-size: smaller;
3272
}
3273
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3275
transition: $longer_transition;
3276
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3277
caret-color: $accent_color;
3278
}
3279
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3281
stackswitcher button.circular,
3283
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3284
min-width: $medium_size;
3285
min-height: $medium_size;
3286
padding: 0;
3287
}
3288