Unicode text, UTF-8 text
1
$asset_suffix: if($variant=='dark', '-dark', '');
2
$extra_background_clip: if($variant == 'light', padding-box, border-box);
3
$small_size: 24px;
5
$medium_size: 36px;
6
$large_size: 48px;
7
$container_padding: 6px;
9
$material_radius: 2px;
10
$material_duration: 0.2s;
11
$material_timing_function: cubic-bezier(0.4, 0, 0.2, 1);
12
* {
14
padding: 0;
15
background-clip: padding-box;
16
transition-property: opacity, border-color, border-image, box-shadow,
17
background-color, background-image, text-shadow, icon-shadow;
18
transition-duration: $material_duration;
19
transition-timing-function: $material_timing_function;
20
-GtkToolButton-icon-spacing: 4;
22
-GtkTextView-error-underline-color: $error_color;
23
-GtkCheckButton-indicator-size: 20;
25
-GtkCheckMenuItem-indicator-size: 16;
26
// The size for scrollbars. The slider is 2px smaller, but we keep it
28
// up so that the whole area is sensitive to button presses for the
29
// slider. The stepper button is larger in both directions, the slider
30
// only in the width
31
-GtkScrolledWindow-scrollbar-spacing: 0;
33
-GtkScrolledWindow-scrollbars-within-bevel: 1;
34
-GtkToolItemGroup-expander-size: 11;
36
-GtkExpander-expander-size: 16;
37
-GtkTreeView-expander-size: 11;
38
-GtkTreeView-horizontal-separator: 4;
40
-GtkMenu-horizontal-padding: 0;
42
-GtkMenu-vertical-padding: 0;
43
-GtkWidget-link-color: $link_color;
45
-GtkWidget-visited-link-color: $link_visited_color;
46
-GtkWidget-focus-padding: 2; // FIXME: do we still need these?
48
-GtkWidget-focus-line-width: 1; //
49
-GtkWidget-text-handle-width: 20;
51
-GtkWidget-text-handle-height: 20;
52
-GtkDialog-button-spacing: 4;
54
-GtkDialog-action-area-border: 0;
55
-GtkStatusbar-shadow-type: none;
57
// We use the outline properties to signal the focus properties
59
// to the adwaita engine: using real CSS properties is faster,
60
// and we don't use any outlines for now.
61
outline-style: solid;
63
outline-width: 2px;
64
outline-color: $track_color;
65
outline-offset: -4px;
66
outline-radius: 2px;
67
}
68
/***************
71
* Base States *
72
***************/
73
.background {
75
background-color: $bg_color;
76
color: $fg_color;
77
}
78
/*
80
These wildcard seems unavoidable, need to investigate.
81
Wildcards are bad and troublesome, use them with care,
82
or better, just don't.
83
Everytime a wildcard is used a kitten dies, painfully.
84
*/
85
*:insensitive {
87
-gtk-image-effect: dim;
88
}
89
.gtkstyle-fallback {
91
background-color: $bg_color;
92
color: $fg_color;
93
&:prelight {
94
background-color: darken($bg_color, 5%);
95
color: $fg_color;
96
}
97
&:active {
98
background-color: darken($bg_color, 10%);
99
color: $fg_color;
100
}
101
&:insensitive {
102
background-color: $bg_color;
103
color: $insensitive_fg_color;
104
}
105
&:selected {
106
background-color: $selected_bg_color;
107
color: $selected_fg_color;
108
}
109
}
110
.view {
112
@extend .list-row.activatable;
113
background-color: $base_color;
114
color: $fg_color;
115
&:hover, &:active, &:selected { border-radius: 2px; }
117
&:insensitive {
119
// background-color: $secondary_base_color;
120
color: $insensitive_fg_color;
121
}
122
&:selected { @extend %selected_items; }
124
}
125
.rubberband {
127
border: 1px solid $secondary_selected_bg_color;
128
background-color: scale-alpha($secondary_selected_bg_color, $lower_opacity);
129
}
130
.label {
132
&.separator {
133
color: $fg_color;
134
@extend .dim-label;
135
}
136
&:selected {
137
@extend %selected_items;
138
}
139
&:insensitive {
140
color: $insensitive_fg_color;
141
}
142
}
143
.dim-label {
145
opacity: $hint_opacity;
146
}
147
GtkAssistant {
149
.sidebar {
150
padding: 6px 0;
151
// border-top: 1px solid $borders_color;
152
&:dir(ltr) { border-right: 1px solid $borders_color; }
153
&:dir(rtl) { border-left: 1px solid $borders_color; }
154
}
155
// &.csd .sidebar { border-top-style: none; }
156
.sidebar .label {
157
opacity: $hint_opacity;
158
padding: 5px 12px 6px;
159
font-weight: bold;
160
}
161
.sidebar .label.highlight {
162
opacity: 1;
163
}
164
}
165
GtkTextView { // This will get overridden by .view, needed by gedit line numbers
167
background-color: $secondary_base_color;
168
}
169
.grid-child {
171
// outline-offset: -2px;
172
padding: 4px;
173
border-radius: 2px;
174
&:selected { @extend %selected_items; }
175
}
176
%osd, .osd { opacity: $higher_opacity; }
178
/*********************
180
* Spinner Animation *
181
*********************/
182
@keyframes spin {
184
to { -gtk-icon-transform: rotate(1turn); }
185
}
186
.spinner {
188
background-color: blue;
189
background-image: none;
190
opacity: 0; // non spinning spinner makes no sense
191
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
192
&:active {
193
opacity: 1;
194
animation: spin 1s linear infinite;
195
&:insensitive {
196
opacity: $disabled_opacity;
197
}
198
}
199
}
200
/****************
202
* Text Entries *
203
****************/
204
.entry {
206
padding: 7px 8px 8px;
207
border-radius: 2px;
208
@include entry(normal);
209
&:focus { @include entry(focus); }
210
&:insensitive { @include entry(insensitive); }
211
&.flat {
212
border-radius: 0;
213
@include entry(flat-normal);
214
&:focus { @include entry(flat-focus); }
215
&:insensitive { @include entry(flat-insensitive); }
216
}
217
&:selected { @extend %selected_items; }
219
&.image { // icons inside the entry
221
&.left { padding-left: 2px; }
222
&.right { padding-right: 2px; }
223
}
224
&.progressbar {
226
margin: 2px;
227
border-style: none none solid;
228
border-width: 2px;
229
border-color: $selected_bg_color;
230
border-radius: 0;
231
box-shadow: none;
232
background-color: transparent;
233
background-image: none;
234
}
235
.linked > &:not(.flat) { @extend %linked; }
237
.linked.vertical > &:not(.flat) { @extend %linked_vertical; }
239
// entry error and warning style
241
@each $e_type, $e_color in (error, $error_color),
242
(warning, $warning_color) {
243
&.#{$e_type} {
244
@include entry(normal, $e_color);
245
&:focus { @include entry(focus, $e_color); }
246
&:insensitive { @include entry(insensitive, $e_color); }
247
&.flat {
248
@include entry(flat-normal, $e_color);
249
&:focus { @include entry(flat-focus, $e_color); }
250
&:insensitive { @include entry(flat-insensitive, $e_color); }
251
}
252
}
253
}
254
&.image { // entry icons colors
256
&:not(:hover):not(:active) { color: gtkalpha(currentColor, $enabled_opacity); }
257
&:insensitive { color: gtkalpha(currentColor, $hint_opacity); }
258
}
259
.osd & {
261
}
262
}
263
/***********
266
* Buttons *
267
***********/
268
// stuff for .needs-attention
270
@keyframes needs_attention {
271
from {
272
background-image: -gtk-gradient(radial,
273
center center, 0,
274
center center, 0.001,
275
to($accent_bg_color),
276
to(transparent));
277
}
278
to {
279
background-image: -gtk-gradient(radial,
280
center center, 0,
281
center center, 0.5,
282
to($accent_bg_color),
283
to(transparent));
284
}
285
}
286
.button {
289
padding: 7px 10px 8px;
290
border-radius: 2px;
291
background-repeat: no-repeat;
292
background-position: center, center;
293
background-size: ($medium_size * 2 / 0.8) ($medium_size * 2 / 0.8), auto;
294
font-weight: 500;
295
@include button(normal);
296
&:hover { @include button(hover); }
297
&:active { @include button(active); }
298
&:insensitive { @include button(insensitive); }
299
&:checked { @include button(checked); }
300
&:checked:insensitive { @include button(checked-insensitive); }
301
&.flat {
302
@include button(flat-normal);
303
&:hover { @include button(flat-hover); }
304
&:active { @include button(flat-active); }
305
&:insensitive { @include button(flat-insensitive); }
306
&:checked { @include button(flat-checked); }
307
&:checked:insensitive { @include button(flat-checked-insensitive); }
308
.linked > & {
309
border-radius: 2px;
310
&.image-button {
311
outline-radius: 100px;
312
border-radius: 100px;
313
}
314
}
315
}
316
// big standalone buttons like in Documents pager
317
&.osd {
318
&.image-button {
319
padding: 16px;
320
background-size: ($large_size / 0.8) ($large_size / 0.8), auto;
321
}
322
&:insensitive { opacity: 0; }
323
}
324
//overlay / OSD style
325
.osd & {
326
}
327
// Suggested and Destructive Action buttons
329
@each $b_type, $b_color in (suggested-action, $suggested_color),
330
(destructive-action, $destructive_color) {
331
&.#{$b_type} {
332
background-color: $b_color;
333
color: $selected_fg_color;
334
// @include button(normal, $b_color, white);
335
// &:hover { @include button(hover, $b_color, white); }
336
// &:active, &:checked { @include button(active, $b_color, white); }
337
&:insensitive { @include button(insensitive, $b_color, white); }
338
&:checked { background-color: mix($selected_fg_color, $b_color, percentage($lower_opacity)); }
339
&.flat {
340
background-color: transparent;
341
color: $b_color;
342
// @include button(flat-normal, $b_color, white);
343
// &:hover { @include button(flat-hover, $b_color, white); }
344
// &:active, &:checked { @include button(flat-active, $b_color, white); }
345
&:insensitive { @include button(flat-insensitive, $b_color, white); }
346
}
347
}
348
}
349
&.image-button { @extend %image_button; }
351
&.text-button {
353
padding-left: 16px;
354
padding-right: 16px;
355
}
356
&.text-button.image-button {
358
// those buttons needs uneven horizontal padding, we want the icon side
359
// to have the image-button padding, while the text side the text-button
360
// one, so we're adding the missing padding to the label depending on
361
// its position inside the button
362
padding: 7px 10px 8px; // same as .button
363
outline-radius: 2px;
364
border-radius: 2px;
365
background-size: ($medium_size * 2 / 0.8) ($medium_size * 2 / 0.8), auto;
366
.label:first-child { padding-left: 6px; }
367
.label:last-child { padding-right: 6px; }
368
}
369
.stack-switcher > & {
371
// to position the needs attention dot, padding is added to the button
372
// child, a label needs just lateral padding while an icon needs vertical
373
// padding added too.
374
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
376
> .label {
378
padding-left: 6px; // label padding
379
padding-right: 6px; //
380
}
381
> GtkImage {
382
padding-left: 6px; // image padding
383
padding-right: 6px; //
384
padding-top: 3px; //
385
padding-bottom: 3px; //
386
}
387
&.text-button {
388
padding: 7px 10px 8px; // needed or it will get overridden
389
}
390
&.image-button {
391
// we want image buttons to have a 1:1 aspect ratio, so compensation
392
// of the padding added to the GtkImage is needed
393
padding: 7px 4px;
394
}
395
&.needs-attention > .label,
396
&.needs-attention > GtkImage { @extend %needs_attention; }
397
&.needs-attention:checked > .label,
398
&.needs-attention:checked > GtkImage {
399
animation: none;
400
background-image: none;
401
}
402
}
403
//inline-toolbar buttons
405
.inline-toolbar & {
406
@extend .button.flat;
407
@extend %image_button;
408
}
409
.primary-toolbar & { icon-shadow: none; } // tango icons don't need shadows
411
.linked > &:not(.flat):not(:only-child) { @extend %linked; }
413
.linked.vertical > &:not(.flat):not(:only-child) { @extend %linked_vertical; }
415
}
416
%image_button {
418
padding: 10px;
419
outline-radius: 100px;
420
border-radius: 100px;
421
background-size: ($medium_size / 0.8) ($medium_size / 0.8), auto;
422
}
423
%needs_attention {
425
transition: none;
426
animation: needs_attention $material_duration $material_timing_function forwards;
427
background-repeat: no-repeat;
428
background-position: right 3px;
429
background-size: 6px 6px;
430
&:dir(rtl) { background-position: left 3px; }
431
}
432
// all the following is for the +|- buttons on inline toolbars, that way
435
// should really be deprecated...
436
.inline-toolbar GtkToolButton > .button { // redefining the button look is
437
// needed since those are flat...
438
}
439
// More inline toolbar buttons
441
.inline-toolbar.toolbar GtkToolButton {
442
// & > .button.flat { @extend %linked_middle; }
443
// &:first-child > .button.flat { @extend %linked:first-child; }
444
// &:last-child > .button.flat { @extend %linked:last-child; }
445
// &:only-child > .button.flat { @extend %linked:only-child; }
446
}
447
%linked_middle {
449
border-radius: 0;
450
}
451
%linked {
453
outline-radius: 2px;
454
@extend %linked_middle;
455
&:first-child {
456
border-top-left-radius: 2px;
457
border-bottom-left-radius: 2px;
458
}
459
&:last-child {
460
border-top-right-radius: 2px;
461
border-bottom-right-radius: 2px;
462
}
463
&:only-child {
464
border-radius: 2px;
465
}
466
}
467
%linked_vertical_middle {
469
border-radius: 0;
470
}
471
%linked_vertical{
473
outline-radius: 2px;
474
@extend %linked_vertical_middle;
475
&:first-child {
476
border-top-left-radius: 2px;
477
border-top-right-radius: 2px;
478
}
479
&:last-child {
480
border-bottom-left-radius: 2px;
481
border-bottom-right-radius: 2px;
482
}
483
&:only-child {
484
border-radius: 2px;
485
}
486
}
487
/* menu buttons */
489
.menuitem.button.flat {
490
&:selected { @extend %selected_items; }
491
}
492
GtkColorButton.button {
495
padding: 7px 8px 8px; // Uniform padding on the GtkColorButton
496
GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the
498
// colorpicker style, otherwise
499
border-radius: 2px;
500
box-shadow: $z-depth-1;
501
}
502
}
503
/*********
505
* Links *
506
*********/
507
*:link {
509
color: $link_color;
510
&:hover, &:active { color: $link_color; }
511
&:visited {
512
color: $link_visited_color;
513
&:hover, &:active { color: $link_visited_color; }
514
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
515
}
516
&:selected, *:selected & {
517
color: mix($selected_fg_color, $selected_bg_color, 80%);
518
}
519
}
520
.button:link, .button:visited {
522
@extend *:link;
523
& > .label {
524
text-decoration-line: underline;
525
}
526
}
527
/*****************
529
* GtkSpinButton *
530
*****************/
531
.spinbutton {
533
.button {
534
padding: 4px;
535
border: solid $container_padding transparent;
536
@extend %image_button;
537
// @extend .button.flat;
538
@include button(flat-normal);
539
&:hover { @include button(flat-hover); }
540
&:active { @include button(flat-active); }
541
&:insensitive { @include button(flat-insensitive); }
542
}
543
.osd & {
544
.button {
545
}
546
}
547
&.vertical { //FIXME: try using linking templates for vertically linked stuff
548
.button {
549
padding-top: 10px; // Same vertical padding as image-buttons
550
padding-bottom: 10px; //
551
border: none;
552
&:first-child {
553
border-radius: 2px 2px 0 0;
554
}
555
&:last-child {
556
border-radius: 0 0 2px 2px;
557
}
558
}
559
&.entry {
560
}
561
}
562
GtkTreeView & {
563
&.entry, &.entry:focus {
564
// padding: 1px;
565
// border-width: 1px 0;
566
// border-color: $selected_bg_color;
567
// border-radius: 0;
568
// box-shadow: none;
569
}
570
}
571
}
572
/**************
574
* ComboBoxes *
575
**************/
576
GtkComboBox {
577
> .the-button-in-the-combobox { padding: 5px 6px 6px; } // Otherwise combos
578
// are bigger then
579
// buttons
580
-GtkComboBox-arrow-scaling: 0.5;
581
-GtkComboBox-shadow-type: none;
582
.menu .menuitem { padding: 5px 6px 6px; }
584
.separator.vertical {
585
// always disable separators
586
-GtkWidget-wide-separators: true;
587
}
588
&.combobox-entry .entry {
589
&:dir(ltr) {
590
border-top-right-radius: 0;
591
border-bottom-right-radius: 0;
592
}
593
&:dir(rtl) {
594
border-top-left-radius: 0;
595
border-bottom-left-radius: 0;
596
}
597
}
598
&.combobox-entry .button {
599
padding: 10px;
600
&:dir(ltr) {
601
border-top-left-radius: 0;
602
border-bottom-left-radius: 0;
603
}
604
&:dir(rtl) {
605
border-top-right-radius: 0;
606
border-bottom-right-radius: 0;
607
}
608
}
609
}
610
.linked > GtkComboBox > .the-button-in-the-combobox,
612
.linked > GtkComboBoxText > .the-button-in-the-combobox {
613
// the combo is a composite widget so the way we do button linkind doesn't
614
// work, special case needed. See
615
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
616
&:dir(ltr),
617
&:dir(rtl) { @extend %linked_middle; } // specificity bump
618
}
619
.linked > GtkComboBox:first-child > .the-button-in-the-combobox,
620
.linked > GtkComboBoxText:first-child > .the-button-in-the-combobox {
621
@extend %linked:first-child;
622
}
623
.linked > GtkComboBox:last-child > .the-button-in-the-combobox,
624
.linked > GtkComboBoxText:last-child > .the-button-in-the-combobox {
625
@extend %linked:last-child;
626
}
627
.linked > GtkComboBox:only-child > .the-button-in-the-combobox,
628
.linked > GtkComboBoxText:only-child > .the-button-in-the-combobox {
629
@extend %linked:only-child;
630
}
631
.linked.vertical > GtkComboBoxText > .the-button-in-the-combobox,
633
.linked.vertical > GtkComboBox > .the-button-in-the-combobox { @extend %linked_vertical_middle; }
634
.linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox,
635
.linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox { @extend %linked_vertical:first-child; }
636
.linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox,
637
.linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox { @extend %linked_vertical:last-child; }
638
.linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox,
639
.linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox { @extend %linked_vertical:only-child; }
640
/************
642
* Toolbars *
643
************/
644
.toolbar {
645
-GtkWidget-window-dragging: true;
646
padding: 4px;
647
background-color: $bg_color;
648
.osd &, &.osd {
649
padding: $container_padding;
650
border-style: solid;
651
border-width: 8px;
652
border-image: -gtk-scaled(url("assets/osd-shadow#{$asset_suffix}.png"),
653
url("assets/osd-shadow#{$asset_suffix}@2.png"))
654
10 / 10px stretch;
655
border-radius: 2px;
656
// box-shadow: $z-depth-2;
657
background-color: $base_color;
658
&:backdrop {
659
border-image: -gtk-scaled(url("assets/osd-shadow-backdrop#{$asset_suffix}.png"),
660
url("assets/osd-shadow-backdrop#{$asset_suffix}@2.png"))
661
10 / 10px stretch;
662
// box-shadow: $z-depth-1;
663
}
664
& .button {
665
@extend .button.flat;
666
}
667
}
668
}
669
//searchbar, location-bar & inline-toolbar
671
.inline-toolbar {
672
padding: $container_padding;
673
border-style: solid;
674
border-width: 0 1px 1px;
675
border-color: $borders_color;
676
background-color: $secondary_base_color;
677
}
678
.search-bar, .location-bar {
680
padding: $container_padding;
681
border-style: solid;
682
border-width: 0 0 1px;
683
border-color: $borders_color;
684
background-color: $dark_color;
685
background-clip: border-box;
686
}
687
/***************
689
* Header bars *
690
***************/
691
.titlebar,
693
.header-bar {
694
padding: $container_padding;
695
border-width: 0 0 1px;
696
border-style: solid;
697
border-color: $borders_color;
698
border-radius: 2px 2px 0 0;
699
box-shadow: inset 0 1px $highlight_color;
700
background-color: $dark_color;
701
background-clip: border-box;
702
&:backdrop {
704
// background-color: $dark_color;
705
}
706
.title {
708
padding-left: 12px;
709
padding-right: 12px;
710
font-weight: bold;
711
}
712
.subtitle {
714
@extend .dim-label;
715
padding-left: 12px;
716
padding-right: 12px;
717
font-size: smaller;
718
}
719
.header-bar-separator,
721
& > GtkBox > .separator.vertical {
722
-GtkWidget-wide-separators: true;
723
-GtkWidget-separator-width: 1px;
724
border-style: solid;
725
border-width: 0 1px;
726
border-color: $borders_color;
727
}
728
& .button:not(.suggested-action):not(.destructive-action) {
730
@extend .button.flat;
731
border-image: -gtk-gradient(radial,
732
center bottom, 0,
733
center bottom, 0.001,
734
to($selected_bg_color),
735
to(transparent))
736
0 0 0 / 0 0 0px;
737
&:checked {
738
border-image: -gtk-gradient(radial,
739
center bottom, 0,
740
center bottom, 0.5,
741
to($selected_bg_color),
742
to(transparent))
743
0 0 2 / 0 0 2px;
744
background-color: transparent;
745
color: $fg_color;
746
&:insensitive {
747
background-color: transparent;
748
color: $insensitive_fg_color;
749
> .label { color: inherit; }
750
}
751
}
752
}
753
&.selection-mode {
755
box-shadow: inset 0 1px $secondary_highlight_color;
756
background-color: $selected_bg_color;
757
color: $selected_fg_color;
758
&:backdrop {
759
}
760
.subtitle:link { @extend *:link:selected; }
762
.button {
764
border-image: -gtk-gradient(radial,
765
center bottom, 0,
766
center bottom, 0.001,
767
to($selected_fg_color),
768
to(transparent))
769
0 0 0 / 0 0 0px;
770
color: $secondary_selected_fg_color;
771
&:hover, &:active, &:checked {
772
color: $selected_fg_color;
773
}
774
&:insensitive {
776
}
777
&:checked {
779
border-image: -gtk-gradient(radial,
780
center bottom, 0,
781
center bottom, 0.5,
782
to($selected_fg_color),
783
to(transparent))
784
0 0 2 / 0 0 2px;
785
color: $selected_fg_color;
786
&:insensitive {
787
color: $insensitive_selected_fg_color;
788
> .label { color: inherit; }
789
}
790
}
791
&.suggested-action {
792
// NOTE: do not use @extend .button;
793
@include button(normal);
794
&:hover { @include button(hover); }
795
&:active { @include button(active); }
796
&:insensitive { @include button(insensitive); }
797
}
798
}
799
.selection-menu {
801
padding-left: 16px;
802
padding-right: 16px;
803
GtkArrow { -GtkArrow-arrow-scaling: 1; }
805
.arrow {
807
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
808
}
809
}
810
}
811
.tiled &, .maximized & {
813
border-radius: 0; // squared corners when the window is max'd or tiled
814
box-shadow: none;
815
}
816
&.default-decoration {
818
padding: $container_padding;
819
border-width: 0;
820
.button { padding: 4px; }
821
}
822
}
823
/************
825
* Pathbars *
826
************/
827
.path-bar .button {
829
padding: 7px 6px 8px;
830
&.image-button { padding: 10px; }
831
&:only-child {
832
padding-left: 16px;
833
padding-right: 16px;
834
}
835
// the following is for spacing the icon and the label inside the home button
837
.label:last-child { padding-left: 2px; }
838
.label:first-child { padding-right: 2px; }
839
.label:only-child { padding-right: 0; padding-left: 0; }
840
GtkImage { padding-top: 1px; }
841
}
842
/**************
844
* Tree Views *
845
**************/
846
GtkTreeView.view {
847
-GtkTreeView-grid-line-width: 1;
848
-GtkTreeView-grid-line-pattern: '';
849
-GtkTreeView-tree-line-width: 1;
850
-GtkTreeView-tree-line-pattern: '';
851
-GtkTreeView-expander-size: 16;
852
border-left-color: $track_color; // this is actually the tree lines color,
854
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
855
&.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props
857
border-radius: 0; // rest border radius in lists
859
&:hover, &:active, &:selected { border-radius: 0; }
861
&.dnd {
863
border-style: solid none;
864
border-width: 1px;
865
border-color: mix($fg_color, $selected_bg_color, 50%);
866
}
867
&.expander {
869
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
870
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
871
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
872
&:selected {
873
color: scale-alpha($selected_fg_color, $enabled_opacity);
874
&:hover, &:active { color: $selected_fg_color; }
875
}
876
}
877
&.progressbar { // progress bar in treeviews
879
@extend .entry.progressbar;
880
border-width: 4px;
881
&:selected {
882
border-color: currentColor;
883
}
884
}
885
&.trough { // progress bar trough in treeviews
887
@extend .entry.progressbar;
888
border-width: 4px;
889
border-color: scale-alpha($selected_bg_color, $lower_opacity);
890
&:selected {
891
border-color: $track_color;
892
}
893
}
894
}
895
column-header {
897
.button {
898
@extend .list-row.activatable;
899
padding: 3px 6px 4px;
900
border-style: none solid solid none;
901
border-width: 1px;
902
border-color: $borders_color;
903
border-radius: 0;
904
box-shadow: none;
905
background-color: $base_color;
906
// font-weight: bold;
907
&:hover, &:active {
908
box-shadow: none;
909
}
910
&:insensitive {
911
background-color: $base_color;
912
}
913
&.dnd {
914
@extend column-header.button.dnd;
915
}
916
}
917
&:last-child .button,
918
&:last-child.button { //treeview-like derived widgets in Banshee and Evolution
919
border-right-style: none;
920
}
921
}
922
column-header.button.dnd { // for treeview-like derive widgets
924
border-left-style: solid;
925
background-clip: $extra_background_clip;
926
color: $selected_bg_color;
927
}
928
/*********
931
* Menus *
932
*********/
933
.menubar {
934
-GtkWidget-window-dragging: true;
935
padding: 0px;
936
box-shadow: inset 0 -1px $borders_color;
937
background-color: $dark_color;
938
& > .menuitem {
939
padding: 4px 8px;
940
color: $secondary_fg_color;
941
&:hover { //Seems like it :hover even with keyboard focus
942
box-shadow: inset 0 -2px $selected_bg_color;
943
color: $fg_color;
944
}
945
&:insensitive {
946
color: $insensitive_fg_color;
947
box-shadow: none;
948
}
949
}
950
}
951
.menu {
953
margin: 4px;
954
padding: 0px;
955
background-color: $base_color;
956
border: 1px solid $borders_color; // adds borders in a non composited env
957
.csd & { border: none; } // axes borders in a composited env
958
.menuitem {
959
transition: none;
960
padding: 3px 4px 4px;
961
font: initial;
962
text-shadow: none;
963
&:hover {
964
color: $selected_fg_color;
965
background-color: $selected_bg_color;
966
}
967
&:insensitive {
968
color: $insensitive_fg_color;
969
}
970
//submenu indicators
971
&.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
972
&.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); }
973
}
974
&.button { // overlow buttons
975
border-style: none;
976
border-radius: 0;
977
&.top { border-bottom: 1px solid $borders_color; }
978
&.bottom { border-top: 1px solid $borders_color; }
979
&:hover { background-color: $track_color; }
980
&:insensitive {
981
color: transparent;
982
background-color: transparent;
983
border-color: transparent;
984
}
985
}
986
}
987
.menuitem .accelerator { color: gtkalpha(currentColor, $hint_opacity); }
989
/***************
992
* Popovers *
993
***************/
994
.popover {
996
padding: 2px;
997
border: 1px solid;
998
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
999
border-radius: 2px + 1px;
1000
background-color: $secondary_base_color;
1001
box-shadow: $z-depth-2;
1002
&:backdrop { box-shadow: $z-depth-1; }
1003
> .list,
1005
> .view,
1006
> .toolbar,
1007
&.osd > .toolbar {
1008
border-style: none;
1009
border-image: none;
1010
background-color: transparent;
1011
}
1012
.button.flat {
1014
padding: 5px 8px 6px;
1015
background-color: transparent;
1016
background-size: (128px / 0.8) (128px / 0.8), auto;
1017
color: $fg_color;
1018
font: initial;
1019
}
1020
.linked > .button {
1022
border-radius: 2px;
1023
// @extend .button.flat;
1024
@include button(flat-normal);
1025
&:hover { @include button(flat-hover); }
1026
&:active { @include button(flat-active); }
1027
&:insensitive { @include button(flat-insensitive); }
1028
&:checked { @include button(checked); }
1029
&:checked:insensitive { @include button(checked-insensitive); }
1030
&.image-button { background-size: ($medium_size * 2 / 0.8) ($medium_size * 2 / 0.8), auto; }
1031
}
1032
&.osd { @extend %osd; }
1034
}
1035
/*****************
1037
* Notebooks and *
1038
* Tabs *
1039
*****************/
1040
.notebook {
1042
// Through me you go to the grief wracked city;
1043
// Through me you go to everlasting pain;
1044
// Through me you go a pass among lost souls.
1045
// ...
1046
// Abandon all hope — Ye Who Enter Here
1047
padding: 0;
1048
background-color: $base_color;
1049
-GtkNotebook-initial-gap: 6;
1050
-GtkNotebook-arrow-spacing: 5;
1051
-GtkNotebook-tab-curvature: 0;
1052
-GtkNotebook-tab-overlap: 1;
1053
-GtkNotebook-has-tab-gap: false;
1054
-GtkWidget-focus-padding: 0;
1055
-GtkWidget-focus-line-width: 0;
1056
&.frame {
1057
border: 1px solid $borders_color;
1058
// FIXME doesn't work
1059
&.top { border-top-width: 0; }
1060
&.bottom { border-bottom-width: 0; }
1061
&.right { border-right-width: 0; }
1062
&.left { border-left-width: 0; }
1063
}
1064
&.header {
1065
// FIXME: double borders in some case, can't fix it w/o a class tho
1066
// FIXME: doesn't work on dark var
1067
background-color: $dark_color;
1068
// this is the shading of the header behind the tabs
1070
&.frame {
1071
border: 1px solid $borders_color;
1072
&.top { border-bottom-width: 0; }
1073
&.bottom { border-top-width: 0; }
1074
&.right { border-left-width: 0; }
1075
&.left { border-right-width: 0; }
1076
}
1077
&.top {
1079
box-shadow: inset 0 -1px $borders_color; // border
1080
}
1081
&.bottom {
1082
box-shadow: inset 0 1px $borders_color;
1083
}
1084
&.right {
1085
box-shadow: inset 1px 0 $borders_color;
1086
}
1087
&.left {
1088
box-shadow: inset -1px 0 $borders_color;
1089
}
1090
}
1091
tab {
1092
border-width: 0;
1093
border-style: solid;
1094
border-color: transparent;
1095
background-color: transparent;
1096
outline-offset: 0;
1098
$tab_indicator_size: 2px;
1100
// vertical tab sizing
1101
$vt_vpadding: 8px;
1102
$vt_hpadding: 20px;
1103
// horizontal tab sizing
1104
$ht_vpadding: 5px;
1105
$ht_hpadding: 20px;
1106
//FIXME: we get double border in some cases, not considering the broken
1108
//notebook content frame...
1109
&.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
1110
&.left, &.right { padding: $ht_vpadding $ht_hpadding; }
1111
/* works for testnotebookdnd, but there's a superfluous border
1114
in gedit or web, commented out for now, needs gtk fixes
1115
&.reorderable-page {
1116
&.top {
1117
padding-top: ($vt_vpadding - 1px);
1118
border-top-width: 1px;
1119
border-left-width: 1px;
1120
border-right-width: 1px;
1121
}
1122
&.bottom {
1123
padding-bottom: ($vt_vpadding - 1px);
1124
border-bottom-width: 1px;
1125
border-left-width: 1px;
1126
border-right-width: 1px;
1127
}
1128
&.left {
1129
padding-left: ($ht_hpadding - 1px);
1130
border-left-width: 1px;
1131
border-top-width: 1px;
1132
border-bottom-width: 1px;
1133
}
1134
&.right {
1135
padding-right: ($ht_hpadding - 1px);
1136
border-right-width: 1px;
1137
border-top-width: 1px;
1138
border-bottom-width: 1px;
1139
}
1140
}
1141
*/
1142
&.reorderable-page {
1143
-GtkNotebook-tab-overlap: 1;
1144
&.top, &.bottom {
1145
padding-left: 12px; // for a nicer close button
1146
padding-right: 12px; // placement
1147
border-left-width: 1px;
1148
border-right-width: 1px;
1149
}
1150
&.left, &.right {
1151
border-bottom-width: 1px;
1152
border-top-width: 1px;
1153
}
1154
}
1155
&.top {
1156
// padding-bottom: ($vt_vpadding -$tab_indicator_size);
1157
border-bottom-width: $tab_indicator_size;
1158
}
1159
&.bottom {
1160
// padding-top: ($vt_vpadding -$tab_indicator_size);
1161
border-top-width: $tab_indicator_size;
1162
}
1163
&.left {
1164
// padding-right: ($ht_hpadding -$tab_indicator_size);
1165
border-right-width: $tab_indicator_size;
1166
}
1167
&.right {
1168
// padding-left: ($ht_hpadding -$tab_indicator_size);
1169
border-left-width: $tab_indicator_size;
1170
}
1171
//here's the interesting stuff
1173
&:hover, &.prelight-page {
1174
border-color: $track_color;
1175
}
1176
&:active, &.active-page {
1177
border-color: $selected_bg_color;
1178
}
1179
@each $_tab, $_border in (top, bottom),
1180
(bottom, top),
1181
(left, right),
1182
(right, left) {
1183
&.reorderable-page.#{$_tab} {
1184
border-color: transparent;
1185
&:hover, &.prelight-page {
1186
border-color: $borders_color;
1187
border-#{$_border}-width: 1px;
1188
border-#{$_border}-color: transparent;
1189
background-color: $bg_color;
1190
}
1191
&:active, &.active-page {
1192
border-color: $borders_color;
1193
border-#{$_border}-width: 1px;
1194
border-#{$_border}-color: transparent;
1195
background-color: $light_color;
1196
}
1197
}
1198
}
1199
.label { //tab text
1200
padding: 0 2px; // needed for a nicer focus ring
1201
font-weight: bold;
1202
color: $secondary_fg_color;
1203
}
1204
.prelight-page .label, .label.prelight-page {
1205
// prelight tab text
1206
color: $fg_color;
1207
}
1208
.active-page .label, .label.active-page {
1209
// active tab text
1210
color: $fg_color;
1211
}
1212
.button { //tab close button
1213
padding: 0;
1214
@extend %image_button;
1215
background-size: ($small_size / 0.8) ($small_size / 0.8), auto;
1216
// @extend .button.flat;
1217
@include button(flat-normal);
1218
&:hover { @include button(flat-hover); }
1219
&:active { @include button(flat-active); }
1220
&:insensitive { @include button(flat-insensitive); }
1221
& > GtkImage { // this is a hack which makes tabs grow
1222
padding: 4px;
1223
}
1224
}
1225
}
1226
&.arrow {
1227
&:not(:hover):not(:active) { color: gtkalpha(currentColor, $enabled_opacity); }
1228
&:insensitive {
1229
color: $insensitive_fg_color;
1230
}
1231
}
1232
&:not(.reorderable-page) > .entry {
1233
@extend .entry.flat;
1234
}
1235
}
1236
/**************
1238
* Scrollbars *
1239
**************/
1240
$_slider_margin: 4px;
1242
$_slider_fine_tune_margin: 6px;
1243
.scrollbar {
1245
-GtkRange-slider-width: 8 + $_slider_margin * 2 + 1;
1246
-GtkRange-trough-border: 0;
1247
-GtkScrollbar-has-backward-stepper: false;
1248
-GtkScrollbar-has-forward-stepper: false;
1249
-GtkScrollbar-min-slider-length: 24 + $_slider_margin * 2;
1250
// minimum size for the slider.
1251
// sadly can't be in '.slider'
1252
// where it belongs
1253
-GtkRange-stepper-spacing: 0;
1254
-GtkRange-trough-under-steppers: 1;
1255
.button {
1257
border: none;
1258
}
1259
&.overlay-indicator {
1261
&:not(.dragging):not(.hovering) { // Overlay scrolling indicator
1262
-GtkRange-slider-width: 4 + $_slider_margin * 2;
1263
.slider {
1265
margin: $_slider_margin / 2;
1266
border: $_slider_margin / 2 solid scale-alpha($base_color, $lower_opacity);
1267
// background-clip: padding-box;
1268
}
1269
.trough {
1271
border-style: none;
1272
background-color: transparent;
1273
}
1274
}
1276
&.dragging,
1278
&.hovering {
1279
.trough {
1280
background-color: scale-alpha($base_color, $higher_opacity);
1281
}
1282
}
1283
}
1284
// trough coloring
1286
.trough {
1287
border: 1px none $borders_color;
1288
background-color: $base_color;
1289
background-clip: $extra_background_clip;
1290
}
1291
// slider coloring
1293
.slider {
1294
background-color: $tertiary_fg_color;
1295
&:hover { background-color: $secondary_fg_color; }
1296
&:active { background-color: $fg_color; }
1297
&:insensitive {
1298
opacity: $disabled_opacity;
1299
}
1300
}
1301
// sizing
1304
.slider {
1305
border-radius: 100px;
1306
margin: $_slider_margin;
1307
}
1308
&.fine-tune .slider { margin: $_slider_fine_tune_margin; }
1310
&.vertical {
1312
.slider {
1314
margin-left: 1px + $_slider_margin;
1315
&:dir(rtl) {
1317
margin-left: $_slider_margin;
1318
margin-right: 1px + $_slider_margin;
1319
}
1320
}
1321
&.fine-tune .slider {
1323
margin-left: 1px + $_slider_fine_tune_margin;
1324
&:dir(rtl) {
1326
margin-left: $_slider_fine_tune_margin;
1327
margin-right: 1px + $_slider_fine_tune_margin;
1328
}
1329
}
1330
.trough {
1332
border-left-style: solid;
1333
&:dir(rtl) {
1335
border-left-style: none;
1336
border-right-style: solid;
1337
}
1338
}
1339
}
1340
&.horizontal {
1342
.slider { margin-top: 1px + $_slider_margin; }
1344
&.fine-tune .slider { margin-top: 1px + $_slider_fine_tune_margin; }
1346
.trough { border-top-style: solid; }
1348
}
1349
}
1350
.scrollbars-junction,
1352
.scrollbars-junction.frame { // the small square between two scrollbars
1353
border-style: solid none none solid;
1354
background-color: $base_color;
1355
&:dir(rtl) { border-style: solid solid none none; }
1357
}
1358
/**********
1361
* Switch *
1362
**********/
1363
GtkSwitch {
1365
-GtkSwitch-slider-width: $small_size;
1366
-GtkSwitch-slider-height: $small_size;
1367
outline-offset: -4px;
1369
outline-radius: 100px;
1370
font-size: 0;
1371
&.trough {
1372
// similar to the .scale
1373
border: 8px solid transparent;
1374
border-radius: 100px;
1375
background-color: $track_color;
1376
// background-clip: padding-box;
1377
&:insensitive {
1378
color: $insensitive_fg_color;
1379
}
1380
&:active {
1381
background-color: scale-alpha($accent_bg_color, 0.5);
1382
color: $selected_fg_color;
1383
&:insensitive {
1384
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1385
color: $insensitive_fg_color;
1386
}
1387
}
1388
}
1389
&.slider {
1390
padding: 4px;
1391
border-radius: 100px;
1392
@include entry(normal);
1393
&:hover { @include entry(focus); }
1394
&:active { background-color: $accent_bg_color; }
1395
&:insensitive { @include entry(insensitive); }
1396
}
1397
.list-row:selected & {
1398
}
1399
}
1401
/*************************
1403
* Check and Radio items *
1404
*************************/
1405
// draw regular check and radio items using our PNG assets
1407
// all assets are rendered from assets.svg. never add pngs directly
1408
@each $w,$a in ('check', 'checkbox'),
1410
('radio','radio') {
1411
//standard checks and radios
1413
@each $s,$as in ('','-unchecked'),
1414
(':active', '-unchecked-active'),
1415
(':insensitive','-unchecked-insensitive'),
1416
(':inconsistent', '-mixed'),
1417
(':inconsistent:active', '-mixed-active'),
1418
(':inconsistent:insensitive', '-mixed-insensitive'),
1419
(':checked', '-checked'),
1420
(':checked:active', '-checked-active'),
1421
(':checked:insensitive','-checked-insensitive') {
1422
.#{$w}#{$s} {
1423
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
1424
url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
1425
icon-shadow: $z-depth-1;
1426
&:hover, &:active { icon-shadow: $z-depth-2; }
1427
&:insensitive { icon-shadow: none; }
1428
&.button.flat { }
1429
}
1430
}
1431
//menu
1433
@each $s,$as in ('',''),
1434
// (':active', '-checked'),
1435
(':insensitive','-insensitive'),
1436
(':inconsistent', '-mixed'),
1437
// (':inconsistent:active', '-mixed'),
1438
(':inconsistent:insensitive', '-mixed-insensitive'),
1439
(':checked', '-checked'),
1440
// (':checked:active', '-checked'),
1441
(':checked:insensitive','-checked-insensitive') {
1442
.menu .menuitem.#{$w}#{$s} {
1443
// color: gtkalpha(currentColor, $hint_opacity);
1444
// -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic');
1445
// &:active, &:checked { -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic'); }
1446
// &:inconsistent { -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic'); }
1447
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}.png"),
1448
url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}@2.png"));
1449
icon-shadow: none;
1450
&:hover {
1451
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-symbolic-dark.png"),
1452
url("assets/#{$a}#{$as}-symbolic-dark@2.png"));
1453
}
1454
}
1455
}
1456
}
1457
//treeview and list-rows
1459
.view.check, .view.radio,
1460
.list-row .check, list-row .radio {
1461
}
1462
//selection-mode
1464
@each $s,$as in ('','-selectionmode'),
1465
(':active', '-active-selectionmode'),
1466
(':insensitive', '-insensitive-selectionmode'),
1467
(':checked', '-checked-selectionmode'),
1468
(':checked:active', '-checked-active-selectionmode'),
1469
(':insensitive:checked', '-checked-insensitive-selectionmode') {
1470
.view.content-view.check#{$s}:not(.list) {
1471
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
1472
url("assets/checkbox#{$as}@2.png"));
1473
background-color: transparent;
1474
}
1475
}
1476
GtkCheckButton.text-button, GtkRadioButton.text-button {
1478
// this is for a nice focus on check and radios text
1479
padding: 2px 4px;
1480
outline-offset: 0;
1481
&:insensitive,
1482
&:insensitive:active,
1483
&:insensitive:inconsistent {
1484
// set insensitive color, which is overriden otherwise
1485
// color: $insensitive_fg_color;
1486
}
1487
}
1488
/************
1490
* GtkScale *
1491
************/
1492
.scale,
1493
.scale.scale-has-marks-above.scale-has-marks-below,
1494
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
1495
// FIXME: rationalize
1496
-GtkScale-slider-length: 20;
1497
-GtkRange-slider-width: 20;
1498
-GtkRange-trough-border: 2;
1499
outline-offset: -8px;
1500
outline-radius: 100px;
1501
&.fine-tune {
1503
&.slider { background-size: 80%; }
1504
}
1505
&.slider {
1507
&:not(:hover):not(:active) { background-size: 80%; }
1508
// @include entry(normal);
1509
// border-radius: 50%;
1510
// background-color: $accent_bg_color;
1511
@each $s,$as in ('',''),
1512
// (':hover','-hover'),
1513
(':active','-active'),
1514
(':insensitive','-insensitive') {
1515
&.slider#{$s} {
1516
$_url: 'assets/slider#{$as}#{$asset_suffix}';
1517
border-style: none;
1518
border-radius: 0;
1519
background-color: transparent;
1520
background-image: -gtk-scaled(url('#{$_url}.png'),
1521
url('#{$_url}@2.png'));
1522
background-repeat: no-repeat;
1523
background-position: center;
1524
box-shadow: none;
1525
}
1526
}
1527
&:hover {
1528
// @include entry(focus);
1529
// border-radius: 50%; // needed for double marks scales
1530
}
1531
&:insensitive {
1532
// @include entry(insensitive);
1533
// border-radius: 50%; // overridden
1534
}
1535
//OSD sliders
1536
.osd & {
1537
}
1538
}
1539
&.trough {
1540
margin: 10px 12px;
1541
background-color: $track_color;
1542
&.highlight {
1543
background-color: $accent_bg_color;
1544
&:insensitive { background-color: $track_color; }
1545
}
1546
&:insensitive { color: $insensitive_fg_color; }
1547
&.vertical { margin: 12px 10px; }
1548
//OSD troughs
1549
.osd & {
1550
}
1551
}
1552
// marks color
1553
&.separator {
1554
color: $track_color;
1555
}
1556
// scales on selected list rows
1557
.list-row:selected & {
1558
}
1559
}
1560
@each $d,$dn in ('', 'horz'),
1562
('.vertical', 'vert') {
1563
@each $w,$we in ('scale-has-marks-below','scale_marks_below'),
1564
('scale-has-marks-above','scale_marks_above') {
1565
.scale#{$d}.#{$w} {
1566
-GtkScale-slider-length: 20;
1567
-GtkRange-slider-width: 25;
1568
-GtkRange-trough-border: 2;
1569
@extend %#{$we}_#{$dn};
1571
@each $s,$as in ('',''),
1573
// (':hover','-hover'),
1574
(':active','-active'),
1575
(':insensitive','-insensitive') {
1576
&.slider#{$s} {
1577
$_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}';
1578
border-style: none;
1579
border-radius: 0;
1580
background-color: transparent;
1581
background-image: -gtk-scaled(url('#{$_url}.png'),
1582
url('#{$_url}@2.png'));
1583
background-repeat: no-repeat;
1584
background-position: center;
1585
box-shadow: none;
1586
}
1587
}
1588
}
1589
}
1590
}
1591
%scale_marks_above_horz {
1593
.trough { margin: 15px 12px 10px; }
1594
}
1595
%scale_marks_below_horz {
1596
.trough { margin: 10px 12px 15px; }
1597
}
1598
%scale_marks_above_vert {
1599
.trough { margin: 12px 10px 12px 15px; }
1600
}
1601
%scale_marks_below_vert {
1602
.trough { margin: 12px 15px 12px 10px; }
1603
}
1604
/*****************
1606
* Progress bars *
1607
*****************/
1608
GtkProgressBar {
1610
-GtkProgressBar-min-horizontal-bar-height: 4;
1611
-GtkProgressBar-min-vertical-bar-width: 4;
1612
padding: 0;
1613
font-size: smaller;
1614
color: $tertiary_fg_color;
1615
&.osd {
1616
-GtkProgressBar-xspacing: 0;
1617
-GtkProgressBar-yspacing: 0;
1618
-GtkProgressBar-min-horizontal-bar-height: 4;
1619
}
1620
&.trough { // background
1621
border-radius: 0;
1622
background-color: scale-alpha($selected_bg_color, $lower_opacity);
1623
&.osd {
1624
border-style: none;
1625
box-shadow: none;
1626
// background-color: transparent;
1627
}
1628
}
1629
}
1630
// moving bit
1632
.progressbar {
1633
border-radius: 0;
1634
background-color: $selected_bg_color;
1635
&.left {
1636
border-top-left-radius: 0;
1637
border-bottom-left-radius: 0;
1638
}
1639
&.right {
1640
border-top-right-radius: 0;
1641
border-bottom-right-radius: 0;
1642
}
1643
&.left.right {
1644
box-shadow: none;
1645
}
1646
&.vertical {
1647
&.bottom {
1648
border-bottom-left-radius: 0;
1649
border-bottom-right-radius: 0;
1650
box-shadow: none;
1651
}
1652
&.top {
1653
border-top-left-radius: 0;
1654
border-top-right-radius: 0;
1655
}
1656
}
1657
&.osd {
1658
background-image: none;
1659
background-color: $selected_bg_color;
1660
border-style: none;
1661
border-radius: 0;
1662
}
1663
}
1664
/*************
1667
* Level Bar *
1668
*************/
1669
.level-bar {
1671
box-shadow: $z-depth-1; // needs to be set here to avoid clipping
1672
color: $insensitive_fg_color;
1673
-GtkLevelBar-min-block-width: 36;
1674
-GtkLevelBar-min-block-height: 4;
1675
&.vertical {
1676
-GtkLevelBar-min-block-width: 4;
1677
-GtkLevelBar-min-block-height: 36;
1678
}
1679
&.trough {
1680
padding: 2px;
1681
border-radius: 2px;
1682
@include entry(normal);
1683
&:insensitive { @include entry(insensitive); }
1684
&.indicator-discrete {
1685
&.horizontal { padding: 2px 1px; }
1686
&.vertical { padding: 1px 2px; }
1687
}
1688
}
1689
&.fill-block {
1690
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
1691
// :nth-child working on discrete indicators
1692
background-color: $selected_bg_color;
1693
border-radius: 0;
1694
box-shadow: none;
1695
&.indicator-discrete {
1696
&.horizontal { margin: 0 1px; }
1697
&.vertical { margin: 1px 0; }
1698
}
1699
&.level-high {
1700
background-color: $success_color;
1701
}
1702
&.level-low {
1703
background-color: $warning_color;
1704
}
1705
&.empty-fill-block {
1706
background-color: $track_color;
1707
}
1708
}
1709
}
1710
/**********
1713
* Frames *
1714
**********/
1715
.frame {
1716
border: 1px solid $borders_color;
1717
&.flat { border-style: none; }
1718
padding: 0;
1719
&.action-bar {
1720
padding: $container_padding;
1721
border-width: 1px 0 0;
1722
}
1723
}
1724
GtkScrolledWindow {
1726
GtkViewport.frame { // avoid double borders when viewport inside
1727
// scrolled window
1728
border-style: none;
1729
}
1730
}
1731
//vbox and hbox separators
1733
.separator {
1734
// always disable separators
1735
// -GtkWidget-wide-separators: true;
1736
color: $borders_color;
1737
// Font and File button separators
1739
GtkFileChooserButton &.vertical,
1740
GtkFontButton &.vertical {
1741
// always disable separators
1742
-GtkWidget-wide-separators: true;
1743
}
1744
}
1745
/*********
1747
* Lists *
1748
*********/
1749
.list {
1751
border-color: $borders_color;
1752
background-color: $base_color;
1753
}
1754
.list-row,
1756
.grid-child {
1757
padding: 2px;
1758
}
1759
.list-row.activatable {
1761
// let's take care of background colors
1762
background-image: -gtk-gradient(radial,
1763
center center, 0,
1764
center center, 0.5,
1765
to(gtkalpha(currentColor, 0)),
1766
to(transparent)),
1767
linear-gradient(to bottom, gtkalpha(currentColor, 0));
1768
background-repeat: no-repeat;
1769
background-position: center, center;
1770
background-size: (192px / 0.8) (192px / 0.8), auto;
1771
&:hover {
1772
background-image: -gtk-gradient(radial,
1773
center center, 0,
1774
center center, 0.5,
1775
to(gtkalpha(currentColor, 0)),
1776
to(transparent)),
1777
linear-gradient(to bottom, gtkalpha(currentColor, 0.05));
1778
}
1779
&:active {
1780
transition-property: opacity, border-color, border-image, box-shadow,
1781
background-color, text-shadow, icon-shadow; // Remove background-image
1782
animation: list_ripple_effect $material_duration $material_timing_function forwards;
1783
}
1784
}
1785
.list-row:selected {
1787
@extend %selected_items;
1788
.button {
1789
&:insensitive { color: $insensitive_secondary_selected_fg_color; }
1790
&.flat {
1791
color: $secondary_selected_fg_color;
1792
&:hover, &:active { color: $selected_fg_color; }
1793
&:insensitive { color: $insensitive_secondary_selected_fg_color; }
1794
}
1795
}
1796
}
1797
// transition
1799
.list-row {
1800
&:hover { transition-duration: 0; }
1801
}
1802
/*********************
1805
* App Notifications *
1806
*********************/
1807
.app-notification,
1809
.app-notification.frame {
1810
@extend %osd;
1811
@extend .toolbar.osd;
1812
.button {
1813
}
1814
}
1815
/*************
1817
* Expanders *
1818
*************/
1819
.expander {
1821
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1822
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
1823
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1824
&:not(:hover):not(:active) { color: gtkalpha(currentColor, $enabled_opacity); }
1825
&:selected { color: $selected_fg_color; }
1826
}
1827
/************
1829
* Calendar *
1830
***********/
1831
GtkCalendar {
1832
border: 1px solid $borders_color;
1833
color: $fg_color;
1834
&:selected {
1836
@extend .view:selected;
1837
}
1838
&.header {
1840
border: 1px solid transparent;
1841
border-bottom-color: $borders_color;
1842
border-radius: 0;
1843
}
1844
&.button {
1846
// @extend .button.flat;
1847
@include button(flat-normal);
1848
&:hover { @include button(flat-hover); }
1849
&:active { @include button(flat-active); }
1850
&:insensitive { @include button(flat-insensitive); }
1851
}
1852
&:inconsistent { color: gtkalpha(currentColor, $hint_opacity); }
1854
&.highlight {
1855
font-size: smaller;
1856
color: gtkalpha(currentColor, $hint_opacity);
1857
}
1858
}
1859
/***********
1861
* Dialogs *
1862
***********/
1863
.message-dialog .dialog-action-area .button {
1865
padding: 8px;
1866
}
1867
.message-dialog { // Message Dialog styling
1869
&.background { background-color: $light_color; }
1870
.titlebar {
1871
border-style: none;
1872
// box-shadow: inset 0 1px $highlight_color;
1873
background-color: $light_color;
1874
}
1875
&.csd { // rounded bottom border styling for csd version
1876
&.background {
1877
// bigger radius for better antialiasing
1878
border-bottom-left-radius: 2px;
1879
border-bottom-right-radius: 2px;
1880
}
1881
.dialog-action-area .button {
1882
@extend .button.flat;
1883
padding: 9px 16px 10px;
1884
border-top: 1px solid $borders_color;
1885
border-radius: 0;
1886
background-size: (192px / 0.8) (192px / 0.8), auto;
1887
// &:first-child{ border-bottom-left-radius: 2px; }
1888
// &:last-child { border-bottom-right-radius: 2px; }
1889
&:first-child{ border-radius: 0 0 0 2px; }
1890
&:last-child { border-radius: 0 0 2px 0; }
1891
}
1892
}
1893
}
1894
GtkFileChooserDialog {
1896
.search-bar {
1897
// background-color: $base_color;
1898
// border-color: $bg_color;
1899
}
1900
.dialog-action-box {
1901
border-top: 1px solid $borders_color;
1902
}
1903
}
1904
/***********
1906
* Sidebar *
1907
***********/
1908
.sidebar {
1910
border: none;
1911
background-color: $secondary_base_color;
1912
&:selected {
1914
@extend %selected_items;
1915
}
1916
}
1917
GtkSidebarRow {
1919
// Needs overriding of the GtkListBoxRow padding
1920
&.list-row {
1921
padding: 0px;
1922
}
1923
// Using margins/padding directly in the SidebarRow
1924
// will make the animation of the new bookmark row jump
1925
.sidebar-revealer {
1926
padding: 4px 14px 4px 12px;
1927
}
1928
.sidebar-icon {
1929
opacity: $hint_opacity; // dim the device icons
1930
&:dir(ltr) { padding-right: 8px; }
1931
&:dir(rtl) { padding-left: 8px; }
1932
}
1933
.sidebar-label {
1934
&:dir(ltr) { padding-right: 2px; }
1935
&:dir(rtl) { padding-left: 2px; }
1936
}
1937
}
1938
GtkPlacesSidebar.sidebar {
1940
// looks like the label doesn't get all the states so work around
1941
.list-row:selected:insensitive .label { @extend %selected_items:insensitive; }
1942
.sidebar-placeholder-row {
1944
border: solid 1px $selected_bg_color;
1945
}
1946
.sidebar-new-bookmark-row {
1948
color: $accent_bg_color;
1949
}
1950
@at-root .sidebar-button.button { // @at-root needded to not change the specificity making button styling inheritance broken
1952
// so istead of "GtkPlacesSidebar.sidebar .sidebar-button.button" [specificity 0,0,3,1]
1953
// the extended selector ".sidebar-button.button" [specificity 0,0,2,0]
1954
&.image-button { padding: 4px; }
1956
@extend .button.flat;
1958
}
1959
// this is for indicating which sidebar row generated a popover
1960
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
1961
.has-open-popup { @extend .list-row.activatable:active; }
1962
}
1963
.sidebar-item {
1965
padding: 10px 4px;
1966
> .label {
1967
padding-left: 6px;
1968
padding-right: 6px;
1969
}
1970
&.needs-attention > .label {
1971
@extend %needs_attention;
1972
}
1973
}
1974
/*********
1976
* Paned *
1977
*********/
1978
GtkPaned { // this is for the standard paned separator
1980
-GtkPaned-handle-size: 1; // sets separator width
1982
-gtk-icon-source: none; // removes handle decoration
1984
margin: 0 8px 8px 0; // drag area of the separator, not a real margin
1985
&:dir(rtl) {
1986
margin-right: 0;
1987
margin-left: 8px;
1988
}
1989
.pane-separator {
1990
background-color: $borders_color;
1991
}
1992
}
1993
GtkPaned.wide { // this is for the paned with wide separator
1995
-GtkPaned-handle-size: 6; // wider separator here
1996
margin: 0; // no need of the invisible drag area so, reset margin
1997
.pane-separator {
1998
background-color: transparent;
1999
border-style: none solid;
2000
border-color: $borders_color;
2001
border-width: 1px;
2002
}
2003
&.vertical .pane-separator { border-style: solid none;}
2004
}
2005
/**************
2008
* GtkInfoBar *
2009
**************/
2010
GtkInfoBar {
2011
border-style: none;
2012
}
2013
.info {
2015
background-color: $info_bg_color;
2016
}
2017
.question {
2019
background-color: $question_bg_color;
2020
}
2021
.warning {
2023
background-color: $warning_bg_color;
2024
}
2025
.error {
2027
background-color: $error_bg_color;
2028
}
2029
.info,
2031
.question,
2032
.warning,
2033
.error {
2034
color: $selected_fg_color;
2035
.button {
2036
// @extend .list-row:selected.button;
2037
&:insensitive { color: $insensitive_secondary_selected_fg_color; }
2038
&.flat {
2039
color: $secondary_selected_fg_color;
2040
&:hover, &:active { color: $selected_fg_color; }
2041
&:insensitive { color: $insensitive_secondary_selected_fg_color; }
2042
}
2043
}
2044
.label:selected {
2045
}
2046
}
2047
/************
2049
* Tooltips *
2050
************/
2051
.tooltip {
2053
&.background {
2054
// background-color needs to be set this way otherwise it gets drawn twice
2055
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2056
background-color: scale-alpha($base_color, $higher_opacity);
2057
}
2058
// @extend %osd;
2060
color: $fg_color;
2061
padding: 4px; /* not working */
2062
border-radius: 2px;
2063
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2064
// FIXME: we need a border or tooltips vanish on black background.
2065
&.window-frame.csd {
2066
background-color: transparent;
2067
}
2068
}
2069
.tooltip * { //Yeah this is ugly
2071
padding: 4px;
2072
background-color: transparent;
2073
color: inherit; // just to be sure
2074
}
2075
/*****************
2077
* Color Chooser *
2078
*****************/
2079
GtkColorSwatch {
2081
// This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one
2082
// is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
2083
// is applied to the overlay box.
2084
box-shadow: $z-depth-1;
2086
// we need to re-set the shadow here since it get axed by the previous bit
2088
&:selected { }
2089
// base color corners rounding
2091
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2092
// sports a bigger radius.
2093
// nth-child is needed by the custom color strip.
2094
// The :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
2095
// and GtkColorSwatch.overlay, I know it's weird, but this is gtk+, not a browser.
2096
&.top {
2097
border-top-left-radius: 2px;
2098
border-top-right-radius: 2px;
2099
}
2100
&.bottom {
2101
border-bottom-left-radius: 2px;
2102
border-bottom-right-radius: 2px;
2103
}
2104
&.left, &:first-child:not(.overlay):not(.top) {
2105
border-top-left-radius: 2px;
2106
border-bottom-left-radius: 2px;
2107
}
2108
&.right, &:last-child:not(.overlay):not(.bottom) {
2109
border-top-right-radius: 2px;
2110
border-bottom-right-radius: 2px;
2111
}
2112
&:only-child:not(.overlay) { border-radius: 2px; }
2113
// overlay corner rounding
2115
&.top > .overlay {
2116
border-top-left-radius: 2px;
2117
border-top-right-radius: 2px;
2118
}
2119
&.bottom > .overlay {
2120
border-bottom-left-radius: 2px;
2121
border-bottom-right-radius: 2px;
2122
}
2123
&:first-child:not(.top) > .overlay {
2124
border-top-left-radius: 2px;
2125
border-bottom-left-radius: 2px;
2126
}
2127
&:last-child:not(.bottom) > .overlay {
2128
border-top-right-radius: 2px;
2129
border-bottom-right-radius: 2px;
2130
}
2131
&:only-child > .overlay { border-radius: 2px; }
2132
// hover effect
2134
&:hover { box-shadow: $z-depth-2; }
2135
// no hover effect for the colorswatch in the color editor
2137
GtkColorEditor & {
2138
border-radius: 2px; // same radius as the entry
2139
&:hover { box-shadow: $z-depth-1; }
2140
}
2141
// indicator and keynav outline colors
2143
&.color-dark {
2144
color: white;
2145
}
2146
&.color-light {
2147
color: scale-alpha(black, 0.8);
2148
}
2149
// border color
2151
&.overlay,
2152
&.overlay:selected {
2153
}
2154
// make the add color button looks like, well, a button
2156
&#add-color-button {
2157
background-image: linear-gradient(to right,
2158
$error_bg_color 25%,
2159
$warning_bg_color 25%, $warning_bg_color 50%,
2160
$info_bg_color 50%, $info_bg_color 75%,
2161
$question_bg_color 75%);
2162
color: white;
2163
}
2164
}
2165
/********
2168
* Misc *
2169
********/
2170
//content view (grid/list)
2172
.content-view {
2173
background-color: $bg_color;
2174
// &:hover { -gtk-image-effect: highlight; }
2175
&.rubberband { @extend .rubberband; }
2176
}
2177
.scale-popup {
2179
.osd & { @extend %osd; }
2181
.osd & .button.flat { //FIXME: quick hack, redo properly
2183
}
2184
.button { // +/- buttons on GtkVolumeButton popup
2186
padding: 10px;
2187
}
2188
}
2189
GtkScaleButton.button,
2191
GtkVolumeButton.button {
2192
// I assume both are image-button *by default*
2193
// with the image-button/text-button classes automagically applied depending on the button child these selectors can be deleted.
2194
@extend %image_button;
2195
&.text-button { @extend .text-button }
2197
}
2198
.floating-bar {
2200
@extend %osd;
2201
// @extend .toolbar.osd;
2202
padding: 3px 0 4px;
2203
border: 1px solid $borders_color;
2204
background-color: $base_color;
2205
background-clip: $extra_background_clip;
2206
}
2207
.floating-bar.bottom.left { /* axes left border and border radius */
2209
border-width: 1px 1px 0 0;
2210
border-radius: 0 2px + 1px 0 0;
2211
// border-width: 8px 8px 0 0;
2212
// border-image-width: 10px 10px 0 0;
2213
}
2214
.floating-bar.bottom.right { /* axes right border and border radius */
2216
border-width: 1px 0 0 1px;
2217
border-radius: 2px + 1px 0 0 0;
2218
// border-width: 8px 0 0 8px;
2219
// border-image-width: 10px 0 0 10px;
2220
}
2221
/**********************
2223
* Window Decorations *
2224
*********************/
2225
.window-frame {
2227
transition: none;
2228
border-radius: 2px 2px 0 0;
2229
box-shadow: $z-depth-4;
2230
// FIXME rationalize window-frame shadows
2232
/* this is used for the resize cursor area */
2234
margin: 8px;
2235
&:backdrop {
2237
box-shadow: $z-depth-2;
2238
}
2239
&.tiled {
2240
border-radius: 0;
2241
}
2242
&.popup {
2243
box-shadow: none;
2244
}
2245
// server-side decorations as used by mutter
2246
&.ssd {
2247
// box-shadow: 0 0 0 1px $borders_color; //just doing borders, wm draws actual shadows
2248
}
2249
&.csd {
2250
&.popup {
2251
border-radius: 0;
2252
box-shadow: $z-depth-2;
2253
}
2254
&.tooltip {
2255
border-radius: 2px;
2256
box-shadow: $z-depth-2;
2257
}
2258
&.message-dialog {
2259
border-radius: 2px;
2260
box-shadow: $z-depth-4;
2261
&:backdrop { box-shadow: $z-depth-2; }
2262
}
2263
}
2264
&.solid-csd {
2265
border-radius: 0;
2266
margin: 4px;
2267
background-color: $warning_color;
2268
// border: solid 1px $borders_color;
2269
box-shadow: none;
2270
}
2271
}
2272
// Window Close button
2274
.header-bar .button.titlebutton,
2275
.titlebar .button.titlebutton {
2276
// @extend .button.flat;
2277
@extend %image_button;
2278
}
2279
// catch all extend :)
2281
%selected_items {
2283
background-color: $selected_bg_color;
2284
color: $selected_fg_color;
2285
&:insensitive { color: $insensitive_selected_fg_color; }
2286
}
2287
.monospace {
2289
font: Monospace;
2290
}
2291
/**********************
2293
* Touch Copy & Paste *
2294
*********************/
2295
//touch selection handlebars for the Popover.osd above
2297
.entry.cursor-handle,
2298
.cursor-handle {
2299
background-color: $accent_bg_color;
2300
background-image: none;
2301
box-shadow: none;
2302
border-style: none;
2303
@each $s,$as in ('',''),
2304
(':hover','-hover'),
2305
(':active','-active') { //no need for insensitive and backdrop
2306
&.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
2307
$_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
2308
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2309
url('#{$_url}@2.png'));
2310
padding-left: 10px;
2311
}
2312
&.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
2313
$_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
2314
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2315
url('#{$_url}@2.png'));
2316
padding-right: 10px;
2317
}
2318
&.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
2319
$_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
2320
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2321
url('#{$_url}@2.png'));
2322
}
2323
}
2324
}
2325
/* Decouple the font of context menus from their entry/textview */
2327
.context-menu {
2328
font: initial;
2329
}
2330
.touch-selection {
2332
font: initial;
2333
color: $fg_color;
2334
background-color: $base_color;
2335
box-shadow: $z-depth-2;
2336
&:backdrop { box-shadow: $z-depth-1; }
2337
.button {
2338
}
2339
}
2340
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
2342
// This draws a box on top of the content, the size changes programmatically.
2343
.overshoot {
2344
&.top {
2345
@include overshoot(top);
2346
}
2347
&.bottom {
2348
@include overshoot(bottom);
2349
}
2350
&.left {
2351
@include overshoot(left);
2352
}
2353
&.right {
2354
@include overshoot(right);
2355
}
2356
}
2357
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2359
.undershoot {
2360
&.top {
2361
@include undershoot(top);
2362
}
2363
&.bottom {
2365
@include undershoot(bottom);
2366
}
2367
&.left {
2369
@include undershoot(left);
2370
}
2371
&.right {
2373
@include undershoot(right);
2374
}
2375
}
2376