ASCII text
1
$asset_suffix: if($variant=='dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
$small_size: 24px;
5
$medium_size: 36px;
6
$large_size: 48px;
7
$bar_size: 4px;
8
$menuitem_size: 28px;
9
$container_padding: 6px;
11
$material_radius: 2px;
12
$material_faster: 0.2s;
13
$material_slower: 0.3s;
14
$material_ease: cubic-bezier(0.4, 0.0, 0.2, 1);
15
$material_ease_out: cubic-bezier(0.0, 0.0, 0.2, 1);
16
$material_ease_in: cubic-bezier(0.4, 0.0, 1, 1);
17
// FIXME: color's transition is too slow
18
$material_transition: all $material_slower $material_ease_out, color 0;
19
$shadow_transition: box-shadow $material_faster $material_ease_out;
20
* {
22
padding: 0;
23
background-clip: padding-box;
24
-GtkToolButton-icon-spacing: 4;
26
-GtkTextView-error-underline-color: $error_color;
27
// The size for scrollbars. The slider is 2px smaller, but we keep it
29
// up so that the whole area is sensitive to button presses for the
30
// slider. The stepper button is larger in both directions, the slider
31
// only in the width
32
-GtkScrolledWindow-scrollbar-spacing: 0;
34
-GtkToolItemGroup-expander-size: 11;
36
-GtkTreeView-expander-size: 11;
37
-GtkTreeView-horizontal-separator: 4;
39
-GtkWidget-text-handle-width: 24;
41
-GtkWidget-text-handle-height: 24;
42
-GtkDialog-button-spacing: 4;
44
-GtkDialog-action-area-border: 0;
45
// We use the outline properties to signal the focus properties
47
// to the adwaita engine: using real CSS properties is faster,
48
// and we don't use any outlines for now.
49
outline-style: solid;
51
outline-width: 2px;
52
outline-color: $track_color;
53
outline-offset: -4px;
54
-gtk-outline-radius: 2px;
55
-gtk-secondary-caret-color: $selected_bg_color;
57
}
58
/***************
61
* Base States *
62
***************/
63
.background {
64
background-color: $bg_color;
65
color: $fg_color;
66
}
67
/*
69
These wildcard seems unavoidable, need to investigate.
70
Wildcards are bad and troublesome, use them with care,
71
or better, just don't.
72
Everytime a wildcard is used a kitten dies, painfully.
73
*/
74
*:disabled { -gtk-icon-effect: dim; }
76
.gtkstyle-fallback {
78
background-color: $bg_color;
79
color: $fg_color;
80
&:hover {
82
background-color: darken($bg_color, 5%);
83
color: $fg_color;
84
}
85
&:active {
87
background-color: darken($bg_color, 10%);
88
color: $fg_color;
89
}
90
&:disabled {
92
background-color: $bg_color;
93
color: $insensitive_fg_color;
94
}
95
&:selected {
97
background-color: $selected_bg_color;
98
color: $selected_fg_color;
99
}
100
}
101
.view,
103
%view {
104
@extend row.activatable;
105
background-color: $base_color;
107
color: $fg_color;
108
&:hover, &:active, &:selected { border-radius: 2px; }
110
&:disabled {
112
// background-color: $secondary_base_color;
113
color: $insensitive_fg_color;
114
}
115
&:selected { @extend %selected_items; }
117
}
118
.view,
120
textview {
121
text {
122
// @extend %view;
123
background-color: $base_color;
125
color: $fg_color;
126
&:disabled {
128
// background-color: $secondary_base_color;
129
color: $insensitive_fg_color;
130
}
131
selection { @extend %selected_items; }
133
}
134
}
135
textview border {
137
background-color: $secondary_base_color;
138
background-image: image($borders_color); // HACK: the border node just draws background so, using a background-image to draw the border
139
background-repeat: no-repeat;
140
color: $tertiary_fg_color;
141
&.bottom {
143
background-size: 100% 1px;
144
background-position: top;
145
}
146
&.top {
148
background-size: 100% 1px;
149
background-position: bottom;
150
}
151
&.left {
153
background-size: 1px 100%;
154
background-position: right;
155
}
156
&.right {
158
background-size: 1px 100%;
159
background-position: left;
160
}
161
}
162
iconview { @extend .view; }
164
.rubberband,
166
rubberband {
167
border: 1px solid $secondary_selected_bg_color;
168
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
169
}
170
flowbox {
172
rubberband { @extend rubberband; }
173
flowboxchild {
175
outline-offset: -2px;
176
padding: 4px;
177
border-radius: 2px;
178
&:selected { @extend %selected_items; }
180
}
181
}
182
label {
184
&.separator {
185
@extend .dim-label;
186
color: $fg_color;
188
}
189
row:selected &,
191
&:selected { @extend %nobg_selected_items; }
192
selection {
194
background-color: $selected_bg_color;
195
color: $selected_fg_color;
196
}
197
&:disabled {
199
color: $insensitive_fg_color;
200
selection { @extend %selected_items:disabled; }
202
}
203
}
204
.dim-label { opacity: $hint_opacity; }
206
assistant {
208
.sidebar {
209
padding: 4px 0;
210
// background-color: $base_color;
211
// border-top: 1px solid $borders_color;
212
}
213
// &.csd .sidebar { border-top-style: none; }
215
.sidebar label {
217
min-height: $medium_size;
218
padding: 0 12px;
219
color: $tertiary_fg_color;
220
font-weight: 500;
221
&.highlight { color: $fg_color; }
223
}
224
}
225
%osd, .osd { opacity: $higher_opacity; }
227
/*********************
230
* Spinner Animation *
231
*********************/
232
@keyframes spin {
233
to { -gtk-icon-transform: rotate(1turn); }
234
}
235
@keyframes spin_colors {
237
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
238
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
239
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
240
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
241
}
242
spinner {
244
background: none;
245
opacity: 0; // non spinning spinner makes no sense
246
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
247
&:checked {
249
opacity: 1;
250
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
251
&:disabled { opacity: $disabled_opacity; }
253
}
254
}
255
/****************
258
* Text Entries *
259
****************/
260
%entry,
261
entry {
262
%entry_basic, & {
263
min-height: $medium_size;
264
padding: 0 8px;
265
border-radius: 2px;
266
@include entry(normal);
268
&:focus { @include entry(focus); }
270
&:disabled { @include entry(insensitive); }
272
&.flat {
274
border-radius: 0;
275
@include entry(flat-normal);
277
&:focus { @include entry(flat-focus); }
279
&:disabled { @include entry(flat-insensitive); }
281
}
282
image { // icons inside the entry
284
color: gtkalpha(currentColor, $enabled_opacity);
285
&:hover, &:active { color: currentColor; }
287
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
289
&.left { padding-left: 2px; padding-right: 6px; }
291
&.right { padding-left: 6px; padding-right: 2px; }
293
}
294
undershoot {
296
&.left { @include undershoot(left); }
297
&.right { @include undershoot(right); }
299
}
300
selection { @extend %selected_items; }
302
// entry error and warning style
304
@each $e_type, $e_color in (error, $error_color),
305
(warning, $warning_color) {
306
&.#{$e_type} {
307
@include entry(normal, $e_color);
308
&:focus { @include entry(focus, $e_color); }
310
&:disabled { @include entry(insensitive, $e_color); }
312
&.flat {
314
@include entry(flat-normal, $e_color);
315
&:focus { @include entry(flat-focus, $e_color); }
317
&:disabled { @include entry(flat-insensitive, $e_color); }
319
}
320
}
321
}
322
&:drop(active) {
324
// box-shadow: inset 0 0 0 2px $accent_bg_color;
325
}
326
.osd & {
328
}
329
}
330
progress {
332
margin: 2px -6px;
333
border-style: none none solid;
334
border-width: 2px;
335
border-color: $selected_bg_color;
336
// border-radius: 0;
337
// box-shadow: none;
338
background-color: transparent;
339
// background-image: none;
340
}
341
// linked entries
343
.linked:not(.vertical) > &:not(.flat) { @extend %linked; }
344
// Vertically linked entries
346
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
347
}
348
treeview acceleditor > label { background-color: $selected_bg_color; }
350
treeview entry {
352
&.flat, & {
353
min-height: 0;
354
padding: 2px;
355
border-radius: 0;
356
background-color: $base_color;
357
&, &:focus {
359
border-image: none;
360
box-shadow: none;
361
}
362
}
363
}
364
/***********
367
* Buttons *
368
***********/
369
// stuff for .needs-attention
370
@keyframes needs_attention {
371
from {
372
background-image: -gtk-gradient(radial,
373
center center, 0,
374
center center, 0.001,
375
to($accent_bg_color),
376
to(transparent));
377
}
378
to {
380
background-image: -gtk-gradient(radial,
381
center center, 0,
382
center center, 0.5,
383
to($accent_bg_color),
384
to(transparent));
385
}
386
}
387
%button,
389
button {
390
@at-root %button_basic, & {
391
min-height: 24px;
392
min-width: 16px;
393
padding: 6px 10px;
394
border-radius: 2px;
395
font-weight: 500;
396
@include button(normal);
398
&:hover { @include button(hover); }
400
&:active { @include button(active); }
402
&:disabled { @include button(insensitive); }
404
&:checked { @include button(checked); }
406
&:checked:disabled { @include button(checked-insensitive); }
408
&.flat {
410
@include button(flat-normal);
411
&:hover { @include button(flat-hover); }
413
&:active { @include button(flat-active); }
415
&:disabled { @include button(flat-insensitive); }
417
&:checked { @include button(flat-checked); }
419
&:checked:disabled { @include button(flat-checked-insensitive); }
421
}
422
&.image-button {
424
min-width: 24px;
425
padding: 6px;
426
-gtk-outline-radius: 100px;
427
border-radius: 100px;
428
}
429
&.text-button {
431
padding-left: 16px;
432
padding-right: 16px;
433
}
434
&.text-button.image-button {
436
padding-left: 10px;
437
padding-right: 10px;
438
-gtk-outline-radius: 2px;
439
border-radius: 2px;
440
label {
442
&:last-child { padding-left: 2px; padding-right: 6px; }
443
&:first-child { padding-left: 6px; padding-right: 2px; }
444
}
445
}
446
.linked > & { @extend %linked; }
448
.linked.vertical > & { @extend %linked_vertical; }
450
.linked > &.flat,
452
.linked.vertical > &.flat {
453
border-radius: 2px;
454
&.image-button {
456
-gtk-outline-radius: 100px;
457
border-radius: 100px;
458
}
459
&.text-button.image-button {
461
-gtk-outline-radius: 2px;
462
border-radius: 2px;
463
}
464
}
465
&:drop(active) {
467
// box-shadow: inset 0 0 0 2px $accent_bg_color;
468
}
469
}
470
@at-root %button_selected, row:selected & {
472
&:disabled { color: $insensitive_secondary_selected_fg_color; }
473
&.flat {
475
color: $secondary_selected_fg_color;
476
&:hover, &:active { color: $selected_fg_color; }
478
&:disabled { color: $insensitive_secondary_selected_fg_color; }
480
}
481
}
482
separator {
484
min-width: 0;
485
min-height: 0;
486
background: transparent;
487
}
488
// big standalone buttons like in Documents pager
490
&.osd {
491
padding: 12px 16px;
492
&.image-button { padding: 12px; }
494
&:disabled { opacity: 0; }
496
}
497
//overlay / OSD style
499
@at-root %osd_button,
500
.osd & {
501
}
502
// Suggested and Destructive Action buttons
504
@each $b_type, $b_color in (suggested-action, $suggested_color),
505
(destructive-action, $destructive_color) {
506
&.#{$b_type} {
507
background-color: $b_color;
508
color: $selected_fg_color;
509
// @include button(normal, $b_color, white);
511
// &:hover { @include button(hover, $b_color, white); }
513
// &:active, &:checked { @include button(active, $b_color, white); }
515
&:disabled { @include button(insensitive, $b_color, white); }
517
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
519
&.flat {
521
background-color: transparent;
522
color: $b_color;
523
// @include button(flat-normal, $b_color, white);
525
// &:hover { @include button(flat-hover, $b_color, white); }
527
// &:active, &:checked { @include button(flat-active, $b_color, white); }
529
&:disabled { @include button(flat-insensitive, $b_color, white); }
531
}
532
.osd & {
534
}
535
}
536
}
537
.stack-switcher > & {
539
// to position the needs attention dot, padding is added to the button
540
// child, a label needs just lateral padding while an icon needs vertical
541
// padding added too.
542
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
544
> label {
546
padding-left: 6px; // label padding
547
padding-right: 6px; //
548
}
549
> image {
551
padding-left: 6px; // image padding
552
padding-right: 6px; //
553
padding-top: 3px; //
554
padding-bottom: 3px; //
555
}
556
&.text-button {
558
// compensate text-button paddings
559
padding-left: 10px;
560
padding-right: 10px;
561
}
562
&.image-button {
564
// we want image buttons to have a 1:1 aspect ratio, so compensation
565
// of the padding added to the GtkImage is needed
566
padding-left: 4px;
567
padding-right: 4px;
568
}
569
&.needs-attention {
571
> label,
572
> image { @extend %needs_attention; }
573
&:checked {
575
> label,
576
> image {
577
animation: none;
578
background-image: none;
579
}
580
}
581
}
582
}
583
// inline-toolbar buttons
585
.inline-toolbar & {
586
@extend %button_basic.flat;
587
&:not(.text-button) { @extend %button_basic.image-button; }
589
}
590
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
592
}
593
%needs_attention {
595
animation: needs_attention $material_slower $material_ease_out forwards;
596
background-repeat: no-repeat;
597
background-position: right 3px;
598
background-size: 6px 6px;
599
&:dir(rtl) { background-position: left 3px; }
601
}
602
// all the following is for the +|- buttons on inline toolbars, that way
604
// should really be deprecated...
605
.inline-toolbar toolbutton > button { // redefining the button look is
606
// needed since those are flat...
607
}
608
// More inline toolbar buttons
610
toolbar.inline-toolbar toolbutton {
611
// > button.flat { @extend %linked_middle; }
612
// &:first-child > button.flat { @extend %linked:first-child; }
614
// &:last-child > button.flat { @extend %linked:last-child; }
616
// &:only-child > button.flat { @extend %linked:only-child; }
618
}
619
%linked_middle {
621
border-radius: 0;
622
}
623
%linked {
625
-gtk-outline-radius: 2px;
626
@extend %linked_middle;
628
&:first-child {
630
border-top-left-radius: 2px;
631
border-bottom-left-radius: 2px;
632
}
633
&:last-child {
635
border-top-right-radius: 2px;
636
border-bottom-right-radius: 2px;
637
}
638
&:only-child {
640
border-radius: 2px;
641
}
642
}
643
%linked_vertical_middle {
645
border-radius: 0;
646
}
647
%linked_vertical{
649
-gtk-outline-radius: 2px;
650
@extend %linked_vertical_middle;
652
&:first-child {
654
border-top-left-radius: 2px;
655
border-top-right-radius: 2px;
656
}
657
&:last-child {
659
border-bottom-left-radius: 2px;
660
border-bottom-right-radius: 2px;
661
}
662
&:only-child {
664
border-radius: 2px;
665
}
666
}
667
/* menu buttons */
669
modelbutton.flat,
670
.menuitem.button.flat {
671
min-height: $menuitem_size;
672
padding-left: 8px;
673
padding-right: 8px;
674
border-radius: 2px;
675
color: inherit;
676
@extend %button_basic.flat;
678
&:selected { @extend %selected_items; }
680
check,
682
radio {
683
&, &:hover { background-image: none; }
684
&:active { animation: none; }
686
}
687
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease; }
689
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease; }
691
// FIXME: remove the following when the checks/radios rewrite lands
693
check:last-child,
694
radio:last-child { margin-left: 8px; }
695
check:first-child,
697
radio:first-child { margin-right: 8px; }
698
}
699
modelbutton.flat arrow {
701
background: none;
702
&:hover { background: none; }
704
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
706
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
708
}
709
button.color {
711
min-height: $small_size;
712
min-width: $small_size;
713
padding: $container_padding;
714
colorswatch:only-child {
716
// &, overlay { border-radius: 0; }
717
}
718
}
719
/*********
722
* Links *
723
*********/
724
*:link {
725
&, &:hover, &:active { color: $link_color; }
726
&:visited {
728
&, &:hover, &:active { color: $link_visited_color; }
729
}
730
@at-root %link_selected,
732
&:selected,
733
*:selected & { color: $selected_fg_color; }
734
}
735
button:link,
737
button:visited {
738
@extend *:link;
739
> label { text-decoration-line: underline; }
741
}
742
/*****************
744
* GtkSpinButton *
745
*****************/
746
spinbutton {
747
&:not(.vertical) {
748
// in this horizontal configuration, the whole spinbutton
749
// behaves as the entry, so we extend the entry styling
750
// and nuke the style on the internal entry
751
@extend %entry;
752
padding: 0;
754
%spinbutton_entry,
756
entry {
757
min-width: $large_size - 16px;
758
// reset all the other props since the spinbutton node is styled here
759
margin: 0;
760
border-image: none;
761
border-radius: 0;
762
box-shadow: none;
763
background-color: transparent;
764
}
765
button {
767
min-height: $small_size;
768
min-width: $small_size;
769
// margin: $container_padding;
770
padding: 0;
771
border: solid $container_padding transparent;
772
@extend %button_basic.flat;
774
@extend %button_basic.image-button;
776
&.up { margin-left: -$container_padding / 2; }
778
&.down { margin-right: -$container_padding / 2; }
780
}
781
}
782
// OSD horizontal
784
.osd &:not(.vertical) {
785
button {
786
}
787
}
788
// Vertical
790
&.vertical {
791
// in the vertical configuration, we treat the spinbutton
792
// as a box, and tweak the style of the entry in the middle
793
// so that it's linked
794
// FIXME: this should not be set at all, but otherwise it gets the wrong
796
// color
797
&:disabled { color: $insensitive_fg_color; }
798
&:drop(active) {
800
box-shadow: none;
801
}
802
entry {
804
min-height: $medium_size;
805
min-width: $large_size;
806
padding: 0;
807
}
808
button {
810
min-height: $medium_size;
811
min-width: $large_size;
812
padding: 0;
813
@extend %button_basic.flat;
815
&.up { border-radius: 2px 2px 0 0; }
817
&.down { border-radius: 0 0 2px 2px; }
819
}
820
}
821
// OSD vertical
823
.osd &.vertical button:first-child {
824
}
825
// Misc
827
treeview &:not(.vertical) {
828
min-height: 0;
829
border-style: none;
830
border-radius: 0;
831
entry {
833
min-height: 0;
834
padding: 1px 2px;
835
}
836
}
837
}
838
/**************
841
* ComboBoxes *
842
**************/
843
combobox {
844
arrow {
845
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
846
min-height: 16px;
847
min-width: 16px;
848
}
849
menu,
851
.menu {
852
padding: 2px 0;
853
menuitem {
855
min-height: $medium_size;
856
padding: 0 10px;
857
}
858
}
859
&.linked {
861
button:nth-child(2) {
862
&:dir(ltr) { @extend %linked:last-child; }
863
&:dir(rtl) { @extend %linked:first-child; }
864
}
865
}
866
&:drop(active) { // FIXME: untested
868
box-shadow: none;
869
// button.combo { @extend %button_basic:drop(active); }
871
}
872
}
873
.linked > combobox > box > button.combo {
875
// the combo is a composite widget so the way we do button linking doesn't
876
// work, special case needed. See
877
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
878
&:dir(ltr),
880
&:dir(rtl) { @extend %linked_middle; } // specificity bump
881
}
882
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
884
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
885
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
886
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
888
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
889
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
890
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
891
/************
894
* Toolbars *
895
************/
896
toolbar {
897
-GtkWidget-window-dragging: true;
898
padding: $container_padding / 2;
899
background-color: $bg_color;
900
// on OSD
902
.osd & { background-color: transparent; }
903
// stand-alone OSD toolbars
905
&.osd {
906
transition: $shadow_transition;
907
padding: $container_padding;
908
border-radius: 2px;
909
box-shadow: $z-depth-2;
910
background-color: $base_color;
911
&:backdrop { box-shadow: $z-depth-1; }
913
&.left,
915
&.right,
916
&.top,
917
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
918
button { @extend %button_basic.flat; }
920
}
921
// toolbar separators
923
&.horizontal separator { margin: $container_padding / 2; }
924
&.vertical separator { margin: $container_padding / 2; }
925
&:not(.inline-toolbar):not(.osd) {
927
scale,
928
entry,
929
spinbutton,
930
button { margin: $container_padding / 2; }
931
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
933
}
934
}
935
//searchbar, location-bar & inline-toolbar
937
.inline-toolbar {
938
padding: $container_padding;
939
border-style: solid;
940
border-width: 0 1px 1px;
941
border-color: $borders_color;
942
background-color: $secondary_base_color;
943
}
944
searchbar,
946
.location-bar {
947
padding: $container_padding;
948
border-style: solid;
949
border-width: 0 0 1px;
950
border-color: $borders_color;
951
background-color: $bg_color;
952
background-clip: border-box;
953
}
954
/***************
957
* Header bars *
958
***************/
959
%titlebar,
960
headerbar {
961
min-height: $large_size;
962
padding: 0 $container_padding;
963
box-shadow: inset 0 1px $secondary_highlight_color, $z-depth-1;
964
background-color: $headerbar_color;
965
color: $selected_fg_color;
966
&:backdrop {
968
// background-color: $headerbar_color;
969
}
970
.title {
972
padding-left: 12px;
973
padding-right: 12px;
974
font-weight: bold;
975
}
976
.subtitle {
978
padding-left: 12px;
979
padding-right: 12px;
980
font-size: smaller;
981
@extend .dim-label;
983
}
984
button:not(.suggested-action):not(.destructive-action) {
986
@extend %button_basic.flat;
987
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
989
$selected_fg_color 0%,
990
transparent 0%)
991
0 0 0 / 0 0 0px;
992
color: $secondary_selected_fg_color;
993
&:hover, &:active, &:checked { color: $selected_fg_color; }
995
&:disabled {
997
color: $insensitive_secondary_selected_fg_color;
998
> label { color: inherit; }
1000
}
1001
&:checked {
1003
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1004
$selected_fg_color 100%,
1005
transparent 0%)
1006
0 0 2 / 0 0 2px;
1007
background-color: transparent;
1008
color: $selected_fg_color;
1009
&:disabled {
1011
background-color: transparent;
1012
color: $insensitive_selected_fg_color;
1013
> label { color: inherit; }
1015
}
1016
}
1017
}
1018
button.suggested-action, button.destructive-action {
1020
&:disabled {
1021
color: $insensitive_secondary_selected_fg_color;
1022
> label { color: inherit; }
1024
}
1025
}
1026
&.selection-mode {
1028
animation: header_ripple_effect $material_slower $material_ease_out forwards;
1029
// box-shadow: inset 0 1px $secondary_highlight_color;
1030
// background-color: $selected_bg_color;
1031
color: $selected_fg_color;
1032
&:backdrop {
1034
}
1035
.subtitle:link { @extend *:link:selected; }
1037
button:not(.suggested-action):not(.destructive-action) {
1039
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1040
$selected_fg_color 0%,
1041
transparent 0%)
1042
0 0 0 / 0 0 0px;
1043
// color: $secondary_selected_fg_color;
1044
&, &:hover, &:active, &:checked { color: $selected_fg_color; }
1046
&:disabled {
1048
color: $insensitive_selected_fg_color;
1049
> label { color: inherit; }
1051
}
1052
&:checked {
1054
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1055
$selected_fg_color 100%,
1056
transparent 0%)
1057
0 0 2 / 0 0 2px;
1058
color: $selected_fg_color;
1059
&:disabled {
1061
color: $insensitive_selected_fg_color;
1062
> label { color: inherit; }
1064
}
1065
}
1066
}
1067
.selection-menu {
1069
padding-left: 16px;
1070
padding-right: 16px;
1071
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1073
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1075
}
1076
}
1077
.tiled &,
1079
.maximized & {
1080
border-radius: 0; // squared corners when the window is max'd or tiled
1081
box-shadow: none;
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
}
1104
headerbar {
1106
// add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height
1107
entry,
1108
spinbutton,
1109
// separator,
1110
button {
1111
margin-top: $container_padding;
1112
margin-bottom: $container_padding;
1113
}
1114
}
1115
.titlebar {
1117
border-top-left-radius: 2px;
1118
border-top-right-radius: 2px;
1119
}
1120
headerbar {
1122
separator:first-child + &, // tackles the paned container case
1123
&:first-child {
1124
border-top-left-radius: 2px;
1125
.tiled &,
1127
.maximized & { border-radius: 0; }
1128
}
1129
&:last-child {
1131
border-top-right-radius: 2px;
1132
.tiled &,
1134
.maximized & { border-radius: 0; }
1135
}
1136
}
1137
.titlebar:not(headerbar) {
1139
window.csd > & {
1140
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1141
padding: 0;
1142
background-color: transparent;
1143
background-image: none;
1144
border-style: none;
1145
box-shadow: none;
1146
}
1147
> separator {
1149
background-color: $headerbar_color;
1150
background-image: image($borders_color);
1151
}
1152
@extend %titlebar;
1154
}
1155
/************
1158
* Pathbars *
1159
************/
1160
.path-bar button {
1161
&.text-button, &.image-button, & {
1162
padding-left: 6px;
1163
padding-right: 6px;
1164
}
1165
&.text-button.image-button, & {
1167
// label:last-child { padding-left: 2px; padding-right: 8px; }
1168
// label:first-child { padding-left: 8px; padding-right: 2px; }
1169
}
1170
image {
1172
padding-left: 4px;
1173
padding-right: 4px;
1174
}
1175
&.slider-button {
1177
padding-left: 0;
1178
padding-right: 0;
1179
}
1180
}
1181
/**************
1184
* Tree Views *
1185
**************/
1186
treeview.view {
1187
-GtkTreeView-grid-line-width: 1;
1188
-GtkTreeView-grid-line-pattern: '';
1189
-GtkTreeView-tree-line-width: 1;
1190
-GtkTreeView-tree-line-pattern: '';
1191
-GtkTreeView-expander-size: 16;
1192
border-left-color: $track_color; // this is actually the tree lines color,
1194
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1195
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1197
&:hover, &:active, &:selected { border-radius: 0; }
1199
&.separator {
1201
min-height: 1px + 2px * 2;
1202
color: $borders_color;
1203
}
1204
&:drop(active) {
1206
border-style: solid none;
1207
border-width: 1px;
1208
border-color: $accent_bg_color;
1209
&.after { border-top-style: none; }
1211
&.before { border-bottom-style: none; }
1213
}
1214
&.expander {
1216
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1217
-gtk-icon-transform: rotate(-90deg);
1218
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1220
&:checked { -gtk-icon-transform: unset; }
1222
color: $secondary_fg_color;
1224
&:hover, &:active { color: $fg_color; }
1226
&:disabled { color: $insensitive_secondary_fg_color; }
1228
&:selected {
1230
color: $secondary_selected_fg_color;
1231
&:hover, &:active { color: $selected_fg_color; }
1233
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1235
}
1236
}
1237
&.progressbar { // progress bar in treeviews
1239
border-style: none none solid;
1240
border-width: $bar_size;
1241
border-color: $selected_bg_color;
1242
background-color: transparent;
1243
background-image: none;
1244
&:selected { border-color: currentColor; }
1246
}
1247
&.trough { // progress bar trough in treeviews
1249
border-style: none none solid;
1250
border-width: $bar_size;
1251
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1252
background-color: transparent;
1253
background-image: none;
1254
&:selected { border-color: $track_color; }
1256
}
1257
header {
1259
button {
1260
@extend row.activatable;
1261
padding: 2px 6px;
1263
border-style: none solid solid none;
1264
border-width: 1px;
1265
border-color: $borders_color;
1266
border-radius: 0;
1267
background-clip: border-box;
1268
&, &:hover, &:active { box-shadow: none; }
1270
&, &:disabled { background-color: $base_color; }
1272
&:last-child { border-right-style: none; }
1274
}
1275
}
1276
button.dnd,
1278
header.button.dnd { // for treeview-like derive widgets
1279
padding: 2px 6px;
1280
border-style: none solid solid;
1281
border-width: 1px;
1282
border-color: $borders_color;
1283
border-radius: 0;
1284
box-shadow: none;
1285
background-color: $base_color;
1286
background-clip: border-box;
1287
color: $selected_bg_color;
1288
}
1289
}
1290
/*********
1293
* Menus *
1294
*********/
1295
menubar,
1296
.menubar {
1297
-GtkWidget-window-dragging: true;
1298
padding: 0;
1299
// box-shadow: inset 0 -1px $borders_color;
1300
background-color: $headerbar_color;
1301
> menuitem {
1303
transition: background-color $material_faster $material_ease_out;
1304
min-height: 20px;
1305
padding: 4px 8px;
1306
color: $secondary_selected_fg_color;
1307
&:hover { //Seems like it :hover even with keyboard focus
1309
transition: none;
1310
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1311
color: $selected_fg_color;
1312
}
1313
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1315
}
1316
}
1317
menu,
1319
.menu {
1320
margin: 4px 0;
1321
padding: 4px 0;
1322
background-color: $base_color;
1323
border: 1px solid $borders_color; // adds borders in a non composited env
1324
.csd & {
1326
border: none; // axes borders in a composited env
1327
border-radius: 2px;
1328
}
1329
menuitem {
1331
transition: background-color $material_faster $material_ease_out;
1332
min-height: 20px;
1333
min-width: 40px;
1334
padding: 4px 8px;
1335
font: initial;
1336
text-shadow: none;
1337
&:hover {
1339
transition: none;
1340
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1341
}
1342
&:disabled { color: $insensitive_fg_color; }
1344
// submenu indicators
1346
arrow {
1347
min-height: 16px;
1348
min-width: 16px;
1349
&:dir(ltr) {
1351
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1352
margin-left: 8px;
1353
}
1354
&:dir(rtl) {
1356
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1357
margin-right: 8px;
1358
}
1359
}
1360
}
1361
// overflow arrows
1363
> arrow {
1364
min-height: 16px;
1365
min-width: 16px;
1366
padding: 4px;
1367
border-radius: 0;
1368
background-color: $base_color;
1369
color: $secondary_fg_color;
1370
&.top {
1372
margin-top: -4px;
1373
border-bottom: 1px solid $borders_color;
1374
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1375
}
1376
&.bottom {
1378
margin-bottom: -4px;
1379
border-top: 1px solid $borders_color;
1380
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1381
}
1382
&:hover {
1384
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1385
color: $fg_color;
1386
}
1387
&:disabled {
1389
border-color: transparent;
1390
background-color: transparent;
1391
color: transparent;
1392
// color: $insensitive_secondary_fg_color;
1393
}
1394
}
1395
separator { margin: 4px 0; }
1397
}
1398
menuitem {
1400
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1401
check,
1403
radio {
1404
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1405
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1406
}
1407
}
1408
.csd.popup { border-radius: 2px; }
1410
/***************
1413
* Popovers *
1414
***************/
1415
popover.background {
1416
transition: $shadow_transition;
1417
padding: 0;
1418
box-shadow: $z-depth-2;
1419
background-color: $light_color;
1420
&:backdrop { box-shadow: $z-depth-1; }
1422
&, .csd & {
1424
border-style: solid;
1425
border-width: 1px;
1426
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1427
border-radius: 2px + 1px;
1428
}
1429
> list,
1431
> .view,
1432
> toolbar {
1433
border-style: none;
1434
box-shadow: none;
1435
background-color: transparent;
1436
}
1437
&, .csd & {
1439
&.touch-selection,
1440
&.magnifier,
1441
&.osd { @extend %osd; }
1442
}
1443
separator { margin: 4px 0; }
1445
list separator { margin: 0; }
1447
checkbutton,
1449
radiobutton { @extend modelbutton.flat; }
1450
}
1451
/*************
1453
* Notebooks *
1454
*************/
1455
notebook {
1456
> header {
1457
border-width: 1px;
1458
border-color: $borders_color;
1459
background-color: $bg_color;
1460
background-clip: border-box;
1461
&.top {
1463
border-bottom-style: solid;
1464
> tabs {
1465
> tab:not(.reorderable-page) {
1466
margin-bottom: -1px;
1467
&:hover { box-shadow: inset 0 -2px $track_color; }
1469
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1471
}
1472
}
1473
}
1474
&.bottom {
1476
border-top-style: solid;
1477
> tabs {
1478
> tab:not(.reorderable-page) {
1479
margin-top: -1px;
1480
&:hover { box-shadow: inset 0 2px $track_color; }
1482
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1484
}
1485
}
1486
}
1487
&.left {
1489
border-right-style: solid;
1490
> tabs {
1491
> tab:not(.reorderable-page) {
1492
margin-right: -1px;
1493
&:hover { box-shadow: inset -2px 0 $track_color; }
1495
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1497
}
1498
}
1499
}
1500
&.right {
1502
border-left-style: solid;
1503
> tabs {
1504
> tab:not(.reorderable-page) {
1505
margin-left: -1px;
1506
&:hover { box-shadow: inset 2px 0 $track_color; }
1508
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1510
}
1511
}
1512
}
1513
&.top > tabs > arrow {
1515
@extend %notebook_vert_arrows;
1516
border-top-style: none;
1518
}
1519
&.bottom > tabs > arrow {
1521
@extend %notebook_vert_arrows;
1522
border-bottom-style: none;
1524
}
1525
@at-root %notebook_vert_arrows {
1527
padding-left: 4px;
1528
padding-right: 4px;
1529
&.down {
1531
margin-left: -8px;
1532
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1533
}
1534
&.up {
1536
margin-right: -8px;
1537
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1538
}
1539
}
1540
&.left > tabs > arrow {
1542
@extend %notebook_horz_arrows;
1543
border-left-style: none;
1545
}
1546
&.right > tabs > arrow {
1548
@extend %notebook_horz_arrows;
1549
border-right-style: none;
1551
}
1552
@at-root %notebook_horz_arrows {
1554
padding-top: 4px;
1555
padding-bottom: 4px;
1556
&.down {
1558
margin-top: -8px;
1559
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1560
}
1561
&.up {
1563
margin-bottom: -8px;
1564
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1565
}
1566
}
1567
> tabs > arrow {
1569
@extend %button_basic.flat;
1570
min-height: 16px;
1572
min-width: 16px;
1573
border-radius: 0;
1574
}
1575
tab {
1577
transition: $material_transition;
1578
min-height: 24px;
1579
min-width: 24px;
1580
padding: 6px 12px;
1581
outline-offset: -6px;
1583
border-width: 1px; // for reorderable tabs
1585
border-color: transparent; //
1586
color: $secondary_fg_color;
1588
font-weight: 500;
1589
&:hover {
1591
color: $fg_color;
1592
&.reorderable-page {
1594
border-color: $borders_color;
1595
background-color: $secondary_base_color;
1596
}
1597
}
1598
&:disabled { color: $insensitive_secondary_fg_color; }
1600
&:checked {
1602
color: $fg_color;
1603
&:disabled { color: $insensitive_fg_color; }
1605
&:not(.reorderable-page) { animation: tab_ripple_effect $material_slower * 3 $material_ease_out; }
1607
&.reorderable-page {
1609
border-color: $borders_color;
1610
background-color: $base_color;
1611
}
1612
}
1613
// colors the button like the label, overridden otherwise
1615
button.flat {
1616
// FIXME: generalize .small-button?
1617
min-width: $small_size;
1618
min-height: $small_size;
1619
padding: 0;
1620
@extend %button_basic.image-button;
1622
&:last-child {
1624
margin-left: 6px;
1625
margin-right: -6px;
1626
}
1627
&:first-child {
1629
margin-left: -6px;
1630
margin-right: 6px;
1631
}
1632
}
1633
}
1634
&.top,
1636
&.bottom {
1637
tabs {
1638
padding-left: 8px;
1639
padding-right: 8px;
1640
&:not(:only-child) {
1642
&:first-child { margin-left: 0; }
1643
&:last-child { margin-right: 0; }
1644
}
1645
tab {
1647
&.reorderable-page {
1648
margin: 0 -1px;
1649
border-style: none solid;
1650
}
1651
}
1652
}
1653
}
1654
&.left,
1656
&.right {
1657
tabs {
1658
padding-top: 8px;
1659
padding-bottom: 8px;
1660
&:not(:only-child) {
1662
&:first-child { margin-top: 0; }
1663
&:last-child { margin-bottom: 0; }
1664
}
1665
tab {
1667
&.reorderable-page {
1668
margin: -1px 0;
1669
border-style: solid none;
1670
}
1671
}
1672
}
1673
}
1674
}
1675
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1677
background-color: $base_color;
1678
entry,
1680
spinbutton:not(.vertical) { @extend %entry.flat; }
1681
revealer entry,
1683
revealer spinbutton:not(.vertical) { @extend %entry; }
1684
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1686
}
1687
}
1688
/**************
1691
* Scrollbars *
1692
**************/
1693
scrollbar {
1694
$_slider_min_length: 24px;
1695
// disable steppers
1697
@at-root * {
1698
-GtkScrollbar-has-backward-stepper: false;
1699
-GtkScrollbar-has-forward-stepper: false;
1700
}
1701
transition: $material_transition;
1703
background-color: $base_color;
1704
background-clip: $extra_background_clip;
1705
// scrollbar border
1707
&.top { border-bottom: 1px solid $borders_color; }
1708
&.bottom { border-top: 1px solid $borders_color; }
1709
&.left { border-right: 1px solid $borders_color; }
1710
&.right { border-left: 1px solid $borders_color; }
1711
// slider
1713
slider {
1714
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1715
min-width: 8px;
1716
min-height: 8px;
1717
border: 4px solid transparent;
1718
border-radius: 100px;
1719
background-clip: padding-box;
1720
background-color: $tertiary_fg_color;
1721
&:hover { background-color: $secondary_fg_color; }
1723
&:active { background-color: $fg_color; }
1725
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1727
}
1728
&.fine-tune {
1730
slider {
1731
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1732
min-width: 4px;
1733
min-height: 4px;
1734
}
1735
&.horizontal slider { margin: 2px 0; }
1737
&.vertical slider { margin: 0 2px; }
1739
}
1740
&.overlay-indicator {
1742
&:not(.dragging):not(.hovering) {
1743
border-color: transparent;
1744
background-color: transparent;
1745
slider {
1747
min-width: 4px;
1748
min-height: 4px;
1749
margin: 2px;
1750
border: 2px solid scale-alpha($base_color, $lower_opacity);
1751
}
1752
button {
1754
min-width: 4px;
1755
min-height: 4px;
1756
margin: 2px;
1757
border: 2px solid scale-alpha($base_color, $lower_opacity);
1758
border-radius: 100px;
1759
background-color: $tertiary_fg_color;
1760
background-clip: padding-box;
1761
-gtk-icon-source: none;
1762
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1764
}
1765
&.horizontal {
1767
slider { min-width: $_slider_min_length; }
1768
button { min-width: 8px; }
1770
}
1771
&.vertical {
1773
slider { min-height: $_slider_min_length; }
1774
button { min-height: 8px; }
1776
}
1777
}
1778
&.dragging,
1780
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1781
}
1782
&.horizontal slider { min-width: $_slider_min_length; }
1784
&.vertical slider { min-height: $_slider_min_length; }
1786
// button styling
1788
button {
1789
@extend %button_basic.flat;
1790
min-width: 16px;
1791
min-height: 16px;
1792
padding: 0;
1793
border-radius: 0;
1794
}
1795
// button icons
1797
&.vertical {
1798
button {
1799
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1800
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1802
}
1803
}
1804
&.horizontal {
1806
button {
1807
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1808
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1810
}
1811
}
1812
}
1813
/**********
1816
* Switch *
1817
**********/
1818
switch {
1819
transition: $material_transition;
1820
margin: $container_padding 0;
1821
border: 4px solid transparent;
1822
border-radius: 100px;
1823
background-color: $track_color;
1824
background-clip: padding-box;
1825
font-size: 0;
1826
&:disabled { color: $insensitive_fg_color; }
1828
&:checked {
1830
background-color: scale-alpha($accent_bg_color, 0.5);
1831
&:disabled {
1833
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1834
color: $insensitive_fg_color;
1835
}
1836
}
1837
slider {
1839
@include entry(normal);
1840
transition: $material_transition, margin 0;
1842
min-width: $small_size;
1843
min-height: $small_size;
1844
margin: -4px 0 -4px -4px;
1845
-gtk-outline-radius: 100px;
1846
border-radius: 100px;
1847
background-image: -gtk-gradient(radial,
1848
center center, 0,
1849
center center, 0.5,
1850
to(transparent),
1851
to(transparent));
1852
}
1853
&:hover slider { @include entry(focus); }
1855
&:disabled slider { @include entry(insensitive); }
1857
&:checked slider {
1859
transition: $material_transition, margin 0, background-image 0;
1860
animation: needs_attention $material_slower $material_ease_out forwards;
1861
margin: -4px -4px -4px 0;
1862
// background-color: $accent_bg_color;
1863
color: $selected_fg_color;
1864
}
1865
&:checked:disabled slider { animation: none; }
1867
row:selected & {
1869
}
1870
}
1871
/*************************
1874
* Check and Radio items *
1875
*************************/
1876
// draw regular check and radio items using our PNG assets
1877
// all assets are rendered from assets.svg. never add pngs directly
1878
//selection-mode
1880
@each $s,$as in ('','-selectionmode'),
1881
(':active', '-active-selectionmode'),
1882
(':disabled', '-insensitive-selectionmode'),
1883
(':checked', '-checked-selectionmode'),
1884
(':checked:active', '-checked-active-selectionmode'),
1885
(':disabled:checked', '-checked-insensitive-selectionmode') {
1886
.view.content-view.check#{$s}:not(list) {
1887
-gtk-icon-shadow: $z-depth-1;
1888
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
1889
url("assets/checkbox#{$as}@2.png"));
1890
margin: 8px;
1891
background-color: transparent;
1892
&:hover, &:active { -gtk-icon-shadow: $z-depth-2; }
1894
&:disabled { -gtk-icon-shadow: none; }
1896
}
1897
}
1898
checkbutton.text-button, radiobutton.text-button {
1900
// this is for a nice focus on check and radios text
1901
padding: 2px 0;
1902
outline-offset: 0;
1903
label:not(:only-child) {
1905
&:first-child { margin-left: 4px; }
1906
&:last-child { margin-right: 4px; }
1908
}
1909
}
1910
check,
1912
radio {
1913
min-height: 24px;
1914
min-width: 24px;
1915
-gtk-icon-source: none;
1916
margin: -12px -8px;
1918
padding: 12px;
1919
outline-offset: 4px;
1920
// border-radius: 100%;
1921
@extend %button_basic.flat;
1923
@extend %button_basic.image-button;
1925
color: gtkalpha(currentColor, $enabled_opacity);
1927
&:hover, &:active { color: currentColor; }
1929
&:checked, &:checked:disabled { background-color: transparent; }
1931
&:checked, &:indeterminate { color: $accent_bg_color; }
1933
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1935
&:only-child { margin: -12px; }
1937
.osd & {
1939
}
1940
menu menuitem & {
1942
transition: none;
1943
margin: -16px -16px; // this is a workaround for a menu check/radio size allocation issue
1944
&:not(:checked):not(:indeterminate):hover { color: gtkalpha(currentColor, $enabled_opacity); }
1946
&, &:hover, &:disabled {
1948
background-image: none;
1949
// color: inherit;
1950
// animation: none;
1951
}
1952
}
1953
}
1954
%check,
1956
check {
1957
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1958
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1959
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1961
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1962
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1964
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1965
}
1966
%radio,
1968
radio {
1969
border-image: -gtk-gradient(radial,
1970
center center, 0,
1971
center center, 0.001,
1972
to($accent_bg_color),
1973
to(transparent))
1974
24 / 24px;
1975
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1976
-gtk-recolor(url("assets/radio-unchecked-symbolic.png")));
1977
&:checked {
1979
border-image: -gtk-gradient(radial,
1980
center center, 0,
1981
center center, (10 / 48 / 2),
1982
to($accent_bg_color),
1983
to(transparent))
1984
24 / 24px;
1985
}
1986
&:checked:disabled {
1988
border-image: -gtk-gradient(radial,
1989
center center, 0,
1990
center center, (10 / 48 / 2),
1991
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1992
to(transparent))
1993
24 / 24px;
1994
}
1995
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1997
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1998
&:indeterminate:checked {
2000
border-image: -gtk-gradient(radial,
2001
center center, 0,
2002
center center, 0.001,
2003
to($accent_bg_color),
2004
to(transparent))
2005
24 / 24px;
2006
}
2007
}
2008
// let's animate things
2010
@keyframes check_check {
2011
from { -gtk-icon-transform: rotate(90deg); }
2012
to { -gtk-icon-transform: unset; }
2013
}
2014
@keyframes check_radio {
2016
from { -gtk-icon-transform: scale(0); }
2017
to { -gtk-icon-transform: unset; }
2018
}
2019
@keyframes check_indeterminate {
2021
from { -gtk-icon-transform: unset; }
2022
50% { -gtk-icon-transform: scale(0, 1); }
2023
to { -gtk-icon-transform: unset; }
2024
}
2025
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2027
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2029
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2031
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2033
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2035
// no animations in menus
2037
menu menuitem {
2038
check:not(:indeterminate):checked,
2039
radio:not(:indeterminate):checked,
2040
check:indeterminate:checked,
2041
radio:indeterminate:checked { animation: none; }
2042
}
2043
treeview.view check,
2045
treeview.view radio {
2046
// margin: -12px;
2047
// padding: 12px;
2048
padding: 0;
2049
&:checked:hover, &:selected:checked:hover { background-image: none; }
2051
& {
2053
color: $secondary_fg_color;
2054
&:hover, &:active { color: $fg_color; }
2056
&:disabled { color: $insensitive_secondary_fg_color; }
2058
&:checked, &:indeterminate { color: $accent_bg_color; }
2060
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2062
}
2063
&:selected {
2065
color: $secondary_selected_fg_color;
2066
&:hover, &:active { color: $selected_fg_color; }
2068
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2070
&:checked, &:indeterminate { color: $accent_bg_color; }
2072
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2074
}
2075
}
2076
treeview.view radio:checked {
2078
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2079
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2080
border-image: none;
2081
}
2082
/************
2085
* GtkScale *
2086
************/
2087
scale {
2088
// sizing
2089
$_marks_lenght: 8px;
2091
$_marks_distance: 8px;
2092
min-height: 12px;
2094
min-width: 12px;
2095
padding: 12px;
2096
* { transition: $material_transition; }
2098
// the slider is inside the trough, so to have make it bigger there's a negative margin
2100
slider {
2101
min-height: $small_size;
2102
min-width: $small_size;
2103
margin: -10px;
2104
}
2105
// the backing bit
2107
trough {
2108
outline-offset: 2px;
2109
background-color: $track_color;
2110
&:disabled { color: $insensitive_fg_color; }
2112
}
2113
// the colored part of the backing bit
2115
highlight {
2116
background-color: $accent_bg_color;
2117
&:disabled { background-color: transparent; }
2119
}
2120
// this is another differently styled part of the backing bit, the most relevant use case is for example
2122
// in media player to indicate how much video stream as been cached
2123
fill {
2124
background-color: $track_color;
2125
&:disabled { background-color: transparent; }
2127
}
2128
slider {
2130
transition: all $material_faster $material_ease;
2131
// border-radius: 100%;
2132
// background-color: $accent_bg_color;
2133
background-repeat: no-repeat;
2134
background-position: center;
2135
@each $s,$as in ('',''),
2137
(':disabled','-insensitive') {
2138
&#{$s} {
2139
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2140
background-image: -gtk-scaled(url('#{$_url}.png'),
2141
url('#{$_url}@2.png'));
2142
}
2143
}
2144
background-size: calc(100% - 8px);
2146
&:hover { background-size: calc(100% - 4px); }
2148
&:active { background-size: calc(100% - 0px); }
2150
}
2151
// click-and-hold the slider to activate
2153
&.fine-tune {
2154
// to make the slider shrink in fine-tune mode
2155
slider { background-size: calc(100% - 12px); }
2156
}
2157
value { color: gtkalpha(currentColor, $hint_opacity); }
2159
marks {
2161
color: $track_color;
2162
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2164
(bottom, bottom, top),
2165
(top, left, right),
2166
(bottom, right, left) {
2167
&.#{$marks_class} {
2168
margin-#{$marks_margin}: $_marks_distance;
2169
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2170
}
2171
}
2172
}
2173
&.horizontal {
2175
indicator {
2176
min-height: $_marks_lenght;
2177
min-width: 1px;
2178
}
2179
}
2180
&.vertical {
2182
indicator {
2183
min-height: 1px;
2184
min-width: $_marks_lenght;
2185
}
2186
}
2187
// *WARNING* scale with marks madness following
2189
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2191
$suffix: if($variant == 'light', '', '-dark');
2192
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2194
('vertical', 'vert') {
2195
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2196
('scale-has-marks-below', ':first-child:not(:only-child)') {
2197
@each $state, $state_infix in ('', ''),
2198
(':disabled', '-insensitive') {
2199
&.#{$dir_class} {
2200
%#{$marks_infix}-#{$dir_infix},
2201
contents#{$nth_child} > trough > slider {
2202
&#{$state} {
2203
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2204
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2206
}
2207
@if $dir_class == 'horizontal' {
2209
min-height: 30px;
2210
min-width: $small_size;
2211
@if $marks_infix == 'scale-has-marks-above' {
2213
margin-top: -16px;
2214
background-position: center calc(100% - 4px);
2216
&:hover { background-position: center calc(100% - 2px); }
2218
&:active { background-position: center calc(100% - 0px); }
2220
}
2221
@if $marks_infix == 'scale-has-marks-below' {
2223
margin-bottom: -16px;
2224
background-position: center calc(4px);
2226
&:hover { background-position: center calc(2px); }
2228
&:active { background-position: center calc(0px); }
2230
}
2231
}
2232
@if $dir_class == 'vertical' {
2234
min-height: $small_size;
2235
min-width: 30px;
2236
@if $marks_infix == 'scale-has-marks-above' {
2238
margin-left: -16px;
2239
background-position: calc(4px) center;
2241
&:hover { background-position: calc(2px) center; }
2243
&:active { background-position: calc(0px) center; }
2245
}
2246
@if $marks_infix == 'scale-has-marks-below' {
2248
margin-right: -16px;
2249
background-position: calc(100% - 4px) center;
2251
&:hover { background-position: calc(100% - 2px) center; }
2253
&:active { background-position: calc(100% - 0px) center; }
2255
}
2256
}
2257
}
2258
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2260
&.fine-tune contents#{$nth_child} > trough > slider {
2261
// bigger negative margins to make the trough grow here as well
2262
@if $dir_class == 'horizontal' {
2264
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2265
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2267
}
2268
@if $dir_class == 'vertical' {
2270
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2271
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2273
}
2274
}
2275
}
2276
}
2277
}
2278
}
2279
&.color {
2281
min-height: 0;
2282
min-width: 0;
2283
&.horizontal {
2285
padding: 0 0 12px 0;
2286
trough {
2288
padding-bottom: $bar_size;
2289
}
2290
slider {
2292
@extend %scale-has-marks-above-horz;
2293
margin-bottom: -10px - $bar_size;
2295
margin-top: 0;
2296
}
2297
}
2298
&.vertical {
2300
&:dir(ltr) {
2301
padding: 0 0 0 12px;
2302
trough {
2304
padding-left: $bar_size;
2305
}
2306
slider {
2308
@extend %scale-has-marks-below-vert;
2309
margin-left: -10px - $bar_size;
2311
margin-right: 0;
2312
}
2313
}
2314
&:dir(rtl) {
2316
padding: 0 12px 0 0;
2317
trough {
2319
padding-right: $bar_size;
2320
}
2321
slider {
2323
@extend %scale-has-marks-above-vert;
2324
margin-right: -10px - $bar_size;
2326
margin-left: 0;
2327
}
2328
}
2329
}
2330
&.fine-tune {
2332
&.horizontal {
2333
slider {
2334
@extend %scale-has-marks-above-horz-fine-tune;
2335
}
2336
}
2337
&.vertical {
2339
&:dir(ltr) {
2340
slider {
2341
@extend %scale-has-marks-below-vert-fine-tune;
2342
}
2343
}
2344
&:dir(rtl) {
2346
slider {
2347
@extend %scale-has-marks-above-vert-fine-tune;
2348
}
2349
}
2350
}
2351
}
2352
}
2353
}
2354
/*****************
2357
* Progress bars *
2358
*****************/
2359
progressbar {
2360
// sizing
2361
&.horizontal {
2362
trough,
2363
progress { min-height: $bar_size; }
2364
}
2365
&.vertical {
2367
trough,
2368
progress { min-width: $bar_size; }
2369
}
2370
// FIXME: insensitive state missing and some other state should be set probably
2372
color: $tertiary_fg_color;
2373
font-size: smaller;
2374
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2376
progress { background-color: $selected_bg_color; }
2378
&.osd { // progressbar.osd used for epiphany page loading progress
2380
// min-width: $bar_size;
2381
// min-height: $bar_size;
2382
// background-color: transparent;
2383
// trough { background-color: transparent; }
2385
progress {
2387
}
2388
}
2389
}
2390
/*************
2393
* Level Bar *
2394
*************/
2395
levelbar {
2396
block {
2397
min-width: $medium_size;
2398
min-height: $bar_size;
2399
}
2400
&.vertical block {
2402
min-width: $bar_size;
2403
min-height: $medium_size;
2404
}
2405
trough {
2407
padding: 2px;
2408
border-radius: 2px;
2409
@include entry(normal);
2411
&:disabled { @include entry(insensitive); }
2413
}
2414
&.horizontal.discrete block { margin: 0 1px; }
2416
&.vertical.discrete block { margin: 1px 0; }
2418
&.horizontal.discrete trough { padding: 2px 1px; }
2420
&.vertical.discrete trough { padding: 1px 2px; }
2422
block {
2424
&.low {
2425
background-color: $warning_color;
2426
}
2427
&.high {
2429
background-color: $selected_bg_color;
2430
}
2431
&.full {
2433
background-color: $success_color;
2434
}
2435
&.empty {
2437
background-color: $track_color;
2438
color: $insensitive_fg_color;
2439
}
2440
}
2441
}
2442
/****************
2445
* Print dialog *
2446
*****************/
2447
printdialog {
2448
paper {
2449
padding: 0;
2450
border: 1px solid $borders_color;
2451
background: $base_color;
2452
color: $fg_color;
2453
}
2454
.dialog-action-box { margin: 12px; }
2456
}
2457
/**********
2460
* Frames *
2461
**********/
2462
frame > border,
2463
.frame {
2464
margin: 0;
2465
padding: 0;
2466
border: 1px solid $borders_color;
2467
border-radius: 0;
2468
box-shadow: none;
2469
&.flat { border-style: none; }
2471
}
2472
actionbar > revealer > box {
2474
padding: $container_padding;
2475
border-top: 1px solid $borders_color;
2476
}
2477
scrolledwindow {
2479
viewport.frame { // avoid double borders when viewport inside scrolled window
2480
border-style: none;
2481
}
2482
// This is used when content is touch-dragged past boundaries.
2484
// draws a box on top of the content, the size changes programmatically.
2485
overshoot {
2486
&.top { @include overshoot(top); }
2487
&.bottom { @include overshoot(bottom); }
2489
&.left { @include overshoot(left); }
2491
&.right { @include overshoot(right); }
2493
}
2494
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2496
undershoot {
2497
&.top { @include undershoot(top); }
2498
&.bottom { @include undershoot(bottom); }
2500
&.left { @include undershoot(left); }
2502
&.right { @include undershoot(right); }
2504
}
2505
junction { // the small square between two scrollbars
2507
border-style: solid none none solid;
2508
border-width: 1px;
2509
border-color: $borders_color;
2510
background-color: $base_color;
2511
&:dir(rtl) { border-style: solid solid none none; }
2513
}
2514
}
2515
//vbox and hbox separators
2517
separator {
2518
min-width: 1px;
2519
min-height: 1px;
2520
background: $borders_color;
2521
}
2522
/*********
2525
* Lists *
2526
*********/
2527
list {
2528
border-color: $borders_color;
2529
background-color: $base_color;
2530
row { padding: 2px; }
2532
}
2533
row {
2535
transition: $material_transition;
2536
&:hover { transition: none; }
2538
&.activatable {
2540
background-image: radial-gradient(circle farthest-corner at center,
2541
gtkalpha(currentColor, 0) 100%,
2542
transparent 0%),
2543
image(gtkalpha(currentColor, 0));
2544
&:hover {
2546
background-image: radial-gradient(circle farthest-corner at center,
2547
gtkalpha(currentColor, 0) 100%,
2548
transparent 0%),
2549
image(gtkalpha(currentColor, 0.05));
2550
}
2551
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2553
&:active {
2554
transition: $material_transition, background-image 0;
2555
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2556
}
2557
}
2558
&:selected { @extend %selected_items; }
2560
}
2561
/*********************
2564
* App Notifications *
2565
*********************/
2566
.app-notification,
2567
.app-notification.frame {
2568
@extend %osd;
2569
@extend toolbar.osd;
2571
margin: 8px;
2573
border { border: none; }
2575
}
2576
/*************
2579
* Expanders *
2580
*************/
2581
expander {
2582
arrow {
2583
transition: all $material_faster $material_ease;
2584
min-width: 16px;
2585
min-height: 16px;
2586
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2587
-gtk-icon-transform: rotate(-90deg);
2588
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2590
&:checked { -gtk-icon-transform: unset; }
2592
color: $secondary_fg_color;
2594
&:hover, &:active { color: $fg_color; }
2596
&:disabled { color: $insensitive_secondary_fg_color; }
2598
&:selected {
2600
color: $secondary_selected_fg_color;
2601
&:hover, &:active { color: $selected_fg_color; }
2603
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2605
}
2606
}
2607
}
2608
/************
2611
* Calendar *
2612
***********/
2613
calendar {
2614
padding: 1px;
2615
border: 1px solid $borders_color;
2616
color: $fg_color;
2617
&:disabled { color: $insensitive_fg_color; }
2619
&:selected {
2621
@extend %selected_items;
2622
border-radius: 2px + 1px;
2624
}
2625
&.header {
2627
border: none;
2628
border-bottom: 1px solid $borders_color;
2629
border-radius: 0;
2630
}
2631
&.button { @extend %button_basic.flat; }
2633
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2635
&.highlight {
2637
color: gtkalpha(currentColor, $hint_opacity);
2638
font-weight: 500;
2639
}
2640
}
2641
/***********
2644
* Dialogs *
2645
***********/
2646
messagedialog { // Message Dialog styling
2647
&.background { background-color: $light_color; }
2648
.titlebar {
2650
min-height: $small_size;
2651
border-style: none;
2652
box-shadow: inset 0 1px $highlight_color;
2653
background-color: $light_color;
2654
}
2655
&.csd { // rounded bottom border styling for csd version
2657
&.background {
2658
// bigger radius for better antialiasing
2659
border-bottom-left-radius: 2px;
2660
border-bottom-right-radius: 2px;
2661
}
2662
.dialog-action-area button {
2664
padding: 8px 16px;
2665
border-top: 1px solid $borders_color;
2666
border-radius: 0;
2667
@extend %button_basic.flat;
2669
&:first-child{ border-bottom-left-radius: 2px; }
2671
&:last-child { border-bottom-right-radius: 2px; }
2673
}
2674
}
2675
}
2676
filechooser {
2678
.dialog-action-box { border-top: 1px solid $borders_color; }
2679
#pathbarbox { border-bottom: 1px solid $borders_color; }
2681
}
2682
filechooserbutton:drop(active) {
2684
box-shadow: none;
2685
}
2686
/***********
2689
* Sidebar *
2690
***********/
2691
.sidebar {
2692
border-style: none;
2693
background-color: $light_color;
2694
@at-root %sidebar_left,
2696
&:dir(ltr),
2697
&.left,
2698
&.left:dir(rtl) {
2699
border-right: 1px solid $borders_color;
2700
border-left-style: none;
2701
}
2702
@at-root %sidebar_right
2704
&:dir(rtl),
2705
&.right {
2706
border-left: 1px solid $borders_color;
2707
border-right-style: none;
2708
}
2709
list { background-color: transparent; }
2711
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2713
}
2714
stacksidebar {
2716
&.sidebar {
2717
&:dir(ltr),
2718
&.left,
2719
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2720
&:dir(rtl),
2722
&.right { list { @extend %sidebar_right; }}
2723
}
2724
row {
2726
padding: 10px 4px;
2727
> label {
2729
padding-left: 6px;
2730
padding-right: 6px;
2731
}
2732
&.needs-attention > label { @extend %needs_attention; }
2734
}
2735
}
2736
/****************
2739
* File chooser *
2740
****************/
2741
placessidebar {
2742
> viewport.frame { border-style: none; }
2743
row {
2745
// Needs overriding of the GtkListBoxRow padding
2746
min-height: 32px;
2747
padding: 0;
2748
// Using margins/padding directly in the SidebarRow
2750
// will make the animation of the new bookmark row jump
2751
> revealer { padding: 0 12px; }
2752
&:selected { color: $selected_fg_color; }
2754
&:disabled { color: $insensitive_fg_color; }
2756
image.sidebar-icon {
2758
opacity: $hint_opacity; // dim the device icons
2759
&:dir(ltr) { padding-right: 8px; }
2761
&:dir(rtl) { padding-left: 8px; }
2762
}
2763
label.sidebar-label {
2765
&:dir(ltr) { padding-right: 2px; }
2766
&:dir(rtl) { padding-left: 2px; }
2767
}
2768
@at-root button.sidebar-button {
2770
@extend %button_basic.flat;
2771
min-height: $small_size;
2773
min-width: $small_size;
2774
margin-top: 0;
2775
margin-bottom: 0;
2776
padding: 0;
2777
border-radius: 100%;
2778
-gtk-outline-radius: 100%;
2779
row:selected & { @extend %button_selected.flat; }
2781
}
2782
&.sidebar-placeholder-row {
2784
min-height: 2px;
2785
padding: 0 8px;
2786
background-image: image($accent_bg_color);
2787
background-clip: content-box;
2788
}
2789
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2791
&:drop(active):not(:disabled) {
2793
box-shadow: inset 0 0 0 2px $accent_bg_color;
2794
&:selected {
2796
// background-color: $accent_bg_color;
2797
// color: $selected_fg_color;
2798
}
2799
}
2800
}
2801
}
2802
placesview {
2804
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2805
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2807
// this selects the "connect to server" label
2809
> actionbar > revealer > box > label {
2810
padding-left: 8px;
2811
padding-right: 8px;
2812
}
2813
}
2814
/*********
2817
* Paned *
2818
*********/
2819
paned {
2820
> separator {
2821
min-width: 1px;
2822
min-height: 1px;
2823
-gtk-icon-source: none; // defeats the ugly default handle decoration
2824
border-style: none; // just to be sure
2825
background-color: transparent;
2826
// workaround, using background istead of a border since the border will get rendered twice (?)
2827
background-image: image($borders_color);
2828
background-size: 1px 1px;
2829
&.wide {
2831
min-width: 6px;
2832
min-height: 6px;
2833
background-color: $bg_color;
2834
background-image: image($borders_color), image($borders_color);
2835
background-size: 1px 1px, 1px 1px;
2836
}
2837
}
2838
&.horizontal > separator {
2840
background-repeat: repeat-y;
2841
&:dir(ltr) {
2843
margin: 0 -8px 0 0;
2844
padding: 0 8px 0 0;
2845
background-position: left;
2846
}
2847
&:dir(rtl) {
2849
margin: 0 0 0 -8px;
2850
padding: 0 0 0 8px;
2851
background-position: right;
2852
}
2853
&.wide {
2855
margin: 0;
2856
padding: 0;
2857
background-repeat: repeat-y, repeat-y;
2858
background-position: left, right;
2859
}
2860
}
2861
&.vertical > separator {
2863
margin: 0 0 -8px 0;
2864
padding: 0 0 8px 0;
2865
background-repeat: repeat-x;
2866
background-position: top;
2867
&.wide {
2869
margin: 0;
2870
padding: 0;
2871
background-repeat: repeat-x, repeat-x;
2872
background-position: bottom, top;
2873
}
2874
}
2875
}
2876
/**************
2879
* GtkInfoBar *
2880
**************/
2881
infobar { border-style: none; }
2882
.info { background-color: $info_bg_color; }
2884
.question { background-color: $question_bg_color; }
2886
.warning { background-color: $warning_bg_color; }
2888
.error { background-color: $error_bg_color; }
2890
.info,
2892
.question,
2893
.warning,
2894
.error {
2895
color: $selected_fg_color;
2896
button { @extend %button_selected; }
2898
label:selected {
2900
}
2901
*:link { @extend %link_selected; }
2903
}
2904
/************
2907
* Tooltips *
2908
************/
2909
tooltip {
2910
&.background {
2911
// background-color needs to be set this way otherwise it gets drawn twice
2912
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2913
background-color: scale-alpha($base_color, $higher_opacity);
2914
}
2915
// @extend %osd;
2917
// padding: 4px; /* not working */
2919
border-radius: 2px;
2920
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2921
// FIXME: we need a border or tooltips vanish on black background.
2923
decoration { background-color: transparent; }
2924
label {
2926
min-height: 32px - 6px * 2;
2927
padding: 2px 8px - 6px;
2928
}
2929
* { // Yeah this is ugly
2931
padding: 0;
2932
background-color: transparent;
2933
color: inherit;
2934
}
2935
}
2936
/*****************
2939
* Color Chooser *
2940
*****************/
2941
colorswatch {
2942
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2943
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2944
// applied to the overlay box.
2945
// base color corners rounding
2947
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2948
// sports a bigger radius.
2949
// nth-child is needed by the custom color strip.
2950
&.top {
2952
border-top-left-radius: $material_radius + 0.5px;
2953
border-top-right-radius: $material_radius + 0.5px;
2954
overlay {
2956
border-top-left-radius: $material_radius;
2957
border-top-right-radius: $material_radius;
2958
}
2959
}
2960
&.bottom {
2962
border-bottom-left-radius: $material_radius + 0.5px;
2963
border-bottom-right-radius: $material_radius + 0.5px;
2964
overlay {
2966
border-bottom-left-radius: $material_radius;
2967
border-bottom-right-radius: $material_radius;
2968
}
2969
}
2970
&.left,
2972
&:first-child:not(.top) {
2973
border-top-left-radius: $material_radius + 0.5px;
2974
border-bottom-left-radius: $material_radius + 0.5px;
2975
overlay {
2977
border-top-left-radius: $material_radius;
2978
border-bottom-left-radius: $material_radius;
2979
}
2980
}
2981
&.right,
2983
&:last-child:not(.bottom) {
2984
border-top-right-radius: $material_radius + 0.5px;
2985
border-bottom-right-radius: $material_radius + 0.5px;
2986
overlay {
2988
border-top-right-radius: $material_radius;
2989
border-bottom-right-radius: $material_radius;
2990
}
2991
}
2992
&.dark overlay { color: white; }
2994
&.light overlay { color: scale-alpha(black, 0.8); }
2996
&.dark { color: white; } // for focus ring
2998
&.light { color: scale-alpha(black, 0.8); } // for focus ring
3000
&:drop(active) {
3002
box-shadow: none;
3003
&.light overlay {
3005
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3006
}
3007
&.dark overlay {
3009
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3010
}
3011
}
3012
overlay {
3014
transition: $shadow_transition;
3015
box-shadow: $z-depth-1;
3016
&:hover { box-shadow: $z-depth-2; }
3018
}
3019
&#add-color-button {
3021
border-radius: $material_radius $material_radius 0 0;
3022
color: white; // for focus ring
3023
&:only-child { border-radius: $material_radius; }
3025
overlay {
3027
background-image: linear-gradient(to right,
3028
$error_bg_color 25%,
3029
$warning_bg_color 25%, $warning_bg_color 50%,
3030
$info_bg_color 50%, $info_bg_color 75%,
3031
$question_bg_color 75%);
3032
color: white;
3033
}
3034
}
3035
&:disabled {
3037
opacity: $disabled_opacity;
3038
overlay { box-shadow: none; }
3040
}
3041
row:selected & {
3043
}
3044
&#editor-color-sample {
3046
border-radius: $material_radius + 0.5px;
3047
overlay { border-radius: $material_radius; }
3049
// overlay:hover { box-shadow: $z-depth-1; }
3051
}
3052
}
3053
// colorscale popup
3055
colorchooser .popover.osd {
3056
transition: $shadow_transition;
3057
border-radius: 2px;
3058
box-shadow: $z-depth-2;
3059
background-color: $base_color;
3060
&:backdrop { box-shadow: $z-depth-1; }
3062
spinbutton:not(.vertical) { @extend %entry.flat; }
3064
}
3065
/********
3068
* Misc *
3069
********/
3070
//content view (grid/list)
3071
.content-view {
3072
background-color: $bg_color;
3073
// &:hover { -gtk-icon-effect: highlight; }
3075
rubberband { @extend rubberband; }
3077
}
3078
.scale-popup {
3080
.osd & { @extend %osd; }
3081
.osd & button.flat { //FIXME: quick hack, redo properly
3083
}
3084
button { // +/- buttons on GtkVolumeButton popup
3086
}
3087
}
3088
/**********************
3091
* Window Decorations *
3092
*********************/
3093
decoration {
3094
transition: $shadow_transition;
3095
border-radius: 2px 2px 0 0;
3096
box-shadow: $z-depth-4, 0 16px 16px transparent;
3097
// FIXME rationalize shadows
3099
// this is used for the resize cursor area
3101
margin: 8px;
3102
&:backdrop {
3104
// the transparent shadow here is to enforce that the shadow extents don't
3105
// change when we go to backdrop, to prevent jumping windows.
3106
// The biggest shadow should be in the same order then in the active state
3107
// or the jumping will happen during the transition.
3108
box-shadow: $z-depth-2, 0 16px 16px transparent;
3109
}
3110
.fullscreen &,
3112
.tiled & { border-radius: 0; }
3113
.popup & { box-shadow: none; }
3115
// server-side decorations as used by mutter
3117
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3118
.csd.popup & {
3120
border-radius: 2px;
3121
box-shadow: $z-depth-2;
3122
}
3123
tooltip.csd & {
3125
border-radius: 2px;
3126
box-shadow: $z-depth-2;
3127
}
3128
messagedialog.csd & {
3130
border-radius: 2px;
3131
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3132
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3134
}
3135
.solid-csd & {
3137
margin: 4px;
3138
// border: solid 1px $borders_color;
3139
border-radius: 0;
3140
box-shadow: none;
3141
background-color: $bg_color;
3142
}
3143
}
3144
// Window Close button
3146
button.titlebutton {
3147
// @extend %button_basic.flat;
3148
@extend %button_basic.image-button;
3150
.selection-mode & {
3152
}
3153
}
3154
// catch all extend :)
3157
%selected_items {
3159
background-color: $selected_bg_color;
3160
@at-root %nobg_selected_items, & {
3162
color: $selected_fg_color;
3163
&:disabled { color: $insensitive_selected_fg_color; }
3165
}
3166
}
3167
.monospace { font: Monospace; }
3169
/**********************
3172
* Touch Copy & Paste *
3173
*********************/
3174
//touch selection handlebars for the Popover.osd above
3175
cursor-handle {
3176
border-radius: 100px;
3177
background-color: $accent_bg_color;
3178
background-image: none;
3179
&.top:dir(ltr), &.bottom:dir(rtl) {
3181
padding-left: 6px;
3182
border-top-right-radius: 0;
3183
}
3184
&.bottom:dir(ltr), &.top:dir(rtl) {
3186
padding-right: 6px;
3187
border-top-left-radius: 0;
3188
}
3189
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3191
-GtkWidget-text-handle-width: 24;
3192
-GtkWidget-text-handle-height: 30;
3193
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3195
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3196
url('#{$_url}@2.png'));
3197
}
3198
}
3199
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3201
button.circular { // FIXME: aggregate to buttons
3203
border-radius: 100px;
3204
-gtk-outline-radius: 100px;
3205
label { padding: 0; }
3207
}
3208
// shortcut window keys
3210
.keycap {
3211
min-width: 28px - 8px * 2;
3212
min-height: 28px - 2px;
3213
margin-top: 2px;
3214
padding-bottom: 2px;
3215
padding-left: 8px;
3216
padding-right: 8px;
3217
border: solid 1px $borders_color;
3219
border-radius: 2px + 1px;
3220
box-shadow: inset 0 -2px $borders_color;
3221
background-color: $base_color;
3222
color: $fg_color;
3223
font-size: smaller;
3224
}
3225
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3227
transition: $material_transition;
3228
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3229
caret-color: $accent_bg_color;
3230
}
3231
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3233
stackswitcher button.circular,
3235
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3236
min-width: $medium_size;
3237
min-height: $medium_size;
3238
padding: 0;
3239
}
3240