_libhandy.scss
ASCII text
1
/**
2
* libhandy
3
*/
4
5
// Based on:
6
// https://gitlab.gnome.org/GNOME/libhandy/-/tree/master/src/themes
7
8
@use "../../../theme";
9
@use "../../../theme-color";
10
11
// HdyComboRow
12
13
popover.combo {
14
padding: 8px 0;
15
16
list {
17
border-style: none;
18
background-color: transparent;
19
20
> row {
21
min-height: 32px;
22
padding: 0 12px;
23
24
&:not(:last-child) {
25
// border-bottom: 1px solid divider($on-surface);
26
}
27
}
28
}
29
30
@each $border in top, bottom {
31
overshoot.#{$border} {
32
// @include rounded-border($border);
33
}
34
}
35
36
scrollbar.vertical {
37
// padding-top: 2px;
38
// padding-bottom: 2px;
39
40
&:dir(ltr) {
41
// @include rounded-border(right);
42
}
43
44
&:dir(rtl) {
45
// @include rounded-border(left);
46
}
47
}
48
}
49
50
// HdyExpanderRow
51
52
row.expander {
53
// padding: 0;
54
55
image.expander-row-arrow {
56
// @include margin-start(6px);
57
}
58
}
59
60
// HdyKeypad
61
62
keypad {
63
.digit {
64
font-size: 200%;
65
font-weight: bold;
66
}
67
68
.letters {
69
font-size: 70%;
70
}
71
72
.symbol {
73
font-size: 160%;
74
}
75
}
76
77
// HdyViewSwitcher
78
79
viewswitcher {
80
button {
81
margin: 0;
82
padding: 0;
83
border-radius: 0;
84
// font-size: 1rem;
85
86
// View switcher in a header bar
87
headerbar & {
88
}
89
90
// View switcher button
91
> stack > box {
92
&.narrow {
93
// font-size: 0.75rem;
94
// padding-top: 7px;
95
// padding-bottom: 5px;
96
97
image,
98
label {
99
padding-left: 8px;
100
padding-right: 8px;
101
}
102
}
103
104
&.wide {
105
padding: 8px 12px;
106
107
label {
108
&:dir(ltr) {
109
padding-right: 8px;
110
}
111
112
&:dir(rtl) {
113
padding-left: 8px;
114
}
115
}
116
}
117
118
label.active {
119
// font-weight: bold;
120
}
121
}
122
123
&.needs-attention {
124
> stack > box label {
125
// @extend %needs-attention;
126
}
127
128
&:checked > stack > box label {
129
// animation: none;
130
// background-image: none;
131
}
132
}
133
}
134
}
135
136
// HdyViewSwitcherBar
137
138
viewswitcherbar actionbar > revealer > box {
139
// padding: 0;
140
}
141
142
// Content list
143
144
list.content {
145
border: 1px solid theme-color.divider(theme-color.$on-surface);
146
background-clip: padding-box;
147
background-color: theme-color.$surface-z1;
148
149
&,
150
list {
151
// background-color: transparent;
152
}
153
154
// Nested rows background
155
list.nested > row:not(:active) {
156
&:not(:hover):not(:selected),
157
&:hover:not(.activatable):not(:selected) {
158
// background-color: hdymix($bg_color, $base_color, 0.5);
159
}
160
161
&:hover.activatable:not(:selected) {
162
// background-color: hdymix($fg_color, $base_color, 0.95);
163
}
164
}
165
166
> row {
167
// Regular rows and expander header rows background
168
&:not(.expander):not(:active):not(:hover):not(:selected),
169
&:not(.expander):not(:active):hover:not(.activatable):not(:selected),
170
&.expander row.header:not(:active):not(:hover):not(:selected),
171
&.expander row.header:not(:active):hover:not(.activatable):not(:selected) {
172
// background-color: $base_color;
173
}
174
175
&:not(.expander):not(:active):hover.activatable:not(:selected),
176
&.expander row.header:not(:active):hover.activatable:not(:selected) {
177
// background-color: hdymix($fg_color, $base_color, 0.95);
178
}
179
180
&,
181
list > row {
182
// border-color: hdyalpha($borders_color, 0.7);
183
// border-style: solid;
184
// transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
185
}
186
187
// Top border
188
&:not(:first-child) {
189
// border-width: 1px 1px 0;
190
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
191
}
192
193
// Rounded top
194
&:first-child,
195
&.expander:first-child row.header,
196
&.expander:checked,
197
&.expander:checked row.header,
198
&.expander:checked + row,
199
&.expander:checked + row.expander row.header {
200
// @include rounded-border(top);
201
}
202
203
// Bottom border
204
&:last-child,
205
&.checked-expander-row-previous-sibling,
206
&.expander:checked {
207
// border-width: 1px;
208
}
209
210
// Rounded bottom
211
&:last-child,
212
&.checked-expander-row-previous-sibling,
213
&.expander:checked,
214
&.expander:not(:checked):last-child row.header,
215
&.expander:not(:checked).checked-expander-row-previous-sibling row.header,
216
&.expander.empty:checked row.header,
217
&.expander list.nested > row:last-child {
218
// @include rounded-border(bottom);
219
}
220
221
// Add space around expanded rows
222
&.expander:checked:not(:first-child),
223
&.expander:checked + row {
224
// margin-top: 6px;
225
}
226
}
227
}
228
229
// List button
230
231
button.list-button {
232
}
233
234
// Unified window
235
236
window.csd.unified:not(.solid-csd):not(.maximized):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right) {
237
// Remove the sheen on headerbar...
238
headerbar {
239
box-shadow: theme.$shadow-z1;
240
241
&.selection-mode {
242
// box-shadow: $shadow-z1;
243
}
244
}
245
246
// ...and add it on the window itself
247
> decoration-overlay {
248
box-shadow: inset 0 1px theme-color.highlight(theme-color.$titlebar);
249
}
250
251
&,
252
> decoration,
253
> decoration-overlay {
254
border-radius: theme.$corner-radius;
255
}
256
}
257