upd
Browse files
src/lib/components/Piclets/PicletCard.svelte
CHANGED
@@ -24,7 +24,7 @@
|
|
24 |
|
25 |
<button
|
26 |
class="piclet-card"
|
27 |
-
style="width: {size}px; height: {size + 30}px;"
|
28 |
onclick={onClick}
|
29 |
type="button"
|
30 |
>
|
@@ -66,7 +66,7 @@
|
|
66 |
background: white;
|
67 |
border-radius: 12px;
|
68 |
border: 2px solid;
|
69 |
-
border-color:
|
70 |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
71 |
padding: 0;
|
72 |
cursor: pointer;
|
|
|
24 |
|
25 |
<button
|
26 |
class="piclet-card"
|
27 |
+
style="width: {size}px; height: {size + 30}px; --type-color: {typeColor};"
|
28 |
onclick={onClick}
|
29 |
type="button"
|
30 |
>
|
|
|
66 |
background: white;
|
67 |
border-radius: 12px;
|
68 |
border: 2px solid;
|
69 |
+
border-color: var(--type-color, #007bff);
|
70 |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
71 |
padding: 0;
|
72 |
cursor: pointer;
|
src/lib/components/Piclets/PicletDetail.svelte
CHANGED
@@ -4,6 +4,7 @@
|
|
4 |
import { deletePicletInstance } from '$lib/db/piclets';
|
5 |
import { uiStore } from '$lib/stores/ui';
|
6 |
import { downloadPicletCard } from '$lib/services/picletExport';
|
|
|
7 |
|
8 |
interface Props {
|
9 |
instance: PicletInstance;
|
@@ -17,6 +18,11 @@
|
|
17 |
let expandedMoves = $state(new Set<number>());
|
18 |
let isSharing = $state(false);
|
19 |
|
|
|
|
|
|
|
|
|
|
|
20 |
onMount(() => {
|
21 |
uiStore.openDetailPage();
|
22 |
return () => {
|
@@ -73,7 +79,7 @@
|
|
73 |
<div class="content-scroll">
|
74 |
<!-- Header Card -->
|
75 |
<div class="header-card">
|
76 |
-
<div class="card-background">
|
77 |
<!-- Faded Logo Background -->
|
78 |
<div class="logo-background"></div>
|
79 |
|
@@ -119,7 +125,7 @@
|
|
119 |
</div>
|
120 |
|
121 |
<!-- Tab Bar -->
|
122 |
-
<div class="tab-bar">
|
123 |
<button
|
124 |
class="tab-button"
|
125 |
class:active={selectedTab === 'about'}
|
@@ -264,7 +270,7 @@
|
|
264 |
}
|
265 |
|
266 |
.card-background {
|
267 |
-
background: linear-gradient(135deg, #4CAF50 0%, #
|
268 |
padding: 24px;
|
269 |
padding-top: calc(24px + env(safe-area-inset-top, 0));
|
270 |
position: relative;
|
@@ -277,11 +283,11 @@
|
|
277 |
right: 5px;
|
278 |
width: 120px;
|
279 |
height: 120px;
|
280 |
-
background-image:
|
281 |
background-size: contain;
|
282 |
background-repeat: no-repeat;
|
283 |
background-position: center;
|
284 |
-
opacity: 0.
|
285 |
pointer-events: none;
|
286 |
z-index: 1;
|
287 |
}
|
@@ -401,9 +407,9 @@
|
|
401 |
}
|
402 |
|
403 |
.tab-button.active {
|
404 |
-
background: #4CAF50;
|
405 |
color: white;
|
406 |
-
box-shadow: 0 2px 4px
|
407 |
}
|
408 |
|
409 |
/* Tab Content */
|
|
|
4 |
import { deletePicletInstance } from '$lib/db/piclets';
|
5 |
import { uiStore } from '$lib/stores/ui';
|
6 |
import { downloadPicletCard } from '$lib/services/picletExport';
|
7 |
+
import { TYPE_DATA } from '$lib/types/picletTypes';
|
8 |
|
9 |
interface Props {
|
10 |
instance: PicletInstance;
|
|
|
18 |
let expandedMoves = $state(new Set<number>());
|
19 |
let isSharing = $state(false);
|
20 |
|
21 |
+
// Type-based styling
|
22 |
+
const typeData = $derived(TYPE_DATA[instance.primaryType]);
|
23 |
+
const typeColor = $derived(typeData.color);
|
24 |
+
const typeLogoPath = $derived(`/classes/${instance.primaryType}.png`);
|
25 |
+
|
26 |
onMount(() => {
|
27 |
uiStore.openDetailPage();
|
28 |
return () => {
|
|
|
79 |
<div class="content-scroll">
|
80 |
<!-- Header Card -->
|
81 |
<div class="header-card">
|
82 |
+
<div class="card-background" style="--type-color: {typeColor}; --type-logo: url('{typeLogoPath}')">
|
83 |
<!-- Faded Logo Background -->
|
84 |
<div class="logo-background"></div>
|
85 |
|
|
|
125 |
</div>
|
126 |
|
127 |
<!-- Tab Bar -->
|
128 |
+
<div class="tab-bar" style="--type-color: {typeColor}">
|
129 |
<button
|
130 |
class="tab-button"
|
131 |
class:active={selectedTab === 'about'}
|
|
|
270 |
}
|
271 |
|
272 |
.card-background {
|
273 |
+
background: linear-gradient(135deg, var(--type-color, #4CAF50) 0%, color-mix(in srgb, var(--type-color, #4CAF50) 80%, white) 100%);
|
274 |
padding: 24px;
|
275 |
padding-top: calc(24px + env(safe-area-inset-top, 0));
|
276 |
position: relative;
|
|
|
283 |
right: 5px;
|
284 |
width: 120px;
|
285 |
height: 120px;
|
286 |
+
background-image: var(--type-logo);
|
287 |
background-size: contain;
|
288 |
background-repeat: no-repeat;
|
289 |
background-position: center;
|
290 |
+
opacity: 0.15;
|
291 |
pointer-events: none;
|
292 |
z-index: 1;
|
293 |
}
|
|
|
407 |
}
|
408 |
|
409 |
.tab-button.active {
|
410 |
+
background: var(--type-color, #4CAF50);
|
411 |
color: white;
|
412 |
+
box-shadow: 0 2px 4px color-mix(in srgb, var(--type-color, #4CAF50) 30%, transparent);
|
413 |
}
|
414 |
|
415 |
/* Tab Content */
|