:root { --bg: #0d1015; --panel: #141920; --panel2: #1b222b; --panel3: #222b36; --line: #2a333e; --line2: #384454; --text: #e6edf3; --muted: #8b98a5; --accent: #ff8a3d; --accent-ink: #1a0e04; --ok: #3fb950; --warn: #d29922; --err: #f85149; --c-attack: #ff8a3d; --c-block: #4c9aff; --c-evade: #3fb950; --c-hit: #f0605a; --c-other: #8b98a5; --r: 8px; --strip-h: 36vh; --side-w: 350px; /* (strip 46 -> 36vh 2026-10-16, the owner: "the main preview bigger") */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } [hidden] { display: none !important; } .generation-price { margin: 6px 0 2px; padding: 6px 8px; border: 1px solid var(--line2); border-radius: 6px; color: var(--ok); font-size: 12px; } #techniqueNote { margin-top: 6px; line-height: 1.4; } #cloudKey { width: 100%; } #cloudOptions a { color: #8bbdff; } #examplesMore { font-size: 12px; padding: 4px 0; background: none; border: 0; color: #8bbdff; } #fighterLegend { position: absolute; top: 12px; right: 14px; display: flex; gap: 16px; padding: 7px 12px; border: 1px solid var(--line2); border-radius: 8px; background: #101720e6; pointer-events: none; } .player-label { color: #69beff; } .enemy-label { color: #ff827a; } .enemy-ind { color: #ff6962; font-size: 11px; filter: drop-shadow(0 1px 1px #000); } /* (the same ▼ that hangs over the enemy) */ #enemyMarker { position: absolute; transform: translate(-50%, -100%); pointer-events: none; color: #ff6962; text-align: center; line-height: 1.1; filter: drop-shadow(0 2px 2px #000); } #enemyMarker span { display: block; font-size: 9px; letter-spacing: 1px; font-weight: 750; background: #231317e6; padding: 4px 6px; border: 1px solid #ae4549; border-radius: 4px; } #enemyMarker b { font-size: 17px; } .card.player-card { border-left: 3px solid #53aeed; } .card.enemy-card { border-left: 3px solid #f26961; } .who button[data-w="att"].on { background: #24567d; color: #e4f4ff; } .who button[data-w="opp"].on { background: #893c3c; color: #fff1ef; } .replace-clip { width: 100%; padding: 4px 8px; margin: 5px 0 1px; font-size: 11.5px; text-align: left; color: #a9cfff; } #replaceBanner button { display: block; margin-top: 8px; font-size: 12px; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-size: 13.5px; } button, select, input, textarea { font: inherit; color: var(--text); } #app { display: grid; grid-template-columns: var(--side-w) 7px minmax(280px, 1fr); grid-template-rows: minmax(0, 1fr); height: 100vh; height: 100dvh; } /* ---------- side panel */ #side { background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 28px; min-width: 0; min-height: 0; } #sideResizer { cursor: col-resize; background: var(--panel); border-right: 1px solid var(--line); position: relative; } #sideResizer::after { content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 46px; margin-top: -23px; border-radius: 2px; background: var(--line2); } #sideResizer:hover::after { background: var(--accent); } #side header { position: sticky; top: 0; z-index: 3; background: var(--panel); display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0; } h1 { font-size: 18px; margin: 0; } h1 span { color: var(--accent); font-weight: 600; } #tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; position: sticky; top: 40px; z-index: 3; background: var(--panel); padding-bottom: 6px; } #tabs button { background: transparent; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; padding: 6px 2px; color: var(--muted); cursor: pointer; font-size: 12.5px; } #tabs button.on { color: var(--text); border-bottom-color: var(--accent); } .tab[hidden] { display: none; } label { display: block; font-size: 11.5px; color: var(--muted); margin: 8px 0 3px; } .row2 label, .box > label:first-child, .tab > label:first-child { margin-top: 0; } textarea, select, input[type=text], input[type=search], input[type=password], input[type=number] { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 9px; } select { padding: 6px 7px; } textarea { resize: vertical; min-height: 58px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; } button { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 11px; cursor: pointer; } button:hover:not(:disabled) { border-color: var(--line2); background: var(--panel3); } button:disabled { opacity: .45; cursor: not-allowed; } button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; width: 100%; } button.primary:hover:not(:disabled) { background: #ff9c58; } .btnrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .btnrow button { flex: 1; min-width: 0; font-size: 12.5px; } .pill { font-size: 11.5px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; } .pill.ok { color: var(--ok); border-color: #285b31; } .pill.warn { color: var(--warn); border-color: #5c4614; } .viggle-checklist { display: flex; flex-wrap: wrap; gap: 6px; } .viggle-fixes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .viggle-fixes button { font-size: 11.5px; padding: 3px 9px; border-radius: 99px; color: var(--accent-ink); background: var(--accent); border-color: var(--accent); } .viggle-fixes .note { font-size: 12px; color: var(--warn); } .muted { color: var(--muted); font-size: 12px; line-height: 1.45; } .err { color: var(--err); font-size: 13px; min-height: 18px; margin-top: 6px; } .box { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 8px; } .box-t { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; margin-bottom: 6px; } #planTitle { color: var(--text); text-transform: none; font-size: 14px; letter-spacing: 0; } .chk { display: flex; align-items: center; gap: 7px; margin: 6px 0; font-size: 12.5px; color: var(--text); cursor: pointer; } .chk input { accent-color: var(--accent); } #chips, .chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; } #chips button, .chips button { font-size: 11.5px; padding: 3px 9px; border-radius: 99px; color: var(--muted); } .chips button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } #status { min-height: 18px; margin-top: 8px; font-size: 12.5px; color: var(--muted); } #status.bad { color: var(--err); } .notice { background: #2a2110; border: 1px solid #5c4614; color: #e3c073; padding: 9px 11px; border-radius: var(--r); font-size: 12.5px; line-height: 1.45; margin: 8px 0; } .qc-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; } .qc-row:last-child { border-bottom: 0; } .qc-row span:first-child { color: var(--muted); } .ok { color: var(--ok); } .warnc { color: var(--warn); } .bad { color: var(--err); } /* ---------- library */ .clip { display: flex; align-items: center; gap: 7px; padding: 7px 0; border-bottom: 1px solid var(--line); } .clip .meta { flex: 1; min-width: 0; } .clip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .tag { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); margin: 3px 4px 0 0; } .tag.attack { color: var(--c-attack); border-color: #6b3a18; } .tag.block { color: var(--c-block); border-color: #23477a; } .tag.evade { color: var(--c-evade); border-color: #245a2c; } .tag.hit_reaction { color: var(--c-hit); border-color: #6b2b28; } .tag.test { color: var(--warn); border-color: #5c4614; } .clip button { padding: 3px 8px; font-size: 12px; } .clip select { width: auto; padding: 2px 4px; font-size: 11px; margin-top: 3px; } #lib .clip { border-left: 3px solid transparent; padding-left: 7px; padding-right: 5px; border-radius: 5px; transition: background-color .15s, border-color .15s; } #lib .clip.lib-selected { background: #18344d; border-left-color: #62b9ff; } #lib .clip.lib-playing { background: #183c2b; border-left-color: #57d48a; } #lib .clip.lib-selected.lib-playing { border-left-color: #62b9ff; box-shadow: inset 0 -2px #57d48a; } #lib .library-name { display: block; max-width: 100%; padding: 0; border: 0; border-radius: 2px; background: transparent; text-align: left; color: inherit; font-size: 13px; } #lib .lib-selected .library-name { color: #a2d7ff; } #lib .lib-playing .library-name { color: #adf1c7; } .library-state { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 600; color: #90ccff; } .lib-playing .library-state { color: #74e49f; } #lib .lib-playing > button[data-a="play"] { background: #246b43; border-color: #57d48a; color: #dbffe8; } /* ---------- sliders: one low row name | thin track | value (junctions use the stacked variant, they are narrow) */ .sl { display: grid; grid-template-columns: 74px minmax(0, 1fr) 42px; align-items: center; column-gap: 6px; height: 19px; margin: 1px 0; } .sl > label { margin: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; } .sl > output { font-size: 11.5px; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .sl:hover > label { color: var(--text); } .sl.stack { grid-template-columns: 1fr auto; grid-template-rows: 12px 12px; height: 26px; margin: 3px 0 4px; } .sl.stack > input { grid-column: 1 / -1; grid-row: 2; } .sl.sel { grid-template-columns: 74px minmax(0, 1fr); } .sl select { padding: 1px 4px; font-size: 11.5px; margin: 0; } /* two sliders per row (card / reaction main controls) - keeps panels wide and short instead of tall. Each cell uses the stacked layout (label+value on top, full-width track below) instead of the one-line layout, so a half-width column still gives the track its own full row and Slovak labels ("Oneskorenie"...) never need to truncate. */ .sliders { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 2px; } .sliders .sl { grid-template-columns: 1fr auto; grid-template-rows: 12px 12px; column-gap: 6px; height: 26px; margin: 1px 0; } .sliders .sl > input { grid-column: 1 / -1; grid-row: 2; } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: transparent; margin: 0; display: block; } input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--p, 0%), #2e3947 var(--p, 0%)); } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.5px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.5); } input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: #2e3947; } input[type=range]::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--accent); } input[type=range]::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); } .seg2 { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 5px 0 3px; } .seg2 button { border: 0; border-radius: 0; font-size: 11.5px; padding: 3px 4px; background: var(--panel); color: var(--muted); } .seg2 button.on { background: var(--accent); color: var(--accent-ink); font-weight: 650; } /* ---------- main area */ #main { display: grid; grid-template-rows: minmax(260px, 1fr) auto 7px var(--strip-h); min-width: 0; min-height: 0; } #resizer { cursor: row-resize; background: var(--panel); border-top: 1px solid var(--line); position: relative; } #resizer::after { content: ""; position: absolute; left: 50%; top: 2px; width: 46px; height: 3px; margin-left: -23px; border-radius: 2px; background: var(--line2); } #resizer:hover::after { background: var(--accent); } #view { position: relative; min-height: 0; background: radial-gradient(ellipse at 50% 30%, #1b222c 0%, #0b0e12 75%); overflow: hidden; } #c { width: 100%; height: 100%; display: block; } #loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; } #loading[hidden] { display: none; } #hudInfo { position: absolute; left: 12px; top: 22px; font-size: 12px; color: var(--muted); line-height: 1.55; pointer-events: none; text-shadow: 0 1px 3px #000; } #hudInfo b { color: var(--text); font-weight: 600; } #viewCtl { position: absolute; left: 12px; bottom: 10px; display: flex; gap: 14px; align-items: center; padding: 5px 10px; border: 1px solid var(--line2); border-radius: 8px; background: #101720e6; font-size: 12px; color: var(--muted); } #viewCtl label { display: flex; align-items: center; gap: 7px; margin: 0; white-space: nowrap; } #viewCtl input[type=range] { width: 110px; } #viewCtl output { min-width: 42px; color: var(--text); font-variant-numeric: tabular-nums; } #previewBanner { position: absolute; left: 50%; top: 52px; z-index: 5; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; background: rgba(42,33,16,.92); border: 1px solid #5c4614; color: #e3c073; padding: 6px 8px 6px 14px; border-radius: 99px; font-size: 12.5px; } #previewBanner[hidden] { display: none; } /* the generated animation's preview (before Open / Add): only play / seek / speed - the editing tools hidden (22-qc-hud.js) */ body.vm-only-preview #poseBtn, body.vm-only-preview #chatBtn, body.vm-only-preview #viewCtl label:has(#ghostOn), body.vm-only-preview #viewCtl label:has(#solidOn), body.vm-only-preview #undoBtn, body.vm-only-preview #redoBtn, body.vm-only-preview #cutHere, body.vm-only-preview #ragHere, body.vm-only-preview #markHere, body.vm-only-preview #keyHere, body.vm-only-preview #magicBtn, body.vm-only-preview #magicScope, body.vm-only-preview #reviewBtn, body.vm-only-preview #physBtn, body.vm-only-preview #physAmt, body.vm-only-preview #viewMenuWrap, body.vm-only-preview #stripTools, body.vm-only-preview #strip, body.vm-only-preview #endWrap, body.vm-only-preview #snapClips, body.vm-only-preview #timelineBlocks, body.vm-only-preview #tlModeSw, body.vm-only-preview #dock, body.vm-only-preview #resizer { display: none !important; } body.vm-only-preview #previewBanner { max-width: 92%; } /* (2026-11-10: any animation that only plays - text, a library clip's play - the block panel's settings did nothing to it: hidden, a plain note instead; 22-qc-hud.js #inspPreviewNote) */ body.vm-only-preview #insp > :not(.insp-head):not(#inspPreviewNote):not(#vmModal):not(#liveModal), body.vm-only-preview #insp .insp-head > b { display: none !important; } /* (the video result window docked in #insp is the preview's own panel - no note above it) */ #insp:has(> #vmModal:not([hidden])) > #inspPreviewNote { display: none; } body.vm-only-preview #transport :is(#tpPrevBlock, #tpNextBlock, .tp-vis) { display: none !important; } .insp-preview-note { margin: 14px 12px; padding: 12px 14px; border: 1px solid #ff8a3d; border-radius: 10px; background: rgba(255, 138, 61, .1); font-size: 13.5px; line-height: 1.45; color: var(--text, #e8ecf5); } .insp-preview-note[hidden] { display: none; } /* (under the weapon picker at the top of the preview - never over it) */ body:not(:has(#view #weaponRow:not([hidden]))) #previewBanner { top: 10px; } #previewBanner button { padding: 3px 10px; font-size: 12px; border-radius: 99px; } #transport { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; } #transport button { min-width: 34px; padding: 5px 9px; } #tlResizer { display: none; } .kq-tl-rich #tlResizer { display: block; position: absolute; left: 0; right: 0; top: -6px; height: 10px; cursor: row-resize; z-index: 6; } .kq-tl-rich #tlResizer::after { content: ""; position: absolute; left: 50%; top: 4px; width: 46px; height: 3px; margin-left: -23px; border-radius: 2px; background: var(--line2); } .kq-tl-rich #tlResizer:hover::after { background: var(--accent); } .kq-tl-rich #scrubScroll { min-height: var(--tl-h, 0px); } .kq-unity-panel #tlResizer { display: none !important; } #scrubWrap { position: relative; flex: 1; min-width: 60px; } #ticks { position: absolute; left: 0; right: 0; top: -1px; height: 8px; pointer-events: none; } #ticks i { position: absolute; top: 0; width: 2px; height: 8px; background: var(--accent); opacity: .8; } #ticks i.hit { background: var(--err); height: 10px; width: 3px; } #timelineBlocks { position: relative; margin: 5px 5px 0; } #transport .timeline-block { --fighter: #53aeed; position: absolute; height: 17px; min-width: 0; padding: 0 3px; display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; border: 0; border-top: 2px solid var(--fighter); border-right: 2px solid var(--panel); border-radius: 2px; background: #202c39; color: #a8b8c8; font-size: 10px; line-height: 13px; text-align: left; } #transport .timeline-block.enemy { --fighter: #f26961; background: #342526; } #transport .timeline-block span { overflow: hidden; text-overflow: ellipsis; opacity: .7; } #transport .timeline-block.active, #transport .timeline-block:hover { color: white; background: #354558; box-shadow: inset 0 -1px var(--fighter); } #transport .timeline-block.enemy.active, #transport .timeline-block.enemy:hover { background: #613333; } .timeline-playhead { position: absolute; left: var(--playhead, 0%); top: -3px; bottom: 0; width: 1px; background: #fff; opacity: .85; pointer-events: none; z-index: 2; } #transport .timeline-block { cursor: grab; touch-action: none; user-select: none; } #transport .timeline-block.dragging { cursor: grabbing; z-index: 4; opacity: .85; outline: 1px solid #e6edf3; box-shadow: 0 2px 8px #0008; } #timelineBlocks.dragging { cursor: grabbing; } .card.timeline-active, .card.timeline-hover { border-color: #8197ad; box-shadow: 0 0 0 1px #8197ad33; } .card.timeline-active .card-h .no { background: #dbe6f0; color: #111820; } #time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; min-width: 104px; text-align: right; } #rate { width: auto; } /* ---------- block strip */ #strip { overflow: auto; background: #10141a; padding: 12px 14px 18px; } #blocks { display: flex; align-items: flex-start; gap: 10px; width: max-content; min-width: 100%; } /* the block card and its reaction card are each an independent resizable "window" (drag the bottom-right corner grip, both width and height); the column just wraps them left-aligned, so it shrinks/grows to whichever one is currently widest and does not stretch the other to match. */ .col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .card { width: 300px; min-width: 210px; max-width: 640px; min-height: 150px; max-height: 900px; resize: both; overflow: auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px 7px; position: relative; } .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cc, var(--c-other)); } .card.block-playing::before { height: 4px; z-index: 1; background: linear-gradient(to right, #ff4038 0%, #ff4038 var(--block-progress, 0%), #692723 var(--block-progress, 0%), #692723 100%); box-shadow: 0 1px 5px #ff403844; pointer-events: none; } .card.attack { --cc: var(--c-attack); } .card.block { --cc: var(--c-block); } .card.evade { --cc: var(--c-evade); } .card.hit_reaction { --cc: var(--c-hit); } .card.sel { border-color: var(--accent); } .card-h { display: flex; align-items: center; gap: 3px; padding: 9px 0 3px; } .card-h .no { font-size: 10.5px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel3); display: grid; place-items: center; color: var(--muted); flex: none; margin-right: 2px; } .card-h .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-h button { padding: 0 4px; font-size: 11px; min-width: 0; line-height: 18px; background: transparent; border-color: transparent; color: var(--muted); } .card-h button:hover:not(:disabled) { color: var(--text); background: var(--panel3); } .card-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 2px; } .card-sub .tag { font-size: 10px; padding: 0 5px; margin: 1px 3px 0 0; } .bar { position: relative; height: 5px; border-radius: 3px; background: #2a3441; margin: 4px 0 8px; } .bar .fill { position: absolute; top: 0; bottom: 0; background: var(--cc); opacity: .75; border-radius: 3px; } .bar .hitm { position: absolute; top: -3px; width: 3px; height: 11px; background: var(--err); border-radius: 2px; } .card .chk, .reaction .chk { margin: 2px 0; font-size: 11.5px; gap: 5px; } .card .chk input { width: 12px; height: 12px; margin: 0; } .more { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 2px; } .more > summary { cursor: pointer; color: var(--muted); font-size: 11.5px; padding: 2px 0; list-style: none; } .more > summary::-webkit-details-marker { display: none; } .more > summary::before, .junction details.jadv > summary::before, .mood-grp > summary::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .3em; vertical-align: -.06em; background: currentColor; -webkit-mask: var(--kq-chev) center / contain no-repeat; mask: var(--kq-chev) center / contain no-repeat; transition: transform .15s; } .more[open] > summary::before, .junction details.jadv[open] > summary::before, .mood-grp[open] > summary::before { transform: rotate(90deg); } .reaction { width: 300px; min-width: 210px; max-width: 640px; min-height: 110px; max-height: 900px; resize: both; overflow: auto; background: #171d25; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px 7px; position: relative; } .reaction::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--c-hit), var(--c-block)); } .reaction .card-h .nm { font-weight: 550; font-size: 12px; } .reaction .st { font-size: 11px; margin-top: 4px; line-height: 1.4; } .reaction .row2 { gap: 6px; margin: 0 0 3px; } .reaction .row2 label { font-size: 10.5px; margin: 0 0 1px; } .reaction select { margin-bottom: 2px; padding: 2px 4px; font-size: 11.5px; border-radius: 6px; } .junction { width: 124px; min-width: 100px; max-width: 280px; min-height: 90px; max-height: 400px; flex: 0 0 auto; margin-top: 38px; background: var(--panel); border: 1px dashed var(--line2); border-radius: 10px; padding: 6px 8px 3px; resize: both; overflow: auto; } .junction .jt { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 1px; display: flex; justify-content: space-between; } .junction .sl > label, .junction .sl > output { font-size: 11px; } .junction .chk { font-size: 11px; margin: 2px 0; } .addcol { width: 100px; flex: 0 0 auto; align-self: stretch; min-height: 120px; display: grid; place-items: center; border: 2px dashed var(--line2); border-radius: 10px; color: var(--muted); cursor: pointer; background: transparent; font-size: 12.5px; } .addcol:hover { color: var(--text); border-color: var(--accent); } .empty { color: var(--muted); padding: 30px; } /* Compositor-only acknowledgement after the updated pose is actually drawn. */ #previewUpdated { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; border: 1px solid rgba(125, 202, 165, .45); display: flex; align-items: flex-end; justify-content: flex-end; padding: 12px; } #previewUpdated span { color: #b7ddc8; background: rgba(18, 31, 27, .88); border: 1px solid rgba(125, 202, 165, .22); border-radius: 6px; padding: 4px 8px; font-size: 11px; letter-spacing: .15px; } /* ---------- modal */ #modal { position: fixed; inset: 0; background: rgba(6,8,11,.78); display: grid; place-items: center; z-index: 10; padding: 16px; } #modal[hidden] { display: none; } .exp-prev { margin: 0 0 6px; } .exp-prev canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid var(--line2); background: radial-gradient(ellipse at 50% 30%, #1b222c 0%, #0b0e12 75%); cursor: grab; touch-action: none; } .exp-prev .muted { font-size: 11.5px; margin-top: 3px; } .exp-sub { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px 22px; } .exp-sub label { margin: 0 !important; white-space: nowrap; font-size: 12px; } .exp-sub select { flex: 1; min-width: 0; } #expModal { position: fixed; left: 12px; top: 64px; width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow: auto; z-index: 12; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 14px 16px 16px; box-shadow: 0 12px 40px #000a; } #expModal[hidden] { display: none; } #expModal .exp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } #expModal .exp-head b { font-size: 15px; } #expModal .exp-head button { margin-left: auto; padding: 2px 9px; } #expModal label { margin-top: 8px; } #expModal .seg2 { margin: 4px 0 6px; } #expInfo { margin: 10px 0; font-size: 12px; line-height: 1.5; } #expGo { width: 100%; } /* (a low window - a 720 px laptop: the dialog scrolls, the Export button stays in sight at its bottom) */ #expModal #expGo { position: sticky; bottom: -16px; z-index: 2; box-shadow: 0 -10px 16px var(--panel); } #keyForm { width: min(440px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; } #keyForm h2 { font-size: 17px; margin: 0 0 8px; } #keyInput { margin: 8px 0 0; } #picker { position: fixed; z-index: 9; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 8px; width: 320px; max-height: 60vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.6); } #picker .clip { cursor: pointer; padding: 6px 8px; border-radius: 8px; border: 0; } #picker .clip:hover { background: var(--panel3); } @media (max-width: 980px) { #app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: auto; min-height: 100vh; } #side { max-height: 46vh; border-right: 0; border-bottom: 1px solid var(--line); } #sideResizer { display: none; } #main { height: 90vh; } } /* ---------- uploads, characters, background jobs */ .drop { margin-top: 6px; padding: 9px 10px; border: 1.5px dashed var(--line2); border-radius: var(--r); text-align: center; cursor: pointer; line-height: 1.35; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s, background-color .15s; } .drop b { font-size: 13px; } .drop:hover, .drop:focus-visible, .drop.over { border-color: var(--accent); background: #2a1d12; } .drop.busy { opacity: .5; pointer-events: none; } #charName { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 8px; } .job { border-color: var(--line2); } .job .job-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .job .job-head .box-t { margin: 0; } .job progress { width: 100%; height: 6px; margin: 8px 0 4px; accent-color: var(--accent); } .job pre { max-height: 170px; overflow: auto; margin: 6px 0 0; padding: 6px 8px; background: var(--bg); border-radius: 6px; font-size: 11px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .job details summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-top: 4px; } .job .pill.bad { color: var(--err); border-color: #6b2b28; } #jobClose { margin-top: 8px; font-size: 12px; } .charcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 10px; } .charcard.active { border-color: var(--accent); box-shadow: inset 3px 0 var(--accent); } .charcard .nm { font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .charcard .facts { margin-top: 4px; } .charcard .warn { color: var(--warn); font-size: 12px; margin-top: 4px; } .charcard .bad { color: var(--err); font-size: 12px; margin-top: 4px; } .charcard .btnrow button.use { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; } .charcard details { margin-top: 6px; font-size: 12px; color: var(--muted); } .charcard details pre { white-space: pre-wrap; font-size: 11px; margin: 4px 0 0; } .tag.upload { color: #8bbdff; border-color: #23477a; } .tag.pending { color: #d9b46a; border-color: #6a5326; } #lib .clip.pending canvas.lib-mini { opacity: 0.35; } .clip button[data-a="remove"] { color: var(--muted); } /* ---------- collapsible help (every explanation is closed by default) and accordion sections */ details.info { margin: 4px 0 2px; } details.info > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: #8bbdff; font-size: 11.5px; padding: 2px 0; user-select: none; } details.info > summary::-webkit-details-marker { display: none; } details.info > summary::before { content: ""; display: inline-block; width: 13px; height: 13px; vertical-align: -2px; opacity: .85; background: currentColor; -webkit-mask: var(--kq-info) center / contain no-repeat; mask: var(--kq-info) center / contain no-repeat; } details.info > summary:hover { color: #b5d4ff; } details.info[open] > summary { margin-bottom: 3px; } details.info > :not(summary) { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 0 0 4px; } details.info > :not(summary):empty { display: none; } #chips { display: flex; flex-wrap: wrap; gap: 4px; } #chips button { font-size: 11.5px; padding: 3px 8px; } details.sec { padding: 0; } details.sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; user-select: none; } details.sec > summary::-webkit-details-marker { display: none; } details.sec > summary::after { content: ""; display: inline-block; width: 11px; height: 11px; flex: none; background: currentColor; -webkit-mask: var(--kq-chev) center / contain no-repeat; mask: var(--kq-chev) center / contain no-repeat; transition: transform .15s; } details.sec[open] > summary { color: var(--text); } details.sec[open] > summary::after { transform: rotate(90deg); } details.sec > :not(summary) { margin-left: 10px; margin-right: 10px; } details.sec[open] { padding-bottom: 8px; } .inrow { display: flex; gap: 6px; } .inrow input { flex: 1; min-width: 0; } .inrow button { flex: none; font-size: 12px; } #cloudOptions .btnrow { margin-top: 4px; } .chk { margin: 6px 0 2px; } /* the opponent's clip in its reaction card: what plays + replace */ .reaction .now { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; font-size: 12px; min-width: 0; } .reaction .now .lbl { color: var(--muted); flex: none; } .reaction .now .clipnm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffb1ab; font-weight: 600; } .reaction .now .auto { color: var(--muted); font-weight: 400; } details.sec > summary .pill { margin-left: auto; margin-right: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; padding: 1px 8px; } .pill.bad { color: var(--err); border-color: #6b2b28; } /* ---------- hit editor (strike events of one animation) */ #hitEditor { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; background: rgba(16,21,28,.94); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px 9px; box-shadow: 0 6px 24px rgba(0,0,0,.45); } #hitEditor .he-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #hitEditor .he-title { font-size: 12.5px; color: var(--muted); } #hitEditor .he-title b { color: var(--text); } #hitEditor details.info { flex: 1; min-width: 120px; margin: 0; } #hitEditor details.info > div { position: absolute; left: 10px; right: 10px; bottom: 100%; margin-bottom: 6px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; } #hitEditor .he-done { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; padding: 4px 14px; } #heTrack { position: relative; height: 26px; margin: 8px 0 7px; background: #0b0f14; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; touch-action: none; } #hePlay { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; box-shadow: 0 0 4px #fff8; pointer-events: none; } #heTrack .hm { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; transform: rotate(45deg); background: var(--err); border: 2px solid #ffd2cf; border-radius: 2px; cursor: grab; } #heTrack .hm.sel { background: #fff; border-color: var(--err); box-shadow: 0 0 0 3px #f8514966; } #heTrack .hm.dragging { cursor: grabbing; } #heTrack .hm.foot { border-radius: 50%; transform: none; } #heTrack .tl { position: absolute; bottom: 1px; font-size: 9px; color: var(--muted); transform: translateX(-50%); pointer-events: none; } #hitEditor .he-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } #hitEditor .he-tools button, #hitEditor .he-tools select { font-size: 12px; padding: 4px 9px; } #hitEditor .he-tools select { width: auto; } #hitEditor .he-add { background: #3a1916; border-color: #8f3a33; color: #ffd6d2; font-weight: 600; } #hitEditor .he-sel { font-size: 12px; color: var(--muted); margin-left: 6px; } /* block card: which strikes the opponent reacts to */ .hitrow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: -2px 0 6px; font-size: 11px; } .hitrow .lbl { color: var(--muted); margin-right: 2px; } .hitrow .hc { padding: 1px 7px; font-size: 11px; border-radius: 99px; border: 1px solid #6b2b28; background: transparent; color: #ff9d96; } .hitrow .hc.on { background: #5a1f1b; color: #ffe1de; border-color: #c2473f; } .hitrow .hc.off { color: var(--muted); border-color: var(--line); } .hitrow .he { flex: 1 0 100%; order: -1; padding: 6px 10px; margin: 2px 0 4px; font-size: 12.5px; font-weight: 650; border-radius: 9px; background: #3a1916; border: 1px solid #c2473f; color: #ffe1de; } .hitrow .he:hover { background: #5a1f1b; } .bar .hitm.on { opacity: 1 !important; } /* solo playback of one block + blend from / to the character's idle (2026-09-27) */ .card-h .solo-btn { font-size: 10.5px; padding: 1px 6px; border-radius: 99px; white-space: nowrap; } .card.solo { box-shadow: 0 0 0 2px #6cb6ff inset; } .card.solo .solo-btn { background: #6cb6ff; color: #04121f; border-color: #6cb6ff; font-weight: 650; } .timeline-block.solo { outline: 2px solid #6cb6ff; outline-offset: -1px; } #transport.solo-on #time::after { content: ' · solo'; color: #6cb6ff; } .idlebox { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 2px 0 4px; } .idlebox .idlesl { flex-basis: 100%; } .idlebox .idlesl:empty { display: none; } /* small looping previews: library (clip under the mouse) and every block card */ .minibox { position: sticky; top: 0; z-index: 3; margin: 6px 0; background: var(--bg, #0e1116); border: 1px solid #2a3440; border-radius: 8px; overflow: hidden; } .minibox canvas, .card canvas.mini { display: block; width: 100%; height: auto; aspect-ratio: 240 / 150; background: #131920; } .minibox .mini-cap { font-size: 11.5px; color: var(--muted); padding: 3px 8px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card canvas.mini { border-radius: 6px; margin: 4px 0 6px; border: 1px solid #26303b; } /* library: search, categories and the clip preview stay at hand while the list scrolls */ .libhead { position: sticky; top: var(--libhead-top, 74px); z-index: 2; background: var(--panel); margin: 0 -12px; padding: 6px 12px 4px; border-bottom: 1px solid var(--line); box-shadow: 0 6px 10px -8px rgba(0,0,0,.6); } .libhead #libSearch { width: 100%; } .libhead .chips { margin: 6px 0 4px; } .libhead .minibox { position: static; margin: 4px 0 2px; display: flex; gap: 8px; align-items: center; } .libhead .minibox canvas { width: 44%; flex: none; border-radius: 6px; } .libhead .minibox .mini-cap { white-space: normal; padding: 0; } /* ragdoll: per-reaction row + the Ragdoll tab */ .ragrow { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; } .ragrow select { flex: 1; min-width: 0; } .ragrow button { padding: 2px 8px; } .ragrow .chk { margin: 0; } /* (the checkbox in line with the buttons - its 6 / 2 px margins set it lower: crooked, the owner 2026-10-19) */ .ragrow button { display: inline-flex; align-items: center; line-height: 1.2; } .ragdead { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: 11.5px; } .ragdead label { margin: 0; color: var(--muted); white-space: nowrap; } .ragdead select { flex: 1; min-width: 0; } .ragdead[hidden], .reaction .chips[hidden] { display: none; } .reaction .chips { margin: 2px 0 4px; } #tab-rag .seg2 { margin: 6px 0; } #ragStatus { margin: 8px 2px; font-size: 12px; } /* multi-hit series: each reacted blow is a full reaction or a flinch (O.hitPlan) */ .hmode { display: flex; align-items: center; gap: 6px; margin: 2px 0 3px; font-size: 11px; } .hmode .lbl { color: var(--muted); white-space: nowrap; } .seg3 { flex: 1; display: grid; grid-template-columns: 1.25fr 1fr 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .seg3 button { border: 0; border-radius: 0; font-size: 11px; padding: 3px 4px; background: var(--panel); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .seg3 button + button { border-left: 1px solid var(--line); } .seg3 button.on { background: var(--accent); color: var(--accent-ink); font-weight: 650; } .hnote { font-size: 11px; margin: 0 0 5px; line-height: 1.35; } .reaction.is-flinch { border-style: dashed; } .hitrow .hc.on.fl { background: transparent; border-style: dashed; color: #ffc2bc; } /* ✂ split a block / ⇔ merge parts of the same clip */ .card.cutting { outline: 2px solid var(--accent); outline-offset: -1px; } .cutbox { border: 1px solid var(--accent); border-radius: 8px; padding: 7px 8px 8px; margin: 0 0 8px; background: rgba(255, 138, 61, .06); } .cuthead { font-size: 11px; font-weight: 650; letter-spacing: .3px; margin-bottom: 18px; } .cutbar { position: relative; height: 22px; border-radius: 5px; background: #2a3441; cursor: ew-resize; touch-action: none; outline: none; } .cutbar:focus-visible { box-shadow: 0 0 0 2px var(--accent); } .cutbar .cuthit { position: absolute; top: 5px; width: 10px; height: 10px; margin-left: -5px; background: var(--err); transform: rotate(45deg); border-radius: 2px; pointer-events: none; } .cutbar .cutsug { position: absolute; top: 2px; bottom: 2px; border-left: 2px dashed rgba(255, 255, 255, .45); pointer-events: none; } .cutbar .cutline { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--accent); border-radius: 2px; pointer-events: none; box-shadow: 0 0 6px var(--accent); } .cutbar .cutline span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; font-size: 10.5px; font-weight: 650; color: var(--accent); white-space: nowrap; } .cutinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 11px; color: var(--muted); margin: 7px 0 6px; } .cutbtns { display: flex; flex-wrap: wrap; gap: 5px; } .cutbtns button { font-size: 11.5px; padding: 3px 9px; } .junction .jmode { display: flex; margin: 2px 0 6px; } .junction .jmode button { flex: 1; font-size: 11.5px; padding: 3px 4px; } .junction .jpic { position: relative; height: 12px; margin: 2px 0 4px; } .junction .jpic i { position: absolute; top: 0; height: 12px; border-radius: 3px; } .junction .jpic .a { left: 0; width: calc(50% + var(--ov, 0%) / 2); background: linear-gradient(90deg, var(--c1) 70%, transparent); } .junction .jpic .b { right: 0; width: calc(50% + var(--ov, 0%) / 2); background: linear-gradient(270deg, var(--c2) 70%, transparent); } .junction .jpic.cut .a { width: 50%; background: var(--c1); } .junction .jpic.cut .b { width: 50%; background: var(--c2); border-left: 2px dashed #fff; } .junction .jwhat { font-size: 10.5px; line-height: 1.3; margin: 0 0 4px; } .junction details.jadv { margin-top: 4px; } .junction details.jadv > summary { cursor: pointer; font-size: 11px; color: var(--muted, #8aa0b5); list-style: none; } .junction .merge-btn { width: 100%; margin: 3px 0 5px; font-size: 11.5px; padding: 3px 6px; border-color: var(--accent); color: var(--accent); background: transparent; } .junction .merge-btn:hover { background: var(--accent); color: var(--accent-ink); } .cutbtns button.primary { width: auto; } /* timeline blocks: trim / stretch handles on the edges, double click cuts */ #transport .timeline-block .tl-edge { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 3; opacity: 0; background: linear-gradient(90deg, transparent, var(--fighter), transparent); transition: opacity .12s; } #transport .timeline-block .tl-edge.l { left: 0; } #transport .timeline-block .tl-edge.r { right: 0; } #transport .timeline-block:hover .tl-edge, #transport .timeline-block.trimming .tl-edge { opacity: .9; } #transport .timeline-block.trimming { outline: 1px dashed var(--fighter); z-index: 4; } #transport #cutHere { font-size: 14px; } /* ---- every text readable in full: no "…" truncation - labels, names and buttons wrap instead */ .sl { grid-template-columns: 112px minmax(40px, 1fr) auto; height: auto; min-height: 19px; } .sl > label { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.15; } .sl.sel { grid-template-columns: 112px minmax(0, 1fr); } .sl.stack, .sliders .sl { grid-template-rows: auto 12px; height: auto; min-height: 26px; } .clip .nm, .card-h .nm, .reaction .now .clipnm, .minibox .mini-cap { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .seg3 button, .seg2 button { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; } .ragdead label, .hmode .lbl, .exp-sub label { white-space: normal; } #viewCtl { flex-wrap: wrap; row-gap: 4px; max-width: calc(100% - 24px); } /* ---- Library: a live preview next to every clip */ #lib .clip { align-items: flex-start; } #lib .clip canvas.lib-mini { flex: none; width: 104px; height: auto; aspect-ratio: 240 / 150; border-radius: 6px; background: #131920; cursor: pointer; margin-top: 2px; } #lib .clip .lib-acts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 76px; } .reaction .card-h .rx-exp { margin-left: auto; } .card-h { flex-wrap: wrap; row-gap: 2px; } .card-h .nm { min-width: min-content; overflow-wrap: normal; word-break: normal; } .clip .nm { overflow-wrap: break-word; } #langSel { width: auto; padding: 2px 6px; font-size: 11.5px; margin: 0 8px 0 auto; } /* ---- video mocap window */ #vmModal { position: fixed; left: 12px; top: 64px; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow: auto; z-index: 12; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 14px 16px 16px; box-shadow: 0 12px 40px #000a; } #vmModal[hidden] { display: none; } /* (docked in the right panel - the owner 2026-10-16: the floating window covered the library and the view) */ #insp { position: relative; } #insp > #vmModal { position: absolute; inset: 0; left: 0; top: 0; width: auto; max-height: none; border-radius: 0; border: 0; box-shadow: none; z-index: 8; padding: 12px 14px 20px; } #liveModal { position: fixed; left: 12px; top: 64px; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow: auto; z-index: 12; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 14px 16px 16px; box-shadow: 0 12px 40px #000a; } #liveModal[hidden], #livePair[hidden] { display: none; } #refVideoBox { position: absolute; right: 10px; top: 52px; width: min(26%, 240px); z-index: 6; border-radius: 8px; overflow: hidden; background: #000; border: 1px solid var(--line2); box-shadow: 0 6px 20px #0008; } #refVideoBox[hidden], #refVideoBtn[hidden] { display: none; } #posePanel .pp-smart { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; font-size: 13px; } #posePanel .pp-sb { display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px 20px; font-size: 12px; } #posePanel .pp-sb.off { opacity: .45; pointer-events: none; } body.posing #refVideoBox { left: 10px; right: auto; } /* (posing: the source video on the left - the posing panel is on the right; it covered it, then was hidden while posing - the owner 2026-10-20: "the video must stay when I pose, nothing may overlap") */ body.posing #refVideoBox video { max-height: var(--ref-max, 40vh); } body.posing #refVideoBtn { left: 10px; right: auto; } #refVideoBtn { position: absolute; right: 10px; top: 52px; z-index: 6; padding: 3px 9px; font-size: 12px; border-radius: 7px; background: #000a; border: 1px solid var(--line2); color: var(--ink); } #refVideoBox video { display: block; width: 100%; max-height: min(45vh, var(--ref-max, 45vh)); object-fit: contain; } /* (--ref-max: the 3D view's own height - 34c-ref-video.js; a short view (the Unity panel) cut the video off) */ #refVideoBox button { position: absolute; right: 4px; top: 4px; padding: 0 6px; font-size: 12px; line-height: 18px; background: #000a; border: 0; color: #fff; border-radius: 4px; } #refVideoBox #refVideoShare { right: 30px; } #liveModal .live-keep { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; font-size: 13px; cursor: pointer; } #liveModal .exp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } #liveModal .exp-head b { font-size: 15px; } #liveModal .exp-head button { margin-left: auto; padding: 2px 9px; } #liveModal .vm-stage { min-height: 200px; } #liveModal .exp-head { cursor: move; user-select: none; } #liveModal .exp-head #liveClose { margin-left: 4px; } /* (– : a small bar - the character is what matters; inside Unity the scene shows it: the window only covered the panel) */ #liveModal.mini { width: 250px; padding: 8px 10px 10px; } #liveModal.mini .vm-stage:not(:has(#livePair:not([hidden]))), #liveModal.mini .live-keep, #liveModal.mini details.info, #liveModal.mini #livePhone, #liveModal.mini #liveCam { display: none; } #liveModal.mini .exp-head { margin-bottom: 6px; } #liveModal.mini .exp-head b { font-size: 13px; } #liveModal.mini #liveInfo { font-size: 12px; } /* (in the flow, not absolute over the stage: the QR + steps are taller than the 200px stage and were cut off top and bottom) */ #liveModal .vm-stage:has(#livePair:not([hidden])) > :is(video, canvas#liveOverlay) { display: none; } .live-pair { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--panel); text-align: left; } #livePair canvas { position: static; inset: auto; width: 168px; height: 168px; image-rendering: pixelated; border-radius: 6px; } .live-pair ol { margin: 0; padding-left: 20px; font-size: 13px; } .live-pair a { word-break: break-all; } #liveRec.rec { background: #d33; border-color: #d33; color: #fff; } #vmModal .exp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } #vmModal .exp-head b { font-size: 15px; } #vmModal .exp-head button { margin-left: auto; padding: 2px 9px; } #vmModal label { margin-top: 8px; } .vm-stage { position: relative; background: #000; border-radius: 8px; overflow: hidden; } .vm-stage video { display: block; width: 100%; max-height: 46vh; object-fit: contain; } .vm-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .vm-stage.picking canvas#vmOverlay { pointer-events: auto; cursor: crosshair; } .vm-people { margin: 8px 0; padding: 6px 8px; border-radius: 6px; background: #151d26; font-size: 12px; } .vm-people-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; } .vm-people-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .vm-chip { padding: 2px 8px; border-radius: 10px; border: 1px solid #3a4756; white-space: nowrap; } .vm-chip.p1.on { border-color: #4fa3ff; background: #12324f; } .vm-chip.p2.on { border-color: #ff6a5a; background: #4a1a16; } /* (neon look of the picked people - the same colours as their frames on the video: fighter 1 cyan, the opponent pink) */ .vm-chip { transition: box-shadow .2s, border-color .2s, color .2s; } .vm-chip.p1.on { border-color: var(--ncy); color: #e9fdff; background: rgba(46, 230, 255, .1); box-shadow: 0 0 8px rgba(46, 230, 255, .55), inset 0 0 6px rgba(46, 230, 255, .25); } .vm-chip.p2.on { border-color: var(--n3); color: #ffe9f2; background: rgba(255, 61, 139, .1); box-shadow: 0 0 8px rgba(255, 61, 139, .55), inset 0 0 6px rgba(255, 61, 139, .25); } #vmProg { width: 100%; margin: 8px 0; } #vmCap { font-size: 11.5px; margin-top: 3px; } .vm-qual { font-size: 12px; line-height: 1.5; margin: 6px 0; padding: 6px 8px; border-radius: 6px; background: #151d26; } .vm-qual .bad { color: #ff8a7a; } .vm-qual .ok { color: #7ee2a0; } .vm-qual .mid { color: #ffcf6e; } #vmRun { width: 100%; margin-top: 10px; } /* --- the two modes: normal (one character, no opponent / hits) and combat (the duel) --- */ body[data-mode="normal"] .combat-only { display: none !important; } body:not([data-mode="normal"]) .normal-only { display: none !important; } #modeSel { margin: 8px 0 6px; } #modeSel button { font-size: 12.5px; padding: 6px 4px; } .seg4 { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 3px 0; } .seg4 button { border: 0; border-radius: 0; font-size: 11px; padding: 3px 2px; background: var(--panel); color: var(--muted); white-space: normal; line-height: 1.2; } .seg4 button.on { background: var(--accent); color: var(--accent-ink); font-weight: 650; } .ragbox { margin: 4px 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; } .ragbox .ragrow { margin: 0; } .ragbox .ragrow .chk { flex: 1; margin: 0; } .ragbox .ragbody { margin-top: 3px; } .ragbox .lbl { font-size: 11px; margin: 3px 0 0; } .bar .hitm.rag { background: #b78cff; opacity: 1 !important; } #transport .tl-rag { position: absolute; top: 5px; transform: translateX(-50%); z-index: 3; min-width: 0; width: 18px; height: 18px; padding: 0; border: 1px solid #b78cff; border-radius: 50%; background: #2a2140; color: #e3d4ff; font-size: 11px; line-height: 16px; cursor: ew-resize; touch-action: none; } #transport #ragHere { white-space: nowrap; } /* block export: a clear, labelled action in every block / reaction card; cards never get too narrow to use */ .card, .reaction { min-width: 330px; } .card-acts { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: stretch; margin: 5px 0 1px; } .card-acts .replace-clip { margin: 0; } .exp-btn, .card-h button.exp-btn { padding: 4px 10px; font-size: 11.5px; font-weight: 650; line-height: 1.3; white-space: nowrap; border-radius: 6px; background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); } .exp-btn:hover:not(:disabled), .card-h button.exp-btn:hover:not(:disabled) { background: #ffa15f; border-color: #ffa15f; color: var(--accent-ink); } /* --- 2026-09-29 features: keyframes, card sections, layer / target, presets, markers, undo, environment --- */ .sl.keyable { grid-template-columns: 112px minmax(40px, 1fr) auto 18px; } .sl .kf { width: 18px; height: 18px; min-width: 0; padding: 0; border: 0; background: transparent; color: #5d6b7a; font-size: 12px; line-height: 18px; cursor: pointer; } .sl .kf.has { color: #f5c542; } .sl .kf.here { color: #ffd84d; text-shadow: 0 0 6px #ffd84d88; } .sl .kf:hover { color: #ffe27a; background: var(--panel3); border-radius: 4px; } .sl.animated > label { color: #f5c542; } .bar .hitm.key { background: #f5c542; width: 5px; height: 5px; top: 0; transform: rotate(45deg); border-radius: 1px; opacity: 1 !important; } .csec { margin: 5px 0; border: 1px solid var(--line); border-radius: 6px; background: #ffffff05; } .csec > summary { cursor: pointer; padding: 4px 8px; font-size: 11.5px; font-weight: 600; color: #c6d2de; list-style: none; user-select: none; } .csec > summary::-webkit-details-marker { display: none; } .csec > summary::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 2px; flex: none; background: var(--muted); -webkit-mask: var(--kq-chev) center / contain no-repeat; mask: var(--kq-chev) center / contain no-repeat; transition: transform .15s; } .csec[open] > summary::before { transform: rotate(90deg); } .csec-body { padding: 2px 8px 6px; } .csec-body > select { width: 100%; margin: 2px 0 4px; } .csec .hint { font-size: 11px; margin-top: 4px; } .seg4.hands { margin: 3px 0 5px; } .preset-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px; margin: 3px 0 6px; } .preset-row button { padding: 2px 7px; font-size: 11px; } .hist-btn { font-size: 15px; } #transport .hist-btn:disabled { opacity: .35; } #timelineBlocks.has-marks { margin-bottom: 15px; } #transport .tl-mark { position: absolute; bottom: -15px; transform: translateX(-50%); z-index: 3; min-width: 0; width: 17px; height: 14px; padding: 0; border: 0; border-radius: 3px; background: #243241; color: #cfe3ff; font-size: 9.5px; line-height: 14px; cursor: ew-resize; touch-action: none; } #transport .tl-mark.t-step { color: #9fe3a8; } #transport .tl-mark.t-hit { color: #ff9b8a; } #transport .tl-mark.t-impact { color: #ffcf6e; } #transport .tl-mark.t-sound { color: #9cc9ff; } #transport .tl-mark.sel { outline: 1px solid var(--accent); background: #3a2a1a; } #transport .tl-rag.sel { box-shadow: 0 0 0 2px var(--accent), 0 0 8px rgba(255, 140, 60, .6); background: #3a2a1a; } .mark-pop { position: fixed; z-index: 50; width: 230px; padding: 8px 10px 10px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 8px 28px #0008; font-size: 12px; } .mark-pop .mp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .mark-pop .mp-head button { padding: 0 6px; background: transparent; border-color: transparent; } .mark-pop label { display: block; margin: 5px 0 2px; } .mark-pop select, .mark-pop input { width: 100%; } .mark-pop .mp-t { margin: 6px 0 4px; font-size: 11px; } .pkey-pop { width: 260px; } .pkey-pop .mp-t { margin: 2px 0; } .pkey-pop .pk-joints { color: var(--text); } .pkey-pop .pk-blend { display: grid; grid-template-columns: 52px 66px minmax(40px, 1fr) 34px; align-items: center; gap: 5px; margin: 5px 0; color: var(--muted); } .pkey-pop .pk-blend span { white-space: nowrap; } .pkey-pop .pk-blend select { width: auto; font-size: 11.5px; padding: 2px 3px; } .pkey-pop .pk-blend input { width: 100%; } .pkey-pop .pk-blend input:disabled { opacity: .3; } .pkey-pop .pk-blend output { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; } .pkey-pop .btnrow { margin-top: 8px; } .pkey-pop .btnrow button { flex: 1; font-size: 11.5px; padding: 4px 6px; } .pkey-pop .btnrow button[data-x="del"] { flex: none; } .mark-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 220px; overflow: auto; } .mark-item { text-align: left; font-size: 11.5px; padding: 3px 8px; font-variant-numeric: tabular-nums; } .tpl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; align-items: center; margin: 3px 0; font-size: 11.5px; } .tpl-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .env-sub { margin: 0 0 6px 14px; padding-left: 8px; border-left: 2px solid var(--line); } /* transport: the timeline keeps a usable width - on a narrow window it takes its own row under the buttons */ #transport { flex-wrap: wrap; row-gap: 6px; } #scrubWrap { flex: 1 1 280px; min-width: 240px; } #transport #ragHere, #transport #markHere { white-space: nowrap; padding: 5px 8px; } /* ================= 2026-09-29 (3): layout with the right inspector, compact cards, history dock, death presets ========== */ :root { --side-w: 380px; /* (320 -> 380 2026-11-04, the owner: "wide enough to see every text, wider by default") */ --insp-w: 360px; --dock-h: 170px; } #app { grid-template-columns: var(--side-w) 7px minmax(360px, 1fr) 7px var(--insp-w); } body.insp-off #app { grid-template-columns: var(--side-w) 7px minmax(360px, 1fr) 0 0; } body.insp-off #insp, body.insp-off #inspResizer { display: none; } #inspOpen { display: none; } body.insp-off #inspOpen { display: block; position: fixed; right: 0; top: 40%; z-index: 30; padding: 10px 7px; border-radius: 8px 0 0 8px; background: var(--accent); color: var(--accent-ink); border: 0; font-size: 16px; box-shadow: 0 4px 16px #0008; } body.resizing, body.resizing * { cursor: grabbing !important; user-select: none !important; } #inspResizer { cursor: col-resize; background: var(--panel); border-left: 1px solid var(--line); position: relative; } #inspResizer::after { content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 46px; margin-top: -23px; border-radius: 2px; background: var(--line2); } #inspResizer:hover::after { background: var(--accent); } #main { grid-template-rows: minmax(260px, 1fr) auto 7px var(--strip-h) auto; } /* ---------- header: logo, project bar */ header h1 { display: flex; align-items: center; gap: 8px; } .logo-mark { width: 28px; height: 28px; border-radius: 8px; flex: none; box-shadow: 0 2px 10px #ff6a3d33; } #projBar { display: flex; align-items: center; gap: 5px; margin: 6px 0 2px; } #projName { flex: 1; min-width: 0; font-weight: 650; font-size: 12.5px; color: #dfe7ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; padding: 3px 6px; border-radius: 5px; } #projName:hover { background: var(--panel3); } #projBar button { padding: 3px 8px; font-size: 11.5px; white-space: nowrap; } /* ---------- compact block card */ .card { width: 330px; min-width: 300px; max-height: calc(var(--strip-h) - 32px); resize: horizontal; } .card-h { flex-wrap: nowrap !important; } .card-h .nm { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 22px #ff8a3d22; } .card canvas.mini { width: 100%; height: auto; cursor: pointer; } .mods { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0 2px; min-height: 22px; } .modchip { padding: 1px 7px; font-size: 10.5px; border-radius: 99px; background: #1d2632; border: 1px solid var(--line2); color: #c7d3df; line-height: 17px; } .modchip:hover { border-color: var(--accent); color: #fff; } .modchip.t-rag, .mods-chip.t-rag { border-color: #7b5cc4; } .modchip.t-aim, .mods-chip.t-aim { border-color: #2d9ec2; } .modchip.t-body, .mods-chip.t-body { border-color: #b08a2c; } .modchip.t-mask, .mods-chip.t-mask { border-color: #3aa37a; } .nomods { font-size: 11px; } .card-acts { grid-template-columns: 1fr auto auto !important; } .card-acts .set-btn { padding: 4px 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .timeline-block.sel { outline: 1px solid var(--accent); } /* ---------- inspector (right panel) */ #insp { background: var(--panel); display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0; border-left: 1px solid var(--line); } .insp-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px 6px; } .insp-head b { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .insp-head button { padding: 1px 8px; background: transparent; border-color: transparent; font-size: 15px; } #inspTabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 3px; padding: 0 10px 8px; border-bottom: 1px solid var(--line); } .itab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px 4px; border-radius: 7px; background: transparent; border: 1px solid transparent; color: var(--muted); position: relative; min-width: 0; } .itab b { font-size: 15px; line-height: 18px; font-weight: 400; } .itab span { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .itab:hover { background: var(--panel3); color: var(--text); } .itab.on { background: #2a1d12; border-color: var(--accent); color: #fff; } .itab.used::after { content: ""; position: absolute; top: 4px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } #inspBody { overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 30px; } .insp-empty { padding: 20px 4px; line-height: 1.5; } .ipane .csec { border: 0; background: transparent; margin: 0; } .ipane .csec > summary { display: none; } .ipane .csec-body { padding: 0; } .ipane .sl { grid-template-columns: 118px minmax(40px, 1fr) auto; } .ipane .sl.keyable { grid-template-columns: 118px minmax(40px, 1fr) auto 18px; } .ipane > .muted.hint { margin-bottom: 8px; line-height: 1.4; } .optrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 4px; } .optrow .seg2 { flex: 1 1 100%; margin: 0; } /* ---------- groups, icon rows, idle tiles */ .rag-grp { margin: 0 0 12px; padding: 8px 10px 8px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff04; } .rag-grp-t { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #9fb0c1; margin: 0 0 6px; } .ipane > .rag-grp-t { margin-top: 6px; } .iconrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 6px 0 6px; } .iconrow.small { grid-template-columns: repeat(5, 1fr); } .iconrow button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; font-size: 15px; line-height: 17px; min-width: 0; } .iconrow button span { font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .iconrow button:hover span { color: var(--text); } .idle-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 8px; } .idle-tiles button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border-radius: 8px; } .idle-tiles b { font-size: 17px; font-weight: 400; letter-spacing: 1px; } .idle-tiles span { font-size: 11.5px; } .idle-tiles button.on { background: #1f2d22; border-color: #3aa37a; color: #fff; } .wide-btn { width: 100%; margin: 6px 0 2px; padding: 6px 8px; font-weight: 600; } /* ---------- ragdoll: its own colour, clearly separate */ .csec-rag, .ipane-rag .ragrow { --rag: #8b6cf0; } .csec-rag.flat, .ipane-rag { } .ipane-rag .rag-grp { border-color: #3b2f63; background: #8b6cf00a; } .ipane-rag .rag-grp-t { color: #b7a6ff; } .ipane-rag .ragrow { padding: 8px 10px; margin: 0 0 10px; border-radius: 8px; background: linear-gradient(90deg, #2a2145, #1a1d2a); border: 1px solid #4a3a7d; } .ipane-rag .ragrow .chk { font-weight: 700; font-size: 13px; } .death-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .death { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 3px 6px; border-radius: 8px; min-width: 0; background: #17131f; border-color: #3b2f63; } .death b { font-size: 18px; line-height: 20px; font-weight: 400; } .death span { font-size: 10.5px; line-height: 1.15; text-align: center; color: #c9c0ea; } .death:hover { border-color: #8b6cf0; background: #231b36; } .death.on { border-color: #b7a6ff; background: #2e2250; box-shadow: 0 0 0 1px #8b6cf0; } /* ---------- mask clip picker (small live previews) */ .layer-pick { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; } .lp-now { display: flex; align-items: center; gap: 8px; } .lp-cv { width: 120px; height: 75px; border-radius: 6px; border: 1px solid var(--line2); flex: none; } .lp-n { font-weight: 600; font-size: 12px; } .clip-pick { position: fixed; z-index: 60; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 92vw); max-height: 82vh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; padding: 12px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 20px 60px #000c; } .clip-pick .mp-head { display: flex; gap: 8px; align-items: center; } .clip-pick .mp-head input { flex: 1; } .cp-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding-right: 4px; } .cp-tile { display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 8px; text-align: left; min-width: 0; } .cp-tile canvas { width: 100%; height: auto; border-radius: 5px; } .cp-tile .cp-n { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-tile .cp-d { font-size: 10px; } .cp-tile:hover { border-color: var(--accent); } .cp-tile.on { border-color: var(--accent); background: #2a1d12; } /* ---------- bottom dock: history + the blocks' edits */ #dock { border-top: 1px solid var(--line); background: var(--panel); min-height: 0; position: relative; } #dockResizer { position: absolute; left: 0; right: 0; top: -4px; height: 7px; cursor: row-resize; z-index: 2; } #dock.collapsed #dockResizer { display: none; } .dock-head { display: flex; align-items: center; gap: 6px; padding: 5px 10px; } .dock-head [data-d] { padding: 3px 10px; font-size: 11.5px; border-radius: 99px; background: transparent; } .dock-head [data-d].on { background: #2a1d12; border-color: var(--accent); color: #fff; } .dock-info { flex: 1; font-size: 11px; text-align: right; } #dockToggle { padding: 1px 9px; } #dockBody { height: var(--dock-h); overflow-y: auto; padding: 4px 12px 10px; } #dock.collapsed #dockBody { display: none; } .hist-list { display: flex; flex-direction: column; gap: 2px; } .hist-item { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; text-align: left; padding: 3px 8px; font-size: 12px; background: transparent; border-color: transparent; } .hist-item:hover:not(:disabled) { background: var(--panel3); } .hist-item .hi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); justify-self: center; } .hist-item.now { background: #2a1d12; border-color: var(--accent); opacity: 1; } .hist-item.now .hi-dot { background: var(--accent); } .hist-item.future { opacity: .55; } .hist-item .hi-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hist-item .hi-t { font-size: 10.5px; } .mods-list { display: flex; flex-direction: column; gap: 4px; } .mods-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 4px; border-radius: 6px; } .mods-row.sel { background: #ffffff08; } .mods-b { font-size: 11.5px; font-weight: 650; padding: 2px 8px; } .mods-chip { display: inline-flex; border: 1px solid var(--line2); border-radius: 99px; overflow: hidden; } .mods-chip button { border: 0; border-radius: 0; padding: 1px 7px; font-size: 10.5px; background: #1d2632; } .mods-chip button + button { border-left: 1px solid var(--line2); color: var(--muted); } .mods-chip button + button:hover { color: #ff8a8a; } .proj-pop { width: 320px; } @media (max-width: 1100px) { #app { grid-template-columns: var(--side-w) 7px minmax(300px, 1fr) 0 0; } body.insp-show #inspClose { display: block; } #insp, #inspResizer { display: none; } #inspOpen { display: block !important; position: fixed; right: 0; top: 40%; z-index: 30; padding: 10px 7px; border-radius: 8px 0 0 8px; background: var(--accent); color: var(--accent-ink); border: 0; } body.insp-show #insp { display: grid; position: fixed; right: 0; top: 0; bottom: 0; width: min(380px, 92vw); z-index: 40; box-shadow: -10px 0 30px #000a; } } @media (max-width: 980px) { #app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } #main { grid-template-rows: minmax(220px, 1fr) auto 7px var(--strip-h) auto; } .dock-info { display: none; } } /* the name: Kinem + IQ (capitals, the logo's orange-pink gradient) + Studio */ h1 .brand { color: #f4f6fb; font-weight: 800; letter-spacing: .2px; } h1 .brand .iq { font-weight: 900; background: linear-gradient(100deg, #ffb13d, #ff6a3d 55%, #ff3d8b); -webkit-background-clip: text; background-clip: text; color: transparent; } h1 > span:not(.brand) { color: #9fb0c1; font-weight: 300; } /* card <-> timeline block: one colour and number per block */ .card { border-left: 4px solid var(--bc, var(--line2)) !important; } .card .card-h .no { background: var(--bc, var(--panel3)) !important; color: #0d1015 !important; font-weight: 800; } #transport .timeline-block .tl-no { display: inline-grid; place-items: center; min-width: 14px; height: 13px; padding: 0 3px; border-radius: 3px; background: var(--bc); color: #0d1015; font-size: 9.5px; font-weight: 800; flex: none; } #transport .timeline-block.hover { box-shadow: 0 0 0 1px var(--bc), 0 0 10px var(--bc); color: #fff; } #transport .timeline-block.sel { background: #2b3a4c; color: #fff; } .card.timeline-hover { box-shadow: 0 0 0 1px var(--bc), 0 0 16px color-mix(in srgb, var(--bc) 45%, transparent); } #insp .insp-head { border-top: 3px solid var(--bc, transparent); } #stripTools { position: sticky; left: 0; display: flex; align-items: center; gap: 14px; margin: -4px 0 8px; font-size: 11.5px; } #stripTools .chk { margin: 0; } #stripTools .muted { font-size: 11px; } /* modern scrollbars everywhere: thin, dark track, rounded thumb that lights up on hover / drag */ * { scrollbar-width: thin; scrollbar-color: #3a4757 transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #2f3a47; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: #4a5a6c; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:active { background: var(--accent); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* history / edits: a slim bar; the panel pops up ABOVE it over the strip, full width, compact */ #dock { position: relative; z-index: 20; } #dockResizer { display: none !important; } .dock-head { padding: 4px 10px; min-height: 30px; } #dockBody { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); height: auto; max-height: min(56vh, 460px); overflow-y: auto; padding: 10px 12px 12px; background: color-mix(in srgb, var(--panel2) 96%, transparent); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 -12px 40px #000b; backdrop-filter: blur(6px); } #dock:not(.collapsed) #dockBody { animation: dockUp .16s ease-out; } @keyframes dockUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .hist-top { display: grid; grid-template-columns: auto auto auto auto minmax(120px, 1fr) auto; align-items: center; gap: 6px; margin-bottom: 10px; } .hist-top > button { padding: 3px 9px; font-size: 13px; } .hist-line { position: relative; height: 22px; margin: 0 8px; } .hist-line::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--line2), var(--accent)); opacity: .6; } .hl-dot { position: absolute; top: 5px; width: 12px; height: 12px; margin-left: -6px; padding: 0; min-width: 0; border-radius: 50%; border: 2px solid var(--panel2); background: #5b6b7d; } .hl-dot.past:hover { background: #cfd8e3; transform: scale(1.3); } .hl-dot.now { background: var(--accent); width: 16px; height: 16px; margin-left: -8px; top: 3px; box-shadow: 0 0 10px var(--accent); } .hl-dot.future { background: transparent; border: 2px dashed #5b6b7d; } .hl-span { font-size: 10.5px; white-space: nowrap; } .hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 10px; } .hg-t { grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #8b98a5; margin: 6px 0 2px; } .hist-item { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 6px; padding: 3px 8px !important; font-size: 11.5px !important; border-radius: 6px; } .hist-item .hi-n { color: #6f7f90; font-variant-numeric: tabular-nums; font-size: 10.5px; } .hist-item .hi-t { color: #6f7f90; font-variant-numeric: tabular-nums; font-size: 10.5px; } .hist-item.now .hi-n, .hist-item.now .hi-t { color: #ffd9bf; } .mods-row { border-left: 3px solid var(--bc, var(--line2)); padding-left: 8px; } /* ---- bigger timeline: the controls one compact row, the timeline its own full-width row with taller blocks ---- */ #transport { gap: 5px; padding: 6px 12px 10px; row-gap: 4px; } #transport button { min-width: 26px; padding: 3px 7px; font-size: 12px; line-height: 16px; } #transport #ragHere, #transport #markHere { padding: 3px 7px; } #transport select#rate { padding: 2px 4px; font-size: 12px; } #transport .chk { font-size: 12px; } #transport #time { margin-left: auto; font-size: 12px; } #scrubWrap { order: 10; flex: 1 1 100%; min-width: 0; margin-top: 2px; } #timelineBlocks { margin: 8px 5px 0; } #transport .timeline-block { height: 25px; font-size: 12px; line-height: 16px; padding: 0 6px 0 4px; gap: 6px; border-radius: 4px; } #transport .timeline-block span { opacity: .9; } #transport .timeline-block .tl-no { min-width: 18px; height: 17px; font-size: 11px; border-radius: 4px; } /* the gaps between blocks: dashed, with the choice's icon and length - click = what the character does there */ #transport .tl-gap { position: absolute; top: 0; bottom: 3px; z-index: 0; min-width: 0; padding: 0 3px; display: flex; align-items: center; justify-content: center; gap: 3px; overflow: hidden; border: 1px dashed #56657a; border-radius: 4px; background: repeating-linear-gradient(135deg, #1a222c 0 6px, #1e2833 6px 12px); color: #9fb1c4; font-size: 11px; white-space: nowrap; cursor: pointer; } #transport .tl-gap i { font-style: normal; } #transport .tl-gap:hover { border-color: var(--accent); color: #fff; } #transport .tl-gap.g-blend { border-color: #3fae8c; } #transport .tl-gap.g-idle { border-color: #6cb6ff; } #transport .tl-gap.g-stretch { border-color: #d6a84a; } #transport .tl-gap.g-hold { border-color: #7a6a6a; color: #c9a3a3; } /* (a pause shows what happens in it - the owner 2026-10-17: "when there is a pause and I choose what happens during it, make it clearly visible"): blend = one block's colour running into the next's, stretch = the previous block drawn out up to the next, hold = the previous block frozen (flat, dimmed), idle = the character just stands (neutral blue) */ #transport .tl-gap { container-type: inline-size; padding: 0; border-width: 1.5px; } #transport .tl-gap.g-blend { border-color: color-mix(in srgb, var(--c2) 70%, #fff); background: linear-gradient(to right, color-mix(in srgb, var(--c1) 55%, #0b0f14), color-mix(in srgb, var(--c2) 55%, #0b0f14)); } #transport .tl-gap.g-stretch { border-color: var(--c1); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c1) 50%, #0b0f14) 0 10px, color-mix(in srgb, var(--c1) 35%, #0b0f14) 10px 12px); } #transport .tl-gap.g-hold { border-color: color-mix(in srgb, var(--c1) 60%, #0b0f14); background: color-mix(in srgb, var(--c1) 22%, #0b0f14); } #transport .tl-gap.g-idle { border-color: #6cb6ff; background: repeating-linear-gradient(135deg, #1b2a3b 0 6px, #18222e 6px 12px); } #transport .timeline-block { z-index: 1; } .gap-pop { width: 330px; } .gap-row { grid-template-columns: repeat(4, 1fr); } .gap-row button.on, .gap-sec .gap-row button.on { border-color: var(--accent); background: #3a2a1a; } .gap-row button.on span { color: var(--text); } .gap-sec { margin: 4px 0 8px; padding: 6px; border: 1px dashed #56657a; border-radius: 6px; } .gap-sec .gs-t { font-size: 11px; color: var(--muted); } .gap-sec .gs-t b { color: var(--text); } .junction .gap-row { grid-template-columns: repeat(2, 1fr); } /* the card's clip bar: labelled, the preview's position on it; also a small timeline to scrub the card preview */ .cardbar-w { margin: 4px 0 6px; } .cardbar-w .bar-lab { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; color: var(--muted); line-height: 13px; } .cardbar-w .bar-lab b { font-weight: 600; color: #b9c6d3; } .cardbar-w .bar { margin: 3px 0 0; height: 8px; border-radius: 4px; } .cardbar-w .bar .fill { background: var(--bc, var(--cc)); opacity: .9; border-radius: 4px; } .cardbar-w .bar .ph { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #fff; border-radius: 1px; box-shadow: 0 0 4px #000a; pointer-events: none; } /* the card preview: ❚❚ / ▶ on the picture, the clip bar is its small timeline (drag = scrub) */ .card .mini-w { position: relative; } .card .mini-pp { position: absolute; right: 6px; bottom: 12px; min-width: 0; width: 28px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid #ffffff30; background: #0d1218c0; color: #e6edf3; font-size: 11px; line-height: 22px; opacity: .55; transition: opacity .15s, background .15s; backdrop-filter: blur(3px); } .card:hover .mini-pp, .card .mini-pp.on { opacity: 1; } .card .mini-pp.on { background: var(--accent); color: #111; border-color: transparent; } .cardbar-w .bar.scrub { cursor: ew-resize; touch-action: none; } .cardbar-w .bar.scrub:hover, .cardbar-w .bar.scrubbing { height: 10px; margin-top: 2px; } .card.mini-paused .cardbar-w .bar .ph, .cardbar-w .bar.scrubbing .ph { background: var(--accent); width: 3px; box-shadow: 0 0 6px var(--accent); } /* drag & drop order of the cards: lift, a glowing landing line, the others slide (FLIP in app.js) */ #blocks { position: relative; } .card .card-h { cursor: grab; } .card .card-h .grip { color: var(--muted); font-size: 12px; letter-spacing: -1px; cursor: grab; flex: none; opacity: .6; } .card:hover .card-h .grip { opacity: 1; color: var(--bc, var(--text)); } #blocks.reordering, #blocks.reordering * { cursor: grabbing !important; user-select: none; } .col.drag-src { opacity: .28; filter: grayscale(.6); transition: opacity .15s; } .drag-ghost { position: fixed; z-index: 9999; pointer-events: none; margin: 0; transform-origin: 50% 20%; filter: drop-shadow(0 18px 30px #000c); transition: transform .06s linear; } .drag-ghost .card { box-shadow: 0 0 0 2px var(--bc, var(--accent)), 0 0 24px color-mix(in srgb, var(--bc, #ff8a3d) 55%, transparent); } .drop-line { position: absolute; top: 6px; bottom: 6px; width: 4px; margin-left: -2px; border-radius: 3px; z-index: 50; pointer-events: none; background: linear-gradient(#ffb13d, #ff6a3d, #ff3d8b); box-shadow: 0 0 12px #ff6a3d, 0 0 24px #ff3d8b80; animation: dropPulse .9s ease-in-out infinite; transition: left .12s cubic-bezier(.2,.8,.2,1); } .drop-line.same { opacity: .25; animation: none; } @keyframes dropPulse { 50% { box-shadow: 0 0 4px #ff6a3d, 0 0 10px #ff3d8b60; } } .card.landed { animation: cardLand .9s ease-out; } @keyframes cardLand { 0% { box-shadow: 0 0 0 2px var(--bc), 0 0 26px var(--bc); } 100% { box-shadow: 0 0 0 0 transparent; } } /* the card preview keeps ONE size whatever the card's width (auto-width / hand resize): a wider card only gets room around it */ .card .mini-w { width: 100%; display: flex; justify-content: center; margin: 4px 0 2px; border-radius: 7px; background: linear-gradient(90deg, transparent, #10161d 12%, #10161d 88%, transparent); } .card .mini-w canvas.mini { width: min(100%, 300px); height: auto; flex: none; margin: 0; } .card .mini-w .mini-pp { right: calc(50% - min(50%, 150px) + 6px); bottom: 8px; } /* the narrow transition card: the four gap choices as a compact list (icon + label on one line) */ .junction .gap-row { grid-template-columns: 1fr; gap: 3px; } .junction .gap-row button { flex-direction: row; justify-content: flex-start; gap: 6px; padding: 3px 6px; font-size: 13px; } .junction .gap-row button span { font-size: 10.5px; } /* ---- "↔ Šírka podľa dĺžky": every card right under its block on the timeline (same place, same width, one scale) ---- */ #scrubScroll { order: 10; flex: 1 1 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } #scrubScroll::-webkit-scrollbar { display: none; } #scrubWrap { order: 0; flex: none; width: 100%; } #blocks.aligned { display: block; min-width: 0; } #blocks.aligned > .col, #blocks.aligned > .junction, #blocks.aligned > .addcol { position: absolute; } #blocks.aligned > .col .card { resize: none; min-width: 0; max-width: none; } #blocks.aligned > .junction { width: auto; min-width: 0; min-height: 0; max-height: none; margin: 0; padding: 0; border: 0; background: none; resize: none; overflow: visible; transform: translateX(-50%); z-index: 5; } #blocks.aligned > .junction:not(.open) > :not(.jsum) { display: none; } /* (aligned under the timeline: between the cards only a small transition badge - ⇄ and its length, ✂ for a cut; a click opens its settings - the owner 2026-10-16: "a blending icon between the cards") */ #blocks.aligned > .junction:not(.open) > .jsum { height: 20px; padding: 0 6px; gap: 0; font-size: 10.5px; border-radius: 10px; } #blocks.aligned > .junction:not(.open) > .jsum > :not(.js-b) { display: none; } #blocks > .junction .jsum { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; min-width: 0; border-radius: 13px; white-space: nowrap; background: #1a222c; border: 1px solid #3a4756; color: #cfd9e3; font-size: 11.5px; box-shadow: 0 2px 8px #0006; } #blocks > .junction .jsum b { color: var(--accent); font-weight: 700; } #blocks > .junction .jsum .js-g { color: #8fd8bf; } #blocks > .junction .jsum:hover { border-color: var(--accent); color: #fff; } #blocks.aligned > .junction.open { z-index: 30; } #blocks.aligned > .junction.open > .jsum { border-color: var(--accent); } #blocks.aligned > .junction.open { display: flex; flex-direction: column; align-items: center; } #blocks.aligned > .addcol { width: 150px; } #blocks.aligned > .col > .reaction { min-width: 0; resize: none; } #blocks > .junction .jsum { order: -1; position: relative; } #app > main { min-width: 0; } #transport { min-width: 0; } #scrubScroll { max-width: 100%; } .junction { width: 140px; } /* ---- transition pill in the aligned strip: centred in the space between the two cards, a bracket down to both ---- */ #blocks > .junction .jsum { gap: 0; height: 24px; padding: 0 3px 0 3px; border-radius: 12px; font-size: 11px; font-variant-numeric: tabular-nums; background: #141b23ee; border: 1px solid #334252; backdrop-filter: blur(4px); box-shadow: 0 3px 10px #0007; } #blocks > .junction .jsum > * { padding: 0 7px; line-height: 18px; } #blocks > .junction .jsum > * + * { border-left: 1px solid #2c3845; } #blocks > .junction .jsum .js-n { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; border-radius: 9px; border: 0; color: #0d1015; font-weight: 800; font-size: 10.5px; background: linear-gradient(90deg, var(--c1), var(--c2)); } #blocks > .junction .jsum .js-n i { font-style: normal; } #blocks > .junction .jsum .js-n + * { border-left: 0; } #blocks > .junction .jsum .js-b { color: #d6e0ea; } #blocks > .junction .jsum .js-s { color: #9fb1c4; font-weight: 700; } #blocks > .junction .jsum .js-g { color: #8fd8bf; } #blocks > .junction .jsum .js-g.g-idle { color: #8cc4ff; } #blocks > .junction .jsum .js-g.g-stretch { color: #e2bd6c; } #blocks > .junction .jsum .js-g.g-hold { color: #c9a3a3; } /* (no bracket over the space between the cards - the owner 2026-10-16: "I don't want that"; the badge sits right before the next card - 27-timeline-zoom.js) */ #blocks.aligned > .junction.lead { transform: translateX(-100%); } /* ---- zoom of the timeline (strip tools) ---- */ #stripTools { flex-wrap: wrap; row-gap: 4px; } .tlzoom { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border: 1px solid #2c3845; border-radius: 8px; background: #141b23; } .tlzoom[hidden] { display: none; } .tlzoom button { min-width: 22px; height: 22px; padding: 0 5px; font-size: 13px; line-height: 20px; } .tlzoom input[type=range] { width: 110px; } .tlzoom output { min-width: 42px; text-align: right; font-size: 11px; color: #b9c6d3; font-variant-numeric: tabular-nums; } .tlzoom kbd, .kq-tip kbd, .keys-list kbd { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 4px; border: 1px solid #45556a; border-bottom-width: 2px; background: #1d2632; color: #e6edf3; font: 600 10.5px/15px ui-monospace, Consolas, monospace; text-align: center; white-space: nowrap; } .tlzoom kbd { margin-left: 4px; opacity: .8; } /* ---- compact card: narrow cards (zoomed out) keep a clean look - icons only, fewer extras ---- */ .card { container-type: inline-size; } @container (max-width: 290px) { .card-h .solo-btn .lb, .card-acts .lb { display: none; } .card-acts button { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; } .card .card-sub .tag:nth-child(n+3) { display: none; } } @container (max-width: 230px) { .card-h [data-a=left], .card-h [data-a=right], .card-h [data-a=dup] { display: none; } .card .card-sub { display: none; } .cardbar-w .bar-lab span { display: none; } .card .mods .modchip { font-size: 10px; padding: 1px 5px; } .card .card-h .nm { font-size: 12px; } } /* ---- the app's tooltip: short lines + the shortcut as keys ---- */ .kq-tip { position: fixed; z-index: 100000; max-width: 300px; padding: 7px 10px 8px; border-radius: 8px; pointer-events: none; background: #0f151cf5; border: 1px solid #3a4756; box-shadow: 0 8px 24px #000b; color: #d6e0ea; font-size: 11.5px; line-height: 1.4; animation: tipIn .12s ease-out; } .kq-tip[hidden] { display: none; } .kq-tip .tt-t { color: #fff; font-weight: 600; } .kq-tip .tt-l { color: #9fb1c4; font-size: 11px; } .kq-tip .tt-l::before { content: '· '; color: #56657a; } .kq-tip .tt-k { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #263240; } .kq-tip .tt-k > span { color: #7f90a3; font-size: 10.5px; margin-right: 4px; } .kq-tip i, .keys-list i { font-style: normal; color: #7f90a3; font-size: 10px; margin: 0 1px; } .kq-tip i.or, .keys-list i.or { margin: 0 5px; } @keyframes tipIn { from { opacity: 0; transform: translateY(-3px); } } /* ---- Settings > ⌨ shortcuts ---- */ .keys-btn { min-width: 0; padding: 2px 8px; font-size: 14px; } .keys-note { font-size: 11px; margin: 2px 0 8px; } .keys-list { display: grid; gap: 3px; } .keys-list.fixed { margin-top: 10px; } .keys-h { font-size: 11px; margin-bottom: 2px; } .keys-row { display: grid; grid-template-columns: 1fr auto 26px; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; background: #141b23; } .keys-list.fixed .keys-row { grid-template-columns: 1fr auto; background: transparent; } .keys-row .kr-l { font-size: 11.5px; } .keys-row .kr-k { min-width: 70px; padding: 2px 6px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px dashed transparent; border-radius: 6px; } .keys-row button.kr-k:hover { border-color: #45556a; } .keys-row .kr-k.rec { border-color: var(--accent); color: var(--accent); animation: dropPulse .9s ease-in-out infinite; } .keys-row .kr-k.changed kbd { border-color: var(--accent); } .keys-row .kr-r { min-width: 0; padding: 0; width: 24px; height: 22px; } .keys-reset { margin-top: 8px; width: 100%; } /* =================================================================== neon layer (KinemIQ look) */ :root { --n1: #ffb13d; --n2: #ff6a3d; --n3: #ff3d8b; --ncy: #2ee6ff; --neon: linear-gradient(90deg, var(--n1), var(--n2) 45%, var(--n3)); --glow: 0 0 10px #ff6a3d66, 0 0 22px #ff3d8b33; } .ic { width: 16px; height: 16px; flex: none; vertical-align: -3px; } /* one icon family for the whole UI (index.html sprite, own drawings): one line style - stroke 1.8 on a 24 grid, round ends, the colour of the text. .kqi = an emoji at the start of a control's text drawn as an icon (web/icons.js); it scales with the text. CSS-only marks (the panels' arrows, toasts) use the same shapes as masks (--kq-*). */ svg.ic, svg.hico, svg.kqi { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .kqi { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.22em; overflow: visible; } .kqi.kqt { margin-right: .38em; } .kqi + .kqi { margin-left: .1em; } .kqi.kql { width: .9em; height: .9em; margin-left: .3em; vertical-align: -.1em; } :root { --kq-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); --kq-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E"); --kq-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); --kq-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17.5h.01'/%3E%3C/svg%3E"); --kq-sleep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h6l-6 7h6M14 4h5l-5 5h5'/%3E%3C/svg%3E"); } /* project bar: glass pills, gradient ring + glow on hover */ #projBar button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #d6e0ea; background: linear-gradient(#161d26, #161d26) padding-box, linear-gradient(90deg, #2c3845, #2c3845) border-box; border: 1px solid transparent; transition: box-shadow .18s, color .18s, transform .12s; } #projBar button .ic { width: 15px; height: 15px; color: var(--n2); filter: drop-shadow(0 0 3px #ff6a3d88); } #projBar button:hover { color: #fff; background: linear-gradient(#1a2230, #1a2230) padding-box, var(--neon) border-box; box-shadow: var(--glow); } #projBar button:active { transform: translateY(1px) scale(.98); } #projBar #projSave .ic { color: var(--ncy); filter: drop-shadow(0 0 3px #2ee6ff88); } #projBar #projOpen .ic { color: var(--n1); filter: drop-shadow(0 0 3px #ffb13d88); } #projName { font-weight: 700; letter-spacing: .2px; } /* header: keys button */ .keys-btn { display: inline-grid; place-items: center; width: 30px; height: 26px; padding: 0; border-radius: 8px; color: #b9c6d3; } .keys-btn .ic { width: 18px; height: 18px; } .keys-btn:hover { color: #fff; box-shadow: var(--glow); border-color: var(--n2); } /* side tabs: icon over label, neon underline + glowing icon on the active one */ #tabs { gap: 4px; } #tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border-bottom: 2px solid transparent; font-size: 11.5px; position: relative; transition: color .15s; } #tabs button .ic { width: 19px; height: 19px; opacity: .75; transition: opacity .15s, filter .15s, color .15s; } #tabs button:hover { color: #d6e0ea; } #tabs button:hover .ic { opacity: 1; } #tabs button.on { color: #fff; border-bottom-color: transparent; } #tabs button.on .ic { opacity: 1; color: var(--n2); filter: drop-shadow(0 0 4px #ff6a3dcc) drop-shadow(0 0 10px #ff3d8b66); } #tabs button::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -2px; height: 2px; border-radius: 2px; background: var(--line); transition: background .2s, box-shadow .2s, left .2s, right .2s; } #tabs button.on::after { left: 4%; right: 4%; background: var(--neon); box-shadow: 0 0 8px #ff6a3d, 0 0 16px #ff3d8b88; } /* mode switch: the active mode glows */ #modeSel button.on, #modeSel button[aria-pressed=true] { background: var(--neon); color: #1a0e04; border-color: transparent; box-shadow: var(--glow); font-weight: 700; } /* primary actions */ button.primary:not(:disabled), .exp-btn { background: var(--neon); border-color: transparent; color: #1a0e04; box-shadow: 0 0 0 #0000; transition: box-shadow .2s, filter .2s; } button.primary:hover:not(:disabled), .exp-btn:hover { background: var(--neon); filter: brightness(1.08); box-shadow: var(--glow); } /* transport: play glows, the playhead is a neon line */ #transport #play { color: #fff; border-color: #ff6a3d88; box-shadow: 0 0 8px #ff6a3d44 inset; } #transport #play:hover { box-shadow: var(--glow); } .timeline-playhead { background: #fff !important; box-shadow: 0 0 6px #fff, 0 0 12px var(--n3); width: 2px !important; } #transport .timeline-block.active { box-shadow: 0 0 0 1px var(--bc), 0 0 12px color-mix(in srgb, var(--bc) 70%, transparent); } #scrub::-webkit-slider-thumb { box-shadow: 0 0 8px var(--n2), 0 0 16px var(--n3); } /* the selected card and the inspector head glow in the block's colour */ .card.sel { box-shadow: 0 0 0 1px var(--bc), 0 0 18px color-mix(in srgb, var(--bc) 45%, transparent); } #insp .insp-head { position: relative; } #insp .insp-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--neon); opacity: .7; box-shadow: 0 0 8px #ff6a3d88; } /* panel tops: a thin neon line */ #side > header { position: relative; } #side > header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #ff6a3d99, #ff3d8b99, transparent); } /* ---- overview / scroll bar under a zoomed timeline ---- */ #tlNav { order: 11; flex: 1 1 100%; position: relative; height: 16px; margin: 2px 5px 0; border-radius: 5px; background: #10161d; border: 1px solid #243040; cursor: pointer; touch-action: none; overflow: hidden; } #tlNav .tn-blocks { position: absolute; inset: 4px 0; } #tlNav .tn-blocks i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--bc); opacity: .55; border-right: 1px solid #10161d; } #tlNav .tn-ph { position: absolute; top: 0; bottom: 0; left: var(--playhead, 0%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px var(--n3); pointer-events: none; z-index: 2; } #tlNav .tn-win { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: #ffffff14; border: 1px solid #ff6a3daa; box-shadow: 0 0 8px #ff6a3d55, inset 0 0 10px #ff3d8b22; cursor: grab; z-index: 1; } #tlNav:hover .tn-win, #tlNav.drag .tn-win { background: #ffffff22; border-color: var(--n2); box-shadow: var(--glow); } #tlNav.drag .tn-win { cursor: grabbing; } /* zoom hints: two small lines */ .tlzoom .zh { display: inline-flex; flex-direction: column; gap: 1px; margin-left: 5px; font-size: 9.5px; line-height: 12px; color: #8b98a5; white-space: nowrap; } .tlzoom .zh kbd { min-width: 0; padding: 0 3px; font-size: 9px; line-height: 11px; border-bottom-width: 1px; margin: 0 1px; } .tips-btn .ic-off { opacity: 0; transition: opacity .15s; } .tips-btn.off { color: #6b7886; } .tips-btn.off .ic-off { opacity: 1; color: var(--n3); } .tips-btn:not(.off) .ic { color: var(--ncy); filter: drop-shadow(0 0 3px #2ee6ff88); } .tips-chk { display: flex; margin: 4px 0 8px; font-size: 12px; } /* the time added after a ragdoll fall (the body lying on the ground) at the end of a timeline block */ #transport .timeline-block .tl-tail { position: absolute; top: 0; bottom: 0; right: 0; pointer-events: auto; border-left: 1px dashed #b78cff; background: repeating-linear-gradient(135deg, #b78cff33 0 5px, #b78cff14 5px 10px); box-shadow: inset 0 -2px 0 #b78cff; } .tail-seg { margin: 4px 0 6px; } .tail-note { font-size: 11px; margin-top: 2px; } /* keyframes (19-keyframes.js): optional controls, ◆ on the timeline over the block */ body:not(.keys-ui) .sl.keyable:not(.animated) .kf, body:not(.keys-ui) #keyHere { display: none; } .keys-toggle { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; } .keys-toggle .chk { font-weight: 600; cursor: pointer; } #transport .tl-key { position: absolute; z-index: 4; width: 11px; height: 11px; min-width: 0; padding: 0; margin-left: -5.5px; border: 1px solid #0008; background: var(--bc, var(--accent)); transform: rotate(45deg); border-radius: 2px; cursor: ew-resize; touch-action: none; box-shadow: 0 0 0 1px #fff6; } #transport .tl-key:hover { box-shadow: 0 0 0 2px #fff; } .bar .hitm.key { cursor: ew-resize; pointer-events: auto; z-index: 2; width: 8px; height: 8px; top: -2px; margin-left: -4px; } .keys-toggle .key-all { display: none; margin: 4px 0 2px; padding: 7px 10px; border: 0; border-radius: 7px; background: var(--accent); color: #1a1006; font-weight: 700; cursor: pointer; } body.keys-ui .keys-toggle .key-all { display: block; } .keys-toggle .key-all:hover { filter: brightness(1.1); } body.keys-ui #keyHere { background: var(--accent); color: #1a1006; font-weight: 700; border-color: transparent; } .mood-grp > summary { cursor: pointer; list-style: none; } /* card size (state.view.cardSize -> --cs) and compact cards when a block is narrow on the aligned timeline */ :root { --cs: 0.8; } .card { width: calc(330px * var(--cs)); min-width: calc(200px * var(--cs)); } .card .mini-w canvas.mini { width: min(100%, calc(300px * var(--cs))); } .card.card-s .mods, .card.card-s .card-acts, .card.card-s .card-sub, .card.card-s .bar-lab, .card.card-s .card-h button { display: none !important; } .card.card-s { min-width: 0 !important; padding: 0 5px 5px; } .card.card-xs { min-height: 0 !important; overflow: hidden; } .card.card-xs > :not(.card-h) { display: none !important; } .card.card-xs .card-h > :not(.no):not(.nm) { display: none !important; } /* (always a way to remove a block without the Delete key - the user: minimal, also on the smallest card) */ .card.card-s .card-h button[data-a="del"] { display: inline-flex !important; } .card.card-xs .card-h > button[data-a="del"]:not(.no):not(.nm) { display: inline-flex !important; margin-left: auto; } .card.card-s .card-h button[data-a="del"], .card.card-xs .card-h button[data-a="del"] { padding: 0 4px; min-width: 0; font-size: 11px; line-height: 16px; opacity: .75; } .card.card-s .card-h button[data-a="del"]:hover, .card.card-xs .card-h button[data-a="del"]:hover { opacity: 1; color: #ff8a80; } #stripTools .cardsz { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; } #stripTools .cardsz input { width: 70px; } /* a library clip dragged over the block strip / timeline; a clip just saved from a video flashes in the list */ #strip.lib-drop, #scrubWrap.lib-drop { outline: 2px dashed #62b9ff; outline-offset: -2px; background-color: #62b9ff14; } #lib .clip[draggable=true] { cursor: grab; } #lib .clip.lib-new { animation: libNew 0.8s ease-in-out 3; } @keyframes libNew { 50% { background: #23527a; } } /* library: view toggle, source chips with counts, a grid of small tiles, category headings, folded licences */ .lib-search { display: flex; gap: 6px; align-items: center; } .libhead .lib-search #libSearch { flex: 1; min-width: 0; width: auto; } .seg { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; } .seg button { border: 0; border-radius: 0; padding: 4px 9px; font-size: 13px; line-height: 1.1; background: transparent; color: var(--muted); } .seg button.on { background: var(--accent); color: var(--accent-ink); } .chips button .n { opacity: .62; font-size: 10px; } .libhead .lib-src { margin-bottom: 0; } .lib-src button { font-size: 11px; padding: 2px 8px; } .lib-src[hidden] { display: none; } #lib .lib-group { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 10px 2px 3px; border-bottom: 1px solid var(--line); } #lib .lib-group.attack { color: var(--c-attack); } #lib .lib-group.block { color: var(--c-block); } #lib .lib-group.evade { color: var(--c-evade); } #lib .lib-group.hit_reaction { color: var(--c-hit); } #lib.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; padding-top: 2px; } #lib.lib-grid .lib-group, #lib.lib-grid .lib-more, #lib.lib-grid .lib-none { grid-column: 1 / -1; } #lib.lib-grid .clip.tile { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; position: relative; min-width: 0; } #lib.lib-grid .clip.tile canvas.lib-mini { width: 100%; margin: 0; border-radius: 5px; } #lib.lib-grid .tile .meta { min-width: 0; } #lib.lib-grid .tile .library-name { font-size: 11px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: normal; min-height: 2.5em; } #lib.lib-grid .tile .tg { line-height: 1; } #lib.lib-grid .tile .tg .tag { font-size: 9.5px; padding: 0 5px; margin: 2px 3px 0 0; } #lib.lib-grid .tile .library-state { position: absolute; top: 5px; left: 6px; margin: 0; padding: 0 4px; border-radius: 4px; background: #0d1015cc; font-size: 9.5px; } #lib.lib-grid .tile .lib-acts { display: flex; max-width: none; flex-wrap: nowrap; gap: 2px; justify-content: stretch; } #lib.lib-grid .tile .lib-acts button { flex: 1 1 0; min-width: 0; padding: 1px 0; font-size: 11px; } #lib.lib-grid .clip.tile.lib-selected { border-color: #62b9ff; } #lib.lib-grid .clip.tile.lib-playing { border-color: #57d48a; } .lib-more { width: 100%; margin: 8px 0; } .lib-none { padding: 10px 2px; } .tag.gen { color: #c9a2ff; border-color: #4b2f73; } .lib-credits { margin: 16px 0 4px; font-size: 10.5px; color: var(--muted); opacity: .65; } .lib-credits summary { cursor: pointer; } .lib-credits p { margin: 4px 0; overflow-wrap: anywhere; } .lib-credits a { color: inherit; } #lib .lib-group.generated { color: #c9a2ff; border-bottom-color: #4b2f73; } #lib.lib-grid .clip.tile.gen { background: #1d1726; } /* the tab bar sticks to the very top (the header above it scrolls away), the library's filter bar right under it */ #tabs { top: 0; } .lib-search #libCols { flex: none; width: auto; padding: 3px 4px; font-size: 12px; } .lib-search #libCols[hidden] { display: none; } /* ↺ reset of a section's sliders, at the right end of its header */ details.csec > summary { position: relative; } .csec-reset { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); padding: 0 6px; font-size: 12px; line-height: 18px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); opacity: .7; } .csec-reset:hover { opacity: 1; color: var(--text); border-color: var(--line2); } .rag-grp-t { position: relative; } .rag-grp-t .grp-reset { text-transform: none; letter-spacing: 0; font-weight: 400; } /* ---------- timeline (the user 2026-10-05: clearly visible blocks; the transitions minimal, as marks ABOVE the clips) */ #timelineBlocks { margin: 6px 9px 0 5px; border-radius: 6px; background: #0a0f15; box-shadow: inset 0 0 0 1px #1d2733; } #transport .timeline-block { height: 24px; padding: 0 6px 0 4px; gap: 6px; border: 1px solid color-mix(in srgb, var(--bc) 55%, #0a0f15); border-left: 4px solid var(--bc); border-radius: 5px; color: #f3f7fb; font-size: 12px; font-weight: 600; line-height: 16px; text-shadow: 0 1px 2px #000a; background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 36%, #151c24), color-mix(in srgb, var(--bc) 22%, #10161d)); } #transport .timeline-block span { opacity: 1; } #transport .timeline-block .tl-no { min-width: 18px; height: 17px; font-size: 11px; border-radius: 4px; text-shadow: none; } #transport .timeline-block.enemy { box-shadow: inset 0 -3px 0 #f26961; } #transport .timeline-block:hover, #transport .timeline-block.jhl { color: #fff; border-color: var(--bc); background: color-mix(in srgb, var(--bc) 46%, #151c24); } #transport .timeline-block.active { color: #fff; background: color-mix(in srgb, var(--bc) 52%, #151c24); box-shadow: 0 0 0 1px var(--bc), 0 0 12px color-mix(in srgb, var(--bc) 60%, transparent); } #transport .timeline-block.sel { color: #fff; outline: 2px solid #fff; outline-offset: 1px; } #transport .tl-gap { bottom: auto; } /* a transition: a small pill on the rail above the two blocks, as long as the crossfade, one colour running into the next, a notch pointing at where the blocks meet; its edges drag its length, a click opens its settings */ /* the crossfade between two bars of a row: the previous block's colour fading out under the diagonal, the next one's fading in above it; its length on hover / while dragging (a label above it) */ #transport .tl-junc { position: absolute; z-index: 3; min-width: 0; padding: 0; border: 0; border-radius: 4px; transform: translateX(-50%); cursor: pointer; background: linear-gradient(to top right, transparent calc(50% - .8px), #ffffffb0 50%, transparent calc(50% + .8px)), linear-gradient(to top right, color-mix(in srgb, var(--c1) 60%, #0b0f14) 50%, color-mix(in srgb, var(--c2) 60%, #0b0f14) 50%); } #transport .tl-junc::before { content: attr(data-len); position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); display: none; z-index: 8; padding: 1px 6px; border-radius: 6px; background: #0b0f14; color: #e8eef4; font-size: 10.5px; line-height: 13px; white-space: nowrap; box-shadow: 0 0 0 1px #3a4756; pointer-events: none; font-variant-numeric: tabular-nums; } #transport .tl-junc:hover::before, #transport .tl-junc.drag::before { display: block; } /* (the user: a block dragged over the next one stays visible striped after the drop - the crossfade, where the two overlap) */ /* (the striped crossfade is the START of the next block - its colour, joined to its bar; the owner 2026-10-16: "make it clearer the striped part belongs to the orange card") */ #transport .tl-junc:not(.cut) { border-radius: 4px 0 0 4px; container-type: inline-size; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(to right, var(--c1) 0%, color-mix(in srgb, var(--c1) 55%, transparent) 30%, transparent 75%), repeating-linear-gradient(135deg, color-mix(in srgb, var(--c2) 80%, #fff) 0 4px, color-mix(in srgb, var(--c2) 45%, #0b0f14) 4px 9px); box-shadow: inset 0 0 0 1.5px var(--c2); } /* (the label on a crossfade / a pause: icon, what it is, how long - shortened as it gets narrower) */ #transport .tl-junc .jl, #transport .tl-gap .jl { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 6px); padding: 0 6px; height: 17px; border-radius: 9px; background: #0b0f14d9; color: #eef3f8; font-size: 10.5px; font-weight: 600; line-height: 17px; white-space: nowrap; overflow: hidden; pointer-events: none; } #transport .jl b { font-weight: 700; } #transport .jl em { font-style: normal; } #transport .jl s { text-decoration: none; color: #b8c6d4; font-weight: 500; font-variant-numeric: tabular-nums; } @container (max-width: 130px) { #transport .jl em { display: none; } } @container (max-width: 60px) { #transport .jl s { display: none; } #transport .jl { padding: 0 3px; } } @container (max-width: 20px) { #transport .jl { display: none; } } #transport .tl-junc:not(.cut):hover, #transport .tl-junc:not(.cut).drag, #transport .tl-junc:not(.cut).sel { box-shadow: inset 0 0 0 2px var(--c2), 0 0 0 1px #fff8; } #transport .tl-junc .h { position: absolute; top: 0; bottom: 0; width: 6px; border-radius: 3px; background: #fff; cursor: ew-resize; opacity: 0; transition: opacity .12s; } #transport .tl-junc .h.l { left: -3px; } #transport .tl-junc .h.r { right: -3px; } #transport .tl-junc:hover .h, #transport .tl-junc.drag .h { opacity: .9; } #transport .tl-junc:hover, #transport .tl-junc.drag { box-shadow: 0 0 0 1px #fff; } #transport .tl-junc.cut { width: 12px; background: #0b0f14; color: #e8eef4; box-shadow: inset 0 0 0 1px #c8d4e0; display: flex; align-items: center; justify-content: center; font-size: 9px; } #transport .tl-junc span { pointer-events: none; } #transport .tl-junc.drag-hide, #transport .tl-gap.drag-hide { visibility: hidden; } /* a block dragged over another: the overlap striped, with how long the crossfade will be */ #transport .tl-ovl { position: absolute; z-index: 7; height: 24px; pointer-events: none; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #ffb347; background: repeating-linear-gradient(135deg, #ffb34766 0 5px, #ffb34718 5px 10px); } #transport .tl-ovl::before { content: attr(data-len); position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); padding: 1px 6px; border-radius: 6px; background: #ffb347; color: #1a1205; font-size: 10.5px; font-weight: 700; line-height: 13px; white-space: nowrap; } /* the transition's settings (junctionEl .jpanel): one solid panel - a header with the two block numbers, the kind of join, its length, steps; spaced so nothing runs into anything (the user 2026-10-05) */ .junction .jpanel { display: flex; flex-direction: column; gap: 8px; } .junction .jpanel .jt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--text, #e6edf3); text-transform: none; letter-spacing: 0; } .junction .jpanel .jt .jn { display: inline-flex; align-items: center; gap: 2px; color: #9fb1c4; font-size: 11px; font-weight: 800; } .junction .jpanel .jt .jn i { font-style: normal; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; color: #0d1015; background: var(--c1); } .junction .jpanel .jt .jn i + i, .junction .jpanel .jt .jn i:last-child { background: var(--c2); } .junction .jpanel .jt .jx { margin-left: auto; min-width: 0; width: 22px; height: 22px; padding: 0; border-radius: 6px; font-size: 12px; line-height: 20px; } #blocks:not(.aligned) .junction .jpanel .jt .jx { display: none; } .junction .jpanel .jmode { margin: 0; } .junction .jpanel .jmode button { font-size: 12px; padding: 6px 4px; } .junction .jpanel .sl > label, .junction .jpanel .sl > output { font-size: 12px; } .junction .jpanel .chk { font-size: 12px; margin: 0; } .junction .jpanel details.jadv { margin: 0; padding-top: 6px; border-top: 1px solid #2a3542; } .junction .jpanel details.jadv > summary { font-size: 11.5px; } .junction .jpanel .gap-sec { margin: 0; } .junction .jpanel .merge-btn { margin: 0; } #blocks.aligned > .junction.open > .jpanel { width: 228px; margin-top: 8px; padding: 12px 12px 12px; background: #1a222c; border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 0 0 4px #0a0f15, 0 18px 40px #000e; } /* an open transition: only the pill and its panel (the bracket to the two cards ran through the panel's top) */ #blocks.aligned > .junction.open > .jsum { box-shadow: 0 0 0 1px var(--accent), 0 3px 10px #0007; } #blocks.aligned > .junction.open > .jpanel { margin-top: 10px; position: relative; } #blocks.aligned > .junction.open > .jpanel::before { content: ''; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: #1a222c; border-left: 1px solid var(--accent); border-top: 1px solid var(--accent); } /* a block with several reacted blows: the blows as tabs in time order above one reaction card (reactionTabs) */ .rxgroup { display: flex; flex-direction: column; min-width: 0; } .rxgroup > .reaction[hidden] { display: none !important; } .rxgroup > .reaction { border-top-left-radius: 0; } .rxtabs { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: thin; padding-top: 2px; } .rxtab { --tc: var(--c-hit); flex: none; display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 9px 5px; margin-bottom: -1px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #11161c; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; } .rxtab b { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 5px; background: #26303c; color: #d6e0ea; font-size: 10.5px; font-weight: 800; } .rxtab .k { color: var(--tc); } .rxtab[data-type=block], .rxtab[data-type=parry] { --tc: var(--c-block); } .rxtab[data-type=evade] { --tc: var(--c-evade); } .rxtab[data-type=none] { --tc: var(--c-other); } .rxtab[data-type=flinch] { --tc: #ffc2bc; } .rxtab:hover { color: #e6edf3; border-color: var(--line2); } .rxtab.on { position: relative; z-index: 1; background: #171d25; color: #fff; border-color: var(--tc); box-shadow: inset 0 2px 0 var(--tc); } .rxtab.on b { background: var(--tc); color: #0d1015; } /* ---------- UI 2026-10-05: the left panel as 4 numbered steps, a step's pages as sub-tabs */ #tabs { grid-template-columns: repeat(4, 1fr); } #tabs button .stepno { position: absolute; top: 3px; left: calc(50% - 22px); display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #26303c; color: #b9c6d3; font-size: 9.5px; font-weight: 800; } #tabs button.on .stepno { background: var(--accent); color: var(--accent-ink, #0d1015); } .subtabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .subtabs button { border: 0; border-radius: 0; padding: 6px 4px; font-size: 12px; background: #141a21; color: var(--muted); } .subtabs button + button { border-left: 1px solid var(--line); } .subtabs button.on { background: #222c38; color: #fff; box-shadow: inset 0 -2px 0 var(--accent); } /* Jednoduché / Všetko (#uiLevel): the simple level hides the advanced controls */ body.ui-simple .adv { display: none !important; } #uiLevel { margin: 0 0 6px; } #uiLevel button { font-size: 11.5px; padding: 3px 4px; } #projBar .exp-main { margin-left: auto; border-color: var(--accent); color: #fff; background: linear-gradient(100deg, #ff8a3d, #ff3d8b); font-weight: 700; } #projBar .exp-main:hover { filter: brightness(1.1); } /* a block card: its secondary header actions show on hover / when selected (drag the header to reorder) */ .card:not(:hover):not(.sel) .card-h .hact { visibility: hidden; } /* the transition between two cards is only its pill (its settings open in the right panel - openJunction) */ #blocks:not(.aligned) > .junction { width: auto; min-width: 0; max-width: none; min-height: 0; max-height: none; margin: 64px -4px 0; padding: 0; border: 0; background: none; resize: none; overflow: visible; align-self: flex-start; z-index: 2; } #blocks > .junction.open .jsum { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 12px #ff6a3d55; color: #fff; } /* in the right panel */ .junction.in-insp { width: auto; min-width: 0; max-width: none; min-height: 0; max-height: none; margin: 0; padding: 4px 2px; border: 0; background: none; resize: none; overflow: visible; } #inspTabs .itab.jblk b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #0d1015; font-weight: 800; } /* the open transition on the timeline */ #transport .tl-junc.sel { box-shadow: 0 0 0 2px #fff; } #transport .tl-gap.sel { border-color: var(--accent); border-style: solid; color: #fff; } #projBar { display: flex; align-items: center; gap: 4px; } #projBar #projName { flex: 1 1 auto; min-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #projBar .icon-only { flex: none; min-width: 0; padding: 4px 7px; } #projBar .exp-main { flex: none; margin-left: 2px; } #tabs button .stepno { top: 2px; left: calc(50% - 26px); } /* quality check as a traffic light: problems first, a click jumps to where they are */ #qc .qc-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; } #qc .qc-row .qd { width: 9px; height: 9px; border-radius: 50%; background: #3fb950; } #qc .qc-row .qd.warnc { background: #e3b341; } #qc .qc-row .qd.bad { background: #f85149; } #qc .qc-row .qd.muted { background: #56657a; } #qc .qc-row.jump { cursor: pointer; } #qc .qc-row.jump:hover { background: #222c38; } #qc .qc-allok { color: #3fb950; padding: 4px 6px; font-weight: 600; } #qc details.qc-ok > summary { cursor: pointer; color: var(--muted); font-size: 11.5px; padding: 6px 6px 2px; } #qc .qc-note { font-size: 11px; margin: 6px; } /* combat rows: me on top, the opponent under me; the other fighter's reactions as quiet segments; blows as ◆ / ◇ */ #transport .tl-lanelab { position: absolute; left: 4px; height: 13px; z-index: 2; font-size: 9.5px; font-weight: 800; letter-spacing: .3px; line-height: 13px; pointer-events: none; text-transform: uppercase; } #transport .tl-lanelab.att { color: #6cb6ff; } #transport .tl-lanelab.opp { color: #f26961; } #transport .tl-react { position: absolute; height: 24px; z-index: 0; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px dashed #56657a; border-radius: 5px; background: repeating-linear-gradient(135deg, #182029 0 6px, #1c2530 6px 12px); color: #9fb1c4; font-size: 11px; line-height: 22px; pointer-events: auto; } #transport .tl-react.t-hit { border-color: #f0605a99; color: #ffb1ab; } #transport .tl-react.t-block, #transport .tl-react.t-parry { border-color: #4c9aff99; color: #a9cbff; } #transport .tl-react.t-evade { border-color: #3fb95099; color: #9fe3a8; } #transport .tl-hit { position: absolute; z-index: 4; width: 16px; height: 16px; min-width: 0; padding: 0; margin-left: -8px; border: 0; border-radius: 4px; background: #0a0f15; color: #f0605a; font-size: 12px; line-height: 16px; cursor: pointer; box-shadow: 0 0 0 1px #0a0f15; } #transport .tl-hit.t-block, #transport .tl-hit.t-parry { color: #4c9aff; } #transport .tl-hit.t-evade { color: #3fb950; } #transport .tl-hit.fl { color: #ffc2bc; } #transport .tl-hit:hover { transform: scale(1.25); box-shadow: 0 0 0 1px #fff; } /* Jednoduché: explanations stay in the tooltips (title) - not as text between the controls */ body.ui-simple .hint, body.ui-simple .hnote, body.ui-simple .reaction .st, body.ui-simple .keys-note { display: none !important; } /* under a block: the reaction card is as wide as the block's card and short (all its settings: right panel) */ .col > .reaction, .col > .rxgroup { width: 100% !important; min-width: 0 !important; max-width: none !important; resize: none; box-sizing: border-box; } .col > .rxgroup > .reaction { width: 100% !important; min-width: 0 !important; max-width: none !important; resize: none; box-sizing: border-box; } .reaction.rmini { min-height: 0; overflow: hidden; cursor: pointer; padding-bottom: 8px; } .reaction.rmini:hover { border-color: #56657a; } .reaction.rmini.open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .reaction.rmini .card-h .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reaction.rmini .rrow { display: flex; gap: 6px; align-items: center; } .reaction.rmini .rrow select { flex: 1; min-width: 0; margin: 0; } .reaction.rmini .rx-more { flex: none; min-width: 0; padding: 3px 8px; } .rxtabs { max-width: 100%; } .rxtab { padding: 4px 7px 5px; } /* the full reaction editor in the right panel */ .reaction.in-insp { width: auto; min-width: 0; max-width: none; min-height: 0; max-height: none; resize: none; overflow: visible; border: 0; background: none; padding: 0 2px; } .reaction.in-insp::before { display: none; } /* the preview is the same size on every card, whatever the card's width (a narrow card shows its middle) */ .card .mini-w { overflow: hidden; } .card .mini-w canvas.mini { width: calc(220px * var(--cs, 1)) !important; max-width: none; flex: none; } .card .mini-w .mini-pp { right: calc(50% - 110px * var(--cs, 1) + 6px); } /* the blow tabs never widen the column: they share the card's width (scrolling only when there are very many) */ .rxtabs { width: 0; min-width: 100%; } .rxtab { flex: 1 1 0; min-width: 44px; justify-content: center; gap: 3px; padding: 4px 3px 5px; overflow: hidden; white-space: nowrap; } .rxtab .t { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; } /* markers (blows, keyframes, ragdoll) sit on the rail above the clip - never over its name; the row label on the right */ #transport .tl-lanelab { left: auto; right: 6px; } #transport .tl-hit { width: 14px; height: 13px; margin-left: -7px; font-size: 11px; line-height: 13px; } #transport .tl-key { width: 9px; height: 9px; margin-left: -4.5px; } #transport .tl-rag { top: -3px; width: 16px; height: 16px; font-size: 10px; line-height: 14px; } /* marks on one frame: one badge with their count, a click lists them */ #transport .clustered { visibility: hidden; pointer-events: none; } #transport .tl-cluster { position: absolute; z-index: 5; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px; min-width: 0; height: 14px; padding: 0 4px; border: 0; border-radius: 7px; background: #e6edf3; color: #0a0f15; font-size: 9.5px; font-weight: 800; line-height: 14px; cursor: pointer; box-shadow: 0 0 0 1px #0a0f15; } #transport .tl-cluster b { display: inline-grid; place-items: center; min-width: 12px; height: 12px; border-radius: 6px; background: #ff6a3d; color: #fff; font-size: 9px; } #transport .tl-cluster:hover { box-shadow: 0 0 0 1px #fff, 0 0 8px #ff6a3d88; } .cluster-pop { min-width: 220px; max-width: 360px; } .cluster-pop .cl-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; margin: 2px 0; text-align: left; font-size: 12px; background: #141a21; border: 1px solid var(--line); border-radius: 6px; } .cluster-pop .cl-row:hover { border-color: var(--accent); } .cluster-pop .cl-row i { position: static !important; transform: none !important; margin: 0 !important; flex: none; font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; } /* the weapons: always visible under the mode (the user: nobody should have to look for it) */ #weaponRow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; } #weaponRow label { flex: none; margin: 0; font-size: 12px; font-weight: 600; color: var(--text, #e6edf3); } #weaponRow select { flex: 1; min-width: 0; margin: 0; } /* ⚡ simulated hits */ .reaction .rsim { margin-top: 4px; } .reaction .rsrc { flex: 1; margin: 0; } .reaction .rsrc button { font-size: 11px; padding: 3px 4px; } .reaction .rsim .rsim-out { flex: 1; min-width: 0; margin: 0; } .rsim-box { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; padding: 8px; border: 1px solid #3a3f6a; border-radius: 8px; background: #161a2a; } .rsim-box .rsrc button.on, .reaction .rsrc button.on { background: linear-gradient(100deg, #6c5cff, #ff3d8b); color: #fff; } .rsim-pre { display: flex; flex-wrap: wrap; gap: 4px; } .rsim-pre .chip.on { border-color: var(--accent); color: #fff; } #hitSource { margin: 2px 0 6px; } #hitSource button.on[data-s=sim] { background: linear-gradient(100deg, #6c5cff, #ff3d8b); color: #fff; } #lib .lib-sim { grid-column: 1 / -1; margin: 0 0 8px; } .lib-sim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 4px; } .sim-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px; border: 1px solid #3a3f6a; border-radius: 8px; background: linear-gradient(160deg, #1d2138, #151826); text-align: left; } .sim-tile b { font-size: 18px; } .sim-tile span { font-weight: 700; font-size: 12px; color: #fff; } .sim-tile i { font-style: normal; font-size: 10.5px; color: var(--muted); } .sim-tile:hover { border-color: #ff3d8b; box-shadow: 0 0 10px #6c5cff55; } .sim-tile.o-die b { color: #f26961; } .sim-tile.o-fall b { color: #e3b341; } .sim-tile.o-stagger b { color: #8fd8bf; } /* the character's idle: a grid of small animated previews */ .idle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 5px; max-height: 300px; overflow-y: auto; margin: 4px 0 6px; padding-right: 2px; } .idle-tile { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #141a21; min-width: 0; } .idle-tile canvas.mini { width: 100%; height: auto; aspect-ratio: 160 / 110; border-radius: 5px; background: #10161d; } .idle-tile .nm { font-size: 10px; line-height: 1.2; color: #c9d4df; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idle-tile.none { justify-content: center; min-height: 70px; } .idle-tile.other { opacity: .55; } .idle-tile:hover { border-color: #56657a; opacity: 1; } .idle-tile.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .idle-other { margin-bottom: 6px; } /* the idle part of a block (from idle / to idle) on the timeline */ #transport .timeline-block .tl-idle { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: auto; font-style: normal; font-size: 9.5px; font-weight: 700; color: #cfe3ff; letter-spacing: .03em; background: repeating-linear-gradient(135deg, #6cb6ff2e 0 5px, #6cb6ff14 5px 10px); } #transport .timeline-block .tl-idle.in { border-right: 1px dashed #6cb6ff99; } #transport .timeline-block .tl-idle.out { border-left: 1px dashed #6cb6ff99; } #transport .timeline-block .tl-idle { z-index: 0; } #transport .timeline-block .tl-idle::after { content: ''; position: absolute; top: 2px; width: 9px; height: 9px; opacity: .85; background: currentColor; -webkit-mask: var(--kq-sleep) center / contain no-repeat; mask: var(--kq-sleep) center / contain no-repeat; } #transport .timeline-block .tl-idle.in::after { right: 3px; } #transport .timeline-block .tl-idle.out::after { left: 3px; } #transport .timeline-block > .tl-no, #transport .timeline-block > span { position: relative; z-index: 1; } /* the cards / zoom settings: a small button by the time, a dropdown */ #viewMenuWrap { position: relative; flex: none; } #viewBtn { padding: 2px 8px; font-size: 11.5px; white-space: nowrap; } #viewBtn.on { border-color: var(--accent); color: #fff; } #stripTools.view-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 270px; padding: 10px 12px; background: #1a222c; border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 14px 30px #000c; } #stripTools.view-menu[hidden] { display: none; } #stripTools.view-menu .tlzoom { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px; } #stripTools.view-menu .tlzoom[hidden] { display: none !important; } #stripTools.view-menu .tlzoom input[type=range] { flex: 1 1 100px; } #stripTools.view-menu .zh { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--muted); } /* the reaction under a block never widens its column: the block's card sets the width */ .col > .reaction, .col > .rxgroup { width: 0 !important; min-width: 100% !important; } .reaction.rmini .sl { min-width: 0; } #stripTools.view-menu .tlzoom input[type=range] { order: 10; flex: 1 1 100%; } /* a ⚡ simulated reaction on the timeline: from the blow, its right edge drags its length */ #transport .tl-react.sim { border-color: #a78bff; color: #e2d9ff; background: repeating-linear-gradient(135deg, #2a2346 0 6px, #241e3c 6px 12px); } #transport .tl-react.sim .h { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; background: #a78bff; opacity: .5; } #transport .tl-react.sim:hover .h { opacity: 1; } /* the cards a little lower than the timeline: a clear gap and a quiet line between the two (the user) */ #strip { padding-top: 28px !important; border-top: 1px solid #263241; background: linear-gradient(180deg, #0a0e13 0, #10141a 22px), #10141a; } /* the simulation's sliders on the short reaction card: one line each (label, slider, value) - compact */ .rmini .sl.rmini-sl { display: grid; grid-template-columns: 88px 1fr 40px; align-items: center; gap: 4px; margin: 1px 0; } .rmini .sl.rmini-sl label { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rmini .sl.rmini-sl output { font-size: 11px; text-align: right; } /* the value of a slider is a small typing box: barely visible until hovered / focused */ .sl > output[contenteditable] { border: 1px solid rgba(255,255,255,0.07); border-radius: 3px; padding: 0 3px; min-width: 28px; cursor: text; outline: none; line-height: 15px; } .sl > output[contenteditable]:hover { border-color: rgba(255,255,255,0.22); } .sl > output[contenteditable]:focus { border-color: var(--accent, #ff8a3d); background: rgba(0,0,0,0.35); } /* Cieľ zásahu on the reaction card: one compact select */ .rmini .rrow.rtgt select { width: 100%; font-size: 11.5px; padding: 1px 4px; } /* first steps (onboarding, app/41b-onboarding.js) */ #onb { position: fixed; inset: 0; z-index: 60; pointer-events: none; } #onb.onb-center { background: rgba(5, 8, 12, 0.55); pointer-events: auto; } #onb .onb-spot { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(5, 8, 12, 0.55), 0 0 0 2px var(--accent); transition: all 0.25s ease; pointer-events: none; } #onb .onb-card { position: fixed; pointer-events: auto; background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); max-width: calc(100vw - 32px); box-sizing: border-box; } #onb .onb-n { color: var(--muted); font-size: 11.5px; } #onb h3 { margin: 4px 0 6px; font-size: 15px; } #onb p { margin: 0 0 12px; line-height: 1.45; color: var(--text); } #onb .onb-row { display: flex; align-items: center; gap: 8px; } #onb .onb-row span { flex: 1; } #onb .onb-skip { background: none; border: none; color: var(--muted); padding: 4px 2px; cursor: pointer; } #onb .onb-own[hidden] { display: none; } #onb .onb-row button { white-space: nowrap; } .onb-help { font-weight: 700; font-size: 13px; line-height: 1; } /* (the side panel's header: the buttons keep their size, the title gives way - squeezed, the tips / keys / help buttons were 5 px wide) */ #side header .keys-btn { flex-shrink: 0; } #side header h1 { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; } /* pose edit: ✋ Pózovať in the preview, dots on the joints, the small panel */ .pose-btn { margin: -2px 0 -2px -4px; padding: 3px 11px; border-radius: 6px; border: 1px solid var(--accent); background: transparent; color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .pose-btn:hover { border-color: var(--accent); } .pose-btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } body.pose-edit #fighterLegend, body.pose-edit #enemyMarker { display: none; } #poseLayer { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } #poseLayer.off .pose-dot { display: none; } .pose-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: #e6edf3aa; box-shadow: 0 0 0 1px #000a, 0 1px 4px #000c; pointer-events: auto; cursor: grab; touch-action: none; transition: width .1s, height .1s, left .1s, top .1s; } .pose-dot.left { background: #4c9affcc; } .pose-dot.right { background: #ff8a3dcc; } .pose-dot.hip { border-radius: 4px; background: #3fb950cc; width: 14px; height: 14px; left: -7px; top: -7px; cursor: move; } /* (joints the key on this frame changes: a thin white halo pulsing round the dot, the dot keeps its colour - minimal but visible, the owner 2026-10-13; edited by another key: a faint dashed ring) */ .pose-dot.edited::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; border: 1px dashed #ffffff55; pointer-events: none; } .pose-dot.inkey { border-color: #fff; animation: kqKeyPulse 1.4s ease-in-out infinite; } .pose-dot.inkey::after { display: none; } @keyframes kqKeyPulse { 0%, 100% { box-shadow: 0 0 0 1px #000a, 0 0 0 3px #ffffffcc, 0 0 6px 3px #ffffff55; } 50% { box-shadow: 0 0 0 1px #000a, 0 0 0 3px #ffffffcc, 0 0 14px 7px #ffffffaa; } } @media (prefers-reduced-motion: reduce) { .pose-dot.inkey { animation: none; box-shadow: 0 0 0 1px #000a, 0 0 0 3px #ffffffaa; } } .pose-dot:hover, .pose-dot.sel { width: 17px; height: 17px; left: -8.5px; top: -8.5px; } /* (2026-10-13 a little smaller: 14 / 16 / 20 px before) */ .pose-dot.sel { border-color: var(--accent); box-shadow: 0 0 0 3px #ff8a3d55, 0 1px 4px #000c; } .pose-dot:active { cursor: grabbing; } #posePanel { position: absolute; right: 14px; top: 12px; z-index: 4; width: 300px; max-width: calc(100% - 28px); display: grid; gap: 7px; padding: 9px 10px; background: rgba(16,21,28,.94); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.45); font-size: 12.5px; } #posePanel .pp-head { display: flex; align-items: center; gap: 8px; } #posePanel .pp-head span { flex: 1; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #posePanel .pp-done { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; padding: 3px 12px; } #posePanel .pp-mode { display: flex; border: 1px solid var(--line2); border-radius: 7px; overflow: hidden; } #posePanel .pp-mode button { flex: 1; border: 0; border-radius: 0; padding: 5px 6px; font-size: 12px; background: transparent; color: var(--muted); } #posePanel .pp-mode button.on { background: var(--panel3); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); } #posePanel .pp-resets { display: flex; gap: 6px; } #posePanel .pp-resets button { flex: 1; font-size: 11.5px; padding: 4px 6px; } /* (the selected joint, its rings' colours and the hint: a small box top-left of the view - the owner 2026-10-13) */ #poseInfo { position: absolute; left: 12px; top: 12px; z-index: 4; width: 210px; max-width: calc(100% - 24px); display: grid; gap: 4px; padding: 6px 8px; background: rgba(16,21,28,.82); border: 1px solid var(--line2); border-radius: 8px; font-size: 11.5px; pointer-events: none; } #poseInfo #ppSel { color: var(--text); font-weight: 650; } #poseInfo .pp-hint { color: var(--muted); font-size: 10.5px; line-height: 1.35; } @media (max-width: 1280px), (max-height: 760px) { #posePanel { width: 250px; gap: 5px; padding: 7px 8px; } #poseInfo .pp-hint { display: none; } } /* pose edit rings (one per way the joint turns) and IK handles */ .pose-gz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .pose-gz .gz-ring { fill: none; stroke-width: 2; opacity: .85; filter: drop-shadow(0 0 2px #000); pointer-events: none; } .pose-gz .gz-ring.hover, .pose-gz .gz-ring.on { stroke-width: 3.5; opacity: 1; } .pose-gz .gz-arr { stroke: #000a; stroke-width: .8; pointer-events: none; } .pose-gz .gz-hit { fill: none; stroke: transparent; stroke-width: 10; pointer-events: stroke; cursor: grab; touch-action: none; } .pose-gz .gz-txt { fill: #fff; font: 600 12px system-ui, sans-serif; paint-order: stroke; stroke: #000c; stroke-width: 3px; } .pose-dot.ik { border-radius: 3px; transform-origin: center; } .pose-dot.ik::before { content: ''; position: absolute; inset: 2px; border: 1.5px solid #ffd166; border-radius: 2px; } .pose-dot.ik { cursor: move; } #poseInfo .pp-rings { display: grid; gap: 2px; } #poseInfo .pp-rings:empty { display: none; } #poseInfo .pp-ring { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text); } #poseInfo .pp-ring i { width: 16px; height: 4px; border-radius: 2px; flex-shrink: 0; } #poseLayer .pose-dot.sel, #poseLayer .pose-dot.sel:focus, #poseLayer .pose-dot.sel:hover { background: #fff; border-color: var(--accent); } /* pose keys: the panel's switch + blend, the timeline's ◆ with its blend window */ #posePanel .pp-key { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; color: var(--text); cursor: pointer; } #posePanel .pp-keybox { display: grid; gap: 4px; padding: 6px 7px; border: 1px solid var(--line2); border-radius: 7px; background: #0b1016; } #posePanel .pp-keyrow { display: flex; align-items: center; gap: 5px; } #posePanel .pp-keyrow span { flex: 1; font-size: 11.5px; color: var(--muted); } #posePanel .pp-keyrow button { font-size: 11px; padding: 2px 7px; } #posePanel .pp-del { color: #ffb4ae; } #posePanel .pp-blend { display: grid; grid-template-columns: 52px 64px minmax(44px, 1fr) 34px; align-items: center; gap: 5px; margin: 0; font-size: 12px; color: var(--muted); } #posePanel .pp-blend select { font-size: 11.5px; padding: 2px 3px; } #posePanel .pp-blend span { white-space: nowrap; } #posePanel .pp-blend input:disabled { opacity: .3; } #posePanel .pp-note { font-size: 11.5px; color: var(--muted); line-height: 1.35; } #posePanel .pp-note.warn { color: #ffd166; } #posePanel .pp-keybtns button { flex: 1; } #posePanel .pp-blend output { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; } /* a pose key's blend window (picked / hovered key only): a thin band at the foot of the rail, strongest at the ◆ */ /* the key's blend: a wave, full at the key, fading to nothing at both ends - always shown, clearly visible */ #transport .tl-pkey-bar { position: absolute; z-index: 3; height: 7px; margin-top: -3px; pointer-events: none; display: block; background: linear-gradient(90deg, #ffd16600 0%, #ffd166cc var(--mid, 50%), #ffd16600 100%); /* (the same wave on both sides of the key, each scaled to its own side's length - fixed points squeezed the shorter side) */ clip-path: polygon(0 100%, calc(var(--mid, 50%) * 0.2) 96%, calc(var(--mid, 50%) * 0.44) 84%, calc(var(--mid, 50%) * 0.68) 62%, calc(var(--mid, 50%) * 0.9) 12%, var(--mid, 50%) 0, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.1) 12%, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.32) 62%, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.56) 84%, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.8) 96%, 100% 100%); } #transport .tl-pkey-bar { opacity: .35; transition: opacity .12s; } #transport .tl-pkey-bar.on { display: block; opacity: 1; z-index: 4; filter: drop-shadow(0 0 3px #ffd166aa); } #transport .tl-pkey-bar.hold-in { clip-path: polygon(0 0, var(--mid, 50%) 0, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.1) 12%, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.32) 62%, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.56) 84%, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.8) 96%, 100% 100%, 0 100%); } #transport .tl-pkey-bar.hold-out { clip-path: polygon(0 100%, calc(var(--mid, 50%) * 0.2) 96%, calc(var(--mid, 50%) * 0.44) 84%, calc(var(--mid, 50%) * 0.68) 62%, calc(var(--mid, 50%) * 0.9) 12%, var(--mid, 50%) 0, 100% 0, 100% 100%); } #transport .tl-pkey-bar.hold-in.hold-out { clip-path: none; } #transport .tl-pkey-bar.temp { opacity: .6; } #transport .tl-pblend { position: absolute; z-index: 6; width: 10px; height: 9px; min-width: 0; padding: 0; margin-left: -5px; border: 0; background: transparent; cursor: ew-resize; touch-action: none; display: none; } #transport .tl-pblend.on { display: block; } #transport .tl-pblend::after { content: ''; position: absolute; left: 4.5px; top: 0; width: 1.5px; height: 9px; border-radius: 1px; background: #ffd166; } #transport .tl-pblend:hover::after, #transport .tl-pblend.drag::after { width: 3px; left: 3.5px; box-shadow: 0 0 0 1px #fff; } #transport .tl-pkey { position: absolute; z-index: 5; width: 8px; height: 8px; min-width: 0; padding: 0; margin: 2px 0 0 -4px; border: 1px solid #0008; background: #ffd166; transform: rotate(45deg); border-radius: 1.5px; cursor: ew-resize; touch-action: none; box-shadow: none; } #transport .tl-pkey::before { content: ''; position: absolute; inset: -5px; } /* (a bigger grab area than the small mark) */ #transport .tl-pkey:hover { box-shadow: 0 0 0 1.5px #fff; } #transport .tl-pkey.sel { background: #fff; box-shadow: 0 0 0 1.5px #ffd166, 0 0 5px #ffd166aa; } #posePanel .pp-keytop { display: flex; align-items: center; gap: 10px; } #posePanel .pp-add { background: #ffd166; color: #1a1404; border-color: #ffd166; font-weight: 650; padding: 4px 11px; font-size: 12px; } #posePanel .pp-add:disabled { opacity: .45; } #posePanel .pp-temp { font-size: 11.5px; color: #ffd166; background: #2a2208; border: 1px solid #5c4614; border-radius: 6px; padding: 4px 7px; } #posePanel .pp-add.pulse { box-shadow: 0 0 0 2px #ffd16688; animation: ppPulse 1.2s ease-in-out infinite; } @keyframes ppPulse { 50% { box-shadow: 0 0 0 5px #ffd16622; } } @media (prefers-reduced-motion: reduce) { #posePanel .pp-add.pulse { animation: none; } } #transport .tl-pkey.temp { background: transparent; border: 1.5px dashed #ffd166; cursor: default; } /* ✨ Magic Heal */ #transport .magic-btn { font-weight: 800; letter-spacing: .4px; color: #fff; border: 1px solid #b07cff; background: linear-gradient(100deg, #7b5cff, #c54dff 55%, #ff5fa8); box-shadow: 0 0 10px #a46bff55; white-space: nowrap; } #transport .magic-btn:hover { filter: brightness(1.12); } #transport .phys-btn { font-weight: 800; letter-spacing: .4px; white-space: nowrap; border: 1px solid #3d6f8f; background: #1b2a35; color: #9cc8e6; } #transport .phys-btn.on { color: #fff; border-color: #5fd0ff; background: linear-gradient(100deg, #1477c9, #19b6d9); box-shadow: 0 0 10px #3fc4ff55; } #transport .phys-amt:disabled { opacity: .45; } .phys-sec .phys-head { margin: 6px 0 8px; } .phys-sec .phys-toggle { width: 100%; padding: 10px 12px; font-weight: 800; letter-spacing: .3px; border-radius: 8px; border: 1px solid #3d6f8f; background: #1b2a35; color: #9cc8e6; cursor: pointer; } .phys-sec .phys-toggle.on { color: #fff; border-color: #5fd0ff; background: linear-gradient(100deg, #1477c9, #19b6d9); box-shadow: 0 0 12px #3fc4ff55; } .phys-sec .hint { margin: 6px 0 10px; } #transport .magic-scope { width: auto; max-width: none; margin-left: -4px; font-size: 12px; flex: none; } .kq-off-magic #magicScope { display: none !important; } #transport .magic-btn.busy { opacity: .75; cursor: progress; animation: mgPulse 1s ease-in-out infinite; } @keyframes mgPulse { 50% { box-shadow: 0 0 18px #c54dffaa; } } @media (prefers-reduced-motion: reduce) { #transport .magic-btn.busy { animation: none; } } .magic-pop { position: absolute; right: 12px; top: 56px; z-index: 6; width: min(340px, calc(100% - 28px)); max-height: calc(100% - 130px); overflow: auto; padding: 10px 12px; background: rgba(18,14,30,.96); border: 1px solid #7b5cff; border-radius: 10px; box-shadow: 0 8px 28px #000a; font-size: 12.5px; } .magic-pop .mg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .magic-pop .mg-head span { flex: 1; color: var(--muted); } .magic-pop .mg-x { padding: 2px 8px; } .magic-pop .mg-ok { color: #7dff9a; } .magic-pop .mg-blk { padding: 6px 0; border-top: 1px solid #ffffff14; } .magic-pop .mg-bt { font-weight: 650; margin-bottom: 3px; } .magic-pop .mg-f { color: var(--muted); cursor: pointer; padding: 1px 0; } .magic-pop .mg-f:hover { color: var(--text); } .magic-pop .mg-tools { display: flex; gap: 8px; margin-top: 6px; } #posePanel .pp-swivel { display: flex; align-items: center; gap: 6px; font-size: 12px; } #posePanel .pp-swivel span { color: var(--muted); min-width: 52px; } #posePanel .pp-swivel button { font-size: 11.5px; padding: 2px 9px; } /* the selected joint's rings are above every dot (a ring grabbed never picks another joint); other dots dimmed */ #poseLayer .pose-gz { z-index: 3; } #poseLayer .pose-dot { z-index: 2; } #poseLayer .pose-dot.sel { z-index: 4; } #poseLayer.has-sel .pose-dot:not(.sel) { opacity: .55; } #poseLayer.has-sel .pose-dot:not(.sel):hover { opacity: 1; } /* the public web site (site.js public): what changes the shared library, needs an AI / cloud key, the video lab or the local Unity editor is not shown to customers (app/02b-site.js) */ .kq-public .kq-local { display: none !important; } .kq-noworker .kq-needs-worker { display: none !important; } /* (the web site without its render worker: no own characters yet) */ /* Magic Heal: the round it is in (1/3 blocks, 2/3 transitions, 3/3 duel) */ .magic-btn[data-step]::after { content: " " attr(data-step); opacity: .8; font-weight: 400; } /* Magic Heal: the fixes as check boxes (untick = keep that place as it was) */ #magicPop .mg-fixes { margin: 6px 0 8px; padding: 6px 8px; border: 1px solid var(--line, #333); border-radius: 6px; } #magicPop .mg-fix { display: block; margin: 3px 0; cursor: pointer; } /* 💬 assistant (app/36b-chat.js): a panel in the preview's corner - the character stays visible */ #viewCtl .chat-btn { font-weight: 600; } #chatPanel { position: absolute; left: 14px; bottom: 12px; z-index: 5; width: 340px; max-width: calc(100% - 28px); height: min(420px, 70%); display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; background: rgba(16,21,28,.95); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.45); font-size: 12.5px; } #chatPanel .chat-head { display: flex; align-items: center; gap: 8px; } #chatPanel .chat-head b { flex: 1; } #chatPanel .chat-mode { display: flex; border: 1px solid var(--line2); border-radius: 7px; overflow: hidden; } #chatPanel .chat-mode button { border: 0; border-radius: 0; padding: 3px 9px; font-size: 12px; background: transparent; color: var(--muted); } #chatPanel .chat-mode button.on { background: var(--panel3); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); } #chatPanel .chat-x { padding: 2px 7px; } #chatLog { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; } #chatLog .chat-msg { max-width: 92%; padding: 6px 9px; border-radius: 9px; white-space: pre-line; line-height: 1.4; } #chatLog .chat-msg.me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 3px; font-weight: 550; } #chatLog .chat-msg.bot { align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); border-bottom-left-radius: 3px; } #chatPanel .chat-ex { display: flex; flex-wrap: wrap; gap: 4px; } #chatPanel .chat-ex button { padding: 2px 8px; font-size: 11.5px; border-radius: 12px; background: var(--panel2); color: var(--muted); } #chatPanel .chat-ex button:hover { color: var(--text); border-color: var(--accent); } #chatPanel .chat-step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); overflow: hidden; } #chatPanel .chat-step i { font-style: normal; font-size: 11.5px; padding: 0 4px; color: var(--text); white-space: nowrap; } #chatPanel .chat-step button { border: 0; border-radius: 0; padding: 2px 9px; font-size: 13px; font-weight: 600; color: var(--text); } #chatPanel .chat-step button:hover { background: var(--accent); color: var(--accent-ink); } #chatPanel .chat-step.chat-last { border-color: var(--accent); } #chatPanel .chat-ex .chat-tool { color: var(--text); } #chatForm { display: flex; gap: 6px; } #chatForm input { flex: 1; min-width: 0; padding: 7px 9px; } #chatForm button { padding: 6px 12px; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; } @media (max-width: 1280px), (max-height: 760px) { #chatPanel { width: 290px; height: min(340px, 72%); } } #chatPanel .chat-mode button.dis { opacity: .45; cursor: not-allowed; } /* Ctrl held over the timeline / cards: the wheel zooms the timeline - a magnifier cursor says so */ body.kq-ctrl #transport, body.kq-ctrl #transport *, body.kq-ctrl #strip, body.kq-ctrl #strip * { cursor: zoom-in !important; } /* the timeline track: a little room above the first row's marks and below the last row's blocks (TL_PAD, TL_LANE) */ #timelineBlocks { border-top: 19px solid transparent; } /* the frames, always faintly visible: every other frame (or group of frames, zoomed out) a shade lighter, over the blocks too - never takes the mouse; a thin ruler above the rows: a tick per stripe, the frame number every ~70 px */ #timelineBlocks.frames::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background-image: repeating-linear-gradient(90deg, transparent 0 var(--fw), #ffffff08 var(--fw) calc(var(--fw) * 2)); } #timelineBlocks .tl-ruler { position: absolute; left: 0; right: 0; top: -17px; height: 13px; pointer-events: none; z-index: 1; background-image: repeating-linear-gradient(90deg, #ffffff30 0 1px, transparent 1px var(--fw)); background-size: 100% 3px; background-position: 0 100%; background-repeat: no-repeat; } #timelineBlocks .tl-ruler span { position: absolute; top: 0; transform: translateX(-50%); font-size: 8.5px; line-height: 9px; color: #6f7f90; font-variant-numeric: tabular-nums; } #timelineBlocks .tl-ruler span::after { content: ''; position: absolute; left: 50%; top: 9px; width: 1px; height: 4px; background: #ffffff55; } #timelineBlocks .tl-ruler span:first-child { transform: none; } #timelineBlocks .tl-ruler span:first-child::after { left: 0; } /* 🧲 where a dragged block clings */ #timelineBlocks .tl-snap { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed #6cf0c2; z-index: 8; pointer-events: none; transform: translateX(-.75px); } /* ---- the public web site: account chip, the export dialog, parts switched off in the admin (KQ_FEATURES) ---- */ .kq-pub { display: none !important; } .kq-public .kq-pub:not([hidden]) { display: inline-flex !important; } /* (back to the web site: the logo itself, with ‹ before it on the web - the owner 2026-10-16: "no way back to the web"; 2026-10-17: the separate button took a whole row) */ .web-back { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; pointer-events: none; } .kq-public .web-back { pointer-events: auto; cursor: pointer; border-radius: 8px; gap: 3px; } .kq-public .web-back:hover .brand { filter: brightness(1.2); } .kq-public .web-back:hover .wb-arrow { color: #fff; transform: translateX(-2px); } .web-back .wb-arrow { font-size: 20px; line-height: 1; font-weight: 700; color: #9fb1c4; margin-right: 1px; transition: transform .12s, color .12s; } .acct-chip { align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 11.5px; font-weight: 650; text-decoration: none; white-space: nowrap; color: #fff; background: linear-gradient(100deg, #ffb13d, #ff6a3d 55%, #ff3d8b); max-width: 170px; overflow: hidden; text-overflow: ellipsis; } .acct-chip.in { background: #1a222c; color: #e8eef4; border: 1px solid #3a4756; } .kq-gate { position: fixed; inset: 0; z-index: 1000; background: #05070dcc; display: flex; align-items: center; justify-content: center; padding: 16px; } .kq-gate[hidden] { display: none; } .kq-gate-box { width: 100%; max-width: 440px; background: #141a2d; border: 1px solid #2a3550; border-radius: 16px; padding: 24px; box-shadow: 0 30px 80px #000c; } .kq-gate-box h3 { margin: 0 0 8px; font-size: 19px; color: #fff; } .kq-gate-box p { margin: 0 0 18px; color: #b8c4d2; font-size: 14px; line-height: 1.55; } .kq-gate-acts { display: flex; gap: 8px; flex-wrap: wrap; } .kq-gate-acts a, .kq-gate-acts button { padding: 9px 16px; border-radius: 10px; font-weight: 650; font-size: 14px; text-decoration: none; color: #e8eef4; border: 1px solid #3a4756; background: transparent; cursor: pointer; } .kq-gate-acts a.primary { border: 0; color: #fff; background: linear-gradient(100deg, #ffb13d, #ff6a3d 55%, #ff3d8b); } .kq-gate-acts button { margin-left: auto; } .kq-off-video #vmDrop, .kq-off-video #vmModal, .kq-off-video #liveBtn, .kq-off-video #liveModal, .kq-off-video #vmSampleBtn, .kq-unity #vmSampleBtn { display: none !important; } /* (inside Unity the live camera is on although video to animation is not - the owner 2026-10-18; its data from the web site) */ .kq-unity-live.kq-off-video #liveBtn { display: block !important; } .kq-unity-live.kq-off-video #liveModal:not([hidden]) { display: block !important; } /* "try the sample": the result at once, without one's own video (the owner: "lure every visitor to try it") */ .sample-btn { width: 100%; margin-top: 6px; padding: 9px 10px; border-radius: var(--r); border: 1px solid var(--accent); background: linear-gradient(90deg, #ff8a3d22, #ff3d8b22); color: var(--text); font-weight: 650; font-size: 12.5px; cursor: pointer; } .sample-btn:hover { background: linear-gradient(90deg, #ff8a3d44, #ff3d8b44); } .sample-btn .muted { font-weight: 400; font-size: 11px; } /* the Library's actions (upload, video, sample, live camera, own character): one size, title over a one-line note - the owner 2026-10-31 */ .lib-acts > .drop, .lib-acts > .sample-btn { box-sizing: border-box; width: 100%; height: 54px; margin-top: 6px; padding: 7px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; text-align: center; border-radius: var(--r); line-height: 1.3; overflow: hidden; } .lib-acts > .drop b, .lib-acts > .sample-btn b { font-size: 13px; font-weight: 700; } .lib-acts > * > .muted { font-size: 11px; font-weight: 400; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the owner 2026-11-02: the same actions as one compact row of small tiles (icon + short word, the whole text on hover) over the sub-tabs of Knižnica AND Z textu - the library page holds only clips (Unity's panel keeps its own layout); the tiles and the Knižnica / Z textu switch under them share one look: frame, background, radius, type */ :root:not(.kq-unity-panel) #addActs { display: flex; gap: 5px; margin: 2px 0 6px; container-type: inline-size; } :root:not(.kq-unity-panel) #addActs > :is(.drop, .sample-btn) { border: 1px solid #33405a; background: #121821; color: #c9d6e3; } :root:not(.kq-unity-panel) #addActs > :is(.drop, .sample-btn):is(:hover, :focus-visible, .over) { border-color: var(--accent); background: #1c2430; color: #fff; } @container (max-width: 330px) { :root:not(.kq-unity-panel) #addActs b { font-size: 9px; letter-spacing: -.15px; } :root:not(.kq-unity-panel) #addActs > * { padding: 4px 1px !important; } #addActs .act-ic { font-size: 13px; } } :root:not(.kq-unity-panel) #addActs > .drop, :root:not(.kq-unity-panel) #addActs > .sample-btn { flex: 1 1 0; min-width: 0; width: auto; height: 46px; margin: 0; padding: 4px 2px; gap: 0; } :root:not(.kq-unity-panel) #addActs > * > .muted { display: none; } :root:not(.kq-unity-panel) #addActs b { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; font-size: 10.5px; font-weight: 650; line-height: 1.15; } :root:not(.kq-unity-panel) #addActs b > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #addActs .act-ic { font-style: normal; font-size: 15px; line-height: 1; } .kq-unity-panel #addActs .act-ic { display: none; } /* the web site while video -> animation is being finished: a "coming soon" card in its place (no action) */ #vmSoon { display: none; } .kq-public.kq-off-video #vmSoon { display: flex; cursor: default; opacity: .75; } .kq-public.kq-off-video #vmDrop { display: none !important; } /* (video to animation runs on the web too - unless the admin switched it off) */ #vmSoon:hover { border-color: inherit; background: inherit; } .kq-off-assistant #chatBtn, .kq-off-assistant #chatPanel { display: none !important; } .kq-off-magic #magicBtn { display: none !important; } /* inside Unity (the KinemIQ Studio package): video to animation + the live camera run in the package (2026-10-18); no "coming soon" card, no bridge to install */ .kq-unity #vmSoon, .kq-unity #expUnityHelp { display: none !important; } /* ---------- inside Unity (16b-unity-link.js): a panel next to the Scene view, like the Inspector - one column, compact controls in KinemIQ's own look; the user's scene is the preview (the app's own view only when picked or while posing) */ .kq-unity-panel { font-size: 12px; } .kq-unity-panel body { background: var(--panel); overflow: hidden; } .kq-unity-panel #app { display: flex; flex-direction: column; height: 100vh; grid-template-columns: none; grid-template-rows: none; } .kq-unity-panel #main, .kq-unity-panel #sideResizer, .kq-unity-panel #inspResizer, .kq-unity-panel #resizer, .kq-unity-panel #inspOpen, .kq-unity-panel #tabs, .kq-unity-panel #modeSel { display: none !important; } .kq-unity-panel #uTop { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--panel); border-bottom: 1px solid var(--line); } .kq-unity-panel #uTop header { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; position: static; border: 0; background: none; } .kq-unity-panel #uTop h1 { font-size: 12px; margin: 0; gap: 4px; } .kq-unity-panel #uTop h1 > span:last-child { display: none; } .kq-unity-panel #uTop .logo-mark { width: 16px; height: 16px; } .kq-unity-panel #uTop .keys-btn { padding: 1px 4px; } .kq-unity-panel #projBar { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; gap: 3px; } .kq-unity-panel #projBar button { padding: 2px 5px; } .kq-unity-panel #projExport { padding: 2px 9px; font-size: 11px; } .kq-unity-panel #transport { flex: none; flex-wrap: wrap; gap: 3px; row-gap: 3px; padding: 3px 6px; border-top: 0; } .kq-unity-panel #transport > button, .kq-unity-panel #transport select, .kq-unity-panel #uTools button, .kq-unity-panel #uTools select { padding: 2px 7px; min-height: 22px; font-size: 11px; } .kq-unity-panel #transport .chk, .kq-unity-panel #time, .kq-unity-panel #endWrap { font-size: 11px; } .kq-unity-panel #scrubScroll { order: 99; flex: 1 1 100%; } .kq-unity-panel #uTools { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; padding: 3px 6px; background: var(--panel2); border-bottom: 1px solid var(--line); } .kq-unity-panel #viewCtl, .kq-unity-panel #weaponRow { position: static; transform: none; left: auto; right: auto; top: auto; bottom: auto; max-width: none; background: none; border: 0; box-shadow: none; padding: 0; gap: 6px 10px; font-size: 11px; } .kq-unity-panel #viewCtl input[type=range] { width: 70px; } .kq-unity-panel #view { display: none; flex: none; height: 36vh; min-height: 160px; border-bottom: 1px solid var(--line); } .kq-unity-own-view #view { display: block; } .kq-unity-panel #strip { --strip-h: 192px; overflow: auto; overscroll-behavior: contain; flex: none; height: 168px; padding: 0 6px 8px; background: var(--bg); border-bottom: 1px solid var(--line); } .kq-unity-panel .u-split { flex: none; height: 6px; margin: -3px 0; position: relative; z-index: 3; cursor: ns-resize; background: transparent; } .kq-unity-panel .u-split::after { content: ''; position: absolute; left: 50%; top: 2px; width: 36px; height: 2px; margin-left: -18px; border-radius: 2px; background: var(--line2); } .kq-unity-panel .u-split:hover::after, .kq-unity-panel .u-split.on::after { background: var(--accent); width: 100%; left: 0; margin-left: 0; } .kq-unity-panel #strip .autow-quick { display: none !important; } /* (the cards are always under their blocks here) */ .kq-unity-panel #transport { border-bottom: 0; } .kq-unity-panel #transport .phys-amt, .kq-unity-panel #transport .magic-scope { width: auto; flex: none; } .kq-unity-panel #uNav { flex: none; display: flex; background: var(--panel2); border-bottom: 1px solid var(--line); } .kq-unity-panel #uNav button { flex: 1; min-width: 0; padding: 4px 2px 3px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kq-unity-panel #uNav button span { margin-right: 3px; } .kq-unity-panel #uNav button.on { color: var(--text); border-bottom-color: var(--accent); background: var(--panel); } .kq-unity-panel #uBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .kq-unity-panel #side { overflow: visible; height: auto; max-height: none; padding: 0 8px 20px; border: 0; } .kq-unity-panel #insp { display: block; border: 0; } .kq-unity-panel #insp[hidden], .kq-unity-panel #side[hidden] { display: none !important; } .kq-unity-panel #dock { flex: none; } .kq-unity-panel .box { padding: 6px 8px; margin: 6px 0; } /* the Unity edition: nothing of the web site (files to download / upload, account, tour, tips) - Unity is the project */ .kq-unity #tipsBtn, .kq-unity #keysBtn, .kq-unity #onbHelp, .kq-unity #kqAcct, .kq-unity #projExport, .kq-unity #libDrop, .kq-unity #libFile, .kq-unity #libDropNote, .kq-unity details.info:has(#libDropNote), .kq-unity #charList, .kq-unity #charDrop, .kq-unity #charUpBtn, .kq-unity #exportProj, .kq-unity #importProj, .kq-unity #expOpen, .kq-unity #expUnity, .kq-unity #importChoice { display: none !important; } /* the Unity bar: what is worked on (character, clip) and the four actions */ #uUnity { flex: none; padding: 5px 8px 6px; background: var(--panel); border-bottom: 1px solid var(--line); } #uUnity .u-info { display: flex; gap: 10px; font-size: 11px; color: var(--muted); margin-bottom: 4px; min-width: 0; } #uUnity .u-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #uUnity .u-char { color: var(--text); } #uUnity .u-acts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } #uUnity .u-acts button { padding: 4px 4px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #uUnity .u-acts button.primary { background: var(--neon); color: #fff; border: 0; } #unityViewSw { display: flex; gap: 1px; padding: 2px; border-radius: 7px; background: var(--bg); border: 1px solid var(--line2); margin-left: auto; } #unityViewSw button { padding: 1px 9px; min-height: 18px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; } #unityViewSw button.on { background: var(--neon); color: #fff; font-weight: 600; } .kq-off-pose #poseBtn { display: none !important; } .kq-off-combat :not(body)[data-mode="combat"] { display: none !important; } /* (never the page itself: body[data-mode] is the project's mode) */ .kq-off-combat #modeSel { display: none !important; } /* (the library off on the web: the Animations tab is the video only - 2026-10-12) */ .kq-off-library #libPacks, .kq-off-library #libHead, .kq-off-library #libEmpty, .kq-off-library #lib, .kq-off-library #libCredits, .kq-off-library #tab-lib > .subtabs, .kq-off-library #tab-gen > .subtabs, .kq-off-library #idleBox { display: none !important; } /* (the combat mode hidden: no mode switch at all - 2026-10-12) */ /* (the web site: the side panel's header keeps the logo whole - "Studio" drops, the account chip gives way) */ .kq-public #side > header h1 { flex-shrink: 0; } .kq-public #side > header h1 > span:not(.brand) { display: none; } .kq-public .acct-chip { flex: 0 0 auto; padding: 0 8px; } /* assistant: where a change goes (◆ key at the playhead / ▬ the whole clip); the AI test switch only in the local studio */ #chatPanel .chat-save { display: flex; margin: 7px 0 1px; background: #0b0f15; border: 1px solid #2c3845; border-radius: 9px; padding: 2px; gap: 2px; white-space: normal; } #chatPanel .chat-save button { flex: 1 1 0; } #chatPanel .chat-head #chatClose { margin-left: auto; } #chatPanel .chat-save button { font-size: 11.5px; padding: 3px 9px; border: 0; border-radius: 7px; background: transparent; color: #9fb1c4; min-width: 0; } #chatPanel .chat-save button.on { background: #ff6a3d; color: #fff; } #chatPanel .chat-ai { margin: 6px 0 0; justify-content: flex-end; opacity: .7; } #chatPanel .chat-ai button { font-size: 10.5px; padding: 2px 8px; } /* 👁 of a Magic Heal fix: the figure without the fix */ .mg-fix { display: flex !important; align-items: center; gap: 6px; } .mg-eye { margin-left: auto; min-width: 0; padding: 1px 7px; font-size: 13px; line-height: 18px; border-radius: 7px; border: 1px solid #3a4756; background: transparent; opacity: .75; } .mg-eye:hover { opacity: 1; border-color: #c08bff; } .mg-eye.on { opacity: 1; background: #6d3fd0; border-color: #c08bff; box-shadow: 0 0 8px #a46cff88; } /* the web site: BETA at the logo */ .kq-public #side > header h1 .brand::after { content: 'BETA'; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; color: #ffd166; border: 1px solid #ffd16666; border-radius: 5px; padding: 0 4px; margin-left: 5px; vertical-align: 3px; -webkit-text-fill-color: #ffd166; } .kq-gate-form { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; } .kq-gate-form textarea { background: #0b0f1c; border: 1px solid #2a3550; border-radius: 10px; padding: 9px 11px; color: #fff; font: inherit; font-size: 14px; resize: vertical; } .kq-gate-form button.primary { align-self: flex-start; padding: 9px 16px; border-radius: 10px; font-weight: 650; border: 0; color: #fff; background: linear-gradient(100deg, #ffb13d, #ff6a3d 55%, #ff3d8b); cursor: pointer; } .kq-gate-form button.primary:disabled { opacity: .5; } /* ⚔ the weapons: top centre of the preview (the user: out of the side panel's way); Simple / All lives in Settings */ #view #weaponRow { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6; margin: 0; padding: 4px 6px 4px 10px; gap: 6px; background: #0b0f15d9; border: 1px solid #2c3845; border-radius: 10px; backdrop-filter: blur(6px); box-shadow: 0 4px 14px #0007; max-width: min(320px, 60%); } #view #weaponRow label { font-size: 11.5px; color: #9fb1c4; } #view #weaponRow select { min-width: 150px; font-size: 12px; padding: 3px 6px; } .uilevel-box { padding: 8px 10px; } .uilevel-box .uil-t { font-size: 11.5px; font-weight: 650; color: var(--muted); margin-bottom: 6px; } .uilevel-box #uiLevel { margin: 0; } .uilevel-box #tlLayout { margin: 0; grid-template-columns: repeat(3, 1fr); } @media (max-width: 1100px) { .tl-layout-box { display: none; } } body.ph .tl-layout-box, .kq-unity-panel .tl-layout-box { display: none; } /* idle: folded, the chosen one in the summary */ .idle-box > summary .idle-now { margin-left: 6px; margin-right: auto; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Library | From text: a big, clear switch */ .subtabs.big { margin: 0 0 10px; border-radius: var(--r); border-color: #33405a; } .subtabs.big button { padding: 5px 6px; font-size: 12px; font-weight: 700; color: #9fb1c4; background: #121821; white-space: nowrap; } .subtabs.big .sub-ic { width: 15px; height: 15px; vertical-align: -3px; } .subtabs.big button.on { color: #fff; background: linear-gradient(180deg, #2a3446, #222c3b); box-shadow: inset 0 -3px 0 var(--accent); } /* neon line icons of the Library / From text switch (the owner 2026-10-31) - like the main tabs' icons */ .subtabs .sub-ic { width: 17px; height: 17px; margin-right: 6px; vertical-align: -4px; opacity: .8; transition: opacity .15s, filter .15s; } .subtabs .sub-lib { color: var(--ncy); filter: drop-shadow(0 0 3px #2ee6ff99); } .subtabs .sub-gen { color: #ff5fd2; filter: drop-shadow(0 0 3px #ff5fd299); } .subtabs button.on .sub-ic, .subtabs button:hover .sub-ic { opacity: 1; } .subtabs button.on .sub-lib { filter: drop-shadow(0 0 4px #2ee6ffdd) drop-shadow(0 0 10px #2ee6ff66); } .subtabs button.on .sub-gen { filter: drop-shadow(0 0 4px #ff5fd2dd) drop-shadow(0 0 10px #ff3d8b66); } .beta-tag { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #ffd166; border: 1px solid #ffd16666; border-radius: 5px; padding: 0 4px; margin-left: 4px; vertical-align: 2px; } /* the library's filters: source (quiet outlines) and category (filled), each with its label */ .chips .chips-lab { flex: 0 0 100%; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 2px 0 -1px; } .lib-src button { background: transparent; border: 1px dashed #3a4756; } .lib-src button.on { background: #2a3446; color: #fff; border: 1px solid #6c8cff; } #libCats { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } /* the export dialog: credits */ .exp-credits { font-size: 12.5px; color: #ffd166; margin: 6px 0 2px; } .exp-next { margin: 8px 0 10px; padding: 9px 10px 10px; border: 1px solid #ff8a3d; border-radius: 10px; background: rgba(255, 138, 61, 0.08); } .exp-next-t { font-size: 13px; font-weight: 600; margin-bottom: 7px; } .exp-next-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 7px; } .exp-next-g button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 9px; border-radius: 9px; text-align: center; line-height: 1.2; } .exp-next-g button:hover { border-color: #ff8a3d; box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.16); } .exp-next-g .kqi, .exp-next-g i { width: 22px; height: 22px; font-size: 20px; font-style: normal; color: #ff9a4a; margin-bottom: 2px; } .exp-next-g b { font-size: 13px; } .exp-next-g small { font-size: 11px; color: var(--muted); } /* (the 🎨 3D look button lies in the preview over the export window's corner - the owner 2026-11-04: "overlapping") */ body:has(#expModal:not([hidden])) #lookBtn { display: none; } .exp-credits.low { color: #ff8a7a; } .sample-pick { position: fixed; z-index: 9500; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); padding: 12px 14px 14px; } .sample-pick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 14px; } .sample-pick-head button { min-width: 0; padding: 2px 8px; } .sample-pick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .sample-card { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; text-align: left; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; } .sample-card:hover { border-color: var(--accent); } .sample-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #000; } .sample-card b { font-size: 13.5px; } .sample-card span { font-size: 11.5px; } .exp-credits.free { color: #7ef0a6; font-weight: 600; font-size: 13.5px; background: rgba(60, 200, 120, 0.12); border: 1px solid rgba(60, 200, 120, 0.35); border-radius: 8px; padding: 6px 10px; } /* ↔ auto: cards aligned to the timeline, a small quiet switch at the cards */ #strip { position: relative; } .autow-quick { position: absolute; top: 4px; right: 8px; z-index: 20; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); opacity: .7; cursor: pointer; } .autow-quick:hover { opacity: 1; } .autow-quick input { width: 12px; height: 12px; margin: 0; } /* the built-in character: its two looks (Manekín / Quaternius), as big as the "use" buttons */ .btnrow .charlook { flex: 1 1 100%; width: 100%; margin: 0; } .btnrow .charlook button { padding: 8px 6px; font-size: 13px; font-weight: 600; } /* notices over the preview (notify): done / did nothing (why) / failed - a click closes one */ #kqToast { position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 9000; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: min(560px, calc(100vw - 32px)); } .kq-toast { pointer-events: auto; cursor: pointer; max-width: 100%; padding: 8px 14px; border-radius: 10px; font-size: 13px; line-height: 1.35; color: #f3f6fa; background: #1b2430; border: 1px solid #2f3d4d; box-shadow: 0 8px 26px rgba(0, 0, 0, .45); animation: kqToastIn .18s ease-out; } .kq-toast.ok { border-color: #2f8f5b; } .kq-toast.ok::before, .kq-toast.warn::before { content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .4em; vertical-align: -.18em; background: #4ed08a; -webkit-mask: var(--kq-check) center / contain no-repeat; mask: var(--kq-check) center / contain no-repeat; } .kq-toast.warn { border-color: #c98a1e; background: #2a2214; } .kq-toast.warn::before { background: #ffb43d; -webkit-mask-image: var(--kq-warn); mask-image: var(--kq-warn); } .kq-toast.bad { border-color: #c4413a; background: #2c1715; } .kq-toast.bad::before { content: '✕ '; color: #ff6b5e; font-weight: 700; } @keyframes kqToastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .kq-toast { animation: none; } } /* ➜ Send to Unity: a clear second action of the export (an icon, a title, what it does) */ #expModal .unity-send { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 10px 14px; text-align: left; background: linear-gradient(135deg, #1d2633, #141b25); color: #f2f5f9; border: 1px solid #3a4a5e; border-radius: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } #expModal .unity-send:hover:not(:disabled) { border-color: #8fb3ff; box-shadow: 0 0 0 3px rgba(143, 179, 255, .18); transform: translateY(-1px); } #expModal .unity-send:disabled { opacity: .6; cursor: progress; } #expModal .unity-send .unity-ico { width: 30px; height: 30px; flex: none; color: #fff; background: #000; border-radius: 8px; padding: 4px; } #expModal .unity-send .unity-t { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; } #expModal .unity-send .unity-t b { font-size: 14px; } #expModal .unity-send .unity-t small { font-size: 11.5px; color: #9fb1c4; } #expModal .unity-send .unity-go { font-size: 18px; color: #8fb3ff; } @media (prefers-reduced-motion: reduce) { #expModal .unity-send { transition: none; } } #expModal .unity-help { display: block; margin: 5px 2px 2px; font-size: 11.5px; color: #8fb3ff; text-decoration: none; } #expModal .unity-help:hover { text-decoration: underline; } #expModal .exp-share { margin: 8px 0 4px; padding: 8px 9px; border: 1px solid var(--line2); border-radius: 9px; background: #ff9a4a12; transition: box-shadow .3s; } #expModal .exp-share.flash { box-shadow: 0 0 0 2px #ff9a4a; } #expModal .exp-share-t { font-size: 13px; margin-bottom: 6px; } #expModal .exp-share-b { display: flex; flex-wrap: wrap; gap: 6px; } #expModal .exp-share-b button { flex: 1 1 auto; } #expModal .exp-share-b button[hidden] { display: none; } #expModal .exp-share #shareInfo { margin-top: 5px; font-size: 11.5px; } #expModal .exp-share.busy #shareInfo { color: #ffb27a; } .kq-gate-acts button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* the account panel inside the app (02b-site.js siteAccount) */ .kq-acct .kq-gate-box { position: relative; max-width: 420px; max-height: calc(100vh - 32px); overflow: auto; } .kq-acct-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: #b8c4d2; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; } .kq-acct-x:hover { color: #fff; } .kq-acct-tabs { display: flex; gap: 6px; margin: 4px 0 14px; } .kq-acct-tabs button { flex: 1; background: #0b0f1c; border: 1px solid #2a3550; color: #b8c4d2; border-radius: 10px; padding: 8px; cursor: pointer; font: inherit; } .kq-acct-tabs button.on { border-color: #ff8a3d; color: #fff; } .kq-acct-google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f !important; border-radius: 10px; padding: 10px 14px; font-weight: 600; text-decoration: none; margin: 4px 0; } .kq-acct-google::before { content: ''; width: 18px; height: 18px; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 4px, #000 5px); mask: radial-gradient(circle, transparent 4px, #000 5px); } .kq-acct-or { display: flex; align-items: center; gap: 10px; color: #8996a8; font-size: 12px; margin: 12px 0; } .kq-acct-or::before, .kq-acct-or::after { content: ''; flex: 1; height: 1px; background: #2a3550; } .kq-acct-form { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; } .kq-acct-form.row { flex-direction: row; align-items: flex-end; } .kq-acct-form.row label { flex: 1; } .kq-acct-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #b8c4d2; } .kq-acct-form input[type=text], .kq-acct-form input[type=email], .kq-acct-form input[type=password] { background: #0b0f1c; border: 1px solid #2a3550; border-radius: 9px; padding: 9px 11px; color: #fff; font: inherit; } .kq-acct-form input:focus { outline: 2px solid #ff8a3d; outline-offset: 1px; } .kq-acct-check { flex-direction: row !important; align-items: center; gap: 6px !important; } .kq-acct-check a { color: #ffb13d; } .kq-acct .kq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; } .kq-acct button { font: inherit; border-radius: 9px; padding: 9px 14px; cursor: pointer; background: #1b2338; border: 1px solid #2a3550; color: #e6ecf5; } .kq-acct button.primary { background: linear-gradient(100deg, #ffb13d, #ff6a3d 55%, #ff3d8b); border: 0; color: #fff; font-weight: 700; } .kq-acct button.danger { background: #c0392b; border: 0; color: #fff; } .kq-acct button:disabled { opacity: .6; cursor: wait; } .kq-acct-link { background: none !important; border: 0 !important; color: #ffb13d !important; padding: 2px 0 !important; text-align: left; text-decoration: underline; } .kq-acct-note { border-radius: 9px; padding: 9px 12px; margin: 8px 0; font-size: 13px; } .kq-acct-note.ok { background: #12372d; color: #9ff0d2; } .kq-acct-note.err { background: #3d1518; color: #ffb4ae; } .kq-acct-warn { background: #3a2b0c; color: #ffd98a; border-radius: 9px; padding: 9px 12px; margin: 8px 0; font-size: 13px; } .kq-acct-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 6px 0 10px; } .kq-acct-facts div { background: #0b0f1c; border: 1px solid #2a3550; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; } .kq-acct-facts span { font-size: 11px; color: #8996a8; text-transform: uppercase; letter-spacing: .05em; } .kq-acct-facts b { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kq-acct-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .kq-acct-small { font-size: 12px; color: #8996a8; margin: 6px 0; } .kq-acct-del { margin-top: 14px; } .kq-acct-del summary { cursor: pointer; color: #ffb4ae; font-size: 13px; } /* after an import: open as a new project / add to the blocks (38-uploads-jobs.js offerImported) */ #importChoice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; padding: 8px 10px; border: 1px solid #2a3550; border-radius: 10px; background: #0f1524; font-size: 13px; } #importChoice span { flex: 1 1 100%; color: #b8c4d2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #importChoice button { flex: 1 1 auto; font: inherit; border-radius: 8px; padding: 6px 10px; cursor: pointer; background: #1b2338; border: 1px solid #2a3550; color: #e6ecf5; } #importChoice button.primary { background: linear-gradient(100deg, #ffb13d, #ff6a3d 55%, #ff3d8b); border: 0; color: #fff; font-weight: 700; } #importChoice button.import-x { flex: 0 0 auto; background: none; border: 0; color: #8996a8; } /* video -> character: the solve after the detection (34-video-mocap.js vmBusy) */ .vm-busy { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(8, 11, 16, .55); pointer-events: none; } .vm-busy-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 24px; border-radius: 14px; background: rgba(15, 21, 36, .92); border: 1px solid #2a3550; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } .vm-busy-box b { color: #fff; font-size: 14px; } .vm-busy-box small { color: #8996a8; font-size: 12px; } .vm-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #2a3550; border-top-color: #ff8a3d; animation: vmSpin .9s linear infinite; } @keyframes vmSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .vm-spin { animation-duration: 2.5s; } } /* Magic Heal docked at the right edge (the character stays visible); folded = only its header (23d-magic-touch.js) */ .magic-pop.mg-folded > :not(.mg-head) { display: none; } .magic-pop.mg-folded { width: auto; } .magic-pop .mg-fold { padding: 2px 8px; } @media (max-width: 700px) { .magic-pop { top: auto; bottom: 52px; right: 8px; left: 8px; width: auto; max-height: 45%; } } /* the busy sign on the 3D view (whenever something loads or recomputes - busyOn / busyOff) */ #kqBusy { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 2px 9px 2px 6px; background: #0d1220; border: 1px solid #2c3a55; border-radius: 999px; color: #dfe6f2; font-size: 11.5px; white-space: nowrap; } #kqBusy[hidden] { display: none; } #kqBusy i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #ffffff33; border-top-color: var(--accent, #ff6a3d); animation: kqSpin .8s linear infinite; } @keyframes kqSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #kqBusy i { animation-duration: 2.4s; } } /* the animation's length: End (seconds) by the time, ⇥ at the end of the timeline */ #transport .end-wrap { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); flex: none; } #transport .end-wrap input { width: 58px; padding: 2px 4px; font-size: 12px; } #transport .tl-end { position: absolute; right: -7px; top: 2px; z-index: 7; width: 14px; height: 18px; min-width: 0; padding: 0; border: 1px solid #ffffff44; border-radius: 4px; background: #1c2533; color: #cfd8e6; font-size: 10px; line-height: 16px; cursor: ew-resize; touch-action: none; } #transport .tl-end:hover, #transport .tl-end.drag { border-color: var(--accent); color: #fff; } #transport .tl-end.set { background: #3a2a14; border-color: #ffb13d; } .reaction .rsim-idle-row select { width: 100%; font-size: 12px; } #idleSet .idle-who { margin-bottom: 8px; } /* (2026-10-12, the owner: "too cramped, make room - mostly vertical": the side panel's top rows breathe now that the mode switch is gone; the header's icons wrap under the logo on a narrow panel instead of covering it) */ #side > header { height: auto; min-height: 44px; flex-wrap: wrap; row-gap: 8px; padding: 8px 0 10px; } #projBar { margin: 12px 0 12px; } #tabs { padding-top: 4px; padding-bottom: 10px; } #tabs button { padding: 9px 2px 8px; } .subtabs { margin: 6px 0 14px; } .subtabs button { padding: 8px 4px; } .tab > .box, .tab > details.box, .tab > .info { margin-top: 12px; } .box { padding: 10px 12px; } /* (a fixed line of what a pose key's ◆ does - shown while the timeline has keys; the owner 2026-10-13) */ #transport .pkey-hint { font-size: 11px; color: var(--muted); margin-left: auto; padding-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #transport .pkey-hint[hidden] { display: none; } #transport .pkey-hint:not([hidden]) + #time { margin-left: 0; } /* ---------- phones (the owner 2026-10-16: "everything smaller, clearer, better ordered - the preview bigger"): one column - the slim header and project bar, the 3D preview big right under it, playback + timeline compact, the cards, then the tabs and their panels; #side's parts join the page's own order (display: contents) */ @media (max-width: 700px) { html, body { font-size: 12.5px; } #app { display: flex; flex-direction: column; height: auto; min-height: 100dvh; } #side { display: contents; } #side > header { order: 1; position: sticky; top: 0; z-index: 20; height: 40px; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--panel); } #side > header h1 { font-size: 15px; } #side > header h1 > span:not(.brand) { display: none; } #side > header button, #side > header select, #side > header a { padding: 3px 6px; min-width: 0; font-size: 11.5px; } #projBar { order: 2; margin: 0; padding: 5px 8px; background: var(--panel); border-bottom: 1px solid var(--line); } #projBar button { padding: 3px 8px; font-size: 11px; } #main { order: 3; display: flex; flex-direction: column; height: auto; } #view { flex: none; height: 56vh; height: 56dvh; min-height: 300px; } #weaponRow { top: 6px; padding: 3px 6px; font-size: 11px; } #weaponRow select { padding: 2px 4px; font-size: 11px; } #viewCtl { left: 6px; right: 6px; bottom: 6px; max-width: none; gap: 6px 10px; padding: 4px 7px; font-size: 11px; } #viewCtl button { padding: 3px 8px; font-size: 11px; } #viewCtl input[type=range] { width: 70px; } #transport { flex-wrap: wrap; gap: 4px 5px; padding: 5px 6px; } #transport button { min-width: 30px; padding: 3px 6px; font-size: 11.5px; } #transport select { padding: 2px 4px; font-size: 11px; width: auto; } #transport .chk { font-size: 11px; margin: 0; } #transport #magicBtn, #transport #physBtn { padding: 3px 7px; font-size: 10.5px; } #transport #endWrap { display: none; } #transport #scrubScroll { order: 10; flex: 1 1 100%; } #time { font-size: 11px; } #resizer { display: none; } #strip { flex: none; max-height: 34vh; padding: 8px 8px 10px; } #dock { order: 4; } #tabs { order: 4; position: sticky; top: 40px; z-index: 19; padding: 0 6px 4px; border-top: 1px solid var(--line); } #tabs button { padding: 5px 2px; font-size: 11px; } #side > .tab { order: 5; padding: 6px 10px 28px; background: var(--panel); } .drop { padding: 7px 8px; } .drop b { font-size: 12px; } } /* (the transport bar compact - the owner 2026-10-16: "smaller, simpler, less height, it must not be in the way"; the timeline itself - ruler, blocks, overview - stays as it was) */ #transport { padding: 3px 10px 6px; gap: 4px; row-gap: 3px; } #transport > button, #transport > .magic-btn, #transport > .phys-btn { min-width: 22px; height: 22px; padding: 0 6px; font-size: 11px; line-height: 20px; border-radius: 5px; } #transport > select, #transport #physAmt, #transport #magicScope, #transport #rate { width: auto; flex: none; height: 22px; padding: 0 4px; font-size: 11px; border-radius: 5px; } #transport #physAmt { margin-left: -3px; } /* (the strength right at its ⚛ button) */ #transport #pkeyHint { display: none !important; } /* (what the ◆ keys do is on their tooltips) */ #transport #time { font-size: 11px; min-width: 0; display: inline-flex; align-items: center; height: 22px; line-height: 1; align-self: center; } /* (was sitting lower than the row) */ #transport .end-wrap { font-size: 11px; } #transport .end-wrap input { width: 38px; height: 20px; padding: 0 4px; font-size: 11px; } #transport > label.chk { font-size: 11px; gap: 3px; } #transport #viewBtn { height: 22px; padding: 0 4px; font-size: 11px; } #transport > button + button { margin-left: -1px; } /* ---------- the Unity panel's zones (the owner 2026-10-18: "each window is for something else but they blend together"): each part is its own card with its own colour - Unity actions orange, tools grey, playback + timeline blue, block cards teal, the pages violet; a coloured edge on the left and a faint tint, gaps of the darker page between them ---------- */ .kq-unity-panel body { background: #090c10; } .kq-unity-panel #app { gap: 5px; padding: 4px 5px 0; } .kq-unity-panel :is(#uUnity, #uTools, #transport, #strip, #uBody) { --zone: var(--line2); border: 1px solid color-mix(in srgb, var(--zone) 45%, var(--line)); border-left: 3px solid var(--zone); border-radius: 8px; } .kq-unity-panel #uTop { border-radius: 8px; border: 1px solid var(--line); } .kq-unity-panel #uUnity { --zone: #ff8a3d; background: color-mix(in srgb, #ff8a3d 7%, var(--panel)); } .kq-unity-panel #uTools { --zone: #8b98a5; background: var(--panel2); } .kq-unity-panel #transport { --zone: #4aa3ff; background: color-mix(in srgb, #4aa3ff 7%, var(--panel)); } .kq-unity-panel #strip { --zone: #2ee6c8; background: color-mix(in srgb, #2ee6c8 5%, #10141a) !important; border-top: 1px solid color-mix(in srgb, #2ee6c8 45%, var(--line)) !important; } .kq-unity-panel #uNav { --zone: #a77bff; border-radius: 8px 8px 0 0; border: 1px solid color-mix(in srgb, #a77bff 45%, var(--line)); border-left: 3px solid #a77bff; border-bottom: 0; margin-bottom: -5px; background: color-mix(in srgb, #a77bff 10%, var(--panel2)); } .kq-unity-panel #uNav button.on { border-bottom-color: #a77bff; } .kq-unity-panel #uBody { --zone: #a77bff; border-radius: 0 0 8px 8px; background: color-mix(in srgb, #a77bff 4%, var(--panel)); } /* (each zone's name, small, in its colour - what the part is for) */ .kq-unity-panel :is(#uUnity, #transport, #strip)::before { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zone); opacity: .9; margin: 0 0 3px; } .kq-unity-panel #uUnity::before { content: var(--zone-unity, "Unity"); } .kq-unity-panel #transport::before { content: var(--zone-time, "Playback · timeline"); flex: 1 1 100%; order: -1; margin: 0; } .kq-unity-panel #strip::before { content: var(--zone-blocks, "Blocks"); position: sticky; left: 0; top: 0; z-index: 2; } .kq-unity-panel .u-split { margin: -5px 0; } .kq-unity-panel #strip { padding-top: 4px !important; } /* (the pages below always keep room - a tall view / card strip squeezed them to nothing and pushed the top bar out of the window, "the small panel is missing"; the view and the strip give way instead) */ .kq-unity-panel #app { overflow: hidden; } .kq-unity-panel #view, .kq-unity-panel #strip { flex-shrink: 1 !important; min-height: 60px; } .kq-unity-panel #uTop, .kq-unity-panel #uUnity, .kq-unity-panel #uTools, .kq-unity-panel #transport, .kq-unity-panel #uNav { flex-shrink: 0; } .kq-unity-panel #uBody { min-height: 150px; } /* (the strip's name in its own line above the cards - over them it covered the first card's number) */ .kq-unity-panel #strip { padding-top: 18px !important; } .kq-unity-panel #strip::before { position: absolute; top: 3px; left: 10px; margin: 0; } /* (inside the panel the block settings scroll with the panel: their own "contain" kept the wheel - over the settings nothing scrolled at all) */ .kq-unity-panel #inspBody { overflow: visible; overscroll-behavior: auto; } /* (the pages' tabs bigger and clearer - the owner: "bigger, more distinct") */ .kq-unity-panel #uNav { padding: 3px 3px 0; gap: 3px; } .kq-unity-panel #uNav button { padding: 8px 4px 7px; font-size: 13px; font-weight: 600; color: var(--muted); border-radius: 7px 7px 0 0; border-bottom-width: 3px; } .kq-unity-panel #uNav button span { font-size: 15px; margin-right: 5px; } .kq-unity-panel #uNav button:hover { color: var(--text); background: color-mix(in srgb, #a77bff 12%, transparent); } .kq-unity-panel #uNav button.on { color: #fff; background: color-mix(in srgb, #a77bff 26%, var(--panel)); border-bottom-color: #c4a6ff; box-shadow: inset 0 1px 0 color-mix(in srgb, #c4a6ff 40%, transparent); } /* (the playback row: every control the same height on one centre line - buttons, time, End, speed, switches, zoom) */ .kq-unity-panel #transport { align-items: center; } .kq-unity-panel #transport > :not(#scrubScroll):not(#tlNav) { height: 26px; min-height: 26px; box-sizing: border-box; display: inline-flex; align-items: center; margin-top: 0; margin-bottom: 0; } .kq-unity-panel #transport > button, .kq-unity-panel #transport select, .kq-unity-panel #transport input:not([type=checkbox]) { height: 26px; min-height: 26px; padding-top: 0; padding-bottom: 0; line-height: 24px; box-sizing: border-box; } .kq-unity-panel #transport #time, .kq-unity-panel #transport #endWrap { gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; } .kq-unity-panel #transport .chk { gap: 3px; } .kq-unity-panel #transport #endWrap input { width: 46px; } /* ---------- ▭ Bloky: the timeline without the card strip (21-timeline.js tlRich) - each block tall with its name, tools, tags and live preview; the crossfade between two blocks the tall two-coloured piece between them ---------- */ .tl-mode button { padding: 2px 8px; font-size: 11.5px; } .kq-tl-rich #main { grid-template-rows: minmax(260px, 1fr) auto 0 0 auto !important; } .kq-tl-rich #strip, .kq-tl-rich #resizer { height: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } .kq-tl-rich #stripTools label.chk, .kq-tl-rich #stripTools .cardsz { display: none !important; } .kq-tl-rich #transport .timeline-block { height: 44px; } .kq-tl-rich #transport .timeline-block.rich { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 20px 15px; row-gap: 2px; padding: 3px 5px; align-items: center; text-align: left; overflow: hidden; } /* (low blocks, the owner 2026-10-18: number, name and tools on one line, the tags under them; the preview opens on hover) */ .kq-tl-rich #transport .tlr-head { display: flex; align-items: center; gap: 5px; min-width: 0; height: 20px; } .kq-tl-rich #transport .tlr-head .tl-no { flex: none; } .kq-tl-rich #transport .tlr-head .tlr-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 650; color: #eef4fa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kq-tl-rich #transport .tlr-tools { flex: none; display: inline-flex; gap: 2px; } .kq-tl-rich #transport .tlr-t { font-style: normal; width: 18px; height: 17px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 10px; color: #c9d6e2; background: #0007; cursor: pointer; opacity: .55; transition: opacity .12s, background .12s; } .kq-tl-rich #transport .timeline-block.rich:hover .tlr-t, .kq-tl-rich #transport .timeline-block.rich.sel .tlr-t { opacity: 1; } .kq-tl-rich #transport .tlr-t:hover { background: var(--bc, #53aeed); color: #0b0f14; } .kq-tl-rich #transport .tlr-t.on { opacity: 1; background: var(--accent); color: var(--accent-ink); } .kq-tl-rich #transport .tlr-tags { display: flex; gap: 3px; overflow: hidden; min-width: 0; white-space: nowrap; } .kq-tl-rich #transport .tlr-tags em { font-style: normal; font-size: 10px; line-height: 13px; padding: 0 5px; border-radius: 7px; color: #b8c6d4; background: #0005; border: 1px solid #ffffff1c; white-space: nowrap; } @container (max-width: 210px) { .kq-tl-rich #transport .tlr-tags em:nth-child(n+3) { display: none; } } @container (max-width: 150px) { .kq-tl-rich #transport .tlr-tools .tlr-t:is([data-a="dup"], [data-a="cut"]) { display: none; } .kq-tl-rich #transport .tlr-tags { display: none; } .kq-tl-rich #transport .timeline-block.rich { grid-template-rows: 20px; } } @container (max-width: 90px) { .kq-tl-rich #transport .tlr-head .tlr-name { display: none; } } @container (max-width: 56px) { .kq-tl-rich #transport .tlr-tools { display: none; } } /* (the floating preview of a block - 21-timeline.js tlHoverPreview) */ #tlHoverPrev { position: fixed; z-index: 60; width: 200px; padding: 5px 5px 6px; border-radius: 9px; background: #0d1117f2; border: 1px solid color-mix(in srgb, var(--bc, #4aa3ff) 60%, var(--line2)); box-shadow: 0 10px 30px #000c, 0 0 14px color-mix(in srgb, var(--bc, #4aa3ff) 35%, transparent); pointer-events: none; } #tlHoverPrev[hidden] { display: none; } #tlHoverPrev canvas { display: block; width: 100%; height: auto; border-radius: 6px; } #tlHoverPrev span { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; color: #e6edf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* (the crossfade and a pause between two tall blocks: the label big in the middle, the edges to drag clearly visible) */ .kq-tl-rich #transport .tl-junc:not(.cut) .jl, .kq-tl-rich #transport .tl-gap .jl { flex-direction: column; height: auto; padding: 5px 6px; gap: 1px; font-size: 11px; line-height: 13px; text-align: center; } .kq-tl-rich #transport .tl-junc:not(.cut) .jl b, .kq-tl-rich #transport .tl-gap .jl b { font-size: 16px; line-height: 18px; } .kq-tl-rich #transport .tl-junc .h { width: 8px; opacity: .45; } .kq-tl-rich #transport .tl-junc .h.l { left: -4px; } .kq-tl-rich #transport .tl-junc .h.r { right: -4px; } .kq-tl-rich #transport .tl-junc.cut { font-size: 13px; } .kq-unity-panel.kq-tl-rich #strip { flex: 0 0 0 !important; } /* ✨ Z textu (34d-text-motion.js) */ #t2mPanel textarea { width: 100%; } #t2mPanel #t2mGo { width: 100%; margin-top: 8px; } #t2mPanel progress { width: 100%; margin-top: 8px; } #t2mInfo { margin-top: 6px; min-height: 1.2em; } #t2mInfo.bad { color: var(--bad, #ff6b6b); } #t2mKeep { margin-top: 4px; font-size: 12px; color: #ffc76b; } #t2mInfo .t2m-retry { margin-left: 4px; padding: 2px 10px; font-size: 12px; } .t2m-match { margin-top: 6px; font-size: 12px; } .t2m-match b { font-weight: 600; } .t2m-alt { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; color: var(--muted, #8b95a5); } .t2m-alt button { padding: 2px 8px; font-size: 11px; border-radius: 10px; } #t2mResult { margin-top: 8px; } /* the next step under a made motion, lit until clicked (t2mNextLight) */ #t2mResult .t2m-nexthint { flex-basis: 100%; font-size: 12px; font-weight: 650; color: var(--n1, #ffb13d); } #t2mResult.t2m-next button { background: var(--neon, #ff6a3d); border-color: transparent; color: #1a0e04; font-weight: 650; animation: t2mNext 1.2s ease-in-out infinite; } #t2mResult.t2m-next.t2m-calm button { animation-duration: 3.2s; } @keyframes t2mNext { 0%, 100% { box-shadow: 0 0 0 #0000; filter: none; } 50% { box-shadow: 0 0 10px #ff6a3d99, 0 0 22px #ff3d8b55; filter: brightness(1.15); } } @media (prefers-reduced-motion: reduce) { #t2mResult.t2m-next button { animation: none; box-shadow: 0 0 10px #ff6a3d66; } } .t2m-credits { font-size: 10px; margin-top: 8px; opacity: .8; } #t2mGpu { margin-bottom: 8px; } /* (?start=video from the home page: "Animation from video" lit up for a moment, 41c-starters.js) */ .kq-pulse { animation: dropPulse 1s ease-in-out 4; outline: 2px solid #ff6a3d; outline-offset: 2px; } /* the prompt help: quick ideas, builder, tips (the owner 2026-10-31, after Animora's) */ .t2m-box { margin-top: 10px; border: 1px solid var(--line, #2a313c); border-radius: 10px; padding: 8px 10px; background: rgba(255, 255, 255, .02); } .t2m-box > summary { cursor: pointer; font-weight: 700; font-size: 13px; } /* quick ideas: the categories a tab panel of their own, the examples below a line with their own heading - told apart at a glance (the owner 2026-10-31) */ .t2m-cats { display: flex; flex-wrap: wrap; gap: 3px; margin: 8px 0 0; padding: 4px; border-radius: 9px; background: #0d1219; border: 1px solid #2a3446; } .t2m-cats button { padding: 4px 10px; font-size: 11.5px; font-weight: 650; border-radius: 6px; border: 1px solid transparent; background: transparent; color: #9fb1c4; } .t2m-cats button:hover { color: #fff; background: #1b2330; } .t2m-cats button.on { background: var(--accent, #ff6a3d); border-color: var(--accent, #ff6a3d); color: #fff; box-shadow: 0 0 8px #ff6a3d66; } .t2m-cats-h { margin: 8px 0 4px; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #8b95a5); } .t2m-cats-h + .t2m-cats { margin-top: 0; } .t2m-chips-h { margin: 10px 0 6px; padding-top: 8px; border-top: 1px dashed #33405a; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #8b95a5); } .t2m-chips { display: flex; flex-wrap: wrap; gap: 4px; } .t2m-chips button { padding: 3px 9px; font-size: 11.5px; border-radius: 12px; background: #151c26; border-color: #2c3a4f; font-weight: 400; } .t2m-chips button:hover { border-color: var(--ncy, #2ee6ff); color: #fff; } .t2m-chips .t2m-more { opacity: .75; } .t2m-build { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 8px; } .t2m-build select { min-width: 0; font-size: 11.5px; } .t2m-build-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 6px; } .t2m-build-row i { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted, #8b95a5); } .t2m-build-row button { flex: 0 0 auto; width: auto !important; padding: 4px 12px; font-size: 12px; } .t2m-tips { margin: 8px 0 2px; padding-left: 18px; font-size: 12px; color: var(--muted, #8b95a5); } .t2m-tips li { margin: 3px 0; } .t2m-tips b { color: var(--text, #e6e9ef); font-weight: 600; } .t2m-new { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 300px; padding: 12px 14px; border-radius: 12px; background: var(--panel, #171b22); border: 1px solid var(--accent, #ff8a3d); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); font-size: 13px; } .t2m-new b { display: block; margin: 0 18px 4px 0; } .t2m-new div { color: var(--muted, #8b95a5); margin-bottom: 8px; } .t2m-new .t2m-new-x { position: absolute; top: 6px; right: 6px; padding: 2px 6px; background: none; border: 0; cursor: pointer; } /* (the pages' tabs in the web app's own tab style: a line icon over the name, the active one glowing - the owner 2026-10-18) */ .kq-unity-panel #uNav button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 5px; font-size: 12px; } .kq-unity-panel #uNav button .ic { width: 19px; height: 19px; opacity: .75; transition: opacity .15s, filter .15s, color .15s; } .kq-unity-panel #uNav button:hover .ic { opacity: 1; } .kq-unity-panel #uNav button.on .ic { opacity: 1; color: var(--n2); filter: drop-shadow(0 0 4px #ff6a3dcc) drop-shadow(0 0 10px #ff3d8b66); } .kq-unity-panel #uNav button.on { border-bottom-color: var(--n2); } /* (the view's second bar, under the timeline: only in ▭ Bloky with the app's own view shown - there the strip's bars are gone) */ /* ---------- the preview zone: the tools row (weapons, pose, assistant, speed, ghost, Unity / KinemIQ) is the HEADER of the 3D preview, one zone with it - not a section of its own (the owner 2026-10-18) */ .kq-unity-panel #uTools { --zone: #9fb3c8; position: relative; padding-top: 16px; background: color-mix(in srgb, #9fb3c8 6%, var(--panel)); } .kq-unity-panel #uTools::before { content: var(--zone-view, "Preview"); position: absolute; top: 2px; left: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zone); opacity: .9; } .kq-unity-panel.kq-unity-own-view #uTools { border-radius: 8px 8px 0 0; border-bottom: 1px solid color-mix(in srgb, #9fb3c8 25%, var(--line)); margin-bottom: -5px; } .kq-unity-panel.kq-unity-own-view #view { border: 1px solid color-mix(in srgb, #9fb3c8 45%, var(--line)); border-left: 3px solid #9fb3c8; border-top: 0; border-radius: 0 0 8px 8px; overflow: hidden; } /* ---------- neon transport icons (the owner 2026-10-18: "like the neon tab icons"): the playback / edit buttons glow in the brand's orange-pink, brighter on hover; play the strongest */ #transport :is(#undoBtn, #redoBtn, #play, #stepBack, #stepFwd, #cutHere, #ragHere, #markHere, #keyHere) { color: #ffc9a8; border-color: color-mix(in srgb, #ff6a3d 38%, var(--line2)); background: color-mix(in srgb, #ff6a3d 7%, #0e1218); text-shadow: 0 0 5px #ff6a3dbb, 0 0 11px #ff3d8b66; transition: color .15s, text-shadow .15s, box-shadow .15s, border-color .15s; } #transport :is(#undoBtn, #redoBtn, #play, #stepBack, #stepFwd, #cutHere, #ragHere, #markHere, #keyHere):hover:not(:disabled) { color: #fff; border-color: #ff6a3d; text-shadow: 0 0 6px #ff6a3d, 0 0 14px #ff3d8bcc; box-shadow: 0 0 10px #ff6a3d55, inset 0 0 8px #ff6a3d22; } #transport :is(#undoBtn, #redoBtn):disabled { opacity: .35; text-shadow: none; } #transport #play { color: #fff; border-color: #ff6a3d; box-shadow: 0 0 10px #ff6a3d66, inset 0 0 10px #ff3d8b33; text-shadow: 0 0 6px #ff6a3d, 0 0 14px #ff3d8b; } /* ---------- the web layout's zones (the owner 2026-10-18: "the same new design on the web, for its layout"): the preview, the playback + timeline, the block cards and the two side panels each a card of their own colour with its name, gaps of the darker page between them - as in the Unity panel */ html:not(.kq-unity-panel) body { background: #090c10; } html:not(.kq-unity-panel) #main { gap: 5px; padding: 5px 4px; background: #090c10; } html:not(.kq-unity-panel) :is(#view, #transport, #strip) { --zone: var(--line2); border: 1px solid color-mix(in srgb, var(--zone) 45%, var(--line)); border-left: 3px solid var(--zone); border-radius: 8px; } html:not(.kq-unity-panel) #view { --zone: #9fb3c8; } html:not(.kq-unity-panel) #transport { --zone: #4aa3ff; background: color-mix(in srgb, #4aa3ff 6%, var(--panel)); } html:not(.kq-unity-panel) #strip { --zone: #2ee6c8; background: color-mix(in srgb, #2ee6c8 5%, #10141a) !important; border-top: 1px solid color-mix(in srgb, #2ee6c8 45%, var(--line)) !important; } html:not(.kq-unity-panel) #resizer { background: transparent; border: 0; } html:not(.kq-unity-panel) #transport::before { content: var(--zone-time, "Playback · timeline"); flex: 1 1 100%; order: -1; display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zone); opacity: .9; margin: 0; } html:not(.kq-unity-panel) #strip::before { content: var(--zone-blocks, "Blocks"); position: absolute; top: 5px; left: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zone); opacity: .9; z-index: 2; } html:not(.kq-unity-panel) #view::before { content: var(--zone-view, "Preview"); position: absolute; top: 6px; left: 10px; z-index: 5; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zone); opacity: .9; pointer-events: none; } /* (the side panels: violet like the Unity panel's pages) */ html:not(.kq-unity-panel) #side { border-right: 0; border: 1px solid color-mix(in srgb, #a77bff 35%, var(--line)); border-left: 3px solid #a77bff; border-radius: 8px; margin: 5px 0 5px 5px; background: color-mix(in srgb, #a77bff 4%, var(--panel)); } html:not(.kq-unity-panel) #insp { border: 1px solid color-mix(in srgb, #a77bff 35%, var(--line)); border-left: 3px solid #a77bff; border-radius: 8px; margin: 5px 5px 5px 0; background: color-mix(in srgb, #a77bff 4%, var(--panel)); } html:not(.kq-unity-panel) #sideResizer, html:not(.kq-unity-panel) #inspResizer { background: transparent; border: 0; } /* (the ragdoll skull and the event flag big and clear - the owner 2026-10-18: "bigger, nicer"; a small + beside them) */ #transport :is(#ragHere, #markHere) { display: inline-flex; align-items: center; gap: 1px; padding: 0 7px; } #transport :is(#ragHere, #markHere) .pl { font-size: 10px; opacity: .85; } #transport :is(#ragHere, #markHere) .gl { font-size: 17px; line-height: 1; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; } #transport #ragHere .gl { text-shadow: 0 0 6px #ff6a3d, 0 0 14px #ff3d8bcc; } #transport #markHere .gl { color: #ffe08a; text-shadow: 0 0 6px #ffb13d, 0 0 14px #ff6a3dbb; } /* ---------- the transport's groups each in one neon colour (the owner 2026-10-18): playback cyan (play, step back / on), editing at the playhead orange-pink (cut, ragdoll, marker), the key gold, undo / redo quiet; a little space between groups */ #transport :is(#undoBtn, #redoBtn) { color: #b9c6d3; border-color: var(--line2); background: #0e1218; text-shadow: none; box-shadow: none; } #transport :is(#undoBtn, #redoBtn):hover:not(:disabled) { color: #fff; border-color: #8b98a5; text-shadow: 0 0 6px #ffffff66; box-shadow: none; } #transport :is(#play, #stepBack, #stepFwd) { color: #c8f8ff; border-color: color-mix(in srgb, #2ee6ff 45%, var(--line2)); background: color-mix(in srgb, #2ee6ff 8%, #0e1218); text-shadow: 0 0 5px #2ee6ffcc, 0 0 12px #2e8bff88; } #transport :is(#play, #stepBack, #stepFwd):hover:not(:disabled) { color: #fff; border-color: #2ee6ff; text-shadow: 0 0 6px #2ee6ff, 0 0 14px #2e8bff; box-shadow: 0 0 10px #2ee6ff55, inset 0 0 8px #2ee6ff22; } #transport #play { color: #fff; border-color: #2ee6ff; box-shadow: 0 0 10px #2ee6ff66, inset 0 0 10px #2e8bff33; text-shadow: 0 0 6px #2ee6ff, 0 0 14px #2e8bff; margin-left: 6px; } #transport :is(#cutHere, #ragHere, #markHere) { color: #ffc9a8; border-color: color-mix(in srgb, #ff6a3d 45%, var(--line2)); background: color-mix(in srgb, #ff6a3d 8%, #0e1218); text-shadow: 0 0 5px #ff6a3dcc, 0 0 12px #ff3d8b77; } #transport #cutHere { margin-left: 6px; } #transport #markHere .gl { color: #ffc9a8; text-shadow: 0 0 6px #ff6a3d, 0 0 14px #ff3d8bcc; } #transport #keyHere { color: #ffe3a3; border-color: color-mix(in srgb, #ffb13d 50%, var(--line2)); background: color-mix(in srgb, #ffb13d 8%, #0e1218); text-shadow: 0 0 5px #ffb13dcc, 0 0 12px #ff8a3d77; margin-left: 6px; } #transport #keyHere:hover:not(:disabled) { color: #fff; border-color: #ffb13d; text-shadow: 0 0 6px #ffb13d, 0 0 14px #ff8a3d; box-shadow: 0 0 10px #ffb13d55; } /* (the panel's flexible parts - 16b-unity-link.js unitySplit: heights shared pairwise by the bars, each with its minimum; the pages take the rest) */ .kq-unity-panel .u-split[hidden] { display: none !important; } .kq-unity-panel #view { min-height: 60px !important; } .kq-unity-panel:not(.kq-tl-rich) #strip { min-height: 60px !important; } .kq-unity-panel #uBody { flex: 1 1 0 !important; min-height: 90px !important; } /* (the preview's tools row: every control the same height on one centre line - weapons, pose, assistant, speed, ghost, Unity / KinemIQ; the weapon list stood taller than the buttons) */ .kq-unity-panel #uTools { align-items: center; } .kq-unity-panel #uTools :is(#weaponRow, #viewCtl) { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; } .kq-unity-panel #uTools :is(select, button, #unityViewSw) { height: 26px; min-height: 26px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; line-height: 24px; margin-top: 0; margin-bottom: 0; } .kq-unity-panel #uTools #unityViewSw button { height: 20px; min-height: 20px; line-height: 18px; } .kq-unity-panel #uTools #unityViewSw { padding: 2px; align-items: center; } .kq-unity-panel #uTools label { display: inline-flex; align-items: center; gap: 5px; height: 26px; } /* (the timeline given a height in the Unity panel: its content scrolls inside it; at its smallest the ▭ Bloky blocks are one line - number, name, tools - and no picture, kq-tl-compact) */ .kq-unity-panel #transport.u-sized { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; min-height: 200px !important; flex-shrink: 0 !important; } .kq-tl-compact.kq-tl-rich #transport .timeline-block { height: 28px; } .kq-tl-compact.kq-tl-rich #transport .timeline-block.rich { grid-template-columns: minmax(0, 1fr); grid-template-rows: 20px; padding: 3px 5px; } .kq-tl-compact.kq-tl-rich #transport :is(.tlr-mini, .tlr-tags) { display: none !important; } .kq-tl-compact.kq-tl-rich #transport .tlr-head { display: flex !important; grid-column: 1; grid-row: 1; height: 20px; } .kq-tl-compact.kq-tl-rich #transport .tlr-head > * { grid-column: auto !important; grid-row: auto !important; padding-left: 0 !important; } .kq-tl-compact.kq-tl-rich #transport .tlr-tools { display: inline-flex !important; } .kq-tl-compact.kq-tl-rich #transport .tl-junc:not(.cut) .jl, .kq-tl-compact.kq-tl-rich #transport .tl-gap .jl { flex-direction: row; padding: 0 4px; } .kq-tl-compact.kq-tl-rich #transport .tl-junc:not(.cut) .jl b { font-size: 12px; } /* (inside the Unity panel the block settings are a page of their own: the web layout's "hide the right panel" (insp-off, remembered from the narrow / web layout) and its narrow-window rules must not fold them to nothing - the owner's settings stood empty, height 0, 2026-10-18; no ⟩ hide button there) */ .kq-unity-panel #insp { display: block !important; position: static !important; width: auto !important; height: auto !important; box-shadow: none !important; } .kq-unity-panel #insp[hidden] { display: none !important; } .kq-unity-panel #inspClose, .kq-unity-panel #inspOpen { display: none !important; } /* (section header icons - web/icons.js: one line style, a neon colour per function) */ .hico { width: 15px; height: 15px; flex: none; vertical-align: -3px; margin-right: 6px; --hc: #9fb3c8; color: var(--hc); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hc) 70%, transparent)); } .hico.c-body { --hc: #2ee6c8; } .hico.c-motion { --hc: #4aa3ff; } .hico.c-rag { --hc: #ff4f8e; } .hico.c-time { --hc: #ffb13d; } .hico.c-edit { --hc: #ff8a3d; } .hico.c-mood { --hc: #b48cff; } /* (a taller timeline keeps its rows together at the top - stretched, the rows drifted apart, the owner 2026-10-18) */ #transport { align-content: flex-start; } #inspTabs button > b .hico, #inspTabs button > b > .hico { width: 18px; height: 18px; margin: 0; vertical-align: middle; } #inspTabs button:not(.on) .hico { opacity: .75; } #inspTabs button.on .hico { opacity: 1; filter: drop-shadow(0 0 4px var(--hc)) drop-shadow(0 0 9px color-mix(in srgb, var(--hc) 60%, transparent)); } /* (low ▭ Bloky rows: the crossfade's label on one line again - icon and length) */ .kq-tl-rich #transport .tl-junc:not(.cut) .jl, .kq-tl-rich #transport .tl-gap .jl { flex-direction: row; padding: 0 5px; gap: 3px; height: 18px; } .kq-tl-rich #transport .tl-junc:not(.cut) .jl b, .kq-tl-rich #transport .tl-gap .jl b { font-size: 13px; line-height: 14px; } /* (the playback rows' buttons always centred - the owner 2026-10-18; the zone's name and the timeline keep their full width) */ #transport { justify-content: center; } /* (the playback rows fill the panel's width - every control grows a little, contents centred; the owner: "stretch it so the panel looks even") */ .kq-unity-panel #transport > :not(#scrubScroll):not(#tlNav):not(#timelineBlocks):not(script) { flex-grow: 1; justify-content: center; } .kq-unity-panel #transport > :is(#undoBtn, #redoBtn) { flex-grow: .5; } .kq-unity-panel #transport #tlModeSw button { flex: 1 1 auto; } /* (the Unity / KinemIQ view switch in the preview's name row, top right - on its own it took a whole line) */ .kq-unity-panel #uTools { padding-top: 24px; } .kq-unity-panel #uTools::before { top: 6px; } .kq-unity-panel #uTools #unityViewSw { position: absolute; top: 3px; right: 6px; margin: 0; height: 20px !important; min-height: 20px !important; padding: 1px; } .kq-unity-panel #uTools #unityViewSw button { height: 16px !important; min-height: 16px !important; line-height: 14px !important; padding: 0 8px; font-size: 10.5px; } /* posing panel: the three modes on one low row, the hint on one line, a bold KEY button */ #posePanel .pp-mode button { flex: 1 1 auto; padding: 3px 5px; font-size: 11px; white-space: nowrap; line-height: 1.2; min-width: 0; } #posePanel .pp-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #posePanel .pp-note.warn { white-space: normal; } /* (a warning is read whole - the whole block's one, 2026-11-02) */ /* (the first openings: how to start, and the hand / foot dots pulse until the first drag - 2026-11-02) */ #posePanel .pp-hint { font-size: 11.5px; line-height: 1.35; color: #e8eef4; background: #ff8a3d22; border: 1px solid #ff8a3d66; border-radius: 7px; padding: 5px 7px; } .pose-dot.hint { animation: kqPoseHint 1.1s ease-in-out infinite; } @keyframes kqPoseHint { 0%, 100% { box-shadow: 0 0 0 1px #000a, 0 0 0 2px #ffd16600; } 50% { box-shadow: 0 0 0 1px #000a, 0 0 0 7px #ffd166aa; } } @media (prefers-reduced-motion: reduce) { .pose-dot.hint { animation: none; box-shadow: 0 0 0 1px #000a, 0 0 0 4px #ffd166cc; } } #posePanel .pp-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; letter-spacing: .08em; } #posePanel .pp-add .pp-kico { font-size: 15px; line-height: 1; color: #1a1404; text-shadow: 0 0 6px #fff7; transform: translateY(-.5px); } /* ⇄ swap a block's animation for your own (app/41d-swap.js) - clear on every block, the owner 2026-10-19 */ #transport .tlr-swap { flex: none; font-style: normal; display: inline-flex; align-items: center; height: 17px; padding: 0 7px; margin-right: 4px; border-radius: 5px; font-size: 10.5px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #ff8a3d, #ff3d8b); cursor: pointer; white-space: nowrap; box-shadow: 0 1px 6px #ff6a3d55; } #transport .tlr-swap:hover { filter: brightness(1.12); } @container (max-width: 210px) { .kq-tl-rich #transport .tlr-swap { font-size: 0; padding: 0 5px; } .kq-tl-rich #transport .tlr-swap::before { content: '⇄'; font-size: 11px; } } .card .replace-clip { background: linear-gradient(90deg, #ff8a3d, #ff3d8b) !important; color: #fff !important; font-weight: 700; } #insp .swap-main { background: linear-gradient(90deg, #ff8a3d, #ff3d8b); color: #fff; font-weight: 700; border: none; } .swap-pop { position: fixed; z-index: 1000; background: #141b24; border: 1px solid #ff6a3d88; border-radius: 10px; box-shadow: 0 14px 40px #000a; padding: 6px; } .swap-pop .swap-h { font-size: 11.5px; color: #9fb0c2; padding: 4px 8px 6px; } .swap-pop .swap-it { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 7px 8px; color: #e8eef5; cursor: pointer; } .swap-pop .swap-it:hover, .swap-pop .swap-it:focus-visible { background: #ff6a3d22; } .swap-pop .swap-it > b { font-size: 18px; width: 26px; text-align: center; flex: none; } .swap-pop .swap-it strong { display: block; font-size: 13px; } .swap-pop .swap-it small { display: block; font-size: 11px; color: #8fa1b4; line-height: 1.3; } .swap-pop .swap-it:last-child { border-top: 1px solid #ffffff14; margin-top: 2px; } .swap-bar { display: flex; align-items: center; gap: 10px; padding: 5px 10px; margin: 0 0 4px; border-radius: 7px; background: linear-gradient(90deg, #ff8a3d33, #ff3d8b33); border: 1px solid #ff6a3d88; color: #fff; font-size: 12px; } .swap-bar span { flex: 1; } .swap-bar .swap-x { background: #0006; color: #fff; border: 1px solid #ffffff33; border-radius: 5px; padding: 2px 10px; cursor: pointer; } #transport .tlr-swap { position: relative; z-index: 6; } #transport .timeline-block:not(.rich) .tlr-swap { margin-left: 8px; vertical-align: middle; } /* Unity: the timeline always visible - tools, scrub bar, ruler and one row of blocks (app/16b-unity-link.js U_MIN) */ .kq-unity-panel #transport { min-height: 200px !important; flex-shrink: 0 !important; } /* Unity panel, the owner 2026-10-19: everything on one line and lower so the animations show higher */ /* (the preview's tools: weapons, pose, assistant, speed, ghost - one row, scrolling sideways when narrow) */ .kq-unity-panel #uTools, .kq-unity-panel #uTools :is(#weaponRow, #viewCtl) { flex-wrap: nowrap !important; } .kq-unity-panel #uTools { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 6px; padding: 2px 6px; } .kq-unity-panel #uTools::-webkit-scrollbar { display: none; } .kq-unity-panel #uTools :is(#weaponRow, #viewCtl) { gap: 6px; flex: none; white-space: nowrap; } .kq-unity-panel #uTools :is(select, button, #unityViewSw) { height: 24px; min-height: 24px; line-height: 22px; } .kq-unity-panel #uTools label { height: 24px; } /* (the zone's name "Preview" in the row itself - absolutely placed it lay over "Weapons" once the row went low, the owner 2026-10-19) */ .kq-unity-panel #uTools::before { position: static; flex: none; align-self: center; margin-right: 2px; line-height: 1; top: auto; font-size: 11.5px; letter-spacing: .06em; transform: translateY(-3px); /* (capitals only: their middle sits above the line box middle) */ } .kq-unity-panel #viewCtl input[type=range] { width: 56px; } /* (the Unity bar: its name, the clip and the five buttons in one line) */ .kq-unity-panel #uUnity { display: flex; align-items: center; gap: 8px; padding: 3px 6px !important; } .kq-unity-panel #uUnity::before { margin: 0 !important; flex: none; } .kq-unity-panel #uUnity .u-info { margin: 0; flex: 0 1 auto; min-width: 0; max-width: 34%; gap: 6px; } .kq-unity-panel #uUnity .u-acts { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; } .kq-unity-panel #uUnity .u-acts button { flex: 1 1 0; min-width: 0; height: 24px; padding: 0 6px; font-size: 10.5px; line-height: 22px; } /* (the library's head: search, sources and categories lower - one line each, sideways scroll, small chips, no titles) */ .kq-unity-panel #libHead .chips { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 4px; margin: 3px 0 !important; padding: 0 !important; border: 0 !important; } .kq-unity-panel #libHead .chips::-webkit-scrollbar { display: none; } .kq-unity-panel #libHead .chips-lab { display: none; } .kq-unity-panel #libHead .chips > :not(.chips-lab) { flex: none; font-size: 10.5px; padding: 1px 7px; min-height: 20px; line-height: 18px; } .kq-unity-panel #libHead .lib-search { margin: 0 0 2px; gap: 4px; } .kq-unity-panel #libHead .lib-search :is(input, select, button) { height: 24px; min-height: 24px; padding-top: 0; padding-bottom: 0; font-size: 11px; } /* (Unity: video to animation and the live camera in one row, each half; their notes on two lines at most) */ .kq-unity-panel #uVidRow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; align-items: stretch; } .kq-unity-panel #uVidRow > * { margin: 0 !important; min-width: 0; box-sizing: border-box; padding: 6px 8px !important; display: flex; flex-direction: column; justify-content: center; text-align: left; } .kq-unity-panel #uVidRow .muted { font-size: 10.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* (the page tabs: lower, but they stand out - icon beside the name, bright text, a strong active tab) */ .kq-unity-panel #uNav button { display: flex; flex-direction: row !important; align-items: center; justify-content: center; gap: 6px; padding: 4px 4px 3px !important; font-size: 12.5px !important; font-weight: 700 !important; color: #c9d3df !important; } .kq-unity-panel #uNav button .ic { width: 15px; height: 15px; flex: none; opacity: .9; } .kq-unity-panel #uNav button.on { color: #fff !important; background: linear-gradient(180deg, color-mix(in srgb, #a77bff 42%, var(--panel)), color-mix(in srgb, #a77bff 20%, var(--panel))) !important; border-bottom-color: #ff6a3d !important; } .kq-unity-panel #uVidRow { gap: 5px; margin: 4px 0; } .kq-unity-panel #uVidRow > * { padding: 4px 7px !important; min-height: 0 !important; font-size: 11.5px; } .kq-unity-panel #uVidRow b { font-size: 11.5px; } .kq-unity-panel #uVidRow .muted { font-size: 10px; -webkit-line-clamp: 1; } /* (Unity: the view grows for the pose panel / assistant (app/16b-unity-link.js uViewFit); in a window too low even for that the pose panel scrolls inside the view instead of running out under it) */ .kq-unity-panel #posePanel { max-height: calc(100% - 20px); overflow-y: auto; scrollbar-width: thin; } /* (the Unity / KinemIQ switch in the tools row itself, at its right end and centred - placed absolutely at the top it lay over "Original (ghost)" once the row became one low line, the owner 2026-10-19: "this is all crooked") */ .kq-unity-panel #uTools #unityViewSw { position: sticky; right: 0; z-index: 2; margin: 0 0 0 auto !important; align-self: center; flex: none; display: inline-flex; background: var(--panel2, #161b22); box-shadow: -10px 0 8px var(--panel2, #161b22), 8px 0 0 var(--panel2, #161b22); } .kq-unity-panel #uTools > * { align-self: center; } /* (the elbow / knee dot is dragged too - app/23b-pose-edit.js kneeDrag: a ring round it says "swing me") */ .pose-dot.hinge { cursor: grab; } .pose-dot.hinge::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px dashed #ffd16699; pointer-events: none; } /* 🩺 Review - the animator's quality check (app/23f-review.js) */ #transport .review-btn { flex: none; font-weight: 800; letter-spacing: .3px; color: #ffe2a8; border: 1px solid #b8862f; background: #2a2116; } #transport .review-btn.on { color: #fff; background: linear-gradient(100deg, #b86b12, #e0a72a); border-color: #ffc95c; box-shadow: 0 0 10px #ffb84a55; } .review-pop { right: auto; left: 12px; width: min(420px, calc(100% - 28px)); border-color: #e0a72a; } .review-pop .rv-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; } .review-pop .rv-chip { padding: 2px 8px; font-size: 11.5px; border-radius: 10px; border: 1px solid #4a3d28; background: transparent; color: var(--muted); } .review-pop .rv-chip.on { color: #fff; background: #6b4a12; border-color: #e0a72a; } .review-pop .rv-list { display: flex; flex-direction: column; gap: 1px; } .review-pop .rv-row { display: grid; grid-template-columns: 20px 52px 1fr auto auto; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; cursor: pointer; } .review-pop .rv-row:hover { background: #ffffff0d; } .review-pop .rv-row .rv-t { color: var(--muted); font-variant-numeric: tabular-nums; } .review-pop .rv-row .rv-w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .review-pop .rv-row .rv-w span { color: var(--muted); } .review-pop .rv-row .rv-v { color: #ffd27a; font-variant-numeric: tabular-nums; } .review-pop .rv-row.bad .rv-v { color: #ff7a7a; } .review-pop .rv-fix { padding: 1px 8px; font-size: 11.5px; border-radius: 7px; border: 1px solid #7b5cff; background: transparent; } .review-pop .rv-fix:hover:not(:disabled) { background: #6d3fd0; } .review-pop .rv-all { font-weight: 700; border-color: #7b5cff; } .review-pop .rv-done { margin-top: 6px; padding-top: 4px; border-top: 1px solid #ffffff14; } .review-pop .rv-d.ok { color: #7dff9a; } .review-pop .rv-d.half { color: #ffd27a; } .review-pop .rv-d.no { color: #ff9a9a; } .review-pop .rv-note { margin-top: 6px; font-size: 11px; } #timelineBlocks .tl-issue { position: absolute; top: 0; height: 5px; min-width: 4px; padding: 0; border: 0; border-radius: 2px; background: #ffc14d; opacity: .9; z-index: 4; cursor: pointer; transform: none; } #timelineBlocks .tl-issue.bad { background: #ff5a5a; } #timelineBlocks .tl-issue:hover { height: 9px; opacity: 1; } @media (max-width: 700px) { .review-pop .rv-row { grid-template-columns: 18px 44px 1fr auto; } .review-pop .rv-row .rv-v { display: none; } } /* 🎲 Variations + loop (app/16d-variations.js) */ .vary-pop { position: fixed; z-index: 60; width: 280px; padding: 10px 12px; background: #23262b; border: 1px solid #4a90d9; border-radius: 8px; box-shadow: 0 8px 24px #000a; font-size: 12.5px; display: flex; flex-direction: column; gap: 7px; } .vary-pop .vp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vary-pop .vp-row select { width: auto; } .vary-pop .vp-note { font-size: 11px; line-height: 1.35; } .vary-pop .vp-go { font-weight: 700; } /* ✨ Magic Heal result - short rows (2026-10-20) */ .magic-pop .mg-list { display: flex; flex-direction: column; gap: 2px; } .magic-pop .mg-row { display: flex; align-items: center; gap: 7px; padding: 3px 4px; border-radius: 6px; } .magic-pop .mg-row:hover { background: #ffffff0d; } .magic-pop .mg-row.off .mg-what { opacity: .45; text-decoration: line-through; } .magic-pop .mg-row.left .mg-what { color: var(--muted); } .magic-pop .mg-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .magic-pop .mg-what span { color: var(--muted); } .magic-pop .mg-what.jump { cursor: pointer; } .magic-pop .mg-row input { margin: 0; } #transport .magic-scope[hidden] { display: inline-block !important; } .magic-pop.fl-folded > :not(.mg-head) { display: none; } /* ✋ posing in the Unity scene: the pose panel under the tools (app/23i-pose-scene.js) */ #uPoseDock { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-bottom: 1px solid var(--line2); overflow: auto; max-height: 46vh; } #uPoseDock[hidden] { display: none; } #uPoseDock #posePanel { position: static; width: auto; flex: 1; max-width: none; box-shadow: none; } #uPoseDock #poseInfo { position: static; flex: 0 0 180px; } /* ---------- 📱 the phone layout (app/41f-phone.js, the owner 2026-10-21: "build it nicely for phones, clear"): a start card with what to do first, a bar at the bottom, the editor's advanced controls behind "Tools" ---------- */ .ph-start, .ph-dock { display: none; } .vm-export-now { display: block; width: 100%; margin: 8px 0 6px; padding: 11px 12px; font-size: 14.5px; font-weight: 700; border-radius: 9px; } #vmInfo .vm-short { margin-left: 4px; padding: 2px 8px; font-size: 11.5px; border-radius: 6px; } .vm-stay { margin-top: 4px; font-size: 12px; color: #ffb36b; } /* (app/34: keep the app open while a phone analyses) */ @media (max-width: 700px) { body.ph { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } body.ph .ph-start { display: flex; order: 2; gap: 5px; align-items: center; margin: 5px 6px 3px; } body.ph .ph-start[hidden] { display: none; } .ph-start > button:not(.ph-x) { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 36px; padding: 0 6px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); white-space: nowrap; } .ph-start > button .ph-ic { font-size: 14px; } .ph-start > button b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; } .ph-start > .ph-main { flex-grow: 1.2; border: 0; color: #fff; background: linear-gradient(90deg, #ff8a3d, #ff4f7b); } .ph-start > .ph-x { flex: none; min-width: 0; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: 11px; } body.ph .ph-dock { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 4px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--panel) 94%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(8px); } .ph-dock button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; height: 48px; padding: 0; border-radius: 10px; background: transparent; border: 1px solid transparent; color: var(--text); } .ph-dock button .ph-ic { font-size: 18px; line-height: 1; } .ph-dock button b { font-size: 11px; font-weight: 600; } .ph-dock button.on { background: var(--panel2); border-color: var(--line2); } .ph-dock .ph-exp { background: linear-gradient(90deg, #ff8a3d, #ff4f7b); color: #fff; } .ph-dock .ph-try { border-color: #ff8a3d99; color: #ffb27d; } /* (the 3D preview a little shorter so the start card and the playback fit on the first screen) */ body.ph #view { height: 60vh; height: 60dvh; min-height: 300px; } /* the editor's advanced controls only with 🛠 Tools */ body.ph:not(.ph-tools) :is(#undoBtn, #redoBtn, #cutHere, #ragHere, #markHere, #magicScope, #reviewBtn, #physBtn, #physAmt, #tlModeSw, #rate, #viewMenuWrap, #tlNav) { display: none !important; } body.ph:not(.ph-tools) #transport > label.chk { display: none !important; } body.ph:not(.ph-tools) #viewCtl :is(#chatBtn, #poseBtn, label.chk) { display: none !important; } body.ph #view #weaponRow { display: none !important; } /* (no weapon pick over the phone's preview - the owner 2026-10-21; it is in ⚙ Settings, phoneWeapon) */ body.ph #transport > button, body.ph #transport > .magic-btn { height: 34px; min-width: 40px; font-size: 13px; border-radius: 8px; } body.ph #transport #magicBtn { padding: 0 12px; } body.ph #transport #time { height: 34px; font-size: 12px; } body.ph #tabs button { padding: 9px 2px; font-size: 12.5px; } body.ph #projBar #projExport { display: none; } /* (Export is in the bottom bar) */ body.ph .kq-toast { bottom: calc(70px + env(safe-area-inset-bottom)); } } @media (max-width: 700px) { /* the video window on a phone: a sheet at the bottom, the character seen above it */ body.ph.ph-vm .ph-start { display: none; } body.ph.ph-vm #view { height: 40vh; height: 40dvh; min-height: 220px; } body.ph.ph-vm.insp-show #insp { top: auto; left: 0; right: 0; width: 100%; height: 46vh; height: 46dvh; bottom: calc(60px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px #000a; overflow: auto; } body.ph.ph-vm #vmModal { position: static; width: auto; height: auto; } body.ph.ph-vm #vmModal .vm-stage { max-height: 22dvh; } body.ph.ph-vm #vmModal .vm-stage video { max-height: 22dvh; object-fit: contain; } } #expShare { margin-top: 6px; } @media (max-width: 700px) { body.ph #expShare:not([hidden]) { display: block; width: 100%; padding: 11px; font-size: 14px; font-weight: 700; border-radius: 9px; border: 1px solid #ff8a3d; color: #ffb27d; } } @media (max-width: 700px) { body.ph #expModal { padding-bottom: calc(70px + env(safe-area-inset-bottom)); } } @media (max-width: 700px) { /* the phone's playback tools: one row swiped sideways, groups split by a thin line (app/41f-phone.js phoneToolbar) */ body.ph #transport { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 6px 8px; } body.ph .ph-tr { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 1px 1px 3px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } body.ph .ph-tr::-webkit-scrollbar { display: none; } body.ph .ph-tr-g { display: flex; flex: none; align-items: center; gap: 5px; padding-right: 8px; border-right: 1px solid var(--line); scroll-snap-align: start; } body.ph .ph-tr-g:last-child { border-right: 0; } body.ph .ph-tr-g > * { flex: none; margin: 0 !important; } body.ph .ph-tr-g > button, body.ph .ph-tr-g > .magic-btn, body.ph .ph-tr-g > .phys-btn { height: 36px; min-width: 38px; padding: 0 10px; font-size: 12.5px; border-radius: 9px; } body.ph .ph-tr-g > select { height: 36px; padding: 0 8px; font-size: 12.5px; border-radius: 9px; } body.ph .ph-tr-g > #time { height: 36px; padding: 0 4px 0 6px; font-size: 12px; color: var(--muted); white-space: nowrap; } body.ph .ph-tr-g > label.chk { height: 36px; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid var(--line); border-radius: 9px; } body.ph #transport #play { min-width: 46px; } body.ph #transport #scrubScroll, body.ph #transport #tlNav { width: 100%; } /* the view's controls: one row swiped sideways */ body.ph #viewCtl.ph-vc { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; align-items: center; } body.ph #viewCtl.ph-vc::-webkit-scrollbar { display: none; } body.ph #viewCtl.ph-vc > * { flex: none; white-space: nowrap; } body.ph #viewCtl.ph-vc button { height: 32px; border-radius: 9px; } } @media (max-width: 700px) { body.ph:not(.ph-tools) .ph-tr-g > label.chk, body.ph:not(.ph-tools) .ph-tr-g:empty { display: none !important; } } @media (max-width: 700px) { body.ph .ph-tr-g > #tlModeSw { flex: none; width: auto; display: inline-flex; height: 36px; } body.ph .ph-tr-g > #tlModeSw button { height: 34px; padding: 0 10px; } body.ph .ph-tr-g > #pkeyHint { display: none; } } @media (max-width: 700px) { body.ph .ph-tr, body.ph #viewCtl.ph-vc { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; } } @media (max-width: 700px) { /* the playback row denser (the owner 2026-10-21: "make it all smaller, use the space better") */ body.ph #transport { padding: 4px 6px 6px; gap: 4px; } body.ph .ph-tr { gap: 6px; } body.ph .ph-tr-g { gap: 4px; padding-right: 6px; } body.ph .ph-tr-g > button, body.ph .ph-tr-g > .magic-btn, body.ph .ph-tr-g > .phys-btn, body.ph .ph-tr-g > select, body.ph .ph-tr-g > #tlModeSw, body.ph .ph-tr-g > label.chk { height: 30px; font-size: 12px; border-radius: 8px; } body.ph .ph-tr-g > button { min-width: 34px; padding: 0 8px; } body.ph #transport #play { min-width: 40px; } body.ph .ph-tr-g > #time { height: 30px; font-size: 11.5px; } body.ph #transport #magicBtn { padding: 0 10px; font-size: 11.5px; letter-spacing: .2px; } body.ph #transport .zone-label, body.ph #transport > .lbl { font-size: 10px; } /* the side panel (block settings) as a sheet at the bottom: the preview stays seen above it */ body.ph.insp-show:not(.ph-vm) #insp { top: auto; left: 0; right: 0; width: 100%; height: 52vh; height: 52dvh; bottom: calc(60px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px #000a; overflow: auto; } body.ph.insp-show #view { height: 38vh; height: 38dvh; min-height: 220px; } body.ph.insp-show #insp { font-size: 12px; } body.ph.insp-show #insp :is(h2, h3, .sec-title) { font-size: 12px; margin: 6px 0 4px; } body.ph.insp-show #insp .card, body.ph.insp-show #insp section { padding: 6px 8px; margin: 4px 0; } body.ph.insp-show #insp button { padding: 4px 6px; font-size: 11px; } body.ph.insp-show #insp input[type=range] { height: 18px; } } @media (max-width: 700px) { body.ph #projBar.ph-gone { display: none; } body.ph #side > header { gap: 4px; } body.ph #side > header .ph-proj { display: flex; gap: 4px; margin-left: auto; } body.ph #side > header .ph-proj button { width: 32px; height: 30px; padding: 0; min-width: 0; } body.ph #side > header :is(.beta, .kq-beta) { display: none; } body.ph #view { height: 64vh; height: 64dvh; } body.ph #view > .zone-label, body.ph #view > .view-label, body.ph #viewLabel { display: none; } } @media (max-width: 700px) { body.ph #side > header { flex-wrap: nowrap; overflow: hidden; } body.ph #side > header :is(#keysBtn, #langSel, select) { display: none; } body.ph #side > header > * { flex: none; } body.ph #view::before { display: none; } } @media (max-width: 700px) { body.ph .ph-add { position: fixed; left: 8px; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 61; display: grid; gap: 6px; padding: 8px; background: color-mix(in srgb, var(--panel) 97%, transparent); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 -8px 30px #000b; } .ph-add button { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); } .ph-add button .ph-ic { grid-row: 1 / span 2; font-size: 19px; text-align: center; } .ph-add button b { font-size: 13px; } .ph-add button small { font-size: 11px; color: var(--muted); } .ph-add button[data-a="sample"] { border: 0; color: #fff; background: linear-gradient(90deg, #ff8a3d, #ff4f7b); } .ph-add button[data-a="sample"] small { color: #fff; opacity: .9; } } @media (max-width: 700px) { body.ph #view { height: var(--ph-view-h, 64dvh); } body.ph.insp-show #view, body.ph.ph-vm #view { height: min(var(--ph-view-h, 40dvh), calc(100dvh - var(--ph-sheet-h, 46dvh) - 120px)); } body.ph.insp-show:not(.ph-vm) #insp, body.ph.ph-vm.insp-show #insp { height: var(--ph-sheet-h, 52dvh); } .ph-grip { display: none; } body.ph .ph-grip { display: flex; align-items: center; justify-content: center; height: 18px; touch-action: none; cursor: ns-resize; flex: none; } body.ph .ph-grip i { width: 44px; height: 4px; border-radius: 2px; background: var(--line2); } body.ph .ph-grip:active i { background: var(--accent); } body.ph .ph-grip-view { order: 3; margin: -4px 0 -2px; } body.ph.insp-show #insp > .ph-grip-sheet { position: sticky; top: 0; z-index: 5; background: inherit; height: 20px; } body.ph:not(.insp-show) .ph-grip-sheet { display: none; } } /* ---------- one gap everywhere (the owner 2026-10-21: "the same gaps everywhere, the grips in the middle everywhere"): 8 px between the side panels, the preview, the playback and the blocks and around them; each grip centred in its gap */ :root { --gap: 8px; } @media (min-width: 981px) { html:not(.kq-unity-panel) #app { grid-template-columns: var(--side-w) var(--gap) minmax(360px, 1fr) var(--gap) var(--insp-w); } html:not(.kq-unity-panel) body.insp-off #app { grid-template-columns: var(--side-w) var(--gap) minmax(360px, 1fr) 0 0; } html:not(.kq-unity-panel) #main { gap: 0; padding: var(--gap) 0; grid-template-rows: minmax(260px, 1fr) auto var(--gap) var(--strip-h); } html:not(.kq-unity-panel) #view { margin-bottom: var(--gap); } html:not(.kq-unity-panel) #side { margin: var(--gap) 0 var(--gap) var(--gap); } html:not(.kq-unity-panel) #insp { margin: var(--gap) var(--gap) var(--gap) 0; } html:not(.kq-unity-panel) :is(#sideResizer, #inspResizer)::after { left: 50%; margin-left: -1.5px; top: 50%; margin-top: -23px; } html:not(.kq-unity-panel) #resizer::after { top: 50%; margin-top: -1.5px; } html.kq-tl-rich:not(.kq-unity-panel) #tlResizer { top: calc(-1 * var(--gap)); height: var(--gap); } html.kq-tl-rich:not(.kq-unity-panel) #tlResizer::after { top: 50%; margin-top: -1.5px; } } @media (max-width: 700px) { /* the sheet: grip, head, tabs fixed at its top, only the settings scroll (the grip made the tabs' row 0 high - they ran over the content) */ body.ph.insp-show:not(.ph-vm) #insp { grid-template-rows: auto auto auto minmax(0, 1fr); overflow: hidden !important; } body.ph.insp-show #insp > .ph-grip-sheet { position: static; } body.ph.insp-show #insp > #inspBody { overflow-y: auto; min-height: 0; } body.ph.insp-show #insp > #inspTabs { position: static; background: var(--panel); } } @media (max-width: 700px) { /* posing on a phone: the panel a sheet at the bottom over the playback, the character free above it (the owner 2026-10-21: "pose mode on a phone overlaps the keys and the controls") */ body.ph #posePanel { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: calc(60px + env(safe-area-inset-bottom)) !important; width: auto !important; max-height: 42vh; max-height: 42dvh; overflow-y: auto; z-index: 55; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px #000a; padding: 8px 10px; transform: none !important; } body.ph #posePanel :is(.pp-hint) { display: none; } body.ph #poseInfo { display: none !important; } body.ph #posePanel label.chk { display: inline-flex; margin: 2px 10px 2px 0; } } @media (max-width: 700px) { /* one column, never wrapped: a wrapped column sized its line to the widest row - in 🛠 Tools the playback row grew to 1200 px and stretched the whole phone page (everything zoomed out); the row now scrolls sideways inside the screen */ body.ph #transport { flex-wrap: nowrap; } body.ph .ph-tr { min-width: 0; max-width: 100%; box-sizing: border-box; } } @media (max-width: 700px) { /* ⚙ is in the phone's bottom bar - the side tab on the right edge only covered the preview and peeked over the sheets */ body.ph #inspOpen { display: none !important; } /* the clip preview's banner on one line */ body.ph #previewBanner { white-space: nowrap; max-width: calc(100% - 16px); font-size: 12px; padding: 4px 6px 4px 12px; gap: 8px; } body.ph #previewBanner > span { overflow: hidden; text-overflow: ellipsis; } body.ph #previewBanner button { white-space: nowrap; flex: none; } /* posing: the preview only above the posing sheet (the whole character seen, feet too), the key rows wide enough */ body.ph.posing #view { height: calc(60vh - 110px); height: calc(60dvh - 110px); min-height: 200px; } body.ph #posePanel { max-height: 40vh; max-height: 40dvh; max-width: none !important; box-sizing: border-box; } body.ph #posePanel .pp-blend { grid-template-columns: 64px 92px minmax(60px, 1fr) 44px; } body.ph #posePanel .pp-blend:has(#ppEase) { grid-template-columns: 92px minmax(0, 1fr); } body.ph #posePanel .pp-blend select { min-width: 0; width: 100%; } } /* the clip preview's banner never wraps (the owner 2026-10-21: "Back to the timeline" broke into 3 lines in a round button) */ #previewBanner { white-space: nowrap; max-width: calc(100% - 16px); } #previewBanner > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; } #previewBanner button { white-space: nowrap; flex: none; } @media (max-width: 700px) { /* simple: under the preview only the timeline and the blocks; the side panel (library, character, settings) shows only when asked for - ➕ Animation library, or 🛠 Tools (phoneSide) */ body.ph:not(.ph-lib):not(.ph-tools) #side > :not(header) { display: none !important; } .ph-side-back { display: none; } body.ph.ph-lib .ph-side-back { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 60; margin: 0; padding: 12px 10px calc(12px); font-size: 14px; font-weight: 700; border-radius: 0 0 12px 12px; border: 0; border-bottom: 1px solid var(--accent); background: var(--panel); color: var(--text); box-shadow: 0 6px 20px #000a; } } @media (max-width: 700px) { /* the phone bar and ➕ menu in the neon look (the owner 2026-10-21: "the icons in my neon design"): line icons, each with its own neon colour and glow, like the tabs and the project buttons */ .ph-dock button .ph-ic .ic, .ph-add button .ph-ic .ic { width: 22px; height: 22px; vertical-align: 0; } .ph-dock button b { letter-spacing: .2px; } #phAdd .ic { color: var(--n3); filter: drop-shadow(0 0 3px #ff3d8bcc) drop-shadow(0 0 8px #ff3d8b66); } #phAdd { border-color: #ff3d8b88; color: #ff9ec0; box-shadow: inset 0 0 10px #ff3d8b22, 0 0 8px #ff3d8b33; } #phPose .ic { color: var(--n1); filter: drop-shadow(0 0 3px #ffb13dcc) drop-shadow(0 0 8px #ffb13d55); } #phInsp .ic { color: var(--ncy); filter: drop-shadow(0 0 3px #2ee6ffcc) drop-shadow(0 0 8px #2ee6ff55); } #phTools .ic { color: #c77dff; filter: drop-shadow(0 0 3px #c77dffcc) drop-shadow(0 0 8px #c77dff55); } #phExport .ic { color: #fff; filter: drop-shadow(0 0 3px #fff9); } .ph-dock button.on { border-color: #c77dffaa; box-shadow: inset 0 0 10px #c77dff22, 0 0 8px #c77dff44; } .ph-dock button:active .ic { filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 14px currentColor); } .ph-add button .ph-ic .ic { color: var(--ncy); filter: drop-shadow(0 0 3px #2ee6ffaa); } .ph-add button[data-a="sample"] .ph-ic .ic { color: #fff; filter: drop-shadow(0 0 3px #fff9); } .ph-add button[data-a="video"] .ph-ic .ic { color: var(--n3); filter: drop-shadow(0 0 3px #ff3d8baa); } .ph-add button[data-a="live"] .ph-ic .ic { color: #c77dff; filter: drop-shadow(0 0 3px #c77dffaa); } .ph-add button[data-a="lib"] .ph-ic .ic { color: var(--n1); filter: drop-shadow(0 0 3px #ffb13daa); } } @media (max-width: 700px) { /* 🛠 Tools on a phone: every control at once, small, laid out in rows - no sideways swiping (the owner 2026-10-21: "I don't like the scrolling on the phone - when I tap Tools show everything suitably small and lay it out nicely") */ body.ph.ph-tools .ph-tr { flex-wrap: wrap; overflow: visible; row-gap: 5px; column-gap: 6px; -webkit-mask-image: none; mask-image: none; padding-right: 1px; scroll-snap-type: none; } body.ph.ph-tools .ph-tr-g { flex-wrap: wrap; row-gap: 4px; gap: 3px; padding-right: 5px; } body.ph.ph-tools .ph-tr-g > button, body.ph.ph-tools .ph-tr-g > .magic-btn, body.ph.ph-tools .ph-tr-g > .phys-btn, body.ph.ph-tools .ph-tr-g > select, body.ph.ph-tools .ph-tr-g > #tlModeSw, body.ph.ph-tools .ph-tr-g > label.chk { height: 26px; font-size: 11px; border-radius: 7px; } body.ph.ph-tools .ph-tr-g > button { min-width: 28px; padding: 0 6px; } body.ph.ph-tools .ph-tr-g > #tlModeSw button { height: 24px; padding: 0 7px; font-size: 11px; } body.ph.ph-tools .ph-tr-g > select { padding: 0 4px; max-width: 96px; } body.ph.ph-tools .ph-tr-g > label.chk { padding: 0 5px; gap: 3px; } body.ph.ph-tools #transport #play { min-width: 34px; } body.ph.ph-tools .ph-tr-g > #time { height: 26px; font-size: 11px; } body.ph.ph-tools #transport #magicBtn { padding: 0 8px; font-size: 10.5px; } /* the view's row (Pose, Assistant, speed ...) too */ body.ph.ph-tools #viewCtl.ph-vc { flex-wrap: wrap; overflow: visible; row-gap: 4px; gap: 4px; -webkit-mask-image: none; mask-image: none; padding-right: 0; } body.ph.ph-tools #viewCtl.ph-vc button { height: 26px; font-size: 11px; padding: 0 7px; border-radius: 7px; } body.ph.ph-tools #viewCtl.ph-vc > * { font-size: 11px; } } @media (max-width: 700px) { /* the weapon pick in the side panel's Settings page on a phone (phoneWeapon) */ body.ph #weaponRow.ph-wpn { position: static; transform: none; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); } body.ph #weaponRow.ph-wpn select { flex: 1; min-width: 0; } /* the Cards / Blocks switch takes a row on a phone for little: gone there (the owner 2026-10-21) */ body.ph #tlModeSw { display: none !important; } /* a tools group never wider than the row: it wraps inside */ body.ph.ph-tools .ph-tr-g { flex: 0 1 auto; max-width: 100%; min-width: 0; } } @media (max-width: 700px) { /* 🛠 Tools: the groups' controls flow one after another in the wrapped rows (no half-empty rows) */ body.ph.ph-tools .ph-tr { gap: 4px; align-items: center; } body.ph.ph-tools .ph-tr-g { display: contents; } } @media (max-width: 700px) { /* a phone's page never pans sideways (a control 1-2 px past the edge let the whole page wiggle) */ html:has(body.ph), body.ph { overflow-x: clip; } } @media (max-width: 700px) { /* the library page on a phone: upload / video / sample / live camera are all in ➕ - gone here (the owner 2026-10-21) */ body.ph #addActs :is(#libDrop, #vmDrop, #vmSampleBtn, #liveBtn, #vmSoon) { display: none !important; } .ph-add button[data-a="upload"] .ph-ic .ic { color: #a3e635; filter: drop-shadow(0 0 3px #a3e635aa); } } @media (max-width: 700px) { /* one gap everywhere on a phone: 5 px (the first one's size - the owner 2026-10-21) between the header, the preview, the playback, the blocks and the bars (the owner 2026-10-21: "this is different and uneven again, it must be the same"); the preview's size grip lies IN the gap under the preview (no row of its own), its touch area larger than it looks */ body.ph #main { gap: 5px; padding: 5px; } body.ph .ph-grip-view { order: 0; height: 5px; margin: -5px 0; position: relative; z-index: 4; } body.ph .ph-grip-view i { width: 36px; height: 3px; } body.ph .ph-grip-view::before { content: ''; position: absolute; left: 25%; right: 25%; top: -10px; bottom: -10px; } /* ✋ Pose is in the bottom bar - not again over the preview */ body.ph #poseBtn { display: none !important; } } /* (9 px on the right: the end grip (⇥, 7 px past the animation's end) whole on screen - the owner 2026-10-21) */ @media (max-width: 700px) { /* 📱 the live camera on the phone itself: a sheet at the bottom - the character stays seen above it, the camera's picture small in it (the owner 2026-10-21: the phone's own camera, no QR code) */ body.ph #liveModal { left: 0 !important; right: 0; top: auto !important; bottom: calc(60px + env(safe-area-inset-bottom)); width: auto; max-height: 50vh; max-height: 50dvh; border-radius: 14px 14px 0 0; padding: 8px 10px 10px; z-index: 56; box-shadow: 0 -10px 30px #000a; } body.ph #liveModal .vm-stage { min-height: 0; height: 30vh; height: 30dvh; } body.ph #liveModal .vm-stage video { width: 100%; height: 100%; object-fit: contain; } body.ph #liveModal .exp-head { cursor: default; } body.ph #liveModal .btnrow button { min-height: 40px; } body.ph #liveModal details.info { display: none; } } /* (a 320 px phone: the header was 49 px wider than the screen and pushed the account chip 👤 out of sight - the tooltip switch is useless on a touch screen (no hover), and below 370 px the logo stands without the word, 2026-10-22) */ @media (max-width: 700px) and (pointer: coarse) { body.ph #side > header #tipsBtn { display: none; } } @media (max-width: 370px) { body.ph #side > header h1 .brand { display: none; } body.ph #side > header .ph-proj button { width: 30px; } } /* (the start choices glow until one is used - 42-init.js start-hl, 2026-10-23) */ @keyframes kqStartGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,61,0); } 50% { box-shadow: 0 0 0 3px rgba(255,122,61,.55), 0 0 22px rgba(255,61,139,.45); } } body.start-hl:not(.ph) :is(#vmDrop, #vmSampleBtn, #liveBtn) { animation: kqStartGlow 2.2s ease-in-out infinite; border-color: rgba(255,122,61,.75); } body.start-hl:not(.ph) #vmDrop { animation-delay: 0s; } body.start-hl:not(.ph) #vmSampleBtn { animation-delay: .25s; } body.start-hl:not(.ph) #liveBtn { animation-delay: .5s; } @media (prefers-reduced-motion: reduce) { body.start-hl:not(.ph) :is(#vmDrop, #vmSampleBtn, #liveBtn) { animation: none; box-shadow: 0 0 0 2px rgba(255,122,61,.6); } } /* (app/34 vmNextSteps: the next step after a video's animation went into the project - 2026-10-25) */ .vm-next { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 30; width: max-content; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); background: rgba(14, 17, 23, 0.94); border: 1px solid #ff8a3d; border-radius: 10px; padding: 7px 9px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); font-size: 13px; } .vm-next button { padding: 5px 9px; border-radius: 7px; font-size: 12.5px; } .vm-next .vm-next-x { background: transparent; border: 0; opacity: 0.7; padding: 4px 6px; } /* (31-projects.js: the account's projects in the ☁ menu) */ .acct-projs { max-height: 260px; overflow-y: auto; } /* (34-video-mocap.js vmExportHint: the export window would send the sample block, not the video's animation) */ .exp-vid-hint { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 10px; border: 1px solid #ff8a3d; border-radius: 8px; background: rgba(255, 138, 61, 0.12); font-size: 13px; } .exp-vid-hint button { padding: 5px 10px; font-size: 12.5px; } /* (02-helpers.js askText: a name in the app's own window instead of prompt()) */ .kq-ask label { display: flex; flex-direction: column; gap: 8px; color: #dfe6ef; font-size: 14px; margin-bottom: 14px; } .kq-ask input { padding: 9px 10px; font-size: 15px; } /* (the admin's "Video na zdieľanie" switch - settings.php features.share; off since 2026-10-28) */ .kq-off-share .exp-share { display: none !important; } /* the text-to-animation button while the model downloads: says to wait (the owner 2026-10-31) */ /* (2026-11-02: also the parkour's button, and marked plainly - a grey button filled by the model's download %, no "Create" on it: a path / an object / an AI parkour move need the model, 34d t2mNeedsModel) */ #t2mGo.t2m-wait, #pkGo.t2m-wait { opacity: 1; cursor: progress; color: #e8edf3; border: 1px dashed rgba(255, 255, 255, .35); background: linear-gradient(90deg, rgba(255, 138, 61, .45) var(--p, 0%), #252c36 var(--p, 0%)); filter: none; } /* "What's new" in the middle of the screen (app/41g-news.js, the owner 2026-10-31) */ .news-ov { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 9, 14, .62); backdrop-filter: blur(4px); animation: newsIn .25s ease-out; } @keyframes newsIn { from { opacity: 0; } to { opacity: 1; } } .news-box { position: relative; width: min(680px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 22px 16px; border-radius: 16px; background: linear-gradient(180deg, #1a2230, #121821); border: 1px solid #33405a; box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,106,61,.12), 0 0 40px rgba(255,61,139,.12); animation: newsPop .3s cubic-bezier(.2,.9,.3,1.2); } @keyframes newsPop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } .news-x { position: absolute; top: 10px; right: 10px; padding: 3px 8px; background: none; border: 0; color: var(--muted, #8b95a5); cursor: pointer; font-size: 15px; } .news-x:hover { color: #fff; } .news-h { font-size: 21px; font-weight: 800; color: #fff; text-align: center; } .news-spark { color: #ff5fd2; filter: drop-shadow(0 0 6px #ff5fd2aa); } .news-sub { text-align: center; color: var(--muted, #8b95a5); margin: 4px 0 16px; font-size: 13px; } .news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 620px) { .news-grid { grid-template-columns: 1fr; } } .news-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #0f141c; border: 1px solid #2a3446; } .news-card .primary { margin-top: auto; } .news-art { position: relative; height: 150px; border-radius: 9px; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, #2a1d3a, #0b0f16 70%); } .news-vid video { width: 100%; height: 100%; object-fit: cover; display: block; } .news-vid.news-novid { background: linear-gradient(135deg, #2a1d3a, #11213a); } .news-prompt { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11.5px; font-style: italic; } .news-t { font-weight: 750; color: #fff; font-size: 14.5px; } .news-tag { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 5px; vertical-align: 2px; background: linear-gradient(90deg, #ff8a3d, #ff3d8b); color: #fff; } .news-p { color: #b9c5d3; font-size: 12.5px; line-height: 1.45; } .news-later { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--muted, #8b95a5); cursor: pointer; font-size: 12.5px; } .news-later:hover { color: #fff; } /* the own-character picture: files on the left, an arrow, a figure that moves */ .news-char svg { width: 100%; height: 100%; } .news-char .nw-files rect { fill: #151c26; stroke: #2ee6ff; stroke-width: 1.5; filter: drop-shadow(0 0 3px #2ee6ff88); } .news-char .nw-files text { fill: #cfefff; font: 700 10px system-ui, sans-serif; text-anchor: middle; } .news-char .nw-files rect, .news-char .nw-files text { animation: nwFile 3s ease-in-out infinite; } .news-char .nw-arrow { fill: none; stroke: #ff8a3d; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #ff6a3dcc); animation: nwArrow 1.5s ease-in-out infinite; } .news-char .nw-fig circle { fill: url(#nwG); } .news-char .nw-fig path { fill: none; stroke: url(#nwG); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; } .news-char .nw-fig { filter: drop-shadow(0 0 6px #ff3d8b88); } .news-char .nw-armL { transform-origin: 0 32px; animation: nwArmL 1.2s ease-in-out infinite alternate; } .news-char .nw-armR { transform-origin: 0 32px; animation: nwArmR 1.2s ease-in-out infinite alternate; } .news-char .nw-legL { transform-origin: 0 68px; animation: nwLeg 1.2s ease-in-out infinite alternate; } .news-char .nw-legR { transform-origin: 0 68px; animation: nwLeg 1.2s ease-in-out infinite alternate-reverse; } .news-char .nw-floor { stroke: #33405a; stroke-width: 2; } @keyframes nwFile { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @keyframes nwArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } @keyframes nwArmL { from { transform: rotate(-10deg); } to { transform: rotate(35deg); } } @keyframes nwArmR { from { transform: rotate(10deg); } to { transform: rotate(-40deg); } } @keyframes nwLeg { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } } @media (prefers-reduced-motion: reduce) { .news-char *, .news-box, .news-ov { animation: none !important; } } /* library: "New" = a clean new project with only this clip (2026-10-31) */ #lib .clip .lib-acts .lib-newp { font-weight: 700; color: #fff; background: linear-gradient(100deg, #ffb13d, #ff6a3d 55%, #ff3d8b); border-color: transparent; } #lib .clip .lib-acts .lib-newp:hover { filter: brightness(1.1); } #lib.lib-grid .tile .lib-acts .lib-newp { flex: 2 1 0; white-space: nowrap; overflow: hidden; font-size: 10.5px; } #chatLog .chat-msg.chat-wait { align-self: flex-start; color: var(--muted); font-style: italic; border: 1px dashed var(--line); } #chatLog .chat-msg.chat-guide { max-width: 100%; white-space: normal; } #chatLog .chat-guide p { margin: 4px 0; } #chatLog .chat-guide-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; } #chatLog .chat-guide-row span { flex: 0 0 100%; color: var(--muted); font-size: 11.5px; } #chatLog .chat-guide-row button { font-size: 11.5px; padding: 2px 8px; border-radius: 10px; } /* the assistant's ❔ guide: the panel taller and without the example chips while the guide is the last message */ #chatPanel.chat-guiding { height: min(600px, 92%); } #chatPanel.chat-guiding .chat-ex { display: none; } /* the preview's controls, top right, in groups (08-effects.js viewControls, 2026-11-02) */ .view-help-btn { position: absolute; right: 10px; top: 10px; z-index: 6; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line2); background: rgba(13, 18, 24, 0.75); color: var(--text); font-size: 12px; line-height: 1; cursor: pointer; } .view-help-btn:hover { border-color: var(--accent); } /* (the owner 2026-11-09: 🎨 no longer alone under "Preview" - beside Controls in the view's top row, the same size) */ #viewTopR { position: absolute; right: 10px; top: 10px; z-index: 6; display: flex; align-items: center; gap: 6px; } #viewTopR .view-help-btn { position: static; } /* (the owner 2026-11-09, Settings → Časová os: the timeline, the cards and the dock leave #main and take the whole width right of the left panel ('r') or of the window ('all'); #main's own rows are the app's rows then) */ @media (min-width: 1101px) { html:not(.kq-unity-panel) body:is(.tl-wide-r, .tl-wide-all):not(.ph) #main { display: contents; } html:not(.kq-unity-panel) body:is(.tl-wide-r, .tl-wide-all):not(.ph) #app { grid-template-rows: minmax(260px, 1fr) auto var(--gap, 5px) var(--strip-h) auto; } html.kq-tl-rich:not(.kq-unity-panel) body:is(.tl-wide-r, .tl-wide-all):not(.ph) #app { grid-template-rows: minmax(260px, 1fr) auto 0 0 auto; } body:is(.tl-wide-r, .tl-wide-all):not(.ph) #view { grid-column: 3; grid-row: 1; min-height: 0; margin-top: var(--gap, 5px); } body:is(.tl-wide-r, .tl-wide-all):not(.ph) :is(#transport, #dock) { margin-right: var(--gap, 5px); } body:is(.tl-wide-r, .tl-wide-all):not(.ph) #dock { margin-bottom: var(--gap, 5px); } body.tl-wide-all:not(.ph) :is(#transport, #dock) { margin-left: var(--gap, 5px); } body:is(.tl-wide-r, .tl-wide-all):not(.ph) #insp { grid-column: 5; grid-row: 1; } body:is(.tl-wide-r, .tl-wide-all):not(.ph) #inspResizer { grid-column: 4; grid-row: 1; } body:is(.tl-wide-r, .tl-wide-all):not(.ph) #side { grid-column: 1; min-height: 0; } body:is(.tl-wide-r, .tl-wide-all):not(.ph) #sideResizer { grid-column: 2; } body.tl-wide-r:not(.ph) :is(#side, #sideResizer) { grid-row: 1 / -1; } body.tl-wide-all:not(.ph) :is(#side, #sideResizer) { grid-row: 1; } body:is(.tl-wide-r, .tl-wide-all):not(.ph) #transport { grid-row: 2; } body:is(.tl-wide-r, .tl-wide-all):not(.ph) #resizer { grid-row: 3; } body:is(.tl-wide-r, .tl-wide-all):not(.ph) #strip { grid-row: 4; } body:is(.tl-wide-r, .tl-wide-all):not(.ph) #dock { grid-row: 5; } body.tl-wide-r:not(.ph) :is(#transport, #resizer, #strip, #dock) { grid-column: 3 / -1; } body.tl-wide-all:not(.ph) :is(#transport, #resizer, #strip, #dock) { grid-column: 1 / -1; } } #viewTopR #lookBtn { width: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .view-help-btn[hidden] { display: none; } .view-help { position: absolute; right: 8px; top: 8px; z-index: 6; width: 300px; max-width: calc(100% - 16px); max-height: calc(100% - 70px); overflow: auto; background: rgba(13, 18, 24, 0.72); border: 1px solid var(--line2); border-radius: 8px; padding: 5px 9px 6px; font-size: 10.5px; line-height: 1.25; color: var(--text); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); backdrop-filter: blur(3px); } .view-help[hidden] { display: none; } .view-help .vh-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1px; } .view-help .vh-head b { font-size: 11px; } .view-help .vh-fold { width: 18px; height: 16px; padding: 0; border-radius: 4px; border: 1px solid var(--line2); background: transparent; color: var(--text); cursor: pointer; font-size: 11px; line-height: 1; } .view-help .vh-fold:hover { border-color: var(--accent); } .view-help .vh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; } .view-help .vh-gh { color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 3px 0 0; } .view-help .vh-row { display: flex; gap: 6px; justify-content: space-between; align-items: center; padding: 0; } .view-help .vh-row span:first-child { color: var(--muted); white-space: nowrap; } .view-help .vh-row span:last-child { text-align: right; white-space: nowrap; } .view-help kbd { font: 9.5px/1 ui-monospace, monospace; padding: 1px 3px; border: 1px solid var(--line2); border-radius: 3px; } .view-help .vh-all { margin-top: 3px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 10px; cursor: pointer; } .view-help .vh-all:hover { text-decoration: underline; } /* the Unity connect dialog: the buttons one under the other, the same width (16-export.js unitySetup, 2026-11-01) */ .kq-unity-box .kq-gate-acts { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .kq-unity-box .kq-gate-acts > * { width: 100%; margin: 0; text-align: center; justify-content: center; box-sizing: border-box; } /* the arrow to the downloaded Unity package (16-export.js unityOpenHint, 2026-11-01): top right, where browsers show downloads */ .kq-dl-arrow { position: fixed; top: 6px; right: 24px; z-index: 100001; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; color: #ffb13d; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.8); animation: kqDlBob 1s ease-in-out infinite; } .kq-dl-arrow b { font-size: 34px; line-height: 1; } .kq-dl-arrow span { font-size: 13px; background: rgba(20,14,26,.92); border: 1px solid rgba(255,177,61,.6); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } @keyframes kqDlBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (prefers-reduced-motion: reduce) { .kq-dl-arrow { animation: none; } } /* the Unity news card (41g-news.js newsUnityArt, 2026-11-01): across the window, a browser hands the animation to Unity */ .news-card.news-wide { grid-column: 1 / -1; } .news-wide .news-art { height: 110px; } .news-unity svg { width: 100%; height: 100%; } .news-unity .nu-win { fill: #151c26; stroke: #2ee6ff; stroke-width: 1.5; filter: drop-shadow(0 0 3px #2ee6ff88); } .news-unity .nu-bar { stroke: #2ee6ff88; stroke-width: 1.5; } .news-unity .nu-fig circle { fill: #ff8a3d; } .news-unity .nu-fig path { fill: none; stroke: #ff8a3d; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .news-unity .nu-arrow { fill: none; stroke: #ff8a3d; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #ff6a3dcc); animation: nwArrow 1.5s ease-in-out infinite; } .news-unity .nu-cube path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 6px #ff3d8b99); } @media (prefers-reduced-motion: reduce) { .news-unity .nu-arrow { animation: none; } } /* 🧭 Z textu > Cesta a objekt (34e-t2m-guide.js, admin test) */ .tg-box .btnrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; } .tg-box button.on { outline: 2px solid #3fd17a; background: rgba(63, 209, 122, 0.15); } .tg-chk { display: flex; gap: 6px; align-items: center; margin-top: 4px; } .tg-box input[type=range] { width: 100%; } .tg-overlay { position: absolute; inset: 0; z-index: 6; cursor: crosshair; touch-action: none; } /* the path + pick-up news card (41g-news.js newsPathArt, 2026-11-02) */ .news-path svg { width: 100%; height: 100%; display: block; } .tg-auto { box-shadow: 0 0 0 2px #3fd17a; transition: box-shadow .3s; } /* ⚔ own weapon's grip (34f-own-weapon.js): compact, at the view's right edge */ #view .own-w-panel { position: absolute; top: 10px; right: 10px; z-index: 6; width: 244px; padding: 8px 11px 9px; border-radius: 9px; background: rgba(13, 18, 24, 0.86); border: 1px solid #2a3440; font-size: 11px; color: #c9d4e0; backdrop-filter: blur(4px); } #view .own-w-panel summary { cursor: pointer; font-weight: 700; font-size: 12px; color: #fff; list-style-position: inside; } #view .own-w-panel .ow-name { display: block; margin: 1px 0 0 14px; font-weight: 400; font-size: 10.5px; color: #8b95a5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view .own-w-panel .own-w-body { display: grid; gap: 3px; margin-top: 7px; padding-top: 7px; border-top: 1px solid #222b36; } #view .own-w-panel .ow-row { display: grid; grid-template-columns: 78px 1fr 44px; align-items: center; gap: 7px; height: 21px; } #view .own-w-panel .ow-row span { color: #9fb1c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view .own-w-panel .ow-row input { width: 100%; margin: 0; } #view .own-w-panel .ow-row output { text-align: right; color: #e8eef5; font-variant-numeric: tabular-nums; } #view .own-w-panel .ow-btns { display: flex; gap: 6px; margin-top: 6px; } #view .own-w-panel .ow-btn { flex: 1 1 auto; padding: 3px 6px; min-height: 0; font-size: 11px; line-height: 1.3; white-space: nowrap; border-radius: 6px; } #view .own-w-panel .ow-btn.on { outline: 2px solid #ff8a3d; background: rgba(255, 138, 61, 0.15); } /* ---- 2026-11-02, the owner: "Library / From text bigger and more prominent", "the whole screen is crammed together, unclear - make some gaps and separate the sections clearly". The left panel: more air, one clear block per step (add actions -> Library | From text -> search -> Source -> Category -> clips). Unity panel keeps its compact look. */ :root:not(.kq-unity-panel) #side { padding: 0 14px 32px; } :root:not(.kq-unity-panel) #tabs { padding-bottom: 10px; } :root:not(.kq-unity-panel) #addActs { gap: 6px; margin: 6px 0 14px; } :root:not(.kq-unity-panel) .subtabs.big { margin: 0 0 14px; padding: 4px; gap: 4px; border: 1px solid #3d4b63; border-radius: 12px; background: #0e131a; overflow: visible; } :root:not(.kq-unity-panel) .subtabs.big button { padding: 11px 8px; font-size: 14.5px; font-weight: 700; border: 0; border-radius: 9px; background: transparent; color: #a9b8c8; transition: background .15s, color .15s, box-shadow .15s; } :root:not(.kq-unity-panel) .subtabs.big button + button { border-left: 0; } :root:not(.kq-unity-panel) .subtabs.big button:hover:not(.on) { background: #1a2230; color: #fff; } :root:not(.kq-unity-panel) .subtabs.big .sub-ic { width: 19px; height: 19px; vertical-align: -4px; margin-right: 3px; } :root:not(.kq-unity-panel) .subtabs.big button.on { color: #fff; background: linear-gradient(135deg, #ff7a3d, #ff3d8b); box-shadow: 0 3px 14px -3px #ff6a3dcc; } :root:not(.kq-unity-panel) .subtabs.big button.on .sub-ic { color: #fff; filter: none; } :root:not(.kq-unity-panel) .subtabs.big button.on .beta-tag { color: #fff; border-color: #ffffffaa; } :root:not(.kq-unity-panel) #tab-lib > details.info { margin: 0 0 12px; } :root:not(.kq-unity-panel) .libhead { margin: 0 -14px; padding: 10px 14px 8px; } :root:not(.kq-unity-panel) .libhead .lib-search { gap: 8px; margin-bottom: 4px; } :root:not(.kq-unity-panel) .libhead .chips { gap: 5px 6px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #253041; } :root:not(.kq-unity-panel) .chips .chips-lab { margin: 0 0 2px; font-weight: 700; letter-spacing: .1em; color: #8d9cad; } :root:not(.kq-unity-panel) #lib { margin-top: 14px; } :root:not(.kq-unity-panel) #lib.lib-grid { gap: 10px; } :root:not(.kq-unity-panel) #lib.lib-grid .clip.tile { padding: 5px; gap: 4px; border-radius: 9px; } /* auto-rig: the joint check of a character uploaded without a skeleton (app/40c-autorig.js) */ .ar-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; } .ar-layer .ar-bones { position: absolute; left: 0; top: 0; pointer-events: none; } .ar-layer .ar-bones line { stroke: #ffffffb0; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 1px #000); } .ar-layer .ar-dot { width: 14px; height: 14px; left: -7px; top: -7px; transition: none; } .ar-layer .ar-dot.right { background: #ff5a5acc; } .ar-layer .ar-dot.hip { background: #ffd34dcc; } .ar-layer .ar-dot.ar-finger { width: 9px; height: 9px; left: -4.5px; top: -4.5px; border-width: 1.5px; } .ar-layer .ar-dot.drag, .ar-layer .ar-dot:hover { box-shadow: 0 0 0 3px var(--accent), 0 1px 4px #000c; cursor: grabbing; } .ar-panel { position: absolute; left: 14px; top: 82px; z-index: 5; width: 300px; max-width: calc(100% - 28px); display: grid; gap: 8px; padding: 11px 12px; background: rgba(16,21,28,.96); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.45); font-size: 12.5px; } .ar-panel h4 { margin: 0; font-size: 14px; } .ar-panel p { margin: 0; color: var(--muted); line-height: 1.4; } .ar-panel .ar-note { color: #ffd34d; } .ar-panel .ar-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ar-panel .ar-row button { padding: 4px 9px; } .ar-panel .ar-acts { justify-content: flex-end; margin-top: 2px; } .ar-panel .ar-acts .primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; } .ar-panel .ar-bar { height: 8px; border-radius: 4px; background: var(--panel3); overflow: hidden; } .ar-panel .ar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #ff4d8d); transition: width .2s; } .ar-panel .ar-pc { justify-self: end; font-size: 12px; } /* ---- 🎮 Loco set (34g-locoset.js, 2026-11-02): the panel in Z textu and the player's HUD over the 3D view ---- */ .lc-box > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; } .lc-box .lc-sub { flex-basis: 100%; font-weight: 400; font-size: 11.5px; color: var(--muted); } .lc-box .lc-sec { margin: 10px 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .lc-box .lc-lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .lc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 9px; background: var(--panel3); } .lc-seg button { border: 0; background: transparent; padding: 7px 6px; border-radius: 7px; font-weight: 600; color: var(--muted); } .lc-seg button.on { background: linear-gradient(135deg, var(--accent), #ff4d8d); color: #fff; outline: none !important; } .lc-box #lcModeNote { margin-top: 6px; font-size: 11.5px; line-height: 1.4; } .lc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; } .lc-chips button { padding: 4px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line2); background: transparent; color: var(--muted); } .lc-chips button.on { color: var(--text); border-color: #3fd17a; background: rgba(63, 209, 122, .14); outline: none !important; } .lc-chips button:disabled { opacity: .85; cursor: default; } .lc-box #lcGo { width: 100%; padding: 9px; font-size: 13.5px; margin-top: 2px; } .lc-box #lcStatus { margin-top: 6px; font-size: 12px; line-height: 1.4; } .lc-box #lcStatus.bad { color: var(--err); } .lc-box .lc-play { width: 100%; margin: 12px 0 10px; padding: 11px; font-size: 14px; font-weight: 700; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #3fd17a, #1fa2ff); box-shadow: 0 4px 18px rgba(31, 162, 255, .25); } .lc-box .lc-play:disabled { opacity: .5; } .lc-group { margin: 8px 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; } .lc-ghead { display: flex; justify-content: space-between; align-items: center; padding: 6px 9px; background: var(--panel3); font-weight: 700; font-size: 12.5px; } .lc-ghead em { font-style: normal; font-size: 11px; color: var(--muted); background: var(--panel); border-radius: 999px; padding: 0 7px; } .lc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 4px; padding: 3px 5px 3px 3px; border-top: 1px solid var(--line); } .lc-row:first-of-type { border-top: 0; } .lc-row.sel { background: rgba(255, 138, 61, .1); } .lc-row button { padding: 3px 7px; font-size: 12px; min-width: 28px; } .lc-row .lc-name { text-align: left; border: 0; background: transparent; font-weight: 600; display: grid; gap: 1px; min-width: 0; padding: 3px 4px; } .lc-row .lc-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lc-row .lc-meta { font-size: 10.5px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lc-edit { padding: 3px 9px 4px; background: rgba(255, 255, 255, .025); border-top: 1px dashed var(--line2); display: grid; gap: 0; } /* (one line per slider: name | slider | value - the owner 2026-11-02: "zbytočne rozťahané") */ .lc-edit label:not(.lc-chk) { display: grid; grid-template-columns: 96px minmax(0, 1fr) 46px; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); min-height: 0; line-height: 1.2; margin: 0; } .lc-edit label:not(.lc-chk) b { order: 3; text-align: right; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } .lc-edit label:not(.lc-chk) input[type=range] { margin: 0; height: 12px; padding: 0; } .lc-edit .lc-chk { margin-top: 2px; font-size: 11px; } .lc-box .lc-place { margin: 0 0 8px; } .lc-box .lc-place button { padding: 4px 6px; font-size: 12px; } .lc-edit button[data-act=reset] { justify-self: start; padding: 2px 8px; font-size: 11.5px; margin-top: 2px; } .lc-edit .lc-chk, .lc-exp .lc-chk { display: flex; align-items: center; gap: 6px; font-size: 12px; } .lc-exp { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .lc-exp #lcZip { width: 100%; padding: 8px; font-weight: 650; } #lcHud { position: absolute; inset: 0; pointer-events: none; z-index: 4; font-size: 12px; color: #fff; } #lcHud > * { pointer-events: auto; } #lcHud .lc-top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 14px; border-radius: 12px; background: rgba(10, 13, 18, .78); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px); white-space: nowrap; } #lcHud #lcHudState { color: #3fd17a; font-weight: 700; min-width: 140px; } #lcHud #lcHudExit { padding: 4px 9px; border-radius: 8px; } #lcHud kbd { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .3); border-bottom-width: 2px; background: rgba(255, 255, 255, .08); font: 600 10.5px system-ui, sans-serif; text-align: center; } #lcHud .lc-keys { position: absolute; top: 58px; left: 56px; display: grid; gap: 4px; padding: 9px 11px; border-radius: 11px; background: rgba(10, 13, 18, .62); border: 1px solid rgba(255, 255, 255, .08); color: #d7dee6; } #lcHud .lc-joy { position: absolute; left: 22px; bottom: 22px; width: 120px; height: 120px; border-radius: 50%; touch-action: none; cursor: grab; background: radial-gradient(circle, rgba(255, 255, 255, .08) 0 35%, rgba(255, 255, 255, .03) 36%); border: 2px solid rgba(255, 255, 255, .22); } #lcHud .lc-stick { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 30%, #ffb27a, var(--accent)); box-shadow: 0 3px 12px rgba(0, 0, 0, .5); } #lcHud .lc-btns { position: absolute; right: 18px; bottom: 18px; display: grid; grid-template-columns: repeat(3, 62px); gap: 8px; } #lcHud .lc-btns button { height: 62px; border-radius: 16px; font-size: 21px; line-height: 1; display: grid; place-items: center; gap: 2px; padding: 6px 2px; touch-action: none; background: rgba(10, 13, 18, .7); border: 1px solid rgba(255, 255, 255, .18); color: #fff; } #lcHud .lc-btns button small { font-size: 9.5px; font-weight: 600; opacity: .85; } #lcHud .lc-btns button.on { background: rgba(63, 209, 122, .3); border-color: #3fd17a; } #lcHud .lc-btns button:active { transform: scale(.95); } body.ph #lcHud .lc-keys { display: none; } #lcHud.small .lc-keys { font-size: 10.5px; gap: 2px; padding: 6px 8px; } #lcHud.small .lc-joy { width: 92px; height: 92px; left: 14px; bottom: 14px; } #lcHud.small .lc-stick { width: 38px; height: 38px; margin: -19px 0 0 -19px; } #lcHud.small .lc-btns { grid-template-columns: repeat(3, 48px); gap: 6px; right: 12px; bottom: 12px; } #lcHud.small .lc-btns button { height: 48px; font-size: 17px; border-radius: 12px; } #lcHud.small .lc-btns button small { font-size: 8.5px; } /* (while the loco set plays: the preview's own controls step aside - the joystick / buttons sit there) */ body.lc-playing #viewCtl, body.lc-playing #weaponRow, body.lc-playing #chatPanel { display: none !important; } #lcHud .lc-lock { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 12px; background: rgba(10, 13, 18, .82); border: 1px solid rgba(255, 255, 255, .2); font-weight: 650; pointer-events: none; } /* ---- Z textu in three modes (34g t2mBuildModes, 2026-11-02 "prehľadnejšie, kompaktnejšie, čo sa s čím kombinuje") ---- */ #t2mModes { margin-bottom: 10px; } .t2m-mtabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 10px; background: var(--panel3); } .t2m-mtabs button { display: grid; justify-items: center; gap: 0; padding: 6px 2px 5px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); line-height: 1.15; } .t2m-mtabs button span { font-size: 16px; } .t2m-mtabs button b { font-size: 12.5px; color: var(--text); } .t2m-mtabs button small { font-size: 10px; } .t2m-mtabs button.on { background: linear-gradient(135deg, var(--accent), #ff4d8d); color: #fff; } .t2m-mtabs button.on b, .t2m-mtabs button.on small { color: #fff; } .t2m-how { margin-top: 7px; padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); font-size: 11.5px; line-height: 1.4; color: var(--muted); } .t2m-how ol { margin: 0; padding-left: 17px; } .t2m-how li + li { margin-top: 2px; } /* (only the chosen mode's parts: the motion's own fields, or the parkour / loco box laid flat without its header) */ #t2mForm[data-mode="text"] > #pkBox, #t2mForm[data-mode="text"] > #lcBox { display: none !important; } #t2mForm[data-mode="pk"] > :not(#t2mModes):not(#pkBox):not(#t2mResult):not(#t2mModel) { display: none !important; } #t2mForm[data-mode="lc"] > :not(#t2mModes):not(#lcBox):not(#t2mModel) { display: none !important; } #t2mForm[data-mode="pk"] > #pkBox, #t2mForm[data-mode="lc"] > #lcBox { border: 0; padding: 0; margin: 0; background: transparent; } #t2mForm[data-mode="pk"] > #pkBox > summary, #t2mForm[data-mode="lc"] > #lcBox > summary { display: none; } /* (the loco set's progress: a bar and its % in big) */ .lc-prog { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .lc-track { flex: 1; height: 8px; border-radius: 99px; background: var(--panel3); overflow: hidden; } #lcBar { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #3fd17a, #1fa2ff); transition: width .25s ease; } #lcBar.wait { opacity: .55; animation: lcPulse 1.2s ease-in-out infinite; } @keyframes lcPulse { 50% { opacity: .25; } } #lcPct { min-width: 44px; text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; color: #3fd17a; } .lc-box .lc-sec { margin: 4px 0 8px; padding-bottom: 8px; } .lc-box #lcGroups { margin: 8px 0 6px; } .lc-box .lc-depth { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); } .lc-box .lc-depth b { color: var(--text); font-weight: 600; } /* ---- the add actions under the main tabs as their own block with FILLED colour icons (the owner 2026-11-02: "oddeľ tieto dve sekcie výraznejšie… tej dole plné ikony s farbami") - the main tabs above keep their line icons ---- */ :root:not(.kq-unity-panel) #addActs { margin: 10px 0 8px; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); } :root:not(.kq-unity-panel) #addActs > :is(.drop, .sample-btn) { height: 58px; background: #141a23; border-color: #2b3546; } #addActs .act-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-bottom: 3px; border-radius: 8px; color: #fff; background: var(--aci, #5b6b80); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); } #addActs .act-ic svg { width: 15px; height: 15px; color: #fff; stroke: #fff; } #libDrop { --aci: linear-gradient(135deg, #3b82f6, #1fa2ff); } #vmDrop { --aci: linear-gradient(135deg, #ff4d8d, #e0457b); } #vmSampleBtn { --aci: linear-gradient(135deg, #ff8a3d, #ff6a3d); } #liveBtn { --aci: linear-gradient(135deg, #22c55e, #3fd17a); } #charUpBtn { --aci: linear-gradient(135deg, #8b5cf6, #a78bfa); } /* (the library tiles' buttons bigger - the owner 2026-11-02: "sú veľmi malé"; the icon in them sized with them) */ #lib.lib-grid .tile .lib-acts { gap: 4px; } #lib.lib-grid .tile .lib-acts button { height: 30px; padding: 0; border-radius: 7px; font-size: 12px; display: inline-grid; place-items: center; } #lib.lib-grid .tile .lib-acts button svg { width: 16px; height: 16px; } #lib.lib-grid .tile .lib-acts .lib-newp { font-size: 12px; } /* (the Z textu modes' icons bigger - only the icons, the tabs stay; the owner 2026-11-02) */ .t2m-mtabs button > span { font-size: 21px; line-height: 1.1; } .t2m-mtabs button > span svg, .t2m-mtabs button svg.kqi { width: 22px; height: 22px; } /* ---- Z textu compact (the owner 2026-11-02: "celý panel krajšie, prehľadnejšie, kompaktnejšie, nech nie je treba veľa scrollovať") - the motion mode's fields, its status lines and the ideas tighter; the parts stay where they are ---- */ /* (the prompt is the main thing of the panel - the owner 2026-11-03: "okno kde sa píše prompt musí byť väčšie a zvýraznené, aby vyniklo": its own visible heading, a taller field, bigger text, an accent frame and glow) */ #t2mForm > label[for="t2mPrompt"] { margin: 2px 0 5px; font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .01em; } #t2mForm > #t2mPrompt { min-height: 104px; margin-top: 0; padding: 11px 12px; font-size: 15px; line-height: 1.45; background: #10161f; border: 2px solid rgba(255, 138, 61, .6); border-radius: 12px; box-shadow: 0 0 0 4px rgba(255, 138, 61, .1), 0 6px 18px rgba(0, 0, 0, .35); transition: border-color .15s, box-shadow .15s; } #t2mForm > #t2mPrompt::placeholder { color: #7d8a99; } #t2mForm > #t2mPrompt:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 138, 61, .28), 0 6px 22px rgba(255, 138, 61, .16); } #t2mForm > .row2 { gap: 6px; margin: 6px 0 8px; } #t2mForm > .row2 label { font-size: 10.5px; margin-bottom: 1px; color: var(--muted); } #t2mForm > .row2 select { height: 30px; padding: 2px 8px; font-size: 12.5px; } #t2mForm > #t2mGo { padding: 9px; } #t2mForm > #t2mInfo, #t2mForm > #t2mModel { font-size: 11px; line-height: 1.35; margin-top: 4px; } #t2mForm > .t2m-box, #t2mForm > details.tg-box { margin-top: 8px; padding: 6px 9px; } #t2mForm > details.tg-box > summary, #t2mForm > .t2m-box > summary { font-size: 12.5px; } .t2m-how { margin-top: 6px; padding: 5px 8px; font-size: 11px; } .t2m-how ol { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 0; list-style: none; counter-reset: how; } .t2m-how li { counter-increment: how; } .t2m-how li::before { content: counter(how); display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 4px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 800; vertical-align: 1px; } .t2m-how li + li { margin-top: 0; } /* (the ideas' categories one row that scrolls sideways - three rows of chips before) */ #t2mIdeasBox .t2m-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; margin-top: 4px; } #t2mIdeasBox .t2m-cats button { flex: none; padding: 3px 9px; font-size: 11px; } #t2mIdeasBox .t2m-cats-h, #t2mIdeasBox .t2m-chips-h { display: none; } #t2mIdeasBox .t2m-chips { margin-top: 6px; gap: 3px; } /* (the quick ideas smaller, folded by default - the owner 2026-11-02 "daj menšie celé, možnosť rozkliknúť a schovať") */ #t2mIdeasBox .t2m-chips { max-height: 92px; overflow-y: auto; scrollbar-width: thin; } #t2mIdeasBox .t2m-chips button { padding: 2px 7px; font-size: 10.5px; line-height: 1.3; } #t2mIdeasBox .t2m-cats button { padding: 2px 8px; font-size: 10.5px; } /* (no empty space, the categories all visible in an even grid - the owner 2026-11-02 "zbytočne veľa nevyužitého miesta, kategórie musia byť viditeľné, pekne usporiadané rovnomerne"): the 1-2-3 in three equal columns, the categories 4 in a row of equal tiles, the examples two equal columns */ .t2m-how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .t2m-how li { display: grid; justify-items: center; text-align: center; gap: 3px; font-size: 10.5px; line-height: 1.25; } .t2m-how li::before { margin: 0; } #t2mIdeasBox .t2m-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; overflow: visible; } #t2mIdeasBox .t2m-cats button { padding: 4px 2px; font-size: 10.5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #t2mIdeasBox .t2m-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; } #t2mIdeasBox .t2m-chips button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } #t2mIdeasBox .t2m-cats button { white-space: normal; line-height: 1.1; min-height: 24px; } /* (the 1-2-3 easier to read - the owner 2026-11-02 "oranžová ťažko čitateľná, malé"): bigger badges with white digits, a brighter text; the compass icon inline */ .t2m-how { padding: 7px 8px; } .t2m-how li { font-size: 11.5px; color: #d7e0ea; font-weight: 550; } .t2m-how li::before { width: 20px; height: 20px; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff8a3d, #ff4d8d); box-shadow: 0 0 0 2px rgba(255, 138, 61, .25), 0 2px 6px rgba(0, 0, 0, .4); } .t2m-how .t2m-how-ic { width: 14px; height: 14px; vertical-align: -2px; color: #ffb27a; } .t2m-how .t2m-opt { display: inline-block; padding: 0 5px; margin-right: 2px; border-radius: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #1a0e04; background: #ffd166; vertical-align: 1px; } /* (the action row's labels whole at the left panel's default width: "Character" was cut - the owner 2026-11-02 "aby bolo všetko viditeľné aj texty") */ @container (max-width: 330px) { :root:not(.kq-unity-panel) #addActs b { font-size: 9.5px !important; letter-spacing: -.25px; } :root:not(.kq-unity-panel) #addActs > :is(.drop, .sample-btn) { padding-left: 0 !important; padding-right: 0 !important; } } /* ---- UI audit 2026-11-03 (tests/web/ui_audit.py - the owner: "nech sa nič neprekrýva a všetko je pekne poriadne usporiadané"): what overlapped or was cut at 1920 / 1440 / 1280 / 1100 / 800 px and on a phone ---- */ /* (the inspector's two-column sliders (Pohyb: Sila, Výbušnosť): .ipane .sl's fixed 118 px label column made each half wider than half the card - the right column's values ran past the card's edge, "100 %" cut to "100 9") */ .sliders { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ipane .sliders .sl { grid-template-columns: minmax(0, 1fr) auto; } /* (a narrow library tile (3 columns in the left panel): the icon buttons + "Nový" did not fit - "Nový" was cut to "No"; it gets its own row under the icons there) */ #lib.lib-grid .tile { container-type: inline-size; } @container (max-width: 124px) { #lib.lib-grid .tile .lib-acts { flex-wrap: wrap; row-gap: 4px; } #lib.lib-grid .tile .lib-acts .lib-newp { flex: 1 0 100%; height: 24px; order: 9; } } /* (⌨ / ? opens Settings at the shortcuts: its heading stopped under the panel's sticky tabs) */ #setKeysBox { scroll-margin-top: 120px; } /* (981-1100 px: the inspector is folded to its ⚙ tab there, but the one-gap grid (min-width 981) still kept its 360 px column - an empty strip at the right and a squeezed preview where Zbrane / Ovládanie and the view's bar overlapped) */ @media (min-width: 981px) and (max-width: 1100px) { html:not(.kq-unity-panel) #app { grid-template-columns: var(--side-w) var(--gap) minmax(300px, 1fr) var(--gap) 0; } /* (the inspector / video window lies over the view's right part there: the preview banner left of it) */ body.insp-show:not(.ph) #previewBanner { right: 384px; } } /* (the video window's "Ukážka vygenerovanej animácie…" banner: at 92 % of the view it reached under the 🎨 button at the left and its text was cut with "…" below ~1900 px - now clear of the corner buttons and on two lines when needed) */ body:not(.ph) #previewBanner { left: 60px; right: 60px; width: fit-content; max-width: none; margin: 0 auto; transform: none; white-space: normal; border-radius: 16px; line-height: 1.3; } body:not(.ph) #previewBanner > span { text-overflow: clip; } body:not(.ph) #previewBanner button { white-space: nowrap; flex: none; } /* (a phone: the banner lay across the Ovládanie chip ("Späť na časovú os" under it) and over the 🎨 button - it goes under the chip, right of the 🎨 column) */ body.ph #previewBanner { top: 48px !important; left: 52px; right: 8px; transform: none; max-width: none; } /* (the video window's result buttons: four in one row of the narrow panel broke "Pridať k ostatným blokom" into 4 lines - two by two, an odd last one across) */ .btnrow:has(> #vmNewProj) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .btnrow:has(> #vmNewProj) > button { width: auto; margin: 0; min-height: 34px; line-height: 1.2; } .kq-public .btnrow:has(> #vmNewProj) > #vmAgain { grid-column: 1 / -1; } /* the video's next step lit like Z textu's (the owner 2026-11-05: "tu vysviet aj tieto buttony") */ #vmNewProj, #vmInsert { background: var(--neon, #ff6a3d); border-color: transparent; color: #1a0e04; font-weight: 650; animation: t2mNext 3.2s ease-in-out infinite; } #vmNewProj:disabled, #vmInsert:disabled { animation: none; opacity: .5; } @media (prefers-reduced-motion: reduce) { #vmNewProj, #vmInsert { animation: none; box-shadow: 0 0 10px #ff6a3d66; } } /* (🎮 Loco set game in a narrow 3D view (< 640 px): its centred top bar lay over the view's Ovládanie chip - "✕ Ukončiť" under it; the bar goes under the corner buttons, between the 🎨 column and the right edge, the keys box below it) */ #lcHud.narrow .lc-top { top: 50px; left: 52px; right: 8px; transform: none; gap: 8px; white-space: normal; flex-wrap: wrap; row-gap: 3px; } #lcHud.narrow #lcHudState { min-width: 0; flex: 1 1 auto; } #lcHud.narrow #lcHudExit { margin-left: auto; white-space: nowrap; } #lcHud.narrow .lc-keys { top: 100px; } /* ---- 🛠 na opravu: the admin's fix card over the 3D view (34h-fix-report.js, a middle click) ---- */ .fix-card { position: absolute; right: 12px; bottom: 56px; z-index: 40; width: 300px; padding: 10px 11px; border-radius: 12px; background: #141a23f2; border: 1px solid #ff8a3d80; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 12px; } .fix-card .fix-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; } .fix-card .fix-x { padding: 1px 7px; background: none; border: 0; color: var(--muted); } .fix-card .fix-prog { height: 4px; border-radius: 2px; background: var(--panel3); overflow: hidden; } .fix-card .fix-prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; } .fix-card .fix-st { margin: 5px 0 7px; font-size: 11px; line-height: 1.35; } .fix-card .fix-st a { color: var(--accent); } .fix-card .fix-note { min-height: 48px; font-size: 12.5px; } .fix-card .fix-tags { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0; } .fix-card .fix-tags button { padding: 2px 7px; font-size: 10.5px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); } .fix-card .fix-tags button.on { background: #ff8a3d30; border-color: var(--accent); color: #fff; } .fix-card .fix-row { display: flex; gap: 6px; } .fix-card .fix-row select { flex: 1 1 120px; width: auto; min-width: 120px; height: 30px; padding: 2px 6px; font-size: 12px; } .fix-card .fix-row button { flex: 0 1 auto; width: auto; padding: 6px 14px; white-space: normal; line-height: 1.2; } /* ---- ✋ posing: nothing over its panel (top right) and its hint (top left) - the view's Controls box / chip and the 🎨 look button lay under them (the owner 2026-11-03); posing has its own hint, they come back when it ends ---- */ body.posing .view-help, body.posing .view-help-btn, body.posing #lookBtn { display: none !important; } /* ---- windows sized by hand (32-layout.js bindSizable, the owner 2026-11-03): the browser's corner grip, the size kept ---- */ .kq-sizable { overflow: auto; } .kq-sz-b { resize: both; min-width: 220px; min-height: 120px; } .kq-sz-v { resize: vertical; min-height: 60px; } .kq-sizable::-webkit-resizer { background: linear-gradient(135deg, transparent 45%, var(--accent) 46%, var(--accent) 54%, transparent 55%, transparent 65%, var(--accent) 66%, var(--accent) 74%, transparent 75%); } #refVideoBox.kq-sizable { max-width: none; min-width: 120px; min-height: 80px; } /* ✦ Rýchle nápady (Z textu): open from the start, a bigger list with whole sentences (the owner 2026-11-03: "pri scrollovaní je to malé a neprehľadné") - its height by the corner grip */ #t2mIdeasBox .t2m-chips { max-height: none; height: 240px; gap: 4px; } #t2mIdeasBox .t2m-chips button { white-space: normal; overflow: visible; text-overflow: clip; font-size: 12px; line-height: 1.3; padding: 5px 9px; border-radius: 9px; text-align: left; } #t2mIdeasBox .t2m-cats button { font-size: 11.5px; min-height: 28px; } /* ---- 🌐 community library (16e-community.js, the owner 2026-11-04): the Animations tab's button, the export window's share button, the share window over the export, the public library as an overlay inside the Studio ---- */ #commBtn { --aci: linear-gradient(135deg, #06b6d4, #3b82f6); } #expModal .comm-send { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 10px 14px; text-align: left; cursor: pointer; background: linear-gradient(135deg, #10283a, #121b2a); color: #f2f5f9; border: 1px solid #2f5d7c; border-radius: 10px; transition: border-color .15s, transform .15s; } #expModal .comm-send[hidden] { display: none; } #expModal .comm-send:hover { border-color: #38bdf8; transform: translateY(-1px); } #expModal .comm-send .comm-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #06b6d4, #3b82f6); font-size: 16px; } #expModal .comm-send .comm-ico svg { width: 18px; height: 18px; stroke: #fff; } #expModal .comm-send .unity-t { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; } #expModal .comm-send .unity-t b { font-size: 14px; } #expModal .comm-send .unity-t small { font-size: 11.5px; color: #9fb1c4; } .comm-share { z-index: 1200; } .comm-box { position: relative; max-width: 640px; max-height: calc(100vh - 32px); overflow: auto; } .comm-sub { font-size: 13px; color: var(--muted); margin: 0 0 12px; } .comm-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; } .comm-pic { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #0d1218; border: 1px solid var(--line); } .comm-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .comm-re { position: absolute; left: 8px; bottom: 8px; padding: 4px 9px; font-size: 12px; border-radius: 8px; background: #000a; border: 1px solid #ffffff30; color: #fff; cursor: pointer; } .comm-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .comm-form label > span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; } .comm-form input[type=text], .comm-form select { width: 100%; box-sizing: border-box; } .comm-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; } .comm-lic { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .comm-lic label { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; } .comm-lic label:has(input:checked) { border-color: var(--accent); background: rgba(255, 138, 61, .08); } .comm-lic small { grid-column: 2; font-size: 11px; color: var(--muted); } .comm-ok { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; color: var(--text); cursor: pointer; } .comm-ok input { margin-top: 2px; flex: none; } .comm-msg { font-size: 12.5px; color: var(--muted); min-height: 1em; } .comm-msg.bad { color: #ff7a7a; } .comm-done { padding: 12px; border-radius: 10px; background: rgba(63, 209, 122, .1); border: 1px solid #3fd17a; font-size: 14px; } .comm-mine { margin-top: 14px; font-size: 13px; } .comm-mine summary { cursor: pointer; color: var(--muted); } .comm-mine-l { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 180px; overflow: auto; } .comm-mine-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .04); } .comm-mine-r a { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comm-mine-r small { grid-column: 1; color: var(--muted); font-size: 11.5px; } .comm-mine-r button { grid-column: 2; grid-row: 1 / span 2; font-size: 12px; } .comm-foot { margin-top: 10px; font-size: 12px; } .comm-foot a { color: var(--muted); } @media (max-width: 560px) { .comm-grid { grid-template-columns: 1fr; } .comm-pic { max-width: 180px; } .comm-two, .comm-lic { grid-template-columns: 1fr; } } .comm-lib { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; background: #0b0e1a; animation: commIn .16s ease-out; } .comm-lib[hidden] { display: none; } @keyframes commIn { from { transform: translateY(10px); } } /* (no fade: the Studio showed through while it opened) */ .comm-lib-bar { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px 0 16px; border-bottom: 1px solid #ffffff14; background: #0e1222; flex: none; } .comm-lib-bar b { font-size: 15px; } .comm-lib-bar small { color: var(--muted); font-size: 12px; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .comm-lib-bar a { color: var(--muted); font-size: 12.5px; white-space: nowrap; } .comm-lib-bar > button { flex: none; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; } /* (only the ✕ - the switch inside has its own buttons) */ .comm-lib iframe { flex: 1; width: 100%; border: 0; background: #0b0e1a; } @media (prefers-reduced-motion: reduce) { .comm-lib { animation: none; } } .news-comm svg { width: 100%; height: 100%; } /* the Library tab's banner to the community library (16e-community.js) */ .comm-banner { display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 6px; padding: 8px 12px; text-align: left; cursor: pointer; border-radius: 10px; border: 1px solid #2f5d7c; background: linear-gradient(135deg, rgba(6, 182, 212, .14), rgba(59, 130, 246, .12)); color: var(--text); } .comm-banner[hidden] { display: none; } .comm-banner:hover { border-color: #38bdf8; } .comm-banner-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #06b6d4, #3b82f6); font-size: 16px; } .comm-banner-ic svg { width: 18px; height: 18px; stroke: #fff; } .comm-banner > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; } .comm-banner b { font-size: 13px; } .comm-banner small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comm-banner-go { color: #38bdf8; font-size: 16px; } /* ---- Z textu compact (the owner 2026-11-04: "the extra long window -> beautiful, clear, compact controls, minimum scrolling, still easy to understand"): mode tabs one low row, the 3 steps one thin line, a smaller prompt, length + quality + Create in one row, results in one row, ideas as a scrolling category row + dense chips, the extras (builder, tips, how it works) as small pills that open on a click. Placed last: it wins over the earlier layers. ---- */ #t2mForm .t2m-mtabs { gap: 3px; padding: 3px; } #t2mForm .t2m-mtabs button { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 4px; min-height: 0; } #t2mForm .t2m-mtabs button > span { font-size: 14px; line-height: 1; } #t2mForm .t2m-mtabs button > span svg, #t2mForm .t2m-mtabs button svg.kqi { width: 15px; height: 15px; } #t2mForm .t2m-mtabs button b { font-size: 12px; white-space: nowrap; } #t2mForm .t2m-mtabs button small { display: none; } #t2mForm .t2m-how { margin-top: 5px; padding: 3px 6px; border: 0; background: transparent; } #t2mForm .t2m-how ol { display: flex; flex-wrap: wrap; gap: 2px 8px; justify-content: center; } #t2mForm .t2m-how li { display: inline-flex; align-items: center; gap: 4px; text-align: left; font-size: 10.5px; font-weight: 550; color: var(--muted); } #t2mForm .t2m-how li::before { width: 15px; height: 15px; font-size: 9.5px; box-shadow: none; flex: none; } #t2mForm .t2m-how .t2m-opt { font-size: 8.5px; padding: 0 4px; } #t2mForm > label[for="t2mPrompt"] { margin: 6px 0 3px; font-size: 12px; } /* (one height, focused or not: it grew 58 -> 76 px on focus, so a click on Create right after a quick idea blurred it, the button jumped 18 px up under the mouse and the first click was lost - the owner 2026-11-10 "two clicks on Create") */ #t2mForm > #t2mPrompt { min-height: 68px; padding: 8px 10px; font-size: 14px; line-height: 1.4; } #t2mForm > .t2m-set { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.15fr) minmax(0, 1.15fr); gap: 5px; align-items: end; margin: 6px 0 4px; } #t2mForm > .t2m-set label { display: block; font-size: 10px; margin: 0 0 1px; color: var(--muted); } #t2mForm > .t2m-set select { width: 100%; height: 32px; padding: 2px 6px; font-size: 12px; } #t2mForm > .t2m-set #t2mGo { height: 32px; margin: 0; padding: 0 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #t2mForm > #t2mGo { padding: 8px; } #t2mForm > details.tg-box, #t2mForm > .t2m-box { margin-top: 6px; padding: 5px 8px; } #t2mForm > details.tg-box:not([open]) { padding: 4px 8px; } #t2mForm .tg-box .btnrow { margin: 4px 0; gap: 4px; } #t2mForm .tg-box .btnrow button { padding: 4px 8px; font-size: 11.5px; } #t2mForm .tg-box label { font-size: 11px; } #t2mForm .tg-box select { height: 28px; font-size: 12px; } #t2mForm > #t2mInfo, #t2mForm > #t2mModel { margin-top: 3px; } #t2mForm .t2m-match { margin-top: 4px; font-size: 11.5px; } #t2mForm #t2mResult { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; } #t2mForm #t2mResult[hidden] { display: none; } #t2mForm #t2mResult .t2m-nexthint { grid-column: 1 / -1; font-size: 11px; } #t2mForm #t2mResult button { margin: 0; padding: 7px 6px; font-size: 12px; line-height: 1.2; } #t2mForm #t2mIdeasBox .t2m-cats { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 3px; padding: 3px; } #t2mForm #t2mIdeasBox .t2m-cats::-webkit-scrollbar { display: none; } #t2mForm #t2mIdeasBox .t2m-cats button { flex: none; min-height: 0; padding: 3px 9px; font-size: 11px; white-space: nowrap; } #t2mForm #t2mIdeasBox .t2m-chips { display: flex; flex-wrap: wrap; height: auto; max-height: 132px; overflow-y: auto; gap: 3px; margin-top: 5px; } #t2mForm #t2mIdeasBox .t2m-chips button { padding: 3px 8px; font-size: 11px; line-height: 1.25; border-radius: 10px; white-space: nowrap; } /* the extras: closed = small pills side by side, open = full width */ #t2mForm > details.t2m-box:not(#t2mIdeasBox):not(.tg-box):not(#pkBox):not(#lcBox), #t2mForm > details.info { display: inline-block; vertical-align: top; margin: 6px 4px 0 0; padding: 3px 9px; border-radius: 999px; } #t2mForm > details.t2m-box:not(#t2mIdeasBox):not(.tg-box):not(#pkBox):not(#lcBox) > summary, #t2mForm > details.info > summary { font-size: 11px; font-weight: 600; } #t2mForm > details.t2m-box[open]:not(#t2mIdeasBox):not(.tg-box):not(#pkBox):not(#lcBox), #t2mForm > details.info[open] { display: block; margin-right: 0; padding: 6px 9px; border-radius: 10px; } #t2mForm > .t2m-credits { margin-top: 6px; font-size: 9.5px; opacity: .7; } /* ---- the Studio / Library switch (16e-community.js, the owner 2026-11-04: "separate the UI of the library and the studio, make it stand out"): on top of the Studio's left panel and in the library overlay's bar ---- */ .space-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 6px 0 8px; padding: 4px; border-radius: 12px; background: #0d1219; border: 1px solid #2a3446; } .space-sw[hidden] { display: none; } .space-sw button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border: 0; border-radius: 9px; background: transparent; color: #9fb1c4; font-size: 14.5px; font-weight: 750; cursor: pointer; transition: background .15s, color .15s; } .space-sw button:hover { color: #fff; background: #1b2330; } .space-sw button span { font-size: 16px; } .space-sw button[data-space="studio"].on { background: linear-gradient(135deg, #ff8a3d, #ff4d8d); color: #fff; box-shadow: 0 4px 14px rgba(255, 106, 61, .35); } .space-sw button[data-space="lib"].on { background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff; box-shadow: 0 4px 14px rgba(59, 130, 246, .35); } .space-sw button[data-space="lib"]:not(.on) { color: #7dd3fc; } .comm-lib-bar .space-sw { margin: 0; width: 340px; flex: none; padding: 3px; } .comm-lib-bar .space-sw button { white-space: nowrap; } .comm-lib-bar .space-sw button { height: 32px; font-size: 13.5px; } /* the library overlay's bar, fixed 2026-11-04 (the owner's screenshot: the switch cut to "Public", overlapped): the switch as wide as its words, the hint only where there is room */ .comm-lib-bar { gap: 10px; } .comm-lib-bar .space-sw { width: auto; flex: none; grid-template-columns: auto auto; } .comm-lib-bar .space-sw button { padding: 0 14px; white-space: nowrap; } @media (max-width: 760px) { .comm-lib-bar small { display: none; } .comm-lib-bar a { margin-left: auto; } } #insp .ipane-blk > .optrow:first-child { margin: 2px 0 8px; } /* Z textu's 1-2-3 as one quiet line with arrows - no tiles, no number circles (the owner 2026-11-04: "zaberá to veľa miesta, ani tie kruhy sa mi nepáčia, jednoducho") */ #t2mForm .t2m-how { margin-top: 6px; padding: 0; border: 0; background: transparent; } #t2mForm .t2m-how ol { display: block; margin: 0; padding: 0; list-style: none; text-align: center; } #t2mForm .t2m-how li { display: inline; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--muted); } #t2mForm .t2m-how li::before { content: none; } #t2mForm .t2m-how li + li::before { content: '→'; display: inline; margin: 0 6px; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; color: var(--dim, #6b7686); font-weight: 400; } #t2mForm .t2m-how li > span { display: inline; } #t2mForm .t2m-how .t2m-how-ic { width: 13px; height: 13px; vertical-align: -2px; } /* Z textu's idea tabs and chips a size larger, easier to read (the owner 2026-11-04 "texty trochu väčšie, čitateľnejšie") */ #t2mForm #t2mIdeasBox .t2m-cats { gap: 4px; padding: 4px; } /* all categories visible, wrapped into rows - no hidden sideways scroll (the owner 2026-11-05: "kategórie zobraz celé") */ #t2mForm #t2mIdeasBox .t2m-cats { flex-wrap: wrap; overflow: visible; } #t2mForm #t2mIdeasBox .t2m-cats button { padding: 5px 12px; font-size: 12.5px; } #t2mForm #t2mIdeasBox .t2m-chips { gap: 5px; margin-top: 7px; max-height: 176px; } #t2mForm #t2mIdeasBox .t2m-chips button { padding: 5px 11px; font-size: 13px; line-height: 1.3; border-radius: 12px; color: #dfe7f0; } /* the inspector's three parts pinned to their rows (the owner 2026-11-04: the Block / Body / Physics tabs stretched tall over the whole panel - an extra element inside #insp took the head's / tabs' row and the 1fr went to the tabs); the tabs never grow taller than their buttons (desktop; the phone sheet has its own rows) */ @media (min-width: 761px) { #insp > .insp-head { grid-row: 1; } #insp > #inspTabs { grid-row: 2; } #insp > #inspBody { grid-row: 3; } } #inspTabs { align-self: start; align-content: start; grid-auto-rows: min-content; } /* ▦ Snímky (staff only): one strip per block, a tick per frame */ #fcBox { display: inline-flex; align-items: center; gap: 4px; flex: none; white-space: nowrap; } /* (the same size as the transport's own buttons and selects next to it: 22 px, 11 px text) */ #fcBox > button { flex: none; height: 22px; font-size: 11px; border-radius: 5px; margin: 0; box-sizing: border-box; } #fcBox > button { padding: 0 6px; min-width: 26px; display: inline-flex; align-items: center; justify-content: center; } #fcBox > #fcUse { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 22px; margin: 0 2px; font-size: 11px; color: #c6d0dc; cursor: pointer; } #fcUse input { width: 12px; height: 12px; margin: 0; accent-color: #2ec4a6; cursor: pointer; } #fcUse.off { color: #ffb454; } #fcUse:has(input:disabled) { opacity: .45; cursor: default; } #fcBox > button .kqi { width: 13px; height: 13px; } #fcBox[hidden], #fcBox [hidden], #ppRepWrap[hidden] { display: none; } #transport .tl-fc { position: absolute; z-index: 2; height: 12px; cursor: crosshair; touch-action: none; border-radius: 2px; background-color: #ffffff12; background-image: linear-gradient(90deg, #ffffff66 1px, transparent 1px); background-size: calc(100% / var(--fc-n, 30)) 100%; } #transport .tl-fc-cut { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, #ff5a5acc 0 3px, #ff5a5a33 3px 6px); } #transport .tl-fc-cut.part { background: repeating-linear-gradient(135deg, #ffd166cc 0 3px, #ffd16633 3px 6px); } #transport .tl-fc-cut.off { opacity: .35; filter: grayscale(.7); } /* (2026-11-09 Telo ▾: one thin row of frames per limb in a band under the clips; ◆ = a pose key touching that limb) */ #transport .tl-fc.row { height: 9px; background-color: #ffffff0d; background-image: linear-gradient(90deg, #ffffff30 1px, transparent 1px); } #transport .tl-fc.row::before { display: none; } /* (the strip with an open ✂ bar comes over the clips: the bar of a limb's row lay under the clip above it - the owner 2026-11-09) */ #transport .tl-fc:has(> .tl-fc-pop:not([hidden])) { z-index: 31; } #transport .tl-fc-lab { position: absolute; z-index: 1; left: 3px; top: 0; max-width: calc(100% - 4px); overflow: hidden; font-size: 8px; line-height: 9px; color: #d9e2ec; text-shadow: 0 0 2px #000, 0 0 2px #000; white-space: nowrap; pointer-events: none; } #transport .tl-fc-key { position: absolute; z-index: 1; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; transform: rotate(45deg); background: #ffd166; pointer-events: none; } /* (the deleted frames quietly on the clip too: a thin line at each end, a faint tint between) */ #transport .timeline-block .tl-fc-mark { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border-inline: 1px solid #ff5a5ab3; background: #ff5a5a1c; pointer-events: none; } #transport .timeline-block .tl-fc-mark.part { border-color: #4cc9f0b3; background: #4cc9f01c; } #transport .timeline-block .tl-fc-mark.off { border-color: #ffffff40; background: none; } #transport .tl-fc-sel { position: absolute; top: -1px; bottom: -1px; background: #4c9aff66; outline: 1px solid #4c9aff; pointer-events: none; } /* 23j view deck: the boxes over the 3D view are laid out with their transitions off (measured where they really stand) */ #view.kq-deck-measure > *, #view.kq-deck-measure #lcHud > * { transition: none !important; } /* (2026-11-08 the owner: "deleted frames + a key = unclear, I do not see the key's blend": the frames get the rail's top band only (7 px, a taller grab area), the key's blend wave the band under it - two rows, nothing drawn over the other; the deleted part is a calm red, the wave stronger while ▦ is on; the picked frames get a bar with ✂ Zmazať at once) */ #transport .tl-fc { position: absolute; z-index: 2; height: 7px; cursor: crosshair; touch-action: none; border-radius: 2px; background-color: #ffffff10; background-image: linear-gradient(90deg, #ffffff55 1px, transparent 1px); background-size: calc(100% / var(--fc-n, 30)) 100%; } #transport .tl-fc::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; bottom: -2px; } /* (grab area) */ #transport .tl-fc-cut { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: repeating-linear-gradient(135deg, #ff5a5a 0 2px, #ff5a5a40 2px 5px); box-shadow: inset 0 0 0 1px #ff5a5a; } #transport .tl-fc-cut.part { background: repeating-linear-gradient(135deg, #4cc9f0 0 2px, #4cc9f040 2px 5px); box-shadow: inset 0 0 0 1px #4cc9f0; } #transport .tl-fc-sel { position: absolute; top: -2px; bottom: -2px; background: #4c9aff55; outline: 1.5px solid #4c9aff; border-radius: 2px; pointer-events: none; } /* (while ▦ is on: a fuller wave - eased, not a spike - over a 2 px line along the whole blend window, so where the key's blend starts and ends reads at a glance) */ #transport .fc-on .tl-pkey-bar { opacity: 1; z-index: 4; height: 9px; margin-top: -4px; background: linear-gradient(#ffd166, #ffd166) left bottom / 100% 2px no-repeat, linear-gradient(90deg, #ffd16655 0%, #ffd166 var(--mid, 50%), #ffd16655 100%); clip-path: polygon(0 100%, 0 78%, calc(var(--mid, 50%) * 0.25) 66%, calc(var(--mid, 50%) * 0.5) 40%, calc(var(--mid, 50%) * 0.75) 12%, var(--mid, 50%) 0, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.25) 12%, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.5) 40%, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.75) 66%, 100% 78%, 100% 100%); } #transport .fc-on .tl-pkey-bar.hold-in { clip-path: polygon(0 0, var(--mid, 50%) 0, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.25) 12%, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.5) 40%, calc(var(--mid, 50%) + (100% - var(--mid, 50%)) * 0.75) 66%, 100% 78%, 100% 100%, 0 100%); } #transport .fc-on .tl-pkey-bar.hold-out { clip-path: polygon(0 100%, 0 78%, calc(var(--mid, 50%) * 0.25) 66%, calc(var(--mid, 50%) * 0.5) 40%, calc(var(--mid, 50%) * 0.75) 12%, var(--mid, 50%) 0, 100% 0, 100% 100%); } #transport .fc-on .tl-pkey-bar.hold-in.hold-out { clip-path: none; } #transport .fc-on .tl-pblend { display: block; } #transport .fc-on .tl-pkey-bar.on { filter: drop-shadow(0 0 3px #ffd166); } #transport .tl-fc-pop { position: absolute; bottom: calc(100% + 5px); z-index: 30; display: flex; gap: 3px; align-items: center; padding: 3px; border-radius: 7px; background: #121a24f2; border: 1px solid #4c9aff; box-shadow: 0 4px 14px #000a; white-space: nowrap; cursor: default; } #transport .tl-fc-pop[hidden] { display: none; } #transport .tl-fc-pop button { min-width: 0; height: 22px; padding: 0 8px; font-size: 11px; line-height: 1; border-radius: 5px; margin: 0; } #transport .tl-fc-pop .fc-del { background: #ff5a5a; border-color: #ff5a5a; color: #1a0606; font-weight: 650; } #transport .tl-fc-pop .fc-del:hover { background: #ff7676; } #transport .tl-fc-pop .fc-del b { font-weight: 650; } #transport .tl-fc-pop .fc-x { padding: 0 6px; background: transparent; border-color: transparent; color: var(--muted); } #transport .tl-fc-pop [hidden] { display: none; } /* 21c the transport bar (the owner 2026-11-08, from his reference and the variant he picked): one continuous dark panel, the sections by what they do, split by thin lines (no frames, no captions; the names stay in aria-label). First row: playback (first, on its own lit plate), history, at the playhead, time. Second row: fixes, physics, frames, display, timeline. Every control one height (--tp-h) on one centre line, each section takes an even share of the spare room, nothing cut off; whole sections wrap. */ html:not(.kq-unity-panel) #transport.tp-grouped { --tp-h: 24px; gap: 0; padding: 4px 6px; background: #090c10; justify-content: flex-start; align-items: center; align-content: flex-start; } html:not(.kq-unity-panel) #transport.tp-grouped::before { display: none; } #transport .tp-g { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex: 1 1 auto; box-sizing: border-box; height: calc(var(--tp-h) + 6px); padding: 0 4px; border-left: 1px solid #2d3846; } #transport .tp-g.tp-ls { border-left: 0; } #transport .tp-g:not(:has(> :not([hidden]))) { display: none; } #transport .tp-br { flex: 0 0 100%; height: 1px; margin: 3px 0; background: #2a3543; } #transport.tp-grouped > #scrubScroll { margin-top: 3px; } /* (one size, one line) */ #transport.tp-grouped .tp-g > *, #transport.tp-grouped .tp-g #fcBox > *, #transport.tp-grouped .tp-g #viewMenuWrap > button { box-sizing: border-box; height: var(--tp-h); min-height: var(--tp-h); margin: 0; flex: none; } #transport.tp-grouped .tp-g > button, #transport.tp-grouped .tp-g #fcBox > button, #transport.tp-grouped .tp-g #viewBtn, #transport.tp-grouped #tlModeSw button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 26px; padding: 0 5px; font-size: 11.5px; line-height: 1; white-space: nowrap; border-radius: 5px; } #transport.tp-grouped .tp-g > select { width: auto; padding: 0 2px 0 5px; font-size: 11.5px; line-height: 24px; border-radius: 5px; background: #0f151d; border-color: #2d3846; } #transport.tp-grouped .tp-g input[type=number] { box-sizing: border-box; height: var(--tp-h); margin: 0; padding: 0 4px; font-size: 11.5px; font-variant-numeric: tabular-nums; } #transport.tp-grouped .tp-g > label, #transport.tp-grouped .tp-g > #time, #transport.tp-grouped .tp-g > #viewMenuWrap, #transport.tp-grouped .tp-g > #fcBox { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; white-space: nowrap; } #transport.tp-grouped .tp-g button svg, #transport.tp-grouped .tp-g > label svg { width: 14px; height: 14px; margin: 0; flex: none; } /* (a field's text sits 1 px under the centre line of the icons and labels beside it) */ #transport.tp-grouped .tp-g > select, #transport.tp-grouped .tp-g input[type=number] { padding-bottom: 2px; } /* (measured on the drawn pixels: the words beside a field 1 px low, the magnet's shape .7 px high) */ #transport.tp-grouped .tp-frame > span, #transport.tp-grouped .end-wrap > span { transform: translateY(-1px); } #transport.tp-grouped .tp-view > label.chk svg { transform: translateY(.7px); } #transport.tp-grouped .tp-g > #tlModeSw { display: inline-flex; align-items: stretch; padding: 0; overflow: hidden; } #transport.tp-grouped #tlModeSw button { height: 100%; min-height: 0; border-radius: 0; } /* (tight enough that both rows fit the owner's ~1100 px bar; what is left over goes evenly between the sections) */ #transport.tp-grouped .tp-g > button:not(#play, .magic-btn, .review-btn), #transport.tp-grouped .tp-g #fcBox > button, #transport.tp-grouped .tp-g #viewBtn, #transport.tp-grouped #tlModeSw button { padding: 0 3px; } /* (flat tools; the two main fixes and play keep their colours, a switched-on tool its own) */ #transport.tp-grouped .tp-g > button:not(#play, .magic-btn, .review-btn, .on, [aria-pressed="true"]), #transport.tp-grouped .tp-g #fcBtn:not(.on, [aria-pressed="true"]), #transport.tp-grouped .tp-g #viewBtn:not(.on) { background: transparent; border-color: transparent; box-shadow: none; color: #c6d0dc; } #transport.tp-grouped .tp-g > button:not(#play, .magic-btn, .review-btn, .on, [aria-pressed="true"], :disabled):hover, #transport.tp-grouped .tp-g #fcBtn:not(.on, [aria-pressed="true"]):hover, #transport.tp-grouped .tp-g #viewBtn:not(.on):hover { background: #2a3543; } #transport #tpGhost.on, #transport #tpSolid.on { color: #fff; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); } #transport.tp-grouped .tp-play > #play { min-width: 48px; font-size: 14px; color: #fff; background: linear-gradient(100deg, #ff9a3d, #ff6a3d 60%, #ff3d6e); border-color: #ff8a3d; box-shadow: 0 0 10px #ff6a3d66; } #transport.tp-grouped .tp-play > #play:hover { filter: brightness(1.1); } /* (playback first and set apart: its own lit plate, the controls inside keep the common height and centre line) */ html:not(.kq-unity-panel) #transport.tp-grouped .tp-g.tp-play { flex: 0 0 auto; height: calc(var(--tp-h) + 8px); padding-inline: 8px; margin-right: 6px; border: 1px solid #ff8a3d; border-radius: 7px; background: linear-gradient(180deg, #4a2c17, #33200f); box-shadow: 0 0 12px #ff8a3d55, inset 0 1px 0 #ffb27a33; } #transport.tp-grouped .tp-play > button:not(#play) { color: #ffe3cf; } #transport.tp-grouped .tp-play > button:not(#play, :disabled):hover { background: #ff8a3d33; } #transport.tp-grouped .tp-play > select { background: #24170c; border-color: #ff8a3d66; } #transport .tp-g.tp-hist { border-left: 0; } #transport .tp-g > #time { color: #9aa8b8; font-variant-numeric: tabular-nums; margin-left: 4px; } #transport .tp-frame { color: var(--muted); } #transport .tp-frame input { width: 50px; } #transport .tp-g #endTime { width: 46px; } #transport.tp-grouped #tpStart, #transport.tp-grouped #tpEnd, #transport.tp-grouped #tpFit, #transport.tp-grouped #tpZoomOut, #transport.tp-grouped #tpZoomIn { font-size: 13px; } #transport.tp-grouped #tpBack10, #transport.tp-grouped #tpFwd10 { min-width: 30px; font-variant-numeric: tabular-nums; } /* (the preview of a generated animation shows only play / speed / the original - the sections whose tools it hides go too) */ body.vm-only-preview #transport :is(.tp-hist, .tp-edit, .tp-fix, .tp-phys, .tp-frames, .tp-view, #tpSolid) { display: none !important; } body.ph :is(#tpStart, #tpEnd, #tpFit, #tpFrameWrap, #tpHist, #tpBack10, #tpFwd10, #tpPose, #tpZoomOut, #tpZoomIn, #tpPrevBlock, #tpNextBlock, #tpMods, #tpGhost, #tpSolid) { display: none !important; } /* (a narrow bar - the side panels open on a laptop: 500-800 px - lower and tighter: history and edits as icons, the frame field without its word) */ html:not(.kq-unity-panel) #transport.tp-grouped.tp-narrow { --tp-h: 22px; padding: 3px 4px; } #transport.tp-narrow .tp-g { padding: 0 3px; } #transport.tp-narrow .tp-g > #tpHist, #transport.tp-narrow .tp-g > #tpMods { font-size: 0; gap: 0; } #transport.tp-grouped.tp-narrow .tp-frame { font-size: 0; gap: 0; } #transport.tp-narrow .tp-frame input { width: 46px; } /* (the owner 2026-11-08 "oddeliť sekcie, ale jemne, úzke, kompaktné": each section a faint tile with a thin line of its colour on top, the bar's height unchanged) */ html:not(.kq-unity-panel) #transport.tp-grouped { gap: 3px; } html:not(.kq-unity-panel) #transport.tp-grouped > #scrubScroll { margin-top: 0; } /* (typed numbers: no spinner arrows - they take the room of the digits; a little air beside the frame field) */ #transport.tp-grouped .tp-g input[type=number] { appearance: textfield; } #transport.tp-grouped .tp-g input[type=number]::-webkit-inner-spin-button, #transport.tp-grouped .tp-g input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } #transport.tp-grouped .tp-g #endTime { width: 52px; } #transport.tp-grouped .tp-g > .tp-frame { margin-inline: 3px; } /* (a row that does not fit: words become icons step by step, tpBalance adds .tp-c1 ... .tp-c4 until the tools are two rows. A button is cut to the width of its icon, which comes first - icons and font glyphs alike; the name stays in the tooltip) */ #transport.tp-grouped.tp-c1 .tp-g > :is(#tpHist, #tpMods, #tpPrevBlock), #transport.tp-grouped.tp-c2 .tp-vis > :is(#tpGhost, #tpSolid), #transport.tp-grouped.tp-c2 #tlModeSw button, #transport.tp-grouped.tp-c3 .tp-g > :is(#keyHere, #tpPose, #physBtn), #transport.tp-grouped.tp-c3 .tp-g #fcBtn, #transport.tp-grouped.tp-c4 .tp-g > :is(#magicBtn, #reviewBtn) { width: 26px; min-width: 26px; padding: 0 5px; overflow: hidden; justify-content: flex-start; gap: 8px; } /* (the arrow of "Block ▶" is at its end) */ #transport.tp-grouped.tp-c1 .tp-g > #tpNextBlock { width: 18px; min-width: 18px; padding: 0 3px; overflow: hidden; justify-content: flex-end; } #transport.tp-grouped.tp-c1 .tp-frame { font-size: 0; gap: 0; } html:not(.kq-unity-panel) #transport.tp-grouped .tp-g:not(.tp-play) { padding-inline: 4px; border: 1px solid #1e2733; border-radius: 5px; background: #10161e; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tp-c, #8fa0b5) 70%, transparent); } html:not(.kq-unity-panel) #transport.tp-grouped.tp-narrow .tp-g:not(.tp-play) { padding-inline: 3px; } html:not(.kq-unity-panel) #transport.tp-grouped .tp-g.tp-play { margin-right: 0; } html:not(.kq-unity-panel) #transport.tp-grouped > .tp-br { height: 0; margin: 0; background: none; } #transport .tp-edit { --tp-c: #f2c14e; } #transport .tp-fix { --tp-c: #b07cff; } #transport .tp-phys { --tp-c: #3fc4ff; } #transport .tp-frames { --tp-c: #2ec4a6; } #transport .tp-view { --tp-c: #4aa3ff; } /* (the owner 2026-11-08 "žiadne nečitateľné zhluky, stále sa musí dať pracovať s klipmi": a narrow clip keeps a width that can be grabbed and comes over the crossfades when pointed at or selected; what does not fit a narrow piece is not drawn at all - it is in the tooltip and the popup) */ .kq-tl-rich #transport.tp-grouped .timeline-block.rich { min-width: 12px; } .kq-tl-rich #transport.tp-grouped .timeline-block.rich:is(:hover, .sel) { z-index: 5; } @container (max-width: 34px) { #transport.tp-grouped .tl-junc:not(.cut) .jl { display: none; } } @container (max-width: 26px) { #transport.tp-grouped .timeline-block.rich .tlr-head { visibility: hidden; } } /* 21c the tiny clip's pop-out bar: ⋯ on a clip too narrow for its tools (the block is its own size container), the bar in its own band under the clips while open */ #transport .tlr-more { display: none; } #transport #tpClip { display: none; } @container (max-width: 150px) { #transport.tp-grouped .timeline-block.rich .tlr-tools { display: none; } #transport.tp-grouped .timeline-block.rich .tlr-head { padding-right: 14px; } #transport.tp-grouped .timeline-block.rich .tlr-more { position: absolute; z-index: 6; top: 50%; right: 1px; width: min(14px, calc(100% - 2px)); height: 22px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; color: #fff; border-radius: 4px; background: #0009; cursor: pointer; } #transport.tp-grouped .timeline-block.rich .tlr-more:hover { background: var(--accent); color: var(--accent-ink); } } @container (max-width: 44px) { #transport.tp-grouped .timeline-block.rich .tlr-swap { display: none; } } html:not(.kq-unity-panel) #transport.tp-grouped > #tpClip { position: absolute; z-index: 40; display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: max-content; max-width: calc(100% - 8px); height: calc(var(--tp-h) + 6px); min-width: 0; padding: 0 4px 0 6px; border: 1px solid #3a4757; border-left: 3px solid var(--bc, #53aeed); border-radius: 7px; background: #161d27; box-shadow: 0 6px 18px #000a; } html:not(.kq-unity-panel) #transport.tp-grouped > #tpClip[hidden] { display: none; } html:not(.kq-unity-panel) #transport.tp-grouped > #tpClip::after { content: ''; position: absolute; left: var(--ax, 50%); top: -6px; width: 10px; height: 10px; margin-left: -5px; background: #161d27; border-top: 1px solid #3a4757; border-left: 1px solid #3a4757; transform: rotate(45deg); } #transport #tpClip .tl-no { flex: none; } #transport #tpClip .tp-clip-name { flex: 0 1 auto; min-width: 48px; font-size: 12.5px; font-weight: 650; color: #eef4fa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #transport #tpClip .tp-clip-at { flex: none; font-size: 11px; color: #9aa8b8; font-variant-numeric: tabular-nums; white-space: nowrap; } #transport #tpClip .tlr-swap { flex: none; height: var(--tp-h); margin: 0; padding: 0 10px; font-size: 11.5px; } .kq-tl-rich #transport #tpClip .tlr-tools, #transport #tpClip .tlr-tools { flex: none; display: inline-flex; gap: 2px; } .kq-tl-rich #transport #tpClip .tlr-t, #transport #tpClip .tlr-t { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: var(--tp-h); border-radius: 5px; font-size: 12px; color: #c6d0dc; background: transparent; opacity: 1; cursor: pointer; } .kq-tl-rich #transport #tpClip .tlr-t:hover, #transport #tpClip .tlr-t:hover { background: #2a3543; color: #fff; } .kq-tl-rich #transport #tpClip .tlr-t.on, #transport #tpClip .tlr-t.on { background: var(--accent); color: var(--accent-ink); } /* (the owner 2026-11-08: the end mark never over the last clip - in the gutter right of the timeline, in the middle of its height; no transform here, dragging moves it with one) */ #transport.tp-grouped #timelineBlocks { margin-right: 22px; } #transport.tp-grouped #scrub { width: calc(100% - 13px); } #transport.tp-grouped #ticks { right: 13px; } #transport.tp-grouped ~ #tlNav, #transport.tp-grouped > #tlNav { margin-right: 18px; } #transport.tp-grouped .tl-end { right: auto; left: calc(100% + 3px); top: calc(50% - 12px); width: 17px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; } #transport.tp-grouped .tl-end svg { width: 12px; height: 12px; margin: 0; flex: none; } /* (the owner 2026-11-08: Frames its own colour, not the blue of Physics) */ #transport.tp-grouped .tp-g #fcBtn:not(.on, [aria-pressed="true"]) { color: #5fe3c8; } #transport.tp-grouped .tp-g #fcBtn:is(.on, [aria-pressed="true"]) { color: #06221d; border-color: #5fe3c8; background: linear-gradient(100deg, #1fb596, #4fe0c0); box-shadow: 0 0 10px #2ec4a655; } /* 34i "Z videa cez Viggle" (the admin only) */ #vgBox { margin: 8px 0; } #vgBox label:not(.chk) { display: block; margin: 6px 0 2px; font-size: 11px; color: var(--muted); } #vgBox input[type=password], #vgBox input[type=file] { width: 100%; box-sizing: border-box; } #vgBox label.chk { margin-top: 6px; } #vgBox #vgGo, #vgBox progress { width: 100%; margin-top: 8px; } #vgBox #vgInfo { margin-top: 6px; } #vgBox #vgInfo.bad { color: #ff8a80; } #vgBox #vgLink { display: block; margin-top: 6px; } #vgBox #vgLink[hidden] { display: none; } #vgBox .vg-range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } #vgBox .vg-range input { width: 100%; box-sizing: border-box; } /* 🔊 Zvuky - the admin's sound trial (app/16f-sounds.js): one button in the view's bar + a small panel; quiet marks on the timeline */ .sfx-grp { display: inline-flex; align-items: stretch; gap: 0; } #viewCtl .sfx-btn { margin: -2px 0; border-radius: 6px 0 0 6px; border-color: var(--line2); color: var(--muted); } #viewCtl .sfx-btn.on { background: transparent; color: var(--text); border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } .sfx-btn .sx-ico { display: inline-block; width: 1.15em; } #viewCtl .sfx-more { margin: -2px 0; padding: 0 6px; border: 1px solid var(--line2); border-left: 0; border-radius: 0 6px 6px 0; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; } #viewCtl .sfx-more:hover, #viewCtl .sfx-more[aria-expanded="true"] { color: var(--text); } #sfxPop { position: absolute; z-index: 30; width: 236px; padding: 9px 10px 8px; border: 1px solid var(--line2); border-radius: 10px; background: #101720f2; box-shadow: 0 8px 24px #0008; font-size: 12px; color: var(--muted); display: grid; gap: 7px; } #sfxPop[hidden] { display: none; } #sfxPop .sx-head { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 12.5px; } #sfxPop #sfxPopX { margin-left: auto; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--muted); font-size: 11px; line-height: 1; } #sfxPop #sfxPopX:hover { background: var(--panel2); color: var(--text); } #sfxPop .sx-vol { display: grid; grid-template-columns: auto 1fr 34px; align-items: center; gap: 8px; margin: 0; } #sfxPop #sfxVolN { font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; } #sfxPop .sx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } #sfxPop .sx-two label { display: grid; gap: 2px; min-width: 0; margin: 0; font-size: 10.5px; } #sfxPop select { width: 100%; min-width: 0; height: 26px; padding: 0 4px; font-size: 12px; } #sfxPop input[type=range] { width: 100%; min-width: 0; } #sfxPop .chk { margin: 0; font-size: 12px; width: fit-content; } #sfxPop .sx-foot { display: grid; grid-template-columns: 70px 1fr; gap: 6px; padding-top: 7px; border-top: 1px solid var(--line); } #sfxPop .sx-foot button { width: 100%; height: 26px; padding: 0 8px; font-size: 12px; white-space: nowrap; } #sfxPop #sfxInfo { font-size: 11px; line-height: 1.3; } #sfxPop #sfxInfo:empty { display: none; } #sfxPop { max-height: calc(100% - 16px); overflow-y: auto; } #sfxPop #sfxAdv summary { cursor: pointer; font-size: 11.5px; color: var(--text); } #sfxPop .sx-adv { display: grid; gap: 3px; margin-top: 4px; } #sfxPop .sx-adv-r { display: grid; grid-template-columns: 58px 1fr 40px; align-items: center; gap: 6px; margin: 0; font-size: 11px; } #sfxPop .sx-adv-r output { font-size: 10.5px; text-align: right; font-variant-numeric: tabular-nums; } #sfxPop #sfxList { max-height: 124px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 3px; scrollbar-width: thin; } #sfxPop .sx-ev { display: grid; grid-template-columns: 13px 38px 34px 1fr 12px 12px; align-items: center; gap: 3px; font-size: 11px; line-height: 20px; } #sfxPop .sx-ev.off { opacity: .45; } #sfxPop .sx-ev em { font-style: normal; font-size: 10px; font-variant-numeric: tabular-nums; } #sfxPop .sx-ev button { width: 18px; height: 18px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 10px; } #sfxPop .sx-ev button:hover { color: var(--text); } #sfxPop .sx-ev .sx-var, #sfxPop .sx-ev .sx-play { width: 12px; font-size: 10px; } #sfxPop #sfxReset { margin-top: 5px; height: 22px; padding: 0 8px; font-size: 11px; } #sfxPop .sx-audio { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 6px; margin: 0; font-size: 11px; } #sfxPop .sx-audio[hidden] { display: none; } #sfxPop .sx-credit { font-size: 10px; opacity: .6; } #sfxPop .sx-credit a { color: inherit; } #sfxPop #sfxAiKey { width: 100%; height: 26px; padding: 0 6px; font-size: 12px; box-sizing: border-box; } #sfxTicks { position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; pointer-events: none; } #sfxTicks[hidden] { display: none; } #sfxTicks i { position: absolute; bottom: 0; width: 2px; height: 4px; margin-left: -1px; border-radius: 1px; opacity: .55; } #sfxTicks i.sx-f { background: #7fb8c9; } #sfxTicks i.sx-b { background: #c9a27f; } #sfxTicks i.sx-s { background: #d8dde6; height: 3px; } #transport.tp-grouped #sfxTicks { right: 13px; } /* (the ideas box bigger + the corner drags it, the height is remembered - the owner 2026-11-09 "chcem mať väčšie, zväčšiť podľa seba"; app/34d) */ #t2mForm #t2mIdeasBox .t2m-chips { max-height: 280px; min-height: 90px; overflow-y: auto; resize: vertical; } /* the funnel fixes 2026-11-10 ("our weak spots"): the video result's ✨ Magic Heal switch, the export window's folded options, the text motion's Export first */ #vmModal .vm-heal-sw { margin: 8px 0 2px; } #vmModal .vm-heal-sw input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 34px; height: 18px; margin: 0; border-radius: 9px; background: var(--line2); position: relative; cursor: pointer; transition: background .15s; } #vmModal .vm-heal-sw input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #cfd8e3; transition: left .15s; } #vmModal .vm-heal-sw input[type="checkbox"]:checked { background: var(--accent); } #vmModal .vm-heal-sw input[type="checkbox"]:checked::after { left: 18px; background: #fff; } #vmModal .vm-heal-sw input[type="checkbox"]:disabled { opacity: .6; cursor: progress; } #vmModal .vm-heal-sw small { color: var(--muted, #8b95a5); font-size: 11px; } #vmModal .vm-heal-note { font-size: 11.5px; line-height: 1.4; margin: 2px 0 6px; } #vmModal .vm-heal-note:empty { display: none; } #expModal .exp-more { margin: 6px 0 2px; border: 1px solid var(--line); border-radius: 9px; padding: 4px 10px; } #expModal .exp-more > summary { cursor: pointer; font-size: 12.5px; padding: 4px 0; color: var(--text); } #expModal .exp-more > summary small { color: var(--muted, #8b95a5); font-size: 11px; margin-left: 4px; } #expModal .exp-more[open] { padding-bottom: 8px; } #t2mForm #t2mResult #t2mExport { grid-column: 1 / -1; padding: 9px 8px; font-size: 13px; font-weight: 700; } #t2mResult.t2m-next button:not(#t2mExport) { background: var(--panel2); border-color: var(--line); color: var(--text); font-weight: 500; animation: none; box-shadow: none; filter: none; } #vmModal .vm-close-ask { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--panel2); font-size: 12.5px; } #vmModal .vm-close-ask[hidden] { display: none; } #vmModal .vm-close-ask span { grid-column: 1 / -1; line-height: 1.4; } #vmModal .vm-close-ask button { margin: 0; padding: 7px 8px; font-size: 12.5px; font-weight: 600; text-align: center; } #vmModal .vm-close-ask button.primary { grid-column: 1 / -1; } /* (the preview banner beside the docked video window: the narrow view broke its text into a tower of ~10 lines - the owner 2026-11-10; now at most two lines, the button under them, a sensible least width) */ body:not(.ph) #previewBanner { flex-wrap: wrap; row-gap: 5px; min-width: min(250px, calc(100% - 16px)); } body:not(.ph) #previewBanner > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1 1 170px; min-width: 0; } /* (the small dialogs: the main action full width, the others equal beside each other under it - the owner 2026-11-10 "nice, even UI"; Close was pushed to the right by margin-left: auto) */ .kq-gate-acts > a, .kq-gate-acts > button { flex: 1 1 0; min-width: 0; margin: 0; text-align: center; justify-content: center; box-sizing: border-box; } .kq-gate-acts > .primary { flex-basis: 100%; } /* ---- the add tiles (Import / Video / Sample / Camera / Character) bolder + a short line under each (the owner 2026-11-10: "zmeň tieto ikony, aby boli výraznejšie a základný text k nim") ---- */ :root:not(.kq-unity-panel) #addActs > :is(.drop, .sample-btn) { height: auto; min-height: 76px; padding: 8px 2px 7px; } :root:not(.kq-unity-panel) #addActs b { gap: 3px; font-size: 11.5px; font-weight: 700; color: #eef3f8; } #addActs .act-ic { width: 34px; height: 34px; margin-bottom: 2px; border-radius: 10px; box-shadow: 0 3px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .25); } #addActs .act-ic svg { width: 20px; height: 20px; stroke-width: 2.2; } #addActs .act-sub { display: block; max-width: 100%; font-size: 9.5px; font-weight: 500; line-height: 1.15; color: #9fb0c3; white-space: normal; text-align: center; } :root:not(.kq-unity-panel) #addActs > :is(.drop, .sample-btn):is(:hover, :focus-visible) .act-ic { transform: translateY(-1px) scale(1.06); } #addActs .act-ic { transition: transform .15s ease; } @container (max-width: 330px) { #addActs .act-ic { width: 30px; height: 30px; } #addActs .act-ic svg { width: 18px; height: 18px; } #addActs .act-sub { font-size: 8.5px; } } .kq-unity-panel #addActs .act-sub { display: none; } /* ---- the library visible at once (the owner 2026-11-10: "which files and skeletons schovaj nech nezaberá celý riadok, search užšie, category tagy zmenši"): the info is an ⓘ in the search row (its text opens under the row), the search row lower, the source / category chips smaller ---- */ .lib-search { position: relative; } .lib-search details.lib-info { flex: none; margin: 0; } .lib-search details.lib-info > summary { width: 26px; height: 26px; justify-content: center; padding: 0; border-radius: 7px; border: 1px solid var(--line); } .lib-search details.lib-info > summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .lib-search details.lib-info > summary::before { width: 14px; height: 14px; } .lib-search details.lib-info[open] > summary { margin: 0; background: #1c2430; } .lib-search details.lib-info > :not(summary) { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--panel2, #161c26); border: 1px solid var(--line2, #33405a); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); } :root:not(.kq-unity-panel) .libhead .lib-search { gap: 5px; margin-bottom: 2px; } :root:not(.kq-unity-panel) .libhead .lib-search :is(#libSearch, #libCols) { height: 28px; min-height: 28px; padding-top: 0; padding-bottom: 0; font-size: 12.5px; } :root:not(.kq-unity-panel) .libhead .lib-search #libView button { height: 26px; padding: 0 8px; } :root:not(.kq-unity-panel) #libHead { padding-top: 6px; padding-bottom: 4px; } :root:not(.kq-unity-panel) #libHead .chips { gap: 3px; margin: 4px 0 2px; } :root:not(.kq-unity-panel) #libHead :is(#libSrc, #libCats) { padding-top: 5px; margin-top: 5px; } :root:not(.kq-unity-panel) #libHead .chips > button { font-size: 10.5px; padding: 1px 7px; min-height: 19px; line-height: 16px; } :root:not(.kq-unity-panel) #libHead .chips .chips-lab { font-size: 9px; margin: 0 0 1px; } /* ---- the add tiles as low rectangles in a 2 x 2 grid, Character inside Import (the owner 2026-11-10: "spoj character do import… do obdĺžnikov po dva, aby nezaberali veľa miesta"): icon left, name + line right ---- */ :root:not(.kq-unity-panel) #addActs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } :root:not(.kq-unity-panel) #addActs > #charUpBtn { display: none; } :root:not(.kq-unity-panel) #addActs > :is(.drop, .sample-btn) { min-height: 0; height: 44px; padding: 0 8px; justify-content: flex-start; } :root:not(.kq-unity-panel) #addActs > :is(.drop, .sample-btn)[hidden] { display: none; } /* (the phone: its own Add menu hides the other tiles - Character stays there, one column) */ :root:not(.kq-unity-panel) body.ph #addActs { grid-template-columns: 1fr; } :root:not(.kq-unity-panel) body.ph #addActs > #charUpBtn { display: flex; } :root:not(.kq-unity-panel) #addActs b { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 0; align-items: center; justify-items: start; text-align: left; width: 100%; font-size: 12px; } #addActs b > .act-ic { grid-row: 1 / 3; width: 30px; height: 30px; margin: 0; } #addActs b > .act-ic svg { width: 17px; height: 17px; } #addActs b > span { align-self: end; } #addActs b > .act-sub { align-self: start; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } @container (max-width: 330px) { :root:not(.kq-unity-panel) #addActs b { font-size: 11.5px !important; } #addActs b > .act-ic { width: 28px; height: 28px; } #addActs .act-sub { font-size: 9px; } } /* (the owner 2026-11-10 "pozor na zarovnanie" / "ikonu daj radšej charakter": in a narrow panel the older container rules took the tiles' side padding (!important) - the icon touched the edge; the Import tile shows the character icon) */ @container (max-width: 330px) { :root:not(.kq-unity-panel) #addActs > :is(.drop, .sample-btn) { padding: 0 7px !important; } } :root:not(.kq-unity-panel) #addActs { grid-template-columns: repeat(2, minmax(0, 1fr)); } #libDrop { --aci: linear-gradient(135deg, #8b5cf6, #a78bfa); } /* (the owner 2026-11-10 "zlé zarovnanie": the tiles were still flex columns - the icon + text sat at the top (1 px over, 13 px under); a row now, centred vertically) */ :root:not(.kq-unity-panel) #addActs > :is(.drop, .sample-btn) { flex-direction: row; align-items: center; justify-content: flex-start; } /* (the owner 2026-11-10 "schovaj to iba ako tooltip": the Z textu steps box hidden - the steps are the prompt's tooltip) */ #t2mHow { display: none !important; } /* (the owner 2026-11-10 "rovnomerne do konca riadka": the source / category chips stretch to the row end) */ :root:not(.kq-unity-panel) #libHead :is(#libSrc, #libCats) > button { flex: 1 1 auto; justify-content: center; text-align: center; } /* ---- lower bars over the library (the owner 2026-11-10 "ušetrime ešte miesto, zúž na výšku všetky tieto veci"): the Studio / Public library switch, the main tabs (icon beside the word), the Library / From text sub-tabs ---- */ :root:not(.kq-unity-panel) .space-sw { margin: 4px 0 6px; padding: 3px; } :root:not(.kq-unity-panel) .space-sw button { height: 30px; font-size: 13.5px; } :root:not(.kq-unity-panel) .space-sw button span { font-size: 14px; } :root:not(.kq-unity-panel) #tabs { padding-top: 2px !important; padding-bottom: 4px !important; } :root:not(.kq-unity-panel) #tabs button { flex-direction: row; justify-content: center; gap: 5px; padding: 6px 2px 5px; } :root:not(.kq-unity-panel) #tabs button .ic { width: 16px; height: 16px; } :root:not(.kq-unity-panel) .subtabs.big { padding: 3px; margin-bottom: 8px; } :root:not(.kq-unity-panel) .subtabs.big > button { padding: 6px 8px; font-size: 13.5px; } :root:not(.kq-unity-panel) .subtabs.big > button .sub-ic { width: 17px; height: 17px; } /* ---- Z textu: the Quick ideas categories compact, all shown (the owner 2026-11-10 "tie kategórie skús zúžiť na výšku, ale aby boli všetky") - small chips that fill each row ---- */ #t2mForm #t2mIdeasBox #t2mCats { flex-wrap: wrap; overflow: visible; gap: 3px; padding: 3px; } #t2mForm #t2mIdeasBox #t2mCats > button { flex: 1 1 auto; justify-content: center; padding: 1px 7px; min-height: 20px; line-height: 17px; font-size: 11px; } /* ---- Z textu: the idea chips a bit smaller, filling each row with no gap at its end (the owner 2026-11-10 "texty zmenši trochu a napasuj tak, aby neostávalo voľné miesto") ---- */ #t2mForm #t2mIdeasBox #t2mChips { gap: 4px; } #t2mForm #t2mIdeasBox #t2mChips > button { flex: 1 1 auto; text-align: center; justify-content: center; padding: 3px 8px; font-size: 11.5px; line-height: 1.25; } /* ---- the preview note short with an icon (the owner 2026-11-10 "stručne, jasne… pekná ikona, nie surové texty") ---- */ .insp-preview-note { display: flex; align-items: center; gap: 10px; margin: 10px 12px; padding: 9px 12px; font-size: 12.5px; line-height: 1.35; } .insp-preview-note[hidden] { display: none; } .insp-preview-note .ipn-ic { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 9px; box-sizing: border-box; color: #fff; background: linear-gradient(135deg, #ff8a3d, #ff6a3d); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); } .insp-preview-note b { display: block; font-size: 13px; font-weight: 700; } .insp-preview-note span { display: block; color: #c9d3de; } /* (the owner 2026-11-10 "tieto dva tlačidlá nech svietia a blikajú… aj v tomto paneli, aby sa nikto nestratil": the text result's Open / Add and the preview note's two buttons glow) */ .insp-preview-note { flex-wrap: wrap; } .insp-preview-note .ipn-acts { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .insp-preview-note .ipn-acts button { padding: 6px 6px; font-size: 12px; font-weight: 650; } #t2mForm :is(#t2mNew, #t2mAdd), .insp-preview-note .ipn-acts button { color: #fff; border-color: rgba(255, 122, 61, .8); animation: kqStartGlow 2.2s ease-in-out infinite; } #t2mForm #t2mAdd, .insp-preview-note .ipn-acts button + button { animation-delay: .35s; } @media (prefers-reduced-motion: reduce) { #t2mForm :is(#t2mNew, #t2mAdd), .insp-preview-note .ipn-acts button { animation: none; box-shadow: 0 0 0 2px rgba(255, 122, 61, .6); } } .insp-preview-note .ipn-acts button.primary { grid-column: 1 / -1; padding: 8px 6px; font-size: 13px; } #t2mForm #t2mExport, .insp-preview-note .ipn-acts button.primary { animation: kqStartGlow 2.2s ease-in-out infinite; } /* (the owner 2026-11-10 "aj tieto nech svietia ale inou farbou": Open / Add glow cyan - Export stays orange) */ @keyframes kqCyanGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 230, 255, 0); } 50% { box-shadow: 0 0 0 2px rgba(46, 230, 255, .6), 0 0 18px rgba(46, 200, 255, .5); } } #t2mForm :is(#t2mNew, #t2mAdd), .insp-preview-note .ipn-acts button:not(.primary) { border-color: rgba(46, 230, 255, .85); background: rgba(46, 200, 255, .08); color: #e9fbff; animation: kqCyanGlow 2.2s ease-in-out infinite; } #t2mForm #t2mAdd, .insp-preview-note .ipn-acts button:not(.primary) + button { animation-delay: .35s; } #t2mForm :is(#t2mNew, #t2mAdd):hover, .insp-preview-note .ipn-acts button:not(.primary):hover { background: rgba(46, 200, 255, .18); color: #fff; } @media (prefers-reduced-motion: reduce) { #t2mForm :is(#t2mNew, #t2mAdd), .insp-preview-note .ipn-acts button:not(.primary) { animation: none; box-shadow: 0 0 0 2px rgba(46, 230, 255, .6); } } /* ---- "every library animation can be edited" made visible (edit-nudge.js, the owner 2026-11-10): the edit hint in the block panel, the export window's tip ---- */ .edit-hint { margin: 8px 10px; padding: 9px 10px 10px; border-radius: 10px; border: 1px solid rgba(46, 230, 255, .6); background: rgba(46, 200, 255, .08); animation: kqCyanGlow 2.4s ease-in-out 3; } .edit-hint .eh-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .edit-hint b { font-size: 13px; color: #e9fbff; } .edit-hint .eh-x { padding: 0 6px; min-height: 0; border: 0; background: transparent; color: #9fb1c4; font-size: 12px; } .edit-hint .eh-sub { display: block; margin: 2px 0 7px; font-size: 11.5px; color: #b9c6d3; } .edit-hint .eh-tools { display: flex; flex-wrap: wrap; gap: 4px; } .edit-hint .eh-tools button { flex: 1 1 auto; padding: 4px 8px; font-size: 11.5px; font-weight: 650; border-radius: 8px; border: 1px solid rgba(46, 230, 255, .5); background: #121a24; color: #e9fbff; } .edit-hint .eh-tools button:hover { background: rgba(46, 200, 255, .2); } .exp-edit-tip { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 7px 9px; border-radius: 9px; border: 1px solid rgba(46, 230, 255, .5); background: rgba(46, 200, 255, .07); font-size: 12px; color: #d8e6f0; } .exp-edit-tip span { flex: 1; } .exp-edit-tip button { flex: none; padding: 5px 10px; font-size: 12px; font-weight: 700; border-color: rgba(46, 230, 255, .85); color: #e9fbff; background: rgba(46, 200, 255, .1); } #lib .lib-newp[data-kq-edit] { font-weight: 700; } @media (prefers-reduced-motion: reduce) { .edit-hint { animation: none; } }