mirror of
https://github.com/stephanteig/obsidian-lumen.git
synced 2026-07-22 04:40:26 +00:00
92dcff8454
Removed Georgia/serif overrides from Paper & Ink, Iron Press, and Soft Dusk (body --font-text-theme, heading --h1-font/h2-font variables, and font-family in explicit heading selectors). All six themes now use Obsidian's default Inter/sans-serif, matching Tokyo Night's clean look. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1344 lines
44 KiB
CSS
1344 lines
44 KiB
CSS
/* ═══════════════════════════════════════════════════
|
|
Lumen — theme.css
|
|
Author: Stephan Teig
|
|
Supports: Light + Dark
|
|
Requires: Style Settings plugin to switch palettes
|
|
═══════════════════════════════════════════════════ */
|
|
|
|
/* @settings
|
|
|
|
name: Lumen
|
|
id: lumen
|
|
settings:
|
|
-
|
|
id: lumen-scheme
|
|
title: Color scheme
|
|
description: Switch between Lumen palette variants. Requires the Style Settings plugin.
|
|
type: class-select
|
|
default: lumen-paper-ink
|
|
options:
|
|
-
|
|
label: "03 · Paper & Ink (light)"
|
|
value: lumen-paper-ink
|
|
-
|
|
label: "05 · Lavender Fog (light)"
|
|
value: lumen-lavender-fog
|
|
-
|
|
label: "06 · Iron Press (light)"
|
|
value: lumen-iron-press
|
|
-
|
|
label: "07 · Nordic Slate (dark)"
|
|
value: lumen-nordic-slate
|
|
-
|
|
label: "10 · Soft Dusk (dark)"
|
|
value: lumen-soft-dusk
|
|
-
|
|
label: "12 · Tokyo Night (dark)"
|
|
value: lumen-tokyo-night
|
|
|
|
*/
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
SHARED — applies to all Lumen variants
|
|
═══════════════════════════════════════════════════ */
|
|
|
|
/* Scrollbars */
|
|
::-webkit-scrollbar { width: 5px; height: 5px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--background-modifier-border); border-radius: 999px; }
|
|
::-webkit-scrollbar-thumb:hover{ background: var(--text-faint); }
|
|
|
|
/* Status bar fades in on hover */
|
|
.status-bar {
|
|
opacity: 0.45;
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
.status-bar:hover {
|
|
opacity: 1;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
/* Nav indentation guides */
|
|
.nav-indentation-guide {
|
|
border-color: var(--nav-indentation-guide-color);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Smooth sidebar nav transitions */
|
|
.nav-file-title,
|
|
.nav-folder-title {
|
|
border-radius: 5px;
|
|
transition: background 0.12s ease, color 0.12s ease;
|
|
}
|
|
|
|
/* Tags — pill style */
|
|
.tag {
|
|
background: var(--tag-background);
|
|
color: var(--tag-color);
|
|
border: 1px solid var(--tag-border-color);
|
|
border-radius: var(--tag-radius, 2em);
|
|
font-size: 0.78em;
|
|
font-weight: 500;
|
|
padding: 2px 9px;
|
|
text-decoration: none;
|
|
transition: background 0.12s ease;
|
|
}
|
|
.tag:hover {
|
|
background: var(--tag-background-hover, var(--tag-background));
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Checkboxes */
|
|
input[type="checkbox"] {
|
|
border-color: var(--checkbox-border-color, var(--interactive-accent));
|
|
border-radius: 3px;
|
|
}
|
|
input[type="checkbox"]:checked {
|
|
background: var(--interactive-accent);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
/* Callout base radius */
|
|
.callout {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Table row hover */
|
|
.markdown-rendered tr:hover td {
|
|
background: var(--table-row-background-hover, var(--background-modifier-hover));
|
|
}
|
|
|
|
/* Workspace pane header */
|
|
.workspace-tab-header.is-active {
|
|
background: var(--tab-background-active);
|
|
}
|
|
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
03 · PAPER & INK (light)
|
|
Warm off-white, near-black ink, serif type, print minimal
|
|
═══════════════════════════════════════════════════ */
|
|
body.lumen-paper-ink {
|
|
/* Backgrounds */
|
|
--background-primary: #f8f4ec;
|
|
--background-primary-alt: #f3eee4;
|
|
--background-secondary: #f1ebdf;
|
|
--background-secondary-alt: #ede5d4;
|
|
--background-modifier-border: #d8cfb8;
|
|
--background-modifier-border-hover: #c4b89a;
|
|
--background-modifier-hover: #e8e1cc;
|
|
--background-modifier-active-hover: #e2d8be;
|
|
--background-modifier-form-field: #fdfaf4;
|
|
--divider-color: #d8cfb8;
|
|
|
|
/* Text */
|
|
--text-normal: #1f1d18;
|
|
--text-muted: #6a6254;
|
|
--text-faint: #b0a890;
|
|
--text-on-accent: #f8f4ec;
|
|
--text-accent: #3d3830;
|
|
--text-accent-hover:#1a1712;
|
|
--text-selection: rgba(61, 56, 48, 0.12);
|
|
--text-highlight-bg:rgba(61, 56, 48, 0.15);
|
|
|
|
/* Accent chain */
|
|
--interactive-accent: #3d3830;
|
|
--interactive-accent-hover: #1a1712;
|
|
--interactive-accent-rgb: 61, 56, 48;
|
|
--color-accent: #3d3830;
|
|
--color-accent-1: #5a5346;
|
|
--color-accent-2: #1a1712;
|
|
|
|
/* Links */
|
|
--link-color: #3d3830;
|
|
--link-color-hover: #1a1712;
|
|
--link-external-color: #6a5f50;
|
|
--link-external-color-hover:#3d3830;
|
|
--link-unresolved-color: #b0a890;
|
|
--link-decoration: none;
|
|
--link-external-decoration: none;
|
|
|
|
/* Headings */
|
|
--h1-color: #0a0a08;
|
|
--h2-color: #141310;
|
|
--h3-color: #1f1d18;
|
|
--h4-color: #1f1d18;
|
|
--h5-color: #6a6254;
|
|
--h6-color: #a09888;
|
|
--h1-weight: 700;
|
|
--h2-weight: 700;
|
|
--h3-weight: 600;
|
|
--h4-weight: 600;
|
|
--h5-weight: 500;
|
|
--h6-weight: 400;
|
|
--h1-size: 2.4em;
|
|
--h2-size: 1.8em;
|
|
--h3-size: 1.4em;
|
|
--h4-size: 1.15em;
|
|
--h5-size: 1em;
|
|
--h6-size: 0.88em;
|
|
/* Bold / Italic */
|
|
--bold-color: #0a0a08;
|
|
--bold-weight: 700;
|
|
--italic-color: #4a4438;
|
|
|
|
/* Code */
|
|
--code-background: #ede5d4;
|
|
--code-normal: #1f1d18;
|
|
--code-comment: #9e9684;
|
|
--code-function: #2a2820;
|
|
--code-keyword: #1f1d18;
|
|
--code-string: #5c5a40;
|
|
--code-value: #5c5a40;
|
|
--code-operator: #1f1d18;
|
|
--code-punctuation:#7c7464;
|
|
--code-tag: #1f1d18;
|
|
--code-property: #3d3830;
|
|
--code-size: 0.88em;
|
|
|
|
/* Blockquote */
|
|
--blockquote-border-color: #3d3830;
|
|
--blockquote-border-thickness: 2px;
|
|
--blockquote-background-color: rgba(61, 56, 48, 0.05);
|
|
--blockquote-color: #3d3830;
|
|
--blockquote-font-style: italic;
|
|
|
|
/* Tags */
|
|
--tag-color: #1f1d18;
|
|
--tag-background: transparent;
|
|
--tag-background-hover: rgba(61, 56, 48, 0.08);
|
|
--tag-border-color: #c4b89a;
|
|
--tag-radius: 2em;
|
|
|
|
/* Nav */
|
|
--nav-indentation-guide-color: #d8cfb8;
|
|
--nav-item-color: #6a6254;
|
|
--nav-item-color-active: #0a0a08;
|
|
--nav-item-background-active: #e2d8be;
|
|
--nav-item-background-hover: #e8e1cc;
|
|
|
|
/* Buttons */
|
|
--interactive-normal: #dfd8c4;
|
|
--interactive-hover: #cfc6b0;
|
|
|
|
/* Workspace */
|
|
--tab-background-active: #f8f4ec;
|
|
--titlebar-background: #ede5d4;
|
|
--titlebar-background-focused: #ede5d4;
|
|
--status-bar-background: #f1ebdf;
|
|
--checkbox-border-color: #c4b89a;
|
|
|
|
/* Tables */
|
|
--table-border-color: #d8cfb8;
|
|
--table-header-background: #ede5d4;
|
|
--table-row-background-hover: rgba(61, 56, 48, 0.04);
|
|
|
|
/* Shadows */
|
|
--shadow-s: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
|
|
--shadow-l: 0 4px 16px rgba(0,0,0,0.1), 0 12px 40px rgba(0,0,0,0.08);
|
|
|
|
/* Typography */
|
|
--font-interface-theme: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--line-height-normal: 1.7;
|
|
--file-line-width: 720px;
|
|
}
|
|
|
|
/* Paper & Ink — explicit heading hierarchy */
|
|
body.lumen-paper-ink .markdown-rendered h1,
|
|
body.lumen-paper-ink .cm-editor .HyperMD-header-1 {
|
|
font-size: 2.4em; font-weight: 700; color: #0a0a08;
|
|
}
|
|
body.lumen-paper-ink .markdown-rendered h2,
|
|
body.lumen-paper-ink .cm-editor .HyperMD-header-2 {
|
|
font-size: 1.8em; font-weight: 700; color: #141310;
|
|
}
|
|
body.lumen-paper-ink .markdown-rendered h3,
|
|
body.lumen-paper-ink .cm-editor .HyperMD-header-3 {
|
|
font-size: 1.4em; font-weight: 600; color: #1f1d18;
|
|
}
|
|
body.lumen-paper-ink .markdown-rendered h4,
|
|
body.lumen-paper-ink .cm-editor .HyperMD-header-4 {
|
|
font-size: 1.15em; font-weight: 600; color: #1f1d18;
|
|
}
|
|
body.lumen-paper-ink .markdown-rendered h5,
|
|
body.lumen-paper-ink .cm-editor .HyperMD-header-5 {
|
|
font-size: 1em; font-weight: 600; color: #6a6254; text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
body.lumen-paper-ink .markdown-rendered h6,
|
|
body.lumen-paper-ink .cm-editor .HyperMD-header-6 {
|
|
font-size: 0.9em; font-weight: 500; color: #a09888;
|
|
}
|
|
|
|
/* Paper & Ink — h1 gradient border */
|
|
body.lumen-paper-ink .markdown-rendered h1 {
|
|
border-bottom: 1.5px solid;
|
|
border-image-source: linear-gradient(to right, #0a0a08 0%, transparent 80%);
|
|
border-image-slice: 1;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Paper & Ink — links (gradient underline reveal) */
|
|
body.lumen-paper-ink .markdown-rendered .internal-link,
|
|
body.lumen-paper-ink .markdown-rendered .external-link {
|
|
color: #3d3830;
|
|
text-decoration: none;
|
|
background-image: linear-gradient(to right, #3d3830, #3d3830);
|
|
background-size: 0 1.5px;
|
|
background-position: 0 100%;
|
|
background-repeat: no-repeat;
|
|
transition: background-size 0.22s ease-out;
|
|
}
|
|
body.lumen-paper-ink .markdown-rendered .internal-link:hover,
|
|
body.lumen-paper-ink .markdown-rendered .external-link:hover {
|
|
background-size: 100% 1.5px;
|
|
}
|
|
|
|
/* Paper & Ink — blockquote */
|
|
body.lumen-paper-ink .markdown-rendered blockquote {
|
|
border-left: 2px solid #3d3830;
|
|
background: rgba(61, 56, 48, 0.05);
|
|
border-radius: 0 4px 4px 0;
|
|
padding: 6px 18px;
|
|
margin: 0 0 16px;
|
|
color: #3d3830;
|
|
}
|
|
|
|
/* Paper & Ink — bold / italic */
|
|
body.lumen-paper-ink .markdown-rendered strong,
|
|
body.lumen-paper-ink .cm-strong { color: #0a0a08; font-weight: 700; }
|
|
body.lumen-paper-ink .markdown-rendered em,
|
|
body.lumen-paper-ink .cm-em { color: #4a4438; }
|
|
|
|
/* Paper & Ink — inline code */
|
|
body.lumen-paper-ink .markdown-rendered code,
|
|
body.lumen-paper-ink .cm-inline-code {
|
|
background: #ede5d4;
|
|
color: #1f1d18;
|
|
border-radius: 3px;
|
|
padding: 1px 5px;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
05 · LAVENDER FOG (light)
|
|
Desaturated purple-white, deep plum, soft elegance
|
|
═══════════════════════════════════════════════════ */
|
|
body.lumen-lavender-fog {
|
|
/* Backgrounds */
|
|
--background-primary: #f4f1f7;
|
|
--background-primary-alt: #eeeaf2;
|
|
--background-secondary: #ebe5f0;
|
|
--background-secondary-alt: #e0d8e7;
|
|
--background-modifier-border: #d4cadd;
|
|
--background-modifier-border-hover: #c0b2cc;
|
|
--background-modifier-hover: #e4dcea;
|
|
--background-modifier-active-hover: #ddd2e6;
|
|
--background-modifier-form-field: #faf8fc;
|
|
--divider-color: #d4cadd;
|
|
|
|
/* Text */
|
|
--text-normal: #2e2538;
|
|
--text-muted: #7a6e88;
|
|
--text-faint: #b4a8c2;
|
|
--text-on-accent: #ffffff;
|
|
--text-accent: #6b5b95;
|
|
--text-accent-hover:#5a4a82;
|
|
--text-selection: rgba(107, 91, 149, 0.15);
|
|
--text-highlight-bg:rgba(107, 91, 149, 0.18);
|
|
|
|
/* Accent chain */
|
|
--interactive-accent: #6b5b95;
|
|
--interactive-accent-hover: #5a4a82;
|
|
--interactive-accent-rgb: 107, 91, 149;
|
|
--color-accent: #6b5b95;
|
|
--color-accent-1: #7e6da8;
|
|
--color-accent-2: #5a4a82;
|
|
|
|
/* Links */
|
|
--link-color: #6b5b95;
|
|
--link-color-hover: #5a4a82;
|
|
--link-external-color: #8a7aaa;
|
|
--link-external-color-hover:#6b5b95;
|
|
--link-unresolved-color: #c0b2cc;
|
|
--link-decoration: none;
|
|
--link-external-decoration: none;
|
|
|
|
/* Headings */
|
|
--h1-color: #1a1224;
|
|
--h2-color: #2a1e38;
|
|
--h3-color: #3a2c4c;
|
|
--h4-color: #2e2538;
|
|
--h5-color: #7a6e88;
|
|
--h6-color: #a49ab2;
|
|
--h1-weight: 700;
|
|
--h2-weight: 600;
|
|
--h3-weight: 600;
|
|
--h4-weight: 500;
|
|
--h5-weight: 600;
|
|
--h6-weight: 400;
|
|
--h1-size: 2.2em;
|
|
--h2-size: 1.7em;
|
|
--h3-size: 1.35em;
|
|
--h4-size: 1.12em;
|
|
--h5-size: 1em;
|
|
--h6-size: 0.88em;
|
|
|
|
/* Bold / Italic */
|
|
--bold-color: #6b5b95;
|
|
--bold-weight: 700;
|
|
--italic-color: #8a7aaa;
|
|
|
|
/* Code */
|
|
--code-background: #e8e0f0;
|
|
--code-normal: #2e2538;
|
|
--code-comment: #ad9eb8;
|
|
--code-function: #5a6b95;
|
|
--code-keyword: #6b5b95;
|
|
--code-string: #7a6a60;
|
|
--code-value: #95685b;
|
|
--code-operator: #6b5b95;
|
|
--code-punctuation:#847893;
|
|
--code-size: 0.88em;
|
|
|
|
/* Blockquote */
|
|
--blockquote-border-color: #9b84c8;
|
|
--blockquote-border-thickness: 3px;
|
|
--blockquote-background-color: rgba(107, 91, 149, 0.07);
|
|
--blockquote-color: #5a4d6a;
|
|
--blockquote-font-style: normal;
|
|
|
|
/* Tags */
|
|
--tag-color: #6b5b95;
|
|
--tag-background: rgba(107, 91, 149, 0.1);
|
|
--tag-background-hover: rgba(107, 91, 149, 0.18);
|
|
--tag-border-color: rgba(107, 91, 149, 0.25);
|
|
--tag-radius: 2em;
|
|
|
|
/* Nav */
|
|
--nav-indentation-guide-color: #d4cadd;
|
|
--nav-item-color: #7a6e88;
|
|
--nav-item-color-active: #1a1224;
|
|
--nav-item-background-active: #ddd2e6;
|
|
--nav-item-background-hover: #e4dcea;
|
|
|
|
/* Buttons */
|
|
--interactive-normal: #d6cce2;
|
|
--interactive-hover: #c6bbd4;
|
|
|
|
/* Workspace */
|
|
--tab-background-active: #f4f1f7;
|
|
--titlebar-background: #e0d8e7;
|
|
--titlebar-background-focused: #e0d8e7;
|
|
--status-bar-background: #ebe5f0;
|
|
--checkbox-border-color: #b8a5d4;
|
|
|
|
/* Tables */
|
|
--table-border-color: #d4cadd;
|
|
--table-header-background: #e8e0f0;
|
|
--table-row-background-hover: rgba(107, 91, 149, 0.05);
|
|
|
|
/* Shadows */
|
|
--shadow-s: 0 1px 3px rgba(60, 40, 90, 0.08), 0 4px 12px rgba(60, 40, 90, 0.06);
|
|
--shadow-l: 0 4px 16px rgba(60, 40, 90, 0.1), 0 12px 40px rgba(60, 40, 90, 0.08);
|
|
|
|
--font-interface-theme: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--line-height-normal: 1.65;
|
|
--file-line-width: 720px;
|
|
}
|
|
|
|
/* Lavender Fog — explicit heading hierarchy */
|
|
body.lumen-lavender-fog .markdown-rendered h1,
|
|
body.lumen-lavender-fog .cm-editor .HyperMD-header-1 {
|
|
font-size: 2.2em; font-weight: 700; color: #1a1224;
|
|
}
|
|
body.lumen-lavender-fog .markdown-rendered h2,
|
|
body.lumen-lavender-fog .cm-editor .HyperMD-header-2 {
|
|
font-size: 1.7em; font-weight: 600; color: #2a1e38;
|
|
}
|
|
body.lumen-lavender-fog .markdown-rendered h3,
|
|
body.lumen-lavender-fog .cm-editor .HyperMD-header-3 {
|
|
font-size: 1.35em; font-weight: 600; color: #3a2c4c;
|
|
}
|
|
body.lumen-lavender-fog .markdown-rendered h4,
|
|
body.lumen-lavender-fog .cm-editor .HyperMD-header-4 {
|
|
font-size: 1.12em; font-weight: 500; color: #2e2538;
|
|
}
|
|
body.lumen-lavender-fog .markdown-rendered h5,
|
|
body.lumen-lavender-fog .cm-editor .HyperMD-header-5 {
|
|
font-size: 1em; font-weight: 600; color: #7a6e88;
|
|
text-transform: uppercase; letter-spacing: 0.06em;
|
|
}
|
|
body.lumen-lavender-fog .markdown-rendered h6,
|
|
body.lumen-lavender-fog .cm-editor .HyperMD-header-6 {
|
|
font-size: 0.9em; font-weight: 400; color: #a49ab2;
|
|
}
|
|
|
|
/* Lavender Fog — h1 gradient border */
|
|
body.lumen-lavender-fog .markdown-rendered h1 {
|
|
border-bottom: 1.5px solid;
|
|
border-image-source: linear-gradient(to right, #6b5b95 0%, transparent 70%);
|
|
border-image-slice: 1;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
/* Lavender Fog — links */
|
|
body.lumen-lavender-fog .markdown-rendered .internal-link,
|
|
body.lumen-lavender-fog .markdown-rendered .external-link {
|
|
color: #6b5b95;
|
|
text-decoration: none;
|
|
background-image: linear-gradient(to right, #6b5b95, #6b5b95);
|
|
background-size: 0 1.5px;
|
|
background-position: 0 100%;
|
|
background-repeat: no-repeat;
|
|
transition: background-size 0.22s ease-out;
|
|
}
|
|
body.lumen-lavender-fog .markdown-rendered .internal-link:hover,
|
|
body.lumen-lavender-fog .markdown-rendered .external-link:hover {
|
|
background-size: 100% 1.5px;
|
|
}
|
|
|
|
/* Lavender Fog — blockquote */
|
|
body.lumen-lavender-fog .markdown-rendered blockquote {
|
|
border-left: 3px solid #9b84c8;
|
|
background: rgba(107, 91, 149, 0.07);
|
|
border-radius: 0 6px 6px 0;
|
|
padding: 8px 18px;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
/* Lavender Fog — bold / italic */
|
|
body.lumen-lavender-fog .markdown-rendered strong,
|
|
body.lumen-lavender-fog .cm-strong { color: #6b5b95; font-weight: 700; }
|
|
body.lumen-lavender-fog .markdown-rendered em,
|
|
body.lumen-lavender-fog .cm-em { color: #8a7aaa; font-style: italic; }
|
|
|
|
/* Lavender Fog — inline code */
|
|
body.lumen-lavender-fog .markdown-rendered code,
|
|
body.lumen-lavender-fog .cm-inline-code {
|
|
background: rgba(107, 91, 149, 0.1);
|
|
color: #5a4a82;
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
06 · IRON PRESS (light)
|
|
Newsprint grey, single crimson accent, broadsheet
|
|
═══════════════════════════════════════════════════ */
|
|
body.lumen-iron-press {
|
|
/* Backgrounds */
|
|
--background-primary: #e9e7e2;
|
|
--background-primary-alt: #e3e0da;
|
|
--background-secondary: #ddd9d2;
|
|
--background-secondary-alt: #d2cdc4;
|
|
--background-modifier-border: #c6c2b9;
|
|
--background-modifier-border-hover: #aaa69c;
|
|
--background-modifier-hover: #d8d4ca;
|
|
--background-modifier-active-hover: #d0c9bd;
|
|
--background-modifier-form-field: #f0eeea;
|
|
--divider-color: #c6c2b9;
|
|
|
|
/* Text */
|
|
--text-normal: #1d1d1c;
|
|
--text-muted: #5e5c56;
|
|
--text-faint: #a09e96;
|
|
--text-on-accent: #f0eeea;
|
|
--text-accent: #8a1818;
|
|
--text-accent-hover:#6e1010;
|
|
--text-selection: rgba(138, 24, 24, 0.14);
|
|
--text-highlight-bg:rgba(138, 24, 24, 0.16);
|
|
|
|
/* Accent chain */
|
|
--interactive-accent: #8a1818;
|
|
--interactive-accent-hover: #6e1010;
|
|
--interactive-accent-rgb: 138, 24, 24;
|
|
--color-accent: #8a1818;
|
|
--color-accent-1: #a82020;
|
|
--color-accent-2: #6e1010;
|
|
|
|
/* Links */
|
|
--link-color: #8a1818;
|
|
--link-color-hover: #6e1010;
|
|
--link-external-color: #8a1818;
|
|
--link-external-color-hover:#6e1010;
|
|
--link-unresolved-color: #aaa69c;
|
|
--link-decoration: none;
|
|
--link-external-decoration: none;
|
|
|
|
/* Headings */
|
|
--h1-color: #050505;
|
|
--h2-color: #111110;
|
|
--h3-color: #1d1d1c;
|
|
--h4-color: #1d1d1c;
|
|
--h5-color: #5e5c56;
|
|
--h6-color: #8e8a82;
|
|
--h1-weight: 800;
|
|
--h2-weight: 700;
|
|
--h3-weight: 700;
|
|
--h4-weight: 600;
|
|
--h5-weight: 600;
|
|
--h6-weight: 400;
|
|
--h1-size: 2.4em;
|
|
--h2-size: 1.8em;
|
|
--h3-size: 1.4em;
|
|
--h4-size: 1.15em;
|
|
--h5-size: 1em;
|
|
--h6-size: 0.88em;
|
|
/* Bold / Italic */
|
|
--bold-color: #8a1818;
|
|
--bold-weight: 700;
|
|
--italic-color: #2e2e2c;
|
|
|
|
/* Code */
|
|
--code-background: #d8d4ca;
|
|
--code-normal: #1d1d1c;
|
|
--code-comment: #8e8a82;
|
|
--code-function: #1d1d1c;
|
|
--code-keyword: #8a1818;
|
|
--code-string: #3a3a36;
|
|
--code-value: #5c1818;
|
|
--code-operator: #8a1818;
|
|
--code-punctuation:#6c6a64;
|
|
--code-size: 0.87em;
|
|
|
|
/* Blockquote */
|
|
--blockquote-border-color: #8a1818;
|
|
--blockquote-border-thickness: 3px;
|
|
--blockquote-background-color: rgba(138, 24, 24, 0.05);
|
|
--blockquote-color: #3a3a36;
|
|
--blockquote-font-style: italic;
|
|
|
|
/* Tags */
|
|
--tag-color: #8a1818;
|
|
--tag-background: transparent;
|
|
--tag-background-hover: rgba(138, 24, 24, 0.08);
|
|
--tag-border-color: rgba(138, 24, 24, 0.35);
|
|
--tag-radius: 2px;
|
|
|
|
/* Nav */
|
|
--nav-indentation-guide-color: #c6c2b9;
|
|
--nav-item-color: #5e5c56;
|
|
--nav-item-color-active: #050505;
|
|
--nav-item-background-active: #d0c9bd;
|
|
--nav-item-background-hover: #d8d4ca;
|
|
|
|
/* Buttons */
|
|
--interactive-normal: #ccc8bf;
|
|
--interactive-hover: #bcb8ae;
|
|
|
|
/* Workspace */
|
|
--tab-background-active: #e9e7e2;
|
|
--titlebar-background: #d2cdc4;
|
|
--titlebar-background-focused: #d2cdc4;
|
|
--status-bar-background: #ddd9d2;
|
|
--checkbox-border-color: #8a1818;
|
|
|
|
/* Tables */
|
|
--table-border-color: #c6c2b9;
|
|
--table-header-background: #d2cdc4;
|
|
--table-row-background-hover: rgba(138, 24, 24, 0.04);
|
|
|
|
/* Shadows */
|
|
--shadow-s: 0 1px 3px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.07);
|
|
--shadow-l: 0 4px 16px rgba(0,0,0,0.12), 0 12px 40px rgba(0,0,0,0.09);
|
|
|
|
/* Typography */
|
|
--font-interface-theme: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--line-height-normal: 1.7;
|
|
--file-line-width: 740px;
|
|
}
|
|
|
|
/* Iron Press — explicit heading hierarchy */
|
|
body.lumen-iron-press .markdown-rendered h1,
|
|
body.lumen-iron-press .cm-editor .HyperMD-header-1 {
|
|
font-size: 2.4em; font-weight: 800; color: #050505;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
body.lumen-iron-press .markdown-rendered h2,
|
|
body.lumen-iron-press .cm-editor .HyperMD-header-2 {
|
|
font-size: 1.8em; font-weight: 700; color: #111110;
|
|
}
|
|
body.lumen-iron-press .markdown-rendered h3,
|
|
body.lumen-iron-press .cm-editor .HyperMD-header-3 {
|
|
font-size: 1.4em; font-weight: 700; color: #1d1d1c;
|
|
}
|
|
body.lumen-iron-press .markdown-rendered h4,
|
|
body.lumen-iron-press .cm-editor .HyperMD-header-4 {
|
|
font-size: 1.15em; font-weight: 600; color: #1d1d1c;
|
|
}
|
|
body.lumen-iron-press .markdown-rendered h5,
|
|
body.lumen-iron-press .cm-editor .HyperMD-header-5 {
|
|
font-size: 1em; font-weight: 600; color: #5e5c56;
|
|
text-transform: uppercase; letter-spacing: 0.07em;
|
|
}
|
|
body.lumen-iron-press .markdown-rendered h6,
|
|
body.lumen-iron-press .cm-editor .HyperMD-header-6 {
|
|
font-size: 0.9em; font-weight: 400; color: #8e8a82;
|
|
}
|
|
|
|
/* Iron Press — h1 gradient border + h2 rule */
|
|
body.lumen-iron-press .markdown-rendered h1 {
|
|
border-bottom: 2px solid;
|
|
border-image-source: linear-gradient(to right, #8a1818 0%, transparent 60%);
|
|
border-image-slice: 1;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
body.lumen-iron-press .markdown-rendered h2 {
|
|
border-bottom: 1px solid #c6c2b9;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
/* Iron Press — links */
|
|
body.lumen-iron-press .markdown-rendered .internal-link,
|
|
body.lumen-iron-press .markdown-rendered .external-link {
|
|
color: #8a1818;
|
|
text-decoration: none;
|
|
background-image: linear-gradient(to right, #8a1818, #8a1818);
|
|
background-size: 0 1.5px;
|
|
background-position: 0 100%;
|
|
background-repeat: no-repeat;
|
|
transition: background-size 0.22s ease-out;
|
|
}
|
|
body.lumen-iron-press .markdown-rendered .internal-link:hover,
|
|
body.lumen-iron-press .markdown-rendered .external-link:hover {
|
|
background-size: 100% 1.5px;
|
|
}
|
|
|
|
/* Iron Press — blockquote */
|
|
body.lumen-iron-press .markdown-rendered blockquote {
|
|
border-left: 3px solid #8a1818;
|
|
background: rgba(138, 24, 24, 0.05);
|
|
border-radius: 0 4px 4px 0;
|
|
padding: 8px 18px;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
/* Iron Press — bold / italic */
|
|
body.lumen-iron-press .markdown-rendered strong,
|
|
body.lumen-iron-press .cm-strong { color: #8a1818; font-weight: 700; }
|
|
body.lumen-iron-press .markdown-rendered em,
|
|
body.lumen-iron-press .cm-em { color: #2e2e2c; }
|
|
|
|
/* Iron Press — inline code */
|
|
body.lumen-iron-press .markdown-rendered code,
|
|
body.lumen-iron-press .cm-inline-code {
|
|
background: #d8d4ca;
|
|
color: #8a1818;
|
|
border-radius: 3px;
|
|
padding: 1px 5px;
|
|
font-size: 0.87em;
|
|
}
|
|
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
07 · NORDIC SLATE (dark)
|
|
Desaturated blue-grey, ice-blue accents, calm & clean
|
|
═══════════════════════════════════════════════════ */
|
|
body.lumen-nordic-slate {
|
|
/* Backgrounds */
|
|
--background-primary: #2e3440;
|
|
--background-primary-alt: #2a3039;
|
|
--background-secondary: #292f3a;
|
|
--background-secondary-alt: #232831;
|
|
--background-modifier-border: #3b4252;
|
|
--background-modifier-border-hover: #4a5266;
|
|
--background-modifier-hover: #353d4d;
|
|
--background-modifier-active-hover: #3b4456;
|
|
--background-modifier-form-field: #353d4d;
|
|
--divider-color: #3b4252;
|
|
|
|
/* Text */
|
|
--text-normal: #d8dee9;
|
|
--text-muted: #8898b0;
|
|
--text-faint: #56637a;
|
|
--text-on-accent: #1e2430;
|
|
--text-accent: #88c0d0;
|
|
--text-accent-hover:#9dd0e0;
|
|
--text-selection: rgba(136, 192, 208, 0.2);
|
|
--text-highlight-bg:rgba(136, 192, 208, 0.22);
|
|
|
|
/* Accent chain */
|
|
--interactive-accent: #88c0d0;
|
|
--interactive-accent-hover: #9dd0e0;
|
|
--interactive-accent-rgb: 136, 192, 208;
|
|
--color-accent: #88c0d0;
|
|
--color-accent-1: #9dd0e0;
|
|
--color-accent-2: #72aabc;
|
|
|
|
/* Links */
|
|
--link-color: #88c0d0;
|
|
--link-color-hover: #9dd0e0;
|
|
--link-external-color: #81a1c1;
|
|
--link-external-color-hover:#8ab2d8;
|
|
--link-unresolved-color: #56637a;
|
|
--link-decoration: none;
|
|
--link-external-decoration: none;
|
|
|
|
/* Headings */
|
|
--h1-color: #eceff4;
|
|
--h2-color: #e5e9f0;
|
|
--h3-color: #d8dee9;
|
|
--h4-color: #cdd4e2;
|
|
--h5-color: #8898b0;
|
|
--h6-color: #56637a;
|
|
--h1-weight: 600;
|
|
--h2-weight: 600;
|
|
--h3-weight: 500;
|
|
--h4-weight: 500;
|
|
--h5-weight: 600;
|
|
--h6-weight: 400;
|
|
--h1-size: 2.1em;
|
|
--h2-size: 1.65em;
|
|
--h3-size: 1.32em;
|
|
--h4-size: 1.12em;
|
|
--h5-size: 1em;
|
|
--h6-size: 0.88em;
|
|
|
|
/* Bold / Italic */
|
|
--bold-color: #88c0d0;
|
|
--bold-weight: 700;
|
|
--italic-color: #a3be8c;
|
|
|
|
/* Code */
|
|
--code-background: #252b36;
|
|
--code-normal: #d8dee9;
|
|
--code-comment: #4c566a;
|
|
--code-function: #88c0d0;
|
|
--code-keyword: #81a1c1;
|
|
--code-string: #a3be8c;
|
|
--code-value: #b48ead;
|
|
--code-operator: #81a1c1;
|
|
--code-punctuation:#6c7689;
|
|
--code-tag: #88c0d0;
|
|
--code-property: #8fbcbb;
|
|
--code-size: 0.88em;
|
|
|
|
/* Blockquote */
|
|
--blockquote-border-color: #5e81ac;
|
|
--blockquote-border-thickness: 3px;
|
|
--blockquote-background-color: rgba(136, 192, 208, 0.07);
|
|
--blockquote-color: #b4bece;
|
|
--blockquote-font-style: normal;
|
|
|
|
/* Tags */
|
|
--tag-color: #88c0d0;
|
|
--tag-background: rgba(136, 192, 208, 0.1);
|
|
--tag-background-hover: rgba(136, 192, 208, 0.2);
|
|
--tag-border-color: rgba(136, 192, 208, 0.3);
|
|
--tag-radius: 2em;
|
|
|
|
/* Nav */
|
|
--nav-indentation-guide-color: rgba(136, 192, 208, 0.2);
|
|
--nav-item-color: #8898b0;
|
|
--nav-item-color-active: #eceff4;
|
|
--nav-item-background-active: #3b4456;
|
|
--nav-item-background-hover: #353d4d;
|
|
|
|
/* Workspace */
|
|
--tab-background-active: #2e3440;
|
|
--titlebar-background: #232831;
|
|
--titlebar-background-focused: #232831;
|
|
--status-bar-background: #292f3a;
|
|
--checkbox-border-color: #88c0d0;
|
|
|
|
/* Tables */
|
|
--table-border-color: #3b4252;
|
|
--table-header-background: #292f3a;
|
|
--table-row-background-hover: rgba(136, 192, 208, 0.07);
|
|
|
|
/* Shadows */
|
|
--shadow-s: 0 1px 4px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);
|
|
--shadow-l: 0 4px 20px rgba(0,0,0,0.35), 0 12px 48px rgba(0,0,0,0.25);
|
|
|
|
--font-interface-theme: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--line-height-normal: 1.65;
|
|
--file-line-width: 720px;
|
|
}
|
|
|
|
/* Nordic Slate — explicit heading hierarchy */
|
|
body.lumen-nordic-slate .markdown-rendered h1,
|
|
body.lumen-nordic-slate .cm-editor .HyperMD-header-1 {
|
|
font-size: 2.1em; font-weight: 600; color: #eceff4;
|
|
}
|
|
body.lumen-nordic-slate .markdown-rendered h2,
|
|
body.lumen-nordic-slate .cm-editor .HyperMD-header-2 {
|
|
font-size: 1.65em; font-weight: 600; color: #e5e9f0;
|
|
}
|
|
body.lumen-nordic-slate .markdown-rendered h3,
|
|
body.lumen-nordic-slate .cm-editor .HyperMD-header-3 {
|
|
font-size: 1.32em; font-weight: 500; color: #d8dee9;
|
|
}
|
|
body.lumen-nordic-slate .markdown-rendered h4,
|
|
body.lumen-nordic-slate .cm-editor .HyperMD-header-4 {
|
|
font-size: 1.12em; font-weight: 500; color: #cdd4e2;
|
|
}
|
|
body.lumen-nordic-slate .markdown-rendered h5,
|
|
body.lumen-nordic-slate .cm-editor .HyperMD-header-5 {
|
|
font-size: 1em; font-weight: 600; color: #8898b0;
|
|
text-transform: uppercase; letter-spacing: 0.07em;
|
|
}
|
|
body.lumen-nordic-slate .markdown-rendered h6,
|
|
body.lumen-nordic-slate .cm-editor .HyperMD-header-6 {
|
|
font-size: 0.9em; font-weight: 400; color: #56637a;
|
|
}
|
|
|
|
/* Nordic Slate — h1 subtle border */
|
|
body.lumen-nordic-slate .markdown-rendered h1 {
|
|
border-bottom: 1px solid #3b4252;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
/* Nordic Slate — links */
|
|
body.lumen-nordic-slate .markdown-rendered .internal-link,
|
|
body.lumen-nordic-slate .markdown-rendered .external-link {
|
|
color: #88c0d0;
|
|
text-decoration: none;
|
|
background-image: linear-gradient(to right, #88c0d0, #88c0d0);
|
|
background-size: 0 1.5px;
|
|
background-position: 0 100%;
|
|
background-repeat: no-repeat;
|
|
transition: background-size 0.22s ease-out;
|
|
}
|
|
body.lumen-nordic-slate .markdown-rendered .internal-link:hover,
|
|
body.lumen-nordic-slate .markdown-rendered .external-link:hover {
|
|
background-size: 100% 1.5px;
|
|
}
|
|
|
|
/* Nordic Slate — blockquote */
|
|
body.lumen-nordic-slate .markdown-rendered blockquote {
|
|
border-left: 3px solid #5e81ac;
|
|
background: rgba(136, 192, 208, 0.07);
|
|
border-radius: 0 6px 6px 0;
|
|
padding: 8px 18px;
|
|
margin: 0 0 16px;
|
|
color: #b4bece;
|
|
}
|
|
|
|
/* Nordic Slate — bold / italic */
|
|
body.lumen-nordic-slate .markdown-rendered strong,
|
|
body.lumen-nordic-slate .cm-strong { color: #88c0d0; font-weight: 700; }
|
|
body.lumen-nordic-slate .markdown-rendered em,
|
|
body.lumen-nordic-slate .cm-em { color: #a3be8c; font-style: italic; }
|
|
|
|
/* Nordic Slate — inline code */
|
|
body.lumen-nordic-slate .markdown-rendered code,
|
|
body.lumen-nordic-slate .cm-inline-code {
|
|
background: rgba(136, 192, 208, 0.12);
|
|
color: #88c0d0;
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
10 · SOFT DUSK (dark)
|
|
Mauve/purple-grey, dusty rose & lavender, editorial dark
|
|
═══════════════════════════════════════════════════ */
|
|
body.lumen-soft-dusk {
|
|
/* Backgrounds */
|
|
--background-primary: #2d2535;
|
|
--background-primary-alt: #28202e;
|
|
--background-secondary: #28202f;
|
|
--background-secondary-alt: #221a29;
|
|
--background-modifier-border: #3a2f44;
|
|
--background-modifier-border-hover: #4a3d58;
|
|
--background-modifier-hover: #332840;
|
|
--background-modifier-active-hover: #3d3149;
|
|
--background-modifier-form-field: #332840;
|
|
--divider-color: #3a2f44;
|
|
|
|
/* Text */
|
|
--text-normal: #d4c5d8;
|
|
--text-muted: #9888a4;
|
|
--text-faint: #5e5068;
|
|
--text-on-accent: #1e1628;
|
|
--text-accent: #e0a8b8;
|
|
--text-accent-hover:#ecc0cc;
|
|
--text-selection: rgba(224, 168, 184, 0.2);
|
|
--text-highlight-bg:rgba(224, 168, 184, 0.22);
|
|
|
|
/* Accent chain */
|
|
--interactive-accent: #e0a8b8;
|
|
--interactive-accent-hover: #ecc0cc;
|
|
--interactive-accent-rgb: 224, 168, 184;
|
|
--color-accent: #e0a8b8;
|
|
--color-accent-1: #ecc0cc;
|
|
--color-accent-2: #cc90a4;
|
|
|
|
/* Links */
|
|
--link-color: #e0a8b8;
|
|
--link-color-hover: #ecc0cc;
|
|
--link-external-color: #c8a4d4;
|
|
--link-external-color-hover:#d4b8e0;
|
|
--link-unresolved-color: #5e5068;
|
|
--link-decoration: none;
|
|
--link-external-decoration: none;
|
|
|
|
/* Headings */
|
|
--h1-color: #f0e4ed;
|
|
--h2-color: #e4d6e2;
|
|
--h3-color: #d8c8dc;
|
|
--h4-color: #cdbcd2;
|
|
--h5-color: #9888a4;
|
|
--h6-color: #6a5c74;
|
|
--h1-weight: 600;
|
|
--h2-weight: 600;
|
|
--h3-weight: 500;
|
|
--h4-weight: 500;
|
|
--h5-weight: 600;
|
|
--h6-weight: 400;
|
|
--h1-size: 2.1em;
|
|
--h2-size: 1.65em;
|
|
--h3-size: 1.32em;
|
|
--h4-size: 1.12em;
|
|
--h5-size: 1em;
|
|
--h6-size: 0.88em;
|
|
/* Bold / Italic */
|
|
--bold-color: #e0a8b8;
|
|
--bold-weight: 700;
|
|
--italic-color: #c8a4d4;
|
|
|
|
/* Code */
|
|
--code-background: #241c2c;
|
|
--code-normal: #d4c5d8;
|
|
--code-comment: #6a5a72;
|
|
--code-function: #b8a5d4;
|
|
--code-keyword: #c8a4d4;
|
|
--code-string: #d4a8a8;
|
|
--code-value: #e6c098;
|
|
--code-operator: #c8a4d4;
|
|
--code-punctuation:#8a7a90;
|
|
--code-tag: #e0a8b8;
|
|
--code-property: #b8a5d4;
|
|
--code-size: 0.88em;
|
|
|
|
/* Blockquote */
|
|
--blockquote-border-color: #b8a5d4;
|
|
--blockquote-border-thickness: 3px;
|
|
--blockquote-background-color: rgba(224, 168, 184, 0.07);
|
|
--blockquote-color: #b4a4bc;
|
|
--blockquote-font-style: italic;
|
|
|
|
/* Tags */
|
|
--tag-color: #e0a8b8;
|
|
--tag-background: rgba(224, 168, 184, 0.1);
|
|
--tag-background-hover: rgba(224, 168, 184, 0.2);
|
|
--tag-border-color: rgba(224, 168, 184, 0.28);
|
|
--tag-radius: 2em;
|
|
|
|
/* Nav */
|
|
--nav-indentation-guide-color: rgba(224, 168, 184, 0.18);
|
|
--nav-item-color: #9888a4;
|
|
--nav-item-color-active: #f0e4ed;
|
|
--nav-item-background-active: #3d3149;
|
|
--nav-item-background-hover: #332840;
|
|
|
|
/* Workspace */
|
|
--tab-background-active: #2d2535;
|
|
--titlebar-background: #221a29;
|
|
--titlebar-background-focused: #221a29;
|
|
--status-bar-background: #28202f;
|
|
--checkbox-border-color: #e0a8b8;
|
|
|
|
/* Tables */
|
|
--table-border-color: #3a2f44;
|
|
--table-header-background: #28202f;
|
|
--table-row-background-hover: rgba(224, 168, 184, 0.06);
|
|
|
|
/* Shadows */
|
|
--shadow-s: 0 1px 4px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);
|
|
--shadow-l: 0 4px 20px rgba(0,0,0,0.35), 0 12px 48px rgba(0,0,0,0.25);
|
|
|
|
/* Typography */
|
|
--font-interface-theme: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--line-height-normal: 1.7;
|
|
--file-line-width: 720px;
|
|
}
|
|
|
|
/* Soft Dusk — explicit heading hierarchy */
|
|
body.lumen-soft-dusk .markdown-rendered h1,
|
|
body.lumen-soft-dusk .cm-editor .HyperMD-header-1 {
|
|
font-size: 2.1em; font-weight: 600; color: #f0e4ed;
|
|
}
|
|
body.lumen-soft-dusk .markdown-rendered h2,
|
|
body.lumen-soft-dusk .cm-editor .HyperMD-header-2 {
|
|
font-size: 1.65em; font-weight: 600; color: #e4d6e2;
|
|
}
|
|
body.lumen-soft-dusk .markdown-rendered h3,
|
|
body.lumen-soft-dusk .cm-editor .HyperMD-header-3 {
|
|
font-size: 1.32em; font-weight: 500; color: #d8c8dc;
|
|
}
|
|
body.lumen-soft-dusk .markdown-rendered h4,
|
|
body.lumen-soft-dusk .cm-editor .HyperMD-header-4 {
|
|
font-size: 1.12em; font-weight: 500; color: #cdbcd2;
|
|
}
|
|
body.lumen-soft-dusk .markdown-rendered h5,
|
|
body.lumen-soft-dusk .cm-editor .HyperMD-header-5 {
|
|
font-size: 1em; font-weight: 600; color: #9888a4;
|
|
text-transform: uppercase; letter-spacing: 0.07em;
|
|
}
|
|
body.lumen-soft-dusk .markdown-rendered h6,
|
|
body.lumen-soft-dusk .cm-editor .HyperMD-header-6 {
|
|
font-size: 0.9em; font-weight: 400; color: #6a5c74;
|
|
}
|
|
|
|
/* Soft Dusk — h1 subtle border */
|
|
body.lumen-soft-dusk .markdown-rendered h1 {
|
|
border-bottom: 1px solid #4a3d58;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
/* Soft Dusk — links */
|
|
body.lumen-soft-dusk .markdown-rendered .internal-link,
|
|
body.lumen-soft-dusk .markdown-rendered .external-link {
|
|
color: #e0a8b8;
|
|
text-decoration: none;
|
|
background-image: linear-gradient(to right, #e0a8b8, #e0a8b8);
|
|
background-size: 0 1.5px;
|
|
background-position: 0 100%;
|
|
background-repeat: no-repeat;
|
|
transition: background-size 0.22s ease-out;
|
|
}
|
|
body.lumen-soft-dusk .markdown-rendered .internal-link:hover,
|
|
body.lumen-soft-dusk .markdown-rendered .external-link:hover {
|
|
background-size: 100% 1.5px;
|
|
}
|
|
|
|
/* Soft Dusk — blockquote */
|
|
body.lumen-soft-dusk .markdown-rendered blockquote {
|
|
border-left: 3px solid #b8a5d4;
|
|
background: rgba(224, 168, 184, 0.07);
|
|
border-radius: 0 6px 6px 0;
|
|
padding: 8px 18px;
|
|
margin: 0 0 16px;
|
|
color: #b4a4bc;
|
|
}
|
|
|
|
/* Soft Dusk — bold / italic */
|
|
body.lumen-soft-dusk .markdown-rendered strong,
|
|
body.lumen-soft-dusk .cm-strong { color: #e0a8b8; font-weight: 700; }
|
|
body.lumen-soft-dusk .markdown-rendered em,
|
|
body.lumen-soft-dusk .cm-em { color: #c8a4d4; font-style: italic; }
|
|
|
|
/* Soft Dusk — inline code */
|
|
body.lumen-soft-dusk .markdown-rendered code,
|
|
body.lumen-soft-dusk .cm-inline-code {
|
|
background: rgba(200, 164, 212, 0.12);
|
|
color: #c8a4d4;
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
12 · TOKYO NIGHT (dark)
|
|
Deep indigo, electric blue + violet syntax, dev-focused
|
|
═══════════════════════════════════════════════════ */
|
|
body.lumen-tokyo-night {
|
|
/* Backgrounds */
|
|
--background-primary: #1a1b26;
|
|
--background-primary-alt: #16171f;
|
|
--background-secondary: #16161e;
|
|
--background-secondary-alt: #101019;
|
|
--background-modifier-border: #2a2b3d;
|
|
--background-modifier-border-hover: #373858;
|
|
--background-modifier-hover: #1f2030;
|
|
--background-modifier-active-hover: #283457;
|
|
--background-modifier-form-field: #1f2030;
|
|
--divider-color: #2a2b3d;
|
|
|
|
/* Text */
|
|
--text-normal: #c0c8e8;
|
|
--text-muted: #7a84b0;
|
|
--text-faint: #454868;
|
|
--text-on-accent: #1a1b26;
|
|
--text-accent: #7aa2f7;
|
|
--text-accent-hover:#9bbcff;
|
|
--text-selection: rgba(122, 162, 247, 0.2);
|
|
--text-highlight-bg:rgba(122, 162, 247, 0.22);
|
|
|
|
/* Accent chain */
|
|
--interactive-accent: #7aa2f7;
|
|
--interactive-accent-hover: #9bbcff;
|
|
--interactive-accent-rgb: 122, 162, 247;
|
|
--color-accent: #7aa2f7;
|
|
--color-accent-1: #9bbcff;
|
|
--color-accent-2: #5882d8;
|
|
|
|
/* Links */
|
|
--link-color: #7aa2f7;
|
|
--link-color-hover: #9bbcff;
|
|
--link-external-color: #7dcfff;
|
|
--link-external-color-hover:#9ddeff;
|
|
--link-unresolved-color: #454868;
|
|
--link-decoration: none;
|
|
--link-external-decoration: none;
|
|
|
|
/* Headings */
|
|
--h1-color: #c0caf5;
|
|
--h2-color: #b4bef0;
|
|
--h3-color: #a9b1d6;
|
|
--h4-color: #9ba5cc;
|
|
--h5-color: #7a84b0;
|
|
--h6-color: #565f89;
|
|
--h1-weight: 700;
|
|
--h2-weight: 600;
|
|
--h3-weight: 600;
|
|
--h4-weight: 500;
|
|
--h5-weight: 600;
|
|
--h6-weight: 400;
|
|
--h1-size: 2.1em;
|
|
--h2-size: 1.65em;
|
|
--h3-size: 1.32em;
|
|
--h4-size: 1.12em;
|
|
--h5-size: 1em;
|
|
--h6-size: 0.88em;
|
|
|
|
/* Bold / Italic */
|
|
--bold-color: #7aa2f7;
|
|
--bold-weight: 700;
|
|
--italic-color: #bb9af7;
|
|
|
|
/* Code */
|
|
--code-background: #13131e;
|
|
--code-normal: #a9b1d6;
|
|
--code-comment: #565f89;
|
|
--code-function: #7aa2f7;
|
|
--code-keyword: #bb9af7;
|
|
--code-string: #9ece6a;
|
|
--code-value: #ff9e64;
|
|
--code-operator: #89ddff;
|
|
--code-punctuation:#565f89;
|
|
--code-tag: #f7768e;
|
|
--code-property: #73daca;
|
|
--code-size: 0.88em;
|
|
|
|
/* Blockquote */
|
|
--blockquote-border-color: #7dcfff;
|
|
--blockquote-border-thickness: 3px;
|
|
--blockquote-background-color: rgba(122, 162, 247, 0.07);
|
|
--blockquote-color: #8a93b8;
|
|
--blockquote-font-style: normal;
|
|
|
|
/* Tags */
|
|
--tag-color: #7aa2f7;
|
|
--tag-background: rgba(122, 162, 247, 0.1);
|
|
--tag-background-hover: rgba(122, 162, 247, 0.2);
|
|
--tag-border-color: rgba(122, 162, 247, 0.28);
|
|
--tag-radius: 4px;
|
|
|
|
/* Nav */
|
|
--nav-indentation-guide-color: rgba(122, 162, 247, 0.18);
|
|
--nav-item-color: #7a84b0;
|
|
--nav-item-color-active: #c0caf5;
|
|
--nav-item-background-active: #283457;
|
|
--nav-item-background-hover: #1f2030;
|
|
|
|
/* Workspace */
|
|
--tab-background-active: #1a1b26;
|
|
--titlebar-background: #101019;
|
|
--titlebar-background-focused: #101019;
|
|
--status-bar-background: #16161e;
|
|
--checkbox-border-color: #7aa2f7;
|
|
|
|
/* Tables */
|
|
--table-border-color: #2a2b3d;
|
|
--table-header-background: #16161e;
|
|
--table-row-background-hover: rgba(122, 162, 247, 0.07);
|
|
|
|
/* Shadows */
|
|
--shadow-s: 0 1px 4px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.28);
|
|
--shadow-l: 0 4px 20px rgba(0,0,0,0.45), 0 12px 48px rgba(0,0,0,0.32);
|
|
|
|
--font-interface-theme: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--line-height-normal: 1.65;
|
|
--file-line-width: 720px;
|
|
}
|
|
|
|
/* Tokyo Night — explicit heading hierarchy */
|
|
body.lumen-tokyo-night .markdown-rendered h1,
|
|
body.lumen-tokyo-night .cm-editor .HyperMD-header-1 {
|
|
font-size: 2.1em; font-weight: 700; color: #c0caf5;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
body.lumen-tokyo-night .markdown-rendered h2,
|
|
body.lumen-tokyo-night .cm-editor .HyperMD-header-2 {
|
|
font-size: 1.65em; font-weight: 600; color: #b4bef0;
|
|
}
|
|
body.lumen-tokyo-night .markdown-rendered h3,
|
|
body.lumen-tokyo-night .cm-editor .HyperMD-header-3 {
|
|
font-size: 1.32em; font-weight: 600; color: #a9b1d6;
|
|
}
|
|
body.lumen-tokyo-night .markdown-rendered h4,
|
|
body.lumen-tokyo-night .cm-editor .HyperMD-header-4 {
|
|
font-size: 1.12em; font-weight: 500; color: #9ba5cc;
|
|
}
|
|
body.lumen-tokyo-night .markdown-rendered h5,
|
|
body.lumen-tokyo-night .cm-editor .HyperMD-header-5 {
|
|
font-size: 1em; font-weight: 600; color: #7a84b0;
|
|
text-transform: uppercase; letter-spacing: 0.07em;
|
|
}
|
|
body.lumen-tokyo-night .markdown-rendered h6,
|
|
body.lumen-tokyo-night .cm-editor .HyperMD-header-6 {
|
|
font-size: 0.9em; font-weight: 400; color: #565f89;
|
|
}
|
|
|
|
/* Tokyo Night — h1 subtle border */
|
|
body.lumen-tokyo-night .markdown-rendered h1 {
|
|
border-bottom: 1px solid #2a2b3d;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
/* Tokyo Night — links */
|
|
body.lumen-tokyo-night .markdown-rendered .internal-link,
|
|
body.lumen-tokyo-night .markdown-rendered .external-link {
|
|
color: #7aa2f7;
|
|
text-decoration: none;
|
|
background-image: linear-gradient(to right, #7aa2f7, #7aa2f7);
|
|
background-size: 0 1.5px;
|
|
background-position: 0 100%;
|
|
background-repeat: no-repeat;
|
|
transition: background-size 0.22s ease-out;
|
|
}
|
|
body.lumen-tokyo-night .markdown-rendered .internal-link:hover,
|
|
body.lumen-tokyo-night .markdown-rendered .external-link:hover {
|
|
background-size: 100% 1.5px;
|
|
}
|
|
|
|
/* Tokyo Night — blockquote */
|
|
body.lumen-tokyo-night .markdown-rendered blockquote {
|
|
border-left: 3px solid #7dcfff;
|
|
background: rgba(122, 162, 247, 0.07);
|
|
border-radius: 0 6px 6px 0;
|
|
padding: 8px 18px;
|
|
margin: 0 0 16px;
|
|
color: #8a93b8;
|
|
}
|
|
|
|
/* Tokyo Night — bold / italic */
|
|
body.lumen-tokyo-night .markdown-rendered strong,
|
|
body.lumen-tokyo-night .cm-strong { color: #7aa2f7; font-weight: 700; }
|
|
body.lumen-tokyo-night .markdown-rendered em,
|
|
body.lumen-tokyo-night .cm-em { color: #bb9af7; font-style: italic; }
|
|
|
|
/* Tokyo Night — inline code */
|
|
body.lumen-tokyo-night .markdown-rendered code,
|
|
body.lumen-tokyo-night .cm-inline-code {
|
|
background: rgba(122, 162, 247, 0.1);
|
|
color: #7aa2f7;
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
font-size: 0.88em;
|
|
}
|