/* * Ghost Guild — Outline Wiki Theme * * Injected via nginx sub_filter into every Outline page. * Served from /custom/ghost-guild.css. * * Fonts: Brygada 1918 + Commit Mono via Google Fonts. * * NOTE: Outline's internal class names and DOM structure may change between * versions. After upgrading Outline, verify these selectors still work. */ @import url('https://fonts.googleapis.com/css2?family=Brygada+1918:ital,wght@0,400..700;1,400..700&family=Commit+Mono&display=swap'); /* ============================================================ TOKENS ============================================================ */ :root { /* Ground */ --gg-bg: #131210; --gg-surface: #1a1815; --gg-bg-hover: #222220; --gg-border: #2a2520; /* Candlelight */ --gg-candle: #d4a03a; --gg-candle-bright: #e8b44c; --gg-candle-dim: #8a6628; --gg-candle-faint: #5c4520; /* Text */ --gg-text-bright: #d0c8b0; --gg-text: #a89880; --gg-text-dim: #605848; --gg-text-faint: #3a3228; /* Warm accent */ --gg-ember: #b26840; /* Parchment (for light-bg contexts if needed) */ --gg-parch: #ede4d0; --gg-parch-text: #2a2015; --gg-parch-body: #4a3f30; /* Circles */ --gg-community: #a07060; --gg-founder: #b26840; --gg-practitioner: #4a6670; /* Typography */ --gg-font-display: 'Brygada 1918', Georgia, serif; --gg-font-body: 'Commit Mono', 'SF Mono', 'Consolas', monospace; } /* ============================================================ GLOBAL OVERRIDES ============================================================ */ body { font-family: var(--gg-font-body) !important; font-size: 14px; line-height: 1.65; background: var(--gg-bg) !important; color: var(--gg-text) !important; -webkit-font-smoothing: antialiased; } /* ============================================================ SIDEBAR ============================================================ */ /* Outline's sidebar */ [class*="Sidebar"] { background: var(--gg-bg) !important; border-right: 1px dashed var(--gg-border) !important; } /* Sidebar links */ [class*="SidebarLink"], [class*="sidebar"] a { font-family: var(--gg-font-body) !important; font-size: 13px !important; color: var(--gg-text-dim) !important; } [class*="SidebarLink"]:hover, [class*="sidebar"] a:hover { color: var(--gg-text) !important; background: var(--gg-surface) !important; } /* ============================================================ DOCUMENT / ARTICLE CONTENT ============================================================ */ /* Main content area */ [class*="Document"], [class*="Editor"], .ProseMirror { font-family: var(--gg-font-body) !important; font-size: 14px !important; line-height: 1.7 !important; color: var(--gg-text) !important; } /* Headings */ h1, .ProseMirror h1 { font-family: var(--gg-font-display) !important; font-size: 32px !important; font-weight: 600 !important; color: var(--gg-text-bright) !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; margin-bottom: 16px !important; } h2, .ProseMirror h2 { font-family: var(--gg-font-display) !important; font-size: 24px !important; font-weight: 500 !important; color: var(--gg-text-bright) !important; line-height: 1.25 !important; margin-top: 40px !important; margin-bottom: 12px !important; padding-bottom: 8px !important; border-bottom: 1px dashed var(--gg-border) !important; } h3, .ProseMirror h3 { font-family: var(--gg-font-display) !important; font-size: 18px !important; font-weight: 500 !important; color: var(--gg-text-bright) !important; line-height: 1.3 !important; margin-top: 32px !important; margin-bottom: 8px !important; } h4, h5, h6, .ProseMirror h4, .ProseMirror h5, .ProseMirror h6 { font-family: var(--gg-font-body) !important; font-size: 14px !important; color: var(--gg-text-bright) !important; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 28px !important; margin-bottom: 8px !important; } /* Paragraphs */ p, .ProseMirror p { color: var(--gg-text) !important; margin-bottom: 14px !important; } /* Strong / Bold */ strong, b { color: var(--gg-text-bright) !important; font-weight: 600; } /* Italic */ em, i { font-family: var(--gg-font-display) !important; font-style: italic; color: var(--gg-text) !important; } /* Links */ a, .ProseMirror a { color: var(--gg-candle) !important; text-decoration: none !important; } a:hover, .ProseMirror a:hover { text-decoration: underline !important; } /* ============================================================ LISTS ============================================================ */ ul, ol, .ProseMirror ul, .ProseMirror ol { color: var(--gg-text) !important; padding-left: 20px !important; } li, .ProseMirror li { margin-bottom: 4px !important; } li::marker { color: var(--gg-text-faint) !important; } /* ============================================================ CODE ============================================================ */ code, .ProseMirror code { font-family: var(--gg-font-body) !important; font-size: 13px !important; background: var(--gg-surface) !important; color: var(--gg-candle-dim) !important; padding: 2px 6px !important; border: 1px solid var(--gg-border) !important; } pre, .ProseMirror pre { font-family: var(--gg-font-body) !important; font-size: 13px !important; background: var(--gg-surface) !important; color: var(--gg-text) !important; padding: 20px !important; border: 1px dashed var(--gg-border) !important; overflow-x: auto; } pre code, .ProseMirror pre code { background: none !important; border: none !important; padding: 0 !important; } /* ============================================================ BLOCKQUOTES ============================================================ */ blockquote, .ProseMirror blockquote { border-left: 3px solid var(--gg-candle-dim) !important; padding: 12px 20px !important; margin: 20px 0 !important; color: var(--gg-text-dim) !important; font-family: var(--gg-font-display) !important; font-style: italic !important; font-size: 16px !important; line-height: 1.55 !important; background: none !important; } /* ============================================================ TABLES ============================================================ */ table, .ProseMirror table { border-collapse: collapse !important; width: 100% !important; font-size: 13px !important; } th, .ProseMirror th { font-size: 10px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--gg-text-faint) !important; border-bottom: 1px dashed var(--gg-border) !important; padding: 8px 12px !important; text-align: left !important; } td, .ProseMirror td { color: var(--gg-text) !important; border-bottom: 1px dashed var(--gg-border) !important; padding: 8px 12px !important; } tr:hover td { background: var(--gg-surface) !important; } /* ============================================================ HORIZONTAL RULES ============================================================ */ hr, .ProseMirror hr { border: none !important; border-top: 1px dashed var(--gg-border) !important; margin: 32px 0 !important; } /* ============================================================ IMAGES ============================================================ */ img { border: 1px dashed var(--gg-border) !important; padding: 4px !important; } /* ============================================================ BUTTONS & UI (Outline-specific) ============================================================ */ button[class*="Button"] { font-family: var(--gg-font-body) !important; border-radius: 0 !important; } /* Primary button overrides */ button[class*="Button"][class*="primary"], button[class*="Button"][class*="Primary"] { background: var(--gg-candle) !important; color: var(--gg-bg) !important; border: none !important; } /* Search input */ input[type="search"], input[type="text"], input[class*="Search"] { font-family: var(--gg-font-body) !important; background: var(--gg-surface) !important; color: var(--gg-text) !important; border: 1px dashed var(--gg-border) !important; border-radius: 0 !important; } /* ============================================================ DOCUMENT TITLE ============================================================ */ [class*="Title"] h1, [class*="DocumentTitle"], [class*="title"] input { font-family: var(--gg-font-display) !important; font-weight: 600 !important; color: var(--gg-text-bright) !important; } /* ============================================================ SCROLLBAR (dark, subtle) ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--gg-bg); } ::-webkit-scrollbar-thumb { background: var(--gg-border); } ::-webkit-scrollbar-thumb:hover { background: var(--gg-text-faint); } /* ============================================================ SELECTION ============================================================ */ ::selection { background: rgba(212, 160, 58, 0.2); color: var(--gg-text-bright); }