/* --------------------------------------------------------------------------- Legacy class compatibility for v2 pages. The page scripts in public/js/pages/ are shared by both designs, so the HTML they generate at runtime carries v1 class names (.btn, .card, .profile-msg, …). v1's styles.css is not loaded on a v2 page, so without this those fragments would render unstyled. Mapping the legacy names onto v2 tokens keeps one copy of the JS instead of forking it per design. Only classes that shared JS actually emits belong here. Anything rendered directly by a v2 template should use .v2-* classes instead. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Legacy theme variable aliases. v1 stylesheets and page CSS reference --card-bg, --border-color, --text-*, etc. from public/styles.css, which a v2 page does not load. Pointing those names at v2 tokens lets shared legacy CSS be reused verbatim and follow the v2 palette, including the light theme (the tokens themselves switch, so the aliases need no per-theme block). Declared on :root rather than .v2-shell so overlays portalled to still resolve them. --------------------------------------------------------------------------- */ :root { --bg-gradient-start: var(--v2-surface-1); --bg-gradient-end: var(--v2-surface-2); --card-bg: var(--v2-surface-2); --text-primary: var(--v2-text); --text-secondary: var(--v2-text-muted); --border-color: var(--v2-border); --button-bg: var(--v2-accent); --button-text: var(--v2-accent-contrast); --nav-link-color: var(--v2-accent-strong); --nav-link-hover: var(--v2-accent-soft); --command-section-bg: var(--v2-surface-3); --code-bg: var(--v2-surface-4); --link-color: var(--v2-accent-strong); --link-color-visited: var(--v2-accent-strong); --link-color-hover: var(--v2-accent); } /* ---------- Buttons ---------- */ .v2-shell .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--v2-space-2); box-sizing: border-box; padding: 9px var(--v2-space-4); min-height: 38px; border: 1px solid transparent; border-radius: var(--v2-radius-sm); background: var(--v2-surface-3); color: var(--v2-text); font-family: inherit; font-size: var(--v2-text-sm); font-weight: var(--v2-weight-semibold); line-height: 1.25; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--v2-dur-fast) var(--v2-ease), border-color var(--v2-dur-fast) var(--v2-ease), color var(--v2-dur-fast) var(--v2-ease); } .v2-shell .btn .ico { width: 16px; height: 16px; } .v2-shell .btn:hover:not(:disabled) { background: var(--v2-surface-4); text-decoration: none; } .v2-shell .btn:disabled, .v2-shell .btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .v2-shell .btn-primary { background: var(--v2-accent); border-color: var(--v2-accent); color: var(--v2-accent-contrast); } .v2-shell .btn-primary:hover:not(:disabled) { background: var(--v2-accent-strong); border-color: var(--v2-accent-strong); color: var(--v2-accent-contrast); } .v2-shell .btn-secondary { background: var(--v2-surface-3); border-color: var(--v2-border); color: var(--v2-text); } .v2-shell .btn-secondary:hover:not(:disabled) { background: var(--v2-surface-4); border-color: var(--v2-border-strong); color: var(--v2-text); } .v2-shell .btn-success { background: var(--v2-success); border-color: var(--v2-success); color: var(--v2-text-inverse); } .v2-shell .btn-success:hover:not(:disabled) { background: #2bb885; border-color: #2bb885; color: var(--v2-text-inverse); } .v2-shell .btn-danger { background: var(--v2-danger); border-color: var(--v2-danger); color: #fff; } .v2-shell .btn-danger:hover:not(:disabled) { background: #e05252; border-color: #e05252; color: #fff; } .v2-shell .btn-sm { padding: 6px var(--v2-space-3); min-height: 0; font-size: var(--v2-text-xs); } .v2-shell .btn-lg { padding: 13px var(--v2-space-6); min-height: 0; font-size: var(--v2-text-md); border-radius: var(--v2-radius-md); } /* ---------- Cards and sections ---------- */ .v2-shell .card { background: var(--v2-surface-2); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-md); padding: var(--v2-space-5); } .v2-shell .command-section { background: var(--v2-surface-3); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); padding: var(--v2-space-4); } /* ---------- Inline status messages ---------- */ .v2-shell .profile-msg { margin-top: var(--v2-space-2); font-size: var(--v2-text-sm); color: var(--v2-text-muted); } .v2-shell .profile-msg p { margin: 0; } .v2-shell .profile-field-hint, .v2-shell .profile-section-desc { color: var(--v2-text-muted); font-size: var(--v2-text-sm); } /* ---------- Form controls emitted by shared JS ---------- */ .v2-shell .form-group { text-align: left; margin-bottom: var(--v2-space-3); } .v2-shell .form-group label { display: block; font-size: var(--v2-text-sm); font-weight: var(--v2-weight-medium); margin-bottom: 4px; color: var(--v2-text); } .v2-shell .form-group small { display: block; margin-top: 4px; font-size: var(--v2-text-xs); color: var(--v2-text-muted); } .v2-shell input[type='text']:not(.v2-input), .v2-shell input[type='number']:not(.v2-input), .v2-shell input[type='search']:not(.v2-input), .v2-shell input[type='url']:not(.v2-input), .v2-shell input[type='date']:not(.v2-input), .v2-shell input[type='time']:not(.v2-input), .v2-shell input[type='datetime-local']:not(.v2-input), .v2-shell select:not(.v2-select), .v2-shell textarea:not(.v2-textarea) { width: 100%; box-sizing: border-box; padding: 0 var(--v2-space-3); height: 38px; background: var(--v2-surface-1); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); color: var(--v2-text); font-family: inherit; font-size: var(--v2-text-sm); } .v2-shell textarea:not(.v2-textarea) { height: auto; padding: var(--v2-space-3); min-height: 90px; } .v2-shell input:not(.v2-input):focus, .v2-shell select:not(.v2-select):focus, .v2-shell textarea:not(.v2-textarea):focus { outline: none; border-color: var(--v2-accent); } /* ---------- Game character rows ---------- */ .v2-shell .gc-list { display: flex; flex-direction: column; gap: var(--v2-space-2); } .v2-shell .gc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-space-3); flex-wrap: wrap; padding: var(--v2-space-3); background: var(--v2-surface-3); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); } /* ---------- Tutorial list ---------- */ .v2-shell .tutorial-restart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--v2-space-2); } .v2-shell .tutorial-restart-item { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-space-3); flex-wrap: wrap; padding: var(--v2-space-3); background: var(--v2-surface-3); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); } .v2-shell .tutorial-restart-item h4 { margin: 0 0 2px; font-size: var(--v2-text-sm); font-weight: var(--v2-weight-semibold); } .v2-shell .tutorial-restart-item p { margin: 0; font-size: var(--v2-text-xs); color: var(--v2-text-muted); } .v2-shell .tutorial-restart-status { font-size: var(--v2-text-xs); color: var(--v2-text-muted); } .v2-shell .tutorial-restart-status.is-done { color: var(--v2-success); } .v2-shell .tutorial-restart-status.is-skipped { color: var(--v2-warning); } /* ---------- Shared overlays (changelog, crop, in-app dialogs) ---------- These are portalled to , so they cannot rely on .v2-shell. v2 pages do not load styles.css, and app-dialog injects its own v1-looking rules. */ .changelog-modal-overlay, .image-crop-modal-overlay { position: fixed; inset: 0; z-index: var(--v2-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--v2-space-5); background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); } .changelog-modal-panel, .image-crop-modal { width: min(100%, 440px); max-height: min(85vh, 560px); overflow: auto; padding: var(--v2-space-5); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-xl); background: var(--v2-surface-1); box-shadow: var(--v2-shadow-lg); color: var(--v2-text); } .image-crop-modal { width: min(100%, 360px); } .changelog-modal-title, .image-crop-modal-title { margin: 0 0 var(--v2-space-2); font-size: var(--v2-text-lg); font-weight: var(--v2-weight-semibold); } .changelog-modal-body { margin: 0 0 var(--v2-space-4); } .changelog-modal-welcome { margin: 0 0 var(--v2-space-3); font-size: var(--v2-text-sm); line-height: 1.55; } .changelog-modal-highlights { list-style: none; margin: 0; padding: 0; } .changelog-modal-highlights li { position: relative; padding: 5px 0 5px 1.1rem; font-size: var(--v2-text-sm); line-height: 1.45; } .changelog-modal-highlights li::before { content: '•'; position: absolute; left: 0; color: var(--v2-accent); font-weight: 700; } .changelog-modal-actions { display: flex; flex-direction: column; gap: var(--v2-space-3); } .changelog-modal-dont { display: flex; align-items: center; gap: var(--v2-space-2); font-size: var(--v2-text-xs); color: var(--v2-text-muted); cursor: pointer; user-select: none; } .changelog-modal-buttons { display: flex; flex-wrap: wrap; gap: var(--v2-space-2); justify-content: flex-end; } .image-crop-modal-hint { margin: 0 0 var(--v2-space-4); font-size: var(--v2-text-xs); line-height: 1.45; color: var(--v2-text-muted); } .image-crop-viewport { position: relative; width: 100%; max-width: 280px; aspect-ratio: 1 / 1; margin: 0 auto; overflow: hidden; background: var(--v2-surface-4); border: 2px solid var(--v2-border-strong); border-radius: var(--v2-radius-sm); cursor: grab; touch-action: none; user-select: none; } .image-crop-viewport.is-dragging { cursor: grabbing; } .image-crop-viewport:focus { outline: 2px solid var(--v2-accent); outline-offset: 2px; } .image-crop-image { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; } .image-crop-zoom-row { display: flex; align-items: center; gap: var(--v2-space-3); margin: var(--v2-space-4) auto 0; max-width: 280px; } .image-crop-zoom-icon { flex: none; width: 1.25rem; color: var(--v2-text-muted); text-align: center; } .image-crop-zoom { flex: 1; min-width: 0; accent-color: var(--v2-accent); } .image-crop-actions { display: flex; flex-wrap: wrap; gap: var(--v2-space-2); justify-content: flex-end; margin-top: var(--v2-space-5); } [data-design='v2'] .app-dialog-overlay { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); } [data-design='v2'] .app-dialog-panel { border: 1px solid var(--v2-border); border-radius: var(--v2-radius-xl); background: var(--v2-surface-1); box-shadow: var(--v2-shadow-lg); padding: var(--v2-space-5); } [data-design='v2'] .app-dialog-title { font-size: var(--v2-text-md); font-weight: var(--v2-weight-semibold); color: var(--v2-text); } [data-design='v2'] .app-dialog-body { color: var(--v2-text-muted); } [data-design='v2'] .app-dialog-input { height: 38px; padding: 0 var(--v2-space-3); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-sm); background: var(--v2-surface-2); color: var(--v2-text); } /* Rich markdown compose lives in styles.css for v1. v2 pages do not load that file, so without this the source textarea stays visible and Post syncs an empty contenteditable surface over the typed comment. */ .rich-md-compose { position: relative; width: 100%; } .rich-md-compose textarea.rich-md-source { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .rich-md-surface { width: 100%; min-height: 72px; max-height: 360px; overflow-y: auto; padding: 8px 12px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-md); background: var(--v2-surface-3); color: var(--v2-text); font-size: var(--v2-text-sm); font-family: inherit; line-height: var(--v2-leading-snug); box-sizing: border-box; word-break: break-word; outline: none; } .rich-md-surface:focus { border-color: var(--v2-accent); box-shadow: 0 0 0 2px var(--v2-accent-soft); } .rich-md-compose.rich-md-autogrow .rich-md-surface { max-height: none; overflow-y: hidden; height: auto; } .rich-md-surface:empty::before { content: attr(data-placeholder); color: var(--v2-text-dim); pointer-events: none; } .rich-md-surface.rich-md-plain { white-space: pre-wrap; overflow-wrap: anywhere; } .rich-md-surface .comment-inline-image-wrap { margin: 6px 0; } .rich-md-surface .comment-inline-image { display: block; max-width: min(100%, 320px); max-height: 240px; width: auto; height: auto; border-radius: var(--v2-radius-sm); border: 1px solid var(--v2-border); }