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
box-shadow: inset 0 1px $topbar_highlight_color;
1123
.fullscreen &,
1125
.tiled &,
1126
.maximized & { box-shadow: none; }
1127
button.titlebutton {
1129
min-height: $small_size;
1130
min-width: $small_size;
1131
margin: 0;
1132
padding: 0;
1133
}
1134
}
1135
.solid-csd & {
1137
&:dir(rtl), &:dir(ltr) { // specificity bump
1138
margin-left: -2px;
1139
margin-right: -2px;
1140
margin-top: -2px;
1141
// border-radius: 0;
1142
box-shadow: inset 0 1px $topbar_highlight_color;
1143
}
1144
}
1145
}
1146
headerbar {
1148
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1149
entry,
1150
spinbutton,
1151
// separator,
1152
button {
1153
margin-top: $container_padding;
1154
margin-bottom: $container_padding;
1155
}
1156
switch {
1158
margin-top: $container_padding * 2;
1159
margin-bottom: $container_padding * 2;
1160
}
1161
}
1162
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1164
border-top-left-radius: 2px;
1165
border-top-right-radius: 2px;
1166
}
1167
headerbar {
1169
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1170
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1171
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1173
}
1174
.titlebar:not(headerbar) {
1176
window.csd > & {
1177
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1178
padding: 0;
1179
background-color: transparent;
1180
background-image: none;
1181
border-style: none;
1182
box-shadow: none;
1183
}
1184
> separator {
1186
background-color: $headerbar_color;
1187
background-image: image($borders_color);
1188
}
1189
@extend %titlebar;
1191
}
1192
/************
1195
* Pathbars *
1196
************/
1197
%pathbar_button,
1198
.path-bar button {
1199
padding-left: ($medium_size - 24px) / 2;
1200
padding-right: ($medium_size - 24px) / 2;
1201
label:not(:only-child) {
1203
&:first-child { margin-left: 4px; }
1204
&:last-child { margin-right: 4px; }
1206
}
1207
&.slider-button {
1209
padding-left: (24px - 16px) / 2;
1210
padding-right: (24px - 16px) / 2;
1211
}
1212
:not(headerbar) & {
1214
@extend %flat_button;
1215
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1217
$primary_color 0%,
1218
transparent 0%)
1219
0 0 0 / 0 0 0px;
1220
border-radius: 2px;
1221
&:checked {
1223
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1224
$primary_color 100%,
1225
transparent 0%)
1226
0 0 2 / 0 0 2px;
1227
&, &:disabled { background-color: transparent; }
1229
}
1230
}
1231
}
1232
/**************
1235
* Tree Views *
1236
**************/
1237
treeview.view {
1238
@at-root * {
1239
-GtkTreeView-horizontal-separator: 4;
1240
-GtkTreeView-grid-line-width: 1;
1241
-GtkTreeView-grid-line-pattern: '';
1242
-GtkTreeView-tree-line-width: 1;
1243
-GtkTreeView-tree-line-pattern: '';
1244
-GtkTreeView-expander-size: 16;
1245
}
1246
border-left-color: $track_color; // this is actually the tree lines color,
1248
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1249
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1251
&:hover, &:active, &:selected { border-radius: 0; }
1253
&.separator {
1255
min-height: 1px + 2px * 2;
1256
color: $borders_color;
1257
}
1258
&:drop(active) {
1260
border-style: solid none;
1261
border-width: 1px;
1262
border-color: $accent_color;
1263
&.after { border-top-style: none; }
1265
&.before { border-bottom-style: none; }
1267
}
1268
&.expander {
1270
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1271
-gtk-icon-transform: rotate(-90deg);
1272
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1274
&:checked { -gtk-icon-transform: unset; }
1276
color: $secondary_fg_color;
1278
&:hover, &:active { color: $fg_color; }
1280
&:disabled { color: $disabled_secondary_fg_color; }
1282
&:selected {
1284
color: $secondary_inversed_fg_color;
1285
&:hover, &:active { color: $inversed_fg_color; }
1287
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1289
}
1290
}
1291
&.progressbar { // progress bar in treeviews
1293
border-style: none none solid;
1294
border-width: $bar_size;
1295
border-color: $primary_color;
1296
box-shadow: none;
1297
background-color: transparent;
1298
&:selected { border-color: currentColor; }
1300
}
1301
&.trough { // progress bar trough in treeviews
1303
border-style: none none solid;
1304
border-width: $bar_size;
1305
border-color: scale-alpha($primary_color, $lower_opacity);
1306
box-shadow: none;
1307
background-color: transparent;
1308
&:selected { border-color: $track_color; }
1310
}
1311
header {
1313
button {
1314
@extend row.activatable;
1315
padding: 2px 6px;
1317
border-style: none solid solid none;
1318
border-width: 1px;
1319
border-color: $borders_color;
1320
border-radius: 0;
1321
background-clip: border-box;
1322
&, &:hover, &:active { box-shadow: none; }
1324
&, &:disabled { background-color: $base_color; }
1326
&:last-child { border-right-style: none; }
1328
}
1329
}
1330
button.dnd,
1332
header.button.dnd { // for treeview-like derive widgets
1333
padding: 2px 6px;
1334
border-style: none solid solid;
1335
border-width: 1px;
1336
border-color: $borders_color;
1337
border-radius: 0;
1338
box-shadow: none;
1339
background-color: $base_color;
1340
background-clip: border-box;
1341
color: $primary_color;
1342
}
1343
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1345
}
1346
/*********
1349
* Menus *
1350
*********/
1351
menubar,
1352
.menubar {
1353
-GtkWidget-window-dragging: true;
1354
padding: 0;
1355
// box-shadow: inset 0 -1px $borders_color;
1356
background-color: $headerbar_color;
1357
> menuitem {
1359
transition: $shorter_transition;
1360
min-height: 20px;
1361
padding: 4px 8px;
1362
color: $secondary_topbar_fg_color;
1363
&:hover { //Seems like it :hover even with keyboard focus
1365
transition: none;
1366
background-color: $semi_track_color;
1367
color: $topbar_fg_color;
1368
}
1369
&:disabled { color: $disabled_secondary_topbar_fg_color; }
1371
}
1372
}
1373
.csd.popup { border-radius: 2px; }
1375
menu,
1377
.menu,
1378
.context-menu {
1379
margin: 4px 0;
1380
padding: 4px 0;
1381
box-shadow: inset 0 1px $highlight_color;
1382
background-color: $base_color;
1383
border: 1px solid $borders_color; // adds borders in a non composited env
1384
.csd & {
1386
border: none; // axes borders in a composited env
1387
border-radius: 2px;
1388
}
1389
menuitem {
1391
transition: $shorter_transition;
1392
min-height: 20px;
1393
min-width: 40px;
1394
padding: 4px 8px;
1395
font: initial;
1396
text-shadow: none;
1397
&:hover {
1399
transition: none;
1400
background-color: $semi_track_color;
1401
}
1402
&:disabled { color: $disabled_fg_color; }
1404
// submenu indicators
1406
arrow {
1407
min-height: 16px;
1408
min-width: 16px;
1409
&:dir(ltr) {
1411
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1412
margin-left: 8px;
1413
}
1414
&:dir(rtl) {
1416
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1417
margin-right: 8px;
1418
}
1419
}
1420
// avoids labels color being overridden, see
1422
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1423
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1424
}
1425
// overflow arrows
1427
> arrow {
1428
min-height: 16px;
1429
min-width: 16px;
1430
padding: 4px;
1431
border-radius: 0;
1432
background-color: $base_color;
1433
color: $secondary_fg_color;
1434
&.top {
1436
margin-top: -4px;
1437
border-bottom: 1px solid $borders_color;
1438
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1439
}
1440
&.bottom {
1442
margin-bottom: -4px;
1443
border-top: 1px solid $borders_color;
1444
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1445
}
1446
&:hover {
1448
background-image: image($semi_track_color);
1449
color: $fg_color;
1450
}
1451
&:disabled {
1453
border-color: transparent;
1454
background-color: transparent;
1455
color: transparent;
1456
// color: $disabled_secondary_fg_color;
1457
}
1458
}
1459
separator { margin: 4px 0; }
1461
}
1462
menuitem {
1464
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1465
check,
1467
radio {
1468
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1469
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1470
}
1471
}
1472
/***************
1475
* Popovers *
1476
***************/
1477
popover.background {
1478
transition: $shadow_transition;
1479
padding: 2px;
1480
box-shadow: $z-depth-2; // TODO: this should really have a highlight
1481
background-color: $lighter_bg_color;
1482
&:backdrop { box-shadow: $z-depth-1; }
1484
&, .csd & {
1486
border-style: solid;
1487
border-width: 1px;
1488
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1489
border-radius: 2px + 1px;
1490
}
1491
> stack { margin: -4px; } // remove extra padding from menu style popovers
1493
> toolbar { margin: -2px; }
1495
> list,
1497
> .view,
1498
> toolbar {
1499
border-style: none;
1500
box-shadow: none;
1501
background-color: transparent;
1502
}
1503
&.touch-selection,
1505
&.magnifier,
1506
&.osd { @extend %osd; }
1507
// entry { @extend %entry.flat; }
1509
// button.combo { @extend %combo_flat; }
1511
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1513
&.menu button,
1515
button.model {
1516
@extend %simple_flat_button;
1517
min-height: 32px;
1519
padding: 0 8px;
1520
border-radius: 2px;
1521
&:checked { @extend %selected_items; }
1523
}
1524
separator { margin: 4px 0; }
1526
list separator { margin: 0; }
1528
}
1529
/*************
1531
* Notebooks *
1532
*************/
1533
notebook {
1534
> header {
1535
border-width: 1px;
1536
border-color: $borders_color;
1537
background-color: $bg_color;
1538
background-clip: border-box;
1539
&.top {
1541
border-bottom-style: solid;
1542
> tabs {
1543
margin-bottom: -1px;
1544
> tab {
1545
&:hover { box-shadow: inset 0 -2px $track_color; }
1547
&:checked { box-shadow: inset 0 -2px $primary_color; }
1549
}
1550
}
1551
}
1552
&.bottom {
1554
border-top-style: solid;
1555
> tabs {
1556
margin-top: -1px;
1557
> tab {
1558
&:hover { box-shadow: inset 0 2px $track_color; }
1560
&:checked { box-shadow: inset 0 2px $primary_color; }
1562
}
1563
}
1564
}
1565
&.left {
1567
border-right-style: solid;
1568
> tabs {
1569
margin-right: -1px;
1570
> tab {
1571
&:hover { box-shadow: inset -2px 0 $track_color; }
1573
&:checked { box-shadow: inset -2px 0 $primary_color; }
1575
}
1576
}
1577
}
1578
&.right {
1580
border-left-style: solid;
1581
> tabs {
1582
margin-left: -1px;
1583
> tab {
1584
&:hover { box-shadow: inset 2px 0 $track_color; }
1586
&:checked { box-shadow: inset 2px 0 $primary_color; }
1588
}
1589
}
1590
}
1591
&.top > tabs > arrow {
1593
@extend %notebook_vert_arrows;
1594
border-top-style: none;
1596
}
1597
&.bottom > tabs > arrow {
1599
@extend %notebook_vert_arrows;
1600
border-bottom-style: none;
1602
}
1603
@at-root %notebook_vert_arrows {
1605
padding-left: 4px;
1606
padding-right: 4px;
1607
&.down {
1609
margin-left: -8px;
1610
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1611
}
1612
&.up {
1614
margin-right: -8px;
1615
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1616
}
1617
}
1618
&.left > tabs > arrow {
1620
@extend %notebook_horz_arrows;
1621
border-left-style: none;
1623
}
1624
&.right > tabs > arrow {
1626
@extend %notebook_horz_arrows;
1627
border-right-style: none;
1629
}
1630
@at-root %notebook_horz_arrows {
1632
padding-top: 4px;
1633
padding-bottom: 4px;
1634
&.down {
1636
margin-top: -8px;
1637
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1638
}
1639
&.up {
1641
margin-bottom: -8px;
1642
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1643
}
1644
}
1645
> tabs > arrow {
1647
@extend %simple_flat_button;
1648
min-height: 16px;
1650
min-width: 16px;
1651
border-radius: 0;
1652
}
1653
tab {
1655
transition: $longer_transition,
1656
background-size 0,
1657
background-image 0;
1658
min-height: $small_size;
1659
min-width: $small_size;
1660
padding: $container_padding 12px;
1661
outline-offset: -6px;
1663
border-width: 1px; // for reorderable tabs
1665
border-color: transparent; //
1666
background-image: radial-gradient(circle farthest-corner at center,
1668
$primary_color 10%,
1669
transparent 0%);
1670
background-repeat: no-repeat;
1671
background-position: center;
1672
background-size: 0% 0%;
1673
color: $secondary_fg_color;
1675
font-weight: 500;
1676
&:hover {
1678
color: $fg_color;
1679
&.reorderable-page {
1681
border-color: $borders_color;
1682
background-color: $alt_base_color;
1683
}
1684
}
1685
&:disabled { color: $disabled_secondary_fg_color; }
1687
&:checked {
1689
transition: $longer_transition,
1690
background-size $longer_duration $deceleration_curve,
1691
background-image $longer_duration + $ripple_duration $deceleration_curve;
1692
background-image: radial-gradient(circle farthest-corner at center,
1693
transparent 10%,
1694
transparent 0%);
1695
background-size: 1000% 1000%;
1696
color: $fg_color;
1697
&:disabled { color: $disabled_fg_color; }
1699
&.reorderable-page {
1701
border-color: $borders_color;
1702
background-color: $base_color;
1703
}
1704
}
1705
// colors the button like the label, overridden otherwise
1707
button.flat {
1708
@extend %small_button;
1709
&:last-child {
1711
margin-left: $container_padding;
1712
margin-right: $container_padding - 12px;
1713
}
1714
&:first-child {
1716
margin-left: $container_padding - 12px;
1717
margin-right: $container_padding;
1718
}
1719
}
1720
}
1721
&.top,
1723
&.bottom {
1724
tabs {
1725
padding-left: 8px;
1726
padding-right: 8px;
1727
&:not(:only-child) {
1729
&:first-child { margin-left: 0; }
1730
&:last-child { margin-right: 0; }
1731
}
1732
tab {
1734
&.reorderable-page {
1735
margin: 0 -1px;
1736
border-style: none solid;
1737
}
1738
}
1739
}
1740
}
1741
&.left,
1743
&.right {
1744
tabs {
1745
padding-top: 8px;
1746
padding-bottom: 8px;
1747
&:not(:only-child) {
1749
&:first-child { margin-top: 0; }
1750
&:last-child { margin-bottom: 0; }
1751
}
1752
tab {
1754
&.reorderable-page {
1755
margin: -1px 0;
1756
border-style: solid none;
1757
}
1758
}
1759
}
1760
}
1761
}
1762
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1764
background-color: $base_color;
1765
entry:not(.search),
1767
spinbutton:not(.vertical) { @extend %entry.flat; }
1768
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1770
button.combo { @extend %combo_flat; }
1772
}
1773
}
1774
/**************
1777
* Scrollbars *
1778
**************/
1779
scrollbar {
1780
$_slider_min_length: 24px;
1781
// disable steppers
1783
@at-root * {
1784
-GtkScrollbar-has-backward-stepper: false;
1785
-GtkScrollbar-has-forward-stepper: false;
1786
}
1787
transition: $longer_transition;
1789
background-color: $base_color;
1790
background-clip: $extra_background_clip;
1791
// scrollbar border
1793
&.top { border-bottom: 1px solid $borders_color; }
1794
&.bottom { border-top: 1px solid $borders_color; }
1795
&.left { border-right: 1px solid $borders_color; }
1796
&.right { border-left: 1px solid $borders_color; }
1797
// slider
1799
slider {
1800
transition: $shorter_transition, margin 0, border-width 0;
1801
min-width: 8px;
1802
min-height: 8px;
1803
border: 4px solid transparent;
1804
border-radius: $circular_radius;
1805
background-clip: padding-box;
1806
background-color: $tertiary_fg_color;
1807
&:hover { background-color: $secondary_fg_color; }
1809
&:active { background-color: $fg_color; }
1811
&:disabled { background-color: $disabled_tertiary_fg_color; }
1813
}
1814
&.fine-tune {
1816
slider {
1817
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1818
min-width: 4px;
1819
min-height: 4px;
1820
}
1821
&.horizontal slider { margin: 2px 0; }
1823
&.vertical slider { margin: 0 2px; }
1825
}
1826
&.overlay-indicator {
1828
&:not(.dragging):not(.hovering) {
1829
border-color: transparent;
1830
background-color: transparent;
1831
slider {
1833
min-width: 4px;
1834
min-height: 4px;
1835
margin: 4px - 1px;
1836
border: 1px solid scale-alpha($base_color, $lower_opacity);
1837
}
1838
button {
1840
min-width: 4px;
1841
min-height: 4px;
1842
margin: 4px - 1px;
1843
border: 1px solid scale-alpha($base_color, $lower_opacity);
1844
border-radius: $circular_radius;
1845
background-color: $tertiary_fg_color;
1846
background-clip: padding-box;
1847
-gtk-icon-source: none;
1848
&:disabled { background-color: $disabled_tertiary_fg_color; }
1850
}
1851
&.horizontal {
1853
slider { min-width: $_slider_min_length; }
1854
button { min-width: 8px; }
1856
}
1857
&.vertical {
1859
slider { min-height: $_slider_min_length; }
1860
button { min-height: 8px; }
1862
}
1863
}
1864
&.dragging,
1866
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1867
}
1868
&.horizontal slider { min-width: $_slider_min_length; }
1870
&.vertical slider { min-height: $_slider_min_length; }
1872
// button styling
1874
button {
1875
@extend %simple_flat_button;
1876
min-width: 16px;
1878
min-height: 16px;
1879
padding: 0;
1880
border-radius: 0;
1881
}
1882
// button icons
1884
&.vertical {
1885
button {
1886
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1887
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1889
}
1890
}
1891
&.horizontal {
1893
button {
1894
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1895
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1897
}
1898
}
1899
}
1900
/**********
1903
* Switch *
1904
**********/
1905
switch {
1906
transition: $longer_transition;
1907
margin: $container_padding 0;
1908
border: 4px solid transparent;
1909
border-radius: $circular_radius;
1910
background-color: $track_color;
1911
background-clip: padding-box;
1912
font-size: 0;
1913
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1915
&:checked {
1917
background-color: scale-alpha($accent_color, 0.5);
1918
&:disabled {
1920
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1921
color: $disabled_fg_color;
1922
}
1923
}
1924
slider {
1926
@include entry(normal);
1927
transition: $longer_transition, $shadow_transition, margin 0;
1929
min-width: $small_size;
1930
min-height: $small_size;
1931
margin: -4px 0 -4px -4px;
1932
border-radius: $circular_radius;
1933
-gtk-outline-radius: $circular_radius;
1934
}
1935
&:hover slider { @include entry(focus); }
1937
&:checked slider {
1939
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0 $longer_duration;
1940
animation: needs_attention $longer_duration $deceleration_curve;
1941
margin: -4px -4px -4px 0;
1942
background-color: $accent_color;
1943
color: $inversed_fg_color;
1944
}
1945
&:disabled slider { @include entry(disabled); }
1947
&:checked:disabled slider { animation: none; }
1949
row:selected & {
1951
}
1952
}
1953
/*************************
1956
* Check and Radio items *
1957
*************************/
1958
// draw regular check and radio items using our PNG assets
1959
// all assets are rendered from assets.svg. never add pngs directly
1960
//selection-mode
1962
@each $s, $as in ('', '-selectionmode'),
1963
(':hover', '-hover-selectionmode'),
1964
(':checked', '-checked-selectionmode'),
1965
(':checked:hover', '-checked-hover-selectionmode') {
1966
.view.content-view.check#{$s}:not(list) {
1967
-gtk-icon-shadow: $z-depth-1;
1968
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1969
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1970
margin: 8px;
1971
background-color: transparent;
1972
}
1973
}
1974
checkbutton.text-button,
1976
radiobutton.text-button {
1977
// this is for a nice focus on check and radios text
1978
padding: 2px;
1979
outline-offset: 0;
1980
label:not(:only-child) { margin: 0 4px; }
1982
}
1983
check,
1985
radio {
1986
min-height: 24px;
1987
min-width: 24px;
1988
margin: -($large_size - 24px) / 2;
1989
padding: ($large_size - 24px) / 2;
1990
@extend %simple_flat_button;
1992
@extend %circular_button;
1994
&:checked, &:indeterminate { color: $accent_color; }
1996
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1998
// &:only-child { margin: -12px; }
2000
row &:not(:checked):not(:indeterminate) {
2002
color: gtkalpha(currentColor, $enabled_opacity);
2003
&:hover, &:active { color: currentColor; }
2005
&:disabled { color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity); }
2007
}
2008
menu menuitem & {
2010
transition: none;
2011
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2012
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
2014
&, &:hover, &:disabled {
2016
box-shadow: none;
2017
// color: inherit;
2018
// animation: none;
2019
}
2020
}
2021
}
2022
%check,
2024
check {
2025
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
2026
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
2027
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
2029
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
2030
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
2032
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
2033
}
2034
$radio_indicator: 10 / ($large_size / 1px) / 2;
2036
$radio_radius_slice: #{$large_size / 2 / 1px};
2037
$radio_radius_width: #{$large_size / 2};
2038
%radio,
2040
radio {
2041
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
2042
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
2043
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2045
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
2046
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2048
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2049
border-image: -gtk-gradient(radial,
2051
center center, 0,
2052
center center, 0.001,
2053
to($accent_color),
2054
to(transparent))
2055
$radio_radius_slice / $radio_radius_width;
2056
&:checked {
2058
border-image: -gtk-gradient(radial,
2059
center center, 0,
2060
center center, $radio_indicator,
2061
to($accent_color),
2062
to(transparent))
2063
$radio_radius_slice / $radio_radius_width;
2064
}
2065
&:checked:disabled {
2067
border-image: -gtk-gradient(radial,
2068
center center, 0,
2069
center center, $radio_indicator,
2070
to(scale-alpha($accent_color, $disabled_opacity)),
2071
to(transparent))
2072
$radio_radius_slice / $radio_radius_width;
2073
}
2074
&:indeterminate:checked {
2076
border-image: -gtk-gradient(radial,
2077
center center, 0,
2078
center center, 0.001,
2079
to($accent_color),
2080
to(transparent))
2081
$radio_radius_slice / $radio_radius_width;
2082
}
2083
}
2084
// let's animate things
2086
@keyframes check_check {
2087
from { -gtk-icon-transform: rotate(90deg); }
2088
to { -gtk-icon-transform: unset; }
2089
}
2090
@keyframes check_radio { // FIXME: cannot animate border-image
2092
from {
2093
border-image: -gtk-gradient(radial,
2094
center center, 0,
2095
center center, 0.001,
2096
to($accent_color),
2097
to(transparent))
2098
$radio_radius_slice / $radio_radius_width;
2099
}
2100
to {
2102
border-image: -gtk-gradient(radial,
2103
center center, 0,
2104
center center, $radio_indicator,
2105
to($accent_color),
2106
to(transparent))
2107
$radio_radius_slice / $radio_radius_width;
2108
}
2109
}
2110
@keyframes check_indeterminate {
2112
from { -gtk-icon-transform: unset; }
2113
50% { -gtk-icon-transform: scale(0, 1); }
2114
to { -gtk-icon-transform: unset; }
2115
}
2116
%check_checked,
2118
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2119
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2121
// %radio_checked,
2123
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2124
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2126
%indeterminate_checked,
2128
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2129
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2131
// no animations in menus
2133
menu menuitem {
2134
check:not(:indeterminate):checked,
2135
radio:not(:indeterminate):checked,
2136
check:indeterminate:checked,
2137
radio:indeterminate:checked { animation: none; }
2138
}
2139
treeview.view check,
2141
treeview.view radio {
2142
padding: 0;
2143
&:hover {
2145
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2146
&:disabled { box-shadow: none; }
2148
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inversed_fg_color, 0.05); }
2150
}
2151
& {
2153
color: $secondary_fg_color;
2154
&:hover, &:active { color: $fg_color; }
2156
&:disabled { color: $disabled_secondary_fg_color; }
2158
&:checked, &:indeterminate { color: $accent_color; }
2160
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2162
}
2163
&:selected {
2165
color: $secondary_inversed_fg_color;
2166
&:hover, &:active { color: $inversed_fg_color; }
2168
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2170
&:checked, &:indeterminate { color: $accent_color; }
2172
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2174
}
2175
}
2176
treeview.view radio:checked {
2178
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2179
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2180
border-image: none;
2181
}
2182
/************
2185
* GtkScale *
2186
************/
2187
scale {
2188
// sizing
2189
$_marks_lenght: 8px;
2190
$_marks_distance: 8px;
2191
$slider_size: 24px;
2193
$marks_slider_size: 30px;
2194
$slider_margin: -($slider_size - $bar_size) / 2;
2196
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2197
$color_slider_margin: -($slider_size) / 2;
2199
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2200
min-height: $medium_size - $slider_size;
2202
min-width: $medium_size - $slider_size;
2203
padding: ($slider_size / 2);
2204
* { transition: $longer_transition; }
2206
// the slider is inside the trough, so to have make it bigger there's a negative margin
2208
slider {
2209
min-height: $slider_size;
2210
min-width: $slider_size;
2211
margin: $slider_margin;
2212
}
2213
// the backing bit
2215
trough {
2216
outline-offset: 2px;
2217
background-color: $track_color;
2218
&:disabled { color: $disabled_fg_color; }
2220
}
2221
// the colored part of the backing bit
2223
highlight {
2224
background-color: $accent_color;
2225
&:disabled { background-color: transparent; }
2227
}
2228
// this is another differently styled part of the backing bit, the most relevant use case is for example
2230
// in media player to indicate how much video stream as been cached
2231
fill {
2232
background-color: $track_color;
2233
&:disabled { background-color: transparent; }
2235
}
2236
slider {
2238
transition: all $shorter_duration $standard_curve;
2239
// border-radius: 100%;
2240
// background-color: $accent_color;
2241
background-repeat: no-repeat;
2242
background-position: center;
2243
@each $s, $as in ('', ''),
2245
(':disabled', '-insensitive') {
2246
&#{$s} {
2247
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2248
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2250
}
2251
}
2252
background-size: calc(100% - 8px);
2254
&:hover { background-size: calc(100% - 4px); }
2256
&:active { background-size: calc(100% - 0px); }
2258
}
2259
// click-and-hold the slider to activate
2261
&.fine-tune {
2262
// to make the slider shrink in fine-tune mode
2263
slider { background-size: calc(100% - 12px); }
2264
}
2265
value { color: gtkalpha(currentColor, $hint_opacity); }
2267
marks {
2269
color: $track_color;
2270
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2272
(bottom, bottom, top),
2273
(top, left, right),
2274
(bottom, right, left) {
2275
&.#{$marks_class} {
2276
margin-#{$marks_margin}: $_marks_distance;
2277
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2278
}
2279
}
2280
}
2281
&.horizontal {
2283
indicator {
2284
min-height: $_marks_lenght;
2285
min-width: 1px;
2286
}
2287
}
2288
&.vertical {
2290
indicator {
2291
min-height: 1px;
2292
min-width: $_marks_lenght;
2293
}
2294
}
2295
// *WARNING* scale with marks madness following
2297
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2299
('vertical', 'vert') {
2300
@each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
2301
('scale-has-marks-below', 'marks-after:not(.marks-before)') {
2302
&.#{$dir_class}.#{$marks_class} {
2303
slider {
2304
@each $state, $state_infix in ('', ''),
2305
(':disabled', '-insensitive') {
2306
&#{$state} {
2307
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$asset_suffix}';
2308
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2310
}
2311
}
2312
@if $dir_class == 'horizontal' {
2314
min-height: $marks_slider_size;
2315
min-width: $slider_size;
2316
@if $marks_infix == 'scale-has-marks-above' {
2318
margin-top: $marks_slider_margin;
2319
background-position: center calc(100% - 4px);
2321
&:hover { background-position: center calc(100% - 2px); }
2323
&:active { background-position: center calc(100% - 0px); }
2325
}
2326
@if $marks_infix == 'scale-has-marks-below' {
2328
margin-bottom: $marks_slider_margin;
2329
background-position: center calc(4px);
2331
&:hover { background-position: center calc(2px); }
2333
&:active { background-position: center calc(0px); }
2335
}
2336
}
2337
@if $dir_class == 'vertical' {
2339
min-height: $slider_size;
2340
min-width: $marks_slider_size;
2341
@if $marks_infix == 'scale-has-marks-above' {
2343
margin-left: $marks_slider_margin;
2344
background-position: calc(4px) center;
2346
&:hover { background-position: calc(2px) center; }
2348
&:active { background-position: calc(0px) center; }
2350
}
2351
@if $marks_infix == 'scale-has-marks-below' {
2353
margin-right: $marks_slider_margin;
2354
background-position: calc(100% - 4px) center;
2356
&:hover { background-position: calc(100% - 2px) center; }
2358
&:active { background-position: calc(100% - 0px) center; }
2360
}
2361
}
2362
}
2363
&.fine-tune slider {
2365
@if $dir_class == 'horizontal' {
2366
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2367
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2369
}
2370
@if $dir_class == 'vertical' {
2372
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2373
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2375
}
2376
}
2377
}
2378
}
2379
}
2380
&.color {
2382
min-height: 0;
2383
min-width: 0;
2384
&.horizontal {
2386
padding: 0 0 12px 0;
2387
slider {
2389
&:dir(ltr), &:dir(rtl) { // specificity bump
2390
margin-bottom: $color_slider_margin;
2391
margin-top: $color_marks_slider_margin;
2392
}
2393
}
2394
}
2395
&.vertical {
2397
&:dir(ltr) {
2398
padding: 0 0 0 12px;
2399
slider {
2401
margin-left: $color_slider_margin;
2402
margin-right: $color_marks_slider_margin;
2403
}
2404
}
2405
&:dir(rtl) {
2407
padding: 0 12px 0 0;
2408
slider {
2410
margin-right: $color_slider_margin;
2411
margin-left: $color_marks_slider_margin;
2412
}
2413
}
2414
}
2415
}
2416
}
2417
/*****************
2420
* Progress bars *
2421
*****************/
2422
progressbar {
2423
// sizing
2424
&.horizontal {
2425
trough,
2426
progress { min-height: $bar_size; }
2427
}
2428
&.vertical {
2430
trough,
2431
progress { min-width: $bar_size; }
2432
}
2433
// FIXME: insensitive state missing and some other state should be set probably
2435
color: $tertiary_fg_color;
2436
font-size: smaller;
2437
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2439
progress { background-color: $primary_color; }
2441
&.osd { // progressbar.osd used for epiphany page loading progress
2443
// min-width: $bar_size;
2444
// min-height: $bar_size;
2445
// background-color: transparent;
2446
// trough { background-color: transparent; }
2448
progress {
2450
}
2451
}
2452
}
2453
/*************
2456
* Level Bar *
2457
*************/
2458
levelbar {
2459
block {
2460
min-width: $medium_size;
2461
min-height: $bar_size;
2462
}
2463
&.vertical block {
2465
min-width: $bar_size;
2466
min-height: $medium_size;
2467
}
2468
trough {
2470
padding: 2px;
2471
border-radius: 2px;
2472
@include entry(normal);
2474
&:disabled { @include entry(disabled); }
2476
}
2477
&.horizontal.discrete block { margin: 0 1px; }
2479
&.vertical.discrete block { margin: 1px 0; }
2481
&.horizontal.discrete trough { padding: 2px 1px; }
2483
&.vertical.discrete trough { padding: 1px 2px; }
2485
block {
2487
&.low {
2488
background-color: $warning_color;
2489
}
2490
&.high,
2492
&:not(.empty) {
2493
background-color: $primary_color;
2494
}
2495
&.full {
2497
background-color: $success_color;
2498
}
2499
&.empty {
2501
background-color: $track_color;
2502
color: $disabled_fg_color;
2503
}
2504
}
2505
}
2506
/****************
2509
* Print dialog *
2510
*****************/
2511
printdialog {
2512
paper {
2513
padding: 0;
2514
border: 1px solid $borders_color;
2515
background: $base_color;
2516
color: $fg_color;
2517
}
2518
.dialog-action-box { margin: 12px; }
2520
}
2521
/**********
2524
* Frames *
2525
**********/
2526
frame > border,
2527
.frame {
2528
margin: 0;
2529
padding: 0;
2530
border: 1px solid $borders_color;
2531
border-radius: 0;
2532
box-shadow: none;
2533
&.flat { border-style: none; }
2535
}
2536
actionbar > revealer > box {
2538
padding: $container_padding;
2539
border-top: 1px solid $borders_color;
2540
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2542
}
2543
scrolledwindow {
2545
viewport.frame { // avoid double borders when viewport inside scrolled window
2546
border-style: none;
2547
}
2548
// This is used when content is touch-dragged past boundaries.
2550
// draws a box on top of the content, the size changes programmatically.
2551
@at-root overshoot {
2552
&.top { @include overshoot(top); }
2553
&.bottom { @include overshoot(bottom); }
2555
&.left { @include overshoot(left); }
2557
&.right { @include overshoot(right); }
2559
}
2560
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2562
@at-root undershoot {
2563
&.top { @include undershoot(top); }
2564
&.bottom { @include undershoot(bottom); }
2566
&.left { @include undershoot(left); }
2568
&.right { @include undershoot(right); }
2570
}
2571
@at-root junction { // the small square between two scrollbars
2573
border-style: solid none none solid;
2574
border-width: 1px;
2575
border-color: $borders_color;
2576
background-color: $base_color;
2577
&:dir(rtl) { border-style: solid solid none none; }
2579
}
2580
}
2581
//vbox and hbox separators
2583
separator {
2584
min-width: 1px;
2585
min-height: 1px;
2586
background: $borders_color;
2587
}
2588
/*********
2591
* Lists *
2592
*********/
2593
list {
2594
border-color: $borders_color;
2595
background-color: $base_color;
2596
row { padding: 2px; }
2598
}
2599
// FIXME
2601
$row_transition: $longer_transition, background-color 0, color 0;
2602
row {
2604
&.activatable {
2605
transition: $row_transition,
2606
background-size $ripple_duration $deceleration_curve,
2607
background-image $ripple_duration * 2 $deceleration_curve;
2608
box-shadow: inset 0 0 0 9999px transparent;
2609
background-image: radial-gradient(circle farthest-corner at center,
2610
transparent 10%,
2611
transparent 0%);
2612
background-repeat: no-repeat;
2613
background-position: center;
2614
background-size: 1000% 1000%;
2615
&:hover {
2617
transition: $row_transition,
2618
box-shadow 0,
2619
background-size $ripple_duration $deceleration_curve,
2620
background-image $ripple_duration * 2 $deceleration_curve;
2621
box-shadow: inset 0 0 0 9999px $row_track_color;
2622
}
2623
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2625
&:active {
2626
transition: $row_transition,
2627
background-size 0,
2628
background-image 0;
2629
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2630
box-shadow: inset 0 0 0 9999px $semi_track_color;
2631
background-image: radial-gradient(circle farthest-corner at center,
2632
$semi_track_color 10%,
2633
transparent 0%);
2634
background-size: 0% 0%;
2635
}
2636
}
2637
&:selected { @extend %selected_items; }
2639
}
2640
/*********************
2643
* App Notifications *
2644
*********************/
2645
.app-notification {
2646
@extend %osd;
2647
@extend toolbar.osd;
2649
margin: 8px;
2651
button { @extend %button_basic.flat; }
2653
&.frame,
2655
border { border-style: none; }
2656
}
2657
/*************
2660
* Expanders *
2661
*************/
2662
expander {
2663
arrow {
2664
transition: all $shorter_duration $standard_curve;
2665
min-width: 16px;
2666
min-height: 16px;
2667
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2668
-gtk-icon-transform: rotate(-90deg);
2669
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2671
&:checked { -gtk-icon-transform: unset; }
2673
color: $secondary_fg_color;
2675
&:hover, &:active { color: $fg_color; }
2677
&:disabled { color: $disabled_secondary_fg_color; }
2679
&:selected {
2681
color: $secondary_inversed_fg_color;
2682
&:hover, &:active { color: $inversed_fg_color; }
2684
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2686
}
2687
}
2688
}
2689
/************
2692
* Calendar *
2693
***********/
2694
calendar {
2695
padding: 1px;
2696
border: 1px solid $borders_color;
2697
color: $fg_color;
2698
&:disabled { color: $disabled_fg_color; }
2700
&:selected {
2702
@extend %selected_items;
2703
border-radius: 2px + 1px;
2705
}
2706
&.header {
2708
border-style: none none solid;
2709
border-radius: 0;
2710
}
2711
&.button { @extend %simple_flat_button; }
2713
&.highlight {
2715
color: gtkalpha(currentColor, $hint_opacity);
2716
font-weight: 500;
2717
}
2718
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2720
}
2721
/***********
2724
* Dialogs *
2725
***********/
2726
messagedialog { // Message Dialog styling
2727
&.background { background-color: $lighter_bg_color; }
2728
.titlebar {
2730
min-height: $small_size;
2731
border-style: none;
2732
box-shadow: inset 0 1px $highlight_color;
2733
background-color: $lighter_bg_color;
2734
color: $fg_color;
2735
&:backdrop { color: $secondary_fg_color; }
2737
}
2738
&.csd { // rounded bottom border styling for csd version
2740
&.background {
2741
// bigger radius for better antialiasing
2742
border-bottom-left-radius: 2px;
2743
border-bottom-right-radius: 2px;
2744
}
2745
.dialog-action-area button {
2747
padding: 8px 16px;
2748
border-top: 1px solid $borders_color;
2749
border-radius: 0;
2750
@extend %simple_flat_button;
2752
&:first-child { border-bottom-left-radius: 2px; }
2754
&:last-child { border-bottom-right-radius: 2px; }
2756
}
2757
}
2758
}
2759
filechooser {
2761
.dialog-action-box { border-top: 1px solid $borders_color; }
2762
#pathbarbox {
2764
border-bottom: 1px solid $borders_color;
2765
background-color: $bg_color;
2766
}
2767
}
2768
filechooserbutton:drop(active) {
2770
box-shadow: none;
2771
}
2772
/***********
2775
* Sidebar *
2776
***********/
2777
.sidebar {
2778
border-style: none;
2779
background-color: $lighter_bg_color;
2780
@at-root %sidebar_left,
2782
&:dir(ltr),
2783
&.left,
2784
&.left:dir(rtl) {
2785
border-right: 1px solid $borders_color;
2786
border-left-style: none;
2787
}
2788
@at-root %sidebar_right
2790
&:dir(rtl),
2791
&.right {
2792
border-left: 1px solid $borders_color;
2793
border-right-style: none;
2794
}
2795
list { background-color: transparent; }
2797
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2799
}
2800
stacksidebar {
2802
&.sidebar {
2803
&:dir(ltr),
2804
&.left,
2805
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2806
&:dir(rtl),
2808
&.right { list { @extend %sidebar_right; }}
2809
}
2810
row {
2812
padding: 10px 4px;
2813
> label {
2815
padding-left: 6px;
2816
padding-right: 6px;
2817
}
2818
&.needs-attention > label { @extend %needs_attention; }
2820
}
2821
}
2822
/****************
2825
* File chooser *
2826
****************/
2827
placessidebar {
2828
> viewport.frame { border-style: none; }
2829
list { padding: (4px - 3px) 0 4px; }
2831
row {
2833
// Needs overriding of the GtkListBoxRow padding
2834
min-height: 32px;
2835
margin: -1px 0; // Remove unknown margins
2836
padding: 0;
2837
// Using margins/padding directly in the SidebarRow
2839
// will make the animation of the new bookmark row jump
2840
> revealer { padding: 0 12px; }
2841
&:selected { color: $inversed_fg_color; }
2843
&:disabled { color: $disabled_fg_color; }
2845
image.sidebar-icon {
2847
opacity: $hint_opacity; // dim the device icons
2848
&:dir(ltr) { padding-right: 8px; }
2850
&:dir(rtl) { padding-left: 8px; }
2851
}
2852
label.sidebar-label {
2854
&:dir(ltr) { padding-right: 2px; }
2855
&:dir(rtl) { padding-left: 2px; }
2856
}
2857
@at-root button.sidebar-button {
2859
@extend %simple_flat_button;
2860
@extend %small_button;
2862
row:selected & {
2864
}
2865
}
2866
&.sidebar-placeholder-row {
2868
min-height: 2px;
2869
padding: 0 8px;
2870
background-image: image($accent_color);
2871
background-clip: content-box;
2872
}
2873
&.sidebar-new-bookmark-row { color: $accent_color; }
2875
&:drop(active):not(:disabled) {
2877
box-shadow: inset 0 0 0 2px $accent_color;
2878
&:selected {
2880
// background-color: $accent_color;
2881
// color: $inversed_fg_color;
2882
}
2883
}
2884
}
2885
}
2886
placesview {
2888
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2889
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2891
// this selects the "connect to server" label
2893
> actionbar > revealer > box > label {
2894
padding-left: 8px;
2895
padding-right: 8px;
2896
}
2897
}
2898
/*********
2901
* Paned *
2902
*********/
2903
paned {
2904
> separator {
2905
min-width: 1px;
2906
min-height: 1px;
2907
-gtk-icon-source: none; // defeats the ugly default handle decoration
2908
border-style: none; // just to be sure
2909
background-color: transparent;
2910
// workaround, using background istead of a border since the border will get rendered twice (?)
2911
background-image: image($borders_color);
2912
background-size: 1px 1px;
2913
&.wide {
2915
min-width: 6px;
2916
min-height: 6px;
2917
background-color: $bg_color;
2918
background-image: image($borders_color), image($borders_color);
2919
background-size: 1px 1px, 1px 1px;
2920
}
2921
}
2922
&.horizontal > separator {
2924
background-repeat: repeat-y;
2925
&:dir(ltr) {
2927
margin: 0 -8px 0 0;
2928
padding: 0 8px 0 0;
2929
background-position: left;
2930
}
2931
&:dir(rtl) {
2933
margin: 0 0 0 -8px;
2934
padding: 0 0 0 8px;
2935
background-position: right;
2936
}
2937
&.wide {
2939
margin: 0;
2940
padding: 0;
2941
background-repeat: repeat-y, repeat-y;
2942
background-position: left, right;
2943
}
2944
}
2945
&.vertical > separator {
2947
margin: 0 0 -8px 0;
2948
padding: 0 0 8px 0;
2949
background-repeat: repeat-x;
2950
background-position: top;
2951
&.wide {
2953
margin: 0;
2954
padding: 0;
2955
background-repeat: repeat-x, repeat-x;
2956
background-position: bottom, top;
2957
}
2958
}
2959
}
2960
/**************
2963
* GtkInfoBar *
2964
**************/
2965
infobar {
2966
border-style: none;
2967
&.info { background-color: $info_bg_color; }
2969
&.question { background-color: $question_bg_color; }
2971
&.warning { background-color: $warning_bg_color; }
2973
&.error { background-color: $error_bg_color; }
2975
&.info,
2977
&.question,
2978
&.warning,
2979
&.error {
2980
> label, & { color: $inversed_fg_color; }
2981
button { @extend %button_selected; }
2983
selection {}
2985
*:link { @extend %link_selected; }
2987
}
2988
}
2989
/************
2992
* Tooltips *
2993
************/
2994
tooltip {
2995
&.background {
2996
// background-color needs to be set this way otherwise it gets drawn twice
2997
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2998
box-shadow: inset 0 1px $highlight_color;
2999
background-color: scale-alpha($base_color, $higher_opacity);
3000
}
3001
// @extend %osd;
3003
// padding: 4px; /* not working */
3005
border-radius: 2px;
3006
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3007
&:not(.csd) {
3009
border: 1px solid $borders_color;
3010
border-radius: 2px + 1px;
3011
background-clip: $extra_background_clip;
3012
}
3013
// FIXME: we need a border or tooltips vanish on black background.
3015
decoration { background-color: transparent; }
3016
label {
3018
// tooltip label has already 6px margins
3019
min-height: 32px - 6px * 2;
3020
padding: 0 8px - 6px;
3021
}
3022
* {
3024
// workaround for Eclipse.
3025
// do not include any declaration here.
3026
// padding: 0;
3027
// background-color: transparent;
3028
// color: inherit;
3029
}
3030
}
3031
/*****************
3034
* Color Chooser *
3035
*****************/
3036
colorswatch {
3037
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3038
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3039
// applied to the overlay box.
3040
// base color corners rounding
3042
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3043
// sports a bigger radius.
3044
// nth-child is needed by the custom color strip.
3045
&.top {
3047
border-top-left-radius: $md_radius + 0.5px;
3048
border-top-right-radius: $md_radius + 0.5px;
3049
overlay {
3051
border-top-left-radius: $md_radius;
3052
border-top-right-radius: $md_radius;
3053
}
3054
}
3055
&.bottom {
3057
border-bottom-left-radius: $md_radius + 0.5px;
3058
border-bottom-right-radius: $md_radius + 0.5px;
3059
overlay {
3061
border-bottom-left-radius: $md_radius;
3062
border-bottom-right-radius: $md_radius;
3063
}
3064
}
3065
&.left,
3067
&:first-child:not(.top) {
3068
border-top-left-radius: $md_radius + 0.5px;
3069
border-bottom-left-radius: $md_radius + 0.5px;
3070
overlay {
3072
border-top-left-radius: $md_radius;
3073
border-bottom-left-radius: $md_radius;
3074
}
3075
}
3076
&.right,
3078
&:last-child:not(.bottom) {
3079
border-top-right-radius: $md_radius + 0.5px;
3080
border-bottom-right-radius: $md_radius + 0.5px;
3081
overlay {
3083
border-top-right-radius: $md_radius;
3084
border-bottom-right-radius: $md_radius;
3085
}
3086
}
3087
&.dark overlay { color: $dark_contrast_color; }
3089
&.light overlay { color: $light_contrast_color; }
3091
&.dark { color: $dark_contrast_color; } // for focus ring
3093
&.light { color: $light_contrast_color; } // for focus ring
3095
&:drop(active) {
3097
box-shadow: none;
3098
&.light overlay {
3100
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3101
}
3102
&.dark overlay {
3104
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3105
}
3106
}
3107
overlay {
3109
transition: $shadow_transition;
3110
box-shadow: $z-depth-1;
3111
&:hover { box-shadow: $z-depth-2; }
3113
}
3114
&#add-color-button {
3116
border-radius: $md_radius $md_radius 0 0;
3117
color: $dark_contrast_color; // for focus ring
3118
&:only-child { border-radius: $md_radius; }
3120
overlay {
3122
background-image: linear-gradient(to right,
3123
$error_bg_color 25%,
3124
$warning_bg_color 25%, $warning_bg_color 50%,
3125
$info_bg_color 50%, $info_bg_color 75%,
3126
$question_bg_color 75%);
3127
color: $dark_contrast_color;
3128
}
3129
}
3130
&:disabled {
3132
opacity: $disabled_opacity;
3133
overlay { box-shadow: none; }
3135
}
3136
row:selected & {
3138
}
3139
&#editor-color-sample {
3141
border-radius: $md_radius + 0.5px;
3142
overlay { border-radius: $md_radius; }
3144
// overlay:hover { box-shadow: $z-depth-1; }
3146
}
3147
}
3148
// colorscale popup
3150
colorchooser .popover.osd {
3151
transition: $shadow_transition;
3152
border-radius: 2px;
3153
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
3154
background-color: $base_color;
3155
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
3157
spinbutton:not(.vertical) { @extend %entry.flat; }
3159
}
3160
/********
3163
* Misc *
3164
********/
3165
//content view (grid/list)
3166
.content-view {
3167
background-color: $bg_color;
3168
// &:hover { -gtk-icon-effect: highlight; }
3170
rubberband { @extend rubberband; }
3172
}
3173
.scale-popup {
3175
.osd & { @extend %osd; }
3176
.osd & button.flat { //FIXME: quick hack, redo properly
3178
}
3179
button { // +/- buttons on GtkVolumeButton popup
3181
}
3182
}
3183
/**********************
3186
* Window Decorations *
3187
*********************/
3188
decoration {
3189
transition: $shadow_transition;
3190
border-radius: 2px 2px 0 0;
3191
box-shadow: $z-depth-4, 0 16px 16px transparent;
3192
// FIXME rationalize shadows
3194
// this is used for the resize cursor area
3196
margin: 8px;
3197
&:backdrop {
3199
// the transparent shadow here is to enforce that the shadow extents don't
3200
// change when we go to backdrop, to prevent jumping windows.
3201
// The biggest shadow should be in the same order then in the active state
3202
// or the jumping will happen during the transition.
3203
box-shadow: $z-depth-2, 0 16px 16px transparent;
3204
}
3205
.maximized &,
3207
.fullscreen &,
3208
.tiled & { border-radius: 0; }
3209
.popup & { box-shadow: none; }
3211
// server-side decorations as used by mutter
3213
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3214
.csd.popup & {
3216
border-radius: 2px;
3217
box-shadow: $z-depth-2;
3218
}
3219
tooltip.csd & {
3221
border-radius: 2px;
3222
box-shadow: $z-depth-2;
3223
}
3224
messagedialog.csd & {
3226
border-radius: 2px;
3227
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3228
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3230
}
3231
.solid-csd & {
3233
margin: 0;
3234
padding: 4px;
3235
// border: solid 1px $borders_color;
3236
// border-radius: 0;
3237
box-shadow: inset 0 0 0 4px $headerbar_color;
3238
// background-color: $borders_color;
3239
}
3240
}
3241
// Window Close button
3243
button.titlebutton {
3244
// @extend %simple_flat_button;
3245
@extend %circular_button;
3247
.selection-mode & {
3249
}
3250
}
3251
// catch all extend :)
3254
%selected_items {
3256
background-color: $primary_color;
3257
@at-root %nobg_selected_items, & {
3259
color: $inversed_fg_color;
3260
&:disabled { color: $disabled_inversed_fg_color; }
3262
}
3263
}
3264
.monospace { font-family: monospace; }
3266
/**********************
3269
* Touch Copy & Paste *
3270
*********************/
3271
//touch selection handlebars for the Popover.osd above
3272
cursor-handle {
3273
border-radius: $circular_radius;
3274
background-color: $accent_color;
3275
background-image: none;
3276
&.top:dir(ltr), &.bottom:dir(rtl) {
3278
padding-left: 6px;
3279
border-top-right-radius: 0;
3280
}
3281
&.bottom:dir(ltr), &.top:dir(rtl) {
3283
padding-right: 6px;
3284
border-top-left-radius: 0;
3285
}
3286
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3288
-GtkWidget-text-handle-width: 24;
3289
-GtkWidget-text-handle-height: 30;
3290
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3292
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3293
url('#{$_url}@2.png'));
3294
}
3295
}
3296
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3298
%circular_button,
3300
button.close,
3301
button.circular { // FIXME: aggregate to buttons
3302
border-radius: $circular_radius;
3303
-gtk-outline-radius: $circular_radius;
3304
// label { padding: 0; }
3306
}
3307
%small_button {
3309
min-height: $small_size;
3310
min-width: $small_size;
3311
padding: 0;
3312
border-radius: $circular_radius;
3313
-gtk-outline-radius: $circular_radius;
3314
}
3315
// shortcut window keys
3317
.keycap {
3318
min-width: 28px - 8px * 2;
3319
min-height: 28px - 2px;
3320
margin-top: 2px;
3321
padding-bottom: 2px;
3322
padding-left: 8px;
3323
padding-right: 8px;
3324
border: solid 1px $borders_color;
3326
border-radius: 2px + 1px;
3327
box-shadow: inset 0 -2px $borders_color;
3328
background-color: $base_color;
3329
color: $fg_color;
3330
font-size: smaller;
3331
}
3332
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3334
transition: $longer_transition;
3335
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_color;
3336
caret-color: $accent_color;
3337
}
3338
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3340
stackswitcher button.circular,
3342
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3343
min-width: $medium_size;
3344
min-height: $medium_size;
3345
padding: 0;
3346
}
3347