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 {
561
// > button.flat { @extend %linked_middle; }
562
// &:first-child > button.flat { @extend %linked:first-child; }
564
// &:last-child > button.flat { @extend %linked:last-child; }
566
// &:only-child > button.flat { @extend %linked:only-child; }
568
}
569
%linked_middle {
571
border-radius: 0;
572
-gtk-outline-radius: 2px;
573
}
574
%linked {
576
@extend %linked_middle;
577
&:first-child {
579
border-top-left-radius: 2px;
580
border-bottom-left-radius: 2px;
581
}
582
&:last-child {
584
border-top-right-radius: 2px;
585
border-bottom-right-radius: 2px;
586
}
587
&:only-child {
589
border-radius: 2px;
590
}
591
}
592
%linked_vertical_middle {
594
border-radius: 0;
595
-gtk-outline-radius: 2px;
596
}
597
%linked_vertical{
599
@extend %linked_vertical_middle;
600
&:first-child {
602
border-top-left-radius: 2px;
603
border-top-right-radius: 2px;
604
}
605
&:last-child {
607
border-bottom-left-radius: 2px;
608
border-bottom-right-radius: 2px;
609
}
610
&:only-child {
612
border-radius: 2px;
613
}
614
}
615
/* menu buttons */
617
modelbutton.flat,
618
.menuitem.button.flat {
619
min-height: $menuitem_size;
620
padding: 0 8px;
621
border-radius: 2px;
622
color: inherit;
623
@extend %simple_flat_button;
625
&:selected { @extend %selected_items; }
627
}
628
modelbutton.flat arrow {
630
background: none;
631
&:hover { background: none; }
633
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
635
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
637
}
638
button.color {
640
min-height: $small_size;
641
min-width: $small_size;
642
padding: $container_padding;
643
colorswatch:only-child {
645
// &, overlay { border-radius: 0; }
646
}
647
}
648
/*********
651
* Links *
652
*********/
653
*:link {
654
&, &:hover, &:active { color: $link_color; }
655
&:visited {
657
&, &:hover, &:active { color: $visited_link_color; }
658
}
659
@at-root %link_selected,
661
&:selected,
662
*:selected & { color: $inverse_fg_color; }
663
}
664
button:link,
666
button:visited {
667
@extend *:link;
668
> label { text-decoration-line: underline; }
670
}
671
/*****************
673
* GtkSpinButton *
674
*****************/
675
spinbutton {
676
&:not(.vertical) {
677
// in this horizontal configuration, the whole spinbutton
678
// behaves as the entry, so we extend the entry styling
679
// and nuke the style on the internal entry
680
@extend %entry;
681
padding: 0;
683
%spinbutton_entry,
685
entry {
686
min-width: $large_size - 8px * 2;
687
// reset all the other props since the spinbutton node is styled here
688
margin: 0;
689
border-image: none;
690
border-radius: 0;
691
box-shadow: none;
692
background-color: transparent;
693
//
694
// This will help to simplify spinbutton's code, but unfortunatelly
695
// doesn't work properly in :dir(rtl). It needs z-index property.
696
//
697
// min-width: $large_size - 8px;
698
//
699
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
700
//
701
// &:dir(ltr) {
702
// margin-right: -$spinbuttons_width;
703
// padding-right: $spinbuttons_width;
704
// }
705
//
706
// &:dir(rtl) {
707
// margin-left: -$spinbuttons_width;
708
// padding-left: $spinbuttons_width;
709
// }
710
}
711
button {
713
// margin: $container_padding;
714
border: solid $container_padding transparent;
715
@extend %simple_flat_button;
717
@extend %small_button;
719
&.up:dir(ltr),
721
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
722
&.up:dir(rtl),
724
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
725
}
726
}
727
// OSD horizontal
729
.osd &:not(.vertical) {
730
button {
731
}
732
}
733
// Vertical
735
&.vertical {
736
// in the vertical configuration, we treat the spinbutton
737
// as a box, and tweak the style of the entry in the middle
738
// so that it's linked
739
// FIXME: this should not be set at all, but otherwise it gets the wrong
741
// color
742
&:disabled { color: $disabled_fg_color; }
743
&:drop(active) {
745
box-shadow: none;
746
}
747
entry {
749
min-height: $medium_size;
750
min-width: $large_size;
751
padding: 0;
752
}
753
button {
755
min-height: $medium_size;
756
min-width: $large_size;
757
padding: 0;
758
@extend %simple_flat_button;
760
&.up { border-radius: 2px 2px 0 0; }
762
&.down { border-radius: 0 0 2px 2px; }
764
}
765
}
766
// OSD vertical
768
.osd &.vertical button:first-child {
769
}
770
// Misc
772
treeview &:not(.vertical) {
773
min-height: 0;
774
border-style: none;
775
border-radius: 0;
776
entry {
778
min-height: 0;
779
padding: 1px 2px;
780
}
781
}
782
}
783
/**************
786
* ComboBoxes *
787
**************/
788
combobox {
789
arrow {
790
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
791
min-height: 16px;
792
min-width: 16px;
793
}
794
decoration,
796
button.combo:checked { transition: none; } // workaround for menuitem selection
797
button.combo cellview {
799
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
800
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
801
}
802
#gtk-combobox-popup-menu {
804
padding: 2px 0;
805
menuitem {
807
min-height: $medium_size - 2px * 2;
808
padding: 0 8px;
809
}
810
// overflow arrows
812
> arrow {
813
&.top { margin-top: -2px; }
814
&.bottom { margin-bottom: -2px * 3; }
816
}
817
}
818
&.linked {
820
button:nth-child(2) {
821
&:dir(ltr) { @extend %linked:last-child; }
822
&:dir(rtl) { @extend %linked:first-child; }
823
}
824
}
825
&:drop(active) { // FIXME: untested
827
box-shadow: none;
828
// button.combo { @extend %button_basic:drop(active); }
830
}
831
}
832
// the combo is a composite widget so the way we do button linking doesn't
834
// work, special case needed. See
835
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
836
.linked:not(.vertical) > combobox {
838
> box > button.combo { @extend %linked_middle; }
839
&:first-child > box > button.combo { @extend %linked:first-child; }
841
&:last-child > box > button.combo { @extend %linked:last-child; }
843
&:only-child > box > button.combo { @extend %linked:only-child; }
845
}
846
.linked.vertical > combobox {
848
> box > button.combo { @extend %linked_vertical_middle; }
849
&:first-child > box > button.combo { @extend %linked_vertical:first-child; }
851
&:last-child > box > button.combo { @extend %linked_vertical:last-child; }
853
&:only-child > box > button.combo { @extend %linked_vertical:only-child; }
855
}
856
%combo_flat {
858
border-radius: 0;
859
background-image: none;
860
font-weight: inherit;
861
@include entry(flat-normal);
863
&:hover { box-shadow: inset 0 -2px $fill_color; }
865
&:checked {
867
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
868
$primary_color 100%,
869
transparent 0%)
870
0 0 2 / 0 0 2px;
871
}
872
&:disabled { color: $disabled_fg_color; }
874
}
875
/************
878
* Toolbars *
879
************/
880
toolbar {
881
-GtkWidget-window-dragging: true;
882
padding: $container_padding / 2;
883
background-color: $bg_color;
884
button { @extend %button_basic.flat; }
886
// on OSD
888
.osd & { background-color: transparent; }
889
// stand-alone OSD toolbars
891
&.osd {
892
transition: $shadow_transition;
893
padding: $container_padding;
894
border-radius: 2px;
895
box-shadow: $shadow_2, inset 0 1px $highlight_color;
896
background-color: $base_color;
897
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
899
&.left,
901
&.right,
902
&.top,
903
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
904
}
905
// toolbar separators
907
&.horizontal separator { margin: $container_padding / 2; }
908
&.vertical separator { margin: $container_padding / 2; }
909
&:not(.inline-toolbar):not(.osd) {
911
scale,
912
entry,
913
spinbutton,
914
button { margin: $container_padding / 2; }
915
.linked entry,
917
.linked spinbutton,
918
.linked button {
919
&:not(:first-child) { margin-left: 0; }
920
&:not(:last-child) { margin-right: 0; }
921
}
922
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
924
}
925
}
926
// searchbar, location-bar & inline-toolbar
928
.inline-toolbar {
929
padding: $container_padding;
930
border-style: solid;
931
border-width: 0 1px 1px;
932
border-color: $border_color;
933
background-color: $alt_base_color;
934
}
935
searchbar,
937
.location-bar {
938
padding: $container_padding;
939
border-style: solid;
940
border-width: 0 0 1px;
941
border-color: $border_color;
942
background-color: $bg_color;
943
background-clip: border-box;
944
}
945
/***************
948
* Header bars *
949
***************/
950
%titlebar,
951
headerbar {
952
transition: background-color $shorter_duration $deceleration_curve;
953
min-height: $large_size;
954
padding: 0 $container_padding;
955
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
956
background-color: $titlebar_bg_color;
957
color: $titlebar_fg_color;
958
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
960
&:backdrop {
962
color: $secondary_titlebar_fg_color;
963
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
965
}
966
.title {
968
transition: $longer_transition;
969
padding: 0 12px;
970
font-weight: bold;
971
}
972
.subtitle {
974
transition: $longer_transition;
975
padding: 0 12px;
976
font-size: smaller;
977
@extend .dim-label;
979
}
980
button:not(.suggested-action):not(.destructive-action) {
982
@extend %button_basic.flat;
983
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
985
$titlebar_indicator_color 0%,
986
transparent 0%)
987
0 0 0 / 0 0 0px;
988
&:checked {
990
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
991
$titlebar_indicator_color 100%,
992
transparent 0%)
993
0 0 2 / 0 0 2px;
994
&, &:disabled { background-color: transparent; }
996
}
997
}
998
button.suggested-action, button.destructive-action {
1000
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1001
}
1002
&.selection-mode {
1004
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1005
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1006
transition: background-color 0.00001s $longer_duration;
1007
animation: header_ripple_effect $longer_duration $deceleration_curve;
1008
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1009
background-color: $primary_color;
1010
color: $inverse_fg_color;
1011
&:backdrop {
1013
color: $secondary_inverse_fg_color;
1014
}
1015
.subtitle:link { @extend *:link:selected; }
1017
button:not(.suggested-action):not(.destructive-action) {
1019
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1020
currentColor 0%,
1021
transparent 0%)
1022
0 0 0 / 0 0 0px;
1023
color: currentColor;
1024
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1026
&:checked {
1028
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1029
currentColor 100%,
1030
transparent 0%)
1031
0 0 2 / 0 0 2px;
1032
color: currentColor;
1033
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1035
}
1036
}
1037
.selection-menu {
1039
padding-left: 16px;
1040
padding-right: 16px;
1041
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1043
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1045
}
1046
}
1047
.fullscreen &,
1049
.tiled &,
1050
.maximized & {
1051
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1052
box-shadow: $shadow_1;
1053
}
1054
&.default-decoration {
1056
min-height: $small_size;
1057
padding: $container_padding;
1058
box-shadow: inset 0 1px $titlebar_highlight_color;
1059
.fullscreen &,
1061
.tiled &,
1062
.maximized & { box-shadow: none; }
1063
button.titlebutton {
1065
min-height: $small_size;
1066
min-width: $small_size;
1067
margin: 0;
1068
padding: 0;
1069
}
1070
// workaround for non-animatable buttons
1072
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1073
}
1074
.solid-csd & {
1076
&:dir(rtl), &:dir(ltr) { // specificity bump
1077
// margin-left: -2px;
1078
// margin-right: -2px;
1079
// margin-top: -2px;
1080
// border-radius: 0;
1081
// box-shadow: inset 0 1px $titlebar_highlight_color;
1082
}
1083
}
1084
}
1085
headerbar {
1087
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1088
entry,
1089
spinbutton,
1090
// separator,
1091
button {
1092
margin-top: $container_padding;
1093
margin-bottom: $container_padding;
1094
}
1095
switch {
1097
margin-top: $container_padding * 2;
1098
margin-bottom: $container_padding * 2;
1099
}
1100
// reset button margins of the spinbutton
1102
spinbutton button {
1103
margin-top: 0;
1104
margin-bottom: 0;
1105
}
1106
}
1107
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1109
border-top-left-radius: 2px;
1110
border-top-right-radius: 2px;
1111
}
1112
headerbar { // headerbar border rounding
1114
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1115
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1116
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1118
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1120
&:first-child, &:last-child {
1121
border-top-left-radius: 2px;
1122
border-top-right-radius: 2px;
1123
}
1124
}
1125
}
1126
.titlebar:not(headerbar) {
1128
window.csd > & {
1129
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1130
padding: 0;
1131
background-color: transparent;
1132
background-image: none;
1133
border-style: none;
1134
box-shadow: none;
1135
}
1136
> separator {
1138
background-color: $titlebar_bg_color;
1139
background-image: image($border_color);
1140
}
1141
@extend %titlebar;
1143
}
1144
/************
1147
* Pathbars *
1148
************/
1149
%pathbar_button,
1150
.path-bar button {
1151
padding-left: ($medium_size - 24px) / 2;
1152
padding-right: ($medium_size - 24px) / 2;
1153
label:not(:only-child) {
1155
&:first-child { margin-left: 4px; }
1156
&:last-child { margin-right: 4px; }
1158
}
1159
&.slider-button {
1161
padding-left: (24px - 16px) / 2;
1162
padding-right: (24px - 16px) / 2;
1163
}
1164
:not(headerbar) & {
1166
@extend %flat_button;
1167
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1169
$primary_color 0%,
1170
transparent 0%)
1171
0 0 0 / 0 0 0px;
1172
border-radius: 2px;
1173
&:checked {
1175
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1176
$primary_color 100%,
1177
transparent 0%)
1178
0 0 2 / 0 0 2px;
1179
&, &:disabled { background-color: transparent; }
1181
}
1182
}
1183
}
1184
/**************
1187
* Tree Views *
1188
**************/
1189
treeview.view {
1190
@at-root * {
1191
-GtkTreeView-horizontal-separator: 4;
1192
-GtkTreeView-grid-line-width: 1;
1193
-GtkTreeView-grid-line-pattern: '';
1194
-GtkTreeView-tree-line-width: 1;
1195
-GtkTreeView-tree-line-pattern: '';
1196
-GtkTreeView-expander-size: 16;
1197
}
1198
border-left-color: $fill_color; // this is actually the tree lines color,
1200
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1201
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1203
&.separator {
1205
min-height: 1px + 2px * 2;
1206
color: $border_color;
1207
}
1208
&:drop(active) {
1210
border-style: solid none;
1211
border-width: 1px;
1212
border-color: $accent_color;
1213
&.after { border-top-style: none; }
1215
&.before { border-bottom-style: none; }
1217
}
1218
&.expander {
1220
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1221
-gtk-icon-transform: rotate(-90deg);
1222
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1224
&:checked { -gtk-icon-transform: unset; }
1226
color: $secondary_fg_color;
1228
&:hover, &:active { color: $fg_color; }
1230
&:disabled { color: $disabled_secondary_fg_color; }
1232
&:selected {
1234
color: $secondary_inverse_fg_color;
1235
&:hover, &:active { color: $inverse_fg_color; }
1237
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1239
}
1240
}
1241
&.progressbar { // progress bar in treeviews
1243
border-bottom: $bar_size solid $primary_color;
1244
box-shadow: none;
1245
background-color: transparent;
1246
&:selected { border-bottom-color: currentColor; }
1248
}
1249
&.trough { // progress bar trough in treeviews
1251
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1252
box-shadow: none;
1253
background-color: transparent;
1254
&:selected { border-bottom-color: $fill_color; }
1256
}
1257
header {
1259
button {
1260
@extend row.activatable;
1261
padding: 2px 6px;
1263
border-style: none solid solid none;
1264
border-width: 1px;
1265
border-color: $border_color;
1266
border-radius: 0;
1267
background-clip: border-box;
1268
&, &:hover, &:active { box-shadow: none; }
1270
&, &:disabled { background-color: $base_color; }
1272
&:last-child { border-right-style: none; }
1274
}
1275
}
1276
button.dnd,
1278
header.button.dnd { // for treeview-like derive widgets
1279
padding: 2px 6px;
1280
border-style: none solid solid;
1281
border-width: 1px;
1282
border-color: $border_color;
1283
border-radius: 0;
1284
box-shadow: none;
1285
background-color: $base_color;
1286
background-clip: border-box;
1287
color: $primary_color;
1288
}
1289
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1291
}
1292
/*********
1295
* Menus *
1296
*********/
1297
menubar,
1298
.menubar {
1299
-GtkWidget-window-dragging: true;
1300
padding: 0;
1301
// box-shadow: inset 0 -1px $border_color;
1302
background-color: $titlebar_bg_color;
1303
> menuitem {
1305
transition: $shorter_transition;
1306
min-height: 20px;
1307
padding: 4px 8px;
1308
color: $secondary_titlebar_fg_color;
1309
&:hover { // Seems like it :hover even with keyboard focus
1311
transition: none;
1312
background-color: $semi_fill_color;
1313
color: $titlebar_fg_color;
1314
}
1315
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1317
}
1318
}
1319
.csd.popup { border-radius: 2px; }
1321
menu,
1323
.menu,
1324
.context-menu {
1325
margin: 4px 0;
1326
padding: 4px 0;
1327
box-shadow: inset 0 1px $highlight_color;
1328
background-color: $base_color;
1329
border: 1px solid $border_color; // adds borders in a non composited env
1330
.csd & {
1332
border: none; // axes borders in a composited env
1333
border-radius: 2px;
1334
}
1335
menuitem {
1337
transition: $shorter_transition;
1338
min-height: 20px;
1339
min-width: 40px;
1340
padding: 4px 8px;
1341
font: initial;
1342
text-shadow: none;
1343
&:hover {
1345
transition: none;
1346
background-color: $semi_fill_color;
1347
}
1348
&:disabled { color: $disabled_fg_color; }
1350
// submenu indicators
1352
arrow {
1353
min-height: 16px;
1354
min-width: 16px;
1355
&:dir(ltr) {
1357
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1358
margin-left: 8px;
1359
}
1360
&:dir(rtl) {
1362
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1363
margin-right: 8px;
1364
}
1365
}
1366
// avoids labels color being overridden, see
1368
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1369
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1370
}
1371
// overflow arrows
1373
> arrow {
1374
min-height: 16px;
1375
min-width: 16px;
1376
padding: 4px;
1377
background-color: $base_color;
1378
color: $secondary_fg_color;
1379
&.top {
1381
margin-top: -4px;
1382
border-bottom: 1px solid $border_color;
1383
border-radius: 2px 2px 0 0;
1384
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1385
}
1386
&.bottom {
1388
margin-bottom: -4px * 3;
1389
border-top: 1px solid $border_color;
1390
border-radius: 0 0 2px 2px;
1391
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1392
}
1393
&:hover {
1395
background-image: image($semi_fill_color);
1396
color: $fg_color;
1397
}
1398
&:disabled {
1400
border-color: transparent;
1401
background-color: transparent;
1402
color: transparent;
1403
// color: $disabled_secondary_fg_color;
1404
}
1405
}
1406
separator { margin: 4px 0; }
1408
}
1409
menuitem {
1411
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1412
}
1413
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1415
// Electron/Atom render all translucent colors in opaque colors.
1416
// It's a very critical issue for this theme and should be fixed by upstream...
1417
.popup:not(.csd) menu {
1418
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1419
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1420
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1421
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1422
menuitem {
1424
color: $opaque_fg_color;
1425
&:hover { background-color: $opaque_semi_fill_color; }
1427
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1429
}
1430
// TODO: not working this, where/how i can set the accelerators?
1432
accelerator { color: $opaque_tertiary_fg_color; }
1433
}
1434
/************
1437
* Popovers *
1438
************/
1439
popover.background {
1440
transition: $shadow_transition;
1441
padding: 2px;
1442
box-shadow: $shadow_2; // TODO: this should really have a highlight
1443
background-color: $lighter_bg_color;
1444
&:backdrop { box-shadow: $shadow_1; }
1446
&, .csd & {
1448
border-style: solid;
1449
border-width: 1px;
1450
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1451
border-radius: 2px + 1px;
1452
}
1453
> stack { margin: -4px; } // remove extra padding from menu style popovers
1455
> toolbar { margin: -2px; }
1457
> list,
1459
> .view,
1460
> toolbar {
1461
border-style: none;
1462
box-shadow: none;
1463
background-color: transparent;
1464
}
1465
&.touch-selection,
1467
&.magnifier,
1468
&.osd { @extend %osd; }
1469
// entry { @extend %entry.flat; }
1471
// button.combo { @extend %combo_flat; }
1473
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1475
&.menu button,
1477
button.model {
1478
@extend %simple_flat_button;
1479
min-height: 32px;
1481
padding: 0 8px;
1482
border-radius: 2px;
1483
&:checked { @extend %selected_items; }
1485
}
1486
separator { margin: 4px 0; }
1488
list separator { margin: 0; }
1490
}
1491
/*************
1493
* Notebooks *
1494
*************/
1495
notebook {
1496
> header {
1497
border-width: 1px;
1498
border-color: $border_color;
1499
background-color: $bg_color;
1500
background-clip: border-box;
1501
&.top {
1503
border-bottom-style: solid;
1504
> tabs {
1505
margin-bottom: -1px;
1506
> tab {
1507
&:hover { box-shadow: inset 0 -2px $fill_color; }
1509
&:checked { box-shadow: inset 0 -2px $primary_color; }
1511
}
1512
}
1513
}
1514
&.bottom {
1516
border-top-style: solid;
1517
> tabs {
1518
margin-top: -1px;
1519
> tab {
1520
&:hover { box-shadow: inset 0 2px $fill_color; }
1522
&:checked { box-shadow: inset 0 2px $primary_color; }
1524
}
1525
}
1526
}
1527
&.left {
1529
border-right-style: solid;
1530
> tabs {
1531
margin-right: -1px;
1532
> tab {
1533
&:hover { box-shadow: inset -2px 0 $fill_color; }
1535
&:checked { box-shadow: inset -2px 0 $primary_color; }
1537
}
1538
}
1539
}
1540
&.right {
1542
border-left-style: solid;
1543
> tabs {
1544
margin-left: -1px;
1545
> tab {
1546
&:hover { box-shadow: inset 2px 0 $fill_color; }
1548
&:checked { box-shadow: inset 2px 0 $primary_color; }
1550
}
1551
}
1552
}
1553
&.top > tabs > arrow {
1555
@extend %notebook_vert_arrows;
1556
border-top-style: none;
1558
}
1559
&.bottom > tabs > arrow {
1561
@extend %notebook_vert_arrows;
1562
border-bottom-style: none;
1564
}
1565
@at-root %notebook_vert_arrows {
1567
padding-left: 4px;
1568
padding-right: 4px;
1569
&.down {
1571
margin-left: -8px;
1572
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1573
}
1574
&.up {
1576
margin-right: -8px;
1577
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1578
}
1579
}
1580
&.left > tabs > arrow {
1582
@extend %notebook_horz_arrows;
1583
border-left-style: none;
1585
}
1586
&.right > tabs > arrow {
1588
@extend %notebook_horz_arrows;
1589
border-right-style: none;
1591
}
1592
@at-root %notebook_horz_arrows {
1594
padding-top: 4px;
1595
padding-bottom: 4px;
1596
&.down {
1598
margin-top: -8px;
1599
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1600
}
1601
&.up {
1603
margin-bottom: -8px;
1604
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1605
}
1606
}
1607
> tabs > arrow {
1609
@extend %simple_flat_button;
1610
min-height: 16px;
1612
min-width: 16px;
1613
border-radius: 0;
1614
}
1615
tab {
1617
transition: $longer_transition,
1618
background-size 0,
1619
background-image 0;
1620
min-height: $small_size;
1621
min-width: $small_size;
1622
padding: $container_padding 12px;
1623
outline-offset: -6px;
1625
border-width: 1px; // for reorderable tabs
1627
border-color: transparent; //
1628
background-image: radial-gradient(circle farthest-corner at center,
1630
$primary_color 10%,
1631
transparent 0%);
1632
background-repeat: no-repeat;
1633
background-position: center;
1634
background-size: 0% 0%;
1635
color: $secondary_fg_color;
1637
font-weight: 500;
1638
&:hover {
1640
color: $fg_color;
1641
&.reorderable-page {
1643
border-color: $border_color;
1644
background-color: $alt_base_color;
1645
}
1646
}
1647
&:disabled { color: $disabled_secondary_fg_color; }
1649
&:checked {
1651
transition: $longer_transition,
1652
background-size $longer_duration $deceleration_curve,
1653
background-image $longer_duration + $ripple_duration $deceleration_curve;
1654
background-image: radial-gradient(circle farthest-corner at center,
1655
transparent 10%,
1656
transparent 0%);
1657
background-size: 1000% 1000%;
1658
color: $fg_color;
1659
&:disabled { color: $disabled_fg_color; }
1661
&.reorderable-page {
1663
border-color: $border_color;
1664
background-color: $base_color;
1665
}
1666
}
1667
// colors the button like the label, overridden otherwise
1669
button.flat {
1670
@extend %small_button;
1671
&:last-child {
1673
margin-left: $container_padding;
1674
margin-right: $container_padding - 12px;
1675
}
1676
&:first-child {
1678
margin-left: $container_padding - 12px;
1679
margin-right: $container_padding;
1680
}
1681
}
1682
}
1683
&.top,
1685
&.bottom {
1686
tabs {
1687
padding-left: 8px;
1688
padding-right: 8px;
1689
&:not(:only-child) {
1691
&:first-child { margin-left: 0; }
1692
&:last-child { margin-right: 0; }
1693
}
1694
tab {
1696
&.reorderable-page {
1697
margin: 0 -1px;
1698
border-style: none solid;
1699
}
1700
}
1701
}
1702
}
1703
&.left,
1705
&.right {
1706
tabs {
1707
padding-top: 8px;
1708
padding-bottom: 8px;
1709
&:not(:only-child) {
1711
&:first-child { margin-top: 0; }
1712
&:last-child { margin-bottom: 0; }
1713
}
1714
tab {
1716
&.reorderable-page {
1717
margin: -1px 0;
1718
border-style: solid none;
1719
}
1720
}
1721
}
1722
}
1723
}
1724
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1726
background-color: $base_color;
1727
entry:not(.search),
1729
spinbutton:not(.vertical) { @extend %entry.flat; }
1730
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1732
button.combo { @extend %combo_flat; }
1734
}
1735
}
1736
/**************
1739
* Scrollbars *
1740
**************/
1741
scrollbar {
1742
$_slider_min_length: 24px;
1743
// disable steppers
1745
@at-root * {
1746
-GtkScrollbar-has-backward-stepper: false;
1747
-GtkScrollbar-has-forward-stepper: false;
1748
}
1749
transition: $longer_transition;
1751
background-color: $base_color;
1752
background-clip: $extra_background_clip;
1753
// scrollbar border
1755
&.top { border-bottom: 1px solid $border_color; }
1756
&.bottom { border-top: 1px solid $border_color; }
1757
&.left { border-right: 1px solid $border_color; }
1758
&.right { border-left: 1px solid $border_color; }
1759
// slider
1761
slider {
1762
transition: $shorter_transition, margin 0, border-width 0;
1763
min-width: 8px;
1764
min-height: 8px;
1765
border: 4px solid transparent;
1766
border-radius: $circular_radius;
1767
background-clip: padding-box;
1768
background-color: $tertiary_fg_color;
1769
&:hover { background-color: $secondary_fg_color; }
1771
&:active { background-color: $fg_color; }
1773
&:disabled { background-color: $disabled_tertiary_fg_color; }
1775
}
1776
&.fine-tune {
1778
slider {
1779
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1780
min-width: 4px;
1781
min-height: 4px;
1782
}
1783
&.horizontal slider { margin: 2px 0; }
1785
&.vertical slider { margin: 0 2px; }
1787
}
1788
&.overlay-indicator {
1790
&:not(.dragging):not(.hovering) {
1791
border-color: transparent;
1792
background-color: transparent;
1793
slider {
1795
min-width: 4px;
1796
min-height: 4px;
1797
margin: 4px - 1px;
1798
border: 1px solid scale-alpha($base_color, $lower_opacity);
1799
}
1800
button {
1802
min-width: 4px;
1803
min-height: 4px;
1804
margin: 4px - 1px;
1805
border: 1px solid scale-alpha($base_color, $lower_opacity);
1806
border-radius: $circular_radius;
1807
background-color: $tertiary_fg_color;
1808
background-clip: padding-box;
1809
-gtk-icon-source: none;
1810
&:disabled { background-color: $disabled_tertiary_fg_color; }
1812
}
1813
&.horizontal {
1815
slider { min-width: $_slider_min_length; }
1816
button { min-width: 8px; }
1818
}
1819
&.vertical {
1821
slider { min-height: $_slider_min_length; }
1822
button { min-height: 8px; }
1824
}
1825
}
1826
&.dragging,
1828
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1829
}
1830
&.horizontal slider { min-width: $_slider_min_length; }
1832
&.vertical slider { min-height: $_slider_min_length; }
1834
// button styling
1836
button {
1837
@extend %simple_flat_button;
1838
min-width: 16px;
1840
min-height: 16px;
1841
padding: 0;
1842
border-radius: 0;
1843
}
1844
// button icons
1846
&.vertical {
1847
button {
1848
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1849
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1851
}
1852
}
1853
&.horizontal {
1855
button {
1856
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1857
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1859
}
1860
}
1861
}
1862
/**********
1865
* Switch *
1866
**********/
1867
switch {
1868
transition: $longer_transition;
1869
margin: $container_padding 0;
1870
border: 4px solid transparent;
1871
border-radius: $circular_radius;
1872
background-color: $fill_color;
1873
background-clip: padding-box;
1874
font-size: 0;
1875
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1877
&:checked {
1879
background-color: scale-alpha($accent_color, 0.5);
1880
&:disabled {
1882
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1883
color: $disabled_fg_color;
1884
}
1885
}
1886
slider {
1888
@include entry(normal);
1889
transition: $longer_transition, $shadow_transition, margin 0;
1891
min-width: $small_size;
1892
min-height: $small_size;
1893
margin: -4px 0 -4px -4px;
1894
border-radius: $circular_radius;
1895
-gtk-outline-radius: $circular_radius;
1896
}
1897
&:hover slider { @include entry(focus); }
1899
&:checked slider {
1901
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1902
animation: needs_attention $longer_duration $deceleration_curve;
1903
margin: -4px -4px -4px 0;
1904
background-color: $accent_color;
1905
color: $inverse_fg_color;
1906
}
1907
&:disabled slider { @include entry(disabled); }
1909
&:checked:disabled slider { animation: none; }
1911
row:selected & {
1913
}
1914
}
1915
/*************************
1918
* Check and Radio items *
1919
*************************/
1920
// draw regular check and radio items using our PNG assets
1921
// all assets are rendered from assets.svg. never add pngs directly
1922
// selection-mode
1924
.view.content-view.check:not(list),
1925
.content-view .tile check:not(list) {
1926
min-height: 40px;
1927
min-width: 40px;
1928
margin: 0;
1929
padding: 0;
1930
box-shadow: none;
1931
background-color: transparent;
1932
background-image: none;
1933
-gtk-icon-shadow: $shadow_1;
1934
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1936
@each $s, $as in ('', '-unchecked'),
1938
(':checked', '-checked') {
1939
&#{$s} {
1940
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1941
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1942
}
1943
}
1944
}
1945
checkbutton.text-button,
1947
radiobutton.text-button {
1948
// this is for a nice focus on check and radios text
1949
padding: 2px;
1950
outline-offset: 0;
1951
label:not(:only-child) { margin: 0 4px; }
1953
}
1954
check,
1956
radio {
1957
min-height: 24px;
1958
min-width: 24px;
1959
margin: -($large_size - 24px) / 2;
1960
padding: ($large_size - 24px) / 2;
1961
@extend %simple_flat_button;
1963
@extend %circular_button;
1965
&:checked, &:indeterminate {
1967
color: $accent_color;
1968
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1970
}
1971
// &:only-child { margin: -12px; }
1973
row &:not(:checked):not(:indeterminate) {
1975
color: gtkalpha(currentColor, $secondary_opacity);
1976
&:hover, &:active { color: currentColor; }
1978
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1980
}
1981
popover & {
1983
&, &:hover, &:disabled {
1984
box-shadow: none;
1985
background-image: none;
1986
}
1987
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1989
&.left:dir(rtl) {
1991
margin-left: -16px;
1992
margin-right: -8px;
1993
}
1994
&.right:dir(ltr) {
1996
margin-left: -8px;
1997
margin-right: -16px;
1998
}
1999
}
2000
menu menuitem & {
2002
transition: none;
2003
min-height: 16px;
2004
min-width: 16px;
2005
margin: 0; // this is a workaround for a menu check/radio size allocation issue
2006
padding: 0;
2007
&:dir(ltr) { margin-right: 8px; }
2009
&:dir(rtl) { margin-left: 8px; }
2011
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2013
&, &:hover, &:disabled {
2015
box-shadow: none;
2016
// color: inherit;
2017
}
2018
}
2019
}
2020
%check,
2022
check {
2023
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2024
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2025
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2027
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2028
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2030
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2031
}
2032
%radio,
2034
radio {
2035
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2036
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2037
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2039
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2040
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2042
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2043
border-image-slice: $large_size / 2px;
2045
border-image-width: $large_size / 2;
2046
$radio_indicator: 10px / $large_size / 2;
2048
& {
2050
border-image-source: -gtk-gradient(radial,
2051
center center, 0,
2052
center center, 0.001,
2053
to($accent_color),
2054
to(transparent));
2055
}
2056
&:checked:not(:indeterminate) {
2058
border-image-source: -gtk-gradient(radial,
2059
center center, 0,
2060
center center, $radio_indicator,
2061
to($accent_color),
2062
to(transparent));
2063
}
2064
&:checked:not(:indeterminate):disabled {
2066
border-image-source: -gtk-gradient(radial,
2067
center center, 0,
2068
center center, $radio_indicator,
2069
to(scale-alpha($accent_color, $disabled_opacity)),
2070
to(transparent));
2071
}
2072
}
2073
%small_check,
2075
menu menuitem check {
2076
& {
2077
border-radius: 2px;
2078
-gtk-outline-radius: 2px;
2079
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2080
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2081
}
2082
&:checked {
2084
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2085
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2086
}
2087
&:indeterminate {
2089
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2090
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2091
}
2092
}
2093
%small_radio,
2095
menu menuitem radio {
2096
& {
2097
border-image: none;
2098
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2099
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2100
}
2101
&:checked {
2103
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2104
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2105
}
2106
&:indeterminate {
2108
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2109
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2110
}
2111
}
2112
// ANIMATION:
2114
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2115
// the transformation is set on the active state and it get reset on the checked state.
2116
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2117
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2119
check:not(:checked):indeterminate:active,
2121
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2122
check:not(:checked),
2124
radio:not(:checked) {
2125
& {
2126
transition: $longer_transition,
2127
background-size $ripple_duration $deceleration_curve,
2128
background-image $ripple_duration * 2 $deceleration_curve,
2129
-gtk-icon-transform 0;
2130
}
2131
&:active {
2133
transition: $longer_transition,
2134
background-size 0,
2135
background-image 0,
2136
-gtk-icon-transform 0;
2137
}
2138
menu menuitem & { transition: none; }
2140
}
2141
treeview.view check,
2143
treeview.view radio {
2144
padding: 0;
2145
&:hover {
2147
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2148
&:disabled { box-shadow: none; }
2150
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2152
}
2153
& {
2155
color: $secondary_fg_color;
2156
&:hover, &:active { color: $fg_color; }
2158
&:disabled { color: $disabled_secondary_fg_color; }
2160
&:checked, &:indeterminate { color: $accent_color; }
2162
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2164
}
2165
&:selected {
2167
color: $secondary_inverse_fg_color;
2168
&:hover, &:active { color: $inverse_fg_color; }
2170
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2172
&:checked, &:indeterminate { color: $accent_color; }
2174
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2176
}
2177
}
2178
treeview.view radio:checked {
2180
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2181
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2182
border-image: none;
2183
}
2184
/************
2187
* GtkScale *
2188
************/
2189
scale {
2190
// sizing
2191
$_marks_lenght: 8px;
2192
$_marks_distance: 8px;
2193
$slider_size: 24px;
2195
$marks_slider_size: 30px;
2196
$slider_margin: -($slider_size - $bar_size) / 2;
2198
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2199
$color_slider_margin: -($slider_size) / 2;
2201
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2202
min-height: $medium_size - $slider_size;
2204
min-width: $medium_size - $slider_size;
2205
padding: ($slider_size / 2);
2206
* { transition: $longer_transition; }
2208
// the slider is inside the trough, so to have make it bigger there's a negative margin
2210
slider {
2211
min-height: $slider_size;
2212
min-width: $slider_size;
2213
margin: $slider_margin;
2214
}
2215
// the backing bit
2217
trough {
2218
outline-offset: 2px;
2219
background-color: $fill_color;
2220
&:disabled { color: $disabled_fg_color; }
2222
}
2223
// the colored part of the backing bit
2225
highlight {
2226
background-color: $accent_color;
2227
&:disabled { background-color: transparent; }
2229
}
2230
// this is another differently styled part of the backing bit, the most relevant use case is for example
2232
// in media player to indicate how much video stream as been cached
2233
fill {
2234
background-color: $fill_color;
2235
&:disabled { background-color: transparent; }
2237
}
2238
slider {
2240
transition: all $shorter_duration $standard_curve;
2241
// border-radius: 100%;
2242
// background-color: $accent_color;
2243
background-repeat: no-repeat;
2244
background-position: center;
2245
@each $s, $as in ('', ''),
2247
(':disabled', '-disabled') {
2248
&#{$s} {
2249
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2250
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2252
}
2253
}
2254
background-size: calc(100% - 8px);
2256
&:hover { background-size: calc(100% - 4px); }
2258
&:active { background-size: calc(100% - 0px); }
2260
}
2261
// click-and-hold the slider to activate
2263
&.fine-tune {
2264
// to make the slider shrink in fine-tune mode
2265
slider { background-size: calc(100% - 12px); }
2266
}
2267
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2269
marks {
2271
color: $fill_color;
2272
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2274
(bottom, bottom, top),
2275
(top, left, right),
2276
(bottom, right, left) {
2277
&.#{$marks_class} {
2278
margin-#{$marks_margin}: $_marks_distance;
2279
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2280
}
2281
}
2282
}
2283
&.horizontal {
2285
indicator {
2286
min-height: $_marks_lenght;
2287
min-width: 1px;
2288
}
2289
}
2290
&.vertical {
2292
indicator {
2293
min-height: 1px;
2294
min-width: $_marks_lenght;
2295
}
2296
}
2297
// *WARNING* scale with marks madness following
2299
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2301
('vertical', 'vert') {
2302
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2303
('marks-after', 'marks-after:not(.marks-before)') {
2304
&.#{$dir_class}.#{$marks_class} {
2305
slider {
2306
@each $state, $state_infix in ('', ''),
2307
(':disabled', '-disabled') {
2308
&#{$state} {
2309
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2310
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2312
}
2313
}
2314
@if $dir_class == 'horizontal' {
2316
min-height: $marks_slider_size;
2317
min-width: $slider_size;
2318
@if $marks_infix == 'marks-before' {
2320
margin-top: $marks_slider_margin;
2321
background-position: center calc(100% - 4px);
2323
&:hover { background-position: center calc(100% - 2px); }
2325
&:active { background-position: center calc(100% - 0px); }
2327
}
2328
@if $marks_infix == 'marks-after' {
2330
margin-bottom: $marks_slider_margin;
2331
background-position: center calc(4px);
2333
&:hover { background-position: center calc(2px); }
2335
&:active { background-position: center calc(0px); }
2337
}
2338
}
2339
@if $dir_class == 'vertical' {
2341
min-height: $slider_size;
2342
min-width: $marks_slider_size;
2343
@if $marks_infix == 'marks-before' {
2345
margin-left: $marks_slider_margin;
2346
background-position: calc(4px) center;
2348
&:hover { background-position: calc(2px) center; }
2350
&:active { background-position: calc(0px) center; }
2352
}
2353
@if $marks_infix == 'marks-after' {
2355
margin-right: $marks_slider_margin;
2356
background-position: calc(100% - 4px) center;
2358
&:hover { background-position: calc(100% - 2px) center; }
2360
&:active { background-position: calc(100% - 0px) center; }
2362
}
2363
}
2364
}
2365
&.fine-tune slider {
2367
@if $dir_class == 'horizontal' {
2368
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2369
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2371
}
2372
@if $dir_class == 'vertical' {
2374
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2375
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2377
}
2378
}
2379
}
2380
}
2381
}
2382
&.color {
2384
min-height: 0;
2385
min-width: 0;
2386
&.horizontal {
2388
padding: 0 0 12px 0;
2389
slider {
2391
&:dir(ltr), &:dir(rtl) { // specificity bump
2392
margin-bottom: $color_slider_margin;
2393
margin-top: $color_marks_slider_margin;
2394
}
2395
}
2396
}
2397
&.vertical {
2399
&:dir(ltr) {
2400
padding: 0 0 0 12px;
2401
slider {
2403
margin-left: $color_slider_margin;
2404
margin-right: $color_marks_slider_margin;
2405
}
2406
}
2407
&:dir(rtl) {
2409
padding: 0 12px 0 0;
2410
slider {
2412
margin-right: $color_slider_margin;
2413
margin-left: $color_marks_slider_margin;
2414
}
2415
}
2416
}
2417
}
2418
}
2419
/*****************
2422
* Progress bars *
2423
*****************/
2424
progressbar {
2425
// sizing
2426
&.horizontal {
2427
trough,
2428
progress { min-height: $bar_size; }
2429
}
2430
&.vertical {
2432
trough,
2433
progress { min-width: $bar_size; }
2434
}
2435
// FIXME: insensitive state missing and some other state should be set probably
2437
color: $tertiary_fg_color;
2438
font-size: smaller;
2439
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2441
progress { background-color: $primary_color; }
2443
&.osd { // progressbar.osd used for epiphany page loading progress
2445
// min-width: $bar_size;
2446
// min-height: $bar_size;
2447
// background-color: transparent;
2448
// trough { background-color: transparent; }
2450
// progress { background-color: $primary_color; }
2452
}
2453
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2455
}
2456
/*************
2459
* Level Bar *
2460
*************/
2461
levelbar {
2462
block {
2463
min-width: $medium_size;
2464
min-height: $bar_size;
2465
}
2466
&.vertical block {
2468
min-width: $bar_size;
2469
min-height: $medium_size;
2470
}
2471
trough {
2473
padding: 2px;
2474
border-radius: 2px;
2475
@include entry(normal);
2477
&:disabled { @include entry(disabled); }
2479
}
2480
&.horizontal.discrete {
2482
block { margin: 0 1px; }
2483
trough { padding: 2px 1px; }
2485
}
2486
&.vertical.discrete {
2488
block { margin: 1px 0; }
2489
trough { padding: 1px 2px; }
2491
}
2492
block {
2494
&.low { background-color: $warning_color; }
2495
&.high,
2497
&:not(.empty) { background-color: $primary_color; }
2498
&.full { background-color: $success_color; }
2500
&.empty {
2502
background-color: $fill_color;
2503
color: $disabled_fg_color;
2504
}
2505
}
2506
}
2507
/****************
2510
* Print dialog *
2511
*****************/
2512
printdialog {
2513
paper {
2514
padding: 0;
2515
border: 1px solid $border_color;
2516
background-color: $base_color;
2517
color: $fg_color;
2518
}
2519
.dialog-action-box { margin: 12px; }
2521
}
2522
/**********
2525
* Frames *
2526
**********/
2527
frame > border,
2528
.frame {
2529
margin: 0;
2530
padding: 0;
2531
border: 1px solid $border_color;
2532
border-radius: 0;
2533
box-shadow: none;
2534
&.flat { border-style: none; }
2536
}
2537
frame.flat > border { @extend .frame.flat; } // for backporting
2539
actionbar > revealer > box {
2541
padding: $container_padding;
2542
border-top: 1px solid $border_color;
2543
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2545
}
2546
scrolledwindow {
2548
viewport.frame { // avoid double borders when viewport inside scrolled window
2549
border-style: none;
2550
}
2551
// This is used when content is touch-dragged past boundaries.
2553
// draws a box on top of the content, the size changes programmatically.
2554
@at-root overshoot {
2555
&.top { @include overshoot(top); }
2556
&.bottom { @include overshoot(bottom); }
2558
&.left { @include overshoot(left); }
2560
&.right { @include overshoot(right); }
2562
}
2563
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2565
@at-root undershoot {
2566
&.top { @include undershoot(top); }
2567
&.bottom { @include undershoot(bottom); }
2569
&.left { @include undershoot(left); }
2571
&.right { @include undershoot(right); }
2573
}
2574
@at-root junction { // the small square between two scrollbars
2576
border-style: solid none none solid;
2577
border-width: 1px;
2578
border-color: $border_color;
2579
background-color: $base_color;
2580
&:dir(rtl) { border-style: solid solid none none; }
2582
}
2583
}
2584
// vbox and hbox separators
2586
separator {
2587
min-width: 1px;
2588
min-height: 1px;
2589
background-color: $border_color;
2590
}
2591
%hide_separators {
2593
min-width: 0;
2594
min-height: 0;
2595
background-color: transparent;
2596
}
2597
/*********
2600
* Lists *
2601
*********/
2602
list {
2603
border-color: $border_color;
2604
background-color: $base_color;
2605
row { padding: 2px; }
2607
}
2608
// FIXME
2610
$row_transition: $longer_transition, background-color 0, color 0;
2611
row {
2613
&.activatable {
2614
transition: $row_transition,
2615
background-size $ripple_duration $deceleration_curve,
2616
background-image $ripple_duration * 2 $deceleration_curve;
2617
box-shadow: inset 0 0 0 9999px transparent;
2618
background-image: radial-gradient(circle farthest-corner at center,
2619
transparent 10%,
2620
transparent 0%);
2621
background-repeat: no-repeat;
2622
background-position: center;
2623
background-size: 1000% 1000%;
2624
&:hover {
2626
transition: $row_transition,
2627
box-shadow 0,
2628
background-size $ripple_duration $deceleration_curve,
2629
background-image $ripple_duration * 2 $deceleration_curve;
2630
box-shadow: inset 0 0 0 9999px $row_fill_color;
2631
}
2632
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2634
&:active {
2635
transition: $row_transition,
2636
background-size 0,
2637
background-image 0;
2638
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2639
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2640
background-image: radial-gradient(circle farthest-corner at center,
2641
$semi_fill_color 10%,
2642
transparent 0%);
2643
background-size: 0% 0%;
2644
}
2645
}
2646
&:selected { @extend %selected_items; }
2648
}
2649
/*********************
2652
* App Notifications *
2653
*********************/
2654
.app-notification {
2655
@extend %osd;
2656
@extend toolbar.osd;
2658
margin: 8px;
2660
button { @extend %button_basic.flat; }
2662
&.frame,
2664
border { border-style: none; }
2665
}
2666
/*************
2669
* Expanders *
2670
*************/
2671
expander {
2672
arrow {
2673
transition: all $shorter_duration $standard_curve;
2674
min-width: 16px;
2675
min-height: 16px;
2676
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2677
-gtk-icon-transform: rotate(-90deg);
2678
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2680
&:checked { -gtk-icon-transform: unset; }
2682
color: $secondary_fg_color;
2684
&:hover, &:active { color: $fg_color; }
2686
&:disabled { color: $disabled_secondary_fg_color; }
2688
&:selected {
2690
color: $secondary_inverse_fg_color;
2691
&:hover, &:active { color: $inverse_fg_color; }
2693
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2695
}
2696
}
2697
}
2698
/************
2701
* Calendar *
2702
************/
2703
calendar {
2704
padding: 1px;
2705
border: 1px solid $border_color;
2706
color: $fg_color;
2707
&:disabled { color: $disabled_fg_color; }
2709
&:selected {
2711
@extend %selected_items;
2712
border-radius: 2px + 1px;
2714
}
2715
&.header {
2717
border-style: none none solid;
2718
border-radius: 0;
2719
}
2720
&.button { @extend %simple_flat_button; }
2722
&.highlight {
2724
color: gtkalpha(currentColor, $tertiary_opacity);
2725
font-weight: 500;
2726
}
2727
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2729
}
2730
/***********
2733
* Dialogs *
2734
***********/
2735
messagedialog { // Message Dialog styling
2736
&.background { background-color: $lighter_bg_color; }
2737
.titlebar {
2739
min-height: $small_size;
2740
border-style: none;
2741
box-shadow: inset 0 1px $highlight_color;
2742
background-color: $lighter_bg_color;
2743
color: $fg_color;
2744
&:backdrop { color: $secondary_fg_color; }
2746
}
2747
&.csd { // rounded bottom border styling for csd version
2749
&.background {
2750
// bigger radius for better antialiasing
2751
border-bottom-left-radius: 2px;
2752
border-bottom-right-radius: 2px;
2753
}
2754
.dialog-action-area button {
2756
padding: 8px 16px;
2757
border-top: 1px solid $border_color;
2758
border-radius: 0;
2759
@extend %simple_flat_button;
2761
&:first-child { border-bottom-left-radius: 2px; }
2763
&:last-child { border-bottom-right-radius: 2px; }
2765
}
2766
}
2767
}
2768
filechooser {
2770
.dialog-action-box { border-top: 1px solid $border_color; }
2771
#pathbarbox {
2773
border-bottom: 1px solid $border_color;
2774
background-color: $bg_color;
2775
}
2776
}
2777
filechooserbutton:drop(active) {
2779
box-shadow: none;
2780
}
2781
/***********
2784
* Sidebar *
2785
***********/
2786
.sidebar {
2787
border-style: none;
2788
background-color: $lighter_bg_color;
2789
@at-root %sidebar_left,
2791
&:dir(ltr),
2792
&.left,
2793
&.left:dir(rtl) {
2794
border-right: 1px solid $border_color;
2795
border-left-style: none;
2796
}
2797
@at-root %sidebar_right,
2799
&:dir(rtl),
2800
&.right {
2801
border-left: 1px solid $border_color;
2802
border-right-style: none;
2803
}
2804
list { background-color: transparent; }
2806
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2808
}
2809
stacksidebar {
2811
&.sidebar {
2812
&:dir(ltr),
2813
&.left,
2814
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2815
&:dir(rtl),
2817
&.right { list { @extend %sidebar_right; }}
2818
}
2819
row {
2821
padding: 10px 4px;
2822
> label {
2824
padding-left: 6px;
2825
padding-right: 6px;
2826
}
2827
&.needs-attention > label { @extend %needs_attention; }
2829
}
2830
}
2831
/****************
2834
* File chooser *
2835
****************/
2836
placessidebar {
2837
> viewport.frame { border-style: none; }
2838
list { padding: (4px - 3px) 0 4px; }
2840
row {
2842
// Needs overriding of the GtkListBoxRow padding
2843
min-height: 32px;
2844
margin: -1px 0; // Remove unknown margins
2845
padding: 0;
2846
// Using margins/padding directly in the SidebarRow
2848
// will make the animation of the new bookmark row jump
2849
> revealer { padding: 0 12px; }
2850
&:selected { color: $inverse_fg_color; }
2852
&:disabled { color: $disabled_fg_color; }
2854
image.sidebar-icon {
2856
opacity: $tertiary_opacity; // dim the device icons
2857
&:dir(ltr) { padding-right: 8px; }
2859
&:dir(rtl) { padding-left: 8px; }
2860
}
2861
label.sidebar-label {
2863
&:dir(ltr) { padding-right: 2px; }
2864
&:dir(rtl) { padding-left: 2px; }
2865
}
2866
@at-root button.sidebar-button {
2868
@extend %simple_flat_button;
2869
@extend %small_button;
2871
row:selected & {
2873
}
2874
}
2875
&.sidebar-placeholder-row {
2877
min-height: 2px;
2878
padding: 0 8px;
2879
background-image: image($accent_color);
2880
background-clip: content-box;
2881
}
2882
&.sidebar-new-bookmark-row { color: $accent_color; }
2884
&:drop(active):not(:disabled) {
2886
box-shadow: inset 0 0 0 2px $accent_color;
2887
&:selected {
2889
// background-color: $accent_color;
2890
// color: $inverse_fg_color;
2891
}
2892
}
2893
}
2894
}
2895
placesview {
2897
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2898
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2900
// this selects the "connect to server" label
2902
> actionbar > revealer > box > label {
2903
padding-left: 8px;
2904
padding-right: 8px;
2905
}
2906
}
2907
/*********
2910
* Paned *
2911
*********/
2912
paned {
2913
> separator {
2914
min-width: 1px;
2915
min-height: 1px;
2916
-gtk-icon-source: none; // defeats the ugly default handle decoration
2917
border-style: none; // just to be sure
2918
background-color: transparent;
2919
// workaround, using background istead of a border since the border will get rendered twice (?)
2920
background-image: image($border_color);
2921
background-size: 1px 1px;
2922
background-clip: content-box; // avoids borders image being rendered twice (?)
2923
&.wide {
2925
min-width: 6px;
2926
min-height: 6px;
2927
background-color: $bg_color;
2928
background-image: image($border_color), image($border_color);
2929
background-size: 1px 1px, 1px 1px;
2930
}
2931
}
2932
&.horizontal > separator {
2934
background-repeat: repeat-y;
2935
&:dir(ltr) {
2937
margin: 0 -8px 0 0;
2938
padding: 0 8px 0 0;
2939
background-position: left;
2940
}
2941
&:dir(rtl) {
2943
margin: 0 0 0 -8px;
2944
padding: 0 0 0 8px;
2945
background-position: right;
2946
}
2947
&.wide {
2949
margin: 0;
2950
padding: 0;
2951
background-repeat: repeat-y, repeat-y;
2952
background-position: left, right;
2953
}
2954
}
2955
&.vertical > separator {
2957
margin: 0 0 -8px 0;
2958
padding: 0 0 8px 0;
2959
background-repeat: repeat-x;
2960
background-position: top;
2961
&.wide {
2963
margin: 0;
2964
padding: 0;
2965
background-repeat: repeat-x, repeat-x;
2966
background-position: bottom, top;
2967
}
2968
}
2969
}
2970
/**************
2973
* GtkInfoBar *
2974
**************/
2975
infobar {
2976
border-style: none;
2977
&.info { background-color: $info_bg_color; }
2979
&.question { background-color: $question_bg_color; }
2981
&.warning { background-color: $warning_bg_color; }
2983
&.error { background-color: $error_bg_color; }
2985
&.info,
2987
&.question,
2988
&.warning,
2989
&.error {
2990
> label, & { color: $inverse_fg_color; }
2991
button { @extend %button_selected; }
2993
selection {}
2995
*:link { @extend %link_selected; }
2997
}
2998
}
2999
/************
3002
* Tooltips *
3003
************/
3004
tooltip {
3005
&.background {
3006
// background-color needs to be set this way otherwise it gets drawn twice
3007
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3008
box-shadow: inset 0 1px $highlight_color;
3009
background-color: scale-alpha($base_color, $higher_opacity);
3010
}
3011
// @extend %osd;
3013
// padding: 4px; /* not working */
3015
border-radius: 2px;
3016
box-shadow: none; // otherwise it gets inherited by windowframe.csd
3017
&:not(.csd):not(.unity-csd) {
3019
border: 1px solid $border_color;
3020
border-radius: 2px + 1px;
3021
background-clip: $extra_background_clip;
3022
}
3023
// FIXME: we need a border or tooltips vanish on black background.
3025
decoration { background-color: transparent; }
3026
label {
3028
// tooltip label already seems to have 6px margins
3029
min-height: 32px - 6px * 2;
3030
padding: 0 8px - 6px;
3031
}
3032
* {
3034
// workaround for Eclipse.
3035
// do not include any declaration here.
3036
// padding: 0;
3037
// background-color: transparent;
3038
// color: inherit;
3039
}
3040
}
3041
/*****************
3044
* Color Chooser *
3045
*****************/
3046
colorswatch {
3047
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3048
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3049
// applied to the overlay box.
3050
// base color corners rounding
3052
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3053
// sports a bigger radius.
3054
// nth-child is needed by the custom color strip.
3055
&.top {
3057
border-top-left-radius: $material_radius + 0.5px;
3058
border-top-right-radius: $material_radius + 0.5px;
3059
overlay {
3061
border-top-left-radius: $material_radius;
3062
border-top-right-radius: $material_radius;
3063
}
3064
}
3065
&.bottom {
3067
border-bottom-left-radius: $material_radius + 0.5px;
3068
border-bottom-right-radius: $material_radius + 0.5px;
3069
overlay {
3071
border-bottom-left-radius: $material_radius;
3072
border-bottom-right-radius: $material_radius;
3073
}
3074
}
3075
&.left,
3077
&:first-child:not(.top) {
3078
border-top-left-radius: $material_radius + 0.5px;
3079
border-bottom-left-radius: $material_radius + 0.5px;
3080
overlay {
3082
border-top-left-radius: $material_radius;
3083
border-bottom-left-radius: $material_radius;
3084
}
3085
}
3086
&.right,
3088
&:last-child:not(.bottom) {
3089
border-top-right-radius: $material_radius + 0.5px;
3090
border-bottom-right-radius: $material_radius + 0.5px;
3091
overlay {
3093
border-top-right-radius: $material_radius;
3094
border-bottom-right-radius: $material_radius;
3095
}
3096
}
3097
&.dark overlay { color: $light_fg_color; }
3099
&.light overlay { color: $dark_fg_color; }
3101
&.dark { color: $light_fg_color; } // for focus ring
3103
&.light { color: $dark_fg_color; } // for focus ring
3105
&:drop(active) {
3107
box-shadow: none;
3108
&.light overlay {
3110
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3111
}
3112
&.dark overlay {
3114
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3115
}
3116
}
3117
overlay {
3119
transition: $shadow_transition;
3120
box-shadow: $shadow_1;
3121
&:hover { box-shadow: $shadow_2; }
3123
}
3124
&#add-color-button {
3126
border-radius: $material_radius $material_radius 0 0;
3127
color: $light_fg_color; // for focus ring
3128
&:only-child { border-radius: $material_radius; }
3130
overlay {
3132
background-image: linear-gradient(to right,
3133
$error_bg_color 25%,
3134
$warning_bg_color 25%, $warning_bg_color 50%,
3135
$info_bg_color 50%, $info_bg_color 75%,
3136
$question_bg_color 75%);
3137
color: $light_fg_color;
3138
}
3139
}
3140
&:disabled {
3142
opacity: $disabled_opacity;
3143
overlay { box-shadow: none; }
3145
}
3146
row:selected & {
3148
}
3149
&#editor-color-sample {
3151
border-radius: $material_radius + 0.5px;
3152
overlay { border-radius: $material_radius; }
3154
// overlay:hover { box-shadow: $shadow_1; }
3156
}
3157
}
3158
// colorscale popup
3160
colorchooser .popover.osd {
3161
transition: $shadow_transition;
3162
border-radius: 2px;
3163
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3164
background-color: $base_color;
3165
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3167
spinbutton:not(.vertical) { @extend %entry.flat; }
3169
}
3170
/********
3173
* Misc *
3174
********/
3175
// content view (grid/list)
3176
.content-view {
3177
background-color: $bg_color;
3178
// &:hover { -gtk-icon-effect: highlight; }
3180
rubberband, .rubberband { @extend rubberband; }
3182
}
3183
.scale-popup {
3185
.osd & { @extend %osd; }
3186
.osd & button.flat { // FIXME: quick hack, redo properly
3188
}
3189
button { // +/- buttons on GtkVolumeButton popup
3191
}
3192
}
3193
/**********************
3196
* Window Decorations *
3197
**********************/
3198
decoration {
3199
transition: $shadow_transition;
3200
border-radius: 2px 2px 0 0;
3201
box-shadow: $shadow_4, 0 16px 16px transparent;
3202
// FIXME rationalize shadows
3204
// this is used for the resize cursor area
3206
margin: 8px;
3207
&:backdrop {
3209
// the transparent shadow here is to enforce that the shadow extents don't
3210
// change when we go to backdrop, to prevent jumping windows.
3211
// The biggest shadow should be in the same order then in the active state
3212
// or the jumping will happen during the transition.
3213
box-shadow: $shadow_2, 0 16px 16px transparent;
3214
}
3215
.maximized &,
3217
.fullscreen &,
3218
.tiled & { border-radius: 0; }
3219
.popup & { box-shadow: none; }
3221
// server-side decorations as used by mutter
3223
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3224
.csd.popup & {
3226
border-radius: 2px;
3227
box-shadow: $shadow_2;
3228
}
3229
tooltip.csd & {
3231
border-radius: 2px;
3232
box-shadow: $shadow_2;
3233
}
3234
messagedialog.csd & {
3236
border-radius: 2px;
3237
// box-shadow: $shadow_4, 0 16px 16px transparent;
3238
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3240
}
3241
.solid-csd & {
3243
margin: 0;
3244
// padding: 4px;
3245
border-radius: 0;
3246
box-shadow: none;
3247
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3248
background-color: $titlebar_bg_color;
3249
}
3250
}
3251
// Window Close button
3253
button.titlebutton {
3254
// @extend %simple_flat_button;
3255
@extend %circular_button;
3257
.selection-mode & {
3259
}
3260
}
3261
// catch all extend :)
3264
%selected_items {
3266
background-color: $primary_color;
3267
@at-root %nobg_selected_items, & {
3269
color: $inverse_fg_color;
3270
&:disabled { color: $disabled_inverse_fg_color; }
3272
}
3273
}
3274
.monospace { font-family: monospace; }
3276
/**********************
3279
* Touch Copy & Paste *
3280
**********************/
3281
// touch selection handlebars for the Popover.osd above
3282
cursor-handle {
3283
border-radius: $circular_radius;
3284
background-color: $accent_color;
3285
background-image: none;
3286
&.top:dir(ltr), &.bottom:dir(rtl) {
3288
padding-left: 6px;
3289
border-top-right-radius: 0;
3290
}
3291
&.bottom:dir(ltr), &.top:dir(rtl) {
3293
padding-right: 6px;
3294
border-top-left-radius: 0;
3295
}
3296
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3298
-GtkWidget-text-handle-width: 24;
3299
-GtkWidget-text-handle-height: 30;
3300
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3302
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3303
url('#{$_url}@2.png'));
3304
}
3305
}
3306
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3308
// shortcut window keys
3310
.keycap {
3311
min-width: 28px - 8px * 2;
3312
min-height: 28px - 2px;
3313
margin-top: 2px;
3314
padding-bottom: 2px;
3315
padding-left: 8px;
3316
padding-right: 8px;
3317
border: solid 1px $border_color;
3319
border-radius: 2px + 1px;
3320
box-shadow: inset 0 -2px $border_color;
3321
background-color: $base_color;
3322
color: $fg_color;
3323
font-size: smaller;
3324
}
3325
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3327
transition: $longer_transition;
3328
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3329
caret-color: $accent_color;
3330
}
3331
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3333
stackswitcher button.circular,
3335
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3336
min-width: $medium_size;
3337
min-height: $medium_size;
3338
padding: 0;
3339
}
3340