ASCII text
1
$asset_suffix: if($variant=='dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
$small_size: if($laptop == 'true', 20px, 24px);
5
$medium_size: if($laptop == 'true', 32px, 36px);
6
$large_size: if($laptop == 'true', 44px, 48px);
7
$container_padding: 6px;
9
$bar_size: 4px;
11
$menuitem_size: 28px;
12
$md_radius: 2px;
14
$circular_radius: 100px;
15
$shorter_duration: 0.2s;
17
$longer_duration: 0.3s;
18
$standard_curve: cubic-bezier(0.4, 0.0, 0.2, 1);
20
$deceleration_curve: cubic-bezier(0.0, 0.0, 0.2, 1);
21
$acceleration_curve: cubic-bezier(0.4, 0.0, 1, 1);
22
$sharp_curve: cubic-bezier(0.4, 0.0, 0.6, 1);
23
$shorter_transition: all $shorter_duration $deceleration_curve;
25
$longer_transition: all $longer_duration $deceleration_curve;
26
$shadow_transition: box-shadow $shorter_duration $deceleration_curve;
27
* {
29
padding: 0;
30
background-clip: padding-box;
31
-GtkToolButton-icon-spacing: 4;
33
-GtkTextView-error-underline-color: $error_color;
34
// The size for scrollbars. The slider is 2px smaller, but we keep it
36
// up so that the whole area is sensitive to button presses for the
37
// slider. The stepper button is larger in both directions, the slider
38
// only in the width
39
-GtkScrolledWindow-scrollbar-spacing: 0;
41
-GtkToolItemGroup-expander-size: 11;
43
-GtkWidget-text-handle-width: 24;
45
-GtkWidget-text-handle-height: 24;
46
-GtkDialog-button-spacing: 4;
48
-GtkDialog-action-area-border: 0;
49
// We use the outline properties to signal the focus properties
51
// to the adwaita engine: using real CSS properties is faster,
52
// and we don't use any outlines for now.
53
outline-style: solid;
55
outline-width: 2px;
56
outline-color: $track_color;
57
outline-offset: -4px;
58
-gtk-outline-radius: 2px;
59
-gtk-secondary-caret-color: $primary_color;
61
}
62
/***************
65
* Base States *
66
***************/
67
.background {
68
background-color: $bg_color;
69
color: $fg_color;
70
}
71
/*
73
These wildcard seems unavoidable, need to investigate.
74
Wildcards are bad and troublesome, use them with care,
75
or better, just don't.
76
Everytime a wildcard is used a kitten dies, painfully.
77
*/
78
*:disabled { -gtk-icon-effect: dim; }
80
.gtkstyle-fallback {
82
background-color: $bg_color;
83
color: $fg_color;
84
&:hover {
86
background-color: darken($bg_color, 5%);
87
color: $fg_color;
88
}
89
&:active {
91
background-color: darken($bg_color, 10%);
92
color: $fg_color;
93
}
94
&:disabled {
96
background-color: $bg_color;
97
color: $disabled_fg_color;
98
}
99
&:selected {
101
background-color: $primary_color;
102
color: $inversed_fg_color;
103
}
104
}
105
.view,
107
%view {
108
@extend row.activatable;
109
background-color: $base_color;
111
color: $fg_color;
112
&:hover, &:active, &:selected { border-radius: 2px; }
114
&:disabled {
116
// background-color: $alt_base_color;
117
color: $disabled_fg_color;
118
}
119
&:selected { @extend %selected_items; }
121
}
122
.view,
124
textview {
125
text {
126
// @extend %view;
127
background-color: $base_color;
129
color: $fg_color;
130
&:disabled {
132
// background-color: $alt_base_color;
133
color: $disabled_fg_color;
134
}
135
selection { @extend %selected_items; }
137
}
138
}
139
textview border {
141
background-color: $alt_base_color;
142
color: $tertiary_fg_color;
143
}
144
iconview { @extend .view; }
146
.rubberband,
148
rubberband {
149
border: 1px solid $alt_primary_color;
150
background-color: scale-alpha($alt_primary_color, $lower_opacity);
151
}
152
flowbox {
154
rubberband { @extend rubberband; }
155
flowboxchild {
157
outline-offset: -2px;
158
padding: 4px;
159
border-radius: 2px;
160
&:selected { @extend %selected_items; }
162
}
163
}
164
label {
166
caret-color: currentColor; // this shouldn't be needed.
167
&.separator {
169
@extend .dim-label;
170
color: $fg_color;
172
}
173
row:selected &,
175
&:selected { @extend %nobg_selected_items; }
176
selection {
178
background-color: $primary_color;
179
color: $inversed_fg_color;
180
}
181
&:disabled {
183
color: $disabled_fg_color;
184
selection { @extend %selected_items:disabled; }
186
tab &,
188
button &,
189
menuitem & { color: inherit; }
190
}
191
}
192
.dim-label { opacity: $hint_opacity; }
194
assistant {
196
.sidebar {
197
padding: 4px 0;
198
// background-color: $base_color;
199
// border-top: 1px solid $borders_color;
200
}
201
// &.csd .sidebar { border-top-style: none; }
203
.sidebar label {
205
min-height: $medium_size;
206
padding: 0 12px;
207
color: $tertiary_fg_color;
208
font-weight: 500;
209
&.highlight { color: $fg_color; }
211
}
212
}
213
%osd, .osd { opacity: $higher_opacity; }
215
/*********************
218
* Spinner Animation *
219
*********************/
220
@keyframes spin {
221
to { -gtk-icon-transform: rotate(1turn); }
222
}
223
@keyframes spin_colors {
225
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
226
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
227
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
228
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
229
}
230
spinner {
232
background: none;
233
opacity: 0; // non spinning spinner makes no sense
234
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
235
&:checked {
237
opacity: 1;
238
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
239
&:disabled { opacity: $disabled_opacity; }
241
}
242
}
243
/****************
246
* Text Entries *
247
****************/
248
%entry,
249
entry {
250
%entry_basic, & {
251
min-height: $medium_size;
252
padding: 0 8px;
253
border-radius: 2px;
254
@include entry(normal);
256
&:focus { @include entry(focus); }
258
&:disabled { @include entry(disabled); }
260
&.flat {
262
border-radius: 0;
263
@include entry(flat-normal);
265
&:focus { @include entry(flat-focus); }
267
&:disabled { @include entry(flat-disabled); }
269
}
270
image { // icons inside the entry
272
// @extend %simple_flat_button;
273
min-height: $small_size;
275
min-width: $small_size;
276
-gtk-outline-radius: $circular_radius;
277
border-radius: $circular_radius;
278
color: gtkalpha(currentColor, $enabled_opacity);
279
&:hover, &:active { color: currentColor; }
281
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
283
&.left { margin-left: -2px; margin-right: 2px; }
285
&.right { margin-left: 2px; margin-right: -2px; }
287
}
288
undershoot {
290
&.left { @include undershoot(left); }
291
&.right { @include undershoot(right); }
293
}
294
selection { @extend %selected_items; }
296
// entry error and warning style
298
@each $e_type, $e_color in (error, $error_color),
299
(warning, $warning_color) {
300
&.#{$e_type} {
301
@include entry(normal, $e_color);
302
&:focus { @include entry(focus, $e_color); }
304
&:disabled { @include entry(disabled, $e_color); }
306
&.flat {
308
@include entry(flat-normal, $e_color);
309
&:focus { @include entry(flat-focus, $e_color); }
311
&:disabled { @include entry(flat-disabled, $e_color); }
313
}
314
}
315
}
316
&:drop(active) {
318
// box-shadow: inset 0 0 0 2px $accent_color;
319
}
320
.osd & {
322
}
323
}
324
progress {
326
margin: 2px (2px - 8px);
327
border-style: none none solid;
328
border-width: 2px;
329
border-color: $primary_color;
330
// border-radius: 0;
331
// box-shadow: none;
332
background-color: transparent;
333
// background-image: none;
334
}
335
// linked entries
337
.linked:not(.vertical) > & { @extend %linked; }
338
// Vertically linked entries
340
.linked.vertical > & { @extend %linked_vertical; }
341
.linked:not(.vertical) > &.flat,
343
.linked.vertical > &.flat { border-radius: 0; }
344
}
345
treeview entry {
347
&.flat, & {
348
min-height: 0;
349
padding: 2px;
350
border-radius: 0;
351
background-color: $base_color;
352
&, &:focus {
354
border-image: none;
355
box-shadow: none;
356
}
357
}
358
}
359
/***********
362
* Buttons *
363
***********/
364
// stuff for .needs-attention
365
@keyframes needs_attention {
366
from {
367
background-image: -gtk-gradient(radial,
368
center center, 0,
369
center center, 0.001,
370
to($accent_color),
371
to(transparent));
372
}
373
to {
375
background-image: -gtk-gradient(radial,
376
center center, 0,
377
center center, 0.5,
378
to($accent_color),
379
to(transparent));
380
}
381
}
382
%button,
384
button {
385
@at-root %button_basic, & {
386
min-height: 24px;
387
min-width: 16px;
388
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
389
border-radius: 2px;
390
font-weight: 500;
391
@include button(normal);
393
&:hover { @include button(hover); }
395
&:active { @include button(active); }
397
&:disabled { @include button(disabled); }
399
&:checked { @include button(checked); }
401
&:checked:disabled { @include button(checked-disabled); }
403
@at-root %flat_button, &.flat {
405
@at-root %simple_flat_button, & {
406
@include button(flat-normal);
407
&:hover { @include button(flat-hover); }
409
&:active { @include button(flat-active); }
411
&:disabled { @include button(flat-disabled); }
413
}
414
&:checked { @include button(flat-checked); }
416
&:checked:disabled { @include button(flat-checked-disabled); }
418
}
419
&.text-button {
421
padding-left: 16px;
422
padding-right: 16px;
423
}
424
&.image-button {
426
min-width: 24px;
427
padding: ($medium_size - 24px) / 2;
428
-gtk-outline-radius: $circular_radius;
429
border-radius: $circular_radius;
430
}
431
&.text-button.image-button {
433
-gtk-outline-radius: 2px;
434
border-radius: 2px;
435
label {
437
&:first-child {
438
margin-left: 16px - ($medium_size - 24px) / 2;
439
margin-right: 2px;
440
}
441
&:last-child {
443
margin-left: 2px;
444
margin-right: 16px - ($medium_size - 24px) / 2;
445
}
446
&:only-child {
448
margin-left: 16px - ($medium_size - 24px) / 2;
449
margin-right: 16px - ($medium_size - 24px) / 2;
450
}
451
}
452
image:not(:only-child) {
454
&:first-child { margin-left: (24px - 16px) / 2; }
455
&:last-child { margin-right: (24px - 16px) / 2; }
457
}
458
}
459
.linked > & { @extend %linked; }
461
.linked.vertical > & { @extend %linked_vertical; }
463
.linked > &.flat,
465
.linked.vertical > &.flat {
466
border-radius: 2px;
467
&.image-button {
469
-gtk-outline-radius: $circular_radius;
470
border-radius: $circular_radius;
471
}
472
&.text-button.image-button {
474
-gtk-outline-radius: 2px;
475
border-radius: 2px;
476
}
477
}
478
&:drop(active) {
480
// box-shadow: inset 0 0 0 2px $accent_color;
481
}
482
}
483
@at-root %button_selected, row:selected & {
485
&:disabled { color: $disabled_secondary_inversed_fg_color; }
486
}
487
// big standalone buttons like in Documents pager
489
&.osd {
490
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
491
&.image-button { padding: ($large_size - 24px) / 2; }
493
&:disabled { opacity: 0; }
495
}
496
//overlay / OSD style
498
@at-root %osd_button,
499
.osd & {
500
}
501
// Suggested and Destructive Action buttons
503
@each $b_type, $b_color in (suggested-action, $suggested_color),
504
(destructive-action, $destructive_color) {
505
&.#{$b_type} {
506
background-color: $b_color;
507
color: $inversed_fg_color;
508
// @include button(normal, $b_color, $inversed_fg_color);
510
// &:hover { @include button(hover, $b_color, $inversed_fg_color); }
512
// &:active, &:checked { @include button(active, $b_color, $inversed_fg_color); }
514
&:disabled { @include button(disabled, $b_color, $inversed_fg_color); }
516
&:checked { background-color: mix($inversed_fg_color, $b_color, percentage($lower_opacity)); }
518
&.flat {
520
background-color: transparent;
521
color: $b_color;
522
// @include button(flat-normal, $b_color, $inversed_fg_color);
524
// &:hover { @include button(flat-hover, $b_color, $inversed_fg_color); }
526
// &:active, &:checked { @include button(flat-active, $b_color, $inversed_fg_color); }
528
&:disabled { @include button(flat-disabled, $b_color, $inversed_fg_color); }
530
}
531
.osd & {
533
}
534
}
535
}
536
.stack-switcher > & {
538
// to position the needs attention dot, padding is added to the button
539
// child, a label needs just lateral padding while an icon needs vertical
540
// padding added too.
541
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
543
> label {
545
padding-left: 6px; // label padding
546
padding-right: 6px; //
547
}
548
> image {
550
padding-left: 6px; // image padding
551
padding-right: 6px; //
552
padding-top: 3px; //
553
padding-bottom: 3px; //
554
}
555
&.text-button {
557
// compensate text-button paddings
558
padding-left: 16px - 6px;
559
padding-right: 16px - 6px;
560
}
561
&.image-button {
563
// we want image buttons to have a 1:1 aspect ratio, so compensation
564
// of the padding added to the GtkImage is needed
565
padding-left: ($medium_size - 16px) / 2 - 6px;
566
padding-right: ($medium_size - 16px) / 2 - 6px;
567
}
568
&.needs-attention {
570
> label,
571
> image { @extend %needs_attention; }
572
&:checked {
574
> label,
575
> image {
576
animation: none;
577
background-image: none;
578
}
579
}
580
}
581
}
582
// hide separators
584
separator {
585
min-width: 0;
586
min-height: 0;
587
background: transparent;
588
}
589
// &.font,
591
// &.file { separator { background-color: transparent; }}
592
// &.font { > box > box > label { font-weight: bold; }}
594
// inline-toolbar buttons
596
.inline-toolbar & {
597
// @extend %button_basic.flat;
598
&:not(.text-button) { @extend %circular_button; }
600
}
601
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
603
}
604
%needs_attention {
606
animation: needs_attention $longer_duration $deceleration_curve forwards;
607
background-repeat: no-repeat;
608
background-position: right 3px;
609
background-size: 6px 6px;
610
&:dir(rtl) { background-position: left 3px; }
612
}
613
// all the following is for the +|- buttons on inline toolbars, that way
615
// should really be deprecated...
616
.inline-toolbar toolbutton > button { // redefining the button look is
617
// needed since those are flat...
618
}
619
// More inline toolbar buttons
621
toolbar.inline-toolbar toolbutton {
622
// > button.flat { @extend %linked_middle; }
623
// &:first-child > button.flat { @extend %linked:first-child; }
625
// &:last-child > button.flat { @extend %linked:last-child; }
627
// &:only-child > button.flat { @extend %linked:only-child; }
629
}
630
%linked_middle {
632
-gtk-outline-radius: 2px;
633
border-radius: 0;
634
}
635
%linked {
637
@extend %linked_middle;
638
&:first-child {
640
border-top-left-radius: 2px;
641
border-bottom-left-radius: 2px;
642
}
643
&:last-child {
645
border-top-right-radius: 2px;
646
border-bottom-right-radius: 2px;
647
}
648
&:only-child {
650
border-radius: 2px;
651
}
652
}
653
%linked_vertical_middle {
655
-gtk-outline-radius: 2px;
656
border-radius: 0;
657
}
658
%linked_vertical{
660
@extend %linked_vertical_middle;
661
&:first-child {
663
border-top-left-radius: 2px;
664
border-top-right-radius: 2px;
665
}
666
&:last-child {
668
border-bottom-left-radius: 2px;
669
border-bottom-right-radius: 2px;
670
}
671
&:only-child {
673
border-radius: 2px;
674
}
675
}
676
/* menu buttons */
678
modelbutton.flat,
679
.menuitem.button.flat {
680
min-height: $menuitem_size;
681
padding: 0 8px;
682
border-radius: 2px;
683
color: inherit;
684
@extend %simple_flat_button;
686
&:selected { @extend %selected_items; }
688
check,
690
radio {
691
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
692
&, &:hover { background-image: none; }
694
&:active { animation: none; }
696
&:last-child { margin-left: -8px; margin-right: -16px; }
698
&:first-child { margin-left: -16px; margin-right: -8px; }
700
}
701
check:not(:indeterminate):checked { @extend %check_checked; }
703
// radio:not(:indeterminate):checked { @extend %radio_checked; }
705
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
707
}
708
modelbutton.flat arrow {
710
background: none;
711
&:hover { background: none; }
713
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
715
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
717
}
718
button.color {
720
min-height: $small_size;
721
min-width: $small_size;
722
padding: $container_padding;
723
colorswatch:only-child {
725
// &, overlay { border-radius: 0; }
726
}
727
}
728
/*********
731
* Links *
732
*********/
733
*:link {
734
&, &:hover, &:active { color: $link_color; }
735
&:visited {
737
&, &:hover, &:active { color: $link_visited_color; }
738
}
739
@at-root %link_selected,
741
&:selected,
742
*:selected & { color: $inversed_fg_color; }
743
}
744
button:link,
746
button:visited {
747
@extend *:link;
748
> label { text-decoration-line: underline; }
750
}
751
/*****************
753
* GtkSpinButton *
754
*****************/
755
spinbutton {
756
&:not(.vertical) {
757
// in this horizontal configuration, the whole spinbutton
758
// behaves as the entry, so we extend the entry styling
759
// and nuke the style on the internal entry
760
@extend %entry;
761
padding: 0;
763
%spinbutton_entry,
765
entry {
766
min-width: $large_size - 8px * 2;
767
// reset all the other props since the spinbutton node is styled here
768
margin: 0;
769
border-image: none;
770
border-radius: 0;
771
box-shadow: none;
772
background-color: transparent;
773
//
774
// This will help to simplify spinbutton's code, but unfortunatelly
775
// doesn't work properly in :dir(rtl). It needs z-index property.
776
//
777
// min-width: $large_size - 8px;
778
//
779
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
780
//
781
// &:dir(ltr) {
782
// margin-right: -$spinbuttons_width;
783
// padding-right: $spinbuttons_width;
784
// }
785
//
786
// &:dir(rtl) {
787
// margin-left: -$spinbuttons_width;
788
// padding-left: $spinbuttons_width;
789
// }
790
}
791
button {
793
// margin: $container_padding;
794
border: solid $container_padding transparent;
795
@extend %simple_flat_button;
797
@extend %small_button;
799
&.up:dir(ltr),
801
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
802
&.up:dir(rtl),
804
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
805
}
806
}
807
// OSD horizontal
809
.osd &:not(.vertical) {
810
button {
811
}
812
}
813
// Vertical
815
&.vertical {
816
// in the vertical configuration, we treat the spinbutton
817
// as a box, and tweak the style of the entry in the middle
818
// so that it's linked
819
// FIXME: this should not be set at all, but otherwise it gets the wrong
821
// color
822
&:disabled { color: $disabled_fg_color; }
823
&:drop(active) {
825
box-shadow: none;
826
}
827
entry {
829
min-height: $medium_size;
830
min-width: $large_size;
831
padding: 0;
832
}
833
button {
835
min-height: $medium_size;
836
min-width: $large_size;
837
padding: 0;
838
@extend %simple_flat_button;
840
&.up { border-radius: 2px 2px 0 0; }
842
&.down { border-radius: 0 0 2px 2px; }
844
}
845
}
846
// OSD vertical
848
.osd &.vertical button:first-child {
849
}
850
// Misc
852
treeview &:not(.vertical) {
853
min-height: 0;
854
border-style: none;
855
border-radius: 0;
856
entry {
858
min-height: 0;
859
padding: 1px 2px;
860
}
861
}
862
}
863
/**************
866
* ComboBoxes *
867
**************/
868
combobox {
869
arrow {
870
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
871
min-height: 16px;
872
min-width: 16px;
873
}
874
button.combo:checked { transition: none; } // workaround for menuitem selection
876
button.combo cellview {
878
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
879
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
880
}
881
#gtk-combobox-popup-menu {
883
padding: 2px 0;
884
menuitem {
886
min-height: $medium_size - 2px * 2;
887
padding: 0 8px;
888
}
889
}
890
&.linked {
892
button:nth-child(2) {
893
&:dir(ltr) { @extend %linked:last-child; }
894
&:dir(rtl) { @extend %linked:first-child; }
895
}
896
}
897
&:drop(active) { // FIXME: untested
899
box-shadow: none;
900
// button.combo { @extend %button_basic:drop(active); }
902
}
903
}
904
.linked > combobox > box > button.combo {
906
// the combo is a composite widget so the way we do button linking doesn't
907
// work, special case needed. See
908
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
909
&:dir(ltr),
911
&:dir(rtl) { @extend %linked_middle; } // specificity bump
912
}
913
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
915
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
916
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
917
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
919
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
920
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
921
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
922
%combo_flat {
924
border-radius: 0;
925
background-image: none;
926
font-weight: inherit;
927
@include entry(flat-normal);
929
&:hover { box-shadow: inset 0 -2px $track_color; }
931
&:checked {
933
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
934
$primary_color 100%,
935
transparent 0%)
936
0 0 2 / 0 0 2px;
937
}
938
&:disabled { color: $disabled_fg_color; }
940
}
941
/************
944
* Toolbars *
945
************/
946
toolbar {
947
-GtkWidget-window-dragging: true;
948
padding: $container_padding / 2;
949
background-color: $bg_color;
950
button { @extend %button_basic.flat; }
952
// on OSD
954
.osd & { background-color: transparent; }
955
// stand-alone OSD toolbars
957
&.osd {
958
transition: $shadow_transition;
959
padding: $container_padding;
960
border-radius: 2px;
961
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
962
background-color: $base_color;
963
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
965
&.left,
967
&.right,
968
&.top,
969
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
970
}
971
// toolbar separators
973
&.horizontal separator { margin: $container_padding / 2; }
974
&.vertical separator { margin: $container_padding / 2; }
975
&:not(.inline-toolbar):not(.osd) {
977
scale,
978
entry,
979
spinbutton,
980
button { margin: $container_padding / 2; }
981
.linked entry,
983
.linked spinbutton,
984
.linked button {
985
&:not(:first-child) { margin-left: 0; }
986
&:not(:last-child) { margin-right: 0; }
987
}
988
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
990
}
991
}
992
//searchbar, location-bar & inline-toolbar
994
.inline-toolbar {
995
padding: $container_padding;
996
border-style: solid;
997
border-width: 0 1px 1px;
998
border-color: $borders_color;
999
background-color: $alt_base_color;
1000
}
1001
searchbar,
1003
.location-bar {
1004
padding: $container_padding;
1005
border-style: solid;
1006
border-width: 0 0 1px;
1007
border-color: $borders_color;
1008
background-color: $bg_color;
1009
background-clip: border-box;
1010
}
1011
/***************
1014
* Header bars *
1015
***************/
1016
%titlebar,
1017
headerbar {
1018
transition: background-color $shorter_duration $deceleration_curve;
1019
min-height: $large_size;
1020
padding: 0 $container_padding;
1021
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1022
background-color: $headerbar_color;
1023
color: $inversed_fg_color;
1024
&:disabled :not(button) > label { color: $disabled_inversed_fg_color; }
1026
&:backdrop {
1028
color: $secondary_inversed_fg_color;
1029
&:disabled :not(button) > label { color: $disabled_secondary_inversed_fg_color; }
1031
}
1032
.title {
1034
transition: $longer_transition;
1035
padding: 0 12px;
1036
font-weight: bold;
1037
}
1038
.subtitle {
1040
transition: $longer_transition;
1041
padding: 0 12px;
1042
font-size: smaller;
1043
@extend .dim-label;
1045
}
1046
button:not(.suggested-action):not(.destructive-action) {
1048
@extend %button_basic.flat;
1049
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1051
currentColor 0%,
1052
transparent 0%)
1053
0 0 0 / 0 0 0px;
1054
&:checked {
1056
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1057
currentColor 100%,
1058
transparent 0%)
1059
0 0 2 / 0 0 2px;
1060
&, &:disabled { background-color: transparent; }
1062
}
1063
}
1064
button.suggested-action, button.destructive-action {
1066
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1067
}
1068
&.selection-mode {
1070
transition: background-color 0 $longer_duration;
1071
animation: header_ripple_effect $longer_duration $deceleration_curve;
1072
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1073
background-color: $primary_color;
1074
color: $inversed_fg_color;
1075
&:backdrop {
1077
color: $secondary_inversed_fg_color;
1078
}
1079
.subtitle:link { @extend *:link:selected; }
1081
button:not(.suggested-action):not(.destructive-action) {
1083
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1084
currentColor 0%,
1085
transparent 0%)
1086
0 0 0 / 0 0 0px;
1087
color: currentColor;
1088
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1090
&:checked {
1092
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1093
currentColor 100%,
1094
transparent 0%)
1095
0 0 2 / 0 0 2px;
1096
color: currentColor;
1097
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1099
}
1100
}
1101
.selection-menu {
1103
padding-left: 16px;
1104
padding-right: 16px;
1105
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1107
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1109
}
1110
}
1111
.fullscreen &,
1113
.tiled &,
1114
.maximized & {
1115
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1116
box-shadow: $z-depth-1;
1117
}
1118
&.default-decoration {
1120
min-height: $small_size;
1121
padding: $container_padding;
1122
border-width: 0;
1123
button.titlebutton {
1125
min-height: $small_size;
1126
min-width: $small_size;
1127
margin: 0;
1128
padding: 0;
1129
&:active { // add fallback
1131
background-image: radial-gradient(circle farthest-corner at center,
1132
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1133
transparent 0%),
1134
image(gtkalpha(currentColor, $lower_opacity / 2));
1135
}
1136
}
1137
}
1138
.solid-csd & {
1140
&:dir(rtl), &:dir(ltr) { // specificity bump
1141
margin-left: -2px;
1142
margin-right: -2px;
1143
margin-top: -2px;
1144
// border-radius: 0;
1145
box-shadow: inset 0 1px $secondary_highlight_color;
1146
}
1147
}
1148
}
1149
headerbar {
1151
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1152
entry,
1153
spinbutton,
1154
// separator,
1155
button {
1156
margin-top: $container_padding;
1157
margin-bottom: $container_padding;
1158
}
1159
switch {
1161
margin-top: $container_padding * 2;
1162
margin-bottom: $container_padding * 2;
1163
}
1164
}
1165
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1167
border-top-left-radius: 2px;
1168
border-top-right-radius: 2px;
1169
}
1170
headerbar {
1172
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1173
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1174
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1176
}
1177
.titlebar:not(headerbar) {
1179
window.csd > & {
1180
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1181
padding: 0;
1182
background-color: transparent;
1183
background-image: none;
1184
border-style: none;
1185
box-shadow: none;
1186
}
1187
> separator {
1189
background-color: $headerbar_color;
1190
background-image: image($borders_color);
1191
}
1192
@extend %titlebar;
1194
}
1195
/************
1198
* Pathbars *
1199
************/
1200
%pathbar_button,
1201
.path-bar button {
1202
&.text-button, &.image-button, & {
1203
padding-left: 6px;
1204
padding-right: 6px;
1205
}
1206
&.text-button.image-button, & {
1208
// label:last-child { padding-left: 2px; padding-right: 8px; }
1209
// label:first-child { padding-left: 8px; padding-right: 2px; }
1210
}
1211
image {
1213
padding-left: ($medium_size - 16px) / 2 - 6px;
1214
padding-right: ($medium_size - 16px) / 2 - 6px;
1215
}
1216
&.slider-button {
1218
padding-left: 0;
1219
padding-right: 0;
1220
}
1221
:not(headerbar) & {
1223
@extend %flat_button;
1224
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1226
$primary_color 0%,
1227
transparent 0%)
1228
0 0 0 / 0 0 0px;
1229
border-radius: 2px;
1230
&:checked {
1232
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1233
$primary_color 100%,
1234
transparent 0%)
1235
0 0 2 / 0 0 2px;
1236
&, &:disabled { background-color: transparent; }
1238
}
1239
}
1240
}
1241
/**************
1244
* Tree Views *
1245
**************/
1246
treeview.view {
1247
@at-root * {
1248
-GtkTreeView-horizontal-separator: 4;
1249
-GtkTreeView-grid-line-width: 1;
1250
-GtkTreeView-grid-line-pattern: '';
1251
-GtkTreeView-tree-line-width: 1;
1252
-GtkTreeView-tree-line-pattern: '';
1253
-GtkTreeView-expander-size: 16;
1254
}
1255
border-left-color: $track_color; // this is actually the tree lines color,
1257
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1258
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1260
&:hover, &:active, &:selected { border-radius: 0; }
1262
&.separator {
1264
min-height: 1px + 2px * 2;
1265
color: $borders_color;
1266
}
1267
&:drop(active) {
1269
border-style: solid none;
1270
border-width: 1px;
1271
border-color: $accent_color;
1272
&.after { border-top-style: none; }
1274
&.before { border-bottom-style: none; }
1276
}
1277
&.expander {
1279
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1280
-gtk-icon-transform: rotate(-90deg);
1281
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1283
&:checked { -gtk-icon-transform: unset; }
1285
color: $secondary_fg_color;
1287
&:hover, &:active { color: $fg_color; }
1289
&:disabled { color: $disabled_secondary_fg_color; }
1291
&:selected {
1293
color: $secondary_inversed_fg_color;
1294
&:hover, &:active { color: $inversed_fg_color; }
1296
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1298
}
1299
}
1300
&.progressbar { // progress bar in treeviews
1302
border-style: none none solid;
1303
border-width: $bar_size;
1304
border-color: $primary_color;
1305
box-shadow: none;
1306
background-color: transparent;
1307
&:selected { border-color: currentColor; }
1309
}
1310
&.trough { // progress bar trough in treeviews
1312
border-style: none none solid;
1313
border-width: $bar_size;
1314
border-color: scale-alpha($primary_color, $lower_opacity);
1315
box-shadow: none;
1316
background-color: transparent;
1317
&:selected { border-color: $track_color; }
1319
}
1320
header {
1322
button {
1323
@extend row.activatable;
1324
padding: 2px 6px;
1326
border-style: none solid solid none;
1327
border-width: 1px;
1328
border-color: $borders_color;
1329
border-radius: 0;
1330
background-clip: border-box;
1331
&, &:hover, &:active { box-shadow: none; }
1333
&, &:disabled { background-color: $base_color; }
1335
&:last-child { border-right-style: none; }
1337
}
1338
}
1339
button.dnd,
1341
header.button.dnd { // for treeview-like derive widgets
1342
padding: 2px 6px;
1343
border-style: none solid solid;
1344
border-width: 1px;
1345
border-color: $borders_color;
1346
border-radius: 0;
1347
box-shadow: none;
1348
background-color: $base_color;
1349
background-clip: border-box;
1350
color: $primary_color;
1351
}
1352
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1354
}
1355
/*********
1358
* Menus *
1359
*********/
1360
menubar,
1361
.menubar {
1362
-GtkWidget-window-dragging: true;
1363
padding: 0;
1364
// box-shadow: inset 0 -1px $borders_color;
1365
background-color: $headerbar_color;
1366
> menuitem {
1368
transition: $shorter_transition;
1369
min-height: 20px;
1370
padding: 4px 8px;
1371
color: $secondary_inversed_fg_color;
1372
&:hover { //Seems like it :hover even with keyboard focus
1374
transition: none;
1375
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1376
color: $inversed_fg_color;
1377
}
1378
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1380
}
1381
}
1382
.csd.popup { border-radius: 2px; }
1384
menu,
1386
.menu,
1387
.context-menu {
1388
margin: 4px 0;
1389
padding: 4px 0;
1390
box-shadow: inset 0 1px $highlight_color;
1391
background-color: $base_color;
1392
border: 1px solid $borders_color; // adds borders in a non composited env
1393
.csd & {
1395
border: none; // axes borders in a composited env
1396
border-radius: 2px;
1397
}
1398
menuitem {
1400
transition: $shorter_transition;
1401
min-height: 20px;
1402
min-width: 40px;
1403
padding: 4px 8px;
1404
font: initial;
1405
text-shadow: none;
1406
&:hover {
1408
transition: none;
1409
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1410
}
1411
&:disabled { color: $disabled_fg_color; }
1413
// submenu indicators
1415
arrow {
1416
min-height: 16px;
1417
min-width: 16px;
1418
&:dir(ltr) {
1420
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1421
margin-left: 8px;
1422
}
1423
&:dir(rtl) {
1425
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1426
margin-right: 8px;
1427
}
1428
}
1429
// avoids labels color being overridden, see
1431
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1432
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1433
}
1434
// overflow arrows
1436
> arrow {
1437
min-height: 16px;
1438
min-width: 16px;
1439
padding: 4px;
1440
border-radius: 0;
1441
background-color: $base_color;
1442
color: $secondary_fg_color;
1443
&.top {
1445
margin-top: -4px;
1446
border-bottom: 1px solid $borders_color;
1447
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1448
}
1449
&.bottom {
1451
margin-bottom: -4px;
1452
border-top: 1px solid $borders_color;
1453
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1454
}
1455
&:hover {
1457
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1458
color: $fg_color;
1459
}
1460
&:disabled {
1462
border-color: transparent;
1463
background-color: transparent;
1464
color: transparent;
1465
// color: $disabled_secondary_fg_color;
1466
}
1467
}
1468
separator { margin: 4px 0; }
1470
}
1471
menuitem {
1473
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1474
check,
1476
radio {
1477
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1478
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1479
}
1480
}
1481
/***************
1484
* Popovers *
1485
***************/
1486
popover.background {
1487
transition: $shadow_transition;
1488
padding: 0;
1489
box-shadow: $z-depth-2; // TODO: this should really have a highlight
1490
background-color: $lighter_bg_color;
1491
&:backdrop { box-shadow: $z-depth-1; }
1493
&, .csd & {
1495
border-style: solid;
1496
border-width: 1px;
1497
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1498
border-radius: 2px + 1px;
1499
}
1500
> list,
1502
> .view,
1503
> toolbar {
1504
border-style: none;
1505
box-shadow: none;
1506
background-color: transparent;
1507
}
1508
&, .csd & {
1510
&.touch-selection,
1511
&.magnifier,
1512
&.osd { @extend %osd; }
1513
}
1514
// entry { @extend %entry.flat; }
1516
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1518
button.model {
1520
@extend %simple_flat_button;
1521
min-height: 32px;
1523
padding: 0 8px;
1524
border-radius: 2px;
1525
&:checked {
1527
background-color: $primary_color;
1528
color: $inversed_fg_color;
1529
}
1530
}
1531
separator { margin: 4px 0; }
1533
list separator { margin: 0; }
1535
}
1536
/*************
1538
* Notebooks *
1539
*************/
1540
notebook {
1541
> header {
1542
border-width: 1px;
1543
border-color: $borders_color;
1544
background-color: $bg_color;
1545
background-clip: border-box;
1546
&.top {
1548
border-bottom-style: solid;
1549
> tabs {
1550
margin-bottom: -1px;
1551
> tab {
1552
&:hover { box-shadow: inset 0 -2px $track_color; }
1554
&:checked { box-shadow: inset 0 -2px $primary_color; }
1556
}
1557
}
1558
}
1559
&.bottom {
1561
border-top-style: solid;
1562
> tabs {
1563
margin-top: -1px;
1564
> tab {
1565
&:hover { box-shadow: inset 0 2px $track_color; }
1567
&:checked { box-shadow: inset 0 2px $primary_color; }
1569
}
1570
}
1571
}
1572
&.left {
1574
border-right-style: solid;
1575
> tabs {
1576
margin-right: -1px;
1577
> tab {
1578
&:hover { box-shadow: inset -2px 0 $track_color; }
1580
&:checked { box-shadow: inset -2px 0 $primary_color; }
1582
}
1583
}
1584
}
1585
&.right {
1587
border-left-style: solid;
1588
> tabs {
1589
margin-left: -1px;
1590
> tab {
1591
&:hover { box-shadow: inset 2px 0 $track_color; }
1593
&:checked { box-shadow: inset 2px 0 $primary_color; }
1595
}
1596
}
1597
}
1598
&.top > tabs > arrow {
1600
@extend %notebook_vert_arrows;
1601
border-top-style: none;
1603
}
1604
&.bottom > tabs > arrow {
1606
@extend %notebook_vert_arrows;
1607
border-bottom-style: none;
1609
}
1610
@at-root %notebook_vert_arrows {
1612
padding-left: 4px;
1613
padding-right: 4px;
1614
&.down {
1616
margin-left: -8px;
1617
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1618
}
1619
&.up {
1621
margin-right: -8px;
1622
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1623
}
1624
}
1625
&.left > tabs > arrow {
1627
@extend %notebook_horz_arrows;
1628
border-left-style: none;
1630
}
1631
&.right > tabs > arrow {
1633
@extend %notebook_horz_arrows;
1634
border-right-style: none;
1636
}
1637
@at-root %notebook_horz_arrows {
1639
padding-top: 4px;
1640
padding-bottom: 4px;
1641
&.down {
1643
margin-top: -8px;
1644
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1645
}
1646
&.up {
1648
margin-bottom: -8px;
1649
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1650
}
1651
}
1652
> tabs > arrow {
1654
@extend %simple_flat_button;
1655
min-height: 16px;
1657
min-width: 16px;
1658
border-radius: 0;
1659
}
1660
tab {
1662
transition: $longer_transition;
1663
min-height: $small_size;
1664
min-width: $small_size;
1665
padding: $container_padding 12px;
1666
outline-offset: -6px;
1668
border-width: 1px; // for reorderable tabs
1670
border-color: transparent; //
1671
color: $secondary_fg_color;
1673
font-weight: 500;
1674
&:hover {
1676
color: $fg_color;
1677
&.reorderable-page {
1679
border-color: $borders_color;
1680
background-color: $alt_base_color;
1681
}
1682
}
1683
&:disabled { color: $disabled_secondary_fg_color; }
1685
&:checked {
1687
animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
1688
color: $fg_color;
1689
&:disabled { color: $disabled_fg_color; }
1691
&.reorderable-page {
1693
border-color: $borders_color;
1694
background-color: $base_color;
1695
}
1696
}
1697
// colors the button like the label, overridden otherwise
1699
button.flat {
1700
@extend %small_button;
1701
&:last-child {
1703
margin-left: $container_padding;
1704
margin-right: $container_padding - 12px;
1705
}
1706
&:first-child {
1708
margin-left: $container_padding - 12px;
1709
margin-right: $container_padding;
1710
}
1711
}
1712
}
1713
&.top,
1715
&.bottom {
1716
tabs {
1717
padding-left: 8px;
1718
padding-right: 8px;
1719
&:not(:only-child) {
1721
&:first-child { margin-left: 0; }
1722
&:last-child { margin-right: 0; }
1723
}
1724
tab {
1726
&.reorderable-page {
1727
margin: 0 -1px;
1728
border-style: none solid;
1729
}
1730
}
1731
}
1732
}
1733
&.left,
1735
&.right {
1736
tabs {
1737
padding-top: 8px;
1738
padding-bottom: 8px;
1739
&:not(:only-child) {
1741
&:first-child { margin-top: 0; }
1742
&:last-child { margin-bottom: 0; }
1743
}
1744
tab {
1746
&.reorderable-page {
1747
margin: -1px 0;
1748
border-style: solid none;
1749
}
1750
}
1751
}
1752
}
1753
}
1754
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1756
background-color: $base_color;
1757
entry:not(.search),
1759
spinbutton:not(.vertical) { @extend %entry.flat; }
1760
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1762
button.combo { @extend %combo_flat; }
1764
}
1765
}
1766
/**************
1769
* Scrollbars *
1770
**************/
1771
scrollbar {
1772
$_slider_min_length: 24px;
1773
// disable steppers
1775
@at-root * {
1776
-GtkScrollbar-has-backward-stepper: false;
1777
-GtkScrollbar-has-forward-stepper: false;
1778
}
1779
transition: $longer_transition;
1781
background-color: $base_color;
1782
background-clip: $extra_background_clip;
1783
// scrollbar border
1785
&.top { border-bottom: 1px solid $borders_color; }
1786
&.bottom { border-top: 1px solid $borders_color; }
1787
&.left { border-right: 1px solid $borders_color; }
1788
&.right { border-left: 1px solid $borders_color; }
1789
// slider
1791
slider {
1792
transition: $shorter_transition, margin 0, border-width 0;
1793
min-width: 8px;
1794
min-height: 8px;
1795
border: 4px solid transparent;
1796
border-radius: $circular_radius;
1797
background-clip: padding-box;
1798
background-color: $tertiary_fg_color;
1799
&:hover { background-color: $secondary_fg_color; }
1801
&:active { background-color: $fg_color; }
1803
&:disabled { background-color: $disabled_tertiary_fg_color; }
1805
}
1806
&.fine-tune {
1808
slider {
1809
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1810
min-width: 4px;
1811
min-height: 4px;
1812
}
1813
&.horizontal slider { margin: 2px 0; }
1815
&.vertical slider { margin: 0 2px; }
1817
}
1818
&.overlay-indicator {
1820
&:not(.dragging):not(.hovering) {
1821
border-color: transparent;
1822
background-color: transparent;
1823
slider {
1825
min-width: 4px;
1826
min-height: 4px;
1827
margin: 4px - 1px;
1828
border: 1px solid scale-alpha($base_color, $lower_opacity);
1829
}
1830
button {
1832
min-width: 4px;
1833
min-height: 4px;
1834
margin: 4px - 1px;
1835
border: 1px solid scale-alpha($base_color, $lower_opacity);
1836
border-radius: $circular_radius;
1837
background-color: $tertiary_fg_color;
1838
background-clip: padding-box;
1839
-gtk-icon-source: none;
1840
&:disabled { background-color: $disabled_tertiary_fg_color; }
1842
}
1843
&.horizontal {
1845
slider { min-width: $_slider_min_length; }
1846
button { min-width: 8px; }
1848
}
1849
&.vertical {
1851
slider { min-height: $_slider_min_length; }
1852
button { min-height: 8px; }
1854
}
1855
}
1856
&.dragging,
1858
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1859
}
1860
&.horizontal slider { min-width: $_slider_min_length; }
1862
&.vertical slider { min-height: $_slider_min_length; }
1864
// button styling
1866
button {
1867
@extend %simple_flat_button;
1868
min-width: 16px;
1870
min-height: 16px;
1871
padding: 0;
1872
border-radius: 0;
1873
}
1874
// button icons
1876
&.vertical {
1877
button {
1878
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1879
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1881
}
1882
}
1883
&.horizontal {
1885
button {
1886
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1887
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1889
}
1890
}
1891
}
1892
/**********
1895
* Switch *
1896
**********/
1897
switch {
1898
transition: $longer_transition;
1899
margin: $container_padding 0;
1900
border: 4px solid transparent;
1901
border-radius: $circular_radius;
1902
background-color: $track_color;
1903
background-clip: padding-box;
1904
font-size: 0;
1905
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1907
&:checked {
1909
background-color: scale-alpha($accent_color, 0.5);
1910
&:disabled {
1912
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1913
color: $disabled_fg_color;
1914
}
1915
}
1916
slider {
1918
@include entry(normal);
1919
transition: $longer_transition, $shadow_transition, margin 0;
1921
min-width: $small_size;
1922
min-height: $small_size;
1923
margin: -4px 0 -4px -4px;
1924
-gtk-outline-radius: $circular_radius;
1925
border-radius: $circular_radius;
1926
}
1927
&:hover slider { @include entry(focus); }
1929
&:checked slider {
1931
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0 $longer_duration;
1932
animation: needs_attention $longer_duration $deceleration_curve;
1933
margin: -4px -4px -4px 0;
1934
background-color: $accent_color;
1935
color: $inversed_fg_color;
1936
}
1937
&:disabled slider { @include entry(disabled); }
1939
&:checked:disabled slider { animation: none; }
1941
row:selected & {
1943
}
1944
}
1945
/*************************
1948
* Check and Radio items *
1949
*************************/
1950
// draw regular check and radio items using our PNG assets
1951
// all assets are rendered from assets.svg. never add pngs directly
1952
//selection-mode
1954
@each $s,$as in ('','-selectionmode'),
1955
(':hover', '-hover-selectionmode'),
1956
(':checked', '-checked-selectionmode'),
1957
(':checked:hover', '-checked-hover-selectionmode') {
1958
.view.content-view.check#{$s}:not(list) {
1959
-gtk-icon-shadow: $z-depth-1;
1960
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1961
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1962
margin: 8px;
1963
background-color: transparent;
1964
}
1965
}
1966
checkbutton.text-button,
1968
radiobutton.text-button {
1969
// this is for a nice focus on check and radios text
1970
padding: 2px;
1971
outline-offset: 0;
1972
label:not(:only-child) { margin: 0 4px; }
1974
}
1975
check,
1977
radio {
1978
min-height: 24px;
1979
min-width: 24px;
1980
margin: -($large_size - 24px) / 2;
1981
padding: ($large_size - 24px) / 2;
1982
@extend %simple_flat_button;
1984
@extend %circular_button;
1986
&:checked, &:indeterminate { color: $accent_color; }
1988
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1990
// &:only-child { margin: -12px; }
1992
row &:not(:checked):not(:indeterminate) {
1994
color: gtkalpha(currentColor, $enabled_opacity);
1995
&:hover, &:active { color: currentColor; }
1997
&:disabled { color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity); }
1999
}
2000
menu menuitem & {
2002
transition: none;
2003
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2004
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
2006
&, &:hover, &:disabled {
2008
background-image: none;
2009
// color: inherit;
2010
// animation: none;
2011
}
2012
}
2013
}
2014
%check,
2016
check {
2017
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
2018
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
2019
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
2021
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
2022
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
2024
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
2025
}
2026
$radio_indicator: 10 / ($large_size / 1px) / 2;
2028
$radio_radius_slice: #{$large_size / 2 / 1px};
2029
$radio_radius_width: #{$large_size / 2};
2030
%radio,
2032
radio {
2033
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
2034
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
2035
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2037
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
2038
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2040
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2041
border-image: -gtk-gradient(radial,
2043
center center, 0,
2044
center center, 0.001,
2045
to($accent_color),
2046
to(transparent))
2047
$radio_radius_slice / $radio_radius_width;
2048
&:checked {
2050
border-image: -gtk-gradient(radial,
2051
center center, 0,
2052
center center, $radio_indicator,
2053
to($accent_color),
2054
to(transparent))
2055
$radio_radius_slice / $radio_radius_width;
2056
}
2057
&:checked:disabled {
2059
border-image: -gtk-gradient(radial,
2060
center center, 0,
2061
center center, $radio_indicator,
2062
to(scale-alpha($accent_color, $disabled_opacity)),
2063
to(transparent))
2064
$radio_radius_slice / $radio_radius_width;
2065
}
2066
&:indeterminate:checked {
2068
border-image: -gtk-gradient(radial,
2069
center center, 0,
2070
center center, 0.001,
2071
to($accent_color),
2072
to(transparent))
2073
$radio_radius_slice / $radio_radius_width;
2074
}
2075
}
2076
// let's animate things
2078
@keyframes check_check {
2079
from { -gtk-icon-transform: rotate(90deg); }
2080
to { -gtk-icon-transform: unset; }
2081
}
2082
@keyframes check_radio { // FIXME: cannot animate border-image
2084
from {
2085
border-image: -gtk-gradient(radial,
2086
center center, 0,
2087
center center, 0.001,
2088
to($accent_color),
2089
to(transparent))
2090
$radio_radius_slice / $radio_radius_width;
2091
}
2092
to {
2094
border-image: -gtk-gradient(radial,
2095
center center, 0,
2096
center center, $radio_indicator,
2097
to($accent_color),
2098
to(transparent))
2099
$radio_radius_slice / $radio_radius_width;
2100
}
2101
}
2102
@keyframes check_indeterminate {
2104
from { -gtk-icon-transform: unset; }
2105
50% { -gtk-icon-transform: scale(0, 1); }
2106
to { -gtk-icon-transform: unset; }
2107
}
2108
%check_checked,
2110
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2111
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2113
// %radio_checked,
2115
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2116
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2118
%indeterminate_checked,
2120
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2121
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2123
// no animations in menus
2125
menu menuitem {
2126
check:not(:indeterminate):checked,
2127
radio:not(:indeterminate):checked,
2128
check:indeterminate:checked,
2129
radio:indeterminate:checked { animation: none; }
2130
}
2131
treeview.view check,
2133
treeview.view radio {
2134
padding: 0;
2135
&:hover {
2137
box-shadow: inset 0 0 0 10000px gtkalpha($fg_color, 0.05);
2138
background-image: none;
2139
&:disabled { box-shadow: none; }
2141
&:selected { box-shadow: inset 0 0 0 10000px gtkalpha($inversed_fg_color, 0.05); }
2143
}
2144
& {
2146
color: $secondary_fg_color;
2147
&:hover, &:active { color: $fg_color; }
2149
&:disabled { color: $disabled_secondary_fg_color; }
2151
&:checked, &:indeterminate { color: $accent_color; }
2153
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2155
}
2156
&:selected {
2158
color: $secondary_inversed_fg_color;
2159
&:hover, &:active { color: $inversed_fg_color; }
2161
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2163
&:checked, &:indeterminate { color: $accent_color; }
2165
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2167
}
2168
}
2169
treeview.view radio:checked {
2171
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2172
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2173
border-image: none;
2174
}
2175
/************
2178
* GtkScale *
2179
************/
2180
scale {
2181
// sizing
2182
$_marks_lenght: 8px;
2183
$_marks_distance: 8px;
2184
$slider_size: 24px;
2186
$marks_slider_size: 30px;
2187
$slider_margin: -($slider_size - $bar_size) / 2;
2189
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2190
$color_slider_margin: -($slider_size) / 2;
2192
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2193
min-height: $medium_size - $slider_size;
2195
min-width: $medium_size - $slider_size;
2196
padding: ($slider_size / 2);
2197
* { transition: $longer_transition; }
2199
// the slider is inside the trough, so to have make it bigger there's a negative margin
2201
slider {
2202
min-height: $slider_size;
2203
min-width: $slider_size;
2204
margin: $slider_margin;
2205
}
2206
// the backing bit
2208
trough {
2209
outline-offset: 2px;
2210
background-color: $track_color;
2211
&:disabled { color: $disabled_fg_color; }
2213
}
2214
// the colored part of the backing bit
2216
highlight {
2217
background-color: $accent_color;
2218
&:disabled { background-color: transparent; }
2220
}
2221
// this is another differently styled part of the backing bit, the most relevant use case is for example
2223
// in media player to indicate how much video stream as been cached
2224
fill {
2225
background-color: $track_color;
2226
&:disabled { background-color: transparent; }
2228
}
2229
slider {
2231
transition: all $shorter_duration $standard_curve;
2232
// border-radius: 100%;
2233
// background-color: $accent_color;
2234
background-repeat: no-repeat;
2235
background-position: center;
2236
@each $s,$as in ('',''),
2238
(':disabled','-insensitive') {
2239
&#{$s} {
2240
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2241
background-image: -gtk-scaled(url('#{$_url}.png'),
2242
url('#{$_url}@2.png'));
2243
}
2244
}
2245
background-size: calc(100% - 8px);
2247
&:hover { background-size: calc(100% - 4px); }
2249
&:active { background-size: calc(100% - 0px); }
2251
}
2252
// click-and-hold the slider to activate
2254
&.fine-tune {
2255
// to make the slider shrink in fine-tune mode
2256
slider { background-size: calc(100% - 12px); }
2257
}
2258
value { color: gtkalpha(currentColor, $hint_opacity); }
2260
marks {
2262
color: $track_color;
2263
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2265
(bottom, bottom, top),
2266
(top, left, right),
2267
(bottom, right, left) {
2268
&.#{$marks_class} {
2269
margin-#{$marks_margin}: $_marks_distance;
2270
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2271
}
2272
}
2273
}
2274
&.horizontal {
2276
indicator {
2277
min-height: $_marks_lenght;
2278
min-width: 1px;
2279
}
2280
}
2281
&.vertical {
2283
indicator {
2284
min-height: 1px;
2285
min-width: $_marks_lenght;
2286
}
2287
}
2288
// *WARNING* scale with marks madness following
2290
$suffix: if($variant == 'light', '', '-dark');
2291
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2293
('vertical', 'vert') {
2294
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2295
('scale-has-marks-below', ':first-child:not(:only-child)') {
2296
@each $state, $state_infix in ('', ''),
2297
(':disabled', '-insensitive') {
2298
&.#{$dir_class} {
2299
%#{$marks_infix}-#{$dir_infix},
2300
contents#{$nth_child} > trough > slider {
2301
&#{$state} {
2302
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2303
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2305
}
2306
@if $dir_class == 'horizontal' {
2308
min-height: $marks_slider_size;
2309
min-width: $slider_size;
2310
@if $marks_infix == 'scale-has-marks-above' {
2312
margin-top: $marks_slider_margin;
2313
background-position: center calc(100% - 4px);
2315
&:hover { background-position: center calc(100% - 2px); }
2317
&:active { background-position: center calc(100% - 0px); }
2319
}
2320
@if $marks_infix == 'scale-has-marks-below' {
2322
margin-bottom: $marks_slider_margin;
2323
background-position: center calc(4px);
2325
&:hover { background-position: center calc(2px); }
2327
&:active { background-position: center calc(0px); }
2329
}
2330
}
2331
@if $dir_class == 'vertical' {
2333
min-height: $slider_size;
2334
min-width: $marks_slider_size;
2335
@if $marks_infix == 'scale-has-marks-above' {
2337
margin-left: $marks_slider_margin;
2338
background-position: calc(4px) center;
2340
&:hover { background-position: calc(2px) center; }
2342
&:active { background-position: calc(0px) center; }
2344
}
2345
@if $marks_infix == 'scale-has-marks-below' {
2347
margin-right: $marks_slider_margin;
2348
background-position: calc(100% - 4px) center;
2350
&:hover { background-position: calc(100% - 2px) center; }
2352
&:active { background-position: calc(100% - 0px) center; }
2354
}
2355
}
2356
}
2357
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2359
&.fine-tune contents#{$nth_child} > trough > slider {
2360
// bigger negative margins to make the trough grow here as well
2361
@if $dir_class == 'horizontal' {
2363
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2364
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2366
}
2367
@if $dir_class == 'vertical' {
2369
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2370
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2372
}
2373
}
2374
}
2375
}
2376
}
2377
}
2378
&.color {
2380
min-height: 0;
2381
min-width: 0;
2382
&.horizontal {
2384
padding: 0 0 12px 0;
2385
// trough { padding-bottom: $bar_size; }
2387
slider {
2389
@extend %scale-has-marks-above-horz;
2390
margin-bottom: $color_slider_margin;
2392
margin-top: $color_marks_slider_margin;
2393
}
2394
}
2395
&.vertical {
2397
&:dir(ltr) {
2398
padding: 0 0 0 12px;
2399
// trough { padding-left: $bar_size; }
2401
slider {
2403
@extend %scale-has-marks-below-vert;
2404
margin-left: $color_slider_margin;
2406
margin-right: $color_marks_slider_margin;
2407
}
2408
}
2409
&:dir(rtl) {
2411
padding: 0 12px 0 0;
2412
// trough { padding-right: $bar_size; }
2414
slider {
2416
@extend %scale-has-marks-above-vert;
2417
margin-right: $color_slider_margin;
2419
margin-left: $color_marks_slider_margin;
2420
}
2421
}
2422
}
2423
&.fine-tune {
2425
&.horizontal {
2426
slider {
2427
@extend %scale-has-marks-above-horz-fine-tune;
2428
}
2429
}
2430
&.vertical {
2432
&:dir(ltr) {
2433
slider {
2434
@extend %scale-has-marks-below-vert-fine-tune;
2435
}
2436
}
2437
&:dir(rtl) {
2439
slider {
2440
@extend %scale-has-marks-above-vert-fine-tune;
2441
}
2442
}
2443
}
2444
}
2445
}
2446
}
2447
/*****************
2450
* Progress bars *
2451
*****************/
2452
progressbar {
2453
// sizing
2454
&.horizontal {
2455
trough,
2456
progress { min-height: $bar_size; }
2457
}
2458
&.vertical {
2460
trough,
2461
progress { min-width: $bar_size; }
2462
}
2463
// FIXME: insensitive state missing and some other state should be set probably
2465
color: $tertiary_fg_color;
2466
font-size: smaller;
2467
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2469
progress { background-color: $primary_color; }
2471
&.osd { // progressbar.osd used for epiphany page loading progress
2473
// min-width: $bar_size;
2474
// min-height: $bar_size;
2475
// background-color: transparent;
2476
// trough { background-color: transparent; }
2478
progress {
2480
}
2481
}
2482
}
2483
/*************
2486
* Level Bar *
2487
*************/
2488
levelbar {
2489
block {
2490
min-width: $medium_size;
2491
min-height: $bar_size;
2492
}
2493
&.vertical block {
2495
min-width: $bar_size;
2496
min-height: $medium_size;
2497
}
2498
trough {
2500
padding: 2px;
2501
border-radius: 2px;
2502
@include entry(normal);
2504
&:disabled { @include entry(disabled); }
2506
}
2507
&.horizontal.discrete block { margin: 0 1px; }
2509
&.vertical.discrete block { margin: 1px 0; }
2511
&.horizontal.discrete trough { padding: 2px 1px; }
2513
&.vertical.discrete trough { padding: 1px 2px; }
2515
block {
2517
&.low {
2518
background-color: $warning_color;
2519
}
2520
&.high,
2522
&:not(.empty) {
2523
background-color: $primary_color;
2524
}
2525
&.full {
2527
background-color: $success_color;
2528
}
2529
&.empty {
2531
background-color: $track_color;
2532
color: $disabled_fg_color;
2533
}
2534
}
2535
}
2536
/****************
2539
* Print dialog *
2540
*****************/
2541
printdialog {
2542
paper {
2543
padding: 0;
2544
border: 1px solid $borders_color;
2545
background: $base_color;
2546
color: $fg_color;
2547
}
2548
.dialog-action-box { margin: 12px; }
2550
}
2551
/**********
2554
* Frames *
2555
**********/
2556
frame > border,
2557
.frame {
2558
margin: 0;
2559
padding: 0;
2560
border: 1px solid $borders_color;
2561
border-radius: 0;
2562
box-shadow: none;
2563
&.flat { border-style: none; }
2565
}
2566
actionbar > revealer > box {
2568
padding: $container_padding;
2569
border-top: 1px solid $borders_color;
2570
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2572
}
2573
scrolledwindow {
2575
viewport.frame { // avoid double borders when viewport inside scrolled window
2576
border-style: none;
2577
}
2578
// This is used when content is touch-dragged past boundaries.
2580
// draws a box on top of the content, the size changes programmatically.
2581
@at-root overshoot {
2582
&.top { @include overshoot(top); }
2583
&.bottom { @include overshoot(bottom); }
2585
&.left { @include overshoot(left); }
2587
&.right { @include overshoot(right); }
2589
}
2590
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2592
@at-root undershoot {
2593
&.top { @include undershoot(top); }
2594
&.bottom { @include undershoot(bottom); }
2596
&.left { @include undershoot(left); }
2598
&.right { @include undershoot(right); }
2600
}
2601
@at-root junction { // the small square between two scrollbars
2603
border-style: solid none none solid;
2604
border-width: 1px;
2605
border-color: $borders_color;
2606
background-color: $base_color;
2607
&:dir(rtl) { border-style: solid solid none none; }
2609
}
2610
}
2611
//vbox and hbox separators
2613
separator {
2614
min-width: 1px;
2615
min-height: 1px;
2616
background: $borders_color;
2617
}
2618
/*********
2621
* Lists *
2622
*********/
2623
list {
2624
border-color: $borders_color;
2625
background-color: $base_color;
2626
row { padding: 2px; }
2628
}
2629
// FIXME
2631
$row_transition: $longer_transition, background-color 0, color 0;
2632
row {
2634
&.activatable {
2635
transition: $row_transition;
2636
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0);
2637
background-image: radial-gradient(circle farthest-corner at center,
2638
gtkalpha(currentColor, 0) 100%,
2639
transparent 0%),
2640
image(gtkalpha(currentColor, 0));
2641
&:hover {
2643
transition: $row_transition, box-shadow 0;
2644
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0.05);
2645
background-image: radial-gradient(circle farthest-corner at center,
2646
gtkalpha(currentColor, 0) 100%,
2647
transparent 0%),
2648
image(gtkalpha(currentColor, 0));
2649
}
2650
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2652
&:active {
2653
transition: $row_transition, background-image 0;
2654
animation: row_ripple_effect $longer_duration $deceleration_curve forwards;
2655
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, $lower_opacity / 2);
2656
}
2657
}
2658
&:selected { @extend %selected_items; }
2660
}
2661
/*********************
2664
* App Notifications *
2665
*********************/
2666
.app-notification,
2667
.app-notification.frame {
2668
@extend %osd;
2669
@extend toolbar.osd;
2671
margin: 8px;
2673
button { @extend %button_basic.flat; }
2675
border { border: none; }
2677
}
2678
/*************
2681
* Expanders *
2682
*************/
2683
expander {
2684
arrow {
2685
transition: all $shorter_duration $standard_curve;
2686
min-width: 16px;
2687
min-height: 16px;
2688
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2689
-gtk-icon-transform: rotate(-90deg);
2690
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2692
&:checked { -gtk-icon-transform: unset; }
2694
color: $secondary_fg_color;
2696
&:hover, &:active { color: $fg_color; }
2698
&:disabled { color: $disabled_secondary_fg_color; }
2700
&:selected {
2702
color: $secondary_inversed_fg_color;
2703
&:hover, &:active { color: $inversed_fg_color; }
2705
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2707
}
2708
}
2709
}
2710
/************
2713
* Calendar *
2714
***********/
2715
calendar {
2716
padding: 1px;
2717
border: 1px solid $borders_color;
2718
color: $fg_color;
2719
&:disabled { color: $disabled_fg_color; }
2721
&:selected {
2723
@extend %selected_items;
2724
border-radius: 2px + 1px;
2726
}
2727
&.header {
2729
border-style: none none solid;
2730
border-radius: 0;
2731
}
2732
&.button { @extend %simple_flat_button; }
2734
&.highlight {
2736
color: gtkalpha(currentColor, $hint_opacity);
2737
font-weight: 500;
2738
}
2739
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2741
}
2742
/***********
2745
* Dialogs *
2746
***********/
2747
messagedialog { // Message Dialog styling
2748
&.background { background-color: $lighter_bg_color; }
2749
.titlebar {
2751
min-height: $small_size;
2752
border-style: none;
2753
box-shadow: inset 0 1px $highlight_color;
2754
background-color: $lighter_bg_color;
2755
}
2756
&.csd { // rounded bottom border styling for csd version
2758
&.background {
2759
// bigger radius for better antialiasing
2760
border-bottom-left-radius: 2px;
2761
border-bottom-right-radius: 2px;
2762
}
2763
.dialog-action-area button {
2765
padding: 8px 16px;
2766
border-top: 1px solid $borders_color;
2767
border-radius: 0;
2768
@extend %simple_flat_button;
2770
&:first-child { border-bottom-left-radius: 2px; }
2772
&:last-child { border-bottom-right-radius: 2px; }
2774
}
2775
}
2776
}
2777
filechooser {
2779
.dialog-action-box { border-top: 1px solid $borders_color; }
2780
#pathbarbox {
2782
border-bottom: 1px solid $borders_color;
2783
background-color: $bg_color;
2784
}
2785
}
2786
filechooserbutton:drop(active) {
2788
box-shadow: none;
2789
}
2790
/***********
2793
* Sidebar *
2794
***********/
2795
.sidebar {
2796
border-style: none;
2797
background-color: $lighter_bg_color;
2798
@at-root %sidebar_left,
2800
&:dir(ltr),
2801
&.left,
2802
&.left:dir(rtl) {
2803
border-right: 1px solid $borders_color;
2804
border-left-style: none;
2805
}
2806
@at-root %sidebar_right
2808
&:dir(rtl),
2809
&.right {
2810
border-left: 1px solid $borders_color;
2811
border-right-style: none;
2812
}
2813
list { background-color: transparent; }
2815
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2817
}
2818
stacksidebar {
2820
&.sidebar {
2821
&:dir(ltr),
2822
&.left,
2823
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2824
&:dir(rtl),
2826
&.right { list { @extend %sidebar_right; }}
2827
}
2828
row {
2830
padding: 10px 4px;
2831
> label {
2833
padding-left: 6px;
2834
padding-right: 6px;
2835
}
2836
&.needs-attention > label { @extend %needs_attention; }
2838
}
2839
}
2840
/****************
2843
* File chooser *
2844
****************/
2845
placessidebar {
2846
> viewport.frame { border-style: none; }
2847
list { padding: (4px - 3px) 0 4px; }
2849
row {
2851
// Needs overriding of the GtkListBoxRow padding
2852
min-height: 32px;
2853
margin: -1px 0; // Remove unknown margins
2854
padding: 0;
2855
// Using margins/padding directly in the SidebarRow
2857
// will make the animation of the new bookmark row jump
2858
> revealer { padding: 0 12px; }
2859
&:selected { color: $inversed_fg_color; }
2861
&:disabled { color: $disabled_fg_color; }
2863
image.sidebar-icon {
2865
opacity: $hint_opacity; // dim the device icons
2866
&:dir(ltr) { padding-right: 8px; }
2868
&:dir(rtl) { padding-left: 8px; }
2869
}
2870
label.sidebar-label {
2872
&:dir(ltr) { padding-right: 2px; }
2873
&:dir(rtl) { padding-left: 2px; }
2874
}
2875
@at-root button.sidebar-button {
2877
@extend %simple_flat_button;
2878
@extend %small_button;
2880
row:selected & {
2882
}
2883
}
2884
&.sidebar-placeholder-row {
2886
min-height: 2px;
2887
padding: 0 8px;
2888
background-image: image($accent_color);
2889
background-clip: content-box;
2890
}
2891
&.sidebar-new-bookmark-row { color: $accent_color; }
2893
&:drop(active):not(:disabled) {
2895
box-shadow: inset 0 0 0 2px $accent_color;
2896
&:selected {
2898
// background-color: $accent_color;
2899
// color: $inversed_fg_color;
2900
}
2901
}
2902
}
2903
}
2904
placesview {
2906
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2907
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2909
// this selects the "connect to server" label
2911
> actionbar > revealer > box > label {
2912
padding-left: 8px;
2913
padding-right: 8px;
2914
}
2915
}
2916
/*********
2919
* Paned *
2920
*********/
2921
paned {
2922
> separator {
2923
min-width: 1px;
2924
min-height: 1px;
2925
-gtk-icon-source: none; // defeats the ugly default handle decoration
2926
border-style: none; // just to be sure
2927
background-color: transparent;
2928
// workaround, using background istead of a border since the border will get rendered twice (?)
2929
background-image: image($borders_color);
2930
background-size: 1px 1px;
2931
&.wide {
2933
min-width: 6px;
2934
min-height: 6px;
2935
background-color: $bg_color;
2936
background-image: image($borders_color), image($borders_color);
2937
background-size: 1px 1px, 1px 1px;
2938
}
2939
}
2940
&.horizontal > separator {
2942
background-repeat: repeat-y;
2943
&:dir(ltr) {
2945
margin: 0 -8px 0 0;
2946
padding: 0 8px 0 0;
2947
background-position: left;
2948
}
2949
&:dir(rtl) {
2951
margin: 0 0 0 -8px;
2952
padding: 0 0 0 8px;
2953
background-position: right;
2954
}
2955
&.wide {
2957
margin: 0;
2958
padding: 0;
2959
background-repeat: repeat-y, repeat-y;
2960
background-position: left, right;
2961
}
2962
}
2963
&.vertical > separator {
2965
margin: 0 0 -8px 0;
2966
padding: 0 0 8px 0;
2967
background-repeat: repeat-x;
2968
background-position: top;
2969
&.wide {
2971
margin: 0;
2972
padding: 0;
2973
background-repeat: repeat-x, repeat-x;
2974
background-position: bottom, top;
2975
}
2976
}
2977
}
2978
/**************
2981
* GtkInfoBar *
2982
**************/
2983
infobar {
2984
border-style: none;
2985
&.info { background-color: $info_bg_color; }
2987
&.question { background-color: $question_bg_color; }
2989
&.warning { background-color: $warning_bg_color; }
2991
&.error { background-color: $error_bg_color; }
2993
&.info,
2995
&.question,
2996
&.warning,
2997
&.error {
2998
> label, & { color: $inversed_fg_color; }
2999
button { @extend %button_selected; }
3001
selection { }
3003
*:link { @extend %link_selected; }
3005
}
3006
}
3007
/************
3010
* Tooltips *
3011
************/
3012
tooltip {
3013
&.background {
3014
// background-color needs to be set this way otherwise it gets drawn twice
3015
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3016
box-shadow: inset 0 1px $highlight_color;
3017
background-color: scale-alpha($base_color, $higher_opacity);
3018
}
3019
// @extend %osd;
3021
// padding: 4px; /* not working */
3023
border-radius: 2px;
3024
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3025
// FIXME: we need a border or tooltips vanish on black background.
3027
decoration { background-color: transparent; }
3028
label {
3030
// tooltip label has already 6px margins
3031
min-height: 32px - 6px * 2;
3032
padding: 0 8px - 6px;
3033
}
3034
* { // Yeah this is ugly
3036
padding: 0;
3037
background-color: transparent;
3038
color: inherit;
3039
}
3040
}
3041
/*****************
3044
* Color Chooser *
3045
*****************/
3046
colorswatch {
3047
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3048
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3049
// applied to the overlay box.
3050
// base color corners rounding
3052
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3053
// sports a bigger radius.
3054
// nth-child is needed by the custom color strip.
3055
&.top {
3057
border-top-left-radius: $md_radius + 0.5px;
3058
border-top-right-radius: $md_radius + 0.5px;
3059
overlay {
3061
border-top-left-radius: $md_radius;
3062
border-top-right-radius: $md_radius;
3063
}
3064
}
3065
&.bottom {
3067
border-bottom-left-radius: $md_radius + 0.5px;
3068
border-bottom-right-radius: $md_radius + 0.5px;
3069
overlay {
3071
border-bottom-left-radius: $md_radius;
3072
border-bottom-right-radius: $md_radius;
3073
}
3074
}
3075
&.left,
3077
&:first-child:not(.top) {
3078
border-top-left-radius: $md_radius + 0.5px;
3079
border-bottom-left-radius: $md_radius + 0.5px;
3080
overlay {
3082
border-top-left-radius: $md_radius;
3083
border-bottom-left-radius: $md_radius;
3084
}
3085
}
3086
&.right,
3088
&:last-child:not(.bottom) {
3089
border-top-right-radius: $md_radius + 0.5px;
3090
border-bottom-right-radius: $md_radius + 0.5px;
3091
overlay {
3093
border-top-right-radius: $md_radius;
3094
border-bottom-right-radius: $md_radius;
3095
}
3096
}
3097
&.dark overlay { color: $dark_contrast_color; }
3099
&.light overlay { color: $light_contrast_color; }
3101
&.dark { color: $dark_contrast_color; } // for focus ring
3103
&.light { color: $light_contrast_color; } // for focus ring
3105
&:drop(active) {
3107
box-shadow: none;
3108
&.light overlay {
3110
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3111
}
3112
&.dark overlay {
3114
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3115
}
3116
}
3117
overlay {
3119
transition: $shadow_transition;
3120
box-shadow: $z-depth-1;
3121
&:hover { box-shadow: $z-depth-2; }
3123
}
3124
&#add-color-button {
3126
border-radius: $md_radius $md_radius 0 0;
3127
color: $dark_contrast_color; // for focus ring
3128
&:only-child { border-radius: $md_radius; }
3130
overlay {
3132
background-image: linear-gradient(to right,
3133
$error_bg_color 25%,
3134
$warning_bg_color 25%, $warning_bg_color 50%,
3135
$info_bg_color 50%, $info_bg_color 75%,
3136
$question_bg_color 75%);
3137
color: $dark_contrast_color;
3138
}
3139
}
3140
&:disabled {
3142
opacity: $disabled_opacity;
3143
overlay { box-shadow: none; }
3145
}
3146
row:selected & {
3148
}
3149
&#editor-color-sample {
3151
border-radius: $md_radius + 0.5px;
3152
overlay { border-radius: $md_radius; }
3154
// overlay:hover { box-shadow: $z-depth-1; }
3156
}
3157
}
3158
// colorscale popup
3160
colorchooser .popover.osd {
3161
transition: $shadow_transition;
3162
border-radius: 2px;
3163
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
3164
background-color: $base_color;
3165
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
3167
spinbutton:not(.vertical) { @extend %entry.flat; }
3169
}
3170
/********
3173
* Misc *
3174
********/
3175
//content view (grid/list)
3176
.content-view {
3177
background-color: $bg_color;
3178
// &:hover { -gtk-icon-effect: highlight; }
3180
rubberband { @extend rubberband; }
3182
}
3183
.scale-popup {
3185
.osd & { @extend %osd; }
3186
.osd & button.flat { //FIXME: quick hack, redo properly
3188
}
3189
button { // +/- buttons on GtkVolumeButton popup
3191
}
3192
}
3193
/**********************
3196
* Window Decorations *
3197
*********************/
3198
decoration {
3199
transition: $shadow_transition;
3200
border-radius: 2px 2px 0 0;
3201
box-shadow: $z-depth-4, 0 16px 16px transparent;
3202
// FIXME rationalize shadows
3204
// this is used for the resize cursor area
3206
margin: 8px;
3207
&:backdrop {
3209
// the transparent shadow here is to enforce that the shadow extents don't
3210
// change when we go to backdrop, to prevent jumping windows.
3211
// The biggest shadow should be in the same order then in the active state
3212
// or the jumping will happen during the transition.
3213
box-shadow: $z-depth-2, 0 16px 16px transparent;
3214
}
3215
.maximized &,
3217
.fullscreen &,
3218
.tiled & { border-radius: 0; }
3219
.popup & { box-shadow: none; }
3221
// server-side decorations as used by mutter
3223
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3224
.csd.popup & {
3226
border-radius: 2px;
3227
box-shadow: $z-depth-2;
3228
}
3229
tooltip.csd & {
3231
border-radius: 2px;
3232
box-shadow: $z-depth-2;
3233
}
3234
messagedialog.csd & {
3236
border-radius: 2px;
3237
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3238
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3240
}
3241
.solid-csd & {
3243
margin: 0;
3244
padding: 4px;
3245
// border: solid 1px $borders_color;
3246
// border-radius: 0;
3247
box-shadow: inset 0 0 0 4px $headerbar_color;
3248
// background-color: $borders_color;
3249
}
3250
}
3251
// Window Close button
3253
button.titlebutton {
3254
// @extend %simple_flat_button;
3255
@extend %circular_button;
3257
.selection-mode & {
3259
}
3260
}
3261
// catch all extend :)
3264
%selected_items {
3266
background-color: $primary_color;
3267
@at-root %nobg_selected_items, & {
3269
color: $inversed_fg_color;
3270
&:disabled { color: $disabled_inversed_fg_color; }
3272
}
3273
}
3274
.monospace { font-family: monospace; }
3276
/**********************
3279
* Touch Copy & Paste *
3280
*********************/
3281
//touch selection handlebars for the Popover.osd above
3282
cursor-handle {
3283
border-radius: $circular_radius;
3284
background-color: $accent_color;
3285
background-image: none;
3286
&.top:dir(ltr), &.bottom:dir(rtl) {
3288
padding-left: 6px;
3289
border-top-right-radius: 0;
3290
}
3291
&.bottom:dir(ltr), &.top:dir(rtl) {
3293
padding-right: 6px;
3294
border-top-left-radius: 0;
3295
}
3296
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3298
-GtkWidget-text-handle-width: 24;
3299
-GtkWidget-text-handle-height: 30;
3300
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3302
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3303
url('#{$_url}@2.png'));
3304
}
3305
}
3306
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3308
%circular_button,
3310
button.circular { // FIXME: aggregate to buttons
3311
border-radius: $circular_radius;
3312
-gtk-outline-radius: $circular_radius;
3313
// label { padding: 0; }
3315
}
3316
%small_button {
3318
min-height: $small_size;
3319
min-width: $small_size;
3320
padding: 0;
3321
border-radius: $circular_radius;
3322
-gtk-outline-radius: $circular_radius;
3323
}
3324
// shortcut window keys
3326
.keycap {
3327
min-width: 28px - 8px * 2;
3328
min-height: 28px - 2px;
3329
margin-top: 2px;
3330
padding-bottom: 2px;
3331
padding-left: 8px;
3332
padding-right: 8px;
3333
border: solid 1px $borders_color;
3335
border-radius: 2px + 1px;
3336
box-shadow: inset 0 -2px $borders_color;
3337
background-color: $base_color;
3338
color: $fg_color;
3339
font-size: smaller;
3340
}
3341
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3343
transition: $longer_transition;
3344
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_color;
3345
caret-color: $accent_color;
3346
}
3347
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3349
stackswitcher button.circular,
3351
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3352
min-width: $medium_size;
3353
min-height: $medium_size;
3354
padding: 0;
3355
}
3356