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