jennie/wiki_ghostguild
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
wiki_ghostguild/theme/ghost-guild.css
Jennie Robinson Faber a4127fd50c Replace wiki theme with dark candlelight design 
Brygada 1918 for headings, Commit Mono for body text, full
dark palette with dashed borders and candlelight gold accents.
2026-03-29 21:08:13 +01:00

369 lines
9.1 KiB
CSS
Raw Blame History

/*
* 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);
}
Reference in a new issue View git blame Copy permalink