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