vielle.dev
this repo has no description
colour scheme overhaul
+62
-10
src/components/astral/Powers.astro
+62
-10
src/components/astral/Powers.astro
···
164
164
165
165
<dialog id="info" closedby="any">
166
166
<h2><slot is:inline name="title" /></h2>
167
-
<button id="mode">
167
+
<button
168
+
id="mode"
169
+
title={[
170
+
"Unselect: Remove the power from the power list",
171
+
"Select: Add the power to the power list",
172
+
"Locked: This power cannot be added to the power list",
173
+
"No parent: The parent power for this power has not been selected",
174
+
"No points: You do not have enough points to unlock this power",
175
+
"Dependency: Another power relies on this power being selected",
176
+
].join("\n")}
177
+
>
168
178
<span data-val="unselect">Unselect</span>
169
179
<span data-val="locked">Locked</span>
170
180
<span data-val="select">Select</span>
···
182
192
<style is:inline>
183
193
/* colour mode */
184
194
:host {
185
-
--outline: white;
195
+
--outline: var(--text);
186
196
187
197
&:host(:state(selected)) {
188
-
--outline: green;
198
+
--outline: var(--green);
189
199
}
190
200
191
201
&:host(:state(locked)) {
192
-
--outline: gold;
202
+
--outline: var(--gold);
193
203
}
194
204
195
205
&:host(:state(avaliable)) {
196
-
--outline: red;
206
+
--outline: var(--red);
197
207
}
198
208
199
209
&:host(:state(no-parent)) {
200
-
--outline: maroon;
210
+
--outline: var(--orange);
201
211
}
202
212
203
213
&:host(:state(no-points)) {
204
-
--outline: maroon;
214
+
--outline: var(--orange);
205
215
}
206
216
}
207
217
···
215
225
216
226
/* dialog popup styles */
217
227
dialog {
218
-
max-width: min(60ch, calc(100vw - 10ch));
228
+
width: min(60ch, calc(100vw - 10ch));
219
229
margin: auto;
220
230
231
+
background-color: color-mix(
232
+
in oklab,
233
+
var(--outline) 50%,
234
+
var(--background) 100%
235
+
);
236
+
border: var(--outline-size) solid var(--outline);
237
+
border-radius: 10px;
238
+
221
239
&:open {
222
240
display: grid;
223
241
}
···
237
255
justify-content: center;
238
256
align-items: center;
239
257
258
+
color: inherit;
259
+
background-color: inherit;
260
+
border: calc(var(--outline-size) / 2) solid var(--outline);
261
+
border-radius: inherit;
262
+
263
+
&[disabled],
264
+
&:active {
265
+
opacity: 0.5;
266
+
}
267
+
240
268
* {
241
269
grid-area: cell;
242
270
opacity: 0;
···
286
314
justify-content: start;
287
315
gap: var(--large-gap);
288
316
width: min-content;
317
+
height: calc(
318
+
(
319
+
var(--layer) * var(--image-width-px) + (var(--layer) - 1) *
320
+
var(--large-gap-px)
321
+
) *
322
+
1px
323
+
);
289
324
290
325
--section-width: max(
291
326
calc(
···
313
348
width: var(--outline-size);
314
349
/* offset due to border fucking w things */
315
350
bottom: calc(var(--image-width) - var(--outline-size));
316
-
background-color: var(--outline);
351
+
background: linear-gradient(
352
+
transparent 10%,
353
+
var(--outline) 25% 75%,
354
+
transparent 90%
355
+
);
317
356
318
357
--offset: calc(
319
358
var(--section-width) * (var(--sibling-index) - 1) +
···
352
391
</template>
353
392
354
393
<img slot="img" {...powerData[power].image} />
355
-
<span slot="title">{powerData[power].name}</span>
394
+
<span slot="title">
395
+
<img {...powerData[power].image} /> {powerData[power].name}</span
396
+
>
356
397
<div slot="body">
357
398
<p>{powerData[power].description}</p>
358
399
{
···
386
427
display: grid;
387
428
grid-template-columns: auto 1fr;
388
429
gap: 0.2ch 1ch;
430
+
margin-block-end: 0;
389
431
390
432
dt::after {
391
433
content: ": ";
···
396
438
}
397
439
}
398
440
441
+
p {
442
+
margin-block-start: 0;
443
+
}
444
+
399
445
img {
400
446
display: block;
447
+
}
448
+
449
+
[slot="title"] img {
450
+
height: 2ch;
451
+
border-radius: 100%;
452
+
display: inline-block;
401
453
}
402
454
</style>
+13
src/pages/astral/index.astro
+13
src/pages/astral/index.astro
···
6
6
7
7
<Base title="Astral Powers">
8
8
<style is:inline>
9
+
:root {
10
+
--text: #eceaeb;
11
+
--background: #190d10;
12
+
--green: #06aa79;
13
+
--red: #da4460;
14
+
--orange: #e46937;
15
+
--gold: #d4aa3b;
16
+
--accent: #d13181;
17
+
}
18
+
9
19
dt {
10
20
font-weight: bold;
11
21
}
···
20
30
min-width: 100%;
21
31
width: min-content;
22
32
box-sizing: border-box;
33
+
background-color: var(--background);
34
+
color: var(--text);
35
+
scrollbar-color: var(--text) var(--background);
23
36
}
24
37
25
38
body {