ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error_color;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: 4;
21
-GtkDialog-action-area-border: 0;
22
// We use the outline properties to signal the focus properties
24
// to the adwaita engine: using real CSS properties is faster,
25
// and we don't use any outlines for now.
26
outline-style: solid;
28
outline-width: 2px;
29
outline-color: transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: 2px;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
switch:focus slider,
37
notebook:focus tab,
38
*:focus { outline-color: $fill_color; }
39
/***************
42
* Base States *
43
***************/
44
.background {
45
background-color: $bg_color;
46
color: $fg_color;
47
}
48
/*
50
These wildcard seems unavoidable, need to investigate.
51
Wildcards are bad and troublesome, use them with care,
52
or better, just don't.
53
Everytime a wildcard is used a kitten dies, painfully.
54
*/
55
*:disabled { -gtk-icon-effect: dim; }
57
.gtkstyle-fallback {
59
background-color: $bg_color;
60
color: $fg_color;
61
&:hover {
63
background-color: darken($bg_color, 5%);
64
color: $fg_color;
65
}
66
&:active {
68
background-color: darken($bg_color, 10%);
69
color: $fg_color;
70
}
71
&:disabled {
73
background-color: $bg_color;
74
color: $disabled_fg_color;
75
}
76
&:selected {
78
background-color: $primary_color;
79
color: $inverse_fg_color;
80
}
81
}
82
.view {
84
@extend row.activatable;
85
background-color: $base_color;
87
color: $fg_color;
88
&:disabled { color: $disabled_fg_color; }
90
selection,
92
&:selected { @extend %selected_items; }
93
}
94
textview {
96
// FIXME: we need to override background-color to ensure text rendering
97
text { background-color: $base_color; }
98
// FIXME: we cannot specify text color for the border node
100
border { background-color: $alt_base_color; }
101
}
102
iconview { border-radius: 2px; }
104
.rubberband,
106
rubberband {
107
border: 1px solid $alt_primary_color;
108
background-color: scale-alpha($alt_primary_color, $lower_opacity);
109
}
110
flowbox {
112
rubberband { @extend rubberband; }
113
flowboxchild {
115
padding: 4px;
116
border-radius: 2px;
117
// outline-offset: -2px;
118
&:selected { @extend %selected_items; }
120
}
121
}
122
.content-view .tile {
124
// margin: 2px;
125
// padding: 0;
126
// border-radius: 0;
127
// background-color: $black;
128
&:selected {
130
background-color: transparent;
131
color: inherit;
132
}
133
}
134
label {
136
caret-color: currentColor; // this shouldn't be needed.
137
&.separator {
139
@extend .dim-label;
140
color: $fg_color;
142
}
143
row:selected &,
145
&:selected { @extend %nobg_selected_items; }
146
selection {
148
background-color: $primary_color;
149
color: $inverse_fg_color;
150
}
151
&:disabled {
153
color: $disabled_fg_color;
154
selection { @extend %selected_items:disabled; }
156
tab &,
158
button & { color: inherit; }
159
}
160
}
161
.dim-label { opacity: $tertiary_opacity; }
163
assistant {
165
.sidebar {
166
padding: 4px 0;
167
// background-color: $base_color;
168
// border-top: 1px solid $border_color;
169
}
170
// &.csd .sidebar { border-top-style: none; }
172
.sidebar label {
174
min-height: $medium_size;
175
padding: 0 12px;
176
color: $tertiary_fg_color;
177
font-weight: 500;
178
&.highlight { color: $fg_color; }
180
}
181
}
182
%osd, .osd { opacity: $higher_opacity; }
184
/*********************
187
* Spinner Animation *
188
*********************/
189
@keyframes spin {
190
to { -gtk-icon-transform: rotate(1turn); }
191
}
192
@keyframes spin_colors {
194
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
195
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
196
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
197
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
198
}
199
spinner {
201
background: none;
202
opacity: 0; // non spinning spinner makes no sense
203
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
204
&:checked {
206
opacity: 1;
207
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
208
&:disabled { opacity: $disabled_opacity; }
210
}
211
}
212
/****************
215
* Text Entries *
216
****************/
217
%entry,
218
entry {
219
%entry_basic, & {
220
min-height: $medium_size;
221
padding: 0 8px;
222
border-radius: 2px;
223
@include entry(normal);
225
&:focus { @include entry(focus); }
227
&:disabled { @include entry(disabled); }
229
&.flat {
231
border-radius: 0;
232
@include entry(flat-normal);
234
&:focus { @include entry(flat-focus); }
236
&:disabled { @include entry(flat-disabled); }
238
}
239
image { // icons inside the entry
241
// @extend %simple_flat_button;
242
// min-height: $small_size;
244
// min-width: $small_size;
245
// border-radius: $circular_radius;
246
// -gtk-outline-radius: $circular_radius;
247
color: gtkalpha(currentColor, $secondary_opacity);
248
&:hover, &:active { color: currentColor; }
250
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
252
&.left { margin-left: 2px; margin-right: 6px; }
254
&.right { margin-left: 6px; margin-right: 2px; }
256
}
257
undershoot {
259
&.left { @include undershoot(left); }
260
&.right { @include undershoot(right); }
262
}
263
selection { @extend %selected_items; }
265
// entry error and warning style
267
@each $e_type, $e_color in (error, $error_color),
268
(warning, $warning_color) {
269
&.#{$e_type} {
270
@include entry(normal, $e_color);
271
&:focus { @include entry(focus, $e_color); }
273
&:disabled { @include entry(disabled, $e_color); }
275
&.flat {
277
@include entry(flat-normal, $e_color);
278
&:focus { @include entry(flat-focus, $e_color); }
280
&:disabled { @include entry(flat-disabled, $e_color); }
282
}
283
}
284
}
285
&:drop(active) {
287
// box-shadow: inset 0 0 0 2px $accent_color;
288
}
289
.osd & {
291
}
292
}
293
progress {
295
margin: 2px (2px - 8px);
296
border-bottom: 2px solid $primary_color;
297
background-color: transparent;
298
}
299
// linked entries
301
.linked:not(.vertical) > & { @extend %linked; }
302
// Vertically linked entries
304
.linked.vertical > & { @extend %linked_vertical; }
305
.linked:not(.vertical) > &.flat,
307
.linked.vertical > &.flat { border-radius: 0; }
308
}
309
treeview entry {
311
&.flat, & {
312
min-height: 0;
313
padding: 2px;
314
border-radius: 0;
315
background-color: $base_color;
316
&, &:focus {
318
border-image: none;
319
box-shadow: none;
320
}
321
}
322
}
323
/***********
326
* Buttons *
327
***********/
328
// stuff for .needs-attention
329
@keyframes needs_attention {
330
from {
331
background-image: -gtk-gradient(radial,
332
center center, 0,
333
center center, 0.001,
334
to($accent_color),
335
to(transparent));
336
}
337
to {
339
background-image: -gtk-gradient(radial,
340
center center, 0,
341
center center, 0.5,
342
to($accent_color),
343
to(transparent));
344
}
345
}
346
%button,
348
button {
349
@at-root %button_basic, & {
350
min-height: 24px;
351
min-width: 16px;
352
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
353
border-radius: 2px;
354
font-weight: 500;
355
@include button(normal);
357
&:hover { @include button(hover); }
359
&:active { @include button(active); }
361
&:disabled { @include button(disabled); }
363
&:checked { @include button(checked); }
365
&:checked:disabled { @include button(checked-disabled); }
367
@at-root %flat_button, &.flat {
369
@at-root %simple_flat_button, & {
370
@include button(flat-normal);
371
&:hover { @include button(flat-hover); }
373
&:active { @include button(flat-active); }
375
&:disabled { @include button(flat-disabled); }
377
}
378
&:checked { @include button(flat-checked); }
380
&:checked:disabled { @include button(flat-checked-disabled); }
382
}
383
&.text-button {
385
padding-left: 16px;
386
padding-right: 16px;
387
}
388
&.image-button {
390
min-width: 24px;
391
padding: ($medium_size - 24px) / 2;
392
&:not(.text-button) { @extend %circular_button; }
394
}
395
&.text-button.image-button {
397
label {
398
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
399
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
401
}
402
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
404
}
405
.linked > & { @extend %linked; }
407
.linked.vertical > & { @extend %linked_vertical; }
409
.linked > &.flat,
411
.linked.vertical > &.flat {
412
border-radius: 2px;
413
&.image-button:not(.text-button) { @extend %circular_button; }
415
}
416
&:drop(active) {
418
// box-shadow: inset 0 0 0 2px $accent_color;
419
}
420
}
421
@at-root %button_selected, row:selected & {
423
&:disabled { color: $disabled_secondary_inverse_fg_color; }
424
}
425
// big standalone buttons like in Documents pager
427
&.osd {
428
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
429
&.image-button { padding: ($large_size - 24px) / 2; }
431
&:disabled { opacity: 0; }
433
}
434
// overlay / OSD style
436
@at-root %osd_button,
437
.osd & {
438
}
439
// Suggested and Destructive Action buttons
441
@each $b_type, $b_color in (suggested-action, $suggested_color),
442
(destructive-action, $destructive_color) {
443
&.#{$b_type} {
444
background-color: $b_color;
445
color: $inverse_fg_color;
446
&:disabled { @include button(disabled, $b_color); }
448
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
450
&.flat {
452
background-color: transparent;
453
color: $b_color;
454
&:disabled { @include button(flat-disabled, $b_color); }
456
&:checked { background-color: $fill_color; }
458
}
459
.osd & {
461
}
462
}
463
}
464
.stack-switcher > & {
466
// to position the needs attention dot, padding is added to the button
467
// child, a label needs just lateral padding while an icon needs vertical
468
// padding added too.
469
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
471
> label {
473
padding-left: 6px; // label padding
474
padding-right: 6px; //
475
}
476
> image {
478
padding-left: 6px; // image padding
479
padding-right: 6px; //
480
padding-top: 3px; //
481
padding-bottom: 3px; //
482
}
483
&.text-button {
485
// compensate text-button paddings
486
padding-left: 16px - 6px;
487
padding-right: 16px - 6px;
488
}
489
&.image-button {
491
// we want image buttons to have a 1:1 aspect ratio, so compensation
492
// of the padding added to the GtkImage is needed
493
padding-left: ($medium_size - 16px) / 2 - 6px;
494
padding-right: ($medium_size - 16px) / 2 - 6px;
495
}
496
&.needs-attention {
498
> label,
499
> image { @extend %needs_attention; }
500
&:checked {
502
> label,
503
> image {
504
animation: none;
505
background-image: none;
506
}
507
}
508
}
509
}
510
// hide separators
512
separator {
513
min-width: 0;
514
min-height: 0;
515
background-color: transparent;
516
}
517
// &.font,
519
// &.file { separator { background-color: transparent; }}
520
// &.font { > box > box > label { font-weight: bold; }}
522
// inline-toolbar buttons
524
.inline-toolbar & {
525
// @extend %button_basic.flat;
526
&:not(.text-button) { @extend %circular_button; }
528
}
529
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
531
@at-root %circular_button,
533
&.close,
534
&.circular { // The Bloody Circul Button
535
border-radius: $circular_radius;
536
-gtk-outline-radius: $circular_radius;
537
// label { padding: 0; }
539
}
540
@at-root %small_button {
542
min-height: $small_size;
543
min-width: $small_size;
544
padding: 0;
545
border-radius: $circular_radius;
546
-gtk-outline-radius: $circular_radius;
547
}
548
}
549
%needs_attention {
551
animation: needs_attention $longer_duration $deceleration_curve forwards;
552
background-repeat: no-repeat;
553
background-position: right 3px;
554
background-size: 6px 6px;
555
&:dir(rtl) { background-position: left 3px; }
557
}
558
// all the following is for the +|- buttons on inline toolbars, that way
560
// should really be deprecated...
561
.inline-toolbar toolbutton > button { // redefining the button look is
562
// needed since those are flat...
563
}
564
// More inline toolbar buttons
566
toolbar.inline-toolbar toolbutton:not(:only-child) {
567
// > button.flat { @extend %linked_middle; }
568
// &:first-child > button.flat { @extend %linked_first; }
570
// &:last-child > button.flat { @extend %linked_last; }
572
}
573
%linked:not(:only-child) {
575
@at-root %linked_middle,
576
& {
577
border-radius: 0;
578
-gtk-outline-radius: 2px;
579
}
580
@at-root %linked_first,
582
&:first-child { border-radius: 2px 0 0 2px; }
583
@at-root %linked_last,
585
&:last-child { border-radius: 0 2px 2px 0; }
586
}
587
%linked_vertical:not(:only-child) {
589
@at-root %linked_vertical_middle,
590
& {
591
border-radius: 0;
592
-gtk-outline-radius: 2px;
593
}
594
@at-root %linked_vertical_first,
596
&:first-child { border-radius: 2px 2px 0 0; }
597
@at-root %linked_vertical_last,
599
&:last-child { border-radius: 0 0 2px 2px; }
600
}
601
/* menu buttons */
603
modelbutton.flat,
604
.menuitem.button.flat {
605
min-height: $menuitem_size;
606
padding: 0 8px;
607
border-radius: 2px;
608
color: inherit;
609
@extend %simple_flat_button;
611
&:selected { @extend %selected_items; }
613
check,
615
radio {
616
box-shadow: none;
617
background-image: none;
618
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
620
&:last-child { margin-left: -8px; margin-right: -16px; }
622
&:first-child { margin-left: -16px; margin-right: -8px; }
624
}
625
}
626
modelbutton.flat arrow {
628
background: none;
629
&:hover { background: none; }
631
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
633
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
635
}
636
button.color {
638
min-height: $small_size;
639
min-width: $small_size;
640
padding: $container_padding;
641
colorswatch:only-child {
643
// &, overlay { border-radius: 0; }
644
}
645
}
646
/*********
649
* Links *
650
*********/
651
*:link {
652
&, &:hover, &:active { color: $link_color; }
653
&:visited {
655
&, &:hover, &:active { color: $visited_link_color; }
656
}
657
@at-root %link_selected,
659
&:selected,
660
*:selected & { color: $inverse_fg_color; }
661
}
662
button:link,
664
button:visited {
665
@extend *:link;
666
> label { text-decoration-line: underline; }
668
}
669
/*****************
671
* GtkSpinButton *
672
*****************/
673
spinbutton {
674
&:not(.vertical) {
675
// in this horizontal configuration, the whole spinbutton
676
// behaves as the entry, so we extend the entry styling
677
// and nuke the style on the internal entry
678
@extend %entry;
679
padding: 0;
681
%spinbutton_entry,
683
entry {
684
min-width: $large_size - 8px * 2;
685
// reset all the other props since the spinbutton node is styled here
686
margin: 0;
687
border-image: none;
688
border-radius: 0;
689
box-shadow: none;
690
background-color: transparent;
691
//
692
// This will help to simplify spinbutton's code, but unfortunatelly
693
// doesn't work properly in :dir(rtl). It needs z-index property.
694
//
695
// min-width: $large_size - 8px;
696
//
697
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
698
//
699
// &:dir(ltr) {
700
// margin-right: -$spinbuttons_width;
701
// padding-right: $spinbuttons_width;
702
// }
703
//
704
// &:dir(rtl) {
705
// margin-left: -$spinbuttons_width;
706
// padding-left: $spinbuttons_width;
707
// }
708
}
709
button {
711
// margin: $container_padding;
712
border: solid $container_padding transparent;
713
@extend %simple_flat_button;
715
@extend %small_button;
717
&.up:dir(ltr),
719
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
720
&.up:dir(rtl),
722
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
723
}
724
}
725
// OSD horizontal
727
.osd &:not(.vertical) {
728
button {
729
}
730
}
731
// Vertical
733
&.vertical {
734
// in the vertical configuration, we treat the spinbutton
735
// as a box, and tweak the style of the entry in the middle
736
// so that it's linked
737
// FIXME: this should not be set at all, but otherwise it gets the wrong
739
// color
740
&:disabled { color: $disabled_fg_color; }
741
&:drop(active) {
743
box-shadow: none;
744
}
745
entry {
747
min-height: $medium_size;
748
min-width: $large_size;
749
padding: 0;
750
}
751
button {
753
min-height: $medium_size;
754
min-width: $large_size;
755
padding: 0;
756
@extend %simple_flat_button;
758
&.up { border-radius: 2px 2px 0 0; }
760
&.down { border-radius: 0 0 2px 2px; }
762
}
763
}
764
// OSD vertical
766
.osd &.vertical button:first-child {
767
}
768
// Misc
770
treeview &:not(.vertical) {
771
min-height: 0;
772
border-style: none;
773
border-radius: 0;
774
entry {
776
min-height: 0;
777
padding: 1px 2px;
778
}
779
}
780
}
781
/**************
784
* ComboBoxes *
785
**************/
786
combobox {
787
arrow {
788
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
789
min-height: 16px;
790
min-width: 16px;
791
}
792
decoration,
794
button.combo:checked { transition: none; } // workaround for menuitem selection
795
button.combo cellview {
797
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
798
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
799
}
800
#gtk-combobox-popup-menu {
802
padding: 2px 0;
803
menuitem {
805
min-height: $medium_size - 2px * 2;
806
padding: 0 8px;
807
}
808
}
809
&.linked {
811
button:nth-child(2) {
812
&:dir(ltr) { @extend %linked:last-child; }
813
&:dir(rtl) { @extend %linked:first-child; }
814
}
815
}
816
&:drop(active) { // FIXME: untested
818
box-shadow: none;
819
// button.combo { @extend %button_basic:drop(active); }
821
}
822
}
823
// the combo is a composite widget so the way we do button linking doesn't
825
// work, special case needed. See
826
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
827
.linked:not(.vertical) > combobox:not(:only-child) {
829
> box > button.combo { @extend %linked_middle; }
830
&:first-child > box > button.combo { @extend %linked_first; }
832
&:last-child > box > button.combo { @extend %linked_last; }
834
}
835
.linked.vertical > combobox:not(:only-child) {
837
> box > button.combo { @extend %linked_vertical_middle; }
838
&:first-child > box > button.combo { @extend %linked_vertical_first; }
840
&:last-child > box > button.combo { @extend %linked_vertical_last; }
842
}
843
%combo_flat {
845
border-radius: 0;
846
background-image: none;
847
font-weight: inherit;
848
@include entry(flat-normal);
850
&:hover { box-shadow: inset 0 -2px $fill_color; }
852
&:checked {
854
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
855
$primary_color 100%,
856
transparent 0%)
857
0 0 2 / 0 0 2px;
858
}
859
&:disabled { color: $disabled_fg_color; }
861
}
862
/************
865
* Toolbars *
866
************/
867
toolbar {
868
-GtkWidget-window-dragging: true;
869
padding: $container_padding / 2;
870
background-color: $bg_color;
871
button { @extend %button_basic.flat; }
873
// on OSD
875
.osd & { background-color: transparent; }
876
// stand-alone OSD toolbars
878
&.osd {
879
transition: $shadow_transition;
880
padding: $container_padding;
881
border-radius: 2px;
882
box-shadow: $shadow_2, inset 0 1px $highlight_color;
883
background-color: $base_color;
884
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
886
&.left,
888
&.right,
889
&.top,
890
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
891
}
892
// toolbar separators
894
&.horizontal separator { margin: $container_padding / 2; }
895
&.vertical separator { margin: $container_padding / 2; }
896
&:not(.inline-toolbar):not(.osd) {
898
scale,
899
entry,
900
spinbutton,
901
button { margin: $container_padding / 2; }
902
.linked entry,
904
.linked spinbutton,
905
.linked button {
906
&:not(:first-child) { margin-left: 0; }
907
&:not(:last-child) { margin-right: 0; }
908
}
909
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
911
}
912
}
913
// searchbar, location-bar & inline-toolbar
915
.inline-toolbar {
916
padding: $container_padding;
917
border-style: solid;
918
border-width: 0 1px 1px;
919
border-color: $border_color;
920
background-color: $alt_base_color;
921
}
922
searchbar,
924
.location-bar {
925
padding: $container_padding;
926
border-style: solid;
927
border-width: 0 0 1px;
928
border-color: $border_color;
929
background-color: $bg_color;
930
background-clip: border-box;
931
}
932
/***************
935
* Header bars *
936
***************/
937
%titlebar,
938
headerbar {
939
transition: background-color $shorter_duration $deceleration_curve;
940
min-height: $large_size;
941
padding: 0 $container_padding;
942
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
943
background-color: $titlebar_bg_color;
944
color: $titlebar_fg_color;
945
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
947
&:backdrop {
949
color: $secondary_titlebar_fg_color;
950
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
952
}
953
.title {
955
transition: $longer_transition;
956
padding: 0 12px;
957
font-weight: bold;
958
}
959
.subtitle {
961
transition: $longer_transition;
962
padding: 0 12px;
963
font-size: smaller;
964
@extend .dim-label;
966
}
967
button:not(.suggested-action):not(.destructive-action) {
969
@extend %button_basic.flat;
970
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
972
$titlebar_indicator_color 0%,
973
transparent 0%)
974
0 0 0 / 0 0 0px;
975
&:checked {
977
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
978
$titlebar_indicator_color 100%,
979
transparent 0%)
980
0 0 2 / 0 0 2px;
981
&, &:disabled { background-color: transparent; }
983
}
984
}
985
button.suggested-action, button.destructive-action {
987
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
988
}
989
&.selection-mode {
991
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
992
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
993
transition: background-color 0.00001s $longer_duration;
994
animation: header_ripple_effect $longer_duration $deceleration_curve;
995
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
996
background-color: $primary_color;
997
color: $inverse_fg_color;
998
&:backdrop {
1000
color: $secondary_inverse_fg_color;
1001
}
1002
.subtitle:link { @extend *:link:selected; }
1004
button:not(.suggested-action):not(.destructive-action) {
1006
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1007
currentColor 0%,
1008
transparent 0%)
1009
0 0 0 / 0 0 0px;
1010
color: currentColor;
1011
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1013
&:checked {
1015
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1016
currentColor 100%,
1017
transparent 0%)
1018
0 0 2 / 0 0 2px;
1019
color: currentColor;
1020
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1022
}
1023
}
1024
.selection-menu {
1026
padding-left: 16px;
1027
padding-right: 16px;
1028
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1030
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1032
}
1033
}
1034
.fullscreen &,
1036
.tiled &,
1037
.maximized & {
1038
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1039
box-shadow: $shadow_1;
1040
}
1041
&.default-decoration {
1043
min-height: $small_size;
1044
padding: $container_padding;
1045
box-shadow: inset 0 1px $titlebar_highlight_color;
1046
.fullscreen &,
1048
.tiled &,
1049
.maximized & { box-shadow: none; }
1050
button.titlebutton {
1052
min-height: $small_size;
1053
min-width: $small_size;
1054
margin: 0;
1055
padding: 0;
1056
}
1057
// workaround for non-animatable buttons
1059
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1060
}
1061
.solid-csd & {
1063
&:dir(rtl), &:dir(ltr) { // specificity bump
1064
// margin-left: -2px;
1065
// margin-right: -2px;
1066
// margin-top: -2px;
1067
// border-radius: 0;
1068
// box-shadow: inset 0 1px $titlebar_highlight_color;
1069
}
1070
}
1071
}
1072
headerbar {
1074
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1075
entry,
1076
spinbutton,
1077
// separator,
1078
button {
1079
margin-top: $container_padding;
1080
margin-bottom: $container_padding;
1081
}
1082
switch {
1084
margin-top: $container_padding * 2;
1085
margin-bottom: $container_padding * 2;
1086
}
1087
// reset button margins of the spinbutton
1089
spinbutton button {
1090
margin-top: 0;
1091
margin-bottom: 0;
1092
}
1093
}
1094
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1096
border-top-left-radius: 2px;
1097
border-top-right-radius: 2px;
1098
}
1099
headerbar { // headerbar border rounding
1101
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1102
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1103
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1105
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1107
&:first-child, &:last-child {
1108
border-top-left-radius: 2px;
1109
border-top-right-radius: 2px;
1110
}
1111
}
1112
}
1113
.titlebar:not(headerbar) {
1115
window.csd > & {
1116
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1117
padding: 0;
1118
background-color: transparent;
1119
background-image: none;
1120
border-style: none;
1121
box-shadow: none;
1122
}
1123
> separator {
1125
background-color: $titlebar_bg_color;
1126
background-image: image($border_color);
1127
}
1128
@extend %titlebar;
1130
}
1131
/************
1134
* Pathbars *
1135
************/
1136
%pathbar_button,
1137
.path-bar button {
1138
padding-left: ($medium_size - 24px) / 2;
1139
padding-right: ($medium_size - 24px) / 2;
1140
label:not(:only-child) {
1142
&:first-child { margin-left: 4px; }
1143
&:last-child { margin-right: 4px; }
1145
}
1146
&.slider-button {
1148
padding-left: (24px - 16px) / 2;
1149
padding-right: (24px - 16px) / 2;
1150
}
1151
:not(headerbar) & {
1153
@extend %flat_button;
1154
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1156
$primary_color 0%,
1157
transparent 0%)
1158
0 0 0 / 0 0 0px;
1159
border-radius: 2px;
1160
&:checked {
1162
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1163
$primary_color 100%,
1164
transparent 0%)
1165
0 0 2 / 0 0 2px;
1166
&, &:disabled { background-color: transparent; }
1168
}
1169
}
1170
}
1171
/**************
1174
* Tree Views *
1175
**************/
1176
treeview.view {
1177
@at-root * {
1178
-GtkTreeView-horizontal-separator: 4;
1179
-GtkTreeView-grid-line-width: 1;
1180
-GtkTreeView-grid-line-pattern: '';
1181
-GtkTreeView-tree-line-width: 1;
1182
-GtkTreeView-tree-line-pattern: '';
1183
-GtkTreeView-expander-size: 16;
1184
}
1185
border-left-color: $fill_color; // this is actually the tree lines color,
1187
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1188
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1190
&.separator {
1192
min-height: 1px + 2px * 2;
1193
color: $border_color;
1194
}
1195
&:drop(active) {
1197
border-style: solid none;
1198
border-width: 1px;
1199
border-color: $accent_color;
1200
&.after { border-top-style: none; }
1202
&.before { border-bottom-style: none; }
1204
}
1205
&.expander {
1207
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1208
-gtk-icon-transform: rotate(-90deg);
1209
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1211
&:checked { -gtk-icon-transform: unset; }
1213
color: $secondary_fg_color;
1215
&:hover, &:active { color: $fg_color; }
1217
&:disabled { color: $disabled_secondary_fg_color; }
1219
&:selected {
1221
color: $secondary_inverse_fg_color;
1222
&:hover, &:active { color: $inverse_fg_color; }
1224
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1226
}
1227
}
1228
&.progressbar { // progress bar in treeviews
1230
border-bottom: $bar_size solid $primary_color;
1231
box-shadow: none;
1232
background-color: transparent;
1233
&:selected { border-bottom-color: currentColor; }
1235
}
1236
&.trough { // progress bar trough in treeviews
1238
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1239
box-shadow: none;
1240
background-color: transparent;
1241
&:selected { border-bottom-color: $fill_color; }
1243
}
1244
header {
1246
button {
1247
@extend row.activatable;
1248
padding: 2px 6px;
1250
border-style: none solid solid none;
1251
border-width: 1px;
1252
border-color: $border_color;
1253
border-radius: 0;
1254
background-clip: border-box;
1255
&, &:hover, &:active { box-shadow: none; }
1257
&, &:disabled { background-color: $base_color; }
1259
&:last-child { border-right-style: none; }
1261
}
1262
}
1263
button.dnd,
1265
header.button.dnd { // for treeview-like derive widgets
1266
padding: 2px 6px;
1267
border-style: none solid solid;
1268
border-width: 1px;
1269
border-color: $border_color;
1270
border-radius: 0;
1271
box-shadow: none;
1272
background-color: $base_color;
1273
background-clip: border-box;
1274
color: $primary_color;
1275
}
1276
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1278
}
1279
/*********
1282
* Menus *
1283
*********/
1284
menubar,
1285
.menubar {
1286
-GtkWidget-window-dragging: true;
1287
padding: 0;
1288
// box-shadow: inset 0 -1px $border_color;
1289
background-color: $titlebar_bg_color;
1290
> menuitem {
1292
transition: $shorter_transition;
1293
min-height: 20px;
1294
padding: 4px 8px;
1295
color: $secondary_titlebar_fg_color;
1296
&:hover { // Seems like it :hover even with keyboard focus
1298
transition: none;
1299
background-color: $semi_fill_color;
1300
color: $titlebar_fg_color;
1301
}
1302
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1304
}
1305
}
1306
.csd.popup { border-radius: 2px; }
1308
menu,
1310
.menu,
1311
.context-menu {
1312
margin: 4px 0;
1313
padding: 4px 0;
1314
box-shadow: inset 0 1px $highlight_color;
1315
background-color: $base_color;
1316
border: 1px solid $border_color; // adds borders in a non composited env
1317
.csd & {
1319
border: none; // axes borders in a composited env
1320
border-radius: 2px;
1321
}
1322
menuitem {
1324
transition: $shorter_transition;
1325
min-height: 20px;
1326
min-width: 40px;
1327
padding: 4px 8px;
1328
font: initial;
1329
text-shadow: none;
1330
&:hover {
1332
transition: none;
1333
background-color: $semi_fill_color;
1334
}
1335
&:disabled { color: $disabled_fg_color; }
1337
// submenu indicators
1339
arrow {
1340
min-height: 16px;
1341
min-width: 16px;
1342
&:dir(ltr) {
1344
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1345
margin-left: 8px;
1346
}
1347
&:dir(rtl) {
1349
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1350
margin-right: 8px;
1351
}
1352
}
1353
// avoids labels color being overridden, see
1355
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1356
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1357
}
1358
// overflow arrows
1360
> arrow {
1361
min-height: 16px;
1362
min-width: 16px;
1363
padding: 4px;
1364
border-radius: 0;
1365
background-color: $base_color;
1366
color: $secondary_fg_color;
1367
&.top {
1369
margin-top: -4px;
1370
border-bottom: 1px solid $border_color;
1371
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1372
}
1373
&.bottom {
1375
margin-bottom: -4px;
1376
border-top: 1px solid $border_color;
1377
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1378
}
1379
&:hover {
1381
background-image: image($semi_fill_color);
1382
color: $fg_color;
1383
}
1384
&:disabled {
1386
border-color: transparent;
1387
background-color: transparent;
1388
color: transparent;
1389
// color: $disabled_secondary_fg_color;
1390
}
1391
}
1392
separator { margin: 4px 0; }
1394
}
1395
menuitem {
1397
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1398
}
1399
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1401
// Electron/Atom render all translucent colors in opaque colors.
1402
// It's a very critical issue for this theme and should be fixed by upstream...
1403
.popup:not(.csd) menu {
1404
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1405
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1406
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1407
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1408
menuitem {
1410
color: $opaque_fg_color;
1411
&:hover { background-color: $opaque_semi_fill_color; }
1413
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1415
}
1416
// TODO: not working this, where/how i can set the accelerators?
1418
accelerator { color: $opaque_tertiary_fg_color; }
1419
}
1420
/************
1423
* Popovers *
1424
************/
1425
popover.background {
1426
transition: $shadow_transition;
1427
padding: 2px;
1428
box-shadow: $shadow_2; // TODO: this should really have a highlight
1429
background-color: $lighter_bg_color;
1430
&:backdrop { box-shadow: $shadow_1; }
1432
&, .csd & {
1434
border-style: solid;
1435
border-width: 1px;
1436
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1437
border-radius: 2px + 1px;
1438
}
1439
> stack { margin: -4px; } // remove extra padding from menu style popovers
1441
> toolbar { margin: -2px; }
1443
> list,
1445
> .view,
1446
> toolbar {
1447
border-style: none;
1448
box-shadow: none;
1449
background-color: transparent;
1450
}
1451
&.touch-selection,
1453
&.magnifier,
1454
&.osd { @extend %osd; }
1455
// entry { @extend %entry.flat; }
1457
// button.combo { @extend %combo_flat; }
1459
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1461
&.menu button,
1463
button.model {
1464
@extend %simple_flat_button;
1465
min-height: 32px;
1467
padding: 0 8px;
1468
border-radius: 2px;
1469
&:checked { @extend %selected_items; }
1471
}
1472
separator { margin: 4px 0; }
1474
list separator { margin: 0; }
1476
}
1477
/*************
1479
* Notebooks *
1480
*************/
1481
notebook {
1482
> header {
1483
border-width: 1px;
1484
border-color: $border_color;
1485
background-color: $bg_color;
1486
background-clip: border-box;
1487
&.top {
1489
border-bottom-style: solid;
1490
> tabs {
1491
margin-bottom: -1px;
1492
> tab {
1493
&:hover { box-shadow: inset 0 -2px $fill_color; }
1495
&:checked { box-shadow: inset 0 -2px $primary_color; }
1497
}
1498
}
1499
}
1500
&.bottom {
1502
border-top-style: solid;
1503
> tabs {
1504
margin-top: -1px;
1505
> tab {
1506
&:hover { box-shadow: inset 0 2px $fill_color; }
1508
&:checked { box-shadow: inset 0 2px $primary_color; }
1510
}
1511
}
1512
}
1513
&.left {
1515
border-right-style: solid;
1516
> tabs {
1517
margin-right: -1px;
1518
> tab {
1519
&:hover { box-shadow: inset -2px 0 $fill_color; }
1521
&:checked { box-shadow: inset -2px 0 $primary_color; }
1523
}
1524
}
1525
}
1526
&.right {
1528
border-left-style: solid;
1529
> tabs {
1530
margin-left: -1px;
1531
> tab {
1532
&:hover { box-shadow: inset 2px 0 $fill_color; }
1534
&:checked { box-shadow: inset 2px 0 $primary_color; }
1536
}
1537
}
1538
}
1539
&.top > tabs > arrow {
1541
@extend %notebook_vert_arrows;
1542
border-top-style: none;
1544
}
1545
&.bottom > tabs > arrow {
1547
@extend %notebook_vert_arrows;
1548
border-bottom-style: none;
1550
}
1551
@at-root %notebook_vert_arrows {
1553
padding-left: 4px;
1554
padding-right: 4px;
1555
&.down {
1557
margin-left: -8px;
1558
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1559
}
1560
&.up {
1562
margin-right: -8px;
1563
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1564
}
1565
}
1566
&.left > tabs > arrow {
1568
@extend %notebook_horz_arrows;
1569
border-left-style: none;
1571
}
1572
&.right > tabs > arrow {
1574
@extend %notebook_horz_arrows;
1575
border-right-style: none;
1577
}
1578
@at-root %notebook_horz_arrows {
1580
padding-top: 4px;
1581
padding-bottom: 4px;
1582
&.down {
1584
margin-top: -8px;
1585
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1586
}
1587
&.up {
1589
margin-bottom: -8px;
1590
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1591
}
1592
}
1593
> tabs > arrow {
1595
@extend %simple_flat_button;
1596
min-height: 16px;
1598
min-width: 16px;
1599
border-radius: 0;
1600
}
1601
tab {
1603
transition: $longer_transition,
1604
background-size 0,
1605
background-image 0;
1606
min-height: $small_size;
1607
min-width: $small_size;
1608
padding: $container_padding 12px;
1609
outline-offset: -6px;
1611
border-width: 1px; // for reorderable tabs
1613
border-color: transparent; //
1614
background-image: radial-gradient(circle farthest-corner at center,
1616
$primary_color 10%,
1617
transparent 0%);
1618
background-repeat: no-repeat;
1619
background-position: center;
1620
background-size: 0% 0%;
1621
color: $secondary_fg_color;
1623
font-weight: 500;
1624
&:hover {
1626
color: $fg_color;
1627
&.reorderable-page {
1629
border-color: $border_color;
1630
background-color: $alt_base_color;
1631
}
1632
}
1633
&:disabled { color: $disabled_secondary_fg_color; }
1635
&:checked {
1637
transition: $longer_transition,
1638
background-size $longer_duration $deceleration_curve,
1639
background-image $longer_duration + $ripple_duration $deceleration_curve;
1640
background-image: radial-gradient(circle farthest-corner at center,
1641
transparent 10%,
1642
transparent 0%);
1643
background-size: 1000% 1000%;
1644
color: $fg_color;
1645
&:disabled { color: $disabled_fg_color; }
1647
&.reorderable-page {
1649
border-color: $border_color;
1650
background-color: $base_color;
1651
}
1652
}
1653
// colors the button like the label, overridden otherwise
1655
button.flat {
1656
@extend %small_button;
1657
&:last-child {
1659
margin-left: $container_padding;
1660
margin-right: $container_padding - 12px;
1661
}
1662
&:first-child {
1664
margin-left: $container_padding - 12px;
1665
margin-right: $container_padding;
1666
}
1667
}
1668
}
1669
&.top,
1671
&.bottom {
1672
tabs {
1673
padding-left: 8px;
1674
padding-right: 8px;
1675
&:not(:only-child) {
1677
&:first-child { margin-left: 0; }
1678
&:last-child { margin-right: 0; }
1679
}
1680
tab {
1682
&.reorderable-page {
1683
margin: 0 -1px;
1684
border-style: none solid;
1685
}
1686
}
1687
}
1688
}
1689
&.left,
1691
&.right {
1692
tabs {
1693
padding-top: 8px;
1694
padding-bottom: 8px;
1695
&:not(:only-child) {
1697
&:first-child { margin-top: 0; }
1698
&:last-child { margin-bottom: 0; }
1699
}
1700
tab {
1702
&.reorderable-page {
1703
margin: -1px 0;
1704
border-style: solid none;
1705
}
1706
}
1707
}
1708
}
1709
}
1710
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1712
background-color: $base_color;
1713
entry:not(.search),
1715
spinbutton:not(.vertical) { @extend %entry.flat; }
1716
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1718
button.combo { @extend %combo_flat; }
1720
}
1721
}
1722
/**************
1725
* Scrollbars *
1726
**************/
1727
scrollbar {
1728
$_slider_min_length: 24px;
1729
// disable steppers
1731
@at-root * {
1732
-GtkScrollbar-has-backward-stepper: false;
1733
-GtkScrollbar-has-forward-stepper: false;
1734
}
1735
transition: $longer_transition;
1737
background-color: $base_color;
1738
background-clip: $extra_background_clip;
1739
// scrollbar border
1741
&.top { border-bottom: 1px solid $border_color; }
1742
&.bottom { border-top: 1px solid $border_color; }
1743
&.left { border-right: 1px solid $border_color; }
1744
&.right { border-left: 1px solid $border_color; }
1745
// slider
1747
slider {
1748
transition: $shorter_transition, margin 0, border-width 0;
1749
min-width: 8px;
1750
min-height: 8px;
1751
border: 4px solid transparent;
1752
border-radius: $circular_radius;
1753
background-clip: padding-box;
1754
background-color: $tertiary_fg_color;
1755
&:hover { background-color: $secondary_fg_color; }
1757
&:active { background-color: $fg_color; }
1759
&:disabled { background-color: $disabled_tertiary_fg_color; }
1761
}
1762
&.fine-tune {
1764
slider {
1765
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1766
min-width: 4px;
1767
min-height: 4px;
1768
}
1769
&.horizontal slider { margin: 2px 0; }
1771
&.vertical slider { margin: 0 2px; }
1773
}
1774
&.overlay-indicator {
1776
&:not(.dragging):not(.hovering) {
1777
border-color: transparent;
1778
background-color: transparent;
1779
slider {
1781
min-width: 4px;
1782
min-height: 4px;
1783
margin: 4px - 1px;
1784
border: 1px solid scale-alpha($base_color, $lower_opacity);
1785
}
1786
button {
1788
min-width: 4px;
1789
min-height: 4px;
1790
margin: 4px - 1px;
1791
border: 1px solid scale-alpha($base_color, $lower_opacity);
1792
border-radius: $circular_radius;
1793
background-color: $tertiary_fg_color;
1794
background-clip: padding-box;
1795
-gtk-icon-source: none;
1796
&:disabled { background-color: $disabled_tertiary_fg_color; }
1798
}
1799
&.horizontal {
1801
slider { min-width: $_slider_min_length; }
1802
button { min-width: 8px; }
1804
}
1805
&.vertical {
1807
slider { min-height: $_slider_min_length; }
1808
button { min-height: 8px; }
1810
}
1811
}
1812
&.dragging,
1814
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1815
}
1816
&.horizontal slider { min-width: $_slider_min_length; }
1818
&.vertical slider { min-height: $_slider_min_length; }
1820
// button styling
1822
button {
1823
@extend %simple_flat_button;
1824
min-width: 16px;
1826
min-height: 16px;
1827
padding: 0;
1828
border-radius: 0;
1829
}
1830
// button icons
1832
&.vertical {
1833
button {
1834
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1835
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1837
}
1838
}
1839
&.horizontal {
1841
button {
1842
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1843
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1845
}
1846
}
1847
}
1848
/**********
1851
* Switch *
1852
**********/
1853
switch {
1854
transition: $longer_transition;
1855
margin: $container_padding 0;
1856
border: 4px solid transparent;
1857
border-radius: $circular_radius;
1858
background-color: $fill_color;
1859
background-clip: padding-box;
1860
font-size: 0;
1861
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1863
&:checked {
1865
background-color: scale-alpha($accent_color, 0.5);
1866
&:disabled {
1868
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1869
color: $disabled_fg_color;
1870
}
1871
}
1872
slider {
1874
@include entry(normal);
1875
transition: $longer_transition, $shadow_transition, margin 0;
1877
min-width: $small_size;
1878
min-height: $small_size;
1879
margin: -4px 0 -4px -4px;
1880
border-radius: $circular_radius;
1881
-gtk-outline-radius: $circular_radius;
1882
}
1883
&:hover slider { @include entry(focus); }
1885
&:checked slider {
1887
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1888
animation: needs_attention $longer_duration $deceleration_curve;
1889
margin: -4px -4px -4px 0;
1890
background-color: $accent_color;
1891
color: $inverse_fg_color;
1892
}
1893
&:disabled slider { @include entry(disabled); }
1895
&:checked:disabled slider { animation: none; }
1897
row:selected & {
1899
}
1900
}
1901
/*************************
1904
* Check and Radio items *
1905
*************************/
1906
// draw regular check and radio items using our PNG assets
1907
// all assets are rendered from assets.svg. never add pngs directly
1908
// selection-mode
1910
.view.content-view.check:not(list),
1911
.content-view .tile check:not(list) {
1912
min-height: 40px;
1913
min-width: 40px;
1914
margin: 0;
1915
padding: 0;
1916
box-shadow: none;
1917
background-color: transparent;
1918
background-image: none;
1919
-gtk-icon-shadow: $shadow_1;
1920
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1922
@each $s, $as in ('', '-unchecked'),
1924
(':checked', '-checked') {
1925
&#{$s} {
1926
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1927
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1928
}
1929
}
1930
}
1931
checkbutton.text-button,
1933
radiobutton.text-button {
1934
// this is for a nice focus on check and radios text
1935
padding: 2px;
1936
outline-offset: 0;
1937
label:not(:only-child) { margin: 0 4px; }
1939
}
1940
check,
1942
radio {
1943
min-height: 24px;
1944
min-width: 24px;
1945
margin: -($large_size - 24px) / 2;
1946
padding: ($large_size - 24px) / 2;
1947
@extend %simple_flat_button;
1949
@extend %circular_button;
1951
&:checked, &:indeterminate {
1953
color: $accent_color;
1954
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1956
}
1957
// &:only-child { margin: -12px; }
1959
row &:not(:checked):not(:indeterminate) {
1961
color: gtkalpha(currentColor, $secondary_opacity);
1962
&:hover, &:active { color: currentColor; }
1964
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1966
}
1967
menu menuitem & {
1969
transition: none;
1970
min-height: 16px;
1971
min-width: 16px;
1972
margin: 0; // this is a workaround for a menu check/radio size allocation issue
1973
padding: 0;
1974
&:dir(ltr) { margin-right: 8px; }
1976
&:dir(rtl) { margin-left: 8px; }
1978
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1980
&, &:hover, &:disabled {
1982
box-shadow: none;
1983
// color: inherit;
1984
}
1985
}
1986
}
1987
%check,
1989
check {
1990
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
1991
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
1992
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
1994
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
1995
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
1997
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
1998
}
1999
%radio,
2001
radio {
2002
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2003
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2004
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2006
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2007
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2009
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2010
border-image-slice: $large_size / 2px;
2012
border-image-width: $large_size / 2;
2013
$radio_indicator: 10px / $large_size / 2;
2015
& {
2017
border-image-source: -gtk-gradient(radial,
2018
center center, 0,
2019
center center, 0.001,
2020
to($accent_color),
2021
to(transparent));
2022
}
2023
&:checked:not(:indeterminate) {
2025
border-image-source: -gtk-gradient(radial,
2026
center center, 0,
2027
center center, $radio_indicator,
2028
to($accent_color),
2029
to(transparent));
2030
}
2031
&:checked:not(:indeterminate):disabled {
2033
border-image-source: -gtk-gradient(radial,
2034
center center, 0,
2035
center center, $radio_indicator,
2036
to(scale-alpha($accent_color, $disabled_opacity)),
2037
to(transparent));
2038
}
2039
}
2040
%small_check,
2042
menu menuitem check {
2043
& {
2044
border-radius: 2px;
2045
-gtk-outline-radius: 2px;
2046
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2047
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2048
}
2049
&:checked {
2051
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2052
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2053
}
2054
&:indeterminate {
2056
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2057
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2058
}
2059
}
2060
%small_radio,
2062
menu menuitem radio {
2063
& {
2064
border-image: none;
2065
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2066
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2067
}
2068
&:checked {
2070
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2071
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2072
}
2073
&:indeterminate {
2075
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2076
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2077
}
2078
}
2079
// ANIMATION:
2081
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2082
// the transformation is set on the active state and it get reset on the checked state.
2083
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2084
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2086
check:not(:checked):indeterminate:active,
2088
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2089
check:not(:checked),
2091
radio:not(:checked) {
2092
& {
2093
transition: $longer_transition,
2094
background-size $ripple_duration $deceleration_curve,
2095
background-image $ripple_duration * 2 $deceleration_curve,
2096
-gtk-icon-transform 0;
2097
}
2098
&:active {
2100
transition: $longer_transition,
2101
background-size 0,
2102
background-image 0,
2103
-gtk-icon-transform 0;
2104
}
2105
menu menuitem & { transition: none; }
2107
}
2108
treeview.view check,
2110
treeview.view radio {
2111
padding: 0;
2112
&:hover {
2114
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2115
&:disabled { box-shadow: none; }
2117
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2119
}
2120
& {
2122
color: $secondary_fg_color;
2123
&:hover, &:active { color: $fg_color; }
2125
&:disabled { color: $disabled_secondary_fg_color; }
2127
&:checked, &:indeterminate { color: $accent_color; }
2129
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2131
}
2132
&:selected {
2134
color: $secondary_inverse_fg_color;
2135
&:hover, &:active { color: $inverse_fg_color; }
2137
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2139
&:checked, &:indeterminate { color: $accent_color; }
2141
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2143
}
2144
}
2145
treeview.view radio:checked {
2147
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2148
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2149
border-image: none;
2150
}
2151
/************
2154
* GtkScale *
2155
************/
2156
scale {
2157
// sizing
2158
$_marks_lenght: 8px;
2159
$_marks_distance: 8px;
2160
$slider_size: 24px;
2162
$marks_slider_size: 30px;
2163
$slider_margin: -($slider_size - $bar_size) / 2;
2165
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2166
$color_slider_margin: -($slider_size) / 2;
2168
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2169
min-height: $medium_size - $slider_size;
2171
min-width: $medium_size - $slider_size;
2172
padding: ($slider_size / 2);
2173
* { transition: $longer_transition; }
2175
// the slider is inside the trough, so to have make it bigger there's a negative margin
2177
slider {
2178
min-height: $slider_size;
2179
min-width: $slider_size;
2180
margin: $slider_margin;
2181
}
2182
// the backing bit
2184
trough {
2185
outline-offset: 2px;
2186
background-color: $fill_color;
2187
&:disabled { color: $disabled_fg_color; }
2189
}
2190
// the colored part of the backing bit
2192
highlight {
2193
background-color: $accent_color;
2194
&:disabled { background-color: transparent; }
2196
}
2197
// this is another differently styled part of the backing bit, the most relevant use case is for example
2199
// in media player to indicate how much video stream as been cached
2200
fill {
2201
background-color: $fill_color;
2202
&:disabled { background-color: transparent; }
2204
}
2205
slider {
2207
transition: all $shorter_duration $standard_curve;
2208
// border-radius: 100%;
2209
// background-color: $accent_color;
2210
background-repeat: no-repeat;
2211
background-position: center;
2212
@each $s, $as in ('', ''),
2214
(':disabled', '-disabled') {
2215
&#{$s} {
2216
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2217
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2219
}
2220
}
2221
background-size: calc(100% - 8px);
2223
&:hover { background-size: calc(100% - 4px); }
2225
&:active { background-size: calc(100% - 0px); }
2227
}
2228
// click-and-hold the slider to activate
2230
&.fine-tune {
2231
// to make the slider shrink in fine-tune mode
2232
slider { background-size: calc(100% - 12px); }
2233
}
2234
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2236
marks {
2238
color: $fill_color;
2239
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2241
(bottom, bottom, top),
2242
(top, left, right),
2243
(bottom, right, left) {
2244
&.#{$marks_class} {
2245
margin-#{$marks_margin}: $_marks_distance;
2246
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2247
}
2248
}
2249
}
2250
&.horizontal {
2252
indicator {
2253
min-height: $_marks_lenght;
2254
min-width: 1px;
2255
}
2256
}
2257
&.vertical {
2259
indicator {
2260
min-height: 1px;
2261
min-width: $_marks_lenght;
2262
}
2263
}
2264
// *WARNING* scale with marks madness following
2266
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2268
('vertical', 'vert') {
2269
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2270
('marks-after', 'marks-after:not(.marks-before)') {
2271
&.#{$dir_class}.#{$marks_class} {
2272
slider {
2273
@each $state, $state_infix in ('', ''),
2274
(':disabled', '-disabled') {
2275
&#{$state} {
2276
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2277
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2279
}
2280
}
2281
@if $dir_class == 'horizontal' {
2283
min-height: $marks_slider_size;
2284
min-width: $slider_size;
2285
@if $marks_infix == 'marks-before' {
2287
margin-top: $marks_slider_margin;
2288
background-position: center calc(100% - 4px);
2290
&:hover { background-position: center calc(100% - 2px); }
2292
&:active { background-position: center calc(100% - 0px); }
2294
}
2295
@if $marks_infix == 'marks-after' {
2297
margin-bottom: $marks_slider_margin;
2298
background-position: center calc(4px);
2300
&:hover { background-position: center calc(2px); }
2302
&:active { background-position: center calc(0px); }
2304
}
2305
}
2306
@if $dir_class == 'vertical' {
2308
min-height: $slider_size;
2309
min-width: $marks_slider_size;
2310
@if $marks_infix == 'marks-before' {
2312
margin-left: $marks_slider_margin;
2313
background-position: calc(4px) center;
2315
&:hover { background-position: calc(2px) center; }
2317
&:active { background-position: calc(0px) center; }
2319
}
2320
@if $marks_infix == 'marks-after' {
2322
margin-right: $marks_slider_margin;
2323
background-position: calc(100% - 4px) center;
2325
&:hover { background-position: calc(100% - 2px) center; }
2327
&:active { background-position: calc(100% - 0px) center; }
2329
}
2330
}
2331
}
2332
&.fine-tune slider {
2334
@if $dir_class == 'horizontal' {
2335
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2336
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2338
}
2339
@if $dir_class == 'vertical' {
2341
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2342
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2344
}
2345
}
2346
}
2347
}
2348
}
2349
&.color {
2351
min-height: 0;
2352
min-width: 0;
2353
&.horizontal {
2355
padding: 0 0 12px 0;
2356
slider {
2358
&:dir(ltr), &:dir(rtl) { // specificity bump
2359
margin-bottom: $color_slider_margin;
2360
margin-top: $color_marks_slider_margin;
2361
}
2362
}
2363
}
2364
&.vertical {
2366
&:dir(ltr) {
2367
padding: 0 0 0 12px;
2368
slider {
2370
margin-left: $color_slider_margin;
2371
margin-right: $color_marks_slider_margin;
2372
}
2373
}
2374
&:dir(rtl) {
2376
padding: 0 12px 0 0;
2377
slider {
2379
margin-right: $color_slider_margin;
2380
margin-left: $color_marks_slider_margin;
2381
}
2382
}
2383
}
2384
}
2385
}
2386
/*****************
2389
* Progress bars *
2390
*****************/
2391
progressbar {
2392
// sizing
2393
&.horizontal {
2394
trough,
2395
progress { min-height: $bar_size; }
2396
}
2397
&.vertical {
2399
trough,
2400
progress { min-width: $bar_size; }
2401
}
2402
// FIXME: insensitive state missing and some other state should be set probably
2404
color: $tertiary_fg_color;
2405
font-size: smaller;
2406
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2408
progress { background-color: $primary_color; }
2410
&.osd { // progressbar.osd used for epiphany page loading progress
2412
// min-width: $bar_size;
2413
// min-height: $bar_size;
2414
// background-color: transparent;
2415
// trough { background-color: transparent; }
2417
// progress { background-color: $primary_color; }
2419
}
2420
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2422
}
2423
/*************
2426
* Level Bar *
2427
*************/
2428
levelbar {
2429
block {
2430
min-width: $medium_size;
2431
min-height: $bar_size;
2432
}
2433
&.vertical block {
2435
min-width: $bar_size;
2436
min-height: $medium_size;
2437
}
2438
trough {
2440
padding: 2px;
2441
border-radius: 2px;
2442
@include entry(normal);
2444
&:disabled { @include entry(disabled); }
2446
}
2447
&.horizontal.discrete {
2449
block { margin: 0 1px; }
2450
trough { padding: 2px 1px; }
2452
}
2453
&.vertical.discrete {
2455
block { margin: 1px 0; }
2456
trough { padding: 1px 2px; }
2458
}
2459
block {
2461
&.low { background-color: $warning_color; }
2462
&.high,
2464
&:not(.empty) { background-color: $primary_color; }
2465
&.full { background-color: $success_color; }
2467
&.empty {
2469
background-color: $fill_color;
2470
color: $disabled_fg_color;
2471
}
2472
}
2473
}
2474
/****************
2477
* Print dialog *
2478
*****************/
2479
printdialog {
2480
paper {
2481
padding: 0;
2482
border: 1px solid $border_color;
2483
background-color: $base_color;
2484
color: $fg_color;
2485
}
2486
.dialog-action-box { margin: 12px; }
2488
}
2489
/**********
2492
* Frames *
2493
**********/
2494
frame > border,
2495
.frame {
2496
margin: 0;
2497
padding: 0;
2498
border: 1px solid $border_color;
2499
border-radius: 0;
2500
box-shadow: none;
2501
&.flat { border-style: none; }
2503
}
2504
frame.flat > border { @extend .frame.flat; } // for backporting
2506
actionbar > revealer > box {
2508
padding: $container_padding;
2509
border-top: 1px solid $border_color;
2510
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2512
}
2513
scrolledwindow {
2515
viewport.frame { // avoid double borders when viewport inside scrolled window
2516
border-style: none;
2517
}
2518
// This is used when content is touch-dragged past boundaries.
2520
// draws a box on top of the content, the size changes programmatically.
2521
@at-root overshoot {
2522
&.top { @include overshoot(top); }
2523
&.bottom { @include overshoot(bottom); }
2525
&.left { @include overshoot(left); }
2527
&.right { @include overshoot(right); }
2529
}
2530
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2532
@at-root undershoot {
2533
&.top { @include undershoot(top); }
2534
&.bottom { @include undershoot(bottom); }
2536
&.left { @include undershoot(left); }
2538
&.right { @include undershoot(right); }
2540
}
2541
@at-root junction { // the small square between two scrollbars
2543
border-style: solid none none solid;
2544
border-width: 1px;
2545
border-color: $border_color;
2546
background-color: $base_color;
2547
&:dir(rtl) { border-style: solid solid none none; }
2549
}
2550
}
2551
// vbox and hbox separators
2553
separator {
2554
min-width: 1px;
2555
min-height: 1px;
2556
background-color: $border_color;
2557
}
2558
/*********
2561
* Lists *
2562
*********/
2563
list {
2564
border-color: $border_color;
2565
background-color: $base_color;
2566
row { padding: 2px; }
2568
}
2569
// FIXME
2571
$row_transition: $longer_transition, background-color 0, color 0;
2572
row {
2574
&.activatable {
2575
transition: $row_transition,
2576
background-size $ripple_duration $deceleration_curve,
2577
background-image $ripple_duration * 2 $deceleration_curve;
2578
box-shadow: inset 0 0 0 9999px transparent;
2579
background-image: radial-gradient(circle farthest-corner at center,
2580
transparent 10%,
2581
transparent 0%);
2582
background-repeat: no-repeat;
2583
background-position: center;
2584
background-size: 1000% 1000%;
2585
&:hover {
2587
transition: $row_transition,
2588
box-shadow 0,
2589
background-size $ripple_duration $deceleration_curve,
2590
background-image $ripple_duration * 2 $deceleration_curve;
2591
box-shadow: inset 0 0 0 9999px $row_fill_color;
2592
}
2593
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2595
&:active {
2596
transition: $row_transition,
2597
background-size 0,
2598
background-image 0;
2599
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2600
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2601
background-image: radial-gradient(circle farthest-corner at center,
2602
$semi_fill_color 10%,
2603
transparent 0%);
2604
background-size: 0% 0%;
2605
}
2606
}
2607
&:selected { @extend %selected_items; }
2609
}
2610
/*********************
2613
* App Notifications *
2614
*********************/
2615
.app-notification {
2616
@extend %osd;
2617
@extend toolbar.osd;
2619
margin: 8px;
2621
button { @extend %button_basic.flat; }
2623
&.frame,
2625
border { border-style: none; }
2626
}
2627
/*************
2630
* Expanders *
2631
*************/
2632
expander {
2633
arrow {
2634
transition: all $shorter_duration $standard_curve;
2635
min-width: 16px;
2636
min-height: 16px;
2637
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2638
-gtk-icon-transform: rotate(-90deg);
2639
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2641
&:checked { -gtk-icon-transform: unset; }
2643
color: $secondary_fg_color;
2645
&:hover, &:active { color: $fg_color; }
2647
&:disabled { color: $disabled_secondary_fg_color; }
2649
&:selected {
2651
color: $secondary_inverse_fg_color;
2652
&:hover, &:active { color: $inverse_fg_color; }
2654
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2656
}
2657
}
2658
}
2659
/************
2662
* Calendar *
2663
************/
2664
calendar {
2665
padding: 1px;
2666
border: 1px solid $border_color;
2667
color: $fg_color;
2668
&:disabled { color: $disabled_fg_color; }
2670
&:selected {
2672
@extend %selected_items;
2673
border-radius: 2px + 1px;
2675
}
2676
&.header {
2678
border-style: none none solid;
2679
border-radius: 0;
2680
}
2681
&.button { @extend %simple_flat_button; }
2683
&.highlight {
2685
color: gtkalpha(currentColor, $tertiary_opacity);
2686
font-weight: 500;
2687
}
2688
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2690
}
2691
/***********
2694
* Dialogs *
2695
***********/
2696
messagedialog { // Message Dialog styling
2697
&.background { background-color: $lighter_bg_color; }
2698
.titlebar {
2700
min-height: $small_size;
2701
border-style: none;
2702
box-shadow: inset 0 1px $highlight_color;
2703
background-color: $lighter_bg_color;
2704
color: $fg_color;
2705
&:backdrop { color: $secondary_fg_color; }
2707
}
2708
&.csd { // rounded bottom border styling for csd version
2710
&.background {
2711
// bigger radius for better antialiasing
2712
border-bottom-left-radius: 2px;
2713
border-bottom-right-radius: 2px;
2714
}
2715
.dialog-action-area button {
2717
padding: 8px 16px;
2718
border-top: 1px solid $border_color;
2719
border-radius: 0;
2720
@extend %simple_flat_button;
2722
&:first-child { border-bottom-left-radius: 2px; }
2724
&:last-child { border-bottom-right-radius: 2px; }
2726
}
2727
}
2728
}
2729
filechooser {
2731
.dialog-action-box { border-top: 1px solid $border_color; }
2732
#pathbarbox {
2734
border-bottom: 1px solid $border_color;
2735
background-color: $bg_color;
2736
}
2737
}
2738
filechooserbutton:drop(active) {
2740
box-shadow: none;
2741
}
2742
/***********
2745
* Sidebar *
2746
***********/
2747
.sidebar {
2748
border-style: none;
2749
background-color: $lighter_bg_color;
2750
@at-root %sidebar_left,
2752
&:dir(ltr),
2753
&.left,
2754
&.left:dir(rtl) {
2755
border-right: 1px solid $border_color;
2756
border-left-style: none;
2757
}
2758
@at-root %sidebar_right,
2760
&:dir(rtl),
2761
&.right {
2762
border-left: 1px solid $border_color;
2763
border-right-style: none;
2764
}
2765
list { background-color: transparent; }
2767
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2769
}
2770
stacksidebar {
2772
&.sidebar {
2773
&:dir(ltr),
2774
&.left,
2775
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2776
&:dir(rtl),
2778
&.right { list { @extend %sidebar_right; }}
2779
}
2780
row {
2782
padding: 10px 4px;
2783
> label {
2785
padding-left: 6px;
2786
padding-right: 6px;
2787
}
2788
&.needs-attention > label { @extend %needs_attention; }
2790
}
2791
}
2792
/****************
2795
* File chooser *
2796
****************/
2797
placessidebar {
2798
> viewport.frame { border-style: none; }
2799
list { padding: (4px - 3px) 0 4px; }
2801
row {
2803
// Needs overriding of the GtkListBoxRow padding
2804
min-height: 32px;
2805
margin: -1px 0; // Remove unknown margins
2806
padding: 0;
2807
// Using margins/padding directly in the SidebarRow
2809
// will make the animation of the new bookmark row jump
2810
> revealer { padding: 0 12px; }
2811
&:selected { color: $inverse_fg_color; }
2813
&:disabled { color: $disabled_fg_color; }
2815
image.sidebar-icon {
2817
opacity: $tertiary_opacity; // dim the device icons
2818
&:dir(ltr) { padding-right: 8px; }
2820
&:dir(rtl) { padding-left: 8px; }
2821
}
2822
label.sidebar-label {
2824
&:dir(ltr) { padding-right: 2px; }
2825
&:dir(rtl) { padding-left: 2px; }
2826
}
2827
@at-root button.sidebar-button {
2829
@extend %simple_flat_button;
2830
@extend %small_button;
2832
row:selected & {
2834
}
2835
}
2836
&.sidebar-placeholder-row {
2838
min-height: 2px;
2839
padding: 0 8px;
2840
background-image: image($accent_color);
2841
background-clip: content-box;
2842
}
2843
&.sidebar-new-bookmark-row { color: $accent_color; }
2845
&:drop(active):not(:disabled) {
2847
box-shadow: inset 0 0 0 2px $accent_color;
2848
&:selected {
2850
// background-color: $accent_color;
2851
// color: $inverse_fg_color;
2852
}
2853
}
2854
}
2855
}
2856
placesview {
2858
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2859
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2861
// this selects the "connect to server" label
2863
> actionbar > revealer > box > label {
2864
padding-left: 8px;
2865
padding-right: 8px;
2866
}
2867
}
2868
/*********
2871
* Paned *
2872
*********/
2873
paned {
2874
> separator {
2875
min-width: 1px;
2876
min-height: 1px;
2877
-gtk-icon-source: none; // defeats the ugly default handle decoration
2878
border-style: none; // just to be sure
2879
background-color: transparent;
2880
// workaround, using background istead of a border since the border will get rendered twice (?)
2881
background-image: image($border_color);
2882
background-size: 1px 1px;
2883
background-clip: content-box; // avoids borders image being rendered twice (?)
2884
&.wide {
2886
min-width: 6px;
2887
min-height: 6px;
2888
background-color: $bg_color;
2889
background-image: image($border_color), image($border_color);
2890
background-size: 1px 1px, 1px 1px;
2891
}
2892
}
2893
&.horizontal > separator {
2895
background-repeat: repeat-y;
2896
&:dir(ltr) {
2898
margin: 0 -8px 0 0;
2899
padding: 0 8px 0 0;
2900
background-position: left;
2901
}
2902
&:dir(rtl) {
2904
margin: 0 0 0 -8px;
2905
padding: 0 0 0 8px;
2906
background-position: right;
2907
}
2908
&.wide {
2910
margin: 0;
2911
padding: 0;
2912
background-repeat: repeat-y, repeat-y;
2913
background-position: left, right;
2914
}
2915
}
2916
&.vertical > separator {
2918
margin: 0 0 -8px 0;
2919
padding: 0 0 8px 0;
2920
background-repeat: repeat-x;
2921
background-position: top;
2922
&.wide {
2924
margin: 0;
2925
padding: 0;
2926
background-repeat: repeat-x, repeat-x;
2927
background-position: bottom, top;
2928
}
2929
}
2930
}
2931
/**************
2934
* GtkInfoBar *
2935
**************/
2936
infobar {
2937
border-style: none;
2938
&.info { background-color: $info_bg_color; }
2940
&.question { background-color: $question_bg_color; }
2942
&.warning { background-color: $warning_bg_color; }
2944
&.error { background-color: $error_bg_color; }
2946
&.info,
2948
&.question,
2949
&.warning,
2950
&.error {
2951
> label, & { color: $inverse_fg_color; }
2952
button { @extend %button_selected; }
2954
selection {}
2956
*:link { @extend %link_selected; }
2958
}
2959
}
2960
/************
2963
* Tooltips *
2964
************/
2965
tooltip {
2966
&.background {
2967
// background-color needs to be set this way otherwise it gets drawn twice
2968
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2969
box-shadow: inset 0 1px $highlight_color;
2970
background-color: scale-alpha($base_color, $higher_opacity);
2971
}
2972
// @extend %osd;
2974
// padding: 4px; /* not working */
2976
border-radius: 2px;
2977
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2978
&:not(.csd):not(.unity-csd) {
2980
border: 1px solid $border_color;
2981
border-radius: 2px + 1px;
2982
background-clip: $extra_background_clip;
2983
}
2984
// FIXME: we need a border or tooltips vanish on black background.
2986
decoration { background-color: transparent; }
2987
label {
2989
// tooltip label already seems to have 6px margins
2990
min-height: 32px - 6px * 2;
2991
padding: 0 8px - 6px;
2992
}
2993
* {
2995
// workaround for Eclipse.
2996
// do not include any declaration here.
2997
// padding: 0;
2998
// background-color: transparent;
2999
// color: inherit;
3000
}
3001
}
3002
/*****************
3005
* Color Chooser *
3006
*****************/
3007
colorswatch {
3008
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3009
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3010
// applied to the overlay box.
3011
// base color corners rounding
3013
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3014
// sports a bigger radius.
3015
// nth-child is needed by the custom color strip.
3016
&.top {
3018
border-top-left-radius: $material_radius + 0.5px;
3019
border-top-right-radius: $material_radius + 0.5px;
3020
overlay {
3022
border-top-left-radius: $material_radius;
3023
border-top-right-radius: $material_radius;
3024
}
3025
}
3026
&.bottom {
3028
border-bottom-left-radius: $material_radius + 0.5px;
3029
border-bottom-right-radius: $material_radius + 0.5px;
3030
overlay {
3032
border-bottom-left-radius: $material_radius;
3033
border-bottom-right-radius: $material_radius;
3034
}
3035
}
3036
&.left,
3038
&:first-child:not(.top) {
3039
border-top-left-radius: $material_radius + 0.5px;
3040
border-bottom-left-radius: $material_radius + 0.5px;
3041
overlay {
3043
border-top-left-radius: $material_radius;
3044
border-bottom-left-radius: $material_radius;
3045
}
3046
}
3047
&.right,
3049
&:last-child:not(.bottom) {
3050
border-top-right-radius: $material_radius + 0.5px;
3051
border-bottom-right-radius: $material_radius + 0.5px;
3052
overlay {
3054
border-top-right-radius: $material_radius;
3055
border-bottom-right-radius: $material_radius;
3056
}
3057
}
3058
&.dark overlay { color: $light_fg_color; }
3060
&.light overlay { color: $dark_fg_color; }
3062
&.dark { color: $light_fg_color; } // for focus ring
3064
&.light { color: $dark_fg_color; } // for focus ring
3066
&:drop(active) {
3068
box-shadow: none;
3069
&.light overlay {
3071
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3072
}
3073
&.dark overlay {
3075
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3076
}
3077
}
3078
overlay {
3080
transition: $shadow_transition;
3081
box-shadow: $shadow_1;
3082
&:hover { box-shadow: $shadow_2; }
3084
}
3085
&#add-color-button {
3087
border-radius: $material_radius $material_radius 0 0;
3088
color: $light_fg_color; // for focus ring
3089
&:only-child { border-radius: $material_radius; }
3091
overlay {
3093
background-image: linear-gradient(to right,
3094
$error_bg_color 25%,
3095
$warning_bg_color 25%, $warning_bg_color 50%,
3096
$info_bg_color 50%, $info_bg_color 75%,
3097
$question_bg_color 75%);
3098
color: $light_fg_color;
3099
}
3100
}
3101
&:disabled {
3103
opacity: $disabled_opacity;
3104
overlay { box-shadow: none; }
3106
}
3107
row:selected & {
3109
}
3110
&#editor-color-sample {
3112
border-radius: $material_radius + 0.5px;
3113
overlay { border-radius: $material_radius; }
3115
// overlay:hover { box-shadow: $shadow_1; }
3117
}
3118
}
3119
// colorscale popup
3121
colorchooser .popover.osd {
3122
transition: $shadow_transition;
3123
border-radius: 2px;
3124
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3125
background-color: $base_color;
3126
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3128
spinbutton:not(.vertical) { @extend %entry.flat; }
3130
}
3131
/********
3134
* Misc *
3135
********/
3136
// content view (grid/list)
3137
.content-view {
3138
background-color: $bg_color;
3139
// &:hover { -gtk-icon-effect: highlight; }
3141
rubberband, .rubberband { @extend rubberband; }
3143
}
3144
.scale-popup {
3146
.osd & { @extend %osd; }
3147
.osd & button.flat { // FIXME: quick hack, redo properly
3149
}
3150
button { // +/- buttons on GtkVolumeButton popup
3152
}
3153
}
3154
/**********************
3157
* Window Decorations *
3158
**********************/
3159
decoration {
3160
transition: $shadow_transition;
3161
border-radius: 2px 2px 0 0;
3162
box-shadow: $shadow_4, 0 16px 16px transparent;
3163
// FIXME rationalize shadows
3165
// this is used for the resize cursor area
3167
margin: 8px;
3168
&:backdrop {
3170
// the transparent shadow here is to enforce that the shadow extents don't
3171
// change when we go to backdrop, to prevent jumping windows.
3172
// The biggest shadow should be in the same order then in the active state
3173
// or the jumping will happen during the transition.
3174
box-shadow: $shadow_2, 0 16px 16px transparent;
3175
}
3176
.maximized &,
3178
.fullscreen &,
3179
.tiled & { border-radius: 0; }
3180
.popup & { box-shadow: none; }
3182
// server-side decorations as used by mutter
3184
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3185
.csd.popup & {
3187
border-radius: 2px;
3188
box-shadow: $shadow_2;
3189
}
3190
tooltip.csd & {
3192
border-radius: 2px;
3193
box-shadow: $shadow_2;
3194
}
3195
messagedialog.csd & {
3197
border-radius: 2px;
3198
// box-shadow: $shadow_4, 0 16px 16px transparent;
3199
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3201
}
3202
.solid-csd & {
3204
margin: 0;
3205
// padding: 4px;
3206
border-radius: 0;
3207
box-shadow: none;
3208
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3209
background-color: $titlebar_bg_color;
3210
}
3211
}
3212
// Window Close button
3214
button.titlebutton {
3215
// @extend %simple_flat_button;
3216
@extend %circular_button;
3218
.selection-mode & {
3220
}
3221
}
3222
// catch all extend :)
3225
%selected_items {
3227
background-color: $primary_color;
3228
@at-root %nobg_selected_items, & {
3230
color: $inverse_fg_color;
3231
&:disabled { color: $disabled_inverse_fg_color; }
3233
}
3234
}
3235
.monospace { font-family: monospace; }
3237
/**********************
3240
* Touch Copy & Paste *
3241
**********************/
3242
// touch selection handlebars for the Popover.osd above
3243
cursor-handle {
3244
border-radius: $circular_radius;
3245
background-color: $accent_color;
3246
background-image: none;
3247
&.top:dir(ltr), &.bottom:dir(rtl) {
3249
padding-left: 6px;
3250
border-top-right-radius: 0;
3251
}
3252
&.bottom:dir(ltr), &.top:dir(rtl) {
3254
padding-right: 6px;
3255
border-top-left-radius: 0;
3256
}
3257
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3259
-GtkWidget-text-handle-width: 24;
3260
-GtkWidget-text-handle-height: 30;
3261
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3263
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3264
url('#{$_url}@2.png'));
3265
}
3266
}
3267
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3269
// shortcut window keys
3271
.keycap {
3272
min-width: 28px - 8px * 2;
3273
min-height: 28px - 2px;
3274
margin-top: 2px;
3275
padding-bottom: 2px;
3276
padding-left: 8px;
3277
padding-right: 8px;
3278
border: solid 1px $border_color;
3280
border-radius: 2px + 1px;
3281
box-shadow: inset 0 -2px $border_color;
3282
background-color: $base_color;
3283
color: $fg_color;
3284
font-size: smaller;
3285
}
3286
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3288
transition: $longer_transition;
3289
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3290
caret-color: $accent_color;
3291
}
3292
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3294
stackswitcher button.circular,
3296
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3297
min-width: $medium_size;
3298
min-height: $medium_size;
3299
padding: 0;
3300
}
3301