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