Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254/** * Base Obsidian theme CSS classes. * * Obsidian plugins render DOM using Obsidian's CSS class conventions * (.nav-file, .tree-item, .setting-item, etc.). These classes are * styled by Obsidian's built-in theme. Reams provides this minimal * base theme so plugin views look visually consistent with the native * Reams file tree sidebar (FileTreeItem.css). * * Values use Reams' CSS variables where defined (--text-primary, * --text-secondary, etc. from index.css) with inline rgba() fallbacks * for variables not yet in the global scope (--file-tree-hover-bg, * --file-tree-active-bg). NOT from Obsidian's variable namespace. * * Only includes classes actually used by validated plugins. * Add more as new plugins are tested. */
/* ── Tree items & Nav files ── .tree-item-self and .nav-file-title share identical layout styles. Plugins use both interchangeably (e.g. Recent Files uses both classes on the same element). Grouped here to avoid duplication. */
.tree-item { position: relative;}
.tree-item-self,.nav-file-title { display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; cursor: pointer; border-radius: 0; user-select: none; -webkit-user-select: none; font-size: 0.875rem; color: var(--text-primary); transition: background-color 0.1s ease;}
.tree-item-self:hover,.nav-file-title:hover { background-color: var(--file-tree-hover-bg, rgba(255, 255, 255, 0.05));}
.tree-item-self.is-active,.nav-file-title.is-active { background-color: var(--file-tree-active-bg, rgba(74, 158, 255, 0.15));}
.tree-item-self.is-active:hover,.nav-file-title.is-active:hover { background-color: var(--file-tree-active-bg, rgba(74, 158, 255, 0.2));}
.tree-item-inner,.nav-file-title-content { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/* .tree-item-inner may contain sub-elements (icons + text spans), so it needs display: flex for icon + text alignment. */.tree-item-inner { display: flex; align-items: center;}
/* When both .tree-item-inner and .nav-file-title-content are on the same element (common in plugins like Recent Files), the flex display from .tree-item-inner breaks text-overflow: ellipsis for bare text nodes. Override back to block so "..." renders correctly — but only when the element has no child elements (text-only). Plugins that put icons + text spans inside still get display: flex for proper alignment. */.tree-item-inner.nav-file-title-content:not(:has(> *)) { display: block;}
.tree-item-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; color: var(--text-secondary);}
.tree-item-flair { font-size: 11px; opacity: 0.6; margin-left: 4px; flex-shrink: 0;}
/* Spacer pushes trailing items (delete button) to the right edge. flex-grow: 1 fills all remaining space after .tree-item-inner's natural text width, pushing the delete button to the far right. */.tree-item-spacer { flex-grow: 1;}
.tree-item-children { padding-left: 12px;}
/* ── Nav folder structure ── */
.nav-folder.mod-root { padding: 4px;}
.nav-folder-children { display: flex; flex-direction: column;}
.nav-file { position: relative;}
.nav-file-tag { font-size: 11px; color: var(--text-tertiary); margin-left: 4px; flex-shrink: 0;}
/* ── Delete/action buttons on tree/nav file items ── Scoped to tree-item / nav-file contexts to avoid conflicting with the generic .menu-item-icon (18×18) defined in obsidian-ui.css for menus. */
.tree-item-self .menu-item-icon,.nav-file-title .menu-item-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--text-tertiary); border-radius: 0; transition: opacity 0.1s ease, background-color 0.1s ease;}
.tree-item-self .menu-item-icon svg,.nav-file-title .menu-item-icon svg { width: 14px; height: 14px;}
.tree-item-self .menu-item-icon:hover,.nav-file-title .menu-item-icon:hover { background-color: var(--file-tree-hover-bg, rgba(255, 255, 255, 0.1)); color: var(--text-primary);}
/* ── View content containers ── */
.view-content { height: 100%; overflow-y: auto; overflow-x: hidden;}
.view-content-inner { min-height: 100%;}
/* Setting items are defined in obsidian-ui.css (the canonical location). Do NOT duplicate .setting-item rules here — it causes double-border and property-conflict bugs due to load-order sensitivity. */
/* ── Clickable modifier ── */.is-clickable { cursor: pointer;}
/* ── Recent Files plugin overrides ── The plugin sets justify-content: flex-start and align-items: unset, which conflicts with our flex layout defaults. Override with higher specificity to ensure alignment matches the native file tree. Note: the plugin's .tree-item-spacer (flex-grow: 1) still grows to fill remaining space, but its effect is cosmetically irrelevant once the delete button is absolutely positioned and removed from flow. */
.tree-item-self.recent-files-title { /* Establish positioning context for the absolutely-positioned delete button */ position: relative; /* Override plugin's align-items: unset to match Reams' flex layout */ align-items: center; /* Reserve space for the delete button on the right edge */ padding-right: 1.75rem;}
/* The plugin creates a .tree-item-spacer (flex-grow: 1) to push the delete button right. Since we position the delete button absolutely, the spacer only steals space from the text content. Collapse it. */.recent-files-title .tree-item-spacer { display: none;}
/* Position the delete button absolutely so it sits at the right edge regardless of content length, matching the native file tree's action button */.recent-files-title .recent-files-file-delete { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); /* Override the plugin's display: none — we control visibility ourselves */ display: flex; opacity: 0; pointer-events: none; transition: opacity 0.1s ease;}
/* Specificity (0,4,0) beats the plugin's hover rule (0,3,0) which loads later in the cascade via dynamically injected <style> element. */.tree-item-self.recent-files-title:hover .recent-files-file-delete,.tree-item-self.recent-files-title:focus-within .recent-files-file-delete { opacity: 1; pointer-events: auto;}
/* ── Mobile touch targets ── */@media (pointer: coarse) { .tree-item-self, .nav-file-title { min-height: 44px; padding: 0.5rem; }
/* Only reserve extra right padding on items that actually have an absolutely-positioned action button. Avoids a dead zone on plugin items that don't use action buttons. */ .tree-item-self.recent-files-title { padding-right: 2.5rem; }
/* Mobile: always show the delete button (no hover on touch) */ .recent-files-title .recent-files-file-delete { opacity: 1; pointer-events: auto; right: 0.5rem; width: 28px; height: 28px; }}