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 ('', '-selectionmode'),
1927
(':hover', '-hover-selectionmode'),
1928
(':checked', '-checked-selectionmode'),
1929
(':checked:hover', '-checked-hover-selectionmode') {
1930
.view.content-view.check#{$s}:not(list) {
1931
-gtk-icon-shadow: $shadow_1;
1932
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1933
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1934
margin: 8px;
1935
background-color: transparent;
1936
}
1937
}
1938
checkbutton.text-button,
1940
radiobutton.text-button {
1941
// this is for a nice focus on check and radios text
1942
padding: 2px;
1943
outline-offset: 0;
1944
label:not(:only-child) { margin: 0 4px; }
1946
}
1947
check,
1949
radio {
1950
min-height: 24px;
1951
min-width: 24px;
1952
margin: -($large_size - 24px) / 2;
1953
padding: ($large_size - 24px) / 2;
1954
@extend %simple_flat_button;
1956
@extend %circular_button;
1958
&:checked, &:indeterminate { color: $accent_color; }
1960
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1962
// &:only-child { margin: -12px; }
1964
row &:not(:checked):not(:indeterminate) {
1966
color: gtkalpha(currentColor, $secondary_opacity);
1967
&:hover, &:active { color: currentColor; }
1969
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1971
}
1972
menu menuitem & {
1974
transition: none;
1975
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1976
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1978
&, &:hover, &:disabled {
1980
box-shadow: none;
1981
// color: inherit;
1982
// animation: none;
1983
}
1984
}
1985
}
1986
%check,
1988
check {
1989
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1990
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1991
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1993
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1994
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1996
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1997
}
1998
$radio_indicator: 10 / ($large_size / 1px) / 2;
2000
$radio_radius_slice: #{$large_size / 2 / 1px};
2001
$radio_radius_width: #{$large_size / 2};
2002
%radio,
2004
radio {
2005
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
2006
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
2007
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2009
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
2010
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2012
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2013
border-image: -gtk-gradient(radial,
2015
center center, 0,
2016
center center, 0.001,
2017
to($accent_color),
2018
to(transparent))
2019
$radio_radius_slice / $radio_radius_width;
2020
&:checked {
2022
border-image: -gtk-gradient(radial,
2023
center center, 0,
2024
center center, $radio_indicator,
2025
to($accent_color),
2026
to(transparent))
2027
$radio_radius_slice / $radio_radius_width;
2028
}
2029
&:checked:disabled {
2031
border-image: -gtk-gradient(radial,
2032
center center, 0,
2033
center center, $radio_indicator,
2034
to(scale-alpha($accent_color, $disabled_opacity)),
2035
to(transparent))
2036
$radio_radius_slice / $radio_radius_width;
2037
}
2038
&:indeterminate:checked {
2040
border-image: -gtk-gradient(radial,
2041
center center, 0,
2042
center center, 0.001,
2043
to($accent_color),
2044
to(transparent))
2045
$radio_radius_slice / $radio_radius_width;
2046
}
2047
}
2048
// let's animate things
2050
@keyframes check_check {
2051
from { -gtk-icon-transform: rotate(90deg); }
2052
to { -gtk-icon-transform: unset; }
2053
}
2054
@keyframes check_radio { // FIXME: cannot animate border-image
2056
from {
2057
border-image: -gtk-gradient(radial,
2058
center center, 0,
2059
center center, 0.001,
2060
to($accent_color),
2061
to(transparent))
2062
$radio_radius_slice / $radio_radius_width;
2063
}
2064
to {
2066
border-image: -gtk-gradient(radial,
2067
center center, 0,
2068
center center, $radio_indicator,
2069
to($accent_color),
2070
to(transparent))
2071
$radio_radius_slice / $radio_radius_width;
2072
}
2073
}
2074
@keyframes check_indeterminate {
2076
from { -gtk-icon-transform: unset; }
2077
50% { -gtk-icon-transform: scale(0, 1); }
2078
to { -gtk-icon-transform: unset; }
2079
}
2080
%check_checked,
2082
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2083
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2085
// %radio_checked,
2087
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2088
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2090
%indeterminate_checked,
2092
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2093
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2095
// no animations in menus
2097
menu menuitem {
2098
check:not(:indeterminate):checked,
2099
radio:not(:indeterminate):checked,
2100
check:indeterminate:checked,
2101
radio:indeterminate:checked { animation: none; }
2102
}
2103
treeview.view check,
2105
treeview.view radio {
2106
padding: 0;
2107
&:hover {
2109
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2110
&:disabled { box-shadow: none; }
2112
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2114
}
2115
& {
2117
color: $secondary_fg_color;
2118
&:hover, &:active { color: $fg_color; }
2120
&:disabled { color: $disabled_secondary_fg_color; }
2122
&:checked, &:indeterminate { color: $accent_color; }
2124
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2126
}
2127
&:selected {
2129
color: $secondary_inverse_fg_color;
2130
&:hover, &:active { color: $inverse_fg_color; }
2132
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2134
&:checked, &:indeterminate { color: $accent_color; }
2136
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2138
}
2139
}
2140
treeview.view radio:checked {
2142
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2143
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2144
border-image: none;
2145
}
2146
/************
2149
* GtkScale *
2150
************/
2151
scale {
2152
// sizing
2153
$_marks_lenght: 8px;
2154
$_marks_distance: 8px;
2155
$slider_size: 24px;
2157
$marks_slider_size: 30px;
2158
$slider_margin: -($slider_size - $bar_size) / 2;
2160
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2161
$color_slider_margin: -($slider_size) / 2;
2163
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2164
min-height: $medium_size - $slider_size;
2166
min-width: $medium_size - $slider_size;
2167
padding: ($slider_size / 2);
2168
* { transition: $longer_transition; }
2170
// the slider is inside the trough, so to have make it bigger there's a negative margin
2172
slider {
2173
min-height: $slider_size;
2174
min-width: $slider_size;
2175
margin: $slider_margin;
2176
}
2177
// the backing bit
2179
trough {
2180
outline-offset: 2px;
2181
background-color: $fill_color;
2182
&:disabled { color: $disabled_fg_color; }
2184
}
2185
// the colored part of the backing bit
2187
highlight {
2188
background-color: $accent_color;
2189
&:disabled { background-color: transparent; }
2191
}
2192
// this is another differently styled part of the backing bit, the most relevant use case is for example
2194
// in media player to indicate how much video stream as been cached
2195
fill {
2196
background-color: $fill_color;
2197
&:disabled { background-color: transparent; }
2199
}
2200
slider {
2202
transition: all $shorter_duration $standard_curve;
2203
// border-radius: 100%;
2204
// background-color: $accent_color;
2205
background-repeat: no-repeat;
2206
background-position: center;
2207
@each $s, $as in ('', ''),
2209
(':disabled', '-insensitive') {
2210
&#{$s} {
2211
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2212
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2214
}
2215
}
2216
background-size: calc(100% - 8px);
2218
&:hover { background-size: calc(100% - 4px); }
2220
&:active { background-size: calc(100% - 0px); }
2222
}
2223
// click-and-hold the slider to activate
2225
&.fine-tune {
2226
// to make the slider shrink in fine-tune mode
2227
slider { background-size: calc(100% - 12px); }
2228
}
2229
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2231
marks {
2233
color: $fill_color;
2234
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2236
(bottom, bottom, top),
2237
(top, left, right),
2238
(bottom, right, left) {
2239
&.#{$marks_class} {
2240
margin-#{$marks_margin}: $_marks_distance;
2241
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2242
}
2243
}
2244
}
2245
&.horizontal {
2247
indicator {
2248
min-height: $_marks_lenght;
2249
min-width: 1px;
2250
}
2251
}
2252
&.vertical {
2254
indicator {
2255
min-height: 1px;
2256
min-width: $_marks_lenght;
2257
}
2258
}
2259
// *WARNING* scale with marks madness following
2261
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2263
('vertical', 'vert') {
2264
@each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
2265
('scale-has-marks-below', 'marks-after:not(.marks-before)') {
2266
&.#{$dir_class}.#{$marks_class} {
2267
slider {
2268
@each $state, $state_infix in ('', ''),
2269
(':disabled', '-insensitive') {
2270
&#{$state} {
2271
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$asset_suffix}';
2272
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2274
}
2275
}
2276
@if $dir_class == 'horizontal' {
2278
min-height: $marks_slider_size;
2279
min-width: $slider_size;
2280
@if $marks_infix == 'scale-has-marks-above' {
2282
margin-top: $marks_slider_margin;
2283
background-position: center calc(100% - 4px);
2285
&:hover { background-position: center calc(100% - 2px); }
2287
&:active { background-position: center calc(100% - 0px); }
2289
}
2290
@if $marks_infix == 'scale-has-marks-below' {
2292
margin-bottom: $marks_slider_margin;
2293
background-position: center calc(4px);
2295
&:hover { background-position: center calc(2px); }
2297
&:active { background-position: center calc(0px); }
2299
}
2300
}
2301
@if $dir_class == 'vertical' {
2303
min-height: $slider_size;
2304
min-width: $marks_slider_size;
2305
@if $marks_infix == 'scale-has-marks-above' {
2307
margin-left: $marks_slider_margin;
2308
background-position: calc(4px) center;
2310
&:hover { background-position: calc(2px) center; }
2312
&:active { background-position: calc(0px) center; }
2314
}
2315
@if $marks_infix == 'scale-has-marks-below' {
2317
margin-right: $marks_slider_margin;
2318
background-position: calc(100% - 4px) center;
2320
&:hover { background-position: calc(100% - 2px) center; }
2322
&:active { background-position: calc(100% - 0px) center; }
2324
}
2325
}
2326
}
2327
&.fine-tune slider {
2329
@if $dir_class == 'horizontal' {
2330
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2331
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2333
}
2334
@if $dir_class == 'vertical' {
2336
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2337
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2339
}
2340
}
2341
}
2342
}
2343
}
2344
&.color {
2346
min-height: 0;
2347
min-width: 0;
2348
&.horizontal {
2350
padding: 0 0 12px 0;
2351
slider {
2353
&:dir(ltr), &:dir(rtl) { // specificity bump
2354
margin-bottom: $color_slider_margin;
2355
margin-top: $color_marks_slider_margin;
2356
}
2357
}
2358
}
2359
&.vertical {
2361
&:dir(ltr) {
2362
padding: 0 0 0 12px;
2363
slider {
2365
margin-left: $color_slider_margin;
2366
margin-right: $color_marks_slider_margin;
2367
}
2368
}
2369
&:dir(rtl) {
2371
padding: 0 12px 0 0;
2372
slider {
2374
margin-right: $color_slider_margin;
2375
margin-left: $color_marks_slider_margin;
2376
}
2377
}
2378
}
2379
}
2380
}
2381
/*****************
2384
* Progress bars *
2385
*****************/
2386
progressbar {
2387
// sizing
2388
&.horizontal {
2389
trough,
2390
progress { min-height: $bar_size; }
2391
}
2392
&.vertical {
2394
trough,
2395
progress { min-width: $bar_size; }
2396
}
2397
// FIXME: insensitive state missing and some other state should be set probably
2399
color: $tertiary_fg_color;
2400
font-size: smaller;
2401
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2403
progress { background-color: $primary_color; }
2405
&.osd { // progressbar.osd used for epiphany page loading progress
2407
// min-width: $bar_size;
2408
// min-height: $bar_size;
2409
// background-color: transparent;
2410
// trough { background-color: transparent; }
2412
progress {
2414
}
2415
}
2416
}
2417
/*************
2420
* Level Bar *
2421
*************/
2422
levelbar {
2423
block {
2424
min-width: $medium_size;
2425
min-height: $bar_size;
2426
}
2427
&.vertical block {
2429
min-width: $bar_size;
2430
min-height: $medium_size;
2431
}
2432
trough {
2434
padding: 2px;
2435
border-radius: 2px;
2436
@include entry(normal);
2438
&:disabled { @include entry(disabled); }
2440
}
2441
&.horizontal.discrete block { margin: 0 1px; }
2443
&.vertical.discrete block { margin: 1px 0; }
2445
&.horizontal.discrete trough { padding: 2px 1px; }
2447
&.vertical.discrete trough { padding: 1px 2px; }
2449
block {
2451
&.low {
2452
background-color: $warning_color;
2453
}
2454
&.high,
2456
&:not(.empty) {
2457
background-color: $primary_color;
2458
}
2459
&.full {
2461
background-color: $success_color;
2462
}
2463
&.empty {
2465
background-color: $fill_color;
2466
color: $disabled_fg_color;
2467
}
2468
}
2469
}
2470
/****************
2473
* Print dialog *
2474
*****************/
2475
printdialog {
2476
paper {
2477
padding: 0;
2478
border: 1px solid $border_color;
2479
background: $base_color;
2480
color: $fg_color;
2481
}
2482
.dialog-action-box { margin: 12px; }
2484
}
2485
/**********
2488
* Frames *
2489
**********/
2490
frame > border,
2491
.frame {
2492
margin: 0;
2493
padding: 0;
2494
border: 1px solid $border_color;
2495
border-radius: 0;
2496
box-shadow: none;
2497
&.flat { border-style: none; }
2499
}
2500
actionbar > revealer > box {
2502
padding: $container_padding;
2503
border-top: 1px solid $border_color;
2504
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2506
}
2507
scrolledwindow {
2509
viewport.frame { // avoid double borders when viewport inside scrolled window
2510
border-style: none;
2511
}
2512
// This is used when content is touch-dragged past boundaries.
2514
// draws a box on top of the content, the size changes programmatically.
2515
@at-root overshoot {
2516
&.top { @include overshoot(top); }
2517
&.bottom { @include overshoot(bottom); }
2519
&.left { @include overshoot(left); }
2521
&.right { @include overshoot(right); }
2523
}
2524
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2526
@at-root undershoot {
2527
&.top { @include undershoot(top); }
2528
&.bottom { @include undershoot(bottom); }
2530
&.left { @include undershoot(left); }
2532
&.right { @include undershoot(right); }
2534
}
2535
@at-root junction { // the small square between two scrollbars
2537
border-style: solid none none solid;
2538
border-width: 1px;
2539
border-color: $border_color;
2540
background-color: $base_color;
2541
&:dir(rtl) { border-style: solid solid none none; }
2543
}
2544
}
2545
//vbox and hbox separators
2547
separator {
2548
min-width: 1px;
2549
min-height: 1px;
2550
background: $border_color;
2551
}
2552
/*********
2555
* Lists *
2556
*********/
2557
list {
2558
border-color: $border_color;
2559
background-color: $base_color;
2560
row { padding: 2px; }
2562
}
2563
// FIXME
2565
$row_transition: $longer_transition, background-color 0, color 0;
2566
row {
2568
&.activatable {
2569
transition: $row_transition,
2570
background-size $ripple_duration $deceleration_curve,
2571
background-image $ripple_duration * 2 $deceleration_curve;
2572
box-shadow: inset 0 0 0 9999px transparent;
2573
background-image: radial-gradient(circle farthest-corner at center,
2574
transparent 10%,
2575
transparent 0%);
2576
background-repeat: no-repeat;
2577
background-position: center;
2578
background-size: 1000% 1000%;
2579
&:hover {
2581
transition: $row_transition,
2582
box-shadow 0,
2583
background-size $ripple_duration $deceleration_curve,
2584
background-image $ripple_duration * 2 $deceleration_curve;
2585
box-shadow: inset 0 0 0 9999px $row_fill_color;
2586
}
2587
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2589
&:active {
2590
transition: $row_transition,
2591
background-size 0,
2592
background-image 0;
2593
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2594
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2595
background-image: radial-gradient(circle farthest-corner at center,
2596
$semi_fill_color 10%,
2597
transparent 0%);
2598
background-size: 0% 0%;
2599
}
2600
}
2601
&:selected { @extend %selected_items; }
2603
}
2604
/*********************
2607
* App Notifications *
2608
*********************/
2609
.app-notification {
2610
@extend %osd;
2611
@extend toolbar.osd;
2613
margin: 8px;
2615
button { @extend %button_basic.flat; }
2617
&.frame,
2619
border { border-style: none; }
2620
}
2621
/*************
2624
* Expanders *
2625
*************/
2626
expander {
2627
arrow {
2628
transition: all $shorter_duration $standard_curve;
2629
min-width: 16px;
2630
min-height: 16px;
2631
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2632
-gtk-icon-transform: rotate(-90deg);
2633
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2635
&:checked { -gtk-icon-transform: unset; }
2637
color: $secondary_fg_color;
2639
&:hover, &:active { color: $fg_color; }
2641
&:disabled { color: $disabled_secondary_fg_color; }
2643
&:selected {
2645
color: $secondary_inverse_fg_color;
2646
&:hover, &:active { color: $inverse_fg_color; }
2648
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2650
}
2651
}
2652
}
2653
/************
2656
* Calendar *
2657
***********/
2658
calendar {
2659
padding: 1px;
2660
border: 1px solid $border_color;
2661
color: $fg_color;
2662
&:disabled { color: $disabled_fg_color; }
2664
&:selected {
2666
@extend %selected_items;
2667
border-radius: 2px + 1px;
2669
}
2670
&.header {
2672
border-style: none none solid;
2673
border-radius: 0;
2674
}
2675
&.button { @extend %simple_flat_button; }
2677
&.highlight {
2679
color: gtkalpha(currentColor, $tertiary_opacity);
2680
font-weight: 500;
2681
}
2682
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2684
}
2685
/***********
2688
* Dialogs *
2689
***********/
2690
messagedialog { // Message Dialog styling
2691
&.background { background-color: $lighter_bg_color; }
2692
.titlebar {
2694
min-height: $small_size;
2695
border-style: none;
2696
box-shadow: inset 0 1px $highlight_color;
2697
background-color: $lighter_bg_color;
2698
color: $fg_color;
2699
&:backdrop { color: $secondary_fg_color; }
2701
}
2702
&.csd { // rounded bottom border styling for csd version
2704
&.background {
2705
// bigger radius for better antialiasing
2706
border-bottom-left-radius: 2px;
2707
border-bottom-right-radius: 2px;
2708
}
2709
.dialog-action-area button {
2711
padding: 8px 16px;
2712
border-top: 1px solid $border_color;
2713
border-radius: 0;
2714
@extend %simple_flat_button;
2716
&:first-child { border-bottom-left-radius: 2px; }
2718
&:last-child { border-bottom-right-radius: 2px; }
2720
}
2721
}
2722
}
2723
filechooser {
2725
.dialog-action-box { border-top: 1px solid $border_color; }
2726
#pathbarbox {
2728
border-bottom: 1px solid $border_color;
2729
background-color: $bg_color;
2730
}
2731
}
2732
filechooserbutton:drop(active) {
2734
box-shadow: none;
2735
}
2736
/***********
2739
* Sidebar *
2740
***********/
2741
.sidebar {
2742
border-style: none;
2743
background-color: $lighter_bg_color;
2744
@at-root %sidebar_left,
2746
&:dir(ltr),
2747
&.left,
2748
&.left:dir(rtl) {
2749
border-right: 1px solid $border_color;
2750
border-left-style: none;
2751
}
2752
@at-root %sidebar_right
2754
&:dir(rtl),
2755
&.right {
2756
border-left: 1px solid $border_color;
2757
border-right-style: none;
2758
}
2759
list { background-color: transparent; }
2761
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2763
}
2764
stacksidebar {
2766
&.sidebar {
2767
&:dir(ltr),
2768
&.left,
2769
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2770
&:dir(rtl),
2772
&.right { list { @extend %sidebar_right; }}
2773
}
2774
row {
2776
padding: 10px 4px;
2777
> label {
2779
padding-left: 6px;
2780
padding-right: 6px;
2781
}
2782
&.needs-attention > label { @extend %needs_attention; }
2784
}
2785
}
2786
/****************
2789
* File chooser *
2790
****************/
2791
placessidebar {
2792
> viewport.frame { border-style: none; }
2793
list { padding: (4px - 3px) 0 4px; }
2795
row {
2797
// Needs overriding of the GtkListBoxRow padding
2798
min-height: 32px;
2799
margin: -1px 0; // Remove unknown margins
2800
padding: 0;
2801
// Using margins/padding directly in the SidebarRow
2803
// will make the animation of the new bookmark row jump
2804
> revealer { padding: 0 12px; }
2805
&:selected { color: $inverse_fg_color; }
2807
&:disabled { color: $disabled_fg_color; }
2809
image.sidebar-icon {
2811
opacity: $tertiary_opacity; // dim the device icons
2812
&:dir(ltr) { padding-right: 8px; }
2814
&:dir(rtl) { padding-left: 8px; }
2815
}
2816
label.sidebar-label {
2818
&:dir(ltr) { padding-right: 2px; }
2819
&:dir(rtl) { padding-left: 2px; }
2820
}
2821
@at-root button.sidebar-button {
2823
@extend %simple_flat_button;
2824
@extend %small_button;
2826
row:selected & {
2828
}
2829
}
2830
&.sidebar-placeholder-row {
2832
min-height: 2px;
2833
padding: 0 8px;
2834
background-image: image($accent_color);
2835
background-clip: content-box;
2836
}
2837
&.sidebar-new-bookmark-row { color: $accent_color; }
2839
&:drop(active):not(:disabled) {
2841
box-shadow: inset 0 0 0 2px $accent_color;
2842
&:selected {
2844
// background-color: $accent_color;
2845
// color: $inverse_fg_color;
2846
}
2847
}
2848
}
2849
}
2850
placesview {
2852
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2853
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2855
// this selects the "connect to server" label
2857
> actionbar > revealer > box > label {
2858
padding-left: 8px;
2859
padding-right: 8px;
2860
}
2861
}
2862
/*********
2865
* Paned *
2866
*********/
2867
paned {
2868
> separator {
2869
min-width: 1px;
2870
min-height: 1px;
2871
-gtk-icon-source: none; // defeats the ugly default handle decoration
2872
border-style: none; // just to be sure
2873
background-color: transparent;
2874
// workaround, using background istead of a border since the border will get rendered twice (?)
2875
background-image: image($border_color);
2876
background-size: 1px 1px;
2877
background-clip: content-box; // avoids borders image being rendered twice (?)
2878
&.wide {
2880
min-width: 6px;
2881
min-height: 6px;
2882
background-color: $bg_color;
2883
background-image: image($border_color), image($border_color);
2884
background-size: 1px 1px, 1px 1px;
2885
}
2886
}
2887
&.horizontal > separator {
2889
background-repeat: repeat-y;
2890
&:dir(ltr) {
2892
margin: 0 -8px 0 0;
2893
padding: 0 8px 0 0;
2894
background-position: left;
2895
}
2896
&:dir(rtl) {
2898
margin: 0 0 0 -8px;
2899
padding: 0 0 0 8px;
2900
background-position: right;
2901
}
2902
&.wide {
2904
margin: 0;
2905
padding: 0;
2906
background-repeat: repeat-y, repeat-y;
2907
background-position: left, right;
2908
}
2909
}
2910
&.vertical > separator {
2912
margin: 0 0 -8px 0;
2913
padding: 0 0 8px 0;
2914
background-repeat: repeat-x;
2915
background-position: top;
2916
&.wide {
2918
margin: 0;
2919
padding: 0;
2920
background-repeat: repeat-x, repeat-x;
2921
background-position: bottom, top;
2922
}
2923
}
2924
}
2925
/**************
2928
* GtkInfoBar *
2929
**************/
2930
infobar {
2931
border-style: none;
2932
&.info { background-color: $info_bg_color; }
2934
&.question { background-color: $question_bg_color; }
2936
&.warning { background-color: $warning_bg_color; }
2938
&.error { background-color: $error_bg_color; }
2940
&.info,
2942
&.question,
2943
&.warning,
2944
&.error {
2945
> label, & { color: $inverse_fg_color; }
2946
button { @extend %button_selected; }
2948
selection {}
2950
*:link { @extend %link_selected; }
2952
}
2953
}
2954
/************
2957
* Tooltips *
2958
************/
2959
tooltip {
2960
&.background {
2961
// background-color needs to be set this way otherwise it gets drawn twice
2962
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2963
box-shadow: inset 0 1px $highlight_color;
2964
background-color: scale-alpha($base_color, $higher_opacity);
2965
}
2966
// @extend %osd;
2968
// padding: 4px; /* not working */
2970
border-radius: 2px;
2971
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2972
&:not(.csd) {
2974
border: 1px solid $border_color;
2975
border-radius: 2px + 1px;
2976
background-clip: $extra_background_clip;
2977
}
2978
// FIXME: we need a border or tooltips vanish on black background.
2980
decoration { background-color: transparent; }
2981
label {
2983
// tooltip label has already 6px margins
2984
min-height: 32px - 6px * 2;
2985
padding: 0 8px - 6px;
2986
}
2987
* {
2989
// workaround for Eclipse.
2990
// do not include any declaration here.
2991
// padding: 0;
2992
// background-color: transparent;
2993
// color: inherit;
2994
}
2995
}
2996
/*****************
2999
* Color Chooser *
3000
*****************/
3001
colorswatch {
3002
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3003
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3004
// applied to the overlay box.
3005
// base color corners rounding
3007
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3008
// sports a bigger radius.
3009
// nth-child is needed by the custom color strip.
3010
&.top {
3012
border-top-left-radius: $material_radius + 0.5px;
3013
border-top-right-radius: $material_radius + 0.5px;
3014
overlay {
3016
border-top-left-radius: $material_radius;
3017
border-top-right-radius: $material_radius;
3018
}
3019
}
3020
&.bottom {
3022
border-bottom-left-radius: $material_radius + 0.5px;
3023
border-bottom-right-radius: $material_radius + 0.5px;
3024
overlay {
3026
border-bottom-left-radius: $material_radius;
3027
border-bottom-right-radius: $material_radius;
3028
}
3029
}
3030
&.left,
3032
&:first-child:not(.top) {
3033
border-top-left-radius: $material_radius + 0.5px;
3034
border-bottom-left-radius: $material_radius + 0.5px;
3035
overlay {
3037
border-top-left-radius: $material_radius;
3038
border-bottom-left-radius: $material_radius;
3039
}
3040
}
3041
&.right,
3043
&:last-child:not(.bottom) {
3044
border-top-right-radius: $material_radius + 0.5px;
3045
border-bottom-right-radius: $material_radius + 0.5px;
3046
overlay {
3048
border-top-right-radius: $material_radius;
3049
border-bottom-right-radius: $material_radius;
3050
}
3051
}
3052
&.dark overlay { color: $light_fg_color; }
3054
&.light overlay { color: $dark_fg_color; }
3056
&.dark { color: $light_fg_color; } // for focus ring
3058
&.light { color: $dark_fg_color; } // for focus ring
3060
&:drop(active) {
3062
box-shadow: none;
3063
&.light overlay {
3065
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3066
}
3067
&.dark overlay {
3069
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3070
}
3071
}
3072
overlay {
3074
transition: $shadow_transition;
3075
box-shadow: $shadow_1;
3076
&:hover { box-shadow: $shadow_2; }
3078
}
3079
&#add-color-button {
3081
border-radius: $material_radius $material_radius 0 0;
3082
color: $light_fg_color; // for focus ring
3083
&:only-child { border-radius: $material_radius; }
3085
overlay {
3087
background-image: linear-gradient(to right,
3088
$error_bg_color 25%,
3089
$warning_bg_color 25%, $warning_bg_color 50%,
3090
$info_bg_color 50%, $info_bg_color 75%,
3091
$question_bg_color 75%);
3092
color: $light_fg_color;
3093
}
3094
}
3095
&:disabled {
3097
opacity: $disabled_opacity;
3098
overlay { box-shadow: none; }
3100
}
3101
row:selected & {
3103
}
3104
&#editor-color-sample {
3106
border-radius: $material_radius + 0.5px;
3107
overlay { border-radius: $material_radius; }
3109
// overlay:hover { box-shadow: $shadow_1; }
3111
}
3112
}
3113
// colorscale popup
3115
colorchooser .popover.osd {
3116
transition: $shadow_transition;
3117
border-radius: 2px;
3118
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3119
background-color: $base_color;
3120
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3122
spinbutton:not(.vertical) { @extend %entry.flat; }
3124
}
3125
/********
3128
* Misc *
3129
********/
3130
//content view (grid/list)
3131
.content-view {
3132
background-color: $bg_color;
3133
// &:hover { -gtk-icon-effect: highlight; }
3135
rubberband { @extend rubberband; }
3137
}
3138
.scale-popup {
3140
.osd & { @extend %osd; }
3141
.osd & button.flat { //FIXME: quick hack, redo properly
3143
}
3144
button { // +/- buttons on GtkVolumeButton popup
3146
}
3147
}
3148
/**********************
3151
* Window Decorations *
3152
*********************/
3153
decoration {
3154
transition: $shadow_transition;
3155
border-radius: 2px 2px 0 0;
3156
box-shadow: $shadow_4, 0 16px 16px transparent;
3157
// FIXME rationalize shadows
3159
// this is used for the resize cursor area
3161
margin: 8px;
3162
&:backdrop {
3164
// the transparent shadow here is to enforce that the shadow extents don't
3165
// change when we go to backdrop, to prevent jumping windows.
3166
// The biggest shadow should be in the same order then in the active state
3167
// or the jumping will happen during the transition.
3168
box-shadow: $shadow_2, 0 16px 16px transparent;
3169
}
3170
.maximized &,
3172
.fullscreen &,
3173
.tiled & { border-radius: 0; }
3174
.popup & { box-shadow: none; }
3176
// server-side decorations as used by mutter
3178
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3179
.csd.popup & {
3181
border-radius: 2px;
3182
box-shadow: $shadow_2;
3183
}
3184
tooltip.csd & {
3186
border-radius: 2px;
3187
box-shadow: $shadow_2;
3188
}
3189
messagedialog.csd & {
3191
border-radius: 2px;
3192
// box-shadow: $shadow_4, 0 16px 16px transparent;
3193
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3195
}
3196
.solid-csd & {
3198
margin: 0;
3199
padding: 4px;
3200
// border: solid 1px $border_color;
3201
// border-radius: 0;
3202
box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3203
// background-color: $border_color;
3204
}
3205
}
3206
// Window Close button
3208
button.titlebutton {
3209
// @extend %simple_flat_button;
3210
@extend %circular_button;
3212
.selection-mode & {
3214
}
3215
}
3216
// catch all extend :)
3219
%selected_items {
3221
background-color: $primary_color;
3222
@at-root %nobg_selected_items, & {
3224
color: $inverse_fg_color;
3225
&:disabled { color: $disabled_inverse_fg_color; }
3227
}
3228
}
3229
.monospace { font-family: monospace; }
3231
/**********************
3234
* Touch Copy & Paste *
3235
*********************/
3236
//touch selection handlebars for the Popover.osd above
3237
cursor-handle {
3238
border-radius: $circular_radius;
3239
background-color: $accent_color;
3240
background-image: none;
3241
&.top:dir(ltr), &.bottom:dir(rtl) {
3243
padding-left: 6px;
3244
border-top-right-radius: 0;
3245
}
3246
&.bottom:dir(ltr), &.top:dir(rtl) {
3248
padding-right: 6px;
3249
border-top-left-radius: 0;
3250
}
3251
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3253
-GtkWidget-text-handle-width: 24;
3254
-GtkWidget-text-handle-height: 30;
3255
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3257
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3258
url('#{$_url}@2.png'));
3259
}
3260
}
3261
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3263
%circular_button,
3265
button.close,
3266
button.circular { // FIXME: aggregate to buttons
3267
border-radius: $circular_radius;
3268
-gtk-outline-radius: $circular_radius;
3269
// label { padding: 0; }
3271
}
3272
%small_button {
3274
min-height: $small_size;
3275
min-width: $small_size;
3276
padding: 0;
3277
border-radius: $circular_radius;
3278
-gtk-outline-radius: $circular_radius;
3279
}
3280
// shortcut window keys
3282
.keycap {
3283
min-width: 28px - 8px * 2;
3284
min-height: 28px - 2px;
3285
margin-top: 2px;
3286
padding-bottom: 2px;
3287
padding-left: 8px;
3288
padding-right: 8px;
3289
border: solid 1px $border_color;
3291
border-radius: 2px + 1px;
3292
box-shadow: inset 0 -2px $border_color;
3293
background-color: $base_color;
3294
color: $fg_color;
3295
font-size: smaller;
3296
}
3297
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3299
transition: $longer_transition;
3300
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3301
caret-color: $accent_color;
3302
}
3303
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3305
stackswitcher button.circular,
3307
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3308
min-width: $medium_size;
3309
min-height: $medium_size;
3310
padding: 0;
3311
}
3312