mirror of
https://github.com/punkyard/obsidian-theme-air.git
synced 2026-07-22 05:00:29 +00:00
934 lines
29 KiB
CSS
934 lines
29 KiB
CSS
/* Punkyard Theme v1.0
|
||
*
|
||
* Features:
|
||
* - All headings (H1-H6) use Obsidian accent color from Settings → Appearance
|
||
* - Bold, italic, highlight text use Obsidian accent color
|
||
* - Ultra dark flat theme (no borders/dividers between panes)
|
||
* - Text is light grey (#CCCCCC), never pure white
|
||
* - Supports both light and dark modes
|
||
*
|
||
* Dark mode colors:
|
||
* - Background: #0A0A0A (primary), #111111 (secondary)
|
||
* - Text: #CCCCCC (normal), #999999 (muted), #666666 (faint)
|
||
*
|
||
* Light mode colors:
|
||
* - Background: #F5F5F5 (primary), #EAEAEA (secondary)
|
||
* - Text: #333333 (normal), #666666 (muted), #999999 (faint)
|
||
*/
|
||
|
||
/* ============================================================
|
||
FONTS
|
||
============================================================ */
|
||
|
||
@font-face {
|
||
font-family: 'Syne';
|
||
src: url('Syne.woff2') format('woff2');
|
||
font-weight: 400 800;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* ============================================================
|
||
GLOBAL — both dark and light modes
|
||
============================================================ */
|
||
|
||
body {
|
||
/* Border radius — zero everywhere */
|
||
--radius-s: 0px;
|
||
--radius-m: 0px;
|
||
--radius-l: 0px;
|
||
--input-radius: 0px;
|
||
--tab-radius-active: 0px;
|
||
--checkbox-radius: 0px;
|
||
--toggle-radius: 0px;
|
||
--toggle-thumb-radius: 0px;
|
||
|
||
/* Tag styling — bare accent-colored text, no pill */
|
||
--tag-padding-x: 0;
|
||
--tag-padding-y: 0;
|
||
--tag-background: transparent;
|
||
--tag-background-hover: transparent;
|
||
--tag-border-width: 0;
|
||
--tag-border-color: transparent;
|
||
--tag-border-color-hover: transparent;
|
||
--tag-radius: 0;
|
||
--tag-color: var(--text-accent);
|
||
--tag-color-hover: var(--text-accent);
|
||
|
||
/* List markers */
|
||
--list-marker-color: var(--h5-color);
|
||
--list-marker-color-hover: var(--text-muted);
|
||
--list-marker-color-collapsed: var(--text-accent);
|
||
|
||
/* Active tab title */
|
||
--tab-text-color-active: var(--text-accent);
|
||
--tab-text-color-focused-active: var(--text-accent);
|
||
}
|
||
|
||
/* ============================================================
|
||
DARK MODE
|
||
============================================================ */
|
||
|
||
.theme-dark {
|
||
--background-primary: #0A0A0A;
|
||
--background-secondary: #111111;
|
||
--background-secondary-alt: #111111;
|
||
--background-primary-alt: #0A0A0A;
|
||
|
||
/* Text */
|
||
--text-normal: color-mix(in srgb, #CCCCCC 90%, var(--text-accent));
|
||
--text-muted: #999999;
|
||
--text-faint: #666666;
|
||
|
||
/* Dividers */
|
||
--divider-color: transparent;
|
||
/* NOT zeroing --background-modifier-border globally — would break plugins */
|
||
|
||
/* Bold, italic, highlight */
|
||
--text-strong: var(--text-accent);
|
||
--text-emphasis: var(--text-accent);
|
||
--text-highlight: var(--text-accent);
|
||
|
||
/* Headings — H4 = accent, H1 brightest, H6 darkest */
|
||
--h1-color: color-mix(in oklch, var(--color-accent), white 45%);
|
||
--h2-color: color-mix(in oklch, var(--color-accent), white 28%);
|
||
--h3-color: color-mix(in oklch, var(--color-accent), white 12%);
|
||
--h4-color: var(--color-accent);
|
||
--h5-color: color-mix(in oklch, var(--color-accent), black 12%);
|
||
--h6-color: color-mix(in oklch, var(--color-accent), black 25%);
|
||
--h1-font: 'Syne', sans-serif;
|
||
--h2-font: 'Syne', sans-serif;
|
||
--h3-font: 'Syne', sans-serif;
|
||
--h4-font: 'Syne', sans-serif;
|
||
--h5-font: 'Syne', sans-serif;
|
||
--h6-font: 'Syne', sans-serif;
|
||
|
||
/* Shadows */
|
||
--shadow-s: none;
|
||
--shadow-m: none;
|
||
--shadow-l: none;
|
||
}
|
||
|
||
/* Flat dark background — all UI elements uniform */
|
||
.theme-dark,
|
||
.theme-dark .workspace,
|
||
.theme-dark .workspace-split,
|
||
.theme-dark .workspace-leaf,
|
||
.theme-dark .workspace-tabs,
|
||
.theme-dark .workspace-tab-header,
|
||
.theme-dark .workspace-tab-header-container,
|
||
.theme-dark .sidebar,
|
||
.theme-dark .side-dock,
|
||
.theme-dark .side-dock-left,
|
||
.theme-dark .side-dock-right,
|
||
.theme-dark .side-dock-top,
|
||
.theme-dark .side-dock-bottom,
|
||
.theme-dark .nav-files-container,
|
||
.theme-dark .file-tree-container,
|
||
.theme-dark .outline-container,
|
||
.theme-dark .titlebar,
|
||
.theme-dark .status-bar,
|
||
.theme-dark .menu,
|
||
.theme-dark .menu-content,
|
||
.theme-dark .context-menu,
|
||
.theme-dark .modal,
|
||
.theme-dark .modal-content,
|
||
.theme-dark .modal-bg,
|
||
.theme-dark .popover,
|
||
.theme-dark .popover-content,
|
||
.theme-dark .suggestion-container,
|
||
.theme-dark .suggestion-item,
|
||
.theme-dark .prompt,
|
||
.theme-dark .prompt-input,
|
||
.theme-dark .prompt-results,
|
||
.theme-dark .workspace-mobile-sidebar,
|
||
.theme-dark .sidebar-toggle-button,
|
||
.theme-dark .side-dock-settings,
|
||
.theme-dark .side-dock-help,
|
||
.theme-dark .side-dock-action,
|
||
.theme-dark .nav-folder,
|
||
.theme-dark .nav-file,
|
||
.theme-dark .nav-file-title,
|
||
.theme-dark .nav-folder-title,
|
||
.theme-dark .workspace-left-sidebar,
|
||
.theme-dark .workspace-right-sidebar,
|
||
.theme-dark .view-header,
|
||
.theme-dark .view-content,
|
||
.theme-dark .pane,
|
||
.theme-dark .pane-empty,
|
||
.theme-dark .empty-state,
|
||
.theme-dark .titlebar-button,
|
||
.theme-dark .workspace-tab-header-inner,
|
||
.theme-dark .side-dock-action-item,
|
||
.theme-dark .nav-action-button,
|
||
.theme-dark .side-dock-title,
|
||
.theme-dark .status-bar-item,
|
||
.theme-dark .nav-file-button,
|
||
.theme-dark .nav-action,
|
||
.theme-dark .workspace-leaf-content,
|
||
.theme-dark .view-content > *,
|
||
.theme-dark .mod-root .workspace-tabs,
|
||
.theme-dark .mod-root .workspace-tab-container,
|
||
.theme-dark .clickable-icon,
|
||
.theme-dark .action-icon,
|
||
.theme-dark .workspace-ribbon,
|
||
.theme-dark .workspace-ribbon-side,
|
||
.theme-dark .side-bar,
|
||
.theme-dark .vault-switcher,
|
||
.theme-dark .vault-switcher-item,
|
||
.theme-dark .search-result-file-title,
|
||
.theme-dark .tree-item-self,
|
||
.theme-dark .tree-item-children,
|
||
.theme-dark .nav-folder-children,
|
||
.theme-dark .file-explorer,
|
||
.theme-dark .file-explorer-collapse-indicator,
|
||
.theme-dark .list-item,
|
||
.theme-dark .tree-sorting-button {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
|
||
/* Remove structural pane/tab borders */
|
||
.theme-dark .workspace-leaf-resize-handle,
|
||
.theme-dark .view-header {
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* Bold, italic, highlight — direct element overrides */
|
||
.theme-dark .cm-strong,
|
||
.theme-dark strong { color: var(--text-accent); font-weight: 700; }
|
||
|
||
.theme-dark .cm-em,
|
||
.theme-dark em { color: var(--text-accent); font-style: italic; }
|
||
|
||
.theme-dark .cm-s-obsidian span.cm-highlight,
|
||
.theme-dark .markdown-rendered mark,
|
||
.theme-dark .markdown-preview-view mark {
|
||
background-color: var(--text-accent);
|
||
color: var(--background-primary);
|
||
padding-inline: 0.15em;
|
||
}
|
||
|
||
/* HR — visible accent tint + space below */
|
||
.theme-dark .markdown-preview-view hr,
|
||
.theme-dark .markdown-rendered hr,
|
||
.theme-dark .markdown-source-view hr {
|
||
border-top: 1px solid color-mix(in srgb, var(--text-accent) 25%, transparent) !important;
|
||
border-bottom: none !important;
|
||
border-left: none !important;
|
||
border-right: none !important;
|
||
background: none !important;
|
||
margin-top: 1.5em !important;
|
||
margin-bottom: 1.5em !important;
|
||
}
|
||
|
||
|
||
/* ============================================================
|
||
LIGHT MODE
|
||
============================================================ */
|
||
|
||
.theme-light {
|
||
--background-primary: #F5F5F5;
|
||
--background-secondary: #EAEAEA;
|
||
--background-secondary-alt: #EAEAEA;
|
||
--background-primary-alt: #F5F5F5;
|
||
--text-normal: #333333;
|
||
--text-muted: #666666;
|
||
--text-faint: #999999;
|
||
|
||
/* Shadows */
|
||
--shadow-s: none;
|
||
--shadow-m: none;
|
||
--shadow-l: none;
|
||
|
||
/* Dividers */
|
||
--divider-color: transparent;
|
||
|
||
/* Bold, italic, highlight */
|
||
--text-strong: var(--text-accent);
|
||
--text-emphasis: var(--text-accent);
|
||
--text-highlight: var(--text-accent);
|
||
|
||
/* Headings — H4 = accent, H1 darkest (most contrast on light bg), H6 lightest */
|
||
--h1-color: color-mix(in oklch, var(--color-accent), black 45%);
|
||
--h2-color: color-mix(in oklch, var(--color-accent), black 28%);
|
||
--h3-color: color-mix(in oklch, var(--color-accent), black 12%);
|
||
--h4-color: var(--color-accent);
|
||
--h5-color: color-mix(in oklch, var(--color-accent), white 12%);
|
||
--h6-color: color-mix(in oklch, var(--color-accent), white 25%);
|
||
--h1-font: 'Syne', sans-serif;
|
||
--h2-font: 'Syne', sans-serif;
|
||
--h3-font: 'Syne', sans-serif;
|
||
--h4-font: 'Syne', sans-serif;
|
||
--h5-font: 'Syne', sans-serif;
|
||
--h6-font: 'Syne', sans-serif;
|
||
}
|
||
|
||
/* Bold, italic, highlight — direct element overrides */
|
||
.theme-light .cm-strong,
|
||
.theme-light strong { color: var(--text-accent); font-weight: 700; }
|
||
|
||
.theme-light .cm-em,
|
||
.theme-light em { color: var(--text-accent); font-style: italic; }
|
||
|
||
.theme-light .cm-s-obsidian span.cm-highlight,
|
||
.theme-light .markdown-rendered mark,
|
||
.theme-light .markdown-preview-view mark {
|
||
background-color: var(--text-accent);
|
||
color: var(--background-primary);
|
||
padding-inline: 0.15em;
|
||
}
|
||
|
||
/* Flat borders — light mode */
|
||
.theme-light .workspace-split,
|
||
.theme-light .workspace-split > *,
|
||
.theme-light .workspace-leaf,
|
||
.theme-light .workspace-tabs,
|
||
.theme-light .workspace-tab-header-container,
|
||
.theme-light .workspace-side-prefer-input,
|
||
.theme-light .workspace-side-prefer-output,
|
||
.theme-light .side-dock-vertical,
|
||
.theme-light .workspace-leaf-resize-area,
|
||
.theme-light .status-bar,
|
||
.theme-light .titlebar {
|
||
border-right: none !important;
|
||
border-top: none !important;
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
/* ============================================================
|
||
GLOBAL UI — applies to both modes
|
||
============================================================ */
|
||
|
||
/* Tab corner chrome — remove */
|
||
.workspace-tab-header.is-active::before,
|
||
.workspace-tab-header.is-active::after {
|
||
display: none;
|
||
}
|
||
|
||
/* SVG icons — square strokes */
|
||
svg * {
|
||
stroke-linecap: square;
|
||
stroke-linejoin: miter;
|
||
}
|
||
|
||
/* Menu sizing */
|
||
.menu {
|
||
padding: var(--size-2-1);
|
||
}
|
||
|
||
.menu-item {
|
||
padding: var(--size-4-1) var(--size-4-2);
|
||
}
|
||
|
||
.menu-separator {
|
||
margin: var(--size-2-1) calc(var(--size-2-1) * -1);
|
||
}
|
||
|
||
/* Flat workspace splits */
|
||
.workspace-split,
|
||
.workspace-split > *,
|
||
.workspace-leaf,
|
||
.workspace-tabs,
|
||
.workspace-tab-header-container,
|
||
.workspace-side-prefer-input,
|
||
.workspace-side-prefer-output,
|
||
.workspace-leaf-resize-area {
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* Flat side panes */
|
||
.side-dock,
|
||
.side-dock-vertical,
|
||
.side-dock-left,
|
||
.side-dock-right,
|
||
.nav-files-container,
|
||
.file-tree-container,
|
||
.outline-container {
|
||
border-right: none !important;
|
||
border-left: none !important;
|
||
}
|
||
|
||
/* Flat titlebar */
|
||
.titlebar,
|
||
.titlebar-container {
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
/* Flat status bar */
|
||
.status-bar {
|
||
border-top: none !important;
|
||
}
|
||
|
||
/* Flat menus */
|
||
.menu,
|
||
.menu-content,
|
||
.context-menu,
|
||
.suggestion-container {
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* Flat tab bar */
|
||
.workspace-tab-header-inner,
|
||
.workspace-tab-header {
|
||
border-right: none !important;
|
||
border-left: none !important;
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
/* Flat modals */
|
||
.modal,
|
||
.modal-content,
|
||
.modal-bg {
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* Flat popovers */
|
||
.popover,
|
||
.popover-content {
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* Flat canvas */
|
||
.workspace-canvas,
|
||
.workspace-leaf-content {
|
||
border: none !important;
|
||
}
|
||
|
||
/* Formatting markers (**, *, #, [], etc.) — dimmed in source / live preview */
|
||
.cm-s-obsidian .cm-formatting,
|
||
.cm-editor .cm-formatting {
|
||
color: var(--text-faint) !important;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Scrollbars — thin, themed */
|
||
::-webkit-scrollbar {
|
||
width: 4px;
|
||
height: 4px;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
::-webkit-scrollbar-corner {
|
||
background: transparent;
|
||
}
|
||
.theme-dark ::-webkit-scrollbar-thumb {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
.theme-dark ::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
.theme-light ::-webkit-scrollbar-thumb {
|
||
background: rgba(0, 0, 0, 0.15);
|
||
}
|
||
.theme-light ::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(0, 0, 0, 0.28);
|
||
}
|
||
|
||
/* Notices — left accent border, flat */
|
||
.notice {
|
||
border-left: 2px solid var(--color-accent);
|
||
border-radius: 0;
|
||
background-color: var(--background-secondary);
|
||
box-shadow: none;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
/* ============================================================
|
||
ACTIVE STATES
|
||
============================================================ */
|
||
|
||
/* Active tab title */
|
||
.workspace-tab-header.is-active .workspace-tab-header-inner-title {
|
||
color: var(--text-accent) !important;
|
||
}
|
||
|
||
/* Active file in explorer */
|
||
.nav-file-title.is-active,
|
||
body:not(.is-grabbing) .nav-file-title.is-active,
|
||
body:not(.is-grabbing) .nav-file-title.is-active:hover {
|
||
color: var(--text-accent) !important;
|
||
}
|
||
|
||
/* Active section in Outline panel */
|
||
[data-type="outline"] .tree-item-self.is-active,
|
||
[data-type="outline"] .tree-item-self.is-active .tree-item-inner {
|
||
color: var(--text-accent) !important;
|
||
}
|
||
|
||
/* ============================================================
|
||
HEADING AND PARAGRAPH SPACING
|
||
============================================================ */
|
||
|
||
/* Heading space ABOVE — reading mode (hierarchical: H1 most, H4-H6 equal) */
|
||
.markdown-rendered h1 { margin-top: 2.5em !important; }
|
||
.markdown-rendered h2 { margin-top: 2em !important; }
|
||
.markdown-rendered h3 { margin-top: 1.5em !important; }
|
||
.markdown-rendered h4,
|
||
.markdown-rendered h5,
|
||
.markdown-rendered h6 { margin-top: 1em !important; }
|
||
|
||
/* Heading space ABOVE — live preview
|
||
padding-top on rendered text lines IS measured by CM6 on layout */
|
||
.mod-cm6 .cm-editor .HyperMD-header-1 { padding-top: 2.5em !important; }
|
||
.mod-cm6 .cm-editor .HyperMD-header-2 { padding-top: 2em !important; }
|
||
.mod-cm6 .cm-editor .HyperMD-header-3 { padding-top: 1.5em !important; }
|
||
.mod-cm6 .cm-editor .HyperMD-header-4,
|
||
.mod-cm6 .cm-editor .HyperMD-header-5,
|
||
.mod-cm6 .cm-editor .HyperMD-header-6 { padding-top: 1em !important; }
|
||
|
||
/* Heading space BELOW */
|
||
.markdown-rendered h1,
|
||
.markdown-rendered h2,
|
||
.markdown-rendered h3,
|
||
.markdown-rendered h4,
|
||
.markdown-rendered h5,
|
||
.markdown-rendered h6 { margin-bottom: 0.5em !important; }
|
||
|
||
.mod-cm6 .cm-editor .HyperMD-header { padding-bottom: 0.5em !important; }
|
||
|
||
/* Reset — no extra space after headings inside callouts */
|
||
.markdown-rendered .callout h1,
|
||
.markdown-rendered .callout h2,
|
||
.markdown-rendered .callout h3,
|
||
.markdown-rendered .callout h4,
|
||
.markdown-rendered .callout h5,
|
||
.markdown-rendered .callout h6 { margin-bottom: 0 !important; }
|
||
|
||
.mod-cm6 .cm-editor .callout .HyperMD-header { padding-bottom: 0 !important; }
|
||
|
||
/* Paragraph after heading — reading mode */
|
||
.markdown-rendered div.el-h1 + div.el-p,
|
||
.markdown-rendered div.el-h2 + div.el-p,
|
||
.markdown-rendered div.el-h3 + div.el-p,
|
||
.markdown-rendered div.el-h4 + div.el-p,
|
||
.markdown-rendered div.el-h5 + div.el-p,
|
||
.markdown-rendered div.el-h6 + div.el-p {
|
||
padding-top: 0.8em !important;
|
||
}
|
||
|
||
/* Paragraph after heading — live preview */
|
||
.markdown-source-view.mod-cm6.is-live-preview .cm-content .HyperMD-header + .cm-line:not(.HyperMD-header):not(:has(> br:only-child)):not(.HyperMD-list-line):not(.HyperMD-codeblock) {
|
||
padding-top: 0.8em !important;
|
||
}
|
||
|
||
/* Space before first list item when preceded by a text paragraph */
|
||
.markdown-source-view.mod-cm6.is-live-preview .cm-content .cm-line:not(.HyperMD-header):not(:has(> br:only-child)):not(.HyperMD-list-line):not(.HyperMD-codeblock) + .cm-line.HyperMD-list-line {
|
||
padding-top: 0.8em !important;
|
||
}
|
||
|
||
/* Space before first list item when preceded by a heading */
|
||
.markdown-source-view.mod-cm6.is-live-preview .cm-content .HyperMD-header + .cm-line.HyperMD-list-line {
|
||
padding-top: 0.8em !important;
|
||
}
|
||
|
||
/* List after heading — reading mode */
|
||
.markdown-rendered div.el-h1 + div.el-ul,
|
||
.markdown-rendered div.el-h2 + div.el-ul,
|
||
.markdown-rendered div.el-h3 + div.el-ul,
|
||
.markdown-rendered div.el-h4 + div.el-ul,
|
||
.markdown-rendered div.el-h5 + div.el-ul,
|
||
.markdown-rendered div.el-h6 + div.el-ul,
|
||
.markdown-rendered div.el-h1 + div.el-ol,
|
||
.markdown-rendered div.el-h2 + div.el-ol,
|
||
.markdown-rendered div.el-h3 + div.el-ol,
|
||
.markdown-rendered div.el-h4 + div.el-ol,
|
||
.markdown-rendered div.el-h5 + div.el-ol,
|
||
.markdown-rendered div.el-h6 + div.el-ol {
|
||
padding-top: 0.8em !important;
|
||
}
|
||
|
||
/* ============================================================
|
||
CODE
|
||
============================================================ */
|
||
|
||
/* Shared vars */
|
||
body {
|
||
--code-radius: 0;
|
||
--code-background: var(--background-secondary);
|
||
/* Inline code text: accent lightened enough to always read on dark bg */
|
||
--inline-code-color: color-mix(in oklch, var(--color-accent), white 55%);
|
||
}
|
||
|
||
.theme-light {
|
||
--inline-code-color: color-mix(in oklch, var(--color-accent), black 55%);
|
||
}
|
||
|
||
/* Inline code — reading mode */
|
||
:not(pre) > code {
|
||
color: var(--inline-code-color) !important;
|
||
background: #1e1e1e !important;
|
||
border-radius: 0 !important;
|
||
padding: 0.15em 0.4em !important;
|
||
}
|
||
|
||
/* Inline code — live preview */
|
||
.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code) {
|
||
color: var(--inline-code-color) !important;
|
||
background: #1e1e1e !important;
|
||
border-radius: 0 !important;
|
||
padding: 0.15em 0.4em !important;
|
||
}
|
||
|
||
/* Code block — reading mode */
|
||
.markdown-rendered pre {
|
||
background: #1e1e1e !important;
|
||
border-radius: 0 !important;
|
||
}
|
||
.markdown-rendered pre code {
|
||
background: #1e1e1e !important;
|
||
border-radius: 0 !important;
|
||
color: var(--inline-code-color) !important;
|
||
}
|
||
|
||
/* Code block — live preview / source */
|
||
.HyperMD-codeblock {
|
||
background: #1e1e1e !important;
|
||
color: var(--inline-code-color) !important;
|
||
}
|
||
|
||
/* ============================================================
|
||
TABLES
|
||
============================================================ */
|
||
|
||
/* Entire table — discrete background */
|
||
.markdown-rendered table,
|
||
.markdown-source-view.mod-cm6 table {
|
||
background-color: rgba(255, 255, 255, 0.03);
|
||
}
|
||
|
||
/* Header row — grey background, accent text, no alternation */
|
||
.markdown-rendered th,
|
||
.markdown-source-view.mod-cm6 th {
|
||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||
color: var(--text-accent) !important;
|
||
}
|
||
|
||
/* Kill any alternating row colors */
|
||
.markdown-rendered tr,
|
||
.markdown-source-view.mod-cm6 tr {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/* Alternating body rows */
|
||
.markdown-rendered tbody tr:nth-child(even),
|
||
.markdown-source-view.mod-cm6 tbody tr:nth-child(even) {
|
||
background-color: rgba(255, 255, 255, 0.04) !important;
|
||
}
|
||
|
||
/* ============================================================
|
||
BLOCKQUOTES
|
||
============================================================ */
|
||
|
||
/* Shared vars */
|
||
.markdown-rendered blockquote,
|
||
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote {
|
||
--blockquote-background-color: color-mix(in oklch, var(--color-accent), transparent 92%);
|
||
}
|
||
|
||
/* Reading mode — proper box */
|
||
.markdown-rendered blockquote {
|
||
background-color: var(--blockquote-background-color);
|
||
padding: 0.6em 1em;
|
||
margin-inline-start: 1.5em;
|
||
color: var(--text-normal);
|
||
font-size: 1.05em;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* Live preview — background + indent on all lines */
|
||
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote {
|
||
background-color: var(--blockquote-background-color);
|
||
margin-inline-start: 1.5em;
|
||
padding-inline: 1em;
|
||
color: var(--text-normal);
|
||
font-size: 1.05em;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* Live preview — top padding on first quote line only */
|
||
.markdown-source-view.mod-cm6.is-live-preview .cm-content > :not(.HyperMD-quote) + .HyperMD-quote {
|
||
padding-top: 0.6em;
|
||
}
|
||
|
||
/* Live preview — bottom padding on last quote line only */
|
||
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:not(:has(+ .HyperMD-quote)) {
|
||
padding-bottom: 0.6em;
|
||
}
|
||
|
||
/* ============================================================
|
||
LISTS
|
||
============================================================ */
|
||
|
||
/* Reading mode: bullet-to-text gap */
|
||
.markdown-rendered .list-bullet {
|
||
padding-inline-end: 0.5em;
|
||
}
|
||
|
||
/* Live preview: bullet-to-text gap */
|
||
.cm-formatting-list-ul,
|
||
.cm-formatting-list-ol {
|
||
padding-inline-end: 0.4em;
|
||
}
|
||
|
||
/* ============================================================
|
||
TAGS
|
||
============================================================ */
|
||
|
||
/* Reading view */
|
||
a.tag {
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
background: none !important;
|
||
border: none !important;
|
||
border-radius: 0 !important;
|
||
color: var(--text-accent) !important;
|
||
line-height: inherit !important;
|
||
}
|
||
|
||
/* Live preview / source mode */
|
||
.cm-hashtag,
|
||
.cm-hashtag-begin,
|
||
.cm-hashtag-end {
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
background: none !important;
|
||
border: none !important;
|
||
border-radius: 0 !important;
|
||
color: var(--text-accent) !important;
|
||
}
|
||
|
||
/* ============================================================
|
||
CHECKBOXES — [x] done vs [v] selected
|
||
============================================================ */
|
||
|
||
/* Base — reading mode only (class selector avoids breaking settings toggles) */
|
||
.markdown-preview-view .task-list-item-checkbox {
|
||
-webkit-appearance: none !important;
|
||
-moz-appearance: none !important;
|
||
appearance: none !important;
|
||
background-image: none !important;
|
||
background: var(--background-primary) !important;
|
||
border: 1px solid var(--text-accent) !important;
|
||
width: 14px !important;
|
||
height: 14px !important;
|
||
box-shadow: none !important;
|
||
position: relative !important;
|
||
}
|
||
|
||
/* [x] / [X] = done — dark background, accent X mark */
|
||
.markdown-preview-view li[data-task="x"] > .task-list-item-checkbox:checked,
|
||
.markdown-preview-view li[data-task="X"] > .task-list-item-checkbox:checked {
|
||
background-color: var(--background-primary) !important;
|
||
}
|
||
|
||
.markdown-preview-view li[data-task="x"] > .task-list-item-checkbox:checked::after,
|
||
.markdown-preview-view li[data-task="X"] > .task-list-item-checkbox:checked::after {
|
||
content: '' !important;
|
||
position: absolute !important;
|
||
top: 50% !important;
|
||
left: 50% !important;
|
||
transform: translate(-50%, -50%) !important;
|
||
width: 10px !important;
|
||
height: 10px !important;
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='square'%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3Cline x1='20' y1='4' x2='4' y2='20'/%3E%3C/svg%3E") !important;
|
||
-webkit-mask-size: 100% !important;
|
||
-webkit-mask-repeat: no-repeat !important;
|
||
-webkit-mask-position: center !important;
|
||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='square'%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3Cline x1='20' y1='4' x2='4' y2='20'/%3E%3C/svg%3E") !important;
|
||
mask-size: 100% !important;
|
||
mask-repeat: no-repeat !important;
|
||
mask-position: center !important;
|
||
background-color: var(--text-accent) !important;
|
||
display: block !important;
|
||
}
|
||
|
||
/* [v] / [V] = selected — accent background, dark checkmark
|
||
Broad selectors: reading mode + live preview + HyperMD source */
|
||
input[data-task="v"]:checked,
|
||
input[data-task="V"]:checked,
|
||
.markdown-preview-view li[data-task="v"] > .task-list-item-checkbox:checked,
|
||
.markdown-preview-view li[data-task="V"] > .task-list-item-checkbox:checked,
|
||
.HyperMD-list-line input[data-task="v"]:checked,
|
||
.HyperMD-list-line input[data-task="V"]:checked {
|
||
background-color: var(--text-accent) !important;
|
||
}
|
||
|
||
input[data-task="v"]:checked::after,
|
||
input[data-task="V"]:checked::after,
|
||
.markdown-preview-view li[data-task="v"] > .task-list-item-checkbox:checked::after,
|
||
.markdown-preview-view li[data-task="V"] > .task-list-item-checkbox:checked::after,
|
||
.HyperMD-list-line input[data-task="v"]:checked::after,
|
||
.HyperMD-list-line input[data-task="V"]:checked::after {
|
||
content: '' !important;
|
||
position: absolute !important;
|
||
top: 50% !important;
|
||
left: 50% !important;
|
||
transform: translate(-50%, -50%) !important;
|
||
width: 10px !important;
|
||
height: 10px !important;
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E") !important;
|
||
-webkit-mask-size: 100% !important;
|
||
-webkit-mask-repeat: no-repeat !important;
|
||
-webkit-mask-position: center !important;
|
||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E") !important;
|
||
mask-size: 100% !important;
|
||
mask-repeat: no-repeat !important;
|
||
mask-position: center !important;
|
||
background-color: var(--background-primary) !important;
|
||
display: block !important;
|
||
}
|
||
|
||
/* ============================================================
|
||
EDITOR — line numbers
|
||
============================================================ */
|
||
|
||
.cm-lineNumbers .cm-gutterElement {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.cm-lineNumbers .cm-gutterElement.cm-active {
|
||
opacity: 1;
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* ============================================================
|
||
LINKED MENTIONS — backlinks panel
|
||
============================================================ */
|
||
|
||
/* Section headers: "Linked mentions" / "Unlinked mentions" */
|
||
.embedded-backlinks .backlink-pane > .tree-item-self .tree-item-inner {
|
||
color: var(--color-accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Count badge */
|
||
.embedded-backlinks .backlink-pane > .tree-item-self .tree-item-flair {
|
||
color: var(--color-accent);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* File name */
|
||
.embedded-backlinks .search-result-file-title .tree-item-inner {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* Matched text highlight */
|
||
.embedded-backlinks .search-result-file-matched-text {
|
||
color: var(--color-accent);
|
||
background: transparent;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Context text */
|
||
.embedded-backlinks .search-result-file-match {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* ============================================================
|
||
RIBBON — hide icons, reveal on hover
|
||
============================================================ */
|
||
|
||
.side-dock-ribbon .side-dock-ribbon-action,
|
||
.side-dock-ribbon .side-dock-ribbon-tab {
|
||
opacity: 0;
|
||
transition: opacity 0.15s ease;
|
||
}
|
||
|
||
.side-dock-ribbon:hover .side-dock-ribbon-action,
|
||
.side-dock-ribbon:hover .side-dock-ribbon-tab {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* ============================================================
|
||
CALLOUTS
|
||
============================================================ */
|
||
|
||
/* Base reset: no radius, left border only */
|
||
.callout {
|
||
--callout-radius: 0;
|
||
border-radius: 0;
|
||
border-left: 2px solid;
|
||
border-top: none;
|
||
border-right: none;
|
||
border-bottom: none;
|
||
margin-top: 2em;
|
||
}
|
||
|
||
/* In live preview: zero internal top padding so line number aligns with callout title */
|
||
.markdown-source-view.mod-cm6 .callout {
|
||
padding-top: 0 !important;
|
||
margin-top: 2em !important;
|
||
}
|
||
|
||
/* Restore visual top padding inside the title in live preview */
|
||
.markdown-source-view.mod-cm6 .callout .callout-title {
|
||
padding-top: 12px !important;
|
||
}
|
||
|
||
/* ── Informational: hue shifts from accent, 8 groups × 45° ── */
|
||
|
||
.callout[data-callout="note"] { --co: oklch(from var(--color-accent) l c calc(h + 0)); }
|
||
.callout[data-callout="abstract"],
|
||
.callout[data-callout="summary"],
|
||
.callout[data-callout="tldr"] { --co: oklch(from var(--color-accent) 0.85 0.07 calc(h + 45)); }
|
||
.callout[data-callout="info"] { --co: oklch(from var(--color-accent) l c calc(h + 90)); }
|
||
.callout[data-callout="todo"] { --co: oklch(from var(--color-accent) l c calc(h + 135)); }
|
||
.callout[data-callout="tip"],
|
||
.callout[data-callout="hint"] { --co: oklch(from var(--color-accent) l c calc(h + 180)); }
|
||
.callout[data-callout="question"],
|
||
.callout[data-callout="help"],
|
||
.callout[data-callout="faq"] { --co: oklch(from var(--color-accent) l c calc(h + 225)); }
|
||
.callout[data-callout="example"] { --co: oklch(from var(--color-accent) 0.85 0.07 calc(h + 270)); }
|
||
.callout[data-callout="quote"],
|
||
.callout[data-callout="cite"] { --co: oklch(from var(--color-accent) 0.85 0.07 calc(h + 315)); }
|
||
|
||
/* abstract / example / quote: lighter background */
|
||
.callout[data-callout="abstract"],
|
||
.callout[data-callout="summary"],
|
||
.callout[data-callout="tldr"],
|
||
.callout[data-callout="example"],
|
||
.callout[data-callout="quote"],
|
||
.callout[data-callout="cite"] {
|
||
background-color: color-mix(in oklch, var(--co) 15%, var(--background-primary));
|
||
}
|
||
|
||
/* ── Semantic: fixed hue, l+c from accent ── */
|
||
|
||
.callout[data-callout="success"],
|
||
.callout[data-callout="check"],
|
||
.callout[data-callout="done"] { --co: oklch(from var(--color-accent) l c 145); }
|
||
.callout[data-callout="warning"],
|
||
.callout[data-callout="caution"],
|
||
.callout[data-callout="attention"] { --co: oklch(from var(--color-accent) l c 60); }
|
||
.callout[data-callout="failure"],
|
||
.callout[data-callout="fail"],
|
||
.callout[data-callout="missing"] { --co: oklch(from var(--color-accent) l c 30); }
|
||
.callout[data-callout="danger"],
|
||
.callout[data-callout="error"] { --co: oklch(from var(--color-accent) l c 20); }
|
||
.callout[data-callout="bug"] { --co: oklch(from var(--color-accent) l c 10); }
|
||
|
||
/* Apply --co to all callouts */
|
||
.callout {
|
||
background-color: color-mix(in oklch, var(--co, var(--color-accent)) 8%, var(--background-primary));
|
||
border-left-color: var(--co, var(--color-accent));
|
||
}
|
||
.callout .callout-title,
|
||
.callout .callout-icon .svg-icon {
|
||
color: var(--co, var(--color-accent));
|
||
}
|
||
|
||
/* ============================================================
|
||
PLUGIN OVERRIDES — linDar
|
||
============================================================ */
|
||
|
||
/* Restore variables flat theme removes — linDar needs grid borders + weekend bg */
|
||
.theme-dark [data-type="lindar-year-view"],
|
||
.theme-dark .lindar-view {
|
||
--background-modifier-border: rgba(255, 255, 255, 0.07);
|
||
--background-secondary: #141414;
|
||
}
|