ASCII text
1
* {
2
padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 4;
6
-GtkTextView-error-underline-color: $error_color;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: 4;
21
-GtkDialog-action-area-border: 0;
22
// We use the outline properties to signal the focus properties
24
// to the adwaita engine: using real CSS properties is faster,
25
// and we don't use any outlines for now.
26
outline-style: solid;
28
outline-width: 2px;
29
outline-color: $fill_color;
30
outline-offset: -4px;
31
-gtk-outline-radius: 2px;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
/***************
38
* Base States *
39
***************/
40
.background {
41
background-color: $bg_color;
42
color: $fg_color;
43
}
44
/*
46
These wildcard seems unavoidable, need to investigate.
47
Wildcards are bad and troublesome, use them with care,
48
or better, just don't.
49
Everytime a wildcard is used a kitten dies, painfully.
50
*/
51
*:disabled { -gtk-icon-effect: dim; }
53
.gtkstyle-fallback {
55
background-color: $bg_color;
56
color: $fg_color;
57
&:hover {
59
background-color: darken($bg_color, 5%);
60
color: $fg_color;
61
}
62
&:active {
64
background-color: darken($bg_color, 10%);
65
color: $fg_color;
66
}
67
&:disabled {
69
background-color: $bg_color;
70
color: $disabled_fg_color;
71
}
72
&:selected {
74
background-color: $primary_color;
75
color: $inverse_fg_color;
76
}
77
}
78
.view,
80
%view {
81
@extend row.activatable;
82
background-color: $base_color;
84
color: $fg_color;
85
&:hover, &:active, &:selected { border-radius: 2px; }
87
&:disabled {
89
// background-color: $alt_base_color;
90
color: $disabled_fg_color;
91
}
92
&:selected { @extend %selected_items; }
94
}
95
.view,
97
textview {
98
text {
99
// @extend %view;
100
background-color: $base_color;
102
color: $fg_color;
103
&:disabled {
105
// background-color: $alt_base_color;
106
color: $disabled_fg_color;
107
}
108
selection { @extend %selected_items; }
110
}
111
}
112
textview border {
114
background-color: $alt_base_color;
115
color: $tertiary_fg_color;
116
}
117
iconview { @extend .view; }
119
.rubberband,
121
rubberband {
122
border: 1px solid $alt_primary_color;
123
background-color: scale-alpha($alt_primary_color, $lower_opacity);
124
}
125
flowbox {
127
rubberband { @extend rubberband; }
128
flowboxchild {
130
outline-offset: -2px;
131
padding: 4px;
132
border-radius: 2px;
133
&:selected { @extend %selected_items; }
135
}
136
}
137
label {
139
caret-color: currentColor; // this shouldn't be needed.
140
&.separator {
142
@extend .dim-label;
143
color: $fg_color;
145
}
146
row:selected &,
148
&:selected { @extend %nobg_selected_items; }
149
selection {
151
background-color: $primary_color;
152
color: $inverse_fg_color;
153
}
154
&:disabled {
156
color: $disabled_fg_color;
157
selection { @extend %selected_items:disabled; }
159
tab &,
161
button &,
162
menuitem & { color: inherit; }
163
}
164
}
165
.dim-label { opacity: $tertiary_opacity; }
167
assistant {
169
.sidebar {
170
padding: 4px 0;
171
// background-color: $base_color;
172
// border-top: 1px solid $border_color;
173
}
174
// &.csd .sidebar { border-top-style: none; }
176
.sidebar label {
178
min-height: $medium_size;
179
padding: 0 12px;
180
color: $tertiary_fg_color;
181
font-weight: 500;
182
&.highlight { color: $fg_color; }
184
}
185
}
186
%osd, .osd { opacity: $higher_opacity; }
188
/*********************
191
* Spinner Animation *
192
*********************/
193
@keyframes spin {
194
to { -gtk-icon-transform: rotate(1turn); }
195
}
196
@keyframes spin_colors {
198
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
199
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
200
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
201
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
202
}
203
spinner {
205
background: none;
206
opacity: 0; // non spinning spinner makes no sense
207
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
208
&:checked {
210
opacity: 1;
211
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
212
&:disabled { opacity: $disabled_opacity; }
214
}
215
}
216
/****************
219
* Text Entries *
220
****************/
221
%entry,
222
entry {
223
%entry_basic, & {
224
min-height: $medium_size;
225
padding: 0 8px;
226
border-radius: 2px;
227
@include entry(normal);
229
&:focus { @include entry(focus); }
231
&:disabled { @include entry(disabled); }
233
&.flat {
235
border-radius: 0;
236
@include entry(flat-normal);
238
&:focus { @include entry(flat-focus); }
240
&:disabled { @include entry(flat-disabled); }
242
}
243
image { // icons inside the entry
245
// @extend %simple_flat_button;
246
min-height: $small_size;
248
min-width: $small_size;
249
border-radius: $circular_radius;
250
-gtk-outline-radius: $circular_radius;
251
color: gtkalpha(currentColor, $secondary_opacity);
252
&:hover, &:active { color: currentColor; }
254
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
256
&.left { margin-left: -2px; margin-right: 2px; }
258
&.right { margin-left: 2px; margin-right: -2px; }
260
}
261
undershoot {
263
&.left { @include undershoot(left); }
264
&.right { @include undershoot(right); }
266
}
267
selection { @extend %selected_items; }
269
// entry error and warning style
271
@each $e_type, $e_color in (error, $error_color),
272
(warning, $warning_color) {
273
&.#{$e_type} {
274
@include entry(normal, $e_color);
275
&:focus { @include entry(focus, $e_color); }
277
&:disabled { @include entry(disabled, $e_color); }
279
&.flat {
281
@include entry(flat-normal, $e_color);
282
&:focus { @include entry(flat-focus, $e_color); }
284
&:disabled { @include entry(flat-disabled, $e_color); }
286
}
287
}
288
}
289
&:drop(active) {
291
// box-shadow: inset 0 0 0 2px $accent_color;
292
}
293
.osd & {
295
}
296
}
297
progress {
299
margin: 2px (2px - 8px);
300
border-style: none none solid;
301
border-width: 2px;
302
border-color: $primary_color;
303
// border-radius: 0;
304
// box-shadow: none;
305
background-color: transparent;
306
// background-image: none;
307
}
308
// linked entries
310
.linked:not(.vertical) > & { @extend %linked; }
311
// Vertically linked entries
313
.linked.vertical > & { @extend %linked_vertical; }
314
.linked:not(.vertical) > &.flat,
316
.linked.vertical > &.flat { border-radius: 0; }
317
}
318
treeview entry {
320
&.flat, & {
321
min-height: 0;
322
padding: 2px;
323
border-radius: 0;
324
background-color: $base_color;
325
&, &:focus {
327
border-image: none;
328
box-shadow: none;
329
}
330
}
331
}
332
/***********
335
* Buttons *
336
***********/
337
// stuff for .needs-attention
338
@keyframes needs_attention {
339
from {
340
background-image: -gtk-gradient(radial,
341
center center, 0,
342
center center, 0.001,
343
to($accent_color),
344
to(transparent));
345
}
346
to {
348
background-image: -gtk-gradient(radial,
349
center center, 0,
350
center center, 0.5,
351
to($accent_color),
352
to(transparent));
353
}
354
}
355
%button,
357
button {
358
@at-root %button_basic, & {
359
min-height: 24px;
360
min-width: 16px;
361
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
362
border-radius: 2px;
363
font-weight: 500;
364
@include button(normal);
366
&:hover { @include button(hover); }
368
&:active { @include button(active); }
370
&:disabled { @include button(disabled); }
372
&:checked { @include button(checked); }
374
&:checked:disabled { @include button(checked-disabled); }
376
@at-root %flat_button, &.flat {
378
@at-root %simple_flat_button, & {
379
@include button(flat-normal);
380
&:hover { @include button(flat-hover); }
382
&:active { @include button(flat-active); }
384
&:disabled { @include button(flat-disabled); }
386
}
387
&:checked { @include button(flat-checked); }
389
&:checked:disabled { @include button(flat-checked-disabled); }
391
}
392
&.text-button {
394
padding-left: 16px;
395
padding-right: 16px;
396
}
397
&.image-button {
399
min-width: 24px;
400
padding: ($medium_size - 24px) / 2;
401
border-radius: $circular_radius;
402
-gtk-outline-radius: $circular_radius;
403
}
404
&.text-button.image-button {
406
border-radius: 2px;
407
-gtk-outline-radius: 2px;
408
label {
410
&:first-child {
411
margin-left: 16px - ($medium_size - 24px) / 2;
412
margin-right: 2px;
413
}
414
&:last-child {
416
margin-left: 2px;
417
margin-right: 16px - ($medium_size - 24px) / 2;
418
}
419
&:only-child {
421
margin-left: 16px - ($medium_size - 24px) / 2;
422
margin-right: 16px - ($medium_size - 24px) / 2;
423
}
424
}
425
image:not(:only-child) {
427
&:first-child { margin-left: (24px - 16px) / 2; }
428
&:last-child { margin-right: (24px - 16px) / 2; }
430
}
431
}
432
.linked > & { @extend %linked; }
434
.linked.vertical > & { @extend %linked_vertical; }
436
.linked > &.flat,
438
.linked.vertical > &.flat {
439
border-radius: 2px;
440
&.image-button {
442
border-radius: $circular_radius;
443
-gtk-outline-radius: $circular_radius;
444
}
445
&.text-button.image-button {
447
border-radius: 2px;
448
-gtk-outline-radius: 2px;
449
}
450
}
451
&:drop(active) {
453
// box-shadow: inset 0 0 0 2px $accent_color;
454
}
455
}
456
@at-root %button_selected, row:selected & {
458
&:disabled { color: $disabled_secondary_inverse_fg_color; }
459
}
460
// big standalone buttons like in Documents pager
462
&.osd {
463
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
464
&.image-button { padding: ($large_size - 24px) / 2; }
466
&:disabled { opacity: 0; }
468
}
469
//overlay / OSD style
471
@at-root %osd_button,
472
.osd & {
473
}
474
// Suggested and Destructive Action buttons
476
@each $b_type, $b_color in (suggested-action, $suggested_color),
477
(destructive-action, $destructive_color) {
478
&.#{$b_type} {
479
background-color: $b_color;
480
color: $inverse_fg_color;
481
// @include button(normal, $b_color, $inverse_fg_color);
483
// &:hover { @include button(hover, $b_color, $inverse_fg_color); }
485
// &:active, &:checked { @include button(active, $b_color, $inverse_fg_color); }
487
&:disabled { @include button(disabled, $b_color, $inverse_fg_color); }
489
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
491
&.flat {
493
background-color: transparent;
494
color: $b_color;
495
// @include button(flat-normal, $b_color, $inverse_fg_color);
497
// &:hover { @include button(flat-hover, $b_color, $inverse_fg_color); }
499
// &:active, &:checked { @include button(flat-active, $b_color, $inverse_fg_color); }
501
&:disabled { @include button(flat-disabled, $b_color, $inverse_fg_color); }
503
}
504
.osd & {
506
}
507
}
508
}
509
.stack-switcher > & {
511
// to position the needs attention dot, padding is added to the button
512
// child, a label needs just lateral padding while an icon needs vertical
513
// padding added too.
514
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
516
> label {
518
padding-left: 6px; // label padding
519
padding-right: 6px; //
520
}
521
> image {
523
padding-left: 6px; // image padding
524
padding-right: 6px; //
525
padding-top: 3px; //
526
padding-bottom: 3px; //
527
}
528
&.text-button {
530
// compensate text-button paddings
531
padding-left: 16px - 6px;
532
padding-right: 16px - 6px;
533
}
534
&.image-button {
536
// we want image buttons to have a 1:1 aspect ratio, so compensation
537
// of the padding added to the GtkImage is needed
538
padding-left: ($medium_size - 16px) / 2 - 6px;
539
padding-right: ($medium_size - 16px) / 2 - 6px;
540
}
541
&.needs-attention {
543
> label,
544
> image { @extend %needs_attention; }
545
&:checked {
547
> label,
548
> image {
549
animation: none;
550
background-image: none;
551
}
552
}
553
}
554
}
555
// hide separators
557
separator {
558
min-width: 0;
559
min-height: 0;
560
background: transparent;
561
}
562
// &.font,
564
// &.file { separator { background-color: transparent; }}
565
// &.font { > box > box > label { font-weight: bold; }}
567
// inline-toolbar buttons
569
.inline-toolbar & {
570
// @extend %button_basic.flat;
571
&:not(.text-button) { @extend %circular_button; }
573
}
574
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
576
}
577
%needs_attention {
579
animation: needs_attention $longer_duration $deceleration_curve forwards;
580
background-repeat: no-repeat;
581
background-position: right 3px;
582
background-size: 6px 6px;
583
&:dir(rtl) { background-position: left 3px; }
585
}
586
// all the following is for the +|- buttons on inline toolbars, that way
588
// should really be deprecated...
589
.inline-toolbar toolbutton > button { // redefining the button look is
590
// needed since those are flat...
591
}
592
// More inline toolbar buttons
594
toolbar.inline-toolbar toolbutton {
595
// > button.flat { @extend %linked_middle; }
596
// &:first-child > button.flat { @extend %linked:first-child; }
598
// &:last-child > button.flat { @extend %linked:last-child; }
600
// &:only-child > button.flat { @extend %linked:only-child; }
602
}
603
%linked_middle {
605
border-radius: 0;
606
-gtk-outline-radius: 2px;
607
}
608
%linked {
610
@extend %linked_middle;
611
&:first-child {
613
border-top-left-radius: 2px;
614
border-bottom-left-radius: 2px;
615
}
616
&:last-child {
618
border-top-right-radius: 2px;
619
border-bottom-right-radius: 2px;
620
}
621
&:only-child {
623
border-radius: 2px;
624
}
625
}
626
%linked_vertical_middle {
628
border-radius: 0;
629
-gtk-outline-radius: 2px;
630
}
631
%linked_vertical{
633
@extend %linked_vertical_middle;
634
&:first-child {
636
border-top-left-radius: 2px;
637
border-top-right-radius: 2px;
638
}
639
&:last-child {
641
border-bottom-left-radius: 2px;
642
border-bottom-right-radius: 2px;
643
}
644
&:only-child {
646
border-radius: 2px;
647
}
648
}
649
/* menu buttons */
651
modelbutton.flat,
652
.menuitem.button.flat {
653
min-height: $menuitem_size;
654
padding: 0 8px;
655
border-radius: 2px;
656
color: inherit;
657
@extend %simple_flat_button;
659
&:selected { @extend %selected_items; }
661
check,
663
radio {
664
box-shadow: none;
665
background-image: none;
666
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
668
&:last-child { margin-left: -8px; margin-right: -16px; }
670
&:first-child { margin-left: -16px; margin-right: -8px; }
672
}
673
check:not(:indeterminate):checked { @extend %check_checked; }
675
// radio:not(:indeterminate):checked { @extend %radio_checked; }
677
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
679
}
680
modelbutton.flat arrow {
682
background: none;
683
&:hover { background: none; }
685
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
687
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
689
}
690
button.color {
692
min-height: $small_size;
693
min-width: $small_size;
694
padding: $container_padding;
695
colorswatch:only-child {
697
// &, overlay { border-radius: 0; }
698
}
699
}
700
/*********
703
* Links *
704
*********/
705
*:link {
706
&, &:hover, &:active { color: $link_color; }
707
&:visited {
709
&, &:hover, &:active { color: $visited_link_color; }
710
}
711
@at-root %link_selected,
713
&:selected,
714
*:selected & { color: $inverse_fg_color; }
715
}
716
button:link,
718
button:visited {
719
@extend *:link;
720
> label { text-decoration-line: underline; }
722
}
723
/*****************
725
* GtkSpinButton *
726
*****************/
727
spinbutton {
728
&:not(.vertical) {
729
// in this horizontal configuration, the whole spinbutton
730
// behaves as the entry, so we extend the entry styling
731
// and nuke the style on the internal entry
732
@extend %entry;
733
padding: 0;
735
%spinbutton_entry,
737
entry {
738
min-width: $large_size - 8px * 2;
739
// reset all the other props since the spinbutton node is styled here
740
margin: 0;
741
border-image: none;
742
border-radius: 0;
743
box-shadow: none;
744
background-color: transparent;
745
//
746
// This will help to simplify spinbutton's code, but unfortunatelly
747
// doesn't work properly in :dir(rtl). It needs z-index property.
748
//
749
// min-width: $large_size - 8px;
750
//
751
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
752
//
753
// &:dir(ltr) {
754
// margin-right: -$spinbuttons_width;
755
// padding-right: $spinbuttons_width;
756
// }
757
//
758
// &:dir(rtl) {
759
// margin-left: -$spinbuttons_width;
760
// padding-left: $spinbuttons_width;
761
// }
762
}
763
button {
765
// margin: $container_padding;
766
border: solid $container_padding transparent;
767
@extend %simple_flat_button;
769
@extend %small_button;
771
&.up:dir(ltr),
773
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
774
&.up:dir(rtl),
776
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
777
}
778
}
779
// OSD horizontal
781
.osd &:not(.vertical) {
782
button {
783
}
784
}
785
// Vertical
787
&.vertical {
788
// in the vertical configuration, we treat the spinbutton
789
// as a box, and tweak the style of the entry in the middle
790
// so that it's linked
791
// FIXME: this should not be set at all, but otherwise it gets the wrong
793
// color
794
&:disabled { color: $disabled_fg_color; }
795
&:drop(active) {
797
box-shadow: none;
798
}
799
entry {
801
min-height: $medium_size;
802
min-width: $large_size;
803
padding: 0;
804
}
805
button {
807
min-height: $medium_size;
808
min-width: $large_size;
809
padding: 0;
810
@extend %simple_flat_button;
812
&.up { border-radius: 2px 2px 0 0; }
814
&.down { border-radius: 0 0 2px 2px; }
816
}
817
}
818
// OSD vertical
820
.osd &.vertical button:first-child {
821
}
822
// Misc
824
treeview &:not(.vertical) {
825
min-height: 0;
826
border-style: none;
827
border-radius: 0;
828
entry {
830
min-height: 0;
831
padding: 1px 2px;
832
}
833
}
834
}
835
/**************
838
* ComboBoxes *
839
**************/
840
combobox {
841
arrow {
842
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
843
min-height: 16px;
844
min-width: 16px;
845
}
846
button.combo:checked { transition: none; } // workaround for menuitem selection
848
button.combo cellview {
850
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
851
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
852
}
853
#gtk-combobox-popup-menu {
855
padding: 2px 0;
856
menuitem {
858
min-height: $medium_size - 2px * 2;
859
padding: 0 8px;
860
}
861
}
862
&.linked {
864
button:nth-child(2) {
865
&:dir(ltr) { @extend %linked:last-child; }
866
&:dir(rtl) { @extend %linked:first-child; }
867
}
868
}
869
&:drop(active) { // FIXME: untested
871
box-shadow: none;
872
// button.combo { @extend %button_basic:drop(active); }
874
}
875
}
876
.linked > combobox > box > button.combo {
878
// the combo is a composite widget so the way we do button linking doesn't
879
// work, special case needed. See
880
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
881
&:dir(ltr),
883
&:dir(rtl) { @extend %linked_middle; } // specificity bump
884
}
885
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
887
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
888
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
889
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
891
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
892
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
893
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
894
%combo_flat {
896
border-radius: 0;
897
background-image: none;
898
font-weight: inherit;
899
@include entry(flat-normal);
901
&:hover { box-shadow: inset 0 -2px $fill_color; }
903
&:checked {
905
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
906
$primary_color 100%,
907
transparent 0%)
908
0 0 2 / 0 0 2px;
909
}
910
&:disabled { color: $disabled_fg_color; }
912
}
913
/************
916
* Toolbars *
917
************/
918
toolbar {
919
-GtkWidget-window-dragging: true;
920
padding: $container_padding / 2;
921
background-color: $bg_color;
922
button { @extend %button_basic.flat; }
924
// on OSD
926
.osd & { background-color: transparent; }
927
// stand-alone OSD toolbars
929
&.osd {
930
transition: $shadow_transition;
931
padding: $container_padding;
932
border-radius: 2px;
933
box-shadow: $shadow_2, inset 0 1px $highlight_color;
934
background-color: $base_color;
935
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
937
&.left,
939
&.right,
940
&.top,
941
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
942
}
943
// toolbar separators
945
&.horizontal separator { margin: $container_padding / 2; }
946
&.vertical separator { margin: $container_padding / 2; }
947
&:not(.inline-toolbar):not(.osd) {
949
scale,
950
entry,
951
spinbutton,
952
button { margin: $container_padding / 2; }
953
.linked entry,
955
.linked spinbutton,
956
.linked button {
957
&:not(:first-child) { margin-left: 0; }
958
&:not(:last-child) { margin-right: 0; }
959
}
960
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
962
}
963
}
964
//searchbar, location-bar & inline-toolbar
966
.inline-toolbar {
967
padding: $container_padding;
968
border-style: solid;
969
border-width: 0 1px 1px;
970
border-color: $border_color;
971
background-color: $alt_base_color;
972
}
973
searchbar,
975
.location-bar {
976
padding: $container_padding;
977
border-style: solid;
978
border-width: 0 0 1px;
979
border-color: $border_color;
980
background-color: $bg_color;
981
background-clip: border-box;
982
}
983
/***************
986
* Header bars *
987
***************/
988
%titlebar,
989
headerbar {
990
transition: background-color $shorter_duration $deceleration_curve;
991
min-height: $large_size;
992
padding: 0 $container_padding;
993
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
994
background-color: $titlebar_bg_color;
995
color: $titlebar_fg_color;
996
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
998
&:backdrop {
1000
color: $secondary_titlebar_fg_color;
1001
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
1003
}
1004
.title {
1006
transition: $longer_transition;
1007
padding: 0 12px;
1008
font-weight: bold;
1009
}
1010
.subtitle {
1012
transition: $longer_transition;
1013
padding: 0 12px;
1014
font-size: smaller;
1015
@extend .dim-label;
1017
}
1018
button:not(.suggested-action):not(.destructive-action) {
1020
@extend %button_basic.flat;
1021
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1023
$titlebar_indicator_color 0%,
1024
transparent 0%)
1025
0 0 0 / 0 0 0px;
1026
&:checked {
1028
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1029
$titlebar_indicator_color 100%,
1030
transparent 0%)
1031
0 0 2 / 0 0 2px;
1032
&, &:disabled { background-color: transparent; }
1034
}
1035
}
1036
button.suggested-action, button.destructive-action {
1038
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1039
}
1040
&.selection-mode {
1042
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1043
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1044
transition: background-color 0.00001s $longer_duration;
1045
animation: header_ripple_effect $longer_duration $deceleration_curve;
1046
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1047
background-color: $primary_color;
1048
color: $inverse_fg_color;
1049
&:backdrop {
1051
color: $secondary_inverse_fg_color;
1052
}
1053
.subtitle:link { @extend *:link:selected; }
1055
button:not(.suggested-action):not(.destructive-action) {
1057
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1058
currentColor 0%,
1059
transparent 0%)
1060
0 0 0 / 0 0 0px;
1061
color: currentColor;
1062
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1064
&:checked {
1066
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1067
currentColor 100%,
1068
transparent 0%)
1069
0 0 2 / 0 0 2px;
1070
color: currentColor;
1071
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1073
}
1074
}
1075
.selection-menu {
1077
padding-left: 16px;
1078
padding-right: 16px;
1079
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1081
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1083
}
1084
}
1085
.fullscreen &,
1087
.tiled &,
1088
.maximized & {
1089
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1090
box-shadow: $shadow_1;
1091
}
1092
&.default-decoration {
1094
min-height: $small_size;
1095
padding: $container_padding;
1096
box-shadow: inset 0 1px $titlebar_highlight_color;
1097
.fullscreen &,
1099
.tiled &,
1100
.maximized & { box-shadow: none; }
1101
button.titlebutton {
1103
min-height: $small_size;
1104
min-width: $small_size;
1105
margin: 0;
1106
padding: 0;
1107
}
1108
}
1109
.solid-csd & {
1111
&:dir(rtl), &:dir(ltr) { // specificity bump
1112
margin-left: -2px;
1113
margin-right: -2px;
1114
margin-top: -2px;
1115
// border-radius: 0;
1116
box-shadow: inset 0 1px $titlebar_highlight_color;
1117
}
1118
}
1119
}
1120
headerbar {
1122
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1123
entry,
1124
spinbutton,
1125
// separator,
1126
button {
1127
margin-top: $container_padding;
1128
margin-bottom: $container_padding;
1129
}
1130
switch {
1132
margin-top: $container_padding * 2;
1133
margin-bottom: $container_padding * 2;
1134
}
1135
}
1136
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1138
border-top-left-radius: 2px;
1139
border-top-right-radius: 2px;
1140
}
1141
headerbar {
1143
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1144
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1145
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1147
}
1148
.titlebar:not(headerbar) {
1150
window.csd > & {
1151
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1152
padding: 0;
1153
background-color: transparent;
1154
background-image: none;
1155
border-style: none;
1156
box-shadow: none;
1157
}
1158
> separator {
1160
background-color: $titlebar_bg_color;
1161
background-image: image($border_color);
1162
}
1163
@extend %titlebar;
1165
}
1166
/************
1169
* Pathbars *
1170
************/
1171
%pathbar_button,
1172
.path-bar button {
1173
padding-left: ($medium_size - 24px) / 2;
1174
padding-right: ($medium_size - 24px) / 2;
1175
label:not(:only-child) {
1177
&:first-child { margin-left: 4px; }
1178
&:last-child { margin-right: 4px; }
1180
}
1181
&.slider-button {
1183
padding-left: (24px - 16px) / 2;
1184
padding-right: (24px - 16px) / 2;
1185
}
1186
:not(headerbar) & {
1188
@extend %flat_button;
1189
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1191
$primary_color 0%,
1192
transparent 0%)
1193
0 0 0 / 0 0 0px;
1194
border-radius: 2px;
1195
&:checked {
1197
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1198
$primary_color 100%,
1199
transparent 0%)
1200
0 0 2 / 0 0 2px;
1201
&, &:disabled { background-color: transparent; }
1203
}
1204
}
1205
}
1206
/**************
1209
* Tree Views *
1210
**************/
1211
treeview.view {
1212
@at-root * {
1213
-GtkTreeView-horizontal-separator: 4;
1214
-GtkTreeView-grid-line-width: 1;
1215
-GtkTreeView-grid-line-pattern: '';
1216
-GtkTreeView-tree-line-width: 1;
1217
-GtkTreeView-tree-line-pattern: '';
1218
-GtkTreeView-expander-size: 16;
1219
}
1220
border-left-color: $fill_color; // this is actually the tree lines color,
1222
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1223
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1225
&:hover, &:active, &:selected { border-radius: 0; }
1227
&.separator {
1229
min-height: 1px + 2px * 2;
1230
color: $border_color;
1231
}
1232
&:drop(active) {
1234
border-style: solid none;
1235
border-width: 1px;
1236
border-color: $accent_color;
1237
&.after { border-top-style: none; }
1239
&.before { border-bottom-style: none; }
1241
}
1242
&.expander {
1244
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1245
-gtk-icon-transform: rotate(-90deg);
1246
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1248
&:checked { -gtk-icon-transform: unset; }
1250
color: $secondary_fg_color;
1252
&:hover, &:active { color: $fg_color; }
1254
&:disabled { color: $disabled_secondary_fg_color; }
1256
&:selected {
1258
color: $secondary_inverse_fg_color;
1259
&:hover, &:active { color: $inverse_fg_color; }
1261
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1263
}
1264
}
1265
&.progressbar { // progress bar in treeviews
1267
border-style: none none solid;
1268
border-width: $bar_size;
1269
border-color: $primary_color;
1270
box-shadow: none;
1271
background-color: transparent;
1272
&:selected { border-color: currentColor; }
1274
}
1275
&.trough { // progress bar trough in treeviews
1277
border-style: none none solid;
1278
border-width: $bar_size;
1279
border-color: scale-alpha($primary_color, $lower_opacity);
1280
box-shadow: none;
1281
background-color: transparent;
1282
&:selected { border-color: $fill_color; }
1284
}
1285
header {
1287
button {
1288
@extend row.activatable;
1289
padding: 2px 6px;
1291
border-style: none solid solid none;
1292
border-width: 1px;
1293
border-color: $border_color;
1294
border-radius: 0;
1295
background-clip: border-box;
1296
&, &:hover, &:active { box-shadow: none; }
1298
&, &:disabled { background-color: $base_color; }
1300
&:last-child { border-right-style: none; }
1302
}
1303
}
1304
button.dnd,
1306
header.button.dnd { // for treeview-like derive widgets
1307
padding: 2px 6px;
1308
border-style: none solid solid;
1309
border-width: 1px;
1310
border-color: $border_color;
1311
border-radius: 0;
1312
box-shadow: none;
1313
background-color: $base_color;
1314
background-clip: border-box;
1315
color: $primary_color;
1316
}
1317
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1319
}
1320
/*********
1323
* Menus *
1324
*********/
1325
menubar,
1326
.menubar {
1327
-GtkWidget-window-dragging: true;
1328
padding: 0;
1329
// box-shadow: inset 0 -1px $border_color;
1330
background-color: $titlebar_bg_color;
1331
> menuitem {
1333
transition: $shorter_transition;
1334
min-height: 20px;
1335
padding: 4px 8px;
1336
color: $secondary_titlebar_fg_color;
1337
&:hover { //Seems like it :hover even with keyboard focus
1339
transition: none;
1340
background-color: $semi_fill_color;
1341
color: $titlebar_fg_color;
1342
}
1343
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1345
}
1346
}
1347
.csd.popup { border-radius: 2px; }
1349
menu,
1351
.menu,
1352
.context-menu {
1353
margin: 4px 0;
1354
padding: 4px 0;
1355
box-shadow: inset 0 1px $highlight_color;
1356
background-color: $base_color;
1357
border: 1px solid $border_color; // adds borders in a non composited env
1358
.csd & {
1360
border: none; // axes borders in a composited env
1361
border-radius: 2px;
1362
}
1363
menuitem {
1365
transition: $shorter_transition;
1366
min-height: 20px;
1367
min-width: 40px;
1368
padding: 4px 8px;
1369
font: initial;
1370
text-shadow: none;
1371
&:hover {
1373
transition: none;
1374
background-color: $semi_fill_color;
1375
}
1376
&:disabled { color: $disabled_fg_color; }
1378
// submenu indicators
1380
arrow {
1381
min-height: 16px;
1382
min-width: 16px;
1383
&:dir(ltr) {
1385
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1386
margin-left: 8px;
1387
}
1388
&:dir(rtl) {
1390
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1391
margin-right: 8px;
1392
}
1393
}
1394
// avoids labels color being overridden, see
1396
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1397
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1398
}
1399
// overflow arrows
1401
> arrow {
1402
min-height: 16px;
1403
min-width: 16px;
1404
padding: 4px;
1405
border-radius: 0;
1406
background-color: $base_color;
1407
color: $secondary_fg_color;
1408
&.top {
1410
margin-top: -4px;
1411
border-bottom: 1px solid $border_color;
1412
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1413
}
1414
&.bottom {
1416
margin-bottom: -4px;
1417
border-top: 1px solid $border_color;
1418
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1419
}
1420
&:hover {
1422
background-image: image($semi_fill_color);
1423
color: $fg_color;
1424
}
1425
&:disabled {
1427
border-color: transparent;
1428
background-color: transparent;
1429
color: transparent;
1430
// color: $disabled_secondary_fg_color;
1431
}
1432
}
1433
separator { margin: 4px 0; }
1435
}
1436
menuitem {
1438
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1439
check,
1441
radio {
1442
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1443
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1444
}
1445
}
1446
/***************
1449
* Popovers *
1450
***************/
1451
popover.background {
1452
transition: $shadow_transition;
1453
padding: 2px;
1454
box-shadow: $shadow_2; // TODO: this should really have a highlight
1455
background-color: $lighter_bg_color;
1456
&:backdrop { box-shadow: $shadow_1; }
1458
&, .csd & {
1460
border-style: solid;
1461
border-width: 1px;
1462
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1463
border-radius: 2px + 1px;
1464
}
1465
> stack { margin: -4px; } // remove extra padding from menu style popovers
1467
> toolbar { margin: -2px; }
1469
> list,
1471
> .view,
1472
> toolbar {
1473
border-style: none;
1474
box-shadow: none;
1475
background-color: transparent;
1476
}
1477
&.touch-selection,
1479
&.magnifier,
1480
&.osd { @extend %osd; }
1481
// entry { @extend %entry.flat; }
1483
// button.combo { @extend %combo_flat; }
1485
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1487
&.menu button,
1489
button.model {
1490
@extend %simple_flat_button;
1491
min-height: 32px;
1493
padding: 0 8px;
1494
border-radius: 2px;
1495
&:checked { @extend %selected_items; }
1497
}
1498
separator { margin: 4px 0; }
1500
list separator { margin: 0; }
1502
}
1503
/*************
1505
* Notebooks *
1506
*************/
1507
notebook {
1508
> header {
1509
border-width: 1px;
1510
border-color: $border_color;
1511
background-color: $bg_color;
1512
background-clip: border-box;
1513
&.top {
1515
border-bottom-style: solid;
1516
> tabs {
1517
margin-bottom: -1px;
1518
> tab {
1519
&:hover { box-shadow: inset 0 -2px $fill_color; }
1521
&:checked { box-shadow: inset 0 -2px $primary_color; }
1523
}
1524
}
1525
}
1526
&.bottom {
1528
border-top-style: solid;
1529
> tabs {
1530
margin-top: -1px;
1531
> tab {
1532
&:hover { box-shadow: inset 0 2px $fill_color; }
1534
&:checked { box-shadow: inset 0 2px $primary_color; }
1536
}
1537
}
1538
}
1539
&.left {
1541
border-right-style: solid;
1542
> tabs {
1543
margin-right: -1px;
1544
> tab {
1545
&:hover { box-shadow: inset -2px 0 $fill_color; }
1547
&:checked { box-shadow: inset -2px 0 $primary_color; }
1549
}
1550
}
1551
}
1552
&.right {
1554
border-left-style: solid;
1555
> tabs {
1556
margin-left: -1px;
1557
> tab {
1558
&:hover { box-shadow: inset 2px 0 $fill_color; }
1560
&:checked { box-shadow: inset 2px 0 $primary_color; }
1562
}
1563
}
1564
}
1565
&.top > tabs > arrow {
1567
@extend %notebook_vert_arrows;
1568
border-top-style: none;
1570
}
1571
&.bottom > tabs > arrow {
1573
@extend %notebook_vert_arrows;
1574
border-bottom-style: none;
1576
}
1577
@at-root %notebook_vert_arrows {
1579
padding-left: 4px;
1580
padding-right: 4px;
1581
&.down {
1583
margin-left: -8px;
1584
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1585
}
1586
&.up {
1588
margin-right: -8px;
1589
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1590
}
1591
}
1592
&.left > tabs > arrow {
1594
@extend %notebook_horz_arrows;
1595
border-left-style: none;
1597
}
1598
&.right > tabs > arrow {
1600
@extend %notebook_horz_arrows;
1601
border-right-style: none;
1603
}
1604
@at-root %notebook_horz_arrows {
1606
padding-top: 4px;
1607
padding-bottom: 4px;
1608
&.down {
1610
margin-top: -8px;
1611
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1612
}
1613
&.up {
1615
margin-bottom: -8px;
1616
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1617
}
1618
}
1619
> tabs > arrow {
1621
@extend %simple_flat_button;
1622
min-height: 16px;
1624
min-width: 16px;
1625
border-radius: 0;
1626
}
1627
tab {
1629
transition: $longer_transition,
1630
background-size 0,
1631
background-image 0;
1632
min-height: $small_size;
1633
min-width: $small_size;
1634
padding: $container_padding 12px;
1635
outline-offset: -6px;
1637
border-width: 1px; // for reorderable tabs
1639
border-color: transparent; //
1640
background-image: radial-gradient(circle farthest-corner at center,
1642
$primary_color 10%,
1643
transparent 0%);
1644
background-repeat: no-repeat;
1645
background-position: center;
1646
background-size: 0% 0%;
1647
color: $secondary_fg_color;
1649
font-weight: 500;
1650
&:hover {
1652
color: $fg_color;
1653
&.reorderable-page {
1655
border-color: $border_color;
1656
background-color: $alt_base_color;
1657
}
1658
}
1659
&:disabled { color: $disabled_secondary_fg_color; }
1661
&:checked {
1663
transition: $longer_transition,
1664
background-size $longer_duration $deceleration_curve,
1665
background-image $longer_duration + $ripple_duration $deceleration_curve;
1666
background-image: radial-gradient(circle farthest-corner at center,
1667
transparent 10%,
1668
transparent 0%);
1669
background-size: 1000% 1000%;
1670
color: $fg_color;
1671
&:disabled { color: $disabled_fg_color; }
1673
&.reorderable-page {
1675
border-color: $border_color;
1676
background-color: $base_color;
1677
}
1678
}
1679
// colors the button like the label, overridden otherwise
1681
button.flat {
1682
@extend %small_button;
1683
&:last-child {
1685
margin-left: $container_padding;
1686
margin-right: $container_padding - 12px;
1687
}
1688
&:first-child {
1690
margin-left: $container_padding - 12px;
1691
margin-right: $container_padding;
1692
}
1693
}
1694
}
1695
&.top,
1697
&.bottom {
1698
tabs {
1699
padding-left: 8px;
1700
padding-right: 8px;
1701
&:not(:only-child) {
1703
&:first-child { margin-left: 0; }
1704
&:last-child { margin-right: 0; }
1705
}
1706
tab {
1708
&.reorderable-page {
1709
margin: 0 -1px;
1710
border-style: none solid;
1711
}
1712
}
1713
}
1714
}
1715
&.left,
1717
&.right {
1718
tabs {
1719
padding-top: 8px;
1720
padding-bottom: 8px;
1721
&:not(:only-child) {
1723
&:first-child { margin-top: 0; }
1724
&:last-child { margin-bottom: 0; }
1725
}
1726
tab {
1728
&.reorderable-page {
1729
margin: -1px 0;
1730
border-style: solid none;
1731
}
1732
}
1733
}
1734
}
1735
}
1736
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1738
background-color: $base_color;
1739
entry:not(.search),
1741
spinbutton:not(.vertical) { @extend %entry.flat; }
1742
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1744
button.combo { @extend %combo_flat; }
1746
}
1747
}
1748
/**************
1751
* Scrollbars *
1752
**************/
1753
scrollbar {
1754
$_slider_min_length: 24px;
1755
// disable steppers
1757
@at-root * {
1758
-GtkScrollbar-has-backward-stepper: false;
1759
-GtkScrollbar-has-forward-stepper: false;
1760
}
1761
transition: $longer_transition;
1763
background-color: $base_color;
1764
background-clip: $extra_background_clip;
1765
// scrollbar border
1767
&.top { border-bottom: 1px solid $border_color; }
1768
&.bottom { border-top: 1px solid $border_color; }
1769
&.left { border-right: 1px solid $border_color; }
1770
&.right { border-left: 1px solid $border_color; }
1771
// slider
1773
slider {
1774
transition: $shorter_transition, margin 0, border-width 0;
1775
min-width: 8px;
1776
min-height: 8px;
1777
border: 4px solid transparent;
1778
border-radius: $circular_radius;
1779
background-clip: padding-box;
1780
background-color: $tertiary_fg_color;
1781
&:hover { background-color: $secondary_fg_color; }
1783
&:active { background-color: $fg_color; }
1785
&:disabled { background-color: $disabled_tertiary_fg_color; }
1787
}
1788
&.fine-tune {
1790
slider {
1791
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1792
min-width: 4px;
1793
min-height: 4px;
1794
}
1795
&.horizontal slider { margin: 2px 0; }
1797
&.vertical slider { margin: 0 2px; }
1799
}
1800
&.overlay-indicator {
1802
&:not(.dragging):not(.hovering) {
1803
border-color: transparent;
1804
background-color: transparent;
1805
slider {
1807
min-width: 4px;
1808
min-height: 4px;
1809
margin: 4px - 1px;
1810
border: 1px solid scale-alpha($base_color, $lower_opacity);
1811
}
1812
button {
1814
min-width: 4px;
1815
min-height: 4px;
1816
margin: 4px - 1px;
1817
border: 1px solid scale-alpha($base_color, $lower_opacity);
1818
border-radius: $circular_radius;
1819
background-color: $tertiary_fg_color;
1820
background-clip: padding-box;
1821
-gtk-icon-source: none;
1822
&:disabled { background-color: $disabled_tertiary_fg_color; }
1824
}
1825
&.horizontal {
1827
slider { min-width: $_slider_min_length; }
1828
button { min-width: 8px; }
1830
}
1831
&.vertical {
1833
slider { min-height: $_slider_min_length; }
1834
button { min-height: 8px; }
1836
}
1837
}
1838
&.dragging,
1840
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1841
}
1842
&.horizontal slider { min-width: $_slider_min_length; }
1844
&.vertical slider { min-height: $_slider_min_length; }
1846
// button styling
1848
button {
1849
@extend %simple_flat_button;
1850
min-width: 16px;
1852
min-height: 16px;
1853
padding: 0;
1854
border-radius: 0;
1855
}
1856
// button icons
1858
&.vertical {
1859
button {
1860
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1861
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1863
}
1864
}
1865
&.horizontal {
1867
button {
1868
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1869
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1871
}
1872
}
1873
}
1874
/**********
1877
* Switch *
1878
**********/
1879
switch {
1880
transition: $longer_transition;
1881
margin: $container_padding 0;
1882
border: 4px solid transparent;
1883
border-radius: $circular_radius;
1884
background-color: $fill_color;
1885
background-clip: padding-box;
1886
font-size: 0;
1887
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1889
&:checked {
1891
background-color: scale-alpha($accent_color, 0.5);
1892
&:disabled {
1894
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1895
color: $disabled_fg_color;
1896
}
1897
}
1898
slider {
1900
@include entry(normal);
1901
transition: $longer_transition, $shadow_transition, margin 0;
1903
min-width: $small_size;
1904
min-height: $small_size;
1905
margin: -4px 0 -4px -4px;
1906
border-radius: $circular_radius;
1907
-gtk-outline-radius: $circular_radius;
1908
}
1909
&:hover slider { @include entry(focus); }
1911
&:checked slider {
1913
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1914
animation: needs_attention $longer_duration $deceleration_curve;
1915
margin: -4px -4px -4px 0;
1916
background-color: $accent_color;
1917
color: $inverse_fg_color;
1918
}
1919
&:disabled slider { @include entry(disabled); }
1921
&:checked:disabled slider { animation: none; }
1923
row:selected & {
1925
}
1926
}
1927
/*************************
1930
* Check and Radio items *
1931
*************************/
1932
// draw regular check and radio items using our PNG assets
1933
// all assets are rendered from assets.svg. never add pngs directly
1934
//selection-mode
1936
@each $s, $as in ('', '-selectionmode'),
1937
(':hover', '-hover-selectionmode'),
1938
(':checked', '-checked-selectionmode'),
1939
(':checked:hover', '-checked-hover-selectionmode') {
1940
.view.content-view.check#{$s}:not(list) {
1941
-gtk-icon-shadow: $shadow_1;
1942
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1943
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1944
margin: 8px;
1945
background-color: transparent;
1946
}
1947
}
1948
checkbutton.text-button,
1950
radiobutton.text-button {
1951
// this is for a nice focus on check and radios text
1952
padding: 2px;
1953
outline-offset: 0;
1954
label:not(:only-child) { margin: 0 4px; }
1956
}
1957
check,
1959
radio {
1960
min-height: 24px;
1961
min-width: 24px;
1962
margin: -($large_size - 24px) / 2;
1963
padding: ($large_size - 24px) / 2;
1964
@extend %simple_flat_button;
1966
@extend %circular_button;
1968
&:checked, &:indeterminate { color: $accent_color; }
1970
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1972
// &:only-child { margin: -12px; }
1974
row &:not(:checked):not(:indeterminate) {
1976
color: gtkalpha(currentColor, $secondary_opacity);
1977
&:hover, &:active { color: currentColor; }
1979
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1981
}
1982
menu menuitem & {
1984
transition: none;
1985
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1986
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1988
&, &:hover, &:disabled {
1990
box-shadow: none;
1991
// color: inherit;
1992
// animation: none;
1993
}
1994
}
1995
}
1996
%check,
1998
check {
1999
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
2000
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
2001
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
2003
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
2004
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
2006
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
2007
}
2008
$radio_indicator: 10 / ($large_size / 1px) / 2;
2010
$radio_radius_slice: #{$large_size / 2 / 1px};
2011
$radio_radius_width: #{$large_size / 2};
2012
%radio,
2014
radio {
2015
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
2016
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
2017
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2019
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
2020
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2022
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2023
border-image: -gtk-gradient(radial,
2025
center center, 0,
2026
center center, 0.001,
2027
to($accent_color),
2028
to(transparent))
2029
$radio_radius_slice / $radio_radius_width;
2030
&:checked {
2032
border-image: -gtk-gradient(radial,
2033
center center, 0,
2034
center center, $radio_indicator,
2035
to($accent_color),
2036
to(transparent))
2037
$radio_radius_slice / $radio_radius_width;
2038
}
2039
&:checked:disabled {
2041
border-image: -gtk-gradient(radial,
2042
center center, 0,
2043
center center, $radio_indicator,
2044
to(scale-alpha($accent_color, $disabled_opacity)),
2045
to(transparent))
2046
$radio_radius_slice / $radio_radius_width;
2047
}
2048
&:indeterminate:checked {
2050
border-image: -gtk-gradient(radial,
2051
center center, 0,
2052
center center, 0.001,
2053
to($accent_color),
2054
to(transparent))
2055
$radio_radius_slice / $radio_radius_width;
2056
}
2057
}
2058
// let's animate things
2060
@keyframes check_check {
2061
from { -gtk-icon-transform: rotate(90deg); }
2062
to { -gtk-icon-transform: unset; }
2063
}
2064
@keyframes check_radio { // FIXME: cannot animate border-image
2066
from {
2067
border-image: -gtk-gradient(radial,
2068
center center, 0,
2069
center center, 0.001,
2070
to($accent_color),
2071
to(transparent))
2072
$radio_radius_slice / $radio_radius_width;
2073
}
2074
to {
2076
border-image: -gtk-gradient(radial,
2077
center center, 0,
2078
center center, $radio_indicator,
2079
to($accent_color),
2080
to(transparent))
2081
$radio_radius_slice / $radio_radius_width;
2082
}
2083
}
2084
@keyframes check_indeterminate {
2086
from { -gtk-icon-transform: unset; }
2087
50% { -gtk-icon-transform: scale(0, 1); }
2088
to { -gtk-icon-transform: unset; }
2089
}
2090
%check_checked,
2092
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2093
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2095
// %radio_checked,
2097
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2098
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2100
%indeterminate_checked,
2102
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2103
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2105
// no animations in menus
2107
menu menuitem {
2108
check:not(:indeterminate):checked,
2109
radio:not(:indeterminate):checked,
2110
check:indeterminate:checked,
2111
radio:indeterminate:checked { animation: none; }
2112
}
2113
treeview.view check,
2115
treeview.view radio {
2116
padding: 0;
2117
&:hover {
2119
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2120
&:disabled { box-shadow: none; }
2122
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2124
}
2125
& {
2127
color: $secondary_fg_color;
2128
&:hover, &:active { color: $fg_color; }
2130
&:disabled { color: $disabled_secondary_fg_color; }
2132
&:checked, &:indeterminate { color: $accent_color; }
2134
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2136
}
2137
&:selected {
2139
color: $secondary_inverse_fg_color;
2140
&:hover, &:active { color: $inverse_fg_color; }
2142
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2144
&:checked, &:indeterminate { color: $accent_color; }
2146
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2148
}
2149
}
2150
treeview.view radio:checked {
2152
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2153
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2154
border-image: none;
2155
}
2156
/************
2159
* GtkScale *
2160
************/
2161
scale {
2162
// sizing
2163
$_marks_lenght: 8px;
2164
$_marks_distance: 8px;
2165
$slider_size: 24px;
2167
$marks_slider_size: 30px;
2168
$slider_margin: -($slider_size - $bar_size) / 2;
2170
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2171
$color_slider_margin: -($slider_size) / 2;
2173
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2174
min-height: $medium_size - $slider_size;
2176
min-width: $medium_size - $slider_size;
2177
padding: ($slider_size / 2);
2178
* { transition: $longer_transition; }
2180
// the slider is inside the trough, so to have make it bigger there's a negative margin
2182
slider {
2183
min-height: $slider_size;
2184
min-width: $slider_size;
2185
margin: $slider_margin;
2186
}
2187
// the backing bit
2189
trough {
2190
outline-offset: 2px;
2191
background-color: $fill_color;
2192
&:disabled { color: $disabled_fg_color; }
2194
}
2195
// the colored part of the backing bit
2197
highlight {
2198
background-color: $accent_color;
2199
&:disabled { background-color: transparent; }
2201
}
2202
// this is another differently styled part of the backing bit, the most relevant use case is for example
2204
// in media player to indicate how much video stream as been cached
2205
fill {
2206
background-color: $fill_color;
2207
&:disabled { background-color: transparent; }
2209
}
2210
slider {
2212
transition: all $shorter_duration $standard_curve;
2213
// border-radius: 100%;
2214
// background-color: $accent_color;
2215
background-repeat: no-repeat;
2216
background-position: center;
2217
@each $s, $as in ('', ''),
2219
(':disabled', '-insensitive') {
2220
&#{$s} {
2221
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2222
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2224
}
2225
}
2226
background-size: calc(100% - 8px);
2228
&:hover { background-size: calc(100% - 4px); }
2230
&:active { background-size: calc(100% - 0px); }
2232
}
2233
// click-and-hold the slider to activate
2235
&.fine-tune {
2236
// to make the slider shrink in fine-tune mode
2237
slider { background-size: calc(100% - 12px); }
2238
}
2239
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2241
marks {
2243
color: $fill_color;
2244
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2246
(bottom, bottom, top),
2247
(top, left, right),
2248
(bottom, right, left) {
2249
&.#{$marks_class} {
2250
margin-#{$marks_margin}: $_marks_distance;
2251
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2252
}
2253
}
2254
}
2255
&.horizontal {
2257
indicator {
2258
min-height: $_marks_lenght;
2259
min-width: 1px;
2260
}
2261
}
2262
&.vertical {
2264
indicator {
2265
min-height: 1px;
2266
min-width: $_marks_lenght;
2267
}
2268
}
2269
// *WARNING* scale with marks madness following
2271
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2273
('vertical', 'vert') {
2274
@each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
2275
('scale-has-marks-below', 'marks-after:not(.marks-before)') {
2276
&.#{$dir_class}.#{$marks_class} {
2277
slider {
2278
@each $state, $state_infix in ('', ''),
2279
(':disabled', '-insensitive') {
2280
&#{$state} {
2281
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$asset_suffix}';
2282
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2284
}
2285
}
2286
@if $dir_class == 'horizontal' {
2288
min-height: $marks_slider_size;
2289
min-width: $slider_size;
2290
@if $marks_infix == 'scale-has-marks-above' {
2292
margin-top: $marks_slider_margin;
2293
background-position: center calc(100% - 4px);
2295
&:hover { background-position: center calc(100% - 2px); }
2297
&:active { background-position: center calc(100% - 0px); }
2299
}
2300
@if $marks_infix == 'scale-has-marks-below' {
2302
margin-bottom: $marks_slider_margin;
2303
background-position: center calc(4px);
2305
&:hover { background-position: center calc(2px); }
2307
&:active { background-position: center calc(0px); }
2309
}
2310
}
2311
@if $dir_class == 'vertical' {
2313
min-height: $slider_size;
2314
min-width: $marks_slider_size;
2315
@if $marks_infix == 'scale-has-marks-above' {
2317
margin-left: $marks_slider_margin;
2318
background-position: calc(4px) center;
2320
&:hover { background-position: calc(2px) center; }
2322
&:active { background-position: calc(0px) center; }
2324
}
2325
@if $marks_infix == 'scale-has-marks-below' {
2327
margin-right: $marks_slider_margin;
2328
background-position: calc(100% - 4px) center;
2330
&:hover { background-position: calc(100% - 2px) center; }
2332
&:active { background-position: calc(100% - 0px) center; }
2334
}
2335
}
2336
}
2337
&.fine-tune slider {
2339
@if $dir_class == 'horizontal' {
2340
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2341
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2343
}
2344
@if $dir_class == 'vertical' {
2346
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2347
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2349
}
2350
}
2351
}
2352
}
2353
}
2354
&.color {
2356
min-height: 0;
2357
min-width: 0;
2358
&.horizontal {
2360
padding: 0 0 12px 0;
2361
slider {
2363
&:dir(ltr), &:dir(rtl) { // specificity bump
2364
margin-bottom: $color_slider_margin;
2365
margin-top: $color_marks_slider_margin;
2366
}
2367
}
2368
}
2369
&.vertical {
2371
&:dir(ltr) {
2372
padding: 0 0 0 12px;
2373
slider {
2375
margin-left: $color_slider_margin;
2376
margin-right: $color_marks_slider_margin;
2377
}
2378
}
2379
&:dir(rtl) {
2381
padding: 0 12px 0 0;
2382
slider {
2384
margin-right: $color_slider_margin;
2385
margin-left: $color_marks_slider_margin;
2386
}
2387
}
2388
}
2389
}
2390
}
2391
/*****************
2394
* Progress bars *
2395
*****************/
2396
progressbar {
2397
// sizing
2398
&.horizontal {
2399
trough,
2400
progress { min-height: $bar_size; }
2401
}
2402
&.vertical {
2404
trough,
2405
progress { min-width: $bar_size; }
2406
}
2407
// FIXME: insensitive state missing and some other state should be set probably
2409
color: $tertiary_fg_color;
2410
font-size: smaller;
2411
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2413
progress { background-color: $primary_color; }
2415
&.osd { // progressbar.osd used for epiphany page loading progress
2417
// min-width: $bar_size;
2418
// min-height: $bar_size;
2419
// background-color: transparent;
2420
// trough { background-color: transparent; }
2422
progress {
2424
}
2425
}
2426
}
2427
/*************
2430
* Level Bar *
2431
*************/
2432
levelbar {
2433
block {
2434
min-width: $medium_size;
2435
min-height: $bar_size;
2436
}
2437
&.vertical block {
2439
min-width: $bar_size;
2440
min-height: $medium_size;
2441
}
2442
trough {
2444
padding: 2px;
2445
border-radius: 2px;
2446
@include entry(normal);
2448
&:disabled { @include entry(disabled); }
2450
}
2451
&.horizontal.discrete block { margin: 0 1px; }
2453
&.vertical.discrete block { margin: 1px 0; }
2455
&.horizontal.discrete trough { padding: 2px 1px; }
2457
&.vertical.discrete trough { padding: 1px 2px; }
2459
block {
2461
&.low {
2462
background-color: $warning_color;
2463
}
2464
&.high,
2466
&:not(.empty) {
2467
background-color: $primary_color;
2468
}
2469
&.full {
2471
background-color: $success_color;
2472
}
2473
&.empty {
2475
background-color: $fill_color;
2476
color: $disabled_fg_color;
2477
}
2478
}
2479
}
2480
/****************
2483
* Print dialog *
2484
*****************/
2485
printdialog {
2486
paper {
2487
padding: 0;
2488
border: 1px solid $border_color;
2489
background: $base_color;
2490
color: $fg_color;
2491
}
2492
.dialog-action-box { margin: 12px; }
2494
}
2495
/**********
2498
* Frames *
2499
**********/
2500
frame > border,
2501
.frame {
2502
margin: 0;
2503
padding: 0;
2504
border: 1px solid $border_color;
2505
border-radius: 0;
2506
box-shadow: none;
2507
&.flat { border-style: none; }
2509
}
2510
actionbar > revealer > box {
2512
padding: $container_padding;
2513
border-top: 1px solid $border_color;
2514
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2516
}
2517
scrolledwindow {
2519
viewport.frame { // avoid double borders when viewport inside scrolled window
2520
border-style: none;
2521
}
2522
// This is used when content is touch-dragged past boundaries.
2524
// draws a box on top of the content, the size changes programmatically.
2525
@at-root overshoot {
2526
&.top { @include overshoot(top); }
2527
&.bottom { @include overshoot(bottom); }
2529
&.left { @include overshoot(left); }
2531
&.right { @include overshoot(right); }
2533
}
2534
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2536
@at-root undershoot {
2537
&.top { @include undershoot(top); }
2538
&.bottom { @include undershoot(bottom); }
2540
&.left { @include undershoot(left); }
2542
&.right { @include undershoot(right); }
2544
}
2545
@at-root junction { // the small square between two scrollbars
2547
border-style: solid none none solid;
2548
border-width: 1px;
2549
border-color: $border_color;
2550
background-color: $base_color;
2551
&:dir(rtl) { border-style: solid solid none none; }
2553
}
2554
}
2555
//vbox and hbox separators
2557
separator {
2558
min-width: 1px;
2559
min-height: 1px;
2560
background: $border_color;
2561
}
2562
/*********
2565
* Lists *
2566
*********/
2567
list {
2568
border-color: $border_color;
2569
background-color: $base_color;
2570
row { padding: 2px; }
2572
}
2573
// FIXME
2575
$row_transition: $longer_transition, background-color 0, color 0;
2576
row {
2578
&.activatable {
2579
transition: $row_transition,
2580
background-size $ripple_duration $deceleration_curve,
2581
background-image $ripple_duration * 2 $deceleration_curve;
2582
box-shadow: inset 0 0 0 9999px transparent;
2583
background-image: radial-gradient(circle farthest-corner at center,
2584
transparent 10%,
2585
transparent 0%);
2586
background-repeat: no-repeat;
2587
background-position: center;
2588
background-size: 1000% 1000%;
2589
&:hover {
2591
transition: $row_transition,
2592
box-shadow 0,
2593
background-size $ripple_duration $deceleration_curve,
2594
background-image $ripple_duration * 2 $deceleration_curve;
2595
box-shadow: inset 0 0 0 9999px $row_fill_color;
2596
}
2597
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2599
&:active {
2600
transition: $row_transition,
2601
background-size 0,
2602
background-image 0;
2603
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2604
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2605
background-image: radial-gradient(circle farthest-corner at center,
2606
$semi_fill_color 10%,
2607
transparent 0%);
2608
background-size: 0% 0%;
2609
}
2610
}
2611
&:selected { @extend %selected_items; }
2613
}
2614
/*********************
2617
* App Notifications *
2618
*********************/
2619
.app-notification {
2620
@extend %osd;
2621
@extend toolbar.osd;
2623
margin: 8px;
2625
button { @extend %button_basic.flat; }
2627
&.frame,
2629
border { border-style: none; }
2630
}
2631
/*************
2634
* Expanders *
2635
*************/
2636
expander {
2637
arrow {
2638
transition: all $shorter_duration $standard_curve;
2639
min-width: 16px;
2640
min-height: 16px;
2641
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2642
-gtk-icon-transform: rotate(-90deg);
2643
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2645
&:checked { -gtk-icon-transform: unset; }
2647
color: $secondary_fg_color;
2649
&:hover, &:active { color: $fg_color; }
2651
&:disabled { color: $disabled_secondary_fg_color; }
2653
&:selected {
2655
color: $secondary_inverse_fg_color;
2656
&:hover, &:active { color: $inverse_fg_color; }
2658
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2660
}
2661
}
2662
}
2663
/************
2666
* Calendar *
2667
***********/
2668
calendar {
2669
padding: 1px;
2670
border: 1px solid $border_color;
2671
color: $fg_color;
2672
&:disabled { color: $disabled_fg_color; }
2674
&:selected {
2676
@extend %selected_items;
2677
border-radius: 2px + 1px;
2679
}
2680
&.header {
2682
border-style: none none solid;
2683
border-radius: 0;
2684
}
2685
&.button { @extend %simple_flat_button; }
2687
&.highlight {
2689
color: gtkalpha(currentColor, $tertiary_opacity);
2690
font-weight: 500;
2691
}
2692
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2694
}
2695
/***********
2698
* Dialogs *
2699
***********/
2700
messagedialog { // Message Dialog styling
2701
&.background { background-color: $lighter_bg_color; }
2702
.titlebar {
2704
min-height: $small_size;
2705
border-style: none;
2706
box-shadow: inset 0 1px $highlight_color;
2707
background-color: $lighter_bg_color;
2708
color: $fg_color;
2709
&:backdrop { color: $secondary_fg_color; }
2711
}
2712
&.csd { // rounded bottom border styling for csd version
2714
&.background {
2715
// bigger radius for better antialiasing
2716
border-bottom-left-radius: 2px;
2717
border-bottom-right-radius: 2px;
2718
}
2719
.dialog-action-area button {
2721
padding: 8px 16px;
2722
border-top: 1px solid $border_color;
2723
border-radius: 0;
2724
@extend %simple_flat_button;
2726
&:first-child { border-bottom-left-radius: 2px; }
2728
&:last-child { border-bottom-right-radius: 2px; }
2730
}
2731
}
2732
}
2733
filechooser {
2735
.dialog-action-box { border-top: 1px solid $border_color; }
2736
#pathbarbox {
2738
border-bottom: 1px solid $border_color;
2739
background-color: $bg_color;
2740
}
2741
}
2742
filechooserbutton:drop(active) {
2744
box-shadow: none;
2745
}
2746
/***********
2749
* Sidebar *
2750
***********/
2751
.sidebar {
2752
border-style: none;
2753
background-color: $lighter_bg_color;
2754
@at-root %sidebar_left,
2756
&:dir(ltr),
2757
&.left,
2758
&.left:dir(rtl) {
2759
border-right: 1px solid $border_color;
2760
border-left-style: none;
2761
}
2762
@at-root %sidebar_right
2764
&:dir(rtl),
2765
&.right {
2766
border-left: 1px solid $border_color;
2767
border-right-style: none;
2768
}
2769
list { background-color: transparent; }
2771
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2773
}
2774
stacksidebar {
2776
&.sidebar {
2777
&:dir(ltr),
2778
&.left,
2779
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2780
&:dir(rtl),
2782
&.right { list { @extend %sidebar_right; }}
2783
}
2784
row {
2786
padding: 10px 4px;
2787
> label {
2789
padding-left: 6px;
2790
padding-right: 6px;
2791
}
2792
&.needs-attention > label { @extend %needs_attention; }
2794
}
2795
}
2796
/****************
2799
* File chooser *
2800
****************/
2801
placessidebar {
2802
> viewport.frame { border-style: none; }
2803
list { padding: (4px - 3px) 0 4px; }
2805
row {
2807
// Needs overriding of the GtkListBoxRow padding
2808
min-height: 32px;
2809
margin: -1px 0; // Remove unknown margins
2810
padding: 0;
2811
// Using margins/padding directly in the SidebarRow
2813
// will make the animation of the new bookmark row jump
2814
> revealer { padding: 0 12px; }
2815
&:selected { color: $inverse_fg_color; }
2817
&:disabled { color: $disabled_fg_color; }
2819
image.sidebar-icon {
2821
opacity: $tertiary_opacity; // dim the device icons
2822
&:dir(ltr) { padding-right: 8px; }
2824
&:dir(rtl) { padding-left: 8px; }
2825
}
2826
label.sidebar-label {
2828
&:dir(ltr) { padding-right: 2px; }
2829
&:dir(rtl) { padding-left: 2px; }
2830
}
2831
@at-root button.sidebar-button {
2833
@extend %simple_flat_button;
2834
@extend %small_button;
2836
row:selected & {
2838
}
2839
}
2840
&.sidebar-placeholder-row {
2842
min-height: 2px;
2843
padding: 0 8px;
2844
background-image: image($accent_color);
2845
background-clip: content-box;
2846
}
2847
&.sidebar-new-bookmark-row { color: $accent_color; }
2849
&:drop(active):not(:disabled) {
2851
box-shadow: inset 0 0 0 2px $accent_color;
2852
&:selected {
2854
// background-color: $accent_color;
2855
// color: $inverse_fg_color;
2856
}
2857
}
2858
}
2859
}
2860
placesview {
2862
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2863
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2865
// this selects the "connect to server" label
2867
> actionbar > revealer > box > label {
2868
padding-left: 8px;
2869
padding-right: 8px;
2870
}
2871
}
2872
/*********
2875
* Paned *
2876
*********/
2877
paned {
2878
> separator {
2879
min-width: 1px;
2880
min-height: 1px;
2881
-gtk-icon-source: none; // defeats the ugly default handle decoration
2882
border-style: none; // just to be sure
2883
background-color: transparent;
2884
// workaround, using background istead of a border since the border will get rendered twice (?)
2885
background-image: image($border_color);
2886
background-size: 1px 1px;
2887
background-clip: content-box; // avoids borders image being rendered twice (?)
2888
&.wide {
2890
min-width: 6px;
2891
min-height: 6px;
2892
background-color: $bg_color;
2893
background-image: image($border_color), image($border_color);
2894
background-size: 1px 1px, 1px 1px;
2895
}
2896
}
2897
&.horizontal > separator {
2899
background-repeat: repeat-y;
2900
&:dir(ltr) {
2902
margin: 0 -8px 0 0;
2903
padding: 0 8px 0 0;
2904
background-position: left;
2905
}
2906
&:dir(rtl) {
2908
margin: 0 0 0 -8px;
2909
padding: 0 0 0 8px;
2910
background-position: right;
2911
}
2912
&.wide {
2914
margin: 0;
2915
padding: 0;
2916
background-repeat: repeat-y, repeat-y;
2917
background-position: left, right;
2918
}
2919
}
2920
&.vertical > separator {
2922
margin: 0 0 -8px 0;
2923
padding: 0 0 8px 0;
2924
background-repeat: repeat-x;
2925
background-position: top;
2926
&.wide {
2928
margin: 0;
2929
padding: 0;
2930
background-repeat: repeat-x, repeat-x;
2931
background-position: bottom, top;
2932
}
2933
}
2934
}
2935
/**************
2938
* GtkInfoBar *
2939
**************/
2940
infobar {
2941
border-style: none;
2942
&.info { background-color: $info_bg_color; }
2944
&.question { background-color: $question_bg_color; }
2946
&.warning { background-color: $warning_bg_color; }
2948
&.error { background-color: $error_bg_color; }
2950
&.info,
2952
&.question,
2953
&.warning,
2954
&.error {
2955
> label, & { color: $inverse_fg_color; }
2956
button { @extend %button_selected; }
2958
selection {}
2960
*:link { @extend %link_selected; }
2962
}
2963
}
2964
/************
2967
* Tooltips *
2968
************/
2969
tooltip {
2970
&.background {
2971
// background-color needs to be set this way otherwise it gets drawn twice
2972
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2973
box-shadow: inset 0 1px $highlight_color;
2974
background-color: scale-alpha($base_color, $higher_opacity);
2975
}
2976
// @extend %osd;
2978
// padding: 4px; /* not working */
2980
border-radius: 2px;
2981
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2982
&:not(.csd) {
2984
border: 1px solid $border_color;
2985
border-radius: 2px + 1px;
2986
background-clip: $extra_background_clip;
2987
}
2988
// FIXME: we need a border or tooltips vanish on black background.
2990
decoration { background-color: transparent; }
2991
label {
2993
// tooltip label has already 6px margins
2994
min-height: 32px - 6px * 2;
2995
padding: 0 8px - 6px;
2996
}
2997
* {
2999
// workaround for Eclipse.
3000
// do not include any declaration here.
3001
// padding: 0;
3002
// background-color: transparent;
3003
// color: inherit;
3004
}
3005
}
3006
/*****************
3009
* Color Chooser *
3010
*****************/
3011
colorswatch {
3012
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3013
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3014
// applied to the overlay box.
3015
// base color corners rounding
3017
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3018
// sports a bigger radius.
3019
// nth-child is needed by the custom color strip.
3020
&.top {
3022
border-top-left-radius: $material_radius + 0.5px;
3023
border-top-right-radius: $material_radius + 0.5px;
3024
overlay {
3026
border-top-left-radius: $material_radius;
3027
border-top-right-radius: $material_radius;
3028
}
3029
}
3030
&.bottom {
3032
border-bottom-left-radius: $material_radius + 0.5px;
3033
border-bottom-right-radius: $material_radius + 0.5px;
3034
overlay {
3036
border-bottom-left-radius: $material_radius;
3037
border-bottom-right-radius: $material_radius;
3038
}
3039
}
3040
&.left,
3042
&:first-child:not(.top) {
3043
border-top-left-radius: $material_radius + 0.5px;
3044
border-bottom-left-radius: $material_radius + 0.5px;
3045
overlay {
3047
border-top-left-radius: $material_radius;
3048
border-bottom-left-radius: $material_radius;
3049
}
3050
}
3051
&.right,
3053
&:last-child:not(.bottom) {
3054
border-top-right-radius: $material_radius + 0.5px;
3055
border-bottom-right-radius: $material_radius + 0.5px;
3056
overlay {
3058
border-top-right-radius: $material_radius;
3059
border-bottom-right-radius: $material_radius;
3060
}
3061
}
3062
&.dark overlay { color: $light_fg_color; }
3064
&.light overlay { color: $dark_fg_color; }
3066
&.dark { color: $light_fg_color; } // for focus ring
3068
&.light { color: $dark_fg_color; } // for focus ring
3070
&:drop(active) {
3072
box-shadow: none;
3073
&.light overlay {
3075
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3076
}
3077
&.dark overlay {
3079
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3080
}
3081
}
3082
overlay {
3084
transition: $shadow_transition;
3085
box-shadow: $shadow_1;
3086
&:hover { box-shadow: $shadow_2; }
3088
}
3089
&#add-color-button {
3091
border-radius: $material_radius $material_radius 0 0;
3092
color: $light_fg_color; // for focus ring
3093
&:only-child { border-radius: $material_radius; }
3095
overlay {
3097
background-image: linear-gradient(to right,
3098
$error_bg_color 25%,
3099
$warning_bg_color 25%, $warning_bg_color 50%,
3100
$info_bg_color 50%, $info_bg_color 75%,
3101
$question_bg_color 75%);
3102
color: $light_fg_color;
3103
}
3104
}
3105
&:disabled {
3107
opacity: $disabled_opacity;
3108
overlay { box-shadow: none; }
3110
}
3111
row:selected & {
3113
}
3114
&#editor-color-sample {
3116
border-radius: $material_radius + 0.5px;
3117
overlay { border-radius: $material_radius; }
3119
// overlay:hover { box-shadow: $shadow_1; }
3121
}
3122
}
3123
// colorscale popup
3125
colorchooser .popover.osd {
3126
transition: $shadow_transition;
3127
border-radius: 2px;
3128
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3129
background-color: $base_color;
3130
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3132
spinbutton:not(.vertical) { @extend %entry.flat; }
3134
}
3135
/********
3138
* Misc *
3139
********/
3140
//content view (grid/list)
3141
.content-view {
3142
background-color: $bg_color;
3143
// &:hover { -gtk-icon-effect: highlight; }
3145
rubberband { @extend rubberband; }
3147
}
3148
.scale-popup {
3150
.osd & { @extend %osd; }
3151
.osd & button.flat { //FIXME: quick hack, redo properly
3153
}
3154
button { // +/- buttons on GtkVolumeButton popup
3156
}
3157
}
3158
/**********************
3161
* Window Decorations *
3162
*********************/
3163
decoration {
3164
transition: $shadow_transition;
3165
border-radius: 2px 2px 0 0;
3166
box-shadow: $shadow_4, 0 16px 16px transparent;
3167
// FIXME rationalize shadows
3169
// this is used for the resize cursor area
3171
margin: 8px;
3172
&:backdrop {
3174
// the transparent shadow here is to enforce that the shadow extents don't
3175
// change when we go to backdrop, to prevent jumping windows.
3176
// The biggest shadow should be in the same order then in the active state
3177
// or the jumping will happen during the transition.
3178
box-shadow: $shadow_2, 0 16px 16px transparent;
3179
}
3180
.maximized &,
3182
.fullscreen &,
3183
.tiled & { border-radius: 0; }
3184
.popup & { box-shadow: none; }
3186
// server-side decorations as used by mutter
3188
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3189
.csd.popup & {
3191
border-radius: 2px;
3192
box-shadow: $shadow_2;
3193
}
3194
tooltip.csd & {
3196
border-radius: 2px;
3197
box-shadow: $shadow_2;
3198
}
3199
messagedialog.csd & {
3201
border-radius: 2px;
3202
// box-shadow: $shadow_4, 0 16px 16px transparent;
3203
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3205
}
3206
.solid-csd & {
3208
margin: 0;
3209
padding: 4px;
3210
// border: solid 1px $border_color;
3211
// border-radius: 0;
3212
box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3213
// background-color: $border_color;
3214
}
3215
}
3216
// Window Close button
3218
button.titlebutton {
3219
// @extend %simple_flat_button;
3220
@extend %circular_button;
3222
.selection-mode & {
3224
}
3225
}
3226
// catch all extend :)
3229
%selected_items {
3231
background-color: $primary_color;
3232
@at-root %nobg_selected_items, & {
3234
color: $inverse_fg_color;
3235
&:disabled { color: $disabled_inverse_fg_color; }
3237
}
3238
}
3239
.monospace { font-family: monospace; }
3241
/**********************
3244
* Touch Copy & Paste *
3245
*********************/
3246
//touch selection handlebars for the Popover.osd above
3247
cursor-handle {
3248
border-radius: $circular_radius;
3249
background-color: $accent_color;
3250
background-image: none;
3251
&.top:dir(ltr), &.bottom:dir(rtl) {
3253
padding-left: 6px;
3254
border-top-right-radius: 0;
3255
}
3256
&.bottom:dir(ltr), &.top:dir(rtl) {
3258
padding-right: 6px;
3259
border-top-left-radius: 0;
3260
}
3261
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3263
-GtkWidget-text-handle-width: 24;
3264
-GtkWidget-text-handle-height: 30;
3265
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3267
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3268
url('#{$_url}@2.png'));
3269
}
3270
}
3271
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3273
%circular_button,
3275
button.close,
3276
button.circular { // FIXME: aggregate to buttons
3277
border-radius: $circular_radius;
3278
-gtk-outline-radius: $circular_radius;
3279
// label { padding: 0; }
3281
}
3282
%small_button {
3284
min-height: $small_size;
3285
min-width: $small_size;
3286
padding: 0;
3287
border-radius: $circular_radius;
3288
-gtk-outline-radius: $circular_radius;
3289
}
3290
// shortcut window keys
3292
.keycap {
3293
min-width: 28px - 8px * 2;
3294
min-height: 28px - 2px;
3295
margin-top: 2px;
3296
padding-bottom: 2px;
3297
padding-left: 8px;
3298
padding-right: 8px;
3299
border: solid 1px $border_color;
3301
border-radius: 2px + 1px;
3302
box-shadow: inset 0 -2px $border_color;
3303
background-color: $base_color;
3304
color: $fg_color;
3305
font-size: smaller;
3306
}
3307
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3309
transition: $longer_transition;
3310
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3311
caret-color: $accent_color;
3312
}
3313
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3315
stackswitcher button.circular,
3317
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3318
min-width: $medium_size;
3319
min-height: $medium_size;
3320
padding: 0;
3321
}
3322