simpler
Browse files
src/lib/components/Piclets/PicletDetail.svelte
CHANGED
@@ -88,6 +88,7 @@
|
|
88 |
<path d="M19 12H5m0 0l7 7m-7-7l7-7"></path>
|
89 |
</svg>
|
90 |
</button>
|
|
|
91 |
<button
|
92 |
class="share-button"
|
93 |
onclick={handleShare}
|
@@ -104,12 +105,6 @@
|
|
104 |
</button>
|
105 |
</div>
|
106 |
|
107 |
-
<!-- Card Title -->
|
108 |
-
<div class="card-title-section">
|
109 |
-
<h1 class="card-title">{instance.nickname || instance.typeId}</h1>
|
110 |
-
<div class="tier-badge">{instance.tier.toUpperCase()}</div>
|
111 |
-
</div>
|
112 |
-
|
113 |
<!-- Large Image Section -->
|
114 |
<div class="large-image-section">
|
115 |
<div class="large-image-container">
|
@@ -300,6 +295,16 @@
|
|
300 |
z-index: 2;
|
301 |
}
|
302 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
303 |
.back-btn-card {
|
304 |
background: rgba(255, 255, 255, 0.2);
|
305 |
border: none;
|
@@ -372,32 +377,6 @@
|
|
372 |
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
|
373 |
}
|
374 |
|
375 |
-
.card-title-section {
|
376 |
-
display: flex;
|
377 |
-
justify-content: space-between;
|
378 |
-
align-items: center;
|
379 |
-
margin-bottom: 20px;
|
380 |
-
position: relative;
|
381 |
-
z-index: 2;
|
382 |
-
}
|
383 |
-
|
384 |
-
.card-title {
|
385 |
-
margin: 0;
|
386 |
-
font-size: 28px;
|
387 |
-
font-weight: bold;
|
388 |
-
color: white;
|
389 |
-
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
390 |
-
}
|
391 |
-
|
392 |
-
.tier-badge {
|
393 |
-
background: rgba(255, 255, 255, 0.2);
|
394 |
-
color: white;
|
395 |
-
padding: 6px 12px;
|
396 |
-
border-radius: 16px;
|
397 |
-
font-size: 14px;
|
398 |
-
font-weight: 600;
|
399 |
-
backdrop-filter: blur(10px);
|
400 |
-
}
|
401 |
|
402 |
/* Tab Bar */
|
403 |
.tab-bar {
|
|
|
88 |
<path d="M19 12H5m0 0l7 7m-7-7l7-7"></path>
|
89 |
</svg>
|
90 |
</button>
|
91 |
+
<h1 class="card-title">{instance.nickname || instance.typeId}</h1>
|
92 |
<button
|
93 |
class="share-button"
|
94 |
onclick={handleShare}
|
|
|
105 |
</button>
|
106 |
</div>
|
107 |
|
|
|
|
|
|
|
|
|
|
|
|
|
108 |
<!-- Large Image Section -->
|
109 |
<div class="large-image-section">
|
110 |
<div class="large-image-container">
|
|
|
295 |
z-index: 2;
|
296 |
}
|
297 |
|
298 |
+
.card-title {
|
299 |
+
margin: 0;
|
300 |
+
font-size: 24px;
|
301 |
+
font-weight: bold;
|
302 |
+
color: white;
|
303 |
+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
304 |
+
flex: 1;
|
305 |
+
text-align: center;
|
306 |
+
}
|
307 |
+
|
308 |
.back-btn-card {
|
309 |
background: rgba(255, 255, 255, 0.2);
|
310 |
border: none;
|
|
|
377 |
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
|
378 |
}
|
379 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
380 |
|
381 |
/* Tab Bar */
|
382 |
.tab-bar {
|