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_duration: 0.3s;
13
$material_timing_function: cubic-bezier(0, 0, 0.2, 1);
14
// FIXME: color's transition is too slow
15
$material_transition: all $material_duration $material_timing_function, color 0;
16
* {
18
padding: 0;
19
background-clip: padding-box;
20
-GtkToolButton-icon-spacing: 4;
22
-GtkTextView-error-underline-color: $error_color;
23
// The size for scrollbars. The slider is 2px smaller, but we keep it
25
// up so that the whole area is sensitive to button presses for the
26
// slider. The stepper button is larger in both directions, the slider
27
// only in the width
28
-GtkScrolledWindow-scrollbar-spacing: 0;
30
-GtkToolItemGroup-expander-size: 11;
32
-GtkTreeView-expander-size: 11;
33
-GtkTreeView-horizontal-separator: 4;
35
-GtkWidget-text-handle-width: 24;
37
-GtkWidget-text-handle-height: 24;
38
-GtkDialog-button-spacing: 4;
40
-GtkDialog-action-area-border: 0;
41
// We use the outline properties to signal the focus properties
43
// to the adwaita engine: using real CSS properties is faster,
44
// and we don't use any outlines for now.
45
outline-style: solid;
47
outline-width: 2px;
48
outline-color: $track_color;
49
outline-offset: -4px;
50
-gtk-outline-radius: 2px;
51
-gtk-secondary-caret-color: $selected_bg_color;
53
}
54
/***************
57
* Base States *
58
***************/
59
.background {
60
background-color: $bg_color;
61
color: $fg_color;
62
}
63
/*
65
These wildcard seems unavoidable, need to investigate.
66
Wildcards are bad and troublesome, use them with care,
67
or better, just don't.
68
Everytime a wildcard is used a kitten dies, painfully.
69
*/
70
*:disabled { -gtk-icon-effect: dim; }
72
.gtkstyle-fallback {
74
background-color: $bg_color;
75
color: $fg_color;
76
&:hover {
78
background-color: darken($bg_color, 5%);
79
color: $fg_color;
80
}
81
&:active {
83
background-color: darken($bg_color, 10%);
84
color: $fg_color;
85
}
86
&:disabled {
88
background-color: $bg_color;
89
color: $insensitive_fg_color;
90
}
91
&:selected {
93
background-color: $selected_bg_color;
94
color: $selected_fg_color;
95
}
96
}
97
.view,
99
%view {
100
@extend row.activatable;
101
background-color: $base_color;
103
color: $fg_color;
104
&:hover, &:active, &:selected { border-radius: 2px; }
106
&:disabled {
108
// background-color: $secondary_base_color;
109
color: $insensitive_fg_color;
110
}
111
&:selected { @extend %selected_items; }
113
}
114
.view,
116
textview {
117
text {
118
// @extend %view;
119
background-color: $base_color;
121
color: $fg_color;
122
&:disabled {
124
// background-color: $secondary_base_color;
125
color: $insensitive_fg_color;
126
}
127
selection { @extend %selected_items; }
129
}
130
}
131
textview border {
133
background-color: $secondary_base_color;
134
background-image: image($borders_color); // HACK: the border node just draws background so, using a background-image to draw the border
135
background-repeat: no-repeat;
136
color: $tertiary_fg_color;
137
&.bottom {
139
background-size: 100% 1px;
140
background-position: top;
141
}
142
&.top {
144
background-size: 100% 1px;
145
background-position: bottom;
146
}
147
&.left {
149
background-size: 1px 100%;
150
background-position: right;
151
}
152
&.right {
154
background-size: 1px 100%;
155
background-position: left;
156
}
157
}
158
iconview { @extend .view; }
160
.rubberband,
162
rubberband {
163
border: 1px solid $secondary_selected_bg_color;
164
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
165
}
166
flowbox {
168
rubberband { @extend rubberband; }
169
flowboxchild {
171
outline-offset: -2px;
172
padding: 4px;
173
border-radius: 2px;
174
&:selected { @extend %selected_items; }
176
}
177
}
178
label {
180
&.separator {
181
@extend .dim-label;
182
color: $fg_color;
184
}
185
row:selected &,
187
&:selected { @extend %nobg_selected_items; }
188
selection {
190
background-color: $selected_bg_color;
191
color: $selected_fg_color;
192
}
193
&:disabled {
195
color: $insensitive_fg_color;
196
selection { @extend %selected_items:disabled; }
198
}
199
}
200
.dim-label { opacity: $hint_opacity; }
202
assistant {
204
.sidebar {
205
padding: 4px 0;
206
// background-color: $base_color;
207
// border-top: 1px solid $borders_color;
208
}
209
// &.csd .sidebar { border-top-style: none; }
211
.sidebar label {
213
min-height: $medium_size;
214
padding: 0 12px;
215
color: $tertiary_fg_color;
216
font-weight: 500;
217
&.highlight { color: $fg_color; }
219
}
220
}
221
%osd, .osd { opacity: $higher_opacity; }
223
/*********************
226
* Spinner Animation *
227
*********************/
228
@keyframes spin {
229
to { -gtk-icon-transform: rotate(1turn); }
230
}
231
@keyframes spin_colors {
233
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
234
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
235
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
236
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
237
}
238
spinner {
240
background: none;
241
opacity: 0; // non spinning spinner makes no sense
242
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
243
&:checked {
245
opacity: 1;
246
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
247
&:disabled { opacity: $disabled_opacity; }
249
}
250
}
251
/****************
254
* Text Entries *
255
****************/
256
%entry,
257
entry {
258
%entry_basic, & {
259
min-height: $medium_size;
260
padding: 0 8px;
261
border-radius: 2px;
262
@include entry(normal);
264
&:focus { @include entry(focus); }
266
&:disabled { @include entry(insensitive); }
268
&.flat {
270
border-radius: 0;
271
@include entry(flat-normal);
273
&:focus { @include entry(flat-focus); }
275
&:disabled { @include entry(flat-insensitive); }
277
}
278
image { // icons inside the entry
280
color: gtkalpha(currentColor, $enabled_opacity);
281
&:hover, &:active { color: currentColor; }
283
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
285
&.left { padding-left: 2px; padding-right: 6px; }
287
&.right { padding-left: 6px; padding-right: 2px; }
289
}
290
undershoot {
292
&.left { @include undershoot(left); }
293
&.right { @include undershoot(right); }
295
}
296
selection { @extend %selected_items; }
298
// entry error and warning style
300
@each $e_type, $e_color in (error, $error_color),
301
(warning, $warning_color) {
302
&.#{$e_type} {
303
@include entry(normal, $e_color);
304
&:focus { @include entry(focus, $e_color); }
306
&:disabled { @include entry(insensitive, $e_color); }
308
&.flat {
310
@include entry(flat-normal, $e_color);
311
&:focus { @include entry(flat-focus, $e_color); }
313
&:disabled { @include entry(flat-insensitive, $e_color); }
315
}
316
}
317
}
318
&:drop(active) {
320
// box-shadow: inset 0 0 0 2px $accent_bg_color;
321
}
322
.osd & {
324
}
325
}
326
progress {
328
margin: 2px -6px;
329
border-style: none none solid;
330
border-width: 2px;
331
border-color: $selected_bg_color;
332
// border-radius: 0;
333
// box-shadow: none;
334
background-color: transparent;
335
// background-image: none;
336
}
337
// linked entries
339
.linked:not(.vertical) > &:not(.flat) { @extend %linked; }
340
// Vertically linked entries
342
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
343
}
344
treeview acceleditor > label { background-color: $selected_bg_color; }
346
treeview entry {
348
&.flat, & {
349
min-height: 0;
350
padding: 2px;
351
border-radius: 0;
352
box-shadow: none;
353
background-color: $base_color;
354
&, &:focus { border-image: none; }
356
}
357
}
358
/***********
361
* Buttons *
362
***********/
363
// stuff for .needs-attention
364
@keyframes needs_attention {
365
from {
366
background-image: -gtk-gradient(radial,
367
center center, 0,
368
center center, 0.001,
369
to($accent_bg_color),
370
to(transparent));
371
}
372
to {
374
background-image: -gtk-gradient(radial,
375
center center, 0,
376
center center, 0.5,
377
to($accent_bg_color),
378
to(transparent));
379
}
380
}
381
%button,
383
button {
384
@at-root %button_basic, & {
385
min-height: 24px;
386
min-width: 16px;
387
padding: 6px 10px;
388
border-radius: 2px;
389
font-weight: 500;
390
@include button(normal);
392
&:hover { @include button(hover); }
394
&:active { @include button(active); }
396
&:disabled { @include button(insensitive); }
398
&:checked { @include button(checked); }
400
&:checked:disabled { @include button(checked-insensitive); }
402
&.flat {
404
@include button(flat-normal);
405
&:hover { @include button(flat-hover); }
407
&:active { @include button(flat-active); }
409
&:disabled { @include button(flat-insensitive); }
411
&:checked { @include button(flat-checked); }
413
&:checked:disabled { @include button(flat-checked-insensitive); }
415
}
416
&.image-button {
418
min-width: 24px;
419
padding: 6px;
420
-gtk-outline-radius: 100px;
421
border-radius: 100px;
422
}
423
&.text-button {
425
padding-left: 16px;
426
padding-right: 16px;
427
}
428
&.text-button.image-button {
430
padding-left: 10px;
431
padding-right: 10px;
432
-gtk-outline-radius: 2px;
433
border-radius: 2px;
434
label {
436
&:last-child { padding-left: 2px; padding-right: 6px; }
437
&:first-child { padding-left: 6px; padding-right: 2px; }
438
}
439
}
440
.linked > & { @extend %linked; }
442
.linked.vertical > & { @extend %linked_vertical; }
444
.linked > &.flat,
446
.linked.vertical > &.flat {
447
border-radius: 2px;
448
&.image-button {
450
-gtk-outline-radius: 100px;
451
border-radius: 100px;
452
}
453
&.text-button.image-button {
455
-gtk-outline-radius: 2px;
456
border-radius: 2px;
457
}
458
}
459
&:drop(active) {
461
// box-shadow: inset 0 0 0 2px $accent_bg_color;
462
}
463
}
464
@at-root %button_selected, row:selected & {
466
&:disabled { color: $insensitive_secondary_selected_fg_color; }
467
&.flat {
469
color: $secondary_selected_fg_color;
470
&:hover, &:active { color: $selected_fg_color; }
472
&:disabled { color: $insensitive_secondary_selected_fg_color; }
474
}
475
}
476
separator {
478
min-width: 0;
479
min-height: 0;
480
background: transparent;
481
}
482
// big standalone buttons like in Documents pager
484
&.osd {
485
padding: 12px 16px;
486
&.image-button { padding: 12px; }
488
&:disabled { opacity: 0; }
490
}
491
//overlay / OSD style
493
@at-root %osd_button,
494
.osd & {
495
}
496
// Suggested and Destructive Action buttons
498
@each $b_type, $b_color in (suggested-action, $suggested_color),
499
(destructive-action, $destructive_color) {
500
&.#{$b_type} {
501
background-color: $b_color;
502
color: $selected_fg_color;
503
// @include button(normal, $b_color, white);
505
// &:hover { @include button(hover, $b_color, white); }
507
// &:active, &:checked { @include button(active, $b_color, white); }
509
&:disabled { @include button(insensitive, $b_color, white); }
511
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
513
&.flat {
515
background-color: transparent;
516
color: $b_color;
517
// @include button(flat-normal, $b_color, white);
519
// &:hover { @include button(flat-hover, $b_color, white); }
521
// &:active, &:checked { @include button(flat-active, $b_color, white); }
523
&:disabled { @include button(flat-insensitive, $b_color, white); }
525
}
526
.osd & {
528
}
529
}
530
}
531
.stack-switcher > & {
533
// to position the needs attention dot, padding is added to the button
534
// child, a label needs just lateral padding while an icon needs vertical
535
// padding added too.
536
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
538
> label {
540
padding-left: 6px; // label padding
541
padding-right: 6px; //
542
}
543
> image {
545
padding-left: 6px; // image padding
546
padding-right: 6px; //
547
padding-top: 3px; //
548
padding-bottom: 3px; //
549
}
550
&.text-button {
552
// compensate text-button paddings
553
padding-left: 10px;
554
padding-right: 10px;
555
}
556
&.image-button {
558
// we want image buttons to have a 1:1 aspect ratio, so compensation
559
// of the padding added to the GtkImage is needed
560
padding-left: 4px;
561
padding-right: 4px;
562
}
563
&.needs-attention {
565
> label,
566
> image { @extend %needs_attention; }
567
&:checked {
569
> label,
570
> image {
571
animation: none;
572
background-image: none;
573
}
574
}
575
}
576
}
577
// inline-toolbar buttons
579
.inline-toolbar & {
580
@extend %button_basic.flat;
581
&:not(.text-button) { @extend %button_basic.image-button; }
583
}
584
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
586
}
587
%needs_attention {
589
animation: needs_attention $material_duration $material_timing_function forwards;
590
background-repeat: no-repeat;
591
background-position: right 3px;
592
background-size: 6px 6px;
593
&:dir(rtl) { background-position: left 3px; }
595
}
596
// all the following is for the +|- buttons on inline toolbars, that way
598
// should really be deprecated...
599
.inline-toolbar toolbutton > button { // redefining the button look is
600
// needed since those are flat...
601
}
602
// More inline toolbar buttons
604
toolbar.inline-toolbar toolbutton {
605
// > button.flat { @extend %linked_middle; }
606
// &:first-child > button.flat { @extend %linked:first-child; }
608
// &:last-child > button.flat { @extend %linked:last-child; }
610
// &:only-child > button.flat { @extend %linked:only-child; }
612
}
613
%linked_middle {
615
border-radius: 0;
616
}
617
%linked {
619
-gtk-outline-radius: 2px;
620
@extend %linked_middle;
622
&:first-child {
624
border-top-left-radius: 2px;
625
border-bottom-left-radius: 2px;
626
}
627
&:last-child {
629
border-top-right-radius: 2px;
630
border-bottom-right-radius: 2px;
631
}
632
&:only-child {
634
border-radius: 2px;
635
}
636
}
637
%linked_vertical_middle {
639
border-radius: 0;
640
}
641
%linked_vertical{
643
-gtk-outline-radius: 2px;
644
@extend %linked_vertical_middle;
646
&:first-child {
648
border-top-left-radius: 2px;
649
border-top-right-radius: 2px;
650
}
651
&:last-child {
653
border-bottom-left-radius: 2px;
654
border-bottom-right-radius: 2px;
655
}
656
&:only-child {
658
border-radius: 2px;
659
}
660
}
661
/* menu buttons */
663
modelbutton.flat,
664
.menuitem.button.flat {
665
min-height: $menuitem_size;
666
padding-left: 8px;
667
padding-right: 8px;
668
border-radius: 2px;
669
color: inherit;
670
@extend %button_basic.flat;
672
&:selected { @extend %selected_items; }
674
check,
676
radio {
677
&, &:hover { background-image: none; }
678
&:active { animation: none; }
680
}
681
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function; }
683
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration $material_timing_function; }
685
// FIXME: remove the following when the checks/radios rewrite lands
687
check:last-child,
688
radio:last-child { margin-left: 8px; }
689
check:first-child,
691
radio:first-child { margin-right: 8px; }
692
}
693
modelbutton.flat arrow {
695
background: none;
696
&:hover { background: none; }
698
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
700
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
702
}
703
button.color {
705
min-height: $small_size;
706
min-width: $small_size;
707
padding: $container_padding;
708
colorswatch:only-child {
710
// &, overlay { border-radius: 0; }
711
}
712
}
713
/*********
716
* Links *
717
*********/
718
*:link {
719
&, &:hover, &:active { color: $link_color; }
720
&:visited {
722
&, &:hover, &:active { color: $link_visited_color; }
723
}
724
@at-root %link_selected,
726
&:selected,
727
*:selected & { color: $selected_fg_color; }
728
}
729
button:link,
731
button:visited {
732
@extend *:link;
733
> label { text-decoration-line: underline; }
735
}
736
/*****************
738
* GtkSpinButton *
739
*****************/
740
spinbutton {
741
&:not(.vertical) {
742
// in this horizontal configuration, the whole spinbutton
743
// behaves as the entry, so we extend the entry styling
744
// and nuke the style on the internal entry
745
@extend %entry;
746
padding: 0;
748
%spinbutton_entry,
750
entry {
751
min-width: $large_size - 16px;
752
// reset all the other props since the spinbutton node is styled here
753
margin: 0;
754
border-image: none;
755
border-radius: 0;
756
box-shadow: none;
757
background-color: transparent;
758
}
759
button {
761
min-height: $small_size;
762
min-width: $small_size;
763
// margin: $container_padding;
764
padding: 0;
765
border: solid $container_padding transparent;
766
@extend %button_basic.flat;
768
@extend %button_basic.image-button;
770
&.up { margin-left: -$container_padding / 2; }
772
&.down { margin-right: -$container_padding / 2; }
774
}
775
}
776
// OSD horizontal
778
.osd &:not(.vertical) {
779
button {
780
}
781
}
782
// Vertical
784
&.vertical {
785
// in the vertical configuration, we treat the spinbutton
786
// as a box, and tweak the style of the entry in the middle
787
// so that it's linked
788
// FIXME: this should not be set at all, but otherwise it gets the wrong
790
// color
791
&:disabled { color: $insensitive_fg_color; }
792
&:drop(active) {
794
box-shadow: none;
795
}
796
entry {
798
min-height: $medium_size;
799
min-width: $large_size;
800
padding: 0;
801
}
802
button {
804
min-height: $medium_size;
805
min-width: $large_size;
806
padding: 0;
807
@extend %button_basic.flat;
809
&.up { border-radius: 2px 2px 0 0; }
811
&.down { border-radius: 0 0 2px 2px; }
813
}
814
}
815
// OSD vertical
817
.osd &.vertical button:first-child {
818
}
819
// Misc
821
treeview &:not(.vertical) {
822
min-height: 0;
823
border-style: none;
824
border-radius: 0;
825
entry {
827
min-height: 0;
828
padding: 1px 2px;
829
}
830
}
831
}
832
/**************
835
* ComboBoxes *
836
**************/
837
combobox {
838
arrow {
839
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
840
min-height: 16px;
841
min-width: 16px;
842
}
843
menu,
845
.menu {
846
padding: 2px 0;
847
menuitem {
849
min-height: $medium_size;
850
padding: 0 10px;
851
}
852
}
853
&.linked {
855
button:nth-child(2) {
856
&:dir(ltr) { @extend %linked:last-child; }
857
&:dir(rtl) { @extend %linked:first-child; }
858
}
859
}
860
&:drop(active) { // FIXME: untested
862
box-shadow: none;
863
// button.combo { @extend %button_basic:drop(active); }
865
}
866
}
867
.linked > combobox > box > button.combo {
869
// the combo is a composite widget so the way we do button linking doesn't
870
// work, special case needed. See
871
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
872
&:dir(ltr),
874
&:dir(rtl) { @extend %linked_middle; } // specificity bump
875
}
876
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
878
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
879
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
880
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
882
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
883
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
884
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
885
/************
888
* Toolbars *
889
************/
890
toolbar {
891
-GtkWidget-window-dragging: true;
892
padding: $container_padding / 2;
893
background-color: $bg_color;
894
// on OSD
896
.osd & { background-color: transparent; }
897
// stand-alone OSD toolbars
899
&.osd {
900
transition: box-shadow $material_duration $material_timing_function;
901
padding: $container_padding;
902
border-radius: 2px;
903
box-shadow: $z-depth-2;
904
background-color: $base_color;
905
&:backdrop { box-shadow: $z-depth-1; }
907
&.left,
909
&.right,
910
&.top,
911
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
912
button { @extend %button_basic.flat; }
914
}
915
// toolbar separators
917
&.horizontal separator { margin: $container_padding / 2; }
918
&.vertical separator { margin: $container_padding / 2; }
919
&:not(.inline-toolbar):not(.osd) {
921
scale,
922
entry,
923
spinbutton,
924
button { margin: $container_padding / 2; }
925
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
927
}
928
}
929
//searchbar, location-bar & inline-toolbar
931
.inline-toolbar {
932
padding: $container_padding;
933
border-style: solid;
934
border-width: 0 1px 1px;
935
border-color: $borders_color;
936
background-color: $secondary_base_color;
937
}
938
searchbar,
940
.location-bar {
941
padding: $container_padding;
942
border-style: solid;
943
border-width: 0 0 1px;
944
border-color: $borders_color;
945
background-color: $dark_color;
946
background-clip: border-box;
947
}
948
/***************
951
* Header bars *
952
***************/
953
%titlebar,
954
headerbar {
955
min-height: $large_size;
956
padding: 0 $container_padding;
957
border-width: 0 0 1px;
958
border-style: solid;
959
border-color: $borders_color;
960
box-shadow: inset 0 1px $highlight_color;
961
background-color: $dark_color;
962
background-clip: border-box;
963
&:backdrop {
965
// background-color: $dark_color;
966
}
967
.title {
969
padding-left: 12px;
970
padding-right: 12px;
971
font-weight: bold;
972
}
973
.subtitle {
975
padding-left: 12px;
976
padding-right: 12px;
977
font-size: smaller;
978
@extend .dim-label;
980
}
981
button:not(.suggested-action):not(.destructive-action) {
983
@extend %button_basic.flat;
984
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
986
$selected_bg_color 0%,
987
transparent 0%)
988
0 0 0 / 0 0 0px;
989
&:checked {
991
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
992
$selected_bg_color 100%,
993
transparent 0%)
994
0 0 2 / 0 0 2px;
995
background-color: transparent;
996
color: $fg_color;
997
&:disabled {
999
background-color: transparent;
1000
color: $insensitive_fg_color;
1001
> label { color: inherit; }
1003
}
1004
}
1005
}
1006
&.selection-mode {
1008
animation: header_ripple_effect $material_duration $material_timing_function forwards;
1009
box-shadow: inset 0 1px $secondary_highlight_color;
1010
// background-color: $selected_bg_color;
1011
color: $selected_fg_color;
1012
&:backdrop {
1014
}
1015
.subtitle:link { @extend *:link:selected; }
1017
button:not(.suggested-action):not(.destructive-action) {
1019
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
1020
$selected_fg_color 0%,
1021
transparent 0%)
1022
0 0 0 / 0 0 0px;
1023
// color: $secondary_selected_fg_color;
1024
&, &:hover, &:active, &:checked { color: $selected_fg_color; }
1026
&:disabled {
1028
color: $insensitive_selected_fg_color;
1029
> label { color: inherit; }
1031
}
1032
&:checked {
1034
border-image: radial-gradient(circle farthest-corner at center calc(100% - 1px),
1035
$selected_fg_color 100%,
1036
transparent 0%)
1037
0 0 2 / 0 0 2px;
1038
color: $selected_fg_color;
1039
&:disabled {
1041
color: $insensitive_selected_fg_color;
1042
> label { color: inherit; }
1044
}
1045
}
1046
}
1047
.selection-menu {
1049
padding-left: 16px;
1050
padding-right: 16px;
1051
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1053
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1055
}
1056
}
1057
.tiled &,
1059
.maximized & {
1060
border-radius: 0; // squared corners when the window is max'd or tiled
1061
box-shadow: none;
1062
}
1063
&.default-decoration {
1065
min-height: $small_size;
1066
padding: $container_padding;
1067
border-width: 0;
1068
button.titlebutton {
1070
min-height: $small_size;
1071
min-width: $small_size;
1072
margin: 0;
1073
padding: 0;
1074
}
1075
}
1076
}
1077
headerbar {
1079
// add vertical margins to headerbar entries, buttons and separators to avoid them spanning the whole height
1080
entry,
1081
spinbutton,
1082
// separator,
1083
button {
1084
margin-top: $container_padding;
1085
margin-bottom: $container_padding;
1086
}
1087
}
1088
.titlebar {
1090
border-top-left-radius: 2px;
1091
border-top-right-radius: 2px;
1092
}
1093
headerbar {
1095
separator:first-child + &, // tackles the paned container case
1096
&:first-child {
1097
border-top-left-radius: 2px;
1098
.tiled &,
1100
.maximized & { border-radius: 0; }
1101
}
1102
&:last-child {
1104
border-top-right-radius: 2px;
1105
.tiled &,
1107
.maximized & { border-radius: 0; }
1108
}
1109
}
1110
.titlebar:not(headerbar) {
1112
window.csd > & {
1113
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1114
padding: 0;
1115
background-color: transparent;
1116
background-image: none;
1117
border-style: none;
1118
box-shadow: none;
1119
}
1120
> separator {
1122
background-color: $dark_color;
1123
background-image: image($borders_color);
1124
}
1125
@extend %titlebar;
1127
}
1128
/************
1131
* Pathbars *
1132
************/
1133
.path-bar button {
1134
&.text-button, &.image-button, & {
1135
padding-left: 6px;
1136
padding-right: 6px;
1137
}
1138
&.text-button.image-button, & {
1140
// label:last-child { padding-left: 2px; padding-right: 8px; }
1141
// label:first-child { padding-left: 8px; padding-right: 2px; }
1142
}
1143
image {
1145
padding-left: 4px;
1146
padding-right: 4px;
1147
}
1148
&.slider-button {
1150
padding-left: 0;
1151
padding-right: 0;
1152
}
1153
}
1154
/**************
1157
* Tree Views *
1158
**************/
1159
treeview.view {
1160
-GtkTreeView-grid-line-width: 1;
1161
-GtkTreeView-grid-line-pattern: '';
1162
-GtkTreeView-tree-line-width: 1;
1163
-GtkTreeView-tree-line-pattern: '';
1164
-GtkTreeView-expander-size: 16;
1165
border-left-color: $track_color; // this is actually the tree lines color,
1167
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1168
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1170
&:hover, &:active, &:selected { border-radius: 0; }
1172
&.separator {
1174
min-height: 1px + 2px * 2;
1175
color: $borders_color;
1176
}
1177
&:drop(active) {
1179
border-style: solid none;
1180
border-width: 1px;
1181
border-color: $accent_bg_color;
1182
&.after { border-top-style: none; }
1184
&.before { border-bottom-style: none; }
1186
}
1187
&.expander {
1189
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1190
-gtk-icon-transform: rotate(-90deg);
1191
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1193
&:checked { -gtk-icon-transform: unset; }
1195
color: $secondary_fg_color;
1197
&:hover, &:active { color: $fg_color; }
1199
&:disabled { color: $insensitive_secondary_fg_color; }
1201
&:selected {
1203
color: $secondary_selected_fg_color;
1204
&:hover, &:active { color: $selected_fg_color; }
1206
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1208
}
1209
}
1210
&.progressbar { // progress bar in treeviews
1212
border-style: none none solid;
1213
border-width: $bar_size;
1214
border-color: $selected_bg_color;
1215
background-color: transparent;
1216
background-image: none;
1217
&:selected { border-color: currentColor; }
1219
}
1220
&.trough { // progress bar trough in treeviews
1222
border-style: none none solid;
1223
border-width: $bar_size;
1224
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1225
background-color: transparent;
1226
background-image: none;
1227
&:selected { border-color: $track_color; }
1229
}
1230
header {
1232
button {
1233
@extend row.activatable;
1234
padding: 2px 6px;
1236
border-style: none solid solid none;
1237
border-width: 1px;
1238
border-color: $borders_color;
1239
border-radius: 0;
1240
background-clip: border-box;
1241
&, &:hover, &:active { box-shadow: none; }
1243
&, &:disabled { background-color: $base_color; }
1245
&:last-child { border-right-style: none; }
1247
}
1248
}
1249
button.dnd,
1251
header.button.dnd { // for treeview-like derive widgets
1252
padding: 2px 6px;
1253
border-style: none solid solid;
1254
border-width: 1px;
1255
border-color: $borders_color;
1256
border-radius: 0;
1257
box-shadow: none;
1258
background-color: $base_color;
1259
background-clip: border-box;
1260
color: $selected_bg_color;
1261
}
1262
}
1263
/*********
1266
* Menus *
1267
*********/
1268
menubar,
1269
.menubar {
1270
-GtkWidget-window-dragging: true;
1271
padding: 0;
1272
box-shadow: inset 0 -1px $borders_color;
1273
background-color: $dark_color;
1274
> menuitem {
1276
transition: $material_transition;
1277
min-height: 20px;
1278
padding: 4px 8px;
1279
color: $secondary_fg_color;
1280
&:hover { //Seems like it :hover even with keyboard focus
1282
box-shadow: inset 0 -2px $selected_bg_color;
1283
color: $fg_color;
1284
}
1285
&:disabled { color: $insensitive_secondary_fg_color; }
1287
}
1288
}
1289
menu,
1291
.menu {
1292
margin: 4px 0;
1293
padding: 4px 0;
1294
background-color: $base_color;
1295
border: 1px solid $borders_color; // adds borders in a non composited env
1296
.csd & {
1298
border: none; // axes borders in a composited env
1299
border-radius: 2px;
1300
}
1301
menuitem {
1303
min-height: 20px;
1304
min-width: 40px;
1305
padding: 4px 8px;
1306
font: initial;
1307
text-shadow: none;
1308
&:hover {
1310
// background-color: gtkalpha(currentColor, $lower_opacity / 2);
1311
background-color: $selected_bg_color;
1312
color: $selected_fg_color;
1313
}
1314
&:disabled { color: $insensitive_fg_color; }
1316
// submenu indicators
1318
arrow {
1319
min-height: 16px;
1320
min-width: 16px;
1321
&:dir(ltr) {
1323
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1324
margin-left: 8px;
1325
}
1326
&:dir(rtl) {
1328
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1329
margin-right: 8px;
1330
}
1331
}
1332
}
1333
// overflow arrows
1335
> arrow {
1336
min-height: 16px;
1337
min-width: 16px;
1338
padding: 4px;
1339
border-radius: 0;
1340
background-color: $base_color;
1341
color: $secondary_fg_color;
1342
&.top {
1344
margin-top: -4px;
1345
border-bottom: 1px solid $borders_color;
1346
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1347
}
1348
&.bottom {
1350
margin-bottom: -4px;
1351
border-top: 1px solid $borders_color;
1352
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1353
}
1354
&:hover {
1356
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1357
color: $fg_color;
1358
}
1359
&:disabled {
1361
border-color: transparent;
1362
background-color: transparent;
1363
color: transparent;
1364
// color: $insensitive_secondary_fg_color;
1365
}
1366
}
1367
separator { margin: 4px 0; }
1369
}
1370
menuitem {
1372
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1373
check,
1375
radio {
1376
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1377
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1378
}
1379
}
1380
.csd.popup { border-radius: 2px; }
1382
/***************
1385
* Popovers *
1386
***************/
1387
popover.background {
1388
transition: box-shadow $material_duration $material_timing_function;
1389
padding: 0;
1390
border-radius: 2px + 1px;
1391
box-shadow: $z-depth-2;
1392
background-color: $secondary_base_color;
1393
&:backdrop { box-shadow: $z-depth-1; }
1395
&, .csd & {
1397
border-style: solid;
1398
border-width: 1px;
1399
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1400
}
1401
> list,
1403
> .view,
1404
> toolbar {
1405
border-style: none;
1406
box-shadow: none;
1407
background-color: transparent;
1408
}
1409
&, .csd & {
1411
&.touch-selection,
1412
&.magnifier,
1413
&.osd { @extend %osd; }
1414
}
1415
separator { margin: 4px 0; }
1417
list separator { margin: 0; }
1419
checkbutton,
1421
radiobutton { @extend modelbutton.flat; }
1422
}
1423
/*************
1425
* Notebooks *
1426
*************/
1427
notebook {
1428
> header {
1429
border-width: 1px;
1430
border-color: $borders_color;
1431
background-color: $dark_color;
1432
background-clip: border-box;
1433
&.top {
1435
border-bottom-style: solid;
1436
> tabs {
1437
> tab:not(.reorderable-page) {
1438
margin-bottom: -1px;
1439
&:hover { box-shadow: inset 0 -2px $track_color; }
1441
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1443
}
1444
}
1445
}
1446
&.bottom {
1448
border-top-style: solid;
1449
> tabs {
1450
> tab:not(.reorderable-page) {
1451
margin-top: -1px;
1452
&:hover { box-shadow: inset 0 2px $track_color; }
1454
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1456
}
1457
}
1458
}
1459
&.left {
1461
border-right-style: solid;
1462
> tabs {
1463
> tab:not(.reorderable-page) {
1464
margin-right: -1px;
1465
&:hover { box-shadow: inset -2px 0 $track_color; }
1467
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1469
}
1470
}
1471
}
1472
&.right {
1474
border-left-style: solid;
1475
> tabs {
1476
> tab:not(.reorderable-page) {
1477
margin-left: -1px;
1478
&:hover { box-shadow: inset 2px 0 $track_color; }
1480
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1482
}
1483
}
1484
}
1485
&.top > tabs > arrow {
1487
@extend %notebook_vert_arrows;
1488
border-top-style: none;
1490
}
1491
&.bottom > tabs > arrow {
1493
@extend %notebook_vert_arrows;
1494
border-bottom-style: none;
1496
}
1497
@at-root %notebook_vert_arrows {
1499
padding-left: 4px;
1500
padding-right: 4px;
1501
&.down {
1503
margin-left: -8px;
1504
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1505
}
1506
&.up {
1508
margin-right: -8px;
1509
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1510
}
1511
}
1512
&.left > tabs > arrow {
1514
@extend %notebook_horz_arrows;
1515
border-left-style: none;
1517
}
1518
&.right > tabs > arrow {
1520
@extend %notebook_horz_arrows;
1521
border-right-style: none;
1523
}
1524
@at-root %notebook_horz_arrows {
1526
padding-top: 4px;
1527
padding-bottom: 4px;
1528
&.down {
1530
margin-top: -8px;
1531
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1532
}
1533
&.up {
1535
margin-bottom: -8px;
1536
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1537
}
1538
}
1539
> tabs > arrow {
1541
@extend %button_basic.flat;
1542
min-height: 16px;
1544
min-width: 16px;
1545
border-radius: 0;
1546
}
1547
tab {
1549
transition: $material_transition;
1550
min-height: 24px;
1551
min-width: 24px;
1552
padding: 6px 12px;
1553
outline-offset: -6px;
1555
border-width: 1px; // for reorderable tabs
1557
border-color: transparent; //
1558
color: $secondary_fg_color;
1560
font-weight: 500;
1561
&:hover {
1563
color: $fg_color;
1564
&.reorderable-page {
1566
border-color: $borders_color;
1567
background-color: $bg_color;
1568
}
1569
}
1570
&:disabled { color: $insensitive_secondary_fg_color; }
1572
&:checked {
1574
color: $fg_color;
1575
&:disabled { color: $insensitive_fg_color; }
1577
&:not(.reorderable-page) { animation: tab_ripple_effect $material_duration * 2 ease-in-out; }
1579
&.reorderable-page {
1581
border-color: $borders_color;
1582
background-color: $light_color;
1583
}
1584
}
1585
// colors the button like the label, overridden otherwise
1587
button.flat {
1588
// FIXME: generalize .small-button?
1589
min-width: $small_size;
1590
min-height: $small_size;
1591
padding: 0;
1592
@extend %button_basic.image-button;
1594
&:last-child {
1596
margin-left: 6px;
1597
margin-right: -6px;
1598
}
1599
&:first-child {
1601
margin-left: -6px;
1602
margin-right: 6px;
1603
}
1604
}
1605
}
1606
&.top,
1608
&.bottom {
1609
tabs {
1610
padding-left: 8px;
1611
padding-right: 8px;
1612
&:not(:only-child) {
1614
&:first-child { margin-left: 0; }
1615
&:last-child { margin-right: 0; }
1616
}
1617
tab {
1619
&.reorderable-page {
1620
margin: 0 -1px;
1621
border-style: none solid;
1622
}
1623
}
1624
}
1625
}
1626
&.left,
1628
&.right {
1629
tabs {
1630
padding-top: 8px;
1631
padding-bottom: 8px;
1632
&:not(:only-child) {
1634
&:first-child { margin-top: 0; }
1635
&:last-child { margin-bottom: 0; }
1636
}
1637
tab {
1639
&.reorderable-page {
1640
margin: -1px 0;
1641
border-style: solid none;
1642
}
1643
}
1644
}
1645
}
1646
}
1647
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1649
background-color: $base_color;
1650
entry,
1652
spinbutton:not(.vertical) { @extend %entry.flat; }
1653
revealer entry,
1655
revealer spinbutton:not(.vertical) { @extend %entry; }
1656
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1658
}
1659
}
1660
/**************
1663
* Scrollbars *
1664
**************/
1665
scrollbar {
1666
$_slider_min_length: 24px;
1667
// disable steppers
1669
@at-root * {
1670
-GtkScrollbar-has-backward-stepper: false;
1671
-GtkScrollbar-has-forward-stepper: false;
1672
}
1673
transition: $material_transition;
1675
background-color: $base_color;
1676
background-clip: $extra_background_clip;
1677
// scrollbar border
1679
&.top { border-bottom: 1px solid $borders_color; }
1680
&.bottom { border-top: 1px solid $borders_color; }
1681
&.left { border-right: 1px solid $borders_color; }
1682
&.right { border-left: 1px solid $borders_color; }
1683
// slider
1685
slider {
1686
transition: $material_transition, margin 0, border-width 0;
1687
min-width: 8px;
1688
min-height: 8px;
1689
border: 4px solid transparent;
1690
border-radius: 100px;
1691
background-clip: padding-box;
1692
background-color: $tertiary_fg_color;
1693
&:hover { background-color: $secondary_fg_color; }
1695
&:active { background-color: $fg_color; }
1697
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1699
}
1700
&.fine-tune {
1702
slider {
1703
transition: $material_transition, margin 0, border-width 0, min-width 0, min-height 0;
1704
min-width: 4px;
1705
min-height: 4px;
1706
}
1707
&.horizontal slider { margin: 2px 0; }
1709
&.vertical slider { margin: 0 2px; }
1711
}
1712
&.overlay-indicator {
1714
&:not(.dragging):not(.hovering) {
1715
border-color: transparent;
1716
background-color: transparent;
1717
slider {
1719
min-width: 4px;
1720
min-height: 4px;
1721
margin: 2px;
1722
border: 2px solid scale-alpha($base_color, $lower_opacity);
1723
}
1724
button {
1726
min-width: 4px;
1727
min-height: 4px;
1728
margin: 2px;
1729
border: 2px solid scale-alpha($base_color, $lower_opacity);
1730
border-radius: 100px;
1731
background-color: $tertiary_fg_color;
1732
background-clip: padding-box;
1733
-gtk-icon-source: none;
1734
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1736
}
1737
&.horizontal {
1739
slider { min-width: $_slider_min_length; }
1740
button { min-width: 8px; }
1742
}
1743
&.vertical {
1745
slider { min-height: $_slider_min_length; }
1746
button { min-height: 8px; }
1748
}
1749
}
1750
&.dragging,
1752
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1753
}
1754
&.horizontal slider { min-width: $_slider_min_length; }
1756
&.vertical slider { min-height: $_slider_min_length; }
1758
// button styling
1760
button {
1761
@extend %button_basic.flat;
1762
min-width: 16px;
1763
min-height: 16px;
1764
padding: 0;
1765
border-radius: 0;
1766
}
1767
// button icons
1769
&.vertical {
1770
button {
1771
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1772
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1774
}
1775
}
1776
&.horizontal {
1778
button {
1779
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1780
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1782
}
1783
}
1784
}
1785
/**********
1788
* Switch *
1789
**********/
1790
switch {
1791
transition: $material_transition;
1792
margin: $container_padding 0;
1793
border: 4px solid transparent;
1794
border-radius: 100px;
1795
background-color: $track_color;
1796
background-clip: padding-box;
1797
font-size: 0;
1798
&:disabled { color: $insensitive_fg_color; }
1800
&:checked {
1802
background-color: scale-alpha($accent_bg_color, 0.5);
1803
&:disabled {
1805
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1806
color: $insensitive_fg_color;
1807
}
1808
}
1809
slider {
1811
@include entry(normal);
1812
transition: $material_transition, margin 0;
1814
min-width: $small_size;
1815
min-height: $small_size;
1816
margin: -4px 0 -4px -4px;
1817
-gtk-outline-radius: 100px;
1818
border-radius: 100px;
1819
background-image: -gtk-gradient(radial,
1820
center center, 0,
1821
center center, 0.5,
1822
to(transparent),
1823
to(transparent));
1824
}
1825
&:hover slider { @include entry(focus); }
1827
&:disabled slider { @include entry(insensitive); }
1829
&:checked slider {
1831
transition: $material_transition, margin 0, background-image 0;
1832
animation: needs_attention $material_duration $material_timing_function forwards;
1833
margin: -4px -4px -4px 0;
1834
// background-color: $accent_bg_color;
1835
color: $selected_fg_color;
1836
}
1837
&:checked:disabled slider { animation: none; }
1839
row:selected & {
1841
}
1842
}
1843
/*************************
1846
* Check and Radio items *
1847
*************************/
1848
// draw regular check and radio items using our PNG assets
1849
// all assets are rendered from assets.svg. never add pngs directly
1850
//selection-mode
1852
@each $s,$as in ('','-selectionmode'),
1853
(':active', '-active-selectionmode'),
1854
(':disabled', '-insensitive-selectionmode'),
1855
(':checked', '-checked-selectionmode'),
1856
(':checked:active', '-checked-active-selectionmode'),
1857
(':disabled:checked', '-checked-insensitive-selectionmode') {
1858
.view.content-view.check#{$s}:not(list) {
1859
-gtk-icon-shadow: $z-depth-1;
1860
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
1861
url("assets/checkbox#{$as}@2.png"));
1862
margin: 8px;
1863
background-color: transparent;
1864
&:hover, &:active { -gtk-icon-shadow: $z-depth-2; }
1866
&:disabled { -gtk-icon-shadow: none; }
1868
}
1869
}
1870
checkbutton.text-button, radiobutton.text-button {
1872
// this is for a nice focus on check and radios text
1873
padding: 2px 0;
1874
outline-offset: 0;
1875
label:not(:only-child) {
1877
&:first-child { margin-left: 4px; }
1878
&:last-child { margin-right: 4px; }
1880
}
1881
}
1882
check,
1884
radio {
1885
min-height: 24px;
1886
min-width: 24px;
1887
-gtk-icon-source: none;
1888
margin: -12px -8px;
1890
padding: 12px;
1891
outline-offset: 4px;
1892
// border-radius: 100%;
1893
@extend %button_basic.flat;
1895
@extend %button_basic.image-button;
1897
color: gtkalpha(currentColor, $enabled_opacity);
1899
&:hover, &:active { color: currentColor; }
1901
&:checked, &:checked:disabled { background-color: transparent; }
1903
&:checked, &:indeterminate { color: $accent_bg_color; }
1905
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1907
&:only-child { margin: -12px; }
1909
.osd & {
1911
}
1912
menu menuitem & {
1914
transition: none;
1915
margin: -16px -16px; // this is a workaround for a menu check/radio size allocation issue
1916
&:not(:checked):not(:indeterminate):hover { color: gtkalpha(currentColor, $enabled_opacity); }
1918
&, &:hover, &:disabled {
1920
background-image: none;
1921
// color: inherit;
1922
// animation: none;
1923
}
1924
}
1925
}
1926
%check,
1928
check {
1929
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1930
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1931
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1933
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1934
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1936
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1937
}
1938
%radio,
1940
radio {
1941
border-image: -gtk-gradient(radial,
1942
center center, 0,
1943
center center, 0.001,
1944
to($accent_bg_color),
1945
to(transparent))
1946
24 / 24px;
1947
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1948
-gtk-recolor(url("assets/radio-unchecked-symbolic.png")));
1949
&:checked {
1951
border-image: -gtk-gradient(radial,
1952
center center, 0,
1953
center center, (10 / 48 / 2),
1954
to($accent_bg_color),
1955
to(transparent))
1956
24 / 24px;
1957
}
1958
&:checked:disabled {
1960
border-image: -gtk-gradient(radial,
1961
center center, 0,
1962
center center, (10 / 48 / 2),
1963
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1964
to(transparent))
1965
24 / 24px;
1966
}
1967
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1969
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1970
&:indeterminate:checked {
1972
border-image: -gtk-gradient(radial,
1973
center center, 0,
1974
center center, 0.001,
1975
to($accent_bg_color),
1976
to(transparent))
1977
24 / 24px;
1978
}
1979
}
1980
// let's animate things
1982
@keyframes check_check {
1983
from { -gtk-icon-transform: rotate(90deg); }
1984
to { -gtk-icon-transform: unset; }
1985
}
1986
@keyframes check_radio {
1988
from { -gtk-icon-transform: scale(0); }
1989
to { -gtk-icon-transform: unset; }
1990
}
1991
@keyframes check_indeterminate {
1993
from { -gtk-icon-transform: unset; }
1994
50% { -gtk-icon-transform: scale(0, 1); }
1995
to { -gtk-icon-transform: unset; }
1996
}
1997
check:not(:indeterminate):checked { animation: check_check $material_duration $material_timing_function; }
1999
check:not(:indeterminate):checked:active { animation: check_check $material_duration $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
2001
// radio:not(:indeterminate):checked { animation: check_radio $material_duration $material_timing_function; }
2003
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_duration $material_timing_function; }
2005
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_duration $material_timing_function, flat_ripple_effect $material_duration $material_timing_function forwards; }
2007
// no animations in menus
2009
menu menuitem {
2010
check:not(:indeterminate):checked,
2011
radio:not(:indeterminate):checked,
2012
check:indeterminate:checked,
2013
radio:indeterminate:checked { animation: none; }
2014
}
2015
treeview.view check,
2017
treeview.view radio {
2018
// margin: -12px;
2019
// padding: 12px;
2020
padding: 0;
2021
&:checked:hover, &:selected:checked:hover { background-image: none; }
2023
& {
2025
color: $secondary_fg_color;
2026
&:hover, &:active { color: $fg_color; }
2028
&:disabled { color: $insensitive_secondary_fg_color; }
2030
&:checked, &:indeterminate { color: $accent_bg_color; }
2032
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2034
}
2035
&:selected {
2037
color: $secondary_selected_fg_color;
2038
&:hover, &:active { color: $selected_fg_color; }
2040
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2042
&:checked, &:indeterminate { color: $accent_bg_color; }
2044
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2046
}
2047
}
2048
treeview.view radio:checked {
2050
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2051
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2052
border-image: none;
2053
}
2054
/************
2057
* GtkScale *
2058
************/
2059
scale {
2060
// sizing
2061
$_marks_lenght: 8px;
2063
$_marks_distance: 8px;
2064
min-height: 12px;
2066
min-width: 12px;
2067
padding: 12px;
2068
* { transition: $material_transition; }
2070
// the slider is inside the trough, so to have make it bigger there's a negative margin
2072
slider {
2073
min-height: $small_size;
2074
min-width: $small_size;
2075
margin: -10px;
2076
}
2077
// the backing bit
2079
trough {
2080
outline-offset: 2px;
2081
background-color: $track_color;
2082
&:disabled { color: $insensitive_fg_color; }
2084
}
2085
// the colored part of the backing bit
2087
highlight {
2088
background-color: $accent_bg_color;
2089
&:disabled { background-color: transparent; }
2091
}
2092
// this is another differently styled part of the backing bit, the most relevant use case is for example
2094
// in media player to indicate how much video stream as been cached
2095
fill {
2096
background-color: $track_color;
2097
&:disabled { background-color: transparent; }
2099
}
2100
slider {
2102
// border-radius: 100%;
2103
// background-color: $accent_bg_color;
2104
background-repeat: no-repeat;
2105
background-position: center;
2106
@each $s,$as in ('',''),
2108
(':disabled','-insensitive') {
2109
&#{$s} {
2110
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2111
background-image: -gtk-scaled(url('#{$_url}.png'),
2112
url('#{$_url}@2.png'));
2113
}
2114
}
2115
background-size: calc(100% - 8px);
2117
&:hover { background-size: calc(100% - 4px); }
2119
&:active { background-size: calc(100% - 0px); }
2121
}
2122
// click-and-hold the slider to activate
2124
&.fine-tune {
2125
// to make the slider shrink in fine-tune mode
2126
slider { background-size: calc(100% - 12px); }
2127
}
2128
value { color: gtkalpha(currentColor, $hint_opacity); }
2130
marks {
2132
color: $track_color;
2133
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2135
(bottom, bottom, top),
2136
(top, left, right),
2137
(bottom, right, left) {
2138
&.#{$marks_class} {
2139
margin-#{$marks_margin}: $_marks_distance;
2140
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2141
}
2142
}
2143
}
2144
&.horizontal {
2146
indicator {
2147
min-height: $_marks_lenght;
2148
min-width: 1px;
2149
}
2150
}
2151
&.vertical {
2153
indicator {
2154
min-height: 1px;
2155
min-width: $_marks_lenght;
2156
}
2157
}
2158
// *WARNING* scale with marks madness following
2160
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2162
$suffix: if($variant == 'light', '', '-dark');
2163
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2165
('vertical', 'vert') {
2166
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2167
('scale-has-marks-below', ':first-child:not(:only-child)') {
2168
@each $state, $state_infix in ('', ''),
2169
(':disabled', '-insensitive') {
2170
&.#{$dir_class} {
2171
%#{$marks_infix}-#{$dir_infix},
2172
contents#{$nth_child} > trough > slider {
2173
&#{$state} {
2174
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2175
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2177
}
2178
@if $dir_class == 'horizontal' {
2180
min-height: 30px;
2181
min-width: $small_size;
2182
@if $marks_infix == 'scale-has-marks-above' {
2184
margin-top: -16px;
2185
background-position: center calc(100% - 4px);
2187
&:hover { background-position: center calc(100% - 2px); }
2189
&:active { background-position: center calc(100% - 0px); }
2191
}
2192
@if $marks_infix == 'scale-has-marks-below' {
2194
margin-bottom: -16px;
2195
background-position: center calc(4px);
2197
&:hover { background-position: center calc(2px); }
2199
&:active { background-position: center calc(0px); }
2201
}
2202
}
2203
@if $dir_class == 'vertical' {
2205
min-height: $small_size;
2206
min-width: 30px;
2207
@if $marks_infix == 'scale-has-marks-above' {
2209
margin-left: -16px;
2210
background-position: calc(4px) center;
2212
&:hover { background-position: calc(2px) center; }
2214
&:active { background-position: calc(0px) center; }
2216
}
2217
@if $marks_infix == 'scale-has-marks-below' {
2219
margin-right: -16px;
2220
background-position: calc(100% - 4px) center;
2222
&:hover { background-position: calc(100% - 2px) center; }
2224
&:active { background-position: calc(100% - 0px) center; }
2226
}
2227
}
2228
}
2229
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2231
&.fine-tune contents#{$nth_child} > trough > slider {
2232
// bigger negative margins to make the trough grow here as well
2233
@if $dir_class == 'horizontal' {
2235
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2236
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2238
}
2239
@if $dir_class == 'vertical' {
2241
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2242
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2244
}
2245
}
2246
}
2247
}
2248
}
2249
}
2250
&.color {
2252
min-height: 0;
2253
min-width: 0;
2254
&.horizontal {
2256
padding: 0 0 12px 0;
2257
trough {
2259
padding-bottom: $bar_size;
2260
}
2261
slider {
2263
@extend %scale-has-marks-above-horz;
2264
margin-bottom: -10px - $bar_size;
2266
margin-top: 0;
2267
}
2268
}
2269
&.vertical {
2271
&:dir(ltr) {
2272
padding: 0 0 0 12px;
2273
trough {
2275
padding-left: $bar_size;
2276
}
2277
slider {
2279
@extend %scale-has-marks-below-vert;
2280
margin-left: -10px - $bar_size;
2282
margin-right: 0;
2283
}
2284
}
2285
&:dir(rtl) {
2287
padding: 0 12px 0 0;
2288
trough {
2290
padding-right: $bar_size;
2291
}
2292
slider {
2294
@extend %scale-has-marks-above-vert;
2295
margin-right: -10px - $bar_size;
2297
margin-left: 0;
2298
}
2299
}
2300
}
2301
&.fine-tune {
2303
&.horizontal {
2304
slider {
2305
@extend %scale-has-marks-above-horz-fine-tune;
2306
}
2307
}
2308
&.vertical {
2310
&:dir(ltr) {
2311
slider {
2312
@extend %scale-has-marks-below-vert-fine-tune;
2313
}
2314
}
2315
&:dir(rtl) {
2317
slider {
2318
@extend %scale-has-marks-above-vert-fine-tune;
2319
}
2320
}
2321
}
2322
}
2323
}
2324
}
2325
/*****************
2328
* Progress bars *
2329
*****************/
2330
progressbar {
2331
// sizing
2332
&.horizontal {
2333
trough,
2334
progress { min-height: $bar_size; }
2335
}
2336
&.vertical {
2338
trough,
2339
progress { min-width: $bar_size; }
2340
}
2341
// FIXME: insensitive state missing and some other state should be set probably
2343
color: $tertiary_fg_color;
2344
font-size: smaller;
2345
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2347
progress { background-color: $selected_bg_color; }
2349
&.osd { // progressbar.osd used for epiphany page loading progress
2351
// min-width: $bar_size;
2352
// min-height: $bar_size;
2353
// background-color: transparent;
2354
// trough { background-color: transparent; }
2356
progress {
2358
}
2359
}
2360
}
2361
/*************
2364
* Level Bar *
2365
*************/
2366
levelbar {
2367
block {
2368
min-width: $medium_size;
2369
min-height: $bar_size;
2370
}
2371
&.vertical block {
2373
min-width: $bar_size;
2374
min-height: $medium_size;
2375
}
2376
trough {
2378
padding: 2px;
2379
border-radius: 2px;
2380
@include entry(normal);
2382
&:disabled { @include entry(insensitive); }
2384
}
2385
&.horizontal.discrete block { margin: 0 1px; }
2387
&.vertical.discrete block { margin: 1px 0; }
2389
&.horizontal.discrete trough { padding: 2px 1px; }
2391
&.vertical.discrete trough { padding: 1px 2px; }
2393
block {
2395
&.low {
2396
background-color: $warning_color;
2397
}
2398
&.high {
2400
background-color: $selected_bg_color;
2401
}
2402
&.full {
2404
background-color: $success_color;
2405
}
2406
&.empty {
2408
background-color: $track_color;
2409
color: $insensitive_fg_color;
2410
}
2411
}
2412
}
2413
/****************
2416
* Print dialog *
2417
*****************/
2418
printdialog {
2419
paper {
2420
padding: 0;
2421
border: 1px solid $borders_color;
2422
background: $base_color;
2423
color: $fg_color;
2424
}
2425
.dialog-action-box { margin: 12px; }
2427
}
2428
/**********
2431
* Frames *
2432
**********/
2433
frame > border,
2434
.frame {
2435
margin: 0;
2436
padding: 0;
2437
border: 1px solid $borders_color;
2438
border-radius: 0;
2439
box-shadow: none;
2440
&.flat { border-style: none; }
2442
}
2443
actionbar > revealer > box {
2445
padding: $container_padding;
2446
border-top: 1px solid $borders_color;
2447
}
2448
scrolledwindow {
2450
viewport.frame { // avoid double borders when viewport inside scrolled window
2451
border-style: none;
2452
}
2453
// This is used when content is touch-dragged past boundaries.
2455
// draws a box on top of the content, the size changes programmatically.
2456
overshoot {
2457
&.top { @include overshoot(top); }
2458
&.bottom { @include overshoot(bottom); }
2460
&.left { @include overshoot(left); }
2462
&.right { @include overshoot(right); }
2464
}
2465
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2467
undershoot {
2468
&.top { @include undershoot(top); }
2469
&.bottom { @include undershoot(bottom); }
2471
&.left { @include undershoot(left); }
2473
&.right { @include undershoot(right); }
2475
}
2476
junction { // the small square between two scrollbars
2478
border-style: solid none none solid;
2479
border-width: 1px;
2480
border-color: $borders_color;
2481
background-color: $base_color;
2482
&:dir(rtl) { border-style: solid solid none none; }
2484
}
2485
}
2486
//vbox and hbox separators
2488
separator {
2489
min-width: 1px;
2490
min-height: 1px;
2491
background: $borders_color;
2492
}
2493
/*********
2496
* Lists *
2497
*********/
2498
list {
2499
border-color: $borders_color;
2500
background-color: $base_color;
2501
row { padding: 2px; }
2503
}
2504
row {
2506
transition: $material_transition;
2507
&:hover { transition: none; }
2509
&.activatable {
2511
background-image: radial-gradient(circle farthest-corner at center,
2512
gtkalpha(currentColor, 0) 100%,
2513
transparent 0%),
2514
image(gtkalpha(currentColor, 0));
2515
&:hover {
2517
background-image: radial-gradient(circle farthest-corner at center,
2518
gtkalpha(currentColor, 0) 100%,
2519
transparent 0%),
2520
image(gtkalpha(currentColor, 0.05));
2521
}
2522
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2524
&:active {
2525
transition: $material_transition, background-image 0;
2526
animation: row_ripple_effect $material_duration $material_timing_function forwards;
2527
}
2528
}
2529
&:selected { @extend %selected_items; }
2531
}
2532
/*********************
2535
* App Notifications *
2536
*********************/
2537
.app-notification,
2538
.app-notification.frame {
2539
@extend %osd;
2540
@extend toolbar.osd;
2542
margin: 8px;
2544
border { border: none; }
2546
}
2547
/*************
2550
* Expanders *
2551
*************/
2552
expander {
2553
arrow {
2554
transition: $material_transition;
2555
min-width: 16px;
2556
min-height: 16px;
2557
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2558
-gtk-icon-transform: rotate(-90deg);
2559
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2561
&:checked { -gtk-icon-transform: unset; }
2563
color: $secondary_fg_color;
2565
&:hover, &:active { color: $fg_color; }
2567
&:disabled { color: $insensitive_secondary_fg_color; }
2569
&:selected {
2571
color: $secondary_selected_fg_color;
2572
&:hover, &:active { color: $selected_fg_color; }
2574
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2576
}
2577
}
2578
}
2579
/************
2582
* Calendar *
2583
***********/
2584
calendar {
2585
padding: 1px;
2586
border: 1px solid $borders_color;
2587
color: $fg_color;
2588
&:disabled { color: $insensitive_fg_color; }
2590
&:selected {
2592
@extend %selected_items;
2593
border-radius: 2px + 1px;
2595
}
2596
&.header {
2598
border: none;
2599
border-bottom: 1px solid $borders_color;
2600
border-radius: 0;
2601
}
2602
&.button { @extend %button_basic.flat; }
2604
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2606
&.highlight {
2608
color: gtkalpha(currentColor, $hint_opacity);
2609
font-weight: 500;
2610
}
2611
}
2612
/***********
2615
* Dialogs *
2616
***********/
2617
messagedialog { // Message Dialog styling
2618
&.background { background-color: $light_color; }
2619
.titlebar {
2621
min-height: $small_size;
2622
border-style: none;
2623
// box-shadow: inset 0 1px $highlight_color;
2624
background-color: $light_color;
2625
}
2626
&.csd { // rounded bottom border styling for csd version
2628
&.background {
2629
// bigger radius for better antialiasing
2630
border-bottom-left-radius: 2px;
2631
border-bottom-right-radius: 2px;
2632
}
2633
.dialog-action-area button {
2635
padding: 8px 16px;
2636
border-top: 1px solid $borders_color;
2637
border-radius: 0;
2638
@extend %button_basic.flat;
2640
&:first-child{ border-bottom-left-radius: 2px; }
2642
&:last-child { border-bottom-right-radius: 2px; }
2644
}
2645
}
2646
}
2647
filechooser {
2649
.dialog-action-box { border-top: 1px solid $borders_color; }
2650
#pathbarbox { border-bottom: 1px solid $borders_color; }
2652
}
2653
filechooserbutton:drop(active) {
2655
box-shadow: none;
2656
}
2657
/***********
2660
* Sidebar *
2661
***********/
2662
.sidebar {
2663
border-style: none;
2664
background-color: $secondary_base_color;
2665
@at-root %sidebar_left,
2667
&:dir(ltr),
2668
&.left,
2669
&.left:dir(rtl) {
2670
border-right: 1px solid $borders_color;
2671
border-left-style: none;
2672
}
2673
@at-root %sidebar_right
2675
&:dir(rtl),
2676
&.right {
2677
border-left: 1px solid $borders_color;
2678
border-right-style: none;
2679
}
2680
list { background-color: transparent; }
2682
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2684
}
2685
stacksidebar {
2687
&.sidebar {
2688
&:dir(ltr),
2689
&.left,
2690
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2691
&:dir(rtl),
2693
&.right { list { @extend %sidebar_right; }}
2694
}
2695
row {
2697
padding: 10px 4px;
2698
> label {
2700
padding-left: 6px;
2701
padding-right: 6px;
2702
}
2703
&.needs-attention > label { @extend %needs_attention; }
2705
}
2706
}
2707
/****************
2710
* File chooser *
2711
****************/
2712
placessidebar {
2713
> viewport.frame { border-style: none; }
2714
row {
2716
// Needs overriding of the GtkListBoxRow padding
2717
min-height: 32px;
2718
padding: 0;
2719
// Using margins/padding directly in the SidebarRow
2721
// will make the animation of the new bookmark row jump
2722
> revealer { padding: 0 12px; }
2723
&:selected { color: $selected_fg_color; }
2725
&:disabled { color: $insensitive_fg_color; }
2727
image.sidebar-icon {
2729
opacity: $hint_opacity; // dim the device icons
2730
&:dir(ltr) { padding-right: 8px; }
2732
&:dir(rtl) { padding-left: 8px; }
2733
}
2734
label.sidebar-label {
2736
&:dir(ltr) { padding-right: 2px; }
2737
&:dir(rtl) { padding-left: 2px; }
2738
}
2739
@at-root button.sidebar-button {
2741
@extend %button_basic.flat;
2742
min-height: $small_size;
2744
min-width: $small_size;
2745
margin-top: 0;
2746
margin-bottom: 0;
2747
padding: 0;
2748
border-radius: 100%;
2749
-gtk-outline-radius: 100%;
2750
row:selected & { @extend %button_selected.flat; }
2752
}
2753
&.sidebar-placeholder-row {
2755
min-height: 2px;
2756
padding: 0 8px;
2757
background-image: image($accent_bg_color);
2758
background-clip: content-box;
2759
}
2760
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2762
&:drop(active):not(:disabled) {
2764
box-shadow: inset 0 0 0 2px $accent_bg_color;
2765
&:selected {
2767
// background-color: $accent_bg_color;
2768
// color: $selected_fg_color;
2769
}
2770
}
2771
}
2772
}
2773
placesview {
2775
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2776
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2778
// this selects the "connect to server" label
2780
> actionbar > revealer > box > label {
2781
padding-left: 8px;
2782
padding-right: 8px;
2783
}
2784
}
2785
/*********
2788
* Paned *
2789
*********/
2790
paned {
2791
> separator {
2792
min-width: 1px;
2793
min-height: 1px;
2794
-gtk-icon-source: none; // defeats the ugly default handle decoration
2795
border-style: none; // just to be sure
2796
background-color: transparent;
2797
// workaround, using background istead of a border since the border will get rendered twice (?)
2798
background-image: image($borders_color);
2799
background-size: 1px 1px;
2800
&.wide {
2802
min-width: 6px;
2803
min-height: 6px;
2804
background-color: $bg_color;
2805
background-image: image($borders_color), image($borders_color);
2806
background-size: 1px 1px, 1px 1px;
2807
}
2808
}
2809
&.horizontal > separator {
2811
background-repeat: repeat-y;
2812
&:dir(ltr) {
2814
margin: 0 -8px 0 0;
2815
padding: 0 8px 0 0;
2816
background-position: left;
2817
}
2818
&:dir(rtl) {
2820
margin: 0 0 0 -8px;
2821
padding: 0 0 0 8px;
2822
background-position: right;
2823
}
2824
&.wide {
2826
margin: 0;
2827
padding: 0;
2828
background-repeat: repeat-y, repeat-y;
2829
background-position: left, right;
2830
}
2831
}
2832
&.vertical > separator {
2834
margin: 0 0 -8px 0;
2835
padding: 0 0 8px 0;
2836
background-repeat: repeat-x;
2837
background-position: top;
2838
&.wide {
2840
margin: 0;
2841
padding: 0;
2842
background-repeat: repeat-x, repeat-x;
2843
background-position: bottom, top;
2844
}
2845
}
2846
}
2847
/**************
2850
* GtkInfoBar *
2851
**************/
2852
infobar { border-style: none; }
2853
.info { background-color: $info_bg_color; }
2855
.question { background-color: $question_bg_color; }
2857
.warning { background-color: $warning_bg_color; }
2859
.error { background-color: $error_bg_color; }
2861
.info,
2863
.question,
2864
.warning,
2865
.error {
2866
color: $selected_fg_color;
2867
button { @extend %button_selected; }
2869
label:selected {
2871
}
2872
*:link { @extend %link_selected; }
2874
}
2875
/************
2878
* Tooltips *
2879
************/
2880
tooltip {
2881
&.background {
2882
// background-color needs to be set this way otherwise it gets drawn twice
2883
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2884
background-color: scale-alpha($base_color, $higher_opacity);
2885
}
2886
// @extend %osd;
2888
// padding: 4px; /* not working */
2890
border-radius: 2px;
2891
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2892
// FIXME: we need a border or tooltips vanish on black background.
2894
decoration { background-color: transparent; }
2895
label {
2897
min-height: 32px - 6px * 2;
2898
padding: 4px 12px - 6px;
2899
}
2900
* { // Yeah this is ugly
2902
padding: 0;
2903
background-color: transparent;
2904
color: inherit;
2905
}
2906
}
2907
/*****************
2910
* Color Chooser *
2911
*****************/
2912
colorswatch {
2913
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2914
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2915
// applied to the overlay box.
2916
// base color corners rounding
2918
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2919
// sports a bigger radius.
2920
// nth-child is needed by the custom color strip.
2921
&.top {
2923
border-top-left-radius: $material_radius + 0.5px;
2924
border-top-right-radius: $material_radius + 0.5px;
2925
overlay {
2927
border-top-left-radius: $material_radius;
2928
border-top-right-radius: $material_radius;
2929
}
2930
}
2931
&.bottom {
2933
border-bottom-left-radius: $material_radius + 0.5px;
2934
border-bottom-right-radius: $material_radius + 0.5px;
2935
overlay {
2937
border-bottom-left-radius: $material_radius;
2938
border-bottom-right-radius: $material_radius;
2939
}
2940
}
2941
&.left,
2943
&:first-child:not(.top) {
2944
border-top-left-radius: $material_radius + 0.5px;
2945
border-bottom-left-radius: $material_radius + 0.5px;
2946
overlay {
2948
border-top-left-radius: $material_radius;
2949
border-bottom-left-radius: $material_radius;
2950
}
2951
}
2952
&.right,
2954
&:last-child:not(.bottom) {
2955
border-top-right-radius: $material_radius + 0.5px;
2956
border-bottom-right-radius: $material_radius + 0.5px;
2957
overlay {
2959
border-top-right-radius: $material_radius;
2960
border-bottom-right-radius: $material_radius;
2961
}
2962
}
2963
&.dark overlay { color: white; }
2965
&.light overlay { color: scale-alpha(black, 0.8); }
2967
&.dark { color: white; } // for focus ring
2969
&.light { color: scale-alpha(black, 0.8); } // for focus ring
2971
&:drop(active) {
2973
box-shadow: none;
2974
&.light overlay {
2976
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
2977
}
2978
&.dark overlay {
2980
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
2981
}
2982
}
2983
overlay {
2985
transition: $material_transition;
2986
box-shadow: $z-depth-1;
2987
&:hover { box-shadow: $z-depth-2; }
2989
}
2990
&#add-color-button {
2992
border-radius: $material_radius $material_radius 0 0;
2993
color: white; // for focus ring
2994
&:only-child { border-radius: $material_radius; }
2996
overlay {
2998
background-image: linear-gradient(to right,
2999
$error_bg_color 25%,
3000
$warning_bg_color 25%, $warning_bg_color 50%,
3001
$info_bg_color 50%, $info_bg_color 75%,
3002
$question_bg_color 75%);
3003
color: white;
3004
}
3005
}
3006
&:disabled {
3008
opacity: $disabled_opacity;
3009
overlay { box-shadow: none; }
3011
}
3012
row:selected & {
3014
}
3015
&#editor-color-sample {
3017
border-radius: $material_radius + 0.5px;
3018
overlay { border-radius: $material_radius; }
3020
// overlay:hover { box-shadow: $z-depth-1; }
3022
}
3023
}
3024
// colorscale popup
3026
colorchooser .popover.osd {
3027
transition: box-shadow $material_duration $material_timing_function;
3028
border-radius: 2px;
3029
box-shadow: $z-depth-2;
3030
background-color: $base_color;
3031
&:backdrop { box-shadow: $z-depth-1; }
3033
spinbutton:not(.vertical) { @extend %entry.flat; }
3035
}
3036
/********
3039
* Misc *
3040
********/
3041
//content view (grid/list)
3042
.content-view {
3043
background-color: $bg_color;
3044
// &:hover { -gtk-icon-effect: highlight; }
3046
rubberband { @extend rubberband; }
3048
}
3049
.scale-popup {
3051
.osd & { @extend %osd; }
3052
.osd & button.flat { //FIXME: quick hack, redo properly
3054
}
3055
button { // +/- buttons on GtkVolumeButton popup
3057
}
3058
}
3059
/**********************
3062
* Window Decorations *
3063
*********************/
3064
decoration {
3065
transition: box-shadow $material_duration $material_timing_function;
3066
border-radius: 2px 2px 0 0;
3067
box-shadow: $z-depth-4, 0 16px 16px transparent;
3068
// FIXME rationalize shadows
3070
// this is used for the resize cursor area
3072
margin: 8px;
3073
&:backdrop {
3075
// the transparent shadow here is to enforce that the shadow extents don't
3076
// change when we go to backdrop, to prevent jumping windows.
3077
// The biggest shadow should be in the same order then in the active state
3078
// or the jumping will happen during the transition.
3079
box-shadow: $z-depth-2, 0 16px 16px transparent;
3080
}
3081
.fullscreen &,
3083
.tiled & { border-radius: 0; }
3084
.popup & { box-shadow: none; }
3086
// server-side decorations as used by mutter
3088
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3089
.csd.popup & {
3091
border-radius: 2px;
3092
box-shadow: $z-depth-2;
3093
}
3094
tooltip.csd & {
3096
border-radius: 2px;
3097
box-shadow: $z-depth-2;
3098
}
3099
messagedialog.csd & {
3101
border-radius: 2px;
3102
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3103
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3105
}
3106
.solid-csd & {
3108
margin: 4px;
3109
// border: solid 1px $borders_color;
3110
border-radius: 0;
3111
box-shadow: none;
3112
background-color: $bg_color;
3113
}
3114
}
3115
// Window Close button
3117
button.titlebutton {
3118
// @extend %button_basic.flat;
3119
@extend %button_basic.image-button;
3121
.selection-mode & {
3123
}
3124
}
3125
// catch all extend :)
3128
%selected_items {
3130
background-color: $selected_bg_color;
3131
@at-root %nobg_selected_items, & {
3133
color: $selected_fg_color;
3134
&:disabled { color: $insensitive_selected_fg_color; }
3136
}
3137
}
3138
.monospace { font: Monospace; }
3140
/**********************
3143
* Touch Copy & Paste *
3144
*********************/
3145
//touch selection handlebars for the Popover.osd above
3146
cursor-handle {
3147
border-radius: 100px;
3148
background-color: $accent_bg_color;
3149
background-image: none;
3150
&.top:dir(ltr), &.bottom:dir(rtl) {
3152
padding-left: 6px;
3153
border-top-right-radius: 0;
3154
}
3155
&.bottom:dir(ltr), &.top:dir(rtl) {
3157
padding-right: 6px;
3158
border-top-left-radius: 0;
3159
}
3160
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3162
-GtkWidget-text-handle-width: 24;
3163
-GtkWidget-text-handle-height: 30;
3164
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3166
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3167
url('#{$_url}@2.png'));
3168
}
3169
}
3170
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3172
button.circular { // FIXME: aggregate to buttons
3174
border-radius: 100px;
3175
-gtk-outline-radius: 100px;
3176
label { padding: 0; }
3178
}
3179
// shortcut window keys
3181
.keycap {
3182
min-width: 28px - 8px * 2;
3183
min-height: 28px - 2px;
3184
margin-top: 2px;
3185
padding-bottom: 2px;
3186
padding-left: 8px;
3187
padding-right: 8px;
3188
border: solid 1px $borders_color;
3190
border-radius: 2px + 1px;
3191
box-shadow: inset 0 -2px $borders_color;
3192
background-color: $base_color;
3193
color: $fg_color;
3194
font-size: smaller;
3195
}
3196
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3198
transition: $material_transition;
3199
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3200
caret-color: $accent_bg_color;
3201
}
3202
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3204
stackswitcher button.circular,
3206
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3207
min-width: $medium_size;
3208
min-height: $medium_size;
3209
padding: 0;
3210
}
3211