ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
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: transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: 2px;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
switch:focus slider,
37
notebook:focus tab,
38
*:focus { outline-color: $fill_color; }
39
/***************
42
* Base States *
43
***************/
44
.background {
45
background-color: $bg_color;
46
color: $fg_color;
47
}
48
/*
50
These wildcard seems unavoidable, need to investigate.
51
Wildcards are bad and troublesome, use them with care,
52
or better, just don't.
53
Everytime a wildcard is used a kitten dies, painfully.
54
*/
55
*:disabled { -gtk-icon-effect: dim; }
57
.gtkstyle-fallback {
59
background-color: $bg_color;
60
color: $fg_color;
61
&:hover {
63
background-color: darken($bg_color, 5%);
64
color: $fg_color;
65
}
66
&:active {
68
background-color: darken($bg_color, 10%);
69
color: $fg_color;
70
}
71
&:disabled {
73
background-color: $bg_color;
74
color: $disabled_fg_color;
75
}
76
&:selected {
78
background-color: $primary_color;
79
color: $inverse_fg_color;
80
}
81
}
82
.view {
84
@extend row.activatable;
85
background-color: $base_color;
87
color: $fg_color;
88
&:disabled { color: $disabled_fg_color; }
90
&:hover, &:active, &:selected { border-radius: 2px; }
92
selection,
94
&:selected { @extend %selected_items; }
95
}
96
textview {
98
// FIXME: we need to override background-color to ensure text rendering
99
text { background-color: $base_color; }
100
border {
102
background-color: $alt_base_color;
103
color: $tertiary_fg_color; // FIXME: not working
104
}
105
}
106
// iconview { @extend .view; }
108
.rubberband,
110
rubberband {
111
border: 1px solid $alt_primary_color;
112
background-color: scale-alpha($alt_primary_color, $lower_opacity);
113
}
114
flowbox {
116
rubberband { @extend rubberband; }
117
flowboxchild {
119
padding: 4px;
120
border-radius: 2px;
121
&:selected { @extend %selected_items; }
123
}
124
}
125
.content-view .tile {
127
// margin: 2px;
128
// padding: 0;
129
// border-radius: 0;
130
// background-color: $black;
131
&:selected {
133
background-color: transparent;
134
color: inherit;
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 & { color: inherit; }
162
}
163
}
164
.dim-label { opacity: $tertiary_opacity; }
166
assistant {
168
.sidebar {
169
padding: 4px 0;
170
// background-color: $base_color;
171
// border-top: 1px solid $border_color;
172
}
173
// &.csd .sidebar { border-top-style: none; }
175
.sidebar label {
177
min-height: $medium_size;
178
padding: 0 12px;
179
color: $tertiary_fg_color;
180
font-weight: 500;
181
&.highlight { color: $fg_color; }
183
}
184
}
185
%osd, .osd { opacity: $higher_opacity; }
187
/*********************
190
* Spinner Animation *
191
*********************/
192
@keyframes spin {
193
to { -gtk-icon-transform: rotate(1turn); }
194
}
195
spinner {
197
background: none;
198
opacity: 0; // non spinning spinner makes no sense
199
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
200
&:checked {
202
opacity: 1;
203
animation: spin 1s linear infinite;
204
&:disabled { opacity: $disabled_opacity; }
206
}
207
}
208
/****************
211
* Text Entries *
212
****************/
213
%entry,
214
entry {
215
%entry_basic, & {
216
min-height: $medium_size;
217
padding: 0 8px;
218
border-radius: 2px;
219
@include entry(normal);
221
&:focus { @include entry(focus); }
223
&:disabled { @include entry(disabled); }
225
&.flat {
227
border-radius: 0;
228
@include entry(flat-normal);
230
&:focus { @include entry(flat-focus); }
232
&:disabled { @include entry(flat-disabled); }
234
}
235
image { // icons inside the entry
237
// @extend %simple_flat_button;
238
// min-height: $small_size;
240
// min-width: $small_size;
241
// border-radius: $circular_radius;
242
// -gtk-outline-radius: $circular_radius;
243
color: gtkalpha(currentColor, $secondary_opacity);
244
&:hover, &:active { color: currentColor; }
246
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
248
&.left { margin-left: 2px; margin-right: 6px; }
250
&.right { margin-left: 6px; margin-right: 2px; }
252
}
253
undershoot {
255
&.left { @include undershoot(left); }
256
&.right { @include undershoot(right); }
258
}
259
selection { @extend %selected_items; }
261
// entry error and warning style
263
@each $e_type, $e_color in (error, $error_color),
264
(warning, $warning_color) {
265
&.#{$e_type} {
266
@include entry(normal, $e_color);
267
&:focus { @include entry(focus, $e_color); }
269
&:disabled { @include entry(disabled, $e_color); }
271
&.flat {
273
@include entry(flat-normal, $e_color);
274
&:focus { @include entry(flat-focus, $e_color); }
276
&:disabled { @include entry(flat-disabled, $e_color); }
278
}
279
}
280
}
281
&:drop(active) {
283
// box-shadow: inset 0 0 0 2px $accent_color;
284
}
285
.osd & {
287
}
288
}
289
progress {
291
margin: 2px (2px - 8px);
292
border-bottom: 2px solid $primary_color;
293
background-color: transparent;
294
}
295
// linked entries
297
.linked:not(.vertical) > & { @extend %linked; }
298
// Vertically linked entries
300
.linked.vertical > & { @extend %linked_vertical; }
301
.linked:not(.vertical) > &.flat,
303
.linked.vertical > &.flat { border-radius: 0; }
304
}
305
treeview entry {
307
&.flat, & {
308
min-height: 0;
309
padding: 2px;
310
border-radius: 0;
311
background-color: $base_color;
312
&, &:focus {
314
border-image: none;
315
box-shadow: none;
316
}
317
}
318
}
319
/***********
322
* Buttons *
323
***********/
324
// stuff for .needs-attention
325
@keyframes needs_attention {
326
from {
327
background-image: -gtk-gradient(radial,
328
center center, 0,
329
center center, 0.001,
330
to($accent_color),
331
to(transparent));
332
}
333
to {
335
background-image: -gtk-gradient(radial,
336
center center, 0,
337
center center, 0.5,
338
to($accent_color),
339
to(transparent));
340
}
341
}
342
%button,
344
button {
345
@at-root %button_basic, & {
346
min-height: 24px;
347
min-width: 16px;
348
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
349
border-radius: 2px;
350
font-weight: 500;
351
@include button(normal);
353
&:hover { @include button(hover); }
355
&:active { @include button(active); }
357
&:disabled { @include button(disabled); }
359
&:checked { @include button(checked); }
361
&:checked:disabled { @include button(checked-disabled); }
363
@at-root %flat_button, &.flat {
365
@at-root %simple_flat_button, & {
366
@include button(flat-normal);
367
&:hover { @include button(flat-hover); }
369
&:active { @include button(flat-active); }
371
&:disabled { @include button(flat-disabled); }
373
}
374
&:checked { @include button(flat-checked); }
376
&:checked:disabled { @include button(flat-checked-disabled); }
378
}
379
&.text-button {
381
padding-left: 16px;
382
padding-right: 16px;
383
}
384
&.image-button {
386
min-width: 24px;
387
padding: ($medium_size - 24px) / 2;
388
&:not(.text-button) { @extend %circular_button; }
390
}
391
&.text-button.image-button {
393
label {
394
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
395
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
397
}
398
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
400
}
401
.linked > & { @extend %linked; }
403
.linked.vertical > & { @extend %linked_vertical; }
405
.linked > &.flat,
407
.linked.vertical > &.flat {
408
border-radius: 2px;
409
&.image-button:not(.text-button) { @extend %circular_button; }
411
}
412
&:drop(active) {
414
// box-shadow: inset 0 0 0 2px $accent_color;
415
}
416
}
417
@at-root %button_selected, row:selected & {
419
&:disabled { color: $disabled_secondary_inverse_fg_color; }
420
}
421
// big standalone buttons like in Documents pager
423
&.osd {
424
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
425
&.image-button { padding: ($large_size - 24px) / 2; }
427
&:disabled { opacity: 0; }
429
}
430
// overlay / OSD style
432
@at-root %osd_button,
433
.osd & {
434
}
435
// Suggested and Destructive Action buttons
437
@each $b_type, $b_color in (suggested-action, $suggested_color),
438
(destructive-action, $destructive_color) {
439
&.#{$b_type} {
440
background-color: $b_color;
441
color: $inverse_fg_color;
442
&:disabled { @include button(disabled, $b_color); }
444
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
446
&.flat {
448
background-color: transparent;
449
color: $b_color;
450
&:disabled { @include button(flat-disabled, $b_color); }
452
&:checked { background-color: $fill_color; }
454
}
455
.osd & {
457
}
458
}
459
}
460
.stack-switcher > & {
462
// to position the needs attention dot, padding is added to the button
463
// child, a label needs just lateral padding while an icon needs vertical
464
// padding added too.
465
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
467
> label {
469
padding-left: 6px; // label padding
470
padding-right: 6px; //
471
}
472
> image {
474
padding-left: 6px; // image padding
475
padding-right: 6px; //
476
padding-top: 3px; //
477
padding-bottom: 3px; //
478
}
479
&.text-button {
481
// compensate text-button paddings
482
padding-left: 16px - 6px;
483
padding-right: 16px - 6px;
484
}
485
&.image-button {
487
// we want image buttons to have a 1:1 aspect ratio, so compensation
488
// of the padding added to the GtkImage is needed
489
padding-left: ($medium_size - 16px) / 2 - 6px;
490
padding-right: ($medium_size - 16px) / 2 - 6px;
491
}
492
&.needs-attention {
494
> label,
495
> image { @extend %needs_attention; }
496
&:checked {
498
> label,
499
> image {
500
animation: none;
501
background-image: none;
502
}
503
}
504
}
505
}
506
// hide separators
508
&.font,
509
&.file { separator { @extend %hide_separators; }}
510
// &.font { > box > box > label { font-weight: bold; }}
512
// inline-toolbar buttons
514
.inline-toolbar & {
515
// @extend %button_basic.flat;
516
&:not(.text-button) { @extend %circular_button; }
518
}
519
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
521
@at-root %circular_button,
523
&.close,
524
&.circular { // The Bloody Circul Button
525
border-radius: $circular_radius;
526
-gtk-outline-radius: $circular_radius;
527
// label { padding: 0; }
529
}
530
@at-root %small_button {
532
min-height: $small_size;
533
min-width: $small_size;
534
padding: 0;
535
border-radius: $circular_radius;
536
-gtk-outline-radius: $circular_radius;
537
}
538
}
539
%needs_attention {
541
animation: needs_attention $longer_duration $deceleration_curve forwards;
542
background-repeat: no-repeat;
543
background-position: right 3px;
544
background-size: 6px 6px;
545
&:dir(rtl) { background-position: left 3px; }
547
}
548
// all the following is for the +|- buttons on inline toolbars, that way
550
// should really be deprecated...
551
.inline-toolbar toolbutton > button { // redefining the button look is
552
// needed since those are flat...
553
}
554
// More inline toolbar buttons
556
toolbar.inline-toolbar toolbutton {
557
// > button.flat { @extend %linked_middle; }
558
// &:first-child > button.flat { @extend %linked:first-child; }
560
// &:last-child > button.flat { @extend %linked:last-child; }
562
// &:only-child > button.flat { @extend %linked:only-child; }
564
}
565
%linked_middle {
567
border-radius: 0;
568
-gtk-outline-radius: 2px;
569
}
570
%linked {
572
@extend %linked_middle;
573
&:first-child {
575
border-top-left-radius: 2px;
576
border-bottom-left-radius: 2px;
577
}
578
&:last-child {
580
border-top-right-radius: 2px;
581
border-bottom-right-radius: 2px;
582
}
583
&:only-child {
585
border-radius: 2px;
586
}
587
}
588
%linked_vertical_middle {
590
border-radius: 0;
591
-gtk-outline-radius: 2px;
592
}
593
%linked_vertical {
595
@extend %linked_vertical_middle;
596
&:first-child {
598
border-top-left-radius: 2px;
599
border-top-right-radius: 2px;
600
}
601
&:last-child {
603
border-bottom-left-radius: 2px;
604
border-bottom-right-radius: 2px;
605
}
606
&:only-child {
608
border-radius: 2px;
609
}
610
}
611
/* menu buttons */
613
modelbutton.flat,
614
.menuitem.button.flat {
615
min-height: $menuitem_size;
616
padding: 0 8px;
617
border-radius: 2px;
618
color: inherit;
619
@extend %simple_flat_button;
621
&:selected { @extend %selected_items; }
623
}
624
modelbutton.flat arrow {
626
background: none;
627
&:hover { background: none; }
629
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
631
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
633
}
634
button.color {
636
min-height: $small_size;
637
min-width: $small_size;
638
padding: $container_padding;
639
colorswatch:only-child {
641
// &, overlay { border-radius: 0; }
642
}
643
}
644
/*********
647
* Links *
648
*********/
649
*:link {
650
&, &:hover, &:active { color: $link_color; }
651
&:visited {
653
&, &:hover, &:active { color: $visited_link_color; }
654
}
655
@at-root %link_selected,
657
&:selected,
658
*:selected & { color: $inverse_fg_color; }
659
}
660
button:link,
662
button:visited {
663
@extend *:link;
664
> label { text-decoration-line: underline; }
666
}
667
/*****************
669
* GtkSpinButton *
670
*****************/
671
spinbutton {
672
&:not(.vertical) {
673
// in this horizontal configuration, the whole spinbutton
674
// behaves as the entry, so we extend the entry styling
675
// and nuke the style on the internal entry
676
@extend %entry;
677
padding: 0;
679
%spinbutton_entry,
681
entry {
682
min-width: $large_size - 8px * 2;
683
// reset all the other props since the spinbutton node is styled here
684
margin: 0;
685
border-image: none;
686
border-radius: 0;
687
box-shadow: none;
688
background-color: transparent;
689
//
690
// This will help to simplify spinbutton's code, but unfortunatelly
691
// doesn't work properly in :dir(rtl). It needs z-index property.
692
//
693
// min-width: $large_size - 8px;
694
//
695
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
696
//
697
// &:dir(ltr) {
698
// margin-right: -$spinbuttons_width;
699
// padding-right: $spinbuttons_width;
700
// }
701
//
702
// &:dir(rtl) {
703
// margin-left: -$spinbuttons_width;
704
// padding-left: $spinbuttons_width;
705
// }
706
}
707
button {
709
// margin: $container_padding;
710
border: solid $container_padding transparent;
711
@extend %simple_flat_button;
713
@extend %small_button;
715
&.up:dir(ltr),
717
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
718
&.up:dir(rtl),
720
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
721
}
722
}
723
// OSD horizontal
725
.osd &:not(.vertical) {
726
button {
727
}
728
}
729
// Vertical
731
&.vertical {
732
// in the vertical configuration, we treat the spinbutton
733
// as a box, and tweak the style of the entry in the middle
734
// so that it's linked
735
// FIXME: this should not be set at all, but otherwise it gets the wrong
737
// color
738
&:disabled { color: $disabled_fg_color; }
739
&:drop(active) {
741
box-shadow: none;
742
}
743
entry {
745
min-height: $medium_size;
746
min-width: $large_size;
747
padding: 0;
748
}
749
button {
751
min-height: $medium_size;
752
min-width: $large_size;
753
padding: 0;
754
@extend %simple_flat_button;
756
&.up { border-radius: 2px 2px 0 0; }
758
&.down { border-radius: 0 0 2px 2px; }
760
}
761
}
762
// OSD vertical
764
.osd &.vertical button:first-child {
765
}
766
// Misc
768
treeview &:not(.vertical) {
769
min-height: 0;
770
border-style: none;
771
border-radius: 0;
772
entry {
774
min-height: 0;
775
padding: 1px 2px;
776
}
777
}
778
}
779
/**************
782
* ComboBoxes *
783
**************/
784
combobox {
785
arrow {
786
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
787
min-height: 16px;
788
min-width: 16px;
789
}
790
decoration,
792
button.combo:checked { transition: none; } // workaround for menuitem selection
793
button.combo cellview {
795
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
796
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
797
}
798
#gtk-combobox-popup-menu {
800
padding: 2px 0;
801
menuitem {
803
min-height: $medium_size - 2px * 2;
804
padding: 0 8px;
805
}
806
// overflow arrows
808
> arrow {
809
&.top { margin-top: -2px; }
810
&.bottom { margin-bottom: -2px * 3; }
812
}
813
}
814
&.linked {
816
button:nth-child(2) {
817
&:dir(ltr) { @extend %linked:last-child; }
818
&:dir(rtl) { @extend %linked:first-child; }
819
}
820
}
821
&:drop(active) { // FIXME: untested
823
box-shadow: none;
824
// button.combo { @extend %button_basic:drop(active); }
826
}
827
}
828
// the combo is a composite widget so the way we do button linking doesn't
830
// work, special case needed. See
831
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
832
.linked:not(.vertical) > combobox {
834
> box > button.combo { @extend %linked_middle; }
835
&:first-child > box > button.combo { @extend %linked:first-child; }
837
&:last-child > box > button.combo { @extend %linked:last-child; }
839
&:only-child > box > button.combo { @extend %linked:only-child; }
841
}
842
.linked.vertical > combobox {
844
> box > button.combo { @extend %linked_vertical_middle; }
845
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
847
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
849
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
851
}
852
%combo_flat {
854
border-radius: 0;
855
background-image: none;
856
font-weight: inherit;
857
@include entry(flat-normal);
859
&:hover { box-shadow: inset 0 -2px $fill_color; }
861
&:checked {
863
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
864
$primary_color 100%,
865
transparent 0%)
866
0 0 2 / 0 0 2px;
867
}
868
&:disabled { color: $disabled_fg_color; }
870
}
871
/************
874
* Toolbars *
875
************/
876
toolbar {
877
-GtkWidget-window-dragging: true;
878
padding: $container_padding / 2;
879
background-color: $bg_color;
880
button { @extend %button_basic.flat; }
882
// on OSD
884
.osd & { background-color: transparent; }
885
// stand-alone OSD toolbars
887
&.osd {
888
transition: $shadow_transition;
889
padding: $container_padding;
890
border-radius: 2px;
891
box-shadow: $shadow_2, inset 0 1px $highlight_color;
892
background-color: $base_color;
893
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
895
&.left,
897
&.right,
898
&.top,
899
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
900
}
901
// toolbar separators
903
&.horizontal separator { margin: $container_padding / 2; }
904
&.vertical separator { margin: $container_padding / 2; }
905
&:not(.inline-toolbar):not(.osd) {
907
scale,
908
entry,
909
spinbutton,
910
button { margin: $container_padding / 2; }
911
.linked entry,
913
.linked spinbutton,
914
.linked button {
915
&:not(:first-child) { margin-left: 0; }
916
&:not(:last-child) { margin-right: 0; }
917
}
918
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
920
}
921
}
922
// searchbar, location-bar & inline-toolbar
924
.inline-toolbar {
925
padding: $container_padding;
926
border-style: solid;
927
border-width: 0 1px 1px;
928
border-color: $border_color;
929
background-color: $alt_base_color;
930
}
931
searchbar,
933
.location-bar {
934
padding: $container_padding;
935
border-style: solid;
936
border-width: 0 0 1px;
937
border-color: $border_color;
938
background-color: $bg_color;
939
background-clip: border-box;
940
}
941
/***************
944
* Header bars *
945
***************/
946
%titlebar,
947
headerbar {
948
transition: background-color $shorter_duration $deceleration_curve;
949
min-height: $large_size;
950
padding: 0 $container_padding;
951
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
952
background-color: $titlebar_bg_color;
953
color: $titlebar_fg_color;
954
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
956
&:backdrop {
958
color: $secondary_titlebar_fg_color;
959
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
961
}
962
.title {
964
transition: $longer_transition;
965
padding: 0 12px;
966
font-weight: bold;
967
}
968
.subtitle {
970
transition: $longer_transition;
971
padding: 0 12px;
972
font-size: smaller;
973
@extend .dim-label;
975
}
976
.linked:not(.vertical) > entry:not(.flat) { border-radius: 2px; }
978
button:not(.suggested-action):not(.destructive-action) {
980
@extend %button_basic.flat;
981
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
983
$titlebar_indicator_color 0%,
984
transparent 0%)
985
0 0 0 / 0 0 0px;
986
&:checked {
988
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
989
$titlebar_indicator_color 100%,
990
transparent 0%)
991
0 0 2 / 0 0 2px;
992
&, &:disabled { background-color: transparent; }
994
}
995
}
996
button.suggested-action, button.destructive-action {
998
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
999
}
1000
&.selection-mode {
1002
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1003
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1004
transition: background-color 0.00001s $longer_duration;
1005
animation: header_ripple_effect $longer_duration $deceleration_curve;
1006
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1007
background-color: $primary_color;
1008
color: $inverse_fg_color;
1009
&:backdrop {
1011
color: $secondary_inverse_fg_color;
1012
}
1013
.subtitle:link { @extend *:link:selected; }
1015
button:not(.suggested-action):not(.destructive-action) {
1017
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1018
currentColor 0%,
1019
transparent 0%)
1020
0 0 0 / 0 0 0px;
1021
color: currentColor;
1022
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1024
&:checked {
1026
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1027
currentColor 100%,
1028
transparent 0%)
1029
0 0 2 / 0 0 2px;
1030
color: currentColor;
1031
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1033
}
1034
}
1035
.selection-menu {
1037
padding-left: 16px;
1038
padding-right: 16px;
1039
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1041
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1043
}
1044
}
1045
.fullscreen &,
1047
.tiled &,
1048
.maximized & {
1049
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1050
box-shadow: $shadow_1;
1051
}
1052
&.default-decoration {
1054
min-height: $small_size;
1055
padding: $container_padding;
1056
box-shadow: inset 0 1px $titlebar_highlight_color;
1057
.fullscreen &,
1059
.tiled &,
1060
.maximized & { box-shadow: none; }
1061
button.titlebutton {
1063
min-height: $small_size;
1064
min-width: $small_size;
1065
margin: 0;
1066
padding: 0;
1067
}
1068
// workaround for non-animatable buttons
1070
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1071
}
1072
.solid-csd & {
1074
&:dir(rtl), &:dir(ltr) { // specificity bump
1075
// margin-left: -2px;
1076
// margin-right: -2px;
1077
// margin-top: -2px;
1078
// border-radius: 0;
1079
// box-shadow: inset 0 1px $titlebar_highlight_color;
1080
}
1081
}
1082
}
1083
headerbar {
1085
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1086
entry,
1087
spinbutton,
1088
// separator,
1089
button {
1090
margin-top: $container_padding;
1091
margin-bottom: $container_padding;
1092
}
1093
switch {
1095
margin-top: $container_padding * 2;
1096
margin-bottom: $container_padding * 2;
1097
}
1098
// reset button margins of the spinbutton
1100
spinbutton button {
1101
margin-top: 0;
1102
margin-bottom: 0;
1103
}
1104
}
1105
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1107
border-top-left-radius: 2px;
1108
border-top-right-radius: 2px;
1109
}
1110
headerbar { // headerbar border rounding
1112
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1113
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1114
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1116
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1118
&:first-child, &:last-child {
1119
border-top-left-radius: 2px;
1120
border-top-right-radius: 2px;
1121
}
1122
}
1123
}
1124
.titlebar:not(headerbar) {
1126
window.csd > & {
1127
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1128
padding: 0;
1129
background-color: transparent;
1130
background-image: none;
1131
border-style: none;
1132
box-shadow: none;
1133
}
1134
> separator {
1136
background-color: $titlebar_bg_color;
1137
background-image: image($border_color);
1138
}
1139
@extend %titlebar;
1141
}
1142
/************
1145
* Pathbars *
1146
************/
1147
%pathbar_button,
1148
.path-bar button {
1149
padding-left: ($medium_size - 24px) / 2;
1150
padding-right: ($medium_size - 24px) / 2;
1151
label:not(:only-child) {
1153
&:first-child { margin-left: 4px; }
1154
&:last-child { margin-right: 4px; }
1156
}
1157
&.slider-button {
1159
padding-left: (24px - 16px) / 2;
1160
padding-right: (24px - 16px) / 2;
1161
}
1162
:not(headerbar) & {
1164
@extend %flat_button;
1165
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1167
$primary_color 0%,
1168
transparent 0%)
1169
0 0 0 / 0 0 0px;
1170
border-radius: 2px;
1171
&:checked {
1173
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1174
$primary_color 100%,
1175
transparent 0%)
1176
0 0 2 / 0 0 2px;
1177
&, &:disabled { background-color: transparent; }
1179
}
1180
}
1181
}
1182
/**************
1185
* Tree Views *
1186
**************/
1187
treeview.view {
1188
@at-root * {
1189
-GtkTreeView-horizontal-separator: 4;
1190
-GtkTreeView-grid-line-width: 1;
1191
-GtkTreeView-grid-line-pattern: '';
1192
-GtkTreeView-tree-line-width: 1;
1193
-GtkTreeView-tree-line-pattern: '';
1194
-GtkTreeView-expander-size: 16;
1195
}
1196
border-left-color: $fill_color; // this is actually the tree lines color,
1198
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1199
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1201
&:hover, &:active, &:selected { border-radius: 0; }
1203
&.separator {
1205
min-height: 1px + 2px * 2;
1206
color: $border_color;
1207
}
1208
&:drop(active) {
1210
border-style: solid none;
1211
border-width: 1px;
1212
border-color: $accent_color;
1213
&.after { border-top-style: none; }
1215
&.before { border-bottom-style: none; }
1217
}
1218
&.expander {
1220
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1221
-gtk-icon-transform: rotate(-90deg);
1222
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1224
&:checked { -gtk-icon-transform: unset; }
1226
color: $secondary_fg_color;
1228
&:hover, &:active { color: $fg_color; }
1230
&:disabled { color: $disabled_secondary_fg_color; }
1232
&:selected {
1234
color: $secondary_inverse_fg_color;
1235
&:hover, &:active { color: $inverse_fg_color; }
1237
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1239
}
1240
}
1241
&.progressbar { // progress bar in treeviews
1243
border-bottom: $bar_size solid $primary_color;
1244
box-shadow: none;
1245
background-color: transparent;
1246
&:selected { border-bottom-color: currentColor; }
1248
}
1249
&.trough { // progress bar trough in treeviews
1251
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1252
box-shadow: none;
1253
background-color: transparent;
1254
&:selected { border-bottom-color: $fill_color; }
1256
}
1257
header {
1259
button {
1260
@extend row.activatable;
1261
padding: 2px 6px;
1263
border-style: none solid solid none;
1264
border-width: 1px;
1265
border-color: $border_color;
1266
border-radius: 0;
1267
background-clip: border-box;
1268
&, &:hover, &:active { box-shadow: none; }
1270
&, &:disabled { background-color: $base_color; }
1272
&:last-child { border-right-style: none; }
1274
}
1275
}
1276
button.dnd,
1278
header.button.dnd { // for treeview-like derive widgets
1279
padding: 2px 6px;
1280
border-style: none solid solid;
1281
border-width: 1px;
1282
border-color: $border_color;
1283
border-radius: 0;
1284
box-shadow: none;
1285
background-color: $base_color;
1286
background-clip: border-box;
1287
color: $primary_color;
1288
}
1289
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1291
}
1292
/*********
1295
* Menus *
1296
*********/
1297
menubar,
1298
.menubar {
1299
-GtkWidget-window-dragging: true;
1300
padding: 0;
1301
// box-shadow: inset 0 -1px $border_color;
1302
background-color: $titlebar_bg_color;
1303
> menuitem {
1305
transition: $shorter_transition;
1306
min-height: 20px;
1307
padding: 4px 8px;
1308
color: $secondary_titlebar_fg_color;
1309
&:hover { // Seems like it :hover even with keyboard focus
1311
transition: none;
1312
background-color: $semi_fill_color;
1313
color: $titlebar_fg_color;
1314
}
1315
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1317
}
1318
}
1319
.csd.popup { border-radius: 2px; }
1321
menu,
1323
.menu,
1324
.context-menu {
1325
margin: 4px 0;
1326
padding: 4px 0;
1327
box-shadow: inset 0 1px $highlight_color;
1328
background-color: $base_color;
1329
border: 1px solid $border_color; // adds borders in a non composited env
1330
.csd & {
1332
border: none; // axes borders in a composited env
1333
border-radius: 2px;
1334
}
1335
menuitem {
1337
transition: $shorter_transition;
1338
min-height: 20px;
1339
min-width: 40px;
1340
padding: 4px 8px;
1341
font: initial;
1342
text-shadow: none;
1343
&:hover {
1345
transition: none;
1346
background-color: $semi_fill_color;
1347
}
1348
&:disabled { color: $disabled_fg_color; }
1350
// submenu indicators
1352
arrow {
1353
min-height: 16px;
1354
min-width: 16px;
1355
&:dir(ltr) {
1357
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1358
margin-left: 8px;
1359
}
1360
&:dir(rtl) {
1362
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1363
margin-right: 8px;
1364
}
1365
}
1366
// avoids labels color being overridden, see
1368
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1369
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1370
}
1371
// overflow arrows
1373
> arrow {
1374
min-height: 16px;
1375
min-width: 16px;
1376
padding: 4px;
1377
background-color: $base_color;
1378
color: $secondary_fg_color;
1379
&.top {
1381
margin-top: -4px;
1382
border-bottom: 1px solid $border_color;
1383
border-radius: 2px 2px 0 0;
1384
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1385
}
1386
&.bottom {
1388
margin-bottom: -4px * 3;
1389
border-top: 1px solid $border_color;
1390
border-radius: 0 0 2px 2px;
1391
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1392
}
1393
&:hover {
1395
background-image: image($semi_fill_color);
1396
color: $fg_color;
1397
}
1398
&:disabled {
1400
border-color: transparent;
1401
background-color: transparent;
1402
color: transparent;
1403
// color: $disabled_secondary_fg_color;
1404
}
1405
}
1406
separator { margin: 4px 0; }
1408
}
1409
menuitem {
1411
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1412
}
1413
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1415
// Electron/Atom render all translucent colors in opaque colors.
1416
// It's a very critical issue for this theme and should be fixed by upstream...
1417
.popup:not(.csd) menu {
1418
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1419
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1420
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1421
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1422
menuitem {
1424
color: $opaque_fg_color;
1425
&:hover { background-color: $opaque_semi_fill_color; }
1427
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1429
}
1430
// TODO: not working this, where/how i can set the accelerators?
1432
accelerator { color: $opaque_tertiary_fg_color; }
1433
}
1434
/************
1437
* Popovers *
1438
************/
1439
popover.background {
1440
transition: $shadow_transition;
1441
padding: 2px;
1442
box-shadow: $shadow_2; // TODO: this should really have a highlight
1443
background-color: $lighter_bg_color;
1444
&:backdrop { box-shadow: $shadow_1; }
1446
&, .csd & {
1448
border-style: solid;
1449
border-width: 1px;
1450
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1451
border-radius: 2px + 1px;
1452
}
1453
> stack { margin: -4px; } // remove extra padding from menu style popovers
1455
> toolbar { margin: -2px; }
1457
> list,
1459
> .view,
1460
> toolbar {
1461
border-style: none;
1462
box-shadow: none;
1463
background-color: transparent;
1464
}
1465
&.touch-selection,
1467
&.magnifier,
1468
&.osd { @extend %osd; }
1469
// entry { @extend %entry.flat; }
1471
// button.combo { @extend %combo_flat; }
1473
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1475
&.menu button,
1477
button.model {
1478
@extend %simple_flat_button;
1479
min-height: 32px;
1481
padding: 0 8px;
1482
border-radius: 2px;
1483
&:checked { @extend %selected_items; }
1485
}
1486
separator { margin: 4px 0; }
1488
list separator { margin: 0; }
1490
}
1491
/*************
1493
* Notebooks *
1494
*************/
1495
notebook {
1496
> header {
1497
border-width: 1px;
1498
border-color: $border_color;
1499
background-color: $bg_color;
1500
background-clip: border-box;
1501
&.top {
1503
border-bottom-style: solid;
1504
> tabs {
1505
margin-bottom: -1px;
1506
> tab {
1507
&:hover { box-shadow: inset 0 -2px $fill_color; }
1509
&:checked { box-shadow: inset 0 -2px $primary_color; }
1511
}
1512
}
1513
}
1514
&.bottom {
1516
border-top-style: solid;
1517
> tabs {
1518
margin-top: -1px;
1519
> tab {
1520
&:hover { box-shadow: inset 0 2px $fill_color; }
1522
&:checked { box-shadow: inset 0 2px $primary_color; }
1524
}
1525
}
1526
}
1527
&.left {
1529
border-right-style: solid;
1530
> tabs {
1531
margin-right: -1px;
1532
> tab {
1533
&:hover { box-shadow: inset -2px 0 $fill_color; }
1535
&:checked { box-shadow: inset -2px 0 $primary_color; }
1537
}
1538
}
1539
}
1540
&.right {
1542
border-left-style: solid;
1543
> tabs {
1544
margin-left: -1px;
1545
> tab {
1546
&:hover { box-shadow: inset 2px 0 $fill_color; }
1548
&:checked { box-shadow: inset 2px 0 $primary_color; }
1550
}
1551
}
1552
}
1553
&.top > tabs > arrow {
1555
@extend %notebook_vert_arrows;
1556
border-top-style: none;
1558
}
1559
&.bottom > tabs > arrow {
1561
@extend %notebook_vert_arrows;
1562
border-bottom-style: none;
1564
}
1565
@at-root %notebook_vert_arrows {
1567
padding-left: 4px;
1568
padding-right: 4px;
1569
&.down {
1571
margin-left: -8px;
1572
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1573
}
1574
&.up {
1576
margin-right: -8px;
1577
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1578
}
1579
}
1580
&.left > tabs > arrow {
1582
@extend %notebook_horz_arrows;
1583
border-left-style: none;
1585
}
1586
&.right > tabs > arrow {
1588
@extend %notebook_horz_arrows;
1589
border-right-style: none;
1591
}
1592
@at-root %notebook_horz_arrows {
1594
padding-top: 4px;
1595
padding-bottom: 4px;
1596
&.down {
1598
margin-top: -8px;
1599
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1600
}
1601
&.up {
1603
margin-bottom: -8px;
1604
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1605
}
1606
}
1607
> tabs > arrow {
1609
@extend %simple_flat_button;
1610
min-height: 16px;
1612
min-width: 16px;
1613
border-radius: 0;
1614
}
1615
tab {
1617
transition: $longer_transition,
1618
background-size 0,
1619
background-image 0;
1620
min-height: $small_size;
1621
min-width: $small_size;
1622
padding: $container_padding 12px;
1623
outline-offset: -6px;
1625
border-width: 1px; // for reorderable tabs
1627
border-color: transparent; //
1628
background-image: radial-gradient(circle farthest-corner at center,
1630
$primary_color 10%,
1631
transparent 0%);
1632
background-repeat: no-repeat;
1633
background-position: center;
1634
background-size: 0% 0%;
1635
color: $secondary_fg_color;
1637
font-weight: 500;
1638
&:hover {
1640
color: $fg_color;
1641
&.reorderable-page {
1643
border-color: $border_color;
1644
background-color: $alt_base_color;
1645
}
1646
}
1647
&:disabled { color: $disabled_secondary_fg_color; }
1649
&:checked {
1651
transition: $longer_transition,
1652
background-size $longer_duration $deceleration_curve,
1653
background-image $longer_duration + $ripple_duration $deceleration_curve;
1654
background-image: radial-gradient(circle farthest-corner at center,
1655
transparent 10%,
1656
transparent 0%);
1657
background-size: 1000% 1000%;
1658
color: $fg_color;
1659
&:disabled { color: $disabled_fg_color; }
1661
&.reorderable-page {
1663
border-color: $border_color;
1664
background-color: $base_color;
1665
}
1666
}
1667
// colors the button like the label, overridden otherwise
1669
button.flat {
1670
@extend %small_button;
1671
&:last-child {
1673
margin-left: $container_padding;
1674
margin-right: $container_padding - 12px;
1675
}
1676
&:first-child {
1678
margin-left: $container_padding - 12px;
1679
margin-right: $container_padding;
1680
}
1681
}
1682
}
1683
&.top,
1685
&.bottom {
1686
tabs {
1687
padding-left: 8px;
1688
padding-right: 8px;
1689
&:not(:only-child) {
1691
&:first-child { margin-left: 0; }
1692
&:last-child { margin-right: 0; }
1693
}
1694
tab {
1696
&.reorderable-page {
1697
margin: 0 -1px;
1698
border-style: none solid;
1699
}
1700
}
1701
}
1702
}
1703
&.left,
1705
&.right {
1706
tabs {
1707
padding-top: 8px;
1708
padding-bottom: 8px;
1709
&:not(:only-child) {
1711
&:first-child { margin-top: 0; }
1712
&:last-child { margin-bottom: 0; }
1713
}
1714
tab {
1716
&.reorderable-page {
1717
margin: -1px 0;
1718
border-style: solid none;
1719
}
1720
}
1721
}
1722
}
1723
}
1724
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1726
background-color: $base_color;
1727
entry:not(.search),
1729
spinbutton:not(.vertical) { @extend %entry.flat; }
1730
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1732
button.combo { @extend %combo_flat; }
1734
}
1735
}
1736
/**************
1739
* Scrollbars *
1740
**************/
1741
scrollbar {
1742
$_slider_min_length: 24px;
1743
// disable steppers
1745
@at-root * {
1746
-GtkScrollbar-has-backward-stepper: false;
1747
-GtkScrollbar-has-forward-stepper: false;
1748
}
1749
transition: $longer_transition;
1751
background-color: $base_color;
1752
background-clip: $extra_background_clip;
1753
// scrollbar border
1755
&.top { border-bottom: 1px solid $border_color; }
1756
&.bottom { border-top: 1px solid $border_color; }
1757
&.left { border-right: 1px solid $border_color; }
1758
&.right { border-left: 1px solid $border_color; }
1759
// slider
1761
slider {
1762
transition: $shorter_transition, margin 0, border-width 0;
1763
min-width: 8px;
1764
min-height: 8px;
1765
border: 4px solid transparent;
1766
border-radius: $circular_radius;
1767
background-clip: padding-box;
1768
background-color: $tertiary_fg_color;
1769
&:hover { background-color: $secondary_fg_color; }
1771
&:active { background-color: $fg_color; }
1773
&:disabled { background-color: $disabled_tertiary_fg_color; }
1775
}
1776
&.fine-tune {
1778
slider {
1779
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1780
min-width: 4px;
1781
min-height: 4px;
1782
}
1783
&.horizontal slider { margin: 2px 0; }
1785
&.vertical slider { margin: 0 2px; }
1787
}
1788
&.overlay-indicator {
1790
&:not(.dragging):not(.hovering) {
1791
border-color: transparent;
1792
background-color: transparent;
1793
slider {
1795
min-width: 4px;
1796
min-height: 4px;
1797
margin: 4px - 1px;
1798
border: 1px solid scale-alpha($base_color, $lower_opacity);
1799
}
1800
button {
1802
min-width: 4px;
1803
min-height: 4px;
1804
margin: 4px - 1px;
1805
border: 1px solid scale-alpha($base_color, $lower_opacity);
1806
border-radius: $circular_radius;
1807
background-color: $tertiary_fg_color;
1808
background-clip: padding-box;
1809
-gtk-icon-source: none;
1810
&:disabled { background-color: $disabled_tertiary_fg_color; }
1812
}
1813
&.horizontal {
1815
slider { min-width: $_slider_min_length; }
1816
button { min-width: 8px; }
1818
}
1819
&.vertical {
1821
slider { min-height: $_slider_min_length; }
1822
button { min-height: 8px; }
1824
}
1825
}
1826
&.dragging,
1828
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1829
}
1830
&.horizontal slider { min-width: $_slider_min_length; }
1832
&.vertical slider { min-height: $_slider_min_length; }
1834
// button styling
1836
button {
1837
@extend %simple_flat_button;
1838
min-width: 16px;
1840
min-height: 16px;
1841
padding: 0;
1842
border-radius: 0;
1843
}
1844
// button icons
1846
&.vertical {
1847
button {
1848
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1849
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1851
}
1852
}
1853
&.horizontal {
1855
button {
1856
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1857
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1859
}
1860
}
1861
}
1862
/**********
1865
* Switch *
1866
**********/
1867
switch {
1868
transition: $longer_transition;
1869
margin: $container_padding 0;
1870
border: 4px solid transparent;
1871
border-radius: $circular_radius;
1872
background-color: $fill_color;
1873
background-clip: padding-box;
1874
font-size: 0;
1875
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1877
&:checked {
1879
background-color: scale-alpha($accent_color, 0.5);
1880
&:disabled {
1882
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1883
color: $disabled_fg_color;
1884
}
1885
}
1886
slider {
1888
@include entry(normal);
1889
transition: $longer_transition, $shadow_transition, margin 0;
1891
min-width: $small_size;
1892
min-height: $small_size;
1893
margin: -4px 0 -4px -4px;
1894
border-radius: $circular_radius;
1895
-gtk-outline-radius: $circular_radius;
1896
}
1897
&:hover slider { @include entry(focus); }
1899
&:checked slider {
1901
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1902
animation: needs_attention $longer_duration $deceleration_curve;
1903
margin: -4px -4px -4px 0;
1904
background-color: $accent_color;
1905
color: $inverse_fg_color;
1906
}
1907
&:disabled slider { @include entry(disabled); }
1909
&:checked:disabled slider { animation: none; }
1911
row:selected & {
1913
}
1914
}
1915
/*************************
1918
* Check and Radio items *
1919
*************************/
1920
// draw regular check and radio items using our PNG assets
1921
// all assets are rendered from assets.svg. never add pngs directly
1922
// selection-mode
1924
.view.content-view.check:not(list),
1925
.content-view .tile check:not(list) {
1926
min-height: 40px;
1927
min-width: 40px;
1928
margin: 0;
1929
padding: 0;
1930
box-shadow: none;
1931
background-color: transparent;
1932
background-image: none;
1933
-gtk-icon-shadow: $shadow_1;
1934
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1936
@each $s, $as in ('', '-unchecked'),
1938
(':checked', '-checked') {
1939
&#{$s} {
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
}
1943
}
1944
}
1945
checkbutton.text-button,
1947
radiobutton.text-button {
1948
// this is for a nice focus on check and radios text
1949
padding: 2px;
1950
outline-offset: 0;
1951
label:not(:only-child) { margin: 0 4px; }
1953
}
1954
check,
1956
radio {
1957
min-height: 24px;
1958
min-width: 24px;
1959
margin: -($large_size - 24px) / 2;
1960
padding: ($large_size - 24px) / 2;
1961
@extend %simple_flat_button;
1963
@extend %circular_button;
1965
&:checked, &:indeterminate {
1967
color: $accent_color;
1968
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1970
}
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
popover & {
1983
&, &:hover, &:disabled {
1984
box-shadow: none;
1985
background-image: none;
1986
}
1987
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1989
&.left:dir(rtl) {
1991
margin-left: -16px;
1992
margin-right: -8px;
1993
}
1994
&.right:dir(ltr) {
1996
margin-left: -8px;
1997
margin-right: -16px;
1998
}
1999
}
2000
menu menuitem & {
2002
transition: none;
2003
min-height: 16px;
2004
min-width: 16px;
2005
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2006
padding: 0;
2007
&:dir(ltr) { margin-right: 8px; }
2009
&:dir(rtl) { margin-left: 8px; }
2011
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2013
&, &:hover, &:disabled {
2015
box-shadow: none;
2016
// color: inherit;
2017
}
2018
}
2019
}
2020
%check,
2022
check {
2023
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2024
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2025
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2027
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2028
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2030
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2031
}
2032
%radio,
2034
radio {
2035
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2036
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2037
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2039
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2040
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2042
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2043
border-image-slice: $large_size / 2px;
2045
border-image-width: $large_size / 2;
2046
$radio_indicator: 10px / $large_size / 2;
2048
& {
2050
border-image-source: -gtk-gradient(radial,
2051
center center, 0,
2052
center center, 0.001,
2053
to($accent_color),
2054
to(transparent));
2055
}
2056
&:checked:not(:indeterminate) {
2058
border-image-source: -gtk-gradient(radial,
2059
center center, 0,
2060
center center, $radio_indicator,
2061
to($accent_color),
2062
to(transparent));
2063
}
2064
&:checked:not(:indeterminate):disabled {
2066
border-image-source: -gtk-gradient(radial,
2067
center center, 0,
2068
center center, $radio_indicator,
2069
to(scale-alpha($accent_color, $disabled_opacity)),
2070
to(transparent));
2071
}
2072
}
2073
%small_check,
2075
menu menuitem check {
2076
& {
2077
border-radius: 2px;
2078
-gtk-outline-radius: 2px;
2079
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2080
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2081
}
2082
&:checked {
2084
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2085
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2086
}
2087
&:indeterminate {
2089
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2090
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2091
}
2092
}
2093
%small_radio,
2095
menu menuitem radio {
2096
& {
2097
border-image: none;
2098
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2099
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2100
}
2101
&:checked {
2103
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2104
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2105
}
2106
&:indeterminate {
2108
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2109
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2110
}
2111
}
2112
// ANIMATION:
2114
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2115
// the transformation is set on the active state and it get reset on the checked state.
2116
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2117
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2119
check:not(:checked):indeterminate:active,
2121
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2122
check:not(:checked),
2124
radio:not(:checked) {
2125
& {
2126
transition: $longer_transition,
2127
background-size $ripple_duration $deceleration_curve,
2128
background-image $ripple_duration * 2 $deceleration_curve,
2129
-gtk-icon-transform 0;
2130
}
2131
&:active {
2133
transition: $longer_transition,
2134
background-size 0,
2135
background-image 0,
2136
-gtk-icon-transform 0;
2137
}
2138
menu menuitem & { transition: none; }
2140
}
2141
treeview.view check,
2143
treeview.view radio {
2144
padding: 0;
2145
&:hover {
2147
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2148
&:disabled { box-shadow: none; }
2150
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2152
}
2153
& {
2155
color: $secondary_fg_color;
2156
&:hover, &:active { color: $fg_color; }
2158
&:disabled { color: $disabled_secondary_fg_color; }
2160
&:checked, &:indeterminate { color: $accent_color; }
2162
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2164
}
2165
&:selected {
2167
color: $secondary_inverse_fg_color;
2168
&:hover, &:active { color: $inverse_fg_color; }
2170
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2172
&:checked, &:indeterminate { color: $accent_color; }
2174
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2176
}
2177
}
2178
treeview.view radio:checked {
2180
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2181
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2182
border-image: none;
2183
}
2184
/************
2187
* GtkScale *
2188
************/
2189
scale {
2190
// sizing
2191
$_marks_lenght: 8px;
2192
$_marks_distance: 8px;
2193
$slider_size: 24px;
2195
$marks_slider_size: 30px;
2196
$slider_margin: -($slider_size - $bar_size) / 2;
2198
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2199
$color_slider_margin: -($slider_size) / 2;
2201
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2202
min-height: $medium_size - $slider_size;
2204
min-width: $medium_size - $slider_size;
2205
padding: ($slider_size / 2);
2206
* { transition: $longer_transition; }
2208
// the slider is inside the trough, so to have make it bigger there's a negative margin
2210
slider {
2211
min-height: $slider_size;
2212
min-width: $slider_size;
2213
margin: $slider_margin;
2214
}
2215
// the backing bit
2217
trough {
2218
outline-offset: 2px;
2219
background-color: $fill_color;
2220
&:disabled { color: $disabled_fg_color; }
2222
}
2223
// the colored part of the backing bit
2225
highlight {
2226
background-color: $accent_color;
2227
&:disabled { background-color: transparent; }
2229
}
2230
// this is another differently styled part of the backing bit, the most relevant use case is for example
2232
// in media player to indicate how much video stream as been cached
2233
fill {
2234
background-color: $fill_color;
2235
&:disabled { background-color: transparent; }
2237
}
2238
slider {
2240
transition: all $shorter_duration $standard_curve;
2241
// border-radius: 100%;
2242
// background-color: $accent_color;
2243
background-repeat: no-repeat;
2244
background-position: center;
2245
@each $s, $as in ('', ''),
2247
(':disabled', '-disabled') {
2248
&#{$s} {
2249
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2250
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2252
}
2253
}
2254
background-size: calc(100% - 8px);
2256
&:hover { background-size: calc(100% - 4px); }
2258
&:active { background-size: calc(100% - 0px); }
2260
}
2261
// click-and-hold the slider to activate
2263
&.fine-tune {
2264
// to make the slider shrink in fine-tune mode
2265
slider { background-size: calc(100% - 12px); }
2266
}
2267
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2269
marks {
2271
color: $fill_color;
2272
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2274
(bottom, bottom, top),
2275
(top, left, right),
2276
(bottom, right, left) {
2277
&.#{$marks_class} {
2278
margin-#{$marks_margin}: $_marks_distance;
2279
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2280
}
2281
}
2282
}
2283
&.horizontal {
2285
indicator {
2286
min-height: $_marks_lenght;
2287
min-width: 1px;
2288
}
2289
}
2290
&.vertical {
2292
indicator {
2293
min-height: 1px;
2294
min-width: $_marks_lenght;
2295
}
2296
}
2297
// *WARNING* scale with marks madness following
2299
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2301
('vertical', 'vert') {
2302
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2303
('marks-after', 'marks-after:not(.marks-before)') {
2304
&.#{$dir_class}.#{$marks_class} {
2305
slider {
2306
@each $state, $state_infix in ('', ''),
2307
(':disabled', '-disabled') {
2308
&#{$state} {
2309
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2310
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2312
}
2313
}
2314
@if $dir_class == 'horizontal' {
2316
min-height: $marks_slider_size;
2317
min-width: $slider_size;
2318
@if $marks_infix == 'marks-before' {
2320
margin-top: $marks_slider_margin;
2321
background-position: center calc(100% - 4px);
2323
&:hover { background-position: center calc(100% - 2px); }
2325
&:active { background-position: center calc(100% - 0px); }
2327
}
2328
@if $marks_infix == 'marks-after' {
2330
margin-bottom: $marks_slider_margin;
2331
background-position: center calc(4px);
2333
&:hover { background-position: center calc(2px); }
2335
&:active { background-position: center calc(0px); }
2337
}
2338
}
2339
@if $dir_class == 'vertical' {
2341
min-height: $slider_size;
2342
min-width: $marks_slider_size;
2343
@if $marks_infix == 'marks-before' {
2345
margin-left: $marks_slider_margin;
2346
background-position: calc(4px) center;
2348
&:hover { background-position: calc(2px) center; }
2350
&:active { background-position: calc(0px) center; }
2352
}
2353
@if $marks_infix == 'marks-after' {
2355
margin-right: $marks_slider_margin;
2356
background-position: calc(100% - 4px) center;
2358
&:hover { background-position: calc(100% - 2px) center; }
2360
&:active { background-position: calc(100% - 0px) center; }
2362
}
2363
}
2364
}
2365
&.fine-tune slider {
2367
@if $dir_class == 'horizontal' {
2368
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2369
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2371
}
2372
@if $dir_class == 'vertical' {
2374
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2375
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2377
}
2378
}
2379
}
2380
}
2381
}
2382
&.color {
2384
min-height: 0;
2385
min-width: 0;
2386
&.horizontal {
2388
padding: 0 0 12px 0;
2389
slider {
2391
&:dir(ltr), &:dir(rtl) { // specificity bump
2392
margin-bottom: $color_slider_margin;
2393
margin-top: $color_marks_slider_margin;
2394
}
2395
}
2396
}
2397
&.vertical {
2399
&:dir(ltr) {
2400
padding: 0 0 0 12px;
2401
slider {
2403
margin-left: $color_slider_margin;
2404
margin-right: $color_marks_slider_margin;
2405
}
2406
}
2407
&:dir(rtl) {
2409
padding: 0 12px 0 0;
2410
slider {
2412
margin-right: $color_slider_margin;
2413
margin-left: $color_marks_slider_margin;
2414
}
2415
}
2416
}
2417
}
2418
}
2419
/*****************
2422
* Progress bars *
2423
*****************/
2424
progressbar {
2425
// sizing
2426
&.horizontal {
2427
trough,
2428
progress { min-height: $bar_size; }
2429
}
2430
&.vertical {
2432
trough,
2433
progress { min-width: $bar_size; }
2434
}
2435
// FIXME: insensitive state missing and some other state should be set probably
2437
color: $tertiary_fg_color;
2438
font-size: smaller;
2439
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2441
progress { background-color: $primary_color; }
2443
&.osd { // progressbar.osd used for epiphany page loading progress
2445
// min-width: $bar_size;
2446
// min-height: $bar_size;
2447
// background-color: transparent;
2448
// trough { background-color: transparent; }
2450
// progress { background-color: $primary_color; }
2452
}
2453
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2455
}
2456
/*************
2459
* Level Bar *
2460
*************/
2461
levelbar {
2462
block {
2463
min-width: $medium_size;
2464
min-height: $bar_size;
2465
}
2466
&.vertical block {
2468
min-width: $bar_size;
2469
min-height: $medium_size;
2470
}
2471
trough {
2473
padding: 2px;
2474
border-radius: 2px;
2475
@include entry(normal);
2477
&:disabled { @include entry(disabled); }
2479
}
2480
&.horizontal.discrete {
2482
block { margin: 0 1px; }
2483
trough { padding: 2px 1px; }
2485
}
2486
&.vertical.discrete {
2488
block { margin: 1px 0; }
2489
trough { padding: 1px 2px; }
2491
}
2492
block {
2494
&.low { background-color: $warning_color; }
2495
&.high,
2497
&:not(.empty) { background-color: $primary_color; }
2498
&.full { background-color: $success_color; }
2500
&.empty {
2502
background-color: $fill_color;
2503
color: $disabled_fg_color;
2504
}
2505
}
2506
}
2507
/****************
2510
* Print dialog *
2511
*****************/
2512
printdialog {
2513
paper {
2514
padding: 0;
2515
border: 1px solid $border_color;
2516
background-color: $base_color;
2517
color: $fg_color;
2518
}
2519
.dialog-action-box { margin: 12px; }
2521
}
2522
/**********
2525
* Frames *
2526
**********/
2527
frame > border,
2528
.frame {
2529
margin: 0;
2530
padding: 0;
2531
border: 1px solid $border_color;
2532
border-radius: 0;
2533
box-shadow: none;
2534
&.flat { border-style: none; }
2536
}
2537
frame.flat > border { @extend .frame.flat; } // for backporting
2539
actionbar > revealer > box {
2541
padding: $container_padding;
2542
border-top: 1px solid $border_color;
2543
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2545
}
2546
scrolledwindow {
2548
viewport.frame { // avoid double borders when viewport inside scrolled window
2549
border-style: none;
2550
}
2551
// This is used when content is touch-dragged past boundaries.
2553
// draws a box on top of the content, the size changes programmatically.
2554
@at-root overshoot {
2555
&.top { @include overshoot(top); }
2556
&.bottom { @include overshoot(bottom); }
2558
&.left { @include overshoot(left); }
2560
&.right { @include overshoot(right); }
2562
}
2563
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2565
@at-root undershoot {
2566
&.top { @include undershoot(top); }
2567
&.bottom { @include undershoot(bottom); }
2569
&.left { @include undershoot(left); }
2571
&.right { @include undershoot(right); }
2573
}
2574
@at-root junction { // the small square between two scrollbars
2576
border-style: solid none none solid;
2577
border-width: 1px;
2578
border-color: $border_color;
2579
background-color: $base_color;
2580
&:dir(rtl) { border-style: solid solid none none; }
2582
}
2583
}
2584
// vbox and hbox separators
2586
separator {
2587
min-width: 1px;
2588
min-height: 1px;
2589
background-color: $border_color;
2590
}
2591
%hide_separators {
2593
min-width: 0;
2594
min-height: 0;
2595
background-color: transparent;
2596
}
2597
/*********
2600
* Lists *
2601
*********/
2602
list {
2603
border-color: $border_color;
2604
background-color: $base_color;
2605
row { padding: 2px; }
2607
}
2608
// FIXME
2610
$row_transition: $longer_transition, background-color 0, color 0;
2611
row {
2613
&.activatable {
2614
transition: $row_transition,
2615
background-size $ripple_duration $deceleration_curve,
2616
background-image $ripple_duration * 2 $deceleration_curve;
2617
box-shadow: inset 0 0 0 9999px transparent;
2618
background-image: radial-gradient(circle farthest-corner at center,
2619
transparent 10%,
2620
transparent 0%);
2621
background-repeat: no-repeat;
2622
background-position: center;
2623
background-size: 1000% 1000%;
2624
&:hover {
2626
transition: $row_transition,
2627
box-shadow 0,
2628
background-size $ripple_duration $deceleration_curve,
2629
background-image $ripple_duration * 2 $deceleration_curve;
2630
box-shadow: inset 0 0 0 9999px $row_fill_color;
2631
}
2632
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2634
&:active {
2635
transition: $row_transition,
2636
background-size 0,
2637
background-image 0;
2638
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2639
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2640
background-image: radial-gradient(circle farthest-corner at center,
2641
$semi_fill_color 10%,
2642
transparent 0%);
2643
background-size: 0% 0%;
2644
}
2645
}
2646
&:selected { @extend %selected_items; }
2648
}
2649
/*********************
2652
* App Notifications *
2653
*********************/
2654
.app-notification {
2655
@extend %osd;
2656
@extend toolbar.osd;
2658
margin: 8px;
2660
button { @extend %button_basic.flat; }
2662
&.frame,
2664
border { border-style: none; }
2665
}
2666
/*************
2669
* Expanders *
2670
*************/
2671
expander {
2672
arrow {
2673
transition: all $shorter_duration $standard_curve;
2674
min-width: 16px;
2675
min-height: 16px;
2676
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2677
-gtk-icon-transform: rotate(-90deg);
2678
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2680
&:checked { -gtk-icon-transform: unset; }
2682
color: $secondary_fg_color;
2684
&:hover, &:active { color: $fg_color; }
2686
&:disabled { color: $disabled_secondary_fg_color; }
2688
&:selected {
2690
color: $secondary_inverse_fg_color;
2691
&:hover, &:active { color: $inverse_fg_color; }
2693
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2695
}
2696
}
2697
}
2698
/************
2701
* Calendar *
2702
************/
2703
calendar {
2704
padding: 1px;
2705
border: 1px solid $border_color;
2706
color: $fg_color;
2707
&:disabled { color: $disabled_fg_color; }
2709
&:selected {
2711
@extend %selected_items;
2712
border-radius: 2px + 1px;
2714
}
2715
&.header {
2717
border-style: none none solid;
2718
border-radius: 0;
2719
}
2720
&.button { @extend %simple_flat_button; }
2722
&.highlight {
2724
color: gtkalpha(currentColor, $tertiary_opacity);
2725
font-weight: 500;
2726
}
2727
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2729
}
2730
/***********
2733
* Dialogs *
2734
***********/
2735
messagedialog { // Message Dialog styling
2736
&.background { background-color: $lighter_bg_color; }
2737
.titlebar {
2739
min-height: $small_size;
2740
border-style: none;
2741
box-shadow: inset 0 1px $highlight_color;
2742
background-color: $lighter_bg_color;
2743
color: $fg_color;
2744
&:backdrop { color: $secondary_fg_color; }
2746
}
2747
&.csd { // rounded bottom border styling for csd version
2749
&.background {
2750
// bigger radius for better antialiasing
2751
border-bottom-left-radius: 2px;
2752
border-bottom-right-radius: 2px;
2753
}
2754
.dialog-action-area button {
2756
padding: 8px 16px;
2757
border-top: 1px solid $border_color;
2758
border-radius: 0;
2759
@extend %simple_flat_button;
2761
&:first-child { border-bottom-left-radius: 2px; }
2763
&:last-child { border-bottom-right-radius: 2px; }
2765
}
2766
}
2767
entry { @extend %entry.flat; }
2769
}
2770
filechooser {
2772
.dialog-action-box { border-top: 1px solid $border_color; }
2773
#pathbarbox {
2775
border-bottom: 1px solid $border_color;
2776
background-color: $bg_color;
2777
}
2778
}
2779
filechooserbutton:drop(active) {
2781
box-shadow: none;
2782
}
2783
/***********
2786
* Sidebar *
2787
***********/
2788
.sidebar {
2789
border-style: none;
2790
background-color: $lighter_bg_color;
2791
@at-root %sidebar_left,
2793
&:dir(ltr),
2794
&.left,
2795
&.left:dir(rtl) {
2796
border-right: 1px solid $border_color;
2797
border-left-style: none;
2798
}
2799
@at-root %sidebar_right,
2801
&:dir(rtl),
2802
&.right {
2803
border-left: 1px solid $border_color;
2804
border-right-style: none;
2805
}
2806
list { background-color: transparent; }
2808
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2810
}
2811
stacksidebar {
2813
&.sidebar {
2814
&:dir(ltr),
2815
&.left,
2816
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2817
&:dir(rtl),
2819
&.right { list { @extend %sidebar_right; }}
2820
}
2821
row {
2823
padding: 10px 4px;
2824
> label {
2826
padding-left: 6px;
2827
padding-right: 6px;
2828
}
2829
&.needs-attention > label { @extend %needs_attention; }
2831
}
2832
}
2833
/****************
2836
* File chooser *
2837
****************/
2838
placessidebar {
2839
> viewport.frame { border-style: none; }
2840
list { padding: (4px - 3px) 0 4px; }
2842
row {
2844
// Needs overriding of the GtkListBoxRow padding
2845
min-height: 32px;
2846
margin: -1px 0; // Remove unknown margins
2847
padding: 0;
2848
// Using margins/padding directly in the SidebarRow
2850
// will make the animation of the new bookmark row jump
2851
> revealer { padding: 0 12px; }
2852
&:selected { color: $inverse_fg_color; }
2854
&:disabled { color: $disabled_fg_color; }
2856
image.sidebar-icon {
2858
opacity: $tertiary_opacity; // dim the device icons
2859
&:dir(ltr) { padding-right: 8px; }
2861
&:dir(rtl) { padding-left: 8px; }
2862
}
2863
label.sidebar-label {
2865
&:dir(ltr) { padding-right: 2px; }
2866
&:dir(rtl) { padding-left: 2px; }
2867
}
2868
@at-root button.sidebar-button {
2870
@extend %simple_flat_button;
2871
@extend %small_button;
2873
row:selected & {
2875
}
2876
}
2877
&.sidebar-placeholder-row {
2879
min-height: 2px;
2880
padding: 0 8px;
2881
background-image: image($accent_color);
2882
background-clip: content-box;
2883
}
2884
&.sidebar-new-bookmark-row { color: $accent_color; }
2886
&:drop(active):not(:disabled) {
2888
box-shadow: inset 0 0 0 2px $accent_color;
2889
&:selected {
2891
// background-color: $accent_color;
2892
// color: $inverse_fg_color;
2893
}
2894
}
2895
}
2896
}
2897
placesview {
2899
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2900
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2902
// this selects the "connect to server" label
2904
> actionbar > revealer > box > label {
2905
padding-left: 8px;
2906
padding-right: 8px;
2907
}
2908
}
2909
/*********
2912
* Paned *
2913
*********/
2914
paned {
2915
> separator {
2916
min-width: 1px;
2917
min-height: 1px;
2918
-gtk-icon-source: none; // defeats the ugly default handle decoration
2919
border-style: none; // just to be sure
2920
background-color: transparent;
2921
// workaround, using background istead of a border since the border will get rendered twice (?)
2922
background-image: image($border_color);
2923
background-size: 1px 1px;
2924
background-clip: content-box; // avoids borders image being rendered twice (?)
2925
&.wide {
2927
min-width: 6px;
2928
min-height: 6px;
2929
background-color: $bg_color;
2930
background-image: image($border_color), image($border_color);
2931
background-size: 1px 1px, 1px 1px;
2932
}
2933
}
2934
&.horizontal > separator {
2936
background-repeat: repeat-y;
2937
&:dir(ltr) {
2939
margin: 0 -8px 0 0;
2940
padding: 0 8px 0 0;
2941
background-position: left;
2942
}
2943
&:dir(rtl) {
2945
margin: 0 0 0 -8px;
2946
padding: 0 0 0 8px;
2947
background-position: right;
2948
}
2949
&.wide {
2951
margin: 0;
2952
padding: 0;
2953
background-repeat: repeat-y, repeat-y;
2954
background-position: left, right;
2955
}
2956
}
2957
&.vertical > separator {
2959
margin: 0 0 -8px 0;
2960
padding: 0 0 8px 0;
2961
background-repeat: repeat-x;
2962
background-position: top;
2963
&.wide {
2965
margin: 0;
2966
padding: 0;
2967
background-repeat: repeat-x, repeat-x;
2968
background-position: bottom, top;
2969
}
2970
}
2971
}
2972
/**************
2975
* GtkInfoBar *
2976
**************/
2977
infobar {
2978
border-style: none;
2979
&.info { background-color: $info_bg_color; }
2981
&.question { background-color: $question_bg_color; }
2983
&.warning { background-color: $warning_bg_color; }
2985
&.error { background-color: $error_bg_color; }
2987
&.info,
2989
&.question,
2990
&.warning,
2991
&.error {
2992
> label, & { color: $inverse_fg_color; }
2993
button { @extend %button_selected; }
2995
selection {}
2997
*:link { @extend %link_selected; }
2999
}
3000
}
3001
/************
3004
* Tooltips *
3005
************/
3006
tooltip {
3007
&.background {
3008
// background-color needs to be set this way otherwise it gets drawn twice
3009
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3010
box-shadow: inset 0 1px $highlight_color;
3011
background-color: scale-alpha($base_color, $higher_opacity);
3012
}
3013
// @extend %osd;
3015
// padding: 4px; /* not working */
3017
border-radius: 2px;
3018
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3019
&:not(.csd):not(.unity-csd) {
3021
border: 1px solid $border_color;
3022
border-radius: 2px + 1px;
3023
background-clip: $extra_background_clip;
3024
}
3025
// FIXME: we need a border or tooltips vanish on black background.
3027
decoration { background-color: transparent; }
3028
label {
3030
// tooltip label already seems to have 6px margins
3031
min-height: 32px - 6px * 2;
3032
padding: 0 8px - 6px;
3033
}
3034
* {
3036
// workaround for Eclipse.
3037
// do not include any declaration here.
3038
// padding: 0;
3039
// background-color: transparent;
3040
// color: inherit;
3041
}
3042
}
3043
/*****************
3046
* Color Chooser *
3047
*****************/
3048
colorswatch {
3049
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3050
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3051
// applied to the overlay box.
3052
// base color corners rounding
3054
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3055
// sports a bigger radius.
3056
// nth-child is needed by the custom color strip.
3057
&.top {
3059
border-top-left-radius: $material_radius + 0.5px;
3060
border-top-right-radius: $material_radius + 0.5px;
3061
overlay {
3063
border-top-left-radius: $material_radius;
3064
border-top-right-radius: $material_radius;
3065
}
3066
}
3067
&.bottom {
3069
border-bottom-left-radius: $material_radius + 0.5px;
3070
border-bottom-right-radius: $material_radius + 0.5px;
3071
overlay {
3073
border-bottom-left-radius: $material_radius;
3074
border-bottom-right-radius: $material_radius;
3075
}
3076
}
3077
&.left,
3079
&:first-child:not(.top) {
3080
border-top-left-radius: $material_radius + 0.5px;
3081
border-bottom-left-radius: $material_radius + 0.5px;
3082
overlay {
3084
border-top-left-radius: $material_radius;
3085
border-bottom-left-radius: $material_radius;
3086
}
3087
}
3088
&.right,
3090
&:last-child:not(.bottom) {
3091
border-top-right-radius: $material_radius + 0.5px;
3092
border-bottom-right-radius: $material_radius + 0.5px;
3093
overlay {
3095
border-top-right-radius: $material_radius;
3096
border-bottom-right-radius: $material_radius;
3097
}
3098
}
3099
&.dark overlay { color: $light_fg_color; }
3101
&.light overlay { color: $dark_fg_color; }
3103
&.dark { color: $light_fg_color; } // for focus ring
3105
&.light { color: $dark_fg_color; } // for focus ring
3107
&:drop(active) {
3109
box-shadow: none;
3110
&.light overlay {
3112
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3113
}
3114
&.dark overlay {
3116
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3117
}
3118
}
3119
overlay {
3121
transition: $shadow_transition;
3122
box-shadow: $shadow_1;
3123
&:hover { box-shadow: $shadow_2; }
3125
}
3126
&#add-color-button {
3128
border-radius: $material_radius $material_radius 0 0;
3129
color: $light_fg_color; // for focus ring
3130
&:only-child { border-radius: $material_radius; }
3132
overlay {
3134
background-image: linear-gradient(to right,
3135
$error_bg_color 25%,
3136
$warning_bg_color 25%, $warning_bg_color 50%,
3137
$info_bg_color 50%, $info_bg_color 75%,
3138
$question_bg_color 75%);
3139
color: $light_fg_color;
3140
}
3141
}
3142
&:disabled {
3144
opacity: $disabled_opacity;
3145
overlay { box-shadow: none; }
3147
}
3148
row:selected & {
3150
}
3151
&#editor-color-sample {
3153
border-radius: $material_radius + 0.5px;
3154
overlay { border-radius: $material_radius; }
3156
// overlay:hover { box-shadow: $shadow_1; }
3158
}
3159
}
3160
// colorscale popup
3162
colorchooser .popover.osd {
3163
transition: $shadow_transition;
3164
border-radius: 2px;
3165
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3166
background-color: $base_color;
3167
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3169
spinbutton:not(.vertical) { @extend %entry.flat; }
3171
}
3172
/********
3175
* Misc *
3176
********/
3177
// content view (grid/list)
3178
.content-view {
3179
background-color: $bg_color;
3180
// &:hover { -gtk-icon-effect: highlight; }
3182
rubberband, .rubberband { @extend rubberband; }
3184
}
3185
.scale-popup {
3187
.osd & { @extend %osd; }
3188
.osd & button.flat { // FIXME: quick hack, redo properly
3190
}
3191
button { // +/- buttons on GtkVolumeButton popup
3193
}
3194
}
3195
/**********************
3198
* Window Decorations *
3199
**********************/
3200
decoration {
3201
transition: $shadow_transition;
3202
border-radius: 2px 2px 0 0;
3203
box-shadow: $shadow_4, 0 16px 16px transparent;
3204
// FIXME rationalize shadows
3206
// this is used for the resize cursor area
3208
margin: 8px;
3209
&:backdrop {
3211
// the transparent shadow here is to enforce that the shadow extents don't
3212
// change when we go to backdrop, to prevent jumping windows.
3213
// The biggest shadow should be in the same order then in the active state
3214
// or the jumping will happen during the transition.
3215
box-shadow: $shadow_2, 0 16px 16px transparent;
3216
}
3217
.maximized &,
3219
.fullscreen &,
3220
.tiled & { border-radius: 0; }
3221
.popup & { box-shadow: none; }
3223
// server-side decorations as used by mutter
3225
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3226
.csd.popup & {
3228
border-radius: 2px;
3229
box-shadow: $shadow_2;
3230
}
3231
tooltip.csd & {
3233
border-radius: 2px;
3234
box-shadow: $shadow_2;
3235
}
3236
messagedialog.csd & {
3238
border-radius: 2px;
3239
// box-shadow: $shadow_4, 0 16px 16px transparent;
3240
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3242
}
3243
.solid-csd & {
3245
margin: 0;
3246
// padding: 4px;
3247
border-radius: 0;
3248
box-shadow: none;
3249
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3250
background-color: $titlebar_bg_color;
3251
}
3252
}
3253
// Window Close button
3255
button.titlebutton {
3256
// @extend %simple_flat_button;
3257
@extend %circular_button;
3259
.selection-mode & {
3261
}
3262
}
3263
// catch all extend :)
3266
%selected_items {
3268
background-color: $primary_color;
3269
@at-root %nobg_selected_items, & {
3271
color: $inverse_fg_color;
3272
&:disabled { color: $disabled_inverse_fg_color; }
3274
}
3275
}
3276
.monospace { font-family: monospace; }
3278
/**********************
3281
* Touch Copy & Paste *
3282
**********************/
3283
// touch selection handlebars for the Popover.osd above
3284
cursor-handle {
3285
border-radius: $circular_radius;
3286
background-color: $accent_color;
3287
background-image: none;
3288
&.top:dir(ltr), &.bottom:dir(rtl) {
3290
padding-left: 6px;
3291
border-top-right-radius: 0;
3292
}
3293
&.bottom:dir(ltr), &.top:dir(rtl) {
3295
padding-right: 6px;
3296
border-top-left-radius: 0;
3297
}
3298
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3300
-GtkWidget-text-handle-width: 24;
3301
-GtkWidget-text-handle-height: 30;
3302
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3304
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3305
url('#{$_url}@2.png'));
3306
}
3307
}
3308
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3310
// shortcut window keys
3312
.keycap {
3313
min-width: 28px - 8px * 2;
3314
min-height: 28px - 2px;
3315
margin-top: 2px;
3316
padding-bottom: 2px;
3317
padding-left: 8px;
3318
padding-right: 8px;
3319
border: solid 1px $border_color;
3321
border-radius: 2px + 1px;
3322
box-shadow: inset 0 -2px $border_color;
3323
background-color: $base_color;
3324
color: $fg_color;
3325
font-size: smaller;
3326
}
3327
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3329
transition: $longer_transition;
3330
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3331
caret-color: $accent_color;
3332
}
3333
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3335
stackswitcher button.circular,
3337
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3338
min-width: $medium_size;
3339
min-height: $medium_size;
3340
padding: 0;
3341
}
3342