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: 2px; }
258
&.right { margin-left: 2px; margin-right: -2px; }
260
}
261
undershoot {
263
&.left { @include undershoot(left); }
264
&.right { @include undershoot(right); }
266
}
267
selection { @extend %selected_items; }
269
// entry error and warning style
271
@each $e_type, $e_color in (error, $error_color),
272
(warning, $warning_color) {
273
&.#{$e_type} {
274
@include entry(normal, $e_color);
275
&:focus { @include entry(focus, $e_color); }
277
&:disabled { @include entry(disabled, $e_color); }
279
&.flat {
281
@include entry(flat-normal, $e_color);
282
&:focus { @include entry(flat-focus, $e_color); }
284
&:disabled { @include entry(flat-disabled, $e_color); }
286
}
287
}
288
}
289
&:drop(active) {
291
// box-shadow: inset 0 0 0 2px $accent_color;
292
}
293
.osd & {
295
}
296
}
297
progress {
299
margin: 2px (2px - 8px);
300
border-style: none none solid;
301
border-width: 2px;
302
border-color: $primary_color;
303
// border-radius: 0;
304
// box-shadow: none;
305
background-color: transparent;
306
// background-image: none;
307
}
308
// linked entries
310
.linked:not(.vertical) > & { @extend %linked; }
311
// Vertically linked entries
313
.linked.vertical > & { @extend %linked_vertical; }
314
.linked:not(.vertical) > &.flat,
316
.linked.vertical > &.flat { border-radius: 0; }
317
}
318
treeview entry {
320
&.flat, & {
321
min-height: 0;
322
padding: 2px;
323
border-radius: 0;
324
background-color: $base_color;
325
&, &:focus {
327
border-image: none;
328
box-shadow: none;
329
}
330
}
331
}
332
/***********
335
* Buttons *
336
***********/
337
// stuff for .needs-attention
338
@keyframes needs_attention {
339
from {
340
background-image: -gtk-gradient(radial,
341
center center, 0,
342
center center, 0.001,
343
to($accent_color),
344
to(transparent));
345
}
346
to {
348
background-image: -gtk-gradient(radial,
349
center center, 0,
350
center center, 0.5,
351
to($accent_color),
352
to(transparent));
353
}
354
}
355
%button,
357
button {
358
@at-root %button_basic, & {
359
min-height: 24px;
360
min-width: 16px;
361
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
362
border-radius: 2px;
363
font-weight: 500;
364
@include button(normal);
366
&:hover { @include button(hover); }
368
&:active { @include button(active); }
370
&:disabled { @include button(disabled); }
372
&:checked { @include button(checked); }
374
&:checked:disabled { @include button(checked-disabled); }
376
@at-root %flat_button, &.flat {
378
@at-root %simple_flat_button, & {
379
@include button(flat-normal);
380
&:hover { @include button(flat-hover); }
382
&:active { @include button(flat-active); }
384
&:disabled { @include button(flat-disabled); }
386
}
387
&:checked { @include button(flat-checked); }
389
&:checked:disabled { @include button(flat-checked-disabled); }
391
}
392
&.text-button {
394
padding-left: 16px;
395
padding-right: 16px;
396
}
397
&.image-button {
399
min-width: 24px;
400
padding: ($medium_size - 24px) / 2;
401
border-radius: $circular_radius;
402
-gtk-outline-radius: $circular_radius;
403
}
404
&.text-button.image-button {
406
border-radius: 2px;
407
-gtk-outline-radius: 2px;
408
label {
410
&:first-child {
411
margin-left: 16px - ($medium_size - 24px) / 2;
412
margin-right: 2px;
413
}
414
&:last-child {
416
margin-left: 2px;
417
margin-right: 16px - ($medium_size - 24px) / 2;
418
}
419
&:only-child {
421
margin-left: 16px - ($medium_size - 24px) / 2;
422
margin-right: 16px - ($medium_size - 24px) / 2;
423
}
424
}
425
image:not(:only-child) {
427
&:first-child { margin-left: (24px - 16px) / 2; }
428
&:last-child { margin-right: (24px - 16px) / 2; }
430
}
431
}
432
.linked > & { @extend %linked; }
434
.linked.vertical > & { @extend %linked_vertical; }
436
.linked > &.flat,
438
.linked.vertical > &.flat {
439
border-radius: 2px;
440
&.image-button {
442
border-radius: $circular_radius;
443
-gtk-outline-radius: $circular_radius;
444
}
445
&.text-button.image-button {
447
border-radius: 2px;
448
-gtk-outline-radius: 2px;
449
}
450
}
451
&:drop(active) {
453
// box-shadow: inset 0 0 0 2px $accent_color;
454
}
455
}
456
@at-root %button_selected, row:selected & {
458
&:disabled { color: $disabled_secondary_inverse_fg_color; }
459
}
460
// big standalone buttons like in Documents pager
462
&.osd {
463
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
464
&.image-button { padding: ($large_size - 24px) / 2; }
466
&:disabled { opacity: 0; }
468
}
469
//overlay / OSD style
471
@at-root %osd_button,
472
.osd & {
473
}
474
// Suggested and Destructive Action buttons
476
@each $b_type, $b_color in (suggested-action, $suggested_color),
477
(destructive-action, $destructive_color) {
478
&.#{$b_type} {
479
background-color: $b_color;
480
color: $inverse_fg_color;
481
&:disabled { @include button(disabled, $b_color); }
483
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
485
&.flat {
487
background-color: transparent;
488
color: $b_color;
489
&:disabled { @include button(flat-disabled, $b_color); }
491
&:checked { background-color: $fill_color; }
493
}
494
.osd & {
496
}
497
}
498
}
499
.stack-switcher > & {
501
// to position the needs attention dot, padding is added to the button
502
// child, a label needs just lateral padding while an icon needs vertical
503
// padding added too.
504
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
506
> label {
508
padding-left: 6px; // label padding
509
padding-right: 6px; //
510
}
511
> image {
513
padding-left: 6px; // image padding
514
padding-right: 6px; //
515
padding-top: 3px; //
516
padding-bottom: 3px; //
517
}
518
&.text-button {
520
// compensate text-button paddings
521
padding-left: 16px - 6px;
522
padding-right: 16px - 6px;
523
}
524
&.image-button {
526
// we want image buttons to have a 1:1 aspect ratio, so compensation
527
// of the padding added to the GtkImage is needed
528
padding-left: ($medium_size - 16px) / 2 - 6px;
529
padding-right: ($medium_size - 16px) / 2 - 6px;
530
}
531
&.needs-attention {
533
> label,
534
> image { @extend %needs_attention; }
535
&:checked {
537
> label,
538
> image {
539
animation: none;
540
background-image: none;
541
}
542
}
543
}
544
}
545
// hide separators
547
separator {
548
min-width: 0;
549
min-height: 0;
550
background: transparent;
551
}
552
// &.font,
554
// &.file { separator { background-color: transparent; }}
555
// &.font { > box > box > label { font-weight: bold; }}
557
// inline-toolbar buttons
559
.inline-toolbar & {
560
// @extend %button_basic.flat;
561
&:not(.text-button) { @extend %circular_button; }
563
}
564
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
566
}
567
%needs_attention {
569
animation: needs_attention $longer_duration $deceleration_curve forwards;
570
background-repeat: no-repeat;
571
background-position: right 3px;
572
background-size: 6px 6px;
573
&:dir(rtl) { background-position: left 3px; }
575
}
576
// all the following is for the +|- buttons on inline toolbars, that way
578
// should really be deprecated...
579
.inline-toolbar toolbutton > button { // redefining the button look is
580
// needed since those are flat...
581
}
582
// More inline toolbar buttons
584
toolbar.inline-toolbar toolbutton {
585
// > button.flat { @extend %linked_middle; }
586
// &:first-child > button.flat { @extend %linked:first-child; }
588
// &:last-child > button.flat { @extend %linked:last-child; }
590
// &:only-child > button.flat { @extend %linked:only-child; }
592
}
593
%linked_middle {
595
border-radius: 0;
596
-gtk-outline-radius: 2px;
597
}
598
%linked {
600
@extend %linked_middle;
601
&:first-child {
603
border-top-left-radius: 2px;
604
border-bottom-left-radius: 2px;
605
}
606
&:last-child {
608
border-top-right-radius: 2px;
609
border-bottom-right-radius: 2px;
610
}
611
&:only-child {
613
border-radius: 2px;
614
}
615
}
616
%linked_vertical_middle {
618
border-radius: 0;
619
-gtk-outline-radius: 2px;
620
}
621
%linked_vertical{
623
@extend %linked_vertical_middle;
624
&:first-child {
626
border-top-left-radius: 2px;
627
border-top-right-radius: 2px;
628
}
629
&:last-child {
631
border-bottom-left-radius: 2px;
632
border-bottom-right-radius: 2px;
633
}
634
&:only-child {
636
border-radius: 2px;
637
}
638
}
639
/* menu buttons */
641
modelbutton.flat,
642
.menuitem.button.flat {
643
min-height: $menuitem_size;
644
padding: 0 8px;
645
border-radius: 2px;
646
color: inherit;
647
@extend %simple_flat_button;
649
&:selected { @extend %selected_items; }
651
check,
653
radio {
654
box-shadow: none;
655
background-image: none;
656
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
658
&:last-child { margin-left: -8px; margin-right: -16px; }
660
&:first-child { margin-left: -16px; margin-right: -8px; }
662
}
663
check:not(:indeterminate):checked { @extend %check_checked; }
665
// radio:not(:indeterminate):checked { @extend %radio_checked; }
667
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
669
}
670
modelbutton.flat arrow {
672
background: none;
673
&:hover { background: none; }
675
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
677
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
679
}
680
button.color {
682
min-height: $small_size;
683
min-width: $small_size;
684
padding: $container_padding;
685
colorswatch:only-child {
687
// &, overlay { border-radius: 0; }
688
}
689
}
690
/*********
693
* Links *
694
*********/
695
*:link {
696
&, &:hover, &:active { color: $link_color; }
697
&:visited {
699
&, &:hover, &:active { color: $visited_link_color; }
700
}
701
@at-root %link_selected,
703
&:selected,
704
*:selected & { color: $inverse_fg_color; }
705
}
706
button:link,
708
button:visited {
709
@extend *:link;
710
> label { text-decoration-line: underline; }
712
}
713
/*****************
715
* GtkSpinButton *
716
*****************/
717
spinbutton {
718
&:not(.vertical) {
719
// in this horizontal configuration, the whole spinbutton
720
// behaves as the entry, so we extend the entry styling
721
// and nuke the style on the internal entry
722
@extend %entry;
723
padding: 0;
725
%spinbutton_entry,
727
entry {
728
min-width: $large_size - 8px * 2;
729
// reset all the other props since the spinbutton node is styled here
730
margin: 0;
731
border-image: none;
732
border-radius: 0;
733
box-shadow: none;
734
background-color: transparent;
735
//
736
// This will help to simplify spinbutton's code, but unfortunatelly
737
// doesn't work properly in :dir(rtl). It needs z-index property.
738
//
739
// min-width: $large_size - 8px;
740
//
741
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
742
//
743
// &:dir(ltr) {
744
// margin-right: -$spinbuttons_width;
745
// padding-right: $spinbuttons_width;
746
// }
747
//
748
// &:dir(rtl) {
749
// margin-left: -$spinbuttons_width;
750
// padding-left: $spinbuttons_width;
751
// }
752
}
753
button {
755
// margin: $container_padding;
756
border: solid $container_padding transparent;
757
@extend %simple_flat_button;
759
@extend %small_button;
761
&.up:dir(ltr),
763
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
764
&.up:dir(rtl),
766
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
767
}
768
}
769
// OSD horizontal
771
.osd &:not(.vertical) {
772
button {
773
}
774
}
775
// Vertical
777
&.vertical {
778
// in the vertical configuration, we treat the spinbutton
779
// as a box, and tweak the style of the entry in the middle
780
// so that it's linked
781
// FIXME: this should not be set at all, but otherwise it gets the wrong
783
// color
784
&:disabled { color: $disabled_fg_color; }
785
&:drop(active) {
787
box-shadow: none;
788
}
789
entry {
791
min-height: $medium_size;
792
min-width: $large_size;
793
padding: 0;
794
}
795
button {
797
min-height: $medium_size;
798
min-width: $large_size;
799
padding: 0;
800
@extend %simple_flat_button;
802
&.up { border-radius: 2px 2px 0 0; }
804
&.down { border-radius: 0 0 2px 2px; }
806
}
807
}
808
// OSD vertical
810
.osd &.vertical button:first-child {
811
}
812
// Misc
814
treeview &:not(.vertical) {
815
min-height: 0;
816
border-style: none;
817
border-radius: 0;
818
entry {
820
min-height: 0;
821
padding: 1px 2px;
822
}
823
}
824
}
825
/**************
828
* ComboBoxes *
829
**************/
830
combobox {
831
arrow {
832
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
833
min-height: 16px;
834
min-width: 16px;
835
}
836
button.combo:checked { transition: none; } // workaround for menuitem selection
838
button.combo cellview {
840
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
841
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
842
}
843
#gtk-combobox-popup-menu {
845
padding: 2px 0;
846
menuitem {
848
min-height: $medium_size - 2px * 2;
849
padding: 0 8px;
850
}
851
}
852
&.linked {
854
button:nth-child(2) {
855
&:dir(ltr) { @extend %linked:last-child; }
856
&:dir(rtl) { @extend %linked:first-child; }
857
}
858
}
859
&:drop(active) { // FIXME: untested
861
box-shadow: none;
862
// button.combo { @extend %button_basic:drop(active); }
864
}
865
}
866
.linked > combobox > box > button.combo {
868
// the combo is a composite widget so the way we do button linking doesn't
869
// work, special case needed. See
870
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
871
&:dir(ltr),
873
&:dir(rtl) { @extend %linked_middle; } // specificity bump
874
}
875
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
877
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
878
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
879
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
881
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
882
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
883
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
884
%combo_flat {
886
border-radius: 0;
887
background-image: none;
888
font-weight: inherit;
889
@include entry(flat-normal);
891
&:hover { box-shadow: inset 0 -2px $fill_color; }
893
&:checked {
895
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
896
$primary_color 100%,
897
transparent 0%)
898
0 0 2 / 0 0 2px;
899
}
900
&:disabled { color: $disabled_fg_color; }
902
}
903
/************
906
* Toolbars *
907
************/
908
toolbar {
909
-GtkWidget-window-dragging: true;
910
padding: $container_padding / 2;
911
background-color: $bg_color;
912
button { @extend %button_basic.flat; }
914
// on OSD
916
.osd & { background-color: transparent; }
917
// stand-alone OSD toolbars
919
&.osd {
920
transition: $shadow_transition;
921
padding: $container_padding;
922
border-radius: 2px;
923
box-shadow: $shadow_2, inset 0 1px $highlight_color;
924
background-color: $base_color;
925
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
927
&.left,
929
&.right,
930
&.top,
931
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
932
}
933
// toolbar separators
935
&.horizontal separator { margin: $container_padding / 2; }
936
&.vertical separator { margin: $container_padding / 2; }
937
&:not(.inline-toolbar):not(.osd) {
939
scale,
940
entry,
941
spinbutton,
942
button { margin: $container_padding / 2; }
943
.linked entry,
945
.linked spinbutton,
946
.linked button {
947
&:not(:first-child) { margin-left: 0; }
948
&:not(:last-child) { margin-right: 0; }
949
}
950
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
952
}
953
}
954
//searchbar, location-bar & inline-toolbar
956
.inline-toolbar {
957
padding: $container_padding;
958
border-style: solid;
959
border-width: 0 1px 1px;
960
border-color: $border_color;
961
background-color: $alt_base_color;
962
}
963
searchbar,
965
.location-bar {
966
padding: $container_padding;
967
border-style: solid;
968
border-width: 0 0 1px;
969
border-color: $border_color;
970
background-color: $bg_color;
971
background-clip: border-box;
972
}
973
/***************
976
* Header bars *
977
***************/
978
%titlebar,
979
headerbar {
980
transition: background-color $shorter_duration $deceleration_curve;
981
min-height: $large_size;
982
padding: 0 $container_padding;
983
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
984
background-color: $titlebar_bg_color;
985
color: $titlebar_fg_color;
986
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
988
&:backdrop {
990
color: $secondary_titlebar_fg_color;
991
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
993
}
994
.title {
996
transition: $longer_transition;
997
padding: 0 12px;
998
font-weight: bold;
999
}
1000
.subtitle {
1002
transition: $longer_transition;
1003
padding: 0 12px;
1004
font-size: smaller;
1005
@extend .dim-label;
1007
}
1008
button:not(.suggested-action):not(.destructive-action) {
1010
@extend %button_basic.flat;
1011
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1013
$titlebar_indicator_color 0%,
1014
transparent 0%)
1015
0 0 0 / 0 0 0px;
1016
&:checked {
1018
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1019
$titlebar_indicator_color 100%,
1020
transparent 0%)
1021
0 0 2 / 0 0 2px;
1022
&, &:disabled { background-color: transparent; }
1024
}
1025
}
1026
button.suggested-action, button.destructive-action {
1028
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1029
}
1030
&.selection-mode {
1032
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1033
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1034
transition: background-color 0.00001s $longer_duration;
1035
animation: header_ripple_effect $longer_duration $deceleration_curve;
1036
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1037
background-color: $primary_color;
1038
color: $inverse_fg_color;
1039
&:backdrop {
1041
color: $secondary_inverse_fg_color;
1042
}
1043
.subtitle:link { @extend *:link:selected; }
1045
button:not(.suggested-action):not(.destructive-action) {
1047
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1048
currentColor 0%,
1049
transparent 0%)
1050
0 0 0 / 0 0 0px;
1051
color: currentColor;
1052
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1054
&:checked {
1056
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1057
currentColor 100%,
1058
transparent 0%)
1059
0 0 2 / 0 0 2px;
1060
color: currentColor;
1061
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1063
}
1064
}
1065
.selection-menu {
1067
padding-left: 16px;
1068
padding-right: 16px;
1069
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1071
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1073
}
1074
}
1075
.fullscreen &,
1077
.tiled &,
1078
.maximized & {
1079
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1080
box-shadow: $shadow_1;
1081
}
1082
&.default-decoration {
1084
min-height: $small_size;
1085
padding: $container_padding;
1086
box-shadow: inset 0 1px $titlebar_highlight_color;
1087
.fullscreen &,
1089
.tiled &,
1090
.maximized & { box-shadow: none; }
1091
button.titlebutton {
1093
min-height: $small_size;
1094
min-width: $small_size;
1095
margin: 0;
1096
padding: 0;
1097
}
1098
}
1099
.solid-csd & {
1101
&:dir(rtl), &:dir(ltr) { // specificity bump
1102
margin-left: -2px;
1103
margin-right: -2px;
1104
margin-top: -2px;
1105
// border-radius: 0;
1106
box-shadow: inset 0 1px $titlebar_highlight_color;
1107
}
1108
}
1109
}
1110
headerbar {
1112
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1113
entry,
1114
spinbutton,
1115
// separator,
1116
button {
1117
margin-top: $container_padding;
1118
margin-bottom: $container_padding;
1119
}
1120
switch {
1122
margin-top: $container_padding * 2;
1123
margin-bottom: $container_padding * 2;
1124
}
1125
}
1126
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1128
border-top-left-radius: 2px;
1129
border-top-right-radius: 2px;
1130
}
1131
headerbar {
1133
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1134
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1135
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1137
}
1138
.titlebar:not(headerbar) {
1140
window.csd > & {
1141
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1142
padding: 0;
1143
background-color: transparent;
1144
background-image: none;
1145
border-style: none;
1146
box-shadow: none;
1147
}
1148
> separator {
1150
background-color: $titlebar_bg_color;
1151
background-image: image($border_color);
1152
}
1153
@extend %titlebar;
1155
}
1156
/************
1159
* Pathbars *
1160
************/
1161
%pathbar_button,
1162
.path-bar button {
1163
padding-left: ($medium_size - 24px) / 2;
1164
padding-right: ($medium_size - 24px) / 2;
1165
label:not(:only-child) {
1167
&:first-child { margin-left: 4px; }
1168
&:last-child { margin-right: 4px; }
1170
}
1171
&.slider-button {
1173
padding-left: (24px - 16px) / 2;
1174
padding-right: (24px - 16px) / 2;
1175
}
1176
:not(headerbar) & {
1178
@extend %flat_button;
1179
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1181
$primary_color 0%,
1182
transparent 0%)
1183
0 0 0 / 0 0 0px;
1184
border-radius: 2px;
1185
&:checked {
1187
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1188
$primary_color 100%,
1189
transparent 0%)
1190
0 0 2 / 0 0 2px;
1191
&, &:disabled { background-color: transparent; }
1193
}
1194
}
1195
}
1196
/**************
1199
* Tree Views *
1200
**************/
1201
treeview.view {
1202
@at-root * {
1203
-GtkTreeView-horizontal-separator: 4;
1204
-GtkTreeView-grid-line-width: 1;
1205
-GtkTreeView-grid-line-pattern: '';
1206
-GtkTreeView-tree-line-width: 1;
1207
-GtkTreeView-tree-line-pattern: '';
1208
-GtkTreeView-expander-size: 16;
1209
}
1210
border-left-color: $fill_color; // this is actually the tree lines color,
1212
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1213
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1215
&:hover, &:active, &:selected { border-radius: 0; }
1217
&.separator {
1219
min-height: 1px + 2px * 2;
1220
color: $border_color;
1221
}
1222
&:drop(active) {
1224
border-style: solid none;
1225
border-width: 1px;
1226
border-color: $accent_color;
1227
&.after { border-top-style: none; }
1229
&.before { border-bottom-style: none; }
1231
}
1232
&.expander {
1234
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1235
-gtk-icon-transform: rotate(-90deg);
1236
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1238
&:checked { -gtk-icon-transform: unset; }
1240
color: $secondary_fg_color;
1242
&:hover, &:active { color: $fg_color; }
1244
&:disabled { color: $disabled_secondary_fg_color; }
1246
&:selected {
1248
color: $secondary_inverse_fg_color;
1249
&:hover, &:active { color: $inverse_fg_color; }
1251
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1253
}
1254
}
1255
&.progressbar { // progress bar in treeviews
1257
border-style: none none solid;
1258
border-width: $bar_size;
1259
border-color: $primary_color;
1260
box-shadow: none;
1261
background-color: transparent;
1262
&:selected { border-color: currentColor; }
1264
}
1265
&.trough { // progress bar trough in treeviews
1267
border-style: none none solid;
1268
border-width: $bar_size;
1269
border-color: scale-alpha($primary_color, $lower_opacity);
1270
box-shadow: none;
1271
background-color: transparent;
1272
&:selected { border-color: $fill_color; }
1274
}
1275
header {
1277
button {
1278
@extend row.activatable;
1279
padding: 2px 6px;
1281
border-style: none solid solid none;
1282
border-width: 1px;
1283
border-color: $border_color;
1284
border-radius: 0;
1285
background-clip: border-box;
1286
&, &:hover, &:active { box-shadow: none; }
1288
&, &:disabled { background-color: $base_color; }
1290
&:last-child { border-right-style: none; }
1292
}
1293
}
1294
button.dnd,
1296
header.button.dnd { // for treeview-like derive widgets
1297
padding: 2px 6px;
1298
border-style: none solid solid;
1299
border-width: 1px;
1300
border-color: $border_color;
1301
border-radius: 0;
1302
box-shadow: none;
1303
background-color: $base_color;
1304
background-clip: border-box;
1305
color: $primary_color;
1306
}
1307
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1309
}
1310
/*********
1313
* Menus *
1314
*********/
1315
menubar,
1316
.menubar {
1317
-GtkWidget-window-dragging: true;
1318
padding: 0;
1319
// box-shadow: inset 0 -1px $border_color;
1320
background-color: $titlebar_bg_color;
1321
> menuitem {
1323
transition: $shorter_transition;
1324
min-height: 20px;
1325
padding: 4px 8px;
1326
color: $secondary_titlebar_fg_color;
1327
&:hover { //Seems like it :hover even with keyboard focus
1329
transition: none;
1330
background-color: $semi_fill_color;
1331
color: $titlebar_fg_color;
1332
}
1333
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1335
}
1336
}
1337
.csd.popup { border-radius: 2px; }
1339
menu,
1341
.menu,
1342
.context-menu {
1343
margin: 4px 0;
1344
padding: 4px 0;
1345
box-shadow: inset 0 1px $highlight_color;
1346
background-color: $base_color;
1347
border: 1px solid $border_color; // adds borders in a non composited env
1348
.csd & {
1350
border: none; // axes borders in a composited env
1351
border-radius: 2px;
1352
}
1353
menuitem {
1355
transition: $shorter_transition;
1356
min-height: 20px;
1357
min-width: 40px;
1358
padding: 4px 8px;
1359
font: initial;
1360
text-shadow: none;
1361
&:hover {
1363
transition: none;
1364
background-color: $semi_fill_color;
1365
}
1366
&:disabled { color: $disabled_fg_color; }
1368
// submenu indicators
1370
arrow {
1371
min-height: 16px;
1372
min-width: 16px;
1373
&:dir(ltr) {
1375
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1376
margin-left: 8px;
1377
}
1378
&:dir(rtl) {
1380
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1381
margin-right: 8px;
1382
}
1383
}
1384
// avoids labels color being overridden, see
1386
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1387
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1388
}
1389
// overflow arrows
1391
> arrow {
1392
min-height: 16px;
1393
min-width: 16px;
1394
padding: 4px;
1395
border-radius: 0;
1396
background-color: $base_color;
1397
color: $secondary_fg_color;
1398
&.top {
1400
margin-top: -4px;
1401
border-bottom: 1px solid $border_color;
1402
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1403
}
1404
&.bottom {
1406
margin-bottom: -4px;
1407
border-top: 1px solid $border_color;
1408
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1409
}
1410
&:hover {
1412
background-image: image($semi_fill_color);
1413
color: $fg_color;
1414
}
1415
&:disabled {
1417
border-color: transparent;
1418
background-color: transparent;
1419
color: transparent;
1420
// color: $disabled_secondary_fg_color;
1421
}
1422
}
1423
separator { margin: 4px 0; }
1425
}
1426
menuitem {
1428
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1429
check,
1431
radio {
1432
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1433
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1434
}
1435
}
1436
/************
1439
* Popovers *
1440
************/
1441
popover.background {
1442
transition: $shadow_transition;
1443
padding: 2px;
1444
box-shadow: $shadow_2; // TODO: this should really have a highlight
1445
background-color: $lighter_bg_color;
1446
&:backdrop { box-shadow: $shadow_1; }
1448
&, .csd & {
1450
border-style: solid;
1451
border-width: 1px;
1452
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1453
border-radius: 2px + 1px;
1454
}
1455
> stack { margin: -4px; } // remove extra padding from menu style popovers
1457
> toolbar { margin: -2px; }
1459
> list,
1461
> .view,
1462
> toolbar {
1463
border-style: none;
1464
box-shadow: none;
1465
background-color: transparent;
1466
}
1467
&.touch-selection,
1469
&.magnifier,
1470
&.osd { @extend %osd; }
1471
// entry { @extend %entry.flat; }
1473
// button.combo { @extend %combo_flat; }
1475
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1477
&.menu button,
1479
button.model {
1480
@extend %simple_flat_button;
1481
min-height: 32px;
1483
padding: 0 8px;
1484
border-radius: 2px;
1485
&:checked { @extend %selected_items; }
1487
}
1488
separator { margin: 4px 0; }
1490
list separator { margin: 0; }
1492
}
1493
/*************
1495
* Notebooks *
1496
*************/
1497
notebook {
1498
> header {
1499
border-width: 1px;
1500
border-color: $border_color;
1501
background-color: $bg_color;
1502
background-clip: border-box;
1503
&.top {
1505
border-bottom-style: solid;
1506
> tabs {
1507
margin-bottom: -1px;
1508
> tab {
1509
&:hover { box-shadow: inset 0 -2px $fill_color; }
1511
&:checked { box-shadow: inset 0 -2px $primary_color; }
1513
}
1514
}
1515
}
1516
&.bottom {
1518
border-top-style: solid;
1519
> tabs {
1520
margin-top: -1px;
1521
> tab {
1522
&:hover { box-shadow: inset 0 2px $fill_color; }
1524
&:checked { box-shadow: inset 0 2px $primary_color; }
1526
}
1527
}
1528
}
1529
&.left {
1531
border-right-style: solid;
1532
> tabs {
1533
margin-right: -1px;
1534
> tab {
1535
&:hover { box-shadow: inset -2px 0 $fill_color; }
1537
&:checked { box-shadow: inset -2px 0 $primary_color; }
1539
}
1540
}
1541
}
1542
&.right {
1544
border-left-style: solid;
1545
> tabs {
1546
margin-left: -1px;
1547
> tab {
1548
&:hover { box-shadow: inset 2px 0 $fill_color; }
1550
&:checked { box-shadow: inset 2px 0 $primary_color; }
1552
}
1553
}
1554
}
1555
&.top > tabs > arrow {
1557
@extend %notebook_vert_arrows;
1558
border-top-style: none;
1560
}
1561
&.bottom > tabs > arrow {
1563
@extend %notebook_vert_arrows;
1564
border-bottom-style: none;
1566
}
1567
@at-root %notebook_vert_arrows {
1569
padding-left: 4px;
1570
padding-right: 4px;
1571
&.down {
1573
margin-left: -8px;
1574
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1575
}
1576
&.up {
1578
margin-right: -8px;
1579
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1580
}
1581
}
1582
&.left > tabs > arrow {
1584
@extend %notebook_horz_arrows;
1585
border-left-style: none;
1587
}
1588
&.right > tabs > arrow {
1590
@extend %notebook_horz_arrows;
1591
border-right-style: none;
1593
}
1594
@at-root %notebook_horz_arrows {
1596
padding-top: 4px;
1597
padding-bottom: 4px;
1598
&.down {
1600
margin-top: -8px;
1601
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1602
}
1603
&.up {
1605
margin-bottom: -8px;
1606
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1607
}
1608
}
1609
> tabs > arrow {
1611
@extend %simple_flat_button;
1612
min-height: 16px;
1614
min-width: 16px;
1615
border-radius: 0;
1616
}
1617
tab {
1619
transition: $longer_transition,
1620
background-size 0,
1621
background-image 0;
1622
min-height: $small_size;
1623
min-width: $small_size;
1624
padding: $container_padding 12px;
1625
outline-offset: -6px;
1627
border-width: 1px; // for reorderable tabs
1629
border-color: transparent; //
1630
background-image: radial-gradient(circle farthest-corner at center,
1632
$primary_color 10%,
1633
transparent 0%);
1634
background-repeat: no-repeat;
1635
background-position: center;
1636
background-size: 0% 0%;
1637
color: $secondary_fg_color;
1639
font-weight: 500;
1640
&:hover {
1642
color: $fg_color;
1643
&.reorderable-page {
1645
border-color: $border_color;
1646
background-color: $alt_base_color;
1647
}
1648
}
1649
&:disabled { color: $disabled_secondary_fg_color; }
1651
&:checked {
1653
transition: $longer_transition,
1654
background-size $longer_duration $deceleration_curve,
1655
background-image $longer_duration + $ripple_duration $deceleration_curve;
1656
background-image: radial-gradient(circle farthest-corner at center,
1657
transparent 10%,
1658
transparent 0%);
1659
background-size: 1000% 1000%;
1660
color: $fg_color;
1661
&:disabled { color: $disabled_fg_color; }
1663
&.reorderable-page {
1665
border-color: $border_color;
1666
background-color: $base_color;
1667
}
1668
}
1669
// colors the button like the label, overridden otherwise
1671
button.flat {
1672
@extend %small_button;
1673
&:last-child {
1675
margin-left: $container_padding;
1676
margin-right: $container_padding - 12px;
1677
}
1678
&:first-child {
1680
margin-left: $container_padding - 12px;
1681
margin-right: $container_padding;
1682
}
1683
}
1684
}
1685
&.top,
1687
&.bottom {
1688
tabs {
1689
padding-left: 8px;
1690
padding-right: 8px;
1691
&:not(:only-child) {
1693
&:first-child { margin-left: 0; }
1694
&:last-child { margin-right: 0; }
1695
}
1696
tab {
1698
&.reorderable-page {
1699
margin: 0 -1px;
1700
border-style: none solid;
1701
}
1702
}
1703
}
1704
}
1705
&.left,
1707
&.right {
1708
tabs {
1709
padding-top: 8px;
1710
padding-bottom: 8px;
1711
&:not(:only-child) {
1713
&:first-child { margin-top: 0; }
1714
&:last-child { margin-bottom: 0; }
1715
}
1716
tab {
1718
&.reorderable-page {
1719
margin: -1px 0;
1720
border-style: solid none;
1721
}
1722
}
1723
}
1724
}
1725
}
1726
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1728
background-color: $base_color;
1729
entry:not(.search),
1731
spinbutton:not(.vertical) { @extend %entry.flat; }
1732
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1734
button.combo { @extend %combo_flat; }
1736
}
1737
}
1738
/**************
1741
* Scrollbars *
1742
**************/
1743
scrollbar {
1744
$_slider_min_length: 24px;
1745
// disable steppers
1747
@at-root * {
1748
-GtkScrollbar-has-backward-stepper: false;
1749
-GtkScrollbar-has-forward-stepper: false;
1750
}
1751
transition: $longer_transition;
1753
background-color: $base_color;
1754
background-clip: $extra_background_clip;
1755
// scrollbar border
1757
&.top { border-bottom: 1px solid $border_color; }
1758
&.bottom { border-top: 1px solid $border_color; }
1759
&.left { border-right: 1px solid $border_color; }
1760
&.right { border-left: 1px solid $border_color; }
1761
// slider
1763
slider {
1764
transition: $shorter_transition, margin 0, border-width 0;
1765
min-width: 8px;
1766
min-height: 8px;
1767
border: 4px solid transparent;
1768
border-radius: $circular_radius;
1769
background-clip: padding-box;
1770
background-color: $tertiary_fg_color;
1771
&:hover { background-color: $secondary_fg_color; }
1773
&:active { background-color: $fg_color; }
1775
&:disabled { background-color: $disabled_tertiary_fg_color; }
1777
}
1778
&.fine-tune {
1780
slider {
1781
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1782
min-width: 4px;
1783
min-height: 4px;
1784
}
1785
&.horizontal slider { margin: 2px 0; }
1787
&.vertical slider { margin: 0 2px; }
1789
}
1790
&.overlay-indicator {
1792
&:not(.dragging):not(.hovering) {
1793
border-color: transparent;
1794
background-color: transparent;
1795
slider {
1797
min-width: 4px;
1798
min-height: 4px;
1799
margin: 4px - 1px;
1800
border: 1px solid scale-alpha($base_color, $lower_opacity);
1801
}
1802
button {
1804
min-width: 4px;
1805
min-height: 4px;
1806
margin: 4px - 1px;
1807
border: 1px solid scale-alpha($base_color, $lower_opacity);
1808
border-radius: $circular_radius;
1809
background-color: $tertiary_fg_color;
1810
background-clip: padding-box;
1811
-gtk-icon-source: none;
1812
&:disabled { background-color: $disabled_tertiary_fg_color; }
1814
}
1815
&.horizontal {
1817
slider { min-width: $_slider_min_length; }
1818
button { min-width: 8px; }
1820
}
1821
&.vertical {
1823
slider { min-height: $_slider_min_length; }
1824
button { min-height: 8px; }
1826
}
1827
}
1828
&.dragging,
1830
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1831
}
1832
&.horizontal slider { min-width: $_slider_min_length; }
1834
&.vertical slider { min-height: $_slider_min_length; }
1836
// button styling
1838
button {
1839
@extend %simple_flat_button;
1840
min-width: 16px;
1842
min-height: 16px;
1843
padding: 0;
1844
border-radius: 0;
1845
}
1846
// button icons
1848
&.vertical {
1849
button {
1850
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1851
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1853
}
1854
}
1855
&.horizontal {
1857
button {
1858
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1859
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1861
}
1862
}
1863
}
1864
/**********
1867
* Switch *
1868
**********/
1869
switch {
1870
transition: $longer_transition;
1871
margin: $container_padding 0;
1872
border: 4px solid transparent;
1873
border-radius: $circular_radius;
1874
background-color: $fill_color;
1875
background-clip: padding-box;
1876
font-size: 0;
1877
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1879
&:checked {
1881
background-color: scale-alpha($accent_color, 0.5);
1882
&:disabled {
1884
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1885
color: $disabled_fg_color;
1886
}
1887
}
1888
slider {
1890
@include entry(normal);
1891
transition: $longer_transition, $shadow_transition, margin 0;
1893
min-width: $small_size;
1894
min-height: $small_size;
1895
margin: -4px 0 -4px -4px;
1896
border-radius: $circular_radius;
1897
-gtk-outline-radius: $circular_radius;
1898
}
1899
&:hover slider { @include entry(focus); }
1901
&:checked slider {
1903
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1904
animation: needs_attention $longer_duration $deceleration_curve;
1905
margin: -4px -4px -4px 0;
1906
background-color: $accent_color;
1907
color: $inverse_fg_color;
1908
}
1909
&:disabled slider { @include entry(disabled); }
1911
&:checked:disabled slider { animation: none; }
1913
row:selected & {
1915
}
1916
}
1917
/*************************
1920
* Check and Radio items *
1921
*************************/
1922
// draw regular check and radio items using our PNG assets
1923
// all assets are rendered from assets.svg. never add pngs directly
1924
//selection-mode
1926
@each $s, $as in ('', '-unchecked'),
1927
(':checked', '-checked') {
1928
.view.content-view.check#{$s}:not(list) {
1929
margin: 8px;
1930
box-shadow: none;
1931
background-color: transparent;
1932
background-image: none;
1933
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1934
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1935
-gtk-icon-shadow: $shadow_1;
1936
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1938
}
1939
}
1940
checkbutton.text-button,
1942
radiobutton.text-button {
1943
// this is for a nice focus on check and radios text
1944
padding: 2px;
1945
outline-offset: 0;
1946
label:not(:only-child) { margin: 0 4px; }
1948
}
1949
check,
1951
radio {
1952
min-height: 24px;
1953
min-width: 24px;
1954
margin: -($large_size - 24px) / 2;
1955
padding: ($large_size - 24px) / 2;
1956
@extend %simple_flat_button;
1958
@extend %circular_button;
1960
&:checked, &:indeterminate { color: $accent_color; }
1962
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1964
// &:only-child { margin: -12px; }
1966
row &:not(:checked):not(:indeterminate) {
1968
color: gtkalpha(currentColor, $secondary_opacity);
1969
&:hover, &:active { color: currentColor; }
1971
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1973
}
1974
menu menuitem & {
1976
transition: none;
1977
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1978
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1980
&, &:hover, &:disabled {
1982
box-shadow: none;
1983
// color: inherit;
1984
// animation: none;
1985
}
1986
}
1987
}
1988
%check,
1990
check {
1991
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
1992
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.png"))); }
1993
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
1995
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.png"))); }
1996
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
1998
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.png"))); }
1999
}
2000
$radio_indicator: 10px / $large_size / 2;
2002
$radio_radius_slice: #{$large_size / 2px};
2003
$radio_radius_width: #{$large_size / 2};
2004
%radio,
2006
radio {
2007
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2008
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.png"))); }
2009
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2011
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.png"))); }
2012
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2014
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.png"))); }
2015
border-image: -gtk-gradient(radial,
2017
center center, 0,
2018
center center, 0.001,
2019
to($accent_color),
2020
to(transparent))
2021
$radio_radius_slice / $radio_radius_width;
2022
&:checked {
2024
border-image: -gtk-gradient(radial,
2025
center center, 0,
2026
center center, $radio_indicator,
2027
to($accent_color),
2028
to(transparent))
2029
$radio_radius_slice / $radio_radius_width;
2030
}
2031
&:checked:disabled {
2033
border-image: -gtk-gradient(radial,
2034
center center, 0,
2035
center center, $radio_indicator,
2036
to(scale-alpha($accent_color, $disabled_opacity)),
2037
to(transparent))
2038
$radio_radius_slice / $radio_radius_width;
2039
}
2040
&:indeterminate:checked {
2042
border-image: -gtk-gradient(radial,
2043
center center, 0,
2044
center center, 0.001,
2045
to($accent_color),
2046
to(transparent))
2047
$radio_radius_slice / $radio_radius_width;
2048
}
2049
}
2050
// let's animate things
2052
@keyframes check_check {
2053
from { -gtk-icon-transform: rotate(90deg); }
2054
to { -gtk-icon-transform: unset; }
2055
}
2056
@keyframes check_radio { // FIXME: cannot animate border-image
2058
from {
2059
border-image: -gtk-gradient(radial,
2060
center center, 0,
2061
center center, 0.001,
2062
to($accent_color),
2063
to(transparent))
2064
$radio_radius_slice / $radio_radius_width;
2065
}
2066
to {
2068
border-image: -gtk-gradient(radial,
2069
center center, 0,
2070
center center, $radio_indicator,
2071
to($accent_color),
2072
to(transparent))
2073
$radio_radius_slice / $radio_radius_width;
2074
}
2075
}
2076
@keyframes check_indeterminate {
2078
from { -gtk-icon-transform: unset; }
2079
50% { -gtk-icon-transform: scale(0, 1); }
2080
to { -gtk-icon-transform: unset; }
2081
}
2082
%check_checked,
2084
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2085
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2087
// %radio_checked,
2089
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2090
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2092
%indeterminate_checked,
2094
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2095
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2097
// no animations in menus
2099
menu menuitem {
2100
check:not(:indeterminate):checked,
2101
radio:not(:indeterminate):checked,
2102
check:indeterminate:checked,
2103
radio:indeterminate:checked { animation: none; }
2104
}
2105
treeview.view check,
2107
treeview.view radio {
2108
padding: 0;
2109
&:hover {
2111
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2112
&:disabled { box-shadow: none; }
2114
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2116
}
2117
& {
2119
color: $secondary_fg_color;
2120
&:hover, &:active { color: $fg_color; }
2122
&:disabled { color: $disabled_secondary_fg_color; }
2124
&:checked, &:indeterminate { color: $accent_color; }
2126
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2128
}
2129
&:selected {
2131
color: $secondary_inverse_fg_color;
2132
&:hover, &:active { color: $inverse_fg_color; }
2134
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2136
&:checked, &:indeterminate { color: $accent_color; }
2138
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2140
}
2141
}
2142
treeview.view radio:checked {
2144
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2145
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.png")));
2146
border-image: none;
2147
}
2148
/************
2151
* GtkScale *
2152
************/
2153
scale {
2154
// sizing
2155
$_marks_lenght: 8px;
2156
$_marks_distance: 8px;
2157
$slider_size: 24px;
2159
$marks_slider_size: 30px;
2160
$slider_margin: -($slider_size - $bar_size) / 2;
2162
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2163
$color_slider_margin: -($slider_size) / 2;
2165
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2166
min-height: $medium_size - $slider_size;
2168
min-width: $medium_size - $slider_size;
2169
padding: ($slider_size / 2);
2170
* { transition: $longer_transition; }
2172
// the slider is inside the trough, so to have make it bigger there's a negative margin
2174
slider {
2175
min-height: $slider_size;
2176
min-width: $slider_size;
2177
margin: $slider_margin;
2178
}
2179
// the backing bit
2181
trough {
2182
outline-offset: 2px;
2183
background-color: $fill_color;
2184
&:disabled { color: $disabled_fg_color; }
2186
}
2187
// the colored part of the backing bit
2189
highlight {
2190
background-color: $accent_color;
2191
&:disabled { background-color: transparent; }
2193
}
2194
// this is another differently styled part of the backing bit, the most relevant use case is for example
2196
// in media player to indicate how much video stream as been cached
2197
fill {
2198
background-color: $fill_color;
2199
&:disabled { background-color: transparent; }
2201
}
2202
slider {
2204
transition: all $shorter_duration $standard_curve;
2205
// border-radius: 100%;
2206
// background-color: $accent_color;
2207
background-repeat: no-repeat;
2208
background-position: center;
2209
@each $s, $as in ('', ''),
2211
(':disabled', '-disabled') {
2212
&#{$s} {
2213
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2214
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2216
}
2217
}
2218
background-size: calc(100% - 8px);
2220
&:hover { background-size: calc(100% - 4px); }
2222
&:active { background-size: calc(100% - 0px); }
2224
}
2225
// click-and-hold the slider to activate
2227
&.fine-tune {
2228
// to make the slider shrink in fine-tune mode
2229
slider { background-size: calc(100% - 12px); }
2230
}
2231
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2233
marks {
2235
color: $fill_color;
2236
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2238
(bottom, bottom, top),
2239
(top, left, right),
2240
(bottom, right, left) {
2241
&.#{$marks_class} {
2242
margin-#{$marks_margin}: $_marks_distance;
2243
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2244
}
2245
}
2246
}
2247
&.horizontal {
2249
indicator {
2250
min-height: $_marks_lenght;
2251
min-width: 1px;
2252
}
2253
}
2254
&.vertical {
2256
indicator {
2257
min-height: 1px;
2258
min-width: $_marks_lenght;
2259
}
2260
}
2261
// *WARNING* scale with marks madness following
2263
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2265
('vertical', 'vert') {
2266
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2267
('marks-after', 'marks-after:not(.marks-before)') {
2268
&.#{$dir_class}.#{$marks_class} {
2269
slider {
2270
@each $state, $state_infix in ('', ''),
2271
(':disabled', '-disabled') {
2272
&#{$state} {
2273
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2274
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2276
}
2277
}
2278
@if $dir_class == 'horizontal' {
2280
min-height: $marks_slider_size;
2281
min-width: $slider_size;
2282
@if $marks_infix == 'marks-before' {
2284
margin-top: $marks_slider_margin;
2285
background-position: center calc(100% - 4px);
2287
&:hover { background-position: center calc(100% - 2px); }
2289
&:active { background-position: center calc(100% - 0px); }
2291
}
2292
@if $marks_infix == 'marks-after' {
2294
margin-bottom: $marks_slider_margin;
2295
background-position: center calc(4px);
2297
&:hover { background-position: center calc(2px); }
2299
&:active { background-position: center calc(0px); }
2301
}
2302
}
2303
@if $dir_class == 'vertical' {
2305
min-height: $slider_size;
2306
min-width: $marks_slider_size;
2307
@if $marks_infix == 'marks-before' {
2309
margin-left: $marks_slider_margin;
2310
background-position: calc(4px) center;
2312
&:hover { background-position: calc(2px) center; }
2314
&:active { background-position: calc(0px) center; }
2316
}
2317
@if $marks_infix == 'marks-after' {
2319
margin-right: $marks_slider_margin;
2320
background-position: calc(100% - 4px) center;
2322
&:hover { background-position: calc(100% - 2px) center; }
2324
&:active { background-position: calc(100% - 0px) center; }
2326
}
2327
}
2328
}
2329
&.fine-tune slider {
2331
@if $dir_class == 'horizontal' {
2332
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2333
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2335
}
2336
@if $dir_class == 'vertical' {
2338
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2339
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2341
}
2342
}
2343
}
2344
}
2345
}
2346
&.color {
2348
min-height: 0;
2349
min-width: 0;
2350
&.horizontal {
2352
padding: 0 0 12px 0;
2353
slider {
2355
&:dir(ltr), &:dir(rtl) { // specificity bump
2356
margin-bottom: $color_slider_margin;
2357
margin-top: $color_marks_slider_margin;
2358
}
2359
}
2360
}
2361
&.vertical {
2363
&:dir(ltr) {
2364
padding: 0 0 0 12px;
2365
slider {
2367
margin-left: $color_slider_margin;
2368
margin-right: $color_marks_slider_margin;
2369
}
2370
}
2371
&:dir(rtl) {
2373
padding: 0 12px 0 0;
2374
slider {
2376
margin-right: $color_slider_margin;
2377
margin-left: $color_marks_slider_margin;
2378
}
2379
}
2380
}
2381
}
2382
}
2383
/*****************
2386
* Progress bars *
2387
*****************/
2388
progressbar {
2389
// sizing
2390
&.horizontal {
2391
trough,
2392
progress { min-height: $bar_size; }
2393
}
2394
&.vertical {
2396
trough,
2397
progress { min-width: $bar_size; }
2398
}
2399
// FIXME: insensitive state missing and some other state should be set probably
2401
color: $tertiary_fg_color;
2402
font-size: smaller;
2403
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2405
progress { background-color: $primary_color; }
2407
&.osd { // progressbar.osd used for epiphany page loading progress
2409
// min-width: $bar_size;
2410
// min-height: $bar_size;
2411
// background-color: transparent;
2412
// trough { background-color: transparent; }
2414
progress {
2416
}
2417
}
2418
}
2419
/*************
2422
* Level Bar *
2423
*************/
2424
levelbar {
2425
block {
2426
min-width: $medium_size;
2427
min-height: $bar_size;
2428
}
2429
&.vertical block {
2431
min-width: $bar_size;
2432
min-height: $medium_size;
2433
}
2434
trough {
2436
padding: 2px;
2437
border-radius: 2px;
2438
@include entry(normal);
2440
&:disabled { @include entry(disabled); }
2442
}
2443
&.horizontal.discrete block { margin: 0 1px; }
2445
&.vertical.discrete block { margin: 1px 0; }
2447
&.horizontal.discrete trough { padding: 2px 1px; }
2449
&.vertical.discrete trough { padding: 1px 2px; }
2451
block {
2453
&.low {
2454
background-color: $warning_color;
2455
}
2456
&.high,
2458
&:not(.empty) {
2459
background-color: $primary_color;
2460
}
2461
&.full {
2463
background-color: $success_color;
2464
}
2465
&.empty {
2467
background-color: $fill_color;
2468
color: $disabled_fg_color;
2469
}
2470
}
2471
}
2472
/****************
2475
* Print dialog *
2476
*****************/
2477
printdialog {
2478
paper {
2479
padding: 0;
2480
border: 1px solid $border_color;
2481
background: $base_color;
2482
color: $fg_color;
2483
}
2484
.dialog-action-box { margin: 12px; }
2486
}
2487
/**********
2490
* Frames *
2491
**********/
2492
frame > border,
2493
.frame {
2494
margin: 0;
2495
padding: 0;
2496
border: 1px solid $border_color;
2497
border-radius: 0;
2498
box-shadow: none;
2499
&.flat { border-style: none; }
2501
}
2502
actionbar > revealer > box {
2504
padding: $container_padding;
2505
border-top: 1px solid $border_color;
2506
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2508
}
2509
scrolledwindow {
2511
viewport.frame { // avoid double borders when viewport inside scrolled window
2512
border-style: none;
2513
}
2514
// This is used when content is touch-dragged past boundaries.
2516
// draws a box on top of the content, the size changes programmatically.
2517
@at-root overshoot {
2518
&.top { @include overshoot(top); }
2519
&.bottom { @include overshoot(bottom); }
2521
&.left { @include overshoot(left); }
2523
&.right { @include overshoot(right); }
2525
}
2526
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2528
@at-root undershoot {
2529
&.top { @include undershoot(top); }
2530
&.bottom { @include undershoot(bottom); }
2532
&.left { @include undershoot(left); }
2534
&.right { @include undershoot(right); }
2536
}
2537
@at-root junction { // the small square between two scrollbars
2539
border-style: solid none none solid;
2540
border-width: 1px;
2541
border-color: $border_color;
2542
background-color: $base_color;
2543
&:dir(rtl) { border-style: solid solid none none; }
2545
}
2546
}
2547
//vbox and hbox separators
2549
separator {
2550
min-width: 1px;
2551
min-height: 1px;
2552
background: $border_color;
2553
}
2554
/*********
2557
* Lists *
2558
*********/
2559
list {
2560
border-color: $border_color;
2561
background-color: $base_color;
2562
row { padding: 2px; }
2564
}
2565
// FIXME
2567
$row_transition: $longer_transition, background-color 0, color 0;
2568
row {
2570
&.activatable {
2571
transition: $row_transition,
2572
background-size $ripple_duration $deceleration_curve,
2573
background-image $ripple_duration * 2 $deceleration_curve;
2574
box-shadow: inset 0 0 0 9999px transparent;
2575
background-image: radial-gradient(circle farthest-corner at center,
2576
transparent 10%,
2577
transparent 0%);
2578
background-repeat: no-repeat;
2579
background-position: center;
2580
background-size: 1000% 1000%;
2581
&:hover {
2583
transition: $row_transition,
2584
box-shadow 0,
2585
background-size $ripple_duration $deceleration_curve,
2586
background-image $ripple_duration * 2 $deceleration_curve;
2587
box-shadow: inset 0 0 0 9999px $row_fill_color;
2588
}
2589
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2591
&:active {
2592
transition: $row_transition,
2593
background-size 0,
2594
background-image 0;
2595
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2596
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2597
background-image: radial-gradient(circle farthest-corner at center,
2598
$semi_fill_color 10%,
2599
transparent 0%);
2600
background-size: 0% 0%;
2601
}
2602
}
2603
&:selected { @extend %selected_items; }
2605
}
2606
/*********************
2609
* App Notifications *
2610
*********************/
2611
.app-notification {
2612
@extend %osd;
2613
@extend toolbar.osd;
2615
margin: 8px;
2617
button { @extend %button_basic.flat; }
2619
&.frame,
2621
border { border-style: none; }
2622
}
2623
/*************
2626
* Expanders *
2627
*************/
2628
expander {
2629
arrow {
2630
transition: all $shorter_duration $standard_curve;
2631
min-width: 16px;
2632
min-height: 16px;
2633
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2634
-gtk-icon-transform: rotate(-90deg);
2635
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2637
&:checked { -gtk-icon-transform: unset; }
2639
color: $secondary_fg_color;
2641
&:hover, &:active { color: $fg_color; }
2643
&:disabled { color: $disabled_secondary_fg_color; }
2645
&:selected {
2647
color: $secondary_inverse_fg_color;
2648
&:hover, &:active { color: $inverse_fg_color; }
2650
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2652
}
2653
}
2654
}
2655
/************
2658
* Calendar *
2659
***********/
2660
calendar {
2661
padding: 1px;
2662
border: 1px solid $border_color;
2663
color: $fg_color;
2664
&:disabled { color: $disabled_fg_color; }
2666
&:selected {
2668
@extend %selected_items;
2669
border-radius: 2px + 1px;
2671
}
2672
&.header {
2674
border-style: none none solid;
2675
border-radius: 0;
2676
}
2677
&.button { @extend %simple_flat_button; }
2679
&.highlight {
2681
color: gtkalpha(currentColor, $tertiary_opacity);
2682
font-weight: 500;
2683
}
2684
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2686
}
2687
/***********
2690
* Dialogs *
2691
***********/
2692
messagedialog { // Message Dialog styling
2693
&.background { background-color: $lighter_bg_color; }
2694
.titlebar {
2696
min-height: $small_size;
2697
border-style: none;
2698
box-shadow: inset 0 1px $highlight_color;
2699
background-color: $lighter_bg_color;
2700
color: $fg_color;
2701
&:backdrop { color: $secondary_fg_color; }
2703
}
2704
&.csd { // rounded bottom border styling for csd version
2706
&.background {
2707
// bigger radius for better antialiasing
2708
border-bottom-left-radius: 2px;
2709
border-bottom-right-radius: 2px;
2710
}
2711
.dialog-action-area button {
2713
padding: 8px 16px;
2714
border-top: 1px solid $border_color;
2715
border-radius: 0;
2716
@extend %simple_flat_button;
2718
&:first-child { border-bottom-left-radius: 2px; }
2720
&:last-child { border-bottom-right-radius: 2px; }
2722
}
2723
}
2724
}
2725
filechooser {
2727
.dialog-action-box { border-top: 1px solid $border_color; }
2728
#pathbarbox {
2730
border-bottom: 1px solid $border_color;
2731
background-color: $bg_color;
2732
}
2733
}
2734
filechooserbutton:drop(active) {
2736
box-shadow: none;
2737
}
2738
/***********
2741
* Sidebar *
2742
***********/
2743
.sidebar {
2744
border-style: none;
2745
background-color: $lighter_bg_color;
2746
@at-root %sidebar_left,
2748
&:dir(ltr),
2749
&.left,
2750
&.left:dir(rtl) {
2751
border-right: 1px solid $border_color;
2752
border-left-style: none;
2753
}
2754
@at-root %sidebar_right
2756
&:dir(rtl),
2757
&.right {
2758
border-left: 1px solid $border_color;
2759
border-right-style: none;
2760
}
2761
list { background-color: transparent; }
2763
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2765
}
2766
stacksidebar {
2768
&.sidebar {
2769
&:dir(ltr),
2770
&.left,
2771
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2772
&:dir(rtl),
2774
&.right { list { @extend %sidebar_right; }}
2775
}
2776
row {
2778
padding: 10px 4px;
2779
> label {
2781
padding-left: 6px;
2782
padding-right: 6px;
2783
}
2784
&.needs-attention > label { @extend %needs_attention; }
2786
}
2787
}
2788
/****************
2791
* File chooser *
2792
****************/
2793
placessidebar {
2794
> viewport.frame { border-style: none; }
2795
list { padding: (4px - 3px) 0 4px; }
2797
row {
2799
// Needs overriding of the GtkListBoxRow padding
2800
min-height: 32px;
2801
margin: -1px 0; // Remove unknown margins
2802
padding: 0;
2803
// Using margins/padding directly in the SidebarRow
2805
// will make the animation of the new bookmark row jump
2806
> revealer { padding: 0 12px; }
2807
&:selected { color: $inverse_fg_color; }
2809
&:disabled { color: $disabled_fg_color; }
2811
image.sidebar-icon {
2813
opacity: $tertiary_opacity; // dim the device icons
2814
&:dir(ltr) { padding-right: 8px; }
2816
&:dir(rtl) { padding-left: 8px; }
2817
}
2818
label.sidebar-label {
2820
&:dir(ltr) { padding-right: 2px; }
2821
&:dir(rtl) { padding-left: 2px; }
2822
}
2823
@at-root button.sidebar-button {
2825
@extend %simple_flat_button;
2826
@extend %small_button;
2828
row:selected & {
2830
}
2831
}
2832
&.sidebar-placeholder-row {
2834
min-height: 2px;
2835
padding: 0 8px;
2836
background-image: image($accent_color);
2837
background-clip: content-box;
2838
}
2839
&.sidebar-new-bookmark-row { color: $accent_color; }
2841
&:drop(active):not(:disabled) {
2843
box-shadow: inset 0 0 0 2px $accent_color;
2844
&:selected {
2846
// background-color: $accent_color;
2847
// color: $inverse_fg_color;
2848
}
2849
}
2850
}
2851
}
2852
placesview {
2854
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2855
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2857
// this selects the "connect to server" label
2859
> actionbar > revealer > box > label {
2860
padding-left: 8px;
2861
padding-right: 8px;
2862
}
2863
}
2864
/*********
2867
* Paned *
2868
*********/
2869
paned {
2870
> separator {
2871
min-width: 1px;
2872
min-height: 1px;
2873
-gtk-icon-source: none; // defeats the ugly default handle decoration
2874
border-style: none; // just to be sure
2875
background-color: transparent;
2876
// workaround, using background istead of a border since the border will get rendered twice (?)
2877
background-image: image($border_color);
2878
background-size: 1px 1px;
2879
background-clip: content-box; // avoids borders image being rendered twice (?)
2880
&.wide {
2882
min-width: 6px;
2883
min-height: 6px;
2884
background-color: $bg_color;
2885
background-image: image($border_color), image($border_color);
2886
background-size: 1px 1px, 1px 1px;
2887
}
2888
}
2889
&.horizontal > separator {
2891
background-repeat: repeat-y;
2892
&:dir(ltr) {
2894
margin: 0 -8px 0 0;
2895
padding: 0 8px 0 0;
2896
background-position: left;
2897
}
2898
&:dir(rtl) {
2900
margin: 0 0 0 -8px;
2901
padding: 0 0 0 8px;
2902
background-position: right;
2903
}
2904
&.wide {
2906
margin: 0;
2907
padding: 0;
2908
background-repeat: repeat-y, repeat-y;
2909
background-position: left, right;
2910
}
2911
}
2912
&.vertical > separator {
2914
margin: 0 0 -8px 0;
2915
padding: 0 0 8px 0;
2916
background-repeat: repeat-x;
2917
background-position: top;
2918
&.wide {
2920
margin: 0;
2921
padding: 0;
2922
background-repeat: repeat-x, repeat-x;
2923
background-position: bottom, top;
2924
}
2925
}
2926
}
2927
/**************
2930
* GtkInfoBar *
2931
**************/
2932
infobar {
2933
border-style: none;
2934
&.info { background-color: $info_bg_color; }
2936
&.question { background-color: $question_bg_color; }
2938
&.warning { background-color: $warning_bg_color; }
2940
&.error { background-color: $error_bg_color; }
2942
&.info,
2944
&.question,
2945
&.warning,
2946
&.error {
2947
> label, & { color: $inverse_fg_color; }
2948
button { @extend %button_selected; }
2950
selection {}
2952
*:link { @extend %link_selected; }
2954
}
2955
}
2956
/************
2959
* Tooltips *
2960
************/
2961
tooltip {
2962
&.background {
2963
// background-color needs to be set this way otherwise it gets drawn twice
2964
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2965
box-shadow: inset 0 1px $highlight_color;
2966
background-color: scale-alpha($base_color, $higher_opacity);
2967
}
2968
// @extend %osd;
2970
// padding: 4px; /* not working */
2972
border-radius: 2px;
2973
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2974
&:not(.csd) {
2976
border: 1px solid $border_color;
2977
border-radius: 2px + 1px;
2978
background-clip: $extra_background_clip;
2979
}
2980
// FIXME: we need a border or tooltips vanish on black background.
2982
decoration { background-color: transparent; }
2983
label {
2985
// tooltip label has already 6px margins
2986
min-height: 32px - 6px * 2;
2987
padding: 0 8px - 6px;
2988
}
2989
* {
2991
// workaround for Eclipse.
2992
// do not include any declaration here.
2993
// padding: 0;
2994
// background-color: transparent;
2995
// color: inherit;
2996
}
2997
}
2998
/*****************
3001
* Color Chooser *
3002
*****************/
3003
colorswatch {
3004
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3005
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3006
// applied to the overlay box.
3007
// base color corners rounding
3009
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3010
// sports a bigger radius.
3011
// nth-child is needed by the custom color strip.
3012
&.top {
3014
border-top-left-radius: $material_radius + 0.5px;
3015
border-top-right-radius: $material_radius + 0.5px;
3016
overlay {
3018
border-top-left-radius: $material_radius;
3019
border-top-right-radius: $material_radius;
3020
}
3021
}
3022
&.bottom {
3024
border-bottom-left-radius: $material_radius + 0.5px;
3025
border-bottom-right-radius: $material_radius + 0.5px;
3026
overlay {
3028
border-bottom-left-radius: $material_radius;
3029
border-bottom-right-radius: $material_radius;
3030
}
3031
}
3032
&.left,
3034
&:first-child:not(.top) {
3035
border-top-left-radius: $material_radius + 0.5px;
3036
border-bottom-left-radius: $material_radius + 0.5px;
3037
overlay {
3039
border-top-left-radius: $material_radius;
3040
border-bottom-left-radius: $material_radius;
3041
}
3042
}
3043
&.right,
3045
&:last-child:not(.bottom) {
3046
border-top-right-radius: $material_radius + 0.5px;
3047
border-bottom-right-radius: $material_radius + 0.5px;
3048
overlay {
3050
border-top-right-radius: $material_radius;
3051
border-bottom-right-radius: $material_radius;
3052
}
3053
}
3054
&.dark overlay { color: $light_fg_color; }
3056
&.light overlay { color: $dark_fg_color; }
3058
&.dark { color: $light_fg_color; } // for focus ring
3060
&.light { color: $dark_fg_color; } // for focus ring
3062
&:drop(active) {
3064
box-shadow: none;
3065
&.light overlay {
3067
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3068
}
3069
&.dark overlay {
3071
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3072
}
3073
}
3074
overlay {
3076
transition: $shadow_transition;
3077
box-shadow: $shadow_1;
3078
&:hover { box-shadow: $shadow_2; }
3080
}
3081
&#add-color-button {
3083
border-radius: $material_radius $material_radius 0 0;
3084
color: $light_fg_color; // for focus ring
3085
&:only-child { border-radius: $material_radius; }
3087
overlay {
3089
background-image: linear-gradient(to right,
3090
$error_bg_color 25%,
3091
$warning_bg_color 25%, $warning_bg_color 50%,
3092
$info_bg_color 50%, $info_bg_color 75%,
3093
$question_bg_color 75%);
3094
color: $light_fg_color;
3095
}
3096
}
3097
&:disabled {
3099
opacity: $disabled_opacity;
3100
overlay { box-shadow: none; }
3102
}
3103
row:selected & {
3105
}
3106
&#editor-color-sample {
3108
border-radius: $material_radius + 0.5px;
3109
overlay { border-radius: $material_radius; }
3111
// overlay:hover { box-shadow: $shadow_1; }
3113
}
3114
}
3115
// colorscale popup
3117
colorchooser .popover.osd {
3118
transition: $shadow_transition;
3119
border-radius: 2px;
3120
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3121
background-color: $base_color;
3122
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3124
spinbutton:not(.vertical) { @extend %entry.flat; }
3126
}
3127
/********
3130
* Misc *
3131
********/
3132
//content view (grid/list)
3133
.content-view {
3134
background-color: $bg_color;
3135
// &:hover { -gtk-icon-effect: highlight; }
3137
rubberband { @extend rubberband; }
3139
}
3140
.scale-popup {
3142
.osd & { @extend %osd; }
3143
.osd & button.flat { //FIXME: quick hack, redo properly
3145
}
3146
button { // +/- buttons on GtkVolumeButton popup
3148
}
3149
}
3150
/**********************
3153
* Window Decorations *
3154
*********************/
3155
decoration {
3156
transition: $shadow_transition;
3157
border-radius: 2px 2px 0 0;
3158
box-shadow: $shadow_4, 0 16px 16px transparent;
3159
// FIXME rationalize shadows
3161
// this is used for the resize cursor area
3163
margin: 8px;
3164
&:backdrop {
3166
// the transparent shadow here is to enforce that the shadow extents don't
3167
// change when we go to backdrop, to prevent jumping windows.
3168
// The biggest shadow should be in the same order then in the active state
3169
// or the jumping will happen during the transition.
3170
box-shadow: $shadow_2, 0 16px 16px transparent;
3171
}
3172
.maximized &,
3174
.fullscreen &,
3175
.tiled & { border-radius: 0; }
3176
.popup & { box-shadow: none; }
3178
// server-side decorations as used by mutter
3180
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3181
.csd.popup & {
3183
border-radius: 2px;
3184
box-shadow: $shadow_2;
3185
}
3186
tooltip.csd & {
3188
border-radius: 2px;
3189
box-shadow: $shadow_2;
3190
}
3191
messagedialog.csd & {
3193
border-radius: 2px;
3194
// box-shadow: $shadow_4, 0 16px 16px transparent;
3195
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3197
}
3198
.solid-csd & {
3200
margin: 0;
3201
padding: 4px;
3202
// border: solid 1px $border_color;
3203
// border-radius: 0;
3204
box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3205
// background-color: $border_color;
3206
}
3207
}
3208
// Window Close button
3210
button.titlebutton {
3211
// @extend %simple_flat_button;
3212
@extend %circular_button;
3214
.selection-mode & {
3216
}
3217
}
3218
// catch all extend :)
3221
%selected_items {
3223
background-color: $primary_color;
3224
@at-root %nobg_selected_items, & {
3226
color: $inverse_fg_color;
3227
&:disabled { color: $disabled_inverse_fg_color; }
3229
}
3230
}
3231
.monospace { font-family: monospace; }
3233
/**********************
3236
* Touch Copy & Paste *
3237
*********************/
3238
//touch selection handlebars for the Popover.osd above
3239
cursor-handle {
3240
border-radius: $circular_radius;
3241
background-color: $accent_color;
3242
background-image: none;
3243
&.top:dir(ltr), &.bottom:dir(rtl) {
3245
padding-left: 6px;
3246
border-top-right-radius: 0;
3247
}
3248
&.bottom:dir(ltr), &.top:dir(rtl) {
3250
padding-right: 6px;
3251
border-top-left-radius: 0;
3252
}
3253
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3255
-GtkWidget-text-handle-width: 24;
3256
-GtkWidget-text-handle-height: 30;
3257
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3259
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3260
url('#{$_url}@2.png'));
3261
}
3262
}
3263
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3265
%circular_button,
3267
button.close,
3268
button.circular { // FIXME: aggregate to buttons
3269
border-radius: $circular_radius;
3270
-gtk-outline-radius: $circular_radius;
3271
// label { padding: 0; }
3273
}
3274
%small_button {
3276
min-height: $small_size;
3277
min-width: $small_size;
3278
padding: 0;
3279
border-radius: $circular_radius;
3280
-gtk-outline-radius: $circular_radius;
3281
}
3282
// shortcut window keys
3284
.keycap {
3285
min-width: 28px - 8px * 2;
3286
min-height: 28px - 2px;
3287
margin-top: 2px;
3288
padding-bottom: 2px;
3289
padding-left: 8px;
3290
padding-right: 8px;
3291
border: solid 1px $border_color;
3293
border-radius: 2px + 1px;
3294
box-shadow: inset 0 -2px $border_color;
3295
background-color: $base_color;
3296
color: $fg_color;
3297
font-size: smaller;
3298
}
3299
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3301
transition: $longer_transition;
3302
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3303
caret-color: $accent_color;
3304
}
3305
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3307
stackswitcher button.circular,
3309
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3310
min-width: $medium_size;
3311
min-height: $medium_size;
3312
padding: 0;
3313
}
3314