/* Сцены вкладок (перенос из настольной RPG Studio, F:\RPG_Studio\ui.html). Правила ниже скопированы из ui.html; номера строк исходника — в комментариях. Слой сцены — ОДИН fixed-элемент .tab-scene (pointer-events:none), ничего в потоке страницы (spisok.md п.25). Позиция на ПК — правее бокового меню. */ /* Палитра сцен из токенов темы игры (в ui.html это --bg0..3, --bd1, --acc, --t0..2). */ .tab-scene { --bg0: var(--bg); --bg1: color-mix(in srgb, var(--bg) 92%, var(--text) 8%); --bg2: color-mix(in srgb, var(--bg) 86%, var(--text) 14%); --bg3: color-mix(in srgb, var(--bg) 80%, var(--text) 20%); --bd1: var(--border-strong); --acc: var(--gold); --acch: var(--gold-2); --t0: var(--text); --t1: var(--text-2); --t2: var(--text-3); position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } /* узор — под содержимым (слой стоит в DOM перед .igra-main), колонка декора — над ним, чтобы отзываться на указатель; текст с ней не пересекается (ниже — отступ .igra-main) */ .tab-scene-decor { z-index: 4; } /* выше .igra-main (z-index 3 с 30.09, igra.css) */ .tab-scene[hidden] { display: none; } @media (min-width: 1024px) { .tab-scene { left: var(--nav-lane, var(--nav-w, 272px)); } } /* --- ui.html:1259-1289 (сцены вкладок) --- */ .ts-el { position:absolute; pointer-events:none; } #theme-scene [class*="pk-"], #theme-scene [class*="cp-"], #theme-scene [class*="ft-"], .tab-scene .ts-bob, .tab-scene .ts-sway, .tab-scene .ts-spin, .tab-scene .ts-rise, .tab-scene .ts-conf, .ts-scanln, .mx-col { will-change:transform; } .tab-scene svg.full { position:absolute; inset:0; width:100%; height:100%; } @keyframes ts-sway { 0%,100% { transform:rotate(-4deg); } 50% { transform:rotate(5deg); } } @keyframes ts-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } } @keyframes ts-spin { to { transform:rotate(360deg); } } @keyframes ts-rise { 0% { transform:translateY(0); opacity:0; } 10% { opacity:.9; } 85% { opacity:.7; } 100% { transform:translateY(-55vh); opacity:0; } } @keyframes ts-flap { 0%,100% { transform:scaleX(1); } 50% { transform:scaleX(.55); } } @keyframes ts-flame { 0%,100% { transform:scale(1,1); } 30% { transform:scale(.9,1.14); } 60% { transform:scale(1.08,.88); } } @keyframes ts-conf { 0% { transform:translateY(-5%) rotate(0); opacity:.95; } 100% { transform:translateY(105vh) rotate(340deg); opacity:.6; } } @keyframes ts-dash { to { stroke-dashoffset:-140; } } @keyframes ts-scanln { 0% { transform:translateY(-30px); opacity:0; } 6% { opacity:.9; } 90% { opacity:.9; } 100% { transform:translateY(100vh); opacity:0; } } .ts-sway { transform-origin:50% 100%; animation:ts-sway ease-in-out infinite; } .ts-bob { animation:ts-bob ease-in-out infinite; } .ts-spin { animation:ts-spin linear infinite; } .ts-rise { animation:ts-rise linear infinite; } .ts-flame { transform-box:fill-box; transform-origin:50% 100%; animation:ts-flame .85s ease-in-out infinite; } .ts-conf { animation:ts-conf linear infinite; } .ts-wingL, .ts-wingR { transform-box:fill-box; animation:ts-flap .95s ease-in-out infinite; } .ts-wingL { transform-origin:100% 60%; } .ts-wingR { transform-origin:0% 60%; } .ts-dash { stroke-dasharray:9 8; animation:ts-dash 4s linear infinite; } .ts-scanln { position:absolute; left:6%; right:6%; top:0; height:3px; animation:ts-scanln 4.6s linear infinite; } /* --- ui.html:692-711, 758-781 (кадры, на которые ссылаются сцены) --- */ @keyframes pk-tw { 0%,100% { opacity:.2; transform:scale(.8); } 50% { opacity:1; transform:scale(1.25); } } @keyframes cp-win { 0%,88% { opacity:1; } 92%,96% { opacity:.2; } 100% { opacity:1; } } .cp-sign { animation:cp-sign 7s steps(1) infinite; } .cp-sign.s2 { animation-delay:2.6s; animation-duration:9s; } @keyframes cp-sign { 0%,74% { opacity:1; } 76%,79% { opacity:.25; } 80%,90% { opacity:1; } 91%,93% { opacity:.4; } 94%,100% { opacity:1; } } @keyframes na-grid { to { transform:translateY(44px); } } .na-wire { position:absolute; left:0; right:0; bottom:0; height:52%; } .mx-col { position:absolute; top:0; font-family:Consolas,monospace; font-size:15px; line-height:1.35; color:#26e884; text-shadow:0 0 7px rgba(0,217,110,.7); width:1.05em; word-break:break-all; white-space:normal; animation:mx-fall linear infinite; } @keyframes mx-fall { from { transform:translateY(-105%); } to { transform:translateY(105vh); } } .na-scan { position:absolute; left:0; right:0; height:110px; top:-15%; background:linear-gradient(180deg, transparent, rgba(0,217,110,.07) 45%, rgba(0,217,110,.02) 55%, transparent); animation:na-scan 7s linear infinite; } @keyframes na-scan { to { transform:translateY(130vh); } } .na-hud { position:absolute; width:26px; height:26px; border:2px solid rgba(0,217,110,.4); animation:na-pulse 2.6s ease-in-out infinite; } @keyframes na-pulse { 50% { border-color:rgba(0,217,110,.85); } } .na-tag { position:absolute; font-family:Consolas,monospace; font-size:11px; letter-spacing:1px; color:rgba(61,255,156,.5); } .na-radar { position:absolute; right:18px; bottom:18px; width:96px; height:96px; opacity:.75; } .na-sweep { transform-box:view-box; transform-origin:48px 48px; animation:na-sweep 4s linear infinite; } @keyframes na-sweep { to { transform:rotate(360deg); } } .na-blip { animation:na-blip 2.2s ease-in-out infinite; } .na-blip.b2 { animation-delay:1.1s; } @keyframes na-blip { 0%,100% { opacity:.1; } 25% { opacity:.95; } } /* --- ui.html:1352-1364 (ниша .decor-strip) --- Колонка справа как в оригинале (230px, top/bottom/right); top сдвинут под шапку игры. */ .decor-strip { position: absolute; top: 76px; bottom: 20px; right: 24px; width: 230px; overflow: hidden; } .decor-strip > * { position: absolute; left: 0; right: 0; } .decor-strip > svg { width: 100%; } /* ui.html:1364 скрывал нишу до 1180px; тут — то же: на узких экранах колонка не помещается рядом с текстом */ @media (max-width: 1180px) { .decor-strip { display: none; } } /* --- ui.html:1398-1399, 1409 --- */ .ts-spark { position:absolute; color:#fff; text-shadow:0 0 8px currentColor; animation:pk-tw 2.8s ease-in-out infinite; } .ts-led { animation:cp-win 5s steps(1) infinite; } @media (prefers-reduced-motion: reduce) { #theme-scene *, .tab-scene *, .mw { animation:none !important; } } /* --- ФИЧА 28, ui.html:17097-17221 (стили декора всех тем) --- */ .tab-scene .tdx-card, .tab-scene .tdx-gear{pointer-events:auto;cursor:pointer;} /* ── Персонажи ──────────────────────────────────────────────── */ /* Карточка висит на булавке и слегка качается. Наведение выпрямляет её и приподнимает — так ведёт себя бумажка, к которой потянулись рукой. */ .tab-scene .tdx-card{transform:rotate(var(--rot)); transition:transform .22s ease; animation:tdxNod 7.5s ease-in-out infinite;} @keyframes tdxNod{0%,100%{transform:rotate(var(--rot))} 50%{transform:rotate(calc(var(--rot) + 1.4deg))}} .tab-scene .tdx-card:hover{animation-play-state:paused; transform:rotate(0deg) translateY(-3px);} .tab-scene .tdx-back{opacity:0;transition:opacity .16s ease;} .tab-scene .tdx-card.flip .tdx-back{opacity:1;} .tab-scene .tdx-card.flip .tdx-face{opacity:0;} .tab-scene .tdx-face{transition:opacity .16s ease;} /* ── Миры ───────────────────────────────────────────────────── */ /* Меридианы дышат по фазе — это и есть вращение шара: полуось эллипса меняется как |cos φ|. */ .tab-scene .tdx-mer{animation:tdxMer 16s linear infinite;} @keyframes tdxMer{0%{transform:scaleX(1)}25%{transform:scaleX(.04)} 50%{transform:scaleX(1)}75%{transform:scaleX(.04)}100%{transform:scaleX(1)}} .tab-scene .tdx-mer{transform-box:fill-box;transform-origin:50% 50%;} .tab-scene .tdx-land{transform-box:fill-box;transform-origin:50% 50%; animation:tdxLand 16s linear infinite;} /* Материк уходит за правый край шара и появляется слева — это непрерывное вращение, а не качание. Нулевой кадр при этом валиден: материк стоит посреди видимой стороны. Прежний цикл начинался с края, где все три пятна сжаты в полоски, и в любом снимке глобус выглядел заляпанным. */ @keyframes tdxLand{0%{transform:translateX(0) scaleX(1)} 49%{transform:translateX(74px) scaleX(.12)} 50%{transform:translateX(-74px) scaleX(.12)} 100%{transform:translateX(0) scaleX(1)}} .tab-scene .tdx-pin{transform-box:fill-box;transform-origin:50% 100%; animation:tdxPin 3.4s ease-in-out infinite;} @keyframes tdxPin{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} /* ── Сборки ─────────────────────────────────────────────────── */ .tab-scene .tdx-gear{animation:tdxSpin 10s linear infinite;} @keyframes tdxSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} .tab-scene .tdx-gear.kick{animation-duration:1.6s !important;} .tab-scene .tdx-needle{animation:tdxNeedle 7s ease-in-out infinite;} @keyframes tdxNeedle{0%,100%{transform:rotate(-52deg)} 35%{transform:rotate(28deg)}60%{transform:rotate(-10deg)}} /* -- Мастер ------------------------------------------------- */ .tab-scene .tdx-sw{pointer-events:auto;cursor:pointer;} .tab-scene .tdx-lever{transition:transform .16s ease;transform:rotate(-24deg);} .tab-scene .tdx-sw.on .tdx-lever{transform:rotate(24deg);} .tab-scene .tdx-led{opacity:.25;transition:opacity .16s ease;} .tab-scene .tdx-sw.on .tdx-led{opacity:1;} /* Стрелка индикатора ходит рывками: она отзывается на звук, а не качается маятником. */ .tab-scene .tdx-vu{animation:tdxVu 4.2s ease-in-out infinite;} @keyframes tdxVu{0%{transform:rotate(-46deg)}18%{transform:rotate(12deg)} 30%{transform:rotate(-18deg)}52%{transform:rotate(30deg)} 70%{transform:rotate(-6deg)}100%{transform:rotate(-46deg)}} .tab-scene .tdx-fader{animation:tdxFader 9s ease-in-out infinite;} @keyframes tdxFader{0%,100%{transform:translateX(0)}50%{transform:translateX(56px)}} .tab-scene .tdx-reel{animation:tdxSpin 7s linear infinite;} /* -- Лорбуки ------------------------------------------------ */ .tab-scene .tdx-book{pointer-events:auto;cursor:pointer; transition:transform .2s ease;} .tab-scene .tdx-book:hover{transform:translateY(-8px);} .tab-scene .tdx-book.out{transform:translateY(-14px);} .tab-scene .tdx-ribbon{animation:tdxRibbon 6s ease-in-out infinite;} @keyframes tdxRibbon{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} /* -- Оформление (19.10: акценты темы, вращение круга, мазок, волны звука) ---------------- */ .tab-scene .tdx-swatch{pointer-events:auto;cursor:pointer;transition:transform .35s ease-in-out;} .tab-scene .tdx-wheel{animation:tdxSpin 90s linear infinite;} .tab-scene .tdx-wheel:hover .tdx-swatch{transform:translate(var(--dx),var(--dy));} .tab-scene .tdx-brush{animation:tdxBrush 8s ease-in-out infinite;} @keyframes tdxBrush{0%,100%{transform:rotate(0) translateY(0)} 50%{transform:rotate(-7deg) translateY(-6px)}} .tab-scene .tdx-stroke{stroke-dasharray:200;animation:tdxDraw 7s ease-in-out infinite;} @keyframes tdxDraw{0%{stroke-dashoffset:200}71%,100%{stroke-dashoffset:0}} .tab-scene .tdx-waves{opacity:.5;transition:opacity .4s ease-in-out;} .tab-scene.is-sound .tdx-waves{opacity:1;} .tab-scene .tdx-wv{transform-box:view-box;} .tab-scene.is-sound .tdx-wv{animation:tdxAmp 3.6s ease-in-out infinite;} @keyframes tdxAmp{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.35)}} .tab-scene .tdx-glint{stroke-dasharray:6 94;animation:tdxGlint 4.5s linear infinite;} @keyframes tdxGlint{from{stroke-dashoffset:100}to{stroke-dashoffset:0}} .tab-scene:not(.is-sound) .tdx-glint{opacity:.45;} /* -- Генерация ---------------------------------------------- */ /* Лист выползает и прогресс идёт одним циклом: это одна печать, а не два независимых движения. */ /* Лист начинает цикл ВЫПОЛЗШИМ и уезжает обратно только к концу. Первая версия начинала с translateY(-150px) — то есть с пустого планшета, — и в любой снимок (а заодно в первую секунду у игрока) вкладка попадала без листа вовсе. */ .tab-scene .tdx-sheet{animation:tdxSheet 11s ease-in-out infinite;} @keyframes tdxSheet{0%,58%{transform:translateY(0)} 70%{transform:translateY(-150px)} 84%{transform:translateY(-150px)}100%{transform:translateY(0)}} .tab-scene .tdx-prog{animation:tdxProg 11s ease-in-out infinite;} @keyframes tdxProg{0%,58%{transform:scaleX(1)}70%{transform:scaleX(0)} 84%{transform:scaleX(.15)}100%{transform:scaleX(1)}} .tab-scene .tdx-blink{animation:tdxBlink 1.4s steps(1,end) infinite;} @keyframes tdxBlink{0%,60%{opacity:1}61%,100%{opacity:.2}} .tab-scene .tdx-thumb{animation:tdxThumb 5.5s ease-in-out infinite;} @keyframes tdxThumb{0%,100%{opacity:.5}50%{opacity:1}} /* -- Разработчик -------------------------------------------- */ .tab-scene .tdx-scope{pointer-events:auto;cursor:pointer;} .tab-scene .tdx-wave{opacity:0;transition:opacity .2s ease;} .tab-scene .tdx-scope[data-mode="0"] .w0, .tab-scene .tdx-scope[data-mode="1"] .w1, .tab-scene .tdx-scope[data-mode="2"] .w2{opacity:1;} .tab-scene .tdx-beam{animation:tdxBeam 3.2s linear infinite;} @keyframes tdxBeam{from{transform:translateX(0)}to{transform:translateX(170px)}} .tab-scene .tdx-bar{animation:tdxBar 5.5s ease-in-out infinite;} @keyframes tdxBar{0%,100%{transform:scaleX(.75)}50%{transform:scaleX(1)}} /* Стрелка компаса: затухающие колебания около севера. */ .tab-scene .tdx-nee{animation:tdxNee 9s ease-in-out infinite;} @keyframes tdxNee{0%{transform:rotate(-14deg)}12%{transform:rotate(9deg)} 24%{transform:rotate(-5deg)}36%{transform:rotate(3deg)} 50%,100%{transform:rotate(0deg)}} .tab-scene .tdx-lamp{animation:tdxLamp 6s ease-in-out infinite;} @keyframes tdxLamp{0%,100%{opacity:.08}50%{opacity:.16}} .tab-scene .tdx-cursor{animation:tdxBlink 1.1s steps(1,end) infinite;} html.calm .tab-scene *{animation:none !important;} @media (prefers-reduced-motion:reduce){.tab-scene *{animation:none !important;}} /* ── Фон содержимого на неигровых экранах (Партии-список, Герои и NPC, Миры, Таверна, Магазин, Кабинет, формы): сплошной фон темы во всю область от низа шапки до низа окна и от бокового меню до правого края (на телефоне — от края до края), как фон .main-panel в настольной RPG Studio (ui.html:1314-1352). 3D-задник на этих экранах скрыт (body.igra-flat, см. tabscenes.js); на экране партии (ход) он остаётся. Слой лежит под карточками и под колонкой сцены справа. Узоры — только из ui.html (Летопись, Королевство, Киберпанк, Экшен); у остальных тем в оригинале своего фона нет — тёмный градиент из токенов темы без узора. */ .tab-scene-pat { top: var(--igra-top, 0px); background: radial-gradient(130% 110% at 50% 30%, transparent 55%, color-mix(in srgb, var(--bg) 70%, black) 100%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 86%, var(--text) 14%) 0%, var(--bg) 42%, color-mix(in srgb, var(--bg) 80%, black) 100%); } body.igra-flat .theme-scene-render, body.igra-flat .theme-scrim, body.igra-flat .theme-scene { display: none !important; } /* Королевство: кремовый бисквит с сахарной крошкой, ui.html:1332-1337 */ html[data-theme=pink_kingdom] .tab-scene-pat { background: radial-gradient(rgba(240,72,154,.05) 1.2px, transparent 1.4px) 0 0/24px 24px, linear-gradient(180deg,#fff3f8,#ffe7f1); } /* Киберпанк: печатная плата, ui.html:1339-1344 */ html[data-theme=cyberpunk] .tab-scene-pat { background: url("data:image/svg+xml;utf8,") 0 0/160px 160px, linear-gradient(180deg,#04060d,#0a1226); } /* Экшен: чертёжная сетка с усиленной каждой пятой линией, ui.html:1346-1352 */ html[data-theme=neo_action] .tab-scene-pat { background: linear-gradient(rgba(0,217,110,.09) 1px, transparent 1px) 0 0/140px 140px, linear-gradient(90deg, rgba(0,217,110,.09) 1px, transparent 1px) 0 0/140px 140px, linear-gradient(rgba(0,217,110,.04) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, rgba(0,217,110,.04) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(180deg,#050806,#081209); } /* Летопись: тёплые пятна света и тень по углам БЕЗ шума штукатурки (29.09: фактуры сняты по слову владельца) */ html[data-theme=fantasy] .tab-scene-pat { background: radial-gradient(80% 55% at 22% 8%, rgba(232,205,150,.07), transparent 70%), radial-gradient(70% 60% at 84% 74%, rgba(120,84,40,.10), transparent 72%), linear-gradient(178deg, #1d150c 0%, #150f08 46%, #0e0a05 100%); } html[data-theme=fantasy] .tab-scene-pat::after { content:''; position:absolute; inset:0; background:radial-gradient(150% 130% at 46% 26%, transparent 46%, rgba(0,0,0,.5)); } /* Колонка справа: на ПК контент сдвигается левее неё (не пересекается — колонка лежит над ним) */ @media (min-width: 1181px) { body.has-tabscene .igra-main { padding-right: 312px; } } /* ── Пустые экраны как в ui.html:436-456 + 18040-18090 (.empty-state, .fx-mark, .empty-rule) ── */ .igra-empty-card { border: 1px solid var(--border-strong); gap: 12px; } .igra-empty-ic { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 4px; background: color-mix(in srgb, var(--bg) 86%, var(--text) 14%); border: 1px solid var(--border-strong); color: var(--gold-t); } .igra-empty-rule { width: 120px; height: 1px; border: 0; margin: 2px 0 4px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); } .igra-empty-title { font-size: 1.08rem; font-weight: 600; letter-spacing: .2px; } .igra-empty-text { font-size: .9rem; max-width: 380px; } /* Строка «Остаток чернил» в Кабинете и Магазине: капля + число, читаемо на любом фоне */ .igra-hint.igra-ink-line, .igra-ink-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 8px 14px; border-radius: 999px; font-size: 1rem; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--bg) 82%, var(--gold) 18%); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--bg)); } .igra-ink-line-val { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-t); } .igra-ink-line-val b { font-size: 1.15rem; line-height: 1; font-variant-numeric: lining-nums; font-weight: 700; /* старые цифры шрифта темы садились на 3 px ниже середины плашки (U2-019) */ color: var(--gold-t); } /* Пустая лента Таверны — тот же вид, что у остальных пустых экранов (см. tabscenes.js) */ .igra-shell .tv-notice { border-style: solid; border-width: 1px; border-color: var(--border-strong); gap: 12px; } .igra-shell .tv-notice-title { font-size: 1.08rem; font-weight: 600; letter-spacing: .2px; } .igra-shell .tv-notice-text { font-size: .9rem; max-width: 380px; } #magazinEmpty:not(:empty) { margin-bottom: 16px; } /* ---------- «Витрина» (19.10, Егор: «декорации почти сливаются»): каждый декор вкладки стоит на стеклянной подставке ---------- */ .decor-strip { box-sizing: border-box; border-radius: 22px; border: 1px solid transparent; background: linear-gradient(color-mix(in srgb, var(--bg1) 70%, transparent), color-mix(in srgb, var(--bg1) 70%, transparent)) padding-box, linear-gradient(180deg, var(--acc), transparent) border-box; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: inset 0 0 24px color-mix(in srgb, var(--acc) 15%, transparent); } .decor-strip [data-glow] { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 40%, transparent)); } @media (prefers-reduced-motion: reduce) { .tab-scene .tdx-stroke { stroke-dashoffset: 0; } .tab-scene .tdx-glint { stroke-dasharray: none; opacity: .0; } }