ASCII text
1
* {
2
padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 4;
6
-GtkTextView-error-underline-color: $error_color;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: 4;
21
-GtkDialog-action-area-border: 0;
22
// We use the outline properties to signal the focus properties
24
// to the adwaita engine: using real CSS properties is faster,
25
// and we don't use any outlines for now.
26
outline-style: solid;
28
outline-width: 2px;
29
outline-color: $fill_color;
30
outline-offset: -4px;
31
-gtk-outline-radius: 2px;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
/***************
38
* Base States *
39
***************/
40
.background {
41
background-color: $bg_color;
42
color: $fg_color;
43
}
44
/*
46
These wildcard seems unavoidable, need to investigate.
47
Wildcards are bad and troublesome, use them with care,
48
or better, just don't.
49
Everytime a wildcard is used a kitten dies, painfully.
50
*/
51
*:disabled { -gtk-icon-effect: dim; }
53
.gtkstyle-fallback {
55
background-color: $bg_color;
56
color: $fg_color;
57
&:hover {
59
background-color: darken($bg_color, 5%);
60
color: $fg_color;
61
}
62
&:active {
64
background-color: darken($bg_color, 10%);
65
color: $fg_color;
66
}
67
&:disabled {
69
background-color: $bg_color;
70
color: $disabled_fg_color;
71
}
72
&:selected {
74
background-color: $primary_color;
75
color: $inverse_fg_color;
76
}
77
}
78
.view,
80
%view {
81
@extend row.activatable;
82
background-color: $base_color;
84
color: $fg_color;
85
&:hover, &:active, &:selected { border-radius: 2px; }
87
&:disabled {
89
// background-color: $alt_base_color;
90
color: $disabled_fg_color;
91
}
92
&:selected { @extend %selected_items; }
94
}
95
.view,
97
textview {
98
text {
99
// @extend %view;
100
background-color: $base_color;
102
color: $fg_color;
103
&:disabled {
105
// background-color: $alt_base_color;
106
color: $disabled_fg_color;
107
}
108
selection { @extend %selected_items; }
110
}
111
}
112
textview border {
114
background-color: $alt_base_color;
115
color: $tertiary_fg_color;
116
}
117
iconview { @extend .view; }
119
.rubberband,
121
rubberband {
122
border: 1px solid $alt_primary_color;
123
background-color: scale-alpha($alt_primary_color, $lower_opacity);
124
}
125
flowbox {
127
rubberband { @extend rubberband; }
128
flowboxchild {
130
outline-offset: -2px;
131
padding: 4px;
132
border-radius: 2px;
133
&:selected { @extend %selected_items; }
135
}
136
}
137
label {
139
caret-color: currentColor; // this shouldn't be needed.
140
&.separator {
142
@extend .dim-label;
143
color: $fg_color;
145
}
146
row:selected &,
148
&:selected { @extend %nobg_selected_items; }
149
selection {
151
background-color: $primary_color;
152
color: $inverse_fg_color;
153
}
154
&:disabled {
156
color: $disabled_fg_color;
157
selection { @extend %selected_items:disabled; }
159
tab &,
161
button &,
162
menuitem & { color: inherit; }
163
}
164
}
165
.dim-label { opacity: $tertiary_opacity; }
167
assistant {
169
.sidebar {
170
padding: 4px 0;
171
// background-color: $base_color;
172
// border-top: 1px solid $border_color;
173
}
174
// &.csd .sidebar { border-top-style: none; }
176
.sidebar label {
178
min-height: $medium_size;
179
padding: 0 12px;
180
color: $tertiary_fg_color;
181
font-weight: 500;
182
&.highlight { color: $fg_color; }
184
}
185
}
186
%osd, .osd { opacity: $higher_opacity; }
188
/*********************
191
* Spinner Animation *
192
*********************/
193
@keyframes spin {
194
to { -gtk-icon-transform: rotate(1turn); }
195
}
196
@keyframes spin_colors {
198
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
199
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
200
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
201
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
202
}
203
spinner {
205
background: none;
206
opacity: 0; // non spinning spinner makes no sense
207
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
208
&:checked {
210
opacity: 1;
211
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
212
&:disabled { opacity: $disabled_opacity; }
214
}
215
}
216
/****************
219
* Text Entries *
220
****************/
221
%entry,
222
entry {
223
%entry_basic, & {
224
min-height: $medium_size;
225
padding: 0 8px;
226
border-radius: 2px;
227
@include entry(normal);
229
&:focus { @include entry(focus); }
231
&:disabled { @include entry(disabled); }
233
&.flat {
235
border-radius: 0;
236
@include entry(flat-normal);
238
&:focus { @include entry(flat-focus); }
240
&:disabled { @include entry(flat-disabled); }
242
}
243
image { // icons inside the entry
245
// @extend %simple_flat_button;
246
// min-height: $small_size;
248
// min-width: $small_size;
249
// border-radius: $circular_radius;
250
// -gtk-outline-radius: $circular_radius;
251
color: gtkalpha(currentColor, $secondary_opacity);
252
&:hover, &:active { color: currentColor; }
254
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
256
&.left { margin-left: 2px; margin-right: 6px; }
258
&.right { margin-left: 6px; margin-right: 2px; }
260
}
261
undershoot {
263
&.left { @include undershoot(left); }
264
&.right { @include undershoot(right); }
266
}
267
selection { @extend %selected_items; }
269
// entry error and warning style
271
@each $e_type, $e_color in (error, $error_color),
272
(warning, $warning_color) {
273
&.#{$e_type} {
274
@include entry(normal, $e_color);
275
&:focus { @include entry(focus, $e_color); }
277
&:disabled { @include entry(disabled, $e_color); }
279
&.flat {
281
@include entry(flat-normal, $e_color);
282
&:focus { @include entry(flat-focus, $e_color); }
284
&:disabled { @include entry(flat-disabled, $e_color); }
286
}
287
}
288
}
289
&:drop(active) {
291
// box-shadow: inset 0 0 0 2px $accent_color;
292
}
293
.osd & {
295
}
296
}
297
progress {
299
margin: 2px (2px - 8px);
300
border-style: none none solid;
301
border-width: 2px;
302
border-color: $primary_color;
303
// border-radius: 0;
304
// box-shadow: none;
305
background-color: transparent;
306
// background-image: none;
307
}
308
// linked entries
310
.linked:not(.vertical) > & { @extend %linked; }
311
// Vertically linked entries
313
.linked.vertical > & { @extend %linked_vertical; }
314
.linked:not(.vertical) > &.flat,
316
.linked.vertical > &.flat { border-radius: 0; }
317
}
318
treeview entry {
320
&.flat, & {
321
min-height: 0;
322
padding: 2px;
323
border-radius: 0;
324
background-color: $base_color;
325
&, &:focus {
327
border-image: none;
328
box-shadow: none;
329
}
330
}
331
}
332
/***********
335
* Buttons *
336
***********/
337
// stuff for .needs-attention
338
@keyframes needs_attention {
339
from {
340
background-image: -gtk-gradient(radial,
341
center center, 0,
342
center center, 0.001,
343
to($accent_color),
344
to(transparent));
345
}
346
to {
348
background-image: -gtk-gradient(radial,
349
center center, 0,
350
center center, 0.5,
351
to($accent_color),
352
to(transparent));
353
}
354
}
355
%button,
357
button {
358
@at-root %button_basic, & {
359
min-height: 24px;
360
min-width: 16px;
361
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
362
border-radius: 2px;
363
font-weight: 500;
364
@include button(normal);
366
&:hover { @include button(hover); }
368
&:active { @include button(active); }
370
&:disabled { @include button(disabled); }
372
&:checked { @include button(checked); }
374
&:checked:disabled { @include button(checked-disabled); }
376
@at-root %flat_button, &.flat {
378
@at-root %simple_flat_button, & {
379
@include button(flat-normal);
380
&:hover { @include button(flat-hover); }
382
&:active { @include button(flat-active); }
384
&:disabled { @include button(flat-disabled); }
386
}
387
&:checked { @include button(flat-checked); }
389
&:checked:disabled { @include button(flat-checked-disabled); }
391
}
392
&.text-button {
394
padding-left: 16px;
395
padding-right: 16px;
396
}
397
&.image-button {
399
min-width: 24px;
400
padding: ($medium_size - 24px) / 2;
401
border-radius: $circular_radius;
402
-gtk-outline-radius: $circular_radius;
403
}
404
&.text-button.image-button {
406
border-radius: 2px;
407
-gtk-outline-radius: 2px;
408
label {
410
&:first-child {
411
margin-left: 16px - ($medium_size - 24px) / 2;
412
margin-right: 2px;
413
}
414
&:last-child {
416
margin-left: 2px;
417
margin-right: 16px - ($medium_size - 24px) / 2;
418
}
419
&:only-child {
421
margin-left: 16px - ($medium_size - 24px) / 2;
422
margin-right: 16px - ($medium_size - 24px) / 2;
423
}
424
}
425
image:not(:only-child) {
427
&:first-child { margin-left: (24px - 16px) / 2; }
428
&:last-child { margin-right: (24px - 16px) / 2; }
430
}
431
}
432
.linked > & { @extend %linked; }
434
.linked.vertical > & { @extend %linked_vertical; }
436
.linked > &.flat,
438
.linked.vertical > &.flat {
439
border-radius: 2px;
440
&.image-button {
442
border-radius: $circular_radius;
443
-gtk-outline-radius: $circular_radius;
444
}
445
&.text-button.image-button {
447
border-radius: 2px;
448
-gtk-outline-radius: 2px;
449
}
450
}
451
&:drop(active) {
453
// box-shadow: inset 0 0 0 2px $accent_color;
454
}
455
}
456
@at-root %button_selected, row:selected & {
458
&:disabled { color: $disabled_secondary_inverse_fg_color; }
459
}
460
// big standalone buttons like in Documents pager
462
&.osd {
463
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
464
&.image-button { padding: ($large_size - 24px) / 2; }
466
&:disabled { opacity: 0; }
468
}
469
//overlay / OSD style
471
@at-root %osd_button,
472
.osd & {
473
}
474
// Suggested and Destructive Action buttons
476
@each $b_type, $b_color in (suggested-action, $suggested_color),
477
(destructive-action, $destructive_color) {
478
&.#{$b_type} {
479
background-color: $b_color;
480
color: $inverse_fg_color;
481
&:disabled { @include button(disabled, $b_color); }
483
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
485
&.flat {
487
background-color: transparent;
488
color: $b_color;
489
&:disabled { @include button(flat-disabled, $b_color); }
491
&:checked { background-color: $fill_color; }
493
}
494
.osd & {
496
}
497
}
498
}
499
.stack-switcher > & {
501
// to position the needs attention dot, padding is added to the button
502
// child, a label needs just lateral padding while an icon needs vertical
503
// padding added too.
504
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
506
> label {
508
padding-left: 6px; // label padding
509
padding-right: 6px; //
510
}
511
> image {
513
padding-left: 6px; // image padding
514
padding-right: 6px; //
515
padding-top: 3px; //
516
padding-bottom: 3px; //
517
}
518
&.text-button {
520
// compensate text-button paddings
521
padding-left: 16px - 6px;
522
padding-right: 16px - 6px;
523
}
524
&.image-button {
526
// we want image buttons to have a 1:1 aspect ratio, so compensation
527
// of the padding added to the GtkImage is needed
528
padding-left: ($medium_size - 16px) / 2 - 6px;
529
padding-right: ($medium_size - 16px) / 2 - 6px;
530
}
531
&.needs-attention {
533
> label,
534
> image { @extend %needs_attention; }
535
&:checked {
537
> label,
538
> image {
539
animation: none;
540
background-image: none;
541
}
542
}
543
}
544
}
545
// hide separators
547
separator {
548
min-width: 0;
549
min-height: 0;
550
background: transparent;
551
}
552
// &.font,
554
// &.file { separator { background-color: transparent; }}
555
// &.font { > box > box > label { font-weight: bold; }}
557
// inline-toolbar buttons
559
.inline-toolbar & {
560
// @extend %button_basic.flat;
561
&:not(.text-button) { @extend %circular_button; }
563
}
564
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
566
@at-root %circular_button,
568
&.close,
569
&.circular { // The Bloody Circul Button
570
border-radius: $circular_radius;
571
-gtk-outline-radius: $circular_radius;
572
// label { padding: 0; }
574
}
575
@at-root %small_button {
577
min-height: $small_size;
578
min-width: $small_size;
579
padding: 0;
580
border-radius: $circular_radius;
581
-gtk-outline-radius: $circular_radius;
582
}
583
}
584
%needs_attention {
586
animation: needs_attention $longer_duration $deceleration_curve forwards;
587
background-repeat: no-repeat;
588
background-position: right 3px;
589
background-size: 6px 6px;
590
&:dir(rtl) { background-position: left 3px; }
592
}
593
// all the following is for the +|- buttons on inline toolbars, that way
595
// should really be deprecated...
596
.inline-toolbar toolbutton > button { // redefining the button look is
597
// needed since those are flat...
598
}
599
// More inline toolbar buttons
601
toolbar.inline-toolbar toolbutton {
602
// > button.flat { @extend %linked_middle; }
603
// &:first-child > button.flat { @extend %linked:first-child; }
605
// &:last-child > button.flat { @extend %linked:last-child; }
607
// &:only-child > button.flat { @extend %linked:only-child; }
609
}
610
%linked_middle {
612
border-radius: 0;
613
-gtk-outline-radius: 2px;
614
}
615
%linked {
617
@extend %linked_middle;
618
&:first-child {
620
border-top-left-radius: 2px;
621
border-bottom-left-radius: 2px;
622
}
623
&:last-child {
625
border-top-right-radius: 2px;
626
border-bottom-right-radius: 2px;
627
}
628
&:only-child {
630
border-radius: 2px;
631
}
632
}
633
%linked_vertical_middle {
635
border-radius: 0;
636
-gtk-outline-radius: 2px;
637
}
638
%linked_vertical{
640
@extend %linked_vertical_middle;
641
&:first-child {
643
border-top-left-radius: 2px;
644
border-top-right-radius: 2px;
645
}
646
&:last-child {
648
border-bottom-left-radius: 2px;
649
border-bottom-right-radius: 2px;
650
}
651
&:only-child {
653
border-radius: 2px;
654
}
655
}
656
/* menu buttons */
658
modelbutton.flat,
659
.menuitem.button.flat {
660
min-height: $menuitem_size;
661
padding: 0 8px;
662
border-radius: 2px;
663
color: inherit;
664
@extend %simple_flat_button;
666
&:selected { @extend %selected_items; }
668
check,
670
radio {
671
box-shadow: none;
672
background-image: none;
673
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
675
&:last-child { margin-left: -8px; margin-right: -16px; }
677
&:first-child { margin-left: -16px; margin-right: -8px; }
679
}
680
check:not(:indeterminate):checked { @extend %check_checked; }
682
// radio:not(:indeterminate):checked { @extend %radio_checked; }
684
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
686
}
687
modelbutton.flat arrow {
689
background: none;
690
&:hover { background: none; }
692
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
694
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
696
}
697
button.color {
699
min-height: $small_size;
700
min-width: $small_size;
701
padding: $container_padding;
702
colorswatch:only-child {
704
// &, overlay { border-radius: 0; }
705
}
706
}
707
/*********
710
* Links *
711
*********/
712
*:link {
713
&, &:hover, &:active { color: $link_color; }
714
&:visited {
716
&, &:hover, &:active { color: $visited_link_color; }
717
}
718
@at-root %link_selected,
720
&:selected,
721
*:selected & { color: $inverse_fg_color; }
722
}
723
button:link,
725
button:visited {
726
@extend *:link;
727
> label { text-decoration-line: underline; }
729
}
730
/*****************
732
* GtkSpinButton *
733
*****************/
734
spinbutton {
735
&:not(.vertical) {
736
// in this horizontal configuration, the whole spinbutton
737
// behaves as the entry, so we extend the entry styling
738
// and nuke the style on the internal entry
739
@extend %entry;
740
padding: 0;
742
%spinbutton_entry,
744
entry {
745
min-width: $large_size - 8px * 2;
746
// reset all the other props since the spinbutton node is styled here
747
margin: 0;
748
border-image: none;
749
border-radius: 0;
750
box-shadow: none;
751
background-color: transparent;
752
//
753
// This will help to simplify spinbutton's code, but unfortunatelly
754
// doesn't work properly in :dir(rtl). It needs z-index property.
755
//
756
// min-width: $large_size - 8px;
757
//
758
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
759
//
760
// &:dir(ltr) {
761
// margin-right: -$spinbuttons_width;
762
// padding-right: $spinbuttons_width;
763
// }
764
//
765
// &:dir(rtl) {
766
// margin-left: -$spinbuttons_width;
767
// padding-left: $spinbuttons_width;
768
// }
769
}
770
button {
772
// margin: $container_padding;
773
border: solid $container_padding transparent;
774
@extend %simple_flat_button;
776
@extend %small_button;
778
&.up:dir(ltr),
780
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
781
&.up:dir(rtl),
783
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
784
}
785
}
786
// OSD horizontal
788
.osd &:not(.vertical) {
789
button {
790
}
791
}
792
// Vertical
794
&.vertical {
795
// in the vertical configuration, we treat the spinbutton
796
// as a box, and tweak the style of the entry in the middle
797
// so that it's linked
798
// FIXME: this should not be set at all, but otherwise it gets the wrong
800
// color
801
&:disabled { color: $disabled_fg_color; }
802
&:drop(active) {
804
box-shadow: none;
805
}
806
entry {
808
min-height: $medium_size;
809
min-width: $large_size;
810
padding: 0;
811
}
812
button {
814
min-height: $medium_size;
815
min-width: $large_size;
816
padding: 0;
817
@extend %simple_flat_button;
819
&.up { border-radius: 2px 2px 0 0; }
821
&.down { border-radius: 0 0 2px 2px; }
823
}
824
}
825
// OSD vertical
827
.osd &.vertical button:first-child {
828
}
829
// Misc
831
treeview &:not(.vertical) {
832
min-height: 0;
833
border-style: none;
834
border-radius: 0;
835
entry {
837
min-height: 0;
838
padding: 1px 2px;
839
}
840
}
841
}
842
/**************
845
* ComboBoxes *
846
**************/
847
combobox {
848
arrow {
849
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
850
min-height: 16px;
851
min-width: 16px;
852
}
853
button.combo:checked { transition: none; } // workaround for menuitem selection
855
button.combo cellview {
857
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
858
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
859
}
860
#gtk-combobox-popup-menu {
862
padding: 2px 0;
863
menuitem {
865
min-height: $medium_size - 2px * 2;
866
padding: 0 8px;
867
}
868
}
869
&.linked {
871
button:nth-child(2) {
872
&:dir(ltr) { @extend %linked:last-child; }
873
&:dir(rtl) { @extend %linked:first-child; }
874
}
875
}
876
&:drop(active) { // FIXME: untested
878
box-shadow: none;
879
// button.combo { @extend %button_basic:drop(active); }
881
}
882
}
883
.linked > combobox > box > button.combo {
885
// the combo is a composite widget so the way we do button linking doesn't
886
// work, special case needed. See
887
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
888
&:dir(ltr),
890
&:dir(rtl) { @extend %linked_middle; } // specificity bump
891
}
892
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
894
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
895
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
896
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
898
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
899
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
900
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
901
%combo_flat {
903
border-radius: 0;
904
background-image: none;
905
font-weight: inherit;
906
@include entry(flat-normal);
908
&:hover { box-shadow: inset 0 -2px $fill_color; }
910
&:checked {
912
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
913
$primary_color 100%,
914
transparent 0%)
915
0 0 2 / 0 0 2px;
916
}
917
&:disabled { color: $disabled_fg_color; }
919
}
920
/************
923
* Toolbars *
924
************/
925
toolbar {
926
-GtkWidget-window-dragging: true;
927
padding: $container_padding / 2;
928
background-color: $bg_color;
929
button { @extend %button_basic.flat; }
931
// on OSD
933
.osd & { background-color: transparent; }
934
// stand-alone OSD toolbars
936
&.osd {
937
transition: $shadow_transition;
938
padding: $container_padding;
939
border-radius: 2px;
940
box-shadow: $shadow_2, inset 0 1px $highlight_color;
941
background-color: $base_color;
942
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
944
&.left,
946
&.right,
947
&.top,
948
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
949
}
950
// toolbar separators
952
&.horizontal separator { margin: $container_padding / 2; }
953
&.vertical separator { margin: $container_padding / 2; }
954
&:not(.inline-toolbar):not(.osd) {
956
scale,
957
entry,
958
spinbutton,
959
button { margin: $container_padding / 2; }
960
.linked entry,
962
.linked spinbutton,
963
.linked button {
964
&:not(:first-child) { margin-left: 0; }
965
&:not(:last-child) { margin-right: 0; }
966
}
967
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
969
}
970
}
971
//searchbar, location-bar & inline-toolbar
973
.inline-toolbar {
974
padding: $container_padding;
975
border-style: solid;
976
border-width: 0 1px 1px;
977
border-color: $border_color;
978
background-color: $alt_base_color;
979
}
980
searchbar,
982
.location-bar {
983
padding: $container_padding;
984
border-style: solid;
985
border-width: 0 0 1px;
986
border-color: $border_color;
987
background-color: $bg_color;
988
background-clip: border-box;
989
}
990
/***************
993
* Header bars *
994
***************/
995
%titlebar,
996
headerbar {
997
transition: background-color $shorter_duration $deceleration_curve;
998
min-height: $large_size;
999
padding: 0 $container_padding;
1000
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
1001
background-color: $titlebar_bg_color;
1002
color: $titlebar_fg_color;
1003
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
1005
&:backdrop {
1007
color: $secondary_titlebar_fg_color;
1008
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
1010
}
1011
.title {
1013
transition: $longer_transition;
1014
padding: 0 12px;
1015
font-weight: bold;
1016
}
1017
.subtitle {
1019
transition: $longer_transition;
1020
padding: 0 12px;
1021
font-size: smaller;
1022
@extend .dim-label;
1024
}
1025
button:not(.suggested-action):not(.destructive-action) {
1027
@extend %button_basic.flat;
1028
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1030
$titlebar_indicator_color 0%,
1031
transparent 0%)
1032
0 0 0 / 0 0 0px;
1033
&:checked {
1035
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1036
$titlebar_indicator_color 100%,
1037
transparent 0%)
1038
0 0 2 / 0 0 2px;
1039
&, &:disabled { background-color: transparent; }
1041
}
1042
}
1043
button.suggested-action, button.destructive-action {
1045
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1046
}
1047
&.selection-mode {
1049
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1050
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1051
transition: background-color 0.00001s $longer_duration;
1052
animation: header_ripple_effect $longer_duration $deceleration_curve;
1053
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1054
background-color: $primary_color;
1055
color: $inverse_fg_color;
1056
&:backdrop {
1058
color: $secondary_inverse_fg_color;
1059
}
1060
.subtitle:link { @extend *:link:selected; }
1062
button:not(.suggested-action):not(.destructive-action) {
1064
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1065
currentColor 0%,
1066
transparent 0%)
1067
0 0 0 / 0 0 0px;
1068
color: currentColor;
1069
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1071
&:checked {
1073
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1074
currentColor 100%,
1075
transparent 0%)
1076
0 0 2 / 0 0 2px;
1077
color: currentColor;
1078
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1080
}
1081
}
1082
.selection-menu {
1084
padding-left: 16px;
1085
padding-right: 16px;
1086
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1088
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1090
}
1091
}
1092
.fullscreen &,
1094
.tiled &,
1095
.maximized & {
1096
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1097
box-shadow: $shadow_1;
1098
}
1099
&.default-decoration {
1101
min-height: $small_size;
1102
padding: $container_padding;
1103
box-shadow: inset 0 1px $titlebar_highlight_color;
1104
.fullscreen &,
1106
.tiled &,
1107
.maximized & { box-shadow: none; }
1108
button.titlebutton {
1110
min-height: $small_size;
1111
min-width: $small_size;
1112
margin: 0;
1113
padding: 0;
1114
}
1115
}
1116
.solid-csd & {
1118
&:dir(rtl), &:dir(ltr) { // specificity bump
1119
margin-left: -2px;
1120
margin-right: -2px;
1121
margin-top: -2px;
1122
// border-radius: 0;
1123
box-shadow: inset 0 1px $titlebar_highlight_color;
1124
}
1125
}
1126
}
1127
headerbar {
1129
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1130
entry,
1131
spinbutton,
1132
// separator,
1133
button {
1134
margin-top: $container_padding;
1135
margin-bottom: $container_padding;
1136
}
1137
switch {
1139
margin-top: $container_padding * 2;
1140
margin-bottom: $container_padding * 2;
1141
}
1142
}
1143
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1145
border-top-left-radius: 2px;
1146
border-top-right-radius: 2px;
1147
}
1148
headerbar { // headerbar border rounding
1150
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1151
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1152
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1154
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1156
&:first-child, &:last-child {
1157
border-top-left-radius: 2px;
1158
border-top-right-radius: 2px;
1159
}
1160
}
1161
}
1162
.titlebar:not(headerbar) {
1164
window.csd > & {
1165
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1166
padding: 0;
1167
background-color: transparent;
1168
background-image: none;
1169
border-style: none;
1170
box-shadow: none;
1171
}
1172
> separator {
1174
background-color: $titlebar_bg_color;
1175
background-image: image($border_color);
1176
}
1177
@extend %titlebar;
1179
}
1180
/************
1183
* Pathbars *
1184
************/
1185
%pathbar_button,
1186
.path-bar button {
1187
padding-left: ($medium_size - 24px) / 2;
1188
padding-right: ($medium_size - 24px) / 2;
1189
label:not(:only-child) {
1191
&:first-child { margin-left: 4px; }
1192
&:last-child { margin-right: 4px; }
1194
}
1195
&.slider-button {
1197
padding-left: (24px - 16px) / 2;
1198
padding-right: (24px - 16px) / 2;
1199
}
1200
:not(headerbar) & {
1202
@extend %flat_button;
1203
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1205
$primary_color 0%,
1206
transparent 0%)
1207
0 0 0 / 0 0 0px;
1208
border-radius: 2px;
1209
&:checked {
1211
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1212
$primary_color 100%,
1213
transparent 0%)
1214
0 0 2 / 0 0 2px;
1215
&, &:disabled { background-color: transparent; }
1217
}
1218
}
1219
}
1220
/**************
1223
* Tree Views *
1224
**************/
1225
treeview.view {
1226
@at-root * {
1227
-GtkTreeView-horizontal-separator: 4;
1228
-GtkTreeView-grid-line-width: 1;
1229
-GtkTreeView-grid-line-pattern: '';
1230
-GtkTreeView-tree-line-width: 1;
1231
-GtkTreeView-tree-line-pattern: '';
1232
-GtkTreeView-expander-size: 16;
1233
}
1234
border-left-color: $fill_color; // this is actually the tree lines color,
1236
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1237
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1239
&:hover, &:active, &:selected { border-radius: 0; }
1241
&.separator {
1243
min-height: 1px + 2px * 2;
1244
color: $border_color;
1245
}
1246
&:drop(active) {
1248
border-style: solid none;
1249
border-width: 1px;
1250
border-color: $accent_color;
1251
&.after { border-top-style: none; }
1253
&.before { border-bottom-style: none; }
1255
}
1256
&.expander {
1258
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1259
-gtk-icon-transform: rotate(-90deg);
1260
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1262
&:checked { -gtk-icon-transform: unset; }
1264
color: $secondary_fg_color;
1266
&:hover, &:active { color: $fg_color; }
1268
&:disabled { color: $disabled_secondary_fg_color; }
1270
&:selected {
1272
color: $secondary_inverse_fg_color;
1273
&:hover, &:active { color: $inverse_fg_color; }
1275
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1277
}
1278
}
1279
&.progressbar { // progress bar in treeviews
1281
border-style: none none solid;
1282
border-width: $bar_size;
1283
border-color: $primary_color;
1284
box-shadow: none;
1285
background-color: transparent;
1286
&:selected { border-color: currentColor; }
1288
}
1289
&.trough { // progress bar trough in treeviews
1291
border-style: none none solid;
1292
border-width: $bar_size;
1293
border-color: scale-alpha($primary_color, $lower_opacity);
1294
box-shadow: none;
1295
background-color: transparent;
1296
&:selected { border-color: $fill_color; }
1298
}
1299
header {
1301
button {
1302
@extend row.activatable;
1303
padding: 2px 6px;
1305
border-style: none solid solid none;
1306
border-width: 1px;
1307
border-color: $border_color;
1308
border-radius: 0;
1309
background-clip: border-box;
1310
&, &:hover, &:active { box-shadow: none; }
1312
&, &:disabled { background-color: $base_color; }
1314
&:last-child { border-right-style: none; }
1316
}
1317
}
1318
button.dnd,
1320
header.button.dnd { // for treeview-like derive widgets
1321
padding: 2px 6px;
1322
border-style: none solid solid;
1323
border-width: 1px;
1324
border-color: $border_color;
1325
border-radius: 0;
1326
box-shadow: none;
1327
background-color: $base_color;
1328
background-clip: border-box;
1329
color: $primary_color;
1330
}
1331
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1333
}
1334
/*********
1337
* Menus *
1338
*********/
1339
menubar,
1340
.menubar {
1341
-GtkWidget-window-dragging: true;
1342
padding: 0;
1343
// box-shadow: inset 0 -1px $border_color;
1344
background-color: $titlebar_bg_color;
1345
> menuitem {
1347
transition: $shorter_transition;
1348
min-height: 20px;
1349
padding: 4px 8px;
1350
color: $secondary_titlebar_fg_color;
1351
&:hover { //Seems like it :hover even with keyboard focus
1353
transition: none;
1354
background-color: $semi_fill_color;
1355
color: $titlebar_fg_color;
1356
}
1357
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1359
}
1360
}
1361
.csd.popup { border-radius: 2px; }
1363
menu,
1365
.menu,
1366
.context-menu {
1367
margin: 4px 0;
1368
padding: 4px 0;
1369
box-shadow: inset 0 1px $highlight_color;
1370
background-color: $base_color;
1371
border: 1px solid $border_color; // adds borders in a non composited env
1372
.csd & {
1374
border: none; // axes borders in a composited env
1375
border-radius: 2px;
1376
}
1377
menuitem {
1379
transition: $shorter_transition;
1380
min-height: 20px;
1381
min-width: 40px;
1382
padding: 4px 8px;
1383
font: initial;
1384
text-shadow: none;
1385
&:hover {
1387
transition: none;
1388
background-color: $semi_fill_color;
1389
}
1390
&:disabled { color: $disabled_fg_color; }
1392
// submenu indicators
1394
arrow {
1395
min-height: 16px;
1396
min-width: 16px;
1397
&:dir(ltr) {
1399
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1400
margin-left: 8px;
1401
}
1402
&:dir(rtl) {
1404
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1405
margin-right: 8px;
1406
}
1407
}
1408
// avoids labels color being overridden, see
1410
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1411
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1412
}
1413
// overflow arrows
1415
> arrow {
1416
min-height: 16px;
1417
min-width: 16px;
1418
padding: 4px;
1419
border-radius: 0;
1420
background-color: $base_color;
1421
color: $secondary_fg_color;
1422
&.top {
1424
margin-top: -4px;
1425
border-bottom: 1px solid $border_color;
1426
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1427
}
1428
&.bottom {
1430
margin-bottom: -4px;
1431
border-top: 1px solid $border_color;
1432
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1433
}
1434
&:hover {
1436
background-image: image($semi_fill_color);
1437
color: $fg_color;
1438
}
1439
&:disabled {
1441
border-color: transparent;
1442
background-color: transparent;
1443
color: transparent;
1444
// color: $disabled_secondary_fg_color;
1445
}
1446
}
1447
separator { margin: 4px 0; }
1449
}
1450
menuitem {
1452
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1453
check,
1455
radio {
1456
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1457
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1458
}
1459
}
1460
/************
1463
* Popovers *
1464
************/
1465
popover.background {
1466
transition: $shadow_transition;
1467
padding: 2px;
1468
box-shadow: $shadow_2; // TODO: this should really have a highlight
1469
background-color: $lighter_bg_color;
1470
&:backdrop { box-shadow: $shadow_1; }
1472
&, .csd & {
1474
border-style: solid;
1475
border-width: 1px;
1476
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1477
border-radius: 2px + 1px;
1478
}
1479
> stack { margin: -4px; } // remove extra padding from menu style popovers
1481
> toolbar { margin: -2px; }
1483
> list,
1485
> .view,
1486
> toolbar {
1487
border-style: none;
1488
box-shadow: none;
1489
background-color: transparent;
1490
}
1491
&.touch-selection,
1493
&.magnifier,
1494
&.osd { @extend %osd; }
1495
// entry { @extend %entry.flat; }
1497
// button.combo { @extend %combo_flat; }
1499
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1501
&.menu button,
1503
button.model {
1504
@extend %simple_flat_button;
1505
min-height: 32px;
1507
padding: 0 8px;
1508
border-radius: 2px;
1509
&:checked { @extend %selected_items; }
1511
}
1512
separator { margin: 4px 0; }
1514
list separator { margin: 0; }
1516
}
1517
/*************
1519
* Notebooks *
1520
*************/
1521
notebook {
1522
> header {
1523
border-width: 1px;
1524
border-color: $border_color;
1525
background-color: $bg_color;
1526
background-clip: border-box;
1527
&.top {
1529
border-bottom-style: solid;
1530
> tabs {
1531
margin-bottom: -1px;
1532
> tab {
1533
&:hover { box-shadow: inset 0 -2px $fill_color; }
1535
&:checked { box-shadow: inset 0 -2px $primary_color; }
1537
}
1538
}
1539
}
1540
&.bottom {
1542
border-top-style: solid;
1543
> tabs {
1544
margin-top: -1px;
1545
> tab {
1546
&:hover { box-shadow: inset 0 2px $fill_color; }
1548
&:checked { box-shadow: inset 0 2px $primary_color; }
1550
}
1551
}
1552
}
1553
&.left {
1555
border-right-style: solid;
1556
> tabs {
1557
margin-right: -1px;
1558
> tab {
1559
&:hover { box-shadow: inset -2px 0 $fill_color; }
1561
&:checked { box-shadow: inset -2px 0 $primary_color; }
1563
}
1564
}
1565
}
1566
&.right {
1568
border-left-style: solid;
1569
> tabs {
1570
margin-left: -1px;
1571
> tab {
1572
&:hover { box-shadow: inset 2px 0 $fill_color; }
1574
&:checked { box-shadow: inset 2px 0 $primary_color; }
1576
}
1577
}
1578
}
1579
&.top > tabs > arrow {
1581
@extend %notebook_vert_arrows;
1582
border-top-style: none;
1584
}
1585
&.bottom > tabs > arrow {
1587
@extend %notebook_vert_arrows;
1588
border-bottom-style: none;
1590
}
1591
@at-root %notebook_vert_arrows {
1593
padding-left: 4px;
1594
padding-right: 4px;
1595
&.down {
1597
margin-left: -8px;
1598
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1599
}
1600
&.up {
1602
margin-right: -8px;
1603
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1604
}
1605
}
1606
&.left > tabs > arrow {
1608
@extend %notebook_horz_arrows;
1609
border-left-style: none;
1611
}
1612
&.right > tabs > arrow {
1614
@extend %notebook_horz_arrows;
1615
border-right-style: none;
1617
}
1618
@at-root %notebook_horz_arrows {
1620
padding-top: 4px;
1621
padding-bottom: 4px;
1622
&.down {
1624
margin-top: -8px;
1625
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1626
}
1627
&.up {
1629
margin-bottom: -8px;
1630
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1631
}
1632
}
1633
> tabs > arrow {
1635
@extend %simple_flat_button;
1636
min-height: 16px;
1638
min-width: 16px;
1639
border-radius: 0;
1640
}
1641
tab {
1643
transition: $longer_transition,
1644
background-size 0,
1645
background-image 0;
1646
min-height: $small_size;
1647
min-width: $small_size;
1648
padding: $container_padding 12px;
1649
outline-offset: -6px;
1651
border-width: 1px; // for reorderable tabs
1653
border-color: transparent; //
1654
background-image: radial-gradient(circle farthest-corner at center,
1656
$primary_color 10%,
1657
transparent 0%);
1658
background-repeat: no-repeat;
1659
background-position: center;
1660
background-size: 0% 0%;
1661
color: $secondary_fg_color;
1663
font-weight: 500;
1664
&:hover {
1666
color: $fg_color;
1667
&.reorderable-page {
1669
border-color: $border_color;
1670
background-color: $alt_base_color;
1671
}
1672
}
1673
&:disabled { color: $disabled_secondary_fg_color; }
1675
&:checked {
1677
transition: $longer_transition,
1678
background-size $longer_duration $deceleration_curve,
1679
background-image $longer_duration + $ripple_duration $deceleration_curve;
1680
background-image: radial-gradient(circle farthest-corner at center,
1681
transparent 10%,
1682
transparent 0%);
1683
background-size: 1000% 1000%;
1684
color: $fg_color;
1685
&:disabled { color: $disabled_fg_color; }
1687
&.reorderable-page {
1689
border-color: $border_color;
1690
background-color: $base_color;
1691
}
1692
}
1693
// colors the button like the label, overridden otherwise
1695
button.flat {
1696
@extend %small_button;
1697
&:last-child {
1699
margin-left: $container_padding;
1700
margin-right: $container_padding - 12px;
1701
}
1702
&:first-child {
1704
margin-left: $container_padding - 12px;
1705
margin-right: $container_padding;
1706
}
1707
}
1708
}
1709
&.top,
1711
&.bottom {
1712
tabs {
1713
padding-left: 8px;
1714
padding-right: 8px;
1715
&:not(:only-child) {
1717
&:first-child { margin-left: 0; }
1718
&:last-child { margin-right: 0; }
1719
}
1720
tab {
1722
&.reorderable-page {
1723
margin: 0 -1px;
1724
border-style: none solid;
1725
}
1726
}
1727
}
1728
}
1729
&.left,
1731
&.right {
1732
tabs {
1733
padding-top: 8px;
1734
padding-bottom: 8px;
1735
&:not(:only-child) {
1737
&:first-child { margin-top: 0; }
1738
&:last-child { margin-bottom: 0; }
1739
}
1740
tab {
1742
&.reorderable-page {
1743
margin: -1px 0;
1744
border-style: solid none;
1745
}
1746
}
1747
}
1748
}
1749
}
1750
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1752
background-color: $base_color;
1753
entry:not(.search),
1755
spinbutton:not(.vertical) { @extend %entry.flat; }
1756
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1758
button.combo { @extend %combo_flat; }
1760
}
1761
}
1762
/**************
1765
* Scrollbars *
1766
**************/
1767
scrollbar {
1768
$_slider_min_length: 24px;
1769
// disable steppers
1771
@at-root * {
1772
-GtkScrollbar-has-backward-stepper: false;
1773
-GtkScrollbar-has-forward-stepper: false;
1774
}
1775
transition: $longer_transition;
1777
background-color: $base_color;
1778
background-clip: $extra_background_clip;
1779
// scrollbar border
1781
&.top { border-bottom: 1px solid $border_color; }
1782
&.bottom { border-top: 1px solid $border_color; }
1783
&.left { border-right: 1px solid $border_color; }
1784
&.right { border-left: 1px solid $border_color; }
1785
// slider
1787
slider {
1788
transition: $shorter_transition, margin 0, border-width 0;
1789
min-width: 8px;
1790
min-height: 8px;
1791
border: 4px solid transparent;
1792
border-radius: $circular_radius;
1793
background-clip: padding-box;
1794
background-color: $tertiary_fg_color;
1795
&:hover { background-color: $secondary_fg_color; }
1797
&:active { background-color: $fg_color; }
1799
&:disabled { background-color: $disabled_tertiary_fg_color; }
1801
}
1802
&.fine-tune {
1804
slider {
1805
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1806
min-width: 4px;
1807
min-height: 4px;
1808
}
1809
&.horizontal slider { margin: 2px 0; }
1811
&.vertical slider { margin: 0 2px; }
1813
}
1814
&.overlay-indicator {
1816
&:not(.dragging):not(.hovering) {
1817
border-color: transparent;
1818
background-color: transparent;
1819
slider {
1821
min-width: 4px;
1822
min-height: 4px;
1823
margin: 4px - 1px;
1824
border: 1px solid scale-alpha($base_color, $lower_opacity);
1825
}
1826
button {
1828
min-width: 4px;
1829
min-height: 4px;
1830
margin: 4px - 1px;
1831
border: 1px solid scale-alpha($base_color, $lower_opacity);
1832
border-radius: $circular_radius;
1833
background-color: $tertiary_fg_color;
1834
background-clip: padding-box;
1835
-gtk-icon-source: none;
1836
&:disabled { background-color: $disabled_tertiary_fg_color; }
1838
}
1839
&.horizontal {
1841
slider { min-width: $_slider_min_length; }
1842
button { min-width: 8px; }
1844
}
1845
&.vertical {
1847
slider { min-height: $_slider_min_length; }
1848
button { min-height: 8px; }
1850
}
1851
}
1852
&.dragging,
1854
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1855
}
1856
&.horizontal slider { min-width: $_slider_min_length; }
1858
&.vertical slider { min-height: $_slider_min_length; }
1860
// button styling
1862
button {
1863
@extend %simple_flat_button;
1864
min-width: 16px;
1866
min-height: 16px;
1867
padding: 0;
1868
border-radius: 0;
1869
}
1870
// button icons
1872
&.vertical {
1873
button {
1874
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1875
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1877
}
1878
}
1879
&.horizontal {
1881
button {
1882
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1883
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1885
}
1886
}
1887
}
1888
/**********
1891
* Switch *
1892
**********/
1893
switch {
1894
transition: $longer_transition;
1895
margin: $container_padding 0;
1896
border: 4px solid transparent;
1897
border-radius: $circular_radius;
1898
background-color: $fill_color;
1899
background-clip: padding-box;
1900
font-size: 0;
1901
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1903
&:checked {
1905
background-color: scale-alpha($accent_color, 0.5);
1906
&:disabled {
1908
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1909
color: $disabled_fg_color;
1910
}
1911
}
1912
slider {
1914
@include entry(normal);
1915
transition: $longer_transition, $shadow_transition, margin 0;
1917
min-width: $small_size;
1918
min-height: $small_size;
1919
margin: -4px 0 -4px -4px;
1920
border-radius: $circular_radius;
1921
-gtk-outline-radius: $circular_radius;
1922
}
1923
&:hover slider { @include entry(focus); }
1925
&:checked slider {
1927
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1928
animation: needs_attention $longer_duration $deceleration_curve;
1929
margin: -4px -4px -4px 0;
1930
background-color: $accent_color;
1931
color: $inverse_fg_color;
1932
}
1933
&:disabled slider { @include entry(disabled); }
1935
&:checked:disabled slider { animation: none; }
1937
row:selected & {
1939
}
1940
}
1941
/*************************
1944
* Check and Radio items *
1945
*************************/
1946
// draw regular check and radio items using our PNG assets
1947
// all assets are rendered from assets.svg. never add pngs directly
1948
//selection-mode
1950
@each $s, $as in ('', '-unchecked'),
1951
(':checked', '-checked') {
1952
.view.content-view.check#{$s}:not(list) {
1953
margin: 8px;
1954
box-shadow: none;
1955
background-color: transparent;
1956
background-image: none;
1957
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1958
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1959
-gtk-icon-shadow: $shadow_1;
1960
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1962
}
1963
}
1964
checkbutton.text-button,
1966
radiobutton.text-button {
1967
// this is for a nice focus on check and radios text
1968
padding: 2px;
1969
outline-offset: 0;
1970
label:not(:only-child) { margin: 0 4px; }
1972
}
1973
check,
1975
radio {
1976
min-height: 24px;
1977
min-width: 24px;
1978
margin: -($large_size - 24px) / 2;
1979
padding: ($large_size - 24px) / 2;
1980
@extend %simple_flat_button;
1982
@extend %circular_button;
1984
&:checked, &:indeterminate { color: $accent_color; }
1986
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1988
// &:only-child { margin: -12px; }
1990
row &:not(:checked):not(:indeterminate) {
1992
color: gtkalpha(currentColor, $secondary_opacity);
1993
&:hover, &:active { color: currentColor; }
1995
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1997
}
1998
menu menuitem & {
2000
transition: none;
2001
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2002
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2004
&, &:hover, &:disabled {
2006
box-shadow: none;
2007
// color: inherit;
2008
// animation: none;
2009
}
2010
}
2011
}
2012
%check,
2014
check {
2015
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2016
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.png"))); }
2017
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2019
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.png"))); }
2020
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2022
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.png"))); }
2023
}
2024
$radio_indicator: 10px / $large_size / 2;
2026
$radio_radius_slice: #{$large_size / 2px};
2027
$radio_radius_width: #{$large_size / 2};
2028
%radio,
2030
radio {
2031
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2032
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.png"))); }
2033
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2035
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.png"))); }
2036
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2038
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.png"))); }
2039
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
&:checked {
2048
border-image: -gtk-gradient(radial,
2049
center center, 0,
2050
center center, $radio_indicator,
2051
to($accent_color),
2052
to(transparent))
2053
$radio_radius_slice / $radio_radius_width;
2054
}
2055
&:checked:disabled {
2057
border-image: -gtk-gradient(radial,
2058
center center, 0,
2059
center center, $radio_indicator,
2060
to(scale-alpha($accent_color, $disabled_opacity)),
2061
to(transparent))
2062
$radio_radius_slice / $radio_radius_width;
2063
}
2064
&:indeterminate:checked {
2066
border-image: -gtk-gradient(radial,
2067
center center, 0,
2068
center center, 0.001,
2069
to($accent_color),
2070
to(transparent))
2071
$radio_radius_slice / $radio_radius_width;
2072
}
2073
}
2074
// let's animate things
2076
@keyframes check_check {
2077
from { -gtk-icon-transform: rotate(90deg); }
2078
to { -gtk-icon-transform: unset; }
2079
}
2080
@keyframes check_radio { // FIXME: cannot animate border-image
2082
from {
2083
border-image: -gtk-gradient(radial,
2084
center center, 0,
2085
center center, 0.001,
2086
to($accent_color),
2087
to(transparent))
2088
$radio_radius_slice / $radio_radius_width;
2089
}
2090
to {
2092
border-image: -gtk-gradient(radial,
2093
center center, 0,
2094
center center, $radio_indicator,
2095
to($accent_color),
2096
to(transparent))
2097
$radio_radius_slice / $radio_radius_width;
2098
}
2099
}
2100
@keyframes check_indeterminate {
2102
from { -gtk-icon-transform: unset; }
2103
50% { -gtk-icon-transform: scale(0, 1); }
2104
to { -gtk-icon-transform: unset; }
2105
}
2106
%check_checked,
2108
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2109
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2111
// %radio_checked,
2113
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2114
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2116
%indeterminate_checked,
2118
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2119
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2121
// no animations in menus
2123
menu menuitem {
2124
check:not(:indeterminate):checked,
2125
radio:not(:indeterminate):checked,
2126
check:indeterminate:checked,
2127
radio:indeterminate:checked { animation: none; }
2128
}
2129
treeview.view check,
2131
treeview.view radio {
2132
padding: 0;
2133
&:hover {
2135
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2136
&:disabled { box-shadow: none; }
2138
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2140
}
2141
& {
2143
color: $secondary_fg_color;
2144
&:hover, &:active { color: $fg_color; }
2146
&:disabled { color: $disabled_secondary_fg_color; }
2148
&:checked, &:indeterminate { color: $accent_color; }
2150
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2152
}
2153
&:selected {
2155
color: $secondary_inverse_fg_color;
2156
&:hover, &:active { color: $inverse_fg_color; }
2158
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2160
&:checked, &:indeterminate { color: $accent_color; }
2162
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2164
}
2165
}
2166
treeview.view radio:checked {
2168
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2169
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.png")));
2170
border-image: none;
2171
}
2172
/************
2175
* GtkScale *
2176
************/
2177
scale {
2178
// sizing
2179
$_marks_lenght: 8px;
2180
$_marks_distance: 8px;
2181
$slider_size: 24px;
2183
$marks_slider_size: 30px;
2184
$slider_margin: -($slider_size - $bar_size) / 2;
2186
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2187
$color_slider_margin: -($slider_size) / 2;
2189
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2190
min-height: $medium_size - $slider_size;
2192
min-width: $medium_size - $slider_size;
2193
padding: ($slider_size / 2);
2194
* { transition: $longer_transition; }
2196
// the slider is inside the trough, so to have make it bigger there's a negative margin
2198
slider {
2199
min-height: $slider_size;
2200
min-width: $slider_size;
2201
margin: $slider_margin;
2202
}
2203
// the backing bit
2205
trough {
2206
outline-offset: 2px;
2207
background-color: $fill_color;
2208
&:disabled { color: $disabled_fg_color; }
2210
}
2211
// the colored part of the backing bit
2213
highlight {
2214
background-color: $accent_color;
2215
&:disabled { background-color: transparent; }
2217
}
2218
// this is another differently styled part of the backing bit, the most relevant use case is for example
2220
// in media player to indicate how much video stream as been cached
2221
fill {
2222
background-color: $fill_color;
2223
&:disabled { background-color: transparent; }
2225
}
2226
slider {
2228
transition: all $shorter_duration $standard_curve;
2229
// border-radius: 100%;
2230
// background-color: $accent_color;
2231
background-repeat: no-repeat;
2232
background-position: center;
2233
@each $s, $as in ('', ''),
2235
(':disabled', '-disabled') {
2236
&#{$s} {
2237
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2238
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2240
}
2241
}
2242
background-size: calc(100% - 8px);
2244
&:hover { background-size: calc(100% - 4px); }
2246
&:active { background-size: calc(100% - 0px); }
2248
}
2249
// click-and-hold the slider to activate
2251
&.fine-tune {
2252
// to make the slider shrink in fine-tune mode
2253
slider { background-size: calc(100% - 12px); }
2254
}
2255
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2257
marks {
2259
color: $fill_color;
2260
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2262
(bottom, bottom, top),
2263
(top, left, right),
2264
(bottom, right, left) {
2265
&.#{$marks_class} {
2266
margin-#{$marks_margin}: $_marks_distance;
2267
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2268
}
2269
}
2270
}
2271
&.horizontal {
2273
indicator {
2274
min-height: $_marks_lenght;
2275
min-width: 1px;
2276
}
2277
}
2278
&.vertical {
2280
indicator {
2281
min-height: 1px;
2282
min-width: $_marks_lenght;
2283
}
2284
}
2285
// *WARNING* scale with marks madness following
2287
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2289
('vertical', 'vert') {
2290
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2291
('marks-after', 'marks-after:not(.marks-before)') {
2292
&.#{$dir_class}.#{$marks_class} {
2293
slider {
2294
@each $state, $state_infix in ('', ''),
2295
(':disabled', '-disabled') {
2296
&#{$state} {
2297
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2298
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2300
}
2301
}
2302
@if $dir_class == 'horizontal' {
2304
min-height: $marks_slider_size;
2305
min-width: $slider_size;
2306
@if $marks_infix == 'marks-before' {
2308
margin-top: $marks_slider_margin;
2309
background-position: center calc(100% - 4px);
2311
&:hover { background-position: center calc(100% - 2px); }
2313
&:active { background-position: center calc(100% - 0px); }
2315
}
2316
@if $marks_infix == 'marks-after' {
2318
margin-bottom: $marks_slider_margin;
2319
background-position: center calc(4px);
2321
&:hover { background-position: center calc(2px); }
2323
&:active { background-position: center calc(0px); }
2325
}
2326
}
2327
@if $dir_class == 'vertical' {
2329
min-height: $slider_size;
2330
min-width: $marks_slider_size;
2331
@if $marks_infix == 'marks-before' {
2333
margin-left: $marks_slider_margin;
2334
background-position: calc(4px) center;
2336
&:hover { background-position: calc(2px) center; }
2338
&:active { background-position: calc(0px) center; }
2340
}
2341
@if $marks_infix == 'marks-after' {
2343
margin-right: $marks_slider_margin;
2344
background-position: calc(100% - 4px) center;
2346
&:hover { background-position: calc(100% - 2px) center; }
2348
&:active { background-position: calc(100% - 0px) center; }
2350
}
2351
}
2352
}
2353
&.fine-tune slider {
2355
@if $dir_class == 'horizontal' {
2356
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2357
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2359
}
2360
@if $dir_class == 'vertical' {
2362
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2363
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2365
}
2366
}
2367
}
2368
}
2369
}
2370
&.color {
2372
min-height: 0;
2373
min-width: 0;
2374
&.horizontal {
2376
padding: 0 0 12px 0;
2377
slider {
2379
&:dir(ltr), &:dir(rtl) { // specificity bump
2380
margin-bottom: $color_slider_margin;
2381
margin-top: $color_marks_slider_margin;
2382
}
2383
}
2384
}
2385
&.vertical {
2387
&:dir(ltr) {
2388
padding: 0 0 0 12px;
2389
slider {
2391
margin-left: $color_slider_margin;
2392
margin-right: $color_marks_slider_margin;
2393
}
2394
}
2395
&:dir(rtl) {
2397
padding: 0 12px 0 0;
2398
slider {
2400
margin-right: $color_slider_margin;
2401
margin-left: $color_marks_slider_margin;
2402
}
2403
}
2404
}
2405
}
2406
}
2407
/*****************
2410
* Progress bars *
2411
*****************/
2412
progressbar {
2413
// sizing
2414
&.horizontal {
2415
trough,
2416
progress { min-height: $bar_size; }
2417
}
2418
&.vertical {
2420
trough,
2421
progress { min-width: $bar_size; }
2422
}
2423
// FIXME: insensitive state missing and some other state should be set probably
2425
color: $tertiary_fg_color;
2426
font-size: smaller;
2427
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2429
progress { background-color: $primary_color; }
2431
&.osd { // progressbar.osd used for epiphany page loading progress
2433
// min-width: $bar_size;
2434
// min-height: $bar_size;
2435
// background-color: transparent;
2436
// trough { background-color: transparent; }
2438
progress {
2440
}
2441
}
2442
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2444
}
2445
/*************
2448
* Level Bar *
2449
*************/
2450
levelbar {
2451
block {
2452
min-width: $medium_size;
2453
min-height: $bar_size;
2454
}
2455
&.vertical block {
2457
min-width: $bar_size;
2458
min-height: $medium_size;
2459
}
2460
trough {
2462
padding: 2px;
2463
border-radius: 2px;
2464
@include entry(normal);
2466
&:disabled { @include entry(disabled); }
2468
}
2469
&.horizontal.discrete block { margin: 0 1px; }
2471
&.vertical.discrete block { margin: 1px 0; }
2473
&.horizontal.discrete trough { padding: 2px 1px; }
2475
&.vertical.discrete trough { padding: 1px 2px; }
2477
block {
2479
&.low {
2480
background-color: $warning_color;
2481
}
2482
&.high,
2484
&:not(.empty) {
2485
background-color: $primary_color;
2486
}
2487
&.full {
2489
background-color: $success_color;
2490
}
2491
&.empty {
2493
background-color: $fill_color;
2494
color: $disabled_fg_color;
2495
}
2496
}
2497
}
2498
/****************
2501
* Print dialog *
2502
*****************/
2503
printdialog {
2504
paper {
2505
padding: 0;
2506
border: 1px solid $border_color;
2507
background: $base_color;
2508
color: $fg_color;
2509
}
2510
.dialog-action-box { margin: 12px; }
2512
}
2513
/**********
2516
* Frames *
2517
**********/
2518
frame > border,
2519
.frame {
2520
margin: 0;
2521
padding: 0;
2522
border: 1px solid $border_color;
2523
border-radius: 0;
2524
box-shadow: none;
2525
&.flat { border-style: none; }
2527
}
2528
actionbar > revealer > box {
2530
padding: $container_padding;
2531
border-top: 1px solid $border_color;
2532
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2534
}
2535
scrolledwindow {
2537
viewport.frame { // avoid double borders when viewport inside scrolled window
2538
border-style: none;
2539
}
2540
// This is used when content is touch-dragged past boundaries.
2542
// draws a box on top of the content, the size changes programmatically.
2543
@at-root overshoot {
2544
&.top { @include overshoot(top); }
2545
&.bottom { @include overshoot(bottom); }
2547
&.left { @include overshoot(left); }
2549
&.right { @include overshoot(right); }
2551
}
2552
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2554
@at-root undershoot {
2555
&.top { @include undershoot(top); }
2556
&.bottom { @include undershoot(bottom); }
2558
&.left { @include undershoot(left); }
2560
&.right { @include undershoot(right); }
2562
}
2563
@at-root junction { // the small square between two scrollbars
2565
border-style: solid none none solid;
2566
border-width: 1px;
2567
border-color: $border_color;
2568
background-color: $base_color;
2569
&:dir(rtl) { border-style: solid solid none none; }
2571
}
2572
}
2573
//vbox and hbox separators
2575
separator {
2576
min-width: 1px;
2577
min-height: 1px;
2578
background: $border_color;
2579
}
2580
/*********
2583
* Lists *
2584
*********/
2585
list {
2586
border-color: $border_color;
2587
background-color: $base_color;
2588
row { padding: 2px; }
2590
}
2591
// FIXME
2593
$row_transition: $longer_transition, background-color 0, color 0;
2594
row {
2596
&.activatable {
2597
transition: $row_transition,
2598
background-size $ripple_duration $deceleration_curve,
2599
background-image $ripple_duration * 2 $deceleration_curve;
2600
box-shadow: inset 0 0 0 9999px transparent;
2601
background-image: radial-gradient(circle farthest-corner at center,
2602
transparent 10%,
2603
transparent 0%);
2604
background-repeat: no-repeat;
2605
background-position: center;
2606
background-size: 1000% 1000%;
2607
&:hover {
2609
transition: $row_transition,
2610
box-shadow 0,
2611
background-size $ripple_duration $deceleration_curve,
2612
background-image $ripple_duration * 2 $deceleration_curve;
2613
box-shadow: inset 0 0 0 9999px $row_fill_color;
2614
}
2615
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2617
&:active {
2618
transition: $row_transition,
2619
background-size 0,
2620
background-image 0;
2621
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2622
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2623
background-image: radial-gradient(circle farthest-corner at center,
2624
$semi_fill_color 10%,
2625
transparent 0%);
2626
background-size: 0% 0%;
2627
}
2628
}
2629
&:selected { @extend %selected_items; }
2631
}
2632
/*********************
2635
* App Notifications *
2636
*********************/
2637
.app-notification {
2638
@extend %osd;
2639
@extend toolbar.osd;
2641
margin: 8px;
2643
button { @extend %button_basic.flat; }
2645
&.frame,
2647
border { border-style: none; }
2648
}
2649
/*************
2652
* Expanders *
2653
*************/
2654
expander {
2655
arrow {
2656
transition: all $shorter_duration $standard_curve;
2657
min-width: 16px;
2658
min-height: 16px;
2659
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2660
-gtk-icon-transform: rotate(-90deg);
2661
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2663
&:checked { -gtk-icon-transform: unset; }
2665
color: $secondary_fg_color;
2667
&:hover, &:active { color: $fg_color; }
2669
&:disabled { color: $disabled_secondary_fg_color; }
2671
&:selected {
2673
color: $secondary_inverse_fg_color;
2674
&:hover, &:active { color: $inverse_fg_color; }
2676
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2678
}
2679
}
2680
}
2681
/************
2684
* Calendar *
2685
***********/
2686
calendar {
2687
padding: 1px;
2688
border: 1px solid $border_color;
2689
color: $fg_color;
2690
&:disabled { color: $disabled_fg_color; }
2692
&:selected {
2694
@extend %selected_items;
2695
border-radius: 2px + 1px;
2697
}
2698
&.header {
2700
border-style: none none solid;
2701
border-radius: 0;
2702
}
2703
&.button { @extend %simple_flat_button; }
2705
&.highlight {
2707
color: gtkalpha(currentColor, $tertiary_opacity);
2708
font-weight: 500;
2709
}
2710
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2712
}
2713
/***********
2716
* Dialogs *
2717
***********/
2718
messagedialog { // Message Dialog styling
2719
&.background { background-color: $lighter_bg_color; }
2720
.titlebar {
2722
min-height: $small_size;
2723
border-style: none;
2724
box-shadow: inset 0 1px $highlight_color;
2725
background-color: $lighter_bg_color;
2726
color: $fg_color;
2727
&:backdrop { color: $secondary_fg_color; }
2729
}
2730
&.csd { // rounded bottom border styling for csd version
2732
&.background {
2733
// bigger radius for better antialiasing
2734
border-bottom-left-radius: 2px;
2735
border-bottom-right-radius: 2px;
2736
}
2737
.dialog-action-area button {
2739
padding: 8px 16px;
2740
border-top: 1px solid $border_color;
2741
border-radius: 0;
2742
@extend %simple_flat_button;
2744
&:first-child { border-bottom-left-radius: 2px; }
2746
&:last-child { border-bottom-right-radius: 2px; }
2748
}
2749
}
2750
}
2751
filechooser {
2753
.dialog-action-box { border-top: 1px solid $border_color; }
2754
#pathbarbox {
2756
border-bottom: 1px solid $border_color;
2757
background-color: $bg_color;
2758
}
2759
}
2760
filechooserbutton:drop(active) {
2762
box-shadow: none;
2763
}
2764
/***********
2767
* Sidebar *
2768
***********/
2769
.sidebar {
2770
border-style: none;
2771
background-color: $lighter_bg_color;
2772
@at-root %sidebar_left,
2774
&:dir(ltr),
2775
&.left,
2776
&.left:dir(rtl) {
2777
border-right: 1px solid $border_color;
2778
border-left-style: none;
2779
}
2780
@at-root %sidebar_right
2782
&:dir(rtl),
2783
&.right {
2784
border-left: 1px solid $border_color;
2785
border-right-style: none;
2786
}
2787
list { background-color: transparent; }
2789
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2791
}
2792
stacksidebar {
2794
&.sidebar {
2795
&:dir(ltr),
2796
&.left,
2797
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2798
&:dir(rtl),
2800
&.right { list { @extend %sidebar_right; }}
2801
}
2802
row {
2804
padding: 10px 4px;
2805
> label {
2807
padding-left: 6px;
2808
padding-right: 6px;
2809
}
2810
&.needs-attention > label { @extend %needs_attention; }
2812
}
2813
}
2814
/****************
2817
* File chooser *
2818
****************/
2819
placessidebar {
2820
> viewport.frame { border-style: none; }
2821
list { padding: (4px - 3px) 0 4px; }
2823
row {
2825
// Needs overriding of the GtkListBoxRow padding
2826
min-height: 32px;
2827
margin: -1px 0; // Remove unknown margins
2828
padding: 0;
2829
// Using margins/padding directly in the SidebarRow
2831
// will make the animation of the new bookmark row jump
2832
> revealer { padding: 0 12px; }
2833
&:selected { color: $inverse_fg_color; }
2835
&:disabled { color: $disabled_fg_color; }
2837
image.sidebar-icon {
2839
opacity: $tertiary_opacity; // dim the device icons
2840
&:dir(ltr) { padding-right: 8px; }
2842
&:dir(rtl) { padding-left: 8px; }
2843
}
2844
label.sidebar-label {
2846
&:dir(ltr) { padding-right: 2px; }
2847
&:dir(rtl) { padding-left: 2px; }
2848
}
2849
@at-root button.sidebar-button {
2851
@extend %simple_flat_button;
2852
@extend %small_button;
2854
row:selected & {
2856
}
2857
}
2858
&.sidebar-placeholder-row {
2860
min-height: 2px;
2861
padding: 0 8px;
2862
background-image: image($accent_color);
2863
background-clip: content-box;
2864
}
2865
&.sidebar-new-bookmark-row { color: $accent_color; }
2867
&:drop(active):not(:disabled) {
2869
box-shadow: inset 0 0 0 2px $accent_color;
2870
&:selected {
2872
// background-color: $accent_color;
2873
// color: $inverse_fg_color;
2874
}
2875
}
2876
}
2877
}
2878
placesview {
2880
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2881
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2883
// this selects the "connect to server" label
2885
> actionbar > revealer > box > label {
2886
padding-left: 8px;
2887
padding-right: 8px;
2888
}
2889
}
2890
/*********
2893
* Paned *
2894
*********/
2895
paned {
2896
> separator {
2897
min-width: 1px;
2898
min-height: 1px;
2899
-gtk-icon-source: none; // defeats the ugly default handle decoration
2900
border-style: none; // just to be sure
2901
background-color: transparent;
2902
// workaround, using background istead of a border since the border will get rendered twice (?)
2903
background-image: image($border_color);
2904
background-size: 1px 1px;
2905
background-clip: content-box; // avoids borders image being rendered twice (?)
2906
&.wide {
2908
min-width: 6px;
2909
min-height: 6px;
2910
background-color: $bg_color;
2911
background-image: image($border_color), image($border_color);
2912
background-size: 1px 1px, 1px 1px;
2913
}
2914
}
2915
&.horizontal > separator {
2917
background-repeat: repeat-y;
2918
&:dir(ltr) {
2920
margin: 0 -8px 0 0;
2921
padding: 0 8px 0 0;
2922
background-position: left;
2923
}
2924
&:dir(rtl) {
2926
margin: 0 0 0 -8px;
2927
padding: 0 0 0 8px;
2928
background-position: right;
2929
}
2930
&.wide {
2932
margin: 0;
2933
padding: 0;
2934
background-repeat: repeat-y, repeat-y;
2935
background-position: left, right;
2936
}
2937
}
2938
&.vertical > separator {
2940
margin: 0 0 -8px 0;
2941
padding: 0 0 8px 0;
2942
background-repeat: repeat-x;
2943
background-position: top;
2944
&.wide {
2946
margin: 0;
2947
padding: 0;
2948
background-repeat: repeat-x, repeat-x;
2949
background-position: bottom, top;
2950
}
2951
}
2952
}
2953
/**************
2956
* GtkInfoBar *
2957
**************/
2958
infobar {
2959
border-style: none;
2960
&.info { background-color: $info_bg_color; }
2962
&.question { background-color: $question_bg_color; }
2964
&.warning { background-color: $warning_bg_color; }
2966
&.error { background-color: $error_bg_color; }
2968
&.info,
2970
&.question,
2971
&.warning,
2972
&.error {
2973
> label, & { color: $inverse_fg_color; }
2974
button { @extend %button_selected; }
2976
selection {}
2978
*:link { @extend %link_selected; }
2980
}
2981
}
2982
/************
2985
* Tooltips *
2986
************/
2987
tooltip {
2988
&.background {
2989
// background-color needs to be set this way otherwise it gets drawn twice
2990
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2991
box-shadow: inset 0 1px $highlight_color;
2992
background-color: scale-alpha($base_color, $higher_opacity);
2993
}
2994
// @extend %osd;
2996
// padding: 4px; /* not working */
2998
border-radius: 2px;
2999
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3000
&:not(.csd) {
3002
border: 1px solid $border_color;
3003
border-radius: 2px + 1px;
3004
background-clip: $extra_background_clip;
3005
}
3006
// FIXME: we need a border or tooltips vanish on black background.
3008
decoration { background-color: transparent; }
3009
label {
3011
// tooltip label has already 6px margins
3012
min-height: 32px - 6px * 2;
3013
padding: 0 8px - 6px;
3014
}
3015
* {
3017
// workaround for Eclipse.
3018
// do not include any declaration here.
3019
// padding: 0;
3020
// background-color: transparent;
3021
// color: inherit;
3022
}
3023
}
3024
/*****************
3027
* Color Chooser *
3028
*****************/
3029
colorswatch {
3030
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3031
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3032
// applied to the overlay box.
3033
// base color corners rounding
3035
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3036
// sports a bigger radius.
3037
// nth-child is needed by the custom color strip.
3038
&.top {
3040
border-top-left-radius: $material_radius + 0.5px;
3041
border-top-right-radius: $material_radius + 0.5px;
3042
overlay {
3044
border-top-left-radius: $material_radius;
3045
border-top-right-radius: $material_radius;
3046
}
3047
}
3048
&.bottom {
3050
border-bottom-left-radius: $material_radius + 0.5px;
3051
border-bottom-right-radius: $material_radius + 0.5px;
3052
overlay {
3054
border-bottom-left-radius: $material_radius;
3055
border-bottom-right-radius: $material_radius;
3056
}
3057
}
3058
&.left,
3060
&:first-child:not(.top) {
3061
border-top-left-radius: $material_radius + 0.5px;
3062
border-bottom-left-radius: $material_radius + 0.5px;
3063
overlay {
3065
border-top-left-radius: $material_radius;
3066
border-bottom-left-radius: $material_radius;
3067
}
3068
}
3069
&.right,
3071
&:last-child:not(.bottom) {
3072
border-top-right-radius: $material_radius + 0.5px;
3073
border-bottom-right-radius: $material_radius + 0.5px;
3074
overlay {
3076
border-top-right-radius: $material_radius;
3077
border-bottom-right-radius: $material_radius;
3078
}
3079
}
3080
&.dark overlay { color: $light_fg_color; }
3082
&.light overlay { color: $dark_fg_color; }
3084
&.dark { color: $light_fg_color; } // for focus ring
3086
&.light { color: $dark_fg_color; } // for focus ring
3088
&:drop(active) {
3090
box-shadow: none;
3091
&.light overlay {
3093
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3094
}
3095
&.dark overlay {
3097
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3098
}
3099
}
3100
overlay {
3102
transition: $shadow_transition;
3103
box-shadow: $shadow_1;
3104
&:hover { box-shadow: $shadow_2; }
3106
}
3107
&#add-color-button {
3109
border-radius: $material_radius $material_radius 0 0;
3110
color: $light_fg_color; // for focus ring
3111
&:only-child { border-radius: $material_radius; }
3113
overlay {
3115
background-image: linear-gradient(to right,
3116
$error_bg_color 25%,
3117
$warning_bg_color 25%, $warning_bg_color 50%,
3118
$info_bg_color 50%, $info_bg_color 75%,
3119
$question_bg_color 75%);
3120
color: $light_fg_color;
3121
}
3122
}
3123
&:disabled {
3125
opacity: $disabled_opacity;
3126
overlay { box-shadow: none; }
3128
}
3129
row:selected & {
3131
}
3132
&#editor-color-sample {
3134
border-radius: $material_radius + 0.5px;
3135
overlay { border-radius: $material_radius; }
3137
// overlay:hover { box-shadow: $shadow_1; }
3139
}
3140
}
3141
// colorscale popup
3143
colorchooser .popover.osd {
3144
transition: $shadow_transition;
3145
border-radius: 2px;
3146
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3147
background-color: $base_color;
3148
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3150
spinbutton:not(.vertical) { @extend %entry.flat; }
3152
}
3153
/********
3156
* Misc *
3157
********/
3158
//content view (grid/list)
3159
.content-view {
3160
background-color: $bg_color;
3161
// &:hover { -gtk-icon-effect: highlight; }
3163
rubberband, .rubberband { @extend rubberband; }
3165
}
3166
.scale-popup {
3168
.osd & { @extend %osd; }
3169
.osd & button.flat { //FIXME: quick hack, redo properly
3171
}
3172
button { // +/- buttons on GtkVolumeButton popup
3174
}
3175
}
3176
/**********************
3179
* Window Decorations *
3180
*********************/
3181
decoration {
3182
transition: $shadow_transition;
3183
border-radius: 2px 2px 0 0;
3184
box-shadow: $shadow_4, 0 16px 16px transparent;
3185
// FIXME rationalize shadows
3187
// this is used for the resize cursor area
3189
margin: 8px;
3190
&:backdrop {
3192
// the transparent shadow here is to enforce that the shadow extents don't
3193
// change when we go to backdrop, to prevent jumping windows.
3194
// The biggest shadow should be in the same order then in the active state
3195
// or the jumping will happen during the transition.
3196
box-shadow: $shadow_2, 0 16px 16px transparent;
3197
}
3198
.maximized &,
3200
.fullscreen &,
3201
.tiled & { border-radius: 0; }
3202
.popup & { box-shadow: none; }
3204
// server-side decorations as used by mutter
3206
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3207
.csd.popup & {
3209
border-radius: 2px;
3210
box-shadow: $shadow_2;
3211
}
3212
tooltip.csd & {
3214
border-radius: 2px;
3215
box-shadow: $shadow_2;
3216
}
3217
messagedialog.csd & {
3219
border-radius: 2px;
3220
// box-shadow: $shadow_4, 0 16px 16px transparent;
3221
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3223
}
3224
.solid-csd & {
3226
margin: 0;
3227
padding: 4px;
3228
// border: solid 1px $border_color;
3229
// border-radius: 0;
3230
box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3231
// background-color: $border_color;
3232
}
3233
}
3234
// Window Close button
3236
button.titlebutton {
3237
// @extend %simple_flat_button;
3238
@extend %circular_button;
3240
.selection-mode & {
3242
}
3243
}
3244
// catch all extend :)
3247
%selected_items {
3249
background-color: $primary_color;
3250
@at-root %nobg_selected_items, & {
3252
color: $inverse_fg_color;
3253
&:disabled { color: $disabled_inverse_fg_color; }
3255
}
3256
}
3257
.monospace { font-family: monospace; }
3259
/**********************
3262
* Touch Copy & Paste *
3263
*********************/
3264
//touch selection handlebars for the Popover.osd above
3265
cursor-handle {
3266
border-radius: $circular_radius;
3267
background-color: $accent_color;
3268
background-image: none;
3269
&.top:dir(ltr), &.bottom:dir(rtl) {
3271
padding-left: 6px;
3272
border-top-right-radius: 0;
3273
}
3274
&.bottom:dir(ltr), &.top:dir(rtl) {
3276
padding-right: 6px;
3277
border-top-left-radius: 0;
3278
}
3279
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3281
-GtkWidget-text-handle-width: 24;
3282
-GtkWidget-text-handle-height: 30;
3283
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3285
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3286
url('#{$_url}@2.png'));
3287
}
3288
}
3289
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3291
// shortcut window keys
3293
.keycap {
3294
min-width: 28px - 8px * 2;
3295
min-height: 28px - 2px;
3296
margin-top: 2px;
3297
padding-bottom: 2px;
3298
padding-left: 8px;
3299
padding-right: 8px;
3300
border: solid 1px $border_color;
3302
border-radius: 2px + 1px;
3303
box-shadow: inset 0 -2px $border_color;
3304
background-color: $base_color;
3305
color: $fg_color;
3306
font-size: smaller;
3307
}
3308
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3310
transition: $longer_transition;
3311
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3312
caret-color: $accent_color;
3313
}
3314
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3316
stackswitcher button.circular,
3318
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3319
min-width: $medium_size;
3320
min-height: $medium_size;
3321
padding: 0;
3322
}
3323