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
background-repeat: no-repeat;
289
background-position: center, center;
290
background-size: 36px * 2 / 0.8 36px * 2 / 0.8, auto;
291
font-weight: 500;
292
@include button(normal);
293
&:hover { @include button(hover); }
294
&:active { @include button(active); }
295
&:insensitive { @include button(insensitive); }
296
&:checked { @include button(checked); }
297
&:checked:insensitive { @include button(checked-insensitive); }
298
&.flat {
299
@include button(flat);
300
&:hover { @include button(flat-hover); }
301
&:active { @include button(flat-active); }
302
&:insensitive { @include button(flat-insensitive); }
303
&:checked { @include button(flat-checked); }
304
&:checked:insensitive { @include button(flat-checked-insensitive); }
305
.linked > & {
306
border-radius: 2px;
307
&.image-button {
308
outline-radius: 100px;
309
border-radius: 100px;
310
}
311
}
312
}
313
// big standalone buttons like in Documents pager
314
&.osd {
315
&.image-button { padding: 16px; }
316
&:insensitive { opacity: 0; }
317
}
318
//overlay / OSD style
319
.osd & {
320
}
321
// Suggested and Destructive Action buttons
323
@each $b_type, $b_color in (suggested-action, $selected_bg_color),
324
(destructive-action, $destructive_color) {
325
&.#{$b_type} {
326
background-color: $b_color;
327
color: $selected_fg_color;
328
// @include button(normal, $b_color, white);
329
// &:hover { @include button(hover, $b_color, white); }
330
// &:active, &:checked { @include button(active, $b_color, white); }
331
&:insensitive { @include button(insensitive, $b_color, white); }
332
&:checked { background-color: mix($selected_fg_color, $b_color, 20%); }
333
&.flat {
334
background-color: transparent;
335
color: $b_color;
336
// @include button(flat, $b_color, white);
337
// &:hover { @include button(flat-hover, $b_color, white); }
338
// &:active, &:checked { @include button(flat-active, $b_color, white); }
339
&:insensitive { @include button(flat-insensitive, $b_color, white); }
340
}
341
}
342
}
343
&.image-button { @extend %image_button; }
345
&.text-button {
347
padding-left: 16px;
348
padding-right: 16px;
349
}
350
&.text-button.image-button {
352
// those buttons needs uneven horizontal padding, we want the icon side
353
// to have the image-button padding, while the text side the text-button
354
// one, so we're adding the missing padding to the label depending on
355
// its position inside the button
356
padding: 7px 10px 8px; // same as .button
357
outline-radius: 2px;
358
border-radius: 2px;
359
background-size: 36px * 2 / 0.8 36px * 2 / 0.8, auto;
360
.label:first-child { padding-left: 6px; }
361
.label:last-child { padding-right: 6px; }
362
}
363
.stack-switcher > & {
365
// to position the needs attention dot, padding is added to the button
366
// child, a label needs just lateral padding while an icon needs vertical
367
// padding added too.
368
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
370
> .label {
372
padding-left: 6px; // label padding
373
padding-right: 6px; //
374
}
375
> GtkImage {
376
padding-left: 6px; // image padding
377
padding-right: 6px; //
378
padding-top: 3px; //
379
padding-bottom: 3px; //
380
}
381
&.text-button {
382
padding: 7px 10px 8px; // needed or it will get overridden
383
}
384
&.image-button {
385
// we want image buttons to have a 1:1 aspect ratio, so compensation
386
// of the padding added to the GtkImage is needed
387
padding: 7px 4px;
388
}
389
&.needs-attention > .label,
390
&.needs-attention > GtkImage { @extend %needs_attention; }
391
&.needs-attention:checked > .label,
392
&.needs-attention:checked > GtkImage {
393
animation: none;
394
background-image: none;
395
}
396
}
397
//inline-toolbar buttons
399
.inline-toolbar & {
400
@extend .button.flat;
401
@extend %image_button;
402
}
403
.primary-toolbar & { icon-shadow: none; } // tango icons don't need shadows
405
.linked > &:not(.flat):not(:only-child) { @extend %linked; }
407
.linked.vertical > &:not(.flat):not(:only-child) { @extend %linked_vertical; }
409
}
410
%image_button {
412
padding: 10px;
413
outline-radius: 100px;
414
border-radius: 100px;
415
background-size: 36px * 1 / 0.8 36px * 1 / 0.8, auto;
416
}
417
%needs_attention {
419
transition: none;
420
animation: needs_attention 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
421
background-repeat: no-repeat;
422
background-position: right 3px;
423
background-size: 6px 6px;
424
&:dir(rtl) { background-position: left 3px; }
425
}
426
// all the following is for the +|- buttons on inline toolbars, that way
429
// should really be deprecated...
430
.inline-toolbar GtkToolButton > .button { // redefining the button look is
431
// needed since those are flat...
432
}
433
// More inline toolbar buttons
435
.inline-toolbar.toolbar GtkToolButton {
436
// & > .button.flat { @extend %linked_middle; }
437
// &:first-child > .button.flat { @extend %linked:first-child; }
438
// &:last-child > .button.flat { @extend %linked:last-child; }
439
// &:only-child > .button.flat { @extend %linked:only-child; }
440
}
441
%linked_middle {
443
border-radius: 0;
444
}
445
%linked {
447
outline-radius: 2px;
448
@extend %linked_middle;
449
&:first-child {
450
border-top-left-radius: 2px;
451
border-bottom-left-radius: 2px;
452
}
453
&:last-child {
454
border-top-right-radius: 2px;
455
border-bottom-right-radius: 2px;
456
}
457
&:only-child {
458
border-radius: 2px;
459
}
460
}
461
%linked_vertical_middle {
463
border-radius: 0;
464
}
465
%linked_vertical{
467
outline-radius: 2px;
468
@extend %linked_vertical_middle;
469
&:first-child {
470
border-top-left-radius: 2px;
471
border-top-right-radius: 2px;
472
}
473
&:last-child {
474
border-bottom-left-radius: 2px;
475
border-bottom-right-radius: 2px;
476
}
477
&:only-child {
478
border-radius: 2px;
479
}
480
}
481
/* menu buttons */
483
.menuitem.button.flat {
484
&:selected { @extend %selected_items; }
485
}
486
GtkColorButton.button {
489
padding: 7px 8px 8px; // Uniform padding on the GtkColorButton
490
GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the
492
// colorpicker style, otherwise
493
border-radius: 2px;
494
box-shadow: $z-depth-1;
495
}
496
}
497
/*********
499
* Links *
500
*********/
501
*:link {
503
color: $link_color;
504
&:hover, &:active { color: $link_color; }
505
&:visited {
506
color: $link_visited_color;
507
&:hover, &:active { color: $link_visited_color; }
508
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
509
}
510
&:selected, *:selected & {
511
color: mix($selected_fg_color, $selected_bg_color, 80%);
512
}
513
}
514
.button:link, .button:visited {
516
@extend *:link;
517
}
518
/*****************
520
* GtkSpinButton *
521
*****************/
522
.spinbutton {
524
.button {
525
padding: 4px;
526
border: solid 6px transparent;
527
@extend %image_button;
528
// @extend .button.flat;
529
@include button(flat);
530
&:hover { @include button(flat-hover); }
531
&:active { @include button(flat-active); }
532
&:insensitive { @include button(flat-insensitive); }
533
}
534
.osd & {
535
.button {
536
}
537
}
538
&.vertical { //FIXME: try using linking templates for vertically linked stuff
539
.button {
540
padding-top: 10px; // Same vertical padding as image-buttons
541
padding-bottom: 10px; //
542
border: none;
543
&:first-child {
544
border-radius: 2px 2px 0 0;
545
}
546
&:last-child {
547
border-radius: 0 0 2px 2px;
548
}
549
}
550
&.entry {
551
}
552
}
553
GtkTreeView & {
554
&.entry, &.entry:focus {
555
// padding: 1px;
556
// border-width: 1px 0;
557
// border-color: $selected_bg_color;
558
// border-radius: 0;
559
// box-shadow: none;
560
}
561
}
562
}
563
/**************
565
* ComboBoxes *
566
**************/
567
GtkComboBox {
568
> .button { padding: 5px 6px 6px; } // Otherwise combos
569
// are bigger then
570
// buttons
571
-GtkComboBox-arrow-scaling: 0.5;
572
-GtkComboBox-shadow-type: none;
573
color: $secondary_fg_color;
575
font-weight: 500;
576
& *:hover { color: $fg_color; }
577
& *:active { color: $fg_color; }
578
&:checked { color: $selected_fg_color; }
579
&:insensitive { color: $insensitive_secondary_fg_color; }
580
.menu .menuitem { padding: 5px 6px 6px; }
581
.separator.vertical {
582
// always disable separators
583
-GtkWidget-wide-separators: true;
584
}
585
&.combobox-entry .entry {
586
&:dir(ltr) {
587
border-top-right-radius: 0;
588
border-bottom-right-radius: 0;
589
}
590
&:dir(rtl) {
591
border-top-left-radius: 0;
592
border-bottom-left-radius: 0;
593
}
594
}
595
&.combobox-entry .button {
596
padding: 10px;
597
&:dir(ltr) {
598
border-top-left-radius: 0;
599
border-bottom-left-radius: 0;
600
}
601
&:dir(rtl) {
602
border-top-right-radius: 0;
603
border-bottom-right-radius: 0;
604
}
605
}
606
}
607
.linked > GtkComboBox > .button {
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 > .button {
616
@extend %linked:first-child;
617
}
618
.linked > GtkComboBox:last-child > .button {
619
@extend %linked:last-child;
620
}
621
.linked > GtkComboBox:only-child > .button {
622
@extend %linked:only-child;
623
}
624
.linked.vertical > GtkComboBoxText > .button,
626
.linked.vertical > GtkComboBox > .button { @extend %linked_vertical_middle; }
627
.linked.vertical > GtkComboBoxText:first-child > .button,
628
.linked.vertical > GtkComboBox:first-child > .button { @extend %linked_vertical:first-child; }
629
.linked.vertical > GtkComboBoxText:last-child > .button,
630
.linked.vertical > GtkComboBox:last-child > .button { @extend %linked_vertical:last-child; }
631
.linked.vertical > GtkComboBoxText:only-child > .button,
632
.linked.vertical > GtkComboBox:only-child > .button { @extend %linked_vertical:only-child; }
633
/************
635
* Toolbars *
636
************/
637
.toolbar {
638
-GtkWidget-window-dragging: true;
639
padding: 4px;
640
background-color: $bg_color;
641
.osd &, &.osd {
642
padding: 6px;
643
border-style: solid;
644
border-width: 8px;
645
border-image: -gtk-scaled(url("assets/osd-shadow#{$asset_suffix}.png"),
646
url("assets/osd-shadow#{$asset_suffix}@2.png"))
647
10 / 10px stretch;
648
border-radius: 2px;
649
// box-shadow: $z-depth-2;
650
background-color: $base_color;
651
&:backdrop {
652
border-image: -gtk-scaled(url("assets/osd-shadow-backdrop#{$asset_suffix}.png"),
653
url("assets/osd-shadow-backdrop#{$asset_suffix}@2.png"))
654
10 / 10px stretch;
655
// box-shadow: $z-depth-1;
656
}
657
& .button {
658
@extend .button.flat;
659
}
660
}
661
}
662
//searchbar, location-bar & inline-toolbar
664
.inline-toolbar {
665
padding: 6px;
666
border-style: solid;
667
border-width: 0 1px 1px;
668
border-color: $borders_color;
669
background-color: $insensitive_base_color;
670
}
671
.search-bar, .location-bar {
673
padding: 6px;
674
border-style: solid;
675
border-width: 0 0 1px;
676
border-color: $borders_color;
677
background-color: $dark_color;
678
}
679
/***************
681
* Header bars *
682
***************/
683
.titlebar,
685
.header-bar {
686
padding: 6px;
687
border-width: 0 0 1px;
688
border-style: solid;
689
border-color: $borders_color;
690
border-radius: 2px 2px 0 0;
691
box-shadow: inset 0 1px $highlight_color;
692
background-color: $dark_color;
693
background-clip: border-box;
694
&:backdrop {
696
// background-color: $dark_color;
697
}
698
.title {
700
padding-left: 12px;
701
padding-right: 12px;
702
font-weight: bold;
703
}
704
.subtitle {
706
@extend .dim-label;
707
padding-left: 12px;
708
padding-right: 12px;
709
font-size: smaller;
710
}
711
.header-bar-separator,
713
& > GtkBox > .separator.vertical {
714
-GtkWidget-wide-separators: true;
715
-GtkWidget-separator-width: 1px;
716
border-style: solid;
717
border-width: 0 1px;
718
border-color: $borders_color;
719
}
720
& .button:not(.suggested-action):not(.destructive-action) {
722
@extend .button.flat;
723
border-image: -gtk-gradient(radial,
724
center bottom, 0,
725
center bottom, 0.001,
726
to($selected_bg_color),
727
to(transparent))
728
0 0 0 / 0 0 0px;
729
&:checked {
730
border-image: -gtk-gradient(radial,
731
center bottom, 0,
732
center bottom, 0.5,
733
to($selected_bg_color),
734
to(transparent))
735
0 0 2 / 0 0 2px;
736
// box-shadow: inset 0 -2px $selected_bg_color;
737
background-color: transparent;
738
color: $fg_color;
739
// transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0 cubic-bezier(0.4, 0, 0.2, 1) 0.2s, color 0;
740
// &:active { transition: none; }
741
&:insensitive {
742
background-color: transparent;
743
color: $insensitive_fg_color;
744
> .label { color: inherit; }
745
}
746
}
747
}
748
&.selection-mode {
750
box-shadow: inset 0 1px transparentize(white, 0.8);
751
background-color: $selected_bg_color;
752
color: $selected_fg_color;
753
&:backdrop {
754
}
755
.subtitle:link { @extend *:link:selected; }
757
.button {
759
border-image: -gtk-gradient(radial,
760
center bottom, 0,
761
center bottom, 0.001,
762
to($selected_fg_color),
763
to(transparent))
764
0 0 0 / 0 0 0px;
765
color: $secondary_selected_fg_color;
766
&:hover, &:active, &:checked {
767
color: $selected_fg_color;
768
}
769
&:insensitive {
771
}
772
&:checked {
774
border-image: -gtk-gradient(radial,
775
center bottom, 0,
776
center bottom, 0.5,
777
to($selected_fg_color),
778
to(transparent))
779
0 0 2 / 0 0 2px;
780
// box-shadow: inset 0 -2px $selected_fg_color;
781
color: $selected_fg_color;
782
&:insensitive {
783
color: $insensitive_selected_fg_color;
784
> .label { color: inherit; }
785
}
786
}
787
&.suggested-action {
788
// NOTE: do not use @extend .button;
789
@include button(normal);
790
&:hover { @include button(hover); }
791
&:active { @include button(active); }
792
&:insensitive { @include button(insensitive); }
793
}
794
}
795
.selection-menu {
797
padding-left: 16px;
798
padding-right: 16px;
799
GtkArrow { -GtkArrow-arrow-scaling: 1; }
801
.arrow {
803
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
804
}
805
}
806
}
807
.tiled &, .maximized & {
809
border-radius: 0; // squared corners when the window is max'd or tiled
810
box-shadow: none;
811
}
812
&.default-decoration {
814
padding: 4px;
815
border-width: 0;
816
.button { padding: 6px; }
817
}
818
}
819
/************
821
* Pathbars *
822
************/
823
.path-bar .button {
825
padding: 7px 6px 8px;
826
&.image-button { padding: 10px; }
827
&:only-child {
828
padding-left: 16px;
829
padding-right: 16px;
830
}
831
// the following is for spacing the icon and the label inside the home button
833
.label:last-child { padding-left: 2px; }
834
.label:first-child { padding-right: 2px; }
835
.label:only-child { padding-right: 0; padding-left: 0; }
836
GtkImage { padding-top: 1px; }
837
}
838
/**************
840
* Tree Views *
841
**************/
842
GtkTreeView.view {
843
-GtkTreeView-grid-line-width: 1;
844
-GtkTreeView-grid-line-pattern: '';
845
-GtkTreeView-tree-line-width: 1;
846
-GtkTreeView-tree-line-pattern: '';
847
-GtkTreeView-expander-size: 16;
848
border-left-color: $fill_color; // this is actually the tree lines color,
850
border-top-color: $borders_color; // while this is the grid lines color, better then nothing
851
&.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props
853
border-radius: 0; // rest border radius in lists
855
&:hover, &:active, &:selected { border-radius: 0; }
857
&.dnd {
859
border-style: solid none;
860
border-width: 1px;
861
border-color: mix($fg_color, $selected_bg_color, 50%);
862
}
863
&.expander {
865
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
866
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
867
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
868
&:selected {
869
color: transparentize($selected_fg_color, 0.4);
870
&:hover, &:active { color: $selected_fg_color; }
871
}
872
}
873
&.progressbar { // progress bar in treeviews
875
@extend .entry.progressbar;
876
border-width: 4px;
877
&:selected {
878
border-color: currentColor;
879
}
880
}
881
&.trough { // progress bar trough in treeviews
883
@extend .entry.progressbar;
884
border-width: 4px;
885
border-color: transparentize($selected_bg_color, 0.8);
886
&:selected {
887
border-color: $fill_color;
888
}
889
}
890
}
891
column-header {
893
.button {
894
@extend .list-row.activatable;
895
padding: 3px 6px 4px;
896
border-style: none solid solid none;
897
border-width: 1px;
898
border-color: $borders_color;
899
border-radius: 0;
900
box-shadow: none;
901
background-color: $base_color;
902
// font-weight: bold;
903
&:hover, &:active {
904
box-shadow: none;
905
}
906
&:insensitive {
907
background-color: $base_color;
908
}
909
&.dnd {
910
@extend column-header.button.dnd;
911
}
912
}
913
&:last-child .button,
914
&:last-child.button { //treeview-like derived widgets in Banshee and Evolution
915
border-right-style: none;
916
}
917
}
918
column-header.button.dnd { // for treeview-like derive widgets
920
// transition: none;
921
border-left-style: solid;
922
color: $selected_bg_color;
923
}
924
/*********
927
* Menus *
928
*********/
929
.menubar {
930
-GtkWidget-window-dragging: true;
931
padding: 0px;
932
box-shadow: inset 0 -1px $borders_color;
933
background-color: $dark_color;
934
& > .menuitem {
935
padding: 4px 8px;
936
color: $secondary_fg_color;
937
&:hover { //Seems like it :hover even with keyboard focus
938
box-shadow: inset 0 -2px $selected_bg_color;
939
color: $fg_color;
940
}
941
&:insensitive {
942
color: $insensitive_fg_color;
943
box-shadow: none;
944
}
945
}
946
}
947
.menu {
949
margin: 4px;
950
padding: 0px;
951
background-color: $base_color;
952
border: 1px solid $borders_color; // adds borders in a non composited env
953
.csd & { border: none; } // axes borders in a composited env
954
.menuitem {
955
transition-duration: 0.1s;
956
padding: 3px 4px 4px;
957
font: initial;
958
text-shadow: none;
959
&:hover {
960
transition-duration: 0;
961
color: $selected_fg_color;
962
background-color: $selected_bg_color;
963
}
964
&:insensitive {
965
color: $insensitive_fg_color;
966
}
967
//submenu indicators
968
&.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
969
&.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); }
970
}
971
&.button { // overlow buttons
972
border-style: none;
973
border-radius: 0;
974
&.top { border-bottom: 1px solid $borders_color; }
975
&.bottom { border-top: 1px solid $borders_color; }
976
&:hover { background-color: $fill_color; }
977
&:insensitive {
978
color: transparent;
979
background-color: transparent;
980
border-color: transparent ;
981
}
982
}
983
}
984
.menuitem .accelerator { color: gtkalpha(currentColor, 0.4); }
986
/***************
989
* Popovers *
990
***************/
991
.popover {
993
padding: 2px;
994
border: 1px solid;
995
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
996
border-radius: 2px + 1px;
997
background-color: $insensitive_base_color;
998
box-shadow: $z-depth-2;
999
&:backdrop { box-shadow: $z-depth-1; }
1000
> .list,
1002
> .view,
1003
> .toolbar,
1004
&.osd > .toolbar {
1005
border-style: none;
1006
border-image: none;
1007
background-color: transparent;
1008
}
1009
.button.flat {
1011
padding: 5px 8px 6px;
1012
background-color: transparent;
1013
background-size: 128px * 1 / 0.8 128px * 1 / 0.8, auto;
1014
color: $text_color;
1015
font: initial;
1016
}
1017
.linked > .button {
1019
border-radius: 2px;
1020
// @extend .button.flat;
1021
@include button(flat);
1022
&:hover { @include button(flat-hover); }
1023
&:active { @include button(flat-active); }
1024
&:insensitive { @include button(flat-insensitive); }
1025
&:checked { @include button(checked); }
1026
&:checked:insensitive { @include button(checked-insensitive); }
1027
}
1028
&.osd { @extend %osd; }
1030
}
1031
//touch selection handlebars for the Popover.osd above
1033
.entry.cursor-handle,
1034
.cursor-handle {
1035
background-color: transparent;
1036
background-image: none;
1037
box-shadow: none;
1038
border-style: none;
1039
&.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); }
1040
&.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); }
1041
}
1042
/*****************
1044
* Notebooks and *
1045
* Tabs *
1046
*****************/
1047
.notebook {
1049
// Through me you go to the grief wracked city;
1050
// Through me you go to everlasting pain;
1051
// Through me you go a pass among lost souls.
1052
// ...
1053
// Abandon all hope — Ye Who Enter Here
1054
padding: 0;
1055
background-color: $base_color;
1056
-GtkNotebook-initial-gap: 6;
1057
-GtkNotebook-arrow-spacing: 5;
1058
-GtkNotebook-tab-curvature: 0;
1059
-GtkNotebook-tab-overlap: 1;
1060
-GtkNotebook-has-tab-gap: false;
1061
-GtkWidget-focus-padding: 0;
1062
-GtkWidget-focus-line-width: 0;
1063
&.frame {
1064
border: 1px solid $borders_color;
1065
// FIXME doesn't work
1066
&.top { border-top-width: 0; }
1067
&.bottom { border-bottom-width: 0; }
1068
&.right { border-right-width: 0; }
1069
&.left { border-left-width: 0; }
1070
}
1071
&.header {
1072
// FIXME: double borders in some case, can't fix it w/o a class tho
1073
// FIXME: doesn't work on dark var
1074
background-color: $dark_color;
1075
// this is the shading of the header behind the tabs
1077
&.frame {
1078
border: 1px solid $borders_color;
1079
&.top { border-bottom-width: 0; }
1080
&.bottom { border-top-width: 0; }
1081
&.right { border-left-width: 0; }
1082
&.left { border-right-width: 0; }
1083
}
1084
&.top {
1086
box-shadow: inset 0 -1px $borders_color; // border
1087
}
1088
&.bottom {
1089
box-shadow: inset 0 1px $borders_color;
1090
}
1091
&.right {
1092
box-shadow: inset 1px 0 $borders_color;
1093
}
1094
&.left {
1095
box-shadow: inset -1px 0 $borders_color;
1096
}
1097
}
1098
tab {
1099
border-width: 0;
1100
border-style: solid;
1101
border-color: transparent;
1102
background-color: transparent;
1103
outline-offset: 0;
1105
$tab_indicator_size: 2px;
1107
//vertical tab sizing
1108
$vt_vpadding: 8px;
1109
$vt_hpadding: 20px;
1110
// horizontal tab sizing
1111
$ht_vpadding: 5px;
1112
$ht_hpadding: 20px;
1113
//FIXME: we get double border in some cases, not considering the broken
1115
//notebook content frame...
1116
&.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
1117
&.left, &.right { padding: $ht_vpadding $ht_hpadding; }
1118
/* works for testnotebookdnd, but there's a superfluous border
1121
in gedit or web, commented out for now, needs gtk fixes
1122
&.reorderable-page {
1123
&.top {
1124
padding-top: ($vt_vpadding - 1px);
1125
border-top-width: 1px;
1126
border-left-width: 1px;
1127
border-right-width: 1px;
1128
}
1129
&.bottom {
1130
padding-bottom: ($vt_vpadding - 1px);
1131
border-bottom-width: 1px;
1132
border-left-width: 1px;
1133
border-right-width: 1px;
1134
}
1135
&.left {
1136
padding-left: ($ht_hpadding - 1px);
1137
border-left-width: 1px;
1138
border-top-width: 1px;
1139
border-bottom-width: 1px;
1140
}
1141
&.right {
1142
padding-right: ($ht_hpadding - 1px);
1143
border-right-width: 1px;
1144
border-top-width: 1px;
1145
border-bottom-width: 1px;
1146
}
1147
}
1148
*/
1149
&.reorderable-page {
1150
-GtkNotebook-tab-overlap: 1;
1151
&.top, &.bottom {
1152
padding-left: 12px; // for a nicer close button
1153
padding-right: 12px; // placement
1154
border-left-width: 1px;
1155
border-right-width: 1px;
1156
}
1157
&.left, &.right {
1158
border-bottom-width: 1px;
1159
border-top-width: 1px;
1160
}
1161
}
1162
&.top {
1163
//padding-bottom: ($vt_vpadding -$tab_indicator_size);
1164
border-bottom-width: $tab_indicator_size;
1165
}
1166
&.bottom {
1167
//padding-top: ($vt_vpadding -$tab_indicator_size);
1168
border-top-width: $tab_indicator_size;
1169
}
1170
&.left {
1171
//padding-right: ($ht_hpadding -$tab_indicator_size);
1172
border-right-width: $tab_indicator_size;
1173
}
1174
&.right {
1175
//padding-left: ($ht_hpadding -$tab_indicator_size);
1176
border-left-width: $tab_indicator_size;
1177
}
1178
//here's the interesting stuff
1180
&:hover, &.prelight-page {
1181
border-color: $fill_color;
1182
}
1183
&:active, &.active-page {
1184
border-color: $selected_bg_color;
1185
}
1186
@each $_tab, $_border in (top, bottom),
1187
(bottom, top),
1188
(left, right),
1189
(right, left) {
1190
&.reorderable-page.#{$_tab} {
1191
border-color: transparent;
1192
&:hover, &.prelight-page {
1193
border-color: $borders_color;
1194
border-#{$_border}-width: 1px;
1195
border-#{$_border}-color: transparent;
1196
background-color: $bg_color;
1197
}
1198
&:active, &.active-page {
1199
border-color: $borders_color;
1200
border-#{$_border}-width: 1px;
1201
border-#{$_border}-color: transparent;
1202
background-color: $light_color;
1203
}
1204
}
1205
}
1206
.label { //tab text
1207
padding: 0 2px; // needed for a nicer focus ring
1208
font-weight: bold;
1209
color: $secondary_fg_color;
1210
}
1211
.prelight-page .label, .label.prelight-page {
1212
// prelight tab text
1213
color: $fg_color;
1214
}
1215
.active-page .label, .label.active-page {
1216
// active tab text
1217
color: $fg_color;
1218
}
1219
.button { //tab close button
1220
// &:not(:hover):not(:active) > GtkImage { opacity: 0.6; }
1221
padding: 0;
1222
@extend %image_button;
1223
background-size: 24px * 1 / 0.8 24px * 1 / 0.8, auto;
1224
// @extend .button.flat;
1225
@include button(flat);
1226
&:hover { @include button(flat-hover); }
1227
&:active { @include button(flat-active); }
1228
&:insensitive { @include button(flat-insensitive); }
1229
& > GtkImage { // this is a hack which makes tabs grow
1230
padding: 4px;
1231
}
1232
}
1233
}
1234
&.arrow {
1235
&:not(:hover):not(:active) { color: gtkalpha(currentColor, 0.8); }
1236
&:insensitive {
1237
color: $insensitive_fg_color;
1238
}
1239
}
1240
&:not(.reorderable-page) > .entry {
1241
@extend .entry.flat;
1242
}
1243
}
1244
/**************
1246
* Scrollbars *
1247
**************/
1248
.scrollbar {
1250
-GtkRange-slider-width: 17;
1251
-GtkRange-trough-border: 0;
1252
-GtkScrollbar-has-backward-stepper: false;
1253
-GtkScrollbar-has-forward-stepper: false;
1254
-GtkScrollbar-min-slider-length: 32; // minimum size for the slider.
1255
// sadly can't be in '.slider'
1256
// where it belongs
1257
-GtkRange-stepper-spacing: 0;
1258
-GtkRange-trough-under-steppers: 1;
1259
$_slider_margin: 4px;
1261
$_slider_fine_tune_margin: 6px;
1262
.button {
1264
border: none;
1265
}
1266
&.overlay-indicator {
1268
&:not(.dragging):not(.hovering) { // Overlay scrolling indicator
1269
-GtkRange-slider-width: 12px;
1270
.slider {
1272
margin: 2px;
1273
border: 2px solid if($variant==light, transparentize(white, 0.8), transparentize(black, 0.8));
1274
// background-clip: padding-box;
1275
}
1276
.trough {
1278
border-style: none;
1279
background-color: transparent;
1280
}
1281
// w/o the following margin tweaks the slider shrinks when hovering/dragging
1283
&.vertical .slider {
1284
// margin-top: $_slider_margin - 1px;
1285
// margin-bottom: $_slider_margin - 1px;
1286
}
1287
&.horizontal .slider {
1289
// margin-left: $_slider_margin - 1px;
1290
// margin-right: $_slider_margin - 1px;
1291
}
1292
}
1294
&.dragging,
1296
&.hovering { opacity: 0.8; }
1297
}
1298
// trough coloring
1300
.trough {
1301
background-color: $base_color;
1302
border: 1px none $borders_color;
1303
}
1304
// slider coloring
1306
.slider {
1307
background-color: scale-color($fg_color, $alpha: -40%);
1308
&:hover { background-color: $secondary_fg_color; }
1309
&:active { background-color: $fg_color; }
1310
&:insensitive {
1311
background-color: transparent;
1312
}
1313
}
1314
// sizing
1317
.slider {
1318
border-radius: 100px;
1319
margin: $_slider_margin;
1320
}
1321
&.fine-tune .slider { margin: $_slider_fine_tune_margin; }
1323
&.vertical {
1325
.slider {
1327
margin-left: 1px + $_slider_margin;
1328
&:dir(rtl) {
1330
margin-left: $_slider_margin;
1331
margin-right: 1px + $_slider_margin;
1332
}
1333
}
1334
&.fine-tune .slider {
1336
margin-left: 1px + $_slider_fine_tune_margin;
1337
&:dir(rtl) {
1339
margin-left: $_slider_fine_tune_margin;
1340
margin-right: 1px + $_slider_fine_tune_margin;
1341
}
1342
}
1343
.trough {
1345
border-left-style: solid;
1346
&:dir(rtl) {
1348
border-left-style: none;
1349
border-right-style: solid;
1350
}
1351
}
1352
}
1353
&.horizontal {
1355
.slider { margin-top: 1px + $_slider_margin; }
1357
&.fine-tune .slider { margin-top: 1px + $_slider_fine_tune_margin; }
1359
.trough { border-top-style: solid; }
1361
}
1362
}
1363
.scrollbars-junction,
1365
.scrollbars-junction.frame { // the small square between two scrollbars
1366
border-style: solid none none solid;
1367
background-color: $base_color;
1368
&:dir(rtl) { border-style: solid solid none none; }
1370
}
1371
/**********
1374
* Switch *
1375
**********/
1376
GtkSwitch {
1378
-GtkSwitch-slider-width: 48px; // 55px is the right value to make it as tall
1379
// as buttons, not doing that for now
1380
outline-offset: -4px;
1381
outline-radius: 100px;
1382
font-size: 0;
1383
&.trough {
1384
// similar to the .scale
1385
border: 10px solid transparent;
1386
border-radius: 100px;
1387
background-color: $fill_color;
1388
&:insensitive {
1389
color: $insensitive_fg_color;
1390
}
1391
&:active {
1392
background-color: $success_color;
1393
&:insensitive {
1394
background-color: $fill_color;
1395
color: $success_color;
1396
}
1397
}
1398
}
1399
&.slider {
1400
padding: 4px;
1401
border-radius: 100px;
1402
@include entry(normal);
1403
&:hover { @include entry(focus); }
1404
&:insensitive { @include entry(insensitive); }
1405
}
1406
.list-row:selected & {
1407
}
1408
}
1410
/*************************
1412
* Check and Radio items *
1413
*************************/
1414
// draw regular check and radio items using our PNG assets
1416
// all assets are rendered from assets.svg. never add pngs directly
1417
@each $w,$a in ('check', 'checkbox'),
1419
('radio','radio') {
1420
//standard checks and radios
1422
@each $s,$as in ('','-unchecked'),
1423
(':active', '-unchecked-active'),
1424
(':insensitive','-unchecked-insensitive'),
1425
(':inconsistent', '-mixed'),
1426
(':inconsistent:active', '-mixed-active'),
1427
(':inconsistent:insensitive', '-mixed-insensitive'),
1428
(':checked', '-checked'),
1429
(':checked:active', '-checked-active'),
1430
(':checked:insensitive','-checked-insensitive') {
1431
.#{$w}#{$s} {
1432
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
1433
url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
1434
icon-shadow: $z-depth-1;
1435
&:hover, &:active { icon-shadow: $z-depth-2; }
1436
&:insensitive { icon-shadow: none; }
1437
&.button.flat { }
1438
}
1439
}
1440
//menu
1442
@each $s,$as in ('',''),
1443
// (':active', '-checked'),
1444
(':insensitive','-insensitive'),
1445
(':inconsistent', '-mixed'),
1446
// (':inconsistent:active', '-mixed'),
1447
(':inconsistent:insensitive', '-mixed-insensitive'),
1448
(':checked', '-checked'),
1449
// (':checked:active', '-checked'),
1450
(':checked:insensitive','-checked-insensitive') {
1451
.menu .menuitem.#{$w}#{$s} {
1452
// color: gtkalpha(currentColor, 0.8);
1453
// -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic');
1454
// &:active, &:checked { -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic'); }
1455
// &:inconsistent { -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic'); }
1456
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}.png"),
1457
url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}@2.png"));
1458
icon-shadow: none;
1459
&:hover {
1460
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-symbolic-dark.png"),
1461
url("assets/#{$a}#{$as}-symbolic-dark@2.png"));
1462
}
1463
}
1464
}
1465
}
1466
//treeview and list-rows
1468
.view.check, .view.radio,
1469
.list-row .check, list-row .radio {
1470
}
1471
//selection-mode
1473
@each $s,$as in ('','-selectionmode'),
1474
(':active', '-active-selectionmode'),
1475
(':insensitive', '-insensitive-selectionmode'),
1476
(':checked', '-checked-selectionmode'),
1477
(':checked:active', '-checked-active-selectionmode'),
1478
(':insensitive:checked', '-checked-insensitive-selectionmode') {
1479
.view.content-view.check#{$s}:not(.list) {
1480
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
1481
url("assets/checkbox#{$as}@2.png"));
1482
background-color: transparent;
1483
}
1484
}
1485
GtkCheckButton.text-button, GtkRadioButton.text-button {
1487
// this is for a nice focus on check and radios text
1488
padding: 2px 4px;
1489
outline-offset: 0;
1490
&:insensitive,
1491
&:insensitive:active,
1492
&:insensitive:inconsistent {
1493
// set insensitive color, which is overriden otherwise
1494
// color: $insensitive_fg_color;
1495
}
1496
}
1497
/************
1499
* GtkScale *
1500
************/
1501
.scale,
1502
.scale.scale-has-marks-above.scale-has-marks-below,
1503
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
1504
// FIXME: rationalize
1505
-GtkScale-slider-length: 20;
1506
-GtkRange-slider-width: 20;
1507
-GtkRange-trough-border: 2;
1508
outline-offset: -8px;
1509
outline-radius: 100px;
1510
&.fine-tune {
1512
// outline-offset: -6px;
1513
&.slider { background-size: 80%; }
1514
&.trough {
1515
// margin: 8px;
1516
// border-radius: 100px;
1517
}
1518
}
1519
&.slider {
1521
&:not(:hover):not(:active) { background-size: 80%; }
1522
// @include entry(normal);
1523
// border-radius: 50%;
1524
// background-color: $success_color;
1525
@each $s,$as in ('',''),
1526
// (':hover','-hover'),
1527
(':active','-active'),
1528
(':insensitive','-insensitive') {
1529
&.slider#{$s} {
1530
$_url: 'assets/slider#{$as}#{$asset_suffix}';
1531
border-style: none;
1532
border-radius: 0;
1533
background-color: transparent;
1534
background-image: -gtk-scaled(url('#{$_url}.png'),
1535
url('#{$_url}@2.png'));
1536
background-repeat: no-repeat;
1537
background-position: center;
1538
box-shadow: none;
1539
}
1540
}
1541
&:hover {
1542
// @include entry(focus);
1543
// border-radius: 50%; // needed for double marks scales
1544
}
1545
&:insensitive {
1546
// @include entry(insensitive);
1547
// border-radius: 50%; // overridden
1548
}
1549
//OSD sliders
1550
.osd & {
1551
}
1552
}
1553
&.trough {
1554
margin: 10px;
1555
border-radius: 100px;
1556
background-color: $fill_color;
1557
&.highlight {
1558
background-color: $success_color;
1559
&:insensitive { background-color: $fill_color; }
1560
}
1561
&:insensitive { color: $insensitive_fg_color; }
1562
//OSD troughs
1563
.osd & {
1564
}
1565
}
1566
&.separator {
1567
// color: gtkalpha(currentColor, 0.5);
1568
}
1569
// scales on selected list rows
1570
.list-row:selected & {
1571
}
1572
}
1573
@each $d,$dn in ('', 'horz'),
1575
('.vertical', 'vert') {
1576
@each $w,$we in ('scale-has-marks-below','scale_marks_below'),
1577
('scale-has-marks-above','scale_marks_above') {
1578
.scale#{$d}.#{$w} {
1579
-GtkScale-slider-length: 20;
1580
-GtkRange-slider-width: 25;
1581
-GtkRange-trough-border: 2;
1582
// color: gtkalpha(currentColor, 0.5); // marks color
1584
@extend %#{$we}_#{$dn};
1586
@each $s,$as in ('',''),
1588
// (':hover','-hover'),
1589
(':active','-active'),
1590
(':insensitive','-insensitive') {
1591
&.slider#{$s} {
1592
$_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}';
1593
border-style: none;
1594
border-radius: 0;
1595
background-color: transparent;
1596
background-image: -gtk-scaled(url('#{$_url}.png'),
1597
url('#{$_url}@2.png'));
1598
background-repeat: no-repeat;
1599
background-position: center;
1600
box-shadow: none;
1601
}
1602
}
1603
}
1604
}
1605
}
1606
%scale_marks_above_horz {
1608
.trough { margin: 15px 10px 10px; }
1609
// &.fine-tune .trough { margin: 13px 8px 8px; }
1610
}
1611
%scale_marks_below_horz {
1612
.trough { margin: 10px 10px 15px; }
1613
// &.fine-tune .trough { margin: 8px 8px 13px; }
1614
}
1615
%scale_marks_above_vert {
1616
.trough { margin: 10px 10px 10px 15px; }
1617
// &.fine-tune .trough { margin: 8px 8px 8px 13px; }
1618
}
1619
%scale_marks_below_vert {
1620
.trough { margin: 10px 15px 10px 10px; }
1621
// &.fine-tune .trough { margin: 8px 13px 8px 8px; }
1622
}
1623
/*****************
1625
* Progress bars *
1626
*****************/
1627
GtkProgressBar {
1629
-GtkProgressBar-min-horizontal-bar-height: 4;
1630
-GtkProgressBar-min-vertical-bar-width: 4;
1631
padding: 0;
1632
font-size: smaller;
1633
color: $secondary_fg_color;
1634
&.osd {
1635
-GtkProgressBar-xspacing: 0;
1636
-GtkProgressBar-yspacing: 0;
1637
-GtkProgressBar-min-horizontal-bar-height: 4;
1638
}
1639
&.trough { // background
1640
border-radius: 0;
1641
background-color: transparentize($selected_bg_color, 0.8);
1642
&.osd {
1643
border-style: none;
1644
box-shadow: none;
1645
// background-color: transparent;
1646
}
1647
}
1648
}
1649
// moving bit
1651
.progressbar {
1652
border-radius: 0;
1653
background-color: $selected_bg_color;
1654
&.left {
1655
border-top-left-radius: 0;
1656
border-bottom-left-radius: 0;
1657
}
1658
&.right {
1659
border-top-right-radius: 0;
1660
border-bottom-right-radius: 0;
1661
}
1662
&.left.right {
1663
box-shadow: none;
1664
}
1665
&.vertical {
1666
&.bottom {
1667
border-bottom-left-radius: 0;
1668
border-bottom-right-radius: 0;
1669
box-shadow: none;
1670
}
1671
&.top {
1672
border-top-left-radius: 0;
1673
border-top-right-radius: 0;
1674
}
1675
}
1676
&.osd {
1677
background-image: none;
1678
background-color: $selected_bg_color;
1679
border-style: none;
1680
border-radius: 0;
1681
}
1682
}
1683
/*************
1686
* Level Bar *
1687
*************/
1688
.level-bar {
1690
box-shadow: $z-depth-1; // needs to be set here to avoid clipping
1691
-GtkLevelBar-min-block-width: 36;
1692
-GtkLevelBar-min-block-height: 4;
1693
&.vertical {
1694
-GtkLevelBar-min-block-width: 4;
1695
-GtkLevelBar-min-block-height: 36;
1696
}
1697
&.trough {
1698
padding: 2px;
1699
border-radius: 2px;
1700
@include entry(normal);
1701
&:insensitive { @include entry(insensitive); }
1702
&.indicator-discrete {
1703
&.horizontal { padding: 2px 1px; }
1704
&.vertical { padding: 1px 2px; }
1705
}
1706
}
1707
&.fill-block {
1708
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
1709
// :nth-child working on discrete indicators
1710
background-color: $selected_bg_color;
1711
border-radius: 0;
1712
box-shadow: none;
1713
&.indicator-discrete {
1714
&.horizontal { margin: 0 1px; }
1715
&.vertical { margin: 1px 0; }
1716
}
1717
&.level-high {
1718
background-color: $success_color;
1719
}
1720
&.level-low {
1721
background-color: $warning_color;
1722
}
1723
&.empty-fill-block {
1724
background-color: $fill_color;
1725
}
1726
}
1727
}
1728
/**********
1731
* Frames *
1732
**********/
1733
.frame {
1734
border: 1px solid $borders_color;
1735
&.flat { border-style: none; }
1736
padding: 0;
1737
&.action-bar {
1738
padding: 6px;
1739
border-width: 1px 0 0;
1740
}
1741
}
1742
GtkScrolledWindow {
1744
GtkViewport.frame { // avoid double borders when viewport inside
1745
// scrolled window
1746
border-style: none;
1747
}
1748
}
1749
//vbox and hbox separators
1751
.separator {
1752
// always disable separators
1753
// -GtkWidget-wide-separators: true;
1754
color: $borders_color;
1755
// Font and File button separators
1757
GtkFileChooserButton &.vertical,
1758
GtkFontButton &.vertical {
1759
// always disable separators
1760
-GtkWidget-wide-separators: true;
1761
}
1762
}
1763
/*********
1765
* Lists *
1766
*********/
1767
.list, .list-row {
1769
border-color: $borders_color;
1770
background-color: $base_color;
1771
}
1772
.list-row,
1774
.grid-child {
1775
padding: 2px;
1776
}
1777
.list-row.activatable {
1779
// let's take care of background colors
1780
background-image: -gtk-gradient(radial,
1781
center center, 0,
1782
center center, 0.5,
1783
to(gtkalpha(currentColor, 0)),
1784
to(transparent)),
1785
linear-gradient(to bottom, gtkalpha(currentColor, 0));
1786
background-repeat: no-repeat;
1787
background-position: center, center;
1788
background-size: 192px * 1 / 0.8 192px * 1 / 0.8, auto;
1789
&:hover {
1790
background-image: -gtk-gradient(radial,
1791
center center, 0,
1792
center center, 0.5,
1793
to(gtkalpha(currentColor, 0)),
1794
to(transparent)),
1795
linear-gradient(to bottom, gtkalpha(currentColor, 0.05));
1796
}
1797
&:active {
1798
animation: list_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1799
}
1800
}
1801
.list-row.button {
1803
@extend .list-row.activatable;
1804
background-color: transparentize($base_color,1); // for the transition
1805
border-style: none; // I need no borders here
1806
border-radius: 0; // and no rounded corners
1807
box-shadow: none; // and no box-shadow
1808
color: $text_color;
1809
font: initial;
1810
&:insensitive { color: $insensitive_fg_color; }
1811
}
1812
.list-row:selected {
1814
@extend %selected_items;
1815
.button {
1816
&:insensitive { color: $insensitive_secondary_selected_fg_color; }
1817
&.flat {
1818
color: $secondary_selected_fg_color;
1819
&:hover, &:active { color: $selected_fg_color; }
1820
&:insensitive { color: $insensitive_secondary_selected_fg_color; }
1821
}
1822
}
1823
}
1824
// transition
1826
.list-row, list-row.button {
1827
&:hover { transition: none; }
1828
}
1829
/*********************
1832
* App Notifications *
1833
*********************/
1834
.app-notification,
1836
.app-notification.frame {
1837
@extend %osd;
1838
@extend .toolbar.osd;
1839
.button {
1840
}
1841
}
1842
/*************
1844
* Expanders *
1845
*************/
1846
.expander {
1848
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1849
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
1850
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1851
&:not(:hover):not(:active) { color: gtkalpha(currentColor, 0.6); }
1852
&:selected { color: $selected_fg_color; }
1853
}
1854
/************
1856
* Calendar *
1857
***********/
1858
GtkCalendar {
1859
border: 1px solid $borders_color;
1860
color: $text_color;
1861
&:selected {
1863
@extend .view:selected;
1864
}
1865
&.header {
1867
border: 1px solid transparent;
1868
border-bottom-color: $borders_color;
1869
border-radius: 0;
1870
}
1871
&.button {
1873
// @extend .button.flat;
1874
@include button(flat);
1875
&:hover { @include button(flat-hover); }
1876
&:active { @include button(flat-active); }
1877
&:insensitive { @include button(flat-insensitive); }
1878
}
1879
&:inconsistent { color: gtkalpha(currentColor, 0.5); }
1881
&.highlight {
1882
font-size: smaller;
1883
color: gtkalpha(currentColor, 0.5);
1884
}
1885
}
1886
/***********
1888
* Dialogs *
1889
***********/
1890
.message-dialog .dialog-action-area .button {
1892
padding: 8px;
1893
}
1894
.message-dialog { // Message Dialog styling
1896
-GtkDialog-button-spacing: 0;
1897
&.background { background-color: $light_color; }
1898
.titlebar {
1899
border-style: none;
1900
// box-shadow: inset 0 1px $highlight_color;
1901
background-color: $light_color;
1902
}
1903
&.csd { // rounded bottom border styling for csd version
1904
&.background {
1905
// bigger radius for better antialiasing
1906
border-bottom-left-radius: 2px;
1907
border-bottom-right-radius: 2px;
1908
}
1909
.dialog-action-area .button {
1910
@extend .button.flat;
1911
padding: 9px 16px 10px;
1912
border-top: 1px solid $borders_color;
1913
border-radius: 0;
1914
background-size: 192px * 1 / 0.8 192px * 1 / 0.8, auto;
1915
// &:first-child{ border-bottom-left-radius: 2px; }
1916
// &:last-child { border-bottom-right-radius: 2px; }
1917
&:first-child{ border-radius: 0 0 0 2px; }
1918
&:last-child { border-radius: 0 0 2px 0; }
1919
}
1920
}
1921
}
1922
GtkFileChooserDialog {
1924
.search-bar {
1925
// background-color: $base_color;
1926
// border-color: $bg_color;
1927
}
1928
.dialog-action-box {
1929
border-top: 1px solid $borders_color;
1930
}
1931
}
1932
/***********
1934
* Sidebar *
1935
***********/
1936
.sidebar {
1938
border: none;
1939
background-color: $insensitive_base_color;
1940
&:selected {
1942
@extend %selected_items;
1943
}
1944
}
1945
// Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color
1947
GtkPlacesSidebar.sidebar .view {
1948
// color: $fg_color;
1950
background-color: transparent;
1951
// .separator { @extend .separator; }
1953
.image { // icons color
1955
color: gtkalpha(currentColor, 0.8);
1956
&:selected {
1957
color: gtkalpha($selected_fg_color, 0.8);
1958
}
1959
}
1960
// &:insensitive { color: $insensitive_fg_color; }
1962
&:selected {
1964
@extend %selected_items;
1965
}
1966
}
1967
.sidebar-item {
1969
padding: 10px 4px;
1970
> .label {
1971
padding-left: 6px;
1972
padding-right: 6px;
1973
}
1974
&.needs-attention > .label {
1975
@extend %needs_attention;
1976
}
1977
}
1978
/*********
1980
* Paned *
1981
*********/
1982
GtkPaned { // this is for the standard paned separator
1984
-GtkPaned-handle-size: 1; // sets separator width
1986
-gtk-icon-source: none; // removes handle decoration
1988
margin: 0 8px 8px 0; // drag area of the separator, not a real margin
1989
&:dir(rtl) {
1990
margin-right: 0;
1991
margin-left: 8px;
1992
}
1993
.pane-separator {
1994
background-color: $borders_color;
1995
}
1996
}
1997
GtkPaned.wide { // this is for the paned with wide separator
1999
-GtkPaned-handle-size: 6; // wider separator here
2000
margin: 0; // no need of the invisible drag area so, reset margin
2001
.pane-separator {
2002
background-color: transparent;
2003
border-style: none solid;
2004
border-color: $borders_color;
2005
border-width: 1px;
2006
}
2007
&.vertical .pane-separator { border-style: solid none;}
2008
}
2009
/**************
2012
* GtkInfoBar *
2013
**************/
2014
GtkInfoBar {
2015
border-style: none;
2016
}
2017
.info,
2019
.question,
2020
.warning,
2021
.error {
2022
background-color: $selected_bg_color;
2023
color: $selected_fg_color;
2024
.button {
2025
// @extend .list-row:selected.button;
2026
&:insensitive { color: $insensitive_secondary_selected_fg_color; }
2027
&.flat {
2028
color: $secondary_selected_fg_color;
2029
&:hover, &:active { color: $selected_fg_color; }
2030
&:insensitive { color: $insensitive_secondary_selected_fg_color; }
2031
}
2032
}
2033
.label:selected,
2034
.label:selected:focus,
2035
.label:selected:hover {
2036
background-color: darken($selected_bg_color, 10%);
2037
}
2038
}
2039
/************
2041
* Tooltips *
2042
************/
2043
.tooltip {
2045
&.background {
2046
// background-color needs to be set this way otherwise it gets drawn twice
2047
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2048
background-color: transparentize($base_color, 0.1);
2049
}
2050
// @extend %osd;
2052
color: $fg_color;
2053
padding: 4px; /* not working */
2054
border-radius: 2px;
2055
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2056
// FIXME: we need a border or tooltips vanish on black background.
2057
&.window-frame.csd {
2058
background-color: transparent;
2059
}
2060
}
2061
.tooltip * { //Yeah this is ugly
2063
padding: 4px;
2064
background-color: transparent;
2065
color: inherit; // just to be sure
2066
}
2067
/*****************
2069
* Color Chooser *
2070
*****************/
2071
GtkColorSwatch {
2073
// This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one
2074
// is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
2075
// is applied to the overlay box.
2076
box-shadow: $z-depth-1;
2078
// we need to re-set the shadow here since it get axed by the previous bit
2080
&:selected { }
2081
// base color corners rounding
2083
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2084
// sports a bigger radius.
2085
// nth-child is needed by the custom color strip.
2086
// The :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
2087
// and GtkColorSwatch.overlay, I know it's weird, but this is gtk+, not a browser.
2088
&.top {
2089
border-top-left-radius: 2px;
2090
border-top-right-radius: 2px;
2091
}
2092
&.bottom {
2093
border-bottom-left-radius: 2px;
2094
border-bottom-right-radius: 2px;
2095
}
2096
&.left, &:first-child:not(.overlay):not(.top) {
2097
border-top-left-radius: 2px;
2098
border-bottom-left-radius: 2px;
2099
}
2100
&.right, &:last-child:not(.overlay):not(.bottom) {
2101
border-top-right-radius: 2px;
2102
border-bottom-right-radius: 2px;
2103
}
2104
&:only-child:not(.overlay) { border-radius: 2px; }
2105
// overlay corner rounding
2107
&.top > .overlay {
2108
border-top-left-radius: 2px;
2109
border-top-right-radius: 2px;
2110
}
2111
&.bottom > .overlay {
2112
border-bottom-left-radius: 2px;
2113
border-bottom-right-radius: 2px;
2114
}
2115
&:first-child:not(.top) > .overlay {
2116
border-top-left-radius: 2px;
2117
border-bottom-left-radius: 2px;
2118
}
2119
&:last-child:not(.bottom) > .overlay {
2120
border-top-right-radius: 2px;
2121
border-bottom-right-radius: 2px;
2122
}
2123
&:only-child > .overlay { border-radius: 2px; }
2124
// hover effect
2126
&:hover { box-shadow: $z-depth-2; }
2127
// no hover effect for the colorswatch in the color editor
2129
GtkColorEditor & {
2130
border-radius: 2px; // same radius as the entry
2131
&:hover { box-shadow: $z-depth-1; }
2132
}
2133
// indicator and keynav outline colors
2135
&.color-dark {
2136
color: white;
2137
}
2138
&.color-light {
2139
color: transparentize(black, 0.2);
2140
}
2141
// border color
2143
&.overlay,
2144
&.overlay:selected {
2145
}
2146
// make the add color button looks like, well, a button
2148
&#add-color-button {
2149
background-image: if($variant =='light',
2150
linear-gradient(to right,
2151
#e74c3c 25%,
2152
#f1c40f 25%, #f1c40f 50%,
2153
#2ecc71 50%, #2ecc71 75%,
2154
#3498db 75%),
2155
linear-gradient(to right,
2156
#c0392b 25%,
2157
#f39c12 25%, #f39c12 50%,
2158
#27ae60 50%, #27ae60 75%,
2159
#2980b9 75%)
2160
);
2161
color: white;
2162
}
2163
}
2164
/********
2167
* Misc *
2168
********/
2169
//content view (grid/list)
2171
.content-view {
2172
background-color: $bg_color;
2173
// &:hover { -gtk-image-effect: highlight; }
2174
&.rubberband { @extend .rubberband; }
2175
}
2176
.scale-popup {
2178
.osd & { @extend %osd; }
2180
.osd & .button.flat { //FIXME: quick hack, redo properly
2182
}
2183
.button { // +/- buttons on GtkVolumeButton popup
2185
padding: 10px;
2186
}
2187
}
2188
GtkScaleButton.button,
2190
GtkVolumeButton.button {
2191
// I assume both are image-button *by default*
2192
// with the image-button/text-button classes automagically applied depending on the button child these selectors can be deleted.
2193
@extend %image_button;
2194
&.text-button { @extend .text-button }
2196
}
2197
.floating-bar {
2199
@extend %osd;
2200
// @extend .toolbar.osd;
2201
padding: 3px 0 4px;
2202
border: 1px solid $borders_color;
2203
background-color: $base_color;
2204
transition: none;
2205
}
2206
.floating-bar.bottom.left { /* axes left border and border radius */
2208
border-width: 1px 1px 0 0;
2209
border-radius: 0 2px + 1px 0 0;
2210
// border-width: 8px 8px 0 0;
2211
// border-image-width: 10px 10px 0 0;
2212
}
2213
.floating-bar.bottom.right { /* axes right border and border radius */
2215
border-width: 1px 0 0 1px;
2216
border-radius: 2px + 1px 0 0 0;
2217
// border-width: 8px 0 0 8px;
2218
// border-image-width: 10px 0 0 10px;
2219
}
2220
NautilusListView .view {
2222
-GtkTreeView-grid-line-width: 0;
2223
-GtkTreeView-grid-line-pattern: '';
2224
-GtkTreeView-tree-line-width: 0;
2225
-GtkTreeView-tree-line-pattern: '';
2226
}
2227
/**********************
2229
* Window Decorations *
2230
*********************/
2231
.window-frame {
2233
transition: none;
2234
border-radius: 2px 2px 0 0;
2235
box-shadow: $z-depth-4;
2236
// FIXME rationalize window-frame shadows
2238
/* this is used for the resize cursor area */
2240
margin: 8px;
2241
&:backdrop {
2243
box-shadow: $z-depth-2;
2244
}
2245
&.tiled {
2246
border-radius: 0;
2247
}
2248
&.popup {
2249
box-shadow: none;
2250
}
2251
// server-side decorations as used by mutter
2252
&.ssd {
2253
box-shadow: 0 0 0 1px $borders_color; //just doing borders, wm draws actual shadows
2254
}
2255
&.csd {
2256
&.popup {
2257
border-radius: 0;
2258
box-shadow: $z-depth-2;
2259
}
2260
&.tooltip {
2261
border-radius: 2px;
2262
box-shadow: $z-depth-2;
2263
}
2264
&.message-dialog {
2265
border-radius: 2px;
2266
box-shadow: $z-depth-4;
2267
&:backdrop { box-shadow: $z-depth-2; }
2268
}
2269
}
2270
&.solid-csd {
2271
border-radius: 0;
2272
margin: 4px;
2273
background-color: $warning_color;
2274
border: solid 1px $borders_color;
2275
box-shadow: none;
2276
}
2277
}
2278
// Window Close button
2280
.header-bar .button.titlebutton,
2281
.titlebar .button.titlebutton {
2282
// @extend .button.flat;
2283
@extend %image_button;
2284
// &:not(:hover):not(:active) > GtkImage { opacity: 0.6; }
2285
}
2286
.header-bar.selection-mode .button.titlebutton,
2288
.titlebar.selection-mode .button.titlebutton {
2289
// &:backdrop { icon-shadow: none; }
2290
}
2291
// catch all extend :)
2294
%selected_items {
2296
background-color: $selected_bg_color;
2297
color: $selected_fg_color;
2298
&:insensitive { color: $insensitive_selected_fg_color; }
2299
&:backdrop {
2300
// color: $backdrop_selected_fg_color;
2301
&:insensitive {
2302
color: $insensitive_selected_fg_color;
2303
}
2304
}
2305
}
2306
.monospace {
2308
font: Monospace;
2309
}
2310
/**********************
2312
* Touch Copy & Paste *
2313
*********************/
2314
//touch selection handlebars for the Popover.osd above
2316
.entry.cursor-handle,
2317
.cursor-handle {
2318
background-color: $success_color;
2319
background-image: none;
2320
box-shadow: none;
2321
border-style: none;
2322
@each $s,$as in ('',''),
2323
(':hover','-hover'),
2324
(':active','-active') { //no need for insensitive and backdrop
2325
&.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
2326
$_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
2327
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2328
url('#{$_url}@2.png'));
2329
padding-left: 10px;
2330
}
2331
&.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
2332
$_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
2333
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2334
url('#{$_url}@2.png'));
2335
padding-right: 10px;
2336
}
2337
&.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
2338
$_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
2339
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2340
url('#{$_url}@2.png'));
2341
}
2342
}
2343
}
2344
/* Decouple the font of context menus from their entry/textview */
2346
.context-menu {
2347
font: initial;
2348
}
2349
.touch-selection {
2351
font: initial;
2352
color: $fg_color;
2353
background-color: $base_color;
2354
box-shadow: $z-depth-2;
2355
&:backdrop { box-shadow: $z-depth-1; }
2356
.button {
2357
}
2358
}
2359
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
2361
// This draws a box on top of the content, the size changes programmatically.
2362
.overshoot {
2363
&.top {
2364
@include overshoot(top);
2365
}
2366
&.bottom {
2367
@include overshoot(bottom);
2368
}
2369
&.left {
2370
@include overshoot(left);
2371
}
2372
&.right {
2373
@include overshoot(right);
2374
}
2375
}
2376
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2378
.undershoot {
2379
&.top {
2380
@include undershoot(top);
2381
}
2382
&.bottom {
2384
@include undershoot(bottom);
2385
}
2386
&.left {
2388
@include undershoot(left);
2389
}
2390
&.right {
2392
@include undershoot(right);
2393
}
2394
}
2395