ASCII text
1
$asset_suffix: if($variant=='dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
$small_size: if($laptop == 'true', 20px, 24px);
5
$medium_size: if($laptop == 'true', 32px, 36px);
6
$large_size: if($laptop == 'true', 44px, 48px);
7
$container_padding: 6px;
9
$bar_size: 4px;
11
$menuitem_size: 28px;
12
$md_radius: 2px;
14
$circular_radius: 9999px;
15
$shorter_duration: 0.2s;
17
$longer_duration: 0.3s;
18
$ripple_duration: 0.5s;
19
$standard_curve: cubic-bezier(0.4, 0.0, 0.2, 1);
21
$deceleration_curve: cubic-bezier(0.0, 0.0, 0.2, 1);
22
$acceleration_curve: cubic-bezier(0.4, 0.0, 1, 1);
23
$sharp_curve: cubic-bezier(0.4, 0.0, 0.6, 1);
24
$shorter_transition: all $shorter_duration $deceleration_curve;
26
$longer_transition: all $longer_duration $deceleration_curve;
27
$shadow_transition: box-shadow $shorter_duration $deceleration_curve;
28
* {
30
padding: 0;
31
background-clip: padding-box;
32
-GtkToolButton-icon-spacing: 4;
34
-GtkTextView-error-underline-color: $error_color;
35
// The size for scrollbars. The slider is 2px smaller, but we keep it
37
// up so that the whole area is sensitive to button presses for the
38
// slider. The stepper button is larger in both directions, the slider
39
// only in the width
40
-GtkScrolledWindow-scrollbar-spacing: 0;
42
-GtkToolItemGroup-expander-size: 11;
44
-GtkWidget-text-handle-width: 24;
46
-GtkWidget-text-handle-height: 24;
47
-GtkDialog-button-spacing: 4;
49
-GtkDialog-action-area-border: 0;
50
// We use the outline properties to signal the focus properties
52
// to the adwaita engine: using real CSS properties is faster,
53
// and we don't use any outlines for now.
54
outline-style: solid;
56
outline-width: 2px;
57
outline-color: $track_color;
58
outline-offset: -4px;
59
-gtk-outline-radius: 2px;
60
-gtk-secondary-caret-color: $primary_color;
62
}
63
/***************
66
* Base States *
67
***************/
68
.background {
69
background-color: $bg_color;
70
color: $fg_color;
71
}
72
/*
74
These wildcard seems unavoidable, need to investigate.
75
Wildcards are bad and troublesome, use them with care,
76
or better, just don't.
77
Everytime a wildcard is used a kitten dies, painfully.
78
*/
79
*:disabled { -gtk-icon-effect: dim; }
81
.gtkstyle-fallback {
83
background-color: $bg_color;
84
color: $fg_color;
85
&:hover {
87
background-color: darken($bg_color, 5%);
88
color: $fg_color;
89
}
90
&:active {
92
background-color: darken($bg_color, 10%);
93
color: $fg_color;
94
}
95
&:disabled {
97
background-color: $bg_color;
98
color: $disabled_fg_color;
99
}
100
&:selected {
102
background-color: $primary_color;
103
color: $inversed_fg_color;
104
}
105
}
106
.view,
108
%view {
109
@extend row.activatable;
110
background-color: $base_color;
112
color: $fg_color;
113
&:hover, &:active, &:selected { border-radius: 2px; }
115
&:disabled {
117
// background-color: $alt_base_color;
118
color: $disabled_fg_color;
119
}
120
&:selected { @extend %selected_items; }
122
}
123
.view,
125
textview {
126
text {
127
// @extend %view;
128
background-color: $base_color;
130
color: $fg_color;
131
&:disabled {
133
// background-color: $alt_base_color;
134
color: $disabled_fg_color;
135
}
136
selection { @extend %selected_items; }
138
}
139
}
140
textview border {
142
background-color: $alt_base_color;
143
color: $tertiary_fg_color;
144
}
145
iconview { @extend .view; }
147
.rubberband,
149
rubberband {
150
border: 1px solid $alt_primary_color;
151
background-color: scale-alpha($alt_primary_color, $lower_opacity);
152
}
153
flowbox {
155
rubberband { @extend rubberband; }
156
flowboxchild {
158
outline-offset: -2px;
159
padding: 4px;
160
border-radius: 2px;
161
&:selected { @extend %selected_items; }
163
}
164
}
165
label {
167
caret-color: currentColor; // this shouldn't be needed.
168
&.separator {
170
@extend .dim-label;
171
color: $fg_color;
173
}
174
row:selected &,
176
&:selected { @extend %nobg_selected_items; }
177
selection {
179
background-color: $primary_color;
180
color: $inversed_fg_color;
181
}
182
&:disabled {
184
color: $disabled_fg_color;
185
selection { @extend %selected_items:disabled; }
187
tab &,
189
button &,
190
menuitem & { color: inherit; }
191
}
192
}
193
.dim-label { opacity: $hint_opacity; }
195
assistant {
197
.sidebar {
198
padding: 4px 0;
199
// background-color: $base_color;
200
// border-top: 1px solid $borders_color;
201
}
202
// &.csd .sidebar { border-top-style: none; }
204
.sidebar label {
206
min-height: $medium_size;
207
padding: 0 12px;
208
color: $tertiary_fg_color;
209
font-weight: 500;
210
&.highlight { color: $fg_color; }
212
}
213
}
214
%osd, .osd { opacity: $higher_opacity; }
216
/*********************
219
* Spinner Animation *
220
*********************/
221
@keyframes spin {
222
to { -gtk-icon-transform: rotate(1turn); }
223
}
224
@keyframes spin_colors {
226
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
227
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
228
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
229
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
230
}
231
spinner {
233
background: none;
234
opacity: 0; // non spinning spinner makes no sense
235
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
236
&:checked {
238
opacity: 1;
239
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
240
&:disabled { opacity: $disabled_opacity; }
242
}
243
}
244
/****************
247
* Text Entries *
248
****************/
249
%entry,
250
entry {
251
%entry_basic, & {
252
min-height: $medium_size;
253
padding: 0 8px;
254
border-radius: 2px;
255
@include entry(normal);
257
&:focus { @include entry(focus); }
259
&:disabled { @include entry(disabled); }
261
&.flat {
263
border-radius: 0;
264
@include entry(flat-normal);
266
&:focus { @include entry(flat-focus); }
268
&:disabled { @include entry(flat-disabled); }
270
}
271
image { // icons inside the entry
273
// @extend %simple_flat_button;
274
min-height: $small_size;
276
min-width: $small_size;
277
border-radius: $circular_radius;
278
-gtk-outline-radius: $circular_radius;
279
color: gtkalpha(currentColor, $enabled_opacity);
280
&:hover, &:active { color: currentColor; }
282
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
284
&.left { margin-left: -2px; margin-right: 2px; }
286
&.right { margin-left: 2px; margin-right: -2px; }
288
}
289
undershoot {
291
&.left { @include undershoot(left); }
292
&.right { @include undershoot(right); }
294
}
295
selection { @extend %selected_items; }
297
// entry error and warning style
299
@each $e_type, $e_color in (error, $error_color),
300
(warning, $warning_color) {
301
&.#{$e_type} {
302
@include entry(normal, $e_color);
303
&:focus { @include entry(focus, $e_color); }
305
&:disabled { @include entry(disabled, $e_color); }
307
&.flat {
309
@include entry(flat-normal, $e_color);
310
&:focus { @include entry(flat-focus, $e_color); }
312
&:disabled { @include entry(flat-disabled, $e_color); }
314
}
315
}
316
}
317
&:drop(active) {
319
// box-shadow: inset 0 0 0 2px $accent_color;
320
}
321
.osd & {
323
}
324
}
325
progress {
327
margin: 2px (2px - 8px);
328
border-style: none none solid;
329
border-width: 2px;
330
border-color: $primary_color;
331
// border-radius: 0;
332
// box-shadow: none;
333
background-color: transparent;
334
// background-image: none;
335
}
336
// linked entries
338
.linked:not(.vertical) > & { @extend %linked; }
339
// Vertically linked entries
341
.linked.vertical > & { @extend %linked_vertical; }
342
.linked:not(.vertical) > &.flat,
344
.linked.vertical > &.flat { border-radius: 0; }
345
}
346
treeview entry {
348
&.flat, & {
349
min-height: 0;
350
padding: 2px;
351
border-radius: 0;
352
background-color: $base_color;
353
&, &:focus {
355
border-image: none;
356
box-shadow: none;
357
}
358
}
359
}
360
/***********
363
* Buttons *
364
***********/
365
// stuff for .needs-attention
366
@keyframes needs_attention {
367
from {
368
background-image: -gtk-gradient(radial,
369
center center, 0,
370
center center, 0.001,
371
to($accent_color),
372
to(transparent));
373
}
374
to {
376
background-image: -gtk-gradient(radial,
377
center center, 0,
378
center center, 0.5,
379
to($accent_color),
380
to(transparent));
381
}
382
}
383
%button,
385
button {
386
@at-root %button_basic, & {
387
min-height: 24px;
388
min-width: 16px;
389
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
390
border-radius: 2px;
391
font-weight: 500;
392
@include button(normal);
394
&:hover { @include button(hover); }
396
&:active { @include button(active); }
398
&:disabled { @include button(disabled); }
400
&:checked { @include button(checked); }
402
&:checked:disabled { @include button(checked-disabled); }
404
@at-root %flat_button, &.flat {
406
@at-root %simple_flat_button, & {
407
@include button(flat-normal);
408
&:hover { @include button(flat-hover); }
410
&:active { @include button(flat-active); }
412
&:disabled { @include button(flat-disabled); }
414
}
415
&:checked { @include button(flat-checked); }
417
&:checked:disabled { @include button(flat-checked-disabled); }
419
}
420
&.text-button {
422
padding-left: 16px;
423
padding-right: 16px;
424
}
425
&.image-button {
427
min-width: 24px;
428
padding: ($medium_size - 24px) / 2;
429
border-radius: $circular_radius;
430
-gtk-outline-radius: $circular_radius;
431
}
432
&.text-button.image-button {
434
border-radius: 2px;
435
-gtk-outline-radius: 2px;
436
label {
438
&:first-child {
439
margin-left: 16px - ($medium_size - 24px) / 2;
440
margin-right: 2px;
441
}
442
&:last-child {
444
margin-left: 2px;
445
margin-right: 16px - ($medium_size - 24px) / 2;
446
}
447
&:only-child {
449
margin-left: 16px - ($medium_size - 24px) / 2;
450
margin-right: 16px - ($medium_size - 24px) / 2;
451
}
452
}
453
image:not(:only-child) {
455
&:first-child { margin-left: (24px - 16px) / 2; }
456
&:last-child { margin-right: (24px - 16px) / 2; }
458
}
459
}
460
.linked > & { @extend %linked; }
462
.linked.vertical > & { @extend %linked_vertical; }
464
.linked > &.flat,
466
.linked.vertical > &.flat {
467
border-radius: 2px;
468
&.image-button {
470
border-radius: $circular_radius;
471
-gtk-outline-radius: $circular_radius;
472
}
473
&.text-button.image-button {
475
border-radius: 2px;
476
-gtk-outline-radius: 2px;
477
}
478
}
479
&:drop(active) {
481
// box-shadow: inset 0 0 0 2px $accent_color;
482
}
483
}
484
@at-root %button_selected, row:selected & {
486
&:disabled { color: $disabled_secondary_inversed_fg_color; }
487
}
488
// big standalone buttons like in Documents pager
490
&.osd {
491
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
492
&.image-button { padding: ($large_size - 24px) / 2; }
494
&:disabled { opacity: 0; }
496
}
497
//overlay / OSD style
499
@at-root %osd_button,
500
.osd & {
501
}
502
// Suggested and Destructive Action buttons
504
@each $b_type, $b_color in (suggested-action, $suggested_color),
505
(destructive-action, $destructive_color) {
506
&.#{$b_type} {
507
background-color: $b_color;
508
color: $inversed_fg_color;
509
// @include button(normal, $b_color, $inversed_fg_color);
511
// &:hover { @include button(hover, $b_color, $inversed_fg_color); }
513
// &:active, &:checked { @include button(active, $b_color, $inversed_fg_color); }
515
&:disabled { @include button(disabled, $b_color, $inversed_fg_color); }
517
&:checked { background-color: mix($inversed_fg_color, $b_color, percentage($lower_opacity)); }
519
&.flat {
521
background-color: transparent;
522
color: $b_color;
523
// @include button(flat-normal, $b_color, $inversed_fg_color);
525
// &:hover { @include button(flat-hover, $b_color, $inversed_fg_color); }
527
// &:active, &:checked { @include button(flat-active, $b_color, $inversed_fg_color); }
529
&:disabled { @include button(flat-disabled, $b_color, $inversed_fg_color); }
531
}
532
.osd & {
534
}
535
}
536
}
537
.stack-switcher > & {
539
// to position the needs attention dot, padding is added to the button
540
// child, a label needs just lateral padding while an icon needs vertical
541
// padding added too.
542
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
544
> label {
546
padding-left: 6px; // label padding
547
padding-right: 6px; //
548
}
549
> image {
551
padding-left: 6px; // image padding
552
padding-right: 6px; //
553
padding-top: 3px; //
554
padding-bottom: 3px; //
555
}
556
&.text-button {
558
// compensate text-button paddings
559
padding-left: 16px - 6px;
560
padding-right: 16px - 6px;
561
}
562
&.image-button {
564
// we want image buttons to have a 1:1 aspect ratio, so compensation
565
// of the padding added to the GtkImage is needed
566
padding-left: ($medium_size - 16px) / 2 - 6px;
567
padding-right: ($medium_size - 16px) / 2 - 6px;
568
}
569
&.needs-attention {
571
> label,
572
> image { @extend %needs_attention; }
573
&:checked {
575
> label,
576
> image {
577
animation: none;
578
background-image: none;
579
}
580
}
581
}
582
}
583
// hide separators
585
separator {
586
min-width: 0;
587
min-height: 0;
588
background: transparent;
589
}
590
// &.font,
592
// &.file { separator { background-color: transparent; }}
593
// &.font { > box > box > label { font-weight: bold; }}
595
// inline-toolbar buttons
597
.inline-toolbar & {
598
// @extend %button_basic.flat;
599
&:not(.text-button) { @extend %circular_button; }
601
}
602
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
604
}
605
%needs_attention {
607
animation: needs_attention $longer_duration $deceleration_curve forwards;
608
background-repeat: no-repeat;
609
background-position: right 3px;
610
background-size: 6px 6px;
611
&:dir(rtl) { background-position: left 3px; }
613
}
614
// all the following is for the +|- buttons on inline toolbars, that way
616
// should really be deprecated...
617
.inline-toolbar toolbutton > button { // redefining the button look is
618
// needed since those are flat...
619
}
620
// More inline toolbar buttons
622
toolbar.inline-toolbar toolbutton {
623
// > button.flat { @extend %linked_middle; }
624
// &:first-child > button.flat { @extend %linked:first-child; }
626
// &:last-child > button.flat { @extend %linked:last-child; }
628
// &:only-child > button.flat { @extend %linked:only-child; }
630
}
631
%linked_middle {
633
border-radius: 0;
634
-gtk-outline-radius: 2px;
635
}
636
%linked {
638
@extend %linked_middle;
639
&:first-child {
641
border-top-left-radius: 2px;
642
border-bottom-left-radius: 2px;
643
}
644
&:last-child {
646
border-top-right-radius: 2px;
647
border-bottom-right-radius: 2px;
648
}
649
&:only-child {
651
border-radius: 2px;
652
}
653
}
654
%linked_vertical_middle {
656
border-radius: 0;
657
-gtk-outline-radius: 2px;
658
}
659
%linked_vertical{
661
@extend %linked_vertical_middle;
662
&:first-child {
664
border-top-left-radius: 2px;
665
border-top-right-radius: 2px;
666
}
667
&:last-child {
669
border-bottom-left-radius: 2px;
670
border-bottom-right-radius: 2px;
671
}
672
&:only-child {
674
border-radius: 2px;
675
}
676
}
677
/* menu buttons */
679
modelbutton.flat,
680
.menuitem.button.flat {
681
min-height: $menuitem_size;
682
padding: 0 8px;
683
border-radius: 2px;
684
color: inherit;
685
@extend %simple_flat_button;
687
&:selected { @extend %selected_items; }
689
check,
691
radio {
692
box-shadow: none;
693
background-image: none;
694
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
696
&:last-child { margin-left: -8px; margin-right: -16px; }
698
&:first-child { margin-left: -16px; margin-right: -8px; }
700
}
701
check:not(:indeterminate):checked { @extend %check_checked; }
703
// radio:not(:indeterminate):checked { @extend %radio_checked; }
705
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
707
}
708
modelbutton.flat arrow {
710
background: none;
711
&:hover { background: none; }
713
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
715
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
717
}
718
button.color {
720
min-height: $small_size;
721
min-width: $small_size;
722
padding: $container_padding;
723
colorswatch:only-child {
725
// &, overlay { border-radius: 0; }
726
}
727
}
728
/*********
731
* Links *
732
*********/
733
*:link {
734
&, &:hover, &:active { color: $link_color; }
735
&:visited {
737
&, &:hover, &:active { color: $link_visited_color; }
738
}
739
@at-root %link_selected,
741
&:selected,
742
*:selected & { color: $inversed_fg_color; }
743
}
744
button:link,
746
button:visited {
747
@extend *:link;
748
> label { text-decoration-line: underline; }
750
}
751
/*****************
753
* GtkSpinButton *
754
*****************/
755
spinbutton {
756
&:not(.vertical) {
757
// in this horizontal configuration, the whole spinbutton
758
// behaves as the entry, so we extend the entry styling
759
// and nuke the style on the internal entry
760
@extend %entry;
761
padding: 0;
763
%spinbutton_entry,
765
entry {
766
min-width: $large_size - 8px * 2;
767
// reset all the other props since the spinbutton node is styled here
768
margin: 0;
769
border-image: none;
770
border-radius: 0;
771
box-shadow: none;
772
background-color: transparent;
773
//
774
// This will help to simplify spinbutton's code, but unfortunatelly
775
// doesn't work properly in :dir(rtl). It needs z-index property.
776
//
777
// min-width: $large_size - 8px;
778
//
779
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
780
//
781
// &:dir(ltr) {
782
// margin-right: -$spinbuttons_width;
783
// padding-right: $spinbuttons_width;
784
// }
785
//
786
// &:dir(rtl) {
787
// margin-left: -$spinbuttons_width;
788
// padding-left: $spinbuttons_width;
789
// }
790
}
791
button {
793
// margin: $container_padding;
794
border: solid $container_padding transparent;
795
@extend %simple_flat_button;
797
@extend %small_button;
799
&.up:dir(ltr),
801
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
802
&.up:dir(rtl),
804
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
805
}
806
}
807
// OSD horizontal
809
.osd &:not(.vertical) {
810
button {
811
}
812
}
813
// Vertical
815
&.vertical {
816
// in the vertical configuration, we treat the spinbutton
817
// as a box, and tweak the style of the entry in the middle
818
// so that it's linked
819
// FIXME: this should not be set at all, but otherwise it gets the wrong
821
// color
822
&:disabled { color: $disabled_fg_color; }
823
&:drop(active) {
825
box-shadow: none;
826
}
827
entry {
829
min-height: $medium_size;
830
min-width: $large_size;
831
padding: 0;
832
}
833
button {
835
min-height: $medium_size;
836
min-width: $large_size;
837
padding: 0;
838
@extend %simple_flat_button;
840
&.up { border-radius: 2px 2px 0 0; }
842
&.down { border-radius: 0 0 2px 2px; }
844
}
845
}
846
// OSD vertical
848
.osd &.vertical button:first-child {
849
}
850
// Misc
852
treeview &:not(.vertical) {
853
min-height: 0;
854
border-style: none;
855
border-radius: 0;
856
entry {
858
min-height: 0;
859
padding: 1px 2px;
860
}
861
}
862
}
863
/**************
866
* ComboBoxes *
867
**************/
868
combobox {
869
arrow {
870
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
871
min-height: 16px;
872
min-width: 16px;
873
}
874
button.combo:checked { transition: none; } // workaround for menuitem selection
876
button.combo cellview {
878
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
879
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
880
}
881
#gtk-combobox-popup-menu {
883
padding: 2px 0;
884
menuitem {
886
min-height: $medium_size - 2px * 2;
887
padding: 0 8px;
888
}
889
}
890
&.linked {
892
button:nth-child(2) {
893
&:dir(ltr) { @extend %linked:last-child; }
894
&:dir(rtl) { @extend %linked:first-child; }
895
}
896
}
897
&:drop(active) { // FIXME: untested
899
box-shadow: none;
900
// button.combo { @extend %button_basic:drop(active); }
902
}
903
}
904
.linked > combobox > box > button.combo {
906
// the combo is a composite widget so the way we do button linking doesn't
907
// work, special case needed. See
908
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
909
&:dir(ltr),
911
&:dir(rtl) { @extend %linked_middle; } // specificity bump
912
}
913
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
915
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
916
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
917
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
919
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
920
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
921
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
922
%combo_flat {
924
border-radius: 0;
925
background-image: none;
926
font-weight: inherit;
927
@include entry(flat-normal);
929
&:hover { box-shadow: inset 0 -2px $track_color; }
931
&:checked {
933
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
934
$primary_color 100%,
935
transparent 0%)
936
0 0 2 / 0 0 2px;
937
}
938
&:disabled { color: $disabled_fg_color; }
940
}
941
/************
944
* Toolbars *
945
************/
946
toolbar {
947
-GtkWidget-window-dragging: true;
948
padding: $container_padding / 2;
949
background-color: $bg_color;
950
button { @extend %button_basic.flat; }
952
// on OSD
954
.osd & { background-color: transparent; }
955
// stand-alone OSD toolbars
957
&.osd {
958
transition: $shadow_transition;
959
padding: $container_padding;
960
border-radius: 2px;
961
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
962
background-color: $base_color;
963
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
965
&.left,
967
&.right,
968
&.top,
969
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
970
}
971
// toolbar separators
973
&.horizontal separator { margin: $container_padding / 2; }
974
&.vertical separator { margin: $container_padding / 2; }
975
&:not(.inline-toolbar):not(.osd) {
977
scale,
978
entry,
979
spinbutton,
980
button { margin: $container_padding / 2; }
981
.linked entry,
983
.linked spinbutton,
984
.linked button {
985
&:not(:first-child) { margin-left: 0; }
986
&:not(:last-child) { margin-right: 0; }
987
}
988
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
990
}
991
}
992
//searchbar, location-bar & inline-toolbar
994
.inline-toolbar {
995
padding: $container_padding;
996
border-style: solid;
997
border-width: 0 1px 1px;
998
border-color: $borders_color;
999
background-color: $alt_base_color;
1000
}
1001
searchbar,
1003
.location-bar {
1004
padding: $container_padding;
1005
border-style: solid;
1006
border-width: 0 0 1px;
1007
border-color: $borders_color;
1008
background-color: $bg_color;
1009
background-clip: border-box;
1010
}
1011
/***************
1014
* Header bars *
1015
***************/
1016
%titlebar,
1017
headerbar {
1018
transition: background-color $shorter_duration $deceleration_curve;
1019
min-height: $large_size;
1020
padding: 0 $container_padding;
1021
box-shadow: $z-depth-1, inset 0 1px $topbar_highlight_color;
1022
background-color: $headerbar_color;
1023
color: $topbar_fg_color;
1024
&:disabled :not(button) > label { color: $disabled_topbar_fg_color; }
1026
&:backdrop {
1028
color: $secondary_topbar_fg_color;
1029
&:disabled :not(button) > label { color: $disabled_secondary_topbar_fg_color; }
1031
}
1032
.title {
1034
transition: $longer_transition;
1035
padding: 0 12px;
1036
font-weight: bold;
1037
}
1038
.subtitle {
1040
transition: $longer_transition;
1041
padding: 0 12px;
1042
font-size: smaller;
1043
@extend .dim-label;
1045
}
1046
button:not(.suggested-action):not(.destructive-action) {
1048
@extend %button_basic.flat;
1049
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1051
$topbar_indicator_color 0%,
1052
transparent 0%)
1053
0 0 0 / 0 0 0px;
1054
&:checked {
1056
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1057
$topbar_indicator_color 100%,
1058
transparent 0%)
1059
0 0 2 / 0 0 2px;
1060
&, &:disabled { background-color: transparent; }
1062
}
1063
}
1064
button.suggested-action, button.destructive-action {
1066
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1067
}
1068
&.selection-mode {
1070
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1071
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1072
transition: background-color 0.00001s $longer_duration;
1073
animation: header_ripple_effect $longer_duration $deceleration_curve;
1074
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1075
background-color: $primary_color;
1076
color: $inversed_fg_color;
1077
&:backdrop {
1079
color: $secondary_inversed_fg_color;
1080
}
1081
.subtitle:link { @extend *:link:selected; }
1083
button:not(.suggested-action):not(.destructive-action) {
1085
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1086
currentColor 0%,
1087
transparent 0%)
1088
0 0 0 / 0 0 0px;
1089
color: currentColor;
1090
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1092
&:checked {
1094
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1095
currentColor 100%,
1096
transparent 0%)
1097
0 0 2 / 0 0 2px;
1098
color: currentColor;
1099
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1101
}
1102
}
1103
.selection-menu {
1105
padding-left: 16px;
1106
padding-right: 16px;
1107
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1109
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1111
}
1112
}
1113
.fullscreen &,
1115
.tiled &,
1116
.maximized & {
1117
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1118
box-shadow: $z-depth-1;
1119
}
1120
&.default-decoration {
1122
min-height: $small_size;
1123
padding: $container_padding;
1124
box-shadow: inset 0 1px $topbar_highlight_color;
1125
.fullscreen &,
1127
.tiled &,
1128
.maximized & { box-shadow: none; }
1129
button.titlebutton {
1131
min-height: $small_size;
1132
min-width: $small_size;
1133
margin: 0;
1134
padding: 0;
1135
}
1136
}
1137
.solid-csd & {
1139
&:dir(rtl), &:dir(ltr) { // specificity bump
1140
margin-left: -2px;
1141
margin-right: -2px;
1142
margin-top: -2px;
1143
// border-radius: 0;
1144
box-shadow: inset 0 1px $topbar_highlight_color;
1145
}
1146
}
1147
}
1148
headerbar {
1150
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1151
entry,
1152
spinbutton,
1153
// separator,
1154
button {
1155
margin-top: $container_padding;
1156
margin-bottom: $container_padding;
1157
}
1158
switch {
1160
margin-top: $container_padding * 2;
1161
margin-bottom: $container_padding * 2;
1162
}
1163
}
1164
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1166
border-top-left-radius: 2px;
1167
border-top-right-radius: 2px;
1168
}
1169
headerbar {
1171
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1172
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1173
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1175
}
1176
.titlebar:not(headerbar) {
1178
window.csd > & {
1179
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1180
padding: 0;
1181
background-color: transparent;
1182
background-image: none;
1183
border-style: none;
1184
box-shadow: none;
1185
}
1186
> separator {
1188
background-color: $headerbar_color;
1189
background-image: image($borders_color);
1190
}
1191
@extend %titlebar;
1193
}
1194
/************
1197
* Pathbars *
1198
************/
1199
%pathbar_button,
1200
.path-bar button {
1201
padding-left: ($medium_size - 24px) / 2;
1202
padding-right: ($medium_size - 24px) / 2;
1203
label:not(:only-child) {
1205
&:first-child { margin-left: 4px; }
1206
&:last-child { margin-right: 4px; }
1208
}
1209
&.slider-button {
1211
padding-left: (24px - 16px) / 2;
1212
padding-right: (24px - 16px) / 2;
1213
}
1214
:not(headerbar) & {
1216
@extend %flat_button;
1217
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1219
$primary_color 0%,
1220
transparent 0%)
1221
0 0 0 / 0 0 0px;
1222
border-radius: 2px;
1223
&:checked {
1225
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1226
$primary_color 100%,
1227
transparent 0%)
1228
0 0 2 / 0 0 2px;
1229
&, &:disabled { background-color: transparent; }
1231
}
1232
}
1233
}
1234
/**************
1237
* Tree Views *
1238
**************/
1239
treeview.view {
1240
@at-root * {
1241
-GtkTreeView-horizontal-separator: 4;
1242
-GtkTreeView-grid-line-width: 1;
1243
-GtkTreeView-grid-line-pattern: '';
1244
-GtkTreeView-tree-line-width: 1;
1245
-GtkTreeView-tree-line-pattern: '';
1246
-GtkTreeView-expander-size: 16;
1247
}
1248
border-left-color: $track_color; // this is actually the tree lines color,
1250
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1251
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1253
&:hover, &:active, &:selected { border-radius: 0; }
1255
&.separator {
1257
min-height: 1px + 2px * 2;
1258
color: $borders_color;
1259
}
1260
&:drop(active) {
1262
border-style: solid none;
1263
border-width: 1px;
1264
border-color: $accent_color;
1265
&.after { border-top-style: none; }
1267
&.before { border-bottom-style: none; }
1269
}
1270
&.expander {
1272
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1273
-gtk-icon-transform: rotate(-90deg);
1274
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1276
&:checked { -gtk-icon-transform: unset; }
1278
color: $secondary_fg_color;
1280
&:hover, &:active { color: $fg_color; }
1282
&:disabled { color: $disabled_secondary_fg_color; }
1284
&:selected {
1286
color: $secondary_inversed_fg_color;
1287
&:hover, &:active { color: $inversed_fg_color; }
1289
&:disabled { color: $disabled_secondary_inversed_fg_color; }
1291
}
1292
}
1293
&.progressbar { // progress bar in treeviews
1295
border-style: none none solid;
1296
border-width: $bar_size;
1297
border-color: $primary_color;
1298
box-shadow: none;
1299
background-color: transparent;
1300
&:selected { border-color: currentColor; }
1302
}
1303
&.trough { // progress bar trough in treeviews
1305
border-style: none none solid;
1306
border-width: $bar_size;
1307
border-color: scale-alpha($primary_color, $lower_opacity);
1308
box-shadow: none;
1309
background-color: transparent;
1310
&:selected { border-color: $track_color; }
1312
}
1313
header {
1315
button {
1316
@extend row.activatable;
1317
padding: 2px 6px;
1319
border-style: none solid solid none;
1320
border-width: 1px;
1321
border-color: $borders_color;
1322
border-radius: 0;
1323
background-clip: border-box;
1324
&, &:hover, &:active { box-shadow: none; }
1326
&, &:disabled { background-color: $base_color; }
1328
&:last-child { border-right-style: none; }
1330
}
1331
}
1332
button.dnd,
1334
header.button.dnd { // for treeview-like derive widgets
1335
padding: 2px 6px;
1336
border-style: none solid solid;
1337
border-width: 1px;
1338
border-color: $borders_color;
1339
border-radius: 0;
1340
box-shadow: none;
1341
background-color: $base_color;
1342
background-clip: border-box;
1343
color: $primary_color;
1344
}
1345
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1347
}
1348
/*********
1351
* Menus *
1352
*********/
1353
menubar,
1354
.menubar {
1355
-GtkWidget-window-dragging: true;
1356
padding: 0;
1357
// box-shadow: inset 0 -1px $borders_color;
1358
background-color: $headerbar_color;
1359
> menuitem {
1361
transition: $shorter_transition;
1362
min-height: 20px;
1363
padding: 4px 8px;
1364
color: $secondary_topbar_fg_color;
1365
&:hover { //Seems like it :hover even with keyboard focus
1367
transition: none;
1368
background-color: $semi_track_color;
1369
color: $topbar_fg_color;
1370
}
1371
&:disabled { color: $disabled_secondary_topbar_fg_color; }
1373
}
1374
}
1375
.csd.popup { border-radius: 2px; }
1377
menu,
1379
.menu,
1380
.context-menu {
1381
margin: 4px 0;
1382
padding: 4px 0;
1383
box-shadow: inset 0 1px $highlight_color;
1384
background-color: $base_color;
1385
border: 1px solid $borders_color; // adds borders in a non composited env
1386
.csd & {
1388
border: none; // axes borders in a composited env
1389
border-radius: 2px;
1390
}
1391
menuitem {
1393
transition: $shorter_transition;
1394
min-height: 20px;
1395
min-width: 40px;
1396
padding: 4px 8px;
1397
font: initial;
1398
text-shadow: none;
1399
&:hover {
1401
transition: none;
1402
background-color: $semi_track_color;
1403
}
1404
&:disabled { color: $disabled_fg_color; }
1406
// submenu indicators
1408
arrow {
1409
min-height: 16px;
1410
min-width: 16px;
1411
&:dir(ltr) {
1413
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1414
margin-left: 8px;
1415
}
1416
&:dir(rtl) {
1418
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1419
margin-right: 8px;
1420
}
1421
}
1422
// avoids labels color being overridden, see
1424
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1425
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1426
}
1427
// overflow arrows
1429
> arrow {
1430
min-height: 16px;
1431
min-width: 16px;
1432
padding: 4px;
1433
border-radius: 0;
1434
background-color: $base_color;
1435
color: $secondary_fg_color;
1436
&.top {
1438
margin-top: -4px;
1439
border-bottom: 1px solid $borders_color;
1440
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1441
}
1442
&.bottom {
1444
margin-bottom: -4px;
1445
border-top: 1px solid $borders_color;
1446
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1447
}
1448
&:hover {
1450
background-image: image($semi_track_color);
1451
color: $fg_color;
1452
}
1453
&:disabled {
1455
border-color: transparent;
1456
background-color: transparent;
1457
color: transparent;
1458
// color: $disabled_secondary_fg_color;
1459
}
1460
}
1461
separator { margin: 4px 0; }
1463
}
1464
menuitem {
1466
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1467
check,
1469
radio {
1470
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1471
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1472
}
1473
}
1474
/***************
1477
* Popovers *
1478
***************/
1479
popover.background {
1480
transition: $shadow_transition;
1481
padding: 2px;
1482
box-shadow: $z-depth-2; // TODO: this should really have a highlight
1483
background-color: $lighter_bg_color;
1484
&:backdrop { box-shadow: $z-depth-1; }
1486
&, .csd & {
1488
border-style: solid;
1489
border-width: 1px;
1490
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1491
border-radius: 2px + 1px;
1492
}
1493
> stack { margin: -4px; } // remove extra padding from menu style popovers
1495
> toolbar { margin: -2px; }
1497
> list,
1499
> .view,
1500
> toolbar {
1501
border-style: none;
1502
box-shadow: none;
1503
background-color: transparent;
1504
}
1505
&.touch-selection,
1507
&.magnifier,
1508
&.osd { @extend %osd; }
1509
// entry { @extend %entry.flat; }
1511
// button.combo { @extend %combo_flat; }
1513
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1515
&.menu button,
1517
button.model {
1518
@extend %simple_flat_button;
1519
min-height: 32px;
1521
padding: 0 8px;
1522
border-radius: 2px;
1523
&:checked { @extend %selected_items; }
1525
}
1526
separator { margin: 4px 0; }
1528
list separator { margin: 0; }
1530
}
1531
/*************
1533
* Notebooks *
1534
*************/
1535
notebook {
1536
> header {
1537
border-width: 1px;
1538
border-color: $borders_color;
1539
background-color: $bg_color;
1540
background-clip: border-box;
1541
&.top {
1543
border-bottom-style: solid;
1544
> tabs {
1545
margin-bottom: -1px;
1546
> tab {
1547
&:hover { box-shadow: inset 0 -2px $track_color; }
1549
&:checked { box-shadow: inset 0 -2px $primary_color; }
1551
}
1552
}
1553
}
1554
&.bottom {
1556
border-top-style: solid;
1557
> tabs {
1558
margin-top: -1px;
1559
> tab {
1560
&:hover { box-shadow: inset 0 2px $track_color; }
1562
&:checked { box-shadow: inset 0 2px $primary_color; }
1564
}
1565
}
1566
}
1567
&.left {
1569
border-right-style: solid;
1570
> tabs {
1571
margin-right: -1px;
1572
> tab {
1573
&:hover { box-shadow: inset -2px 0 $track_color; }
1575
&:checked { box-shadow: inset -2px 0 $primary_color; }
1577
}
1578
}
1579
}
1580
&.right {
1582
border-left-style: solid;
1583
> tabs {
1584
margin-left: -1px;
1585
> tab {
1586
&:hover { box-shadow: inset 2px 0 $track_color; }
1588
&:checked { box-shadow: inset 2px 0 $primary_color; }
1590
}
1591
}
1592
}
1593
&.top > tabs > arrow {
1595
@extend %notebook_vert_arrows;
1596
border-top-style: none;
1598
}
1599
&.bottom > tabs > arrow {
1601
@extend %notebook_vert_arrows;
1602
border-bottom-style: none;
1604
}
1605
@at-root %notebook_vert_arrows {
1607
padding-left: 4px;
1608
padding-right: 4px;
1609
&.down {
1611
margin-left: -8px;
1612
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1613
}
1614
&.up {
1616
margin-right: -8px;
1617
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1618
}
1619
}
1620
&.left > tabs > arrow {
1622
@extend %notebook_horz_arrows;
1623
border-left-style: none;
1625
}
1626
&.right > tabs > arrow {
1628
@extend %notebook_horz_arrows;
1629
border-right-style: none;
1631
}
1632
@at-root %notebook_horz_arrows {
1634
padding-top: 4px;
1635
padding-bottom: 4px;
1636
&.down {
1638
margin-top: -8px;
1639
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1640
}
1641
&.up {
1643
margin-bottom: -8px;
1644
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1645
}
1646
}
1647
> tabs > arrow {
1649
@extend %simple_flat_button;
1650
min-height: 16px;
1652
min-width: 16px;
1653
border-radius: 0;
1654
}
1655
tab {
1657
transition: $longer_transition,
1658
background-size 0,
1659
background-image 0;
1660
min-height: $small_size;
1661
min-width: $small_size;
1662
padding: $container_padding 12px;
1663
outline-offset: -6px;
1665
border-width: 1px; // for reorderable tabs
1667
border-color: transparent; //
1668
background-image: radial-gradient(circle farthest-corner at center,
1670
$primary_color 10%,
1671
transparent 0%);
1672
background-repeat: no-repeat;
1673
background-position: center;
1674
background-size: 0% 0%;
1675
color: $secondary_fg_color;
1677
font-weight: 500;
1678
&:hover {
1680
color: $fg_color;
1681
&.reorderable-page {
1683
border-color: $borders_color;
1684
background-color: $alt_base_color;
1685
}
1686
}
1687
&:disabled { color: $disabled_secondary_fg_color; }
1689
&:checked {
1691
transition: $longer_transition,
1692
background-size $longer_duration $deceleration_curve,
1693
background-image $longer_duration + $ripple_duration $deceleration_curve;
1694
background-image: radial-gradient(circle farthest-corner at center,
1695
transparent 10%,
1696
transparent 0%);
1697
background-size: 1000% 1000%;
1698
color: $fg_color;
1699
&:disabled { color: $disabled_fg_color; }
1701
&.reorderable-page {
1703
border-color: $borders_color;
1704
background-color: $base_color;
1705
}
1706
}
1707
// colors the button like the label, overridden otherwise
1709
button.flat {
1710
@extend %small_button;
1711
&:last-child {
1713
margin-left: $container_padding;
1714
margin-right: $container_padding - 12px;
1715
}
1716
&:first-child {
1718
margin-left: $container_padding - 12px;
1719
margin-right: $container_padding;
1720
}
1721
}
1722
}
1723
&.top,
1725
&.bottom {
1726
tabs {
1727
padding-left: 8px;
1728
padding-right: 8px;
1729
&:not(:only-child) {
1731
&:first-child { margin-left: 0; }
1732
&:last-child { margin-right: 0; }
1733
}
1734
tab {
1736
&.reorderable-page {
1737
margin: 0 -1px;
1738
border-style: none solid;
1739
}
1740
}
1741
}
1742
}
1743
&.left,
1745
&.right {
1746
tabs {
1747
padding-top: 8px;
1748
padding-bottom: 8px;
1749
&:not(:only-child) {
1751
&:first-child { margin-top: 0; }
1752
&:last-child { margin-bottom: 0; }
1753
}
1754
tab {
1756
&.reorderable-page {
1757
margin: -1px 0;
1758
border-style: solid none;
1759
}
1760
}
1761
}
1762
}
1763
}
1764
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1766
background-color: $base_color;
1767
entry:not(.search),
1769
spinbutton:not(.vertical) { @extend %entry.flat; }
1770
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1772
button.combo { @extend %combo_flat; }
1774
}
1775
}
1776
/**************
1779
* Scrollbars *
1780
**************/
1781
scrollbar {
1782
$_slider_min_length: 24px;
1783
// disable steppers
1785
@at-root * {
1786
-GtkScrollbar-has-backward-stepper: false;
1787
-GtkScrollbar-has-forward-stepper: false;
1788
}
1789
transition: $longer_transition;
1791
background-color: $base_color;
1792
background-clip: $extra_background_clip;
1793
// scrollbar border
1795
&.top { border-bottom: 1px solid $borders_color; }
1796
&.bottom { border-top: 1px solid $borders_color; }
1797
&.left { border-right: 1px solid $borders_color; }
1798
&.right { border-left: 1px solid $borders_color; }
1799
// slider
1801
slider {
1802
transition: $shorter_transition, margin 0, border-width 0;
1803
min-width: 8px;
1804
min-height: 8px;
1805
border: 4px solid transparent;
1806
border-radius: $circular_radius;
1807
background-clip: padding-box;
1808
background-color: $tertiary_fg_color;
1809
&:hover { background-color: $secondary_fg_color; }
1811
&:active { background-color: $fg_color; }
1813
&:disabled { background-color: $disabled_tertiary_fg_color; }
1815
}
1816
&.fine-tune {
1818
slider {
1819
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1820
min-width: 4px;
1821
min-height: 4px;
1822
}
1823
&.horizontal slider { margin: 2px 0; }
1825
&.vertical slider { margin: 0 2px; }
1827
}
1828
&.overlay-indicator {
1830
&:not(.dragging):not(.hovering) {
1831
border-color: transparent;
1832
background-color: transparent;
1833
slider {
1835
min-width: 4px;
1836
min-height: 4px;
1837
margin: 4px - 1px;
1838
border: 1px solid scale-alpha($base_color, $lower_opacity);
1839
}
1840
button {
1842
min-width: 4px;
1843
min-height: 4px;
1844
margin: 4px - 1px;
1845
border: 1px solid scale-alpha($base_color, $lower_opacity);
1846
border-radius: $circular_radius;
1847
background-color: $tertiary_fg_color;
1848
background-clip: padding-box;
1849
-gtk-icon-source: none;
1850
&:disabled { background-color: $disabled_tertiary_fg_color; }
1852
}
1853
&.horizontal {
1855
slider { min-width: $_slider_min_length; }
1856
button { min-width: 8px; }
1858
}
1859
&.vertical {
1861
slider { min-height: $_slider_min_length; }
1862
button { min-height: 8px; }
1864
}
1865
}
1866
&.dragging,
1868
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1869
}
1870
&.horizontal slider { min-width: $_slider_min_length; }
1872
&.vertical slider { min-height: $_slider_min_length; }
1874
// button styling
1876
button {
1877
@extend %simple_flat_button;
1878
min-width: 16px;
1880
min-height: 16px;
1881
padding: 0;
1882
border-radius: 0;
1883
}
1884
// button icons
1886
&.vertical {
1887
button {
1888
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1889
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1891
}
1892
}
1893
&.horizontal {
1895
button {
1896
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1897
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1899
}
1900
}
1901
}
1902
/**********
1905
* Switch *
1906
**********/
1907
switch {
1908
transition: $longer_transition;
1909
margin: $container_padding 0;
1910
border: 4px solid transparent;
1911
border-radius: $circular_radius;
1912
background-color: $track_color;
1913
background-clip: padding-box;
1914
font-size: 0;
1915
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1917
&:checked {
1919
background-color: scale-alpha($accent_color, 0.5);
1920
&:disabled {
1922
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1923
color: $disabled_fg_color;
1924
}
1925
}
1926
slider {
1928
@include entry(normal);
1929
transition: $longer_transition, $shadow_transition, margin 0;
1931
min-width: $small_size;
1932
min-height: $small_size;
1933
margin: -4px 0 -4px -4px;
1934
border-radius: $circular_radius;
1935
-gtk-outline-radius: $circular_radius;
1936
}
1937
&:hover slider { @include entry(focus); }
1939
&:checked slider {
1941
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1942
animation: needs_attention $longer_duration $deceleration_curve;
1943
margin: -4px -4px -4px 0;
1944
background-color: $accent_color;
1945
color: $inversed_fg_color;
1946
}
1947
&:disabled slider { @include entry(disabled); }
1949
&:checked:disabled slider { animation: none; }
1951
row:selected & {
1953
}
1954
}
1955
/*************************
1958
* Check and Radio items *
1959
*************************/
1960
// draw regular check and radio items using our PNG assets
1961
// all assets are rendered from assets.svg. never add pngs directly
1962
//selection-mode
1964
@each $s, $as in ('', '-selectionmode'),
1965
(':hover', '-hover-selectionmode'),
1966
(':checked', '-checked-selectionmode'),
1967
(':checked:hover', '-checked-hover-selectionmode') {
1968
.view.content-view.check#{$s}:not(list) {
1969
-gtk-icon-shadow: $z-depth-1;
1970
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1971
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1972
margin: 8px;
1973
background-color: transparent;
1974
}
1975
}
1976
checkbutton.text-button,
1978
radiobutton.text-button {
1979
// this is for a nice focus on check and radios text
1980
padding: 2px;
1981
outline-offset: 0;
1982
label:not(:only-child) { margin: 0 4px; }
1984
}
1985
check,
1987
radio {
1988
min-height: 24px;
1989
min-width: 24px;
1990
margin: -($large_size - 24px) / 2;
1991
padding: ($large_size - 24px) / 2;
1992
@extend %simple_flat_button;
1994
@extend %circular_button;
1996
&:checked, &:indeterminate { color: $accent_color; }
1998
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2000
// &:only-child { margin: -12px; }
2002
row &:not(:checked):not(:indeterminate) {
2004
color: gtkalpha(currentColor, $enabled_opacity);
2005
&:hover, &:active { color: currentColor; }
2007
&:disabled { color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity); }
2009
}
2010
menu menuitem & {
2012
transition: none;
2013
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2014
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
2016
&, &:hover, &:disabled {
2018
box-shadow: none;
2019
// color: inherit;
2020
// animation: none;
2021
}
2022
}
2023
}
2024
%check,
2026
check {
2027
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
2028
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
2029
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
2031
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
2032
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
2034
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
2035
}
2036
$radio_indicator: 10 / ($large_size / 1px) / 2;
2038
$radio_radius_slice: #{$large_size / 2 / 1px};
2039
$radio_radius_width: #{$large_size / 2};
2040
%radio,
2042
radio {
2043
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
2044
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
2045
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2047
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
2048
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
2050
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
2051
border-image: -gtk-gradient(radial,
2053
center center, 0,
2054
center center, 0.001,
2055
to($accent_color),
2056
to(transparent))
2057
$radio_radius_slice / $radio_radius_width;
2058
&:checked {
2060
border-image: -gtk-gradient(radial,
2061
center center, 0,
2062
center center, $radio_indicator,
2063
to($accent_color),
2064
to(transparent))
2065
$radio_radius_slice / $radio_radius_width;
2066
}
2067
&:checked:disabled {
2069
border-image: -gtk-gradient(radial,
2070
center center, 0,
2071
center center, $radio_indicator,
2072
to(scale-alpha($accent_color, $disabled_opacity)),
2073
to(transparent))
2074
$radio_radius_slice / $radio_radius_width;
2075
}
2076
&:indeterminate:checked {
2078
border-image: -gtk-gradient(radial,
2079
center center, 0,
2080
center center, 0.001,
2081
to($accent_color),
2082
to(transparent))
2083
$radio_radius_slice / $radio_radius_width;
2084
}
2085
}
2086
// let's animate things
2088
@keyframes check_check {
2089
from { -gtk-icon-transform: rotate(90deg); }
2090
to { -gtk-icon-transform: unset; }
2091
}
2092
@keyframes check_radio { // FIXME: cannot animate border-image
2094
from {
2095
border-image: -gtk-gradient(radial,
2096
center center, 0,
2097
center center, 0.001,
2098
to($accent_color),
2099
to(transparent))
2100
$radio_radius_slice / $radio_radius_width;
2101
}
2102
to {
2104
border-image: -gtk-gradient(radial,
2105
center center, 0,
2106
center center, $radio_indicator,
2107
to($accent_color),
2108
to(transparent))
2109
$radio_radius_slice / $radio_radius_width;
2110
}
2111
}
2112
@keyframes check_indeterminate {
2114
from { -gtk-icon-transform: unset; }
2115
50% { -gtk-icon-transform: scale(0, 1); }
2116
to { -gtk-icon-transform: unset; }
2117
}
2118
%check_checked,
2120
check:not(:indeterminate):checked { animation: check_check $longer_duration $standard_curve; }
2121
check:not(:indeterminate):checked:active { animation: check_check $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2123
// %radio_checked,
2125
// radio:not(:indeterminate):checked { animation: check_radio $longer_duration $standard_curve; }
2126
// radio:not(:indeterminate):checked:active { animation: check_radio $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2128
%indeterminate_checked,
2130
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $longer_duration $standard_curve; }
2131
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $longer_duration $standard_curve, ripple_effect $longer_duration $deceleration_curve forwards; }
2133
// no animations in menus
2135
menu menuitem {
2136
check:not(:indeterminate):checked,
2137
radio:not(:indeterminate):checked,
2138
check:indeterminate:checked,
2139
radio:indeterminate:checked { animation: none; }
2140
}
2141
treeview.view check,
2143
treeview.view radio {
2144
padding: 0;
2145
&:hover {
2147
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2148
&:disabled { box-shadow: none; }
2150
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inversed_fg_color, 0.05); }
2152
}
2153
& {
2155
color: $secondary_fg_color;
2156
&:hover, &:active { color: $fg_color; }
2158
&:disabled { color: $disabled_secondary_fg_color; }
2160
&:checked, &:indeterminate { color: $accent_color; }
2162
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2164
}
2165
&:selected {
2167
color: $secondary_inversed_fg_color;
2168
&:hover, &:active { color: $inversed_fg_color; }
2170
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2172
&:checked, &:indeterminate { color: $accent_color; }
2174
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2176
}
2177
}
2178
treeview.view radio:checked {
2180
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2181
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2182
border-image: none;
2183
}
2184
/************
2187
* GtkScale *
2188
************/
2189
scale {
2190
// sizing
2191
$_marks_lenght: 8px;
2192
$_marks_distance: 8px;
2193
$slider_size: 24px;
2195
$marks_slider_size: 30px;
2196
$slider_margin: -($slider_size - $bar_size) / 2;
2198
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2199
$color_slider_margin: -($slider_size) / 2;
2201
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2202
min-height: $medium_size - $slider_size;
2204
min-width: $medium_size - $slider_size;
2205
padding: ($slider_size / 2);
2206
* { transition: $longer_transition; }
2208
// the slider is inside the trough, so to have make it bigger there's a negative margin
2210
slider {
2211
min-height: $slider_size;
2212
min-width: $slider_size;
2213
margin: $slider_margin;
2214
}
2215
// the backing bit
2217
trough {
2218
outline-offset: 2px;
2219
background-color: $track_color;
2220
&:disabled { color: $disabled_fg_color; }
2222
}
2223
// the colored part of the backing bit
2225
highlight {
2226
background-color: $accent_color;
2227
&:disabled { background-color: transparent; }
2229
}
2230
// this is another differently styled part of the backing bit, the most relevant use case is for example
2232
// in media player to indicate how much video stream as been cached
2233
fill {
2234
background-color: $track_color;
2235
&:disabled { background-color: transparent; }
2237
}
2238
slider {
2240
transition: all $shorter_duration $standard_curve;
2241
// border-radius: 100%;
2242
// background-color: $accent_color;
2243
background-repeat: no-repeat;
2244
background-position: center;
2245
@each $s, $as in ('', ''),
2247
(':disabled', '-insensitive') {
2248
&#{$s} {
2249
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2250
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2252
}
2253
}
2254
background-size: calc(100% - 8px);
2256
&:hover { background-size: calc(100% - 4px); }
2258
&:active { background-size: calc(100% - 0px); }
2260
}
2261
// click-and-hold the slider to activate
2263
&.fine-tune {
2264
// to make the slider shrink in fine-tune mode
2265
slider { background-size: calc(100% - 12px); }
2266
}
2267
value { color: gtkalpha(currentColor, $hint_opacity); }
2269
marks {
2271
color: $track_color;
2272
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2274
(bottom, bottom, top),
2275
(top, left, right),
2276
(bottom, right, left) {
2277
&.#{$marks_class} {
2278
margin-#{$marks_margin}: $_marks_distance;
2279
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2280
}
2281
}
2282
}
2283
&.horizontal {
2285
indicator {
2286
min-height: $_marks_lenght;
2287
min-width: 1px;
2288
}
2289
}
2290
&.vertical {
2292
indicator {
2293
min-height: 1px;
2294
min-width: $_marks_lenght;
2295
}
2296
}
2297
// *WARNING* scale with marks madness following
2299
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2301
('vertical', 'vert') {
2302
@each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
2303
('scale-has-marks-below', 'marks-after:not(.marks-before)') {
2304
&.#{$dir_class}.#{$marks_class} {
2305
slider {
2306
@each $state, $state_infix in ('', ''),
2307
(':disabled', '-insensitive') {
2308
&#{$state} {
2309
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$asset_suffix}';
2310
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2312
}
2313
}
2314
@if $dir_class == 'horizontal' {
2316
min-height: $marks_slider_size;
2317
min-width: $slider_size;
2318
@if $marks_infix == 'scale-has-marks-above' {
2320
margin-top: $marks_slider_margin;
2321
background-position: center calc(100% - 4px);
2323
&:hover { background-position: center calc(100% - 2px); }
2325
&:active { background-position: center calc(100% - 0px); }
2327
}
2328
@if $marks_infix == 'scale-has-marks-below' {
2330
margin-bottom: $marks_slider_margin;
2331
background-position: center calc(4px);
2333
&:hover { background-position: center calc(2px); }
2335
&:active { background-position: center calc(0px); }
2337
}
2338
}
2339
@if $dir_class == 'vertical' {
2341
min-height: $slider_size;
2342
min-width: $marks_slider_size;
2343
@if $marks_infix == 'scale-has-marks-above' {
2345
margin-left: $marks_slider_margin;
2346
background-position: calc(4px) center;
2348
&:hover { background-position: calc(2px) center; }
2350
&:active { background-position: calc(0px) center; }
2352
}
2353
@if $marks_infix == 'scale-has-marks-below' {
2355
margin-right: $marks_slider_margin;
2356
background-position: calc(100% - 4px) center;
2358
&:hover { background-position: calc(100% - 2px) center; }
2360
&:active { background-position: calc(100% - 0px) center; }
2362
}
2363
}
2364
}
2365
&.fine-tune slider {
2367
@if $dir_class == 'horizontal' {
2368
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2369
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2371
}
2372
@if $dir_class == 'vertical' {
2374
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2375
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2377
}
2378
}
2379
}
2380
}
2381
}
2382
&.color {
2384
min-height: 0;
2385
min-width: 0;
2386
&.horizontal {
2388
padding: 0 0 12px 0;
2389
slider {
2391
&:dir(ltr), &:dir(rtl) { // specificity bump
2392
margin-bottom: $color_slider_margin;
2393
margin-top: $color_marks_slider_margin;
2394
}
2395
}
2396
}
2397
&.vertical {
2399
&:dir(ltr) {
2400
padding: 0 0 0 12px;
2401
slider {
2403
margin-left: $color_slider_margin;
2404
margin-right: $color_marks_slider_margin;
2405
}
2406
}
2407
&:dir(rtl) {
2409
padding: 0 12px 0 0;
2410
slider {
2412
margin-right: $color_slider_margin;
2413
margin-left: $color_marks_slider_margin;
2414
}
2415
}
2416
}
2417
}
2418
}
2419
/*****************
2422
* Progress bars *
2423
*****************/
2424
progressbar {
2425
// sizing
2426
&.horizontal {
2427
trough,
2428
progress { min-height: $bar_size; }
2429
}
2430
&.vertical {
2432
trough,
2433
progress { min-width: $bar_size; }
2434
}
2435
// FIXME: insensitive state missing and some other state should be set probably
2437
color: $tertiary_fg_color;
2438
font-size: smaller;
2439
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2441
progress { background-color: $primary_color; }
2443
&.osd { // progressbar.osd used for epiphany page loading progress
2445
// min-width: $bar_size;
2446
// min-height: $bar_size;
2447
// background-color: transparent;
2448
// trough { background-color: transparent; }
2450
progress {
2452
}
2453
}
2454
}
2455
/*************
2458
* Level Bar *
2459
*************/
2460
levelbar {
2461
block {
2462
min-width: $medium_size;
2463
min-height: $bar_size;
2464
}
2465
&.vertical block {
2467
min-width: $bar_size;
2468
min-height: $medium_size;
2469
}
2470
trough {
2472
padding: 2px;
2473
border-radius: 2px;
2474
@include entry(normal);
2476
&:disabled { @include entry(disabled); }
2478
}
2479
&.horizontal.discrete block { margin: 0 1px; }
2481
&.vertical.discrete block { margin: 1px 0; }
2483
&.horizontal.discrete trough { padding: 2px 1px; }
2485
&.vertical.discrete trough { padding: 1px 2px; }
2487
block {
2489
&.low {
2490
background-color: $warning_color;
2491
}
2492
&.high,
2494
&:not(.empty) {
2495
background-color: $primary_color;
2496
}
2497
&.full {
2499
background-color: $success_color;
2500
}
2501
&.empty {
2503
background-color: $track_color;
2504
color: $disabled_fg_color;
2505
}
2506
}
2507
}
2508
/****************
2511
* Print dialog *
2512
*****************/
2513
printdialog {
2514
paper {
2515
padding: 0;
2516
border: 1px solid $borders_color;
2517
background: $base_color;
2518
color: $fg_color;
2519
}
2520
.dialog-action-box { margin: 12px; }
2522
}
2523
/**********
2526
* Frames *
2527
**********/
2528
frame > border,
2529
.frame {
2530
margin: 0;
2531
padding: 0;
2532
border: 1px solid $borders_color;
2533
border-radius: 0;
2534
box-shadow: none;
2535
&.flat { border-style: none; }
2537
}
2538
actionbar > revealer > box {
2540
padding: $container_padding;
2541
border-top: 1px solid $borders_color;
2542
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2544
}
2545
scrolledwindow {
2547
viewport.frame { // avoid double borders when viewport inside scrolled window
2548
border-style: none;
2549
}
2550
// This is used when content is touch-dragged past boundaries.
2552
// draws a box on top of the content, the size changes programmatically.
2553
@at-root overshoot {
2554
&.top { @include overshoot(top); }
2555
&.bottom { @include overshoot(bottom); }
2557
&.left { @include overshoot(left); }
2559
&.right { @include overshoot(right); }
2561
}
2562
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2564
@at-root undershoot {
2565
&.top { @include undershoot(top); }
2566
&.bottom { @include undershoot(bottom); }
2568
&.left { @include undershoot(left); }
2570
&.right { @include undershoot(right); }
2572
}
2573
@at-root junction { // the small square between two scrollbars
2575
border-style: solid none none solid;
2576
border-width: 1px;
2577
border-color: $borders_color;
2578
background-color: $base_color;
2579
&:dir(rtl) { border-style: solid solid none none; }
2581
}
2582
}
2583
//vbox and hbox separators
2585
separator {
2586
min-width: 1px;
2587
min-height: 1px;
2588
background: $borders_color;
2589
}
2590
/*********
2593
* Lists *
2594
*********/
2595
list {
2596
border-color: $borders_color;
2597
background-color: $base_color;
2598
row { padding: 2px; }
2600
}
2601
// FIXME
2603
$row_transition: $longer_transition, background-color 0, color 0;
2604
row {
2606
&.activatable {
2607
transition: $row_transition,
2608
background-size $ripple_duration $deceleration_curve,
2609
background-image $ripple_duration * 2 $deceleration_curve;
2610
box-shadow: inset 0 0 0 9999px transparent;
2611
background-image: radial-gradient(circle farthest-corner at center,
2612
transparent 10%,
2613
transparent 0%);
2614
background-repeat: no-repeat;
2615
background-position: center;
2616
background-size: 1000% 1000%;
2617
&:hover {
2619
transition: $row_transition,
2620
box-shadow 0,
2621
background-size $ripple_duration $deceleration_curve,
2622
background-image $ripple_duration * 2 $deceleration_curve;
2623
box-shadow: inset 0 0 0 9999px $row_track_color;
2624
}
2625
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2627
&:active {
2628
transition: $row_transition,
2629
background-size 0,
2630
background-image 0;
2631
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2632
box-shadow: inset 0 0 0 9999px $semi_track_color;
2633
background-image: radial-gradient(circle farthest-corner at center,
2634
$semi_track_color 10%,
2635
transparent 0%);
2636
background-size: 0% 0%;
2637
}
2638
}
2639
&:selected { @extend %selected_items; }
2641
}
2642
/*********************
2645
* App Notifications *
2646
*********************/
2647
.app-notification {
2648
@extend %osd;
2649
@extend toolbar.osd;
2651
margin: 8px;
2653
button { @extend %button_basic.flat; }
2655
&.frame,
2657
border { border-style: none; }
2658
}
2659
/*************
2662
* Expanders *
2663
*************/
2664
expander {
2665
arrow {
2666
transition: all $shorter_duration $standard_curve;
2667
min-width: 16px;
2668
min-height: 16px;
2669
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2670
-gtk-icon-transform: rotate(-90deg);
2671
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2673
&:checked { -gtk-icon-transform: unset; }
2675
color: $secondary_fg_color;
2677
&:hover, &:active { color: $fg_color; }
2679
&:disabled { color: $disabled_secondary_fg_color; }
2681
&:selected {
2683
color: $secondary_inversed_fg_color;
2684
&:hover, &:active { color: $inversed_fg_color; }
2686
&:disabled { color: $disabled_secondary_inversed_fg_color; }
2688
}
2689
}
2690
}
2691
/************
2694
* Calendar *
2695
***********/
2696
calendar {
2697
padding: 1px;
2698
border: 1px solid $borders_color;
2699
color: $fg_color;
2700
&:disabled { color: $disabled_fg_color; }
2702
&:selected {
2704
@extend %selected_items;
2705
border-radius: 2px + 1px;
2707
}
2708
&.header {
2710
border-style: none none solid;
2711
border-radius: 0;
2712
}
2713
&.button { @extend %simple_flat_button; }
2715
&.highlight {
2717
color: gtkalpha(currentColor, $hint_opacity);
2718
font-weight: 500;
2719
}
2720
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2722
}
2723
/***********
2726
* Dialogs *
2727
***********/
2728
messagedialog { // Message Dialog styling
2729
&.background { background-color: $lighter_bg_color; }
2730
.titlebar {
2732
min-height: $small_size;
2733
border-style: none;
2734
box-shadow: inset 0 1px $highlight_color;
2735
background-color: $lighter_bg_color;
2736
color: $fg_color;
2737
&:backdrop { color: $secondary_fg_color; }
2739
}
2740
&.csd { // rounded bottom border styling for csd version
2742
&.background {
2743
// bigger radius for better antialiasing
2744
border-bottom-left-radius: 2px;
2745
border-bottom-right-radius: 2px;
2746
}
2747
.dialog-action-area button {
2749
padding: 8px 16px;
2750
border-top: 1px solid $borders_color;
2751
border-radius: 0;
2752
@extend %simple_flat_button;
2754
&:first-child { border-bottom-left-radius: 2px; }
2756
&:last-child { border-bottom-right-radius: 2px; }
2758
}
2759
}
2760
}
2761
filechooser {
2763
.dialog-action-box { border-top: 1px solid $borders_color; }
2764
#pathbarbox {
2766
border-bottom: 1px solid $borders_color;
2767
background-color: $bg_color;
2768
}
2769
}
2770
filechooserbutton:drop(active) {
2772
box-shadow: none;
2773
}
2774
/***********
2777
* Sidebar *
2778
***********/
2779
.sidebar {
2780
border-style: none;
2781
background-color: $lighter_bg_color;
2782
@at-root %sidebar_left,
2784
&:dir(ltr),
2785
&.left,
2786
&.left:dir(rtl) {
2787
border-right: 1px solid $borders_color;
2788
border-left-style: none;
2789
}
2790
@at-root %sidebar_right
2792
&:dir(rtl),
2793
&.right {
2794
border-left: 1px solid $borders_color;
2795
border-right-style: none;
2796
}
2797
list { background-color: transparent; }
2799
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2801
}
2802
stacksidebar {
2804
&.sidebar {
2805
&:dir(ltr),
2806
&.left,
2807
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2808
&:dir(rtl),
2810
&.right { list { @extend %sidebar_right; }}
2811
}
2812
row {
2814
padding: 10px 4px;
2815
> label {
2817
padding-left: 6px;
2818
padding-right: 6px;
2819
}
2820
&.needs-attention > label { @extend %needs_attention; }
2822
}
2823
}
2824
/****************
2827
* File chooser *
2828
****************/
2829
placessidebar {
2830
> viewport.frame { border-style: none; }
2831
list { padding: (4px - 3px) 0 4px; }
2833
row {
2835
// Needs overriding of the GtkListBoxRow padding
2836
min-height: 32px;
2837
margin: -1px 0; // Remove unknown margins
2838
padding: 0;
2839
// Using margins/padding directly in the SidebarRow
2841
// will make the animation of the new bookmark row jump
2842
> revealer { padding: 0 12px; }
2843
&:selected { color: $inversed_fg_color; }
2845
&:disabled { color: $disabled_fg_color; }
2847
image.sidebar-icon {
2849
opacity: $hint_opacity; // dim the device icons
2850
&:dir(ltr) { padding-right: 8px; }
2852
&:dir(rtl) { padding-left: 8px; }
2853
}
2854
label.sidebar-label {
2856
&:dir(ltr) { padding-right: 2px; }
2857
&:dir(rtl) { padding-left: 2px; }
2858
}
2859
@at-root button.sidebar-button {
2861
@extend %simple_flat_button;
2862
@extend %small_button;
2864
row:selected & {
2866
}
2867
}
2868
&.sidebar-placeholder-row {
2870
min-height: 2px;
2871
padding: 0 8px;
2872
background-image: image($accent_color);
2873
background-clip: content-box;
2874
}
2875
&.sidebar-new-bookmark-row { color: $accent_color; }
2877
&:drop(active):not(:disabled) {
2879
box-shadow: inset 0 0 0 2px $accent_color;
2880
&:selected {
2882
// background-color: $accent_color;
2883
// color: $inversed_fg_color;
2884
}
2885
}
2886
}
2887
}
2888
placesview {
2890
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2891
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2893
// this selects the "connect to server" label
2895
> actionbar > revealer > box > label {
2896
padding-left: 8px;
2897
padding-right: 8px;
2898
}
2899
}
2900
/*********
2903
* Paned *
2904
*********/
2905
paned {
2906
> separator {
2907
min-width: 1px;
2908
min-height: 1px;
2909
-gtk-icon-source: none; // defeats the ugly default handle decoration
2910
border-style: none; // just to be sure
2911
background-color: transparent;
2912
// workaround, using background istead of a border since the border will get rendered twice (?)
2913
background-image: image($borders_color);
2914
background-size: 1px 1px;
2915
background-clip: content-box; // avoids borders image being rendered twice (?)
2916
&.wide {
2918
min-width: 6px;
2919
min-height: 6px;
2920
background-color: $bg_color;
2921
background-image: image($borders_color), image($borders_color);
2922
background-size: 1px 1px, 1px 1px;
2923
}
2924
}
2925
&.horizontal > separator {
2927
background-repeat: repeat-y;
2928
&:dir(ltr) {
2930
margin: 0 -8px 0 0;
2931
padding: 0 8px 0 0;
2932
background-position: left;
2933
}
2934
&:dir(rtl) {
2936
margin: 0 0 0 -8px;
2937
padding: 0 0 0 8px;
2938
background-position: right;
2939
}
2940
&.wide {
2942
margin: 0;
2943
padding: 0;
2944
background-repeat: repeat-y, repeat-y;
2945
background-position: left, right;
2946
}
2947
}
2948
&.vertical > separator {
2950
margin: 0 0 -8px 0;
2951
padding: 0 0 8px 0;
2952
background-repeat: repeat-x;
2953
background-position: top;
2954
&.wide {
2956
margin: 0;
2957
padding: 0;
2958
background-repeat: repeat-x, repeat-x;
2959
background-position: bottom, top;
2960
}
2961
}
2962
}
2963
/**************
2966
* GtkInfoBar *
2967
**************/
2968
infobar {
2969
border-style: none;
2970
&.info { background-color: $info_bg_color; }
2972
&.question { background-color: $question_bg_color; }
2974
&.warning { background-color: $warning_bg_color; }
2976
&.error { background-color: $error_bg_color; }
2978
&.info,
2980
&.question,
2981
&.warning,
2982
&.error {
2983
> label, & { color: $inversed_fg_color; }
2984
button { @extend %button_selected; }
2986
selection {}
2988
*:link { @extend %link_selected; }
2990
}
2991
}
2992
/************
2995
* Tooltips *
2996
************/
2997
tooltip {
2998
&.background {
2999
// background-color needs to be set this way otherwise it gets drawn twice
3000
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3001
box-shadow: inset 0 1px $highlight_color;
3002
background-color: scale-alpha($base_color, $higher_opacity);
3003
}
3004
// @extend %osd;
3006
// padding: 4px; /* not working */
3008
border-radius: 2px;
3009
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3010
&:not(.csd) {
3012
border: 1px solid $borders_color;
3013
border-radius: 2px + 1px;
3014
background-clip: $extra_background_clip;
3015
}
3016
// FIXME: we need a border or tooltips vanish on black background.
3018
decoration { background-color: transparent; }
3019
label {
3021
// tooltip label has already 6px margins
3022
min-height: 32px - 6px * 2;
3023
padding: 0 8px - 6px;
3024
}
3025
* {
3027
// workaround for Eclipse.
3028
// do not include any declaration here.
3029
// padding: 0;
3030
// background-color: transparent;
3031
// color: inherit;
3032
}
3033
}
3034
/*****************
3037
* Color Chooser *
3038
*****************/
3039
colorswatch {
3040
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3041
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3042
// applied to the overlay box.
3043
// base color corners rounding
3045
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3046
// sports a bigger radius.
3047
// nth-child is needed by the custom color strip.
3048
&.top {
3050
border-top-left-radius: $md_radius + 0.5px;
3051
border-top-right-radius: $md_radius + 0.5px;
3052
overlay {
3054
border-top-left-radius: $md_radius;
3055
border-top-right-radius: $md_radius;
3056
}
3057
}
3058
&.bottom {
3060
border-bottom-left-radius: $md_radius + 0.5px;
3061
border-bottom-right-radius: $md_radius + 0.5px;
3062
overlay {
3064
border-bottom-left-radius: $md_radius;
3065
border-bottom-right-radius: $md_radius;
3066
}
3067
}
3068
&.left,
3070
&:first-child:not(.top) {
3071
border-top-left-radius: $md_radius + 0.5px;
3072
border-bottom-left-radius: $md_radius + 0.5px;
3073
overlay {
3075
border-top-left-radius: $md_radius;
3076
border-bottom-left-radius: $md_radius;
3077
}
3078
}
3079
&.right,
3081
&:last-child:not(.bottom) {
3082
border-top-right-radius: $md_radius + 0.5px;
3083
border-bottom-right-radius: $md_radius + 0.5px;
3084
overlay {
3086
border-top-right-radius: $md_radius;
3087
border-bottom-right-radius: $md_radius;
3088
}
3089
}
3090
&.dark overlay { color: $dark_contrast_color; }
3092
&.light overlay { color: $light_contrast_color; }
3094
&.dark { color: $dark_contrast_color; } // for focus ring
3096
&.light { color: $light_contrast_color; } // for focus ring
3098
&:drop(active) {
3100
box-shadow: none;
3101
&.light overlay {
3103
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3104
}
3105
&.dark overlay {
3107
box-shadow: $z-depth-1, 0 0 0 2px $accent_color;
3108
}
3109
}
3110
overlay {
3112
transition: $shadow_transition;
3113
box-shadow: $z-depth-1;
3114
&:hover { box-shadow: $z-depth-2; }
3116
}
3117
&#add-color-button {
3119
border-radius: $md_radius $md_radius 0 0;
3120
color: $dark_contrast_color; // for focus ring
3121
&:only-child { border-radius: $md_radius; }
3123
overlay {
3125
background-image: linear-gradient(to right,
3126
$error_bg_color 25%,
3127
$warning_bg_color 25%, $warning_bg_color 50%,
3128
$info_bg_color 50%, $info_bg_color 75%,
3129
$question_bg_color 75%);
3130
color: $dark_contrast_color;
3131
}
3132
}
3133
&:disabled {
3135
opacity: $disabled_opacity;
3136
overlay { box-shadow: none; }
3138
}
3139
row:selected & {
3141
}
3142
&#editor-color-sample {
3144
border-radius: $md_radius + 0.5px;
3145
overlay { border-radius: $md_radius; }
3147
// overlay:hover { box-shadow: $z-depth-1; }
3149
}
3150
}
3151
// colorscale popup
3153
colorchooser .popover.osd {
3154
transition: $shadow_transition;
3155
border-radius: 2px;
3156
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
3157
background-color: $base_color;
3158
&:backdrop { box-shadow: $z-depth-1, inset 0 1px $highlight_color; }
3160
spinbutton:not(.vertical) { @extend %entry.flat; }
3162
}
3163
/********
3166
* Misc *
3167
********/
3168
//content view (grid/list)
3169
.content-view {
3170
background-color: $bg_color;
3171
// &:hover { -gtk-icon-effect: highlight; }
3173
rubberband { @extend rubberband; }
3175
}
3176
.scale-popup {
3178
.osd & { @extend %osd; }
3179
.osd & button.flat { //FIXME: quick hack, redo properly
3181
}
3182
button { // +/- buttons on GtkVolumeButton popup
3184
}
3185
}
3186
/**********************
3189
* Window Decorations *
3190
*********************/
3191
decoration {
3192
transition: $shadow_transition;
3193
border-radius: 2px 2px 0 0;
3194
box-shadow: $z-depth-4, 0 16px 16px transparent;
3195
// FIXME rationalize shadows
3197
// this is used for the resize cursor area
3199
margin: 8px;
3200
&:backdrop {
3202
// the transparent shadow here is to enforce that the shadow extents don't
3203
// change when we go to backdrop, to prevent jumping windows.
3204
// The biggest shadow should be in the same order then in the active state
3205
// or the jumping will happen during the transition.
3206
box-shadow: $z-depth-2, 0 16px 16px transparent;
3207
}
3208
.maximized &,
3210
.fullscreen &,
3211
.tiled & { border-radius: 0; }
3212
.popup & { box-shadow: none; }
3214
// server-side decorations as used by mutter
3216
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3217
.csd.popup & {
3219
border-radius: 2px;
3220
box-shadow: $z-depth-2;
3221
}
3222
tooltip.csd & {
3224
border-radius: 2px;
3225
box-shadow: $z-depth-2;
3226
}
3227
messagedialog.csd & {
3229
border-radius: 2px;
3230
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3231
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3233
}
3234
.solid-csd & {
3236
margin: 0;
3237
padding: 4px;
3238
// border: solid 1px $borders_color;
3239
// border-radius: 0;
3240
box-shadow: inset 0 0 0 4px $headerbar_color;
3241
// background-color: $borders_color;
3242
}
3243
}
3244
// Window Close button
3246
button.titlebutton {
3247
// @extend %simple_flat_button;
3248
@extend %circular_button;
3250
.selection-mode & {
3252
}
3253
}
3254
// catch all extend :)
3257
%selected_items {
3259
background-color: $primary_color;
3260
@at-root %nobg_selected_items, & {
3262
color: $inversed_fg_color;
3263
&:disabled { color: $disabled_inversed_fg_color; }
3265
}
3266
}
3267
.monospace { font-family: monospace; }
3269
/**********************
3272
* Touch Copy & Paste *
3273
*********************/
3274
//touch selection handlebars for the Popover.osd above
3275
cursor-handle {
3276
border-radius: $circular_radius;
3277
background-color: $accent_color;
3278
background-image: none;
3279
&.top:dir(ltr), &.bottom:dir(rtl) {
3281
padding-left: 6px;
3282
border-top-right-radius: 0;
3283
}
3284
&.bottom:dir(ltr), &.top:dir(rtl) {
3286
padding-right: 6px;
3287
border-top-left-radius: 0;
3288
}
3289
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3291
-GtkWidget-text-handle-width: 24;
3292
-GtkWidget-text-handle-height: 30;
3293
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3295
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3296
url('#{$_url}@2.png'));
3297
}
3298
}
3299
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3301
%circular_button,
3303
button.close,
3304
button.circular { // FIXME: aggregate to buttons
3305
border-radius: $circular_radius;
3306
-gtk-outline-radius: $circular_radius;
3307
// label { padding: 0; }
3309
}
3310
%small_button {
3312
min-height: $small_size;
3313
min-width: $small_size;
3314
padding: 0;
3315
border-radius: $circular_radius;
3316
-gtk-outline-radius: $circular_radius;
3317
}
3318
// shortcut window keys
3320
.keycap {
3321
min-width: 28px - 8px * 2;
3322
min-height: 28px - 2px;
3323
margin-top: 2px;
3324
padding-bottom: 2px;
3325
padding-left: 8px;
3326
padding-right: 8px;
3327
border: solid 1px $borders_color;
3329
border-radius: 2px + 1px;
3330
box-shadow: inset 0 -2px $borders_color;
3331
background-color: $base_color;
3332
color: $fg_color;
3333
font-size: smaller;
3334
}
3335
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3337
transition: $longer_transition;
3338
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_color;
3339
caret-color: $accent_color;
3340
}
3341
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3343
stackswitcher button.circular,
3345
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3346
min-width: $medium_size;
3347
min-height: $medium_size;
3348
padding: 0;
3349
}
3350