maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pet): превью в гардеробной строго по центру

Browse Source 
Размер стоял на самом <svg> (width:86%), а его родитель #wr-preview-svg —
пустой div без заданной ширины → процент считался от неопределённой ширины
и питомец смещался. Размер задан обёртке (#wr-preview-svg width:82% от сцены),
svg внутри 100%; сцена — flex-центрирование. Парение перенесено на обёртку.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-05 14:20:56 +03:00
parent a6ca3f0327
commit 3760238e05
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pet.html
+4 -3
View File
@@ -333,13 +333,14 @@
.wr-modal-close:hover { background:rgba(255,255,255,.12); color:var(--text); }
.wr-modal-body { display:grid; grid-template-columns:252px 1fr; gap:24px; align-items:start; }
.wr-modal-preview { display:flex; flex-direction:column; align-items:center; gap:11px; position:sticky; top:0; }
.wr-prev-scene { width:100%; aspect-ratio:1; border-radius:20px; display:grid; place-items:center; position:relative; overflow:hidden;
.wr-prev-scene { width:100%; aspect-ratio:1; border-radius:20px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
border:1.5px solid rgba(155,93,229,.18); background:linear-gradient(155deg,#0d0d1f,#1a1040);
box-shadow:inset 0 -34px 58px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04); }
.wr-prev-scene::after { content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse at 50% 94%, rgba(0,0,0,.4), transparent 58%); }
.wr-prev-scene svg { width:86%; height:86%; position:relative; z-index:1; filter:drop-shadow(0 10px 16px rgba(0,0,0,.4));
animation:wrFloat 3.6s ease-in-out infinite; }
#wr-preview-svg { width:82%; position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
animation:wrFloat 3.6s ease-in-out infinite; }
#wr-preview-svg svg { width:100%; height:auto; display:block; filter:drop-shadow(0 9px 15px rgba(0,0,0,.4)); }
@keyframes wrFloat { 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(5px); } }
.wr-prev-name { font-family:'Unbounded',sans-serif; font-weight:800; font-size:1.02rem; }
.wr-prev-evo { font-size:.68rem; font-weight:700; color:var(--text-2); background:rgba(155,93,229,.14);