/* ===================================================================== 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", "霞鹜文楷等宽 GB 屏幕阅读版", "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", "霞鹜文楷 GB 屏幕阅读版", "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; /* Position Offsets */ --offset-checkbox-marker: -1px; --offset-checkbox-preview: 2px; /* Checkbox Marker Position & Size */ --scrip-chk-pos-x: 43.75%; /* 7/16 */ --scrip-chk-pos-y: 53.125%; /* 17/32 */ --scrip-chk-size: 59.375%; /* 19/32 */ /* 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%; } /* [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)); --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))); } /* 滚动条 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 !important; } /* 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; } .markdown-preview-view p:has(.tag), .markdown-source-view.mod-cm6 .cm-line:has(.cm-hashtag) { 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; white-space: nowrap; box-shadow: var(--scrip-shadow-ambient); } .markdown-preview-view table th, .markdown-preview-view table td { min-width: 9rem; } } /* [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); -webkit-box-decoration-break: clone; box-decoration-break: clone; &: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); text-decoration: underline; text-decoration-color: var(--link-underline-color-base); text-decoration-thickness: var(--link-underline-thickness-base); text-decoration-style: var(--link-underline-style-base); text-underline-offset: var(--link-underline-offset); text-decoration-skip-ink: auto; font-weight: var(--font-medium); transition: color var(--ease-fast-smooth), text-decoration-color var(--ease-fast-smooth), text-decoration-thickness var(--ease-fast-smooth); &:hover { color: var(--link-color-hover); text-decoration: underline; text-decoration-color: var(--link-underline-color-hover); text-decoration-thickness: var(--link-underline-thickness-hover); } &:active { color: var(--link-color-active); text-decoration-color: var(--link-underline-color-active); text-decoration-thickness: var(--link-underline-thickness-active); } &:visited { color: var(--link-visited-color-base); text-decoration-color: var(--link-visited-underline-color-base); text-decoration-thickness: var(--link-underline-thickness-base); text-decoration-style: var(--link-underline-style-visited); &:hover { color: var(--link-visited-color-hover); text-decoration-color: var(--link-visited-underline-color-hover); text-decoration-thickness: 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); text-decoration-color: var(--link-external-underline-color-base); &:hover { color: var(--link-external-color-hover); text-decoration-color: var(--link-external-underline-color-hover); text-decoration-thickness: var(--link-underline-thickness-hover); } &:active { color: var(--link-external-color-active); text-decoration-color: var(--link-external-color-active); text-decoration-thickness: 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); text-decoration: none; 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; text-decoration: none; } } .markdown-source-view .cm-url .cm-underline { font-style: var(--link-external-style); text-decoration: none; } /* 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) !important; 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 !important; transform: none !important; } /* [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 */ body:not(.is-mobile) .status-bar { position: relative; z-index: 0; width: auto !important; min-width: 0 !important; max-width: var(--scrip-status-expanded-width); min-height: 8px; height: calc-size(auto, size); overflow: hidden; white-space: nowrap; background-color: rgba(0, 0, 0, 0); border: none; border-radius: 999px; box-shadow: none; transition: max-width var(--ease-moderate-smooth), padding var(--ease-fast-smooth), opacity var(--ease-fast-smooth), transform var(--ease-moderate-smooth), background-color var(--ease-fast-smooth), box-shadow var(--ease-fast-smooth); transform-origin: bottom right; } body:not(.is-mobile) .status-bar::before { transition: var(--ease-moderate-smooth) var(--anim-motion-baseline); content: ""; position: absolute; bottom: 0; right: 0; width: 150%; height: 200%; z-index: -1; pointer-events: none; background: radial-gradient(farthest-side at right bottom, var(--background-primary), rgba(var(--mono-rgb-0), 0)); } body:not(.is-mobile) .status-bar > * { transition: opacity var(--ease-fast-smooth), transform var(--ease-moderate-smooth), filter var(--ease-fast-smooth); } body:not(.is-mobile) .status-bar:not(:hover):not(:focus-within) { max-width: var(--scrip-status-compact-width) !important; min-width: var(--scrip-status-compact-width); padding-inline: var(--size-2) !important; box-shadow: none; opacity: 1; transform: none; } body:not(.is-mobile) .status-bar:not(:hover):not(:focus-within)::before { opacity: 0; } body:not(.is-mobile) .status-bar:not(:hover):not(:focus-within) > * { opacity: 1; transform: none; filter: none; } body:not(.is-mobile) .status-bar:hover, body:not(.is-mobile) .status-bar:focus-within { padding-inline: var(--size-3); box-shadow: var(--shadow-s); } body:not(.is-mobile) .status-bar:hover::before, body:not(.is-mobile) .status-bar:focus-within::before { opacity: 1; } 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 ================================================== */ /* [12] Checkboxes & Tasks */ input[type=checkbox] { border-radius: var(--radius-s); border: 1.5px solid var(--text-faint); width: 16px; height: 16px; transition: var(--transition-interactive); cursor: pointer; position: relative; appearance: none; -webkit-appearance: none; background-color: var(--layer-1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); &:hover { border-color: var(--interactive-accent); box-shadow: var(--scrip-shadow-tactile); } &:checked { border-color: var(--interactive-accent); background-color: var(--interactive-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(var(--color-accent-rgb), var(--opacity-subtle)); transform: scale(var(--transform-scale-checked)); transition: var(--ease-spring); } &:active { transform: scale(var(--transform-scale-pressed)); } } .markdown-preview-view input[type=checkbox] { inset-block-start: 2px; } /* [12a] Half-checked Task */ /* Use a linear gradient to indicate a halfway-progress state. */ .markdown-preview-view input[type=checkbox][data-task="/"], .markdown-source-view.mod-cm6 input[type=checkbox][data-task="/"], .markdown-preview-view li[data-task="/"]>input[type=checkbox], .markdown-source-view.mod-cm6 li[data-task="/"]>input[type=checkbox] { border-color: var(--interactive-accent); background-color: var(--background-primary); background-image: linear-gradient(to right, var(--interactive-accent) 0, var(--interactive-accent) 50%, transparent 50%, transparent 100%); background-repeat: no-repeat; background-size: 100% 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 1px rgba(var(--color-accent-rgb), var(--opacity-subtle)); &::after { mask-image: none; background-color: transparent; } &:hover { background-image: linear-gradient(to right, var(--interactive-accent-hover) 0, var(--interactive-accent-hover) 50%, transparent 50%, transparent 100%); } &:checked { background-color: var(--background-primary); background-image: linear-gradient(to right, var(--interactive-accent) 0, var(--interactive-accent) 50%, transparent 50%, transparent 100%); &:hover { background-image: linear-gradient(to right, var(--interactive-accent-hover) 0, var(--interactive-accent-hover) 50%, transparent 50%, transparent 100%); } } } /* [12b] Completed Task */ /* Remove strikethrough and distinguish completion by fading color. */ :is(.markdown-preview-view, .markdown-source-view.mod-cm6) :is(ul > li.task-list-item.is-checked, ol > li.task-list-item.is-checked, .HyperMD-task-line[data-task='x'], .HyperMD-task-line[data-task='X'], .HyperMD-task-line[data-task='M']) { text-decoration: none; color: var(--text-faint); } :is(.markdown-preview-view, .markdown-source-view.mod-cm6) :is(ul > li.task-list-item.is-checked, ol > li.task-list-item.is-checked, .HyperMD-task-line[data-task='x'], .HyperMD-task-line[data-task='X'], .HyperMD-task-line[data-task='M']) > input[type=checkbox] { border-color: color-mix(in srgb, var(--interactive-accent) 78%, var(--text-faint)); background-color: color-mix(in srgb, var(--interactive-accent) 84%, var(--layer-1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(var(--color-accent-rgb), var(--opacity-minimal)); opacity: 0.9; } /* [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); } /* Fold animation */ @media (prefers-reduced-motion: no-preference) { .callout.is-collapsed .callout-title .callout-fold { transform: rotate(-90deg); } .callout.is-collapsed .callout-title { border-bottom-color: transparent; } } /* [14] Embedded Notes ─────────────────────────────────────────────── Consistent with blockquote language: left color bar + soft background. ───────────────────────────────────────────── */ .markdown-embed { border: var(--border-width) solid color-mix(in srgb, var(--paper-frame-border) 84%, transparent); border-left: var(--border-width) solid var(--scrip-rule-strong); border-radius: var(--radius-m); padding: var(--size-4); background-color: color-mix(in srgb, var(--panel-surface) 94%, var(--background)); margin: var(--size-5) 0; transition: border-color var(--ease-fast-smooth), background-color var(--ease-fast-smooth); box-shadow: none; } .markdown-embed:hover { border-color: color-mix(in srgb, var(--scrip-rule-strong) 82%, transparent); background-color: color-mix(in srgb, var(--panel-surface-strong) 86%, var(--background)); box-shadow: none; } .markdown-embed .markdown-embed-title { font-family: var(--font-interface); font-weight: var(--font-semibold); color: var(--scrip-ink-soft); font-size: 0.76rem; letter-spacing: 0.04em; } /* Images */ .markdown-rendered img, .image-embed img { border-radius: var(--radius-m); border: var(--border-width) solid var(--paper-frame-border); box-shadow: var(--paper-frame-shadow); background: var(--layer-1); } @media (prefers-reduced-motion: reduce) { body { background-image: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } input[type=checkbox]:checked, :where(button, .modal-button-container button, .suggestion-item):hover:not(:disabled) { transform: none; } } .markdown-rendered :is(p, li, blockquote, .callout-content) :is(.internal-link, .external-link) { font-weight: var(--font-normal); text-decoration-thickness: max(1px, 0.05em); text-underline-offset: 0.18em; }