A fork of the Materia GTK theme.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 _common.scss

View raw Download
text/plain • 75.52 kiB
ASCII text
        
            
1
$asset_suffix: if($variant=='dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
4
$small_size: if($laptop == 'true', 20px, 24px);
5
$medium_size: if($laptop == 'true', 32px, 36px);
6
$large_size: if($laptop == 'true', 44px, 48px);
7
8
$container_padding: 6px;
9
10
$bar_size: 4px;
11
$menuitem_size: 28px;
12
13
$material_radius: 2px;
14
$material_faster: 0.2s;
15
$material_slower: 0.3s;
16
$material_ease: cubic-bezier(0.4, 0.0, 0.2, 1);
17
$material_ease_out: cubic-bezier(0.0, 0.0, 0.2, 1);
18
$material_ease_in: cubic-bezier(0.4, 0.0, 1, 1);
19
// FIXME: color's transition is too slow
20
$material_transition: all $material_slower $material_ease_out, color 0;
21
$shadow_transition: box-shadow $material_faster $material_ease_out;
22
23
* {
24
padding: 0;
25
background-clip: padding-box;
26
27
-GtkToolButton-icon-spacing: 4;
28
-GtkTextView-error-underline-color: $error_color;
29
30
// The size for scrollbars. The slider is 2px smaller, but we keep it
31
// up so that the whole area is sensitive to button presses for the
32
// slider. The stepper button is larger in both directions, the slider
33
// only in the width
34
35
-GtkScrolledWindow-scrollbar-spacing: 0;
36
37
-GtkToolItemGroup-expander-size: 11;
38
39
-GtkWidget-text-handle-width: 24;
40
-GtkWidget-text-handle-height: 24;
41
42
-GtkDialog-button-spacing: 4;
43
-GtkDialog-action-area-border: 0;
44
45
// We use the outline properties to signal the focus properties
46
// to the adwaita engine: using real CSS properties is faster,
47
// and we don't use any outlines for now.
48
49
outline-style: solid;
50
outline-width: 2px;
51
outline-color: $track_color;
52
outline-offset: -4px;
53
-gtk-outline-radius: 2px;
54
55
-gtk-secondary-caret-color: $selected_bg_color;
56
}
57
58
59
/***************
60
* Base States *
61
***************/
62
.background {
63
background-color: $bg_color;
64
color: $fg_color;
65
}
66
67
/*
68
These wildcard seems unavoidable, need to investigate.
69
Wildcards are bad and troublesome, use them with care,
70
or better, just don't.
71
Everytime a wildcard is used a kitten dies, painfully.
72
*/
73
74
*:disabled { -gtk-icon-effect: dim; }
75
76
.gtkstyle-fallback {
77
background-color: $bg_color;
78
color: $fg_color;
79
80
&:hover {
81
background-color: darken($bg_color, 5%);
82
color: $fg_color;
83
}
84
85
&:active {
86
background-color: darken($bg_color, 10%);
87
color: $fg_color;
88
}
89
90
&:disabled {
91
background-color: $bg_color;
92
color: $insensitive_fg_color;
93
}
94
95
&:selected {
96
background-color: $selected_bg_color;
97
color: $selected_fg_color;
98
}
99
}
100
101
.view,
102
%view {
103
@extend row.activatable;
104
105
background-color: $base_color;
106
color: $fg_color;
107
108
&:hover, &:active, &:selected { border-radius: 2px; }
109
110
&:disabled {
111
// background-color: $secondary_base_color;
112
color: $insensitive_fg_color;
113
}
114
115
&:selected { @extend %selected_items; }
116
}
117
118
.view,
119
textview {
120
text {
121
// @extend %view;
122
123
background-color: $base_color;
124
color: $fg_color;
125
126
&:disabled {
127
// background-color: $secondary_base_color;
128
color: $insensitive_fg_color;
129
}
130
131
selection { @extend %selected_items; }
132
}
133
}
134
135
textview border {
136
background-color: $secondary_base_color;
137
color: $tertiary_fg_color;
138
}
139
140
iconview { @extend .view; }
141
142
.rubberband,
143
rubberband {
144
border: 1px solid $secondary_selected_bg_color;
145
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
146
}
147
148
flowbox {
149
rubberband { @extend rubberband; }
150
151
flowboxchild {
152
outline-offset: -2px;
153
padding: 4px;
154
border-radius: 2px;
155
156
&:selected { @extend %selected_items; }
157
}
158
}
159
160
label {
161
caret-color: currentColor; // this shouldn't be needed.
162
163
&.separator {
164
@extend .dim-label;
165
166
color: $fg_color;
167
}
168
169
row:selected &,
170
&:selected { @extend %nobg_selected_items; }
171
172
selection {
173
background-color: $selected_bg_color;
174
color: $selected_fg_color;
175
}
176
177
&:disabled {
178
color: $insensitive_fg_color;
179
180
selection { @extend %selected_items:disabled; }
181
}
182
}
183
184
.dim-label { opacity: $hint_opacity; }
185
186
assistant {
187
.sidebar {
188
padding: 4px 0;
189
// background-color: $base_color;
190
// border-top: 1px solid $borders_color;
191
}
192
193
// &.csd .sidebar { border-top-style: none; }
194
195
.sidebar label {
196
min-height: $medium_size;
197
padding: 0 12px;
198
color: $tertiary_fg_color;
199
font-weight: 500;
200
201
&.highlight { color: $fg_color; }
202
}
203
}
204
205
%osd, .osd { opacity: $higher_opacity; }
206
207
208
/*********************
209
* Spinner Animation *
210
*********************/
211
@keyframes spin {
212
to { -gtk-icon-transform: rotate(1turn); }
213
}
214
215
@keyframes spin_colors {
216
1% { color: $info_bg_color; } 25% { color: $info_bg_color; }
217
26% { color: $question_bg_color; } 50% { color: $question_bg_color; }
218
51% { color: $warning_bg_color; } 75% { color: $warning_bg_color; }
219
76% { color: $error_bg_color; } 100% { color: $error_bg_color; }
220
}
221
222
spinner {
223
background: none;
224
opacity: 0; // non spinning spinner makes no sense
225
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
226
227
&:checked {
228
opacity: 1;
229
animation: spin 1s linear infinite, spin_colors 4s linear infinite;
230
231
&:disabled { opacity: $disabled_opacity; }
232
}
233
}
234
235
236
/****************
237
* Text Entries *
238
****************/
239
%entry,
240
entry {
241
%entry_basic, & {
242
min-height: $medium_size;
243
padding: 0 8px;
244
border-radius: 2px;
245
246
@include entry(normal);
247
248
&:focus { @include entry(focus); }
249
250
&:disabled { @include entry(insensitive); }
251
252
&.flat {
253
border-radius: 0;
254
255
@include entry(flat-normal);
256
257
&:focus { @include entry(flat-focus); }
258
259
&:disabled { @include entry(flat-insensitive); }
260
}
261
262
image { // icons inside the entry
263
// @extend %button_basic.flat;
264
265
min-height: $small_size;
266
min-width: $small_size;
267
-gtk-outline-radius: 100px;
268
border-radius: 100px;
269
color: gtkalpha(currentColor, $enabled_opacity);
270
271
&:hover, &:active { color: currentColor; }
272
273
&:disabled { color: gtkalpha(currentColor, $hint_opacity); }
274
275
&.left { margin-left: -2px; margin-right: 2px; }
276
277
&.right { margin-left: 2px; margin-right: -2px; }
278
}
279
280
undershoot {
281
&.left { @include undershoot(left); }
282
283
&.right { @include undershoot(right); }
284
}
285
286
selection { @extend %selected_items; }
287
288
// entry error and warning style
289
@each $e_type, $e_color in (error, $error_color),
290
(warning, $warning_color) {
291
&.#{$e_type} {
292
@include entry(normal, $e_color);
293
294
&:focus { @include entry(focus, $e_color); }
295
296
&:disabled { @include entry(insensitive, $e_color); }
297
298
&.flat {
299
@include entry(flat-normal, $e_color);
300
301
&:focus { @include entry(flat-focus, $e_color); }
302
303
&:disabled { @include entry(flat-insensitive, $e_color); }
304
}
305
}
306
}
307
308
&:drop(active) {
309
// box-shadow: inset 0 0 0 2px $accent_bg_color;
310
}
311
312
.osd & {
313
}
314
}
315
316
progress {
317
margin: 2px -6px;
318
border-style: none none solid;
319
border-width: 2px;
320
border-color: $selected_bg_color;
321
// border-radius: 0;
322
// box-shadow: none;
323
background-color: transparent;
324
// background-image: none;
325
}
326
327
// linked entries
328
.linked:not(.vertical) > &:not(.flat) { @extend %linked; }
329
330
// Vertically linked entries
331
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
332
}
333
334
treeview entry {
335
&.flat, & {
336
min-height: 0;
337
padding: 2px;
338
border-radius: 0;
339
background-color: $base_color;
340
341
&, &:focus {
342
border-image: none;
343
box-shadow: none;
344
}
345
}
346
}
347
348
349
/***********
350
* Buttons *
351
***********/
352
// stuff for .needs-attention
353
@keyframes needs_attention {
354
from {
355
background-image: -gtk-gradient(radial,
356
center center, 0,
357
center center, 0.001,
358
to($accent_bg_color),
359
to(transparent));
360
}
361
362
to {
363
background-image: -gtk-gradient(radial,
364
center center, 0,
365
center center, 0.5,
366
to($accent_bg_color),
367
to(transparent));
368
}
369
}
370
371
%button,
372
button {
373
@at-root %button_basic, & {
374
min-height: 24px;
375
min-width: 16px;
376
padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
377
border-radius: 2px;
378
font-weight: 500;
379
380
@include button(normal);
381
382
&:hover { @include button(hover); }
383
384
&:active { @include button(active); }
385
386
&:disabled { @include button(insensitive); }
387
388
&:checked { @include button(checked); }
389
390
&:checked:disabled { @include button(checked-insensitive); }
391
392
&.flat {
393
@include button(flat-normal);
394
395
&:hover { @include button(flat-hover); }
396
397
&:active { @include button(flat-active); }
398
399
&:disabled { @include button(flat-insensitive); }
400
401
&:checked { @include button(flat-checked); }
402
403
&:checked:disabled { @include button(flat-checked-insensitive); }
404
}
405
406
&.image-button {
407
min-width: 24px;
408
padding: ($medium_size - 24px) / 2;
409
-gtk-outline-radius: 100px;
410
border-radius: 100px;
411
}
412
413
&.text-button {
414
padding-left: 16px;
415
padding-right: 16px;
416
}
417
418
&.text-button.image-button {
419
padding-left: ($medium_size - 16px) / 2;
420
padding-right: ($medium_size - 16px) / 2;
421
-gtk-outline-radius: 2px;
422
border-radius: 2px;
423
424
label {
425
&:last-child { padding-left: 2px; padding-right: 16px - ($medium_size - 16px) / 2; }
426
&:first-child { padding-left: 16px - ($medium_size - 16px) / 2; padding-right: 2px; }
427
}
428
}
429
430
.linked > & { @extend %linked; }
431
432
.linked.vertical > & { @extend %linked_vertical; }
433
434
.linked > &.flat,
435
.linked.vertical > &.flat {
436
border-radius: 2px;
437
438
&.image-button {
439
-gtk-outline-radius: 100px;
440
border-radius: 100px;
441
}
442
443
&.text-button.image-button {
444
-gtk-outline-radius: 2px;
445
border-radius: 2px;
446
}
447
}
448
449
&:drop(active) {
450
// box-shadow: inset 0 0 0 2px $accent_bg_color;
451
}
452
}
453
454
@at-root %button_selected, row:selected & {
455
&:disabled { color: $insensitive_secondary_selected_fg_color; }
456
457
&.flat {
458
color: $secondary_selected_fg_color;
459
460
&:hover, &:active { color: $selected_fg_color; }
461
462
&:disabled { color: $insensitive_secondary_selected_fg_color; }
463
}
464
}
465
466
// big standalone buttons like in Documents pager
467
&.osd {
468
padding: ($large_size - 24px) / 2 ($large_size - 16px) / 2;
469
470
&.image-button { padding: ($large_size - 24px) / 2; }
471
472
&:disabled { opacity: 0; }
473
}
474
475
//overlay / OSD style
476
@at-root %osd_button,
477
.osd & {
478
}
479
480
// Suggested and Destructive Action buttons
481
@each $b_type, $b_color in (suggested-action, $suggested_color),
482
(destructive-action, $destructive_color) {
483
&.#{$b_type} {
484
background-color: $b_color;
485
color: $selected_fg_color;
486
487
// @include button(normal, $b_color, white);
488
489
// &:hover { @include button(hover, $b_color, white); }
490
491
// &:active, &:checked { @include button(active, $b_color, white); }
492
493
&:disabled { @include button(insensitive, $b_color, white); }
494
495
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
496
497
&.flat {
498
background-color: transparent;
499
color: $b_color;
500
501
// @include button(flat-normal, $b_color, white);
502
503
// &:hover { @include button(flat-hover, $b_color, white); }
504
505
// &:active, &:checked { @include button(flat-active, $b_color, white); }
506
507
&:disabled { @include button(flat-insensitive, $b_color, white); }
508
}
509
510
.osd & {
511
}
512
}
513
}
514
515
.stack-switcher > & {
516
// to position the needs attention dot, padding is added to the button
517
// child, a label needs just lateral padding while an icon needs vertical
518
// padding added too.
519
520
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
521
522
> label {
523
padding-left: 6px; // label padding
524
padding-right: 6px; //
525
}
526
527
> image {
528
padding-left: 6px; // image padding
529
padding-right: 6px; //
530
padding-top: 3px; //
531
padding-bottom: 3px; //
532
}
533
534
&.text-button {
535
// compensate text-button paddings
536
padding-left: 16px - 6px;
537
padding-right: 16px - 6px;
538
}
539
540
&.image-button {
541
// we want image buttons to have a 1:1 aspect ratio, so compensation
542
// of the padding added to the GtkImage is needed
543
padding-left: ($medium_size - 16px) / 2 - 6px;
544
padding-right: ($medium_size - 16px) / 2 - 6px;
545
}
546
547
&.needs-attention {
548
> label,
549
> image { @extend %needs_attention; }
550
551
&:checked {
552
> label,
553
> image {
554
animation: none;
555
background-image: none;
556
}
557
}
558
}
559
}
560
561
// hide separators
562
separator {
563
min-width: 0;
564
min-height: 0;
565
background: transparent;
566
}
567
568
// &.font,
569
// &.file { separator { background-color: transparent; }}
570
571
// &.font { > box > box > label { font-weight: bold; }}
572
573
// inline-toolbar buttons
574
.inline-toolbar & {
575
@extend %button_basic.flat;
576
577
&:not(.text-button) { @extend %button_basic.image-button; }
578
}
579
580
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
581
}
582
583
%needs_attention {
584
animation: needs_attention $material_slower $material_ease_out forwards;
585
background-repeat: no-repeat;
586
background-position: right 3px;
587
background-size: 6px 6px;
588
589
&:dir(rtl) { background-position: left 3px; }
590
}
591
592
// all the following is for the +|- buttons on inline toolbars, that way
593
// should really be deprecated...
594
.inline-toolbar toolbutton > button { // redefining the button look is
595
// needed since those are flat...
596
}
597
598
// More inline toolbar buttons
599
toolbar.inline-toolbar toolbutton {
600
// > button.flat { @extend %linked_middle; }
601
602
// &:first-child > button.flat { @extend %linked:first-child; }
603
604
// &:last-child > button.flat { @extend %linked:last-child; }
605
606
// &:only-child > button.flat { @extend %linked:only-child; }
607
}
608
609
%linked_middle {
610
border-radius: 0;
611
}
612
613
%linked {
614
-gtk-outline-radius: 2px;
615
616
@extend %linked_middle;
617
618
&:first-child {
619
border-top-left-radius: 2px;
620
border-bottom-left-radius: 2px;
621
}
622
623
&:last-child {
624
border-top-right-radius: 2px;
625
border-bottom-right-radius: 2px;
626
}
627
628
&:only-child {
629
border-radius: 2px;
630
}
631
}
632
633
%linked_vertical_middle {
634
border-radius: 0;
635
}
636
637
%linked_vertical{
638
-gtk-outline-radius: 2px;
639
640
@extend %linked_vertical_middle;
641
642
&:first-child {
643
border-top-left-radius: 2px;
644
border-top-right-radius: 2px;
645
}
646
647
&:last-child {
648
border-bottom-left-radius: 2px;
649
border-bottom-right-radius: 2px;
650
}
651
652
&:only-child {
653
border-radius: 2px;
654
}
655
}
656
657
/* menu buttons */
658
modelbutton.flat,
659
.menuitem.button.flat {
660
min-height: $menuitem_size;
661
padding-left: 8px;
662
padding-right: 8px;
663
border-radius: 2px;
664
color: inherit;
665
666
@extend %button_basic.flat;
667
668
&:selected { @extend %selected_items; }
669
670
check,
671
radio {
672
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
673
674
&, &:hover { background-image: none; }
675
676
&:active { animation: none; }
677
678
&:last-child { margin-left: -8px; margin-right: -16px; }
679
680
&:first-child { margin-left: -16px; margin-right: -8px; }
681
}
682
683
check:not(:indeterminate):checked { @extend %check_checked; }
684
685
// radio:not(:indeterminate):checked { @extend %radio_checked; }
686
687
check:indeterminate:checked, radio:indeterminate:checked { @extend %indeterminate_checked; }
688
}
689
690
modelbutton.flat arrow {
691
background: none;
692
693
&:hover { background: none; }
694
695
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
696
697
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
698
}
699
700
button.color {
701
min-height: $small_size;
702
min-width: $small_size;
703
padding: $container_padding;
704
705
colorswatch:only-child {
706
// &, overlay { border-radius: 0; }
707
}
708
}
709
710
711
/*********
712
* Links *
713
*********/
714
*:link {
715
&, &:hover, &:active { color: $link_color; }
716
717
&:visited {
718
&, &:hover, &:active { color: $link_visited_color; }
719
}
720
721
@at-root %link_selected,
722
&:selected,
723
*:selected & { color: $selected_fg_color; }
724
}
725
726
button:link,
727
button:visited {
728
@extend *:link;
729
730
> label { text-decoration-line: underline; }
731
}
732
733
/*****************
734
* GtkSpinButton *
735
*****************/
736
spinbutton {
737
&:not(.vertical) {
738
// in this horizontal configuration, the whole spinbutton
739
// behaves as the entry, so we extend the entry styling
740
// and nuke the style on the internal entry
741
@extend %entry;
742
743
padding: 0;
744
745
%spinbutton_entry,
746
entry {
747
min-width: $large_size - 8px * 2;
748
// reset all the other props since the spinbutton node is styled here
749
margin: 0;
750
border-image: none;
751
border-radius: 0;
752
box-shadow: none;
753
background-color: transparent;
754
}
755
756
button {
757
min-height: $small_size;
758
min-width: $small_size;
759
// margin: $container_padding;
760
padding: 0;
761
border: solid $container_padding transparent;
762
763
@extend %button_basic.flat;
764
765
@extend %button_basic.image-button;
766
767
&.up:dir(ltr),
768
&.down:dir(rtl) { margin-left: -$container_padding / 2; }
769
770
&.up:dir(rtl),
771
&.down:dir(ltr) { margin-right: -$container_padding / 2; }
772
}
773
}
774
775
// OSD horizontal
776
.osd &:not(.vertical) {
777
button {
778
}
779
}
780
781
// Vertical
782
&.vertical {
783
// in the vertical configuration, we treat the spinbutton
784
// as a box, and tweak the style of the entry in the middle
785
// so that it's linked
786
787
// FIXME: this should not be set at all, but otherwise it gets the wrong
788
// color
789
&:disabled { color: $insensitive_fg_color; }
790
791
&:drop(active) {
792
box-shadow: none;
793
}
794
795
entry {
796
min-height: $medium_size;
797
min-width: $large_size;
798
padding: 0;
799
}
800
801
button {
802
min-height: $medium_size;
803
min-width: $large_size;
804
padding: 0;
805
806
@extend %button_basic.flat;
807
808
&.up { border-radius: 2px 2px 0 0; }
809
810
&.down { border-radius: 0 0 2px 2px; }
811
}
812
}
813
814
// OSD vertical
815
.osd &.vertical button:first-child {
816
}
817
818
// Misc
819
treeview &:not(.vertical) {
820
min-height: 0;
821
border-style: none;
822
border-radius: 0;
823
824
entry {
825
min-height: 0;
826
padding: 1px 2px;
827
}
828
}
829
}
830
831
832
/**************
833
* ComboBoxes *
834
**************/
835
combobox {
836
arrow {
837
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
838
min-height: 16px;
839
min-width: 16px;
840
}
841
842
menu,
843
.menu,
844
.context-menu {
845
padding: 2px 0;
846
847
menuitem {
848
min-height: $medium_size;
849
padding: 0 ($medium_size - 16px) / 2;
850
}
851
}
852
853
&.linked {
854
button:nth-child(2) {
855
&:dir(ltr) { @extend %linked:last-child; }
856
&:dir(rtl) { @extend %linked:first-child; }
857
}
858
}
859
860
&:drop(active) { // FIXME: untested
861
box-shadow: none;
862
863
// button.combo { @extend %button_basic:drop(active); }
864
}
865
}
866
867
.linked > combobox > box > button.combo {
868
// the combo is a composite widget so the way we do button linking doesn't
869
// work, special case needed. See
870
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
871
872
&:dir(ltr),
873
&:dir(rtl) { @extend %linked_middle; } // specificity bump
874
}
875
876
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
877
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
878
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
879
880
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
881
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
882
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
883
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
884
885
886
/************
887
* Toolbars *
888
************/
889
toolbar {
890
-GtkWidget-window-dragging: true;
891
padding: $container_padding / 2;
892
background-color: $bg_color;
893
894
// on OSD
895
.osd & { background-color: transparent; }
896
897
// stand-alone OSD toolbars
898
&.osd {
899
transition: $shadow_transition;
900
padding: $container_padding;
901
border-radius: 2px;
902
box-shadow: $z-depth-2;
903
background-color: $base_color;
904
905
&:backdrop { box-shadow: $z-depth-1; }
906
907
&.left,
908
&.right,
909
&.top,
910
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
911
912
button { @extend %button_basic.flat; }
913
}
914
915
// toolbar separators
916
&.horizontal separator { margin: $container_padding / 2; }
917
&.vertical separator { margin: $container_padding / 2; }
918
919
&:not(.inline-toolbar):not(.osd) {
920
scale,
921
entry,
922
spinbutton,
923
button { margin: $container_padding / 2; }
924
925
switch { margin: ($container_padding / 2 + $container_padding) ($container_padding / 2); }
926
}
927
}
928
929
//searchbar, location-bar & inline-toolbar
930
.inline-toolbar {
931
padding: $container_padding;
932
border-style: solid;
933
border-width: 0 1px 1px;
934
border-color: $borders_color;
935
background-color: $secondary_base_color;
936
}
937
938
searchbar,
939
.location-bar {
940
padding: $container_padding;
941
border-style: solid;
942
border-width: 0 0 1px;
943
border-color: $borders_color;
944
background-color: $bg_color;
945
background-clip: border-box;
946
}
947
948
949
/***************
950
* Header bars *
951
***************/
952
%titlebar,
953
headerbar {
954
transition: background-color $material_faster $material_ease_out, color $material_faster $material_ease_out;
955
min-height: $large_size;
956
padding: 0 $container_padding;
957
box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
958
background-color: $headerbar_color;
959
color: $selected_fg_color;
960
961
&:backdrop {
962
color: $secondary_selected_fg_color;
963
}
964
965
.title {
966
padding-left: 12px;
967
padding-right: 12px;
968
font-weight: bold;
969
}
970
971
.subtitle {
972
padding-left: 12px;
973
padding-right: 12px;
974
font-size: smaller;
975
976
@extend .dim-label;
977
}
978
979
button:not(.suggested-action):not(.destructive-action) {
980
@extend %button_basic.flat;
981
982
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
983
currentColor 0%,
984
transparent 0%)
985
0 0 0 / 0 0 0px;
986
color: gtkalpha(currentColor, $enabled_opacity);
987
988
&:hover, &:active { color: currentColor; }
989
990
&:disabled {
991
color: gtkalpha(currentColor, $enabled_opacity * $disabled_opacity);
992
993
> label { color: inherit; }
994
}
995
996
&:checked {
997
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
998
currentColor 100%,
999
transparent 0%)
1000
0 0 2 / 0 0 2px;
1001
background-color: transparent;
1002
color: currentColor;
1003
1004
&:disabled {
1005
background-color: transparent;
1006
color: gtkalpha(currentColor, $disabled_opacity);
1007
1008
> label { color: inherit; }
1009
}
1010
}
1011
}
1012
1013
button.suggested-action, button.destructive-action {
1014
&:disabled {
1015
color: gtkalpha(currentColor, $disabled_opacity);
1016
1017
> label { color: inherit; }
1018
}
1019
}
1020
1021
&.selection-mode {
1022
transition: background-color 0 $material_slower, color $material_faster $material_ease_out;
1023
animation: header_ripple_effect $material_slower $material_ease_out;
1024
// box-shadow: $z-depth-1, inset 0 1px $secondary_highlight_color;
1025
background-color: $selected_bg_color;
1026
color: $selected_fg_color;
1027
1028
&:backdrop {
1029
color: $secondary_selected_fg_color;
1030
}
1031
1032
.subtitle:link { @extend *:link:selected; }
1033
1034
button:not(.suggested-action):not(.destructive-action) {
1035
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1036
currentColor 0%,
1037
transparent 0%)
1038
0 0 0 / 0 0 0px;
1039
// color: gtkalpha(currentColor, $enabled_opacity);
1040
1041
&, &:hover, &:active { color: currentColor; }
1042
1043
&:disabled {
1044
color: gtkalpha(currentColor, $disabled_opacity);
1045
1046
> label { color: inherit; }
1047
}
1048
1049
&:checked {
1050
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
1051
currentColor 100%,
1052
transparent 0%)
1053
0 0 2 / 0 0 2px;
1054
color: currentColor;
1055
1056
&:disabled {
1057
color: gtkalpha(currentColor, $disabled_opacity);
1058
1059
> label { color: inherit; }
1060
}
1061
}
1062
}
1063
1064
.selection-menu {
1065
padding-left: 16px;
1066
padding-right: 16px;
1067
1068
GtkArrow { -GtkArrow-arrow-scaling: 1; }
1069
1070
.arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1071
}
1072
}
1073
1074
.fullscreen &,
1075
.tiled &,
1076
.maximized & {
1077
border-radius: 0; // squared corners when the window is fullscreen, maximized or tiled
1078
box-shadow: $z-depth-1;
1079
}
1080
1081
&.default-decoration {
1082
min-height: $small_size;
1083
padding: $container_padding;
1084
border-width: 0;
1085
1086
button.titlebutton {
1087
min-height: $small_size;
1088
min-width: $small_size;
1089
margin: 0;
1090
padding: 0;
1091
1092
&:active { // add fallback
1093
background-image: radial-gradient(circle farthest-corner at center,
1094
gtkalpha(currentColor, $lower_opacity / 2) 100%,
1095
transparent 0%),
1096
image(gtkalpha(currentColor, $lower_opacity / 2));
1097
}
1098
}
1099
}
1100
1101
.solid-csd & {
1102
&:dir(rtl), &:dir(ltr) { // specificity bump
1103
margin-left: -1px;
1104
margin-right: -1px;
1105
margin-top: -1px;
1106
border-radius: 0;
1107
box-shadow: none;
1108
}
1109
}
1110
}
1111
1112
headerbar {
1113
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
1114
entry,
1115
spinbutton,
1116
// separator,
1117
button {
1118
margin-top: $container_padding;
1119
margin-bottom: $container_padding;
1120
}
1121
1122
switch {
1123
margin-top: $container_padding * 2;
1124
margin-bottom: $container_padding * 2;
1125
}
1126
}
1127
1128
.background:not(.tiled):not(.maximized):not(.fullscreen) .titlebar {
1129
border-top-left-radius: 2px;
1130
border-top-right-radius: 2px;
1131
}
1132
1133
headerbar {
1134
window:not(.tiled):not(.maximized):not(.fullscreen) separator:first-child + &, // tackles the paned container case
1135
window:not(.tiled):not(.maximized):not(.fullscreen) &:first-child { border-top-left-radius: 2px; }
1136
1137
window:not(.tiled):not(.maximized):not(.fullscreen) &:last-child { border-top-right-radius: 2px; }
1138
}
1139
1140
.titlebar:not(headerbar) {
1141
window.csd > & {
1142
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
1143
padding: 0;
1144
background-color: transparent;
1145
background-image: none;
1146
border-style: none;
1147
box-shadow: none;
1148
}
1149
1150
> separator {
1151
background-color: $headerbar_color;
1152
background-image: image($borders_color);
1153
}
1154
1155
@extend %titlebar;
1156
}
1157
1158
1159
/************
1160
* Pathbars *
1161
************/
1162
.path-bar button {
1163
&.text-button, &.image-button, & {
1164
padding-left: 6px;
1165
padding-right: 6px;
1166
}
1167
1168
&.text-button.image-button, & {
1169
// label:last-child { padding-left: 2px; padding-right: 8px; }
1170
// label:first-child { padding-left: 8px; padding-right: 2px; }
1171
}
1172
1173
image {
1174
padding-left: ($medium_size - 16px) / 2 - 6px;
1175
padding-right: ($medium_size - 16px) / 2 - 6px;
1176
}
1177
1178
&.slider-button {
1179
padding-left: 0;
1180
padding-right: 0;
1181
}
1182
}
1183
1184
1185
/**************
1186
* Tree Views *
1187
**************/
1188
treeview.view {
1189
@at-root * {
1190
-GtkTreeView-horizontal-separator: 4;
1191
-GtkTreeView-grid-line-width: 1;
1192
-GtkTreeView-grid-line-pattern: '';
1193
-GtkTreeView-tree-line-width: 1;
1194
-GtkTreeView-tree-line-pattern: '';
1195
-GtkTreeView-expander-size: 16;
1196
}
1197
1198
border-left-color: $track_color; // this is actually the tree lines color,
1199
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
1200
1201
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
1202
1203
&:hover, &:active, &:selected { border-radius: 0; }
1204
1205
&.separator {
1206
min-height: 1px + 2px * 2;
1207
color: $borders_color;
1208
}
1209
1210
&:drop(active) {
1211
border-style: solid none;
1212
border-width: 1px;
1213
border-color: $accent_bg_color;
1214
1215
&.after { border-top-style: none; }
1216
1217
&.before { border-bottom-style: none; }
1218
}
1219
1220
&.expander {
1221
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1222
-gtk-icon-transform: rotate(-90deg);
1223
1224
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
1225
1226
&:checked { -gtk-icon-transform: unset; }
1227
1228
color: $secondary_fg_color;
1229
1230
&:hover, &:active { color: $fg_color; }
1231
1232
&:disabled { color: $insensitive_secondary_fg_color; }
1233
1234
&:selected {
1235
color: $secondary_selected_fg_color;
1236
1237
&:hover, &:active { color: $selected_fg_color; }
1238
1239
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1240
}
1241
}
1242
1243
&.progressbar { // progress bar in treeviews
1244
border-style: none none solid;
1245
border-width: $bar_size;
1246
border-color: $selected_bg_color;
1247
background-color: transparent;
1248
background-image: none;
1249
1250
&:selected { border-color: currentColor; }
1251
}
1252
1253
&.trough { // progress bar trough in treeviews
1254
border-style: none none solid;
1255
border-width: $bar_size;
1256
border-color: scale-alpha($selected_bg_color, $lower_opacity);
1257
background-color: transparent;
1258
background-image: none;
1259
1260
&:selected { border-color: $track_color; }
1261
}
1262
1263
header {
1264
button {
1265
@extend row.activatable;
1266
1267
padding: 2px 6px;
1268
border-style: none solid solid none;
1269
border-width: 1px;
1270
border-color: $borders_color;
1271
border-radius: 0;
1272
background-clip: border-box;
1273
1274
&, &:hover, &:active { box-shadow: none; }
1275
1276
&, &:disabled { background-color: $base_color; }
1277
1278
&:last-child { border-right-style: none; }
1279
}
1280
}
1281
1282
button.dnd,
1283
header.button.dnd { // for treeview-like derive widgets
1284
padding: 2px 6px;
1285
border-style: none solid solid;
1286
border-width: 1px;
1287
border-color: $borders_color;
1288
border-radius: 0;
1289
box-shadow: none;
1290
background-color: $base_color;
1291
background-clip: border-box;
1292
color: $selected_bg_color;
1293
}
1294
1295
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
1296
}
1297
1298
1299
/*********
1300
* Menus *
1301
*********/
1302
menubar,
1303
.menubar {
1304
-GtkWidget-window-dragging: true;
1305
padding: 0;
1306
// box-shadow: inset 0 -1px $borders_color;
1307
background-color: $headerbar_color;
1308
1309
> menuitem {
1310
transition: background-color $material_faster $material_ease_out;
1311
min-height: 20px;
1312
padding: 4px 8px;
1313
color: $secondary_selected_fg_color;
1314
1315
&:hover { //Seems like it :hover even with keyboard focus
1316
transition: none;
1317
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1318
color: $selected_fg_color;
1319
}
1320
1321
&:disabled { color: $insensitive_secondary_selected_fg_color; }
1322
}
1323
}
1324
1325
menu,
1326
.menu,
1327
.context-menu {
1328
margin: 4px 0;
1329
padding: 4px 0;
1330
background-color: $base_color;
1331
border: 1px solid $borders_color; // adds borders in a non composited env
1332
1333
.csd & {
1334
border: none; // axes borders in a composited env
1335
border-radius: 2px;
1336
}
1337
1338
menuitem {
1339
transition: background-color $material_faster $material_ease_out;
1340
min-height: 20px;
1341
min-width: 40px;
1342
padding: 4px 8px;
1343
font: initial;
1344
text-shadow: none;
1345
1346
&:hover {
1347
transition: none;
1348
background-color: gtkalpha(currentColor, $lower_opacity / 2);
1349
}
1350
1351
&:disabled { color: $insensitive_fg_color; }
1352
1353
// submenu indicators
1354
arrow {
1355
min-height: 16px;
1356
min-width: 16px;
1357
1358
&:dir(ltr) {
1359
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1360
margin-left: 8px;
1361
}
1362
1363
&:dir(rtl) {
1364
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
1365
margin-right: 8px;
1366
}
1367
}
1368
1369
// avoids labels color being overridden, see
1370
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
1371
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
1372
}
1373
1374
// overflow arrows
1375
> arrow {
1376
min-height: 16px;
1377
min-width: 16px;
1378
padding: 4px;
1379
border-radius: 0;
1380
background-color: $base_color;
1381
color: $secondary_fg_color;
1382
1383
&.top {
1384
margin-top: -4px;
1385
border-bottom: 1px solid $borders_color;
1386
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1387
}
1388
1389
&.bottom {
1390
margin-bottom: -4px;
1391
border-top: 1px solid $borders_color;
1392
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1393
}
1394
1395
&:hover {
1396
background-image: image(gtkalpha(currentColor, $lower_opacity / 2));
1397
color: $fg_color;
1398
}
1399
1400
&:disabled {
1401
border-color: transparent;
1402
background-color: transparent;
1403
color: transparent;
1404
// color: $insensitive_secondary_fg_color;
1405
}
1406
}
1407
1408
separator { margin: 4px 0; }
1409
}
1410
1411
menuitem {
1412
accelerator { color: gtkalpha(currentColor, $hint_opacity); }
1413
1414
check,
1415
radio {
1416
&:dir(ltr) { margin-right: -8px; margin-left: -16px; }
1417
&:dir(rtl) { margin-right: -16px; margin-left: -8px; }
1418
}
1419
}
1420
1421
.csd.popup { border-radius: 2px; }
1422
1423
1424
/***************
1425
* Popovers *
1426
***************/
1427
popover.background {
1428
transition: $shadow_transition;
1429
padding: 0;
1430
box-shadow: $z-depth-2;
1431
background-color: $light_color;
1432
1433
&:backdrop { box-shadow: $z-depth-1; }
1434
1435
&, .csd & {
1436
border-style: solid;
1437
border-width: 1px;
1438
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1439
border-radius: 2px + 1px;
1440
}
1441
1442
> list,
1443
> .view,
1444
> toolbar {
1445
border-style: none;
1446
box-shadow: none;
1447
background-color: transparent;
1448
}
1449
1450
&, .csd & {
1451
&.touch-selection,
1452
&.magnifier,
1453
&.osd { @extend %osd; }
1454
}
1455
1456
separator { margin: 4px 0; }
1457
1458
list separator { margin: 0; }
1459
}
1460
1461
/*************
1462
* Notebooks *
1463
*************/
1464
notebook {
1465
> header {
1466
border-width: 1px;
1467
border-color: $borders_color;
1468
background-color: $bg_color;
1469
background-clip: border-box;
1470
1471
&.top {
1472
border-bottom-style: solid;
1473
> tabs {
1474
margin-bottom: -1px;
1475
> tab {
1476
1477
&:hover { box-shadow: inset 0 -2px $track_color; }
1478
1479
&:checked { box-shadow: inset 0 -2px $selected_bg_color; }
1480
}
1481
}
1482
}
1483
1484
&.bottom {
1485
border-top-style: solid;
1486
> tabs {
1487
margin-top: -1px;
1488
> tab {
1489
1490
&:hover { box-shadow: inset 0 2px $track_color; }
1491
1492
&:checked { box-shadow: inset 0 2px $selected_bg_color; }
1493
}
1494
}
1495
}
1496
1497
&.left {
1498
border-right-style: solid;
1499
> tabs {
1500
margin-right: -1px;
1501
> tab {
1502
1503
&:hover { box-shadow: inset -2px 0 $track_color; }
1504
1505
&:checked { box-shadow: inset -2px 0 $selected_bg_color; }
1506
}
1507
}
1508
}
1509
1510
&.right {
1511
border-left-style: solid;
1512
> tabs {
1513
margin-left: -1px;
1514
> tab {
1515
1516
&:hover { box-shadow: inset 2px 0 $track_color; }
1517
1518
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
1519
}
1520
}
1521
}
1522
1523
&.top > tabs > arrow {
1524
@extend %notebook_vert_arrows;
1525
1526
border-top-style: none;
1527
}
1528
1529
&.bottom > tabs > arrow {
1530
@extend %notebook_vert_arrows;
1531
1532
border-bottom-style: none;
1533
}
1534
1535
@at-root %notebook_vert_arrows {
1536
padding-left: 4px;
1537
padding-right: 4px;
1538
1539
&.down {
1540
margin-left: -8px;
1541
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
1542
}
1543
1544
&.up {
1545
margin-right: -8px;
1546
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1547
}
1548
}
1549
1550
&.left > tabs > arrow {
1551
@extend %notebook_horz_arrows;
1552
1553
border-left-style: none;
1554
}
1555
1556
&.right > tabs > arrow {
1557
@extend %notebook_horz_arrows;
1558
1559
border-right-style: none;
1560
}
1561
1562
@at-root %notebook_horz_arrows {
1563
padding-top: 4px;
1564
padding-bottom: 4px;
1565
1566
&.down {
1567
margin-top: -8px;
1568
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
1569
}
1570
1571
&.up {
1572
margin-bottom: -8px;
1573
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1574
}
1575
}
1576
1577
> tabs > arrow {
1578
@extend %button_basic.flat;
1579
1580
min-height: 16px;
1581
min-width: 16px;
1582
border-radius: 0;
1583
}
1584
1585
tab {
1586
transition: $material_transition;
1587
min-height: $small_size;
1588
min-width: $small_size;
1589
padding: $container_padding 12px;
1590
1591
outline-offset: -6px;
1592
1593
border-width: 1px; // for reorderable tabs
1594
border-color: transparent; //
1595
1596
color: $secondary_fg_color;
1597
font-weight: 500;
1598
1599
&:hover {
1600
color: $fg_color;
1601
1602
&.reorderable-page {
1603
border-color: $borders_color;
1604
background-color: $secondary_base_color;
1605
}
1606
}
1607
1608
&:disabled { color: $insensitive_secondary_fg_color; }
1609
1610
&:checked {
1611
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
1612
color: $fg_color;
1613
1614
&:disabled { color: $insensitive_fg_color; }
1615
1616
&.reorderable-page {
1617
border-color: $borders_color;
1618
background-color: $base_color;
1619
}
1620
}
1621
1622
// colors the button like the label, overridden otherwise
1623
button.flat {
1624
// FIXME: generalize .small-button?
1625
min-width: $small_size;
1626
min-height: $small_size;
1627
padding: 0;
1628
1629
@extend %button_basic.image-button;
1630
1631
&:last-child {
1632
margin-left: $container_padding;
1633
margin-right: $container_padding - 12px;
1634
}
1635
1636
&:first-child {
1637
margin-left: $container_padding - 12px;
1638
margin-right: $container_padding;
1639
}
1640
}
1641
}
1642
1643
&.top,
1644
&.bottom {
1645
tabs {
1646
padding-left: 8px;
1647
padding-right: 8px;
1648
1649
&:not(:only-child) {
1650
&:first-child { margin-left: 0; }
1651
&:last-child { margin-right: 0; }
1652
}
1653
1654
tab {
1655
&.reorderable-page {
1656
margin: 0 -1px;
1657
border-style: none solid;
1658
}
1659
}
1660
}
1661
}
1662
1663
&.left,
1664
&.right {
1665
tabs {
1666
padding-top: 8px;
1667
padding-bottom: 8px;
1668
1669
&:not(:only-child) {
1670
&:first-child { margin-top: 0; }
1671
&:last-child { margin-bottom: 0; }
1672
}
1673
1674
tab {
1675
&.reorderable-page {
1676
margin: -1px 0;
1677
border-style: solid none;
1678
}
1679
}
1680
}
1681
}
1682
}
1683
1684
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
1685
background-color: $base_color;
1686
1687
entry,
1688
spinbutton:not(.vertical) { @extend %entry.flat; }
1689
1690
revealer entry,
1691
revealer spinbutton:not(.vertical) { @extend %entry; }
1692
1693
spinbutton:not(.vertical) entry { @extend %spinbutton_entry; }
1694
}
1695
}
1696
1697
1698
/**************
1699
* Scrollbars *
1700
**************/
1701
scrollbar {
1702
$_slider_min_length: 24px;
1703
1704
// disable steppers
1705
@at-root * {
1706
-GtkScrollbar-has-backward-stepper: false;
1707
-GtkScrollbar-has-forward-stepper: false;
1708
}
1709
1710
transition: $material_transition;
1711
background-color: $base_color;
1712
background-clip: $extra_background_clip;
1713
1714
// scrollbar border
1715
&.top { border-bottom: 1px solid $borders_color; }
1716
&.bottom { border-top: 1px solid $borders_color; }
1717
&.left { border-right: 1px solid $borders_color; }
1718
&.right { border-left: 1px solid $borders_color; }
1719
1720
// slider
1721
slider {
1722
transition: all $material_faster $material_ease_out, margin 0, border-width 0;
1723
min-width: 8px;
1724
min-height: 8px;
1725
border: 4px solid transparent;
1726
border-radius: 100px;
1727
background-clip: padding-box;
1728
background-color: $tertiary_fg_color;
1729
1730
&:hover { background-color: $secondary_fg_color; }
1731
1732
&:active { background-color: $fg_color; }
1733
1734
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1735
}
1736
1737
&.fine-tune {
1738
slider {
1739
transition: all $material_faster $material_ease_out, margin 0, border-width 0, min-width 0, min-height 0;
1740
min-width: 4px;
1741
min-height: 4px;
1742
}
1743
1744
&.horizontal slider { margin: 2px 0; }
1745
1746
&.vertical slider { margin: 0 2px; }
1747
}
1748
1749
&.overlay-indicator {
1750
&:not(.dragging):not(.hovering) {
1751
border-color: transparent;
1752
background-color: transparent;
1753
1754
slider {
1755
min-width: 4px;
1756
min-height: 4px;
1757
margin: 2px;
1758
border: 2px solid scale-alpha($base_color, $lower_opacity);
1759
}
1760
1761
button {
1762
min-width: 4px;
1763
min-height: 4px;
1764
margin: 2px;
1765
border: 2px solid scale-alpha($base_color, $lower_opacity);
1766
border-radius: 100px;
1767
background-color: $tertiary_fg_color;
1768
background-clip: padding-box;
1769
-gtk-icon-source: none;
1770
1771
&:disabled { background-color: $insensitive_tertiary_fg_color; }
1772
}
1773
1774
&.horizontal {
1775
slider { min-width: $_slider_min_length; }
1776
1777
button { min-width: 8px; }
1778
}
1779
1780
&.vertical {
1781
slider { min-height: $_slider_min_length; }
1782
1783
button { min-height: 8px; }
1784
}
1785
}
1786
1787
&.dragging,
1788
&.hovering { background-color: scale-alpha($base_color, $higher_opacity); }
1789
}
1790
1791
&.horizontal slider { min-width: $_slider_min_length; }
1792
1793
&.vertical slider { min-height: $_slider_min_length; }
1794
1795
// button styling
1796
button {
1797
@extend %button_basic.flat;
1798
min-width: 16px;
1799
min-height: 16px;
1800
padding: 0;
1801
border-radius: 0;
1802
}
1803
1804
// button icons
1805
&.vertical {
1806
button {
1807
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1808
1809
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
1810
}
1811
}
1812
1813
&.horizontal {
1814
button {
1815
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
1816
1817
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
1818
}
1819
}
1820
}
1821
1822
1823
/**********
1824
* Switch *
1825
**********/
1826
switch {
1827
transition: $material_transition;
1828
margin: $container_padding 0;
1829
border: 4px solid transparent;
1830
border-radius: 100px;
1831
background-color: $track_color;
1832
background-clip: padding-box;
1833
font-size: 0;
1834
1835
&:disabled { color: $insensitive_fg_color; }
1836
1837
&:checked {
1838
background-color: scale-alpha($accent_bg_color, 0.5);
1839
1840
&:disabled {
1841
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1842
color: $insensitive_fg_color;
1843
}
1844
}
1845
1846
slider {
1847
@include entry(normal);
1848
1849
transition: $material_transition, margin 0;
1850
min-width: $small_size;
1851
min-height: $small_size;
1852
margin: -4px 0 -4px -4px;
1853
-gtk-outline-radius: 100px;
1854
border-radius: 100px;
1855
}
1856
1857
&:hover slider { @include entry(focus); }
1858
1859
&:disabled slider { @include entry(insensitive); }
1860
1861
&:checked slider {
1862
transition: $material_transition, margin 0, background-image 0, background-color 0 $material_slower;
1863
animation: needs_attention $material_slower $material_ease_out;
1864
margin: -4px -4px -4px 0;
1865
background-color: $accent_bg_color;
1866
color: $selected_fg_color;
1867
}
1868
1869
&:checked:disabled slider { animation: none; }
1870
1871
row:selected & {
1872
}
1873
}
1874
1875
1876
/*************************
1877
* Check and Radio items *
1878
*************************/
1879
// draw regular check and radio items using our PNG assets
1880
// all assets are rendered from assets.svg. never add pngs directly
1881
1882
//selection-mode
1883
@each $s,$as in ('','-selectionmode'),
1884
(':hover', '-hover-selectionmode'),
1885
(':checked', '-checked-selectionmode'),
1886
(':checked:hover', '-checked-hover-selectionmode') {
1887
.view.content-view.check#{$s}:not(list) {
1888
-gtk-icon-shadow: $z-depth-1;
1889
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
1890
url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
1891
margin: 8px;
1892
background-color: transparent;
1893
}
1894
}
1895
1896
checkbutton.text-button,
1897
radiobutton.text-button {
1898
// this is for a nice focus on check and radios text
1899
padding: 2px;
1900
outline-offset: 0;
1901
1902
label:not(:only-child) { margin: 0 4px; }
1903
}
1904
1905
check,
1906
radio {
1907
min-height: 24px;
1908
min-width: 24px;
1909
margin: -12px;
1910
padding: 12px;
1911
1912
@extend %button_basic.flat;
1913
1914
@extend %button_basic.image-button;
1915
1916
&:checked, &:checked:disabled { background-color: transparent; }
1917
1918
&:checked, &:indeterminate { color: $accent_bg_color; }
1919
1920
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
1921
1922
// &:only-child { margin: -12px; }
1923
1924
row &:not(:checked):not(:indeterminate) {
1925
color: gtkalpha(currentColor, $enabled_opacity);
1926
1927
&:hover, &:active { color: currentColor; }
1928
}
1929
1930
menu menuitem & {
1931
transition: none;
1932
margin: -16px; // this is a workaround for a menu check/radio size allocation issue
1933
1934
&:not(:checked):not(:indeterminate) { color: gtkalpha(currentColor, $hint_opacity); }
1935
1936
&, &:hover, &:disabled {
1937
background-image: none;
1938
// color: inherit;
1939
// animation: none;
1940
}
1941
}
1942
}
1943
1944
%check,
1945
check {
1946
& { -gtk-icon-source: image(-gtk-recolor(url("assets/check-unchecked-symbolic.svg")),
1947
-gtk-recolor(url("assets/check-unchecked-symbolic.png"))); }
1948
1949
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-checked-symbolic.svg")),
1950
-gtk-recolor(url("assets/check-checked-symbolic.png"))); }
1951
1952
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/check-dash-symbolic.svg")),
1953
-gtk-recolor(url("assets/check-dash-symbolic.png"))); }
1954
}
1955
1956
%radio,
1957
radio {
1958
& { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-unchecked-symbolic.svg")),
1959
-gtk-recolor(url("assets/radio-unchecked-symbolic.png"))); }
1960
1961
// &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
1962
// -gtk-recolor(url("assets/radio-checked-symbolic.png"))); }
1963
1964
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/radio-dash-symbolic.svg")),
1965
-gtk-recolor(url("assets/radio-dash-symbolic.png"))); }
1966
1967
border-image: -gtk-gradient(radial,
1968
center center, 0,
1969
center center, 0.001,
1970
to($accent_bg_color),
1971
to(transparent))
1972
24 / 24px;
1973
1974
&:checked {
1975
border-image: -gtk-gradient(radial,
1976
center center, 0,
1977
center center, (10 / 48 / 2),
1978
to($accent_bg_color),
1979
to(transparent))
1980
24 / 24px;
1981
}
1982
1983
&:checked:disabled {
1984
border-image: -gtk-gradient(radial,
1985
center center, 0,
1986
center center, (10 / 48 / 2),
1987
to(scale-alpha($accent_bg_color, $disabled_opacity)),
1988
to(transparent))
1989
24 / 24px;
1990
}
1991
1992
&:indeterminate:checked {
1993
border-image: -gtk-gradient(radial,
1994
center center, 0,
1995
center center, 0.001,
1996
to($accent_bg_color),
1997
to(transparent))
1998
24 / 24px;
1999
}
2000
}
2001
2002
// let's animate things
2003
@keyframes check_check {
2004
from { -gtk-icon-transform: rotate(90deg); }
2005
to { -gtk-icon-transform: unset; }
2006
}
2007
2008
@keyframes check_radio { // FIXME: cannot animate border-image
2009
from {
2010
border-image: -gtk-gradient(radial,
2011
center center, 0,
2012
center center, 0.001,
2013
to($accent_bg_color),
2014
to(transparent))
2015
24 / 24px;
2016
}
2017
2018
to {
2019
border-image: -gtk-gradient(radial,
2020
center center, 0,
2021
center center, (10 / 48 / 2),
2022
to($accent_bg_color),
2023
to(transparent))
2024
24 / 24px;
2025
}
2026
}
2027
2028
@keyframes check_indeterminate {
2029
from { -gtk-icon-transform: unset; }
2030
50% { -gtk-icon-transform: scale(0, 1); }
2031
to { -gtk-icon-transform: unset; }
2032
}
2033
2034
%check_checked,
2035
check:not(:indeterminate):checked { animation: check_check $material_slower $material_ease; }
2036
2037
check:not(:indeterminate):checked:active { animation: check_check $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2038
2039
// %radio_checked,
2040
// radio:not(:indeterminate):checked { animation: check_radio $material_slower $material_ease; }
2041
2042
// radio:not(:indeterminate):checked:active { animation: check_radio $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2043
2044
%indeterminate_checked,
2045
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate $material_slower $material_ease; }
2046
2047
check:indeterminate:checked:active, radio:indeterminate:checked:active { animation: check_indeterminate $material_slower $material_ease, flat_ripple_effect $material_slower $material_ease_out forwards; }
2048
2049
// no animations in menus
2050
menu menuitem {
2051
check:not(:indeterminate):checked,
2052
radio:not(:indeterminate):checked,
2053
check:indeterminate:checked,
2054
radio:indeterminate:checked { animation: none; }
2055
}
2056
2057
treeview.view check,
2058
treeview.view radio {
2059
padding: 0;
2060
2061
&:checked:hover, &:selected:checked:hover { background-image: none; }
2062
2063
& {
2064
color: $secondary_fg_color;
2065
2066
&:hover, &:active { color: $fg_color; }
2067
2068
&:disabled { color: $insensitive_secondary_fg_color; }
2069
2070
&:checked, &:indeterminate { color: $accent_bg_color; }
2071
2072
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2073
}
2074
2075
&:selected {
2076
color: $secondary_selected_fg_color;
2077
2078
&:hover, &:active { color: $selected_fg_color; }
2079
2080
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2081
2082
&:checked, &:indeterminate { color: $accent_bg_color; }
2083
2084
&:checked:disabled, &:indeterminate:disabled { color: scale-alpha($accent_bg_color, $disabled_opacity); }
2085
}
2086
}
2087
2088
treeview.view radio:checked {
2089
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
2090
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
2091
border-image: none;
2092
}
2093
2094
2095
/************
2096
* GtkScale *
2097
************/
2098
scale {
2099
// sizing
2100
$_marks_lenght: 8px;
2101
$_marks_distance: 8px;
2102
2103
min-height: $medium_size - 24px;
2104
min-width: $medium_size - 24px;
2105
padding: (24px / 2);
2106
2107
* { transition: $material_transition; }
2108
2109
// the slider is inside the trough, so to have make it bigger there's a negative margin
2110
slider {
2111
min-height: 24px;
2112
min-width: 24px;
2113
margin: ($bar_size - 24px) / 2;
2114
}
2115
2116
// the backing bit
2117
trough {
2118
outline-offset: 2px;
2119
background-color: $track_color;
2120
2121
&:disabled { color: $insensitive_fg_color; }
2122
}
2123
2124
// the colored part of the backing bit
2125
highlight {
2126
background-color: $accent_bg_color;
2127
2128
&:disabled { background-color: transparent; }
2129
}
2130
2131
// this is another differently styled part of the backing bit, the most relevant use case is for example
2132
// in media player to indicate how much video stream as been cached
2133
fill {
2134
background-color: $track_color;
2135
2136
&:disabled { background-color: transparent; }
2137
}
2138
2139
slider {
2140
transition: all $material_faster $material_ease;
2141
// border-radius: 100%;
2142
// background-color: $accent_bg_color;
2143
background-repeat: no-repeat;
2144
background-position: center;
2145
2146
@each $s,$as in ('',''),
2147
(':disabled','-insensitive') {
2148
&#{$s} {
2149
$_url: 'assets/slider#{$as}#{$asset_suffix}';
2150
background-image: -gtk-scaled(url('#{$_url}.png'),
2151
url('#{$_url}@2.png'));
2152
}
2153
}
2154
2155
background-size: calc(100% - 8px);
2156
2157
&:hover { background-size: calc(100% - 4px); }
2158
2159
&:active { background-size: calc(100% - 0px); }
2160
}
2161
2162
// click-and-hold the slider to activate
2163
&.fine-tune {
2164
// to make the slider shrink in fine-tune mode
2165
slider { background-size: calc(100% - 12px); }
2166
}
2167
2168
value { color: gtkalpha(currentColor, $hint_opacity); }
2169
2170
marks {
2171
color: $track_color;
2172
2173
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
2174
(bottom, bottom, top),
2175
(top, left, right),
2176
(bottom, right, left) {
2177
&.#{$marks_class} {
2178
margin-#{$marks_margin}: $_marks_distance;
2179
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
2180
}
2181
}
2182
}
2183
2184
&.horizontal {
2185
indicator {
2186
min-height: $_marks_lenght;
2187
min-width: 1px;
2188
}
2189
}
2190
2191
&.vertical {
2192
indicator {
2193
min-height: 1px;
2194
min-width: $_marks_lenght;
2195
}
2196
}
2197
2198
// *WARNING* scale with marks madness following
2199
2200
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
2201
$suffix: if($variant == 'light', '', '-dark');
2202
2203
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
2204
('vertical', 'vert') {
2205
@each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
2206
('scale-has-marks-below', ':first-child:not(:only-child)') {
2207
@each $state, $state_infix in ('', ''),
2208
(':disabled', '-insensitive') {
2209
&.#{$dir_class} {
2210
%#{$marks_infix}-#{$dir_infix},
2211
contents#{$nth_child} > trough > slider {
2212
&#{$state} {
2213
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
2214
2215
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
2216
}
2217
2218
@if $dir_class == 'horizontal' {
2219
min-height: 30px;
2220
min-width: 24px;
2221
2222
@if $marks_infix == 'scale-has-marks-above' {
2223
margin-top: -16px;
2224
2225
background-position: center calc(100% - 4px);
2226
2227
&:hover { background-position: center calc(100% - 2px); }
2228
2229
&:active { background-position: center calc(100% - 0px); }
2230
}
2231
2232
@if $marks_infix == 'scale-has-marks-below' {
2233
margin-bottom: -16px;
2234
2235
background-position: center calc(4px);
2236
2237
&:hover { background-position: center calc(2px); }
2238
2239
&:active { background-position: center calc(0px); }
2240
}
2241
}
2242
2243
@if $dir_class == 'vertical' {
2244
min-height: 24px;
2245
min-width: 30px;
2246
2247
@if $marks_infix == 'scale-has-marks-above' {
2248
margin-left: -16px;
2249
2250
background-position: calc(4px) center;
2251
2252
&:hover { background-position: calc(2px) center; }
2253
2254
&:active { background-position: calc(0px) center; }
2255
}
2256
2257
@if $marks_infix == 'scale-has-marks-below' {
2258
margin-right: -16px;
2259
2260
background-position: calc(100% - 4px) center;
2261
2262
&:hover { background-position: calc(100% - 2px) center; }
2263
2264
&:active { background-position: calc(100% - 0px) center; }
2265
}
2266
}
2267
}
2268
2269
@at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
2270
&.fine-tune contents#{$nth_child} > trough > slider {
2271
// bigger negative margins to make the trough grow here as well
2272
2273
@if $dir_class == 'horizontal' {
2274
@if $marks_infix == 'scale-has-marks-above' { background-position: center calc(100% - 6px); }
2275
2276
@if $marks_infix == 'scale-has-marks-below' { background-position: center calc(6px); }
2277
}
2278
2279
@if $dir_class == 'vertical' {
2280
@if $marks_infix == 'scale-has-marks-above' { background-position: calc(6px) center; }
2281
2282
@if $marks_infix == 'scale-has-marks-below' { background-position: calc(100% - 6px) center; }
2283
}
2284
}
2285
}
2286
}
2287
}
2288
}
2289
2290
&.color {
2291
min-height: 0;
2292
min-width: 0;
2293
2294
&.horizontal {
2295
padding: 0 0 12px 0;
2296
2297
trough {
2298
padding-bottom: $bar_size;
2299
}
2300
2301
slider {
2302
@extend %scale-has-marks-above-horz;
2303
2304
margin-bottom: -10px - $bar_size;
2305
margin-top: 0;
2306
}
2307
}
2308
2309
&.vertical {
2310
&:dir(ltr) {
2311
padding: 0 0 0 12px;
2312
2313
trough {
2314
padding-left: $bar_size;
2315
}
2316
2317
slider {
2318
@extend %scale-has-marks-below-vert;
2319
2320
margin-left: -10px - $bar_size;
2321
margin-right: 0;
2322
}
2323
}
2324
2325
&:dir(rtl) {
2326
padding: 0 12px 0 0;
2327
2328
trough {
2329
padding-right: $bar_size;
2330
}
2331
2332
slider {
2333
@extend %scale-has-marks-above-vert;
2334
2335
margin-right: -10px - $bar_size;
2336
margin-left: 0;
2337
}
2338
}
2339
}
2340
2341
&.fine-tune {
2342
&.horizontal {
2343
slider {
2344
@extend %scale-has-marks-above-horz-fine-tune;
2345
}
2346
}
2347
2348
&.vertical {
2349
&:dir(ltr) {
2350
slider {
2351
@extend %scale-has-marks-below-vert-fine-tune;
2352
}
2353
}
2354
2355
&:dir(rtl) {
2356
slider {
2357
@extend %scale-has-marks-above-vert-fine-tune;
2358
}
2359
}
2360
}
2361
}
2362
}
2363
}
2364
2365
2366
/*****************
2367
* Progress bars *
2368
*****************/
2369
progressbar {
2370
// sizing
2371
&.horizontal {
2372
trough,
2373
progress { min-height: $bar_size; }
2374
}
2375
2376
&.vertical {
2377
trough,
2378
progress { min-width: $bar_size; }
2379
}
2380
2381
// FIXME: insensitive state missing and some other state should be set probably
2382
color: $tertiary_fg_color;
2383
font-size: smaller;
2384
2385
trough { background-color: scale-alpha($selected_bg_color, $lower_opacity); }
2386
2387
progress { background-color: $selected_bg_color; }
2388
2389
&.osd { // progressbar.osd used for epiphany page loading progress
2390
// min-width: $bar_size;
2391
// min-height: $bar_size;
2392
// background-color: transparent;
2393
2394
// trough { background-color: transparent; }
2395
2396
progress {
2397
}
2398
}
2399
}
2400
2401
2402
/*************
2403
* Level Bar *
2404
*************/
2405
levelbar {
2406
block {
2407
min-width: $medium_size;
2408
min-height: $bar_size;
2409
}
2410
2411
&.vertical block {
2412
min-width: $bar_size;
2413
min-height: $medium_size;
2414
}
2415
2416
trough {
2417
padding: 2px;
2418
border-radius: 2px;
2419
2420
@include entry(normal);
2421
2422
&:disabled { @include entry(insensitive); }
2423
}
2424
2425
&.horizontal.discrete block { margin: 0 1px; }
2426
2427
&.vertical.discrete block { margin: 1px 0; }
2428
2429
&.horizontal.discrete trough { padding: 2px 1px; }
2430
2431
&.vertical.discrete trough { padding: 1px 2px; }
2432
2433
block {
2434
&.low {
2435
background-color: $warning_color;
2436
}
2437
2438
&.high,
2439
&:not(.empty) {
2440
background-color: $selected_bg_color;
2441
}
2442
2443
&.full {
2444
background-color: $success_color;
2445
}
2446
2447
&.empty {
2448
background-color: $track_color;
2449
color: $insensitive_fg_color;
2450
}
2451
}
2452
}
2453
2454
2455
/****************
2456
* Print dialog *
2457
*****************/
2458
printdialog {
2459
paper {
2460
padding: 0;
2461
border: 1px solid $borders_color;
2462
background: $base_color;
2463
color: $fg_color;
2464
}
2465
2466
.dialog-action-box { margin: 12px; }
2467
}
2468
2469
2470
/**********
2471
* Frames *
2472
**********/
2473
frame > border,
2474
.frame {
2475
margin: 0;
2476
padding: 0;
2477
border: 1px solid $borders_color;
2478
border-radius: 0;
2479
box-shadow: none;
2480
2481
&.flat { border-style: none; }
2482
}
2483
2484
actionbar > revealer > box {
2485
padding: $container_padding;
2486
border-top: 1px solid $borders_color;
2487
}
2488
2489
scrolledwindow {
2490
viewport.frame { // avoid double borders when viewport inside scrolled window
2491
border-style: none;
2492
}
2493
2494
// This is used when content is touch-dragged past boundaries.
2495
// draws a box on top of the content, the size changes programmatically.
2496
overshoot {
2497
&.top { @include overshoot(top); }
2498
2499
&.bottom { @include overshoot(bottom); }
2500
2501
&.left { @include overshoot(left); }
2502
2503
&.right { @include overshoot(right); }
2504
}
2505
2506
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2507
undershoot {
2508
&.top { @include undershoot(top); }
2509
2510
&.bottom { @include undershoot(bottom); }
2511
2512
&.left { @include undershoot(left); }
2513
2514
&.right { @include undershoot(right); }
2515
}
2516
2517
junction { // the small square between two scrollbars
2518
border-style: solid none none solid;
2519
border-width: 1px;
2520
border-color: $borders_color;
2521
background-color: $base_color;
2522
2523
&:dir(rtl) { border-style: solid solid none none; }
2524
}
2525
}
2526
2527
//vbox and hbox separators
2528
separator {
2529
min-width: 1px;
2530
min-height: 1px;
2531
background: $borders_color;
2532
}
2533
2534
2535
/*********
2536
* Lists *
2537
*********/
2538
list {
2539
border-color: $borders_color;
2540
background-color: $base_color;
2541
2542
row { padding: 2px; }
2543
}
2544
2545
row {
2546
transition: $material_transition;
2547
2548
&:hover { transition: none; }
2549
2550
&.activatable {
2551
background-image: radial-gradient(circle farthest-corner at center,
2552
gtkalpha(currentColor, 0) 100%,
2553
transparent 0%),
2554
image(gtkalpha(currentColor, 0));
2555
2556
&:hover {
2557
background-image: radial-gradient(circle farthest-corner at center,
2558
gtkalpha(currentColor, 0) 100%,
2559
transparent 0%),
2560
image(gtkalpha(currentColor, 0.05));
2561
}
2562
2563
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
2564
&:active {
2565
transition: $material_transition, background-image 0;
2566
animation: row_ripple_effect $material_slower $material_ease_out forwards;
2567
}
2568
}
2569
2570
&:selected { @extend %selected_items; }
2571
}
2572
2573
2574
/*********************
2575
* App Notifications *
2576
*********************/
2577
.app-notification,
2578
.app-notification.frame {
2579
@extend %osd;
2580
2581
@extend toolbar.osd;
2582
2583
margin: 8px;
2584
2585
border { border: none; }
2586
}
2587
2588
2589
/*************
2590
* Expanders *
2591
*************/
2592
expander {
2593
arrow {
2594
transition: all $material_faster $material_ease;
2595
min-width: 16px;
2596
min-height: 16px;
2597
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2598
-gtk-icon-transform: rotate(-90deg);
2599
2600
&:dir(rtl) { -gtk-icon-transform: rotate(90deg); }
2601
2602
&:checked { -gtk-icon-transform: unset; }
2603
2604
color: $secondary_fg_color;
2605
2606
&:hover, &:active { color: $fg_color; }
2607
2608
&:disabled { color: $insensitive_secondary_fg_color; }
2609
2610
&:selected {
2611
color: $secondary_selected_fg_color;
2612
2613
&:hover, &:active { color: $selected_fg_color; }
2614
2615
&:disabled { color: $insensitive_secondary_selected_fg_color; }
2616
}
2617
}
2618
}
2619
2620
2621
/************
2622
* Calendar *
2623
***********/
2624
calendar {
2625
padding: 1px;
2626
border: 1px solid $borders_color;
2627
color: $fg_color;
2628
2629
&:disabled { color: $insensitive_fg_color; }
2630
2631
&:selected {
2632
@extend %selected_items;
2633
2634
border-radius: 2px + 1px;
2635
}
2636
2637
&.header {
2638
border-style: none none solid;
2639
border-radius: 0;
2640
}
2641
2642
&.button { @extend %button_basic.flat; }
2643
2644
&.highlight {
2645
color: gtkalpha(currentColor, $hint_opacity);
2646
font-weight: 500;
2647
}
2648
2649
&:indeterminate { color: gtkalpha(currentColor, $disabled_opacity); }
2650
}
2651
2652
2653
/***********
2654
* Dialogs *
2655
***********/
2656
messagedialog { // Message Dialog styling
2657
&.background { background-color: $light_color; }
2658
2659
.titlebar {
2660
min-height: $small_size;
2661
border-style: none;
2662
box-shadow: inset 0 1px $highlight_color;
2663
background-color: $light_color;
2664
}
2665
2666
&.csd { // rounded bottom border styling for csd version
2667
&.background {
2668
// bigger radius for better antialiasing
2669
border-bottom-left-radius: 2px;
2670
border-bottom-right-radius: 2px;
2671
}
2672
2673
.dialog-action-area button {
2674
padding: 8px 16px;
2675
border-top: 1px solid $borders_color;
2676
border-radius: 0;
2677
2678
@extend %button_basic.flat;
2679
2680
&:first-child{ border-bottom-left-radius: 2px; }
2681
2682
&:last-child { border-bottom-right-radius: 2px; }
2683
}
2684
}
2685
}
2686
2687
filechooser {
2688
.dialog-action-box { border-top: 1px solid $borders_color; }
2689
2690
#pathbarbox { border-bottom: 1px solid $borders_color; }
2691
}
2692
2693
filechooserbutton:drop(active) {
2694
box-shadow: none;
2695
}
2696
2697
2698
/***********
2699
* Sidebar *
2700
***********/
2701
.sidebar {
2702
border-style: none;
2703
background-color: $light_color;
2704
2705
@at-root %sidebar_left,
2706
&:dir(ltr),
2707
&.left,
2708
&.left:dir(rtl) {
2709
border-right: 1px solid $borders_color;
2710
border-left-style: none;
2711
}
2712
2713
@at-root %sidebar_right
2714
&:dir(rtl),
2715
&.right {
2716
border-left: 1px solid $borders_color;
2717
border-right-style: none;
2718
}
2719
2720
list { background-color: transparent; }
2721
2722
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
2723
}
2724
2725
stacksidebar {
2726
&.sidebar {
2727
&:dir(ltr),
2728
&.left,
2729
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2730
2731
&:dir(rtl),
2732
&.right { list { @extend %sidebar_right; }}
2733
}
2734
2735
row {
2736
padding: 10px 4px;
2737
2738
> label {
2739
padding-left: 6px;
2740
padding-right: 6px;
2741
}
2742
2743
&.needs-attention > label { @extend %needs_attention; }
2744
}
2745
}
2746
2747
2748
/****************
2749
* File chooser *
2750
****************/
2751
placessidebar {
2752
> viewport.frame { border-style: none; }
2753
2754
list { padding: (4px - 3px) 0 4px; }
2755
2756
row {
2757
// Needs overriding of the GtkListBoxRow padding
2758
min-height: 32px;
2759
margin: -1px 0; // Remove unknown margins
2760
padding: 0;
2761
2762
// Using margins/padding directly in the SidebarRow
2763
// will make the animation of the new bookmark row jump
2764
> revealer { padding: 0 12px; }
2765
2766
&:selected { color: $selected_fg_color; }
2767
2768
&:disabled { color: $insensitive_fg_color; }
2769
2770
image.sidebar-icon {
2771
opacity: $hint_opacity; // dim the device icons
2772
2773
&:dir(ltr) { padding-right: 8px; }
2774
&:dir(rtl) { padding-left: 8px; }
2775
}
2776
2777
label.sidebar-label {
2778
&:dir(ltr) { padding-right: 2px; }
2779
&:dir(rtl) { padding-left: 2px; }
2780
}
2781
2782
@at-root button.sidebar-button {
2783
@extend %button_basic.flat;
2784
2785
min-height: $small_size;
2786
min-width: $small_size;
2787
margin-top: 0;
2788
margin-bottom: 0;
2789
padding: 0;
2790
border-radius: 100%;
2791
-gtk-outline-radius: 100%;
2792
2793
row:selected & { @extend %button_selected.flat; }
2794
}
2795
2796
&.sidebar-placeholder-row {
2797
min-height: 2px;
2798
padding: 0 8px;
2799
background-image: image($accent_bg_color);
2800
background-clip: content-box;
2801
}
2802
2803
&.sidebar-new-bookmark-row { color: $accent_bg_color; }
2804
2805
&:drop(active):not(:disabled) {
2806
box-shadow: inset 0 0 0 2px $accent_bg_color;
2807
2808
&:selected {
2809
// background-color: $accent_bg_color;
2810
// color: $selected_fg_color;
2811
}
2812
}
2813
}
2814
}
2815
2816
placesview {
2817
.server-list-button > image { -gtk-icon-transform: rotate(0turn); }
2818
2819
.server-list-button:checked > image { -gtk-icon-transform: rotate(-0.5turn); }
2820
2821
// this selects the "connect to server" label
2822
> actionbar > revealer > box > label {
2823
padding-left: 8px;
2824
padding-right: 8px;
2825
}
2826
}
2827
2828
2829
/*********
2830
* Paned *
2831
*********/
2832
paned {
2833
> separator {
2834
min-width: 1px;
2835
min-height: 1px;
2836
-gtk-icon-source: none; // defeats the ugly default handle decoration
2837
border-style: none; // just to be sure
2838
background-color: transparent;
2839
// workaround, using background istead of a border since the border will get rendered twice (?)
2840
background-image: image($borders_color);
2841
background-size: 1px 1px;
2842
2843
&.wide {
2844
min-width: 6px;
2845
min-height: 6px;
2846
background-color: $bg_color;
2847
background-image: image($borders_color), image($borders_color);
2848
background-size: 1px 1px, 1px 1px;
2849
}
2850
}
2851
2852
&.horizontal > separator {
2853
background-repeat: repeat-y;
2854
2855
&:dir(ltr) {
2856
margin: 0 -8px 0 0;
2857
padding: 0 8px 0 0;
2858
background-position: left;
2859
}
2860
2861
&:dir(rtl) {
2862
margin: 0 0 0 -8px;
2863
padding: 0 0 0 8px;
2864
background-position: right;
2865
}
2866
2867
&.wide {
2868
margin: 0;
2869
padding: 0;
2870
background-repeat: repeat-y, repeat-y;
2871
background-position: left, right;
2872
}
2873
}
2874
2875
&.vertical > separator {
2876
margin: 0 0 -8px 0;
2877
padding: 0 0 8px 0;
2878
background-repeat: repeat-x;
2879
background-position: top;
2880
2881
&.wide {
2882
margin: 0;
2883
padding: 0;
2884
background-repeat: repeat-x, repeat-x;
2885
background-position: bottom, top;
2886
}
2887
}
2888
}
2889
2890
2891
/**************
2892
* GtkInfoBar *
2893
**************/
2894
infobar {
2895
border-style: none;
2896
2897
&.info { background-color: $info_bg_color; }
2898
2899
&.question { background-color: $question_bg_color; }
2900
2901
&.warning { background-color: $warning_bg_color; }
2902
2903
&.error { background-color: $error_bg_color; }
2904
2905
&.info,
2906
&.question,
2907
&.warning,
2908
&.error {
2909
> label, & { color: $selected_fg_color; }
2910
2911
button { @extend %button_selected; }
2912
2913
selection { }
2914
2915
*:link { @extend %link_selected; }
2916
}
2917
}
2918
2919
2920
/************
2921
* Tooltips *
2922
************/
2923
tooltip {
2924
&.background {
2925
// background-color needs to be set this way otherwise it gets drawn twice
2926
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2927
background-color: scale-alpha($base_color, $higher_opacity);
2928
}
2929
2930
// @extend %osd;
2931
2932
// padding: 4px; /* not working */
2933
border-radius: 2px;
2934
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2935
2936
// FIXME: we need a border or tooltips vanish on black background.
2937
decoration { background-color: transparent; }
2938
2939
label {
2940
min-height: 32px - 6px * 2;
2941
padding: 2px 8px - 6px;
2942
}
2943
2944
* { // Yeah this is ugly
2945
padding: 0;
2946
background-color: transparent;
2947
color: inherit;
2948
}
2949
}
2950
2951
2952
/*****************
2953
* Color Chooser *
2954
*****************/
2955
colorswatch {
2956
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
2957
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
2958
// applied to the overlay box.
2959
2960
// base color corners rounding
2961
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2962
// sports a bigger radius.
2963
// nth-child is needed by the custom color strip.
2964
2965
&.top {
2966
border-top-left-radius: $material_radius + 0.5px;
2967
border-top-right-radius: $material_radius + 0.5px;
2968
2969
overlay {
2970
border-top-left-radius: $material_radius;
2971
border-top-right-radius: $material_radius;
2972
}
2973
}
2974
2975
&.bottom {
2976
border-bottom-left-radius: $material_radius + 0.5px;
2977
border-bottom-right-radius: $material_radius + 0.5px;
2978
2979
overlay {
2980
border-bottom-left-radius: $material_radius;
2981
border-bottom-right-radius: $material_radius;
2982
}
2983
}
2984
2985
&.left,
2986
&:first-child:not(.top) {
2987
border-top-left-radius: $material_radius + 0.5px;
2988
border-bottom-left-radius: $material_radius + 0.5px;
2989
2990
overlay {
2991
border-top-left-radius: $material_radius;
2992
border-bottom-left-radius: $material_radius;
2993
}
2994
}
2995
2996
&.right,
2997
&:last-child:not(.bottom) {
2998
border-top-right-radius: $material_radius + 0.5px;
2999
border-bottom-right-radius: $material_radius + 0.5px;
3000
3001
overlay {
3002
border-top-right-radius: $material_radius;
3003
border-bottom-right-radius: $material_radius;
3004
}
3005
}
3006
3007
&.dark overlay { color: white; }
3008
3009
&.light overlay { color: scale-alpha(black, 0.8); }
3010
3011
&.dark { color: white; } // for focus ring
3012
3013
&.light { color: scale-alpha(black, 0.8); } // for focus ring
3014
3015
&:drop(active) {
3016
box-shadow: none;
3017
3018
&.light overlay {
3019
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3020
}
3021
3022
&.dark overlay {
3023
box-shadow: $z-depth-1, 0 0 0 2px $accent_bg_color;
3024
}
3025
}
3026
3027
overlay {
3028
transition: $shadow_transition;
3029
box-shadow: $z-depth-1;
3030
3031
&:hover { box-shadow: $z-depth-2; }
3032
}
3033
3034
&#add-color-button {
3035
border-radius: $material_radius $material_radius 0 0;
3036
color: white; // for focus ring
3037
3038
&:only-child { border-radius: $material_radius; }
3039
3040
overlay {
3041
background-image: linear-gradient(to right,
3042
$error_bg_color 25%,
3043
$warning_bg_color 25%, $warning_bg_color 50%,
3044
$info_bg_color 50%, $info_bg_color 75%,
3045
$question_bg_color 75%);
3046
color: white;
3047
}
3048
}
3049
3050
&:disabled {
3051
opacity: $disabled_opacity;
3052
3053
overlay { box-shadow: none; }
3054
}
3055
3056
row:selected & {
3057
}
3058
3059
&#editor-color-sample {
3060
border-radius: $material_radius + 0.5px;
3061
3062
overlay { border-radius: $material_radius; }
3063
3064
// overlay:hover { box-shadow: $z-depth-1; }
3065
}
3066
}
3067
3068
// colorscale popup
3069
colorchooser .popover.osd {
3070
transition: $shadow_transition;
3071
border-radius: 2px;
3072
box-shadow: $z-depth-2;
3073
background-color: $base_color;
3074
3075
&:backdrop { box-shadow: $z-depth-1; }
3076
3077
spinbutton:not(.vertical) { @extend %entry.flat; }
3078
}
3079
3080
3081
/********
3082
* Misc *
3083
********/
3084
//content view (grid/list)
3085
.content-view {
3086
background-color: $bg_color;
3087
3088
// &:hover { -gtk-icon-effect: highlight; }
3089
3090
rubberband { @extend rubberband; }
3091
}
3092
3093
.scale-popup {
3094
.osd & { @extend %osd; }
3095
3096
.osd & button.flat { //FIXME: quick hack, redo properly
3097
}
3098
3099
button { // +/- buttons on GtkVolumeButton popup
3100
}
3101
}
3102
3103
3104
/**********************
3105
* Window Decorations *
3106
*********************/
3107
decoration {
3108
transition: $shadow_transition;
3109
border-radius: 2px 2px 0 0;
3110
box-shadow: $z-depth-4, 0 16px 16px transparent;
3111
3112
// FIXME rationalize shadows
3113
3114
// this is used for the resize cursor area
3115
margin: 8px;
3116
3117
&:backdrop {
3118
// the transparent shadow here is to enforce that the shadow extents don't
3119
// change when we go to backdrop, to prevent jumping windows.
3120
// The biggest shadow should be in the same order then in the active state
3121
// or the jumping will happen during the transition.
3122
box-shadow: $z-depth-2, 0 16px 16px transparent;
3123
}
3124
3125
.maximized &,
3126
.fullscreen &,
3127
.tiled & { border-radius: 0; }
3128
3129
.popup & { box-shadow: none; }
3130
3131
// server-side decorations as used by mutter
3132
.ssd & { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); } //just doing borders, wm draws actual shadows
3133
3134
.csd.popup & {
3135
border-radius: 2px;
3136
box-shadow: $z-depth-2;
3137
}
3138
3139
tooltip.csd & {
3140
border-radius: 2px;
3141
box-shadow: $z-depth-2;
3142
}
3143
3144
messagedialog.csd & {
3145
border-radius: 2px;
3146
// box-shadow: $z-depth-4, 0 16px 16px transparent;
3147
3148
// &:backdrop { box-shadow: $z-depth-2, 0 16px 16px transparent; }
3149
}
3150
3151
.solid-csd & {
3152
margin: 0;
3153
padding: 4px;
3154
// border: solid 1px $borders_color;
3155
border-radius: 0;
3156
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $secondary_highlight_color;
3157
background-color: $borders_color;
3158
}
3159
}
3160
3161
// Window Close button
3162
button.titlebutton {
3163
// @extend %button_basic.flat;
3164
3165
@extend %button_basic.image-button;
3166
3167
.selection-mode & {
3168
}
3169
}
3170
3171
3172
// catch all extend :)
3173
3174
%selected_items {
3175
background-color: $selected_bg_color;
3176
3177
@at-root %nobg_selected_items, & {
3178
color: $selected_fg_color;
3179
3180
&:disabled { color: $insensitive_selected_fg_color; }
3181
}
3182
}
3183
3184
.monospace { font-family: monospace; }
3185
3186
3187
/**********************
3188
* Touch Copy & Paste *
3189
*********************/
3190
//touch selection handlebars for the Popover.osd above
3191
cursor-handle {
3192
border-radius: 100px;
3193
background-color: $accent_bg_color;
3194
background-image: none;
3195
3196
&.top:dir(ltr), &.bottom:dir(rtl) {
3197
padding-left: 6px;
3198
border-top-right-radius: 0;
3199
}
3200
3201
&.bottom:dir(ltr), &.top:dir(rtl) {
3202
padding-right: 6px;
3203
border-top-left-radius: 0;
3204
}
3205
3206
&.insertion-cursor:dir(ltr), &.insertion-cursor:dir(rtl) {
3207
-GtkWidget-text-handle-width: 24;
3208
-GtkWidget-text-handle-height: 30;
3209
3210
$_url: 'assets/slider-horz-scale-has-marks-above#{$asset_suffix}';
3211
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3212
url('#{$_url}@2.png'));
3213
}
3214
}
3215
3216
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
3217
3218
button.circular { // FIXME: aggregate to buttons
3219
border-radius: 100px;
3220
-gtk-outline-radius: 100px;
3221
3222
label { padding: 0; }
3223
}
3224
3225
// shortcut window keys
3226
.keycap {
3227
min-width: 28px - 8px * 2;
3228
min-height: 28px - 2px;
3229
margin-top: 2px;
3230
padding-bottom: 2px;
3231
padding-left: 8px;
3232
padding-right: 8px;
3233
3234
border: solid 1px $borders_color;
3235
border-radius: 2px + 1px;
3236
box-shadow: inset 0 -2px $borders_color;
3237
background-color: $base_color;
3238
color: $fg_color;
3239
font-size: smaller;
3240
}
3241
3242
*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
3243
transition: $material_transition;
3244
box-shadow: $z-depth-1, inset 0 0 0 2px $accent_bg_color;
3245
caret-color: $accent_bg_color;
3246
}
3247
3248
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
3249
3250
stackswitcher button.circular,
3251
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
3252
min-width: $medium_size;
3253
min-height: $medium_size;
3254
padding: 0;
3255
}
3256