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
}
187
}
188
.dim-label { opacity: $hint_opacity; }
190
assistant {
192
.sidebar {
193
padding: 4px 0;
194
// background-color: $base_color;
195
// border-top: 1px solid $borders_color;
196
}
197
// &.csd .sidebar { border-top-style: none; }
199
.sidebar label {
201
min-height: $medium_size;
202
padding: 0 12px;
203
color: $tertiary_fg_color;
204
font-weight: 500;
205
&.highlight { color: $fg_color; }
207
}
208
}
209
%osd, .osd { opacity: $higher_opacity; }
211
/*********************
214
* Spinner Animation *
215
*********************/
216
@keyframes spin {
217
to { -gtk-icon-transform: rotate(1turn); }
218
}
219
@keyframes spin_colors {
221
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
222
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
223
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
224
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
225
}
226
spinner {
228
background: none;
229
opacity: 0; // non spinning spinner makes no sense
230
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
231
&:checked {
233
opacity: 1;
234
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
235
&:disabled { opacity: $disabled_opacity; }
237
}
238
}
239
/****************
242
* Text Entries *
243
****************/
244
%entry,
245
entry {
246
%entry_basic, & {
247
min-height: $medium_size;
248
padding: 0 8px;
249
border-radius: 2px;
250
@include entry(normal);
252
&:focus { @include entry(focus); }
254
&:disabled { @include entry(disabled); }
256
&.flat {
258
border-radius: 0;
259
@include entry(flat-normal);
261
&:focus { @include entry(flat-focus); }
263
&:disabled { @include entry(flat-disabled); }
265
}
266
image { // icons inside the entry
268
// @extend %simple_flat_button;
269
min-height: $small_size;
271
min-width: $small_size;
272
-gtk-outline-radius: $circular_radius;
273
border-radius: $circular_radius;
274
color: gtkalpha(currentColor, $enabled_opacity);
275
&:hover, &:active { color: currentColor; }
277
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
279
&.left { margin-left: -2px; margin-right: 2px; }
281
&.right { margin-left: 2px; margin-right: -2px; }
283
}
284
undershoot {
286
&.left { @include undershoot(left); }
287
&.right { @include undershoot(right); }
289
}
290
selection { @extend %selected_items; }
292
// entry error and warning style
294
@each $e_type, $e_color in (error, $error_color),
295
(warning, $warning_color) {
296
&.#{$e_type} {
297
@include entry(normal, $e_color);
298
&:focus { @include entry(focus, $e_color); }
300
&:disabled { @include entry(disabled, $e_color); }
302
&.flat {
304
@include entry(flat-normal, $e_color);
305
&:focus { @include entry(flat-focus, $e_color); }
307
&:disabled { @include entry(flat-disabled, $e_color); }
309
}
310
}
311
}
312
&:drop(active) {
314
// box-shadow: inset 0 0 0 2px $accent_color;
315
}
316
.osd & {
318
}
319
}
320
progress {
322
margin: 2px (2px - 8px);
323
border-style: none none solid;
324
border-width: 2px;
325
border-color: $primary_color;
326
// border-radius: 0;
327
// box-shadow: none;
328
background-color: transparent;
329
// background-image: none;
330
}
331
// linked entries
333
.linked:not(.vertical) > & { @extend %linked; }
334
// Vertically linked entries
336
.linked.vertical > & { @extend %linked_vertical; }
337
.linked:not(.vertical) > &.flat,
339
.linked.vertical > &.flat { border-radius: 0; }
340
}
341
treeview entry {
343
&.flat, & {
344
min-height: 0;
345
padding: 2px;
346
border-radius: 0;
347
background-color: $base_color;
348
&, &:focus {
350
border-image: none;
351
box-shadow: none;
352
}
353
}
354
}
355
/***********
358
* Buttons *
359
***********/
360
// stuff for .needs-attention
361
@keyframes needs_attention {
362
from {
363
background-image: -gtk-gradient(radial,
364
center center, 0,
365
center center, 0.001,
366
to($accent_color),
367
to(transparent));
368
}
369
to {
371
background-image: -gtk-gradient(radial,
372
center center, 0,
373
center center, 0.5,
374
to($accent_color),
375
to(transparent));
376
}
377
}
378
%button,
380
button {
381
@at-root %button_basic, & {
382
min-height: 24px;
383
min-width: 16px;
384
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
385
border-radius: 2px;
386
font-weight: 500;
387
@include button(normal);
389
&:hover { @include button(hover); }
391
&:active { @include button(active); }
393
&:disabled { @include button(disabled); }
395
&:checked { @include button(checked); }
397
&:checked:disabled { @include button(checked-disabled); }
399
@at-root %flat_button, &.flat {
401
@at-root %simple_flat_button, & {
402
@include button(flat-normal);
403
&:hover { @include button(flat-hover); }
405
&:active { @include button(flat-active); }
407
&:disabled { @include button(flat-disabled); }
409
}
410
&:checked { @include button(flat-checked); }
412
&:checked:disabled { @include button(flat-checked-disabled); }
414
}
415
&.text-button {
417
padding-left: 16px;
418
padding-right: 16px;
419
}
420
&.image-button {
422
min-width: 24px;
423
padding: ($medium_size - 24px) / 2;
424
-gtk-outline-radius: $circular_radius;
425
border-radius: $circular_radius;
426
}
427
&.text-button.image-button {
429
-gtk-outline-radius: 2px;
430
border-radius: 2px;
431
label {
433
&:first-child {
434
margin-left: 16px - ($medium_size - 24px) / 2;
435
margin-right: 2px;
436
}
437
&:last-child {
439
margin-left: 2px;
440
margin-right: 16px - ($medium_size - 24px) / 2;
441
}
442
&:only-child {
444
margin-left: 16px - ($medium_size - 24px) / 2;
445
margin-right: 16px - ($medium_size - 24px) / 2;
446
}
447
}
448
image:not(:only-child) {
450
&:first-child { margin-left: (24px - 16px) / 2; }
451
&:last-child { margin-right: (24px - 16px) / 2; }
453
}
454
}
455
.linked > & { @extend %linked; }
457
.linked.vertical > & { @extend %linked_vertical; }
459
.linked > &.flat,
461
.linked.vertical > &.flat {
462
border-radius: 2px;
463
&.image-button {
465
-gtk-outline-radius: $circular_radius;
466
border-radius: $circular_radius;
467
}
468
&.text-button.image-button {
470
-gtk-outline-radius: 2px;
471
border-radius: 2px;
472
}
473
}
474
&:drop(active) {
476
// box-shadow: inset 0 0 0 2px $accent_color;
477
}
478
}
479
@at-root %button_selected, row:selected & {
481
&:disabled { color: $disabled_secondary_inversed_fg_color; }
482
}
483
// big standalone buttons like in Documents pager
485
&.osd {
486
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
487
&.image-button { padding: ($large_size - 24px) / 2; }
489
&:disabled { opacity: 0; }
491
}
492
//overlay / OSD style
494
@at-root %osd_button,
495
.osd & {
496
}
497
// Suggested and Destructive Action buttons
499
@each $b_type, $b_color in (suggested-action, $suggested_color),
500
(destructive-action, $destructive_color) {
501
&.#{$b_type} {
502
background-color: $b_color;
503
color: $inversed_fg_color;
504
// @include button(normal, $b_color, $inversed_fg_color);
506
// &:hover { @include button(hover, $b_color, $inversed_fg_color); }
508
// &:active, &:checked { @include button(active, $b_color, $inversed_fg_color); }
510
&:disabled { @include button(disabled, $b_color, $inversed_fg_color); }
512
&:checked { background-color: mix($inversed_fg_color, $b_color, percentage($lower_opacity)); }
514
&.flat {
516
background-color: transparent;
517
color: $b_color;
518
// @include button(flat-normal, $b_color, $inversed_fg_color);
520
// &:hover { @include button(flat-hover, $b_color, $inversed_fg_color); }
522
// &:active, &:checked { @include button(flat-active, $b_color, $inversed_fg_color); }
524
&:disabled { @include button(flat-disabled, $b_color, $inversed_fg_color); }
526
}
527
.osd & {
529
}
530
}
531
}
532
.stack-switcher > & {
534
// to position the needs attention dot, padding is added to the button
535
// child, a label needs just lateral padding while an icon needs vertical
536
// padding added too.
537
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
539
> label {
541
padding-left: 6px; // label padding
542
padding-right: 6px; //
543
}
544
> image {
546
padding-left: 6px; // image padding
547
padding-right: 6px; //
548
padding-top: 3px; //
549
padding-bottom: 3px; //
550
}
551
&.text-button {
553
// compensate text-button paddings
554
padding-left: 16px - 6px;
555
padding-right: 16px - 6px;
556
}
557
&.image-button {
559
// we want image buttons to have a 1:1 aspect ratio, so compensation
560
// of the padding added to the GtkImage is needed
561
padding-left: ($medium_size - 16px) / 2 - 6px;
562
padding-right: ($medium_size - 16px) / 2 - 6px;
563
}
564
&.needs-attention {
566
> label,
567
> image { @extend %needs_attention; }
568
&:checked {
570
> label,
571
> image {
572
animation: none;
573
background-image: none;
574
}
575
}
576
}
577
}
578
// hide separators
580
separator {
581
min-width: 0;
582
min-height: 0;
583
background: transparent;
584
}
585
// &.font,
587
// &.file { separator { background-color: transparent; }}
588
// &.font { > box > box > label { font-weight: bold; }}
590
// inline-toolbar buttons
592
.inline-toolbar & {
593
// @extend %button_basic.flat;
594
&:not(.text-button) { @extend %circular_button; }
596
}
597
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
599
}
600
%needs_attention {
602
animation: needs_attention $longer_duration $deceleration_curve forwards;
603
background-repeat: no-repeat;
604
background-position: right 3px;
605
background-size: 6px 6px;
606
&:dir(rtl) { background-position: left 3px; }
608
}
609
// all the following is for the +|- buttons on inline toolbars, that way
611
// should really be deprecated...
612
.inline-toolbar toolbutton > button { // redefining the button look is
613
// needed since those are flat...
614
}
615
// More inline toolbar buttons
617
toolbar.inline-toolbar toolbutton {
618
// > button.flat { @extend %linked_middle; }
619
// &:first-child > button.flat { @extend %linked:first-child; }
621
// &:last-child > button.flat { @extend %linked:last-child; }
623
// &:only-child > button.flat { @extend %linked:only-child; }
625
}
626
%linked_middle {
628
-gtk-outline-radius: 2px;
629
border-radius: 0;
630
}
631
%linked {
633
@extend %linked_middle;
634
&:first-child {
636
border-top-left-radius: 2px;
637
border-bottom-left-radius: 2px;
638
}
639
&:last-child {
641
border-top-right-radius: 2px;
642
border-bottom-right-radius: 2px;
643
}
644
&:only-child {
646
border-radius: 2px;
647
}
648
}
649
%linked_vertical_middle {
651
-gtk-outline-radius: 2px;
652
border-radius: 0;
653
}
654
%linked_vertical{
656
@extend %linked_vertical_middle;
657
&:first-child {
659
border-top-left-radius: 2px;
660
border-top-right-radius: 2px;
661
}
662
&:last-child {
664
border-bottom-left-radius: 2px;
665
border-bottom-right-radius: 2px;
666
}
667
&:only-child {
669
border-radius: 2px;
670
}
671
}
672
/* menu buttons */
674
modelbutton.flat,
675
.menuitem.button.flat {
676
min-height: $menuitem_size;
677
padding: 0 8px;
678
border-radius: 2px;
679
color: inherit;
680
@extend %simple_flat_button;
682
&:selected { @extend %selected_items; }
684
check,
686
radio {
687
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
688
&, &:hover { background-image: none; }
690
&:active { animation: none; }
692
&:last-child { margin-left: -8px; margin-right: -16px; }
694
&:first-child { margin-left: -16px; margin-right: -8px; }
696
}
697
check:not(:indeterminate):checked { @extend %check_checked; }
699
// radio:not(:indeterminate):checked { @extend %radio_checked; }
701
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
703
}
704
modelbutton.flat arrow {
706
background: none;
707
&:hover { background: none; }
709
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
711
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
713
}
714
button.color {
716
min-height: $small_size;
717
min-width: $small_size;
718
padding: $container_padding;
719
colorswatch:only-child {
721
// &, overlay { border-radius: 0; }
722
}
723
}
724
/*********
727
* Links *
728
*********/
729
*:link {
730
&, &:hover, &:active { color: $link_color; }
731
&:visited {
733
&, &:hover, &:active { color: $link_visited_color; }
734
}
735
@at-root %link_selected,
737
&:selected,
738
*:selected & { color: $inversed_fg_color; }
739
}
740
button:link,
742
button:visited {
743
@extend *:link;
744
> label { text-decoration-line: underline; }
746
}
747
/*****************
749
* GtkSpinButton *
750
*****************/
751
spinbutton {
752
&:not(.vertical) {
753
// in this horizontal configuration, the whole spinbutton
754
// behaves as the entry, so we extend the entry styling
755
// and nuke the style on the internal entry
756
@extend %entry;
757
padding: 0;
759
%spinbutton_entry,
761
entry {
762
min-width: $large_size - 8px * 2;
763
// reset all the other props since the spinbutton node is styled here
764
margin: 0;
765
border-image: none;
766
border-radius: 0;
767
box-shadow: none;
768
background-color: transparent;
769
}
770
button {
772
// margin: $container_padding;
773
border: solid $container_padding transparent;
774
@extend %simple_flat_button;
776
@extend %small_button;
778
&.up:dir(ltr),
780
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
781
&.up:dir(rtl),
783
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
784
}
785
}
786
// OSD horizontal
788
.osd &:not(.vertical) {
789
button {
790
}
791
}
792
// Vertical
794
&.vertical {
795
// in the vertical configuration, we treat the spinbutton
796
// as a box, and tweak the style of the entry in the middle
797
// so that it's linked
798
// FIXME: this should not be set at all, but otherwise it gets the wrong
800
// color
801
&:disabled { color: $disabled_fg_color; }
802
&:drop(active) {
804
box-shadow: none;
805
}
806
entry {
808
min-height: $medium_size;
809
min-width: $large_size;
810
padding: 0;
811
}
812
button {
814
min-height: $medium_size;
815
min-width: $large_size;
816
padding: 0;
817
@extend %simple_flat_button;
819
&.up { border-radius: 2px 2px 0 0; }
821
&.down { border-radius: 0 0 2px 2px; }
823
}
824
}
825
// OSD vertical
827
.osd &.vertical button:first-child {
828
}
829
// Misc
831
treeview &:not(.vertical) {
832
min-height: 0;
833
border-style: none;
834
border-radius: 0;
835
entry {
837
min-height: 0;
838
padding: 1px 2px;
839
}
840
}
841
}
842
/**************
845
* ComboBoxes *
846
**************/
847
combobox {
848
arrow {
849
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
850
min-height: 16px;
851
min-width: 16px;
852
}
853
button.combo:checked { transition: none; } // workaround for menuitem selection
855
menu,
857
.menu,
858
.context-menu {
859
padding: 2px 0;
860
menuitem {
862
min-height: $medium_size - 2px * 2;
863
padding: 0 ($medium_size - 16px) / 2;
864
}
865
}
866
&.linked {
868
button:nth-child(2) {
869
&:dir(ltr) { @extend %linked:last-child; }
870
&:dir(rtl) { @extend %linked:first-child; }
871
}
872
}
873
&:drop(active) { // FIXME: untested
875
box-shadow: none;
876
// button.combo { @extend %button_basic:drop(active); }
878
}
879
}
880
.linked > combobox > box > button.combo {
882
// the combo is a composite widget so the way we do button linking doesn't
883
// work, special case needed. See
884
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
885
&:dir(ltr),
887
&:dir(rtl) { @extend %linked_middle; } // specificity bump
888
}
889
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
891
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
892
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
893
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
895
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
896
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
897
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
898
/************
901
* Toolbars *
902
************/
903
toolbar {
904
-GtkWidget-window-dragging: true;
905
padding: $container_padding / 2;
906
background-color: $bg_color;
907
button { @extend %button_basic.flat; }
909
// on OSD
911
.osd & { background-color: transparent; }
912
// stand-alone OSD toolbars
914
&.osd {
915
transition: $shadow_transition;
916
padding: $container_padding;
917
border-radius: 2px;
918
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
919
background-color: $base_color;
920
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
922
&.left,
924
&.right,
925
&.top,
926
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
927
}
928
// toolbar separators
930
&.horizontal separator { margin: $container_padding / 2; }
931
&.vertical separator { margin: $container_padding / 2; }
932
&:not(.inline-toolbar):not(.osd) {
934
scale,
935
entry,
936
spinbutton,
937
button { margin: $container_padding / 2; }
938
.linked entry,
940
.linked spinbutton,
941
.linked button {
942
&:not(:first-child) { margin-left: 0; }
943
&:not(:last-child) { margin-right: 0; }
944
}
945
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
947
}
948
}
949
//searchbar, location-bar & inline-toolbar
951
.inline-toolbar {
952
padding: $container_padding;
953
border-style: solid;
954
border-width: 0 1px 1px;
955
border-color: $borders_color;
956
background-color: $alt_base_color;
957
}
958
searchbar,
960
.location-bar {
961
padding: $container_padding;
962
border-style: solid;
963
border-width: 0 0 1px;
964
border-color: $borders_color;
965
background-color: $bg_color;
966
background-clip: border-box;
967
}
968
/***************
971
* Header bars *
972
***************/
973
%titlebar,
974
headerbar {
975
transition: background-color $shorter_duration $deceleration_curve;
976
min-height: $large_size;
977
padding: 0 $container_padding;
978
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
979
background-color: $headerbar_color;
980
color: $inversed_fg_color;
981
&:backdrop {
983
color: $secondary_inversed_fg_color;
984
}
985
.title {
987
transition: $longer_transition;
988
padding: 0 12px;
989
font-weight: bold;
990
}
991
.subtitle {
993
transition: $longer_transition;
994
padding: 0 12px;
995
font-size: smaller;
996
@extend .dim-label;
998
}
999
button:not(.suggested-action):not(.destructive-action) {
1001
@extend %button_basic.flat;
1002
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1004
currentColor 0%,
1005
transparent 0%)
1006
0 0 0 / 0 0 0px;
1007
&:checked {
1009
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1010
currentColor 100%,
1011
transparent 0%)
1012
0 0 2 / 0 0 2px;
1013
&, &:disabled { background-color: transparent; }
1015
}
1016
}
1017
button.suggested-action, button.destructive-action {
1019
&:disabled {
1020
color: gtkalpha(currentColor, $disabled_opacity);
1021
> label { color: inherit; }
1023
}
1024
}
1025
&.selection-mode {
1027
transition: background-color 0 $longer_duration;
1028
animation: header_ripple_effect $longer_duration $deceleration_curve;
1029
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1030
background-color: $primary_color;
1031
color: $inversed_fg_color;
1032
&:backdrop {
1034
color: $secondary_inversed_fg_color;
1035
}
1036
.subtitle:link { @extend *:link:selected; }
1038
button:not(.suggested-action):not(.destructive-action) {
1040
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1041
currentColor 0%,
1042
transparent 0%)
1043
0 0 0 / 0 0 0px;
1044
color: currentColor;
1045
&:disabled {
1047
color: gtkalpha(currentColor, $disabled_opacity);
1048
> label { color: inherit; }
1050
}
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 {
1060
color: gtkalpha(currentColor, $disabled_opacity);
1061
> label { color: inherit; }
1063
}
1064
}
1065
}
1066
.selection-menu {
1068
padding-left: 16px;
1069
padding-right: 16px;
1070
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1072
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1074
}
1075
}
1076
.fullscreen &,
1078
.tiled &,
1079
.maximized & {
1080
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1081
box-shadow: $z-depth-1;
1082
}
1083
&.default-decoration {
1085
min-height: $small_size;
1086
padding: $container_padding;
1087
border-width: 0;
1088
button.titlebutton {
1090
min-height: $small_size;
1091
min-width: $small_size;
1092
margin: 0;
1093
padding: 0;
1094
&:active { // add fallback
1096
background-image: radial-gradient(circle farthest-corner at center,
1097
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1098
transparent 0%),
1099
image(gtkalpha(currentColor, $lower_opacity / 2));
1100
}
1101
}
1102
}
1103
.solid-csd & {
1105
&:dir(rtl), &:dir(ltr) { // specificity bump
1106
margin-left: -2px;
1107
margin-right: -2px;
1108
margin-top: -2px;
1109
// border-radius: 0;
1110
box-shadow: inset 0 1px $secondary_highlight_color;
1111
}
1112
}
1113
}
1114
headerbar {
1116
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1117
entry,
1118
spinbutton,
1119
// separator,
1120
button {
1121
margin-top: $container_padding;
1122
margin-bottom: $container_padding;
1123
}
1124
switch {
1126
margin-top: $container_padding * 2;
1127
margin-bottom: $container_padding * 2;
1128
}
1129
}
1130
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1132
border-top-left-radius: 2px;
1133
border-top-right-radius: 2px;
1134
}
1135
headerbar {
1137
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1138
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1139
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1141
}
1142
.titlebar:not(headerbar) {
1144
window.csd > & {
1145
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1146
padding: 0;
1147
background-color: transparent;
1148
background-image: none;
1149
border-style: none;
1150
box-shadow: none;
1151
}
1152
> separator {
1154
background-color: $headerbar_color;
1155
background-image: image($borders_color);
1156
}
1157
@extend %titlebar;
1159
}
1160
/************
1163
* Pathbars *
1164
************/
1165
%pathbar_button,
1166
.path-bar button {
1167
&.text-button, &.image-button, & {
1168
padding-left: 6px;
1169
padding-right: 6px;
1170
}
1171
&.text-button.image-button, & {
1173
// label:last-child { padding-left: 2px; padding-right: 8px; }
1174
// label:first-child { padding-left: 8px; padding-right: 2px; }
1175
}
1176
image {
1178
padding-left: ($medium_size - 16px) / 2 - 6px;
1179
padding-right: ($medium_size - 16px) / 2 - 6px;
1180
}
1181
&.slider-button {
1183
padding-left: 0;
1184
padding-right: 0;
1185
}
1186
:not(headerbar) & {
1188
@extend %flat_button;
1189
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1191
$primary_color 0%,
1192
transparent 0%)
1193
0 0 0 / 0 0 0px;
1194
border-radius: 2px;
1195
&:checked {
1197
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1198
$primary_color 100%,
1199
transparent 0%)
1200
0 0 2 / 0 0 2px;
1201
&, &:disabled { background-color: transparent; }
1203
}
1204
}
1205
}
1206
/**************
1209
* Tree Views *
1210
**************/
1211
treeview.view {
1212
@at-root * {
1213
-GtkTreeView-horizontal-separator: 4;
1214
-GtkTreeView-grid-line-width: 1;
1215
-GtkTreeView-grid-line-pattern: '';
1216
-GtkTreeView-tree-line-width: 1;
1217
-GtkTreeView-tree-line-pattern: '';
1218
-GtkTreeView-expander-size: 16;
1219
}
1220
border-left-color: $track_color; // this is actually the tree lines color,
1222
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1223
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1225
&:hover, &:active, &:selected { border-radius: 0; }
1227
&.separator {
1229
min-height: 1px + 2px * 2;
1230
color: $borders_color;
1231
}
1232
&:drop(active) {
1234
border-style: solid none;
1235
border-width: 1px;
1236
border-color: $accent_color;
1237
&.after { border-top-style: none; }
1239
&.before { border-bottom-style: none; }
1241
}
1242
&.expander {
1244
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1245
-gtk-icon-transform: rotate(-90deg);
1246
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1248
&:checked { -gtk-icon-transform: unset; }
1250
color: $secondary_fg_color;
1252
&:hover, &:active { color: $fg_color; }
1254
&:disabled { color: $disabled_secondary_fg_color; }
1256
&:selected {
1258
color: $secondary_inversed_fg_color;
1259
&:hover, &:active { color: $inversed_fg_color; }
1261
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1263
}
1264
}
1265
&.progressbar { // progress bar in treeviews
1267
border-style: none none solid;
1268
border-width: $bar_size;
1269
border-color: $primary_color;
1270
box-shadow: none;
1271
background-color: transparent;
1272
&:selected { border-color: currentColor; }
1274
}
1275
&.trough { // progress bar trough in treeviews
1277
border-style: none none solid;
1278
border-width: $bar_size;
1279
border-color: scale-alpha($primary_color, $lower_opacity);
1280
box-shadow: none;
1281
background-color: transparent;
1282
&:selected { border-color: $track_color; }
1284
}
1285
header {
1287
button {
1288
@extend row.activatable;
1289
padding: 2px 6px;
1291
border-style: none solid solid none;
1292
border-width: 1px;
1293
border-color: $borders_color;
1294
border-radius: 0;
1295
background-clip: border-box;
1296
&, &:hover, &:active { box-shadow: none; }
1298
&, &:disabled { background-color: $base_color; }
1300
&:last-child { border-right-style: none; }
1302
}
1303
}
1304
button.dnd,
1306
header.button.dnd { // for treeview-like derive widgets
1307
padding: 2px 6px;
1308
border-style: none solid solid;
1309
border-width: 1px;
1310
border-color: $borders_color;
1311
border-radius: 0;
1312
box-shadow: none;
1313
background-color: $base_color;
1314
background-clip: border-box;
1315
color: $primary_color;
1316
}
1317
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1319
}
1320
/*********
1323
* Menus *
1324
*********/
1325
menubar,
1326
.menubar {
1327
-GtkWidget-window-dragging: true;
1328
padding: 0;
1329
// box-shadow: inset 0 -1px $borders_color;
1330
background-color: $headerbar_color;
1331
> menuitem {
1333
transition: $shorter_transition;
1334
min-height: 20px;
1335
padding: 4px 8px;
1336
color: $secondary_inversed_fg_color;
1337
&:hover { //Seems like it :hover even with keyboard focus
1339
transition: none;
1340
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1341
color: $inversed_fg_color;
1342
}
1343
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1345
}
1346
}
1347
menu,
1349
.menu,
1350
.context-menu {
1351
margin: 4px 0;
1352
padding: 4px 0;
1353
box-shadow: inset 0 1px $highlight_color;
1354
background-color: $base_color;
1355
border: 1px solid $borders_color; // adds borders in a non composited env
1356
.csd & {
1358
border: none; // axes borders in a composited env
1359
border-radius: 2px;
1360
}
1361
menuitem {
1363
transition: $shorter_transition;
1364
min-height: 20px;
1365
min-width: 40px;
1366
padding: 4px 8px;
1367
font: initial;
1368
text-shadow: none;
1369
&:hover {
1371
transition: none;
1372
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1373
}
1374
&:disabled { color: $disabled_fg_color; }
1376
// submenu indicators
1378
arrow {
1379
min-height: 16px;
1380
min-width: 16px;
1381
&:dir(ltr) {
1383
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1384
margin-left: 8px;
1385
}
1386
&:dir(rtl) {
1388
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1389
margin-right: 8px;
1390
}
1391
}
1392
// avoids labels color being overridden, see
1394
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1395
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1396
}
1397
// overflow arrows
1399
> arrow {
1400
min-height: 16px;
1401
min-width: 16px;
1402
padding: 4px;
1403
border-radius: 0;
1404
background-color: $base_color;
1405
color: $secondary_fg_color;
1406
&.top {
1408
margin-top: -4px;
1409
border-bottom: 1px solid $borders_color;
1410
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1411
}
1412
&.bottom {
1414
margin-bottom: -4px;
1415
border-top: 1px solid $borders_color;
1416
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1417
}
1418
&:hover {
1420
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1421
color: $fg_color;
1422
}
1423
&:disabled {
1425
border-color: transparent;
1426
background-color: transparent;
1427
color: transparent;
1428
// color: $disabled_secondary_fg_color;
1429
}
1430
}
1431
separator { margin: 4px 0; }
1433
}
1434
menuitem {
1436
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1437
check,
1439
radio {
1440
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1441
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1442
}
1443
}
1444
.csd.popup { border-radius: 2px; }
1446
/***************
1449
* Popovers *
1450
***************/
1451
popover.background {
1452
transition: $shadow_transition;
1453
padding: 0;
1454
box-shadow: $z-depth-2; // TODO: this should really have a highlight
1455
background-color: $lighter_bg_color;
1456
&:backdrop { box-shadow: $z-depth-1; }
1458
&, .csd & {
1460
border-style: solid;
1461
border-width: 1px;
1462
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1463
border-radius: 2px + 1px;
1464
}
1465
> list,
1467
> .view,
1468
> toolbar {
1469
border-style: none;
1470
box-shadow: none;
1471
background-color: transparent;
1472
}
1473
&, .csd & {
1475
&.touch-selection,
1476
&.magnifier,
1477
&.osd { @extend %osd; }
1478
}
1479
// entry { @extend %entry.flat; }
1481
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1483
button.model {
1485
@extend %simple_flat_button;
1486
min-height: 32px;
1488
padding: 0 8px;
1489
border-radius: 2px;
1490
&:checked {
1492
background-color: $primary_color;
1493
color: $inversed_fg_color;
1494
}
1495
}
1496
separator { margin: 4px 0; }
1498
list separator { margin: 0; }
1500
}
1501
/*************
1503
* Notebooks *
1504
*************/
1505
notebook {
1506
> header {
1507
border-width: 1px;
1508
border-color: $borders_color;
1509
background-color: $bg_color;
1510
background-clip: border-box;
1511
&.top {
1513
border-bottom-style: solid;
1514
> tabs {
1515
margin-bottom: -1px;
1516
> tab {
1517
&:hover { box-shadow: inset 0 -2px $track_color; }
1519
&:checked { box-shadow: inset 0 -2px $primary_color; }
1521
}
1522
}
1523
}
1524
&.bottom {
1526
border-top-style: solid;
1527
> tabs {
1528
margin-top: -1px;
1529
> tab {
1530
&:hover { box-shadow: inset 0 2px $track_color; }
1532
&:checked { box-shadow: inset 0 2px $primary_color; }
1534
}
1535
}
1536
}
1537
&.left {
1539
border-right-style: solid;
1540
> tabs {
1541
margin-right: -1px;
1542
> tab {
1543
&:hover { box-shadow: inset -2px 0 $track_color; }
1545
&:checked { box-shadow: inset -2px 0 $primary_color; }
1547
}
1548
}
1549
}
1550
&.right {
1552
border-left-style: solid;
1553
> tabs {
1554
margin-left: -1px;
1555
> tab {
1556
&:hover { box-shadow: inset 2px 0 $track_color; }
1558
&:checked { box-shadow: inset 2px 0 $primary_color; }
1560
}
1561
}
1562
}
1563
&.top > tabs > arrow {
1565
@extend %notebook_vert_arrows;
1566
border-top-style: none;
1568
}
1569
&.bottom > tabs > arrow {
1571
@extend %notebook_vert_arrows;
1572
border-bottom-style: none;
1574
}
1575
@at-root %notebook_vert_arrows {
1577
padding-left: 4px;
1578
padding-right: 4px;
1579
&.down {
1581
margin-left: -8px;
1582
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1583
}
1584
&.up {
1586
margin-right: -8px;
1587
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1588
}
1589
}
1590
&.left > tabs > arrow {
1592
@extend %notebook_horz_arrows;
1593
border-left-style: none;
1595
}
1596
&.right > tabs > arrow {
1598
@extend %notebook_horz_arrows;
1599
border-right-style: none;
1601
}
1602
@at-root %notebook_horz_arrows {
1604
padding-top: 4px;
1605
padding-bottom: 4px;
1606
&.down {
1608
margin-top: -8px;
1609
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1610
}
1611
&.up {
1613
margin-bottom: -8px;
1614
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1615
}
1616
}
1617
> tabs > arrow {
1619
@extend %simple_flat_button;
1620
min-height: 16px;
1622
min-width: 16px;
1623
border-radius: 0;
1624
}
1625
tab {
1627
transition: $longer_transition;
1628
min-height: $small_size;
1629
min-width: $small_size;
1630
padding: $container_padding 12px;
1631
outline-offset: -6px;
1633
border-width: 1px; // for reorderable tabs
1635
border-color: transparent; //
1636
color: $secondary_fg_color;
1638
font-weight: 500;
1639
&:hover {
1641
color: $fg_color;
1642
&.reorderable-page {
1644
border-color: $borders_color;
1645
background-color: $alt_base_color;
1646
}
1647
}
1648
&:disabled { color: $disabled_secondary_fg_color; }
1650
&:checked {
1652
animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
1653
color: $fg_color;
1654
&:disabled { color: $disabled_fg_color; }
1656
&.reorderable-page {
1658
border-color: $borders_color;
1659
background-color: $base_color;
1660
}
1661
}
1662
// colors the button like the label, overridden otherwise
1664
button.flat {
1665
@extend %small_button;
1666
&:last-child {
1668
margin-left: $container_padding;
1669
margin-right: $container_padding - 12px;
1670
}
1671
&:first-child {
1673
margin-left: $container_padding - 12px;
1674
margin-right: $container_padding;
1675
}
1676
}
1677
}
1678
&.top,
1680
&.bottom {
1681
tabs {
1682
padding-left: 8px;
1683
padding-right: 8px;
1684
&:not(:only-child) {
1686
&:first-child { margin-left: 0; }
1687
&:last-child { margin-right: 0; }
1688
}
1689
tab {
1691
&.reorderable-page {
1692
margin: 0 -1px;
1693
border-style: none solid;
1694
}
1695
}
1696
}
1697
}
1698
&.left,
1700
&.right {
1701
tabs {
1702
padding-top: 8px;
1703
padding-bottom: 8px;
1704
&:not(:only-child) {
1706
&:first-child { margin-top: 0; }
1707
&:last-child { margin-bottom: 0; }
1708
}
1709
tab {
1711
&.reorderable-page {
1712
margin: -1px 0;
1713
border-style: solid none;
1714
}
1715
}
1716
}
1717
}
1718
}
1719
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1721
background-color: $base_color;
1722
entry,
1724
spinbutton:not(.vertical) { @extend %entry.flat; }
1725
revealer entry,
1727
revealer spinbutton:not(.vertical) { @extend %entry; }
1728
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1730
}
1731
}
1732
/**************
1735
* Scrollbars *
1736
**************/
1737
scrollbar {
1738
$_slider_min_length: 24px;
1739
// disable steppers
1741
@at-root * {
1742
-GtkScrollbar-has-backward-stepper: false;
1743
-GtkScrollbar-has-forward-stepper: false;
1744
}
1745
transition: $longer_transition;
1747
background-color: $base_color;
1748
background-clip: $extra_background_clip;
1749
// scrollbar border
1751
&.top { border-bottom: 1px solid $borders_color; }
1752
&.bottom { border-top: 1px solid $borders_color; }
1753
&.left { border-right: 1px solid $borders_color; }
1754
&.right { border-left: 1px solid $borders_color; }
1755
// slider
1757
slider {
1758
transition: $shorter_transition, margin 0, border-width 0;
1759
min-width: 8px;
1760
min-height: 8px;
1761
border: 4px solid transparent;
1762
border-radius: $circular_radius;
1763
background-clip: padding-box;
1764
background-color: $tertiary_fg_color;
1765
&:hover { background-color: $secondary_fg_color; }
1767
&:active { background-color: $fg_color; }
1769
&:disabled { background-color: $disabled_tertiary_fg_color; }
1771
}
1772
&.fine-tune {
1774
slider {
1775
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1776
min-width: 4px;
1777
min-height: 4px;
1778
}
1779
&.horizontal slider { margin: 2px 0; }
1781
&.vertical slider { margin: 0 2px; }
1783
}
1784
&.overlay-indicator {
1786
&:not(.dragging):not(.hovering) {
1787
border-color: transparent;
1788
background-color: transparent;
1789
slider {
1791
min-width: 4px;
1792
min-height: 4px;
1793
margin: 4px - 1px;
1794
border: 1px solid scale-alpha($base_color, $lower_opacity);
1795
}
1796
button {
1798
min-width: 4px;
1799
min-height: 4px;
1800
margin: 4px - 1px;
1801
border: 1px solid scale-alpha($base_color, $lower_opacity);
1802
border-radius: $circular_radius;
1803
background-color: $tertiary_fg_color;
1804
background-clip: padding-box;
1805
-gtk-icon-source: none;
1806
&:disabled { background-color: $disabled_tertiary_fg_color; }
1808
}
1809
&.horizontal {
1811
slider { min-width: $_slider_min_length; }
1812
button { min-width: 8px; }
1814
}
1815
&.vertical {
1817
slider { min-height: $_slider_min_length; }
1818
button { min-height: 8px; }
1820
}
1821
}
1822
&.dragging,
1824
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1825
}
1826
&.horizontal slider { min-width: $_slider_min_length; }
1828
&.vertical slider { min-height: $_slider_min_length; }
1830
// button styling
1832
button {
1833
@extend %simple_flat_button;
1834
min-width: 16px;
1836
min-height: 16px;
1837
padding: 0;
1838
border-radius: 0;
1839
}
1840
// button icons
1842
&.vertical {
1843
button {
1844
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1845
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1847
}
1848
}
1849
&.horizontal {
1851
button {
1852
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1853
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1855
}
1856
}
1857
}
1858
/**********
1861
* Switch *
1862
**********/
1863
switch {
1864
transition: $longer_transition;
1865
margin: $container_padding 0;
1866
border: 4px solid transparent;
1867
border-radius: $circular_radius;
1868
background-color: $track_color;
1869
background-clip: padding-box;
1870
font-size: 0;
1871
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1873
&:checked {
1875
background-color: scale-alpha($accent_color, 0.5);
1876
&:disabled {
1878
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1879
color: $disabled_fg_color;
1880
}
1881
}
1882
slider {
1884
@include entry(normal);
1885
transition: $longer_transition, $shadow_transition, margin 0;
1887
min-width: $small_size;
1888
min-height: $small_size;
1889
margin: -4px 0 -4px -4px;
1890
-gtk-outline-radius: $circular_radius;
1891
border-radius: $circular_radius;
1892
}
1893
&:hover slider { @include entry(focus); }
1895
&:checked slider {
1897
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0 $longer_duration;
1898
animation: needs_attention $longer_duration $deceleration_curve;
1899
margin: -4px -4px -4px 0;
1900
background-color: $accent_color;
1901
color: $inversed_fg_color;
1902
}
1903
&:disabled slider { @include entry(disabled); }
1905
&:checked:disabled slider { animation: none; }
1907
row:selected & {
1909
}
1910
}
1911
/*************************
1914
* Check and Radio items *
1915
*************************/
1916
// draw regular check and radio items using our PNG assets
1917
// all assets are rendered from assets.svg. never add pngs directly
1918
//selection-mode
1920
@each $s,$as in ('','-selectionmode'),
1921
(':hover', '-hover-selectionmode'),
1922
(':checked', '-checked-selectionmode'),
1923
(':checked:hover', '-checked-hover-selectionmode') {
1924
.view.content-view.check#{$s}:not(list) {
1925
-gtk-icon-shadow: $z-depth-1;
1926
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1927
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1928
margin: 8px;
1929
background-color: transparent;
1930
}
1931
}
1932
checkbutton.text-button,
1934
radiobutton.text-button {
1935
// this is for a nice focus on check and radios text
1936
padding: 2px;
1937
outline-offset: 0;
1938
label:not(:only-child) { margin: 0 4px; }
1940
}
1941
check,
1943
radio {
1944
min-height: 24px;
1945
min-width: 24px;
1946
margin: -($large_size - 24px) / 2;
1947
padding: ($large_size - 24px) / 2;
1948
@extend %simple_flat_button;
1950
@extend %circular_button;
1952
&:checked, &:indeterminate { color: $accent_color; }
1954
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1956
// &:only-child { margin: -12px; }
1958
row &:not(:checked):not(:indeterminate) {
1960
color: gtkalpha(currentColor, $enabled_opacity);
1961
&:hover, &:active { color: currentColor; }
1963
&:disabled { color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity); }
1965
}
1966
menu menuitem & {
1968
transition: none;
1969
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1970
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1972
&, &:hover, &:disabled {
1974
background-image: none;
1975
// color: inherit;
1976
// animation: none;
1977
}
1978
}
1979
}
1980
%check,
1982
check {
1983
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1984
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1985
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1987
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1988
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1990
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1991
}
1992
$radio_indicator: 10 / ($large_size / 1px) / 2;
1994
$radio_radius_slice: #{$large_size / 2 / 1px};
1995
$radio_radius_width: #{$large_size / 2};
1996
%radio,
1998
radio {
1999
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
2000
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
2001
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2003
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
2004
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2006
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2007
border-image: -gtk-gradient(radial,
2009
center center, 0,
2010
center center, 0.001,
2011
to($accent_color),
2012
to(transparent))
2013
$radio_radius_slice / $radio_radius_width;
2014
&:checked {
2016
border-image: -gtk-gradient(radial,
2017
center center, 0,
2018
center center, $radio_indicator,
2019
to($accent_color),
2020
to(transparent))
2021
$radio_radius_slice / $radio_radius_width;
2022
}
2023
&:checked:disabled {
2025
border-image: -gtk-gradient(radial,
2026
center center, 0,
2027
center center, $radio_indicator,
2028
to(scale-alpha($accent_color, $disabled_opacity)),
2029
to(transparent))
2030
$radio_radius_slice / $radio_radius_width;
2031
}
2032
&:indeterminate:checked {
2034
border-image: -gtk-gradient(radial,
2035
center center, 0,
2036
center center, 0.001,
2037
to($accent_color),
2038
to(transparent))
2039
$radio_radius_slice / $radio_radius_width;
2040
}
2041
}
2042
// let's animate things
2044
@keyframes check_check {
2045
from { -gtk-icon-transform: rotate(90deg); }
2046
to { -gtk-icon-transform: unset; }
2047
}
2048
@keyframes check_radio { // FIXME: cannot animate border-image
2050
from {
2051
border-image: -gtk-gradient(radial,
2052
center center, 0,
2053
center center, 0.001,
2054
to($accent_color),
2055
to(transparent))
2056
$radio_radius_slice / $radio_radius_width;
2057
}
2058
to {
2060
border-image: -gtk-gradient(radial,
2061
center center, 0,
2062
center center, $radio_indicator,
2063
to($accent_color),
2064
to(transparent))
2065
$radio_radius_slice / $radio_radius_width;
2066
}
2067
}
2068
@keyframes check_indeterminate {
2070
from { -gtk-icon-transform: unset; }
2071
50% { -gtk-icon-transform: scale(0, 1); }
2072
to { -gtk-icon-transform: unset; }
2073
}
2074
%check_checked,
2076
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2077
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2079
// %radio_checked,
2081
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2082
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2084
%indeterminate_checked,
2086
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2087
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, flat_ripple_effect $longer_duration $deceleration_curve forwards; }
2089
// no animations in menus
2091
menu menuitem {
2092
check:not(:indeterminate):checked,
2093
radio:not(:indeterminate):checked,
2094
check:indeterminate:checked,
2095
radio:indeterminate:checked { animation: none; }
2096
}
2097
treeview.view check,
2099
treeview.view radio {
2100
padding: 0;
2101
&:hover {
2103
box-shadow: inset 0 0 0 10000px gtkalpha($fg_color, 0.05);
2104
background-image: none;
2105
&:disabled { box-shadow: none; }
2107
&:selected { box-shadow: inset 0 0 0 10000px gtkalpha($inversed_fg_color, 0.05); }
2109
}
2110
& {
2112
color: $secondary_fg_color;
2113
&:hover, &:active { color: $fg_color; }
2115
&:disabled { color: $disabled_secondary_fg_color; }
2117
&:checked, &:indeterminate { color: $accent_color; }
2119
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2121
}
2122
&:selected {
2124
color: $secondary_inversed_fg_color;
2125
&:hover, &:active { color: $inversed_fg_color; }
2127
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2129
&:checked, &:indeterminate { color: $accent_color; }
2131
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2133
}
2134
}
2135
treeview.view radio:checked {
2137
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2138
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2139
border-image: none;
2140
}
2141
/************
2144
* GtkScale *
2145
************/
2146
scale {
2147
// sizing
2148
$_marks_lenght: 8px;
2149
$_marks_distance: 8px;
2150
$slider_size: 24px;
2152
$marks_slider_size: 30px;
2153
$slider_margin: -($slider_size - $bar_size) / 2;
2155
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2156
$color_slider_margin: -($slider_size) / 2;
2158
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2159
min-height: $medium_size - $slider_size;
2161
min-width: $medium_size - $slider_size;
2162
padding: ($slider_size / 2);
2163
* { transition: $longer_transition; }
2165
// the slider is inside the trough, so to have make it bigger there's a negative margin
2167
slider {
2168
min-height: $slider_size;
2169
min-width: $slider_size;
2170
margin: $slider_margin;
2171
}
2172
// the backing bit
2174
trough {
2175
outline-offset: 2px;
2176
background-color: $track_color;
2177
&:disabled { color: $disabled_fg_color; }
2179
}
2180
// the colored part of the backing bit
2182
highlight {
2183
background-color: $accent_color;
2184
&:disabled { background-color: transparent; }
2186
}
2187
// this is another differently styled part of the backing bit, the most relevant use case is for example
2189
// in media player to indicate how much video stream as been cached
2190
fill {
2191
background-color: $track_color;
2192
&:disabled { background-color: transparent; }
2194
}
2195
slider {
2197
transition: all $shorter_duration $standard_curve;
2198
// border-radius: 100%;
2199
// background-color: $accent_color;
2200
background-repeat: no-repeat;
2201
background-position: center;
2202
@each $s,$as in ('',''),
2204
(':disabled','-insensitive') {
2205
&#{$s} {
2206
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2207
background-image: -gtk-scaled(url('#{$_url}.png'),
2208
url('#{$_url}@2.png'));
2209
}
2210
}
2211
background-size: calc(100% - 8px);
2213
&:hover { background-size: calc(100% - 4px); }
2215
&:active { background-size: calc(100% - 0px); }
2217
}
2218
// click-and-hold the slider to activate
2220
&.fine-tune {
2221
// to make the slider shrink in fine-tune mode
2222
slider { background-size: calc(100% - 12px); }
2223
}
2224
value { color: gtkalpha(currentColor, $hint_opacity); }
2226
marks {
2228
color: $track_color;
2229
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2231
(bottom, bottom, top),
2232
(top, left, right),
2233
(bottom, right, left) {
2234
&.#{$marks_class} {
2235
margin-#{$marks_margin}: $_marks_distance;
2236
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2237
}
2238
}
2239
}
2240
&.horizontal {
2242
indicator {
2243
min-height: $_marks_lenght;
2244
min-width: 1px;
2245
}
2246
}
2247
&.vertical {
2249
indicator {
2250
min-height: 1px;
2251
min-width: $_marks_lenght;
2252
}
2253
}
2254
// *WARNING* scale with marks madness following
2256
$suffix: if($variant == 'light', '', '-dark');
2257
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2259
('vertical', 'vert') {
2260
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2261
('scale-has-marks-below', ':first-child:not(:only-child)') {
2262
@each $state, $state_infix in ('', ''),
2263
(':disabled', '-insensitive') {
2264
&.#{$dir_class} {
2265
%#{$marks_infix}-#{$dir_infix},
2266
contents#{$nth_child} > trough > slider {
2267
&#{$state} {
2268
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2269
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2271
}
2272
@if $dir_class == 'horizontal' {
2274
min-height: $marks_slider_size;
2275
min-width: $slider_size;
2276
@if $marks_infix == 'scale-has-marks-above' {
2278
margin-top: $marks_slider_margin;
2279
background-position: center calc(100% - 4px);
2281
&:hover { background-position: center calc(100% - 2px); }
2283
&:active { background-position: center calc(100% - 0px); }
2285
}
2286
@if $marks_infix == 'scale-has-marks-below' {
2288
margin-bottom: $marks_slider_margin;
2289
background-position: center calc(4px);
2291
&:hover { background-position: center calc(2px); }
2293
&:active { background-position: center calc(0px); }
2295
}
2296
}
2297
@if $dir_class == 'vertical' {
2299
min-height: $slider_size;
2300
min-width: $marks_slider_size;
2301
@if $marks_infix == 'scale-has-marks-above' {
2303
margin-left: $marks_slider_margin;
2304
background-position: calc(4px) center;
2306
&:hover { background-position: calc(2px) center; }
2308
&:active { background-position: calc(0px) center; }
2310
}
2311
@if $marks_infix == 'scale-has-marks-below' {
2313
margin-right: $marks_slider_margin;
2314
background-position: calc(100% - 4px) center;
2316
&:hover { background-position: calc(100% - 2px) center; }
2318
&:active { background-position: calc(100% - 0px) center; }
2320
}
2321
}
2322
}
2323
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2325
&.fine-tune contents#{$nth_child} > trough > slider {
2326
// bigger negative margins to make the trough grow here as well
2327
@if $dir_class == 'horizontal' {
2329
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2330
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2332
}
2333
@if $dir_class == 'vertical' {
2335
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2336
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2338
}
2339
}
2340
}
2341
}
2342
}
2343
}
2344
&.color {
2346
min-height: 0;
2347
min-width: 0;
2348
&.horizontal {
2350
padding: 0 0 12px 0;
2351
// trough { padding-bottom: $bar_size; }
2353
slider {
2355
@extend %scale-has-marks-above-horz;
2356
margin-bottom: $color_slider_margin;
2358
margin-top: $color_marks_slider_margin;
2359
}
2360
}
2361
&.vertical {
2363
&:dir(ltr) {
2364
padding: 0 0 0 12px;
2365
// trough { padding-left: $bar_size; }
2367
slider {
2369
@extend %scale-has-marks-below-vert;
2370
margin-left: $color_slider_margin;
2372
margin-right: $color_marks_slider_margin;
2373
}
2374
}
2375
&:dir(rtl) {
2377
padding: 0 12px 0 0;
2378
// trough { padding-right: $bar_size; }
2380
slider {
2382
@extend %scale-has-marks-above-vert;
2383
margin-right: $color_slider_margin;
2385
margin-left: $color_marks_slider_margin;
2386
}
2387
}
2388
}
2389
&.fine-tune {
2391
&.horizontal {
2392
slider {
2393
@extend %scale-has-marks-above-horz-fine-tune;
2394
}
2395
}
2396
&.vertical {
2398
&:dir(ltr) {
2399
slider {
2400
@extend %scale-has-marks-below-vert-fine-tune;
2401
}
2402
}
2403
&:dir(rtl) {
2405
slider {
2406
@extend %scale-has-marks-above-vert-fine-tune;
2407
}
2408
}
2409
}
2410
}
2411
}
2412
}
2413
/*****************
2416
* Progress bars *
2417
*****************/
2418
progressbar {
2419
// sizing
2420
&.horizontal {
2421
trough,
2422
progress { min-height: $bar_size; }
2423
}
2424
&.vertical {
2426
trough,
2427
progress { min-width: $bar_size; }
2428
}
2429
// FIXME: insensitive state missing and some other state should be set probably
2431
color: $tertiary_fg_color;
2432
font-size: smaller;
2433
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2435
progress { background-color: $primary_color; }
2437
&.osd { // progressbar.osd used for epiphany page loading progress
2439
// min-width: $bar_size;
2440
// min-height: $bar_size;
2441
// background-color: transparent;
2442
// trough { background-color: transparent; }
2444
progress {
2446
}
2447
}
2448
}
2449
/*************
2452
* Level Bar *
2453
*************/
2454
levelbar {
2455
block {
2456
min-width: $medium_size;
2457
min-height: $bar_size;
2458
}
2459
&.vertical block {
2461
min-width: $bar_size;
2462
min-height: $medium_size;
2463
}
2464
trough {
2466
padding: 2px;
2467
border-radius: 2px;
2468
@include entry(normal);
2470
&:disabled { @include entry(disabled); }
2472
}
2473
&.horizontal.discrete block { margin: 0 1px; }
2475
&.vertical.discrete block { margin: 1px 0; }
2477
&.horizontal.discrete trough { padding: 2px 1px; }
2479
&.vertical.discrete trough { padding: 1px 2px; }
2481
block {
2483
&.low {
2484
background-color: $warning_color;
2485
}
2486
&.high,
2488
&:not(.empty) {
2489
background-color: $primary_color;
2490
}
2491
&.full {
2493
background-color: $success_color;
2494
}
2495
&.empty {
2497
background-color: $track_color;
2498
color: $disabled_fg_color;
2499
}
2500
}
2501
}
2502
/****************
2505
* Print dialog *
2506
*****************/
2507
printdialog {
2508
paper {
2509
padding: 0;
2510
border: 1px solid $borders_color;
2511
background: $base_color;
2512
color: $fg_color;
2513
}
2514
.dialog-action-box { margin: 12px; }
2516
}
2517
/**********
2520
* Frames *
2521
**********/
2522
frame > border,
2523
.frame {
2524
margin: 0;
2525
padding: 0;
2526
border: 1px solid $borders_color;
2527
border-radius: 0;
2528
box-shadow: none;
2529
&.flat { border-style: none; }
2531
}
2532
actionbar > revealer > box {
2534
padding: $container_padding;
2535
border-top: 1px solid $borders_color;
2536
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2538
}
2539
scrolledwindow {
2541
viewport.frame { // avoid double borders when viewport inside scrolled window
2542
border-style: none;
2543
}
2544
// This is used when content is touch-dragged past boundaries.
2546
// draws a box on top of the content, the size changes programmatically.
2547
@at-root overshoot {
2548
&.top { @include overshoot(top); }
2549
&.bottom { @include overshoot(bottom); }
2551
&.left { @include overshoot(left); }
2553
&.right { @include overshoot(right); }
2555
}
2556
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2558
@at-root undershoot {
2559
&.top { @include undershoot(top); }
2560
&.bottom { @include undershoot(bottom); }
2562
&.left { @include undershoot(left); }
2564
&.right { @include undershoot(right); }
2566
}
2567
@at-root junction { // the small square between two scrollbars
2569
border-style: solid none none solid;
2570
border-width: 1px;
2571
border-color: $borders_color;
2572
background-color: $base_color;
2573
&:dir(rtl) { border-style: solid solid none none; }
2575
}
2576
}
2577
//vbox and hbox separators
2579
separator {
2580
min-width: 1px;
2581
min-height: 1px;
2582
background: $borders_color;
2583
}
2584
/*********
2587
* Lists *
2588
*********/
2589
list {
2590
border-color: $borders_color;
2591
background-color: $base_color;
2592
row { padding: 2px; }
2594
}
2595
// FIXME
2597
$row_transition: $longer_transition, background-color 0, color 0;
2598
row {
2600
&.activatable {
2601
transition: $row_transition;
2602
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0);
2603
background-image: radial-gradient(circle farthest-corner at center,
2604
gtkalpha(currentColor, 0) 100%,
2605
transparent 0%),
2606
image(gtkalpha(currentColor, 0));
2607
&:hover {
2609
transition: $row_transition, box-shadow 0;
2610
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0.05);
2611
background-image: radial-gradient(circle farthest-corner at center,
2612
gtkalpha(currentColor, 0) 100%,
2613
transparent 0%),
2614
image(gtkalpha(currentColor, 0));
2615
}
2616
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2618
&:active {
2619
transition: $row_transition, background-image 0;
2620
animation: row_ripple_effect $longer_duration $deceleration_curve forwards;
2621
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, $lower_opacity / 2);
2622
}
2623
}
2624
&:selected { @extend %selected_items; }
2626
}
2627
/*********************
2630
* App Notifications *
2631
*********************/
2632
.app-notification,
2633
.app-notification.frame {
2634
@extend %osd;
2635
@extend toolbar.osd;
2637
margin: 8px;
2639
button { @extend %button_basic.flat; }
2641
border { border: none; }
2643
}
2644
/*************
2647
* Expanders *
2648
*************/
2649
expander {
2650
arrow {
2651
transition: all $shorter_duration $standard_curve;
2652
min-width: 16px;
2653
min-height: 16px;
2654
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2655
-gtk-icon-transform: rotate(-90deg);
2656
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2658
&:checked { -gtk-icon-transform: unset; }
2660
color: $secondary_fg_color;
2662
&:hover, &:active { color: $fg_color; }
2664
&:disabled { color: $disabled_secondary_fg_color; }
2666
&:selected {
2668
color: $secondary_inversed_fg_color;
2669
&:hover, &:active { color: $inversed_fg_color; }
2671
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2673
}
2674
}
2675
}
2676
/************
2679
* Calendar *
2680
***********/
2681
calendar {
2682
padding: 1px;
2683
border: 1px solid $borders_color;
2684
color: $fg_color;
2685
&:disabled { color: $disabled_fg_color; }
2687
&:selected {
2689
@extend %selected_items;
2690
border-radius: 2px + 1px;
2692
}
2693
&.header {
2695
border-style: none none solid;
2696
border-radius: 0;
2697
}
2698
&.button { @extend %simple_flat_button; }
2700
&.highlight {
2702
color: gtkalpha(currentColor, $hint_opacity);
2703
font-weight: 500;
2704
}
2705
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2707
}
2708
/***********
2711
* Dialogs *
2712
***********/
2713
messagedialog { // Message Dialog styling
2714
&.background { background-color: $lighter_bg_color; }
2715
.titlebar {
2717
min-height: $small_size;
2718
border-style: none;
2719
box-shadow: inset 0 1px $highlight_color;
2720
background-color: $lighter_bg_color;
2721
}
2722
&.csd { // rounded bottom border styling for csd version
2724
&.background {
2725
// bigger radius for better antialiasing
2726
border-bottom-left-radius: 2px;
2727
border-bottom-right-radius: 2px;
2728
}
2729
.dialog-action-area button {
2731
padding: 8px 16px;
2732
border-top: 1px solid $borders_color;
2733
border-radius: 0;
2734
@extend %simple_flat_button;
2736
&:first-child { border-bottom-left-radius: 2px; }
2738
&:last-child { border-bottom-right-radius: 2px; }
2740
}
2741
}
2742
}
2743
filechooser {
2745
.dialog-action-box { border-top: 1px solid $borders_color; }
2746
#pathbarbox {
2748
border-bottom: 1px solid $borders_color;
2749
background-color: $bg_color;
2750
}
2751
}
2752
filechooserbutton:drop(active) {
2754
box-shadow: none;
2755
}
2756
/***********
2759
* Sidebar *
2760
***********/
2761
.sidebar {
2762
border-style: none;
2763
background-color: $lighter_bg_color;
2764
@at-root %sidebar_left,
2766
&:dir(ltr),
2767
&.left,
2768
&.left:dir(rtl) {
2769
border-right: 1px solid $borders_color;
2770
border-left-style: none;
2771
}
2772
@at-root %sidebar_right
2774
&:dir(rtl),
2775
&.right {
2776
border-left: 1px solid $borders_color;
2777
border-right-style: none;
2778
}
2779
list { background-color: transparent; }
2781
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2783
}
2784
stacksidebar {
2786
&.sidebar {
2787
&:dir(ltr),
2788
&.left,
2789
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2790
&:dir(rtl),
2792
&.right { list { @extend %sidebar_right; }}
2793
}
2794
row {
2796
padding: 10px 4px;
2797
> label {
2799
padding-left: 6px;
2800
padding-right: 6px;
2801
}
2802
&.needs-attention > label { @extend %needs_attention; }
2804
}
2805
}
2806
/****************
2809
* File chooser *
2810
****************/
2811
placessidebar {
2812
> viewport.frame { border-style: none; }
2813
list { padding: (4px - 3px) 0 4px; }
2815
row {
2817
// Needs overriding of the GtkListBoxRow padding
2818
min-height: 32px;
2819
margin: -1px 0; // Remove unknown margins
2820
padding: 0;
2821
// Using margins/padding directly in the SidebarRow
2823
// will make the animation of the new bookmark row jump
2824
> revealer { padding: 0 12px; }
2825
&:selected { color: $inversed_fg_color; }
2827
&:disabled { color: $disabled_fg_color; }
2829
image.sidebar-icon {
2831
opacity: $hint_opacity; // dim the device icons
2832
&:dir(ltr) { padding-right: 8px; }
2834
&:dir(rtl) { padding-left: 8px; }
2835
}
2836
label.sidebar-label {
2838
&:dir(ltr) { padding-right: 2px; }
2839
&:dir(rtl) { padding-left: 2px; }
2840
}
2841
@at-root button.sidebar-button {
2843
@extend %simple_flat_button;
2844
@extend %small_button;
2846
row:selected & {
2848
}
2849
}
2850
&.sidebar-placeholder-row {
2852
min-height: 2px;
2853
padding: 0 8px;
2854
background-image: image($accent_color);
2855
background-clip: content-box;
2856
}
2857
&.sidebar-new-bookmark-row { color: $accent_color; }
2859
&:drop(active):not(:disabled) {
2861
box-shadow: inset 0 0 0 2px $accent_color;
2862
&:selected {
2864
// background-color: $accent_color;
2865
// color: $inversed_fg_color;
2866
}
2867
}
2868
}
2869
}
2870
placesview {
2872
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2873
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2875
// this selects the "connect to server" label
2877
> actionbar > revealer > box > label {
2878
padding-left: 8px;
2879
padding-right: 8px;
2880
}
2881
}
2882
/*********
2885
* Paned *
2886
*********/
2887
paned {
2888
> separator {
2889
min-width: 1px;
2890
min-height: 1px;
2891
-gtk-icon-source: none; // defeats the ugly default handle decoration
2892
border-style: none; // just to be sure
2893
background-color: transparent;
2894
// workaround, using background istead of a border since the border will get rendered twice (?)
2895
background-image: image($borders_color);
2896
background-size: 1px 1px;
2897
&.wide {
2899
min-width: 6px;
2900
min-height: 6px;
2901
background-color: $bg_color;
2902
background-image: image($borders_color), image($borders_color);
2903
background-size: 1px 1px, 1px 1px;
2904
}
2905
}
2906
&.horizontal > separator {
2908
background-repeat: repeat-y;
2909
&:dir(ltr) {
2911
margin: 0 -8px 0 0;
2912
padding: 0 8px 0 0;
2913
background-position: left;
2914
}
2915
&:dir(rtl) {
2917
margin: 0 0 0 -8px;
2918
padding: 0 0 0 8px;
2919
background-position: right;
2920
}
2921
&.wide {
2923
margin: 0;
2924
padding: 0;
2925
background-repeat: repeat-y, repeat-y;
2926
background-position: left, right;
2927
}
2928
}
2929
&.vertical > separator {
2931
margin: 0 0 -8px 0;
2932
padding: 0 0 8px 0;
2933
background-repeat: repeat-x;
2934
background-position: top;
2935
&.wide {
2937
margin: 0;
2938
padding: 0;
2939
background-repeat: repeat-x, repeat-x;
2940
background-position: bottom, top;
2941
}
2942
}
2943
}
2944
/**************
2947
* GtkInfoBar *
2948
**************/
2949
infobar {
2950
border-style: none;
2951
&.info { background-color: $info_bg_color; }
2953
&.question { background-color: $question_bg_color; }
2955
&.warning { background-color: $warning_bg_color; }
2957
&.error { background-color: $error_bg_color; }
2959
&.info,
2961
&.question,
2962
&.warning,
2963
&.error {
2964
> label, & { color: $inversed_fg_color; }
2965
button { @extend %button_selected; }
2967
selection { }
2969
*:link { @extend %link_selected; }
2971
}
2972
}
2973
/************
2976
* Tooltips *
2977
************/
2978
tooltip {
2979
&.background {
2980
// background-color needs to be set this way otherwise it gets drawn twice
2981
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2982
box-shadow: inset 0 1px $highlight_color;
2983
background-color: scale-alpha($base_color, $higher_opacity);
2984
}
2985
// @extend %osd;
2987
// padding: 4px; /* not working */
2989
border-radius: 2px;
2990
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2991
// FIXME: we need a border or tooltips vanish on black background.
2993
decoration { background-color: transparent; }
2994
label {
2996
// tooltip label has already 6px margins
2997
min-height: 32px - 6px * 2;
2998
padding: 0 8px - 6px;
2999
}
3000
* { // Yeah this is ugly
3002
padding: 0;
3003
background-color: transparent;
3004
color: inherit;
3005
}
3006
}
3007
/*****************
3010
* Color Chooser *
3011
*****************/
3012
colorswatch {
3013
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3014
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3015
// applied to the overlay box.
3016
// base color corners rounding
3018
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3019
// sports a bigger radius.
3020
// nth-child is needed by the custom color strip.
3021
&.top {
3023
border-top-left-radius: $md_radius + 0.5px;
3024
border-top-right-radius: $md_radius + 0.5px;
3025
overlay {
3027
border-top-left-radius: $md_radius;
3028
border-top-right-radius: $md_radius;
3029
}
3030
}
3031
&.bottom {
3033
border-bottom-left-radius: $md_radius + 0.5px;
3034
border-bottom-right-radius: $md_radius + 0.5px;
3035
overlay {
3037
border-bottom-left-radius: $md_radius;
3038
border-bottom-right-radius: $md_radius;
3039
}
3040
}
3041
&.left,
3043
&:first-child:not(.top) {
3044
border-top-left-radius: $md_radius + 0.5px;
3045
border-bottom-left-radius: $md_radius + 0.5px;
3046
overlay {
3048
border-top-left-radius: $md_radius;
3049
border-bottom-left-radius: $md_radius;
3050
}
3051
}
3052
&.right,
3054
&:last-child:not(.bottom) {
3055
border-top-right-radius: $md_radius + 0.5px;
3056
border-bottom-right-radius: $md_radius + 0.5px;
3057
overlay {
3059
border-top-right-radius: $md_radius;
3060
border-bottom-right-radius: $md_radius;
3061
}
3062
}
3063
&.dark overlay { color: $dark_contrast_color; }
3065
&.light overlay { color: $light_contrast_color; }
3067
&.dark { color: $dark_contrast_color; } // for focus ring
3069
&.light { color: $light_contrast_color; } // for focus ring
3071
&:drop(active) {
3073
box-shadow: none;
3074
&.light overlay {
3076
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3077
}
3078
&.dark overlay {
3080
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3081
}
3082
}
3083
overlay {
3085
transition: $shadow_transition;
3086
box-shadow: $z-depth-1;
3087
&:hover { box-shadow: $z-depth-2; }
3089
}
3090
&#add-color-button {
3092
border-radius: $md_radius $md_radius 0 0;
3093
color: $dark_contrast_color; // for focus ring
3094
&:only-child { border-radius: $md_radius; }
3096
overlay {
3098
background-image: linear-gradient(to right,
3099
$error_bg_color 25%,
3100
$warning_bg_color 25%, $warning_bg_color 50%,
3101
$info_bg_color 50%, $info_bg_color 75%,
3102
$question_bg_color 75%);
3103
color: $dark_contrast_color;
3104
}
3105
}
3106
&:disabled {
3108
opacity: $disabled_opacity;
3109
overlay { box-shadow: none; }
3111
}
3112
row:selected & {
3114
}
3115
&#editor-color-sample {
3117
border-radius: $md_radius + 0.5px;
3118
overlay { border-radius: $md_radius; }
3120
// overlay:hover { box-shadow: $z-depth-1; }
3122
}
3123
}
3124
// colorscale popup
3126
colorchooser .popover.osd {
3127
transition: $shadow_transition;
3128
border-radius: 2px;
3129
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
3130
background-color: $base_color;
3131
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
3133
spinbutton:not(.vertical) { @extend %entry.flat; }
3135
}
3136
/********
3139
* Misc *
3140
********/
3141
//content view (grid/list)
3142
.content-view {
3143
background-color: $bg_color;
3144
// &:hover { -gtk-icon-effect: highlight; }
3146
rubberband { @extend rubberband; }
3148
}
3149
.scale-popup {
3151
.osd & { @extend %osd; }
3152
.osd & button.flat { //FIXME: quick hack, redo properly
3154
}
3155
button { // +/- buttons on GtkVolumeButton popup
3157
}
3158
}
3159
/**********************
3162
* Window Decorations *
3163
*********************/
3164
decoration {
3165
transition: $shadow_transition;
3166
border-radius: 2px 2px 0 0;
3167
box-shadow: $z-depth-4, 0 16px 16px transparent;
3168
// FIXME rationalize shadows
3170
// this is used for the resize cursor area
3172
margin: 8px;
3173
&:backdrop {
3175
// the transparent shadow here is to enforce that the shadow extents don't
3176
// change when we go to backdrop, to prevent jumping windows.
3177
// The biggest shadow should be in the same order then in the active state
3178
// or the jumping will happen during the transition.
3179
box-shadow: $z-depth-2, 0 16px 16px transparent;
3180
}
3181
.maximized &,
3183
.fullscreen &,
3184
.tiled & { border-radius: 0; }
3185
.popup & { box-shadow: none; }
3187
// server-side decorations as used by mutter
3189
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3190
.csd.popup & {
3192
border-radius: 2px;
3193
box-shadow: $z-depth-2;
3194
}
3195
tooltip.csd & {
3197
border-radius: 2px;
3198
box-shadow: $z-depth-2;
3199
}
3200
messagedialog.csd & {
3202
border-radius: 2px;
3203
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3204
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3206
}
3207
.solid-csd & {
3209
margin: 0;
3210
padding: 4px;
3211
// border: solid 1px $borders_color;
3212
// border-radius: 0;
3213
box-shadow: inset 0 0 0 4px $headerbar_color;
3214
// background-color: $borders_color;
3215
}
3216
}
3217
// Window Close button
3219
button.titlebutton {
3220
// @extend %simple_flat_button;
3221
@extend %circular_button;
3223
.selection-mode & {
3225
}
3226
}
3227
// catch all extend :)
3230
%selected_items {
3232
background-color: $primary_color;
3233
@at-root %nobg_selected_items, & {
3235
color: $inversed_fg_color;
3236
&:disabled { color: $disabled_inversed_fg_color; }
3238
}
3239
}
3240
.monospace { font-family: monospace; }
3242
/**********************
3245
* Touch Copy & Paste *
3246
*********************/
3247
//touch selection handlebars for the Popover.osd above
3248
cursor-handle {
3249
border-radius: $circular_radius;
3250
background-color: $accent_color;
3251
background-image: none;
3252
&.top:dir(ltr), &.bottom:dir(rtl) {
3254
padding-left: 6px;
3255
border-top-right-radius: 0;
3256
}
3257
&.bottom:dir(ltr), &.top:dir(rtl) {
3259
padding-right: 6px;
3260
border-top-left-radius: 0;
3261
}
3262
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3264
-GtkWidget-text-handle-width: 24;
3265
-GtkWidget-text-handle-height: 30;
3266
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3268
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3269
url('#{$_url}@2.png'));
3270
}
3271
}
3272
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3274
%circular_button,
3276
button.circular { // FIXME: aggregate to buttons
3277
border-radius: $circular_radius;
3278
-gtk-outline-radius: $circular_radius;
3279
// label { padding: 0; }
3281
}
3282
%small_button {
3284
min-height: $small_size;
3285
min-width: $small_size;
3286
padding: 0;
3287
border-radius: $circular_radius;
3288
-gtk-outline-radius: $circular_radius;
3289
}
3290
// shortcut window keys
3292
.keycap {
3293
min-width: 28px - 8px * 2;
3294
min-height: 28px - 2px;
3295
margin-top: 2px;
3296
padding-bottom: 2px;
3297
padding-left: 8px;
3298
padding-right: 8px;
3299
border: solid 1px $borders_color;
3301
border-radius: 2px + 1px;
3302
box-shadow: inset 0 -2px $borders_color;
3303
background-color: $base_color;
3304
color: $fg_color;
3305
font-size: smaller;
3306
}
3307
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3309
transition: $longer_transition;
3310
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_color;
3311
caret-color: $accent_color;
3312
}
3313
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3315
stackswitcher button.circular,
3317
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3318
min-width: $medium_size;
3319
min-height: $medium_size;
3320
padding: 0;
3321
}
3322