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