fmt
Browse files
src/lib/components/Piclets/PicletDetail.svelte
CHANGED
@@ -46,7 +46,8 @@
|
|
46 |
}
|
47 |
</script>
|
48 |
|
49 |
-
<div class="detail-
|
|
|
50 |
<div class="navigation-bar">
|
51 |
<button class="back-btn" onclick={onClose}>
|
52 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
@@ -223,16 +224,32 @@
|
|
223 |
{/if}
|
224 |
</div>
|
225 |
</div>
|
|
|
226 |
</div>
|
227 |
|
228 |
<style>
|
229 |
-
.detail-
|
230 |
position: fixed;
|
231 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
232 |
background: #f2f2f7;
|
233 |
-
z-index:
|
234 |
display: flex;
|
235 |
flex-direction: column;
|
|
|
|
|
236 |
}
|
237 |
|
238 |
/* Navigation Bar */
|
|
|
46 |
}
|
47 |
</script>
|
48 |
|
49 |
+
<div class="detail-backdrop">
|
50 |
+
<div class="detail-page">
|
51 |
<div class="navigation-bar">
|
52 |
<button class="back-btn" onclick={onClose}>
|
53 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
224 |
{/if}
|
225 |
</div>
|
226 |
</div>
|
227 |
+
</div>
|
228 |
</div>
|
229 |
|
230 |
<style>
|
231 |
+
.detail-backdrop {
|
232 |
position: fixed;
|
233 |
+
top: 0;
|
234 |
+
left: 0;
|
235 |
+
right: 0;
|
236 |
+
bottom: 0;
|
237 |
+
z-index: 9998;
|
238 |
+
background: rgba(0, 0, 0, 0.5);
|
239 |
+
}
|
240 |
+
|
241 |
+
.detail-page {
|
242 |
+
position: absolute;
|
243 |
+
top: 0;
|
244 |
+
left: 0;
|
245 |
+
right: 0;
|
246 |
+
bottom: 0;
|
247 |
background: #f2f2f7;
|
248 |
+
z-index: 9999;
|
249 |
display: flex;
|
250 |
flex-direction: column;
|
251 |
+
transform: translateZ(0);
|
252 |
+
-webkit-transform: translateZ(0);
|
253 |
}
|
254 |
|
255 |
/* Navigation Bar */
|