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
165
<dialog id="info" closedby="any">
166
<h2><slot is:inline name="title" /></h2>
167
-
<button id="mode">
168
<span data-val="unselect">Unselect</span>
169
<span data-val="locked">Locked</span>
170
<span data-val="select">Select</span>
···
182
<style is:inline>
183
/* colour mode */
184
:host {
185
-
--outline: white;
186
187
&:host(:state(selected)) {
188
-
--outline: green;
189
}
190
191
&:host(:state(locked)) {
192
-
--outline: gold;
193
}
194
195
&:host(:state(avaliable)) {
196
-
--outline: red;
197
}
198
199
&:host(:state(no-parent)) {
200
-
--outline: maroon;
201
}
202
203
&:host(:state(no-points)) {
204
-
--outline: maroon;
205
}
206
}
207
···
215
216
/* dialog popup styles */
217
dialog {
218
-
max-width: min(60ch, calc(100vw - 10ch));
219
margin: auto;
220
221
&:open {
222
display: grid;
223
}
···
237
justify-content: center;
238
align-items: center;
239
240
* {
241
grid-area: cell;
242
opacity: 0;
···
286
justify-content: start;
287
gap: var(--large-gap);
288
width: min-content;
289
290
--section-width: max(
291
calc(
···
313
width: var(--outline-size);
314
/* offset due to border fucking w things */
315
bottom: calc(var(--image-width) - var(--outline-size));
316
-
background-color: var(--outline);
317
318
--offset: calc(
319
var(--section-width) * (var(--sibling-index) - 1) +
···
352
</template>
353
354
<img slot="img" {...powerData[power].image} />
355
-
<span slot="title">{powerData[power].name}</span>
356
<div slot="body">
357
<p>{powerData[power].description}</p>
358
{
···
386
display: grid;
387
grid-template-columns: auto 1fr;
388
gap: 0.2ch 1ch;
389
390
dt::after {
391
content: ": ";
···
396
}
397
}
398
399
img {
400
display: block;
401
}
402
</style>
···
164
165
<dialog id="info" closedby="any">
166
<h2><slot is:inline name="title" /></h2>
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
+
>
178
<span data-val="unselect">Unselect</span>
179
<span data-val="locked">Locked</span>
180
<span data-val="select">Select</span>
···
192
<style is:inline>
193
/* colour mode */
194
:host {
195
+
--outline: var(--text);
196
197
&:host(:state(selected)) {
198
+
--outline: var(--green);
199
}
200
201
&:host(:state(locked)) {
202
+
--outline: var(--gold);
203
}
204
205
&:host(:state(avaliable)) {
206
+
--outline: var(--red);
207
}
208
209
&:host(:state(no-parent)) {
210
+
--outline: var(--orange);
211
}
212
213
&:host(:state(no-points)) {
214
+
--outline: var(--orange);
215
}
216
}
217
···
225
226
/* dialog popup styles */
227
dialog {
228
+
width: min(60ch, calc(100vw - 10ch));
229
margin: auto;
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
+
239
&:open {
240
display: grid;
241
}
···
255
justify-content: center;
256
align-items: center;
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
+
268
* {
269
grid-area: cell;
270
opacity: 0;
···
314
justify-content: start;
315
gap: var(--large-gap);
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
+
);
324
325
--section-width: max(
326
calc(
···
348
width: var(--outline-size);
349
/* offset due to border fucking w things */
350
bottom: calc(var(--image-width) - var(--outline-size));
351
+
background: linear-gradient(
352
+
transparent 10%,
353
+
var(--outline) 25% 75%,
354
+
transparent 90%
355
+
);
356
357
--offset: calc(
358
var(--section-width) * (var(--sibling-index) - 1) +
···
391
</template>
392
393
<img slot="img" {...powerData[power].image} />
394
+
<span slot="title">
395
+
<img {...powerData[power].image} /> {powerData[power].name}</span
396
+
>
397
<div slot="body">
398
<p>{powerData[power].description}</p>
399
{
···
427
display: grid;
428
grid-template-columns: auto 1fr;
429
gap: 0.2ch 1ch;
430
+
margin-block-end: 0;
431
432
dt::after {
433
content: ": ";
···
438
}
439
}
440
441
+
p {
442
+
margin-block-start: 0;
443
+
}
444
+
445
img {
446
display: block;
447
+
}
448
+
449
+
[slot="title"] img {
450
+
height: 2ch;
451
+
border-radius: 100%;
452
+
display: inline-block;
453
}
454
</style>
+13
src/pages/astral/index.astro
+13
src/pages/astral/index.astro
···
6
7
<Base title="Astral Powers">
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
+
19
dt {
20
font-weight: bold;
21
}
···
30
min-width: 100%;
31
width: min-content;
32
box-sizing: border-box;
33
+
background-color: var(--background);
34
+
color: var(--text);
35
+
scrollbar-color: var(--text) var(--background);
36
}
37
38
body {