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
button {
776
// margin: $container_padding;
777
border: solid $container_padding transparent;
778
@extend %simple_flat_button;
780
@extend %small_button;
782
&.up:dir(ltr),
784
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
785
&.up:dir(rtl),
787
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
788
}
789
}
790
// OSD horizontal
792
.osd &:not(.vertical) {
793
button {
794
}
795
}
796
// Vertical
798
&.vertical {
799
// in the vertical configuration, we treat the spinbutton
800
// as a box, and tweak the style of the entry in the middle
801
// so that it's linked
802
// FIXME: this should not be set at all, but otherwise it gets the wrong
804
// color
805
&:disabled { color: $disabled_fg_color; }
806
&:drop(active) {
808
box-shadow: none;
809
}
810
entry {
812
min-height: $medium_size;
813
min-width: $large_size;
814
padding: 0;
815
}
816
button {
818
min-height: $medium_size;
819
min-width: $large_size;
820
padding: 0;
821
@extend %simple_flat_button;
823
&.up { border-radius: 2px 2px 0 0; }
825
&.down { border-radius: 0 0 2px 2px; }
827
}
828
}
829
// OSD vertical
831
.osd &.vertical button:first-child {
832
}
833
// Misc
835
treeview &:not(.vertical) {
836
min-height: 0;
837
border-style: none;
838
border-radius: 0;
839
entry {
841
min-height: 0;
842
padding: 1px 2px;
843
}
844
}
845
}
846
/**************
849
* ComboBoxes *
850
**************/
851
combobox {
852
arrow {
853
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
854
min-height: 16px;
855
min-width: 16px;
856
}
857
button.combo:checked { transition: none; } // workaround for menuitem selection
859
menu,
861
.menu,
862
.context-menu {
863
padding: 2px 0;
864
menuitem {
866
min-height: $medium_size - 2px * 2;
867
padding: 0 ($medium_size - 16px) / 2;
868
}
869
}
870
&.linked {
872
button:nth-child(2) {
873
&:dir(ltr) { @extend %linked:last-child; }
874
&:dir(rtl) { @extend %linked:first-child; }
875
}
876
}
877
&:drop(active) { // FIXME: untested
879
box-shadow: none;
880
// button.combo { @extend %button_basic:drop(active); }
882
}
883
}
884
.linked > combobox > box > button.combo {
886
// the combo is a composite widget so the way we do button linking doesn't
887
// work, special case needed. See
888
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
889
&:dir(ltr),
891
&:dir(rtl) { @extend %linked_middle; } // specificity bump
892
}
893
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
895
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
896
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
897
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
899
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
900
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
901
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
902
/************
905
* Toolbars *
906
************/
907
toolbar {
908
-GtkWidget-window-dragging: true;
909
padding: $container_padding / 2;
910
background-color: $bg_color;
911
button { @extend %button_basic.flat; }
913
// on OSD
915
.osd & { background-color: transparent; }
916
// stand-alone OSD toolbars
918
&.osd {
919
transition: $shadow_transition;
920
padding: $container_padding;
921
border-radius: 2px;
922
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
923
background-color: $base_color;
924
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
926
&.left,
928
&.right,
929
&.top,
930
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
931
}
932
// toolbar separators
934
&.horizontal separator { margin: $container_padding / 2; }
935
&.vertical separator { margin: $container_padding / 2; }
936
&:not(.inline-toolbar):not(.osd) {
938
scale,
939
entry,
940
spinbutton,
941
button { margin: $container_padding / 2; }
942
.linked entry,
944
.linked spinbutton,
945
.linked button {
946
&:not(:first-child) { margin-left: 0; }
947
&:not(:last-child) { margin-right: 0; }
948
}
949
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
951
}
952
}
953
//searchbar, location-bar & inline-toolbar
955
.inline-toolbar {
956
padding: $container_padding;
957
border-style: solid;
958
border-width: 0 1px 1px;
959
border-color: $borders_color;
960
background-color: $alt_base_color;
961
}
962
searchbar,
964
.location-bar {
965
padding: $container_padding;
966
border-style: solid;
967
border-width: 0 0 1px;
968
border-color: $borders_color;
969
background-color: $bg_color;
970
background-clip: border-box;
971
}
972
/***************
975
* Header bars *
976
***************/
977
%titlebar,
978
headerbar {
979
transition: background-color $shorter_duration $deceleration_curve;
980
min-height: $large_size;
981
padding: 0 $container_padding;
982
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
983
background-color: $headerbar_color;
984
color: $inversed_fg_color;
985
&:disabled :not(button) > label { color: $disabled_inversed_fg_color; }
987
&:backdrop {
989
color: $secondary_inversed_fg_color;
990
&:disabled :not(button) > label { color: $disabled_secondary_inversed_fg_color; }
992
}
993
.title {
995
transition: $longer_transition;
996
padding: 0 12px;
997
font-weight: bold;
998
}
999
.subtitle {
1001
transition: $longer_transition;
1002
padding: 0 12px;
1003
font-size: smaller;
1004
@extend .dim-label;
1006
}
1007
button:not(.suggested-action):not(.destructive-action) {
1009
@extend %button_basic.flat;
1010
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1012
currentColor 0%,
1013
transparent 0%)
1014
0 0 0 / 0 0 0px;
1015
&:checked {
1017
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1018
currentColor 100%,
1019
transparent 0%)
1020
0 0 2 / 0 0 2px;
1021
&, &:disabled { background-color: transparent; }
1023
}
1024
}
1025
button.suggested-action, button.destructive-action {
1027
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1028
}
1029
&.selection-mode {
1031
transition: background-color 0 $longer_duration;
1032
animation: header_ripple_effect $longer_duration $deceleration_curve;
1033
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1034
background-color: $primary_color;
1035
color: $inversed_fg_color;
1036
&:backdrop {
1038
color: $secondary_inversed_fg_color;
1039
}
1040
.subtitle:link { @extend *:link:selected; }
1042
button:not(.suggested-action):not(.destructive-action) {
1044
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1045
currentColor 0%,
1046
transparent 0%)
1047
0 0 0 / 0 0 0px;
1048
color: currentColor;
1049
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1051
&:checked {
1053
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1054
currentColor 100%,
1055
transparent 0%)
1056
0 0 2 / 0 0 2px;
1057
color: currentColor;
1058
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1060
}
1061
}
1062
.selection-menu {
1064
padding-left: 16px;
1065
padding-right: 16px;
1066
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1068
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1070
}
1071
}
1072
.fullscreen &,
1074
.tiled &,
1075
.maximized & {
1076
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1077
box-shadow: $z-depth-1;
1078
}
1079
&.default-decoration {
1081
min-height: $small_size;
1082
padding: $container_padding;
1083
border-width: 0;
1084
button.titlebutton {
1086
min-height: $small_size;
1087
min-width: $small_size;
1088
margin: 0;
1089
padding: 0;
1090
&:active { // add fallback
1092
background-image: radial-gradient(circle farthest-corner at center,
1093
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1094
transparent 0%),
1095
image(gtkalpha(currentColor, $lower_opacity / 2));
1096
}
1097
}
1098
}
1099
.solid-csd & {
1101
&:dir(rtl), &:dir(ltr) { // specificity bump
1102
margin-left: -2px;
1103
margin-right: -2px;
1104
margin-top: -2px;
1105
// border-radius: 0;
1106
box-shadow: inset 0 1px $secondary_highlight_color;
1107
}
1108
}
1109
}
1110
headerbar {
1112
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1113
entry,
1114
spinbutton,
1115
// separator,
1116
button {
1117
margin-top: $container_padding;
1118
margin-bottom: $container_padding;
1119
}
1120
switch {
1122
margin-top: $container_padding * 2;
1123
margin-bottom: $container_padding * 2;
1124
}
1125
}
1126
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1128
border-top-left-radius: 2px;
1129
border-top-right-radius: 2px;
1130
}
1131
headerbar {
1133
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1134
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1135
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1137
}
1138
.titlebar:not(headerbar) {
1140
window.csd > & {
1141
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1142
padding: 0;
1143
background-color: transparent;
1144
background-image: none;
1145
border-style: none;
1146
box-shadow: none;
1147
}
1148
> separator {
1150
background-color: $headerbar_color;
1151
background-image: image($borders_color);
1152
}
1153
@extend %titlebar;
1155
}
1156
/************
1159
* Pathbars *
1160
************/
1161
%pathbar_button,
1162
.path-bar button {
1163
&.text-button, &.image-button, & {
1164
padding-left: 6px;
1165
padding-right: 6px;
1166
}
1167
&.text-button.image-button, & {
1169
// label:last-child { padding-left: 2px; padding-right: 8px; }
1170
// label:first-child { padding-left: 8px; padding-right: 2px; }
1171
}
1172
image {
1174
padding-left: ($medium_size - 16px) / 2 - 6px;
1175
padding-right: ($medium_size - 16px) / 2 - 6px;
1176
}
1177
&.slider-button {
1179
padding-left: 0;
1180
padding-right: 0;
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: $track_color; // this is actually the tree lines color,
1218
border-top-color: $borders_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
&:hover, &:active, &:selected { border-radius: 0; }
1223
&.separator {
1225
min-height: 1px + 2px * 2;
1226
color: $borders_color;
1227
}
1228
&:drop(active) {
1230
border-style: solid none;
1231
border-width: 1px;
1232
border-color: $accent_color;
1233
&.after { border-top-style: none; }
1235
&.before { border-bottom-style: none; }
1237
}
1238
&.expander {
1240
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1241
-gtk-icon-transform: rotate(-90deg);
1242
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1244
&:checked { -gtk-icon-transform: unset; }
1246
color: $secondary_fg_color;
1248
&:hover, &:active { color: $fg_color; }
1250
&:disabled { color: $disabled_secondary_fg_color; }
1252
&:selected {
1254
color: $secondary_inversed_fg_color;
1255
&:hover, &:active { color: $inversed_fg_color; }
1257
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1259
}
1260
}
1261
&.progressbar { // progress bar in treeviews
1263
border-style: none none solid;
1264
border-width: $bar_size;
1265
border-color: $primary_color;
1266
box-shadow: none;
1267
background-color: transparent;
1268
&:selected { border-color: currentColor; }
1270
}
1271
&.trough { // progress bar trough in treeviews
1273
border-style: none none solid;
1274
border-width: $bar_size;
1275
border-color: scale-alpha($primary_color, $lower_opacity);
1276
box-shadow: none;
1277
background-color: transparent;
1278
&:selected { border-color: $track_color; }
1280
}
1281
header {
1283
button {
1284
@extend row.activatable;
1285
padding: 2px 6px;
1287
border-style: none solid solid none;
1288
border-width: 1px;
1289
border-color: $borders_color;
1290
border-radius: 0;
1291
background-clip: border-box;
1292
&, &:hover, &:active { box-shadow: none; }
1294
&, &:disabled { background-color: $base_color; }
1296
&:last-child { border-right-style: none; }
1298
}
1299
}
1300
button.dnd,
1302
header.button.dnd { // for treeview-like derive widgets
1303
padding: 2px 6px;
1304
border-style: none solid solid;
1305
border-width: 1px;
1306
border-color: $borders_color;
1307
border-radius: 0;
1308
box-shadow: none;
1309
background-color: $base_color;
1310
background-clip: border-box;
1311
color: $primary_color;
1312
}
1313
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1315
}
1316
/*********
1319
* Menus *
1320
*********/
1321
menubar,
1322
.menubar {
1323
-GtkWidget-window-dragging: true;
1324
padding: 0;
1325
// box-shadow: inset 0 -1px $borders_color;
1326
background-color: $headerbar_color;
1327
> menuitem {
1329
transition: $shorter_transition;
1330
min-height: 20px;
1331
padding: 4px 8px;
1332
color: $secondary_inversed_fg_color;
1333
&:hover { //Seems like it :hover even with keyboard focus
1335
transition: none;
1336
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1337
color: $inversed_fg_color;
1338
}
1339
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1341
}
1342
}
1343
menu,
1345
.menu,
1346
.context-menu {
1347
margin: 4px 0;
1348
padding: 4px 0;
1349
box-shadow: inset 0 1px $highlight_color;
1350
background-color: $base_color;
1351
border: 1px solid $borders_color; // adds borders in a non composited env
1352
.csd & {
1354
border: none; // axes borders in a composited env
1355
border-radius: 2px;
1356
}
1357
menuitem {
1359
transition: $shorter_transition;
1360
min-height: 20px;
1361
min-width: 40px;
1362
padding: 4px 8px;
1363
font: initial;
1364
text-shadow: none;
1365
&:hover {
1367
transition: none;
1368
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1369
}
1370
&:disabled { color: $disabled_fg_color; }
1372
// submenu indicators
1374
arrow {
1375
min-height: 16px;
1376
min-width: 16px;
1377
&:dir(ltr) {
1379
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1380
margin-left: 8px;
1381
}
1382
&:dir(rtl) {
1384
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1385
margin-right: 8px;
1386
}
1387
}
1388
// avoids labels color being overridden, see
1390
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1391
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1392
}
1393
// overflow arrows
1395
> arrow {
1396
min-height: 16px;
1397
min-width: 16px;
1398
padding: 4px;
1399
border-radius: 0;
1400
background-color: $base_color;
1401
color: $secondary_fg_color;
1402
&.top {
1404
margin-top: -4px;
1405
border-bottom: 1px solid $borders_color;
1406
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1407
}
1408
&.bottom {
1410
margin-bottom: -4px;
1411
border-top: 1px solid $borders_color;
1412
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1413
}
1414
&:hover {
1416
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1417
color: $fg_color;
1418
}
1419
&:disabled {
1421
border-color: transparent;
1422
background-color: transparent;
1423
color: transparent;
1424
// color: $disabled_secondary_fg_color;
1425
}
1426
}
1427
separator { margin: 4px 0; }
1429
}
1430
menuitem {
1432
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1433
check,
1435
radio {
1436
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1437
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1438
}
1439
}
1440
.csd.popup { border-radius: 2px; }
1442
/***************
1445
* Popovers *
1446
***************/
1447
popover.background {
1448
transition: $shadow_transition;
1449
padding: 0;
1450
box-shadow: $z-depth-2; // TODO: this should really have a highlight
1451
background-color: $lighter_bg_color;
1452
&:backdrop { box-shadow: $z-depth-1; }
1454
&, .csd & {
1456
border-style: solid;
1457
border-width: 1px;
1458
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1459
border-radius: 2px + 1px;
1460
}
1461
> list,
1463
> .view,
1464
> toolbar {
1465
border-style: none;
1466
box-shadow: none;
1467
background-color: transparent;
1468
}
1469
&, .csd & {
1471
&.touch-selection,
1472
&.magnifier,
1473
&.osd { @extend %osd; }
1474
}
1475
// entry { @extend %entry.flat; }
1477
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1479
button.model {
1481
@extend %simple_flat_button;
1482
min-height: 32px;
1484
padding: 0 8px;
1485
border-radius: 2px;
1486
&:checked {
1488
background-color: $primary_color;
1489
color: $inversed_fg_color;
1490
}
1491
}
1492
separator { margin: 4px 0; }
1494
list separator { margin: 0; }
1496
}
1497
/*************
1499
* Notebooks *
1500
*************/
1501
notebook {
1502
> header {
1503
border-width: 1px;
1504
border-color: $borders_color;
1505
background-color: $bg_color;
1506
background-clip: border-box;
1507
&.top {
1509
border-bottom-style: solid;
1510
> tabs {
1511
margin-bottom: -1px;
1512
> tab {
1513
&:hover { box-shadow: inset 0 -2px $track_color; }
1515
&:checked { box-shadow: inset 0 -2px $primary_color; }
1517
}
1518
}
1519
}
1520
&.bottom {
1522
border-top-style: solid;
1523
> tabs {
1524
margin-top: -1px;
1525
> tab {
1526
&:hover { box-shadow: inset 0 2px $track_color; }
1528
&:checked { box-shadow: inset 0 2px $primary_color; }
1530
}
1531
}
1532
}
1533
&.left {
1535
border-right-style: solid;
1536
> tabs {
1537
margin-right: -1px;
1538
> tab {
1539
&:hover { box-shadow: inset -2px 0 $track_color; }
1541
&:checked { box-shadow: inset -2px 0 $primary_color; }
1543
}
1544
}
1545
}
1546
&.right {
1548
border-left-style: solid;
1549
> tabs {
1550
margin-left: -1px;
1551
> tab {
1552
&:hover { box-shadow: inset 2px 0 $track_color; }
1554
&:checked { box-shadow: inset 2px 0 $primary_color; }
1556
}
1557
}
1558
}
1559
&.top > tabs > arrow {
1561
@extend %notebook_vert_arrows;
1562
border-top-style: none;
1564
}
1565
&.bottom > tabs > arrow {
1567
@extend %notebook_vert_arrows;
1568
border-bottom-style: none;
1570
}
1571
@at-root %notebook_vert_arrows {
1573
padding-left: 4px;
1574
padding-right: 4px;
1575
&.down {
1577
margin-left: -8px;
1578
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1579
}
1580
&.up {
1582
margin-right: -8px;
1583
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1584
}
1585
}
1586
&.left > tabs > arrow {
1588
@extend %notebook_horz_arrows;
1589
border-left-style: none;
1591
}
1592
&.right > tabs > arrow {
1594
@extend %notebook_horz_arrows;
1595
border-right-style: none;
1597
}
1598
@at-root %notebook_horz_arrows {
1600
padding-top: 4px;
1601
padding-bottom: 4px;
1602
&.down {
1604
margin-top: -8px;
1605
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1606
}
1607
&.up {
1609
margin-bottom: -8px;
1610
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1611
}
1612
}
1613
> tabs > arrow {
1615
@extend %simple_flat_button;
1616
min-height: 16px;
1618
min-width: 16px;
1619
border-radius: 0;
1620
}
1621
tab {
1623
transition: $longer_transition;
1624
min-height: $small_size;
1625
min-width: $small_size;
1626
padding: $container_padding 12px;
1627
outline-offset: -6px;
1629
border-width: 1px; // for reorderable tabs
1631
border-color: transparent; //
1632
color: $secondary_fg_color;
1634
font-weight: 500;
1635
&:hover {
1637
color: $fg_color;
1638
&.reorderable-page {
1640
border-color: $borders_color;
1641
background-color: $alt_base_color;
1642
}
1643
}
1644
&:disabled { color: $disabled_secondary_fg_color; }
1646
&:checked {
1648
animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
1649
color: $fg_color;
1650
&:disabled { color: $disabled_fg_color; }
1652
&.reorderable-page {
1654
border-color: $borders_color;
1655
background-color: $base_color;
1656
}
1657
}
1658
// colors the button like the label, overridden otherwise
1660
button.flat {
1661
@extend %small_button;
1662
&:last-child {
1664
margin-left: $container_padding;
1665
margin-right: $container_padding - 12px;
1666
}
1667
&:first-child {
1669
margin-left: $container_padding - 12px;
1670
margin-right: $container_padding;
1671
}
1672
}
1673
}
1674
&.top,
1676
&.bottom {
1677
tabs {
1678
padding-left: 8px;
1679
padding-right: 8px;
1680
&:not(:only-child) {
1682
&:first-child { margin-left: 0; }
1683
&:last-child { margin-right: 0; }
1684
}
1685
tab {
1687
&.reorderable-page {
1688
margin: 0 -1px;
1689
border-style: none solid;
1690
}
1691
}
1692
}
1693
}
1694
&.left,
1696
&.right {
1697
tabs {
1698
padding-top: 8px;
1699
padding-bottom: 8px;
1700
&:not(:only-child) {
1702
&:first-child { margin-top: 0; }
1703
&:last-child { margin-bottom: 0; }
1704
}
1705
tab {
1707
&.reorderable-page {
1708
margin: -1px 0;
1709
border-style: solid none;
1710
}
1711
}
1712
}
1713
}
1714
}
1715
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1717
background-color: $base_color;
1718
entry,
1720
spinbutton:not(.vertical) { @extend %entry.flat; }
1721
revealer entry,
1723
revealer spinbutton:not(.vertical) { @extend %entry; }
1724
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1726
}
1727
}
1728
/**************
1731
* Scrollbars *
1732
**************/
1733
scrollbar {
1734
$_slider_min_length: 24px;
1735
// disable steppers
1737
@at-root * {
1738
-GtkScrollbar-has-backward-stepper: false;
1739
-GtkScrollbar-has-forward-stepper: false;
1740
}
1741
transition: $longer_transition;
1743
background-color: $base_color;
1744
background-clip: $extra_background_clip;
1745
// scrollbar border
1747
&.top { border-bottom: 1px solid $borders_color; }
1748
&.bottom { border-top: 1px solid $borders_color; }
1749
&.left { border-right: 1px solid $borders_color; }
1750
&.right { border-left: 1px solid $borders_color; }
1751
// slider
1753
slider {
1754
transition: $shorter_transition, margin 0, border-width 0;
1755
min-width: 8px;
1756
min-height: 8px;
1757
border: 4px solid transparent;
1758
border-radius: $circular_radius;
1759
background-clip: padding-box;
1760
background-color: $tertiary_fg_color;
1761
&:hover { background-color: $secondary_fg_color; }
1763
&:active { background-color: $fg_color; }
1765
&:disabled { background-color: $disabled_tertiary_fg_color; }
1767
}
1768
&.fine-tune {
1770
slider {
1771
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1772
min-width: 4px;
1773
min-height: 4px;
1774
}
1775
&.horizontal slider { margin: 2px 0; }
1777
&.vertical slider { margin: 0 2px; }
1779
}
1780
&.overlay-indicator {
1782
&:not(.dragging):not(.hovering) {
1783
border-color: transparent;
1784
background-color: transparent;
1785
slider {
1787
min-width: 4px;
1788
min-height: 4px;
1789
margin: 4px - 1px;
1790
border: 1px solid scale-alpha($base_color, $lower_opacity);
1791
}
1792
button {
1794
min-width: 4px;
1795
min-height: 4px;
1796
margin: 4px - 1px;
1797
border: 1px solid scale-alpha($base_color, $lower_opacity);
1798
border-radius: $circular_radius;
1799
background-color: $tertiary_fg_color;
1800
background-clip: padding-box;
1801
-gtk-icon-source: none;
1802
&:disabled { background-color: $disabled_tertiary_fg_color; }
1804
}
1805
&.horizontal {
1807
slider { min-width: $_slider_min_length; }
1808
button { min-width: 8px; }
1810
}
1811
&.vertical {
1813
slider { min-height: $_slider_min_length; }
1814
button { min-height: 8px; }
1816
}
1817
}
1818
&.dragging,
1820
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1821
}
1822
&.horizontal slider { min-width: $_slider_min_length; }
1824
&.vertical slider { min-height: $_slider_min_length; }
1826
// button styling
1828
button {
1829
@extend %simple_flat_button;
1830
min-width: 16px;
1832
min-height: 16px;
1833
padding: 0;
1834
border-radius: 0;
1835
}
1836
// button icons
1838
&.vertical {
1839
button {
1840
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1841
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1843
}
1844
}
1845
&.horizontal {
1847
button {
1848
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1849
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1851
}
1852
}
1853
}
1854
/**********
1857
* Switch *
1858
**********/
1859
switch {
1860
transition: $longer_transition;
1861
margin: $container_padding 0;
1862
border: 4px solid transparent;
1863
border-radius: $circular_radius;
1864
background-color: $track_color;
1865
background-clip: padding-box;
1866
font-size: 0;
1867
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1869
&:checked {
1871
background-color: scale-alpha($accent_color, 0.5);
1872
&:disabled {
1874
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1875
color: $disabled_fg_color;
1876
}
1877
}
1878
slider {
1880
@include entry(normal);
1881
transition: $longer_transition, $shadow_transition, margin 0;
1883
min-width: $small_size;
1884
min-height: $small_size;
1885
margin: -4px 0 -4px -4px;
1886
-gtk-outline-radius: $circular_radius;
1887
border-radius: $circular_radius;
1888
}
1889
&:hover slider { @include entry(focus); }
1891
&:checked slider {
1893
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0 $longer_duration;
1894
animation: needs_attention $longer_duration $deceleration_curve;
1895
margin: -4px -4px -4px 0;
1896
background-color: $accent_color;
1897
color: $inversed_fg_color;
1898
}
1899
&:disabled slider { @include entry(disabled); }
1901
&:checked:disabled slider { animation: none; }
1903
row:selected & {
1905
}
1906
}
1907
/*************************
1910
* Check and Radio items *
1911
*************************/
1912
// draw regular check and radio items using our PNG assets
1913
// all assets are rendered from assets.svg. never add pngs directly
1914
//selection-mode
1916
@each $s,$as in ('','-selectionmode'),
1917
(':hover', '-hover-selectionmode'),
1918
(':checked', '-checked-selectionmode'),
1919
(':checked:hover', '-checked-hover-selectionmode') {
1920
.view.content-view.check#{$s}:not(list) {
1921
-gtk-icon-shadow: $z-depth-1;
1922
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1923
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1924
margin: 8px;
1925
background-color: transparent;
1926
}
1927
}
1928
checkbutton.text-button,
1930
radiobutton.text-button {
1931
// this is for a nice focus on check and radios text
1932
padding: 2px;
1933
outline-offset: 0;
1934
label:not(:only-child) { margin: 0 4px; }
1936
}
1937
check,
1939
radio {
1940
min-height: 24px;
1941
min-width: 24px;
1942
margin: -($large_size - 24px) / 2;
1943
padding: ($large_size - 24px) / 2;
1944
@extend %simple_flat_button;
1946
@extend %circular_button;
1948
&:checked, &:indeterminate { color: $accent_color; }
1950
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1952
// &:only-child { margin: -12px; }
1954
row &:not(:checked):not(:indeterminate) {
1956
color: gtkalpha(currentColor, $enabled_opacity);
1957
&:hover, &:active { color: currentColor; }
1959
&:disabled { color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity); }
1961
}
1962
menu menuitem & {
1964
transition: none;
1965
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1966
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1968
&, &:hover, &:disabled {
1970
background-image: none;
1971
// color: inherit;
1972
// animation: none;
1973
}
1974
}
1975
}
1976
%check,
1978
check {
1979
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1980
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1981
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1983
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1984
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1986
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1987
}
1988
$radio_indicator: 10 / ($large_size / 1px) / 2;
1990
$radio_radius_slice: #{$large_size / 2 / 1px};
1991
$radio_radius_width: #{$large_size / 2};
1992
%radio,
1994
radio {
1995
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1996
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1997
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1999
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
2000
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2002
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2003
border-image: -gtk-gradient(radial,
2005
center center, 0,
2006
center center, 0.001,
2007
to($accent_color),
2008
to(transparent))
2009
$radio_radius_slice / $radio_radius_width;
2010
&:checked {
2012
border-image: -gtk-gradient(radial,
2013
center center, 0,
2014
center center, $radio_indicator,
2015
to($accent_color),
2016
to(transparent))
2017
$radio_radius_slice / $radio_radius_width;
2018
}
2019
&:checked:disabled {
2021
border-image: -gtk-gradient(radial,
2022
center center, 0,
2023
center center, $radio_indicator,
2024
to(scale-alpha($accent_color, $disabled_opacity)),
2025
to(transparent))
2026
$radio_radius_slice / $radio_radius_width;
2027
}
2028
&:indeterminate:checked {
2030
border-image: -gtk-gradient(radial,
2031
center center, 0,
2032
center center, 0.001,
2033
to($accent_color),
2034
to(transparent))
2035
$radio_radius_slice / $radio_radius_width;
2036
}
2037
}
2038
// let's animate things
2040
@keyframes check_check {
2041
from { -gtk-icon-transform: rotate(90deg); }
2042
to { -gtk-icon-transform: unset; }
2043
}
2044
@keyframes check_radio { // FIXME: cannot animate border-image
2046
from {
2047
border-image: -gtk-gradient(radial,
2048
center center, 0,
2049
center center, 0.001,
2050
to($accent_color),
2051
to(transparent))
2052
$radio_radius_slice / $radio_radius_width;
2053
}
2054
to {
2056
border-image: -gtk-gradient(radial,
2057
center center, 0,
2058
center center, $radio_indicator,
2059
to($accent_color),
2060
to(transparent))
2061
$radio_radius_slice / $radio_radius_width;
2062
}
2063
}
2064
@keyframes check_indeterminate {
2066
from { -gtk-icon-transform: unset; }
2067
50% { -gtk-icon-transform: scale(0, 1); }
2068
to { -gtk-icon-transform: unset; }
2069
}
2070
%check_checked,
2072
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2073
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2075
// %radio_checked,
2077
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2078
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2080
%indeterminate_checked,
2082
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2083
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2085
// no animations in menus
2087
menu menuitem {
2088
check:not(:indeterminate):checked,
2089
radio:not(:indeterminate):checked,
2090
check:indeterminate:checked,
2091
radio:indeterminate:checked { animation: none; }
2092
}
2093
treeview.view check,
2095
treeview.view radio {
2096
padding: 0;
2097
&:hover {
2099
box-shadow: inset 0 0 0 10000px gtkalpha($fg_color, 0.05);
2100
background-image: none;
2101
&:disabled { box-shadow: none; }
2103
&:selected { box-shadow: inset 0 0 0 10000px gtkalpha($inversed_fg_color, 0.05); }
2105
}
2106
& {
2108
color: $secondary_fg_color;
2109
&:hover, &:active { color: $fg_color; }
2111
&:disabled { color: $disabled_secondary_fg_color; }
2113
&:checked, &:indeterminate { color: $accent_color; }
2115
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2117
}
2118
&:selected {
2120
color: $secondary_inversed_fg_color;
2121
&:hover, &:active { color: $inversed_fg_color; }
2123
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2125
&:checked, &:indeterminate { color: $accent_color; }
2127
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2129
}
2130
}
2131
treeview.view radio:checked {
2133
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2134
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2135
border-image: none;
2136
}
2137
/************
2140
* GtkScale *
2141
************/
2142
scale {
2143
// sizing
2144
$_marks_lenght: 8px;
2145
$_marks_distance: 8px;
2146
$slider_size: 24px;
2148
$marks_slider_size: 30px;
2149
$slider_margin: -($slider_size - $bar_size) / 2;
2151
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2152
$color_slider_margin: -($slider_size) / 2;
2154
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2155
min-height: $medium_size - $slider_size;
2157
min-width: $medium_size - $slider_size;
2158
padding: ($slider_size / 2);
2159
* { transition: $longer_transition; }
2161
// the slider is inside the trough, so to have make it bigger there's a negative margin
2163
slider {
2164
min-height: $slider_size;
2165
min-width: $slider_size;
2166
margin: $slider_margin;
2167
}
2168
// the backing bit
2170
trough {
2171
outline-offset: 2px;
2172
background-color: $track_color;
2173
&:disabled { color: $disabled_fg_color; }
2175
}
2176
// the colored part of the backing bit
2178
highlight {
2179
background-color: $accent_color;
2180
&:disabled { background-color: transparent; }
2182
}
2183
// this is another differently styled part of the backing bit, the most relevant use case is for example
2185
// in media player to indicate how much video stream as been cached
2186
fill {
2187
background-color: $track_color;
2188
&:disabled { background-color: transparent; }
2190
}
2191
slider {
2193
transition: all $shorter_duration $standard_curve;
2194
// border-radius: 100%;
2195
// background-color: $accent_color;
2196
background-repeat: no-repeat;
2197
background-position: center;
2198
@each $s,$as in ('',''),
2200
(':disabled','-insensitive') {
2201
&#{$s} {
2202
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2203
background-image: -gtk-scaled(url('#{$_url}.png'),
2204
url('#{$_url}@2.png'));
2205
}
2206
}
2207
background-size: calc(100% - 8px);
2209
&:hover { background-size: calc(100% - 4px); }
2211
&:active { background-size: calc(100% - 0px); }
2213
}
2214
// click-and-hold the slider to activate
2216
&.fine-tune {
2217
// to make the slider shrink in fine-tune mode
2218
slider { background-size: calc(100% - 12px); }
2219
}
2220
value { color: gtkalpha(currentColor, $hint_opacity); }
2222
marks {
2224
color: $track_color;
2225
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2227
(bottom, bottom, top),
2228
(top, left, right),
2229
(bottom, right, left) {
2230
&.#{$marks_class} {
2231
margin-#{$marks_margin}: $_marks_distance;
2232
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2233
}
2234
}
2235
}
2236
&.horizontal {
2238
indicator {
2239
min-height: $_marks_lenght;
2240
min-width: 1px;
2241
}
2242
}
2243
&.vertical {
2245
indicator {
2246
min-height: 1px;
2247
min-width: $_marks_lenght;
2248
}
2249
}
2250
// *WARNING* scale with marks madness following
2252
$suffix: if($variant == 'light', '', '-dark');
2253
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2255
('vertical', 'vert') {
2256
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2257
('scale-has-marks-below', ':first-child:not(:only-child)') {
2258
@each $state, $state_infix in ('', ''),
2259
(':disabled', '-insensitive') {
2260
&.#{$dir_class} {
2261
%#{$marks_infix}-#{$dir_infix},
2262
contents#{$nth_child} > trough > slider {
2263
&#{$state} {
2264
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2265
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2267
}
2268
@if $dir_class == 'horizontal' {
2270
min-height: $marks_slider_size;
2271
min-width: $slider_size;
2272
@if $marks_infix == 'scale-has-marks-above' {
2274
margin-top: $marks_slider_margin;
2275
background-position: center calc(100% - 4px);
2277
&:hover { background-position: center calc(100% - 2px); }
2279
&:active { background-position: center calc(100% - 0px); }
2281
}
2282
@if $marks_infix == 'scale-has-marks-below' {
2284
margin-bottom: $marks_slider_margin;
2285
background-position: center calc(4px);
2287
&:hover { background-position: center calc(2px); }
2289
&:active { background-position: center calc(0px); }
2291
}
2292
}
2293
@if $dir_class == 'vertical' {
2295
min-height: $slider_size;
2296
min-width: $marks_slider_size;
2297
@if $marks_infix == 'scale-has-marks-above' {
2299
margin-left: $marks_slider_margin;
2300
background-position: calc(4px) center;
2302
&:hover { background-position: calc(2px) center; }
2304
&:active { background-position: calc(0px) center; }
2306
}
2307
@if $marks_infix == 'scale-has-marks-below' {
2309
margin-right: $marks_slider_margin;
2310
background-position: calc(100% - 4px) center;
2312
&:hover { background-position: calc(100% - 2px) center; }
2314
&:active { background-position: calc(100% - 0px) center; }
2316
}
2317
}
2318
}
2319
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2321
&.fine-tune contents#{$nth_child} > trough > slider {
2322
// bigger negative margins to make the trough grow here as well
2323
@if $dir_class == 'horizontal' {
2325
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2326
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2328
}
2329
@if $dir_class == 'vertical' {
2331
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2332
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2334
}
2335
}
2336
}
2337
}
2338
}
2339
}
2340
&.color {
2342
min-height: 0;
2343
min-width: 0;
2344
&.horizontal {
2346
padding: 0 0 12px 0;
2347
// trough { padding-bottom: $bar_size; }
2349
slider {
2351
@extend %scale-has-marks-above-horz;
2352
margin-bottom: $color_slider_margin;
2354
margin-top: $color_marks_slider_margin;
2355
}
2356
}
2357
&.vertical {
2359
&:dir(ltr) {
2360
padding: 0 0 0 12px;
2361
// trough { padding-left: $bar_size; }
2363
slider {
2365
@extend %scale-has-marks-below-vert;
2366
margin-left: $color_slider_margin;
2368
margin-right: $color_marks_slider_margin;
2369
}
2370
}
2371
&:dir(rtl) {
2373
padding: 0 12px 0 0;
2374
// trough { padding-right: $bar_size; }
2376
slider {
2378
@extend %scale-has-marks-above-vert;
2379
margin-right: $color_slider_margin;
2381
margin-left: $color_marks_slider_margin;
2382
}
2383
}
2384
}
2385
&.fine-tune {
2387
&.horizontal {
2388
slider {
2389
@extend %scale-has-marks-above-horz-fine-tune;
2390
}
2391
}
2392
&.vertical {
2394
&:dir(ltr) {
2395
slider {
2396
@extend %scale-has-marks-below-vert-fine-tune;
2397
}
2398
}
2399
&:dir(rtl) {
2401
slider {
2402
@extend %scale-has-marks-above-vert-fine-tune;
2403
}
2404
}
2405
}
2406
}
2407
}
2408
}
2409
/*****************
2412
* Progress bars *
2413
*****************/
2414
progressbar {
2415
// sizing
2416
&.horizontal {
2417
trough,
2418
progress { min-height: $bar_size; }
2419
}
2420
&.vertical {
2422
trough,
2423
progress { min-width: $bar_size; }
2424
}
2425
// FIXME: insensitive state missing and some other state should be set probably
2427
color: $tertiary_fg_color;
2428
font-size: smaller;
2429
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2431
progress { background-color: $primary_color; }
2433
&.osd { // progressbar.osd used for epiphany page loading progress
2435
// min-width: $bar_size;
2436
// min-height: $bar_size;
2437
// background-color: transparent;
2438
// trough { background-color: transparent; }
2440
progress {
2442
}
2443
}
2444
}
2445
/*************
2448
* Level Bar *
2449
*************/
2450
levelbar {
2451
block {
2452
min-width: $medium_size;
2453
min-height: $bar_size;
2454
}
2455
&.vertical block {
2457
min-width: $bar_size;
2458
min-height: $medium_size;
2459
}
2460
trough {
2462
padding: 2px;
2463
border-radius: 2px;
2464
@include entry(normal);
2466
&:disabled { @include entry(disabled); }
2468
}
2469
&.horizontal.discrete block { margin: 0 1px; }
2471
&.vertical.discrete block { margin: 1px 0; }
2473
&.horizontal.discrete trough { padding: 2px 1px; }
2475
&.vertical.discrete trough { padding: 1px 2px; }
2477
block {
2479
&.low {
2480
background-color: $warning_color;
2481
}
2482
&.high,
2484
&:not(.empty) {
2485
background-color: $primary_color;
2486
}
2487
&.full {
2489
background-color: $success_color;
2490
}
2491
&.empty {
2493
background-color: $track_color;
2494
color: $disabled_fg_color;
2495
}
2496
}
2497
}
2498
/****************
2501
* Print dialog *
2502
*****************/
2503
printdialog {
2504
paper {
2505
padding: 0;
2506
border: 1px solid $borders_color;
2507
background: $base_color;
2508
color: $fg_color;
2509
}
2510
.dialog-action-box { margin: 12px; }
2512
}
2513
/**********
2516
* Frames *
2517
**********/
2518
frame > border,
2519
.frame {
2520
margin: 0;
2521
padding: 0;
2522
border: 1px solid $borders_color;
2523
border-radius: 0;
2524
box-shadow: none;
2525
&.flat { border-style: none; }
2527
}
2528
actionbar > revealer > box {
2530
padding: $container_padding;
2531
border-top: 1px solid $borders_color;
2532
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2534
}
2535
scrolledwindow {
2537
viewport.frame { // avoid double borders when viewport inside scrolled window
2538
border-style: none;
2539
}
2540
// This is used when content is touch-dragged past boundaries.
2542
// draws a box on top of the content, the size changes programmatically.
2543
@at-root overshoot {
2544
&.top { @include overshoot(top); }
2545
&.bottom { @include overshoot(bottom); }
2547
&.left { @include overshoot(left); }
2549
&.right { @include overshoot(right); }
2551
}
2552
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2554
@at-root undershoot {
2555
&.top { @include undershoot(top); }
2556
&.bottom { @include undershoot(bottom); }
2558
&.left { @include undershoot(left); }
2560
&.right { @include undershoot(right); }
2562
}
2563
@at-root junction { // the small square between two scrollbars
2565
border-style: solid none none solid;
2566
border-width: 1px;
2567
border-color: $borders_color;
2568
background-color: $base_color;
2569
&:dir(rtl) { border-style: solid solid none none; }
2571
}
2572
}
2573
//vbox and hbox separators
2575
separator {
2576
min-width: 1px;
2577
min-height: 1px;
2578
background: $borders_color;
2579
}
2580
/*********
2583
* Lists *
2584
*********/
2585
list {
2586
border-color: $borders_color;
2587
background-color: $base_color;
2588
row { padding: 2px; }
2590
}
2591
// FIXME
2593
$row_transition: $longer_transition, background-color 0, color 0;
2594
row {
2596
&.activatable {
2597
transition: $row_transition;
2598
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0);
2599
background-image: radial-gradient(circle farthest-corner at center,
2600
gtkalpha(currentColor, 0) 100%,
2601
transparent 0%),
2602
image(gtkalpha(currentColor, 0));
2603
&:hover {
2605
transition: $row_transition, box-shadow 0;
2606
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0.05);
2607
background-image: radial-gradient(circle farthest-corner at center,
2608
gtkalpha(currentColor, 0) 100%,
2609
transparent 0%),
2610
image(gtkalpha(currentColor, 0));
2611
}
2612
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2614
&:active {
2615
transition: $row_transition, background-image 0;
2616
animation: row_ripple_effect $longer_duration $deceleration_curve forwards;
2617
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, $lower_opacity / 2);
2618
}
2619
}
2620
&:selected { @extend %selected_items; }
2622
}
2623
/*********************
2626
* App Notifications *
2627
*********************/
2628
.app-notification,
2629
.app-notification.frame {
2630
@extend %osd;
2631
@extend toolbar.osd;
2633
margin: 8px;
2635
button { @extend %button_basic.flat; }
2637
border { border: none; }
2639
}
2640
/*************
2643
* Expanders *
2644
*************/
2645
expander {
2646
arrow {
2647
transition: all $shorter_duration $standard_curve;
2648
min-width: 16px;
2649
min-height: 16px;
2650
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2651
-gtk-icon-transform: rotate(-90deg);
2652
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2654
&:checked { -gtk-icon-transform: unset; }
2656
color: $secondary_fg_color;
2658
&:hover, &:active { color: $fg_color; }
2660
&:disabled { color: $disabled_secondary_fg_color; }
2662
&:selected {
2664
color: $secondary_inversed_fg_color;
2665
&:hover, &:active { color: $inversed_fg_color; }
2667
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2669
}
2670
}
2671
}
2672
/************
2675
* Calendar *
2676
***********/
2677
calendar {
2678
padding: 1px;
2679
border: 1px solid $borders_color;
2680
color: $fg_color;
2681
&:disabled { color: $disabled_fg_color; }
2683
&:selected {
2685
@extend %selected_items;
2686
border-radius: 2px + 1px;
2688
}
2689
&.header {
2691
border-style: none none solid;
2692
border-radius: 0;
2693
}
2694
&.button { @extend %simple_flat_button; }
2696
&.highlight {
2698
color: gtkalpha(currentColor, $hint_opacity);
2699
font-weight: 500;
2700
}
2701
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2703
}
2704
/***********
2707
* Dialogs *
2708
***********/
2709
messagedialog { // Message Dialog styling
2710
&.background { background-color: $lighter_bg_color; }
2711
.titlebar {
2713
min-height: $small_size;
2714
border-style: none;
2715
box-shadow: inset 0 1px $highlight_color;
2716
background-color: $lighter_bg_color;
2717
}
2718
&.csd { // rounded bottom border styling for csd version
2720
&.background {
2721
// bigger radius for better antialiasing
2722
border-bottom-left-radius: 2px;
2723
border-bottom-right-radius: 2px;
2724
}
2725
.dialog-action-area button {
2727
padding: 8px 16px;
2728
border-top: 1px solid $borders_color;
2729
border-radius: 0;
2730
@extend %simple_flat_button;
2732
&:first-child { border-bottom-left-radius: 2px; }
2734
&:last-child { border-bottom-right-radius: 2px; }
2736
}
2737
}
2738
}
2739
filechooser {
2741
.dialog-action-box { border-top: 1px solid $borders_color; }
2742
#pathbarbox {
2744
border-bottom: 1px solid $borders_color;
2745
background-color: $bg_color;
2746
}
2747
}
2748
filechooserbutton:drop(active) {
2750
box-shadow: none;
2751
}
2752
/***********
2755
* Sidebar *
2756
***********/
2757
.sidebar {
2758
border-style: none;
2759
background-color: $lighter_bg_color;
2760
@at-root %sidebar_left,
2762
&:dir(ltr),
2763
&.left,
2764
&.left:dir(rtl) {
2765
border-right: 1px solid $borders_color;
2766
border-left-style: none;
2767
}
2768
@at-root %sidebar_right
2770
&:dir(rtl),
2771
&.right {
2772
border-left: 1px solid $borders_color;
2773
border-right-style: none;
2774
}
2775
list { background-color: transparent; }
2777
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2779
}
2780
stacksidebar {
2782
&.sidebar {
2783
&:dir(ltr),
2784
&.left,
2785
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2786
&:dir(rtl),
2788
&.right { list { @extend %sidebar_right; }}
2789
}
2790
row {
2792
padding: 10px 4px;
2793
> label {
2795
padding-left: 6px;
2796
padding-right: 6px;
2797
}
2798
&.needs-attention > label { @extend %needs_attention; }
2800
}
2801
}
2802
/****************
2805
* File chooser *
2806
****************/
2807
placessidebar {
2808
> viewport.frame { border-style: none; }
2809
list { padding: (4px - 3px) 0 4px; }
2811
row {
2813
// Needs overriding of the GtkListBoxRow padding
2814
min-height: 32px;
2815
margin: -1px 0; // Remove unknown margins
2816
padding: 0;
2817
// Using margins/padding directly in the SidebarRow
2819
// will make the animation of the new bookmark row jump
2820
> revealer { padding: 0 12px; }
2821
&:selected { color: $inversed_fg_color; }
2823
&:disabled { color: $disabled_fg_color; }
2825
image.sidebar-icon {
2827
opacity: $hint_opacity; // dim the device icons
2828
&:dir(ltr) { padding-right: 8px; }
2830
&:dir(rtl) { padding-left: 8px; }
2831
}
2832
label.sidebar-label {
2834
&:dir(ltr) { padding-right: 2px; }
2835
&:dir(rtl) { padding-left: 2px; }
2836
}
2837
@at-root button.sidebar-button {
2839
@extend %simple_flat_button;
2840
@extend %small_button;
2842
row:selected & {
2844
}
2845
}
2846
&.sidebar-placeholder-row {
2848
min-height: 2px;
2849
padding: 0 8px;
2850
background-image: image($accent_color);
2851
background-clip: content-box;
2852
}
2853
&.sidebar-new-bookmark-row { color: $accent_color; }
2855
&:drop(active):not(:disabled) {
2857
box-shadow: inset 0 0 0 2px $accent_color;
2858
&:selected {
2860
// background-color: $accent_color;
2861
// color: $inversed_fg_color;
2862
}
2863
}
2864
}
2865
}
2866
placesview {
2868
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2869
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2871
// this selects the "connect to server" label
2873
> actionbar > revealer > box > label {
2874
padding-left: 8px;
2875
padding-right: 8px;
2876
}
2877
}
2878
/*********
2881
* Paned *
2882
*********/
2883
paned {
2884
> separator {
2885
min-width: 1px;
2886
min-height: 1px;
2887
-gtk-icon-source: none; // defeats the ugly default handle decoration
2888
border-style: none; // just to be sure
2889
background-color: transparent;
2890
// workaround, using background istead of a border since the border will get rendered twice (?)
2891
background-image: image($borders_color);
2892
background-size: 1px 1px;
2893
&.wide {
2895
min-width: 6px;
2896
min-height: 6px;
2897
background-color: $bg_color;
2898
background-image: image($borders_color), image($borders_color);
2899
background-size: 1px 1px, 1px 1px;
2900
}
2901
}
2902
&.horizontal > separator {
2904
background-repeat: repeat-y;
2905
&:dir(ltr) {
2907
margin: 0 -8px 0 0;
2908
padding: 0 8px 0 0;
2909
background-position: left;
2910
}
2911
&:dir(rtl) {
2913
margin: 0 0 0 -8px;
2914
padding: 0 0 0 8px;
2915
background-position: right;
2916
}
2917
&.wide {
2919
margin: 0;
2920
padding: 0;
2921
background-repeat: repeat-y, repeat-y;
2922
background-position: left, right;
2923
}
2924
}
2925
&.vertical > separator {
2927
margin: 0 0 -8px 0;
2928
padding: 0 0 8px 0;
2929
background-repeat: repeat-x;
2930
background-position: top;
2931
&.wide {
2933
margin: 0;
2934
padding: 0;
2935
background-repeat: repeat-x, repeat-x;
2936
background-position: bottom, top;
2937
}
2938
}
2939
}
2940
/**************
2943
* GtkInfoBar *
2944
**************/
2945
infobar {
2946
border-style: none;
2947
&.info { background-color: $info_bg_color; }
2949
&.question { background-color: $question_bg_color; }
2951
&.warning { background-color: $warning_bg_color; }
2953
&.error { background-color: $error_bg_color; }
2955
&.info,
2957
&.question,
2958
&.warning,
2959
&.error {
2960
> label, & { color: $inversed_fg_color; }
2961
button { @extend %button_selected; }
2963
selection { }
2965
*:link { @extend %link_selected; }
2967
}
2968
}
2969
/************
2972
* Tooltips *
2973
************/
2974
tooltip {
2975
&.background {
2976
// background-color needs to be set this way otherwise it gets drawn twice
2977
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2978
box-shadow: inset 0 1px $highlight_color;
2979
background-color: scale-alpha($base_color, $higher_opacity);
2980
}
2981
// @extend %osd;
2983
// padding: 4px; /* not working */
2985
border-radius: 2px;
2986
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2987
// FIXME: we need a border or tooltips vanish on black background.
2989
decoration { background-color: transparent; }
2990
label {
2992
// tooltip label has already 6px margins
2993
min-height: 32px - 6px * 2;
2994
padding: 0 8px - 6px;
2995
}
2996
* { // Yeah this is ugly
2998
padding: 0;
2999
background-color: transparent;
3000
color: inherit;
3001
}
3002
}
3003
/*****************
3006
* Color Chooser *
3007
*****************/
3008
colorswatch {
3009
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3010
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3011
// applied to the overlay box.
3012
// base color corners rounding
3014
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3015
// sports a bigger radius.
3016
// nth-child is needed by the custom color strip.
3017
&.top {
3019
border-top-left-radius: $md_radius + 0.5px;
3020
border-top-right-radius: $md_radius + 0.5px;
3021
overlay {
3023
border-top-left-radius: $md_radius;
3024
border-top-right-radius: $md_radius;
3025
}
3026
}
3027
&.bottom {
3029
border-bottom-left-radius: $md_radius + 0.5px;
3030
border-bottom-right-radius: $md_radius + 0.5px;
3031
overlay {
3033
border-bottom-left-radius: $md_radius;
3034
border-bottom-right-radius: $md_radius;
3035
}
3036
}
3037
&.left,
3039
&:first-child:not(.top) {
3040
border-top-left-radius: $md_radius + 0.5px;
3041
border-bottom-left-radius: $md_radius + 0.5px;
3042
overlay {
3044
border-top-left-radius: $md_radius;
3045
border-bottom-left-radius: $md_radius;
3046
}
3047
}
3048
&.right,
3050
&:last-child:not(.bottom) {
3051
border-top-right-radius: $md_radius + 0.5px;
3052
border-bottom-right-radius: $md_radius + 0.5px;
3053
overlay {
3055
border-top-right-radius: $md_radius;
3056
border-bottom-right-radius: $md_radius;
3057
}
3058
}
3059
&.dark overlay { color: $dark_contrast_color; }
3061
&.light overlay { color: $light_contrast_color; }
3063
&.dark { color: $dark_contrast_color; } // for focus ring
3065
&.light { color: $light_contrast_color; } // for focus ring
3067
&:drop(active) {
3069
box-shadow: none;
3070
&.light overlay {
3072
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3073
}
3074
&.dark overlay {
3076
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3077
}
3078
}
3079
overlay {
3081
transition: $shadow_transition;
3082
box-shadow: $z-depth-1;
3083
&:hover { box-shadow: $z-depth-2; }
3085
}
3086
&#add-color-button {
3088
border-radius: $md_radius $md_radius 0 0;
3089
color: $dark_contrast_color; // for focus ring
3090
&:only-child { border-radius: $md_radius; }
3092
overlay {
3094
background-image: linear-gradient(to right,
3095
$error_bg_color 25%,
3096
$warning_bg_color 25%, $warning_bg_color 50%,
3097
$info_bg_color 50%, $info_bg_color 75%,
3098
$question_bg_color 75%);
3099
color: $dark_contrast_color;
3100
}
3101
}
3102
&:disabled {
3104
opacity: $disabled_opacity;
3105
overlay { box-shadow: none; }
3107
}
3108
row:selected & {
3110
}
3111
&#editor-color-sample {
3113
border-radius: $md_radius + 0.5px;
3114
overlay { border-radius: $md_radius; }
3116
// overlay:hover { box-shadow: $z-depth-1; }
3118
}
3119
}
3120
// colorscale popup
3122
colorchooser .popover.osd {
3123
transition: $shadow_transition;
3124
border-radius: 2px;
3125
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
3126
background-color: $base_color;
3127
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
3129
spinbutton:not(.vertical) { @extend %entry.flat; }
3131
}
3132
/********
3135
* Misc *
3136
********/
3137
//content view (grid/list)
3138
.content-view {
3139
background-color: $bg_color;
3140
// &:hover { -gtk-icon-effect: highlight; }
3142
rubberband { @extend rubberband; }
3144
}
3145
.scale-popup {
3147
.osd & { @extend %osd; }
3148
.osd & button.flat { //FIXME: quick hack, redo properly
3150
}
3151
button { // +/- buttons on GtkVolumeButton popup
3153
}
3154
}
3155
/**********************
3158
* Window Decorations *
3159
*********************/
3160
decoration {
3161
transition: $shadow_transition;
3162
border-radius: 2px 2px 0 0;
3163
box-shadow: $z-depth-4, 0 16px 16px transparent;
3164
// FIXME rationalize shadows
3166
// this is used for the resize cursor area
3168
margin: 8px;
3169
&:backdrop {
3171
// the transparent shadow here is to enforce that the shadow extents don't
3172
// change when we go to backdrop, to prevent jumping windows.
3173
// The biggest shadow should be in the same order then in the active state
3174
// or the jumping will happen during the transition.
3175
box-shadow: $z-depth-2, 0 16px 16px transparent;
3176
}
3177
.maximized &,
3179
.fullscreen &,
3180
.tiled & { border-radius: 0; }
3181
.popup & { box-shadow: none; }
3183
// server-side decorations as used by mutter
3185
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3186
.csd.popup & {
3188
border-radius: 2px;
3189
box-shadow: $z-depth-2;
3190
}
3191
tooltip.csd & {
3193
border-radius: 2px;
3194
box-shadow: $z-depth-2;
3195
}
3196
messagedialog.csd & {
3198
border-radius: 2px;
3199
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3200
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3202
}
3203
.solid-csd & {
3205
margin: 0;
3206
padding: 4px;
3207
// border: solid 1px $borders_color;
3208
// border-radius: 0;
3209
box-shadow: inset 0 0 0 4px $headerbar_color;
3210
// background-color: $borders_color;
3211
}
3212
}
3213
// Window Close button
3215
button.titlebutton {
3216
// @extend %simple_flat_button;
3217
@extend %circular_button;
3219
.selection-mode & {
3221
}
3222
}
3223
// catch all extend :)
3226
%selected_items {
3228
background-color: $primary_color;
3229
@at-root %nobg_selected_items, & {
3231
color: $inversed_fg_color;
3232
&:disabled { color: $disabled_inversed_fg_color; }
3234
}
3235
}
3236
.monospace { font-family: monospace; }
3238
/**********************
3241
* Touch Copy & Paste *
3242
*********************/
3243
//touch selection handlebars for the Popover.osd above
3244
cursor-handle {
3245
border-radius: $circular_radius;
3246
background-color: $accent_color;
3247
background-image: none;
3248
&.top:dir(ltr), &.bottom:dir(rtl) {
3250
padding-left: 6px;
3251
border-top-right-radius: 0;
3252
}
3253
&.bottom:dir(ltr), &.top:dir(rtl) {
3255
padding-right: 6px;
3256
border-top-left-radius: 0;
3257
}
3258
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3260
-GtkWidget-text-handle-width: 24;
3261
-GtkWidget-text-handle-height: 30;
3262
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3264
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3265
url('#{$_url}@2.png'));
3266
}
3267
}
3268
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3270
%circular_button,
3272
button.circular { // FIXME: aggregate to buttons
3273
border-radius: $circular_radius;
3274
-gtk-outline-radius: $circular_radius;
3275
// label { padding: 0; }
3277
}
3278
%small_button {
3280
min-height: $small_size;
3281
min-width: $small_size;
3282
padding: 0;
3283
border-radius: $circular_radius;
3284
-gtk-outline-radius: $circular_radius;
3285
}
3286
// shortcut window keys
3288
.keycap {
3289
min-width: 28px - 8px * 2;
3290
min-height: 28px - 2px;
3291
margin-top: 2px;
3292
padding-bottom: 2px;
3293
padding-left: 8px;
3294
padding-right: 8px;
3295
border: solid 1px $borders_color;
3297
border-radius: 2px + 1px;
3298
box-shadow: inset 0 -2px $borders_color;
3299
background-color: $base_color;
3300
color: $fg_color;
3301
font-size: smaller;
3302
}
3303
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3305
transition: $longer_transition;
3306
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_color;
3307
caret-color: $accent_color;
3308
}
3309
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3311
stackswitcher button.circular,
3313
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3314
min-width: $medium_size;
3315
min-height: $medium_size;
3316
padding: 0;
3317
}
3318