A fork of the Materia GTK theme.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 _libhandy.scss

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