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
@at-root %circular_button,
568
&.close,
569
&.circular { // The Bloody Circul Button
570
border-radius: $circular_radius;
571
-gtk-outline-radius: $circular_radius;
572
// label { padding: 0; }
574
}
575
@at-root %small_button {
577
min-height: $small_size;
578
min-width: $small_size;
579
padding: 0;
580
border-radius: $circular_radius;
581
-gtk-outline-radius: $circular_radius;
582
}
583
}
584
%needs_attention {
586
animation: needs_attention $longer_duration $deceleration_curve forwards;
587
background-repeat: no-repeat;
588
background-position: right 3px;
589
background-size: 6px 6px;
590
&:dir(rtl) { background-position: left 3px; }
592
}
593
// all the following is for the +|- buttons on inline toolbars, that way
595
// should really be deprecated...
596
.inline-toolbar toolbutton > button { // redefining the button look is
597
// needed since those are flat...
598
}
599
// More inline toolbar buttons
601
toolbar.inline-toolbar toolbutton {
602
// > button.flat { @extend %linked_middle; }
603
// &:first-child > button.flat { @extend %linked:first-child; }
605
// &:last-child > button.flat { @extend %linked:last-child; }
607
// &:only-child > button.flat { @extend %linked:only-child; }
609
}
610
%linked_middle {
612
border-radius: 0;
613
-gtk-outline-radius: 2px;
614
}
615
%linked {
617
@extend %linked_middle;
618
&:first-child {
620
border-top-left-radius: 2px;
621
border-bottom-left-radius: 2px;
622
}
623
&:last-child {
625
border-top-right-radius: 2px;
626
border-bottom-right-radius: 2px;
627
}
628
&:only-child {
630
border-radius: 2px;
631
}
632
}
633
%linked_vertical_middle {
635
border-radius: 0;
636
-gtk-outline-radius: 2px;
637
}
638
%linked_vertical{
640
@extend %linked_vertical_middle;
641
&:first-child {
643
border-top-left-radius: 2px;
644
border-top-right-radius: 2px;
645
}
646
&:last-child {
648
border-bottom-left-radius: 2px;
649
border-bottom-right-radius: 2px;
650
}
651
&:only-child {
653
border-radius: 2px;
654
}
655
}
656
/* menu buttons */
658
modelbutton.flat,
659
.menuitem.button.flat {
660
min-height: $menuitem_size;
661
padding: 0 8px;
662
border-radius: 2px;
663
color: inherit;
664
@extend %simple_flat_button;
666
&:selected { @extend %selected_items; }
668
check,
670
radio {
671
box-shadow: none;
672
background-image: none;
673
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
675
&:last-child { margin-left: -8px; margin-right: -16px; }
677
&:first-child { margin-left: -16px; margin-right: -8px; }
679
}
680
check:not(:indeterminate):checked { @extend %check_checked; }
682
// radio:not(:indeterminate):checked { @extend %radio_checked; }
684
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
686
}
687
modelbutton.flat arrow {
689
background: none;
690
&:hover { background: none; }
692
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
694
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
696
}
697
button.color {
699
min-height: $small_size;
700
min-width: $small_size;
701
padding: $container_padding;
702
colorswatch:only-child {
704
// &, overlay { border-radius: 0; }
705
}
706
}
707
/*********
710
* Links *
711
*********/
712
*:link {
713
&, &:hover, &:active { color: $link_color; }
714
&:visited {
716
&, &:hover, &:active { color: $visited_link_color; }
717
}
718
@at-root %link_selected,
720
&:selected,
721
*:selected & { color: $inverse_fg_color; }
722
}
723
button:link,
725
button:visited {
726
@extend *:link;
727
> label { text-decoration-line: underline; }
729
}
730
/*****************
732
* GtkSpinButton *
733
*****************/
734
spinbutton {
735
&:not(.vertical) {
736
// in this horizontal configuration, the whole spinbutton
737
// behaves as the entry, so we extend the entry styling
738
// and nuke the style on the internal entry
739
@extend %entry;
740
padding: 0;
742
%spinbutton_entry,
744
entry {
745
min-width: $large_size - 8px * 2;
746
// reset all the other props since the spinbutton node is styled here
747
margin: 0;
748
border-image: none;
749
border-radius: 0;
750
box-shadow: none;
751
background-color: transparent;
752
//
753
// This will help to simplify spinbutton's code, but unfortunatelly
754
// doesn't work properly in :dir(rtl). It needs z-index property.
755
//
756
// min-width: $large_size - 8px;
757
//
758
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
759
//
760
// &:dir(ltr) {
761
// margin-right: -$spinbuttons_width;
762
// padding-right: $spinbuttons_width;
763
// }
764
//
765
// &:dir(rtl) {
766
// margin-left: -$spinbuttons_width;
767
// padding-left: $spinbuttons_width;
768
// }
769
}
770
button {
772
// margin: $container_padding;
773
border: solid $container_padding transparent;
774
@extend %simple_flat_button;
776
@extend %small_button;
778
&.up:dir(ltr),
780
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
781
&.up:dir(rtl),
783
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
784
}
785
}
786
// OSD horizontal
788
.osd &:not(.vertical) {
789
button {
790
}
791
}
792
// Vertical
794
&.vertical {
795
// in the vertical configuration, we treat the spinbutton
796
// as a box, and tweak the style of the entry in the middle
797
// so that it's linked
798
// FIXME: this should not be set at all, but otherwise it gets the wrong
800
// color
801
&:disabled { color: $disabled_fg_color; }
802
&:drop(active) {
804
box-shadow: none;
805
}
806
entry {
808
min-height: $medium_size;
809
min-width: $large_size;
810
padding: 0;
811
}
812
button {
814
min-height: $medium_size;
815
min-width: $large_size;
816
padding: 0;
817
@extend %simple_flat_button;
819
&.up { border-radius: 2px 2px 0 0; }
821
&.down { border-radius: 0 0 2px 2px; }
823
}
824
}
825
// OSD vertical
827
.osd &.vertical button:first-child {
828
}
829
// Misc
831
treeview &:not(.vertical) {
832
min-height: 0;
833
border-style: none;
834
border-radius: 0;
835
entry {
837
min-height: 0;
838
padding: 1px 2px;
839
}
840
}
841
}
842
/**************
845
* ComboBoxes *
846
**************/
847
combobox {
848
arrow {
849
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
850
min-height: 16px;
851
min-width: 16px;
852
}
853
button.combo:checked { transition: none; } // workaround for menuitem selection
855
button.combo cellview {
857
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
858
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
859
}
860
#gtk-combobox-popup-menu {
862
padding: 2px 0;
863
menuitem {
865
min-height: $medium_size - 2px * 2;
866
padding: 0 8px;
867
}
868
}
869
&.linked {
871
button:nth-child(2) {
872
&:dir(ltr) { @extend %linked:last-child; }
873
&:dir(rtl) { @extend %linked:first-child; }
874
}
875
}
876
&:drop(active) { // FIXME: untested
878
box-shadow: none;
879
// button.combo { @extend %button_basic:drop(active); }
881
}
882
}
883
.linked > combobox > box > button.combo {
885
// the combo is a composite widget so the way we do button linking doesn't
886
// work, special case needed. See
887
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
888
&:dir(ltr),
890
&:dir(rtl) { @extend %linked_middle; } // specificity bump
891
}
892
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
894
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
895
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
896
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
898
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
899
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
900
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
901
%combo_flat {
903
border-radius: 0;
904
background-image: none;
905
font-weight: inherit;
906
@include entry(flat-normal);
908
&:hover { box-shadow: inset 0 -2px $fill_color; }
910
&:checked {
912
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
913
$primary_color 100%,
914
transparent 0%)
915
0 0 2 / 0 0 2px;
916
}
917
&:disabled { color: $disabled_fg_color; }
919
}
920
/************
923
* Toolbars *
924
************/
925
toolbar {
926
-GtkWidget-window-dragging: true;
927
padding: $container_padding / 2;
928
background-color: $bg_color;
929
button { @extend %button_basic.flat; }
931
// on OSD
933
.osd & { background-color: transparent; }
934
// stand-alone OSD toolbars
936
&.osd {
937
transition: $shadow_transition;
938
padding: $container_padding;
939
border-radius: 2px;
940
box-shadow: $shadow_2, inset 0 1px $highlight_color;
941
background-color: $base_color;
942
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
944
&.left,
946
&.right,
947
&.top,
948
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
949
}
950
// toolbar separators
952
&.horizontal separator { margin: $container_padding / 2; }
953
&.vertical separator { margin: $container_padding / 2; }
954
&:not(.inline-toolbar):not(.osd) {
956
scale,
957
entry,
958
spinbutton,
959
button { margin: $container_padding / 2; }
960
.linked entry,
962
.linked spinbutton,
963
.linked button {
964
&:not(:first-child) { margin-left: 0; }
965
&:not(:last-child) { margin-right: 0; }
966
}
967
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
969
}
970
}
971
//searchbar, location-bar & inline-toolbar
973
.inline-toolbar {
974
padding: $container_padding;
975
border-style: solid;
976
border-width: 0 1px 1px;
977
border-color: $border_color;
978
background-color: $alt_base_color;
979
}
980
searchbar,
982
.location-bar {
983
padding: $container_padding;
984
border-style: solid;
985
border-width: 0 0 1px;
986
border-color: $border_color;
987
background-color: $bg_color;
988
background-clip: border-box;
989
}
990
/***************
993
* Header bars *
994
***************/
995
%titlebar,
996
headerbar {
997
transition: background-color $shorter_duration $deceleration_curve;
998
min-height: $large_size;
999
padding: 0 $container_padding;
1000
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1001
background-color: $titlebar_bg_color;
1002
color: $titlebar_fg_color;
1003
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
1005
&:backdrop {
1007
color: $secondary_titlebar_fg_color;
1008
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
1010
}
1011
.title {
1013
transition: $longer_transition;
1014
padding: 0 12px;
1015
font-weight: bold;
1016
}
1017
.subtitle {
1019
transition: $longer_transition;
1020
padding: 0 12px;
1021
font-size: smaller;
1022
@extend .dim-label;
1024
}
1025
button:not(.suggested-action):not(.destructive-action) {
1027
@extend %button_basic.flat;
1028
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1030
$titlebar_indicator_color 0%,
1031
transparent 0%)
1032
0 0 0 / 0 0 0px;
1033
&:checked {
1035
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1036
$titlebar_indicator_color 100%,
1037
transparent 0%)
1038
0 0 2 / 0 0 2px;
1039
&, &:disabled { background-color: transparent; }
1041
}
1042
}
1043
button.suggested-action, button.destructive-action {
1045
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1046
}
1047
&.selection-mode {
1049
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1050
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1051
transition: background-color 0.00001s $longer_duration;
1052
animation: header_ripple_effect $longer_duration $deceleration_curve;
1053
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1054
background-color: $primary_color;
1055
color: $inverse_fg_color;
1056
&:backdrop {
1058
color: $secondary_inverse_fg_color;
1059
}
1060
.subtitle:link { @extend *:link:selected; }
1062
button:not(.suggested-action):not(.destructive-action) {
1064
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1065
currentColor 0%,
1066
transparent 0%)
1067
0 0 0 / 0 0 0px;
1068
color: currentColor;
1069
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1071
&:checked {
1073
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1074
currentColor 100%,
1075
transparent 0%)
1076
0 0 2 / 0 0 2px;
1077
color: currentColor;
1078
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1080
}
1081
}
1082
.selection-menu {
1084
padding-left: 16px;
1085
padding-right: 16px;
1086
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1088
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1090
}
1091
}
1092
.fullscreen &,
1094
.tiled &,
1095
.maximized & {
1096
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1097
box-shadow: $shadow_1;
1098
}
1099
&.default-decoration {
1101
min-height: $small_size;
1102
padding: $container_padding;
1103
box-shadow: inset 0 1px $titlebar_highlight_color;
1104
.fullscreen &,
1106
.tiled &,
1107
.maximized & { box-shadow: none; }
1108
button.titlebutton {
1110
min-height: $small_size;
1111
min-width: $small_size;
1112
margin: 0;
1113
padding: 0;
1114
}
1115
// workaround for non-animatable buttons
1117
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1118
}
1119
.solid-csd & {
1121
&:dir(rtl), &:dir(ltr) { // specificity bump
1122
margin-left: -2px;
1123
margin-right: -2px;
1124
margin-top: -2px;
1125
// border-radius: 0;
1126
box-shadow: inset 0 1px $titlebar_highlight_color;
1127
}
1128
}
1129
}
1130
headerbar {
1132
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1133
entry,
1134
spinbutton,
1135
// separator,
1136
button {
1137
margin-top: $container_padding;
1138
margin-bottom: $container_padding;
1139
}
1140
switch {
1142
margin-top: $container_padding * 2;
1143
margin-bottom: $container_padding * 2;
1144
}
1145
}
1146
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1148
border-top-left-radius: 2px;
1149
border-top-right-radius: 2px;
1150
}
1151
headerbar { // headerbar border rounding
1153
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1154
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1155
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1157
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1159
&:first-child, &:last-child {
1160
border-top-left-radius: 2px;
1161
border-top-right-radius: 2px;
1162
}
1163
}
1164
}
1165
.titlebar:not(headerbar) {
1167
window.csd > & {
1168
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1169
padding: 0;
1170
background-color: transparent;
1171
background-image: none;
1172
border-style: none;
1173
box-shadow: none;
1174
}
1175
> separator {
1177
background-color: $titlebar_bg_color;
1178
background-image: image($border_color);
1179
}
1180
@extend %titlebar;
1182
}
1183
/************
1186
* Pathbars *
1187
************/
1188
%pathbar_button,
1189
.path-bar button {
1190
padding-left: ($medium_size - 24px) / 2;
1191
padding-right: ($medium_size - 24px) / 2;
1192
label:not(:only-child) {
1194
&:first-child { margin-left: 4px; }
1195
&:last-child { margin-right: 4px; }
1197
}
1198
&.slider-button {
1200
padding-left: (24px - 16px) / 2;
1201
padding-right: (24px - 16px) / 2;
1202
}
1203
:not(headerbar) & {
1205
@extend %flat_button;
1206
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1208
$primary_color 0%,
1209
transparent 0%)
1210
0 0 0 / 0 0 0px;
1211
border-radius: 2px;
1212
&:checked {
1214
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1215
$primary_color 100%,
1216
transparent 0%)
1217
0 0 2 / 0 0 2px;
1218
&, &:disabled { background-color: transparent; }
1220
}
1221
}
1222
}
1223
/**************
1226
* Tree Views *
1227
**************/
1228
treeview.view {
1229
@at-root * {
1230
-GtkTreeView-horizontal-separator: 4;
1231
-GtkTreeView-grid-line-width: 1;
1232
-GtkTreeView-grid-line-pattern: '';
1233
-GtkTreeView-tree-line-width: 1;
1234
-GtkTreeView-tree-line-pattern: '';
1235
-GtkTreeView-expander-size: 16;
1236
}
1237
border-left-color: $fill_color; // this is actually the tree lines color,
1239
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1240
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1242
&:hover, &:active, &:selected { border-radius: 0; }
1244
&.separator {
1246
min-height: 1px + 2px * 2;
1247
color: $border_color;
1248
}
1249
&:drop(active) {
1251
border-style: solid none;
1252
border-width: 1px;
1253
border-color: $accent_color;
1254
&.after { border-top-style: none; }
1256
&.before { border-bottom-style: none; }
1258
}
1259
&.expander {
1261
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1262
-gtk-icon-transform: rotate(-90deg);
1263
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1265
&:checked { -gtk-icon-transform: unset; }
1267
color: $secondary_fg_color;
1269
&:hover, &:active { color: $fg_color; }
1271
&:disabled { color: $disabled_secondary_fg_color; }
1273
&:selected {
1275
color: $secondary_inverse_fg_color;
1276
&:hover, &:active { color: $inverse_fg_color; }
1278
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1280
}
1281
}
1282
&.progressbar { // progress bar in treeviews
1284
border-style: none none solid;
1285
border-width: $bar_size;
1286
border-color: $primary_color;
1287
box-shadow: none;
1288
background-color: transparent;
1289
&:selected { border-color: currentColor; }
1291
}
1292
&.trough { // progress bar trough in treeviews
1294
border-style: none none solid;
1295
border-width: $bar_size;
1296
border-color: scale-alpha($primary_color, $lower_opacity);
1297
box-shadow: none;
1298
background-color: transparent;
1299
&:selected { border-color: $fill_color; }
1301
}
1302
header {
1304
button {
1305
@extend row.activatable;
1306
padding: 2px 6px;
1308
border-style: none solid solid none;
1309
border-width: 1px;
1310
border-color: $border_color;
1311
border-radius: 0;
1312
background-clip: border-box;
1313
&, &:hover, &:active { box-shadow: none; }
1315
&, &:disabled { background-color: $base_color; }
1317
&:last-child { border-right-style: none; }
1319
}
1320
}
1321
button.dnd,
1323
header.button.dnd { // for treeview-like derive widgets
1324
padding: 2px 6px;
1325
border-style: none solid solid;
1326
border-width: 1px;
1327
border-color: $border_color;
1328
border-radius: 0;
1329
box-shadow: none;
1330
background-color: $base_color;
1331
background-clip: border-box;
1332
color: $primary_color;
1333
}
1334
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1336
}
1337
/*********
1340
* Menus *
1341
*********/
1342
menubar,
1343
.menubar {
1344
-GtkWidget-window-dragging: true;
1345
padding: 0;
1346
// box-shadow: inset 0 -1px $border_color;
1347
background-color: $titlebar_bg_color;
1348
> menuitem {
1350
transition: $shorter_transition;
1351
min-height: 20px;
1352
padding: 4px 8px;
1353
color: $secondary_titlebar_fg_color;
1354
&:hover { //Seems like it :hover even with keyboard focus
1356
transition: none;
1357
background-color: $semi_fill_color;
1358
color: $titlebar_fg_color;
1359
}
1360
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1362
}
1363
}
1364
.csd.popup { border-radius: 2px; }
1366
menu,
1368
.menu,
1369
.context-menu {
1370
margin: 4px 0;
1371
padding: 4px 0;
1372
box-shadow: inset 0 1px $highlight_color;
1373
background-color: $base_color;
1374
border: 1px solid $border_color; // adds borders in a non composited env
1375
.csd & {
1377
border: none; // axes borders in a composited env
1378
border-radius: 2px;
1379
}
1380
menuitem {
1382
transition: $shorter_transition;
1383
min-height: 20px;
1384
min-width: 40px;
1385
padding: 4px 8px;
1386
font: initial;
1387
text-shadow: none;
1388
&:hover {
1390
transition: none;
1391
background-color: $semi_fill_color;
1392
}
1393
&:disabled { color: $disabled_fg_color; }
1395
// submenu indicators
1397
arrow {
1398
min-height: 16px;
1399
min-width: 16px;
1400
&:dir(ltr) {
1402
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1403
margin-left: 8px;
1404
}
1405
&:dir(rtl) {
1407
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1408
margin-right: 8px;
1409
}
1410
}
1411
// avoids labels color being overridden, see
1413
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1414
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1415
}
1416
// overflow arrows
1418
> arrow {
1419
min-height: 16px;
1420
min-width: 16px;
1421
padding: 4px;
1422
border-radius: 0;
1423
background-color: $base_color;
1424
color: $secondary_fg_color;
1425
&.top {
1427
margin-top: -4px;
1428
border-bottom: 1px solid $border_color;
1429
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1430
}
1431
&.bottom {
1433
margin-bottom: -4px;
1434
border-top: 1px solid $border_color;
1435
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1436
}
1437
&:hover {
1439
background-image: image($semi_fill_color);
1440
color: $fg_color;
1441
}
1442
&:disabled {
1444
border-color: transparent;
1445
background-color: transparent;
1446
color: transparent;
1447
// color: $disabled_secondary_fg_color;
1448
}
1449
}
1450
separator { margin: 4px 0; }
1452
}
1453
menuitem {
1455
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1456
check,
1458
radio {
1459
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1460
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1461
}
1462
}
1463
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1465
// Electron/Atom render all translucent colors in opaque colors.
1466
// It's a very critical issue for this theme and should be fixed by upstream...
1467
.popup:not(.csd) menu {
1468
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1469
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1470
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1471
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1472
menuitem {
1474
color: $opaque_fg_color;
1475
&:hover { background-color: $opaque_semi_fill_color; }
1477
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1479
}
1480
// TODO: not working this, where/how i can set the accelerators?
1482
accelerator { color: $opaque_tertiary_fg_color; }
1483
}
1484
/************
1487
* Popovers *
1488
************/
1489
popover.background {
1490
transition: $shadow_transition;
1491
padding: 2px;
1492
box-shadow: $shadow_2; // TODO: this should really have a highlight
1493
background-color: $lighter_bg_color;
1494
&:backdrop { box-shadow: $shadow_1; }
1496
&, .csd & {
1498
border-style: solid;
1499
border-width: 1px;
1500
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1501
border-radius: 2px + 1px;
1502
}
1503
> stack { margin: -4px; } // remove extra padding from menu style popovers
1505
> toolbar { margin: -2px; }
1507
> list,
1509
> .view,
1510
> toolbar {
1511
border-style: none;
1512
box-shadow: none;
1513
background-color: transparent;
1514
}
1515
&.touch-selection,
1517
&.magnifier,
1518
&.osd { @extend %osd; }
1519
// entry { @extend %entry.flat; }
1521
// button.combo { @extend %combo_flat; }
1523
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1525
&.menu button,
1527
button.model {
1528
@extend %simple_flat_button;
1529
min-height: 32px;
1531
padding: 0 8px;
1532
border-radius: 2px;
1533
&:checked { @extend %selected_items; }
1535
}
1536
separator { margin: 4px 0; }
1538
list separator { margin: 0; }
1540
}
1541
/*************
1543
* Notebooks *
1544
*************/
1545
notebook {
1546
> header {
1547
border-width: 1px;
1548
border-color: $border_color;
1549
background-color: $bg_color;
1550
background-clip: border-box;
1551
&.top {
1553
border-bottom-style: solid;
1554
> tabs {
1555
margin-bottom: -1px;
1556
> tab {
1557
&:hover { box-shadow: inset 0 -2px $fill_color; }
1559
&:checked { box-shadow: inset 0 -2px $primary_color; }
1561
}
1562
}
1563
}
1564
&.bottom {
1566
border-top-style: solid;
1567
> tabs {
1568
margin-top: -1px;
1569
> tab {
1570
&:hover { box-shadow: inset 0 2px $fill_color; }
1572
&:checked { box-shadow: inset 0 2px $primary_color; }
1574
}
1575
}
1576
}
1577
&.left {
1579
border-right-style: solid;
1580
> tabs {
1581
margin-right: -1px;
1582
> tab {
1583
&:hover { box-shadow: inset -2px 0 $fill_color; }
1585
&:checked { box-shadow: inset -2px 0 $primary_color; }
1587
}
1588
}
1589
}
1590
&.right {
1592
border-left-style: solid;
1593
> tabs {
1594
margin-left: -1px;
1595
> tab {
1596
&:hover { box-shadow: inset 2px 0 $fill_color; }
1598
&:checked { box-shadow: inset 2px 0 $primary_color; }
1600
}
1601
}
1602
}
1603
&.top > tabs > arrow {
1605
@extend %notebook_vert_arrows;
1606
border-top-style: none;
1608
}
1609
&.bottom > tabs > arrow {
1611
@extend %notebook_vert_arrows;
1612
border-bottom-style: none;
1614
}
1615
@at-root %notebook_vert_arrows {
1617
padding-left: 4px;
1618
padding-right: 4px;
1619
&.down {
1621
margin-left: -8px;
1622
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1623
}
1624
&.up {
1626
margin-right: -8px;
1627
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1628
}
1629
}
1630
&.left > tabs > arrow {
1632
@extend %notebook_horz_arrows;
1633
border-left-style: none;
1635
}
1636
&.right > tabs > arrow {
1638
@extend %notebook_horz_arrows;
1639
border-right-style: none;
1641
}
1642
@at-root %notebook_horz_arrows {
1644
padding-top: 4px;
1645
padding-bottom: 4px;
1646
&.down {
1648
margin-top: -8px;
1649
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1650
}
1651
&.up {
1653
margin-bottom: -8px;
1654
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1655
}
1656
}
1657
> tabs > arrow {
1659
@extend %simple_flat_button;
1660
min-height: 16px;
1662
min-width: 16px;
1663
border-radius: 0;
1664
}
1665
tab {
1667
transition: $longer_transition,
1668
background-size 0,
1669
background-image 0;
1670
min-height: $small_size;
1671
min-width: $small_size;
1672
padding: $container_padding 12px;
1673
outline-offset: -6px;
1675
border-width: 1px; // for reorderable tabs
1677
border-color: transparent; //
1678
background-image: radial-gradient(circle farthest-corner at center,
1680
$primary_color 10%,
1681
transparent 0%);
1682
background-repeat: no-repeat;
1683
background-position: center;
1684
background-size: 0% 0%;
1685
color: $secondary_fg_color;
1687
font-weight: 500;
1688
&:hover {
1690
color: $fg_color;
1691
&.reorderable-page {
1693
border-color: $border_color;
1694
background-color: $alt_base_color;
1695
}
1696
}
1697
&:disabled { color: $disabled_secondary_fg_color; }
1699
&:checked {
1701
transition: $longer_transition,
1702
background-size $longer_duration $deceleration_curve,
1703
background-image $longer_duration + $ripple_duration $deceleration_curve;
1704
background-image: radial-gradient(circle farthest-corner at center,
1705
transparent 10%,
1706
transparent 0%);
1707
background-size: 1000% 1000%;
1708
color: $fg_color;
1709
&:disabled { color: $disabled_fg_color; }
1711
&.reorderable-page {
1713
border-color: $border_color;
1714
background-color: $base_color;
1715
}
1716
}
1717
// colors the button like the label, overridden otherwise
1719
button.flat {
1720
@extend %small_button;
1721
&:last-child {
1723
margin-left: $container_padding;
1724
margin-right: $container_padding - 12px;
1725
}
1726
&:first-child {
1728
margin-left: $container_padding - 12px;
1729
margin-right: $container_padding;
1730
}
1731
}
1732
}
1733
&.top,
1735
&.bottom {
1736
tabs {
1737
padding-left: 8px;
1738
padding-right: 8px;
1739
&:not(:only-child) {
1741
&:first-child { margin-left: 0; }
1742
&:last-child { margin-right: 0; }
1743
}
1744
tab {
1746
&.reorderable-page {
1747
margin: 0 -1px;
1748
border-style: none solid;
1749
}
1750
}
1751
}
1752
}
1753
&.left,
1755
&.right {
1756
tabs {
1757
padding-top: 8px;
1758
padding-bottom: 8px;
1759
&:not(:only-child) {
1761
&:first-child { margin-top: 0; }
1762
&:last-child { margin-bottom: 0; }
1763
}
1764
tab {
1766
&.reorderable-page {
1767
margin: -1px 0;
1768
border-style: solid none;
1769
}
1770
}
1771
}
1772
}
1773
}
1774
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1776
background-color: $base_color;
1777
entry:not(.search),
1779
spinbutton:not(.vertical) { @extend %entry.flat; }
1780
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1782
button.combo { @extend %combo_flat; }
1784
}
1785
}
1786
/**************
1789
* Scrollbars *
1790
**************/
1791
scrollbar {
1792
$_slider_min_length: 24px;
1793
// disable steppers
1795
@at-root * {
1796
-GtkScrollbar-has-backward-stepper: false;
1797
-GtkScrollbar-has-forward-stepper: false;
1798
}
1799
transition: $longer_transition;
1801
background-color: $base_color;
1802
background-clip: $extra_background_clip;
1803
// scrollbar border
1805
&.top { border-bottom: 1px solid $border_color; }
1806
&.bottom { border-top: 1px solid $border_color; }
1807
&.left { border-right: 1px solid $border_color; }
1808
&.right { border-left: 1px solid $border_color; }
1809
// slider
1811
slider {
1812
transition: $shorter_transition, margin 0, border-width 0;
1813
min-width: 8px;
1814
min-height: 8px;
1815
border: 4px solid transparent;
1816
border-radius: $circular_radius;
1817
background-clip: padding-box;
1818
background-color: $tertiary_fg_color;
1819
&:hover { background-color: $secondary_fg_color; }
1821
&:active { background-color: $fg_color; }
1823
&:disabled { background-color: $disabled_tertiary_fg_color; }
1825
}
1826
&.fine-tune {
1828
slider {
1829
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1830
min-width: 4px;
1831
min-height: 4px;
1832
}
1833
&.horizontal slider { margin: 2px 0; }
1835
&.vertical slider { margin: 0 2px; }
1837
}
1838
&.overlay-indicator {
1840
&:not(.dragging):not(.hovering) {
1841
border-color: transparent;
1842
background-color: transparent;
1843
slider {
1845
min-width: 4px;
1846
min-height: 4px;
1847
margin: 4px - 1px;
1848
border: 1px solid scale-alpha($base_color, $lower_opacity);
1849
}
1850
button {
1852
min-width: 4px;
1853
min-height: 4px;
1854
margin: 4px - 1px;
1855
border: 1px solid scale-alpha($base_color, $lower_opacity);
1856
border-radius: $circular_radius;
1857
background-color: $tertiary_fg_color;
1858
background-clip: padding-box;
1859
-gtk-icon-source: none;
1860
&:disabled { background-color: $disabled_tertiary_fg_color; }
1862
}
1863
&.horizontal {
1865
slider { min-width: $_slider_min_length; }
1866
button { min-width: 8px; }
1868
}
1869
&.vertical {
1871
slider { min-height: $_slider_min_length; }
1872
button { min-height: 8px; }
1874
}
1875
}
1876
&.dragging,
1878
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1879
}
1880
&.horizontal slider { min-width: $_slider_min_length; }
1882
&.vertical slider { min-height: $_slider_min_length; }
1884
// button styling
1886
button {
1887
@extend %simple_flat_button;
1888
min-width: 16px;
1890
min-height: 16px;
1891
padding: 0;
1892
border-radius: 0;
1893
}
1894
// button icons
1896
&.vertical {
1897
button {
1898
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1899
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1901
}
1902
}
1903
&.horizontal {
1905
button {
1906
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1907
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1909
}
1910
}
1911
}
1912
/**********
1915
* Switch *
1916
**********/
1917
switch {
1918
transition: $longer_transition;
1919
margin: $container_padding 0;
1920
border: 4px solid transparent;
1921
border-radius: $circular_radius;
1922
background-color: $fill_color;
1923
background-clip: padding-box;
1924
font-size: 0;
1925
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1927
&:checked {
1929
background-color: scale-alpha($accent_color, 0.5);
1930
&:disabled {
1932
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1933
color: $disabled_fg_color;
1934
}
1935
}
1936
slider {
1938
@include entry(normal);
1939
transition: $longer_transition, $shadow_transition, margin 0;
1941
min-width: $small_size;
1942
min-height: $small_size;
1943
margin: -4px 0 -4px -4px;
1944
border-radius: $circular_radius;
1945
-gtk-outline-radius: $circular_radius;
1946
}
1947
&:hover slider { @include entry(focus); }
1949
&:checked slider {
1951
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1952
animation: needs_attention $longer_duration $deceleration_curve;
1953
margin: -4px -4px -4px 0;
1954
background-color: $accent_color;
1955
color: $inverse_fg_color;
1956
}
1957
&:disabled slider { @include entry(disabled); }
1959
&:checked:disabled slider { animation: none; }
1961
row:selected & {
1963
}
1964
}
1965
/*************************
1968
* Check and Radio items *
1969
*************************/
1970
// draw regular check and radio items using our PNG assets
1971
// all assets are rendered from assets.svg. never add pngs directly
1972
//selection-mode
1974
@each $s, $as in ('', '-unchecked'),
1975
(':checked', '-checked') {
1976
.view.content-view.check#{$s}:not(list) {
1977
margin: 8px;
1978
box-shadow: none;
1979
background-color: transparent;
1980
background-image: none;
1981
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1982
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1983
-gtk-icon-shadow: $shadow_1;
1984
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1986
}
1987
}
1988
checkbutton.text-button,
1990
radiobutton.text-button {
1991
// this is for a nice focus on check and radios text
1992
padding: 2px;
1993
outline-offset: 0;
1994
label:not(:only-child) { margin: 0 4px; }
1996
}
1997
check,
1999
radio {
2000
min-height: 24px;
2001
min-width: 24px;
2002
margin: -($large_size - 24px) / 2;
2003
padding: ($large_size - 24px) / 2;
2004
@extend %simple_flat_button;
2006
@extend %circular_button;
2008
&:checked, &:indeterminate { color: $accent_color; }
2010
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2012
// &:only-child { margin: -12px; }
2014
row &:not(:checked):not(:indeterminate) {
2016
color: gtkalpha(currentColor, $secondary_opacity);
2017
&:hover, &:active { color: currentColor; }
2019
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
2021
}
2022
menu menuitem & {
2024
transition: none;
2025
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2026
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2028
&, &:hover, &:disabled {
2030
box-shadow: none;
2031
// color: inherit;
2032
// animation: none;
2033
}
2034
}
2035
}
2036
%check,
2038
check {
2039
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2040
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.png"))); }
2041
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2043
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.png"))); }
2044
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2046
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.png"))); }
2047
}
2048
$radio_indicator: 10px / $large_size / 2;
2050
$radio_radius_slice: #{$large_size / 2px};
2051
$radio_radius_width: #{$large_size / 2};
2052
%radio,
2054
radio {
2055
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2056
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.png"))); }
2057
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2059
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.png"))); }
2060
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2062
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.png"))); }
2063
border-image: -gtk-gradient(radial,
2065
center center, 0,
2066
center center, 0.001,
2067
to($accent_color),
2068
to(transparent))
2069
$radio_radius_slice / $radio_radius_width;
2070
&:checked {
2072
border-image: -gtk-gradient(radial,
2073
center center, 0,
2074
center center, $radio_indicator,
2075
to($accent_color),
2076
to(transparent))
2077
$radio_radius_slice / $radio_radius_width;
2078
}
2079
&:checked:disabled {
2081
border-image: -gtk-gradient(radial,
2082
center center, 0,
2083
center center, $radio_indicator,
2084
to(scale-alpha($accent_color, $disabled_opacity)),
2085
to(transparent))
2086
$radio_radius_slice / $radio_radius_width;
2087
}
2088
&:indeterminate:checked {
2090
border-image: -gtk-gradient(radial,
2091
center center, 0,
2092
center center, 0.001,
2093
to($accent_color),
2094
to(transparent))
2095
$radio_radius_slice / $radio_radius_width;
2096
}
2097
}
2098
// let's animate things
2100
@keyframes check_check {
2101
from { -gtk-icon-transform: rotate(90deg); }
2102
to { -gtk-icon-transform: unset; }
2103
}
2104
@keyframes check_radio { // FIXME: cannot animate border-image
2106
from {
2107
border-image: -gtk-gradient(radial,
2108
center center, 0,
2109
center center, 0.001,
2110
to($accent_color),
2111
to(transparent))
2112
$radio_radius_slice / $radio_radius_width;
2113
}
2114
to {
2116
border-image: -gtk-gradient(radial,
2117
center center, 0,
2118
center center, $radio_indicator,
2119
to($accent_color),
2120
to(transparent))
2121
$radio_radius_slice / $radio_radius_width;
2122
}
2123
}
2124
@keyframes check_indeterminate {
2126
from { -gtk-icon-transform: unset; }
2127
50% { -gtk-icon-transform: scale(0, 1); }
2128
to { -gtk-icon-transform: unset; }
2129
}
2130
%check_checked,
2132
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2133
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2135
// %radio_checked,
2137
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2138
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2140
%indeterminate_checked,
2142
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2143
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2145
// no animations in menus
2147
menu menuitem {
2148
check:not(:indeterminate):checked,
2149
radio:not(:indeterminate):checked,
2150
check:indeterminate:checked,
2151
radio:indeterminate:checked { animation: none; }
2152
}
2153
treeview.view check,
2155
treeview.view radio {
2156
padding: 0;
2157
&:hover {
2159
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2160
&:disabled { box-shadow: none; }
2162
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2164
}
2165
& {
2167
color: $secondary_fg_color;
2168
&:hover, &:active { color: $fg_color; }
2170
&:disabled { color: $disabled_secondary_fg_color; }
2172
&:checked, &:indeterminate { color: $accent_color; }
2174
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2176
}
2177
&:selected {
2179
color: $secondary_inverse_fg_color;
2180
&:hover, &:active { color: $inverse_fg_color; }
2182
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2184
&:checked, &:indeterminate { color: $accent_color; }
2186
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2188
}
2189
}
2190
treeview.view radio:checked {
2192
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2193
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.png")));
2194
border-image: none;
2195
}
2196
/************
2199
* GtkScale *
2200
************/
2201
scale {
2202
// sizing
2203
$_marks_lenght: 8px;
2204
$_marks_distance: 8px;
2205
$slider_size: 24px;
2207
$marks_slider_size: 30px;
2208
$slider_margin: -($slider_size - $bar_size) / 2;
2210
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2211
$color_slider_margin: -($slider_size) / 2;
2213
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2214
min-height: $medium_size - $slider_size;
2216
min-width: $medium_size - $slider_size;
2217
padding: ($slider_size / 2);
2218
* { transition: $longer_transition; }
2220
// the slider is inside the trough, so to have make it bigger there's a negative margin
2222
slider {
2223
min-height: $slider_size;
2224
min-width: $slider_size;
2225
margin: $slider_margin;
2226
}
2227
// the backing bit
2229
trough {
2230
outline-offset: 2px;
2231
background-color: $fill_color;
2232
&:disabled { color: $disabled_fg_color; }
2234
}
2235
// the colored part of the backing bit
2237
highlight {
2238
background-color: $accent_color;
2239
&:disabled { background-color: transparent; }
2241
}
2242
// this is another differently styled part of the backing bit, the most relevant use case is for example
2244
// in media player to indicate how much video stream as been cached
2245
fill {
2246
background-color: $fill_color;
2247
&:disabled { background-color: transparent; }
2249
}
2250
slider {
2252
transition: all $shorter_duration $standard_curve;
2253
// border-radius: 100%;
2254
// background-color: $accent_color;
2255
background-repeat: no-repeat;
2256
background-position: center;
2257
@each $s, $as in ('', ''),
2259
(':disabled', '-disabled') {
2260
&#{$s} {
2261
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2262
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2264
}
2265
}
2266
background-size: calc(100% - 8px);
2268
&:hover { background-size: calc(100% - 4px); }
2270
&:active { background-size: calc(100% - 0px); }
2272
}
2273
// click-and-hold the slider to activate
2275
&.fine-tune {
2276
// to make the slider shrink in fine-tune mode
2277
slider { background-size: calc(100% - 12px); }
2278
}
2279
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2281
marks {
2283
color: $fill_color;
2284
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2286
(bottom, bottom, top),
2287
(top, left, right),
2288
(bottom, right, left) {
2289
&.#{$marks_class} {
2290
margin-#{$marks_margin}: $_marks_distance;
2291
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2292
}
2293
}
2294
}
2295
&.horizontal {
2297
indicator {
2298
min-height: $_marks_lenght;
2299
min-width: 1px;
2300
}
2301
}
2302
&.vertical {
2304
indicator {
2305
min-height: 1px;
2306
min-width: $_marks_lenght;
2307
}
2308
}
2309
// *WARNING* scale with marks madness following
2311
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2313
('vertical', 'vert') {
2314
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2315
('marks-after', 'marks-after:not(.marks-before)') {
2316
&.#{$dir_class}.#{$marks_class} {
2317
slider {
2318
@each $state, $state_infix in ('', ''),
2319
(':disabled', '-disabled') {
2320
&#{$state} {
2321
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2322
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2324
}
2325
}
2326
@if $dir_class == 'horizontal' {
2328
min-height: $marks_slider_size;
2329
min-width: $slider_size;
2330
@if $marks_infix == 'marks-before' {
2332
margin-top: $marks_slider_margin;
2333
background-position: center calc(100% - 4px);
2335
&:hover { background-position: center calc(100% - 2px); }
2337
&:active { background-position: center calc(100% - 0px); }
2339
}
2340
@if $marks_infix == 'marks-after' {
2342
margin-bottom: $marks_slider_margin;
2343
background-position: center calc(4px);
2345
&:hover { background-position: center calc(2px); }
2347
&:active { background-position: center calc(0px); }
2349
}
2350
}
2351
@if $dir_class == 'vertical' {
2353
min-height: $slider_size;
2354
min-width: $marks_slider_size;
2355
@if $marks_infix == 'marks-before' {
2357
margin-left: $marks_slider_margin;
2358
background-position: calc(4px) center;
2360
&:hover { background-position: calc(2px) center; }
2362
&:active { background-position: calc(0px) center; }
2364
}
2365
@if $marks_infix == 'marks-after' {
2367
margin-right: $marks_slider_margin;
2368
background-position: calc(100% - 4px) center;
2370
&:hover { background-position: calc(100% - 2px) center; }
2372
&:active { background-position: calc(100% - 0px) center; }
2374
}
2375
}
2376
}
2377
&.fine-tune slider {
2379
@if $dir_class == 'horizontal' {
2380
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2381
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2383
}
2384
@if $dir_class == 'vertical' {
2386
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2387
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2389
}
2390
}
2391
}
2392
}
2393
}
2394
&.color {
2396
min-height: 0;
2397
min-width: 0;
2398
&.horizontal {
2400
padding: 0 0 12px 0;
2401
slider {
2403
&:dir(ltr), &:dir(rtl) { // specificity bump
2404
margin-bottom: $color_slider_margin;
2405
margin-top: $color_marks_slider_margin;
2406
}
2407
}
2408
}
2409
&.vertical {
2411
&:dir(ltr) {
2412
padding: 0 0 0 12px;
2413
slider {
2415
margin-left: $color_slider_margin;
2416
margin-right: $color_marks_slider_margin;
2417
}
2418
}
2419
&:dir(rtl) {
2421
padding: 0 12px 0 0;
2422
slider {
2424
margin-right: $color_slider_margin;
2425
margin-left: $color_marks_slider_margin;
2426
}
2427
}
2428
}
2429
}
2430
}
2431
/*****************
2434
* Progress bars *
2435
*****************/
2436
progressbar {
2437
// sizing
2438
&.horizontal {
2439
trough,
2440
progress { min-height: $bar_size; }
2441
}
2442
&.vertical {
2444
trough,
2445
progress { min-width: $bar_size; }
2446
}
2447
// FIXME: insensitive state missing and some other state should be set probably
2449
color: $tertiary_fg_color;
2450
font-size: smaller;
2451
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2453
progress { background-color: $primary_color; }
2455
&.osd { // progressbar.osd used for epiphany page loading progress
2457
// min-width: $bar_size;
2458
// min-height: $bar_size;
2459
// background-color: transparent;
2460
// trough { background-color: transparent; }
2462
progress {
2464
}
2465
}
2466
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2468
}
2469
/*************
2472
* Level Bar *
2473
*************/
2474
levelbar {
2475
block {
2476
min-width: $medium_size;
2477
min-height: $bar_size;
2478
}
2479
&.vertical block {
2481
min-width: $bar_size;
2482
min-height: $medium_size;
2483
}
2484
trough {
2486
padding: 2px;
2487
border-radius: 2px;
2488
@include entry(normal);
2490
&:disabled { @include entry(disabled); }
2492
}
2493
&.horizontal.discrete block { margin: 0 1px; }
2495
&.vertical.discrete block { margin: 1px 0; }
2497
&.horizontal.discrete trough { padding: 2px 1px; }
2499
&.vertical.discrete trough { padding: 1px 2px; }
2501
block {
2503
&.low {
2504
background-color: $warning_color;
2505
}
2506
&.high,
2508
&:not(.empty) {
2509
background-color: $primary_color;
2510
}
2511
&.full {
2513
background-color: $success_color;
2514
}
2515
&.empty {
2517
background-color: $fill_color;
2518
color: $disabled_fg_color;
2519
}
2520
}
2521
}
2522
/****************
2525
* Print dialog *
2526
*****************/
2527
printdialog {
2528
paper {
2529
padding: 0;
2530
border: 1px solid $border_color;
2531
background: $base_color;
2532
color: $fg_color;
2533
}
2534
.dialog-action-box { margin: 12px; }
2536
}
2537
/**********
2540
* Frames *
2541
**********/
2542
frame > border,
2543
.frame {
2544
margin: 0;
2545
padding: 0;
2546
border: 1px solid $border_color;
2547
border-radius: 0;
2548
box-shadow: none;
2549
&.flat { border-style: none; }
2551
}
2552
actionbar > revealer > box {
2554
padding: $container_padding;
2555
border-top: 1px solid $border_color;
2556
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2558
}
2559
scrolledwindow {
2561
viewport.frame { // avoid double borders when viewport inside scrolled window
2562
border-style: none;
2563
}
2564
// This is used when content is touch-dragged past boundaries.
2566
// draws a box on top of the content, the size changes programmatically.
2567
@at-root overshoot {
2568
&.top { @include overshoot(top); }
2569
&.bottom { @include overshoot(bottom); }
2571
&.left { @include overshoot(left); }
2573
&.right { @include overshoot(right); }
2575
}
2576
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2578
@at-root undershoot {
2579
&.top { @include undershoot(top); }
2580
&.bottom { @include undershoot(bottom); }
2582
&.left { @include undershoot(left); }
2584
&.right { @include undershoot(right); }
2586
}
2587
@at-root junction { // the small square between two scrollbars
2589
border-style: solid none none solid;
2590
border-width: 1px;
2591
border-color: $border_color;
2592
background-color: $base_color;
2593
&:dir(rtl) { border-style: solid solid none none; }
2595
}
2596
}
2597
//vbox and hbox separators
2599
separator {
2600
min-width: 1px;
2601
min-height: 1px;
2602
background: $border_color;
2603
}
2604
/*********
2607
* Lists *
2608
*********/
2609
list {
2610
border-color: $border_color;
2611
background-color: $base_color;
2612
row { padding: 2px; }
2614
}
2615
// FIXME
2617
$row_transition: $longer_transition, background-color 0, color 0;
2618
row {
2620
&.activatable {
2621
transition: $row_transition,
2622
background-size $ripple_duration $deceleration_curve,
2623
background-image $ripple_duration * 2 $deceleration_curve;
2624
box-shadow: inset 0 0 0 9999px transparent;
2625
background-image: radial-gradient(circle farthest-corner at center,
2626
transparent 10%,
2627
transparent 0%);
2628
background-repeat: no-repeat;
2629
background-position: center;
2630
background-size: 1000% 1000%;
2631
&:hover {
2633
transition: $row_transition,
2634
box-shadow 0,
2635
background-size $ripple_duration $deceleration_curve,
2636
background-image $ripple_duration * 2 $deceleration_curve;
2637
box-shadow: inset 0 0 0 9999px $row_fill_color;
2638
}
2639
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2641
&:active {
2642
transition: $row_transition,
2643
background-size 0,
2644
background-image 0;
2645
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2646
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2647
background-image: radial-gradient(circle farthest-corner at center,
2648
$semi_fill_color 10%,
2649
transparent 0%);
2650
background-size: 0% 0%;
2651
}
2652
}
2653
&:selected { @extend %selected_items; }
2655
}
2656
/*********************
2659
* App Notifications *
2660
*********************/
2661
.app-notification {
2662
@extend %osd;
2663
@extend toolbar.osd;
2665
margin: 8px;
2667
button { @extend %button_basic.flat; }
2669
&.frame,
2671
border { border-style: none; }
2672
}
2673
/*************
2676
* Expanders *
2677
*************/
2678
expander {
2679
arrow {
2680
transition: all $shorter_duration $standard_curve;
2681
min-width: 16px;
2682
min-height: 16px;
2683
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2684
-gtk-icon-transform: rotate(-90deg);
2685
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2687
&:checked { -gtk-icon-transform: unset; }
2689
color: $secondary_fg_color;
2691
&:hover, &:active { color: $fg_color; }
2693
&:disabled { color: $disabled_secondary_fg_color; }
2695
&:selected {
2697
color: $secondary_inverse_fg_color;
2698
&:hover, &:active { color: $inverse_fg_color; }
2700
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2702
}
2703
}
2704
}
2705
/************
2708
* Calendar *
2709
***********/
2710
calendar {
2711
padding: 1px;
2712
border: 1px solid $border_color;
2713
color: $fg_color;
2714
&:disabled { color: $disabled_fg_color; }
2716
&:selected {
2718
@extend %selected_items;
2719
border-radius: 2px + 1px;
2721
}
2722
&.header {
2724
border-style: none none solid;
2725
border-radius: 0;
2726
}
2727
&.button { @extend %simple_flat_button; }
2729
&.highlight {
2731
color: gtkalpha(currentColor, $tertiary_opacity);
2732
font-weight: 500;
2733
}
2734
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2736
}
2737
/***********
2740
* Dialogs *
2741
***********/
2742
messagedialog { // Message Dialog styling
2743
&.background { background-color: $lighter_bg_color; }
2744
.titlebar {
2746
min-height: $small_size;
2747
border-style: none;
2748
box-shadow: inset 0 1px $highlight_color;
2749
background-color: $lighter_bg_color;
2750
color: $fg_color;
2751
&:backdrop { color: $secondary_fg_color; }
2753
}
2754
&.csd { // rounded bottom border styling for csd version
2756
&.background {
2757
// bigger radius for better antialiasing
2758
border-bottom-left-radius: 2px;
2759
border-bottom-right-radius: 2px;
2760
}
2761
.dialog-action-area button {
2763
padding: 8px 16px;
2764
border-top: 1px solid $border_color;
2765
border-radius: 0;
2766
@extend %simple_flat_button;
2768
&:first-child { border-bottom-left-radius: 2px; }
2770
&:last-child { border-bottom-right-radius: 2px; }
2772
}
2773
}
2774
}
2775
filechooser {
2777
.dialog-action-box { border-top: 1px solid $border_color; }
2778
#pathbarbox {
2780
border-bottom: 1px solid $border_color;
2781
background-color: $bg_color;
2782
}
2783
}
2784
filechooserbutton:drop(active) {
2786
box-shadow: none;
2787
}
2788
/***********
2791
* Sidebar *
2792
***********/
2793
.sidebar {
2794
border-style: none;
2795
background-color: $lighter_bg_color;
2796
@at-root %sidebar_left,
2798
&:dir(ltr),
2799
&.left,
2800
&.left:dir(rtl) {
2801
border-right: 1px solid $border_color;
2802
border-left-style: none;
2803
}
2804
@at-root %sidebar_right
2806
&:dir(rtl),
2807
&.right {
2808
border-left: 1px solid $border_color;
2809
border-right-style: none;
2810
}
2811
list { background-color: transparent; }
2813
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2815
}
2816
stacksidebar {
2818
&.sidebar {
2819
&:dir(ltr),
2820
&.left,
2821
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2822
&:dir(rtl),
2824
&.right { list { @extend %sidebar_right; }}
2825
}
2826
row {
2828
padding: 10px 4px;
2829
> label {
2831
padding-left: 6px;
2832
padding-right: 6px;
2833
}
2834
&.needs-attention > label { @extend %needs_attention; }
2836
}
2837
}
2838
/****************
2841
* File chooser *
2842
****************/
2843
placessidebar {
2844
> viewport.frame { border-style: none; }
2845
list { padding: (4px - 3px) 0 4px; }
2847
row {
2849
// Needs overriding of the GtkListBoxRow padding
2850
min-height: 32px;
2851
margin: -1px 0; // Remove unknown margins
2852
padding: 0;
2853
// Using margins/padding directly in the SidebarRow
2855
// will make the animation of the new bookmark row jump
2856
> revealer { padding: 0 12px; }
2857
&:selected { color: $inverse_fg_color; }
2859
&:disabled { color: $disabled_fg_color; }
2861
image.sidebar-icon {
2863
opacity: $tertiary_opacity; // dim the device icons
2864
&:dir(ltr) { padding-right: 8px; }
2866
&:dir(rtl) { padding-left: 8px; }
2867
}
2868
label.sidebar-label {
2870
&:dir(ltr) { padding-right: 2px; }
2871
&:dir(rtl) { padding-left: 2px; }
2872
}
2873
@at-root button.sidebar-button {
2875
@extend %simple_flat_button;
2876
@extend %small_button;
2878
row:selected & {
2880
}
2881
}
2882
&.sidebar-placeholder-row {
2884
min-height: 2px;
2885
padding: 0 8px;
2886
background-image: image($accent_color);
2887
background-clip: content-box;
2888
}
2889
&.sidebar-new-bookmark-row { color: $accent_color; }
2891
&:drop(active):not(:disabled) {
2893
box-shadow: inset 0 0 0 2px $accent_color;
2894
&:selected {
2896
// background-color: $accent_color;
2897
// color: $inverse_fg_color;
2898
}
2899
}
2900
}
2901
}
2902
placesview {
2904
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2905
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2907
// this selects the "connect to server" label
2909
> actionbar > revealer > box > label {
2910
padding-left: 8px;
2911
padding-right: 8px;
2912
}
2913
}
2914
/*********
2917
* Paned *
2918
*********/
2919
paned {
2920
> separator {
2921
min-width: 1px;
2922
min-height: 1px;
2923
-gtk-icon-source: none; // defeats the ugly default handle decoration
2924
border-style: none; // just to be sure
2925
background-color: transparent;
2926
// workaround, using background istead of a border since the border will get rendered twice (?)
2927
background-image: image($border_color);
2928
background-size: 1px 1px;
2929
background-clip: content-box; // avoids borders image being rendered twice (?)
2930
&.wide {
2932
min-width: 6px;
2933
min-height: 6px;
2934
background-color: $bg_color;
2935
background-image: image($border_color), image($border_color);
2936
background-size: 1px 1px, 1px 1px;
2937
}
2938
}
2939
&.horizontal > separator {
2941
background-repeat: repeat-y;
2942
&:dir(ltr) {
2944
margin: 0 -8px 0 0;
2945
padding: 0 8px 0 0;
2946
background-position: left;
2947
}
2948
&:dir(rtl) {
2950
margin: 0 0 0 -8px;
2951
padding: 0 0 0 8px;
2952
background-position: right;
2953
}
2954
&.wide {
2956
margin: 0;
2957
padding: 0;
2958
background-repeat: repeat-y, repeat-y;
2959
background-position: left, right;
2960
}
2961
}
2962
&.vertical > separator {
2964
margin: 0 0 -8px 0;
2965
padding: 0 0 8px 0;
2966
background-repeat: repeat-x;
2967
background-position: top;
2968
&.wide {
2970
margin: 0;
2971
padding: 0;
2972
background-repeat: repeat-x, repeat-x;
2973
background-position: bottom, top;
2974
}
2975
}
2976
}
2977
/**************
2980
* GtkInfoBar *
2981
**************/
2982
infobar {
2983
border-style: none;
2984
&.info { background-color: $info_bg_color; }
2986
&.question { background-color: $question_bg_color; }
2988
&.warning { background-color: $warning_bg_color; }
2990
&.error { background-color: $error_bg_color; }
2992
&.info,
2994
&.question,
2995
&.warning,
2996
&.error {
2997
> label, & { color: $inverse_fg_color; }
2998
button { @extend %button_selected; }
3000
selection {}
3002
*:link { @extend %link_selected; }
3004
}
3005
}
3006
/************
3009
* Tooltips *
3010
************/
3011
tooltip {
3012
&.background {
3013
// background-color needs to be set this way otherwise it gets drawn twice
3014
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3015
box-shadow: inset 0 1px $highlight_color;
3016
background-color: scale-alpha($base_color, $higher_opacity);
3017
}
3018
// @extend %osd;
3020
// padding: 4px; /* not working */
3022
border-radius: 2px;
3023
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3024
&:not(.csd) {
3026
border: 1px solid $border_color;
3027
border-radius: 2px + 1px;
3028
background-clip: $extra_background_clip;
3029
}
3030
// FIXME: we need a border or tooltips vanish on black background.
3032
decoration { background-color: transparent; }
3033
label {
3035
// tooltip label has already 6px margins
3036
min-height: 32px - 6px * 2;
3037
padding: 0 8px - 6px;
3038
}
3039
* {
3041
// workaround for Eclipse.
3042
// do not include any declaration here.
3043
// padding: 0;
3044
// background-color: transparent;
3045
// color: inherit;
3046
}
3047
}
3048
/*****************
3051
* Color Chooser *
3052
*****************/
3053
colorswatch {
3054
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3055
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3056
// applied to the overlay box.
3057
// base color corners rounding
3059
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3060
// sports a bigger radius.
3061
// nth-child is needed by the custom color strip.
3062
&.top {
3064
border-top-left-radius: $material_radius + 0.5px;
3065
border-top-right-radius: $material_radius + 0.5px;
3066
overlay {
3068
border-top-left-radius: $material_radius;
3069
border-top-right-radius: $material_radius;
3070
}
3071
}
3072
&.bottom {
3074
border-bottom-left-radius: $material_radius + 0.5px;
3075
border-bottom-right-radius: $material_radius + 0.5px;
3076
overlay {
3078
border-bottom-left-radius: $material_radius;
3079
border-bottom-right-radius: $material_radius;
3080
}
3081
}
3082
&.left,
3084
&:first-child:not(.top) {
3085
border-top-left-radius: $material_radius + 0.5px;
3086
border-bottom-left-radius: $material_radius + 0.5px;
3087
overlay {
3089
border-top-left-radius: $material_radius;
3090
border-bottom-left-radius: $material_radius;
3091
}
3092
}
3093
&.right,
3095
&:last-child:not(.bottom) {
3096
border-top-right-radius: $material_radius + 0.5px;
3097
border-bottom-right-radius: $material_radius + 0.5px;
3098
overlay {
3100
border-top-right-radius: $material_radius;
3101
border-bottom-right-radius: $material_radius;
3102
}
3103
}
3104
&.dark overlay { color: $light_fg_color; }
3106
&.light overlay { color: $dark_fg_color; }
3108
&.dark { color: $light_fg_color; } // for focus ring
3110
&.light { color: $dark_fg_color; } // for focus ring
3112
&:drop(active) {
3114
box-shadow: none;
3115
&.light overlay {
3117
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3118
}
3119
&.dark overlay {
3121
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3122
}
3123
}
3124
overlay {
3126
transition: $shadow_transition;
3127
box-shadow: $shadow_1;
3128
&:hover { box-shadow: $shadow_2; }
3130
}
3131
&#add-color-button {
3133
border-radius: $material_radius $material_radius 0 0;
3134
color: $light_fg_color; // for focus ring
3135
&:only-child { border-radius: $material_radius; }
3137
overlay {
3139
background-image: linear-gradient(to right,
3140
$error_bg_color 25%,
3141
$warning_bg_color 25%, $warning_bg_color 50%,
3142
$info_bg_color 50%, $info_bg_color 75%,
3143
$question_bg_color 75%);
3144
color: $light_fg_color;
3145
}
3146
}
3147
&:disabled {
3149
opacity: $disabled_opacity;
3150
overlay { box-shadow: none; }
3152
}
3153
row:selected & {
3155
}
3156
&#editor-color-sample {
3158
border-radius: $material_radius + 0.5px;
3159
overlay { border-radius: $material_radius; }
3161
// overlay:hover { box-shadow: $shadow_1; }
3163
}
3164
}
3165
// colorscale popup
3167
colorchooser .popover.osd {
3168
transition: $shadow_transition;
3169
border-radius: 2px;
3170
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3171
background-color: $base_color;
3172
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3174
spinbutton:not(.vertical) { @extend %entry.flat; }
3176
}
3177
/********
3180
* Misc *
3181
********/
3182
//content view (grid/list)
3183
.content-view {
3184
background-color: $bg_color;
3185
// &:hover { -gtk-icon-effect: highlight; }
3187
rubberband, .rubberband { @extend rubberband; }
3189
}
3190
.scale-popup {
3192
.osd & { @extend %osd; }
3193
.osd & button.flat { //FIXME: quick hack, redo properly
3195
}
3196
button { // +/- buttons on GtkVolumeButton popup
3198
}
3199
}
3200
/**********************
3203
* Window Decorations *
3204
*********************/
3205
decoration {
3206
transition: $shadow_transition;
3207
border-radius: 2px 2px 0 0;
3208
box-shadow: $shadow_4, 0 16px 16px transparent;
3209
// FIXME rationalize shadows
3211
// this is used for the resize cursor area
3213
margin: 8px;
3214
&:backdrop {
3216
// the transparent shadow here is to enforce that the shadow extents don't
3217
// change when we go to backdrop, to prevent jumping windows.
3218
// The biggest shadow should be in the same order then in the active state
3219
// or the jumping will happen during the transition.
3220
box-shadow: $shadow_2, 0 16px 16px transparent;
3221
}
3222
.maximized &,
3224
.fullscreen &,
3225
.tiled & { border-radius: 0; }
3226
.popup & { box-shadow: none; }
3228
// server-side decorations as used by mutter
3230
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3231
.csd.popup & {
3233
border-radius: 2px;
3234
box-shadow: $shadow_2;
3235
}
3236
tooltip.csd & {
3238
border-radius: 2px;
3239
box-shadow: $shadow_2;
3240
}
3241
messagedialog.csd & {
3243
border-radius: 2px;
3244
// box-shadow: $shadow_4, 0 16px 16px transparent;
3245
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3247
}
3248
.solid-csd & {
3250
margin: 0;
3251
padding: 4px;
3252
// border: solid 1px $border_color;
3253
// border-radius: 0;
3254
box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3255
// background-color: $border_color;
3256
}
3257
}
3258
// Window Close button
3260
button.titlebutton {
3261
// @extend %simple_flat_button;
3262
@extend %circular_button;
3264
.selection-mode & {
3266
}
3267
}
3268
// catch all extend :)
3271
%selected_items {
3273
background-color: $primary_color;
3274
@at-root %nobg_selected_items, & {
3276
color: $inverse_fg_color;
3277
&:disabled { color: $disabled_inverse_fg_color; }
3279
}
3280
}
3281
.monospace { font-family: monospace; }
3283
/**********************
3286
* Touch Copy & Paste *
3287
*********************/
3288
//touch selection handlebars for the Popover.osd above
3289
cursor-handle {
3290
border-radius: $circular_radius;
3291
background-color: $accent_color;
3292
background-image: none;
3293
&.top:dir(ltr), &.bottom:dir(rtl) {
3295
padding-left: 6px;
3296
border-top-right-radius: 0;
3297
}
3298
&.bottom:dir(ltr), &.top:dir(rtl) {
3300
padding-right: 6px;
3301
border-top-left-radius: 0;
3302
}
3303
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3305
-GtkWidget-text-handle-width: 24;
3306
-GtkWidget-text-handle-height: 30;
3307
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3309
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3310
url('#{$_url}@2.png'));
3311
}
3312
}
3313
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3315
// shortcut window keys
3317
.keycap {
3318
min-width: 28px - 8px * 2;
3319
min-height: 28px - 2px;
3320
margin-top: 2px;
3321
padding-bottom: 2px;
3322
padding-left: 8px;
3323
padding-right: 8px;
3324
border: solid 1px $border_color;
3326
border-radius: 2px + 1px;
3327
box-shadow: inset 0 -2px $border_color;
3328
background-color: $base_color;
3329
color: $fg_color;
3330
font-size: smaller;
3331
}
3332
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3334
transition: $longer_transition;
3335
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3336
caret-color: $accent_color;
3337
}
3338
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3340
stackswitcher button.circular,
3342
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3343
min-width: $medium_size;
3344
min-height: $medium_size;
3345
padding: 0;
3346
}
3347