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