/*Fonts*/ /* prism-q3 body pass: Pretendard (Korean-optimized sans) */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); :root { /*Note and Settings Text*/ /*kr : 노트 기본 폰트와 코드 폰트, 변경하지 않는게 좋습니다.*/ --default-font: "Pretendard Variable", "Pretendard", "Inter", sans-serif; /*Note*/ /* JetBrains Mono for latin/digits/symbols; Korean has no glyphs there and falls through to Orbit. matches the terminal (Ghostty) setup. */ --font-monospace: "JetBrains Mono", "Orbit", monospace; /*Code*/ /* Size Related Values */ /* kr: 노트 내 사이즈 값들로 사용될 변수들 입니다. */ --scale-dimension-size-max: 9999px; --scale-dimension-size-3000: 240px; --scale-dimension-size-2000: 160px; --scale-dimension-size-1500: 100px; --scale-dimension-size-1000: 80px; --scale-dimension-size-900: 72px; --scale-dimension-size-800: 64px; --scale-dimension-size-700: 56px; --scale-dimension-size-600: 48px; --scale-dimension-size-500: 40px; --scale-dimension-size-400: 32px; --scale-dimension-size-300: 24px; --scale-dimension-size-250: 20px; --scale-dimension-size-225: 18px; --scale-dimension-size-200: 16px; --scale-dimension-size-175: 14px; --scale-dimension-size-150: 12px; --scale-dimension-size-125: 10px; --scale-dimension-size-100: 8px; --scale-dimension-size-75: 6px; --scale-dimension-size-50: 4px; --scale-dimension-size-25: 2px; --scale-dimension-size-10: 1px; --scale-dimension-size-0: 0px; --scale-dimension-font-size-1300: 72px; --scale-dimension-font-size-1200: 60px; --scale-dimension-font-size-1100: 54px; --scale-dimension-font-size-1000: 48px; --scale-dimension-font-size-900: 42px; --scale-dimension-font-size-800: 36px; --scale-dimension-font-size-700: 32px; --scale-dimension-font-size-600: 28px; --scale-dimension-font-size-500: 24px; --scale-dimension-font-size-400: 20px; --scale-dimension-font-size-300: 18px; --scale-dimension-font-size-200: 16px; --scale-dimension-font-size-100: 14px; --scale-dimension-font-size-75: 13px; --scale-dimension-font-size-50: 12px; --scale-dimension-font-size-25: 11px; --scale-dimension-font-size-10: 10px; --static-large: 162%; --static-medium: 150%; --static-small: 132%; /* radius */ /* kr: 보더라운드 셋팅입니다. */ --scale-radius-9999: var(--scale-dimension-size-300); --scale-radius-6: var(--scale-dimension-size-300); --scale-radius-5: var(--scale-dimension-size-200); --scale-radius-4: var(--scale-dimension-size-150); --scale-radius-3: var(--scale-dimension-size-75); --scale-radius-2: var(--scale-dimension-size-50); --scale-radius-1: var(--scale-dimension-size-25); } body { /* ----------------------------------------------------- List of variables is placed in body rather than :root so that we can combine all property types including colors and sort alphabetically to maximize readability in the compiled app.css file. kr:변수 목록은 다음과 같이 본문에 배치됩니다:root so 색상을 포함한 모든 속성 유형을 결합할 수 있습니다 가독성을 극대화하기 위해 알파벳 순으로 정렬합니다 ----------------------------------------------------- */ /* Animations */ --anim-duration-none: 0; --anim-duration-superfast: 70ms; --anim-duration-fast: 140ms; --anim-duration-moderate: 300ms; --anim-duration-slow: 560ms; --anim-motion-smooth: cubic-bezier(0.45, 0.05, 0.55, 0.95); --anim-motion-delay: cubic-bezier(0.65, 0.05, 0.36, 1); --anim-motion-jumpy: cubic-bezier(0.68, -0.55, 0.27, 1.55); --anim-motion-swing: cubic-bezier(0, 0.55, 0.45, 1); /* Blockquotes */ --blockquote-border-thickness: 1px; --blockquote-border-color: var(--interactive-accent); --blockquote-font-style: normal; --blockquote-color: inherit; --blockquote-background-color: transparent; /* Bold */ --bold-weight: var(--font-semibold); --bold-color: inherit; --bold-background: var(--static-alpha-black-150); /* Borders */ --border-width: 1px; /* Buttons */ --button-radius: var(--input-radius); /* Callouts */ /* prism-q3 style: thin border + subtle tint + left accent bar */ /* NOTE: Dawn's bg is warm paper (not white) with darken/lighten blend, so opacities are tuned higher than prism-q3's white-bg originals. */ --callout-border-width: 1px; --callout-border-opacity: 0.3; --callout-tint-opacity: 0.09; --callout-bar-width: 3px; --callout-bar-opacity: 0.7; --callout-padding: var(--size-4-2) var(--size-4-5) var(--size-4-2) var(--size-4-5); --callout-radius: var(--radius-m); --callout-blend-mode: var(--highlight-mix-blend-mode); --callout-title-color: inherit; --callout-title-padding: var(--scale-dimension-size-0); --callout-title-size: var(--font-ui-medium); --callout-content-padding: 0; --callout-content-background: transparent; --callout-bug: var(--color-red-rgb); --callout-default: var(--mono-rgb-100); --callout-error: var(--color-red-rgb); --callout-example: var(--color-purple-rgb); --callout-fail: var(--color-red-rgb); --callout-important: var(--color-cyan-rgb); --callout-info: var(--color-blue-rgb); --callout-question: var(--color-yellow-rgb); --callout-success: var(--color-green-rgb); --callout-summary: var(--mono-rgb-100); --callout-tip: var(--color-cyan-rgb); --callout-todo: var(--color-blue-rgb); --callout-warning: var(--color-orange-rgb); --callout-quote: 158, 158, 158; /* Canvas */ --canvas-dot-pattern: var(--color-base-30); --canvas-color-1: var(--color-red-rgb); --canvas-color-2: var(--color-orange-rgb); --canvas-color-3: var(--color-yellow-rgb); --canvas-color-4: var(--color-green-rgb); --canvas-color-5: var(--color-cyan-rgb); --canvas-color-6: var(--color-purple-rgb); /* Checkboxes */ --checkbox-radius: var(--radius-m); --checkbox-size: calc(var(--font-text-size) * 1.1); --checkbox-marker-color: var(--background-primary); --checkbox-color: var(--interactive-accent); --checkbox-color-hover: var(--interactive-accent-hover); --checkbox-border-color: var(--text-faint); --checkbox-border-color-hover: var(--text-muted); --checklist-done-decoration: line-through; --checklist-done-color: var(--text-fade); /* Code */ --code-white-space: pre-wrap; --code-size: var(--font-smaller); --code-background: var(--color-gray-alpha-50); --code-normal: var(--text-muted); --code-comment: var(--text-fade); --code-function: var(--color-yellow); --code-important: var(--color-orange); --code-keyword: var(--color-blue); --code-operator: var(--color-red); --code-property: var(--color-cyan); --code-punctuation: var(--text-muted); --code-string: var(--color-green); --code-tag: var(--color-red); --code-value: var(--color-purple); /* Collapse icons */ --collapse-icon-color: var(--text-faint); --collapse-icon-color-collapsed: var(--text-accent); /* Cursor */ --cursor: default; --cursor-link: pointer; --cursor-action: pointer; /* Dialogs - e.g. small modals, confirmations */ --dialog-width: 560px; --dialog-max-width: 80vw; --dialog-max-height: 85vh; /* Dividers — between panes */ --divider-color: var(--background-modifier-border); --divider-color-hover: var(--interactive-accent); --divider-width: var(--scale-dimension-size-10); --divider-width-hover: var(--scale-dimension-size-25); --divider-vertical-height: calc(100% - var(--header-height)); /* Dragging */ --drag-ghost-background: rgba(0, 0, 0, 0.85); --drag-ghost-text-color: #fff; /* Embeds */ --embed-max-height: 4000px; --embed-canvas-max-height: 400px; --embed-background: inherit; --embed-border-left: 2px solid var(--interactive-accent); --embed-border-right: none; --embed-border-top: none; --embed-border-bottom: none; --embed-padding: 0 0 0 var(--size-4-6); --embed-font-style: inherit; /* Blocks */ --embed-block-shadow-hover: 0 0 0 1px var(--background-modifier-border), inset 0 0 0 1px var(--background-modifier-border); /* File layout */ --file-line-width: 760px; --file-folding-offset: 24px; --file-margins: var(--size-4-8); --file-header-font-size: var(--font-ui-small); --file-header-font-weight: 500; --file-header-border: var(--border-width) solid transparent; --file-header-justify: center; /* Relative font sizes */ --font-smallest: 0.8rem; --font-smaller: 0.875rem; --font-small: 0.933rem; /* UI font sizes */ --font-ui-smaller: var(--scale-dimension-font-size-25); --font-ui-small: var(--scale-dimension-font-size-75); --font-ui-medium: var(--scale-dimension-font-size-200); --font-ui-large: var(--scale-dimension-font-size-400); /* Font weights */ --font-thin: 100; --font-extralight: 200; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --font-black: 900; /* Footnotes */ --footnote-size: var(--font-smaller); /* Graphs */ --graph-controls-width: 240px; --graph-text: var(--text-normal); --graph-line: var(--color-base-35, var(--background-modifier-border-focus)); --graph-node: var(--text-muted); --graph-node-unresolved: var(--text-faint); --graph-node-focused: var(--text-accent); --graph-node-tag: var(--color-green); --graph-node-attachment: var(--color-yellow); /* Headings */ --heading-formatting: var(--text-faint); --h1-color: inherit; --h2-color: inherit; --h3-color: inherit; --h4-color: inherit; --h5-color: inherit; --h6-color: inherit; --h1-line-height: 1.2; --h2-line-height: 1.2; --h3-line-height: 1.3; --h4-line-height: 1.4; --h5-line-height: var(--line-height-normal); --h6-line-height: var(--line-height-normal); --h1-size: 1.375rem; --h2-size: 1.25rem; --h3-size: 1.125rem; --h4-size: 1rem; --h5-size: 0.875rem; --h6-size: 0.813rem; --h1-style: normal; --h2-style: normal; --h3-style: normal; --h4-style: normal; --h5-style: small-caps; --h6-style: small-caps; --h1-variant: normal; --h2-variant: normal; --h3-variant: normal; --h4-variant: normal; --h5-variant: normal; --h6-variant: normal; --h1-weight: var(--font-semibold); --h2-weight: var(--font-semibold); --h3-weight: var(--font-semibold); --h4-weight: var(--font-semibold); --h5-weight: var(--font-semibold); --h6-weight: var(--font-semibold); /* View header */ --header-height: 42px; /* Horizontal rules */ --hr-color: var(--background-modifier-border); --hr-thickness: 1px; /* Icons */ --icon-size: var(--icon-m); --icon-stroke: var(--icon-m-stroke-width); --icon-xs: 14px; --icon-s: 16px; --icon-m: 18px; --icon-l: 18px; --icon-xl: 32px; --icon-xs-stroke-width: 2px; --icon-s-stroke-width: 2px; --icon-m-stroke-width: 1.75px; --icon-l-stroke-width: 1.75px; --icon-xl-stroke-width: 1.25px; --icon-color: var(--text-muted); --icon-color-hover: var(--text-muted); --icon-color-active: var(--text-accent); --icon-color-focused: var(--text-normal); --icon-opacity: 0.6; --icon-opacity-hover: 1; --icon-opacity-active: 1; --clickable-icon-radius: var(--radius-m); /* Indentation guide (colors need --mono-rgb-100 → set on theme class) */ --indentation-guide-width: 1px; /* Inline title */ --inline-title-color: var(--h1-color); --inline-title-font: var(--h1-font); --inline-title-line-height: var(--h1-line-height); --inline-title-size: var(--h1-size); --inline-title-style: var(--h1-style); --inline-title-variant: var(--h1-variant); --inline-title-weight: var(--h1-weight); /* Inputs */ --input-height: var(--scale-dimension-size-400); --input-radius: var(--radius-m); --input-font-weight: var(--font-normal); --input-border-width: var(--scale-dimension-size-0); /* Italic */ --italic-color: inherit; /* Z-index */ --layer-cover: 5; --layer-sidedock: 10; --layer-status-bar: 15; --layer-popover: 30; --layer-slides: 45; --layer-modal: 50; --layer-notice: 60; --layer-menu: 65; --layer-tooltip: 70; --layer-dragged-item: 80; /* Line heights */ --line-height-large: 1.7; --line-height-normal: 1.6; --line-height-tight: 1.3; /* Links */ --link-color: var(--text-accent); --link-color-hover: var(--text-accent-hover); --link-decoration: none; --link-decoration-hover: underline; --link-decoration-thickness: auto; --link-external-color: var(--text-accent); --link-external-color-hover: var(--text-accent-hover); --link-external-decoration: none; --link-external-decoration-hover: underline; --link-external-filter: none; --link-unresolved-color: var(--text-accent); --link-unresolved-opacity: 0.6; --link-unresolved-filter: none; --link-unresolved-decoration-style: solid; --link-unresolved-decoration-color: hsla(var(--interactive-accent-hsl), 0.3); /* Lists */ --list-indent: 1rem; --list-spacing: 0.14rem; --list-marker-color: var(--color-base-35); --list-marker-color-hover: var(--text-muted); --list-marker-color-collapsed: var(--text-accent); --list-bullet-border: none; --list-bullet-radius: 50%; --list-bullet-size: 0.2rem; --list-bullet-transform: none; --list-numbered-style: decimal; /* File navigator */ --nav-item-size: var(--font-ui-small); --nav-item-color: var(--text-muted); --nav-item-color-hover: var(--text-normal); --nav-item-color-active: var(--text-normal); --nav-item-color-selected: var(--text-normal); --nav-item-color-highlighted: var(--text-accent-hover); --nav-item-background-hover: var(--background-modifier-hover); --nav-item-background-active: var(--background-modifier-hover); --nav-item-background-selected: hsla(var(--color-accent-hsl), 0.2); --nav-item-padding: var(--size-4-1) var(--size-4-2); --nav-item-parent-padding: var(--nav-item-padding); --nav-item-children-padding-left: var(--size-4-2); --nav-item-children-margin-left: var(--size-4-3); --nav-item-weight: inherit; --nav-item-weight-hover: var(--bold-weight); --nav-item-weight-active: var(--bold-weight); --nav-item-white-space: nowrap; --nav-indentation-guide-width: var(--indentation-guide-width); --nav-indentation-guide-color: var(--indentation-guide-color); --nav-collapse-icon-color: var(--collapse-icon-color); --nav-collapse-icon-color-collapsed: var(--text-faint); /* Modals - e.g. settings, community themes, community plugins */ --modal-background: var(--background-primary); --modal-width: 90vw; --modal-height: 85vh; --modal-max-width: 1100px; --modal-max-height: 1000px; --modal-max-width-narrow: 800px; --modal-border-width: var(--border-width); --modal-border-color: var( --color-base-40, var(--background-modifier-border-focus) ); --modal-radius: var(--radius-l); --modal-community-sidebar-width: 280px; /* Popovers - file previews */ --popover-width: 450px; --popover-height: 400px; --popover-max-height: 70vh; --popover-pdf-width: 600px; --popover-pdf-height: 800px; --popover-font-size: var(--font-text-size); /* Prompts - e.g. quick switcher, command palette */ --prompt-width: 700px; --prompt-max-width: 62vw; --prompt-max-height: 70vh; --prompt-border-width: var(--border-width); --prompt-border-color: var( --color-base-40, var(--background-modifier-border-focus) ); /* Radiuses */ --radius-s: var(--scale-radius-1); --radius-m: var(--scale-radius-3); --radius-l: var(--scale-radius-4); --radius-xl: var(--scale-radius-5); --radius-full: var(--scale-dimension-size-max); /* Ribbon */ --ribbon-background: var(--background-primary); --ribbon-background-collapsed: var(--background-primary); --ribbon-width: var(--scale-dimension-size-600); --ribbon-padding: var(--size-4-2) var(--size-4-1) var(--size-4-3); /* Scrollbars — track transparent (blends with any bg instead of the white fallback). thumb colors need --mono-rgb-100, which only exists on the theme class, so they're set there (see .theme-light/.dark). */ --scrollbar-bg: transparent; /* Search */ --search-clear-button-color: var(--text-muted); --search-clear-button-size: 13px; --search-icon-color: var(--text-muted); --search-icon-size: 18px; --search-result-background: var(--background-primary); /* Layout sizing - for padding and margins */ --size-2-1: 2px; --size-2-2: 4px; --size-2-3: 6px; --size-4-1: 4px; --size-4-2: 8px; --size-4-3: 12px; --size-4-4: 16px; --size-4-5: 20px; --size-4-6: 24px; --size-4-8: 32px; --size-4-9: 36px; --size-4-12: 48px; --size-4-16: 64px; --size-4-18: 72px; /* Sidebar */ --sidebar-markdown-font-size: calc(var(--font-text-size) * 0.9); --sidebar-tab-text-display: none; /* Sliders */ --slider-thumb-border-width: 1px; --slider-thumb-border-color: var(--background-modifier-border-hover); --slider-thumb-height: 18px; --slider-thumb-width: 18px; --slider-thumb-y: -6px; --slider-thumb-radius: 50%; --slider-s-thumb-size: 15px; --slider-s-thumb-position: -5px; --slider-track-background: var(--background-modifier-border); --slider-track-height: 3px; /* Status bar */ --status-bar-background: var(--background-secondary); --status-bar-border-color: var(--divider-color); --status-bar-border-width: 1px 0 0 1px; --status-bar-font-size: var(--font-ui-smaller); --status-bar-text-color: var(--text-muted); --status-bar-position: fixed; --status-bar-radius: var(--radius-m); /* Swatch for color inputs */ --swatch-radius: 14px; --swatch-height: 24px; --swatch-width: 24px; /* --swatch-shadow needs --mono-rgb-100 → set on theme class */ /* Tabs */ --tab-background-active: var(--background-primary); --tab-text-color: var(--text-faint); --tab-text-color-active: var(--text-muted); --tab-text-color-focused: var(--text-muted); --tab-text-color-focused-active: var(--text-muted); --tab-text-color-focused-highlighted: var(--text-accent); --tab-text-color-focused-active-current: var(--text-normal); --tab-font-size: var(--font-ui-small); --tab-font-weight: inherit; --tab-container-background: var(--background-secondary); --tab-divider-color: var(--background-modifier-border-hover); --tab-outline-color: var(--divider-color); --tab-outline-width: 1px; --tab-curve: 6px; --tab-radius: var(--radius-s); --tab-radius-active: 6px 6px 0 0; --tab-width: 200px; --tab-max-width: 320px; /* Stacked tabs */ --tab-stacked-pane-width: 700px; --tab-stacked-header-width: var(--header-height); --tab-stacked-font-size: var(--font-ui-small); --tab-stacked-font-weight: 400; --tab-stacked-text-align: left; --tab-stacked-text-transform: rotate(0deg); --tab-stacked-text-writing-mode: vertical-lr; --tab-stacked-shadow: -8px 0 8px 0 rgba(0, 0, 0, 0.05); /* Tables */ --table-background: transparent; --table-border-width: 1px; --table-border-color: var(--background-modifier-border-row); --table-white-space: normal; --table-header-background: var(--background-secondary); --table-header-background-hover: inherit; --table-header-border-width: var(--table-border-width); --table-header-border-color: var(--table-border-color); --table-header-font: inherit; --table-header-size: var(--font-ui-small); --table-header-weight: var(--bold-weight); --table-header-color: var(--text-normal); --table-text-size: var(--font-ui-medium); --table-text-color: inherit; --table-column-max-width: none; --table-column-alt-background: var(--table-background); --table-column-first-border-width: var(--table-border-width); --table-column-last-border-width: var(--table-border-width); --table-row-background-hover: var(--table-background); --table-row-alt-background: var(--table-background); --table-row-last-border-width: var(--table-border-width); /* Tags */ --tag-size: var(--font-smaller); --tag-color: var(--text-accent); --tag-color-hover: var(--text-accent); --tag-decoration: none; --tag-decoration-hover: none; --tag-background: hsla(var(--interactive-accent-hsl), 0.1); --tag-background-hover: hsla(var(--interactive-accent-hsl), 0.2); --tag-border-color: hsla(var(--interactive-accent-hsl), 0.15); --tag-border-color-hover: hsla(var(--interactive-accent-hsl), 0.15); --tag-border-width: 0px; --tag-padding-x: 0.65rem; --tag-padding-y: 0.25rem; --tag-radius: var(--radius-m); /* Window frame */ --titlebar-background: var(--background-secondary); --titlebar-background-focused: var(--background-secondary); --titlebar-border-width: 0px; --titlebar-border-color: var(--background-modifier-border); --titlebar-text-color: var(--text-muted); --titlebar-text-color-focused: var(--text-normal); --titlebar-text-weight: var(--font-bold); /* Toggles */ --toggle-border-width: 2px; --toggle-width: 40px; --toggle-radius: 18px; --toggle-thumb-color: white; --toggle-thumb-radius: 18px; --toggle-thumb-height: 18px; --toggle-thumb-width: 18px; --toggle-s-border-width: 2px; --toggle-s-width: 34px; --toggle-s-thumb-height: 15px; --toggle-s-thumb-width: 15px; /* Vault name */ --vault-name-font-size: var(--font-ui-small); --vault-name-font-weight: var(--font-medium); --vault-name-color: var(--text-normal); /* Workspace */ --workspace-background-translucent: rgba(var(--mono-rgb-0), 0.6); /* Color mappings ------------------------ */ /* Accent HSL values */ --accent-h: 223; --accent-s: 100%; --accent-l: 62%; /* Text */ --text-normal: var(--color-base-60); --text-muted: var(--color-base-50); --text-faint: var(--color-base-40); --text-fade: var(--color-base-30); --text-on-accent: white; --text-on-accent-inverted: black; --text-error: var(--color-red); --text-success: var(--color-green); --text-accent: var(--color-accent); --text-accent-hover: var(--color-accent-2); --interactive-accent-hsl: var(--color-accent-hsl); --interactive-accent: var(--color-accent-1); --interactive-accent-hover: var(--color-accent-2); /* Not affected by Theme */ --static-black: #000000; --static-white: #ffffff; --static-blue: #3d73ff; --static-alpha-black-700: rgba(0, 0, 0, 0.7); --static-alpha-black-500: rgba(0, 0, 0, 0.5); --static-alpha-black-200: rgba(0, 0, 0, 0.2); --static-alpha-black-150: rgba(0, 0, 0, 0.1); --static-alpha-black-100: rgba(0, 0, 0, 0.06); --static-alpha-white-200: rgba(255, 255, 255, 0.2); --static-alpha-white-500: rgba(255, 255, 255, 0.5); } .theme-light { color-scheme: light; --highlight-mix-blend-mode: darken; --mono-rgb-0: 255, 255, 255; --mono-rgb-100: 0, 0, 0; --color-red-rgb: 250, 82, 82; --color-red: #e93147; --color-green-rgb: 8, 185, 78; --color-green: #40c057; --color-orange-rgb: 253, 126, 20; --color-orange: #fd7e14; --color-yellow-rgb: 245, 162, 0; --color-yellow: #f5a200; --color-cyan-rgb: 40, 173, 202; --color-cyan: #28adca; --color-blue-rgb: 3, 105, 224; --color-blue: #3d73ff; --color-purple-rgb: 121, 80, 242; --color-purple: #7950f2; --color-pink-rgb: 245, 88, 173; --color-pink: #f558ad; /* Option, add the color palette you want to use. */ --color-base-00: #ffffff; --color-base-05: #fefefe; --color-base-10: #f8f9fa; --color-base-20: #f1f3f5; --color-base-25: #dee2e6; --color-base-30: #adb5bd; --color-base-35: #868e96; --color-base-40: #495057; --color-base-50: #343a40; --color-base-60: #212529; --color-base-70: #15171a; --color-base-100: #0e0e0f; --color-purple-100: #f3f0ff; --color-purple-200: #e5dbff; --color-purple-300: #d0bfff; --color-purple-400: #9775fa; --color-purple-500: #7950f2; --color-purple-600: #6741d9; --color-purple-700: #5f3dc4; --color-purple-800: #482e94; --color-purple-900: #2d1d5c; --color-blue-100: #e7f7ff; --color-blue-200: #d1e9ff; --color-blue-300: #b0cdff; --color-blue-400: #6a94fc; --color-blue-500: #3d73ff; --color-blue-600: #3160e1; --color-blue-700: #2c54cd; --color-blue-800: #1e409b; --color-blue-900: #002c67; --color-green-100: #ebfbee; --color-green-200: #d3f9d8; --color-green-300: #b2f2bb; --color-green-400: #69db7c; --color-green-500: #40c057; --color-green-600: #2f9e44; --color-green-700: #28803a; --color-green-800: #1c5928; --color-green-900: #0e2e15; --color-orange-100: #fff4e6; --color-orange-200: #ffe8cc; --color-orange-300: #ffd8a8; --color-orange-400: #ffa94d; --color-orange-500: #fd7e14; --color-orange-600: #e8590c; --color-orange-700: #d9480f; --color-orange-800: #8f300a; --color-orange-900: #4f1905; --color-red-100: #fff5f5; --color-red-200: #ffe3e3; --color-red-300: #ffc9c9; --color-red-400: #ff8787; --color-red-500: #fa5252; --color-red-600: #e03131; --color-red-700: #c92a2a; --color-red-800: #9b0404; --color-red-900: #700707; --color-ash-100: #f9f8f6; --color-ash-200: #f2f1ed; --color-ash-300: #eceae5; --color-ash-400: #e5e3dc; --color-ash-500: #dfddd3; --color-ash-600: #d8d6ca; --color-ash-700: #d2cfc1; --color-ash-800: #cbc8b9; --color-ash-900: #c5c1b0; --color-ash-1000: #bebaa7; --color-gray-alpha-25: rgba(0, 0, 0, 0.03); --color-gray-alpha-50: rgba(0, 0, 0, 0.05); --color-gray-alpha-75: rgba(0, 0, 0, 0.08); --color-gray-alpha-100: rgba(0, 0, 0, 0.1); --color-purple-alpha-100: rgba(121, 80, 242, 0.1); --color-purple-alpha-200: rgba(121, 80, 242, 0.2); --color-cyan-alpha-100: rgba(70, 192, 192, 0.1); --color-green-alpha-100: rgba(64, 192, 87, 0.1); --color-green-alpha-200: rgba(64, 192, 87, 0.2); --color-blue-alpha-100: rgba(61, 174, 255, 0.1); --color-blue-alpha-200: rgba(61, 174, 255, 0.2); --color-red-alpha-100: rgba(250, 82, 82, 0.1); --color-red-alpha-200: rgba(250, 82, 82, 0.2); --color-yellow-alpha-50: rgba(255, 232, 23, 0.05); --color-yellow-alpha-100: rgba(255, 232, 23, 0.2); --color-yellow-alpha-200: rgba(255, 232, 23, 0.3); --alpha-100: 0.1; --alpha-200: 0.2; --alpha-500: 0.5; --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); --color-accent-1: hsl( var(--accent-h), var(--accent-s), calc(var(--accent-l) + 2.5%) ); --color-accent-2: hsl( var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%) ); /* Background and UI Semantic Tokens in Notes */ /* 백그라운드에 들어가는 시멘틱 토큰들 입니다. */ --background-primary: var(--color-ash-200); --background-primary-low: var(--color-ash-100); --background-primary-alt: var(--color-ash-500); --background-secondary: var(--color-ash-400); --background-secondary-alt: var(--color-ash-600); --background-modifier-hover: var(--color-gray-alpha-100); --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15); --background-modifier-border: var(--color-ash-400); --background-modifier-border-row: var(--color-ash-500); --background-modifier-border-hover: var(--color-base-35); --background-modifier-border-focus: var(--color-ash-600); --background-modifier-error-rgb: var(--color-red-rgb); --background-modifier-error: var(--color-red); --background-modifier-error-hover: var(--color-red); --background-modifier-success-rgb: var(--color-green-rgb); --background-modifier-success: var(--color-green); --background-modifier-message: rgba(0, 0, 0, 0.9); --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); --background-modifier-cover: var(--static-alpha-black-700); /* Input */ --background-modifier-form-field: var(--color-ash-400); --interactive-normal: var(--color-ash-400); --interactive-hover: var(--color-ash-500); --text-highlight-bg: var(--color-ash-500); --text-highlight-bg-active: var(--color-yellow-alpha-100); --text-selection: hsla(var(--interactive-accent-hsl), 0.25); --input-shadow: transparent; --input-shadow-hover: transparent; --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042), 0px 15px 30px rgba(0, 0, 0, 0.07); --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), 0px 30px 90px rgba(0, 0, 0, 0.2); } .theme-dark { color-scheme: dark; --highlight-mix-blend-mode: lighten; --mono-rgb-0: 0, 0, 0; --mono-rgb-100: 255, 255, 255; --color-red-rgb: 250, 82, 82; --color-red: #fa5252; --color-orange-rgb: 255, 154, 103; --color-orange: #ff9a67; --color-yellow-rgb: 255, 228, 82; --color-yellow: #ffe452; --color-green-rgb: 105, 219, 124; --color-green: #69db7c; --color-cyan-rgb: 83, 223, 221; --color-cyan: #59e8d4; --color-blue-rgb: 2, 122, 255; --color-blue: #6a94fc; --color-purple-rgb: 168, 130, 255; --color-purple: #d0bfff; --color-pink-rgb: 250, 153, 205; --color-pink: #ffc9c9; --color-base-00: #0e0e0f; --color-base-05: #15171a; --color-base-10: #212529; --color-base-20: #343a40; --color-base-25: #495057; --color-base-30: #646b73; --color-base-35: #979fa7; --color-base-40: #adb5bd; --color-base-50: #dee2e6; --color-base-60: #f1f3f5; --color-base-70: #f8f9fa; --color-base-100: #fefefe; --color-purple-100: #2d1d5c; --color-purple-200: #482e94; --color-purple-300: #5f3dc4; --color-purple-400: #6741d9; --color-purple-500: #7950f2; --color-purple-600: #9775fa; --color-purple-700: #d0bfff; --color-purple-800: #e5dbff; --color-purple-900: #f3f0ff; --color-blue-100: #002c67; --color-blue-200: #1e409b; --color-blue-300: #2c54cd; --color-blue-400: #3160e1; --color-blue-500: #3d73ff; --color-blue-600: #6a94fc; --color-blue-700: #b0cdff; --color-blue-800: #d1e9ff; --color-blue-900: #e7f7ff; --color-green-100: #0e2e15; --color-green-200: #1c5928; --color-green-300: #28803a; --color-green-400: #2f9e44; --color-green-500: #40c057; --color-green-600: #69db7c; --color-green-700: #b2f2bb; --color-green-800: #d3f9d8; --color-green-900: #ebfbee; --color-orange-100: #4f1905; --color-orange-200: #8f300a; --color-orange-300: #d9480f; --color-orange-400: #e8590c; --color-orange-500: #fd7e14; --color-orange-600: #ffa94d; --color-orange-700: #ffd8a8; --color-orange-800: #ffe8cc; --color-orange-900: #fff4e6; --color-red-100: #700707; --color-red-200: #9b0404; --color-red-300: #c92a2a; --color-red-400: #e03131; --color-red-500: #fa5252; --color-red-600: #ff8787; --color-red-700: #ffc9c9; --color-red-800: #ffe3e3; --color-red-900: #fff5f5; --color-ash-100: #131311; --color-ash-200: #262521; --color-ash-300: #393832; --color-ash-400: #4c4a43; --color-ash-500: #5f5d54; --color-ash-600: #727064; --color-ash-700: #858275; --color-ash-800: #989586; --color-ash-900: #aba796; --color-ash-1000: #bebaa7; --color-gray-alpha-25: rgba(255, 255, 255, 0.03); --color-gray-alpha-50: rgba(255, 255, 255, 0.05); --color-gray-alpha-75: rgba(255, 255, 255, 0.08); --color-gray-alpha-100: rgba(255, 255, 255, 0.1); --color-purple-alpha-100: rgba(149, 114, 255, 0.2); --color-purple-alpha-200: rgba(149, 114, 255, 0.3); --color-cyan-alpha-100: rgba(83, 223, 221, 0.1); --color-green-alpha-100: rgba(64, 192, 87, 0.1); --color-green-alpha-200: rgba(64, 192, 87, 0.2); --color-red-alpha-100: rgba(250, 82, 82, 0.1); --color-red-alpha-200: rgba(250, 82, 82, 0.2); --color-yellow-alpha-50: rgba(255, 227, 78, 0.1); --color-yellow-alpha-100: rgba(255, 227, 78, 0.18); --color-yellow-alpha-200: rgba(255, 227, 78, 0.3); --color-blue-alpha-100: rgba(0, 102, 255, 0.2); --color-blue-alpha-200: rgba(0, 102, 255, 0.3); --alpha-100: 0.1; --alpha-200: 0.2; --alpha-500: 0.5; --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); --color-accent-1: hsl( var(--accent-h), var(--accent-s), calc(var(--accent-l) - 3.8%) ); --color-accent-2: hsl( var(--accent-h), var(--accent-s), calc(var(--accent-l) + 3.8%) ); /* Backgrounds */ --background-primary: var(--color-base-10); --background-primary-low: var(--color-base-05); --background-primary-alt: var(--color-base-30); --background-secondary: var(--color-base-20); --background-secondary-alt: var(--color-gray-alpha-75); --background-modifier-hover: var(--color-gray-alpha-100); --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15); --background-modifier-border: var(--color-gray-alpha-50); --background-modifier-border-row: var(--color-base-10); --background-modifier-border-hover: var(--color-base-35); --background-modifier-border-focus: var(--color-base-25); --background-modifier-error-rgb: var(--color-red-rgb); --background-modifier-error: var(--color-red); --background-modifier-error-hover: var(--color-red); --background-modifier-success-rgb: var(--color-green-rgb); --background-modifier-success: var(--color-green); --background-modifier-message: rgba(0, 0, 0, 0.9); --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); --background-modifier-cover: var(--static-alpha-black-700); /* Input */ --background-modifier-form-field: var(--color-base-20); --interactive-normal: var(--color-base-20); --interactive-hover: var(--color-base-25); --text-highlight-bg: var(--color-gray-alpha-100); --text-highlight-bg-active: var(--color-yellow-alpha-50); --text-selection: hsla(var(--interactive-accent-hsl), 0.25); --input-shadow: transparent; --input-shadow-hover: transparent; --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 0px 3.4px 6.7px rgba(0, 0, 0, 0.179), 0px 15px 30px rgba(0, 0, 0, 0.3); --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), 0px 30px 90px rgba(0, 0, 0, 0.2); } /* ----------------------------------------------------- ✼ Note UI Detail Style ✼ ----------------------------------------------------- */ /*----Startup Progress Bar Screen----*/ /*Startup Progress Bar Window*/ .progress-bar { background-color: var(--background-primary); } /*Startup Text*/ .progress-bar .progress-bar-message { color: var(--text-normal); } /*Startup Progress Bar Background*/ .progress-bar-indicator .progress-bar-line { background-color: var(--background-secondary); border-radius: var(--radius-full); } /*Startup Progress Bar Moving Line*/ .progress-bar-indicator .progress-bar-subline { background-color: var(--background-secondary-alt); border-radius: var(--radius-full); } /*----Workspace----*/ /* ribbons, the thin vertical bars to the far left/right */ .workspace-ribbon { border-right: var(--scale-dimension-size-0) solid var(--divider-color); } .workspace-tabs .workspace-leaf { background-color: var(--background-primary); } .workspace-tab-header-inner { cursor: var(--cursor-action); gap: var(--size-2-1); border-radius: var(--radius-m); padding: 8px; } .mod-left-split .workspace-tab-header.is-active, .mod-right-split .workspace-tab-header.is-active { border-radius: var(--radius-m); } /*----Workspace - Note Title Bar Text----*/ .workspace-leaf.mod-active .view-header-title { border-radius: var(--radius-m); font-weight: var(--bold-weight); } .view-header-title-parent .view-header-breadcrumb { cursor: var(--cursor-action); color: var(--text-faint); padding: var(--scale-dimension-size-25) var(--scale-dimension-size-75); margin-right: var(--scale-dimension-size-25); border-radius: var(--radius-m); } /*Side Panels items*/ .side-dock-actions { gap: var(--size-4-2); } .workspace-tab-header.is-active .tree-item-self .search-result-file-matches { border-radius: var(--radius-m); } /*Icon Buttons*/ .clickable-icon, .status-bar-item.mod-clickable { cursor: var(--cursor-action); padding: var(--size-2-3); border-radius: var(--radius-m); } /*Folder*/ .nav-files-container { padding: 0 var(--size-4-6) var(--size-4-6) var(--size-4-2); } .nav-folder { border-radius: var(--radius-m); } .nav-folder-title { margin-bottom: var(--size-2-2); border-radius: var(--radius-m); font-weight: var(--bold-weight); } .nav-folder.mod-root .nav-folder > .nav-folder-children { border-left: var(--nav-indentation-guide-width) dotted var(--nav-indentation-guide-color); } .workspace-leaf.mod-active .nav-file.has-focus > .nav-file-title { border-radius: var(--radius-m); font-weight: var(--bold-weight); } /*--File Explorer--*/ /*Nav Top: Create Note, Sort, Create Folder*/ .nav-header { padding-top: var(--size-4-2); padding-right: var(--size-4-2); padding-bottom: var(--size-4-4); padding-left: var(--size-4-2); } .nav-buttons-container { justify-content: flex-start; } /*Files*/ .nav-file { border-radius: var(--radius-m); } .nav-file-title { margin-bottom: var(--size-2-1); border-radius: var(--radius-m); } /* (also applies to many plugins displaying file lists in the side bar) */ /*Status Bar*/ .status-bar { bottom: var(--size-4-3); right: var(--size-4-3); padding: var(--size-4-2) var(--size-4-2) var(--size-4-2); gap: var(--size-2-3); } /*----Settings----*/ /*All Popup Windows: Settings*/ .vertical-tab-header { padding-left: var(--size-4-4); padding-right: var(--size-4-4); background-color: var(--background-primary); } .vertical-tab-nav-item { padding: var(--size-2-3) var(--size-4-2); border-radius: var(--radius-m); } /*Command Palette & Quick Switcher*/ .prompt { top: 100px; width: var(--prompt-width); max-width: var(--prompt-max-width); max-height: var(--prompt-max-height); overflow: hidden; } .suggestion-item { border-radius: var(--radius-m); } .suggestion-aux { gap: var(--size-2-2); } .prompt-instructions { border-top: 1px solid var(--background-primary-alt); user-select: none; font-size: var(--font-ui-smaller); color: var(--text-muted); padding: var(--size-4-2); text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--size-4-3); } .suggestion-container.mod-search-suggestion { background-color: var(--background-primary-low); border-radius: var(--radius-l); border: 0px; } .modal-close-button { border-radius: var(--radius-m); } /*--Emphasis--*/ /*Italic/Emphasis*/ em { letter-spacing: 0.5px; } /*Reading View*/ .cm-em { letter-spacing: 0.5px; } /*Editing View*/ /*Strikethrough*/ .cm-strikethrough { color: var(--text-faint); } /*Editing View*/ del { color: var(--text-faint); } /*Reading View*/ /*--Code--*/ /*Inline Code*/ .cm-s-obsidian span.cm-inline-code { padding: var(--size-2-1) var(--size-2-2) var(--size-2-1) var(--size-2-2); border-radius: var(--radius-m); } /*Source Mode*/ .markdown-rendered code { padding: var(--size-2-1) var(--size-2-2) var(--size-2-1) var(--size-2-2); border-radius: var(--radius-m); } /*Reading Mode*/ /* Templater command block — the opener line (.templater-inline, e.g. <%*) plus the body lines (.templater-command-bg) together form ONE code block. Unify them: same code fill, no ruled underline, code line-height, mono. Round only the block's outer corners — top on the opener, bottom on the last body line (the one NOT followed by another body line, via :has). */ .markdown-source-view.mod-cm6 .cm-line.templater-inline, .markdown-source-view.mod-cm6 .cm-line.templater-command-bg { font-family: var(--font-monospace); font-size: var(--code-size); background-color: var(--code-background); background-image: none; line-height: var(--line-height-normal); padding-inline: var(--size-4-3); } .markdown-source-view.mod-cm6 .cm-line.templater-inline { border-top-left-radius: var(--radius-m); border-top-right-radius: var(--radius-m); padding-top: var(--size-2-3); } .markdown-source-view.mod-cm6 .cm-line.templater-command-bg:not(:has(+ .cm-line.templater-command-bg)) { border-bottom-left-radius: var(--radius-m); border-bottom-right-radius: var(--radius-m); padding-bottom: var(--size-2-3); } /*Codeblock (no language specified) */ .markdown-preview-view pre { border-radius: var(--radius-m); padding: var(--size-4-4); } /*Reading Mode*/ .markdown-preview-view img, .markdown-rendered img { border-radius: var(--scale-radius-2); } .markdown-rendered tbody > tr > td { font-size: 14px; } /*--Lists--*/ /*Bullet List Text*/ li { margin-block-end: 0.12rem; } /*Reading Mode*/ .markdown-rendered ul.has-list-bullet li p:first-of-type { margin-block-end: 0.25rem; } /*Checkbox List*/ input[type="checkbox" i] { cursor: var(--cursor-action); } /*Reading Mode*/ /*--Blockquotes & Callout --*/ blockquote { margin-block-start: 0rem; margin-block-end: 0rem; } /* --- prism-q3 refined callout look (color unchanged, uses --callout-color) --- */ .callout { /* render true color instead of blending into Dawn's paper bg */ mix-blend-mode: normal; background-color: rgba(var(--callout-color), var(--callout-tint-opacity)); border: var(--callout-border-width) solid rgba(var(--callout-color), var(--callout-border-opacity)); border-left-width: var(--callout-bar-width); border-left-color: rgba(var(--callout-color), var(--callout-bar-opacity)); } /* prism-q3 [!principle] — mapped onto Dawn purple token */ .callout[data-callout="principle"] { --callout-color: var(--color-purple-rgb); --callout-icon: lucide-scale; } /* Callout title + icon — unified for every type (incl. custom) */ .callout-title { margin-top: var(--size-4-3); margin-bottom: var(--size-4-3); /* icon↔text gap is controlled by .callout-title-inner's left padding below, so zero the flex gap (else the two spacings stack) */ gap: 0; padding: var(--callout-title-padding); } .callout-title .callout-icon { align-self: center; padding-top: 0px; } /* callout icon → 16×16 */ .callout-icon svg { width: 16px; height: 16px; } .callout-title-inner { font-weight: var(--font-normal); border-left: none; /* spacing between the icon and the title text */ padding: 0 0 0 var(--size-2-3); } /* callout body text size */ .callout-content { font-size: var(--scale-dimension-font-size-100); } .markdown-rendered blockquote { padding: 0 0 0 var(--size-4-3); color: var(--color-base-50); } .callout-title-inner > blockquote { font-weight: var(--font-normal); border-left: 0px; } .callout-icon { align-self: baseline; margin-top: var(--scale-dimension-size-0); } .callout-content > p { margin-block-start: 0.3rem; } .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote { background-color: var(--blockquote-background-color); /* horizontal indent only — vertical padding would offset each line from the 1.9em ruled-gradient phase and double the underlines */ padding-inline: var(--size-4-2); padding-block: 0; } /*--Tables--*/ .block-language-dataview, .markdown-source-view.mod-cm6 .cm-content > [contenteditable="false"] { /* Live Preview embed widgets (table, mermaid, callout, dataview) — match reading-mode block radius instead of the tiny 2px default */ border-radius: var(--radius-m); } /* NB: don't style the code-fence source lines (.HyperMD-codeblock-begin /-end) with a bg + radius here. When a block is rendered (mermaid, or code with cursor outside) the opening fence line still exists in the DOM and would paint as a stray rounded box floating above the embed. Rendered blocks already get their radius from the embed rule above. */ /* Live Preview: match the reading-mode table radius + subtle fill. min = content width (max-content); NO max-width cap so a wide table grows past the note width and the ancestor .cm-embed-block (overflow-x:auto) scrolls it instead of compressing/wrapping the cells. */ .markdown-source-view.mod-cm6 table { width: max-content; border-radius: var(--radius-m); overflow: hidden; background-color: var(--color-gray-alpha-25); } /* editing table cells → roomier padding */ .markdown-source-view.mod-cm6 table.table-editor td, .markdown-source-view.mod-cm6 table.table-editor th { padding: var(--size-4-2) var(--size-4-1); } .markdown-rendered table { /* size to content, but never past the note width (then it wraps) */ width: max-content; max-width: 100%; border-radius: var(--radius-m); overflow: hidden; /* clip cell corners to the radius (like the code box) */ margin-bottom: var(--scale-dimension-size-25); background-color: var(--color-gray-alpha-25); } /*Reading Mode*/ /*Table Headers & Body*/ .markdown-rendered td, .markdown-rendered th { /* full inner padding — the old rule set only top/bottom, so cells lost their horizontal breathing room */ padding: var(--size-4-3) var(--size-4-4); } /*Reading Mode*/ .markdown-rendered tbody tr:nth-child(2n) { background-color: var(--background-secondary); } /* Data View */ .table-view-table > thead > tr > th { font-size: var(--font-ui-small); border-bottom: solid 1px; border-color: var(--table-border-color); padding: var(--size-4-4); } .table-view-table > tbody > tr > td { padding: var(--size-4-4); } .tree-item-self { border-radius: var(--radius-m); } /*--Search Tags--*/ .search-result-file-matches, .search-result-file-match-destination-file { border-radius: var(--radius-m); } .search-result-file-matched-text { font-weight: var(--bold-weight); color: var(--text-accent); background-color: var(--tag-background); } /*--Frontmatter/Metadata/Yaml--*/ /* Frontmatter card — reading (.frontmatter-container) + editing properties panel (.metadata-container) share one look: paper-toned bg (theme-split: light ash, dark base-20), 16px pad, large radius. bg MUST be theme-split because light/dark want DIFFERENT tokens, not one token's two values. */ .frontmatter-container, .metadata-container { border-radius: var(--radius-l); padding: var(--scale-dimension-size-200); } .frontmatter-container { margin-bottom: var(--size-4-1); } /*Reading Mode*/ .theme-light .frontmatter-container, .theme-light .metadata-container { background-color: var(--color-ash-300); } .theme-dark .frontmatter-container, .theme-dark .metadata-container { background-color: var(--color-base-20); } .frontmatter-container .frontmatter-container-header { color: var(--text-normal); font-size: var(--font-smaller); font-weight: var(--bold-weight); letter-spacing: 0.8px; } .frontmatter-container.is-collapsed .frontmatter-container-header { color: var(--text-normal); font-size: var(--font-smaller); font-weight: var(--bold-weight); letter-spacing: 0.8px; border-bottom: 0px solid var(--background-modifier-border); padding-bottom: 0px; margin-bottom: 0px; } .frontmatter-section { overflow: auto; border-bottom: 1px solid var(--background-modifier-border); padding-top: var(--size-4-1); padding-bottom: var(--size-4-3); } .frontmatter-section-label { color: var(--text-accent); } /* property value fields fill the row so every well reaches the same right edge — incl. date/number/datetime inputs that otherwise shrink to their content width and float short. */ .metadata-property-value, .metadata-property-value .metadata-input-longtext, .metadata-property-value .metadata-input-wrapper, .metadata-property-value input:not([type="checkbox"]) { width: 100%; } /* value wells → page bg so they read as fields inset in the card (card is ash-300/base-20; page bg is lighter → the input reads as a well) */ .metadata-property-value .metadata-input-longtext, .metadata-property-value .metadata-input-wrapper, .metadata-property-value input { background-color: var(--background-primary); } /* sidebar vault-profile → page bg to match the note surface */ .workspace-sidedock-vault-profile { background-color: var(--background-primary); } /*Frontmatter Tag*/ .frontmatter-container .frontmatter-alias { background-color: var(--color-gray-alpha-100); color: var(--text-normal); border-radius: var(--radius-s); padding: var(--size-2-3) var(--size-4-2) var(--size-2-3) var(--size-4-2); } /*Reading Mode*/ /*--Embeds--*/ iframe, .workspace-leaf-content img:not([width]), .workspace-leaf-content audio, .workspace-leaf-content video { border-radius: var(--radius-m); width: 100%; } .markdown-source-view.mod-cm6 .cm-embed-block { overflow-wrap: anywhere; } /*Live Preview Mode*/ .markdown-embed-link { border-radius: var(--radius-m); } /*--Footnotes--*/ /*Reference Number in text*/ .cm-s-obsidian span.cm-footref { margin-left: var(--size-2-1); color: var(--color-accent); } /*Editing View*/ /*Footnote link in note*/ .markdown-preview-view a.footnote-link { margin-left: var(--size-2-1); color: var(--color-accent); } /*Reading View*/ /*Footnotes section at the bottom of the note*/ .cm-s-obsidian .cm-line.HyperMD-footnote { background-color: var(--color-gray-alpha-75); border-radius: var(--radius-m); padding: var(--size-4-3); margin-bottom: var(--size-2-3) !important; } /*Editing View*/ .is-flashing { transition: all 0.25s ease; background-color: var(--text-highlight-bg); color: var(--text-normal); mix-blend-mode: var(--highlight-mix-blend-mode); border-radius: var(--radius-s); } /*Reading View*/ /*--Graph--*/ .graph-view.color-fill { color: var(--text-muted); /*color of nodes*/ } .graph-view.color-fill-focused { /*color of focused node/note*/ color: var(--text-accent); } .theme-dark .graph-view.color-fill-tag, .theme-light .graph-view.color-fill-tag { /*dark mode tag color*/ color: var(--color-yellow); } .theme-dark .graph-view.color-fill-attachment, .theme-light .graph-view.color-fill-attachment { /*dark mode attachment color*/ color: var(--color-blue-700); } .graph-view.color-fill-unresolved { /*unresolved(not created yet) notes*/ color: var(--text-muted); opacity: 0.8; } .graph-view.color-arrow { /*arrow color*/ color: var(--text-normal); opacity: 0.8; } .graph-view.color-circle { /*focused node border color*/ color: var(--text-normal); } .graph-view.color-line { /*link color*/ color: var(--background-modifier-border); } .graph-view.color-text { /*text color*/ color: var(--text-normal); } .graph-view.color-fill-highlight { /*focused node color*/ color: var(--interactive-accent); } .graph-view.color-line-highlight { /*focused node connections*/ color: var(--interactive-accent); } /* Etc Style ------------------------ */ /* Mermaid */ div.mermaid { margin-left: 0 !important; text-align: center; resize: both; overflow: auto; margin-bottom: 2px; position: relative; max-height: 600px; max-width: 100%; background-color: var(--static-alpha-black-100); padding: var(--size-4-4); border-radius: var(--radius-m); } div.mermaid::after { content: ""; display: block; width: 10px; height: 10px; position: absolute; right: 0; bottom: 0; } .mermaid svg { max-width: 100%; height: auto; } .menu { border: 1px solid var(--background-modifier-border-focus); } /* ----------------------------------------------------- ✼ prism-q3 Body Pass — editorial typography ✼ (colors unchanged; font + spacing + heading treatment) ----------------------------------------------------- */ /* Route Pretendard through Obsidian's modern font vars too */ body { --font-text-theme: "Pretendard Variable", "Pretendard", "Inter", sans-serif; --font-interface-theme: "Pretendard Variable", "Pretendard", "Inter", sans-serif; } /* Headings: tighter tracking + heavier contrast (reading + editing views) */ .markdown-rendered h1, .markdown-rendered h2, .markdown-rendered h3, .markdown-rendered h4, .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4 { letter-spacing: -0.014em; font-weight: 600; } .markdown-rendered h1, .cm-header-1 { letter-spacing: -0.02em; } /* h6 → prism-q3 "section-label" / eyebrow */ .markdown-rendered h6, .HyperMD-header-6 .cm-header-6 { text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: var(--font-semibold); } .markdown-rendered h6 { border-bottom: 1px solid var(--background-modifier-border); padding-bottom: var(--size-2-2); } /* Unified heading rhythm — reading + editing share the SAME 16px above / 16px below every heading, so switching modes never shifts the layout. Reading uses margin (blocks collapse cleanly); editing uses padding on the cm-line (CM6 lines don't margin-collapse, and header lines are already excluded from ruled lines, so padding just adds breathing room). */ .markdown-rendered h1, .markdown-rendered h2, .markdown-rendered h3, .markdown-rendered h4, .markdown-rendered h5, .markdown-rendered h6 { margin-top: var(--size-4-4); margin-bottom: var(--size-4-4); } .markdown-source-view.mod-cm6 .HyperMD-header-1, .markdown-source-view.mod-cm6 .HyperMD-header-2, .markdown-source-view.mod-cm6 .HyperMD-header-3, .markdown-source-view.mod-cm6 .HyperMD-header-4, .markdown-source-view.mod-cm6 .HyperMD-header-5, .markdown-source-view.mod-cm6 .HyperMD-header-6 { /* top spacing only — a padding-bottom here does NOT collapse with the blank line the user typed after a heading (unlike reading-mode margin), so it read as an always-present phantom "empty line". drop it; the following line supplies the gap. */ padding-top: var(--size-4-4); } /* the blank source line markdown requires between a heading and the next block (table/callout) is invisible in reading mode but shows as a full 32px ruled line in editing → reads as a phantom "extra enter". collapse just that line (blank line directly after a heading) to a thin spacer so editing tracks reading, and drop its ruled underline. */ .markdown-source-view.mod-cm6 .cm-line[class*="HyperMD-header"] + .cm-line:has(br) { line-height: var(--size-4-3); background-image: none; } /* Divider (hr) — reading + editing share it and land ON the notebook grid: exactly one line pitch (--rule-height == a blank Enter line) with the line at the BOTTOM of the slot, right where every ruled line sits, so a divider reads as one darker notebook line. Color = --hr-color (border + 8% ink), a step darker than the rule (border + 3%). */ .markdown-rendered hr { height: var(--rule-height); margin: 0; border: none; border-bottom: var(--hr-thickness) solid var(--hr-color); box-sizing: border-box; } /* editing: the divider line

is already one pitch on the grid, but the real
floats mid-slot (off-grid). hide it and let the line paint its OWN ruled underline, recolored to the divider tone → the line lands exactly where a ruled line would, no double line. */ .markdown-source-view.mod-cm6 .cm-line.hr { --rule-color: var(--hr-color); } .markdown-source-view.mod-cm6 .cm-line.hr hr { display: none; } /* ----------------------------------------------------- ✼ Ruled-notebook lines ✼ Each rule is drawn on the BOTTOM of every text line-box, so it is tied to the line itself and can never drift out of alignment. Because line-height (unitless) and the tile size (in em) both scale with the element's own font size, it stays aligned at any zoom. Painted on body text only — p, leaf list items, editor lines — and explicitly NOT on frontmatter, tables, callouts, quotes, code or embeds, so nothing overlaps. One knob: --rule-line-height. ----------------------------------------------------- */ :root { --rule-height: 2em; /* single knob: line pitch (== line-height) */ } /* --rule-color MUST be declared where --mono-rgb-100 exists (the theme class lives on , not ). Declaring it on :root resolves var(--mono-rgb-100) against where it is undefined, yielding an empty (guaranteed-invalid) value that silently kills background-image. Each theme class resolves its own mono value → adaptive light/dark. */ .theme-light, .theme-dark { /* divider (hr) color, nudged 3% toward ink so ruled lines read a touch stronger than a lone divider. 1px thickness. adaptive per theme. */ --rule-color: color-mix( in srgb, var(--background-modifier-border), rgb(var(--mono-rgb-100)) 3% ); /* divider (hr) — one step DARKER than the ruled underline so a real divider reads stronger than a lone line. rule = border+3% ink, hr = border+16%. declared here (not :root) so --mono-rgb-100 resolves. */ --hr-color: color-mix( in srgb, var(--background-modifier-border), rgb(var(--mono-rgb-100)) 16% ); /* scrollbar thumb — resolved here where --mono-rgb-100 exists. the track (--scrollbar-bg) is transparent, set at :root. */ --scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.1); --scrollbar-active-thumb-bg: rgba(var(--mono-rgb-100), 0.2); /* these also depend on --mono-rgb-100; relocated here so they resolve (at :root the mono value is undefined → empty → theme intent lost). */ --indentation-guide-color: rgba(var(--mono-rgb-100), 0.1); --indentation-guide-color-active: rgba(var(--mono-rgb-100), 0.3); --swatch-shadow: inset 0 0 0 1px rgba(var(--mono-rgb-100), 0.15); /* settings-card border — needs --background-modifier-border (theme only) */ --setting-items-border-color: var(--background-modifier-border); } /* Obsidian styles only the scrollbar THUMB and leaves the classic 15px track at Chromium's default white, which shows as a white strip on the beige page. force the track (and corner) transparent so the page bg shows through; keep the thumb from the theme var. */ ::-webkit-scrollbar { background: transparent; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg); /* fully rounded pill, inset from the 15px track via a transparent border + padding-box clip so it floats as a slim capsule */ border-radius: var(--radius-full); border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-active-thumb-bg); background-clip: padding-box; } /* nav folder tree: the guide line is border-left on .nav-folder-children. nested folders' collapse chevrons sit on top of that line and read as a collision. mask just behind the chevron with the sidebar bg so the line cleanly breaks at each arrow. sidebar bg = --background-primary (measured; the nav containers themselves are transparent). the chevron box is shorter than the row, so extend the mask ±6px with box-shadow (same color, no layout shift) → the line breaks over the full row, not a stub. */ .nav-folder-children .tree-item-icon.collapse-icon { background-color: var(--background-primary); box-shadow: 0 -10px 0 var(--background-primary), 0 10px 0 var(--background-primary); } /* on hover / active / selected rows the row highlight already covers the guide line, so the primary-colored mask would punch a lighter box into the highlight. drop it there and let the highlight read cleanly. */ .nav-folder-children .tree-item-self:hover .tree-item-icon.collapse-icon, .nav-folder-children .tree-item-self.is-active .tree-item-icon.collapse-icon, .nav-folder-children .tree-item-self.has-focus .tree-item-icon.collapse-icon, .nav-folder-children .tree-item-self.is-selected .tree-item-icon.collapse-icon { background-color: transparent; box-shadow: none; } /* Settings modal — group settings rendered as theme cards. tokens below (padding/radius/border-width/corner-shape are theme-independent → :root; border-color needs --background-modifier-border → theme block above). */ :root { --setting-items-padding: var(--size-4-4); --setting-items-radius: var(--radius-l); --corner-shape: round; --setting-items-border-width: 1px; } .setting-group .setting-items { background-color: var(--background-primary-low); padding: var(--setting-items-padding); border-radius: var(--setting-items-radius); corner-shape: var(--corner-shape); border: var(--setting-items-border-width) solid var(--setting-items-border-color); } .setting-group .setting-group-search { background-color: var(--background-primary-low); border-radius: var(--setting-items-radius); } /* A 1px rule at the bottom of every text line-box, repeated per line. line-height and the gradient period are the SAME em value, so the rule always sits under each line and never drifts. Every text box shares the same phase, so a parent list item, its nested items and its inner

overlap onto the same lines and read as one clean rule. No :has(), no background-size, no number×length calc — a parser that chokes on any of those would drop the whole rule. */ .markdown-rendered p, .markdown-rendered li, .markdown-source-view.mod-cm6 .cm-line { line-height: var(--rule-height); background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(var(--rule-height) - 1px), var(--rule-color) calc(var(--rule-height) - 1px), var(--rule-color) var(--rule-height) ); } /* One rule per visual line, no matter how lists nest. The

  • box spans its own text AND its nested children, so painting the
  • repaints over any descendant's rows → double lines (parent-li over child-li, or li over its own

    ). Fix: let the innermost text holder paint — the

    for its text, each nested

  • for its own row — and silence every
  • that has such a child. A tight leaf
  • (plain text, no child block) still paints itself.

    keeps its rule and 1.9em line-height. */ .markdown-rendered li:has(> p), .markdown-rendered li:has(> ul), .markdown-rendered li:has(> ol) { background-image: none; } /* zero body-text margins so a run of lines reads as continuous paper (headings keep their own spacing → natural section breaks) */ .markdown-rendered p, .markdown-rendered li, .markdown-rendered ul, .markdown-rendered ol { margin-block: 0; } /* never rule these — reading + editing. table-row/footnote/embed added so ruled lines don't bleed through those blocks and stack (overlap). NOTE: blockquotes are intentionally NOT excluded — they get ruled like body text (callouts stay excluded as distinct component boxes). */ .markdown-rendered .callout p, .markdown-rendered .callout li, .markdown-source-view.mod-cm6 .cm-line.HyperMD-callout, .markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock, .markdown-source-view.mod-cm6 .cm-line.HyperMD-table-row, .markdown-source-view.mod-cm6 .cm-line.HyperMD-footnote, .markdown-source-view.mod-cm6 .cm-line.HyperMD-header, .markdown-source-view.mod-cm6 .cm-line.HyperMD-frontmatter, .markdown-source-view.mod-cm6 .cm-embed-block { background-image: none; line-height: var(--line-height-normal); } /* blank lines (pressing Enter) render as


    . KEEP them ruled so empty gaps read as continuous notebook paper — but NOT the blank line directly hugging a code / mermaid block, which would frame the block with a stray rule above or below it. adjacency-scoped so only those touching a block are dropped. standalone rule: :has() kept out of the earlier comma group to avoid dropping it wholesale. */ .markdown-source-view.mod-cm6 .cm-line:has(br):has(+ .HyperMD-codeblock-begin), .markdown-source-view.mod-cm6 .cm-line:has(br):has(+ .cm-embed-block), .markdown-source-view.mod-cm6 .HyperMD-codeblock-end + .cm-line:has(br), .markdown-source-view.mod-cm6 .cm-embed-block + .cm-line:has(br) { background-image: none; }