mirror of
https://github.com/ouatis/obsidian-scriptorium.git
synced 2026-07-22 04:40:26 +00:00
1994 lines
73 KiB
CSS
1994 lines
73 KiB
CSS
/* =====================================================================
|
|
SCRIPTORIUM CSS Theme for Obsidian
|
|
|
|
Designed for Obsidian with a focus on readability and elegant visual experience.
|
|
|
|
Acknowledgments:
|
|
- Inspired by [Sanctum](https://github.com/jdanielmourao/obsidian-sanctum) by @jdanielmourao.
|
|
|
|
Structure Map:
|
|
[01]-[03] Foundations: tokens, palettes, semantic mappings
|
|
[04]-[05] Base Semantics: aliases, focus, typography rhythm
|
|
[06]-[07] Writing Surface: editor, reading flow, markdown elements
|
|
[08]-[09] Workspace Chrome: navigation and workspace controls
|
|
[10]-[11] UI Components: buttons, modals, floating surfaces
|
|
[12]-[14] Writing Components: tasks, callouts, embedded notes
|
|
|
|
Module Structure:
|
|
[01] Design Tokens
|
|
[02] Shadows & Theme Colors
|
|
[03] Theme Mapping
|
|
[04] Global Semantics
|
|
[05] Typography
|
|
[06] Markdown Layout
|
|
[07] Markdown Elements
|
|
[07a] Tables
|
|
[07b] Lists
|
|
[07c] Highlights
|
|
[07d] Links
|
|
[07e] Blockquotes
|
|
[07f] Horizontal Rules
|
|
[07g] Tags
|
|
[08] Navigation
|
|
[09] Nav Button Container
|
|
[10] Buttons
|
|
[11] Modals
|
|
[12] Checkboxes & Tasks
|
|
[13] Callouts
|
|
[14] Embedded Notes
|
|
===================================================================== */
|
|
|
|
/* [01] Design Tokens */
|
|
:root {
|
|
/* Theme overview:
|
|
SCRIPTORIUM is a full Obsidian theme centered on readability,
|
|
paper-like tactility, and calm visual rhythm.
|
|
Module map:
|
|
[01] Design Tokens [02] Shadows & Theme Colors [03] Theme Mapping [04] Global Semantics
|
|
[05] Typography [06] Markdown Layout [07] Markdown Elements [08] Navigation
|
|
[09] Nav Button Container [10] Buttons [11] Modals [12] Checkboxes & Tasks
|
|
[13] Callouts [14] Embedded Notes */
|
|
/* Maintenance notes:
|
|
- Light-mode accent and secondary colors are tuned for better text contrast.
|
|
- Link states are differentiated more clearly for long-form note reading.
|
|
- Existing garbled comments are legacy encoding artifacts; prefer adding
|
|
new readable notes near actively maintained sections. */
|
|
/* Stable module names for maintenance:
|
|
[01] Design Tokens
|
|
[02] Shadows & Theme Colors
|
|
[03] Theme Mapping
|
|
[04] Global Semantics
|
|
[05] Typography
|
|
[06] Markdown Layout
|
|
[07] Markdown Elements
|
|
[08] Navigation
|
|
[09] Nav Button Container
|
|
[10] Buttons
|
|
[11] Modals
|
|
[12] Checkboxes & Tasks
|
|
[13] Callouts
|
|
[14] Embedded Notes */
|
|
/* Font Stacks */
|
|
--scrip-font-mono-stack: "IBM Plex Mono", "SF Mono", "Consolas", "Monaco", "Menlo", "Roboto Mono", "Courier New", monospace;
|
|
--scrip-font-cjk-stack: "IBM Plex Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
|
|
--scrip-font-serif-stack: "IBM Plex Serif", "Georgia", "Times New Roman", serif;
|
|
/* Heading stack uses a serif-forward system to separate titles from sans body text. */
|
|
--scrip-font-heading-stack: "Noto Serif SC", "Source Han Serif SC", "IBM Plex Serif", "Georgia", "Times New Roman", serif;
|
|
--scrip-font-mono: var(--font-monospace, var(--scrip-font-mono-stack));
|
|
--scrip-font-text: var(--font-text, var(--scrip-font-cjk-stack));
|
|
|
|
/* Typographic scale */
|
|
--scrip-type-inline-title-size: clamp(1.72rem, 3.35vw, 2.08rem);
|
|
--scrip-type-inline-title-leading: 1.28;
|
|
--scrip-type-inline-title-tracking: 0.012em;
|
|
--scrip-type-h1-size: clamp(1.82rem, 4.5vw, 2.18rem);
|
|
--scrip-type-h1-leading: 1.24;
|
|
--scrip-type-h1-tracking: 0.016em;
|
|
--scrip-type-h2-size: clamp(1.4rem, 3.1vw, 1.68rem);
|
|
--scrip-type-h2-leading: 1.28;
|
|
--scrip-type-h2-tracking: 0.01em;
|
|
--scrip-type-h3-size: clamp(1.16rem, 2.2vw, 1.3rem);
|
|
--scrip-type-h3-leading: 1.34;
|
|
--scrip-type-h3-tracking: 0.008em;
|
|
|
|
/* 字号 / Font Sizes */
|
|
--font-size-h1: var(--scrip-type-h1-size);
|
|
--font-size-h2: var(--scrip-type-h2-size);
|
|
--font-size-h3: var(--scrip-type-h3-size);
|
|
--font-size-h4: 1.08rem;
|
|
--font-size-h5: 0.98rem;
|
|
--font-size-h6: 0.9rem;
|
|
|
|
/* Font Weights */
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
--font-normal: var(--font-weight-regular);
|
|
--font-medium: var(--font-weight-medium);
|
|
--font-semibold: var(--font-weight-semibold);
|
|
--font-bold: var(--font-weight-bold);
|
|
|
|
/* Mobile Text Size Adjust */
|
|
-webkit-text-size-adjust: 100%;
|
|
text-size-adjust: 100%;
|
|
|
|
/* Density Modifier */
|
|
--density-modifier: 1;
|
|
|
|
/* Focus Ring */
|
|
--outline-width: 3px;
|
|
--outline-offset: 2px;
|
|
--focus-ring-width: 2px;
|
|
--focus-ring-width-large: 4px;
|
|
|
|
/* Spacing System (4px Grid) */
|
|
--size-1: 4px;
|
|
--size-2: 8px;
|
|
--size-3: 12px;
|
|
--size-4: 16px;
|
|
--size-5: 20px;
|
|
--size-6: 24px;
|
|
--size-7: 32px;
|
|
--size-8: 40px;
|
|
|
|
/* Easing Functions */
|
|
--motion-apple: cubic-bezier(0.16, 1, 0.3, 1);
|
|
|
|
/* Animation Duration */
|
|
--duration-fast: 140ms;
|
|
--duration-moderate: 220ms;
|
|
|
|
/* Animation Shorthands */
|
|
--ease-fast-smooth: var(--duration-fast) var(--motion-apple);
|
|
--ease-moderate-smooth: var(--duration-moderate) var(--motion-apple);
|
|
|
|
/* Spring Animation */
|
|
--motion-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
--ease-spring: 300ms var(--motion-spring);
|
|
|
|
/* Common Transitions */
|
|
/* Fast Transform */
|
|
--transition-fast-ease: transform var(--ease-fast-smooth), opacity var(--ease-fast-smooth);
|
|
/* State Change */
|
|
--transition-state:
|
|
background-color var(--ease-fast-smooth),
|
|
color var(--ease-fast-smooth),
|
|
box-shadow var(--ease-fast-smooth);
|
|
/* Interactive Elements */
|
|
--transition-interactive:
|
|
var(--transition-state),
|
|
border-color var(--ease-fast-smooth),
|
|
var(--transition-fast-ease);
|
|
|
|
/* Border Radius */
|
|
--radius-s: 4px;
|
|
--radius-m: 8px;
|
|
--radius-l: 12px;
|
|
--radius-xl: 20px;
|
|
|
|
/* Transform Values */
|
|
--transform-scale-pressed: 0.99;
|
|
--transform-scale-checked: 1.05;
|
|
--transform-scale-hidden: 0.85;
|
|
--transform-translate-hover: -1px;
|
|
--transform-translate-hidden: -12px;
|
|
|
|
/* Spacing Multipliers */
|
|
--multiplier-tight: 0.8;
|
|
--multiplier-relaxed: 1.2;
|
|
|
|
/* Color Mix Percentages */
|
|
--percentage-color-mix-low: 20%;
|
|
|
|
/* Opacity System */
|
|
--opacity-minimal: 0.04;
|
|
--opacity-subtle: 0.08;
|
|
--opacity-moderate: 0.15;
|
|
--opacity-medium: 0.25;
|
|
--opacity-half: 0.45;
|
|
--opacity-strong: 0.65;
|
|
--opacity-glass: 0.82;
|
|
|
|
/* Texture System: SVG micro-noise */
|
|
--scrip-texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
|
|
--scrip-texture-noise-dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
|
|
|
|
/* Responsive Breakpoints */
|
|
--size-max-width-reading: 65ch;
|
|
--size-max-width-mobile: 90vw;
|
|
|
|
/* Color Palette */
|
|
--white: 253, 254, 254;
|
|
|
|
/* Gray Scale */
|
|
--gray-10: 252, 248, 239;
|
|
/* Beige paper tint */
|
|
--gray-20: 238, 228, 214;
|
|
--gray-30: 214, 205, 193;
|
|
--gray-40: 184, 176, 164;
|
|
--gray-50: 157, 149, 137;
|
|
--gray-60: 127, 119, 107;
|
|
--gray-65: 109, 102, 93;
|
|
--gray-70: 97, 89, 79;
|
|
--gray-80: 70, 63, 53;
|
|
--gray-90: 50, 45, 35;
|
|
--gray-100: 32, 28, 19;
|
|
|
|
/* Accent color: warm orange family */
|
|
--color-accent-rgb-light: 194, 78, 24;
|
|
--color-accent-rgb-dark: 197, 82, 18;
|
|
|
|
/* Secondary color: muted green family */
|
|
--color-secondary-rgb-light: 64, 110, 64;
|
|
--color-secondary-rgb-dark: 63, 107, 64;
|
|
|
|
/* Heading accents */
|
|
--h4-color-rgb-light: 188, 80, 26;
|
|
--h4-color-rgb-dark: 186, 90, 24;
|
|
--h5-color-rgb-light: 80, 124, 78;
|
|
--h5-color-rgb-dark: 85, 130, 82;
|
|
|
|
/* Borders */
|
|
--border-width: 1px;
|
|
--border-width-thick: calc(var(--border-width) * 2);
|
|
|
|
/* Decorative indicators */
|
|
--indicator-width: 3px;
|
|
--indicator-width-wide: 4px;
|
|
|
|
/* Table styling */
|
|
--table-zebra-light: rgba(var(--gray-20), var(--opacity-medium));
|
|
--table-zebra-dark: rgba(var(--gray-80), var(--opacity-medium));
|
|
--table-hover-light: rgba(var(--gray-20), var(--opacity-half));
|
|
--table-hover-dark: rgba(var(--gray-80), var(--opacity-half));
|
|
|
|
/* Vault Switcher Mask */
|
|
--scrip-vault-mask-top-alpha: 1;
|
|
--scrip-vault-mask-mid-alpha: 0.6;
|
|
--scrip-vault-mask-bottom-alpha: 0;
|
|
--scrip-vault-mask-mid-stop: 50%;
|
|
|
|
/* Status Bar Dimensions & Opacity */
|
|
--scrip-chrome-muted-opacity: 0.72;
|
|
--scrip-status-compact-width: min(13rem, calc(100vw - var(--size-8)));
|
|
--scrip-status-expanded-width: min(28rem, calc(100vw - var(--size-8)));
|
|
}
|
|
|
|
|
|
/* [02] Shadows & Theme Colors */
|
|
.theme-light {
|
|
color-scheme: light;
|
|
--scrip-highlight-blend: darken;
|
|
--color-accent: rgb(var(--color-accent-rgb-light));
|
|
--color-secondary: rgb(var(--color-secondary-rgb-light));
|
|
--scrip-shadow-color: 28deg 15% 35%;
|
|
|
|
/* Multi-layered ambient shadows simulate a soft physical light source. */
|
|
--scrip-shadow-ambient: 0 1px 2px hsl(var(--scrip-shadow-color) / 0.05), 0 2px 4px hsl(var(--scrip-shadow-color) / 0.05), 0 4px 8px hsl(var(--scrip-shadow-color) / 0.05);
|
|
--scrip-shadow-key: 0 10px 20px -5px hsl(var(--scrip-shadow-color) / 0.12), 0 5px 10px -5px hsl(var(--scrip-shadow-color) / 0.08);
|
|
--scrip-shadow-s: var(--scrip-shadow-key), var(--scrip-shadow-ambient);
|
|
--scrip-shadow-l:
|
|
0 1px 1px hsl(var(--scrip-shadow-color) / 0.02),
|
|
0 2px 2px hsl(var(--scrip-shadow-color) / 0.02),
|
|
0 4px 4px hsl(var(--scrip-shadow-color) / 0.02),
|
|
0 8px 8px hsl(var(--scrip-shadow-color) / 0.02),
|
|
0 16px 16px hsl(var(--scrip-shadow-color) / 0.02),
|
|
0 32px 32px hsl(var(--scrip-shadow-color) / 0.02),
|
|
0 48px 96px -32px hsl(var(--scrip-shadow-color) / 0.15);
|
|
--scrip-shadow-tactile:
|
|
0 3px 12px -6px hsl(var(--scrip-shadow-color) / 0.2),
|
|
0 1px 4px -2px hsl(var(--scrip-shadow-color) / 0.16);
|
|
--color-accent-rgb: var(--color-accent-rgb-light);
|
|
--color-secondary-rgb: var(--color-secondary-rgb-light);
|
|
--h4-color-rgb: var(--h4-color-rgb-light);
|
|
--h5-color-rgb: var(--h5-color-rgb-light);
|
|
|
|
/* Background colors */
|
|
--background-base-rgb: var(--gray-10);
|
|
--background-hover: rgba(var(--gray-50), var(--opacity-subtle));
|
|
--background-active: rgba(var(--gray-50), var(--opacity-moderate));
|
|
--background-selected: rgba(var(--gray-50), var(--opacity-moderate));
|
|
--background-selected-hover: rgba(var(--gray-50), var(--opacity-moderate));
|
|
--background-inverse: rgb(var(--gray-80));
|
|
|
|
/* Clean light-mode glass base */
|
|
--layer-glass-1: rgba(var(--layer-1-rgb), var(--opacity-glass));
|
|
--layer-glass-2: rgba(var(--layer-2-rgb), var(--opacity-glass));
|
|
|
|
--layer-1-rgb: var(--white);
|
|
--layer-2-rgb: var(--gray-10);
|
|
--layer-hover-1: rgb(var(--gray-10));
|
|
--layer-hover-2: rgba(var(--gray-20), var(--opacity-half));
|
|
--layer-active-1: rgb(var(--gray-30));
|
|
--layer-active-2: rgb(var(--gray-30));
|
|
--layer-selected-1: rgb(var(--gray-20));
|
|
--layer-selected-2: rgb(var(--gray-20));
|
|
--layer-selected-hover-1: rgba(var(--gray-30), var(--opacity-half));
|
|
--layer-selected-hover-2: rgba(var(--gray-30), var(--opacity-half));
|
|
|
|
/* Form field colors */
|
|
--field-1-rgb: var(--white);
|
|
--field-hover-1-rgb: var(--gray-20);
|
|
|
|
/* Border colors */
|
|
--border-subtle-0-rgb: var(--gray-20);
|
|
--border-subtle-1-rgb: var(--gray-20);
|
|
--border-subtle-2-rgb: var(--gray-20);
|
|
--border-subtle-selected-1-rgb: var(--gray-30);
|
|
--border-subtle-selected-2-rgb: var(--gray-30);
|
|
--border-strong-1-rgb: var(--gray-50);
|
|
--border-strong-2-rgb: var(--gray-50);
|
|
--border-inverse-rgb: var(--gray-100);
|
|
|
|
/* Text colors tuned for the warm palette */
|
|
--text-primary-rgb: var(--gray-100);
|
|
--text-secondary-rgb: var(--gray-80);
|
|
--text-placeholder-rgb: var(--gray-70);
|
|
--text-muted-rgb: var(--gray-70);
|
|
|
|
/* Icon colors */
|
|
--icon-primary-rgb: var(--gray-100);
|
|
--icon-secondary-rgb: var(--gray-70);
|
|
--icon-on-color-rgb: var(--white);
|
|
--icon-inverse-rgb: var(--white);
|
|
|
|
/* Focus and interaction colors */
|
|
--focus: rgb(var(--color-accent-rgb));
|
|
--interactive: rgb(var(--color-accent-rgb));
|
|
--overlay: color-mix(in srgb, rgb(var(--background-base-rgb)) 45%, rgba(0, 0, 0, 0.55));
|
|
|
|
/* Workspace background */
|
|
--workspace-background-translucent: rgba(var(--gray-10), var(--opacity-moderate));
|
|
|
|
/* Table styling tokens */
|
|
--table-zebra: var(--table-zebra-light);
|
|
--table-hover: var(--table-hover-light);
|
|
|
|
/* State colors */
|
|
--color-error-rgb: 201, 76, 59;
|
|
/* Error-leaning red-orange */
|
|
--color-success-rgb: 111, 163, 111;
|
|
/* Soft success green */
|
|
--color-warning-rgb: 227, 163, 59;
|
|
/* Warning yellow-orange */
|
|
|
|
/* Vault switcher mask tuning is defined at :root by default; override here only when theme-specific changes are needed. */
|
|
--scrip-app-texture: var(--scrip-texture-noise);
|
|
}
|
|
|
|
.theme-dark {
|
|
color-scheme: dark;
|
|
--scrip-highlight-blend: lighten;
|
|
--color-accent: rgb(var(--color-accent-rgb-dark));
|
|
--color-secondary: rgb(var(--color-secondary-rgb-dark));
|
|
--scrip-shadow-color: 28deg 28% 16%;
|
|
--scrip-shadow-key: 0 2px 10px -4px hsl(var(--scrip-shadow-color) / 0.32);
|
|
--scrip-shadow-ambient: 0 0 1px 0 hsl(var(--scrip-shadow-color) / 0.4);
|
|
--scrip-shadow-s: var(--scrip-shadow-key), var(--scrip-shadow-ambient);
|
|
--scrip-shadow-l:
|
|
0 18px 52px -20px hsl(var(--scrip-shadow-color) / 0.44),
|
|
0 8px 24px -14px hsl(var(--scrip-shadow-color) / 0.34);
|
|
--scrip-shadow-tactile:
|
|
0 3px 10px -6px hsl(var(--scrip-shadow-color) / 0.36),
|
|
0 1px 3px -1px hsl(var(--scrip-shadow-color) / 0.48);
|
|
--color-accent-rgb: var(--color-accent-rgb-dark);
|
|
--color-secondary-rgb: var(--color-secondary-rgb-dark);
|
|
--h4-color-rgb: var(--h4-color-rgb-dark);
|
|
--h5-color-rgb: var(--h5-color-rgb-dark);
|
|
--background-base-rgb: var(--gray-100);
|
|
--background-hover: rgba(var(--gray-50), var(--opacity-subtle));
|
|
--background-active: rgba(var(--gray-50), var(--opacity-medium));
|
|
--background-selected: rgba(var(--gray-50), var(--opacity-moderate));
|
|
--background-selected-hover: var(--background-selected);
|
|
|
|
/* Frosted-surface base colors */
|
|
--layer-glass-1: rgba(var(--layer-1-rgb), var(--opacity-glass));
|
|
--layer-glass-2: rgba(var(--layer-2-rgb), var(--opacity-glass));
|
|
|
|
--layer-1-rgb: var(--gray-90);
|
|
--layer-2-rgb: var(--gray-80);
|
|
--layer-hover-1: rgba(var(--layer-1-rgb), var(--opacity-half));
|
|
--layer-hover-2: rgba(var(--layer-2-rgb), var(--opacity-half));
|
|
--layer-active-1: rgb(var(--gray-70));
|
|
--layer-active-2: rgb(var(--gray-60));
|
|
--layer-selected-1: rgb(var(--layer-1-rgb));
|
|
--layer-selected-2: rgb(var(--layer-2-rgb));
|
|
--layer-selected-hover-1: rgba(var(--gray-70), var(--opacity-half));
|
|
--layer-selected-hover-2: rgba(var(--gray-60), var(--opacity-half));
|
|
--field-1-rgb: var(--layer-1-rgb);
|
|
--field-hover-1-rgb: var(--layer-2-rgb);
|
|
--border-subtle-0-rgb: var(--gray-80);
|
|
--border-subtle-1-rgb: var(--border-subtle-0-rgb);
|
|
--border-subtle-2-rgb: var(--gray-70);
|
|
--border-subtle-selected-1-rgb: var(--border-subtle-2-rgb);
|
|
--border-subtle-selected-2-rgb: var(--gray-60);
|
|
--border-strong-1-rgb: var(--gray-60);
|
|
--border-strong-2-rgb: var(--gray-50);
|
|
--border-inverse-rgb: var(--gray-10);
|
|
--text-primary-rgb: var(--gray-10);
|
|
--text-secondary-rgb: var(--gray-20);
|
|
--text-placeholder-rgb: var(--gray-30);
|
|
--text-muted-rgb: var(--gray-30);
|
|
--icon-primary-rgb: var(--text-primary-rgb);
|
|
--icon-secondary-rgb: var(--text-secondary-rgb);
|
|
--icon-on-color-rgb: var(--white);
|
|
--icon-inverse-rgb: var(--background-base-rgb);
|
|
--focus: rgb(var(--color-accent-rgb));
|
|
--interactive: var(--focus);
|
|
--overlay: color-mix(in srgb, rgb(var(--background-base-rgb)) 60%, rgba(0, 0, 0, 0.6));
|
|
--workspace-background-translucent: rgba(var(--background-base-rgb), var(--opacity-moderate));
|
|
--table-zebra: var(--table-zebra-dark);
|
|
--table-hover: var(--table-hover-dark);
|
|
/* State colors */
|
|
--color-error-rgb: 214, 102, 84;
|
|
--color-success-rgb: 142, 186, 142;
|
|
--color-warning-rgb: 240, 185, 90;
|
|
|
|
--scrip-app-texture: var(--scrip-texture-noise-dark);
|
|
}
|
|
|
|
|
|
/* [03] Theme Mapping */
|
|
.theme-light,
|
|
.theme-dark {
|
|
|
|
|
|
/* Vault switcher gradient mask */
|
|
--scrip-vault-mask: linear-gradient(to top,
|
|
rgba(var(--layer-2-rgb), var(--scrip-vault-mask-top-alpha)) 0%,
|
|
rgba(var(--layer-2-rgb), var(--scrip-vault-mask-mid-alpha)) var(--scrip-vault-mask-mid-stop),
|
|
rgba(var(--layer-2-rgb), var(--scrip-vault-mask-bottom-alpha)) 100%);
|
|
|
|
/* Background and layers */
|
|
--background: rgb(var(--background-base-rgb));
|
|
--layer-1: rgb(var(--layer-1-rgb));
|
|
--layer-2: rgb(var(--layer-2-rgb));
|
|
--field-1: rgb(var(--field-1-rgb));
|
|
--field-hover-1: rgb(var(--field-hover-1-rgb));
|
|
|
|
/* Heading colors */
|
|
--h3-color: rgb(var(--color-accent-rgb));
|
|
--h4-color: rgb(var(--h4-color-rgb));
|
|
--h5-color: rgb(var(--h5-color-rgb));
|
|
|
|
/* Text colors */
|
|
--text-primary: rgb(var(--text-primary-rgb));
|
|
--text-secondary: rgb(var(--text-secondary-rgb));
|
|
--text-placeholder: rgb(var(--text-placeholder-rgb));
|
|
--text-muted: rgb(var(--text-muted-rgb));
|
|
|
|
/* Icon colors */
|
|
--icon-primary: rgb(var(--icon-primary-rgb));
|
|
--icon-secondary: rgb(var(--icon-secondary-rgb));
|
|
--icon-on-color: rgb(var(--icon-on-color-rgb));
|
|
--icon-inverse: rgb(var(--icon-inverse-rgb));
|
|
|
|
/* Border colors */
|
|
--border-subtle-0: rgb(var(--border-subtle-0-rgb));
|
|
--border-subtle-1: rgb(var(--border-subtle-1-rgb));
|
|
--border-subtle-2: rgb(var(--border-subtle-2-rgb));
|
|
--border-subtle-selected-1: rgb(var(--border-subtle-selected-1-rgb));
|
|
--border-subtle-selected-2: rgb(var(--border-subtle-selected-2-rgb));
|
|
--border-strong-1: rgb(var(--border-strong-1-rgb));
|
|
--border-strong-2: rgb(var(--border-strong-2-rgb));
|
|
--border-inverse: rgb(var(--border-inverse-rgb));
|
|
|
|
/* State background colors */
|
|
--background-modifier-success-hover: rgba(var(--color-success-rgb), var(--opacity-moderate));
|
|
--red: rgba(var(--color-error-rgb), var(--opacity-subtle));
|
|
--green: rgba(var(--color-success-rgb), var(--opacity-subtle));
|
|
|
|
/* Emphasis text and interaction */
|
|
--text-accent: var(--interactive);
|
|
--text-accent-hover: color-mix(in srgb, var(--interactive) 82%, var(--text-primary));
|
|
--text-accent-active: color-mix(in srgb, var(--interactive) 68%, var(--text-primary));
|
|
--text-accent-subtle: color-mix(in srgb, var(--interactive) 54%, var(--text-primary));
|
|
--interactive-accent: var(--interactive);
|
|
--interactive-accent-hover: color-mix(in srgb, var(--interactive) 90%, rgb(var(--gray-100)));
|
|
--interactive-accent-active: color-mix(in srgb, var(--interactive) 82%, rgb(var(--gray-100)));
|
|
--interactive-accent-rgb: var(--color-accent-rgb);
|
|
--highlight: rgba(var(--color-accent-rgb), var(--opacity-strong));
|
|
--highlight-subtle: rgba(var(--color-accent-rgb), var(--opacity-medium));
|
|
--highlight-strong: rgba(var(--color-accent-rgb), 0.9);
|
|
--text-highlight-bg: var(--highlight);
|
|
--text-highlight-bg-active: var(--highlight);
|
|
--highlight-color: var(--highlight);
|
|
--color-accent-1: color-mix(in srgb, var(--interactive) 90%, var(--layer-1));
|
|
--color-accent-2: color-mix(in srgb, var(--interactive) 82%, var(--layer-1));
|
|
--color-accent-3: color-mix(in srgb, var(--interactive) 70%, var(--layer-1));
|
|
--color-accent-4: color-mix(in srgb, var(--interactive) 55%, var(--layer-1));
|
|
--color-accent-dark-1: color-mix(in srgb, var(--interactive) 88%, var(--background));
|
|
--color-accent-dark-2: color-mix(in srgb, var(--interactive) 78%, var(--background));
|
|
--color-accent-dark-3: color-mix(in srgb, var(--interactive) 68%, var(--background));
|
|
|
|
/* Secondary color variants */
|
|
--color-secondary-1: color-mix(in srgb, var(--color-secondary) 90%, var(--layer-1));
|
|
--color-secondary-2: color-mix(in srgb, var(--color-secondary) 82%, var(--layer-1));
|
|
--color-secondary-3: color-mix(in srgb, var(--color-secondary) 70%, var(--layer-1));
|
|
--color-secondary-4: color-mix(in srgb, var(--color-secondary) 55%, var(--layer-1));
|
|
--color-secondary-dark-1: color-mix(in srgb, var(--color-secondary) 88%, var(--background));
|
|
--color-secondary-dark-2: color-mix(in srgb, var(--color-secondary) 78%, var(--background));
|
|
--color-secondary-dark-3: color-mix(in srgb, var(--color-secondary) 68%, var(--background));
|
|
|
|
/* Secondary text variants */
|
|
--text-secondary-accent: color-mix(in srgb, var(--color-secondary) 86%, var(--text-primary));
|
|
--text-secondary-accent-hover: color-mix(in srgb, var(--color-secondary) 74%, var(--text-primary));
|
|
--text-secondary-accent-active: color-mix(in srgb, var(--color-secondary) 62%, var(--text-primary));
|
|
--text-secondary-accent-subtle: color-mix(in srgb, var(--color-secondary) 52%, var(--text-primary));
|
|
|
|
/* Obsidian compatibility tokens */
|
|
--background-primary: var(--background);
|
|
--background-primary-alt: var(--layer-1);
|
|
--background-secondary: var(--layer-2);
|
|
--background-secondary-alt: var(--layer-1);
|
|
--background-modifier-hover: var(--background-hover);
|
|
--background-modifier-active: var(--background-active);
|
|
--background-modifier-active-hover: rgba(var(--color-accent-rgb), var(--opacity-subtle));
|
|
--background-modifier-border: var(--border-subtle-0);
|
|
--background-modifier-border-hover: var(--border-subtle-1);
|
|
--background-modifier-border-focus: var(--focus);
|
|
--background-modifier-error-rgb: var(--color-error-rgb);
|
|
--background-modifier-error: var(--red);
|
|
--background-modifier-error-hover: rgba(var(--color-error-rgb), var(--opacity-moderate));
|
|
--background-modifier-success-rgb: var(--color-success-rgb);
|
|
--background-modifier-success: var(--green);
|
|
--background-modifier-form-field: var(--field-1);
|
|
--background-modifier-form-field-highlighted: var(--field-hover-1);
|
|
--background-modifier-form-field-active: var(--field-hover-1);
|
|
--background-modifier-form-field-disabled: rgba(var(--gray-50), var(--opacity-minimal));
|
|
--background-modifier-selected: var(--background-selected);
|
|
--background-modifier-selected-hover: var(--background-selected-hover);
|
|
--background-modifier-cover: var(--overlay);
|
|
}
|
|
|
|
|
|
/* [04a] App Canvas */
|
|
body {
|
|
background-color: var(--background-primary);
|
|
background-image: var(--scrip-app-texture);
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
/* Let the Obsidian canvas show the body texture underneath. */
|
|
.app-container,
|
|
.workspace {
|
|
background-color: transparent;
|
|
}
|
|
|
|
body.is-mobile {
|
|
background-image: none;
|
|
}
|
|
|
|
/* [04] Global Semantics */
|
|
/* [04b] Semantic Aliases */
|
|
html {
|
|
/* Text colors */
|
|
--text-on-accent: rgb(var(--white));
|
|
--text-on-accent-inverted: rgb(var(--gray-100));
|
|
--text-faint: rgb(var(--gray-40));
|
|
--text-normal: var(--text-primary);
|
|
--scrip-ink-strong: var(--text-primary);
|
|
--scrip-ink-soft: color-mix(in srgb, var(--text-primary) 74%, var(--text-muted));
|
|
--scrip-ink-faint: color-mix(in srgb, var(--text-muted) 78%, var(--background));
|
|
|
|
/* Text selection colors using richer color mixing */
|
|
--text-selection: color-mix(in srgb, var(--interactive) 25%, transparent);
|
|
--text-selection-highlight: color-mix(in srgb, var(--interactive) 20%, transparent);
|
|
|
|
/* Semantic text colors */
|
|
--text-error: rgb(var(--color-error-rgb));
|
|
--text-success: rgb(var(--color-success-rgb));
|
|
--text-warning: rgb(var(--color-warning-rgb));
|
|
|
|
/* Border colors */
|
|
--border-color: var(--border-subtle-1);
|
|
--border-color-hover: var(--border-subtle-2);
|
|
--border-color-hover-strong: var(--border-strong-1);
|
|
--border-color-active: var(--border-strong-1);
|
|
--border-color-active-strong: var(--border-strong-2);
|
|
--border-color-focus: var(--focus);
|
|
--border-color-focus-subtle: rgba(var(--color-accent-rgb), var(--opacity-moderate));
|
|
--border-color-secondary: rgba(var(--color-secondary-rgb), var(--opacity-moderate));
|
|
--border-color-secondary-strong: rgba(var(--color-secondary-rgb), var(--opacity-half));
|
|
|
|
/* Interaction colors */
|
|
--interactive-hover: color-mix(in srgb, var(--interactive) 88%, var(--background));
|
|
--interactive-hover-strong: color-mix(in srgb, var(--interactive) 84%, var(--background));
|
|
--interactive-active: color-mix(in srgb, var(--interactive) 78%, var(--background));
|
|
--interactive-active-strong: color-mix(in srgb, var(--interactive) 72%, var(--background));
|
|
--interactive-pressed: color-mix(in srgb, var(--interactive) 68%, var(--background));
|
|
--interactive-focus: color-mix(in srgb, var(--interactive) 92%, var(--layer-1));
|
|
--interactive-disabled: color-mix(in srgb, var(--interactive) 35%, var(--text-muted));
|
|
|
|
/* Interaction backgrounds */
|
|
--interactive-bg-light: color-mix(in srgb, var(--interactive) 18%, var(--background));
|
|
--interactive-bg-medium: color-mix(in srgb, var(--interactive) 26%, var(--background));
|
|
--interactive-bg-strong: color-mix(in srgb, var(--interactive) 34%, var(--background));
|
|
--scrip-surface-paper: color-mix(in srgb, var(--layer-1) 90%, var(--background));
|
|
--scrip-surface-paper-muted: color-mix(in srgb, var(--layer-1) 80%, var(--background));
|
|
--scrip-rule-soft: color-mix(in srgb, var(--border-subtle-1) 78%, transparent);
|
|
--scrip-rule-strong: color-mix(in srgb, var(--border-subtle-1) 88%, var(--background));
|
|
--scrip-rule-accent: color-mix(in srgb, rgb(var(--color-accent-rgb)) 16%, var(--border-subtle-1));
|
|
--scrip-heading-accent: color-mix(in srgb, var(--interactive) 84%, var(--background));
|
|
--paper-frame-border: var(--scrip-rule-strong);
|
|
--paper-frame-shadow: var(--scrip-shadow-s);
|
|
--panel-surface: var(--scrip-surface-paper);
|
|
--panel-surface-strong: var(--scrip-surface-paper-muted);
|
|
--panel-border-color: var(--scrip-rule-soft);
|
|
--panel-shadow-soft: 0 8px 18px -18px rgba(var(--gray-100), 0.12);
|
|
--title-rule-color: var(--scrip-rule-accent);
|
|
|
|
/* Secondary interaction background */
|
|
/* Secondary interaction backgrounds */
|
|
--secondary-bg-light: color-mix(in srgb, var(--color-secondary) 18%, var(--background));
|
|
--secondary-bg-medium: color-mix(in srgb, var(--color-secondary) 26%, var(--background));
|
|
--secondary-bg-strong: color-mix(in srgb, var(--color-secondary) 34%, var(--background));
|
|
|
|
/* Icons */
|
|
/* Icons */
|
|
--icon-s: 1em;
|
|
--icon-color: var(--icon-primary);
|
|
--icon-color-hover: var(--icon-secondary);
|
|
--icon-color-active: var(--interactive);
|
|
--icon-color-disabled: var(--icon-secondary);
|
|
|
|
/* Dividers and tabs */
|
|
/* Dividers and tabs */
|
|
--divider-color: var(--border-subtle-1);
|
|
--tab-text-color: var(--text-secondary);
|
|
--tab-text-color-active: var(--text-primary);
|
|
--tab-text-color-focused: var(--text-primary);
|
|
--shadow-s: var(--scrip-shadow-s);
|
|
--shadow-l: var(--scrip-shadow-l);
|
|
--shadow-tactile: var(--scrip-shadow-tactile);
|
|
--input-shadow: var(--shadow-tactile);
|
|
--input-shadow-hover: var(--shadow-s);
|
|
--input-shadow-focus: 0 0 0 var(--focus-ring-width) var(--focus);
|
|
|
|
/* Tags */
|
|
/* Tags */
|
|
--tag-color: var(--color-secondary);
|
|
--tag-color-hover: var(--color-secondary-dark-2);
|
|
--tag-color-active: var(--color-secondary-dark-3);
|
|
--tag-color-subtle: var(--text-secondary-accent-subtle);
|
|
--tag-background: rgba(var(--color-secondary-rgb), var(--opacity-subtle));
|
|
--tag-background-hover: rgba(var(--color-secondary-rgb), var(--opacity-moderate));
|
|
--tag-background-active: rgba(var(--color-secondary-rgb), var(--opacity-moderate));
|
|
--tag-border-color: rgba(var(--color-secondary-rgb), var(--opacity-moderate));
|
|
--tag-border-color-hover: rgba(var(--color-secondary-rgb), var(--opacity-half));
|
|
|
|
/* Search clear button */
|
|
/* Search clear button */
|
|
--search-clear-button-color: var(--icon-secondary);
|
|
--search-clear-button-color-hover: var(--icon-primary);
|
|
|
|
/* Scrollbars */
|
|
/* Scrollbars */
|
|
--scrollbar-size: 8px;
|
|
--scrollbar-radius: var(--radius-s);
|
|
--scrollbar-thumb-color: rgba(var(--gray-65), var(--opacity-medium));
|
|
--scrollbar-thumb-color-hover: rgba(var(--color-secondary-rgb), var(--opacity-half));
|
|
--scrollbar-track-color: transparent;
|
|
}
|
|
|
|
/* [05a] Workspace Tokens */
|
|
.workspace {
|
|
|
|
/* Navigation item styles */
|
|
--nav-item-background-hover: rgba(var(--color-accent-rgb), var(--opacity-subtle));
|
|
--nav-item-background-active: rgba(var(--color-accent-rgb), 0.12);
|
|
--nav-item-color: var(--text-primary);
|
|
--nav-item-color-hover: var(--text-primary);
|
|
--nav-item-color-active: var(--interactive-active);
|
|
--nav-item-color-subtle: var(--text-secondary);
|
|
--nav-file-background-hover: rgba(var(--color-accent-rgb), var(--opacity-subtle));
|
|
--nav-file-background-hover-strong: rgba(var(--color-accent-rgb), var(--opacity-moderate));
|
|
--nav-file-color: var(--text-primary);
|
|
--nav-file-color-hover: var(--text-primary);
|
|
--nav-file-color-active: var(--interactive-active);
|
|
--nav-folder-color: var(--text-primary);
|
|
--nav-folder-color-hover: var(--text-primary);
|
|
--nav-folder-color-active: var(--interactive-active);
|
|
|
|
/* Menu styles */
|
|
--menu-background: var(--layer-1);
|
|
--menu-background-hover: var(--layer-hover-1);
|
|
--menu-text-color: var(--text-primary);
|
|
--menu-text-color-hover: var(--text-primary);
|
|
--menu-border-color: var(--border-subtle-1);
|
|
|
|
/* Modal styles */
|
|
--modal-background: var(--layer-1);
|
|
--modal-border-color: var(--border-subtle-1);
|
|
--modal-shadow: var(--shadow-l);
|
|
|
|
/* Title text colors */
|
|
--text-title: var(--text-primary);
|
|
--text-title-h1: var(--text-normal);
|
|
--text-title-h2: var(--text-normal);
|
|
--text-title-h3: var(--h3-color);
|
|
--text-title-h4: var(--h4-color);
|
|
--text-title-h5: var(--h5-color);
|
|
--text-title-h6: var(--text-muted);
|
|
|
|
/* Links and marks */
|
|
--text-link: var(--interactive);
|
|
--text-link-hover: var(--interactive-hover);
|
|
--text-link-active: var(--interactive-active);
|
|
--text-link-subtle: var(--text-accent-subtle);
|
|
--text-a: var(--interactive);
|
|
--text-a-hover: var(--text-accent-hover);
|
|
--text-a-active: var(--text-accent-active);
|
|
--text-mark: var(--highlight);
|
|
--text-mark-subtle: var(--highlight-subtle);
|
|
--text-mark-strong: var(--highlight-strong);
|
|
|
|
/* Icon sizes */
|
|
--icon-size: 1em;
|
|
--icon-size-s: 0.875em;
|
|
--icon-size-m: 1em;
|
|
--icon-size-l: 1.25em;
|
|
|
|
/* Blockquotes */
|
|
--blockquote-border-color: rgba(var(--color-secondary-rgb), var(--opacity-strong));
|
|
--blockquote-background-subtle: rgba(var(--color-secondary-rgb), var(--opacity-minimal));
|
|
--blockquote-text-color: var(--text-primary);
|
|
--blockquote-text-color-accent: var(--text-secondary-accent-subtle);
|
|
|
|
/* List markers */
|
|
--list-marker-color: var(--text-secondary);
|
|
--list-marker-color-hover: var(--text-primary);
|
|
--list-marker-color-active: var(--interactive);
|
|
|
|
/* [05] Typography */
|
|
font-family: var(--scrip-font-text);
|
|
--font-interface: var(--scrip-font-cjk-stack);
|
|
--font-headings: var(--scrip-font-heading-stack);
|
|
--font-text: var(--scrip-font-cjk-stack);
|
|
--font-monospace: var(--scrip-font-mono-stack);
|
|
/* Line heights */
|
|
--line-height-tight: 1.35;
|
|
--line-height-normal: 1.72;
|
|
--line-height-relaxed: 1.8;
|
|
|
|
/* Paragraph spacing */
|
|
--paragraph-spacing-base: clamp(1.1rem, 2.2vw, 1.55rem);
|
|
--paragraph-spacing: calc(var(--paragraph-spacing-base) * var(--density-modifier));
|
|
--paragraph-spacing-tight: calc(var(--paragraph-spacing-base) * var(--multiplier-tight));
|
|
--paragraph-spacing-relaxed: calc(var(--paragraph-spacing-base) * var(--multiplier-relaxed));
|
|
}
|
|
|
|
/* 滚动条 hover 宽度过渡 / Scrollbar Hover Width Transition */
|
|
::-webkit-scrollbar {
|
|
width: 14px;
|
|
background-color: var(--scrollbar-track-color);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb-color);
|
|
border-radius: var(--scrollbar-radius);
|
|
border: 4px solid transparent; /* 侧边留白防止由于宽度变化导致的抖动 */
|
|
background-clip: content-box;
|
|
transition: background-color var(--ease-fast-smooth), border-width 0.2s;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--scrollbar-thumb-color-hover);
|
|
border-width: 2px; /* 悬停时稍微变粗，但不改变 scrollbar 总宽度 */
|
|
}
|
|
|
|
body.styled-scrollbars .cm-scroller:not(:hover)::-webkit-scrollbar-thumb,
|
|
body.styled-scrollbars .markdown-preview-view:not(:hover)::-webkit-scrollbar-thumb,
|
|
body.styled-scrollbars .nav-files-container:not(:hover)::-webkit-scrollbar-thumb,
|
|
body.styled-scrollbars .nav-folder-children:not(:hover)::-webkit-scrollbar-thumb {
|
|
background-color: transparent;
|
|
}
|
|
|
|
|
|
/* Shared focus ring lives at the semantic layer so navigation, links,
|
|
buttons, and form fields inherit one accessibility treatment. */
|
|
:is(button, input, textarea, select, a, .nav-file-title, .nav-folder-title, .tree-item-inner, [tabindex]:not([tabindex="-1"])):focus-visible {
|
|
outline: var(--outline-width) solid var(--background-modifier-border-focus);
|
|
outline-offset: var(--outline-offset);
|
|
}
|
|
|
|
/* Operational UI surfaces use a quieter sans stack for faster scanning,
|
|
while document titles and headings keep the serif-forward voice. */
|
|
:is(.workspace-tabs, .workspace-tab-header, .workspace-tab-header-inner, .nav-header, .nav-files-container, .nav-folder-title, .nav-file-title, .tree-item-inner, .menu, .menu-item, .suggestion-container, .suggestion-item, .modal, .modal-title, .prompt, .prompt-input, .search-input-container, .search-result, .clickable-icon, button, input, select, textarea) {
|
|
font-family: var(--font-interface);
|
|
}
|
|
|
|
/* [06] Markdown Layout */
|
|
/* [06a] Editor Surface */
|
|
.markdown-source-view {
|
|
line-height: var(--line-height-normal);
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
/* Mobile adjustments */
|
|
/* Mobile responsive adjustments */
|
|
@media (max-width: 900px) {
|
|
font-feature-settings: "kern" 1, "liga" 1;
|
|
}
|
|
}
|
|
|
|
/* [06b] Editor Flow */
|
|
.markdown-source-view .cm-line {
|
|
margin-block-end: calc(var(--paragraph-spacing) * var(--multiplier-tight));
|
|
letter-spacing: 0;
|
|
text-wrap: pretty;
|
|
position: relative;
|
|
|
|
/* Mobile adjustments */
|
|
/* Mobile responsive adjustments */
|
|
@media (max-width: 900px) {
|
|
margin-block-end: calc(var(--paragraph-spacing) * 0.65);
|
|
}
|
|
}
|
|
|
|
/* [06c] Reading Surface */
|
|
.markdown-preview-view {
|
|
line-height: var(--line-height-relaxed);
|
|
max-width: var(--size-max-width-reading);
|
|
margin: 0 auto;
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "palt" 1;
|
|
|
|
|
|
/* Mobile adjustments */
|
|
/* Mobile responsive adjustments */
|
|
@media (max-width: 900px) {
|
|
max-width: var(--size-max-width-mobile);
|
|
font-feature-settings: "kern" 1, "liga" 1;
|
|
}
|
|
}
|
|
|
|
/* [06d] Reading Paragraph Rhythm */
|
|
.markdown-preview-view p {
|
|
line-height: var(--line-height-relaxed);
|
|
margin-block-end: calc(var(--paragraph-spacing) * 0.96);
|
|
letter-spacing: 0;
|
|
word-break: break-word;
|
|
line-break: auto;
|
|
text-align: justify;
|
|
text-wrap: pretty;
|
|
hyphens: none;
|
|
|
|
/* Mobile adjustments */
|
|
/* Mobile responsive adjustments */
|
|
@media (max-width: 900px) {
|
|
margin-block-end: calc(var(--paragraph-spacing) * 0.8);
|
|
text-align: start;
|
|
text-wrap: pretty;
|
|
}
|
|
}
|
|
|
|
/* Keep full justification for prose, but fall back to start alignment for
|
|
structured or technical reading contexts where spacing artifacts are more noticeable. */
|
|
.markdown-preview-view :is(li p, blockquote p, .callout-content p, .markdown-embed p, td p, th p) {
|
|
text-align: start;
|
|
}
|
|
|
|
/* [06e] Shared Selection */
|
|
::selection {
|
|
background: var(--text-selection);
|
|
color: inherit;
|
|
}
|
|
|
|
.markdown-preview-view ::selection,
|
|
.markdown-rendered ::selection,
|
|
.markdown-source-view.mod-cm6 .cm-selectionBackground,
|
|
.markdown-source-view.mod-cm6.cm-focused .cm-selectionBackground,
|
|
.cm-editor .cm-selectionBackground,
|
|
.cm-editor.cm-focused>.cm-scroller>.cm-selectionLayer .cm-selectionBackground {
|
|
background: var(--text-selection-highlight);
|
|
}
|
|
|
|
/* [06f] Note Title */
|
|
.inline-title {
|
|
font-family: var(--font-headings);
|
|
font-size: var(--scrip-type-inline-title-size);
|
|
line-height: var(--scrip-type-inline-title-leading);
|
|
letter-spacing: var(--scrip-type-inline-title-tracking);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--scrip-ink-strong);
|
|
text-wrap: balance;
|
|
max-width: min(100%, 34ch);
|
|
padding: var(--size-2) 0 var(--size-3);
|
|
margin-bottom: var(--size-3);
|
|
border-bottom: var(--border-width-thick) solid color-mix(in srgb, var(--title-rule-color) 74%, transparent);
|
|
}
|
|
|
|
/* [06g] Shared Typographic Refinements */
|
|
.markdown-preview-view p,
|
|
.markdown-source-view .cm-line {
|
|
font-kerning: normal;
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-content,
|
|
.markdown-preview-view,
|
|
.inline-title {
|
|
font-variant-ligatures: common-ligatures contextual;
|
|
}
|
|
|
|
/* [06h] Reading Headings */
|
|
.markdown-preview-view :is(h1, h2) {
|
|
font-family: var(--font-headings);
|
|
color: var(--scrip-ink-strong);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.markdown-preview-view h1 {
|
|
font-size: var(--scrip-type-h1-size);
|
|
line-height: var(--scrip-type-h1-leading);
|
|
letter-spacing: var(--scrip-type-h1-tracking);
|
|
font-weight: var(--font-semibold);
|
|
margin-top: calc(var(--paragraph-spacing) * 1.28);
|
|
padding-left: var(--size-4);
|
|
border-left: var(--indicator-width-wide) solid var(--scrip-heading-accent);
|
|
margin-bottom: calc(var(--paragraph-spacing) * 0.92);
|
|
}
|
|
|
|
.markdown-preview-view h2 {
|
|
font-size: var(--scrip-type-h2-size);
|
|
line-height: var(--scrip-type-h2-leading);
|
|
letter-spacing: var(--scrip-type-h2-tracking);
|
|
font-weight: var(--font-semibold);
|
|
margin-top: calc(var(--paragraph-spacing) * 1.42);
|
|
border-bottom: var(--border-width) solid var(--title-rule-color);
|
|
width: 100%;
|
|
padding-bottom: var(--size-2);
|
|
margin-bottom: calc(var(--paragraph-spacing) * 0.84);
|
|
}
|
|
|
|
.markdown-preview-view h3 {
|
|
font-size: var(--scrip-type-h3-size);
|
|
line-height: var(--scrip-type-h3-leading);
|
|
letter-spacing: var(--scrip-type-h3-tracking);
|
|
font-family: var(--font-headings);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--text-secondary-accent);
|
|
margin-top: calc(var(--paragraph-spacing) * 1.16);
|
|
margin-bottom: calc(var(--paragraph-spacing-tight) * 0.9);
|
|
}
|
|
|
|
.markdown-preview-view :is(h4, h5, h6) {
|
|
line-height: var(--line-height-tight);
|
|
letter-spacing: 0;
|
|
text-wrap: balance;
|
|
margin-top: var(--paragraph-spacing);
|
|
margin-bottom: calc(var(--paragraph-spacing-tight) * 0.72);
|
|
color: var(--scrip-ink-soft);
|
|
}
|
|
|
|
.markdown-preview-view :is(h1, h2, h3, h4, h5, h6):first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* [06i] Editor Heading Sync */
|
|
.markdown-source-view.mod-cm6 .HyperMD-header.HyperMD-header-2.cm-line {
|
|
border-bottom: var(--border-width-thick) solid var(--border-subtle-1);
|
|
width: 100%;
|
|
padding-bottom: var(--size-2);
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 :is(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3).cm-line {
|
|
font-family: var(--font-headings);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--scrip-ink-strong);
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .HyperMD-header-1.cm-line {
|
|
font-size: var(--scrip-type-h1-size);
|
|
line-height: var(--scrip-type-h1-leading);
|
|
letter-spacing: var(--scrip-type-h1-tracking);
|
|
margin-top: calc(var(--paragraph-spacing) * 0.6);
|
|
margin-bottom: calc(var(--paragraph-spacing-tight) * 0.9);
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .HyperMD-header-2.cm-line {
|
|
font-size: var(--scrip-type-h2-size);
|
|
line-height: var(--scrip-type-h2-leading);
|
|
letter-spacing: var(--scrip-type-h2-tracking);
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .HyperMD-header-3.cm-line {
|
|
font-size: var(--scrip-type-h3-size);
|
|
line-height: var(--scrip-type-h3-leading);
|
|
letter-spacing: var(--scrip-type-h3-tracking);
|
|
color: var(--text-secondary-accent);
|
|
margin-top: calc(var(--paragraph-spacing) * 0.4);
|
|
}
|
|
|
|
/* [06j] Active Line Indicator */
|
|
.markdown-source-view.mod-cm6 .cm-active:not(.HyperMD-header, .HyperMD-codeblock)::before,
|
|
.markdown-source-view.mod-cm6 .cm-active.HyperMD-quote::before {
|
|
content: '';
|
|
height: 100%;
|
|
position: absolute;
|
|
left: calc(var(--size-3) * -1);
|
|
border-left: var(--indicator-width) solid var(--interactive);
|
|
border-radius: var(--radius-s) 0 0 var(--radius-s);
|
|
opacity: var(--opacity-strong);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* [07] Markdown Elements */
|
|
/* Element-local variables stay near their component blocks on purpose:
|
|
preview/table/list scopes are easier to maintain when the token and the rule
|
|
live together inside the same markdown element section. */
|
|
/* [07a] Tables */
|
|
.markdown-preview-view table {
|
|
--table-border-radius: var(--radius-l);
|
|
--table-border-width: var(--border-width);
|
|
--table-border-color: var(--border-subtle-1);
|
|
--table-header-bg: var(--layer-2);
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border: var(--table-border-width) solid var(--table-border-color);
|
|
border-radius: var(--table-border-radius);
|
|
overflow: hidden;
|
|
width: 100%;
|
|
margin-block: var(--size-6);
|
|
}
|
|
|
|
.markdown-preview-view table th {
|
|
background-color: var(--layer-2);
|
|
font-weight: var(--font-semibold);
|
|
padding: var(--size-2) var(--size-4);
|
|
text-align: start;
|
|
border-bottom: var(--border-width) solid var(--border-subtle-1);
|
|
}
|
|
|
|
.markdown-preview-view table td {
|
|
padding: var(--size-2) var(--size-4);
|
|
}
|
|
|
|
.markdown-preview-view table tbody tr:nth-child(even) {
|
|
background-color: var(--table-zebra);
|
|
}
|
|
|
|
.markdown-preview-view table tbody tr:hover {
|
|
background-color: var(--table-hover);
|
|
transition: background-color var(--ease-fast-smooth);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.markdown-preview-view table {
|
|
display: block;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
box-shadow: var(--scrip-shadow-ambient);
|
|
}
|
|
|
|
.markdown-preview-view table th,
|
|
.markdown-preview-view table td {
|
|
min-width: 5rem;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
|
|
/* [07c] List Styles */
|
|
.markdown-preview-view ul,
|
|
.markdown-preview-view ol {
|
|
margin: calc(var(--paragraph-spacing) * 0.92) 0;
|
|
padding-inline-start: var(--size-6);
|
|
}
|
|
|
|
.markdown-preview-view :is(ul, ol) :is(ul, ol) {
|
|
margin: calc(var(--paragraph-spacing-tight) * 0.8) 0;
|
|
padding-inline-start: var(--size-5);
|
|
}
|
|
|
|
.markdown-preview-view li {
|
|
margin: calc(var(--size-2) * 0.9) 0;
|
|
line-height: var(--line-height-normal);
|
|
}
|
|
|
|
.markdown-preview-view li::marker {
|
|
color: var(--list-marker-color);
|
|
}
|
|
|
|
.markdown-preview-view li>p {
|
|
margin-block-end: calc(var(--paragraph-spacing-tight) * 0.7);
|
|
}
|
|
|
|
/* List marker styling */
|
|
.markdown-preview-view ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
.markdown-preview-view ul ul {
|
|
list-style-type: circle;
|
|
}
|
|
|
|
.markdown-preview-view ul ul ul {
|
|
list-style-type: square;
|
|
}
|
|
|
|
.markdown-preview-view ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
/* [07d] Highlight Styles */
|
|
.search-result-file-matched-text,
|
|
.markdown-rendered mark,
|
|
.cm-s-obsidian span.cm-highlight {
|
|
--scrip-highlight-dir: to right;
|
|
color: var(--text-normal);
|
|
padding: 0.05em 0;
|
|
background: linear-gradient(var(--scrip-highlight-dir), var(--highlight-subtle), var(--highlight-subtle));
|
|
background-size: 100% 5px, 0 5px;
|
|
background-position: 100% 100%, 0 100%;
|
|
background-repeat: no-repeat;
|
|
transition: background-size var(--ease-moderate-smooth);
|
|
border-radius: var(--radius-s);
|
|
|
|
&:hover {
|
|
background-size: 100% 100%, 0 .1em;
|
|
}
|
|
}
|
|
|
|
/* RTL highlight direction override */
|
|
[dir="rtl"] :is(.search-result-file-matched-text, .markdown-rendered mark, .cm-s-obsidian span.cm-highlight) {
|
|
--scrip-highlight-dir: to left;
|
|
}
|
|
|
|
|
|
/* [07e] Link Styles */
|
|
/* [07e-i] Link Tokens */
|
|
:is(.markdown-rendered, .markdown-source-view) {
|
|
--link-unresolved-opacity: 0.6;
|
|
--link-unresolved-color: var(--text-muted);
|
|
--link-unresolved-hover-color: var(--text-secondary);
|
|
--link-style: normal;
|
|
--link-text-transform: none;
|
|
--link-external-style: normal;
|
|
--link-color-base: var(--text-accent);
|
|
--link-color-hover: var(--text-accent-hover);
|
|
--link-color-active: var(--text-accent-active);
|
|
--link-external-color-base: var(--text-a);
|
|
--link-external-color-hover: var(--text-a-hover);
|
|
--link-external-color-active: var(--text-a-active);
|
|
--link-visited-color-base: var(--text-secondary-accent);
|
|
--link-visited-color-hover: var(--text-secondary-accent-active);
|
|
--link-underline-color-base: rgba(var(--color-accent-rgb), 0.42);
|
|
--link-underline-color-hover: var(--text-accent);
|
|
--link-underline-color-active: var(--text-accent-active);
|
|
--link-external-underline-color-base: rgba(var(--color-secondary-rgb), 0.45);
|
|
--link-external-underline-color-hover: var(--color-secondary-dark-1);
|
|
--link-visited-underline-color-base: rgba(var(--color-secondary-rgb), 0.68);
|
|
--link-visited-underline-color-hover: var(--text-secondary-accent-active);
|
|
--link-underline-thickness-base: 1.25px;
|
|
--link-underline-thickness-hover: 2px;
|
|
--link-underline-thickness-active: 2.25px;
|
|
--link-underline-offset: 0.15em;
|
|
--link-underline-style-base: solid;
|
|
--link-underline-style-visited: dotted;
|
|
}
|
|
|
|
.markdown-rendered :is(.internal-link, .external-link),
|
|
.markdown-source-view :is(.cm-hmd-internal-link, .cm-link) {
|
|
font-style: var(--link-style);
|
|
text-transform: var(--link-text-transform);
|
|
color: var(--link-color-base);
|
|
font-weight: var(--font-medium);
|
|
--link-underline-current: var(--link-underline-color-base);
|
|
--link-underline-width: var(--link-underline-thickness-base);
|
|
background-image: linear-gradient(var(--link-underline-current), var(--link-underline-current));
|
|
background-repeat: no-repeat;
|
|
background-position: 0 100%;
|
|
background-size: 100% var(--link-underline-width);
|
|
padding-bottom: 0.04em;
|
|
transition: color var(--ease-fast-smooth),
|
|
background-size var(--ease-fast-smooth);
|
|
|
|
&:hover {
|
|
color: var(--link-color-hover);
|
|
--link-underline-current: var(--link-underline-color-hover);
|
|
--link-underline-width: var(--link-underline-thickness-hover);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--link-color-active);
|
|
--link-underline-current: var(--link-underline-color-active);
|
|
--link-underline-width: var(--link-underline-thickness-active);
|
|
}
|
|
|
|
&:visited {
|
|
color: var(--link-visited-color-base);
|
|
--link-underline-current: var(--link-visited-underline-color-base);
|
|
--link-underline-width: var(--link-underline-thickness-base);
|
|
|
|
&:hover {
|
|
color: var(--link-visited-color-hover);
|
|
--link-underline-current: var(--link-visited-underline-color-hover);
|
|
--link-underline-width: var(--link-underline-thickness-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.markdown-rendered .external-link,
|
|
.markdown-source-view .cm-link:not(.cm-hmd-internal-link) {
|
|
color: var(--link-external-color-base);
|
|
--link-underline-current: var(--link-external-underline-color-base);
|
|
|
|
&:hover {
|
|
color: var(--link-external-color-hover);
|
|
--link-underline-current: var(--link-external-underline-color-hover);
|
|
--link-underline-width: var(--link-underline-thickness-hover);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--link-external-color-active);
|
|
--link-underline-current: var(--link-external-color-active);
|
|
--link-underline-width: var(--link-underline-thickness-active);
|
|
}
|
|
}
|
|
|
|
.markdown-rendered .internal-link.is-unresolved,
|
|
.markdown-source-view.mod-cm6 .is-unresolved {
|
|
color: var(--link-unresolved-color);
|
|
opacity: var(--link-unresolved-opacity);
|
|
font-weight: var(--font-bold);
|
|
transition: color var(--ease-moderate-smooth),
|
|
opacity var(--ease-moderate-smooth);
|
|
|
|
&:hover {
|
|
color: var(--link-unresolved-hover-color);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.markdown-source-view .cm-url .cm-underline {
|
|
font-style: var(--link-external-style);
|
|
}
|
|
|
|
/* Restore a gentle emphasis style for Markdown `*emphasis*`,
|
|
including Chinese text where synthetic italic may be needed. */
|
|
.markdown-rendered em,
|
|
.markdown-source-view :is(.cm-em, .cm-formatting-em) {
|
|
font-style: italic;
|
|
font-synthesis: style;
|
|
color: var(--text-secondary-accent-subtle);
|
|
}
|
|
|
|
/* [07f] Blockquotes */
|
|
.markdown-preview-view blockquote {
|
|
background-image: linear-gradient(to right,
|
|
color-mix(in srgb, var(--blockquote-background-subtle) 28%, transparent),
|
|
transparent 72%);
|
|
background-color: transparent;
|
|
border-left: var(--border-width) solid color-mix(in srgb, var(--blockquote-border-color) 58%, transparent);
|
|
padding: var(--size-2) 0 var(--size-2) var(--size-4);
|
|
margin: calc(var(--paragraph-spacing) * 1.08) 0;
|
|
border-radius: 0;
|
|
border-top: none;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
font-style: normal;
|
|
line-height: var(--line-height-relaxed);
|
|
color: color-mix(in srgb, var(--blockquote-text-color) 78%, var(--text-muted));
|
|
box-shadow: none;
|
|
}
|
|
|
|
.markdown-preview-view blockquote > p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-preview-view blockquote > p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 span.cm-quote.cm-quote-1,
|
|
.markdown-source-view.mod-cm5 span.cm-quote {
|
|
font-style: italic;
|
|
color: var(--blockquote-text-color-accent);
|
|
}
|
|
|
|
/* [07g] Horizontal Rules */
|
|
.markdown-preview-view hr {
|
|
border: none;
|
|
height: var(--border-width);
|
|
background: linear-gradient(to right,
|
|
transparent,
|
|
var(--border-subtle-1),
|
|
transparent);
|
|
margin: var(--size-7) 0;
|
|
}
|
|
|
|
/* [07h] Tag Styles */
|
|
.tag {
|
|
background-color: transparent;
|
|
border: 1px solid color-mix(in srgb, var(--tag-border-color) 68%, transparent);
|
|
color: var(--tag-color-subtle);
|
|
border-radius: var(--radius-s);
|
|
padding: 0.06em 0.36em;
|
|
font-size: 0.8rem;
|
|
font-weight: var(--font-normal);
|
|
line-height: var(--line-height-tight);
|
|
transition:
|
|
background-color var(--ease-fast-smooth),
|
|
border-color var(--ease-fast-smooth),
|
|
color var(--ease-fast-smooth);
|
|
display: inline-block;
|
|
vertical-align: baseline;
|
|
margin-inline-end: var(--size-1);
|
|
box-shadow: none;
|
|
|
|
&:hover {
|
|
background-color: color-mix(in srgb, var(--tag-background-hover) 58%, transparent);
|
|
border-color: var(--tag-border-color-hover);
|
|
color: var(--tag-color-hover);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:active,
|
|
&.is-active {
|
|
background-color: color-mix(in srgb, var(--tag-background-active) 64%, transparent);
|
|
border-color: var(--tag-border-color-hover);
|
|
color: var(--tag-color-active);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* Workspace Chrome ==================================================== */
|
|
/* [08] 导航栏 / Navigation */
|
|
/* 导航项基础样式 */
|
|
.workspace :is(.nav-folder-title, .nav-file-title, .tree-item-inner, .nav-folder-title-content, .nav-file-title-content) {
|
|
color: var(--nav-item-color);
|
|
}
|
|
|
|
/* Interactive navigation styling */
|
|
.workspace :is(.nav-folder-title, .nav-file-title, .tree-item-inner) {
|
|
transition: var(--transition-state);
|
|
}
|
|
|
|
/* Keyboard focus state */
|
|
.workspace :is(.nav-folder-title, .nav-file-title, .tree-item-inner):focus-visible {
|
|
outline: var(--outline-width) solid var(--focus);
|
|
outline-offset: var(--outline-offset);
|
|
background-color: var(--nav-item-background-hover);
|
|
color: var(--nav-item-color-active);
|
|
}
|
|
|
|
/* Hover state */
|
|
.workspace :is(.nav-folder-title, .nav-file-title, .tree-item-inner):hover {
|
|
background-color: var(--nav-item-background-hover);
|
|
color: var(--nav-item-color-hover);
|
|
}
|
|
|
|
.workspace :is(.nav-folder-title, .nav-file-title, .tree-item-inner):hover :is(.nav-folder-title-content, .nav-file-title-content, .tree-item-self, .nav-folder-collapse-indicator) {
|
|
color: var(--nav-folder-color-hover);
|
|
}
|
|
|
|
/* Active state with refined highlighting */
|
|
.workspace :is(.nav-folder-title, .nav-file-title, .tree-item-inner).is-active {
|
|
background-color: var(--nav-item-background-active);
|
|
color: var(--text-primary);
|
|
box-shadow: inset 3px 0 0 0 var(--interactive-accent);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
/* Mobile active navigation state */
|
|
body.is-mobile :is(.nav-folder-title, .nav-file-title, .tree-item-inner).is-active {
|
|
background-color: var(--nav-item-background-active);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* [08a] Note Header Hover Reveal */
|
|
body:not(.is-phone, .view-header-title-always) .view-header {
|
|
transition:
|
|
opacity var(--ease-fast-smooth),
|
|
background-color var(--ease-fast-smooth);
|
|
}
|
|
|
|
body:not(.is-phone, .view-header-title-always) .view-header :is(.view-header-left, .view-header-title-container > div, .view-actions) {
|
|
transition:
|
|
opacity var(--ease-fast-smooth),
|
|
transform var(--ease-moderate-smooth),
|
|
color var(--ease-fast-smooth);
|
|
transform-origin: center left;
|
|
}
|
|
|
|
body:not(.is-phone, .view-header-title-always) .view-header-title-parent {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
body:not(.is-phone, .view-header-title-always) .view-header:not(:hover):not(:focus-within) :is(.view-header-left, .view-header-title-container > div, .view-actions):not(:focus-within) {
|
|
opacity: var(--scrip-chrome-muted-opacity);
|
|
transform: none;
|
|
}
|
|
|
|
body:not(.is-phone, .view-header-title-always) .view-header:is(:hover, :focus-within) :is(.view-header-left, .view-header-title-container > div, .view-actions) {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
/* [09] Nav Button Container */
|
|
body:not(.is-mobile) {
|
|
|
|
/* Nav Header */
|
|
& .nav-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: var(--size-2) var(--size-2) 0;
|
|
margin-block-start: var(--size-3);
|
|
margin-block-end: var(--size-2);
|
|
}
|
|
|
|
/* Nav button container with simplified hover effects */
|
|
/* Nav Buttons Container (floating effect simplified) */
|
|
& .nav-buttons-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: var(--size-1);
|
|
padding: var(--size-1);
|
|
}
|
|
}
|
|
|
|
/* Workspace Auto-hide ================================================ */
|
|
/* [09a] Status Bar Hover Reveal - Option B: Horizontal Capsule Expand */
|
|
body:not(.is-mobile) .app-container .status-bar {
|
|
position: fixed;
|
|
bottom: 12px;
|
|
right: 24px;
|
|
z-index: var(--layer-status-bar, 99);
|
|
width: auto;
|
|
height: 32px;
|
|
min-width: 36px;
|
|
max-width: 36px; /* Collapsed to a 36px circular pill */
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center; /* Center the sync icon when collapsed */
|
|
|
|
/* Elegant floating pill design */
|
|
background-color: var(--layer-1);
|
|
border: var(--border-width) solid var(--border-subtle-1);
|
|
border-radius: 999px;
|
|
padding: 0; /* No padding when collapsed to center the icon */
|
|
opacity: 0.65;
|
|
box-shadow: var(--shadow-tactile);
|
|
|
|
/* Smooth horizontal expansion */
|
|
transition:
|
|
max-width var(--ease-moderate-smooth),
|
|
padding-inline var(--ease-fast-smooth),
|
|
opacity var(--ease-fast-smooth),
|
|
box-shadow var(--ease-moderate-smooth);
|
|
}
|
|
|
|
body:not(.is-mobile) .app-container .status-bar:hover,
|
|
body:not(.is-mobile) .app-container .status-bar:focus-within {
|
|
/* Hover state: expand horizontally to show all status items */
|
|
max-width: var(--scrip-status-expanded-width);
|
|
opacity: 1;
|
|
box-shadow: var(--shadow-s);
|
|
justify-content: flex-start;
|
|
padding-inline: var(--size-3); /* Restore padding when expanded */
|
|
}
|
|
|
|
/* Move sync status indicator to the left so it displays when collapsed */
|
|
body:not(.is-mobile) .app-container .status-bar .status-bar-item.plugin-sync,
|
|
body:not(.is-mobile) .app-container .status-bar .status-bar-item[class*="sync"] {
|
|
order: -1;
|
|
}
|
|
|
|
/* Hide other status bar items when collapsed to avoid content leakage and ensure centering */
|
|
body:not(.is-mobile) .app-container .status-bar:not(:hover):not(:focus-within) .status-bar-item {
|
|
display: none;
|
|
}
|
|
|
|
/* Keep only the sync status item visible when collapsed */
|
|
body:not(.is-mobile) .app-container .status-bar:not(:hover):not(:focus-within) .status-bar-item.plugin-sync,
|
|
body:not(.is-mobile) .app-container .status-bar:not(:hover):not(:focus-within) .status-bar-item[class*="sync"] {
|
|
display: flex;
|
|
}
|
|
|
|
/* [09b] Sidebar Settings Group Hover Reveal - Sidedock Vault Profile Layout */
|
|
/* Default collapsed state: hide Vault Switcher and Help button */
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-switcher,
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-actions .clickable-icon:first-child,
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-actions .clickable-icon[aria-label*="Help"],
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-actions .clickable-icon[aria-label*="help"],
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-actions .clickable-icon[aria-label*="帮助"] {
|
|
opacity: 0;
|
|
max-width: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-actions {
|
|
gap: 0;
|
|
}
|
|
|
|
/* Ensure transition is applied and Help button's display: none is overridden */
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher,
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions .clickable-icon:first-child,
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions .clickable-icon[aria-label*="Help"],
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions .clickable-icon[aria-label*="help"],
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions .clickable-icon[aria-label*="帮助"] {
|
|
display: inline-flex;
|
|
transition:
|
|
opacity var(--ease-fast-smooth),
|
|
max-width var(--ease-moderate-smooth),
|
|
padding var(--ease-moderate-smooth),
|
|
margin var(--ease-moderate-smooth),
|
|
gap var(--ease-moderate-smooth);
|
|
}
|
|
|
|
/* Hover reveal state: expand switcher and Help button */
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:is(:hover, :focus-within) .workspace-drawer-vault-switcher {
|
|
opacity: 1;
|
|
max-width: 180px;
|
|
padding-left: var(--size-2);
|
|
padding-right: var(--size-2);
|
|
margin-left: initial;
|
|
margin-right: initial;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:is(:hover, :focus-within) .workspace-drawer-vault-actions .clickable-icon:first-child,
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:is(:hover, :focus-within) .workspace-drawer-vault-actions .clickable-icon[aria-label*="Help"],
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:is(:hover, :focus-within) .workspace-drawer-vault-actions .clickable-icon[aria-label*="help"],
|
|
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:is(:hover, :focus-within) .workspace-drawer-vault-actions .clickable-icon[aria-label*="帮助"] {
|
|
opacity: 1;
|
|
max-width: 36px;
|
|
padding-left: initial;
|
|
padding-right: initial;
|
|
margin-left: initial;
|
|
margin-right: initial;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* [09d] Sidebar Panel Headers Hover Reveal (Dot Collapsing) */
|
|
/* Default collapsed state: collapse buttons into small indicator dots */
|
|
body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header:not(:hover):not(:focus-within) .nav-buttons-container {
|
|
gap: 4px;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header:not(:hover):not(:focus-within) .nav-buttons-container .nav-action-button {
|
|
padding: 2px;
|
|
width: 4px; /* Small dot width */
|
|
height: 4px; /* Small dot height */
|
|
min-width: 0;
|
|
flex: 0 0 auto;
|
|
background-color: var(--background-modifier-hover);
|
|
box-shadow: none;
|
|
border-radius: 50%; /* Make them round dots */
|
|
margin: auto 0;
|
|
}
|
|
|
|
body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header:not(:hover):not(:focus-within) .nav-buttons-container .nav-action-button svg {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Ensure smooth transition for all button properties */
|
|
body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header .nav-buttons-container,
|
|
body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header .nav-buttons-container .nav-action-button,
|
|
body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header .nav-buttons-container .nav-action-button svg {
|
|
transition:
|
|
opacity var(--ease-fast-smooth),
|
|
width var(--ease-moderate-smooth),
|
|
height var(--ease-moderate-smooth),
|
|
padding var(--ease-moderate-smooth),
|
|
margin var(--ease-moderate-smooth),
|
|
background-color var(--ease-fast-smooth),
|
|
gap var(--ease-moderate-smooth);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms;
|
|
animation-iteration-count: 1;
|
|
transition-duration: 0.01ms;
|
|
transition-delay: 0ms;
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|
|
|
|
|
|
body:not(.is-mobile) .mod-sidedock.mod-right-split .workspace-tabs:last-of-type .node-insert-event {
|
|
padding-bottom: 36px;
|
|
}
|
|
|
|
/* [10] Buttons */
|
|
:where(button, .modal-button-container button) {
|
|
border-radius: var(--radius-m);
|
|
padding: var(--size-2) var(--size-4);
|
|
font-weight: var(--font-medium);
|
|
transition: var(--transition-interactive);
|
|
cursor: pointer;
|
|
border: var(--border-width) solid var(--border-subtle-1);
|
|
background-color: var(--layer-1);
|
|
color: var(--text-primary);
|
|
box-shadow: var(--scrip-shadow-tactile);
|
|
|
|
&:hover:not(:disabled) {
|
|
box-shadow: var(--scrip-shadow-s);
|
|
transform: translateY(var(--transform-translate-hover));
|
|
}
|
|
|
|
&:active:not(:disabled) {
|
|
transform: scale(var(--transform-scale-pressed));
|
|
background-color: var(--layer-active-1);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: var(--opacity-half);
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--outline-width) solid var(--focus);
|
|
outline-offset: var(--outline-offset);
|
|
}
|
|
}
|
|
|
|
/* Suggestion rows stay flat so command/search lists remain dense and stable. */
|
|
.suggestion-item {
|
|
border-radius: var(--radius-s);
|
|
padding: var(--size-2) var(--size-3);
|
|
font-weight: var(--font-normal);
|
|
transition:
|
|
background-color var(--ease-fast-smooth),
|
|
color var(--ease-fast-smooth);
|
|
cursor: pointer;
|
|
color: var(--text-primary);
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.suggestion-item:hover:not(.is-selected) {
|
|
background-color: var(--background-hover);
|
|
color: var(--text-primary);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Primary CTA buttons */
|
|
button.mod-cta,
|
|
.modal-button-container button.mod-cta,
|
|
.mod-cta:not(.workspace-leaf):not(.workspace-tab-header):not(.view-header) {
|
|
background-color: var(--interactive);
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive);
|
|
--input-shadow: inset 0 0 0 var(--border-width) var(--interactive-accent);
|
|
--input-shadow-hover: inset 0 0 0 var(--border-width) var(--interactive-accent-hover);
|
|
box-shadow:
|
|
var(--scrip-shadow-tactile),
|
|
var(--input-shadow);
|
|
|
|
&:hover:not(:disabled) {
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent-hover);
|
|
box-shadow:
|
|
var(--scrip-shadow-s),
|
|
var(--input-shadow-hover);
|
|
}
|
|
|
|
&:active:not(:disabled) {
|
|
color: var(--text-on-accent);
|
|
border-color: var(--interactive-accent-active);
|
|
box-shadow:
|
|
var(--scrip-shadow-tactile),
|
|
var(--input-shadow);
|
|
}
|
|
}
|
|
|
|
/* Secondary buttons */
|
|
:where(button.mod-secondary, .modal-button-container button.mod-secondary) {
|
|
background-color: transparent;
|
|
color: var(--text-secondary);
|
|
border-color: var(--border-subtle-1);
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: var(--background-hover);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-subtle-2);
|
|
}
|
|
}
|
|
|
|
/* Dangerous buttons */
|
|
:where(button.mod-dangerous, .modal-button-container button.mod-dangerous) {
|
|
background-color: transparent;
|
|
color: var(--text-error);
|
|
border-color: var(--border-subtle-1);
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: rgba(var(--color-error-rgb), var(--opacity-subtle));
|
|
border-color: rgba(var(--color-error-rgb), var(--opacity-moderate));
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* [11] Modals */
|
|
@keyframes modal-entrance {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Physical paper base filter */
|
|
.modal-container .modal,
|
|
.menu,
|
|
.popover,
|
|
.tooltip,
|
|
.suggestion-container {
|
|
/* Removed blur in favor of a matte physical-paper surface. */
|
|
background-color: var(--layer-1);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.modal-container .modal {
|
|
border: var(--border-width) solid var(--border-subtle-1);
|
|
border-radius: var(--radius-l);
|
|
/* Multi-layered ambient shadow plus inner highlight for depth. */
|
|
box-shadow:
|
|
var(--scrip-shadow-l),
|
|
inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.modal-container .modal {
|
|
animation: modal-entrance var(--duration-moderate) var(--motion-apple);
|
|
}
|
|
}
|
|
|
|
.modal-container .suggestion-item.is-selected {
|
|
background-color: var(--interactive);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
/* [11a] Floating Tooltips */
|
|
.popover,
|
|
.tooltip {
|
|
border: var(--border-width) solid var(--border-subtle-2);
|
|
box-shadow: var(--scrip-shadow-l);
|
|
border-radius: var(--radius-m);
|
|
padding: var(--size-4);
|
|
transition: var(--transition-fast-ease);
|
|
}
|
|
|
|
/* Writing Components ================================================== */
|
|
|
|
|
|
/* [13] Callouts
|
|
Custom Obsidian callouts follow SCRIPTORIUM's paper metaphor,
|
|
using side color bars and soft backgrounds to create a sticky-note feel
|
|
while staying aligned with the accent and secondary palette. */
|
|
|
|
/* Callout base structure */
|
|
.callout {
|
|
--callout-default-rgb: var(--gray-60);
|
|
|
|
/* Info uses the warm secondary green. */
|
|
--callout-info-rgb: var(--color-secondary-rgb);
|
|
|
|
/* Success reuses the soft green success tone. */
|
|
--callout-success-rgb: var(--color-success-rgb);
|
|
|
|
/* Important examples reuse the accent orange. */
|
|
--callout-accent-rgb: var(--color-accent-rgb);
|
|
|
|
/* Warnings reuse the yellow-orange warning tone. */
|
|
--callout-warning-rgb: var(--color-warning-rgb);
|
|
|
|
/* Errors reuse the red-orange error tone. */
|
|
--callout-danger-rgb: var(--color-error-rgb);
|
|
|
|
/* Quotes use a warm gray-brown. */
|
|
--callout-quote-rgb: var(--gray-50);
|
|
|
|
/* Questions use a golden brown accent. */
|
|
--callout-question-rgb: 190, 140, 80;
|
|
|
|
--callout-radius: var(--radius-m);
|
|
--callout-padding: var(--size-4);
|
|
--callout-bg-opacity: 0.04;
|
|
--callout-border-opacity: 0.22;
|
|
--callout-title-weight: var(--font-semibold);
|
|
--callout-color: var(--callout-default-rgb);
|
|
--callout-icon-column: calc(var(--icon-size) + var(--size-2));
|
|
|
|
background-color: color-mix(in srgb, var(--panel-surface) 95%, rgba(var(--callout-color), var(--callout-bg-opacity)));
|
|
border: var(--border-width) solid color-mix(in srgb, var(--paper-frame-border) 82%, rgba(var(--callout-color), 0.18));
|
|
border-left: var(--indicator-width) solid rgba(var(--callout-color), var(--callout-border-opacity));
|
|
border-radius: var(--callout-radius);
|
|
padding: 0;
|
|
margin: var(--size-5) 0;
|
|
overflow: hidden;
|
|
transition: border-color var(--ease-fast-smooth);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.callout:hover {
|
|
border-color: color-mix(in srgb, var(--paper-frame-border) 68%, rgba(var(--callout-color), 0.24));
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Callout title line */
|
|
.callout-title {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: var(--size-4) var(--callout-padding) 0;
|
|
gap: var(--size-2);
|
|
min-width: 0;
|
|
line-height: var(--line-height-relaxed);
|
|
font-weight: var(--callout-title-weight);
|
|
font-size: 1em;
|
|
letter-spacing: 0;
|
|
color: var(--scrip-ink-strong);
|
|
background-color: transparent;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.callout-title .callout-icon {
|
|
flex: 0 0 auto;
|
|
width: var(--icon-size);
|
|
margin-top: 0.36em;
|
|
color: color-mix(in srgb, rgb(var(--callout-color)) 58%, var(--scrip-ink-soft));
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.callout-title .callout-title-inner {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
word-break: normal;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
.callout-title .callout-title-inner p {
|
|
margin: 0;
|
|
}
|
|
|
|
.callout-title .callout-fold {
|
|
flex: 0 0 auto;
|
|
margin-inline-start: auto;
|
|
margin-top: 0.36em;
|
|
opacity: var(--opacity-half);
|
|
transition: transform var(--ease-moderate-smooth),
|
|
opacity var(--ease-fast-smooth);
|
|
}
|
|
|
|
.callout-title:hover .callout-fold {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Callout content area */
|
|
.callout-content {
|
|
min-width: 0;
|
|
padding: var(--size-3) var(--callout-padding) var(--callout-padding) calc(var(--callout-padding) + var(--callout-icon-column));
|
|
color: var(--scrip-ink-strong);
|
|
line-height: var(--line-height-relaxed);
|
|
background: transparent;
|
|
}
|
|
|
|
.callout-content>*:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.callout-content>*:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.callout-content>p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.callout-content>p {
|
|
margin-block-end: calc(var(--paragraph-spacing-tight) * 0.72);
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-callout .callout {
|
|
margin: 0;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .HyperMD-callout.cm-line {
|
|
margin-block-end: 0;
|
|
line-height: var(--line-height-relaxed);
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .HyperMD-callout :is(.cm-quote, .cm-formatting-quote) {
|
|
font-style: normal;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Callout style mappings */
|
|
|
|
/* Note and info variants */
|
|
.callout[data-callout="note"],
|
|
.callout[data-callout="info"],
|
|
.callout[data-callout="abstract"],
|
|
.callout[data-callout="summary"],
|
|
.callout[data-callout="tldr"],
|
|
.callout[data-callout="todo"] {
|
|
--callout-color: var(--callout-info-rgb);
|
|
}
|
|
|
|
/* Success-oriented variants */
|
|
.callout[data-callout="tip"],
|
|
.callout[data-callout="hint"],
|
|
.callout[data-callout="success"],
|
|
.callout[data-callout="check"],
|
|
.callout[data-callout="done"] {
|
|
--callout-color: var(--callout-success-rgb);
|
|
}
|
|
|
|
/* Important and example variants */
|
|
.callout[data-callout="important"],
|
|
.callout[data-callout="example"] {
|
|
--callout-color: var(--callout-accent-rgb);
|
|
}
|
|
|
|
/* Warning and caution variants */
|
|
.callout[data-callout="warning"],
|
|
.callout[data-callout="caution"],
|
|
.callout[data-callout="attention"] {
|
|
--callout-color: var(--callout-warning-rgb);
|
|
}
|
|
|
|
/* Danger and error variants */
|
|
.callout[data-callout="danger"],
|
|
.callout[data-callout="error"],
|
|
.callout[data-callout="bug"],
|
|
.callout[data-callout="failure"],
|
|
.callout[data-callout="fail"],
|
|
.callout[data-callout="missing"] {
|
|
--callout-color: var(--callout-danger-rgb);
|
|
}
|
|
|
|
/* Quote variants */
|
|
.callout[data-callout="quote"],
|
|
.callout[data-callout="cite"] {
|
|
--callout-color: var(--callout-quote-rgb);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Question variants */
|
|
.callout[data-callout="question"],
|
|
.callout[data-callout="faq"],
|
|
.callout[data-callout="help"] {
|
|
--callout-color: var(--callout-question-rgb);
|
|
}
|
|
|
|
/* Nested callouts */
|
|
.callout .callout {
|
|
margin: var(--size-3) 0;
|
|
border-left-width: var(--indicator-width);
|
|
}
|
|
|
|
|
|
/* [06e-override] Keep alignment scoped to actual prose blocks. */
|
|
.markdown-preview-view :is(li p, blockquote p, .callout-content p, .markdown-embed p, td p, th p) {
|
|
text-align: start;
|
|
}
|