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: 6px; }
258
&.right { margin-left: 6px; 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
&:disabled { @include button(disabled, $b_color); }
483
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
485
&.flat {
487
background-color: transparent;
488
color: $b_color;
489
&:disabled { @include button(flat-disabled, $b_color); }
491
&:checked { background-color: $fill_color; }
493
}
494
.osd & {
496
}
497
}
498
}
499
.stack-switcher > & {
501
// to position the needs attention dot, padding is added to the button
502
// child, a label needs just lateral padding while an icon needs vertical
503
// padding added too.
504
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
506
> label {
508
padding-left: 6px; // label padding
509
padding-right: 6px; //
510
}
511
> image {
513
padding-left: 6px; // image padding
514
padding-right: 6px; //
515
padding-top: 3px; //
516
padding-bottom: 3px; //
517
}
518
&.text-button {
520
// compensate text-button paddings
521
padding-left: 16px - 6px;
522
padding-right: 16px - 6px;
523
}
524
&.image-button {
526
// we want image buttons to have a 1:1 aspect ratio, so compensation
527
// of the padding added to the GtkImage is needed
528
padding-left: ($medium_size - 16px) / 2 - 6px;
529
padding-right: ($medium_size - 16px) / 2 - 6px;
530
}
531
&.needs-attention {
533
> label,
534
> image { @extend %needs_attention; }
535
&:checked {
537
> label,
538
> image {
539
animation: none;
540
background-image: none;
541
}
542
}
543
}
544
}
545
// hide separators
547
separator {
548
min-width: 0;
549
min-height: 0;
550
background: transparent;
551
}
552
// &.font,
554
// &.file { separator { background-color: transparent; }}
555
// &.font { > box > box > label { font-weight: bold; }}
557
// inline-toolbar buttons
559
.inline-toolbar & {
560
// @extend %button_basic.flat;
561
&:not(.text-button) { @extend %circular_button; }
563
}
564
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
566
}
567
%needs_attention {
569
animation: needs_attention $longer_duration $deceleration_curve forwards;
570
background-repeat: no-repeat;
571
background-position: right 3px;
572
background-size: 6px 6px;
573
&:dir(rtl) { background-position: left 3px; }
575
}
576
// all the following is for the +|- buttons on inline toolbars, that way
578
// should really be deprecated...
579
.inline-toolbar toolbutton > button { // redefining the button look is
580
// needed since those are flat...
581
}
582
// More inline toolbar buttons
584
toolbar.inline-toolbar toolbutton {
585
// > button.flat { @extend %linked_middle; }
586
// &:first-child > button.flat { @extend %linked:first-child; }
588
// &:last-child > button.flat { @extend %linked:last-child; }
590
// &:only-child > button.flat { @extend %linked:only-child; }
592
}
593
%linked_middle {
595
border-radius: 0;
596
-gtk-outline-radius: 2px;
597
}
598
%linked {
600
@extend %linked_middle;
601
&:first-child {
603
border-top-left-radius: 2px;
604
border-bottom-left-radius: 2px;
605
}
606
&:last-child {
608
border-top-right-radius: 2px;
609
border-bottom-right-radius: 2px;
610
}
611
&:only-child {
613
border-radius: 2px;
614
}
615
}
616
%linked_vertical_middle {
618
border-radius: 0;
619
-gtk-outline-radius: 2px;
620
}
621
%linked_vertical{
623
@extend %linked_vertical_middle;
624
&:first-child {
626
border-top-left-radius: 2px;
627
border-top-right-radius: 2px;
628
}
629
&:last-child {
631
border-bottom-left-radius: 2px;
632
border-bottom-right-radius: 2px;
633
}
634
&:only-child {
636
border-radius: 2px;
637
}
638
}
639
/* menu buttons */
641
modelbutton.flat,
642
.menuitem.button.flat {
643
min-height: $menuitem_size;
644
padding: 0 8px;
645
border-radius: 2px;
646
color: inherit;
647
@extend %simple_flat_button;
649
&:selected { @extend %selected_items; }
651
check,
653
radio {
654
box-shadow: none;
655
background-image: none;
656
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
658
&:last-child { margin-left: -8px; margin-right: -16px; }
660
&:first-child { margin-left: -16px; margin-right: -8px; }
662
}
663
check:not(:indeterminate):checked { @extend %check_checked; }
665
// radio:not(:indeterminate):checked { @extend %radio_checked; }
667
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
669
}
670
modelbutton.flat arrow {
672
background: none;
673
&:hover { background: none; }
675
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
677
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
679
}
680
button.color {
682
min-height: $small_size;
683
min-width: $small_size;
684
padding: $container_padding;
685
colorswatch:only-child {
687
// &, overlay { border-radius: 0; }
688
}
689
}
690
/*********
693
* Links *
694
*********/
695
*:link {
696
&, &:hover, &:active { color: $link_color; }
697
&:visited {
699
&, &:hover, &:active { color: $visited_link_color; }
700
}
701
@at-root %link_selected,
703
&:selected,
704
*:selected & { color: $inverse_fg_color; }
705
}
706
button:link,
708
button:visited {
709
@extend *:link;
710
> label { text-decoration-line: underline; }
712
}
713
/*****************
715
* GtkSpinButton *
716
*****************/
717
spinbutton {
718
&:not(.vertical) {
719
// in this horizontal configuration, the whole spinbutton
720
// behaves as the entry, so we extend the entry styling
721
// and nuke the style on the internal entry
722
@extend %entry;
723
padding: 0;
725
%spinbutton_entry,
727
entry {
728
min-width: $large_size - 8px * 2;
729
// reset all the other props since the spinbutton node is styled here
730
margin: 0;
731
border-image: none;
732
border-radius: 0;
733
box-shadow: none;
734
background-color: transparent;
735
//
736
// This will help to simplify spinbutton's code, but unfortunatelly
737
// doesn't work properly in :dir(rtl). It needs z-index property.
738
//
739
// min-width: $large_size - 8px;
740
//
741
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
742
//
743
// &:dir(ltr) {
744
// margin-right: -$spinbuttons_width;
745
// padding-right: $spinbuttons_width;
746
// }
747
//
748
// &:dir(rtl) {
749
// margin-left: -$spinbuttons_width;
750
// padding-left: $spinbuttons_width;
751
// }
752
}
753
button {
755
// margin: $container_padding;
756
border: solid $container_padding transparent;
757
@extend %simple_flat_button;
759
@extend %small_button;
761
&.up:dir(ltr),
763
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
764
&.up:dir(rtl),
766
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
767
}
768
}
769
// OSD horizontal
771
.osd &:not(.vertical) {
772
button {
773
}
774
}
775
// Vertical
777
&.vertical {
778
// in the vertical configuration, we treat the spinbutton
779
// as a box, and tweak the style of the entry in the middle
780
// so that it's linked
781
// FIXME: this should not be set at all, but otherwise it gets the wrong
783
// color
784
&:disabled { color: $disabled_fg_color; }
785
&:drop(active) {
787
box-shadow: none;
788
}
789
entry {
791
min-height: $medium_size;
792
min-width: $large_size;
793
padding: 0;
794
}
795
button {
797
min-height: $medium_size;
798
min-width: $large_size;
799
padding: 0;
800
@extend %simple_flat_button;
802
&.up { border-radius: 2px 2px 0 0; }
804
&.down { border-radius: 0 0 2px 2px; }
806
}
807
}
808
// OSD vertical
810
.osd &.vertical button:first-child {
811
}
812
// Misc
814
treeview &:not(.vertical) {
815
min-height: 0;
816
border-style: none;
817
border-radius: 0;
818
entry {
820
min-height: 0;
821
padding: 1px 2px;
822
}
823
}
824
}
825
/**************
828
* ComboBoxes *
829
**************/
830
combobox {
831
arrow {
832
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
833
min-height: 16px;
834
min-width: 16px;
835
}
836
button.combo:checked { transition: none; } // workaround for menuitem selection
838
button.combo cellview {
840
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
841
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
842
}
843
#gtk-combobox-popup-menu {
845
padding: 2px 0;
846
menuitem {
848
min-height: $medium_size - 2px * 2;
849
padding: 0 8px;
850
}
851
}
852
&.linked {
854
button:nth-child(2) {
855
&:dir(ltr) { @extend %linked:last-child; }
856
&:dir(rtl) { @extend %linked:first-child; }
857
}
858
}
859
&:drop(active) { // FIXME: untested
861
box-shadow: none;
862
// button.combo { @extend %button_basic:drop(active); }
864
}
865
}
866
.linked > combobox > box > button.combo {
868
// the combo is a composite widget so the way we do button linking doesn't
869
// work, special case needed. See
870
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
871
&:dir(ltr),
873
&:dir(rtl) { @extend %linked_middle; } // specificity bump
874
}
875
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
877
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
878
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
879
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
881
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
882
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
883
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
884
%combo_flat {
886
border-radius: 0;
887
background-image: none;
888
font-weight: inherit;
889
@include entry(flat-normal);
891
&:hover { box-shadow: inset 0 -2px $fill_color; }
893
&:checked {
895
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
896
$primary_color 100%,
897
transparent 0%)
898
0 0 2 / 0 0 2px;
899
}
900
&:disabled { color: $disabled_fg_color; }
902
}
903
/************
906
* Toolbars *
907
************/
908
toolbar {
909
-GtkWidget-window-dragging: true;
910
padding: $container_padding / 2;
911
background-color: $bg_color;
912
button { @extend %button_basic.flat; }
914
// on OSD
916
.osd & { background-color: transparent; }
917
// stand-alone OSD toolbars
919
&.osd {
920
transition: $shadow_transition;
921
padding: $container_padding;
922
border-radius: 2px;
923
box-shadow: $shadow_2, inset 0 1px $highlight_color;
924
background-color: $base_color;
925
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
927
&.left,
929
&.right,
930
&.top,
931
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
932
}
933
// toolbar separators
935
&.horizontal separator { margin: $container_padding / 2; }
936
&.vertical separator { margin: $container_padding / 2; }
937
&:not(.inline-toolbar):not(.osd) {
939
scale,
940
entry,
941
spinbutton,
942
button { margin: $container_padding / 2; }
943
.linked entry,
945
.linked spinbutton,
946
.linked button {
947
&:not(:first-child) { margin-left: 0; }
948
&:not(:last-child) { margin-right: 0; }
949
}
950
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
952
}
953
}
954
//searchbar, location-bar & inline-toolbar
956
.inline-toolbar {
957
padding: $container_padding;
958
border-style: solid;
959
border-width: 0 1px 1px;
960
border-color: $border_color;
961
background-color: $alt_base_color;
962
}
963
searchbar,
965
.location-bar {
966
padding: $container_padding;
967
border-style: solid;
968
border-width: 0 0 1px;
969
border-color: $border_color;
970
background-color: $bg_color;
971
background-clip: border-box;
972
}
973
/***************
976
* Header bars *
977
***************/
978
%titlebar,
979
headerbar {
980
transition: background-color $shorter_duration $deceleration_curve;
981
min-height: $large_size;
982
padding: 0 $container_padding;
983
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
984
background-color: $titlebar_bg_color;
985
color: $titlebar_fg_color;
986
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
988
&:backdrop {
990
color: $secondary_titlebar_fg_color;
991
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
993
}
994
.title {
996
transition: $longer_transition;
997
padding: 0 12px;
998
font-weight: bold;
999
}
1000
.subtitle {
1002
transition: $longer_transition;
1003
padding: 0 12px;
1004
font-size: smaller;
1005
@extend .dim-label;
1007
}
1008
button:not(.suggested-action):not(.destructive-action) {
1010
@extend %button_basic.flat;
1011
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1013
$titlebar_indicator_color 0%,
1014
transparent 0%)
1015
0 0 0 / 0 0 0px;
1016
&:checked {
1018
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1019
$titlebar_indicator_color 100%,
1020
transparent 0%)
1021
0 0 2 / 0 0 2px;
1022
&, &:disabled { background-color: transparent; }
1024
}
1025
}
1026
button.suggested-action, button.destructive-action {
1028
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1029
}
1030
&.selection-mode {
1032
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1033
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1034
transition: background-color 0.00001s $longer_duration;
1035
animation: header_ripple_effect $longer_duration $deceleration_curve;
1036
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1037
background-color: $primary_color;
1038
color: $inverse_fg_color;
1039
&:backdrop {
1041
color: $secondary_inverse_fg_color;
1042
}
1043
.subtitle:link { @extend *:link:selected; }
1045
button:not(.suggested-action):not(.destructive-action) {
1047
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1048
currentColor 0%,
1049
transparent 0%)
1050
0 0 0 / 0 0 0px;
1051
color: currentColor;
1052
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1054
&:checked {
1056
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1057
currentColor 100%,
1058
transparent 0%)
1059
0 0 2 / 0 0 2px;
1060
color: currentColor;
1061
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1063
}
1064
}
1065
.selection-menu {
1067
padding-left: 16px;
1068
padding-right: 16px;
1069
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1071
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1073
}
1074
}
1075
.fullscreen &,
1077
.tiled &,
1078
.maximized & {
1079
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1080
box-shadow: $shadow_1;
1081
}
1082
&.default-decoration {
1084
min-height: $small_size;
1085
padding: $container_padding;
1086
box-shadow: inset 0 1px $titlebar_highlight_color;
1087
.fullscreen &,
1089
.tiled &,
1090
.maximized & { box-shadow: none; }
1091
button.titlebutton {
1093
min-height: $small_size;
1094
min-width: $small_size;
1095
margin: 0;
1096
padding: 0;
1097
}
1098
}
1099
.solid-csd & {
1101
&:dir(rtl), &:dir(ltr) { // specificity bump
1102
margin-left: -2px;
1103
margin-right: -2px;
1104
margin-top: -2px;
1105
// border-radius: 0;
1106
box-shadow: inset 0 1px $titlebar_highlight_color;
1107
}
1108
}
1109
}
1110
headerbar {
1112
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1113
entry,
1114
spinbutton,
1115
// separator,
1116
button {
1117
margin-top: $container_padding;
1118
margin-bottom: $container_padding;
1119
}
1120
switch {
1122
margin-top: $container_padding * 2;
1123
margin-bottom: $container_padding * 2;
1124
}
1125
}
1126
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1128
border-top-left-radius: 2px;
1129
border-top-right-radius: 2px;
1130
}
1131
headerbar { // headerbar border rounding
1133
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1134
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1135
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1137
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1139
&:first-child, &:last-child {
1140
border-top-left-radius: 2px;
1141
border-top-right-radius: 2px;
1142
}
1143
}
1144
}
1145
.titlebar:not(headerbar) {
1147
window.csd > & {
1148
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1149
padding: 0;
1150
background-color: transparent;
1151
background-image: none;
1152
border-style: none;
1153
box-shadow: none;
1154
}
1155
> separator {
1157
background-color: $titlebar_bg_color;
1158
background-image: image($border_color);
1159
}
1160
@extend %titlebar;
1162
}
1163
/************
1166
* Pathbars *
1167
************/
1168
%pathbar_button,
1169
.path-bar button {
1170
padding-left: ($medium_size - 24px) / 2;
1171
padding-right: ($medium_size - 24px) / 2;
1172
label:not(:only-child) {
1174
&:first-child { margin-left: 4px; }
1175
&:last-child { margin-right: 4px; }
1177
}
1178
&.slider-button {
1180
padding-left: (24px - 16px) / 2;
1181
padding-right: (24px - 16px) / 2;
1182
}
1183
:not(headerbar) & {
1185
@extend %flat_button;
1186
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1188
$primary_color 0%,
1189
transparent 0%)
1190
0 0 0 / 0 0 0px;
1191
border-radius: 2px;
1192
&:checked {
1194
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1195
$primary_color 100%,
1196
transparent 0%)
1197
0 0 2 / 0 0 2px;
1198
&, &:disabled { background-color: transparent; }
1200
}
1201
}
1202
}
1203
/**************
1206
* Tree Views *
1207
**************/
1208
treeview.view {
1209
@at-root * {
1210
-GtkTreeView-horizontal-separator: 4;
1211
-GtkTreeView-grid-line-width: 1;
1212
-GtkTreeView-grid-line-pattern: '';
1213
-GtkTreeView-tree-line-width: 1;
1214
-GtkTreeView-tree-line-pattern: '';
1215
-GtkTreeView-expander-size: 16;
1216
}
1217
border-left-color: $fill_color; // this is actually the tree lines color,
1219
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1220
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1222
&:hover, &:active, &:selected { border-radius: 0; }
1224
&.separator {
1226
min-height: 1px + 2px * 2;
1227
color: $border_color;
1228
}
1229
&:drop(active) {
1231
border-style: solid none;
1232
border-width: 1px;
1233
border-color: $accent_color;
1234
&.after { border-top-style: none; }
1236
&.before { border-bottom-style: none; }
1238
}
1239
&.expander {
1241
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1242
-gtk-icon-transform: rotate(-90deg);
1243
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1245
&:checked { -gtk-icon-transform: unset; }
1247
color: $secondary_fg_color;
1249
&:hover, &:active { color: $fg_color; }
1251
&:disabled { color: $disabled_secondary_fg_color; }
1253
&:selected {
1255
color: $secondary_inverse_fg_color;
1256
&:hover, &:active { color: $inverse_fg_color; }
1258
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1260
}
1261
}
1262
&.progressbar { // progress bar in treeviews
1264
border-style: none none solid;
1265
border-width: $bar_size;
1266
border-color: $primary_color;
1267
box-shadow: none;
1268
background-color: transparent;
1269
&:selected { border-color: currentColor; }
1271
}
1272
&.trough { // progress bar trough in treeviews
1274
border-style: none none solid;
1275
border-width: $bar_size;
1276
border-color: scale-alpha($primary_color, $lower_opacity);
1277
box-shadow: none;
1278
background-color: transparent;
1279
&:selected { border-color: $fill_color; }
1281
}
1282
header {
1284
button {
1285
@extend row.activatable;
1286
padding: 2px 6px;
1288
border-style: none solid solid none;
1289
border-width: 1px;
1290
border-color: $border_color;
1291
border-radius: 0;
1292
background-clip: border-box;
1293
&, &:hover, &:active { box-shadow: none; }
1295
&, &:disabled { background-color: $base_color; }
1297
&:last-child { border-right-style: none; }
1299
}
1300
}
1301
button.dnd,
1303
header.button.dnd { // for treeview-like derive widgets
1304
padding: 2px 6px;
1305
border-style: none solid solid;
1306
border-width: 1px;
1307
border-color: $border_color;
1308
border-radius: 0;
1309
box-shadow: none;
1310
background-color: $base_color;
1311
background-clip: border-box;
1312
color: $primary_color;
1313
}
1314
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1316
}
1317
/*********
1320
* Menus *
1321
*********/
1322
menubar,
1323
.menubar {
1324
-GtkWidget-window-dragging: true;
1325
padding: 0;
1326
// box-shadow: inset 0 -1px $border_color;
1327
background-color: $titlebar_bg_color;
1328
> menuitem {
1330
transition: $shorter_transition;
1331
min-height: 20px;
1332
padding: 4px 8px;
1333
color: $secondary_titlebar_fg_color;
1334
&:hover { //Seems like it :hover even with keyboard focus
1336
transition: none;
1337
background-color: $semi_fill_color;
1338
color: $titlebar_fg_color;
1339
}
1340
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1342
}
1343
}
1344
.csd.popup { border-radius: 2px; }
1346
menu,
1348
.menu,
1349
.context-menu {
1350
margin: 4px 0;
1351
padding: 4px 0;
1352
box-shadow: inset 0 1px $highlight_color;
1353
background-color: $base_color;
1354
border: 1px solid $border_color; // adds borders in a non composited env
1355
.csd & {
1357
border: none; // axes borders in a composited env
1358
border-radius: 2px;
1359
}
1360
menuitem {
1362
transition: $shorter_transition;
1363
min-height: 20px;
1364
min-width: 40px;
1365
padding: 4px 8px;
1366
font: initial;
1367
text-shadow: none;
1368
&:hover {
1370
transition: none;
1371
background-color: $semi_fill_color;
1372
}
1373
&:disabled { color: $disabled_fg_color; }
1375
// submenu indicators
1377
arrow {
1378
min-height: 16px;
1379
min-width: 16px;
1380
&:dir(ltr) {
1382
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1383
margin-left: 8px;
1384
}
1385
&:dir(rtl) {
1387
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1388
margin-right: 8px;
1389
}
1390
}
1391
// avoids labels color being overridden, see
1393
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1394
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1395
}
1396
// overflow arrows
1398
> arrow {
1399
min-height: 16px;
1400
min-width: 16px;
1401
padding: 4px;
1402
border-radius: 0;
1403
background-color: $base_color;
1404
color: $secondary_fg_color;
1405
&.top {
1407
margin-top: -4px;
1408
border-bottom: 1px solid $border_color;
1409
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1410
}
1411
&.bottom {
1413
margin-bottom: -4px;
1414
border-top: 1px solid $border_color;
1415
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1416
}
1417
&:hover {
1419
background-image: image($semi_fill_color);
1420
color: $fg_color;
1421
}
1422
&:disabled {
1424
border-color: transparent;
1425
background-color: transparent;
1426
color: transparent;
1427
// color: $disabled_secondary_fg_color;
1428
}
1429
}
1430
separator { margin: 4px 0; }
1432
}
1433
menuitem {
1435
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1436
check,
1438
radio {
1439
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1440
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1441
}
1442
}
1443
/************
1446
* Popovers *
1447
************/
1448
popover.background {
1449
transition: $shadow_transition;
1450
padding: 2px;
1451
box-shadow: $shadow_2; // TODO: this should really have a highlight
1452
background-color: $lighter_bg_color;
1453
&:backdrop { box-shadow: $shadow_1; }
1455
&, .csd & {
1457
border-style: solid;
1458
border-width: 1px;
1459
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1460
border-radius: 2px + 1px;
1461
}
1462
> stack { margin: -4px; } // remove extra padding from menu style popovers
1464
> toolbar { margin: -2px; }
1466
> list,
1468
> .view,
1469
> toolbar {
1470
border-style: none;
1471
box-shadow: none;
1472
background-color: transparent;
1473
}
1474
&.touch-selection,
1476
&.magnifier,
1477
&.osd { @extend %osd; }
1478
// entry { @extend %entry.flat; }
1480
// button.combo { @extend %combo_flat; }
1482
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1484
&.menu button,
1486
button.model {
1487
@extend %simple_flat_button;
1488
min-height: 32px;
1490
padding: 0 8px;
1491
border-radius: 2px;
1492
&:checked { @extend %selected_items; }
1494
}
1495
separator { margin: 4px 0; }
1497
list separator { margin: 0; }
1499
}
1500
/*************
1502
* Notebooks *
1503
*************/
1504
notebook {
1505
> header {
1506
border-width: 1px;
1507
border-color: $border_color;
1508
background-color: $bg_color;
1509
background-clip: border-box;
1510
&.top {
1512
border-bottom-style: solid;
1513
> tabs {
1514
margin-bottom: -1px;
1515
> tab {
1516
&:hover { box-shadow: inset 0 -2px $fill_color; }
1518
&:checked { box-shadow: inset 0 -2px $primary_color; }
1520
}
1521
}
1522
}
1523
&.bottom {
1525
border-top-style: solid;
1526
> tabs {
1527
margin-top: -1px;
1528
> tab {
1529
&:hover { box-shadow: inset 0 2px $fill_color; }
1531
&:checked { box-shadow: inset 0 2px $primary_color; }
1533
}
1534
}
1535
}
1536
&.left {
1538
border-right-style: solid;
1539
> tabs {
1540
margin-right: -1px;
1541
> tab {
1542
&:hover { box-shadow: inset -2px 0 $fill_color; }
1544
&:checked { box-shadow: inset -2px 0 $primary_color; }
1546
}
1547
}
1548
}
1549
&.right {
1551
border-left-style: solid;
1552
> tabs {
1553
margin-left: -1px;
1554
> tab {
1555
&:hover { box-shadow: inset 2px 0 $fill_color; }
1557
&:checked { box-shadow: inset 2px 0 $primary_color; }
1559
}
1560
}
1561
}
1562
&.top > tabs > arrow {
1564
@extend %notebook_vert_arrows;
1565
border-top-style: none;
1567
}
1568
&.bottom > tabs > arrow {
1570
@extend %notebook_vert_arrows;
1571
border-bottom-style: none;
1573
}
1574
@at-root %notebook_vert_arrows {
1576
padding-left: 4px;
1577
padding-right: 4px;
1578
&.down {
1580
margin-left: -8px;
1581
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1582
}
1583
&.up {
1585
margin-right: -8px;
1586
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1587
}
1588
}
1589
&.left > tabs > arrow {
1591
@extend %notebook_horz_arrows;
1592
border-left-style: none;
1594
}
1595
&.right > tabs > arrow {
1597
@extend %notebook_horz_arrows;
1598
border-right-style: none;
1600
}
1601
@at-root %notebook_horz_arrows {
1603
padding-top: 4px;
1604
padding-bottom: 4px;
1605
&.down {
1607
margin-top: -8px;
1608
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1609
}
1610
&.up {
1612
margin-bottom: -8px;
1613
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1614
}
1615
}
1616
> tabs > arrow {
1618
@extend %simple_flat_button;
1619
min-height: 16px;
1621
min-width: 16px;
1622
border-radius: 0;
1623
}
1624
tab {
1626
transition: $longer_transition,
1627
background-size 0,
1628
background-image 0;
1629
min-height: $small_size;
1630
min-width: $small_size;
1631
padding: $container_padding 12px;
1632
outline-offset: -6px;
1634
border-width: 1px; // for reorderable tabs
1636
border-color: transparent; //
1637
background-image: radial-gradient(circle farthest-corner at center,
1639
$primary_color 10%,
1640
transparent 0%);
1641
background-repeat: no-repeat;
1642
background-position: center;
1643
background-size: 0% 0%;
1644
color: $secondary_fg_color;
1646
font-weight: 500;
1647
&:hover {
1649
color: $fg_color;
1650
&.reorderable-page {
1652
border-color: $border_color;
1653
background-color: $alt_base_color;
1654
}
1655
}
1656
&:disabled { color: $disabled_secondary_fg_color; }
1658
&:checked {
1660
transition: $longer_transition,
1661
background-size $longer_duration $deceleration_curve,
1662
background-image $longer_duration + $ripple_duration $deceleration_curve;
1663
background-image: radial-gradient(circle farthest-corner at center,
1664
transparent 10%,
1665
transparent 0%);
1666
background-size: 1000% 1000%;
1667
color: $fg_color;
1668
&:disabled { color: $disabled_fg_color; }
1670
&.reorderable-page {
1672
border-color: $border_color;
1673
background-color: $base_color;
1674
}
1675
}
1676
// colors the button like the label, overridden otherwise
1678
button.flat {
1679
@extend %small_button;
1680
&:last-child {
1682
margin-left: $container_padding;
1683
margin-right: $container_padding - 12px;
1684
}
1685
&:first-child {
1687
margin-left: $container_padding - 12px;
1688
margin-right: $container_padding;
1689
}
1690
}
1691
}
1692
&.top,
1694
&.bottom {
1695
tabs {
1696
padding-left: 8px;
1697
padding-right: 8px;
1698
&:not(:only-child) {
1700
&:first-child { margin-left: 0; }
1701
&:last-child { margin-right: 0; }
1702
}
1703
tab {
1705
&.reorderable-page {
1706
margin: 0 -1px;
1707
border-style: none solid;
1708
}
1709
}
1710
}
1711
}
1712
&.left,
1714
&.right {
1715
tabs {
1716
padding-top: 8px;
1717
padding-bottom: 8px;
1718
&:not(:only-child) {
1720
&:first-child { margin-top: 0; }
1721
&:last-child { margin-bottom: 0; }
1722
}
1723
tab {
1725
&.reorderable-page {
1726
margin: -1px 0;
1727
border-style: solid none;
1728
}
1729
}
1730
}
1731
}
1732
}
1733
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1735
background-color: $base_color;
1736
entry:not(.search),
1738
spinbutton:not(.vertical) { @extend %entry.flat; }
1739
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1741
button.combo { @extend %combo_flat; }
1743
}
1744
}
1745
/**************
1748
* Scrollbars *
1749
**************/
1750
scrollbar {
1751
$_slider_min_length: 24px;
1752
// disable steppers
1754
@at-root * {
1755
-GtkScrollbar-has-backward-stepper: false;
1756
-GtkScrollbar-has-forward-stepper: false;
1757
}
1758
transition: $longer_transition;
1760
background-color: $base_color;
1761
background-clip: $extra_background_clip;
1762
// scrollbar border
1764
&.top { border-bottom: 1px solid $border_color; }
1765
&.bottom { border-top: 1px solid $border_color; }
1766
&.left { border-right: 1px solid $border_color; }
1767
&.right { border-left: 1px solid $border_color; }
1768
// slider
1770
slider {
1771
transition: $shorter_transition, margin 0, border-width 0;
1772
min-width: 8px;
1773
min-height: 8px;
1774
border: 4px solid transparent;
1775
border-radius: $circular_radius;
1776
background-clip: padding-box;
1777
background-color: $tertiary_fg_color;
1778
&:hover { background-color: $secondary_fg_color; }
1780
&:active { background-color: $fg_color; }
1782
&:disabled { background-color: $disabled_tertiary_fg_color; }
1784
}
1785
&.fine-tune {
1787
slider {
1788
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1789
min-width: 4px;
1790
min-height: 4px;
1791
}
1792
&.horizontal slider { margin: 2px 0; }
1794
&.vertical slider { margin: 0 2px; }
1796
}
1797
&.overlay-indicator {
1799
&:not(.dragging):not(.hovering) {
1800
border-color: transparent;
1801
background-color: transparent;
1802
slider {
1804
min-width: 4px;
1805
min-height: 4px;
1806
margin: 4px - 1px;
1807
border: 1px solid scale-alpha($base_color, $lower_opacity);
1808
}
1809
button {
1811
min-width: 4px;
1812
min-height: 4px;
1813
margin: 4px - 1px;
1814
border: 1px solid scale-alpha($base_color, $lower_opacity);
1815
border-radius: $circular_radius;
1816
background-color: $tertiary_fg_color;
1817
background-clip: padding-box;
1818
-gtk-icon-source: none;
1819
&:disabled { background-color: $disabled_tertiary_fg_color; }
1821
}
1822
&.horizontal {
1824
slider { min-width: $_slider_min_length; }
1825
button { min-width: 8px; }
1827
}
1828
&.vertical {
1830
slider { min-height: $_slider_min_length; }
1831
button { min-height: 8px; }
1833
}
1834
}
1835
&.dragging,
1837
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1838
}
1839
&.horizontal slider { min-width: $_slider_min_length; }
1841
&.vertical slider { min-height: $_slider_min_length; }
1843
// button styling
1845
button {
1846
@extend %simple_flat_button;
1847
min-width: 16px;
1849
min-height: 16px;
1850
padding: 0;
1851
border-radius: 0;
1852
}
1853
// button icons
1855
&.vertical {
1856
button {
1857
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1858
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1860
}
1861
}
1862
&.horizontal {
1864
button {
1865
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1866
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1868
}
1869
}
1870
}
1871
/**********
1874
* Switch *
1875
**********/
1876
switch {
1877
transition: $longer_transition;
1878
margin: $container_padding 0;
1879
border: 4px solid transparent;
1880
border-radius: $circular_radius;
1881
background-color: $fill_color;
1882
background-clip: padding-box;
1883
font-size: 0;
1884
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1886
&:checked {
1888
background-color: scale-alpha($accent_color, 0.5);
1889
&:disabled {
1891
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1892
color: $disabled_fg_color;
1893
}
1894
}
1895
slider {
1897
@include entry(normal);
1898
transition: $longer_transition, $shadow_transition, margin 0;
1900
min-width: $small_size;
1901
min-height: $small_size;
1902
margin: -4px 0 -4px -4px;
1903
border-radius: $circular_radius;
1904
-gtk-outline-radius: $circular_radius;
1905
}
1906
&:hover slider { @include entry(focus); }
1908
&:checked slider {
1910
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1911
animation: needs_attention $longer_duration $deceleration_curve;
1912
margin: -4px -4px -4px 0;
1913
background-color: $accent_color;
1914
color: $inverse_fg_color;
1915
}
1916
&:disabled slider { @include entry(disabled); }
1918
&:checked:disabled slider { animation: none; }
1920
row:selected & {
1922
}
1923
}
1924
/*************************
1927
* Check and Radio items *
1928
*************************/
1929
// draw regular check and radio items using our PNG assets
1930
// all assets are rendered from assets.svg. never add pngs directly
1931
//selection-mode
1933
@each $s, $as in ('', '-unchecked'),
1934
(':checked', '-checked') {
1935
.view.content-view.check#{$s}:not(list) {
1936
margin: 8px;
1937
box-shadow: none;
1938
background-color: transparent;
1939
background-image: none;
1940
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1941
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1942
-gtk-icon-shadow: $shadow_1;
1943
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1945
}
1946
}
1947
checkbutton.text-button,
1949
radiobutton.text-button {
1950
// this is for a nice focus on check and radios text
1951
padding: 2px;
1952
outline-offset: 0;
1953
label:not(:only-child) { margin: 0 4px; }
1955
}
1956
check,
1958
radio {
1959
min-height: 24px;
1960
min-width: 24px;
1961
margin: -($large_size - 24px) / 2;
1962
padding: ($large_size - 24px) / 2;
1963
@extend %simple_flat_button;
1965
@extend %circular_button;
1967
&:checked, &:indeterminate { color: $accent_color; }
1969
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1971
// &:only-child { margin: -12px; }
1973
row &:not(:checked):not(:indeterminate) {
1975
color: gtkalpha(currentColor, $secondary_opacity);
1976
&:hover, &:active { color: currentColor; }
1978
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1980
}
1981
menu menuitem & {
1983
transition: none;
1984
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1985
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1987
&, &:hover, &:disabled {
1989
box-shadow: none;
1990
// color: inherit;
1991
// animation: none;
1992
}
1993
}
1994
}
1995
%check,
1997
check {
1998
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
1999
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.png"))); }
2000
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2002
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.png"))); }
2003
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2005
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.png"))); }
2006
}
2007
$radio_indicator: 10px / $large_size / 2;
2009
$radio_radius_slice: #{$large_size / 2px};
2010
$radio_radius_width: #{$large_size / 2};
2011
%radio,
2013
radio {
2014
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2015
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.png"))); }
2016
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2018
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.png"))); }
2019
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2021
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.png"))); }
2022
border-image: -gtk-gradient(radial,
2024
center center, 0,
2025
center center, 0.001,
2026
to($accent_color),
2027
to(transparent))
2028
$radio_radius_slice / $radio_radius_width;
2029
&:checked {
2031
border-image: -gtk-gradient(radial,
2032
center center, 0,
2033
center center, $radio_indicator,
2034
to($accent_color),
2035
to(transparent))
2036
$radio_radius_slice / $radio_radius_width;
2037
}
2038
&:checked:disabled {
2040
border-image: -gtk-gradient(radial,
2041
center center, 0,
2042
center center, $radio_indicator,
2043
to(scale-alpha($accent_color, $disabled_opacity)),
2044
to(transparent))
2045
$radio_radius_slice / $radio_radius_width;
2046
}
2047
&:indeterminate:checked {
2049
border-image: -gtk-gradient(radial,
2050
center center, 0,
2051
center center, 0.001,
2052
to($accent_color),
2053
to(transparent))
2054
$radio_radius_slice / $radio_radius_width;
2055
}
2056
}
2057
// let's animate things
2059
@keyframes check_check {
2060
from { -gtk-icon-transform: rotate(90deg); }
2061
to { -gtk-icon-transform: unset; }
2062
}
2063
@keyframes check_radio { // FIXME: cannot animate border-image
2065
from {
2066
border-image: -gtk-gradient(radial,
2067
center center, 0,
2068
center center, 0.001,
2069
to($accent_color),
2070
to(transparent))
2071
$radio_radius_slice / $radio_radius_width;
2072
}
2073
to {
2075
border-image: -gtk-gradient(radial,
2076
center center, 0,
2077
center center, $radio_indicator,
2078
to($accent_color),
2079
to(transparent))
2080
$radio_radius_slice / $radio_radius_width;
2081
}
2082
}
2083
@keyframes check_indeterminate {
2085
from { -gtk-icon-transform: unset; }
2086
50% { -gtk-icon-transform: scale(0, 1); }
2087
to { -gtk-icon-transform: unset; }
2088
}
2089
%check_checked,
2091
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2092
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2094
// %radio_checked,
2096
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2097
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2099
%indeterminate_checked,
2101
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2102
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2104
// no animations in menus
2106
menu menuitem {
2107
check:not(:indeterminate):checked,
2108
radio:not(:indeterminate):checked,
2109
check:indeterminate:checked,
2110
radio:indeterminate:checked { animation: none; }
2111
}
2112
treeview.view check,
2114
treeview.view radio {
2115
padding: 0;
2116
&:hover {
2118
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2119
&:disabled { box-shadow: none; }
2121
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2123
}
2124
& {
2126
color: $secondary_fg_color;
2127
&:hover, &:active { color: $fg_color; }
2129
&:disabled { color: $disabled_secondary_fg_color; }
2131
&:checked, &:indeterminate { color: $accent_color; }
2133
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2135
}
2136
&:selected {
2138
color: $secondary_inverse_fg_color;
2139
&:hover, &:active { color: $inverse_fg_color; }
2141
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2143
&:checked, &:indeterminate { color: $accent_color; }
2145
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2147
}
2148
}
2149
treeview.view radio:checked {
2151
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2152
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.png")));
2153
border-image: none;
2154
}
2155
/************
2158
* GtkScale *
2159
************/
2160
scale {
2161
// sizing
2162
$_marks_lenght: 8px;
2163
$_marks_distance: 8px;
2164
$slider_size: 24px;
2166
$marks_slider_size: 30px;
2167
$slider_margin: -($slider_size - $bar_size) / 2;
2169
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2170
$color_slider_margin: -($slider_size) / 2;
2172
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2173
min-height: $medium_size - $slider_size;
2175
min-width: $medium_size - $slider_size;
2176
padding: ($slider_size / 2);
2177
* { transition: $longer_transition; }
2179
// the slider is inside the trough, so to have make it bigger there's a negative margin
2181
slider {
2182
min-height: $slider_size;
2183
min-width: $slider_size;
2184
margin: $slider_margin;
2185
}
2186
// the backing bit
2188
trough {
2189
outline-offset: 2px;
2190
background-color: $fill_color;
2191
&:disabled { color: $disabled_fg_color; }
2193
}
2194
// the colored part of the backing bit
2196
highlight {
2197
background-color: $accent_color;
2198
&:disabled { background-color: transparent; }
2200
}
2201
// this is another differently styled part of the backing bit, the most relevant use case is for example
2203
// in media player to indicate how much video stream as been cached
2204
fill {
2205
background-color: $fill_color;
2206
&:disabled { background-color: transparent; }
2208
}
2209
slider {
2211
transition: all $shorter_duration $standard_curve;
2212
// border-radius: 100%;
2213
// background-color: $accent_color;
2214
background-repeat: no-repeat;
2215
background-position: center;
2216
@each $s, $as in ('', ''),
2218
(':disabled', '-disabled') {
2219
&#{$s} {
2220
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2221
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2223
}
2224
}
2225
background-size: calc(100% - 8px);
2227
&:hover { background-size: calc(100% - 4px); }
2229
&:active { background-size: calc(100% - 0px); }
2231
}
2232
// click-and-hold the slider to activate
2234
&.fine-tune {
2235
// to make the slider shrink in fine-tune mode
2236
slider { background-size: calc(100% - 12px); }
2237
}
2238
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2240
marks {
2242
color: $fill_color;
2243
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2245
(bottom, bottom, top),
2246
(top, left, right),
2247
(bottom, right, left) {
2248
&.#{$marks_class} {
2249
margin-#{$marks_margin}: $_marks_distance;
2250
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2251
}
2252
}
2253
}
2254
&.horizontal {
2256
indicator {
2257
min-height: $_marks_lenght;
2258
min-width: 1px;
2259
}
2260
}
2261
&.vertical {
2263
indicator {
2264
min-height: 1px;
2265
min-width: $_marks_lenght;
2266
}
2267
}
2268
// *WARNING* scale with marks madness following
2270
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2272
('vertical', 'vert') {
2273
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2274
('marks-after', 'marks-after:not(.marks-before)') {
2275
&.#{$dir_class}.#{$marks_class} {
2276
slider {
2277
@each $state, $state_infix in ('', ''),
2278
(':disabled', '-disabled') {
2279
&#{$state} {
2280
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2281
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2283
}
2284
}
2285
@if $dir_class == 'horizontal' {
2287
min-height: $marks_slider_size;
2288
min-width: $slider_size;
2289
@if $marks_infix == 'marks-before' {
2291
margin-top: $marks_slider_margin;
2292
background-position: center calc(100% - 4px);
2294
&:hover { background-position: center calc(100% - 2px); }
2296
&:active { background-position: center calc(100% - 0px); }
2298
}
2299
@if $marks_infix == 'marks-after' {
2301
margin-bottom: $marks_slider_margin;
2302
background-position: center calc(4px);
2304
&:hover { background-position: center calc(2px); }
2306
&:active { background-position: center calc(0px); }
2308
}
2309
}
2310
@if $dir_class == 'vertical' {
2312
min-height: $slider_size;
2313
min-width: $marks_slider_size;
2314
@if $marks_infix == 'marks-before' {
2316
margin-left: $marks_slider_margin;
2317
background-position: calc(4px) center;
2319
&:hover { background-position: calc(2px) center; }
2321
&:active { background-position: calc(0px) center; }
2323
}
2324
@if $marks_infix == 'marks-after' {
2326
margin-right: $marks_slider_margin;
2327
background-position: calc(100% - 4px) center;
2329
&:hover { background-position: calc(100% - 2px) center; }
2331
&:active { background-position: calc(100% - 0px) center; }
2333
}
2334
}
2335
}
2336
&.fine-tune slider {
2338
@if $dir_class == 'horizontal' {
2339
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2340
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2342
}
2343
@if $dir_class == 'vertical' {
2345
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2346
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2348
}
2349
}
2350
}
2351
}
2352
}
2353
&.color {
2355
min-height: 0;
2356
min-width: 0;
2357
&.horizontal {
2359
padding: 0 0 12px 0;
2360
slider {
2362
&:dir(ltr), &:dir(rtl) { // specificity bump
2363
margin-bottom: $color_slider_margin;
2364
margin-top: $color_marks_slider_margin;
2365
}
2366
}
2367
}
2368
&.vertical {
2370
&:dir(ltr) {
2371
padding: 0 0 0 12px;
2372
slider {
2374
margin-left: $color_slider_margin;
2375
margin-right: $color_marks_slider_margin;
2376
}
2377
}
2378
&:dir(rtl) {
2380
padding: 0 12px 0 0;
2381
slider {
2383
margin-right: $color_slider_margin;
2384
margin-left: $color_marks_slider_margin;
2385
}
2386
}
2387
}
2388
}
2389
}
2390
/*****************
2393
* Progress bars *
2394
*****************/
2395
progressbar {
2396
// sizing
2397
&.horizontal {
2398
trough,
2399
progress { min-height: $bar_size; }
2400
}
2401
&.vertical {
2403
trough,
2404
progress { min-width: $bar_size; }
2405
}
2406
// FIXME: insensitive state missing and some other state should be set probably
2408
color: $tertiary_fg_color;
2409
font-size: smaller;
2410
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2412
progress { background-color: $primary_color; }
2414
&.osd { // progressbar.osd used for epiphany page loading progress
2416
// min-width: $bar_size;
2417
// min-height: $bar_size;
2418
// background-color: transparent;
2419
// trough { background-color: transparent; }
2421
progress {
2423
}
2424
}
2425
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2427
}
2428
/*************
2431
* Level Bar *
2432
*************/
2433
levelbar {
2434
block {
2435
min-width: $medium_size;
2436
min-height: $bar_size;
2437
}
2438
&.vertical block {
2440
min-width: $bar_size;
2441
min-height: $medium_size;
2442
}
2443
trough {
2445
padding: 2px;
2446
border-radius: 2px;
2447
@include entry(normal);
2449
&:disabled { @include entry(disabled); }
2451
}
2452
&.horizontal.discrete block { margin: 0 1px; }
2454
&.vertical.discrete block { margin: 1px 0; }
2456
&.horizontal.discrete trough { padding: 2px 1px; }
2458
&.vertical.discrete trough { padding: 1px 2px; }
2460
block {
2462
&.low {
2463
background-color: $warning_color;
2464
}
2465
&.high,
2467
&:not(.empty) {
2468
background-color: $primary_color;
2469
}
2470
&.full {
2472
background-color: $success_color;
2473
}
2474
&.empty {
2476
background-color: $fill_color;
2477
color: $disabled_fg_color;
2478
}
2479
}
2480
}
2481
/****************
2484
* Print dialog *
2485
*****************/
2486
printdialog {
2487
paper {
2488
padding: 0;
2489
border: 1px solid $border_color;
2490
background: $base_color;
2491
color: $fg_color;
2492
}
2493
.dialog-action-box { margin: 12px; }
2495
}
2496
/**********
2499
* Frames *
2500
**********/
2501
frame > border,
2502
.frame {
2503
margin: 0;
2504
padding: 0;
2505
border: 1px solid $border_color;
2506
border-radius: 0;
2507
box-shadow: none;
2508
&.flat { border-style: none; }
2510
}
2511
actionbar > revealer > box {
2513
padding: $container_padding;
2514
border-top: 1px solid $border_color;
2515
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2517
}
2518
scrolledwindow {
2520
viewport.frame { // avoid double borders when viewport inside scrolled window
2521
border-style: none;
2522
}
2523
// This is used when content is touch-dragged past boundaries.
2525
// draws a box on top of the content, the size changes programmatically.
2526
@at-root overshoot {
2527
&.top { @include overshoot(top); }
2528
&.bottom { @include overshoot(bottom); }
2530
&.left { @include overshoot(left); }
2532
&.right { @include overshoot(right); }
2534
}
2535
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2537
@at-root undershoot {
2538
&.top { @include undershoot(top); }
2539
&.bottom { @include undershoot(bottom); }
2541
&.left { @include undershoot(left); }
2543
&.right { @include undershoot(right); }
2545
}
2546
@at-root junction { // the small square between two scrollbars
2548
border-style: solid none none solid;
2549
border-width: 1px;
2550
border-color: $border_color;
2551
background-color: $base_color;
2552
&:dir(rtl) { border-style: solid solid none none; }
2554
}
2555
}
2556
//vbox and hbox separators
2558
separator {
2559
min-width: 1px;
2560
min-height: 1px;
2561
background: $border_color;
2562
}
2563
/*********
2566
* Lists *
2567
*********/
2568
list {
2569
border-color: $border_color;
2570
background-color: $base_color;
2571
row { padding: 2px; }
2573
}
2574
// FIXME
2576
$row_transition: $longer_transition, background-color 0, color 0;
2577
row {
2579
&.activatable {
2580
transition: $row_transition,
2581
background-size $ripple_duration $deceleration_curve,
2582
background-image $ripple_duration * 2 $deceleration_curve;
2583
box-shadow: inset 0 0 0 9999px transparent;
2584
background-image: radial-gradient(circle farthest-corner at center,
2585
transparent 10%,
2586
transparent 0%);
2587
background-repeat: no-repeat;
2588
background-position: center;
2589
background-size: 1000% 1000%;
2590
&:hover {
2592
transition: $row_transition,
2593
box-shadow 0,
2594
background-size $ripple_duration $deceleration_curve,
2595
background-image $ripple_duration * 2 $deceleration_curve;
2596
box-shadow: inset 0 0 0 9999px $row_fill_color;
2597
}
2598
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2600
&:active {
2601
transition: $row_transition,
2602
background-size 0,
2603
background-image 0;
2604
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2605
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2606
background-image: radial-gradient(circle farthest-corner at center,
2607
$semi_fill_color 10%,
2608
transparent 0%);
2609
background-size: 0% 0%;
2610
}
2611
}
2612
&:selected { @extend %selected_items; }
2614
}
2615
/*********************
2618
* App Notifications *
2619
*********************/
2620
.app-notification {
2621
@extend %osd;
2622
@extend toolbar.osd;
2624
margin: 8px;
2626
button { @extend %button_basic.flat; }
2628
&.frame,
2630
border { border-style: none; }
2631
}
2632
/*************
2635
* Expanders *
2636
*************/
2637
expander {
2638
arrow {
2639
transition: all $shorter_duration $standard_curve;
2640
min-width: 16px;
2641
min-height: 16px;
2642
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2643
-gtk-icon-transform: rotate(-90deg);
2644
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2646
&:checked { -gtk-icon-transform: unset; }
2648
color: $secondary_fg_color;
2650
&:hover, &:active { color: $fg_color; }
2652
&:disabled { color: $disabled_secondary_fg_color; }
2654
&:selected {
2656
color: $secondary_inverse_fg_color;
2657
&:hover, &:active { color: $inverse_fg_color; }
2659
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2661
}
2662
}
2663
}
2664
/************
2667
* Calendar *
2668
***********/
2669
calendar {
2670
padding: 1px;
2671
border: 1px solid $border_color;
2672
color: $fg_color;
2673
&:disabled { color: $disabled_fg_color; }
2675
&:selected {
2677
@extend %selected_items;
2678
border-radius: 2px + 1px;
2680
}
2681
&.header {
2683
border-style: none none solid;
2684
border-radius: 0;
2685
}
2686
&.button { @extend %simple_flat_button; }
2688
&.highlight {
2690
color: gtkalpha(currentColor, $tertiary_opacity);
2691
font-weight: 500;
2692
}
2693
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2695
}
2696
/***********
2699
* Dialogs *
2700
***********/
2701
messagedialog { // Message Dialog styling
2702
&.background { background-color: $lighter_bg_color; }
2703
.titlebar {
2705
min-height: $small_size;
2706
border-style: none;
2707
box-shadow: inset 0 1px $highlight_color;
2708
background-color: $lighter_bg_color;
2709
color: $fg_color;
2710
&:backdrop { color: $secondary_fg_color; }
2712
}
2713
&.csd { // rounded bottom border styling for csd version
2715
&.background {
2716
// bigger radius for better antialiasing
2717
border-bottom-left-radius: 2px;
2718
border-bottom-right-radius: 2px;
2719
}
2720
.dialog-action-area button {
2722
padding: 8px 16px;
2723
border-top: 1px solid $border_color;
2724
border-radius: 0;
2725
@extend %simple_flat_button;
2727
&:first-child { border-bottom-left-radius: 2px; }
2729
&:last-child { border-bottom-right-radius: 2px; }
2731
}
2732
}
2733
}
2734
filechooser {
2736
.dialog-action-box { border-top: 1px solid $border_color; }
2737
#pathbarbox {
2739
border-bottom: 1px solid $border_color;
2740
background-color: $bg_color;
2741
}
2742
}
2743
filechooserbutton:drop(active) {
2745
box-shadow: none;
2746
}
2747
/***********
2750
* Sidebar *
2751
***********/
2752
.sidebar {
2753
border-style: none;
2754
background-color: $lighter_bg_color;
2755
@at-root %sidebar_left,
2757
&:dir(ltr),
2758
&.left,
2759
&.left:dir(rtl) {
2760
border-right: 1px solid $border_color;
2761
border-left-style: none;
2762
}
2763
@at-root %sidebar_right
2765
&:dir(rtl),
2766
&.right {
2767
border-left: 1px solid $border_color;
2768
border-right-style: none;
2769
}
2770
list { background-color: transparent; }
2772
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2774
}
2775
stacksidebar {
2777
&.sidebar {
2778
&:dir(ltr),
2779
&.left,
2780
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2781
&:dir(rtl),
2783
&.right { list { @extend %sidebar_right; }}
2784
}
2785
row {
2787
padding: 10px 4px;
2788
> label {
2790
padding-left: 6px;
2791
padding-right: 6px;
2792
}
2793
&.needs-attention > label { @extend %needs_attention; }
2795
}
2796
}
2797
/****************
2800
* File chooser *
2801
****************/
2802
placessidebar {
2803
> viewport.frame { border-style: none; }
2804
list { padding: (4px - 3px) 0 4px; }
2806
row {
2808
// Needs overriding of the GtkListBoxRow padding
2809
min-height: 32px;
2810
margin: -1px 0; // Remove unknown margins
2811
padding: 0;
2812
// Using margins/padding directly in the SidebarRow
2814
// will make the animation of the new bookmark row jump
2815
> revealer { padding: 0 12px; }
2816
&:selected { color: $inverse_fg_color; }
2818
&:disabled { color: $disabled_fg_color; }
2820
image.sidebar-icon {
2822
opacity: $tertiary_opacity; // dim the device icons
2823
&:dir(ltr) { padding-right: 8px; }
2825
&:dir(rtl) { padding-left: 8px; }
2826
}
2827
label.sidebar-label {
2829
&:dir(ltr) { padding-right: 2px; }
2830
&:dir(rtl) { padding-left: 2px; }
2831
}
2832
@at-root button.sidebar-button {
2834
@extend %simple_flat_button;
2835
@extend %small_button;
2837
row:selected & {
2839
}
2840
}
2841
&.sidebar-placeholder-row {
2843
min-height: 2px;
2844
padding: 0 8px;
2845
background-image: image($accent_color);
2846
background-clip: content-box;
2847
}
2848
&.sidebar-new-bookmark-row { color: $accent_color; }
2850
&:drop(active):not(:disabled) {
2852
box-shadow: inset 0 0 0 2px $accent_color;
2853
&:selected {
2855
// background-color: $accent_color;
2856
// color: $inverse_fg_color;
2857
}
2858
}
2859
}
2860
}
2861
placesview {
2863
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2864
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2866
// this selects the "connect to server" label
2868
> actionbar > revealer > box > label {
2869
padding-left: 8px;
2870
padding-right: 8px;
2871
}
2872
}
2873
/*********
2876
* Paned *
2877
*********/
2878
paned {
2879
> separator {
2880
min-width: 1px;
2881
min-height: 1px;
2882
-gtk-icon-source: none; // defeats the ugly default handle decoration
2883
border-style: none; // just to be sure
2884
background-color: transparent;
2885
// workaround, using background istead of a border since the border will get rendered twice (?)
2886
background-image: image($border_color);
2887
background-size: 1px 1px;
2888
background-clip: content-box; // avoids borders image being rendered twice (?)
2889
&.wide {
2891
min-width: 6px;
2892
min-height: 6px;
2893
background-color: $bg_color;
2894
background-image: image($border_color), image($border_color);
2895
background-size: 1px 1px, 1px 1px;
2896
}
2897
}
2898
&.horizontal > separator {
2900
background-repeat: repeat-y;
2901
&:dir(ltr) {
2903
margin: 0 -8px 0 0;
2904
padding: 0 8px 0 0;
2905
background-position: left;
2906
}
2907
&:dir(rtl) {
2909
margin: 0 0 0 -8px;
2910
padding: 0 0 0 8px;
2911
background-position: right;
2912
}
2913
&.wide {
2915
margin: 0;
2916
padding: 0;
2917
background-repeat: repeat-y, repeat-y;
2918
background-position: left, right;
2919
}
2920
}
2921
&.vertical > separator {
2923
margin: 0 0 -8px 0;
2924
padding: 0 0 8px 0;
2925
background-repeat: repeat-x;
2926
background-position: top;
2927
&.wide {
2929
margin: 0;
2930
padding: 0;
2931
background-repeat: repeat-x, repeat-x;
2932
background-position: bottom, top;
2933
}
2934
}
2935
}
2936
/**************
2939
* GtkInfoBar *
2940
**************/
2941
infobar {
2942
border-style: none;
2943
&.info { background-color: $info_bg_color; }
2945
&.question { background-color: $question_bg_color; }
2947
&.warning { background-color: $warning_bg_color; }
2949
&.error { background-color: $error_bg_color; }
2951
&.info,
2953
&.question,
2954
&.warning,
2955
&.error {
2956
> label, & { color: $inverse_fg_color; }
2957
button { @extend %button_selected; }
2959
selection {}
2961
*:link { @extend %link_selected; }
2963
}
2964
}
2965
/************
2968
* Tooltips *
2969
************/
2970
tooltip {
2971
&.background {
2972
// background-color needs to be set this way otherwise it gets drawn twice
2973
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2974
box-shadow: inset 0 1px $highlight_color;
2975
background-color: scale-alpha($base_color, $higher_opacity);
2976
}
2977
// @extend %osd;
2979
// padding: 4px; /* not working */
2981
border-radius: 2px;
2982
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2983
&:not(.csd) {
2985
border: 1px solid $border_color;
2986
border-radius: 2px + 1px;
2987
background-clip: $extra_background_clip;
2988
}
2989
// FIXME: we need a border or tooltips vanish on black background.
2991
decoration { background-color: transparent; }
2992
label {
2994
// tooltip label has already 6px margins
2995
min-height: 32px - 6px * 2;
2996
padding: 0 8px - 6px;
2997
}
2998
* {
3000
// workaround for Eclipse.
3001
// do not include any declaration here.
3002
// padding: 0;
3003
// background-color: transparent;
3004
// color: inherit;
3005
}
3006
}
3007
/*****************
3010
* Color Chooser *
3011
*****************/
3012
colorswatch {
3013
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3014
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3015
// applied to the overlay box.
3016
// base color corners rounding
3018
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3019
// sports a bigger radius.
3020
// nth-child is needed by the custom color strip.
3021
&.top {
3023
border-top-left-radius: $material_radius + 0.5px;
3024
border-top-right-radius: $material_radius + 0.5px;
3025
overlay {
3027
border-top-left-radius: $material_radius;
3028
border-top-right-radius: $material_radius;
3029
}
3030
}
3031
&.bottom {
3033
border-bottom-left-radius: $material_radius + 0.5px;
3034
border-bottom-right-radius: $material_radius + 0.5px;
3035
overlay {
3037
border-bottom-left-radius: $material_radius;
3038
border-bottom-right-radius: $material_radius;
3039
}
3040
}
3041
&.left,
3043
&:first-child:not(.top) {
3044
border-top-left-radius: $material_radius + 0.5px;
3045
border-bottom-left-radius: $material_radius + 0.5px;
3046
overlay {
3048
border-top-left-radius: $material_radius;
3049
border-bottom-left-radius: $material_radius;
3050
}
3051
}
3052
&.right,
3054
&:last-child:not(.bottom) {
3055
border-top-right-radius: $material_radius + 0.5px;
3056
border-bottom-right-radius: $material_radius + 0.5px;
3057
overlay {
3059
border-top-right-radius: $material_radius;
3060
border-bottom-right-radius: $material_radius;
3061
}
3062
}
3063
&.dark overlay { color: $light_fg_color; }
3065
&.light overlay { color: $dark_fg_color; }
3067
&.dark { color: $light_fg_color; } // for focus ring
3069
&.light { color: $dark_fg_color; } // for focus ring
3071
&:drop(active) {
3073
box-shadow: none;
3074
&.light overlay {
3076
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3077
}
3078
&.dark overlay {
3080
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3081
}
3082
}
3083
overlay {
3085
transition: $shadow_transition;
3086
box-shadow: $shadow_1;
3087
&:hover { box-shadow: $shadow_2; }
3089
}
3090
&#add-color-button {
3092
border-radius: $material_radius $material_radius 0 0;
3093
color: $light_fg_color; // for focus ring
3094
&:only-child { border-radius: $material_radius; }
3096
overlay {
3098
background-image: linear-gradient(to right,
3099
$error_bg_color 25%,
3100
$warning_bg_color 25%, $warning_bg_color 50%,
3101
$info_bg_color 50%, $info_bg_color 75%,
3102
$question_bg_color 75%);
3103
color: $light_fg_color;
3104
}
3105
}
3106
&:disabled {
3108
opacity: $disabled_opacity;
3109
overlay { box-shadow: none; }
3111
}
3112
row:selected & {
3114
}
3115
&#editor-color-sample {
3117
border-radius: $material_radius + 0.5px;
3118
overlay { border-radius: $material_radius; }
3120
// overlay:hover { box-shadow: $shadow_1; }
3122
}
3123
}
3124
// colorscale popup
3126
colorchooser .popover.osd {
3127
transition: $shadow_transition;
3128
border-radius: 2px;
3129
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3130
background-color: $base_color;
3131
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3133
spinbutton:not(.vertical) { @extend %entry.flat; }
3135
}
3136
/********
3139
* Misc *
3140
********/
3141
//content view (grid/list)
3142
.content-view {
3143
background-color: $bg_color;
3144
// &:hover { -gtk-icon-effect: highlight; }
3146
rubberband, .rubberband { @extend rubberband; }
3148
}
3149
.scale-popup {
3151
.osd & { @extend %osd; }
3152
.osd & button.flat { //FIXME: quick hack, redo properly
3154
}
3155
button { // +/- buttons on GtkVolumeButton popup
3157
}
3158
}
3159
/**********************
3162
* Window Decorations *
3163
*********************/
3164
decoration {
3165
transition: $shadow_transition;
3166
border-radius: 2px 2px 0 0;
3167
box-shadow: $shadow_4, 0 16px 16px transparent;
3168
// FIXME rationalize shadows
3170
// this is used for the resize cursor area
3172
margin: 8px;
3173
&:backdrop {
3175
// the transparent shadow here is to enforce that the shadow extents don't
3176
// change when we go to backdrop, to prevent jumping windows.
3177
// The biggest shadow should be in the same order then in the active state
3178
// or the jumping will happen during the transition.
3179
box-shadow: $shadow_2, 0 16px 16px transparent;
3180
}
3181
.maximized &,
3183
.fullscreen &,
3184
.tiled & { border-radius: 0; }
3185
.popup & { box-shadow: none; }
3187
// server-side decorations as used by mutter
3189
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3190
.csd.popup & {
3192
border-radius: 2px;
3193
box-shadow: $shadow_2;
3194
}
3195
tooltip.csd & {
3197
border-radius: 2px;
3198
box-shadow: $shadow_2;
3199
}
3200
messagedialog.csd & {
3202
border-radius: 2px;
3203
// box-shadow: $shadow_4, 0 16px 16px transparent;
3204
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3206
}
3207
.solid-csd & {
3209
margin: 0;
3210
padding: 4px;
3211
// border: solid 1px $border_color;
3212
// border-radius: 0;
3213
box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3214
// background-color: $border_color;
3215
}
3216
}
3217
// Window Close button
3219
button.titlebutton {
3220
// @extend %simple_flat_button;
3221
@extend %circular_button;
3223
.selection-mode & {
3225
}
3226
}
3227
// catch all extend :)
3230
%selected_items {
3232
background-color: $primary_color;
3233
@at-root %nobg_selected_items, & {
3235
color: $inverse_fg_color;
3236
&:disabled { color: $disabled_inverse_fg_color; }
3238
}
3239
}
3240
.monospace { font-family: monospace; }
3242
/**********************
3245
* Touch Copy & Paste *
3246
*********************/
3247
//touch selection handlebars for the Popover.osd above
3248
cursor-handle {
3249
border-radius: $circular_radius;
3250
background-color: $accent_color;
3251
background-image: none;
3252
&.top:dir(ltr), &.bottom:dir(rtl) {
3254
padding-left: 6px;
3255
border-top-right-radius: 0;
3256
}
3257
&.bottom:dir(ltr), &.top:dir(rtl) {
3259
padding-right: 6px;
3260
border-top-left-radius: 0;
3261
}
3262
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3264
-GtkWidget-text-handle-width: 24;
3265
-GtkWidget-text-handle-height: 30;
3266
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3268
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3269
url('#{$_url}@2.png'));
3270
}
3271
}
3272
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3274
%circular_button,
3276
button.close,
3277
button.circular { // FIXME: aggregate to buttons
3278
border-radius: $circular_radius;
3279
-gtk-outline-radius: $circular_radius;
3280
// label { padding: 0; }
3282
}
3283
%small_button {
3285
min-height: $small_size;
3286
min-width: $small_size;
3287
padding: 0;
3288
border-radius: $circular_radius;
3289
-gtk-outline-radius: $circular_radius;
3290
}
3291
// shortcut window keys
3293
.keycap {
3294
min-width: 28px - 8px * 2;
3295
min-height: 28px - 2px;
3296
margin-top: 2px;
3297
padding-bottom: 2px;
3298
padding-left: 8px;
3299
padding-right: 8px;
3300
border: solid 1px $border_color;
3302
border-radius: 2px + 1px;
3303
box-shadow: inset 0 -2px $border_color;
3304
background-color: $base_color;
3305
color: $fg_color;
3306
font-size: smaller;
3307
}
3308
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3310
transition: $longer_transition;
3311
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3312
caret-color: $accent_color;
3313
}
3314
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3316
stackswitcher button.circular,
3318
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3319
min-width: $medium_size;
3320
min-height: $medium_size;
3321
padding: 0;
3322
}
3323