ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 0;
6
-GtkTextView-error-underline-color: $error_color;
7
// The size for scrollbars. The slider is 2px smaller, but we keep it
9
// up so that the whole area is sensitive to button presses for the
10
// slider. The stepper button is larger in both directions, the slider
11
// only in the width
12
-GtkScrolledWindow-scrollbar-spacing: 0;
14
-GtkToolItemGroup-expander-size: 11;
16
-GtkWidget-text-handle-width: 24;
18
-GtkWidget-text-handle-height: 24;
19
-GtkDialog-button-spacing: 4;
21
-GtkDialog-action-area-border: 0;
22
// We use the outline properties to signal the focus properties
24
// to the adwaita engine: using real CSS properties is faster,
25
// and we don't use any outlines for now.
26
outline-style: solid;
28
outline-width: 2px;
29
outline-color: transparent;
30
outline-offset: -4px;
31
-gtk-outline-radius: 2px;
32
-gtk-secondary-caret-color: $primary_color;
34
}
35
switch:focus slider,
37
notebook:focus tab,
38
*:focus { outline-color: $fill_color; }
39
/***************
42
* Base States *
43
***************/
44
.background {
45
background-color: $bg_color;
46
color: $fg_color;
47
}
48
/*
50
These wildcard seems unavoidable, need to investigate.
51
Wildcards are bad and troublesome, use them with care,
52
or better, just don't.
53
Everytime a wildcard is used a kitten dies, painfully.
54
*/
55
*:disabled { -gtk-icon-effect: dim; }
57
.gtkstyle-fallback {
59
background-color: $bg_color;
60
color: $fg_color;
61
&:hover {
63
background-color: darken($bg_color, 5%);
64
color: $fg_color;
65
}
66
&:active {
68
background-color: darken($bg_color, 10%);
69
color: $fg_color;
70
}
71
&:disabled {
73
background-color: $bg_color;
74
color: $disabled_fg_color;
75
}
76
&:selected {
78
background-color: $primary_color;
79
color: $inverse_fg_color;
80
}
81
}
82
.view {
84
@extend row.activatable;
85
background-color: $base_color;
87
color: $fg_color;
88
&:disabled { color: $disabled_fg_color; }
90
selection,
92
&:selected { @extend %selected_items; }
93
}
94
textview {
96
// FIXME: we need to override background-color to ensure text rendering
97
text { background-color: $base_color; }
98
// FIXME: we cannot specify text color for the border node
100
border { background-color: $alt_base_color; }
101
}
102
iconview { border-radius: 2px; }
104
.rubberband,
106
rubberband {
107
border: 1px solid $alt_primary_color;
108
background-color: scale-alpha($alt_primary_color, $lower_opacity);
109
}
110
flowbox {
112
rubberband { @extend rubberband; }
113
flowboxchild {
115
padding: 4px;
116
border-radius: 2px;
117
// outline-offset: -2px;
118
&:selected { @extend %selected_items; }
120
}
121
}
122
.content-view .tile {
124
// margin: 2px;
125
// padding: 0;
126
// border-radius: 0;
127
// background-color: $black;
128
&:selected {
130
background-color: transparent;
131
color: inherit;
132
}
133
}
134
label {
136
caret-color: currentColor; // this shouldn't be needed.
137
&.separator {
139
@extend .dim-label;
140
color: $fg_color;
142
}
143
row:selected &,
145
&:selected { @extend %nobg_selected_items; }
146
selection {
148
background-color: $primary_color;
149
color: $inverse_fg_color;
150
}
151
&:disabled {
153
color: $disabled_fg_color;
154
selection { @extend %selected_items:disabled; }
156
tab &,
158
button & { color: inherit; }
159
}
160
}
161
.dim-label { opacity: $tertiary_opacity; }
163
assistant {
165
.sidebar {
166
padding: 4px 0;
167
// background-color: $base_color;
168
// border-top: 1px solid $border_color;
169
}
170
// &.csd .sidebar { border-top-style: none; }
172
.sidebar label {
174
min-height: $medium_size;
175
padding: 0 12px;
176
color: $tertiary_fg_color;
177
font-weight: 500;
178
&.highlight { color: $fg_color; }
180
}
181
}
182
%osd, .osd { opacity: $higher_opacity; }
184
/*********************
187
* Spinner Animation *
188
*********************/
189
@keyframes spin {
190
to { -gtk-icon-transform: rotate(1turn); }
191
}
192
@keyframes spin_colors {
194
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
195
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
196
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
197
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
198
}
199
spinner {
201
background: none;
202
opacity: 0; // non spinning spinner makes no sense
203
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
204
&:checked {
206
opacity: 1;
207
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
208
&:disabled { opacity: $disabled_opacity; }
210
}
211
}
212
/****************
215
* Text Entries *
216
****************/
217
%entry,
218
entry {
219
%entry_basic, & {
220
min-height: $medium_size;
221
padding: 0 8px;
222
border-radius: 2px;
223
@include entry(normal);
225
&:focus { @include entry(focus); }
227
&:disabled { @include entry(disabled); }
229
&.flat {
231
border-radius: 0;
232
@include entry(flat-normal);
234
&:focus { @include entry(flat-focus); }
236
&:disabled { @include entry(flat-disabled); }
238
}
239
image { // icons inside the entry
241
// @extend %simple_flat_button;
242
// min-height: $small_size;
244
// min-width: $small_size;
245
// border-radius: $circular_radius;
246
// -gtk-outline-radius: $circular_radius;
247
color: gtkalpha(currentColor, $secondary_opacity);
248
&:hover, &:active { color: currentColor; }
250
&:disabled { color: gtkalpha(currentColor, $tertiary_opacity); }
252
&.left { margin-left: 2px; margin-right: 6px; }
254
&.right { margin-left: 6px; margin-right: 2px; }
256
}
257
undershoot {
259
&.left { @include undershoot(left); }
260
&.right { @include undershoot(right); }
262
}
263
selection { @extend %selected_items; }
265
// entry error and warning style
267
@each $e_type, $e_color in (error, $error_color),
268
(warning, $warning_color) {
269
&.#{$e_type} {
270
@include entry(normal, $e_color);
271
&:focus { @include entry(focus, $e_color); }
273
&:disabled { @include entry(disabled, $e_color); }
275
&.flat {
277
@include entry(flat-normal, $e_color);
278
&:focus { @include entry(flat-focus, $e_color); }
280
&:disabled { @include entry(flat-disabled, $e_color); }
282
}
283
}
284
}
285
&:drop(active) {
287
// box-shadow: inset 0 0 0 2px $accent_color;
288
}
289
.osd & {
291
}
292
}
293
progress {
295
margin: 2px (2px - 8px);
296
border-bottom: 2px solid $primary_color;
297
background-color: transparent;
298
}
299
// linked entries
301
.linked:not(.vertical) > & { @extend %linked; }
302
// Vertically linked entries
304
.linked.vertical > & { @extend %linked_vertical; }
305
.linked:not(.vertical) > &.flat,
307
.linked.vertical > &.flat { border-radius: 0; }
308
}
309
treeview entry {
311
&.flat, & {
312
min-height: 0;
313
padding: 2px;
314
border-radius: 0;
315
background-color: $base_color;
316
&, &:focus {
318
border-image: none;
319
box-shadow: none;
320
}
321
}
322
}
323
/***********
326
* Buttons *
327
***********/
328
// stuff for .needs-attention
329
@keyframes needs_attention {
330
from {
331
background-image: -gtk-gradient(radial,
332
center center, 0,
333
center center, 0.001,
334
to($accent_color),
335
to(transparent));
336
}
337
to {
339
background-image: -gtk-gradient(radial,
340
center center, 0,
341
center center, 0.5,
342
to($accent_color),
343
to(transparent));
344
}
345
}
346
%button,
348
button {
349
@at-root %button_basic, & {
350
min-height: 24px;
351
min-width: 16px;
352
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
353
border-radius: 2px;
354
font-weight: 500;
355
@include button(normal);
357
&:hover { @include button(hover); }
359
&:active { @include button(active); }
361
&:disabled { @include button(disabled); }
363
&:checked { @include button(checked); }
365
&:checked:disabled { @include button(checked-disabled); }
367
@at-root %flat_button, &.flat {
369
@at-root %simple_flat_button, & {
370
@include button(flat-normal);
371
&:hover { @include button(flat-hover); }
373
&:active { @include button(flat-active); }
375
&:disabled { @include button(flat-disabled); }
377
}
378
&:checked { @include button(flat-checked); }
380
&:checked:disabled { @include button(flat-checked-disabled); }
382
}
383
&.text-button {
385
padding-left: 16px;
386
padding-right: 16px;
387
}
388
&.image-button {
390
min-width: 24px;
391
padding: ($medium_size - 24px) / 2;
392
&:not(.text-button) { @extend %circular_button; }
394
}
395
&.text-button.image-button {
397
label {
398
&:first-child { margin-left: 16px - ($medium_size - 24px) / 2; }
399
&:last-child { margin-right: 16px - ($medium_size - 24px) / 2; }
401
}
402
image:not(:only-child) { margin: 0 (24px - 16px) / 2; }
404
}
405
.linked > & { @extend %linked; }
407
.linked.vertical > & { @extend %linked_vertical; }
409
.linked > &.flat,
411
.linked.vertical > &.flat {
412
border-radius: 2px;
413
&.image-button:not(.text-button) { @extend %circular_button; }
415
}
416
&:drop(active) {
418
// box-shadow: inset 0 0 0 2px $accent_color;
419
}
420
}
421
@at-root %button_selected, row:selected & {
423
&:disabled { color: $disabled_secondary_inverse_fg_color; }
424
}
425
// big standalone buttons like in Documents pager
427
&.osd {
428
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
429
&.image-button { padding: ($large_size - 24px) / 2; }
431
&:disabled { opacity: 0; }
433
}
434
// overlay / OSD style
436
@at-root %osd_button,
437
.osd & {
438
}
439
// Suggested and Destructive Action buttons
441
@each $b_type, $b_color in (suggested-action, $suggested_color),
442
(destructive-action, $destructive_color) {
443
&.#{$b_type} {
444
background-color: $b_color;
445
color: $inverse_fg_color;
446
&:disabled { @include button(disabled, $b_color); }
448
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
450
&.flat {
452
background-color: transparent;
453
color: $b_color;
454
&:disabled { @include button(flat-disabled, $b_color); }
456
&:checked { background-color: $fill_color; }
458
}
459
.osd & {
461
}
462
}
463
}
464
.stack-switcher > & {
466
// to position the needs attention dot, padding is added to the button
467
// child, a label needs just lateral padding while an icon needs vertical
468
// padding added too.
469
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
471
> label {
473
padding-left: 6px; // label padding
474
padding-right: 6px; //
475
}
476
> image {
478
padding-left: 6px; // image padding
479
padding-right: 6px; //
480
padding-top: 3px; //
481
padding-bottom: 3px; //
482
}
483
&.text-button {
485
// compensate text-button paddings
486
padding-left: 16px - 6px;
487
padding-right: 16px - 6px;
488
}
489
&.image-button {
491
// we want image buttons to have a 1:1 aspect ratio, so compensation
492
// of the padding added to the GtkImage is needed
493
padding-left: ($medium_size - 16px) / 2 - 6px;
494
padding-right: ($medium_size - 16px) / 2 - 6px;
495
}
496
&.needs-attention {
498
> label,
499
> image { @extend %needs_attention; }
500
&:checked {
502
> label,
503
> image {
504
animation: none;
505
background-image: none;
506
}
507
}
508
}
509
}
510
// hide separators
512
&.font,
513
&.file { separator { @extend %hide_separators; }}
514
// &.font { > box > box > label { font-weight: bold; }}
516
// inline-toolbar buttons
518
.inline-toolbar & {
519
// @extend %button_basic.flat;
520
&:not(.text-button) { @extend %circular_button; }
522
}
523
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
525
@at-root %circular_button,
527
&.close,
528
&.circular { // The Bloody Circul Button
529
border-radius: $circular_radius;
530
-gtk-outline-radius: $circular_radius;
531
// label { padding: 0; }
533
}
534
@at-root %small_button {
536
min-height: $small_size;
537
min-width: $small_size;
538
padding: 0;
539
border-radius: $circular_radius;
540
-gtk-outline-radius: $circular_radius;
541
}
542
}
543
%needs_attention {
545
animation: needs_attention $longer_duration $deceleration_curve forwards;
546
background-repeat: no-repeat;
547
background-position: right 3px;
548
background-size: 6px 6px;
549
&:dir(rtl) { background-position: left 3px; }
551
}
552
// all the following is for the +|- buttons on inline toolbars, that way
554
// should really be deprecated...
555
.inline-toolbar toolbutton > button { // redefining the button look is
556
// needed since those are flat...
557
}
558
// More inline toolbar buttons
560
toolbar.inline-toolbar toolbutton:not(:only-child) {
561
// > button.flat { @extend %linked_middle; }
562
// &:first-child > button.flat { @extend %linked_first; }
564
// &:last-child > button.flat { @extend %linked_last; }
566
}
567
%linked:not(:only-child) {
569
@at-root %linked_middle,
570
& {
571
border-radius: 0;
572
-gtk-outline-radius: 2px;
573
}
574
@at-root %linked_first,
576
&:first-child { border-radius: 2px 0 0 2px; }
577
@at-root %linked_last,
579
&:last-child { border-radius: 0 2px 2px 0; }
580
}
581
%linked_vertical:not(:only-child) {
583
@at-root %linked_vertical_middle,
584
& {
585
border-radius: 0;
586
-gtk-outline-radius: 2px;
587
}
588
@at-root %linked_vertical_first,
590
&:first-child { border-radius: 2px 2px 0 0; }
591
@at-root %linked_vertical_last,
593
&:last-child { border-radius: 0 0 2px 2px; }
594
}
595
/* menu buttons */
597
modelbutton.flat,
598
.menuitem.button.flat {
599
min-height: $menuitem_size;
600
padding: 0 8px;
601
border-radius: 2px;
602
color: inherit;
603
@extend %simple_flat_button;
605
&:selected { @extend %selected_items; }
607
}
608
modelbutton.flat arrow {
610
background: none;
611
&:hover { background: none; }
613
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
615
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
617
}
618
button.color {
620
min-height: $small_size;
621
min-width: $small_size;
622
padding: $container_padding;
623
colorswatch:only-child {
625
// &, overlay { border-radius: 0; }
626
}
627
}
628
/*********
631
* Links *
632
*********/
633
*:link {
634
&, &:hover, &:active { color: $link_color; }
635
&:visited {
637
&, &:hover, &:active { color: $visited_link_color; }
638
}
639
@at-root %link_selected,
641
&:selected,
642
*:selected & { color: $inverse_fg_color; }
643
}
644
button:link,
646
button:visited {
647
@extend *:link;
648
> label { text-decoration-line: underline; }
650
}
651
/*****************
653
* GtkSpinButton *
654
*****************/
655
spinbutton {
656
&:not(.vertical) {
657
// in this horizontal configuration, the whole spinbutton
658
// behaves as the entry, so we extend the entry styling
659
// and nuke the style on the internal entry
660
@extend %entry;
661
padding: 0;
663
%spinbutton_entry,
665
entry {
666
min-width: $large_size - 8px * 2;
667
// reset all the other props since the spinbutton node is styled here
668
margin: 0;
669
border-image: none;
670
border-radius: 0;
671
box-shadow: none;
672
background-color: transparent;
673
//
674
// This will help to simplify spinbutton's code, but unfortunatelly
675
// doesn't work properly in :dir(rtl). It needs z-index property.
676
//
677
// min-width: $large_size - 8px;
678
//
679
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
680
//
681
// &:dir(ltr) {
682
// margin-right: -$spinbuttons_width;
683
// padding-right: $spinbuttons_width;
684
// }
685
//
686
// &:dir(rtl) {
687
// margin-left: -$spinbuttons_width;
688
// padding-left: $spinbuttons_width;
689
// }
690
}
691
button {
693
// margin: $container_padding;
694
border: solid $container_padding transparent;
695
@extend %simple_flat_button;
697
@extend %small_button;
699
&.up:dir(ltr),
701
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
702
&.up:dir(rtl),
704
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
705
}
706
}
707
// OSD horizontal
709
.osd &:not(.vertical) {
710
button {
711
}
712
}
713
// Vertical
715
&.vertical {
716
// in the vertical configuration, we treat the spinbutton
717
// as a box, and tweak the style of the entry in the middle
718
// so that it's linked
719
// FIXME: this should not be set at all, but otherwise it gets the wrong
721
// color
722
&:disabled { color: $disabled_fg_color; }
723
&:drop(active) {
725
box-shadow: none;
726
}
727
entry {
729
min-height: $medium_size;
730
min-width: $large_size;
731
padding: 0;
732
}
733
button {
735
min-height: $medium_size;
736
min-width: $large_size;
737
padding: 0;
738
@extend %simple_flat_button;
740
&.up { border-radius: 2px 2px 0 0; }
742
&.down { border-radius: 0 0 2px 2px; }
744
}
745
}
746
// OSD vertical
748
.osd &.vertical button:first-child {
749
}
750
// Misc
752
treeview &:not(.vertical) {
753
min-height: 0;
754
border-style: none;
755
border-radius: 0;
756
entry {
758
min-height: 0;
759
padding: 1px 2px;
760
}
761
}
762
}
763
/**************
766
* ComboBoxes *
767
**************/
768
combobox {
769
arrow {
770
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
771
min-height: 16px;
772
min-width: 16px;
773
}
774
decoration,
776
button.combo:checked { transition: none; } // workaround for menuitem selection
777
button.combo cellview {
779
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
780
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
781
}
782
#gtk-combobox-popup-menu {
784
padding: 2px 0;
785
menuitem {
787
min-height: $medium_size - 2px * 2;
788
padding: 0 8px;
789
}
790
// overflow arrows
792
> arrow {
793
&.top { margin-top: -2px; }
794
&.bottom { margin-bottom: -2px * 3; }
796
}
797
}
798
&.linked {
800
button:nth-child(2) {
801
&:dir(ltr) { @extend %linked:last-child; }
802
&:dir(rtl) { @extend %linked:first-child; }
803
}
804
}
805
&:drop(active) { // FIXME: untested
807
box-shadow: none;
808
// button.combo { @extend %button_basic:drop(active); }
810
}
811
}
812
// the combo is a composite widget so the way we do button linking doesn't
814
// work, special case needed. See
815
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
816
.linked:not(.vertical) > combobox:not(:only-child) {
818
> box > button.combo { @extend %linked_middle; }
819
&:first-child > box > button.combo { @extend %linked_first; }
821
&:last-child > box > button.combo { @extend %linked_last; }
823
}
824
.linked.vertical > combobox:not(:only-child) {
826
> box > button.combo { @extend %linked_vertical_middle; }
827
&:first-child > box > button.combo { @extend %linked_vertical_first; }
829
&:last-child > box > button.combo { @extend %linked_vertical_last; }
831
}
832
%combo_flat {
834
border-radius: 0;
835
background-image: none;
836
font-weight: inherit;
837
@include entry(flat-normal);
839
&:hover { box-shadow: inset 0 -2px $fill_color; }
841
&:checked {
843
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
844
$primary_color 100%,
845
transparent 0%)
846
0 0 2 / 0 0 2px;
847
}
848
&:disabled { color: $disabled_fg_color; }
850
}
851
/************
854
* Toolbars *
855
************/
856
toolbar {
857
-GtkWidget-window-dragging: true;
858
padding: $container_padding / 2;
859
background-color: $bg_color;
860
button { @extend %button_basic.flat; }
862
// on OSD
864
.osd & { background-color: transparent; }
865
// stand-alone OSD toolbars
867
&.osd {
868
transition: $shadow_transition;
869
padding: $container_padding;
870
border-radius: 2px;
871
box-shadow: $shadow_2, inset 0 1px $highlight_color;
872
background-color: $base_color;
873
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
875
&.left,
877
&.right,
878
&.top,
879
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
880
}
881
// toolbar separators
883
&.horizontal separator { margin: $container_padding / 2; }
884
&.vertical separator { margin: $container_padding / 2; }
885
&:not(.inline-toolbar):not(.osd) {
887
scale,
888
entry,
889
spinbutton,
890
button { margin: $container_padding / 2; }
891
.linked entry,
893
.linked spinbutton,
894
.linked button {
895
&:not(:first-child) { margin-left: 0; }
896
&:not(:last-child) { margin-right: 0; }
897
}
898
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
900
}
901
}
902
// searchbar, location-bar & inline-toolbar
904
.inline-toolbar {
905
padding: $container_padding;
906
border-style: solid;
907
border-width: 0 1px 1px;
908
border-color: $border_color;
909
background-color: $alt_base_color;
910
}
911
searchbar,
913
.location-bar {
914
padding: $container_padding;
915
border-style: solid;
916
border-width: 0 0 1px;
917
border-color: $border_color;
918
background-color: $bg_color;
919
background-clip: border-box;
920
}
921
/***************
924
* Header bars *
925
***************/
926
%titlebar,
927
headerbar {
928
transition: background-color $shorter_duration $deceleration_curve;
929
min-height: $large_size;
930
padding: 0 $container_padding;
931
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
932
background-color: $titlebar_bg_color;
933
color: $titlebar_fg_color;
934
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
936
&:backdrop {
938
color: $secondary_titlebar_fg_color;
939
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
941
}
942
.title {
944
transition: $longer_transition;
945
padding: 0 12px;
946
font-weight: bold;
947
}
948
.subtitle {
950
transition: $longer_transition;
951
padding: 0 12px;
952
font-size: smaller;
953
@extend .dim-label;
955
}
956
button:not(.suggested-action):not(.destructive-action) {
958
@extend %button_basic.flat;
959
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
961
$titlebar_indicator_color 0%,
962
transparent 0%)
963
0 0 0 / 0 0 0px;
964
&:checked {
966
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
967
$titlebar_indicator_color 100%,
968
transparent 0%)
969
0 0 2 / 0 0 2px;
970
&, &:disabled { background-color: transparent; }
972
}
973
}
974
button.suggested-action, button.destructive-action {
976
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
977
}
978
&.selection-mode {
980
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
981
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
982
transition: background-color 0.00001s $longer_duration;
983
animation: header_ripple_effect $longer_duration $deceleration_curve;
984
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
985
background-color: $primary_color;
986
color: $inverse_fg_color;
987
&:backdrop {
989
color: $secondary_inverse_fg_color;
990
}
991
.subtitle:link { @extend *:link:selected; }
993
button:not(.suggested-action):not(.destructive-action) {
995
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
996
currentColor 0%,
997
transparent 0%)
998
0 0 0 / 0 0 0px;
999
color: currentColor;
1000
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1002
&:checked {
1004
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1005
currentColor 100%,
1006
transparent 0%)
1007
0 0 2 / 0 0 2px;
1008
color: currentColor;
1009
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1011
}
1012
}
1013
.selection-menu {
1015
padding-left: 16px;
1016
padding-right: 16px;
1017
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1019
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1021
}
1022
}
1023
.fullscreen &,
1025
.tiled &,
1026
.maximized & {
1027
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1028
box-shadow: $shadow_1;
1029
}
1030
&.default-decoration {
1032
min-height: $small_size;
1033
padding: $container_padding;
1034
box-shadow: inset 0 1px $titlebar_highlight_color;
1035
.fullscreen &,
1037
.tiled &,
1038
.maximized & { box-shadow: none; }
1039
button.titlebutton {
1041
min-height: $small_size;
1042
min-width: $small_size;
1043
margin: 0;
1044
padding: 0;
1045
}
1046
// workaround for non-animatable buttons
1048
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1049
}
1050
.solid-csd & {
1052
&:dir(rtl), &:dir(ltr) { // specificity bump
1053
// margin-left: -2px;
1054
// margin-right: -2px;
1055
// margin-top: -2px;
1056
// border-radius: 0;
1057
// box-shadow: inset 0 1px $titlebar_highlight_color;
1058
}
1059
}
1060
}
1061
headerbar {
1063
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1064
entry,
1065
spinbutton,
1066
// separator,
1067
button {
1068
margin-top: $container_padding;
1069
margin-bottom: $container_padding;
1070
}
1071
switch {
1073
margin-top: $container_padding * 2;
1074
margin-bottom: $container_padding * 2;
1075
}
1076
// reset button margins of the spinbutton
1078
spinbutton button {
1079
margin-top: 0;
1080
margin-bottom: 0;
1081
}
1082
}
1083
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1085
border-top-left-radius: 2px;
1086
border-top-right-radius: 2px;
1087
}
1088
headerbar { // headerbar border rounding
1090
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1091
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1092
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1094
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1096
&:first-child, &:last-child {
1097
border-top-left-radius: 2px;
1098
border-top-right-radius: 2px;
1099
}
1100
}
1101
}
1102
.titlebar:not(headerbar) {
1104
window.csd > & {
1105
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1106
padding: 0;
1107
background-color: transparent;
1108
background-image: none;
1109
border-style: none;
1110
box-shadow: none;
1111
}
1112
> separator {
1114
background-color: $titlebar_bg_color;
1115
background-image: image($border_color);
1116
}
1117
@extend %titlebar;
1119
}
1120
/************
1123
* Pathbars *
1124
************/
1125
%pathbar_button,
1126
.path-bar button {
1127
padding-left: ($medium_size - 24px) / 2;
1128
padding-right: ($medium_size - 24px) / 2;
1129
label:not(:only-child) {
1131
&:first-child { margin-left: 4px; }
1132
&:last-child { margin-right: 4px; }
1134
}
1135
&.slider-button {
1137
padding-left: (24px - 16px) / 2;
1138
padding-right: (24px - 16px) / 2;
1139
}
1140
:not(headerbar) & {
1142
@extend %flat_button;
1143
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1145
$primary_color 0%,
1146
transparent 0%)
1147
0 0 0 / 0 0 0px;
1148
border-radius: 2px;
1149
&:checked {
1151
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1152
$primary_color 100%,
1153
transparent 0%)
1154
0 0 2 / 0 0 2px;
1155
&, &:disabled { background-color: transparent; }
1157
}
1158
}
1159
}
1160
/**************
1163
* Tree Views *
1164
**************/
1165
treeview.view {
1166
@at-root * {
1167
-GtkTreeView-horizontal-separator: 4;
1168
-GtkTreeView-grid-line-width: 1;
1169
-GtkTreeView-grid-line-pattern: '';
1170
-GtkTreeView-tree-line-width: 1;
1171
-GtkTreeView-tree-line-pattern: '';
1172
-GtkTreeView-expander-size: 16;
1173
}
1174
border-left-color: $fill_color; // this is actually the tree lines color,
1176
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1177
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1179
&.separator {
1181
min-height: 1px + 2px * 2;
1182
color: $border_color;
1183
}
1184
&:drop(active) {
1186
border-style: solid none;
1187
border-width: 1px;
1188
border-color: $accent_color;
1189
&.after { border-top-style: none; }
1191
&.before { border-bottom-style: none; }
1193
}
1194
&.expander {
1196
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1197
-gtk-icon-transform: rotate(-90deg);
1198
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1200
&:checked { -gtk-icon-transform: unset; }
1202
color: $secondary_fg_color;
1204
&:hover, &:active { color: $fg_color; }
1206
&:disabled { color: $disabled_secondary_fg_color; }
1208
&:selected {
1210
color: $secondary_inverse_fg_color;
1211
&:hover, &:active { color: $inverse_fg_color; }
1213
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1215
}
1216
}
1217
&.progressbar { // progress bar in treeviews
1219
border-bottom: $bar_size solid $primary_color;
1220
box-shadow: none;
1221
background-color: transparent;
1222
&:selected { border-bottom-color: currentColor; }
1224
}
1225
&.trough { // progress bar trough in treeviews
1227
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1228
box-shadow: none;
1229
background-color: transparent;
1230
&:selected { border-bottom-color: $fill_color; }
1232
}
1233
header {
1235
button {
1236
@extend row.activatable;
1237
padding: 2px 6px;
1239
border-style: none solid solid none;
1240
border-width: 1px;
1241
border-color: $border_color;
1242
border-radius: 0;
1243
background-clip: border-box;
1244
&, &:hover, &:active { box-shadow: none; }
1246
&, &:disabled { background-color: $base_color; }
1248
&:last-child { border-right-style: none; }
1250
}
1251
}
1252
button.dnd,
1254
header.button.dnd { // for treeview-like derive widgets
1255
padding: 2px 6px;
1256
border-style: none solid solid;
1257
border-width: 1px;
1258
border-color: $border_color;
1259
border-radius: 0;
1260
box-shadow: none;
1261
background-color: $base_color;
1262
background-clip: border-box;
1263
color: $primary_color;
1264
}
1265
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1267
}
1268
/*********
1271
* Menus *
1272
*********/
1273
menubar,
1274
.menubar {
1275
-GtkWidget-window-dragging: true;
1276
padding: 0;
1277
// box-shadow: inset 0 -1px $border_color;
1278
background-color: $titlebar_bg_color;
1279
> menuitem {
1281
transition: $shorter_transition;
1282
min-height: 20px;
1283
padding: 4px 8px;
1284
color: $secondary_titlebar_fg_color;
1285
&:hover { // Seems like it :hover even with keyboard focus
1287
transition: none;
1288
background-color: $semi_fill_color;
1289
color: $titlebar_fg_color;
1290
}
1291
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1293
}
1294
}
1295
.csd.popup { border-radius: 2px; }
1297
menu,
1299
.menu,
1300
.context-menu {
1301
margin: 4px 0;
1302
padding: 4px 0;
1303
box-shadow: inset 0 1px $highlight_color;
1304
background-color: $base_color;
1305
border: 1px solid $border_color; // adds borders in a non composited env
1306
.csd & {
1308
border: none; // axes borders in a composited env
1309
border-radius: 2px;
1310
}
1311
menuitem {
1313
transition: $shorter_transition;
1314
min-height: 20px;
1315
min-width: 40px;
1316
padding: 4px 8px;
1317
font: initial;
1318
text-shadow: none;
1319
&:hover {
1321
transition: none;
1322
background-color: $semi_fill_color;
1323
}
1324
&:disabled { color: $disabled_fg_color; }
1326
// submenu indicators
1328
arrow {
1329
min-height: 16px;
1330
min-width: 16px;
1331
&:dir(ltr) {
1333
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1334
margin-left: 8px;
1335
}
1336
&:dir(rtl) {
1338
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1339
margin-right: 8px;
1340
}
1341
}
1342
// avoids labels color being overridden, see
1344
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1345
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1346
}
1347
// overflow arrows
1349
> arrow {
1350
min-height: 16px;
1351
min-width: 16px;
1352
padding: 4px;
1353
background-color: $base_color;
1354
color: $secondary_fg_color;
1355
&.top {
1357
margin-top: -4px;
1358
border-bottom: 1px solid $border_color;
1359
border-radius: 2px 2px 0 0;
1360
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1361
}
1362
&.bottom {
1364
margin-bottom: -4px * 3;
1365
border-top: 1px solid $border_color;
1366
border-radius: 0 0 2px 2px;
1367
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1368
}
1369
&:hover {
1371
background-image: image($semi_fill_color);
1372
color: $fg_color;
1373
}
1374
&:disabled {
1376
border-color: transparent;
1377
background-color: transparent;
1378
color: transparent;
1379
// color: $disabled_secondary_fg_color;
1380
}
1381
}
1382
separator { margin: 4px 0; }
1384
}
1385
menuitem {
1387
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1388
}
1389
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1391
// Electron/Atom render all translucent colors in opaque colors.
1392
// It's a very critical issue for this theme and should be fixed by upstream...
1393
.popup:not(.csd) menu {
1394
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1395
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1396
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1397
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1398
menuitem {
1400
color: $opaque_fg_color;
1401
&:hover { background-color: $opaque_semi_fill_color; }
1403
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1405
}
1406
// TODO: not working this, where/how i can set the accelerators?
1408
accelerator { color: $opaque_tertiary_fg_color; }
1409
}
1410
/************
1413
* Popovers *
1414
************/
1415
popover.background {
1416
transition: $shadow_transition;
1417
padding: 2px;
1418
box-shadow: $shadow_2; // TODO: this should really have a highlight
1419
background-color: $lighter_bg_color;
1420
&:backdrop { box-shadow: $shadow_1; }
1422
&, .csd & {
1424
border-style: solid;
1425
border-width: 1px;
1426
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1427
border-radius: 2px + 1px;
1428
}
1429
> stack { margin: -4px; } // remove extra padding from menu style popovers
1431
> toolbar { margin: -2px; }
1433
> list,
1435
> .view,
1436
> toolbar {
1437
border-style: none;
1438
box-shadow: none;
1439
background-color: transparent;
1440
}
1441
&.touch-selection,
1443
&.magnifier,
1444
&.osd { @extend %osd; }
1445
// entry { @extend %entry.flat; }
1447
// button.combo { @extend %combo_flat; }
1449
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1451
&.menu button,
1453
button.model {
1454
@extend %simple_flat_button;
1455
min-height: 32px;
1457
padding: 0 8px;
1458
border-radius: 2px;
1459
&:checked { @extend %selected_items; }
1461
}
1462
separator { margin: 4px 0; }
1464
list separator { margin: 0; }
1466
}
1467
/*************
1469
* Notebooks *
1470
*************/
1471
notebook {
1472
> header {
1473
border-width: 1px;
1474
border-color: $border_color;
1475
background-color: $bg_color;
1476
background-clip: border-box;
1477
&.top {
1479
border-bottom-style: solid;
1480
> tabs {
1481
margin-bottom: -1px;
1482
> tab {
1483
&:hover { box-shadow: inset 0 -2px $fill_color; }
1485
&:checked { box-shadow: inset 0 -2px $primary_color; }
1487
}
1488
}
1489
}
1490
&.bottom {
1492
border-top-style: solid;
1493
> tabs {
1494
margin-top: -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
&.left {
1505
border-right-style: solid;
1506
> tabs {
1507
margin-right: -1px;
1508
> tab {
1509
&:hover { box-shadow: inset -2px 0 $fill_color; }
1511
&:checked { box-shadow: inset -2px 0 $primary_color; }
1513
}
1514
}
1515
}
1516
&.right {
1518
border-left-style: solid;
1519
> tabs {
1520
margin-left: -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
&.top > tabs > arrow {
1531
@extend %notebook_vert_arrows;
1532
border-top-style: none;
1534
}
1535
&.bottom > tabs > arrow {
1537
@extend %notebook_vert_arrows;
1538
border-bottom-style: none;
1540
}
1541
@at-root %notebook_vert_arrows {
1543
padding-left: 4px;
1544
padding-right: 4px;
1545
&.down {
1547
margin-left: -8px;
1548
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1549
}
1550
&.up {
1552
margin-right: -8px;
1553
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1554
}
1555
}
1556
&.left > tabs > arrow {
1558
@extend %notebook_horz_arrows;
1559
border-left-style: none;
1561
}
1562
&.right > tabs > arrow {
1564
@extend %notebook_horz_arrows;
1565
border-right-style: none;
1567
}
1568
@at-root %notebook_horz_arrows {
1570
padding-top: 4px;
1571
padding-bottom: 4px;
1572
&.down {
1574
margin-top: -8px;
1575
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1576
}
1577
&.up {
1579
margin-bottom: -8px;
1580
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1581
}
1582
}
1583
> tabs > arrow {
1585
@extend %simple_flat_button;
1586
min-height: 16px;
1588
min-width: 16px;
1589
border-radius: 0;
1590
}
1591
tab {
1593
transition: $longer_transition,
1594
background-size 0,
1595
background-image 0;
1596
min-height: $small_size;
1597
min-width: $small_size;
1598
padding: $container_padding 12px;
1599
outline-offset: -6px;
1601
border-width: 1px; // for reorderable tabs
1603
border-color: transparent; //
1604
background-image: radial-gradient(circle farthest-corner at center,
1606
$primary_color 10%,
1607
transparent 0%);
1608
background-repeat: no-repeat;
1609
background-position: center;
1610
background-size: 0% 0%;
1611
color: $secondary_fg_color;
1613
font-weight: 500;
1614
&:hover {
1616
color: $fg_color;
1617
&.reorderable-page {
1619
border-color: $border_color;
1620
background-color: $alt_base_color;
1621
}
1622
}
1623
&:disabled { color: $disabled_secondary_fg_color; }
1625
&:checked {
1627
transition: $longer_transition,
1628
background-size $longer_duration $deceleration_curve,
1629
background-image $longer_duration + $ripple_duration $deceleration_curve;
1630
background-image: radial-gradient(circle farthest-corner at center,
1631
transparent 10%,
1632
transparent 0%);
1633
background-size: 1000% 1000%;
1634
color: $fg_color;
1635
&:disabled { color: $disabled_fg_color; }
1637
&.reorderable-page {
1639
border-color: $border_color;
1640
background-color: $base_color;
1641
}
1642
}
1643
// colors the button like the label, overridden otherwise
1645
button.flat {
1646
@extend %small_button;
1647
&:last-child {
1649
margin-left: $container_padding;
1650
margin-right: $container_padding - 12px;
1651
}
1652
&:first-child {
1654
margin-left: $container_padding - 12px;
1655
margin-right: $container_padding;
1656
}
1657
}
1658
}
1659
&.top,
1661
&.bottom {
1662
tabs {
1663
padding-left: 8px;
1664
padding-right: 8px;
1665
&:not(:only-child) {
1667
&:first-child { margin-left: 0; }
1668
&:last-child { margin-right: 0; }
1669
}
1670
tab {
1672
&.reorderable-page {
1673
margin: 0 -1px;
1674
border-style: none solid;
1675
}
1676
}
1677
}
1678
}
1679
&.left,
1681
&.right {
1682
tabs {
1683
padding-top: 8px;
1684
padding-bottom: 8px;
1685
&:not(:only-child) {
1687
&:first-child { margin-top: 0; }
1688
&:last-child { margin-bottom: 0; }
1689
}
1690
tab {
1692
&.reorderable-page {
1693
margin: -1px 0;
1694
border-style: solid none;
1695
}
1696
}
1697
}
1698
}
1699
}
1700
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1702
background-color: $base_color;
1703
entry:not(.search),
1705
spinbutton:not(.vertical) { @extend %entry.flat; }
1706
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1708
button.combo { @extend %combo_flat; }
1710
}
1711
}
1712
/**************
1715
* Scrollbars *
1716
**************/
1717
scrollbar {
1718
$_slider_min_length: 24px;
1719
// disable steppers
1721
@at-root * {
1722
-GtkScrollbar-has-backward-stepper: false;
1723
-GtkScrollbar-has-forward-stepper: false;
1724
}
1725
transition: $longer_transition;
1727
background-color: $base_color;
1728
background-clip: $extra_background_clip;
1729
// scrollbar border
1731
&.top { border-bottom: 1px solid $border_color; }
1732
&.bottom { border-top: 1px solid $border_color; }
1733
&.left { border-right: 1px solid $border_color; }
1734
&.right { border-left: 1px solid $border_color; }
1735
// slider
1737
slider {
1738
transition: $shorter_transition, margin 0, border-width 0;
1739
min-width: 8px;
1740
min-height: 8px;
1741
border: 4px solid transparent;
1742
border-radius: $circular_radius;
1743
background-clip: padding-box;
1744
background-color: $tertiary_fg_color;
1745
&:hover { background-color: $secondary_fg_color; }
1747
&:active { background-color: $fg_color; }
1749
&:disabled { background-color: $disabled_tertiary_fg_color; }
1751
}
1752
&.fine-tune {
1754
slider {
1755
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1756
min-width: 4px;
1757
min-height: 4px;
1758
}
1759
&.horizontal slider { margin: 2px 0; }
1761
&.vertical slider { margin: 0 2px; }
1763
}
1764
&.overlay-indicator {
1766
&:not(.dragging):not(.hovering) {
1767
border-color: transparent;
1768
background-color: transparent;
1769
slider {
1771
min-width: 4px;
1772
min-height: 4px;
1773
margin: 4px - 1px;
1774
border: 1px solid scale-alpha($base_color, $lower_opacity);
1775
}
1776
button {
1778
min-width: 4px;
1779
min-height: 4px;
1780
margin: 4px - 1px;
1781
border: 1px solid scale-alpha($base_color, $lower_opacity);
1782
border-radius: $circular_radius;
1783
background-color: $tertiary_fg_color;
1784
background-clip: padding-box;
1785
-gtk-icon-source: none;
1786
&:disabled { background-color: $disabled_tertiary_fg_color; }
1788
}
1789
&.horizontal {
1791
slider { min-width: $_slider_min_length; }
1792
button { min-width: 8px; }
1794
}
1795
&.vertical {
1797
slider { min-height: $_slider_min_length; }
1798
button { min-height: 8px; }
1800
}
1801
}
1802
&.dragging,
1804
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1805
}
1806
&.horizontal slider { min-width: $_slider_min_length; }
1808
&.vertical slider { min-height: $_slider_min_length; }
1810
// button styling
1812
button {
1813
@extend %simple_flat_button;
1814
min-width: 16px;
1816
min-height: 16px;
1817
padding: 0;
1818
border-radius: 0;
1819
}
1820
// button icons
1822
&.vertical {
1823
button {
1824
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1825
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1827
}
1828
}
1829
&.horizontal {
1831
button {
1832
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1833
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1835
}
1836
}
1837
}
1838
/**********
1841
* Switch *
1842
**********/
1843
switch {
1844
transition: $longer_transition;
1845
margin: $container_padding 0;
1846
border: 4px solid transparent;
1847
border-radius: $circular_radius;
1848
background-color: $fill_color;
1849
background-clip: padding-box;
1850
font-size: 0;
1851
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1853
&:checked {
1855
background-color: scale-alpha($accent_color, 0.5);
1856
&:disabled {
1858
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1859
color: $disabled_fg_color;
1860
}
1861
}
1862
slider {
1864
@include entry(normal);
1865
transition: $longer_transition, $shadow_transition, margin 0;
1867
min-width: $small_size;
1868
min-height: $small_size;
1869
margin: -4px 0 -4px -4px;
1870
border-radius: $circular_radius;
1871
-gtk-outline-radius: $circular_radius;
1872
}
1873
&:hover slider { @include entry(focus); }
1875
&:checked slider {
1877
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1878
animation: needs_attention $longer_duration $deceleration_curve;
1879
margin: -4px -4px -4px 0;
1880
background-color: $accent_color;
1881
color: $inverse_fg_color;
1882
}
1883
&:disabled slider { @include entry(disabled); }
1885
&:checked:disabled slider { animation: none; }
1887
row:selected & {
1889
}
1890
}
1891
/*************************
1894
* Check and Radio items *
1895
*************************/
1896
// draw regular check and radio items using our PNG assets
1897
// all assets are rendered from assets.svg. never add pngs directly
1898
// selection-mode
1900
.view.content-view.check:not(list),
1901
.content-view .tile check:not(list) {
1902
min-height: 40px;
1903
min-width: 40px;
1904
margin: 0;
1905
padding: 0;
1906
box-shadow: none;
1907
background-color: transparent;
1908
background-image: none;
1909
-gtk-icon-shadow: $shadow_1;
1910
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1912
@each $s, $as in ('', '-unchecked'),
1914
(':checked', '-checked') {
1915
&#{$s} {
1916
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1917
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1918
}
1919
}
1920
}
1921
checkbutton.text-button,
1923
radiobutton.text-button {
1924
// this is for a nice focus on check and radios text
1925
padding: 2px;
1926
outline-offset: 0;
1927
label:not(:only-child) { margin: 0 4px; }
1929
}
1930
check,
1932
radio {
1933
min-height: 24px;
1934
min-width: 24px;
1935
margin: -($large_size - 24px) / 2;
1936
padding: ($large_size - 24px) / 2;
1937
@extend %simple_flat_button;
1939
@extend %circular_button;
1941
&:checked, &:indeterminate {
1943
color: $accent_color;
1944
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
1946
}
1947
// &:only-child { margin: -12px; }
1949
row &:not(:checked):not(:indeterminate) {
1951
color: gtkalpha(currentColor, $secondary_opacity);
1952
&:hover, &:active { color: currentColor; }
1954
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
1956
}
1957
popover & {
1959
&, &:hover, &:disabled {
1960
box-shadow: none;
1961
background-image: none;
1962
}
1963
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1965
&.left:dir(rtl) {
1967
margin-left: -16px;
1968
margin-right: -8px;
1969
}
1970
&.right:dir(ltr) {
1972
margin-left: -8px;
1973
margin-right: -16px;
1974
}
1975
}
1976
menu menuitem & {
1978
transition: none;
1979
min-height: 16px;
1980
min-width: 16px;
1981
margin: 0; // this is a workaround for a menu check/radio size allocation issue
1982
padding: 0;
1983
&:dir(ltr) { margin-right: 8px; }
1985
&:dir(rtl) { margin-left: 8px; }
1987
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
1989
&, &:hover, &:disabled {
1991
box-shadow: none;
1992
// color: inherit;
1993
}
1994
}
1995
}
1996
%check,
1998
check {
1999
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2000
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2001
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2003
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2004
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2006
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2007
}
2008
%radio,
2010
radio {
2011
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2012
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2013
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2015
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2016
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2018
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2019
border-image-slice: $large_size / 2px;
2021
border-image-width: $large_size / 2;
2022
$radio_indicator: 10px / $large_size / 2;
2024
& {
2026
border-image-source: -gtk-gradient(radial,
2027
center center, 0,
2028
center center, 0.001,
2029
to($accent_color),
2030
to(transparent));
2031
}
2032
&:checked:not(:indeterminate) {
2034
border-image-source: -gtk-gradient(radial,
2035
center center, 0,
2036
center center, $radio_indicator,
2037
to($accent_color),
2038
to(transparent));
2039
}
2040
&:checked:not(:indeterminate):disabled {
2042
border-image-source: -gtk-gradient(radial,
2043
center center, 0,
2044
center center, $radio_indicator,
2045
to(scale-alpha($accent_color, $disabled_opacity)),
2046
to(transparent));
2047
}
2048
}
2049
%small_check,
2051
menu menuitem check {
2052
& {
2053
border-radius: 2px;
2054
-gtk-outline-radius: 2px;
2055
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.svg")),
2056
-gtk-recolor(url("assets/scalable/small-checkbox-unchecked-symbolic.symbolic.png")));
2057
}
2058
&:checked {
2060
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.svg")),
2061
-gtk-recolor(url("assets/scalable/small-checkbox-checked-symbolic.symbolic.png")));
2062
}
2063
&:indeterminate {
2065
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.svg")),
2066
-gtk-recolor(url("assets/scalable/small-checkbox-mixed-symbolic.symbolic.png")));
2067
}
2068
}
2069
%small_radio,
2071
menu menuitem radio {
2072
& {
2073
border-image: none;
2074
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.svg")),
2075
-gtk-recolor(url("assets/scalable/small-radio-unchecked-symbolic.symbolic.png")));
2076
}
2077
&:checked {
2079
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.svg")),
2080
-gtk-recolor(url("assets/scalable/small-radio-checked-symbolic.symbolic.png")));
2081
}
2082
&:indeterminate {
2084
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.svg")),
2085
-gtk-recolor(url("assets/scalable/small-radio-mixed-symbolic.symbolic.png")));
2086
}
2087
}
2088
// ANIMATION:
2090
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
2091
// the transformation is set on the active state and it get reset on the checked state.
2092
check:not(:checked):active { -gtk-icon-transform: rotate(90deg); }
2093
// radio:not(:checked):active { -gtk-icon-transform: scale(0); }
2095
check:not(:checked):indeterminate:active,
2097
radio:not(:checked):indeterminate:active { -gtk-icon-transform: scaleX(-1); } // instead of rotateY(180deg)
2098
check:not(:checked),
2100
radio:not(:checked) {
2101
& {
2102
transition: $longer_transition,
2103
background-size $ripple_duration $deceleration_curve,
2104
background-image $ripple_duration * 2 $deceleration_curve,
2105
-gtk-icon-transform 0;
2106
}
2107
&:active {
2109
transition: $longer_transition,
2110
background-size 0,
2111
background-image 0,
2112
-gtk-icon-transform 0;
2113
}
2114
menu menuitem & { transition: none; }
2116
}
2117
treeview.view check,
2119
treeview.view radio {
2120
padding: 0;
2121
&:hover {
2123
box-shadow: inset 0 0 0 9999px gtkalpha($fg_color, 0.05);
2124
&:disabled { box-shadow: none; }
2126
&:selected { box-shadow: inset 0 0 0 9999px gtkalpha($inverse_fg_color, 0.05); }
2128
}
2129
& {
2131
color: $secondary_fg_color;
2132
&:hover, &:active { color: $fg_color; }
2134
&:disabled { color: $disabled_secondary_fg_color; }
2136
&:checked, &:indeterminate { color: $accent_color; }
2138
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2140
}
2141
&:selected {
2143
color: $secondary_inverse_fg_color;
2144
&:hover, &:active { color: $inverse_fg_color; }
2146
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2148
&:checked, &:indeterminate { color: $accent_color; }
2150
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2152
}
2153
}
2154
treeview.view radio:checked {
2156
-gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2157
-gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png")));
2158
border-image: none;
2159
}
2160
/************
2163
* GtkScale *
2164
************/
2165
scale {
2166
// sizing
2167
$_marks_lenght: 8px;
2168
$_marks_distance: 8px;
2169
$slider_size: 24px;
2171
$marks_slider_size: 30px;
2172
$slider_margin: -($slider_size - $bar_size) / 2;
2174
$marks_slider_margin: -($marks_slider_size - $bar_size) - $slider_margin;
2175
$color_slider_margin: -($slider_size) / 2;
2177
$color_marks_slider_margin: -($marks_slider_size - 16px) - $color_slider_margin;
2178
min-height: $medium_size - $slider_size;
2180
min-width: $medium_size - $slider_size;
2181
padding: ($slider_size / 2);
2182
* { transition: $longer_transition; }
2184
// the slider is inside the trough, so to have make it bigger there's a negative margin
2186
slider {
2187
min-height: $slider_size;
2188
min-width: $slider_size;
2189
margin: $slider_margin;
2190
}
2191
// the backing bit
2193
trough {
2194
outline-offset: 2px;
2195
background-color: $fill_color;
2196
&:disabled { color: $disabled_fg_color; }
2198
}
2199
// the colored part of the backing bit
2201
highlight {
2202
background-color: $accent_color;
2203
&:disabled { background-color: transparent; }
2205
}
2206
// this is another differently styled part of the backing bit, the most relevant use case is for example
2208
// in media player to indicate how much video stream as been cached
2209
fill {
2210
background-color: $fill_color;
2211
&:disabled { background-color: transparent; }
2213
}
2214
slider {
2216
transition: all $shorter_duration $standard_curve;
2217
// border-radius: 100%;
2218
// background-color: $accent_color;
2219
background-repeat: no-repeat;
2220
background-position: center;
2221
@each $s, $as in ('', ''),
2223
(':disabled', '-disabled') {
2224
&#{$s} {
2225
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
2226
background-image: -gtk-scaled(url('#{$_url}.png'), url('#{$_url}@2.png'));
2228
}
2229
}
2230
background-size: calc(100% - 8px);
2232
&:hover { background-size: calc(100% - 4px); }
2234
&:active { background-size: calc(100% - 0px); }
2236
}
2237
// click-and-hold the slider to activate
2239
&.fine-tune {
2240
// to make the slider shrink in fine-tune mode
2241
slider { background-size: calc(100% - 12px); }
2242
}
2243
value { color: gtkalpha(currentColor, $tertiary_opacity); }
2245
marks {
2247
color: $fill_color;
2248
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2250
(bottom, bottom, top),
2251
(top, left, right),
2252
(bottom, right, left) {
2253
&.#{$marks_class} {
2254
margin-#{$marks_margin}: $_marks_distance;
2255
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2256
}
2257
}
2258
}
2259
&.horizontal {
2261
indicator {
2262
min-height: $_marks_lenght;
2263
min-width: 1px;
2264
}
2265
}
2266
&.vertical {
2268
indicator {
2269
min-height: 1px;
2270
min-width: $_marks_lenght;
2271
}
2272
}
2273
// *WARNING* scale with marks madness following
2275
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2277
('vertical', 'vert') {
2278
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
2279
('marks-after', 'marks-after:not(.marks-before)') {
2280
&.#{$dir_class}.#{$marks_class} {
2281
slider {
2282
@each $state, $state_infix in ('', ''),
2283
(':disabled', '-disabled') {
2284
&#{$state} {
2285
$_scale_asset: 'assets/scale-#{$dir_infix}-#{$marks_infix}-slider#{$state_infix}#{$asset_suffix}';
2286
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2288
}
2289
}
2290
@if $dir_class == 'horizontal' {
2292
min-height: $marks_slider_size;
2293
min-width: $slider_size;
2294
@if $marks_infix == 'marks-before' {
2296
margin-top: $marks_slider_margin;
2297
background-position: center calc(100% - 4px);
2299
&:hover { background-position: center calc(100% - 2px); }
2301
&:active { background-position: center calc(100% - 0px); }
2303
}
2304
@if $marks_infix == 'marks-after' {
2306
margin-bottom: $marks_slider_margin;
2307
background-position: center calc(4px);
2309
&:hover { background-position: center calc(2px); }
2311
&:active { background-position: center calc(0px); }
2313
}
2314
}
2315
@if $dir_class == 'vertical' {
2317
min-height: $slider_size;
2318
min-width: $marks_slider_size;
2319
@if $marks_infix == 'marks-before' {
2321
margin-left: $marks_slider_margin;
2322
background-position: calc(4px) center;
2324
&:hover { background-position: calc(2px) center; }
2326
&:active { background-position: calc(0px) center; }
2328
}
2329
@if $marks_infix == 'marks-after' {
2331
margin-right: $marks_slider_margin;
2332
background-position: calc(100% - 4px) center;
2334
&:hover { background-position: calc(100% - 2px) center; }
2336
&:active { background-position: calc(100% - 0px) center; }
2338
}
2339
}
2340
}
2341
&.fine-tune slider {
2343
@if $dir_class == 'horizontal' {
2344
@if $marks_infix == 'marks-before' { background-position: center calc(100% - 6px); }
2345
@if $marks_infix == 'marks-after' { background-position: center calc(6px); }
2347
}
2348
@if $dir_class == 'vertical' {
2350
@if $marks_infix == 'marks-before' { background-position: calc(6px) center; }
2351
@if $marks_infix == 'marks-after' { background-position: calc(100% - 6px) center; }
2353
}
2354
}
2355
}
2356
}
2357
}
2358
&.color {
2360
min-height: 0;
2361
min-width: 0;
2362
&.horizontal {
2364
padding: 0 0 12px 0;
2365
slider {
2367
&:dir(ltr), &:dir(rtl) { // specificity bump
2368
margin-bottom: $color_slider_margin;
2369
margin-top: $color_marks_slider_margin;
2370
}
2371
}
2372
}
2373
&.vertical {
2375
&:dir(ltr) {
2376
padding: 0 0 0 12px;
2377
slider {
2379
margin-left: $color_slider_margin;
2380
margin-right: $color_marks_slider_margin;
2381
}
2382
}
2383
&:dir(rtl) {
2385
padding: 0 12px 0 0;
2386
slider {
2388
margin-right: $color_slider_margin;
2389
margin-left: $color_marks_slider_margin;
2390
}
2391
}
2392
}
2393
}
2394
}
2395
/*****************
2398
* Progress bars *
2399
*****************/
2400
progressbar {
2401
// sizing
2402
&.horizontal {
2403
trough,
2404
progress { min-height: $bar_size; }
2405
}
2406
&.vertical {
2408
trough,
2409
progress { min-width: $bar_size; }
2410
}
2411
// FIXME: insensitive state missing and some other state should be set probably
2413
color: $tertiary_fg_color;
2414
font-size: smaller;
2415
trough { background-color: scale-alpha($primary_color, $lower_opacity); }
2417
progress { background-color: $primary_color; }
2419
&.osd { // progressbar.osd used for epiphany page loading progress
2421
// min-width: $bar_size;
2422
// min-height: $bar_size;
2423
// background-color: transparent;
2424
// trough { background-color: transparent; }
2426
// progress { background-color: $primary_color; }
2428
}
2429
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2431
}
2432
/*************
2435
* Level Bar *
2436
*************/
2437
levelbar {
2438
block {
2439
min-width: $medium_size;
2440
min-height: $bar_size;
2441
}
2442
&.vertical block {
2444
min-width: $bar_size;
2445
min-height: $medium_size;
2446
}
2447
trough {
2449
padding: 2px;
2450
border-radius: 2px;
2451
@include entry(normal);
2453
&:disabled { @include entry(disabled); }
2455
}
2456
&.horizontal.discrete {
2458
block { margin: 0 1px; }
2459
trough { padding: 2px 1px; }
2461
}
2462
&.vertical.discrete {
2464
block { margin: 1px 0; }
2465
trough { padding: 1px 2px; }
2467
}
2468
block {
2470
&.low { background-color: $warning_color; }
2471
&.high,
2473
&:not(.empty) { background-color: $primary_color; }
2474
&.full { background-color: $success_color; }
2476
&.empty {
2478
background-color: $fill_color;
2479
color: $disabled_fg_color;
2480
}
2481
}
2482
}
2483
/****************
2486
* Print dialog *
2487
*****************/
2488
printdialog {
2489
paper {
2490
padding: 0;
2491
border: 1px solid $border_color;
2492
background-color: $base_color;
2493
color: $fg_color;
2494
}
2495
.dialog-action-box { margin: 12px; }
2497
}
2498
/**********
2501
* Frames *
2502
**********/
2503
frame > border,
2504
.frame {
2505
margin: 0;
2506
padding: 0;
2507
border: 1px solid $border_color;
2508
border-radius: 0;
2509
box-shadow: none;
2510
&.flat { border-style: none; }
2512
}
2513
frame.flat > border { @extend .frame.flat; } // for backporting
2515
actionbar > revealer > box {
2517
padding: $container_padding;
2518
border-top: 1px solid $border_color;
2519
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2521
}
2522
scrolledwindow {
2524
viewport.frame { // avoid double borders when viewport inside scrolled window
2525
border-style: none;
2526
}
2527
// This is used when content is touch-dragged past boundaries.
2529
// draws a box on top of the content, the size changes programmatically.
2530
@at-root overshoot {
2531
&.top { @include overshoot(top); }
2532
&.bottom { @include overshoot(bottom); }
2534
&.left { @include overshoot(left); }
2536
&.right { @include overshoot(right); }
2538
}
2539
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2541
@at-root undershoot {
2542
&.top { @include undershoot(top); }
2543
&.bottom { @include undershoot(bottom); }
2545
&.left { @include undershoot(left); }
2547
&.right { @include undershoot(right); }
2549
}
2550
@at-root junction { // the small square between two scrollbars
2552
border-style: solid none none solid;
2553
border-width: 1px;
2554
border-color: $border_color;
2555
background-color: $base_color;
2556
&:dir(rtl) { border-style: solid solid none none; }
2558
}
2559
}
2560
// vbox and hbox separators
2562
separator {
2563
min-width: 1px;
2564
min-height: 1px;
2565
background-color: $border_color;
2566
}
2567
%hide_separators {
2569
min-width: 0;
2570
min-height: 0;
2571
background-color: transparent;
2572
}
2573
/*********
2576
* Lists *
2577
*********/
2578
list {
2579
border-color: $border_color;
2580
background-color: $base_color;
2581
row { padding: 2px; }
2583
}
2584
// FIXME
2586
$row_transition: $longer_transition, background-color 0, color 0;
2587
row {
2589
&.activatable {
2590
transition: $row_transition,
2591
background-size $ripple_duration $deceleration_curve,
2592
background-image $ripple_duration * 2 $deceleration_curve;
2593
box-shadow: inset 0 0 0 9999px transparent;
2594
background-image: radial-gradient(circle farthest-corner at center,
2595
transparent 10%,
2596
transparent 0%);
2597
background-repeat: no-repeat;
2598
background-position: center;
2599
background-size: 1000% 1000%;
2600
&:hover {
2602
transition: $row_transition,
2603
box-shadow 0,
2604
background-size $ripple_duration $deceleration_curve,
2605
background-image $ripple_duration * 2 $deceleration_curve;
2606
box-shadow: inset 0 0 0 9999px $row_fill_color;
2607
}
2608
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2610
&:active {
2611
transition: $row_transition,
2612
background-size 0,
2613
background-image 0;
2614
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2615
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2616
background-image: radial-gradient(circle farthest-corner at center,
2617
$semi_fill_color 10%,
2618
transparent 0%);
2619
background-size: 0% 0%;
2620
}
2621
}
2622
&:selected { @extend %selected_items; }
2624
}
2625
/*********************
2628
* App Notifications *
2629
*********************/
2630
.app-notification {
2631
@extend %osd;
2632
@extend toolbar.osd;
2634
margin: 8px;
2636
button { @extend %button_basic.flat; }
2638
&.frame,
2640
border { border-style: none; }
2641
}
2642
/*************
2645
* Expanders *
2646
*************/
2647
expander {
2648
arrow {
2649
transition: all $shorter_duration $standard_curve;
2650
min-width: 16px;
2651
min-height: 16px;
2652
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2653
-gtk-icon-transform: rotate(-90deg);
2654
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2656
&:checked { -gtk-icon-transform: unset; }
2658
color: $secondary_fg_color;
2660
&:hover, &:active { color: $fg_color; }
2662
&:disabled { color: $disabled_secondary_fg_color; }
2664
&:selected {
2666
color: $secondary_inverse_fg_color;
2667
&:hover, &:active { color: $inverse_fg_color; }
2669
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2671
}
2672
}
2673
}
2674
/************
2677
* Calendar *
2678
************/
2679
calendar {
2680
padding: 1px;
2681
border: 1px solid $border_color;
2682
color: $fg_color;
2683
&:disabled { color: $disabled_fg_color; }
2685
&:selected {
2687
@extend %selected_items;
2688
border-radius: 2px + 1px;
2690
}
2691
&.header {
2693
border-style: none none solid;
2694
border-radius: 0;
2695
}
2696
&.button { @extend %simple_flat_button; }
2698
&.highlight {
2700
color: gtkalpha(currentColor, $tertiary_opacity);
2701
font-weight: 500;
2702
}
2703
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2705
}
2706
/***********
2709
* Dialogs *
2710
***********/
2711
messagedialog { // Message Dialog styling
2712
&.background { background-color: $lighter_bg_color; }
2713
.titlebar {
2715
min-height: $small_size;
2716
border-style: none;
2717
box-shadow: inset 0 1px $highlight_color;
2718
background-color: $lighter_bg_color;
2719
color: $fg_color;
2720
&:backdrop { color: $secondary_fg_color; }
2722
}
2723
&.csd { // rounded bottom border styling for csd version
2725
&.background {
2726
// bigger radius for better antialiasing
2727
border-bottom-left-radius: 2px;
2728
border-bottom-right-radius: 2px;
2729
}
2730
.dialog-action-area button {
2732
padding: 8px 16px;
2733
border-top: 1px solid $border_color;
2734
border-radius: 0;
2735
@extend %simple_flat_button;
2737
&:first-child { border-bottom-left-radius: 2px; }
2739
&:last-child { border-bottom-right-radius: 2px; }
2741
}
2742
}
2743
}
2744
filechooser {
2746
.dialog-action-box { border-top: 1px solid $border_color; }
2747
#pathbarbox {
2749
border-bottom: 1px solid $border_color;
2750
background-color: $bg_color;
2751
}
2752
}
2753
filechooserbutton:drop(active) {
2755
box-shadow: none;
2756
}
2757
/***********
2760
* Sidebar *
2761
***********/
2762
.sidebar {
2763
border-style: none;
2764
background-color: $lighter_bg_color;
2765
@at-root %sidebar_left,
2767
&:dir(ltr),
2768
&.left,
2769
&.left:dir(rtl) {
2770
border-right: 1px solid $border_color;
2771
border-left-style: none;
2772
}
2773
@at-root %sidebar_right,
2775
&:dir(rtl),
2776
&.right {
2777
border-left: 1px solid $border_color;
2778
border-right-style: none;
2779
}
2780
list { background-color: transparent; }
2782
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2784
}
2785
stacksidebar {
2787
&.sidebar {
2788
&:dir(ltr),
2789
&.left,
2790
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2791
&:dir(rtl),
2793
&.right { list { @extend %sidebar_right; }}
2794
}
2795
row {
2797
padding: 10px 4px;
2798
> label {
2800
padding-left: 6px;
2801
padding-right: 6px;
2802
}
2803
&.needs-attention > label { @extend %needs_attention; }
2805
}
2806
}
2807
/****************
2810
* File chooser *
2811
****************/
2812
placessidebar {
2813
> viewport.frame { border-style: none; }
2814
list { padding: (4px - 3px) 0 4px; }
2816
row {
2818
// Needs overriding of the GtkListBoxRow padding
2819
min-height: 32px;
2820
margin: -1px 0; // Remove unknown margins
2821
padding: 0;
2822
// Using margins/padding directly in the SidebarRow
2824
// will make the animation of the new bookmark row jump
2825
> revealer { padding: 0 12px; }
2826
&:selected { color: $inverse_fg_color; }
2828
&:disabled { color: $disabled_fg_color; }
2830
image.sidebar-icon {
2832
opacity: $tertiary_opacity; // dim the device icons
2833
&:dir(ltr) { padding-right: 8px; }
2835
&:dir(rtl) { padding-left: 8px; }
2836
}
2837
label.sidebar-label {
2839
&:dir(ltr) { padding-right: 2px; }
2840
&:dir(rtl) { padding-left: 2px; }
2841
}
2842
@at-root button.sidebar-button {
2844
@extend %simple_flat_button;
2845
@extend %small_button;
2847
row:selected & {
2849
}
2850
}
2851
&.sidebar-placeholder-row {
2853
min-height: 2px;
2854
padding: 0 8px;
2855
background-image: image($accent_color);
2856
background-clip: content-box;
2857
}
2858
&.sidebar-new-bookmark-row { color: $accent_color; }
2860
&:drop(active):not(:disabled) {
2862
box-shadow: inset 0 0 0 2px $accent_color;
2863
&:selected {
2865
// background-color: $accent_color;
2866
// color: $inverse_fg_color;
2867
}
2868
}
2869
}
2870
}
2871
placesview {
2873
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2874
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2876
// this selects the "connect to server" label
2878
> actionbar > revealer > box > label {
2879
padding-left: 8px;
2880
padding-right: 8px;
2881
}
2882
}
2883
/*********
2886
* Paned *
2887
*********/
2888
paned {
2889
> separator {
2890
min-width: 1px;
2891
min-height: 1px;
2892
-gtk-icon-source: none; // defeats the ugly default handle decoration
2893
border-style: none; // just to be sure
2894
background-color: transparent;
2895
// workaround, using background istead of a border since the border will get rendered twice (?)
2896
background-image: image($border_color);
2897
background-size: 1px 1px;
2898
background-clip: content-box; // avoids borders image being rendered twice (?)
2899
&.wide {
2901
min-width: 6px;
2902
min-height: 6px;
2903
background-color: $bg_color;
2904
background-image: image($border_color), image($border_color);
2905
background-size: 1px 1px, 1px 1px;
2906
}
2907
}
2908
&.horizontal > separator {
2910
background-repeat: repeat-y;
2911
&:dir(ltr) {
2913
margin: 0 -8px 0 0;
2914
padding: 0 8px 0 0;
2915
background-position: left;
2916
}
2917
&:dir(rtl) {
2919
margin: 0 0 0 -8px;
2920
padding: 0 0 0 8px;
2921
background-position: right;
2922
}
2923
&.wide {
2925
margin: 0;
2926
padding: 0;
2927
background-repeat: repeat-y, repeat-y;
2928
background-position: left, right;
2929
}
2930
}
2931
&.vertical > separator {
2933
margin: 0 0 -8px 0;
2934
padding: 0 0 8px 0;
2935
background-repeat: repeat-x;
2936
background-position: top;
2937
&.wide {
2939
margin: 0;
2940
padding: 0;
2941
background-repeat: repeat-x, repeat-x;
2942
background-position: bottom, top;
2943
}
2944
}
2945
}
2946
/**************
2949
* GtkInfoBar *
2950
**************/
2951
infobar {
2952
border-style: none;
2953
&.info { background-color: $info_bg_color; }
2955
&.question { background-color: $question_bg_color; }
2957
&.warning { background-color: $warning_bg_color; }
2959
&.error { background-color: $error_bg_color; }
2961
&.info,
2963
&.question,
2964
&.warning,
2965
&.error {
2966
> label, & { color: $inverse_fg_color; }
2967
button { @extend %button_selected; }
2969
selection {}
2971
*:link { @extend %link_selected; }
2973
}
2974
}
2975
/************
2978
* Tooltips *
2979
************/
2980
tooltip {
2981
&.background {
2982
// background-color needs to be set this way otherwise it gets drawn twice
2983
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2984
box-shadow: inset 0 1px $highlight_color;
2985
background-color: scale-alpha($base_color, $higher_opacity);
2986
}
2987
// @extend %osd;
2989
// padding: 4px; /* not working */
2991
border-radius: 2px;
2992
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2993
&:not(.csd):not(.unity-csd) {
2995
border: 1px solid $border_color;
2996
border-radius: 2px + 1px;
2997
background-clip: $extra_background_clip;
2998
}
2999
// FIXME: we need a border or tooltips vanish on black background.
3001
decoration { background-color: transparent; }
3002
label {
3004
// tooltip label already seems to have 6px margins
3005
min-height: 32px - 6px * 2;
3006
padding: 0 8px - 6px;
3007
}
3008
* {
3010
// workaround for Eclipse.
3011
// do not include any declaration here.
3012
// padding: 0;
3013
// background-color: transparent;
3014
// color: inherit;
3015
}
3016
}
3017
/*****************
3020
* Color Chooser *
3021
*****************/
3022
colorswatch {
3023
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3024
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3025
// applied to the overlay box.
3026
// base color corners rounding
3028
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3029
// sports a bigger radius.
3030
// nth-child is needed by the custom color strip.
3031
&.top {
3033
border-top-left-radius: $material_radius + 0.5px;
3034
border-top-right-radius: $material_radius + 0.5px;
3035
overlay {
3037
border-top-left-radius: $material_radius;
3038
border-top-right-radius: $material_radius;
3039
}
3040
}
3041
&.bottom {
3043
border-bottom-left-radius: $material_radius + 0.5px;
3044
border-bottom-right-radius: $material_radius + 0.5px;
3045
overlay {
3047
border-bottom-left-radius: $material_radius;
3048
border-bottom-right-radius: $material_radius;
3049
}
3050
}
3051
&.left,
3053
&:first-child:not(.top) {
3054
border-top-left-radius: $material_radius + 0.5px;
3055
border-bottom-left-radius: $material_radius + 0.5px;
3056
overlay {
3058
border-top-left-radius: $material_radius;
3059
border-bottom-left-radius: $material_radius;
3060
}
3061
}
3062
&.right,
3064
&:last-child:not(.bottom) {
3065
border-top-right-radius: $material_radius + 0.5px;
3066
border-bottom-right-radius: $material_radius + 0.5px;
3067
overlay {
3069
border-top-right-radius: $material_radius;
3070
border-bottom-right-radius: $material_radius;
3071
}
3072
}
3073
&.dark overlay { color: $light_fg_color; }
3075
&.light overlay { color: $dark_fg_color; }
3077
&.dark { color: $light_fg_color; } // for focus ring
3079
&.light { color: $dark_fg_color; } // for focus ring
3081
&:drop(active) {
3083
box-shadow: none;
3084
&.light overlay {
3086
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3087
}
3088
&.dark overlay {
3090
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3091
}
3092
}
3093
overlay {
3095
transition: $shadow_transition;
3096
box-shadow: $shadow_1;
3097
&:hover { box-shadow: $shadow_2; }
3099
}
3100
&#add-color-button {
3102
border-radius: $material_radius $material_radius 0 0;
3103
color: $light_fg_color; // for focus ring
3104
&:only-child { border-radius: $material_radius; }
3106
overlay {
3108
background-image: linear-gradient(to right,
3109
$error_bg_color 25%,
3110
$warning_bg_color 25%, $warning_bg_color 50%,
3111
$info_bg_color 50%, $info_bg_color 75%,
3112
$question_bg_color 75%);
3113
color: $light_fg_color;
3114
}
3115
}
3116
&:disabled {
3118
opacity: $disabled_opacity;
3119
overlay { box-shadow: none; }
3121
}
3122
row:selected & {
3124
}
3125
&#editor-color-sample {
3127
border-radius: $material_radius + 0.5px;
3128
overlay { border-radius: $material_radius; }
3130
// overlay:hover { box-shadow: $shadow_1; }
3132
}
3133
}
3134
// colorscale popup
3136
colorchooser .popover.osd {
3137
transition: $shadow_transition;
3138
border-radius: 2px;
3139
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3140
background-color: $base_color;
3141
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3143
spinbutton:not(.vertical) { @extend %entry.flat; }
3145
}
3146
/********
3149
* Misc *
3150
********/
3151
// content view (grid/list)
3152
.content-view {
3153
background-color: $bg_color;
3154
// &:hover { -gtk-icon-effect: highlight; }
3156
rubberband, .rubberband { @extend rubberband; }
3158
}
3159
.scale-popup {
3161
.osd & { @extend %osd; }
3162
.osd & button.flat { // FIXME: quick hack, redo properly
3164
}
3165
button { // +/- buttons on GtkVolumeButton popup
3167
}
3168
}
3169
/**********************
3172
* Window Decorations *
3173
**********************/
3174
decoration {
3175
transition: $shadow_transition;
3176
border-radius: 2px 2px 0 0;
3177
box-shadow: $shadow_4, 0 16px 16px transparent;
3178
// FIXME rationalize shadows
3180
// this is used for the resize cursor area
3182
margin: 8px;
3183
&:backdrop {
3185
// the transparent shadow here is to enforce that the shadow extents don't
3186
// change when we go to backdrop, to prevent jumping windows.
3187
// The biggest shadow should be in the same order then in the active state
3188
// or the jumping will happen during the transition.
3189
box-shadow: $shadow_2, 0 16px 16px transparent;
3190
}
3191
.maximized &,
3193
.fullscreen &,
3194
.tiled & { border-radius: 0; }
3195
.popup & { box-shadow: none; }
3197
// server-side decorations as used by mutter
3199
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3200
.csd.popup & {
3202
border-radius: 2px;
3203
box-shadow: $shadow_2;
3204
}
3205
tooltip.csd & {
3207
border-radius: 2px;
3208
box-shadow: $shadow_2;
3209
}
3210
messagedialog.csd & {
3212
border-radius: 2px;
3213
// box-shadow: $shadow_4, 0 16px 16px transparent;
3214
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3216
}
3217
.solid-csd & {
3219
margin: 0;
3220
// padding: 4px;
3221
border-radius: 0;
3222
box-shadow: none;
3223
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3224
background-color: $titlebar_bg_color;
3225
}
3226
}
3227
// Window Close button
3229
button.titlebutton {
3230
// @extend %simple_flat_button;
3231
@extend %circular_button;
3233
.selection-mode & {
3235
}
3236
}
3237
// catch all extend :)
3240
%selected_items {
3242
background-color: $primary_color;
3243
@at-root %nobg_selected_items, & {
3245
color: $inverse_fg_color;
3246
&:disabled { color: $disabled_inverse_fg_color; }
3248
}
3249
}
3250
.monospace { font-family: monospace; }
3252
/**********************
3255
* Touch Copy & Paste *
3256
**********************/
3257
// touch selection handlebars for the Popover.osd above
3258
cursor-handle {
3259
border-radius: $circular_radius;
3260
background-color: $accent_color;
3261
background-image: none;
3262
&.top:dir(ltr), &.bottom:dir(rtl) {
3264
padding-left: 6px;
3265
border-top-right-radius: 0;
3266
}
3267
&.bottom:dir(ltr), &.top:dir(rtl) {
3269
padding-right: 6px;
3270
border-top-left-radius: 0;
3271
}
3272
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3274
-GtkWidget-text-handle-width: 24;
3275
-GtkWidget-text-handle-height: 30;
3276
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3278
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3279
url('#{$_url}@2.png'));
3280
}
3281
}
3282
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3284
// shortcut window keys
3286
.keycap {
3287
min-width: 28px - 8px * 2;
3288
min-height: 28px - 2px;
3289
margin-top: 2px;
3290
padding-bottom: 2px;
3291
padding-left: 8px;
3292
padding-right: 8px;
3293
border: solid 1px $border_color;
3295
border-radius: 2px + 1px;
3296
box-shadow: inset 0 -2px $border_color;
3297
background-color: $base_color;
3298
color: $fg_color;
3299
font-size: smaller;
3300
}
3301
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3303
transition: $longer_transition;
3304
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3305
caret-color: $accent_color;
3306
}
3307
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3309
stackswitcher button.circular,
3311
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3312
min-width: $medium_size;
3313
min-height: $medium_size;
3314
padding: 0;
3315
}
3316