From a6ca3f0327be16ce02dc126c478804353873dd55 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Fri, 5 Jun 2026 14:18:55 +0300 Subject: [PATCH] =?UTF-8?q?style(pet):=20=D1=86=D0=B5=D0=BD=D1=82=D1=80?= =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=BF=D1=80?= =?UTF-8?q?=D0=B5=D0=B2=D1=8C=D1=8E=20=D0=B2=20=D0=B3=D0=B0=D1=80=D0=B4?= =?UTF-8?q?=D0=B5=D1=80=D0=BE=D0=B1=D0=BD=D0=BE=D0=B9=20+=20=D1=81=D0=BE?= =?UTF-8?q?=D0=BB=D0=B8=D0=B4=D0=BD=D0=B5=D0=B5=20=D0=B2=D0=B8=D0=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Превью больше не съезжает вверх: place-items:center + фикс-размер 86% (вместо flex + height:auto). Добавлено мягкое парение питомца, drop-shadow, внутренняя виньетка и фиолетовая рамка сцены; модалка шире, с градиентной шапкой и разделителем; стадия эволюции — в пилюле. Co-Authored-By: Claude Opus 4.8 (1M context) --- frontend/pet.html | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/frontend/pet.html b/frontend/pet.html index 88b81cb..628876b 100644 --- a/frontend/pet.html +++ b/frontend/pet.html @@ -322,21 +322,28 @@ /* ── Гардеробная (модалка) ── */ .wr-modal-overlay { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.66); backdrop-filter:blur(6px); padding:20px; animation:pcFade .2s ease; } - .wr-modal { width:780px; max-width:96vw; max-height:90vh; overflow:auto; background:var(--surface); - border:1.5px solid rgba(155,93,229,.22); border-radius:22px; box-shadow:0 30px 90px rgba(0,0,0,.55); padding:20px 22px 24px; } - .wr-modal-head { display:flex; align-items:center; gap:11px; margin-bottom:18px; } + .wr-modal { width:800px; max-width:96vw; max-height:90vh; overflow:auto; + background:linear-gradient(180deg,rgba(155,93,229,.07),transparent 240px),var(--surface); + border:1.5px solid rgba(155,93,229,.22); border-radius:24px; box-shadow:0 30px 90px rgba(0,0,0,.55); padding:20px 24px 26px; } + .wr-modal-head { display:flex; align-items:center; gap:11px; margin-bottom:18px; padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,.07); } .wr-modal-titles { flex:1; min-width:0; } .wr-modal-close { width:32px; height:32px; border:none; background:rgba(255,255,255,.06); border-radius:9px; color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; } .wr-modal-close svg { width:17px; height:17px; } .wr-modal-close:hover { background:rgba(255,255,255,.12); color:var(--text); } - .wr-modal-body { display:grid; grid-template-columns:236px 1fr; gap:22px; align-items:start; } - .wr-modal-preview { display:flex; flex-direction:column; align-items:center; gap:8px; position:sticky; top:0; } - .wr-prev-scene { width:100%; aspect-ratio:1; border-radius:20px; display:flex; align-items:center; justify-content:center; - overflow:hidden; border:1.5px solid rgba(255,255,255,.08); background:linear-gradient(155deg,#0d0d1f,#1a1040); } - .wr-prev-scene svg { width:74%; height:auto; } - .wr-prev-name { font-family:'Unbounded',sans-serif; font-weight:800; font-size:.95rem; } - .wr-prev-evo { font-size:.7rem; color:var(--text-3); } + .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; + 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; } + @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); + border:1px solid rgba(155,93,229,.25); padding:3px 12px; border-radius:99px; } @media (max-width:640px) { .wr-modal-body { grid-template-columns:1fr; gap:16px; } .wr-modal-preview { position:static; }