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 { padding: 2px 0; }
584
.menu .menuitem { padding: 5px 6px 6px; }
585
.separator.vertical {
586
// always disable separators
587
-GtkWidget-wide-separators: true;
588
}
589
&.combobox-entry .entry {
590
&:dir(ltr) {
591
border-top-right-radius: 0;
592
border-bottom-right-radius: 0;
593
}
594
&:dir(rtl) {
595
border-top-left-radius: 0;
596
border-bottom-left-radius: 0;
597
}
598
}
599
&.combobox-entry .button {
600
padding: 10px;
601
&:dir(ltr) {
602
border-top-left-radius: 0;
603
border-bottom-left-radius: 0;
604
}
605
&:dir(rtl) {
606
border-top-right-radius: 0;
607
border-bottom-right-radius: 0;
608
}
609
}
610
}
611
.linked > GtkComboBox > .the-button-in-the-combobox,
613
.linked > GtkComboBoxText > .the-button-in-the-combobox {
614
// the combo is a composite widget so the way we do button linkind doesn't
615
// work, special case needed. See
616
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
617
&:dir(ltr),
618
&:dir(rtl) { @extend %linked_middle; } // specificity bump
619
}
620
.linked > GtkComboBox:first-child > .the-button-in-the-combobox,
621
.linked > GtkComboBoxText:first-child > .the-button-in-the-combobox {
622
@extend %linked:first-child;
623
}
624
.linked > GtkComboBox:last-child > .the-button-in-the-combobox,
625
.linked > GtkComboBoxText:last-child > .the-button-in-the-combobox {
626
@extend %linked:last-child;
627
}
628
.linked > GtkComboBox:only-child > .the-button-in-the-combobox,
629
.linked > GtkComboBoxText:only-child > .the-button-in-the-combobox {
630
@extend %linked:only-child;
631
}
632
.linked.vertical > GtkComboBoxText > .the-button-in-the-combobox,
634
.linked.vertical > GtkComboBox > .the-button-in-the-combobox { @extend %linked_vertical_middle; }
635
.linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox,
636
.linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox { @extend %linked_vertical:first-child; }
637
.linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox,
638
.linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox { @extend %linked_vertical:last-child; }
639
.linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox,
640
.linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox { @extend %linked_vertical:only-child; }
641
/************
643
* Toolbars *
644
************/
645
.toolbar {
646
-GtkWidget-window-dragging: true;
647
padding: 4px;
648
background-color: $bg_color;
649
.osd &, &.osd {
650
padding: $container_padding;
651
border-style: solid;
652
border-width: 8px;
653
border-image: -gtk-scaled(url("assets/osd-shadow#{$asset_suffix}.png"),
654
url("assets/osd-shadow#{$asset_suffix}@2.png"))
655
10 / 10px stretch;
656
border-radius: 2px;
657
// box-shadow: $z-depth-2;
658
background-color: $base_color;
659
&:backdrop {
660
border-image: -gtk-scaled(url("assets/osd-shadow-backdrop#{$asset_suffix}.png"),
661
url("assets/osd-shadow-backdrop#{$asset_suffix}@2.png"))
662
10 / 10px stretch;
663
// box-shadow: $z-depth-1;
664
}
665
& .button {
666
@extend .button.flat;
667
}
668
}
669
}
670
//searchbar, location-bar & inline-toolbar
672
.inline-toolbar {
673
padding: $container_padding;
674
border-style: solid;
675
border-width: 0 1px 1px;
676
border-color: $borders_color;
677
background-color: $secondary_base_color;
678
}
679
.search-bar, .location-bar {
681
padding: $container_padding;
682
border-style: solid;
683
border-width: 0 0 1px;
684
border-color: $borders_color;
685
background-color: $dark_color;
686
background-clip: border-box;
687
}
688
/***************
690
* Header bars *
691
***************/
692
.titlebar,
694
.header-bar {
695
padding: $container_padding;
696
border-width: 0 0 1px;
697
border-style: solid;
698
border-color: $borders_color;
699
border-radius: 2px 2px 0 0;
700
box-shadow: inset 0 1px $highlight_color;
701
background-color: $dark_color;
702
background-clip: border-box;
703
&:backdrop {
705
// background-color: $dark_color;
706
}
707
.title {
709
padding-left: 12px;
710
padding-right: 12px;
711
font-weight: bold;
712
}
713
.subtitle {
715
@extend .dim-label;
716
padding-left: 12px;
717
padding-right: 12px;
718
font-size: smaller;
719
}
720
.header-bar-separator,
722
& > GtkBox > .separator.vertical {
723
-GtkWidget-wide-separators: true;
724
-GtkWidget-separator-width: 1px;
725
border-style: solid;
726
border-width: 0 1px;
727
border-color: $borders_color;
728
}
729
& .button:not(.suggested-action):not(.destructive-action) {
731
@extend .button.flat;
732
border-image: -gtk-gradient(radial,
733
center bottom, 0,
734
center bottom, 0.001,
735
to($selected_bg_color),
736
to(transparent))
737
0 0 0 / 0 0 0px;
738
&:checked {
739
border-image: -gtk-gradient(radial,
740
center bottom, 0,
741
center bottom, 0.5,
742
to($selected_bg_color),
743
to(transparent))
744
0 0 2 / 0 0 2px;
745
background-color: transparent;
746
color: $fg_color;
747
&:insensitive {
748
background-color: transparent;
749
color: $insensitive_fg_color;
750
> .label { color: inherit; }
751
}
752
}
753
}
754
&.selection-mode {
756
box-shadow: inset 0 1px $secondary_highlight_color;
757
background-color: $selected_bg_color;
758
color: $selected_fg_color;
759
&:backdrop {
760
}
761
.subtitle:link { @extend *:link:selected; }
763
.button {
765
border-image: -gtk-gradient(radial,
766
center bottom, 0,
767
center bottom, 0.001,
768
to($selected_fg_color),
769
to(transparent))
770
0 0 0 / 0 0 0px;
771
color: $secondary_selected_fg_color;
772
&:hover, &:active, &:checked {
773
color: $selected_fg_color;
774
}
775
&:insensitive {
777
}
778
&:checked {
780
border-image: -gtk-gradient(radial,
781
center bottom, 0,
782
center bottom, 0.5,
783
to($selected_fg_color),
784
to(transparent))
785
0 0 2 / 0 0 2px;
786
color: $selected_fg_color;
787
&:insensitive {
788
color: $insensitive_selected_fg_color;
789
> .label { color: inherit; }
790
}
791
}
792
&.suggested-action {
793
// NOTE: do not use @extend .button;
794
@include button(normal);
795
&:hover { @include button(hover); }
796
&:active { @include button(active); }
797
&:insensitive { @include button(insensitive); }
798
}
799
}
800
.selection-menu {
802
padding-left: 16px;
803
padding-right: 16px;
804
GtkArrow { -GtkArrow-arrow-scaling: 1; }
806
.arrow {
808
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
809
}
810
}
811
}
812
.tiled &, .maximized & {
814
border-radius: 0; // squared corners when the window is max'd or tiled
815
box-shadow: none;
816
}
817
&.default-decoration {
819
padding: $container_padding;
820
border-width: 0;
821
.button { padding: 4px; }
822
}
823
}
824
/************
826
* Pathbars *
827
************/
828
.path-bar .button {
830
padding: 7px 6px 8px;
831
&.image-button { padding: 10px; }
832
&:only-child {
833
padding-left: 16px;
834
padding-right: 16px;
835
}
836
// the following is for spacing the icon and the label inside the home button
838
.label:last-child { padding-left: 2px; }
839
.label:first-child { padding-right: 2px; }
840
.label:only-child { padding-right: 0; padding-left: 0; }
841
GtkImage { padding-top: 1px; }
842
}
843
/**************
845
* Tree Views *
846
**************/
847
GtkTreeView.view {
848
-GtkTreeView-grid-line-width: 1;
849
-GtkTreeView-grid-line-pattern: '';
850
-GtkTreeView-tree-line-width: 1;
851
-GtkTreeView-tree-line-pattern: '';
852
-GtkTreeView-expander-size: 16;
853
border-left-color: $track_color; // this is actually the tree lines color,
855
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
856
&.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props
858
border-radius: 0; // rest border radius in lists
860
&:hover, &:active, &:selected { border-radius: 0; }
862
&.dnd {
864
border-style: solid none;
865
border-width: 1px;
866
border-color: mix($fg_color, $selected_bg_color, 50%);
867
}
868
&.expander {
870
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
871
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
872
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
873
&:selected {
874
color: scale-alpha($selected_fg_color, $enabled_opacity);
875
&:hover, &:active { color: $selected_fg_color; }
876
}
877
}
878
&.progressbar { // progress bar in treeviews
880
@extend .entry.progressbar;
881
border-width: 4px;
882
&:selected {
883
border-color: currentColor;
884
}
885
}
886
&.trough { // progress bar trough in treeviews
888
@extend .entry.progressbar;
889
border-width: 4px;
890
border-color: scale-alpha($selected_bg_color, $lower_opacity);
891
&:selected {
892
border-color: $track_color;
893
}
894
}
895
}
896
column-header {
898
.button {
899
@extend .list-row.activatable;
900
padding: 3px 6px 4px;
901
border-style: none solid solid none;
902
border-width: 1px;
903
border-color: $borders_color;
904
border-radius: 0;
905
box-shadow: none;
906
background-color: $base_color;
907
// font-weight: bold;
908
&:hover, &:active {
909
box-shadow: none;
910
}
911
&:insensitive {
912
background-color: $base_color;
913
}
914
&.dnd {
915
@extend column-header.button.dnd;
916
}
917
}
918
&:last-child .button,
919
&:last-child.button { //treeview-like derived widgets in Banshee and Evolution
920
border-right-style: none;
921
}
922
}
923
column-header.button.dnd { // for treeview-like derive widgets
925
border-left-style: solid;
926
background-clip: $extra_background_clip;
927
color: $selected_bg_color;
928
}
929
/*********
932
* Menus *
933
*********/
934
.menubar {
935
-GtkWidget-window-dragging: true;
936
padding: 0px;
937
box-shadow: inset 0 -1px $borders_color;
938
background-color: $dark_color;
939
& > .menuitem {
940
padding: 4px 8px;
941
color: $secondary_fg_color;
942
&:hover { //Seems like it :hover even with keyboard focus
943
box-shadow: inset 0 -2px $selected_bg_color;
944
color: $fg_color;
945
}
946
&:insensitive {
947
color: $insensitive_fg_color;
948
box-shadow: none;
949
}
950
}
951
}
952
.menu {
954
margin: 4px 0;
955
padding: 4px 0;
956
background-color: $base_color;
957
border: 1px solid $borders_color; // adds borders in a non composited env
958
.csd & {
959
border: none; // axes borders in a composited env
960
border-radius: 2px;
961
}
962
.menuitem {
963
transition: none;
964
padding: 3px 4px 4px;
965
font: initial;
966
text-shadow: none;
967
&:hover {
968
color: $selected_fg_color;
969
background-color: $selected_bg_color;
970
// background-color: gtkalpha(currentColor, $lower_opacity / 2);
971
}
972
&:insensitive {
973
color: $insensitive_fg_color;
974
}
975
//submenu indicators
976
&.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
977
&.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); }
978
}
979
&.button { // overlow buttons
980
border-style: none;
981
border-radius: 0;
982
box-shadow: none;
983
&.top { border-bottom: 1px solid $borders_color; }
984
&.bottom { border-top: 1px solid $borders_color; }
985
&:hover { background-color: gtkalpha(currentColor, $lower_opacity / 2); }
986
&:insensitive {
987
background-color: transparent;
988
border-color: transparent;
989
}
990
}
991
}
992
.menuitem .accelerator { color: gtkalpha(currentColor, $hint_opacity); }
994
.csd.popup { border-radius: 2px; }
996
/***************
999
* Popovers *
1000
***************/
1001
.popover {
1003
padding: 2px;
1004
border: 1px solid;
1005
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1006
border-radius: 2px + 1px;
1007
background-color: $secondary_base_color;
1008
box-shadow: $z-depth-2;
1009
&:backdrop { box-shadow: $z-depth-1; }
1010
> .list,
1012
> .view,
1013
> .toolbar,
1014
&.osd > .toolbar {
1015
border-style: none;
1016
border-image: none;
1017
background-color: transparent;
1018
}
1019
.button.flat {
1021
padding: 5px 8px 6px;
1022
background-color: transparent;
1023
background-size: (128px / 0.8) (128px / 0.8), auto;
1024
color: $fg_color;
1025
font: initial;
1026
}
1027
.linked > .button {
1029
border-radius: 2px;
1030
// @extend .button.flat;
1031
@include button(flat-normal);
1032
&:hover { @include button(flat-hover); }
1033
&:active { @include button(flat-active); }
1034
&:insensitive { @include button(flat-insensitive); }
1035
&:checked { @include button(checked); }
1036
&:checked:insensitive { @include button(checked-insensitive); }
1037
&.image-button { background-size: ($medium_size * 2 / 0.8) ($medium_size * 2 / 0.8), auto; }
1038
}
1039
&.osd { @extend %osd; }
1041
}
1042
/*****************
1044
* Notebooks and *
1045
* Tabs *
1046
*****************/
1047
.notebook {
1049
// Through me you go to the grief wracked city;
1050
// Through me you go to everlasting pain;
1051
// Through me you go a pass among lost souls.
1052
// ...
1053
// Abandon all hope — Ye Who Enter Here
1054
padding: 0;
1055
background-color: $base_color;
1056
-GtkNotebook-initial-gap: 6;
1057
-GtkNotebook-arrow-spacing: 5;
1058
-GtkNotebook-tab-curvature: 0;
1059
-GtkNotebook-tab-overlap: 1;
1060
-GtkNotebook-has-tab-gap: false;
1061
-GtkWidget-focus-padding: 0;
1062
-GtkWidget-focus-line-width: 0;
1063
&.frame {
1064
border: 1px solid $borders_color;
1065
// FIXME doesn't work
1066
&.top { border-top-width: 0; }
1067
&.bottom { border-bottom-width: 0; }
1068
&.right { border-right-width: 0; }
1069
&.left { border-left-width: 0; }
1070
}
1071
&.header {
1072
// FIXME: double borders in some case, can't fix it w/o a class tho
1073
// FIXME: doesn't work on dark var
1074
background-color: $dark_color;
1075
// this is the shading of the header behind the tabs
1077
&.frame {
1078
border: 1px solid $borders_color;
1079
&.top { border-bottom-width: 0; }
1080
&.bottom { border-top-width: 0; }
1081
&.right { border-left-width: 0; }
1082
&.left { border-right-width: 0; }
1083
}
1084
&.top {
1086
box-shadow: inset 0 -1px $borders_color; // border
1087
}
1088
&.bottom {
1089
box-shadow: inset 0 1px $borders_color;
1090
}
1091
&.right {
1092
box-shadow: inset 1px 0 $borders_color;
1093
}
1094
&.left {
1095
box-shadow: inset -1px 0 $borders_color;
1096
}
1097
}
1098
tab {
1099
border-width: 0;
1100
border-style: solid;
1101
border-color: transparent;
1102
background-color: transparent;
1103
outline-offset: 0;
1105
$tab_indicator_size: 2px;
1107
// vertical tab sizing
1108
$vt_vpadding: 8px;
1109
$vt_hpadding: 20px;
1110
// horizontal tab sizing
1111
$ht_vpadding: 5px;
1112
$ht_hpadding: 20px;
1113
//FIXME: we get double border in some cases, not considering the broken
1115
//notebook content frame...
1116
&.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
1117
&.left, &.right { padding: $ht_vpadding $ht_hpadding; }
1118
/* works for testnotebookdnd, but there's a superfluous border
1121
in gedit or web, commented out for now, needs gtk fixes
1122
&.reorderable-page {
1123
&.top {
1124
padding-top: ($vt_vpadding - 1px);
1125
border-top-width: 1px;
1126
border-left-width: 1px;
1127
border-right-width: 1px;
1128
}
1129
&.bottom {
1130
padding-bottom: ($vt_vpadding - 1px);
1131
border-bottom-width: 1px;
1132
border-left-width: 1px;
1133
border-right-width: 1px;
1134
}
1135
&.left {
1136
padding-left: ($ht_hpadding - 1px);
1137
border-left-width: 1px;
1138
border-top-width: 1px;
1139
border-bottom-width: 1px;
1140
}
1141
&.right {
1142
padding-right: ($ht_hpadding - 1px);
1143
border-right-width: 1px;
1144
border-top-width: 1px;
1145
border-bottom-width: 1px;
1146
}
1147
}
1148
*/
1149
&.reorderable-page {
1150
-GtkNotebook-tab-overlap: 1;
1151
&.top, &.bottom {
1152
padding-left: 12px; // for a nicer close button
1153
padding-right: 12px; // placement
1154
border-left-width: 1px;
1155
border-right-width: 1px;
1156
}
1157
&.left, &.right {
1158
border-bottom-width: 1px;
1159
border-top-width: 1px;
1160
}
1161
}
1162
&.top {
1163
// padding-bottom: ($vt_vpadding -$tab_indicator_size);
1164
border-bottom-width: $tab_indicator_size;
1165
}
1166
&.bottom {
1167
// padding-top: ($vt_vpadding -$tab_indicator_size);
1168
border-top-width: $tab_indicator_size;
1169
}
1170
&.left {
1171
// padding-right: ($ht_hpadding -$tab_indicator_size);
1172
border-right-width: $tab_indicator_size;
1173
}
1174
&.right {
1175
// padding-left: ($ht_hpadding -$tab_indicator_size);
1176
border-left-width: $tab_indicator_size;
1177
}
1178
//here's the interesting stuff
1180
&:hover, &.prelight-page {
1181
border-color: $track_color;
1182
}
1183
&:active, &.active-page {
1184
border-color: $selected_bg_color;
1185
}
1186
@each $_tab, $_border in (top, bottom),
1187
(bottom, top),
1188
(left, right),
1189
(right, left) {
1190
&.reorderable-page.#{$_tab} {
1191
border-color: transparent;
1192
&:hover, &.prelight-page {
1193
border-color: $borders_color;
1194
border-#{$_border}-width: 1px;
1195
border-#{$_border}-color: transparent;
1196
background-color: $bg_color;
1197
}
1198
&:active, &.active-page {
1199
border-color: $borders_color;
1200
border-#{$_border}-width: 1px;
1201
border-#{$_border}-color: transparent;
1202
background-color: $light_color;
1203
}
1204
}
1205
}
1206
.label { //tab text
1207
padding: 0 2px; // needed for a nicer focus ring
1208
font-weight: bold;
1209
color: $secondary_fg_color;
1210
}
1211
.prelight-page .label, .label.prelight-page {
1212
// prelight tab text
1213
color: $fg_color;
1214
}
1215
.active-page .label, .label.active-page {
1216
// active tab text
1217
color: $fg_color;
1218
}
1219
.button { //tab close button
1220
padding: 0;
1221
@extend %image_button;
1222
background-size: ($small_size / 0.8) ($small_size / 0.8), auto;
1223
// @extend .button.flat;
1224
@include button(flat-normal);
1225
&:hover { @include button(flat-hover); }
1226
&:active { @include button(flat-active); }
1227
&:insensitive { @include button(flat-insensitive); }
1228
& > GtkImage { // this is a hack which makes tabs grow
1229
padding: 4px;
1230
}
1231
}
1232
}
1233
&.arrow {
1234
&:not(:hover):not(:active) { color: gtkalpha(currentColor, $enabled_opacity); }
1235
&:insensitive {
1236
color: $insensitive_fg_color;
1237
}
1238
}
1239
&:not(.reorderable-page) > .entry {
1240
@extend .entry.flat;
1241
}
1242
}
1243
/**************
1245
* Scrollbars *
1246
**************/
1247
$_slider_margin: 4px;
1249
$_slider_fine_tune_margin: 6px;
1250
.scrollbar {
1252
-GtkRange-slider-width: 8 + $_slider_margin * 2 + 1;
1253
-GtkRange-trough-border: 0;
1254
-GtkScrollbar-has-backward-stepper: false;
1255
-GtkScrollbar-has-forward-stepper: false;
1256
-GtkScrollbar-min-slider-length: 24 + $_slider_margin * 2;
1257
// minimum size for the slider.
1258
// sadly can't be in '.slider'
1259
// where it belongs
1260
-GtkRange-stepper-spacing: 0;
1261
-GtkRange-trough-under-steppers: 1;
1262
.button {
1264
border: none;
1265
}
1266
&.overlay-indicator {
1268
&:not(.dragging):not(.hovering) { // Overlay scrolling indicator
1269
-GtkRange-slider-width: 4 + $_slider_margin * 2;
1270
.slider {
1272
margin: $_slider_margin / 2;
1273
border: $_slider_margin / 2 solid scale-alpha($base_color, $lower_opacity);
1274
// background-clip: padding-box;
1275
}
1276
.trough {
1278
border-style: none;
1279
background-color: transparent;
1280
}
1281
}
1283
&.dragging,
1285
&.hovering {
1286
.trough {
1287
background-color: scale-alpha($base_color, $higher_opacity);
1288
}
1289
}
1290
}
1291
// trough coloring
1293
.trough {
1294
border: 1px none $borders_color;
1295
background-color: $base_color;
1296
background-clip: $extra_background_clip;
1297
}
1298
// slider coloring
1300
.slider {
1301
background-color: $tertiary_fg_color;
1302
&:hover { background-color: $secondary_fg_color; }
1303
&:active { background-color: $fg_color; }
1304
&:insensitive {
1305
opacity: $disabled_opacity;
1306
}
1307
}
1308
// sizing
1311
.slider {
1312
border-radius: 100px;
1313
margin: $_slider_margin;
1314
}
1315
&.fine-tune .slider { margin: $_slider_fine_tune_margin; }
1317
&.vertical {
1319
.slider {
1321
margin-left: 1px + $_slider_margin;
1322
&:dir(rtl) {
1324
margin-left: $_slider_margin;
1325
margin-right: 1px + $_slider_margin;
1326
}
1327
}
1328
&.fine-tune .slider {
1330
margin-left: 1px + $_slider_fine_tune_margin;
1331
&:dir(rtl) {
1333
margin-left: $_slider_fine_tune_margin;
1334
margin-right: 1px + $_slider_fine_tune_margin;
1335
}
1336
}
1337
.trough {
1339
border-left-style: solid;
1340
&:dir(rtl) {
1342
border-left-style: none;
1343
border-right-style: solid;
1344
}
1345
}
1346
}
1347
&.horizontal {
1349
.slider { margin-top: 1px + $_slider_margin; }
1351
&.fine-tune .slider { margin-top: 1px + $_slider_fine_tune_margin; }
1353
.trough { border-top-style: solid; }
1355
}
1356
}
1357
.scrollbars-junction,
1359
.scrollbars-junction.frame { // the small square between two scrollbars
1360
border-style: solid none none solid;
1361
background-color: $base_color;
1362
&:dir(rtl) { border-style: solid solid none none; }
1364
}
1365
/**********
1368
* Switch *
1369
**********/
1370
GtkSwitch {
1372
-GtkSwitch-slider-width: $small_size;
1373
-GtkSwitch-slider-height: $small_size;
1374
outline-offset: -4px;
1376
outline-radius: 100px;
1377
font-size: 0;
1378
&.trough {
1379
// similar to the .scale
1380
border: 8px solid transparent;
1381
border-radius: 100px;
1382
background-color: $track_color;
1383
// background-clip: padding-box;
1384
&:insensitive {
1385
color: $insensitive_fg_color;
1386
}
1387
&:active {
1388
background-color: scale-alpha($accent_bg_color, 0.5);
1389
color: $selected_fg_color;
1390
&:insensitive {
1391
background-color: scale-alpha($accent_bg_color, 0.5 * $disabled_opacity);
1392
color: $insensitive_fg_color;
1393
}
1394
}
1395
}
1396
&.slider {
1397
padding: 4px;
1398
border-radius: 100px;
1399
@include entry(normal);
1400
&:hover { @include entry(focus); }
1401
&:active { background-color: $accent_bg_color; }
1402
&:insensitive { @include entry(insensitive); }
1403
}
1404
.list-row:selected & {
1405
}
1406
}
1408
/*************************
1410
* Check and Radio items *
1411
*************************/
1412
// draw regular check and radio items using our PNG assets
1414
// all assets are rendered from assets.svg. never add pngs directly
1415
@each $w,$a in ('check', 'checkbox'),
1417
('radio','radio') {
1418
//standard checks and radios
1420
@each $s,$as in ('','-unchecked'),
1421
(':active', '-unchecked-active'),
1422
(':insensitive','-unchecked-insensitive'),
1423
(':inconsistent', '-mixed'),
1424
(':inconsistent:active', '-mixed-active'),
1425
(':inconsistent:insensitive', '-mixed-insensitive'),
1426
(':checked', '-checked'),
1427
(':checked:active', '-checked-active'),
1428
(':checked:insensitive','-checked-insensitive') {
1429
.#{$w}#{$s} {
1430
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
1431
url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
1432
icon-shadow: $z-depth-1;
1433
&:hover, &:active { icon-shadow: $z-depth-2; }
1434
&:insensitive { icon-shadow: none; }
1435
&.button.flat { }
1436
}
1437
}
1438
//menu
1440
@each $s,$as in ('',''),
1441
// (':active', '-checked'),
1442
(':insensitive','-insensitive'),
1443
(':inconsistent', '-mixed'),
1444
// (':inconsistent:active', '-mixed'),
1445
(':inconsistent:insensitive', '-mixed-insensitive'),
1446
(':checked', '-checked'),
1447
// (':checked:active', '-checked'),
1448
(':checked:insensitive','-checked-insensitive') {
1449
.menu .menuitem.#{$w}#{$s} {
1450
// color: gtkalpha(currentColor, $hint_opacity);
1451
// -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic');
1452
// &:active, &:checked { -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic'); }
1453
// &:inconsistent { -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic'); }
1454
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}.png"),
1455
url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}@2.png"));
1456
icon-shadow: none;
1457
&:hover {
1458
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-symbolic-dark.png"),
1459
url("assets/#{$a}#{$as}-symbolic-dark@2.png"));
1460
}
1461
}
1462
}
1463
}
1464
//treeview and list-rows
1466
.view.check, .view.radio,
1467
.list-row .check, list-row .radio {
1468
}
1469
//selection-mode
1471
@each $s,$as in ('','-selectionmode'),
1472
(':active', '-active-selectionmode'),
1473
(':insensitive', '-insensitive-selectionmode'),
1474
(':checked', '-checked-selectionmode'),
1475
(':checked:active', '-checked-active-selectionmode'),
1476
(':insensitive:checked', '-checked-insensitive-selectionmode') {
1477
.view.content-view.check#{$s}:not(.list) {
1478
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
1479
url("assets/checkbox#{$as}@2.png"));
1480
background-color: transparent;
1481
}
1482
}
1483
GtkCheckButton.text-button, GtkRadioButton.text-button {
1485
// this is for a nice focus on check and radios text
1486
padding: 2px 4px;
1487
outline-offset: 0;
1488
&:insensitive,
1489
&:insensitive:active,
1490
&:insensitive:inconsistent {
1491
// set insensitive color, which is overriden otherwise
1492
// color: $insensitive_fg_color;
1493
}
1494
}
1495
/************
1497
* GtkScale *
1498
************/
1499
.scale,
1500
.scale.scale-has-marks-above.scale-has-marks-below,
1501
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
1502
// FIXME: rationalize
1503
-GtkScale-slider-length: 20;
1504
-GtkRange-slider-width: 20;
1505
-GtkRange-trough-border: 2;
1506
outline-offset: -8px;
1507
outline-radius: 100px;
1508
&.fine-tune {
1510
&.slider { background-size: 80%; }
1511
}
1512
&.slider {
1514
&:not(:hover):not(:active) { background-size: 80%; }
1515
// @include entry(normal);
1516
// border-radius: 50%;
1517
// background-color: $accent_bg_color;
1518
@each $s,$as in ('',''),
1519
// (':hover','-hover'),
1520
(':active','-active'),
1521
(':insensitive','-insensitive') {
1522
&.slider#{$s} {
1523
$_url: 'assets/slider#{$as}#{$asset_suffix}';
1524
border-style: none;
1525
border-radius: 0;
1526
background-color: transparent;
1527
background-image: -gtk-scaled(url('#{$_url}.png'),
1528
url('#{$_url}@2.png'));
1529
background-repeat: no-repeat;
1530
background-position: center;
1531
box-shadow: none;
1532
}
1533
}
1534
&:hover {
1535
// @include entry(focus);
1536
// border-radius: 50%; // needed for double marks scales
1537
}
1538
&:insensitive {
1539
// @include entry(insensitive);
1540
// border-radius: 50%; // overridden
1541
}
1542
//OSD sliders
1543
.osd & {
1544
}
1545
}
1546
&.trough {
1547
margin: 10px 12px;
1548
background-color: $track_color;
1549
&.highlight {
1550
background-color: $accent_bg_color;
1551
&:insensitive { background-color: $track_color; }
1552
}
1553
&:insensitive { color: $insensitive_fg_color; }
1554
&.vertical { margin: 12px 10px; }
1555
//OSD troughs
1556
.osd & {
1557
}
1558
}
1559
// marks color
1560
&.separator {
1561
color: $track_color;
1562
}
1563
// scales on selected list rows
1564
.list-row:selected & {
1565
}
1566
}
1567
@each $d,$dn in ('', 'horz'),
1569
('.vertical', 'vert') {
1570
@each $w,$we in ('scale-has-marks-below','scale_marks_below'),
1571
('scale-has-marks-above','scale_marks_above') {
1572
.scale#{$d}.#{$w} {
1573
-GtkScale-slider-length: 20;
1574
-GtkRange-slider-width: 25;
1575
-GtkRange-trough-border: 2;
1576
@extend %#{$we}_#{$dn};
1578
@each $s,$as in ('',''),
1580
// (':hover','-hover'),
1581
(':active','-active'),
1582
(':insensitive','-insensitive') {
1583
&.slider#{$s} {
1584
$_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}';
1585
border-style: none;
1586
border-radius: 0;
1587
background-color: transparent;
1588
background-image: -gtk-scaled(url('#{$_url}.png'),
1589
url('#{$_url}@2.png'));
1590
background-repeat: no-repeat;
1591
background-position: center;
1592
box-shadow: none;
1593
}
1594
}
1595
}
1596
}
1597
}
1598
%scale_marks_above_horz {
1600
.trough { margin: 15px 12px 10px; }
1601
}
1602
%scale_marks_below_horz {
1603
.trough { margin: 10px 12px 15px; }
1604
}
1605
%scale_marks_above_vert {
1606
.trough { margin: 12px 10px 12px 15px; }
1607
}
1608
%scale_marks_below_vert {
1609
.trough { margin: 12px 15px 12px 10px; }
1610
}
1611
/*****************
1613
* Progress bars *
1614
*****************/
1615
GtkProgressBar {
1617
-GtkProgressBar-min-horizontal-bar-height: 4;
1618
-GtkProgressBar-min-vertical-bar-width: 4;
1619
padding: 0;
1620
font-size: smaller;
1621
color: $tertiary_fg_color;
1622
&.osd {
1623
-GtkProgressBar-xspacing: 0;
1624
-GtkProgressBar-yspacing: 0;
1625
-GtkProgressBar-min-horizontal-bar-height: 4;
1626
}
1627
&.trough { // background
1628
border-radius: 0;
1629
background-color: scale-alpha($selected_bg_color, $lower_opacity);
1630
&.osd {
1631
border-style: none;
1632
box-shadow: none;
1633
// background-color: transparent;
1634
}
1635
}
1636
}
1637
// moving bit
1639
.progressbar {
1640
border-radius: 0;
1641
background-color: $selected_bg_color;
1642
&.left {
1643
border-top-left-radius: 0;
1644
border-bottom-left-radius: 0;
1645
}
1646
&.right {
1647
border-top-right-radius: 0;
1648
border-bottom-right-radius: 0;
1649
}
1650
&.left.right {
1651
box-shadow: none;
1652
}
1653
&.vertical {
1654
&.bottom {
1655
border-bottom-left-radius: 0;
1656
border-bottom-right-radius: 0;
1657
box-shadow: none;
1658
}
1659
&.top {
1660
border-top-left-radius: 0;
1661
border-top-right-radius: 0;
1662
}
1663
}
1664
&.osd {
1665
background-image: none;
1666
background-color: $selected_bg_color;
1667
border-style: none;
1668
border-radius: 0;
1669
}
1670
}
1671
/*************
1674
* Level Bar *
1675
*************/
1676
.level-bar {
1678
box-shadow: $z-depth-1; // needs to be set here to avoid clipping
1679
color: $insensitive_fg_color;
1680
-GtkLevelBar-min-block-width: 36;
1681
-GtkLevelBar-min-block-height: 4;
1682
&.vertical {
1683
-GtkLevelBar-min-block-width: 4;
1684
-GtkLevelBar-min-block-height: 36;
1685
}
1686
&.trough {
1687
padding: 2px;
1688
border-radius: 2px;
1689
@include entry(normal);
1690
&:insensitive { @include entry(insensitive); }
1691
&.indicator-discrete {
1692
&.horizontal { padding: 2px 1px; }
1693
&.vertical { padding: 1px 2px; }
1694
}
1695
}
1696
&.fill-block {
1697
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
1698
// :nth-child working on discrete indicators
1699
background-color: $selected_bg_color;
1700
border-radius: 0;
1701
box-shadow: none;
1702
&.indicator-discrete {
1703
&.horizontal { margin: 0 1px; }
1704
&.vertical { margin: 1px 0; }
1705
}
1706
&.level-high {
1707
background-color: $success_color;
1708
}
1709
&.level-low {
1710
background-color: $warning_color;
1711
}
1712
&.empty-fill-block {
1713
background-color: $track_color;
1714
}
1715
}
1716
}
1717
/**********
1720
* Frames *
1721
**********/
1722
.frame {
1723
border: 1px solid $borders_color;
1724
&.flat { border-style: none; }
1725
padding: 0;
1726
&.action-bar {
1727
padding: $container_padding;
1728
border-width: 1px 0 0;
1729
}
1730
}
1731
GtkScrolledWindow {
1733
GtkViewport.frame { // avoid double borders when viewport inside
1734
// scrolled window
1735
border-style: none;
1736
}
1737
}
1738
//vbox and hbox separators
1740
.separator {
1741
// always disable separators
1742
// -GtkWidget-wide-separators: true;
1743
color: $borders_color;
1744
// Font and File button separators
1746
GtkFileChooserButton &.vertical,
1747
GtkFontButton &.vertical {
1748
// always disable separators
1749
-GtkWidget-wide-separators: true;
1750
}
1751
}
1752
/*********
1754
* Lists *
1755
*********/
1756
.list {
1758
border-color: $borders_color;
1759
background-color: $base_color;
1760
}
1761
.list-row,
1763
.grid-child {
1764
padding: 2px;
1765
}
1766
.list-row.activatable {
1768
// let's take care of background colors
1769
background-image: -gtk-gradient(radial,
1770
center center, 0,
1771
center center, 0.5,
1772
to(gtkalpha(currentColor, 0)),
1773
to(transparent)),
1774
linear-gradient(to bottom, gtkalpha(currentColor, 0));
1775
background-repeat: no-repeat;
1776
background-position: center, center;
1777
background-size: (192px / 0.8) (192px / 0.8), auto;
1778
&:hover {
1779
background-image: -gtk-gradient(radial,
1780
center center, 0,
1781
center center, 0.5,
1782
to(gtkalpha(currentColor, 0)),
1783
to(transparent)),
1784
linear-gradient(to bottom, gtkalpha(currentColor, 0.05));
1785
}
1786
&:active {
1787
transition-property: opacity, border-color, border-image, box-shadow,
1788
background-color, text-shadow, icon-shadow; // Remove background-image
1789
animation: list_ripple_effect $material_duration $material_timing_function forwards;
1790
}
1791
}
1792
.list-row:selected {
1794
@extend %selected_items;
1795
.button {
1796
&:insensitive { color: $insensitive_secondary_selected_fg_color; }
1797
&.flat {
1798
color: $secondary_selected_fg_color;
1799
&:hover, &:active { color: $selected_fg_color; }
1800
&:insensitive { color: $insensitive_secondary_selected_fg_color; }
1801
}
1802
}
1803
}
1804
// transition
1806
.list-row {
1807
&:hover { transition-duration: 0; }
1808
}
1809
/*********************
1812
* App Notifications *
1813
*********************/
1814
.app-notification,
1816
.app-notification.frame {
1817
@extend %osd;
1818
@extend .toolbar.osd;
1819
.button {
1820
}
1821
}
1822
/*************
1824
* Expanders *
1825
*************/
1826
.expander {
1828
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1829
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
1830
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1831
&:not(:hover):not(:active) { color: gtkalpha(currentColor, $enabled_opacity); }
1832
&:selected { color: $selected_fg_color; }
1833
}
1834
/************
1836
* Calendar *
1837
***********/
1838
GtkCalendar {
1839
border: 1px solid $borders_color;
1840
color: $fg_color;
1841
&:selected {
1843
@extend .view:selected;
1844
}
1845
&.header {
1847
border: 1px solid transparent;
1848
border-bottom-color: $borders_color;
1849
border-radius: 0;
1850
}
1851
&.button {
1853
// @extend .button.flat;
1854
@include button(flat-normal);
1855
&:hover { @include button(flat-hover); }
1856
&:active { @include button(flat-active); }
1857
&:insensitive { @include button(flat-insensitive); }
1858
}
1859
&:inconsistent { color: gtkalpha(currentColor, $disabled_opacity); }
1861
&.highlight {
1862
font-size: smaller;
1863
color: gtkalpha(currentColor, $hint_opacity);
1864
}
1865
}
1866
/***********
1868
* Dialogs *
1869
***********/
1870
.message-dialog .dialog-action-area .button {
1872
padding: 8px;
1873
}
1874
.message-dialog { // Message Dialog styling
1876
&.background { background-color: $light_color; }
1877
.titlebar {
1878
border-style: none;
1879
// box-shadow: inset 0 1px $highlight_color;
1880
background-color: $light_color;
1881
}
1882
&.csd { // rounded bottom border styling for csd version
1883
&.background {
1884
// bigger radius for better antialiasing
1885
border-bottom-left-radius: 2px;
1886
border-bottom-right-radius: 2px;
1887
}
1888
.dialog-action-area .button {
1889
@extend .button.flat;
1890
padding: 9px 16px 10px;
1891
border-top: 1px solid $borders_color;
1892
border-radius: 0;
1893
background-size: (192px / 0.8) (192px / 0.8), auto;
1894
// &:first-child{ border-bottom-left-radius: 2px; }
1895
// &:last-child { border-bottom-right-radius: 2px; }
1896
&:first-child{ border-radius: 0 0 0 2px; }
1897
&:last-child { border-radius: 0 0 2px 0; }
1898
}
1899
}
1900
}
1901
GtkFileChooserDialog {
1903
.search-bar {
1904
// background-color: $base_color;
1905
// border-color: $bg_color;
1906
}
1907
.dialog-action-box {
1908
border-top: 1px solid $borders_color;
1909
}
1910
}
1911
/***********
1913
* Sidebar *
1914
***********/
1915
.sidebar {
1917
border: none;
1918
background-color: $secondary_base_color;
1919
&:selected {
1921
@extend %selected_items;
1922
}
1923
}
1924
GtkSidebarRow {
1926
// Needs overriding of the GtkListBoxRow padding
1927
&.list-row {
1928
padding: 0px;
1929
}
1930
// Using margins/padding directly in the SidebarRow
1931
// will make the animation of the new bookmark row jump
1932
.sidebar-revealer {
1933
padding: 4px 14px 4px 12px;
1934
}
1935
.sidebar-icon {
1936
opacity: $hint_opacity; // dim the device icons
1937
&:dir(ltr) { padding-right: 8px; }
1938
&:dir(rtl) { padding-left: 8px; }
1939
}
1940
.sidebar-label {
1941
&:dir(ltr) { padding-right: 2px; }
1942
&:dir(rtl) { padding-left: 2px; }
1943
}
1944
}
1945
GtkPlacesSidebar.sidebar {
1947
// looks like the label doesn't get all the states so work around
1948
.list-row:selected:insensitive .label { @extend %selected_items:insensitive; }
1949
.sidebar-placeholder-row {
1951
border: solid 1px $selected_bg_color;
1952
}
1953
.sidebar-new-bookmark-row {
1955
color: $accent_bg_color;
1956
}
1957
@at-root .sidebar-button.button { // @at-root needded to not change the specificity making button styling inheritance broken
1959
// so istead of "GtkPlacesSidebar.sidebar .sidebar-button.button" [specificity 0,0,3,1]
1960
// the extended selector ".sidebar-button.button" [specificity 0,0,2,0]
1961
&.image-button { padding: 4px; }
1963
@extend .button.flat;
1965
}
1966
// this is for indicating which sidebar row generated a popover
1967
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
1968
.has-open-popup { @extend .list-row.activatable:active; }
1969
}
1970
.sidebar-item {
1972
padding: 10px 4px;
1973
> .label {
1974
padding-left: 6px;
1975
padding-right: 6px;
1976
}
1977
&.needs-attention > .label {
1978
@extend %needs_attention;
1979
}
1980
}
1981
/*********
1983
* Paned *
1984
*********/
1985
GtkPaned { // this is for the standard paned separator
1987
-GtkPaned-handle-size: 1; // sets separator width
1989
-gtk-icon-source: none; // removes handle decoration
1991
margin: 0 8px 8px 0; // drag area of the separator, not a real margin
1992
&:dir(rtl) {
1993
margin-right: 0;
1994
margin-left: 8px;
1995
}
1996
.pane-separator {
1997
background-color: $borders_color;
1998
}
1999
}
2000
GtkPaned.wide { // this is for the paned with wide separator
2002
-GtkPaned-handle-size: 6; // wider separator here
2003
margin: 0; // no need of the invisible drag area so, reset margin
2004
.pane-separator {
2005
background-color: transparent;
2006
border-style: none solid;
2007
border-color: $borders_color;
2008
border-width: 1px;
2009
}
2010
&.vertical .pane-separator { border-style: solid none;}
2011
}
2012
/**************
2015
* GtkInfoBar *
2016
**************/
2017
GtkInfoBar {
2018
border-style: none;
2019
}
2020
.info {
2022
background-color: $info_bg_color;
2023
}
2024
.question {
2026
background-color: $question_bg_color;
2027
}
2028
.warning {
2030
background-color: $warning_bg_color;
2031
}
2032
.error {
2034
background-color: $error_bg_color;
2035
}
2036
.info,
2038
.question,
2039
.warning,
2040
.error {
2041
color: $selected_fg_color;
2042
.button {
2043
// @extend .list-row:selected.button;
2044
&:insensitive { color: $insensitive_secondary_selected_fg_color; }
2045
&.flat {
2046
color: $secondary_selected_fg_color;
2047
&:hover, &:active { color: $selected_fg_color; }
2048
&:insensitive { color: $insensitive_secondary_selected_fg_color; }
2049
}
2050
}
2051
.label:selected {
2052
}
2053
}
2054
/************
2056
* Tooltips *
2057
************/
2058
.tooltip {
2060
&.background {
2061
// background-color needs to be set this way otherwise it gets drawn twice
2062
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2063
background-color: scale-alpha($base_color, $higher_opacity);
2064
}
2065
// @extend %osd;
2067
color: $fg_color;
2068
padding: 4px; /* not working */
2069
border-radius: 2px;
2070
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2071
// FIXME: we need a border or tooltips vanish on black background.
2072
&.window-frame.csd {
2073
background-color: transparent;
2074
}
2075
}
2076
.tooltip * { //Yeah this is ugly
2078
padding: 4px;
2079
background-color: transparent;
2080
color: inherit; // just to be sure
2081
}
2082
/*****************
2084
* Color Chooser *
2085
*****************/
2086
GtkColorSwatch {
2088
// This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one
2089
// is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
2090
// is applied to the overlay box.
2091
box-shadow: $z-depth-1;
2093
// we need to re-set the shadow here since it get axed by the previous bit
2095
&:selected { }
2096
// base color corners rounding
2098
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2099
// sports a bigger radius.
2100
// nth-child is needed by the custom color strip.
2101
// The :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
2102
// and GtkColorSwatch.overlay, I know it's weird, but this is gtk+, not a browser.
2103
&.top {
2104
border-top-left-radius: 2px;
2105
border-top-right-radius: 2px;
2106
}
2107
&.bottom {
2108
border-bottom-left-radius: 2px;
2109
border-bottom-right-radius: 2px;
2110
}
2111
&.left, &:first-child:not(.overlay):not(.top) {
2112
border-top-left-radius: 2px;
2113
border-bottom-left-radius: 2px;
2114
}
2115
&.right, &:last-child:not(.overlay):not(.bottom) {
2116
border-top-right-radius: 2px;
2117
border-bottom-right-radius: 2px;
2118
}
2119
&:only-child:not(.overlay) { border-radius: 2px; }
2120
// overlay corner rounding
2122
&.top > .overlay {
2123
border-top-left-radius: 2px;
2124
border-top-right-radius: 2px;
2125
}
2126
&.bottom > .overlay {
2127
border-bottom-left-radius: 2px;
2128
border-bottom-right-radius: 2px;
2129
}
2130
&:first-child:not(.top) > .overlay {
2131
border-top-left-radius: 2px;
2132
border-bottom-left-radius: 2px;
2133
}
2134
&:last-child:not(.bottom) > .overlay {
2135
border-top-right-radius: 2px;
2136
border-bottom-right-radius: 2px;
2137
}
2138
&:only-child > .overlay { border-radius: 2px; }
2139
// hover effect
2141
&:hover { box-shadow: $z-depth-2; }
2142
// no hover effect for the colorswatch in the color editor
2144
GtkColorEditor & {
2145
border-radius: 2px; // same radius as the entry
2146
&:hover { box-shadow: $z-depth-1; }
2147
}
2148
// indicator and keynav outline colors
2150
&.color-dark {
2151
color: white;
2152
}
2153
&.color-light {
2154
color: scale-alpha(black, 0.8);
2155
}
2156
// border color
2158
&.overlay,
2159
&.overlay:selected {
2160
}
2161
// make the add color button looks like, well, a button
2163
&#add-color-button {
2164
background-image: linear-gradient(to right,
2165
$error_bg_color 25%,
2166
$warning_bg_color 25%, $warning_bg_color 50%,
2167
$info_bg_color 50%, $info_bg_color 75%,
2168
$question_bg_color 75%);
2169
color: white;
2170
}
2171
}
2172
/********
2175
* Misc *
2176
********/
2177
//content view (grid/list)
2179
.content-view {
2180
background-color: $bg_color;
2181
// &:hover { -gtk-image-effect: highlight; }
2182
&.rubberband { @extend .rubberband; }
2183
}
2184
.scale-popup {
2186
.osd & { @extend %osd; }
2188
.osd & .button.flat { //FIXME: quick hack, redo properly
2190
}
2191
.button { // +/- buttons on GtkVolumeButton popup
2193
padding: 10px;
2194
}
2195
}
2196
GtkScaleButton.button,
2198
GtkVolumeButton.button {
2199
// I assume both are image-button *by default*
2200
// with the image-button/text-button classes automagically applied depending on the button child these selectors can be deleted.
2201
@extend %image_button;
2202
&.text-button { @extend .text-button }
2204
}
2205
/**********************
2207
* Window Decorations *
2208
*********************/
2209
.window-frame {
2211
transition: none;
2212
border-radius: 2px 2px 0 0;
2213
box-shadow: $z-depth-4;
2214
// FIXME rationalize window-frame shadows
2216
/* this is used for the resize cursor area */
2218
margin: 8px;
2219
&:backdrop {
2221
box-shadow: $z-depth-2;
2222
}
2223
&.tiled {
2224
border-radius: 0;
2225
}
2226
&.popup {
2227
box-shadow: none;
2228
}
2229
// server-side decorations as used by mutter
2230
&.ssd {
2231
// box-shadow: 0 0 0 1px $borders_color; //just doing borders, wm draws actual shadows
2232
}
2233
&.csd {
2234
&.popup {
2235
border-radius: 2px;
2236
box-shadow: $z-depth-2;
2237
}
2238
&.tooltip {
2239
border-radius: 2px;
2240
box-shadow: $z-depth-2;
2241
}
2242
&.message-dialog {
2243
border-radius: 2px;
2244
box-shadow: $z-depth-4;
2245
&:backdrop { box-shadow: $z-depth-2; }
2246
}
2247
}
2248
&.solid-csd {
2249
border-radius: 0;
2250
margin: 4px;
2251
background-color: $warning_color;
2252
// border: solid 1px $borders_color;
2253
box-shadow: none;
2254
}
2255
}
2256
// Window Close button
2258
.header-bar .button.titlebutton,
2259
.titlebar .button.titlebutton {
2260
// @extend .button.flat;
2261
@extend %image_button;
2262
}
2263
// catch all extend :)
2265
%selected_items {
2267
background-color: $selected_bg_color;
2268
color: $selected_fg_color;
2269
&:insensitive { color: $insensitive_selected_fg_color; }
2270
}
2271
.monospace {
2273
font: Monospace;
2274
}
2275
/**********************
2277
* Touch Copy & Paste *
2278
*********************/
2279
//touch selection handlebars for the Popover.osd above
2281
.entry.cursor-handle,
2282
.cursor-handle {
2283
background-color: $accent_bg_color;
2284
background-image: none;
2285
box-shadow: none;
2286
border-style: none;
2287
@each $s,$as in ('',''),
2288
(':hover','-hover'),
2289
(':active','-active') { //no need for insensitive and backdrop
2290
&.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
2291
$_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
2292
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2293
url('#{$_url}@2.png'));
2294
padding-left: 10px;
2295
}
2296
&.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
2297
$_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
2298
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2299
url('#{$_url}@2.png'));
2300
padding-right: 10px;
2301
}
2302
&.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
2303
$_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
2304
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2305
url('#{$_url}@2.png'));
2306
}
2307
}
2308
}
2309
/* Decouple the font of context menus from their entry/textview */
2311
.context-menu {
2312
font: initial;
2313
}
2314
.touch-selection {
2316
font: initial;
2317
color: $fg_color;
2318
background-color: $base_color;
2319
box-shadow: $z-depth-2;
2320
&:backdrop { box-shadow: $z-depth-1; }
2321
.button {
2322
}
2323
}
2324
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
2326
// This draws a box on top of the content, the size changes programmatically.
2327
.overshoot {
2328
&.top {
2329
@include overshoot(top);
2330
}
2331
&.bottom {
2332
@include overshoot(bottom);
2333
}
2334
&.left {
2335
@include overshoot(left);
2336
}
2337
&.right {
2338
@include overshoot(right);
2339
}
2340
}
2341
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2343
.undershoot {
2344
&.top {
2345
@include undershoot(top);
2346
}
2347
&.bottom {
2349
@include undershoot(bottom);
2350
}
2351
&.left {
2353
@include undershoot(left);
2354
}
2355
&.right {
2357
@include undershoot(right);
2358
}
2359
}
2360