/* ── Moderator sites — shared overrides ────────────────────────────────────── Loaded on top of the main /style.css. Moderator pages intentionally look and feel different from BTW itself: dark background by default, different type, no dark-on-dark "card" boxes for body content — only the side nav is a box. Keep BTW-specific styling out of the root style.css — anything moderator-only belongs in here instead. Only pages that link this stylesheet are affected; nothing here touches the main site. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* Cinzel is already imported by /style.css — reused here for the same serif heading font BTW itself uses, per request. */ html { background: #0a0a0a; } /* Cozy blue/red theme, dark background by default. Redeclaring these custom properties re-skins every reused BTW class (rules, borders, footer text, nav links) without touching a single rule in the root stylesheet. */ body.mod-theme { background: #0a0a0a; color: #f0f0f0; font-family: 'Inter', 'Lato', sans-serif; --violet: #7fa8d9; /* soft blue, legible on dark */ --rose: #d97a72; /* warm coral red */ --gold: #7fa8d9; /* accent — reuses the blue */ --mist: #b0b0b0; /* body text tint */ --light: #f0f0f0; --border: rgba(255,255,255,0.1); } /* The two side-column boxes (account + nav) are theme-aware — driven by the same --mod-* custom properties the theme picker sets on . Fallback values keep them looking right on pages that don't run the theme JS yet (characters/chapters/gallery). */ .mod-return-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none !important; border: 1px solid var(--mod-accent-border, rgba(127, 168, 217, 0.4)) !important; border-radius: 20px; padding: 0.4rem 0.75rem !important; color: var(--mod-text-primary, #f0f0f0) !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } .mod-return-btn:hover { background: var(--mod-accent-bg, rgba(127, 168, 217, 0.1)); border-color: var(--violet); color: var(--violet) !important; } .mod-account-box .nav-user-btn { width: 100%; background: var(--mod-accent2-bg, rgba(217, 122, 114, 0.08)); border: 1px solid var(--mod-accent2-border, rgba(217, 122, 114, 0.3)); color: var(--mod-text-primary, #f0f0f0); } .mod-account-box .nav-user-btn:hover { background: var(--mod-accent2-bg-hover, rgba(217, 122, 114, 0.14)); border-color: var(--rose); } .mod-account-box .nav-user-dropdown { background: var(--mod-card-bg, #161616); border: 1px solid var(--mod-card-border, rgba(255,255,255,0.1)); box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .mod-account-box .nav-user-dropdown a { color: var(--mod-text-primary, #f0f0f0); } .mod-account-box .nav-user-dropdown a:hover { background: var(--mod-accent-bg, #1e1e1e); color: var(--mod-text-primary, #fff); } .mod-placeholder-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; } /* ── Cover ── */ .wiki-cover { position: relative; width: 100%; height: 560px; overflow: hidden; } .wiki-cover img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; transition: opacity 0.2s; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } /* Hidden until JS confirms which image (the moderator's own, or the shared fallback) actually belongs here — prevents a flash of the wrong banner. */ .wiki-cover img.mod-banner-loading { opacity: 0; transition: none; } .wiki-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(10,10,10,0.95) 100%); } /* Editing state — blur + greenish haze over the banner, Wattpad-style */ .wiki-cover img { transition: filter 0.2s; } .wiki-cover.mod-editing-banner img { filter: blur(6px) saturate(0.85) brightness(0.9); } .wiki-cover.mod-editing-banner::before { content: ''; position: absolute; inset: 0; background: rgba(24, 74, 62, 0.55); z-index: 2; } /* Owner-only shortcut into the banner's image editor — fades in on hover instead of sitting there all the time, hidden once already editing (the full mod-banner-edit-wrap camera controls take over then). Mirrors the profile editor's fp-banner-edit-pencil exactly. */ .mod-banner-edit-pencil { position: absolute; bottom: 1.1rem; right: 1.1rem; z-index: 6; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 1.05rem; cursor: pointer; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.18s, background 0.15s; } .wiki-cover:hover .mod-banner-edit-pencil { opacity: 1; } .mod-banner-edit-pencil:hover { background: rgba(0,0,0,0.85); } /* Bookmark toggle — icon-only circle sitting just left of the banner pencil (same size/position pattern), for owners and visitors alike. */ .mod-bookmark-btn { position: absolute; bottom: 1.1rem; right: 4.75rem; z-index: 3; width: 44px; height: 44px; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.35); cursor: pointer; backdrop-filter: blur(4px); transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s; } .mod-bookmark-btn:hover { background: rgba(0,0,0,0.85); } .mod-bookmark-btn.bookmarked { color: #7fa8d9; border-color: #7fa8d9; background: rgba(127,168,217,0.22); box-shadow: 0 0 16px rgba(127,168,217,0.55); } /* VeekitPaws-only VIP badge — top-left of her own story's banner. Purely a data-driven check against the site's author_username, not a special file. */ .mod-vip-badge { position: absolute; top: 1.25rem; left: 1.5rem; z-index: 3; display: flex; align-items: center; gap: 0.4rem; background: linear-gradient(135deg, rgba(107,63,160,0.85), rgba(194,84,122,0.85)); border: 1px solid rgba(240,192,96,0.6); border-radius: 20px; padding: 0.4rem 1rem; backdrop-filter: blur(4px); color: #fff; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700; box-shadow: 0 0 18px rgba(240,192,96,0.4); } .mod-vip-badge-star { color: #f0c060; text-shadow: 0 0 10px rgba(240,192,96,0.8); } /* "Written by" bubble — bottom-left of the banner, mirrors Edit Story's corner */ .mod-written-by { position: absolute; left: 1.5rem; bottom: 1.25rem; z-index: 3; display: flex; align-items: center; gap: 0.6rem; background: rgba(0,0,0,0.55); border-radius: 26px; padding: 0.4rem 1rem 0.4rem 0.4rem; text-decoration: none; backdrop-filter: blur(4px); transition: background 0.15s; } .mod-written-by:hover { background: rgba(0,0,0,0.75); } /* .wiki-cover img { width:100%; height:100%; } outweighs a single class on specificity, which is what blew this avatar up to fill the whole banner — scoped selector here beats it back down to its intended 32px. */ .wiki-cover img.mod-written-by-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #333; flex-shrink: 0; } .mod-written-by-avatar-fallback { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7fa8d9, #d97a72); color: #fff; font-size: 0.8rem; font-weight: 700; } .mod-written-by-text { display: flex; flex-direction: column; line-height: 1.25; } .mod-written-by-label { font-size: 0.65rem; color: rgba(255,255,255,0.65); font-family: 'Inter', sans-serif; } .mod-written-by-name { font-size: 0.85rem; color: #fff; font-weight: 700; font-family: 'Inter', sans-serif; } /* Author box — sits directly under the Navigate side-nav box */ .mod-author-box { background: var(--mod-card-bg, #161616); border: 1px solid var(--mod-card-border, rgba(255,255,255,0.08)); border-top: 3px solid var(--violet); border-radius: 14px; padding: 1.25rem 1rem; margin-top: 1.25rem; } .mod-author-box-label { font-family: 'Cinzel', serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--violet); margin: 0 0 0.9rem; padding: 0 0.25rem; } .mod-author-box-row { display: flex; align-items: center; gap: 0.7rem; } .mod-author-box-link { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: 1; min-width: 0; } .mod-author-box-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #333; flex-shrink: 0; } .mod-author-box-avatar-fallback { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7fa8d9, #d97a72); color: #fff; font-size: 0.9rem; font-weight: 700; } .mod-author-box-name { font-size: 0.88rem; font-weight: 700; color: var(--mod-text-primary, #f0f0f0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mod-author-box-btn { flex-shrink: 0; border: none; cursor: pointer; text-decoration: none; display: inline-block; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700; padding: 0.4rem 0.85rem; border-radius: 16px; background: var(--mod-accent-bg, rgba(127,168,217,0.15)); color: var(--violet); border: 1px solid var(--mod-accent-border, rgba(127,168,217,0.4)); } .mod-author-box-btn:hover { background: var(--mod-accent-bg-hover, rgba(127,168,217,0.22)); } .mod-author-box-btn.following { color: var(--mod-text-secondary, #999); border-color: var(--mod-card-border, rgba(255,255,255,0.15)); background: transparent; } /* Owner-only "Edit Story" trigger — absolutely positioned within the side column so JS can line its top up exactly with the "Story Description" heading in the main column, independent of how tall Navigate/Author end up being. Replaces the old on-banner pill: the banner's own hover pencil handles quick access, this is the big, obvious entry point for opening the editor. */ .mod-side-edit-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; background: transparent; border: 1px solid rgba(127,168,217,0.6); color: #7fa8d9; border-radius: 14px; padding: 1rem; font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 0 16px rgba(127,168,217,0.4); transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s; } .mod-side-edit-btn:hover { border-color: #7fa8d9; color: #a8c6e8; background: var(--mod-accent-bg, rgba(127,168,217,0.08)); box-shadow: 0 0 22px rgba(127,168,217,0.6); } /* ── Book box — sits under Navigate on a story's Characters/Gallery pages: the book's own cover + a follow-the-author row, so browsing feels like you're looking at this content through the lens of that specific book instead of a generic character/art feed. Gold accent (vs. the plain author box's violet) to read as "about this book" rather than "about this page." ── */ .mod-book-box { background: var(--mod-card-bg, #161616); border: 1px solid var(--mod-card-border, rgba(255,255,255,0.08)); border-top: 3px solid #f0c060; border-radius: 14px; padding: 1.1rem 1rem; margin-top: 1.25rem; text-align: center; } .mod-book-box-cover-link { display: block; margin-bottom: 0.9rem; } .mod-book-box-cover { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; border-radius: 10px; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 14px 34px rgba(0,0,0,0.55); transition: transform 0.2s; } .mod-book-box-cover-link:hover .mod-book-box-cover { transform: translateY(-3px); } .mod-book-box-title { font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 700; color: #f0f0f0; line-height: 1.3; margin-bottom: 0.9rem; } .mod-book-box-author-row { display: flex; align-items: center; gap: 0.55rem; text-align: left; } .mod-book-box-author-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex: 1; min-width: 0; } .mod-book-box-author-avatar, .mod-book-box-author-avatar-fallback { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: #333; } .mod-book-box-author-avatar-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7fa8d9, #d97a72); color: #fff; font-size: 0.8rem; font-weight: 700; } .mod-book-box-author-name { font-size: 0.82rem; font-weight: 700; color: #ddd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mod-book-box-follow-btn { flex-shrink: 0; border: none; cursor: pointer; text-decoration: none; display: inline-block; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 700; padding: 0.35rem 0.75rem; border-radius: 16px; background: rgba(240,192,96,0.15); color: #f0c060; border: 1px solid rgba(240,192,96,0.4); } .mod-book-box-follow-btn:hover { background: rgba(240,192,96,0.22); } .mod-book-box-follow-btn.following { color: #999; border-color: rgba(255,255,255,0.15); background: transparent; } /* ── Quick-nav cards — Characters/Chapters on top, Gallery centered below, forming an upside-down triangle. Sized to sit only in the left/main column, never spanning the page — hence the max-width cap. ── */ .mod-quick-nav { max-width: 560px; /* Centered in display mode so it doesn't sit flush-left with a big dead gap on the right now that the main column is much wider — editor mode resets left/right back to 0 below since it's a flex item there (cards+cover side by side), where auto margins would fight the flex layout instead of centering anything. */ margin: 0 auto 2.5rem; } .mod-quick-nav-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; } .mod-quick-nav-row + .mod-quick-nav-row { margin-top: 1.25rem; } .mod-quick-nav-row--single { display: flex; justify-content: center; } .mod-quick-nav-card { position: relative; display: block; text-decoration: none; width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; /* Forces its own compositing layer so the rounded overflow:hidden clip stays crisp while the img inside scales on hover — without this, some browsers rasterize the clip and the scaled child separately and leave a faint aliased sliver of the square image poking past the rounded edge. */ transform: translateZ(0); background: #0a0a0a; border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.3s, box-shadow 0.3s; } /* Matches the top row's per-card width: (100% - row gap) / 2 */ .mod-quick-nav-row--single .mod-quick-nav-card { width: calc(50% - 1.125rem); } .mod-quick-nav-card:hover { border-color: var(--violet); box-shadow: 0 0 24px rgba(127,168,217,0.18); } .mod-quick-nav-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease, filter 0.2s; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } .mod-quick-nav-card:hover img { transform: scale(1.06); } .mod-quick-nav-card.mod-editing img { filter: blur(4px) brightness(0.7); } .mod-quick-nav-card.mod-editing:hover img { transform: none; } /* Recrop shortcut — reopens the Cropper.js modal on the existing card image, only shown once a custom (non-default) image is set. Sits at the bottom of the card, away from the camera "change image" button up in the top-right corner — on the compact editor-sized cards, the pill's text is wide enough to reach clear across the card and cover the camera button otherwise. */ .mod-quick-nav-card-recrop-btn { position: absolute; bottom: 0.5rem; left: 0.5rem; z-index: 2; width: auto; max-width: calc(100% - 1rem); white-space: nowrap; box-sizing: border-box; } .mod-quick-nav-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.3) 45%, transparent 100%); display: flex; align-items: flex-end; padding: 0.9rem 1rem; } .mod-quick-nav-card-label { font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; text-transform: uppercase; transition: color 0.3s; } .mod-quick-nav-card:hover .mod-quick-nav-card-label { color: var(--violet); } /* Owner-only camera badge, appears while editing */ .mod-quick-nav-card-edit-btn { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 0.85rem; cursor: pointer; } .mod-quick-nav-card-edit-btn:hover { background: rgba(0,0,0,0.9); } @media (max-width: 560px) { .mod-quick-nav { max-width: 100%; } } .mod-banner-edit-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .mod-banner-edit-btn { display: flex; align-items: center; gap: 0.5rem; background: rgba(0,0,0,0.65); color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 10px; padding: 0.7rem 1.2rem; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .mod-banner-edit-btn:hover { background: rgba(0,0,0,0.8); } .mod-banner-edit-hint { color: rgba(255,255,255,0.85); font-size: 0.72rem; font-family: 'Inter', sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,0.6); } .mod-banner-reposition { position: absolute; right: 1.5rem; top: 1.25rem; z-index: 3; display: flex; align-items: center; gap: 0.5rem; background: rgba(0,0,0,0.5); border-radius: 20px; padding: 0.4rem 0.9rem; } .mod-banner-reposition label { color: #fff; font-size: 0.72rem; font-family: 'Inter', sans-serif; white-space: nowrap; } .mod-banner-reposition input[type="range"] { width: 100px; } /* Fully replaces the main nav bar while editing — same pattern as the profile editor's bar, which sits at top:0 and hides #fanpages-topbar-root entirely rather than stacking below it. */ .mod-edit-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 150; height: 68px; box-sizing: border-box; align-items: center; justify-content: space-between; background: #161616; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 0 1.5rem; font-family: 'Inter', sans-serif; } body.mod-editing-active #fanpages-topbar-root { display: none; } .mod-edit-bar-label { font-size: 0.85rem; font-weight: 600; color: #bbb; } .mod-edit-bar-left { display: flex; align-items: center; gap: 1.25rem; } .mod-edit-bar-delete { background: #c0392b; border: none; color: #fff; font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 700; padding: 0.6em 1.2em; border-radius: 8px; cursor: pointer; transition: background 0.15s; } .mod-edit-bar-delete:hover { background: #a83224; } .mod-edit-bar-actions { display: flex; gap: 0.75rem; align-items: center; } /* Mimics the profile editor's fp-edit-btn Save/Cancel pills exactly. */ .mod-edit-bar-save, .mod-edit-bar-cancel { border: none; cursor: pointer; font-family: 'Fredoka', 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; padding: 0.65rem 1.5rem; border-radius: 22px; } .mod-edit-bar-cancel { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #f0f0f0; } .mod-edit-bar-cancel:hover { border-color: #f0f0f0; } .mod-edit-bar-save { background: #1fb6a8; color: #fff; } .mod-edit-bar-save:hover { background: #1a9d91; } .mod-edit-bar-theme-btn { background: none; border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; color: #bbb; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; } .mod-edit-bar-theme-btn:hover { border-color: #7fa8d9; color: #7fa8d9; } /* Floating theme-wheel — sits directly under the banner pencil (same right offset), fades in on hover, hidden while editing. Mirrors the profile editor's fp-theme-picker--floating exactly. NOTE: uses the doubled-up selector (not just .mod-theme-picker--floating) so its `position: absolute` beats the plain .mod-theme-picker's `position: relative` declared further down — same specificity (0,1,0) otherwise, and that rule wins on source order, which silently drops this out of absolute positioning and left it stuck at the top-left in flow. */ .mod-theme-picker.mod-theme-picker--floating { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 20; opacity: 0; pointer-events: none; transition: opacity 0.18s; } .mod-page-bg-wrap:hover .mod-theme-picker--floating { opacity: 1; pointer-events: auto; } .mod-theme-btn-floating { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #f0f0f0; cursor: pointer; font-size: 1.1rem; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .mod-theme-btn-floating:hover { border-color: #f0f0f0; background: rgba(255,255,255,0.08); } /* ── Theme picker popover (Chrome-style) ─────────────────────────────────── */ .mod-theme-picker { position: relative; } .mod-theme-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; background: #161616; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.5); padding: 1rem; width: 260px; } .mod-theme-popover-label { font-size: 0.75rem; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; } .mod-theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } .mod-theme-swatch { width: 48px; height: 48px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; padding: 0; overflow: hidden; display: flex; box-shadow: 0 1px 4px rgba(0,0,0,0.4); } .mod-theme-swatch span { display: block; width: 50%; height: 100%; } .mod-theme-swatch.active { border-color: #7fa8d9; } .mod-theme-swatch--upload { align-items: center; justify-content: center; background: #1e1e1e; color: #999; font-size: 1.1rem; } .mod-theme-swatch--upload:hover { background: #292929; } .mod-editable-block { position: relative; } .mod-edit-input { margin-top: 0.25rem; } /* ── Compact editing layout — while actively editing, the page reflows into a dedicated editor view: side column gone (Navigate/Author box aren't editable), quick-nav cards stack vertically on the left with the cover to their right, and Description/Bio/Links/Tags read as one continuous form. None of this touches display mode — it's all scoped under body.mod-editing-active, and the wrapping divs it targets (#editor-top-row, #editor-form-box) carry no styling of their own outside that class. ── */ body.mod-editing-active .wiki-side-col { display: none; } body.mod-editing-active .wiki-layout { grid-template-columns: 1fr; max-width: 820px; } body.mod-editing-active .wiki-title { margin-bottom: 1.5rem; } body.mod-editing-active .mod-cover-wrap { width: 170px; height: 255px; float: none; margin: 0; flex-shrink: 0; } /* Cards column (left) + cover (right) — #editor-cover-slot is empty in display mode; JS reparents #cover-wrap into it only while editing. */ body.mod-editing-active #editor-top-row { display: flex; align-items: flex-start; gap: 1.75rem; margin-bottom: 2rem; } body.mod-editing-active #editor-top-row .mod-quick-nav { width: 110px; flex-shrink: 0; margin: 0; } body.mod-editing-active #editor-top-row .mod-quick-nav-row { grid-template-columns: 1fr; gap: 0.75rem; } body.mod-editing-active #editor-top-row .mod-quick-nav-row + .mod-quick-nav-row { margin-top: 0.75rem; } body.mod-editing-active #editor-top-row .mod-quick-nav-row--single { display: block; } body.mod-editing-active #editor-top-row .mod-quick-nav-row--single .mod-quick-nav-card { width: 100%; } /* One continuous bordered form — Description → Bio → Links → Tags — with generous breathing room between each field so nothing feels cramped. */ body.mod-editing-active .mod-editor-form-box { background: var(--mod-card-bg, #161616); border: 1px solid var(--mod-card-border, rgba(255,255,255,0.08)); border-radius: 16px; padding: 1.85rem 2rem 2.1rem; } body.mod-editing-active .mod-editor-form-box .wiki-section { margin-bottom: 2.5rem; } body.mod-editing-active .mod-editor-form-box .wiki-section:last-child { margin-bottom: 0; } /* Gives Title its own breathing room above "Story Description" — the About/Meet headings below are hidden (redundant with the field labels), which otherwise collapsed that gap to almost nothing. */ body.mod-editing-active .mod-editor-form-box > .mod-editable-block { margin-bottom: 2rem; } /* The About/Meet the Author section headings are redundant with the field labels now sitting right on their fields (Story Description / Meet {author}) — hidden while editing. Tags keeps its heading. */ body.mod-editing-active .mod-editor-form-box > .wiki-section:nth-child(2) > .wiki-section-title, body.mod-editing-active .mod-editor-form-box > .wiki-section:nth-child(2) > .wiki-rule, body.mod-editing-active .mod-editor-form-box > .wiki-section:nth-child(3) > .wiki-section-title, body.mod-editing-active .mod-editor-form-box > .wiki-section:nth-child(3) > .wiki-rule { display: none; } /* Description/Bio get noticeably more room to write in while editing. */ body.mod-editing-active #site-synopsis-input { min-height: 260px; } body.mod-editing-active #site-bio-input { min-height: 240px; } /* Find Me drops underneath Meet {author} instead of sitting beside it — both fields get the full box width, so they can be bigger too. */ body.mod-editing-active .wiki-meet-split { grid-template-columns: 1fr; gap: 1.75rem; } body.mod-editing-active .wiki-meet-divider { display: none; } /* Thin, dark scrollbar for anything that scrolls inside the editor — matches the inbox/DM thread's scrollbar treatment. */ .mod-textarea { scrollbar-width: thin; scrollbar-color: rgba(212,175,85,0.25) transparent; } .mod-textarea::-webkit-scrollbar { width: 6px; } .mod-textarea::-webkit-scrollbar-track { background: transparent; } .mod-textarea::-webkit-scrollbar-thumb { background: rgba(212,175,85,0.25); border-radius: 6px; } .mod-textarea::-webkit-scrollbar-thumb:hover { background: rgba(212,175,85,0.4); } /* Small uppercase labels above each editable field (Title/Description/Bio), matching the profile editor's PRONOUNS/BIO/FUN FACT labels — only shown while editing, since the section headings (About/Meet the Author) already label things fine in display mode. */ .mod-field-label { display: none; font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose, #d97a72); margin-bottom: 0.4rem; } body.mod-editing-active .mod-field-label { display: block; } /* Label + a small "how to format" hint on the same line — used for fields that accept *italic*/**bold** (Description, Bio). */ .mod-field-label-row { display: none; align-items: baseline; gap: 0.65rem; margin-bottom: 0.4rem; } body.mod-editing-active .mod-field-label-row { display: flex; } .mod-field-label-row .mod-field-label { margin-bottom: 0; } .mod-field-hint { font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 400; color: var(--mod-text-secondary, #888); font-style: italic; } /* Custom uploaded background — sits beneath the wiki-layout content only, never overlapping the banner above it */ .mod-page-bg-wrap { position: relative; } .mod-page-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(0.95); z-index: 0; } .mod-page-bg-overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.72); z-index: 0; } /* ── Wiki layout ── */ .wiki-layout { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 4.5rem 3rem 4rem; display: grid; grid-template-columns: 1fr 220px; gap: 3rem; align-items: start; } .wiki-title { font-family: 'Cinzel', serif; font-size: 2.4rem; font-weight: 800; color: #f0c060; text-shadow: 0 0 18px rgba(240,192,96,0.55), 0 0 42px rgba(240,192,96,0.25); margin-bottom: 2.5rem; } .wiki-title-share-row { display: flex; align-items: center; gap: 1.75rem; margin-bottom: 2.5rem; } .wiki-title-share-row .wiki-title, .wiki-title-share-row .mod-editable-block { margin-bottom: 0; } /* Hidden while editing — only ever relevant on the display view. */ body.mod-editing-active .fp-share-icon-btn { display: none; } .wiki-section { margin-bottom: 2.75rem; } .wiki-section-title { display: inline-block; font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #f0f0f0; border-bottom: 3px solid var(--rose); padding-bottom: 0.3rem; } .wiki-rule { height: 1px; background: rgba(255,255,255,0.1); margin: 0.75rem 0 1.5rem; } .wiki-quote { border-left: 3px solid var(--rose); padding: 0.2rem 0 0.2rem 1.25rem; font-style: italic; color: #ccc; font-size: 1.02rem; line-height: 1.75; white-space: pre-line; /* preserve line breaks from pasted text (e.g. Wattpad bios) */ } /* About row — story description | book cover, same shape as BTW's own synopsis+cover. The cover floats right so text wraps beside it and then runs full-width once it scrolls past the bottom of the cover, instead of being stuck in a fixed-height column. */ .mod-about-row::after { content: ''; display: table; clear: both; } .mod-cover-wrap { position: relative; float: right; margin: 0 0 1rem 2rem; width: 220px; height: 330px; /* 2:3 ratio, matches BTW's cover box */ border-radius: 8px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.5); flex-shrink: 0; } .mod-cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } .mod-cover-placeholder { width: 100%; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; border: 2px dashed var(--mod-card-border, rgba(255,255,255,0.15)); background: var(--mod-card-bg, #161616); color: var(--mod-text-secondary, #999); font-size: 0.8rem; } .mod-cover-edit-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; background: rgba(0,0,0,0.65); color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 8px; padding: 0.5rem 0.8rem; font-size: 0.78rem; font-family: 'Inter', sans-serif; font-weight: 600; cursor: pointer; text-align: center; } .mod-cover-edit-btn:hover { background: rgba(0,0,0,0.8); } .mod-cover-reposition { position: absolute; bottom: 8px; left: 8px; right: 8px; z-index: 3; display: flex; flex-direction: column; gap: 5px; background: rgba(0,0,0,0.55); border-radius: 8px; padding: 6px 8px; } .mod-cover-reposition label { display: flex; align-items: center; gap: 5px; color: #fff; font-size: 0.62rem; font-family: 'Inter', sans-serif; } .mod-cover-reposition input[type="range"] { flex: 1; width: 100%; } .wiki-section p { color: #ccc; font-size: 1rem; line-height: 1.8; white-space: pre-line; /* preserve line breaks from pasted text (e.g. Wattpad bios) */ } /* "Meet Blue" split — bio text | vertical divider | links */ .wiki-meet-split { display: grid; grid-template-columns: 1fr 1px 200px; gap: 2rem; align-items: start; } .wiki-meet-divider { align-self: stretch; background: rgba(255,255,255,0.1); } .wiki-meet-links-label { font-family: 'Cinzel', serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose); margin-bottom: 0.75rem; } .wiki-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .wiki-links-list li { color: var(--mod-text-secondary, #999); font-size: 0.92rem; } /* Boxed link item, matching BTW's own Links card style — transparent by default so it never clashes with whatever theme/background is active */ .wiki-link-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 10px; text-decoration: none; color: var(--mod-text-primary, #f0f0f0); background: transparent; border: 1px solid var(--mod-card-border, rgba(255,255,255,0.1)); transition: background 0.2s, border-color 0.2s, color 0.2s; } .wiki-link-item:hover { background: var(--mod-accent-bg, rgba(127, 168, 217, 0.1)); border-color: var(--violet); color: var(--violet); } .wiki-link-item .link-icon { font-size: 1rem; flex-shrink: 0; } .wiki-link-item .link-name { flex: 1; font-size: 0.88rem; } .wiki-link-item .link-arrow { font-size: 0.8rem; opacity: 0.5; } /* ── Tags — full-width row underneath both wiki-layout columns ── */ .wiki-tags-section { margin-bottom: 0; } .wiki-tags-title-row { display: flex; align-items: center; gap: 0.6rem; position: relative; } .wiki-tags-tip-icon { background: none; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; width: 20px; height: 20px; flex-shrink: 0; color: #999; font-size: 0.78rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: color 0.2s, border-color 0.2s; } .wiki-tags-tip-icon:hover { color: var(--violet); border-color: var(--violet); } .wiki-tags-tip-popover { position: absolute; top: 100%; left: 0; margin-top: 0.6rem; z-index: 20; width: min(480px, 90vw); background: #141018; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 1rem 1.15rem; box-shadow: 0 20px 60px rgba(0,0,0,0.6); color: #ccc; font-size: 0.82rem; line-height: 1.65; font-weight: 400; text-transform: none; letter-spacing: normal; } .wiki-tags-count { margin-left: auto; font-size: 0.78rem; color: #888; font-weight: 600; } .wiki-tags-wrap { position: relative; } .wiki-tags-display { display: flex; flex-wrap: wrap; gap: 0.5rem; max-height: 2.35rem; overflow: hidden; transition: max-height 0.3s ease; } .wiki-tags-display.expanded { max-height: 1000px; } .wiki-tags-empty { color: #888; font-size: 0.9rem; } .wiki-tags-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 2.35rem; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.15rem; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); background: linear-gradient(to bottom, transparent, rgba(13,13,13,0.6) 55%); border-radius: 0 0 8px 8px; } .wiki-tags-expand-btn { background: rgba(20,16,24,0.88); border: 1px solid rgba(255,255,255,0.18); color: #f0f0f0; font-size: 0.75rem; font-weight: 600; padding: 0.3em 0.9em; border-radius: 14px; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .wiki-tags-expand-btn:hover { border-color: var(--violet); color: var(--violet); } .wiki-tag-bubble { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(127,168,217,0.12); border: 1px solid rgba(127,168,217,0.3); color: #7fa8d9; border-radius: 20px; padding: 0.35em 0.9em; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: background 0.15s, border-color 0.15s; } a.wiki-tag-bubble:hover { background: rgba(127,168,217,0.22); border-color: rgba(127,168,217,0.55); } .wiki-tags-input-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 0.75rem; } .wiki-tag-bubble--editable { background: rgba(194,84,122,0.12); border-color: rgba(194,84,122,0.35); color: #c2547a; padding-right: 0.5em; } .wiki-tag-bubble-remove { background: none; border: none; color: inherit; cursor: pointer; font-size: 0.85rem; padding: 0; line-height: 1; opacity: 0.7; } .wiki-tag-bubble-remove:hover { opacity: 1; } .wiki-tags-input { flex: 1; min-width: 160px; background: none; border: none; outline: none; color: #f0f0f0; font-family: 'Inter', sans-serif; font-size: 0.88rem; padding: 0.3em 0; } .wiki-tags-input::placeholder { color: #777; } /* Side column — account box + nav box, stacked. Not sticky/position:fixed — stays where it's placed in the page and scrolls normally with the rest of the content instead of trailing the viewport. */ .wiki-side-col { display: flex; flex-direction: column; gap: 1.5rem; position: relative; } /* Account box — profile / login + link back to Between Two Worlds */ .mod-account-box { background: var(--mod-card-bg, #161616); border: 1px solid var(--mod-card-border, rgba(255,255,255,0.08)); border-top: 3px solid var(--violet); border-radius: 14px; padding: 1.25rem 1rem; } .mod-account-list { list-style: none; margin: 0 0 0.9rem; padding: 0; } .mod-account-list a.nav-login { color: var(--mod-text-primary, #f0f0f0) !important; } /* Side nav box — Home / Characters / Gallery / Chapters */ .mod-side-nav { background: var(--mod-card-bg, #161616); border: 1px solid var(--mod-card-border, rgba(255,255,255,0.08)); border-top: 3px solid var(--rose); border-radius: 14px; padding: 1.5rem 1rem; } .mod-side-nav-label { font-family: 'Cinzel', serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rose); margin: 0 0 0.9rem; padding: 0 0.5rem; } .mod-side-nav-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 0 0.5rem 0.9rem; } .mod-side-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .mod-side-nav-link { display: block; padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--mod-text-secondary, #aaa); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.02em; transition: background 0.15s, color 0.15s; } .mod-side-nav-link:hover { background: var(--mod-accent-bg, rgba(255,255,255,0.06)); color: var(--mod-text-primary, #fff); } .mod-side-nav-link.active { background: var(--mod-accent-bg, rgba(127, 168, 217, 0.15)); color: var(--violet); font-weight: 700; } /* ── Borrowed BTW templates (characters / chapters / gallery) ────────────── These pages intentionally keep BTW's own dark styling/fonts untouched — only the persistent account/nav side column (above) is added on top. */ /* Adds a 3rd column to BTW's characters page grid for the side column */ .chars-layout { grid-template-columns: 200px 1fr 220px; } /* Boxed "Explore the cast!" panel — same treatment as BTW's own character sidebar, just re-skinned to the dark blue/red mod-theme instead of gold. */ .chars-sidebar-label { font-family: 'Cinzel', serif; color: #f0f0f0; font-size: 0.72rem; } .chars-tab { color: #f0f0f0; border-radius: 8px; font-size: 1.02rem; padding: 0.65em 0.9em; } .chars-tab:hover { background: rgba(127,168,217,0.1); color: #a8c6e8; } .chars-tab.active { background: rgba(127,168,217,0.15); color: #f0f0f0; font-weight: 700; border-left-color: #7fa8d9; } /* "Create New Character" — owner-only, its own little boxed card sitting directly above "Explore the Cast", not squeezed inside it. */ .chars-sidebar-col { display: flex; flex-direction: column; gap: 1rem; } .chars-create-box { background: rgba(8,8,8,0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 1rem; } /* Same violet→rose gradient glow as the site's age-gate button (--violet/--rose get overridden to blue in mod-theme, so this uses the real brand colors explicitly rather than the theme variables). */ .chars-create-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; box-sizing: border-box; background: linear-gradient(135deg, #6b3fa0, #c2547a); border: none; border-radius: 10px; padding: 0.75em 0.9em; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.92rem; font-weight: 700; color: #fff; box-shadow: 0 0 16px rgba(107,63,160,0.5); transition: box-shadow 0.2s, transform 0.2s; } .chars-create-btn:hover { box-shadow: 0 0 26px rgba(107,63,160,0.75); transform: translateY(-1px); } .chars-create-btn-icon { font-size: 1.1rem; line-height: 1; } /* Edit box — same boxed-card treatment as "Create New Character", sitting right below it, but a blue accent instead of the violet→rose create gradient so the two read as distinct actions. */ .chars-create-btn--edit { background: linear-gradient(135deg, #3d6fa8, #7fa8d9); box-shadow: 0 0 16px rgba(127,168,217,0.5); } .chars-create-btn--edit:hover { box-shadow: 0 0 26px rgba(127,168,217,0.75); } .chars-create-btn--danger { background: linear-gradient(135deg, #a83d3d, #d97a72); box-shadow: 0 0 16px rgba(217,122,114,0.5); } .chars-create-btn--danger:hover { box-shadow: 0 0 26px rgba(217,122,114,0.75); } /* ── Character editor modal ── */ .char-editor-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(8,6,14,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; } .char-editor-modal { width: 100%; max-width: 880px; max-height: 88vh; overflow-y: auto; background: #141018; border: 1px solid rgba(127,168,217,0.25); border-radius: 18px; padding: 2.25rem 2.5rem; box-shadow: 0 30px 90px rgba(0,0,0,0.6); } .char-editor-title { font-family: 'Cinzel', serif; font-size: 1.6rem; color: #f0f0f0; margin-bottom: 1.75rem; } .char-editor-title.editor-title-glow { font-size: 2.1rem; color: #f7dda0; text-shadow: 0 0 18px rgba(240,192,96,0.65), 0 0 42px rgba(240,192,96,0.35); } /* Sits at the very top of the gallery editor, above the Media field — a loud, unmissable callout for "you're missing something required" instead of relying only on the small message near the Post button. */ .mod-error-banner { display: none; align-items: center; gap: 0.6rem; background: rgba(217,122,114,0.14); border: 1px solid rgba(217,122,114,0.5); border-radius: 10px; padding: 0.8rem 1rem; margin-bottom: 1.5rem; color: #f5b3ac; font-size: 0.9rem; font-weight: 700; } .mod-error-banner.show { display: flex; } .mod-error-banner-icon { flex-shrink: 0; font-size: 1.15rem; } .char-editor-ref-wrap { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1 / 1; margin: 0 auto 1.75rem; border-radius: 14px; overflow: hidden; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; cursor: pointer; } .char-editor-ref-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } .char-editor-ref-placeholder { color: #888; font-size: 0.88rem; text-align: center; padding: 1rem; } .char-editor-ref-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); color: #fff; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; opacity: 0; transition: opacity 0.2s; } .char-editor-ref-wrap:hover .char-editor-ref-overlay { opacity: 1; } .char-editor-facts-hint { color: #888; font-size: 0.75rem; margin-top: 0.6rem; margin-bottom: 1.25rem; } /* A more visible callout for helper tips (e.g. the artist-credit syntax) that would otherwise get lost as plain grey text under a field. */ .mod-tip-box { background: rgba(127,168,217,0.08); border: 1px solid rgba(127,168,217,0.25); border-radius: 8px; padding: 0.65rem 0.85rem; margin-top: 0.6rem; margin-bottom: 1.25rem; color: #aecbe8; font-size: 0.8rem; line-height: 1.5; } .char-editor-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; } /* Delete sits apart on the far left — Cancel/Save stay grouped on the right, so a destructive action is never adjacent to the safe ones. */ #char-editor-delete, #gallery-editor-delete, #chapter-editor-delete { margin-right: auto; } /* Small centered confirm dialog — replaces the native browser confirm() with something that matches the site instead of an OS-styled popup. */ .mod-confirm-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(8,6,14,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .mod-confirm-modal { width: 100%; max-width: 360px; background: #141018; border: 1px solid rgba(255,255,255,0.12); border-top: 3px solid #d97a72; border-radius: 16px; padding: 1.75rem; text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,0.6); } .mod-confirm-title { font-family: 'Cinzel', serif; font-size: 1.1rem; color: #fff; margin: 0 0 0.5rem; } .mod-confirm-text { color: #999; font-size: 0.88rem; margin: 0 0 1.5rem; } .mod-confirm-actions { display: flex; justify-content: center; gap: 0.75rem; } /* Generic Name | Link row — still used by the chapter editor's "link references" rows (Preview Name | Link). Character relationships used to share this too but now use the card layout below. */ .char-rel-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; } .char-rel-row-headings { margin-bottom: 0.35rem; } .char-rel-heading { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #999; } .char-rel-name-wrap { display: flex; gap: 0.35rem; } .char-rel-name-wrap .mod-input { flex: 1; min-width: 0; } .char-rel-link-btn { flex-shrink: 0; width: 34px; border-radius: 8px; border: 1px solid rgba(127,168,217,0.4); background: rgba(127,168,217,0.1); color: #7fa8d9; font-size: 1rem; font-weight: 700; cursor: pointer; } .char-rel-link-btn:hover { background: rgba(127,168,217,0.2); } .char-rel-link-btn.linked { border-color: #f0c060; background: rgba(240,192,96,0.15); color: #f0c060; } /* Relationship entries redesigned to match the "Link To" card-grid look — a square-ish card per relationship (linked-character avatar up top, the "+" badge on it opens the same character-link picker as before, then Name + Type fields stacked below) plus a big dashed "+ Add Relationship" tile as the first grid item, wrapping into multiple rows just like the gallery/story "Link To" sections. The permanent first card keeps an invisible (but space-reserving) remove badge so it lines up with the rest. */ .char-rel-card { position: relative; width: 152px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; background: #161616; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 0.85rem 0.7rem 0.7rem; } .char-rel-card-avatar-wrap { position: relative; flex-shrink: 0; } .char-rel-card-avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: block; background: #222; border: 1px solid rgba(255,255,255,0.15); } .char-rel-card-link-btn { position: absolute; bottom: -2px; right: -2px; width: 21px; height: 21px; border-radius: 50%; background: #1a1a1a; border: 1px solid rgba(127,168,217,0.5); color: #7fa8d9; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; line-height: 1; } .char-rel-card-link-btn.linked { background: rgba(240,192,96,0.2); border-color: #f0c060; color: #f0c060; } .char-rel-card-divider { width: 100%; height: 1px; background: rgba(255,255,255,0.12); border: none; margin: 0.15rem 0 0.05rem; } .char-rel-card-fields { width: 100%; display: flex; flex-direction: column; gap: 0.2rem; } .char-rel-card-fields .mod-input { font-size: 0.8rem; padding: 0.45em 0.5em; text-align: center; margin-bottom: 0.25rem; } .char-rel-card-field-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #f0c060; text-shadow: 0 0 10px rgba(240,192,96,0.5); text-align: center; } /* Extra breathing room above "Relation:" so it doesn't crowd the Name box sitting right above it. */ .char-rel-card-field-label:not(:first-child) { margin-top: 0.4rem; } .char-rel-card-remove { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: #d97a72; color: #fff; border: 2px solid #141018; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; padding: 0; } .char-rel-card-remove:hover { background: #c9645c; } .char-rel-add-tile { width: 152px; min-height: 176px; flex-shrink: 0; border-radius: 12px; background: rgba(255,255,255,0.03); border: 2px dashed rgba(255,255,255,0.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; color: #aaa; font-size: 0.8rem; font-weight: 700; cursor: pointer; text-align: center; padding: 0.5rem; font-family: 'Inter', sans-serif; transition: border-color 0.2s, color 0.2s, background 0.2s; } .char-rel-add-tile-icon { font-size: 1.8rem; line-height: 1; color: #f0c060; } .char-rel-add-tile:hover { border-color: #f0c060; color: #f0c060; background: rgba(240,192,96,0.07); } /* Link-picker mini-modal — sits on top of the character editor */ .char-link-picker-overlay { position: fixed; inset: 0; z-index: 320; background: rgba(8,6,14,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .char-link-picker-modal { width: 100%; max-width: 420px; max-height: 70vh; overflow-y: auto; background: #141018; border: 1px solid rgba(127,168,217,0.3); border-radius: 16px; padding: 1.5rem; box-shadow: 0 30px 90px rgba(0,0,0,0.6); } .char-link-picker-title { font-family: 'Cinzel', serif; font-size: 1.15rem; color: #f0f0f0; margin-bottom: 1rem; } .char-link-picker-empty { color: #999; font-size: 0.88rem; line-height: 1.6; text-align: center; padding: 1rem 0; } .char-link-picker-item { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 0.5rem 0.7rem; margin-bottom: 0.5rem; cursor: pointer; color: #f0f0f0; font-size: 0.9rem; } .char-link-picker-item:hover { border-color: #7fa8d9; background: rgba(127,168,217,0.08); } .char-link-picker-item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #333; flex-shrink: 0; } /* ── Relationship picker: "Characters You Own" / "Other Characters" tabs ── */ .char-link-picker-tabs { display: flex; gap: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); } .char-link-picker-tab { background: none; border: none; color: #999; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700; padding: 0 0 0.6rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .char-link-picker-tab:hover { color: #ccc; } .char-link-picker-tab.active { color: #f0c060; border-bottom-color: #f0c060; } .char-link-picker-scroll { max-height: 340px; overflow-y: auto; } /* Bigger "shopping list" style card — image + name + (for the Other tab) the owner's name, so two people's same-named characters are never ambiguous before you click one. */ .char-link-picker-item--big { display: flex; align-items: center; gap: 0.85rem; width: 100%; text-align: left; background: #161616; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 0.6rem 0.8rem; margin-bottom: 0.55rem; cursor: pointer; color: #f0f0f0; font-family: 'Inter', sans-serif; } .char-link-picker-item--big:hover { border-color: #7fa8d9; background: rgba(127,168,217,0.08); } .char-link-picker-item--big img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #333; flex-shrink: 0; } .char-link-picker-item-name { display: block; font-size: 0.92rem; font-weight: 700; } .char-link-picker-item-owner { display: block; font-size: 0.76rem; color: #999; margin-top: 0.15rem; } /* Toggle/multi-select state — used by the gallery editor's "Link To" story and character pickers, where clicking adds/removes instead of picking one and closing. */ .char-link-picker-item--big.selected { border-color: #f0c060; background: rgba(240,192,96,0.12); } .char-link-picker-item-check { margin-left: auto; width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: transparent; } .char-link-picker-item--big.selected .char-link-picker-item-check { background: #f0c060; border-color: #f0c060; color: #0d0d0d; } /* ── "Link To:" field on the gallery editor — a boxed panel split into "Stories" and "Characters" sections, each a grid of big square add-tiles and linked-item cards, so what's linked (and what kind it is) is obvious at a glance instead of buried in small pill chips. ── */ .gallery-linkto-box { background: rgba(240,192,96,0.05); border: 1px solid rgba(240,192,96,0.25); border-radius: 12px; padding: 1rem 1.1rem 1.1rem; margin-bottom: 1.5rem; } .gallery-linkto-box > label { display: block; font-size: 0.95rem; font-weight: 700; color: #f0c060; margin-bottom: 0.75rem; } /* Story-context gallery editor: instead of a "+ Story" picker (the post is already linked to this story by default), a bold note explains that and points to the account-level gallery editor for adding more / unlinking. */ .gallery-linkto-note { background: rgba(240,192,96,0.1); border: 1px solid rgba(240,192,96,0.35); border-radius: 10px; padding: 0.75rem 0.9rem; margin: 0 0 0.85rem; font-size: 0.85rem; font-weight: 700; color: #f7dda0; line-height: 1.5; } .gallery-linkto-section { margin-bottom: 1.1rem; } .gallery-linkto-section:last-child { margin-bottom: 0; } .gallery-linkto-section-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #999; margin: 0 0 0.65rem; } .gallery-linkto-section-note { text-transform: none; font-weight: 400; letter-spacing: normal; color: #777; margin-left: 0.4rem; } .gallery-linkto-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; } .gallery-linkto-add-tile { width: 104px; height: 132px; flex-shrink: 0; border-radius: 12px; background: rgba(255,255,255,0.03); border: 2px dashed rgba(255,255,255,0.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; color: #aaa; font-size: 0.78rem; font-weight: 700; cursor: pointer; text-align: center; padding: 0.5rem; font-family: 'Inter', sans-serif; transition: border-color 0.2s, color 0.2s, background 0.2s; } .gallery-linkto-add-tile-icon { font-size: 1.7rem; line-height: 1; color: #f0c060; } .gallery-linkto-add-tile:hover { border-color: #f0c060; color: #f0c060; background: rgba(240,192,96,0.07); } .gallery-linkto-card { position: relative; width: 104px; flex-shrink: 0; } .gallery-linkto-card-img { width: 104px; height: 104px; border-radius: 12px; object-fit: cover; display: block; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.14); } .gallery-linkto-card-name { margin: 0.4rem 0 0; font-size: 0.76rem; font-weight: 600; color: #ddd; text-align: center; line-height: 1.25; word-break: break-word; font-family: 'Inter', sans-serif; } .gallery-linkto-card-remove { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: #d97a72; color: #fff; border: 2px solid #141018; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; padding: 0; } .gallery-linkto-card-remove:hover { background: #c9645c; } /* Locked variant — the story-context editor's default story link, which can't be removed from here (only from the account-level gallery editor), so it gets a gold outline instead of a remove button. */ .gallery-linkto-card--locked .gallery-linkto-card-img { border-color: rgba(240,192,96,0.55); border-width: 2px; } /* ── Gallery post editor — category picker + consent checkbox ── */ /* Live crop preview for the gallery tile thumbnail — same 6:7 portrait ratio as .gallery-tile so what you see here matches what shows on the grid. */ .gallery-preview-crop-wrap { width: 150px; aspect-ratio: 6 / 7; border-radius: 10px; overflow: hidden; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1); } /* Deliberately NOT width/height:100%+object-fit:cover here — that's a leftover from the pre-Cropper.js slider version, and it fights with Cropper's own container-size measurement (it wraps/measures the raw img at its natural rendered box, so forcing a stretched/cropped box on the img itself makes Cropper's crop box come out mismatched with what's actually visible, like the modal's img wrap already gets right). */ .gallery-preview-crop-wrap img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } /* The crop box here is locked (non-resizable/non-movable) and always meant to cover the whole preview, so there's no reason to ever actually see it — the black .gallery-preview-crop-wrap box already shows the boundary. Several targeted attempts to hide just its border/grid/focus- ring kept leaving some part of it visibly mispositioned, so this just makes the entire crop box fully transparent instead. opacity (not display:none/visibility:hidden) is deliberate — a fully transparent element still receives pointer events, so drag-to-pan keeps working. */ .gallery-preview-crop-wrap .cropper-crop-box { opacity: 0 !important; } .gallery-cat-field { margin: 0.5rem 0 1.5rem; } .gallery-cat-label { font-size: 0.85rem; font-weight: 600; color: #ccc; margin: 0 0 0.5rem; } .gallery-cat-row { display: flex; gap: 0.6rem; } .gallery-cat-option { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.55em 0.5em; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); font-size: 0.88rem; font-weight: 600; color: #ccc; transition: background 0.2s, border-color 0.2s, color 0.2s; } .gallery-cat-option input { position: absolute; opacity: 0; width: 0; height: 0; } .gallery-cat-option:has(input:checked) { background: rgba(127,168,217,0.18); border-color: #7fa8d9; color: #fff; } .gallery-cat-option--spicy:has(input:checked) { background: rgba(217,122,114,0.2); border-color: #d97a72; color: #fff; } .gallery-consent-row { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; font-size: 0.85rem; color: #bbb; line-height: 1.55; margin-bottom: 1.25rem; background: rgba(217,122,114,0.08); border: 1px solid rgba(217,122,114,0.25); border-radius: 10px; padding: 0.85rem 1rem; } .gallery-consent-row input { margin-top: 0.2rem; width: 16px; height: 16px; flex-shrink: 0; } /* ── Gallery post detail page (reuses the site's .art-view-* classes from style.css so it "feels special" the same way the main gallery does). The profile page's Gallery tab reuses this exact same detail view, just under fp-prefixed ids — these rules were only ever written for the story-context ids, which is why the profile version looked smaller/ plainer despite using identical classes: no white-space:pre-line (so paragraph breaks in the description collapsed), no big image display, no top spacing. Every rule below is duplicated for both id sets. ── */ #gallery-detail-desc, #fp-gallery-detail-desc { white-space: pre-line; } /* Sized by WIDTH now, not viewport height — a max-height here meant most images hit that cap long before using the new wider column, and even a square/portrait piece couldn't reach full column width without also getting taller than the screen (impossible under a height cap). Per request, width wins: the image always fills the column at true, undistorted size, and a tall square/portrait piece just extends past the fold — scroll to see the rest — instead of shrinking to fit. */ #gallery-detail-view .art-view-image-wrap, #fp-gallery-detail-view .art-view-image-wrap { display: block; background: transparent; border: none; box-shadow: none; } #gallery-detail-view .art-view-image-wrap img, #fp-gallery-detail-view .art-view-image-wrap img { max-width: 100%; width: 100%; height: auto; border-radius: 16px; } #gallery-detail-view, #fp-gallery-detail-view { padding-top: 1.5rem; } #gallery-detail-view .art-view-back, #chapter-detail-view .art-view-back { color: #fff; border-color: #2fbf5f; background: #2fbf5f; font-size: 0.95rem; font-weight: 700; padding: 0.7em 1.6em; margin-top: 2.5rem; margin-bottom: 2.5rem; } #gallery-detail-view .art-view-back:hover, #chapter-detail-view .art-view-back:hover { color: #fff; border-color: #29a852; background: #29a852; } /* Edit sits right next to Back to Gallery instead of its own sidebar box — the row owns the vertical spacing the back button used to carry alone. */ #gallery-detail-view .art-view-back-row, #fp-gallery-detail-view .art-view-back-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 2.5rem; margin-bottom: 2.5rem; } #gallery-detail-view .art-view-back-row .art-view-back, #fp-gallery-detail-view .art-view-back-row .art-view-back { margin-top: 0; margin-bottom: 0; } .art-view-edit-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 700; padding: 0.7em 1.6em; border-radius: 24px; cursor: pointer; border: 1px solid rgba(127,168,217,0.5); background: rgba(127,168,217,0.15); color: #7fa8d9; transition: background 0.2s, border-color 0.2s; } .art-view-edit-btn:hover { background: rgba(127,168,217,0.25); } /* Character name + Stats/Facts/Lore labels — same gold glow BTW's own character pages use, bumped up a bit brighter per request. */ .char-name { color: #f0c060; font-weight: 700; text-shadow: 0 0 36px rgba(240,192,96,0.65), 0 1px 3px rgba(0,0,0,0.4); } .char-name-row { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.3rem; } .char-name-row .char-name { margin-bottom: 0; } /* Prev/Next slideshow nav under the Lore box — neither .char-lore-box nor the base .art-nav carry any margin between them, so the nav pill sat flush against the box above it. */ #char-detail-nav, #fp-char-detail-nav { margin-top: 2.25rem; } .char-box-title { color: #f0c060; font-weight: 700; text-shadow: 0 0 26px rgba(240,192,96,0.7); } .char-stat-label { color: #f0c060; font-weight: 700; text-shadow: 0 0 22px rgba(240,192,96,0.6); } /* Tiny square portrait next to a relationship's name, sized to the line of text it sits in rather than a fixed pixel size. Always shows something (falls back to the default placeholder) even for an unlinked relationship. */ .char-rel-avatar { width: 1.3em; height: 1.3em; border-radius: 4px; object-fit: cover; vertical-align: middle; margin-right: 0.35em; margin-top: -0.15em; background: #222; border: 1px solid rgba(255,255,255,0.15); display: inline-block; } .char-stat-value { color: #ccc; } .char-stat-row { border-bottom: 1px solid rgba(255,255,255,0.08); } /* Generic content + side-column row, used on the chapters & gallery pages */ .mod-page-row { position: relative; z-index: 1; max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: 1fr 220px; gap: 2rem; align-items: start; } /* Nudge the Navigate box down so it doesn't sit flush against the top of the page — matches how it naturally sits lower on the Characters page (offset by the create-box above it there). */ .mod-page-row .wiki-side-col { margin-top: 5.5rem; } /* Unboxed "fandom style" chapters list — no card, just heading + rule + list */ .mod-chapters-main { text-align: left; padding: 4rem 0; } .mod-chapters-main .hub-title { margin-bottom: 0.5rem; color: #f0f0f0; text-shadow: none; } .mod-chapters-main .chapters-list { text-align: left; margin-top: 1.5rem; } /* ── Chapter detail page (title + teaser + optional image on the left, "Where to Read!" links + PDF button on the right) ── */ .chapter-detail-view { text-align: left; padding: 3rem 0; } .chapter-detail-card { display: grid; grid-template-columns: 260px 1fr; gap: 2.75rem; align-items: start; } .chapter-detail-title { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: #f0c060; font-weight: 700; text-shadow: 0 0 30px rgba(240,192,96,0.55); margin: 0 0 0.85rem; line-height: 1.25; } .chapter-detail-teaser { color: #ccc; font-size: 0.98rem; line-height: 1.8; margin: 0 0 1.75rem; } .chapter-detail-image-wrap { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.6); background: #0d0d0d; } .chapter-detail-image-wrap img { width: 100%; display: block; } .chapter-detail-side-label { font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #999; margin: 0 0 1rem; } .chapter-detail-no-pdf { color: #888; font-size: 0.85rem; margin-top: 0.85rem; } #chapter-detail-pdf-btn { margin-left: 0; } #chapter-pdf-view { margin-top: 1.5rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; } #chapter-pdf-view .chapter-pdf-viewer { width: 100%; height: 75vh; min-height: 0; background: #fff; } /* PDF/Docx attach row in the chapter editor */ .chapter-doc-picker-row { display: flex; align-items: center; gap: 0.75rem; } .chapter-doc-picker-name { color: #999; font-size: 0.85rem; } @media (max-width: 760px) { .chapter-detail-card { grid-template-columns: 1fr; } } /* Unboxed gallery — no card, plain wiki-style sidebar (SFW/Spicy toggles) that just makes way for the card grid, MediaWiki-sidebar style */ .mod-gallery-main { display: grid; grid-template-columns: 200px 1fr; gap: 2.5rem; align-items: start; padding: 4rem 0; } .mod-gallery-sidebar-label { font-family: 'Cinzel', serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #f0c060; text-shadow: 0 0 12px rgba(240,192,96,0.4); margin: 0 0 0.9rem; } .mod-gallery-cat { display: block; width: 100%; text-align: left; background: none; border: none; border-left: 2px solid transparent; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,0.68); padding: 0.5em 0.6em; border-radius: 0 8px 8px 0; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s, text-shadow 0.15s; } .mod-gallery-cat:hover { background: rgba(127,168,217,0.1); color: #a8c6e8; text-decoration: none; } .mod-gallery-cat.active { color: #f0f0f0; font-weight: 700; background: rgba(127,168,217,0.15); border-left-color: #7fa8d9; } .mod-gallery-content { min-width: 0; } .mod-gallery-eyebrow { font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: #d97a72; margin-bottom: 0.4rem; } .mod-gallery-locked { grid-column: 1 / -1; padding: 2rem 0; } .mod-gallery-locked-icon { font-size: 1.8rem; margin-bottom: 0.75rem; } .mod-gallery-locked-title { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 700; color: #f0f0f0; margin-bottom: 0.5rem; } .mod-gallery-locked-text { color: #aaa; font-size: 0.92rem; line-height: 1.7; margin-bottom: 1.2rem; } .mod-gallery-locked-btn { color: #7fa8d9; font-weight: 600; text-decoration: underline; } /* ── Creator Panel ────────────────────────────────────────────────────────── */ .mod-panel-wrap { max-width: 900px; margin: 0 auto; padding: 3rem; } .mod-panel-title { font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 700; color: #f0f0f0; margin-bottom: 0.25rem; } .mod-panel-sub { color: #999; font-size: 0.9rem; margin-bottom: 2rem; } .mod-panel-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 2rem; } .mod-panel-tab { background: none; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.9rem; color: #999; padding: 0.6rem 0.9rem; border-bottom: 2px solid transparent; } .mod-panel-tab:hover { color: #f0f0f0; } .mod-panel-tab.active { color: #7fa8d9; border-bottom-color: #7fa8d9; font-weight: 700; } .mod-panel-section { display: none; } .mod-panel-section.active { display: block; } .mod-field { margin-bottom: 1.25rem; } .mod-field label { display: block; font-size: 0.8rem; font-weight: 600; color: #bbb; margin-bottom: 0.35rem; } .mod-field-label-standalone { font-size: 0.8rem; font-weight: 600; color: #bbb; margin-bottom: 0.35rem; } .mod-input, .mod-textarea, .mod-select { width: 100%; box-sizing: border-box; font-family: 'Inter', sans-serif; font-size: 0.9rem; padding: 0.55rem 0.7rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: #f0f0f0; background: #161616; } .mod-textarea { resize: vertical; min-height: 90px; } .mod-input:focus, .mod-textarea:focus, .mod-select:focus { outline: none; border-color: #7fa8d9; } .mod-btn { display: inline-block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem; padding: 0.5rem 1.1rem; border-radius: 20px; border: 1px solid #7fa8d9; color: #7fa8d9; background: none; cursor: pointer; transition: background 0.15s, color 0.15s; } .mod-btn:hover { background: #7fa8d9; color: #0a0a0a; } .mod-btn--danger { border-color: #d97a72; color: #d97a72; } .mod-btn--danger:hover { background: #d97a72; color: #0a0a0a; } .mod-btn--small { padding: 0.3rem 0.7rem; font-size: 0.75rem; } /* Bigger, easier-to-hit target than the default .mod-btn size, for Cancel specifically — it's the most-clicked "get me out of here" button on every create/edit screen. */ .mod-btn--cancel { padding: 0.75rem 1.6rem; font-size: 0.95rem; } /* ── Shared blurred full-bleed background, fixed behind everything — the exact same treatment as the Fanpage Hub, reused on the create/edit pages (character, gallery, story). Deliberately NOT named .fp-bg-wrap/ .fp-bg-img/.fp-bg-overlay — profile-template.html already defines its own classes with those exact names (a differently-designed wrapper that holds the whole page's content, not just a decorative background layer), and since it also loads this shared stylesheet, those names collided: this rule's z-index:-1 leaked onto the profile page's content wrapper and pushed the entire page behind everything, making it look broken. ── */ .mod-page-bg-wrap-static { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #0d0d0d; } .mod-page-bg-img-static { width: 100%; height: 100%; object-fit: cover; filter: blur(16px); transform: scale(1.08); opacity: 0.55; } .mod-page-bg-overlay-static { position: absolute; inset: 0; background: rgba(10,10,10,0.72); } .mod-panel-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .mod-panel-list-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.9rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: #161616; } .mod-panel-list-item span { font-size: 0.88rem; color: #f0f0f0; } .mod-panel-list-item .mod-panel-list-actions { display: flex; gap: 0.4rem; flex-shrink: 0; } .mod-panel-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .mod-panel-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); } .mod-panel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .mod-panel-thumb button { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 0.75rem; line-height: 1; } .mod-panel-msg { font-size: 0.85rem; margin-bottom: 1rem; } .mod-panel-msg--error { color: #d97a72; } .mod-panel-msg--success { color: #6fbf73; } .mod-required-star { color: #d97a72; font-weight: 700; } /* Momentary highlight on whichever field/box failed validation, so the error message isn't the only thing pointing at what needs fixing. */ .mod-input--flash-error { border-color: #d97a72 !important; box-shadow: 0 0 0 3px rgba(217,122,114,0.25); } @keyframes mod-flash-error { 0%, 100% { box-shadow: 0 0 0 3px rgba(217,122,114,0.25); } 50% { box-shadow: 0 0 0 5px rgba(217,122,114,0.4); } } .mod-input--flash-error { animation: mod-flash-error 0.6s ease-in-out 2; } .mod-stat-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; } /* ── Gallery post detail: bigger Like + Bookmark next to the title ── */ .art-view-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .art-view-like--big { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); border-radius: 24px; color: #ddd; font-size: 1.05rem; font-weight: 700; padding: 0.6rem 1.3rem; } .art-view-like--big:hover { color: #e06080; border-color: #e06080; background: rgba(224,96,128,0.08); } .art-view-like--big.liked { color: #e06080; border-color: #e06080; background: rgba(224,96,128,0.12); } .art-view-like--big:disabled, .art-view-bookmark-btn:disabled { opacity: 0.6; cursor: default; } .art-view-bookmark-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; box-sizing: border-box; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); color: #ddd; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s; } .art-view-bookmark-btn:hover { border-color: #7fa8d9; } .art-view-bookmark-btn.bookmarked { color: #7fa8d9; border-color: #7fa8d9; background: rgba(127,168,217,0.18); box-shadow: 0 0 14px rgba(127,168,217,0.6); } /* Twitter/X-style bookmark ribbon — outlined when not bookmarked, filled solid blue when it is. Shared by the story banner's bookmark button too. */ .art-view-bookmark-btn svg, .mod-bookmark-btn svg { width: 22px; height: 22px; display: block; } .art-view-bookmark-btn path, .mod-bookmark-btn path { fill: none; stroke: currentColor; stroke-width: 1.8; transition: fill 0.15s, stroke 0.15s; } .art-view-bookmark-btn.bookmarked path, .mod-bookmark-btn.bookmarked path { fill: currentColor; } /* Recrop shortcut — reopens the shared Cropper.js modal (see fanpages/crop-modal.js) on an already-uploaded image, without needing to pick a new file. Positioning is left to each page's own usage. */ .fp-recrop-btn { background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.3); border-radius: 14px; color: #fff; font-family: inherit; font-size: 0.66rem; font-weight: 600; padding: 0.28rem 0.6rem; cursor: pointer; transition: background 0.15s; } .fp-recrop-btn:hover { background: rgba(0,0,0,0.8); } /* ── Characters Featured / Relevant Stories — tagged content, living INSIDE the description box (separated from the description text by its own divider), not as a separate box below it. ── */ .art-view-tags-section { margin: 0; } .art-view-tags-hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 0 0 1.25rem; } .art-view-tags-label { font-family: 'Cinzel', Georgia, serif; font-size: 0.95rem; font-weight: 700; color: #f0c060; margin: 0 0 0.85rem; } .art-view-tags-empty { color: #888; font-size: 0.86rem; margin: 0 0 1.25rem; } .art-view-tags-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.5rem; } /* Rectangular card: portrait/cover on the left, name + species (or a synopsis snippet, for stories) on the right. */ .art-view-tag-card { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; width: 240px; flex-shrink: 0; padding: 0.6rem; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); transition: border-color 0.15s, background 0.15s; } .art-view-tag-card:hover { border-color: rgba(240,192,96,0.4); background: rgba(255,255,255,0.06); } .art-view-tag-card-imgwrap { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.12); background: #1a1a1a; } .art-view-tag-card-imgwrap--story { width: 48px; height: 64px; border-radius: 6px; } .art-view-tag-card-imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .art-view-tag-card-img--blurred { filter: blur(6px) brightness(0.6); transform: scale(1.1); } .art-view-tag-card-lock-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.5rem; font-weight: 700; color: #fff; text-align: center; padding: 0 0.2rem; text-shadow: 0 1px 3px rgba(0,0,0,0.9); } .art-view-tag-card-info { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .art-view-tag-card-name { font-size: 0.85rem; font-weight: 700; color: #f0f0f0; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .art-view-tag-card-sub { font-size: 0.74rem; color: #999; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Universal comment system — target_type/target_id based, reused across gallery posts now and Newspaper/Social later. One level of replies, "@username" prefix, avatar-card layout. ── */ .cc-section { margin-top: 0.5rem; } .cc-title { font-family: 'Cinzel', Georgia, serif; font-size: 1.1rem; font-weight: 700; color: #f0f0f0; margin-bottom: 1rem; } .cc-compose { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; } .cc-compose textarea { flex: 1; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; color: #f0f0f0; font-family: inherit; font-size: 0.9rem; padding: 0.6rem 0.8rem; resize: vertical; min-height: 44px; } .cc-compose textarea:focus { outline: none; border-color: #7fa8d9; } .cc-compose-btn { background: #f0c060; color: #0d0d0d; border: none; border-radius: 20px; padding: 0.55rem 1.2rem; font-weight: 700; font-size: 0.85rem; cursor: pointer; align-self: flex-end; white-space: nowrap; } .cc-compose-btn:hover { background: #e0b050; } .cc-compose-btn:disabled { opacity: 0.6; cursor: default; } .cc-list { display: flex; flex-direction: column; gap: 1.25rem; } .cc-item { display: flex; gap: 0.75rem; } .cc-avatar, .cc-avatar-fallback { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .cc-avatar-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7fa8d9, #d97a72); color: #fff; font-weight: 700; font-size: 1rem; } .cc-body-wrap { flex: 1; min-width: 0; } .cc-bubble { background: #161616; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 0.7rem 0.95rem; } .cc-name { font-weight: 700; font-size: 0.88rem; color: #f0f0f0; } .cc-name a { color: inherit; text-decoration: none; } .cc-name a:hover { text-decoration: underline; } .cc-time { color: #888; font-size: 0.72rem; margin-left: 0.5rem; } .cc-mention { color: #7fa8d9; font-weight: 700; } .cc-text { font-size: 0.88rem; color: #ddd; margin-top: 0.3rem; white-space: pre-line; word-break: break-word; } .cc-actions { display: flex; gap: 1rem; margin-top: 0.4rem; padding-left: 0.2rem; } .cc-action-btn { background: none; border: none; color: #888; font-size: 0.76rem; font-weight: 700; cursor: pointer; padding: 0; } .cc-action-btn:hover { color: #f0f0f0; } .cc-replies { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.9rem; padding-left: 1.5rem; border-left: 2px solid rgba(255,255,255,0.08); } .cc-reply-box { display: flex; gap: 0.6rem; margin-top: 0.7rem; } .cc-reply-box textarea { flex: 1; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: #f0f0f0; font-family: inherit; font-size: 0.85rem; padding: 0.5rem 0.7rem; resize: vertical; min-height: 38px; } .cc-empty { color: #888; font-size: 0.85rem; padding: 1rem 0; text-align: center; } /* ══════════════════════════════════════════════════════════════════════════ MOBILE — a first pass across every layout this stylesheet touches (story hub/characters/chapters/gallery pages, profile edit mode, the character/gallery editors, comments). Two tiers: 820px collapses the multi-column layouts to one column, 480px tightens padding/type further for phones. Loaded last, so these safely override the desktop rules above at matching widths — including .chars-layout/.mod-page-row, which otherwise clobber style.css's own mobile rules since this file loads after it unconditionally. ══════════════════════════════════════════════ */ @media (max-width: 820px) { /* Story hub/characters/chapters/gallery: side column (Navigate/Author/ Book box) drops below the main content instead of sitting beside it. */ .wiki-layout { grid-template-columns: 1fr; padding: 3rem 1.25rem 3rem; gap: 2rem; } .wiki-side-col { order: 2; } .chars-layout { grid-template-columns: 1fr !important; } .mod-page-row { grid-template-columns: 1fr; gap: 1.5rem; } .mod-page-row .wiki-side-col { margin-top: 0; order: 2; } .mod-gallery-main { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; } /* Banner shorter on mobile — 560px of a phone screen is most of the page. */ .wiki-cover { height: 320px; } .wiki-title { font-size: 1.8rem; } /* Quick-nav cards: keep the 2-up top row (they're small enough), but the centered single Gallery card can go full-width instead of half. */ .mod-quick-nav-row--single .mod-quick-nav-card { width: 100%; } .mod-quick-nav-row { gap: 1rem; } /* Cover no longer floats beside the description — stacks above it, centered, at a saner size than the desktop 220×330. */ .mod-cover-wrap { float: none; margin: 0 auto 1.25rem; width: 160px; height: 240px; } /* Bio | divider | links → stacked, divider becomes a horizontal rule. */ .wiki-meet-split { grid-template-columns: 1fr; gap: 1.5rem; } .wiki-meet-divider { display: none; } /* Edit bar: stop trying to fit "Currently editing…" + Delete + Save + Cancel on one line — wrap onto two instead of squeezing/overflowing. */ .mod-edit-bar { flex-wrap: wrap; height: auto; padding: 0.75rem 1rem; gap: 0.6rem; } .mod-edit-bar-actions { width: 100%; justify-content: flex-end; } body.mod-editing-active .wiki-cover { margin-top: 0 !important; } /* Editor: cards+cover row and the unified form box both go full-width, single column, same as the rest of the mobile story layout. */ body.mod-editing-active #editor-top-row { flex-direction: column; } body.mod-editing-active #editor-top-row .mod-quick-nav { width: 100%; } body.mod-editing-active #editor-top-row .mod-quick-nav-row { grid-template-columns: 1fr 1fr; } body.mod-editing-active .mod-cover-wrap { width: 160px; height: 240px; margin: 0 auto; } body.mod-editing-active .wiki-layout { max-width: 100%; } body.mod-editing-active .mod-editor-form-box { padding: 1.4rem 1.25rem 1.6rem; } /* Character editor / link-to modals: full-bleed instead of a fixed max-width card that can overflow a narrow screen. */ .char-editor-modal, .gallery-editor-modal { max-width: 100%; margin: 0 1rem; } /* Panel/admin pages: less padding, they're mostly forms. */ .mod-panel-wrap { padding: 1.5rem 1rem; } } @media (max-width: 520px) { .wiki-layout { padding: 2.25rem 1rem 2.5rem; } .wiki-cover { height: 240px; } .wiki-title { font-size: 1.5rem; } .mod-quick-nav-row { grid-template-columns: 1fr; gap: 0.75rem; } .mod-quick-nav-row--single { display: block; } .mod-quick-nav-row--single .mod-quick-nav-card { width: 100%; } .mod-cover-wrap, body.mod-editing-active .mod-cover-wrap { width: 135px; height: 202px; } .mod-edit-bar-left { flex-wrap: wrap; gap: 0.6rem; } body.mod-editing-active #editor-top-row .mod-quick-nav-row { grid-template-columns: 1fr; } .wiki-tags-editor, .wiki-tags-wrap { font-size: 0.9rem; } } /* ── Share button — small circular icon button used next to story/character titles, on profile header rows, and beside the gallery Bookmark button. Behavior lives in fanpages-nav.js (window.fpShare). ── */ .fp-share-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; box-sizing: border-box; flex-shrink: 0; background: transparent; border: 1px solid rgba(240,192,96,0.55); color: #f0f0f0; cursor: pointer; box-shadow: 0 0 10px rgba(240,192,96,0.35); transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s; } .fp-share-icon-btn:hover { border-color: #f0c060; color: #f0c060; background: rgba(240,192,96,0.08); box-shadow: 0 0 16px rgba(240,192,96,0.6); } .fp-share-icon-btn svg { width: 19px; height: 19px; display: block; } /* Compact "Copy link" pill popover — appears right over the share button, not a dropdown-style menu. */ .fp-share-popover { position: fixed; z-index: 600; background: #1e1e1e; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,0.55); padding: 0.25rem; animation: fpSharePopIn 0.14s ease-out both; } @keyframes fpSharePopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .fp-share-popover-item { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; background: none; border: none; cursor: pointer; color: #f0f0f0; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 0.75rem; border-radius: 7px; } .fp-share-popover-item svg { width: 16px; height: 16px; flex-shrink: 0; } .fp-share-popover-item:hover { background: rgba(255,255,255,0.08); } .fp-share-toast { position: fixed; bottom: 2rem; left: 50%; z-index: 999; transform: translateX(-50%) translateY(20px); background: #1a1a1a; border: 1px solid rgba(255,255,255,0.15); color: #f0f0f0; padding: 0.7rem 1.3rem; border-radius: 24px; font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; } .fp-share-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }