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.
This commit is contained in:
parent
96c3861fc7
commit
a4127fd50c
1 changed files with 350 additions and 42 deletions
|
|
@ -1,61 +1,369 @@
|
||||||
/*
|
/*
|
||||||
* Ghost Guild — Outline Wiki Custom Theme
|
* Ghost Guild — Outline Wiki Theme
|
||||||
*
|
*
|
||||||
* Injected via nginx sub_filter into every Outline page.
|
* Injected via nginx sub_filter into every Outline page.
|
||||||
* Served from /custom/ghost-guild.css.
|
* 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
|
* NOTE: Outline's internal class names and DOM structure may change between
|
||||||
* versions. After upgrading Outline, verify these selectors still work.
|
* 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');
|
||||||
Brand color overrides
|
|
||||||
--------------------------------------------------------------------------- */
|
/* ============================================================
|
||||||
|
TOKENS
|
||||||
|
============================================================ */
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--ghost-guild-primary: #2563eb;
|
/* Ground */
|
||||||
--ghost-guild-bg: #fafafa;
|
--gg-bg: #131210;
|
||||||
--ghost-guild-text: #1a1a2e;
|
--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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------------------------------------------------------------------------
|
|
||||||
Hide Outline branding
|
|
||||||
--------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
/* "Built with Outline" footer link */
|
/* ============================================================
|
||||||
a[href="https://www.getoutline.com"] {
|
GLOBAL OVERRIDES
|
||||||
display: none !important;
|
============================================================ */
|
||||||
|
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Outline logo in sidebar */
|
|
||||||
[data-testid="sidebar-logo"],
|
/* ============================================================
|
||||||
a[href="/"] > svg {
|
SIDEBAR
|
||||||
/* Replace with Ghost Guild logo via background-image if desired:
|
============================================================ */
|
||||||
background-image: url(/custom/logo.svg);
|
|
||||||
background-size: contain;
|
/* Outline's sidebar */
|
||||||
background-repeat: no-repeat;
|
[class*="Sidebar"] {
|
||||||
*/
|
background: var(--gg-bg) !important;
|
||||||
|
border-right: 1px dashed var(--gg-border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------------------------------------------------------------------------
|
/* Sidebar links */
|
||||||
Typography
|
[class*="SidebarLink"],
|
||||||
--------------------------------------------------------------------------- */
|
[class*="sidebar"] a {
|
||||||
|
font-family: var(--gg-font-body) !important;
|
||||||
/* Placeholder: uncomment and update with Ghost Guild fonts
|
font-size: 13px !important;
|
||||||
@font-face {
|
color: var(--gg-text-dim) !important;
|
||||||
font-family: "GhostGuild";
|
|
||||||
src: url("/custom/fonts/ghost-guild.woff2") format("woff2");
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
}
|
||||||
*/
|
[class*="SidebarLink"]:hover,
|
||||||
|
[class*="sidebar"] a:hover {
|
||||||
/* ---------------------------------------------------------------------------
|
color: var(--gg-text) !important;
|
||||||
Layout adjustments
|
background: var(--gg-surface) !important;
|
||||||
--------------------------------------------------------------------------- */
|
}
|
||||||
|
|
||||||
/* Widen the document area slightly */
|
|
||||||
.document-editor,
|
/* ============================================================
|
||||||
[class*="DocumentEditor"] {
|
DOCUMENT / ARTICLE CONTENT
|
||||||
max-width: 48rem;
|
============================================================ */
|
||||||
|
|
||||||
|
/* 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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue