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: scale-alpha($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
// @include button(normal, $b_color, white);
328
// &:hover { @include button(hover, $b_color, white); }
329
// &:active, &:checked { @include button(active, $b_color, white); }
330
&:insensitive { @include button(insensitive, $b_color, white); }
331
&:checked { background-color: mix($inverse_fg_color, $b_color, percentage($lower_opacity)); }
332
&.flat {
333
background-color: transparent;
334
color: $b_color;
335
// @include button(flat-normal, $b_color, white);
336
// &:hover { @include button(flat-hover, $b_color, white); }
337
// &:active, &:checked { @include button(flat-active, $b_color, white); }
338
&:insensitive { @include button(flat-insensitive, $b_color, white); }
339
}
340
}
341
}
342
&.image-button { @extend %image_button; }
344
&.text-button {
346
padding-left: 16px;
347
padding-right: 16px;
348
}
349
&.text-button.image-button {
351
// those buttons needs uneven horizontal padding, we want the icon side
352
// to have the image-button padding, while the text side the text-button
353
// one, so we're adding the missing padding to the label depending on
354
// its position inside the button
355
padding: 7px 10px 8px; // same as .button
356
outline-radius: 2px;
357
border-radius: 2px;
358
background-size: ($medium_size * 2 / 0.8) ($medium_size * 2 / 0.8), auto;
359
.label:first-child { padding-left: 6px; }
360
.label:last-child { padding-right: 6px; }
361
}
362
.stack-switcher > & {
364
// to position the needs attention dot, padding is added to the button
365
// child, a label needs just lateral padding while an icon needs vertical
366
// padding added too.
367
outline-offset: -4px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
369
> .label {
371
padding-left: 6px; // label padding
372
padding-right: 6px; //
373
}
374
> GtkImage {
375
padding-left: 6px; // image padding
376
padding-right: 6px; //
377
padding-top: 3px; //
378
padding-bottom: 3px; //
379
}
380
&.text-button {
381
padding: 7px 10px 8px; // needed or it will get overridden
382
}
383
&.image-button {
384
// we want image buttons to have a 1:1 aspect ratio, so compensation
385
// of the padding added to the GtkImage is needed
386
padding: 7px 4px;
387
}
388
&.needs-attention > .label,
389
&.needs-attention > GtkImage { @extend %needs_attention; }
390
&.needs-attention:checked > .label,
391
&.needs-attention:checked > GtkImage {
392
animation: none;
393
background-image: none;
394
}
395
}
396
//inline-toolbar buttons
398
.inline-toolbar & {
399
// @extend %button.flat;
400
@extend %image_button;
401
}
402
.primary-toolbar & { icon-shadow: none; } // tango icons don't need shadows
404
.linked > & { @extend %linked; }
406
.linked.vertical > & { @extend %linked_vertical; }
408
.linked > &.flat,
410
.linked.vertical > &.flat {
411
border-radius: 2px;
412
&.image-button {
414
outline-radius: $circular_radius;
415
border-radius: $circular_radius;
416
}
417
&.text-button.image-button {
419
outline-radius: 2px;
420
border-radius: 2px;
421
}
422
}
423
}
424
%image_button {
426
padding: 10px;
427
outline-radius: 100px;
428
border-radius: 100px;
429
background-size: ($medium_size / 0.8) ($medium_size / 0.8), auto;
430
}
431
%needs_attention {
433
animation: needs_attention $longer_duration $deceleration_curve forwards;
434
background-repeat: no-repeat;
435
background-position: right 3px;
436
background-size: 6px 6px;
437
&:dir(rtl) { background-position: left 3px; }
438
}
439
// all the following is for the +|- buttons on inline toolbars, that way
442
// should really be deprecated...
443
.inline-toolbar GtkToolButton > .button { // redefining the button look is
444
// needed since those are flat...
445
}
446
// More inline toolbar buttons
448
.inline-toolbar.toolbar GtkToolButton {
449
// & > .button.flat { @extend %linked_middle; }
450
// &:first-child > .button.flat { @extend %linked:first-child; }
451
// &:last-child > .button.flat { @extend %linked:last-child; }
452
// &:only-child > .button.flat { @extend %linked:only-child; }
453
}
454
%linked_middle {
456
outline-radius: 2px;
457
border-radius: 0;
458
}
459
%linked {
461
@extend %linked_middle;
462
&:first-child {
463
border-top-left-radius: 2px;
464
border-bottom-left-radius: 2px;
465
}
466
&:last-child {
467
border-top-right-radius: 2px;
468
border-bottom-right-radius: 2px;
469
}
470
&:only-child {
471
border-radius: 2px;
472
}
473
}
474
%linked_vertical_middle {
476
outline-radius: 2px;
477
border-radius: 0;
478
}
479
%linked_vertical{
481
@extend %linked_vertical_middle;
482
&:first-child {
483
border-top-left-radius: 2px;
484
border-top-right-radius: 2px;
485
}
486
&:last-child {
487
border-bottom-left-radius: 2px;
488
border-bottom-right-radius: 2px;
489
}
490
&:only-child {
491
border-radius: 2px;
492
}
493
}
494
/* menu buttons */
496
.menuitem.button.flat {
497
&:selected { @extend %selected_items; }
498
}
499
GtkColorButton.button {
502
padding: 7px 8px 8px; // Uniform padding on the GtkColorButton
503
GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the
505
// colorpicker style, otherwise
506
border-radius: 2px;
507
box-shadow: $shadow_1;
508
}
509
}
510
/*********
512
* Links *
513
*********/
514
*:link {
516
color: $link_color;
517
&:hover, &:active { color: $link_color; }
518
&:visited {
519
color: $visited_link_color;
520
&:hover, &:active { color: $visited_link_color; }
521
*:selected & { color: mix($inverse_fg_color, $primary_color, 60%); }
522
}
523
&:selected, *:selected & {
524
color: mix($inverse_fg_color, $primary_color, 80%);
525
}
526
}
527
.button:link, .button:visited {
529
@extend *:link;
530
& > .label {
531
text-decoration-line: underline;
532
}
533
}
534
/*****************
536
* GtkSpinButton *
537
*****************/
538
.spinbutton {
540
.button {
541
padding: 4px;
542
border: solid $container_padding transparent;
543
color: $secondary_fg_color;
544
&:hover, &:active { color: $fg_color; }
545
&:insensitive { color: $disabled_secondary_fg_color; }
546
&:active { // add fallback
547
background-color: gtkalpha(currentColor, $lower_opacity);
548
}
549
@extend %image_button;
550
@extend %simple_flat_button;
551
}
552
.osd & {
553
.button {
554
}
555
}
556
&.vertical { //FIXME: try using linking templates for vertically linked stuff
557
.button {
558
padding-top: 10px; // Same vertical padding as image-buttons
559
padding-bottom: 10px; //
560
border: none;
561
&:first-child {
562
border-radius: 2px 2px 0 0;
563
}
564
&:last-child {
565
border-radius: 0 0 2px 2px;
566
}
567
}
568
&.entry {
569
}
570
}
571
GtkTreeView & {
572
&.entry, &.entry:focus {
573
// padding: 1px;
574
// border-width: 1px 0;
575
// border-color: $primary_color;
576
// border-radius: 0;
577
// box-shadow: none;
578
}
579
}
580
}
581
/**************
583
* ComboBoxes *
584
**************/
585
GtkComboBox {
586
> .the-button-in-the-combobox { padding: 5px 6px 6px; } // Otherwise combos
587
// are bigger then
588
// buttons
589
-GtkComboBox-arrow-scaling: 0.5;
590
-GtkComboBox-shadow-type: none;
591
.menu { padding: 2px 0; }
593
.menu .menuitem { padding: 5px 6px 6px; }
594
.separator.vertical {
595
// always disable separators
596
-GtkWidget-wide-separators: true;
597
}
598
&.combobox-entry .entry {
599
&:dir(ltr) {
600
border-top-right-radius: 0;
601
border-bottom-right-radius: 0;
602
}
603
&:dir(rtl) {
604
border-top-left-radius: 0;
605
border-bottom-left-radius: 0;
606
}
607
}
608
&.combobox-entry .button {
609
padding: 10px;
610
&:dir(ltr) {
611
border-top-left-radius: 0;
612
border-bottom-left-radius: 0;
613
}
614
&:dir(rtl) {
615
border-top-right-radius: 0;
616
border-bottom-right-radius: 0;
617
}
618
}
619
}
620
.linked > GtkComboBox > .the-button-in-the-combobox,
622
.linked > GtkComboBoxText > .the-button-in-the-combobox {
623
// the combo is a composite widget so the way we do button linkind doesn't
624
// work, special case needed. See
625
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
626
&:dir(ltr),
627
&:dir(rtl) { @extend %linked_middle; } // specificity bump
628
}
629
.linked > GtkComboBox:first-child > .the-button-in-the-combobox,
630
.linked > GtkComboBoxText:first-child > .the-button-in-the-combobox {
631
@extend %linked:first-child;
632
}
633
.linked > GtkComboBox:last-child > .the-button-in-the-combobox,
634
.linked > GtkComboBoxText:last-child > .the-button-in-the-combobox {
635
@extend %linked:last-child;
636
}
637
.linked > GtkComboBox:only-child > .the-button-in-the-combobox,
638
.linked > GtkComboBoxText:only-child > .the-button-in-the-combobox {
639
@extend %linked:only-child;
640
}
641
.linked.vertical > GtkComboBoxText > .the-button-in-the-combobox,
643
.linked.vertical > GtkComboBox > .the-button-in-the-combobox { @extend %linked_vertical_middle; }
644
.linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox,
645
.linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox { @extend %linked_vertical:first-child; }
646
.linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox,
647
.linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox { @extend %linked_vertical:last-child; }
648
.linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox,
649
.linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox { @extend %linked_vertical:only-child; }
650
/************
652
* Toolbars *
653
************/
654
.toolbar {
655
-GtkWidget-window-dragging: true;
656
padding: 4px;
657
background-color: $bg_color;
658
&:not(.search-bar) .button { @extend %button.flat; }
659
.osd &, &.osd {
660
transition: border-image $shorter_duration $deceleration_curve;
661
padding: $container_padding;
662
border-style: solid;
663
border-width: 8px;
664
border-image: -gtk-scaled(url("assets/box-shadow#{$asset_suffix}.png"),
665
url("assets/box-shadow#{$asset_suffix}@2.png"))
666
10 / 10px stretch;
667
border-radius: 2px;
668
// box-shadow: $shadow_2, inset 0 1px $highlight_color;
669
background-color: $base_color;
670
&:backdrop {
671
border-image: -gtk-scaled(url("assets/box-shadow-backdrop#{$asset_suffix}.png"),
672
url("assets/box-shadow-backdrop#{$asset_suffix}@2.png"))
673
10 / 10px stretch;
674
// box-shadow: $shadow_1, inset 0 1px $highlight_color;
675
}
676
}
677
}
678
//searchbar, location-bar & inline-toolbar
680
.inline-toolbar {
681
padding: $container_padding;
682
border-style: solid;
683
border-width: 0 1px 1px;
684
border-color: $border_color;
685
background-color: $alt_base_color;
686
}
687
.search-bar, .location-bar {
689
padding: $container_padding;
690
border-style: solid;
691
border-width: 0 0 1px;
692
border-color: $border_color;
693
background-color: $bg_color;
694
background-clip: border-box;
695
}
696
/***************
698
* Header bars *
699
***************/
700
.titlebar,
702
.header-bar {
703
transition: background-color $shorter_duration $deceleration_curve;
704
padding: $container_padding;
705
border-radius: 2px 2px 0 0;
706
box-shadow: $shadow_1, inset 0 1px $titlebar_highlight_color;
707
background-color: $titlebar_bg_color;
708
color: $titlebar_fg_color;
709
&:backdrop {
711
color: $secondary_titlebar_fg_color;
712
}
713
.title {
715
transition: $longer_transition;
716
padding-left: 12px;
717
padding-right: 12px;
718
font-weight: bold;
719
}
720
.subtitle {
722
transition: $longer_transition;
723
@extend .dim-label;
724
padding-left: 12px;
725
padding-right: 12px;
726
font-size: smaller;
727
}
728
.header-bar-separator,
730
& > GtkBox > .separator.vertical {
731
-GtkWidget-wide-separators: true;
732
-GtkWidget-separator-width: 1px;
733
border-style: solid;
734
border-width: 0 1px;
735
border-color: $border_color;
736
}
737
& .button:not(.suggested-action):not(.destructive-action) {
739
@extend %button.flat;
740
border-image: -gtk-gradient(radial,
741
center bottom, 0,
742
center bottom, 0.001,
743
to($titlebar_indicator_color),
744
to(transparent))
745
0 0 0 / 0 0 0px;
746
&:checked {
747
border-image: -gtk-gradient(radial,
748
center bottom, 0,
749
center bottom, 0.5,
750
to($titlebar_indicator_color),
751
to(transparent))
752
0 0 2 / 0 0 2px;
753
&, &:insensitive {
754
background-color: transparent;
755
}
756
}
757
}
758
.button.suggested-action, .button.destructive-action {
760
&:insensitive {
761
color: gtkalpha(currentColor, $disabled_opacity);
762
> .label { color: inherit; }
764
}
765
}
766
&.selection-mode {
768
// transition: background-color $shorter_duration $deceleration_curve;
769
box-shadow: $shadow_1, inset 0 1px $alt_highlight_color;
770
background-color: $primary_color;
771
color: $inverse_fg_color;
772
&:backdrop {
773
color: $secondary_inverse_fg_color;
774
}
775
.subtitle:link { @extend *:link:selected; }
777
.button {
779
border-image: -gtk-gradient(radial,
780
center bottom, 0,
781
center bottom, 0.001,
782
to($inverse_fg_color),
783
to(transparent))
784
0 0 0 / 0 0 0px;
785
color: $secondary_inverse_fg_color;
786
&:hover, &:active, &:checked {
787
color: $inverse_fg_color;
788
}
789
&:insensitive {
791
}
792
&:checked {
794
border-image: -gtk-gradient(radial,
795
center bottom, 0,
796
center bottom, 0.5,
797
to($inverse_fg_color),
798
to(transparent))
799
0 0 2 / 0 0 2px;
800
color: $inverse_fg_color;
801
&:insensitive {
802
color: $disabled_inverse_fg_color;
803
> .label { color: inherit; }
804
}
805
}
806
&.suggested-action {
807
// NOTE: do not use @extend .button;
808
@include button(normal);
809
&:hover { @include button(hover); }
810
&:active { @include button(active); }
811
&:insensitive { @include button(insensitive); }
812
}
813
}
814
.selection-menu {
816
padding-left: 16px;
817
padding-right: 16px;
818
GtkArrow { -GtkArrow-arrow-scaling: 1; }
820
.arrow {
822
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
823
}
824
}
825
}
826
.tiled &, .maximized & {
828
border-radius: 0; // squared corners when the window is max'd or tiled
829
box-shadow: none;
830
}
831
&.default-decoration {
833
padding: $container_padding;
834
border-width: 0;
835
.button { padding: 4px; }
836
}
837
}
838
/************
840
* Pathbars *
841
************/
842
.path-bar .button {
844
padding: 7px 6px 8px;
845
// the following is for spacing the icon and the label inside the home button
847
.label:last-child { padding-left: 2px; }
848
.label:first-child { padding-right: 2px; }
849
// .label:only-child { padding-right: 0; padding-left: 0; }
850
GtkImage { padding-top: 1px; }
852
GtkImage:only-child { padding-right: 4px; padding-left: 4px; }
853
}
854
/**************
856
* Tree Views *
857
**************/
858
GtkTreeView.view {
859
-GtkTreeView-grid-line-width: 1;
860
-GtkTreeView-grid-line-pattern: '';
861
-GtkTreeView-tree-line-width: 1;
862
-GtkTreeView-tree-line-pattern: '';
863
-GtkTreeView-expander-size: 16;
864
border-left-color: $fill_color; // this is actually the tree lines color,
866
border-top-color: $border_color; // while this is the grid lines color, better then nothing
867
&.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props
869
border-radius: 0; // rest border radius in lists
871
&:hover, &:active, &:selected { border-radius: 0; }
873
&.dnd {
875
border-style: solid none;
876
border-width: 1px;
877
border-color: mix($fg_color, $primary_color, 50%);
878
}
879
&.expander {
881
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
882
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
883
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
884
&:selected {
885
color: scale-alpha($inverse_fg_color, $secondary_opacity);
886
&:hover, &:active { color: $inverse_fg_color; }
887
}
888
}
889
&.progressbar { // progress bar in treeviews
891
@extend .entry.progressbar;
892
border-width: 4px;
893
&:selected {
894
border-color: currentColor;
895
}
896
}
897
&.trough { // progress bar trough in treeviews
899
@extend .entry.progressbar;
900
border-width: 4px;
901
border-color: scale-alpha($primary_color, $lower_opacity);
902
&:selected {
903
border-color: $fill_color;
904
}
905
}
906
}
907
column-header {
909
.button {
910
@extend .list-row.activatable;
911
padding: 3px 6px 4px;
912
border-style: none solid solid none;
913
border-width: 1px;
914
border-color: $border_color;
915
border-radius: 0;
916
box-shadow: none;
917
background-color: $base_color;
918
// font-weight: bold;
919
&:hover, &:active {
920
box-shadow: none;
921
}
922
&:insensitive {
923
background-color: $base_color;
924
}
925
&.dnd {
926
@extend column-header.button.dnd;
927
}
928
}
929
&:last-child .button,
930
&:last-child.button { //treeview-like derived widgets in Banshee and Evolution
931
border-right-style: none;
932
}
933
}
934
column-header.button.dnd { // for treeview-like derive widgets
936
border-left-style: solid;
937
background-clip: $extra_background_clip;
938
color: $primary_color;
939
}
940
/*********
943
* Menus *
944
*********/
945
.menubar {
946
-GtkWidget-window-dragging: true;
947
padding: 0;
948
// box-shadow: inset 0 -1px $border_color;
949
background-color: $titlebar_bg_color;
950
& > .menuitem {
951
transition: $shorter_transition;
952
padding: 4px 8px;
953
color: $secondary_titlebar_fg_color;
954
&:hover { //Seems like it :hover even with keyboard focus
955
transition: none;
956
background-color: gtkalpha(currentColor, $lower_opacity / 2);
957
color: $titlebar_fg_color;
958
}
959
&:insensitive {
960
color: $disabled_secondary_titlebar_fg_color;
961
box-shadow: none;
962
}
963
}
964
}
965
.menu {
967
margin: 4px 0;
968
padding: 4px 0;
969
box-shadow: inset 0 1px $highlight_color;
970
background-color: $base_color;
971
border: 1px solid $border_color; // adds borders in a non composited env
972
.csd & {
973
border: none; // axes borders in a composited env
974
border-radius: 2px;
975
}
976
.menuitem {
977
transition: $shorter_transition;
978
padding: 3px 4px 4px;
979
font: initial;
980
text-shadow: none;
981
&:hover {
982
transition: none;
983
background-color: gtkalpha(currentColor, $lower_opacity / 2);
984
}
985
&:insensitive {
986
color: $disabled_fg_color;
987
}
988
//submenu indicators
989
&.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
990
&.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); }
991
}
992
&.button { // overlow buttons
993
border-style: none;
994
border-radius: 0;
995
box-shadow: none;
996
&.top { border-bottom: 1px solid $border_color; }
997
&.bottom { border-top: 1px solid $border_color; }
998
&:hover { background-color: gtkalpha(currentColor, $lower_opacity / 2); }
999
&:insensitive {
1000
background-color: transparent;
1001
border-color: transparent;
1002
}
1003
}
1004
}
1005
.menuitem .accelerator { color: gtkalpha(currentColor, $tertiary_opacity); }
1007
.csd.popup { border-radius: 2px; }
1009
/***************
1012
* Popovers *
1013
***************/
1014
.popover {
1016
transition: $shadow_transition;
1017
padding: 2px;
1018
border: 1px solid;
1019
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
1020
border-radius: 2px + 1px;
1021
background-color: $lighter_bg_color;
1022
box-shadow: $shadow_2; // TODO: this should really have a highlight
1023
&:backdrop { box-shadow: $shadow_1; }
1024
> .list,
1026
> .view,
1027
> .toolbar,
1028
&.osd > .toolbar {
1029
border-style: none;
1030
border-image: none;
1031
background-color: transparent;
1032
}
1033
.button.flat {
1035
padding: 5px 8px 6px;
1036
background-color: transparent;
1037
background-size: (128px / 0.8) (128px / 0.8), auto;
1038
color: $fg_color;
1039
font: initial;
1040
}
1041
.linked > .button {
1043
border-radius: 2px;
1044
@extend %simple_flat_button;
1045
&:checked {
1046
background-color: $primary_color;
1047
color: $inverse_fg_color;
1048
}
1049
&.image-button {
1050
padding: 8px;
1051
background-size: ($medium_size * 2 / 0.8) ($medium_size * 2 / 0.8), auto;
1052
}
1053
}
1054
&.osd { @extend %osd; }
1056
}
1057
/*****************
1059
* Notebooks and *
1060
* Tabs *
1061
*****************/
1062
.notebook {
1064
// Through me you go to the grief wracked city;
1065
// Through me you go to everlasting pain;
1066
// Through me you go a pass among lost souls.
1067
// ...
1068
// Abandon all hope — Ye Who Enter Here
1069
padding: 0;
1070
background-color: $base_color;
1071
-GtkNotebook-initial-gap: 8;
1072
-GtkNotebook-arrow-spacing: 5;
1073
-GtkNotebook-tab-curvature: 0;
1074
-GtkNotebook-tab-overlap: 1;
1075
-GtkNotebook-has-tab-gap: false;
1076
-GtkWidget-focus-padding: 0;
1077
-GtkWidget-focus-line-width: 0;
1078
&.frame {
1079
border: 1px solid $border_color;
1080
// FIXME doesn't work
1081
&.top { border-top-width: 0; }
1082
&.bottom { border-bottom-width: 0; }
1083
&.right { border-right-width: 0; }
1084
&.left { border-left-width: 0; }
1085
}
1086
&.header {
1087
// FIXME: double borders in some case, can't fix it w/o a class tho
1088
// FIXME: doesn't work on dark var
1089
background-color: $bg_color;
1090
// this is the shading of the header behind the tabs
1092
&.frame {
1093
border: 1px solid $border_color;
1094
&.top { border-bottom-width: 0; }
1095
&.bottom { border-top-width: 0; }
1096
&.right { border-left-width: 0; }
1097
&.left { border-right-width: 0; }
1098
}
1099
&.top {
1101
box-shadow: inset 0 -1px $border_color; // border
1102
}
1103
&.bottom {
1104
box-shadow: inset 0 1px $border_color;
1105
}
1106
&.right {
1107
box-shadow: inset 1px 0 $border_color;
1108
}
1109
&.left {
1110
box-shadow: inset -1px 0 $border_color;
1111
}
1112
}
1113
tab {
1114
border-width: 0;
1115
border-style: solid;
1116
border-color: transparent;
1117
background-color: transparent;
1118
outline-offset: 0;
1120
$tab_indicator_size: 2px;
1122
// vertical tab sizing
1123
$vt_vpadding: 8px;
1124
$vt_hpadding: 12px;
1125
// horizontal tab sizing
1126
$ht_vpadding: 8px;
1127
$ht_hpadding: 12px;
1128
//FIXME: we get double border in some cases, not considering the broken
1130
//notebook content frame...
1131
&.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
1132
&.left, &.right { padding: $ht_vpadding $ht_hpadding; }
1133
/* works for testnotebookdnd, but there's a superfluous border
1136
in gedit or web, commented out for now, needs gtk fixes
1137
&.reorderable-page {
1138
&.top {
1139
padding-top: ($vt_vpadding - 1px);
1140
border-top-width: 1px;
1141
border-left-width: 1px;
1142
border-right-width: 1px;
1143
}
1144
&.bottom {
1145
padding-bottom: ($vt_vpadding - 1px);
1146
border-bottom-width: 1px;
1147
border-left-width: 1px;
1148
border-right-width: 1px;
1149
}
1150
&.left {
1151
padding-left: ($ht_hpadding - 1px);
1152
border-left-width: 1px;
1153
border-top-width: 1px;
1154
border-bottom-width: 1px;
1155
}
1156
&.right {
1157
padding-right: ($ht_hpadding - 1px);
1158
border-right-width: 1px;
1159
border-top-width: 1px;
1160
border-bottom-width: 1px;
1161
}
1162
}
1163
*/
1164
&.reorderable-page {
1165
-GtkNotebook-tab-overlap: 1;
1166
&.top, &.bottom {
1167
padding-left: 12px; // for a nicer close button
1168
padding-right: 12px; // placement
1169
border-left-width: 1px;
1170
border-right-width: 1px;
1171
}
1172
&.left, &.right {
1173
border-bottom-width: 1px;
1174
border-top-width: 1px;
1175
}
1176
}
1177
&.top {
1178
&:hover, &.prelight-page { box-shadow: inset 0 -2px $fill_color; }
1179
&:active, &.active-page { box-shadow: inset 0 -2px $primary_color; }
1180
}
1181
&.bottom {
1182
&:hover, &.prelight-page { box-shadow: inset 0 2px $fill_color; }
1183
&:active, &.active-page { box-shadow: inset 0 2px $primary_color; }
1184
}
1185
&.left {
1186
&:hover, &.prelight-page { box-shadow: inset -2px 0 $fill_color; }
1187
&:active, &.active-page { box-shadow: inset -2px 0 $primary_color; }
1188
}
1189
&.right {
1190
&:hover, &.prelight-page { box-shadow: inset 2px 0 $fill_color; }
1191
&:active, &.active-page { box-shadow: inset 2px 0 $primary_color; }
1192
}
1193
@each $_tab, $_border in (top, bottom),
1194
(bottom, top),
1195
(left, right),
1196
(right, left) {
1197
&.reorderable-page.#{$_tab} {
1198
border-color: transparent;
1199
&:hover, &.prelight-page {
1200
border-color: $border_color;
1201
border-#{$_border}-width: 0;
1202
border-#{$_border}-color: transparent;
1203
background-color: $alt_base_color;
1204
}
1205
&:active, &.active-page {
1206
border-color: $border_color;
1207
border-#{$_border}-width: 0;
1208
border-#{$_border}-color: transparent;
1209
background-color: $base_color;
1210
}
1211
}
1212
}
1213
.label { //tab text
1214
padding: 0 2px; // needed for a nicer focus ring
1215
font-weight: 500;
1216
color: $secondary_fg_color;
1217
}
1218
.prelight-page .label, .label.prelight-page {
1219
// prelight tab text
1220
color: $fg_color;
1221
}
1222
.active-page .label, .label.active-page {
1223
// active tab text
1224
color: $fg_color;
1225
}
1226
.button { //tab close button
1227
padding: 0;
1228
@extend %image_button;
1229
background-size: ($small_size / 0.8) ($small_size / 0.8), auto;
1230
@extend %simple_flat_button;
1231
& > GtkImage { // this is a hack which makes tabs grow
1232
padding: 4px;
1233
}
1234
}
1235
}
1236
&.arrow {
1237
&:not(:hover):not(:active) { color: gtkalpha(currentColor, $secondary_opacity); }
1238
&:insensitive {
1239
color: $disabled_fg_color;
1240
}
1241
}
1242
GtkGrid > .entry {
1243
@extend .entry.flat;
1244
}
1245
}
1246
/**************
1248
* Scrollbars *
1249
**************/
1250
$_slider_margin: 4px;
1252
$_slider_fine_tune_margin: 6px;
1253
.scrollbar {
1255
-GtkRange-slider-width: 8 + $_slider_margin * 2 + 1;
1256
-GtkRange-trough-border: 0;
1257
-GtkScrollbar-has-backward-stepper: false;
1258
-GtkScrollbar-has-forward-stepper: false;
1259
-GtkScrollbar-min-slider-length: 24 + $_slider_margin * 2;
1260
// minimum size for the slider.
1261
// sadly can't be in '.slider'
1262
// where it belongs
1263
-GtkRange-stepper-spacing: 0;
1264
-GtkRange-trough-under-steppers: 1;
1265
.button {
1267
border: none;
1268
}
1269
&.overlay-indicator {
1271
&:not(.dragging):not(.hovering) { // Overlay scrolling indicator
1272
-GtkRange-slider-width: 4 + $_slider_margin * 2;
1273
.slider {
1275
margin: $_slider_margin - 1px;
1276
border: 1px solid scale-alpha($base_color, $lower_opacity);
1277
// background-clip: padding-box;
1278
}
1279
.trough {
1281
border-style: none;
1282
background-color: transparent;
1283
}
1284
}
1286
&.dragging,
1288
&.hovering {
1289
.trough {
1290
background-color: scale-alpha($base_color, $higher_opacity);
1291
}
1292
}
1293
}
1294
// trough coloring
1296
.trough {
1297
border: 1px none $border_color;
1298
background-color: $base_color;
1299
background-clip: $extra_background_clip;
1300
}
1301
// slider coloring
1303
.slider {
1304
background-color: $tertiary_fg_color;
1305
&:hover { background-color: $secondary_fg_color; }
1306
&:active { background-color: $fg_color; }
1307
&:insensitive {
1308
opacity: $disabled_opacity;
1309
}
1310
}
1311
// sizing
1314
.slider {
1315
border-radius: 100px;
1316
margin: $_slider_margin;
1317
}
1318
&.fine-tune .slider { margin: $_slider_fine_tune_margin; }
1320
&.vertical {
1322
.slider {
1324
margin-left: 1px + $_slider_margin;
1325
&:dir(rtl) {
1327
margin-left: $_slider_margin;
1328
margin-right: 1px + $_slider_margin;
1329
}
1330
}
1331
&.fine-tune .slider {
1333
margin-left: 1px + $_slider_fine_tune_margin;
1334
&:dir(rtl) {
1336
margin-left: $_slider_fine_tune_margin;
1337
margin-right: 1px + $_slider_fine_tune_margin;
1338
}
1339
}
1340
.trough {
1342
border-left-style: solid;
1343
&:dir(rtl) {
1345
border-left-style: none;
1346
border-right-style: solid;
1347
}
1348
}
1349
}
1350
&.horizontal {
1352
.slider { margin-top: 1px + $_slider_margin; }
1354
&.fine-tune .slider { margin-top: 1px + $_slider_fine_tune_margin; }
1356
.trough { border-top-style: solid; }
1358
}
1359
}
1360
.scrollbars-junction,
1362
.scrollbars-junction.frame { // the small square between two scrollbars
1363
border-style: solid none none solid;
1364
background-color: $base_color;
1365
&:dir(rtl) { border-style: solid solid none none; }
1367
}
1368
/**********
1371
* Switch *
1372
**********/
1373
GtkSwitch {
1375
-GtkSwitch-slider-width: $small_size;
1376
-GtkSwitch-slider-height: $small_size;
1377
outline-offset: -4px;
1379
outline-radius: 100px;
1380
font-size: 0;
1381
&.trough {
1382
// similar to the .scale
1383
border: 8px solid transparent;
1384
border-radius: 100px;
1385
background-color: $fill_color;
1386
// background-clip: padding-box;
1387
&:insensitive {
1388
color: gtkalpha(currentColor, $disabled_opacity);
1389
}
1390
&:active {
1391
background-color: scale-alpha($accent_color, 0.5);
1392
&:insensitive {
1393
background-color: scale-alpha($accent_color, 0.5 * $disabled_opacity);
1394
}
1395
}
1396
}
1397
&.slider {
1398
padding: 4px;
1399
border-radius: 100px;
1400
@include entry(normal);
1401
&:hover { @include entry(focus); }
1402
&:active { background-color: $accent_color; }
1403
&:insensitive { @include entry(insensitive); }
1404
}
1405
.list-row:selected & {
1406
}
1407
}
1409
/*************************
1411
* Check and Radio items *
1412
*************************/
1413
// draw regular check and radio items using our PNG assets
1415
// all assets are rendered from assets.svg. never add pngs directly
1416
@each $w,$a in ('check', 'checkbox'),
1418
('radio', 'radio') {
1419
//standard checks and radios
1421
@each $s,$as in ('', '-unchecked'),
1422
(':hover', '-unchecked-hover'),
1423
(':active', '-unchecked-active'),
1424
(':insensitive', '-unchecked-disabled'),
1425
(':inconsistent', '-mixed'),
1426
(':inconsistent:hover', '-mixed-hover'),
1427
(':inconsistent:active', '-mixed-active'),
1428
(':inconsistent:insensitive', '-mixed-disabled'),
1429
(':checked', '-checked'),
1430
(':checked:hover', '-checked-hover'),
1431
(':checked:active', '-checked-active'),
1432
(':checked:insensitive', '-checked-disabled') {
1433
.#{$w}#{$s} {
1434
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
1435
url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
1436
&.button.flat {}
1437
}
1438
}
1439
//menu
1441
@each $s,$as in ('', '-unchecked'),
1442
(':insensitive', '-unchecked-disabled'),
1443
(':inconsistent', '-mixed'),
1444
(':inconsistent:insensitive', '-mixed-disabled'),
1445
(':checked', '-checked'),
1446
(':checked:insensitive', '-checked-disabled') {
1447
.menu .menuitem.#{$w}#{$s} {
1448
// color: gtkalpha(currentColor, $tertiary_opacity);
1449
// -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic');
1450
// &:active, &:checked { -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic'); }
1451
// &:inconsistent { -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic'); }
1452
-gtk-icon-source: -gtk-scaled(url("assets/menu-#{$a}#{$as}#{$asset_suffix}.png"),
1453
url("assets/menu-#{$a}#{$as}#{$asset_suffix}@2.png"));
1454
}
1455
}
1456
}
1457
//treeview and list-rows
1459
.view.check, .view.radio,
1460
.list-row .check, list-row .radio {
1461
}
1462
//selection-mode
1464
@each $s,$as in ('', '-unchecked'),
1465
(':checked', '-checked') {
1466
.view.content-view.check#{$s}:not(.list) {
1467
-gtk-icon-source: -gtk-scaled(url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}.png"),
1468
url("assets/selectionmode-checkbox#{$as}#{$asset_suffix}@2.png"));
1469
background-color: transparent;
1470
icon-shadow: $shadow_1;
1471
&:hover, &:active { icon-shadow: $shadow_2; }
1472
// &:insensitive { icon-shadow: none; }
1473
}
1474
}
1475
GtkCheckButton.text-button, GtkRadioButton.text-button {
1477
// this is for a nice focus on check and radios text
1478
padding: 2px 4px;
1479
outline-offset: 0;
1480
&:insensitive,
1481
&:insensitive:active,
1482
&:insensitive:inconsistent {
1483
// set insensitive color, which is overriden otherwise
1484
// color: $disabled_fg_color;
1485
}
1486
}
1487
/************
1489
* GtkScale *
1490
************/
1491
.scale,
1492
.scale.scale-has-marks-above.scale-has-marks-below,
1493
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
1494
// FIXME: rationalize
1495
-GtkScale-slider-length: 20;
1496
-GtkRange-slider-width: 20;
1497
-GtkRange-trough-border: 2;
1498
outline-offset: -8px;
1499
outline-radius: 100px;
1500
&.fine-tune {
1502
&.slider { background-size: 80%; }
1503
}
1504
&.slider {
1506
// @include entry(normal);
1507
// border-radius: 50%;
1508
// background-color: $accent_color;
1509
@each $s,$as in ('', ''),
1510
(':insensitive', '-disabled') {
1511
&.slider#{$s} {
1512
$_url: 'assets/scale-slider#{$as}#{$asset_suffix}';
1513
border-style: none;
1514
border-radius: 0;
1515
background-color: transparent;
1516
background-image: -gtk-scaled(url('#{$_url}.png'),
1517
url('#{$_url}@2.png'));
1518
background-repeat: no-repeat;
1519
background-position: center;
1520
background-size: 80%;
1521
box-shadow: none;
1522
}
1523
}
1524
&:hover, &:active { background-size: 100%; }
1525
&:hover {
1526
// @include entry(focus);
1527
// border-radius: 50%; // needed for double marks scales
1528
}
1529
&:insensitive {
1530
// @include entry(insensitive);
1531
// border-radius: 50%; // overridden
1532
}
1533
//OSD sliders
1534
.osd & {
1535
}
1536
}
1537
&.trough {
1538
margin: 10px 12px;
1539
background-color: $fill_color;
1540
&.highlight {
1541
background-color: $accent_color;
1542
&:insensitive { background-color: $fill_color; }
1543
}
1544
&:insensitive { color: $disabled_fg_color; }
1545
&.vertical { margin: 12px 10px; }
1546
//OSD troughs
1547
.osd & {
1548
}
1549
}
1550
// marks color
1551
&.separator {
1552
color: $fill_color;
1553
}
1554
// scales on selected list rows
1555
.list-row:selected & {
1556
}
1557
}
1558
@each $d,$dn in ('', 'horz'),
1560
('.vertical', 'vert') {
1561
@each $w,$we in ('scale-has-marks-below', 'marks-after'),
1562
('scale-has-marks-above', 'marks-before') {
1563
.scale#{$d}.#{$w} {
1564
-GtkScale-slider-length: 20;
1565
-GtkRange-slider-width: 25;
1566
-GtkRange-trough-border: 2;
1567
@extend %#{$we}-#{$dn};
1569
@each $s,$as in ('', ''),
1571
(':insensitive', '-disabled') {
1572
&.slider#{$s} {
1573
$_url: 'assets/scale-#{$dn}-#{$we}-slider#{$as}#{$asset_suffix}';
1574
border-style: none;
1575
border-radius: 0;
1576
background-color: transparent;
1577
background-image: -gtk-scaled(url('#{$_url}.png'),
1578
url('#{$_url}@2.png'));
1579
background-repeat: no-repeat;
1580
background-position: center;
1581
box-shadow: none;
1582
}
1583
}
1584
}
1585
}
1586
}
1587
%marks-before-horz {
1589
.trough { margin: 15px 12px 10px; }
1590
}
1591
%marks-after-horz {
1592
.trough { margin: 10px 12px 15px; }
1593
}
1594
%marks-before-vert {
1595
.trough { margin: 12px 10px 12px 15px; }
1596
}
1597
%marks-after-vert {
1598
.trough { margin: 12px 15px 12px 10px; }
1599
}
1600
/*****************
1602
* Progress bars *
1603
*****************/
1604
GtkProgressBar {
1606
-GtkProgressBar-min-horizontal-bar-height: 4;
1607
-GtkProgressBar-min-vertical-bar-width: 4;
1608
padding: 0;
1609
font-size: smaller;
1610
color: $tertiary_fg_color;
1611
&.osd {
1612
-GtkProgressBar-xspacing: 0;
1613
-GtkProgressBar-yspacing: 0;
1614
-GtkProgressBar-min-horizontal-bar-height: 4;
1615
}
1616
&.trough { // background
1617
border-radius: 0;
1618
background-color: scale-alpha($primary_color, $lower_opacity);
1619
&.osd {
1620
border-style: none;
1621
box-shadow: none;
1622
// background-color: transparent;
1623
}
1624
}
1625
}
1626
// moving bit
1628
.progressbar {
1629
border-radius: 0;
1630
background-color: $primary_color;
1631
&.left {
1632
border-top-left-radius: 0;
1633
border-bottom-left-radius: 0;
1634
}
1635
&.right {
1636
border-top-right-radius: 0;
1637
border-bottom-right-radius: 0;
1638
}
1639
&.left.right {
1640
box-shadow: none;
1641
}
1642
&.vertical {
1643
&.bottom {
1644
border-bottom-left-radius: 0;
1645
border-bottom-right-radius: 0;
1646
box-shadow: none;
1647
}
1648
&.top {
1649
border-top-left-radius: 0;
1650
border-top-right-radius: 0;
1651
}
1652
}
1653
&.osd {
1654
background-image: none;
1655
background-color: $primary_color;
1656
border-style: none;
1657
border-radius: 0;
1658
}
1659
}
1660
/*************
1663
* Level Bar *
1664
*************/
1665
.level-bar {
1667
box-shadow: $shadow_1; // needs to be set here to avoid clipping
1668
color: $disabled_fg_color;
1669
-GtkLevelBar-min-block-width: 36;
1670
-GtkLevelBar-min-block-height: 4;
1671
&.vertical {
1672
-GtkLevelBar-min-block-width: 4;
1673
-GtkLevelBar-min-block-height: 36;
1674
}
1675
&.trough {
1676
padding: 2px;
1677
border-radius: 2px;
1678
@include entry(normal);
1679
&:insensitive { @include entry(insensitive); }
1680
&.indicator-discrete {
1681
&.horizontal { padding: 2px 1px; }
1682
&.vertical { padding: 1px 2px; }
1683
}
1684
}
1685
&.fill-block {
1686
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
1687
// :nth-child working on discrete indicators
1688
background-color: $primary_color;
1689
border-radius: 0;
1690
box-shadow: none;
1691
&.indicator-discrete {
1692
&.horizontal { margin: 0 1px; }
1693
&.vertical { margin: 1px 0; }
1694
}
1695
&.level-high {
1696
background-color: $success_color;
1697
}
1698
&.level-low {
1699
background-color: $warning_color;
1700
}
1701
&.empty-fill-block {
1702
background-color: $fill_color;
1703
}
1704
}
1705
}
1706
/**********
1709
* Frames *
1710
**********/
1711
.frame {
1712
border: 1px solid $border_color;
1713
&.flat { border-style: none; }
1714
padding: 0;
1715
&.action-bar {
1716
padding: $container_padding;
1717
border-width: 1px 0 0;
1718
.button:not(.suggested-action):not(.destructive-action) { @extend %button.flat; }
1719
}
1720
}
1721
GtkScrolledWindow {
1723
GtkViewport.frame { // avoid double borders when viewport inside
1724
// scrolled window
1725
border-style: none;
1726
}
1727
}
1728
//vbox and hbox separators
1730
.separator {
1731
// always disable separators
1732
// -GtkWidget-wide-separators: true;
1733
color: $border_color;
1734
// Font and File button separators
1736
GtkFileChooserButton &.vertical,
1737
GtkFontButton &.vertical {
1738
// always disable separators
1739
-GtkWidget-wide-separators: true;
1740
}
1741
}
1742
/*********
1744
* Lists *
1745
*********/
1746
.list {
1748
border-color: $border_color;
1749
background-color: $base_color;
1750
}
1751
.list-row,
1753
.grid-child {
1754
padding: 2px;
1755
}
1756
// FIXME
1758
$row_transition: $longer_transition, background-color 0, color 0;
1759
.list-row.activatable {
1761
transition: $row_transition;
1762
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0);
1763
background-image: -gtk-gradient(radial,
1764
center center, 0,
1765
center center, 0.5,
1766
to(gtkalpha(currentColor, 0)),
1767
to(transparent)),
1768
linear-gradient(to bottom, gtkalpha(currentColor, 0));
1769
background-repeat: no-repeat;
1770
background-position: center, center;
1771
background-size: (192px / 0.8) (192px / 0.8), auto;
1772
&:hover {
1773
transition: $row_transition, box-shadow 0;
1774
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, 0.05);
1775
}
1776
&:active {
1777
transition: $row_transition, background-image 0;
1778
animation: list_ripple_effect $longer_duration $deceleration_curve forwards;
1779
box-shadow: inset 0 0 0 10000px gtkalpha(currentColor, $lower_opacity / 2);
1780
}
1781
}
1782
.list-row:selected {
1784
@extend %selected_items;
1785
.button {
1786
&:insensitive { color: $disabled_secondary_inverse_fg_color; }
1787
&.flat {
1788
color: $secondary_inverse_fg_color;
1789
&:hover, &:active { color: $inverse_fg_color; }
1790
&:insensitive { color: $disabled_secondary_inverse_fg_color; }
1791
}
1792
}
1793
}
1794
// transition
1796
.list-row {
1797
// &:hover { transition-duration: 0; }
1798
}
1799
/*********************
1802
* App Notifications *
1803
*********************/
1804
.app-notification,
1806
.app-notification.frame {
1807
@extend %osd;
1808
@extend .toolbar.osd;
1809
.button { @extend %button.flat; }
1810
}
1811
/*************
1813
* Expanders *
1814
*************/
1815
.expander {
1817
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1818
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
1819
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1820
&:not(:hover):not(:active) { color: gtkalpha(currentColor, $secondary_opacity); }
1821
&:selected { color: $inverse_fg_color; }
1822
}
1823
/************
1825
* Calendar *
1826
***********/
1827
GtkCalendar {
1828
padding: 1px;
1829
border: 1px solid $border_color;
1830
color: $fg_color;
1831
&:insensitive { color: $disabled_fg_color; }
1833
&:selected {
1835
@extend .view:selected;
1836
border-radius: 2px + 1px;
1838
}
1839
&.header {
1841
border-style: none none solid;
1842
border-radius: 0;
1843
}
1844
&.button {
1846
@extend %simple_flat_button;
1847
}
1848
&:inconsistent { color: gtkalpha(currentColor, $disabled_opacity); }
1850
&.highlight {
1851
font-size: smaller;
1852
color: gtkalpha(currentColor, $tertiary_opacity);
1853
}
1854
}
1855
/***********
1857
* Dialogs *
1858
***********/
1859
.message-dialog .dialog-action-area .button {
1861
padding: 8px;
1862
}
1863
.message-dialog { // Message Dialog styling
1865
&.background { background-color: $lighter_bg_color; }
1866
.titlebar {
1867
border-style: none;
1868
box-shadow: inset 0 1px $highlight_color;
1869
background-color: $lighter_bg_color;
1870
}
1871
&.csd { // rounded bottom border styling for csd version
1872
&.background {
1873
// bigger radius for better antialiasing
1874
border-bottom-left-radius: 2px;
1875
border-bottom-right-radius: 2px;
1876
}
1877
.dialog-action-area .button {
1878
@extend %simple_flat_button;
1879
padding: 9px 16px 10px;
1880
border-top: 1px solid $border_color;
1881
border-radius: 0;
1882
background-size: (192px / 0.8) (192px / 0.8), auto;
1883
// &:first-child{ border-bottom-left-radius: 2px; }
1884
// &:last-child { border-bottom-right-radius: 2px; }
1885
&:first-child{ border-radius: 0 0 0 2px; }
1886
&:last-child { border-radius: 0 0 2px 0; }
1887
}
1888
}
1889
}
1890
GtkFileChooserDialog {
1892
.search-bar {
1893
// background-color: $base_color;
1894
// border-color: $bg_color;
1895
}
1896
.dialog-action-box {
1897
border-top: 1px solid $border_color;
1898
}
1899
}
1900
/***********
1902
* Sidebar *
1903
***********/
1904
.sidebar {
1906
border: none;
1907
background-color: $lighter_bg_color;
1908
&:selected {
1910
@extend %selected_items;
1911
}
1912
}
1913
GtkSidebarRow {
1915
// Needs overriding of the GtkListBoxRow padding
1916
&.list-row {
1917
padding: 0px;
1918
}
1919
// Using margins/padding directly in the SidebarRow
1920
// will make the animation of the new bookmark row jump
1921
.sidebar-revealer {
1922
padding: 4px 14px 4px 12px;
1923
}
1924
.sidebar-icon {
1925
opacity: $tertiary_opacity; // dim the device icons
1926
&:dir(ltr) { padding-right: 8px; }
1927
&:dir(rtl) { padding-left: 8px; }
1928
}
1929
.sidebar-label {
1930
&:dir(ltr) { padding-right: 2px; }
1931
&:dir(rtl) { padding-left: 2px; }
1932
}
1933
}
1934
GtkPlacesSidebar.sidebar {
1936
// looks like the label doesn't get all the states so work around
1937
.list-row:selected:insensitive .label { @extend %selected_items:insensitive; }
1938
.sidebar-placeholder-row {
1940
border: solid 1px $primary_color;
1941
}
1942
.sidebar-new-bookmark-row {
1944
color: $accent_color;
1945
}
1946
@at-root .sidebar-button.button { // @at-root needded to not change the specificity making button styling inheritance broken
1948
// so istead of "GtkPlacesSidebar.sidebar .sidebar-button.button" [specificity 0,0,3,1]
1949
// the extended selector ".sidebar-button.button" [specificity 0,0,2,0]
1950
&.image-button { padding: 4px; }
1952
@extend %simple_flat_button;
1954
}
1955
// this is for indicating which sidebar row generated a popover
1956
// see https://bugzilla.gnome.org/show_bug.cgi?id=754411
1957
.has-open-popup { @extend .list-row.activatable:active; }
1958
}
1959
.sidebar-item {
1961
padding: 10px 4px;
1962
> .label {
1963
padding-left: 6px;
1964
padding-right: 6px;
1965
}
1966
&.needs-attention > .label {
1967
@extend %needs_attention;
1968
}
1969
}
1970
/*********
1972
* Paned *
1973
*********/
1974
GtkPaned { // this is for the standard paned separator
1976
-GtkPaned-handle-size: 1; // sets separator width
1978
-gtk-icon-source: none; // removes handle decoration
1980
margin: 0 8px 8px 0; // drag area of the separator, not a real margin
1981
&:dir(rtl) {
1982
margin-right: 0;
1983
margin-left: 8px;
1984
}
1985
.pane-separator {
1986
background-color: $border_color;
1987
}
1988
}
1989
GtkPaned.wide { // this is for the paned with wide separator
1991
-GtkPaned-handle-size: 6; // wider separator here
1992
margin: 0; // no need of the invisible drag area so, reset margin
1993
.pane-separator {
1994
background-color: transparent;
1995
border-style: none solid;
1996
border-color: $border_color;
1997
border-width: 1px;
1998
}
1999
&.vertical .pane-separator { border-style: solid none;}
2000
}
2001
/**************
2004
* GtkInfoBar *
2005
**************/
2006
GtkInfoBar {
2007
border-style: none;
2008
}
2009
.info {
2011
background-color: $info_bg_color;
2012
}
2013
.question {
2015
background-color: $question_bg_color;
2016
}
2017
.warning {
2019
background-color: $warning_bg_color;
2020
}
2021
.error {
2023
background-color: $error_bg_color;
2024
}
2025
.info,
2027
.question,
2028
.warning,
2029
.error {
2030
color: $inverse_fg_color;
2031
.button {
2032
// @extend .list-row:selected.button;
2033
&:insensitive { color: $disabled_secondary_inverse_fg_color; }
2034
}
2035
.label:selected {
2036
}
2037
}
2038
/************
2040
* Tooltips *
2041
************/
2042
.tooltip {
2044
&.background {
2045
// background-color needs to be set this way otherwise it gets drawn twice
2046
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
2047
box-shadow: inset 0 1px $highlight_color;
2048
background-color: scale-alpha($base_color, $higher_opacity);
2049
}
2050
// @extend %osd;
2052
color: $fg_color;
2053
padding: 4px; /* not working */
2054
border-radius: 2px;
2055
box-shadow: none; // otherwise it gets inherited by windowframe.csd
2056
// FIXME: we need a border or tooltips vanish on black background.
2057
&.window-frame.csd {
2058
background-color: transparent;
2059
}
2060
}
2061
.tooltip * { //Yeah this is ugly
2063
padding: 4px;
2064
background-color: transparent;
2065
color: inherit; // just to be sure
2066
}
2067
/*****************
2069
* Color Chooser *
2070
*****************/
2071
GtkColorSwatch {
2073
// This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one
2074
// is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
2075
// is applied to the overlay box.
2076
transition: $shadow_transition;
2078
box-shadow: $shadow_1;
2079
// we need to re-set the shadow here since it get axed by the previous bit
2081
&:selected { }
2082
// base color corners rounding
2084
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
2085
// sports a bigger radius.
2086
// nth-child is needed by the custom color strip.
2087
// The :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
2088
// and GtkColorSwatch.overlay, I know it's weird, but this is gtk+, not a browser.
2089
&.top {
2090
border-top-left-radius: 2px;
2091
border-top-right-radius: 2px;
2092
}
2093
&.bottom {
2094
border-bottom-left-radius: 2px;
2095
border-bottom-right-radius: 2px;
2096
}
2097
&.left, &:first-child:not(.overlay):not(.top) {
2098
border-top-left-radius: 2px;
2099
border-bottom-left-radius: 2px;
2100
}
2101
&.right, &:last-child:not(.overlay):not(.bottom) {
2102
border-top-right-radius: 2px;
2103
border-bottom-right-radius: 2px;
2104
}
2105
&:only-child:not(.overlay) { border-radius: 2px; }
2106
// overlay corner rounding
2108
&.top > .overlay {
2109
border-top-left-radius: 2px;
2110
border-top-right-radius: 2px;
2111
}
2112
&.bottom > .overlay {
2113
border-bottom-left-radius: 2px;
2114
border-bottom-right-radius: 2px;
2115
}
2116
&:first-child:not(.top) > .overlay {
2117
border-top-left-radius: 2px;
2118
border-bottom-left-radius: 2px;
2119
}
2120
&:last-child:not(.bottom) > .overlay {
2121
border-top-right-radius: 2px;
2122
border-bottom-right-radius: 2px;
2123
}
2124
&:only-child > .overlay { border-radius: 2px; }
2125
// hover effect
2127
&:hover { box-shadow: $shadow_2; }
2128
// no hover effect for the colorswatch in the color editor
2130
GtkColorEditor & {
2131
border-radius: 2px; // same radius as the entry
2132
&:hover { box-shadow: $shadow_1; }
2133
}
2134
// indicator and keynav outline colors
2136
&.color-dark {
2137
color: $light_fg_color;
2138
}
2139
&.color-light {
2140
color: $dark_fg_color;
2141
}
2142
// border color
2144
&.overlay,
2145
&.overlay:selected {
2146
}
2147
// make the add color button looks like, well, a button
2149
&#add-color-button {
2150
background-image: linear-gradient(to right,
2151
$error_bg_color 25%,
2152
$warning_bg_color 25%, $warning_bg_color 50%,
2153
$info_bg_color 50%, $info_bg_color 75%,
2154
$question_bg_color 75%);
2155
color: $light_fg_color;
2156
}
2157
}
2158
/********
2161
* Misc *
2162
********/
2163
//content view (grid/list)
2165
.content-view {
2166
background-color: $bg_color;
2167
// &:hover { -gtk-image-effect: highlight; }
2168
&.rubberband { @extend .rubberband; }
2169
}
2170
.scale-popup {
2172
.osd & { @extend %osd; }
2174
.osd & .button.flat { //FIXME: quick hack, redo properly
2176
}
2177
.button { // +/- buttons on GtkVolumeButton popup
2179
padding: 10px;
2180
}
2181
}
2182
GtkScaleButton.button,
2184
GtkVolumeButton.button {
2185
// I assume both are image-button *by default*
2186
// with the image-button/text-button classes automagically applied depending on the button child these selectors can be deleted.
2187
@extend %image_button;
2188
&.text-button { @extend .text-button }
2190
}
2191
/**********************
2193
* Window Decorations *
2194
*********************/
2195
.window-frame {
2197
transition: $shadow_transition;
2198
border-radius: 2px 2px 0 0;
2199
box-shadow: $shadow_4;
2200
// FIXME rationalize window-frame shadows
2202
/* this is used for the resize cursor area */
2204
margin: 8px;
2205
&:backdrop {
2207
box-shadow: $shadow_2;
2208
}
2209
&.tiled {
2210
border-radius: 0;
2211
}
2212
&.popup {
2213
box-shadow: none;
2214
}
2215
// server-side decorations as used by mutter
2216
&.ssd {
2217
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); //just doing borders, wm draws actual shadows
2218
}
2219
&.csd {
2220
&.popup {
2221
border-radius: 2px;
2222
box-shadow: $shadow_2;
2223
}
2224
&.tooltip {
2225
border-radius: 2px;
2226
box-shadow: $shadow_2;
2227
}
2228
&.message-dialog {
2229
border-radius: 2px;
2230
box-shadow: $shadow_4;
2231
&:backdrop { box-shadow: $shadow_2; }
2232
}
2233
}
2234
&.solid-csd {
2235
border-radius: 0;
2236
margin: 4px;
2237
background-color: $warning_color;
2238
// border: solid 1px $border_color;
2239
box-shadow: none;
2240
}
2241
}
2242
// Window Close button
2244
.header-bar .button.titlebutton,
2245
.titlebar .button.titlebutton {
2246
// @extend %simple_flat_button;
2247
@extend %image_button;
2248
&:active { // add fallback
2250
background-image: -gtk-gradient(radial,
2251
center center, 0,
2252
center center, 0.4,
2253
to(gtkalpha(currentColor, $lower_opacity / 2)),
2254
to(transparent)),
2255
linear-gradient(to bottom, gtkalpha(currentColor, $lower_opacity / 2));
2256
}
2257
}
2258
// catch all extend :)
2260
%selected_items {
2262
background-color: $primary_color;
2263
color: $inverse_fg_color;
2264
&:insensitive { color: $disabled_inverse_fg_color; }
2265
}
2266
.monospace {
2268
font: Monospace;
2269
}
2270
/**********************
2272
* Touch Copy & Paste *
2273
*********************/
2274
//touch selection handlebars for the Popover.osd above
2276
.entry.cursor-handle,
2277
.cursor-handle {
2278
background-color: $accent_color;
2279
background-image: none;
2280
box-shadow: none;
2281
border-style: none;
2282
@each $s,$as in ('', ''),
2283
(':hover', '-hover'),
2284
(':active', '-active') { //no need for insensitive and backdrop
2285
&.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
2286
$_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
2287
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2288
url('#{$_url}@2.png'));
2289
padding-left: 10px;
2290
}
2291
&.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
2292
$_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
2293
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2294
url('#{$_url}@2.png'));
2295
padding-right: 10px;
2296
}
2297
&.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
2298
$_url: 'assets/scale-horz-marks-before-slider#{$as}#{$asset_suffix}';
2299
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
2300
url('#{$_url}@2.png'));
2301
}
2302
}
2303
}
2304
/* Decouple the font of context menus from their entry/textview */
2306
.context-menu {
2307
font: initial;
2308
}
2309
.touch-selection {
2311
font: initial;
2312
color: $fg_color;
2313
background-color: $base_color;
2314
box-shadow: $shadow_2;
2315
&:backdrop { box-shadow: $shadow_1; }
2316
.button {
2317
}
2318
}
2319
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
2321
// This draws a box on top of the content, the size changes programmatically.
2322
.overshoot {
2323
&.top {
2324
@include overshoot(top);
2325
}
2326
&.bottom {
2327
@include overshoot(bottom);
2328
}
2329
&.left {
2330
@include overshoot(left);
2331
}
2332
&.right {
2333
@include overshoot(right);
2334
}
2335
}
2336
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
2338
.undershoot {
2339
&.top {
2340
@include undershoot(top);
2341
}
2342
&.bottom {
2344
@include undershoot(bottom);
2345
}
2346
&.left {
2348
@include undershoot(left);
2349
}
2350
&.right {
2352
@include undershoot(right);
2353
}
2354
}
2355