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
transition: background-color 0 $longer_duration;
1071
animation: header_ripple_effect $longer_duration $deceleration_curve;
1072
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1073
background-color: $primary_color;
1074
color: $inversed_fg_color;
1075
&:backdrop {
1077
color: $secondary_inversed_fg_color;
1078
}
1079
.subtitle:link { @extend *:link:selected; }
1081
button:not(.suggested-action):not(.destructive-action) {
1083
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1084
currentColor 0%,
1085
transparent 0%)
1086
0 0 0 / 0 0 0px;
1087
color: currentColor;
1088
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1090
&:checked {
1092
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1093
currentColor 100%,
1094
transparent 0%)
1095
0 0 2 / 0 0 2px;
1096
color: currentColor;
1097
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1099
}
1100
}
1101
.selection-menu {
1103
padding-left: 16px;
1104
padding-right: 16px;
1105
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1107
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1109
}
1110
}
1111
.fullscreen &,
1113
.tiled &,
1114
.maximized & {
1115
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1116
box-shadow: $z-depth-1;
1117
}
1118
&.default-decoration {
1120
min-height: $small_size;
1121
padding: $container_padding;
1122
border-width: 0;
1123
button.titlebutton {
1125
min-height: $small_size;
1126
min-width: $small_size;
1127
margin: 0;
1128
padding: 0;
1129
}
1130
}
1131
.solid-csd & {
1133
&:dir(rtl), &:dir(ltr) { // specificity bump
1134
margin-left: -2px;
1135
margin-right: -2px;
1136
margin-top: -2px;
1137
// border-radius: 0;
1138
box-shadow: inset 0 1px $topbar_highlight_color;
1139
}
1140
}
1141
}
1142
headerbar {
1144
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1145
entry,
1146
spinbutton,
1147
// separator,
1148
button {
1149
margin-top: $container_padding;
1150
margin-bottom: $container_padding;
1151
}
1152
switch {
1154
margin-top: $container_padding * 2;
1155
margin-bottom: $container_padding * 2;
1156
}
1157
}
1158
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1160
border-top-left-radius: 2px;
1161
border-top-right-radius: 2px;
1162
}
1163
headerbar {
1165
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1166
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1167
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1169
}
1170
.titlebar:not(headerbar) {
1172
window.csd > & {
1173
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1174
padding: 0;
1175
background-color: transparent;
1176
background-image: none;
1177
border-style: none;
1178
box-shadow: none;
1179
}
1180
> separator {
1182
background-color: $headerbar_color;
1183
background-image: image($borders_color);
1184
}
1185
@extend %titlebar;
1187
}
1188
/************
1191
* Pathbars *
1192
************/
1193
%pathbar_button,
1194
.path-bar button {
1195
padding-left: ($medium_size - 24px) / 2;
1196
padding-right: ($medium_size - 24px) / 2;
1197
label:not(:only-child) {
1199
&:first-child { margin-left: 4px; }
1200
&:last-child { margin-right: 4px; }
1202
}
1203
&.slider-button {
1205
padding-left: (24px - 16px) / 2;
1206
padding-right: (24px - 16px) / 2;
1207
}
1208
:not(headerbar) & {
1210
@extend %flat_button;
1211
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1213
$primary_color 0%,
1214
transparent 0%)
1215
0 0 0 / 0 0 0px;
1216
border-radius: 2px;
1217
&:checked {
1219
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1220
$primary_color 100%,
1221
transparent 0%)
1222
0 0 2 / 0 0 2px;
1223
&, &:disabled { background-color: transparent; }
1225
}
1226
}
1227
}
1228
/**************
1231
* Tree Views *
1232
**************/
1233
treeview.view {
1234
@at-root * {
1235
-GtkTreeView-horizontal-separator: 4;
1236
-GtkTreeView-grid-line-width: 1;
1237
-GtkTreeView-grid-line-pattern: '';
1238
-GtkTreeView-tree-line-width: 1;
1239
-GtkTreeView-tree-line-pattern: '';
1240
-GtkTreeView-expander-size: 16;
1241
}
1242
border-left-color: $track_color; // this is actually the tree lines color,
1244
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1245
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1247
&:hover, &:active, &:selected { border-radius: 0; }
1249
&.separator {
1251
min-height: 1px + 2px * 2;
1252
color: $borders_color;
1253
}
1254
&:drop(active) {
1256
border-style: solid none;
1257
border-width: 1px;
1258
border-color: $accent_color;
1259
&.after { border-top-style: none; }
1261
&.before { border-bottom-style: none; }
1263
}
1264
&.expander {
1266
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1267
-gtk-icon-transform: rotate(-90deg);
1268
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1270
&:checked { -gtk-icon-transform: unset; }
1272
color: $secondary_fg_color;
1274
&:hover, &:active { color: $fg_color; }
1276
&:disabled { color: $disabled_secondary_fg_color; }
1278
&:selected {
1280
color: $secondary_inversed_fg_color;
1281
&:hover, &:active { color: $inversed_fg_color; }
1283
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1285
}
1286
}
1287
&.progressbar { // progress bar in treeviews
1289
border-style: none none solid;
1290
border-width: $bar_size;
1291
border-color: $primary_color;
1292
box-shadow: none;
1293
background-color: transparent;
1294
&:selected { border-color: currentColor; }
1296
}
1297
&.trough { // progress bar trough in treeviews
1299
border-style: none none solid;
1300
border-width: $bar_size;
1301
border-color: scale-alpha($primary_color, $lower_opacity);
1302
box-shadow: none;
1303
background-color: transparent;
1304
&:selected { border-color: $track_color; }
1306
}
1307
header {
1309
button {
1310
@extend row.activatable;
1311
padding: 2px 6px;
1313
border-style: none solid solid none;
1314
border-width: 1px;
1315
border-color: $borders_color;
1316
border-radius: 0;
1317
background-clip: border-box;
1318
&, &:hover, &:active { box-shadow: none; }
1320
&, &:disabled { background-color: $base_color; }
1322
&:last-child { border-right-style: none; }
1324
}
1325
}
1326
button.dnd,
1328
header.button.dnd { // for treeview-like derive widgets
1329
padding: 2px 6px;
1330
border-style: none solid solid;
1331
border-width: 1px;
1332
border-color: $borders_color;
1333
border-radius: 0;
1334
box-shadow: none;
1335
background-color: $base_color;
1336
background-clip: border-box;
1337
color: $primary_color;
1338
}
1339
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1341
}
1342
/*********
1345
* Menus *
1346
*********/
1347
menubar,
1348
.menubar {
1349
-GtkWidget-window-dragging: true;
1350
padding: 0;
1351
// box-shadow: inset 0 -1px $borders_color;
1352
background-color: $headerbar_color;
1353
> menuitem {
1355
transition: $shorter_transition;
1356
min-height: 20px;
1357
padding: 4px 8px;
1358
color: $secondary_topbar_fg_color;
1359
&:hover { //Seems like it :hover even with keyboard focus
1361
transition: none;
1362
background-color: $semi_track_color;
1363
color: $topbar_fg_color;
1364
}
1365
&:disabled { color: $disabled_secondary_topbar_fg_color; }
1367
}
1368
}
1369
.csd.popup { border-radius: 2px; }
1371
menu,
1373
.menu,
1374
.context-menu {
1375
margin: 4px 0;
1376
padding: 4px 0;
1377
box-shadow: inset 0 1px $highlight_color;
1378
background-color: $base_color;
1379
border: 1px solid $borders_color; // adds borders in a non composited env
1380
.csd & {
1382
border: none; // axes borders in a composited env
1383
border-radius: 2px;
1384
}
1385
menuitem {
1387
transition: $shorter_transition;
1388
min-height: 20px;
1389
min-width: 40px;
1390
padding: 4px 8px;
1391
font: initial;
1392
text-shadow: none;
1393
&:hover {
1395
transition: none;
1396
background-color: $semi_track_color;
1397
}
1398
&:disabled { color: $disabled_fg_color; }
1400
// submenu indicators
1402
arrow {
1403
min-height: 16px;
1404
min-width: 16px;
1405
&:dir(ltr) {
1407
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1408
margin-left: 8px;
1409
}
1410
&:dir(rtl) {
1412
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1413
margin-right: 8px;
1414
}
1415
}
1416
// avoids labels color being overridden, see
1418
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1419
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1420
}
1421
// overflow arrows
1423
> arrow {
1424
min-height: 16px;
1425
min-width: 16px;
1426
padding: 4px;
1427
border-radius: 0;
1428
background-color: $base_color;
1429
color: $secondary_fg_color;
1430
&.top {
1432
margin-top: -4px;
1433
border-bottom: 1px solid $borders_color;
1434
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1435
}
1436
&.bottom {
1438
margin-bottom: -4px;
1439
border-top: 1px solid $borders_color;
1440
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1441
}
1442
&:hover {
1444
background-image: image($semi_track_color);
1445
color: $fg_color;
1446
}
1447
&:disabled {
1449
border-color: transparent;
1450
background-color: transparent;
1451
color: transparent;
1452
// color: $disabled_secondary_fg_color;
1453
}
1454
}
1455
separator { margin: 4px 0; }
1457
}
1458
menuitem {
1460
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1461
check,
1463
radio {
1464
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1465
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1466
}
1467
}
1468
/***************
1471
* Popovers *
1472
***************/
1473
popover.background {
1474
transition: $shadow_transition;
1475
padding: 2px;
1476
box-shadow: $z-depth-2; // TODO: this should really have a highlight
1477
background-color: $lighter_bg_color;
1478
&:backdrop { box-shadow: $z-depth-1; }
1480
&, .csd & {
1482
border-style: solid;
1483
border-width: 1px;
1484
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1485
border-radius: 2px + 1px;
1486
}
1487
> stack { margin: -4px; } // remove extra padding from menu style popovers
1489
> toolbar { margin: -2px; }
1491
> list,
1493
> .view,
1494
> toolbar {
1495
border-style: none;
1496
box-shadow: none;
1497
background-color: transparent;
1498
}
1499
&.touch-selection,
1501
&.magnifier,
1502
&.osd { @extend %osd; }
1503
// entry { @extend %entry.flat; }
1505
// button.combo { @extend %combo_flat; }
1507
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1509
&.menu button,
1511
button.model {
1512
@extend %simple_flat_button;
1513
min-height: 32px;
1515
padding: 0 8px;
1516
border-radius: 2px;
1517
&:checked { @extend %selected_items; }
1519
}
1520
separator { margin: 4px 0; }
1522
list separator { margin: 0; }
1524
}
1525
/*************
1527
* Notebooks *
1528
*************/
1529
notebook {
1530
> header {
1531
border-width: 1px;
1532
border-color: $borders_color;
1533
background-color: $bg_color;
1534
background-clip: border-box;
1535
&.top {
1537
border-bottom-style: solid;
1538
> tabs {
1539
margin-bottom: -1px;
1540
> tab {
1541
&:hover { box-shadow: inset 0 -2px $track_color; }
1543
&:checked { box-shadow: inset 0 -2px $primary_color; }
1545
}
1546
}
1547
}
1548
&.bottom {
1550
border-top-style: solid;
1551
> tabs {
1552
margin-top: -1px;
1553
> tab {
1554
&:hover { box-shadow: inset 0 2px $track_color; }
1556
&:checked { box-shadow: inset 0 2px $primary_color; }
1558
}
1559
}
1560
}
1561
&.left {
1563
border-right-style: solid;
1564
> tabs {
1565
margin-right: -1px;
1566
> tab {
1567
&:hover { box-shadow: inset -2px 0 $track_color; }
1569
&:checked { box-shadow: inset -2px 0 $primary_color; }
1571
}
1572
}
1573
}
1574
&.right {
1576
border-left-style: solid;
1577
> tabs {
1578
margin-left: -1px;
1579
> tab {
1580
&:hover { box-shadow: inset 2px 0 $track_color; }
1582
&:checked { box-shadow: inset 2px 0 $primary_color; }
1584
}
1585
}
1586
}
1587
&.top > tabs > arrow {
1589
@extend %notebook_vert_arrows;
1590
border-top-style: none;
1592
}
1593
&.bottom > tabs > arrow {
1595
@extend %notebook_vert_arrows;
1596
border-bottom-style: none;
1598
}
1599
@at-root %notebook_vert_arrows {
1601
padding-left: 4px;
1602
padding-right: 4px;
1603
&.down {
1605
margin-left: -8px;
1606
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1607
}
1608
&.up {
1610
margin-right: -8px;
1611
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1612
}
1613
}
1614
&.left > tabs > arrow {
1616
@extend %notebook_horz_arrows;
1617
border-left-style: none;
1619
}
1620
&.right > tabs > arrow {
1622
@extend %notebook_horz_arrows;
1623
border-right-style: none;
1625
}
1626
@at-root %notebook_horz_arrows {
1628
padding-top: 4px;
1629
padding-bottom: 4px;
1630
&.down {
1632
margin-top: -8px;
1633
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1634
}
1635
&.up {
1637
margin-bottom: -8px;
1638
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1639
}
1640
}
1641
> tabs > arrow {
1643
@extend %simple_flat_button;
1644
min-height: 16px;
1646
min-width: 16px;
1647
border-radius: 0;
1648
}
1649
tab {
1651
transition: $longer_transition,
1652
background-size 0,
1653
background-image 0;
1654
min-height: $small_size;
1655
min-width: $small_size;
1656
padding: $container_padding 12px;
1657
outline-offset: -6px;
1659
border-width: 1px; // for reorderable tabs
1661
border-color: transparent; //
1662
background-image: radial-gradient(circle farthest-corner at center,
1664
$primary_color 10%,
1665
transparent 0%);
1666
background-repeat: no-repeat;
1667
background-position: center;
1668
background-size: 0% 0%;
1669
color: $secondary_fg_color;
1671
font-weight: 500;
1672
&:hover {
1674
color: $fg_color;
1675
&.reorderable-page {
1677
border-color: $borders_color;
1678
background-color: $alt_base_color;
1679
}
1680
}
1681
&:disabled { color: $disabled_secondary_fg_color; }
1683
&:checked {
1685
transition: $longer_transition,
1686
background-size $longer_duration $deceleration_curve,
1687
background-image $longer_duration + $ripple_duration $deceleration_curve;
1688
background-image: radial-gradient(circle farthest-corner at center,
1689
transparent 10%,
1690
transparent 0%);
1691
background-size: 1000% 1000%;
1692
color: $fg_color;
1693
&:disabled { color: $disabled_fg_color; }
1695
&.reorderable-page {
1697
border-color: $borders_color;
1698
background-color: $base_color;
1699
}
1700
}
1701
// colors the button like the label, overridden otherwise
1703
button.flat {
1704
@extend %small_button;
1705
&:last-child {
1707
margin-left: $container_padding;
1708
margin-right: $container_padding - 12px;
1709
}
1710
&:first-child {
1712
margin-left: $container_padding - 12px;
1713
margin-right: $container_padding;
1714
}
1715
}
1716
}
1717
&.top,
1719
&.bottom {
1720
tabs {
1721
padding-left: 8px;
1722
padding-right: 8px;
1723
&:not(:only-child) {
1725
&:first-child { margin-left: 0; }
1726
&:last-child { margin-right: 0; }
1727
}
1728
tab {
1730
&.reorderable-page {
1731
margin: 0 -1px;
1732
border-style: none solid;
1733
}
1734
}
1735
}
1736
}
1737
&.left,
1739
&.right {
1740
tabs {
1741
padding-top: 8px;
1742
padding-bottom: 8px;
1743
&:not(:only-child) {
1745
&:first-child { margin-top: 0; }
1746
&:last-child { margin-bottom: 0; }
1747
}
1748
tab {
1750
&.reorderable-page {
1751
margin: -1px 0;
1752
border-style: solid none;
1753
}
1754
}
1755
}
1756
}
1757
}
1758
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1760
background-color: $base_color;
1761
entry:not(.search),
1763
spinbutton:not(.vertical) { @extend %entry.flat; }
1764
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1766
button.combo { @extend %combo_flat; }
1768
}
1769
}
1770
/**************
1773
* Scrollbars *
1774
**************/
1775
scrollbar {
1776
$_slider_min_length: 24px;
1777
// disable steppers
1779
@at-root * {
1780
-GtkScrollbar-has-backward-stepper: false;
1781
-GtkScrollbar-has-forward-stepper: false;
1782
}
1783
transition: $longer_transition;
1785
background-color: $base_color;
1786
background-clip: $extra_background_clip;
1787
// scrollbar border
1789
&.top { border-bottom: 1px solid $borders_color; }
1790
&.bottom { border-top: 1px solid $borders_color; }
1791
&.left { border-right: 1px solid $borders_color; }
1792
&.right { border-left: 1px solid $borders_color; }
1793
// slider
1795
slider {
1796
transition: $shorter_transition, margin 0, border-width 0;
1797
min-width: 8px;
1798
min-height: 8px;
1799
border: 4px solid transparent;
1800
border-radius: $circular_radius;
1801
background-clip: padding-box;
1802
background-color: $tertiary_fg_color;
1803
&:hover { background-color: $secondary_fg_color; }
1805
&:active { background-color: $fg_color; }
1807
&:disabled { background-color: $disabled_tertiary_fg_color; }
1809
}
1810
&.fine-tune {
1812
slider {
1813
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1814
min-width: 4px;
1815
min-height: 4px;
1816
}
1817
&.horizontal slider { margin: 2px 0; }
1819
&.vertical slider { margin: 0 2px; }
1821
}
1822
&.overlay-indicator {
1824
&:not(.dragging):not(.hovering) {
1825
border-color: transparent;
1826
background-color: transparent;
1827
slider {
1829
min-width: 4px;
1830
min-height: 4px;
1831
margin: 4px - 1px;
1832
border: 1px solid scale-alpha($base_color, $lower_opacity);
1833
}
1834
button {
1836
min-width: 4px;
1837
min-height: 4px;
1838
margin: 4px - 1px;
1839
border: 1px solid scale-alpha($base_color, $lower_opacity);
1840
border-radius: $circular_radius;
1841
background-color: $tertiary_fg_color;
1842
background-clip: padding-box;
1843
-gtk-icon-source: none;
1844
&:disabled { background-color: $disabled_tertiary_fg_color; }
1846
}
1847
&.horizontal {
1849
slider { min-width: $_slider_min_length; }
1850
button { min-width: 8px; }
1852
}
1853
&.vertical {
1855
slider { min-height: $_slider_min_length; }
1856
button { min-height: 8px; }
1858
}
1859
}
1860
&.dragging,
1862
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1863
}
1864
&.horizontal slider { min-width: $_slider_min_length; }
1866
&.vertical slider { min-height: $_slider_min_length; }
1868
// button styling
1870
button {
1871
@extend %simple_flat_button;
1872
min-width: 16px;
1874
min-height: 16px;
1875
padding: 0;
1876
border-radius: 0;
1877
}
1878
// button icons
1880
&.vertical {
1881
button {
1882
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1883
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1885
}
1886
}
1887
&.horizontal {
1889
button {
1890
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1891
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1893
}
1894
}
1895
}
1896
/**********
1899
* Switch *
1900
**********/
1901
switch {
1902
transition: $longer_transition;
1903
margin: $container_padding 0;
1904
border: 4px solid transparent;
1905
border-radius: $circular_radius;
1906
background-color: $track_color;
1907
background-clip: padding-box;
1908
font-size: 0;
1909
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1911
&:checked {
1913
background-color: scale-alpha($accent_color, 0.5);
1914
&:disabled {
1916
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1917
color: $disabled_fg_color;
1918
}
1919
}
1920
slider {
1922
@include entry(normal);
1923
transition: $longer_transition, $shadow_transition, margin 0;
1925
min-width: $small_size;
1926
min-height: $small_size;
1927
margin: -4px 0 -4px -4px;
1928
border-radius: $circular_radius;
1929
-gtk-outline-radius: $circular_radius;
1930
}
1931
&:hover slider { @include entry(focus); }
1933
&:checked slider {
1935
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0 $longer_duration;
1936
animation: needs_attention $longer_duration $deceleration_curve;
1937
margin: -4px -4px -4px 0;
1938
background-color: $accent_color;
1939
color: $inversed_fg_color;
1940
}
1941
&:disabled slider { @include entry(disabled); }
1943
&:checked:disabled slider { animation: none; }
1945
row:selected & {
1947
}
1948
}
1949
/*************************
1952
* Check and Radio items *
1953
*************************/
1954
// draw regular check and radio items using our PNG assets
1955
// all assets are rendered from assets.svg. never add pngs directly
1956
//selection-mode
1958
@each $s, $as in ('', '-selectionmode'),
1959
(':hover', '-hover-selectionmode'),
1960
(':checked', '-checked-selectionmode'),
1961
(':checked:hover', '-checked-hover-selectionmode') {
1962
.view.content-view.check#{$s}:not(list) {
1963
-gtk-icon-shadow: $z-depth-1;
1964
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1965
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1966
margin: 8px;
1967
background-color: transparent;
1968
}
1969
}
1970
checkbutton.text-button,
1972
radiobutton.text-button {
1973
// this is for a nice focus on check and radios text
1974
padding: 2px;
1975
outline-offset: 0;
1976
label:not(:only-child) { margin: 0 4px; }
1978
}
1979
check,
1981
radio {
1982
min-height: 24px;
1983
min-width: 24px;
1984
margin: -($large_size - 24px) / 2;
1985
padding: ($large_size - 24px) / 2;
1986
@extend %simple_flat_button;
1988
@extend %circular_button;
1990
&:checked, &:indeterminate { color: $accent_color; }
1992
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1994
// &:only-child { margin: -12px; }
1996
row &:not(:checked):not(:indeterminate) {
1998
color: gtkalpha(currentColor, $enabled_opacity);
1999
&:hover, &:active { color: currentColor; }
2001
&:disabled { color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity); }
2003
}
2004
menu menuitem & {
2006
transition: none;
2007
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2008
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
2010
&, &:hover, &:disabled {
2012
box-shadow: none;
2013
// color: inherit;
2014
// animation: none;
2015
}
2016
}
2017
}
2018
%check,
2020
check {
2021
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
2022
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
2023
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
2025
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
2026
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
2028
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
2029
}
2030
$radio_indicator: 10 / ($large_size / 1px) / 2;
2032
$radio_radius_slice: #{$large_size / 2 / 1px};
2033
$radio_radius_width: #{$large_size / 2};
2034
%radio,
2036
radio {
2037
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
2038
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
2039
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2041
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
2042
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2044
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2045
border-image: -gtk-gradient(radial,
2047
center center, 0,
2048
center center, 0.001,
2049
to($accent_color),
2050
to(transparent))
2051
$radio_radius_slice / $radio_radius_width;
2052
&:checked {
2054
border-image: -gtk-gradient(radial,
2055
center center, 0,
2056
center center, $radio_indicator,
2057
to($accent_color),
2058
to(transparent))
2059
$radio_radius_slice / $radio_radius_width;
2060
}
2061
&:checked:disabled {
2063
border-image: -gtk-gradient(radial,
2064
center center, 0,
2065
center center, $radio_indicator,
2066
to(scale-alpha($accent_color, $disabled_opacity)),
2067
to(transparent))
2068
$radio_radius_slice / $radio_radius_width;
2069
}
2070
&:indeterminate:checked {
2072
border-image: -gtk-gradient(radial,
2073
center center, 0,
2074
center center, 0.001,
2075
to($accent_color),
2076
to(transparent))
2077
$radio_radius_slice / $radio_radius_width;
2078
}
2079
}
2080
// let's animate things
2082
@keyframes check_check {
2083
from { -gtk-icon-transform: rotate(90deg); }
2084
to { -gtk-icon-transform: unset; }
2085
}
2086
@keyframes check_radio { // FIXME: cannot animate border-image
2088
from {
2089
border-image: -gtk-gradient(radial,
2090
center center, 0,
2091
center center, 0.001,
2092
to($accent_color),
2093
to(transparent))
2094
$radio_radius_slice / $radio_radius_width;
2095
}
2096
to {
2098
border-image: -gtk-gradient(radial,
2099
center center, 0,
2100
center center, $radio_indicator,
2101
to($accent_color),
2102
to(transparent))
2103
$radio_radius_slice / $radio_radius_width;
2104
}
2105
}
2106
@keyframes check_indeterminate {
2108
from { -gtk-icon-transform: unset; }
2109
50% { -gtk-icon-transform: scale(0, 1); }
2110
to { -gtk-icon-transform: unset; }
2111
}
2112
%check_checked,
2114
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2115
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2117
// %radio_checked,
2119
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2120
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2122
%indeterminate_checked,
2124
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2125
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2127
// no animations in menus
2129
menu menuitem {
2130
check:not(:indeterminate):checked,
2131
radio:not(:indeterminate):checked,
2132
check:indeterminate:checked,
2133
radio:indeterminate:checked { animation: none; }
2134
}
2135
treeview.view check,
2137
treeview.view radio {
2138
padding: 0;
2139
&:hover {
2141
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2142
&:disabled { box-shadow: none; }
2144
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inversed_fg_color, 0.05); }
2146
}
2147
& {
2149
color: $secondary_fg_color;
2150
&:hover, &:active { color: $fg_color; }
2152
&:disabled { color: $disabled_secondary_fg_color; }
2154
&:checked, &:indeterminate { color: $accent_color; }
2156
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2158
}
2159
&:selected {
2161
color: $secondary_inversed_fg_color;
2162
&:hover, &:active { color: $inversed_fg_color; }
2164
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2166
&:checked, &:indeterminate { color: $accent_color; }
2168
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2170
}
2171
}
2172
treeview.view radio:checked {
2174
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2175
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2176
border-image: none;
2177
}
2178
/************
2181
* GtkScale *
2182
************/
2183
scale {
2184
// sizing
2185
$_marks_lenght: 8px;
2186
$_marks_distance: 8px;
2187
$slider_size: 24px;
2189
$marks_slider_size: 30px;
2190
$slider_margin: -($slider_size - $bar_size) / 2;
2192
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2193
$color_slider_margin: -($slider_size) / 2;
2195
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2196
min-height: $medium_size - $slider_size;
2198
min-width: $medium_size - $slider_size;
2199
padding: ($slider_size / 2);
2200
* { transition: $longer_transition; }
2202
// the slider is inside the trough, so to have make it bigger there's a negative margin
2204
slider {
2205
min-height: $slider_size;
2206
min-width: $slider_size;
2207
margin: $slider_margin;
2208
}
2209
// the backing bit
2211
trough {
2212
outline-offset: 2px;
2213
background-color: $track_color;
2214
&:disabled { color: $disabled_fg_color; }
2216
}
2217
// the colored part of the backing bit
2219
highlight {
2220
background-color: $accent_color;
2221
&:disabled { background-color: transparent; }
2223
}
2224
// this is another differently styled part of the backing bit, the most relevant use case is for example
2226
// in media player to indicate how much video stream as been cached
2227
fill {
2228
background-color: $track_color;
2229
&:disabled { background-color: transparent; }
2231
}
2232
slider {
2234
transition: all $shorter_duration $standard_curve;
2235
// border-radius: 100%;
2236
// background-color: $accent_color;
2237
background-repeat: no-repeat;
2238
background-position: center;
2239
@each $s, $as in ('', ''),
2241
(':disabled', '-insensitive') {
2242
&#{$s} {
2243
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2244
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2246
}
2247
}
2248
background-size: calc(100% - 8px);
2250
&:hover { background-size: calc(100% - 4px); }
2252
&:active { background-size: calc(100% - 0px); }
2254
}
2255
// click-and-hold the slider to activate
2257
&.fine-tune {
2258
// to make the slider shrink in fine-tune mode
2259
slider { background-size: calc(100% - 12px); }
2260
}
2261
value { color: gtkalpha(currentColor, $hint_opacity); }
2263
marks {
2265
color: $track_color;
2266
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2268
(bottom, bottom, top),
2269
(top, left, right),
2270
(bottom, right, left) {
2271
&.#{$marks_class} {
2272
margin-#{$marks_margin}: $_marks_distance;
2273
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2274
}
2275
}
2276
}
2277
&.horizontal {
2279
indicator {
2280
min-height: $_marks_lenght;
2281
min-width: 1px;
2282
}
2283
}
2284
&.vertical {
2286
indicator {
2287
min-height: 1px;
2288
min-width: $_marks_lenght;
2289
}
2290
}
2291
// *WARNING* scale with marks madness following
2293
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2295
('vertical', 'vert') {
2296
@each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
2297
('scale-has-marks-below', 'marks-after:not(.marks-before)') {
2298
&.#{$dir_class}.#{$marks_class} {
2299
slider {
2300
@each $state, $state_infix in ('', ''),
2301
(':disabled', '-insensitive') {
2302
&#{$state} {
2303
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$asset_suffix}';
2304
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2306
}
2307
}
2308
@if $dir_class == 'horizontal' {
2310
min-height: $marks_slider_size;
2311
min-width: $slider_size;
2312
@if $marks_infix == 'scale-has-marks-above' {
2314
margin-top: $marks_slider_margin;
2315
background-position: center calc(100% - 4px);
2317
&:hover { background-position: center calc(100% - 2px); }
2319
&:active { background-position: center calc(100% - 0px); }
2321
}
2322
@if $marks_infix == 'scale-has-marks-below' {
2324
margin-bottom: $marks_slider_margin;
2325
background-position: center calc(4px);
2327
&:hover { background-position: center calc(2px); }
2329
&:active { background-position: center calc(0px); }
2331
}
2332
}
2333
@if $dir_class == 'vertical' {
2335
min-height: $slider_size;
2336
min-width: $marks_slider_size;
2337
@if $marks_infix == 'scale-has-marks-above' {
2339
margin-left: $marks_slider_margin;
2340
background-position: calc(4px) center;
2342
&:hover { background-position: calc(2px) center; }
2344
&:active { background-position: calc(0px) center; }
2346
}
2347
@if $marks_infix == 'scale-has-marks-below' {
2349
margin-right: $marks_slider_margin;
2350
background-position: calc(100% - 4px) center;
2352
&:hover { background-position: calc(100% - 2px) center; }
2354
&:active { background-position: calc(100% - 0px) center; }
2356
}
2357
}
2358
}
2359
&.fine-tune slider {
2361
@if $dir_class == 'horizontal' {
2362
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2363
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2365
}
2366
@if $dir_class == 'vertical' {
2368
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2369
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2371
}
2372
}
2373
}
2374
}
2375
}
2376
&.color {
2378
min-height: 0;
2379
min-width: 0;
2380
&.horizontal {
2382
padding: 0 0 12px 0;
2383
slider {
2385
&:dir(ltr), &:dir(rtl) { // specificity bump
2386
margin-bottom: $color_slider_margin;
2387
margin-top: $color_marks_slider_margin;
2388
}
2389
}
2390
}
2391
&.vertical {
2393
&:dir(ltr) {
2394
padding: 0 0 0 12px;
2395
slider {
2397
margin-left: $color_slider_margin;
2398
margin-right: $color_marks_slider_margin;
2399
}
2400
}
2401
&:dir(rtl) {
2403
padding: 0 12px 0 0;
2404
slider {
2406
margin-right: $color_slider_margin;
2407
margin-left: $color_marks_slider_margin;
2408
}
2409
}
2410
}
2411
}
2412
}
2413
/*****************
2416
* Progress bars *
2417
*****************/
2418
progressbar {
2419
// sizing
2420
&.horizontal {
2421
trough,
2422
progress { min-height: $bar_size; }
2423
}
2424
&.vertical {
2426
trough,
2427
progress { min-width: $bar_size; }
2428
}
2429
// FIXME: insensitive state missing and some other state should be set probably
2431
color: $tertiary_fg_color;
2432
font-size: smaller;
2433
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2435
progress { background-color: $primary_color; }
2437
&.osd { // progressbar.osd used for epiphany page loading progress
2439
// min-width: $bar_size;
2440
// min-height: $bar_size;
2441
// background-color: transparent;
2442
// trough { background-color: transparent; }
2444
progress {
2446
}
2447
}
2448
}
2449
/*************
2452
* Level Bar *
2453
*************/
2454
levelbar {
2455
block {
2456
min-width: $medium_size;
2457
min-height: $bar_size;
2458
}
2459
&.vertical block {
2461
min-width: $bar_size;
2462
min-height: $medium_size;
2463
}
2464
trough {
2466
padding: 2px;
2467
border-radius: 2px;
2468
@include entry(normal);
2470
&:disabled { @include entry(disabled); }
2472
}
2473
&.horizontal.discrete block { margin: 0 1px; }
2475
&.vertical.discrete block { margin: 1px 0; }
2477
&.horizontal.discrete trough { padding: 2px 1px; }
2479
&.vertical.discrete trough { padding: 1px 2px; }
2481
block {
2483
&.low {
2484
background-color: $warning_color;
2485
}
2486
&.high,
2488
&:not(.empty) {
2489
background-color: $primary_color;
2490
}
2491
&.full {
2493
background-color: $success_color;
2494
}
2495
&.empty {
2497
background-color: $track_color;
2498
color: $disabled_fg_color;
2499
}
2500
}
2501
}
2502
/****************
2505
* Print dialog *
2506
*****************/
2507
printdialog {
2508
paper {
2509
padding: 0;
2510
border: 1px solid $borders_color;
2511
background: $base_color;
2512
color: $fg_color;
2513
}
2514
.dialog-action-box { margin: 12px; }
2516
}
2517
/**********
2520
* Frames *
2521
**********/
2522
frame > border,
2523
.frame {
2524
margin: 0;
2525
padding: 0;
2526
border: 1px solid $borders_color;
2527
border-radius: 0;
2528
box-shadow: none;
2529
&.flat { border-style: none; }
2531
}
2532
actionbar > revealer > box {
2534
padding: $container_padding;
2535
border-top: 1px solid $borders_color;
2536
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2538
}
2539
scrolledwindow {
2541
viewport.frame { // avoid double borders when viewport inside scrolled window
2542
border-style: none;
2543
}
2544
// This is used when content is touch-dragged past boundaries.
2546
// draws a box on top of the content, the size changes programmatically.
2547
@at-root overshoot {
2548
&.top { @include overshoot(top); }
2549
&.bottom { @include overshoot(bottom); }
2551
&.left { @include overshoot(left); }
2553
&.right { @include overshoot(right); }
2555
}
2556
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2558
@at-root undershoot {
2559
&.top { @include undershoot(top); }
2560
&.bottom { @include undershoot(bottom); }
2562
&.left { @include undershoot(left); }
2564
&.right { @include undershoot(right); }
2566
}
2567
@at-root junction { // the small square between two scrollbars
2569
border-style: solid none none solid;
2570
border-width: 1px;
2571
border-color: $borders_color;
2572
background-color: $base_color;
2573
&:dir(rtl) { border-style: solid solid none none; }
2575
}
2576
}
2577
//vbox and hbox separators
2579
separator {
2580
min-width: 1px;
2581
min-height: 1px;
2582
background: $borders_color;
2583
}
2584
/*********
2587
* Lists *
2588
*********/
2589
list {
2590
border-color: $borders_color;
2591
background-color: $base_color;
2592
row { padding: 2px; }
2594
}
2595
// FIXME
2597
$row_transition: $longer_transition, background-color 0, color 0;
2598
row {
2600
&.activatable {
2601
transition: $row_transition,
2602
background-size $ripple_duration $deceleration_curve,
2603
background-image $ripple_duration * 2 $deceleration_curve;
2604
box-shadow: inset 0 0 0 9999px transparent;
2605
background-image: radial-gradient(circle farthest-corner at center,
2606
transparent 10%,
2607
transparent 0%);
2608
background-repeat: no-repeat;
2609
background-position: center;
2610
background-size: 1000% 1000%;
2611
&:hover {
2613
transition: $row_transition,
2614
box-shadow 0,
2615
background-size $ripple_duration $deceleration_curve,
2616
background-image $ripple_duration * 2 $deceleration_curve;
2617
box-shadow: inset 0 0 0 9999px $row_track_color;
2618
}
2619
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2621
&:active {
2622
transition: $row_transition,
2623
background-size 0,
2624
background-image 0;
2625
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2626
box-shadow: inset 0 0 0 9999px $semi_track_color;
2627
background-image: radial-gradient(circle farthest-corner at center,
2628
$semi_track_color 10%,
2629
transparent 0%);
2630
background-size: 0% 0%;
2631
}
2632
}
2633
&:selected { @extend %selected_items; }
2635
}
2636
/*********************
2639
* App Notifications *
2640
*********************/
2641
.app-notification {
2642
@extend %osd;
2643
@extend toolbar.osd;
2645
margin: 8px;
2647
button { @extend %button_basic.flat; }
2649
&.frame,
2651
border { border-style: none; }
2652
}
2653
/*************
2656
* Expanders *
2657
*************/
2658
expander {
2659
arrow {
2660
transition: all $shorter_duration $standard_curve;
2661
min-width: 16px;
2662
min-height: 16px;
2663
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2664
-gtk-icon-transform: rotate(-90deg);
2665
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2667
&:checked { -gtk-icon-transform: unset; }
2669
color: $secondary_fg_color;
2671
&:hover, &:active { color: $fg_color; }
2673
&:disabled { color: $disabled_secondary_fg_color; }
2675
&:selected {
2677
color: $secondary_inversed_fg_color;
2678
&:hover, &:active { color: $inversed_fg_color; }
2680
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2682
}
2683
}
2684
}
2685
/************
2688
* Calendar *
2689
***********/
2690
calendar {
2691
padding: 1px;
2692
border: 1px solid $borders_color;
2693
color: $fg_color;
2694
&:disabled { color: $disabled_fg_color; }
2696
&:selected {
2698
@extend %selected_items;
2699
border-radius: 2px + 1px;
2701
}
2702
&.header {
2704
border-style: none none solid;
2705
border-radius: 0;
2706
}
2707
&.button { @extend %simple_flat_button; }
2709
&.highlight {
2711
color: gtkalpha(currentColor, $hint_opacity);
2712
font-weight: 500;
2713
}
2714
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2716
}
2717
/***********
2720
* Dialogs *
2721
***********/
2722
messagedialog { // Message Dialog styling
2723
&.background { background-color: $lighter_bg_color; }
2724
.titlebar {
2726
min-height: $small_size;
2727
border-style: none;
2728
box-shadow: inset 0 1px $highlight_color;
2729
background-color: $lighter_bg_color;
2730
color: $fg_color;
2731
&:backdrop { color: $secondary_fg_color; }
2733
}
2734
&.csd { // rounded bottom border styling for csd version
2736
&.background {
2737
// bigger radius for better antialiasing
2738
border-bottom-left-radius: 2px;
2739
border-bottom-right-radius: 2px;
2740
}
2741
.dialog-action-area button {
2743
padding: 8px 16px;
2744
border-top: 1px solid $borders_color;
2745
border-radius: 0;
2746
@extend %simple_flat_button;
2748
&:first-child { border-bottom-left-radius: 2px; }
2750
&:last-child { border-bottom-right-radius: 2px; }
2752
}
2753
}
2754
}
2755
filechooser {
2757
.dialog-action-box { border-top: 1px solid $borders_color; }
2758
#pathbarbox {
2760
border-bottom: 1px solid $borders_color;
2761
background-color: $bg_color;
2762
}
2763
}
2764
filechooserbutton:drop(active) {
2766
box-shadow: none;
2767
}
2768
/***********
2771
* Sidebar *
2772
***********/
2773
.sidebar {
2774
border-style: none;
2775
background-color: $lighter_bg_color;
2776
@at-root %sidebar_left,
2778
&:dir(ltr),
2779
&.left,
2780
&.left:dir(rtl) {
2781
border-right: 1px solid $borders_color;
2782
border-left-style: none;
2783
}
2784
@at-root %sidebar_right
2786
&:dir(rtl),
2787
&.right {
2788
border-left: 1px solid $borders_color;
2789
border-right-style: none;
2790
}
2791
list { background-color: transparent; }
2793
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2795
}
2796
stacksidebar {
2798
&.sidebar {
2799
&:dir(ltr),
2800
&.left,
2801
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2802
&:dir(rtl),
2804
&.right { list { @extend %sidebar_right; }}
2805
}
2806
row {
2808
padding: 10px 4px;
2809
> label {
2811
padding-left: 6px;
2812
padding-right: 6px;
2813
}
2814
&.needs-attention > label { @extend %needs_attention; }
2816
}
2817
}
2818
/****************
2821
* File chooser *
2822
****************/
2823
placessidebar {
2824
> viewport.frame { border-style: none; }
2825
list { padding: (4px - 3px) 0 4px; }
2827
row {
2829
// Needs overriding of the GtkListBoxRow padding
2830
min-height: 32px;
2831
margin: -1px 0; // Remove unknown margins
2832
padding: 0;
2833
// Using margins/padding directly in the SidebarRow
2835
// will make the animation of the new bookmark row jump
2836
> revealer { padding: 0 12px; }
2837
&:selected { color: $inversed_fg_color; }
2839
&:disabled { color: $disabled_fg_color; }
2841
image.sidebar-icon {
2843
opacity: $hint_opacity; // dim the device icons
2844
&:dir(ltr) { padding-right: 8px; }
2846
&:dir(rtl) { padding-left: 8px; }
2847
}
2848
label.sidebar-label {
2850
&:dir(ltr) { padding-right: 2px; }
2851
&:dir(rtl) { padding-left: 2px; }
2852
}
2853
@at-root button.sidebar-button {
2855
@extend %simple_flat_button;
2856
@extend %small_button;
2858
row:selected & {
2860
}
2861
}
2862
&.sidebar-placeholder-row {
2864
min-height: 2px;
2865
padding: 0 8px;
2866
background-image: image($accent_color);
2867
background-clip: content-box;
2868
}
2869
&.sidebar-new-bookmark-row { color: $accent_color; }
2871
&:drop(active):not(:disabled) {
2873
box-shadow: inset 0 0 0 2px $accent_color;
2874
&:selected {
2876
// background-color: $accent_color;
2877
// color: $inversed_fg_color;
2878
}
2879
}
2880
}
2881
}
2882
placesview {
2884
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2885
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2887
// this selects the "connect to server" label
2889
> actionbar > revealer > box > label {
2890
padding-left: 8px;
2891
padding-right: 8px;
2892
}
2893
}
2894
/*********
2897
* Paned *
2898
*********/
2899
paned {
2900
> separator {
2901
min-width: 1px;
2902
min-height: 1px;
2903
-gtk-icon-source: none; // defeats the ugly default handle decoration
2904
border-style: none; // just to be sure
2905
background-color: transparent;
2906
// workaround, using background istead of a border since the border will get rendered twice (?)
2907
background-image: image($borders_color);
2908
background-size: 1px 1px;
2909
&.wide {
2911
min-width: 6px;
2912
min-height: 6px;
2913
background-color: $bg_color;
2914
background-image: image($borders_color), image($borders_color);
2915
background-size: 1px 1px, 1px 1px;
2916
}
2917
}
2918
&.horizontal > separator {
2920
background-repeat: repeat-y;
2921
&:dir(ltr) {
2923
margin: 0 -8px 0 0;
2924
padding: 0 8px 0 0;
2925
background-position: left;
2926
}
2927
&:dir(rtl) {
2929
margin: 0 0 0 -8px;
2930
padding: 0 0 0 8px;
2931
background-position: right;
2932
}
2933
&.wide {
2935
margin: 0;
2936
padding: 0;
2937
background-repeat: repeat-y, repeat-y;
2938
background-position: left, right;
2939
}
2940
}
2941
&.vertical > separator {
2943
margin: 0 0 -8px 0;
2944
padding: 0 0 8px 0;
2945
background-repeat: repeat-x;
2946
background-position: top;
2947
&.wide {
2949
margin: 0;
2950
padding: 0;
2951
background-repeat: repeat-x, repeat-x;
2952
background-position: bottom, top;
2953
}
2954
}
2955
}
2956
/**************
2959
* GtkInfoBar *
2960
**************/
2961
infobar {
2962
border-style: none;
2963
&.info { background-color: $info_bg_color; }
2965
&.question { background-color: $question_bg_color; }
2967
&.warning { background-color: $warning_bg_color; }
2969
&.error { background-color: $error_bg_color; }
2971
&.info,
2973
&.question,
2974
&.warning,
2975
&.error {
2976
> label, & { color: $inversed_fg_color; }
2977
button { @extend %button_selected; }
2979
selection {}
2981
*:link { @extend %link_selected; }
2983
}
2984
}
2985
/************
2988
* Tooltips *
2989
************/
2990
tooltip {
2991
&.background {
2992
// background-color needs to be set this way otherwise it gets drawn twice
2993
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2994
box-shadow: inset 0 1px $highlight_color;
2995
background-color: scale-alpha($base_color, $higher_opacity);
2996
}
2997
// @extend %osd;
2999
// padding: 4px; /* not working */
3001
border-radius: 2px;
3002
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3003
&:not(.csd) {
3005
border: 1px solid $borders_color;
3006
border-radius: 2px + 1px;
3007
background-clip: $extra_background_clip;
3008
}
3009
// FIXME: we need a border or tooltips vanish on black background.
3011
decoration { background-color: transparent; }
3012
label {
3014
// tooltip label has already 6px margins
3015
min-height: 32px - 6px * 2;
3016
padding: 0 8px - 6px;
3017
}
3018
* {
3020
// workaround for Eclipse.
3021
// do not include any declaration here.
3022
// padding: 0;
3023
// background-color: transparent;
3024
// color: inherit;
3025
}
3026
}
3027
/*****************
3030
* Color Chooser *
3031
*****************/
3032
colorswatch {
3033
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3034
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3035
// applied to the overlay box.
3036
// base color corners rounding
3038
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3039
// sports a bigger radius.
3040
// nth-child is needed by the custom color strip.
3041
&.top {
3043
border-top-left-radius: $md_radius + 0.5px;
3044
border-top-right-radius: $md_radius + 0.5px;
3045
overlay {
3047
border-top-left-radius: $md_radius;
3048
border-top-right-radius: $md_radius;
3049
}
3050
}
3051
&.bottom {
3053
border-bottom-left-radius: $md_radius + 0.5px;
3054
border-bottom-right-radius: $md_radius + 0.5px;
3055
overlay {
3057
border-bottom-left-radius: $md_radius;
3058
border-bottom-right-radius: $md_radius;
3059
}
3060
}
3061
&.left,
3063
&:first-child:not(.top) {
3064
border-top-left-radius: $md_radius + 0.5px;
3065
border-bottom-left-radius: $md_radius + 0.5px;
3066
overlay {
3068
border-top-left-radius: $md_radius;
3069
border-bottom-left-radius: $md_radius;
3070
}
3071
}
3072
&.right,
3074
&:last-child:not(.bottom) {
3075
border-top-right-radius: $md_radius + 0.5px;
3076
border-bottom-right-radius: $md_radius + 0.5px;
3077
overlay {
3079
border-top-right-radius: $md_radius;
3080
border-bottom-right-radius: $md_radius;
3081
}
3082
}
3083
&.dark overlay { color: $dark_contrast_color; }
3085
&.light overlay { color: $light_contrast_color; }
3087
&.dark { color: $dark_contrast_color; } // for focus ring
3089
&.light { color: $light_contrast_color; } // for focus ring
3091
&:drop(active) {
3093
box-shadow: none;
3094
&.light overlay {
3096
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3097
}
3098
&.dark overlay {
3100
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3101
}
3102
}
3103
overlay {
3105
transition: $shadow_transition;
3106
box-shadow: $z-depth-1;
3107
&:hover { box-shadow: $z-depth-2; }
3109
}
3110
&#add-color-button {
3112
border-radius: $md_radius $md_radius 0 0;
3113
color: $dark_contrast_color; // for focus ring
3114
&:only-child { border-radius: $md_radius; }
3116
overlay {
3118
background-image: linear-gradient(to right,
3119
$error_bg_color 25%,
3120
$warning_bg_color 25%, $warning_bg_color 50%,
3121
$info_bg_color 50%, $info_bg_color 75%,
3122
$question_bg_color 75%);
3123
color: $dark_contrast_color;
3124
}
3125
}
3126
&:disabled {
3128
opacity: $disabled_opacity;
3129
overlay { box-shadow: none; }
3131
}
3132
row:selected & {
3134
}
3135
&#editor-color-sample {
3137
border-radius: $md_radius + 0.5px;
3138
overlay { border-radius: $md_radius; }
3140
// overlay:hover { box-shadow: $z-depth-1; }
3142
}
3143
}
3144
// colorscale popup
3146
colorchooser .popover.osd {
3147
transition: $shadow_transition;
3148
border-radius: 2px;
3149
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
3150
background-color: $base_color;
3151
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
3153
spinbutton:not(.vertical) { @extend %entry.flat; }
3155
}
3156
/********
3159
* Misc *
3160
********/
3161
//content view (grid/list)
3162
.content-view {
3163
background-color: $bg_color;
3164
// &:hover { -gtk-icon-effect: highlight; }
3166
rubberband { @extend rubberband; }
3168
}
3169
.scale-popup {
3171
.osd & { @extend %osd; }
3172
.osd & button.flat { //FIXME: quick hack, redo properly
3174
}
3175
button { // +/- buttons on GtkVolumeButton popup
3177
}
3178
}
3179
/**********************
3182
* Window Decorations *
3183
*********************/
3184
decoration {
3185
transition: $shadow_transition;
3186
border-radius: 2px 2px 0 0;
3187
box-shadow: $z-depth-4, 0 16px 16px transparent;
3188
// FIXME rationalize shadows
3190
// this is used for the resize cursor area
3192
margin: 8px;
3193
&:backdrop {
3195
// the transparent shadow here is to enforce that the shadow extents don't
3196
// change when we go to backdrop, to prevent jumping windows.
3197
// The biggest shadow should be in the same order then in the active state
3198
// or the jumping will happen during the transition.
3199
box-shadow: $z-depth-2, 0 16px 16px transparent;
3200
}
3201
.maximized &,
3203
.fullscreen &,
3204
.tiled & { border-radius: 0; }
3205
.popup & { box-shadow: none; }
3207
// server-side decorations as used by mutter
3209
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3210
.csd.popup & {
3212
border-radius: 2px;
3213
box-shadow: $z-depth-2;
3214
}
3215
tooltip.csd & {
3217
border-radius: 2px;
3218
box-shadow: $z-depth-2;
3219
}
3220
messagedialog.csd & {
3222
border-radius: 2px;
3223
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3224
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3226
}
3227
.solid-csd & {
3229
margin: 0;
3230
padding: 4px;
3231
// border: solid 1px $borders_color;
3232
// border-radius: 0;
3233
box-shadow: inset 0 0 0 4px $headerbar_color;
3234
// background-color: $borders_color;
3235
}
3236
}
3237
// Window Close button
3239
button.titlebutton {
3240
// @extend %simple_flat_button;
3241
@extend %circular_button;
3243
.selection-mode & {
3245
}
3246
}
3247
// catch all extend :)
3250
%selected_items {
3252
background-color: $primary_color;
3253
@at-root %nobg_selected_items, & {
3255
color: $inversed_fg_color;
3256
&:disabled { color: $disabled_inversed_fg_color; }
3258
}
3259
}
3260
.monospace { font-family: monospace; }
3262
/**********************
3265
* Touch Copy & Paste *
3266
*********************/
3267
//touch selection handlebars for the Popover.osd above
3268
cursor-handle {
3269
border-radius: $circular_radius;
3270
background-color: $accent_color;
3271
background-image: none;
3272
&.top:dir(ltr), &.bottom:dir(rtl) {
3274
padding-left: 6px;
3275
border-top-right-radius: 0;
3276
}
3277
&.bottom:dir(ltr), &.top:dir(rtl) {
3279
padding-right: 6px;
3280
border-top-left-radius: 0;
3281
}
3282
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3284
-GtkWidget-text-handle-width: 24;
3285
-GtkWidget-text-handle-height: 30;
3286
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3288
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3289
url('#{$_url}@2.png'));
3290
}
3291
}
3292
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3294
%circular_button,
3296
button.close,
3297
button.circular { // FIXME: aggregate to buttons
3298
border-radius: $circular_radius;
3299
-gtk-outline-radius: $circular_radius;
3300
// label { padding: 0; }
3302
}
3303
%small_button {
3305
min-height: $small_size;
3306
min-width: $small_size;
3307
padding: 0;
3308
border-radius: $circular_radius;
3309
-gtk-outline-radius: $circular_radius;
3310
}
3311
// shortcut window keys
3313
.keycap {
3314
min-width: 28px - 8px * 2;
3315
min-height: 28px - 2px;
3316
margin-top: 2px;
3317
padding-bottom: 2px;
3318
padding-left: 8px;
3319
padding-right: 8px;
3320
border: solid 1px $borders_color;
3322
border-radius: 2px + 1px;
3323
box-shadow: inset 0 -2px $borders_color;
3324
background-color: $base_color;
3325
color: $fg_color;
3326
font-size: smaller;
3327
}
3328
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3330
transition: $longer_transition;
3331
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_color;
3332
caret-color: $accent_color;
3333
}
3334
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3336
stackswitcher button.circular,
3338
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3339
min-width: $medium_size;
3340
min-height: $medium_size;
3341
padding: 0;
3342
}
3343