/* ================================================================= Social CMS — Web Theme Design tokens Ink: #1c2230 Paper: #f3f2ee Indigo: #1d3557 Marigold: #f4a300 (accent) Teal: #0f766e Success: #2a9d6f Danger: #d6455a Sidebar: dark navy, matching the touch theme's drawer for visual parity Display face: Manrope Body face: Inter Containment: on desktop (>=880px, permanent sidebar) the ENTIRE main column — top bar, page content, and footer together — is boxed to --content-max and centered in the space next to the sidebar, via a single constraint on .web-main. That means the top bar's background is boxed too, not just the text inside it, so the page reads as one contained unit with visible page background on both sides, not a full-width bar sitting above a narrower body. ================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600&display=swap'); :root { --ink: #1c2230; --ink-soft: #565d6e; --paper: #f3f2ee; --surface: #ffffff; --border: #e4e1d8; --indigo: #1d3557; --indigo-deep: #122438; --indigo-soft: #e7ecf3; --marigold: #f4a300; --marigold-deep: #c98300; --teal: #0f766e; --success: #2a9d6f; --danger: #d6455a; --sidebar-bg: #11151c; --sidebar-bg-soft: #1a202b; --sidebar-text: #cbd2e1; --topbar-bg: var(--surface); --radius: 5px; --shadow: 0 1px 2px rgba(28, 34, 48, .06), 0 8px 24px -12px rgba(28, 34, 48, .12); --shadow-sm: 0 1px 2px rgba(28, 34, 48, .06); --font-display: 'Manrope', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --sidebar-w: 268px; --content-max: 900px; --ease: cubic-bezier(.2, .7, .3, 1); } /* ---------- Dark mode — same tokens, dark-appropriate values ------------- */ /* Toggled by adding data-theme="dark" to (see the inline script at the top of , which applies the saved/preferred theme before first paint). */ html[data-theme="dark"] { --ink: #e7e9f0; --ink-soft: #9aa1b5; --paper: #14171e; --surface: #1c2029; --border: #2c313e; --indigo: #5a82bb; --indigo-deep: #6f93c6; --indigo-soft: #232a3a; --marigold: #f4a300; --marigold-deep: #ffb733; --teal: #2dd4bf; --success: #34d399; --danger: #f87171; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --topbar-bg: var(--surface); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--marigold); color: #fff; } /* ---------- Site icons: one unified accent colour ---------- */ .icon-ui { color: var(--marigold); } .verified-badge { color: #3897f0; font-size: .82em; vertical-align: middle; } /* Online-count badge variant (green, vs. the red unread-count badge) */ .mail-badge.badge-online { background: var(--success); } /* Neutral badge variant for informational totals (not unread/action-needed) */ .mail-badge.badge-neutral { background: var(--ink-soft); } /* ---------- Shared AJAX upload progress bar (see public/assets/ajax-upload.js) ---------- The bar is absolutely positioned along the form's top edge — deliberately NOT relying on the parent form being display:flex (order/flex-basis tricks silently do nothing if a form ever ends up as block/grid instead, which is exactly how this went invisible before). Any form with data-ajax-upload becomes a positioning context via the attribute selector below, so this works no matter what layout the form itself uses. */ form[data-ajax-upload] { position: relative; } .ajax-upload-bar { display: none; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--border); border-radius: var(--radius, 5px) var(--radius, 5px) 0 0; overflow: hidden; z-index: 5; } .ajax-upload-bar.is-active { display: block; } .ajax-upload-bar-fill { height: 100%; width: 0; background: var(--marigold); transition: width .2s ease; } .ajax-upload-error { display: none; width: 100%; flex: 1 1 100%; order: -1; font-size: .82rem; font-weight: 600; color: var(--danger); margin-bottom: .65rem; padding: .5rem .7rem; background: color-mix(in srgb, var(--danger) 10%, transparent); border-radius: var(--radius, 5px); } .ajax-upload-error.is-visible { display: block; } /* ---------- Live notification toast (see notifications-poll.js) ---------- */ .notif-toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .6rem; max-width: 340px; width: calc(100% - 2rem); } .notif-toast { display: flex; align-items: flex-start; gap: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 5px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.3); padding: .75rem 1.6rem .75rem .8rem; text-decoration: none; color: var(--ink); opacity: 0; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease; position: relative; } .notif-toast.is-visible { opacity: 1; transform: translateY(0); } .notif-toast-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--marigold) 16%, white); color: var(--marigold); display: flex; align-items: center; justify-content: center; font-size: .85rem; } .notif-toast-thumb { flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px; overflow: hidden; } .notif-toast-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .notif-toast-text { font-size: .86rem; line-height: 1.4; color: var(--ink); } .notif-toast-close { position: absolute; top: .35rem; right: .45rem; border: none; background: none; color: var(--ink-soft); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .2rem; border-radius: 4px; } .notif-toast-close:hover { color: var(--ink); background: var(--paper); } @media (max-width: 480px) { .notif-toast-stack { top: auto; bottom: 1rem; right: .75rem; left: .75rem; max-width: none; width: auto; } } /* ---------- Badge unlock toast (see badge-toast.js) — celebratory variant of the notification toast: top-center, badge-colored accent border, a little taller. ---------- */ .badge-toast-stack { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: .6rem; align-items: center; max-width: 340px; width: calc(100% - 2rem); } .badge-toast { display: flex; align-items: center; gap: .7rem; width: 100%; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--badge-color, var(--marigold)); border-radius: var(--radius, 5px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); padding: .7rem 1.6rem .7rem .8rem; text-decoration: none; color: var(--ink); opacity: 0; transform: translateY(-14px) scale(.97); transition: opacity .25s ease, transform .25s ease; position: relative; } .badge-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); } .badge-toast-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--badge-color, var(--marigold)) 18%, white); color: var(--badge-color, var(--marigold)); display: flex; align-items: center; justify-content: center; font-size: 1rem; } .badge-toast-text { font-size: .85rem; line-height: 1.35; color: var(--ink); } .badge-toast-text strong { color: var(--badge-color, var(--marigold)); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; } .badge-toast-close { position: absolute; top: .35rem; right: .45rem; border: none; background: none; color: var(--ink-soft); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .2rem; border-radius: 4px; } .badge-toast-close:hover { color: var(--ink); background: var(--paper); } @media (max-width: 480px) { .badge-toast-stack { max-width: none; width: calc(100% - 1.5rem); } } /* ---------- "Liked by" avatar strip (see public/_like_avatars.php) ---------- */ .like-avatars { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--ink-soft); } .like-avatars-stack { display: inline-flex; } .like-avatars-item { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--surface); background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .55rem; font-weight: 800; margin-left: -8px; } .like-avatars-item:first-child { margin-left: 0; } .like-avatars-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .like-avatars-item.is-online { box-shadow: none; } .like-avatars-count { font-size: .82rem; font-weight: 600; } .like-avatars:hover .like-avatars-count { color: var(--indigo); text-decoration: underline; } /* ---------- Hashtags, @mentions, and auto-linked URLs in post bodies (see TextFormatter) ---------- */ .post-hashtag, .post-mention { color: var(--indigo); font-weight: 700; text-decoration: none; } .post-hashtag:hover, .post-mention:hover { text-decoration: underline; } .post-link { color: var(--indigo); text-decoration: underline; word-break: break-word; } .post-link:hover { color: var(--indigo-deep); } :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; } h1, h2, h3 { font-family: var(--font-display); margin: 0 0 .5rem; font-weight: 800; letter-spacing: -.01em; } h1 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem); } h3 { font-size: 1.05rem; font-weight: 700; } p { margin: 0 0 .75rem; } a { color: var(--indigo); text-decoration: none; transition: color .15s var(--ease); } a:hover { color: var(--indigo-deep); } .muted { color: var(--ink-soft); font-size: .92rem; } /* ---------- Overall shell ---------- */ .web-shell { display: flex; min-height: 100vh; } .web-main { flex: 1; min-width: 0; } /* ---------- Sidebar ---------- */ .web-sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; transform: translateX(-100%); transition: transform .22s var(--ease); overflow-y: auto; } .web-sidebar.is-open { transform: translateX(0); } .web-sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); } .web-sidebar-overlay.is-visible { opacity: 1; pointer-events: auto; } /* ---------- Hero panel ---------- */ .web-sidebar-hero { padding: 1.25rem 1.25rem 1rem; background: linear-gradient(160deg, var(--indigo) 0%, var(--indigo-deep) 100%); text-align: center; } .web-hero-avatar { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto .5rem; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; border: 2px solid rgba(255,255,255,.25); overflow: hidden; transition: border-color .15s var(--ease), transform .15s var(--ease); } .web-hero-avatar:hover { border-color: var(--marigold); transform: scale(1.05); } .web-hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .web-hero-name { color: #fff; font-weight: 700; font-size: .95rem; } .web-hero-username { color: rgba(255,255,255,.65); font-size: .78rem; margin-bottom: .4rem; } .web-hero-level { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: rgba(244,163,0,.18); color: var(--marigold); padding: .18rem .55rem; border-radius: 999px; } .web-hero-guest .brand-dot { display: inline-block; margin-bottom: .5rem; } .web-hero-guest h3 { color: #fff; font-size: .98rem; margin-bottom: 1rem; } .web-hero-guest-note { color: rgba(255,255,255,.65); font-size: .82rem; margin: 0; } .web-hero-login-form { display: flex; flex-direction: column; gap: .55rem; } .web-hero-login-form input[type=text], .web-hero-login-form input[type=password] { padding: .6rem .7rem; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: rgba(255,255,255,.08); color: #fff; font-size: .88rem; font-family: var(--font-body); transition: background .15s var(--ease), border-color .15s var(--ease); } .web-hero-login-form input::placeholder { color: rgba(255,255,255,.5); } .web-hero-login-form input:focus { outline: 2px solid var(--marigold); outline-offset: 1px; background: rgba(255,255,255,.12); } .web-hero-remember { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: rgba(255,255,255,.7); font-weight: 400; } .web-hero-register { margin-top: .9rem; font-size: .82rem; color: rgba(255,255,255,.65); } .web-hero-register a { color: var(--marigold); font-weight: 600; } .web-hero-register a:hover { color: var(--marigold-deep); } /* ---------- Weather panel (sidebar, compact, full width) ------------- */ .sw-panel { padding: .55rem 1.25rem; background: rgba(255,255,255,.025); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); } .sw-display { display: flex; align-items: center; gap: .5rem; } .sw-display-link { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; text-decoration: none; } .sw-icon { font-size: .95rem; color: var(--marigold); flex-shrink: 0; width: 1.2em; text-align: center; } .sw-temp { font-size: .88rem; font-weight: 800; color: #fff; font-family: var(--font-display); flex-shrink: 0; } .sw-meta { display: flex; align-items: baseline; gap: .3rem; min-width: 0; flex: 1; } .sw-city { font-size: .78rem; font-weight: 700; color: var(--sidebar-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sw-cond { font-size: .7rem; color: rgba(203,210,225,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sw-edit-btn { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: none; background: none; color: rgba(203,210,225,.55); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .68rem; transition: background .12s ease, color .12s ease; } .sw-edit-btn:hover { background: rgba(255,255,255,.08); color: #fff; } .wc-widget { display: flex; align-items: center; gap: .5rem; text-decoration: none; transition: background .12s ease; } .wc-widget:hover { background: rgba(255,255,255,.045); } .wc-icon { color: #3ba55d; } .wc-live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #e5484d; margin-right: .2rem; animation: wc-pulse 1.4s ease-in-out infinite; } @keyframes wc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .sw-search-row { display: flex; align-items: center; gap: .5rem; } .sw-search-row i { color: var(--marigold); font-size: .8rem; flex-shrink: 0; } .sw-search-row input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: #fff; font-family: inherit; font-size: .78rem; padding: .15rem 0; } .sw-search-row input::placeholder { color: rgba(203,210,225,.5); } .sw-suggestions { margin-top: .4rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: .35rem; display: flex; flex-direction: column; gap: .1rem; max-height: 160px; overflow-y: auto; } .sw-suggestion { text-align: left; padding: .35rem .45rem; border: none; background: none; border-radius: 6px; color: var(--sidebar-text); font-size: .75rem; cursor: pointer; } .sw-suggestion:hover { background: rgba(255,255,255,.08); color: #fff; } .sw-remove-btn { display: flex; align-items: center; gap: .35rem; margin-top: .4rem; padding: 0; border: none; background: none; color: rgba(214,69,90,.85); font-size: .7rem; font-weight: 600; cursor: pointer; } .sw-remove-btn:hover { color: var(--danger); text-decoration: underline; } /* ---------- Sidebar nav ---------- */ .web-sidebar-nav { display: flex; flex-direction: column; padding: .5rem 0; flex: 1; } .web-sidebar-nav a { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; color: var(--sidebar-text); font-weight: 600; font-size: .92rem; border-right: 3px solid transparent; transition: background .15s var(--ease), color .15s var(--ease); } .web-sidebar-nav a span:first-child { width: 20px; text-align: center; } .web-sidebar-nav a:hover { background: rgba(255,255,255,.04); color: #fff; } .web-sidebar-nav a.is-active { background: var(--sidebar-bg-soft); color: #fff; border-right-color: var(--marigold); } .web-sidebar-nav a.nav-disabled { color: #4d5469; } .web-sidebar-nav a.nav-disabled:hover { background: none; color: #4d5469; } .web-sidebar-nav a.nav-disabled em { margin-left: auto; font-size: .68rem; font-style: normal; background: rgba(255,255,255,.06); padding: .1rem .4rem; border-radius: 999px; } .web-sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); padding: .5rem 0 1rem; } .web-sidebar-footer a { display: block; padding: .55rem 1.25rem; color: var(--sidebar-text); font-size: .85rem; transition: color .15s var(--ease); } .web-sidebar-footer a:hover { color: #fff; } /* ---------- Mini music player (sidebar) — lives here, not in music.css, since the markup is in the sidebar on every page, not just music ones. ---- */ .music-mini-player { display: none; flex-direction: column; gap: .4rem; padding: .6rem .75rem; margin: .3rem .5rem; border-radius: var(--radius, 5px); background: rgba(255,255,255,.06); } .music-mini-player.is-active { display: flex; } .music-mini-player-track { display: flex; align-items: center; gap: .5rem; min-width: 0; } .music-mini-player-cover { flex-shrink: 0; width: 34px; height: 34px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-size: .75rem; } .music-mini-player-cover img { width: 100%; height: 100%; object-fit: cover; } .music-mini-player-info { min-width: 0; display: flex; flex-direction: column; gap: .05rem; } .music-mini-player-title { font-size: .78rem; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .music-mini-player-artist { font-size: .68rem; color: rgba(255,255,255,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .music-mini-player-controls { display: flex; align-items: center; justify-content: center; gap: .5rem; } .music-mini-player-controls button { background: none; border: none; color: rgba(255,255,255,.85); cursor: pointer; font-size: .95rem; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .music-mini-player-controls .icon-ui { color: inherit; } .music-mini-player-controls button:hover { background: rgba(255,255,255,.1); } .music-mini-player-controls .music-mini-player-play { background: var(--marigold, #f4a300); color: #1a1a1a; width: 34px; height: 34px; font-size: 1rem; } .music-mini-player-play .music-mini-player-play-icon, .music-mini-player-play .music-mini-player-pause-icon { color: #1a1a1a; } .music-mini-player-pause-icon { display: none; } .music-mini-player-play.is-playing .music-mini-player-play-icon { display: none; } .music-mini-player-play.is-playing .music-mini-player-pause-icon { display: inline; } .music-mini-player-progress { width: 100%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.15); cursor: pointer; position: relative; overflow: hidden; } .music-mini-player-progress-fill { height: 100%; background: var(--marigold, #f4a300); width: 0%; border-radius: 4px; } .music-mini-player-live-badge { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: var(--danger); color: #fff; padding: .1rem .4rem; border-radius: 3px; flex-shrink: 0; } /* ---------- Music track row — global since shared-track feed cards render on pages (homepage, profile) that don't load music.css ---------- */ .music-track-list { display: flex; flex-direction: column; gap: .2rem; } .music-track-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .4rem; border-radius: var(--radius, 5px); cursor: pointer; transition: background-color .12s ease; } .music-track-row:hover { background: var(--paper); } .music-track-row.is-playing { background: color-mix(in srgb, var(--indigo) 8%, var(--surface)); } .music-track-play-btn { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; } .music-track-row.is-playing .music-track-play-btn { background: var(--marigold, #f4a300); } /* .icon-ui sets a global marigold icon color — invisible against this same marigold is-playing background. Force these two specific icons white. */ .music-track-play-btn .music-track-play-icon, .music-track-play-btn .music-track-pause-icon { color: #fff; } .music-track-pause-icon { display: none; } .music-track-row.is-playing .music-track-play-icon { display: none; } .music-track-row.is-playing .music-track-pause-icon { display: inline; } .music-track-cover { flex-shrink: 0; width: 36px; height: 36px; border-radius: 5px; overflow: hidden; background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: .8rem; } .music-track-cover img { width: 100%; height: 100%; object-fit: cover; } .music-track-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; } .music-track-info strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .music-track-title-link { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .music-track-title-link:hover strong { text-decoration: underline; } .music-track-sub { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .music-track-duration { font-size: .74rem; flex-shrink: 0; } .music-track-menu-btn { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: none; background: none; cursor: pointer; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; font-size: .75rem; } .music-track-menu-btn:hover { background: var(--border); color: var(--indigo); } .music-share-card { margin: .5rem 0; background: var(--paper); } /* ---------- Top bar (brand + drawer toggle only — nav lives in the sidebar now) ---------- */ .topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .topbar-inner { padding: .75rem clamp(1rem, 3vw, 1.25rem); display: flex; align-items: center; gap: .85rem; } .topbar-actions { display: flex; align-items: center; gap: .2rem; margin-left: auto; flex-shrink: 0; } .brand { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--indigo); display: flex; align-items: center; gap: .5rem; } .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--marigold); box-shadow: 0 0 0 3px rgba(244, 163, 0, .18); } .web-sidebar-toggle { background: none; border: none; width: 38px; height: 38px; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; transition: background .15s var(--ease); } .web-sidebar-toggle:hover { background: var(--paper); } .hamburger, .hamburger::before, .hamburger::after { content: ''; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; } .hamburger { position: relative; } .hamburger::before { position: absolute; top: -6px; } .hamburger::after { position: absolute; top: 6px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 600; font-size: .82rem; padding: .3rem .7rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform .05s var(--ease), background .15s var(--ease), border-color .15s var(--ease); } .btn-sm { padding: .3rem .7rem; font-size: .82rem; } .btn-block { display: flex; width: 100%; } .btn-primary { background: var(--indigo); color: #fff; } .btn-primary:hover { background: var(--indigo-deep); } .btn-ghost { background: transparent; color: var(--indigo); border-color: var(--border); } .btn-ghost:hover { background: var(--paper); } .btn:active { transform: scale(.98); } /* ---------- Pagination (shared by every paginated list site-wide) ---------- */ .pagination { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: 1.75rem 0 .5rem; flex-wrap: wrap; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 .55rem; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); font-weight: 700; font-size: .88rem; text-decoration: none; transition: background .15s var(--ease, ease), color .15s var(--ease, ease), border-color .15s var(--ease, ease), transform .1s var(--ease, ease); } .pagination a:hover { border-color: var(--indigo); color: var(--indigo); background: var(--indigo-soft, var(--paper)); transform: translateY(-1px); } .pagination a:active { transform: translateY(0); } .pagination a.is-active { background: linear-gradient(135deg, var(--indigo), var(--indigo-deep)); border-color: var(--indigo); color: #fff; box-shadow: 0 4px 14px -6px rgba(79,70,229,.55); } .pagination-ellipsis { border: none; background: none; color: var(--ink-soft); font-weight: 700; cursor: default; } .pagination-arrow { font-size: 1.05rem; font-weight: 800; } .pagination-arrow.is-disabled { opacity: .32; pointer-events: none; } /* ---------- Layout / cards ---------- */ .page-content { max-width: 900px !important; margin: 0 auto; padding: clamp(.35rem, .25rem + .5vw, .6rem) clamp(.3rem, .2rem + .5vw, .5rem) .85rem; width: 100%; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; margin-bottom: 1.5rem; } .welcome-card { background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 100%); color: #fff; border: none; } .welcome-card h1 { color: #fff; } .welcome-card .muted { color: rgba(255,255,255,.72); } /* ---------- Compact page-head card (icon + title + count) — shared by every module's index page: Saved posts, Downloads, Forum, Blog, Community. */ .page-head-card { display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; margin-bottom: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .page-head-card-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--indigo-soft, var(--paper)); color: var(--indigo); font-size: .8rem; } .page-head-card h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--ink); } .page-head-card h1 .muted { font-weight: 600; font-size: .85rem; } .page-head-card-action { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--border); background: var(--paper); color: var(--indigo); font-size: .78rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .page-head-card-action:hover { background: var(--indigo-soft, var(--paper)); } .page-head-card .page-add-btn { margin-left: auto; width: 26px; height: 26px; background: none; box-shadow: none; color: var(--indigo); font-size: .82rem; } .page-head-card .page-add-btn:hover { background: var(--paper); } .page-head-card .page-add-btn:active { background: var(--paper); } body.touch-theme .page-head-card { padding: .5rem .65rem; gap: .45rem; } body.touch-theme .page-head-card-icon { width: 25px; height: 25px; font-size: .74rem; } body.touch-theme .page-head-card h1 { font-size: .88rem; } body.touch-theme .page-head-card-action { font-size: .72rem; padding: .26rem .55rem; } /* Merges the page-head-card with the module's filter subnav directly beneath it into a single card — see downloads/forum/blog/community/members index.php. */ .page-head-group { margin-bottom: 1.25rem; border-radius: var(--radius); overflow: hidden; } .page-head-group .page-head-card { margin-bottom: 0; border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; } .page-head-group .dl-subnav, .page-head-group .fo-subnav, .page-head-group .bg-subnav, .page-head-group .cm-subnav, .page-head-group .members-subnav, .page-head-group .music-subnav, .page-head-group .fr-subnav, .page-head-group .bk-subnav { margin-bottom: 0; border: none; border-radius: 0; } .btn-row { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; } /* Section tiles on the homepage are now styled by public/assets/home.css. .badge-soon / .badge-live remain here since other pages reference them. */ .badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; } .badge-soon { background: rgba(244,163,0,.14); color: var(--marigold-deep); } .badge-live { background: rgba(42,157,111,.14); color: var(--success); } /* ---------- Forms ---------- */ .form { display: flex; flex-direction: column; gap: .35rem; } .form label { font-size: .85rem; font-weight: 600; margin-top: .5rem; } .form input[type=text], .form input[type=email], .form input[type=password], .form input[type=number], .form input[type=tel], .form input[type=search], .form input[type=url], .form input[type=date], .form input[type=datetime-local], .form input[type=time], .form input[type=month], .form input[type=week] { font-family: var(--font-body); font-size: .95rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); transition: border-color .15s var(--ease); } .form input:focus { outline: 2px solid var(--marigold); outline-offset: 1px; } /* Native file inputs default to the plain OS-styled "Choose Files" button — restyle just the button part via ::file-selector-button (well-supported across current browsers) to match the site's own buttons, no extra wrapper markup or JS needed. */ input[type=file] { display: block; font-family: var(--font-body); font-size: .85rem; color: var(--ink-soft); padding: .4rem 0; } /* The browser's default stylesheet hides [hidden] elements via display:none — our own explicit "display: block" above has enough specificity to override that default, which was un-hiding file inputs deliberately hidden behind a styled label trigger (e.g. the comment composer's attach button). Restore the hidden behavior explicitly rather than relying on the browser default. */ input[type=file][hidden] { display: none; } input[type=file]::file-selector-button { font-family: var(--font-body); font-weight: 700; font-size: .82rem; padding: .5rem 1rem; margin-right: .85rem; border: none; border-radius: var(--radius); background: var(--indigo); color: #fff; cursor: pointer; transition: background .15s var(--ease), transform .05s var(--ease); } input[type=file]::file-selector-button:hover { background: var(--indigo-deep); } input[type=file]::file-selector-button:active { transform: scale(.97); } .form select { font-family: var(--font-body); font-size: .95rem; padding: .65rem 2.2rem .65rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--paper); color: var(--ink); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235b6275' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 12px 8px; cursor: pointer; transition: border-color .15s var(--ease); } .form select:focus { outline: 2px solid var(--marigold); outline-offset: 1px; } .form select:hover { border-color: color-mix(in srgb, var(--indigo) 35%, var(--border)); } .dob-select-row { display: flex; gap: .5rem; } .dob-select-row select { flex: 1 1 0; min-width: 0; padding-left: .5rem; padding-right: 1.8rem; } .dob-select-row select:nth-child(2) { flex-grow: 1.6; } .checkbox-row { display: flex; align-items: center; gap: .5rem; font-weight: 500; } .form button { margin-top: 1rem; } .auth-card { max-width: 420px; margin: 1rem auto; } .auth-oauth-buttons { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; } .auth-oauth-btn { display: flex; align-items: center; justify-content: center; gap: .55rem; font-weight: 700; } .auth-oauth-btn i { font-size: 1.05rem; } .auth-oauth-btn-google i { color: #ea4335; } .auth-oauth-btn-facebook i { color: #1877f2; } .auth-oauth-btn-x i { color: var(--ink); } .auth-oauth-divider { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; color: var(--ink-soft); font-size: .8rem; } .auth-oauth-divider::before, .auth-oauth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .captcha-box { display: flex; align-items: center; justify-content: center; gap: .3rem; background: var(--paper); border: 1px dashed var(--border); border-radius: var(--radius); padding: .7rem 1rem; margin: .3rem 0 .6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: .3em; color: var(--ink); -webkit-user-select: none; user-select: none; } .auth-links { display: flex; justify-content: space-between; margin-top: 1.25rem; font-size: .88rem; flex-wrap: wrap; gap: .5rem; } /* Compact, bordered-accent alert used for every flash/confirmation message site-wide (flash()/Session::flash() renders these). A left-color-bar + tinted background reads as more intentional than a flat wash, and a lightweight symbol works as the "icon" without depending on whatever Font Awesome delivery/version happens to be loaded (a content: injection referencing the icon font by name is one guess away from silently not rendering). Auto-dismiss/close-button behavior lives in assets/alert-dismiss.js, loaded on every page. */ .alert { display: flex; align-items: flex-start; gap: .5rem; padding: .55rem .7rem; border-radius: 7px; font-size: .84rem; line-height: 1.4; margin-bottom: .85rem; border-left: 3px solid transparent; animation: alertIn .2s ease; } .alert-close { margin-left: auto; flex-shrink: 0; background: none; border: none; cursor: pointer; color: inherit; opacity: .5; font-size: .85rem; padding: 0; line-height: 1.4; } .alert-close:hover { opacity: .9; } .alert-error { background: rgba(214,69,90,.1); color: #9c2436; border-left-color: #d6455a; } .alert-error::before { content: "✕"; flex-shrink: 0; font-weight: 700; margin-top: .05rem; } .alert-success { background: rgba(42,157,111,.12); color: #1d6f4d; border-left-color: #2a9d6f; } .alert-success::before { content: "✓"; flex-shrink: 0; font-weight: 700; margin-top: .05rem; } .alert-info { background: rgba(90,130,187,.12); color: #345580; border-left-color: #5a82bb; } .alert-info::before { content: "ℹ"; flex-shrink: 0; font-weight: 700; margin-top: .05rem; } @keyframes alertIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); margin-top: 2rem; } .site-footer-inner { max-width: 900px; margin: 0 auto; padding: 1.25rem clamp(1rem, 3vw, 1.25rem); display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between; font-size: .85rem; color: var(--ink-soft); } .site-footer-visits { display: inline-flex; align-items: center; gap: .35rem; } .site-footer-ad { max-width: 900px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 1.25rem) 1.25rem; text-align: center; } /* ---------- Responsive --------------------------------------------- Sidebar becomes permanent (no drawer) at 880px+. At that point the whole shell (sidebar + main column together, ~1164px total) is centered as one unit on the screen — sidebar and content stay attached to each other with no gap between them, but the combined block now floats in the middle of the browser window with even empty space on both the left and right, instead of being pinned to the left edge. Below 880px the sidebar is an off-canvas drawer that slides in from the true screen edge, and the main column uses the full available width, which is standard for a mobile-width layout. -------------------------------------------------------------------- */ @media (min-width: 880px) { .web-shell { max-width: 1164px; margin: 0 auto; } .web-sidebar { position: -webkit-sticky; position: sticky; height: 100vh; transform: none; } .web-sidebar-overlay { display: none; } .web-sidebar-toggle { display: none; } .topbar, .page-content, .site-footer { max-width: 900px !important; } .page-content { overflow-x: hidden !important; overflow-y: visible !important; } } @media (max-width: 879px) { .web-sidebar-toggle { display: flex; } } @media (max-width: 720px) { .card { padding: 1.35rem; border-radius: var(--radius); } h1 { font-size: 1.4rem; } } @media (max-width: 480px) { .card { padding: 1.1rem; } .btn-row { gap: .5rem; } .auth-links { flex-direction: column; gap: .4rem; } } /* ---------- Topbar profile avatar (matches the touch theme's app-bar avatar) ---------- */ /* ---------- Online status indicator (site-wide) --------------------- Applied via JS (assets/online-status.js) to any element carrying a data-user-id attribute that matches a currently-online user. Box-shadow rather than border, so it never changes the element's box size/layout regardless of which avatar size/context it's used in across the site. */ .is-online { box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 4px var(--success); border-radius: 50%; } .avatar-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; overflow: hidden; flex-shrink: 0; text-decoration: none; border: none; padding: 0; cursor: pointer; font-family: inherit; } .avatar-btn img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; display: block; }