Unicode text, UTF-8 text
1
* {
2
padding: 0;
3
background-clip: padding-box;
4
-GtkToolButton-icon-spacing: 4;
6
-GtkTextView-error-underline-color: $error_color;
7
-GtkCheckButton-indicator-size: 24;
9
-GtkCheckMenuItem-indicator-size: 16;
10
// The size for scrollbars. The slider is 2px smaller, but we keep it
12
// up so that the whole area is sensitive to button presses for the
13
// slider. The stepper button is larger in both directions, the slider
14
// only in the width
15
-GtkScrolledWindow-scrollbar-spacing: 0;
17
-GtkScrolledWindow-scrollbars-within-bevel: 1;
18
-GtkToolItemGroup-expander-size: 11;
20
-GtkExpander-expander-size: 16;
21
-GtkTreeView-expander-size: 11;
22
-GtkTreeView-horizontal-separator: 4;
24
-GtkMenu-horizontal-padding: 0;
26
-GtkMenu-vertical-padding: 0;
27
-GtkWidget-link-color: $link_color;
29
-GtkWidget-visited-link-color: $visited_link_color;
30
-GtkWidget-focus-padding: 2; // FIXME: do we still need these?
32
-GtkWidget-focus-line-width: 1; //
33
-GtkWidget-text-handle-width: 20;
35
-GtkWidget-text-handle-height: 20;
36
-GtkDialog-button-spacing: 4;
38
-GtkDialog-action-area-border: 0;
39
-GtkStatusbar-shadow-type: none;
41
// We use the outline properties to signal the focus properties
43
// to the adwaita engine: using real CSS properties is faster,
44
// and we don't use any outlines for now.
45
outline-style: solid;
47
outline-width: 2px;
48
outline-color: $fill_color;
49
outline-offset: -4px;
50
outline-radius: 2px;
51
}
52
/***************
55
* Base States *
56
***************/
57
.background {
59
background-color: $bg_color;
60
color: $fg_color;
61
}
62
/*
64
These wildcard seems unavoidable, need to investigate.
65
Wildcards are bad and troublesome, use them with care,
66
or better, just don't.
67
Everytime a wildcard is used a kitten dies, painfully.
68
*/
69
*:insensitive {
71
-gtk-image-effect: dim;
72
}
73
.gtkstyle-fallback {
75
background-color: $bg_color;
76
color: $fg_color;
77
&:prelight {
78
background-color: darken($bg_color, 5%);
79
color: $fg_color;
80
}
81
&:active {
82
background-color: darken($bg_color, 10%);
83
color: $fg_color;
84
}
85
&:insensitive {
86
background-color: $bg_color;
87
color: $disabled_fg_color;
88
}
89
&:selected {
90
background-color: $primary_color;
91
color: $inverse_fg_color;
92
}
93
}
94
.view {
96
@extend .list-row.activatable;
97
background-color: $base_color;
98
color: $fg_color;
99
&:hover, &:active, &:selected { border-radius: 2px; }
101
&:insensitive {
103
// background-color: $alt_base_color;
104
color: $disabled_fg_color;
105
}
106
&:selected { @extend %selected_items; }
108
}
109
.rubberband {
111
border: 1px solid $alt_primary_color;
112
background-color: rgba($alt_primary_color, $lower_opacity);
113
}
114
.label {
116
&.separator {
117
color: $fg_color;
118
@extend .dim-label;
119
}
120
&:selected {
121
@extend %selected_items;
122
}
123
&:insensitive {
124
color: $disabled_fg_color;
125
}
126
}
127
.dim-label {
129
opacity: $tertiary_opacity;
130
}
131
GtkAssistant {
133
.sidebar {
134
padding: 6px 0;
135
// border-top: 1px solid $border_color;
136
&:dir(ltr) { border-right: 1px solid $border_color; }
137
&:dir(rtl) { border-left: 1px solid $border_color; }
138
}
139
// &.csd .sidebar { border-top-style: none; }
140
.sidebar .label {
141
opacity: $tertiary_opacity;
142
padding: 5px 12px 6px;
143
font-weight: 500;
144
}
145
.sidebar .label.highlight {
146
opacity: 1;
147
}
148
}
149
GtkTextView { // This will get overridden by .view, needed by gedit line numbers
151
background-color: $alt_base_color;
152
}
153
.grid-child {
155
// outline-offset: -2px;
156
padding: 4px;
157
border-radius: 2px;
158
&:selected { @extend %selected_items; }
159
}
160
%osd, .osd { opacity: $higher_opacity; }
162
/*********************
164
* Spinner Animation *
165
*********************/
166
@keyframes spin {
168
to { -gtk-icon-transform: rotate(1turn); }
169
}
170
.spinner {
172
background-color: blue;
173
background-image: none;
174
opacity: 0; // non spinning spinner makes no sense
175
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
176
&:active {
177
opacity: 1;
178
animation: spin 1s linear infinite;
179
&:insensitive {
180
opacity: $disabled_opacity;
181
}
182
}
183
}
184
/****************
186
* Text Entries *
187
****************/
188
.entry {
190
padding: 7px 8px 8px;
191
border-radius: 2px;
192
@include entry(normal);
193
&:focus { @include entry(focus); }
194
&:insensitive { @include entry(insensitive); }
195
&.flat {
196
border-radius: 0;
197
@include entry(flat-normal);
198
&:focus { @include entry(flat-focus); }
199
&:insensitive { @include entry(flat-insensitive); }
200
}
201
&:selected { @extend %selected_items; }
203
&.image { // icons inside the entry
205
&.left { padding-left: 2px; }
206
&.right { padding-right: 2px; }
207
}
208
&.progressbar {
210
margin: 2px;
211
border-style: none none solid;
212
border-width: 2px;
213
border-color: $primary_color;
214
border-radius: 0;
215
box-shadow: none;
216
background-color: transparent;
217
background-image: none;
218
}
219
.linked > & { @extend %linked; }
221
.linked.vertical > & { @extend %linked_vertical; }
223
.linked > &.flat,
225
.linked.vertical > &.flat { border-radius: 0; }
226
// entry error and warning style
228
@each $e_type, $e_color in (error, $error_color),
229
(warning, $warning_color) {
230
&.#{$e_type} {
231
@include entry(normal, $e_color);
232
&:focus { @include entry(focus, $e_color); }
233
&:insensitive { @include entry(insensitive, $e_color); }
234
&.flat {
235
@include entry(flat-normal, $e_color);
236
&:focus { @include entry(flat-focus, $e_color); }
237
&:insensitive { @include entry(flat-insensitive, $e_color); }
238
}
239
}
240
}
241
&.image { // entry icons colors
243
&:not(:hover):not(:active) { color: gtkalpha(currentColor, $secondary_opacity); }
244
&:insensitive { color: gtkalpha(currentColor, $tertiary_opacity); }
245
}
246
.osd & {
248
}
249
GtkTreeView &:not(:selected) {
251
&, &:focus {
252
padding: 2px;
253
border-image: none;
254
border-radius: 0;
255
box-shadow: none;
256
background-color: $base_color;
257
}
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($accent_color),
273
to(transparent));
274
}
275
to {
276
background-image: -gtk-gradient(radial,
277
center center, 0,
278
center center, 0.5,
279
to($accent_color),
280
to(transparent));
281
}
282
}
283
%button,
286
.button {
287
padding: 7px 10px 8px;
288
border-radius: 2px;
289
background-repeat: no-repeat;
290
background-position: center, center;
291
background-size: ($medium_size * 2 / 0.8) ($medium_size * 2 / 0.8), auto;
292
font-weight: 500;
293
@include button(normal);
294
&:hover { @include button(hover); }
295
&:active { @include button(active); }
296
&:insensitive { @include button(insensitive); }
297
&:checked { @include button(checked); }
298
&:checked:insensitive { @include button(checked-insensitive); }
299
@at-root %flat_button, &.flat {
300
@at-root %simple_flat_button, & {
301
@include button(flat-normal);
302
&:hover { @include button(flat-hover); }
303
&:active { @include button(flat-active); }
304
&:insensitive { @include button(flat-insensitive); }
305
}
306
&:checked { @include button(flat-checked); }
307
&:checked:insensitive { @include button(flat-checked-insensitive); }
308
}
309
// big standalone buttons like in Documents pager
310
&.osd {
311
&.image-button {
312
padding: 16px;
313
background-size: ($large_size / 0.8) ($large_size / 0.8), auto;
314
}
315
&:insensitive { opacity: 0; }
316
}
317
//overlay / OSD style
318
.osd & {
319
}
320
// Suggested and Destructive Action buttons
322
@each $b_type, $b_color in (suggested-action, $suggested_color),
323
(destructive-action, $destructive_color) {
324
&.#{$b_type} {
325
background-color: $b_color;
326
color: $inverse_fg_color;
327
&:insensitive { @include button(insensitive, $b_color); }
328
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
329
&.flat {
330
background-color: transparent;
331
color: $b_color;
332
&:insensitive { @include button(flat-insensitive, $b_color); }
333
&:checked { background-color: $fill_color; }
334
}
335
}
336
}
337
&.image-button { @extend %image_button; }
339
&.text-button {
341
padding-left: 16px;
342
padding-right: 16px;
343
}
344
&.text-button.image-button {
346
// those buttons needs uneven horizontal padding, we want the icon side
347
// to have the image-button padding, while the text side the text-button
348
// one, so we're adding the missing padding to the label depending on
349
// its position inside the button
350
padding: 7px 10px 8px; // same as .button
351
outline-radius: 2px;
352
border-radius: 2px;
353
background-size: ($medium_size * 2 / 0.8) ($medium_size * 2 / 0.8), auto;
354
.label:first-child { padding-left: 6px; }
355
.label:last-child { padding-right: 6px; }
356
}
357
.stack-switcher > & {
359
// to position the needs attention dot, padding is added to the button
360
// child, a label needs just lateral padding while an icon needs vertical
361
// padding added too.
362
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
364
> .label {
366
padding-left: 6px; // label padding
367
padding-right: 6px; //
368
}
369
> GtkImage {
370
padding-left: 6px; // image padding
371
padding-right: 6px; //
372
padding-top: 3px; //
373
padding-bottom: 3px; //
374
}
375
&.text-button {
376
padding: 7px 10px 8px; // needed or it will get overridden
377
}
378
&.image-button {
379
// we want image buttons to have a 1:1 aspect ratio, so compensation
380
// of the padding added to the GtkImage is needed
381
padding: 7px 4px;
382
}
383
&.needs-attention > .label,
384
&.needs-attention > GtkImage { @extend %needs_attention; }
385
&.needs-attention:checked > .label,
386
&.needs-attention:checked > GtkImage {
387
animation: none;
388
background-image: none;
389
}
390
}
391
//inline-toolbar buttons
393
.inline-toolbar & {
394
// @extend %button.flat;
395
@extend %image_button;
396
}
397
.primary-toolbar & { icon-shadow: none; } // tango icons don't need shadows
399
.linked > & { @extend %linked; }
401
.linked.vertical > & { @extend %linked_vertical; }
403
.linked > &.flat,
405
.linked.vertical > &.flat {
406
border-radius: 2px;
407
&.image-button {
409
outline-radius: $circular_radius;
410
border-radius: $circular_radius;
411
}
412
&.text-button.image-button {
414
outline-radius: 2px;
415
border-radius: 2px;
416
}
417
}
418
}
419
%image_button {
421
padding: 10px;
422
outline-radius: 100px;
423
border-radius: 100px;
424
background-size: ($medium_size / 0.8) ($medium_size / 0.8), auto;
425
}
426
%needs_attention {
428
animation: needs_attention $longer_duration $deceleration_curve forwards;
429
background-repeat: no-repeat;
430
background-position: right 3px;
431
background-size: 6px 6px;
432
&:dir(rtl) { background-position: left 3px; }
433
}
434
// all the following is for the +|- buttons on inline toolbars, that way
437
// should really be deprecated...
438
.inline-toolbar GtkToolButton > .button { // redefining the button look is
439
// needed since those are flat...
440
}
441
// More inline toolbar buttons
443
.inline-toolbar.toolbar GtkToolButton {
444
// & > .button.flat { @extend %linked_middle; }
445
// &:first-child > .button.flat { @extend %linked:first-child; }
446
// &:last-child > .button.flat { @extend %linked:last-child; }
447
// &:only-child > .button.flat { @extend %linked:only-child; }
448
}
449
%linked_middle {
451
outline-radius: 2px;
452
border-radius: 0;
453
}
454
%linked {
456
@extend %linked_middle;
457
&:first-child {
458
border-top-left-radius: 2px;
459
border-bottom-left-radius: 2px;
460
}
461
&:last-child {
462
border-top-right-radius: 2px;
463
border-bottom-right-radius: 2px;
464
}
465
&:only-child {
466
border-radius: 2px;
467
}
468
}
469
%linked_vertical_middle {
471
outline-radius: 2px;
472
border-radius: 0;
473
}
474
%linked_vertical{
476
@extend %linked_vertical_middle;
477
&:first-child {
478
border-top-left-radius: 2px;
479
border-top-right-radius: 2px;
480
}
481
&:last-child {
482
border-bottom-left-radius: 2px;
483
border-bottom-right-radius: 2px;
484
}
485
&:only-child {
486
border-radius: 2px;
487
}
488
}
489
/* menu buttons */
491
.menuitem.button.flat {
492
&:selected { @extend %selected_items; }
493
}
494
GtkColorButton.button {
497
padding: 7px 8px 8px; // Uniform padding on the GtkColorButton
498
GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the
500
// colorpicker style, otherwise
501
border-radius: 2px;
502
box-shadow: $shadow_1;
503
}
504
}
505
/*********
507
* Links *
508
*********/
509
*:link {
511
color: $link_color;
512
&:hover, &:active { color: $link_color; }
513
&:visited {
514
color: $visited_link_color;
515
&:hover, &:active { color: $visited_link_color; }
516
*:selected & { color: mix($inverse_fg_color, $primary_color, 60%); }
517
}
518
&:selected, *:selected & {
519
color: mix($inverse_fg_color, $primary_color, 80%);
520
}
521
}
522
.button:link, .button:visited {
524
@extend *:link;
525
& > .label {
526
text-decoration-line: underline;
527
}
528
}
529
/*****************
531
* GtkSpinButton *
532
*****************/
533
.spinbutton {
535
.button {
536
padding: 4px;
537
border: solid $container_padding transparent;
538
color: $secondary_fg_color;
539
&:hover, &:active { color: $fg_color; }
540
&:insensitive { color: $disabled_secondary_fg_color; }
541
&:active { // add fallback
542
background-color: gtkalpha(currentColor, $lower_opacity);
543
}
544
@extend %image_button;
545
@extend %simple_flat_button;
546
}
547
.osd & {
548
.button {
549
}
550
}
551
&.vertical { //FIXME: try using linking templates for vertically linked stuff
552
.button {
553
padding-top: 10px; // Same vertical padding as image-buttons
554
padding-bottom: 10px; //
555
border: none;
556
&:first-child {
557
border-radius: 2px 2px 0 0;
558
}
559
&:last-child {
560
border-radius: 0 0 2px 2px;
561
}
562
}
563
&.entry {
564
}
565
}
566
GtkTreeView & {
567
&.entry, &.entry:focus {
568
// padding: 1px;
569
// border-width: 1px 0;
570
// border-color: $primary_color;
571
// border-radius: 0;
572
// box-shadow: none;
573
}
574
}
575
}
576
/**************
578
* ComboBoxes *
579
**************/
580
GtkComboBox {
581
> .the-button-in-the-combobox { padding: 5px 6px 6px; } // Otherwise combos
582
// are bigger then
583
// buttons
584
-GtkComboBox-arrow-scaling: 0.5;
585
-GtkComboBox-shadow-type: none;
586
.menu { padding: 2px 0; }
588
.menu .menuitem { padding: 5px 6px 6px; }
589
.separator.vertical {
590
// always disable separators
591
-GtkWidget-wide-separators: true;
592
}
593
&.combobox-entry .entry {
594
&:dir(ltr) {
595
border-top-right-radius: 0;
596
border-bottom-right-radius: 0;
597
}
598
&:dir(rtl) {
599
border-top-left-radius: 0;
600
border-bottom-left-radius: 0;
601
}
602
}
603
&.combobox-entry .button {
604
padding: 10px;
605
&:dir(ltr) {
606
border-top-left-radius: 0;
607
border-bottom-left-radius: 0;
608
}
609
&:dir(rtl) {
610
border-top-right-radius: 0;
611
border-bottom-right-radius: 0;
612
}
613
}
614
}
615
.linked > GtkComboBox > .the-button-in-the-combobox,
617
.linked > GtkComboBoxText > .the-button-in-the-combobox {
618
// the combo is a composite widget so the way we do button linkind doesn't
619
// work, special case needed. See
620
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
621
&:dir(ltr),
622
&:dir(rtl) { @extend %linked_middle; } // specificity bump
623
}
624
.linked > GtkComboBox:first-child > .the-button-in-the-combobox,
625
.linked > GtkComboBoxText:first-child > .the-button-in-the-combobox {
626
@extend %linked:first-child;
627
}
628
.linked > GtkComboBox:last-child > .the-button-in-the-combobox,
629
.linked > GtkComboBoxText:last-child > .the-button-in-the-combobox {
630
@extend %linked:last-child;
631
}
632
.linked > GtkComboBox:only-child > .the-button-in-the-combobox,
633
.linked > GtkComboBoxText:only-child > .the-button-in-the-combobox {
634
@extend %linked:only-child;
635
}
636
.linked.vertical > GtkComboBoxText > .the-button-in-the-combobox,
638
.linked.vertical > GtkComboBox > .the-button-in-the-combobox { @extend %linked_vertical_middle; }
639
.linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox,
640
.linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox { @extend %linked_vertical:first-child; }
641
.linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox,
642
.linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox { @extend %linked_vertical:last-child; }
643
.linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox,
644
.linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox { @extend %linked_vertical:only-child; }
645
/************
647
* Toolbars *
648
************/
649
.toolbar {
650
-GtkWidget-window-dragging: true;
651
padding: 4px;
652
background-color: $bg_color;
653
&:not(.search-bar) .button { @extend %button.flat; }
654
.osd &, &.osd {
655
transition: border-image $shorter_duration $deceleration_curve;
656
padding: $container_padding;
657
border-style: solid;
658
border-width: 8px;
659
border-image: -gtk-scaled(url("assets/box-shadow#{$asset_suffix}.png"),
660
url("assets/box-shadow#{$asset_suffix}@2.png"))
661
10 / 10px stretch;
662
border-radius: 2px;
663
// box-shadow: $shadow_2, inset 0 1px $highlight_color;
664
background-color: $base_color;
665
&:backdrop {
666
border-image: -gtk-scaled(url("assets/box-shadow-backdrop#{$asset_suffix}.png"),
667
url("assets/box-shadow-backdrop#{$asset_suffix}@2.png"))
668
10 / 10px stretch;
669
// box-shadow: $shadow_1, inset 0 1px $highlight_color;
670
}
671
}
672
}
673
//searchbar, location-bar & inline-toolbar
675
.inline-toolbar {
676
padding: $container_padding;
677
border-style: solid;
678
border-width: 0 1px 1px;
679
border-color: $border_color;
680
background-color: $alt_base_color;
681
}
682
.search-bar, .location-bar {
684
padding: $container_padding;
685
border-style: solid;
686
border-width: 0 0 1px;
687
border-color: $border_color;
688
background-color: $bg_color;
689
background-clip: border-box;
690
}
691
/***************
693
* Header bars *
694
***************/
695
.titlebar,
697
.header-bar {
698
transition: background-color $shorter_duration $deceleration_curve;
699
padding: $container_padding;
700
border-radius: 2px 2px 0 0;
701
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
702
background-color: $titlebar_bg_color;
703
color: $titlebar_fg_color;
704
&:backdrop {
706
color: $secondary_titlebar_fg_color;
707
}
708
.title {
710
transition: $longer_transition;
711
padding-left: 12px;
712
padding-right: 12px;
713
font-weight: bold;
714
}
715
.subtitle {
717
transition: $longer_transition;
718
@extend .dim-label;
719
padding-left: 12px;
720
padding-right: 12px;
721
font-size: smaller;
722
}
723
.header-bar-separator,
725
& > GtkBox > .separator.vertical {
726
-GtkWidget-wide-separators: true;
727
-GtkWidget-separator-width: 1px;
728
border-style: solid;
729
border-width: 0 1px;
730
border-color: $border_color;
731
}
732
& .button:not(.suggested-action):not(.destructive-action) {
734
@extend %button.flat;
735
border-image: -gtk-gradient(radial,
736
center bottom, 0,
737
center bottom, 0.001,
738
to($titlebar_indicator_color),
739
to(transparent))
740
0 0 0 / 0 0 0px;
741
&:checked {
742
border-image: -gtk-gradient(radial,
743
center bottom, 0,
744
center bottom, 0.5,
745
to($titlebar_indicator_color),
746
to(transparent))
747
0 0 2 / 0 0 2px;
748
&, &:insensitive {
749
background-color: transparent;
750
}
751
}
752
}
753
.button.suggested-action, .button.destructive-action {
755
&:insensitive {
756
color: gtkalpha(currentColor, $disabled_opacity);
757
> .label { color: inherit; }
759
}
760
}
761
&.selection-mode {
763
// transition: background-color $shorter_duration $deceleration_curve;
764
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
765
background-color: $primary_color;
766
color: $inverse_fg_color;
767
&:backdrop {
768
color: $secondary_inverse_fg_color;
769
}
770
.subtitle:link { @extend *:link:selected; }
772
.button {
774
border-image: -gtk-gradient(radial,
775
center bottom, 0,
776
center bottom, 0.001,
777
to($inverse_fg_color),
778
to(transparent))
779
0 0 0 / 0 0 0px;
780
color: $secondary_inverse_fg_color;
781
&:hover, &:active, &:checked {
782
color: $inverse_fg_color;
783
}
784
&:insensitive {
786
}
787
&:checked {
789
border-image: -gtk-gradient(radial,
790
center bottom, 0,
791
center bottom, 0.5,
792
to($inverse_fg_color),
793
to(transparent))
794
0 0 2 / 0 0 2px;
795
color: $inverse_fg_color;
796
&:insensitive {
797
color: $disabled_inverse_fg_color;
798
> .label { color: inherit; }
799
}
800
}
801
&.suggested-action {
802
// NOTE: do not use @extend .button;
803
@include button(normal);
804
&:hover { @include button(hover); }
805
&:active { @include button(active); }
806
&:insensitive { @include button(insensitive); }
807
}
808
}
809
.selection-menu {
811
padding-left: 16px;
812
padding-right: 16px;
813
GtkArrow { -GtkArrow-arrow-scaling: 1; }
815
.arrow {
817
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
818
}
819
}
820
}
821
.tiled &, .maximized & {
823
border-radius: 0; // squared corners when the window is max'd or tiled
824
box-shadow: none;
825
}
826
&.default-decoration {
828
padding: $container_padding;
829
border-width: 0;
830
.button { padding: 4px; }
831
}
832
}
833
/************
835
* Pathbars *
836
************/
837
.path-bar .button {
839
padding: 7px 6px 8px;
840
// the following is for spacing the icon and the label inside the home button
842
.label:last-child { padding-left: 2px; }
843
.label:first-child { padding-right: 2px; }
844
// .label:only-child { padding-right: 0; padding-left: 0; }
845
GtkImage { padding-top: 1px; }
847
GtkImage:only-child { padding-right: 4px; padding-left: 4px; }
848
}
849
/**************
851
* Tree Views *
852
**************/
853
GtkTreeView.view {
854
-GtkTreeView-grid-line-width: 1;
855
-GtkTreeView-grid-line-pattern: '';
856
-GtkTreeView-tree-line-width: 1;
857
-GtkTreeView-tree-line-pattern: '';
858
-GtkTreeView-expander-size: 16;
859
border-left-color: $fill_color; // this is actually the tree lines color,
861
border-top-color: $border_color; // while this is the grid lines color, better then nothing
862
&.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props
864
border-radius: 0; // rest border radius in lists
866
&:hover, &:active, &:selected { border-radius: 0; }
868
&.dnd {
870
border-style: solid none;
871
border-width: 1px;
872
border-color: mix($fg_color, $primary_color, 50%);
873
}
874
&.expander {
876
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
877
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
878
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
879
&:selected {
880
color: $secondary_inverse_fg_color;
881
&:hover, &:active { color: $inverse_fg_color; }
882
}
883
}
884
&.progressbar { // progress bar in treeviews
886
@extend .entry.progressbar;
887
border-width: 4px;
888
&:selected {
889
border-color: currentColor;
890
}
891
}
892
&.trough { // progress bar trough in treeviews
894
@extend .entry.progressbar;
895
border-width: 4px;
896
border-color: rgba($primary_color, $lower_opacity);
897
&:selected {
898
border-color: $fill_color;
899
}
900
}
901
}
902
column-header {
904
.button {
905
@extend .list-row.activatable;
906
padding: 3px 6px 4px;
907
border-style: none solid solid none;
908
border-width: 1px;
909
border-color: $border_color;
910
border-radius: 0;
911
box-shadow: none;
912
background-color: $base_color;
913
// font-weight: bold;
914
&:hover, &:active {
915
box-shadow: none;
916
}
917
&:insensitive {
918
background-color: $base_color;
919
}
920
&.dnd {
921
@extend column-header.button.dnd;
922
}
923
}
924
&:last-child .button,
925
&:last-child.button { //treeview-like derived widgets in Banshee and Evolution
926
border-right-style: none;
927
}
928
}
929
column-header.button.dnd { // for treeview-like derive widgets
931
border-left-style: solid;
932
background-clip: $extra_background_clip;
933
color: $primary_color;
934
}
935
/*********
938
* Menus *
939
*********/
940
.menubar {
941
-GtkWidget-window-dragging: true;
942
padding: 0;
943
// box-shadow: inset 0 -1px $border_color;
944
background-color: $titlebar_bg_color;
945
& > .menuitem {
946
transition: $shorter_transition;
947
padding: 4px 8px;
948
color: $secondary_titlebar_fg_color;
949
&:hover { //Seems like it :hover even with keyboard focus
950
transition: none;
951
background-color: gtkalpha(currentColor, $lower_opacity / 2);
952
color: $titlebar_fg_color;
953
}
954
&:insensitive {
955
color: $disabled_secondary_titlebar_fg_color;
956
box-shadow: none;
957
}
958
}
959
}
960
.menu {
962
margin: 4px 0;
963
padding: 4px 0;
964
box-shadow: inset 0 1px $highlight_color;
965
background-color: $base_color;
966
border: 1px solid $border_color; // adds borders in a non composited env
967
.csd & {
968
border: none; // axes borders in a composited env
969
border-radius: 2px;
970
}
971
.menuitem {
972
transition: $shorter_transition;
973
padding: 3px 4px 4px;
974
font: initial;
975
text-shadow: none;
976
&:hover {
977
transition: none;
978
background-color: gtkalpha(currentColor, $lower_opacity / 2);
979
}
980
&:insensitive {
981
color: $disabled_fg_color;
982
}
983
//submenu indicators
984
&.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
985
&.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); }
986
}
987
&.button { // overlow buttons
988
border-style: none;
989
border-radius: 0;
990
box-shadow: none;
991
&.top { border-bottom: 1px solid $border_color; }
992
&.bottom { border-top: 1px solid $border_color; }
993
&:hover { background-color: gtkalpha(currentColor, $lower_opacity / 2); }
994
&:insensitive {
995
background-color: transparent;
996
border-color: transparent;
997
}
998
}
999
}
1000
.menuitem .accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1002
.csd.popup { border-radius: 2px; }
1004
/***************
1007
* Popovers *
1008
***************/
1009
.popover {
1011
transition: $shadow_transition;
1012
padding: 2px;
1013
border: 1px solid;
1014
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1015
border-radius: 2px + 1px;
1016
background-color: $lighter_bg_color;
1017
box-shadow: $shadow_2; // TODO: this should really have a highlight
1018
&:backdrop { box-shadow: $shadow_1; }
1019
> .list,
1021
> .view,
1022
> .toolbar,
1023
&.osd > .toolbar {
1024
border-style: none;
1025
border-image: none;
1026
background-color: transparent;
1027
}
1028
.button.flat {
1030
padding: 5px 8px 6px;
1031
background-color: transparent;
1032
background-size: (128px / 0.8) (128px / 0.8), auto;
1033
color: $fg_color;
1034
font: initial;
1035
}
1036
.linked > .button {
1038
border-radius: 2px;
1039
@extend %simple_flat_button;
1040
&:checked {
1041
background-color: $primary_color;
1042
color: $inverse_fg_color;
1043
}
1044
&.image-button {
1045
padding: 8px;
1046
background-size: ($medium_size * 2 / 0.8) ($medium_size * 2 / 0.8), auto;
1047
}
1048
}
1049
&.osd { @extend %osd; }
1051
}
1052
/*****************
1054
* Notebooks and *
1055
* Tabs *
1056
*****************/
1057
.notebook {
1059
// Through me you go to the grief wracked city;
1060
// Through me you go to everlasting pain;
1061
// Through me you go a pass among lost souls.
1062
// ...
1063
// Abandon all hope — Ye Who Enter Here
1064
padding: 0;
1065
background-color: $base_color;
1066
-GtkNotebook-initial-gap: 8;
1067
-GtkNotebook-arrow-spacing: 5;
1068
-GtkNotebook-tab-curvature: 0;
1069
-GtkNotebook-tab-overlap: 1;
1070
-GtkNotebook-has-tab-gap: false;
1071
-GtkWidget-focus-padding: 0;
1072
-GtkWidget-focus-line-width: 0;
1073
&.frame {
1074
border: 1px solid $border_color;
1075
// FIXME doesn't work
1076
&.top { border-top-width: 0; }
1077
&.bottom { border-bottom-width: 0; }
1078
&.right { border-right-width: 0; }
1079
&.left { border-left-width: 0; }
1080
}
1081
&.header {
1082
// FIXME: double borders in some case, can't fix it w/o a class tho
1083
// FIXME: doesn't work on dark var
1084
background-color: $bg_color;
1085
// this is the shading of the header behind the tabs
1087
&.frame {
1088
border: 1px solid $border_color;
1089
&.top { border-bottom-width: 0; }
1090
&.bottom { border-top-width: 0; }
1091
&.right { border-left-width: 0; }
1092
&.left { border-right-width: 0; }
1093
}
1094
&.top {
1096
box-shadow: inset 0 -1px $border_color; // border
1097
}
1098
&.bottom {
1099
box-shadow: inset 0 1px $border_color;
1100
}
1101
&.right {
1102
box-shadow: inset 1px 0 $border_color;
1103
}
1104
&.left {
1105
box-shadow: inset -1px 0 $border_color;
1106
}
1107
}
1108
tab {
1109
border-width: 0;
1110
border-style: solid;
1111
border-color: transparent;
1112
background-color: transparent;
1113
outline-offset: 0;
1115
$tab_indicator_size: 2px;
1117
// vertical tab sizing
1118
$vt_vpadding: 8px;
1119
$vt_hpadding: 12px;
1120
// horizontal tab sizing
1121
$ht_vpadding: 8px;
1122
$ht_hpadding: 12px;
1123
//FIXME: we get double border in some cases, not considering the broken
1125
//notebook content frame...
1126
&.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
1127
&.left, &.right { padding: $ht_vpadding $ht_hpadding; }
1128
/* works for testnotebookdnd, but there's a superfluous border
1131
in gedit or web, commented out for now, needs gtk fixes
1132
&.reorderable-page {
1133
&.top {
1134
padding-top: ($vt_vpadding - 1px);
1135
border-top-width: 1px;
1136
border-left-width: 1px;
1137
border-right-width: 1px;
1138
}
1139
&.bottom {
1140
padding-bottom: ($vt_vpadding - 1px);
1141
border-bottom-width: 1px;
1142
border-left-width: 1px;
1143
border-right-width: 1px;
1144
}
1145
&.left {
1146
padding-left: ($ht_hpadding - 1px);
1147
border-left-width: 1px;
1148
border-top-width: 1px;
1149
border-bottom-width: 1px;
1150
}
1151
&.right {
1152
padding-right: ($ht_hpadding - 1px);
1153
border-right-width: 1px;
1154
border-top-width: 1px;
1155
border-bottom-width: 1px;
1156
}
1157
}
1158
*/
1159
&.reorderable-page {
1160
-GtkNotebook-tab-overlap: 1;
1161
&.top, &.bottom {
1162
padding-left: 12px; // for a nicer close button
1163
padding-right: 12px; // placement
1164
border-left-width: 1px;
1165
border-right-width: 1px;
1166
}
1167
&.left, &.right {
1168
border-bottom-width: 1px;
1169
border-top-width: 1px;
1170
}
1171
}
1172
&.top {
1173
&:hover, &.prelight-page { box-shadow: inset 0 -2px $fill_color; }
1174
&:active, &.active-page { box-shadow: inset 0 -2px $primary_color; }
1175
}
1176
&.bottom {
1177
&:hover, &.prelight-page { box-shadow: inset 0 2px $fill_color; }
1178
&:active, &.active-page { box-shadow: inset 0 2px $primary_color; }
1179
}
1180
&.left {
1181
&:hover, &.prelight-page { box-shadow: inset -2px 0 $fill_color; }
1182
&:active, &.active-page { box-shadow: inset -2px 0 $primary_color; }
1183
}
1184
&.right {
1185
&:hover, &.prelight-page { box-shadow: inset 2px 0 $fill_color; }
1186
&:active, &.active-page { box-shadow: inset 2px 0 $primary_color; }
1187
}
1188
@each $_tab, $_border in (top, bottom),
1189
(bottom, top),
1190
(left, right),
1191
(right, left) {
1192
&.reorderable-page.#{$_tab} {
1193
border-color: transparent;
1194
&:hover, &.prelight-page {
1195
border-color: $border_color;
1196
border-#{$_border}-width: 0;
1197
border-#{$_border}-color: transparent;
1198
background-color: $alt_base_color;
1199
}
1200
&:active, &.active-page {
1201
border-color: $border_color;
1202
border-#{$_border}-width: 0;
1203
border-#{$_border}-color: transparent;
1204
background-color: $base_color;
1205
}
1206
}
1207
}
1208
.label { //tab text
1209
padding: 0 2px; // needed for a nicer focus ring
1210
font-weight: 500;
1211
color: $secondary_fg_color;
1212
}
1213
.prelight-page .label, .label.prelight-page {
1214
// prelight tab text
1215
color: $fg_color;
1216
}
1217
.active-page .label, .label.active-page {
1218
// active tab text
1219
color: $fg_color;
1220
}
1221
.button { //tab close button
1222
padding: 0;
1223
@extend %image_button;
1224
background-size: ($small_size / 0.8) ($small_size / 0.8), auto;
1225
@extend %simple_flat_button;
1226
& > GtkImage { // this is a hack which makes tabs grow
1227
padding: 4px;
1228
}
1229
}
1230
}
1231
&.arrow {
1232
&:not(:hover):not(:active) { color: gtkalpha(currentColor, $secondary_opacity); }
1233
&:insensitive {
1234
color: $disabled_fg_color;
1235
}
1236
}
1237
GtkGrid > .entry {
1238
@extend .entry.flat;
1239
}
1240
}
1241
/**************
1243
* Scrollbars *
1244
**************/
1245
$_slider_margin: 4px;
1247
$_slider_fine_tune_margin: 6px;
1248
.scrollbar {
1250
-GtkRange-slider-width: 8 + $_slider_margin * 2 + 1;
1251
-GtkRange-trough-border: 0;
1252
-GtkScrollbar-has-backward-stepper: false;
1253
-GtkScrollbar-has-forward-stepper: false;
1254
-GtkScrollbar-min-slider-length: 24 + $_slider_margin * 2;
1255
// minimum size for the slider.
1256
// sadly can't be in '.slider'
1257
// where it belongs
1258
-GtkRange-stepper-spacing: 0;
1259
-GtkRange-trough-under-steppers: 1;
1260
.button {
1262
border: none;
1263
}
1264
&.overlay-indicator {
1266
&:not(.dragging):not(.hovering) { // Overlay scrolling indicator
1267
-GtkRange-slider-width: 4 + $_slider_margin * 2;
1268
.slider {
1270
margin: $_slider_margin - 1px;
1271
border: 1px solid rgba($base_color, $lower_opacity);
1272
// background-clip: padding-box;
1273
}
1274
.trough {
1276
border-style: none;
1277
background-color: transparent;
1278
}
1279
}
1281
&.dragging,
1283
&.hovering {
1284
.trough {
1285
background-color: rgba($base_color, $higher_opacity);
1286
}
1287
}
1288
}
1289
// trough coloring
1291
.trough {
1292
border: 1px none $border_color;
1293
background-color: $base_color;
1294
background-clip: $extra_background_clip;
1295
}
1296
// slider coloring
1298
.slider {
1299
background-color: $tertiary_fg_color;
1300
&:hover { background-color: $secondary_fg_color; }
1301
&:active { background-color: $fg_color; }
1302
&:insensitive {
1303
opacity: $disabled_opacity;
1304
}
1305
}
1306
// sizing
1309
.slider {
1310
border-radius: 100px;
1311
margin: $_slider_margin;
1312
}
1313
&.fine-tune .slider { margin: $_slider_fine_tune_margin; }
1315
&.vertical {
1317
.slider {
1319
margin-left: 1px + $_slider_margin;
1320
&:dir(rtl) {
1322
margin-left: $_slider_margin;
1323
margin-right: 1px + $_slider_margin;
1324
}
1325
}
1326
&.fine-tune .slider {
1328
margin-left: 1px + $_slider_fine_tune_margin;
1329
&:dir(rtl) {
1331
margin-left: $_slider_fine_tune_margin;
1332
margin-right: 1px + $_slider_fine_tune_margin;
1333
}
1334
}
1335
.trough {
1337
border-left-style: solid;
1338
&:dir(rtl) {
1340
border-left-style: none;
1341
border-right-style: solid;
1342
}
1343
}
1344
}
1345
&.horizontal {
1347
.slider { margin-top: 1px + $_slider_margin; }
1349
&.fine-tune .slider { margin-top: 1px + $_slider_fine_tune_margin; }
1351
.trough { border-top-style: solid; }
1353
}
1354
}
1355
.scrollbars-junction,
1357
.scrollbars-junction.frame { // the small square between two scrollbars
1358
border-style: solid none none solid;
1359
background-color: $base_color;
1360
&:dir(rtl) { border-style: solid solid none none; }
1362
}
1363
/**********
1366
* Switch *
1367
**********/
1368
GtkSwitch {
1370
-GtkSwitch-slider-width: 20px;
1371
-GtkSwitch-slider-height: 20px;
1372
outline-offset: -4px;
1374
outline-radius: 100px;
1375
font-size: 0;
1376
&.trough {
1377
// similar to the .scale
1378
border: 8px solid transparent;
1379
border-radius: 100px;
1380
background-color: $fill_color;
1381
// background-clip: padding-box;
1382
&:insensitive {
1383
color: gtkalpha(currentColor, $disabled_opacity);
1384
}
1385
&:active {
1386
background-color: rgba($accent_color, 0.5);
1387
&:insensitive {
1388
background-color: rgba($accent_color, 0.3);
1389
}
1390
}
1391
}
1392
&.slider {
1393
padding: 3px;
1394
border-radius: 100px;
1395
@include entry(normal);
1396
&:hover { @include entry(focus); }
1397
&:active { background-color: $accent_color; }
1398
&:insensitive { @include entry(insensitive); }
1399
}
1400
.list-row:selected & {
1401
}
1402
}
1404
/*************************
1406
* Check and Radio items *
1407
*************************/
1408
// draw regular check and radio items using our PNG assets
1410
// all assets are rendered from assets.svg. never add pngs directly
1411
@each $w,$a in ('check', 'checkbox'),
1413
('radio', 'radio') {
1414
//standard checks and radios
1416
@each $s,$as in ('', '-unchecked'),
1417
(':hover', '-unchecked-hover'),
1418
(':active', '-unchecked-active'),
1419
(':insensitive', '-unchecked-disabled'),
1420
(':inconsistent', '-mixed'),
1421
(':inconsistent:hover', '-mixed-hover'),
1422
(':inconsistent:active', '-mixed-active'),
1423
(':inconsistent:insensitive', '-mixed-disabled'),
1424
(':checked', '-checked'),
1425
(':checked:hover', '-checked-hover'),
1426
(':checked:active', '-checked-active'),
1427
(':checked:insensitive', '-checked-disabled') {
1428
.#{$w}#{$s} {
1429
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
1430
url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
1431
&.button.flat {}
1432
}
1433
}
1434
//menu
1436
@each $s,$as in ('', '-unchecked'),
1437
(':insensitive', '-unchecked-disabled'),
1438
(':inconsistent', '-mixed'),
1439
(':inconsistent:insensitive', '-mixed-disabled'),
1440
(':checked', '-checked'),
1441
(':checked:insensitive', '-checked-disabled') {
1442
.menu .menuitem.#{$w}#{$s} {
1443
// color: gtkalpha(currentColor, $tertiary_opacity);
1444
// -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic');
1445
// &:active, &:checked { -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic'); }
1446
// &:inconsistent { -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic'); }
1447
-gtk-icon-source: -gtk-scaled(url("assets/menu-#{$a}#{$as}#{$asset_suffix}.png"),
1448
url("assets/menu-#{$a}#{$as}#{$asset_suffix}@2.png"));
1449
}
1450
}
1451
}
1452
//treeview and list-rows
1454
.view.check, .view.radio,
1455
.list-row .check, list-row .radio {
1456
}
1457
//selection-mode
1459
@each $s,$as in ('', '-unchecked'),
1460
(':checked', '-checked') {
1461
.view.content-view.check#{$s}:not(.list) {
1462
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1463
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1464
background-color: transparent;
1465
icon-shadow: $shadow_1;
1466
&:hover, &:active { icon-shadow: $shadow_2; }
1467
// &:insensitive { icon-shadow: none; }
1468
}
1469
}
1470
GtkCheckButton.text-button, GtkRadioButton.text-button {
1472
// this is for a nice focus on check and radios text
1473
padding: 2px 4px;
1474
outline-offset: 0;
1475
&:insensitive,
1476
&:insensitive:active,
1477
&:insensitive:inconsistent {
1478
// set insensitive color, which is overriden otherwise
1479
// color: $disabled_fg_color;
1480
}
1481
}
1482
/************
1484
* GtkScale *
1485
************/
1486
.scale,
1487
.scale.scale-has-marks-above.scale-has-marks-below,
1488
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
1489
// FIXME: rationalize
1490
-GtkScale-slider-length: 20;
1491
-GtkRange-slider-width: 20;
1492
-GtkRange-trough-border: 2;
1493
outline-offset: -8px;
1494
outline-radius: 100px;
1495
&.fine-tune {
1497
&.slider { background-size: 60%; }
1498
}
1499
&.slider {
1501
// @include entry(normal);
1502
// border-radius: 50%;
1503
// background-color: $accent_color;
1504
@each $s,$as in ('', ''),
1505
(':insensitive', '-disabled') {
1506
&.slider#{$s} {
1507
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
1508
border-style: none;
1509
border-radius: 0;
1510
background-color: transparent;
1511
background-image: -gtk-scaled(url('#{$_url}.png'),
1512
url('#{$_url}@2.png'));
1513
background-repeat: no-repeat;
1514
background-position: center;
1515
background-size: 70%;
1516
box-shadow: none;
1517
}
1518
}
1519
&:hover { background-size: 80%; }
1520
&:active { background-size: 90%; }
1521
&:hover {
1522
// @include entry(focus);
1523
// border-radius: 50%; // needed for double marks scales
1524
}
1525
&:insensitive {
1526
// @include entry(insensitive);
1527
// border-radius: 50%; // overridden
1528
}
1529
//OSD sliders
1530
.osd & {
1531
}
1532
}
1533
&.trough {
1534
margin: 11px 12px;
1535
background-color: $fill_color;
1536
&.highlight {
1537
background-color: $accent_color;
1538
&:insensitive { background-color: $fill_color; }
1539
}
1540
&:insensitive { color: $disabled_fg_color; }
1541
&.vertical { margin: 12px 11px; }
1542
//OSD troughs
1543
.osd & {
1544
}
1545
}
1546
// marks color
1547
&.separator {
1548
color: $fill_color;
1549
}
1550
// scales on selected list rows
1551
.list-row:selected & {
1552
}
1553
}
1554
@each $d,$dn in ('', 'horz'),
1556
('.vertical', 'vert') {
1557
@each $w,$we in ('scale-has-marks-below', 'marks-after'),
1558
('scale-has-marks-above', 'marks-before') {
1559
.scale#{$d}.#{$w} {
1560
-GtkScale-slider-length: 20;
1561
-GtkRange-slider-width: 25;
1562
-GtkRange-trough-border: 2;
1563
@extend %#{$we}-#{$dn};
1565
@each $s,$as in ('', ''),
1567
(':insensitive', '-disabled') {
1568
&.slider#{$s} {
1569
$_url: 'assets/scale-#{$dn}-#{$we}-slider#{$as}#{$asset_suffix}';
1570
border-style: none;
1571
border-radius: 0;
1572
background-color: transparent;
1573
background-image: -gtk-scaled(url('#{$_url}.png'),
1574
url('#{$_url}@2.png'));
1575
background-repeat: no-repeat;
1576
background-position: center;
1577
box-shadow: none;
1578
}
1579
}
1580
}
1581
}
1582
}
1583
%marks-before-horz {
1585
.trough { margin: 16px 12px 11px; }
1586
}
1587
%marks-after-horz {
1588
.trough { margin: 11px 12px 16px; }
1589
}
1590
%marks-before-vert {
1591
.trough { margin: 12px 11px 12px 16px; }
1592
}
1593
%marks-after-vert {
1594
.trough { margin: 12px 16px 12px 11px; }
1595
}
1596
/*****************
1598
* Progress bars *
1599
*****************/
1600
GtkProgressBar {
1602
-GtkProgressBar-min-horizontal-bar-height: 4;
1603
-GtkProgressBar-min-vertical-bar-width: 4;
1604
padding: 0;
1605
font-size: smaller;
1606
color: $tertiary_fg_color;
1607
&.osd {
1608
-GtkProgressBar-xspacing: 0;
1609
-GtkProgressBar-yspacing: 0;
1610
-GtkProgressBar-min-horizontal-bar-height: 4;
1611
}
1612
&.trough { // background
1613
border-radius: 0;
1614
background-color: rgba($primary_color, $lower_opacity);
1615
&.osd {
1616
border-style: none;
1617
box-shadow: none;
1618
// background-color: transparent;
1619
}
1620
}
1621
}
1622
// moving bit
1624
.progressbar {
1625
border-radius: 0;
1626
background-color: $primary_color;
1627
&.left {
1628
border-top-left-radius: 0;
1629
border-bottom-left-radius: 0;
1630
}
1631
&.right {
1632
border-top-right-radius: 0;
1633
border-bottom-right-radius: 0;
1634
}
1635
&.left.right {
1636
box-shadow: none;
1637
}
1638
&.vertical {
1639
&.bottom {
1640
border-bottom-left-radius: 0;
1641
border-bottom-right-radius: 0;
1642
box-shadow: none;
1643
}
1644
&.top {
1645
border-top-left-radius: 0;
1646
border-top-right-radius: 0;
1647
}
1648
}
1649
&.osd {
1650
background-image: none;
1651
background-color: $primary_color;
1652
border-style: none;
1653
border-radius: 0;
1654
}
1655
}
1656
/*************
1659
* Level Bar *
1660
*************/
1661
.level-bar {
1663
box-shadow: $shadow_1; // needs to be set here to avoid clipping
1664
color: $disabled_fg_color;
1665
-GtkLevelBar-min-block-width: 36;
1666
-GtkLevelBar-min-block-height: 4;
1667
&.vertical {
1668
-GtkLevelBar-min-block-width: 4;
1669
-GtkLevelBar-min-block-height: 36;
1670
}
1671
&.trough {
1672
padding: 2px;
1673
border-radius: 2px;
1674
@include entry(normal);
1675
&:insensitive { @include entry(insensitive); }
1676
&.indicator-discrete {
1677
&.horizontal { padding: 2px 1px; }
1678
&.vertical { padding: 1px 2px; }
1679
}
1680
}
1681
&.fill-block {
1682
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
1683
// :nth-child working on discrete indicators
1684
background-color: $primary_color;
1685
border-radius: 0;
1686
box-shadow: none;
1687
&.indicator-discrete {
1688
&.horizontal { margin: 0 1px; }
1689
&.vertical { margin: 1px 0; }
1690
}
1691
&.level-high {
1692
background-color: $success_color;
1693
}
1694
&.level-low {
1695
background-color: $warning_color;
1696
}
1697
&.empty-fill-block {
1698
background-color: $fill_color;
1699
}
1700
}
1701
}
1702
/**********
1705
* Frames *
1706
**********/
1707
.frame {
1708
border: 1px solid $border_color;
1709
&.flat { border-style: none; }
1710
padding: 0;
1711
&.action-bar {
1712
padding: $container_padding;
1713
border-width: 1px 0 0;
1714
.button:not(.suggested-action):not(.destructive-action) { @extend %button.flat; }
1715
}
1716
}
1717
GtkScrolledWindow {
1719
GtkViewport.frame { // avoid double borders when viewport inside
1720
// scrolled window
1721
border-style: none;
1722
}
1723
}
1724
//vbox and hbox separators
1726
.separator {
1727
// always disable separators
1728
// -GtkWidget-wide-separators: true;
1729
color: $border_color;
1730
// Font and File button separators
1732
GtkFileChooserButton &.vertical,
1733
GtkFontButton &.vertical {
1734
// always disable separators
1735
-GtkWidget-wide-separators: true;
1736
}
1737
}
1738
/*********
1740
* Lists *
1741
*********/
1742
.list {
1744
border-color: $border_color;
1745
background-color: $base_color;
1746
}
1747
.list-row,
1749
.grid-child {
1750
padding: 2px;
1751
}
1752
// FIXME
1754
$row_transition: $longer_transition, background-color 0, color 0;
1755
.list-row.activatable {
1757
transition: $row_transition;
1758
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0);
1759
background-image: -gtk-gradient(radial,
1760
center center, 0,
1761
center center, 0.5,
1762
to(gtkalpha(currentColor, 0)),
1763
to(transparent)),
1764
linear-gradient(to bottom, gtkalpha(currentColor, 0));
1765
background-repeat: no-repeat;
1766
background-position: center, center;
1767
background-size: (192px / 0.8) (192px / 0.8), auto;
1768
&:hover {
1769
transition: $row_transition, box-shadow 0;
1770
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0.05);
1771
}
1772
&:active {
1773
transition: $row_transition, background-image 0;
1774
animation: list_ripple_effect $longer_duration $deceleration_curve forwards;
1775
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, $lower_opacity / 2);
1776
}
1777
}
1778
.list-row:selected {
1780
@extend %selected_items;
1781
.button {
1782
&:insensitive { color: $disabled_secondary_inverse_fg_color; }
1783
&.flat {
1784
color: $secondary_inverse_fg_color;
1785
&:hover, &:active { color: $inverse_fg_color; }
1786
&:insensitive { color: $disabled_secondary_inverse_fg_color; }
1787
}
1788
}
1789
}
1790
// transition
1792
.list-row {
1793
// &:hover { transition-duration: 0; }
1794
}
1795
/*********************
1798
* App Notifications *
1799
*********************/
1800
.app-notification,
1802
.app-notification.frame {
1803
@extend %osd;
1804
@extend .toolbar.osd;
1805
.button { @extend %button.flat; }
1806
}
1807
/*************
1809
* Expanders *
1810
*************/
1811
.expander {
1813
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1814
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
1815
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1816
&:not(:hover):not(:active) { color: gtkalpha(currentColor, $secondary_opacity); }
1817
&:selected { color: $inverse_fg_color; }
1818
}
1819
/************
1821
* Calendar *
1822
***********/
1823
GtkCalendar {
1824
padding: 1px;
1825
border: 1px solid $border_color;
1826
color: $fg_color;
1827
&:insensitive { color: $disabled_fg_color; }
1829
&:selected {
1831
@extend .view:selected;
1832
border-radius: 2px + 1px;
1834
}
1835
&.header {
1837
border-style: none none solid;
1838
border-radius: 0;
1839
}
1840
&.button {
1842
@extend %simple_flat_button;
1843
}
1844
&:inconsistent { color: gtkalpha(currentColor, $disabled_opacity); }
1846
&.highlight {
1847
font-size: smaller;
1848
color: gtkalpha(currentColor, $tertiary_opacity);
1849
}
1850
}
1851
/***********
1853
* Dialogs *
1854
***********/
1855
.message-dialog .dialog-action-area .button {
1857
padding: 8px;
1858
}
1859
.message-dialog { // Message Dialog styling
1861
&.background { background-color: $lighter_bg_color; }
1862
.titlebar {
1863
border-style: none;
1864
box-shadow: inset 0 1px $highlight_color;
1865
background-color: $lighter_bg_color;
1866
}
1867
&.csd { // rounded bottom border styling for csd version
1868
&.background {
1869
// bigger radius for better antialiasing
1870
border-bottom-left-radius: 2px;
1871
border-bottom-right-radius: 2px;
1872
}
1873
.dialog-action-area .button {
1874
@extend %simple_flat_button;
1875
padding: 9px 16px 10px;
1876
border-top: 1px solid $border_color;
1877
border-radius: 0;
1878
background-size: (192px / 0.8) (192px / 0.8), auto;
1879
// &:first-child{ border-bottom-left-radius: 2px; }
1880
// &:last-child { border-bottom-right-radius: 2px; }
1881
&:first-child{ border-radius: 0 0 0 2px; }
1882
&:last-child { border-radius: 0 0 2px 0; }
1883
}
1884
}
1885
}
1886
GtkFileChooserDialog {
1888
.search-bar {
1889
// background-color: $base_color;
1890
// border-color: $bg_color;
1891
}
1892
.dialog-action-box {
1893
border-top: 1px solid $border_color;
1894
}
1895
}
1896
/***********
1898
* Sidebar *
1899
***********/
1900
.sidebar {
1902
border: none;
1903
background-color: $lighter_bg_color;
1904
&:selected {
1906
@extend %selected_items;
1907
}
1908
}
1909
GtkSidebarRow {
1911
// Needs overriding of the GtkListBoxRow padding
1912
&.list-row {
1913
padding: 0px;
1914
}
1915
// Using margins/padding directly in the SidebarRow
1916
// will make the animation of the new bookmark row jump
1917
.sidebar-revealer {
1918
padding: 4px 14px 4px 12px;
1919
}
1920
.sidebar-icon {
1921
opacity: $tertiary_opacity; // dim the device icons
1922
&:dir(ltr) { padding-right: 8px; }
1923
&:dir(rtl) { padding-left: 8px; }
1924
}
1925
.sidebar-label {
1926
&:dir(ltr) { padding-right: 2px; }
1927
&:dir(rtl) { padding-left: 2px; }
1928
}
1929
}
1930
GtkPlacesSidebar.sidebar {
1932
// looks like the label doesn't get all the states so work around
1933
.list-row:selected:insensitive .label { @extend %selected_items:insensitive; }
1934
.sidebar-placeholder-row {
1936
border: solid 1px $primary_color;
1937
}
1938
.sidebar-new-bookmark-row {
1940
color: $accent_color;
1941
}
1942
@at-root .sidebar-button.button { // @at-root needded to not change the specificity making button styling inheritance broken
1944
// so istead of "GtkPlacesSidebar.sidebar .sidebar-button.button" [specificity 0,0,3,1]
1945
// the extended selector ".sidebar-button.button" [specificity 0,0,2,0]
1946
&.image-button { padding: 4px; }
1948
@extend %simple_flat_button;
1950
}
1951
// this is for indicating which sidebar row generated a popover
1952
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
1953
.has-open-popup { @extend .list-row.activatable:active; }
1954
}
1955
.sidebar-item {
1957
padding: 10px 4px;
1958
> .label {
1959
padding-left: 6px;
1960
padding-right: 6px;
1961
}
1962
&.needs-attention > .label {
1963
@extend %needs_attention;
1964
}
1965
}
1966
/****************
1969
* File chooser *
1970
****************/
1971
GtkPlacesView {
1973
.server-list-button > GtkImage { -gtk-icon-transform: rotate(0turn); }
1974
.server-list-button:checked > GtkImage { -gtk-icon-transform: rotate(-0.5turn); }
1976
}
1977
/*********
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: $border_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: $border_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
background-color: $info_bg_color;
2020
}
2021
.question {
2023
background-color: $question_bg_color;
2024
}
2025
.warning {
2027
background-color: $warning_bg_color;
2028
}
2029
.error {
2031
background-color: $error_bg_color;
2032
}
2033
.info,
2035
.question,
2036
.warning,
2037
.error {
2038
color: $inverse_fg_color;
2039
.button {
2040
// @extend .list-row:selected.button;
2041
&:insensitive { color: $disabled_secondary_inverse_fg_color; }
2042
}
2043
.label:selected {
2044
}
2045
}
2046
/************
2048
* Tooltips *
2049
************/
2050
.tooltip {
2052
&.background {
2053
// background-color needs to be set this way otherwise it gets drawn twice
2054
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2055
box-shadow: inset 0 1px $highlight_color;
2056
background-color: rgba($base_color, $higher_opacity);
2057
}
2058
// @extend %osd;
2060
color: $fg_color;
2061
padding: 4px; /* not working */
2062
border-radius: 2px;
2063
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2064
// FIXME: we need a border or tooltips vanish on black background.
2065
&.window-frame.csd {
2066
background-color: transparent;
2067
}
2068
}
2069
.tooltip * { //Yeah this is ugly
2071
padding: 4px;
2072
background-color: transparent;
2073
color: inherit; // just to be sure
2074
}
2075
/*****************
2077
* Color Chooser *
2078
*****************/
2079
GtkColorSwatch {
2081
// This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one
2082
// is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
2083
// is applied to the overlay box.
2084
transition: $shadow_transition;
2086
box-shadow: $shadow_1;
2087
// we need to re-set the shadow here since it get axed by the previous bit
2089
&:selected { }
2090
&:insensitive {
2091
opacity: $disabled_opacity;
2092
box-shadow: none;
2093
}
2094
// base color corners rounding
2096
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2097
// sports a bigger radius.
2098
// nth-child is needed by the custom color strip.
2099
// The :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
2100
// and GtkColorSwatch.overlay, I know it's weird, but this is gtk+, not a browser.
2101
&.top {
2102
border-top-left-radius: 2px;
2103
border-top-right-radius: 2px;
2104
}
2105
&.bottom {
2106
border-bottom-left-radius: 2px;
2107
border-bottom-right-radius: 2px;
2108
}
2109
&.left, &:first-child:not(.overlay):not(.top) {
2110
border-top-left-radius: 2px;
2111
border-bottom-left-radius: 2px;
2112
}
2113
&.right, &:last-child:not(.overlay):not(.bottom) {
2114
border-top-right-radius: 2px;
2115
border-bottom-right-radius: 2px;
2116
}
2117
&:only-child:not(.overlay) { border-radius: 2px; }
2118
// overlay corner rounding
2120
&.top > .overlay {
2121
border-top-left-radius: 2px;
2122
border-top-right-radius: 2px;
2123
}
2124
&.bottom > .overlay {
2125
border-bottom-left-radius: 2px;
2126
border-bottom-right-radius: 2px;
2127
}
2128
&:first-child:not(.top) > .overlay {
2129
border-top-left-radius: 2px;
2130
border-bottom-left-radius: 2px;
2131
}
2132
&:last-child:not(.bottom) > .overlay {
2133
border-top-right-radius: 2px;
2134
border-bottom-right-radius: 2px;
2135
}
2136
&:only-child > .overlay { border-radius: 2px; }
2137
// hover effect
2139
&:hover { box-shadow: $shadow_2; }
2140
// no hover effect for the colorswatch in the color editor
2142
GtkColorEditor & {
2143
border-radius: 2px; // same radius as the entry
2144
&:hover { box-shadow: $shadow_1; }
2145
}
2146
// indicator and keynav outline colors
2148
&.color-dark {
2149
color: $light_fg_color;
2150
}
2151
&.color-light {
2152
color: $dark_fg_color;
2153
}
2154
// border color
2156
&.overlay,
2157
&.overlay:selected {
2158
}
2159
// make the add color button looks like, well, a button
2161
&#add-color-button {
2162
background-image: linear-gradient(to right,
2163
$error_bg_color 25%,
2164
$warning_bg_color 25%, $warning_bg_color 50%,
2165
$info_bg_color 50%, $info_bg_color 75%,
2166
$question_bg_color 75%);
2167
color: $light_fg_color;
2168
}
2169
}
2170
/********
2173
* Misc *
2174
********/
2175
//content view (grid/list)
2177
.content-view {
2178
background-color: $bg_color;
2179
// &:hover { -gtk-image-effect: highlight; }
2180
&.rubberband { @extend .rubberband; }
2181
}
2182
.scale-popup {
2184
.osd & { @extend %osd; }
2186
.osd & .button.flat { //FIXME: quick hack, redo properly
2188
}
2189
.button { // +/- buttons on GtkVolumeButton popup
2191
padding: 10px;
2192
}
2193
}
2194
GtkScaleButton.button,
2196
GtkVolumeButton.button {
2197
// I assume both are image-button *by default*
2198
// with the image-button/text-button classes automagically applied depending on the button child these selectors can be deleted.
2199
@extend %image_button;
2200
&.text-button { @extend .text-button }
2202
}
2203
/**********************
2205
* Window Decorations *
2206
*********************/
2207
.window-frame {
2209
transition: $shadow_transition;
2210
border-radius: 2px 2px 0 0;
2211
box-shadow: $shadow_4;
2212
// FIXME rationalize window-frame shadows
2214
/* this is used for the resize cursor area */
2216
margin: 8px;
2217
&:backdrop {
2219
box-shadow: $shadow_2;
2220
}
2221
&.tiled {
2222
border-radius: 0;
2223
}
2224
&.popup {
2225
box-shadow: none;
2226
}
2227
// server-side decorations as used by mutter
2228
&.ssd {
2229
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); //just doing borders, wm draws actual shadows
2230
}
2231
&.csd {
2232
&.popup {
2233
border-radius: 2px;
2234
box-shadow: $shadow_2;
2235
}
2236
&.tooltip {
2237
border-radius: 2px;
2238
box-shadow: $shadow_2;
2239
}
2240
&.message-dialog {
2241
border-radius: 2px;
2242
box-shadow: $shadow_4;
2243
&:backdrop { box-shadow: $shadow_2; }
2244
}
2245
}
2246
&.solid-csd {
2247
border-radius: 0;
2248
margin: 0;
2249
background-color: $titlebar_bg_color;
2250
box-shadow: none;
2251
}
2252
}
2253
// Window Close button
2255
.header-bar .button.titlebutton,
2256
.titlebar .button.titlebutton {
2257
// @extend %simple_flat_button;
2258
@extend %image_button;
2259
&:active { // add fallback
2261
background-image: -gtk-gradient(radial,
2262
center center, 0,
2263
center center, 0.4,
2264
to(gtkalpha(currentColor, $lower_opacity / 2)),
2265
to(transparent)),
2266
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
2267
}
2268
}
2269
// catch all extend :)
2271
%selected_items {
2273
background-color: $primary_color;
2274
color: $inverse_fg_color;
2275
&:insensitive { color: $disabled_inverse_fg_color; }
2276
}
2277
.monospace {
2279
font: Monospace;
2280
}
2281
/**********************
2283
* Touch Copy & Paste *
2284
*********************/
2285
//touch selection handlebars for the Popover.osd above
2287
.entry.cursor-handle,
2288
.cursor-handle {
2289
background-color: $accent_color;
2290
background-image: none;
2291
box-shadow: none;
2292
border-style: none;
2293
@each $s,$as in ('', ''),
2294
(':hover', '-hover'),
2295
(':active', '-active') { //no need for insensitive and backdrop
2296
&.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
2297
$_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
2298
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2299
url('#{$_url}@2.png'));
2300
padding-left: 10px;
2301
}
2302
&.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
2303
$_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
2304
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2305
url('#{$_url}@2.png'));
2306
padding-right: 10px;
2307
}
2308
&.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
2309
$_url: 'assets/scale-horz-marks-before-slider#{$as}#{$asset_suffix}';
2310
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2311
url('#{$_url}@2.png'));
2312
}
2313
}
2314
}
2315
/* Decouple the font of context menus from their entry/textview */
2317
.context-menu {
2318
font: initial;
2319
}
2320
.touch-selection {
2322
font: initial;
2323
color: $fg_color;
2324
background-color: $base_color;
2325
box-shadow: $shadow_2;
2326
&:backdrop { box-shadow: $shadow_1; }
2327
.button {
2328
}
2329
}
2330
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
2332
// This draws a box on top of the content, the size changes programmatically.
2333
.overshoot {
2334
&.top {
2335
@include overshoot(top);
2336
}
2337
&.bottom {
2338
@include overshoot(bottom);
2339
}
2340
&.left {
2341
@include overshoot(left);
2342
}
2343
&.right {
2344
@include overshoot(right);
2345
}
2346
}
2347
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2349
.undershoot {
2350
&.top {
2351
@include undershoot(top);
2352
}
2353
&.bottom {
2355
@include undershoot(bottom);
2356
}
2357
&.left {
2359
@include undershoot(left);
2360
}
2361
&.right {
2363
@include undershoot(right);
2364
}
2365
}
2366