Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231@import './plugin/obsidian-ui.css';@import './components/tag-chip.css';@import './components/wikilink-chip.css';@import './components/external-link.css';
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap;}
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap;}
:root { --ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px; --ui-space-4: 16px; --ui-control-height: 25px; --ui-form-control-height: 36px; --ui-touch-target: 44px; --ui-radius: 2px; --bg-primary: #1e1e1e; --bg-secondary: #2d2d2d; --bg-tertiary: #3d3d3d; --bg-hover: #3d3d3d; --bg-active: #4a4a4a; --border-color: #404040; --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-tertiary: #808080; --accent: #4a9eff; --accent-hover: #6bb0ff; --accent-foreground: #ffffff; --code-bg: #2d2d2d; /* Sunken slab for inline `code` and fenced code blocks. Slightly darker * than --bg-primary so code reads as gently recessed against the editor * surface — not so dark that it dominates. */ --code-bg-sunken: #1a1a1a; --error: #dc3545; --warning: #e5c07b; /* Markdown syntax palette (consumed by cm-md-* classes in cm6-editor.css) */ --syntax-heading: #ff9f5a; --syntax-code: #7dd3c0; --syntax-callout: #c792ea; --syntax-frontmatter: #b0b0b0; /* Programming-language token palette (consumed by `.cm-codeblock .tok-*` * rules in cm6-editor.css). Each variable defaults to a value from the * existing palette so today the prose colors and code colors move in * lockstep — but a future theme can override any single `--code-syntax-*` * var to decouple. This indirection is the agreed compromise between * "no new vars" (one source of truth) and "two parallel palettes" * (full decoupling): one source of truth by default, override-ready. * * If you're authoring a custom theme, override these in your :root. */ --code-syntax-keyword: var(--syntax-callout); --code-syntax-string: var(--syntax-code); --code-syntax-number: var(--syntax-heading); --code-syntax-atom: var(--syntax-callout-warning); --code-syntax-variable: var(--syntax-callout-note); --code-syntax-property: var(--syntax-callout-question); --code-syntax-type: var(--syntax-callout-abstract); --code-syntax-operator: var(--text-secondary); --code-syntax-comment: var(--text-tertiary); --code-syntax-meta: var(--text-tertiary); /* Language label on the open fence (the `typescript` in ` ```typescript `). * Dim against `--code-bg-sunken` so the language identifier recedes — * it's fence metadata, not code content. * * Literal `#404040` rather than `var(--border-color)`: the visual * intent is "as dim as possible without disappearing on the sunken * slab". `--border-color` happens to be #404040 today, but it's * semantically a border color used in 50+ unrelated places; coupling * the fence label's tint to it would mean a future palette tweak to * borders would silently re-color the language label. Decoupled. */ --code-syntax-fence-label: #404040; /* Callout type colors (Obsidian parity palette). * * Each type has a solid border color (`--syntax-callout-<type>`) and a * pre-computed translucent background variant (`--syntax-callout-<type>-bg`) * at ~10% opacity. The `-bg` variants exist as an explicit fallback for * environments where `color-mix(in srgb, ...)` isn't supported (Safari * <16.2, Firefox <113). Stylesheets that want a tinted background should * declare the rgba fallback first, then optionally override with * `color-mix()` for browsers that prefer to derive the tint from the solid * color (lets future palette tweaks ripple through one variable change). */ --syntax-callout-note: #4a9eff; --syntax-callout-note-bg: rgba(74, 158, 255, 0.1); --syntax-callout-abstract: #00bfff; --syntax-callout-abstract-bg: rgba(0, 191, 255, 0.1); --syntax-callout-info: #4a9eff; --syntax-callout-info-bg: rgba(74, 158, 255, 0.1); --syntax-callout-todo: #4a9eff; --syntax-callout-todo-bg: rgba(74, 158, 255, 0.1); --syntax-callout-tip: #2ecc71; --syntax-callout-tip-bg: rgba(46, 204, 113, 0.1); --syntax-callout-success: #2ecc71; --syntax-callout-success-bg: rgba(46, 204, 113, 0.1); --syntax-callout-question: #f1c40f; --syntax-callout-question-bg: rgba(241, 196, 15, 0.1); --syntax-callout-warning: #e67e22; --syntax-callout-warning-bg: rgba(230, 126, 34, 0.1); --syntax-callout-failure: #e74c3c; --syntax-callout-failure-bg: rgba(231, 76, 60, 0.1); --syntax-callout-danger: #e74c3c; --syntax-callout-danger-bg: rgba(231, 76, 60, 0.1); --syntax-callout-bug: #e74c3c; --syntax-callout-bug-bg: rgba(231, 76, 60, 0.1); --syntax-callout-example: #9b59b6; --syntax-callout-example-bg: rgba(155, 89, 182, 0.1); --syntax-callout-quote: #808080; --syntax-callout-quote-bg: rgba(128, 128, 128, 0.1); --font-mono: 'Fira Code', 'Consolas', 'Monaco', monospace; /* Layout constants. * * Two tokens unify alignment across the app shell: * * --chrome-row-height: the height of the central tab bar AND of every * sidebar panel's header strip. Because both consume the same token, * the bottom border of the tab bar and the bottom border of every * panel header land on the same Y line — a single uninterrupted * horizontal split across the body. SidebarViewContainer is the * only renderer of this strip; plugins are asked (in the * ReactItemView docstring) not to draw a competing header inside * the leaf body, but nothing in the host physically prevents it. * * --icon-column-width: the *width* of the ribbon AND of the vertical * tab strip inside each sidebar panel. Same token → same column * width on both sides of every panel. * * NOTE: this token unifies column WIDTH only, not the column's * first-icon Y position. The ribbon's first icon sits at Y=0 * (it has no peer chrome row), while each sidebar tab strip * leaves its first slot empty so the chrome row stays pure * header chrome (top padding = --chrome-row-height). The ribbon * and side-tab icons are therefore vertically offset by * --chrome-row-height — this is intentional, not a regression. * * --tab-bar-height is retained as a backward-compat alias. */ --header-height: 40px; --chrome-row-height: 32px; --tab-bar-height: var(--chrome-row-height); --icon-column-width: 44px; --icon-tap-size: 32px; --status-bar-height: 29px;
/* File-tree row state colors. Derived from --accent and a neutral white * so a future theme can override either the accent or these tokens * directly. Kept here (rather than as inline rgba in FileTreeItem.css) * so all row-state coloring shares one source of truth. * * Hover uses a thin white tint that reads against both dark and light * surfaces. Active uses an accent-tinted fill at ~15% opacity, with a * stronger 20% variant for active+hover so the row gains visible * affordance on pointer enter without losing its active identity. */ --file-tree-hover-bg: color-mix(in srgb, var(--text-primary) 6%, transparent); --file-tree-active-bg: color-mix(in srgb, var(--accent) 15%, transparent); --file-tree-active-hover-bg: color-mix(in srgb, var(--accent) 22%, transparent);}
/* Firefox's native scrollbar already blends into the dark theme. Chromium's * default light track does not, so tint its native scrollbar without changing * Firefox's appearance or replacing scrolling behavior. */::-webkit-scrollbar-track { background: var(--bg-primary);}
::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 999px;}
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary);}
* { margin: 0; padding: 0; box-sizing: border-box;}
html, body { overflow: hidden; touch-action: pan-x pan-y;}
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--bg-primary); color: var(--text-primary); /* Disable native pull-to-refresh and overscroll bounce so custom vertical swipe gestures work without fighting the browser. */ overscroll-behavior-y: contain;}
#root { width: 100%; max-width: 100vw; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden;}
@media (max-width: 767px) { #root { position: fixed; top: var(--reams-visual-viewport-offset-top, 0px); left: 0; right: 0; height: var(--reams-visual-viewport-height, 100dvh); }}