obsidian-theme/evielync_hyo-theme
1
0
Fork 0
mirror of https://github.com/evielync/hyo-theme.git synced 2026-07-22 05:00:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
evielync_hyo-theme/theme.css
Ev Chapman 0856ede4f2 Hyo v1.0.0 — warm, earthy Obsidian theme with peach accent 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-17 05:53:28 +10:00

839 lines
28 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* ============================================================
Hyo — Obsidian Theme
A warm, earthy theme built on the Hyo design system.
Accent: Peach (#D97757) | Editor: white | Sidebar: parchment
============================================================ */
/* ── Light mode ─────────────────────────────────────────── */
.theme-light {
/* Accent */
--color-accent-hsl: 15, 63%, 60%;
--color-accent: #D97757;
--color-accent-1: #C15F3C;
--color-accent-2: #E49E86;
--interactive-accent: #D97757;
--interactive-accent-hover: #C15F3C;
--interactive-accent-rgb: 217, 119, 87;
/* Backgrounds — white editor, parchment sidebar */
--background-primary: #FFFFFF;
--background-primary-alt: #FAF7F2;
--background-secondary: #F3EFE8;
--background-secondary-alt: #EDE8E0;
--background-modifier-hover: rgba(217, 119, 87, 0.08);
--background-modifier-active-hover: rgba(217, 119, 87, 0.14);
--background-modifier-border: #E5DED5;
--background-modifier-border-hover: #D4C8BC;
--background-modifier-border-focus: #D97757;
--background-modifier-error: rgba(199, 107, 107, 0.12);
--background-modifier-error-hover: rgba(199, 107, 107, 0.18);
--background-modifier-success: rgba(107, 158, 122, 0.12);
--background-modifier-form-field: #FFFFFF;
/* Text */
--text-normal: #2D2A26;
--text-muted: #7A7268;
--text-faint: #A69E94;
--text-on-accent: #FFFFFF;
--text-on-accent-muted: rgba(255, 255, 255, 0.8);
--text-accent: #D97757;
--text-accent-hover: #C15F3C;
--text-error: #C76B6B;
--text-warning: #D4A053;
--text-success: #6B9E7A;
--text-selection: rgba(217, 119, 87, 0.22);
--text-highlight-bg: rgba(217, 119, 87, 0.18);
--text-highlight-bg-active: rgba(217, 119, 87, 0.32);
/* Interactive */
--interactive-normal: #F5F1EB;
--interactive-hover: #EDE8E0;
/* Colour scale */
--color-base-00: #FFFFFF;
--color-base-05: #FAF7F2;
--color-base-10: #F5F1EB;
--color-base-20: #EDE8E0;
--color-base-25: #E8E2D8;
--color-base-30: #E5DED5;
--color-base-35: #D9D2C8;
--color-base-40: #C8BFB4;
--color-base-50: #A69E94;
--color-base-60: #7A7268;
--color-base-70: #5C554C;
--color-base-100: #2D2A26;
/* Tags */
--tag-color: #C15F3C;
--tag-background: rgba(217, 119, 87, 0.1);
--tag-background-hover: rgba(217, 119, 87, 0.18);
--tag-border-color: rgba(217, 119, 87, 0.3);
/* Code */
--code-background: #FAF7F2;
--code-normal: #2D2A26;
--code-comment: #A69E94;
--code-keyword: #C15F3C;
--code-string: #6B9E7A;
--code-function: #D97757;
--code-operator: #7A7268;
/* Callouts */
--callout-default: 217, 119, 87;
--callout-info: 107, 158, 255;
--callout-tip: 107, 158, 122;
--callout-warning: 212, 160, 83;
--callout-error: 199, 107, 107;
/* Tabs */
--tab-background-active: rgba(217, 119, 87, 0.1);
--tab-text-color: #A69E94;
--tab-text-color-active: #7A7268;
--tab-text-color-focused: #A69E94;
--tab-text-color-focused-active: #D97757;
--tab-text-color-focused-highlighted: #D97757;
--tab-outline-color: #E5DED5;
}
/* ── Dark mode ──────────────────────────────────────────── */
.theme-dark {
/* Accent */
--color-accent-hsl: 15, 63%, 60%;
--color-accent: #D97757;
--color-accent-1: #DF8D72;
--color-accent-2: #C15F3C;
--interactive-accent: #D97757;
--interactive-accent-hover: #DF8D72;
--interactive-accent-rgb: 217, 119, 87;
/* Backgrounds */
--background-primary: #222220;
--background-primary-alt: #191917;
--background-secondary: #1E1E1C;
--background-secondary-alt: #191917;
--background-modifier-hover: rgba(217, 119, 87, 0.08);
--background-modifier-active-hover: rgba(217, 119, 87, 0.14);
--background-modifier-border: #353532;
--background-modifier-border-hover: #4A4A46;
--background-modifier-border-focus: #D97757;
--background-modifier-error: rgba(212, 122, 122, 0.12);
--background-modifier-error-hover: rgba(212, 122, 122, 0.18);
--background-modifier-success: rgba(125, 182, 140, 0.12);
--background-modifier-form-field: #2C2C29;
/* Text */
--text-normal: #E8E4DE;
--text-muted: #A8A29A;
--text-faint: #706C66;
--text-on-accent: #191917;
--text-on-accent-muted: rgba(25, 25, 23, 0.8);
--text-accent: #D97757;
--text-accent-hover: #DF8D72;
--text-error: #D47A7A;
--text-warning: #D4A053;
--text-success: #7DB68C;
--text-selection: rgba(217, 119, 87, 0.22);
--text-highlight-bg: rgba(217, 119, 87, 0.18);
--text-highlight-bg-active: rgba(217, 119, 87, 0.32);
/* Interactive */
--interactive-normal: #2C2C29;
--interactive-hover: #353532;
/* Colour scale */
--color-base-00: #191917;
--color-base-05: #1C1C1A;
--color-base-10: #222220;
--color-base-20: #2C2C29;
--color-base-25: #323230;
--color-base-30: #353532;
--color-base-35: #3E3E3B;
--color-base-40: #4A4A46;
--color-base-50: #706C66;
--color-base-60: #A8A29A;
--color-base-70: #C8C2BA;
--color-base-100: #E8E4DE;
/* Tags */
--tag-color: #D97757;
--tag-background: rgba(217, 119, 87, 0.1);
--tag-background-hover: rgba(217, 119, 87, 0.18);
--tag-border-color: rgba(217, 119, 87, 0.25);
/* Code */
--code-background: #1C1C1A;
--code-normal: #E8E4DE;
--code-comment: #706C66;
--code-keyword: #DF8D72;
--code-string: #7DB68C;
--code-function: #D97757;
--code-operator: #A8A29A;
/* Callouts */
--callout-default: 217, 119, 87;
--callout-info: 107, 158, 255;
--callout-tip: 125, 182, 140;
--callout-warning: 212, 160, 83;
--callout-error: 212, 122, 122;
/* Tabs */
--tab-background-active: rgba(217, 119, 87, 0.12);
--tab-text-color: #706C66;
--tab-text-color-active: #A8A29A;
--tab-text-color-focused: #706C66;
--tab-text-color-focused-active: #D97757;
--tab-text-color-focused-highlighted: #D97757;
--tab-outline-color: #353532;
}
/* ── Shared / structural ────────────────────────────────── */
body {
--radius-s: 6px;
--radius-m: 10px;
--radius-l: 14px;
--radius-xl: 18px;
--input-radius: 8px;
--tab-radius: 6px;
--button-radius: 8px;
--toggle-radius: 99px;
--checkbox-radius: 4px;
--font-interface: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
--font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
--font-monospace: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Menlo', monospace;
--font-text-size: 16px;
--line-height-normal: 1.65;
--line-height-tight: 1.3;
--font-ui-small: 12px;
--font-ui-smaller: 11px;
--font-ui-medium: 13px;
--font-ui-large: 15px;
/* Nav — matching Hyo's 15px / weight 450 tree items */
--nav-item-size: 15px;
--nav-item-weight: 450;
--nav-item-weight-active: 450; /* keep same as normal — weight change on hover/active causes visual jump */
--nav-item-color: var(--text-muted);
--nav-item-color-hover: var(--text-normal);
--nav-item-color-active: var(--text-accent);
--nav-item-background-hover: var(--background-modifier-hover);
--nav-item-background-active: rgba(217, 119, 87, 0.1);
--nav-indentation-guide-color: var(--background-modifier-border);
--nav-item-padding: 3px 8px; /* matches Hyo tree-row padding: 3px 12px */
}
/* ── Scrollbars ─────────────────────────────────────────── */
.theme-light ::-webkit-scrollbar-thumb { background: #D9D2C8; }
.theme-light ::-webkit-scrollbar-thumb:hover { background: #C8BFB4; }
.theme-dark ::-webkit-scrollbar-thumb { background: #353532; }
.theme-dark ::-webkit-scrollbar-thumb:hover { background: #4A4A46; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
/* ── Selection ──────────────────────────────────────────── */
.theme-light ::selection { background: rgba(217, 119, 87, 0.22); }
.theme-dark ::selection { background: rgba(217, 119, 87, 0.28); }
/* ── Tabs ───────────────────────────────────────────────── */
/* Active tab — warm background, terracotta title via CSS var + direct selector */
.workspace-tab-header.is-active,
.workspace-tab-header.is-active.mod-active {
background-color: var(--tab-background-active) !important;
}
.workspace-tab-header.is-active .workspace-tab-header-inner-title,
.workspace-tab-header.is-active.mod-active .workspace-tab-header-inner-title {
color: var(--interactive-accent) !important;
font-weight: 500;
}
/* Modified/unsaved dot — accent colour */
.workspace-tab-header-status-icon {
color: var(--interactive-accent) !important;
}
/* ── File explorer ──────────────────────────────────────── */
/* Row height — matches Hyo's tree-row padding: 3px 12px */
.nav-folder-title,
.nav-file-title {
font-size: 15px;
color: var(--text-muted);
padding: 3px 8px;
border-radius: var(--radius-s);
gap: 4px;
line-height: 1.4;
/* Prevent antialiasing shift on hover (makes text appear to change weight) */
-webkit-font-smoothing: antialiased;
}
/* Folders */
.nav-folder-title {
font-weight: 500;
color: var(--text-normal);
}
.nav-folder-title:hover {
color: var(--text-normal);
background: var(--background-modifier-hover);
font-weight: 500 !important;
}
/* Folder collapse arrow — warm brown */
.nav-folder-collapse-indicator {
color: #C15F3C !important;
}
/* Folder icon — exact Hyo path, fill #D97757 stroke #C15F3C, 20×20 */
.nav-folder-title-content::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 4px;
vertical-align: middle;
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2z' fill='%23D97757' stroke='%23C15F3C' stroke-width='1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* Files */
.nav-file-title {
font-weight: 450;
}
.nav-file-title:hover {
color: var(--text-normal);
background: var(--background-modifier-hover);
font-weight: 450 !important;
}
/* File icon — document shape SVG matching Hyo's getFileIcon exactly.
data-path is on .nav-file-title, NOT .nav-file — selectors corrected. */
.nav-file-title-content::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 4px;
vertical-align: middle;
flex-shrink: 0;
/* Default: warm grey document, no badge — matches Hyo's fallback #B0A898 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' fill='%23B0A898' stroke='%239A9080' stroke-width='1'/%3E%3Cpath d='M14 2v6h6' fill='%239A9080' opacity='0.3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* .md — blue #7BA4C7, badge M */
.nav-file-title[data-path$=".md"] .nav-file-title-content::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' fill='%237BA4C7' stroke='%236890B0' stroke-width='1'/%3E%3Cpath d='M14 2v6h6' fill='%236890B0' opacity='0.3'/%3E%3Ctext x='12' y='17.5' text-anchor='middle' fill='white' font-size='7' font-weight='600' font-family='system-ui'%3EM%3C/text%3E%3C/svg%3E");
}
/* .json — amber #C7A44E, badge {} */
.nav-file-title[data-path$=".json"] .nav-file-title-content::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' fill='%23C7A44E' stroke='%23B09040' stroke-width='1'/%3E%3Cpath d='M14 2v6h6' fill='%23B09040' opacity='0.3'/%3E%3Ctext x='12' y='17.5' text-anchor='middle' fill='white' font-size='6' font-weight='600' font-family='system-ui'%3E%7B%7D%3C/text%3E%3C/svg%3E");
}
/* .js/.jsx — yellow #C9B458, badge JS */
.nav-file-title[data-path$=".js"] .nav-file-title-content::before,
.nav-file-title[data-path$=".jsx"] .nav-file-title-content::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' fill='%23C9B458' stroke='%23B0A040' stroke-width='1'/%3E%3Cpath d='M14 2v6h6' fill='%23B0A040' opacity='0.3'/%3E%3Ctext x='12' y='17.5' text-anchor='middle' fill='white' font-size='6' font-weight='600' font-family='system-ui'%3EJS%3C/text%3E%3C/svg%3E");
}
/* .ts/.tsx — blue-purple, badge TS */
.nav-file-title[data-path$=".ts"] .nav-file-title-content::before,
.nav-file-title[data-path$=".tsx"] .nav-file-title-content::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' fill='%237B8DC7' stroke='%236A7CB0' stroke-width='1'/%3E%3Cpath d='M14 2v6h6' fill='%236A7CB0' opacity='0.3'/%3E%3Ctext x='12' y='17.5' text-anchor='middle' fill='white' font-size='6' font-weight='600' font-family='system-ui'%3ETS%3C/text%3E%3C/svg%3E");
}
/* .sh — green #8BB070, badge > */
.nav-file-title[data-path$=".sh"] .nav-file-title-content::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' fill='%238BB070' stroke='%2378A05E' stroke-width='1'/%3E%3Cpath d='M14 2v6h6' fill='%2378A05E' opacity='0.3'/%3E%3Ctext x='12' y='17.5' text-anchor='middle' fill='white' font-size='9' font-weight='600' font-family='system-ui'%3E%3E%3C/text%3E%3C/svg%3E");
}
/* .css — purple-blue #7B8DC7, badge # */
.nav-file-title[data-path$=".css"] .nav-file-title-content::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' fill='%237B8DC7' stroke='%236A7CB0' stroke-width='1'/%3E%3Cpath d='M14 2v6h6' fill='%236A7CB0' opacity='0.3'/%3E%3Ctext x='12' y='17.5' text-anchor='middle' fill='white' font-size='8' font-weight='700' font-family='system-ui'%3E%23%3C/text%3E%3C/svg%3E");
}
/* .html/.htm — red #C77B6B, badge <> */
.nav-file-title[data-path$=".html"] .nav-file-title-content::before,
.nav-file-title[data-path$=".htm"] .nav-file-title-content::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' fill='%23C77B6B' stroke='%23B06A5A' stroke-width='1'/%3E%3Cpath d='M14 2v6h6' fill='%23B06A5A' opacity='0.3'/%3E%3Ctext x='12' y='17.5' text-anchor='middle' fill='white' font-size='6' font-weight='600' font-family='system-ui'%3E%3C%3E%3C/text%3E%3C/svg%3E");
}
/* .txt — grey #A69E94, no badge */
.nav-file-title[data-path$=".txt"] .nav-file-title-content::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' fill='%23A69E94' stroke='%238A8279' stroke-width='1'/%3E%3Cpath d='M14 2v6h6' fill='%238A8279' opacity='0.3'/%3E%3C/svg%3E");
}
/* Active file — accent treatment */
.nav-file-title.is-active {
color: var(--text-accent) !important;
background: rgba(217, 119, 87, 0.1) !important;
font-weight: 500;
}
.nav-file-title.is-active .nav-file-title-content::before {
opacity: 0.75;
}
/* File extension tag */
.nav-file-tag {
color: var(--text-faint);
font-size: 10px;
}
/* ── Editor / document typography — matching Hyo desktop ── */
/* Max width + padding matching Hyo's doc-preview */
.markdown-source-view.mod-cm6 .cm-scroller,
.markdown-reading-view .markdown-rendered {
padding: 32px 40px;
}
.markdown-rendered {
max-width: 800px;
margin: 0 auto;
line-height: 1.65;
}
/* Paragraphs */
.markdown-rendered p {
margin: 0 0 0.75em;
}
/* Headings — coloured text + accent borders */
.markdown-rendered h1,
.markdown-source-view.mod-cm6 .HyperMD-header-1 {
font-size: 1.8em;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.3;
margin: 1.2em 0 0.8em;
color: #2D2A26 !important;
padding-bottom: 0.3em;
border-bottom: 2px solid #D97757;
}
/* Space below H1 border — push the next line down */
.markdown-source-view.mod-cm6 .HyperMD-header-1 + .cm-line {
padding-top: 12px !important;
}
.markdown-rendered h2,
.markdown-source-view.mod-cm6 .HyperMD-header-2 {
font-size: 1.4em;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
margin: 1.2em 0 0.4em;
color: #C15F3C !important;
}
.markdown-rendered h3,
.markdown-source-view.mod-cm6 .HyperMD-header-3 {
font-size: 1.2em;
font-weight: 600;
line-height: 1.3;
margin: 1.2em 0 0.4em;
color: #7A7268 !important;
}
/* Dark mode heading colours */
.theme-dark .markdown-rendered h1,
.theme-dark .markdown-source-view.mod-cm6 .HyperMD-header-1 {
color: #E8E4DE !important;
border-bottom-color: #D97757;
}
.theme-dark .markdown-rendered h2,
.theme-dark .markdown-source-view.mod-cm6 .HyperMD-header-2 {
color: #D97757 !important;
}
.theme-dark .markdown-rendered h3,
.theme-dark .markdown-source-view.mod-cm6 .HyperMD-header-3 {
color: #A8A29A !important;
}
/* Lists — outline-grade visual hierarchy */
.markdown-rendered ul,
.markdown-rendered ol {
padding-left: 1.8em;
margin: 0 0 0.75em;
}
/* Top-level bullets: full weight, generous spacing */
.markdown-rendered li {
margin: 0.4em 0;
line-height: 1.65;
}
/* Nested lists: tighter spacing, don't need as much air */
.markdown-rendered li li {
margin: 0.2em 0;
}
/* Deep nesting: even tighter */
.markdown-rendered li li li {
margin: 0.1em 0;
}
/* Bullet markers — distinct shapes per level (reading view) */
.markdown-rendered ul { list-style: none !important; }
.markdown-rendered ul > li { position: relative; padding-left: 0.4em; }
/* Level 1: filled circle */
.markdown-rendered ul > li::before {
content: "" !important;
position: absolute;
left: -1.2em;
top: 0.55em;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #D97757;
}
/* Level 2: open circle */
.markdown-rendered ul ul > li::before {
width: 6px;
height: 6px;
background-color: transparent;
border: 1.5px solid #D97757;
}
/* Level 3: filled square */
.markdown-rendered ul ul ul > li::before {
width: 5px;
height: 5px;
border-radius: 1px;
background-color: #7A7268;
border: none;
}
/* Level 4: open circle — faint */
.markdown-rendered ul ul ul ul > li::before {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: transparent;
border: 1.5px solid #A69E94;
}
/* Ordered list markers */
.markdown-rendered ol > li::marker {
color: #D97757 !important;
font-weight: 600;
}
.markdown-rendered ol > li li::marker {
color: #7A7268 !important;
font-weight: 500;
}
/* Bold text in lists — slightly warmer for emphasis */
.markdown-rendered li strong {
color: var(--text-normal);
font-weight: 650;
}
/* ── Lists — Live Preview / Editor ─────────────────────── */
/* Distinct shapes per level, generous spacing, prominent markers */
/* Spacing — tighter */
.markdown-source-view.mod-cm6 .HyperMD-list-line-1 {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
.markdown-source-view.mod-cm6 .HyperMD-list-line-2 {
padding-top: 1px !important;
padding-bottom: 1px !important;
}
.markdown-source-view.mod-cm6 .HyperMD-list-line-3,
.markdown-source-view.mod-cm6 .HyperMD-list-line-4 {
padding-top: 1px !important;
padding-bottom: 1px !important;
}
/* Hide indent guide lines in editor */
.markdown-source-view.mod-cm6 .cm-indent::before {
border-color: transparent !important;
}
/* ── Bullet colours + shapes per nesting level ── */
/* All levels: set marker colour variable */
.markdown-source-view.mod-cm6 .HyperMD-list-line-1 {
--list-marker-color: #D97757 !important;
}
.markdown-source-view.mod-cm6 .HyperMD-list-line-2 {
--list-marker-color: #C15F3C !important;
}
.markdown-source-view.mod-cm6 .HyperMD-list-line-3 {
--list-marker-color: #7A7268 !important;
}
.markdown-source-view.mod-cm6 .HyperMD-list-line-4 {
--list-marker-color: #A69E94 !important;
}
/* Gap between dot and text */
.markdown-source-view.mod-cm6 .list-bullet {
margin-right: 6px !important;
}
/* Level 1: filled circle */
.markdown-source-view.mod-cm6 .HyperMD-list-line-1 .list-bullet::after {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background-color: #D97757 !important;
}
/* Level 2: open circle */
.markdown-source-view.mod-cm6 .HyperMD-list-line-2 .list-bullet::after {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background-color: transparent !important;
border: 1.5px solid #C15F3C !important;
}
/* Level 3: filled square */
.markdown-source-view.mod-cm6 .HyperMD-list-line-3 .list-bullet::after {
width: 5px !important;
height: 5px !important;
border-radius: 1px !important;
background-color: #7A7268 !important;
}
/* Level 4: open circle — faint */
.markdown-source-view.mod-cm6 .HyperMD-list-line-4 .list-bullet::after {
width: 5px !important;
height: 5px !important;
border-radius: 50% !important;
background-color: transparent !important;
border: 1.5px solid #A69E94 !important;
}
/* ── Links ──────────────────────────────────────────────── */
a,
.cm-s-obsidian span.cm-link,
.cm-s-obsidian span.cm-url {
color: var(--text-accent);
text-decoration: none;
}
a:hover {
color: var(--text-accent-hover);
text-decoration: underline;
}
/* ── Buttons ────────────────────────────────────────────── */
button.mod-cta {
background: var(--interactive-accent);
color: var(--text-on-accent);
border-radius: var(--button-radius);
}
button.mod-cta:hover {
background: var(--interactive-accent-hover);
}
/* ── Inline code ────────────────────────────────────────── */
.markdown-rendered code,
.cm-s-obsidian span.cm-inline-code {
background: var(--code-background);
border-radius: 4px;
padding: 1px 5px;
font-size: 0.88em;
}
/* ── Horizontal Rule / Divider — Hyo circles centred ───── */
/* .cm-line.hr hr = the rendered <hr> in Live Preview (folded state).
Learned from Encore theme: this is the correct selector, not .HyperMD-hr. */
.markdown-rendered hr,
.cm-line.hr hr {
border: none !important;
height: 40px;
position: relative;
overflow: visible;
margin: 0.25em 0;
}
/* Line across */
.markdown-rendered hr::before,
.cm-line.hr hr::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--background-modifier-border);
}
/* Hyo circles centred */
.markdown-rendered hr::after,
.cm-line.hr hr::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
background-color: var(--background-primary);
padding: 0 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 25 84 70'%3E%3Cdefs%3E%3CclipPath id='lc'%3E%3Ccircle cx='44' cy='53' r='28'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='44' cy='53' r='28' fill='%23BF8A55'/%3E%3Ccircle cx='72' cy='67' r='28' fill='%23B5616C'/%3E%3Cg clip-path='url(%23lc)'%3E%3Ccircle cx='72' cy='67' r='28' fill='%238E4A3D'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
}
/* Dark mode — lighter Hyo circles */
.theme-dark .markdown-rendered hr::after,
.theme-dark .cm-line.hr hr::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 25 84 70'%3E%3Cdefs%3E%3CclipPath id='lc'%3E%3Ccircle cx='44' cy='53' r='28'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='44' cy='53' r='28' fill='%23D4A574'/%3E%3Ccircle cx='72' cy='67' r='28' fill='%23C97B84'/%3E%3Cg clip-path='url(%23lc)'%3E%3Ccircle cx='72' cy='67' r='28' fill='%23A8604E'/%3E%3C/g%3E%3C/svg%3E");
}
/* ── Blockquotes ────────────────────────────────────────── */
.markdown-rendered blockquote {
border-left-color: var(--interactive-accent);
background: rgba(217, 119, 87, 0.06);
border-radius: 0 var(--radius-s) var(--radius-s) 0;
font-style: italic;
}
/* Editor / Live Preview blockquote styling */
.markdown-source-view.mod-cm6 .HyperMD-quote {
background-color: rgba(217, 119, 87, 0.10) !important;
font-style: italic;
}
/* First line of a quote group — top padding + top-right corner */
.markdown-source-view.mod-cm6 :not(.HyperMD-quote) + .HyperMD-quote {
padding-top: 6px !important;
border-top-right-radius: var(--radius-s);
}
/* Last line of a quote group — bottom padding + bottom-right corner */
.markdown-source-view.mod-cm6 .HyperMD-quote:has(+ :not(.HyperMD-quote)),
.markdown-source-view.mod-cm6 .HyperMD-quote:last-child {
padding-bottom: 6px !important;
border-bottom-right-radius: var(--radius-s);
}
/* ── Custom callout: [!comment] — margin notes to self ──── */
.callout[data-callout="comment"] {
--callout-color: 217, 119, 87;
--callout-icon: message-circle;
background: rgba(217, 119, 87, 0.10) !important;
border-width: 0 0 0 3px !important;
border-style: solid !important;
border-color: rgba(217, 119, 87, 0.6) !important;
border-radius: 0 var(--radius-s) var(--radius-s) 0 !important;
box-shadow: none !important;
}
.callout[data-callout="comment"] .callout-content {
font-style: italic;
padding-top: 6px;
}
/* ── Checkboxes ─────────────────────────────────────────── */
.task-list-item-checkbox:checked {
background: var(--interactive-accent);
border-color: var(--interactive-accent);
}
/* ── Inputs / Search ────────────────────────────────────── */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea {
border-radius: var(--input-radius);
}
.search-input-container input:focus {
border-color: var(--background-modifier-border-focus);
}
/* ── Status bar ─────────────────────────────────────────── */
.status-bar {
font-size: var(--font-ui-smaller);
}
/* ── Graph view ─────────────────────────────────────────── */
.graph-view.color-fill { color: var(--interactive-accent); }
.graph-view.color-line { color: var(--background-modifier-border); }
.graph-view.color-text { color: var(--text-muted); }
.graph-view.color-fill-tag { color: #D4A053; }
.graph-view.color-fill-attachment { color: #6B9E7A; }
.graph-view.color-fill-unresolved { color: var(--text-faint); }
/* ── Bases — full width ─────────────────────────────────── */
.bases-embed,
.bases-view,
.bases-container,
.ob-base,
.base-view,
.cm-embed-block:has(.bases-embed),
.cm-embed-block:has(.base-view) {
max-width: 100% !important;
width: 100% !important;
}
.is-readable-line-width .bases-embed,
.is-readable-line-width .bases-view,
.is-readable-line-width .bases-container,
.is-readable-line-width .ob-base,
.is-readable-line-width .base-view {
max-width: 100% !important;
width: 100% !important;
}
/* ── Bases — table stretch + left-align ─────────────────── */
.ob-base table,
.base-view table,
.bases-view table {
width: 100% !important;
text-align: left !important;
}
.ob-base td,
.ob-base th,
.base-view td,
.base-view th,
.bases-view td,
.bases-view th {
text-align: left !important;
}
Reference in a new issue View git blame Copy permalink