ASCII text
1
* {
2
// padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 4;
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
border-radius: $circular_radius;
393
-gtk-outline-radius: $circular_radius;
394
}
395
&.text-button.image-button {
397
border-radius: 2px;
398
-gtk-outline-radius: 2px;
399
label {
401
&:first-child {
402
margin-left: 16px - ($medium_size - 24px) / 2;
403
margin-right: 2px;
404
}
405
&:last-child {
407
margin-left: 2px;
408
margin-right: 16px - ($medium_size - 24px) / 2;
409
}
410
&:only-child {
412
margin-left: 16px - ($medium_size - 24px) / 2;
413
margin-right: 16px - ($medium_size - 24px) / 2;
414
}
415
}
416
image:not(:only-child) {
418
&:first-child { margin-left: (24px - 16px) / 2; }
419
&:last-child { margin-right: (24px - 16px) / 2; }
421
}
422
}
423
.linked > & { @extend %linked; }
425
.linked.vertical > & { @extend %linked_vertical; }
427
.linked > &.flat,
429
.linked.vertical > &.flat {
430
border-radius: 2px;
431
&.image-button {
433
border-radius: $circular_radius;
434
-gtk-outline-radius: $circular_radius;
435
}
436
&.text-button.image-button {
438
border-radius: 2px;
439
-gtk-outline-radius: 2px;
440
}
441
}
442
&:drop(active) {
444
// box-shadow: inset 0 0 0 2px $accent_color;
445
}
446
}
447
@at-root %button_selected, row:selected & {
449
&:disabled { color: $disabled_secondary_inverse_fg_color; }
450
}
451
// big standalone buttons like in Documents pager
453
&.osd {
454
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
455
&.image-button { padding: ($large_size - 24px) / 2; }
457
&:disabled { opacity: 0; }
459
}
460
// overlay / OSD style
462
@at-root %osd_button,
463
.osd & {
464
}
465
// Suggested and Destructive Action buttons
467
@each $b_type, $b_color in (suggested-action, $suggested_color),
468
(destructive-action, $destructive_color) {
469
&.#{$b_type} {
470
background-color: $b_color;
471
color: $inverse_fg_color;
472
&:disabled { @include button(disabled, $b_color); }
474
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
476
&.flat {
478
background-color: transparent;
479
color: $b_color;
480
&:disabled { @include button(flat-disabled, $b_color); }
482
&:checked { background-color: $fill_color; }
484
}
485
.osd & {
487
}
488
}
489
}
490
.stack-switcher > & {
492
// to position the needs attention dot, padding is added to the button
493
// child, a label needs just lateral padding while an icon needs vertical
494
// padding added too.
495
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
497
> label {
499
padding-left: 6px; // label padding
500
padding-right: 6px; //
501
}
502
> image {
504
padding-left: 6px; // image padding
505
padding-right: 6px; //
506
padding-top: 3px; //
507
padding-bottom: 3px; //
508
}
509
&.text-button {
511
// compensate text-button paddings
512
padding-left: 16px - 6px;
513
padding-right: 16px - 6px;
514
}
515
&.image-button {
517
// we want image buttons to have a 1:1 aspect ratio, so compensation
518
// of the padding added to the GtkImage is needed
519
padding-left: ($medium_size - 16px) / 2 - 6px;
520
padding-right: ($medium_size - 16px) / 2 - 6px;
521
}
522
&.needs-attention {
524
> label,
525
> image { @extend %needs_attention; }
526
&:checked {
528
> label,
529
> image {
530
animation: none;
531
background-image: none;
532
}
533
}
534
}
535
}
536
// hide separators
538
separator {
539
min-width: 0;
540
min-height: 0;
541
background-color: transparent;
542
}
543
// &.font,
545
// &.file { separator { background-color: transparent; }}
546
// &.font { > box > box > label { font-weight: bold; }}
548
// inline-toolbar buttons
550
.inline-toolbar & {
551
// @extend %button_basic.flat;
552
&:not(.text-button) { @extend %circular_button; }
554
}
555
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
557
@at-root %circular_button,
559
&.close,
560
&.circular { // The Bloody Circul Button
561
border-radius: $circular_radius;
562
-gtk-outline-radius: $circular_radius;
563
// label { padding: 0; }
565
}
566
@at-root %small_button {
568
min-height: $small_size;
569
min-width: $small_size;
570
padding: 0;
571
border-radius: $circular_radius;
572
-gtk-outline-radius: $circular_radius;
573
}
574
}
575
%needs_attention {
577
animation: needs_attention $longer_duration $deceleration_curve forwards;
578
background-repeat: no-repeat;
579
background-position: right 3px;
580
background-size: 6px 6px;
581
&:dir(rtl) { background-position: left 3px; }
583
}
584
// all the following is for the +|- buttons on inline toolbars, that way
586
// should really be deprecated...
587
.inline-toolbar toolbutton > button { // redefining the button look is
588
// needed since those are flat...
589
}
590
// More inline toolbar buttons
592
toolbar.inline-toolbar toolbutton {
593
// > button.flat { @extend %linked_middle; }
594
// &:first-child > button.flat { @extend %linked:first-child; }
596
// &:last-child > button.flat { @extend %linked:last-child; }
598
// &:only-child > button.flat { @extend %linked:only-child; }
600
}
601
%linked_middle {
603
border-radius: 0;
604
-gtk-outline-radius: 2px;
605
}
606
%linked {
608
@extend %linked_middle;
609
&:first-child {
611
border-top-left-radius: 2px;
612
border-bottom-left-radius: 2px;
613
}
614
&:last-child {
616
border-top-right-radius: 2px;
617
border-bottom-right-radius: 2px;
618
}
619
&:only-child {
621
border-radius: 2px;
622
}
623
}
624
%linked_vertical_middle {
626
border-radius: 0;
627
-gtk-outline-radius: 2px;
628
}
629
%linked_vertical{
631
@extend %linked_vertical_middle;
632
&:first-child {
634
border-top-left-radius: 2px;
635
border-top-right-radius: 2px;
636
}
637
&:last-child {
639
border-bottom-left-radius: 2px;
640
border-bottom-right-radius: 2px;
641
}
642
&:only-child {
644
border-radius: 2px;
645
}
646
}
647
/* menu buttons */
649
modelbutton.flat,
650
.menuitem.button.flat {
651
min-height: $menuitem_size;
652
padding: 0 8px;
653
border-radius: 2px;
654
color: inherit;
655
@extend %simple_flat_button;
657
&:selected { @extend %selected_items; }
659
check,
661
radio {
662
box-shadow: none;
663
background-image: none;
664
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
666
&:last-child { margin-left: -8px; margin-right: -16px; }
668
&:first-child { margin-left: -16px; margin-right: -8px; }
670
}
671
}
672
modelbutton.flat arrow {
674
background: none;
675
&:hover { background: none; }
677
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
679
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
681
}
682
button.color {
684
min-height: $small_size;
685
min-width: $small_size;
686
padding: $container_padding;
687
colorswatch:only-child {
689
// &, overlay { border-radius: 0; }
690
}
691
}
692
/*********
695
* Links *
696
*********/
697
*:link {
698
&, &:hover, &:active { color: $link_color; }
699
&:visited {
701
&, &:hover, &:active { color: $visited_link_color; }
702
}
703
@at-root %link_selected,
705
&:selected,
706
*:selected & { color: $inverse_fg_color; }
707
}
708
button:link,
710
button:visited {
711
@extend *:link;
712
> label { text-decoration-line: underline; }
714
}
715
/*****************
717
* GtkSpinButton *
718
*****************/
719
spinbutton {
720
&:not(.vertical) {
721
// in this horizontal configuration, the whole spinbutton
722
// behaves as the entry, so we extend the entry styling
723
// and nuke the style on the internal entry
724
@extend %entry;
725
padding: 0;
727
%spinbutton_entry,
729
entry {
730
min-width: $large_size - 8px * 2;
731
// reset all the other props since the spinbutton node is styled here
732
margin: 0;
733
border-image: none;
734
border-radius: 0;
735
box-shadow: none;
736
background-color: transparent;
737
//
738
// This will help to simplify spinbutton's code, but unfortunatelly
739
// doesn't work properly in :dir(rtl). It needs z-index property.
740
//
741
// min-width: $large_size - 8px;
742
//
743
// $spinbuttons_width: $small_size * 2 + $container_padding * 3;
744
//
745
// &:dir(ltr) {
746
// margin-right: -$spinbuttons_width;
747
// padding-right: $spinbuttons_width;
748
// }
749
//
750
// &:dir(rtl) {
751
// margin-left: -$spinbuttons_width;
752
// padding-left: $spinbuttons_width;
753
// }
754
}
755
button {
757
// margin: $container_padding;
758
border: solid $container_padding transparent;
759
@extend %simple_flat_button;
761
@extend %small_button;
763
&.up:dir(ltr),
765
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
766
&.up:dir(rtl),
768
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
769
}
770
}
771
// OSD horizontal
773
.osd &:not(.vertical) {
774
button {
775
}
776
}
777
// Vertical
779
&.vertical {
780
// in the vertical configuration, we treat the spinbutton
781
// as a box, and tweak the style of the entry in the middle
782
// so that it's linked
783
// FIXME: this should not be set at all, but otherwise it gets the wrong
785
// color
786
&:disabled { color: $disabled_fg_color; }
787
&:drop(active) {
789
box-shadow: none;
790
}
791
entry {
793
min-height: $medium_size;
794
min-width: $large_size;
795
padding: 0;
796
}
797
button {
799
min-height: $medium_size;
800
min-width: $large_size;
801
padding: 0;
802
@extend %simple_flat_button;
804
&.up { border-radius: 2px 2px 0 0; }
806
&.down { border-radius: 0 0 2px 2px; }
808
}
809
}
810
// OSD vertical
812
.osd &.vertical button:first-child {
813
}
814
// Misc
816
treeview &:not(.vertical) {
817
min-height: 0;
818
border-style: none;
819
border-radius: 0;
820
entry {
822
min-height: 0;
823
padding: 1px 2px;
824
}
825
}
826
}
827
/**************
830
* ComboBoxes *
831
**************/
832
combobox {
833
arrow {
834
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
835
min-height: 16px;
836
min-width: 16px;
837
}
838
button.combo:checked { transition: none; } // workaround for menuitem selection
840
button.combo cellview {
842
&:dir(ltr) { margin-left: 8px - ($medium_size - 16px) / 2; }
843
&:dir(rtl) { margin-right: 8px - ($medium_size - 16px) / 2; }
844
}
845
#gtk-combobox-popup-menu {
847
padding: 2px 0;
848
menuitem {
850
min-height: $medium_size - 2px * 2;
851
padding: 0 8px;
852
}
853
}
854
&.linked {
856
button:nth-child(2) {
857
&:dir(ltr) { @extend %linked:last-child; }
858
&:dir(rtl) { @extend %linked:first-child; }
859
}
860
}
861
&:drop(active) { // FIXME: untested
863
box-shadow: none;
864
// button.combo { @extend %button_basic:drop(active); }
866
}
867
}
868
.linked > combobox > box > button.combo {
870
// the combo is a composite widget so the way we do button linking doesn't
871
// work, special case needed. See
872
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
873
&:dir(ltr),
875
&:dir(rtl) { @extend %linked_middle; } // specificity bump
876
}
877
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
879
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
880
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
881
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
883
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child; }
884
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
885
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
886
%combo_flat {
888
border-radius: 0;
889
background-image: none;
890
font-weight: inherit;
891
@include entry(flat-normal);
893
&:hover { box-shadow: inset 0 -2px $fill_color; }
895
&:checked {
897
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
898
$primary_color 100%,
899
transparent 0%)
900
0 0 2 / 0 0 2px;
901
}
902
&:disabled { color: $disabled_fg_color; }
904
}
905
/************
908
* Toolbars *
909
************/
910
toolbar {
911
-GtkWidget-window-dragging: true;
912
padding: $container_padding / 2;
913
background-color: $bg_color;
914
button { @extend %button_basic.flat; }
916
// on OSD
918
.osd & { background-color: transparent; }
919
// stand-alone OSD toolbars
921
&.osd {
922
transition: $shadow_transition;
923
padding: $container_padding;
924
border-radius: 2px;
925
box-shadow: $shadow_2, inset 0 1px $highlight_color;
926
background-color: $base_color;
927
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
929
&.left,
931
&.right,
932
&.top,
933
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
934
}
935
// toolbar separators
937
&.horizontal separator { margin: $container_padding / 2; }
938
&.vertical separator { margin: $container_padding / 2; }
939
&:not(.inline-toolbar):not(.osd) {
941
scale,
942
entry,
943
spinbutton,
944
button { margin: $container_padding / 2; }
945
.linked entry,
947
.linked spinbutton,
948
.linked button {
949
&:not(:first-child) { margin-left: 0; }
950
&:not(:last-child) { margin-right: 0; }
951
}
952
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
954
}
955
}
956
// searchbar, location-bar & inline-toolbar
958
.inline-toolbar {
959
padding: $container_padding;
960
border-style: solid;
961
border-width: 0 1px 1px;
962
border-color: $border_color;
963
background-color: $alt_base_color;
964
}
965
searchbar,
967
.location-bar {
968
padding: $container_padding;
969
border-style: solid;
970
border-width: 0 0 1px;
971
border-color: $border_color;
972
background-color: $bg_color;
973
background-clip: border-box;
974
}
975
/***************
978
* Header bars *
979
***************/
980
%titlebar,
981
headerbar {
982
transition: background-color $shorter_duration $deceleration_curve;
983
min-height: $large_size;
984
padding: 0 $container_padding;
985
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
986
background-color: $titlebar_bg_color;
987
color: $titlebar_fg_color;
988
&:disabled :not(button) > label { color: $disabled_titlebar_fg_color; }
990
&:backdrop {
992
color: $secondary_titlebar_fg_color;
993
&:disabled :not(button) > label { color: $disabled_secondary_titlebar_fg_color; }
995
}
996
.title {
998
transition: $longer_transition;
999
padding: 0 12px;
1000
font-weight: bold;
1001
}
1002
.subtitle {
1004
transition: $longer_transition;
1005
padding: 0 12px;
1006
font-size: smaller;
1007
@extend .dim-label;
1009
}
1010
button:not(.suggested-action):not(.destructive-action) {
1012
@extend %button_basic.flat;
1013
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1015
$titlebar_indicator_color 0%,
1016
transparent 0%)
1017
0 0 0 / 0 0 0px;
1018
&:checked {
1020
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1021
$titlebar_indicator_color 100%,
1022
transparent 0%)
1023
0 0 2 / 0 0 2px;
1024
&, &:disabled { background-color: transparent; }
1026
}
1027
}
1028
button.suggested-action, button.destructive-action {
1030
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1031
}
1032
&.selection-mode {
1034
// FIXME: 0.00001s is workaround for transition bug of gtk+ 3.22
1035
// see https://bugzilla.gnome.org/show_bug.cgi?id=774064
1036
transition: background-color 0.00001s $longer_duration;
1037
animation: header_ripple_effect $longer_duration $deceleration_curve;
1038
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
1039
background-color: $primary_color;
1040
color: $inverse_fg_color;
1041
&:backdrop {
1043
color: $secondary_inverse_fg_color;
1044
}
1045
.subtitle:link { @extend *:link:selected; }
1047
button:not(.suggested-action):not(.destructive-action) {
1049
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1050
currentColor 0%,
1051
transparent 0%)
1052
0 0 0 / 0 0 0px;
1053
color: currentColor;
1054
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1056
&:checked {
1058
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1059
currentColor 100%,
1060
transparent 0%)
1061
0 0 2 / 0 0 2px;
1062
color: currentColor;
1063
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1065
}
1066
}
1067
.selection-menu {
1069
padding-left: 16px;
1070
padding-right: 16px;
1071
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1073
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1075
}
1076
}
1077
.fullscreen &,
1079
.tiled &,
1080
.maximized & {
1081
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1082
box-shadow: $shadow_1;
1083
}
1084
&.default-decoration {
1086
min-height: $small_size;
1087
padding: $container_padding;
1088
box-shadow: inset 0 1px $titlebar_highlight_color;
1089
.fullscreen &,
1091
.tiled &,
1092
.maximized & { box-shadow: none; }
1093
button.titlebutton {
1095
min-height: $small_size;
1096
min-width: $small_size;
1097
margin: 0;
1098
padding: 0;
1099
}
1100
// workaround for non-animatable buttons
1102
.background:not(.csd) & button.titlebutton:active { background-size: 1000% 1000%; }
1103
}
1104
.solid-csd & {
1106
&:dir(rtl), &:dir(ltr) { // specificity bump
1107
// margin-left: -2px;
1108
// margin-right: -2px;
1109
// margin-top: -2px;
1110
// border-radius: 0;
1111
// box-shadow: inset 0 1px $titlebar_highlight_color;
1112
}
1113
}
1114
}
1115
headerbar {
1117
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1118
entry,
1119
spinbutton,
1120
// separator,
1121
button {
1122
margin-top: $container_padding;
1123
margin-bottom: $container_padding;
1124
}
1125
switch {
1127
margin-top: $container_padding * 2;
1128
margin-bottom: $container_padding * 2;
1129
}
1130
// reset button margins of the spinbutton
1132
spinbutton button {
1133
margin-top: 0;
1134
margin-bottom: 0;
1135
}
1136
}
1137
.background:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) .titlebar {
1139
border-top-left-radius: 2px;
1140
border-top-right-radius: 2px;
1141
}
1142
headerbar { // headerbar border rounding
1144
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
1145
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { border-top-left-radius: 2px; }
1146
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { border-top-right-radius: 2px; }
1148
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
1150
&:first-child, &:last-child {
1151
border-top-left-radius: 2px;
1152
border-top-right-radius: 2px;
1153
}
1154
}
1155
}
1156
.titlebar:not(headerbar) {
1158
window.csd > & {
1159
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1160
padding: 0;
1161
background-color: transparent;
1162
background-image: none;
1163
border-style: none;
1164
box-shadow: none;
1165
}
1166
> separator {
1168
background-color: $titlebar_bg_color;
1169
background-image: image($border_color);
1170
}
1171
@extend %titlebar;
1173
}
1174
/************
1177
* Pathbars *
1178
************/
1179
%pathbar_button,
1180
.path-bar button {
1181
padding-left: ($medium_size - 24px) / 2;
1182
padding-right: ($medium_size - 24px) / 2;
1183
label:not(:only-child) {
1185
&:first-child { margin-left: 4px; }
1186
&:last-child { margin-right: 4px; }
1188
}
1189
&.slider-button {
1191
padding-left: (24px - 16px) / 2;
1192
padding-right: (24px - 16px) / 2;
1193
}
1194
:not(headerbar) & {
1196
@extend %flat_button;
1197
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1199
$primary_color 0%,
1200
transparent 0%)
1201
0 0 0 / 0 0 0px;
1202
border-radius: 2px;
1203
&:checked {
1205
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1206
$primary_color 100%,
1207
transparent 0%)
1208
0 0 2 / 0 0 2px;
1209
&, &:disabled { background-color: transparent; }
1211
}
1212
}
1213
}
1214
/**************
1217
* Tree Views *
1218
**************/
1219
treeview.view {
1220
@at-root * {
1221
-GtkTreeView-horizontal-separator: 4;
1222
-GtkTreeView-grid-line-width: 1;
1223
-GtkTreeView-grid-line-pattern: '';
1224
-GtkTreeView-tree-line-width: 1;
1225
-GtkTreeView-tree-line-pattern: '';
1226
-GtkTreeView-expander-size: 16;
1227
}
1228
border-left-color: $fill_color; // this is actually the tree lines color,
1230
border-top-color: $border_color; // while this is the grid lines color, better then nothing
1231
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1233
&.separator {
1235
min-height: 1px + 2px * 2;
1236
color: $border_color;
1237
}
1238
&:drop(active) {
1240
border-style: solid none;
1241
border-width: 1px;
1242
border-color: $accent_color;
1243
&.after { border-top-style: none; }
1245
&.before { border-bottom-style: none; }
1247
}
1248
&.expander {
1250
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1251
-gtk-icon-transform: rotate(-90deg);
1252
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1254
&:checked { -gtk-icon-transform: unset; }
1256
color: $secondary_fg_color;
1258
&:hover, &:active { color: $fg_color; }
1260
&:disabled { color: $disabled_secondary_fg_color; }
1262
&:selected {
1264
color: $secondary_inverse_fg_color;
1265
&:hover, &:active { color: $inverse_fg_color; }
1267
&:disabled { color: $disabled_secondary_inverse_fg_color; }
1269
}
1270
}
1271
&.progressbar { // progress bar in treeviews
1273
border-bottom: $bar_size solid $primary_color;
1274
box-shadow: none;
1275
background-color: transparent;
1276
&:selected { border-bottom-color: currentColor; }
1278
}
1279
&.trough { // progress bar trough in treeviews
1281
border-bottom: $bar_size solid scale-alpha($primary_color, $lower_opacity);
1282
box-shadow: none;
1283
background-color: transparent;
1284
&:selected { border-bottom-color: $fill_color; }
1286
}
1287
header {
1289
button {
1290
@extend row.activatable;
1291
padding: 2px 6px;
1293
border-style: none solid solid none;
1294
border-width: 1px;
1295
border-color: $border_color;
1296
border-radius: 0;
1297
background-clip: border-box;
1298
&, &:hover, &:active { box-shadow: none; }
1300
&, &:disabled { background-color: $base_color; }
1302
&:last-child { border-right-style: none; }
1304
}
1305
}
1306
button.dnd,
1308
header.button.dnd { // for treeview-like derive widgets
1309
padding: 2px 6px;
1310
border-style: none solid solid;
1311
border-width: 1px;
1312
border-color: $border_color;
1313
border-radius: 0;
1314
box-shadow: none;
1315
background-color: $base_color;
1316
background-clip: border-box;
1317
color: $primary_color;
1318
}
1319
acceleditor > label { background-color: $primary_color; } // see tests/testaccel to test
1321
}
1322
/*********
1325
* Menus *
1326
*********/
1327
menubar,
1328
.menubar {
1329
-GtkWidget-window-dragging: true;
1330
padding: 0;
1331
// box-shadow: inset 0 -1px $border_color;
1332
background-color: $titlebar_bg_color;
1333
> menuitem {
1335
transition: $shorter_transition;
1336
min-height: 20px;
1337
padding: 4px 8px;
1338
color: $secondary_titlebar_fg_color;
1339
&:hover { // Seems like it :hover even with keyboard focus
1341
transition: none;
1342
background-color: $semi_fill_color;
1343
color: $titlebar_fg_color;
1344
}
1345
&:disabled { color: $disabled_secondary_titlebar_fg_color; }
1347
}
1348
}
1349
.csd.popup { border-radius: 2px; }
1351
menu,
1353
.menu,
1354
.context-menu {
1355
margin: 4px 0;
1356
padding: 4px 0;
1357
box-shadow: inset 0 1px $highlight_color;
1358
background-color: $base_color;
1359
border: 1px solid $border_color; // adds borders in a non composited env
1360
.csd & {
1362
border: none; // axes borders in a composited env
1363
border-radius: 2px;
1364
}
1365
menuitem {
1367
transition: $shorter_transition;
1368
min-height: 20px;
1369
min-width: 40px;
1370
padding: 4px 8px;
1371
font: initial;
1372
text-shadow: none;
1373
&:hover {
1375
transition: none;
1376
background-color: $semi_fill_color;
1377
}
1378
&:disabled { color: $disabled_fg_color; }
1380
// submenu indicators
1382
arrow {
1383
min-height: 16px;
1384
min-width: 16px;
1385
&:dir(ltr) {
1387
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1388
margin-left: 8px;
1389
}
1390
&:dir(rtl) {
1392
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1393
margin-right: 8px;
1394
}
1395
}
1396
// avoids labels color being overridden, see
1398
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1399
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1400
}
1401
// overflow arrows
1403
> arrow {
1404
min-height: 16px;
1405
min-width: 16px;
1406
padding: 4px;
1407
border-radius: 0;
1408
background-color: $base_color;
1409
color: $secondary_fg_color;
1410
&.top {
1412
margin-top: -4px;
1413
border-bottom: 1px solid $border_color;
1414
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1415
}
1416
&.bottom {
1418
margin-bottom: -4px;
1419
border-top: 1px solid $border_color;
1420
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1421
}
1422
&:hover {
1424
background-image: image($semi_fill_color);
1425
color: $fg_color;
1426
}
1427
&:disabled {
1429
border-color: transparent;
1430
background-color: transparent;
1431
color: transparent;
1432
// color: $disabled_secondary_fg_color;
1433
}
1434
}
1435
separator { margin: 4px 0; }
1437
}
1438
menuitem {
1440
accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1441
check,
1443
radio {
1444
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1445
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1446
}
1447
}
1448
// FIXME: THIS IS A REALLY UGLY WORKAROUND!
1450
// Electron/Atom render all translucent colors in opaque colors.
1451
// It's a very critical issue for this theme and should be fixed by upstream...
1452
.popup:not(.csd) menu {
1453
$opaque_fg_color: if($variant == 'light', mix($black, $base_color, percentage(0.8)), $white);
1454
$opaque_semi_fill_color: mix($opaque_fg_color, $base_color, percentage($lower_opacity / 2));
1455
$opaque_disabled_fg_color: mix($opaque_fg_color, $base_color, percentage($disabled_opacity));
1456
$opaque_tertiary_fg_color: mix($opaque_fg_color, $base_color, percentage($tertiary_opacity));
1457
menuitem {
1459
color: $opaque_fg_color;
1460
&:hover { background-color: $opaque_semi_fill_color; }
1462
&:disabled { color: $opaque_disabled_fg_color; } // separator/border also use this color.
1464
}
1465
// TODO: not working this, where/how i can set the accelerators?
1467
accelerator { color: $opaque_tertiary_fg_color; }
1468
}
1469
/************
1472
* Popovers *
1473
************/
1474
popover.background {
1475
transition: $shadow_transition;
1476
padding: 2px;
1477
box-shadow: $shadow_2; // TODO: this should really have a highlight
1478
background-color: $lighter_bg_color;
1479
&:backdrop { box-shadow: $shadow_1; }
1481
&, .csd & {
1483
border-style: solid;
1484
border-width: 1px;
1485
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1486
border-radius: 2px + 1px;
1487
}
1488
> stack { margin: -4px; } // remove extra padding from menu style popovers
1490
> toolbar { margin: -2px; }
1492
> list,
1494
> .view,
1495
> toolbar {
1496
border-style: none;
1497
box-shadow: none;
1498
background-color: transparent;
1499
}
1500
&.touch-selection,
1502
&.magnifier,
1503
&.osd { @extend %osd; }
1504
// entry { @extend %entry.flat; }
1506
// button.combo { @extend %combo_flat; }
1508
// button:not(.suggested-action):not(.destructive-action) { @extend %button_basic.flat; }
1510
&.menu button,
1512
button.model {
1513
@extend %simple_flat_button;
1514
min-height: 32px;
1516
padding: 0 8px;
1517
border-radius: 2px;
1518
&:checked { @extend %selected_items; }
1520
}
1521
separator { margin: 4px 0; }
1523
list separator { margin: 0; }
1525
}
1526
/*************
1528
* Notebooks *
1529
*************/
1530
notebook {
1531
> header {
1532
border-width: 1px;
1533
border-color: $border_color;
1534
background-color: $bg_color;
1535
background-clip: border-box;
1536
&.top {
1538
border-bottom-style: solid;
1539
> tabs {
1540
margin-bottom: -1px;
1541
> tab {
1542
&:hover { box-shadow: inset 0 -2px $fill_color; }
1544
&:checked { box-shadow: inset 0 -2px $primary_color; }
1546
}
1547
}
1548
}
1549
&.bottom {
1551
border-top-style: solid;
1552
> tabs {
1553
margin-top: -1px;
1554
> tab {
1555
&:hover { box-shadow: inset 0 2px $fill_color; }
1557
&:checked { box-shadow: inset 0 2px $primary_color; }
1559
}
1560
}
1561
}
1562
&.left {
1564
border-right-style: solid;
1565
> tabs {
1566
margin-right: -1px;
1567
> tab {
1568
&:hover { box-shadow: inset -2px 0 $fill_color; }
1570
&:checked { box-shadow: inset -2px 0 $primary_color; }
1572
}
1573
}
1574
}
1575
&.right {
1577
border-left-style: solid;
1578
> tabs {
1579
margin-left: -1px;
1580
> tab {
1581
&:hover { box-shadow: inset 2px 0 $fill_color; }
1583
&:checked { box-shadow: inset 2px 0 $primary_color; }
1585
}
1586
}
1587
}
1588
&.top > tabs > arrow {
1590
@extend %notebook_vert_arrows;
1591
border-top-style: none;
1593
}
1594
&.bottom > tabs > arrow {
1596
@extend %notebook_vert_arrows;
1597
border-bottom-style: none;
1599
}
1600
@at-root %notebook_vert_arrows {
1602
padding-left: 4px;
1603
padding-right: 4px;
1604
&.down {
1606
margin-left: -8px;
1607
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1608
}
1609
&.up {
1611
margin-right: -8px;
1612
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1613
}
1614
}
1615
&.left > tabs > arrow {
1617
@extend %notebook_horz_arrows;
1618
border-left-style: none;
1620
}
1621
&.right > tabs > arrow {
1623
@extend %notebook_horz_arrows;
1624
border-right-style: none;
1626
}
1627
@at-root %notebook_horz_arrows {
1629
padding-top: 4px;
1630
padding-bottom: 4px;
1631
&.down {
1633
margin-top: -8px;
1634
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1635
}
1636
&.up {
1638
margin-bottom: -8px;
1639
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1640
}
1641
}
1642
> tabs > arrow {
1644
@extend %simple_flat_button;
1645
min-height: 16px;
1647
min-width: 16px;
1648
border-radius: 0;
1649
}
1650
tab {
1652
transition: $longer_transition,
1653
background-size 0,
1654
background-image 0;
1655
min-height: $small_size;
1656
min-width: $small_size;
1657
padding: $container_padding 12px;
1658
outline-offset: -6px;
1660
border-width: 1px; // for reorderable tabs
1662
border-color: transparent; //
1663
background-image: radial-gradient(circle farthest-corner at center,
1665
$primary_color 10%,
1666
transparent 0%);
1667
background-repeat: no-repeat;
1668
background-position: center;
1669
background-size: 0% 0%;
1670
color: $secondary_fg_color;
1672
font-weight: 500;
1673
&:hover {
1675
color: $fg_color;
1676
&.reorderable-page {
1678
border-color: $border_color;
1679
background-color: $alt_base_color;
1680
}
1681
}
1682
&:disabled { color: $disabled_secondary_fg_color; }
1684
&:checked {
1686
transition: $longer_transition,
1687
background-size $longer_duration $deceleration_curve,
1688
background-image $longer_duration + $ripple_duration $deceleration_curve;
1689
background-image: radial-gradient(circle farthest-corner at center,
1690
transparent 10%,
1691
transparent 0%);
1692
background-size: 1000% 1000%;
1693
color: $fg_color;
1694
&:disabled { color: $disabled_fg_color; }
1696
&.reorderable-page {
1698
border-color: $border_color;
1699
background-color: $base_color;
1700
}
1701
}
1702
// colors the button like the label, overridden otherwise
1704
button.flat {
1705
@extend %small_button;
1706
&:last-child {
1708
margin-left: $container_padding;
1709
margin-right: $container_padding - 12px;
1710
}
1711
&:first-child {
1713
margin-left: $container_padding - 12px;
1714
margin-right: $container_padding;
1715
}
1716
}
1717
}
1718
&.top,
1720
&.bottom {
1721
tabs {
1722
padding-left: 8px;
1723
padding-right: 8px;
1724
&:not(:only-child) {
1726
&:first-child { margin-left: 0; }
1727
&:last-child { margin-right: 0; }
1728
}
1729
tab {
1731
&.reorderable-page {
1732
margin: 0 -1px;
1733
border-style: none solid;
1734
}
1735
}
1736
}
1737
}
1738
&.left,
1740
&.right {
1741
tabs {
1742
padding-top: 8px;
1743
padding-bottom: 8px;
1744
&:not(:only-child) {
1746
&:first-child { margin-top: 0; }
1747
&:last-child { margin-bottom: 0; }
1748
}
1749
tab {
1751
&.reorderable-page {
1752
margin: -1px 0;
1753
border-style: solid none;
1754
}
1755
}
1756
}
1757
}
1758
}
1759
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1761
background-color: $base_color;
1762
entry:not(.search),
1764
spinbutton:not(.vertical) { @extend %entry.flat; }
1765
spinbutton:not(.vertical) entry { &, &:focus, &:disabled { @extend %spinbutton_entry; }}
1767
button.combo { @extend %combo_flat; }
1769
}
1770
}
1771
/**************
1774
* Scrollbars *
1775
**************/
1776
scrollbar {
1777
$_slider_min_length: 24px;
1778
// disable steppers
1780
@at-root * {
1781
-GtkScrollbar-has-backward-stepper: false;
1782
-GtkScrollbar-has-forward-stepper: false;
1783
}
1784
transition: $longer_transition;
1786
background-color: $base_color;
1787
background-clip: $extra_background_clip;
1788
// scrollbar border
1790
&.top { border-bottom: 1px solid $border_color; }
1791
&.bottom { border-top: 1px solid $border_color; }
1792
&.left { border-right: 1px solid $border_color; }
1793
&.right { border-left: 1px solid $border_color; }
1794
// slider
1796
slider {
1797
transition: $shorter_transition, margin 0, border-width 0;
1798
min-width: 8px;
1799
min-height: 8px;
1800
border: 4px solid transparent;
1801
border-radius: $circular_radius;
1802
background-clip: padding-box;
1803
background-color: $tertiary_fg_color;
1804
&:hover { background-color: $secondary_fg_color; }
1806
&:active { background-color: $fg_color; }
1808
&:disabled { background-color: $disabled_tertiary_fg_color; }
1810
}
1811
&.fine-tune {
1813
slider {
1814
transition: $shorter_transition, margin 0, border-width 0, min-width 0, min-height 0;
1815
min-width: 4px;
1816
min-height: 4px;
1817
}
1818
&.horizontal slider { margin: 2px 0; }
1820
&.vertical slider { margin: 0 2px; }
1822
}
1823
&.overlay-indicator {
1825
&:not(.dragging):not(.hovering) {
1826
border-color: transparent;
1827
background-color: transparent;
1828
slider {
1830
min-width: 4px;
1831
min-height: 4px;
1832
margin: 4px - 1px;
1833
border: 1px solid scale-alpha($base_color, $lower_opacity);
1834
}
1835
button {
1837
min-width: 4px;
1838
min-height: 4px;
1839
margin: 4px - 1px;
1840
border: 1px solid scale-alpha($base_color, $lower_opacity);
1841
border-radius: $circular_radius;
1842
background-color: $tertiary_fg_color;
1843
background-clip: padding-box;
1844
-gtk-icon-source: none;
1845
&:disabled { background-color: $disabled_tertiary_fg_color; }
1847
}
1848
&.horizontal {
1850
slider { min-width: $_slider_min_length; }
1851
button { min-width: 8px; }
1853
}
1854
&.vertical {
1856
slider { min-height: $_slider_min_length; }
1857
button { min-height: 8px; }
1859
}
1860
}
1861
&.dragging,
1863
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1864
}
1865
&.horizontal slider { min-width: $_slider_min_length; }
1867
&.vertical slider { min-height: $_slider_min_length; }
1869
// button styling
1871
button {
1872
@extend %simple_flat_button;
1873
min-width: 16px;
1875
min-height: 16px;
1876
padding: 0;
1877
border-radius: 0;
1878
}
1879
// button icons
1881
&.vertical {
1882
button {
1883
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1884
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1886
}
1887
}
1888
&.horizontal {
1890
button {
1891
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
1892
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
1894
}
1895
}
1896
}
1897
/**********
1900
* Switch *
1901
**********/
1902
switch {
1903
transition: $longer_transition;
1904
margin: $container_padding 0;
1905
border: 4px solid transparent;
1906
border-radius: $circular_radius;
1907
background-color: $fill_color;
1908
background-clip: padding-box;
1909
font-size: 0;
1910
&:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
1912
&:checked {
1914
background-color: scale-alpha($accent_color, 0.5);
1915
&:disabled {
1917
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1918
color: $disabled_fg_color;
1919
}
1920
}
1921
slider {
1923
@include entry(normal);
1924
transition: $longer_transition, $shadow_transition, margin 0;
1926
min-width: $small_size;
1927
min-height: $small_size;
1928
margin: -4px 0 -4px -4px;
1929
border-radius: $circular_radius;
1930
-gtk-outline-radius: $circular_radius;
1931
}
1932
&:hover slider { @include entry(focus); }
1934
&:checked slider {
1936
transition: $longer_transition, $shadow_transition, margin 0, background-image 0, background-color 0.00001s $longer_duration;
1937
animation: needs_attention $longer_duration $deceleration_curve;
1938
margin: -4px -4px -4px 0;
1939
background-color: $accent_color;
1940
color: $inverse_fg_color;
1941
}
1942
&:disabled slider { @include entry(disabled); }
1944
&:checked:disabled slider { animation: none; }
1946
row:selected & {
1948
}
1949
}
1950
/*************************
1953
* Check and Radio items *
1954
*************************/
1955
// draw regular check and radio items using our PNG assets
1956
// all assets are rendered from assets.svg. never add pngs directly
1957
// selection-mode
1959
.view.content-view.check:not(list),
1960
.content-view .tile check:not(list) {
1961
min-height: 40px;
1962
min-width: 40px;
1963
margin: 0;
1964
padding: 0;
1965
box-shadow: none;
1966
background-color: transparent;
1967
background-image: none;
1968
-gtk-icon-shadow: $shadow_1;
1969
&:hover, &:active { -gtk-icon-shadow: $shadow_2; }
1971
@each $s, $as in ('', '-unchecked'),
1973
(':checked', '-checked') {
1974
&#{$s} {
1975
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1976
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1977
}
1978
}
1979
}
1980
checkbutton.text-button,
1982
radiobutton.text-button {
1983
// this is for a nice focus on check and radios text
1984
padding: 2px;
1985
outline-offset: 0;
1986
label:not(:only-child) { margin: 0 4px; }
1988
}
1989
check,
1991
radio {
1992
min-height: 24px;
1993
min-width: 24px;
1994
margin: -($large_size - 24px) / 2;
1995
padding: ($large_size - 24px) / 2;
1996
@extend %simple_flat_button;
1998
@extend %circular_button;
2000
&:checked, &:indeterminate {
2002
color: $accent_color;
2003
&:disabled { color: scale-alpha($accent_color, $disabled_opacity); }
2005
}
2006
// &:only-child { margin: -12px; }
2008
row &:not(:checked):not(:indeterminate) {
2010
color: gtkalpha(currentColor, $secondary_opacity);
2011
&:hover, &:active { color: currentColor; }
2013
&:disabled { color: gtkalpha(currentColor, $secondary_opacity * $disabled_opacity); }
2015
}
2016
menu menuitem & {
2018
transition: none;
2019
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
2020
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $tertiary_opacity); }
2022
&, &:hover, &:disabled {
2024
box-shadow: none;
2025
// color: inherit;
2026
}
2027
}
2028
}
2029
%check,
2031
check {
2032
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.svg")),
2033
-gtk-recolor(url("assets/scalable/checkbox-unchecked-symbolic.symbolic.png"))); }
2034
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")),
2036
-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.symbolic.png"))); }
2037
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.svg")),
2039
-gtk-recolor(url("assets/scalable/checkbox-mixed-symbolic.symbolic.png"))); }
2040
}
2041
%radio,
2043
radio {
2044
& { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.svg")),
2045
-gtk-recolor(url("assets/scalable/radio-unchecked-symbolic.symbolic.png"))); }
2046
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-checked-symbolic.svg")),
2048
// -gtk-recolor(url("assets/scalable/radio-checked-symbolic.symbolic.png"))); }
2049
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.svg")),
2051
-gtk-recolor(url("assets/scalable/radio-mixed-symbolic.symbolic.png"))); }
2052
border-image-slice: $large_size / 2px;
2054
border-image-width: $large_size / 2;
2055
$radio_indicator: 10px / $large_size / 2;
2057
& {
2059
border-image-source: -gtk-gradient(radial,
2060
center center, 0,
2061
center center, 0.001,
2062
to($accent_color),
2063
to(transparent));
2064
}
2065
&:checked:not(:indeterminate) {
2067
border-image-source: -gtk-gradient(radial,
2068
center center, 0,
2069
center center, $radio_indicator,
2070
to($accent_color),
2071
to(transparent));
2072
}
2073
&:checked:not(:indeterminate):disabled {
2075
border-image-source: -gtk-gradient(radial,
2076
center center, 0,
2077
center center, $radio_indicator,
2078
to(scale-alpha($accent_color, $disabled_opacity)),
2079
to(transparent));
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 {
2422
}
2423
}
2424
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
2426
}
2427
/*************
2430
* Level Bar *
2431
*************/
2432
levelbar {
2433
block {
2434
min-width: $medium_size;
2435
min-height: $bar_size;
2436
}
2437
&.vertical block {
2439
min-width: $bar_size;
2440
min-height: $medium_size;
2441
}
2442
trough {
2444
padding: 2px;
2445
border-radius: 2px;
2446
@include entry(normal);
2448
&:disabled { @include entry(disabled); }
2450
}
2451
&.horizontal.discrete block { margin: 0 1px; }
2453
&.vertical.discrete block { margin: 1px 0; }
2455
&.horizontal.discrete trough { padding: 2px 1px; }
2457
&.vertical.discrete trough { padding: 1px 2px; }
2459
block {
2461
&.low {
2462
background-color: $warning_color;
2463
}
2464
&.high,
2466
&:not(.empty) {
2467
background-color: $primary_color;
2468
}
2469
&.full {
2471
background-color: $success_color;
2472
}
2473
&.empty {
2475
background-color: $fill_color;
2476
color: $disabled_fg_color;
2477
}
2478
}
2479
}
2480
/****************
2483
* Print dialog *
2484
*****************/
2485
printdialog {
2486
paper {
2487
padding: 0;
2488
border: 1px solid $border_color;
2489
background-color: $base_color;
2490
color: $fg_color;
2491
}
2492
.dialog-action-box { margin: 12px; }
2494
}
2495
/**********
2498
* Frames *
2499
**********/
2500
frame > border,
2501
.frame {
2502
margin: 0;
2503
padding: 0;
2504
border: 1px solid $border_color;
2505
border-radius: 0;
2506
box-shadow: none;
2507
&.flat { border-style: none; }
2509
}
2510
frame.flat > border { @extend .frame.flat; } // for backporting
2512
actionbar > revealer > box {
2514
padding: $container_padding;
2515
border-top: 1px solid $border_color;
2516
button:not(.suggested-action):not(.destructive-action):not(.server-list-button) { @extend %button_basic.flat; }
2518
}
2519
scrolledwindow {
2521
viewport.frame { // avoid double borders when viewport inside scrolled window
2522
border-style: none;
2523
}
2524
// This is used when content is touch-dragged past boundaries.
2526
// draws a box on top of the content, the size changes programmatically.
2527
@at-root overshoot {
2528
&.top { @include overshoot(top); }
2529
&.bottom { @include overshoot(bottom); }
2531
&.left { @include overshoot(left); }
2533
&.right { @include overshoot(right); }
2535
}
2536
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2538
@at-root undershoot {
2539
&.top { @include undershoot(top); }
2540
&.bottom { @include undershoot(bottom); }
2542
&.left { @include undershoot(left); }
2544
&.right { @include undershoot(right); }
2546
}
2547
@at-root junction { // the small square between two scrollbars
2549
border-style: solid none none solid;
2550
border-width: 1px;
2551
border-color: $border_color;
2552
background-color: $base_color;
2553
&:dir(rtl) { border-style: solid solid none none; }
2555
}
2556
}
2557
// vbox and hbox separators
2559
separator {
2560
min-width: 1px;
2561
min-height: 1px;
2562
background-color: $border_color;
2563
}
2564
/*********
2567
* Lists *
2568
*********/
2569
list {
2570
border-color: $border_color;
2571
background-color: $base_color;
2572
row { padding: 2px; }
2574
}
2575
// FIXME
2577
$row_transition: $longer_transition, background-color 0, color 0;
2578
row {
2580
&.activatable {
2581
transition: $row_transition,
2582
background-size $ripple_duration $deceleration_curve,
2583
background-image $ripple_duration * 2 $deceleration_curve;
2584
box-shadow: inset 0 0 0 9999px transparent;
2585
background-image: radial-gradient(circle farthest-corner at center,
2586
transparent 10%,
2587
transparent 0%);
2588
background-repeat: no-repeat;
2589
background-position: center;
2590
background-size: 1000% 1000%;
2591
&:hover {
2593
transition: $row_transition,
2594
box-shadow 0,
2595
background-size $ripple_duration $deceleration_curve,
2596
background-image $ripple_duration * 2 $deceleration_curve;
2597
box-shadow: inset 0 0 0 9999px $row_fill_color;
2598
}
2599
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2601
&:active {
2602
transition: $row_transition,
2603
background-size 0,
2604
background-image 0;
2605
animation: ripple_effect $longer_duration $deceleration_curve forwards;
2606
box-shadow: inset 0 0 0 9999px $semi_fill_color;
2607
background-image: radial-gradient(circle farthest-corner at center,
2608
$semi_fill_color 10%,
2609
transparent 0%);
2610
background-size: 0% 0%;
2611
}
2612
}
2613
&:selected { @extend %selected_items; }
2615
}
2616
/*********************
2619
* App Notifications *
2620
*********************/
2621
.app-notification {
2622
@extend %osd;
2623
@extend toolbar.osd;
2625
margin: 8px;
2627
button { @extend %button_basic.flat; }
2629
&.frame,
2631
border { border-style: none; }
2632
}
2633
/*************
2636
* Expanders *
2637
*************/
2638
expander {
2639
arrow {
2640
transition: all $shorter_duration $standard_curve;
2641
min-width: 16px;
2642
min-height: 16px;
2643
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2644
-gtk-icon-transform: rotate(-90deg);
2645
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2647
&:checked { -gtk-icon-transform: unset; }
2649
color: $secondary_fg_color;
2651
&:hover, &:active { color: $fg_color; }
2653
&:disabled { color: $disabled_secondary_fg_color; }
2655
&:selected {
2657
color: $secondary_inverse_fg_color;
2658
&:hover, &:active { color: $inverse_fg_color; }
2660
&:disabled { color: $disabled_secondary_inverse_fg_color; }
2662
}
2663
}
2664
}
2665
/************
2668
* Calendar *
2669
***********/
2670
calendar {
2671
padding: 1px;
2672
border: 1px solid $border_color;
2673
color: $fg_color;
2674
&:disabled { color: $disabled_fg_color; }
2676
&:selected {
2678
@extend %selected_items;
2679
border-radius: 2px + 1px;
2681
}
2682
&.header {
2684
border-style: none none solid;
2685
border-radius: 0;
2686
}
2687
&.button { @extend %simple_flat_button; }
2689
&.highlight {
2691
color: gtkalpha(currentColor, $tertiary_opacity);
2692
font-weight: 500;
2693
}
2694
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2696
}
2697
/***********
2700
* Dialogs *
2701
***********/
2702
messagedialog { // Message Dialog styling
2703
&.background { background-color: $lighter_bg_color; }
2704
.titlebar {
2706
min-height: $small_size;
2707
border-style: none;
2708
box-shadow: inset 0 1px $highlight_color;
2709
background-color: $lighter_bg_color;
2710
color: $fg_color;
2711
&:backdrop { color: $secondary_fg_color; }
2713
}
2714
&.csd { // rounded bottom border styling for csd version
2716
&.background {
2717
// bigger radius for better antialiasing
2718
border-bottom-left-radius: 2px;
2719
border-bottom-right-radius: 2px;
2720
}
2721
.dialog-action-area button {
2723
padding: 8px 16px;
2724
border-top: 1px solid $border_color;
2725
border-radius: 0;
2726
@extend %simple_flat_button;
2728
&:first-child { border-bottom-left-radius: 2px; }
2730
&:last-child { border-bottom-right-radius: 2px; }
2732
}
2733
}
2734
}
2735
filechooser {
2737
.dialog-action-box { border-top: 1px solid $border_color; }
2738
#pathbarbox {
2740
border-bottom: 1px solid $border_color;
2741
background-color: $bg_color;
2742
}
2743
}
2744
filechooserbutton:drop(active) {
2746
box-shadow: none;
2747
}
2748
/***********
2751
* Sidebar *
2752
***********/
2753
.sidebar {
2754
border-style: none;
2755
background-color: $lighter_bg_color;
2756
@at-root %sidebar_left,
2758
&:dir(ltr),
2759
&.left,
2760
&.left:dir(rtl) {
2761
border-right: 1px solid $border_color;
2762
border-left-style: none;
2763
}
2764
@at-root %sidebar_right,
2766
&:dir(rtl),
2767
&.right {
2768
border-left: 1px solid $border_color;
2769
border-right-style: none;
2770
}
2771
list { background-color: transparent; }
2773
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2775
}
2776
stacksidebar {
2778
&.sidebar {
2779
&:dir(ltr),
2780
&.left,
2781
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2782
&:dir(rtl),
2784
&.right { list { @extend %sidebar_right; }}
2785
}
2786
row {
2788
padding: 10px 4px;
2789
> label {
2791
padding-left: 6px;
2792
padding-right: 6px;
2793
}
2794
&.needs-attention > label { @extend %needs_attention; }
2796
}
2797
}
2798
/****************
2801
* File chooser *
2802
****************/
2803
placessidebar {
2804
> viewport.frame { border-style: none; }
2805
list { padding: (4px - 3px) 0 4px; }
2807
row {
2809
// Needs overriding of the GtkListBoxRow padding
2810
min-height: 32px;
2811
margin: -1px 0; // Remove unknown margins
2812
padding: 0;
2813
// Using margins/padding directly in the SidebarRow
2815
// will make the animation of the new bookmark row jump
2816
> revealer { padding: 0 12px; }
2817
&:selected { color: $inverse_fg_color; }
2819
&:disabled { color: $disabled_fg_color; }
2821
image.sidebar-icon {
2823
opacity: $tertiary_opacity; // dim the device icons
2824
&:dir(ltr) { padding-right: 8px; }
2826
&:dir(rtl) { padding-left: 8px; }
2827
}
2828
label.sidebar-label {
2830
&:dir(ltr) { padding-right: 2px; }
2831
&:dir(rtl) { padding-left: 2px; }
2832
}
2833
@at-root button.sidebar-button {
2835
@extend %simple_flat_button;
2836
@extend %small_button;
2838
row:selected & {
2840
}
2841
}
2842
&.sidebar-placeholder-row {
2844
min-height: 2px;
2845
padding: 0 8px;
2846
background-image: image($accent_color);
2847
background-clip: content-box;
2848
}
2849
&.sidebar-new-bookmark-row { color: $accent_color; }
2851
&:drop(active):not(:disabled) {
2853
box-shadow: inset 0 0 0 2px $accent_color;
2854
&:selected {
2856
// background-color: $accent_color;
2857
// color: $inverse_fg_color;
2858
}
2859
}
2860
}
2861
}
2862
placesview {
2864
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2865
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2867
// this selects the "connect to server" label
2869
> actionbar > revealer > box > label {
2870
padding-left: 8px;
2871
padding-right: 8px;
2872
}
2873
}
2874
/*********
2877
* Paned *
2878
*********/
2879
paned {
2880
> separator {
2881
min-width: 1px;
2882
min-height: 1px;
2883
-gtk-icon-source: none; // defeats the ugly default handle decoration
2884
border-style: none; // just to be sure
2885
background-color: transparent;
2886
// workaround, using background istead of a border since the border will get rendered twice (?)
2887
background-image: image($border_color);
2888
background-size: 1px 1px;
2889
background-clip: content-box; // avoids borders image being rendered twice (?)
2890
&.wide {
2892
min-width: 6px;
2893
min-height: 6px;
2894
background-color: $bg_color;
2895
background-image: image($border_color), image($border_color);
2896
background-size: 1px 1px, 1px 1px;
2897
}
2898
}
2899
&.horizontal > separator {
2901
background-repeat: repeat-y;
2902
&:dir(ltr) {
2904
margin: 0 -8px 0 0;
2905
padding: 0 8px 0 0;
2906
background-position: left;
2907
}
2908
&:dir(rtl) {
2910
margin: 0 0 0 -8px;
2911
padding: 0 0 0 8px;
2912
background-position: right;
2913
}
2914
&.wide {
2916
margin: 0;
2917
padding: 0;
2918
background-repeat: repeat-y, repeat-y;
2919
background-position: left, right;
2920
}
2921
}
2922
&.vertical > separator {
2924
margin: 0 0 -8px 0;
2925
padding: 0 0 8px 0;
2926
background-repeat: repeat-x;
2927
background-position: top;
2928
&.wide {
2930
margin: 0;
2931
padding: 0;
2932
background-repeat: repeat-x, repeat-x;
2933
background-position: bottom, top;
2934
}
2935
}
2936
}
2937
/**************
2940
* GtkInfoBar *
2941
**************/
2942
infobar {
2943
border-style: none;
2944
&.info { background-color: $info_bg_color; }
2946
&.question { background-color: $question_bg_color; }
2948
&.warning { background-color: $warning_bg_color; }
2950
&.error { background-color: $error_bg_color; }
2952
&.info,
2954
&.question,
2955
&.warning,
2956
&.error {
2957
> label, & { color: $inverse_fg_color; }
2958
button { @extend %button_selected; }
2960
selection {}
2962
*:link { @extend %link_selected; }
2964
}
2965
}
2966
/************
2969
* Tooltips *
2970
************/
2971
tooltip {
2972
&.background {
2973
// background-color needs to be set this way otherwise it gets drawn twice
2974
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2975
box-shadow: inset 0 1px $highlight_color;
2976
background-color: scale-alpha($base_color, $higher_opacity);
2977
}
2978
// @extend %osd;
2980
// padding: 4px; /* not working */
2982
border-radius: 2px;
2983
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2984
&:not(.csd) {
2986
border: 1px solid $border_color;
2987
border-radius: 2px + 1px;
2988
background-clip: $extra_background_clip;
2989
}
2990
// FIXME: we need a border or tooltips vanish on black background.
2992
decoration { background-color: transparent; }
2993
label {
2995
// tooltip label has already 6px margins
2996
min-height: 32px - 6px * 2;
2997
padding: 0 8px - 6px;
2998
}
2999
* {
3001
// workaround for Eclipse.
3002
// do not include any declaration here.
3003
// padding: 0;
3004
// background-color: transparent;
3005
// color: inherit;
3006
}
3007
}
3008
/*****************
3011
* Color Chooser *
3012
*****************/
3013
colorswatch {
3014
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
3015
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
3016
// applied to the overlay box.
3017
// base color corners rounding
3019
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
3020
// sports a bigger radius.
3021
// nth-child is needed by the custom color strip.
3022
&.top {
3024
border-top-left-radius: $material_radius + 0.5px;
3025
border-top-right-radius: $material_radius + 0.5px;
3026
overlay {
3028
border-top-left-radius: $material_radius;
3029
border-top-right-radius: $material_radius;
3030
}
3031
}
3032
&.bottom {
3034
border-bottom-left-radius: $material_radius + 0.5px;
3035
border-bottom-right-radius: $material_radius + 0.5px;
3036
overlay {
3038
border-bottom-left-radius: $material_radius;
3039
border-bottom-right-radius: $material_radius;
3040
}
3041
}
3042
&.left,
3044
&:first-child:not(.top) {
3045
border-top-left-radius: $material_radius + 0.5px;
3046
border-bottom-left-radius: $material_radius + 0.5px;
3047
overlay {
3049
border-top-left-radius: $material_radius;
3050
border-bottom-left-radius: $material_radius;
3051
}
3052
}
3053
&.right,
3055
&:last-child:not(.bottom) {
3056
border-top-right-radius: $material_radius + 0.5px;
3057
border-bottom-right-radius: $material_radius + 0.5px;
3058
overlay {
3060
border-top-right-radius: $material_radius;
3061
border-bottom-right-radius: $material_radius;
3062
}
3063
}
3064
&.dark overlay { color: $light_fg_color; }
3066
&.light overlay { color: $dark_fg_color; }
3068
&.dark { color: $light_fg_color; } // for focus ring
3070
&.light { color: $dark_fg_color; } // for focus ring
3072
&:drop(active) {
3074
box-shadow: none;
3075
&.light overlay {
3077
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3078
}
3079
&.dark overlay {
3081
box-shadow: $shadow_1, 0 0 0 2px $accent_color;
3082
}
3083
}
3084
overlay {
3086
transition: $shadow_transition;
3087
box-shadow: $shadow_1;
3088
&:hover { box-shadow: $shadow_2; }
3090
}
3091
&#add-color-button {
3093
border-radius: $material_radius $material_radius 0 0;
3094
color: $light_fg_color; // for focus ring
3095
&:only-child { border-radius: $material_radius; }
3097
overlay {
3099
background-image: linear-gradient(to right,
3100
$error_bg_color 25%,
3101
$warning_bg_color 25%, $warning_bg_color 50%,
3102
$info_bg_color 50%, $info_bg_color 75%,
3103
$question_bg_color 75%);
3104
color: $light_fg_color;
3105
}
3106
}
3107
&:disabled {
3109
opacity: $disabled_opacity;
3110
overlay { box-shadow: none; }
3112
}
3113
row:selected & {
3115
}
3116
&#editor-color-sample {
3118
border-radius: $material_radius + 0.5px;
3119
overlay { border-radius: $material_radius; }
3121
// overlay:hover { box-shadow: $shadow_1; }
3123
}
3124
}
3125
// colorscale popup
3127
colorchooser .popover.osd {
3128
transition: $shadow_transition;
3129
border-radius: 2px;
3130
box-shadow: $shadow_2, inset 0 1px $highlight_color;
3131
background-color: $base_color;
3132
&:backdrop { box-shadow: $shadow_1, inset 0 1px $highlight_color; }
3134
spinbutton:not(.vertical) { @extend %entry.flat; }
3136
}
3137
/********
3140
* Misc *
3141
********/
3142
// content view (grid/list)
3143
.content-view {
3144
background-color: $bg_color;
3145
// &:hover { -gtk-icon-effect: highlight; }
3147
rubberband, .rubberband { @extend rubberband; }
3149
}
3150
.scale-popup {
3152
.osd & { @extend %osd; }
3153
.osd & button.flat { // FIXME: quick hack, redo properly
3155
}
3156
button { // +/- buttons on GtkVolumeButton popup
3158
}
3159
}
3160
/**********************
3163
* Window Decorations *
3164
*********************/
3165
decoration {
3166
transition: $shadow_transition;
3167
border-radius: 2px 2px 0 0;
3168
box-shadow: $shadow_4, 0 16px 16px transparent;
3169
// FIXME rationalize shadows
3171
// this is used for the resize cursor area
3173
margin: 8px;
3174
&:backdrop {
3176
// the transparent shadow here is to enforce that the shadow extents don't
3177
// change when we go to backdrop, to prevent jumping windows.
3178
// The biggest shadow should be in the same order then in the active state
3179
// or the jumping will happen during the transition.
3180
box-shadow: $shadow_2, 0 16px 16px transparent;
3181
}
3182
.maximized &,
3184
.fullscreen &,
3185
.tiled & { border-radius: 0; }
3186
.popup & { box-shadow: none; }
3188
// server-side decorations as used by mutter
3190
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } // just doing borders, wm draws actual shadows
3191
.csd.popup & {
3193
border-radius: 2px;
3194
box-shadow: $shadow_2;
3195
}
3196
tooltip.csd & {
3198
border-radius: 2px;
3199
box-shadow: $shadow_2;
3200
}
3201
messagedialog.csd & {
3203
border-radius: 2px;
3204
// box-shadow: $shadow_4, 0 16px 16px transparent;
3205
// &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
3207
}
3208
.solid-csd & {
3210
margin: 0;
3211
// padding: 4px;
3212
border-radius: 0;
3213
box-shadow: none;
3214
// box-shadow: inset 0 0 0 4px $titlebar_bg_color;
3215
background-color: $titlebar_bg_color;
3216
}
3217
}
3218
// Window Close button
3220
button.titlebutton {
3221
// @extend %simple_flat_button;
3222
@extend %circular_button;
3224
.selection-mode & {
3226
}
3227
}
3228
// catch all extend :)
3231
%selected_items {
3233
background-color: $primary_color;
3234
@at-root %nobg_selected_items, & {
3236
color: $inverse_fg_color;
3237
&:disabled { color: $disabled_inverse_fg_color; }
3239
}
3240
}
3241
.monospace { font-family: monospace; }
3243
/**********************
3246
* Touch Copy & Paste *
3247
*********************/
3248
// touch selection handlebars for the Popover.osd above
3249
cursor-handle {
3250
border-radius: $circular_radius;
3251
background-color: $accent_color;
3252
background-image: none;
3253
&.top:dir(ltr), &.bottom:dir(rtl) {
3255
padding-left: 6px;
3256
border-top-right-radius: 0;
3257
}
3258
&.bottom:dir(ltr), &.top:dir(rtl) {
3260
padding-right: 6px;
3261
border-top-left-radius: 0;
3262
}
3263
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3265
-GtkWidget-text-handle-width: 24;
3266
-GtkWidget-text-handle-height: 30;
3267
$_url: 'assets/scale-horz-marks-before-slider#{$asset_suffix}';
3269
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3270
url('#{$_url}@2.png'));
3271
}
3272
}
3273
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3275
// shortcut window keys
3277
.keycap {
3278
min-width: 28px - 8px * 2;
3279
min-height: 28px - 2px;
3280
margin-top: 2px;
3281
padding-bottom: 2px;
3282
padding-left: 8px;
3283
padding-right: 8px;
3284
border: solid 1px $border_color;
3286
border-radius: 2px + 1px;
3287
box-shadow: inset 0 -2px $border_color;
3288
background-color: $base_color;
3289
color: $fg_color;
3290
font-size: smaller;
3291
}
3292
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3294
transition: $longer_transition;
3295
box-shadow: $shadow_1, inset 0 0 0 2px $accent_color;
3296
caret-color: $accent_color;
3297
}
3298
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3300
stackswitcher button.circular,
3302
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3303
min-width: $medium_size;
3304
min-height: $medium_size;
3305
padding: 0;
3306
}
3307