aboutsummaryrefslogtreecommitdiff
path: root/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings
diff options
context:
space:
mode:
authorRyan Schanzenbacher <ryan@rschanz.org>2026-07-09 22:15:53 -0400
committerRyan Schanzenbacher <ryan@rschanz.org>2026-07-09 22:15:53 -0400
commitd06784958d73159b5e4abafe5114804662114ed7 (patch)
treed8464262c1aa1f10553a5b11a9fda3e505e71f7f /users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings
parent1a71e94eb8ca1585201263cf654611ef6849d359 (diff)
move ubersicht modules in tree
Diffstat (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings')
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js101
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js83
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js155
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js408
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js170
5 files changed, 917 insertions, 0 deletions
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js
new file mode 100755
index 0000000..fb0dba6
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js
@@ -0,0 +1,101 @@
1export const aerospaceDisplayManagerStyles = /* css */ `
2.aerospace-display-manager {
3 flex: 1 1 100%;
4 position: relative;
5 display: flex;
6 flex-direction: column;
7 gap: 10px;
8 padding: 10px;
9}
10.aerospace-display-manager::before {
11 content: '';
12 position: absolute;
13 top: 0;
14 left: 0;
15 width: 100%;
16 height: 100%;
17 background-color: var(--main-alt);
18 border-radius: var(--item-radius);
19 opacity: 0.1;
20 z-index: -1;
21}
22.aerospace-display-manager__label > em {
23 padding: 2px 3px;
24 font-size: calc(var(--font-size) - 2px);
25 color: var(--foreground);
26 background-color: var(--minor);
27 border-radius: 2px;
28}
29.aerospace-display-manager__displays {
30 display: flex;
31 flex-direction: column;
32 gap: 6px;
33}
34.aerospace-display-manager__display {
35 display: flex;
36 align-items: center;
37 gap: 2px;
38}
39.aerospace-display-manager__display > input {
40 width: 8ch;
41 padding: 2px 4px;
42 box-sizing: border-box;
43 font-family: var(--font);
44 font-size: calc(var(--font-size) * 0.9);
45 background-color: var(--white);
46 border: 0;
47 outline: none;
48 border-radius: 4px;
49 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
50}
51.aerospace-display-manager__display > input:hover {
52 box-shadow: var(--hover-ring);
53}
54.aerospace-display-manager__display > input:focus {
55 box-shadow: var(--focus-ring);
56}
57.aerospace-display-manager__remove-display {
58 padding: 3px 6px;
59 box-sizing: border-box;
60 background-color: var(--red);
61 border-radius: var(--item-radius);
62 border: 0;
63 box-shadow: var(--light-shadow);
64 cursor: pointer;
65 user-select: none;
66 -webkit-user-select: none;
67 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
68}
69.aerospace-display-manager__remove-display:hover {
70 box-shadow: var(--light-shadow), var(--focus-ring);
71}
72.aerospace-display-manager__remove-display > svg {
73 width: 8px;
74 height: 8px;
75 fill: var(--white);
76}
77.aerospace-display-manager__add {
78 width: fit-content;
79 display: flex;
80 align-items: center;
81 padding: 7px 10px;
82 font-family: var(--font);
83 font-size: calc(var(--font-size) * 0.9);
84 background-color: var(--green);
85 border-radius: var(--item-radius);
86 border: 0;
87 box-shadow: var(--light-shadow);
88 cursor: pointer;
89 user-select: none;
90 -webkit-user-select: none;
91 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
92}
93.aerospace-display-manager__add:hover {
94 box-shadow: var(--light-shadow), var(--focus-ring);
95}
96.aerospace-display-manager__add > svg {
97 width: 10px;
98 height: 10px;
99 margin-right: 1ch;
100}
101`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js
new file mode 100755
index 0000000..4064efd
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js
@@ -0,0 +1,83 @@
1export const colorPickerStyles = /* css */ `
2.color-picker {
3 margin-right: 1ch;
4}
5.color-picker__button {
6 width: 20px;
7 height: 20px;
8 border-radius: 50%;
9 border: 0;
10 cursor: pointer;
11}
12.color-picker__colors {
13 position: absolute;
14 top: 0;
15 left: 0;
16 width: 100%;
17 height: 100%;
18 display: flex;
19 align-items: center;
20 justify-content: center;
21 padding-bottom: 35px;
22 box-sizing: border-box;
23 -webkit-backdrop-filter: blur(5px);
24 border-radius: var(--item-radius);
25 z-index: 1;
26}
27.color-picker__colors > button,
28.color-picker__custom-color-preview {
29 width: 20px;
30 height: 20px;
31 margin: 0 10px;
32 border-radius: 50%;
33 border: 0;
34 cursor: pointer;
35 box-shadow: var(--light-shadow);
36}
37.color-picker__custom-color {
38 position: absolute;
39 bottom: 10px;
40 left: 0;
41 width: 100%;
42 height: 25px;
43 display: flex;
44 align-items: center;
45 justify-content: center;
46 z-index: 2;
47 pointer-events: none;
48 touch-action: none;
49}
50.color-picker__custom-color > * {
51 pointer-events: auto;
52 touch-action: auto;
53}
54.color-picker__custom-color-preview {
55 cursor: default;
56}
57input.color-picker__custom-color-input {
58 width: 48ch;
59}
60.color-picker__custom-color-submit {
61 margin-left: 8px;
62 padding: 7px 10px;
63 font-family: var(--font);
64 font-size: calc(var(--font-size) * 0.9);
65 background-color: var(--green);
66 border-radius: var(--item-radius);
67 border: 0;
68 cursor: pointer;
69 user-select: none;
70 -webkit-user-select: none;
71 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
72}
73.color-picker__custom-color-submit:not(:disabled) {
74 box-shadow: var(--light-shadow);
75}
76.color-picker__custom-color-submit:not(:disabled):hover {
77 box-shadow: var(--light-shadow), var(--focus-ring);
78}
79.color-picker__custom-color-submit:disabled {
80 opacity: 0.5;
81 cursor: not-allowed;
82}
83`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js
new file mode 100755
index 0000000..0c853d5
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js
@@ -0,0 +1,155 @@
1export const iconPickerStyles = /* css */ `
2.icon-picker {
3 margin-right: 1ch;
4}
5.icon-picker__button {
6 width: 50px;
7 height: 50px;
8 display: flex;
9 align-items: center;
10 justify-content: center;
11 fill: var(--foreground);
12 background-color: transparent;
13 border: 0;
14 cursor: pointer;
15 user-select: none;
16}
17.icon-picker__button > svg {
18 width: 24px;
19 height: 24px;
20}
21.icon-picker__dropdown {
22 position: absolute;
23 top: 0;
24 left: 0;
25 width: 100%;
26 height: 100%;
27 display: flex;
28 flex-direction: column;
29 -webkit-backdrop-filter: blur(5px);
30 border-radius: var(--item-radius);
31 overflow: hidden;
32 z-index: 1;
33}
34.icon-picker__search {
35 position: relative;
36 padding: 8px;
37 background-color: var(--main-alt);
38 border-bottom: 1px solid var(--foreground-alt);
39 display: flex;
40 align-items: center;
41 gap: 12px;
42}
43.icon-picker__back {
44 display: flex;
45 align-items: center;
46 padding: 10px 14px;
47 height: 28px;
48 background-color: var(--background);
49 border: 1px solid var(--foreground-alt);
50 border-radius: var(--item-radius);
51 color: var(--foreground);
52 font-family: var(--font);
53 font-size: 13px;
54 font-weight: 500;
55 cursor: pointer;
56 white-space: nowrap;
57 box-sizing: border-box;
58 transition: color 160ms var(--transition-easing),
59 background-color 160ms var(--transition-easing),
60 box-shadow 160ms var(--transition-easing);
61}
62.icon-picker__back:hover {
63 color: var(--background);
64 background-color: var(--foreground);
65 box-shadow: var(--hover-ring);
66}
67.icon-picker__back > svg {
68 width: 10px;
69 height: 10px;
70 margin-right: 6px;
71 fill: currentColor;
72}
73.icon-picker__search-input {
74 flex: 1;
75 height: 28px;
76 padding: 0 35px 0 14px;
77 border: 1px solid var(--foreground-alt);
78 border-radius: var(--item-radius);
79 background-color: var(--background);
80 color: var(--foreground);
81 font-size: 14px;
82 font-family: var(--font);
83 outline: none;
84 box-sizing: border-box;
85 position: relative;
86 transition: border 160ms var(--transition-easing),
87 box-shadow 160ms var(--transition-easing);
88}
89.icon-picker__search-input:focus {
90 border-color: var(--foreground);
91 box-shadow: var(--focus-ring);
92}
93.icon-picker__search-input::placeholder {
94 color: var(--foreground-alt);
95 opacity: 0.7;
96}
97.icon-picker__search-clear {
98 position: absolute;
99 right: 24px;
100 top: 50%;
101 transform: translateY(-50%);
102 background: none;
103 border: none;
104 color: var(--foreground-alt);
105 cursor: pointer;
106 font-size: 16px;
107 padding: 6px;
108 display: flex;
109 align-items: center;
110 justify-content: center;
111 border-radius: 50%;
112 transition: color 160ms var(--transition-easing),
113 background-color 160ms var(--transition-easing);
114}
115.icon-picker__search-clear:hover {
116 color: var(--foreground);
117 background-color: var(--main-alt);
118}
119.icon-picker__icons {
120 flex: 1;
121 display: flex;
122 align-items: flex-start;
123 justify-content: flex-start;
124 flex-wrap: wrap;
125 padding: 10px;
126 box-sizing: border-box;
127 overflow: auto;
128}
129.icon-picker__icons > button {
130 width: 30px;
131 height: 30px;
132 display: flex;
133 align-items: center;
134 justify-content: center;
135 margin: 5px;
136 border: 0;
137 background-color: var(--main-alt);
138 border-radius: var(--item-radius);
139 box-shadow: var(--light-shadow);
140 cursor: pointer;
141 user-select: none;
142}
143.icon-picker__icons > button > svg {
144 width: 24px;
145 height: 24px;
146 fill: var(--background);
147}
148.icon-picker__no-results {
149 width: 100%;
150 text-align: center;
151 color: var(--foreground-alt);
152 font-style: italic;
153 padding: 20px;
154}
155`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js
new file mode 100755
index 0000000..2fa37b0
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js
@@ -0,0 +1,408 @@
1// Styles for /lib/components/settings/settings.jsx component
2import { userWidgetsCreatorStyles } from "./user-widgets-creator";
3import { aerospaceDisplayManagerStyles } from "./aerospace-display-manager";
4
5export const settingsStyles = /* css */ `
6.settings {
7 z-index: 1;
8}
9.settings__overlay {
10 position: fixed;
11 top: 0;
12 left: 0;
13 width: 100%;
14 height: 100%;
15 z-index: 0;
16}
17.simple-bar--floating .settings__overlay,
18.simple-bar--no-bar-background .settings__overlay {
19 display: none;
20}
21.simple-bar--on-bottom .settings__overlay {
22 top: unset;
23 bottom: 28px;
24}
25.settings__outer {
26 --settings-width: 620px;
27 position: fixed;
28 left: calc(50% - (var(--settings-width) / 2));
29 top: calc(var(--bar-height) + 10px);
30 width: var(--settings-width);
31 display: flex;
32 flex-direction: column;
33 align-items: stretch;
34 padding: 20px;
35 background-color: var(--main);
36 border-radius: var(--item-radius);
37 box-shadow: var(--light-shadow);
38 z-index: 1;
39}
40.simple-bar--floating .settings__outer {
41 top: calc(var(--bar-height) + 20px);
42}
43.simple-bar--on-bottom .settings__outer {
44 top: unset;
45 bottom: calc(var(--bar-height) + 10px);
46}
47.settings__header {
48 display: flex;
49 align-items: center;
50 margin-bottom: 14px;
51 font-size: calc(var(--font-size) * 1.4);
52 font-weight: 700;
53}
54.settings__header-dot {
55 flex: 0 0 12px;
56 width: 12px;
57 height: 12px;
58 border-radius: 50%;
59 margin-right: 9px;
60}
61.settings__header-dot--close {
62 padding: 0;
63 background-color: var(--red);
64 cursor: pointer;
65 user-select: none;
66 border: 0;
67 -webkit-user-select: none;
68}
69.settings__header-dot--disabled {
70 background-color: grey;
71 opacity: 0.3;
72}
73.settings__tabs {
74 width: fit-content;
75 display: flex;
76 gap: 10px;
77 margin-bottom: 10px;
78 padding: 5px;
79 background-color: var(--minor);
80 border-radius: var(--item-radius);
81}
82.settings__tab {
83 flex: 0 0 auto;
84 display: flex;
85 align-items: center;
86 padding: 5px;
87 font-family: var(--font);
88 font-size: var(--font-size);
89 color: var(--foreground);
90 text-align: center;
91 background-color: transparent;
92 border-radius: var(--item-radius);
93 border: 0;
94 outline: none;
95 cursor: pointer;
96 user-select: none;
97 -webkit-user-select: none;
98 transition: color 160ms var(--transition-easing), background-color 160ms var(--transition-easing),
99 box-shadow 160ms var(--transition-easing);
100}
101.settings__tab:hover {
102 box-shadow: var(--hover-ring);
103}
104.settings__tab:active {
105 box-shadow: var(--focus-ring);
106}
107.settings__tab--current {
108 color: var(--background);
109 background-color: var(--foreground);
110}
111.settings__inner {
112 display: flex;
113 align-items: flex-start;
114 flex-wrap: nowrap;
115 overflow: clip;
116}
117.settings__category {
118 flex: 0 0 100%;
119 max-height: 70vh;
120 display: flex;
121 flex-wrap: wrap;
122 gap: 6px;
123 padding: 0 10px 25px 0;
124 box-sizing: border-box;
125 overflow: auto;
126 transition: transform 160ms var(--transition-easing);
127}
128.settings__category::-webkit-scrollbar {
129 width: 5px;
130 height: 5px;
131}
132.settings__category::-webkit-scrollbar-track {
133 background-color: var(--main-alt);
134 opacity: 0.1;
135 border-radius: var(--item-radius);
136}
137.settings__category::-webkit-scrollbar-thumb {
138 background: var(--foreground);
139 border-radius: var(--item-radius);
140}
141.settings__inner-title {
142 flex: 0 0 100%;
143 font-size: calc(var(--font-size) * 1.2);
144 font-weight: 700;
145}
146.settings__item-title {
147 flex: 0 0 100%;
148 margin: 8px 0;
149 font-weight: 700;
150}
151.settings__item,
152.settings__item-option {
153 position: relative;
154 flex: 1 0 32%;
155 display: flex;
156 align-items: center;
157 gap: 4px;
158}
159.settings__item--full-width {
160 flex: 1 1 100%;
161}
162.settings__item--color {
163 flex: 0 0 32%;
164 flex-direction: column;
165 align-items: stretch;
166}
167.settings__item--radio {
168 flex: 0 0 100%;
169 display: flex;
170 flex-wrap: wrap;
171}
172.settings__item--textarea {
173 flex-direction: column;
174 align-items: stretch;
175 padding: 5px;
176}
177.settings__item--color > label,
178.settings__item--full-width.settings__item--text > label,
179.settings__item--full-width.settings__item--textarea > label {
180 flex: 0 0 auto;
181 white-space: nowrap;
182}
183.settings__item--text > input,
184.settings__item--textarea > textarea {
185 flex: 1 1 auto;
186 width: auto;
187 padding: 2px 4px;
188 box-sizing: border-box;
189 font-family: var(--font);
190 font-size: calc(var(--font-size) * 0.9);
191 background-color: var(--white);
192 border: 0;
193 outline: none;
194 border-radius: 4px;
195 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
196}
197.settings__item--textarea > textarea {
198 resize: vertical;
199}
200.settings__item--color > input,
201.settings__item--full-width.settings__item--text > input,
202.settings__item--full-width.settings__item--textarea > textarea {
203 flex: 1 1 100%;
204}
205.settings__item--text > input:hover,
206.settings__item--textarea > textarea:hover {
207 box-shadow: var(--hover-ring);
208}
209.settings__item--text > input:focus,
210.settings__item--textarea > textarea:focus {
211 box-shadow: var(--focus-ring);
212}
213.settings__item--color > input {
214 padding-left: 24px;
215}
216.settings__item-color-pill {
217 position: absolute;
218 bottom: 1px;
219 left: 2px;
220 height: 14px;
221 width: 14px;
222 border-radius: 2px;
223 border: 1px solid gray;
224}
225.settings__item > label > em {
226 padding: 2px 3px;
227 font-size: calc(var(--font-size) - 2px);
228 color: var(--foreground);
229 background-color: var(--minor);
230 border-radius: 2px;
231}
232.settings__documentation {
233 width: 100%;
234 margin-top: 5px;
235 padding: 10px;
236 color: var(--white);
237 background-color: var(--main-alt);
238 font-weight: 700;
239 border-radius: 5px;
240}
241.settings__documentation-icon {
242 display: inline-block;
243 width: 18px;
244 height: 18px;
245 margin-right: 8px;
246 margin-top: -2px;
247 vertical-align: middle;
248 fill: currentColor;
249}
250.settings__documentation a {
251 color: currentColor;
252}
253.settings__infos {
254 width: 100%;
255 margin-top: 5px;
256 padding: 10px;
257 color: var(--foreground);
258 background-color: var(--minor);
259 border-radius: 5px;
260}
261.settings__infos-title {
262 margin-bottom: 7px;
263 font-size: calc(var(--font-size) * 1.1);
264 font-weight: 700;
265}
266.settings__info {
267 font-style: italic;
268}
269.settings__bottom {
270 display: flex;
271 align-items: center;
272 justify-content: flex-end;
273 margin-top: 10px;
274}
275.settings__pending-changes {
276 margin: 0 10px;
277}
278.settings__refresh-button,
279.settings__import-button,
280.settings__export-button {
281 padding: 7px 10px;
282 font-family: var(--font);
283 font-size: calc(var(--font-size) * 0.9);
284 border-radius: var(--item-radius);
285 border: 0;
286 cursor: pointer;
287 user-select: none;
288 -webkit-user-select: none;
289 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
290}
291.settings__import-button,
292.settings__export-button {
293 margin-right: 10px;
294 color: var(--foreground);
295 background-color: var(--minor);
296}
297.settings__export-button {
298 margin-left: 10px;
299}
300.settings__refresh-button {
301 background-color: var(--green);
302}
303.settings__refresh-button:not(:disabled),
304.settings__import-button:not(:disabled),
305.settings__export-button:not(:disabled) {
306 box-shadow: var(--light-shadow);
307}
308.settings__refresh-button:not(:disabled):hover,
309.settings__import-button:not(:disabled):hover,
310.settings__export-button:not(:disabled):hover {
311 box-shadow: var(--light-shadow), var(--focus-ring);
312}
313.settings__refresh-button:disabled,
314.settings__import-button:disabled,
315.settings__export-button:disabled {
316 opacity: 0.5;
317 cursor: not-allowed;
318}
319.settings__import-export-label {
320 margin-right: auto;
321}
322.settings__widgets {
323 width: 100%;
324}
325.settings__widgets-breadcrumb {
326 height: 28px;
327 display: flex;
328 align-items: center;
329 gap: 6px;
330 padding: 2px 0 5px;
331 margin-bottom: 5px;
332}
333.settings__widgets-breadcrumb-title {
334 font-size: calc(var(--font-size) * 1.2);
335 font-weight: 700;
336}
337button.settings__widgets-breadcrumb-title {
338 padding: 0;
339 color: inherit;
340 font-family: inherit;
341 background-color: transparent;
342 text-decoration: underline;
343 cursor: pointer;
344 border: 0;
345}
346.settings__widgets-breadcrumb-current {
347 margin-bottom: -2px;
348}
349.settings__widgets-breadcrumb-back {
350 display: flex;
351 align-items: center;
352 margin-left: auto;
353 padding: 2px 10px;
354 background-color: var(--minor);
355 border: 1px solid var(--foreground-alt);
356 border-radius: var(--item-radius);
357 color: var(--foreground);
358 font-family: var(--font);
359 font-size: 13px;
360 font-weight: 500;
361 cursor: pointer;
362 white-space: nowrap;
363 box-sizing: border-box;
364 transition: color 160ms var(--transition-easing),
365 background-color 160ms var(--transition-easing),
366 box-shadow 160ms var(--transition-easing);
367}
368.settings__widgets-breadcrumb-back:hover {
369 box-shadow: var(--hover-ring);
370}
371.settings__widgets-breadcrumb-back-icon {
372 flex: 0 0 8px;
373 width: 8px;
374 height: 8px;
375 margin-right: 6px;
376 fill: currentColor;
377}
378.settings__widgets-list {
379 display: flex;
380 flex-direction: column;
381 gap: 6px;
382}
383.settings__widgets-item {
384 display: flex;
385 align-items: center;
386 gap: 10px;
387 padding: 10px;
388 background-color: var(--minor);
389 border-radius: var(--item-radius);
390}
391.settings__widgets-item:not(.settings__widgets-item--process) {
392 cursor: pointer;
393}
394.settings__widgets-item-icon {
395 flex: 0 0 10px;
396 width: 10px;
397 height: 10px;
398 margin-left: auto;
399 fill: currentcolor;
400}
401.settings__widget-settings {
402 display: flex;
403 flex-wrap: wrap;
404 gap: 6px;
405}
406${userWidgetsCreatorStyles}
407${aerospaceDisplayManagerStyles}
408`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js
new file mode 100755
index 0000000..417826a
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js
@@ -0,0 +1,170 @@
1import { colorPickerStyles } from "./color-picker";
2import { iconPickerStyles } from "./icon-picker";
3
4export const userWidgetsCreatorStyles = /* css */ `
5 .user-widgets-creator {
6 position: relative;
7 width: 100%;
8 display: flex;
9 flex-direction: column;
10 padding-bottom: 25px;
11 border-radius: var(--item-radius);
12 }
13 .user-widgets-creator__add {
14 position: sticky;
15 bottom: 0;
16 display: flex;
17 align-items: center;
18 margin: 0 auto;
19 padding: 7px 10px;
20 font-family: var(--font);
21 font-size: calc(var(--font-size) * 0.9);
22 background-color: var(--green);
23 border-radius: var(--item-radius);
24 border: 0;
25 box-shadow: var(--light-shadow);
26 cursor: pointer;
27 user-select: none;
28 -webkit-user-select: none;
29 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
30 }
31 .user-widgets-creator__add:hover {
32 box-shadow: var(--light-shadow), var(--focus-ring);
33 }
34 .user-widgets-creator__add > svg {
35 width: 10px;
36 height: 10px;
37 margin-right: 1ch;
38 }
39 .user-widget-creator {
40 position: relative;
41 display: flex;
42 align-items: center;
43 margin-bottom: 15px;
44 padding: 5px;
45 z-index: 0;
46 }
47 .user-widget-creator::before {
48 content: '';
49 position: absolute;
50 top: 0;
51 left: 0;
52 width: 100%;
53 height: 100%;
54 background-color: var(--main-alt);
55 border-radius: var(--item-radius);
56 opacity: 0.1;
57 z-index: -1;
58 }
59 .user-widget-creator__sort-buttons {
60 position: absolute;
61 top: 0;
62 left: 17px;
63 height: 100%;
64 display: flex;
65 flex-direction: column;
66 pointer-events: none;
67 touch-action: none;
68 }
69 .user-widget-creator__sort-button {
70 width: 26px;
71 height: 26px;
72 display: flex;
73 align-items: center;
74 justify-content: center;
75 padding: 0;
76 background-color: transparent;
77 border: 0;
78 cursor: pointer;
79 pointer-events: auto;
80 touch-action: auto;
81 }
82 .user-widget-creator__sort-button--before {
83 margin-bottom: 5px;
84 }
85 .user-widget-creator__sort-button--after {
86 margin-top: auto;
87 }
88 .user-widget-creator__sort-button > svg {
89 width: 22px;
90 height: 22px;
91 fill: var(--foreground);
92 }
93 .user-widget-creator__remove {
94 position: absolute;
95 top: 2px;
96 right: 2px;
97 padding: 5px;
98 background-color: var(--red);
99 border-radius: var(--item-radius);
100 border: 0;
101 box-shadow: var(--light-shadow);
102 cursor: pointer;
103 user-select: none;
104 -webkit-user-select: none;
105 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
106 }
107 .user-widget-creator__remove:hover {
108 box-shadow: var(--light-shadow), var(--focus-ring);
109 }
110 .user-widget-creator__remove > svg {
111 width: 10px;
112 height: 10px;
113 fill: var(--white);
114 }
115 .user-widget-creator__index {
116 position: absolute;
117 top: calc(50% - 40px);
118 left: 20px;
119 }
120 .user-widget-creator__right {
121 flex: 1 1 100%;
122 display: flex;
123 flex-direction: column;
124 }
125 .user-widget-creator__right-top {
126 display: flex;
127 align-items: center;
128 }
129 .user-widget-creator__right-top > label {
130 margin: 0 1ch 0 2ch;
131 }
132 .user-widget-creator__input-group {
133 display: flex;
134 align-items: center;
135 margin: 2px 0;
136 }
137 .user-widget-creator input[type="text"] {
138 width: auto;
139 margin: 3px 0;
140 padding: 2px 4px;
141 box-sizing: border-box;
142 font-family: var(--font);
143 font-size: calc(var(--font-size) * 0.9);
144 border: 0;
145 outline: none;
146 border-radius: 4px;
147 transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
148 }
149 .user-widget-creator input[type="text"]:hover {
150 box-shadow: var(--hover-ring);
151 }
152 .user-widget-creator input[type="text"]:focus {
153 box-shadow: var(--focus-ring);
154 }
155 .user-widget-creator__input-group label {
156 white-space: nowrap;
157 }
158 .user-widget-creator__input-group input[type="text"] {
159 flex: 1 1 100%;
160 margin-left: 1ch;
161 }
162 .user-widget-creator__input-group input[type="checkbox"]:not(:first-child) {
163 margin-left: 16px;
164 }
165 .user-widget-creator__input-group input[type="checkbox"] {
166 margin-right: 6px;
167 }
168 ${colorPickerStyles}
169 ${iconPickerStyles}
170`;
generated by cgit v1.3 (git 2.53.0) at 2026-07-27 01:43:24 +0000