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 & { 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
@keyframes spin_colors {
197
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
198
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
199
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
200
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
201
}
202
spinner {
204
background: none;
205
opacity: 0; // non spinning spinner makes no sense
206
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
207
&:checked {
209
opacity: 1;
210
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
211
&:disabled { opacity: $disabled_opacity; }
213
}
214
}
215
/****************
218
* Text Entries *
219
****************/
220
%entry,
221
entry {
222
%entry_basic, & {
223
min-height: $medium_size;
224
padding: 0 8px;
225
border-radius: 2px;
226
@include entry(normal);
228
&:focus { @include entry(focus); }
230
&:disabled { @include entry(disabled); }
232
&.flat {
234
border-radius: 0;
235
@include entry(flat-normal);
237
&:focus { @include entry(flat-focus); }
239
&:disabled { @include entry(flat-disabled); }
241
}
242
image { // icons inside the entry
244
// @extend %simple_flat_button;
245
// min-height: $small_size;
247
// min-width: $small_size;
248
// border-radius: $circular_radius;
249
// -gtk-outline-radius: $circular_radius;
250
color: gtkalpha(currentColor, $secondary_opacity);
251
&:hover, &:active { color: currentColor; }
253
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
255
&.left { margin-left: 2px; margin-right: 6px; }
257
&.right { margin-left: 6px; margin-right: 2px; }
259
}
260
undershoot {
262
&.left { @include undershoot(left); }
263
&.right { @include undershoot(right); }
265
}
266
selection { @extend %selected_items; }
268
// entry error and warning style
270
@each $e_type, $e_color in (error, $error_color),
271
(warning, $warning_color) {
272
&.#{$e_type} {
273
@include entry(normal, $e_color);
274
&:focus { @include entry(focus, $e_color); }
276
&:disabled { @include entry(disabled, $e_color); }
278
&.flat {
280
@include entry(flat-normal, $e_color);
281
&:focus { @include entry(flat-focus, $e_color); }
283
&:disabled { @include entry(flat-disabled, $e_color); }
285
}
286
}
287
}
288
&:drop(active) {
290
// box-shadow: inset 0 0 0 2px $accent_color;
291
}
292
.osd & {
294
}
295
}
296
progress {
298
margin: 2px (2px - 8px);
299
border-style: none none solid;
300
border-width: 2px;
301
border-color: $primary_color;
302
// border-radius: 0;
303
// box-shadow: none;
304
background-color: transparent;
305
// background-image: none;
306
}
307
// linked entries
309
.linked:not(.vertical) > & { @extend %linked; }
310
// Vertically linked entries
312
.linked.vertical > & { @extend %linked_vertical; }
313
.linked:not(.vertical) > &.flat,
315
.linked.vertical > &.flat { border-radius: 0; }
316
}
317
treeview entry {
319
&.flat, & {
320
min-height: 0;
321
padding: 2px;
322
border-radius: 0;
323
background-color: $base_color;
324
&, &:focus {
326
border-image: none;
327
box-shadow: none;
328
}
329
}
330
}
331
/***********
334
* Buttons *
335
***********/
336
// stuff for .needs-attention
337
@keyframes needs_attention {
338
from {
339
background-image: -gtk-gradient(radial,
340
center center, 0,
341
center center, 0.001,
342
to($accent_color),
343
to(transparent));
344
}
345
to {
347
background-image: -gtk-gradient(radial,
348
center center, 0,
349
center center, 0.5,
350
to($accent_color),
351
to(transparent));
352
}
353
}
354
%button,
356
button {
357
@at-root %button_basic, & {
358
min-height: 24px;
359
min-width: 16px;
360
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
361
border-radius: 2px;
362
font-weight: 500;
363
@include button(normal);
365
&:hover { @include button(hover); }
367
&:active { @include button(active); }
369
&:disabled { @include button(disabled); }
371
&:checked { @include button(checked); }
373
&:checked:disabled { @include button(checked-disabled); }
375
@at-root %flat_button, &.flat {
377
@at-root %simple_flat_button, & {
378
@include button(flat-normal);
379
&:hover { @include button(flat-hover); }
381
&:active { @include button(flat-active); }
383
&:disabled { @include button(flat-disabled); }
385
}
386
&:checked { @include button(flat-checked); }
388
&:checked:disabled { @include button(flat-checked-disabled); }
390
}
391
&.text-button {
393
padding-left: 16px;
394
padding-right: 16px;
395
}
396
&.image-button {
398
min-width: 24px;
399
padding: ($medium_size - 24px) / 2;
400
border-radius: $circular_radius;
401
-gtk-outline-radius: $circular_radius;
402
}
403
&.text-button.image-button {
405
border-radius: 2px;
406
-gtk-outline-radius: 2px;
407
label {
409
&:first-child {
410
margin-left: 16px - ($medium_size - 24px) / 2;
411
margin-right: 2px;
412
}
413
&:last-child {
415
margin-left: 2px;
416
margin-right: 16px - ($medium_size - 24px) / 2;
417
}
418
&:only-child {
420
margin-left: 16px - ($medium_size - 24px) / 2;
421
margin-right: 16px - ($medium_size - 24px) / 2;
422
}
423
}
424
image:not(:only-child) {
426
&:first-child { margin-left: (24px - 16px) / 2; }
427
&:last-child { margin-right: (24px - 16px) / 2; }
429
}
430
}
431
.linked > & { @extend %linked; }
433
.linked.vertical > & { @extend %linked_vertical; }
435
.linked > &.flat,
437
.linked.vertical > &.flat {
438
border-radius: 2px;
439
&.image-button {
441
border-radius: $circular_radius;
442
-gtk-outline-radius: $circular_radius;
443
}
444
&.text-button.image-button {
446
border-radius: 2px;
447
-gtk-outline-radius: 2px;
448
}
449
}
450
&:drop(active) {
452
// box-shadow: inset 0 0 0 2px $accent_color;
453
}
454
}
455
@at-root %button_selected, row:selected & {
457
&:disabled { color: $disabled_secondary_inverse_fg_color; }
458
}
459
// big standalone buttons like in Documents pager
461
&.osd {
462
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
463
&.image-button { padding: ($large_size - 24px) / 2; }
465
&:disabled { opacity: 0; }
467
}
468
//overlay / OSD style
470
@at-root %osd_button,
471
.osd & {
472
}
473
// Suggested and Destructive Action buttons
475
@each $b_type, $b_color in (suggested-action, $suggested_color),
476
(destructive-action, $destructive_color) {
477
&.#{$b_type} {
478
background-color: $b_color;
479
color: $inverse_fg_color;
480
&:disabled { @include button(disabled, $b_color); }
482
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
484
&.flat {
486
background-color: transparent;
487
color: $b_color;
488
&:disabled { @include button(flat-disabled, $b_color); }
490
&:checked { background-color: $fill_color; }
492
}
493
.osd & {
495
}
496
}
497
}
498
.stack-switcher > & {
500
// to position the needs attention dot, padding is added to the button
501
// child, a label needs just lateral padding while an icon needs vertical
502
// padding added too.
503
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
505
> label {
507
padding-left: 6px; // label padding
508
padding-right: 6px; //
509
}
510
> image {
512
padding-left: 6px; // image padding
513
padding-right: 6px; //
514
padding-top: 3px; //
515
padding-bottom: 3px; //
516
}
517
&.text-button {
519
// compensate text-button paddings
520
padding-left: 16px - 6px;
521
padding-right: 16px - 6px;
522
}
523
&.image-button {
525
// we want image buttons to have a 1:1 aspect ratio, so compensation
526
// of the padding added to the GtkImage is needed
527
padding-left: ($medium_size - 16px) / 2 - 6px;
528
padding-right: ($medium_size - 16px) / 2 - 6px;
529
}
530
&.needs-attention {
532
> label,
533
> image { @extend %needs_attention; }
534
&:checked {
536
> label,
537
> image {
538
animation: none;
539
background-image: none;
540
}
541
}
542
}
543
}
544
// hide separators
546
separator {
547
min-width: 0;
548
min-height: 0;
549
background: transparent;
550
}
551
// &.font,
553
// &.file { separator { background-color: transparent; }}
554
// &.font { > box > box > label { font-weight: bold; }}
556
// inline-toolbar buttons
558
.inline-toolbar & {
559
// @extend %button_basic.flat;
560
&:not(.text-button) { @extend %circular_button; }
562
}
563
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
565
@at-root %circular_button,
567
&.close,
568
&.circular { // The Bloody Circul Button
569
border-radius: $circular_radius;
570
-gtk-outline-radius: $circular_radius;
571
// label { padding: 0; }
573
}
574
@at-root %small_button {
576
min-height: $small_size;
577
min-width: $small_size;
578
padding: 0;
579
border-radius: $circular_radius;
580
-gtk-outline-radius: $circular_radius;
581
}
582
}
583
%needs_attention {
585
animation: needs_attention $longer_duration $deceleration_curve forwards;
586
background-repeat: no-repeat;
587
background-position: right 3px;
588
background-size: 6px 6px;
589
&:dir(rtl) { background-position: left 3px; }
591
}
592
// all the following is for the +|- buttons on inline toolbars, that way
594
// should really be deprecated...
595
.inline-toolbar toolbutton > button { // redefining the button look is
596
// needed since those are flat...
597
}
598
// More inline toolbar buttons
600
toolbar.inline-toolbar toolbutton {
601
// > button.flat { @extend %linked_middle; }
602
// &:first-child > button.flat { @extend %linked:first-child; }
604
// &:last-child > button.flat { @extend %linked:last-child; }
606
// &:only-child > button.flat { @extend %linked:only-child; }
608
}
609
%linked_middle {
611
border-radius: 0;
612
-gtk-outline-radius: 2px;
613
}
614
%linked {
616
@extend %linked_middle;
617
&:first-child {
619
border-top-left-radius: 2px;
620
border-bottom-left-radius: 2px;
621
}
622
&:last-child {
624
border-top-right-radius: 2px;
625
border-bottom-right-radius: 2px;
626
}
627
&:only-child {
629
border-radius: 2px;
630
}
631
}
632
%linked_vertical_middle {
634
border-radius: 0;
635
-gtk-outline-radius: 2px;
636
}
637
%linked_vertical{
639
@extend %linked_vertical_middle;
640
&:first-child {
642
border-top-left-radius: 2px;
643
border-top-right-radius: 2px;
644
}
645
&:last-child {
647
border-bottom-left-radius: 2px;
648
border-bottom-right-radius: 2px;
649
}
650
&:only-child {
652
border-radius: 2px;
653
}
654
}
655
/* menu buttons */
657
modelbutton.flat,
658
.menuitem.button.flat {
659
min-height: $menuitem_size;
660
padding: 0 8px;
661
border-radius: 2px;
662
color: inherit;
663
@extend %simple_flat_button;
665
&:selected { @extend %selected_items; }
667
check,
669
radio {
670
box-shadow: none;
671
background-image: none;
672
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
674
&:last-child { margin-left: -8px; margin-right: -16px; }
676
&:first-child { margin-left: -16px; margin-right: -8px; }
678
}
679
check:not(:indeterminate):checked { @extend %check_checked; }
681
// radio:not(:indeterminate):checked { @extend %radio_checked; }
683
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
685
}
686
modelbutton.flat arrow {
688
background: none;
689
&:hover { background: none; }
691
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
693
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
695
}
696
button.color {
698
min-height: $small_size;
699
min-width: $small_size;
700
padding: $container_padding;
701
colorswatch:only-child {
703
// &, overlay { border-radius: 0; }
704
}
705
}
706
/*********
709
* Links *
710
*********/
711
*:link {
712
&, &:hover, &:active { color: $link_color; }
713
&:visited {
715
&, &:hover, &:active { color: $visited_link_color; }
716
}
717
@at-root %link_selected,
719
&:selected,
720
*:selected & { color: $inverse_fg_color; }
721
}
722
button:link,
724
button:visited {
725
@extend *:link;
726
> label { text-decoration-line: underline; }
728
}
729
/*****************
731
* GtkSpinButton *
732
*****************/
733
spinbutton {
734
&:not(.vertical) {
735
// in this horizontal configuration, the whole spinbutton
736
// behaves as the entry, so we extend the entry styling
737
// and nuke the style on the internal entry
738
@extend %entry;
739
padding: 0;
741
%spinbutton_entry,
743
entry {
744
min-width: $large_size - 8px * 2;
745
// reset all the other props since the spinbutton node is styled here
746
margin: 0;
747
border-image: none;
748
border-radius: 0;
749
box-shadow: none;
750
background-color: transparent;
751
//
752
// This will help to simplify spinbutton's code, but unfortunatelly
753
// doesn't work properly in :dir(rtl). It needs z-index property.
754
//
755
// min-width: $large_size - 8px;
756
//
757
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
758
//
759
// &:dir(ltr) {
760
// margin-right: -$spinbuttons_width;
761
// padding-right: $spinbuttons_width;
762
// }
763
//
764
// &:dir(rtl) {
765
// margin-left: -$spinbuttons_width;
766
// padding-left: $spinbuttons_width;
767
// }
768
}
769
button {
771
// margin: $container_padding;
772
border: solid $container_padding transparent;
773
@extend %simple_flat_button;
775
@extend %small_button;
777
&.up:dir(ltr),
779
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
780
&.up:dir(rtl),
782
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
783
}
784
}
785
// OSD horizontal
787
.osd &:not(.vertical) {
788
button {
789
}
790
}
791
// Vertical
793
&.vertical {
794
// in the vertical configuration, we treat the spinbutton
795
// as a box, and tweak the style of the entry in the middle
796
// so that it's linked
797
// FIXME: this should not be set at all, but otherwise it gets the wrong
799
// color
800
&:disabled { color: $disabled_fg_color; }
801
&:drop(active) {
803
box-shadow: none;
804
}
805
entry {
807
min-height: $medium_size;
808
min-width: $large_size;
809
padding: 0;
810
}
811
button {
813
min-height: $medium_size;
814
min-width: $large_size;
815
padding: 0;
816
@extend %simple_flat_button;
818
&.up { border-radius: 2px 2px 0 0; }
820
&.down { border-radius: 0 0 2px 2px; }
822
}
823
}
824
// OSD vertical
826
.osd &.vertical button:first-child {
827
}
828
// Misc
830
treeview &:not(.vertical) {
831
min-height: 0;
832
border-style: none;
833
border-radius: 0;
834
entry {
836
min-height: 0;
837
padding: 1px 2px;
838
}
839
}
840
}
841
/**************
844
* ComboBoxes *
845
**************/
846
combobox {
847
arrow {
848
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
849
min-height: 16px;
850
min-width: 16px;
851
}
852
button.combo:checked { transition: none; } // workaround for menuitem selection
854
button.combo cellview {
856
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
857
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
858
}
859
#gtk-combobox-popup-menu {
861
padding: 2px 0;
862
menuitem {
864
min-height: $medium_size - 2px * 2;
865
padding: 0 8px;
866
}
867
}
868
&.linked {
870
button:nth-child(2) {
871
&:dir(ltr) { @extend %linked:last-child; }
872
&:dir(rtl) { @extend %linked:first-child; }
873
}
874
}
875
&:drop(active) { // FIXME: untested
877
box-shadow: none;
878
// button.combo { @extend %button_basic:drop(active); }
880
}
881
}
882
.linked > combobox > box > button.combo {
884
// the combo is a composite widget so the way we do button linking doesn't
885
// work, special case needed. See
886
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
887
&:dir(ltr),
889
&:dir(rtl) { @extend %linked_middle; } // specificity bump
890
}
891
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
893
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
894
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
895
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
897
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
898
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
899
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
900
%combo_flat {
902
border-radius: 0;
903
background-image: none;
904
font-weight: inherit;
905
@include entry(flat-normal);
907
&:hover { box-shadow: inset 0 -2px $fill_color; }
909
&:checked {
911
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
912
$primary_color 100%,
913
transparent 0%)
914
0 0 2 / 0 0 2px;
915
}
916
&:disabled { color: $disabled_fg_color; }
918
}
919
/************
922
* Toolbars *
923
************/
924
toolbar {
925
-GtkWidget-window-dragging: true;
926
padding: $container_padding / 2;
927
background-color: $bg_color;
928
button { @extend %button_basic.flat; }
930
// on OSD
932
.osd & { background-color: transparent; }
933
// stand-alone OSD toolbars
935
&.osd {
936
transition: $shadow_transition;
937
padding: $container_padding;
938
border-radius: 2px;
939
box-shadow: $shadow_2, inset 0 1px $highlight_color;
940
background-color: $base_color;
941
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
943
&.left,
945
&.right,
946
&.top,
947
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
948
}
949
// toolbar separators
951
&.horizontal separator { margin: $container_padding / 2; }
952
&.vertical separator { margin: $container_padding / 2; }
953
&:not(.inline-toolbar):not(.osd) {
955
scale,
956
entry,
957
spinbutton,
958
button { margin: $container_padding / 2; }
959
.linked entry,
961
.linked spinbutton,
962
.linked button {
963
&:not(:first-child) { margin-left: 0; }
964
&:not(:last-child) { margin-right: 0; }
965
}
966
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
968
}
969
}
970
//searchbar, location-bar & inline-toolbar
972
.inline-toolbar {
973
padding: $container_padding;
974
border-style: solid;
975
border-width: 0 1px 1px;
976
border-color: $border_color;
977
background-color: $alt_base_color;
978
}
979
searchbar,
981
.location-bar {
982
padding: $container_padding;
983
border-style: solid;
984
border-width: 0 0 1px;
985
border-color: $border_color;
986
background-color: $bg_color;
987
background-clip: border-box;
988
}
989
/***************
992
* Header bars *
993
***************/
994
%titlebar,
995
headerbar {
996
transition: background-color $shorter_duration $deceleration_curve;
997
min-height: $large_size;
998
padding: 0 $container_padding;
999
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1000
background-color: $titlebar_bg_color;
1001
color: $titlebar_fg_color;
1002
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
1004
&:backdrop {
1006
color: $secondary_titlebar_fg_color;
1007
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
1009
}
1010
.title {
1012
transition: $longer_transition;
1013
padding: 0 12px;
1014
font-weight: bold;
1015
}
1016
.subtitle {
1018
transition: $longer_transition;
1019
padding: 0 12px;
1020
font-size: smaller;
1021
@extend .dim-label;
1023
}
1024
button:not(.suggested-action):not(.destructive-action) {
1026
@extend %button_basic.flat;
1027
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1029
$titlebar_indicator_color 0%,
1030
transparent 0%)
1031
0 0 0 / 0 0 0px;
1032
&:checked {
1034
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1035
$titlebar_indicator_color 100%,
1036
transparent 0%)
1037
0 0 2 / 0 0 2px;
1038
&, &:disabled { background-color: transparent; }
1040
}
1041
}
1042
button.suggested-action, button.destructive-action {
1044
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1045
}
1046
&.selection-mode {
1048
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1049
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1050
transition: background-color 0.00001s $longer_duration;
1051
animation: header_ripple_effect $longer_duration $deceleration_curve;
1052
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1053
background-color: $primary_color;
1054
color: $inverse_fg_color;
1055
&:backdrop {
1057
color: $secondary_inverse_fg_color;
1058
}
1059
.subtitle:link { @extend *:link:selected; }
1061
button:not(.suggested-action):not(.destructive-action) {
1063
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1064
currentColor 0%,
1065
transparent 0%)
1066
0 0 0 / 0 0 0px;
1067
color: currentColor;
1068
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1070
&:checked {
1072
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1073
currentColor 100%,
1074
transparent 0%)
1075
0 0 2 / 0 0 2px;
1076
color: currentColor;
1077
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1079
}
1080
}
1081
.selection-menu {
1083
padding-left: 16px;
1084
padding-right: 16px;
1085
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1087
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1089
}
1090
}
1091
.fullscreen &,
1093
.tiled &,
1094
.maximized & {
1095
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1096
box-shadow: $shadow_1;
1097
}
1098
&.default-decoration {
1100
min-height: $small_size;
1101
padding: $container_padding;
1102
box-shadow: inset 0 1px $titlebar_highlight_color;
1103
.fullscreen &,
1105
.tiled &,
1106
.maximized & { box-shadow: none; }
1107
button.titlebutton {
1109
min-height: $small_size;
1110
min-width: $small_size;
1111
margin: 0;
1112
padding: 0;
1113
}
1114
// workaround for non-animatable buttons
1116
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1117
}
1118
.solid-csd & {
1120
&:dir(rtl), &:dir(ltr) { // specificity bump
1121
margin-left: -2px;
1122
margin-right: -2px;
1123
margin-top: -2px;
1124
// border-radius: 0;
1125
box-shadow: inset 0 1px $titlebar_highlight_color;
1126
}
1127
}
1128
}
1129
headerbar {
1131
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1132
entry,
1133
spinbutton,
1134
// separator,
1135
button {
1136
margin-top: $container_padding;
1137
margin-bottom: $container_padding;
1138
}
1139
switch {
1141
margin-top: $container_padding * 2;
1142
margin-bottom: $container_padding * 2;
1143
}
1144
}
1145
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1147
border-top-left-radius: 2px;
1148
border-top-right-radius: 2px;
1149
}
1150
headerbar { // headerbar border rounding
1152
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1153
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1154
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1156
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1158
&:first-child, &:last-child {
1159
border-top-left-radius: 2px;
1160
border-top-right-radius: 2px;
1161
}
1162
}
1163
}
1164
.titlebar:not(headerbar) {
1166
window.csd > & {
1167
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1168
padding: 0;
1169
background-color: transparent;
1170
background-image: none;
1171
border-style: none;
1172
box-shadow: none;
1173
}
1174
> separator {
1176
background-color: $titlebar_bg_color;
1177
background-image: image($border_color);
1178
}
1179
@extend %titlebar;
1181
}
1182
/************
1185
* Pathbars *
1186
************/
1187
%pathbar_button,
1188
.path-bar button {
1189
padding-left: ($medium_size - 24px) / 2;
1190
padding-right: ($medium_size - 24px) / 2;
1191
label:not(:only-child) {
1193
&:first-child { margin-left: 4px; }
1194
&:last-child { margin-right: 4px; }
1196
}
1197
&.slider-button {
1199
padding-left: (24px - 16px) / 2;
1200
padding-right: (24px - 16px) / 2;
1201
}
1202
:not(headerbar) & {
1204
@extend %flat_button;
1205
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1207
$primary_color 0%,
1208
transparent 0%)
1209
0 0 0 / 0 0 0px;
1210
border-radius: 2px;
1211
&:checked {
1213
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1214
$primary_color 100%,
1215
transparent 0%)
1216
0 0 2 / 0 0 2px;
1217
&, &:disabled { background-color: transparent; }
1219
}
1220
}
1221
}
1222
/**************
1225
* Tree Views *
1226
**************/
1227
treeview.view {
1228
@at-root * {
1229
-GtkTreeView-horizontal-separator: 4;
1230
-GtkTreeView-grid-line-width: 1;
1231
-GtkTreeView-grid-line-pattern: '';
1232
-GtkTreeView-tree-line-width: 1;
1233
-GtkTreeView-tree-line-pattern: '';
1234
-GtkTreeView-expander-size: 16;
1235
}
1236
border-left-color: $fill_color; // this is actually the tree lines color,
1238
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1239
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1241
&:hover, &:active, &:selected { border-radius: 0; }
1243
&.separator {
1245
min-height: 1px + 2px * 2;
1246
color: $border_color;
1247
}
1248
&:drop(active) {
1250
border-style: solid none;
1251
border-width: 1px;
1252
border-color: $accent_color;
1253
&.after { border-top-style: none; }
1255
&.before { border-bottom-style: none; }
1257
}
1258
&.expander {
1260
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1261
-gtk-icon-transform: rotate(-90deg);
1262
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1264
&:checked { -gtk-icon-transform: unset; }
1266
color: $secondary_fg_color;
1268
&:hover, &:active { color: $fg_color; }
1270
&:disabled { color: $disabled_secondary_fg_color; }
1272
&:selected {
1274
color: $secondary_inverse_fg_color;
1275
&:hover, &:active { color: $inverse_fg_color; }
1277
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1279
}
1280
}
1281
&.progressbar { // progress bar in treeviews
1283
border-style: none none solid;
1284
border-width: $bar_size;
1285
border-color: $primary_color;
1286
box-shadow: none;
1287
background-color: transparent;
1288
&:selected { border-color: currentColor; }
1290
}
1291
&.trough { // progress bar trough in treeviews
1293
border-style: none none solid;
1294
border-width: $bar_size;
1295
border-color: scale-alpha($primary_color, $lower_opacity);
1296
box-shadow: none;
1297
background-color: transparent;
1298
&:selected { border-color: $fill_color; }
1300
}
1301
header {
1303
button {
1304
@extend row.activatable;
1305
padding: 2px 6px;
1307
border-style: none solid solid none;
1308
border-width: 1px;
1309
border-color: $border_color;
1310
border-radius: 0;
1311
background-clip: border-box;
1312
&, &:hover, &:active { box-shadow: none; }
1314
&, &:disabled { background-color: $base_color; }
1316
&:last-child { border-right-style: none; }
1318
}
1319
}
1320
button.dnd,
1322
header.button.dnd { // for treeview-like derive widgets
1323
padding: 2px 6px;
1324
border-style: none solid solid;
1325
border-width: 1px;
1326
border-color: $border_color;
1327
border-radius: 0;
1328
box-shadow: none;
1329
background-color: $base_color;
1330
background-clip: border-box;
1331
color: $primary_color;
1332
}
1333
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1335
}
1336
/*********
1339
* Menus *
1340
*********/
1341
menubar,
1342
.menubar {
1343
-GtkWidget-window-dragging: true;
1344
padding: 0;
1345
// box-shadow: inset 0 -1px $border_color;
1346
background-color: $titlebar_bg_color;
1347
> menuitem {
1349
transition: $shorter_transition;
1350
min-height: 20px;
1351
padding: 4px 8px;
1352
color: $secondary_titlebar_fg_color;
1353
&:hover { //Seems like it :hover even with keyboard focus
1355
transition: none;
1356
background-color: $semi_fill_color;
1357
color: $titlebar_fg_color;
1358
}
1359
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1361
}
1362
}
1363
.csd.popup { border-radius: 2px; }
1365
menu,
1367
.menu,
1368
.context-menu {
1369
margin: 4px 0;
1370
padding: 4px 0;
1371
box-shadow: inset 0 1px $highlight_color;
1372
background-color: $base_color;
1373
border: 1px solid $border_color; // adds borders in a non composited env
1374
.csd & {
1376
border: none; // axes borders in a composited env
1377
border-radius: 2px;
1378
}
1379
menuitem {
1381
transition: $shorter_transition;
1382
min-height: 20px;
1383
min-width: 40px;
1384
padding: 4px 8px;
1385
font: initial;
1386
text-shadow: none;
1387
&:hover {
1389
transition: none;
1390
background-color: $semi_fill_color;
1391
}
1392
&:disabled { color: $disabled_fg_color; }
1394
// submenu indicators
1396
arrow {
1397
min-height: 16px;
1398
min-width: 16px;
1399
&:dir(ltr) {
1401
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1402
margin-left: 8px;
1403
}
1404
&:dir(rtl) {
1406
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1407
margin-right: 8px;
1408
}
1409
}
1410
// avoids labels color being overridden, see
1412
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1413
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1414
}
1415
// overflow arrows
1417
> arrow {
1418
min-height: 16px;
1419
min-width: 16px;
1420
padding: 4px;
1421
border-radius: 0;
1422
background-color: $base_color;
1423
color: $secondary_fg_color;
1424
&.top {
1426
margin-top: -4px;
1427
border-bottom: 1px solid $border_color;
1428
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1429
}
1430
&.bottom {
1432
margin-bottom: -4px;
1433
border-top: 1px solid $border_color;
1434
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1435
}
1436
&:hover {
1438
background-image: image($semi_fill_color);
1439
color: $fg_color;
1440
}
1441
&:disabled {
1443
border-color: transparent;
1444
background-color: transparent;
1445
color: transparent;
1446
// color: $disabled_secondary_fg_color;
1447
}
1448
}
1449
separator { margin: 4px 0; }
1451
}
1452
menuitem {
1454
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1455
check,
1457
radio {
1458
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1459
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1460
}
1461
}
1462
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1464
// Electron/Atom render all translucent colors in opaque colors.
1465
// It's a very critical issue for this theme and should be fixed by upstream...
1466
.popup:not(.csd) menu {
1467
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1468
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1469
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1470
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1471
menuitem {
1473
color: $opaque_fg_color;
1474
&:hover { background-color: $opaque_semi_fill_color; }
1476
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1478
}
1479
// TODO: not working this, where/how i can set the accelerators?
1481
accelerator { color: $opaque_tertiary_fg_color; }
1482
}
1483
/************
1486
* Popovers *
1487
************/
1488
popover.background {
1489
transition: $shadow_transition;
1490
padding: 2px;
1491
box-shadow: $shadow_2; // TODO: this should really have a highlight
1492
background-color: $lighter_bg_color;
1493
&:backdrop { box-shadow: $shadow_1; }
1495
&, .csd & {
1497
border-style: solid;
1498
border-width: 1px;
1499
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1500
border-radius: 2px + 1px;
1501
}
1502
> stack { margin: -4px; } // remove extra padding from menu style popovers
1504
> toolbar { margin: -2px; }
1506
> list,
1508
> .view,
1509
> toolbar {
1510
border-style: none;
1511
box-shadow: none;
1512
background-color: transparent;
1513
}
1514
&.touch-selection,
1516
&.magnifier,
1517
&.osd { @extend %osd; }
1518
// entry { @extend %entry.flat; }
1520
// button.combo { @extend %combo_flat; }
1522
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1524
&.menu button,
1526
button.model {
1527
@extend %simple_flat_button;
1528
min-height: 32px;
1530
padding: 0 8px;
1531
border-radius: 2px;
1532
&:checked { @extend %selected_items; }
1534
}
1535
separator { margin: 4px 0; }
1537
list separator { margin: 0; }
1539
}
1540
/*************
1542
* Notebooks *
1543
*************/
1544
notebook {
1545
> header {
1546
border-width: 1px;
1547
border-color: $border_color;
1548
background-color: $bg_color;
1549
background-clip: border-box;
1550
&.top {
1552
border-bottom-style: solid;
1553
> tabs {
1554
margin-bottom: -1px;
1555
> tab {
1556
&:hover { box-shadow: inset 0 -2px $fill_color; }
1558
&:checked { box-shadow: inset 0 -2px $primary_color; }
1560
}
1561
}
1562
}
1563
&.bottom {
1565
border-top-style: solid;
1566
> tabs {
1567
margin-top: -1px;
1568
> tab {
1569
&:hover { box-shadow: inset 0 2px $fill_color; }
1571
&:checked { box-shadow: inset 0 2px $primary_color; }
1573
}
1574
}
1575
}
1576
&.left {
1578
border-right-style: solid;
1579
> tabs {
1580
margin-right: -1px;
1581
> tab {
1582
&:hover { box-shadow: inset -2px 0 $fill_color; }
1584
&:checked { box-shadow: inset -2px 0 $primary_color; }
1586
}
1587
}
1588
}
1589
&.right {
1591
border-left-style: solid;
1592
> tabs {
1593
margin-left: -1px;
1594
> tab {
1595
&:hover { box-shadow: inset 2px 0 $fill_color; }
1597
&:checked { box-shadow: inset 2px 0 $primary_color; }
1599
}
1600
}
1601
}
1602
&.top > tabs > arrow {
1604
@extend %notebook_vert_arrows;
1605
border-top-style: none;
1607
}
1608
&.bottom > tabs > arrow {
1610
@extend %notebook_vert_arrows;
1611
border-bottom-style: none;
1613
}
1614
@at-root %notebook_vert_arrows {
1616
padding-left: 4px;
1617
padding-right: 4px;
1618
&.down {
1620
margin-left: -8px;
1621
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1622
}
1623
&.up {
1625
margin-right: -8px;
1626
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1627
}
1628
}
1629
&.left > tabs > arrow {
1631
@extend %notebook_horz_arrows;
1632
border-left-style: none;
1634
}
1635
&.right > tabs > arrow {
1637
@extend %notebook_horz_arrows;
1638
border-right-style: none;
1640
}
1641
@at-root %notebook_horz_arrows {
1643
padding-top: 4px;
1644
padding-bottom: 4px;
1645
&.down {
1647
margin-top: -8px;
1648
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1649
}
1650
&.up {
1652
margin-bottom: -8px;
1653
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1654
}
1655
}
1656
> tabs > arrow {
1658
@extend %simple_flat_button;
1659
min-height: 16px;
1661
min-width: 16px;
1662
border-radius: 0;
1663
}
1664
tab {
1666
transition: $longer_transition,
1667
background-size 0,
1668
background-image 0;
1669
min-height: $small_size;
1670
min-width: $small_size;
1671
padding: $container_padding 12px;
1672
outline-offset: -6px;
1674
border-width: 1px; // for reorderable tabs
1676
border-color: transparent; //
1677
background-image: radial-gradient(circle farthest-corner at center,
1679
$primary_color 10%,
1680
transparent 0%);
1681
background-repeat: no-repeat;
1682
background-position: center;
1683
background-size: 0% 0%;
1684
color: $secondary_fg_color;
1686
font-weight: 500;
1687
&:hover {
1689
color: $fg_color;
1690
&.reorderable-page {
1692
border-color: $border_color;
1693
background-color: $alt_base_color;
1694
}
1695
}
1696
&:disabled { color: $disabled_secondary_fg_color; }
1698
&:checked {
1700
transition: $longer_transition,
1701
background-size $longer_duration $deceleration_curve,
1702
background-image $longer_duration + $ripple_duration $deceleration_curve;
1703
background-image: radial-gradient(circle farthest-corner at center,
1704
transparent 10%,
1705
transparent 0%);
1706
background-size: 1000% 1000%;
1707
color: $fg_color;
1708
&:disabled { color: $disabled_fg_color; }
1710
&.reorderable-page {
1712
border-color: $border_color;
1713
background-color: $base_color;
1714
}
1715
}
1716
// colors the button like the label, overridden otherwise
1718
button.flat {
1719
@extend %small_button;
1720
&:last-child {
1722
margin-left: $container_padding;
1723
margin-right: $container_padding - 12px;
1724
}
1725
&:first-child {
1727
margin-left: $container_padding - 12px;
1728
margin-right: $container_padding;
1729
}
1730
}
1731
}
1732
&.top,
1734
&.bottom {
1735
tabs {
1736
padding-left: 8px;
1737
padding-right: 8px;
1738
&:not(:only-child) {
1740
&:first-child { margin-left: 0; }
1741
&:last-child { margin-right: 0; }
1742
}
1743
tab {
1745
&.reorderable-page {
1746
margin: 0 -1px;
1747
border-style: none solid;
1748
}
1749
}
1750
}
1751
}
1752
&.left,
1754
&.right {
1755
tabs {
1756
padding-top: 8px;
1757
padding-bottom: 8px;
1758
&:not(:only-child) {
1760
&:first-child { margin-top: 0; }
1761
&:last-child { margin-bottom: 0; }
1762
}
1763
tab {
1765
&.reorderable-page {
1766
margin: -1px 0;
1767
border-style: solid none;
1768
}
1769
}
1770
}
1771
}
1772
}
1773
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1775
background-color: $base_color;
1776
entry:not(.search),
1778
spinbutton:not(.vertical) { @extend %entry.flat; }
1779
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1781
button.combo { @extend %combo_flat; }
1783
}
1784
}
1785
/**************
1788
* Scrollbars *
1789
**************/
1790
scrollbar {
1791
$_slider_min_length: 24px;
1792
// disable steppers
1794
@at-root * {
1795
-GtkScrollbar-has-backward-stepper: false;
1796
-GtkScrollbar-has-forward-stepper: false;
1797
}
1798
transition: $longer_transition;
1800
background-color: $base_color;
1801
background-clip: $extra_background_clip;
1802
// scrollbar border
1804
&.top { border-bottom: 1px solid $border_color; }
1805
&.bottom { border-top: 1px solid $border_color; }
1806
&.left { border-right: 1px solid $border_color; }
1807
&.right { border-left: 1px solid $border_color; }
1808
// slider
1810
slider {
1811
transition: $shorter_transition, margin 0, border-width 0;
1812
min-width: 8px;
1813
min-height: 8px;
1814
border: 4px solid transparent;
1815
border-radius: $circular_radius;
1816
background-clip: padding-box;
1817
background-color: $tertiary_fg_color;
1818
&:hover { background-color: $secondary_fg_color; }
1820
&:active { background-color: $fg_color; }
1822
&:disabled { background-color: $disabled_tertiary_fg_color; }
1824
}
1825
&.fine-tune {
1827
slider {
1828
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1829
min-width: 4px;
1830
min-height: 4px;
1831
}
1832
&.horizontal slider { margin: 2px 0; }
1834
&.vertical slider { margin: 0 2px; }
1836
}
1837
&.overlay-indicator {
1839
&:not(.dragging):not(.hovering) {
1840
border-color: transparent;
1841
background-color: transparent;
1842
slider {
1844
min-width: 4px;
1845
min-height: 4px;
1846
margin: 4px - 1px;
1847
border: 1px solid scale-alpha($base_color, $lower_opacity);
1848
}
1849
button {
1851
min-width: 4px;
1852
min-height: 4px;
1853
margin: 4px - 1px;
1854
border: 1px solid scale-alpha($base_color, $lower_opacity);
1855
border-radius: $circular_radius;
1856
background-color: $tertiary_fg_color;
1857
background-clip: padding-box;
1858
-gtk-icon-source: none;
1859
&:disabled { background-color: $disabled_tertiary_fg_color; }
1861
}
1862
&.horizontal {
1864
slider { min-width: $_slider_min_length; }
1865
button { min-width: 8px; }
1867
}
1868
&.vertical {
1870
slider { min-height: $_slider_min_length; }
1871
button { min-height: 8px; }
1873
}
1874
}
1875
&.dragging,
1877
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1878
}
1879
&.horizontal slider { min-width: $_slider_min_length; }
1881
&.vertical slider { min-height: $_slider_min_length; }
1883
// button styling
1885
button {
1886
@extend %simple_flat_button;
1887
min-width: 16px;
1889
min-height: 16px;
1890
padding: 0;
1891
border-radius: 0;
1892
}
1893
// button icons
1895
&.vertical {
1896
button {
1897
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1898
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1900
}
1901
}
1902
&.horizontal {
1904
button {
1905
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1906
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1908
}
1909
}
1910
}
1911
/**********
1914
* Switch *
1915
**********/
1916
switch {
1917
transition: $longer_transition;
1918
margin: $container_padding 0;
1919
border: 4px solid transparent;
1920
border-radius: $circular_radius;
1921
background-color: $fill_color;
1922
background-clip: padding-box;
1923
font-size: 0;
1924
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1926
&:checked {
1928
background-color: scale-alpha($accent_color, 0.5);
1929
&:disabled {
1931
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1932
color: $disabled_fg_color;
1933
}
1934
}
1935
slider {
1937
@include entry(normal);
1938
transition: $longer_transition, $shadow_transition, margin 0;
1940
min-width: $small_size;
1941
min-height: $small_size;
1942
margin: -4px 0 -4px -4px;
1943
border-radius: $circular_radius;
1944
-gtk-outline-radius: $circular_radius;
1945
}
1946
&:hover slider { @include entry(focus); }
1948
&:checked slider {
1950
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1951
animation: needs_attention $longer_duration $deceleration_curve;
1952
margin: -4px -4px -4px 0;
1953
background-color: $accent_color;
1954
color: $inverse_fg_color;
1955
}
1956
&:disabled slider { @include entry(disabled); }
1958
&:checked:disabled slider { animation: none; }
1960
row:selected & {
1962
}
1963
}
1964
/*************************
1967
* Check and Radio items *
1968
*************************/
1969
// draw regular check and radio items using our PNG assets
1970
// all assets are rendered from assets.svg. never add pngs directly
1971
//selection-mode
1973
@each $s, $as in ('', '-unchecked'),
1974
(':checked', '-checked') {
1975
.view.content-view.check#{$s}:not(list) {
1976
margin: 8px;
1977
box-shadow: none;
1978
background-color: transparent;
1979
background-image: none;
1980
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1981
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1982
-gtk-icon-shadow: $shadow_1;
1983
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1985
}
1986
}
1987
checkbutton.text-button,
1989
radiobutton.text-button {
1990
// this is for a nice focus on check and radios text
1991
padding: 2px;
1992
outline-offset: 0;
1993
label:not(:only-child) { margin: 0 4px; }
1995
}
1996
check,
1998
radio {
1999
min-height: 24px;
2000
min-width: 24px;
2001
margin: -($large_size - 24px) / 2;
2002
padding: ($large_size - 24px) / 2;
2003
@extend %simple_flat_button;
2005
@extend %circular_button;
2007
&:checked, &:indeterminate { color: $accent_color; }
2009
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2011
// &:only-child { margin: -12px; }
2013
row &:not(:checked):not(:indeterminate) {
2015
color: gtkalpha(currentColor, $secondary_opacity);
2016
&:hover, &:active { color: currentColor; }
2018
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
2020
}
2021
menu menuitem & {
2023
transition: none;
2024
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2025
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2027
&, &:hover, &:disabled {
2029
box-shadow: none;
2030
// color: inherit;
2031
// animation: none;
2032
}
2033
}
2034
}
2035
%check,
2037
check {
2038
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2039
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.png"))); }
2040
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2042
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.png"))); }
2043
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2045
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.png"))); }
2046
}
2047
$radio_indicator: 10px / $large_size / 2;
2049
$radio_radius_slice: #{$large_size / 2px};
2050
$radio_radius_width: #{$large_size / 2};
2051
%radio,
2053
radio {
2054
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2055
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.png"))); }
2056
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2058
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.png"))); }
2059
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2061
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.png"))); }
2062
border-image: -gtk-gradient(radial,
2064
center center, 0,
2065
center center, 0.001,
2066
to($accent_color),
2067
to(transparent))
2068
$radio_radius_slice / $radio_radius_width;
2069
&:checked {
2071
border-image: -gtk-gradient(radial,
2072
center center, 0,
2073
center center, $radio_indicator,
2074
to($accent_color),
2075
to(transparent))
2076
$radio_radius_slice / $radio_radius_width;
2077
}
2078
&:checked:disabled {
2080
border-image: -gtk-gradient(radial,
2081
center center, 0,
2082
center center, $radio_indicator,
2083
to(scale-alpha($accent_color, $disabled_opacity)),
2084
to(transparent))
2085
$radio_radius_slice / $radio_radius_width;
2086
}
2087
&:indeterminate:checked {
2089
border-image: -gtk-gradient(radial,
2090
center center, 0,
2091
center center, 0.001,
2092
to($accent_color),
2093
to(transparent))
2094
$radio_radius_slice / $radio_radius_width;
2095
}
2096
}
2097
// let's animate things
2099
@keyframes check_check {
2100
from { -gtk-icon-transform: rotate(90deg); }
2101
to { -gtk-icon-transform: unset; }
2102
}
2103
@keyframes check_radio { // FIXME: cannot animate border-image
2105
from {
2106
border-image: -gtk-gradient(radial,
2107
center center, 0,
2108
center center, 0.001,
2109
to($accent_color),
2110
to(transparent))
2111
$radio_radius_slice / $radio_radius_width;
2112
}
2113
to {
2115
border-image: -gtk-gradient(radial,
2116
center center, 0,
2117
center center, $radio_indicator,
2118
to($accent_color),
2119
to(transparent))
2120
$radio_radius_slice / $radio_radius_width;
2121
}
2122
}
2123
@keyframes check_indeterminate {
2125
from { -gtk-icon-transform: unset; }
2126
50% { -gtk-icon-transform: scale(0, 1); }
2127
to { -gtk-icon-transform: unset; }
2128
}
2129
%check_checked,
2131
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2132
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2134
// %radio_checked,
2136
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2137
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2139
%indeterminate_checked,
2141
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2142
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2144
// no animations in menus
2146
menu menuitem {
2147
check:not(:indeterminate):checked,
2148
radio:not(:indeterminate):checked,
2149
check:indeterminate:checked,
2150
radio:indeterminate:checked { animation: none; }
2151
}
2152
treeview.view check,
2154
treeview.view radio {
2155
padding: 0;
2156
&:hover {
2158
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2159
&:disabled { box-shadow: none; }
2161
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2163
}
2164
& {
2166
color: $secondary_fg_color;
2167
&:hover, &:active { color: $fg_color; }
2169
&:disabled { color: $disabled_secondary_fg_color; }
2171
&:checked, &:indeterminate { color: $accent_color; }
2173
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2175
}
2176
&:selected {
2178
color: $secondary_inverse_fg_color;
2179
&:hover, &:active { color: $inverse_fg_color; }
2181
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2183
&:checked, &:indeterminate { color: $accent_color; }
2185
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2187
}
2188
}
2189
treeview.view radio:checked {
2191
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2192
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.png")));
2193
border-image: none;
2194
}
2195
/************
2198
* GtkScale *
2199
************/
2200
scale {
2201
// sizing
2202
$_marks_lenght: 8px;
2203
$_marks_distance: 8px;
2204
$slider_size: 24px;
2206
$marks_slider_size: 30px;
2207
$slider_margin: -($slider_size - $bar_size) / 2;
2209
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2210
$color_slider_margin: -($slider_size) / 2;
2212
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2213
min-height: $medium_size - $slider_size;
2215
min-width: $medium_size - $slider_size;
2216
padding: ($slider_size / 2);
2217
* { transition: $longer_transition; }
2219
// the slider is inside the trough, so to have make it bigger there's a negative margin
2221
slider {
2222
min-height: $slider_size;
2223
min-width: $slider_size;
2224
margin: $slider_margin;
2225
}
2226
// the backing bit
2228
trough {
2229
outline-offset: 2px;
2230
background-color: $fill_color;
2231
&:disabled { color: $disabled_fg_color; }
2233
}
2234
// the colored part of the backing bit
2236
highlight {
2237
background-color: $accent_color;
2238
&:disabled { background-color: transparent; }
2240
}
2241
// this is another differently styled part of the backing bit, the most relevant use case is for example
2243
// in media player to indicate how much video stream as been cached
2244
fill {
2245
background-color: $fill_color;
2246
&:disabled { background-color: transparent; }
2248
}
2249
slider {
2251
transition: all $shorter_duration $standard_curve;
2252
// border-radius: 100%;
2253
// background-color: $accent_color;
2254
background-repeat: no-repeat;
2255
background-position: center;
2256
@each $s, $as in ('', ''),
2258
(':disabled', '-disabled') {
2259
&#{$s} {
2260
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2261
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2263
}
2264
}
2265
background-size: calc(100% - 8px);
2267
&:hover { background-size: calc(100% - 4px); }
2269
&:active { background-size: calc(100% - 0px); }
2271
}
2272
// click-and-hold the slider to activate
2274
&.fine-tune {
2275
// to make the slider shrink in fine-tune mode
2276
slider { background-size: calc(100% - 12px); }
2277
}
2278
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2280
marks {
2282
color: $fill_color;
2283
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2285
(bottom, bottom, top),
2286
(top, left, right),
2287
(bottom, right, left) {
2288
&.#{$marks_class} {
2289
margin-#{$marks_margin}: $_marks_distance;
2290
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2291
}
2292
}
2293
}
2294
&.horizontal {
2296
indicator {
2297
min-height: $_marks_lenght;
2298
min-width: 1px;
2299
}
2300
}
2301
&.vertical {
2303
indicator {
2304
min-height: 1px;
2305
min-width: $_marks_lenght;
2306
}
2307
}
2308
// *WARNING* scale with marks madness following
2310
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2312
('vertical', 'vert') {
2313
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2314
('marks-after', 'marks-after:not(.marks-before)') {
2315
&.#{$dir_class}.#{$marks_class} {
2316
slider {
2317
@each $state, $state_infix in ('', ''),
2318
(':disabled', '-disabled') {
2319
&#{$state} {
2320
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2321
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2323
}
2324
}
2325
@if $dir_class == 'horizontal' {
2327
min-height: $marks_slider_size;
2328
min-width: $slider_size;
2329
@if $marks_infix == 'marks-before' {
2331
margin-top: $marks_slider_margin;
2332
background-position: center calc(100% - 4px);
2334
&:hover { background-position: center calc(100% - 2px); }
2336
&:active { background-position: center calc(100% - 0px); }
2338
}
2339
@if $marks_infix == 'marks-after' {
2341
margin-bottom: $marks_slider_margin;
2342
background-position: center calc(4px);
2344
&:hover { background-position: center calc(2px); }
2346
&:active { background-position: center calc(0px); }
2348
}
2349
}
2350
@if $dir_class == 'vertical' {
2352
min-height: $slider_size;
2353
min-width: $marks_slider_size;
2354
@if $marks_infix == 'marks-before' {
2356
margin-left: $marks_slider_margin;
2357
background-position: calc(4px) center;
2359
&:hover { background-position: calc(2px) center; }
2361
&:active { background-position: calc(0px) center; }
2363
}
2364
@if $marks_infix == 'marks-after' {
2366
margin-right: $marks_slider_margin;
2367
background-position: calc(100% - 4px) center;
2369
&:hover { background-position: calc(100% - 2px) center; }
2371
&:active { background-position: calc(100% - 0px) center; }
2373
}
2374
}
2375
}
2376
&.fine-tune slider {
2378
@if $dir_class == 'horizontal' {
2379
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2380
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2382
}
2383
@if $dir_class == 'vertical' {
2385
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2386
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2388
}
2389
}
2390
}
2391
}
2392
}
2393
&.color {
2395
min-height: 0;
2396
min-width: 0;
2397
&.horizontal {
2399
padding: 0 0 12px 0;
2400
slider {
2402
&:dir(ltr), &:dir(rtl) { // specificity bump
2403
margin-bottom: $color_slider_margin;
2404
margin-top: $color_marks_slider_margin;
2405
}
2406
}
2407
}
2408
&.vertical {
2410
&:dir(ltr) {
2411
padding: 0 0 0 12px;
2412
slider {
2414
margin-left: $color_slider_margin;
2415
margin-right: $color_marks_slider_margin;
2416
}
2417
}
2418
&:dir(rtl) {
2420
padding: 0 12px 0 0;
2421
slider {
2423
margin-right: $color_slider_margin;
2424
margin-left: $color_marks_slider_margin;
2425
}
2426
}
2427
}
2428
}
2429
}
2430
/*****************
2433
* Progress bars *
2434
*****************/
2435
progressbar {
2436
// sizing
2437
&.horizontal {
2438
trough,
2439
progress { min-height: $bar_size; }
2440
}
2441
&.vertical {
2443
trough,
2444
progress { min-width: $bar_size; }
2445
}
2446
// FIXME: insensitive state missing and some other state should be set probably
2448
color: $tertiary_fg_color;
2449
font-size: smaller;
2450
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2452
progress { background-color: $primary_color; }
2454
&.osd { // progressbar.osd used for epiphany page loading progress
2456
// min-width: $bar_size;
2457
// min-height: $bar_size;
2458
// background-color: transparent;
2459
// trough { background-color: transparent; }
2461
progress {
2463
}
2464
}
2465
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2467
}
2468
/*************
2471
* Level Bar *
2472
*************/
2473
levelbar {
2474
block {
2475
min-width: $medium_size;
2476
min-height: $bar_size;
2477
}
2478
&.vertical block {
2480
min-width: $bar_size;
2481
min-height: $medium_size;
2482
}
2483
trough {
2485
padding: 2px;
2486
border-radius: 2px;
2487
@include entry(normal);
2489
&:disabled { @include entry(disabled); }
2491
}
2492
&.horizontal.discrete block { margin: 0 1px; }
2494
&.vertical.discrete block { margin: 1px 0; }
2496
&.horizontal.discrete trough { padding: 2px 1px; }
2498
&.vertical.discrete trough { padding: 1px 2px; }
2500
block {
2502
&.low {
2503
background-color: $warning_color;
2504
}
2505
&.high,
2507
&:not(.empty) {
2508
background-color: $primary_color;
2509
}
2510
&.full {
2512
background-color: $success_color;
2513
}
2514
&.empty {
2516
background-color: $fill_color;
2517
color: $disabled_fg_color;
2518
}
2519
}
2520
}
2521
/****************
2524
* Print dialog *
2525
*****************/
2526
printdialog {
2527
paper {
2528
padding: 0;
2529
border: 1px solid $border_color;
2530
background: $base_color;
2531
color: $fg_color;
2532
}
2533
.dialog-action-box { margin: 12px; }
2535
}
2536
/**********
2539
* Frames *
2540
**********/
2541
frame > border,
2542
.frame {
2543
margin: 0;
2544
padding: 0;
2545
border: 1px solid $border_color;
2546
border-radius: 0;
2547
box-shadow: none;
2548
&.flat { border-style: none; }
2550
}
2551
actionbar > revealer > box {
2553
padding: $container_padding;
2554
border-top: 1px solid $border_color;
2555
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2557
}
2558
scrolledwindow {
2560
viewport.frame { // avoid double borders when viewport inside scrolled window
2561
border-style: none;
2562
}
2563
// This is used when content is touch-dragged past boundaries.
2565
// draws a box on top of the content, the size changes programmatically.
2566
@at-root overshoot {
2567
&.top { @include overshoot(top); }
2568
&.bottom { @include overshoot(bottom); }
2570
&.left { @include overshoot(left); }
2572
&.right { @include overshoot(right); }
2574
}
2575
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2577
@at-root undershoot {
2578
&.top { @include undershoot(top); }
2579
&.bottom { @include undershoot(bottom); }
2581
&.left { @include undershoot(left); }
2583
&.right { @include undershoot(right); }
2585
}
2586
@at-root junction { // the small square between two scrollbars
2588
border-style: solid none none solid;
2589
border-width: 1px;
2590
border-color: $border_color;
2591
background-color: $base_color;
2592
&:dir(rtl) { border-style: solid solid none none; }
2594
}
2595
}
2596
//vbox and hbox separators
2598
separator {
2599
min-width: 1px;
2600
min-height: 1px;
2601
background: $border_color;
2602
}
2603
/*********
2606
* Lists *
2607
*********/
2608
list {
2609
border-color: $border_color;
2610
background-color: $base_color;
2611
row { padding: 2px; }
2613
}
2614
// FIXME
2616
$row_transition: $longer_transition, background-color 0, color 0;
2617
row {
2619
&.activatable {
2620
transition: $row_transition,
2621
background-size $ripple_duration $deceleration_curve,
2622
background-image $ripple_duration * 2 $deceleration_curve;
2623
box-shadow: inset 0 0 0 9999px transparent;
2624
background-image: radial-gradient(circle farthest-corner at center,
2625
transparent 10%,
2626
transparent 0%);
2627
background-repeat: no-repeat;
2628
background-position: center;
2629
background-size: 1000% 1000%;
2630
&:hover {
2632
transition: $row_transition,
2633
box-shadow 0,
2634
background-size $ripple_duration $deceleration_curve,
2635
background-image $ripple_duration * 2 $deceleration_curve;
2636
box-shadow: inset 0 0 0 9999px $row_fill_color;
2637
}
2638
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2640
&:active {
2641
transition: $row_transition,
2642
background-size 0,
2643
background-image 0;
2644
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2645
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2646
background-image: radial-gradient(circle farthest-corner at center,
2647
$semi_fill_color 10%,
2648
transparent 0%);
2649
background-size: 0% 0%;
2650
}
2651
}
2652
&:selected { @extend %selected_items; }
2654
}
2655
/*********************
2658
* App Notifications *
2659
*********************/
2660
.app-notification {
2661
@extend %osd;
2662
@extend toolbar.osd;
2664
margin: 8px;
2666
button { @extend %button_basic.flat; }
2668
&.frame,
2670
border { border-style: none; }
2671
}
2672
/*************
2675
* Expanders *
2676
*************/
2677
expander {
2678
arrow {
2679
transition: all $shorter_duration $standard_curve;
2680
min-width: 16px;
2681
min-height: 16px;
2682
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2683
-gtk-icon-transform: rotate(-90deg);
2684
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2686
&:checked { -gtk-icon-transform: unset; }
2688
color: $secondary_fg_color;
2690
&:hover, &:active { color: $fg_color; }
2692
&:disabled { color: $disabled_secondary_fg_color; }
2694
&:selected {
2696
color: $secondary_inverse_fg_color;
2697
&:hover, &:active { color: $inverse_fg_color; }
2699
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2701
}
2702
}
2703
}
2704
/************
2707
* Calendar *
2708
***********/
2709
calendar {
2710
padding: 1px;
2711
border: 1px solid $border_color;
2712
color: $fg_color;
2713
&:disabled { color: $disabled_fg_color; }
2715
&:selected {
2717
@extend %selected_items;
2718
border-radius: 2px + 1px;
2720
}
2721
&.header {
2723
border-style: none none solid;
2724
border-radius: 0;
2725
}
2726
&.button { @extend %simple_flat_button; }
2728
&.highlight {
2730
color: gtkalpha(currentColor, $tertiary_opacity);
2731
font-weight: 500;
2732
}
2733
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2735
}
2736
/***********
2739
* Dialogs *
2740
***********/
2741
messagedialog { // Message Dialog styling
2742
&.background { background-color: $lighter_bg_color; }
2743
.titlebar {
2745
min-height: $small_size;
2746
border-style: none;
2747
box-shadow: inset 0 1px $highlight_color;
2748
background-color: $lighter_bg_color;
2749
color: $fg_color;
2750
&:backdrop { color: $secondary_fg_color; }
2752
}
2753
&.csd { // rounded bottom border styling for csd version
2755
&.background {
2756
// bigger radius for better antialiasing
2757
border-bottom-left-radius: 2px;
2758
border-bottom-right-radius: 2px;
2759
}
2760
.dialog-action-area button {
2762
padding: 8px 16px;
2763
border-top: 1px solid $border_color;
2764
border-radius: 0;
2765
@extend %simple_flat_button;
2767
&:first-child { border-bottom-left-radius: 2px; }
2769
&:last-child { border-bottom-right-radius: 2px; }
2771
}
2772
}
2773
}
2774
filechooser {
2776
.dialog-action-box { border-top: 1px solid $border_color; }
2777
#pathbarbox {
2779
border-bottom: 1px solid $border_color;
2780
background-color: $bg_color;
2781
}
2782
}
2783
filechooserbutton:drop(active) {
2785
box-shadow: none;
2786
}
2787
/***********
2790
* Sidebar *
2791
***********/
2792
.sidebar {
2793
border-style: none;
2794
background-color: $lighter_bg_color;
2795
@at-root %sidebar_left,
2797
&:dir(ltr),
2798
&.left,
2799
&.left:dir(rtl) {
2800
border-right: 1px solid $border_color;
2801
border-left-style: none;
2802
}
2803
@at-root %sidebar_right
2805
&:dir(rtl),
2806
&.right {
2807
border-left: 1px solid $border_color;
2808
border-right-style: none;
2809
}
2810
list { background-color: transparent; }
2812
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2814
}
2815
stacksidebar {
2817
&.sidebar {
2818
&:dir(ltr),
2819
&.left,
2820
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2821
&:dir(rtl),
2823
&.right { list { @extend %sidebar_right; }}
2824
}
2825
row {
2827
padding: 10px 4px;
2828
> label {
2830
padding-left: 6px;
2831
padding-right: 6px;
2832
}
2833
&.needs-attention > label { @extend %needs_attention; }
2835
}
2836
}
2837
/****************
2840
* File chooser *
2841
****************/
2842
placessidebar {
2843
> viewport.frame { border-style: none; }
2844
list { padding: (4px - 3px) 0 4px; }
2846
row {
2848
// Needs overriding of the GtkListBoxRow padding
2849
min-height: 32px;
2850
margin: -1px 0; // Remove unknown margins
2851
padding: 0;
2852
// Using margins/padding directly in the SidebarRow
2854
// will make the animation of the new bookmark row jump
2855
> revealer { padding: 0 12px; }
2856
&:selected { color: $inverse_fg_color; }
2858
&:disabled { color: $disabled_fg_color; }
2860
image.sidebar-icon {
2862
opacity: $tertiary_opacity; // dim the device icons
2863
&:dir(ltr) { padding-right: 8px; }
2865
&:dir(rtl) { padding-left: 8px; }
2866
}
2867
label.sidebar-label {
2869
&:dir(ltr) { padding-right: 2px; }
2870
&:dir(rtl) { padding-left: 2px; }
2871
}
2872
@at-root button.sidebar-button {
2874
@extend %simple_flat_button;
2875
@extend %small_button;
2877
row:selected & {
2879
}
2880
}
2881
&.sidebar-placeholder-row {
2883
min-height: 2px;
2884
padding: 0 8px;
2885
background-image: image($accent_color);
2886
background-clip: content-box;
2887
}
2888
&.sidebar-new-bookmark-row { color: $accent_color; }
2890
&:drop(active):not(:disabled) {
2892
box-shadow: inset 0 0 0 2px $accent_color;
2893
&:selected {
2895
// background-color: $accent_color;
2896
// color: $inverse_fg_color;
2897
}
2898
}
2899
}
2900
}
2901
placesview {
2903
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2904
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2906
// this selects the "connect to server" label
2908
> actionbar > revealer > box > label {
2909
padding-left: 8px;
2910
padding-right: 8px;
2911
}
2912
}
2913
/*********
2916
* Paned *
2917
*********/
2918
paned {
2919
> separator {
2920
min-width: 1px;
2921
min-height: 1px;
2922
-gtk-icon-source: none; // defeats the ugly default handle decoration
2923
border-style: none; // just to be sure
2924
background-color: transparent;
2925
// workaround, using background istead of a border since the border will get rendered twice (?)
2926
background-image: image($border_color);
2927
background-size: 1px 1px;
2928
background-clip: content-box; // avoids borders image being rendered twice (?)
2929
&.wide {
2931
min-width: 6px;
2932
min-height: 6px;
2933
background-color: $bg_color;
2934
background-image: image($border_color), image($border_color);
2935
background-size: 1px 1px, 1px 1px;
2936
}
2937
}
2938
&.horizontal > separator {
2940
background-repeat: repeat-y;
2941
&:dir(ltr) {
2943
margin: 0 -8px 0 0;
2944
padding: 0 8px 0 0;
2945
background-position: left;
2946
}
2947
&:dir(rtl) {
2949
margin: 0 0 0 -8px;
2950
padding: 0 0 0 8px;
2951
background-position: right;
2952
}
2953
&.wide {
2955
margin: 0;
2956
padding: 0;
2957
background-repeat: repeat-y, repeat-y;
2958
background-position: left, right;
2959
}
2960
}
2961
&.vertical > separator {
2963
margin: 0 0 -8px 0;
2964
padding: 0 0 8px 0;
2965
background-repeat: repeat-x;
2966
background-position: top;
2967
&.wide {
2969
margin: 0;
2970
padding: 0;
2971
background-repeat: repeat-x, repeat-x;
2972
background-position: bottom, top;
2973
}
2974
}
2975
}
2976
/**************
2979
* GtkInfoBar *
2980
**************/
2981
infobar {
2982
border-style: none;
2983
&.info { background-color: $info_bg_color; }
2985
&.question { background-color: $question_bg_color; }
2987
&.warning { background-color: $warning_bg_color; }
2989
&.error { background-color: $error_bg_color; }
2991
&.info,
2993
&.question,
2994
&.warning,
2995
&.error {
2996
> label, & { color: $inverse_fg_color; }
2997
button { @extend %button_selected; }
2999
selection {}
3001
*:link { @extend %link_selected; }
3003
}
3004
}
3005
/************
3008
* Tooltips *
3009
************/
3010
tooltip {
3011
&.background {
3012
// background-color needs to be set this way otherwise it gets drawn twice
3013
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3014
box-shadow: inset 0 1px $highlight_color;
3015
background-color: scale-alpha($base_color, $higher_opacity);
3016
}
3017
// @extend %osd;
3019
// padding: 4px; /* not working */
3021
border-radius: 2px;
3022
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3023
&:not(.csd) {
3025
border: 1px solid $border_color;
3026
border-radius: 2px + 1px;
3027
background-clip: $extra_background_clip;
3028
}
3029
// FIXME: we need a border or tooltips vanish on black background.
3031
decoration { background-color: transparent; }
3032
label {
3034
// tooltip label has already 6px margins
3035
min-height: 32px - 6px * 2;
3036
padding: 0 8px - 6px;
3037
}
3038
* {
3040
// workaround for Eclipse.
3041
// do not include any declaration here.
3042
// padding: 0;
3043
// background-color: transparent;
3044
// color: inherit;
3045
}
3046
}
3047
/*****************
3050
* Color Chooser *
3051
*****************/
3052
colorswatch {
3053
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3054
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3055
// applied to the overlay box.
3056
// base color corners rounding
3058
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3059
// sports a bigger radius.
3060
// nth-child is needed by the custom color strip.
3061
&.top {
3063
border-top-left-radius: $material_radius + 0.5px;
3064
border-top-right-radius: $material_radius + 0.5px;
3065
overlay {
3067
border-top-left-radius: $material_radius;
3068
border-top-right-radius: $material_radius;
3069
}
3070
}
3071
&.bottom {
3073
border-bottom-left-radius: $material_radius + 0.5px;
3074
border-bottom-right-radius: $material_radius + 0.5px;
3075
overlay {
3077
border-bottom-left-radius: $material_radius;
3078
border-bottom-right-radius: $material_radius;
3079
}
3080
}
3081
&.left,
3083
&:first-child:not(.top) {
3084
border-top-left-radius: $material_radius + 0.5px;
3085
border-bottom-left-radius: $material_radius + 0.5px;
3086
overlay {
3088
border-top-left-radius: $material_radius;
3089
border-bottom-left-radius: $material_radius;
3090
}
3091
}
3092
&.right,
3094
&:last-child:not(.bottom) {
3095
border-top-right-radius: $material_radius + 0.5px;
3096
border-bottom-right-radius: $material_radius + 0.5px;
3097
overlay {
3099
border-top-right-radius: $material_radius;
3100
border-bottom-right-radius: $material_radius;
3101
}
3102
}
3103
&.dark overlay { color: $light_fg_color; }
3105
&.light overlay { color: $dark_fg_color; }
3107
&.dark { color: $light_fg_color; } // for focus ring
3109
&.light { color: $dark_fg_color; } // for focus ring
3111
&:drop(active) {
3113
box-shadow: none;
3114
&.light overlay {
3116
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3117
}
3118
&.dark overlay {
3120
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3121
}
3122
}
3123
overlay {
3125
transition: $shadow_transition;
3126
box-shadow: $shadow_1;
3127
&:hover { box-shadow: $shadow_2; }
3129
}
3130
&#add-color-button {
3132
border-radius: $material_radius $material_radius 0 0;
3133
color: $light_fg_color; // for focus ring
3134
&:only-child { border-radius: $material_radius; }
3136
overlay {
3138
background-image: linear-gradient(to right,
3139
$error_bg_color 25%,
3140
$warning_bg_color 25%, $warning_bg_color 50%,
3141
$info_bg_color 50%, $info_bg_color 75%,
3142
$question_bg_color 75%);
3143
color: $light_fg_color;
3144
}
3145
}
3146
&:disabled {
3148
opacity: $disabled_opacity;
3149
overlay { box-shadow: none; }
3151
}
3152
row:selected & {
3154
}
3155
&#editor-color-sample {
3157
border-radius: $material_radius + 0.5px;
3158
overlay { border-radius: $material_radius; }
3160
// overlay:hover { box-shadow: $shadow_1; }
3162
}
3163
}
3164
// colorscale popup
3166
colorchooser .popover.osd {
3167
transition: $shadow_transition;
3168
border-radius: 2px;
3169
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3170
background-color: $base_color;
3171
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3173
spinbutton:not(.vertical) { @extend %entry.flat; }
3175
}
3176
/********
3179
* Misc *
3180
********/
3181
//content view (grid/list)
3182
.content-view {
3183
background-color: $bg_color;
3184
// &:hover { -gtk-icon-effect: highlight; }
3186
rubberband, .rubberband { @extend rubberband; }
3188
}
3189
.scale-popup {
3191
.osd & { @extend %osd; }
3192
.osd & button.flat { //FIXME: quick hack, redo properly
3194
}
3195
button { // +/- buttons on GtkVolumeButton popup
3197
}
3198
}
3199
/**********************
3202
* Window Decorations *
3203
*********************/
3204
decoration {
3205
transition: $shadow_transition;
3206
border-radius: 2px 2px 0 0;
3207
box-shadow: $shadow_4, 0 16px 16px transparent;
3208
// FIXME rationalize shadows
3210
// this is used for the resize cursor area
3212
margin: 8px;
3213
&:backdrop {
3215
// the transparent shadow here is to enforce that the shadow extents don't
3216
// change when we go to backdrop, to prevent jumping windows.
3217
// The biggest shadow should be in the same order then in the active state
3218
// or the jumping will happen during the transition.
3219
box-shadow: $shadow_2, 0 16px 16px transparent;
3220
}
3221
.maximized &,
3223
.fullscreen &,
3224
.tiled & { border-radius: 0; }
3225
.popup & { box-shadow: none; }
3227
// server-side decorations as used by mutter
3229
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3230
.csd.popup & {
3232
border-radius: 2px;
3233
box-shadow: $shadow_2;
3234
}
3235
tooltip.csd & {
3237
border-radius: 2px;
3238
box-shadow: $shadow_2;
3239
}
3240
messagedialog.csd & {
3242
border-radius: 2px;
3243
// box-shadow: $shadow_4, 0 16px 16px transparent;
3244
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3246
}
3247
.solid-csd & {
3249
margin: 0;
3250
padding: 4px;
3251
// border: solid 1px $border_color;
3252
// border-radius: 0;
3253
box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3254
// background-color: $border_color;
3255
}
3256
}
3257
// Window Close button
3259
button.titlebutton {
3260
// @extend %simple_flat_button;
3261
@extend %circular_button;
3263
.selection-mode & {
3265
}
3266
}
3267
// catch all extend :)
3270
%selected_items {
3272
background-color: $primary_color;
3273
@at-root %nobg_selected_items, & {
3275
color: $inverse_fg_color;
3276
&:disabled { color: $disabled_inverse_fg_color; }
3278
}
3279
}
3280
.monospace { font-family: monospace; }
3282
/**********************
3285
* Touch Copy & Paste *
3286
*********************/
3287
//touch selection handlebars for the Popover.osd above
3288
cursor-handle {
3289
border-radius: $circular_radius;
3290
background-color: $accent_color;
3291
background-image: none;
3292
&.top:dir(ltr), &.bottom:dir(rtl) {
3294
padding-left: 6px;
3295
border-top-right-radius: 0;
3296
}
3297
&.bottom:dir(ltr), &.top:dir(rtl) {
3299
padding-right: 6px;
3300
border-top-left-radius: 0;
3301
}
3302
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3304
-GtkWidget-text-handle-width: 24;
3305
-GtkWidget-text-handle-height: 30;
3306
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3308
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3309
url('#{$_url}@2.png'));
3310
}
3311
}
3312
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3314
// shortcut window keys
3316
.keycap {
3317
min-width: 28px - 8px * 2;
3318
min-height: 28px - 2px;
3319
margin-top: 2px;
3320
padding-bottom: 2px;
3321
padding-left: 8px;
3322
padding-right: 8px;
3323
border: solid 1px $border_color;
3325
border-radius: 2px + 1px;
3326
box-shadow: inset 0 -2px $border_color;
3327
background-color: $base_color;
3328
color: $fg_color;
3329
font-size: smaller;
3330
}
3331
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3333
transition: $longer_transition;
3334
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3335
caret-color: $accent_color;
3336
}
3337
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3339
stackswitcher button.circular,
3341
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3342
min-width: $medium_size;
3343
min-height: $medium_size;
3344
padding: 0;
3345
}
3346