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
separator { @extend %hide_separators; }
512
// &.font,
514
// &.file { separator { @extend %hide_separators; }}
515
// &.font { > box > box > label { font-weight: bold; }}
517
// inline-toolbar buttons
519
.inline-toolbar & {
520
// @extend %button_basic.flat;
521
&:not(.text-button) { @extend %circular_button; }
523
}
524
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
526
@at-root %circular_button,
528
&.close,
529
&.circular { // The Bloody Circul Button
530
border-radius: $circular_radius;
531
-gtk-outline-radius: $circular_radius;
532
// label { padding: 0; }
534
}
535
@at-root %small_button {
537
min-height: $small_size;
538
min-width: $small_size;
539
padding: 0;
540
border-radius: $circular_radius;
541
-gtk-outline-radius: $circular_radius;
542
}
543
}
544
%needs_attention {
546
animation: needs_attention $longer_duration $deceleration_curve forwards;
547
background-repeat: no-repeat;
548
background-position: right 3px;
549
background-size: 6px 6px;
550
&:dir(rtl) { background-position: left 3px; }
552
}
553
// all the following is for the +|- buttons on inline toolbars, that way
555
// should really be deprecated...
556
.inline-toolbar toolbutton > button { // redefining the button look is
557
// needed since those are flat...
558
}
559
// More inline toolbar buttons
561
toolbar.inline-toolbar toolbutton:not(:only-child) {
562
// > button.flat { @extend %linked_middle; }
563
// &:first-child > button.flat { @extend %linked_first; }
565
// &:last-child > button.flat { @extend %linked_last; }
567
}
568
%linked:not(:only-child) {
570
@at-root %linked_middle,
571
& {
572
border-radius: 0;
573
-gtk-outline-radius: 2px;
574
}
575
@at-root %linked_first,
577
&:first-child { border-radius: 2px 0 0 2px; }
578
@at-root %linked_last,
580
&:last-child { border-radius: 0 2px 2px 0; }
581
}
582
%linked_vertical:not(:only-child) {
584
@at-root %linked_vertical_middle,
585
& {
586
border-radius: 0;
587
-gtk-outline-radius: 2px;
588
}
589
@at-root %linked_vertical_first,
591
&:first-child { border-radius: 2px 2px 0 0; }
592
@at-root %linked_vertical_last,
594
&:last-child { border-radius: 0 0 2px 2px; }
595
}
596
/* menu buttons */
598
modelbutton.flat,
599
.menuitem.button.flat {
600
min-height: $menuitem_size;
601
padding: 0 8px;
602
border-radius: 2px;
603
color: inherit;
604
@extend %simple_flat_button;
606
&:selected { @extend %selected_items; }
608
check,
610
radio {
611
box-shadow: none;
612
background-image: none;
613
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
615
&:last-child { margin-left: -8px; margin-right: -16px; }
617
&:first-child { margin-left: -16px; margin-right: -8px; }
619
}
620
}
621
modelbutton.flat arrow {
623
background: none;
624
&:hover { background: none; }
626
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
628
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
630
}
631
button.color {
633
min-height: $small_size;
634
min-width: $small_size;
635
padding: $container_padding;
636
colorswatch:only-child {
638
// &, overlay { border-radius: 0; }
639
}
640
}
641
/*********
644
* Links *
645
*********/
646
*:link {
647
&, &:hover, &:active { color: $link_color; }
648
&:visited {
650
&, &:hover, &:active { color: $visited_link_color; }
651
}
652
@at-root %link_selected,
654
&:selected,
655
*:selected & { color: $inverse_fg_color; }
656
}
657
button:link,
659
button:visited {
660
@extend *:link;
661
> label { text-decoration-line: underline; }
663
}
664
/*****************
666
* GtkSpinButton *
667
*****************/
668
spinbutton {
669
&:not(.vertical) {
670
// in this horizontal configuration, the whole spinbutton
671
// behaves as the entry, so we extend the entry styling
672
// and nuke the style on the internal entry
673
@extend %entry;
674
padding: 0;
676
%spinbutton_entry,
678
entry {
679
min-width: $large_size - 8px * 2;
680
// reset all the other props since the spinbutton node is styled here
681
margin: 0;
682
border-image: none;
683
border-radius: 0;
684
box-shadow: none;
685
background-color: transparent;
686
//
687
// This will help to simplify spinbutton's code, but unfortunatelly
688
// doesn't work properly in :dir(rtl). It needs z-index property.
689
//
690
// min-width: $large_size - 8px;
691
//
692
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
693
//
694
// &:dir(ltr) {
695
// margin-right: -$spinbuttons_width;
696
// padding-right: $spinbuttons_width;
697
// }
698
//
699
// &:dir(rtl) {
700
// margin-left: -$spinbuttons_width;
701
// padding-left: $spinbuttons_width;
702
// }
703
}
704
button {
706
// margin: $container_padding;
707
border: solid $container_padding transparent;
708
@extend %simple_flat_button;
710
@extend %small_button;
712
&.up:dir(ltr),
714
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
715
&.up:dir(rtl),
717
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
718
}
719
}
720
// OSD horizontal
722
.osd &:not(.vertical) {
723
button {
724
}
725
}
726
// Vertical
728
&.vertical {
729
// in the vertical configuration, we treat the spinbutton
730
// as a box, and tweak the style of the entry in the middle
731
// so that it's linked
732
// FIXME: this should not be set at all, but otherwise it gets the wrong
734
// color
735
&:disabled { color: $disabled_fg_color; }
736
&:drop(active) {
738
box-shadow: none;
739
}
740
entry {
742
min-height: $medium_size;
743
min-width: $large_size;
744
padding: 0;
745
}
746
button {
748
min-height: $medium_size;
749
min-width: $large_size;
750
padding: 0;
751
@extend %simple_flat_button;
753
&.up { border-radius: 2px 2px 0 0; }
755
&.down { border-radius: 0 0 2px 2px; }
757
}
758
}
759
// OSD vertical
761
.osd &.vertical button:first-child {
762
}
763
// Misc
765
treeview &:not(.vertical) {
766
min-height: 0;
767
border-style: none;
768
border-radius: 0;
769
entry {
771
min-height: 0;
772
padding: 1px 2px;
773
}
774
}
775
}
776
/**************
779
* ComboBoxes *
780
**************/
781
combobox {
782
arrow {
783
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
784
min-height: 16px;
785
min-width: 16px;
786
}
787
decoration,
789
button.combo:checked { transition: none; } // workaround for menuitem selection
790
button.combo cellview {
792
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
793
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
794
}
795
#gtk-combobox-popup-menu {
797
padding: 2px 0;
798
menuitem {
800
min-height: $medium_size - 2px * 2;
801
padding: 0 8px;
802
}
803
// overflow arrows
805
> arrow {
806
&.top { margin-top: -2px; }
807
&.bottom { margin-bottom: -2px * 3; }
809
}
810
}
811
&.linked {
813
button:nth-child(2) {
814
&:dir(ltr) { @extend %linked:last-child; }
815
&:dir(rtl) { @extend %linked:first-child; }
816
}
817
}
818
&:drop(active) { // FIXME: untested
820
box-shadow: none;
821
// button.combo { @extend %button_basic:drop(active); }
823
}
824
}
825
// the combo is a composite widget so the way we do button linking doesn't
827
// work, special case needed. See
828
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
829
.linked:not(.vertical) > combobox:not(:only-child) {
831
> box > button.combo { @extend %linked_middle; }
832
&:first-child > box > button.combo { @extend %linked_first; }
834
&:last-child > box > button.combo { @extend %linked_last; }
836
}
837
.linked.vertical > combobox:not(:only-child) {
839
> box > button.combo { @extend %linked_vertical_middle; }
840
&:first-child > box > button.combo { @extend %linked_vertical_first; }
842
&:last-child > box > button.combo { @extend %linked_vertical_last; }
844
}
845
%combo_flat {
847
border-radius: 0;
848
background-image: none;
849
font-weight: inherit;
850
@include entry(flat-normal);
852
&:hover { box-shadow: inset 0 -2px $fill_color; }
854
&:checked {
856
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
857
$primary_color 100%,
858
transparent 0%)
859
0 0 2 / 0 0 2px;
860
}
861
&:disabled { color: $disabled_fg_color; }
863
}
864
/************
867
* Toolbars *
868
************/
869
toolbar {
870
-GtkWidget-window-dragging: true;
871
padding: $container_padding / 2;
872
background-color: $bg_color;
873
button { @extend %button_basic.flat; }
875
// on OSD
877
.osd & { background-color: transparent; }
878
// stand-alone OSD toolbars
880
&.osd {
881
transition: $shadow_transition;
882
padding: $container_padding;
883
border-radius: 2px;
884
box-shadow: $shadow_2, inset 0 1px $highlight_color;
885
background-color: $base_color;
886
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
888
&.left,
890
&.right,
891
&.top,
892
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
893
}
894
// toolbar separators
896
&.horizontal separator { margin: $container_padding / 2; }
897
&.vertical separator { margin: $container_padding / 2; }
898
&:not(.inline-toolbar):not(.osd) {
900
scale,
901
entry,
902
spinbutton,
903
button { margin: $container_padding / 2; }
904
.linked entry,
906
.linked spinbutton,
907
.linked button {
908
&:not(:first-child) { margin-left: 0; }
909
&:not(:last-child) { margin-right: 0; }
910
}
911
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
913
}
914
}
915
// searchbar, location-bar & inline-toolbar
917
.inline-toolbar {
918
padding: $container_padding;
919
border-style: solid;
920
border-width: 0 1px 1px;
921
border-color: $border_color;
922
background-color: $alt_base_color;
923
}
924
searchbar,
926
.location-bar {
927
padding: $container_padding;
928
border-style: solid;
929
border-width: 0 0 1px;
930
border-color: $border_color;
931
background-color: $bg_color;
932
background-clip: border-box;
933
}
934
/***************
937
* Header bars *
938
***************/
939
%titlebar,
940
headerbar {
941
transition: background-color $shorter_duration $deceleration_curve;
942
min-height: $large_size;
943
padding: 0 $container_padding;
944
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
945
background-color: $titlebar_bg_color;
946
color: $titlebar_fg_color;
947
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
949
&:backdrop {
951
color: $secondary_titlebar_fg_color;
952
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
954
}
955
.title {
957
transition: $longer_transition;
958
padding: 0 12px;
959
font-weight: bold;
960
}
961
.subtitle {
963
transition: $longer_transition;
964
padding: 0 12px;
965
font-size: smaller;
966
@extend .dim-label;
968
}
969
button:not(.suggested-action):not(.destructive-action) {
971
@extend %button_basic.flat;
972
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
974
$titlebar_indicator_color 0%,
975
transparent 0%)
976
0 0 0 / 0 0 0px;
977
&:checked {
979
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
980
$titlebar_indicator_color 100%,
981
transparent 0%)
982
0 0 2 / 0 0 2px;
983
&, &:disabled { background-color: transparent; }
985
}
986
}
987
button.suggested-action, button.destructive-action {
989
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
990
}
991
&.selection-mode {
993
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
994
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
995
transition: background-color 0.00001s $longer_duration;
996
animation: header_ripple_effect $longer_duration $deceleration_curve;
997
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
998
background-color: $primary_color;
999
color: $inverse_fg_color;
1000
&:backdrop {
1002
color: $secondary_inverse_fg_color;
1003
}
1004
.subtitle:link { @extend *:link:selected; }
1006
button:not(.suggested-action):not(.destructive-action) {
1008
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1009
currentColor 0%,
1010
transparent 0%)
1011
0 0 0 / 0 0 0px;
1012
color: currentColor;
1013
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1015
&:checked {
1017
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1018
currentColor 100%,
1019
transparent 0%)
1020
0 0 2 / 0 0 2px;
1021
color: currentColor;
1022
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1024
}
1025
}
1026
.selection-menu {
1028
padding-left: 16px;
1029
padding-right: 16px;
1030
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1032
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1034
}
1035
}
1036
.fullscreen &,
1038
.tiled &,
1039
.maximized & {
1040
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1041
box-shadow: $shadow_1;
1042
}
1043
&.default-decoration {
1045
min-height: $small_size;
1046
padding: $container_padding;
1047
box-shadow: inset 0 1px $titlebar_highlight_color;
1048
.fullscreen &,
1050
.tiled &,
1051
.maximized & { box-shadow: none; }
1052
button.titlebutton {
1054
min-height: $small_size;
1055
min-width: $small_size;
1056
margin: 0;
1057
padding: 0;
1058
}
1059
// workaround for non-animatable buttons
1061
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1062
}
1063
.solid-csd & {
1065
&:dir(rtl), &:dir(ltr) { // specificity bump
1066
// margin-left: -2px;
1067
// margin-right: -2px;
1068
// margin-top: -2px;
1069
// border-radius: 0;
1070
// box-shadow: inset 0 1px $titlebar_highlight_color;
1071
}
1072
}
1073
}
1074
headerbar {
1076
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1077
entry,
1078
spinbutton,
1079
// separator,
1080
button {
1081
margin-top: $container_padding;
1082
margin-bottom: $container_padding;
1083
}
1084
switch {
1086
margin-top: $container_padding * 2;
1087
margin-bottom: $container_padding * 2;
1088
}
1089
// reset button margins of the spinbutton
1091
spinbutton button {
1092
margin-top: 0;
1093
margin-bottom: 0;
1094
}
1095
}
1096
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1098
border-top-left-radius: 2px;
1099
border-top-right-radius: 2px;
1100
}
1101
headerbar { // headerbar border rounding
1103
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1104
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1105
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1107
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1109
&:first-child, &:last-child {
1110
border-top-left-radius: 2px;
1111
border-top-right-radius: 2px;
1112
}
1113
}
1114
}
1115
.titlebar:not(headerbar) {
1117
window.csd > & {
1118
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1119
padding: 0;
1120
background-color: transparent;
1121
background-image: none;
1122
border-style: none;
1123
box-shadow: none;
1124
}
1125
> separator {
1127
background-color: $titlebar_bg_color;
1128
background-image: image($border_color);
1129
}
1130
@extend %titlebar;
1132
}
1133
/************
1136
* Pathbars *
1137
************/
1138
%pathbar_button,
1139
.path-bar button {
1140
padding-left: ($medium_size - 24px) / 2;
1141
padding-right: ($medium_size - 24px) / 2;
1142
label:not(:only-child) {
1144
&:first-child { margin-left: 4px; }
1145
&:last-child { margin-right: 4px; }
1147
}
1148
&.slider-button {
1150
padding-left: (24px - 16px) / 2;
1151
padding-right: (24px - 16px) / 2;
1152
}
1153
:not(headerbar) & {
1155
@extend %flat_button;
1156
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1158
$primary_color 0%,
1159
transparent 0%)
1160
0 0 0 / 0 0 0px;
1161
border-radius: 2px;
1162
&:checked {
1164
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1165
$primary_color 100%,
1166
transparent 0%)
1167
0 0 2 / 0 0 2px;
1168
&, &:disabled { background-color: transparent; }
1170
}
1171
}
1172
}
1173
/**************
1176
* Tree Views *
1177
**************/
1178
treeview.view {
1179
@at-root * {
1180
-GtkTreeView-horizontal-separator: 4;
1181
-GtkTreeView-grid-line-width: 1;
1182
-GtkTreeView-grid-line-pattern: '';
1183
-GtkTreeView-tree-line-width: 1;
1184
-GtkTreeView-tree-line-pattern: '';
1185
-GtkTreeView-expander-size: 16;
1186
}
1187
border-left-color: $fill_color; // this is actually the tree lines color,
1189
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1190
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1192
&.separator {
1194
min-height: 1px + 2px * 2;
1195
color: $border_color;
1196
}
1197
&:drop(active) {
1199
border-style: solid none;
1200
border-width: 1px;
1201
border-color: $accent_color;
1202
&.after { border-top-style: none; }
1204
&.before { border-bottom-style: none; }
1206
}
1207
&.expander {
1209
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1210
-gtk-icon-transform: rotate(-90deg);
1211
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1213
&:checked { -gtk-icon-transform: unset; }
1215
color: $secondary_fg_color;
1217
&:hover, &:active { color: $fg_color; }
1219
&:disabled { color: $disabled_secondary_fg_color; }
1221
&:selected {
1223
color: $secondary_inverse_fg_color;
1224
&:hover, &:active { color: $inverse_fg_color; }
1226
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1228
}
1229
}
1230
&.progressbar { // progress bar in treeviews
1232
border-bottom: $bar_size solid $primary_color;
1233
box-shadow: none;
1234
background-color: transparent;
1235
&:selected { border-bottom-color: currentColor; }
1237
}
1238
&.trough { // progress bar trough in treeviews
1240
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1241
box-shadow: none;
1242
background-color: transparent;
1243
&:selected { border-bottom-color: $fill_color; }
1245
}
1246
header {
1248
button {
1249
@extend row.activatable;
1250
padding: 2px 6px;
1252
border-style: none solid solid none;
1253
border-width: 1px;
1254
border-color: $border_color;
1255
border-radius: 0;
1256
background-clip: border-box;
1257
&, &:hover, &:active { box-shadow: none; }
1259
&, &:disabled { background-color: $base_color; }
1261
&:last-child { border-right-style: none; }
1263
}
1264
}
1265
button.dnd,
1267
header.button.dnd { // for treeview-like derive widgets
1268
padding: 2px 6px;
1269
border-style: none solid solid;
1270
border-width: 1px;
1271
border-color: $border_color;
1272
border-radius: 0;
1273
box-shadow: none;
1274
background-color: $base_color;
1275
background-clip: border-box;
1276
color: $primary_color;
1277
}
1278
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1280
}
1281
/*********
1284
* Menus *
1285
*********/
1286
menubar,
1287
.menubar {
1288
-GtkWidget-window-dragging: true;
1289
padding: 0;
1290
// box-shadow: inset 0 -1px $border_color;
1291
background-color: $titlebar_bg_color;
1292
> menuitem {
1294
transition: $shorter_transition;
1295
min-height: 20px;
1296
padding: 4px 8px;
1297
color: $secondary_titlebar_fg_color;
1298
&:hover { // Seems like it :hover even with keyboard focus
1300
transition: none;
1301
background-color: $semi_fill_color;
1302
color: $titlebar_fg_color;
1303
}
1304
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1306
}
1307
}
1308
.csd.popup { border-radius: 2px; }
1310
menu,
1312
.menu,
1313
.context-menu {
1314
margin: 4px 0;
1315
padding: 4px 0;
1316
box-shadow: inset 0 1px $highlight_color;
1317
background-color: $base_color;
1318
border: 1px solid $border_color; // adds borders in a non composited env
1319
.csd & {
1321
border: none; // axes borders in a composited env
1322
border-radius: 2px;
1323
}
1324
menuitem {
1326
transition: $shorter_transition;
1327
min-height: 20px;
1328
min-width: 40px;
1329
padding: 4px 8px;
1330
font: initial;
1331
text-shadow: none;
1332
&:hover {
1334
transition: none;
1335
background-color: $semi_fill_color;
1336
}
1337
&:disabled { color: $disabled_fg_color; }
1339
// submenu indicators
1341
arrow {
1342
min-height: 16px;
1343
min-width: 16px;
1344
&:dir(ltr) {
1346
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1347
margin-left: 8px;
1348
}
1349
&:dir(rtl) {
1351
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1352
margin-right: 8px;
1353
}
1354
}
1355
// avoids labels color being overridden, see
1357
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1358
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1359
}
1360
// overflow arrows
1362
> arrow {
1363
min-height: 16px;
1364
min-width: 16px;
1365
padding: 4px;
1366
background-color: $base_color;
1367
color: $secondary_fg_color;
1368
&.top {
1370
margin-top: -4px;
1371
border-bottom: 1px solid $border_color;
1372
border-radius: 2px 2px 0 0;
1373
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1374
}
1375
&.bottom {
1377
margin-bottom: -4px * 3;
1378
border-top: 1px solid $border_color;
1379
border-radius: 0 0 2px 2px;
1380
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1381
}
1382
&:hover {
1384
background-image: image($semi_fill_color);
1385
color: $fg_color;
1386
}
1387
&:disabled {
1389
border-color: transparent;
1390
background-color: transparent;
1391
color: transparent;
1392
// color: $disabled_secondary_fg_color;
1393
}
1394
}
1395
separator { margin: 4px 0; }
1397
}
1398
menuitem {
1400
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1401
}
1402
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1404
// Electron/Atom render all translucent colors in opaque colors.
1405
// It's a very critical issue for this theme and should be fixed by upstream...
1406
.popup:not(.csd) menu {
1407
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1408
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1409
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1410
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1411
menuitem {
1413
color: $opaque_fg_color;
1414
&:hover { background-color: $opaque_semi_fill_color; }
1416
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1418
}
1419
// TODO: not working this, where/how i can set the accelerators?
1421
accelerator { color: $opaque_tertiary_fg_color; }
1422
}
1423
/************
1426
* Popovers *
1427
************/
1428
popover.background {
1429
transition: $shadow_transition;
1430
padding: 2px;
1431
box-shadow: $shadow_2; // TODO: this should really have a highlight
1432
background-color: $lighter_bg_color;
1433
&:backdrop { box-shadow: $shadow_1; }
1435
&, .csd & {
1437
border-style: solid;
1438
border-width: 1px;
1439
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1440
border-radius: 2px + 1px;
1441
}
1442
> stack { margin: -4px; } // remove extra padding from menu style popovers
1444
> toolbar { margin: -2px; }
1446
> list,
1448
> .view,
1449
> toolbar {
1450
border-style: none;
1451
box-shadow: none;
1452
background-color: transparent;
1453
}
1454
&.touch-selection,
1456
&.magnifier,
1457
&.osd { @extend %osd; }
1458
// entry { @extend %entry.flat; }
1460
// button.combo { @extend %combo_flat; }
1462
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1464
&.menu button,
1466
button.model {
1467
@extend %simple_flat_button;
1468
min-height: 32px;
1470
padding: 0 8px;
1471
border-radius: 2px;
1472
&:checked { @extend %selected_items; }
1474
}
1475
separator { margin: 4px 0; }
1477
list separator { margin: 0; }
1479
}
1480
/*************
1482
* Notebooks *
1483
*************/
1484
notebook {
1485
> header {
1486
border-width: 1px;
1487
border-color: $border_color;
1488
background-color: $bg_color;
1489
background-clip: border-box;
1490
&.top {
1492
border-bottom-style: solid;
1493
> tabs {
1494
margin-bottom: -1px;
1495
> tab {
1496
&:hover { box-shadow: inset 0 -2px $fill_color; }
1498
&:checked { box-shadow: inset 0 -2px $primary_color; }
1500
}
1501
}
1502
}
1503
&.bottom {
1505
border-top-style: solid;
1506
> tabs {
1507
margin-top: -1px;
1508
> tab {
1509
&:hover { box-shadow: inset 0 2px $fill_color; }
1511
&:checked { box-shadow: inset 0 2px $primary_color; }
1513
}
1514
}
1515
}
1516
&.left {
1518
border-right-style: solid;
1519
> tabs {
1520
margin-right: -1px;
1521
> tab {
1522
&:hover { box-shadow: inset -2px 0 $fill_color; }
1524
&:checked { box-shadow: inset -2px 0 $primary_color; }
1526
}
1527
}
1528
}
1529
&.right {
1531
border-left-style: solid;
1532
> tabs {
1533
margin-left: -1px;
1534
> tab {
1535
&:hover { box-shadow: inset 2px 0 $fill_color; }
1537
&:checked { box-shadow: inset 2px 0 $primary_color; }
1539
}
1540
}
1541
}
1542
&.top > tabs > arrow {
1544
@extend %notebook_vert_arrows;
1545
border-top-style: none;
1547
}
1548
&.bottom > tabs > arrow {
1550
@extend %notebook_vert_arrows;
1551
border-bottom-style: none;
1553
}
1554
@at-root %notebook_vert_arrows {
1556
padding-left: 4px;
1557
padding-right: 4px;
1558
&.down {
1560
margin-left: -8px;
1561
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1562
}
1563
&.up {
1565
margin-right: -8px;
1566
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1567
}
1568
}
1569
&.left > tabs > arrow {
1571
@extend %notebook_horz_arrows;
1572
border-left-style: none;
1574
}
1575
&.right > tabs > arrow {
1577
@extend %notebook_horz_arrows;
1578
border-right-style: none;
1580
}
1581
@at-root %notebook_horz_arrows {
1583
padding-top: 4px;
1584
padding-bottom: 4px;
1585
&.down {
1587
margin-top: -8px;
1588
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1589
}
1590
&.up {
1592
margin-bottom: -8px;
1593
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1594
}
1595
}
1596
> tabs > arrow {
1598
@extend %simple_flat_button;
1599
min-height: 16px;
1601
min-width: 16px;
1602
border-radius: 0;
1603
}
1604
tab {
1606
transition: $longer_transition,
1607
background-size 0,
1608
background-image 0;
1609
min-height: $small_size;
1610
min-width: $small_size;
1611
padding: $container_padding 12px;
1612
outline-offset: -6px;
1614
border-width: 1px; // for reorderable tabs
1616
border-color: transparent; //
1617
background-image: radial-gradient(circle farthest-corner at center,
1619
$primary_color 10%,
1620
transparent 0%);
1621
background-repeat: no-repeat;
1622
background-position: center;
1623
background-size: 0% 0%;
1624
color: $secondary_fg_color;
1626
font-weight: 500;
1627
&:hover {
1629
color: $fg_color;
1630
&.reorderable-page {
1632
border-color: $border_color;
1633
background-color: $alt_base_color;
1634
}
1635
}
1636
&:disabled { color: $disabled_secondary_fg_color; }
1638
&:checked {
1640
transition: $longer_transition,
1641
background-size $longer_duration $deceleration_curve,
1642
background-image $longer_duration + $ripple_duration $deceleration_curve;
1643
background-image: radial-gradient(circle farthest-corner at center,
1644
transparent 10%,
1645
transparent 0%);
1646
background-size: 1000% 1000%;
1647
color: $fg_color;
1648
&:disabled { color: $disabled_fg_color; }
1650
&.reorderable-page {
1652
border-color: $border_color;
1653
background-color: $base_color;
1654
}
1655
}
1656
// colors the button like the label, overridden otherwise
1658
button.flat {
1659
@extend %small_button;
1660
&:last-child {
1662
margin-left: $container_padding;
1663
margin-right: $container_padding - 12px;
1664
}
1665
&:first-child {
1667
margin-left: $container_padding - 12px;
1668
margin-right: $container_padding;
1669
}
1670
}
1671
}
1672
&.top,
1674
&.bottom {
1675
tabs {
1676
padding-left: 8px;
1677
padding-right: 8px;
1678
&:not(:only-child) {
1680
&:first-child { margin-left: 0; }
1681
&:last-child { margin-right: 0; }
1682
}
1683
tab {
1685
&.reorderable-page {
1686
margin: 0 -1px;
1687
border-style: none solid;
1688
}
1689
}
1690
}
1691
}
1692
&.left,
1694
&.right {
1695
tabs {
1696
padding-top: 8px;
1697
padding-bottom: 8px;
1698
&:not(:only-child) {
1700
&:first-child { margin-top: 0; }
1701
&:last-child { margin-bottom: 0; }
1702
}
1703
tab {
1705
&.reorderable-page {
1706
margin: -1px 0;
1707
border-style: solid none;
1708
}
1709
}
1710
}
1711
}
1712
}
1713
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1715
background-color: $base_color;
1716
entry:not(.search),
1718
spinbutton:not(.vertical) { @extend %entry.flat; }
1719
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1721
button.combo { @extend %combo_flat; }
1723
}
1724
}
1725
/**************
1728
* Scrollbars *
1729
**************/
1730
scrollbar {
1731
$_slider_min_length: 24px;
1732
// disable steppers
1734
@at-root * {
1735
-GtkScrollbar-has-backward-stepper: false;
1736
-GtkScrollbar-has-forward-stepper: false;
1737
}
1738
transition: $longer_transition;
1740
background-color: $base_color;
1741
background-clip: $extra_background_clip;
1742
// scrollbar border
1744
&.top { border-bottom: 1px solid $border_color; }
1745
&.bottom { border-top: 1px solid $border_color; }
1746
&.left { border-right: 1px solid $border_color; }
1747
&.right { border-left: 1px solid $border_color; }
1748
// slider
1750
slider {
1751
transition: $shorter_transition, margin 0, border-width 0;
1752
min-width: 8px;
1753
min-height: 8px;
1754
border: 4px solid transparent;
1755
border-radius: $circular_radius;
1756
background-clip: padding-box;
1757
background-color: $tertiary_fg_color;
1758
&:hover { background-color: $secondary_fg_color; }
1760
&:active { background-color: $fg_color; }
1762
&:disabled { background-color: $disabled_tertiary_fg_color; }
1764
}
1765
&.fine-tune {
1767
slider {
1768
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1769
min-width: 4px;
1770
min-height: 4px;
1771
}
1772
&.horizontal slider { margin: 2px 0; }
1774
&.vertical slider { margin: 0 2px; }
1776
}
1777
&.overlay-indicator {
1779
&:not(.dragging):not(.hovering) {
1780
border-color: transparent;
1781
background-color: transparent;
1782
slider {
1784
min-width: 4px;
1785
min-height: 4px;
1786
margin: 4px - 1px;
1787
border: 1px solid scale-alpha($base_color, $lower_opacity);
1788
}
1789
button {
1791
min-width: 4px;
1792
min-height: 4px;
1793
margin: 4px - 1px;
1794
border: 1px solid scale-alpha($base_color, $lower_opacity);
1795
border-radius: $circular_radius;
1796
background-color: $tertiary_fg_color;
1797
background-clip: padding-box;
1798
-gtk-icon-source: none;
1799
&:disabled { background-color: $disabled_tertiary_fg_color; }
1801
}
1802
&.horizontal {
1804
slider { min-width: $_slider_min_length; }
1805
button { min-width: 8px; }
1807
}
1808
&.vertical {
1810
slider { min-height: $_slider_min_length; }
1811
button { min-height: 8px; }
1813
}
1814
}
1815
&.dragging,
1817
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1818
}
1819
&.horizontal slider { min-width: $_slider_min_length; }
1821
&.vertical slider { min-height: $_slider_min_length; }
1823
// button styling
1825
button {
1826
@extend %simple_flat_button;
1827
min-width: 16px;
1829
min-height: 16px;
1830
padding: 0;
1831
border-radius: 0;
1832
}
1833
// button icons
1835
&.vertical {
1836
button {
1837
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1838
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1840
}
1841
}
1842
&.horizontal {
1844
button {
1845
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1846
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1848
}
1849
}
1850
}
1851
/**********
1854
* Switch *
1855
**********/
1856
switch {
1857
transition: $longer_transition;
1858
margin: $container_padding 0;
1859
border: 4px solid transparent;
1860
border-radius: $circular_radius;
1861
background-color: $fill_color;
1862
background-clip: padding-box;
1863
font-size: 0;
1864
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1866
&:checked {
1868
background-color: scale-alpha($accent_color, 0.5);
1869
&:disabled {
1871
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1872
color: $disabled_fg_color;
1873
}
1874
}
1875
slider {
1877
@include entry(normal);
1878
transition: $longer_transition, $shadow_transition, margin 0;
1880
min-width: $small_size;
1881
min-height: $small_size;
1882
margin: -4px 0 -4px -4px;
1883
border-radius: $circular_radius;
1884
-gtk-outline-radius: $circular_radius;
1885
}
1886
&:hover slider { @include entry(focus); }
1888
&:checked slider {
1890
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1891
animation: needs_attention $longer_duration $deceleration_curve;
1892
margin: -4px -4px -4px 0;
1893
background-color: $accent_color;
1894
color: $inverse_fg_color;
1895
}
1896
&:disabled slider { @include entry(disabled); }
1898
&:checked:disabled slider { animation: none; }
1900
row:selected & {
1902
}
1903
}
1904
/*************************
1907
* Check and Radio items *
1908
*************************/
1909
// draw regular check and radio items using our PNG assets
1910
// all assets are rendered from assets.svg. never add pngs directly
1911
// selection-mode
1913
.view.content-view.check:not(list),
1914
.content-view .tile check:not(list) {
1915
min-height: 40px;
1916
min-width: 40px;
1917
margin: 0;
1918
padding: 0;
1919
box-shadow: none;
1920
background-color: transparent;
1921
background-image: none;
1922
-gtk-icon-shadow: $shadow_1;
1923
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1925
@each $s, $as in ('', '-unchecked'),
1927
(':checked', '-checked') {
1928
&#{$s} {
1929
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1930
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1931
}
1932
}
1933
}
1934
checkbutton.text-button,
1936
radiobutton.text-button {
1937
// this is for a nice focus on check and radios text
1938
padding: 2px;
1939
outline-offset: 0;
1940
label:not(:only-child) { margin: 0 4px; }
1942
}
1943
check,
1945
radio {
1946
min-height: 24px;
1947
min-width: 24px;
1948
margin: -($large_size - 24px) / 2;
1949
padding: ($large_size - 24px) / 2;
1950
@extend %simple_flat_button;
1952
@extend %circular_button;
1954
&:checked, &:indeterminate {
1956
color: $accent_color;
1957
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1959
}
1960
// &:only-child { margin: -12px; }
1962
row &:not(:checked):not(:indeterminate) {
1964
color: gtkalpha(currentColor, $secondary_opacity);
1965
&:hover, &:active { color: currentColor; }
1967
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1969
}
1970
menu menuitem & {
1972
transition: none;
1973
min-height: 16px;
1974
min-width: 16px;
1975
margin: 0; // this is a workaround for a menu check/radio size allocation issue
1976
padding: 0;
1977
&:dir(ltr) { margin-right: 8px; }
1979
&:dir(rtl) { margin-left: 8px; }
1981
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1983
&, &:hover, &:disabled {
1985
box-shadow: none;
1986
// color: inherit;
1987
}
1988
}
1989
}
1990
%check,
1992
check {
1993
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
1994
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
1995
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
1997
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
1998
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2000
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2001
}
2002
%radio,
2004
radio {
2005
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2006
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2007
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2009
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2010
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2012
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2013
border-image-slice: $large_size / 2px;
2015
border-image-width: $large_size / 2;
2016
$radio_indicator: 10px / $large_size / 2;
2018
& {
2020
border-image-source: -gtk-gradient(radial,
2021
center center, 0,
2022
center center, 0.001,
2023
to($accent_color),
2024
to(transparent));
2025
}
2026
&:checked:not(:indeterminate) {
2028
border-image-source: -gtk-gradient(radial,
2029
center center, 0,
2030
center center, $radio_indicator,
2031
to($accent_color),
2032
to(transparent));
2033
}
2034
&:checked:not(:indeterminate):disabled {
2036
border-image-source: -gtk-gradient(radial,
2037
center center, 0,
2038
center center, $radio_indicator,
2039
to(scale-alpha($accent_color, $disabled_opacity)),
2040
to(transparent));
2041
}
2042
}
2043
%small_check,
2045
menu menuitem check {
2046
& {
2047
border-radius: 2px;
2048
-gtk-outline-radius: 2px;
2049
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2050
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2051
}
2052
&:checked {
2054
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2055
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2056
}
2057
&:indeterminate {
2059
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2060
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2061
}
2062
}
2063
%small_radio,
2065
menu menuitem radio {
2066
& {
2067
border-image: none;
2068
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2069
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2070
}
2071
&:checked {
2073
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2074
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2075
}
2076
&:indeterminate {
2078
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2079
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2080
}
2081
}
2082
// ANIMATION:
2084
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2085
// the transformation is set on the active state and it get reset on the checked state.
2086
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2087
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2089
check:not(:checked):indeterminate:active,
2091
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2092
check:not(:checked),
2094
radio:not(:checked) {
2095
& {
2096
transition: $longer_transition,
2097
background-size $ripple_duration $deceleration_curve,
2098
background-image $ripple_duration * 2 $deceleration_curve,
2099
-gtk-icon-transform 0;
2100
}
2101
&:active {
2103
transition: $longer_transition,
2104
background-size 0,
2105
background-image 0,
2106
-gtk-icon-transform 0;
2107
}
2108
menu menuitem & { transition: none; }
2110
}
2111
treeview.view check,
2113
treeview.view radio {
2114
padding: 0;
2115
&:hover {
2117
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2118
&:disabled { box-shadow: none; }
2120
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2122
}
2123
& {
2125
color: $secondary_fg_color;
2126
&:hover, &:active { color: $fg_color; }
2128
&:disabled { color: $disabled_secondary_fg_color; }
2130
&:checked, &:indeterminate { color: $accent_color; }
2132
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2134
}
2135
&:selected {
2137
color: $secondary_inverse_fg_color;
2138
&:hover, &:active { color: $inverse_fg_color; }
2140
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2142
&:checked, &:indeterminate { color: $accent_color; }
2144
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2146
}
2147
}
2148
treeview.view radio:checked {
2150
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2151
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2152
border-image: none;
2153
}
2154
/************
2157
* GtkScale *
2158
************/
2159
scale {
2160
// sizing
2161
$_marks_lenght: 8px;
2162
$_marks_distance: 8px;
2163
$slider_size: 24px;
2165
$marks_slider_size: 30px;
2166
$slider_margin: -($slider_size - $bar_size) / 2;
2168
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2169
$color_slider_margin: -($slider_size) / 2;
2171
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2172
min-height: $medium_size - $slider_size;
2174
min-width: $medium_size - $slider_size;
2175
padding: ($slider_size / 2);
2176
* { transition: $longer_transition; }
2178
// the slider is inside the trough, so to have make it bigger there's a negative margin
2180
slider {
2181
min-height: $slider_size;
2182
min-width: $slider_size;
2183
margin: $slider_margin;
2184
}
2185
// the backing bit
2187
trough {
2188
outline-offset: 2px;
2189
background-color: $fill_color;
2190
&:disabled { color: $disabled_fg_color; }
2192
}
2193
// the colored part of the backing bit
2195
highlight {
2196
background-color: $accent_color;
2197
&:disabled { background-color: transparent; }
2199
}
2200
// this is another differently styled part of the backing bit, the most relevant use case is for example
2202
// in media player to indicate how much video stream as been cached
2203
fill {
2204
background-color: $fill_color;
2205
&:disabled { background-color: transparent; }
2207
}
2208
slider {
2210
transition: all $shorter_duration $standard_curve;
2211
// border-radius: 100%;
2212
// background-color: $accent_color;
2213
background-repeat: no-repeat;
2214
background-position: center;
2215
@each $s, $as in ('', ''),
2217
(':disabled', '-disabled') {
2218
&#{$s} {
2219
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2220
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2222
}
2223
}
2224
background-size: calc(100% - 8px);
2226
&:hover { background-size: calc(100% - 4px); }
2228
&:active { background-size: calc(100% - 0px); }
2230
}
2231
// click-and-hold the slider to activate
2233
&.fine-tune {
2234
// to make the slider shrink in fine-tune mode
2235
slider { background-size: calc(100% - 12px); }
2236
}
2237
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2239
marks {
2241
color: $fill_color;
2242
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2244
(bottom, bottom, top),
2245
(top, left, right),
2246
(bottom, right, left) {
2247
&.#{$marks_class} {
2248
margin-#{$marks_margin}: $_marks_distance;
2249
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2250
}
2251
}
2252
}
2253
&.horizontal {
2255
indicator {
2256
min-height: $_marks_lenght;
2257
min-width: 1px;
2258
}
2259
}
2260
&.vertical {
2262
indicator {
2263
min-height: 1px;
2264
min-width: $_marks_lenght;
2265
}
2266
}
2267
// *WARNING* scale with marks madness following
2269
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2271
('vertical', 'vert') {
2272
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2273
('marks-after', 'marks-after:not(.marks-before)') {
2274
&.#{$dir_class}.#{$marks_class} {
2275
slider {
2276
@each $state, $state_infix in ('', ''),
2277
(':disabled', '-disabled') {
2278
&#{$state} {
2279
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2280
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2282
}
2283
}
2284
@if $dir_class == 'horizontal' {
2286
min-height: $marks_slider_size;
2287
min-width: $slider_size;
2288
@if $marks_infix == 'marks-before' {
2290
margin-top: $marks_slider_margin;
2291
background-position: center calc(100% - 4px);
2293
&:hover { background-position: center calc(100% - 2px); }
2295
&:active { background-position: center calc(100% - 0px); }
2297
}
2298
@if $marks_infix == 'marks-after' {
2300
margin-bottom: $marks_slider_margin;
2301
background-position: center calc(4px);
2303
&:hover { background-position: center calc(2px); }
2305
&:active { background-position: center calc(0px); }
2307
}
2308
}
2309
@if $dir_class == 'vertical' {
2311
min-height: $slider_size;
2312
min-width: $marks_slider_size;
2313
@if $marks_infix == 'marks-before' {
2315
margin-left: $marks_slider_margin;
2316
background-position: calc(4px) center;
2318
&:hover { background-position: calc(2px) center; }
2320
&:active { background-position: calc(0px) center; }
2322
}
2323
@if $marks_infix == 'marks-after' {
2325
margin-right: $marks_slider_margin;
2326
background-position: calc(100% - 4px) center;
2328
&:hover { background-position: calc(100% - 2px) center; }
2330
&:active { background-position: calc(100% - 0px) center; }
2332
}
2333
}
2334
}
2335
&.fine-tune slider {
2337
@if $dir_class == 'horizontal' {
2338
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2339
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2341
}
2342
@if $dir_class == 'vertical' {
2344
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2345
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2347
}
2348
}
2349
}
2350
}
2351
}
2352
&.color {
2354
min-height: 0;
2355
min-width: 0;
2356
&.horizontal {
2358
padding: 0 0 12px 0;
2359
slider {
2361
&:dir(ltr), &:dir(rtl) { // specificity bump
2362
margin-bottom: $color_slider_margin;
2363
margin-top: $color_marks_slider_margin;
2364
}
2365
}
2366
}
2367
&.vertical {
2369
&:dir(ltr) {
2370
padding: 0 0 0 12px;
2371
slider {
2373
margin-left: $color_slider_margin;
2374
margin-right: $color_marks_slider_margin;
2375
}
2376
}
2377
&:dir(rtl) {
2379
padding: 0 12px 0 0;
2380
slider {
2382
margin-right: $color_slider_margin;
2383
margin-left: $color_marks_slider_margin;
2384
}
2385
}
2386
}
2387
}
2388
}
2389
/*****************
2392
* Progress bars *
2393
*****************/
2394
progressbar {
2395
// sizing
2396
&.horizontal {
2397
trough,
2398
progress { min-height: $bar_size; }
2399
}
2400
&.vertical {
2402
trough,
2403
progress { min-width: $bar_size; }
2404
}
2405
// FIXME: insensitive state missing and some other state should be set probably
2407
color: $tertiary_fg_color;
2408
font-size: smaller;
2409
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2411
progress { background-color: $primary_color; }
2413
&.osd { // progressbar.osd used for epiphany page loading progress
2415
// min-width: $bar_size;
2416
// min-height: $bar_size;
2417
// background-color: transparent;
2418
// trough { background-color: transparent; }
2420
// progress { background-color: $primary_color; }
2422
}
2423
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2425
}
2426
/*************
2429
* Level Bar *
2430
*************/
2431
levelbar {
2432
block {
2433
min-width: $medium_size;
2434
min-height: $bar_size;
2435
}
2436
&.vertical block {
2438
min-width: $bar_size;
2439
min-height: $medium_size;
2440
}
2441
trough {
2443
padding: 2px;
2444
border-radius: 2px;
2445
@include entry(normal);
2447
&:disabled { @include entry(disabled); }
2449
}
2450
&.horizontal.discrete {
2452
block { margin: 0 1px; }
2453
trough { padding: 2px 1px; }
2455
}
2456
&.vertical.discrete {
2458
block { margin: 1px 0; }
2459
trough { padding: 1px 2px; }
2461
}
2462
block {
2464
&.low { background-color: $warning_color; }
2465
&.high,
2467
&:not(.empty) { background-color: $primary_color; }
2468
&.full { background-color: $success_color; }
2470
&.empty {
2472
background-color: $fill_color;
2473
color: $disabled_fg_color;
2474
}
2475
}
2476
}
2477
/****************
2480
* Print dialog *
2481
*****************/
2482
printdialog {
2483
paper {
2484
padding: 0;
2485
border: 1px solid $border_color;
2486
background-color: $base_color;
2487
color: $fg_color;
2488
}
2489
.dialog-action-box { margin: 12px; }
2491
}
2492
/**********
2495
* Frames *
2496
**********/
2497
frame > border,
2498
.frame {
2499
margin: 0;
2500
padding: 0;
2501
border: 1px solid $border_color;
2502
border-radius: 0;
2503
box-shadow: none;
2504
&.flat { border-style: none; }
2506
}
2507
frame.flat > border { @extend .frame.flat; } // for backporting
2509
actionbar > revealer > box {
2511
padding: $container_padding;
2512
border-top: 1px solid $border_color;
2513
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2515
}
2516
scrolledwindow {
2518
viewport.frame { // avoid double borders when viewport inside scrolled window
2519
border-style: none;
2520
}
2521
// This is used when content is touch-dragged past boundaries.
2523
// draws a box on top of the content, the size changes programmatically.
2524
@at-root overshoot {
2525
&.top { @include overshoot(top); }
2526
&.bottom { @include overshoot(bottom); }
2528
&.left { @include overshoot(left); }
2530
&.right { @include overshoot(right); }
2532
}
2533
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2535
@at-root undershoot {
2536
&.top { @include undershoot(top); }
2537
&.bottom { @include undershoot(bottom); }
2539
&.left { @include undershoot(left); }
2541
&.right { @include undershoot(right); }
2543
}
2544
@at-root junction { // the small square between two scrollbars
2546
border-style: solid none none solid;
2547
border-width: 1px;
2548
border-color: $border_color;
2549
background-color: $base_color;
2550
&:dir(rtl) { border-style: solid solid none none; }
2552
}
2553
}
2554
// vbox and hbox separators
2556
separator {
2557
min-width: 1px;
2558
min-height: 1px;
2559
background-color: $border_color;
2560
}
2561
%hide_separators {
2563
min-width: 0;
2564
min-height: 0;
2565
background-color: transparent;
2566
}
2567
/*********
2570
* Lists *
2571
*********/
2572
list {
2573
border-color: $border_color;
2574
background-color: $base_color;
2575
row { padding: 2px; }
2577
}
2578
// FIXME
2580
$row_transition: $longer_transition, background-color 0, color 0;
2581
row {
2583
&.activatable {
2584
transition: $row_transition,
2585
background-size $ripple_duration $deceleration_curve,
2586
background-image $ripple_duration * 2 $deceleration_curve;
2587
box-shadow: inset 0 0 0 9999px transparent;
2588
background-image: radial-gradient(circle farthest-corner at center,
2589
transparent 10%,
2590
transparent 0%);
2591
background-repeat: no-repeat;
2592
background-position: center;
2593
background-size: 1000% 1000%;
2594
&:hover {
2596
transition: $row_transition,
2597
box-shadow 0,
2598
background-size $ripple_duration $deceleration_curve,
2599
background-image $ripple_duration * 2 $deceleration_curve;
2600
box-shadow: inset 0 0 0 9999px $row_fill_color;
2601
}
2602
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2604
&:active {
2605
transition: $row_transition,
2606
background-size 0,
2607
background-image 0;
2608
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2609
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2610
background-image: radial-gradient(circle farthest-corner at center,
2611
$semi_fill_color 10%,
2612
transparent 0%);
2613
background-size: 0% 0%;
2614
}
2615
}
2616
&:selected { @extend %selected_items; }
2618
}
2619
/*********************
2622
* App Notifications *
2623
*********************/
2624
.app-notification {
2625
@extend %osd;
2626
@extend toolbar.osd;
2628
margin: 8px;
2630
button { @extend %button_basic.flat; }
2632
&.frame,
2634
border { border-style: none; }
2635
}
2636
/*************
2639
* Expanders *
2640
*************/
2641
expander {
2642
arrow {
2643
transition: all $shorter_duration $standard_curve;
2644
min-width: 16px;
2645
min-height: 16px;
2646
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2647
-gtk-icon-transform: rotate(-90deg);
2648
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2650
&:checked { -gtk-icon-transform: unset; }
2652
color: $secondary_fg_color;
2654
&:hover, &:active { color: $fg_color; }
2656
&:disabled { color: $disabled_secondary_fg_color; }
2658
&:selected {
2660
color: $secondary_inverse_fg_color;
2661
&:hover, &:active { color: $inverse_fg_color; }
2663
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2665
}
2666
}
2667
}
2668
/************
2671
* Calendar *
2672
************/
2673
calendar {
2674
padding: 1px;
2675
border: 1px solid $border_color;
2676
color: $fg_color;
2677
&:disabled { color: $disabled_fg_color; }
2679
&:selected {
2681
@extend %selected_items;
2682
border-radius: 2px + 1px;
2684
}
2685
&.header {
2687
border-style: none none solid;
2688
border-radius: 0;
2689
}
2690
&.button { @extend %simple_flat_button; }
2692
&.highlight {
2694
color: gtkalpha(currentColor, $tertiary_opacity);
2695
font-weight: 500;
2696
}
2697
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2699
}
2700
/***********
2703
* Dialogs *
2704
***********/
2705
messagedialog { // Message Dialog styling
2706
&.background { background-color: $lighter_bg_color; }
2707
.titlebar {
2709
min-height: $small_size;
2710
border-style: none;
2711
box-shadow: inset 0 1px $highlight_color;
2712
background-color: $lighter_bg_color;
2713
color: $fg_color;
2714
&:backdrop { color: $secondary_fg_color; }
2716
}
2717
&.csd { // rounded bottom border styling for csd version
2719
&.background {
2720
// bigger radius for better antialiasing
2721
border-bottom-left-radius: 2px;
2722
border-bottom-right-radius: 2px;
2723
}
2724
.dialog-action-area button {
2726
padding: 8px 16px;
2727
border-top: 1px solid $border_color;
2728
border-radius: 0;
2729
@extend %simple_flat_button;
2731
&:first-child { border-bottom-left-radius: 2px; }
2733
&:last-child { border-bottom-right-radius: 2px; }
2735
}
2736
}
2737
}
2738
filechooser {
2740
.dialog-action-box { border-top: 1px solid $border_color; }
2741
#pathbarbox {
2743
border-bottom: 1px solid $border_color;
2744
background-color: $bg_color;
2745
}
2746
}
2747
filechooserbutton:drop(active) {
2749
box-shadow: none;
2750
}
2751
/***********
2754
* Sidebar *
2755
***********/
2756
.sidebar {
2757
border-style: none;
2758
background-color: $lighter_bg_color;
2759
@at-root %sidebar_left,
2761
&:dir(ltr),
2762
&.left,
2763
&.left:dir(rtl) {
2764
border-right: 1px solid $border_color;
2765
border-left-style: none;
2766
}
2767
@at-root %sidebar_right,
2769
&:dir(rtl),
2770
&.right {
2771
border-left: 1px solid $border_color;
2772
border-right-style: none;
2773
}
2774
list { background-color: transparent; }
2776
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2778
}
2779
stacksidebar {
2781
&.sidebar {
2782
&:dir(ltr),
2783
&.left,
2784
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2785
&:dir(rtl),
2787
&.right { list { @extend %sidebar_right; }}
2788
}
2789
row {
2791
padding: 10px 4px;
2792
> label {
2794
padding-left: 6px;
2795
padding-right: 6px;
2796
}
2797
&.needs-attention > label { @extend %needs_attention; }
2799
}
2800
}
2801
/****************
2804
* File chooser *
2805
****************/
2806
placessidebar {
2807
> viewport.frame { border-style: none; }
2808
list { padding: (4px - 3px) 0 4px; }
2810
row {
2812
// Needs overriding of the GtkListBoxRow padding
2813
min-height: 32px;
2814
margin: -1px 0; // Remove unknown margins
2815
padding: 0;
2816
// Using margins/padding directly in the SidebarRow
2818
// will make the animation of the new bookmark row jump
2819
> revealer { padding: 0 12px; }
2820
&:selected { color: $inverse_fg_color; }
2822
&:disabled { color: $disabled_fg_color; }
2824
image.sidebar-icon {
2826
opacity: $tertiary_opacity; // dim the device icons
2827
&:dir(ltr) { padding-right: 8px; }
2829
&:dir(rtl) { padding-left: 8px; }
2830
}
2831
label.sidebar-label {
2833
&:dir(ltr) { padding-right: 2px; }
2834
&:dir(rtl) { padding-left: 2px; }
2835
}
2836
@at-root button.sidebar-button {
2838
@extend %simple_flat_button;
2839
@extend %small_button;
2841
row:selected & {
2843
}
2844
}
2845
&.sidebar-placeholder-row {
2847
min-height: 2px;
2848
padding: 0 8px;
2849
background-image: image($accent_color);
2850
background-clip: content-box;
2851
}
2852
&.sidebar-new-bookmark-row { color: $accent_color; }
2854
&:drop(active):not(:disabled) {
2856
box-shadow: inset 0 0 0 2px $accent_color;
2857
&:selected {
2859
// background-color: $accent_color;
2860
// color: $inverse_fg_color;
2861
}
2862
}
2863
}
2864
}
2865
placesview {
2867
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2868
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2870
// this selects the "connect to server" label
2872
> actionbar > revealer > box > label {
2873
padding-left: 8px;
2874
padding-right: 8px;
2875
}
2876
}
2877
/*********
2880
* Paned *
2881
*********/
2882
paned {
2883
> separator {
2884
min-width: 1px;
2885
min-height: 1px;
2886
-gtk-icon-source: none; // defeats the ugly default handle decoration
2887
border-style: none; // just to be sure
2888
background-color: transparent;
2889
// workaround, using background istead of a border since the border will get rendered twice (?)
2890
background-image: image($border_color);
2891
background-size: 1px 1px;
2892
background-clip: content-box; // avoids borders image being rendered twice (?)
2893
&.wide {
2895
min-width: 6px;
2896
min-height: 6px;
2897
background-color: $bg_color;
2898
background-image: image($border_color), image($border_color);
2899
background-size: 1px 1px, 1px 1px;
2900
}
2901
}
2902
&.horizontal > separator {
2904
background-repeat: repeat-y;
2905
&:dir(ltr) {
2907
margin: 0 -8px 0 0;
2908
padding: 0 8px 0 0;
2909
background-position: left;
2910
}
2911
&:dir(rtl) {
2913
margin: 0 0 0 -8px;
2914
padding: 0 0 0 8px;
2915
background-position: right;
2916
}
2917
&.wide {
2919
margin: 0;
2920
padding: 0;
2921
background-repeat: repeat-y, repeat-y;
2922
background-position: left, right;
2923
}
2924
}
2925
&.vertical > separator {
2927
margin: 0 0 -8px 0;
2928
padding: 0 0 8px 0;
2929
background-repeat: repeat-x;
2930
background-position: top;
2931
&.wide {
2933
margin: 0;
2934
padding: 0;
2935
background-repeat: repeat-x, repeat-x;
2936
background-position: bottom, top;
2937
}
2938
}
2939
}
2940
/**************
2943
* GtkInfoBar *
2944
**************/
2945
infobar {
2946
border-style: none;
2947
&.info { background-color: $info_bg_color; }
2949
&.question { background-color: $question_bg_color; }
2951
&.warning { background-color: $warning_bg_color; }
2953
&.error { background-color: $error_bg_color; }
2955
&.info,
2957
&.question,
2958
&.warning,
2959
&.error {
2960
> label, & { color: $inverse_fg_color; }
2961
button { @extend %button_selected; }
2963
selection {}
2965
*:link { @extend %link_selected; }
2967
}
2968
}
2969
/************
2972
* Tooltips *
2973
************/
2974
tooltip {
2975
&.background {
2976
// background-color needs to be set this way otherwise it gets drawn twice
2977
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2978
box-shadow: inset 0 1px $highlight_color;
2979
background-color: scale-alpha($base_color, $higher_opacity);
2980
}
2981
// @extend %osd;
2983
// padding: 4px; /* not working */
2985
border-radius: 2px;
2986
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2987
&:not(.csd):not(.unity-csd) {
2989
border: 1px solid $border_color;
2990
border-radius: 2px + 1px;
2991
background-clip: $extra_background_clip;
2992
}
2993
// FIXME: we need a border or tooltips vanish on black background.
2995
decoration { background-color: transparent; }
2996
label {
2998
// tooltip label already seems to have 6px margins
2999
min-height: 32px - 6px * 2;
3000
padding: 0 8px - 6px;
3001
}
3002
* {
3004
// workaround for Eclipse.
3005
// do not include any declaration here.
3006
// padding: 0;
3007
// background-color: transparent;
3008
// color: inherit;
3009
}
3010
}
3011
/*****************
3014
* Color Chooser *
3015
*****************/
3016
colorswatch {
3017
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3018
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3019
// applied to the overlay box.
3020
// base color corners rounding
3022
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3023
// sports a bigger radius.
3024
// nth-child is needed by the custom color strip.
3025
&.top {
3027
border-top-left-radius: $material_radius + 0.5px;
3028
border-top-right-radius: $material_radius + 0.5px;
3029
overlay {
3031
border-top-left-radius: $material_radius;
3032
border-top-right-radius: $material_radius;
3033
}
3034
}
3035
&.bottom {
3037
border-bottom-left-radius: $material_radius + 0.5px;
3038
border-bottom-right-radius: $material_radius + 0.5px;
3039
overlay {
3041
border-bottom-left-radius: $material_radius;
3042
border-bottom-right-radius: $material_radius;
3043
}
3044
}
3045
&.left,
3047
&:first-child:not(.top) {
3048
border-top-left-radius: $material_radius + 0.5px;
3049
border-bottom-left-radius: $material_radius + 0.5px;
3050
overlay {
3052
border-top-left-radius: $material_radius;
3053
border-bottom-left-radius: $material_radius;
3054
}
3055
}
3056
&.right,
3058
&:last-child:not(.bottom) {
3059
border-top-right-radius: $material_radius + 0.5px;
3060
border-bottom-right-radius: $material_radius + 0.5px;
3061
overlay {
3063
border-top-right-radius: $material_radius;
3064
border-bottom-right-radius: $material_radius;
3065
}
3066
}
3067
&.dark overlay { color: $light_fg_color; }
3069
&.light overlay { color: $dark_fg_color; }
3071
&.dark { color: $light_fg_color; } // for focus ring
3073
&.light { color: $dark_fg_color; } // for focus ring
3075
&:drop(active) {
3077
box-shadow: none;
3078
&.light overlay {
3080
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3081
}
3082
&.dark overlay {
3084
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3085
}
3086
}
3087
overlay {
3089
transition: $shadow_transition;
3090
box-shadow: $shadow_1;
3091
&:hover { box-shadow: $shadow_2; }
3093
}
3094
&#add-color-button {
3096
border-radius: $material_radius $material_radius 0 0;
3097
color: $light_fg_color; // for focus ring
3098
&:only-child { border-radius: $material_radius; }
3100
overlay {
3102
background-image: linear-gradient(to right,
3103
$error_bg_color 25%,
3104
$warning_bg_color 25%, $warning_bg_color 50%,
3105
$info_bg_color 50%, $info_bg_color 75%,
3106
$question_bg_color 75%);
3107
color: $light_fg_color;
3108
}
3109
}
3110
&:disabled {
3112
opacity: $disabled_opacity;
3113
overlay { box-shadow: none; }
3115
}
3116
row:selected & {
3118
}
3119
&#editor-color-sample {
3121
border-radius: $material_radius + 0.5px;
3122
overlay { border-radius: $material_radius; }
3124
// overlay:hover { box-shadow: $shadow_1; }
3126
}
3127
}
3128
// colorscale popup
3130
colorchooser .popover.osd {
3131
transition: $shadow_transition;
3132
border-radius: 2px;
3133
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3134
background-color: $base_color;
3135
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3137
spinbutton:not(.vertical) { @extend %entry.flat; }
3139
}
3140
/********
3143
* Misc *
3144
********/
3145
// content view (grid/list)
3146
.content-view {
3147
background-color: $bg_color;
3148
// &:hover { -gtk-icon-effect: highlight; }
3150
rubberband, .rubberband { @extend rubberband; }
3152
}
3153
.scale-popup {
3155
.osd & { @extend %osd; }
3156
.osd & button.flat { // FIXME: quick hack, redo properly
3158
}
3159
button { // +/- buttons on GtkVolumeButton popup
3161
}
3162
}
3163
/**********************
3166
* Window Decorations *
3167
**********************/
3168
decoration {
3169
transition: $shadow_transition;
3170
border-radius: 2px 2px 0 0;
3171
box-shadow: $shadow_4, 0 16px 16px transparent;
3172
// FIXME rationalize shadows
3174
// this is used for the resize cursor area
3176
margin: 8px;
3177
&:backdrop {
3179
// the transparent shadow here is to enforce that the shadow extents don't
3180
// change when we go to backdrop, to prevent jumping windows.
3181
// The biggest shadow should be in the same order then in the active state
3182
// or the jumping will happen during the transition.
3183
box-shadow: $shadow_2, 0 16px 16px transparent;
3184
}
3185
.maximized &,
3187
.fullscreen &,
3188
.tiled & { border-radius: 0; }
3189
.popup & { box-shadow: none; }
3191
// server-side decorations as used by mutter
3193
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3194
.csd.popup & {
3196
border-radius: 2px;
3197
box-shadow: $shadow_2;
3198
}
3199
tooltip.csd & {
3201
border-radius: 2px;
3202
box-shadow: $shadow_2;
3203
}
3204
messagedialog.csd & {
3206
border-radius: 2px;
3207
// box-shadow: $shadow_4, 0 16px 16px transparent;
3208
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3210
}
3211
.solid-csd & {
3213
margin: 0;
3214
// padding: 4px;
3215
border-radius: 0;
3216
box-shadow: none;
3217
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3218
background-color: $titlebar_bg_color;
3219
}
3220
}
3221
// Window Close button
3223
button.titlebutton {
3224
// @extend %simple_flat_button;
3225
@extend %circular_button;
3227
.selection-mode & {
3229
}
3230
}
3231
// catch all extend :)
3234
%selected_items {
3236
background-color: $primary_color;
3237
@at-root %nobg_selected_items, & {
3239
color: $inverse_fg_color;
3240
&:disabled { color: $disabled_inverse_fg_color; }
3242
}
3243
}
3244
.monospace { font-family: monospace; }
3246
/**********************
3249
* Touch Copy & Paste *
3250
**********************/
3251
// touch selection handlebars for the Popover.osd above
3252
cursor-handle {
3253
border-radius: $circular_radius;
3254
background-color: $accent_color;
3255
background-image: none;
3256
&.top:dir(ltr), &.bottom:dir(rtl) {
3258
padding-left: 6px;
3259
border-top-right-radius: 0;
3260
}
3261
&.bottom:dir(ltr), &.top:dir(rtl) {
3263
padding-right: 6px;
3264
border-top-left-radius: 0;
3265
}
3266
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3268
-GtkWidget-text-handle-width: 24;
3269
-GtkWidget-text-handle-height: 30;
3270
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3272
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3273
url('#{$_url}@2.png'));
3274
}
3275
}
3276
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3278
// shortcut window keys
3280
.keycap {
3281
min-width: 28px - 8px * 2;
3282
min-height: 28px - 2px;
3283
margin-top: 2px;
3284
padding-bottom: 2px;
3285
padding-left: 8px;
3286
padding-right: 8px;
3287
border: solid 1px $border_color;
3289
border-radius: 2px + 1px;
3290
box-shadow: inset 0 -2px $border_color;
3291
background-color: $base_color;
3292
color: $fg_color;
3293
font-size: smaller;
3294
}
3295
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3297
transition: $longer_transition;
3298
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3299
caret-color: $accent_color;
3300
}
3301
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3303
stackswitcher button.circular,
3305
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3306
min-width: $medium_size;
3307
min-height: $medium_size;
3308
padding: 0;
3309
}
3310