mirror of
https://github.com/flynt-theme/flynt-obsidian.git
synced 2026-07-22 04:50:22 +00:00
01ce724db5
Root theme.css was stale: em heading sizes, wrong error color (rose instead of ember), line-height 1.5 instead of 1.4.
693 lines
26 KiB
CSS
693 lines
26 KiB
CSS
/* Flynt - Warm tones. Zero visual noise. */
|
|
/* https://github.com/flynt-theme/flynt-obsidian */
|
|
|
|
/* ══════════════════════════════════════════════════════════ Dark */
|
|
body.theme-dark {
|
|
color-scheme: dark;
|
|
|
|
/* Backgrounds */
|
|
--background-primary: #100E0C;
|
|
--background-primary-alt: #1C1916;
|
|
--background-secondary: #1C1916;
|
|
--background-secondary-alt: #262220;
|
|
--background-modifier-hover: rgba(245,237,216, 0.04);
|
|
--background-modifier-active-hover: rgba(245,237,216, 0.06);
|
|
--background-modifier-border: #322F2B;
|
|
--background-modifier-border-focus: #403C38;
|
|
--background-modifier-border-hover: #403C38;
|
|
--background-modifier-error: rgba(198,55,42, 0.15);
|
|
--background-modifier-error-hover: rgba(198,55,42, 0.25);
|
|
--background-modifier-success: rgba(147,174,66, 0.15);
|
|
--background-modifier-message: rgba(16,14,12, 0.9);
|
|
--background-modifier-form-field: rgba(0,0,0,0.15);
|
|
|
|
/* Typography */
|
|
--font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
--font-interface: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
--font-monospace: ui-monospace, "SF Mono", Menlo, monospace;
|
|
--font-text-size: 15px;
|
|
--line-height-normal: 1.4;
|
|
--file-line-width: 680px;
|
|
|
|
--h1-size: 22px; --h1-weight: 600; --h1-line-height: 1.3;
|
|
--h2-size: 19px; --h2-weight: 600; --h2-line-height: 1.4;
|
|
--h3-size: 16px; --h3-weight: 600; --h3-line-height: 1.4;
|
|
--h4-size: 14px; --h4-weight: 600;
|
|
--h5-size: 13px; --h5-weight: 600;
|
|
--h6-size: 13px; --h6-weight: 600;
|
|
|
|
/* Text */
|
|
--text-normal: #79685A;
|
|
--text-muted: #A89A88;
|
|
--text-faint: #79685A;
|
|
--text-on-accent: #100E0C;
|
|
--text-on-accent-inverted: #F5EDD8;
|
|
--text-error: #C6372A;
|
|
--text-warning: #C69F2A;
|
|
--text-success: #93AE42;
|
|
--text-accent: #C69F2A;
|
|
--text-accent-hover: #D5AE39;
|
|
--text-highlight-bg: rgba(198,159,42, 0.2);
|
|
--text-selection: rgba(198,159,42, 0.15);
|
|
|
|
/* Interactive */
|
|
--interactive-normal: #1C1916;
|
|
--interactive-hover: #262220;
|
|
--interactive-accent: #C69F2A;
|
|
--interactive-accent-hover: #D5AE39;
|
|
--interactive-success: #93AE42;
|
|
|
|
/* Accent */
|
|
--color-accent: #C69F2A;
|
|
--color-accent-1: #C69F2A;
|
|
--color-accent-2: #D5AE39;
|
|
|
|
/* Scrollbars */
|
|
--scrollbar-bg: transparent;
|
|
--scrollbar-thumb-bg: rgba(245,237,216, 0.08);
|
|
--scrollbar-active-thumb-bg: rgba(245,237,216, 0.15);
|
|
|
|
/* Window chrome */
|
|
--titlebar-background: #1C1916;
|
|
--titlebar-background-focused: #262220;
|
|
--ribbon-background: #1C1916;
|
|
--ribbon-background-collapsed: #1C1916;
|
|
--statusbar-background: #262220;
|
|
|
|
/* Tabs */
|
|
--tab-background-active: #100E0C;
|
|
--tab-text-color: #79685A;
|
|
--tab-text-color-focused: #A89A88;
|
|
--tab-text-color-focused-active: #F5EDD8;
|
|
--tab-text-color-active: #A89A88;
|
|
--tab-outline-color: #322F2B;
|
|
|
|
/* Sidebar / nav */
|
|
--nav-item-color: #A89A88;
|
|
--nav-item-color-hover: #D8CEBC;
|
|
--nav-item-color-active: #F5EDD8;
|
|
--nav-item-color-selected: #F5EDD8;
|
|
--nav-item-color-highlighted: #C69F2A;
|
|
--nav-item-background-hover: rgba(245,237,216, 0.04);
|
|
--nav-item-background-active: rgba(245,237,216, 0.06);
|
|
--nav-item-background-selected: rgba(245,237,216, 0.06);
|
|
|
|
/* Indentation guides */
|
|
--indentation-guide-color: #322F2B;
|
|
--indentation-guide-color-active: #584F45;
|
|
|
|
/* Accent palette - for use in global CSS rules */
|
|
--flynt-tx: #F5EDD8;
|
|
--flynt-tx2: #D8CEBC;
|
|
--flynt-tx5: #584F45;
|
|
--flynt-amber: #C69F2A;
|
|
--flynt-delft: #427BAE;
|
|
--flynt-teal: #48A8A0;
|
|
--flynt-moss: #93AE42;
|
|
--flynt-rose: #C03054;
|
|
|
|
/* Headings */
|
|
--h1-color: #F5EDD8;
|
|
--h2-color: #D8CEBC;
|
|
--h3-color: #A89A88;
|
|
--h4-color: #79685A;
|
|
--h5-color: #584F45;
|
|
--h6-color: #584F45;
|
|
|
|
/* Links */
|
|
--link-color: #C69F2A;
|
|
--link-color-hover: #D5AE39;
|
|
--link-external-color: #48A8A0;
|
|
--link-external-color-hover: #57B7AF;
|
|
--link-unresolved-color: #BA6836;
|
|
--link-unresolved-opacity: 0.8;
|
|
|
|
/* Inline formatting */
|
|
--bold-color: #A89A88;
|
|
--italic-color: #584F45;
|
|
--bold-italic-color: #A89A88;
|
|
--strikethrough-color: #79685A;
|
|
|
|
/* List markers */
|
|
--list-marker-color: #C69F2A;
|
|
|
|
/* Blockquote */
|
|
--blockquote-border-thickness: 2px;
|
|
--blockquote-border-color: #C69F2A;
|
|
--blockquote-color: #584F45;
|
|
--blockquote-background-color: rgba(198,159,42, 0.05);
|
|
|
|
/* Horizontal rule */
|
|
--hr-color: #322F2B;
|
|
|
|
/* Tables */
|
|
--table-border-color: #262220;
|
|
--table-header-background: #1C1916;
|
|
--table-header-background-hover: #262220;
|
|
|
|
/* Checklist */
|
|
--checklist-done-color: #79685A;
|
|
--checklist-done-decoration: line-through;
|
|
|
|
/* Tags */
|
|
--tag-color: #C69F2A;
|
|
--tag-background: rgba(198,159,42, 0.1);
|
|
--tag-border-color: rgba(198,159,42, 0.3);
|
|
--tag-color-hover: #D5AE39;
|
|
--tag-background-hover: rgba(198,159,42, 0.15);
|
|
--tag-border-color-hover: rgba(198,159,42, 0.5);
|
|
--tag-border-width: 1px;
|
|
--tag-padding-x: 0.5em;
|
|
--tag-padding-y: 0.1em;
|
|
--tag-radius: 4px;
|
|
|
|
/* Graph */
|
|
--graph-node: #79685A;
|
|
--graph-node-tag: #C69F2A;
|
|
--graph-node-attachment: #427BAE;
|
|
--graph-node-unresolved: #584F45;
|
|
--graph-node-focused: #D8CEBC;
|
|
--graph-line: #322F2B;
|
|
--graph-text: #79685A;
|
|
|
|
/* Canvas */
|
|
--canvas-background: #100E0C;
|
|
--canvas-color: #79685A;
|
|
--canvas-dot-pattern: #262220;
|
|
|
|
/* Modal / prompt */
|
|
--modal-background: #1C1916;
|
|
--prompt-background: #1C1916;
|
|
|
|
/* Code */
|
|
--code-background: #1C1916;
|
|
--code-normal: #F5EDD8;
|
|
--code-comment: #584F45;
|
|
--code-function: #C69F2A;
|
|
--code-important: #BA6836;
|
|
--code-keyword: #79685A;
|
|
--code-operator: #C03054;
|
|
--code-property: #A89A88;
|
|
--code-punctuation: #F5EDD8;
|
|
--code-string: #427BAE;
|
|
--code-tag: #93AE42;
|
|
--code-value: #48A8A0;
|
|
}
|
|
|
|
/* Callouts - dark */
|
|
body.theme-dark .callout[data-callout="note"],
|
|
body.theme-dark .callout[data-callout="info"] { --callout-color: 66,123,174; }
|
|
body.theme-dark .callout[data-callout="abstract"],
|
|
body.theme-dark .callout[data-callout="summary"],
|
|
body.theme-dark .callout[data-callout="tldr"] { --callout-color: 72,168,160; }
|
|
body.theme-dark .callout[data-callout="tip"],
|
|
body.theme-dark .callout[data-callout="hint"] { --callout-color: 96,168,72; }
|
|
body.theme-dark .callout[data-callout="success"],
|
|
body.theme-dark .callout[data-callout="check"],
|
|
body.theme-dark .callout[data-callout="done"] { --callout-color: 147,174,66; }
|
|
body.theme-dark .callout[data-callout="question"],
|
|
body.theme-dark .callout[data-callout="help"],
|
|
body.theme-dark .callout[data-callout="faq"] { --callout-color: 198,159,42; }
|
|
body.theme-dark .callout[data-callout="warning"],
|
|
body.theme-dark .callout[data-callout="caution"],
|
|
body.theme-dark .callout[data-callout="attention"] { --callout-color: 186,104,54; }
|
|
body.theme-dark .callout[data-callout="failure"],
|
|
body.theme-dark .callout[data-callout="fail"],
|
|
body.theme-dark .callout[data-callout="missing"] { --callout-color: 198,55,42; }
|
|
body.theme-dark .callout[data-callout="danger"],
|
|
body.theme-dark .callout[data-callout="error"] { --callout-color: 192,48,84; }
|
|
body.theme-dark .callout[data-callout="bug"] { --callout-color: 198,55,42; }
|
|
body.theme-dark .callout[data-callout="example"] { --callout-color: 180,60,124; }
|
|
body.theme-dark .callout[data-callout="quote"],
|
|
body.theme-dark .callout[data-callout="cite"] { --callout-color: 121,104,90; }
|
|
|
|
/* ══════════════════════════════════════════════════════════ Light */
|
|
body.theme-light {
|
|
color-scheme: light;
|
|
|
|
/* Backgrounds */
|
|
--background-primary: #FFFCEF;
|
|
--background-primary-alt: #F2EDDE;
|
|
--background-secondary: #F2EDDE;
|
|
--background-secondary-alt: #E5DFD0;
|
|
--background-modifier-hover: rgba(26,21,18, 0.04);
|
|
--background-modifier-active-hover: rgba(26,21,18, 0.06);
|
|
--background-modifier-border: #D5CFC0;
|
|
--background-modifier-border-focus: #C0B9AA;
|
|
--background-modifier-border-hover: #C0B9AA;
|
|
--background-modifier-error: rgba(198,55,42, 0.12);
|
|
--background-modifier-error-hover: rgba(198,55,42, 0.2);
|
|
--background-modifier-success: rgba(147,174,66, 0.12);
|
|
--background-modifier-message: rgba(242,237,222, 0.95);
|
|
--background-modifier-form-field: rgba(0,0,0,0.04);
|
|
|
|
/* Typography */
|
|
--font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
--font-interface: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
--font-monospace: ui-monospace, "SF Mono", Menlo, monospace;
|
|
--font-text-size: 15px;
|
|
--line-height-normal: 1.4;
|
|
--file-line-width: 680px;
|
|
|
|
--h1-size: 22px; --h1-weight: 600; --h1-line-height: 1.3;
|
|
--h2-size: 19px; --h2-weight: 600; --h2-line-height: 1.4;
|
|
--h3-size: 16px; --h3-weight: 600; --h3-line-height: 1.4;
|
|
--h4-size: 14px; --h4-weight: 600;
|
|
--h5-size: 13px; --h5-weight: 600;
|
|
--h6-size: 13px; --h6-weight: 600;
|
|
|
|
/* Text */
|
|
--text-normal: #8E806F;
|
|
--text-muted: #6A5C4C;
|
|
--text-faint: #8E806F;
|
|
--text-on-accent: #FFFCEF;
|
|
--text-on-accent-inverted: #1A1512;
|
|
--text-error: #C6372A;
|
|
--text-warning: #C69F2A;
|
|
--text-success: #93AE42;
|
|
--text-accent: #C69F2A;
|
|
--text-accent-hover: #B18E25;
|
|
--text-highlight-bg: rgba(198,159,42, 0.2);
|
|
--text-selection: rgba(198,159,42, 0.15);
|
|
|
|
/* Interactive */
|
|
--interactive-normal: #F2EDDE;
|
|
--interactive-hover: #E5DFD0;
|
|
--interactive-accent: #C69F2A;
|
|
--interactive-accent-hover: #B18E25;
|
|
--interactive-success: #93AE42;
|
|
|
|
/* Accent */
|
|
--color-accent: #C69F2A;
|
|
--color-accent-1: #C69F2A;
|
|
--color-accent-2: #B18E25;
|
|
|
|
/* Scrollbars */
|
|
--scrollbar-bg: transparent;
|
|
--scrollbar-thumb-bg: rgba(26,21,18, 0.1);
|
|
--scrollbar-active-thumb-bg: rgba(26,21,18, 0.2);
|
|
|
|
/* Window chrome */
|
|
--titlebar-background: #F2EDDE;
|
|
--titlebar-background-focused: #E5DFD0;
|
|
--ribbon-background: #F2EDDE;
|
|
--ribbon-background-collapsed: #F2EDDE;
|
|
--statusbar-background: #E5DFD0;
|
|
|
|
/* Tabs */
|
|
--tab-background-active: #FFFCEF;
|
|
--tab-text-color: #8E806F;
|
|
--tab-text-color-focused: #6A5C4C;
|
|
--tab-text-color-focused-active: #1A1512;
|
|
--tab-text-color-active: #6A5C4C;
|
|
--tab-outline-color: #D5CFC0;
|
|
|
|
/* Sidebar / nav */
|
|
--nav-item-color: #6A5C4C;
|
|
--nav-item-color-hover: #3D3228;
|
|
--nav-item-color-active: #1A1512;
|
|
--nav-item-color-selected: #1A1512;
|
|
--nav-item-color-highlighted: #C69F2A;
|
|
--nav-item-background-hover: rgba(26,21,18, 0.04);
|
|
--nav-item-background-active: rgba(26,21,18, 0.06);
|
|
--nav-item-background-selected: rgba(26,21,18, 0.06);
|
|
|
|
/* Indentation guides */
|
|
--indentation-guide-color: #D5CFC0;
|
|
--indentation-guide-color-active: #B2A899;
|
|
|
|
/* Accent palette - for use in global CSS rules */
|
|
--flynt-tx: #1A1512;
|
|
--flynt-tx2: #3D3228;
|
|
--flynt-tx5: #B2A899;
|
|
--flynt-amber: #C69F2A;
|
|
--flynt-delft: #427BAE;
|
|
--flynt-teal: #48A8A0;
|
|
--flynt-moss: #93AE42;
|
|
--flynt-rose: #C03054;
|
|
|
|
/* Headings */
|
|
--h1-color: #1A1512;
|
|
--h2-color: #3D3228;
|
|
--h3-color: #6A5C4C;
|
|
--h4-color: #8E806F;
|
|
--h5-color: #B2A899;
|
|
--h6-color: #B2A899;
|
|
|
|
/* Links */
|
|
--link-color: #C69F2A;
|
|
--link-color-hover: #B18E25;
|
|
--link-external-color: #48A8A0;
|
|
--link-external-color-hover: #40968F;
|
|
--link-unresolved-color: #BA6836;
|
|
--link-unresolved-opacity: 0.8;
|
|
|
|
/* Inline formatting */
|
|
--bold-color: #6A5C4C;
|
|
--italic-color: #B2A899;
|
|
--bold-italic-color: #6A5C4C;
|
|
--strikethrough-color: #8E806F;
|
|
|
|
/* List markers */
|
|
--list-marker-color: #C69F2A;
|
|
|
|
/* Blockquote */
|
|
--blockquote-border-thickness: 2px;
|
|
--blockquote-border-color: #C69F2A;
|
|
--blockquote-color: #B2A899;
|
|
--blockquote-background-color: rgba(198,159,42, 0.05);
|
|
|
|
/* Horizontal rule */
|
|
--hr-color: #D5CFC0;
|
|
|
|
/* Tables */
|
|
--table-border-color: #E5DFD0;
|
|
--table-header-background: #F2EDDE;
|
|
--table-header-background-hover: #E5DFD0;
|
|
|
|
/* Checklist */
|
|
--checklist-done-color: #8E806F;
|
|
--checklist-done-decoration: line-through;
|
|
|
|
/* Tags */
|
|
--tag-color: #C69F2A;
|
|
--tag-background: rgba(198,159,42, 0.1);
|
|
--tag-border-color: rgba(198,159,42, 0.3);
|
|
--tag-color-hover: #B18E25;
|
|
--tag-background-hover: rgba(198,159,42, 0.15);
|
|
--tag-border-color-hover: rgba(198,159,42, 0.5);
|
|
--tag-border-width: 1px;
|
|
--tag-padding-x: 0.5em;
|
|
--tag-padding-y: 0.1em;
|
|
--tag-radius: 4px;
|
|
|
|
/* Graph */
|
|
--graph-node: #8E806F;
|
|
--graph-node-tag: #C69F2A;
|
|
--graph-node-attachment: #427BAE;
|
|
--graph-node-unresolved: #B2A899;
|
|
--graph-node-focused: #3D3228;
|
|
--graph-line: #D5CFC0;
|
|
--graph-text: #8E806F;
|
|
|
|
/* Canvas */
|
|
--canvas-background: #FFFCEF;
|
|
--canvas-color: #8E806F;
|
|
--canvas-dot-pattern: #E5DFD0;
|
|
|
|
/* Modal / prompt */
|
|
--modal-background: #F2EDDE;
|
|
--prompt-background: #F2EDDE;
|
|
|
|
/* Code */
|
|
--code-background: #F2EDDE;
|
|
--code-normal: #1A1512;
|
|
--code-comment: #B2A899;
|
|
--code-function: #C69F2A;
|
|
--code-important: #BA6836;
|
|
--code-keyword: #8E806F;
|
|
--code-operator: #C03054;
|
|
--code-property: #6A5C4C;
|
|
--code-punctuation: #1A1512;
|
|
--code-string: #427BAE;
|
|
--code-tag: #93AE42;
|
|
--code-value: #48A8A0;
|
|
}
|
|
|
|
/* Callouts - light */
|
|
body.theme-light .callout[data-callout="note"],
|
|
body.theme-light .callout[data-callout="info"] { --callout-color: 66,123,174; }
|
|
body.theme-light .callout[data-callout="abstract"],
|
|
body.theme-light .callout[data-callout="summary"],
|
|
body.theme-light .callout[data-callout="tldr"] { --callout-color: 72,168,160; }
|
|
body.theme-light .callout[data-callout="tip"],
|
|
body.theme-light .callout[data-callout="hint"] { --callout-color: 96,168,72; }
|
|
body.theme-light .callout[data-callout="success"],
|
|
body.theme-light .callout[data-callout="check"],
|
|
body.theme-light .callout[data-callout="done"] { --callout-color: 147,174,66; }
|
|
body.theme-light .callout[data-callout="question"],
|
|
body.theme-light .callout[data-callout="help"],
|
|
body.theme-light .callout[data-callout="faq"] { --callout-color: 198,159,42; }
|
|
body.theme-light .callout[data-callout="warning"],
|
|
body.theme-light .callout[data-callout="caution"],
|
|
body.theme-light .callout[data-callout="attention"] { --callout-color: 186,104,54; }
|
|
body.theme-light .callout[data-callout="failure"],
|
|
body.theme-light .callout[data-callout="fail"],
|
|
body.theme-light .callout[data-callout="missing"] { --callout-color: 198,55,42; }
|
|
body.theme-light .callout[data-callout="danger"],
|
|
body.theme-light .callout[data-callout="error"] { --callout-color: 192,48,84; }
|
|
body.theme-light .callout[data-callout="bug"] { --callout-color: 198,55,42; }
|
|
body.theme-light .callout[data-callout="example"] { --callout-color: 180,60,124; }
|
|
body.theme-light .callout[data-callout="quote"],
|
|
body.theme-light .callout[data-callout="cite"] { --callout-color: 142,128,111; }
|
|
|
|
/* ══════════════════════════════════════════════════════════ Global rules */
|
|
|
|
/* Obsidian uppercases some interface headings by default; reset for document content */
|
|
h1, h2, h3, h4, h5, h6,
|
|
.markdown-rendered h1,
|
|
.markdown-rendered h2,
|
|
.markdown-rendered h3,
|
|
.markdown-rendered h4,
|
|
.markdown-rendered h5,
|
|
.markdown-rendered h6,
|
|
.HyperMD-header { text-transform: none; }
|
|
|
|
/* ── Inline title */
|
|
.inline-title {
|
|
font-size: var(--h1-size);
|
|
font-weight: var(--h1-weight);
|
|
color: var(--h1-color);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* ── Body text */
|
|
.markdown-rendered {
|
|
line-height: var(--line-height-normal);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* ── Headings: shared font weight */
|
|
h1, h2, h3, h4, h5, h6,
|
|
.cm-s-obsidian .cm-header { font-weight: 600; }
|
|
|
|
/* ── Headings: reading view */
|
|
.markdown-rendered h1 { font-size: var(--h1-size); color: var(--h1-color); letter-spacing: -0.01em; margin-bottom: 8px; }
|
|
.markdown-rendered h2 { font-size: var(--h2-size); color: var(--h2-color); margin-top: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--background-secondary-alt); padding-bottom: 8px; }
|
|
.markdown-rendered h3 { font-size: var(--h3-size); color: var(--h3-color); margin-top: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--background-secondary-alt); padding-bottom: 8px; }
|
|
.markdown-rendered h4 { font-size: var(--h4-size); color: var(--h4-color); margin-top: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--background-secondary-alt); padding-bottom: 8px; }
|
|
.markdown-rendered h5 { font-size: var(--h5-size); color: var(--h5-color); margin-top: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--background-secondary-alt); padding-bottom: 8px; }
|
|
.markdown-rendered h6 { font-size: var(--h6-size); color: var(--h6-color); margin-top: 20px; margin-bottom: 8px; }
|
|
|
|
/* ── Headings: editor */
|
|
.cm-s-obsidian .cm-header-1 { font-size: var(--h1-size); color: var(--h1-color); letter-spacing: -0.01em; }
|
|
.cm-s-obsidian .cm-header-2 { font-size: var(--h2-size); color: var(--h2-color); }
|
|
.cm-s-obsidian .cm-header-3 { font-size: var(--h3-size); color: var(--h3-color); }
|
|
.cm-s-obsidian .cm-header-4 { font-size: var(--h4-size); color: var(--h4-color); }
|
|
.cm-s-obsidian .cm-header-5,
|
|
.cm-s-obsidian .cm-header-6 { font-size: var(--h5-size); color: var(--h5-color); }
|
|
|
|
/* ── Headings: editor spacing + underline
|
|
Border goes on .HyperMD-header-* (the .cm-line block), NOT .cm-header-* (the text span).
|
|
Putting border-bottom on the span splits the heading across two visual lines in the editor. */
|
|
.HyperMD-header-1 { padding-top: 20px; }
|
|
.HyperMD-header-2,
|
|
.HyperMD-header-3,
|
|
.HyperMD-header-4,
|
|
.HyperMD-header-5 {
|
|
border-bottom: 1px solid var(--background-secondary-alt);
|
|
padding-top: 20px;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* ── Inline code */
|
|
.markdown-rendered code,
|
|
.cm-inline-code,
|
|
.cm-s-obsidian .cm-inline-code,
|
|
.cm-editor .cm-line .cm-inline-code {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
background: var(--background-secondary-alt);
|
|
color: var(--flynt-moss) !important; /* !important wins specificity over Obsidian's default code color */
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
vertical-align: middle;
|
|
line-height: 1; /* prevents inline code from inflating surrounding line height */
|
|
}
|
|
|
|
/* ── Code blocks */
|
|
.markdown-rendered pre {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.markdown-rendered pre code {
|
|
background: none;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* No language specified → moss */
|
|
.markdown-rendered pre:not([class*="language-"]) code { color: var(--flynt-moss); }
|
|
|
|
/* Language specified → syntax highlighting via --code-* vars */
|
|
.markdown-rendered pre[class*="language-"] code { color: var(--code-normal); }
|
|
|
|
/* ── List markers (all depths) */
|
|
.markdown-rendered ul li::marker,
|
|
.markdown-rendered ol li::marker,
|
|
.cm-formatting-list { color: var(--list-marker-color); }
|
|
|
|
/* ── Task checkboxes: base alignment */
|
|
.task-list-item-checkbox { vertical-align: middle; position: relative; top: 2px !important; } /* top offset fine-tunes optical alignment; !important beats Obsidian's own positioning */
|
|
|
|
/* [x] done - amber checkmark */
|
|
input[data-task='x']:checked,
|
|
li[data-task='x'] > input:checked,
|
|
li[data-task='x'] > p > input:checked {
|
|
color: var(--flynt-amber);
|
|
--checkbox-marker-color: transparent;
|
|
border: none; border-radius: 0;
|
|
background-image: none;
|
|
background-color: currentColor;
|
|
-webkit-mask-size: var(--checkbox-icon);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
|
|
}
|
|
li[data-task='x'], li[data-task='X'] { color: var(--text-faint); }
|
|
|
|
/* [/] in progress - half-filled amber */
|
|
input[data-task='/']:checked,
|
|
li[data-task='/'] > input:checked,
|
|
li[data-task='/'] > p > input:checked {
|
|
background-image: none; background-color: transparent;
|
|
border-color: var(--flynt-amber);
|
|
position: relative; overflow: hidden;
|
|
}
|
|
input[data-task='/']:checked::after,
|
|
li[data-task='/'] > input:checked::after,
|
|
li[data-task='/'] > p > input:checked::after {
|
|
content: ' '; display: block; position: absolute;
|
|
top: 0; left: 0;
|
|
background-color: var(--flynt-amber);
|
|
width: 50%; height: 100%;
|
|
}
|
|
|
|
/* [-] cancelled - X icon, strikethrough */
|
|
input[data-task='-']:checked,
|
|
li[data-task='-'] > input:checked,
|
|
li[data-task='-'] > p > input:checked {
|
|
color: var(--flynt-tx5);
|
|
--checkbox-marker-color: transparent;
|
|
border: none; border-radius: 0;
|
|
background-image: none;
|
|
background-color: currentColor;
|
|
-webkit-mask-size: var(--checkbox-icon);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
|
|
}
|
|
li[data-task='-'] { color: var(--flynt-tx5); text-decoration: line-through; }
|
|
|
|
/* [!] important - warning icon, rose */
|
|
input[data-task='!']:checked,
|
|
li[data-task='!'] > input:checked,
|
|
li[data-task='!'] > p > input:checked {
|
|
color: var(--flynt-rose);
|
|
--checkbox-marker-color: transparent;
|
|
border: none; border-radius: 0;
|
|
background-image: none;
|
|
background-color: currentColor;
|
|
-webkit-mask-size: var(--checkbox-icon);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* [?] question - teal */
|
|
input[data-task='?']:checked,
|
|
li[data-task='?'] > input:checked,
|
|
li[data-task='?'] > p > input:checked {
|
|
color: var(--flynt-teal);
|
|
--checkbox-marker-color: transparent;
|
|
border: none; border-radius: 0;
|
|
background-image: none;
|
|
background-color: currentColor;
|
|
-webkit-mask-size: var(--checkbox-icon);
|
|
-webkit-mask-position: 50% 50%;
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215c0 1.344-.665 2.288-1.79 2.973c-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712c1.03-.632 1.397-1.135 1.397-2.028c0-.979-.758-1.698-1.926-1.698c-1.009 0-1.71.529-1.938 1.402c-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09c0-.618-.473-1.092-1.095-1.092c-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* ── Blockquote */
|
|
.markdown-rendered blockquote {
|
|
border-left: 2px solid var(--blockquote-border-color);
|
|
background: var(--blockquote-background-color);
|
|
color: var(--blockquote-color);
|
|
font-style: italic;
|
|
margin: 1em 0;
|
|
padding: 10px 16px;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
/* ── Horizontal rule */
|
|
.markdown-rendered hr {
|
|
border: none;
|
|
border-top: 1px solid var(--hr-color);
|
|
margin: 32px 0;
|
|
}
|
|
|
|
/* ── Inline formatting */
|
|
.markdown-rendered strong { color: var(--bold-color); }
|
|
.markdown-rendered em { color: var(--italic-color); }
|
|
.markdown-rendered del { color: var(--strikethrough-color); }
|
|
|
|
/* ── Tables */
|
|
.markdown-rendered table { width: 100%; border-collapse: collapse; }
|
|
|
|
.markdown-rendered th {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: var(--text-faint);
|
|
text-align: left;
|
|
padding: 0 16px 8px 0;
|
|
border-bottom: 1px solid var(--table-border-color);
|
|
}
|
|
|
|
.markdown-rendered td {
|
|
padding: 8px 16px 8px 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
font-size: 13px;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* ── Properties */
|
|
.metadata-container {
|
|
background: var(--background-primary-alt);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.metadata-property-key { color: var(--text-faint); font-size: 12px; }
|
|
.metadata-property-value { color: var(--text-muted); font-size: 12px; }
|
|
|
|
/* ── Footnotes */
|
|
.markdown-rendered .footnotes,
|
|
.markdown-rendered .footnote-ref,
|
|
.markdown-rendered .footnote-backref,
|
|
.cm-footref,
|
|
.HyperMD-footnote,
|
|
.cm-hmd-footnote { color: var(--flynt-tx5); font-size: 12px; }
|
|
|
|
/* ── Tags */
|
|
.tag { font-size: 12px; font-weight: 500; }
|
|
|
|
/* ── Math */
|
|
.math, .math-inline, .math-block, mjx-container,
|
|
.cm-math, .hmd-fold-math-placeholder { color: var(--flynt-tx2); }
|