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