/* ============================================================ Tomomon — in-browser content editor UI (light theme) Only takes effect when has the .editing class (?edit). ============================================================ */ /* Image covers (used by published content too, not just edit mode) */ .has-img > .creature-orb, .has-img > .slide__jp, .has-img > .series__jp, .title-slot.has-img::after { display: none !important; } /* Show every card immediately while editing (so tools are reachable below the fold) */ body.editing .reveal { opacity: 1 !important; transform: none !important; } /* ── editable text affordance ─────────────────────── */ body.editing [data-edit] { outline: 1px dashed rgba(0, 180, 210, 0.5); outline-offset: 3px; border-radius: 3px; cursor: text; transition: outline-color 0.2s; } body.editing [data-edit]:hover { outline-color: var(--neon-cyan); } body.editing [data-edit]:focus { outline: 2px solid var(--neon-cyan); background: rgba(0, 180, 210, 0.06); } /* ── editable card affordance ─────────────────────── */ body.editing .ed-card { position: relative; outline: 1px dashed rgba(var(--purple-rgb), 0.45); outline-offset: 2px; } body.editing .ed-card:hover { outline-color: var(--neon-purple); } .ed-tools { position: absolute; top: 6px; right: 6px; z-index: 6; display: flex; gap: 4px; opacity: 0; transition: opacity 0.18s; pointer-events: none; } .ed-card:hover > .ed-tools { opacity: 1; pointer-events: auto; } .ed-tool { width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer; font-size: 0.85rem; color: var(--text); background: var(--tag-bg); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 4px 12px -6px rgba(28, 41, 64, 0.25); } .ed-tool:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); } .ed-tool:disabled { opacity: 0.3; cursor: default; } .ed-tool--del:hover { border-color: var(--neon-purple); color: var(--neon-purple); } /* ── image host affordance ────────────────────────── */ body.editing .ed-img-host { cursor: pointer; position: relative; } body.editing .ed-img-host::after { content: '🖼 set image'; position: absolute; z-index: 7; top: 6px; right: 6px; font-family: var(--font-pixel); font-size: 0.62rem; color: var(--text); background: var(--tag-bg); border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; opacity: 0; transition: opacity 0.18s; } body.editing .ed-img-host:hover { outline: 1px dashed var(--neon-cyan); outline-offset: 2px; } body.editing .ed-img-host:hover::after { opacity: 1; } body.editing .title-slot.ed-img-host::after { content: '🖼'; top: 2px; right: 2px; padding: 2px 4px; } /* ── text box-style affordance ────────────────────── */ body.editing .ed-boxhost { position: relative; } .ed-boxbtn { position: absolute; top: -13px; right: -13px; z-index: 8; opacity: 0; transition: opacity 0.18s; } body.editing .ed-boxhost:hover > .ed-boxbtn { opacity: 1; } /* ── floating text-style button ───────────────────── */ .ed-stylebtn { position: fixed; z-index: 9500; } /* ── video host affordance ────────────────────────── */ body.editing .ed-video-host { cursor: pointer; position: relative; } body.editing .ed-video-host::after { content: '🎬 set video'; position: absolute; z-index: 7; top: 6px; right: 6px; font-family: var(--font-pixel); font-size: 0.62rem; color: var(--text); background: var(--tag-bg); border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; opacity: 0; transition: opacity 0.18s; } body.editing .ed-video-host:hover { outline: 1px dashed var(--neon-purple); outline-offset: 2px; } body.editing .ed-video-host:hover::after { opacity: 1; } /* ── section manager rows ─────────────────────────── */ .ed-secrow { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); } .ed-secrow__name { flex: 1; font-weight: 600; font-size: 0.95rem; } .ed-secrow.is-hidden .ed-secrow__name { opacity: 0.45; text-decoration: line-through; } .ed-secrow .ed-tool { position: static; opacity: 1; pointer-events: auto; } /* ── floating picture affordance ──────────────────── */ body.editing .pic-float { cursor: move; } body.editing .pic-float:hover { outline: 1px dashed var(--neon-cyan); outline-offset: 2px; } body.editing .pic-float img { pointer-events: none; } /* ── resize handle (pictures) ─────────────────────── */ .ed-resize { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; z-index: 6; cursor: nwse-resize; opacity: 0; transition: opacity 0.18s; border-right: 3px solid var(--neon-cyan); border-bottom: 3px solid var(--neon-cyan); border-bottom-right-radius: 4px; } .pic-float:hover > .ed-resize, .pic-strip__item:hover > .ed-resize { opacity: 1; } /* ── add-item bar ─────────────────────────────────── */ .ed-listbar { display: flex; justify-content: center; gap: 10px; margin: 18px auto 0; } .hero > .ed-listbar { grid-column: 1 / -1; } /* ── list / toolbar buttons ───────────────────────── */ .ed-btn { font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; cursor: pointer; color: var(--text); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 16px; transition: 0.18s var(--ease); } .ed-btn:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); } .ed-btn--sm { padding: 7px 12px; font-size: 0.8rem; } .ed-btn--primary { color: #ffffff; background: linear-gradient(100deg, var(--neon-cyan), var(--accent-2)); border-color: transparent; } .ed-btn--primary:hover { color: #ffffff; filter: brightness(1.08); } /* ── toolbar ──────────────────────────────────────── */ .ed-toolbar { position: fixed; left: 16px; bottom: 16px; z-index: 9999; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--frost); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 20px 50px -20px rgba(28, 41, 64, 0.35); } .ed-toolbar__title { font-family: var(--font-pixel); font-size: 0.78rem; color: var(--neon-cyan); margin-right: 4px; } .ed-toolbar__pub { font-family: var(--font-pixel); font-size: 0.7rem; color: var(--text-dim); margin-right: 4px; white-space: nowrap; } /* ── modal ────────────────────────────────────────── */ .ed-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: rgba(28, 41, 64, 0.4); backdrop-filter: blur(3px); padding: 20px; } .ed-modal { width: min(520px, 100%); max-height: 86vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 90px -30px rgba(28, 41, 64, 0.45); } .ed-modal__head { padding: 18px 22px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; border-bottom: 1px solid var(--line); } .ed-modal__foot { padding: 16px 22px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--panel); } /* ── form ─────────────────────────────────────────── */ .ed-form { padding: 20px 22px; display: grid; gap: 16px; } .ed-row { display: grid; gap: 7px; } .ed-row--inline { grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px; } .ed-label { font-family: var(--font-pixel); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-dim); text-transform: uppercase; } .ed-form input[type="text"], .ed-form input[type="password"], .ed-form input[type="number"], .ed-form textarea, .ed-form select { width: 100%; padding: 11px 14px; font-family: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); } .ed-form textarea { min-height: 96px; resize: vertical; line-height: 1.5; } .ed-form input:focus, .ed-form textarea:focus { outline: none; border-color: var(--neon-cyan); box-shadow: 0 0 12px -3px rgba(0, 180, 210, 0.3); } .ed-form input[type="color"] { width: 56px; height: 38px; padding: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; } .ed-form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--neon-cyan); cursor: pointer; } /* image field */ .ed-img { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; } .ed-img input[type="text"] { grid-column: 1 / -1; } .ed-img__prev { grid-column: 1 / -1; width: 100%; max-height: 160px; object-fit: contain; background: repeating-conic-gradient(var(--sprite-field-1) 0% 25%, var(--sprite-field-2) 0% 50%) 0 0 / 18px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); image-rendering: pixelated; } .ed-img__prev:not([src]) { display: none; } /* ── toast ────────────────────────────────────────── */ .ed-toast { position: fixed; left: 50%; bottom: 80px; transform: translate(-50%, 12px); z-index: 10001; padding: 11px 18px; font-size: 0.9rem; color: var(--text); background: var(--panel); border: 1px solid var(--neon-cyan); border-radius: 8px; box-shadow: 0 8px 30px -12px rgba(0, 180, 210, 0.45); opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; } .ed-toast.show { opacity: 1; transform: translate(-50%, 0); } @media (max-width: 680px) { .ed-toolbar { left: 8px; right: 8px; bottom: 8px; justify-content: center; } }