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
}
1116
.solid-csd & {
1118
&:dir(rtl), &:dir(ltr) { // specificity bump
1119
margin-left: -2px;
1120
margin-right: -2px;
1121
margin-top: -2px;
1122
// border-radius: 0;
1123
box-shadow: inset 0 1px $titlebar_highlight_color;
1124
}
1125
}
1126
}
1127
headerbar {
1129
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1130
entry,
1131
spinbutton,
1132
// separator,
1133
button {
1134
margin-top: $container_padding;
1135
margin-bottom: $container_padding;
1136
}
1137
switch {
1139
margin-top: $container_padding * 2;
1140
margin-bottom: $container_padding * 2;
1141
}
1142
}
1143
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1145
border-top-left-radius: 2px;
1146
border-top-right-radius: 2px;
1147
}
1148
headerbar { // headerbar border rounding
1150
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1151
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1152
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1154
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1156
&:first-child, &:last-child {
1157
border-top-left-radius: 2px;
1158
border-top-right-radius: 2px;
1159
}
1160
}
1161
}
1162
.titlebar:not(headerbar) {
1164
window.csd > & {
1165
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1166
padding: 0;
1167
background-color: transparent;
1168
background-image: none;
1169
border-style: none;
1170
box-shadow: none;
1171
}
1172
> separator {
1174
background-color: $titlebar_bg_color;
1175
background-image: image($border_color);
1176
}
1177
@extend %titlebar;
1179
}
1180
/************
1183
* Pathbars *
1184
************/
1185
%pathbar_button,
1186
.path-bar button {
1187
padding-left: ($medium_size - 24px) / 2;
1188
padding-right: ($medium_size - 24px) / 2;
1189
label:not(:only-child) {
1191
&:first-child { margin-left: 4px; }
1192
&:last-child { margin-right: 4px; }
1194
}
1195
&.slider-button {
1197
padding-left: (24px - 16px) / 2;
1198
padding-right: (24px - 16px) / 2;
1199
}
1200
:not(headerbar) & {
1202
@extend %flat_button;
1203
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1205
$primary_color 0%,
1206
transparent 0%)
1207
0 0 0 / 0 0 0px;
1208
border-radius: 2px;
1209
&:checked {
1211
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1212
$primary_color 100%,
1213
transparent 0%)
1214
0 0 2 / 0 0 2px;
1215
&, &:disabled { background-color: transparent; }
1217
}
1218
}
1219
}
1220
/**************
1223
* Tree Views *
1224
**************/
1225
treeview.view {
1226
@at-root * {
1227
-GtkTreeView-horizontal-separator: 4;
1228
-GtkTreeView-grid-line-width: 1;
1229
-GtkTreeView-grid-line-pattern: '';
1230
-GtkTreeView-tree-line-width: 1;
1231
-GtkTreeView-tree-line-pattern: '';
1232
-GtkTreeView-expander-size: 16;
1233
}
1234
border-left-color: $fill_color; // this is actually the tree lines color,
1236
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1237
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1239
&:hover, &:active, &:selected { border-radius: 0; }
1241
&.separator {
1243
min-height: 1px + 2px * 2;
1244
color: $border_color;
1245
}
1246
&:drop(active) {
1248
border-style: solid none;
1249
border-width: 1px;
1250
border-color: $accent_color;
1251
&.after { border-top-style: none; }
1253
&.before { border-bottom-style: none; }
1255
}
1256
&.expander {
1258
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1259
-gtk-icon-transform: rotate(-90deg);
1260
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1262
&:checked { -gtk-icon-transform: unset; }
1264
color: $secondary_fg_color;
1266
&:hover, &:active { color: $fg_color; }
1268
&:disabled { color: $disabled_secondary_fg_color; }
1270
&:selected {
1272
color: $secondary_inverse_fg_color;
1273
&:hover, &:active { color: $inverse_fg_color; }
1275
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1277
}
1278
}
1279
&.progressbar { // progress bar in treeviews
1281
border-style: none none solid;
1282
border-width: $bar_size;
1283
border-color: $primary_color;
1284
box-shadow: none;
1285
background-color: transparent;
1286
&:selected { border-color: currentColor; }
1288
}
1289
&.trough { // progress bar trough in treeviews
1291
border-style: none none solid;
1292
border-width: $bar_size;
1293
border-color: scale-alpha($primary_color, $lower_opacity);
1294
box-shadow: none;
1295
background-color: transparent;
1296
&:selected { border-color: $fill_color; }
1298
}
1299
header {
1301
button {
1302
@extend row.activatable;
1303
padding: 2px 6px;
1305
border-style: none solid solid none;
1306
border-width: 1px;
1307
border-color: $border_color;
1308
border-radius: 0;
1309
background-clip: border-box;
1310
&, &:hover, &:active { box-shadow: none; }
1312
&, &:disabled { background-color: $base_color; }
1314
&:last-child { border-right-style: none; }
1316
}
1317
}
1318
button.dnd,
1320
header.button.dnd { // for treeview-like derive widgets
1321
padding: 2px 6px;
1322
border-style: none solid solid;
1323
border-width: 1px;
1324
border-color: $border_color;
1325
border-radius: 0;
1326
box-shadow: none;
1327
background-color: $base_color;
1328
background-clip: border-box;
1329
color: $primary_color;
1330
}
1331
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1333
}
1334
/*********
1337
* Menus *
1338
*********/
1339
menubar,
1340
.menubar {
1341
-GtkWidget-window-dragging: true;
1342
padding: 0;
1343
// box-shadow: inset 0 -1px $border_color;
1344
background-color: $titlebar_bg_color;
1345
> menuitem {
1347
transition: $shorter_transition;
1348
min-height: 20px;
1349
padding: 4px 8px;
1350
color: $secondary_titlebar_fg_color;
1351
&:hover { //Seems like it :hover even with keyboard focus
1353
transition: none;
1354
background-color: $semi_fill_color;
1355
color: $titlebar_fg_color;
1356
}
1357
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1359
}
1360
}
1361
.csd.popup { border-radius: 2px; }
1363
menu,
1365
.menu,
1366
.context-menu {
1367
margin: 4px 0;
1368
padding: 4px 0;
1369
box-shadow: inset 0 1px $highlight_color;
1370
background-color: $base_color;
1371
border: 1px solid $border_color; // adds borders in a non composited env
1372
.csd & {
1374
border: none; // axes borders in a composited env
1375
border-radius: 2px;
1376
}
1377
menuitem {
1379
transition: $shorter_transition;
1380
min-height: 20px;
1381
min-width: 40px;
1382
padding: 4px 8px;
1383
font: initial;
1384
text-shadow: none;
1385
&:hover {
1387
transition: none;
1388
background-color: $semi_fill_color;
1389
}
1390
&:disabled { color: $disabled_fg_color; }
1392
// submenu indicators
1394
arrow {
1395
min-height: 16px;
1396
min-width: 16px;
1397
&:dir(ltr) {
1399
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1400
margin-left: 8px;
1401
}
1402
&:dir(rtl) {
1404
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1405
margin-right: 8px;
1406
}
1407
}
1408
// avoids labels color being overridden, see
1410
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1411
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1412
}
1413
// overflow arrows
1415
> arrow {
1416
min-height: 16px;
1417
min-width: 16px;
1418
padding: 4px;
1419
border-radius: 0;
1420
background-color: $base_color;
1421
color: $secondary_fg_color;
1422
&.top {
1424
margin-top: -4px;
1425
border-bottom: 1px solid $border_color;
1426
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1427
}
1428
&.bottom {
1430
margin-bottom: -4px;
1431
border-top: 1px solid $border_color;
1432
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1433
}
1434
&:hover {
1436
background-image: image($semi_fill_color);
1437
color: $fg_color;
1438
}
1439
&:disabled {
1441
border-color: transparent;
1442
background-color: transparent;
1443
color: transparent;
1444
// color: $disabled_secondary_fg_color;
1445
}
1446
}
1447
separator { margin: 4px 0; }
1449
}
1450
menuitem {
1452
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1453
check,
1455
radio {
1456
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1457
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1458
}
1459
}
1460
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1462
// Electron/Atom render all translucent colors in opaque colors.
1463
// It's a very critical issue for this theme and should be fixed by upstream...
1464
.popup:not(.csd) menu {
1465
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1466
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1467
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1468
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1469
menuitem {
1471
color: $opaque_fg_color;
1472
&:hover { background-color: $opaque_semi_fill_color; }
1474
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1476
}
1477
// TODO: not working this, where/how i can set the accelerators?
1479
accelerator { color: $opaque_tertiary_fg_color; }
1480
}
1481
/************
1484
* Popovers *
1485
************/
1486
popover.background {
1487
transition: $shadow_transition;
1488
padding: 2px;
1489
box-shadow: $shadow_2; // TODO: this should really have a highlight
1490
background-color: $lighter_bg_color;
1491
&:backdrop { box-shadow: $shadow_1; }
1493
&, .csd & {
1495
border-style: solid;
1496
border-width: 1px;
1497
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1498
border-radius: 2px + 1px;
1499
}
1500
> stack { margin: -4px; } // remove extra padding from menu style popovers
1502
> toolbar { margin: -2px; }
1504
> list,
1506
> .view,
1507
> toolbar {
1508
border-style: none;
1509
box-shadow: none;
1510
background-color: transparent;
1511
}
1512
&.touch-selection,
1514
&.magnifier,
1515
&.osd { @extend %osd; }
1516
// entry { @extend %entry.flat; }
1518
// button.combo { @extend %combo_flat; }
1520
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1522
&.menu button,
1524
button.model {
1525
@extend %simple_flat_button;
1526
min-height: 32px;
1528
padding: 0 8px;
1529
border-radius: 2px;
1530
&:checked { @extend %selected_items; }
1532
}
1533
separator { margin: 4px 0; }
1535
list separator { margin: 0; }
1537
}
1538
/*************
1540
* Notebooks *
1541
*************/
1542
notebook {
1543
> header {
1544
border-width: 1px;
1545
border-color: $border_color;
1546
background-color: $bg_color;
1547
background-clip: border-box;
1548
&.top {
1550
border-bottom-style: solid;
1551
> tabs {
1552
margin-bottom: -1px;
1553
> tab {
1554
&:hover { box-shadow: inset 0 -2px $fill_color; }
1556
&:checked { box-shadow: inset 0 -2px $primary_color; }
1558
}
1559
}
1560
}
1561
&.bottom {
1563
border-top-style: solid;
1564
> tabs {
1565
margin-top: -1px;
1566
> tab {
1567
&:hover { box-shadow: inset 0 2px $fill_color; }
1569
&:checked { box-shadow: inset 0 2px $primary_color; }
1571
}
1572
}
1573
}
1574
&.left {
1576
border-right-style: solid;
1577
> tabs {
1578
margin-right: -1px;
1579
> tab {
1580
&:hover { box-shadow: inset -2px 0 $fill_color; }
1582
&:checked { box-shadow: inset -2px 0 $primary_color; }
1584
}
1585
}
1586
}
1587
&.right {
1589
border-left-style: solid;
1590
> tabs {
1591
margin-left: -1px;
1592
> tab {
1593
&:hover { box-shadow: inset 2px 0 $fill_color; }
1595
&:checked { box-shadow: inset 2px 0 $primary_color; }
1597
}
1598
}
1599
}
1600
&.top > tabs > arrow {
1602
@extend %notebook_vert_arrows;
1603
border-top-style: none;
1605
}
1606
&.bottom > tabs > arrow {
1608
@extend %notebook_vert_arrows;
1609
border-bottom-style: none;
1611
}
1612
@at-root %notebook_vert_arrows {
1614
padding-left: 4px;
1615
padding-right: 4px;
1616
&.down {
1618
margin-left: -8px;
1619
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1620
}
1621
&.up {
1623
margin-right: -8px;
1624
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1625
}
1626
}
1627
&.left > tabs > arrow {
1629
@extend %notebook_horz_arrows;
1630
border-left-style: none;
1632
}
1633
&.right > tabs > arrow {
1635
@extend %notebook_horz_arrows;
1636
border-right-style: none;
1638
}
1639
@at-root %notebook_horz_arrows {
1641
padding-top: 4px;
1642
padding-bottom: 4px;
1643
&.down {
1645
margin-top: -8px;
1646
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1647
}
1648
&.up {
1650
margin-bottom: -8px;
1651
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1652
}
1653
}
1654
> tabs > arrow {
1656
@extend %simple_flat_button;
1657
min-height: 16px;
1659
min-width: 16px;
1660
border-radius: 0;
1661
}
1662
tab {
1664
transition: $longer_transition,
1665
background-size 0,
1666
background-image 0;
1667
min-height: $small_size;
1668
min-width: $small_size;
1669
padding: $container_padding 12px;
1670
outline-offset: -6px;
1672
border-width: 1px; // for reorderable tabs
1674
border-color: transparent; //
1675
background-image: radial-gradient(circle farthest-corner at center,
1677
$primary_color 10%,
1678
transparent 0%);
1679
background-repeat: no-repeat;
1680
background-position: center;
1681
background-size: 0% 0%;
1682
color: $secondary_fg_color;
1684
font-weight: 500;
1685
&:hover {
1687
color: $fg_color;
1688
&.reorderable-page {
1690
border-color: $border_color;
1691
background-color: $alt_base_color;
1692
}
1693
}
1694
&:disabled { color: $disabled_secondary_fg_color; }
1696
&:checked {
1698
transition: $longer_transition,
1699
background-size $longer_duration $deceleration_curve,
1700
background-image $longer_duration + $ripple_duration $deceleration_curve;
1701
background-image: radial-gradient(circle farthest-corner at center,
1702
transparent 10%,
1703
transparent 0%);
1704
background-size: 1000% 1000%;
1705
color: $fg_color;
1706
&:disabled { color: $disabled_fg_color; }
1708
&.reorderable-page {
1710
border-color: $border_color;
1711
background-color: $base_color;
1712
}
1713
}
1714
// colors the button like the label, overridden otherwise
1716
button.flat {
1717
@extend %small_button;
1718
&:last-child {
1720
margin-left: $container_padding;
1721
margin-right: $container_padding - 12px;
1722
}
1723
&:first-child {
1725
margin-left: $container_padding - 12px;
1726
margin-right: $container_padding;
1727
}
1728
}
1729
}
1730
&.top,
1732
&.bottom {
1733
tabs {
1734
padding-left: 8px;
1735
padding-right: 8px;
1736
&:not(:only-child) {
1738
&:first-child { margin-left: 0; }
1739
&:last-child { margin-right: 0; }
1740
}
1741
tab {
1743
&.reorderable-page {
1744
margin: 0 -1px;
1745
border-style: none solid;
1746
}
1747
}
1748
}
1749
}
1750
&.left,
1752
&.right {
1753
tabs {
1754
padding-top: 8px;
1755
padding-bottom: 8px;
1756
&:not(:only-child) {
1758
&:first-child { margin-top: 0; }
1759
&:last-child { margin-bottom: 0; }
1760
}
1761
tab {
1763
&.reorderable-page {
1764
margin: -1px 0;
1765
border-style: solid none;
1766
}
1767
}
1768
}
1769
}
1770
}
1771
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1773
background-color: $base_color;
1774
entry:not(.search),
1776
spinbutton:not(.vertical) { @extend %entry.flat; }
1777
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1779
button.combo { @extend %combo_flat; }
1781
}
1782
}
1783
/**************
1786
* Scrollbars *
1787
**************/
1788
scrollbar {
1789
$_slider_min_length: 24px;
1790
// disable steppers
1792
@at-root * {
1793
-GtkScrollbar-has-backward-stepper: false;
1794
-GtkScrollbar-has-forward-stepper: false;
1795
}
1796
transition: $longer_transition;
1798
background-color: $base_color;
1799
background-clip: $extra_background_clip;
1800
// scrollbar border
1802
&.top { border-bottom: 1px solid $border_color; }
1803
&.bottom { border-top: 1px solid $border_color; }
1804
&.left { border-right: 1px solid $border_color; }
1805
&.right { border-left: 1px solid $border_color; }
1806
// slider
1808
slider {
1809
transition: $shorter_transition, margin 0, border-width 0;
1810
min-width: 8px;
1811
min-height: 8px;
1812
border: 4px solid transparent;
1813
border-radius: $circular_radius;
1814
background-clip: padding-box;
1815
background-color: $tertiary_fg_color;
1816
&:hover { background-color: $secondary_fg_color; }
1818
&:active { background-color: $fg_color; }
1820
&:disabled { background-color: $disabled_tertiary_fg_color; }
1822
}
1823
&.fine-tune {
1825
slider {
1826
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1827
min-width: 4px;
1828
min-height: 4px;
1829
}
1830
&.horizontal slider { margin: 2px 0; }
1832
&.vertical slider { margin: 0 2px; }
1834
}
1835
&.overlay-indicator {
1837
&:not(.dragging):not(.hovering) {
1838
border-color: transparent;
1839
background-color: transparent;
1840
slider {
1842
min-width: 4px;
1843
min-height: 4px;
1844
margin: 4px - 1px;
1845
border: 1px solid scale-alpha($base_color, $lower_opacity);
1846
}
1847
button {
1849
min-width: 4px;
1850
min-height: 4px;
1851
margin: 4px - 1px;
1852
border: 1px solid scale-alpha($base_color, $lower_opacity);
1853
border-radius: $circular_radius;
1854
background-color: $tertiary_fg_color;
1855
background-clip: padding-box;
1856
-gtk-icon-source: none;
1857
&:disabled { background-color: $disabled_tertiary_fg_color; }
1859
}
1860
&.horizontal {
1862
slider { min-width: $_slider_min_length; }
1863
button { min-width: 8px; }
1865
}
1866
&.vertical {
1868
slider { min-height: $_slider_min_length; }
1869
button { min-height: 8px; }
1871
}
1872
}
1873
&.dragging,
1875
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1876
}
1877
&.horizontal slider { min-width: $_slider_min_length; }
1879
&.vertical slider { min-height: $_slider_min_length; }
1881
// button styling
1883
button {
1884
@extend %simple_flat_button;
1885
min-width: 16px;
1887
min-height: 16px;
1888
padding: 0;
1889
border-radius: 0;
1890
}
1891
// button icons
1893
&.vertical {
1894
button {
1895
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1896
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1898
}
1899
}
1900
&.horizontal {
1902
button {
1903
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1904
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1906
}
1907
}
1908
}
1909
/**********
1912
* Switch *
1913
**********/
1914
switch {
1915
transition: $longer_transition;
1916
margin: $container_padding 0;
1917
border: 4px solid transparent;
1918
border-radius: $circular_radius;
1919
background-color: $fill_color;
1920
background-clip: padding-box;
1921
font-size: 0;
1922
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1924
&:checked {
1926
background-color: scale-alpha($accent_color, 0.5);
1927
&:disabled {
1929
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1930
color: $disabled_fg_color;
1931
}
1932
}
1933
slider {
1935
@include entry(normal);
1936
transition: $longer_transition, $shadow_transition, margin 0;
1938
min-width: $small_size;
1939
min-height: $small_size;
1940
margin: -4px 0 -4px -4px;
1941
border-radius: $circular_radius;
1942
-gtk-outline-radius: $circular_radius;
1943
}
1944
&:hover slider { @include entry(focus); }
1946
&:checked slider {
1948
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1949
animation: needs_attention $longer_duration $deceleration_curve;
1950
margin: -4px -4px -4px 0;
1951
background-color: $accent_color;
1952
color: $inverse_fg_color;
1953
}
1954
&:disabled slider { @include entry(disabled); }
1956
&:checked:disabled slider { animation: none; }
1958
row:selected & {
1960
}
1961
}
1962
/*************************
1965
* Check and Radio items *
1966
*************************/
1967
// draw regular check and radio items using our PNG assets
1968
// all assets are rendered from assets.svg. never add pngs directly
1969
//selection-mode
1971
@each $s, $as in ('', '-unchecked'),
1972
(':checked', '-checked') {
1973
.view.content-view.check#{$s}:not(list) {
1974
margin: 8px;
1975
box-shadow: none;
1976
background-color: transparent;
1977
background-image: none;
1978
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1979
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1980
-gtk-icon-shadow: $shadow_1;
1981
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1983
}
1984
}
1985
checkbutton.text-button,
1987
radiobutton.text-button {
1988
// this is for a nice focus on check and radios text
1989
padding: 2px;
1990
outline-offset: 0;
1991
label:not(:only-child) { margin: 0 4px; }
1993
}
1994
check,
1996
radio {
1997
min-height: 24px;
1998
min-width: 24px;
1999
margin: -($large_size - 24px) / 2;
2000
padding: ($large_size - 24px) / 2;
2001
@extend %simple_flat_button;
2003
@extend %circular_button;
2005
&:checked, &:indeterminate { color: $accent_color; }
2007
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2009
// &:only-child { margin: -12px; }
2011
row &:not(:checked):not(:indeterminate) {
2013
color: gtkalpha(currentColor, $secondary_opacity);
2014
&:hover, &:active { color: currentColor; }
2016
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
2018
}
2019
menu menuitem & {
2021
transition: none;
2022
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2023
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2025
&, &:hover, &:disabled {
2027
box-shadow: none;
2028
// color: inherit;
2029
// animation: none;
2030
}
2031
}
2032
}
2033
%check,
2035
check {
2036
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2037
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.png"))); }
2038
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2040
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.png"))); }
2041
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2043
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.png"))); }
2044
}
2045
$radio_indicator: 10px / $large_size / 2;
2047
$radio_radius_slice: #{$large_size / 2px};
2048
$radio_radius_width: #{$large_size / 2};
2049
%radio,
2051
radio {
2052
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2053
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.png"))); }
2054
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2056
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.png"))); }
2057
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2059
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.png"))); }
2060
border-image: -gtk-gradient(radial,
2062
center center, 0,
2063
center center, 0.001,
2064
to($accent_color),
2065
to(transparent))
2066
$radio_radius_slice / $radio_radius_width;
2067
&:checked {
2069
border-image: -gtk-gradient(radial,
2070
center center, 0,
2071
center center, $radio_indicator,
2072
to($accent_color),
2073
to(transparent))
2074
$radio_radius_slice / $radio_radius_width;
2075
}
2076
&:checked:disabled {
2078
border-image: -gtk-gradient(radial,
2079
center center, 0,
2080
center center, $radio_indicator,
2081
to(scale-alpha($accent_color, $disabled_opacity)),
2082
to(transparent))
2083
$radio_radius_slice / $radio_radius_width;
2084
}
2085
&:indeterminate:checked {
2087
border-image: -gtk-gradient(radial,
2088
center center, 0,
2089
center center, 0.001,
2090
to($accent_color),
2091
to(transparent))
2092
$radio_radius_slice / $radio_radius_width;
2093
}
2094
}
2095
// let's animate things
2097
@keyframes check_check {
2098
from { -gtk-icon-transform: rotate(90deg); }
2099
to { -gtk-icon-transform: unset; }
2100
}
2101
@keyframes check_radio { // FIXME: cannot animate border-image
2103
from {
2104
border-image: -gtk-gradient(radial,
2105
center center, 0,
2106
center center, 0.001,
2107
to($accent_color),
2108
to(transparent))
2109
$radio_radius_slice / $radio_radius_width;
2110
}
2111
to {
2113
border-image: -gtk-gradient(radial,
2114
center center, 0,
2115
center center, $radio_indicator,
2116
to($accent_color),
2117
to(transparent))
2118
$radio_radius_slice / $radio_radius_width;
2119
}
2120
}
2121
@keyframes check_indeterminate {
2123
from { -gtk-icon-transform: unset; }
2124
50% { -gtk-icon-transform: scale(0, 1); }
2125
to { -gtk-icon-transform: unset; }
2126
}
2127
%check_checked,
2129
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2130
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2132
// %radio_checked,
2134
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2135
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2137
%indeterminate_checked,
2139
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2140
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2142
// no animations in menus
2144
menu menuitem {
2145
check:not(:indeterminate):checked,
2146
radio:not(:indeterminate):checked,
2147
check:indeterminate:checked,
2148
radio:indeterminate:checked { animation: none; }
2149
}
2150
treeview.view check,
2152
treeview.view radio {
2153
padding: 0;
2154
&:hover {
2156
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2157
&:disabled { box-shadow: none; }
2159
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2161
}
2162
& {
2164
color: $secondary_fg_color;
2165
&:hover, &:active { color: $fg_color; }
2167
&:disabled { color: $disabled_secondary_fg_color; }
2169
&:checked, &:indeterminate { color: $accent_color; }
2171
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2173
}
2174
&:selected {
2176
color: $secondary_inverse_fg_color;
2177
&:hover, &:active { color: $inverse_fg_color; }
2179
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2181
&:checked, &:indeterminate { color: $accent_color; }
2183
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2185
}
2186
}
2187
treeview.view radio:checked {
2189
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2190
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.png")));
2191
border-image: none;
2192
}
2193
/************
2196
* GtkScale *
2197
************/
2198
scale {
2199
// sizing
2200
$_marks_lenght: 8px;
2201
$_marks_distance: 8px;
2202
$slider_size: 24px;
2204
$marks_slider_size: 30px;
2205
$slider_margin: -($slider_size - $bar_size) / 2;
2207
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2208
$color_slider_margin: -($slider_size) / 2;
2210
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2211
min-height: $medium_size - $slider_size;
2213
min-width: $medium_size - $slider_size;
2214
padding: ($slider_size / 2);
2215
* { transition: $longer_transition; }
2217
// the slider is inside the trough, so to have make it bigger there's a negative margin
2219
slider {
2220
min-height: $slider_size;
2221
min-width: $slider_size;
2222
margin: $slider_margin;
2223
}
2224
// the backing bit
2226
trough {
2227
outline-offset: 2px;
2228
background-color: $fill_color;
2229
&:disabled { color: $disabled_fg_color; }
2231
}
2232
// the colored part of the backing bit
2234
highlight {
2235
background-color: $accent_color;
2236
&:disabled { background-color: transparent; }
2238
}
2239
// this is another differently styled part of the backing bit, the most relevant use case is for example
2241
// in media player to indicate how much video stream as been cached
2242
fill {
2243
background-color: $fill_color;
2244
&:disabled { background-color: transparent; }
2246
}
2247
slider {
2249
transition: all $shorter_duration $standard_curve;
2250
// border-radius: 100%;
2251
// background-color: $accent_color;
2252
background-repeat: no-repeat;
2253
background-position: center;
2254
@each $s, $as in ('', ''),
2256
(':disabled', '-disabled') {
2257
&#{$s} {
2258
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2259
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2261
}
2262
}
2263
background-size: calc(100% - 8px);
2265
&:hover { background-size: calc(100% - 4px); }
2267
&:active { background-size: calc(100% - 0px); }
2269
}
2270
// click-and-hold the slider to activate
2272
&.fine-tune {
2273
// to make the slider shrink in fine-tune mode
2274
slider { background-size: calc(100% - 12px); }
2275
}
2276
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2278
marks {
2280
color: $fill_color;
2281
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2283
(bottom, bottom, top),
2284
(top, left, right),
2285
(bottom, right, left) {
2286
&.#{$marks_class} {
2287
margin-#{$marks_margin}: $_marks_distance;
2288
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2289
}
2290
}
2291
}
2292
&.horizontal {
2294
indicator {
2295
min-height: $_marks_lenght;
2296
min-width: 1px;
2297
}
2298
}
2299
&.vertical {
2301
indicator {
2302
min-height: 1px;
2303
min-width: $_marks_lenght;
2304
}
2305
}
2306
// *WARNING* scale with marks madness following
2308
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2310
('vertical', 'vert') {
2311
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2312
('marks-after', 'marks-after:not(.marks-before)') {
2313
&.#{$dir_class}.#{$marks_class} {
2314
slider {
2315
@each $state, $state_infix in ('', ''),
2316
(':disabled', '-disabled') {
2317
&#{$state} {
2318
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2319
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2321
}
2322
}
2323
@if $dir_class == 'horizontal' {
2325
min-height: $marks_slider_size;
2326
min-width: $slider_size;
2327
@if $marks_infix == 'marks-before' {
2329
margin-top: $marks_slider_margin;
2330
background-position: center calc(100% - 4px);
2332
&:hover { background-position: center calc(100% - 2px); }
2334
&:active { background-position: center calc(100% - 0px); }
2336
}
2337
@if $marks_infix == 'marks-after' {
2339
margin-bottom: $marks_slider_margin;
2340
background-position: center calc(4px);
2342
&:hover { background-position: center calc(2px); }
2344
&:active { background-position: center calc(0px); }
2346
}
2347
}
2348
@if $dir_class == 'vertical' {
2350
min-height: $slider_size;
2351
min-width: $marks_slider_size;
2352
@if $marks_infix == 'marks-before' {
2354
margin-left: $marks_slider_margin;
2355
background-position: calc(4px) center;
2357
&:hover { background-position: calc(2px) center; }
2359
&:active { background-position: calc(0px) center; }
2361
}
2362
@if $marks_infix == 'marks-after' {
2364
margin-right: $marks_slider_margin;
2365
background-position: calc(100% - 4px) center;
2367
&:hover { background-position: calc(100% - 2px) center; }
2369
&:active { background-position: calc(100% - 0px) center; }
2371
}
2372
}
2373
}
2374
&.fine-tune slider {
2376
@if $dir_class == 'horizontal' {
2377
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2378
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2380
}
2381
@if $dir_class == 'vertical' {
2383
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2384
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2386
}
2387
}
2388
}
2389
}
2390
}
2391
&.color {
2393
min-height: 0;
2394
min-width: 0;
2395
&.horizontal {
2397
padding: 0 0 12px 0;
2398
slider {
2400
&:dir(ltr), &:dir(rtl) { // specificity bump
2401
margin-bottom: $color_slider_margin;
2402
margin-top: $color_marks_slider_margin;
2403
}
2404
}
2405
}
2406
&.vertical {
2408
&:dir(ltr) {
2409
padding: 0 0 0 12px;
2410
slider {
2412
margin-left: $color_slider_margin;
2413
margin-right: $color_marks_slider_margin;
2414
}
2415
}
2416
&:dir(rtl) {
2418
padding: 0 12px 0 0;
2419
slider {
2421
margin-right: $color_slider_margin;
2422
margin-left: $color_marks_slider_margin;
2423
}
2424
}
2425
}
2426
}
2427
}
2428
/*****************
2431
* Progress bars *
2432
*****************/
2433
progressbar {
2434
// sizing
2435
&.horizontal {
2436
trough,
2437
progress { min-height: $bar_size; }
2438
}
2439
&.vertical {
2441
trough,
2442
progress { min-width: $bar_size; }
2443
}
2444
// FIXME: insensitive state missing and some other state should be set probably
2446
color: $tertiary_fg_color;
2447
font-size: smaller;
2448
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2450
progress { background-color: $primary_color; }
2452
&.osd { // progressbar.osd used for epiphany page loading progress
2454
// min-width: $bar_size;
2455
// min-height: $bar_size;
2456
// background-color: transparent;
2457
// trough { background-color: transparent; }
2459
progress {
2461
}
2462
}
2463
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2465
}
2466
/*************
2469
* Level Bar *
2470
*************/
2471
levelbar {
2472
block {
2473
min-width: $medium_size;
2474
min-height: $bar_size;
2475
}
2476
&.vertical block {
2478
min-width: $bar_size;
2479
min-height: $medium_size;
2480
}
2481
trough {
2483
padding: 2px;
2484
border-radius: 2px;
2485
@include entry(normal);
2487
&:disabled { @include entry(disabled); }
2489
}
2490
&.horizontal.discrete block { margin: 0 1px; }
2492
&.vertical.discrete block { margin: 1px 0; }
2494
&.horizontal.discrete trough { padding: 2px 1px; }
2496
&.vertical.discrete trough { padding: 1px 2px; }
2498
block {
2500
&.low {
2501
background-color: $warning_color;
2502
}
2503
&.high,
2505
&:not(.empty) {
2506
background-color: $primary_color;
2507
}
2508
&.full {
2510
background-color: $success_color;
2511
}
2512
&.empty {
2514
background-color: $fill_color;
2515
color: $disabled_fg_color;
2516
}
2517
}
2518
}
2519
/****************
2522
* Print dialog *
2523
*****************/
2524
printdialog {
2525
paper {
2526
padding: 0;
2527
border: 1px solid $border_color;
2528
background: $base_color;
2529
color: $fg_color;
2530
}
2531
.dialog-action-box { margin: 12px; }
2533
}
2534
/**********
2537
* Frames *
2538
**********/
2539
frame > border,
2540
.frame {
2541
margin: 0;
2542
padding: 0;
2543
border: 1px solid $border_color;
2544
border-radius: 0;
2545
box-shadow: none;
2546
&.flat { border-style: none; }
2548
}
2549
actionbar > revealer > box {
2551
padding: $container_padding;
2552
border-top: 1px solid $border_color;
2553
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2555
}
2556
scrolledwindow {
2558
viewport.frame { // avoid double borders when viewport inside scrolled window
2559
border-style: none;
2560
}
2561
// This is used when content is touch-dragged past boundaries.
2563
// draws a box on top of the content, the size changes programmatically.
2564
@at-root overshoot {
2565
&.top { @include overshoot(top); }
2566
&.bottom { @include overshoot(bottom); }
2568
&.left { @include overshoot(left); }
2570
&.right { @include overshoot(right); }
2572
}
2573
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2575
@at-root undershoot {
2576
&.top { @include undershoot(top); }
2577
&.bottom { @include undershoot(bottom); }
2579
&.left { @include undershoot(left); }
2581
&.right { @include undershoot(right); }
2583
}
2584
@at-root junction { // the small square between two scrollbars
2586
border-style: solid none none solid;
2587
border-width: 1px;
2588
border-color: $border_color;
2589
background-color: $base_color;
2590
&:dir(rtl) { border-style: solid solid none none; }
2592
}
2593
}
2594
//vbox and hbox separators
2596
separator {
2597
min-width: 1px;
2598
min-height: 1px;
2599
background: $border_color;
2600
}
2601
/*********
2604
* Lists *
2605
*********/
2606
list {
2607
border-color: $border_color;
2608
background-color: $base_color;
2609
row { padding: 2px; }
2611
}
2612
// FIXME
2614
$row_transition: $longer_transition, background-color 0, color 0;
2615
row {
2617
&.activatable {
2618
transition: $row_transition,
2619
background-size $ripple_duration $deceleration_curve,
2620
background-image $ripple_duration * 2 $deceleration_curve;
2621
box-shadow: inset 0 0 0 9999px transparent;
2622
background-image: radial-gradient(circle farthest-corner at center,
2623
transparent 10%,
2624
transparent 0%);
2625
background-repeat: no-repeat;
2626
background-position: center;
2627
background-size: 1000% 1000%;
2628
&:hover {
2630
transition: $row_transition,
2631
box-shadow 0,
2632
background-size $ripple_duration $deceleration_curve,
2633
background-image $ripple_duration * 2 $deceleration_curve;
2634
box-shadow: inset 0 0 0 9999px $row_fill_color;
2635
}
2636
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2638
&:active {
2639
transition: $row_transition,
2640
background-size 0,
2641
background-image 0;
2642
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2643
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2644
background-image: radial-gradient(circle farthest-corner at center,
2645
$semi_fill_color 10%,
2646
transparent 0%);
2647
background-size: 0% 0%;
2648
}
2649
}
2650
&:selected { @extend %selected_items; }
2652
}
2653
/*********************
2656
* App Notifications *
2657
*********************/
2658
.app-notification {
2659
@extend %osd;
2660
@extend toolbar.osd;
2662
margin: 8px;
2664
button { @extend %button_basic.flat; }
2666
&.frame,
2668
border { border-style: none; }
2669
}
2670
/*************
2673
* Expanders *
2674
*************/
2675
expander {
2676
arrow {
2677
transition: all $shorter_duration $standard_curve;
2678
min-width: 16px;
2679
min-height: 16px;
2680
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2681
-gtk-icon-transform: rotate(-90deg);
2682
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2684
&:checked { -gtk-icon-transform: unset; }
2686
color: $secondary_fg_color;
2688
&:hover, &:active { color: $fg_color; }
2690
&:disabled { color: $disabled_secondary_fg_color; }
2692
&:selected {
2694
color: $secondary_inverse_fg_color;
2695
&:hover, &:active { color: $inverse_fg_color; }
2697
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2699
}
2700
}
2701
}
2702
/************
2705
* Calendar *
2706
***********/
2707
calendar {
2708
padding: 1px;
2709
border: 1px solid $border_color;
2710
color: $fg_color;
2711
&:disabled { color: $disabled_fg_color; }
2713
&:selected {
2715
@extend %selected_items;
2716
border-radius: 2px + 1px;
2718
}
2719
&.header {
2721
border-style: none none solid;
2722
border-radius: 0;
2723
}
2724
&.button { @extend %simple_flat_button; }
2726
&.highlight {
2728
color: gtkalpha(currentColor, $tertiary_opacity);
2729
font-weight: 500;
2730
}
2731
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2733
}
2734
/***********
2737
* Dialogs *
2738
***********/
2739
messagedialog { // Message Dialog styling
2740
&.background { background-color: $lighter_bg_color; }
2741
.titlebar {
2743
min-height: $small_size;
2744
border-style: none;
2745
box-shadow: inset 0 1px $highlight_color;
2746
background-color: $lighter_bg_color;
2747
color: $fg_color;
2748
&:backdrop { color: $secondary_fg_color; }
2750
}
2751
&.csd { // rounded bottom border styling for csd version
2753
&.background {
2754
// bigger radius for better antialiasing
2755
border-bottom-left-radius: 2px;
2756
border-bottom-right-radius: 2px;
2757
}
2758
.dialog-action-area button {
2760
padding: 8px 16px;
2761
border-top: 1px solid $border_color;
2762
border-radius: 0;
2763
@extend %simple_flat_button;
2765
&:first-child { border-bottom-left-radius: 2px; }
2767
&:last-child { border-bottom-right-radius: 2px; }
2769
}
2770
}
2771
}
2772
filechooser {
2774
.dialog-action-box { border-top: 1px solid $border_color; }
2775
#pathbarbox {
2777
border-bottom: 1px solid $border_color;
2778
background-color: $bg_color;
2779
}
2780
}
2781
filechooserbutton:drop(active) {
2783
box-shadow: none;
2784
}
2785
/***********
2788
* Sidebar *
2789
***********/
2790
.sidebar {
2791
border-style: none;
2792
background-color: $lighter_bg_color;
2793
@at-root %sidebar_left,
2795
&:dir(ltr),
2796
&.left,
2797
&.left:dir(rtl) {
2798
border-right: 1px solid $border_color;
2799
border-left-style: none;
2800
}
2801
@at-root %sidebar_right
2803
&:dir(rtl),
2804
&.right {
2805
border-left: 1px solid $border_color;
2806
border-right-style: none;
2807
}
2808
list { background-color: transparent; }
2810
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2812
}
2813
stacksidebar {
2815
&.sidebar {
2816
&:dir(ltr),
2817
&.left,
2818
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2819
&:dir(rtl),
2821
&.right { list { @extend %sidebar_right; }}
2822
}
2823
row {
2825
padding: 10px 4px;
2826
> label {
2828
padding-left: 6px;
2829
padding-right: 6px;
2830
}
2831
&.needs-attention > label { @extend %needs_attention; }
2833
}
2834
}
2835
/****************
2838
* File chooser *
2839
****************/
2840
placessidebar {
2841
> viewport.frame { border-style: none; }
2842
list { padding: (4px - 3px) 0 4px; }
2844
row {
2846
// Needs overriding of the GtkListBoxRow padding
2847
min-height: 32px;
2848
margin: -1px 0; // Remove unknown margins
2849
padding: 0;
2850
// Using margins/padding directly in the SidebarRow
2852
// will make the animation of the new bookmark row jump
2853
> revealer { padding: 0 12px; }
2854
&:selected { color: $inverse_fg_color; }
2856
&:disabled { color: $disabled_fg_color; }
2858
image.sidebar-icon {
2860
opacity: $tertiary_opacity; // dim the device icons
2861
&:dir(ltr) { padding-right: 8px; }
2863
&:dir(rtl) { padding-left: 8px; }
2864
}
2865
label.sidebar-label {
2867
&:dir(ltr) { padding-right: 2px; }
2868
&:dir(rtl) { padding-left: 2px; }
2869
}
2870
@at-root button.sidebar-button {
2872
@extend %simple_flat_button;
2873
@extend %small_button;
2875
row:selected & {
2877
}
2878
}
2879
&.sidebar-placeholder-row {
2881
min-height: 2px;
2882
padding: 0 8px;
2883
background-image: image($accent_color);
2884
background-clip: content-box;
2885
}
2886
&.sidebar-new-bookmark-row { color: $accent_color; }
2888
&:drop(active):not(:disabled) {
2890
box-shadow: inset 0 0 0 2px $accent_color;
2891
&:selected {
2893
// background-color: $accent_color;
2894
// color: $inverse_fg_color;
2895
}
2896
}
2897
}
2898
}
2899
placesview {
2901
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2902
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2904
// this selects the "connect to server" label
2906
> actionbar > revealer > box > label {
2907
padding-left: 8px;
2908
padding-right: 8px;
2909
}
2910
}
2911
/*********
2914
* Paned *
2915
*********/
2916
paned {
2917
> separator {
2918
min-width: 1px;
2919
min-height: 1px;
2920
-gtk-icon-source: none; // defeats the ugly default handle decoration
2921
border-style: none; // just to be sure
2922
background-color: transparent;
2923
// workaround, using background istead of a border since the border will get rendered twice (?)
2924
background-image: image($border_color);
2925
background-size: 1px 1px;
2926
background-clip: content-box; // avoids borders image being rendered twice (?)
2927
&.wide {
2929
min-width: 6px;
2930
min-height: 6px;
2931
background-color: $bg_color;
2932
background-image: image($border_color), image($border_color);
2933
background-size: 1px 1px, 1px 1px;
2934
}
2935
}
2936
&.horizontal > separator {
2938
background-repeat: repeat-y;
2939
&:dir(ltr) {
2941
margin: 0 -8px 0 0;
2942
padding: 0 8px 0 0;
2943
background-position: left;
2944
}
2945
&:dir(rtl) {
2947
margin: 0 0 0 -8px;
2948
padding: 0 0 0 8px;
2949
background-position: right;
2950
}
2951
&.wide {
2953
margin: 0;
2954
padding: 0;
2955
background-repeat: repeat-y, repeat-y;
2956
background-position: left, right;
2957
}
2958
}
2959
&.vertical > separator {
2961
margin: 0 0 -8px 0;
2962
padding: 0 0 8px 0;
2963
background-repeat: repeat-x;
2964
background-position: top;
2965
&.wide {
2967
margin: 0;
2968
padding: 0;
2969
background-repeat: repeat-x, repeat-x;
2970
background-position: bottom, top;
2971
}
2972
}
2973
}
2974
/**************
2977
* GtkInfoBar *
2978
**************/
2979
infobar {
2980
border-style: none;
2981
&.info { background-color: $info_bg_color; }
2983
&.question { background-color: $question_bg_color; }
2985
&.warning { background-color: $warning_bg_color; }
2987
&.error { background-color: $error_bg_color; }
2989
&.info,
2991
&.question,
2992
&.warning,
2993
&.error {
2994
> label, & { color: $inverse_fg_color; }
2995
button { @extend %button_selected; }
2997
selection {}
2999
*:link { @extend %link_selected; }
3001
}
3002
}
3003
/************
3006
* Tooltips *
3007
************/
3008
tooltip {
3009
&.background {
3010
// background-color needs to be set this way otherwise it gets drawn twice
3011
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3012
box-shadow: inset 0 1px $highlight_color;
3013
background-color: scale-alpha($base_color, $higher_opacity);
3014
}
3015
// @extend %osd;
3017
// padding: 4px; /* not working */
3019
border-radius: 2px;
3020
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3021
&:not(.csd) {
3023
border: 1px solid $border_color;
3024
border-radius: 2px + 1px;
3025
background-clip: $extra_background_clip;
3026
}
3027
// FIXME: we need a border or tooltips vanish on black background.
3029
decoration { background-color: transparent; }
3030
label {
3032
// tooltip label has already 6px margins
3033
min-height: 32px - 6px * 2;
3034
padding: 0 8px - 6px;
3035
}
3036
* {
3038
// workaround for Eclipse.
3039
// do not include any declaration here.
3040
// padding: 0;
3041
// background-color: transparent;
3042
// color: inherit;
3043
}
3044
}
3045
/*****************
3048
* Color Chooser *
3049
*****************/
3050
colorswatch {
3051
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3052
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3053
// applied to the overlay box.
3054
// base color corners rounding
3056
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3057
// sports a bigger radius.
3058
// nth-child is needed by the custom color strip.
3059
&.top {
3061
border-top-left-radius: $material_radius + 0.5px;
3062
border-top-right-radius: $material_radius + 0.5px;
3063
overlay {
3065
border-top-left-radius: $material_radius;
3066
border-top-right-radius: $material_radius;
3067
}
3068
}
3069
&.bottom {
3071
border-bottom-left-radius: $material_radius + 0.5px;
3072
border-bottom-right-radius: $material_radius + 0.5px;
3073
overlay {
3075
border-bottom-left-radius: $material_radius;
3076
border-bottom-right-radius: $material_radius;
3077
}
3078
}
3079
&.left,
3081
&:first-child:not(.top) {
3082
border-top-left-radius: $material_radius + 0.5px;
3083
border-bottom-left-radius: $material_radius + 0.5px;
3084
overlay {
3086
border-top-left-radius: $material_radius;
3087
border-bottom-left-radius: $material_radius;
3088
}
3089
}
3090
&.right,
3092
&:last-child:not(.bottom) {
3093
border-top-right-radius: $material_radius + 0.5px;
3094
border-bottom-right-radius: $material_radius + 0.5px;
3095
overlay {
3097
border-top-right-radius: $material_radius;
3098
border-bottom-right-radius: $material_radius;
3099
}
3100
}
3101
&.dark overlay { color: $light_fg_color; }
3103
&.light overlay { color: $dark_fg_color; }
3105
&.dark { color: $light_fg_color; } // for focus ring
3107
&.light { color: $dark_fg_color; } // for focus ring
3109
&:drop(active) {
3111
box-shadow: none;
3112
&.light overlay {
3114
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3115
}
3116
&.dark overlay {
3118
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3119
}
3120
}
3121
overlay {
3123
transition: $shadow_transition;
3124
box-shadow: $shadow_1;
3125
&:hover { box-shadow: $shadow_2; }
3127
}
3128
&#add-color-button {
3130
border-radius: $material_radius $material_radius 0 0;
3131
color: $light_fg_color; // for focus ring
3132
&:only-child { border-radius: $material_radius; }
3134
overlay {
3136
background-image: linear-gradient(to right,
3137
$error_bg_color 25%,
3138
$warning_bg_color 25%, $warning_bg_color 50%,
3139
$info_bg_color 50%, $info_bg_color 75%,
3140
$question_bg_color 75%);
3141
color: $light_fg_color;
3142
}
3143
}
3144
&:disabled {
3146
opacity: $disabled_opacity;
3147
overlay { box-shadow: none; }
3149
}
3150
row:selected & {
3152
}
3153
&#editor-color-sample {
3155
border-radius: $material_radius + 0.5px;
3156
overlay { border-radius: $material_radius; }
3158
// overlay:hover { box-shadow: $shadow_1; }
3160
}
3161
}
3162
// colorscale popup
3164
colorchooser .popover.osd {
3165
transition: $shadow_transition;
3166
border-radius: 2px;
3167
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3168
background-color: $base_color;
3169
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3171
spinbutton:not(.vertical) { @extend %entry.flat; }
3173
}
3174
/********
3177
* Misc *
3178
********/
3179
//content view (grid/list)
3180
.content-view {
3181
background-color: $bg_color;
3182
// &:hover { -gtk-icon-effect: highlight; }
3184
rubberband, .rubberband { @extend rubberband; }
3186
}
3187
.scale-popup {
3189
.osd & { @extend %osd; }
3190
.osd & button.flat { //FIXME: quick hack, redo properly
3192
}
3193
button { // +/- buttons on GtkVolumeButton popup
3195
}
3196
}
3197
/**********************
3200
* Window Decorations *
3201
*********************/
3202
decoration {
3203
transition: $shadow_transition;
3204
border-radius: 2px 2px 0 0;
3205
box-shadow: $shadow_4, 0 16px 16px transparent;
3206
// FIXME rationalize shadows
3208
// this is used for the resize cursor area
3210
margin: 8px;
3211
&:backdrop {
3213
// the transparent shadow here is to enforce that the shadow extents don't
3214
// change when we go to backdrop, to prevent jumping windows.
3215
// The biggest shadow should be in the same order then in the active state
3216
// or the jumping will happen during the transition.
3217
box-shadow: $shadow_2, 0 16px 16px transparent;
3218
}
3219
.maximized &,
3221
.fullscreen &,
3222
.tiled & { border-radius: 0; }
3223
.popup & { box-shadow: none; }
3225
// server-side decorations as used by mutter
3227
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3228
.csd.popup & {
3230
border-radius: 2px;
3231
box-shadow: $shadow_2;
3232
}
3233
tooltip.csd & {
3235
border-radius: 2px;
3236
box-shadow: $shadow_2;
3237
}
3238
messagedialog.csd & {
3240
border-radius: 2px;
3241
// box-shadow: $shadow_4, 0 16px 16px transparent;
3242
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3244
}
3245
.solid-csd & {
3247
margin: 0;
3248
padding: 4px;
3249
// border: solid 1px $border_color;
3250
// border-radius: 0;
3251
box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3252
// background-color: $border_color;
3253
}
3254
}
3255
// Window Close button
3257
button.titlebutton {
3258
// @extend %simple_flat_button;
3259
@extend %circular_button;
3261
.selection-mode & {
3263
}
3264
}
3265
// catch all extend :)
3268
%selected_items {
3270
background-color: $primary_color;
3271
@at-root %nobg_selected_items, & {
3273
color: $inverse_fg_color;
3274
&:disabled { color: $disabled_inverse_fg_color; }
3276
}
3277
}
3278
.monospace { font-family: monospace; }
3280
/**********************
3283
* Touch Copy & Paste *
3284
*********************/
3285
//touch selection handlebars for the Popover.osd above
3286
cursor-handle {
3287
border-radius: $circular_radius;
3288
background-color: $accent_color;
3289
background-image: none;
3290
&.top:dir(ltr), &.bottom:dir(rtl) {
3292
padding-left: 6px;
3293
border-top-right-radius: 0;
3294
}
3295
&.bottom:dir(ltr), &.top:dir(rtl) {
3297
padding-right: 6px;
3298
border-top-left-radius: 0;
3299
}
3300
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3302
-GtkWidget-text-handle-width: 24;
3303
-GtkWidget-text-handle-height: 30;
3304
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3306
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3307
url('#{$_url}@2.png'));
3308
}
3309
}
3310
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3312
// shortcut window keys
3314
.keycap {
3315
min-width: 28px - 8px * 2;
3316
min-height: 28px - 2px;
3317
margin-top: 2px;
3318
padding-bottom: 2px;
3319
padding-left: 8px;
3320
padding-right: 8px;
3321
border: solid 1px $border_color;
3323
border-radius: 2px + 1px;
3324
box-shadow: inset 0 -2px $border_color;
3325
background-color: $base_color;
3326
color: $fg_color;
3327
font-size: smaller;
3328
}
3329
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3331
transition: $longer_transition;
3332
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3333
caret-color: $accent_color;
3334
}
3335
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3337
stackswitcher button.circular,
3339
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3340
min-width: $medium_size;
3341
min-height: $medium_size;
3342
padding: 0;
3343
}
3344