ASCII text
1
$asset_suffix: if($variant=='dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
$small_size: if($laptop == 'true', 20px, 24px);
5
$medium_size: if($laptop == 'true', 32px, 36px);
6
$large_size: if($laptop == 'true', 44px, 48px);
7
$container_padding: 6px;
9
$bar_size: 4px;
11
$menuitem_size: 28px;
12
$md_radius: 2px;
14
$circular_radius: 9999px;
15
$shorter_duration: 0.2s;
17
$longer_duration: 0.3s;
18
$ripple_duration: 0.5s;
19
$standard_curve: cubic-bezier(0.4, 0.0, 0.2, 1);
21
$deceleration_curve: cubic-bezier(0.0, 0.0, 0.2, 1);
22
$acceleration_curve: cubic-bezier(0.4, 0.0, 1, 1);
23
$sharp_curve: cubic-bezier(0.4, 0.0, 0.6, 1);
24
$shorter_transition: all $shorter_duration $deceleration_curve;
26
$longer_transition: all $longer_duration $deceleration_curve;
27
$shadow_transition: box-shadow $shorter_duration $deceleration_curve;
28
* {
30
padding: 0;
31
background-clip: padding-box;
32
-GtkToolButton-icon-spacing: 4;
34
-GtkTextView-error-underline-color: $error_color;
35
// The size for scrollbars. The slider is 2px smaller, but we keep it
37
// up so that the whole area is sensitive to button presses for the
38
// slider. The stepper button is larger in both directions, the slider
39
// only in the width
40
-GtkScrolledWindow-scrollbar-spacing: 0;
42
-GtkToolItemGroup-expander-size: 11;
44
-GtkWidget-text-handle-width: 24;
46
-GtkWidget-text-handle-height: 24;
47
-GtkDialog-button-spacing: 4;
49
-GtkDialog-action-area-border: 0;
50
// We use the outline properties to signal the focus properties
52
// to the adwaita engine: using real CSS properties is faster,
53
// and we don't use any outlines for now.
54
outline-style: solid;
56
outline-width: 2px;
57
outline-color: $track_color;
58
outline-offset: -4px;
59
-gtk-outline-radius: 2px;
60
-gtk-secondary-caret-color: $primary_color;
62
}
63
/***************
66
* Base States *
67
***************/
68
.background {
69
background-color: $bg_color;
70
color: $fg_color;
71
}
72
/*
74
These wildcard seems unavoidable, need to investigate.
75
Wildcards are bad and troublesome, use them with care,
76
or better, just don't.
77
Everytime a wildcard is used a kitten dies, painfully.
78
*/
79
*:disabled { -gtk-icon-effect: dim; }
81
.gtkstyle-fallback {
83
background-color: $bg_color;
84
color: $fg_color;
85
&:hover {
87
background-color: darken($bg_color, 5%);
88
color: $fg_color;
89
}
90
&:active {
92
background-color: darken($bg_color, 10%);
93
color: $fg_color;
94
}
95
&:disabled {
97
background-color: $bg_color;
98
color: $disabled_fg_color;
99
}
100
&:selected {
102
background-color: $primary_color;
103
color: $inversed_fg_color;
104
}
105
}
106
.view,
108
%view {
109
@extend row.activatable;
110
background-color: $base_color;
112
color: $fg_color;
113
&:hover, &:active, &:selected { border-radius: 2px; }
115
&:disabled {
117
// background-color: $alt_base_color;
118
color: $disabled_fg_color;
119
}
120
&:selected { @extend %selected_items; }
122
}
123
.view,
125
textview {
126
text {
127
// @extend %view;
128
background-color: $base_color;
130
color: $fg_color;
131
&:disabled {
133
// background-color: $alt_base_color;
134
color: $disabled_fg_color;
135
}
136
selection { @extend %selected_items; }
138
}
139
}
140
textview border {
142
background-color: $alt_base_color;
143
color: $tertiary_fg_color;
144
}
145
iconview { @extend .view; }
147
.rubberband,
149
rubberband {
150
border: 1px solid $alt_primary_color;
151
background-color: scale-alpha($alt_primary_color, $lower_opacity);
152
}
153
flowbox {
155
rubberband { @extend rubberband; }
156
flowboxchild {
158
outline-offset: -2px;
159
padding: 4px;
160
border-radius: 2px;
161
&:selected { @extend %selected_items; }
163
}
164
}
165
label {
167
caret-color: currentColor; // this shouldn't be needed.
168
&.separator {
170
@extend .dim-label;
171
color: $fg_color;
173
}
174
row:selected &,
176
&:selected { @extend %nobg_selected_items; }
177
selection {
179
background-color: $primary_color;
180
color: $inversed_fg_color;
181
}
182
&:disabled {
184
color: $disabled_fg_color;
185
selection { @extend %selected_items:disabled; }
187
tab &,
189
button &,
190
menuitem & { color: inherit; }
191
}
192
}
193
.dim-label { opacity: $hint_opacity; }
195
assistant {
197
.sidebar {
198
padding: 4px 0;
199
// background-color: $base_color;
200
// border-top: 1px solid $borders_color;
201
}
202
// &.csd .sidebar { border-top-style: none; }
204
.sidebar label {
206
min-height: $medium_size;
207
padding: 0 12px;
208
color: $tertiary_fg_color;
209
font-weight: 500;
210
&.highlight { color: $fg_color; }
212
}
213
}
214
%osd, .osd { opacity: $higher_opacity; }
216
/*********************
219
* Spinner Animation *
220
*********************/
221
@keyframes spin {
222
to { -gtk-icon-transform: rotate(1turn); }
223
}
224
@keyframes spin_colors {
226
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
227
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
228
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
229
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
230
}
231
spinner {
233
background: none;
234
opacity: 0; // non spinning spinner makes no sense
235
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
236
&:checked {
238
opacity: 1;
239
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
240
&:disabled { opacity: $disabled_opacity; }
242
}
243
}
244
/****************
247
* Text Entries *
248
****************/
249
%entry,
250
entry {
251
%entry_basic, & {
252
min-height: $medium_size;
253
padding: 0 8px;
254
border-radius: 2px;
255
@include entry(normal);
257
&:focus { @include entry(focus); }
259
&:disabled { @include entry(disabled); }
261
&.flat {
263
border-radius: 0;
264
@include entry(flat-normal);
266
&:focus { @include entry(flat-focus); }
268
&:disabled { @include entry(flat-disabled); }
270
}
271
image { // icons inside the entry
273
// @extend %simple_flat_button;
274
min-height: $small_size;
276
min-width: $small_size;
277
border-radius: $circular_radius;
278
-gtk-outline-radius: $circular_radius;
279
color: gtkalpha(currentColor, $enabled_opacity);
280
&:hover, &:active { color: currentColor; }
282
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
284
&.left { margin-left: -2px; margin-right: 2px; }
286
&.right { margin-left: 2px; margin-right: -2px; }
288
}
289
undershoot {
291
&.left { @include undershoot(left); }
292
&.right { @include undershoot(right); }
294
}
295
selection { @extend %selected_items; }
297
// entry error and warning style
299
@each $e_type, $e_color in (error, $error_color),
300
(warning, $warning_color) {
301
&.#{$e_type} {
302
@include entry(normal, $e_color);
303
&:focus { @include entry(focus, $e_color); }
305
&:disabled { @include entry(disabled, $e_color); }
307
&.flat {
309
@include entry(flat-normal, $e_color);
310
&:focus { @include entry(flat-focus, $e_color); }
312
&:disabled { @include entry(flat-disabled, $e_color); }
314
}
315
}
316
}
317
&:drop(active) {
319
// box-shadow: inset 0 0 0 2px $accent_color;
320
}
321
.osd & {
323
}
324
}
325
progress {
327
margin: 2px (2px - 8px);
328
border-style: none none solid;
329
border-width: 2px;
330
border-color: $primary_color;
331
// border-radius: 0;
332
// box-shadow: none;
333
background-color: transparent;
334
// background-image: none;
335
}
336
// linked entries
338
.linked:not(.vertical) > & { @extend %linked; }
339
// Vertically linked entries
341
.linked.vertical > & { @extend %linked_vertical; }
342
.linked:not(.vertical) > &.flat,
344
.linked.vertical > &.flat { border-radius: 0; }
345
}
346
treeview entry {
348
&.flat, & {
349
min-height: 0;
350
padding: 2px;
351
border-radius: 0;
352
background-color: $base_color;
353
&, &:focus {
355
border-image: none;
356
box-shadow: none;
357
}
358
}
359
}
360
/***********
363
* Buttons *
364
***********/
365
// stuff for .needs-attention
366
@keyframes needs_attention {
367
from {
368
background-image: -gtk-gradient(radial,
369
center center, 0,
370
center center, 0.001,
371
to($accent_color),
372
to(transparent));
373
}
374
to {
376
background-image: -gtk-gradient(radial,
377
center center, 0,
378
center center, 0.5,
379
to($accent_color),
380
to(transparent));
381
}
382
}
383
%button,
385
button {
386
@at-root %button_basic, & {
387
min-height: 24px;
388
min-width: 16px;
389
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
390
border-radius: 2px;
391
font-weight: 500;
392
@include button(normal);
394
&:hover { @include button(hover); }
396
&:active { @include button(active); }
398
&:disabled { @include button(disabled); }
400
&:checked { @include button(checked); }
402
&:checked:disabled { @include button(checked-disabled); }
404
@at-root %flat_button, &.flat {
406
@at-root %simple_flat_button, & {
407
@include button(flat-normal);
408
&:hover { @include button(flat-hover); }
410
&:active { @include button(flat-active); }
412
&:disabled { @include button(flat-disabled); }
414
}
415
&:checked { @include button(flat-checked); }
417
&:checked:disabled { @include button(flat-checked-disabled); }
419
}
420
&.text-button {
422
padding-left: 16px;
423
padding-right: 16px;
424
}
425
&.image-button {
427
min-width: 24px;
428
padding: ($medium_size - 24px) / 2;
429
border-radius: $circular_radius;
430
-gtk-outline-radius: $circular_radius;
431
}
432
&.text-button.image-button {
434
border-radius: 2px;
435
-gtk-outline-radius: 2px;
436
label {
438
&:first-child {
439
margin-left: 16px - ($medium_size - 24px) / 2;
440
margin-right: 2px;
441
}
442
&:last-child {
444
margin-left: 2px;
445
margin-right: 16px - ($medium_size - 24px) / 2;
446
}
447
&:only-child {
449
margin-left: 16px - ($medium_size - 24px) / 2;
450
margin-right: 16px - ($medium_size - 24px) / 2;
451
}
452
}
453
image:not(:only-child) {
455
&:first-child { margin-left: (24px - 16px) / 2; }
456
&:last-child { margin-right: (24px - 16px) / 2; }
458
}
459
}
460
.linked > & { @extend %linked; }
462
.linked.vertical > & { @extend %linked_vertical; }
464
.linked > &.flat,
466
.linked.vertical > &.flat {
467
border-radius: 2px;
468
&.image-button {
470
border-radius: $circular_radius;
471
-gtk-outline-radius: $circular_radius;
472
}
473
&.text-button.image-button {
475
border-radius: 2px;
476
-gtk-outline-radius: 2px;
477
}
478
}
479
&:drop(active) {
481
// box-shadow: inset 0 0 0 2px $accent_color;
482
}
483
}
484
@at-root %button_selected, row:selected & {
486
&:disabled { color: $disabled_secondary_inversed_fg_color; }
487
}
488
// big standalone buttons like in Documents pager
490
&.osd {
491
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
492
&.image-button { padding: ($large_size - 24px) / 2; }
494
&:disabled { opacity: 0; }
496
}
497
//overlay / OSD style
499
@at-root %osd_button,
500
.osd & {
501
}
502
// Suggested and Destructive Action buttons
504
@each $b_type, $b_color in (suggested-action, $suggested_color),
505
(destructive-action, $destructive_color) {
506
&.#{$b_type} {
507
background-color: $b_color;
508
color: $inversed_fg_color;
509
// @include button(normal, $b_color, $inversed_fg_color);
511
// &:hover { @include button(hover, $b_color, $inversed_fg_color); }
513
// &:active, &:checked { @include button(active, $b_color, $inversed_fg_color); }
515
&:disabled { @include button(disabled, $b_color, $inversed_fg_color); }
517
&:checked { background-color: mix($inversed_fg_color, $b_color, percentage($lower_opacity)); }
519
&.flat {
521
background-color: transparent;
522
color: $b_color;
523
// @include button(flat-normal, $b_color, $inversed_fg_color);
525
// &:hover { @include button(flat-hover, $b_color, $inversed_fg_color); }
527
// &:active, &:checked { @include button(flat-active, $b_color, $inversed_fg_color); }
529
&:disabled { @include button(flat-disabled, $b_color, $inversed_fg_color); }
531
}
532
.osd & {
534
}
535
}
536
}
537
.stack-switcher > & {
539
// to position the needs attention dot, padding is added to the button
540
// child, a label needs just lateral padding while an icon needs vertical
541
// padding added too.
542
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
544
> label {
546
padding-left: 6px; // label padding
547
padding-right: 6px; //
548
}
549
> image {
551
padding-left: 6px; // image padding
552
padding-right: 6px; //
553
padding-top: 3px; //
554
padding-bottom: 3px; //
555
}
556
&.text-button {
558
// compensate text-button paddings
559
padding-left: 16px - 6px;
560
padding-right: 16px - 6px;
561
}
562
&.image-button {
564
// we want image buttons to have a 1:1 aspect ratio, so compensation
565
// of the padding added to the GtkImage is needed
566
padding-left: ($medium_size - 16px) / 2 - 6px;
567
padding-right: ($medium_size - 16px) / 2 - 6px;
568
}
569
&.needs-attention {
571
> label,
572
> image { @extend %needs_attention; }
573
&:checked {
575
> label,
576
> image {
577
animation: none;
578
background-image: none;
579
}
580
}
581
}
582
}
583
// hide separators
585
separator {
586
min-width: 0;
587
min-height: 0;
588
background: transparent;
589
}
590
// &.font,
592
// &.file { separator { background-color: transparent; }}
593
// &.font { > box > box > label { font-weight: bold; }}
595
// inline-toolbar buttons
597
.inline-toolbar & {
598
// @extend %button_basic.flat;
599
&:not(.text-button) { @extend %circular_button; }
601
}
602
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
604
}
605
%needs_attention {
607
animation: needs_attention $longer_duration $deceleration_curve forwards;
608
background-repeat: no-repeat;
609
background-position: right 3px;
610
background-size: 6px 6px;
611
&:dir(rtl) { background-position: left 3px; }
613
}
614
// all the following is for the +|- buttons on inline toolbars, that way
616
// should really be deprecated...
617
.inline-toolbar toolbutton > button { // redefining the button look is
618
// needed since those are flat...
619
}
620
// More inline toolbar buttons
622
toolbar.inline-toolbar toolbutton {
623
// > button.flat { @extend %linked_middle; }
624
// &:first-child > button.flat { @extend %linked:first-child; }
626
// &:last-child > button.flat { @extend %linked:last-child; }
628
// &:only-child > button.flat { @extend %linked:only-child; }
630
}
631
%linked_middle {
633
border-radius: 0;
634
-gtk-outline-radius: 2px;
635
}
636
%linked {
638
@extend %linked_middle;
639
&:first-child {
641
border-top-left-radius: 2px;
642
border-bottom-left-radius: 2px;
643
}
644
&:last-child {
646
border-top-right-radius: 2px;
647
border-bottom-right-radius: 2px;
648
}
649
&:only-child {
651
border-radius: 2px;
652
}
653
}
654
%linked_vertical_middle {
656
border-radius: 0;
657
-gtk-outline-radius: 2px;
658
}
659
%linked_vertical{
661
@extend %linked_vertical_middle;
662
&:first-child {
664
border-top-left-radius: 2px;
665
border-top-right-radius: 2px;
666
}
667
&:last-child {
669
border-bottom-left-radius: 2px;
670
border-bottom-right-radius: 2px;
671
}
672
&:only-child {
674
border-radius: 2px;
675
}
676
}
677
/* menu buttons */
679
modelbutton.flat,
680
.menuitem.button.flat {
681
min-height: $menuitem_size;
682
padding: 0 8px;
683
border-radius: 2px;
684
color: inherit;
685
@extend %simple_flat_button;
687
&:selected { @extend %selected_items; }
689
check,
691
radio {
692
box-shadow: none;
693
background-image: none;
694
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
696
&:last-child { margin-left: -8px; margin-right: -16px; }
698
&:first-child { margin-left: -16px; margin-right: -8px; }
700
}
701
check:not(:indeterminate):checked { @extend %check_checked; }
703
// radio:not(:indeterminate):checked { @extend %radio_checked; }
705
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
707
}
708
modelbutton.flat arrow {
710
background: none;
711
&:hover { background: none; }
713
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
715
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
717
}
718
button.color {
720
min-height: $small_size;
721
min-width: $small_size;
722
padding: $container_padding;
723
colorswatch:only-child {
725
// &, overlay { border-radius: 0; }
726
}
727
}
728
/*********
731
* Links *
732
*********/
733
*:link {
734
&, &:hover, &:active { color: $link_color; }
735
&:visited {
737
&, &:hover, &:active { color: $link_visited_color; }
738
}
739
@at-root %link_selected,
741
&:selected,
742
*:selected & { color: $inversed_fg_color; }
743
}
744
button:link,
746
button:visited {
747
@extend *:link;
748
> label { text-decoration-line: underline; }
750
}
751
/*****************
753
* GtkSpinButton *
754
*****************/
755
spinbutton {
756
&:not(.vertical) {
757
// in this horizontal configuration, the whole spinbutton
758
// behaves as the entry, so we extend the entry styling
759
// and nuke the style on the internal entry
760
@extend %entry;
761
padding: 0;
763
%spinbutton_entry,
765
entry {
766
min-width: $large_size - 8px * 2;
767
// reset all the other props since the spinbutton node is styled here
768
margin: 0;
769
border-image: none;
770
border-radius: 0;
771
box-shadow: none;
772
background-color: transparent;
773
//
774
// This will help to simplify spinbutton's code, but unfortunatelly
775
// doesn't work properly in :dir(rtl). It needs z-index property.
776
//
777
// min-width: $large_size - 8px;
778
//
779
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
780
//
781
// &:dir(ltr) {
782
// margin-right: -$spinbuttons_width;
783
// padding-right: $spinbuttons_width;
784
// }
785
//
786
// &:dir(rtl) {
787
// margin-left: -$spinbuttons_width;
788
// padding-left: $spinbuttons_width;
789
// }
790
}
791
button {
793
// margin: $container_padding;
794
border: solid $container_padding transparent;
795
@extend %simple_flat_button;
797
@extend %small_button;
799
&.up:dir(ltr),
801
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
802
&.up:dir(rtl),
804
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
805
}
806
}
807
// OSD horizontal
809
.osd &:not(.vertical) {
810
button {
811
}
812
}
813
// Vertical
815
&.vertical {
816
// in the vertical configuration, we treat the spinbutton
817
// as a box, and tweak the style of the entry in the middle
818
// so that it's linked
819
// FIXME: this should not be set at all, but otherwise it gets the wrong
821
// color
822
&:disabled { color: $disabled_fg_color; }
823
&:drop(active) {
825
box-shadow: none;
826
}
827
entry {
829
min-height: $medium_size;
830
min-width: $large_size;
831
padding: 0;
832
}
833
button {
835
min-height: $medium_size;
836
min-width: $large_size;
837
padding: 0;
838
@extend %simple_flat_button;
840
&.up { border-radius: 2px 2px 0 0; }
842
&.down { border-radius: 0 0 2px 2px; }
844
}
845
}
846
// OSD vertical
848
.osd &.vertical button:first-child {
849
}
850
// Misc
852
treeview &:not(.vertical) {
853
min-height: 0;
854
border-style: none;
855
border-radius: 0;
856
entry {
858
min-height: 0;
859
padding: 1px 2px;
860
}
861
}
862
}
863
/**************
866
* ComboBoxes *
867
**************/
868
combobox {
869
arrow {
870
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
871
min-height: 16px;
872
min-width: 16px;
873
}
874
button.combo:checked { transition: none; } // workaround for menuitem selection
876
button.combo cellview {
878
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
879
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
880
}
881
#gtk-combobox-popup-menu {
883
padding: 2px 0;
884
menuitem {
886
min-height: $medium_size - 2px * 2;
887
padding: 0 8px;
888
}
889
}
890
&.linked {
892
button:nth-child(2) {
893
&:dir(ltr) { @extend %linked:last-child; }
894
&:dir(rtl) { @extend %linked:first-child; }
895
}
896
}
897
&:drop(active) { // FIXME: untested
899
box-shadow: none;
900
// button.combo { @extend %button_basic:drop(active); }
902
}
903
}
904
.linked > combobox > box > button.combo {
906
// the combo is a composite widget so the way we do button linking doesn't
907
// work, special case needed. See
908
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
909
&:dir(ltr),
911
&:dir(rtl) { @extend %linked_middle; } // specificity bump
912
}
913
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
915
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
916
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
917
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
919
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
920
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
921
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
922
%combo_flat {
924
border-radius: 0;
925
background-image: none;
926
font-weight: inherit;
927
@include entry(flat-normal);
929
&:hover { box-shadow: inset 0 -2px $track_color; }
931
&:checked {
933
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
934
$primary_color 100%,
935
transparent 0%)
936
0 0 2 / 0 0 2px;
937
}
938
&:disabled { color: $disabled_fg_color; }
940
}
941
/************
944
* Toolbars *
945
************/
946
toolbar {
947
-GtkWidget-window-dragging: true;
948
padding: $container_padding / 2;
949
background-color: $bg_color;
950
button { @extend %button_basic.flat; }
952
// on OSD
954
.osd & { background-color: transparent; }
955
// stand-alone OSD toolbars
957
&.osd {
958
transition: $shadow_transition;
959
padding: $container_padding;
960
border-radius: 2px;
961
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
962
background-color: $base_color;
963
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
965
&.left,
967
&.right,
968
&.top,
969
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
970
}
971
// toolbar separators
973
&.horizontal separator { margin: $container_padding / 2; }
974
&.vertical separator { margin: $container_padding / 2; }
975
&:not(.inline-toolbar):not(.osd) {
977
scale,
978
entry,
979
spinbutton,
980
button { margin: $container_padding / 2; }
981
.linked entry,
983
.linked spinbutton,
984
.linked button {
985
&:not(:first-child) { margin-left: 0; }
986
&:not(:last-child) { margin-right: 0; }
987
}
988
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
990
}
991
}
992
//searchbar, location-bar & inline-toolbar
994
.inline-toolbar {
995
padding: $container_padding;
996
border-style: solid;
997
border-width: 0 1px 1px;
998
border-color: $borders_color;
999
background-color: $alt_base_color;
1000
}
1001
searchbar,
1003
.location-bar {
1004
padding: $container_padding;
1005
border-style: solid;
1006
border-width: 0 0 1px;
1007
border-color: $borders_color;
1008
background-color: $bg_color;
1009
background-clip: border-box;
1010
}
1011
/***************
1014
* Header bars *
1015
***************/
1016
%titlebar,
1017
headerbar {
1018
transition: background-color $shorter_duration $deceleration_curve;
1019
min-height: $large_size;
1020
padding: 0 $container_padding;
1021
box-shadow: $z-depth-1, inset 0 1px $topbar_highlight_color;
1022
background-color: $headerbar_color;
1023
color: $topbar_fg_color;
1024
&:disabled :not(button) > label { color: $disabled_topbar_fg_color; }
1026
&:backdrop {
1028
color: $secondary_topbar_fg_color;
1029
&:disabled :not(button) > label { color: $disabled_secondary_topbar_fg_color; }
1031
}
1032
.title {
1034
transition: $longer_transition;
1035
padding: 0 12px;
1036
font-weight: bold;
1037
}
1038
.subtitle {
1040
transition: $longer_transition;
1041
padding: 0 12px;
1042
font-size: smaller;
1043
@extend .dim-label;
1045
}
1046
button:not(.suggested-action):not(.destructive-action) {
1048
@extend %button_basic.flat;
1049
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1051
$topbar_indicator_color 0%,
1052
transparent 0%)
1053
0 0 0 / 0 0 0px;
1054
&:checked {
1056
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1057
$topbar_indicator_color 100%,
1058
transparent 0%)
1059
0 0 2 / 0 0 2px;
1060
&, &:disabled { background-color: transparent; }
1062
}
1063
}
1064
button.suggested-action, button.destructive-action {
1066
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1067
}
1068
&.selection-mode {
1070
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1071
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1072
transition: background-color 0.00001s $longer_duration;
1073
animation: header_ripple_effect $longer_duration $deceleration_curve;
1074
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1075
background-color: $primary_color;
1076
color: $inversed_fg_color;
1077
&:backdrop {
1079
color: $secondary_inversed_fg_color;
1080
}
1081
.subtitle:link { @extend *:link:selected; }
1083
button:not(.suggested-action):not(.destructive-action) {
1085
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1086
currentColor 0%,
1087
transparent 0%)
1088
0 0 0 / 0 0 0px;
1089
color: currentColor;
1090
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1092
&:checked {
1094
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1095
currentColor 100%,
1096
transparent 0%)
1097
0 0 2 / 0 0 2px;
1098
color: currentColor;
1099
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1101
}
1102
}
1103
.selection-menu {
1105
padding-left: 16px;
1106
padding-right: 16px;
1107
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1109
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1111
}
1112
}
1113
.fullscreen &,
1115
.tiled &,
1116
.maximized & {
1117
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1118
box-shadow: $z-depth-1;
1119
}
1120
&.default-decoration {
1122
min-height: $small_size;
1123
padding: $container_padding;
1124
border-width: 0;
1125
button.titlebutton {
1127
min-height: $small_size;
1128
min-width: $small_size;
1129
margin: 0;
1130
padding: 0;
1131
}
1132
}
1133
.solid-csd & {
1135
&:dir(rtl), &:dir(ltr) { // specificity bump
1136
margin-left: -2px;
1137
margin-right: -2px;
1138
margin-top: -2px;
1139
// border-radius: 0;
1140
box-shadow: inset 0 1px $topbar_highlight_color;
1141
}
1142
}
1143
}
1144
headerbar {
1146
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1147
entry,
1148
spinbutton,
1149
// separator,
1150
button {
1151
margin-top: $container_padding;
1152
margin-bottom: $container_padding;
1153
}
1154
switch {
1156
margin-top: $container_padding * 2;
1157
margin-bottom: $container_padding * 2;
1158
}
1159
}
1160
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1162
border-top-left-radius: 2px;
1163
border-top-right-radius: 2px;
1164
}
1165
headerbar {
1167
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1168
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1169
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1171
}
1172
.titlebar:not(headerbar) {
1174
window.csd > & {
1175
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1176
padding: 0;
1177
background-color: transparent;
1178
background-image: none;
1179
border-style: none;
1180
box-shadow: none;
1181
}
1182
> separator {
1184
background-color: $headerbar_color;
1185
background-image: image($borders_color);
1186
}
1187
@extend %titlebar;
1189
}
1190
/************
1193
* Pathbars *
1194
************/
1195
%pathbar_button,
1196
.path-bar button {
1197
padding-left: ($medium_size - 24px) / 2;
1198
padding-right: ($medium_size - 24px) / 2;
1199
label:not(:only-child) {
1201
&:first-child { margin-left: 4px; }
1202
&:last-child { margin-right: 4px; }
1204
}
1205
&.slider-button {
1207
padding-left: (24px - 16px) / 2;
1208
padding-right: (24px - 16px) / 2;
1209
}
1210
:not(headerbar) & {
1212
@extend %flat_button;
1213
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1215
$primary_color 0%,
1216
transparent 0%)
1217
0 0 0 / 0 0 0px;
1218
border-radius: 2px;
1219
&:checked {
1221
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1222
$primary_color 100%,
1223
transparent 0%)
1224
0 0 2 / 0 0 2px;
1225
&, &:disabled { background-color: transparent; }
1227
}
1228
}
1229
}
1230
/**************
1233
* Tree Views *
1234
**************/
1235
treeview.view {
1236
@at-root * {
1237
-GtkTreeView-horizontal-separator: 4;
1238
-GtkTreeView-grid-line-width: 1;
1239
-GtkTreeView-grid-line-pattern: '';
1240
-GtkTreeView-tree-line-width: 1;
1241
-GtkTreeView-tree-line-pattern: '';
1242
-GtkTreeView-expander-size: 16;
1243
}
1244
border-left-color: $track_color; // this is actually the tree lines color,
1246
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1247
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1249
&:hover, &:active, &:selected { border-radius: 0; }
1251
&.separator {
1253
min-height: 1px + 2px * 2;
1254
color: $borders_color;
1255
}
1256
&:drop(active) {
1258
border-style: solid none;
1259
border-width: 1px;
1260
border-color: $accent_color;
1261
&.after { border-top-style: none; }
1263
&.before { border-bottom-style: none; }
1265
}
1266
&.expander {
1268
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1269
-gtk-icon-transform: rotate(-90deg);
1270
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1272
&:checked { -gtk-icon-transform: unset; }
1274
color: $secondary_fg_color;
1276
&:hover, &:active { color: $fg_color; }
1278
&:disabled { color: $disabled_secondary_fg_color; }
1280
&:selected {
1282
color: $secondary_inversed_fg_color;
1283
&:hover, &:active { color: $inversed_fg_color; }
1285
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1287
}
1288
}
1289
&.progressbar { // progress bar in treeviews
1291
border-style: none none solid;
1292
border-width: $bar_size;
1293
border-color: $primary_color;
1294
box-shadow: none;
1295
background-color: transparent;
1296
&:selected { border-color: currentColor; }
1298
}
1299
&.trough { // progress bar trough in treeviews
1301
border-style: none none solid;
1302
border-width: $bar_size;
1303
border-color: scale-alpha($primary_color, $lower_opacity);
1304
box-shadow: none;
1305
background-color: transparent;
1306
&:selected { border-color: $track_color; }
1308
}
1309
header {
1311
button {
1312
@extend row.activatable;
1313
padding: 2px 6px;
1315
border-style: none solid solid none;
1316
border-width: 1px;
1317
border-color: $borders_color;
1318
border-radius: 0;
1319
background-clip: border-box;
1320
&, &:hover, &:active { box-shadow: none; }
1322
&, &:disabled { background-color: $base_color; }
1324
&:last-child { border-right-style: none; }
1326
}
1327
}
1328
button.dnd,
1330
header.button.dnd { // for treeview-like derive widgets
1331
padding: 2px 6px;
1332
border-style: none solid solid;
1333
border-width: 1px;
1334
border-color: $borders_color;
1335
border-radius: 0;
1336
box-shadow: none;
1337
background-color: $base_color;
1338
background-clip: border-box;
1339
color: $primary_color;
1340
}
1341
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1343
}
1344
/*********
1347
* Menus *
1348
*********/
1349
menubar,
1350
.menubar {
1351
-GtkWidget-window-dragging: true;
1352
padding: 0;
1353
// box-shadow: inset 0 -1px $borders_color;
1354
background-color: $headerbar_color;
1355
> menuitem {
1357
transition: $shorter_transition;
1358
min-height: 20px;
1359
padding: 4px 8px;
1360
color: $secondary_topbar_fg_color;
1361
&:hover { //Seems like it :hover even with keyboard focus
1363
transition: none;
1364
background-color: $semi_track_color;
1365
color: $topbar_fg_color;
1366
}
1367
&:disabled { color: $disabled_secondary_topbar_fg_color; }
1369
}
1370
}
1371
.csd.popup { border-radius: 2px; }
1373
menu,
1375
.menu,
1376
.context-menu {
1377
margin: 4px 0;
1378
padding: 4px 0;
1379
box-shadow: inset 0 1px $highlight_color;
1380
background-color: $base_color;
1381
border: 1px solid $borders_color; // adds borders in a non composited env
1382
.csd & {
1384
border: none; // axes borders in a composited env
1385
border-radius: 2px;
1386
}
1387
menuitem {
1389
transition: $shorter_transition;
1390
min-height: 20px;
1391
min-width: 40px;
1392
padding: 4px 8px;
1393
font: initial;
1394
text-shadow: none;
1395
&:hover {
1397
transition: none;
1398
background-color: $semi_track_color;
1399
}
1400
&:disabled { color: $disabled_fg_color; }
1402
// submenu indicators
1404
arrow {
1405
min-height: 16px;
1406
min-width: 16px;
1407
&:dir(ltr) {
1409
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1410
margin-left: 8px;
1411
}
1412
&:dir(rtl) {
1414
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1415
margin-right: 8px;
1416
}
1417
}
1418
// avoids labels color being overridden, see
1420
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1421
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1422
}
1423
// overflow arrows
1425
> arrow {
1426
min-height: 16px;
1427
min-width: 16px;
1428
padding: 4px;
1429
border-radius: 0;
1430
background-color: $base_color;
1431
color: $secondary_fg_color;
1432
&.top {
1434
margin-top: -4px;
1435
border-bottom: 1px solid $borders_color;
1436
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1437
}
1438
&.bottom {
1440
margin-bottom: -4px;
1441
border-top: 1px solid $borders_color;
1442
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1443
}
1444
&:hover {
1446
background-image: image($semi_track_color);
1447
color: $fg_color;
1448
}
1449
&:disabled {
1451
border-color: transparent;
1452
background-color: transparent;
1453
color: transparent;
1454
// color: $disabled_secondary_fg_color;
1455
}
1456
}
1457
separator { margin: 4px 0; }
1459
}
1460
menuitem {
1462
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1463
check,
1465
radio {
1466
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1467
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1468
}
1469
}
1470
/***************
1473
* Popovers *
1474
***************/
1475
popover.background {
1476
transition: $shadow_transition;
1477
padding: 2px;
1478
box-shadow: $z-depth-2; // TODO: this should really have a highlight
1479
background-color: $lighter_bg_color;
1480
&:backdrop { box-shadow: $z-depth-1; }
1482
&, .csd & {
1484
border-style: solid;
1485
border-width: 1px;
1486
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1487
border-radius: 2px + 1px;
1488
}
1489
> stack { margin: -4px; } // remove extra padding from menu style popovers
1491
> toolbar { margin: -2px; }
1493
> list,
1495
> .view,
1496
> toolbar {
1497
border-style: none;
1498
box-shadow: none;
1499
background-color: transparent;
1500
}
1501
&.touch-selection,
1503
&.magnifier,
1504
&.osd { @extend %osd; }
1505
// entry { @extend %entry.flat; }
1507
// button.combo { @extend %combo_flat; }
1509
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1511
&.menu button,
1513
button.model {
1514
@extend %simple_flat_button;
1515
min-height: 32px;
1517
padding: 0 8px;
1518
border-radius: 2px;
1519
&:checked { @extend %selected_items; }
1521
}
1522
separator { margin: 4px 0; }
1524
list separator { margin: 0; }
1526
}
1527
/*************
1529
* Notebooks *
1530
*************/
1531
notebook {
1532
> header {
1533
border-width: 1px;
1534
border-color: $borders_color;
1535
background-color: $bg_color;
1536
background-clip: border-box;
1537
&.top {
1539
border-bottom-style: solid;
1540
> tabs {
1541
margin-bottom: -1px;
1542
> tab {
1543
&:hover { box-shadow: inset 0 -2px $track_color; }
1545
&:checked { box-shadow: inset 0 -2px $primary_color; }
1547
}
1548
}
1549
}
1550
&.bottom {
1552
border-top-style: solid;
1553
> tabs {
1554
margin-top: -1px;
1555
> tab {
1556
&:hover { box-shadow: inset 0 2px $track_color; }
1558
&:checked { box-shadow: inset 0 2px $primary_color; }
1560
}
1561
}
1562
}
1563
&.left {
1565
border-right-style: solid;
1566
> tabs {
1567
margin-right: -1px;
1568
> tab {
1569
&:hover { box-shadow: inset -2px 0 $track_color; }
1571
&:checked { box-shadow: inset -2px 0 $primary_color; }
1573
}
1574
}
1575
}
1576
&.right {
1578
border-left-style: solid;
1579
> tabs {
1580
margin-left: -1px;
1581
> tab {
1582
&:hover { box-shadow: inset 2px 0 $track_color; }
1584
&:checked { box-shadow: inset 2px 0 $primary_color; }
1586
}
1587
}
1588
}
1589
&.top > tabs > arrow {
1591
@extend %notebook_vert_arrows;
1592
border-top-style: none;
1594
}
1595
&.bottom > tabs > arrow {
1597
@extend %notebook_vert_arrows;
1598
border-bottom-style: none;
1600
}
1601
@at-root %notebook_vert_arrows {
1603
padding-left: 4px;
1604
padding-right: 4px;
1605
&.down {
1607
margin-left: -8px;
1608
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1609
}
1610
&.up {
1612
margin-right: -8px;
1613
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1614
}
1615
}
1616
&.left > tabs > arrow {
1618
@extend %notebook_horz_arrows;
1619
border-left-style: none;
1621
}
1622
&.right > tabs > arrow {
1624
@extend %notebook_horz_arrows;
1625
border-right-style: none;
1627
}
1628
@at-root %notebook_horz_arrows {
1630
padding-top: 4px;
1631
padding-bottom: 4px;
1632
&.down {
1634
margin-top: -8px;
1635
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1636
}
1637
&.up {
1639
margin-bottom: -8px;
1640
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1641
}
1642
}
1643
> tabs > arrow {
1645
@extend %simple_flat_button;
1646
min-height: 16px;
1648
min-width: 16px;
1649
border-radius: 0;
1650
}
1651
tab {
1653
transition: $longer_transition,
1654
background-size 0,
1655
background-image 0;
1656
min-height: $small_size;
1657
min-width: $small_size;
1658
padding: $container_padding 12px;
1659
outline-offset: -6px;
1661
border-width: 1px; // for reorderable tabs
1663
border-color: transparent; //
1664
background-image: radial-gradient(circle farthest-corner at center,
1666
$primary_color 10%,
1667
transparent 0%);
1668
background-repeat: no-repeat;
1669
background-position: center;
1670
background-size: 0% 0%;
1671
color: $secondary_fg_color;
1673
font-weight: 500;
1674
&:hover {
1676
color: $fg_color;
1677
&.reorderable-page {
1679
border-color: $borders_color;
1680
background-color: $alt_base_color;
1681
}
1682
}
1683
&:disabled { color: $disabled_secondary_fg_color; }
1685
&:checked {
1687
transition: $longer_transition,
1688
background-size $longer_duration $deceleration_curve,
1689
background-image $longer_duration + $ripple_duration $deceleration_curve;
1690
background-image: radial-gradient(circle farthest-corner at center,
1691
transparent 10%,
1692
transparent 0%);
1693
background-size: 1000% 1000%;
1694
color: $fg_color;
1695
&:disabled { color: $disabled_fg_color; }
1697
&.reorderable-page {
1699
border-color: $borders_color;
1700
background-color: $base_color;
1701
}
1702
}
1703
// colors the button like the label, overridden otherwise
1705
button.flat {
1706
@extend %small_button;
1707
&:last-child {
1709
margin-left: $container_padding;
1710
margin-right: $container_padding - 12px;
1711
}
1712
&:first-child {
1714
margin-left: $container_padding - 12px;
1715
margin-right: $container_padding;
1716
}
1717
}
1718
}
1719
&.top,
1721
&.bottom {
1722
tabs {
1723
padding-left: 8px;
1724
padding-right: 8px;
1725
&:not(:only-child) {
1727
&:first-child { margin-left: 0; }
1728
&:last-child { margin-right: 0; }
1729
}
1730
tab {
1732
&.reorderable-page {
1733
margin: 0 -1px;
1734
border-style: none solid;
1735
}
1736
}
1737
}
1738
}
1739
&.left,
1741
&.right {
1742
tabs {
1743
padding-top: 8px;
1744
padding-bottom: 8px;
1745
&:not(:only-child) {
1747
&:first-child { margin-top: 0; }
1748
&:last-child { margin-bottom: 0; }
1749
}
1750
tab {
1752
&.reorderable-page {
1753
margin: -1px 0;
1754
border-style: solid none;
1755
}
1756
}
1757
}
1758
}
1759
}
1760
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1762
background-color: $base_color;
1763
entry:not(.search),
1765
spinbutton:not(.vertical) { @extend %entry.flat; }
1766
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1768
button.combo { @extend %combo_flat; }
1770
}
1771
}
1772
/**************
1775
* Scrollbars *
1776
**************/
1777
scrollbar {
1778
$_slider_min_length: 24px;
1779
// disable steppers
1781
@at-root * {
1782
-GtkScrollbar-has-backward-stepper: false;
1783
-GtkScrollbar-has-forward-stepper: false;
1784
}
1785
transition: $longer_transition;
1787
background-color: $base_color;
1788
background-clip: $extra_background_clip;
1789
// scrollbar border
1791
&.top { border-bottom: 1px solid $borders_color; }
1792
&.bottom { border-top: 1px solid $borders_color; }
1793
&.left { border-right: 1px solid $borders_color; }
1794
&.right { border-left: 1px solid $borders_color; }
1795
// slider
1797
slider {
1798
transition: $shorter_transition, margin 0, border-width 0;
1799
min-width: 8px;
1800
min-height: 8px;
1801
border: 4px solid transparent;
1802
border-radius: $circular_radius;
1803
background-clip: padding-box;
1804
background-color: $tertiary_fg_color;
1805
&:hover { background-color: $secondary_fg_color; }
1807
&:active { background-color: $fg_color; }
1809
&:disabled { background-color: $disabled_tertiary_fg_color; }
1811
}
1812
&.fine-tune {
1814
slider {
1815
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1816
min-width: 4px;
1817
min-height: 4px;
1818
}
1819
&.horizontal slider { margin: 2px 0; }
1821
&.vertical slider { margin: 0 2px; }
1823
}
1824
&.overlay-indicator {
1826
&:not(.dragging):not(.hovering) {
1827
border-color: transparent;
1828
background-color: transparent;
1829
slider {
1831
min-width: 4px;
1832
min-height: 4px;
1833
margin: 4px - 1px;
1834
border: 1px solid scale-alpha($base_color, $lower_opacity);
1835
}
1836
button {
1838
min-width: 4px;
1839
min-height: 4px;
1840
margin: 4px - 1px;
1841
border: 1px solid scale-alpha($base_color, $lower_opacity);
1842
border-radius: $circular_radius;
1843
background-color: $tertiary_fg_color;
1844
background-clip: padding-box;
1845
-gtk-icon-source: none;
1846
&:disabled { background-color: $disabled_tertiary_fg_color; }
1848
}
1849
&.horizontal {
1851
slider { min-width: $_slider_min_length; }
1852
button { min-width: 8px; }
1854
}
1855
&.vertical {
1857
slider { min-height: $_slider_min_length; }
1858
button { min-height: 8px; }
1860
}
1861
}
1862
&.dragging,
1864
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1865
}
1866
&.horizontal slider { min-width: $_slider_min_length; }
1868
&.vertical slider { min-height: $_slider_min_length; }
1870
// button styling
1872
button {
1873
@extend %simple_flat_button;
1874
min-width: 16px;
1876
min-height: 16px;
1877
padding: 0;
1878
border-radius: 0;
1879
}
1880
// button icons
1882
&.vertical {
1883
button {
1884
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1885
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1887
}
1888
}
1889
&.horizontal {
1891
button {
1892
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1893
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1895
}
1896
}
1897
}
1898
/**********
1901
* Switch *
1902
**********/
1903
switch {
1904
transition: $longer_transition;
1905
margin: $container_padding 0;
1906
border: 4px solid transparent;
1907
border-radius: $circular_radius;
1908
background-color: $track_color;
1909
background-clip: padding-box;
1910
font-size: 0;
1911
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1913
&:checked {
1915
background-color: scale-alpha($accent_color, 0.5);
1916
&:disabled {
1918
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1919
color: $disabled_fg_color;
1920
}
1921
}
1922
slider {
1924
@include entry(normal);
1925
transition: $longer_transition, $shadow_transition, margin 0;
1927
min-width: $small_size;
1928
min-height: $small_size;
1929
margin: -4px 0 -4px -4px;
1930
border-radius: $circular_radius;
1931
-gtk-outline-radius: $circular_radius;
1932
}
1933
&:hover slider { @include entry(focus); }
1935
&:checked slider {
1937
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1938
animation: needs_attention $longer_duration $deceleration_curve;
1939
margin: -4px -4px -4px 0;
1940
background-color: $accent_color;
1941
color: $inversed_fg_color;
1942
}
1943
&:disabled slider { @include entry(disabled); }
1945
&:checked:disabled slider { animation: none; }
1947
row:selected & {
1949
}
1950
}
1951
/*************************
1954
* Check and Radio items *
1955
*************************/
1956
// draw regular check and radio items using our PNG assets
1957
// all assets are rendered from assets.svg. never add pngs directly
1958
//selection-mode
1960
@each $s, $as in ('', '-selectionmode'),
1961
(':hover', '-hover-selectionmode'),
1962
(':checked', '-checked-selectionmode'),
1963
(':checked:hover', '-checked-hover-selectionmode') {
1964
.view.content-view.check#{$s}:not(list) {
1965
-gtk-icon-shadow: $z-depth-1;
1966
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1967
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1968
margin: 8px;
1969
background-color: transparent;
1970
}
1971
}
1972
checkbutton.text-button,
1974
radiobutton.text-button {
1975
// this is for a nice focus on check and radios text
1976
padding: 2px;
1977
outline-offset: 0;
1978
label:not(:only-child) { margin: 0 4px; }
1980
}
1981
check,
1983
radio {
1984
min-height: 24px;
1985
min-width: 24px;
1986
margin: -($large_size - 24px) / 2;
1987
padding: ($large_size - 24px) / 2;
1988
@extend %simple_flat_button;
1990
@extend %circular_button;
1992
&:checked, &:indeterminate { color: $accent_color; }
1994
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1996
// &:only-child { margin: -12px; }
1998
row &:not(:checked):not(:indeterminate) {
2000
color: gtkalpha(currentColor, $enabled_opacity);
2001
&:hover, &:active { color: currentColor; }
2003
&:disabled { color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity); }
2005
}
2006
menu menuitem & {
2008
transition: none;
2009
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2010
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
2012
&, &:hover, &:disabled {
2014
box-shadow: none;
2015
// color: inherit;
2016
// animation: none;
2017
}
2018
}
2019
}
2020
%check,
2022
check {
2023
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
2024
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
2025
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
2027
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
2028
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
2030
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
2031
}
2032
$radio_indicator: 10 / ($large_size / 1px) / 2;
2034
$radio_radius_slice: #{$large_size / 2 / 1px};
2035
$radio_radius_width: #{$large_size / 2};
2036
%radio,
2038
radio {
2039
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
2040
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
2041
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2043
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
2044
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2046
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2047
border-image: -gtk-gradient(radial,
2049
center center, 0,
2050
center center, 0.001,
2051
to($accent_color),
2052
to(transparent))
2053
$radio_radius_slice / $radio_radius_width;
2054
&:checked {
2056
border-image: -gtk-gradient(radial,
2057
center center, 0,
2058
center center, $radio_indicator,
2059
to($accent_color),
2060
to(transparent))
2061
$radio_radius_slice / $radio_radius_width;
2062
}
2063
&:checked:disabled {
2065
border-image: -gtk-gradient(radial,
2066
center center, 0,
2067
center center, $radio_indicator,
2068
to(scale-alpha($accent_color, $disabled_opacity)),
2069
to(transparent))
2070
$radio_radius_slice / $radio_radius_width;
2071
}
2072
&:indeterminate:checked {
2074
border-image: -gtk-gradient(radial,
2075
center center, 0,
2076
center center, 0.001,
2077
to($accent_color),
2078
to(transparent))
2079
$radio_radius_slice / $radio_radius_width;
2080
}
2081
}
2082
// let's animate things
2084
@keyframes check_check {
2085
from { -gtk-icon-transform: rotate(90deg); }
2086
to { -gtk-icon-transform: unset; }
2087
}
2088
@keyframes check_radio { // FIXME: cannot animate border-image
2090
from {
2091
border-image: -gtk-gradient(radial,
2092
center center, 0,
2093
center center, 0.001,
2094
to($accent_color),
2095
to(transparent))
2096
$radio_radius_slice / $radio_radius_width;
2097
}
2098
to {
2100
border-image: -gtk-gradient(radial,
2101
center center, 0,
2102
center center, $radio_indicator,
2103
to($accent_color),
2104
to(transparent))
2105
$radio_radius_slice / $radio_radius_width;
2106
}
2107
}
2108
@keyframes check_indeterminate {
2110
from { -gtk-icon-transform: unset; }
2111
50% { -gtk-icon-transform: scale(0, 1); }
2112
to { -gtk-icon-transform: unset; }
2113
}
2114
%check_checked,
2116
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2117
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2119
// %radio_checked,
2121
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2122
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2124
%indeterminate_checked,
2126
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2127
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2129
// no animations in menus
2131
menu menuitem {
2132
check:not(:indeterminate):checked,
2133
radio:not(:indeterminate):checked,
2134
check:indeterminate:checked,
2135
radio:indeterminate:checked { animation: none; }
2136
}
2137
treeview.view check,
2139
treeview.view radio {
2140
padding: 0;
2141
&:hover {
2143
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2144
&:disabled { box-shadow: none; }
2146
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inversed_fg_color, 0.05); }
2148
}
2149
& {
2151
color: $secondary_fg_color;
2152
&:hover, &:active { color: $fg_color; }
2154
&:disabled { color: $disabled_secondary_fg_color; }
2156
&:checked, &:indeterminate { color: $accent_color; }
2158
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2160
}
2161
&:selected {
2163
color: $secondary_inversed_fg_color;
2164
&:hover, &:active { color: $inversed_fg_color; }
2166
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2168
&:checked, &:indeterminate { color: $accent_color; }
2170
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2172
}
2173
}
2174
treeview.view radio:checked {
2176
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2177
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2178
border-image: none;
2179
}
2180
/************
2183
* GtkScale *
2184
************/
2185
scale {
2186
// sizing
2187
$_marks_lenght: 8px;
2188
$_marks_distance: 8px;
2189
$slider_size: 24px;
2191
$marks_slider_size: 30px;
2192
$slider_margin: -($slider_size - $bar_size) / 2;
2194
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2195
$color_slider_margin: -($slider_size) / 2;
2197
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2198
min-height: $medium_size - $slider_size;
2200
min-width: $medium_size - $slider_size;
2201
padding: ($slider_size / 2);
2202
* { transition: $longer_transition; }
2204
// the slider is inside the trough, so to have make it bigger there's a negative margin
2206
slider {
2207
min-height: $slider_size;
2208
min-width: $slider_size;
2209
margin: $slider_margin;
2210
}
2211
// the backing bit
2213
trough {
2214
outline-offset: 2px;
2215
background-color: $track_color;
2216
&:disabled { color: $disabled_fg_color; }
2218
}
2219
// the colored part of the backing bit
2221
highlight {
2222
background-color: $accent_color;
2223
&:disabled { background-color: transparent; }
2225
}
2226
// this is another differently styled part of the backing bit, the most relevant use case is for example
2228
// in media player to indicate how much video stream as been cached
2229
fill {
2230
background-color: $track_color;
2231
&:disabled { background-color: transparent; }
2233
}
2234
slider {
2236
transition: all $shorter_duration $standard_curve;
2237
// border-radius: 100%;
2238
// background-color: $accent_color;
2239
background-repeat: no-repeat;
2240
background-position: center;
2241
@each $s, $as in ('', ''),
2243
(':disabled', '-insensitive') {
2244
&#{$s} {
2245
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2246
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2248
}
2249
}
2250
background-size: calc(100% - 8px);
2252
&:hover { background-size: calc(100% - 4px); }
2254
&:active { background-size: calc(100% - 0px); }
2256
}
2257
// click-and-hold the slider to activate
2259
&.fine-tune {
2260
// to make the slider shrink in fine-tune mode
2261
slider { background-size: calc(100% - 12px); }
2262
}
2263
value { color: gtkalpha(currentColor, $hint_opacity); }
2265
marks {
2267
color: $track_color;
2268
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2270
(bottom, bottom, top),
2271
(top, left, right),
2272
(bottom, right, left) {
2273
&.#{$marks_class} {
2274
margin-#{$marks_margin}: $_marks_distance;
2275
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2276
}
2277
}
2278
}
2279
&.horizontal {
2281
indicator {
2282
min-height: $_marks_lenght;
2283
min-width: 1px;
2284
}
2285
}
2286
&.vertical {
2288
indicator {
2289
min-height: 1px;
2290
min-width: $_marks_lenght;
2291
}
2292
}
2293
// *WARNING* scale with marks madness following
2295
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2297
('vertical', 'vert') {
2298
@each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
2299
('scale-has-marks-below', 'marks-after:not(.marks-before)') {
2300
&.#{$dir_class}.#{$marks_class} {
2301
slider {
2302
@each $state, $state_infix in ('', ''),
2303
(':disabled', '-insensitive') {
2304
&#{$state} {
2305
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$asset_suffix}';
2306
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2308
}
2309
}
2310
@if $dir_class == 'horizontal' {
2312
min-height: $marks_slider_size;
2313
min-width: $slider_size;
2314
@if $marks_infix == 'scale-has-marks-above' {
2316
margin-top: $marks_slider_margin;
2317
background-position: center calc(100% - 4px);
2319
&:hover { background-position: center calc(100% - 2px); }
2321
&:active { background-position: center calc(100% - 0px); }
2323
}
2324
@if $marks_infix == 'scale-has-marks-below' {
2326
margin-bottom: $marks_slider_margin;
2327
background-position: center calc(4px);
2329
&:hover { background-position: center calc(2px); }
2331
&:active { background-position: center calc(0px); }
2333
}
2334
}
2335
@if $dir_class == 'vertical' {
2337
min-height: $slider_size;
2338
min-width: $marks_slider_size;
2339
@if $marks_infix == 'scale-has-marks-above' {
2341
margin-left: $marks_slider_margin;
2342
background-position: calc(4px) center;
2344
&:hover { background-position: calc(2px) center; }
2346
&:active { background-position: calc(0px) center; }
2348
}
2349
@if $marks_infix == 'scale-has-marks-below' {
2351
margin-right: $marks_slider_margin;
2352
background-position: calc(100% - 4px) center;
2354
&:hover { background-position: calc(100% - 2px) center; }
2356
&:active { background-position: calc(100% - 0px) center; }
2358
}
2359
}
2360
}
2361
&.fine-tune slider {
2363
@if $dir_class == 'horizontal' {
2364
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2365
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2367
}
2368
@if $dir_class == 'vertical' {
2370
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2371
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2373
}
2374
}
2375
}
2376
}
2377
}
2378
&.color {
2380
min-height: 0;
2381
min-width: 0;
2382
&.horizontal {
2384
padding: 0 0 12px 0;
2385
slider {
2387
&:dir(ltr), &:dir(rtl) { // specificity bump
2388
margin-bottom: $color_slider_margin;
2389
margin-top: $color_marks_slider_margin;
2390
}
2391
}
2392
}
2393
&.vertical {
2395
&:dir(ltr) {
2396
padding: 0 0 0 12px;
2397
slider {
2399
margin-left: $color_slider_margin;
2400
margin-right: $color_marks_slider_margin;
2401
}
2402
}
2403
&:dir(rtl) {
2405
padding: 0 12px 0 0;
2406
slider {
2408
margin-right: $color_slider_margin;
2409
margin-left: $color_marks_slider_margin;
2410
}
2411
}
2412
}
2413
}
2414
}
2415
/*****************
2418
* Progress bars *
2419
*****************/
2420
progressbar {
2421
// sizing
2422
&.horizontal {
2423
trough,
2424
progress { min-height: $bar_size; }
2425
}
2426
&.vertical {
2428
trough,
2429
progress { min-width: $bar_size; }
2430
}
2431
// FIXME: insensitive state missing and some other state should be set probably
2433
color: $tertiary_fg_color;
2434
font-size: smaller;
2435
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2437
progress { background-color: $primary_color; }
2439
&.osd { // progressbar.osd used for epiphany page loading progress
2441
// min-width: $bar_size;
2442
// min-height: $bar_size;
2443
// background-color: transparent;
2444
// trough { background-color: transparent; }
2446
progress {
2448
}
2449
}
2450
}
2451
/*************
2454
* Level Bar *
2455
*************/
2456
levelbar {
2457
block {
2458
min-width: $medium_size;
2459
min-height: $bar_size;
2460
}
2461
&.vertical block {
2463
min-width: $bar_size;
2464
min-height: $medium_size;
2465
}
2466
trough {
2468
padding: 2px;
2469
border-radius: 2px;
2470
@include entry(normal);
2472
&:disabled { @include entry(disabled); }
2474
}
2475
&.horizontal.discrete block { margin: 0 1px; }
2477
&.vertical.discrete block { margin: 1px 0; }
2479
&.horizontal.discrete trough { padding: 2px 1px; }
2481
&.vertical.discrete trough { padding: 1px 2px; }
2483
block {
2485
&.low {
2486
background-color: $warning_color;
2487
}
2488
&.high,
2490
&:not(.empty) {
2491
background-color: $primary_color;
2492
}
2493
&.full {
2495
background-color: $success_color;
2496
}
2497
&.empty {
2499
background-color: $track_color;
2500
color: $disabled_fg_color;
2501
}
2502
}
2503
}
2504
/****************
2507
* Print dialog *
2508
*****************/
2509
printdialog {
2510
paper {
2511
padding: 0;
2512
border: 1px solid $borders_color;
2513
background: $base_color;
2514
color: $fg_color;
2515
}
2516
.dialog-action-box { margin: 12px; }
2518
}
2519
/**********
2522
* Frames *
2523
**********/
2524
frame > border,
2525
.frame {
2526
margin: 0;
2527
padding: 0;
2528
border: 1px solid $borders_color;
2529
border-radius: 0;
2530
box-shadow: none;
2531
&.flat { border-style: none; }
2533
}
2534
actionbar > revealer > box {
2536
padding: $container_padding;
2537
border-top: 1px solid $borders_color;
2538
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2540
}
2541
scrolledwindow {
2543
viewport.frame { // avoid double borders when viewport inside scrolled window
2544
border-style: none;
2545
}
2546
// This is used when content is touch-dragged past boundaries.
2548
// draws a box on top of the content, the size changes programmatically.
2549
@at-root overshoot {
2550
&.top { @include overshoot(top); }
2551
&.bottom { @include overshoot(bottom); }
2553
&.left { @include overshoot(left); }
2555
&.right { @include overshoot(right); }
2557
}
2558
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2560
@at-root undershoot {
2561
&.top { @include undershoot(top); }
2562
&.bottom { @include undershoot(bottom); }
2564
&.left { @include undershoot(left); }
2566
&.right { @include undershoot(right); }
2568
}
2569
@at-root junction { // the small square between two scrollbars
2571
border-style: solid none none solid;
2572
border-width: 1px;
2573
border-color: $borders_color;
2574
background-color: $base_color;
2575
&:dir(rtl) { border-style: solid solid none none; }
2577
}
2578
}
2579
//vbox and hbox separators
2581
separator {
2582
min-width: 1px;
2583
min-height: 1px;
2584
background: $borders_color;
2585
}
2586
/*********
2589
* Lists *
2590
*********/
2591
list {
2592
border-color: $borders_color;
2593
background-color: $base_color;
2594
row { padding: 2px; }
2596
}
2597
// FIXME
2599
$row_transition: $longer_transition, background-color 0, color 0;
2600
row {
2602
&.activatable {
2603
transition: $row_transition,
2604
background-size $ripple_duration $deceleration_curve,
2605
background-image $ripple_duration * 2 $deceleration_curve;
2606
box-shadow: inset 0 0 0 9999px transparent;
2607
background-image: radial-gradient(circle farthest-corner at center,
2608
transparent 10%,
2609
transparent 0%);
2610
background-repeat: no-repeat;
2611
background-position: center;
2612
background-size: 1000% 1000%;
2613
&:hover {
2615
transition: $row_transition,
2616
box-shadow 0,
2617
background-size $ripple_duration $deceleration_curve,
2618
background-image $ripple_duration * 2 $deceleration_curve;
2619
box-shadow: inset 0 0 0 9999px $row_track_color;
2620
}
2621
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2623
&:active {
2624
transition: $row_transition,
2625
background-size 0,
2626
background-image 0;
2627
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2628
box-shadow: inset 0 0 0 9999px $semi_track_color;
2629
background-image: radial-gradient(circle farthest-corner at center,
2630
$semi_track_color 10%,
2631
transparent 0%);
2632
background-size: 0% 0%;
2633
}
2634
}
2635
&:selected { @extend %selected_items; }
2637
}
2638
/*********************
2641
* App Notifications *
2642
*********************/
2643
.app-notification {
2644
@extend %osd;
2645
@extend toolbar.osd;
2647
margin: 8px;
2649
button { @extend %button_basic.flat; }
2651
&.frame,
2653
border { border-style: none; }
2654
}
2655
/*************
2658
* Expanders *
2659
*************/
2660
expander {
2661
arrow {
2662
transition: all $shorter_duration $standard_curve;
2663
min-width: 16px;
2664
min-height: 16px;
2665
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2666
-gtk-icon-transform: rotate(-90deg);
2667
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2669
&:checked { -gtk-icon-transform: unset; }
2671
color: $secondary_fg_color;
2673
&:hover, &:active { color: $fg_color; }
2675
&:disabled { color: $disabled_secondary_fg_color; }
2677
&:selected {
2679
color: $secondary_inversed_fg_color;
2680
&:hover, &:active { color: $inversed_fg_color; }
2682
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2684
}
2685
}
2686
}
2687
/************
2690
* Calendar *
2691
***********/
2692
calendar {
2693
padding: 1px;
2694
border: 1px solid $borders_color;
2695
color: $fg_color;
2696
&:disabled { color: $disabled_fg_color; }
2698
&:selected {
2700
@extend %selected_items;
2701
border-radius: 2px + 1px;
2703
}
2704
&.header {
2706
border-style: none none solid;
2707
border-radius: 0;
2708
}
2709
&.button { @extend %simple_flat_button; }
2711
&.highlight {
2713
color: gtkalpha(currentColor, $hint_opacity);
2714
font-weight: 500;
2715
}
2716
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2718
}
2719
/***********
2722
* Dialogs *
2723
***********/
2724
messagedialog { // Message Dialog styling
2725
&.background { background-color: $lighter_bg_color; }
2726
.titlebar {
2728
min-height: $small_size;
2729
border-style: none;
2730
box-shadow: inset 0 1px $highlight_color;
2731
background-color: $lighter_bg_color;
2732
color: $fg_color;
2733
&:backdrop { color: $secondary_fg_color; }
2735
}
2736
&.csd { // rounded bottom border styling for csd version
2738
&.background {
2739
// bigger radius for better antialiasing
2740
border-bottom-left-radius: 2px;
2741
border-bottom-right-radius: 2px;
2742
}
2743
.dialog-action-area button {
2745
padding: 8px 16px;
2746
border-top: 1px solid $borders_color;
2747
border-radius: 0;
2748
@extend %simple_flat_button;
2750
&:first-child { border-bottom-left-radius: 2px; }
2752
&:last-child { border-bottom-right-radius: 2px; }
2754
}
2755
}
2756
}
2757
filechooser {
2759
.dialog-action-box { border-top: 1px solid $borders_color; }
2760
#pathbarbox {
2762
border-bottom: 1px solid $borders_color;
2763
background-color: $bg_color;
2764
}
2765
}
2766
filechooserbutton:drop(active) {
2768
box-shadow: none;
2769
}
2770
/***********
2773
* Sidebar *
2774
***********/
2775
.sidebar {
2776
border-style: none;
2777
background-color: $lighter_bg_color;
2778
@at-root %sidebar_left,
2780
&:dir(ltr),
2781
&.left,
2782
&.left:dir(rtl) {
2783
border-right: 1px solid $borders_color;
2784
border-left-style: none;
2785
}
2786
@at-root %sidebar_right
2788
&:dir(rtl),
2789
&.right {
2790
border-left: 1px solid $borders_color;
2791
border-right-style: none;
2792
}
2793
list { background-color: transparent; }
2795
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2797
}
2798
stacksidebar {
2800
&.sidebar {
2801
&:dir(ltr),
2802
&.left,
2803
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2804
&:dir(rtl),
2806
&.right { list { @extend %sidebar_right; }}
2807
}
2808
row {
2810
padding: 10px 4px;
2811
> label {
2813
padding-left: 6px;
2814
padding-right: 6px;
2815
}
2816
&.needs-attention > label { @extend %needs_attention; }
2818
}
2819
}
2820
/****************
2823
* File chooser *
2824
****************/
2825
placessidebar {
2826
> viewport.frame { border-style: none; }
2827
list { padding: (4px - 3px) 0 4px; }
2829
row {
2831
// Needs overriding of the GtkListBoxRow padding
2832
min-height: 32px;
2833
margin: -1px 0; // Remove unknown margins
2834
padding: 0;
2835
// Using margins/padding directly in the SidebarRow
2837
// will make the animation of the new bookmark row jump
2838
> revealer { padding: 0 12px; }
2839
&:selected { color: $inversed_fg_color; }
2841
&:disabled { color: $disabled_fg_color; }
2843
image.sidebar-icon {
2845
opacity: $hint_opacity; // dim the device icons
2846
&:dir(ltr) { padding-right: 8px; }
2848
&:dir(rtl) { padding-left: 8px; }
2849
}
2850
label.sidebar-label {
2852
&:dir(ltr) { padding-right: 2px; }
2853
&:dir(rtl) { padding-left: 2px; }
2854
}
2855
@at-root button.sidebar-button {
2857
@extend %simple_flat_button;
2858
@extend %small_button;
2860
row:selected & {
2862
}
2863
}
2864
&.sidebar-placeholder-row {
2866
min-height: 2px;
2867
padding: 0 8px;
2868
background-image: image($accent_color);
2869
background-clip: content-box;
2870
}
2871
&.sidebar-new-bookmark-row { color: $accent_color; }
2873
&:drop(active):not(:disabled) {
2875
box-shadow: inset 0 0 0 2px $accent_color;
2876
&:selected {
2878
// background-color: $accent_color;
2879
// color: $inversed_fg_color;
2880
}
2881
}
2882
}
2883
}
2884
placesview {
2886
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2887
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2889
// this selects the "connect to server" label
2891
> actionbar > revealer > box > label {
2892
padding-left: 8px;
2893
padding-right: 8px;
2894
}
2895
}
2896
/*********
2899
* Paned *
2900
*********/
2901
paned {
2902
> separator {
2903
min-width: 1px;
2904
min-height: 1px;
2905
-gtk-icon-source: none; // defeats the ugly default handle decoration
2906
border-style: none; // just to be sure
2907
background-color: transparent;
2908
// workaround, using background istead of a border since the border will get rendered twice (?)
2909
background-image: image($borders_color);
2910
background-size: 1px 1px;
2911
&.wide {
2913
min-width: 6px;
2914
min-height: 6px;
2915
background-color: $bg_color;
2916
background-image: image($borders_color), image($borders_color);
2917
background-size: 1px 1px, 1px 1px;
2918
}
2919
}
2920
&.horizontal > separator {
2922
background-repeat: repeat-y;
2923
&:dir(ltr) {
2925
margin: 0 -8px 0 0;
2926
padding: 0 8px 0 0;
2927
background-position: left;
2928
}
2929
&:dir(rtl) {
2931
margin: 0 0 0 -8px;
2932
padding: 0 0 0 8px;
2933
background-position: right;
2934
}
2935
&.wide {
2937
margin: 0;
2938
padding: 0;
2939
background-repeat: repeat-y, repeat-y;
2940
background-position: left, right;
2941
}
2942
}
2943
&.vertical > separator {
2945
margin: 0 0 -8px 0;
2946
padding: 0 0 8px 0;
2947
background-repeat: repeat-x;
2948
background-position: top;
2949
&.wide {
2951
margin: 0;
2952
padding: 0;
2953
background-repeat: repeat-x, repeat-x;
2954
background-position: bottom, top;
2955
}
2956
}
2957
}
2958
/**************
2961
* GtkInfoBar *
2962
**************/
2963
infobar {
2964
border-style: none;
2965
&.info { background-color: $info_bg_color; }
2967
&.question { background-color: $question_bg_color; }
2969
&.warning { background-color: $warning_bg_color; }
2971
&.error { background-color: $error_bg_color; }
2973
&.info,
2975
&.question,
2976
&.warning,
2977
&.error {
2978
> label, & { color: $inversed_fg_color; }
2979
button { @extend %button_selected; }
2981
selection {}
2983
*:link { @extend %link_selected; }
2985
}
2986
}
2987
/************
2990
* Tooltips *
2991
************/
2992
tooltip {
2993
&.background {
2994
// background-color needs to be set this way otherwise it gets drawn twice
2995
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2996
box-shadow: inset 0 1px $highlight_color;
2997
background-color: scale-alpha($base_color, $higher_opacity);
2998
}
2999
// @extend %osd;
3001
// padding: 4px; /* not working */
3003
border-radius: 2px;
3004
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3005
&:not(.csd) {
3007
border: 1px solid $borders_color;
3008
border-radius: 2px + 1px;
3009
background-clip: $extra_background_clip;
3010
}
3011
// FIXME: we need a border or tooltips vanish on black background.
3013
decoration { background-color: transparent; }
3014
label {
3016
// tooltip label has already 6px margins
3017
min-height: 32px - 6px * 2;
3018
padding: 0 8px - 6px;
3019
}
3020
* {
3022
// workaround for Eclipse.
3023
// do not include any declaration here.
3024
// padding: 0;
3025
// background-color: transparent;
3026
// color: inherit;
3027
}
3028
}
3029
/*****************
3032
* Color Chooser *
3033
*****************/
3034
colorswatch {
3035
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3036
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3037
// applied to the overlay box.
3038
// base color corners rounding
3040
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3041
// sports a bigger radius.
3042
// nth-child is needed by the custom color strip.
3043
&.top {
3045
border-top-left-radius: $md_radius + 0.5px;
3046
border-top-right-radius: $md_radius + 0.5px;
3047
overlay {
3049
border-top-left-radius: $md_radius;
3050
border-top-right-radius: $md_radius;
3051
}
3052
}
3053
&.bottom {
3055
border-bottom-left-radius: $md_radius + 0.5px;
3056
border-bottom-right-radius: $md_radius + 0.5px;
3057
overlay {
3059
border-bottom-left-radius: $md_radius;
3060
border-bottom-right-radius: $md_radius;
3061
}
3062
}
3063
&.left,
3065
&:first-child:not(.top) {
3066
border-top-left-radius: $md_radius + 0.5px;
3067
border-bottom-left-radius: $md_radius + 0.5px;
3068
overlay {
3070
border-top-left-radius: $md_radius;
3071
border-bottom-left-radius: $md_radius;
3072
}
3073
}
3074
&.right,
3076
&:last-child:not(.bottom) {
3077
border-top-right-radius: $md_radius + 0.5px;
3078
border-bottom-right-radius: $md_radius + 0.5px;
3079
overlay {
3081
border-top-right-radius: $md_radius;
3082
border-bottom-right-radius: $md_radius;
3083
}
3084
}
3085
&.dark overlay { color: $dark_contrast_color; }
3087
&.light overlay { color: $light_contrast_color; }
3089
&.dark { color: $dark_contrast_color; } // for focus ring
3091
&.light { color: $light_contrast_color; } // for focus ring
3093
&:drop(active) {
3095
box-shadow: none;
3096
&.light overlay {
3098
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3099
}
3100
&.dark overlay {
3102
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3103
}
3104
}
3105
overlay {
3107
transition: $shadow_transition;
3108
box-shadow: $z-depth-1;
3109
&:hover { box-shadow: $z-depth-2; }
3111
}
3112
&#add-color-button {
3114
border-radius: $md_radius $md_radius 0 0;
3115
color: $dark_contrast_color; // for focus ring
3116
&:only-child { border-radius: $md_radius; }
3118
overlay {
3120
background-image: linear-gradient(to right,
3121
$error_bg_color 25%,
3122
$warning_bg_color 25%, $warning_bg_color 50%,
3123
$info_bg_color 50%, $info_bg_color 75%,
3124
$question_bg_color 75%);
3125
color: $dark_contrast_color;
3126
}
3127
}
3128
&:disabled {
3130
opacity: $disabled_opacity;
3131
overlay { box-shadow: none; }
3133
}
3134
row:selected & {
3136
}
3137
&#editor-color-sample {
3139
border-radius: $md_radius + 0.5px;
3140
overlay { border-radius: $md_radius; }
3142
// overlay:hover { box-shadow: $z-depth-1; }
3144
}
3145
}
3146
// colorscale popup
3148
colorchooser .popover.osd {
3149
transition: $shadow_transition;
3150
border-radius: 2px;
3151
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
3152
background-color: $base_color;
3153
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
3155
spinbutton:not(.vertical) { @extend %entry.flat; }
3157
}
3158
/********
3161
* Misc *
3162
********/
3163
//content view (grid/list)
3164
.content-view {
3165
background-color: $bg_color;
3166
// &:hover { -gtk-icon-effect: highlight; }
3168
rubberband { @extend rubberband; }
3170
}
3171
.scale-popup {
3173
.osd & { @extend %osd; }
3174
.osd & button.flat { //FIXME: quick hack, redo properly
3176
}
3177
button { // +/- buttons on GtkVolumeButton popup
3179
}
3180
}
3181
/**********************
3184
* Window Decorations *
3185
*********************/
3186
decoration {
3187
transition: $shadow_transition;
3188
border-radius: 2px 2px 0 0;
3189
box-shadow: $z-depth-4, 0 16px 16px transparent;
3190
// FIXME rationalize shadows
3192
// this is used for the resize cursor area
3194
margin: 8px;
3195
&:backdrop {
3197
// the transparent shadow here is to enforce that the shadow extents don't
3198
// change when we go to backdrop, to prevent jumping windows.
3199
// The biggest shadow should be in the same order then in the active state
3200
// or the jumping will happen during the transition.
3201
box-shadow: $z-depth-2, 0 16px 16px transparent;
3202
}
3203
.maximized &,
3205
.fullscreen &,
3206
.tiled & { border-radius: 0; }
3207
.popup & { box-shadow: none; }
3209
// server-side decorations as used by mutter
3211
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3212
.csd.popup & {
3214
border-radius: 2px;
3215
box-shadow: $z-depth-2;
3216
}
3217
tooltip.csd & {
3219
border-radius: 2px;
3220
box-shadow: $z-depth-2;
3221
}
3222
messagedialog.csd & {
3224
border-radius: 2px;
3225
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3226
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3228
}
3229
.solid-csd & {
3231
margin: 0;
3232
padding: 4px;
3233
// border: solid 1px $borders_color;
3234
// border-radius: 0;
3235
box-shadow: inset 0 0 0 4px $headerbar_color;
3236
// background-color: $borders_color;
3237
}
3238
}
3239
// Window Close button
3241
button.titlebutton {
3242
// @extend %simple_flat_button;
3243
@extend %circular_button;
3245
.selection-mode & {
3247
}
3248
}
3249
// catch all extend :)
3252
%selected_items {
3254
background-color: $primary_color;
3255
@at-root %nobg_selected_items, & {
3257
color: $inversed_fg_color;
3258
&:disabled { color: $disabled_inversed_fg_color; }
3260
}
3261
}
3262
.monospace { font-family: monospace; }
3264
/**********************
3267
* Touch Copy & Paste *
3268
*********************/
3269
//touch selection handlebars for the Popover.osd above
3270
cursor-handle {
3271
border-radius: $circular_radius;
3272
background-color: $accent_color;
3273
background-image: none;
3274
&.top:dir(ltr), &.bottom:dir(rtl) {
3276
padding-left: 6px;
3277
border-top-right-radius: 0;
3278
}
3279
&.bottom:dir(ltr), &.top:dir(rtl) {
3281
padding-right: 6px;
3282
border-top-left-radius: 0;
3283
}
3284
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3286
-GtkWidget-text-handle-width: 24;
3287
-GtkWidget-text-handle-height: 30;
3288
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3290
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3291
url('#{$_url}@2.png'));
3292
}
3293
}
3294
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3296
%circular_button,
3298
button.close,
3299
button.circular { // FIXME: aggregate to buttons
3300
border-radius: $circular_radius;
3301
-gtk-outline-radius: $circular_radius;
3302
// label { padding: 0; }
3304
}
3305
%small_button {
3307
min-height: $small_size;
3308
min-width: $small_size;
3309
padding: 0;
3310
border-radius: $circular_radius;
3311
-gtk-outline-radius: $circular_radius;
3312
}
3313
// shortcut window keys
3315
.keycap {
3316
min-width: 28px - 8px * 2;
3317
min-height: 28px - 2px;
3318
margin-top: 2px;
3319
padding-bottom: 2px;
3320
padding-left: 8px;
3321
padding-right: 8px;
3322
border: solid 1px $borders_color;
3324
border-radius: 2px + 1px;
3325
box-shadow: inset 0 -2px $borders_color;
3326
background-color: $base_color;
3327
color: $fg_color;
3328
font-size: smaller;
3329
}
3330
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3332
transition: $longer_transition;
3333
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_color;
3334
caret-color: $accent_color;
3335
}
3336
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3338
stackswitcher button.circular,
3340
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3341
min-width: $medium_size;
3342
min-height: $medium_size;
3343
padding: 0;
3344
}
3345