mirror of
https://github.com/punkyard/obsidian-theme-air.git
synced 2026-07-22 05:00:29 +00:00
Initial commit: Air 0.1.0
This commit is contained in:
nmn
commit
ba95d32970
10 changed files with 1008 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.DS_Store
|
||||
*.local.woff2
|
||||
13
CHANGELOG.md
Normal file
13
CHANGELOG.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
# Changelog
|
||||
|
||||
## [0.1.0] — 2026-07-09
|
||||
|
||||
### Added
|
||||
|
||||
- Initial release
|
||||
- Flat ultra-dark (and light) design
|
||||
- Accent-driven heading system (H1–H6)
|
||||
- Custom Syne heading font
|
||||
- Zero border-radius, no pane borders
|
||||
- Ribbon hides until hover
|
||||
- mobile suppor
|
||||
18
LICENSE
Normal file
18
LICENSE
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2026 punkyard
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
|
||||
associated documentation files (the "Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the
|
||||
following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial
|
||||
portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
|
||||
LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
|
||||
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
|
||||
USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
33
README.md
Normal file
33
README.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# Air
|
||||
|
||||
A flat, ultra-dark Obsidian theme. Minimal chrome, padded headings, accent color drives everything.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Design
|
||||
|
||||
- Background `#0A0A0A` — one uniform surface, no pane borders
|
||||
- Your chosen accent color propagates to headings (H1–H6), bold, italic, highlights, tags, active states, checkboxes, and list bullets
|
||||
- Text: near-white normal, stepped grays for muted/faint
|
||||
- Zero border-radius throughout
|
||||
- Ribbon hides until hover
|
||||
- Tags: accent text, no background or border
|
||||
- Supports **dark** and **light** mode.
|
||||
|
||||
## Installation
|
||||
|
||||
Search **Air** in *Settings > Appearance > Themes*
|
||||
Choose your favorite **accent color** from *Settings > Options > Appearance > Accent color*
|
||||
|
||||
|
||||
---
|
||||
|
||||
### License
|
||||
|
||||
This project is under the **[MIT License](LICENSE)**.
|
||||
|
||||
---
|
||||
|
||||
<p align="center"><sub>made with ⏳ by <a href="https://github.com/punkyard">punkyard</a></sub></p>
|
||||
BIN
Syne.woff2
Normal file
BIN
Syne.woff2
Normal file
Binary file not shown.
BIN
assets/air-color.png
Normal file
BIN
assets/air-color.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
assets/air-purple.png
Normal file
BIN
assets/air-purple.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
BIN
assets/hero.png
Normal file
BIN
assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
8
manifest.json
Normal file
8
manifest.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"name": "Air",
|
||||
"version": "0.1.0",
|
||||
"minAppVersion": "1.0.0",
|
||||
"author": "punkyard",
|
||||
"authorUrl": "https://github.com/punkyard",
|
||||
"fundingUrl": "https://ko-fi.com/punkyard"
|
||||
}
|
||||
934
theme.css
Normal file
934
theme.css
Normal file
|
|
@ -0,0 +1,934 @@
|
|||
/* 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;
|
||||
}
|
||||
Loading…
Reference in a new issue