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