1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
// Color variables dependant on $headerbar_bg_color defined in _colors.scss
$_button_bg_color: lighten($headerbar_bg_color, 7.5%);
$_button_border_color: darken($headerbar_bg_color, 9%);
// deducted from the color used in common which is $backdrop_borders_color: mix($borders_color, $bg_color, 80%);
$_backdrop_button_border_color: darken($inkstone, 9%);
// overwriting the headerbar styling from common, for the inverted look in the ambiance theme
%titlebar,
headerbar {
@include headerbar_fill($headerbar_bg_color);
color: $headerbar_fg_color;
border-color: $borders_color;
.title,
label.title {
color: $headerbar_fg_color;
&:backdrop { color: $backdrop_headerbar_fg_color; }
}
&.backdrop {
}
.maximized &,
.fullscreen & {
box-shadow: none;
}
entry {
&,
&:backdrop {
border-color: darken($headerbar_bg_color, 8%);
}
&:focus { @include entry(focus); }
}
switch {
border-color: $_button_border_color;
color: $headerbar_fg_color;
background-color: $_button_bg_color;
&:checked {
color: $selected_fg_color;
border-color: $_button_border_color;
background-color: $checkradio_bg_color;
}
&:disabled {
color: $insensitive_fg_color;
background-color: $headerbar_bg_color;
border-color: $_button_border_color;
}
&:backdrop {
color: $backdrop_fg_color;
border-color: $backdrop_borders_color;
background-color: lighten($backdrop_headerbar_bg_color, 2%);
&:checked {
color: $selected_fg_color;
border-color: $_button_border_color;
background-color: $checkradio_bg_color;
}
&:disabled {
color: $backdrop_insensitive_color;
background-color: $backdrop_headerbar_bg_color;
border-color: $_backdrop_button_border_color;
}
}
}
switch, scale {
&:checked {
border-color: $checkradio_borders_color;
}
slider {
@include button(normal, $_button_bg_color);
}
&:hover slider {
@include button(hover, $_button_bg_color);
}
&:checked > slider { border-color: $_button_border_color; }
&:disabled slider { @include button(insensitive, darken($headerbar_bg_color, 8%)); }
&:backdrop {
slider {
@include button(backdrop, $_button_bg_color);
}
&, &:checked, &:disabled, &:checked:disabled {
> slider { border-color: darken($_backdrop_button_border_color, 4%); box-shadow: none; }
}
&:checked > slider { border-color: $_button_border_color; }
&:disabled slider { @include button(backdrop-insensitive, $_button_bg_color); }
}
}
// TODO: Test separator
// TODO: Test switches
}
windowcontrols button image {
color: $headerbar_fg_color;
}
window.devel {
headerbar.titlebar {
$c: darken($bg_color, 10%);
$gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
background: $bg_color $gradient;
&:backdrop {
background: $bg_color cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
image($bg_color); /* background-color would flash */
}
}
}
|
