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.02 kiB
ASCII text
        
            
1
// based on:
2
// https://gitlab.gnome.org/GNOME/libhandy/-/tree/master/src/themes
3
4
/**
5
* libhandy
6
*/
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