415 lines
13 KiB
CSS
415 lines
13 KiB
CSS
/* Wasp — Obsidian theme by Santi Younger */
|
|
|
|
/* Shared (both color schemes) — per Obsidian "Build a theme" guidance */
|
|
body {
|
|
--font-monospace: "Source Code Pro", monospace;
|
|
/* Heading scale (reading + live preview) — matches Obsidian defaults */
|
|
--h1-size: 1.802em;
|
|
--h2-size: 1.556em;
|
|
--h3-size: 1.344em;
|
|
--h4-size: 1.167em;
|
|
--h5-size: 1.067em;
|
|
--h6-size: 1em;
|
|
--h1-weight: 700;
|
|
--h2-weight: 600;
|
|
--h3-weight: 600;
|
|
--h4-weight: 600;
|
|
--h5-weight: 600;
|
|
--h6-weight: 600;
|
|
}
|
|
|
|
/* ── Dark palette ─────────────────────────────────────────────────────────── */
|
|
.theme-dark {
|
|
/* Base scale — required for community palette contrast checks (WCAG 4.5:1 on base-10) */
|
|
--color-base-00: #191919;
|
|
--color-base-05: #1f1f1f;
|
|
--color-base-10: #242424;
|
|
--color-base-20: #2a2a2a;
|
|
--color-base-25: #323232;
|
|
--color-base-30: #3d3d3d;
|
|
--color-base-35: #4a4a44;
|
|
--color-base-40: #5c5c54;
|
|
--color-base-50: #9a9284;
|
|
--color-base-60: #bdae93;
|
|
--color-base-70: #d4c9a8;
|
|
--color-base-100: #faf2d6;
|
|
|
|
--background-primary: var(--color-base-10);
|
|
--background-primary-alt: var(--color-base-10);
|
|
--background-secondary: var(--color-base-00);
|
|
--background-secondary-alt: var(--color-base-30);
|
|
--background-modifier-border: #f8c537;
|
|
--background-modifier-hover: rgba(255, 255, 255, 0.06);
|
|
|
|
--text-normal: #faf2d6;
|
|
--text-faint: #bdae93;
|
|
--text-muted: #bdae93;
|
|
--h1-color: #f8c537;
|
|
--h2-color: #E8D49A;
|
|
--h3-color: #D49335;
|
|
--h4-color: #E0E0E0;
|
|
--h5-color: #C9BEA8;
|
|
--h6-color: #bdae93;
|
|
--text-title-h1: var(--h1-color);
|
|
--text-title-h2: var(--h2-color);
|
|
--text-title-h3: var(--h3-color);
|
|
--text-title-h4: var(--h4-color);
|
|
--text-title-h5: var(--h5-color);
|
|
--text-title-h6: var(--h6-color);
|
|
--text-highlight-bg: #640211;
|
|
--text-link: #83a598;
|
|
--text-a: #f8c537;
|
|
--text-a-hover: #83a598;
|
|
--text-accent: #f8c537;
|
|
--text-accent-hover: #D49335;
|
|
--text-on-accent: #1A2023;
|
|
--text-selection: #f8c537;
|
|
|
|
--inline-code: #83a598;
|
|
--code-block: #83a598;
|
|
--pre-code: #3D3D3D;
|
|
--interactive-accent: #f8c537;
|
|
--interactive-accent-rgb: 248, 197, 55;
|
|
--interactive-before: #9a9284;
|
|
--vim-cursor: #f8c537;
|
|
|
|
/* Graph view */
|
|
--graph-node: rgb(var(--interactive-accent-rgb));
|
|
--graph-line: rgb(var(--interactive-accent-rgb));
|
|
--graph-node-focused: rgb(var(--interactive-accent-rgb));
|
|
--graph-text: var(--text-normal);
|
|
|
|
--callout-title-color: var(--text-normal);
|
|
|
|
/* File tree — hover subtle; active = darker amber + white text (not bright gold) */
|
|
--wasp-nav-active-background: #7A5C14;
|
|
--nav-item-background-hover: var(--background-modifier-hover);
|
|
--nav-item-background-active: var(--wasp-nav-active-background);
|
|
--nav-item-color-hover: var(--text-normal);
|
|
--nav-item-color-active: #ffffff;
|
|
--nav-collapse-icon-color: var(--text-faint);
|
|
--nav-collapse-icon-color-collapsed: var(--text-faint);
|
|
|
|
/* Wasp-specific UI (settings buttons, etc.) */
|
|
--button-bg-color: #D49335;
|
|
--button-text-color: #242424;
|
|
--button-hover-bg-color: #DAA520;
|
|
--button-hover-text-color: #1A2023;
|
|
|
|
--text-sub-accent: var(--text-accent);
|
|
}
|
|
|
|
/* ── Light palette ────────────────────────────────────────────────────────── */
|
|
.theme-light {
|
|
/* Base scale — required for community palette contrast checks (WCAG 4.5:1 on base-10) */
|
|
--color-base-00: #faf6f0;
|
|
--color-base-05: #fffcf7;
|
|
--color-base-10: #faf6f0;
|
|
--color-base-20: #e8dfd0;
|
|
--color-base-25: #ddd4c4;
|
|
--color-base-30: #c9b8a8;
|
|
--color-base-35: #b0a090;
|
|
--color-base-40: #968878;
|
|
--color-base-50: #7a6f5f;
|
|
--color-base-60: #6b5e4f;
|
|
--color-base-70: #5c5044;
|
|
--color-base-100: #2c2419;
|
|
|
|
--background-primary: var(--color-base-10);
|
|
--background-primary-alt: var(--color-base-05);
|
|
--background-secondary: var(--color-base-20);
|
|
--background-secondary-alt: var(--color-base-30);
|
|
--background-modifier-border: #C87628;
|
|
--background-modifier-hover: rgba(120, 72, 24, 0.08);
|
|
|
|
--text-normal: #2C2419;
|
|
--text-faint: #6B5E4F;
|
|
--text-muted: #5C5044;
|
|
--h1-color: #9A4E12;
|
|
--h2-color: #924e14;
|
|
--h3-color: #8f5514;
|
|
--h4-color: #8F4F14;
|
|
--h5-color: #7A4310;
|
|
--h6-color: #6B3A0E;
|
|
--text-title-h1: var(--h1-color);
|
|
--text-title-h2: var(--h2-color);
|
|
--text-title-h3: var(--h3-color);
|
|
--text-title-h4: var(--h4-color);
|
|
--text-title-h5: var(--h5-color);
|
|
--text-title-h6: var(--h6-color);
|
|
--text-link: #9b4218;
|
|
--text-a: #9B3A1A;
|
|
--text-a-hover: #9b4218;
|
|
--text-accent: #9B3A1A;
|
|
--text-accent-hover: #9b4218;
|
|
--text-on-accent: #1F1A14;
|
|
--text-selection: #E4C07A;
|
|
--text-highlight-bg: #F0E0B8;
|
|
--text-white: #FFFCF7;
|
|
|
|
--inline-code: #3D6B5C;
|
|
--pre-code: #EDE6DA;
|
|
--interactive-accent: #D4922A;
|
|
--interactive-accent-rgb: 212, 146, 42;
|
|
--interactive-before: #6b5e4f;
|
|
--vim-cursor: #9B3A1A;
|
|
|
|
--graph-node: rgb(var(--interactive-accent-rgb));
|
|
--graph-line: rgb(var(--interactive-accent-rgb));
|
|
--graph-node-focused: rgb(var(--interactive-accent-rgb));
|
|
--graph-text: var(--text-normal);
|
|
|
|
--callout-title-color: var(--text-normal);
|
|
|
|
--nav-item-background-hover: var(--background-modifier-hover);
|
|
--nav-item-background-active: var(--background-modifier-border);
|
|
--nav-item-color-hover: var(--text-normal);
|
|
--nav-item-color-active: var(--text-on-accent);
|
|
|
|
/* Workspace tabs — clear bar vs active pane */
|
|
--tab-container-background: #E8DFD0;
|
|
--tab-background-active: var(--background-primary);
|
|
--tab-text-color: #5C5044;
|
|
--tab-text-color-active: #1F1A14;
|
|
--tab-text-color-focused: #5C5044;
|
|
--tab-text-color-focused-active: #1F1A14;
|
|
--tab-text-color-focused-highlighted: #1F1A14;
|
|
--tab-text-color-focused-active-current: #1F1A14;
|
|
--tab-divider-color: #C9B8A8;
|
|
--tab-outline-color: #C87628;
|
|
--tab-font-weight: 500;
|
|
--tab-font-weight-active: 600;
|
|
|
|
--list-marker-color: var(--text-muted);
|
|
--indentation-guide-color: #6b5e4f;
|
|
|
|
--button-bg-color: #C87628;
|
|
--button-text-color: #1F1A14;
|
|
--button-hover-bg-color: #A85C18;
|
|
--button-hover-text-color: #FFFCF7;
|
|
|
|
--text-sub-accent: var(--text-accent);
|
|
}
|
|
|
|
/* Dark: active file row — ensure white label/icons on darker amber bar */
|
|
.theme-dark .tree-item-self.nav-file-title.is-active,
|
|
.theme-dark .tree-item-self.nav-folder-title.is-active {
|
|
--icon-color: var(--nav-item-color-active);
|
|
}
|
|
|
|
.theme-dark .tree-item-self.nav-file-title.is-active .tree-item-inner,
|
|
.theme-dark .tree-item-self.nav-folder-title.is-active .tree-item-inner,
|
|
.theme-dark .tree-item-self.nav-file-title.is-active .nav-file-title-content,
|
|
.theme-dark .tree-item-self.nav-folder-title.is-active .nav-folder-title-content,
|
|
.theme-dark .tree-item-self.nav-file-title.is-active .svg-icon,
|
|
.theme-dark .tree-item-self.nav-folder-title.is-active .svg-icon,
|
|
.theme-dark .tree-item-self.nav-file-title.is-active svg,
|
|
.theme-dark .tree-item-self.nav-folder-title.is-active svg {
|
|
color: var(--nav-item-color-active);
|
|
stroke: var(--nav-item-color-active);
|
|
}
|
|
|
|
/* ── Dark: selection & search (gold highlight needs dark foreground) ───── */
|
|
.theme-dark .cm-s-obsidian span.obsidian-search-match-highlight {
|
|
color: var(--text-normal);
|
|
background-color: #483699;
|
|
}
|
|
|
|
.theme-dark ::selection,
|
|
.theme-dark .markdown-preview-view ::selection,
|
|
.theme-dark .markdown-rendered ::selection,
|
|
.theme-dark .markdown-source-view.mod-cm6 .cm-editor .cm-line ::selection,
|
|
.theme-dark .cm-editor .cm-line ::selection {
|
|
background-color: var(--text-selection);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.theme-dark .markdown-source-view.mod-cm6 .cm-editor .cm-selectionBackground,
|
|
.theme-dark .markdown-source-view.mod-cm6 .cm-editor .cm-selectionMatchBackground,
|
|
.theme-dark .cm-editor .cm-selectionBackground,
|
|
.theme-dark .cm-editor .cm-selectionMatchBackground {
|
|
background-color: var(--text-selection);
|
|
}
|
|
|
|
.theme-dark .cm-editor .cm-selection {
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
/* ── Light: selection, tabs, editor syntax ──────────────────────────────── */
|
|
.theme-light ::selection,
|
|
.theme-light .markdown-preview-view ::selection,
|
|
.theme-light .markdown-rendered ::selection,
|
|
.theme-light .markdown-source-view.mod-cm6 .cm-editor .cm-line ::selection,
|
|
.theme-light .cm-editor .cm-line ::selection {
|
|
background-color: var(--text-selection);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.theme-light .markdown-source-view.mod-cm6 .cm-editor .cm-selectionBackground,
|
|
.theme-light .markdown-source-view.mod-cm6 .cm-editor .cm-selectionMatchBackground,
|
|
.theme-light .cm-editor .cm-selectionBackground,
|
|
.theme-light .cm-editor .cm-selectionMatchBackground {
|
|
background-color: var(--text-selection);
|
|
}
|
|
|
|
.theme-light .cm-editor .cm-selection {
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
/* Light: workspace tab chrome (icons + titles follow tab variables) */
|
|
.theme-light .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-title,
|
|
.theme-light .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-icon {
|
|
color: var(--tab-text-color);
|
|
opacity: 1;
|
|
}
|
|
|
|
.theme-light .workspace-tab-header.is-active .workspace-tab-header-inner-title,
|
|
.theme-light .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
|
|
.theme-light .workspace-tab-header.is-active .workspace-tab-header-status-icon {
|
|
color: var(--tab-text-color-focused-active);
|
|
}
|
|
|
|
.theme-light .workspace-tab-header.is-active .svg-icon,
|
|
.theme-light .workspace-tab-header.is-active svg {
|
|
color: var(--tab-text-color-focused-active);
|
|
stroke: var(--tab-text-color-focused-active);
|
|
}
|
|
|
|
/* Light: faint editor markers — quotes/callouts only (not bold/italic) */
|
|
.theme-light .cm-s-obsidian span.cm-formatting-quote,
|
|
.theme-light .cm-s-obsidian span.cm-hmd-callout,
|
|
.theme-light .cm-s-obsidian span.cm-quote,
|
|
.theme-light .cm-s-obsidian .cm-line:not(.cm-active) span.cm-formatting-quote,
|
|
.theme-light .cm-s-obsidian .cm-line:not(.cm-active) span.cm-hmd-callout,
|
|
.theme-light .cm-s-obsidian .cm-line:not(.cm-active) span.cm-quote {
|
|
color: var(--text-muted);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Headings: sizes/weights on body, colors on .theme-* — Obsidian applies them in reading + edit (#10) */
|
|
|
|
/* Graph view highlights (WebGL bridge) */
|
|
.theme-dark .graph-view.color-circle,
|
|
.theme-dark .graph-view.color-fill-highlight,
|
|
.theme-dark .graph-view.color-line-highlight,
|
|
.theme-light .graph-view.color-circle,
|
|
.theme-light .graph-view.color-fill-highlight,
|
|
.theme-light .graph-view.color-line-highlight {
|
|
color: rgb(var(--interactive-accent-rgb));
|
|
}
|
|
|
|
/* ── Misc editor / UI ───────────────────────────────────────────────────── */
|
|
.cm-s-obsidian span.cm-formatting-link {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
body .markdown-source-view .CodeMirror-guttermarker-subtle {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.theme-light .vertical-tab-header-group-title {
|
|
color: var(--text-white);
|
|
}
|
|
|
|
/*-----------------------------------------*/
|
|
/* End of main theme, extra functionality can be added below */
|
|
|
|
.markdown-source-view {
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
body .cm-fat-cursor .CodeMirror-cursor {
|
|
background-color: var(--vim-cursor);
|
|
opacity: 0.8;
|
|
width: 9px;
|
|
visibility: visible;
|
|
}
|
|
|
|
button.mod-cta {
|
|
background-color: var(--button-bg-color);
|
|
color: var(--button-text-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
button.mod-cta:hover,
|
|
button.mod-cta:focus {
|
|
background-color: var(--button-hover-bg-color);
|
|
color: var(--button-text-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.vertical-tab-nav-item.is-active {
|
|
background-color: var(--button-bg-color);
|
|
color: var(--button-text-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.vertical-tab-nav-item.is-active:hover,
|
|
.vertical-tab-nav-item.is-active:focus {
|
|
background-color: var(--button-hover-bg-color);
|
|
color: var(--button-text-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
body:not(.is-phone) .vertical-tab-nav-item.is-active {
|
|
--background-modifier-hover: var(--button-hover-bg-color);
|
|
--icon-color: var(--button-text-color);
|
|
background-color: var(--button-bg-color);
|
|
color: var(--button-text-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
body:not(.is-phone) .vertical-tab-nav-item.is-active:hover,
|
|
body:not(.is-phone) .vertical-tab-nav-item.is-active:focus {
|
|
background-color: var(--button-hover-bg-color);
|
|
color: var(--button-text-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.checkbox-container.is-enabled {
|
|
background-color: var(--button-bg-color);
|
|
color: var(--button-text-color);
|
|
}
|
|
|
|
.checkbox-container.is-enabled:hover,
|
|
.checkbox-container.is-enabled:focus {
|
|
background-color: var(--button-hover-bg-color);
|
|
color: var(--button-text-color);
|
|
}
|
|
|
|
.flair.mod-pop {
|
|
background-color: var(--button-bg-color);
|
|
color: var(--button-text-color);
|
|
}
|
|
|
|
.flair.mod-pop:hover,
|
|
.flair.mod-pop:focus {
|
|
background-color: var(--button-hover-bg-color);
|
|
color: var(--button-text-color);
|
|
}
|
|
|
|
/** hr styles — PREVIEW MODE */
|
|
.cm-line hr,
|
|
.markdown-preview-view hr {
|
|
margin-block-start: 4em;
|
|
margin-block-end: 4em;
|
|
border: none;
|
|
height: 0;
|
|
border-bottom: 1px solid;
|
|
border-image-slice: 1;
|
|
border-width: 1px;
|
|
border-image-source: linear-gradient(to right, transparent, var(--text-accent), transparent);
|
|
}
|
|
|
|
.cm-line hr::after,
|
|
.markdown-preview-view hr::after {
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transform-origin: 50% 50%;
|
|
padding: 0.5rem;
|
|
color: var(--text-sub-accent);
|
|
background-color: var(--background-primary);
|
|
}
|