/* ========================================================================== skuid shared design tokens - from DESIGN.md ("dark vCard" identity). Every system loads this file so the whole suite feels like one product: dark grayscale structure, rounded layered cards, a single purple accent, Poppins type. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); :root { /* solid colors */ --smoky-black: hsl(0, 0%, 7%); --eerie-black-1: hsl(240, 2%, 13%); --eerie-black-2: hsl(240, 2%, 12%); --onyx: hsl(240, 1%, 17%); --jet: hsl(0, 0%, 22%); --light-gray: hsl(0, 0%, 84%); --light-gray-70: hsla(0, 0%, 84%, 0.7); --white-1: hsl(0, 0%, 100%); --white-2: hsl(0, 0%, 98%); --purp-one: hsl(253, 100%, 72%); --purp-two: rgb(115, 90, 206); /* gradients */ --bg-gradient-onyx: linear-gradient(to bottom right, hsl(240, 1%, 25%) 3%, hsl(0, 0%, 19%) 97%); --bg-gradient-jet: linear-gradient(to bottom right, hsla(240, 1%, 18%, 0.251) 0%, hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%); --bg-gradient-purple-1: linear-gradient(to bottom right, hsl(253, 100%, 72%) 0%, hsla(253, 100%, 72%, 0) 50%); --bg-gradient-purple-2: linear-gradient(135deg, hsla(253, 100%, 72%, 0.251) 0%, hsla(253, 100%, 72%, 0) 59.86%), hsl(240, 2%, 13%); --border-gradient-onyx: linear-gradient(to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50%); --text-gradient-purple: linear-gradient(to right, hsl(253, 100%, 72%), rgb(115, 90, 206)); /* typography */ --ff-poppins: 'Poppins', sans-serif; --fw-300: 300; --fw-400: 400; --fw-500: 500; --fw-600: 600; --fs-1: 24px; --fs-2: 18px; --fs-3: 17px; --fs-4: 16px; --fs-6: 14px; --fs-7: 13px; --fs-8: 11px; /* shadows */ --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25); --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25); --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25); /* motion */ --transition-1: 0.25s ease; --transition-2: 0.5s ease-in-out; } @media (min-width: 580px) { :root { --fs-1: 32px; --fs-2: 24px; --fs-3: 26px; --fs-4: 18px; --fs-6: 15px; --fs-7: 15px; --fs-8: 12px; } } ::selection { background: var(--purp-one); color: var(--smoky-black); } /* thin on-brand scrollbars */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--onyx); } ::-webkit-scrollbar-thumb { background: var(--purp-one); border-radius: 5px; } /* ========================================================================== skuid global app shell - the fixed left icon RAIL + ⌘K COMMAND PALETTE injected into every system by skuid-switcher.js. This is the single piece of chrome that turns four systems into one product: the same suite switcher and the same universal search are present on every page. ========================================================================== */ :root { --skuid-rail-w: 56px; } /* Every system's is pushed right to make room for the rail. Systems with full-height (100vh) layouts only shift horizontally, so their vertical sizing is untouched. PGSM's fixed admin sidebar is offset separately below. */ body.has-skuid-rail { padding-left: var(--skuid-rail-w); } /* ── The rail ─────────────────────────────────────────────────────────────*/ .skuid-rail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--skuid-rail-w); z-index: 100000; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; background: hsla(0, 0%, 5%, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-right: 1px solid var(--jet); font-family: var(--ff-poppins); } .skuid-rail-mark { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--bg-gradient-onyx); color: var(--purp-one); font-weight: 700; font-size: 18px; text-decoration: none; letter-spacing: 0.02em; box-shadow: var(--shadow-1); transition: transform 0.18s ease; margin-bottom: 4px; } .skuid-rail-mark:hover { transform: translateY(-1px) scale(1.04); } .skuid-rail-systems { display: flex; flex-direction: column; gap: 4px; align-items: center; } .skuid-rail-spacer { flex: 1; } .skuid-rail-item { position: relative; width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; color: var(--light-gray-70); background: transparent; border: none; cursor: pointer; text-decoration: none; transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease; } .skuid-rail-item svg { width: 20px; height: 20px; } .skuid-rail-item:hover { background: var(--onyx); color: var(--white-1); transform: translateY(-1px); } .skuid-rail-item.active { color: var(--purp-one); background: hsla(253, 100%, 72%, 0.14); } .skuid-rail-item.active::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--purp-one); } .skuid-rail-item.locked { opacity: 0.42; } .skuid-rail-item.locked:hover { opacity: 0.7; } .skuid-rail-lock { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; } .skuid-rail-lock svg { width: 11px; height: 11px; } .skuid-rail-user { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--jet); background: var(--onyx); color: var(--light-gray); font-size: 13px; font-weight: 600; font-family: var(--ff-poppins); cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease; } .skuid-rail-user svg { width: 18px; height: 18px; } .skuid-rail-user:hover { transform: translateY(-1px); border-color: var(--purp-one); } .skuid-rail-user.is-admin { border-color: var(--purp-one); color: var(--purp-one); } /* Tooltips on hover (rail items only have icons) */ .skuid-rail [data-tip] { } .skuid-rail [data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-4px); padding: 5px 10px; background: var(--eerie-black-1); color: var(--white-2); border: 1px solid var(--jet); border-radius: 8px; font-size: 12px; font-weight: 400; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.14s ease, transform 0.14s ease; box-shadow: var(--shadow-2); z-index: 100002; } .skuid-rail [data-tip]:hover::after { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } /* ── User popover ─────────────────────────────────────────────────────────*/ .skuid-userpop { position: fixed; left: calc(var(--skuid-rail-w) + 8px); bottom: 12px; z-index: 100003; width: 230px; background: var(--eerie-black-2); border: 1px solid var(--jet); border-radius: 14px; box-shadow: var(--shadow-5); padding: 8px; font-family: var(--ff-poppins); animation: skuid-pop 0.16s ease; } @keyframes skuid-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .skuid-userpop-head { display: flex; align-items: center; gap: 12px; padding: 10px; } .skuid-userpop-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-gradient-onyx); color: var(--purp-one); font-weight: 600; font-size: 14px; } .skuid-userpop-name { color: var(--white-2); font-size: 14px; font-weight: 500; } .skuid-userpop-role { color: var(--light-gray-70); font-size: 12px; margin-top: 2px; } .skuid-userpop-action { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px; border-radius: 10px; color: var(--light-gray); font-size: 13px; text-decoration: none; transition: background 0.14s ease, color 0.14s ease; } .skuid-userpop-action svg { width: 16px; height: 16px; } .skuid-userpop-action:hover { background: var(--onyx); color: var(--white-1); } /* ── Command palette ──────────────────────────────────────────────────────*/ .skuid-cmdk { position: fixed; inset: 0; z-index: 100010; background: hsla(0, 0%, 0%, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; font-family: var(--ff-poppins); animation: skuid-fade 0.14s ease; } @keyframes skuid-fade { from { opacity: 0; } to { opacity: 1; } } .skuid-cmdk-box { width: 100%; max-width: 620px; background: var(--eerie-black-2); border: 1px solid var(--jet); border-radius: 16px; box-shadow: var(--shadow-5); overflow: hidden; animation: skuid-pop 0.16s ease; } .skuid-cmdk-inputrow { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--jet); } .skuid-cmdk-icon { width: 20px; height: 20px; color: var(--light-gray-70); flex-shrink: 0; } .skuid-cmdk-input { flex: 1; background: none; border: none; outline: none; color: var(--white-2); font-family: var(--ff-poppins); font-size: 16px; } .skuid-cmdk-input::placeholder { color: var(--light-gray-70); } .skuid-cmdk-esc { font-size: 11px; color: var(--light-gray-70); border: 1px solid var(--jet); border-radius: 6px; padding: 2px 7px; background: var(--onyx); } .skuid-cmdk-results { max-height: 52vh; overflow-y: auto; padding: 8px; } .skuid-cmdk-empty { padding: 28px 16px; text-align: center; color: var(--light-gray-70); font-size: 13px; } .skuid-cmdk-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 10px; text-decoration: none; color: var(--light-gray); } .skuid-cmdk-row.active { background: var(--onyx); } .skuid-cmdk-rowicon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--eerie-black-1); color: var(--purp-one); } .skuid-cmdk-rowicon svg { width: 18px; height: 18px; } .skuid-cmdk-rowtext { flex: 1; min-width: 0; } .skuid-cmdk-rowtitle { display: block; color: var(--white-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .skuid-cmdk-rowsub { display: block; color: var(--light-gray-70); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .skuid-cmdk-rowtag { flex-shrink: 0; font-size: 11px; color: var(--light-gray-70); border: 1px solid var(--jet); border-radius: 20px; padding: 3px 10px; } /* ── Per-system offsets so the rail never overlaps fixed chrome ───────────*/ /* PGSM's admin sidebar is position:fixed; left:0 - nudge it past the rail. */ .has-skuid-rail .admin-shell .sidebar { left: var(--skuid-rail-w); } @media (max-width: 600px) { :root { --skuid-rail-w: 50px; } .skuid-rail-mark { width: 34px; height: 34px; font-size: 16px; } .skuid-rail-item, .skuid-rail-user { width: 36px; height: 36px; } } /* ========================================================================== Seamless palette unification - every system is driven by CSS custom properties, so we remap each system's variables onto the skuid tokens. This loads last on every page, so the whole suite shares one look (dark grayscale surfaces, a single purple accent, Poppins) without rewriting any system's templates. Each block is scoped to a selector that matches only its system, so the overrides never bleed across systems. PGSM already ships on the skuid palette (its theme.css uses these exact tokens), so it needs no remap here. ========================================================================== */ /* ── RWGTube - remap the default "dark" theme to skuid tokens ───────────── (The other tube themes stay available via tube's own switcher.) */ html[data-theme="dark"] { --bg: var(--smoky-black); --surface: var(--eerie-black-2); --surface2: var(--onyx); --border: var(--jet); --accent: var(--purp-one); --accent-h: hsl(253, 100%, 80%); --accent-rgb: 143, 112, 255; --text: var(--light-gray); --text-dim: var(--light-gray-70); --nav-bg: hsla(0, 0%, 5%, 0.82); } html[data-theme="dark"] body { font-family: var(--ff-poppins); } /* ── ContingencyPlan archive - retheme the Discord palette to skuid ─────── Scoped with :has(#app) / :has(#admin-page) - the viewer and its admin and settings pages. Only the archive uses those roots, so this never touches the other systems that happen to share variable names. */ html:has(#app), html:has(#admin-page) { --bg-primary: hsl(240, 2%, 12%); /* main message pane */ --bg-secondary: hsl(240, 2%, 10%); /* channel sidebar */ --bg-tertiary: var(--smoky-black); /* server rail (darkest) */ --bg-input: var(--onyx); --bg-message-hover: hsla(0, 0%, 100%, 0.03); --bg-modifier-hover: hsla(253, 100%, 72%, 0.08); --bg-modifier-active:var(--onyx); --text-normal: var(--light-gray); --text-muted: var(--light-gray-70); --text-link: var(--purp-one); --header-primary: var(--white-2); --header-secondary: var(--light-gray); --interactive-normal:var(--light-gray-70); --interactive-hover: var(--white-1); --interactive-active:var(--white-2); --interactive-muted: var(--jet); --channel-icon: var(--light-gray-70); --brand: var(--purp-one); --brand-hover: var(--purp-two); --separator: var(--jet); --scrollbar-thumb: var(--purp-one); --font: var(--ff-poppins); }