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
&.font,
513
&.file { separator { @extend %hide_separators; }}
514
// &.font { > box > box > label { font-weight: bold; }}
516
// inline-toolbar buttons
518
.inline-toolbar & {
519
// @extend %button_basic.flat;
520
&:not(.text-button) { @extend %circular_button; }
522
}
523
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
525
@at-root %circular_button,
527
&.close,
528
&.circular { // The Bloody Circul Button
529
border-radius: $circular_radius;
530
-gtk-outline-radius: $circular_radius;
531
// label { padding: 0; }
533
}
534
@at-root %small_button {
536
min-height: $small_size;
537
min-width: $small_size;
538
padding: 0;
539
border-radius: $circular_radius;
540
-gtk-outline-radius: $circular_radius;
541
}
542
}
543
%needs_attention {
545
animation: needs_attention $longer_duration $deceleration_curve forwards;
546
background-repeat: no-repeat;
547
background-position: right 3px;
548
background-size: 6px 6px;
549
&:dir(rtl) { background-position: left 3px; }
551
}
552
// all the following is for the +|- buttons on inline toolbars, that way
554
// should really be deprecated...
555
.inline-toolbar toolbutton > button { // redefining the button look is
556
// needed since those are flat...
557
}
558
// More inline toolbar buttons
560
toolbar.inline-toolbar toolbutton:not(:only-child) {
561
// > button.flat { @extend %linked_middle; }
562
// &:first-child > button.flat { @extend %linked_first; }
564
// &:last-child > button.flat { @extend %linked_last; }
566
}
567
%linked:not(:only-child) {
569
@at-root %linked_middle,
570
& {
571
border-radius: 0;
572
-gtk-outline-radius: 2px;
573
}
574
@at-root %linked_first,
576
&:first-child { border-radius: 2px 0 0 2px; }
577
@at-root %linked_last,
579
&:last-child { border-radius: 0 2px 2px 0; }
580
}
581
%linked_vertical:not(:only-child) {
583
@at-root %linked_vertical_middle,
584
& {
585
border-radius: 0;
586
-gtk-outline-radius: 2px;
587
}
588
@at-root %linked_vertical_first,
590
&:first-child { border-radius: 2px 2px 0 0; }
591
@at-root %linked_vertical_last,
593
&:last-child { border-radius: 0 0 2px 2px; }
594
}
595
/* menu buttons */
597
modelbutton.flat,
598
.menuitem.button.flat {
599
min-height: $menuitem_size;
600
padding: 0 8px;
601
border-radius: 2px;
602
color: inherit;
603
@extend %simple_flat_button;
605
&:selected { @extend %selected_items; }
607
check,
609
radio {
610
box-shadow: none;
611
background-image: none;
612
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
614
&:last-child { margin-left: -8px; margin-right: -16px; }
616
&:first-child { margin-left: -16px; margin-right: -8px; }
618
}
619
}
620
modelbutton.flat arrow {
622
background: none;
623
&:hover { background: none; }
625
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
627
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
629
}
630
button.color {
632
min-height: $small_size;
633
min-width: $small_size;
634
padding: $container_padding;
635
colorswatch:only-child {
637
// &, overlay { border-radius: 0; }
638
}
639
}
640
/*********
643
* Links *
644
*********/
645
*:link {
646
&, &:hover, &:active { color: $link_color; }
647
&:visited {
649
&, &:hover, &:active { color: $visited_link_color; }
650
}
651
@at-root %link_selected,
653
&:selected,
654
*:selected & { color: $inverse_fg_color; }
655
}
656
button:link,
658
button:visited {
659
@extend *:link;
660
> label { text-decoration-line: underline; }
662
}
663
/*****************
665
* GtkSpinButton *
666
*****************/
667
spinbutton {
668
&:not(.vertical) {
669
// in this horizontal configuration, the whole spinbutton
670
// behaves as the entry, so we extend the entry styling
671
// and nuke the style on the internal entry
672
@extend %entry;
673
padding: 0;
675
%spinbutton_entry,
677
entry {
678
min-width: $large_size - 8px * 2;
679
// reset all the other props since the spinbutton node is styled here
680
margin: 0;
681
border-image: none;
682
border-radius: 0;
683
box-shadow: none;
684
background-color: transparent;
685
//
686
// This will help to simplify spinbutton's code, but unfortunatelly
687
// doesn't work properly in :dir(rtl). It needs z-index property.
688
//
689
// min-width: $large_size - 8px;
690
//
691
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
692
//
693
// &:dir(ltr) {
694
// margin-right: -$spinbuttons_width;
695
// padding-right: $spinbuttons_width;
696
// }
697
//
698
// &:dir(rtl) {
699
// margin-left: -$spinbuttons_width;
700
// padding-left: $spinbuttons_width;
701
// }
702
}
703
button {
705
// margin: $container_padding;
706
border: solid $container_padding transparent;
707
@extend %simple_flat_button;
709
@extend %small_button;
711
&.up:dir(ltr),
713
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
714
&.up:dir(rtl),
716
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
717
}
718
}
719
// OSD horizontal
721
.osd &:not(.vertical) {
722
button {
723
}
724
}
725
// Vertical
727
&.vertical {
728
// in the vertical configuration, we treat the spinbutton
729
// as a box, and tweak the style of the entry in the middle
730
// so that it's linked
731
// FIXME: this should not be set at all, but otherwise it gets the wrong
733
// color
734
&:disabled { color: $disabled_fg_color; }
735
&:drop(active) {
737
box-shadow: none;
738
}
739
entry {
741
min-height: $medium_size;
742
min-width: $large_size;
743
padding: 0;
744
}
745
button {
747
min-height: $medium_size;
748
min-width: $large_size;
749
padding: 0;
750
@extend %simple_flat_button;
752
&.up { border-radius: 2px 2px 0 0; }
754
&.down { border-radius: 0 0 2px 2px; }
756
}
757
}
758
// OSD vertical
760
.osd &.vertical button:first-child {
761
}
762
// Misc
764
treeview &:not(.vertical) {
765
min-height: 0;
766
border-style: none;
767
border-radius: 0;
768
entry {
770
min-height: 0;
771
padding: 1px 2px;
772
}
773
}
774
}
775
/**************
778
* ComboBoxes *
779
**************/
780
combobox {
781
arrow {
782
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
783
min-height: 16px;
784
min-width: 16px;
785
}
786
decoration,
788
button.combo:checked { transition: none; } // workaround for menuitem selection
789
button.combo cellview {
791
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
792
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
793
}
794
#gtk-combobox-popup-menu {
796
padding: 2px 0;
797
menuitem {
799
min-height: $medium_size - 2px * 2;
800
padding: 0 8px;
801
}
802
// overflow arrows
804
> arrow {
805
&.top { margin-top: -2px; }
806
&.bottom { margin-bottom: -2px * 3; }
808
}
809
}
810
&.linked {
812
button:nth-child(2) {
813
&:dir(ltr) { @extend %linked:last-child; }
814
&:dir(rtl) { @extend %linked:first-child; }
815
}
816
}
817
&:drop(active) { // FIXME: untested
819
box-shadow: none;
820
// button.combo { @extend %button_basic:drop(active); }
822
}
823
}
824
// the combo is a composite widget so the way we do button linking doesn't
826
// work, special case needed. See
827
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
828
.linked:not(.vertical) > combobox:not(:only-child) {
830
> box > button.combo { @extend %linked_middle; }
831
&:first-child > box > button.combo { @extend %linked_first; }
833
&:last-child > box > button.combo { @extend %linked_last; }
835
}
836
.linked.vertical > combobox:not(:only-child) {
838
> box > button.combo { @extend %linked_vertical_middle; }
839
&:first-child > box > button.combo { @extend %linked_vertical_first; }
841
&:last-child > box > button.combo { @extend %linked_vertical_last; }
843
}
844
%combo_flat {
846
border-radius: 0;
847
background-image: none;
848
font-weight: inherit;
849
@include entry(flat-normal);
851
&:hover { box-shadow: inset 0 -2px $fill_color; }
853
&:checked {
855
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
856
$primary_color 100%,
857
transparent 0%)
858
0 0 2 / 0 0 2px;
859
}
860
&:disabled { color: $disabled_fg_color; }
862
}
863
/************
866
* Toolbars *
867
************/
868
toolbar {
869
-GtkWidget-window-dragging: true;
870
padding: $container_padding / 2;
871
background-color: $bg_color;
872
button { @extend %button_basic.flat; }
874
// on OSD
876
.osd & { background-color: transparent; }
877
// stand-alone OSD toolbars
879
&.osd {
880
transition: $shadow_transition;
881
padding: $container_padding;
882
border-radius: 2px;
883
box-shadow: $shadow_2, inset 0 1px $highlight_color;
884
background-color: $base_color;
885
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
887
&.left,
889
&.right,
890
&.top,
891
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
892
}
893
// toolbar separators
895
&.horizontal separator { margin: $container_padding / 2; }
896
&.vertical separator { margin: $container_padding / 2; }
897
&:not(.inline-toolbar):not(.osd) {
899
scale,
900
entry,
901
spinbutton,
902
button { margin: $container_padding / 2; }
903
.linked entry,
905
.linked spinbutton,
906
.linked button {
907
&:not(:first-child) { margin-left: 0; }
908
&:not(:last-child) { margin-right: 0; }
909
}
910
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
912
}
913
}
914
// searchbar, location-bar & inline-toolbar
916
.inline-toolbar {
917
padding: $container_padding;
918
border-style: solid;
919
border-width: 0 1px 1px;
920
border-color: $border_color;
921
background-color: $alt_base_color;
922
}
923
searchbar,
925
.location-bar {
926
padding: $container_padding;
927
border-style: solid;
928
border-width: 0 0 1px;
929
border-color: $border_color;
930
background-color: $bg_color;
931
background-clip: border-box;
932
}
933
/***************
936
* Header bars *
937
***************/
938
%titlebar,
939
headerbar {
940
transition: background-color $shorter_duration $deceleration_curve;
941
min-height: $large_size;
942
padding: 0 $container_padding;
943
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
944
background-color: $titlebar_bg_color;
945
color: $titlebar_fg_color;
946
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
948
&:backdrop {
950
color: $secondary_titlebar_fg_color;
951
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
953
}
954
.title {
956
transition: $longer_transition;
957
padding: 0 12px;
958
font-weight: bold;
959
}
960
.subtitle {
962
transition: $longer_transition;
963
padding: 0 12px;
964
font-size: smaller;
965
@extend .dim-label;
967
}
968
button:not(.suggested-action):not(.destructive-action) {
970
@extend %button_basic.flat;
971
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
973
$titlebar_indicator_color 0%,
974
transparent 0%)
975
0 0 0 / 0 0 0px;
976
&:checked {
978
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
979
$titlebar_indicator_color 100%,
980
transparent 0%)
981
0 0 2 / 0 0 2px;
982
&, &:disabled { background-color: transparent; }
984
}
985
}
986
button.suggested-action, button.destructive-action {
988
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
989
}
990
&.selection-mode {
992
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
993
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
994
transition: background-color 0.00001s $longer_duration;
995
animation: header_ripple_effect $longer_duration $deceleration_curve;
996
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
997
background-color: $primary_color;
998
color: $inverse_fg_color;
999
&:backdrop {
1001
color: $secondary_inverse_fg_color;
1002
}
1003
.subtitle:link { @extend *:link:selected; }
1005
button:not(.suggested-action):not(.destructive-action) {
1007
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1008
currentColor 0%,
1009
transparent 0%)
1010
0 0 0 / 0 0 0px;
1011
color: currentColor;
1012
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1014
&:checked {
1016
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1017
currentColor 100%,
1018
transparent 0%)
1019
0 0 2 / 0 0 2px;
1020
color: currentColor;
1021
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1023
}
1024
}
1025
.selection-menu {
1027
padding-left: 16px;
1028
padding-right: 16px;
1029
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1031
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1033
}
1034
}
1035
.fullscreen &,
1037
.tiled &,
1038
.maximized & {
1039
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1040
box-shadow: $shadow_1;
1041
}
1042
&.default-decoration {
1044
min-height: $small_size;
1045
padding: $container_padding;
1046
box-shadow: inset 0 1px $titlebar_highlight_color;
1047
.fullscreen &,
1049
.tiled &,
1050
.maximized & { box-shadow: none; }
1051
button.titlebutton {
1053
min-height: $small_size;
1054
min-width: $small_size;
1055
margin: 0;
1056
padding: 0;
1057
}
1058
// workaround for non-animatable buttons
1060
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1061
}
1062
.solid-csd & {
1064
&:dir(rtl), &:dir(ltr) { // specificity bump
1065
// margin-left: -2px;
1066
// margin-right: -2px;
1067
// margin-top: -2px;
1068
// border-radius: 0;
1069
// box-shadow: inset 0 1px $titlebar_highlight_color;
1070
}
1071
}
1072
}
1073
headerbar {
1075
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1076
entry,
1077
spinbutton,
1078
// separator,
1079
button {
1080
margin-top: $container_padding;
1081
margin-bottom: $container_padding;
1082
}
1083
switch {
1085
margin-top: $container_padding * 2;
1086
margin-bottom: $container_padding * 2;
1087
}
1088
// reset button margins of the spinbutton
1090
spinbutton button {
1091
margin-top: 0;
1092
margin-bottom: 0;
1093
}
1094
}
1095
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1097
border-top-left-radius: 2px;
1098
border-top-right-radius: 2px;
1099
}
1100
headerbar { // headerbar border rounding
1102
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1103
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1104
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1106
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1108
&:first-child, &:last-child {
1109
border-top-left-radius: 2px;
1110
border-top-right-radius: 2px;
1111
}
1112
}
1113
}
1114
.titlebar:not(headerbar) {
1116
window.csd > & {
1117
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1118
padding: 0;
1119
background-color: transparent;
1120
background-image: none;
1121
border-style: none;
1122
box-shadow: none;
1123
}
1124
> separator {
1126
background-color: $titlebar_bg_color;
1127
background-image: image($border_color);
1128
}
1129
@extend %titlebar;
1131
}
1132
/************
1135
* Pathbars *
1136
************/
1137
%pathbar_button,
1138
.path-bar button {
1139
padding-left: ($medium_size - 24px) / 2;
1140
padding-right: ($medium_size - 24px) / 2;
1141
label:not(:only-child) {
1143
&:first-child { margin-left: 4px; }
1144
&:last-child { margin-right: 4px; }
1146
}
1147
&.slider-button {
1149
padding-left: (24px - 16px) / 2;
1150
padding-right: (24px - 16px) / 2;
1151
}
1152
:not(headerbar) & {
1154
@extend %flat_button;
1155
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1157
$primary_color 0%,
1158
transparent 0%)
1159
0 0 0 / 0 0 0px;
1160
border-radius: 2px;
1161
&:checked {
1163
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1164
$primary_color 100%,
1165
transparent 0%)
1166
0 0 2 / 0 0 2px;
1167
&, &:disabled { background-color: transparent; }
1169
}
1170
}
1171
}
1172
/**************
1175
* Tree Views *
1176
**************/
1177
treeview.view {
1178
@at-root * {
1179
-GtkTreeView-horizontal-separator: 4;
1180
-GtkTreeView-grid-line-width: 1;
1181
-GtkTreeView-grid-line-pattern: '';
1182
-GtkTreeView-tree-line-width: 1;
1183
-GtkTreeView-tree-line-pattern: '';
1184
-GtkTreeView-expander-size: 16;
1185
}
1186
border-left-color: $fill_color; // this is actually the tree lines color,
1188
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1189
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1191
&.separator {
1193
min-height: 1px + 2px * 2;
1194
color: $border_color;
1195
}
1196
&:drop(active) {
1198
border-style: solid none;
1199
border-width: 1px;
1200
border-color: $accent_color;
1201
&.after { border-top-style: none; }
1203
&.before { border-bottom-style: none; }
1205
}
1206
&.expander {
1208
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1209
-gtk-icon-transform: rotate(-90deg);
1210
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1212
&:checked { -gtk-icon-transform: unset; }
1214
color: $secondary_fg_color;
1216
&:hover, &:active { color: $fg_color; }
1218
&:disabled { color: $disabled_secondary_fg_color; }
1220
&:selected {
1222
color: $secondary_inverse_fg_color;
1223
&:hover, &:active { color: $inverse_fg_color; }
1225
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1227
}
1228
}
1229
&.progressbar { // progress bar in treeviews
1231
border-bottom: $bar_size solid $primary_color;
1232
box-shadow: none;
1233
background-color: transparent;
1234
&:selected { border-bottom-color: currentColor; }
1236
}
1237
&.trough { // progress bar trough in treeviews
1239
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1240
box-shadow: none;
1241
background-color: transparent;
1242
&:selected { border-bottom-color: $fill_color; }
1244
}
1245
header {
1247
button {
1248
@extend row.activatable;
1249
padding: 2px 6px;
1251
border-style: none solid solid none;
1252
border-width: 1px;
1253
border-color: $border_color;
1254
border-radius: 0;
1255
background-clip: border-box;
1256
&, &:hover, &:active { box-shadow: none; }
1258
&, &:disabled { background-color: $base_color; }
1260
&:last-child { border-right-style: none; }
1262
}
1263
}
1264
button.dnd,
1266
header.button.dnd { // for treeview-like derive widgets
1267
padding: 2px 6px;
1268
border-style: none solid solid;
1269
border-width: 1px;
1270
border-color: $border_color;
1271
border-radius: 0;
1272
box-shadow: none;
1273
background-color: $base_color;
1274
background-clip: border-box;
1275
color: $primary_color;
1276
}
1277
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1279
}
1280
/*********
1283
* Menus *
1284
*********/
1285
menubar,
1286
.menubar {
1287
-GtkWidget-window-dragging: true;
1288
padding: 0;
1289
// box-shadow: inset 0 -1px $border_color;
1290
background-color: $titlebar_bg_color;
1291
> menuitem {
1293
transition: $shorter_transition;
1294
min-height: 20px;
1295
padding: 4px 8px;
1296
color: $secondary_titlebar_fg_color;
1297
&:hover { // Seems like it :hover even with keyboard focus
1299
transition: none;
1300
background-color: $semi_fill_color;
1301
color: $titlebar_fg_color;
1302
}
1303
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1305
}
1306
}
1307
.csd.popup { border-radius: 2px; }
1309
menu,
1311
.menu,
1312
.context-menu {
1313
margin: 4px 0;
1314
padding: 4px 0;
1315
box-shadow: inset 0 1px $highlight_color;
1316
background-color: $base_color;
1317
border: 1px solid $border_color; // adds borders in a non composited env
1318
.csd & {
1320
border: none; // axes borders in a composited env
1321
border-radius: 2px;
1322
}
1323
menuitem {
1325
transition: $shorter_transition;
1326
min-height: 20px;
1327
min-width: 40px;
1328
padding: 4px 8px;
1329
font: initial;
1330
text-shadow: none;
1331
&:hover {
1333
transition: none;
1334
background-color: $semi_fill_color;
1335
}
1336
&:disabled { color: $disabled_fg_color; }
1338
// submenu indicators
1340
arrow {
1341
min-height: 16px;
1342
min-width: 16px;
1343
&:dir(ltr) {
1345
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1346
margin-left: 8px;
1347
}
1348
&:dir(rtl) {
1350
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1351
margin-right: 8px;
1352
}
1353
}
1354
// avoids labels color being overridden, see
1356
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1357
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1358
}
1359
// overflow arrows
1361
> arrow {
1362
min-height: 16px;
1363
min-width: 16px;
1364
padding: 4px;
1365
background-color: $base_color;
1366
color: $secondary_fg_color;
1367
&.top {
1369
margin-top: -4px;
1370
border-bottom: 1px solid $border_color;
1371
border-radius: 2px 2px 0 0;
1372
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1373
}
1374
&.bottom {
1376
margin-bottom: -4px * 3;
1377
border-top: 1px solid $border_color;
1378
border-radius: 0 0 2px 2px;
1379
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1380
}
1381
&:hover {
1383
background-image: image($semi_fill_color);
1384
color: $fg_color;
1385
}
1386
&:disabled {
1388
border-color: transparent;
1389
background-color: transparent;
1390
color: transparent;
1391
// color: $disabled_secondary_fg_color;
1392
}
1393
}
1394
separator { margin: 4px 0; }
1396
}
1397
menuitem {
1399
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1400
}
1401
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1403
// Electron/Atom render all translucent colors in opaque colors.
1404
// It's a very critical issue for this theme and should be fixed by upstream...
1405
.popup:not(.csd) menu {
1406
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1407
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1408
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1409
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1410
menuitem {
1412
color: $opaque_fg_color;
1413
&:hover { background-color: $opaque_semi_fill_color; }
1415
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1417
}
1418
// TODO: not working this, where/how i can set the accelerators?
1420
accelerator { color: $opaque_tertiary_fg_color; }
1421
}
1422
/************
1425
* Popovers *
1426
************/
1427
popover.background {
1428
transition: $shadow_transition;
1429
padding: 2px;
1430
box-shadow: $shadow_2; // TODO: this should really have a highlight
1431
background-color: $lighter_bg_color;
1432
&:backdrop { box-shadow: $shadow_1; }
1434
&, .csd & {
1436
border-style: solid;
1437
border-width: 1px;
1438
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1439
border-radius: 2px + 1px;
1440
}
1441
> stack { margin: -4px; } // remove extra padding from menu style popovers
1443
> toolbar { margin: -2px; }
1445
> list,
1447
> .view,
1448
> toolbar {
1449
border-style: none;
1450
box-shadow: none;
1451
background-color: transparent;
1452
}
1453
&.touch-selection,
1455
&.magnifier,
1456
&.osd { @extend %osd; }
1457
// entry { @extend %entry.flat; }
1459
// button.combo { @extend %combo_flat; }
1461
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1463
&.menu button,
1465
button.model {
1466
@extend %simple_flat_button;
1467
min-height: 32px;
1469
padding: 0 8px;
1470
border-radius: 2px;
1471
&:checked { @extend %selected_items; }
1473
}
1474
separator { margin: 4px 0; }
1476
list separator { margin: 0; }
1478
}
1479
/*************
1481
* Notebooks *
1482
*************/
1483
notebook {
1484
> header {
1485
border-width: 1px;
1486
border-color: $border_color;
1487
background-color: $bg_color;
1488
background-clip: border-box;
1489
&.top {
1491
border-bottom-style: solid;
1492
> tabs {
1493
margin-bottom: -1px;
1494
> tab {
1495
&:hover { box-shadow: inset 0 -2px $fill_color; }
1497
&:checked { box-shadow: inset 0 -2px $primary_color; }
1499
}
1500
}
1501
}
1502
&.bottom {
1504
border-top-style: solid;
1505
> tabs {
1506
margin-top: -1px;
1507
> tab {
1508
&:hover { box-shadow: inset 0 2px $fill_color; }
1510
&:checked { box-shadow: inset 0 2px $primary_color; }
1512
}
1513
}
1514
}
1515
&.left {
1517
border-right-style: solid;
1518
> tabs {
1519
margin-right: -1px;
1520
> tab {
1521
&:hover { box-shadow: inset -2px 0 $fill_color; }
1523
&:checked { box-shadow: inset -2px 0 $primary_color; }
1525
}
1526
}
1527
}
1528
&.right {
1530
border-left-style: solid;
1531
> tabs {
1532
margin-left: -1px;
1533
> tab {
1534
&:hover { box-shadow: inset 2px 0 $fill_color; }
1536
&:checked { box-shadow: inset 2px 0 $primary_color; }
1538
}
1539
}
1540
}
1541
&.top > tabs > arrow {
1543
@extend %notebook_vert_arrows;
1544
border-top-style: none;
1546
}
1547
&.bottom > tabs > arrow {
1549
@extend %notebook_vert_arrows;
1550
border-bottom-style: none;
1552
}
1553
@at-root %notebook_vert_arrows {
1555
padding-left: 4px;
1556
padding-right: 4px;
1557
&.down {
1559
margin-left: -8px;
1560
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1561
}
1562
&.up {
1564
margin-right: -8px;
1565
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1566
}
1567
}
1568
&.left > tabs > arrow {
1570
@extend %notebook_horz_arrows;
1571
border-left-style: none;
1573
}
1574
&.right > tabs > arrow {
1576
@extend %notebook_horz_arrows;
1577
border-right-style: none;
1579
}
1580
@at-root %notebook_horz_arrows {
1582
padding-top: 4px;
1583
padding-bottom: 4px;
1584
&.down {
1586
margin-top: -8px;
1587
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1588
}
1589
&.up {
1591
margin-bottom: -8px;
1592
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1593
}
1594
}
1595
> tabs > arrow {
1597
@extend %simple_flat_button;
1598
min-height: 16px;
1600
min-width: 16px;
1601
border-radius: 0;
1602
}
1603
tab {
1605
transition: $longer_transition,
1606
background-size 0,
1607
background-image 0;
1608
min-height: $small_size;
1609
min-width: $small_size;
1610
padding: $container_padding 12px;
1611
outline-offset: -6px;
1613
border-width: 1px; // for reorderable tabs
1615
border-color: transparent; //
1616
background-image: radial-gradient(circle farthest-corner at center,
1618
$primary_color 10%,
1619
transparent 0%);
1620
background-repeat: no-repeat;
1621
background-position: center;
1622
background-size: 0% 0%;
1623
color: $secondary_fg_color;
1625
font-weight: 500;
1626
&:hover {
1628
color: $fg_color;
1629
&.reorderable-page {
1631
border-color: $border_color;
1632
background-color: $alt_base_color;
1633
}
1634
}
1635
&:disabled { color: $disabled_secondary_fg_color; }
1637
&:checked {
1639
transition: $longer_transition,
1640
background-size $longer_duration $deceleration_curve,
1641
background-image $longer_duration + $ripple_duration $deceleration_curve;
1642
background-image: radial-gradient(circle farthest-corner at center,
1643
transparent 10%,
1644
transparent 0%);
1645
background-size: 1000% 1000%;
1646
color: $fg_color;
1647
&:disabled { color: $disabled_fg_color; }
1649
&.reorderable-page {
1651
border-color: $border_color;
1652
background-color: $base_color;
1653
}
1654
}
1655
// colors the button like the label, overridden otherwise
1657
button.flat {
1658
@extend %small_button;
1659
&:last-child {
1661
margin-left: $container_padding;
1662
margin-right: $container_padding - 12px;
1663
}
1664
&:first-child {
1666
margin-left: $container_padding - 12px;
1667
margin-right: $container_padding;
1668
}
1669
}
1670
}
1671
&.top,
1673
&.bottom {
1674
tabs {
1675
padding-left: 8px;
1676
padding-right: 8px;
1677
&:not(:only-child) {
1679
&:first-child { margin-left: 0; }
1680
&:last-child { margin-right: 0; }
1681
}
1682
tab {
1684
&.reorderable-page {
1685
margin: 0 -1px;
1686
border-style: none solid;
1687
}
1688
}
1689
}
1690
}
1691
&.left,
1693
&.right {
1694
tabs {
1695
padding-top: 8px;
1696
padding-bottom: 8px;
1697
&:not(:only-child) {
1699
&:first-child { margin-top: 0; }
1700
&:last-child { margin-bottom: 0; }
1701
}
1702
tab {
1704
&.reorderable-page {
1705
margin: -1px 0;
1706
border-style: solid none;
1707
}
1708
}
1709
}
1710
}
1711
}
1712
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1714
background-color: $base_color;
1715
entry:not(.search),
1717
spinbutton:not(.vertical) { @extend %entry.flat; }
1718
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1720
button.combo { @extend %combo_flat; }
1722
}
1723
}
1724
/**************
1727
* Scrollbars *
1728
**************/
1729
scrollbar {
1730
$_slider_min_length: 24px;
1731
// disable steppers
1733
@at-root * {
1734
-GtkScrollbar-has-backward-stepper: false;
1735
-GtkScrollbar-has-forward-stepper: false;
1736
}
1737
transition: $longer_transition;
1739
background-color: $base_color;
1740
background-clip: $extra_background_clip;
1741
// scrollbar border
1743
&.top { border-bottom: 1px solid $border_color; }
1744
&.bottom { border-top: 1px solid $border_color; }
1745
&.left { border-right: 1px solid $border_color; }
1746
&.right { border-left: 1px solid $border_color; }
1747
// slider
1749
slider {
1750
transition: $shorter_transition, margin 0, border-width 0;
1751
min-width: 8px;
1752
min-height: 8px;
1753
border: 4px solid transparent;
1754
border-radius: $circular_radius;
1755
background-clip: padding-box;
1756
background-color: $tertiary_fg_color;
1757
&:hover { background-color: $secondary_fg_color; }
1759
&:active { background-color: $fg_color; }
1761
&:disabled { background-color: $disabled_tertiary_fg_color; }
1763
}
1764
&.fine-tune {
1766
slider {
1767
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1768
min-width: 4px;
1769
min-height: 4px;
1770
}
1771
&.horizontal slider { margin: 2px 0; }
1773
&.vertical slider { margin: 0 2px; }
1775
}
1776
&.overlay-indicator {
1778
&:not(.dragging):not(.hovering) {
1779
border-color: transparent;
1780
background-color: transparent;
1781
slider {
1783
min-width: 4px;
1784
min-height: 4px;
1785
margin: 4px - 1px;
1786
border: 1px solid scale-alpha($base_color, $lower_opacity);
1787
}
1788
button {
1790
min-width: 4px;
1791
min-height: 4px;
1792
margin: 4px - 1px;
1793
border: 1px solid scale-alpha($base_color, $lower_opacity);
1794
border-radius: $circular_radius;
1795
background-color: $tertiary_fg_color;
1796
background-clip: padding-box;
1797
-gtk-icon-source: none;
1798
&:disabled { background-color: $disabled_tertiary_fg_color; }
1800
}
1801
&.horizontal {
1803
slider { min-width: $_slider_min_length; }
1804
button { min-width: 8px; }
1806
}
1807
&.vertical {
1809
slider { min-height: $_slider_min_length; }
1810
button { min-height: 8px; }
1812
}
1813
}
1814
&.dragging,
1816
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1817
}
1818
&.horizontal slider { min-width: $_slider_min_length; }
1820
&.vertical slider { min-height: $_slider_min_length; }
1822
// button styling
1824
button {
1825
@extend %simple_flat_button;
1826
min-width: 16px;
1828
min-height: 16px;
1829
padding: 0;
1830
border-radius: 0;
1831
}
1832
// button icons
1834
&.vertical {
1835
button {
1836
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1837
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1839
}
1840
}
1841
&.horizontal {
1843
button {
1844
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1845
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1847
}
1848
}
1849
}
1850
/**********
1853
* Switch *
1854
**********/
1855
switch {
1856
transition: $longer_transition;
1857
margin: $container_padding 0;
1858
border: 4px solid transparent;
1859
border-radius: $circular_radius;
1860
background-color: $fill_color;
1861
background-clip: padding-box;
1862
font-size: 0;
1863
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1865
&:checked {
1867
background-color: scale-alpha($accent_color, 0.5);
1868
&:disabled {
1870
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1871
color: $disabled_fg_color;
1872
}
1873
}
1874
slider {
1876
@include entry(normal);
1877
transition: $longer_transition, $shadow_transition, margin 0;
1879
min-width: $small_size;
1880
min-height: $small_size;
1881
margin: -4px 0 -4px -4px;
1882
border-radius: $circular_radius;
1883
-gtk-outline-radius: $circular_radius;
1884
}
1885
&:hover slider { @include entry(focus); }
1887
&:checked slider {
1889
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1890
animation: needs_attention $longer_duration $deceleration_curve;
1891
margin: -4px -4px -4px 0;
1892
background-color: $accent_color;
1893
color: $inverse_fg_color;
1894
}
1895
&:disabled slider { @include entry(disabled); }
1897
&:checked:disabled slider { animation: none; }
1899
row:selected & {
1901
}
1902
}
1903
/*************************
1906
* Check and Radio items *
1907
*************************/
1908
// draw regular check and radio items using our PNG assets
1909
// all assets are rendered from assets.svg. never add pngs directly
1910
// selection-mode
1912
.view.content-view.check:not(list),
1913
.content-view .tile check:not(list) {
1914
min-height: 40px;
1915
min-width: 40px;
1916
margin: 0;
1917
padding: 0;
1918
box-shadow: none;
1919
background-color: transparent;
1920
background-image: none;
1921
-gtk-icon-shadow: $shadow_1;
1922
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1924
@each $s, $as in ('', '-unchecked'),
1926
(':checked', '-checked') {
1927
&#{$s} {
1928
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1929
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1930
}
1931
}
1932
}
1933
checkbutton.text-button,
1935
radiobutton.text-button {
1936
// this is for a nice focus on check and radios text
1937
padding: 2px;
1938
outline-offset: 0;
1939
label:not(:only-child) { margin: 0 4px; }
1941
}
1942
check,
1944
radio {
1945
min-height: 24px;
1946
min-width: 24px;
1947
margin: -($large_size - 24px) / 2;
1948
padding: ($large_size - 24px) / 2;
1949
@extend %simple_flat_button;
1951
@extend %circular_button;
1953
&:checked, &:indeterminate {
1955
color: $accent_color;
1956
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1958
}
1959
// &:only-child { margin: -12px; }
1961
row &:not(:checked):not(:indeterminate) {
1963
color: gtkalpha(currentColor, $secondary_opacity);
1964
&:hover, &:active { color: currentColor; }
1966
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1968
}
1969
menu menuitem & {
1971
transition: none;
1972
min-height: 16px;
1973
min-width: 16px;
1974
margin: 0; // this is a workaround for a menu check/radio size allocation issue
1975
padding: 0;
1976
&:dir(ltr) { margin-right: 8px; }
1978
&:dir(rtl) { margin-left: 8px; }
1980
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1982
&, &:hover, &:disabled {
1984
box-shadow: none;
1985
// color: inherit;
1986
}
1987
}
1988
}
1989
%check,
1991
check {
1992
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
1993
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
1994
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
1996
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
1997
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
1999
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2000
}
2001
%radio,
2003
radio {
2004
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2005
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2006
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2008
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2009
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2011
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2012
border-image-slice: $large_size / 2px;
2014
border-image-width: $large_size / 2;
2015
$radio_indicator: 10px / $large_size / 2;
2017
& {
2019
border-image-source: -gtk-gradient(radial,
2020
center center, 0,
2021
center center, 0.001,
2022
to($accent_color),
2023
to(transparent));
2024
}
2025
&:checked:not(:indeterminate) {
2027
border-image-source: -gtk-gradient(radial,
2028
center center, 0,
2029
center center, $radio_indicator,
2030
to($accent_color),
2031
to(transparent));
2032
}
2033
&:checked:not(:indeterminate):disabled {
2035
border-image-source: -gtk-gradient(radial,
2036
center center, 0,
2037
center center, $radio_indicator,
2038
to(scale-alpha($accent_color, $disabled_opacity)),
2039
to(transparent));
2040
}
2041
}
2042
%small_check,
2044
menu menuitem check {
2045
& {
2046
border-radius: 2px;
2047
-gtk-outline-radius: 2px;
2048
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2049
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2050
}
2051
&:checked {
2053
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2054
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2055
}
2056
&:indeterminate {
2058
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2059
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2060
}
2061
}
2062
%small_radio,
2064
menu menuitem radio {
2065
& {
2066
border-image: none;
2067
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2068
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2069
}
2070
&:checked {
2072
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2073
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2074
}
2075
&:indeterminate {
2077
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2078
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2079
}
2080
}
2081
// ANIMATION:
2083
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2084
// the transformation is set on the active state and it get reset on the checked state.
2085
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2086
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2088
check:not(:checked):indeterminate:active,
2090
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2091
check:not(:checked),
2093
radio:not(:checked) {
2094
& {
2095
transition: $longer_transition,
2096
background-size $ripple_duration $deceleration_curve,
2097
background-image $ripple_duration * 2 $deceleration_curve,
2098
-gtk-icon-transform 0;
2099
}
2100
&:active {
2102
transition: $longer_transition,
2103
background-size 0,
2104
background-image 0,
2105
-gtk-icon-transform 0;
2106
}
2107
menu menuitem & { transition: none; }
2109
}
2110
treeview.view check,
2112
treeview.view radio {
2113
padding: 0;
2114
&:hover {
2116
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2117
&:disabled { box-shadow: none; }
2119
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2121
}
2122
& {
2124
color: $secondary_fg_color;
2125
&:hover, &:active { color: $fg_color; }
2127
&:disabled { color: $disabled_secondary_fg_color; }
2129
&:checked, &:indeterminate { color: $accent_color; }
2131
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2133
}
2134
&:selected {
2136
color: $secondary_inverse_fg_color;
2137
&:hover, &:active { color: $inverse_fg_color; }
2139
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2141
&:checked, &:indeterminate { color: $accent_color; }
2143
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2145
}
2146
}
2147
treeview.view radio:checked {
2149
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2150
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2151
border-image: none;
2152
}
2153
/************
2156
* GtkScale *
2157
************/
2158
scale {
2159
// sizing
2160
$_marks_lenght: 8px;
2161
$_marks_distance: 8px;
2162
$slider_size: 24px;
2164
$marks_slider_size: 30px;
2165
$slider_margin: -($slider_size - $bar_size) / 2;
2167
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2168
$color_slider_margin: -($slider_size) / 2;
2170
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2171
min-height: $medium_size - $slider_size;
2173
min-width: $medium_size - $slider_size;
2174
padding: ($slider_size / 2);
2175
* { transition: $longer_transition; }
2177
// the slider is inside the trough, so to have make it bigger there's a negative margin
2179
slider {
2180
min-height: $slider_size;
2181
min-width: $slider_size;
2182
margin: $slider_margin;
2183
}
2184
// the backing bit
2186
trough {
2187
outline-offset: 2px;
2188
background-color: $fill_color;
2189
&:disabled { color: $disabled_fg_color; }
2191
}
2192
// the colored part of the backing bit
2194
highlight {
2195
background-color: $accent_color;
2196
&:disabled { background-color: transparent; }
2198
}
2199
// this is another differently styled part of the backing bit, the most relevant use case is for example
2201
// in media player to indicate how much video stream as been cached
2202
fill {
2203
background-color: $fill_color;
2204
&:disabled { background-color: transparent; }
2206
}
2207
slider {
2209
transition: all $shorter_duration $standard_curve;
2210
// border-radius: 100%;
2211
// background-color: $accent_color;
2212
background-repeat: no-repeat;
2213
background-position: center;
2214
@each $s, $as in ('', ''),
2216
(':disabled', '-disabled') {
2217
&#{$s} {
2218
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2219
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2221
}
2222
}
2223
background-size: calc(100% - 8px);
2225
&:hover { background-size: calc(100% - 4px); }
2227
&:active { background-size: calc(100% - 0px); }
2229
}
2230
// click-and-hold the slider to activate
2232
&.fine-tune {
2233
// to make the slider shrink in fine-tune mode
2234
slider { background-size: calc(100% - 12px); }
2235
}
2236
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2238
marks {
2240
color: $fill_color;
2241
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2243
(bottom, bottom, top),
2244
(top, left, right),
2245
(bottom, right, left) {
2246
&.#{$marks_class} {
2247
margin-#{$marks_margin}: $_marks_distance;
2248
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2249
}
2250
}
2251
}
2252
&.horizontal {
2254
indicator {
2255
min-height: $_marks_lenght;
2256
min-width: 1px;
2257
}
2258
}
2259
&.vertical {
2261
indicator {
2262
min-height: 1px;
2263
min-width: $_marks_lenght;
2264
}
2265
}
2266
// *WARNING* scale with marks madness following
2268
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2270
('vertical', 'vert') {
2271
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2272
('marks-after', 'marks-after:not(.marks-before)') {
2273
&.#{$dir_class}.#{$marks_class} {
2274
slider {
2275
@each $state, $state_infix in ('', ''),
2276
(':disabled', '-disabled') {
2277
&#{$state} {
2278
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2279
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2281
}
2282
}
2283
@if $dir_class == 'horizontal' {
2285
min-height: $marks_slider_size;
2286
min-width: $slider_size;
2287
@if $marks_infix == 'marks-before' {
2289
margin-top: $marks_slider_margin;
2290
background-position: center calc(100% - 4px);
2292
&:hover { background-position: center calc(100% - 2px); }
2294
&:active { background-position: center calc(100% - 0px); }
2296
}
2297
@if $marks_infix == 'marks-after' {
2299
margin-bottom: $marks_slider_margin;
2300
background-position: center calc(4px);
2302
&:hover { background-position: center calc(2px); }
2304
&:active { background-position: center calc(0px); }
2306
}
2307
}
2308
@if $dir_class == 'vertical' {
2310
min-height: $slider_size;
2311
min-width: $marks_slider_size;
2312
@if $marks_infix == 'marks-before' {
2314
margin-left: $marks_slider_margin;
2315
background-position: calc(4px) center;
2317
&:hover { background-position: calc(2px) center; }
2319
&:active { background-position: calc(0px) center; }
2321
}
2322
@if $marks_infix == 'marks-after' {
2324
margin-right: $marks_slider_margin;
2325
background-position: calc(100% - 4px) center;
2327
&:hover { background-position: calc(100% - 2px) center; }
2329
&:active { background-position: calc(100% - 0px) center; }
2331
}
2332
}
2333
}
2334
&.fine-tune slider {
2336
@if $dir_class == 'horizontal' {
2337
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2338
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2340
}
2341
@if $dir_class == 'vertical' {
2343
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2344
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2346
}
2347
}
2348
}
2349
}
2350
}
2351
&.color {
2353
min-height: 0;
2354
min-width: 0;
2355
&.horizontal {
2357
padding: 0 0 12px 0;
2358
slider {
2360
&:dir(ltr), &:dir(rtl) { // specificity bump
2361
margin-bottom: $color_slider_margin;
2362
margin-top: $color_marks_slider_margin;
2363
}
2364
}
2365
}
2366
&.vertical {
2368
&:dir(ltr) {
2369
padding: 0 0 0 12px;
2370
slider {
2372
margin-left: $color_slider_margin;
2373
margin-right: $color_marks_slider_margin;
2374
}
2375
}
2376
&:dir(rtl) {
2378
padding: 0 12px 0 0;
2379
slider {
2381
margin-right: $color_slider_margin;
2382
margin-left: $color_marks_slider_margin;
2383
}
2384
}
2385
}
2386
}
2387
}
2388
/*****************
2391
* Progress bars *
2392
*****************/
2393
progressbar {
2394
// sizing
2395
&.horizontal {
2396
trough,
2397
progress { min-height: $bar_size; }
2398
}
2399
&.vertical {
2401
trough,
2402
progress { min-width: $bar_size; }
2403
}
2404
// FIXME: insensitive state missing and some other state should be set probably
2406
color: $tertiary_fg_color;
2407
font-size: smaller;
2408
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2410
progress { background-color: $primary_color; }
2412
&.osd { // progressbar.osd used for epiphany page loading progress
2414
// min-width: $bar_size;
2415
// min-height: $bar_size;
2416
// background-color: transparent;
2417
// trough { background-color: transparent; }
2419
// progress { background-color: $primary_color; }
2421
}
2422
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2424
}
2425
/*************
2428
* Level Bar *
2429
*************/
2430
levelbar {
2431
block {
2432
min-width: $medium_size;
2433
min-height: $bar_size;
2434
}
2435
&.vertical block {
2437
min-width: $bar_size;
2438
min-height: $medium_size;
2439
}
2440
trough {
2442
padding: 2px;
2443
border-radius: 2px;
2444
@include entry(normal);
2446
&:disabled { @include entry(disabled); }
2448
}
2449
&.horizontal.discrete {
2451
block { margin: 0 1px; }
2452
trough { padding: 2px 1px; }
2454
}
2455
&.vertical.discrete {
2457
block { margin: 1px 0; }
2458
trough { padding: 1px 2px; }
2460
}
2461
block {
2463
&.low { background-color: $warning_color; }
2464
&.high,
2466
&:not(.empty) { background-color: $primary_color; }
2467
&.full { background-color: $success_color; }
2469
&.empty {
2471
background-color: $fill_color;
2472
color: $disabled_fg_color;
2473
}
2474
}
2475
}
2476
/****************
2479
* Print dialog *
2480
*****************/
2481
printdialog {
2482
paper {
2483
padding: 0;
2484
border: 1px solid $border_color;
2485
background-color: $base_color;
2486
color: $fg_color;
2487
}
2488
.dialog-action-box { margin: 12px; }
2490
}
2491
/**********
2494
* Frames *
2495
**********/
2496
frame > border,
2497
.frame {
2498
margin: 0;
2499
padding: 0;
2500
border: 1px solid $border_color;
2501
border-radius: 0;
2502
box-shadow: none;
2503
&.flat { border-style: none; }
2505
}
2506
frame.flat > border { @extend .frame.flat; } // for backporting
2508
actionbar > revealer > box {
2510
padding: $container_padding;
2511
border-top: 1px solid $border_color;
2512
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2514
}
2515
scrolledwindow {
2517
viewport.frame { // avoid double borders when viewport inside scrolled window
2518
border-style: none;
2519
}
2520
// This is used when content is touch-dragged past boundaries.
2522
// draws a box on top of the content, the size changes programmatically.
2523
@at-root overshoot {
2524
&.top { @include overshoot(top); }
2525
&.bottom { @include overshoot(bottom); }
2527
&.left { @include overshoot(left); }
2529
&.right { @include overshoot(right); }
2531
}
2532
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2534
@at-root undershoot {
2535
&.top { @include undershoot(top); }
2536
&.bottom { @include undershoot(bottom); }
2538
&.left { @include undershoot(left); }
2540
&.right { @include undershoot(right); }
2542
}
2543
@at-root junction { // the small square between two scrollbars
2545
border-style: solid none none solid;
2546
border-width: 1px;
2547
border-color: $border_color;
2548
background-color: $base_color;
2549
&:dir(rtl) { border-style: solid solid none none; }
2551
}
2552
}
2553
// vbox and hbox separators
2555
separator {
2556
min-width: 1px;
2557
min-height: 1px;
2558
background-color: $border_color;
2559
}
2560
%hide_separators {
2562
min-width: 0;
2563
min-height: 0;
2564
background-color: transparent;
2565
}
2566
/*********
2569
* Lists *
2570
*********/
2571
list {
2572
border-color: $border_color;
2573
background-color: $base_color;
2574
row { padding: 2px; }
2576
}
2577
// FIXME
2579
$row_transition: $longer_transition, background-color 0, color 0;
2580
row {
2582
&.activatable {
2583
transition: $row_transition,
2584
background-size $ripple_duration $deceleration_curve,
2585
background-image $ripple_duration * 2 $deceleration_curve;
2586
box-shadow: inset 0 0 0 9999px transparent;
2587
background-image: radial-gradient(circle farthest-corner at center,
2588
transparent 10%,
2589
transparent 0%);
2590
background-repeat: no-repeat;
2591
background-position: center;
2592
background-size: 1000% 1000%;
2593
&:hover {
2595
transition: $row_transition,
2596
box-shadow 0,
2597
background-size $ripple_duration $deceleration_curve,
2598
background-image $ripple_duration * 2 $deceleration_curve;
2599
box-shadow: inset 0 0 0 9999px $row_fill_color;
2600
}
2601
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2603
&:active {
2604
transition: $row_transition,
2605
background-size 0,
2606
background-image 0;
2607
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2608
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2609
background-image: radial-gradient(circle farthest-corner at center,
2610
$semi_fill_color 10%,
2611
transparent 0%);
2612
background-size: 0% 0%;
2613
}
2614
}
2615
&:selected { @extend %selected_items; }
2617
}
2618
/*********************
2621
* App Notifications *
2622
*********************/
2623
.app-notification {
2624
@extend %osd;
2625
@extend toolbar.osd;
2627
margin: 8px;
2629
button { @extend %button_basic.flat; }
2631
&.frame,
2633
border { border-style: none; }
2634
}
2635
/*************
2638
* Expanders *
2639
*************/
2640
expander {
2641
arrow {
2642
transition: all $shorter_duration $standard_curve;
2643
min-width: 16px;
2644
min-height: 16px;
2645
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2646
-gtk-icon-transform: rotate(-90deg);
2647
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2649
&:checked { -gtk-icon-transform: unset; }
2651
color: $secondary_fg_color;
2653
&:hover, &:active { color: $fg_color; }
2655
&:disabled { color: $disabled_secondary_fg_color; }
2657
&:selected {
2659
color: $secondary_inverse_fg_color;
2660
&:hover, &:active { color: $inverse_fg_color; }
2662
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2664
}
2665
}
2666
}
2667
/************
2670
* Calendar *
2671
************/
2672
calendar {
2673
padding: 1px;
2674
border: 1px solid $border_color;
2675
color: $fg_color;
2676
&:disabled { color: $disabled_fg_color; }
2678
&:selected {
2680
@extend %selected_items;
2681
border-radius: 2px + 1px;
2683
}
2684
&.header {
2686
border-style: none none solid;
2687
border-radius: 0;
2688
}
2689
&.button { @extend %simple_flat_button; }
2691
&.highlight {
2693
color: gtkalpha(currentColor, $tertiary_opacity);
2694
font-weight: 500;
2695
}
2696
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2698
}
2699
/***********
2702
* Dialogs *
2703
***********/
2704
messagedialog { // Message Dialog styling
2705
&.background { background-color: $lighter_bg_color; }
2706
.titlebar {
2708
min-height: $small_size;
2709
border-style: none;
2710
box-shadow: inset 0 1px $highlight_color;
2711
background-color: $lighter_bg_color;
2712
color: $fg_color;
2713
&:backdrop { color: $secondary_fg_color; }
2715
}
2716
&.csd { // rounded bottom border styling for csd version
2718
&.background {
2719
// bigger radius for better antialiasing
2720
border-bottom-left-radius: 2px;
2721
border-bottom-right-radius: 2px;
2722
}
2723
.dialog-action-area button {
2725
padding: 8px 16px;
2726
border-top: 1px solid $border_color;
2727
border-radius: 0;
2728
@extend %simple_flat_button;
2730
&:first-child { border-bottom-left-radius: 2px; }
2732
&:last-child { border-bottom-right-radius: 2px; }
2734
}
2735
}
2736
}
2737
filechooser {
2739
.dialog-action-box { border-top: 1px solid $border_color; }
2740
#pathbarbox {
2742
border-bottom: 1px solid $border_color;
2743
background-color: $bg_color;
2744
}
2745
}
2746
filechooserbutton:drop(active) {
2748
box-shadow: none;
2749
}
2750
/***********
2753
* Sidebar *
2754
***********/
2755
.sidebar {
2756
border-style: none;
2757
background-color: $lighter_bg_color;
2758
@at-root %sidebar_left,
2760
&:dir(ltr),
2761
&.left,
2762
&.left:dir(rtl) {
2763
border-right: 1px solid $border_color;
2764
border-left-style: none;
2765
}
2766
@at-root %sidebar_right,
2768
&:dir(rtl),
2769
&.right {
2770
border-left: 1px solid $border_color;
2771
border-right-style: none;
2772
}
2773
list { background-color: transparent; }
2775
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2777
}
2778
stacksidebar {
2780
&.sidebar {
2781
&:dir(ltr),
2782
&.left,
2783
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2784
&:dir(rtl),
2786
&.right { list { @extend %sidebar_right; }}
2787
}
2788
row {
2790
padding: 10px 4px;
2791
> label {
2793
padding-left: 6px;
2794
padding-right: 6px;
2795
}
2796
&.needs-attention > label { @extend %needs_attention; }
2798
}
2799
}
2800
/****************
2803
* File chooser *
2804
****************/
2805
placessidebar {
2806
> viewport.frame { border-style: none; }
2807
list { padding: (4px - 3px) 0 4px; }
2809
row {
2811
// Needs overriding of the GtkListBoxRow padding
2812
min-height: 32px;
2813
margin: -1px 0; // Remove unknown margins
2814
padding: 0;
2815
// Using margins/padding directly in the SidebarRow
2817
// will make the animation of the new bookmark row jump
2818
> revealer { padding: 0 12px; }
2819
&:selected { color: $inverse_fg_color; }
2821
&:disabled { color: $disabled_fg_color; }
2823
image.sidebar-icon {
2825
opacity: $tertiary_opacity; // dim the device icons
2826
&:dir(ltr) { padding-right: 8px; }
2828
&:dir(rtl) { padding-left: 8px; }
2829
}
2830
label.sidebar-label {
2832
&:dir(ltr) { padding-right: 2px; }
2833
&:dir(rtl) { padding-left: 2px; }
2834
}
2835
@at-root button.sidebar-button {
2837
@extend %simple_flat_button;
2838
@extend %small_button;
2840
row:selected & {
2842
}
2843
}
2844
&.sidebar-placeholder-row {
2846
min-height: 2px;
2847
padding: 0 8px;
2848
background-image: image($accent_color);
2849
background-clip: content-box;
2850
}
2851
&.sidebar-new-bookmark-row { color: $accent_color; }
2853
&:drop(active):not(:disabled) {
2855
box-shadow: inset 0 0 0 2px $accent_color;
2856
&:selected {
2858
// background-color: $accent_color;
2859
// color: $inverse_fg_color;
2860
}
2861
}
2862
}
2863
}
2864
placesview {
2866
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2867
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2869
// this selects the "connect to server" label
2871
> actionbar > revealer > box > label {
2872
padding-left: 8px;
2873
padding-right: 8px;
2874
}
2875
}
2876
/*********
2879
* Paned *
2880
*********/
2881
paned {
2882
> separator {
2883
min-width: 1px;
2884
min-height: 1px;
2885
-gtk-icon-source: none; // defeats the ugly default handle decoration
2886
border-style: none; // just to be sure
2887
background-color: transparent;
2888
// workaround, using background istead of a border since the border will get rendered twice (?)
2889
background-image: image($border_color);
2890
background-size: 1px 1px;
2891
background-clip: content-box; // avoids borders image being rendered twice (?)
2892
&.wide {
2894
min-width: 6px;
2895
min-height: 6px;
2896
background-color: $bg_color;
2897
background-image: image($border_color), image($border_color);
2898
background-size: 1px 1px, 1px 1px;
2899
}
2900
}
2901
&.horizontal > separator {
2903
background-repeat: repeat-y;
2904
&:dir(ltr) {
2906
margin: 0 -8px 0 0;
2907
padding: 0 8px 0 0;
2908
background-position: left;
2909
}
2910
&:dir(rtl) {
2912
margin: 0 0 0 -8px;
2913
padding: 0 0 0 8px;
2914
background-position: right;
2915
}
2916
&.wide {
2918
margin: 0;
2919
padding: 0;
2920
background-repeat: repeat-y, repeat-y;
2921
background-position: left, right;
2922
}
2923
}
2924
&.vertical > separator {
2926
margin: 0 0 -8px 0;
2927
padding: 0 0 8px 0;
2928
background-repeat: repeat-x;
2929
background-position: top;
2930
&.wide {
2932
margin: 0;
2933
padding: 0;
2934
background-repeat: repeat-x, repeat-x;
2935
background-position: bottom, top;
2936
}
2937
}
2938
}
2939
/**************
2942
* GtkInfoBar *
2943
**************/
2944
infobar {
2945
border-style: none;
2946
&.info { background-color: $info_bg_color; }
2948
&.question { background-color: $question_bg_color; }
2950
&.warning { background-color: $warning_bg_color; }
2952
&.error { background-color: $error_bg_color; }
2954
&.info,
2956
&.question,
2957
&.warning,
2958
&.error {
2959
> label, & { color: $inverse_fg_color; }
2960
button { @extend %button_selected; }
2962
selection {}
2964
*:link { @extend %link_selected; }
2966
}
2967
}
2968
/************
2971
* Tooltips *
2972
************/
2973
tooltip {
2974
&.background {
2975
// background-color needs to be set this way otherwise it gets drawn twice
2976
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2977
box-shadow: inset 0 1px $highlight_color;
2978
background-color: scale-alpha($base_color, $higher_opacity);
2979
}
2980
// @extend %osd;
2982
// padding: 4px; /* not working */
2984
border-radius: 2px;
2985
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2986
&:not(.csd):not(.unity-csd) {
2988
border: 1px solid $border_color;
2989
border-radius: 2px + 1px;
2990
background-clip: $extra_background_clip;
2991
}
2992
// FIXME: we need a border or tooltips vanish on black background.
2994
decoration { background-color: transparent; }
2995
label {
2997
// tooltip label already seems to have 6px margins
2998
min-height: 32px - 6px * 2;
2999
padding: 0 8px - 6px;
3000
}
3001
* {
3003
// workaround for Eclipse.
3004
// do not include any declaration here.
3005
// padding: 0;
3006
// background-color: transparent;
3007
// color: inherit;
3008
}
3009
}
3010
/*****************
3013
* Color Chooser *
3014
*****************/
3015
colorswatch {
3016
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3017
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3018
// applied to the overlay box.
3019
// base color corners rounding
3021
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3022
// sports a bigger radius.
3023
// nth-child is needed by the custom color strip.
3024
&.top {
3026
border-top-left-radius: $material_radius + 0.5px;
3027
border-top-right-radius: $material_radius + 0.5px;
3028
overlay {
3030
border-top-left-radius: $material_radius;
3031
border-top-right-radius: $material_radius;
3032
}
3033
}
3034
&.bottom {
3036
border-bottom-left-radius: $material_radius + 0.5px;
3037
border-bottom-right-radius: $material_radius + 0.5px;
3038
overlay {
3040
border-bottom-left-radius: $material_radius;
3041
border-bottom-right-radius: $material_radius;
3042
}
3043
}
3044
&.left,
3046
&:first-child:not(.top) {
3047
border-top-left-radius: $material_radius + 0.5px;
3048
border-bottom-left-radius: $material_radius + 0.5px;
3049
overlay {
3051
border-top-left-radius: $material_radius;
3052
border-bottom-left-radius: $material_radius;
3053
}
3054
}
3055
&.right,
3057
&:last-child:not(.bottom) {
3058
border-top-right-radius: $material_radius + 0.5px;
3059
border-bottom-right-radius: $material_radius + 0.5px;
3060
overlay {
3062
border-top-right-radius: $material_radius;
3063
border-bottom-right-radius: $material_radius;
3064
}
3065
}
3066
&.dark overlay { color: $light_fg_color; }
3068
&.light overlay { color: $dark_fg_color; }
3070
&.dark { color: $light_fg_color; } // for focus ring
3072
&.light { color: $dark_fg_color; } // for focus ring
3074
&:drop(active) {
3076
box-shadow: none;
3077
&.light overlay {
3079
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3080
}
3081
&.dark overlay {
3083
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3084
}
3085
}
3086
overlay {
3088
transition: $shadow_transition;
3089
box-shadow: $shadow_1;
3090
&:hover { box-shadow: $shadow_2; }
3092
}
3093
&#add-color-button {
3095
border-radius: $material_radius $material_radius 0 0;
3096
color: $light_fg_color; // for focus ring
3097
&:only-child { border-radius: $material_radius; }
3099
overlay {
3101
background-image: linear-gradient(to right,
3102
$error_bg_color 25%,
3103
$warning_bg_color 25%, $warning_bg_color 50%,
3104
$info_bg_color 50%, $info_bg_color 75%,
3105
$question_bg_color 75%);
3106
color: $light_fg_color;
3107
}
3108
}
3109
&:disabled {
3111
opacity: $disabled_opacity;
3112
overlay { box-shadow: none; }
3114
}
3115
row:selected & {
3117
}
3118
&#editor-color-sample {
3120
border-radius: $material_radius + 0.5px;
3121
overlay { border-radius: $material_radius; }
3123
// overlay:hover { box-shadow: $shadow_1; }
3125
}
3126
}
3127
// colorscale popup
3129
colorchooser .popover.osd {
3130
transition: $shadow_transition;
3131
border-radius: 2px;
3132
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3133
background-color: $base_color;
3134
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3136
spinbutton:not(.vertical) { @extend %entry.flat; }
3138
}
3139
/********
3142
* Misc *
3143
********/
3144
// content view (grid/list)
3145
.content-view {
3146
background-color: $bg_color;
3147
// &:hover { -gtk-icon-effect: highlight; }
3149
rubberband, .rubberband { @extend rubberband; }
3151
}
3152
.scale-popup {
3154
.osd & { @extend %osd; }
3155
.osd & button.flat { // FIXME: quick hack, redo properly
3157
}
3158
button { // +/- buttons on GtkVolumeButton popup
3160
}
3161
}
3162
/**********************
3165
* Window Decorations *
3166
**********************/
3167
decoration {
3168
transition: $shadow_transition;
3169
border-radius: 2px 2px 0 0;
3170
box-shadow: $shadow_4, 0 16px 16px transparent;
3171
// FIXME rationalize shadows
3173
// this is used for the resize cursor area
3175
margin: 8px;
3176
&:backdrop {
3178
// the transparent shadow here is to enforce that the shadow extents don't
3179
// change when we go to backdrop, to prevent jumping windows.
3180
// The biggest shadow should be in the same order then in the active state
3181
// or the jumping will happen during the transition.
3182
box-shadow: $shadow_2, 0 16px 16px transparent;
3183
}
3184
.maximized &,
3186
.fullscreen &,
3187
.tiled & { border-radius: 0; }
3188
.popup & { box-shadow: none; }
3190
// server-side decorations as used by mutter
3192
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3193
.csd.popup & {
3195
border-radius: 2px;
3196
box-shadow: $shadow_2;
3197
}
3198
tooltip.csd & {
3200
border-radius: 2px;
3201
box-shadow: $shadow_2;
3202
}
3203
messagedialog.csd & {
3205
border-radius: 2px;
3206
// box-shadow: $shadow_4, 0 16px 16px transparent;
3207
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3209
}
3210
.solid-csd & {
3212
margin: 0;
3213
// padding: 4px;
3214
border-radius: 0;
3215
box-shadow: none;
3216
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3217
background-color: $titlebar_bg_color;
3218
}
3219
}
3220
// Window Close button
3222
button.titlebutton {
3223
// @extend %simple_flat_button;
3224
@extend %circular_button;
3226
.selection-mode & {
3228
}
3229
}
3230
// catch all extend :)
3233
%selected_items {
3235
background-color: $primary_color;
3236
@at-root %nobg_selected_items, & {
3238
color: $inverse_fg_color;
3239
&:disabled { color: $disabled_inverse_fg_color; }
3241
}
3242
}
3243
.monospace { font-family: monospace; }
3245
/**********************
3248
* Touch Copy & Paste *
3249
**********************/
3250
// touch selection handlebars for the Popover.osd above
3251
cursor-handle {
3252
border-radius: $circular_radius;
3253
background-color: $accent_color;
3254
background-image: none;
3255
&.top:dir(ltr), &.bottom:dir(rtl) {
3257
padding-left: 6px;
3258
border-top-right-radius: 0;
3259
}
3260
&.bottom:dir(ltr), &.top:dir(rtl) {
3262
padding-right: 6px;
3263
border-top-left-radius: 0;
3264
}
3265
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3267
-GtkWidget-text-handle-width: 24;
3268
-GtkWidget-text-handle-height: 30;
3269
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3271
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3272
url('#{$_url}@2.png'));
3273
}
3274
}
3275
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3277
// shortcut window keys
3279
.keycap {
3280
min-width: 28px - 8px * 2;
3281
min-height: 28px - 2px;
3282
margin-top: 2px;
3283
padding-bottom: 2px;
3284
padding-left: 8px;
3285
padding-right: 8px;
3286
border: solid 1px $border_color;
3288
border-radius: 2px + 1px;
3289
box-shadow: inset 0 -2px $border_color;
3290
background-color: $base_color;
3291
color: $fg_color;
3292
font-size: smaller;
3293
}
3294
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3296
transition: $longer_transition;
3297
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3298
caret-color: $accent_color;
3299
}
3300
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3302
stackswitcher button.circular,
3304
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3305
min-width: $medium_size;
3306
min-height: $medium_size;
3307
padding: 0;
3308
}
3309