/* ===================================================================== UOGumpy — Global Styles Base: Bootstrap 5 CSS variable overrides. Themes: light (default), dark, midnight, forest, warm, parchment, inferno, ocean. All themes driven by CSS custom properties; the active theme is set via data-theme="" on . Accent colour across all themes is goldenrod (#e8b84b on dark backgrounds, #b8922a on light ones) — matches the UOGumpy logo. ===================================================================== */ html, body { margin: 0; padding: 0; overflow: hidden; } /* --- Bootstrap variable overrides: white / gray / black base --- */ :root { /* Body */ --bs-body-bg: #ffffff; --bs-body-color: #1a1a1a; /* Surface layers */ --bs-secondary-bg: #f4f4f4; --bs-tertiary-bg: #ebebeb; /* Borders */ --bs-border-color: #d1d1d1; --bs-border-color-translucent: rgba(0,0,0,.12); /* Muted text */ --bs-secondary-color: #6b6b6b; --bs-tertiary-color: #9a9a9a; /* Links — neutral, not blue */ --bs-link-color: #333333; --bs-link-hover-color: #000000; --bs-link-color-rgb: 51,51,51; --bs-link-hover-color-rgb: 0,0,0; /* Navbar */ --bs-navbar-bg: #f8f8f8; /* --------------------------------------------------------------- UOGumpy app-specific variables — Light theme defaults. Every [data-theme="x"] block below overrides these. Goldenrod accent (#b8922a on light backgrounds) is the brand colour matching the green UOGumpy logo. --------------------------------------------------------------- */ --uog-bg-app: #ffffff; --uog-bg-panel: #f4f4f4; --uog-bg-canvas: #e4e4e4; --uog-border: #d1d1d1; --uog-text-primary: #1a1a1a; --uog-text-muted: #6b6b6b; --uog-selected: #b8922a; /* goldenrod on light */ --uog-canvas-shadow: rgba(0,0,0,.15); } /* ── Dark — Visual Studio-style blacks (canvas ≈ rgb(16,16,16)) ────── The "workbench" feel: near-black backgrounds, cool-white text, and a goldenrod accent that echoes the UOGumpy logo on dark. */ [data-theme="dark"] { --bs-body-bg: #1e1e1e; --bs-body-color: #d4d4d4; --bs-secondary-bg: #252526; --bs-tertiary-bg: #2d2d2d; --bs-border-color: #3e3e42; --bs-border-color-translucent: rgba(255,255,255,.10); --bs-secondary-color: #858585; --bs-tertiary-color: #555555; --bs-link-color: #c8c8c8; --bs-link-hover-color: #ffffff; --bs-link-color-rgb: 200,200,200; --bs-link-hover-color-rgb: 255,255,255; --uog-bg-app: #1e1e1e; --uog-bg-panel: #252526; --uog-bg-canvas: #101010; /* rgb(16,16,16) — darkest surface */ --uog-border: #3e3e42; --uog-text-primary: #d4d4d4; --uog-text-muted: #858585; --uog-selected: #e8b84b; /* goldenrod on dark */ --uog-canvas-shadow: rgba(0,0,0,.6); } /* ── Midnight — the original navy-blue dark (preserved as an option) ── Deep indigo/navy panels with a cool blue-violet tint and goldenrod. */ [data-theme="midnight"] { --bs-body-bg: #1a1a1e; --bs-body-color: #e0e0e8; --bs-secondary-bg: #23232a; --bs-tertiary-bg: #2c2c35; --bs-border-color: #38383f; --bs-border-color-translucent: rgba(255,255,255,.10); --bs-secondary-color: #8a8a90; --bs-tertiary-color: #5a5a60; --bs-link-color: #c8c8d4; --bs-link-hover-color: #ffffff; --bs-link-color-rgb: 200,200,212; --bs-link-hover-color-rgb: 255,255,255; --uog-bg-app: #1a1a1e; --uog-bg-panel: #23232a; --uog-bg-canvas: #0f0f18; --uog-border: #38383f; --uog-text-primary: #e0e0e8; --uog-text-muted: #8a8a90; --uog-selected: #e8b84b; --uog-canvas-shadow: rgba(0,0,0,.55); } /* ── Forest — dark muted greens; earthy, restful on long sessions ───── Deep woodland tones with moss borders and goldenrod highlights. */ [data-theme="forest"] { --bs-body-bg: #141a14; --bs-body-color: #d0dbc8; --bs-secondary-bg: #1c251c; --bs-tertiary-bg: #243024; --bs-border-color: #354535; --bs-border-color-translucent: rgba(255,255,255,.09); --bs-secondary-color: #7a9070; --bs-tertiary-color: #4a6040; --bs-link-color: #b8d0a8; --bs-link-hover-color: #ddf0cc; --bs-link-color-rgb: 184,208,168; --bs-link-hover-color-rgb: 221,240,204; --uog-bg-app: #141a14; --uog-bg-panel: #1c251c; --uog-bg-canvas: #0d1210; --uog-border: #354535; --uog-text-primary: #d0dbc8; --uog-text-muted: #7a9070; --uog-selected: #e8b84b; --uog-canvas-shadow: rgba(0,0,0,.55); } /* ── Warm — amber/sepia; cosy firelight feel ────────────────────────── Warm browns, tanned panels, and rich gold accents. */ [data-theme="warm"] { --bs-body-bg: #1c1810; --bs-body-color: #e0d4b8; --bs-secondary-bg: #262018; --bs-tertiary-bg: #302a1e; --bs-border-color: #4a3e2e; --bs-border-color-translucent: rgba(255,255,255,.09); --bs-secondary-color: #9a8860; --bs-tertiary-color: #6a5840; --bs-link-color: #d4b880; --bs-link-hover-color: #f0d4a0; --bs-link-color-rgb: 212,184,128; --bs-link-hover-color-rgb: 240,212,160; --uog-bg-app: #1c1810; --uog-bg-panel: #262018; --uog-bg-canvas: #120e08; --uog-border: #4a3e2e; --uog-text-primary: #e0d4b8; --uog-text-muted: #9a8860; --uog-selected: #e8b84b; --uog-canvas-shadow: rgba(0,0,0,.55); } /* ── Parchment — aged UO paperdoll cream; light variant ────────────── Warm tan/cream surfaces like old vellum, with ink-brown text. */ [data-theme="parchment"] { --bs-body-bg: #f5edd8; --bs-body-color: #2c200e; --bs-secondary-bg: #ede4cc; --bs-tertiary-bg: #e4d8b8; --bs-border-color: #c8b890; --bs-border-color-translucent: rgba(0,0,0,.12); --bs-secondary-color: #6a5840; --bs-tertiary-color: #9a8860; --bs-link-color: #4a3018; --bs-link-hover-color: #1a0c00; --bs-link-color-rgb: 74,48,24; --bs-link-hover-color-rgb: 26,12,0; --uog-bg-app: #f5edd8; --uog-bg-panel: #ede4cc; --uog-bg-canvas: #ddd0b0; --uog-border: #c8b890; --uog-text-primary: #2c200e; --uog-text-muted: #6a5840; --uog-selected: #b8922a; /* goldenrod on parchment */ --uog-canvas-shadow: rgba(0,0,0,.18); } /* ── Inferno — deep red/charcoal; Ultima combat vibe ───────────────── Near-black with smouldering dark-red embers and goldenrod highlights. */ [data-theme="inferno"] { --bs-body-bg: #1a1010; --bs-body-color: #e0ccc8; --bs-secondary-bg: #241818; --bs-tertiary-bg: #2e1e1e; --bs-border-color: #4a2828; --bs-border-color-translucent: rgba(255,255,255,.09); --bs-secondary-color: #9a6868; --bs-tertiary-color: #6a4040; --bs-link-color: #d4a0a0; --bs-link-hover-color: #f0c8c8; --bs-link-color-rgb: 212,160,160; --bs-link-hover-color-rgb: 240,200,200; --uog-bg-app: #1a1010; --uog-bg-panel: #241818; --uog-bg-canvas: #100808; --uog-border: #4a2828; --uog-text-primary: #e0ccc8; --uog-text-muted: #9a6868; --uog-selected: #e8b84b; --uog-canvas-shadow: rgba(0,0,0,.6); } /* ── Ocean — teal/cyan dark; UO deep-sea vibe ──────────────────────── Abyssal dark teal panels, aqua-mist text, goldenrod sun on the water. */ [data-theme="ocean"] { --bs-body-bg: #0e1a1e; --bs-body-color: #c8dde0; --bs-secondary-bg: #162428; --bs-tertiary-bg: #1e2e32; --bs-border-color: #2e4850; --bs-border-color-translucent: rgba(255,255,255,.09); --bs-secondary-color: #6a9898; --bs-tertiary-color: #3a6868; --bs-link-color: #a0d0d8; --bs-link-hover-color: #c8f0f4; --bs-link-color-rgb: 160,208,216; --bs-link-hover-color-rgb: 200,240,244; --uog-bg-app: #0e1a1e; --uog-bg-panel: #162428; --uog-bg-canvas: #080e10; --uog-border: #2e4850; --uog-text-primary: #c8dde0; --uog-text-muted: #6a9898; --uog-selected: #e8b84b; --uog-canvas-shadow: rgba(0,0,0,.6); } /* --- Form validation --- */ h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #22c55e; } .invalid { outline: 1px solid #ef4444; } .validation-message { color: #ef4444; } /* --- Error boundary --- */ .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #991b1b; padding: 1rem 1rem 1rem 3.7rem; color: #fff; } .blazor-error-boundary::after { content: "An error has occurred."; } /* --- Form helpers --- */ .darker-border-checkbox.form-check-input { border-color: #9a9a9a; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ===================================================================== Toast notifications ===================================================================== */ .uog-toast-container { position: fixed; /* Top-centre, just below the nav bar so it lands at the top of the canvas area with a little padding — keeps notifications in the user's focus. */ top: 4rem; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: 22rem; width: max-content; /* Let canvas clicks pass through the gap around toasts; each toast re-enables. */ pointer-events: none; } .uog-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0.9rem; border-radius: 0.375rem; border: 1px solid var(--uog-border, #d1d1d1); background: var(--uog-bg-panel, #f4f4f4); color: var(--uog-text-primary, #1a1a1a); box-shadow: 0 2px 8px var(--uog-canvas-shadow, rgba(0,0,0,.15)); font-size: 0.875rem; animation: uog-toast-in 0.2s ease; } .uog-toast-success { border-left: 3px solid #22c55e; } .uog-toast-warning { border-left: 3px solid #f59e0b; } .uog-toast-error { border-left: 3px solid #ef4444; } .uog-toast-info { border-left: 3px solid #3b82f6; } .uog-toast-text { flex: 1; } .uog-toast-close { background: none; border: none; cursor: pointer; color: var(--uog-text-muted, #6b6b6b); font-size: 0.8rem; padding: 0; line-height: 1; flex-shrink: 0; } .uog-toast-close:hover { color: var(--uog-text-primary, #1a1a1a); } @keyframes uog-toast-in { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } } /* ===================================================================== Shared panel chrome ===================================================================== */ .uog-panel { background: var(--uog-bg-panel, #f4f4f4); border: 1px solid var(--uog-border, #d1d1d1); border-radius: 0.375rem; overflow: hidden; min-width: 0; display: flex; flex-direction: column; } .uog-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.7rem; font-size: 0.8rem; font-weight: 600; color: var(--uog-text-primary, #1a1a1a); background: var(--uog-bg-panel, #f4f4f4); border-bottom: 1px solid var(--uog-border, #d1d1d1); cursor: pointer; user-select: none; } .uog-panel-header:hover { background: var(--uog-bg-canvas, #e4e4e4); } .uog-panel-chevron { font-size: 0.65rem; } /* Art Tray header variant: title on the left, action buttons + chevron on the right */ .uog-panel-header--tray { cursor: default; } .uog-panel-header--tray:hover { background: var(--uog-bg-panel, #f4f4f4); } .uog-panel-title { flex: 1; } .uog-tray-header-actions { display: flex; align-items: center; gap: 3px; margin-right: 4px; } .uog-tray-hdr-btn { flex-shrink: 0; width: 22px; height: 22px; padding: 0; font-size: 0.9rem; line-height: 1; border: 1px solid var(--uog-border, #ccc); border-radius: 3px; background: var(--uog-bg-panel); color: var(--uog-text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; } .uog-tray-hdr-btn:hover { background: var(--uog-bg-canvas, #e4e4e4); } .uog-tray-hdr-import { /* label wrapping a hidden InputFile — must be display:flex to match the buttons */ display: flex; align-items: center; justify-content: center; user-select: none; } .uog-panel-chevron--btn { border: none; background: transparent; cursor: pointer; color: var(--uog-text-primary); font-size: 0.65rem; padding: 2px 4px; border-radius: 3px; line-height: 1; } .uog-panel-chevron--btn:hover { background: var(--uog-bg-canvas, #e4e4e4); } .uog-panel-body { padding: 0.5rem; flex: 1; overflow-y: auto; } .uog-panel-empty { font-size: 0.78rem; color: var(--uog-text-muted, #6b6b6b); text-align: center; margin: 0.5rem 0 0; } /* ===================================================================== Upload panel — drop zone ===================================================================== */ .uog-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60px; border: 2px dashed var(--uog-border, #d1d1d1); border-radius: 0.375rem; font-size: 0.75rem; color: var(--uog-text-muted, #6b6b6b); text-align: center; cursor: pointer; padding: 0.5rem; transition: border-color 0.15s, background 0.15s; position: relative; } .uog-dropzone--active, .uog-dropzone:hover { border-color: var(--uog-selected, #2563eb); background: rgba(37,99,235,.05); color: var(--uog-text-primary, #1a1a1a); } .uog-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .uog-tray-limit-note { font-size: 0.7rem; opacity: 0.55; display: block; margin-top: 2px; } /* ===================================================================== Busy spinner — reused as global overlay and inline tray variant ===================================================================== */ /* Full-screen overlay (save / open / export) */ .uog-busy-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; } .uog-busy-label { color: #fff; font-size: 0.95rem; letter-spacing: 0.04em; } /* The spinner ring itself */ @keyframes uog-spin { to { transform: rotate(360deg); } } .uog-busy-spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: uog-spin 0.75s linear infinite; } /* Small variant used inside the tray panel */ .uog-busy-spinner--sm { width: 22px; height: 22px; border-width: 3px; border-color: rgba(128,128,128,0.3); border-top-color: var(--uog-accent, #2563eb); } /* Inline loading state inside the art tray */ .uog-tray-loading { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.25rem; font-size: 0.82rem; opacity: 0.75; color: var(--uog-text-primary, inherit); } /* ===================================================================== Art tray grid ===================================================================== */ .uog-tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-top: 0.5rem; } .uog-tray-item { position: relative; width: 100%; } .uog-tray-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border: none; border-radius: 0.25rem; background: var(--uog-bg-canvas, #e4e4e4); cursor: pointer; } .uog-tray-id { font-size: 0.65rem; text-align: center; color: var(--uog-text-muted, #6b6b6b); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 0.15rem; margin-top: 1px; } .uog-tray-id-type { font-weight: 700; font-size: 0.6rem; opacity: 0.7; } .uog-tray-id-edit-hint { font-size: 0.55rem; /* Use visibility+width:0 instead of opacity-only so the hidden hint takes no space and the ID text stays truly centred. */ opacity: 0; width: 0; overflow: hidden; transition: opacity 0.15s, width 0.15s; } .uog-tray-id:hover .uog-tray-id-edit-hint { opacity: 1; width: auto; } .uog-tray-id--warn { color: #ef4444; font-weight: 700; } .uog-tray-id-input { width: 100%; font-size: 0.65rem; border: 1px solid var(--uog-selected, #2563eb); border-radius: 0.2rem; padding: 0; text-align: center; background: var(--bs-body-bg, #fff); color: var(--uog-text-primary, #1a1a1a); } .uog-tray-remove { display: none; position: absolute; top: 1px; right: 1px; background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 50%; width: 16px; height: 16px; font-size: 0.55rem; line-height: 16px; text-align: center; cursor: pointer; padding: 0; } .uog-tray-item:hover .uog-tray-remove { display: block; } /* Placeholder built-in tiles — pinned at top, no remove button */ .uog-tray-item--placeholder { background: color-mix(in srgb, var(--uog-surface) 85%, #2563eb 15%); } .uog-tray-id--placeholder { font-size: 0.7rem; text-align: center; color: var(--uog-selected, #2563eb); margin-top: 2px; font-weight: 600; } /* ===================================================================== Editor shell layout ===================================================================== */ .uog-editor-shell { display: flex; flex-direction: column; height: 100vh; background: var(--uog-bg-app, #ffffff); overflow: hidden; } .uog-editor-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0.4rem 0.75rem; background: var(--uog-bg-panel, #f4f4f4); border-bottom: 1px solid var(--uog-border, #d1d1d1); flex-shrink: 0; gap: 0.5rem; } /* Left cell — brand + file dropdown, left-aligned */ .uog-nav-left { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-start; } /* Centre cell — name input + file dropdown, always true-centre of the bar */ .uog-nav-centre { display: flex; align-items: center; justify-content: center; gap: 0.35rem; } /* Right cell — info + theme, right-aligned */ .uog-nav-right { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; } .uog-editor-brand { font-weight: 800; font-size: 1.05rem; white-space: nowrap; letter-spacing: 0.01em; /* Slightly scale up without expanding the navbar line-height */ line-height: 1; } /* "UO" — dark forest green matching the puzzle piece icon */ .uog-brand-uo { color: #3a7d44; } /* "Gumpy" — goldenrod matching the app accent */ .uog-brand-gumpy { color: var(--uog-selected, #b8922a); } /* keep old spacer classes harmless in case anything still references them */ .uog-editor-nav-spacer { flex: 1; } .uog-editor-nav-spacer-right { justify-content: flex-start; } .uog-editor-nav-tools { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .uog-gump-name-input { width: 200px; text-align: center; flex-shrink: 0; background: transparent; border: none; border-bottom: 1px solid transparent; border-radius: 0; box-shadow: none; outline: none; color: var(--uog-text-primary); font-size: 0.88rem; font-weight: 600; padding: 2px 6px; cursor: default; transition: border-color 0.15s, background 0.15s; } .uog-gump-name-input:hover { cursor: text; border-bottom-color: var(--uog-border, #d1d1d1); } .uog-gump-name-input:focus { cursor: text; border-bottom-color: var(--uog-selected, #4a9eff); background: transparent; box-shadow: none; outline: none; } .uog-unsaved-badge { font-size: 0.65rem; } .uog-editor-body { display: flex; flex: 1; overflow: hidden; gap: 0; } .uog-editor-left { width: 230px; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--uog-border, #d1d1d1); padding: 0.4rem; position: relative; transition: width 0.18s ease, padding 0.18s ease; } .uog-editor-left.uog-panel-collapsed { width: 0; padding: 0; border-right: none; overflow: hidden; } .uog-editor-right { width: 260px; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; border-left: 1px solid var(--uog-border, #d1d1d1); padding: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem; position: relative; transition: width 0.18s ease, padding 0.18s ease; } .uog-editor-right.uog-panel-collapsed { width: 0; padding: 0; border-left: none; overflow: hidden; } /* Old floating collapse button — no longer used, kept empty to avoid 404s */ .uog-panel-collapse-btn { display: none; } .uog-editor-center { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: flex-start; padding: 0.5rem; background: var(--uog-bg-canvas, #e4e4e4); } /* ===================================================================== Canvas ===================================================================== */ .uog-canvas-wrap { display: flex; flex-direction: column; } .uog-canvas-outer { outline: none; position: relative; } .uog-canvas { background: #1a1a1a; box-shadow: 0 2px 12px var(--uog-canvas-shadow, rgba(0,0,0,.15)); overflow: hidden; cursor: default; user-select: none; } /* -- Start-up splash overlay (blocks interaction while the app loads, then drops) -- */ .uog-startup-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(15, 18, 24, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: uog-startup-fade 0.25s ease; opacity: 1; transition: opacity 0.4s ease; } /* Applied just before removal to fade the splash out smoothly. */ .uog-startup-overlay--out { opacity: 0; pointer-events: none; } @keyframes uog-startup-fade { from { opacity: 0; } to { opacity: 1; } } .uog-startup-card { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; padding: 2rem; text-align: center; } .uog-startup-logo { max-width: 360px; width: 70vw; max-height: 50vh; object-fit: contain; user-select: none; pointer-events: none; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)); animation: uog-startup-pulse 1.6s ease-in-out infinite; } @keyframes uog-startup-pulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } } /* -- Canvas bottom bar (flags + status + cursor) -- */ .uog-canvas-bar { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.60); padding: 3px 8px; user-select: none; gap: 0.5rem; flex-shrink: 0; } .uog-canvas-flags { display: flex; align-items: center; gap: 0.75rem; pointer-events: all; } .uog-canvas-flag { display: flex; align-items: center; gap: 3px; font-size: 0.68rem; font-family: monospace; color: #d1d5db; cursor: pointer; white-space: nowrap; } .uog-canvas-flag input[type="checkbox"] { width: 12px; height: 12px; cursor: pointer; accent-color: #4a9eff; } .uog-canvas-status { display: flex; align-items: center; gap: 0.6rem; font-size: 0.68rem; font-family: monospace; color: #e0e0e0; pointer-events: none; white-space: nowrap; } .uog-canvas-status-unsaved { color: #fbbf24; } .uog-canvas-status-saved { color: #86efac; } .uog-canvas-status-cursor { color: #d1d5db; } .uog-canvas-capture-btn { -webkit-appearance: none; appearance: none; background: transparent; border: none; outline: none; color: #d1d5db; cursor: pointer; font-size: 0.82rem; line-height: inherit; padding: 0; margin: 0; position: relative; top: -3px; pointer-events: all; opacity: 0.75; transition: opacity 0.15s; } .uog-canvas-capture-btn:hover:not(.uog-canvas-capture-btn--busy) { opacity: 1; } .uog-canvas-capture-btn--busy { opacity: 0.35; cursor: wait; } /* -- Marquee selection box -- */ .uog-marquee { position: absolute; border: 1.5px dashed var(--uog-selected, #2563eb); background: rgba(37,99,235,.07); pointer-events: none; z-index: 9999; box-sizing: border-box; } /* -- Canvas alignment grid overlay -- */ .uog-canvas-grid { position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px); } /* -- Canvas grid / snap controls (now in the top nav, beside the file dropdown) -- */ .uog-nav-grid-controls { display: flex; align-items: center; gap: 0.45rem; } .uog-nav-grid-flag { display: flex; align-items: center; gap: 3px; font-size: 0.72rem; color: var(--uog-text-primary, #1a1a1a); cursor: pointer; white-space: nowrap; } .uog-nav-grid-flag input[type="checkbox"] { width: 13px; height: 13px; cursor: pointer; accent-color: var(--uog-selected, #2563eb); } .uog-nav-grid-size { font-size: 0.72rem; background: var(--uog-bg-panel, #f4f4f4); color: var(--uog-text-primary, #1a1a1a); border: 1px solid var(--uog-border, #d1d1d1); border-radius: 3px; padding: 1px 3px; cursor: pointer; } /* -- Page switcher -- */ .uog-nav-page-controls { display: flex; align-items: center; gap: 0.3rem; } .uog-nav-page-label { font-size: 0.72rem; color: var(--uog-text-muted, #6b6b6b); user-select: none; } .uog-nav-page-select { font-size: 0.72rem; background: var(--uog-bg-panel, #f4f4f4); color: var(--uog-text-primary, #1a1a1a); border: 1px solid var(--uog-border, #d1d1d1); border-radius: 3px; padding: 1px 3px; cursor: pointer; } /* -- Canvas background controls (colour swatch + image toggle/upload) -- */ .uog-nav-bg-divider { width: 1px; height: 16px; background: var(--uog-border, #d1d1d1); margin: 0 0.15rem; } .uog-nav-bg-swatch { position: relative; display: inline-block; width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--uog-border, #d1d1d1); cursor: pointer; overflow: hidden; flex-shrink: 0; } .uog-nav-bg-swatch input[type="color"] { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: none; padding: 0; background: transparent; cursor: pointer; opacity: 0; } .uog-nav-bg-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 0.8rem; line-height: 1; background: var(--uog-bg-panel, #f4f4f4); color: var(--uog-text-primary, #1a1a1a); border: 1px solid var(--uog-border, #d1d1d1); border-radius: 4px; cursor: pointer; flex-shrink: 0; padding: 0; } .uog-nav-bg-btn:hover { background: var(--uog-bg-hover, #e8e8e8); } .uog-nav-bg-btn.is-active { background: var(--uog-selected, #2563eb); border-color: var(--uog-selected, #2563eb); } .uog-nav-bg-upload { position: relative; overflow: hidden; } .uog-nav-bg-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; } /* -- Canvas element -- */ .uog-canvas-element { position: absolute; box-sizing: border-box; cursor: move; } .uog-canvas-element:hover { outline: 1px solid rgba(255,255,255,.35); outline-offset: 0; } .uog-canvas-element.selected { outline: 2px solid var(--uog-selected, #2563eb); outline-offset: 0; } /* ── Resize handles (shown on the selected, resizable element) ──────── */ .uog-resize-handle { position: absolute; width: 10px; height: 10px; background: var(--uog-selected, #2563eb); border: 1px solid #fff; border-radius: 2px; box-sizing: border-box; z-index: 10000; pointer-events: auto; } .uog-rh-nw { top: -5px; left: -5px; cursor: nwse-resize; } .uog-rh-n { top: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; } .uog-rh-ne { top: -5px; right: -5px; cursor: nesw-resize; } .uog-rh-e { top: 50%; right: -5px; margin-top: -5px; cursor: ew-resize; } .uog-rh-se { bottom: -5px; right: -5px; cursor: nwse-resize; } .uog-rh-s { bottom: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; } .uog-rh-sw { bottom: -5px; left: -5px; cursor: nesw-resize; } .uog-rh-w { top: 50%; left: -5px; margin-top: -5px; cursor: ew-resize; } .uog-element-placeholder { width: 100%; height: 100%; background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.3); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.6rem; color: rgba(255,255,255,.6); text-align: center; } /* Context menu backdrop — click-away to dismiss */ .uog-ctx-backdrop { position: fixed; inset: 0; z-index: 9998; background: transparent; } /* Context menu — fixed so it's never clipped by canvas overflow:hidden */ .uog-context-menu { position: fixed; background: var(--uog-bg-panel, #f4f4f4); border: 1px solid var(--uog-border, #d1d1d1); border-radius: 0.3rem; box-shadow: 0 4px 14px rgba(0,0,0,.2); z-index: 9999; min-width: 155px; padding: 0.25rem 0; } .uog-context-menu button { display: block; width: 100%; background: none; border: none; text-align: left; padding: 0.3rem 0.75rem; font-size: 0.8rem; cursor: pointer; color: var(--uog-text-primary, #1a1a1a); } .uog-context-menu button:hover { background: var(--uog-bg-canvas, #e4e4e4); } .uog-context-menu button.danger { color: #ef4444; } .uog-context-menu hr { margin: 0.2rem 0; border-color: var(--uog-border); } /* Canvas toolbar */ .uog-canvas-toolbar { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--uog-text-muted); } .uog-canvas-size-label { white-space: nowrap; } .uog-canvas-size-select { width: auto; min-width: 160px; } .uog-canvas-custom-input { width: 70px; } /* ===================================================================== Properties panel ===================================================================== */ .uog-props-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 0.5rem; align-items: center; padding: 0.5rem 0.6rem 0.5rem 0.6rem; overflow: hidden; box-sizing: border-box; width: 100%; } .uog-prop-label { font-size: 0.75rem; color: var(--uog-text-muted); white-space: nowrap; margin: 0; } .uog-prop-input { font-size: 0.75rem; min-width: 0; max-width: 100%; box-sizing: border-box; } .uog-prop-readonly { font-size: 0.72rem; color: var(--uog-text-muted); font-style: italic; } .uog-prop-readonly--type { font-style: normal; color: var(--uog-selected, #2563eb); font-weight: 600; letter-spacing: 0.01em; } /* ── Fixed type row + art-types list menu ───────────────────────────── */ .uog-prop-type-row { display: flex; align-items: center; gap: 4px; min-width: 0; } .uog-prop-type-row .uog-prop-readonly--type { flex: 1; min-width: 0; } .uog-prop-list-btn { flex-shrink: 0; width: 22px; height: 22px; padding: 0; font-size: 0.85rem; line-height: 1; border: 1px solid var(--uog-border, #ccc); border-radius: 3px; background: var(--uog-bg-panel); color: var(--uog-text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; } .uog-prop-list-btn:hover { opacity: 0.75; } .uog-prop-list-menu { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--uog-bg-canvas); border: 1px solid var(--uog-border, #ccc); border-radius: 4px; } .uog-prop-list-menu > button, .uog-prop-list-import { display: block; width: 100%; text-align: left; font-size: 0.74rem; padding: 4px 6px; border: none; border-radius: 3px; background: transparent; color: var(--uog-text-primary); cursor: pointer; position: relative; } .uog-prop-list-menu > button:hover, .uog-prop-list-import:hover { background: var(--uog-bg-panel); } /* ── Hue picker ─────────────────────────────────────────────────────── */ .uog-hue-row { display: flex; align-items: center; gap: 4px; min-width: 0; } .uog-hue-swatch { width: 18px; height: 18px; flex-shrink: 0; border-radius: 3px; border: 1px solid var(--uog-border, #ccc); display: inline-block; } .uog-hue-input { flex: 1; min-width: 0; } .uog-hue-picker-btn { flex-shrink: 0; width: 22px; height: 22px; padding: 0; font-size: 0.6rem; line-height: 1; border: 1px solid var(--uog-border, #ccc); border-radius: 3px; background: var(--uog-bg-panel); color: var(--uog-text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; } .uog-hue-picker-btn:hover { opacity: 0.75; } /* The swatch grid — spans both grid columns */ .uog-hue-picker { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; padding: 4px 2px; max-height: 130px; overflow-y: auto; background: var(--uog-bg-canvas); border: 1px solid var(--uog-border, #ccc); border-radius: 4px; } .uog-hue-tile { width: 18px; height: 18px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.25); cursor: pointer; flex-shrink: 0; transition: transform 0.1s; } .uog-hue-tile:hover { transform: scale(1.35); z-index: 2; position: relative; } .uog-hue-tile--active { outline: 2px solid var(--uog-selected, #4a9eff); outline-offset: 1px; } /* ===================================================================== Element list / layers panel ===================================================================== */ .uog-layer-body { padding: 0; } .uog-layer-list { display: flex; flex-direction: column; } .uog-layer-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; font-size: 0.78rem; border-bottom: 1px solid var(--uog-border, #d1d1d1); cursor: pointer; user-select: none; } .uog-layer-row:hover { background: var(--uog-bg-canvas, #e4e4e4); } .uog-layer-row.selected { background: color-mix(in srgb, var(--uog-selected) 12%, transparent); } .uog-layer-type { font-weight: 600; color: var(--uog-text-primary); min-width: 50px; } .uog-layer-page { font-size: 0.65rem; background: var(--uog-selected); color: #000; border-radius: 0.2rem; padding: 0 0.3rem; line-height: 1.5; white-space: nowrap; } .uog-layer-detail { color: var(--uog-text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uog-layer-coords { font-size: 0.68rem; color: var(--uog-text-muted); white-space: nowrap; } .uog-layer-actions { display: flex; gap: 0.2rem; margin-left: auto; } .uog-layer-btn { background: none; border: 1px solid var(--uog-border, #d1d1d1); border-radius: 0.2rem; padding: 0 0.3rem; font-size: 0.7rem; cursor: pointer; color: var(--uog-text-muted); line-height: 1.4; } .uog-layer-btn:hover { background: var(--uog-bg-canvas); color: var(--uog-text-primary); } .uog-layer-btn.danger:hover { color: #ef4444; } /* ===================================================================== Dialog overlay ===================================================================== */ .uog-dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 3000; } .uog-dialog { background: var(--uog-bg-panel, #f4f4f4); border: 1px solid var(--uog-border, #d1d1d1); border-radius: 0.5rem; padding: 1.25rem 1.5rem; max-width: 380px; width: 90%; box-shadow: 0 4px 24px rgba(0,0,0,.2); font-size: 0.9rem; color: var(--uog-text-primary); } .uog-dialog-actions { display: flex; gap: 0.5rem; margin-top: 1rem; justify-content: flex-end; } /* ===================================================================== Tray item — ensure ID text is centred below the thumbnail ===================================================================== */ .uog-tray-item { display: flex; flex-direction: column; align-items: center; } /* ===================================================================== Canvas — fills available space, no fixed px dimensions ===================================================================== */ .uog-canvas-wrap { display: flex; flex-direction: column; width: 100%; height: 100%; } .uog-canvas-outer { flex: 1; outline: none; overflow: auto; width: 100%; height: 100%; } .uog-editor-center { flex: 1; overflow: hidden; display: flex; padding: 0; background: var(--uog-bg-canvas, #e4e4e4); } /* ===================================================================== Editor nav dropdowns ===================================================================== */ .uog-nav-dropdown { position: relative; } .uog-dropdown-backdrop { position: fixed; inset: 0; z-index: 999; } .uog-nav-dropdown-toggle { white-space: nowrap; } /* File button — primary nav action, given visual priority */ .uog-nav-file-btn { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; cursor: pointer; padding: 0.3rem 0.7rem; font-size: 0.85rem; font-weight: 600; line-height: 1; color: #fff; background: linear-gradient(180deg, var(--uog-selected, #2563eb), color-mix(in srgb, var(--uog-selected, #2563eb) 80%, #000 20%)); border: 1px solid color-mix(in srgb, var(--uog-selected, #2563eb) 70%, #000 30%); border-radius: 0.35rem; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: filter .12s ease, box-shadow .12s ease, transform .04s ease; } .uog-nav-file-btn:hover { filter: brightness(1.08); box-shadow: 0 2px 8px color-mix(in srgb, var(--uog-selected, #2563eb) 45%, transparent); } .uog-nav-file-btn:active { transform: translateY(1px); } .uog-nav-file-btn.open { filter: brightness(0.95); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); } .uog-nav-file-icon { font-size: 0.95rem; } .uog-nav-file-caret { font-size: 0.7rem; opacity: 0.85; } /* Shared bounce keyframe — used by icon-only buttons that must not show a background box on hover. The animation gives clear interaction feedback without any visible square/highlight behind the icon. */ @keyframes uog-bounce { 0% { transform: translateY(0); } 35% { transform: translateY(-3px); } 65% { transform: translateY(1px); } 100% { transform: translateY(0); } } /* Info button — icon-only; colour shift + bounce on hover, never a background box */ .uog-nav-info-btn { font-size: 1.25rem; color: var(--uog-text-muted); background: none !important; } .uog-nav-info-btn:hover { color: var(--uog-selected); background: transparent !important; animation: uog-bounce 0.35s ease; } .uog-nav-info-icon { line-height: 1; } .uog-icon-btn { background: none; border: none; padding: 0.2rem 0.35rem; font-size: 1rem; cursor: pointer; color: var(--uog-text-primary, #1a1a1a); border-radius: 0.25rem; line-height: 1; display: inline-flex; align-items: center; } .uog-icon-btn:hover { background: transparent; } /* ── Art Tray — ⓘ help button on the drop zone ─────────────────────── */ .uog-dropzone-wrap { position: relative; } .uog-tray-art-help-btn { position: absolute; top: 0.35rem; right: 0.35rem; background: none; border: none; padding: 0; font-size: 1rem; line-height: 1; color: var(--uog-text-muted); cursor: pointer; z-index: 2; transition: color 0.15s ease; } .uog-tray-art-help-btn:hover { color: var(--uog-selected); animation: uog-bounce 0.35s ease; } /* ── Art help modal ─────────────────────────────────────────────────── */ .uog-art-help-modal { max-width: 520px; width: 92vw; padding: 1.25rem 1.4rem 1rem; display: flex; flex-direction: column; gap: 0.8rem; } .uog-art-help-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.65rem; } .uog-art-help-logo { width: 240px; height: 240px; object-fit: contain; } .uog-art-help-title { margin: 0 0 0.2rem; font-size: 1.05rem; font-weight: 700; color: var(--uog-text-primary, #1a1a1a); } .uog-art-help-sub { margin: 0; font-size: 0.83rem; color: var(--uog-text-muted, #6b6b6b); } .uog-art-help-body { font-size: 0.84rem; line-height: 1.6; color: var(--uog-text-primary, #1a1a1a); } .uog-art-help-body p { margin: 0 0 0.35rem; } .uog-art-help-body ul { margin: 0 0 0.6rem; padding-left: 1.3rem; } .uog-art-help-body li { margin-bottom: 0.25rem; } .uog-art-help-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; padding-top: 0.4rem; border-top: 1px solid var(--uog-border, #d1d1d1); } .uog-art-help-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.8rem; border-radius: 6px; font-size: 0.82rem; font-weight: 600; text-decoration: none; color: var(--uog-text-primary, #1a1a1a); background: var(--uog-bg-panel, #f4f4f4); border: 1px solid var(--uog-border, #d1d1d1); transition: border-color 0.15s ease, background 0.15s ease; } .uog-art-help-link:hover { border-color: var(--uog-selected); background: var(--uog-bg-canvas, #e4e4e4); color: var(--uog-text-primary, #1a1a1a); } .uog-art-help-close { padding: 0.35rem 1rem; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; border: 1px solid var(--uog-border, #d1d1d1); background: var(--uog-bg-panel, #f4f4f4); color: var(--uog-text-primary, #1a1a1a); transition: border-color 0.15s ease, background 0.15s ease; } .uog-art-help-close:hover { border-color: var(--uog-selected); background: var(--uog-bg-canvas, #e4e4e4); } /* ── Theme picker dropdown ─────────────────────────────────────────── */ .uog-theme-picker { display: inline-flex; align-items: center; } .uog-theme-select { appearance: none; -webkit-appearance: none; background: var(--uog-bg-panel); color: var(--uog-text-primary); border: 1px solid var(--uog-border); border-radius: 0.25rem; font-size: 0.8rem; padding: 0.15rem 1.4rem 0.15rem 0.4rem; cursor: pointer; line-height: 1.4; /* chevron arrow drawn with a CSS gradient so it inherits theme colours */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.4rem center; background-size: 8px 5px; min-width: 7.5rem; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .uog-theme-select:hover { border-color: var(--uog-selected); } .uog-theme-select:focus { outline: none; border-color: var(--uog-selected); box-shadow: 0 0 0 2px color-mix(in srgb, var(--uog-selected) 30%, transparent); } /* option elements inherit the page background/text in most browsers */ .uog-theme-select option { background: var(--uog-bg-panel); color: var(--uog-text-primary); } .uog-nav-dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 1000; min-width: 200px; background: var(--uog-bg-panel, #f4f4f4); border: 1px solid var(--uog-border, #d1d1d1); border-radius: 0.35rem; box-shadow: 0 4px 16px rgba(0,0,0,.15); display: flex; flex-direction: column; padding: 0.25rem 0; } .uog-nav-dropdown-menu button, .uog-nav-dropdown-file-label { background: none; border: none; text-align: left; padding: 0.45rem 0.85rem; font-size: 0.85rem; cursor: pointer; color: var(--uog-text-primary, #1a1a1a); white-space: nowrap; display: block; width: 100%; box-sizing: border-box; overflow: hidden; } .uog-nav-dropdown-menu button:hover, .uog-nav-dropdown-file-label:hover { background: var(--uog-bg-canvas, #e4e4e4); } /* ===================================================================== Home / landing page ===================================================================== */ .uog-home { max-width: 860px; margin: 0 auto; padding: 3rem 1.5rem 4rem; } .uog-home-hero { text-align: center; margin-bottom: 3rem; } .uog-home-logo { font-size: 3.5rem; line-height: 1; margin-bottom: 0.5rem; } .uog-home-title { font-size: 2.5rem; font-weight: 700; color: var(--uog-text-primary, #1a1a1a); margin-bottom: 1.25rem; } .uog-home-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .uog-home-btn-primary { min-width: 130px; } .uog-home-btn-secondary { min-width: 100px; } .uog-home-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; } .uog-home-feature { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem; background: var(--uog-bg-panel, #f4f4f4); border: 1px solid var(--uog-border, #d1d1d1); border-radius: 0.5rem; font-size: 0.875rem; } .uog-home-feature-icon { font-size: 1.5rem; } .uog-home-feature strong { color: var(--uog-text-primary, #1a1a1a); } .uog-home-feature span { color: var(--uog-text-muted, #6b6b6b); line-height: 1.4; } .uog-home-stat { font-size: 1.4rem; font-weight: 700; color: var(--uog-text-primary, #1a1a1a); } /* ===================================================================== Footer ===================================================================== */ /* Editor-specific footer — collapse toggles + copyright */ .uog-editor-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 0.3rem 0.6rem; background: var(--uog-bg-panel, #f4f4f4); border-top: 1px solid var(--uog-border, #d1d1d1); flex-shrink: 0; } /* .uog-footer-copy is defined below in the BBP footer section */ .uog-footer-collapse-btn { background: none; border: none; padding: 0 0.5rem; font-size: 0.8rem; color: var(--uog-text-muted, #6b6b6b); cursor: pointer; line-height: 1; opacity: 0.7; transition: opacity 0.15s, color 0.15s; } .uog-footer-collapse-btn:hover { opacity: 1; color: var(--uog-text-primary); } /* Shared footer (Info page, etc.) */ .uog-footer { text-align: center; padding: 0.75rem 1rem; font-size: 0.8rem; color: var(--uog-text-muted, #6b6b6b); border-top: 1px solid var(--uog-border, #d1d1d1); background: var(--uog-bg-panel, #f4f4f4); flex-shrink: 0; } /* ===================================================================== Info / Help page ===================================================================== */ .uog-info-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--uog-bg-body, #f9f9f9); } .uog-info-content { flex: 1; max-width: 760px; margin: 2rem auto; padding: 1.5rem; background: var(--uog-bg-panel, #f4f4f4); border: 1px solid var(--uog-border, #d1d1d1); border-radius: 6px; } .uog-info-title { margin-bottom: 1.25rem; font-weight: 700; font-size: 1.1rem; } /* Info splash logo */ .uog-info-splash { display: flex; justify-content: center; margin-bottom: 1.25rem; } .uog-info-splash-img { max-width: 280px; width: 60%; height: auto; user-select: none; } /* Info stat boxes — centered and constrained to the same width as the splash logo above */ .uog-info-stats { display: flex; gap: 1rem; margin: 0 auto 1.75rem; max-width: 280px; width: 60%; } .uog-info-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.9rem 0.5rem; background: var(--uog-bg-body, #f9f9f9); border: 1px solid var(--uog-border, #d1d1d1); border-radius: 6px; } .uog-info-stat-num { font-size: 1.6rem; font-weight: 700; color: var(--uog-selected, #2563eb); line-height: 1; } .uog-info-stat-label { font-size: 0.78rem; color: var(--uog-text-muted, #6b6b6b); text-transform: uppercase; letter-spacing: 0.03em; } .uog-info-section { margin-bottom: 1.5rem; } .uog-info-section h6 { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; text-align: center; margin: 0 0 0.7rem; padding-bottom: 0.4rem; color: var(--uog-selected, #2563eb); border-bottom: 2px solid color-mix(in srgb, var(--uog-selected, #2563eb) 45%, transparent); } .uog-info-section ul { padding-left: 1.25rem; margin: 0; } .uog-info-section li { margin-bottom: 0.4rem; font-size: 0.92rem; line-height: 1.5; } .uog-info-section p { font-size: 0.92rem; line-height: 1.55; margin: 0 0 0.6rem; } /* Emphasis styling across the manual — colour + weight to highlight key terms */ .uog-info-modal-body strong { font-weight: 700; color: var(--uog-selected, #2563eb); } .uog-info-modal-body em { font-style: normal; font-weight: 600; color: color-mix(in srgb, var(--uog-selected, #2563eb) 70%, var(--uog-text-primary) 30%); } .uog-info-modal-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; padding: 0.08rem 0.35rem; border-radius: 0.25rem; background: color-mix(in srgb, var(--uog-bg-canvas) 60%, var(--uog-selected, #2563eb) 14%); border: 1px solid color-mix(in srgb, var(--uog-border) 55%, var(--uog-selected, #2563eb) 25%); color: var(--uog-text-primary, #1a1a1a); white-space: nowrap; } /* ===================================================================== Info / Instructions modal ===================================================================== */ .uog-info-modal { background: var(--uog-bg-panel, #f4f4f4); border: 1px solid var(--uog-border, #d1d1d1); border-radius: 6px; width: min(660px, 92vw); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.35); color: var(--uog-text-primary, #1a1a1a); } .uog-info-modal-header { position: relative; display: flex; align-items: center; justify-content: center; padding: 0.85rem 3rem; border-bottom: 1px solid var(--uog-border, #d1d1d1); font-weight: 700; flex-shrink: 0; color: var(--uog-text-primary, #1a1a1a); } /* Centered, enlarged manual title (icon + text). */ .uog-info-modal-title { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.5rem; text-align: center; } /* Close button pinned to the right while the title stays optically centered. */ .uog-info-modal-close { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); } .uog-info-modal-icon { color: var(--uog-selected, #2563eb); font-size: 1.7rem; vertical-align: -0.05em; } .uog-info-modal-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; color: var(--uog-text-primary, #1a1a1a); } .uog-info-modal-body p, .uog-info-modal-body li, .uog-info-modal-body h6 { color: var(--uog-text-primary, #1a1a1a); } .uog-info-modal-footer { display: flex; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; font-size: 0.75rem; color: var(--uog-text-muted, #6b6b6b); padding: 0.5rem 1rem; border-top: 1px solid var(--uog-border, #d1d1d1); flex-shrink: 0; } /* ── Community links (bottom of instructions) ──────────────────────── */ .uog-info-community { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; text-align: center; } /* Ensure the section h6 divider runs full width even inside a centred flex container */ .uog-info-community h6 { width: 100%; } .uog-info-community-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .uog-community-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.82rem; font-weight: 600; text-decoration: none; color: var(--uog-text-primary, #1a1a1a); background: var(--uog-bg-panel, #ececec); border: 1px solid var(--uog-border, #d4d4d4); transition: background 0.15s ease, border-color 0.15s ease; } .uog-community-link:hover { background: var(--uog-surface-3, #e0e0e0); border-color: var(--uog-accent, #4a90d9); } /* ── Support the Community section ─────────────────────────────────── */ .uog-info-support { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } .uog-info-support h6 { margin: 0 0 0.25rem 0; font-size: 1rem; font-weight: 700; color: var(--uog-text-primary, #1a1a1a); } .uog-info-support p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--uog-text-primary, #1a1a1a); max-width: 520px; } .uog-info-support-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin: 0.25rem 0; } .uog-info-support-link { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: rgb(16, 16, 16); border: 2px solid var(--uog-border, #ced4da); border-radius: 10px; text-decoration: none; color: #f1f1f1; font-size: 0.82rem; font-weight: 600; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; min-width: 120px; } .uog-info-support-link:hover { border-color: var(--uog-selected, #d4a017); transform: translateY(-2px); box-shadow: 0 6px 16px color-mix(in srgb, var(--uog-selected, #d4a017) 30%, transparent); color: #fff; } .uog-info-support-link:active { transform: translateY(0); box-shadow: none; } .uog-info-support-logo { width: 56px; height: 56px; object-fit: contain; user-select: none; pointer-events: none; } .uog-info-support-note { font-size: 0.78rem !important; opacity: 0.75; font-style: italic; } /* ── BBP footer icon & link ─────────────────────────────────────────── */ .uog-footer-copy { display: flex; align-items: center; justify-content: center; gap: 0.35rem; font-size: 0.8rem; color: var(--uog-text-muted, #6b6b6b); } .uog-footer-bblink { display: inline-flex; align-items: center; opacity: 0.65; transition: opacity 0.15s; line-height: 1; } .uog-footer-bblink:hover { opacity: 1; } .uog-footer-bbicon { width: 16px; height: 16px; object-fit: contain; display: block; } /* ── UOFiddler promo section ────────────────────────────────────────── */ .uog-info-section--highlight { background: color-mix(in srgb, var(--uog-bg-canvas) 70%, var(--uog-selected, #2563eb) 8%); border: 1px solid color-mix(in srgb, var(--uog-border) 60%, var(--uog-selected, #2563eb) 40%); border-radius: 6px; padding: 0.75rem 1rem; } .uog-info-uofiddler { display: flex; flex-direction: column; gap: 0.6rem; } .uog-info-uofiddler-logo { width: 100%; height: auto; object-fit: contain; border-radius: 6px; display: block; } .uog-info-uofiddler > div { width: 100%; text-align: left; } .uog-info-uofiddler h6 { border-bottom: none; margin-bottom: 0.3rem; text-align: center; } .uog-info-uofiddler p { font-size: 0.85rem; margin-bottom: 0.25rem; } .uog-info-uofiddler ul { margin-bottom: 0.25rem; } .uog-info-uofiddler-actions { display: flex; justify-content: center; margin-top: 0.4rem; } .uog-info-uofiddler-link { display: inline-block; margin-top: 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--uog-selected, #2563eb); text-decoration: none; border: 1px solid var(--uog-selected, #2563eb); border-radius: 4px; padding: 0.2rem 0.6rem; transition: background 0.15s, color 0.15s; } .uog-info-uofiddler-link:hover { background: var(--uog-selected, #2563eb); color: #fff; } /* ===================================================================== Export modal ===================================================================== */ .uog-export-modal { text-align: center; max-width: 320px; padding-top: 1rem; } .uog-export-modal-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem 0; color: var(--uog-text-primary, #1a1a1a); } .uog-export-modal-choices { display: flex; flex-direction: column; gap: 0.6rem; } .uog-export-choice { display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.6rem 1rem; /* Static dark background (regardless of theme) so the transparent server logos pop. */ background: rgb(16, 16, 16); border: 1px solid var(--uog-border, #ced4da); border-radius: 8px; color: #f1f1f1; font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease; } .uog-export-choice:hover { border-color: var(--uog-selected); background: color-mix(in srgb, var(--uog-bg-canvas) 85%, var(--uog-selected) 15%); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--uog-selected) 30%, transparent); } .uog-export-choice:active { transform: translateY(0); background: rgb(16, 16, 16); box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2); } .uog-export-choice-icon { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; user-select: none; pointer-events: none; } /* ===================================================================== Text-type canvas elements (Label, Html, TextEntry) ===================================================================== */ /* Common: fill the element's width/height, clip overflow */ .uog-el-label, .uog-el-html, .uog-el-textentry { width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; user-select: none; pointer-events: none; font-family: serif; /* UO uses serif-style text */ } /* Label — plain canvas text, no border */ .uog-el-label { font-size: 0.9rem; font-weight: 500; color: #e8d9b0; /* warm parchment default */ white-space: nowrap; padding: 0 3px; } /* Html — scroll region suggestion; semi-transparent dark pane */ .uog-el-html { font-size: 0.78rem; color: #d4cbb0; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.15); border-radius: 2px; align-items: flex-start; padding: 3px 5px; white-space: pre-wrap; word-break: break-word; } /* TextEntry — looks like an input box */ .uog-el-textentry { font-size: 0.85rem; color: #1a1a1a; background: #f0ede6; border: 2px solid #7a6a50; border-radius: 2px; padding: 0 5px; white-space: nowrap; } /* Hint text shown when no text is set */ .uog-el-placeholder-hint { opacity: 0.4; font-style: italic; font-size: 0.75rem; color: inherit; } /* AlphaRegion — pure transparency/dim rectangle (no art, no hue). In-game this darkens/dims everything behind it. On canvas we render it as a semi-transparent purple-tinted overlay so it reads as "something is here" while still letting the canvas background show through — matching the purple tray tile. The dashed border uses the same purple tint so the region is clearly outlined. */ .uog-el-alpha { width: 100%; height: 100%; box-sizing: border-box; pointer-events: none; user-select: none; background: rgba(155, 89, 182, 0.18); border: 1px dashed rgba(155, 89, 182, 0.65); } /* ===================================================================== Gump name bar — centred above canvas ===================================================================== */ .uog-gump-name-bar { display: flex; justify-content: center; align-items: center; padding: 0.3rem 0.75rem; background: var(--uog-bg-panel, #f4f4f4); border-bottom: 1px solid var(--uog-border, #d1d1d1); flex-shrink: 0; } .uog-gump-name-input { width: 220px; text-align: center; } /* ===================================================================== Nav dropdown divider ===================================================================== */ .uog-nav-dropdown-divider { margin: 0.2rem 0; border: none; border-top: 1px solid var(--uog-border, #d1d1d1); } /* ===================================================================== Undo / Redo nav buttons ===================================================================== */ .uog-nav-undo-btn { font-size: 1.1rem; line-height: 1; } .uog-nav-undo-btn:disabled { opacity: 0.35; cursor: default; } .uog-nav-undo-icon { display: inline-block; transform: translateY(-1px); } /* ===================================================================== Small-screen gate — "Desktop Required" Hidden by default; shown only on narrow viewports (phones / small tablets). UOGumpy is a precision desktop tool, so we block the editor below ~820px. ===================================================================== */ .uog-mobile-gate { display: none; } @media (max-width: 820px) { /* Hide the whole editor and show the gate instead. */ .uog-editor-shell, .uog-startup-overlay, .uog-toast-container { display: none !important; } .uog-mobile-gate { display: flex; position: fixed; inset: 0; z-index: 5000; align-items: center; justify-content: center; padding: 1.5rem; background: var(--uog-bg-app, #1e1e1e); color: var(--uog-text-primary, #f4f4f4); text-align: center; } .uog-mobile-gate-card { max-width: 26rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .uog-mobile-gate-logo { width: clamp(120px, 50vw, 200px); height: auto; margin-bottom: 0.5rem; } .uog-mobile-gate-card h1 { font-size: 1.5rem; margin: 0; } .uog-mobile-gate-card p { margin: 0.25rem 0; font-size: 0.95rem; opacity: 0.85; line-height: 1.45; } }