diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..5b07122 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,180 @@ +# Obsidian community plugin + +## Project overview + +- Target: Obsidian Community Plugin (TypeScript → bundled JavaScript). +- Entry point: `src/main.ts` compiled to `main.js` and loaded by Obsidian. +- Required release artifacts: `main.js`, `manifest.json`, and optional `styles.css`. + +## Environment & tooling + +- Node.js: use current LTS (Node 18+ recommended). +- **Package manager: npm** (required - `package.json` defines npm scripts and dependencies). +- **Bundler: esbuild** (required - `esbuild.config.mjs` and build scripts depend on it). +- Types: `obsidian` type definitions. + +### Install + +```bash +npm install +``` + +### Dev (watch) + +```bash +npm run dev:esbuild +``` + +### Production build + +```bash +npm run build:esbuild +``` + +## Linting + +- ESLint is preconfigured. +- Run `npm run lint` (if available) to lint the project. + +## File & folder conventions + +- Source lives in `src/`. Keep `main.ts` small and focused on plugin lifecycle (loading, unloading, registering commands). +- **Current structure**: + ``` + src/ + main.ts # Plugin entry point, lifecycle management + types.ts # TypeScript interfaces and types + constants.ts # Default settings, static data + l10n.ts # Localization (t() function) + util.tsx # Utility functions and Preact helpers + manager/commands/ # Feature managers (one per UI location) + commandManager.ts # Abstract base class + leftRibbonManager.ts + statusBarManager.ts + pageHeaderManager.ts + menuManager.ts + explorerManager.ts + textToolbarManager.ts # Text selection toolbar (new) + index.ts + ui/ + settingTab.ts # Registers settings tab with Obsidian + settingTabModal.ts + icons.ts + addCommandModal.ts + chooseIconModal.ts + chooseCustomNameModal.ts + confirmDeleteModal.ts + components/ # Preact components + settingTabComponent.tsx # Tab container, tab list + commandViewerComponent.tsx # Reusable command list with add/remove/reorder + commandComponent.tsx # Single command row + hidingViewer.tsx # Eye-toggle accordions for hiding native items + settingComponent.tsx # ToggleComponent, SliderComponent, EyeToggleComponent + TextToolbarSettings.tsx # Text toolbar tab content (new) + AdvancedToolbarSettings.tsx + MacroViewer.tsx + MacroBuilder.tsx + Accordion.tsx + About.tsx + styles/ + styles.scss + advanced-toolbar.scss + locale/ # Translation JSON files (en.json is canonical) + ``` +- **Do not commit build artifacts**: Never commit `node_modules/`, `main.js`, or other generated files. + +## Key architectural patterns + +### Manager pattern +Each UI location (ribbon, status bar, page header, editor menu, etc.) has a manager class that extends `CommandManagerBase`. Managers: +- Own the `CommandIconPair[]` array for their location +- Implement `addCommand`, `removeCommand`, `reorder` +- Handle DOM creation and updates for their location +- Are initialized in `main.ts` `onload()` and stored on `plugin.manager` + +### Settings storage +Settings are persisted via `plugin.loadData()` / `plugin.saveData()`. The `CommanderSettings` interface in `types.ts` is the source of truth. Always add a nullish guard in `onload()` for any new optional array field so that users upgrading from older versions don't get errors: +```typescript +this.settings.hide.textToolbar ??= []; +``` + +### Localization +All user-visible strings should go through `t()` from `src/l10n.ts`. The canonical locale is `locale/en.json`. If you add a new UI string, add it to `en.json` (and ideally other locale files). Strings not in the locale fall back to `en.json`; if not found there either, `t()` returns `undefined`, which renders as blank text. + +### Preact UI +The settings UI uses Preact (not React). Components live in `src/ui/components/`. Reuse existing components: +- `ToggleComponent` / `SliderComponent` / `EyeToggleComponent` from `settingComponent.tsx` +- `CommandViewer` from `commandViewerComponent.tsx` — takes a `CommandManagerBase`, renders the command list with add/remove/reorder +- `Accordion` from `Accordion.tsx` + +To add a new settings tab: +1. Create a Preact component in `src/ui/components/` +2. Add an entry to the `tabs` array in `settingTabComponent.tsx` +3. The tab name must be a plain string (not `undefined`) — if using `t()`, ensure the key exists in `en.json` + +## Adding a new feature (checklist) + +1. **Types**: Add fields to `CommanderSettings` in `src/types.ts` +2. **Defaults**: Add corresponding defaults in `DEFAULT_SETTINGS` in `src/constants.ts` +3. **Manager**: Create `src/manager/commands/Manager.ts` extending `CommandManagerBase`; export from `index.ts` +4. **main.ts**: Add nullish guard for any new array fields; instantiate manager; add to `plugin.manager` +5. **Settings UI**: Create component in `src/ui/components/`; add tab to `settingTabComponent.tsx` +6. **Locale**: Add any new UI strings to `locale/en.json` +7. **Styles**: Add CSS classes to `src/styles/styles.scss` using `cmdr-` prefix + +## Text Toolbar feature + +The Text Toolbar (`src/manager/commands/textToolbarManager.ts`) shows a floating action bar above selected text in a markdown source editor. Key implementation notes: + +- Enabled/disabled via `plugin.settings.textToolbarEnabled` +- Always instantiated; event handlers check the setting at runtime +- Toolbar element is appended to `document.body` with `position: fixed` +- Uses `mousedown` + `e.preventDefault()` on buttons to keep editor focus and preserve selection +- Checks that selection is inside `.cm-editor` before showing (prevents showing in UI panels) +- Desktop-only: mobile guard via `Platform.isMobile` in the manager +- Default commands (Bold, Italic, Strikethrough, Copy, Cut) can be individually hidden via `settings.hide.textToolbar` +- User-added commands are `CommandIconPair[]` stored in `settings.textToolbar` + +## Manifest rules (`manifest.json`) + +- `id`, `name`, `version` (SemVer), `minAppVersion`, `description`, `isDesktopOnly` are required +- Never change `id` after release +- Keep `minAppVersion` accurate when using newer APIs + +## Testing + +- Manual install for testing: copy `main.js`, `manifest.json`, `styles.css` (if any) to: + ``` + /.obsidian/plugins// + ``` +- Reload Obsidian and enable the plugin in **Settings → Community plugins** +- This plugin's source folder IS the installed plugin folder (Dev Vault), so building in place is sufficient — just reload Obsidian after `npm run build:esbuild` + +## Security, privacy, and compliance + +Follow Obsidian's **Developer Policies** and **Plugin Guidelines**: +- Default to local/offline operation. Only make network requests when essential. +- No hidden telemetry. +- Never execute remote code or auto-update plugin code outside of normal releases. +- Register and clean up all DOM, app, and interval listeners using `register*` helpers. + +## Performance + +- Keep startup light. Defer heavy work until `onLayoutReady`. +- Debounce expensive operations (e.g. selection-change handlers). +- Batch disk access; avoid excessive vault scans. + +## Coding conventions + +- TypeScript; existing codebase uses `"strict": false` but prefer strict-compatible code. +- CSS class prefix: `cmdr-` for all plugin-owned classes. +- Keep `main.ts` minimal — delegate all feature logic to managers and UI components. +- `this.register*` helpers for everything that needs cleanup. +- Prefer `async/await`; handle errors gracefully. + +## References + +- Obsidian sample plugin: https://github.com/obsidianmd/obsidian-sample-plugin +- API documentation: https://docs.obsidian.md +- Developer policies: https://docs.obsidian.md/Developer+policies +- Plugin guidelines: https://docs.obsidian.md/Plugins/Releasing/Plugin+guidelines diff --git a/app.css b/app.css new file mode 100644 index 0000000..f5e42ec --- /dev/null +++ b/app.css @@ -0,0 +1,18989 @@ +/* @obsidian Do not edit this file directly, it is generated from the pdf.js repo + * Either edit the CSS there, or override in pdf-view.less + */ +/* Copyright 2014 Mozilla Foundation + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.messageBar{ + --message-bar-close-button-color:var(--text-primary-color); + --message-bar-close-button-color-hover:var(--text-primary-color); + --message-bar-close-button-border-radius:4px; + --message-bar-close-button-border:none; + --csstools-light-dark-toggle--24:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.14); + --message-bar-close-button-hover-bg-color:var(--csstools-light-dark-toggle--24, rgba(251, 251, 254, 0.14)); + --csstools-light-dark-toggle--25:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.21); + --message-bar-close-button-active-bg-color:var(--csstools-light-dark-toggle--25, rgba(251, 251, 254, 0.21)); + --csstools-light-dark-toggle--26:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.07); + --message-bar-close-button-focus-bg-color:var(--csstools-light-dark-toggle--26, rgba(251, 251, 254, 0.07)); + + display:flex; + position:relative; + padding:8px 8px 8px 16px; + flex-direction:column; + justify-content:center; + align-items:center; + gap:8px; + -webkit-user-select:none; + -moz-user-select:none; + user-select:none; + + border-radius:4px; + + border:1px solid var(--message-bar-border-color); + background:var(--message-bar-bg-color); + color:var(--message-bar-fg-color); +} + +@supports (color: light-dark(red, red)) { +.messageBar{ + --message-bar-close-button-hover-bg-color:light-dark( + rgba(21, 20, 26, 0.14), + rgba(251, 251, 254, 0.14) + ); + --message-bar-close-button-active-bg-color:light-dark( + rgba(21, 20, 26, 0.21), + rgba(251, 251, 254, 0.21) + ); + --message-bar-close-button-focus-bg-color:light-dark( + rgba(21, 20, 26, 0.07), + rgba(251, 251, 254, 0.07) + ); +} +} + +.messageBar * { + --csstools-light-dark-toggle--24:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.14); + --message-bar-close-button-hover-bg-color:var(--csstools-light-dark-toggle--24, rgba(251, 251, 254, 0.14)); +} + +.messageBar * { + --csstools-light-dark-toggle--25:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.21); + --message-bar-close-button-active-bg-color:var(--csstools-light-dark-toggle--25, rgba(251, 251, 254, 0.21)); +} + +.messageBar * { + --csstools-light-dark-toggle--26:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.07); + --message-bar-close-button-focus-bg-color:var(--csstools-light-dark-toggle--26, rgba(251, 251, 254, 0.07)); +} + +@media screen and (forced-colors: active){ + +.messageBar{ + --message-bar-close-button-color:ButtonText; + --message-bar-close-button-border:1px solid ButtonText; + --message-bar-close-button-hover-bg-color:ButtonText; + --message-bar-close-button-active-bg-color:ButtonText; + --message-bar-close-button-focus-bg-color:ButtonText; + --message-bar-close-button-color-hover:HighlightText; +} + } + +.messageBar > div{ + display:flex; + align-items:flex-start; + gap:8px; + align-self:stretch; + } + +.messageBar > div::before{ + content:""; + display:inline-block; + width:16px; + height:16px; + -webkit-mask-image:var(--message-bar-icon); + mask-image:var(--message-bar-icon); + -webkit-mask-size:cover; + mask-size:cover; + background-color:var(--message-bar-icon-color); + flex-shrink:0; + } + +.messageBar button{ + cursor:pointer; + } + +.messageBar button:focus-visible{ + --csstools-light-dark-toggle--27:var(--csstools-color-scheme--dark) #0060df; + outline:2px solid #0df; + outline:2px solid var(--csstools-light-dark-toggle--27, #0df); + outline:2px solid light-dark(#0060df, #0df); + outline:var(--focus-ring-outline); + outline-offset:2px; + } + +.messageBar .closeButton{ + width:32px; + height:32px; + background:none; + border-radius:var(--message-bar-close-button-border-radius); + border:var(--message-bar-close-button-border); + + display:flex; + align-items:center; + justify-content:center; + } + +.messageBar .closeButton::before{ + content:""; + display:inline-block; + width:16px; + height:16px; + -webkit-mask-image:var(--closing-button-icon); + mask-image:var(--closing-button-icon); + -webkit-mask-size:cover; + mask-size:cover; + background-color:var(--message-bar-close-button-color); + } + +.messageBar .closeButton:hover::before{ + background-color:var(--message-bar-close-button-color-hover); + } + +.messageBar .closeButton:active::before{ + background-color:var(--message-bar-close-button-color-hover); + } + +.messageBar .closeButton:focus::before{ + background-color:var(--message-bar-close-button-color-hover); + } + +.messageBar .closeButton:hover{ + background-color:var(--message-bar-close-button-hover-bg-color); + } + +.messageBar .closeButton:active{ + background-color:var(--message-bar-close-button-active-bg-color); + } + +.messageBar .closeButton:focus{ + background-color:var(--message-bar-close-button-focus-bg-color); + } + +.messageBar .closeButton > span{ + display:inline-block; + width:0; + height:0; + overflow:hidden; + } + +#editorUndoBar{ + --csstools-light-dark-toggle--0:var(--csstools-color-scheme--dark) #15141a; + --text-primary-color:var(--csstools-light-dark-toggle--0, #fbfbfe); + --csstools-light-dark-toggle--1:var(--csstools-color-scheme--dark) #0060df; + --message-bar-icon-color:var(--csstools-light-dark-toggle--1, #73a7f3); + --csstools-light-dark-toggle--2:var(--csstools-color-scheme--dark) #deeafc; + --message-bar-bg-color:var(--csstools-light-dark-toggle--2, #003070); + --message-bar-fg-color:var(--text-primary-color); + --csstools-light-dark-toggle--29:var(--csstools-color-scheme--dark) rgba(0, 0, 0, 0.08); + --message-bar-border-color:var(--csstools-light-dark-toggle--29, rgba(255, 255, 255, 0.08)); + + --csstools-light-dark-toggle--30:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.07); + + --undo-button-bg-color:var(--csstools-light-dark-toggle--30, rgba(255, 255, 255, 0.08)); + --csstools-light-dark-toggle--31:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.14); + --undo-button-bg-color-hover:var(--csstools-light-dark-toggle--31, rgba(255, 255, 255, 0.14)); + --csstools-light-dark-toggle--32:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.21); + --undo-button-bg-color-active:var(--csstools-light-dark-toggle--32, rgba(255, 255, 255, 0.21)); + + --csstools-light-dark-toggle--3:var(--csstools-color-scheme--dark) #0060df; + + --undo-button-border:1px solid var(--csstools-light-dark-toggle--3, #0df); + + --undo-button-fg-color:var(--message-bar-fg-color); + --undo-button-fg-color-hover:var(--undo-button-fg-color); + --undo-button-fg-color-active:var(--undo-button-fg-color); + + position:fixed; + top:50px; + left:50%; + transform:translateX(-50%); + z-index:10; + + padding-top:8px; + + padding-bottom:8px; + padding-left:16px; + padding-right:8px; + + font:menu; + font-size:15px; + + cursor:default; +} + +@supports (color: light-dark(red, red)) { +#editorUndoBar{ + --text-primary-color:light-dark(#15141a, #fbfbfe); + --message-bar-icon-color:light-dark(#0060df, #73a7f3); + --message-bar-bg-color:light-dark(#deeafc, #003070); + --message-bar-border-color:light-dark( + rgba(0, 0, 0, 0.08), + rgba(255, 255, 255, 0.08) + ); + + --undo-button-bg-color:light-dark( + rgba(21, 20, 26, 0.07), + rgba(255, 255, 255, 0.08) + ); + --undo-button-bg-color-hover:light-dark( + rgba(21, 20, 26, 0.14), + rgba(255, 255, 255, 0.14) + ); + --undo-button-bg-color-active:light-dark( + rgba(21, 20, 26, 0.21), + rgba(255, 255, 255, 0.21) + ); + + --undo-button-border:1px solid light-dark(#0060df, #0df); +} +} + +#editorUndoBar * { + --csstools-light-dark-toggle--29:var(--csstools-color-scheme--dark) rgba(0, 0, 0, 0.08); + --message-bar-border-color:var(--csstools-light-dark-toggle--29, rgba(255, 255, 255, 0.08)); +} + +#editorUndoBar * { + + --csstools-light-dark-toggle--30:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.07); + + --undo-button-bg-color:var(--csstools-light-dark-toggle--30, rgba(255, 255, 255, 0.08)); +} + +#editorUndoBar * { + --csstools-light-dark-toggle--31:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.14); + --undo-button-bg-color-hover:var(--csstools-light-dark-toggle--31, rgba(255, 255, 255, 0.14)); +} + +#editorUndoBar * { + --csstools-light-dark-toggle--32:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.21); + --undo-button-bg-color-active:var(--csstools-light-dark-toggle--32, rgba(255, 255, 255, 0.21)); +} + +#editorUndoBar * { + --csstools-light-dark-toggle--0:var(--csstools-color-scheme--dark) #15141a; + --text-primary-color:var(--csstools-light-dark-toggle--0, #fbfbfe); +} + +#editorUndoBar * { + --csstools-light-dark-toggle--1:var(--csstools-color-scheme--dark) #0060df; + --message-bar-icon-color:var(--csstools-light-dark-toggle--1, #73a7f3); +} + +#editorUndoBar * { + --csstools-light-dark-toggle--2:var(--csstools-color-scheme--dark) #deeafc; + --message-bar-bg-color:var(--csstools-light-dark-toggle--2, #003070); +} + +#editorUndoBar * { + + --csstools-light-dark-toggle--3:var(--csstools-color-scheme--dark) #0060df; + + --undo-button-border:1px solid var(--csstools-light-dark-toggle--3, #0df); +} + +@media screen and (forced-colors: active){ + +#editorUndoBar{ + --text-primary-color:CanvasText; + + --message-bar-icon-color:CanvasText; + --message-bar-bg-color:Canvas; + --message-bar-border-color:CanvasText; + + --undo-button-bg-color:ButtonText; + --undo-button-bg-color-hover:SelectedItem; + --undo-button-bg-color-active:SelectedItem; + + --undo-button-fg-color:ButtonFace; + --undo-button-fg-color-hover:SelectedItemText; + --undo-button-fg-color-active:SelectedItemText; + + --undo-button-border:none; +} + } + +#editorUndoBar button{ + cursor:pointer; + } + +#editorUndoBar #editorUndoBarUndoButton{ + border-radius:4px; + font-weight:590; + line-height:19.5px; + color:var(--undo-button-fg-color); + border:var(--undo-button-border); + padding:4px 16px; + margin-left:8px; + height:32px; + + background-color:var(--undo-button-bg-color); + } + +#editorUndoBar #editorUndoBarUndoButton:hover{ + background-color:var(--undo-button-bg-color-hover); + color:var(--undo-button-fg-color-hover); + } + +#editorUndoBar #editorUndoBarUndoButton:active{ + background-color:var(--undo-button-bg-color-active); + color:var(--undo-button-fg-color-active); + } + +#editorUndoBar > div{ + align-items:center; + } + +.dialog{ + --csstools-light-dark-toggle--4:var(--csstools-color-scheme--dark) white; + --dialog-bg-color:var(--csstools-light-dark-toggle--4, #1c1b22); + --csstools-light-dark-toggle--5:var(--csstools-color-scheme--dark) white; + --dialog-border-color:var(--csstools-light-dark-toggle--5, #1c1b22); + --csstools-light-dark-toggle--33:var(--csstools-color-scheme--dark) rgba(58, 57, 68, 0.2); + --dialog-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--33, #15141a); + --csstools-light-dark-toggle--6:var(--csstools-color-scheme--dark) #15141a; + --text-primary-color:var(--csstools-light-dark-toggle--6, #fbfbfe); + --csstools-light-dark-toggle--7:var(--csstools-color-scheme--dark) #5b5b66; + --text-secondary-color:var(--csstools-light-dark-toggle--7, #cfcfd8); + --hover-filter:brightness(0.9); + --csstools-light-dark-toggle--8:var(--csstools-color-scheme--dark) #0060df; + --link-fg-color:var(--csstools-light-dark-toggle--8, #0df); + --csstools-light-dark-toggle--9:var(--csstools-color-scheme--dark) #0250bb; + --link-hover-fg-color:var(--csstools-light-dark-toggle--9, #80ebff); + --csstools-light-dark-toggle--10:var(--csstools-color-scheme--dark) #f0f0f4; + --separator-color:var(--csstools-light-dark-toggle--10, #52525e); + + --textarea-border-color:#8f8f9d; + --csstools-light-dark-toggle--11:var(--csstools-color-scheme--dark) white; + --textarea-bg-color:var(--csstools-light-dark-toggle--11, #42414d); + --textarea-fg-color:var(--text-secondary-color); + + --csstools-light-dark-toggle--12:var(--csstools-color-scheme--dark) #f0f0f4; + + --radio-bg-color:var(--csstools-light-dark-toggle--12, #2b2a33); + --csstools-light-dark-toggle--13:var(--csstools-color-scheme--dark) #fbfbfe; + --radio-checked-bg-color:var(--csstools-light-dark-toggle--13, #15141a); + --radio-border-color:#8f8f9d; + --csstools-light-dark-toggle--14:var(--csstools-color-scheme--dark) #0060df; + --radio-checked-border-color:var(--csstools-light-dark-toggle--14, #0df); + + --csstools-light-dark-toggle--34:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.07); + + --button-secondary-bg-color:var(--csstools-light-dark-toggle--34, rgba(251, 251, 254, 0.07)); + --button-secondary-fg-color:var(--text-primary-color); + --button-secondary-border-color:var(--button-secondary-bg-color); + --csstools-light-dark-toggle--35:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.21); + --button-secondary-active-bg-color:var(--csstools-light-dark-toggle--35, rgba(251, 251, 254, 0.21)); + --button-secondary-active-fg-color:var(--button-secondary-fg-color); + --button-secondary-active-border-color:var(--button-secondary-bg-color); + --csstools-light-dark-toggle--36:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.14); + --button-secondary-hover-bg-color:var(--csstools-light-dark-toggle--36, rgba(251, 251, 254, 0.14)); + --button-secondary-hover-fg-color:var(--button-secondary-fg-color); + --button-secondary-hover-border-color:var(--button-secondary-hover-bg-color); + --button-secondary-disabled-bg-color:var(--button-secondary-bg-color); + --button-secondary-disabled-border-color:var( + --button-secondary-border-color + ); + --button-secondary-disabled-fg-color:var(--button-secondary-fg-color); + + --csstools-light-dark-toggle--15:var(--csstools-color-scheme--dark) #0060df; + + --button-primary-bg-color:var(--csstools-light-dark-toggle--15, #0df); + --csstools-light-dark-toggle--16:var(--csstools-color-scheme--dark) #fbfbfe; + --button-primary-fg-color:var(--csstools-light-dark-toggle--16, #15141a); + --button-primary-border-color:var(--button-primary-bg-color); + --csstools-light-dark-toggle--17:var(--csstools-color-scheme--dark) #054096; + --button-primary-active-bg-color:var(--csstools-light-dark-toggle--17, #aaf2ff); + --button-primary-active-fg-color:var(--button-primary-fg-color); + --button-primary-active-border-color:var(--button-primary-active-bg-color); + --csstools-light-dark-toggle--18:var(--csstools-color-scheme--dark) #0250bb; + --button-primary-hover-bg-color:var(--csstools-light-dark-toggle--18, #80ebff); + --button-primary-hover-fg-color:var(--button-primary-fg-color); + --button-primary-hover-border-color:var(--button-primary-hover-bg-color); + --button-primary-disabled-bg-color:var(--button-primary-bg-color); + --button-primary-disabled-border-color:var(--button-primary-border-color); + --button-primary-disabled-fg-color:var(--button-primary-fg-color); + --button-disabled-opacity:0.4; + + --csstools-light-dark-toggle--19:var(--csstools-color-scheme--dark) white; + + --input-text-bg-color:var(--csstools-light-dark-toggle--19, #42414d); + --input-text-fg-color:var(--text-primary-color); + + font:message-box; + font-size:13px; + font-weight:400; + line-height:150%; + border-radius:4px; + padding:12px 16px; + --csstools-light-dark-toggle--37:var(--csstools-color-scheme--dark) white; + border:1px solid #1c1b22; + border:1px solid var(--csstools-light-dark-toggle--37, #1c1b22); + border:1px solid light-dark(white, #1c1b22); + border:1px solid var(--dialog-border-color); + --csstools-light-dark-toggle--38:var(--csstools-color-scheme--dark) white; + background:#1c1b22; + background:var(--csstools-light-dark-toggle--38, #1c1b22); + background:light-dark(white, #1c1b22); + background:var(--dialog-bg-color); + --csstools-light-dark-toggle--39:var(--csstools-color-scheme--dark) #15141a; + color:#fbfbfe; + color:var(--csstools-light-dark-toggle--39, #fbfbfe); + color:light-dark(#15141a, #fbfbfe); + color:var(--text-primary-color); + --csstools-light-dark-toggle--40:var(--csstools-color-scheme--dark) rgba(58, 57, 68, 0.2); + box-shadow:0 2px 14px 0 #15141a; + box-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--40, #15141a); + box-shadow:0 2px 14px 0 light-dark(rgba(58, 57, 68, 0.2), #15141a); + box-shadow:var(--dialog-shadow); +} + +@supports (color: light-dark(red, red)) { +.dialog{ + --dialog-bg-color:light-dark(white, #1c1b22); + --dialog-border-color:light-dark(white, #1c1b22); + --dialog-shadow:0 2px 14px 0 light-dark(rgba(58, 57, 68, 0.2), #15141a); + --text-primary-color:light-dark(#15141a, #fbfbfe); + --text-secondary-color:light-dark(#5b5b66, #cfcfd8); + --link-fg-color:light-dark(#0060df, #0df); + --link-hover-fg-color:light-dark(#0250bb, #80ebff); + --separator-color:light-dark(#f0f0f4, #52525e); + --textarea-bg-color:light-dark(white, #42414d); + + --radio-bg-color:light-dark(#f0f0f4, #2b2a33); + --radio-checked-bg-color:light-dark(#fbfbfe, #15141a); + --radio-checked-border-color:light-dark(#0060df, #0df); + + --button-secondary-bg-color:light-dark( + rgba(21, 20, 26, 0.07), + rgba(251, 251, 254, 0.07) + ); + --button-secondary-active-bg-color:light-dark( + rgba(21, 20, 26, 0.21), + rgba(251, 251, 254, 0.21) + ); + --button-secondary-hover-bg-color:light-dark( + rgba(21, 20, 26, 0.14), + rgba(251, 251, 254, 0.14) + ); + + --button-primary-bg-color:light-dark(#0060df, #0df); + --button-primary-fg-color:light-dark(#fbfbfe, #15141a); + --button-primary-active-bg-color:light-dark(#054096, #aaf2ff); + --button-primary-hover-bg-color:light-dark(#0250bb, #80ebff); + + --input-text-bg-color:light-dark(white, #42414d); +} +} + +.dialog * { + --csstools-light-dark-toggle--33:var(--csstools-color-scheme--dark) rgba(58, 57, 68, 0.2); + --dialog-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--33, #15141a); +} + +.dialog * { + + --csstools-light-dark-toggle--34:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.07); + + --button-secondary-bg-color:var(--csstools-light-dark-toggle--34, rgba(251, 251, 254, 0.07)); +} + +.dialog * { + --csstools-light-dark-toggle--35:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.21); + --button-secondary-active-bg-color:var(--csstools-light-dark-toggle--35, rgba(251, 251, 254, 0.21)); +} + +.dialog * { + --csstools-light-dark-toggle--36:var(--csstools-color-scheme--dark) rgba(21, 20, 26, 0.14); + --button-secondary-hover-bg-color:var(--csstools-light-dark-toggle--36, rgba(251, 251, 254, 0.14)); +} + +.dialog * { + --csstools-light-dark-toggle--4:var(--csstools-color-scheme--dark) white; + --dialog-bg-color:var(--csstools-light-dark-toggle--4, #1c1b22); +} + +.dialog * { + --csstools-light-dark-toggle--5:var(--csstools-color-scheme--dark) white; + --dialog-border-color:var(--csstools-light-dark-toggle--5, #1c1b22); +} + +.dialog * { + --csstools-light-dark-toggle--6:var(--csstools-color-scheme--dark) #15141a; + --text-primary-color:var(--csstools-light-dark-toggle--6, #fbfbfe); +} + +.dialog * { + --csstools-light-dark-toggle--7:var(--csstools-color-scheme--dark) #5b5b66; + --text-secondary-color:var(--csstools-light-dark-toggle--7, #cfcfd8); +} + +.dialog * { + --csstools-light-dark-toggle--8:var(--csstools-color-scheme--dark) #0060df; + --link-fg-color:var(--csstools-light-dark-toggle--8, #0df); +} + +.dialog * { + --csstools-light-dark-toggle--9:var(--csstools-color-scheme--dark) #0250bb; + --link-hover-fg-color:var(--csstools-light-dark-toggle--9, #80ebff); +} + +.dialog * { + --csstools-light-dark-toggle--10:var(--csstools-color-scheme--dark) #f0f0f4; + --separator-color:var(--csstools-light-dark-toggle--10, #52525e); +} + +.dialog * { + --csstools-light-dark-toggle--11:var(--csstools-color-scheme--dark) white; + --textarea-bg-color:var(--csstools-light-dark-toggle--11, #42414d); +} + +.dialog * { + + --csstools-light-dark-toggle--12:var(--csstools-color-scheme--dark) #f0f0f4; + + --radio-bg-color:var(--csstools-light-dark-toggle--12, #2b2a33); +} + +.dialog * { + --csstools-light-dark-toggle--13:var(--csstools-color-scheme--dark) #fbfbfe; + --radio-checked-bg-color:var(--csstools-light-dark-toggle--13, #15141a); +} + +.dialog * { + --csstools-light-dark-toggle--14:var(--csstools-color-scheme--dark) #0060df; + --radio-checked-border-color:var(--csstools-light-dark-toggle--14, #0df); +} + +.dialog * { + + --csstools-light-dark-toggle--15:var(--csstools-color-scheme--dark) #0060df; + + --button-primary-bg-color:var(--csstools-light-dark-toggle--15, #0df); +} + +.dialog * { + --csstools-light-dark-toggle--16:var(--csstools-color-scheme--dark) #fbfbfe; + --button-primary-fg-color:var(--csstools-light-dark-toggle--16, #15141a); +} + +.dialog * { + --csstools-light-dark-toggle--17:var(--csstools-color-scheme--dark) #054096; + --button-primary-active-bg-color:var(--csstools-light-dark-toggle--17, #aaf2ff); +} + +.dialog * { + --csstools-light-dark-toggle--18:var(--csstools-color-scheme--dark) #0250bb; + --button-primary-hover-bg-color:var(--csstools-light-dark-toggle--18, #80ebff); +} + +.dialog * { + + --csstools-light-dark-toggle--19:var(--csstools-color-scheme--dark) white; + + --input-text-bg-color:var(--csstools-light-dark-toggle--19, #42414d); +} + +@media (prefers-color-scheme: dark){ + +.dialog{ + --hover-filter:brightness(1.4); + --button-disabled-opacity:0.6; +} + } + +@media screen and (forced-colors: active){ + +.dialog{ + --dialog-bg-color:Canvas; + --dialog-border-color:CanvasText; + --dialog-shadow:none; + --text-primary-color:CanvasText; + --text-secondary-color:CanvasText; + --hover-filter:none; + --link-fg-color:LinkText; + --link-hover-fg-color:LinkText; + --separator-color:CanvasText; + + --textarea-border-color:ButtonBorder; + --textarea-bg-color:Field; + --textarea-fg-color:ButtonText; + + --radio-bg-color:ButtonFace; + --radio-checked-bg-color:ButtonFace; + --radio-border-color:ButtonText; + --radio-checked-border-color:ButtonText; + + --button-secondary-bg-color:HighlightText; + --button-secondary-fg-color:ButtonText; + --button-secondary-border-color:ButtonText; + --button-secondary-active-bg-color:HighlightText; + --button-secondary-active-fg-color:SelectedItem; + --button-secondary-active-border-color:ButtonText; + --button-secondary-hover-bg-color:HighlightText; + --button-secondary-hover-fg-color:SelectedItem; + --button-secondary-hover-border-color:SelectedItem; + --button-secondary-disabled-fg-color:GrayText; + --button-secondary-disabled-border-color:GrayText; + + --button-primary-bg-color:ButtonText; + --button-primary-fg-color:HighlightText; + --button-primary-border-color:ButtonText; + --button-primary-active-bg-color:SelectedItem; + --button-primary-active-fg-color:HighlightText; + --button-primary-active-border-color:ButtonText; + --button-primary-hover-bg-color:SelectedItem; + --button-primary-hover-fg-color:HighlightText; + --button-primary-hover-border-color:SelectedItem; + --button-primary-disabled-bg-color:GrayText; + --button-primary-disabled-fg-color:ButtonFace; + --button-primary-disabled-border-color:GrayText; + --button-disabled-opacity:1; + + --input-text-bg-color:HighlightText; + --input-text-fg-color:FieldText; +} + } + +.dialog .mainContainer *:focus-visible{ + --csstools-light-dark-toggle--28:var(--csstools-color-scheme--dark) #0060df; + outline:2px solid #0df; + outline:2px solid var(--csstools-light-dark-toggle--28, #0df); + outline:2px solid light-dark(#0060df, #0df); + outline:var(--focus-ring-outline); + outline-offset:2px; + } + +.dialog .mainContainer .title{ + display:flex; + width:auto; + flex-direction:column; + justify-content:flex-end; + align-items:flex-start; + gap:12px; + } + +.dialog .mainContainer .title > span{ + font-size:13px; + font-style:normal; + font-weight:590; + line-height:150%; + } + +.dialog .mainContainer .dialogSeparator{ + width:100%; + height:0; + margin-top:4px; + margin-bottom:4px; + border-top:1px solid var(--separator-color); + border-bottom:none; + } + +.dialog .mainContainer .dialogButtonsGroup{ + display:flex; + gap:12px; + align-self:flex-end; + } + +.dialog .mainContainer .radio{ + display:flex; + flex-direction:column; + align-items:flex-start; + gap:4px; + } + +.dialog .mainContainer .radio > .radioButton{ + display:flex; + gap:8px; + align-self:stretch; + align-items:center; + } + +.dialog .mainContainer .radio > .radioButton input{ + -webkit-appearance:none; + -moz-appearance:none; + appearance:none; + box-sizing:border-box; + width:16px; + height:16px; + border-radius:50%; + background-color:var(--radio-bg-color); + border:1px solid var(--radio-border-color); + } + +.dialog .mainContainer .radio > .radioButton input:hover{ + filter:var(--hover-filter); + } + +.dialog .mainContainer .radio > .radioButton input:checked{ + background-color:var(--radio-checked-bg-color); + border:4px solid var(--radio-checked-border-color); + } + +.dialog .mainContainer .radio > .radioLabel{ + display:flex; + padding-left:24px; + align-items:flex-start; + gap:10px; + align-self:stretch; + } + +.dialog .mainContainer .radio > .radioLabel > span{ + flex:1 0 0; + font-size:11px; + color:var(--text-secondary-color); + } + +.dialog .mainContainer button:not(.toggle-button):not(.closeButton):not(.clearInputButton){ + border-radius:4px; + border:1px solid; + font:menu; + font-weight:590; + font-size:13px; + padding:4px 16px; + width:auto; + height:32px; + } + +.dialog .mainContainer button:not(.toggle-button):not(.closeButton):not(.clearInputButton):hover{ + cursor:pointer; + filter:var(--hover-filter); + } + +.dialog .mainContainer button:not(.toggle-button):not(.closeButton):not(.clearInputButton) > span{ + color:inherit; + font:inherit; + } + +.dialog .mainContainer button.secondaryButton:not(.toggle-button):not(.closeButton):not(.clearInputButton){ + color:var(--button-secondary-fg-color); + background-color:var(--button-secondary-bg-color); + border-color:var(--button-secondary-border-color); + } + +.dialog .mainContainer button.secondaryButton:not(.toggle-button):not(.closeButton):not(.clearInputButton):hover{ + color:var(--button-secondary-hover-fg-color); + background-color:var(--button-secondary-hover-bg-color); + border-color:var(--button-secondary-hover-border-color); + } + +.dialog .mainContainer button.secondaryButton:not(.toggle-button):not(.closeButton):not(.clearInputButton):active{ + color:var(--button-secondary-active-fg-color); + background-color:var(--button-secondary-active-bg-color); + border-color:var(--button-secondary-active-border-color); + } + +.dialog .mainContainer button.secondaryButton:not(.toggle-button):not(.closeButton):not(.clearInputButton):disabled{ + background-color:var(--button-secondary-disabled-bg-color); + border-color:var(--button-secondary-disabled-border-color); + color:var(--button-secondary-disabled-fg-color); + opacity:var(--button-disabled-opacity); + } + +.dialog .mainContainer button.primaryButton:not(.toggle-button):not(.closeButton):not(.clearInputButton){ + color:var(--button-primary-fg-color); + background-color:var(--button-primary-bg-color); + border-color:var(--button-primary-border-color); + opacity:1; + } + +.dialog .mainContainer button.primaryButton:not(.toggle-button):not(.closeButton):not(.clearInputButton):hover{ + color:var(--button-primary-hover-fg-color); + background-color:var(--button-primary-hover-bg-color); + border-color:var(--button-primary-hover-border-color); + } + +.dialog .mainContainer button.primaryButton:not(.toggle-button):not(.closeButton):not(.clearInputButton):active{ + color:var(--button-primary-active-fg-color); + background-color:var(--button-primary-active-bg-color); + border-color:var(--button-primary-active-border-color); + } + +.dialog .mainContainer button.primaryButton:not(.toggle-button):not(.closeButton):not(.clearInputButton):disabled{ + background-color:var(--button-primary-disabled-bg-color); + border-color:var(--button-primary-disabled-border-color); + color:var(--button-primary-disabled-fg-color); + opacity:var(--button-disabled-opacity); + } + +.dialog .mainContainer button:not(.toggle-button):not(.closeButton):not(.clearInputButton):disabled{ + pointer-events:none; + } + +.dialog .mainContainer a{ + color:var(--link-fg-color); + } + +.dialog .mainContainer a:hover{ + color:var(--link-hover-fg-color); + } + +.dialog .mainContainer textarea{ + font:inherit; + padding:8px; + resize:none; + margin:0; + box-sizing:border-box; + border-radius:4px; + border:1px solid var(--textarea-border-color); + background:var(--textarea-bg-color); + color:var(--textarea-fg-color); + } + +.dialog .mainContainer textarea:focus{ + outline-offset:0; + border-color:transparent; + } + +.dialog .mainContainer textarea:disabled{ + pointer-events:none; + opacity:0.4; + } + +.dialog .mainContainer input[type="text"]{ + background-color:var(--input-text-bg-color); + color:var(--input-text-fg-color); + } + +.dialog .mainContainer .messageBar{ + --csstools-light-dark-toggle--20:var(--csstools-color-scheme--dark) #ffebcd; + --message-bar-bg-color:var(--csstools-light-dark-toggle--20, #5a3100); + --csstools-light-dark-toggle--21:var(--csstools-color-scheme--dark) #15141a; + --message-bar-fg-color:var(--csstools-light-dark-toggle--21, #fbfbfe); + --csstools-light-dark-toggle--41:var(--csstools-color-scheme--dark) rgba(0, 0, 0, 0.08); + --message-bar-border-color:var(--csstools-light-dark-toggle--41, rgba(255, 255, 255, 0.08)); + --csstools-light-dark-toggle--22:var(--csstools-color-scheme--dark) #cd411e; + --message-bar-icon-color:var(--csstools-light-dark-toggle--22, #e49c49); + + align-self:stretch; + } + +@supports (color: light-dark(red, red)) { +.dialog .mainContainer .messageBar{ + --message-bar-bg-color:light-dark(#ffebcd, #5a3100); + --message-bar-fg-color:light-dark(#15141a, #fbfbfe); + --message-bar-border-color:light-dark( + rgba(0, 0, 0, 0.08), + rgba(255, 255, 255, 0.08) + ); + --message-bar-icon-color:light-dark(#cd411e, #e49c49); + } +} + +.dialog .mainContainer .messageBar * { + --csstools-light-dark-toggle--41:var(--csstools-color-scheme--dark) rgba(0, 0, 0, 0.08); + --message-bar-border-color:var(--csstools-light-dark-toggle--41, rgba(255, 255, 255, 0.08)); +} + +.dialog .mainContainer .messageBar * { + --csstools-light-dark-toggle--20:var(--csstools-color-scheme--dark) #ffebcd; + --message-bar-bg-color:var(--csstools-light-dark-toggle--20, #5a3100); +} + +.dialog .mainContainer .messageBar * { + --csstools-light-dark-toggle--21:var(--csstools-color-scheme--dark) #15141a; + --message-bar-fg-color:var(--csstools-light-dark-toggle--21, #fbfbfe); +} + +.dialog .mainContainer .messageBar * { + --csstools-light-dark-toggle--22:var(--csstools-color-scheme--dark) #cd411e; + --message-bar-icon-color:var(--csstools-light-dark-toggle--22, #e49c49); +} + +@media screen and (forced-colors: active){ + +.dialog .mainContainer .messageBar{ + --message-bar-bg-color:HighlightText; + --message-bar-fg-color:CanvasText; + --message-bar-border-color:CanvasText; + --message-bar-icon-color:CanvasText; + } + } + +.dialog .mainContainer .messageBar > div::before, + .dialog .mainContainer .messageBar > div > div{ + margin-top:4px; + margin-bottom:4px; + } + +.dialog .mainContainer .messageBar > div > div{ + display:flex; + flex-direction:column; + align-items:flex-start; + gap:8px; + flex:1 0 0; + } + +.dialog .mainContainer .messageBar > div > div .title{ + font-size:13px; + font-weight:590; + } + +.dialog .mainContainer .messageBar > div > div .description{ + font-size:13px; + } + +.dialog .mainContainer .toggler{ + display:flex; + align-items:center; + gap:8px; + align-self:stretch; + } + +.dialog .mainContainer .toggler > .togglerLabel{ + -webkit-user-select:none; + -moz-user-select:none; + user-select:none; + } + +.textLayer{ + position:absolute; + text-align:left; + text-align:initial; + top:0; + right:0; + bottom:0; + left:0; + overflow:clip; + opacity:1; + line-height:1; + -webkit-text-size-adjust:none; + -moz-text-size-adjust:none; + text-size-adjust:none; + forced-color-adjust:none; + transform-origin:0 0; + caret-color:CanvasText; + z-index:0; +} + +.textLayer.highlighting{ + touch-action:none; + } + +.textLayer span, .textLayer br{ + color:transparent; + position:absolute; + white-space:pre; + cursor:text; + transform-origin:0% 0%; + } + +.textLayer > :not(.markedContent), + .textLayer .markedContent span:not(.markedContent){ + z-index:1; + } + +.textLayer span.markedContent{ + top:0; + height:0; + } + +.textLayer span[role="img"]{ + -webkit-user-select:none; + -moz-user-select:none; + user-select:none; + cursor:default; + } + +.textLayer .highlight{ + --highlight-bg-color:rgba(180, 0, 170, 0.25); + --highlight-selected-bg-color:rgba(0, 100, 0, 0.25); + --highlight-backdrop-filter:none; + --highlight-selected-backdrop-filter:none; + + margin:-1px; + padding:1px; + background-color:rgba(180, 0, 170, 0.25); + background-color:var(--highlight-bg-color); + -webkit-backdrop-filter:none; + backdrop-filter:none; + -webkit-backdrop-filter:var(--highlight-backdrop-filter); + backdrop-filter:var(--highlight-backdrop-filter); + border-radius:4px; + } + +@media screen and (forced-colors: active){ + +.textLayer .highlight{ + --highlight-bg-color:transparent; + --highlight-selected-bg-color:transparent; + --highlight-backdrop-filter:var(--hcm-highlight-filter); + --highlight-selected-backdrop-filter:var( + --hcm-highlight-selected-filter + ); + } + } + +.textLayer .highlight.appended{ + position:static; + position:initial; + } + +.textLayer .highlight.begin{ + border-radius:4px 0 0 4px; + } + +.textLayer .highlight.end{ + border-radius:0 4px 4px 0; + } + +.textLayer .highlight.middle{ + border-radius:0; + } + +.textLayer .highlight.selected{ + background-color:var(--highlight-selected-bg-color); + -webkit-backdrop-filter:var(--highlight-selected-backdrop-filter); + backdrop-filter:var(--highlight-selected-backdrop-filter); + } + +.textLayer ::-moz-selection{ + background:rgba(0, 0, 255, 0.25); + } + +.textLayer ::selection{ + background:rgba(0, 0, 255, 0.25); + } + +.textLayer br::-moz-selection{ + background:transparent; + } + +.textLayer br::selection{ + background:transparent; + } + +.textLayer .endOfContent{ + display:block; + position:absolute; + top:100%; + right:0; + bottom:0; + left:0; + z-index:0; + cursor:default; + -webkit-user-select:none; + -moz-user-select:none; + user-select:none; + } + +.textLayer.selecting .endOfContent{ + top:0; + } + +.annotationLayer{ + --csstools-color-scheme--dark:; + color-scheme:only light; + + --annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,"); + --input-focus-border-color:Highlight; + --input-focus-outline:1px solid Canvas; + --input-unfocused-border-color:transparent; + --input-disabled-border-color:transparent; + --input-hover-border-color:black; + --link-outline:none; + + position:absolute; + top:0; + left:0; + pointer-events:none; + transform-origin:0 0; +} + +@media screen and (forced-colors: active){ + +.annotationLayer{ + --input-focus-border-color:CanvasText; + --input-unfocused-border-color:ActiveText; + --input-disabled-border-color:GrayText; + --input-hover-border-color:Highlight; + --link-outline:1.5px solid LinkText; +} + + .annotationLayer .textWidgetAnnotation input:required{ + outline:1.5px solid selectedItem; + } + + .annotationLayer .textWidgetAnnotation textarea:required{ + outline:1.5px solid selectedItem; + } + + .annotationLayer .buttonWidgetAnnotation.checkBox input:required{ + outline:1.5px solid selectedItem; + } + + .annotationLayer .buttonWidgetAnnotation.radioButton input:required{ + outline:1.5px solid selectedItem; + } + + .annotationLayer .choiceWidgetAnnotation select:required{ + outline:1.5px solid selectedItem; + } + + .annotationLayer .linkAnnotation{ + outline:var(--link-outline); + } + + .annotationLayer .linkAnnotation:hover{ + -webkit-backdrop-filter:var(--hcm-highlight-filter); + backdrop-filter:var(--hcm-highlight-filter); + } + + .annotationLayer .linkAnnotation > a:hover{ + opacity:0 !important; + background:none !important; + box-shadow:none; + } + + .annotationLayer .popupAnnotation .popup{ + outline:calc(1.5px * var(--total-scale-factor)) solid CanvasText !important; + background-color:ButtonFace !important; + color:ButtonText !important; + } + + .annotationLayer .highlightArea:hover::after{ + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + -webkit-backdrop-filter:var(--hcm-highlight-filter); + backdrop-filter:var(--hcm-highlight-filter); + content:""; + pointer-events:none; + } + + .annotationLayer .popupAnnotation.focused .popup{ + outline:calc(3px * var(--total-scale-factor)) solid Highlight !important; + } + } + +.annotationLayer[data-main-rotation="90"] .norotate{ + transform:rotate(270deg) translateX(-100%); + } + +.annotationLayer[data-main-rotation="180"] .norotate{ + transform:rotate(180deg) translate(-100%, -100%); + } + +.annotationLayer[data-main-rotation="270"] .norotate{ + transform:rotate(90deg) translateY(-100%); + } + +.annotationLayer.disabled section, + .annotationLayer.disabled .popup{ + pointer-events:none; + } + +.annotationLayer .annotationContent{ + position:absolute; + width:100%; + height:100%; + pointer-events:none; + } + +.annotationLayer .annotationContent.freetext{ + background:transparent; + border:none; + top:0; + right:0; + bottom:0; + left:0; + overflow:visible; + white-space:nowrap; + font:10px sans-serif; + line-height:1.35; + } + +.annotationLayer section{ + position:absolute; + text-align:left; + text-align:initial; + pointer-events:auto; + box-sizing:border-box; + transform-origin:0 0; + -webkit-user-select:none; + -moz-user-select:none; + user-select:none; + } + +.annotationLayer section:has(div.annotationContent) canvas.annotationContent{ + display:none; + } + +.textLayer.selecting ~ .annotationLayer section{ + pointer-events:none; + } + +.annotationLayer .linkAnnotation:not(.does-not-exist) > a, .annotationLayer .buttonWidgetAnnotation.pushButton > a{ + position:absolute; + font-size:1em; + top:0; + left:0; + width:100%; + height:100%; + } + +.annotationLayer .linkAnnotation:not(.does-not-exist):not(.hasBorder) + > a:hover, .annotationLayer .buttonWidgetAnnotation.pushButton:not(.hasBorder) + > a:hover{ + opacity:0.2; + background-color:rgb(255, 255, 0); + box-shadow:0 2px 10px rgb(255, 255, 0); + } + +.annotationLayer .linkAnnotation.hasBorder:hover{ + background-color:rgba(255, 255, 0, 0.2); + } + +.annotationLayer .hasBorder{ + background-size:100% 100%; + } + +.annotationLayer .textAnnotation img{ + position:absolute; + cursor:pointer; + width:100%; + height:100%; + top:0; + left:0; + } + +.annotationLayer .textWidgetAnnotation input, .annotationLayer .textWidgetAnnotation textarea, .annotationLayer .choiceWidgetAnnotation select, .annotationLayer .buttonWidgetAnnotation.checkBox input, .annotationLayer .buttonWidgetAnnotation.radioButton input{ + background-image:var(--annotation-unfocused-field-background); + border:2px solid var(--input-unfocused-border-color); + box-sizing:border-box; + font:calc(9px * var(--total-scale-factor)) sans-serif; + height:100%; + margin:0; + vertical-align:top; + width:100%; + } + +.annotationLayer .textWidgetAnnotation input:required{ + outline:1.5px solid red; + } + +.annotationLayer .textWidgetAnnotation textarea:required{ + outline:1.5px solid red; + } + +.annotationLayer .buttonWidgetAnnotation.checkBox input:required{ + outline:1.5px solid red; + } + +.annotationLayer .buttonWidgetAnnotation.radioButton input:required{ + outline:1.5px solid red; + } + +.annotationLayer .choiceWidgetAnnotation select:required{ + outline:1.5px solid red; + } + +.annotationLayer .choiceWidgetAnnotation select option{ + padding:0; + } + +.annotationLayer .buttonWidgetAnnotation.radioButton input{ + border-radius:50%; + } + +.annotationLayer .textWidgetAnnotation textarea{ + resize:none; + } + +.annotationLayer .textWidgetAnnotation input[disabled], .annotationLayer .textWidgetAnnotation textarea[disabled], .annotationLayer .choiceWidgetAnnotation select[disabled], .annotationLayer .buttonWidgetAnnotation.checkBox input[disabled], .annotationLayer .buttonWidgetAnnotation.radioButton input[disabled]{ + background:none; + border:2px solid var(--input-disabled-border-color); + cursor:not-allowed; + } + +.annotationLayer .textWidgetAnnotation input:hover, .annotationLayer .textWidgetAnnotation textarea:hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation.checkBox input:hover, .annotationLayer .buttonWidgetAnnotation.radioButton input:hover{ + border:2px solid var(--input-hover-border-color); + } + +.annotationLayer .textWidgetAnnotation input:hover, .annotationLayer .textWidgetAnnotation textarea:hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation.checkBox input:hover{ + border-radius:2px; + } + +.annotationLayer .textWidgetAnnotation input:focus, .annotationLayer .textWidgetAnnotation textarea:focus, .annotationLayer .choiceWidgetAnnotation select:focus{ + background:none; + border:2px solid var(--input-focus-border-color); + border-radius:2px; + outline:var(--input-focus-outline); + } + +.annotationLayer .buttonWidgetAnnotation.checkBox :focus, .annotationLayer .buttonWidgetAnnotation.radioButton :focus{ + background-image:none; + background-color:transparent; + } + +.annotationLayer .buttonWidgetAnnotation.checkBox :focus{ + border:2px solid var(--input-focus-border-color); + border-radius:2px; + outline:var(--input-focus-outline); + } + +.annotationLayer .buttonWidgetAnnotation.radioButton :focus{ + border:2px solid var(--input-focus-border-color); + outline:var(--input-focus-outline); + } + +.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before, + .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after, + .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{ + background-color:CanvasText; + content:""; + display:block; + position:absolute; + } + +.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before, + .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{ + height:80%; + left:45%; + width:1px; + } + +.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{ + transform:rotate(45deg); + } + +.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{ + transform:rotate(-45deg); + } + +.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{ + border-radius:50%; + height:50%; + left:25%; + top:25%; + width:50%; + } + +.annotationLayer .textWidgetAnnotation input.comb{ + font-family:monospace; + padding-left:2px; + padding-right:0; + } + +.annotationLayer .textWidgetAnnotation input.comb:focus{ + width:103%; + } + +.annotationLayer .buttonWidgetAnnotation.checkBox input, .annotationLayer .buttonWidgetAnnotation.radioButton input{ + -webkit-appearance:none; + -moz-appearance:none; + appearance:none; + } + +.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{ + height:100%; + width:100%; + } + +/* @obsidian */ + +.annotationLayer .richText > *{ + white-space:pre-wrap; + /* @obsidian */ + } + +.annotationLayer .popupTriggerArea{ + cursor:pointer; + } + +.annotationLayer section svg{ + position:absolute; + width:100%; + height:100%; + top:0; + left:0; + } + +.annotationLayer .annotationTextContent{ + position:absolute; + width:100%; + height:100%; + opacity:0; + color:transparent; + -webkit-user-select:none; + -moz-user-select:none; + user-select:none; + pointer-events:none; + } + +.annotationLayer .annotationTextContent span{ + width:100%; + display:inline-block; + } + +.annotationLayer svg.quadrilateralsContainer{ + contain:strict; + width:0; + height:0; + position:absolute; + top:0; + left:0; + z-index:-1; + } + +:root{ + --xfa-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,"); + --xfa-focus-outline:auto; +} + +@media screen and (forced-colors: active){ + :root{ + --xfa-focus-outline:2px solid CanvasText; + } + .xfaLayer *:required{ + outline:1.5px solid selectedItem; + } +} + +.xfaLayer{ + --csstools-color-scheme--dark:; + color-scheme:only light; + + background-color:transparent; +} + +.xfaLayer .highlight{ + margin:-1px; + padding:1px; + background-color:rgb(239, 203, 237); + border-radius:4px; +} + +.xfaLayer .highlight.appended{ + position:static; + position:initial; +} + +.xfaLayer .highlight.begin{ + border-radius:4px 0 0 4px; +} + +.xfaLayer .highlight.end{ + border-radius:0 4px 4px 0; +} + +.xfaLayer .highlight.middle{ + border-radius:0; +} + +.xfaLayer .highlight.selected{ + background-color:rgb(203, 223, 203); +} + +.xfaPage{ + overflow:hidden; + position:relative; +} + +.xfaContentarea{ + position:absolute; +} + +.xfaPrintOnly{ + display:none; +} + +.xfaLayer{ + position:absolute; + text-align:left; + text-align:initial; + top:0; + left:0; + transform-origin:0 0; + line-height:1.2; +} + +.xfaLayer *{ + color:inherit; + font:inherit; + font-style:inherit; + font-weight:inherit; + font-feature-settings:inherit; + font-kerning:inherit; + letter-spacing:-0.01px; + text-align:inherit; + text-decoration:inherit; + box-sizing:border-box; + background-color:transparent; + padding:0; + margin:0; + pointer-events:auto; + line-height:inherit; +} + +.xfaLayer *:required{ + outline:1.5px solid red; +} + +.xfaLayer div, +.xfaLayer svg, +.xfaLayer svg *{ + pointer-events:none; +} + +.xfaLayer a{ + color:blue; +} + +.xfaRich li{ + margin-left:3em; +} + +.xfaFont{ + color:black; + font-weight:normal; + font-feature-settings:"kern" off; + font-kerning:none; + font-size:10px; + font-style:normal; + letter-spacing:0; + -webkit-text-decoration:none; + text-decoration:none; + vertical-align:0; +} + +.xfaCaption{ + overflow:hidden; + flex:0 0 auto; +} + +.xfaCaptionForCheckButton{ + overflow:hidden; + flex:1 1 auto; +} + +.xfaLabel{ + height:100%; + width:100%; +} + +.xfaLeft{ + display:flex; + flex-direction:row; + align-items:center; +} + +.xfaRight{ + display:flex; + flex-direction:row-reverse; + align-items:center; +} + +.xfaLeft > .xfaCaption, .xfaLeft > .xfaCaptionForCheckButton, .xfaRight > .xfaCaption, .xfaRight > .xfaCaptionForCheckButton{ + max-height:100%; +} + +.xfaTop{ + display:flex; + flex-direction:column; + align-items:flex-start; +} + +.xfaBottom{ + display:flex; + flex-direction:column-reverse; + align-items:flex-start; +} + +.xfaTop > .xfaCaption, .xfaTop > .xfaCaptionForCheckButton, .xfaBottom > .xfaCaption, .xfaBottom > .xfaCaptionForCheckButton{ + width:100%; +} + +.xfaBorder{ + background-color:transparent; + position:absolute; + pointer-events:none; +} + +.xfaWrapped{ + width:100%; + height:100%; +} + +.xfaTextfield:focus, .xfaSelect:focus{ + background-image:none; + background-color:transparent; + outline:auto; + outline:var(--xfa-focus-outline); + outline-offset:-1px; +} + +.xfaCheckbox:focus, .xfaRadio:focus{ + outline:auto; + outline:var(--xfa-focus-outline); +} + +.xfaTextfield, +.xfaSelect{ + height:100%; + width:100%; + flex:1 1 auto; + border:none; + resize:none; + background-image:url("data:image/svg+xml;charset=UTF-8,"); + background-image:var(--xfa-unfocused-field-background); +} + +.xfaSelect{ + padding-left:2px; + padding-right:2px; +} + +.xfaTop > .xfaTextfield, .xfaTop > .xfaSelect, .xfaBottom > .xfaTextfield, .xfaBottom > .xfaSelect{ + flex:0 1 auto; +} + +.xfaButton{ + cursor:pointer; + width:100%; + height:100%; + border:none; + text-align:center; +} + +.xfaLink{ + width:100%; + height:100%; + position:absolute; + top:0; + left:0; +} + +.xfaCheckbox, +.xfaRadio{ + width:100%; + height:100%; + flex:0 0 auto; + border:none; +} + +.xfaRich{ + white-space:pre-wrap; + width:100%; + height:100%; +} + +.xfaImage{ + -o-object-position:left top; + object-position:left top; + -o-object-fit:contain; + object-fit:contain; + width:100%; + height:100%; +} + +.xfaLrTb, +.xfaRlTb, +.xfaTb{ + display:flex; + flex-direction:column; + align-items:stretch; +} + +.xfaLr{ + display:flex; + flex-direction:row; + align-items:stretch; +} + +.xfaRl{ + display:flex; + flex-direction:row-reverse; + align-items:stretch; +} + +.xfaTb > div{ + justify-content:left; +} + +.xfaPosition{ + position:relative; +} + +.xfaArea{ + position:relative; +} + +.xfaValignMiddle{ + display:flex; + align-items:center; +} + +.xfaTable{ + display:flex; + flex-direction:column; + align-items:stretch; +} + +.xfaTable .xfaRow{ + display:flex; + flex-direction:row; + align-items:stretch; +} + +.xfaTable .xfaRlRow{ + display:flex; + flex-direction:row-reverse; + align-items:stretch; + flex:1; +} + +.xfaTable .xfaRlRow > div{ + flex:1; +} + +.xfaNonInteractive input, .xfaNonInteractive textarea, .xfaDisabled input, .xfaDisabled textarea, .xfaReadOnly input, .xfaReadOnly textarea{ + background:transparent none repeat 0 0 / auto auto padding-box border-box scroll; + background:initial; +} + +@media print{ + .xfaTextfield, + .xfaSelect{ + background:transparent; + } + + .xfaSelect{ + -webkit-appearance:none; + -moz-appearance:none; + appearance:none; + text-indent:1px; + text-overflow:""; + } +} +/* @obsidian TODO: bring this in when we enable annotation editing */ + +:root{ + --csstools-color-scheme--dark:; + color-scheme:light dark; + + --viewer-container-height:0; + --pdfViewer-padding-bottom:0; + --page-margin:1px auto -8px; + --page-border:9px solid transparent; + --spreadHorizontalWrapped-margin-LR:-3.5px; + --loading-icon-delay:400ms; + --csstools-light-dark-toggle--23:var(--csstools-color-scheme--dark) #0060df; + --focus-ring-color:var(--csstools-light-dark-toggle--23, #0df); + --focus-ring-outline:2px solid var(--focus-ring-color); +} + +@supports (color: light-dark(red, red)) { +:root{ + --focus-ring-color:light-dark(#0060df, #0df); +} +} + +:root * { + --csstools-light-dark-toggle--23:var(--csstools-color-scheme--dark) #0060df; + --focus-ring-color:var(--csstools-light-dark-toggle--23, #0df); +} + +@media (prefers-color-scheme: dark) { + +:root{ + --csstools-color-scheme--dark:initial; +} +} + +@media screen and (forced-colors: active){ + +:root{ + --pdfViewer-padding-bottom:9px; + --page-margin:8px auto -1px; + --page-border:1px solid CanvasText; + --spreadHorizontalWrapped-margin-LR:3.5px; + --focus-ring-color:CanvasText; +} + } + +[data-main-rotation="90"]{ + transform:rotate(90deg) translateY(-100%); +} +[data-main-rotation="180"]{ + transform:rotate(180deg) translate(-100%, -100%); +} +[data-main-rotation="270"]{ + transform:rotate(270deg) translateX(-100%); +} + +/* @obsidian this was changed from an id to a class to support multiple instances */ +.hiddenCopyElement, +.hiddenCanvasElement{ + position:absolute; + top:0; + left:0; + width:0; + height:0; + display:none; +} + +.pdfViewer{ + --scale-factor:1; + --page-bg-color:unset; + + padding-bottom:0; + + padding-bottom:var(--pdfViewer-padding-bottom); + + --hcm-highlight-filter:none; + --hcm-highlight-selected-filter:none; +} + +@media screen and (forced-colors: active){ + +.pdfViewer{ + --hcm-highlight-filter:invert(100%); +} + } + +.pdfViewer.copyAll{ + cursor:wait; + } + +.pdfViewer .canvasWrapper{ + overflow:hidden; + width:100%; + height:100%; + } + +.pdfViewer .canvasWrapper canvas{ + position:absolute; + top:0; + left:0; + margin:0; + display:block; + width:100%; + height:100%; + contain:content; + } + +.pdfViewer .canvasWrapper canvas .structTree{ + contain:strict; + } + +.pdfViewer .page{ + --user-unit:1; + --total-scale-factor:calc(var(--scale-factor) * var(--user-unit)); + --scale-round-x:1px; + --scale-round-y:1px; + + direction:ltr; + width:816px; + height:1056px; + margin:1px auto -8px; + margin:var(--page-margin); + position:relative; + overflow:visible; + border:9px solid transparent; + border:var(--page-border); + background-clip:content-box; + background-color:rgb(255, 255, 255); + background-color:var(--page-bg-color, rgb(255, 255, 255)); +} + +.pdfViewer .dummyPage{ + position:relative; + width:0; + height:0; + height:var(--viewer-container-height); +} + +.pdfViewer.noUserSelect{ + -webkit-user-select:none; + -moz-user-select:none; + user-select:none; +} + +.pdfViewer.removePageBorders .page{ + margin:0 auto 10px; + border:none; +} + +.pdfViewer.scrollHorizontal, .pdfViewer.scrollWrapped, .spread{ + margin-left:3.5px; + margin-right:3.5px; + text-align:center; +} + +.pdfViewer.scrollHorizontal, +.spread{ + white-space:nowrap; +} + +.pdfViewer.removePageBorders, +.pdfViewer.scrollHorizontal .spread, +.pdfViewer.scrollWrapped .spread{ + margin-left:0; + margin-right:0; +} + +.spread .page, .spread .dummyPage, .pdfViewer.scrollHorizontal .page, .pdfViewer.scrollHorizontal .spread, .pdfViewer.scrollWrapped .page, .pdfViewer.scrollWrapped .spread{ + display:inline-block; + vertical-align:middle; +} + +.spread .page, +.pdfViewer.scrollHorizontal .page, +.pdfViewer.scrollWrapped .page{ + margin-left:-3.5px; + margin-right:-3.5px; + margin-left:var(--spreadHorizontalWrapped-margin-LR); + margin-right:var(--spreadHorizontalWrapped-margin-LR); +} + +.pdfViewer.removePageBorders .spread .page, +.pdfViewer.removePageBorders.scrollHorizontal .page, +.pdfViewer.removePageBorders.scrollWrapped .page{ + margin-left:5px; + margin-right:5px; +} + +.pdfViewer .page.loadingIcon::after{ + position:absolute; + top:0; + left:0; + content:""; + width:100%; + height:100%; + display:none; + transition-property:display; + transition-delay:400ms; + transition-delay:var(--loading-icon-delay); + z-index:5; + contain:strict; +} + +.pdfViewer .page.loading::after{ + display:block; +} + +.pdfViewer .page:not(.loading)::after{ + transition-property:none; + display:none; +} + +.pdfPresentationMode .pdfViewer{ + padding-bottom:0; +} + +.pdfPresentationMode .spread{ + margin:0; +} + +.pdfPresentationMode .pdfViewer .page{ + margin:0 auto; + border:2px solid transparent; +} + +/* Obsidian theme variables */ +/* ------------------------ */ +body { + /* 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); + /* Bases */ + --bases-header-border-width: 0 0 1px 0; + --bases-header-height: 40px; + --bases-header-padding-start: 2px; + --bases-header-padding-end: 2px; + --bases-toolbar-label-display: block; + --bases-toolbar-badge-display: none; + --bases-embed-border-width: 0px; + --bases-embed-border-color: var(--background-modifier-border); + --bases-embed-border-radius: var(--radius-s); + --bases-filter-menu-width: 520px; + --bases-table-container-border-width: 1px; + --bases-table-container-border-radius: var(--radius-s); + --bases-table-header-weight: var(--font-weight); + --bases-table-header-color: var(--text-muted); + --bases-table-header-icon-display: flex; + --bases-table-header-background: var(--background-primary); + --bases-table-header-background-hover: var(--background-modifier-hover); + --bases-table-header-sort-mask: linear-gradient(to left, transparent var(--size-4-6), black var(--size-4-6)); + --bases-table-border-color: var(--table-border-color); + --bases-table-column-border-width: 1px; + --bases-table-row-border-width: 1px; + --bases-table-row-background-hover: var(--table-row-background-hover); + --bases-table-row-height: 30px; + --bases-table-text-size: var(--font-smaller); + --bases-table-column-max-width: 300; + --bases-table-column-min-width: 40; + --bases-table-cell-radius-active: 2px; + --bases-table-cell-shadow-active: 0 0 0 2px var(--interactive-accent); + --bases-table-cell-background-active: var(--background-primary); + --bases-table-cell-background-disabled: var(--background-primary-alt); + --bases-cards-container-background: transparent; + --bases-cards-background: var(--background-primary); + --bases-cards-cover-background: var(--background-primary-alt); + --bases-cards-scale: 1; + --bases-cards-group-padding: var(--size-4-3); + --bases-cards-line-height: 24px; + --bases-cards-border-width: 1px; + --bases-cards-shadow: 0 0 0 1px var(--background-modifier-border); + --bases-cards-shadow-hover: 0 0 0 1px var(--background-modifier-border-hover); + --bases-cards-text-size: var(--font-smaller); + /* Blockquotes */ + --blockquote-border-thickness: 2px; + --blockquote-border-color: var(--interactive-accent); + --blockquote-font-style: normal; + --blockquote-color: inherit; + --blockquote-background-color: transparent; + /* Bold */ + --bold-modifier: 200; + --bold-color: inherit; + --bold-weight: calc(var(--font-weight) + var(--bold-modifier)); + /* Borders */ + --border-width: 1px; + /* Buttons */ + --button-radius: var(--input-radius); + /* Callouts */ + --callout-border-width: 0px; + --callout-border-opacity: 0.25; + --callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6); + --callout-radius: var(--radius-s); + --callout-blend-mode: var(--highlight-mix-blend-mode); + --callout-title-color: inherit; + --callout-title-padding: 0; + --callout-title-size: inherit; + --callout-title-weight: calc(var(--font-weight) + var(--bold-modifier)); + --callout-content-padding: 0; + --callout-content-background: transparent; + --callout-bug: var(--color-red-rgb); + --callout-default: var(--color-blue-rgb); + --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-orange-rgb); + --callout-success: var(--color-green-rgb); + --callout-summary: var(--color-cyan-rgb); + --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-background: var(--background-primary); + --canvas-card-label-color: var(--text-faint); + --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); + --canvas-dot-pattern: var(--color-base-30); + /* Caret (text entry cursor) */ + --caret-color: var(--text-normal); + /* Checkboxes */ + --checkbox-radius: var(--radius-s); + --checkbox-size: var(--font-text-size); + --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); + --checkbox-margin-inline-start: 0.85em; + --checklist-done-decoration: line-through; + --checklist-done-color: var(--text-muted); + /* Code */ + --code-white-space: pre-wrap; + --code-border-width: 0px; + --code-border-color: var(--background-modifier-border); + --code-bracket-background: var(--background-modifier-hover); + --code-radius: var(--radius-s); + --code-size: var(--font-smaller); + --code-background: var(--background-primary-alt); + --code-normal: var(--text-normal); + --code-comment: var(--text-faint); + --code-function: var(--color-yellow); + --code-important: var(--color-orange); + --code-keyword: var(--color-pink); + --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; + /* 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: 1px; + --divider-width-hover: 3px; + --divider-vertical-height: calc(100% - var(--header-height)); + /* Dragging */ + --drag-ghost-background: rgba(0, 0, 0, 0.85); + --drag-ghost-text-color: #fff; + /* Dropdowns */ + --dropdown-background-blend-mode: hard-light; + --dropdown-background-position: right 0.5em top 50%, 0 0; + --dropdown-background-size: 1em auto, 100%; + --dropdown-padding: 0 1.9em 0 0.8em; + /* Embeds */ + --embed-max-height: 4000px; + --embed-canvas-max-height: 400px; + --embed-background: inherit; + --embed-border-start: 2px solid var(--interactive-accent); + --embed-border-end: 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: 700px; + --file-folding-offset: 24px; + --file-margins: var(--size-4-8); + --file-header-font: var(--font-interface); + --file-header-font-size: var(--font-ui-small); + --file-header-font-weight: 400; + --file-header-border: var(--border-width) solid transparent; + --file-header-justify: center; + /* Relative font sizes */ + --font-smallest: 0.8em; + --font-smaller: 0.875em; + --font-small: 0.933em; + /* Flair */ + --flair-background: var(--interactive-normal); + --flair-color: var(--text-normal); + /* UI font sizes */ + --font-ui-smaller: 12px; + --font-ui-small: 13px; + --font-ui-medium: 15px; + --font-ui-large: 20px; + /* Font weights */ + --font-weight: var(--font-normal); + --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-divider-color-active: var(--metadata-divider-color-focus); + --footnote-divider-color: var(--metadata-divider-color); + --footnote-divider-width: 1px; + --footnote-gap: var(--size-4-1); + --footnote-id-color-no-occurrences: var(--text-faint); + --footnote-id-color: var(--text-muted); + --footnote-id-delimiter: "."; + --footnote-input-background-active: var(--metadata-input-background-active); + --footnote-input-background: var(--metadata-input-background); + --footnote-line-height: var(--line-height-normal); + --footnote-padding-block: var(--size-2-3); + --footnote-padding-inline: var(--size-2-3); + --footnote-radius: var(--radius-s); + --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); + --heading-spacing: calc(var(--p-spacing) * 2.5); + --h1-color: inherit; + --h2-color: inherit; + --h3-color: inherit; + --h4-color: inherit; + --h5-color: inherit; + --h6-color: inherit; + --h1-font: inherit; + --h2-font: inherit; + --h3-font: inherit; + --h4-font: inherit; + --h5-font: inherit; + --h6-font: 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.802em; + --h2-size: 1.602em; + --h3-size: 1.424em; + --h4-size: 1.266em; + --h5-size: 1.125em; + --h6-size: 1em; + --h1-style: normal; + --h2-style: normal; + --h3-style: normal; + --h4-style: normal; + --h5-style: normal; + --h6-style: normal; + --h1-variant: normal; + --h2-variant: normal; + --h3-variant: normal; + --h4-variant: normal; + --h5-variant: normal; + --h6-variant: normal; + --h1-weight: 700; + --h2-weight: 600; + --h3-weight: 600; + --h4-weight: 600; + --h5-weight: 600; + --h6-weight: 600; + /* View header */ + --header-height: 40px; + /* Horizontal rules */ + --hr-color: var(--background-modifier-border); + --hr-thickness: 2px; + /* 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.85; + --icon-opacity-hover: 1; + --icon-opacity-active: 1; + --clickable-icon-radius: var(--radius-s); + /* Indent size */ + --indent-size: 4; + --indent-unit: 0.5625em; + /* Indentation guide */ + --indentation-guide-width: 1px; + --indentation-guide-width-active: 1px; + --indentation-guide-color: rgba(var(--mono-rgb-100), 0.12); + --indentation-guide-color-active: rgba(var(--mono-rgb-100), 0.3); + --indentation-guide-editing-indent: 0.85em; + --indentation-guide-reading-indent: -0.85em; + --indentation-guide-source-indent: 0.25em; + /* 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); + --inline-title-margin-bottom: 0.5em; + /* Inputs */ + --input-height: 30px; + --input-padding: var(--size-4-1) var(--size-4-2); + --input-radius: 5px; + --input-font-weight: var(--font-normal); + --input-border-width: 1px; + --input-border-width-focus: 2px; + --input-placeholder-color: var(--text-faint); + --input-date-separator: var(--text-faint); + /* Italic */ + --italic-color: inherit; + --italic-weight: 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-normal: 1.5; + --line-height-tight: 1.3; + /* Links */ + --link-color: var(--text-accent); + --link-color-hover: var(--text-accent-hover); + --link-decoration: underline; + --link-decoration-hover: underline; + --link-decoration-thickness: auto; + --link-weight: var(--font-weight); + --link-external-color: var(--text-accent); + --link-external-color-hover: var(--text-accent-hover); + --link-external-decoration: underline; + --link-external-decoration-hover: underline; + --link-external-filter: none; + --link-unresolved-color: var(--text-accent); + --link-unresolved-opacity: 0.7; + --link-unresolved-filter: none; + --link-unresolved-decoration-style: solid; + --link-unresolved-decoration-color: hsla(var(--interactive-accent-hsl), 0.3); + /* Lists */ + --list-indent: calc(var(--indent-unit) * var(--indent-size)); + --list-indent-editing: 0.75em; + --list-indent-source: 0; + --list-spacing: 0.075em; + --list-marker-color: var(--text-faint); + --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.3em; + --list-bullet-transform: none; + --list-numbered-style: decimal; + --list-bullet-end-padding: 1.3rem; + /* 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); + --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.15); + --nav-item-padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-6); + --nav-item-parent-padding: var(--nav-item-padding); + --nav-item-children-padding-start: var(--size-2-2); + --nav-item-children-margin-start: var(--size-4-3); + --nav-item-weight: inherit; + --nav-item-weight-hover: inherit; + --nav-item-weight-active: inherit; + --nav-item-white-space: pre; + --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); + --nav-heading-color: var(--text-normal); + --nav-heading-color-hover: var(--text-normal); + --nav-heading-color-collapsed: var(--text-faint); + --nav-heading-color-collapsed-hover: var(--text-muted); + --nav-heading-weight: var(--font-medium); + --nav-heading-weight-hover: var(--font-medium); + /* Menus */ + --menu-padding: var(--size-2-3); + --menu-shadow: var(--shadow-s); + --menu-radius: var(--radius-m); + --menu-background: var(--background-secondary); + --menu-border-color: var(--background-modifier-border-hover); + --menu-border-width: 1px; + --menu-backdrop-filter: none; + /* Metadata */ + --metadata-background: transparent; + --metadata-display-reading: block; + --metadata-display-editing: block; + --metadata-max-width: none; + --metadata-padding: var(--size-4-2) 0; + --metadata-border-color: var(--background-modifier-border); + --metadata-border-radius: 0; + --metadata-border-width: 0; + --metadata-divider-color: var(--background-modifier-border); + --metadata-divider-color-hover: transparent; + --metadata-divider-color-focus: transparent; + --metadata-divider-width: 0; + --metadata-gap: 3px; + --metadata-property-padding: 0; + --metadata-property-radius: 6px; + --metadata-property-radius-hover: 6px; + --metadata-property-radius-focus: 6px; + --metadata-property-background: transparent; + --metadata-property-background-hover: transparent; + --metadata-property-background-active: var(--background-modifier-hover); + --metadata-property-box-shadow-hover: 0 0 0 1px var(--background-modifier-border-hover); + --metadata-property-box-shadow-focus: 0 0 0 2px var(--background-modifier-border-focus); + --metadata-label-background: transparent; + --metadata-label-background-hover: transparent; + --metadata-label-background-active: var(--background-modifier-hover); + --metadata-label-font: var(--font-interface); + --metadata-label-font-size: var(--font-smaller); + --metadata-label-font-weight: inherit; + --metadata-label-text-color: var(--text-muted); + --metadata-label-text-color-hover: var(--text-muted); + --metadata-label-width: 9em; + --metadata-input-height: calc(var(--font-text-size) * 1.75); + --metadata-input-text-color: var(--text-normal); + --metadata-input-font: var(--font-interface); + --metadata-input-font-size: var(--font-smaller); + --metadata-input-background: transparent; + --metadata-input-background-hover: transparent; + --metadata-input-background-active: var(--background-modifier-hover); + --metadata-input-longtext-lines: 3; + --metadata-sidebar-label-font-size: var(--font-ui-small); + --metadata-sidebar-input-font-size: var(--font-ui-small); + /* 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; + /* Multi-select pills */ + --pill-color: var(--text-muted); + --pill-color-hover: var(--text-normal); + --pill-color-remove: var(--text-faint); + --pill-color-remove-hover: var(--text-accent); + --pill-decoration: none; + --pill-decoration-hover: none; + --pill-background: transparent; + --pill-background-hover: transparent; + --pill-border-color: var(--background-modifier-border); + --pill-border-color-hover: var(--background-modifier-border-hover); + --pill-border-width: var(--border-width); + --pill-padding-x: 0.65em; + --pill-padding-y: 0.25em; + --pill-radius: 2em; + --pill-weight: inherit; + /* Paragraphs */ + --p-spacing: 1rem; + --p-spacing-empty: 0rem; + /* PDF view */ + --pdf-background: var(--background-primary); + --pdf-page-background: var(--background-primary); + --pdf-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.1); + --pdf-spread-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); + --pdf-sidebar-background: var(--background-primary); + --pdf-thumbnail-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.2); + /* Popovers - file previews */ + --popover-width: 450px; + --popover-height: 400px; + --popover-max-height: 95vh; + --popover-pdf-width: 450px; + --popover-pdf-height: 400px; + --popover-font-size: var(--font-text-size); + /* Prompts - e.g. quick switcher, command palette */ + --prompt-input-height: 40px; + --prompt-width: 700px; + --prompt-max-width: 80vw; + --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: 4px; + --radius-m: 8px; + --radius-l: 12px; + --radius-xl: 16px; + /* Ribbon */ + --ribbon-background: var(--background-secondary); + --ribbon-background-collapsed: var(--background-primary); + --ribbon-width: 44px; + --ribbon-padding: var(--size-4-2) var(--size-4-1) var(--size-4-3); + /* Scrollbars */ + --scrollbar-width: 12px; + --scrollbar-height: 12px; + --scrollbar-border-width: 3px 3px 3px 2px; + --scrollbar-radius: var(--radius-l); + --scrollbar-active-thumb-bg: rgba(var(--mono-rgb-100), 0.2); + --scrollbar-bg: rgba(var(--mono-rgb-100), 0.05); + --scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.1); + /* 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-10: 40px; + --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) 0 0 0; + /* Sync */ + --sync-avatar-color-current-user: transparent; + --sync-avatar-color-1: var(--color-red); + --sync-avatar-color-2: var(--color-orange); + --sync-avatar-color-3: var(--color-yellow); + --sync-avatar-color-4: var(--color-green); + --sync-avatar-color-5: var(--color-cyan); + --sync-avatar-color-6: var(--color-blue); + --sync-avatar-color-7: var(--color-purple); + --sync-avatar-color-8: var(--color-pink); + /* Swatch for color inputs */ + --swatch-radius: 14px; + --swatch-height: 22px; + --swatch-width: 22px; + --swatch-shadow: inset 0 0 0 1px rgba(var(--mono-rgb-100), 0.15); + /* 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; + /* Mobile tab switcher */ + --tab-switcher-menubar-background: var(--mobile-sidebar-background); + --tab-switcher-background: var(--background-secondary); + --tab-switcher-preview-radius: var(--radius-xl); + --tab-switcher-preview-background-shadow: 0 4px 30px 2px rgba(0, 0, 0, 0.2); + --tab-switcher-preview-shadow: 0 0 0 1px rgba(var(--mono-rgb-100), 0.05); + --tab-switcher-preview-shadow-active: 0 0 0 2px var(--color-accent); + /* 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: start; + --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); + --table-white-space: break-spaces; + --table-header-background: var(--table-background); + --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(--table-text-size); + --table-header-weight: calc(var(--font-weight) + var(--bold-modifier)); + --table-header-color: var(--text-normal); + --table-line-height: var(--line-height-tight); + --table-text-size: var(--font-text-size); + --table-text-color: inherit; + --table-column-min-width: 6ch; + --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-alt-background-hover: var(--table-background); + --table-row-last-border-width: var(--table-border-width); + --table-selection: hsla(var(--color-accent-hsl), 0.1); + --table-selection-blend-mode: var(--highlight-mix-blend-mode); + --table-selection-border-color: var(--interactive-accent); + --table-selection-border-width: 2px; + --table-selection-border-radius: 4px; + --table-cell-vertical-alignment: top; + --table-drag-handle-background: transparent; + --table-drag-handle-background-active: var(--table-selection-border-color); + --table-drag-handle-color: var(--text-faint); + --table-drag-handle-color-active: var(--text-on-accent); + --table-drop-indicator-half-width: 2px; + --table-add-button-background: transparent; + --table-add-button-border-width: var(--table-border-width); + --table-add-button-border-color: var(--background-modifier-border); + /* 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.65em; + --tag-padding-y: 0.25em; + --tag-radius: 2em; + --tag-weight: inherit; + /* Window frame */ + --titlebar-background: var(--background-secondary); + --titlebar-background-focused: var(--background-secondary-alt); + --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 profile */ + --vault-profile-display: flex; + --vault-profile-actions-display: flex; + --vault-profile-font-size: var(--font-ui-small); + --vault-profile-font-weight: var(--font-medium); + --vault-profile-color: var(--text-normal); + --vault-profile-color-hover: var(--vault-profile-color); + /* Workspace */ + --workspace-background-translucent: rgba(var(--mono-rgb-0), 0.6); + /* Color mappings ------------------------ */ + /* Accent HSL values */ + --accent-h: 258; + --accent-s: 88%; + --accent-l: 66%; + /* Backgrounds */ + --background-primary: var(--color-base-00); + --background-primary-alt: var(--color-base-10); + --background-secondary: var(--color-base-20); + --background-modifier-hover: rgba(var(--mono-rgb-100), 0.067); + --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.1); + --background-modifier-border: var(--color-base-30); + --background-modifier-border-hover: var(--color-base-35); + --background-modifier-border-focus: var(--color-base-40); + --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); + /* Inputs */ + --background-modifier-form-field: var(--color-base-00); + --background-modifier-form-field-hover: var(--background-modifier-form-field); + /* Text */ + --text-normal: var(--color-base-100); + --text-muted: var(--color-base-70); + --text-faint: var(--color-base-50); + --text-on-accent: white; + --text-on-accent-inverted: black; + --text-error: var(--color-red); + --text-warning: var(--color-orange); + --text-success: var(--color-green); + --text-selection: hsla(var(--color-accent-hsl), 0.2); + --text-highlight-bg-rgb: 255, 208, 0; + --text-highlight-bg: rgba(var(--text-highlight-bg-rgb), 0.4); + --text-accent: var(--color-accent); + --text-accent-hover: var(--color-accent-2); + --interactive-normal: var(--color-base-00); + --interactive-hover: var(--color-base-10); + --interactive-accent-hsl: var(--color-accent-hsl); + --interactive-accent: var(--color-accent-1); + --interactive-accent-hover: var(--color-accent-2); +} +.theme-light, +.theme-dark { + --dropdown-background: var(--interactive-normal); + --dropdown-background-hover: var(--interactive-hover); +} +.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: 233, 49, 71; + --color-red: #e93147; + --color-orange-rgb: 236, 117, 0; + --color-orange: #ec7500; + --color-yellow-rgb: 224, 172, 0; + --color-yellow: #e0ac00; + --color-green-rgb: 8, 185, 78; + --color-green: #08b94e; + --color-cyan-rgb: 0, 191, 188; + --color-cyan: #00bfbc; + --color-blue-rgb: 8, 109, 221; + --color-blue: #086ddd; + --color-purple-rgb: 120, 82, 238; + --color-purple: #7852ee; + --color-pink-rgb: 213, 57, 132; + --color-pink: #d53984; + --color-base-00: #ffffff; + --color-base-05: #fcfcfc; + --color-base-10: #fafafa; + --color-base-20: #f6f6f6; + --color-base-25: #e3e3e3; + --color-base-30: #e0e0e0; + --color-base-35: #d4d4d4; + --color-base-40: #bdbdbd; + --color-base-50: #ababab; + --color-base-60: #707070; + --color-base-70: #5c5c5c; + --color-base-100: #222222; + --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(calc(var(--accent-h) - 1), calc(var(--accent-s) * 1.01), calc(var(--accent-l) * 1.075)); + --color-accent-2: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.15)); + --background-secondary-alt: var(--color-base-05); + --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); + --background-modifier-cover: rgba(220, 220, 220, 0.4); + --input-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 1.5px 0 rgba(0, 0, 0, 0.03), 0 1px 2px 0 rgba(0, 0, 0, 0.04), 0 0 0 0 transparent; + --input-shadow-hover: inset 0 0 0 1px rgba(0, 0, 0, 0.17), 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 1.5px 0 rgba(0, 0, 0, 0.03), 0 1px 2px 0 rgba(0, 0, 0, 0.04), 0 0 0 0 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 15px 30px rgba(0, 0, 0, 0.1); +} +.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: 251, 70, 76; + --color-red: #fb464c; + --color-orange-rgb: 233, 151, 63; + --color-orange: #e9973f; + --color-yellow-rgb: 224, 222, 113; + --color-yellow: #e0de71; + --color-green-rgb: 68, 207, 110; + --color-green: #44cf6e; + --color-cyan-rgb: 83, 223, 221; + --color-cyan: #53dfdd; + --color-blue-rgb: 2, 122, 255; + --color-blue: #027aff; + --color-purple-rgb: 168, 130, 255; + --color-purple: #a882ff; + --color-pink-rgb: 250, 153, 205; + --color-pink: #fa99cd; + --color-base-00: #1e1e1e; + --color-base-05: #212121; + --color-base-10: #242424; + --color-base-20: #262626; + --color-base-25: #2a2a2a; + --color-base-30: #363636; + --color-base-35: #3f3f3f; + --color-base-40: #555555; + --color-base-50: #666666; + --color-base-60: #999999; + --color-base-70: #b3b3b3; + --color-base-100: #dadada; + --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(calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.15)); + --color-accent-2: hsl(calc(var(--accent-h) - 5), calc(var(--accent-s) * 1.05), calc(var(--accent-l) * 1.29)); + --background-modifier-form-field: var(--color-base-25); + --background-secondary-alt: var(--color-base-30); + --interactive-normal: var(--color-base-30); + --interactive-hover: var(--color-base-35); + --text-accent: var(--color-accent-1); + --interactive-accent: var(--color-accent); + --interactive-accent-hover: var(--color-accent-1); + --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); + --background-modifier-cover: rgba(10, 10, 10, 0.4); + --text-selection: hsla(var(--interactive-accent-hsl), 0.33); + --input-shadow: inset 0 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.09), 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 1.5px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 transparent; + --input-shadow-hover: inset 0 0.5px 1px 0.5px rgba(255, 255, 255, 0.16), 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 0 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); + --pdf-shadow: 0 0 0 1px var(--background-modifier-border); + --pdf-thumbnail-shadow: 0 0 0 1px var(--background-modifier-border); +} +iframe { + color-scheme: normal; +} +@media print { + .theme-dark { + --highlight-mix-blend-mode: darken; + } +} +@font-face { + font-family: 'Avenir Next'; + font-weight: normal; + font-style: normal; + font-display: swap; + src: url(public/fonts/94f2f163d4b698242fef.otf); +} +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 200; + font-display: swap; + src: url(public/fonts/72505e6a122c6acd5471.woff2) format('woff2'); +} +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(public/fonts/2d5198822ab091ce4305.woff2) format('woff2'); +} +@font-face { + font-family: 'Inter'; + font-weight: 400; + font-style: normal; + font-display: swap; + src: url(public/fonts/c8ba52b05a9ef10f4758.woff2); +} +@font-face { + font-family: 'Inter'; + font-weight: 400; + font-style: italic; + font-display: swap; + src: url(public/fonts/cb10ffd7684cd9836a05.woff2); +} +@font-face { + font-family: 'Inter'; + font-weight: 500; + font-style: normal; + font-display: swap; + src: url(public/fonts/293fd13dbca5a3e450ef.woff2); +} +@font-face { + font-family: 'Inter'; + font-weight: 500; + font-style: italic; + font-display: swap; + src: url(public/fonts/085cb93e613ba3d40d2b.woff2); +} +@font-face { + font-family: 'Inter'; + font-weight: 600; + font-style: normal; + font-display: swap; + src: url(public/fonts/b5f0f109bc88052d4000.woff2); +} +@font-face { + font-family: 'Inter'; + font-weight: 800; + font-style: normal; + font-display: swap; + src: url(public/fonts/cbe0ae49c52c920fd563.woff2); +} +@font-face { + font-family: 'Inter'; + font-weight: 800; + font-style: italic; + font-display: swap; + src: url(public/fonts/535a6cf662596b3bd6a6.woff2); +} +@font-face { + font-family: 'Source Code Pro'; + font-weight: normal; + font-style: normal; + font-display: swap; + src: url(public/fonts/70cc7ff27245e82ad414.ttf); +} +@font-face { + font-family: 'Source Code Pro'; + font-weight: normal; + font-style: italic; + font-display: swap; + src: url(public/fonts/454577c22304619db035.ttf); +} +@font-face { + font-family: 'Source Code Pro'; + font-weight: bold; + font-style: normal; + font-display: swap; + src: url(public/fonts/52ac8f3034507f1d9e53.ttf); +} +@font-face { + font-family: 'Source Code Pro'; + font-weight: bold; + font-style: italic; + font-display: swap; + src: url(public/fonts/05b618077343fbbd92b7.ttf); +} +@font-face { + font-family: 'Flow Circular'; + font-display: swap; + src: url(public/fonts/4bb6ac751d1c5478ff3a.woff2); +} +@font-face { + font-family: '??'; + unicode-range: U+0; +} +body { + --font-default: ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Inter", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + --font-monospace-default: ui-monospace, SFMono-Regular, "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco, "Consolas", "Source Code Pro", monospace; + --font-interface-override: '??'; + --font-interface-theme: '??'; + --font-interface: var(--font-interface-override), var(--font-interface-theme), var(--default-font, '??'), var(--font-default); + --font-text-override: '??'; + --font-text-theme: '??'; + --font-text: var(--font-text-override), var(--font-text-theme), var(--font-default); + --font-print-override: '??'; + --font-print: var(--font-print-override), var(--font-text-override), var(--font-text-theme), 'Arial'; + --font-monospace-override: '??'; + --font-monospace-theme: '??'; + --font-monospace: var(--font-monospace-override), var(--font-monospace-theme), var(--font-monospace-default); + --font-text-size: 16px; + --font-mermaid: var(--font-text); +} +@media print { + html, + body { + padding-top: 0 !important; + overflow: auto !important; + height: auto !important; + contain: initial !important; + } + iframe, + .titlebar, + .app-container, + .progress-bar, + .popover, + .markdown-embed-link, + .formula-editor .cm-tooltip.cm-tooltip-autocomplete, + .suggestion-container { + display: none !important; + } + body > :not(.print) { + display: none !important; + } + .print .markdown-preview-view { + -webkit-print-color-adjust: exact; + color: initial; + height: unset !important; + } + .print .markdown-preview-view mark { + color: initial; + } + .print .markdown-preview-view .metadata-container { + display: none; + } + .print .markdown-preview-view .markdown-embed-content { + max-height: none; + overflow: visible; + } + .print .markdown-preview-view .callout-content { + display: inherit !important; + } + .print .external-link { + background: none; + padding-right: 0; + } + * { + text-shadow: none !important; + } + webview { + display: none; + } + ::-webkit-scrollbar { + display: none; + } + body { + --font-text: var(--font-print) !important; + } +} +* { + box-sizing: border-box; +} +html, +body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; + overscroll-behavior: none; +} +body { + text-rendering: optimizeLegibility; + font-family: var(--font-interface); + line-height: var(--line-height-tight); + font-size: var(--font-ui-medium); + background-color: var(--background-primary); + color: var(--text-normal); + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + overflow: hidden; + overflow: clip; + contain: strict; +} +body.is-translucent { + background-color: transparent; +} +@keyframes node-inserted { + from { + outline-color: #fff; + } + to { + outline-color: #000; + } +} +.node-insert-event { + animation-duration: 0.01s; + animation-name: node-inserted; +} +.is-flashing { + transition: color 0.25s ease, background-color 0.25s ease; + background-color: var(--text-highlight-bg) !important; + color: var(--text-normal); + mix-blend-mode: var(--highlight-mix-blend-mode); + border-radius: var(--radius-s); +} +body { + user-select: none; + -webkit-user-select: none; + caret-color: var(--caret-color); +} +body [contenteditable="true"], +body [contenteditable=""] { + user-select: text; + -webkit-user-select: text; +} +body.is-grabbing, +body.is-grabbing *:not(.workspace-leaf-resize-handle) { + cursor: -moz-grabbing !important; + cursor: -webkit-grabbing !important; + cursor: grabbing !important; +} +body.is-grabbing iframe:not(.is-controlled), +body.is-grabbing webview { + pointer-events: none; +} +.app-container { + display: flex; + height: 100%; + width: 100%; + flex-direction: column; +} +.app-container.no-transition * { + transition: none !important; +} +body:not(.is-mobile) .app-container { + position: relative; +} +.horizontal-main-container { + width: 100%; + display: flex; + overflow: hidden; + flex: 1 0 0; +} +:focus { + outline: none; +} +.is-text-garbled * { + font-family: 'Flow Circular', sans-serif !important; + line-height: 1.45em !important; +} +.download-attachments { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--size-4-1); + margin-top: var(--size-4-2); +} +.download-attachments .download-attachment-item { + --checkbox-marker-color: var(--text-on-accent); + --checkbox-size: 1.15rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + aspect-ratio: 1/1; + background-color: var(--background-secondary); + overflow: hidden; + border-radius: var(--radius-s); +} +.download-attachments .download-attachment-item:before { + content: ''; + position: absolute; + box-shadow: inset 0 0 0 1px rgba(var(--mono-rgb-100), 0.2); + border-radius: var(--radius-s); + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: 1; + pointer-events: none; + opacity: 0.5; + transition: box-shadow var(--anim-duration-superfast) ease-in-out; + background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 50%); +} +.download-attachments .download-attachment-item:hover:before { + box-shadow: inset 0 0 0 1px rgba(var(--mono-rgb-100), 0.3); +} +.download-attachments .download-attachment-item input[type=checkbox] { + position: absolute; + bottom: var(--size-4-2); + inset-inline-end: var(--size-4-2); + margin-inline: 0; + z-index: 2; +} +.download-attachments .download-attachment-item input[type=checkbox]:not(:checked) { + background-color: var(--background-primary); +} +.download-attachments .download-attachment-item img { + object-fit: cover; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + pointer-events: none; + border-radius: var(--radius-s); +} +/* CURSOR */ +.cm-s-obsidian .cm-cursor, +.cm-s-obsidian .cm-dropCursor { + border-left-color: var(--caret-color); +} +.cm-fat-cursor-mark { + background-color: rgba(20, 255, 20, 0.5); + -webkit-animation: blink 1.06s steps(1) infinite; + -moz-animation: blink 1.06s steps(1) infinite; + animation: blink 1.06s steps(1) infinite; +} +.cm-animate-fat-cursor { + width: auto; + border: 0; + -webkit-animation: blink 1.06s steps(1) infinite; + -moz-animation: blink 1.06s steps(1) infinite; + animation: blink 1.06s steps(1) infinite; + background: var(--interactive-accent); + color: var(--text-on-accent); +} +@-moz-keyframes blink { + 50% { + background-color: transparent; + } +} +@-webkit-keyframes blink { + 50% { + background-color: transparent; + } +} +@keyframes blink { + 50% { + background-color: transparent; + } +} +.cm-tab { + display: inline-block; + text-decoration: inherit; +} +.cm-negative { + color: var(--text-error); +} +.cm-positive { + color: var(--text-success); +} +.cm-strikethrough { + text-decoration: line-through; +} +.cm-invalidchar { + color: var(--text-error); +} +.cm-searching { + background-color: #ffa; + background-color: rgba(255, 255, 0, 0.4); +} +/* Used to force a border model for a node */ +.cm-force-border { + padding-right: 0.1px; +} +/* See issue #2901 */ +.cm-tab-wrap-hack:after { + content: ''; +} +.markdown-source-view { + font-size: var(--font-text-size); + font-family: var(--font-text); +} +.workspace-leaf-content.is-read-mode .markdown-source-view { + z-index: 0; +} +.drag-ghost { + position: fixed; + font-size: var(--font-ui-small); + color: var(--drag-ghost-text-color); + padding: var(--size-2-3) var(--size-4-2); + border-radius: var(--radius-s); + background-color: var(--drag-ghost-background); + box-shadow: 0 2px 8px var(--background-modifier-box-shadow); + z-index: var(--layer-dragged-item); + max-width: 300px; + font-weight: var(--font-medium); + pointer-events: none; +} +.drag-ghost.mod-leaf { + display: flex; + z-index: var(--layer-tooltip); +} +.drag-ghost-icon { + margin-right: var(--size-2-3); + position: relative; +} +.drag-reorder-ghost { + position: fixed; + border-radius: var(--radius-s); + background-color: var(--background-primary); + box-shadow: 0 2px 8px var(--background-modifier-box-shadow); + z-index: var(--layer-dragged-item); + pointer-events: none; +} +.drag-ghost-self { + display: flex; +} +.drag-ghost-self > .svg-icon { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + opacity: 0.7; + vertical-align: middle; + align-self: center; + margin-right: var(--size-2-2); + flex-shrink: 0; +} +.drag-ghost-self span { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.drag-ghost-action { + padding: var(--size-2-1) 0 0 0; + font-size: var(--font-ui-smaller); + opacity: 0.7; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.drag-ghost-hidden { + visibility: hidden; + position: relative; +} +.drag-ghost-hidden:before { + content: ' '; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + visibility: visible; + border-radius: 5px; + background-color: hsla(var(--interactive-accent-hsl), 0.3); +} +.markdown-source-view:not(.is-live-preview) { + --p-spacing: 0rem; +} +.markdown-source-view.mod-cm6 { + height: 100%; + display: flex; + flex-direction: column; +} +.markdown-source-view.mod-cm6 ::selection { + background-color: var(--text-selection); +} +.markdown-source-view.mod-cm6 .cm-line .cm-selection, +.markdown-source-view.mod-cm6 .cm-line .cm-inline-code .cm-selection { + background-color: var(--text-selection); +} +.markdown-source-view.mod-cm6 .cm-selectionBackground, +.markdown-source-view.mod-cm6 .cm-editor > .cm-scroller > .cm-selectionLayer > .cm-selectionBackground { + background-color: var(--text-selection); +} +.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer { + max-width: var(--file-line-width); + margin-left: auto; + margin-right: auto; +} +.markdown-source-view.mod-cm6.is-readable-line-width .cm-content { + max-width: var(--file-line-width); +} +.markdown-source-view.mod-cm6.is-readable-line-width .cm-line { + max-width: var(--file-line-width); +} +.markdown-source-view.mod-cm6.is-readable-line-width .cm-line.HyperMD-table-row { + max-width: 100%; +} +.markdown-source-view.mod-cm6 .cm-editor { + flex: 1 1; + min-height: 0; +} +.markdown-source-view.mod-cm6 .cm-editor.cm-focused { + outline: none; +} +.markdown-source-view.mod-cm6 .cm-scroller { + font-family: var(--font-text); + line-height: var(--line-height-normal); + scrollbar-gutter: stable; +} +.markdown-source-view.mod-cm6 .cm-sizer { + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; + min-height: 100%; +} +.markdown-source-view.mod-cm6 .cm-contentContainer { + flex: 1 1 auto; + display: flex; + align-items: stretch; + overflow-x: visible; +} +.markdown-source-view.mod-cm6 .cm-content { + flex-basis: unset !important; + width: 0; + caret-color: var(--caret-color); + min-height: unset; + padding: 0; +} +.is-mobile.is-ios .markdown-source-view.mod-cm6 .cm-content { + -webkit-user-modify: read-write; +} +.markdown-source-view.mod-cm6 .cm-content > * { + margin: 0 !important; + display: block; +} +.markdown-source-view.mod-cm6 .cm-content > [contenteditable=false] { + contain: paint !important; +} +.markdown-source-view.mod-cm6 .cm-gutters { + flex: 0 0 auto; + background-color: transparent; + color: var(--text-faint) !important; + border-right: none !important; + margin-inline-end: var(--file-folding-offset); + font-size: var(--font-ui-smaller); + z-index: 1; + font-variant: tabular-nums; +} +.markdown-source-view.mod-cm6 .cm-line > * { + text-indent: 0; +} +.markdown-source-view.mod-cm6 .cm-transparent { + color: transparent; +} +.markdown-source-view.mod-cm6 .cm-html-embed, +.markdown-source-view.mod-cm6 .cm-callout, +.markdown-source-view.mod-cm6 .cm-table-widget { + white-space: normal; + overflow-wrap: normal; + word-break: normal; +} +.markdown-source-view.mod-cm6 .cm-table-widget { + --table-drag-handle-size: var(--size-4-4); + padding: var(--table-drag-handle-size); + margin: 0 calc(-1 * var(--size-4-4)) !important; + overflow-x: auto; + overflow-y: hidden; +} +.is-mobile .markdown-source-view.mod-cm6 .cm-table-widget { + --table-drag-handle-size: var(--size-4-6); +} +.markdown-source-view.mod-cm6 .cm-table-widget.is-loading { + padding: 0; + margin: 0 !important; +} +.markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper { + position: relative; + width: fit-content; +} +.markdown-source-view.mod-cm6 .cm-table-widget tr { + height: 1px; +} +.markdown-source-view.mod-cm6 .cm-table-widget th, +.markdown-source-view.mod-cm6 .cm-table-widget td { + height: inherit; + min-width: var(--table-column-min-width); + cursor: text; + overflow: visible; + padding: 0; + position: relative; +} +.markdown-source-view.mod-cm6 .cm-table-widget th.is-selected .table-cell-wrapper, +.markdown-source-view.mod-cm6 .cm-table-widget td.is-selected .table-cell-wrapper { + -webkit-user-select: none; + user-select: none; +} +.markdown-source-view.mod-cm6 .cm-table-widget th.is-selected::after, +.markdown-source-view.mod-cm6 .cm-table-widget td.is-selected::after { + pointer-events: none; + content: ""; + display: block; + position: absolute; + top: calc(-1 * var(--table-border-width)); + inset-inline-end: calc(-1 * var(--table-border-width)); + bottom: calc(-1 * var(--table-border-width)); + inset-inline-start: calc(-1 * var(--table-border-width)); + background-color: var(--table-selection); + border: 0px solid var(--table-selection-border-color); + mix-blend-mode: var(--table-selection-blend-mode); + z-index: 1; +} +.markdown-source-view.mod-cm6 .cm-table-widget th.top::after, +.markdown-source-view.mod-cm6 .cm-table-widget td.top::after { + border-top-width: var(--table-selection-border-width); + top: calc(-1 * var(--table-selection-border-width)); +} +.markdown-source-view.mod-cm6 .cm-table-widget th.bottom::after, +.markdown-source-view.mod-cm6 .cm-table-widget td.bottom::after { + border-bottom-width: var(--table-selection-border-width); + bottom: calc(-1 * var(--table-selection-border-width)); +} +.markdown-source-view.mod-cm6 .cm-table-widget.has-selection { + --text-selection: transparent; +} +.markdown-source-view.mod-cm6 .cm-table-widget.has-selection .cm-content { + caret-color: transparent; +} +.markdown-source-view.mod-cm6 .cm-table-widget.has-selection .cm-selectionLayer, +.markdown-source-view.mod-cm6 .cm-table-widget.has-selection .cm-cursorLayer { + display: none; +} +.markdown-source-view.mod-cm6 .cm-table-widget.is-selected { + --text-selection: transparent; +} +.markdown-source-view.mod-cm6 .cm-table-widget.is-selected table { + position: relative; +} +.markdown-source-view.mod-cm6 .cm-table-widget.is-selected table::after { + pointer-events: none; + content: ""; + display: block; + position: absolute; + top: calc(-1 * var(--table-border-width)); + inset-inline-end: calc(-1 * var(--table-border-width)); + bottom: calc(-1 * var(--table-border-width)); + inset-inline-start: calc(-1 * var(--table-border-width)); + background-color: var(--table-selection); +} +.markdown-source-view.mod-cm6 .cm-table-widget .table-cell-wrapper { + height: 100%; + padding: var(--size-2-2) var(--size-4-2); +} +.markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle, +.markdown-source-view.mod-cm6 .cm-table-widget .table-col-drag-handle { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + position: absolute; + display: flex; + align-items: center; + justify-content: center; + cursor: grab; + background-color: var(--table-drag-handle-background); + color: var(--table-drag-handle-color); + touch-action: none; + opacity: 0; +} +.markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle:active, +.markdown-source-view.mod-cm6 .cm-table-widget .table-col-drag-handle:active, +.markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle:hover, +.markdown-source-view.mod-cm6 .cm-table-widget .table-col-drag-handle:hover { + opacity: 1; +} +.markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle:active, +.markdown-source-view.mod-cm6 .cm-table-widget .table-col-drag-handle:active { + cursor: grabbing; + background-color: var(--table-drag-handle-background-active); + color: var(--table-drag-handle-color-active); + box-shadow: 0 0 0 var(--table-selection-border-width) var(--table-selection-border-color); +} +.markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle *, +.markdown-source-view.mod-cm6 .cm-table-widget .table-col-drag-handle * { + pointer-events: none; +} +.markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle { + top: 0; + inset-inline-end: 100%; + width: calc(var(--table-drag-handle-size) - var(--table-selection-border-width)); + height: 100%; + border-start-start-radius: var(--radius-s); + border-end-start-radius: var(--radius-s); +} +.markdown-source-view.mod-cm6 .cm-table-widget .table-col-drag-handle { + inset-block-end: 100%; + width: 100%; + height: calc(var(--table-drag-handle-size) - var(--table-selection-border-width)); + border-start-start-radius: var(--radius-s); + border-start-end-radius: var(--radius-s); +} +.markdown-source-view.mod-cm6 .cm-table-widget.is-dragging .table-row-drag-handle, +.markdown-source-view.mod-cm6 .cm-table-widget.is-dragging .table-col-drag-handle { + display: none; +} +.markdown-source-view.mod-cm6 .cm-table-widget.is-dragging .table-row-drag-handle:active, +.markdown-source-view.mod-cm6 .cm-table-widget.is-dragging .table-col-drag-handle:active { + display: flex; +} +.markdown-source-view.mod-cm6 .cm-table-widget .table-row-btn, +.markdown-source-view.mod-cm6 .cm-table-widget .table-col-btn { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + position: absolute; + display: flex; + align-items: center; + justify-content: center; + height: var(--table-drag-handle-size); + width: var(--table-drag-handle-size); + background-color: var(--table-add-button-background); + border: var(--table-add-button-border-width) solid var(--table-add-button-border-color); + color: var(--text-faint); + transition: opacity 0s 0.1s; + opacity: 0; + user-select: none; + -webkit-user-select: none; +} +@media (hover: hover) { + .markdown-source-view.mod-cm6 .cm-table-widget .table-row-btn:hover, + .markdown-source-view.mod-cm6 .cm-table-widget .table-col-btn:hover { + opacity: 1; + } +} +.is-mobile .markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle, +.is-mobile .markdown-source-view.mod-cm6 .cm-table-widget .table-col-drag-handle { + display: none; +} +.is-mobile .markdown-source-view.mod-cm6 .cm-table-widget .mod-active-row-handle > .table-row-drag-handle, +.is-mobile .markdown-source-view.mod-cm6 .cm-table-widget .mod-active-col-handle > .table-col-drag-handle { + opacity: 1; + display: flex; +} +.is-mobile .markdown-source-view.mod-cm6 .cm-table-widget:not(.has-focus) .table-row-btn, +.is-mobile .markdown-source-view.mod-cm6 .cm-table-widget:not(.has-focus) .table-col-btn { + pointer-events: none; +} +.is-mobile .markdown-source-view.mod-cm6 .cm-table-widget.has-focus .table-row-btn, +.is-mobile .markdown-source-view.mod-cm6 .cm-table-widget.has-focus .table-col-btn { + opacity: 1; +} +.markdown-source-view.mod-cm6 .cm-table-widget .table-row-btn { + top: 100%; + inset-inline-start: 0; + width: 100%; + border-top: none; + cursor: s-resize; +} +.markdown-source-view.mod-cm6 .cm-table-widget .table-col-btn { + top: 0; + height: 100%; +} +.markdown-source-view.mod-cm6 .cm-table-widget .cm-content, +.markdown-source-view.mod-cm6 .cm-table-widget .cm-line { + max-width: none; +} +.markdown-source-view.mod-cm6 .cm-table-widget .cm-content { + width: auto; +} +.markdown-source-view.mod-cm6 .cm-table-widget .cm-content.cm-lineWrapping { + overflow-wrap: normal; + white-space: var(--table-white-space); + word-break: normal; +} +.markdown-source-view.mod-cm6 .cm-table-widget .cm-scroller { + overflow-y: hidden; + scrollbar-gutter: auto; + line-height: var(--table-line-height); +} +.markdown-source-view.mod-cm6 .cm-table-widget .table-col-btn { + inset-inline-start: 100%; + border-inline-start: none; + cursor: e-resize; +} +.markdown-source-view.mod-cm6 .cm-table-widget th.is-selected.start::after, +.markdown-source-view.mod-cm6 .cm-table-widget td.is-selected.start::after { + border-inline-start-width: var(--table-selection-border-width); + inset-inline-start: calc(-1 * var(--table-selection-border-width)); +} +.markdown-source-view.mod-cm6 .cm-table-widget th.is-selected.end::after, +.markdown-source-view.mod-cm6 .cm-table-widget td.is-selected.end::after { + border-inline-end-width: var(--table-selection-border-width); + inset-inline-end: calc(-1 * var(--table-selection-border-width)); +} +.markdown-source-view.mod-cm6 .cm-table-widget th.is-selected.top.end::after, +.markdown-source-view.mod-cm6 .cm-table-widget td.is-selected.top.end::after { + border-start-end-radius: var(--table-selection-border-radius); +} +.markdown-source-view.mod-cm6 .cm-table-widget th.is-selected.bottom.end::after, +.markdown-source-view.mod-cm6 .cm-table-widget td.is-selected.bottom.end::after { + border-end-end-radius: var(--table-selection-border-radius); +} +.markdown-source-view.mod-cm6 .cm-table-widget th.is-selected.top.start::after, +.markdown-source-view.mod-cm6 .cm-table-widget td.is-selected.top.start::after { + border-start-start-radius: var(--table-selection-border-radius); +} +.markdown-source-view.mod-cm6 .cm-table-widget th.is-selected.bottom.start::after, +.markdown-source-view.mod-cm6 .cm-table-widget td.is-selected.bottom.start::after { + border-end-start-radius: var(--table-selection-border-radius); +} +.markdown-source-view.mod-cm6.is-rtl .cm-table-widget .table-col-btn, +.markdown-source-view.mod-cm6 .cm-table-widget:dir(rtl) .table-col-btn { + cursor: w-resize; +} +.markdown-source-view.mod-cm6 .cm-line { + position: relative; + padding: 0; +} +.markdown-source-view.mod-cm6 .edit-block-button { + padding: var(--size-2-2) var(--size-2-3); + position: absolute; + top: var(--size-2-2); + inset-inline-end: var(--size-2-2); + display: flex; + opacity: 0; + color: var(--text-muted); + border-radius: var(--radius-s); + cursor: var(--cursor); +} +@media (hover: hover) { + .markdown-source-view.mod-cm6 .edit-block-button:hover { + background-color: var(--background-modifier-hover); + } +} +.markdown-source-view.mod-cm6 .cm-panels { + background-color: inherit; + color: inherit; +} +.markdown-source-view.mod-cm6 .cm-panels.cm-panels-bottom { + margin-bottom: var(--safe-area-inset-bottom); + border-top: 1px solid var(--background-modifier-border); + z-index: 1; +} +.markdown-source-view.mod-cm6 .cm-panels.cm-panels-bottom input[type="text"]:focus { + background-color: transparent; + box-shadow: none; +} +.markdown-source-view.mod-cm6 img.cm-widgetBuffer { + display: inline !important; + width: 0 !important; + border: 0 !important; + margin: 0 !important; + padding: 0 !important; +} +.view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller { + padding: var(--file-margins); +} +.empty-state { + position: absolute; + height: 100%; + width: 100%; + top: 0; + inset-inline-start: 0; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} +.empty-state-container { + max-width: 480px; + max-height: 280px; + margin: 20px; + text-align: center; +} +.empty-state-title { + margin: 20px 0; + font-weight: var(--h2-weight); + font-size: var(--h2-size); + line-height: var(--line-height-tight); + position: relative; +} +.empty-state-action-list { + font-size: var(--font-text-size); + line-height: var(--line-height-tight); + color: var(--text-muted); + margin-top: 20px; +} +.empty-state-action { + cursor: var(--cursor); + line-height: 36px; + color: var(--text-accent); +} +@media (hover: hover) { + .empty-state-action:hover { + color: var(--text-accent-hover); + } +} +.empty-state-action.mobile-tap { + color: var(--text-accent-hover); +} +.feedback-banner-container { + display: none; + border-bottom: var(--border-width) solid var(--background-modifier-border); + padding-top: var(--size-4-4); + padding-bottom: var(--size-4-5); + padding-right: max(var(--size-4-5), var(--safe-area-inset-right)); + padding-left: max(var(--size-4-5), var(--safe-area-inset-left)); +} +body.is-phone .feedback-banner-container { + display: block; +} +.feedback-banner { + position: relative; + padding-top: var(--size-4-1); +} +.feedback-banner-title { + font-weight: var(--font-bold); + font-size: var(--font-ui-large); + margin-bottom: var(--size-4-2); +} +.feedback-banner-content { + font-size: var(--font-ui-small); + display: flex; + flex-direction: column; + row-gap: var(--size-4-4); +} +.feedback-banner-dismiss-button { + position: absolute; + font-weight: var(--font-semibold); + top: 0; + right: 0; + padding: var(--size-4-2) var(--size-4-1); + color: var(--interactive-accent); + font-size: var(--font-ui-smaller); +} +/* + +OS-dependent rules to make space for traffic lights buttons, +window buttons and sidebar toggles. + +--- + +Scenarios to account for: + +Window frame styles +- Hidden +- Custom +- Native +- Full screen + +Sidebar states +- Left sidebar open +- Left sidebar closed +- Right sidebar open +- Right sidebar closed +- Pop-out (no sidebars) + +Ribbon states + +- Ribbon visible +- Ribbon hidden + +*/ +body { + --zoom-factor: 1; + --titlebar-height: 30px; +} +.mod-macos { + --frame-left-space: calc(80px - var(--ribbon-width)); + --frame-right-space: 0px; +} +.mod-macos.is-popout-window { + --frame-left-space: 80px; +} +.mod-windows, +.mod-linux { + --frame-left-space: 0px; + --frame-right-space: 126px; +} +body.is-frameless.in-progress, +body.is-frameless:not(.is-hidden-frameless, .is-fullscreen) { + padding-top: calc(var(--titlebar-height) / var(--zoom-factor)); +} +body.is-frameless.in-progress .titlebar, +body.is-frameless:not(.is-hidden-frameless, .is-fullscreen) .titlebar { + height: var(--titlebar-height); + zoom: calc(1 / var(--zoom-factor)); +} +body.is-frameless.in-progress:not(.is-maximized) .titlebar, +body.is-frameless:not(.is-hidden-frameless, .is-fullscreen):not(.is-maximized) .titlebar { + padding-top: 2px; +} +body.is-frameless.is-hidden-frameless .titlebar { + height: calc(var(--header-height) - 1px); +} +body.is-frameless.is-hidden-frameless.starter .titlebar { + height: var(--titlebar-height); +} +.is-fullscreen .titlebar { + display: none; +} +.sidebar-toggle-button, +.workspace-tabs.mod-top { + --tab-container-background: var(--titlebar-background); +} +body.is-focused .titlebar, +body.is-focused .workspace-ribbon.mod-left { + --titlebar-background: var(--titlebar-background-focused); +} +body.is-focused .sidebar-toggle-button, +body.is-focused .workspace-tabs.mod-top { + --tab-container-background: var(--titlebar-background-focused); +} +.is-hidden-frameless { + --divider-vertical-height: 100%; +} +.workspace-ribbon .sidebar-toggle-button { + position: absolute; + top: 0; + left: 0; + width: var(--ribbon-width); + justify-content: center; +} +.titlebar-button.mod-logo { + width: var(--ribbon-width); + justify-content: center; +} +.is-hidden-frameless:not(.starter) .titlebar { + -webkit-app-region: no-drag; +} +.is-hidden-frameless .titlebar-button.mod-logo { + display: none; +} +body.is-frameless.in-progress { + --titlebar-background: var(--background-primary); + --titlebar-background-focused: var(--background-primary); +} +body.is-frameless.in-progress .titlebar { + display: block; + -webkit-app-region: drag; + z-index: 10001; +} +.is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-left-space .workspace-tab-header-container { + padding-left: calc(var(--size-4-2) + var(--frame-left-space)); +} +.is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-right-space .workspace-tab-header-container { + padding-right: calc(var(--size-4-2) + var(--frame-right-space)); +} +.is-hidden-frameless:not(.is-fullscreen):not(.mod-macos) .workspace-tabs.mod-top-left-space .workspace-tab-header-container:before { + -webkit-app-region: no-drag; + content: ''; + height: 100%; + left: 0; + top: 0; + position: absolute; + width: var(--frame-left-space); +} +.is-hidden-frameless:not(.is-fullscreen):not(.mod-macos) .workspace-tabs.mod-top-right-space .workspace-tab-header-container:after { + -webkit-app-region: no-drag; + content: ''; + height: 100%; + right: 0; + top: 0; + position: absolute; + width: var(--frame-right-space); +} +.is-hidden-frameless:not(.is-fullscreen) .titlebar-button-container.mod-right { + background-color: var(--titlebar-background); +} +.is-hidden-frameless:not(.is-fullscreen).is-focused .titlebar-button-container.mod-right { + background-color: var(--titlebar-background-focused); +} +.titlebar-button.mod-logo:hover .logo-wireframe, +.titlebar-button.mod-logo:not(:hover) .logo-full { + display: none; +} +body.is-frameless > .app-container ~ * { + -webkit-app-region: no-drag; +} +body.is-frameless .modal-container, +body.is-frameless .suggestion-bg { + -webkit-app-region: initial; +} +body.is-frameless .modal { + -webkit-app-region: no-drag; +} +.loader-spinner { + --icon-size: var(--icon-xl); + --icon-stroke: var(--icon-l-stroke-width); + width: var(--size-4-8); + height: var(--size-4-8); + margin: 100px auto; + color: var(--interactive-accent); +} +.loader-spinner svg { + animation: spin 1s ease infinite; +} +.loader-cube { + width: 40px; + height: 40px; + margin: 100px auto; +} +.loader-cube .sk-cube { + width: 33%; + height: 33%; + background-color: var(--interactive-accent); + float: left; + float: inline-start; + -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; + animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; +} +.loader-cube .sk-cube1 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; +} +.loader-cube .sk-cube2 { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} +.loader-cube .sk-cube3 { + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; +} +.loader-cube .sk-cube4 { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; +} +.loader-cube .sk-cube5 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; +} +.loader-cube .sk-cube6 { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} +.loader-cube .sk-cube7 { + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.loader-cube .sk-cube8 { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; +} +.loader-cube .sk-cube9 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; +} +@-webkit-keyframes sk-cubeGridScaleDelay { + 0%, + 70%, + 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); + } + 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); + } +} +@keyframes sk-cubeGridScaleDelay { + 0%, + 70%, + 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); + } + 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); + } +} +.is-loading { + position: relative; +} +.is-loading:before { + content: ' '; + position: absolute; + top: 0; + width: 0; + height: 3px; + background-color: var(--interactive-accent); + animation: 1000ms ease-in-out 300ms infinite progress-bar; +} +.pane-empty { + color: var(--text-faint); + font-size: var(--font-ui-small); + margin: var(--size-4-2) auto; + padding: var(--size-4-6) var(--size-4-4); + text-align: center; +} +.pane-empty .pane-empty-actions { + margin-top: var(--size-4-4); +} +.view-header { + height: var(--header-height); + display: flex; + border-bottom: var(--file-header-border); + background-color: var(--background-primary); + z-index: 1; + position: relative; + gap: var(--size-4-2); + padding: 0 var(--size-4-3); +} +body:not(.show-view-header):not(.is-phone) .view-header { + display: none; +} +.is-focused .workspace-leaf.mod-active .view-header { + background-color: var(--background-primary); +} +.workspace-split.mod-left-split .view-header, +.workspace-split.mod-right-split .view-header, +.workspace-fake-target-overlay.is-in-sidebar .view-header { + display: none; +} +.view-header.is-highlighted:after { + content: ' '; + position: absolute; + width: 100%; + height: 100%; + top: 0; + inset-inline-start: 0; + background-color: hsla(var(--interactive-accent-hsl), 0.5); +} +.view-header-left { + display: flex; + align-items: center; + justify-content: flex-start; +} +.view-header-title-container { + font-family: var(--file-header-font); + font-size: var(--file-header-font-size); + font-weight: var(--file-header-font-weight); + flex: 1 1 auto; + overflow: hidden; + position: relative; + justify-content: var(--file-header-justify); + display: flex; + align-items: center; + gap: var(--size-4-1); + min-width: 0; +} +.view-header-title-parent { + color: var(--text-muted); + flex: 0 100 auto; + display: flex; + gap: 0; + overflow: hidden; + white-space: nowrap; +} +.view-header-title-parent:empty { + display: none; +} +.view-header-title-parent .view-header-breadcrumb { + padding: 2px 4px; + border-radius: var(--radius-s); + overflow: hidden; + text-overflow: ellipsis; +} +.view-header-title-parent .view-header-breadcrumb.has-active-menu { + background-color: var(--background-modifier-hover); + color: var(--text-normal); +} +@media (hover: hover) { + .view-header-title-parent .view-header-breadcrumb:hover { + background-color: var(--background-modifier-hover); + color: var(--text-normal); + } +} +.view-header-title-parent .view-header-breadcrumb-separator { + padding: 2px 1px; + color: var(--text-faint); +} +.view-header-title { + flex: 0 0 auto; + max-width: 100%; + word-wrap: normal; + color: var(--text-muted); + overflow: hidden; + scroll-padding-inline-end: 20px; + text-overflow: ellipsis; + white-space: pre; +} +.view-header-title:focus-within { + max-width: 100%; + overflow: auto; + text-overflow: unset; +} +.is-focused .workspace-leaf.mod-active .view-header-title { + color: var(--text-normal); +} +.view-header-title::-webkit-scrollbar { + display: none; +} +.view-content { + width: 100%; + height: calc(100% - var(--header-height)); +} +.workspace-split.mod-root .view-content { + background-color: var(--background-primary); +} +.workspace-split.mod-root .workspace-fake-target-overlay .view-content { + background-color: transparent; +} +.workspace-split.mod-left-split .view-content, +.workspace-split.mod-right-split .view-content { + height: 100%; + overflow: auto; +} +.inline-title { + color: var(--inline-title-color); + white-space: pre-wrap; + margin-block-end: var(--inline-title-margin-bottom); +} +.inline-title:not([data-level]) { + font-size: var(--inline-title-size); + font-weight: var(--inline-title-weight); + line-height: var(--inline-title-line-height); + font-style: var(--inline-title-style); + font-variant: var(--inline-title-variant); + font-family: var(--inline-title-font); + letter-spacing: -0.015em; +} +.inline-title h1, +.inline-title h2, +.inline-title h3, +.inline-title h4, +.inline-title h5, +.inline-title h6 { + margin-block-start: 0; + margin-block-end: 0; +} +.hover-popover .inline-title, +.inline-embed .inline-title { + display: none; +} +.hover-popover.bases-new-item-popover .inline-title, +.hover-popover .markdown-embed[data-type="heading"] .inline-title { + display: block; +} +body:not(.show-inline-title) .inline-title:not([data-level]) { + display: none; +} +body:not(.show-inline-title) .bases-new-item-popover .inline-title { + display: block; +} +::selection { + background-color: var(--text-selection); +} +.markdown-reading-view { + display: flex; + flex-direction: column; +} +.markdown-preview-view { + font-size: var(--font-text-size); + font-family: var(--font-text); + line-height: var(--line-height-normal); + width: 100%; + height: 100%; + padding: var(--file-margins); + position: relative; + overflow-y: auto; + overflow-wrap: break-word; + color: var(--text-normal); + user-select: text; + -webkit-user-select: text; + scrollbar-gutter: stable; +} +.workspace-leaf-content.is-read-mode .markdown-preview-view { + width: 100%; + inset-inline-start: 0; + background-color: var(--background-primary); +} +.markdown-preview-view.is-readable-line-width .markdown-preview-sizer { + max-width: var(--file-line-width); + margin-left: auto; + margin-right: auto; +} +.markdown-rendered { + tab-size: var(--indent-size); +} +.markdown-rendered.rtl { + direction: rtl; +} +.markdown-rendered > .markdown-preview-section > .markdown-preview-pusher + div:not(.mod-ui) > :first-child, +.markdown-rendered > .markdown-preview-section > .mod-ui + div:not(.mod-ui) > :first-child { + margin-top: 0; +} +.markdown-rendered > .markdown-preview-section > div:last-child > :last-child { + margin-bottom: 0; +} +/* Ribbon */ +/* Add background to top left corner space above ribbon */ +.workspace-ribbon.mod-left { + margin-top: var(--header-height); + /* Add the tab background in the top left corner */ +} +.workspace-ribbon.mod-left:before { + -webkit-app-region: drag; + position: absolute; + left: 0; + top: 0; + background-color: var(--titlebar-background); + content: " "; + border-bottom: var(--tab-outline-width) solid var(--tab-outline-color); + height: var(--header-height); + width: var(--ribbon-width); + box-sizing: border-box; +} +body:not(.show-ribbon) { + --ribbon-width: 0px; +} +body:not(.show-ribbon) .workspace-ribbon { + display: none; +} +.workspace-ribbon { + width: var(--ribbon-width); + flex: 0 0 var(--ribbon-width); + display: flex; + flex-direction: column; + overflow: hidden; + background-color: var(--ribbon-background); + z-index: var(--layer-sidedock); + color: var(--text-muted); + padding: var(--ribbon-padding); + gap: var(--size-4-1); + border-right: var(--divider-width) solid var(--divider-color); +} +.workspace-ribbon.mod-left.is-collapsed { + transition: background-color 250ms 95ms ease-in-out; + background-color: var(--ribbon-background-collapsed); + border-right-color: var(--divider-color); +} +.workspace-ribbon.mod-right { + display: none; +} +.workspace-ribbon.is-hidden { + display: none; +} +.workspace-ribbon.is-collapsed { + background-color: var(--background-secondary); +} +.side-dock-settings, +.side-dock-actions { + flex-direction: column; +} +.side-dock-settings .side-dock-ribbon-action, +.side-dock-actions .side-dock-ribbon-action { + margin: 0 auto; +} +.side-dock-settings { + margin-top: auto; +} +.release-notes-view { + padding: var(--file-margins); +} +.release-notes-view .markdown-preview-view { + overflow: visible; +} +.release-notes-view .is-readable-line-width { + max-width: var(--file-line-width); + margin-left: auto; + margin-right: auto; +} +/* Todo: remove this once the sidebars are flipped in RTL mode + otherwise the top right sidebar button opens the left sidebar */ +.is-phone .view-header { + direction: ltr; +} +/* Use a different bidi algorithm to account for + mixed content in single line content both in LTR or RTL mode. + This is important for mixed-language users and also + to properly display untranslated strings. +*/ +.bases-toolbar-result-count, +.community-item-desc, +.community-modal-info-desc, +.community-modal-search-summary, +.inline-title, +.inline-title h1, +.metadata-property-key-input, +.metadata-input-longtext, +.multi-select-pill-content, +.nav-file-title-content, +.nav-folder-title-content, +.search-result-file-match, +.setting-item-description, +.setting-item-name, +.suggestion-title, +.bases-table-header-name, +.table-cell-wrapper, +.titlebar-text, +.tooltip, +.tree-item-inner, +.view-header-breadcrumb, +.view-header-title, +.workspace-tab-header-inner-title, +input { + unicode-bidi: plaintext; +} +/* Calculate horizontal positions where text direction matters + but start/end values are not available, e.g. transforms used + for folding indicators +*/ +body, +[dir='ltr'] { + --direction: 1; +} +.mod-rtl, +[dir='rtl'] { + --direction: -1; +} +@supports selector(:dir(rtl)) { + .is-collapsed:dir(ltr), + .cm-line:dir(ltr) { + --direction: 1; + } + .is-collapsed:dir(rtl), + .cm-line:dir(rtl) { + --direction: -1; + } +} +.mod-rtl, +.is-rtl, +.rtl { + --callout-padding: var(--size-4-3) var(--size-4-6) var(--size-4-3) var(--size-4-3); + --embed-padding: 0 var(--size-4-6) 0 0; + --nav-item-padding: var(--size-4-1) var(--size-4-6) var(--size-4-1) var(--size-4-2); +} +.mod-rtl .metadata-container, +.is-rtl .metadata-container, +.rtl .metadata-container { + --direction: -1; +} +.mod-rtl .metadata-container, +.is-rtl .metadata-container, +.rtl .metadata-container, +.mod-rtl input.metadata-input-number, +.is-rtl input.metadata-input-number, +.rtl input.metadata-input-number, +.mod-rtl input.metadata-property-key-input, +.is-rtl input.metadata-property-key-input, +.rtl input.metadata-property-key-input { + text-align: right; +} +@supports selector(:has(*)) { + .mod-rtl .cm-line:has(.cm-hmd-frontmatter), + .is-rtl .cm-line:has(.cm-hmd-frontmatter), + .rtl .cm-line:has(.cm-hmd-frontmatter) { + direction: rtl; + } +} +.mod-rtl input[type='date'], +.is-rtl input[type='date'], +.rtl input[type='date'], +.mod-rtl input[type='datetime-local'], +.is-rtl input[type='datetime-local'], +.rtl input[type='datetime-local'] { + direction: rtl; +} +.mod-rtl input[type='date']::-webkit-calendar-picker-indicator, +.is-rtl input[type='date']::-webkit-calendar-picker-indicator, +.rtl input[type='date']::-webkit-calendar-picker-indicator, +.mod-rtl input[type='datetime-local']::-webkit-calendar-picker-indicator, +.is-rtl input[type='datetime-local']::-webkit-calendar-picker-indicator, +.rtl input[type='datetime-local']::-webkit-calendar-picker-indicator { + right: var(--size-4-1); + left: auto; +} +/* Callouts + Remember that callouts can be nested, so text direction can + change within a nested set of callouts +*/ +@supports selector(:has(*)) { + .cm-callout:has(.callout .callout-title .callout-title-inner:dir(rtl)), + .callout:has( > .callout-title .callout-title-inner:dir(rtl)) { + direction: rtl; + } + .cm-callout:has(.callout .callout-title .callout-title-inner:dir(rtl)) > .callout-title, + .callout:has( > .callout-title .callout-title-inner:dir(rtl)) > .callout-title { + direction: rtl; + --direction: -1; + } + .cm-callout:has(.callout .callout-title .callout-title-inner:dir(rtl)) > .callout-title .callout-icon svg.svg-icon, + .callout:has( > .callout-title .callout-title-inner:dir(rtl)) > .callout-title .callout-icon svg.svg-icon { + transform: scale(-1, 1); + } +} +/* When Obsidian interface language is set to RTL language, mirror the UI */ +.mod-rtl { + --dropdown-background-position: left 0.5em top 50%, 0 0; + --dropdown-padding: 0 0.8em 0 1.9em; + --tab-stacked-text-transform: rotate(180deg); + /* Not RTL: + - Code blocks + - Canvas wrapper + - Community directory + */ + /* Set text direction on interface elements */ + /* Force right-align on UI elements that respond to content direction + to improve readability and avoid text bouncing between LTR/RTL */ + /* Since sidebars are not (yet) reversed but the tab header icons are + we need to reverse the position of the sidebar toggles*/ + /* Stacked tabs */ + /* Mirror directional UI components, e.g. toggles */ + /* Mirror icons */ +} +.mod-rtl.is-mobile { + --nav-item-padding: var(--size-2-3) var(--size-4-6) var(--size-2-3) var(--size-4-2); +} +.mod-rtl .community-modal-readme, +.mod-rtl .canvas-wrapper { + direction: ltr; +} +.mod-rtl .workspace-sidedock-vault-profile, +.mod-rtl .modal, +.mod-rtl .notice, +.mod-rtl .prompt, +.mod-rtl .titlebar, +.mod-rtl .tooltip, +.mod-rtl .workspace-tab-container, +.mod-rtl .workspace-tab-header-container, +.mod-rtl .workspace-drawer, +.mod-rtl .mobile-navbar-actions, +.mod-rtl .status-bar, +.mod-rtl .suggestion-container, +.mod-rtl .menu, +.mod-rtl .query-toolbar-menu, +.mod-rtl .popover { + direction: rtl; +} +.mod-rtl .workspace-tab-header-inner-title, +.mod-rtl .setting-item-description, +.mod-rtl .setting-item-name, +.mod-rtl input { + text-align: right; +} +.mod-rtl .sidebar-toggle-button { + order: 2; +} +.mod-rtl .sidebar-toggle-button.mod-right { + order: -1; +} +.mod-rtl .canvas-card-menu { + flex-direction: row-reverse; +} +.mod-rtl .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container { + flex-direction: row-reverse; +} +.mod-rtl .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner { + flex-direction: row-reverse; +} +.mod-rtl .search-input-container:before, +.mod-rtl .checkbox-container { + transform: scale(-1, 1); +} +.mod-rtl svg.svg-icon:not( + .lucide-binary, + .lucide-check, + .lucide-check-square, + .lucide-clock, + .lucide-code-2, + .lucide-timer, + .sidebar-right, + .sidebar-left + ) { + transform: scale(-1, 1); +} +[lang="he"] svg.svg-icon:is( + .lucide-help-circle, + .help + ) { + transform: scale(1, 1); +} +.setting { + display: flex; + align-items: center; +} +.setting-text { + flex-grow: 1; +} +.setting-title { + font-size: var(--font-ui-large); + line-height: var(--line-height-normal); +} +.setting-explanation { + color: var(--text-muted); +} +.modal.mod-new-editor { + max-width: 600px; +} +.modal.mod-trust-folder { + max-width: 700px; +} +.modal.mod-plugin-debug { + max-width: 500px; +} +.modal.mod-plugin-debug .startup-stat-list, +.modal.mod-plugin-debug .startup-timing-list { + display: flex; + flex-direction: column; + margin: var(--size-4-4) 0; +} +.modal.mod-plugin-debug .startup-stat { + display: flex; + flex-direction: row; + font-size: var(--font-ui-medium); + padding: var(--size-4-1) 0; + gap: var(--size-4-2); +} +.modal.mod-plugin-debug .startup-stat:not(:last-child) { + border-bottom: var(--border-width) solid var(--background-modifier-border); +} +.modal.mod-plugin-debug .startup-stat.mod-heading .startup-label, +.modal.mod-plugin-debug .startup-stat.mod-heading .startup-value { + font-weight: var(--font-semibold); +} +.modal.mod-plugin-debug .startup-info { + flex-grow: 1; + white-space: nowrap; +} +.modal.mod-plugin-debug .startup-desc { + margin-inline: var(--size-4-2); + color: var(--text-faint); + font-size: var(--font-ui-smaller); +} +.modal.mod-plugin-debug .startup-value { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-variant-numeric: tabular-nums; + text-align: end; + width: 50%; +} +.modal.mod-settings .vertical-tab-header { + flex: 0 0 25%; + min-width: 180px; + max-width: 250px; + overflow: auto; + border-inline-end: 1px solid var(--divider-color); +} +.modal.mod-settings .modal-content { + margin-top: 0; + overflow: hidden; +} +.modal.mod-plugin-options .modal-content { + margin: var(--size-4-6) 0; +} +.modal.mod-form { + max-width: 400px; +} +.form-field { + display: flex; + flex-direction: column; + gap: var(--size-4-2); +} +.setting-item { + display: flex; + align-items: center; + padding: 0.75em 0; + border-top: 1px solid var(--background-modifier-border); + row-gap: var(--size-4-3); + /* Add extra space for setting heading if it starts a new section */ +} +.setting-item + div > .setting-item-heading, +.setting-item + .setting-item-heading { + margin-top: 0.75em; +} +.setting-item:first-child { + padding-top: 0; + border-top: none; +} +.setting-item > *:first-child { + margin-inline-end: var(--size-4-4); +} +.setting-item > *:last-child { + margin-inline-end: 0; +} +@container (max-width: 340px) { + .setting-item:not(.mod-toggle):not(.mod-list-item) { + flex-direction: column; + } + .setting-item:not(.mod-toggle):not(.mod-list-item) .setting-item-info { + margin-inline-end: 0; + align-self: flex-start; + } + .setting-item:not(.mod-toggle):not(.mod-list-item) .setting-item-control { + width: 100%; + justify-content: flex-start; + } + .setting-item:not(.mod-toggle):not(.mod-list-item) .setting-item-control button:not(.clickable-icon), + .setting-item:not(.mod-toggle):not(.mod-list-item) .setting-item-control input, + .setting-item:not(.mod-toggle):not(.mod-list-item) .setting-item-control select { + width: 100%; + max-width: 100%; + } +} +.setting-item.mod-cta { + justify-content: center; +} +.setting-item-heading { + font-weight: var(--font-semibold); + border-top: none; +} +.setting-item-heading .setting-item-info { + flex-grow: 0; + margin-inline-end: 0; +} +.setting-item-heading .setting-item-description { + font-weight: var(--font-normal); +} +.setting-item-info { + flex: 1 1 auto; + min-width: 0; +} +.setting-item-description { + color: var(--text-muted); + font-size: var(--font-ui-smaller); + padding-top: var(--size-4-1); + line-height: var(--line-height-tight); +} +.setting-item-description:empty { + display: none; +} +.setting-item-description code { + font-family: var(--font-monospace); + font-size: var(--font-smaller); + border-radius: var(--radius-s); + padding: 0 3px 2px 3px; + position: relative; + bottom: 1px; +} +.setting-item-description ul { + margin: var(--size-4-1) 0; + padding-inline-start: var(--size-4-6); +} +.setting-item-name { + color: var(--text-normal); + font-size: var(--font-ui-medium); + line-height: var(--line-height-tight); + text-overflow: ellipsis; + overflow: hidden; +} +.setting-item-control { + flex: 1 1 auto; + text-align: end; + display: flex; + justify-content: flex-end; + align-items: center; + gap: var(--size-4-2); +} +.setting-item-control.mod-vertical { + flex-direction: column; +} +.setting-item-control.mod-vertical > *:not(:last-child) { + margin-bottom: 10px; + margin-inline-end: 0; +} +.setting-item-control.mod-hotkey { + padding-top: 0; + cursor: default; +} +.setting-item-control.mod-hotkey input { + font-family: var(--font-monospace); + font-size: var(--font-smaller); +} +.setting-item-control.mod-hotkey input:focus { + background-color: var(--interactive-accent); + color: var(--text-on-accent); +} +.setting-item-control select { + width: inherit; + max-width: 400px; +} +.setting-command-hotkeys { + display: flex; + flex-wrap: wrap; + gap: var(--size-4-1); +} +.setting-hotkey { + font-family: -apple-system, BlinkMacSystemFont, var(--font-monospace); + font-size: var(--font-ui-small); + background-color: var(--background-modifier-hover); + border-radius: var(--radius-s); + padding: 2px 4px 2px 8px; + align-self: flex-end; + white-space: nowrap; + display: flex; + align-items: center; + gap: var(--size-4-1); +} +.setting-hotkey.has-conflict { + background-color: var(--background-modifier-error); + color: var(--text-on-accent); +} +@media (hover: hover) { + .setting-hotkey.has-conflict:hover { + background-color: var(--background-modifier-error-hover); + } +} +.setting-hotkey.mod-active { + background-color: var(--interactive-accent); + color: var(--text-on-accent); +} +.setting-hotkey.mod-empty { + padding-inline-end: var(--size-4-2); +} +.setting-hotkey-icon { + display: flex; + align-items: center; + cursor: var(--cursor); + border-radius: 50%; + line-height: 1; + text-align: center; +} +.setting-hotkey-icon .svg-icon { + width: 16px; + height: 16px; + stroke-width: 2px; + opacity: 0.6; +} +@media (hover: hover) { + .setting-hotkey-icon:hover .svg-icon { + opacity: 1; + } +} +@media (hover: hover) { + .setting-delete-hotkey:hover { + background-color: var(--background-modifier-error); + color: var(--text-on-accent); + } +} +.setting-add-hotkey-button, +.setting-restore-hotkey-button { + padding: var(--size-2-2); + border-radius: var(--radius-s); + color: var(--text-faint); + cursor: var(--cursor); + height: calc(var(--icon-l) + var(--size-2-2) + var(--size-2-2)); +} +.setting-add-hotkey-button.mod-active, +.setting-restore-hotkey-button.mod-active { + color: var(--text-accent); +} +@media (hover: hover) { + .setting-add-hotkey-button:hover, + .setting-restore-hotkey-button:hover { + background-color: var(--background-modifier-hover); + color: var(--text-normal); + } +} +.extra-setting-button { + line-height: 0; +} +.setting-message { + font-size: var(--font-ui-small); +} +.setting-font-list { + margin: 1.5em 0 0.75em 0; +} +.hotkey-settings-container { + display: flex; + flex-direction: column; +} +.hotkey-settings-container .setting-item-description { + padding-top: 0; +} +.hotkey-settings-container hr { + margin: 20px 0 10px 0; +} +.hotkey-list-container { + overflow: auto; +} +.hotkey-header-container { + justify-content: space-between; + padding-bottom: var(--size-4-8); + display: flex; + flex-wrap: wrap; +} +.hotkey-filter { + align-items: center; + background-color: var(--background-secondary); + border-radius: var(--radius-s); + display: flex; + font-size: var(--font-ui-small); + padding: var(--size-4-1) var(--size-4-1) var(--size-4-1) var(--size-4-2); + gap: var(--size-2-1); +} +.setting-filter-container { + display: flex; + gap: var(--size-4-2); + margin-bottom: var(--size-4-8); +} +.input-right-decorator { + position: absolute; + transform: translateY(-50%); + top: 50%; + inset-inline-end: var(--size-4-1); +} +.search-input-container.mod-hotkey .clickable-icon { + padding: var(--size-2-1); +} +.hotkey-filter-remove-button { + cursor: var(--cursor); + color: var(--text-muted); + padding: var(--size-2-1); + border-radius: var(--radius-s); + display: flex; + align-items: center; + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); +} +@media (hover: hover) { + .hotkey-filter-remove-button:hover { + background-color: var(--background-modifier-hover); + } +} +.modal.mod-image-lightbox { + max-width: 90vw; + max-height: 90vh; + padding: 0; +} +.modal.mod-image-lightbox .modal-content { + padding: var(--size-4-12) var(--size-4-3) var(--size-4-2) var(--size-4-3); + text-align: center; +} +.spellchecker-dictionary-container { + max-height: 60vh; + overflow: auto; +} +.spellchecker-dictionary-item { + display: flex; + margin-bottom: 10px; +} +.spellchecker-dictionary-word { + flex-grow: 1; +} +.spellchecker-dictionary-remove-button { + cursor: var(--cursor); + color: var(--text-muted); + margin-inline-end: 10px; +} +@media (hover: hover) { + .spellchecker-dictionary-remove-button:hover { + color: var(--text-normal); + } +} +.modal.mod-new-editor .card, +.modal.mod-restricted-mode .card { + flex: 1 0 0; +} +.input-right-decorator { + position: absolute; + transform: translateY(-50%); + top: 50%; + inset-inline-end: var(--size-4-1); +} +.input-right-decorator.clickable-icon { + padding: var(--size-2-1) var(--size-2-2); +} +.input-right-decorator.clickable-icon.is-active { + background-color: transparent; +} +.search-input-container input:placeholder-shown ~ .search-input-clear-button { + display: none; +} +.search-input-container input:not(:placeholder-shown) { + padding-inline-end: 28px; +} +.global-search-input-container.search-input-container input:not(:placeholder-shown) { + padding-inline-end: 56px; +} +.search-input-container input:not(:placeholder-shown) ~ .input-right-decorator { + inset-inline-end: calc(var(--size-4-1) + 28px); +} +.setting-progress-bar { + width: 100%; + height: var(--size-4-2); + border-radius: var(--radius-s); + background-color: var(--background-secondary); + box-shadow: inset 0 0 0 1px var(--background-modifier-border); +} +.setting-progress-bar-inner { + width: 0; + height: 100%; + border-radius: var(--radius-s); + background-color: var(--interactive-accent); +} +.mod-community-modal .modal-sidebar .setting-item { + max-width: var(--modal-community-sidebar-width); + padding: 0 var(--size-4-3) var(--size-4-1); + border: none; + gap: var(--size-4-2); +} +.mod-community-modal .modal-sidebar .setting-item:first-child { + max-width: 500px; + gap: 0; + margin-bottom: var(--size-4-2); +} +.mod-community-modal .modal-sidebar .setting-item-name { + font-size: var(--font-ui-small); + padding-inline-start: var(--size-4-1); +} +.mod-community-modal .modal-sidebar .setting-item-info { + margin: 0; + flex-grow: 0; +} +.mod-community-modal .modal-sidebar .search-input-container { + width: 100%; +} +.mod-community-modal .modal-sidebar button.clickable-icon { + padding: 6px 10px; + display: flex; + align-items: center; + color: var(--text-normal); +} +.community-modal-details-empty-state { + padding: 0; + text-align: center; +} +.community-modal-search-summary { + font-size: var(--font-ui-small); + padding: var(--size-4-1) var(--size-4-3) var(--size-4-3) var(--size-4-4); +} +.community-modal-search-results-wrapper { + flex: 1 0 auto; + overflow: auto; + border-top: var(--border-width) solid var(--divider-color); + scroll-padding: var(--size-4-3); + /* This helps with performance of the app */ + contain: strict; +} +.community-modal-search-results { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: var(--size-4-3); + padding: var(--size-4-3); +} +.community-modal-empty-state { + color: var(--text-muted); + display: flex; + align-items: center; + justify-content: center; + height: 100%; + flex-direction: column; +} +body:not(.is-phone) .community-item.is-selected, +body:not(.is-phone) .community-item.is-selected:hover { + border-color: var(--interactive-accent); + background-color: var(--interactive-accent); + color: var(--text-on-accent); +} +body:not(.is-phone) .community-item.is-selected .community-item-author, +body:not(.is-phone) .community-item.is-selected:hover .community-item-author, +body:not(.is-phone) .community-item.is-selected .community-item-repo, +body:not(.is-phone) .community-item.is-selected:hover .community-item-repo, +body:not(.is-phone) .community-item.is-selected .community-item-downloads, +body:not(.is-phone) .community-item.is-selected:hover .community-item-downloads, +body:not(.is-phone) .community-item.is-selected .community-item-updated, +body:not(.is-phone) .community-item.is-selected:hover .community-item-updated { + color: var(--text-on-accent); + opacity: 0.8; +} +body:not(.is-phone) .community-item.is-selected .flair, +body:not(.is-phone) .community-item.is-selected:hover .flair { + --flair-color: var(--text-on-accent); + --flair-background: transparent; +} +.community-item { + position: relative; + background-color: var(--background-primary); + padding: var(--size-4-3); + cursor: var(--cursor); + border-radius: var(--radius-m); + border: 1px solid var(--background-modifier-border); + display: flex; + flex-direction: column; + gap: var(--size-2-1); +} +.community-item:last-child { + margin-bottom: 0; +} +.community-item .suggestion-highlight { + background-color: var(--text-highlight-bg); +} +@media (hover: hover) { + .community-item:hover { + border-color: var(--background-modifier-border-hover); + } +} +.is-mobile .community-item { + max-width: 500px; +} +.community-item .flair { + --flair-background: var(--background-modifier-active-hover); + --flair-color: var(--text-accent); + margin-inline-start: var(--size-4-1); + vertical-align: middle; + top: -1px; +} +.community-item-name { + font-size: var(--font-ui-medium); + line-height: var(--line-height-tight); + font-weight: var(--font-medium); +} +.community-item-author { + font-size: var(--font-ui-smaller); + line-height: var(--line-height-tight); + color: var(--text-muted); +} +.community-item-downloads { + font-size: var(--font-ui-smaller); + color: var(--text-muted); + --icon-color: var(--text-faint); + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); +} +.community-item-downloads svg { + vertical-align: text-bottom; +} +.community-item-updated { + font-size: var(--font-ui-smaller); + color: var(--text-muted); + margin-bottom: var(--size-4-2); +} +.community-item-downloads-text { + margin-inline-start: var(--size-2-2); +} +.community-item-desc { + font-size: var(--font-ui-small); + line-height: var(--line-height-tight); + margin-top: 4px; + overflow: hidden; +} +.community-item-badge.mod-update { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + color: var(--interactive-accent); + position: absolute; + top: var(--size-4-3); + inset-inline-end: var(--size-4-3); +} +.community-item-screenshot { + max-width: 100%; + margin-top: auto; + object-fit: cover; + border-radius: var(--radius-s); + aspect-ratio: 16/9; + image-rendering: -webkit-optimize-contrast; + margin-top: var(--size-4-1); +} +.community-item-screenshot.mod-unavailable { + text-align: center; + color: var(--text-muted); +} +.community-item-screenshot .placeholder-icon { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} +.community-item-screenshot .placeholder-icon .svg-icon { + color: var(--text-faint); + width: var(--size-4-8); + height: var(--size-4-8); +} +.community-modal-info-name { + font-size: var(--h2-size); + font-weight: var(--font-semibold); + line-height: var(--line-height-tight); + margin-bottom: var(--size-4-6); +} +.community-modal-info-author, +.community-modal-info-repo, +.community-modal-info-version { + font-size: var(--font-ui-small); + line-height: var(--line-height-tight); + color: var(--text-muted); +} +.community-modal-info-desc { + font-size: var(--font-ui-small); + line-height: var(--line-height-tight); + margin-top: 4px; +} +.community-modal-details { + flex: 1 1 calc(var(--modal-max-width) - var(--modal-community-sidebar-width)); + overflow: auto; + display: flex; + flex-direction: column; + border-inline-start: 1px solid var(--divider-color); +} +.community-modal-info { + flex: 1 1 0; + overflow-y: auto; + padding: var(--size-4-8) var(--size-4-16); + scroll-padding: var(--size-4-4); +} +.community-readme { + overflow-y: visible; + height: auto; + padding: var(--size-4-4) 0; +} +.community-readme video, +.community-readme img { + max-width: 100%; +} +.community-modal-info-desc { + font-size: var(--font-ui-medium); + line-height: var(--line-height-tight); + margin-top: var(--size-4-2); +} +.community-modal-button-container { + display: flex; + flex-wrap: wrap; + gap: var(--size-4-2); + margin: 1.5em 0; +} +.community-modal-info-downloads { + color: var(--text-muted); + margin-top: var(--size-4-1); + display: inline-block; + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); +} +.community-modal-info-downloads-text { + margin-inline-start: var(--size-4-1); + position: relative; + top: -1px; +} +.community-modal-readme { + font-size: var(--font-text-size); + font-family: var(--font-text); + line-height: var(--line-height-normal); + overflow-wrap: break-word; + color: var(--text-normal); + user-select: text; + -webkit-user-select: text; +} +.installed-plugins-container { + padding-top: var(--size-4-4); + border-top: 1px solid var(--background-modifier-border); +} +.is-mobile .community-modal-button-container { + margin-bottom: var(--safe-area-inset-bottom); + width: 100%; +} +.community-modal-grid-button-container { + position: absolute; + top: var(--size-4-4); + inset-inline-end: var(--size-4-12); + display: flex; + gap: var(--size-4-2); +} +.status-bar { + position: var(--status-bar-position); + width: auto; + bottom: 0; + right: 0; + border-radius: var(--status-bar-radius); + border-style: solid; + border-width: var(--status-bar-border-width); + border-color: var(--status-bar-border-color); + background-color: var(--status-bar-background); + color: var(--status-bar-text-color); + display: flex; + font-size: var(--status-bar-font-size); + justify-content: flex-end; + min-height: 18px; + padding: var(--size-4-1); + gap: var(--size-4-1); + user-select: none; + z-index: var(--layer-status-bar); + font-variant-numeric: tabular-nums; +} +body:not(.is-fullscreen) .status-bar { + padding-right: var(--size-4-2); +} +.status-bar-item { + border-radius: var(--radius-s); + display: inline-flex; + align-items: center; + padding: 3px var(--size-2-2); + line-height: 1; +} +.status-bar-item.mod-clickable { + cursor: var(--cursor); +} +@media (hover: hover) { + .status-bar-item.mod-clickable:hover { + background-color: var(--background-modifier-hover); + color: var(--text-normal); + } +} +.status-bar-item.plugin-editor-status, +.status-bar-item.plugin-sync { + padding: 0 var(--size-2-2); +} +@media (hover: hover) { + .status-bar-item.plugin-editor-status:hover, + .status-bar-item.plugin-sync:hover { + background-color: var(--background-modifier-hover); + } +} +.status-bar-item:empty { + display: none; +} +.status-bar-item-icon { + vertical-align: middle; + display: flex; + align-items: center; +} +.status-bar-item-segment { + margin-inline-end: var(--size-4-2); +} +.status-bar-item-segment:last-child { + margin-inline-end: 0; +} +.is-screenshotting .status-bar { + display: none; +} +.titlebar { + -webkit-app-region: drag; + position: fixed; + top: 0; + left: 0; + right: 0; + display: flex; + background-color: var(--titlebar-background); + border-bottom: var(--titlebar-border-width) solid var(--titlebar-border-color); +} +.titlebar-inner { + color: var(--titlebar-text-color); + font-weight: var(--titlebar-text-weight); + width: 100%; + display: flex; +} +.is-focused .titlebar-inner { + color: var(--titlebar-text-color-focused); +} +.titlebar-text { + opacity: 0.85; + position: absolute; + width: 100%; + height: 100%; + top: 0; + inset-inline-start: 0; + flex-grow: 1; + gap: 0.15em; + font-size: var(--font-ui-small); + text-align: center; + display: flex; + justify-content: center; + align-items: center; + padding: 0 125px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.titlebar-button-container { + display: flex; + position: absolute; + top: 0; +} +.mod-macos .titlebar-button-container { + top: 8px; +} +.titlebar-button-container.mod-left { + left: 0; +} +.mod-macos .titlebar-button-container.mod-left { + left: calc(80px / var(--zoom-factor)); +} +.titlebar-button-container .mod-back, +.titlebar-button-container .mod-forward { + color: var(--icon-color); +} +.titlebar-button-container .mod-back .svg-icon, +.titlebar-button-container .mod-forward .svg-icon { + width: 14px; + height: 14px; + stroke-width: 2.25px; +} +@media (hover: hover) { + .titlebar-button-container .mod-back:hover, + .titlebar-button-container .mod-forward:hover { + color: var(--icon-color-hover); + } +} +.titlebar-button-container.mod-right { + right: 0; +} +.titlebar-button { + -webkit-app-region: no-drag; + padding: var(--size-2-2) var(--size-2-3); + cursor: var(--cursor); + display: inline-flex; + align-items: center; +} +@media (hover: hover) { + .titlebar-button:hover { + opacity: 1; + background-color: var(--background-modifier-hover); + } + .titlebar-button.mod-close:hover { + background-color: var(--background-modifier-error); + } +} +.mod-macos .titlebar-button { + border-radius: var(--radius-s); +} +/* Hidden titlebar interferes with mouse */ +body.is-frameless.is-hidden-frameless:not(.in-progress) { + padding-top: 0 !important; +} +.is-hidden-frameless.mod-macos .titlebar { + display: none; +} +.is-hidden-frameless.mod-windows .titlebar, +.is-hidden-frameless.mod-linux .titlebar { + background: transparent; + border: none; + z-index: var(--layer-popover); + pointer-events: none; +} +.is-hidden-frameless.mod-windows .titlebar-button.mod-back, +.is-hidden-frameless.mod-linux .titlebar-button.mod-back, +.is-hidden-frameless.mod-windows .titlebar-button.mod-forward, +.is-hidden-frameless.mod-linux .titlebar-button.mod-forward, +.is-hidden-frameless.mod-windows .titlebar-text, +.is-hidden-frameless.mod-linux .titlebar-text { + display: none; +} +.is-hidden-frameless.mod-windows .titlebar-button-container, +.is-hidden-frameless.mod-linux .titlebar-button-container { + pointer-events: auto; +} +.mod-linux .titlebar-button-container, +.mod-windows .titlebar-button-container { + height: 100%; +} +.mod-linux .titlebar-button, +.mod-windows .titlebar-button { + padding: 0 16px; + display: flex; + align-items: center; +} +.mod-linux .titlebar-button.mod-logo, +.mod-windows .titlebar-button.mod-logo { + padding: 4px 8px; +} +@media (hover: hover) { + .mod-linux .titlebar-button.mod-close:hover, + .mod-windows .titlebar-button.mod-close:hover { + background-color: var(--background-modifier-error); + } + .mod-linux .titlebar-button.mod-close:hover .svg-icon, + .mod-windows .titlebar-button.mod-close:hover .svg-icon { + fill: white; + stroke: white; + } +} +@media screen and (max-width: 300px) { + .titlebar-text { + display: none; + } +} +.is-translucent:not(.is-fullscreen) { + --nav-collapse-icon-color: rgba(var(--mono-rgb-100), 0.3); + --nav-collapse-icon-color-collapsed: rgba(var(--mono-rgb-100), 0.3); + --divider-color: rgba(0, 0, 0, 0.15); +} +.is-translucent:not(.is-fullscreen) .titlebar, +.is-translucent:not(.is-fullscreen) .app-container { + background-color: var(--workspace-background-translucent); +} +.is-translucent:not(.is-fullscreen) .workspace-ribbon.mod-left, +.is-translucent:not(.is-fullscreen) .workspace-tabs, +.is-translucent:not(.is-fullscreen) .workspace-split, +.is-translucent:not(.is-fullscreen) .sidebar-toggle-button, +.is-translucent:not(.is-fullscreen) .mod-left-split .workspace-tab-header-container, +.is-translucent:not(.is-fullscreen) .mod-right-split .workspace-tab-header-container, +.is-translucent:not(.is-fullscreen) .mod-top .workspace-tab-header-container, +.is-translucent:not(.is-fullscreen) .workspace-tabs .workspace-leaf, +.is-translucent:not(.is-fullscreen) .workspace-sidedock-vault-profile, +.is-translucent:not(.is-fullscreen) .workspace-ribbon.mod-left:before { + background-color: transparent !important; +} +.value-list-container { + vertical-align: top; +} +.value-list-element { + align-items: center; +} +body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile { + background-color: var(--background-secondary); + border-top: var(--tab-outline-width) solid var(--tab-outline-color); + display: var(--vault-profile-display); + align-items: center; + height: unset; + flex: 0 0 auto; + gap: var(--size-4-1); + justify-content: space-between; + padding: var(--size-4-2) var(--size-4-2); + order: 1; +} +body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher { + color: var(--vault-profile-color); + border-radius: var(--radius-s); + display: flex; + flex-grow: 1; + align-items: center; + gap: var(--size-4-2); + overflow: hidden; + padding: var(--size-4-1) var(--size-4-2); +} +body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher.has-active-menu { + background-color: var(--background-modifier-hover); +} +body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher.has-active-menu .workspace-drawer-vault-switcher-icon { + color: var(--text-muted); +} +@media (hover: hover) { + body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher:hover { + color: var(--vault-profile-color-hover); + background-color: var(--background-modifier-hover); + } + body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher:hover .workspace-drawer-vault-switcher-icon { + color: var(--text-muted); + } +} +body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-name { + font-size: var(--vault-profile-font-size); + font-weight: var(--vault-profile-font-weight); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher-icon { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + display: flex; + align-items: center; + color: var(--text-faint); +} +body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions { + display: var(--vault-profile-actions-display); + align-items: center; +} +.workspace { + display: flex; + flex: 1 0 0; + transition: padding-left 100ms ease-in; + overflow: hidden; + height: 100%; +} +.is-translucent .workspace { + background-color: transparent; +} +.workspace-split { + display: flex; + background-color: var(--tab-container-background); + position: relative; +} +.workspace-split.mod-vertical > .workspace-split:last-child { + padding-inline-end: 0; +} +.workspace-split:last-child:not(.mod-right-split) > .workspace-leaf-resize-handle { + display: none; +} +.workspace-split.mod-vertical { + flex-direction: row; +} +.workspace-split.mod-horizontal { + flex-direction: column; +} +.workspace-split.mod-root { + background-color: var(--background-primary); +} +.workspace-leaf { + display: flex; + flex-direction: column; + position: relative; + contain: strict !important; + overflow: hidden; + isolation: isolate; +} +.workspace-split.mod-root .workspace-leaf:last-child .workspace-leaf-resize-handle { + display: none; +} +.workspace-leaf.is-highlighted:before { + content: ' '; + position: absolute; + height: 100%; + width: 100%; + top: 0; + inset-inline-start: 0; + background-color: hsla(var(--interactive-accent-hsl), 0.25); + z-index: var(--layer-popover); + pointer-events: none; +} +.workspace > .workspace-leaf, +.workspace > .workspace-split { + height: 100%; + width: 100%; +} +/* Resize handles */ +.workspace-split.mod-root > .workspace-leaf-resize-handle { + display: none; +} +.workspace-leaf-resize-handle { + -webkit-app-region: no-drag; + position: absolute; + z-index: var(--layer-cover); + background-color: transparent; + transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out, opacity 200ms ease-in-out; + border-color: var(--divider-color); + border-top: 0; + border-width: var(--divider-width); + margin: 0; +} +@media (hover: hover) { + .workspace-leaf-resize-handle:hover { + background-color: var(--divider-color-hover); + border-color: var(--divider-color-hover); + } + .is-translucent .workspace-leaf-resize-handle:hover { + background-color: var(--divider-color-hover); + border-color: var(--divider-color-hover); + } +} +.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle { + bottom: 0; + inset-inline-start: 0; + border-bottom-style: solid; + border-bottom-width: var(--divider-width); + height: var(--divider-width-hover); + width: 100%; + cursor: row-resize; +} +.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle, +.workspace-split.mod-left-split > .workspace-leaf-resize-handle, +.workspace-split.mod-right-split > .workspace-leaf-resize-handle { + inset-inline-end: 0; + bottom: 0; + width: var(--divider-width-hover); + height: var(--divider-vertical-height); + cursor: col-resize; +} +.workspace-split.mod-right-split > .workspace-leaf-resize-handle { + border-inline-start-style: solid; + border-inline-start-width: var(--divider-width); +} +.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle, +.workspace-split.mod-left-split > .workspace-leaf-resize-handle { + border-inline-end-style: solid; + border-inline-end-width: var(--divider-width); +} +.workspace-split.mod-right-split > .workspace-leaf-resize-handle { + inset-inline-end: unset; + inset-inline-start: 0; +} +.workspace-split.mod-vertical > * { + height: 100%; + flex: 1 0 0; + width: 0; +} +.workspace-split.mod-horizontal > * { + width: 100%; + flex: 1 0 0; + height: 0; +} +.workspace-split.mod-left-split, +.workspace-split.mod-right-split { + flex: 0 0 auto; +} +.is-translucent .workspace-split.mod-left-split.is-sidedock-collapsed .workspace-tabs, +.is-translucent .workspace-split.mod-right-split.is-sidedock-collapsed .workspace-tabs { + visibility: hidden; +} +.workspace-split.mod-left-split > .workspace-leaf-resize-handle, +.workspace-split.mod-right-split > .workspace-leaf-resize-handle { + z-index: var(--layer-status-bar); + height: var(--divider-vertical-height); + top: unset; + bottom: 0; +} +.view-header-nav-buttons { + --icon-size: var(--icon-s); + align-items: center; + display: flex; +} +body.is-phone .view-header-nav-buttons { + display: none; +} +.workspace-leaf-content { + width: 100%; + height: 100%; + overflow: hidden; + position: relative; + display: flex; + flex-direction: column; +} +.workspace-leaf-content .view-content { + padding: var(--size-4-3) var(--size-4-3) var(--size-4-8); + padding-bottom: max(var(--safe-area-inset-bottom), var(--size-4-8)); + overflow: auto; +} +.workspace-leaf-content[data-type='markdown'] .view-content { + padding: 0; + overflow: hidden; +} +.workspace-leaf-content[data-type='backlink'] .view-content, +.workspace-leaf-content[data-type='outgoing-link'] .view-content { + padding: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} +.workspace-leaf-content .image-container, +.workspace-leaf-content .audio-container, +.workspace-leaf-content .video-container { + text-align: center; +} +.workspace-leaf-content img:not([width]), +.workspace-leaf-content audio, +.workspace-leaf-content video { + max-width: 100%; +} +.workspace-fake-target-overlay, +.workspace-drop-overlay { + will-change: transform, width, height; + position: fixed; + inset-inline-start: 0; + top: 0; + width: 0; + height: 0; + transform: translate(0, 0); + transition: all 100ms ease-in-out; + z-index: var(--layer-cover); + pointer-events: none; +} +.workspace-drop-overlay:before { + content: ' '; + position: absolute; + width: calc(100% - 6px); + height: calc(100% - 6px); + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: auto; + background-color: var(--interactive-accent); + border-radius: var(--radius-m); + opacity: 0.5; +} +.workspace-fake-target-container { + visibility: hidden; + position: absolute; + pointer-events: none; + top: 0; + inset-inline-start: 0; +} +.workspace-fake-target-overlay { + visibility: visible; + overflow: hidden; + background-color: var(--background-primary); + /* + &.is-in-sidebar { + background-color: var(--background-secondary); + .workspace-leaf { + background-color: var(--background-secondary); + } + }*/ +} +.workspace-fake-target-overlay > * { + width: 100%; + height: 100%; +} +.workspace-tabs { + overflow: hidden; + display: flex; + flex-direction: column; + position: relative; +} +.workspace-tabs > * { + flex: 1 0 0; +} +.workspace-tabs .workspace-leaf { + height: 100%; +} +.workspace-split.mod-right-split .workspace-tabs { + padding-inline-end: 0; +} +.workspace-tabs:last-child .workspace-leaf-resize-handle { + display: none; +} +.workspace-fake-target-overlay:not(.is-in-sidebar) .workspace-tabs .workspace-leaf, +.mod-root .workspace-tabs .workspace-leaf { + background-color: var(--background-primary); +} +.workspace-tabs .workspace-leaf { + background-color: var(--background-secondary); +} +.workspace-tabs .workspace-leaf .view-content { + height: 100%; +} +.workspace-tab-header-container { + display: flex; + background-color: var(--tab-container-background); + height: var(--header-height); + border-bottom: var(--tab-outline-width) solid var(--tab-outline-color); + flex: 0 0 auto; + padding-left: var(--size-4-2); + padding-right: var(--size-4-2); + position: relative; +} +.is-phone .workspace-tab-header-container { + display: none; +} +.workspace-tab-header-container-inner { + -webkit-app-region: drag; + display: flex; + flex: 0 1 auto; + overflow: auto; + margin: 6px -5px calc(var(--tab-outline-width) * -1); + padding: 1px 15px 0; +} +.mod-root .workspace-tab-header-container-inner { + padding: 1px 15px 0; +} +.workspace-tab-header-container-inner::-webkit-scrollbar, +.workspace-tab-header-container-inner::-webkit-scrollbar-thumb { + display: none; +} +.workspace-tab-header-inner-icon { + flex: 0 0 auto; + display: flex; +} +/* Hide tab icon if it's a note */ +.mod-root .workspace-tab-header[data-type="markdown"] .workspace-tab-header-inner-icon, +.mod-root .workspace-tab-header[data-type="empty"] .workspace-tab-header-inner-icon { + display: none; +} +.mod-root .workspace-tab-header.mod-unknown { + font-style: italic; +} +.is-focused .workspace-tab-header { + color: var(--tab-text-color-focused); +} +.is-focused .workspace-tab-header.is-active { + color: var(--tab-text-color-focused-active); +} +.is-focused .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon, +.is-focused .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title { + color: var(--tab-text-color-focused-active-current); +} +.is-focused .mod-active .workspace-tab-header.is-active.is-highlighted .workspace-tab-header-inner-icon, +.is-focused .mod-active .workspace-tab-header.is-active.is-highlighted .workspace-tab-header-inner-title { + color: var(--tab-text-color-focused-highlighted); +} +.is-focused .workspace-tab-header.active.is-highlighted .workspace-tab-header-inner-icon, +.is-focused .workspace-tab-header.is-highlighted .workspace-tab-header-inner-icon, +.is-focused .workspace-tab-header.active.is-highlighted .workspace-tab-header-inner-title, +.is-focused .workspace-tab-header.is-highlighted .workspace-tab-header-inner-title { + color: var(--tab-text-color-focused-highlighted); +} +.workspace-tab-header { + -webkit-app-region: no-drag; + color: var(--tab-text-color); + display: flex; + position: relative; + padding: 1px 4px 3.5px; + scroll-margin-inline-start: var(--size-2-3); + scroll-margin-inline-end: var(--size-4-1); + text-align: center; + border-radius: var(--tab-radius-active); + /* Decorative curves */ +} +@media (hover: hover) { + .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner { + background-color: var(--background-modifier-hover); + } +} +.workspace-tab-header:not(.is-active).mobile-tap .workspace-tab-header-inner { + background-color: var(--background-modifier-hover); +} +.workspace-tab-header::before, +.workspace-tab-header::after { + position: absolute; + bottom: 0; + content: ''; + width: calc(var(--tab-curve) * 2); + height: calc(var(--tab-curve) * 2); + border-radius: 100%; + box-shadow: 0 0 0 calc(var(--tab-curve) * 3) transparent; +} +.workspace-tab-header::before { + left: calc(var(--tab-curve) * -2); + clip-path: inset(50% calc(var(--tab-curve) * -1) 0 50%); +} +.workspace-tab-header::after { + right: calc(var(--tab-curve) * -2); + clip-path: inset(50% 50% 0 calc(var(--tab-curve) * -1)); +} +.workspace-tab-header.is-active { + box-shadow: 0 0 0 var(--tab-outline-width) var(--tab-outline-color); + color: var(--tab-text-color-active); + background-color: var(--tab-background-active); +} +.workspace-split.mod-root .workspace-tab-header.is-active::before, +.workspace-split.mod-root .workspace-tab-header.is-active::after { + box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve) * 4) var(--tab-background-active); +} +.workspace-tab-header.is-active .workspace-tab-header-inner::after { + opacity: 0; +} +.workspace-tab-container { + display: flex; + overflow: hidden; +} +.workspace-tab-container > * { + flex: 1 0 0; +} +.workspace-tab-header-inner { + align-items: center; + display: flex; + gap: var(--size-2-1); + height: 100%; + border-radius: var(--tab-radius); + overflow: hidden; + padding: 0 8px; + width: 100%; +} +.workspace-tab-header-inner .workspace-tab-header-inner-icon { + color: var(--icon-color); + opacity: var(--icon-opacity); +} +@media (hover: hover) { + .workspace-tab-header-inner:hover .workspace-tab-header-inner-icon { + color: var(--icon-color-hover); + opacity: var(--icon-opacity-hover); + } +} +.mod-root .workspace-tab-header-inner { + padding-top: 0; + padding-inline-end: 3px; + padding-inline-start: 6px; + padding-bottom: 0; +} +.workspace-tab-header-inner-title { + flex: 1 1 auto; + font-size: var(--tab-font-size); + font-weight: var(--tab-font-weight); + overflow: hidden; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; +} +.workspace-tab-header-status-container { + display: flex; + flex-shrink: 0; + gap: var(--size-2-1); + justify-content: center; +} +.workspace-tab-header-status-container:empty { + display: none; +} +.workspace-tab-header-status-icon, +.workspace-tab-header-inner-close-button { + cursor: var(--cursor); + padding: var(--size-2-1); + border-radius: var(--radius-s); + display: flex; + align-items: center; + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); +} +@media (hover: hover) { + .workspace-tab-header.is-active .workspace-tab-header-status-icon:hover, + .workspace-tab-header.is-active .workspace-tab-header-inner-close-button:hover { + background-color: var(--background-modifier-hover); + } + .mod-root .workspace-tab-header.is-active .workspace-tab-header-status-icon.mod-linked:hover, + .mod-root .workspace-tab-header.is-active .workspace-tab-header-inner-close-button.mod-linked:hover, + .mod-root .workspace-tab-header.is-active .workspace-tab-header-status-icon.mod-pinned:hover, + .mod-root .workspace-tab-header.is-active .workspace-tab-header-inner-close-button.mod-pinned:hover { + background-color: var(--background-modifier-active-hover); + } +} +.workspace-tab-header.is-active .workspace-tab-header-status-icon::after, +.workspace-tab-header.is-active .workspace-tab-header-inner-close-button::after { + background-color: transparent; +} +@media (hover: hover) { + .workspace-tab-header-inner-close-button:hover { + color: var(--tab-text-color-focused-active-current); + } +} +.workspace-tab-header:hover .workspace-tab-header-inner-close-button { + color: var(--tab-text-color-focused); +} +@media (hover: hover) { + .workspace-tab-header:hover .workspace-tab-header-inner-close-button:hover { + color: var(--tab-text-color-focused-active-current); + } +} +.workspace-tab-header.is-active .workspace-tab-header-inner-close-button { + color: var(--tab-text-color-focused-active); +} +@media (hover: hover) { + .workspace-tab-header.is-active .workspace-tab-header-inner-close-button:hover { + color: var(--tab-text-color-focused-active-current); + } +} +.workspace-sidedock-empty-state { + font-size: var(--font-ui-small); + padding: 20px 30px; +} +.workspace-tab-header.is-before-active .workspace-tab-header-inner { + border-bottom-right-radius: 10px; +} +.workspace-tab-header-spacer { + display: flex; + flex-grow: 1; +} +body:not(.is-grabbing):not(.is-fullscreen) .workspace-tabs.mod-top .workspace-tab-header-spacer { + -webkit-app-region: drag; +} +body:not(.is-grabbing):not(.is-fullscreen).is-hidden-frameless .mod-top .workspace-tab-header-container { + -webkit-app-region: drag; +} +.workspace-tab-header-tab-list, +.workspace-tab-header-new-tab { + -webkit-app-region: no-drag; + display: none; + z-index: 1; + align-items: center; +} +.titlebar .workspace-tab-header-tab-list, +.titlebar .workspace-tab-header-new-tab, +.mod-root .workspace-tab-header-tab-list, +.mod-root .workspace-tab-header-new-tab { + display: flex; +} +.workspace-tab-header-tab-list .clickable-icon, +.workspace-tab-header-new-tab .clickable-icon { + color: var(--icon-color); + padding: var(--size-2-2); + --icon-size: var(--icon-m); + --icon-stroke: var(--icon-m-stroke-width); + align-items: center; +} +.workspace-tab-header-new-tab { + padding: var(--size-4-2) 0 var(--size-2-3); + margin-inline-end: var(--size-4-3); + margin-inline-start: -4px; +} +.workspace-tab-header-tab-list { + margin-inline-end: var(--size-4-1); + padding: var(--size-4-2) 0 var(--size-2-3); +} +/* Remove tab titles in sidebar */ +.workspace-fake-target-overlay.is-in-sidebar .workspace-tab-header-inner-title, +.mod-left-split .workspace-tab-header-inner-title, +.mod-right-split .workspace-tab-header-inner-title { + display: var(--sidebar-tab-text-display); +} +.workspace-fake-target-overlay.is-in-sidebar .workspace-tab-header-inner-close-button, +.mod-left-split .workspace-tab-header-inner-close-button, +.mod-right-split .workspace-tab-header-inner-close-button { + display: none; +} +body > .workspace-split { + height: 100%; +} +.mod-root .workspace-tabs > .workspace-leaf .view-header-title { + white-space: normal; +} +.mod-root .workspace-tab-header-status-icon { + color: var(--text-accent); +} +.mod-root .workspace-tab-header-status-icon, +.mod-root .workspace-tab-header-inner-icon { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); +} +.mod-root .mod-pinned, +.mod-root .workspace-tab-header-inner-close-button { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); +} +.mod-right-split .markdown-preview-view, +.mod-left-split .markdown-preview-view, +.mod-right-split .markdown-source-view.mod-cm6 .cm-scroller, +.mod-left-split .markdown-source-view.mod-cm6 .cm-scroller { + --file-margins: var(--size-4-5); +} +.mod-right-split .markdown-preview-view, +.mod-left-split .markdown-preview-view, +.mod-right-split .markdown-source-view, +.mod-left-split .markdown-source-view { + font-size: var(--sidebar-markdown-font-size); +} +/* Sidebar tabs */ +.mod-left-split .workspace-tab-header-container-inner, +.mod-right-split .workspace-tab-header-container-inner { + padding: 1px 0 7px; + margin: 6px 0 0 0; + gap: 3px; +} +.mod-left-split .workspace-tab-header, +.mod-right-split .workspace-tab-header { + box-shadow: none; + background-color: transparent; + padding: 0; + margin: 0; + border-radius: var(--radius-s); +} +.mod-left-split .workspace-tab-header:before, +.mod-right-split .workspace-tab-header:before, +.mod-left-split .workspace-tab-header:after, +.mod-right-split .workspace-tab-header:after { + display: none; +} +.mod-left-split .workspace-tab-header:active .workspace-tab-header-inner-icon, +.mod-right-split .workspace-tab-header:active .workspace-tab-header-inner-icon { + color: var(--icon-color-focused); +} +.mod-left-split .workspace-tab-header.has-active-menu, +.mod-right-split .workspace-tab-header.has-active-menu, +.mod-left-split .workspace-tab-header.is-active, +.mod-right-split .workspace-tab-header.is-active { + background-color: var(--background-modifier-hover); +} +@media (hover: hover) { + .mod-left-split .workspace-tab-header.has-active-menu:hover, + .mod-right-split .workspace-tab-header.has-active-menu:hover, + .mod-left-split .workspace-tab-header.is-active:hover, + .mod-right-split .workspace-tab-header.is-active:hover { + background-color: var(--background-modifier-hover); + } +} +.mod-left-split .workspace-tab-header.has-active-menu .workspace-tab-header-inner-icon, +.mod-right-split .workspace-tab-header.has-active-menu .workspace-tab-header-inner-icon, +.mod-left-split .workspace-tab-header.is-active .workspace-tab-header-inner-icon, +.mod-right-split .workspace-tab-header.is-active .workspace-tab-header-inner-icon { + opacity: var(--icon-opacity-active); + color: var(--icon-color-focused); +} +.workspace .mod-root .workspace-tab-header { + -webkit-app-region: no-drag; + container-type: inline-size; + container-name: tab-header; + flex: 1 1 0; + width: var(--tab-width); + min-width: 0; + max-width: var(--tab-max-width); + padding: 1px 3px 3.5px; +} +.workspace .mod-root .workspace-tab-header .workspace-tab-header-status-container { + position: sticky; + inset-inline-end: 0; +} +.workspace .mod-root .workspace-tab-header .workspace-tab-header-inner-close-button { + position: sticky; + inset-inline-end: 0; +} +.workspace .mod-root .workspace-tab-header.is-active .workspace-tab-header-inner-close-button { + pointer-events: all; + opacity: 1; +} +.workspace .mod-root .workspace-tab-header.is-active .workspace-tab-header-inner-close-button svg { + opacity: 1; +} +.workspace .mod-root .workspace-tab-header.is-active .workspace-tab-header-inner-close-button::after { + background-color: transparent; +} +.workspace .mod-root .workspace-tab-header-inner::after { + position: absolute; + inset-inline-end: -0.5px; + width: 1px; + background-color: var(--tab-divider-color); + content: ''; + height: 20px; +} +.workspace .mod-root .workspace-tab-header-inner-icon { + display: flex; + padding-inline-end: 4px; +} +.workspace .mod-root .workspace-tab-header[data-type="markdown"] .workspace-tab-header-inner-icon, +.workspace .mod-root .workspace-tab-header[data-type="empty"] .workspace-tab-header-inner-icon { + display: none; +} +.workspace .mod-root .workspace-tab-header-inner-title { + text-overflow: ellipsis; + width: 100%; +} +.workspace .mod-root .workspace-tab-header-status-container.mod-linked { + display: none; +} +.workspace .mod-root .workspace-tab-header-spacer { + flex-shrink: 1; +} +.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button { + display: none; +} +@media (hover: hover) { + .workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:hover .workspace-tab-header-inner-close-button { + display: flex; + } +} +@container tab-header (width < 3rem) { + .workspace .workspace-split.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button { + display: none; + } +} +/* Stacked tabs */ +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-header-container-inner { + padding: 0 0 0 var(--size-4-3); + margin: 0; +} +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container { + overflow-x: auto; + overflow-y: hidden; + position: relative; + display: flex; + flex-direction: row; +} +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container > * { + flex: 0 0 auto; + position: sticky; +} +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header { + width: var(--tab-stacked-header-width); + writing-mode: var(--tab-stacked-text-writing-mode); + text-orientation: sideways; + background-color: var(--background-primary); + padding: 0; + border-radius: 0; + box-shadow: -1px 0 0 0 var(--tab-outline-color), var(--tab-stacked-shadow); + --no-tooltip: true; +} +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header:before, +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header:after { + display: none; +} +@media (hover: hover) { + .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header:hover .workspace-tab-header-inner { + background-color: transparent; + } +} +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner { + padding: var(--size-4-2) var(--size-4-2) var(--size-4-4); + border-radius: 0; +} +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner:after { + display: none; +} +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-title { + order: 3; + width: auto; + -webkit-mask-image: unset; + padding: var(--size-4-1) 0; + transform: var(--tab-stacked-text-transform); + text-align: var(--tab-stacked-text-align); + font-weight: var(--tab-stacked-font-weight); + font-size: var(--tab-stacked-font-size); + text-orientation: mixed; +} +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-icon { + order: 2; + cursor: grab; + display: flex; + padding: var(--size-2-2); + border-radius: var(--radius-s); +} +@media (hover: hover) { + .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-icon:hover { + background-color: var(--background-modifier-hover); + } +} +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-icon:active { + cursor: grabbing; +} +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-close-button { + color: var(--tab-text-color-focused); +} +@media (hover: hover) { + .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-close-button:hover { + background-color: var(--background-modifier-hover); + } +} +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-leaf { + width: var(--tab-stacked-pane-width); + /* This is here for performance reasons - it helps the engine know + what's out of view and avoid rendering them */ + contain: strict; +} +.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-leaf.is-hidden > * { + display: none; +} +.sidebar-toggle-button { + position: relative; + -webkit-app-region: inherit; + height: calc(var(--header-height) - 1px); + display: flex; + justify-content: center; + padding: var(--size-4-2) 0 7px 0; + -webkit-app-region: no-drag; + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); +} +.sidebar-toggle-button .sidebar-toggle-icon-inner { + stroke: none; +} +.workspace.is-left-sidedock-open .sidebar-toggle-button.mod-left .sidebar-toggle-icon-inner { + width: 24%; +} +.sidebar-toggle-button.mod-right .clickable-icon { + transform: scale(-1, 1); +} +.workspace.is-right-sidedock-open .sidebar-toggle-button.mod-right .clickable-icon .sidebar-toggle-icon-inner { + width: 24%; +} +/* Smoother animation for right sidebar button positioning during close */ +.mod-macos.is-hidden-frameless:not(.is-popout-window) .sidebar-toggle-button.mod-right { + background-color: var(--tab-container-background); + position: fixed; + top: 0; + right: 0; + padding-right: var(--size-4-2); + z-index: var(--layer-cover); +} +.mod-macos.is-hidden-frameless:not(.is-popout-window) .workspace .workspace-tabs.mod-top-right-space .workspace-tab-header-container { + padding-right: 38px; +} +@media (forced-colors: active) { + .workspace-tab-header.is-active { + outline: 1px ButtonBorder solid; + } +} +.button-container { + margin-top: 20px; +} +button { + --text-color: var(--text-normal); + -webkit-app-region: no-drag; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--text-color); + font-size: var(--font-ui-small); + border-radius: var(--button-radius); + border: 0; + padding: var(--size-4-1) var(--size-4-3); + height: var(--input-height); + font-weight: var(--input-font-weight); + cursor: var(--cursor); + font-family: inherit; + outline: none; + user-select: none; + white-space: nowrap; +} +button:not(.clickable-icon) { + color: var(--text-color); + background-color: var(--interactive-normal); + box-shadow: var(--input-shadow); +} +button:not(.clickable-icon).mobile-tap { + background-color: var(--interactive-hover); + box-shadow: var(--input-shadow-hover); +} +@media (hover: hover) { + button:hover { + background-color: var(--interactive-hover); + box-shadow: var(--input-shadow-hover); + } +} +button:focus-visible { + box-shadow: 0 0 0 3px var(--background-modifier-border-focus); +} +button[disabled], +button[aria-disabled="true"], +button[disabled="true"] { + cursor: not-allowed; + opacity: 0.7; +} +button.mod-loading { + color: transparent; + position: relative; + white-space: nowrap; + overflow: hidden; + pointer-events: none; +} +button.mod-loading::after { + content: ''; + position: absolute; + width: 12px; + height: 12px; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + border: 2px solid transparent; + border-top-color: var(--text-color); + border-radius: 50%; + animation: spin 1s ease infinite; +} +@media (forced-colors: active) { + button { + border: 1px ButtonBorder solid; + } +} +button.mod-cta { + background-color: var(--interactive-accent); + --text-color: var(--text-on-accent); +} +button.mod-cta.mobile-tap { + background-color: var(--interactive-accent-hover); +} +@media (hover: hover) { + button.mod-cta:hover { + background-color: var(--interactive-accent-hover); + } +} +button.mod-cta:focus-visible { + box-shadow: 0 0 0 3px var(--background-modifier-border-focus); +} +button.mod-muted { + background-color: var(--background-secondary); + --text-color: var(--text-muted); +} +@media (hover: hover) { + button.mod-muted:hover { + background-color: var(--background-secondary); + } +} +button.mod-warning { + background-color: var(--background-modifier-error); + --text-color: var(--text-on-accent); +} +@media (hover: hover) { + button.mod-warning:hover { + background-color: var(--background-modifier-error-hover); + } +} +button.mod-destructive { + --text-color: var(--text-error); +} +.card-container { + display: flex; +} +.card-container.mod-horizontal { + flex-direction: column; +} +.card { + background-color: var(--background-secondary-alt); + border-radius: 4px; + border: 1px solid var(--background-modifier-border); + margin: 0 10px; + padding: 15px 30px; + display: flex; + flex-direction: column; + flex-grow: 1; +} +.card ul { + padding: 0; +} +.card .button-container { + margin: 10px 0; +} +.card-container.mod-horizontal .card { + margin: 10px 0; +} +.card-container.mod-horizontal .card ul { + padding-left: 24px; +} +.card li { + margin: 5px 0; +} +.card.u-clickable { + cursor: var(--cursor); +} +@media (hover: hover) { + .card.u-clickable:hover { + border: 1px solid var(--interactive-accent); + background-color: hsla(var(--interactive-accent-hsl), 0.1); + } +} +.card.is-selected { + border: 1px solid var(--interactive-accent); + background-color: hsla(var(--interactive-accent-hsl), 0.2); +} +.card-title { + text-align: center; + font-size: 20px; + line-height: 30px; + color: var(--text-muted); + margin-bottom: 8px; +} +.card-description { + color: var(--text-muted); + font-size: var(--font-ui-small); + line-height: 20px; + flex-grow: 1; +} +/* Only used in Format Converter so far */ +.changelog-item { + margin: var(--size-4-2) 0; + font-size: var(--font-ui-medium); + line-height: var(--line-height); +} +.changelog-item:before { + content: attr(data-label); + width: 50px; + border-radius: var(--radius-m); + font-size: var(--font-ui-small); + display: inline-block; + text-align: center; + margin-right: 14px; + text-transform: uppercase; + letter-spacing: 1px; + line-height: 22px; +} +.changelog-item.mod-success:before { + background-color: var(--background-modifier-success); + color: var(--text-on-accent); +} +.changelog-item.mod-failed:before { + background-color: var(--background-modifier-error); + color: var(--text-on-accent); +} +.changelog-item.mod-highlighted:before { + background-color: var(--interactive-accent); +} +[contenteditable] { + outline: none; +} +.list-container { + display: flex; + flex-direction: column; + gap: var(--size-4-1); +} +.list-container.has-row-lines .list-item { + margin: 0 calc(var(--size-4-4) * -1); + padding: var(--size-4-2) var(--size-4-4); +} +.list-item { + border-radius: var(--radius-m); + display: flex; + margin: var(--size-4-2) 0; + gap: var(--size-4-2); + align-items: center; +} +.list-item.mod-selectable { + cursor: var(--cursor); +} +.list-item.mod-selectable.mobile-tap { + background-color: var(--background-modifier-hover); +} +@media (hover: hover) { + .list-item.mod-selectable:hover { + background-color: var(--background-modifier-hover); + } +} +.list-item.mod-empty { + color: var(--text-faint); + font-size: var(--font-ui-small); + padding: var(--size-4-4); + text-align: center; + margin: 0 auto; +} +.list-item-separator { + width: 100%; + border-bottom: var(--border-width) solid var(--background-modifier-border); +} +.list-item-actions { + display: flex; + gap: var(--size-4-2); +} +.list-item-part.mod-extended { + flex-grow: 1; + overflow-wrap: anywhere; +} +.list-item-part.clickable-icon { + display: flex; + align-items: center; + justify-content: center; + padding: var(--size-2-2); + cursor: var(--cursor); + border-radius: var(--radius-s); + color: var(--icon-color); +} +.list-item-part.clickable-icon:hover, +.list-item-part.clickable-icon:active { + color: var(--icon-color-hover); + background-color: var(--background-modifier-hover); +} +.list-item-desc { + display: flex; + flex-wrap: wrap; + gap: var(--size-4-2); + color: var(--text-faint); + font-size: var(--font-ui-smaller); + width: 100%; +} +.u-center-text { + text-align: center; +} +.u-faded-text { + color: var(--text-muted); +} +.u-pop { + color: var(--text-accent); + font-weight: var(--font-semibold); +} +.u-break-word { + overflow-wrap: break-word; +} +.u-muted { + color: var(--text-muted); +} +.u-small { + font-size: 0.8em; +} +.u-clickable { + cursor: var(--cursor); +} +/* In file recovery, sync version history, and publish diff */ +.diff-view { + user-select: text; +} +.diff-line { + padding: 0 var(--size-4-2); + white-space: pre-wrap; + word-break: break-word; +} +.diff-line.mod-left { + background-color: rgba(var(--background-modifier-error-rgb), 0.2); +} +.diff-line.mod-left .diff-changed { + background-color: rgba(var(--background-modifier-error-rgb), 0.4); +} +.diff-line.mod-right { + background-color: rgba(var(--background-modifier-success-rgb), 0.2); +} +.diff-line.mod-right .diff-changed { + background-color: rgba(var(--background-modifier-success-rgb), 0.4); +} +.diff-collapsed { + text-align: center; + color: var(--text-muted); + cursor: pointer; + font-size: var(--font-ui-small); + margin: var(--size-4-2) 0; +} +@media (hover: hover) { + .diff-collapsed:hover { + color: var(--text-accent); + } +} +/* Document search and replace */ +/* +Moves search to the top +#todo move this into DOM */ +.markdown-reading-view.is-searching, +.markdown-source-view.is-replacing, +.markdown-source-view.is-searching { + flex-direction: column-reverse; +} +/* Container for dcoument search/replace UI */ +.mod-active .document-search-container { + background-color: var(--background-primary); +} +.document-search-container { + display: flex; + flex-direction: column; + padding: var(--size-4-2) 0; + margin: 0 var(--size-4-4); + gap: var(--size-4-2); + z-index: var(--layer-popover); +} +.document-search, +.document-replace { + width: 100%; + max-width: var(--file-line-width); + margin: 0 auto; + display: flex; + padding: 0 var(--size-4-2); + gap: var(--size-4-2); +} +.document-replace { + display: none; +} +.document-search-container.mod-replace-mode .document-replace { + display: flex; +} +.document-search-input, +.document-replace-input { + flex-grow: 1; +} +.document-search-input.mod-no-match, +.document-replace-input.mod-no-match { + background-color: rgba(var(--background-modifier-error-rgb), 0.2); +} +@media (hover: hover) { + .document-search-input.mod-no-match:hover, + .document-replace-input.mod-no-match:hover { + background-color: rgba(var(--background-modifier-error-rgb), 0.2); + } +} +.document-search-count { + color: var(--text-muted); + font-size: var(--font-ui-smaller); + font-variant-numeric: tabular-nums; + position: absolute; + transform: translateY(-50%); + top: 50%; + inset-inline-end: var(--size-4-2); +} +.document-replace-buttons, +.document-search-buttons { + display: flex; + gap: var(--size-4-1); + align-items: center; +} +.document-search-button { + font-size: var(--font-ui-small); + color: var(--text-muted); +} +/* Read */ +.markdown-rendered .search-highlight > div { + position: absolute; + pointer-events: none; + box-shadow: 0 0 0px 2px var(--text-normal); + opacity: 0.3; + mix-blend-mode: var(--highlight-mix-blend-mode); + border-radius: 2px; +} +.markdown-rendered .search-highlight > div.is-active { + box-shadow: 0 0 0px 3px var(--text-accent); + opacity: 1; +} +.cm-s-obsidian span.obsidian-search-match-highlight { + box-shadow: 0 0 0px 3px var(--text-accent); + mix-blend-mode: var(--highlight-mix-blend-mode); + border-radius: 2px; +} +/* Edit */ +.markdown-source-view.mod-cm6 .document-search-container { + flex: 0 0 auto; +} +.cm-s-obsidian span.cm-highlight.obsidian-search-match-highlight { + background-color: var(--text-selection); +} +/* class applies to select element itself, not a wrapper element */ +select, +.combobox-button, +.dropdown { + -webkit-app-region: no-drag; + height: var(--input-height); + font-size: var(--font-ui-small); + font-family: inherit; + font-weight: var(--input-font-weight); + color: var(--text-normal); + line-height: var(--line-height-tight); + max-width: 100%; + /* useful when width is set to anything other than 100% */ + box-sizing: border-box; + margin: 0; + border: 0; + box-shadow: var(--input-shadow); + border-radius: var(--input-radius); + -webkit-appearance: none; + appearance: none; + background-color: var(--dropdown-background); + padding: var(--dropdown-padding); + background-repeat: no-repeat, repeat; + /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/ + background-position: var(--dropdown-background-position); + /* icon size, then gradient */ + background-size: var(--dropdown-background-size); + background-blend-mode: hard-light; +} +@media (hover: hover) { + select:hover, + .combobox-button:hover, + .dropdown:hover { + box-shadow: var(--input-shadow-hover); + background-color: var(--dropdown-background-hover); + } +} +select.mobile-tap, +.combobox-button.mobile-tap, +.dropdown.mobile-tap { + box-shadow: var(--input-shadow-hover); + background-color: var(--dropdown-background-hover); +} +select:focus, +.combobox-button:focus, +.dropdown:focus { + box-shadow: 0 0 0px 3px var(--background-modifier-border-focus); + outline: none; +} +@media (forced-colors: active) { + select, + .dropdown { + border: 1px ButtonBorder solid; + } +} +.dropdown { + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 opacity=%270.9%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 %3E%3Cpath d=%27m7 15 5 5 5-5%27/%3E%3Cpath d=%27m7 9 5-5 5 5%27/%3E%3C/svg%3E"); +} +.theme-dark .dropdown { + background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23FFF%27 opacity=%270.6%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 %3E%3Cpath d=%27m7 15 5 5 5-5%27/%3E%3Cpath d=%27m7 9 5-5 5 5%27/%3E%3C/svg%3E"); +} +/* Set options to normal weight */ +.dropdown option { + font-weight: normal; + background-color: var(--background-primary); +} +.combobox:not(.has-input-focus) .suggestion-item.is-selected { + background-color: transparent; +} +.combobox .search-input-container { + --search-icon-color: var(--text-faint); + margin-top: 2px; +} +.combobox .search-input-container input[type=search] { + border: 0; + box-shadow: none; + background-color: transparent; +} +.combobox .suggestion-item { + font-size: var(--font-ui-small); + padding: var(--size-2-3) var(--size-4-2) var(--size-2-3) var(--size-4-2); +} +.combobox-button { + display: flex; + align-items: center; + gap: var(--size-2-2); + min-height: var(--input-height); + padding-inline-start: var(--size-4-2); + padding-inline-end: var(--size-2-3); + overflow: hidden; + white-space: nowrap; + border-style: solid; + border-color: var(--background-modifier-border); +} +.combobox-button .combobox-button-icon { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + color: var(--text-muted); + display: flex; + align-items: center; +} +.combobox-button .combobox-button-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-inline-end: auto; +} +.combobox-button .combobox-button-label:empty:before { + content: attr(placeholder); + color: var(--input-placeholder-color); + pointer-events: none; +} +.combobox-button .combobox-clear-button { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + color: var(--text-muted); + display: flex; + align-items: center; +} +.combobox-button:not(.mod-clearable) .combobox-clear-button { + display: none; +} +.combobox-button .combobox-button-chevron { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + align-items: center; + display: flex; +} +.combobox-button:last-child { + border-inline-end-width: 0; +} +.combobox-button.has-focus, +.combobox-button:focus { + background-color: var(--metadata-label-background-active); + box-shadow: 0 0 0px 3px var(--background-modifier-border-focus); +} +.combobox-button.mod-error { + box-shadow: inset 0 0 0 var(--border-width) var(--background-modifier-error); +} +.is-mobile .combobox-button { + gap: var(--size-4-2); +} +.is-mobile .combobox-clear-button { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); +} +.is-phone .combobox.suggestion-container { + max-height: calc(100vh - var(--view-header-height) - var(--safe-area-inset-top)); +} +.is-phone .combobox .search-input-container { + margin: var(--size-4-1) var(--size-4-3); +} +.is-phone .combobox .search-input-container input[type=search] { + border-radius: var(--radius-l); + background-color: var(--background-modifier-form-field); +} +.flair { + background-color: var(--flair-background); + border-radius: var(--radius-s); + color: var(--flair-color); + font-size: 10px; + letter-spacing: 0.05em; + margin-inline-start: var(--size-4-2); + padding: var(--size-2-1) var(--size-2-2); + position: relative; + text-transform: uppercase; + white-space: nowrap; + vertical-align: middle; +} +.flair.mod-flat { + vertical-align: top; +} +.flair.mod-pop { + --flair-background: var(--interactive-accent); + --flair-color: var(--text-on-accent); +} +.markdown-preview-view:not(.allow-fold-lists) .list-collapse-indicator, +.markdown-preview-view:not(.allow-fold-headings) .heading-collapse-indicator { + display: none; +} +/* #todo Reduce specificity here */ +.cm-fold-indicator .collapse-indicator, +.cm-gutterElement .collapse-indicator, +.collapse-indicator, +.fold-gutter { + opacity: 0; +} +/* +.is-mobile & .cm-fold-indicator .collapse-indicator { + opacity: 1; +}*/ +h1:hover .collapse-indicator, +h2:hover .collapse-indicator, +h3:hover .collapse-indicator, +h4:hover .collapse-indicator, +h5:hover .collapse-indicator, +h6:hover .collapse-indicator, +.collapse-indicator:hover, +.is-collapsed .collapse-indicator, +.cm-fold-indicator.is-collapsed .collapse-indicator, +.cm-gutterElement:hover .collapse-indicator, +.cm-gutterElement .is-collapsed .collapse-indicator, +.cm-line:hover .cm-fold-indicator .collapse-indicator, +.fold-gutter.is-collapsed, +.fold-gutter:hover, +.metadata-properties-heading:hover .collapse-indicator { + opacity: 1; +} +.collapse-icon { + display: flex; + align-items: center; +} +.collapse-icon:before { + content: "\200B"; +} +.collapse-icon svg.svg-icon { + color: var(--nav-collapse-icon-color); + stroke-width: 4px; + width: 10px; + height: 10px; + transition: transform 100ms ease-in-out; +} +.collapse-icon.is-collapsed svg.svg-icon { + transform: rotate(calc(var(--direction) * -1 * 90deg)); +} +.view-content .list-collapse-indicator svg.svg-icon, +.view-content .collapse-indicator svg.svg-icon { + color: var(--collapse-icon-color); +} +.view-content .is-collapsed .list-collapse-indicator svg.svg-icon, +.view-content .is-collapsed .collapse-indicator svg.svg-icon { + color: var(--collapse-icon-color-collapsed); +} +.markdown-preview-view .collapse-indicator { + display: inline-flex; + position: absolute; + cursor: var(--cursor); + user-select: none; +} +.markdown-preview-view .collapse-indicator .svg-icon { + vertical-align: middle; +} +.markdown-preview-view li.is-collapsed > ul, +.markdown-preview-view li.is-collapsed > ol { + display: none; +} +.markdown-preview-view .heading-collapse-indicator { + margin-inline-start: -22px; + padding: 0 6px; +} +.markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator { + opacity: 0; +} +.markdown-source-view.mod-cm6 .cm-line:hover .cm-fold-indicator .collapse-indicator, +.markdown-source-view.mod-cm6 .cm-fold-indicator.is-collapsed .collapse-indicator { + opacity: 1; +} +.markdown-source-view.mod-cm6 .cm-foldPlaceholder { + color: var(--text-faint); + background-color: transparent; + border: none; + margin-inline-start: 8px; + user-select: none; +} +.markdown-source-view.mod-cm6 .cm-fold-indicator { + display: inline-block; + position: relative; + z-index: 1; +} +.markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator { + position: absolute; + top: 0; + inset-inline-end: 0; + height: 100%; + cursor: var(--cursor); + padding-inline-end: 5px; +} +/* Consistency for hover states across all icon buttons */ +svg.svg-icon { + height: var(--icon-size); + width: var(--icon-size); + stroke-width: var(--icon-stroke); +} +/* Parent container of button rows */ +.nav-buttons-container, +.view-actions, +.workspace-tab-header-inner, +.side-dock-settings, +.side-dock-actions { + display: flex; + justify-content: center; +} +.side-dock-settings, +.side-dock-actions { + gap: var(--size-2-3); +} +.view-actions { + gap: 0; + align-items: center; + --icon-size: var(--icon-s); +} +.nav-file-icon .svg-icon, +.suggestion-flair .svg-icon, +.menu-item-icon .svg-icon, +.status-bar-item .svg-icon { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); +} +.clickable-icon.side-dock-ribbon-action .svg-icon, +.mod-left-split .workspace-tab-header-inner-icon .svg-icon, +.mod-right-split .workspace-tab-header-inner-icon .svg-icon { + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); +} +.clickable-icon.side-dock-ribbon-action:active, +.mod-left-split .workspace-tab-header-inner-icon:active, +.mod-right-split .workspace-tab-header-inner-icon:active { + color: var(--icon-color-focused); +} +/* Use horizontal more actions "..." on macOS/iOS per OS guidelines */ +.is-ios .lucide-more-vertical, +.mod-macos .lucide-more-vertical { + transform: rotate(90deg); +} +/* Parent button containers for SVG button icons */ +.clickable-icon { + -webkit-app-region: no-drag; + background-color: transparent; + display: flex; + align-items: center; + justify-content: center; + padding: var(--size-2-2) var(--size-2-3); + cursor: var(--cursor); + border-radius: var(--clickable-icon-radius); + color: var(--icon-color); + opacity: var(--icon-opacity); + transition: opacity var(--anim-duration-fast) ease-in-out; + height: auto; +} +@media (hover: hover) { + .clickable-icon:hover { + box-shadow: none; + opacity: var(--icon-opacity-hover); + color: var(--icon-color-hover); + background-color: var(--background-modifier-hover); + } + .clickable-icon.has-active-menu, + .clickable-icon:active { + opacity: var(--icon-opacity-hover); + color: var(--icon-color-focused); + background-color: var(--background-modifier-hover); + } +} +.clickable-icon.is-active { + opacity: var(--icon-opacity-hover); + color: var(--icon-color-active); + background-color: var(--background-modifier-active-hover); +} +@media (hover: hover) { + .clickable-icon.is-active:hover { + background-color: var(--background-modifier-active-hover); + } +} +.is-mobile .clickable-icon { + transition: opacity 0.1s ease-in-out; +} +.clickable-icon.mobile-tap { + opacity: var(--icon-opacity-hover); +} +.clickable-icon[aria-disabled='true'] { + background-color: unset; + color: var(--text-muted); + opacity: 0.4; +} +@media (hover: hover) { + .clickable-icon[aria-disabled='true']:hover { + background-color: unset; + } +} +.clickable-icon.mod-warning { + color: var(--text-error); +} +.clickable-icon.mod-filled svg { + fill: var(--icon-color); +} +.setting-item-control .clickable-icon { + padding: var(--size-2-2); +} +.text-icon-button { + -webkit-app-region: no-drag; + display: inline-flex; + overflow: hidden; + align-items: center; + color: var(--text-muted); + font-size: var(--font-ui-small); + border-radius: var(--button-radius); + padding: var(--size-2-2); + font-weight: var(--input-font-weight); + cursor: var(--cursor); + font-family: inherit; + gap: var(--size-2-2); + user-select: none; + white-space: nowrap; +} +.text-icon-button .flair { + margin: 0; +} +.text-icon-button.is-active { + color: var(--icon-color-active); +} +.text-icon-button .text-button-icon { + display: flex; + align-items: center; + justify-content: center; +} +.text-icon-button .text-button-label { + overflow: hidden; + text-overflow: ellipsis; + padding-inline-end: var(--size-2-1); +} +.text-icon-button .mod-aux { + --icon-size: var(--icon-xs); + color: var(--text-muted); +} +.text-icon-button:focus-visible { + box-shadow: 0 0 0 var(--input-border-width-focus) var(--background-modifier-border-focus); + outline: none; +} +.text-icon-button.mobile-tap { + box-shadow: none; + opacity: var(--icon-opacity-hover); + color: var(--text-normal); +} +.text-icon-button.mobile-tap .text-button-icon { + color: var(--icon-color-hover); +} +.text-icon-button.is-disabled { + cursor: not-allowed; + opacity: 0.7; +} +@media (hover: hover) { + .text-icon-button.has-active-menu, + .text-icon-button:hover { + box-shadow: none; + opacity: var(--icon-opacity-hover); + background-color: var(--background-modifier-hover); + color: var(--text-normal); + } + .text-icon-button.has-active-menu .text-button-icon, + .text-icon-button:hover .text-button-icon { + color: var(--icon-color-hover); + } +} +.text-icon-button.is-active.has-active-menu, +.text-icon-button.is-active:active { + color: var(--icon-color-active); + background-color: var(--background-modifier-active-hover); +} +.text-icon-button.is-active.has-active-menu .text-button-icon, +.text-icon-button.is-active:active .text-button-icon { + color: var(--icon-color-active); +} +@media (hover: hover) { + .text-icon-button.is-active:hover { + color: var(--icon-color-active); + background-color: var(--background-modifier-active-hover); + } + .text-icon-button.is-active:hover .text-button-icon { + color: var(--icon-color-active); + } +} +.markdown-rendered.show-indentation-guide li > ul, +.markdown-rendered.show-indentation-guide li > ol { + position: relative; +} +.markdown-rendered.show-indentation-guide li > ul::before, +.markdown-rendered.show-indentation-guide li > ol::before { + content: "\200B"; + position: absolute; + display: block; + inset-inline-start: var(--indentation-guide-reading-indent); + top: 0; + bottom: 0; + border-inline-end: var(--indentation-guide-width) solid var(--indentation-guide-color); +} +.markdown-source-view.mod-cm6 .cm-indent { + min-width: var(--list-indent); + display: inline-block; +} +.markdown-source-view.mod-cm6 .cm-indent::before { + content: "\200B"; + display: block; + width: 1px; + border-inline-end: var(--indentation-guide-width) solid var(--indentation-guide-color); + color: transparent; + position: absolute; + top: 0; + bottom: 0; + margin-inline-start: var(--indentation-guide-source-indent); +} +.markdown-source-view.mod-cm6.is-live-preview .cm-indent::before { + margin-inline-start: var(--indentation-guide-editing-indent); +} +.markdown-source-view.mod-cm6 .cm-active-indent::before { + border-inline-end: var(--indentation-guide-width-active) solid var(--indentation-guide-color-active); +} +.input-button { + padding: 6px 14px; + margin-inline-start: 14px; + color: var(--text-muted); + font-size: var(--font-ui-medium); + position: relative; + top: -1px; +} +@media (hover: hover) { + .input-button:hover { + color: var(--text-normal); + } +} +textarea, +.multi-select-container, +input.metadata-input-text, +input[type='date'], +input[type='datetime-local'], +input[type='text'], +input[type='search'], +input[type='email'], +input[type='password'], +input[type='number'] { + -webkit-app-region: no-drag; + background: var(--background-modifier-form-field); + border: var(--input-border-width) solid var(--background-modifier-border); + color: var(--text-normal); + font-family: inherit; + padding: var(--input-padding); + font-size: var(--font-ui-small); + border-radius: var(--input-radius); + outline: none; +} +@media (hover: hover) { + textarea:hover, + .multi-select-container:hover, + input.metadata-input-text:hover, + input[type='date']:hover, + input[type='datetime-local']:hover, + input[type='text']:hover, + input[type='search']:hover, + input[type='email']:hover, + input[type='password']:hover, + input[type='number']:hover { + background-color: var(--background-modifier-form-field-hover); + border-color: var(--background-modifier-border-hover); + transition: box-shadow var(--anim-duration-fast) ease-in-out, border var(--anim-duration-fast) ease-in-out; + } +} +textarea:active, +.multi-select-container:active, +input.metadata-input-text:active, +input[type='date']:active, +input[type='datetime-local']:active, +input[type='text']:active, +input[type='search']:active, +input[type='email']:active, +input[type='password']:active, +input[type='number']:active, +textarea:focus, +.multi-select-container:focus, +input.metadata-input-text:focus, +input[type='date']:focus, +input[type='datetime-local']:focus, +input[type='text']:focus, +input[type='search']:focus, +input[type='email']:focus, +input[type='password']:focus, +input[type='number']:focus { + border-color: var(--background-modifier-border-focus); + transition: box-shadow 0.15s ease-in-out, border 0.15s ease-in-out; +} +textarea:active, +.multi-select-container:active, +input.metadata-input-text:active, +input[type='date']:active, +input[type='datetime-local']:active, +input[type='text']:active, +input[type='search']:active, +input[type='email']:active, +input[type='password']:active, +input[type='number']:active, +textarea:focus, +.multi-select-container:focus, +input.metadata-input-text:focus, +input[type='date']:focus, +input[type='datetime-local']:focus, +input[type='text']:focus, +input[type='search']:focus, +input[type='email']:focus, +input[type='password']:focus, +input[type='number']:focus, +textarea:focus-visible, +.multi-select-container:focus-visible, +input.metadata-input-text:focus-visible, +input[type='date']:focus-visible, +input[type='datetime-local']:focus-visible, +input[type='text']:focus-visible, +input[type='search']:focus-visible, +input[type='email']:focus-visible, +input[type='password']:focus-visible, +input[type='number']:focus-visible { + box-shadow: 0 0 0 var(--input-border-width-focus) var(--background-modifier-border-focus); +} +textarea::placeholder, +.multi-select-container::placeholder, +input.metadata-input-text::placeholder, +input[type='date']::placeholder, +input[type='datetime-local']::placeholder, +input[type='text']::placeholder, +input[type='search']::placeholder, +input[type='email']::placeholder, +input[type='password']::placeholder, +input[type='number']::placeholder { + color: var(--input-placeholder-color); +} +input[type='text'], +input[type='search'], +input[type='email'], +input[type='password'], +input[type='number'] { + height: var(--input-height); +} +/* Textarea */ +textarea { + line-height: var(--line-height-tight); +} +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + display: none; + pointer-events: none; +} +input[type=number]::-webkit-inner-spin-button { + -webkit-appearance: none; +} +/* Date input */ +input[type='date'], +input[type='datetime-local'] { + font-variant-numeric: tabular-nums; + position: relative; +} +input[type='date']::-webkit-datetime-edit-text, +input[type='datetime-local']::-webkit-datetime-edit-text { + color: var(--input-date-separator); + padding-inline-end: 0; +} +input[type='date']::-webkit-calendar-picker-indicator, +input[type='datetime-local']::-webkit-calendar-picker-indicator { + position: absolute; + left: var(--size-4-1); + right: auto; + opacity: 0.5; +} +input[type='date'].is-empty::-webkit-datetime-edit-month-field, +input[type='datetime-local'].is-empty::-webkit-datetime-edit-month-field, +input[type='date'].is-empty::-webkit-datetime-edit-day-field, +input[type='datetime-local'].is-empty::-webkit-datetime-edit-day-field, +input[type='date'].is-empty::-webkit-datetime-edit-year-field, +input[type='datetime-local'].is-empty::-webkit-datetime-edit-year-field { + color: var(--input-placeholder-color); +} +input[type='date'].is-empty:focus-within::-webkit-datetime-edit-month-field, +input[type='datetime-local'].is-empty:focus-within::-webkit-datetime-edit-month-field, +input[type='date'].is-empty:focus-within::-webkit-datetime-edit-day-field, +input[type='datetime-local'].is-empty:focus-within::-webkit-datetime-edit-day-field, +input[type='date'].is-empty:focus-within::-webkit-datetime-edit-year-field, +input[type='datetime-local'].is-empty:focus-within::-webkit-datetime-edit-year-field { + color: var(--text-normal); +} +input[type='date']::-webkit-datetime-edit-month-field:active, +input[type='datetime-local']::-webkit-datetime-edit-month-field:active, +input[type='date']::-webkit-datetime-edit-month-field:focus, +input[type='datetime-local']::-webkit-datetime-edit-month-field:focus, +input[type='date']::-webkit-datetime-edit-day-field:active, +input[type='datetime-local']::-webkit-datetime-edit-day-field:active, +input[type='date']::-webkit-datetime-edit-day-field:focus, +input[type='datetime-local']::-webkit-datetime-edit-day-field:focus, +input[type='date']::-webkit-datetime-edit-year-field:active, +input[type='datetime-local']::-webkit-datetime-edit-year-field:active, +input[type='date']::-webkit-datetime-edit-year-field:focus, +input[type='datetime-local']::-webkit-datetime-edit-year-field:focus { + background-color: var(--text-selection); + color: var(--text-normal); + cursor: text; +} +body:not(.is-ios):not(.is-android) input[type='date']:not([disabled="true"]), +body:not(.is-ios):not(.is-android) input[type='datetime-local']:not([disabled="true"]) { + padding-inline-start: var(--size-4-6); +} +/* Range slider */ +input[type='range'] { + width: 100px; + -webkit-appearance: none; + background-color: var(--slider-track-background); + border-radius: var(--slider-track-height); + height: var(--slider-track-height); + padding: 0; + outline: none; +} +input[type='range']::-webkit-slider-runnable-track { + height: 6px; + -webkit-appearance: none; +} +input[type='range']::-webkit-slider-thumb { + -webkit-appearance: none; + height: var(--slider-thumb-height); + width: var(--slider-thumb-width); + border-radius: var(--slider-thumb-radius); + cursor: default; + background: #FFF; + border: var(--slider-thumb-border-width) solid var(--slider-thumb-border-color); + position: relative; + top: var(--slider-thumb-y); + transition: all 0.1s linear; + box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.05), 0 2px 2px 0px rgba(0, 0, 0, 0.1); +} +input[type='range']::-webkit-slider-thumb:hover, +input[type='range']::-webkit-slider-thumb:active { + background: white; + border-color: var(--background-modifier-border-focus); + box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1), 0 2px 3px 0px rgba(0, 0, 0, 0.2); + transition: all 0.1s linear; +} +body:not(.is-mobile) input[type=range]:focus { + box-shadow: none; +} +body:not(.is-mobile) input[type=range]:focus::-webkit-slider-thumb { + box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.05), 0 2px 3px 0px rgba(0, 0, 0, 0.2); +} +body:not(.is-mobile) input[type=range]:focus-visible::-webkit-slider-thumb { + border-color: var(--background-modifier-border-focus); + box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.05), 0 2px 3px 0px rgba(0, 0, 0, 0.2), 0 0 0px 2px var(--background-modifier-border-focus); +} +/* Color inputs */ +input[type="color"] { + -webkit-appearance: none; + width: calc(var(--swatch-width) + 4px); + background-color: transparent; + border: none; + cursor: var(--cursor); + padding: 0; +} +input[type="color"]::-webkit-color-swatch-wrapper { + padding: 2px; +} +input[type="color"]::-webkit-color-swatch { + border: 0px; + box-shadow: var(--swatch-shadow); + border-radius: var(--swatch-radius); + height: var(--swatch-height); + width: var(--swatch-width); + align-self: center; +} +@media (hover: hover) { + input[type="color"]::-webkit-color-swatch:hover { + box-shadow: inset 0 0 0 1px rgba(var(--mono-rgb-100), 0.25), 0 0 0 var(--input-border-width-focus) var(--background-modifier-border-hover); + } +} +input[type="color"]:focus-visible::-webkit-color-swatch, +input[type="color"]:focus::-webkit-color-swatch { + box-shadow: var(--swatch-shadow), 0 0 0 var(--input-border-width-focus) var(--background-modifier-border-focus); +} +select.mod-hidden { + display: none; +} +.formula-editor-container { + padding: 0; + border-radius: var(--input-radius); + background-color: var(--interactive-normal); + border: var(--input-border-width) solid var(--background-modifier-border); + flex: 1 1 auto; +} +@media (hover: hover) { + .formula-editor-container:hover { + border-color: var(--background-modifier-border-hover); + transition: box-shadow var(--anim-duration-fast) ease-in-out, border var(--anim-duration-fast) ease-in-out; + } +} +.formula-editor-container:active, +.formula-editor-container:focus, +.formula-editor-container:focus-within { + border-color: var(--background-modifier-border-focus); + transition: box-shadow 0.15s ease-in-out, border 0.15s ease-in-out; +} +.formula-editor-container:active, +.formula-editor-container:focus, +.formula-editor-container:focus-visible, +.formula-editor-container:focus-within { + box-shadow: 0 0 0 var(--input-border-width-focus) var(--background-modifier-border-focus); +} +.formula-editor-container::placeholder { + color: var(--input-placeholder-color); +} +.formula-editor { + display: flex; + align-items: center; + min-height: var(--input-height); + width: 100%; +} +.formula-editor .cm-editor { + flex: 1 1 auto; +} +.formula-editor .cm-content { + caret-color: var(--caret-color); +} +.formula-editor .cm-placeholder { + font-family: var(--font-interface); + font-size: var(--font-ui-small); + color: var(--text-faint); +} +.formula-editor .cm-line { + padding-inline-start: var(--size-4-2); + padding-inline-end: var(--size-4-2); +} +.formula-editor .cm-completionLabel { + flex-grow: 1; +} +.formula-editor .cm-completionLabel .cm-completionMatchedText { + font-weight: bold; + text-decoration: none; +} +.formula-editor .cm-completionDetail { + display: none; +} +.formula-editor .cm-scroller { + color: var(--code-normal); + font-family: var(--font-monospace); + font-size: var(--font-small); +} +.formula-editor .cm-focused { + outline: none; +} +.formula-editor .cm-tooltip { + font-family: var(--font-interface); +} +.formula-editor .cm-tooltip.cm-completionInfo { + box-shadow: 0 2px 8px var(--background-modifier-box-shadow); + background-color: var(--background-modifier-message); + border-radius: var(--radius-s); + font-size: 11px; + font-weight: var(--font-medium); + line-height: var(--line-height-tight); + color: #FAFAFA; + padding: var(--size-2-3) var(--size-4-2); + border: none; + max-width: 200px; +} +.formula-editor .cm-tooltip.cm-tooltip-autocomplete { + align-self: stretch; + overflow: hidden; + flex-direction: column; + max-width: 500px; + max-height: 300px; + z-index: var(--layer-notice); + --no-tooltip: true; + overflow: unset; +} +.is-mobile .formula-editor .cm-tooltip.cm-tooltip-autocomplete { + max-width: calc(100vw - 20px - var(--safe-area-inset-left) - var(--safe-area-inset-right)); + max-height: 240px; +} +.formula-editor .cm-tooltip.cm-tooltip-autocomplete > ul { + padding: var(--size-2-3); +} +.formula-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li { + font-size: var(--font-ui-medium); + margin-bottom: 1px; + cursor: var(--cursor); + padding: var(--size-2-3) var(--size-4-3); + white-space: pre-wrap; + border-radius: var(--radius-s); + color: var(--text-normal); + font-family: var(--font-interface); + font-size: var(--font-ui-small); + padding-inline-start: var(--size-4-2); +} +.formula-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li.is-selected, +.formula-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li.mobile-tap { + background-color: var(--background-modifier-hover); +} +.formula-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li.mod-downranked { + color: var(--text-muted); +} +.formula-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li.mod-complex .suggestion-icon .suggestion-flair { + margin: 0; + margin-inline-end: var(--size-4-2); +} +.formula-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] { + background-color: var(--background-modifier-hover); +} +.cm-tooltip.cm-tooltip-docstring { + border-radius: var(--radius-s); + padding: var(--size-4-1) var(--size-4-2); + background-color: var(--background-modifier-message); + box-shadow: 0 2px 8px var(--background-modifier-box-shadow); + font-size: 11px; + font-weight: var(--font-medium); + line-height: var(--line-height-tight); + color: #FAFAFA; + font-family: var(--font-monospace); + border: none; +} +.cm-tooltip.cm-tooltip-docstring .active { + font-weight: var(--font-semibold); +} +.cm-tooltip.cm-tooltip-docstring .cm-tooltip-arrow:before, +.cm-tooltip.cm-tooltip-docstring .cm-tooltip-arrow:after { + border-top: 7px solid var(--background-modifier-message); +} +.notice-container { + z-index: var(--layer-notice); + position: fixed; + top: 22px; + inset-inline-end: 0; + padding: 10px; + overflow: hidden; + pointer-events: none; +} +.notice { + display: flex; + flex-direction: column; + gap: var(--size-4-2); + background-color: var(--background-modifier-message); + border-radius: var(--radius-m); + box-shadow: 0 2px 8px var(--background-modifier-box-shadow); + color: #FAFAFA; + font-size: var(--font-ui-small); + line-height: var(--line-height-tight); + padding: 0.75em 1em 0.75em 1em; + max-width: 300px; + margin-bottom: 14px; + white-space: pre-wrap; + overflow-wrap: anywhere; + word-break: break-word; + cursor: var(--cursor); + pointer-events: auto; +} +.notice progress { + width: 100%; +} +.theme-light .notice progress[value]::-webkit-progress-bar { + background-color: #262626; + box-shadow: inset 0px 0px 0px 1px #363636; +} +.notice-cta { + display: flex; + align-items: center; + color: var(--text-accent); + white-space: nowrap; +} +.notice-cta:hover, +.notice-cta.mobile-tap { + color: var(--text-accent-hover); +} +.menu { + -webkit-app-region: no-drag; + display: flex; + flex-direction: column; + border: var(--menu-border-width) solid var(--menu-border-color); + background-color: var(--menu-background); + backdrop-filter: var(--menu-backdrop-filter); + padding: 0; + border-radius: var(--menu-radius); + box-shadow: var(--menu-shadow); + max-height: 100%; + position: fixed; + z-index: var(--layer-menu); + user-select: none; +} +.menu.mod-no-icon .menu-item-icon:first-child { + display: none; +} +.menu-scroll { + display: flex; + flex-direction: column; + overflow: hidden; + padding: var(--menu-padding); +} +.menu-grabber { + display: none; +} +.menu-separator { + height: 0; + margin: var(--size-2-3) calc(var(--size-2-3) * -1); + border-bottom: 1px solid var(--background-modifier-border); +} +.menu-separator:last-child, +.menu-separator:first-child { + display: none; +} +.menu-separator + .menu-separator { + display: none; +} +.menu-separator + .menu-item.is-label { + padding-bottom: var(--size-4-1); +} +.menu-item-desc { + padding-top: var(--size-4-1); + color: var(--text-faint); + font-size: 0.8em; +} +.menu-item { + display: flex; + align-items: center; + gap: var(--size-4-2); + padding: var(--size-4-1) var(--size-4-2); + cursor: var(--cursor); + font-size: var(--font-ui-small); + border-radius: var(--radius-s); + white-space: nowrap; +} +.menu-item.is-warning:not(.is-disabled) { + color: var(--text-error); +} +.menu-item.is-warning:not(.is-disabled).selected { + color: var(--text-error); +} +.menu-item.is-label { + cursor: default; + font-size: var(--font-ui-medium); + color: var(--text-muted); + white-space: pre-wrap; + overflow-wrap: anywhere; + word-break: break-word; +} +.menu-item.is-disabled { + cursor: default; + color: var(--text-faint); +} +.menu-item.selected:not(.is-label):not(.is-disabled) { + background-color: var(--background-modifier-hover); +} +.menu-item-icon { + flex: 0 1 auto; + display: flex; + color: var(--text-muted); +} +.menu-item.is-warning .menu-item-icon { + color: var(--text-error); +} +.menu-item.is-disabled .menu-item-icon { + color: var(--text-faint); +} +.menu-item-icon .mod-submenu { + color: var(--text-faint); +} +.menu-item-title { + flex: 1 0 0; +} +.menu.mod-tab-list .menu-item-title { + max-width: 300px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: bottom; +} +.debug-textarea { + width: 100%; + min-height: 50vh; + height: 100%; + max-height: 80vh; + font-family: var(--font-monospace); + tab-size: 4; + resize: none; +} +.modal-container { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + width: 100%; + z-index: var(--layer-modal); +} +.modal-container.mod-dim .modal { + box-shadow: var(--shadow-l); +} +.modal-confirmation-state { + align-items: center; + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: center; + text-align: center; +} +.modal-status-icon { + --icon-size: 72px; + --icon-stroke: 1.5px; +} +.modal-bg { + position: absolute; + top: 0; + inset-inline-start: 0; + width: 100%; + height: 100%; + background-color: var(--background-modifier-cover); +} +.modal { + --checkbox-size: var(--font-ui-medium); + background-color: var(--modal-background); + border-radius: var(--modal-radius); + border: var(--modal-border-width) solid var(--modal-border-color); + padding: var(--size-4-4); + position: relative; + min-height: 100px; + width: var(--dialog-width); + max-width: var(--dialog-max-width); + max-height: var(--dialog-max-height); + display: flex; + flex-direction: column; + overflow: auto; +} +.modal.mod-sidebar-layout { + padding: 0; + width: var(--modal-width); + height: var(--modal-height); + max-width: var(--modal-max-width); + max-height: var(--modal-max-height); + overflow: hidden; + display: flex; + flex-direction: column; +} +.modal.mod-sidebar-layout .modal-content { + display: flex; +} +.modal.mod-scrollable-content { + padding: 0; + overflow: hidden; +} +.modal.mod-scrollable-content .modal-title { + padding: var(--size-4-4) var(--size-4-4) 0 var(--size-4-4); +} +.modal.mod-scrollable-content .modal-content { + padding: 0 var(--size-4-4) var(--size-4-4) var(--size-4-4); + overflow: auto; +} +.modal.mod-scrollable-content .modal-button-container { + margin-top: 0; + border-top: var(--border-width) solid var(--background-modifier-border); + padding: var(--size-4-4); +} +.modal.mod-narrow { + max-width: var(--modal-max-width-narrow); +} +.modal-sidebar { + --background-modifier-form-field: var(--background-primary); + background-color: var(--background-secondary); + flex: 1 1 var(--modal-community-sidebar-width); + min-width: var(--modal-community-sidebar-width); + padding: var(--size-4-3) 0 0 0; + display: flex; + flex-direction: column; +} +body.styled-scrollbars .modal-close-button { + inset-inline-end: 12px; +} +.modal-close-button { + transition: opacity 0.15s ease-in-out; + cursor: var(--cursor); + position: absolute; + top: var(--size-2-3); + inset-inline-end: var(--size-2-3); + font-size: 24px; + line-height: 20px; + height: 24px; + width: 24px; + padding: 0 var(--size-2-2); + border-radius: var(--radius-s); + color: var(--text-muted); +} +@media (hover: hover) { + .modal-close-button:hover { + background-color: var(--background-modifier-hover); + color: var(--text-normal); + } +} +.modal-close-button.mobile-tap { + opacity: var(--icon-opacity-hover); +} +.modal-close-button:before { + font-family: Inter, sans-serif; + content: '\D7'; + font-weight: 300; +} +.modal-header { + margin-bottom: 0.75em; +} +.mod-sidebar-layout .modal-header { + display: none; +} +.modal-title { + font-size: var(--font-ui-large); + margin-left: auto; + margin-right: auto; + font-weight: var(--font-semibold); + text-align: start; + line-height: var(--line-height-tight); +} +.modal-title:empty { + display: none; +} +.modal-content { + flex: 1 1 auto; + font-size: var(--font-ui-medium); +} +.modal-button-container { + margin-top: 1.5em; + display: flex; + justify-content: flex-end; + gap: var(--size-4-2); + flex-wrap: wrap; + font-size: var(--font-ui-medium); +} +.modal-button-container .mod-checkbox { + flex-grow: 1; + display: flex; + align-items: center; + gap: var(--size-4-1); +} +body:not(.is-mobile) .modal-button-container .mod-secondary { + margin-inline-end: auto; +} +.modal-checkbox-label { + cursor: var(--cursor); + margin-inline-start: 10px; + user-select: none; +} +.error-container { + align-items: center; + display: flex; + flex-direction: column; + padding: var(--size-4-4); + gap: var(--size-4-6); + text-align: center; +} +.message-container { + margin: var(--size-4-4) 0; +} +.message { + display: inline-block; + padding: 6px 12px 6px 12px; + border-radius: var(--radius-s); +} +.message.mod-success { + background-color: var(--background-modifier-success); + color: var(--text-on-accent); +} +.message.mod-success a { + color: var(--text-normal); +} +.message.mod-info { + background-color: var(--background-modifier-info); +} +.message.mod-error { + background-color: var(--background-modifier-error); + color: var(--text-on-accent); +} +.message.mod-error a { + color: var(--text-normal); +} +.mod-warning { + color: var(--text-error); +} +.mod-success { + color: var(--text-success); +} +.mod-file-rename .rename-textarea { + overflow: hidden; + padding: var(--size-2-3) var(--size-4-2); + resize: none; + width: 100%; +} +.modal-setting-back-button { + position: absolute; + top: var(--safe-area-inset-top); + inset-inline-start: 0; + padding: var(--size-4-3) var(--size-4-3); + height: var(--modal-header-height); + color: var(--text-normal); + font-weight: var(--font-semibold); +} +.modal-setting-back-button-icon { + display: flex; + align-items: center; + margin-inline-end: 6px; +} +.modal-setting-nav-bar { + display: flex; + flex: 0 1 auto; + padding: var(--size-4-3); + border-bottom: 1px solid var(--background-modifier-border); +} +.modal .modal-nav-action { + background-color: unset; + margin-top: var(--size-4-1); + position: absolute; + top: 0; + width: unset; +} +.modal .modal-nav-action.mod-secondary { + inset-inline-start: 0; +} +.modal .modal-nav-action.mod-cta { + color: var(--color-accent); + font-weight: var(--font-semibold); + inset-inline-end: 0; +} +.modal.mod-scrollable { + height: var(--modal-height); + width: var(--modal-width); + max-width: var(--modal-max-width-narrow); + padding: var(--size-4-4) 0 0 0; + position: relative; + overflow: hidden; +} +.modal.mod-scrollable .modal-title { + padding: 0 var(--size-4-4); +} +.modal.mod-scrollable .modal-content { + overflow: auto; + padding: 0 var(--size-4-4) var(--size-4-4); + margin-bottom: calc(var(--input-height) + var(--size-4-8)); + border-top: var(--border-width) solid var(--background-modifier-border); +} +.modal.mod-scrollable .modal-button-container { + margin: 0 0 0 calc(var(--size-4-4) * -1); + padding: var(--size-4-4); + gap: var(--size-4-2); + position: absolute; + bottom: 0; + background-color: var(--background-primary); + border-top: var(--border-width) solid var(--background-modifier-border); + width: 100%; +} +.nav-header { + padding: var(--size-4-2); +} +.nav-header .search-input-container { + margin: 4px auto; + padding: 0; +} +.nav-buttons-container { + flex-wrap: wrap; + gap: var(--size-2-1); +} +.nav-buttons-container.has-separator { + border-bottom: 1px solid var(--background-modifier-border); + padding-bottom: var(--size-2-3); + margin-bottom: var(--size-4-2); +} +body { + --pill-focus-width: calc(100% + 6px); + --pill-focus-left-adjust: -4px; +} +.multi-select-container { + cursor: text; + display: inline-flex; + vertical-align: top; + flex-wrap: wrap; + flex: 1 1 auto; + gap: var(--size-2-3); + min-height: var(--input-height); +} +.multi-select-pill { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + display: flex; + align-items: center; + background-color: var(--pill-background); + border: var(--pill-border-width) solid var(--pill-border-color); + border-radius: var(--pill-radius); + color: var(--pill-color); + cursor: var(--cursor); + font-weight: var(--pill-weight); + padding: var(--pill-padding-y) 0; + line-height: 1; + max-width: calc(100% - var(--size-2-3) - 1ch); + gap: var(--size-2-1); + position: relative; +} +.multi-select-pill:focus:after { + content: ''; + display: block; + position: absolute; + pointer-events: none; + border-radius: var(--pill-radius); + inset-inline-end: var(--pill-focus-left-adjust); + width: var(--pill-focus-width); + height: 100%; + box-shadow: 0 0 0 1px var(--background-modifier-border-focus), inset 0 0 0 1px var(--background-modifier-border-focus); +} +@media (hover: hover) { + .multi-select-pill:hover { + background-color: var(--pill-background-hover); + border: var(--pill-border-width) solid var(--pill-border-color-hover); + color: var(--pill-color-hover); + text-decoration: var(--pill-decoration-hover); + } +} +.multi-select-pill-content { + margin-inline-start: var(--pill-padding-x); +} +.multi-select-pill-remove-button { + margin-inline-end: min(var(--size-2-3),var(--pill-padding-x)); + cursor: var(--cursor); + color: var(--pill-color-remove); + border-radius: var(--radius-s); + display: flex; + align-items: center; + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); +} +@media (hover: hover) { + .multi-select-pill-remove-button:hover { + color: var(--pill-color-remove-hover); + } +} +.multi-select-input { + cursor: text; + font-family: var(--font-interface); + min-width: 1ch; + max-width: max-content; + color: var(--text-normal); + background-color: inherit; + border: none; + overflow-x: auto; + white-space: nowrap; +} +.multi-select-input::-webkit-scrollbar { + display: none; +} +.multi-select-input:before { + content: '\200B'; +} +.multi-select-input:empty:before { + content: attr(placeholder); + color: var(--input-placeholder-color); + pointer-events: none; +} +@keyframes multi-select-highlight { + from { + color: var(--text-warning); + --link-color: var(--text-warning); + } +} +.multi-select-duplicate { + animation: multi-select-highlight 2000ms ease-in; +} +.popover, +.formula-editor .cm-tooltip.cm-tooltip-autocomplete, +.suggestion-container { + display: flex; + position: absolute; + z-index: var(--layer-popover); + background-color: var(--background-primary); + border: 1px solid var(--background-modifier-border); + box-shadow: var(--shadow-s); + border-radius: var(--radius-m); + max-height: var(--popover-max-height); +} +.popover.hover-popover { + --callout-blend-mode: normal; + justify-content: stretch; + overflow: hidden; + max-width: 80vw; + max-height: inherit; + min-height: 30px; + width: fit-content; +} +.popover.hover-popover.is-editing { + outline: 2px var(--background-modifier-border-focus) solid; + border-color: var(--background-modifier-border-focus); +} +.popover.hover-popover > * { + width: var(--popover-width); +} +.popover.hover-popover .markdown-preview-view { + font-size: var(--popover-font-size); +} +.popover.hover-popover > .mod-empty { + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + font-size: var(--popover-font-size); + color: var(--text-muted); +} +.popover.hover-popover > .image-embed, +.popover.hover-popover > .video-embed { + width: auto; + max-height: inherit; + max-width: var(--popover-width); + width: fit-content; + height: fit-content; + display: flex; + justify-content: center; + align-items: center; +} +.popover.hover-popover > .image-embed img, +.popover.hover-popover > .video-embed img, +.popover.hover-popover > .image-embed video, +.popover.hover-popover > .video-embed video { + width: 100%; + max-width: inherit; + max-height: inherit; +} +.popover.hover-popover > .audio-embed { + display: flex; +} +.popover.hover-popover > .pdf-embed { + width: var(--popover-pdf-width); + height: var(--popover-pdf-height) !important; + max-height: inherit; +} +.popover.hover-popover > .markdown-embed { + max-height: var(--popover-height); + overflow: auto; + border: 0; + padding: 0; + margin: 0; +} +.popover.hover-popover > .markdown-embed > .markdown-embed-content { + width: 100%; +} +.popover.hover-popover > .markdown-embed > .markdown-embed-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller, +.popover.hover-popover > .markdown-embed > .markdown-embed-content .markdown-preview-view { + padding: var(--file-margins); +} +.popover.hover-popover > .markdown-embed .markdown-source-view { + font-size: var(--popover-font-size); +} +.popover.hover-popover > .markdown-embed[data-type="footnote"].mod-empty { + cursor: var(--cursor-link); + text-align: center; + background-color: var(--background-secondary-alt); +} +.popover.hover-popover > .markdown-embed[data-type="footnote"].mod-empty .markdown-preview-view { + color: var(--text-muted); +} +.popover.hover-popover > .markdown-embed[data-type="footnote"]:not(.mod-empty) { + --popover-font-size: var(--footnote-size); +} +.popover.hover-popover > .markdown-embed[data-type="footnote"] > .markdown-embed-content .cm-scroller, +.popover.hover-popover > .markdown-embed[data-type="footnote"] > .markdown-embed-content .markdown-preview-view { + --file-margins: var(--size-4-3) var(--size-4-4); +} +.follow-link-popover { + transition: opacity var(--anim-duration-fast) ease-in-out, transform var(--anim-duration-fast) ease-in-out; + box-shadow: 0 2px 8px var(--background-modifier-box-shadow); + background-color: rgba(0, 0, 0, 0.9); + border-radius: var(--radius-m); + color: #ccc; + font-size: var(--font-ui-small); + line-height: 20px; + max-width: 300px; + padding: 5px 12px; + text-align: center; + z-index: var(--layer-tooltip); + white-space: pre-wrap; + top: calc(100%); +} +@media (hover: hover) { + .follow-link-popover:hover { + background-color: #000000; + } +} +.follow-link-popover.mobile-tap { + opacity: 0.9; + transform: scale(0.9, 0.9); +} +.follow-link-popover .popover-arrow { + position: absolute; + top: calc(100%); + inset-inline-start: 50%; + width: 0; + margin-inline-start: -5px; + border-inline-end: 5px solid transparent; + border-inline-start: 5px solid transparent; + content: " "; + font-size: 0; + line-height: 0; + border-top: 5px solid rgba(0, 0, 0, 0.9); + border-bottom: 5px solid transparent; +} +.notice progress, +.markdown-preview-view progress, +.markdown-rendered progress, +.markdown-source-view.is-live-preview progress { + -webkit-writing-mode: horizontal-tb; + writing-mode: horizontal-tb; + appearance: none; + box-sizing: border-box; + display: inline-block; + height: 6px; + margin-bottom: 4px; + max-width: 100%; + overflow: hidden; + border-radius: 0px; + border: 0; + vertical-align: -0.2rem; +} +.notice progress[value]::-webkit-progress-bar, +.markdown-preview-view progress[value]::-webkit-progress-bar, +.markdown-rendered progress[value]::-webkit-progress-bar, +.markdown-source-view.is-live-preview progress[value]::-webkit-progress-bar { + background-color: var(--background-secondary); + box-shadow: inset 0px 0px 0px 1px var(--background-modifier-border); + border-radius: 6px; + overflow: hidden; +} +.notice progress[value]::-webkit-progress-value, +.markdown-preview-view progress[value]::-webkit-progress-value, +.markdown-rendered progress[value]::-webkit-progress-value, +.markdown-source-view.is-live-preview progress[value]::-webkit-progress-value { + background-color: var(--interactive-accent); + overflow: hidden; +} +.progress-bar-container { + position: absolute; + height: 100vh; + width: 100vw; + top: 0; + inset-inline-start: 0; + background-color: var(--background-primary); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); + z-index: 10000; +} +.progress-bar { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: var(--size-4-2); + width: 100%; +} +.progress-bar-context { + position: absolute; + top: 100%; + font-size: var(--font-ui-small); + border-radius: 50px; + padding: var(--size-4-2) var(--size-4-6); +} +.progress-bar-button-container { + display: flex; + flex-direction: column; + gap: var(--size-4-2); +} +.progress-bar-message { + margin-bottom: var(--size-4-8); + opacity: 1; + color: var(--text-muted); +} +.progress-bar-indicator { + position: relative; + height: 8px; + margin: 0 10vw; + width: 90vw; + overflow-x: hidden; + border-radius: 3px; +} +.progress-bar-line { + position: absolute; + opacity: 0.4; + background-color: var(--interactive-accent); + width: 150%; + height: 8px; +} +.progress-bar-subline { + position: absolute; + background-color: var(--interactive-accent); + height: 8px; +} +.progress-bar-subline.mod-increase { + animation: increase 2s infinite; +} +.progress-bar-subline.mod-decrease { + animation: decrease 2s 0.5s infinite; +} +.progress-bar .progress-bar-subline { + transition: width 150ms ease-in-out; +} +@keyframes increase { + from { + inset-inline-start: -5%; + width: 5%; + } + to { + inset-inline-start: 130%; + width: 100%; + } +} +@keyframes decrease { + from { + inset-inline-start: -80%; + width: 80%; + } + to { + inset-inline-start: 110%; + width: 10%; + } +} +.progress-bar-context-button { + margin-top: var(--size-4-3); + text-align: center; +} +.prompt { + display: flex; + flex-direction: column; + border-radius: var(--radius-l); + background-color: var(--background-primary); + box-shadow: var(--shadow-l); + border: var(--prompt-border-width) solid var(--prompt-border-color); + z-index: 1; + position: absolute; + top: 80px; + width: var(--prompt-width); + max-width: var(--prompt-max-width); + max-height: var(--prompt-max-height); + overflow: hidden; +} +.prompt-input-container { + --search-clear-button-size: 17px; + display: flex; + position: relative; +} +.prompt-input-container .search-input-clear-button { + inset-inline-end: var(--size-4-4); +} +input.prompt-input { + width: 100%; + padding: var(--size-4-6); + padding-inline-end: var(--size-4-12); + background-color: var(--background-primary); + font-size: var(--font-ui-medium); + border: none; + height: var(--prompt-input-height); + border-radius: 0; + border-bottom: 1px solid var(--background-secondary); +} +input.prompt-input:hover, +input.prompt-input:focus, +input.prompt-input:focus-visible { + border-bottom: 1px solid var(--background-secondary); + box-shadow: none; +} +.prompt-results { + list-style: none; + margin: 0; + padding: var(--size-4-3); + overflow-y: auto; +} +.prompt-instructions { + border-top: 1px solid var(--background-secondary); + 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); +} +.prompt-instruction { + display: inline-block; +} +.prompt-instruction-command { + font-weight: var(--bold-weight); + margin-inline-end: var(--size-2-2); +} +.is-android { + --scrollbar-border-width: 0px; + --scrollbar-width: 5px; + --scrollbar-radius: 0; +} +body.styled-scrollbars ::-webkit-scrollbar { + background-color: var(--scrollbar-bg); + width: var(--scrollbar-width); + height: var(--scrollbar-height); + -webkit-border-radius: var(--scrollbar-radius); + background-color: transparent; +} +body.styled-scrollbars ::-webkit-scrollbar-track { + background-color: transparent; +} +body.styled-scrollbars ::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb-bg); + -webkit-border-radius: var(--scrollbar-radius); + background-clip: padding-box; + border: 2px solid transparent; + border-width: var(--scrollbar-border-width); + min-height: 45px; +} +body.styled-scrollbars ::-webkit-scrollbar-thumb:active { + -webkit-border-radius: var(--scrollbar-radius); +} +body.styled-scrollbars ::-webkit-scrollbar-thumb:hover, +body.styled-scrollbars ::-webkit-scrollbar-thumb:active { + background-color: var(--scrollbar-active-thumb-bg); +} +body.styled-scrollbars ::-webkit-scrollbar-corner { + background: transparent; +} +@supports not selector(::-webkit-scrollbar) { + body.styled-scrollbars { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-bg); + } +} +/* Scroll indicator for sidebar containers +body:not(.is-translucent):not(.is-mobile) .workspace-tabs { + .item-list, + .nav-files-container, + .search-result-container, + .tag-container, + .outgoing-link-pane, + .backlink-pane { + background: + linear-gradient( + var(--background-secondary) 10%, + rgba(0, 0, 0, 0) + ) + center top, + linear-gradient( + var(--background-modifier-border) 100%, + rgba(0, 0, 0, 0) + ) + center top; + background-repeat: no-repeat; + background-size: 100% 40px, 91% 1px; + background-attachment: local, scroll; + } +} + */ +.suggestion-container { + align-self: stretch; + overflow: hidden; + flex-direction: column; + max-width: 500px; + max-height: 300px; + z-index: var(--layer-notice); +} +.is-mobile .suggestion-container { + max-width: calc(100vw - 20px - var(--safe-area-inset-left) - var(--safe-area-inset-right)); + max-height: 240px; +} +.suggestion-container.mod-property-value .suggestion-item { + font-size: var(--font-ui-small); + padding: var(--size-2-3) var(--size-4-2); +} +.suggestion-container.mod-property-key .suggestion-item { + font-size: var(--font-ui-small); + padding: var(--size-2-3) var(--size-4-2) var(--size-2-3) var(--size-4-1); +} +.suggestion { + overflow-y: auto; + padding: var(--size-2-3); +} +.suggestion-item, +.suggestion-empty { + font-size: var(--font-ui-medium); + margin-bottom: 1px; +} +.suggestion-empty-suggestion { + color: var(--text-faint); +} +.suggestion-empty { + color: var(--text-muted); + padding: var(--size-4-2); + padding-top: var(--size-4-3); + text-align: center; +} +.suggestion-item { + cursor: var(--cursor); + padding: var(--size-2-3) var(--size-4-3); + white-space: pre-wrap; + border-radius: var(--radius-s); +} +.suggestion-item.is-selected, +.suggestion-item.mobile-tap { + background-color: var(--background-modifier-hover); +} +.suggestion-item.mod-downranked { + color: var(--text-muted); +} +.suggestion-item.mod-nowrap { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.is-phone .suggestion-item.mod-toggle { + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); +} +.suggestion-item.mod-toggle .mod-checked { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + order: 2; +} +.suggestion-item.mod-complex { + align-items: baseline; + display: flex; + justify-content: space-between; +} +.suggestion-item.mod-complex .suggestion-title { + overflow-wrap: break-word; +} +.suggestion-item.mod-complex .suggestion-content { + display: flex; + flex-direction: column; + overflow: hidden; + text-overflow: ellipsis; + margin-inline-end: auto; +} +.suggestion-item.mod-complex .suggestion-prefix:after { + content: ': '; +} +.suggestion-item.mod-complex .suggestion-highlight { + font-weight: bold; +} +.suggestion-item.mod-complex .suggestion-note { + font-size: 0.8em; + color: var(--text-muted); + width: 100%; + flex-basis: 100%; + overflow-wrap: break-word; +} +.suggestion-item.mod-complex .suggestion-icon, +.suggestion-item.mod-complex .suggestion-aux { + display: flex; + align-items: center; + align-self: center; + flex-shrink: 0; +} +.suggestion-item.mod-complex .suggestion-hotkey { + font-size: var(--font-ui-smaller); + font-family: var(--font-interface); + padding: 2px 6px; +} +.suggestion-item.mod-complex .suggestion-hotkey:not(:last-child) { + margin-inline-start: 10px; +} +.suggestion-item.mod-complex .suggestion-action { + font-size: var(--font-ui-smaller); + font-family: var(--font-interface); + color: var(--interactive-accent); +} +.suggestion-item.mod-complex .suggestion-flair { + color: var(--text-muted); + opacity: var(--icon-opacity); + display: flex; + align-items: center; +} +.suggestion-item.mod-complex .suggestion-flair:not(:last-child) { + margin-inline-start: 6px; +} +.suggestion-item.mod-complex .suggestion-icon .suggestion-flair { + margin-top: 0; + margin-inline-start: var(--size-4-1); + margin-bottom: 0; + margin-inline-end: var(--size-4-3); +} +.suggestion-item.mod-complex .suggestion-aux .suggestion-flair { + margin-top: 0; + margin-inline-start: var(--size-4-3); + margin-bottom: 0; + margin-inline-end: var(--size-4-1); +} +.suggestion-highlight { + font-weight: bold; +} +.suggestion-bg { + position: fixed; + top: 0; + inset-inline-start: 0; + width: 100%; + height: 100%; + background-color: var(--background-modifier-cover); + z-index: var(--layer-popover); +} +.horizontal-tab-header { + display: flex; +} +.horizontal-tab-nav-item, +.vertical-tab-nav-item { + padding: var(--size-4-1) var(--size-4-2); + margin-bottom: 0; + user-select: none; + cursor: var(--cursor); + font-size: calc(var(--font-ui-small) + 1px); + border-radius: var(--radius-s); +} +body:not(.is-phone) .horizontal-tab-nav-item.is-active, +body:not(.is-phone) .vertical-tab-nav-item.is-active { + --background-modifier-hover: var(--interactive-accent); + --icon-color: var(--text-on-accent); + background-color: var(--interactive-accent); + color: var(--text-on-accent); +} +.horizontal-tab-nav-item.mobile-tap, +.vertical-tab-nav-item.mobile-tap { + --icon-color: var(--text-normal); + background-color: var(--background-modifier-hover); + color: var(--text-normal); +} +@media (hover: hover) { + .horizontal-tab-nav-item:hover, + .vertical-tab-nav-item:hover { + background-color: var(--background-modifier-hover); + } +} +.vertical-tab-nav-item-chevron { + display: none; +} +.horizontal-tab-content, +.vertical-tab-content { + background-color: var(--background-primary); + padding-inline-start: var(--size-4-12); + padding-inline-end: var(--size-4-12); + container-type: inline-size; +} +.vertical-tabs-container { + display: flex; +} +.vertical-tab-header { + padding: var(--size-4-3); + background-color: var(--background-secondary); +} +.vertical-tab-header-group-items { + display: flex; + flex-direction: column; +} +body:not(.is-phone) .vertical-tab-header-group-items { + gap: var(--size-2-1); +} +.vertical-tab-header-group-title { + font-size: var(--font-ui-smaller); + color: var(--text-faint); + font-weight: var(--font-semibold); + padding: var(--size-4-2); + user-select: none; +} +.vertical-tab-header-group { + padding: var(--size-4-3) 0; +} +.vertical-tab-content-container { + overflow: hidden; + flex-grow: 1; +} +.vertical-tab-content { + overflow-y: auto; + height: 100%; + padding-top: var(--size-4-8); + padding-bottom: var(--size-4-16); +} +.vertical-tab-content h2 { + font-size: var(--font-ui-medium); + font-weight: var(--font-semibold); +} +@media (forced-colors: active) { + .horizontal-tab-nav-item, + .vertical-tab-nav-item { + --interactive-accent: SelectedItem; + } +} +.checkbox-container { + -webkit-app-region: no-drag; + cursor: var(--cursor); + background-color: var(--background-modifier-border-hover); + border-radius: var(--toggle-radius); + display: inline-block; + flex-shrink: 0; + height: calc(var(--toggle-thumb-height) + var(--toggle-border-width) * 2); + position: relative; + user-select: none; + width: var(--toggle-width); + box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.07), inset 0 0 1px rgba(0, 0, 0, 0.21); + transition: box-shadow 0.15s ease-in-out, outline 0.15s ease-in-out, border 0.15s ease-in-out, opacity 0.15s ease-in-out; + outline: 0 solid var(--background-modifier-border-focus); +} +.checkbox-container input[type='checkbox'] { + position: absolute; + opacity: 0; + left: 0; +} +.checkbox-container:focus-within { + outline: var(--toggle-border-width) solid var(--background-modifier-border-focus); +} +@media (hover: hover) { + .checkbox-container:hover { + box-shadow: inset 0 6px 20px rgba(0, 0, 0, 0.14), inset 0 0 1px rgba(0, 0, 0, 0.28); + } +} +.checkbox-container.is-enabled { + background-color: var(--interactive-accent); +} +.checkbox-container.is-enabled:after { + transform: translate3d(calc(var(--toggle-width) - var(--toggle-thumb-width) - var(--toggle-border-width)), 0, 0); +} +.checkbox-container.is-enabled:active:after { + left: -4px; +} +.checkbox-container:before { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + opacity: 0; +} +.checkbox-container:after { + pointer-events: none; + content: ''; + display: block; + position: absolute; + background-color: var(--toggle-thumb-color); + width: var(--toggle-thumb-width); + height: var(--toggle-thumb-height); + margin: var(--toggle-border-width) 0 0 0; + border-radius: var(--toggle-thumb-radius); + transition: transform 0.15s ease-in-out, width 0.1s ease-in-out, left 0.1s ease-in-out; + left: 0; + transform: translate3d(var(--toggle-border-width), 0, 0); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); +} +.checkbox-container:active:after { + width: calc(var(--toggle-thumb-width) + var(--toggle-border-width)); +} +.checkbox-container.mod-small { + width: var(--toggle-s-width); + height: calc(var(--toggle-s-thumb-height) + var(--toggle-s-border-width) * 2); +} +.checkbox-container.mod-small:focus-within { + outline: var(--toggle-s-border-width) solid var(--background-modifier-border-focus); +} +.checkbox-container.mod-small:after { + width: var(--toggle-s-thumb-width); + height: var(--toggle-s-thumb-height); + margin: var(--toggle-s-border-width) 0 0 0; + transform: translate3d(var(--toggle-s-border-width), 0, 0); +} +.checkbox-container.mod-small.is-enabled:after { + transform: translate3d(calc(var(--toggle-s-width) - var(--toggle-s-thumb-width) - var(--toggle-s-border-width)), 0, 0); +} +.checkbox-container.mod-small:active:after { + width: calc(var(--toggle-s-thumb-width) + var(--toggle-s-border-width)); +} +@media (forced-colors: active) { + .checkbox-container { + outline: 1px ButtonBorder solid; + } + .checkbox-container:after { + outline: 1px ButtonBorder solid; + } + .checkbox-container.is-enabled { + background-color: SelectedItem; + } +} +/* Add this attribute to the element that needs a tooltip */ +.tooltip { + animation: pop-down 200ms forwards ease-in-out; + box-shadow: 0 2px 8px var(--background-modifier-box-shadow); + background-color: var(--background-modifier-message); + border-radius: var(--radius-s); + color: #FAFAFA; + font-size: var(--font-ui-smaller); + font-weight: var(--font-medium); + left: 50%; + line-height: var(--line-height-tight); + max-width: 300px; + padding: var(--size-4-1) var(--size-4-2); + position: fixed; + text-align: center; + transform: translateX(-50%); + z-index: var(--layer-tooltip); + pointer-events: none; + white-space: pre-wrap; + word-break: normal; + overflow-wrap: anywhere; +} +.tooltip.mod-right { + animation: pop-right 200ms forwards ease-in-out; + transform: translateY(-50%); +} +.tooltip.mod-left { + animation: pop-right 200ms forwards ease-in-out; + transform: translateY(-50%); +} +.tooltip.mod-error { + width: 200px; + background-color: var(--background-modifier-error); + color: var(--text-on-accent); +} +.tooltip.mod-wide { + max-width: 450px; + width: 400px; +} +/* Triangle hack to make tooltip look like a speech bubble */ +.tooltip .tooltip-arrow { + position: absolute; + top: -5px; + left: 50%; + width: 0; + margin-left: -5px; + border-bottom: 5px solid var(--background-modifier-message); + border-right: 5px solid transparent; + border-left: 5px solid transparent; + content: " "; + font-size: 0; + line-height: 0; +} +.tooltip.mod-right .tooltip-arrow { + top: calc(50% - 5px); + left: -5px; + border-right: 5px solid var(--background-modifier-message); + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; +} +.tooltip.mod-left .tooltip-arrow { + top: calc(50% - 5px); + left: calc(100% + 5px); + border-left: 5px solid var(--background-modifier-message); + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; +} +.tooltip.mod-top .tooltip-arrow { + top: calc(100%); + border-top: 5px solid var(--background-modifier-message); + border-bottom: 5px solid transparent; +} +.tooltip.mod-error .tooltip-arrow { + border-bottom-color: var(--background-modifier-error); +} +.tooltip.mod-error.mod-right .tooltip-arrow { + border-right-color: var(--background-modifier-error); + border-bottom: 5px solid transparent; +} +.tooltip.mod-error.mod-left .tooltip-arrow { + border-left-color: var(--background-modifier-error); + border-bottom: 5px solid transparent; +} +[aria-label] .svg-icon { + pointer-events: none; +} +@keyframes pop-down { + 0% { + opacity: 0; + transform: translateX(-50%) scale(1); + } + 20% { + opacity: 0.7; + transform: translateX(-50%) scale(1.02); + } + 40% { + opacity: 1; + transform: translateX(-50%) scale(1.05); + } + 100% { + opacity: 1; + transform: translateX(-50%) scale(1); + } +} +@keyframes pop-right { + 0% { + opacity: 0; + transform: translateY(-50%) scale(1); + } + 20% { + opacity: 0.7; + transform: translateY(-50%) scale(1.02); + } + 40% { + opacity: 1; + transform: translateY(-50%) scale(1.05); + } + 100% { + opacity: 1; + transform: translateY(-50%) scale(1); + } +} +.tree-item-self { + align-items: baseline; + display: flex; + border-radius: var(--radius-s); + color: var(--nav-item-color); + font-size: var(--nav-item-size); + line-height: var(--line-height-tight); + font-weight: var(--nav-item-weight); + margin-bottom: var(--size-2-1); + padding: var(--nav-item-padding); + position: relative; +} +.tree-item-self:before { + content: '\200B'; +} +.tree-item-self.mod-collapsible { + padding: var(--nav-item-parent-padding); +} +.tree-item-self.is-being-dragged-over { + color: var(--nav-item-color-highlighted); + background: hsla(var(--interactive-accent-hsl), 0.1); +} +.tree-item-self.is-being-dragged-over .collapse-icon { + color: var(--nav-item-color-highlighted); +} +.tree-item-self.has-active-menu { + box-shadow: 0 0 0 2px var(--background-modifier-border-focus); +} +.tree-item-self.is-being-renamed { + flex-grow: 1; + white-space: normal; + box-shadow: 0 0 0 2px var(--background-modifier-border-focus); +} +.tree-item-self.is-being-renamed [contenteditable="true"], +.tree-item-self.is-being-renamed .tree-item-inner { + cursor: text; + flex-grow: 1; +} +.tree-item-self.is-being-renamed:focus-within { + color: var(--nav-item-color-active); + box-shadow: 0 0 0 2px var(--interactive-accent); +} +.tree-item-self.is-clickable { + cursor: var(--cursor); +} +@media (hover: hover) { + body:not(.is-grabbing) .tree-item-self.is-clickable:hover { + color: var(--nav-item-color-hover); + background-color: var(--nav-item-background-hover); + font-weight: var(--nav-item-weight-hover); + } +} +.is-mobile .tree-item-self.is-clickable { + transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; +} +.tree-item-self.is-clickable.mobile-tap { + background-color: var(--nav-item-background-hover); + color: var(--nav-item-color-hover); + font-weight: var(--nav-item-weight-hover); +} +body:not(.is-grabbing) .tree-item-self.is-active:hover, +.tree-item-self.is-active { + color: var(--nav-item-color-active); + background-color: var(--nav-item-background-active); + font-weight: var(--nav-item-weight-active); +} +body:not(.is-grabbing) .tree-item-self.is-selected:hover, +.tree-item-self.is-selected { + color: var(--nav-item-color-selected); + background-color: var(--nav-item-background-selected); +} +body:not(.is-grabbing) .tree-item-self.is-being-dragged:hover, +.tree-item-self.is-being-dragged { + color: var(--text-on-accent); + background-color: var(--interactive-accent); +} +body:not(.is-grabbing) .tree-item-self.is-being-dragged:hover .tree-item-icon, +.tree-item-self.is-being-dragged .tree-item-icon { + color: var(--text-on-accent); +} +body:not(.is-phone) .workspace-leaf.mod-active .tree-item-self.has-focus { + box-shadow: 0 0 0 2px var(--background-modifier-border-focus); +} +body:not(.is-phone) .workspace-leaf.mod-active .tree-item-self.has-focus:focus-within { + box-shadow: 0 0 0 2px var(--interactive-accent); +} +.tree-item-self .tree-item-icon { + position: absolute; + margin-inline-start: calc(-1 * var(--size-4-5)); + width: var(--size-4-4); + display: flex; + align-items: center; + justify-content: center; + opacity: var(--icon-opacity); + color: var(--icon-color); + flex: 0 0 auto; +} +.tree-item-self .tree-item-icon:before { + content: "\200b"; +} +.tree-item-self .tree-item-icon .svg-icon:not(.right-triangle) { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-s-stroke-width); +} +.tree-item-flair-outer { + padding-inline-start: var(--size-4-1); + margin-inline-start: auto; + display: flex; + flex-shrink: 0; + align-items: center; +} +.tree-item-flair { + font-size: var(--font-ui-smaller); + color: var(--text-faint); + line-height: 1; + border-radius: var(--radius-s); +} +@media (hover: hover) { + .tree-item-self:hover .tree-item-flair { + color: var(--text-muted); + } +} +.tree-item-inner { + overflow: hidden; + white-space: pre-wrap; +} +.tree-item-inner-text { + overflow: hidden; + text-overflow: ellipsis; +} +.tree-item-inner-subtext { + color: var(--text-faint); + font-size: 85%; +} +.tree-item-children { + padding-inline-start: var(--nav-item-children-padding-start, var(--nav-item-children-padding-left)); + margin-inline-start: var(--nav-item-children-margin-start, var(--nav-item-children-margin-left)); + margin-bottom: 1px; + border-inline-start: var(--nav-indentation-guide-width) solid var(--nav-indentation-guide-color); +} +.drop-indicator { + position: absolute; + left: 0; + width: 100%; + height: 0; + border: 2px solid var(--interactive-accent); + pointer-events: none; +} +.drop-indicator:not(.is-active) { + display: none; +} +audio { + outline: none; +} +.markdown-rendered audio { + max-width: 100%; + outline: none; +} +audio { + width: 100%; + height: 42px; +} +audio::-webkit-media-controls-enclosure { + border-radius: calc(var(--radius-m) - 1px); + border: 1px solid var(--background-modifier-border); + background-color: var(--background-primary-alt); +} +audio::-webkit-media-controls-current-time-display, +audio::-webkit-media-controls-time-remaining-display { + font-family: var(--font-interface); +} +iframe { + border: 0; +} +kbd { + color: var(--code-normal); + font-family: var(--font-monospace); + background-color: var(--code-background); + border-radius: var(--radius-s); + font-size: var(--code-size); + padding: 0.1em 0.25em; +} +.workspace-leaf-content[data-type="pdf"] .view-content { + display: flex; + flex-direction: column; + overflow: hidden; + padding: 0; +} +.pdf-container { + background-color: var(--pdf-background); + flex-grow: 1; + min-width: 350px; + overflow: hidden; + position: relative; +} +.theme-dark .pdf-container.mod-themed .annotationLayer .textWidgetAnnotation input, +.theme-dark .pdf-container.mod-themed .annotationLayer .textWidgetAnnotation textarea { + filter: invert(100%) hue-rotate(180deg); +} +.theme-dark .pdf-container.mod-themed .popupWrapper > div { + background-color: var(--background-secondary-alt); + filter: drop-shadow(0px 0px 1px var(--color-base-60)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.4)); +} +.theme-dark .pdf-container.mod-themed .popupWrapper > div::after { + background-color: var(--background-secondary-alt); +} +.theme-dark .pdf-container.mod-themed .popupContent:empty + .popupMeta { + background-color: var(--background-secondary-alt); +} +.pdf-viewer-container { + outline: none; + overflow: auto; + position: absolute; + top: 0; + inset-inline-end: 0; + bottom: 0; + inset-inline-start: 0; + scroll-padding: var(--size-4-3); + z-index: 0; +} +.findbarOpen .pdf-viewer-container { + margin-top: var(--findbar-height); +} +.pdf-content-container { + --sidebar-width: 140px; +} +.pdf-content-container.sidebarMoving .pdf-sidebar-container, +.pdf-content-container.sidebarOpen .pdf-sidebar-container { + visibility: visible; +} +.pdf-content-container.sidebarOpen .pdf-sidebar-container { + inset-inline-start: 0; +} +.pdf-content-container.sidebarOpen .pdf-viewer-container { + inset-inline-start: var(--sidebar-width); + transition-property: inset-inline-start; +} +.pdf-embed .pdf-content-container.sidebarOpen .pdf-sidebar-container, +.is-mobile .pdf-content-container.sidebarOpen .pdf-sidebar-container { + inset-inline-start: 0; +} +.pdf-embed .pdf-content-container.sidebarOpen .pdf-viewer-container, +.is-mobile .pdf-content-container.sidebarOpen .pdf-viewer-container { + inset-inline-start: 0; +} +.pdf-content-container .pdf-sidebar-container, +.pdf-content-container .pdf-viewer-container { + transition-duration: 275ms; + transition-timing-function: var(--anim-motion-swing); +} +.pdf-content-container.sidebarResizing .pdf-sidebar-container, +.pdf-content-container.sidebarResizing .pdf-viewer-container { + /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */ + transition-duration: 0s; +} +.pdf-content-container { + min-width: 350px; + position: absolute; + bottom: 0; + inset-inline-start: 0; + inset-inline-end: 0; + top: 0; +} +.pdf-content-container.is-loading:before { + z-index: 1; +} +.pdf-sidebar-container { + background-color: var(--pdf-sidebar-background); + border-inline-end: var(--divider-width) solid var(--divider-color); + bottom: 0; + display: flex; + flex-direction: column; + inset-inline-start: calc(-1 * var(--sidebar-width)); + position: absolute; + top: 0; + transition-property: inset-inline-start; + visibility: hidden; + width: var(--sidebar-width); + z-index: 100; +} +.findbarOpen .pdf-sidebar-container { + top: var(--findbar-height); +} +.is-mobile .pdf-sidebar-container[data-view="1"], +.pdf-embed .pdf-sidebar-container[data-view="1"] { + inset-inline-start: -140px; + width: 140px; +} +.is-mobile .pdf-sidebar-container[data-view="2"], +.pdf-embed .pdf-sidebar-container[data-view="2"] { + inset-inline-start: -275px; + width: 275px; +} +.pdf-sidebar-container .pdf-thumbnail-view, +.pdf-sidebar-container .pdf-outline-view { + bottom: 0; + overflow: auto; + padding: var(--size-4-2) var(--size-4-2); + position: absolute; + top: 0; + -webkit-user-select: none; + user-select: none; + width: 100%; +} +.pdf-sidebar-container .pdf-thumbnail-view { + display: flex; + flex-wrap: wrap; + gap: var(--size-4-1); + justify-content: center; + align-content: flex-start; + padding: var(--size-4-3); + width: 100%; +} +.pdf-sidebar-container .pdf-thumbnail-view a { + display: block; + cursor: var(--cursor); +} +.pdf-sidebar-container .pdf-thumbnail-view a:active, +.pdf-sidebar-container .pdf-thumbnail-view a:focus { + outline: 0; +} +.pdf-sidebar-container .thumbnail { + --thumbnail-width: 0; + --thumbnail-height: 0; + position: relative; + width: var(--thumbnail-width); + height: var(--thumbnail-height); + border: var(--size-4-2) solid transparent; + border-radius: var(--radius-s); + box-sizing: content-box; +} +.pdf-sidebar-container .thumbnail::before { + content: " "; + position: absolute; + top: 0; + inset-inline-end: 0; + bottom: 0; + inset-inline-start: 0; + box-shadow: var(--pdf-thumbnail-shadow); +} +.pdf-sidebar-container .thumbnail::after { + background-color: var(--background-secondary); + border-radius: 3px; + bottom: var(--size-4-1); + content: attr(data-page-label); + color: var(--text-muted); + display: block; + font-size: var(--font-ui-smaller); + line-height: 1; + padding: var(--size-2-1) var(--size-4-1); + position: absolute; + inset-inline-end: var(--size-4-1); +} +.pdf-sidebar-container .thumbnail:not([data-loaded]) { + border: 1px dashed var(--background-modifier-border); + margin: calc(var(--size-4-2) - 1px); +} +.pdf-sidebar-container .thumbnail:hover, +.pdf-sidebar-container .thumbnail.selected { + border-color: var(--background-modifier-hover); +} +.pdf-sidebar-container img.thumbnailImage { + border: 1px solid transparent; + max-width: unset; + width: var(--thumbnail-width); + height: var(--thumbnail-height); +} +.pdf-outline-view .tree-item-self:not(.mod-collapsible) { + padding-inline-start: calc(10px + var(--size-4-2) + var(--size-2-3)); +} +.pdf-outline-view .tree-item-self.mod-active { + color: var(--nav-item-color-active); + background-color: var(--nav-item-background-active); + font-weight: var(--nav-item-weight-active); +} +.pdf-outline-view .tree-item-flair { + white-space: nowrap; +} +.pdf-sidebar-content-wrapper { + position: relative; + flex-grow: 1; +} +.pdf-sidebar-content { + bottom: 0; + inset-inline-start: 0; + overflow: auto; + position: absolute; + top: 0; + width: 100%; +} +.pdf-sidebar-content > .hidden { + display: none; +} +.pdf-sidebar-resizer { + background-color: transparent; + bottom: 0; + cursor: col-resize; + inset-inline-end: calc(var(--divider-width-hover) * -1); + position: absolute; + top: 0; + transition: background-color 200ms ease-in-out; + width: var(--divider-width-hover); + z-index: var(--layer-cover); +} +.is-mobile .pdf-sidebar-resizer, +.pdf-embed .pdf-sidebar-resizer { + display: none; +} +@media (hover: hover) { + .pdf-sidebar-resizer:hover { + background-color: var(--divider-color-hover); + } + .is-translucent .pdf-sidebar-resizer:hover { + background-color: var(--divider-color-hover); + } +} +.pdf-toolbar { + align-items: stretch; + background-color: var(--background-primary); + border-bottom: 1px solid var(--background-modifier-border); + display: flex; + justify-content: space-between; + overflow: auto; + padding: var(--size-4-1) var(--size-4-3); + position: relative; +} +.hover-popover .pdf-toolbar { + display: none; +} +.pdf-page-numbers { + white-space: nowrap; + margin-inline-end: var(--size-4-1); + font-size: var(--font-ui-small); + font-variant-numeric: tabular-nums; +} +.pdf-toolbar-left, +.pdf-toolbar-center, +.pdf-toolbar-right { + display: flex; + align-items: center; + gap: var(--size-4-1); +} +.pdf-toolbar-left.hidden, +.pdf-toolbar-center.hidden, +.pdf-toolbar-right.hidden { + display: none; +} +.pdf-toolbar-center { + position: absolute; + top: var(--size-4-1); + height: calc(100% - var(--size-4-2)); + inset-inline-start: 50%; + transform: translateX(calc(var(--direction) * -50%)); +} +.pdf-toolbar-spacer { + width: var(--size-4-3); +} +.pdf-toolbar-divider { + width: var(--border-width); + height: var(--icon-size); + background-color: var(--background-modifier-border); +} +.pdf-page-input { + width: 7ch; + text-align: right; + font-variant-numeric: tabular-nums; +} +.pdf-page-input.mod-page-loading { + background-color: var(--background-secondary); + opacity: 0.5; +} +.pdf-findbar { + background-color: var(--background-primary); + flex-direction: row-reverse; + font-size: var(--font-ui-small); + gap: var(--size-4-1); + line-height: 1; + padding: var(--size-2-3); + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + top: 0; + z-index: 101; +} +.pdf-findbar input { + min-width: 300px; +} +.pdf-findbar.mod-hidden { + display: none; +} +.pdf-findbar input[type="checkbox"] { + display: none; + pointer-events: none; +} +.pdf-findbar label { + -webkit-user-select: none; + user-select: none; +} +.pdf-findbar label:hover, +.pdf-findbar input:focus-visible + label { + color: var(--toggled-btn-color); + background-color: var(--button-hover-color); +} +.pdf-findbar .pdf-toolbar-field[type="checkbox"]:checked + .pdf-toolbar-label { + background-color: var(--toggled-btn-bg-color) !important; + color: var(--toggled-btn-color); +} +.pdf-findbar .pdf-search-wrapper { + display: flex; + gap: var(--size-4-1); + align-items: center; +} +.pdf-findbar .mod-not-found { + --background-modifier-form-field: rgba(var(--background-modifier-error-rgb), 0.1); + --background-modifier-border-focus: rgba(var(--background-modifier-error-rgb), 0.6); +} +.pdf-findbar .mod-pending::before { + -webkit-mask-image: url("data:image/svg+xml,"); + animation: rotation 1s infinite linear; +} +.is-phone .pdf-findbar { + overflow: none; +} +.is-phone .pdf-findbar .pdf-toolbar-button { + height: auto; + width: auto; + padding: 6px 0; + background-color: transparent; + color: var(--text-accent); + flex-grow: 0; + flex-shrink: 0; +} +.is-phone .pdf-findbar .pdf-toolbar-divider, +.is-phone .pdf-findbar .pdf-findbar-settings-btn, +.is-phone .pdf-findbar .pdf-findbar-message { + display: none; +} +.is-phone .pdf-findbar input { + min-width: 0; +} +.is-phone .pdf-findbar .search-input-container { + flex-grow: 1; +} +.is-phone .pdf-findbar .pdf-search-wrapper { + gap: var(--size-4-2); +} +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.pdf-find-results-count { + color: var(--text-muted); + margin: 0 var(--size-4-2); + font-style: italic; + white-space: nowrap; +} +.pdf-find-results-count:empty { + display: none; +} +.pdf-findbar-settings { + background-color: var(--background-primary); + border-radius: var(--radius-m); + border: 1px solid var(--background-modifier-border); + box-shadow: var(--shadow-s); + padding: var(--size-4-1) var(--size-4-2); + position: absolute; + transform: translateX(-100%); + width: 200px; + z-index: 200; +} +.pdf-findbar-settings .setting-item { + padding: var(--size-4-1) 0; + border: none; +} +.pdf-findbar-settings .setting-item-name { + font-size: var(--font-ui-small); +} +.pdf-password-dialog { + align-items: center; + display: flex; + flex-direction: column; + font-size: var(--font-ui-medium); + gap: var(--size-4-1); + justify-content: center; + inset-inline-start: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); +} +.pdf-password-dialog .mod-small { + font-size: var(--font-ui-small); +} +.pdf-password-dialog input { + margin-top: var(--size-4-2); +} +.pdf-lock-icon .svg-icon { + --icon-size: var(--icon-xl); + --icon-stroke: var(--icon-xl-stroke-width); +} +.textLayer .mod-focused { + background-color: rgb(var(--text-highlight-bg-rgb)); + border-radius: var(--radius-s); + box-sizing: content-box; + padding: var(--size-4-1); + margin: calc(var(--size-4-1) * -1); +} +.textLayer .mod-focused.appended { + position: static; +} +.annotationLayer .mod-focused { + background-color: rgba(var(--text-highlight-bg-rgb), 0.1); + border-radius: var(--radius-s); + box-shadow: var(--shadow-s); + box-sizing: content-box; + margin: calc(var(--size-4-2) * -1); + border: var(--size-4-1) solid rgba(var(--text-highlight-bg-rgb), 0.8); + padding: var(--size-4-1); +} +.annotationLayer .boundingRect { + z-index: 2000; + position: absolute; + pointer-events: none; +} +.annotationLayer .boundingRect > * { + pointer-events: initial; +} +.pdf-container .pdfViewer .canvasWrapper { + box-shadow: var(--pdf-shadow); +} +.pdf-container .pdfViewer .page { + --page-border: calc(var(--size-4-1) * var(--scale-factor)) solid transparent; + --page-margin: 0 auto; + --page-bg-color: transparent; + box-sizing: content-box; + flex-shrink: 0; +} +.pdf-container .pdfViewer .page.loadingIcon::after { + background: none; +} +.pdf-container .pdfViewer.removePageBorders.spread .page, +.pdf-container .pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page { + --spreadHorizontalWrapped-margin-LR: 0; + margin-inline: 0; + border: var(--size-4-1) solid transparent; +} +.pdf-container .pdfViewer.removePageBorders .page + .page { + border-top: var(--size-4-1) solid transparent; +} +.pdf-container .pdfViewer.removePageBorders .spread .page + .page { + border-top: none; +} +.pdf-container .pdfViewer.removePageBorders .spread .canvasWrapper { + box-shadow: var(--pdf-spread-shadow); +} +.pdf-container .pdfViewer.removePageBorders .spread + .spread { + border-top: var(--size-4-1) solid transparent; +} +.pdf-container .textLayer { + -webkit-user-select: text; + user-select: text; + opacity: 0.2; + background-color: transparent; +} +.pdf-container .textLayer ::selection, +.markdown-source-view.mod-cm6 .pdf-container .textLayer ::selection { + background-color: hsl(var(--color-accent-hsl)); +} +.pdf-container .textLayer br::selection, +.markdown-source-view.mod-cm6 .pdf-container .textLayer br::selection { + background-color: transparent; +} +.pdf-container .textLayer .highlight { + --highlight-bg-color: transparent; + --highlight-selected-bg-color: transparent; + --highlight-backdrop-filter: none; + --highlight-selected-backdrop-filter: none; + margin: -1px; + padding: 1px; + border-radius: var(--radius-s); +} +.pdf-container .textLayer .highlight.appended { + position: static; + display: inline-block; +} +.pdf-container .textLayer .highlight.begin { + border-radius: var(--radius-s) 0 0 var(--radius-s); +} +.pdf-container .textLayer .highlight.end { + border-radius: 0 var(--radius-s) var(--radius-s) 0; +} +.pdf-container .textLayer .highlight.selected { + box-shadow: 0 0 0 2px hsl(var(--interactive-accent-hsl)); + background-color: hsl(var(--interactive-accent-hsl)); +} +.pdf-container .textLayer .highlight:not(.selected) { + box-shadow: 0 0 0 2px rgb(var(--color-yellow-rgb)); + background-color: rgb(var(--color-yellow-rgb)); +} +.pdf-container .annotationLayer > section.hasPopup:not(.textAnnotation) { + pointer-events: none; +} +.pdf-container .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover { + opacity: 1; + background-color: hsla(var(--color-accent-hsl), 0.1); + box-shadow: none; +} +.pdf-container .annotationLayer .linkAnnotation.hasBorder:hover { + background-color: hsla(var(--color-accent-hsl), 0.1); +} +.popupWrapper { + --pdf-popup-width: 280px; + font-size: var(--font-ui-medium); + pointer-events: none; + position: absolute; + transform: translate(-50%, 0); + z-index: 10000; +} +.popupWrapper > div { + margin: var(--size-4-3); + background-color: var(--background-primary); + border-radius: var(--radius-s); + filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.2)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3)); + position: relative; +} +.popupWrapper > div:after { + background: var(--background-primary); + border-start-start-radius: 2px; + content: ""; + height: var(--size-4-3); + inset-inline-start: calc(50% - 2px); + position: absolute; + top: -5px; + transform: rotate(45deg); + width: var(--size-4-3); + z-index: -1; +} +.is-phone .pdf-annotation-modal { + align-items: flex-end; +} +.is-phone .pdf-annotation-modal .modal { + height: auto; + max-height: 40vh; + min-height: 0; + top: unset; + padding-bottom: var(--safe-area-inset-bottom); +} +.is-phone .pdf-annotation-modal .modal .modal-close-button, +.is-phone .pdf-annotation-modal .modal .modal-header { + display: none; +} +.is-phone .pdf-annotation-modal .modal-content { + overflow: hidden; + padding: 0; +} +.is-phone .pdf-annotation-modal .popup { + flex-direction: column-reverse; + height: 100%; + overflow: hidden; +} +.is-phone .pdf-annotation-modal .popupContent { + height: 100%; + max-height: none; + padding-bottom: calc(var(--safe-area-inset-bottom) + var(--size-4-4)); + padding-top: 0; +} +.is-phone .pdf-annotation-modal .popupContent:empty + .popupMeta, +.is-phone .pdf-annotation-modal .popupMeta { + --icon-size: var(--font-ui-medium); + --icon-stroke: var(--icon-m-stroke-width); + background-color: transparent; + padding: var(--size-4-2) var(--size-4-4); + border-top: none; +} +.popup { + cursor: initial; + display: flex; + flex-direction: column; + pointer-events: auto; + -webkit-user-select: text; + user-select: text; + white-space: normal; + width: var(--pdf-popup-width); + word-wrap: break-word; +} +.popupContent { + font-size: var(--font-ui-small); + line-height: var(--line-height-tight); + max-height: 200px; + overflow: auto; + padding: var(--size-4-4); + text-align: start; +} +.popupContent:empty { + display: none; +} +.popupMeta { + --icon-size: var(--font-ui-small); + --icon-stroke: 2.5px; + align-items: center; + background-color: var(--background-secondary); + border-top: 1px solid var(--background-modifier-border); + color: var(--text-muted); + display: flex; + font-size: var(--font-ui-smaller); + gap: var(--size-4-1); + justify-content: space-between; + padding: var(--size-4-1) var(--size-4-2); + border-bottom-left-radius: var(--radius-s); + border-bottom-right-radius: var(--radius-s); +} +.popupContent:empty + .popupMeta { + border-top: none; + background-color: var(--background-primary); + border-top-left-radius: var(--radius-s); + border-top-right-radius: var(--radius-s); +} +.popupMeta .clickable-icon { + margin-inline-end: calc(var(--size-4-1) * -1); + margin-inline-start: calc(var(--size-2-1) * -1); +} +.popupDate { + white-space: nowrap; +} +.markdown-rendered video { + max-width: 100%; + outline: none; +} +.markdown-rendered blockquote { + color: var(--blockquote-color); + font-style: var(--blockquote-font-style); + background-color: var(--blockquote-background-color); + border-inline-start: var(--blockquote-border-thickness) solid var(--blockquote-border-color); + padding-top: 0; + padding-bottom: 0; + padding-inline-start: var(--size-4-6); + margin-inline-start: 0; + margin-inline-end: 0; +} +.markdown-rendered blockquote > :first-child { + margin-top: 0; +} +.markdown-rendered blockquote > :last-child { + margin-bottom: 0; +} +.cm-s-obsidian span.cm-quote { + color: var(--blockquote-color); +} +.cm-s-obsidian span.cm-formatting-quote { + color: var(--text-faint); +} +.cm-s-obsidian .hmd-inactive-line span.cm-formatting-quote { + color: transparent; +} +.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:before, +.markdown-source-view.mod-cm6 .cm-blockquote-border:before { + content: "\200b"; + display: block; + width: 1px; + border-inline-start: var(--blockquote-border-thickness) solid var(--blockquote-border-color); + color: transparent; + position: absolute; + top: 0; + bottom: 0; + pointer-events: none; +} +.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote { + font-style: var(--blockquote-style); + background-color: var(--blockquote-background-color); +} +.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:before { + inset-inline-start: 0; +} +.markdown-source-view.mod-cm6 .cm-blockquote-border { + display: inline-block; +} +.callout { + --callout-color: var(--callout-default); + --callout-icon: lucide-pencil; +} +@supports (color: color-mix(in srgb, white 50%, black)) { + .callout { + --bases-table-header-background: transparent; + --bases-table-header-background-hover: rgba(var(--callout-color), 0.1); + --bases-embed-border-color: color-mix(in srgb, rgb(var(--callout-color)) 25%, var(--background-primary) 50%); + --bases-table-border-color: color-mix(in srgb, rgb(var(--callout-color)) 25%, var(--background-primary) 50%); + --table-border-color: color-mix(in srgb, rgb(var(--callout-color)) 25%, var(--background-primary) 50%); + } +} +.callout[data-callout="abstract"], +.callout[data-callout="summary"], +.callout[data-callout="tldr"] { + --callout-color: var(--callout-summary); + --callout-icon: lucide-clipboard-list; +} +.callout[data-callout="info"] { + --callout-color: var(--callout-info); + --callout-icon: lucide-info; +} +.callout[data-callout="todo"] { + --callout-color: var(--callout-todo); + --callout-icon: lucide-check-circle-2; +} +.callout[data-callout="important"] { + --callout-color: var(--callout-important); + --callout-icon: lucide-flame; +} +.callout[data-callout="tip"], +.callout[data-callout="hint"] { + --callout-color: var(--callout-tip); + --callout-icon: lucide-flame; +} +.callout[data-callout="success"], +.callout[data-callout="check"], +.callout[data-callout="done"] { + --callout-color: var(--callout-success); + --callout-icon: lucide-check; +} +.callout[data-callout="question"], +.callout[data-callout="help"], +.callout[data-callout="faq"] { + --callout-color: var(--callout-question); + --callout-icon: help-circle; +} +.callout[data-callout="warning"], +.callout[data-callout="caution"], +.callout[data-callout="attention"] { + --callout-color: var(--callout-warning); + --callout-icon: lucide-alert-triangle; +} +.callout[data-callout="failure"], +.callout[data-callout="fail"], +.callout[data-callout="missing"] { + --callout-color: var(--callout-fail); + --callout-icon: lucide-x; +} +.callout[data-callout="danger"], +.callout[data-callout="error"] { + --callout-color: var(--callout-error); + --callout-icon: lucide-zap; +} +.callout[data-callout="bug"] { + --callout-color: var(--callout-bug); + --callout-icon: lucide-bug; +} +.callout[data-callout="example"] { + --callout-color: var(--callout-example); + --callout-icon: lucide-list; +} +.callout[data-callout="quote"], +.callout[data-callout="cite"] { + --callout-color: var(--callout-quote); + --callout-icon: quote-glyph; +} +.callout { + overflow: hidden; + border-style: solid; + border-color: rgba(var(--callout-color), var(--callout-border-opacity)); + border-width: var(--callout-border-width); + border-radius: var(--callout-radius); + margin: 1em 0; + mix-blend-mode: var(--callout-blend-mode); + background-color: rgba(var(--callout-color), 0.1); + padding: var(--callout-padding); +} +.callout.is-collapsible .callout-title { + cursor: var(--cursor); +} +.callout-title { + padding: var(--callout-title-padding); + display: flex; + gap: var(--size-4-1); + font-size: var(--callout-title-size); + color: rgb(var(--callout-color)); + line-height: var(--line-height-tight); + align-items: flex-start; +} +.callout-content { + overflow-x: auto; + padding: var(--callout-content-padding); + background-color: var(--callout-content-background); +} +.callout-content .callout { + margin-top: 20px; +} +.callout-icon { + flex: 0 0 auto; + display: flex; + align-items: center; +} +.callout-icon .svg-icon { + color: rgb(var(--callout-color)); +} +.callout-icon::after { + content: "\200B"; +} +.callout-title-inner { + --font-weight: var(--callout-title-weight); + font-weight: var(--font-weight); + color: var(--callout-title-color); +} +.callout-fold { + display: flex; + align-items: center; + padding-inline-end: var(--size-4-2); +} +.callout-fold::after { + content: "\200B"; +} +.callout-fold .svg-icon { + transition: transform 100ms ease-in-out; +} +.callout-fold.is-collapsed .svg-icon { + transform: rotate(calc(var(--direction) * -1 * 90deg)); +} +.markdown-source-view.mod-cm6 .callout { + margin: 0; +} +.markdown-source-view.mod-cm6 .callout-content .callout { + margin: 1em 0; +} +.markdown-rendered code { + color: var(--code-normal); + font-family: var(--font-monospace); + background-color: var(--code-background); + border-radius: var(--code-radius); + font-size: var(--code-size); + padding: 0.15em 0.3em; + border: var(--code-border-width) solid var(--code-border-color); + -webkit-box-decoration-break: clone; +} +.cm-s-obsidian span.cm-inline-code { + color: var(--code-normal); + font-size: var(--code-size); + background-color: var(--code-background); + vertical-align: baseline; + -webkit-box-decoration-break: clone; +} +.cm-s-obsidian span.cm-inline-code span.cm-inline-code.cm-hmd-indented-code { + background-color: transparent; +} +.cm-s-obsidian span.cm-inline-code span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code):not(.obsidian-search-match-highlight) { + background-color: var(--code-background); + vertical-align: baseline; +} +.cm-s-obsidian span.cm-inline-code span.cm-inline-code.hmd-hidden-token { + font-size: 0; +} +.cm-s-obsidian .cm-inline-code { + border-color: var(--code-border-color); + border-style: solid; +} +.cm-s-obsidian .cm-inline-code:not(.cm-formatting) { + border-radius: var(--code-radius); + padding: 0.15em 0.3em; + border-width: var(--code-border-width); +} +.cm-s-obsidian .cm-inline-code.cm-formatting { + border-start-start-radius: var(--code-radius); + border-start-end-radius: 0; + border-end-start-radius: var(--code-radius); + border-end-end-radius: 0; + padding: 0.15em 0; + border-width: var(--code-border-width) 0 var(--code-border-width) var(--code-border-width); +} +.cm-s-obsidian .cm-inline-code:not(.cm-formatting) + .cm-formatting.cm-inline-code { + border-start-start-radius: 0; + border-start-end-radius: var(--code-radius); + border-end-start-radius: 0; + border-end-end-radius: var(--code-radius); + padding-inline-end: 0; + border-width: var(--code-border-width) var(--code-border-width) var(--code-border-width) 0; +} +.cm-s-obsidian .cm-inline-code.cm-formatting ~ .cm-inline-code:not(.cm-formatting) { + border-radius: 0; + padding: 0.15em 0; + border-left: none; + border-right: none; +} +.markdown-rendered pre { + position: relative; + padding: var(--size-4-3) var(--size-4-4); + min-height: 38px; + background-color: var(--code-background); + border-radius: var(--code-radius); + white-space: var(--code-white-space); + border: var(--code-border-width) solid var(--code-border-color); + overflow-x: auto; +} +.markdown-rendered pre code { + border: none; + padding: 0; + background-color: transparent; +} +.markdown-rendered li > pre { + margin: 0; +} +.markdown-rendered pre:not(:hover) > button.copy-code-button { + display: none; +} +.markdown-rendered button.copy-code-button { + margin: 6px; + padding: 6px 8px; + height: auto; + background-color: transparent; + box-shadow: none; + color: var(--text-muted); + font-size: var(--font-ui-smaller); + font-family: var(--font-interface); + position: absolute; + top: 0; + inset-inline-end: 0; +} +@media (hover: hover) { + .markdown-rendered button.copy-code-button:hover { + background-color: var(--background-modifier-hover); + } +} +.theme-dark .mermaid > svg { + filter: invert(100%) hue-rotate(180deg) saturate(1.25); +} +.markdown-source-view.mod-cm6 .cm-hmd-codeblock { + --indentation-guide-editing-indent: 0; +} +.markdown-source-view.mod-cm6 .cm-preview-code-block pre { + margin: 0; +} +.markdown-source-view.mod-cm6 .code-block-flair { + position: absolute; + right: 6px; + top: 6px; + z-index: 1; + display: inline-block; + padding: var(--size-4-1) var(--size-4-2); + border-radius: var(--code-radius); + font-family: var(--font-interface); + font-size: var(--font-ui-smaller); + color: var(--text-muted); + cursor: var(--cursor); +} +@media (hover: hover) { + .markdown-source-view.mod-cm6 .code-block-flair:hover { + background-color: var(--background-modifier-hover); + } +} +.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock { + color: var(--code-normal); +} +.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock:not(.HyperMD-list-line) { + padding-inline-start: var(--size-4-4); +} +.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock .cm-formatting.cm-formatting-list { + font-family: var(--font-text); + font-size: var(--font-text-size); +} +.cm-s-obsidian .HyperMD-codeblock { + font-family: var(--font-monospace); + font-size: var(--code-size); + direction: ltr; +} +.cm-s-obsidian .HyperMD-codeblock-begin, +.cm-s-obsidian .HyperMD-codeblock-end { + color: var(--code-normal); +} +.cm-s-obsidian .HyperMD-codeblock span.cm-inline-code { + background-color: inherit; + border: inherit; + padding: inherit; + font-size: inherit; +} +.cm-s-obsidian div.HyperMD-codeblock-bg { + left: 0; + right: 0; + background-color: var(--code-background); + border-width: 0px var(--code-border-width) 0px var(--code-border-width); + border-color: var(--code-border-color); + border-style: solid; +} +.cm-s-obsidian div.HyperMD-codeblock-begin-bg { + border-top-left-radius: var(--code-radius); + border-top-right-radius: var(--code-radius); + border-width: var(--code-border-width) var(--code-border-width) 0px var(--code-border-width); +} +.cm-s-obsidian div.HyperMD-codeblock-end-bg { + border-bottom-left-radius: var(--code-radius); + border-bottom-right-radius: var(--code-radius); + border-width: 0 var(--code-border-width) var(--code-border-width) var(--code-border-width); +} +.cm-s-obsidian div.HyperMD-codeblock-begin-bg, +.cm-s-obsidian div.HyperMD-codeblock-end-bg { + background-color: var(--code-background); + border-color: var(--code-border-color); + border-style: solid; +} +code[class*="language-"] { + color: var(--code-normal); + background: none; + word-wrap: break-word; + white-space: pre-wrap; + word-break: normal; + direction: ltr; + font-family: var(--font-monospace); + text-align: left; + word-spacing: normal; + line-height: var(--line-height-normal); + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} +@media print { + code[class*="language-"] { + text-shadow: none; + } +} +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} +.token.entity { + cursor: help; +} +/* Syntax highlighting */ +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: var(--code-comment); +} +.token.namespace { + opacity: 0.7; +} +.token.tag, +.token.constant, +.token.symbol, +.token.deleted { + color: var(--code-tag); +} +.token.punctuation { + color: var(--code-punctuation); +} +.token.boolean, +.token.number { + color: var(--code-value); +} +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.inserted { + color: var(--code-string); +} +.token.operator { + color: var(--code-operator); +} +.token.entity, +.token.parameter, +.token.property, +.token.url, +.language-css .token.string, +.style .token.string, +.token.variable { + color: var(--code-property); +} +.token.atrule, +.token.attr-value, +.token.builtin, +.token.function, +.token.class-name, +.token.property-access { + color: var(--code-function); +} +.token.keyword { + color: var(--code-keyword); +} +.token.regex, +.token.important { + color: var(--code-important); +} +.cm-inline-code, +.cm-math { + color: var(--code-normal); +} +.cm-comment, +.cm-meta { + color: var(--code-comment); +} +.cm-tag { + color: var(--code-tag); +} +.cm-punctuation, +.cm-bracket, +.cm-hr { + color: var(--code-punctuation); +} +.cm-number { + color: var(--code-value); +} +.cm-qualifier, +.cm-string, +.cm-string-2 { + color: var(--code-string); +} +.cm-operator { + color: var(--code-operator); +} +.cm-link, +.cm-variable, +.cm-variable-2, +.cm-variable-3 { + color: var(--code-property); +} +.cm-builtin, +.cm-property, +.cm-attribute, +.cm-type { + color: var(--code-function); +} +.cm-keyword { + color: var(--code-keyword); +} +.cm-editor.cm-focused .cm-matchingBracket { + background-color: var(--code-bracket-background); + box-shadow: inset 0 0 0 1px var(--background-modifier-hover); +} +.cm-editor.cm-focused .cm-matchingBracket .punctuation { + color: var(--text-normal); +} +.markdown-preview-view .markdown-embed .markdown-preview-view { + --file-folding-offset: 0px; + height: 100%; + padding: 0; +} +.markdown-preview-view .markdown-embed .markdown-preview-view .markdown-preview-pusher h1, +.markdown-preview-view .markdown-embed .markdown-preview-view .markdown-preview-pusher h2, +.markdown-preview-view .markdown-embed .markdown-preview-view .markdown-preview-pusher h3, +.markdown-preview-view .markdown-embed .markdown-preview-view .markdown-preview-pusher h4, +.markdown-preview-view .markdown-embed .markdown-preview-view .markdown-preview-pusher h5, +.markdown-preview-view .markdown-embed .markdown-preview-view .markdown-preview-pusher h6 { + margin-top: 0; +} +.pdf-embed, +.markdown-source-view .pdf-embed, +.markdown-source-view.mod-cm6 .cm-content > .pdf-embed, +.internal-embed.pdf-embed:not(.image-embed) { + width: 100%; + height: 800px; + display: flex; + flex-direction: column; +} +.pdf-embed { + overflow: hidden; + position: relative; +} +.pdf-embed:not(.canvas-node-content) { + border: 1px solid var(--background-modifier-border); + border-radius: var(--radius-s); +} +.pdf-embed:not(.canvas-node-content) .edit-block-button + .pdf-toolbar { + padding-inline-end: var(--size-4-9); +} +.markdown-source-view.mod-cm6 .pdf-embed .edit-block-button { + background-color: var(--background-primary); + opacity: 1; + top: 6px; + z-index: 1; +} +@media (hover: hover) { + .markdown-source-view.mod-cm6 .pdf-embed .edit-block-button:hover { + color: var(--icon-color-hover); + background-color: var(--background-modifier-hover); + } +} +@media print { + .pdf-embed:not(.canvas-node-content) { + align-items: center; + border: none; + justify-content: center; + max-height: 80vh; + } + .pdf-embed:not(.canvas-node-content) .pdf-container, + .pdf-embed:not(.canvas-node-content) .pdf-toolbar { + display: none; + } + .pdf-embed:not(.canvas-node-content) .canvasWrapper { + border-radius: var(--radius-s); + border: 1px solid var(--background-modifier-border); + max-height: 100%; + overflow: hidden; + width: fit-content; + } + .pdf-embed:not(.canvas-node-content) canvas { + height: auto; + width: 100%; + } +} +.markdown-embed, +.file-embed { + position: relative; +} +.markdown-embed-link, +.file-embed-link { + position: absolute; + top: 4px; + inset-inline-end: 4px; + color: var(--icon-color); + opacity: var(--icon-opacity); + cursor: var(--cursor-link); + padding: var(--size-2-2); + border-radius: var(--radius-s); + display: flex; + align-items: center; + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); +} +@media (hover: hover) { + .markdown-embed-link:hover, + .file-embed-link:hover { + color: var(--icon-color-hover); + opacity: var(--icon-opacity-hover); + background: var(--background-modifier-hover); + } +} +.file-embed-title { + display: flex; + align-items: center; + justify-content: center; + gap: var(--size-4-2); +} +.file-embed-icon { + color: var(--text-muted); + display: flex; +} +.file-embed { + display: flex; + justify-content: center; + border-radius: var(--radius-m); + background-color: var(--background-primary-alt); +} +.file-embed.mod-generic, +.file-embed.mod-empty { + cursor: var(--cursor-link); + padding: var(--size-4-2); + color: var(--text-muted); + text-align: center; + font-size: var(--font-smaller); +} +@media (hover: hover) { + .file-embed.mod-generic:hover, + .file-embed.mod-empty:hover { + color: var(--text-normal); + background-color: var(--background-secondary); + } +} +.file-embed.mod-empty-attachment { + padding: var(--size-4-2); + color: var(--text-muted); + text-align: center; + font-size: var(--font-smaller); +} +.markdown-embed-content { + height: 100%; +} +.embed-title { + align-items: center; + display: flex; + gap: var(--size-4-1); + font-size: var(--font-text-size); + font-weight: calc(var(--font-weight) + var(--bold-modifier)); + text-align: start; + text-overflow: ellipsis; + white-space: nowrap; + padding: 0 0 var(--size-4-2) 0; +} +.markdown-embed { + font-style: var(--embed-font-style); + background-color: var(--embed-background); + border-top: var(--embed-border-top); + border-inline-end: var(--embed-border-end, var(--embed-border-right)); + border-bottom: var(--embed-border-bottom); + border-inline-start: var(--embed-border-start, var(--embed-border-left)); + margin: 0; +} +.markdown-embed .markdown-preview-view { + padding: 0; +} +.internal-embed:not(.image-embed) { + display: block; +} +.internal-embed img:not([width]), +.internal-embed audio, +.internal-embed video { + max-width: 100%; +} +.internal-embed.query-embed .edit-block-button { + opacity: 1; +} +.inline-embed > .markdown-embed-title { + padding: var(--embed-padding); +} +.inline-embed > .markdown-embed-content { + height: fit-content; + max-height: var(--embed-max-height); + overflow: auto; +} +.inline-embed > .markdown-embed-content > .markdown-source-view, +.inline-embed > .markdown-embed-content > .markdown-preview-view { + padding: var(--embed-padding); +} +.inline-embed .markdown-source-view.mod-cm6 .cm-editor { + min-height: unset; +} +.embed-iframe { + width: 100%; + height: 100%; +} +iframe.external-embed { + width: 600px; + max-width: 100%; + height: 350px; +} +.markdown-source-view.mod-cm6 .internal-embed { + white-space: normal; +} +.markdown-source-view.mod-cm6 .cm-embed-block { + position: relative; + white-space: normal; + overflow-wrap: normal; + word-break: normal; +} +@media (hover: hover) { + .markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget, .cm-lang-base):hover { + box-shadow: var(--embed-block-shadow-hover); + border-radius: var(--radius-s); + overflow: hidden; + cursor: text; + } + .markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget, .cm-lang-base):hover .edit-block-button { + opacity: 1; + } + .markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget, .cm-lang-base):hover .edit-block-button:hover { + background-color: var(--background-modifier-hover); + } +} +.markdown-source-view.mod-cm6 .cm-embed-block > .mermaid { + overflow-x: auto; +} +.markdown-source-view.mod-inside-iframe > .cm-editor > .cm-scroller { + flex-direction: column; + padding: 0 var(--size-4-4); +} +.markdown-source-view.mod-inside-iframe > .cm-editor > .cm-scroller::before, +.markdown-source-view.mod-inside-iframe > .cm-editor > .cm-scroller::after { + content: " "; + display: block; + min-height: min(calc(10vh - 3px), var(--size-4-4)); + max-height: var(--size-4-4); + flex: 1 1 0; +} +.markdown-source-view.mod-inside-iframe > .cm-editor > .cm-scroller > .cm-sizer { + min-height: unset; + flex: 1 0 0; +} +.footnote-link { + text-decoration: none; +} +.footnotes { + font-size: var(--footnote-size); +} +.footnote-ref { + vertical-align: super; +} +.footnote-backref { + display: inline-block; + margin-inline-start: var(--size-4-1); + color: var(--text-faint); + text-decoration: none; +} +@media (hover: hover) { + .footnote-backref:hover { + color: var(--text-accent); + text-decoration: none; + } +} +.cm-s-obsidian .cm-line.HyperMD-footnote { + font-size: var(--footnote-size); +} +.cm-s-obsidian .cm-line.HyperMD-footnote span.cm-hmd-footnote { + cursor: text; + display: inline-block; + font-size: var(--font-smallest); + position: relative; + top: -0.3em; + color: var(--text-muted); +} +.cm-s-obsidian .cm-line.HyperMD-footnote span.cm-hmd-footnote.cm-formatting { + color: var(--text-faint); +} +.cm-s-obsidian .cm-line.HyperMD-footnote span.cm-hmd-footnote:hover { + text-decoration: none; +} +.cm-s-obsidian .cm-line.HyperMD-footnote span.cm-hmd-footnote .cm-underline { + color: var(--text-muted); + text-decoration: none; +} +@media (hover: hover) { + .cm-s-obsidian .cm-line.HyperMD-footnote span.cm-hmd-footnote .cm-underline:hover { + cursor: text; + color: var(--text-muted); + text-decoration: none; + } +} +.cm-s-obsidian .cm-line.HyperMD-footnote .cm-hmd-footnote-url-title { + color: var(--text-muted); +} +.markdown-rendered .frontmatter.mod-failed { + position: relative; +} +.markdown-rendered .frontmatter.mod-failed .mod-error { + color: var(--text-error); + font-size: var(--font-smaller); +} +.markdown-rendered .frontmatter.mod-failed:after { + content: ''; + position: absolute; + top: 0; + inset-inline-end: 0; + width: 100%; + height: 100%; + background-color: var(--background-modifier-error); + opacity: 0.3; + mix-blend-mode: var(--highlight-mix-blend-mode); +} +.metadata-container { + --input-height: var(--metadata-input-height); + border-radius: var(--metadata-border-radius); + background-color: var(--metadata-background); + border-color: var(--metadata-border-color); + border-style: solid; + border-width: var(--metadata-border-width); + padding: var(--metadata-padding); + color: var(--text-muted); + position: relative; + max-width: var(--metadata-max-width); + margin-block-end: var(--p-spacing); +} +.markdown-source-view .metadata-container, +.markdown-preview-view .metadata-container { + transform: translateX(calc(var(--size-4-1) * -1 * var(--direction))); +} +.is-mobile .metadata-container { + transform: none; +} +.metadata-container .metadata-show-source-button, +.metadata-container .metadata-add-button { + padding-inline-start: var(--size-2-3); + margin-top: 0.5em; + font-size: var(--metadata-label-font-size); + font-family: var(--metadata-label-font); +} +.metadata-container.is-collapsed .metadata-property { + display: none; +} +.metadata-container:focus-within .metadata-property.is-selected { + color: var(--nav-item-color-selected); + background-color: var(--nav-item-background-selected); +} +.metadata-properties { + display: flex; + flex-direction: column; + gap: var(--metadata-gap); +} +.metadata-properties .metadata-input-longtext { + -webkit-box-orient: vertical; + -webkit-line-clamp: var(--metadata-input-longtext-lines); +} +.metadata-properties .metadata-input-longtext:not(:empty) { + display: -webkit-box; +} +.metadata-properties .metadata-input-longtext:focus { + -webkit-line-clamp: unset; +} +.metadata-properties-heading { + display: inline-block; + padding: var(--size-4-1); + margin-bottom: var(--size-4-2); + position: relative; + line-height: 1.2; +} +.is-mobile .metadata-properties-heading { + padding: var(--size-4-1) 0; +} +.metadata-properties-heading:before { + content: ''; + border-radius: var(--metadata-property-radius); + position: absolute; + display: inline-block; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +.metadata-properties-heading:focus:before { + box-shadow: 0 0 0 2px var(--background-modifier-border-focus); +} +.metadata-properties-heading .collapse-indicator { + position: absolute; + inset-inline-start: -22px; + padding: 0 6px; +} +.metadata-properties-title { + user-select: none; + font-size: max(var(--font-ui-small), 1em); + color: var(--text-normal); + font-weight: var(--font-medium); + font-family: var(--font-interface); +} +.metadata-error-container { + border-radius: var(--callout-radius); + padding: var(--size-4-1) var(--size-4-2); + background-color: rgba(var(--callout-error), 0.1); +} +.metadata-error-title { + color: var(--text-error); + font-size: max(var(--font-ui-small), 1em); + font-weight: var(--font-medium); +} +.metadata-error-cta { + cursor: var(--cursor); + color: var(--text-accent); + font-size: var(--font-ui-small); + font-weight: var(--font-medium); + margin-left: auto; +} +.metadata-error-cta.mobile-tap, +.metadata-error-cta:hover { + color: var(--text-accent-hover); +} +input[type=checkbox].metadata-input-checkbox { + margin: var(--input-padding); +} +.metadata-input-text { + background-color: transparent; + width: 100%; + min-height: var(--input-height); + border-width: 0px; + resize: none; + overflow-y: hidden; +} +.metadata-input-text::-webkit-date-and-time-value { + text-align: start; +} +.metadata-input-text.mod-date { + padding-inline-end: 0; + width: auto; +} +.is-mobile.is-ios .metadata-input-text.mod-datetime.is-empty::before, +.is-mobile.is-ios .metadata-input-text.mod-date.is-empty::before { + content: attr(placeholder); + color: var(--text-faint); +} +.metadata-property { + --input-border-width: 0; + --input-border-width-focus: 0; + --input-radius: 0; + position: relative; + display: flex; + align-items: start; + padding: var(--metadata-property-padding); + border-radius: var(--metadata-property-radius); + overflow: hidden; + background-color: var(--metadata-property-background); + box-shadow: var(--metadata-property-box-shadow); +} +@media (hover: hover) { + .metadata-property:hover { + --metadata-divider-color: var(--metadata-divider-color-hover); + background-color: var(--metadata-property-background-hover); + box-shadow: var(--metadata-property-box-shadow-hover); + border-radius: var(--metadata-property-radius-hover); + } +} +.metadata-property.has-focus, +.metadata-property:focus-within { + --metadata-divider-color: var(--metadata-divider-color-focus); + background-color: var(--metadata-property-background-hover); + box-shadow: var(--metadata-property-box-shadow-focus); + border-radius: var(--metadata-property-radius-focus); +} +.metadata-property-icon { + cursor: var(--cursor); + color: var(--icon-color); + display: flex; + align-items: center; + padding: var(--size-4-1) 0; + height: var(--input-height); + -webkit-user-select: none; +} +.metadata-property-icon:before { + content: "\200B"; + width: var(--size-4-1); +} +@media (hover: hover) { + .metadata-property-icon:hover .svg-icon { + color: var(--icon-color-focused); + } +} +.metadata-property-icon[aria-disabled='true'] { + color: var(--text-muted); + opacity: 0.4; +} +.metadata-input-number { + background-color: transparent; + width: 100%; + border-width: 0px; +} +.metadata-property-key { + display: flex; + align-self: stretch; + align-items: flex-start; + flex-direction: row; + flex-shrink: 0; + font-family: var(--metadata-label-font); + border-bottom: var(--metadata-divider-width) solid var(--metadata-divider-color); + background-color: var(--metadata-label-background); + width: var(--metadata-label-width); + min-width: var(--metadata-label-width); +} +@media (hover: hover) { + .metadata-property-key:hover { + background-color: var(--metadata-label-background-hover); + } +} +.metadata-property-key:focus-within { + background-color: var(--metadata-label-background-active); +} +input.metadata-property-key-input { + border: none; + flex-grow: 1; + color: var(--metadata-label-text-color); + font-size: var(--metadata-label-font-size); + font-weight: var(--metadata-label-font-weight); + height: var(--input-height); + background-color: transparent; + display: flex; + align-items: center; + text-overflow: ellipsis; + overflow: hidden; + width: 100%; + text-align: left; +} +@media (hover: hover) { + input.metadata-property-key-input:hover { + background-color: transparent; + } +} +input.metadata-property-key-input:active, +input.metadata-property-key-input:focus { + background-color: transparent; +} +.metadata-property-warning-icon { + --icon-size: var(--icon-s); + position: absolute; + inset-inline-end: var(--size-2-1); + top: var(--size-2-1); + bottom: var(--size-2-1); + align-items: center; + display: flex; + color: var(--text-warning); +} +@media (hover: hover) { + .metadata-property-warning-icon:hover { + color: var(--text-warning); + background-color: rgba(var(--color-orange-rgb), 0.15); + } +} +.metadata-property[data-property-key="tags"] .multi-select-pill { + --pill-color: var(--tag-color); + --pill-color-hover: var(--tag-color-hover); + --pill-color-remove: var(--tag-color); + --pill-color-remove-hover: var(--tag-color-hover); + --pill-decoration: var(--tag-decoration); + --pill-decoration-hover: var(--tag-decoration-hover); + --pill-background: var(--tag-background); + --pill-background-hover: var(--tag-background-hover); + --pill-border-color: var(--tag-border-color); + --pill-border-color-hover: var(--tag-border-color-hover); + --pill-border-width: var(--tag-border-width); + --pill-padding-x: var(--tag-padding-x); + --pill-padding-y: var(--tag-padding-y); + --pill-radius: var(--tag-radius); + --pill-weight: var(--tag-weight); + --pill-focus-width: 100%; + --pill-focus-left-adjust: 0; + cursor: var(--cursor-link); + line-height: 1; +} +.metadata-property-value { + display: flex; + flex: 1 1 auto; + gap: var(--size-2-2); + align-items: center; + align-self: stretch; + overflow: hidden; + font-family: var(--metadata-input-font); + min-height: var(--input-height); + background-color: var(--metadata-input-background); + border-bottom: var(--metadata-divider-width) solid var(--metadata-divider-color); +} +.metadata-property-value .metadata-input-text, +.metadata-property-value .metadata-input-number, +.metadata-property-value .multi-select-container { + background-color: transparent; +} +.metadata-property-value .metadata-input-text:hover, +.metadata-property-value .metadata-input-number:hover, +.metadata-property-value .multi-select-container:hover { + background-color: transparent; +} +.metadata-property-value .metadata-input-text:active, +.metadata-property-value .metadata-input-number:active, +.metadata-property-value .multi-select-container:active, +.metadata-property-value .metadata-input-text:focus, +.metadata-property-value .metadata-input-number:focus, +.metadata-property-value .multi-select-container:focus, +.metadata-property-value .metadata-input-text:focus-within, +.metadata-property-value .metadata-input-number:focus-within, +.metadata-property-value .multi-select-container:focus-within { + background-color: transparent; +} +.metadata-property-value .multi-select-pill { + --pill-border-width: 0; + --pill-padding-x: 0; + --pill-padding-y: 0; + --pill-color: var(--metadata-input-text-color); + line-height: var(--line-height-tight); +} +.metadata-property-value .metadata-input-text { + text-overflow: ellipsis; + overflow: hidden; +} +.metadata-property-value.mod-external-link:not(:placeholder-shown) { + text-decoration-line: var(--link-decoration); + text-decoration-thickness: var(--link-decoration-thickness); + text-decoration-color: var(--text-faint); +} +@media (hover: hover) { + .metadata-property-value.mod-external-link:not(:placeholder-shown) .metadata-link-inner:hover { + text-decoration-line: var(--link-decoration-hover); + } +} +.metadata-property-value .mod-unknown { + color: var(--text-warning); + padding: var(--input-padding); + font-size: var(--metadata-input-font-size); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +.metadata-property-value .multi-select-input { + font-size: inherit; +} +.metadata-property-value .multi-select-container, +.metadata-property-value .metadata-link-inner, +.metadata-property-value input { + font-size: var(--metadata-input-font-size); +} +.metadata-property-value .multi-select-container { + --background-modifier-form-field: transparent; + --background-modifier-border: transparent; + align-items: center; +} +.metadata-property-value .multi-select-container input { + background-color: transparent; +} +.metadata-property-value .multi-select-container .multi-select-pill.is-invalid { + --pill-background: transparent; + --pill-color: var(--text-error); + --pill-color-remove: var(--text-error); + text-decoration-line: line-through; +} +.metadata-property-value .external-link.multi-select-pill-content, +.metadata-property-value .internal-link .multi-select-pill-content { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.metadata-property-value .clickable-icon { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + margin-inline-end: 2px; + margin-inline-start: -4px; + padding: 4px; +} +.metadata-property-value .clickable-icon:hover { + background: transparent; + color: var(--text-normal); + cursor: var(--cursor-link); +} +@media (hover: hover) { + .metadata-property-value:hover { + background-color: var(--metadata-input-background-hover); + } +} +.metadata-property-value:focus-within { + background-color: var(--metadata-input-background-active); +} +/* Edit mode */ +.cm-hmd-frontmatter { + font-size: var(--font-smaller); + color: var(--text-muted); +} +.cm-hmd-frontmatter.cm-hmd-frontmatter.cm-def { + color: var(--text-muted); +} +.cm-hmd-frontmatter .is-invalid { + color: var(--text-error); +} +.cm-hmd-frontmatter .error-marker { + background-color: var(--text-error); + color: var(--text-on-accent); +} +.metadata-input-longtext { + flex-grow: 1; + cursor: text; + white-space: pre-wrap; + color: var(--metadata-input-text-color); + font-size: var(--metadata-input-font-size); + max-height: 300px; + padding: var(--input-padding); +} +.metadata-input-longtext:focus { + overflow-y: auto; +} +.metadata-input-longtext:empty:before { + content: attr(placeholder); + color: var(--input-placeholder-color); +} +.metadata-link { + cursor: text; + align-items: center; + padding: var(--input-padding); + display: flex; + flex: 1 1 auto; + gap: var(--size-4-2); +} +@media (hover: hover) { + .metadata-link:hover .metadata-link-flair { + opacity: var(--icon-opacity); + transition: 0.1s opacity 0.25s ease-in-out; + } +} +.metadata-link-inner { + cursor: var(--cursor-link); + color: var(--link-color); + text-decoration-line: var(--link-decoration); + text-decoration-thickness: var(--link-decoration-thickness); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +@media (hover: hover) { + .metadata-link-inner:hover { + text-decoration-line: var(--link-decoration-hover); + color: var(--link-color-hover); + } + .metadata-link-inner:hover ~ .metadata-link-flair { + opacity: 0; + } +} +.metadata-link-flair { + --icon-size: var(--icon-xs); + background-color: transparent; + cursor: text; + margin-inline-start: auto; + display: flex; + align-items: center; + justify-content: center; + padding: var(--size-2-1); + border-radius: var(--clickable-icon-radius); + color: var(--icon-color); + opacity: 0; + transition: opacity var(--anim-duration-fast) ease-in-out; + height: auto; +} +.markdown-source-view .metadata-container, +.markdown-preview-view .metadata-container:not(.mod-error) { + display: none; +} +.markdown-source-view.is-live-preview.show-properties .metadata-container:not(.mod-error) { + display: var(--metadata-display-editing); +} +.markdown-preview-view.show-properties .metadata-container { + display: var(--metadata-display-reading); +} +.markdown-source-view.is-live-preview.show-properties .metadata-container[data-property-count="0"]:not(.mod-error), +.markdown-preview-view.show-properties .metadata-container[data-property-count="0"]:not(.mod-error) { + display: none; +} +.inline-embed .markdown-source-view.is-live-preview.show-properties .metadata-container:not(.mod-error), +.inline-embed .markdown-preview-view.show-properties .metadata-container:not(.mod-error) { + display: none; +} +.markdown-rendered li h1, +.markdown-rendered li h2, +.markdown-rendered li h3, +.markdown-rendered li h4, +.markdown-rendered li h5 { + margin-top: 0; + margin-bottom: 0; +} +.markdown-rendered :is(p,pre,table,ul,ol) + :is(h1,h2,h3,h4,h5,h6), +.markdown-rendered div:is(.el-p,.el-pre,.el-table,.el-ul,.el-ol) + div > :is(h1,h2,h3,h4,h5,h6) { + margin-top: var(--heading-spacing); +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin-block-start: var(--p-spacing); + margin-block-end: var(--p-spacing); +} +h1, +.markdown-rendered h1 { + --font-weight: var(--h1-weight); + font-variant: var(--h1-variant); + letter-spacing: -0.015em; + line-height: var(--h1-line-height); + font-size: var(--h1-size); + color: var(--h1-color); + font-weight: var(--font-weight); + font-style: var(--h1-style); + font-family: var(--h1-font); +} +h1 a, +.markdown-rendered h1 a { + --link-weight: var(--h1-weight); +} +h2, +.markdown-rendered h2 { + --font-weight: var(--h2-weight); + font-variant: var(--h2-variant); + letter-spacing: -0.015em; + line-height: var(--h2-line-height); + font-size: var(--h2-size); + color: var(--h2-color); + font-weight: var(--font-weight); + font-style: var(--h2-style); + font-family: var(--h2-font); +} +h2 a, +.markdown-rendered h2 a { + --link-weight: var(--h2-weight); +} +h3, +.markdown-rendered h3 { + --font-weight: var(--h3-weight); + font-variant: var(--h3-variant); + letter-spacing: -0.015em; + line-height: var(--h3-line-height); + font-size: var(--h3-size); + color: var(--h3-color); + font-weight: var(--font-weight); + font-style: var(--h3-style); + font-family: var(--h3-font); +} +h3 a, +.markdown-rendered h3 a { + --link-weight: var(--h3-weight); +} +h4, +.markdown-rendered h4 { + --font-weight: var(--h4-weight); + font-variant: var(--h4-variant); + letter-spacing: 0.015em; + line-height: var(--h4-line-height); + font-size: var(--h4-size); + color: var(--h4-color); + font-weight: var(--font-weight); + font-style: var(--h4-style); + font-family: var(--h4-font); +} +h4 a, +.markdown-rendered h4 a { + --link-weight: var(--h4-weight); +} +h5, +.markdown-rendered h5 { + --font-weight: var(--h5-weight); + font-variant: var(--h5-variant); + letter-spacing: 0.015em; + font-size: var(--h5-size); + line-height: var(--h5-line-height); + color: var(--h5-color); + font-weight: var(--font-weight); + font-style: var(--h5-style); + font-family: var(--h5-font); +} +h5 a, +.markdown-rendered h5 a { + --link-weight: var(--h5-weight); +} +h6, +.markdown-rendered h6 { + --font-weight: var(--h6-weight); + font-variant: var(--h6-variant); + letter-spacing: 0.015em; + font-size: var(--h6-size); + line-height: var(--h6-line-height); + color: var(--h6-color); + font-weight: var(--font-weight); + font-style: var(--h6-style); + font-family: var(--h6-font); +} +h6 a, +.markdown-rendered h6 a { + --link-weight: var(--h6-weight); +} +.cm-formatting-header { + color: var(--text-faint); +} +.cm-s-obsidian .cm-line.HyperMD-header { + padding-top: var(--p-spacing); +} +.cm-s-obsidian .cm-line.HyperMD-header + .cm-line:not(.HyperMD-header):not(:has(>br:only-child)) { + padding-top: var(--p-spacing-empty); +} +.cm-s-obsidian .cm-line.HyperMD-header + .cm-line:not(.HyperMD-header):has(>br:only-child) + .cm-line.HyperMD-header { + padding-top: 0; +} +.HyperMD-header-1, +.inline-title h1, +.HyperMD-list-line .cm-header-1 { + --font-weight: var(--h1-weight); + font-variant: var(--h1-variant); + letter-spacing: -0.015em; + line-height: var(--h1-line-height); + font-size: var(--h1-size); + color: var(--h1-color); + font-weight: var(--font-weight); + font-style: var(--h1-style); + font-family: var(--h1-font); +} +.HyperMD-header-1 a, +.inline-title h1 a, +.HyperMD-list-line .cm-header-1 a, +.HyperMD-header-1 .cm-hmd-internal-link, +.inline-title h1 .cm-hmd-internal-link, +.HyperMD-list-line .cm-header-1 .cm-hmd-internal-link { + --link-weight: var(--h1-weight); +} +.HyperMD-header-2, +.inline-title h2, +.HyperMD-list-line .cm-header-2 { + --font-weight: var(--h2-weight); + font-variant: var(--h2-variant); + letter-spacing: -0.015em; + line-height: var(--h2-line-height); + font-size: var(--h2-size); + color: var(--h2-color); + font-weight: var(--font-weight); + font-style: var(--h2-style); + font-family: var(--h2-font); +} +.HyperMD-header-2 a, +.inline-title h2 a, +.HyperMD-list-line .cm-header-2 a, +.HyperMD-header-2 .cm-hmd-internal-link, +.inline-title h2 .cm-hmd-internal-link, +.HyperMD-list-line .cm-header-2 .cm-hmd-internal-link { + --link-weight: var(--h2-weight); +} +.HyperMD-header-3, +.inline-title h3, +.HyperMD-list-line .cm-header-3 { + --font-weight: var(--h3-weight); + font-variant: var(--h3-variant); + letter-spacing: -0.015em; + line-height: var(--h3-line-height); + font-size: var(--h3-size); + color: var(--h3-color); + font-weight: var(--font-weight); + font-style: var(--h3-style); + font-family: var(--h3-font); +} +.HyperMD-header-3 a, +.inline-title h3 a, +.HyperMD-list-line .cm-header-3 a, +.HyperMD-header-3 .cm-hmd-internal-link, +.inline-title h3 .cm-hmd-internal-link, +.HyperMD-list-line .cm-header-3 .cm-hmd-internal-link { + --link-weight: var(--h3-weight); +} +.HyperMD-header-4, +.inline-title h4, +.HyperMD-list-line .cm-header-4 { + --font-weight: var(--h4-weight); + font-variant: var(--h4-variant); + line-height: var(--h4-line-height); + font-size: var(--h4-size); + color: var(--h4-color); + font-weight: var(--font-weight); + font-style: var(--h4-style); + font-family: var(--h4-font); +} +.HyperMD-header-4 a, +.inline-title h4 a, +.HyperMD-list-line .cm-header-4 a, +.HyperMD-header-4 .cm-hmd-internal-link, +.inline-title h4 .cm-hmd-internal-link, +.HyperMD-list-line .cm-header-4 .cm-hmd-internal-link { + --link-weight: var(--h4-weight); +} +.HyperMD-header-5, +.inline-title h5, +.HyperMD-list-line .cm-header-5 { + --font-weight: var(--h5-weight); + font-variant: var(--h5-variant); + font-size: var(--h5-size); + line-height: var(--h5-line-height); + color: var(--h5-color); + font-weight: var(--font-weight); + font-style: var(--h5-style); + font-family: var(--h5-font); +} +.HyperMD-header-5 a, +.inline-title h5 a, +.HyperMD-list-line .cm-header-5 a, +.HyperMD-header-5 .cm-hmd-internal-link, +.inline-title h5 .cm-hmd-internal-link, +.HyperMD-list-line .cm-header-5 .cm-hmd-internal-link { + --link-weight: var(--h5-weight); +} +.HyperMD-header-6, +.inline-title h6, +.HyperMD-list-line .cm-header-6 { + --font-weight: var(--h6-weight); + font-variant: var(--h6-variant); + letter-spacing: 0.015em; + font-size: var(--h6-size); + line-height: var(--h6-line-height); + color: var(--h6-color); + font-weight: var(--font-weight); + font-style: var(--h6-style); + font-family: var(--h6-font); +} +.HyperMD-header-6 a, +.inline-title h6 a, +.HyperMD-list-line .cm-header-6 a, +.HyperMD-header-6 .cm-hmd-internal-link, +.inline-title h6 .cm-hmd-internal-link, +.HyperMD-list-line .cm-header-6 .cm-hmd-internal-link { + --link-weight: var(--h6-weight); +} +.HyperMD-header .cm-header-1, +.HyperMD-header .cm-header-2, +.HyperMD-header .cm-header-3, +.HyperMD-header .cm-header-4, +.HyperMD-header .cm-header-5, +.HyperMD-header .cm-header-6 { + font-size: inherit !important; +} +hr { + border: none; + border-top: var(--hr-thickness) solid; + border-color: var(--hr-color); + margin: 2rem 0; +} +.markdown-rendered hr { + border: none; + border-top: var(--hr-thickness) solid; + border-color: var(--hr-color); +} +.cm-s-obsidian .hmd-inactive-line.HyperMD-hr { + color: transparent; + background-color: transparent; +} +.markdown-source-view.mod-cm6 .hr { + display: flex; + align-items: center; +} +.markdown-source-view.mod-cm6 hr { + margin: 0; + flex: 1 0 0; +} +.cm-s-obsidian .hmd-fold-html-stub, +.cm-s-obsidian .hmd-fold-code-stub { + display: inline-block; + font-size: 67%; + color: #999; + vertical-align: middle; + border: 1px solid #999; + padding: 0 0.2em; + border-radius: 5px; + margin: 0 0.5em; + background-color: var(--background-primary-alt); + cursor: var(--cursor); +} +.cm-s-obsidian .hmd-fold-html-stub.omittable, +.cm-s-obsidian .omittable.hmd-fold-code-stub { + display: none; +} +.cm-s-obsidian .hmd-fold-html-stub:hover, +.cm-s-obsidian .hmd-fold-code-stub:hover, +.cm-s-obsidian .hmd-fold-html-stub.highlight, +.cm-s-obsidian .highlight.hmd-fold-code-stub { + color: #FFF; + border-color: #C30; + background: #F40; +} +.cm-s-obsidian .hmd-fold-html { + position: relative; + border: 1px solid #FFF; +} +@media (hover: hover) { + .cm-s-obsidian .hmd-fold-html:hover { + border: 1px dashed #999; + } +} +.cm-s-obsidian .hmd-fold-html:hover .hmd-fold-html-stub.omittable, +.cm-s-obsidian .hmd-fold-html:hover .omittable.hmd-fold-code-stub { + display: block; + right: 0; + bottom: 100%; + margin: 0; + position: absolute; + z-index: 100; +} +.markdown-preview-view img, +.markdown-rendered img { + -webkit-touch-callout: default; + image-rendering: -webkit-optimize-contrast; +} +.markdown-preview-view img:not([width]), +.markdown-rendered img:not([width]) { + max-width: 100%; + outline: none; +} +.cm-s-obsidian .hmd-fold-html a > img { + border: 0; +} +.cm-s-obsidian img.hmd-image { + vertical-align: middle; + width: auto; + max-width: 100%; + height: auto; +} +.cm-s-obsidian img.hmd-image.hmd-image-loading, +.cm-s-obsidian img.hmd-image.hmd-image-error { + min-width: 24px; + min-height: 24px; +} +.markdown-source-view.mod-cm6 .cm-line .internal-embed.image-embed { + display: inline; +} +.internal-query { + margin: 0; + border-top: 1px solid var(--background-modifier-border); +} +.internal-query .search-result-container { + padding: var(--size-4-2); + max-height: 800px; + overflow: auto; + border: 1px solid var(--background-modifier-border); + background-color: var(--background-secondary); + border-radius: var(--radius-m); +} +.internal-query .internal-query-header { + text-align: center; + padding-inline: var(--size-4-3) 0 var(--size-4-3) var(--size-4-1); + color: var(--text-normal); + display: flex; + justify-content: flex-start; + align-items: center; +} +.internal-query .internal-query-header-icon { + color: var(--text-faint); + margin-inline-end: var(--size-4-1); + display: flex; +} +.internal-query .internal-query-header-title { + font-weight: var(--font-medium); +} +.internal-query .internal-query-header-title:before, +.internal-query .internal-query-header-title:after { + content: '"'; +} +/* Default markers */ +ul ul, +ol ul, +ol ol ul, +ol ul ul, +ul ol ul, +ul ul ul { + list-style-type: disc; +} +ol { + list-style-type: var(--list-numbered-style); +} +ul > li, +ol > li { + text-align: start; +} +ol > li::marker, +ul > li::marker { + color: var(--list-marker-color); +} +ol > li.is-collapsed::marker, +ul > li.is-collapsed::marker { + color: var(--list-marker-color-collapsed); +} +/* Indent depth + Consistency in horizontal positioning of lists +*/ +.markdown-rendered ul, +.markdown-rendered ol { + padding-inline-start: 0; + margin-block-start: var(--p-spacing); + margin-block-end: var(--p-spacing); + /* Space between list items */ +} +.markdown-rendered ul ul, +.markdown-rendered ol ul, +.markdown-rendered ul ol, +.markdown-rendered ol ol { + margin-block-start: 0; + margin-block-end: 0; +} +.markdown-rendered ul li p:first-of-type, +.markdown-rendered ol li p:first-of-type { + margin-block-start: 0; +} +.markdown-rendered ul li p:last-of-type, +.markdown-rendered ol li p:last-of-type { + margin-block-end: 0; +} +.markdown-rendered ul > li, +.markdown-rendered ol > li { + padding-top: var(--list-spacing); + padding-bottom: var(--list-spacing); + position: relative; +} +.markdown-rendered ul > li { + margin-inline-start: 3ch; +} +.markdown-rendered ol > li { + margin-inline-start: 3ch; +} +.markdown-rendered ol ol > li, +.markdown-rendered ul ul > li { + margin-inline-start: var(--list-indent); +} +.markdown-source-view { + --list-padding-inline-start: var(--list-indent-source); + --list-marker-space: 0; +} +.markdown-source-view.is-live-preview { + --list-padding-inline-start: var(--list-indent-editing); + --list-marker-space: 0.25em; +} +.cm-formatting-list-ul, +.cm-formatting-list-ol { + font-variant-numeric: tabular-nums; + padding-inline-start: var(--list-padding-inline-start); +} +.markdown-source-view.mod-cm6 .HyperMD-list-line-nobullet .cm-indent { + min-width: var(--list-indent); +} +.cm-s-obsidian .cm-formatting-list { + color: var(--list-marker-color); +} +.cm-s-obsidian .is-collapsed ~ .cm-formatting-list { + color: var(--list-marker-color-collapsed); +} +/* Indent depth + Consistency in horizontal positioning of lists +*/ +.cm-line.HyperMD-list-line { + tab-size: var(--list-indent); +} +/* Space between list items */ +.markdown-source-view ol > li, +.markdown-source-view ul > li, +.markdown-preview-view ol > li, +.markdown-preview-view ul > li, +.mod-cm6 .HyperMD-list-line.cm-line { + padding-top: var(--list-spacing); + padding-bottom: var(--list-spacing); +} +/* Allow clicking on the bullet to collapse */ +/* #todo move this into folding.less */ +.markdown-rendered .list-collapse-indicator { + margin-inline-start: -2.65em; + padding-inline-end: 2em; +} +.markdown-rendered .list-bullet { + float: left; + float: inline-start; + margin-inline-start: -0.8em; +} +.markdown-rendered .task-list-item > .list-bullet { + display: none; +} +/* Remove default bullets so we can replace them */ +.markdown-rendered ul.has-list-bullet { + list-style-type: '\200B'; +} +.markdown-rendered ul.has-list-bullet > li::marker { + color: transparent; +} +.list-bullet { + /* hide bullet when editing the marker */ + color: transparent; + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; +} +.list-bullet:before { + content: '\200B'; +} +.list-bullet:after { + position: absolute; + content: '\200B'; + pointer-events: none; + color: var(--list-marker-color); + border-radius: var(--list-bullet-radius); + width: var(--list-bullet-size); + height: var(--list-bullet-size); + border: var(--list-bullet-border); + transform: var(--list-bullet-transform); + background-color: var(--list-marker-color); + transition: transform 0.15s, box-shadow 0.15s; +} +.list-bullet::selection { + background-color: transparent !important; +} +li.is-collapsed .list-bullet:after, +.is-collapsed ~ .cm-formatting-list .list-bullet:after { + background-color: var(--list-marker-color-collapsed); + box-shadow: 0 0 0 4px var(--background-modifier-active-hover); +} +/* Allow clicking on the bullet to collapse */ +/* #todo move this into folding.less */ +.markdown-source-view.mod-cm6.is-live-preview { + /* only allow this if line is not active, so that it's still editable */ +} +.markdown-source-view.mod-cm6.is-live-preview .cm-line.HyperMD-list-line .cm-fold-indicator .collapse-indicator { + padding-inline-end: 0; +} +.markdown-source-view.mod-cm6.is-live-preview .cm-line.HyperMD-list-line:not(.cm-active):not(.HyperMD-task-line) .cm-fold-indicator .collapse-indicator { + padding-inline-end: var(--list-bullet-end-padding); + inset-inline-end: calc(var(--list-bullet-end-padding) * -1); +} +@media (hover: hover) { + .list-collapse-indicator:hover ~ .list-bullet:after, + .cm-fold-indicator:hover ~ .list-bullet:after, + .list-collapse-indicator:hover ~ .cm-formatting-list .list-bullet:after, + .cm-fold-indicator:hover ~ .cm-formatting-list .list-bullet:after { + background-color: var(--list-marker-color-hover); + box-shadow: 0 0 0 4px var(--background-modifier-hover); + } + li.is-collapsed .list-collapse-indicator:hover ~ .list-bullet:after, + li.is-collapsed .cm-fold-indicator:hover ~ .list-bullet:after, + .list-collapse-indicator:hover.is-collapsed ~ .list-bullet:after, + .cm-fold-indicator:hover.is-collapsed ~ .list-bullet:after, + li.is-collapsed .list-collapse-indicator:hover ~ .cm-formatting-list .list-bullet:after, + li.is-collapsed .cm-fold-indicator:hover ~ .cm-formatting-list .list-bullet:after, + .list-collapse-indicator:hover.is-collapsed ~ .cm-formatting-list .list-bullet:after, + .cm-fold-indicator:hover.is-collapsed ~ .cm-formatting-list .list-bullet:after { + background-color: var(--list-marker-color-collapsed); + box-shadow: 0 0 0 4px var(--background-modifier-active-hover); + } +} +.cm-s-obsidian .HyperMD-list-line.HyperMD-list-line-nobullet { + padding-top: initial; +} +.cm-s-obsidian .HyperMD-list-line.HyperMD-list-line-nobullet > .cm-hmd-list-indent > .cm-indent-spacing:last-child { + padding-inline-start: calc(var(--list-indent-editing) + var(--list-marker-space)); +} +.markdown-source-view.mod-cm6 .cm-hmd-list-indent { + display: inline-block; + white-space: pre; +} +.markdown-source-view.mod-cm6 .cm-formatting-list-ul, +.markdown-source-view.mod-cm6 .cm-formatting-list-ol { + white-space: pre; +} +a { + --font-weight: var(--link-weight); + color: var(--link-color); + font-weight: var(--link-weight); + outline: none; + text-decoration-line: var(--link-decoration); + text-decoration-thickness: var(--link-decoration-thickness); + cursor: var(--cursor-link); + transition: opacity var(--anim-duration-fast) ease-in-out; +} +@media (hover: hover) { + a:hover { + color: var(--link-color-hover); + text-decoration-line: var(--link-decoration-hover); + } +} +a.mobile-tap { + opacity: 0.5; +} +.external-link { + color: var(--link-external-color); + text-decoration-line: var(--link-external-decoration); + background-position: center right; + background-repeat: no-repeat; + background-image: linear-gradient(transparent, transparent), url(public/images/6155340132a851f6089e.svg); + background-size: 0.825em; + padding-inline-end: 0.9em; + background-position-y: 0.25em; + cursor: var(--cursor-link); + filter: var(--link-external-filter); + transition: opacity var(--anim-duration-fast) ease-in-out; +} +@media (hover: hover) { + .external-link:hover { + color: var(--link-external-color-hover); + text-decoration-line: var(--link-external-decoration-hover); + } +} +.external-link.mobile-tap { + opacity: 0.5; +} +@supports selector(:dir(rtl)) { + :dir(rtl) .external-link { + background-position: center left; + background-image: linear-gradient(transparent, transparent), url(public/images/2308ab1944a6bfa5c5b8.svg); + background-repeat: no-repeat; + } +} +.metadata-property-value .internal-link, +.markdown-rendered .internal-link { + cursor: var(--cursor-link); + text-decoration-line: var(--link-decoration); + color: var(--link-color); + transition: opacity var(--anim-duration-fast) ease-in-out; +} +@media (hover: hover) { + .metadata-property-value .internal-link:hover, + .markdown-rendered .internal-link:hover { + color: var(--link-color-hover); + text-decoration-line: var(--link-decoration-hover); + } +} +.metadata-property-value .internal-link.mobile-tap, +.markdown-rendered .internal-link.mobile-tap { + opacity: 0.5; +} +.metadata-property-value .internal-link.is-unresolved, +.markdown-rendered .internal-link.is-unresolved { + color: var(--link-unresolved-color); + opacity: var(--link-unresolved-opacity); + filter: var(--link-unresolved-filter); + text-decoration-style: var(--link-unresolved-decoration-style); + text-decoration-color: var(--link-unresolved-decoration-color); +} +@media (hover: hover) { + .metadata-property-value .internal-link.is-unresolved:hover, + .markdown-rendered .internal-link.is-unresolved:hover { + opacity: 1; + color: var(--link-color-hover); + text-decoration-color: var(--link-color-hover); + text-decoration-line: var(--link-decoration-hover); + } +} +.cm-s-obsidian span.cm-hmd-internal-link { + --font-weight: var(--link-weight); + color: var(--link-color); + font-weight: var(--link-weight); +} +@media (hover: hover) { + .cm-s-obsidian span.cm-hmd-internal-link:hover { + text-decoration-line: var(--link-decoration-hover); + color: var(--link-color-hover); + } +} +.cm-s-obsidian span.cm-link { + color: var(--link-external-color); + word-break: break-word; +} +.cm-s-obsidian span.cm-link a { + color: var(--link-external-color); +} +@media (hover: hover) { + .cm-s-obsidian span.cm-link:hover { + color: var(--link-external-color-hover); + text-decoration-line: var(--link-external-decoration-hover); + } +} +.cm-s-obsidian span.cm-formatting-link.cm-url, +.cm-s-obsidian span.cm-url { + color: var(--link-external-color); + font-weight: var(--link-weight); + text-decoration-line: var(--link-external-decoration); + filter: var(--link-external-filter); + word-break: break-all; +} +@media (hover: hover) { + .cm-s-obsidian span.cm-formatting-link.cm-url:hover, + .cm-s-obsidian span.cm-url:hover { + color: var(--link-external-color-hover); + text-decoration-line: var(--link-external-decoration-hover); + } +} +.cm-s-obsidian span.cm-footref.cm-inline-footnote.cm-formatting-inline-footnote, +.cm-s-obsidian span.cm-footref.cm-hmd-barelink.cm-formatting, +.cm-s-obsidian span.cm-formatting-image, +.cm-s-obsidian span.cm-formatting-link-string, +.cm-s-obsidian span.cm-formatting-link { + color: var(--text-faint); +} +.cm-s-obsidian span.hmd-link-icon { + width: 20px; + height: 16px; + display: inline-block; + vertical-align: middle; + opacity: 0.4; +} +@media (hover: hover) { + .cm-s-obsidian span.hmd-link-icon:hover { + opacity: 1; + } +} +.cm-s-obsidian span.hmd-link-icon:after { + content: ""; +} +.markdown-source-view.mod-cm6 .is-unresolved { + color: var(--link-unresolved-color); + opacity: var(--link-unresolved-opacity); + filter: var(--link-unresolved-filter); +} +@media (hover: hover) { + .markdown-source-view.mod-cm6 .is-unresolved:hover { + opacity: 1; + color: var(--link-color-hover); + text-decoration-color: var(--link-color-hover); + } +} +.markdown-source-view.mod-cm6 .is-unresolved .cm-underline { + text-decoration-line: var(--link-decoration); + text-decoration-style: var(--link-unresolved-decoration-style); + text-decoration-color: var(--link-unresolved-decoration-color); + color: var(--link-unresolved-color); +} +.markdown-source-view.mod-cm6 .cm-underline { + text-decoration-line: var(--link-decoration); + text-decoration-thickness: var(--link-decoration-thickness); +} +body.is-mobile .markdown-source-view.mod-cm6 .cm-underline { + -webkit-user-select: text; +} +.markdown-source-view.mod-cm6.is-live-preview .cm-hashtag.cm-meta, +.markdown-source-view.mod-cm6 .cm-hmd-internal-link .cm-underline, +.markdown-source-view.mod-cm6 .cm-link .cm-underline, +.markdown-source-view.mod-cm6 .cm-url .cm-underline { + cursor: var(--cursor-link); +} +@media (hover: hover) { + .markdown-source-view.mod-cm6 .cm-hmd-internal-link .cm-underline:hover { + text-decoration-line: var(--link-decoration-hover); + } +} +.markdown-source-view.mod-cm6 .cm-link .cm-underline, +.markdown-source-view.mod-cm6 .cm-url .cm-underline { + color: var(--link-external-color); + text-decoration-line: var(--link-external-decoration); +} +@media (hover: hover) { + .markdown-source-view.mod-cm6 .cm-link .cm-underline:hover, + .markdown-source-view.mod-cm6 .cm-url .cm-underline:hover { + color: var(--link-external-color-hover); + text-decoration-line: var(--link-external-decoration-hover); + } +} +.cm-s-obsidian.HyperMD-with-alt span.cm-url, +.cm-s-obsidian.HyperMD-with-alt span.cm-link, +.cm-s-obsidian.HyperMD-with-alt span.cm-hashtag, +.cm-s-obsidian.HyperMD-with-ctrl span.cm-url, +.cm-s-obsidian.HyperMD-with-ctrl span.cm-link, +.cm-s-obsidian.HyperMD-with-ctrl span.cm-hashtag { + cursor: var(--cursor-link); +} +.inline-block { + display: inline-block; + vertical-align: middle; +} +.hidden-token { + display: inline; + font-size: 1px !important; + letter-spacing: -1ch; + font-family: monospace; + color: transparent; +} +.cm-s-obsidian { + /* tooltip for addon/hover */ + /* gutter for addon/click */ + /* addon/fold */ + /* addon/fold-emoji */ +} +.cm-s-obsidian span.hmd-hidden-token.cm-formatting-em, +.cm-s-obsidian span.hmd-hidden-token.cm-formatting-strong, +.cm-s-obsidian span.hmd-hidden-token.cm-formatting-strikethrough, +.cm-s-obsidian span.hmd-hidden-token.cm-formatting-code, +.cm-s-obsidian span.hmd-hidden-token.cm-formatting-link { + display: inline; + font-size: 1px !important; + letter-spacing: -1ch; + font-family: monospace; + color: transparent; +} +.cm-s-obsidian div.HyperMD-hover > .HyperMD-hover-content { + background-color: #fff; + color: #000; + border: 1px solid #000; + padding: 0.5em; +} +.cm-s-obsidian div.HyperMD-hover > .HyperMD-hover-content p { + margin: 0.2em 0; +} +.cm-s-obsidian .HyperMD-goback { + width: 1px; +} +.cm-s-obsidian div.HyperMD-goback-button { + background-color: #ddd; + color: #333; + text-align: center; + cursor: var(--cursor); +} +.cm-s-obsidian .hmd-link-icon:after { + content: "🔗»"; + color: #009; + text-shadow: 0 0 2px #69F; +} +.cm-s-obsidian img.hmd-emoji { + height: 1.2em; + vertical-align: middle; +} +.cm-s-obsidian { + line-height: var(--line-height-normal); +} +.cm-s-obsidian .hmd-fold-html-stub, +.cm-s-obsidian .hmd-fold-code-stub, +.cm-s-obsidian .cm-inline-code, +.cm-s-obsidian .HyperMD-codeblock, +.cm-s-obsidian .HyperMD-hr, +.cm-s-obsidian .cm-hmd-frontmatter, +.cm-s-obsidian .cm-hmd-orgmode-markup, +.cm-s-obsidian .cm-formatting-code, +.cm-s-obsidian .cm-math, +.cm-s-obsidian span.hmd-fold-math-placeholder, +.cm-s-obsidian .hmd-fold-html kbd { + font-family: var(--font-monospace); +} +.cm-s-obsidian span.cm-hmd-toc { + font-size: 24pt; + color: #999; +} +.cm-s-obsidian .HyperMD-header-line { + color: var(--text-muted); +} +.cm-s-obsidian span.cm-hmd-escape-backslash { + color: var(--text-faint); +} +.cm-s-obsidian span.cm-footref, +.cm-s-obsidian span.cm-blockid { + position: relative; + font-size: var(--font-smallest); + vertical-align: text-top; + top: -0.2em; +} +.cm-s-obsidian span.cm-footref.cm-hmd-barelink, +.cm-s-obsidian span.cm-blockid { + color: var(--text-muted); +} +.cm-s-obsidian .hmd-file-uploading { + outline: 2px dashed #CCC; + outline-offset: -2px; + animation: hmd-file-uploading-ani 1.5s linear infinite; +} +.cm-s-obsidian .hmd-file-uploaded { + outline: 2px solid #6C3; + outline-offset: -2px; +} +.cm-s-obsidian .HyperMD-goback { + width: 1px; +} +.cm-s-obsidian div.HyperMD-goback-button { + padding-right: 15px; + border-radius: 0 10px 10px 0; + display: inline-block; + text-align: center; + background-color: #8daed9; + color: #f7f7f7; + cursor: var(--cursor); +} +.cm-s-obsidian .hmd-fold-code-image { + text-align: center; +} +.cm-s-obsidian .HyperMD-header, +.cm-s-obsidian .HyperMD-footnote, +.cm-s-obsidian .HyperMD-codeblock, +.cm-s-obsidian .HyperMD-hr { + clear: left; +} +.cm-s-obsidian .cm-s-obsidian span.hmd-hidden-token.cm-formatting-task { + color: transparent !important; +} +.cm-s-obsidian .hmd-inactive-line span.cm-hmd-escape-backslash, +.cm-s-obsidian .hmd-inactive-line span.cm-formatting-header { + font-size: 0 !important; + display: inline; +} +.cm-s-obsidian .hmd-inactive-line span.cm-hmd-list-indent { + border-right: 0; +} +@keyframes hmd-file-uploading-ani { + 0%, + 100% { + opacity: 0.4; + } + 50% { + opacity: 0.7; + } +} +@media (hover: hover) { + .cm-s-obsidian div.HyperMD-goback-button:hover { + color: transparent; + text-align: left; + } + .cm-s-obsidian div.HyperMD-goback-button:hover:before { + position: absolute; + padding-left: 5px; + content: "Back"; + color: #f7f7f7; + } +} +mjx-container { + outline: none; +} +.cm-s-obsidian { + /* addon/fold-math */ +} +.cm-s-obsidian .hmd-fold-math { + display: inline-block; + vertical-align: middle; +} +.cm-s-obsidian .hmd-fold-math.hmd-fold-math.math-2 { + width: 100%; +} +.cm-s-obsidian span.cm-math, +.cm-s-obsidian span.hmd-fold-math-placeholder { + font-size: var(--code-size); + font-style: italic; +} +.cm-s-obsidian span.cm-formatting-math { + color: var(--text-accent); + font-weight: inherit; +} +.cm-s-obsidian span.cm-math-2 { + font-size: 13.2pt; +} +.markdown-source-view.mod-cm6 .math-block > mjx-container { + margin: 0; + padding: 1em 0; + overflow-x: auto; +} +/* Tables */ +.markdown-rendered table { + margin-block-start: var(--p-spacing); + margin-block-end: var(--p-spacing); + word-break: normal; +} +.cm-html-embed table, +.markdown-rendered table { + border-collapse: collapse; + line-height: var(--table-line-height); +} +.cm-html-embed td, +.markdown-rendered td, +.cm-html-embed th, +.markdown-rendered th { + padding: var(--size-2-2) var(--size-4-2); + border: var(--table-border-width) solid var(--table-border-color); + max-width: var(--table-column-max-width); + min-width: var(--table-column-min-width); + vertical-align: var(--table-cell-vertical-alignment); +} +.cm-html-embed td, +.markdown-rendered td { + font-size: var(--table-text-size); + color: var(--table-text-color); +} +.cm-html-embed th, +.markdown-rendered th { + font-size: var(--table-header-size); + font-weight: var(--table-header-weight); + color: var(--table-header-color); + font-family: var(--table-header-font); + line-height: var(--line-height-tight); +} +.cm-html-embed th, +.markdown-rendered th, +.cm-html-embed td, +.markdown-rendered td { + text-align: start; +} +.cm-html-embed th[align="left"], +.markdown-rendered th[align="left"], +.cm-html-embed td[align="left"], +.markdown-rendered td[align="left"] { + text-align: start; +} +.cm-html-embed th[align="center"], +.markdown-rendered th[align="center"], +.cm-html-embed td[align="center"], +.markdown-rendered td[align="center"] { + text-align: center; +} +.cm-html-embed th[align="right"], +.markdown-rendered th[align="right"], +.cm-html-embed td[align="right"], +.markdown-rendered td[align="right"] { + text-align: end; +} +.cm-html-embed thead > tr > th, +.markdown-rendered thead > tr > th, +.cm-html-embed tbody > tr > td, +.markdown-rendered tbody > tr > td { + white-space: var(--table-white-space); + text-overflow: ellipsis; + overflow: hidden; +} +.cm-html-embed thead > tr > th > .markdown-embed, +.markdown-rendered thead > tr > th > .markdown-embed, +.cm-html-embed tbody > tr > td > .markdown-embed, +.markdown-rendered tbody > tr > td > .markdown-embed { + white-space: normal; +} +.cm-html-embed tbody tr, +.markdown-rendered tbody tr { + background-color: var(--table-background); +} +@media (hover: hover) { + .cm-html-embed tbody tr:hover, + .markdown-rendered tbody tr:hover { + background-color: var(--table-row-background-hover); + } +} +.cm-html-embed tbody tr:nth-child(odd), +.markdown-rendered tbody tr:nth-child(odd) { + background-color: var(--table-row-alt-background); +} +@media (hover: hover) { + .cm-html-embed tbody tr:nth-child(odd):hover, + .markdown-rendered tbody tr:nth-child(odd):hover { + background-color: var(--table-row-alt-background-hover); + } +} +.cm-html-embed tbody tr > td:nth-child(2n+2), +.markdown-rendered tbody tr > td:nth-child(2n+2) { + background-color: var(--table-column-alt-background); +} +.cm-html-embed tbody tr:last-child > td, +.markdown-rendered tbody tr:last-child > td { + border-bottom-width: var(--table-row-last-border-width); +} +.cm-html-embed tbody tr > td:first-child, +.markdown-rendered tbody tr > td:first-child { + border-left-width: var(--table-column-first-border-width); +} +.cm-html-embed tbody tr > td:last-child, +.markdown-rendered tbody tr > td:last-child { + border-right-width: var(--table-column-last-border-width); +} +.cm-html-embed thead tr, +.markdown-rendered thead tr { + background-color: var(--table-header-background); +} +@media (hover: hover) { + .cm-html-embed thead tr:hover, + .markdown-rendered thead tr:hover { + background-color: var(--table-header-background-hover); + } +} +.cm-html-embed thead tr > th, +.markdown-rendered thead tr > th { + border-top-width: var(--table-header-border-width); + border-color: var(--table-header-border-color); +} +.cm-html-embed thead tr > th:nth-child(2n+2), +.markdown-rendered thead tr > th:nth-child(2n+2) { + background-color: var(--table-column-alt-background); +} +.cm-html-embed thead tr > th:first-child, +.markdown-rendered thead tr > th:first-child { + border-left-width: var(--table-column-first-border-width); +} +.cm-html-embed thead tr > th:last-child, +.markdown-rendered thead tr > th:last-child { + border-right-width: var(--table-column-last-border-width); +} +.cm-s-obsidian .HyperMD-table-row { + white-space: pre; + word-break: normal; + overflow-wrap: normal; + font-size: var(--code-size); + font-family: var(--font-monospace); +} +.cm-s-obsidian .HyperMD-table-row span.cm-inline-code { + --code-size: 1em; +} +.cm-s-obsidian .HyperMD-table-rtl { + direction: rtl; +} +.cm-s-obsidian .hmd-table-column, +.cm-s-obsidian .hmd-table-column-content { + display: inline-block; +} +.cm-s-obsidian .hmd-table-column-left { + text-align: left; +} +.cm-s-obsidian .hmd-table-column-center { + text-align: center; +} +.cm-s-obsidian .hmd-table-column-right { + text-align: right; +} +.cm-s-obsidian .HyperMD-table-row span.cm-hmd-table-sep, +.cm-s-obsidian .HyperMD-table-row-1 { + color: var(--text-faint); +} +.cm-s-obsidian .HyperMD-table-row-0 { + color: var(--table-header-color); +} +.cm-s-obsidian .hmd-fold-html table { + border-collapse: collapse; +} +.cm-s-obsidian .hmd-fold-html table td, +.cm-s-obsidian .hmd-fold-html table th { + padding: 10px; + border: 1px solid #ccc; +} +.cm-s-obsidian .hmd-inactive-line.HyperMD-table-row-1 { + color: transparent; + text-shadow: none; +} +.cm-s-obsidian .hmd-inactive-line.HyperMD-table-row-1 > span { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAQAAAAziH6sAAAADklEQVR42mOc+Z9x5n8ACTkDM4ikM1IAAAAASUVORK5CYII=) repeat-x 0px center; +} +.cm-s-obsidian .hmd-inactive-line.HyperMD-table-row span.cm-hmd-table-sep { + color: transparent; +} +.markdown-source-view.mod-cm6 .cm-line.HyperMD-table-row { + min-width: max-content; +} +.markdown-source-view.mod-cm6 .cm-table-widget table { + margin-top: 0; + margin-bottom: 0; +} +.table-drag-target { + position: absolute; + z-index: 2; +} +.table-drag-target::after { + content: ""; + position: absolute; + inset: 0; + border-radius: 2px; + background-color: var(--interactive-accent); +} +.table-drag-target.mod-row::after { + inset-block: calc(-1 * var(--table-drop-indicator-half-width)); +} +.table-drag-target.mod-col::after { + inset-inline: calc(-1 * var(--table-drop-indicator-half-width)); +} +a.tag { + background-color: var(--tag-background); + border: var(--tag-border-width) solid var(--tag-border-color); + border-radius: var(--tag-radius); + color: var(--tag-color); + font-size: var(--tag-size); + font-weight: var(--tag-weight); + text-decoration: var(--tag-decoration); + padding: var(--tag-padding-y) var(--tag-padding-x); + line-height: 1; +} +@media (hover: hover) { + a.tag:hover { + background-color: var(--tag-background-hover); + border: var(--tag-border-width) solid var(--tag-border-color-hover); + color: var(--tag-color-hover); + text-decoration: var(--tag-decoration-hover); + } +} +a.tag { + background-color: var(--tag-background); + border: var(--tag-border-width) solid var(--tag-border-color); + border-radius: var(--tag-radius); + color: var(--tag-color); + font-size: var(--tag-size); + font-weight: var(--tag-weight); + text-decoration: var(--tag-decoration); + padding: var(--tag-padding-y) var(--tag-padding-x); + line-height: 1; +} +@media (hover: hover) { + a.tag:hover { + background-color: var(--tag-background-hover); + border: var(--tag-border-width) solid var(--tag-border-color-hover); + color: var(--tag-color-hover); + text-decoration: var(--tag-decoration-hover); + } +} +.cm-hashtag { + color: var(--tag-color); + background-color: var(--tag-background); + border: var(--tag-border-width) solid var(--tag-border-color); + font-size: var(--tag-size); + font-weight: var(--tag-weight); + vertical-align: baseline; + border-inline-start: none; + border-inline-end: none; + padding-top: var(--tag-padding-y); + padding-bottom: var(--tag-padding-y); +} +.cm-hashtag.cm-hashtag-begin { + border-start-start-radius: var(--tag-radius); + border-end-start-radius: var(--tag-radius); + border-inline-end: none; + border-inline-start: var(--tag-border-width) solid var(--tag-border-color); + padding-inline-start: var(--tag-padding-x); +} +.cm-hashtag.cm-hashtag-end { + border-start-end-radius: var(--tag-radius); + border-end-end-radius: var(--tag-radius); + border-inline-start: none; + border-inline-end: var(--tag-border-width) solid var(--tag-border-color); + padding-inline-end: var(--tag-padding-x); +} +.cm-s-obsidian span.cm-hashtag.cm-hmd-escape-backslash { + color: #FCC; +} +input[type=checkbox] { + -webkit-appearance: none; + appearance: none; + border-radius: var(--checkbox-radius); + border: 1px solid var(--checkbox-border-color); + flex-shrink: 0; + padding: 0; + margin: 0; + margin-inline-end: 6px; + width: var(--checkbox-size); + height: var(--checkbox-size); + position: relative; + transition: box-shadow 0.15s ease-in-out; +} +input[type=checkbox][disabled=true] { + pointer-events: none; +} +input[type=checkbox]:hover, +input[type=checkbox]:active, +input[type=checkbox]:focus { + outline: 0; + border-color: var(--checkbox-border-color-hover); +} +input[type=checkbox]:focus-visible { + box-shadow: 0 0 0 2px var(--background-modifier-border-focus); +} +input[type=checkbox]:checked:after { + content: ""; + top: -1px; + inset-inline-start: -1px; + position: absolute; + width: var(--checkbox-size); + height: var(--checkbox-size); + display: block; + background-color: var(--checkbox-marker-color); + -webkit-mask-position: 52% 52%; + -webkit-mask-size: 65%; + -webkit-mask-repeat: no-repeat; + -webkit-mask-image: url("data:image/svg+xml; utf8, "); +} +input[type=checkbox]:checked { + background-color: var(--checkbox-color); + border-color: var(--checkbox-color); +} +@media (hover: hover) { + input[type=checkbox]:checked:hover { + background-color: var(--checkbox-color-hover); + border-color: var(--checkbox-color-hover); + } +} +input[type=checkbox][data-indeterminate="true"]:not(:checked):after { + content: ""; + position: absolute; + top: calc(var(--checkbox-size) / 2 - 2px); + width: calc(var(--checkbox-size) - 6px); + left: 0; + right: 0; + margin: 0 auto; + height: 2px; + display: block; + border-radius: 2px; + background-color: var(--text-normal); +} +.task-list-item-checkbox { + width: var(--checkbox-size); + height: var(--checkbox-size); +} +.markdown-preview-view .task-list-item-checkbox { + position: relative; + top: 0.2em; + margin-inline-end: 0.6em; +} +ul > li.task-list-item { + list-style: none; +} +ul > li.task-list-item > p > .task-list-item-checkbox, +ul > li.task-list-item > .task-list-item-checkbox { + margin-inline-start: calc(var(--checkbox-size) * -1.5); +} +ul > li.task-list-item[data-task="x"], +ul > li.task-list-item[data-task="X"] { + text-decoration: var(--checklist-done-decoration); + color: var(--checklist-done-color); +} +.cm-s-obsidian span.cm-formatting-task { + white-space: pre; + height: 1em; + line-height: 1em; + min-width: 1em; + text-align: center; + color: var(--text-muted); + background-size: 1em; + font-family: var(--font-monospace); +} +.cm-s-obsidian span.hmd-hidden-token.cm-formatting-task { + color: transparent !important; +} +.markdown-source-view.mod-cm6 .task-list-label { + padding: 0; + margin-inline-start: -0.25em; +} +.markdown-source-view.mod-cm6 .task-list-label .task-list-item-checkbox { + top: -0.1em; + vertical-align: middle; + margin-inline-start: var(--checkbox-margin-inline-start); + margin-inline-end: 0.25em; +} +.markdown-source-view.mod-cm6 .cm-formatting-list-ol > .task-list-label .task-list-item-checkbox { + margin-inline-start: 2px; +} +.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"], +.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"] { + text-decoration: var(--checklist-done-decoration); + color: var(--checklist-done-color); +} +b, +strong { + font-weight: calc(var(--font-weight) + var(--bold-modifier)); + color: var(--bold-color); +} +b a, +strong a { + font-weight: calc(var(--link-weight) + var(--bold-modifier)); +} +i, +em { + font-style: italic; + color: var(--italic-color); +} +.markdown-rendered { + /* Highlights */ +} +.markdown-rendered p { + margin-block-start: var(--p-spacing); + margin-block-end: var(--p-spacing); + unicode-bidi: plaintext; +} +.markdown-rendered mark { + background-color: var(--text-highlight-bg); + color: var(--text-normal); +} +.markdown-rendered mark .internal-link { + color: var(--text-normal); +} +.cm-s-obsidian span.cm-formatting-highlight, +.cm-s-obsidian span.cm-highlight { + background-color: var(--text-highlight-bg); + color: var(--text-normal); +} +.cm-strong { + font-weight: calc(var(--font-weight) + var(--bold-modifier)); + color: var(--bold-color); +} +.cm-strong a { + font-weight: calc(var(--link-weight) + var(--bold-modifier)); +} +.cm-em { + font-style: italic; + color: var(--italic-color); + font-weight: var(--italic-weight); +} +.cm-strong.cm-em { + font-weight: calc(var(--font-weight) + var(--bold-modifier)); +} +.cm-s-obsidian span.cm-error { + color: var(--text-error); +} +.outgoing-link-pane { + padding-top: var(--size-4-3); +} +.backlink-pane { + padding-top: var(--size-4-1); +} +.backlink-pane, +.outgoing-link-pane { + overflow-y: auto; + flex: 1 0 0; + padding-inline-start: var(--size-4-3); + padding-inline-end: var(--size-4-3); + padding-bottom: max(var(--safe-area-inset-bottom), var(--size-4-8)); + /* #todo This should be removed and make the DOM changes instead + Section headers for linked/unlinked mentions + */ +} +.backlink-pane .search-result-container, +.outgoing-link-pane .search-result-container { + padding: var(--size-4-1) 1px var(--size-4-4); +} +.backlink-pane > .tree-item-self, +.outgoing-link-pane > .tree-item-self { + color: var(--nav-heading-color); + padding-inline-start: var(--size-4-2); +} +.backlink-pane > .tree-item-self .tree-item-inner, +.outgoing-link-pane > .tree-item-self .tree-item-inner { + font-weight: var(--nav-heading-weight); +} +.backlink-pane > .tree-item-self.is-clickable.is-collapsed, +.outgoing-link-pane > .tree-item-self.is-clickable.is-collapsed { + color: var(--nav-heading-color-collapsed); +} +@media (hover: hover) { + .backlink-pane > .tree-item-self.is-clickable.is-collapsed:hover, + .outgoing-link-pane > .tree-item-self.is-clickable.is-collapsed:hover { + color: var(--nav-heading-color-collapsed-hover); + } +} +.backlink-pane > .tree-item-self .collapse-icon, +.outgoing-link-pane > .tree-item-self .collapse-icon { + display: none; +} +@media (hover: hover) { + .backlink-pane > .tree-item-self:hover, + .outgoing-link-pane > .tree-item-self:hover { + color: var(--nav-heading-color-hover); + font-weight: var(--nav-heading-weight-hover); + } +} +/* Backlinks in Preview */ +.embedded-backlinks { + border-top: 1px solid var(--background-modifier-border); +} +.markdown-preview-view .embedded-backlinks { + margin-top: 3em; +} +.embedded-backlinks .backlink-pane { + padding: 0; +} +.embedded-backlinks .backlink-pane .search-empty-state, +.embedded-backlinks .backlink-pane .tree-item-self { + /* Use quotes because Less overrides CSS math */ + font-size: max(var(--font-ui-small),var(--font-smaller)); + align-items: center; +} +.embedded-backlinks .backlink-pane > .tree-item-self { + font-size: max(var(--font-ui-small),1em); + width: fit-content; +} +.embedded-backlinks .backlink-pane > .tree-item-self .tree-item-inner { + margin-inline-end: var(--size-2-3); +} +.embedded-backlinks .backlink-pane .tree-item-flair { + font-size: max(var(--font-ui-small),var(--font-smallest)); +} +.embedded-backlinks .nav-header { + padding: var(--size-4-3) 0 0 0; + position: relative; +} +.embedded-backlinks .nav-header > .search-input-container { + width: calc(100% - 150px); + margin: 0 0 var(--size-4-3) 0; +} +.embedded-backlinks .nav-buttons-container { + position: absolute; + inset-inline-end: 0; + top: var(--size-4-3); + z-index: 1; +} +.view-action.mod-bookmarked { + --icon-color: var(--icon-color-active); + --icon-color-hover: var(--icon-color-active); +} +/* Only browser shows the bookmark icon if not bookmarked */ +.workspace-leaf-content:not([data-type="browser"]) .view-action.mod-bookmark { + display: none; +} +.workspace-leaf-content:not([data-type="browser"]) .view-action.mod-bookmarked { + display: flex; +} +.workspace-leaf-content[data-type=bookmarks] .view-content { + padding: var(--size-4-1) var(--size-4-3) var(--size-4-8); +} +.modal.mod-bookmark .setting-item-control input { + width: 100%; +} +.bases-header { + container-type: inline-size; + container-name: bases-header; + display: flex; + align-items: center; + padding-top: 0; + padding-bottom: 0; + padding-inline-start: var(--bases-header-padding-start); + padding-inline-end: var(--bases-header-padding-end); + border-width: var(--bases-header-border-width); + border-color: var(--bases-table-border-color); + height: var(--bases-header-height); + min-height: var(--bases-header-height); + border-style: solid; +} +.bases-header .title { + color: var(--h2-color); + font-size: var(--h2-size); +} +@container (width < 460px) { + .bases-header .query-toolbar-item:not(.bases-toolbar-result-count) { + --bases-toolbar-label-display: none; + --bases-toolbar-badge-display: none; + } +} +.bases-toolbar-menu-container-header { + display: flex; + margin-bottom: var(--size-4-1); +} +.bases-toolbar-menu-container-header .menu-title, +.bases-toolbar-menu-container-header .back-button { + display: flex; + flex-grow: 1; + align-items: center; + font-weight: var(--font-medium); + font-size: var(--font-ui-small); + padding: var(--size-2-2) var(--size-2-2); + gap: var(--size-4-1); + border-radius: var(--radius-s); + overflow: hidden; +} +.bases-toolbar-menu-container-header .menu-title-inner { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +@media (hover: hover) { + .bases-toolbar-menu-container-header .back-button:hover { + background-color: var(--background-modifier-hover); + } +} +.bases-toolbar-menu-container-header .back-button .back-label { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.bases-toolbar-menu-container-header .back-icon, +.bases-toolbar-menu-container-header .close-icon { + display: flex; + align-items: center; + justify-content: center; + color: var(--text-muted); +} +.bases-toolbar-menu-container-header .close-icon { + padding: var(--size-2-2); +} +.bases-toolbar-menu-container-header .close-icon:hover { + color: var(--text-normal); +} +.bases-toolbar-menu-container { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + --bases-property-menu-item-radius: var(--radius-m); + display: flex; + flex-direction: column; + min-height: 0; + width: 100%; + max-width: 300px; +} +.bases-toolbar-menu-container .search-input-container { + --search-icon-color: var(--text-faint); + margin-bottom: var(--size-2-3); + padding-bottom: var(--size-4-1); + border-bottom: var(--border-width) solid var(--background-modifier-border); +} +.bases-toolbar-menu-container .search-input-container input[type=search] { + border: 0; + box-shadow: none; + background-color: transparent; +} +.bases-toolbar-items { + display: flex; + flex-direction: column; + min-height: 0; +} +.bases-toolbar-items:empty { + display: none; +} +.bases-toolbar-items .suggestion-group { + display: flex; + flex-direction: column; +} +.bases-toolbar-items .grip-handle { + display: flex; + align-items: center; + align-self: center; + color: var(--text-faint); + cursor: grab; +} +.bases-toolbar-items .grip-handle:active { + cursor: grabbing; +} +.bases-toolbar-items .grip-handle circle { + fill: var(--text-faint); +} +.bases-toolbar-items .grip-handle:hover { + color: var(--text-muted); +} +.bases-toolbar-items .grip-handle:hover circle { + fill: var(--text-muted); +} +.bases-toolbar-items .suggestion-group[data-group="views"], +.bases-toolbar-items .suggestion-group[data-group="properties"] { + flex-shrink: 1; + overflow-y: auto; + padding-bottom: var(--size-2-3); +} +.bases-toolbar-items .suggestion-group[data-group="views"]:not(.mod-hidden) .bases-toolbar-menu-item-info-icon, +.bases-toolbar-items .suggestion-group[data-group="properties"]:not(.mod-hidden) .bases-toolbar-menu-item-info-icon { + cursor: grab; +} +.bases-toolbar-items .suggestion-group[data-group="views"]:not(.mod-hidden) .bases-toolbar-menu-item-info-icon:active, +.bases-toolbar-items .suggestion-group[data-group="properties"]:not(.mod-hidden) .bases-toolbar-menu-item-info-icon:active { + cursor: grabbing; +} +.bases-toolbar-items .suggestion-group[data-group="properties"] .bases-toolbar-menu-item { + border-start-start-radius: var(--bases-property-menu-item-radius); + border-end-start-radius: var(--bases-property-menu-item-radius); +} +.bases-toolbar-items .suggestion-group[data-group="actions"] { + border-top: var(--border-width) solid var(--background-modifier-border); + padding-top: var(--size-2-3); +} +.bases-sort-container .bases-sort-items { + gap: var(--size-2-3); + padding: var(--size-4-1) 0 var(--size-4-2) 0; +} +.bases-sort-container .bases-sort-property-container.mod-error { + box-shadow: 0 0 0 var(--border-width) var(--background-modifier-error); +} +.bases-sort-container .bases-sort-property-container .bases-sort-property { + flex-grow: 1; +} +.bases-sort-container .bases-sort-property-container .bases-sort-direction { + min-width: 5.25em; + border-left: 1px solid var(--background-modifier-border); + padding-inline-start: var(--size-2-3); +} +.bases-sort-container .bases-sort-property-container .bases-sort-direction .combobox-button-label { + margin-inline-end: 0; + margin-inline-start: auto; +} +.bases-sort-container .text-icon-button { + width: 100%; +} +body:not(.is-phone) .base-toolbar-sort-item { + --metadata-property-box-shadow: 0 0 0 1px var(--background-modifier-border-hover); +} +.base-toolbar-sort-item { + --input-shadow: none; + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + --metadata-divider-width: 0px; + --metadata-label-width: 7em; + --metadata-property-background: var(--interactive-normal); + display: flex; + align-items: center; + gap: var(--size-4-1); + border-radius: var(--radius-s); + background-color: var(--menu-background); +} +.base-toolbar-sort-item .combobox-button { + box-shadow: none; + border-radius: 0; +} +.base-toolbar-sort-item .combobox-button.has-focus, +.base-toolbar-sort-item .combobox-button:focus, +.base-toolbar-sort-item .combobox-button:hover { + box-shadow: none; +} +.base-toolbar-sort-item .metadata-property { + flex: 1 1 auto; +} +.bases-toolbar-menu-form { + display: flex; + flex-direction: column; + gap: var(--size-2-3); + padding-top: var(--size-4-1); + padding-bottom: var(--size-4-1); + font-size: var(--font-ui-small); +} +.bases-toolbar-menu-form .formula-editor { + resize: both; + overflow: auto; + min-width: 100%; + max-width: 290px; +} +.bases-toolbar-menu-form .formula-editor .cm-editor { + height: 100%; +} +.bases-toolbar-menu-form .formula-editor .cm-content { + min-height: calc(var(--input-height) * 3); +} +.bases-toolbar-menu-form .input-row .input-row-label { + color: var(--text-muted); + padding: var(--size-2-2) var(--size-2-1); + display: flex; + align-items: center; + gap: var(--size-2-1); +} +.bases-toolbar-menu-form .input-row .help-icon { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + color: var(--text-faint); + padding: var(--size-2-1) var(--size-2-2); +} +.bases-toolbar-menu-form .input-row .input-row-content { + width: 100%; + display: flex; + align-items: center; + min-height: var(--input-height); +} +.bases-toolbar-menu-form .input-row .input-row-content .combobox-button, +.bases-toolbar-menu-form .input-row .input-row-content button, +.bases-toolbar-menu-form .input-row .input-row-content select, +.bases-toolbar-menu-form .input-row .input-row-content textarea, +.bases-toolbar-menu-form .input-row .input-row-content input { + flex-grow: 1; +} +.bases-toolbar-menu-form .input-row .input-row-content .combobox-button.mod-error, +.bases-toolbar-menu-form .input-row .input-row-content button.mod-error, +.bases-toolbar-menu-form .input-row .input-row-content select.mod-error, +.bases-toolbar-menu-form .input-row .input-row-content textarea.mod-error, +.bases-toolbar-menu-form .input-row .input-row-content input.mod-error { + box-shadow: 0 0 0 var(--border-width) var(--background-modifier-error); +} +.bases-toolbar-menu-form .input-row .input-row-status { + display: flex; + align-items: center; + font-size: var(--font-ui-smaller); + margin-top: var(--size-4-1); + color: var(--text-success); +} +.bases-toolbar-menu-form .input-row .input-row-status .status-icon { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + display: flex; + align-items: center; + margin-right: var(--size-4-1); +} +.bases-toolbar-menu-form .input-row .input-row-status.mod-empty { + color: var(--text-faint); +} +.bases-toolbar-menu-form .input-row .input-row-status.mod-error { + color: var(--text-error); +} +.bases-toolbar-menu-form + .action-row { + margin-top: var(--size-4-1); +} +.bases-toolbar-menu-item { + display: flex; + align-items: center; + padding: var(--size-2-2) var(--size-2-2); + padding-inline-start: var(--size-2-3); + border-radius: var(--radius-s); + gap: var(--size-4-2); + width: 100%; +} +@media (hover: hover) { + .bases-toolbar-menu-item:hover { + background-color: var(--background-modifier-hover); + } +} +.bases-toolbar-menu-item.mod-destructive { + color: var(--text-error); +} +.bases-toolbar-menu-item.mod-hidden { + --icon-color: var(--text-faint); + color: var(--text-faint); +} +.bases-toolbar-menu-item.mod-hidden .bases-property-visibility-button { + opacity: 1; +} +.bases-toolbar-menu-item .bases-property-visibility-button { + --icon-size: var(--icon-s); + opacity: 0; + display: flex; + align-items: center; +} +.bases-toolbar-menu-item.is-selected input[type=checkbox] { + box-shadow: 0 0 0 2px var(--background-modifier-border-focus); +} +.bases-toolbar-menu-item.is-selected .bases-property-visibility-button { + opacity: 1; + color: var(--text-muted); +} +.bases-toolbar-menu-item .clickable-icon { + margin: calc(var(--size-2-2) * -1); + padding: var(--size-2-2); +} +.bases-toolbar-menu-item .clickable-icon:hover { + color: var(--text-normal); +} +.bases-toolbar-menu-item.mod-active { + --icon-color: var(--text-normal); + font-weight: var(--font-medium); +} +.bases-toolbar-menu-item .bases-toolbar-menu-item-info { + display: flex; + align-items: center; + gap: var(--size-4-2); + font-size: var(--font-ui-small); + flex-grow: 1; + overflow: hidden; +} +.bases-toolbar-menu-item .bases-toolbar-menu-item-name { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.bases-toolbar-menu-item:not(.mod-destructive) .bases-toolbar-menu-item-info-icon { + color: var(--icon-color); +} +.bases-toolbar-menu-item:not(.mod-destructive) .bases-toolbar-menu-item-info-icon.mod-error { + color: var(--text-error); +} +.bases-toolbar-menu-item .bases-toolbar-menu-item-info-icon { + cursor: var(--cursor); + display: flex; + align-items: center; + user-select: none; + -webkit-user-select: none; +} +.bases-toolbar-menu-item .bases-toolbar-menu-item-info-icon:before { + content: "\200B"; + width: 0; +} +.bases-toolbar-menu-item .bases-toolbar-menu-action-icon { + color: var(--text-muted); + display: flex; + align-items: center; + justify-content: center; +} +.block-language-base, +.bases-embed { + cursor: var(--cursor); +} +.app-container .block-language-base, +.app-container .bases-embed { + --bases-header-border-width: 0; +} +.workspace-leaf-content[data-type="markdown"] .block-language-base, +.workspace-leaf-content[data-type="markdown"] .bases-embed { + --bases-cards-group-padding: var(--size-4-1) 0; +} +.workspace-leaf-content[data-type="markdown"] .block-language-base .bases-view, +.workspace-leaf-content[data-type="markdown"] .bases-embed .bases-view { + border: var(--bases-embed-border-width) solid var(--bases-embed-border-color); + border-radius: var(--bases-embed-border-radius); + padding: var(--bases-embed-padding); + overflow-x: auto; +} +.workspace-leaf-content[data-type="markdown"] .block-language-base .bases-view:empty, +.workspace-leaf-content[data-type="markdown"] .bases-embed .bases-view:empty { + display: none; +} +.bases-view[data-view-type="table"] { + --bases-embed-border-width: 1px; +} +.bases-view[data-view-type="cards"] { + --bases-embed-padding: 0 1px; +} +.markdown-source-view.mod-cm6 .cm-content > .bases-embed, +.markdown-source-view.mod-cm6 .cm-content > .cm-lang-base { + --bases-header-padding-end: calc(var(--icon-m) + var(--size-4-4)); +} +.markdown-source-view.mod-cm6 .cm-content > .bases-embed .edit-block-button, +.markdown-source-view.mod-cm6 .cm-content > .cm-lang-base .edit-block-button { + opacity: 1; + top: calc(var(--bases-header-height) / 2 - var(--icon-m) / 2 - var(--size-2-2)); +} +.mod-sidedock { + --bases-table-header-background: var(--background-secondary); +} +.workspace-leaf-content[data-type="bases"] { + --bases-table-container-border-width: 0; + --bases-table-container-border-radius: 0; + --bases-table-cell-edge-padding: var(--size-4-1); + --bases-view-padding-bottom: 60px; +} +.workspace-leaf-content[data-type="bases"] .bases-header { + --bases-header-padding-start: var(--size-4-2); + --bases-header-padding-end: var(--size-4-2); +} +.workspace-leaf-content[data-type="bases"] .view-content { + padding: 0; + display: flex; + flex-direction: column; + overflow: hidden; +} +.bases-view { + overflow: auto; + flex-grow: 1; + padding-bottom: var(--bases-view-padding-bottom); + scrollbar-gutter: stable; +} +.bases-error { + padding: 0 var(--size-4-2); +} +.bases-error .formula-preview { + background-color: var(--background-secondary); + padding: var(--size-4-2); +} +.bases-query-container { + padding: var(--size-4-2); +} +.bases-query-container .filter-group { + gap: var(--size-2-3); + display: flex; + flex-direction: column; + width: 100%; +} +.bases-query-container .filter-group .filter-group-statements { + width: 100%; + gap: var(--size-2-3); + display: flex; + flex-direction: column; +} +.bases-query-container .filter-group .filter-group { + background-color: var(--background-primary-alt); + border: var(--table-border-width) solid var(--table-border-color); + padding: var(--size-2-3); + border-radius: var(--radius-m); +} +.bases-query-container .filter-group .filter-group-actions { + padding-top: var(--size-2-2); + display: flex; +} +.bases-query-container .filter-group .filter-group-header-actions { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + display: flex; +} +.bases-query-container .filter-group .filter-group-header { + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: var(--size-2-1); +} +.bases-query-container .filter-group .filter-group-header .conjunction.dropdown { + padding-top: 0; + background-color: transparent; + font-size: var(--font-ui-small); + box-shadow: none; + text-align: start; +} +.bases-query-container .filter-group .filter-group-header .conjunction.dropdown:hover { + background-color: var(--background-modifier-hover); +} +.bases-query-container .filter-group .filter-group-header .filter-group-label { + color: var(--text-muted); + font-size: var(--font-ui-small); +} +.bases-query-container .filter-row { + display: flex; + align-items: center; + gap: var(--size-4-2); +} +.bases-query-container .filter-row .filter-statement { + display: flex; + row-gap: var(--size-4-1); + flex-grow: 1; + flex-direction: column; +} +.bases-query-container .filter-row .filter-row-error { + color: var(--text-error); + font-size: var(--font-ui-smaller); +} +.bases-query-container .filter-row .conjunction { + min-width: 4.5rem; + font-size: var(--font-ui-small); + text-align: end; +} +.bases-query-container .filter-row .formula-editor-container { + font-size: var(--font-ui-small); +} +.bases-query-container .filter-row.mod-group > .conjunction { + display: none; +} +.bases-query-container .filter-row .filter-property-select { + width: 100%; +} +.bases-query-container .filter-row .filter-operator { + border-width: 0 1px; + max-width: 33%; + align-self: stretch; + height: auto; +} +.bases-query-container .filter-row .combobox-button { + box-shadow: none; + border-radius: 0; +} +.bases-query-container .filter-row .combobox-button.has-focus, +.bases-query-container .filter-row .combobox-button:focus, +.bases-query-container .filter-row .combobox-button:hover { + box-shadow: none; +} +.bases-query-container .filter-expression { + --input-shadow: none; + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + --metadata-divider-width: 0px; + --metadata-label-width: 7em; + --metadata-input-font-size: var(--font-ui-small); + --metadata-property-box-shadow: 0 0 0 1px var(--background-modifier-border-hover); + background-color: var(--interactive-normal); + width: 100%; + align-items: center; + display: flex; +} +.bases-query-container .filter-expression.mod-error { + box-shadow: 0 0 0 var(--border-width) var(--background-modifier-error); +} +.bases-query-container .filter-expression.mod-error .filer-expression-mode-toggle { + --icon-color: var(--text-error); +} +.bases-query-container .filter-expression .filter-row-actions { + display: flex; + padding: var(--size-2-1); + margin-inline-start: auto; + height: var(--input-height); +} +.bases-query-container .filter-lhs-container { + position: relative; +} +.bases-query-container .filter-lhs-container .metadata-property-warning-icon { + top: var(--size-2-2); + bottom: unset; +} +.bases-query-container .filter-rhs-container { + display: flex; + align-items: center; +} +.bases-query-container .filter-rhs-container .combobox-button { + flex-grow: 1; +} +.bases-query-container .filter-rhs-container .metadata-input-longtext { + font-family: inherit; + outline: none; + display: flex; + align-items: center; +} +.bases-query-container .filter-rhs-container .metadata-link-inner { + width: auto; +} +.bases-query-container .filter-rhs-container .metadata-link-flair { + display: none; +} +.query-toolbar { + align-items: center; + position: relative; + display: flex; + column-gap: var(--size-2-2); + width: 100%; +} +.query-toolbar .text-icon-button { + margin: 2px; +} +.query-toolbar .query-toolbar-item { + margin: 0 -2px; + display: flex; +} +.query-toolbar .query-toolbar-item:not(.mod-views,.bases-toolbar-result-count) .text-button-label { + display: var(--bases-toolbar-label-display); +} +.query-toolbar .bases-toolbar-result-count { + color: var(--text-muted); + user-select: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-inline-end: auto; +} +.query-toolbar .bases-toolbar-result-count .text-button-icon { + display: none; +} +.query-toolbar .bases-toolbar-result-count .text-button-label { + font-size: var(--font-ui-smaller); +} +.query-toolbar .bases-toolbar-result-count .text-icon-button.is-active { + color: var(--icon-color-active); +} +.query-toolbar .query-toolbar-item.mod-views { + overflow: hidden; + display: flex; +} +.query-toolbar .query-toolbar-item.mod-views .text-icon-button { + --icon-color-hover: var(--text-normal); + color: var(--text-normal); +} +.query-toolbar .query-toolbar-item.mod-views .text-icon-button .mod-aux { + margin-inline-start: auto; +} +.query-toolbar .toolbar-badge { + --flair-background: transparent; + padding: 0; + color: inherit; + opacity: 0.61; + display: var(--bases-toolbar-badge-display); + padding-inline-end: var(--size-2-1); + font-size: var(--font-ui-smaller); +} +.query-toolbar .mod-error { + --flair-background: var(--text-error); + --flair-color: var(--text-on-accent); + color: var(--text-error); +} +.query-toolbar-menu { + --input-height: 28px; + z-index: var(--layer-modal); + min-width: 220px; + max-width: 100vw; +} +.query-toolbar-menu .modal-header { + display: none; +} +.query-toolbar-menu.mod-filters { + width: var(--bases-filter-menu-width); +} +.query-toolbar-menu.mod-filters .menu-scroll { + overflow-y: auto; + padding: 0; +} +.query-toolbar-menu .query-toolbar-section:not(:last-child) { + border-bottom: var(--border-width) solid var(--background-modifier-border); +} +.query-toolbar-menu .query-toolbar-section-header { + --flair-background: var(--background-modifier-hover); + --flair-color: var(--text-muted); + display: flex; + align-items: center; + padding: var(--size-4-2) var(--size-4-3) var(--size-4-2) var(--size-4-3); + color: var(--text-muted); + font-weight: var(--font-semibold); + font-size: var(--font-ui-small); + gap: var(--size-4-1); +} +.query-toolbar-menu .query-toolbar-section-header:hover { + color: var(--text-normal); +} +.query-toolbar-menu .query-toolbar-section-header .flair { + margin-inline-start: var(--size-4-1); +} +.query-toolbar-menu .bases-sort-property, +.query-toolbar-menu .filter-property-select { + max-width: 14em; +} +.bases-table-container { + position: relative; + min-width: 100%; + --metadata-input-font-size: var(--bases-table-text-size); + --metadata-input-background-active: transparent; + --metadata-input-longtext-lines: 1; + --metadata-divider-width: 0px; + --input-placeholder-color: transparent; +} +.bases-table-container input[type='text'], +.bases-table-container input[type='date'], +.bases-table-container input[type='datetime-local'], +.bases-table-container input[type='number'], +.bases-table-container .multi-select-container { + border-radius: 0; + border: none; +} +.bases-table-container input[type='text']:hover, +.bases-table-container input[type='date']:hover, +.bases-table-container input[type='datetime-local']:hover, +.bases-table-container input[type='number']:hover, +.bases-table-container .multi-select-container:hover, +.bases-table-container input[type='text']:active, +.bases-table-container input[type='date']:active, +.bases-table-container input[type='datetime-local']:active, +.bases-table-container input[type='number']:active, +.bases-table-container .multi-select-container:active, +.bases-table-container input[type='text']:focus, +.bases-table-container input[type='date']:focus, +.bases-table-container input[type='datetime-local']:focus, +.bases-table-container input[type='number']:focus, +.bases-table-container .multi-select-container:focus { + box-shadow: none; + border: none; +} +.bases-table-container .add-column-button { + border: none; + border-radius: 0; + opacity: 1; +} +.bases-table { + position: absolute; + flex: 1; + min-width: 100%; +} +.bases-thead { + position: sticky; + width: 100%; + height: var(--bases-table-row-height); + top: 0; + z-index: 1; + justify-content: space-between; + background-color: var(--bases-table-header-background); + box-shadow: inset 0 calc(var(--bases-table-row-border-width) * -1) 0 var(--bases-table-border-color); + /* Bottom border */ +} +.bases-thead .bases-table-header { + display: flex; + width: 100%; + align-items: center; + height: var(--bases-table-row-height); +} +.bases-thead .bases-td { + white-space: nowrap; + align-items: center; +} +.bases-thead .bases-td:hover { + background-color: var(--bases-table-header-background-hover); +} +.bases-thead .bases-td[data-sort] .bases-table-header { + mask-image: var(--bases-table-header-sort-mask); +} +.bases-thead .bases-td[data-sort] .bases-table-header-name { + padding-inline-end: var(--size-4-4); +} +[dir='rtl'], +.mod-rtl { + --bases-table-header-sort-mask: linear-gradient(to right, transparent var(--size-4-6), black var(--size-4-6)); +} +.bases-table-header-sort { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + color: var(--text-muted); + position: absolute; + inset-inline-end: 0; + top: -1px; + height: 100%; + padding-top: var(--size-2-1); + padding-inline-end: var(--size-2-3); + display: flex; + align-items: center; + margin-inline-start: auto; +} +.bases-table-header-label { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + display: flex; + gap: var(--size-4-1); + align-items: stretch; + cursor: var(--cursor); + user-select: none; + text-align: start; + font-size: var(--bases-table-text-size); + color: var(--bases-table-header-color); + font-weight: var(--bases-table-header-weight); + padding-inline-start: var(--size-4-2); + padding-inline-end: var(--size-4-2); +} +.bases-table-header-icon { + align-items: center; + display: var(--bases-table-header-icon-display); +} +.bases-table-header-resizer { + position: absolute; + right: -1px; + top: 0; + bottom: 0; + width: 6px; + cursor: col-resize; + z-index: 1; +} +body.mod-rtl .bases-table-header-resizer { + right: unset; + left: -1px; +} +.bases-table-header-resizer.is-active { + background-color: var(--divider-color-hover); +} +.bases-table-header-resizer:hover { + background-color: var(--divider-color-hover); +} +.bases-tbody { + position: relative; + width: 100%; + box-shadow: 0 var(--bases-table-row-border-width) 0 var(--table-border-color); +} +.bases-tbody .bases-tr:hover { + background-color: var(--bases-table-row-background-hover); +} +.bases-tr { + position: absolute; + height: var(--bases-table-row-height); + display: flex; + flex-direction: row; + min-width: 100%; + box-shadow: 0 calc(var(--bases-table-row-border-width) * -1) 0 var(--table-border-color); +} +.bases-table-cell[disabled="true"] { + background-color: var(--bases-table-cell-background-disabled); +} +.bases-rendered-value { + padding: var(--input-padding); + font-size: var(--bases-table-text-size); + text-overflow: ellipsis; + overflow: hidden; +} +.bases-rendered-value input { + background: transparent; + padding: 0; +} +.bases-rendered-value img { + width: auto; + max-height: 100%; +} +.bases-formula-error { + display: flex; + align-items: center; + font-size: var(--font-ui-smaller); + color: var(--text-error); + text-decoration: underline; + text-underline-offset: 2px; + text-decoration-style: dotted; +} +.bases-formula-error .warning-icon { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + color: rgba(var(--background-modifier-error-rgb), 0.6); + display: flex; + align-items: center; + margin-inline-end: var(--size-4-1); +} +.bases-td { + box-shadow: calc(var(--bases-table-column-border-width) * -1) 0 0 var(--table-border-color); + display: flex; + position: absolute; + height: var(--bases-table-row-height); + overflow: hidden; + text-overflow: ellipsis; + flex: 1 0 auto; +} +.bases-td:focus-within { + border-radius: var(--bases-table-cell-radius-active); + box-shadow: var(--bases-table-cell-shadow-active); + background-color: var(--background-primary); + z-index: var(--layer-cover); + height: fit-content; + min-height: var(--bases-table-row-height); +} +.bases-td:focus-within .bases-table-cell { + background-color: var(--bases-table-cell-background-active); +} +.bases-td[data-property-type="checkbox"] .bases-metadata-value { + justify-content: center; +} +.bases-td .metadata-input-number, +.bases-td[data-property-type="number"] { + text-align: right; + font-variant-numeric: tabular-nums; +} +.bases-td .metadata-input-longtext:not(:empty) { + display: block; +} +.bases-td .metadata-input.mod-date, +.bases-td .metadata-input.mod-datetime { + --input-placeholder-color: var(--text-faint); +} +.bases-td .metadata-input.mod-date.is-empty, +.bases-td .metadata-input.mod-datetime.is-empty { + opacity: 0; +} +.bases-td .metadata-input.mod-date.is-empty:focus-within, +.bases-td .metadata-input.mod-datetime.is-empty:focus-within, +.bases-td .metadata-input.mod-date.is-empty:hover, +.bases-td .metadata-input.mod-datetime.is-empty:hover { + opacity: 1; +} +.bases-td .bases-metadata-value .clickable-icon { + opacity: 0; +} +.bases-td:focus-within .clickable-icon, +.bases-td:hover .clickable-icon { + opacity: 1; +} +.bases-table-cell { + display: flex; + height: 100%; + width: 100%; +} +.bases-table-container:not(.mod-multiline) .bases-tr { + --input-height: var(--bases-table-row-height); +} +.bases-table-container:not(.mod-multiline) .bases-td { + white-space: nowrap; + align-items: center; +} +.bases-table-container:not(.mod-multiline) .bases-table-cell { + align-items: center; +} +.bases-table-container:not(.mod-multiline) .metadata-input-longtext:not(:focus-within) { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.bases-table-container:not(.mod-multiline) .multi-select-container:not(:focus-within) { + flex-wrap: nowrap; +} +.bases-table-container.mod-multiline .bases-table-cell { + align-items: start; +} +.bases-table-container.mod-multiline .metadata-input-longtext { + overflow-y: auto; +} +.hover-popover.bases-new-item-popover .metadata-container { + display: var(--metadata-display-editing); +} +.table-col-drag-ghost { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + position: absolute; + pointer-events: none; + touch-action: none; + top: 0; + width: 100%; + height: 100%; + background-color: var(--table-drag-handle-background-active); + color: var(--table-drag-handle-color-active); + box-shadow: 0 0 0 var(--table-selection-border-width) var(--table-selection-border-color); +} +.bases-cards-container { + --input-border-width: 0; + background-color: var(--bases-cards-container-background); + position: relative; + width: 100%; + gap: var(--size-4-2); +} +.bases-cards-group { + position: absolute; + padding: var(--bases-cards-group-padding); + gap: var(--size-4-3); +} +.bases-cards-item { + position: absolute; + cursor: var(--cursor-link); + user-select: none; + border-radius: var(--radius-m); + background-color: var(--bases-cards-background); + box-shadow: var(--bases-cards-shadow); + overflow: hidden; + transition: box-shadow var(--anim-duration-fast) ease-in-out; + contain: strict; + padding: var(--size-4-2) 0 var(--size-2-1); + gap: var(--size-4-2); + --input-height: var(--bases-cards-line-height); +} +@media (hover: hover) { + .bases-cards-item:hover { + transition: box-shadow var(--anim-duration-fast) ease-in-out; + box-shadow: var(--bases-cards-shadow-hover); + } +} +.bases-cards-cover { + position: absolute; + overflow: hidden; + height: 100px; + background-color: var(--bases-cards-cover-background); + background-repeat: no-repeat; + background-position: center center; +} +.bases-cards-property { + position: absolute; + overflow: hidden; +} +.bases-cards-property.mod-title { + --link-color: var(--text-normal); + --link-unresolved-color: var(--text-normal); + --link-unresolved-opacity: 1; + --link-decoration: none; + --link-weight: calc(var(--font-weight) + var(--bold-modifier)); + font-weight: calc(var(--font-weight) + var(--bold-modifier)); + pointer-events: none; +} +.bases-cards-property.mod-title .bases-cards-label { + display: none; +} +.bases-cards-property.mod-title .bases-cards-line { + font-size: var(--font-ui-medium); +} +.bases-cards-label, +.bases-cards-line { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.bases-cards-label { + font-size: var(--font-ui-smaller); + color: var(--text-muted); + padding: 0 var(--size-4-2); +} +.bases-cards-line { + height: var(--bases-cards-line-height); + display: block; + line-height: 1; + align-items: center; + position: relative; +} +.bases-cards-line:empty:before { + content: "\2014"; + color: var(--text-faint); +} +.bases-cards-line input[disabled=true] { + pointer-events: none; +} +.bases-cards-line .metadata-input-text { + position: absolute; + top: 0; +} +.bases-cards-line .multi-select-container { + flex-wrap: nowrap; +} +.bases-cards-line .value-list-container { + flex-wrap: nowrap; +} +.bases-cards-line .value-list-container:empty:before { + content: "—"; + color: var(--text-faint); +} +.canvas-node .bases-embed { + --bases-embed-border-width: 0; + --bases-embed-border-radius: 0; + --bases-header-border-width: 0 0 1px 0; +} +.hover-popover > .bases-embed { + --bases-table-cell-edge-padding: var(--size-4-1); + --bases-embed-border-width: 0; + --bases-embed-border-radius: 0; + max-height: var(--popover-height); +} +.hover-popover > .bases-embed .bases-view { + overflow: auto; + max-height: calc(var(--popover-height) - var(--bases-header-height)); +} +.hover-popover > .bases-embed .bases-header { + --bases-header-padding-start: var(--size-4-2); + --bases-header-padding-end: var(--size-4-2); +} +.canvas-node-content.bases-embed { + width: 100%; + height: 100%; + padding: 0; + display: flex; + flex-direction: column; + overflow: hidden; +} +.tooltip.bases-filter-query-message { + animation: none; + z-index: var(--layer-popover); +} +.nav-files-container { + flex-grow: 1; + overflow-y: auto; + overflow-x: hidden; + padding: var(--size-4-1) var(--size-4-3) var(--size-4-6) var(--size-4-3); + padding-bottom: max(var(--safe-area-inset-bottom), var(--size-4-6)); + scroll-padding-block: var(--size-4-2); +} +.nav-file-tag { + background-color: var(--background-modifier-hover); + border-radius: var(--radius-s); + font-size: 9px; + font-weight: var(--font-semibold); + letter-spacing: 0.05em; + line-height: var(--line-height-normal); + margin-inline-start: auto; + padding: 0 var(--size-4-1); + text-transform: uppercase; + align-self: center; +} +.nav-file-icon { + display: inline-flex; + align-items: center; + margin-inline-end: var(--size-2-3); + position: relative; + color: var(--icon-color); + opacity: var(--icon-opacity); +} +.nav-files-container:not(.show-unsupported) .is-unsupported { + display: none; +} +.nav-file-title-content, +.nav-folder-title-content { + display: inline-block; + overflow-wrap: anywhere; + overflow: hidden; + white-space: var(--nav-item-white-space); +} +.nav-file-title-content:not([contenteditable="true"]), +.nav-folder-title-content:not([contenteditable="true"]) { + text-overflow: ellipsis; +} +.nav-folder.is-being-dragged-over { + border-radius: var(--radius-s); + background: hsla(var(--interactive-accent-hsl), 0.1); +} +.nav-folder.is-being-dragged-over > .nav-folder-title { + color: var(--nav-item-color-highlighted); +} +.nav-folder.is-being-dragged-over > .nav-folder-title .collapse-icon { + color: var(--nav-item-color-highlighted); +} +/* Folders and files */ +.nav-folder-title { + padding: var(--nav-item-parent-padding); +} +.nav-file-title { + padding: var(--nav-item-padding); +} +.nav-file-title, +.nav-folder-title { + margin-bottom: var(--size-2-1); + display: flex; + border-radius: var(--radius-s); + cursor: var(--cursor); + color: var(--nav-item-color); + font-size: var(--nav-item-size); + font-weight: var(--nav-item-weight); + line-height: var(--line-height-tight); +} +@media (hover: hover) { + body:not(.is-grabbing) .nav-file-title:hover, + body:not(.is-grabbing) .nav-folder-title:hover { + background-color: var(--nav-item-background-hover); + color: var(--nav-item-color-hover); + font-weight: var(--nav-item-weight-hover); + } +} +body:not(.is-grabbing) .nav-file-title.is-active:hover, +body:not(.is-grabbing) .nav-folder-title.is-active:hover, +.nav-file-title.is-active, +.nav-folder-title.is-active { + color: var(--nav-item-color-active); + background-color: var(--nav-item-background-active); + font-weight: var(--nav-item-weight-active); +} +body:not(.is-grabbing) .nav-file-title.is-selected:hover, +body:not(.is-grabbing) .nav-folder-title.is-selected:hover, +.nav-file-title.is-selected, +.nav-folder-title.is-selected { + color: var(--nav-item-color-selected); + background-color: var(--nav-item-background-selected); +} +body:not(.is-grabbing) .nav-file-title.is-being-dragged, +body:not(.is-grabbing) .nav-folder-title.is-being-dragged, +.nav-file-title.is-being-dragged, +.nav-folder-title.is-being-dragged { + background-color: var(--interactive-accent); + color: var(--text-on-accent); +} +body:not(.is-grabbing) .nav-file-title.is-being-dragged .tree-item-icon.collapse-icon, +body:not(.is-grabbing) .nav-folder-title.is-being-dragged .tree-item-icon.collapse-icon, +.nav-file-title.is-being-dragged .tree-item-icon.collapse-icon, +.nav-folder-title.is-being-dragged .tree-item-icon.collapse-icon { + color: var(--text-on-accent); +} +body:not(.is-grabbing) .nav-file-title.is-being-dragged .nav-file-tag, +body:not(.is-grabbing) .nav-folder-title.is-being-dragged .nav-file-tag, +.nav-file-title.is-being-dragged .nav-file-tag, +.nav-folder-title.is-being-dragged .nav-file-tag { + color: var(--text-normal); +} +/* 2022-07 Only used for Publish AFAIK */ +.file-tree-item-checkbox, +.file-tree-item-icon { + flex-shrink: 0; +} +.file-tree-item-title { + flex-grow: 1; + word-break: break-word; +} +.file-tree-item-icon { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + margin-right: var(--size-4-1); + color: var(--icon-color); + position: relative; + top: var(--size-2-1); +} +.file-tree .tree-item-inner { + display: flex; + align-items: center; + position: relative; + width: 100%; +} +.file-tree .tree-item-flair { + line-height: 1; + padding: var(--size-2-1) var(--size-2-3); + color: var(--text-on-accent); +} +.file-tree .is-selected { + color: var(--text-normal); +} +.file-tree .mod-changed.is-selected { + background-color: hsla(var(--interactive-accent-hsl), 0.2); +} +.file-tree .mod-changed .tree-item-flair { + color: var(--text-accent-hover); +} +.file-tree .mod-new.is-selected { + background-color: rgba(var(--background-modifier-success-rgb), 0.2); +} +.file-tree .mod-new .tree-item-flair { + color: var(--text-success); +} +.file-tree .mod-deleted.is-selected, +.file-tree .mod-to-delete.is-selected { + background-color: rgba(var(--background-modifier-error-rgb), 0.2); +} +.file-tree .mod-deleted .tree-item-flair, +.file-tree .mod-to-delete .tree-item-flair { + color: var(--text-error); +} +.file-tree .mod-to-delete .tree-item-flair { + display: none; +} +.file-tree .mod-to-delete.is-selected .tree-item-flair { + display: block; +} +.file-tree .clickable-icon { + display: flex; + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); +} +.file-recovery-list-item-container { + overflow: auto; + flex: 1 1 0; +} +.file-recovery-list { + overflow: auto; + padding: var(--size-4-3) var(--size-4-2); + flex-grow: 1; + display: flex; + flex-direction: column; +} +.file-recovery-list .search-input-container { + width: 100%; +} +.file-recovery-list-container { + display: flex; + flex-direction: column; + flex-basis: 250px; + flex-shrink: 0; + border-inline-end: 1px solid var(--background-modifier-border); +} +.file-recovery-list-item-header { + display: flex; + padding: var(--size-4-2); + border-radius: var(--radius-s); + transition: background-color 200ms ease-in-out, color 200ms ease-in-out; +} +.file-recovery-list-item-header:not(:last-child) { + margin-bottom: var(--size-4-2); +} +.file-recovery-list-item-header.is-active, +.file-recovery-list-item-header.is-active:hover { + background-color: var(--interactive-accent); + color: var(--text-on-accent); +} +.file-recovery-list-item-header.is-active .u-muted, +.file-recovery-list-item-header.is-active:hover .u-muted { + color: var(--text-on-accent); + opacity: 0.8; +} +@media (hover: hover) { + .file-recovery-list-item-header:hover { + background-color: var(--background-modifier-hover); + } +} +.file-recovery-list-item-header .file-recovery-list-item-details { + flex-grow: 1; + cursor: var(--cursor); + font-size: var(--font-ui-small); +} +.file-recovery-list-item-header .collapse-indicator { + min-width: var(--size-4-6); + padding-inline-start: var(--size-4-2); + opacity: 1; +} +.file-recovery-text { + font-size: var(--code-size); + font-family: var(--font-monospace); + tab-size: 4; + resize: none; + flex: 1 0 0; + padding: var(--size-4-6); + font-size: var(--font-ui-medium); + background-color: var(--background-primary); +} +.file-recovery-text[data-ext="md"] { + font-family: var(--font-text); + font-size: var(--font-text-size); +} +.graph-view.color-fill { + color: var(--graph-node); +} +.graph-view.color-fill-focused { + color: var(--graph-node-focused); +} +.graph-view.color-fill-tag { + color: var(--graph-node-tag); +} +.graph-view.color-fill-attachment { + color: var(--graph-node-attachment); +} +.graph-view.color-fill-unresolved { + color: var(--graph-node-unresolved); + opacity: 0.5; +} +.graph-view.color-fill-1 { + color: var(--text-muted); +} +.graph-view.color-fill-2 { + color: var(--text-muted); +} +.graph-view.color-fill-3 { + color: var(--text-muted); +} +.graph-view.color-fill-4 { + color: var(--text-muted); +} +.graph-view.color-fill-5 { + color: var(--text-muted); +} +.graph-view.color-fill-6 { + color: var(--text-muted); +} +.graph-view.color-arrow { + color: var(--text-normal); + opacity: 0.5; +} +.graph-view.color-circle { + color: var(--graph-node-focused); +} +.graph-view.color-line { + color: var(--graph-line); +} +.graph-view.color-text { + color: var(--graph-text); +} +.graph-view.color-fill-highlight { + color: var(--interactive-accent); +} +.graph-view.color-line-highlight { + color: var(--interactive-accent); +} +.graph-controls { + border-radius: var(--radius-m); + position: absolute; + inset-inline-end: var(--size-4-3); + top: var(--size-4-3); + padding: 0; + background-color: var(--background-primary); + width: var(--graph-controls-width); + overflow: auto; +} +.graph-controls:not(.is-close) { + max-height: calc(100% - var(--size-4-4)); + border: 1px solid var(--background-modifier-border); + box-shadow: var(--shadow-s); +} +.graph-controls.is-close { + min-width: inherit; + width: auto; + background-color: var(--background-primary); + border: 1px solid transparent; + padding: var(--size-2-3); +} +.graph-controls.is-close > .graph-control-section { + display: none; +} +.workspace-split:not(.mod-root) .graph-controls.is-close { + background-color: var(--background-secondary); +} +.graph-controls input[type='text'], +.graph-controls input[type='range'] { + width: 100%; + font-size: var(--font-ui-small); +} +.graph-controls .mod-cta { + margin-top: var(--size-2-3); + width: 100%; +} +.graph-controls .setting-item { + padding: var(--size-2-3) 0; + border: none; +} +.graph-controls .setting-item .setting-item-info { + display: flex; + align-items: center; +} +.graph-controls .setting-item:first-of-type { + border-top: none; +} +.graph-controls .setting-item.mod-slider { + flex-direction: column; +} +.graph-controls .setting-item.mod-slider > * { + width: 100%; +} +.graph-controls .setting-item.mod-slider .setting-item-info { + margin-inline-end: 0; +} +.graph-controls .setting-item.mod-slider .setting-item-control { + padding-top: var(--size-4-3); +} +.graph-controls .setting-item.mod-toggle .setting-item-control { + padding-top: 0; +} +.graph-controls .setting-item.mod-search-setting .setting-item-info { + margin-inline-end: 0; +} +.graph-controls .setting-item-name { + font-size: var(--font-ui-small); +} +.graph-controls::-webkit-scrollbar, +.graph-controls::-webkit-scrollbar-thumb { + display: none; +} +.graph-color-group { + --swatch-height: 18px; + --swatch-width: 18px; + position: relative; + display: flex; + align-items: center; + padding: 0 0 6px 0; + transition: top 200ms ease-in-out; +} +.graph-color-group input[type="color"] { + margin: 0 2px 0 6px; +} +.graph-color-group .clickable-icon { + padding: var(--size-2-2); +} +.graph-color-button-container { + text-align: center; + margin-bottom: 10px; +} +.graph-color-button-container button { + margin: 0; + width: 100%; +} +.graph-color-group.drag-ghost { + position: fixed; + display: flex; + max-width: unset; + border: none; + box-shadow: none; + background-color: var(--background-primary-alt); + padding: 0; + transition: none; + pointer-events: none; +} +.graph-color-group.drag-ghost input[type='text'] { + width: 100%; +} +.graph-color-group.drag-ghost input[type='color'] { + margin-inline-start: 6px; +} +.graph-control-section.mod-color-groups .tree-item-children.is-grabbing .graph-color-groups-container { + padding-bottom: 40px; +} +.graph-controls-button { + display: none; + z-index: 1; +} +.graph-controls-button.mod-close, +.graph-controls-button.mod-reset { + position: absolute; + top: var(--size-4-2); + inset-inline-end: var(--size-4-2); + padding: var(--size-2-2); +} +.graph-controls:not(.is-close) .graph-controls-button.mod-close, +.graph-controls:not(.is-close) .graph-controls-button.mod-reset { + display: flex; +} +.graph-controls-button.mod-reset { + inset-inline-end: 36px; +} +.graph-controls.is-close .graph-controls-button.mod-open { + display: flex; +} +.graph-controls-button.mod-animate { + margin-top: var(--size-4-2); +} +.graph-controls.is-close .graph-controls-button.mod-animate { + display: flex; +} +.setting-item.mod-search-setting .setting-item-info { + display: none; +} +.setting-item.mod-search-setting .setting-item-control .search-input-container { + position: relative; + flex-grow: 1; + margin: 0; +} +.setting-item.mod-search-setting.is-loading .setting-item-control:before { + background-color: var(--interactive-accent); + animation: 1000ms ease-in-out 300ms infinite progress-bar; +} +.graph-control-section-header { + font-weight: var(--font-semibold); + font-size: var(--font-ui-small); + color: var(--text-normal); +} +.graph-control-section { + padding: var(--size-2-3) var(--size-4-3); + border-bottom: 1px solid var(--background-modifier-border); +} +.graph-control-section:last-child { + border-bottom: none; +} +.graph-control-section:last-child .tree-item-children { + padding-bottom: var(--size-4-4); +} +.graph-control-section > .tree-item-self { + padding-inline-start: var(--size-4-4); +} +.graph-control-section .tree-item-children { + margin: 0; + padding: var(--size-4-1) 0; + border-inline-start: none; +} +.graph-control-section.mod-display .setting-item:not(.mod-slider):last-child .setting-item-info { + display: none; +} +.workspace-leaf-content[data-type='outline'] .view-content { + padding-top: var(--size-4-1); +} +.workspace-leaf-content[data-type=all-properties] .view-content, +.workspace-leaf-content[data-type=properties] .view-content { + padding-top: var(--size-4-1); +} +.is-phone .metadata-container, +.workspace-drawer .metadata-container { + --metadata-input-height: calc(var(--font-text-size) * 2.25); + --metadata-padding: 0; + --metadata-divider-width: 1px; + --metadata-divider-color-hover: var(--metadata-divider-color); + --metadata-property-radius: 0px; + --metadata-property-radius-hover: 0px; +} +.is-phone .metadata-properties, +.workspace-drawer .metadata-properties { + --metadata-gap: 0; +} +.is-phone .metadata-property:hover:not(:focus-within), +.workspace-drawer .metadata-property:hover:not(:focus-within) { + box-shadow: none; +} +.workspace > .workspace-split:not(.mod-root) .metadata-container { + --metadata-label-font-size: var(--metadata-sidebar-label-font-size); + --metadata-input-font-size: var(--metadata-sidebar-label-font-size); + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + --metadata-padding: 0; + --metadata-divider-width: 1px; + --metadata-divider-color-hover: var(--metadata-divider-color); + --metadata-property-radius: 0px; +} +.workspace > .workspace-split:not(.mod-root) .metadata-container .metadata-properties { + --metadata-gap: 0; +} +.workspace > .workspace-split:not(.mod-root) .metadata-container .metadata-property:hover:not(:focus-within) { + box-shadow: none; +} +.workspace > .workspace-split:not(.mod-root) .metadata-container .metadata-property-value .clickable-icon { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); +} +.workspace-leaf-content[data-type=file-properties] .metadata-properties-heading { + display: none; +} +.metadata-container { + container-type: inline-size; + container-name: metadata; +} +@container (width < 250px) { + .metadata-property { + flex-wrap: wrap; + } + .metadata-property .metadata-property-key { + width: 100%; + border-bottom: 0; + } + .metadata-property .metadata-property-value { + margin-top: -2px; + padding-inline-start: calc(var(--icon-size) + var(--size-4-1)); + } +} +.modal.mod-publish { + height: var(--modal-height); + width: var(--modal-width); + max-width: var(--modal-max-width-narrow); + position: relative; + overflow: hidden; +} +.modal.mod-publish .modal-content { + margin-bottom: calc(var(--input-height) + var(--size-4-8)); + border-top: var(--border-width) solid var(--background-modifier-border); +} +.modal.mod-publish .modal-button-container { + margin: 0 0 0 calc(var(--size-4-4) * -1); + gap: var(--size-4-2); + position: absolute; + bottom: 0; + width: 100%; +} +.publish-section { + margin-bottom: var(--size-4-1); +} +.publish-change-list { + padding: var(--size-4-2) 0 var(--size-4-2) 0; +} +.site-list-site-id-setting { + margin-top: var(--size-4-4); +} +.publish-section-header-text, +.publish-section-header-toggle-collapsed-button, +.publish-section-header-action { + cursor: var(--cursor); +} +@media (hover: hover) { + .publish-section-header-text:hover, + .publish-section-header-toggle-collapsed-button:hover, + .publish-section-header-action:hover { + color: var(--text-accent-hover); + } +} +.publish-section-header { + border-bottom: 1px solid var(--background-modifier-border); + font-size: var(--font-ui-small); + line-height: 1.1; + color: var(--text-muted); + display: flex; + padding: var(--size-4-2) 0; + align-items: center; +} +.publish-section-header-text { + flex-grow: 1; + font-size: var(--font-ui-medium); + color: var(--text-normal); + line-height: var(--line-height-tight); + font-weight: var(--font-medium); +} +.publish-changes-switch-site { + margin-inline-start: var(--size-4-2); + display: flex; + flex-direction: row; + flex-grow: 1; + font-size: var(--font-ui-small); + position: relative; + gap: var(--size-2-1); + top: 2px; +} +.publish-changes-switch-site .clickable-icon { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + padding: var(--size-2-2); +} +.upload-progress-container { + max-height: 60vh; + overflow: auto; +} +.upload-progress-container.is-finished { + max-height: calc(60vh - 200px); +} +.publish-changes-current-site-name { + margin-inline-start: var(--size-2-3); + text-decoration: underline; +} +.publish-changes-info { + display: flex; + align-items: center; + margin-bottom: 20px; +} +.publish-changes-info button { + margin-inline-end: 0; + margin-inline-start: var(--size-4-2); +} +.publish-changes-info .search-input-container { + margin: 0; + width: 0; + flex: 1 0 auto; +} +.publish-section-header-toggle-collapsed-button { + margin-inline-end: var(--size-4-1); + color: var(--text-faint); + width: 9px; + height: 9px; +} +.publish-section-header-action { + color: var(--text-faint); + margin-inline-start: var(--size-4-3); +} +.publish-upload-item-title { + word-break: break-word; + font-size: var(--nav-item-size); + line-height: var(--line-height-tight); +} +.publish-changes-buttons { + text-align: right; + padding-bottom: var(--size-4-4); +} +.publish-upload-item { + position: relative; + padding: var(--size-4-1) var(--size-4-2); +} +.publish-upload-item .flair { + background-color: transparent; + text-transform: unset; + letter-spacing: normal; + font-size: var(--font-ui-smaller); +} +.publish-upload-item .list-item-part { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + display: flex; + align-items: center; +} +.publish-upload-item:before { + content: ' '; + position: absolute; + top: 0; + left: 0; + width: 0; + height: 100%; + transition: width 150ms ease-in-out; + background-color: rgba(var(--background-modifier-success-rgb), 0.2); + z-index: 0; + border-radius: var(--radius-s); +} +.publish-upload-item.mod-failed { + color: var(--text-error); +} +.publish-upload-item.mod-failed:before { + background-color: rgba(var(--background-modifier-error-rgb), 0.2); +} +.publish-upload-item.mod-completed { + color: var(--text-success); +} +.publish-upload-item.mod-completed > * { + position: relative; +} +.publish-upload-item.mod-completed:before { + width: 100%; +} +.site-list-container { + border-top: 1px solid var(--background-modifier-border); + margin-bottom: var(--size-4-4); +} +.site-list-container .list-item:last-child { + padding-top: var(--size-4-4); +} +.site-list-item-name { + flex-grow: 1; +} +.slug-input { + text-transform: lowercase; +} +.passwords-container { + margin-bottom: var(--size-4-4); +} +.password-item { + border-radius: var(--radius-s); + padding: var(--size-4-2) var(--size-4-4); + margin: var(--size-4-1) 0; +} +@media (hover: hover) { + .password-item:hover { + background-color: var(--background-primary); + } +} +.tree-item.mod-custom-nav.hidden .tree-item-self { + color: var(--text-faint); +} +.tree-item.mod-custom-nav .tree-item-inner { + display: flex; + align-items: center; + position: relative; +} +.tree-list { + padding: var(--size-4-4) 0; +} +.tree-list-header { + border-bottom: 1px solid var(--background-modifier-border); + padding: var(--size-4-2) 0; + line-height: 1.1; + display: flex; + align-items: center; + justify-content: space-between; +} +.tree-list-title { + font-size: var(--font-ui-medium); + font-weight: var(--font-semibold); +} +.tree-list-action { + align-items: center; + display: flex; + color: var(--text-muted); + font-size: var(--font-ui-small); +} +.search-input-container { + position: relative; +} +.search-input-container:before { + top: calc((var(--input-height) - var(--search-icon-size)) / 2); + inset-inline-start: var(--size-4-2); + position: absolute; + content: ''; + height: var(--search-icon-size); + width: var(--search-icon-size); + display: block; + background-color: var(--search-icon-color); + -webkit-mask-image: url("data:image/svg+xml,"); + -webkit-mask-repeat: no-repeat; +} +.search-input-container input { + display: block; + width: 100%; + padding-inline-start: 36px; +} +.search-input-clear-button { + position: absolute; + background: transparent; + border-radius: 50%; + color: var(--search-clear-button-color); + cursor: var(--cursor); + top: 0px; + inset-inline-end: 2px; + bottom: 0px; + line-height: 0; + height: var(--input-height); + width: 28px; + margin: auto; + padding: 0 0; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + transition: color var(--anim-duration-fast) ease-in-out; +} +.search-input-clear-button:after { + content: ''; + height: var(--search-clear-button-size); + width: var(--search-clear-button-size); + display: block; + background-color: currentColor; + -webkit-mask-image: url("data:image/svg+xml,"); + -webkit-mask-repeat: no-repeat; +} +.search-input-clear-button:hover, +.search-input-clear-button:active { + color: var(--text-normal); + transition: color var(--anim-duration-fast) ease-in-out; +} +.search-input-suggest-button { + position: absolute; + left: 0; + top: 0; + color: var(--text-faint); + cursor: var(--cursor); + padding: var(--size-4-1) var(--size-4-2); + opacity: 0; + z-index: 10; +} +@media (hover: hover) { + .search-input-suggest-button:hover { + color: var(--text-muted); + } +} +.search-result-container { + padding: var(--size-4-3) var(--size-4-3) var(--size-4-4); + position: relative; + flex: 1 0 0; +} +.search-result-container.mod-global-search { + overflow-y: auto; + padding-bottom: max(var(--safe-area-inset-bottom), var(--size-4-3)); +} +.search-result-container:before { + content: ' '; + position: absolute; + top: 0; + width: 0; + height: 3px; +} +.search-result-container.is-loading:before { + background-color: var(--interactive-accent); + animation: 1000ms ease-in-out 300ms infinite progress-bar; +} +.search-suggest-info-text { + color: var(--text-muted); + margin-inline-start: 4px; +} +.search-suggest-icon { + padding: 4px; + border-radius: var(--radius-s); +} +@media (hover: hover) { + .search-suggest-icon:hover { + background-color: var(--background-modifier-hover); + } +} +.suggestion-container.mod-search-suggestion { + max-width: unset; + background-color: var(--background-secondary); + border-color: var(--prompt-border-color); + max-height: 600px; +} +.suggestion-container.mod-search-suggestion .suggestion { + padding: var(--size-2-3); + background-color: var(--background-secondary); + border-radius: var(--radius-m); +} +.search-suggest-icon { + align-items: center; + display: flex; +} +.search-suggest-item { + padding: var(--size-4-1) var(--size-4-2); + border-radius: var(--radius-s); +} +.search-suggest-item.suggestion-item { + font-size: var(--font-ui-small); +} +.search-suggest-item.mod-group { + align-items: center; + margin: 0; + color: var(--text-muted); + padding: 0 0 0 var(--size-4-2); + cursor: default; + font-weight: var(--font-semibold); + font-size: var(--font-ui-smaller); + border-radius: 0; +} +.search-suggest-item.mod-group:not(:first-child) { + border-top: 1px solid var(--background-modifier-border); + margin-top: 6px; + padding-top: 6px; + padding-inline-end: 6px; + padding-bottom: 0px; + padding-inline-start: 14px; + margin-inline-end: -6px; +} +.search-suggest-item.mod-group:hover, +.search-suggest-item.mod-group.is-selected { + background-color: initial; +} +@keyframes progress-bar { + 0% { + width: 0; + left: 0; + } + 5% { + width: 0; + left: 0; + } + 50% { + width: 100%; + right: 0; + } + 95% { + width: 0; + right: 0; + } + 100% { + width: 0; + right: 0; + } +} +.search-empty-state { + color: var(--text-faint); + font-size: var(--font-ui-small); + margin: 0 0 var(--size-4-3); + padding-inline-start: var(--size-4-2); +} +.search-result { + word-break: break-word; +} +.search-result:not(.is-collapsed) .search-result-file-title { + color: var(--nav-item-color-active); +} +.search-result-file-matches { + font-size: var(--font-ui-smaller); + line-height: var(--line-height-tight); + background-color: var(--search-result-background); + border-radius: var(--radius-s); + overflow: hidden; + margin: var(--size-4-1) 0 var(--size-4-2); + color: var(--text-muted); + box-shadow: 0 0 0 1px var(--background-modifier-border); +} +.search-result-file-matches:empty { + display: none; +} +.search-info-more-matches { + color: var(--text-faint); +} +.search-result-file-match { + cursor: var(--cursor); + position: relative; + padding: var(--size-4-2) var(--size-4-5) var(--size-4-2) var(--size-4-3); + white-space: pre-wrap; + width: 100%; + border-bottom: 1px solid var(--background-modifier-border); +} +.search-result-file-match:last-child { + border-bottom: none; +} +@media (hover: hover) { + .search-result-file-match:hover { + color: var(--text-normal); + background-color: var(--text-selection); + } + .search-result-file-match:hover .search-result-file-match-replace-button { + display: block; + } +} +.search-result-file-match.mobile-tap { + color: var(--text-normal); + background-color: var(--text-selection); +} +.search-result-file-match-replace-button { + display: none; + position: absolute; + height: auto; + bottom: 5px; + inset-inline-end: 24px; + padding: var(--size-4-1) var(--size-4-2); + color: var(--text-muted); + font-size: var(--font-ui-smaller); +} +@media (hover: hover) { + .search-result-file-match-replace-button:hover { + color: var(--text-normal); + } +} +.search-result-hover-button { + position: absolute; + display: flex; + inset-inline-end: 2px; + border-radius: var(--radius-s); + color: var(--text-faint); + padding: 1px 3px; +} +@media (hover: hover) { + .search-result-hover-button:hover { + opacity: 1; + background-color: var(--background-modifier-hover); + } +} +.search-result-hover-button.mod-top { + top: 2px; +} +.search-result-hover-button.mod-bottom { + bottom: 2px; +} +.search-result-file-matched-text { + color: var(--text-normal); + background-color: var(--text-highlight-bg); +} +.search-info-container { + color: var(--text-muted); + padding: var(--size-4-1) var(--size-4-4) var(--size-4-2); + font-size: var(--font-ui-smaller); +} +.search-info-children { + padding-inline-start: 20px; + border-inline-start: 1px solid var(--background-modifier-border); + margin: 1px 0; +} +.copy-search-result-container { + display: flex; + flex-direction: column; +} +.copy-search-result-textarea { + height: 300px; + max-height: 20vh; + resize: none; +} +.copy-search-result-textarea + .setting-item { + border-top: none; +} +.search-result-file-match-destination-file-container { + display: flex; + flex-wrap: wrap; + margin-top: var(--size-2-3); + gap: var(--size-2-1); +} +.search-result-file-match-destination-file { + display: inline-flex; + background-color: var(--interactive-normal); + border-radius: var(--radius-s); + box-shadow: var(--input-shadow); + color: var(--text-muted); + padding: var(--size-2-2) var(--size-2-3); +} +@media (hover: hover) { + .search-result-file-match:hover .search-result-file-match-destination-file { + background-color: var(--background-secondary); + } + .search-result-file-match:hover .search-result-file-match-destination-file:hover { + background-color: var(--interactive-hover); + box-shadow: var(--input-shadow-hover); + color: var(--text-normal); + } +} +.search-result-file-match-destination-file-icon { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + margin-inline-end: var(--size-4-1); + display: flex; + color: var(--text-faint); +} +.search-result-file-match-destination-file-icon .svg-icon { + align-self: center; +} +.search-result-file-match-destination-file-name { + white-space: pre-wrap; + word-break: break-all; +} +body:not(.is-phone) .workspace-leaf.mod-active .search-result.has-focus .tree-item-self, +body:not(.is-phone) .workspace-leaf.mod-active .search-result-file-match.has-focus { + border-radius: var(--radius-s); + box-shadow: inset 0 0 0 var(--input-border-width-focus) var(--background-modifier-border-focus); +} +.search-results-info { + color: var(--text-muted); + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid var(--background-modifier-border); + margin: 0; + min-width: 0; + padding: 0 var(--size-4-3) var(--size-4-2); + white-space: nowrap; +} +.search-results-info .dropdown { + height: 24px; + box-shadow: none; + background-color: transparent; + font-size: var(--font-ui-smaller); + color: var(--text-muted); + text-align-last: end; + max-width: 60%; + text-overflow: ellipsis; + white-space: nowrap; +} +@media (hover: hover) { + .search-results-info .dropdown:hover { + color: var(--interactive-accent); + } +} +.search-results-info .dropdown option { + color: initial; + text-align: start; +} +.search-results-result-count { + font-size: var(--font-ui-smaller); + font-variant-numeric: tabular-nums; +} +.search-row { + display: flex; + margin: var(--size-4-3) var(--size-4-3) var(--size-4-2); + gap: var(--size-4-1); +} +.search-params { + margin: var(--size-4-1) var(--size-4-4); +} +.search-params input[type='text'], +.search-params input[type='range'] { + width: 100%; + font-size: var(--font-ui-small); +} +.search-params .mod-cta { + margin-top: var(--size-2-3); + width: 100%; +} +.search-params .setting-item { + padding: var(--size-2-3) 0; + border: none; +} +.search-params .setting-item .setting-item-info { + display: flex; + align-items: center; +} +.search-params .setting-item:first-of-type { + border-top: none; +} +.search-params .setting-item.mod-slider { + flex-direction: column; +} +.search-params .setting-item.mod-slider > * { + width: 100%; +} +.search-params .setting-item.mod-slider .setting-item-info { + margin-inline-end: 0; +} +.search-params .setting-item.mod-slider .setting-item-control { + padding-top: var(--size-4-3); +} +.search-params .setting-item.mod-toggle .setting-item-control { + padding-top: 0; +} +.search-params .setting-item.mod-search-setting .setting-item-info { + margin-inline-end: 0; +} +.search-params .setting-item-name { + font-size: var(--font-ui-small); +} +.search-params::-webkit-scrollbar, +.search-params::-webkit-scrollbar-thumb { + display: none; +} +.global-search-input-container { + flex-grow: 1; +} +.more-options-icon { + --icon-size: 10px; + background-color: var(--icon-color); + border-radius: 50%; + color: var(--background-secondary); + display: flex; + margin-inline-start: var(--size-2-3); + opacity: var(--icon-opacity); + padding: 0.5px; +} +.clickable-icon:hover .more-options-icon { + background-color: var(--icon-color-hover); + opacity: var(--icon-opacity-hover); +} +.slides-container { + position: fixed; + top: 0; + inset-inline-start: 0; + height: 100vh; + width: 100vw; + transition: -webkit-transform 0.8s ease 0s; + background-color: #191919; + z-index: var(--layer-slides); + border: none; +} +.slides-container li .collapse-indicator { + display: none; +} +.slides-close-btn { + display: inline-block; + position: absolute; + top: var(--size-4-2); + inset-inline-end: var(--size-4-2); + color: var(--text-faint); + cursor: var(--cursor); + z-index: 1; +} +@media (hover: hover) { + .slides-close-btn:hover { + color: var(--text-muted); + } +} +.reveal input[type='checkbox'] { + width: 24px; + height: 24px; +} +.reveal .task-list-item, +.reveal .footnote-item { + list-style: none; +} +.reveal .task-list-item { + margin-inline-start: -1.5em; +} +.mod-sync-history .modal-content { + height: 100%; +} +.modal-setting-titlebar { + display: flex; + align-items: center; + padding: var(--size-4-2) var(--size-4-4); + border-bottom: 1px solid var(--background-modifier-border); + padding-inline-end: var(--size-4-10); +} +.modal-setting-titlebar .modal-setting-title { + font-size: var(--font-ui-medium); + font-weight: var(--file-header-font-weight); + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.modal-setting-titlebar .modal-setting-titlebar-toggle { + display: flex; + align-items: center; + margin: 0 var(--size-4-3); + gap: var(--size-4-2); +} +.modal-setting-titlebar .modal-setting-titlebar-actions { + display: flex; + align-items: center; + gap: var(--size-4-1); +} +.vault-list-item-desc { + color: var(--text-faint); +} +.vault-list-item-icon { + color: var(--text-muted); + display: flex; +} +.vault-list-item-title { + align-items: center; + display: flex; + gap: var(--size-4-2); + color: var(--text-muted); + user-select: none; + white-space: nowrap; + text-overflow: ellipsis; + margin-bottom: var(--size-4-1); + min-width: 0; + overflow: hidden; +} +.vault-list-item-title.is-connected { + color: var(--text-normal); +} +.sync-status-icon { + display: flex; + align-items: center; + cursor: var(--cursor); +} +.sync-status-icon.mod-success { + color: var(--text-success); +} +.sync-status-icon.mod-working { + color: var(--interactive-accent); +} +.sync-status-icon.mod-error { + color: var(--text-error); +} +.sync-status-icon.mod-spin svg { + animation-name: spin; + animation-duration: 5000ms; + animation-iteration-count: infinite; + animation-timing-function: linear; +} +@media (prefers-reduced-motion: reduce) { + .sync-status-icon.mod-spin svg { + animation: none; + } +} +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.sync-history-list-container { + display: flex; + flex-direction: column; + flex-basis: 250px; + flex-shrink: 0; + border-inline-end: 1px solid var(--background-modifier-border); + background-color: var(--background-secondary); +} +.sync-history-list { + overflow: auto; + padding: var(--size-4-2) var(--size-4-2) 0; + display: flex; + flex: 0 1 auto; + flex-direction: column; +} +.sync-history-list .search-input-container { + width: 100%; +} +.sync-history-list-item-container { + overflow: auto; + flex: 1 1 0; +} +.sync-history-list-item-header { + display: flex; + align-items: center; + padding: var(--size-4-2); + margin-bottom: var(--size-4-1); + border-radius: var(--radius-s); +} +.sync-history-list-item-header:last-child { + margin-bottom: 0; +} +.sync-history-list-item-header.is-active, +.sync-history-list-item-header.is-active:hover { + background-color: var(--interactive-accent); + color: var(--text-on-accent); +} +.sync-history-list-item-header.is-active .u-muted, +.sync-history-list-item-header.is-active:hover .u-muted { + color: var(--text-on-accent); + opacity: 0.8; +} +.sync-history-list-item-header.is-active { + --nav-collapse-icon-color: var(--text-on-accent); +} +@media (hover: hover) { + .sync-history-list-item-header.is-active:hover { + --nav-collapse-icon-color: var(--text-on-accent); + } +} +@media (hover: hover) { + .sync-history-list-item-header.is-active .tree-item-flair:hover { + --nav-collapse-icon-color: var(--text-on-accent); + } +} +@media (hover: hover) { + .sync-history-list-item-header:hover { + background-color: var(--background-modifier-hover); + } +} +.sync-history-list-item-header .mod-avatar-current-user { + background-color: var(--sync-avatar-color-current-user); +} +.sync-history-list-item-header .mod-avatar-color-1 { + background-color: var(--sync-avatar-color-1); +} +.sync-history-list-item-header .mod-avatar-color-2 { + background-color: var(--sync-avatar-color-2); +} +.sync-history-list-item-header .mod-avatar-color-3 { + background-color: var(--sync-avatar-color-3); +} +.sync-history-list-item-header .mod-avatar-color-4 { + background-color: var(--sync-avatar-color-4); +} +.sync-history-list-item-header .mod-avatar-color-5 { + background-color: var(--sync-avatar-color-5); +} +.sync-history-list-item-header .mod-avatar-color-6 { + background-color: var(--sync-avatar-color-6); +} +.sync-history-list-item-header .mod-avatar-color-7 { + background-color: var(--sync-avatar-color-7); +} +.sync-history-list-item-header .mod-avatar-color-8 { + background-color: var(--sync-avatar-color-8); +} +.sync-history-list-item-header .sync-history-list-item-avatar { + border-radius: 50%; + height: var(--size-4-8); + width: var(--size-4-8); + min-width: var(--size-4-8); + margin-inline-end: var(--size-4-2); + display: flex; + justify-content: center; + align-items: center; + text-transform: uppercase; + color: var(--text-on-accent); + border: 1px solid rgba(var(--mono-rgb-100), 0.2); +} +.sync-history-list-item-header.is-active .sync-history-list-item-avatar { + border: 1px solid rgba(255, 255, 255, 0.25); +} +.sync-history-list-item-header:not(.is-active) .sync-history-list-item-avatar.mod-avatar-current-user { + color: var(--text-normal); +} +.sync-history-list-item-header .sync-history-list-item-details { + flex-grow: 1; + cursor: var(--cursor); + font-size: var(--font-ui-small); +} +.sync-history-list-item-header .tree-item-flair { + padding: var(--size-4-1); +} +@media (hover: hover) { + .sync-history-list-item-header .tree-item-flair:hover { + opacity: 1; + background-color: var(--background-modifier-hover); + --nav-collapse-icon-color: var(--text-normal); + } +} +.sync-history-list-item .version-group-container { + position: relative; + margin-bottom: var(--size-4-2); +} +.sync-history-list-item .version-group-container .connecting-line { + position: absolute; + top: 0; + inset-inline-start: var(--size-4-6); + height: 100%; + width: var(--indentation-guide-width); + background-color: var(--indentation-guide-color); +} +.sync-history-list-item .version-group-container .version-group-item { + padding: var(--size-4-1) var(--size-2-2) var(--size-4-1) var(--size-4-12); + margin-bottom: var(--size-2-1); + border-radius: var(--radius-s); + font-size: var(--nav-item-size); + line-height: var(--line-height-tight); + color: var(--nav-item-color); + font-variant: tabular-nums; +} +.sync-history-list-item .version-group-container .version-group-item:hover { + background-color: var(--nav-item-background-hover); + color: var(--nav-item-color-hover); +} +.sync-history-list-item .version-group-container .version-group-item.is-active, +.sync-history-list-item .version-group-container .version-group-item.is-active:hover { + background-color: var(--nav-item-background-active); + color: var(--nav-item-color-active); +} +.sync-history-list-item .version-group-container .version-group-item.is-active .u-muted, +.sync-history-list-item .version-group-container .version-group-item.is-active:hover .u-muted { + color: var(--text-on-accent); + opacity: 0.8; +} +@media (hover: hover) { + .sync-history-list-item .version-group-container .version-group-item:hover { + background-color: var(--background-modifier-hover); + } +} +.sync-history-content-container { + background-color: var(--background-primary); + padding: 0; + height: auto; + display: flex; + flex-direction: column; + width: 0; + flex: 1 1 auto; +} +.sync-history-content-container .modal-button-container { + border-top: 1px solid var(--background-modifier-border); + margin: 0; + padding: 12px; + justify-content: center; +} +.sync-history-content-container textarea { + resize: none; + border: none; + box-shadow: none; +} +.sync-history-content-container textarea:hover, +.sync-history-content-container textarea:active, +.sync-history-content-container textarea:focus { + border: none; + box-shadow: none; +} +.sync-history-content-empty { + display: none; +} +.sync-history-content-container.mod-empty .sync-history-content-empty { + display: block; + text-align: center; + padding: 24px; +} +.sync-history-content { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow: hidden; + padding: 0; +} +.sync-history-content .setting-item:first-child { + padding: var(--size-4-4) var(--size-4-6) var(--size-4-4); + border-bottom: 1px solid var(--background-modifier-border); +} +.sync-history-content .setting-item-info { + flex-grow: 1; + font-weight: var(--bold-weight); + overflow: hidden; +} +.sync-history-content .setting-item-info .setting-item-name { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.sync-history-content .setting-item-control { + justify-content: flex-end; + padding-inline-end: var(--size-4-8); + white-space: nowrap; +} +.sync-history-content .setting-item-control .checkbox-container { + margin-inline-end: var(--size-4-3); +} +.sync-history-preview, +.file-recovery-diff, +.sync-history-diff { + flex: 1 0 0; + padding: var(--size-4-6); + font-size: var(--font-ui-medium); + background-color: var(--background-primary); +} +.sync-history-preview, +.file-recovery-diff, +.sync-history-diff { + overflow: auto; + user-select: text; +} +.sync-history-preview { + --cursor-link: default; + font-family: var(--font-text); + font-size: var(--font-text-size); +} +.sync-history-preview img { + max-width: 100%; +} +.sync-history-desc { + flex-grow: 1; + padding: var(--size-4-6); + overflow-wrap: break-word; + text-align: center; +} +.sync-history-content-container.mod-empty .sync-history-content, +.sync-history-content-container.mod-empty .sync-history-content-buttons { + display: none; +} +.sync-history-content-buttons { + border-top: 1px solid var(--background-modifier-border); + margin: 0; + padding: var(--size-4-3); +} +button.sync-history-button { + background-color: var(--background-secondary); + box-shadow: none; + margin: var(--size-4-1) 0 var(--size-4-2); + min-height: var(--input-height); +} +@media (hover: hover) { + button.sync-history-button:hover { + background-color: var(--background-modifier-hover); + box-shadow: none; + } +} +/* Sync log */ +.modal.mod-sync-log { + height: var(--modal-height); + width: var(--modal-width); + max-width: var(--modal-max-width-narrow); +} +.modal.mod-sync-log .modal-content { + display: flex; + flex-direction: column; + overflow: hidden; + margin: calc(var(--size-4-1) * -1); + padding: var(--size-4-1); +} +.modal.mod-sync-log .sync-log-container { + overflow: auto; + flex-grow: 1; + font-family: var(--font-monospace); + font-size: var(--font-ui-smaller); + color: var(--text-muted); + background-color: var(--background-secondary); + border-radius: var(--radius-s); + border: 1px solid var(--background-modifier-border); + padding: var(--size-4-4); + overflow-y: auto; +} +.modal.mod-sync-log .sync-log-container .list-item { + line-height: var(--line-height-normal); + gap: 0; + margin: 0; + white-space: pre-wrap; +} +.modal.mod-sync-log .sync-log-container .list-item.mod-error { + color: var(--text-error); +} +.sync-file-tree-container { + max-height: calc(min(90vh, var(--modal-max-height)) - 250px); + overflow: auto; +} +.sync-exclude-folder { + display: flex; + margin: var(--size-4-3) 0; +} +.sync-exclude-folder > * { + align-self: center; + display: flex; +} +.sync-exclude-folder-name { + flex-grow: 1; +} +.sync-exclude-folder-remove { + visibility: hidden; + margin-inline-end: 6px; +} +.sync-exclude-folder:hover .sync-exclude-folder-remove { + visibility: visible; +} +.sync-modal-header { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; +} +.sync-modal-buttons > *:not(:last-child) { + margin-inline-end: var(--size-4-2); +} +.workspace-leaf-content[data-type=sync] .view-content { + padding: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} +.recent-changes-container { + padding: var(--size-4-3) var(--size-4-3) var(--size-4-8); + overflow-y: auto; + overflow-x: hidden; + /* Remove indentation for the collapse indicator normally used in Tree views */ + /* Remove indentation of child elements in Tree views */ +} +.recent-changes-container .nav-folder-title { + font-weight: var(--nav-heading-weight); + color: var(--nav-heading-color); +} +.recent-changes-container .nav-folder-title:hover { + font-weight: var(--nav-heading-weight) !important; +} +.recent-changes-container .nav-folder-title .collapse-icon { + display: none; +} +.recent-changes-container .tree-item.nav-folder.is-collapsed .nav-folder-title { + color: var(--nav-heading-color-collapsed); +} +@media (hover: hover) { + .recent-changes-container .tree-item.nav-folder.is-collapsed .nav-folder-title:hover { + color: var(--nav-heading-color-collapsed-hover); + } +} +.recent-changes-container .nav-folder-children { + margin-bottom: var(--size-4-4); +} +.recent-changes-container .nav-file-title, +.recent-changes-container .nav-folder-title { + padding-inline-start: var(--size-4-2); +} +.recent-changes-container .tree-item-children { + border-inline-start: unset; + padding-inline-start: 0; + margin-inline-start: 0; +} +.recent-changes-container .more-button { + justify-content: center; + color: var(--text-faint); +} +.sync-vault-share-container { + overflow: hidden; + display: flex; + flex-direction: column; +} +.sync-vault-shares-list-item-container { + overflow: auto; +} +.tag-pane-tag.is-active { + background-color: var(--interactive-accent); + color: var(--text-on-accent); +} +.tag-pane-tag.is-active .tag-pane-tag-count { + background-color: var(--background-modifier-hover); + color: var(--text-normal); +} +@media (hover: hover) { + .tag-pane-tag.is-active:hover { + background-color: var(--interactive-accent); + color: var(--text-on-accent); + } +} +.tag-container { + font-size: var(--font-ui-small); + padding: var(--size-4-3) var(--size-4-3) var(--size-4-8); + padding-bottom: max(var(--safe-area-inset-bottom), var(--size-4-8)); + overflow: auto; +} +.tree-item-children .tag-pane-tag .tag-pane-tag-parent { + display: none; +} +body:not(.is-phone) .workspace-leaf.mod-active .tree-item.has-focus > .tag-pane-tag { + border-radius: var(--radius-s); + box-shadow: 0 0 0 2px var(--background-modifier-border-focus); +} +.mod-canvas-color-1 { + --canvas-color: var(--canvas-color-1); +} +.mod-canvas-color-2 { + --canvas-color: var(--canvas-color-2); +} +.mod-canvas-color-3 { + --canvas-color: var(--canvas-color-3); +} +.mod-canvas-color-4 { + --canvas-color: var(--canvas-color-4); +} +.mod-canvas-color-5 { + --canvas-color: var(--canvas-color-5); +} +.mod-canvas-color-6 { + --canvas-color: var(--canvas-color-6); +} +.workspace-leaf-content[data-type='canvas'] .view-content { + padding: 0; + position: relative; +} +body { + --canvas-color: 192, 192, 192; +} +body.theme-dark { + --canvas-color: 126, 126, 126; +} +.canvas-wrapper { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + --resizer-size: 20px; + --shadow-stationary: 0px 0.5px 1px 0.5px rgba(0, 0, 0, 0.1); + --shadow-drag: 0px 2px 10px rgba(0, 0, 0, 0.1); + --shadow-border-accent: 0 0 0 2px var(--color-accent); + --zoom-multiplier: 1; + background-color: var(--canvas-background); + overflow: hidden; + contain: strict; + touch-action: none; + user-select: none; +} +.canvas-wrapper.is-dragging { + cursor: grabbing; +} +.canvas-wrapper.is-dragging iframe:not(.is-controlled), +.canvas-wrapper.is-dragging webview { + pointer-events: none; +} +.canvas-wrapper.is-screenshotting { + z-index: 999999; +} +.canvas-wrapper.is-screenshotting .canvas-card-menu, +.canvas-wrapper.is-screenshotting .canvas-controls { + display: none !important; +} +.canvas-wrapper.is-screenshotting * { + pointer-events: none !important; +} +.canvas-mover { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + cursor: grab; +} +.canvas-mover:active { + cursor: grabbing; +} +.canvas-background { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + pointer-events: none; +} +.canvas-background circle { + fill: var(--canvas-dot-pattern); +} +.canvas { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + transform-origin: 0 0; + pointer-events: none; +} +.canvas > * { + pointer-events: initial; +} +.canvas-selection { + pointer-events: none; + position: absolute; + background-color: hsla(var(--color-accent-hsl), 0.1); + border: 2px solid var(--color-accent); + z-index: -1; +} +.canvas-selection.mod-group-selection { + border-width: 3px; + border-radius: 3px; + background-color: hsla(var(--color-accent-hsl), 0.03); + border-color: hsla(var(--color-accent-hsl), 0.3); + pointer-events: initial; +} +.canvas-wrapper:not(.mod-readonly) .canvas-selection.mod-group-selection { + cursor: grab; +} +.canvas-wrapper:not(.mod-readonly) .canvas-selection.mod-group-selection:active { + cursor: grabbing; +} +.canvas-selection.mod-node-highlight { + border-radius: var(--radius-m); +} +.canvas-controls, +.canvas-card-menu { + display: flex; + position: absolute; + z-index: var(--layer-cover); + font-size: var(--font-ui-medium); +} +.canvas-card-menu { + background-color: var(--background-primary); + border-radius: var(--radius-s); + box-shadow: var(--input-shadow); + bottom: var(--size-4-4); + left: 50%; + transform: translatex(-50%); + align-items: stretch; +} +.is-phone .canvas-card-menu, +.mod-toolbar-open .canvas-card-menu { + display: none; +} +.theme-dark .canvas-card-menu { + background-color: var(--background-secondary); +} +.canvas-card-menu .canvas-card-menu-divider { + width: 1px; + background-color: var(--background-modifier-border); +} +.canvas-card-menu .canvas-card-menu-button { + color: var(--text-muted); + height: auto; + display: flex; + line-height: 1; + align-items: center; + justify-content: center; + padding: var(--size-4-2); + --icon-size: var(--icon-xl); + --icon-stroke: var(--icon-xl-stroke-width); +} +@media (hover: hover) { + .canvas-card-menu .canvas-card-menu-button:hover { + color: var(--color-accent); + } +} +.canvas-card-menu .canvas-card-menu-button svg { + fill: var(--background-primary); +} +.theme-dark .canvas-card-menu .canvas-card-menu-button svg { + fill: var(--background-secondary); +} +.canvas-card-menu .canvas-card-menu-button.mod-draggable { + cursor: grab; +} +.canvas-card-menu .canvas-card-menu-button.mod-draggable:active { + cursor: grabbing; +} +.canvas-card-menu .canvas-card-menu-button.mod-draggable svg { + transition: 90ms transform ease-out; +} +@media (hover: hover) { + .canvas-card-menu .canvas-card-menu-button.mod-draggable:hover svg { + transform: translateY(-6px) scale(var(--direction), 1); + filter: drop-shadow(0px 6px 2px rgba(0, 0, 0, 0.1)); + } +} +.canvas-controls { + right: var(--size-4-2); + top: var(--size-4-2); + gap: var(--size-4-2); + display: flex; + flex-direction: column; +} +.canvas-control-group { + border-radius: var(--radius-s); + background-color: var(--background-primary); + border: 1px solid var(--background-modifier-border); + box-shadow: var(--input-shadow); + display: flex; + flex-direction: column; + overflow: hidden; +} +.canvas-control-item { + border-radius: 0; + box-shadow: none; + height: auto; + display: flex; + line-height: 1; + font-size: inherit; + align-items: center; + justify-content: center; + cursor: var(--cursor); + padding: var(--size-4-2); + border-bottom: 1px solid var(--background-modifier-border); + color: var(--text-muted); + background-color: var(--interactive-normal); + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); +} +.canvas-control-item:last-child { + border-bottom: none; +} +@media (hover: hover) { + .canvas-control-item:hover { + color: var(--text-normal); + background-color: var(--interactive-hover); + } +} +.canvas-control-item.is-active { + color: var(--color-accent); +} +.canvas-control-item.is-disabled svg { + color: var(--text-faint); +} +.canvas-control-item svg { + pointer-events: none; +} +.canvas-node-container { + background-color: var(--background-primary); + border-radius: var(--radius-m); + border: 1px solid rgb(var(--canvas-color)); + contain: strict; + display: flex; + flex-direction: column; + overflow: hidden; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + box-shadow: var(--shadow-stationary); +} +.canvas-wrapper:not(.mod-readonly) .canvas-node:not(.is-editing) .canvas-node-container { + cursor: grab; +} +.canvas-wrapper:not(.mod-readonly) .canvas-node:not(.is-editing) .canvas-node-container:active { + cursor: grabbing; +} +.canvas-node-label { + position: absolute; + left: 0; + top: calc(-1 * var(--size-4-1) * var(--zoom-multiplier)); + transform: translate(0, -100%) scale(var(--zoom-multiplier)); + transform-origin: bottom left; + max-width: calc(100% / var(--zoom-multiplier)); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--canvas-card-label-color); + --icon-size: 1em; +} +body:not(.is-ios) .canvas-wrapper.mod-animating .canvas-node-label { + transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); +} +.canvas-node-label svg { + position: relative; + top: 2px; + margin-right: var(--size-4-1); +} +.canvas-node-label.mod-hover-label { + opacity: 0; +} +@media (hover: hover) { + .canvas-node-label:hover { + color: var(--text-muted); + } + .canvas-node:hover .canvas-node-label.mod-hover-label { + opacity: 1; + } +} +@media (hover: none) { + .canvas-node.is-focused .canvas-node-label.mod-hover-label { + opacity: 1; + } +} +.canvas-wrapper.mod-zoomed-out .canvas-node-label { + display: none; +} +.canvas-node-placeholder { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + width: 100%; + height: 100%; + overflow: hidden; + overflow-wrap: anywhere; + padding: var(--size-4-6); + font-size: 32px; + font-weight: var(--font-semibold); +} +.canvas-node-placeholder::after { + border-radius: var(--radius-s); + content: ' '; + display: block; + position: absolute; + top: var(--size-4-4); + right: var(--size-4-4); + bottom: var(--size-4-4); + left: var(--size-4-4); + background-color: rgba(var(--canvas-color), 0.1); +} +.canvas-icon-placeholder { + display: flex; + width: 40%; + height: 40%; +} +.canvas-icon-placeholder svg { + opacity: 0.3; + color: rgb(var(--canvas-color)); + width: 100%; + height: 100%; +} +.canvas-node-interaction-layer { + position: absolute; + width: 0; + height: 0; + pointer-events: none; +} +.canvas-node-interaction-layer > * { + pointer-events: initial; +} +.canvas-node { + --shadow-border-themed-inset: inset 0 0 0 1px rgb(var(--canvas-color)); + --shadow-border-themed: 0 0 0 2px rgb(var(--canvas-color)); + position: absolute; + width: 0; + height: 0; +} +.canvas-node.is-dragging { + pointer-events: none; +} +.canvas-node.is-dragging .canvas-node-container { + box-shadow: var(--shadow-drag); +} +.canvas-node.is-selected, +.canvas-node.is-focused { + touch-action: initial; +} +.canvas-node.is-selected .canvas-node-label, +.canvas-node.is-focused .canvas-node-label { + color: var(--text-muted); +} +.canvas-node.is-selected .canvas-node-container, +.canvas-node.is-focused .canvas-node-container { + border-color: var(--color-accent); + box-shadow: var(--shadow-stationary), var(--shadow-border-accent); +} +.canvas-node.is-selected.is-dragging .canvas-node-container, +.canvas-node.is-focused.is-dragging .canvas-node-container { + box-shadow: var(--shadow-drag), var(--shadow-border-accent); +} +.canvas-node.is-themed .canvas-node-container { + border-color: rgba(var(--canvas-color), 0.7); + box-shadow: inset 0 0 0 1px rgba(var(--canvas-color), 0.7), var(--shadow-stationary); +} +.canvas-node.is-selected.is-themed .canvas-node-container, +.canvas-node.is-focused.is-themed .canvas-node-container { + border-color: rgb(var(--canvas-color)); + box-shadow: var(--shadow-border-themed-inset), var(--shadow-border-themed); +} +.canvas-node.is-selected.is-themed.is-dragging .canvas-node-container, +.canvas-node.is-focused.is-themed.is-dragging .canvas-node-container { + box-shadow: var(--shadow-border-themed-inset), var(--shadow-border-themed); +} +.canvas-node.is-dummy { + cursor: grabbing; +} +.canvas-node.is-dummy .canvas-node-container { + border: 4px solid var(--color-accent); + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15); + background-color: hsla(var(--color-accent-hsl), 0.2); +} +.canvas-node.is-focused:not(.is-dragging) .canvas-node-content-blocker { + display: none; +} +.canvas-node-content-blocker { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: var(--layer-cover); +} +.canvas-node-group:not(.is-focused):not(.is-selected) { + pointer-events: none; +} +.canvas-node-group .canvas-node-resizer { + pointer-events: initial; +} +.canvas-node-group .canvas-node-container { + background-color: transparent; +} +.canvas-node-group .canvas-node-content { + background-color: rgba(var(--canvas-color), 0.07); +} +.canvas-group-label { + position: absolute; + left: 0; + top: calc(-1 * var(--size-4-1) * var(--zoom-multiplier)); + transform: translate(0, -100%) scale(var(--zoom-multiplier)); + transform-origin: bottom left; + max-width: calc(100% / var(--zoom-multiplier)); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + pointer-events: initial; + font-size: 1.5em; + padding: var(--size-4-1) var(--size-4-2); + border-radius: var(--radius-s); + color: var(--text-muted); + background-color: rgba(var(--canvas-color), 0.1); + line-height: 1; +} +body:not(.is-ios) .canvas-wrapper.mod-animating .canvas-group-label { + transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); +} +.canvas-wrapper:not(.mod-readonly) .canvas-group-label { + cursor: grab; +} +.canvas-wrapper:not(.mod-readonly) .canvas-group-label:active { + cursor: grabbing; +} +.canvas-group-label[contenteditable="true"] { + cursor: text; + background-color: var(--background-primary); + box-shadow: 0 0 0 2px rgb(var(--canvas-color)); + color: var(--text-normal); + text-overflow: initial; +} +.canvas-node-group.is-themed .canvas-group-label:not([contenteditable="true"]) { + background-color: rgb(var(--canvas-color)); +} +.canvas-node-group.is-themed .canvas-group-label:not([contenteditable="true"]).mod-foreground-light { + color: var(--text-on-accent); +} +.canvas-node-group.is-themed .canvas-group-label:not([contenteditable="true"]).mod-foreground-dark { + color: var(--text-on-accent-inverted); +} +.canvas-node-content { + width: 100%; + height: 100%; + overflow: hidden; + position: relative; +} +.canvas-node-content.markdown-embed { + border: none; + padding: 0; +} +.canvas-node-content.markdown-embed .inline-title { + cursor: text; +} +.canvas-node-content.markdown-embed > .markdown-embed-link { + display: none; +} +.canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view { + padding: 0 var(--size-4-4); + display: flex; + flex-direction: column; +} +.canvas-wrapper:not(.mod-readonly) .canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view { + user-select: none; + -webkit-user-select: none; +} +.canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view::before, +.canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view::after { + content: " "; + display: block; + min-height: min(calc(var(--canvas-node-height) * 0.1 - 3px), var(--size-4-4)); + max-height: var(--size-4-4); + flex: 1 1 0; +} +.canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer { + flex: 1 0 0; +} +.canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view .callout { + mix-blend-mode: normal; +} +.is-focused .canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view { + transform: translateZ(0); +} +.canvas-node.is-themed .canvas-node-content { + background-color: rgba(var(--canvas-color), 0.07); +} +.canvas-node-content.media-embed { + justify-content: center; + align-items: center; + display: flex; +} +.canvas-node-content.media-embed img, +.canvas-node-content.media-embed video, +.canvas-node-content.media-embed audio { + flex-shrink: 0; + flex-grow: 1; +} +.canvas-node-content.media-embed img:not([width]), +.canvas-node-content.media-embed video, +.canvas-node-content.media-embed audio { + max-width: 100%; +} +.canvas-node-resizer { + position: absolute; + height: calc(var(--resizer-size) * var(--zoom-multiplier)); + width: calc(var(--resizer-size) * var(--zoom-multiplier)); +} +.is-selected .canvas-node-resizer { + pointer-events: none; +} +body.is-mobile .canvas-node-resizer { + --zoom-multiplier: 1; +} +.canvas-wrapper.mod-readonly .canvas-node-resizer { + display: none; +} +.canvas-node-resizer[data-resize='top'] { + left: 0; + right: 0; + width: auto; + top: calc(var(--resizer-size) * var(--zoom-multiplier) * -0.5); + cursor: ns-resize; +} +.canvas-node-resizer[data-resize='bottom'] { + left: 0; + right: 0; + width: auto; + bottom: calc(var(--resizer-size) * var(--zoom-multiplier) * -0.5); + cursor: ns-resize; +} +.canvas-node-resizer[data-resize='left'] { + top: 0; + bottom: 0; + height: auto; + left: calc(var(--resizer-size) * var(--zoom-multiplier) * -0.5); + cursor: ew-resize; +} +.canvas-node-resizer[data-resize='right'] { + top: 0; + bottom: 0; + height: auto; + right: calc(var(--resizer-size) * var(--zoom-multiplier) * -0.5); + cursor: ew-resize; +} +.canvas-node-resizer[data-resize='topright'] { + right: calc(var(--resizer-size) * var(--zoom-multiplier) * -0.5); + top: calc(var(--resizer-size) * var(--zoom-multiplier) * -0.5); + cursor: nesw-resize; +} +.canvas-node-resizer[data-resize='bottomright'] { + right: calc(var(--resizer-size) * var(--zoom-multiplier) * -0.5); + bottom: calc(var(--resizer-size) * var(--zoom-multiplier) * -0.5); + cursor: nwse-resize; +} +.canvas-node-resizer[data-resize='topleft'] { + left: calc(var(--resizer-size) * var(--zoom-multiplier) * -0.5); + top: calc(var(--resizer-size) * var(--zoom-multiplier) * -0.5); + cursor: nwse-resize; +} +.canvas-node-resizer[data-resize='bottomleft'] { + left: calc(var(--resizer-size) * var(--zoom-multiplier) * -0.5); + bottom: calc(var(--resizer-size) * var(--zoom-multiplier) * -0.5); + cursor: nesw-resize; +} +.is-mobile .canvas-node-resizer { + pointer-events: none; +} +.is-mobile .canvas-wrapper:not(.mod-readonly) .canvas-node-interaction-layer .canvas-node-resizer[data-resize='topright'], +.is-mobile .canvas-wrapper:not(.mod-readonly) .canvas-node-interaction-layer .canvas-node-resizer[data-resize='bottomright'], +.is-mobile .canvas-wrapper:not(.mod-readonly) .canvas-node-interaction-layer .canvas-node-resizer[data-resize='topleft'], +.is-mobile .canvas-wrapper:not(.mod-readonly) .canvas-node-interaction-layer .canvas-node-resizer[data-resize='bottomleft'] { + pointer-events: all; + width: 20px; + height: 20px; + display: block; + background-color: var(--background-primary); + border: 2px solid var(--color-accent); + border-radius: 3px; +} +.canvas-node-connection-point { + width: calc(var(--resizer-size) * var(--zoom-multiplier)); + height: calc(var(--resizer-size) * var(--zoom-multiplier)); + position: absolute; + pointer-events: all; + cursor: pointer; +} +.canvas-node-connection-point[data-side='top'] { + top: 1px; + left: calc(50% - var(--resizer-size) * var(--zoom-multiplier) / 2); +} +.canvas-node-connection-point[data-side='right'] { + right: 1px; + top: calc(50% - var(--resizer-size) * var(--zoom-multiplier) / 2); +} +.canvas-node-connection-point[data-side='bottom'] { + bottom: 1px; + left: calc(50% - var(--resizer-size) * var(--zoom-multiplier) / 2); +} +.canvas-node-connection-point[data-side='left'] { + left: 1px; + top: calc(50% - var(--resizer-size) * var(--zoom-multiplier) / 2); +} +.canvas-node-connection-point::after { + content: ' '; + background-color: var(--color-accent); + border-radius: 50%; + border: 3px solid var(--background-modifier-border); + box-sizing: border-box; + display: block; + height: calc(var(--resizer-size) * var(--zoom-multiplier)); + opacity: 0; + position: relative; + width: calc(var(--resizer-size) * var(--zoom-multiplier)); + left: 0; + top: 0; +} +.is-mobile .canvas-node-interaction-layer .canvas-node-connection-point::after, +.canvas-node-resizer:hover .canvas-node-connection-point::after { + opacity: 1; +} +.canvas-snaps { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + overflow: visible; + pointer-events: none; + opacity: 0.6; +} +.canvas-snaps line { + stroke-width: 1px; + stroke: var(--color-accent); +} +.canvas-snaps circle { + fill: var(--color-accent); +} +.canvas-edges { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + overflow: visible; + pointer-events: none; +} +.canvas-edges > * { + pointer-events: initial; +} +.canvas-edges path.canvas-display-path { + pointer-events: none; + stroke-width: calc(2px * var(--zoom-multiplier)); + stroke: rgb(var(--canvas-color)); + fill: none; + transition: stroke-width 100ms ease-out; +} +.canvas-edges path.canvas-interaction-path { + pointer-events: stroke; + stroke-width: calc(24px * var(--zoom-multiplier)); + stroke-linecap: round; + stroke: transparent; + fill: none; + transition: stroke 100ms ease-out; +} +.canvas-wrapper:not(.mod-readonly) .canvas-edges path.canvas-interaction-path { + cursor: grab; +} +.canvas-wrapper:not(.mod-readonly) .canvas-edges path.canvas-interaction-path:active { + cursor: grabbing; +} +.canvas-edges polygon.canvas-path-end { + pointer-events: none; + stroke: rgb(var(--canvas-color)); + fill: rgb(var(--canvas-color)); + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 1px; + transform-box: fill-box; + transform: scale(var(--zoom-multiplier)); + transform-origin: center top; +} +.canvas-edges g.is-focused path.canvas-display-path, +.canvas:not(.is-connecting) .canvas-edges g:hover path.canvas-display-path { + stroke-width: calc(5.5px * var(--zoom-multiplier)); +} +.canvas-edges g.is-focused path.canvas-interaction-path, +.canvas:not(.is-connecting) .canvas-edges g:hover path.canvas-interaction-path { + stroke: rgba(var(--canvas-color), 0.1); +} +.canvas-path-label-wrapper { + position: absolute; + width: fit-content; + height: fit-content; +} +.canvas-path-label { + font-size: calc(var(--font-ui-large) * var(--zoom-multiplier)); + background-color: var(--background-primary); + border-radius: var(--radius-s); + padding: calc(var(--size-2-3) * var(--zoom-multiplier)); + line-height: var(--line-height-tight); + white-space: pre-wrap; + transform: translate(-50%, -50%); + text-align: center; + max-width: calc(17em * var(--zoom-multiplier)); +} +.canvas-path-label.is-editing { + border-color: rgb(var(--canvas-color)); + box-shadow: var(--shadow-stationary), 0 0 0 calc(3px * var(--zoom-multiplier)) rgb(var(--canvas-color)); +} +.canvas-menu-container { + position: absolute; + width: 0; + height: 0; + top: 0; + left: 0; +} +.canvas-menu { + position: relative; + width: fit-content; + height: fit-content; + line-height: 1; + background-color: var(--background-primary); + border: 1px solid var(--background-modifier-border); + border-radius: var(--radius-s); + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.07); + display: flex; + padding: var(--size-2-1); + gap: 1px; +} +.canvas-menu .clickable-icon { + padding: var(--size-2-3) var(--size-4-2); +} +.canvas-submenu { + display: flex; + position: absolute; + top: calc(100% + 5px); + left: 50%; + transform: translateX(-50%); + padding: var(--size-4-2); + border: 1px solid var(--background-modifier-border); + background-color: var(--background-primary); + border-radius: var(--radius-s); + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.07); + overflow: hidden; + gap: 1px; +} +.canvas-submenu .clickable-icon { + padding: var(--size-2-2) var(--size-2-3); +} +.canvas-color-picker-item { + cursor: var(--cursor); + width: 24px; + height: 24px; + margin: 2px; + border-radius: 12px; + border: 2px solid var(--background-primary); + background-color: rgb(var(--canvas-color)); +} +.canvas-color-picker-item.is-active { + box-shadow: 0 0 0 2px rgb(var(--canvas-color)); +} +@media (hover: hover) { + .canvas-color-picker-item:hover { + box-shadow: 0 0 0 2px rgb(var(--canvas-color)); + } +} +.canvas-color-picker-item input[type="color"] { + margin: -4px 0 0 -2px; + --swatch-width: 20px; + --swatch-height: 20px; + opacity: 0; +} +.canvas-color-picker-item.canvas-color-picker-custom:not(.is-active) { + background: conic-gradient(var(--color-red), var(--color-yellow), var(--color-green), var(--color-blue), var(--color-purple), var(--color-red)); +} +@media (hover: hover) { + .canvas-color-picker-item.canvas-color-picker-custom:not(.is-active):hover { + box-shadow: 0 0 0 2px var(--background-modifier-border-hover); + } +} +.canvas-empty-embed-container { + align-items: center; + display: flex; + flex-direction: column; + gap: var(--size-4-6); + justify-content: center; + height: 100%; + padding: var(--size-4-3); + text-align: center; +} +.canvas-empty-embed-action-list { + display: flex; + flex-direction: column; + gap: var(--size-4-3); +} +.canvas-empty-embed-action-list button { + font-size: var(--font-text-size); + padding: var(--size-4-5) var(--size-4-9); +} +.canvas-help { + display: flex; + flex-direction: column; + gap: var(--size-4-3); +} +.canvas-instruction { + display: flex; + justify-content: space-between; +} +.canvas-instruction-desc { + display: flex; + gap: var(--size-4-1); +} +.canvas-instruction-desc .setting-hotkey { + display: inline; + align-self: unset; + padding: var(--size-4-1); + margin: 0; + line-height: 1; +} +.canvas-placeholder-message { + max-width: 70vw; + background: hsla(var(--color-accent-hsl), 0.1); + border-radius: var(--radius-m); + color: var(--color-accent); + font-size: var(--font-ui-large); + line-height: var(--line-height-normal); + padding: var(--size-4-4) var(--size-4-6); + pointer-events: none; + position: absolute; + text-align: center; + transform: translate(-50%, -50%); +} +.canvas-minimap { + width: 100%; + height: 100%; + padding: var(--size-4-1); +} +.inline-embed > .canvas-minimap { + max-height: var(--embed-canvas-max-height); +} +.canvas-minimap rect { + stroke-width: 5px; + stroke: var(--background-modifier-border); + fill: var(--background-modifier-border); + fill-opacity: 0.65; +} +.canvas-minimap rect.is-themed { + stroke: rgb(var(--canvas-color)); + fill: rgb(var(--canvas-color)); + fill-opacity: 0.5; +} +.canvas-minimap path { + stroke: #c0c0c0; + fill: none; +} +.canvas-minimap path.is-themed { + stroke: rgb(var(--canvas-color)); +} +.canvas-cursor { + position: absolute; + width: 1px; + height: 1px; + border: 5px solid var(--color-accent); + border-radius: 5px; + pointer-events: none; +} +.canvas-watermark * { + font-family: var(--font-default) !important; +} +.webviewer-favicon-container { + display: flex; + align-items: center; +} +.webviewer-favicon-container > * { + height: var(--icon-size); + max-width: var(--icon-size); +} +.view-action.mod-webviewer { + --icon-color: var(--icon-color-active); + --icon-color-hover: var(--icon-color-active); +} +.webviewer-container { + height: 100%; + display: flex; + flex-direction: column; +} +.workspace-leaf-content[data-type="browser"] .view-header { + gap: 0; +} +.view-header-always-show { + display: flex !important; +} +.view-header-reload-button { + display: flex; + align-items: center; + --icon-size: var(--icon-s); +} +.webviewer-address { + width: 100%; + display: flex; + margin: 0 2px; +} +.webviewer-address input { + flex-grow: 1; + min-width: 50px; +} +.webviewer-address-container { + padding: 0 var(--size-4-2); +} +.webviewer-address-container::after { + /* Remove the gradient normally at the end of the titleContainerEl */ + background: transparent !important; +} +.webviewer-addressbar-suggestion.suggestion-item { + gap: var(--size-4-2); + align-items: center; +} +.webviewer-addressbar-suggestion.suggestion-item .suggestion-flair-left, +.webviewer-addressbar-suggestion.suggestion-item .suggestion-icon:first-child { + color: var(--text-muted); + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + display: flex; + min-width: var(--icon-s); +} +.webviewer-addressbar-suggestion.suggestion-item .suggestion-flair-left img, +.webviewer-addressbar-suggestion.suggestion-item .suggestion-icon:first-child img { + height: var(--icon-size); + max-width: var(--icon-size); +} +.webviewer-addressbar-suggestion.suggestion-item .suggestion-icon:last-child:empty { + display: none; +} +.webviewer-addressbar-suggestion.suggestion-item > .suggestion-content { + align-items: baseline; + flex-direction: row; + flex-grow: 1; +} +.webviewer-addressbar-suggestion.suggestion-item > .suggestion-content > .suggestion-title { + max-width: 75%; + flex-shrink: 0; + overflow: hidden; + text-overflow: ellipsis; + text-wrap: nowrap; + font-size: var(--font-ui-medium); +} +.webviewer-addressbar-suggestion.suggestion-item > .suggestion-content > .suggestion-url { + overflow: hidden; + text-overflow: ellipsis; + text-wrap: nowrap; + font-size: var(--font-ui-small); + color: var(--text-muted); +} +.webviewer-addressbar-suggestion.suggestion-item > .suggestion-content .suggestion-title + .suggestion-url { + margin-left: var(--size-4-2); +} +.webviewer-addressbar-suggestion.suggestion-item > .suggestion-content .suggestion-title:empty + .suggestion-url { + margin-left: 0; +} +.view-content.webviewer-content { + padding: 0; +} +.webviewer-content { + border-top: 1px solid var(--divider-color); + height: 100%; + display: flex; + flex-direction: column; +} +.webviewer-content webview { + flex-grow: 1; + width: 100%; +} +.webviewer-content .reader-mode-content { + overflow-y: auto; +} +.webviewer-content .reader-mode-content.is-readable-line-width .markdown-preview-sizer { + max-width: var(--file-line-width); + margin-left: auto; + margin-right: auto; +} +.webviewer-content .markdown-preview-view .external-link { + /* Hide the external link icon */ + background-image: none; + padding-right: 0; +} +.webviewer-content .error-notice { + max-width: var(--file-line-width); + margin: 25% auto 0; + padding: var(--file-margins); +} +/* History View */ +.webviewer-history-view-item { + text-wrap: nowrap; + overflow: hidden; +} +/* Settings */ +textarea.webviewer-adblock-lists { + flex-grow: 1; +} +.list-container.mod-manage-workspaces { + margin-top: var(--size-4-4); + padding-top: var(--size-4-1); + border-top: var(--border-width) solid var(--divider-color); +} +.list-container.mod-manage-workspaces:empty { + display: none; +} +.footnotes-view .footnote { + background-color: var(--footnote-input-background); + border-radius: var(--footnote-radius); + display: flex; + gap: var(--footnote-gap); + padding-inline: var(--footnote-padding-inline); + padding-block: var(--footnote-padding-block); +} +.footnotes-view .footnote-list-item { + border-bottom: var(--footnote-divider-width) solid var(--footnote-divider-color); +} +.footnotes-view .footnote-list-item.is-editing { + border-color: var(--footnote-divider-color-active); +} +.footnotes-view .footnote-list-item.is-editing > .footnote { + background-color: var(--footnote-input-background-active); + box-shadow: 0 0 0 var(--input-border-width-focus) var(--background-modifier-border-focus); +} +.footnotes-view .footnote-list-item:last-child { + border-bottom-width: 0; +} +.footnotes-view .footnote-id { + color: var(--footnote-id-color); + font-size: var(--footnote-size); + font-variant-numeric: tabular-nums; + line-height: var(--footnote-line-height); +} +.footnotes-view .footnote-id::after { + content: var(--footnote-id-delimiter); +} +.footnotes-view .footnote-id.mod-no-occurrences { + color: var(--footnote-id-color-no-occurrences); +} +.footnotes-view .footnote-content { + width: 100%; + cursor: text; +} +.footnotes-view .footnote-content .markdown-preview-view, +.footnotes-view .footnote-content .markdown-source-view { + padding: 0; + font-size: var(--footnote-size); + line-height: var(--footnote-line-height); +} +.footnotes-view .markdown-embed { + padding: 0; + border: none; +} +.footnotes-view .inline-title { + display: none; +} +.starter.is-hidden-frameless .titlebar { + display: block; +} +.starter { + -webkit-user-select: none; + padding-top: 0! important; +} +.starter .titlebar { + background-color: transparent; + border: none; +} +.starter .titlebar-inner .titlebar-text { + display: none; +} +.starter-screen { + display: flex; + flex-direction: column; + background-color: var(--background-primary); + width: 100%; + height: 100%; +} +.starter-screen-inner { + flex-grow: 1; + display: flex; + height: calc(100% - 24px); +} +.splash { + align-items: center; + background-color: var(--background-primary); + display: flex; + flex-direction: column; + justify-content: center; + flex: 1 1 auto; + text-align: center; + padding: 36px 0 0; +} +.splash-brand { + flex: 0 0 content; + padding: 20px 0; +} +.splash-brand-logo-text { + margin-top: 20px; + color: white; +} +.splash-brand-version { + color: var(--text-muted); + margin-top: 8px; + font-size: var(--font-ui-small); +} +.help-options-container { + flex: 1 0 0; + overflow: auto; + width: 100%; + max-width: 82%; + text-align: start; + padding: var(--size-4-6) 0; +} +.help-options-container::-webkit-scrollbar { + display: none; +} +.help-options-container .setting-item-description { + max-width: 30em; + padding-inline-end: 12px; +} +.help-options-container .setting-icon .svg-icon { + stroke-width: 1px; + --icon-size: 48px; + color: var(--text-faint); +} +.open-vault-options-container { + flex: 1 0 0; + overflow: auto; + width: 100%; + position: relative; +} +.open-vault-options-container::-webkit-scrollbar { + display: none; +} +.open-vault-options { + background-color: var(--background-primary); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 12px 36px; + text-align: start; + overflow-y: auto; + display: flex; + flex-direction: column; +} +.open-vault-options input[type='text'] { + width: 150px; +} +.open-vault-options .setting-item-control button { + width: 100px; +} +.open-vault-options .back-button { + display: flex; + align-items: center; + -webkit-app-region: no-drag; + color: var(--text-muted); + user-select: none; + cursor: var(--cursor); +} +@media (hover: hover) { + .open-vault-options .back-button:hover { + color: var(--text-normal); + } +} +.open-vault-options .setting-item-description { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} +.open-vault-options.mod-login { + justify-content: flex-start; +} +.open-vault-options.mod-login input[type='text'] { + width: 250px; +} +.open-vault-options .button-container { + margin-top: var(--size-4-3); + text-align: center; +} +.quick-start-container { + margin-bottom: 10px; +} +.quick-start-container button { + font-size: var(--font-ui-medium); + padding: 8px 60px; +} +.quick-start-container + .setting-item { + border-top: none; +} +.open-folder-input[type='text'] { + font-size: var(--font-ui-small); + width: 200px; + height: 28px; +} +.browse-folder-button { + margin-left: 10px; +} +.open-folder-button { + margin-top: 14px; + padding: 6px 36px; +} +.starter .notice { + top: 38px; +} +.setting-item.mod-change-language { + -webkit-app-region: no-drag; +} +.setting-item.mod-change-language .setting-item-info { + flex-grow: 0; +} +.setting-item.mod-change-language .setting-item-control { + flex-grow: 1; + justify-content: flex-start; +} +.setting-item.mod-change-language select { + width: 100%; + max-width: 100%; +} +.setting-item.mod-change-language .setting-item-name { + color: var(--text-faint); + position: relative; + top: 3px; + cursor: var(--cursor); +} +@media (hover: hover) { + .setting-item.mod-change-language .setting-item-name:hover { + color: var(--text-muted); + } +} +.setting-icon { + display: flex; + color: var(--text-muted); + margin-right: 24px; +} +.recent-vaults { + background-color: var(--background-secondary); + border-right: 1px solid var(--background-modifier-border); + padding: var(--size-4-8) 0 0 0; + flex-shrink: 0; + width: 280px; + overflow-y: hidden; + height: 100%; +} +.recent-vaults-list { + overflow-y: auto; + height: 100%; + padding: var(--size-4-2); + display: flex; + flex-direction: column; +} +.recent-vaults-list:after { + -webkit-app-region: drag; + display: block; + content: ' '; + width: 100%; + height: 100px; + flex-grow: 1; +} +.recent-vaults-list-item { + -webkit-app-region: no-drag; + border-radius: var(--radius-s); + margin-bottom: var(--size-4-1); + padding: var(--size-4-2) var(--size-4-6) var(--size-4-2) var(--size-4-3); + cursor: var(--cursor); + position: relative; +} +@media (hover: hover) { + .recent-vaults-list-item:hover { + background-color: var(--background-modifier-hover); + color: var(--text-on-accent); + } +} +.recent-vaults-list-item-name, +.recent-vaults-list-item-path { + word-break: break-all; +} +.recent-vaults-list-item-name { + border-radius: 2px; + border: 1px solid transparent; +} +.recent-vaults-list-item-name[contenteditable] { + cursor: text; + border-color: var(--interactive-accent); + background-color: var(--background-modifier-hover); + font-size: 0.9em; + padding: 0 var(--size-4-1); +} +.recent-vaults-list-item-path { + font-size: var(--font-ui-smaller); + color: var(--text-muted); + line-height: 16px; +} +.recent-vaults-list-item-option-button { + position: absolute; + top: var(--size-4-3); + right: var(--size-4-1); + color: var(--text-faint); + width: 30px; + height: 30px; + line-height: 36px; + text-align: center; + transition: background-color 200ms ease-in-out; +} +.recent-vaults-list-item-option-button:hover { + color: var(--text-normal); +} +:root { + --safe-area-inset-top: env(safe-area-inset-top); + --safe-area-inset-bottom: env(safe-area-inset-bottom); + --safe-area-inset-left: env(safe-area-inset-left); + --safe-area-inset-right: env(safe-area-inset-right); + --keyboard-height: 0px; +} +body.emulate-mobile { + --safe-area-inset-top: 59px; + --safe-area-inset-bottom: 34px; + --safe-area-inset-left: 0px; + --safe-area-inset-right: 0px; +} +body.emulate-mobile button, +body.emulate-mobile input, +body.emulate-mobile .suggestion-bg, +body.emulate-mobile .text-icon-button, +body.emulate-mobile .clickable-icon { + touch-action: manipulation; +} +body.hide-cursor { + caret-color: transparent !important; +} +body.is-screenshotting *::-webkit-scrollbar { + display: none; +} +@media (max-width: 380px) { + .is-phone.is-mobile { + --mobile-sidebar-min-width: 200px; + --mobile-sidebar-width: 100vw; + --mobile-sidebar-radius: 0; + } +} +.is-mobile { + --ribbon-width: 58px; + --view-header-height: 50px; + --bases-header-height: 50px; + --mobile-toolbar-height: 40px; + --system-status-background: var(--background-primary); + --caret-color: var(--text-accent); + --font-ui-smaller: calc(var(--font-text-size) * 0.8); + --font-ui-small: calc(var(--font-text-size) * 0.937); + --font-ui-medium: var(--font-text-size); + --font-ui-large: calc(var(--font-text-size) * 1.2); + --icon-s: 18px; + --icon-m: 20px; + --icon-l: 24px; + --icon-opacity: 1; + --icon-opacity-hover: 0.65; + --input-height: 40px; + --input-shadow: none; + --input-shadow-hover: none; + --input-font-weight: var(--font-medium); + --input-border-width: 0px; + --interactive-normal: var(--background-secondary); + --interactive-hover: var(--background-modifier-border); + --mobile-sidebar-width: 88vw; + --mobile-sidebar-width-pinned: 320px; + --mobile-sidebar-min-width: 320px; + --mobile-sidebar-max-width: 500px; + --mobile-sidebar-background: var(--background-primary); + --mobile-sidebar-radius: var(--radius-xl); + --nav-item-padding: var(--size-2-3) var(--size-4-2) var(--size-2-3) var(--size-4-6); + --nav-item-color: var(--text-normal); + --prompt-input-height: 48px; + --search-clear-button-size: 16px; + --search-icon-size: 20px; + --settings-home-background: var(--background-secondary); + --slider-thumb-border-width: 0.5px; + --slider-thumb-height: 24px; + --slider-thumb-width: 24px; + --slider-thumb-y: -9px; + --slider-track-height: 6px; + --swatch-shadow: none; + --swatch-height: 40px; + --swatch-width: 40px; + --swatch-radius: 40px; + --toggle-width: 48px; + --toggle-radius: 26px; + --toggle-thumb-radius: 26px; + --toggle-thumb-height: 26px; + --toggle-thumb-width: 26px; + --file-margins: var(--size-4-2) var(--size-4-6); + --background-modifier-cover: rgba(0, 0, 0, 0.25); + --background-modifier-form-field: var(--interactive-normal); + --background-modifier-form-field-hover: var(--interactive-hover); + --keyboard-background: var(--background-primary); + --checkbox-size: 17px; + --cursor: pointer; +} +.is-mobile.theme-dark { + --color-base-00: #000; + --color-base-10: #111; + --color-base-20: #1e1e1e; + --tag-background: hsla(var(--interactive-accent-hsl), 0.2); + --search-result-background: var(--background-secondary); + --background-modifier-form-field: var(--background-modifier-border); + --background-modifier-cover: rgba(0, 0, 0, 0.5); + --background-modifier-hover: rgba(var(--mono-rgb-100), 0.15); + --settings-home-background: var(--background-primary); + --mobile-sidebar-background: var(--background-secondary); + --background-modifier-message: var(--background-secondary); + --interactive-normal: var(--background-modifier-border); + --interactive-hover: var(--background-modifier-border-hover); +} +.is-tablet { + --nav-item-padding: var(--size-2-3) var(--size-4-2) var(--size-2-3) var(--size-4-6); + --tab-font-size: var(--font-ui-smaller); + --system-status-background: var(--titlebar-background); +} +.is-tablet.theme-dark { + --titlebar-background: var(--background-primary); + --titlebar-background-focused: var(--background-primary); + --modal-background: var(--background-secondary); +} +.is-phone { + --border-width: 0.5pt; + --divider-width: 0.5pt; + --tab-outline-width: 0.5pt; + --modal-header-height: 44px; + --modal-community-sidebar-width: 100%; + --metadata-label-width: 7.5em; + --nav-item-size: var(--font-ui-medium); +} +body.is-mobile { + position: relative; + height: 100vh; + width: 100vw; + -webkit-text-size-adjust: 100%; +} +body.is-mobile .app-container { + max-height: calc(100vh - var(--keyboard-height)); +} +body.is-mobile.keyboard-animating .app-container { + max-height: 100vh; +} +.is-mobile .markdown-source-view.mod-cm6 .cm-gutters { + margin-inline-start: -18px; +} +.is-mobile .workspace > .mod-root { + background-color: var(--system-status-background); + padding-top: var(--safe-area-inset-top); + padding-left: var(--safe-area-inset-left); +} +.is-mobile .workspace-split.mod-left-split, +.is-mobile .workspace-split.mod-right-split { + display: none; +} +.is-mobile .tree-item .tree-item-self { + padding-inline-end: var(--size-4-2); +} +.is-mobile input[type='text'] { + width: 100%; +} +.is-mobile .markdown-rendered pre:not(:hover) > button.copy-code-button { + display: block; +} +.is-mobile .markdown-rendered button.copy-code-button { + width: auto; +} +.is-mobile .empty-state-action-list { + margin-top: 40px; +} +.is-mobile .empty-state-action { + background-color: var(--background-primary-alt); + margin: 12px 0; + padding: 6px 30px; + border-radius: var(--button-radius); + text-align: center; +} +.is-mobile .form-field { + width: 100%; + margin: 1em 0; +} +.is-mobile .form-field label { + font-weight: var(--font-bold); +} +.is-mobile .form-field input { + width: 100%; +} +.is-mobile .markdown-rendered .heading-collapse-indicator { + margin-inline-start: -20px; +} +.is-mobile .message-container { + text-align: center; + margin: 0 auto; +} +.is-mobile .search-result-file-match-replace-button { + display: block; + position: relative; + padding: 6px 10px; + inset-inline-end: 0; + margin-top: var(--size-4-3); + background-color: var(--settings-home-background); +} +.is-mobile .suggestion-flair { + position: relative; + margin-inline-end: 6px; + inset-inline-start: 0; + top: 0; +} +.is-tablet button:not(.clickable-icon) { + padding: var(--size-4-1) var(--size-4-5); +} +.suggestion-bg { + display: none; +} +body.is-phone .suggestion-bg { + display: block; + z-index: var(--layer-modal); +} +.mobile-image-viewer { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + background-color: var(--background-modifier-cover); + display: flex; + justify-content: center; + overflow: hidden; + z-index: var(--layer-modal); +} +.mobile-image-viewer img { + align-self: center; + max-height: 100%; + max-width: 100%; +} +.mod-fade { + --scroll-fade-offset-right: 0; + --scroll-fade-offset-left: 0; +} +.mod-fade:not(.mod-at-start):before { + content: ' '; + pointer-events: none; + position: absolute; + top: 0; + z-index: 1; + left: var(--scroll-fade-offset-left); + width: 30px; + height: 100%; + background: linear-gradient(to right, var(--background-primary), transparent); +} +.mod-fade:not(.mod-at-end):after { + content: ' '; + position: absolute; + pointer-events: none; + top: 0; + right: var(--scroll-fade-offset-right); + width: 30px; + height: 100%; + background: linear-gradient(to right, transparent, var(--background-primary)); +} +.is-phone { + --metadata-property-box-shadow: none; +} +.is-phone .bases-header .query-toolbar-item { + --bases-toolbar-label-display: none; +} +.is-phone .mod-views, +.is-phone .mod-properties { + --menu-padding: var(--size-4-2) 0; +} +.is-phone .mod-views .suggestion-group, +.is-phone .mod-properties .suggestion-group, +.is-phone .mod-views .bases-toolbar-menu-container-header, +.is-phone .mod-properties .bases-toolbar-menu-container-header, +.is-phone .mod-views .bases-toolbar-menu-form, +.is-phone .mod-properties .bases-toolbar-menu-form { + padding-left: var(--size-4-3); + padding-right: var(--size-4-3); +} +.is-phone .mod-views .search-input-container, +.is-phone .mod-properties .search-input-container { + width: calc(100% - var(--size-4-6)); + margin-left: auto; + margin-right: auto; + border: none; +} +.is-phone .query-toolbar-menu { + background-color: var(--background-secondary); + border: none; + width: calc(100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)); + min-width: unset; + position: fixed; + margin-left: var(--safe-area-inset-left); + margin-right: var(--safe-area-inset-right); + border-radius: var(--radius-l) var(--radius-l) 0 0; + bottom: 0; + left: 0; + right: 0; + margin: 0 auto; +} +.is-phone .query-toolbar-menu.mod-filters { + height: calc(100vh - var(--safe-area-inset-top)); +} +.is-phone .query-toolbar-menu.mod-filters .modal-header { + display: block; +} +.is-phone .query-toolbar-menu .menu-scroll { + max-height: calc(100vh - var(--view-header-height) - var(--safe-area-inset-top)); +} +.is-phone .bases-toolbar-menu-container { + --bases-property-menu-item-radius: 0; + max-width: 100%; +} +.is-phone .bases-toolbar-menu-container .bases-toolbar-menu-container-header { + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); +} +.is-phone .bases-toolbar-menu-container input[type=search] { + border: 0; + box-shadow: none; + border-radius: var(--radius-l); + background-color: var(--background-modifier-form-field); +} +.is-phone .bases-toolbar-menu-container .close-icon { + display: none; +} +.is-phone .filter-row > .conjunction { + display: none; +} +.is-phone .bases-query-container .conjunction.dropdown { + width: 100%; +} +.is-phone .bases-query-container .filter-lhs-container { + width: 100%; + border-bottom: 1px solid var(--menu-background); +} +.is-phone .bases-query-container .filter-rhs-container { + border-width: 0; +} +.is-phone .bases-query-container .filter-rhs-container:empty { + display: none; +} +.is-phone .bases-query-container .filter-expression { + background-color: var(--interactive-normal); + flex-wrap: wrap; + box-shadow: none; +} +.is-phone .bases-query-container .combobox-button { + padding-inline-start: var(--size-4-2); + border-width: 0; +} +.is-phone .bases-query-container .filter-group .filter-row .filter-operator { + border-width: 0; +} +.is-mobile { + --bases-cards-scale: 0.85; +} +.is-mobile .query-toolbar-section { + padding: var(--size-4-1); +} +.is-mobile .view-content > .bases-view { + overscroll-behavior: none; +} +.is-mobile .workspace-leaf-content[data-type=bases-query] .bases-header { + --bases-header-padding-start: var(--size-4-4); + --bases-header-padding-end: var(--size-4-4); +} +.is-mobile .bases-header { + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); +} +.is-mobile .bases-header .query-toolbar { + column-gap: var(--size-4-2); +} +.is-mobile .action-row { + padding: var(--size-4-2) var(--size-4-3); +} +.is-mobile .document-search-container { + margin-inline-end: 0; + margin-inline-start: 0; + padding: var(--size-4-4) var(--size-4-2); + border-bottom: var(--border-width) solid var(--background-modifier-border); +} +.is-mobile .document-search-container.mod-replace-mode { + height: auto; +} +.is-mobile .document-search, +.is-mobile .document-replace { + height: auto; + padding: 0; +} +.is-mobile .document-search input, +.is-mobile .document-replace input { + flex-grow: 1; +} +.is-mobile .document-search .document-search-buttons, +.is-mobile .document-replace .document-search-buttons, +.is-mobile .document-search .document-replace-buttons, +.is-mobile .document-replace .document-replace-buttons { + display: flex; + flex-grow: 1; + align-items: stretch; +} +.is-phone .document-replace-buttons, +.is-phone .document-search-buttons { + gap: var(--size-2-1); + padding-inline-start: var(--size-4-1); +} +.is-phone .document-search, +.is-phone .document-replace { + gap: var(--size-4-1); +} +.mobile-onboarding { + --nav-height: 80px; + --content-height: calc(100vh - var(--safe-area-inset-top)); + --input-border-width: 1px; + max-height: var(--content-height); + margin-top: var(--safe-area-inset-top); + overflow-x: hidden; + overflow-y: auto; + scrollbar-gutter: stable; +} +.mobile-onboarding .logo { + color: var(--interactive-accent); +} +.mobile-onboarding h1 { + font-size: var(--h1-size); +} +.mobile-onboarding .list-heading { + color: var(--text-normal); + font-size: var(--font-ui-medium); + font-weight: var(--font-semibold); + line-height: var(--line-height-normal); + margin-top: 1.5em; + margin-bottom: var(--size-4-2); +} +.mobile-onboarding p { + font-size: var(--font-ui-medium); + margin-block: 0.8em; +} +.mobile-onboarding input { + background-color: transparent; +} +.mobile-onboarding .form-field-help { + color: var(--text-faint); + font-size: var(--font-ui-small); + margin: var(--size-2-3) 0; +} +.mobile-onboarding .button-container { + display: flex; + flex-direction: column; + gap: var(--size-4-4); + width: 100%; +} +.mobile-onboarding .back-button.mobile-tap { + opacity: 0.5; +} +.mobile-onboarding .status-text { + font-size: var(--font-ui-small); + padding: 0 var(--size-4-6); +} +.mobile-onboarding .mod-version { + opacity: 0.3; + order: 1; + text-align: center; + font-size: var(--font-ui-smaller); + margin: var(--size-4-2); +} +.mobile-onboarding-feature-table { + display: flex; + flex-direction: column; + font-size: var(--font-ui-small); + margin-top: var(--size-4-4); +} +.mobile-onboarding-feature-table .feature-row { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.mobile-onboarding-feature-table .feature-row:not(:last-child) { + border-bottom: var(--input-border-width) solid var(--background-modifier-border); +} +.mobile-onboarding-feature-table .feature-cell { + display: flex; + align-items: center; + gap: var(--size-4-1); + padding: var(--size-4-1) 0; +} +.mobile-onboarding-feature-table .feature-cell.mod-value { + color: var(--text-muted); + font-size: var(--font-ui-smaller); +} +.mobile-onboarding-feature-table .feature-cell.is-enabled { + color: var(--text-success); + font-size: var(--font-ui-smaller); +} +.mobile-onboarding-screen { + display: flex; + flex-direction: column; + background-color: var(--background-primary); + margin: 0 auto; + max-width: 540px; + min-height: var(--content-height); + padding: var(--size-4-8); + padding-top: var(--nav-height); +} +.mobile-onboarding-screen footer { + order: 1; + margin-top: var(--size-4-2); + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; +} +.mobile-onboarding-radio-group { + display: flex; + flex-direction: column; + gap: var(--size-4-4); + margin: var(--size-4-2) 0; +} +.mobile-onboarding-radio-option { + display: flex; + padding: var(--size-4-3); + gap: var(--size-4-2); + border-radius: var(--radius-m); + border: 2px solid var(--background-modifier-border); +} +.mobile-onboarding-radio-option:focus { + border-color: var(--background-modifier-border-focus); +} +.mobile-onboarding-radio-option.is-selected { + border-color: var(--interactive-accent); +} +.mobile-onboarding-radio-option-title { + display: flex; + font-size: var(--font-ui-medium); + font-weight: var(--font-semibold); +} +.mobile-onboarding-radio-option-title .flair { + align-self: baseline; + color: var(--text-success); + display: inline-block; + padding: var(--size-4-1) var(--size-4-2); + margin-left: auto; + border-radius: var(--radius-l); + background-color: rgba(var(--color-green-rgb), 0.3); +} +.mobile-onboarding-radio-option-desc { + font-size: var(--font-ui-small); + margin-top: var(--size-4-5); + padding-inline-start: 0; +} +.mobile-onboarding-radio-button { + flex-shrink: 0; + width: 20px; + height: 20px; + position: relative; + border: 2px solid var(--background-modifier-border); + border-radius: 50%; +} +.mobile-onboarding-radio-button::after { + top: 5px; + left: 5px; + position: absolute; + content: ' '; + height: 6px; + width: 6px; + border-radius: 50%; +} +.mobile-onboarding-radio-option.is-selected .mobile-onboarding-radio-button { + background-color: var(--interactive-accent); +} +.mobile-onboarding-radio-option.is-selected .mobile-onboarding-radio-button::after { + background-color: white; +} +.mobile-onboarding-navbar { + display: flex; + align-items: center; + background-color: var(--background-primary); + padding-left: var(--size-4-10); + height: var(--nav-height); + position: fixed; + top: var(--safe-area-inset-top); + z-index: var(--layer-cover); + width: 100%; +} +.mobile-onboarding-navbar .back-button { + padding: var(--size-4-2) 0; +} +.is-mobile .view-header { + border-top: none; + height: var(--view-header-height); +} +.is-mobile .workspace-split.mod-root > .workspace-leaf:first-of-type .workspace-leaf-content, +.is-mobile .workspace-split.mod-root > .workspace-leaf:last-of-type .workspace-leaf-content { + border-radius: 0; +} +.is-mobile .view-header-title { + padding-inline-end: 0px; +} +.is-mobile .inline-title { + padding-top: 0.25em; +} +.is-mobile .view-header-title-container { + height: 50px; +} +.is-mobile .view-header-title-container:after { + display: none; +} +.is-mobile .view-header-left { + flex: 1 0 0; + align-items: center; + display: flex; +} +.is-mobile .view-actions { + flex: 1 0 0; + justify-content: flex-end; + padding: var(--size-4-2) 0; + gap: var(--size-2-1); +} +.is-mobile .view-header-nav-buttons, +.is-mobile .view-header .view-action { + --icon-color: var(--interactive-accent); + --icon-color-hover: var(--interactive-accent); + --icon-color-active: var(--interactive-accent-hover); + --icon-color-focus: var(--interactive-accent-hover); + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); +} +.is-mobile .view-action { + margin: auto 0; + width: auto; +} +.is-tablet .mod-left-split-toggle { + display: none; +} +.is-phone .view-header { + padding: 0 var(--size-4-4); +} +.is-phone .view-header-title-parent:not(:empty), +.is-phone .view-header-title { + display: block; + text-overflow: ellipsis; + opacity: 0.7; +} +.is-phone .view-header-title-parent:not(:empty):focus-within, +.is-phone .view-header-title:focus-within { + text-overflow: unset; + opacity: 1; +} +.is-mobile .hotkey-list-container .setting-item { + flex-direction: column; + align-items: stretch; +} +.is-mobile .hotkey-list-container .setting-item-control { + margin-top: 10px; + align-items: flex-start; +} +.is-mobile .hotkey-list-container .setting-command-hotkeys { + flex: 1 0 auto; +} +.is-mobile .hotkey-list-container .setting-hotkey { + align-self: flex-start; +} +.is-tablet .horizontal-tab-nav-item, +.is-tablet .vertical-tab-nav-item { + padding: var(--size-4-2) var(--size-4-3); +} +.is-tablet .modal.mod-settings .vertical-tab-header { + max-width: none; +} +.is-tablet.theme-dark .community-item, +.is-tablet.theme-dark .vertical-tab-content { + background-color: var(--background-secondary); +} +.is-phone .extra-setting-button.mod-hotkeys { + display: none; +} +.is-phone .setting-item-heading { + margin-top: 1.5em; +} +.is-phone .setting-item-heading .setting-item-info { + width: 100%; +} +.is-phone .vertical-tab-header-group-title { + padding: 0.5em 0 1em; +} +.is-phone .vertical-tab-header-group-title, +.is-phone .setting-item-heading .setting-item-name { + color: var(--text-normal); + font-weight: var(--font-bold); + font-size: var(--font-ui-large); +} +.is-phone .vertical-tab-content-container > .vertical-tab-content .setting-item-heading:first-child { + padding-top: 0.5em; + margin-top: 0; +} +.is-phone .setting-item { + padding: 1em 0; + border-width: var(--border-width) 0 0 0; + gap: var(--size-4-1); +} +.is-phone .setting-item-name { + font-weight: var(--font-medium); +} +.is-phone .setting-item-info { + min-width: 0; +} +.is-phone .setting-item:not(.mod-toggle):not(.setting-item-heading):not(.mod-list-item) { + flex-direction: column; + align-items: flex-start; +} +.is-phone .setting-item:not(.mod-toggle):not(.setting-item-heading):not(.mod-list-item) .setting-item-control { + margin-top: 12px; + width: 100%; +} +.is-phone .setting-icon { + margin-right: 10px; + display: inline-flex; + vertical-align: middle; +} +.is-phone .setting-item-control select, +.is-phone .setting-item-control input, +.is-phone .setting-item-control button:not(.clickable-icon) { + width: 100%; + margin: 0; +} +.is-phone .setting-item-control button { + padding: 10px; +} +.is-phone .setting-item-control select { + max-width: 100%; +} +.is-phone .modal.mod-settings .modal-header { + border-bottom: var(--border-width) solid var(--background-modifier-border); +} +.is-phone .modal.mod-settings .vertical-tabs-container { + display: block; + overflow-y: auto; +} +.is-phone .modal.mod-settings .vertical-tab-header-group-title { + padding-top: var(--size-4-2); + padding-bottom: var(--size-4-2); + padding-right: max(var(--size-4-5), var(--safe-area-inset-right)); + padding-left: max(var(--size-4-5), var(--safe-area-inset-left)); +} +.is-phone .modal.mod-settings .vertical-tab-header { + background-color: var(--background-primary); + border-right: none; + flex-grow: 1; + height: 100%; + min-width: 100%; + padding: var(--size-4-4); + width: 100%; +} +.is-phone .modal.mod-settings .vertical-tab-content { + box-shadow: var(--shadow-s); + will-change: transform; + background-color: var(--background-primary); + padding-top: var(--size-4-5); + padding-right: max(var(--size-4-5), var(--safe-area-inset-right)); + padding-left: max(var(--size-4-5), var(--safe-area-inset-left)); + padding-bottom: max(100px, var(--safe-area-inset-bottom)); +} +.is-phone .modal.mod-settings .vertical-tab-header > .vertical-tab-header-group:last-child { + padding-bottom: 100px; +} +.is-phone .modal.mod-settings .vertical-tab-nav-item { + display: flex; + align-items: center; + height: 44px; + padding-right: max(var(--size-4-5), var(--safe-area-inset-right)); + padding-left: max(var(--size-4-5), var(--safe-area-inset-left)); + border-radius: 0; + border-bottom: var(--border-width) solid var(--background-modifier-border); + transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; +} +.is-phone .modal.mod-settings .vertical-tab-nav-item:last-child { + border-bottom: none; +} +.is-phone .modal.mod-settings .vertical-tab-nav-item-chevron { + display: flex; + margin-inline-start: auto; + color: var(--icon-color); +} +.is-phone .vertical-tab-header-title { + font-weight: var(--font-semibold); +} +.is-phone .installed-plugins-container .setting-item { + flex-direction: column; + align-items: stretch; + gap: var(--size-4-3); +} +.is-phone .installed-plugins-container .setting-item > *:first-child { + margin-inline-end: 0; +} +.is-phone .installed-plugins-container .setting-item .setting-item-description div:first-child:after { + content: ' • '; +} +.is-phone .installed-plugins-container .setting-item .setting-item-description div:first-child, +.is-phone .installed-plugins-container .setting-item .setting-item-description div:nth-child(2) { + display: inline; +} +.is-phone .installed-plugins-container .setting-item .setting-item-control { + flex-wrap: wrap; +} +.is-phone .installed-plugins-container .setting-item .checkbox-container { + margin-inline-start: auto; +} +.is-phone .community-modal-sidebar { + background-color: var(--background-primary); +} +.is-phone .community-modal-controls { + background-color: transparent; +} +.is-phone .community-modal-controls .setting-item { + flex: 0 0 auto; + padding: 0.25em 0; +} +.is-phone .community-modal-controls .setting-item-control { + flex-direction: column; + align-items: flex-end; +} +.is-phone .community-modal-controls .search-input-container { + width: 100%; +} +.is-phone .community-modal-search-results { + gap: 0; + padding: 0; +} +.is-phone .community-modal-info { + padding: var(--size-4-4); +} +.is-phone .community-item { + border-width: 0 0 var(--border-width) 0; + border-radius: 0; + padding: var(--size-4-4); +} +.is-phone .community-item-info { + padding: 20px; +} +.is-phone .community-modal-details { + background-color: var(--background-primary); + border: none; +} +.is-phone .community-modal-readme { + padding: 20px 0; +} +.is-phone .community-modal-controls { + padding: 0 var(--size-4-4); +} +.is-phone .community-modal-search-summary { + padding: var(--size-4-1) var(--size-4-1) var(--size-4-4); +} +.is-phone .mod-community-theme .community-item { + display: grid; + grid-template-columns: 1fr 160px; + grid-auto-flow: column dense; +} +.is-phone .mod-community-theme .community-item .community-item-name { + grid-column: 1 / 2; +} +.is-phone .mod-community-theme .community-item .community-item-author { + grid-column: 1 / 2; +} +.is-phone .mod-community-theme .community-item .community-item-badge.mod-update { + position: static; + grid-row: 4; +} +.is-phone .mod-community-theme .community-item .community-item-downloads { + grid-column: 1 / 2; +} +.is-phone .mod-community-theme .community-item .community-item-screenshot { + grid-row: 1 / span 4; + height: 90px; +} +.is-phone .mod-community-plugin .community-item { + display: grid; + grid-template-columns: 3fr 1fr; + grid-auto-flow: column dense; +} +.is-phone .mod-community-plugin .community-item .community-item-name { + grid-column: 1 / 2; +} +.is-phone .mod-community-plugin .community-item .community-item-author { + grid-column: 1 / 2; +} +.is-phone .mod-community-plugin .community-item .community-item-badge.mod-update { + position: static; + grid-row: 4; +} +.is-phone .mod-community-plugin .community-item .community-item-updated { + grid-column: 1 / 2; + color: var(--text-faint); + display: none; +} +.is-phone .mod-community-plugin .community-item .community-item-downloads { + grid-column: 2 / 2; + text-align: end; + color: var(--text-faint); +} +.is-phone .mod-community-plugin .community-item .community-item-desc { + grid-column: 1 / span 2; +} +.is-phone .community-modal-button-container { + flex-direction: column; +} +.mobile-option-setting-item { + font-size: var(--font-ui-medium); + display: flex; + align-items: center; + margin: 8px 0; + gap: var(--size-4-1); + transition: transform 1000ms ease-in-out; + color: var(--text-muted); +} +.mobile-option-setting-item:first-of-type:last-of-type .mobile-option-setting-drag-icon { + display: none; +} +.mobile-option-setting-item-name { + flex: 1 0 0; + color: var(--text-normal); +} +.mobile-option-setting-item-option-icon { + display: flex; + align-items: center; + justify-content: center; + padding: 4px 4px; + cursor: var(--cursor); + border-radius: var(--radius-s); +} +:not(.is-mobile) .mobile-option-setting-item-option-icon:hover, +:not(.is-mobile) .mobile-option-setting-item-option-icon:active { + background-color: var(--background-modifier-hover); +} +.mobile-option-setting-item-option-icon.mobile-option-setting-drag-icon { + cursor: grab; +} +.mobile-option-setting-item-option-icon.mobile-option-setting-drag-icon:active { + cursor: grabbing; +} +.mobile-option-setting-item-remove-icon { + color: var(--text-error); + display: flex; +} +.mobile-option-setting-item-add-icon { + color: var(--text-success); + display: flex; +} +.is-mobile .status-bar { + display: none; +} +.workspace-drawer { + position: fixed; + top: 0; + bottom: 0; + display: flex; + overflow: hidden; + font-size: var(--font-ui-small); + min-width: var(--mobile-sidebar-min-width); + max-width: var(--mobile-sidebar-max-width); + width: var(--mobile-sidebar-width); + z-index: var(--layer-popover); + margin: 0; + border-radius: 0; + padding-top: var(--safe-area-inset-top); + background-color: var(--mobile-sidebar-background); +} +.workspace-drawer .nav-folder.mod-root > .nav-folder-title { + display: none; +} +.workspace-drawer .nav-header { + border-bottom: var(--border-width) solid var(--background-modifier-border); +} +.workspace-drawer .nav-header ~ .search-input-container { + width: calc(100% - var(--size-4-9)); +} +.workspace-drawer .workspace-leaf { + background-color: transparent; +} +.workspace-drawer.is-pinned { + height: 100%; + position: relative; + max-width: var(--mobile-sidebar-width); + padding-bottom: 0; + width: var(--mobile-sidebar-width-pinned); + z-index: var(--layer-cover); + margin: 0; + box-shadow: none; +} +.workspace-drawer.mod-left { + left: 0; + padding-left: var(--safe-area-inset-left); + border-top-right-radius: var(--mobile-sidebar-radius); + border-bottom-right-radius: var(--mobile-sidebar-radius); +} +.workspace-drawer.mod-left.is-pinned { + --mobile-sidebar-radius: 0; + border-right: var(--divider-width) solid var(--divider-color); +} +body.is-tablet .workspace-drawer.mod-left .workspace-drawer-inner { + padding-left: var(--ribbon-width); +} +.workspace-drawer.mod-right { + right: 0; + padding-right: var(--safe-area-inset-right); + border-top-left-radius: var(--mobile-sidebar-radius); + border-bottom-left-radius: var(--mobile-sidebar-radius); +} +.workspace-drawer.mod-right.is-pinned { + --mobile-sidebar-radius: 0; + border-left: var(--divider-width) solid var(--divider-color); +} +.workspace-drawer.is-collapsed { + overflow: hidden; +} +.workspace-drawer .nav-buttons-container { + padding-inline-start: var(--size-4-3); + padding-inline-end: var(--size-4-3); + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); + --icon-color: var(--interactive-accent); + --icon-color-hover: var(--interactive-accent); + --icon-color-active: var(--interactive-accent); + --icon-color-focus: var(--interactive-accent-hover); +} +.workspace-drawer .nav-buttons-container .nav-action-button { + flex-grow: 1; +} +.workspace-drawer .workspace-drawer-actions, +.workspace-drawer .nav-buttons-container { + overflow: auto; + flex-wrap: nowrap; +} +.workspace-drawer .workspace-drawer-actions::-webkit-scrollbar, +.workspace-drawer .nav-buttons-container::-webkit-scrollbar, +.workspace-drawer .workspace-drawer-actions::-webkit-scrollbar-thumb, +.workspace-drawer .nav-buttons-container::-webkit-scrollbar-thumb { + visibility: hidden; +} +.workspace-drawer .side-dock-settings { + margin-bottom: 0; +} +.workspace-drawer-inner { + flex: 1 1 auto; + overflow: hidden; + display: flex; + flex-direction: column; + background-color: var(--background-primary); + position: relative; + transition: width ease-out 150ms; +} +.theme-dark .workspace-drawer-inner { + background-color: var(--background-secondary); +} +.workspace-drawer.is-collapsed .workspace-drawer-inner { + padding: 0; + width: 0; +} +.workspace-drawer-backdrop { + display: block; + position: fixed; + z-index: var(--layer-cover); + width: 100%; + height: 100%; + background-color: var(--background-modifier-cover); + top: 0; + left: 0; + opacity: 1; + transition: opacity ease-out 150ms; +} +.workspace-drawer.is-collapsed .workspace-drawer-backdrop { + display: none; + opacity: 0; +} +.workspace-drawer-ribbon { + position: absolute; + left: 0; + top: 0; + height: 100%; + overflow: auto; + width: var(--ribbon-width); + padding: var(--size-4-1) 0 var(--safe-area-inset-bottom); +} +.workspace-drawer-ribbon::-webkit-scrollbar, +.workspace-drawer-ribbon::-webkit-scrollbar-thumb { + visibility: hidden; + width: 0; +} +.workspace-drawer-ribbon .side-dock-actions { + padding: var(--size-4-2) 0; +} +.workspace-drawer-ribbon .side-dock-actions, +.workspace-drawer-ribbon .side-dock-settings { + gap: var(--size-4-2); +} +.workspace-drawer-ribbon .side-dock-ribbon-action { + padding: var(--size-4-2); +} +.workspace-drawer-header { + padding: var(--size-4-2) var(--size-4-5) 0 var(--size-4-5); + display: flex; + align-items: flex-start; +} +.workspace-drawer.is-pinned .workspace-drawer-header { + padding-top: 0; +} +.workspace-drawer-header-left { + display: flex; + flex-direction: column; + flex: 1 1 auto; + overflow: hidden; +} +.workspace-drawer-header-name { + display: flex; +} +.workspace-drawer-header-switcher { + display: flex; + flex: 0 1 auto; + position: relative; +} +.workspace-drawer-header-switcher select { + opacity: 0; + position: absolute; +} +.workspace-drawer-header-name-text { + text-overflow: ellipsis; + overflow: hidden; + font-size: var(--font-ui-large); + font-weight: var(--font-semibold); + color: var(--text-normal); +} +.workspace-drawer-header-name-chevron { + --icon-size: var(--icon-m); + --icon-stroke: 2.25px; + color: var(--text-faint); + display: flex; + align-items: center; + margin-inline-start: var(--size-2-1); +} +.workspace-drawer-header-name-action-icon { + color: var(--text-muted); + margin-inline-start: var(--size-4-2); + display: flex; + align-items: center; +} +.workspace-drawer-header-info { + color: var(--text-muted); + margin: var(--size-4-1) 0 var(--size-4-4) 0; + font-size: var(--font-ui-small); +} +.workspace-drawer-header-icon { + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); + padding-top: var(--size-2-2); + color: var(--interactive-accent); + margin-inline-start: var(--size-4-3); +} +.workspace-drawer-actions { + margin: var(--size-4-4) 0 var(--size-4-3) 0; + display: flex; + color: var(--text-muted); +} +.workspace-drawer-action-item { + flex: 0 0 70px; + display: flex; + flex-direction: column; + align-items: center; + overflow: hidden; +} +.workspace-drawer-action-icon { + color: var(--text-faint); +} +.workspace-drawer-action-short-name { + font-size: var(--font-ui-small); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + max-width: 80px; +} +.workspace-drawer-separator { + margin: 0 0 12px 0; +} +.workspace-drawer-tab-option-item { + transition: background-color 0.1s ease-in-out; + border-radius: var(--radius-s); + display: flex; + align-items: center; + gap: var(--size-4-2); + margin: var(--size-4-1) var(--size-4-3); + padding: var(--size-4-2); +} +.workspace-drawer-tab-option-item.mobile-tap, +.workspace-drawer-tab-option-item.has-active-menu { + background-color: var(--nav-item-background-hover); +} +.workspace-drawer-active-tab-icon { + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); + color: var(--text-normal); + display: none; + margin-inline-end: var(--size-4-2); +} +.workspace-drawer-active-tab-icon:last-child { + color: var(--interactive-accent); +} +.workspace-drawer-active-tab-chevron { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + color: var(--text-faint); + margin-inline-start: auto; +} +.workspace-drawer-active-tab-title { + color: var(--text-normal); + font-weight: var(--font-medium); + font-size: var(--font-ui-medium); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + flex-grow: 1; +} +.workspace-drawer-active-tab-header { + display: flex; + align-items: center; + padding: var(--size-4-2); + background-color: var(--background-modifier-form-field); + padding-inline-start: var(--size-4-3); + border-radius: var(--radius-m); + margin: 0 var(--size-4-3) var(--size-4-1); + position: relative; +} +.workspace-drawer-active-tab-header.mobile-tap { + background-color: var(--nav-item-background-hover); +} +.workspace-drawer-active-tab-header select { + opacity: 0; + position: absolute; + width: 90%; +} +.workspace-drawer-tab-container { + overflow: hidden; + position: relative; + flex: 1 0 0; +} +.workspace-drawer-tab-container > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.workspace-drawer-active-tab-icon.mod-exit-fullscreen { + display: none; +} +.workspace-drawer-active-tab-container { + background-color: var(--mobile-sidebar-background); + display: flex; + flex-direction: column; +} +.workspace-drawer-active-tab-container .workspace-drawer-active-tab-content .nav-files-container { + padding-top: var(--size-4-3); +} +.workspace-drawer-active-tab-content { + flex: 1 0 0; + overflow: auto; + display: flex; +} +.workspace-drawer-active-tab-content > * { + flex: 1 0 0; + width: 100%; + height: 100%; +} +.workspace-drawer-active-tab-content .view-header { + display: none !important; +} +.workspace-drawer-active-tab-content .view-content { + padding-top: 4px; + height: 100%; +} +.workspace-drawer-active-tab-content .graph-controls { + display: none; +} +.workspace-drawer-active-tab-content .outline { + font-size: var(--font-ui-medium); +} +.is-phone .side-dock-ribbon { + display: none; +} +.is-phone .workspace-drawer .workspace-drawer-header-icon.mod-pin { + display: none; +} +.is-phone .mod-root .workspace-split:not(.mod-visible), +.is-phone .mod-root .workspace-tabs:not(.mod-visible) { + display: none; +} +body.is-tablet .sidebar-toggle-button { + --icon-color: var(--interactive-accent); + --icon-color-hover: var(--interactive-accent); + --icon-color-active: var(--interactive-accent-hover); + --icon-color-focus: var(--interactive-accent-hover); + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); +} +body.is-tablet .sidebar-toggle-button.mod-left { + padding-left: var(--size-4-2); +} +.is-mobile.theme-light .menu { + --interactive-normal: var(--background-primary); +} +.is-mobile .menu { + --background-modifier-form-field: var(--interactive-normal); + --dropdown-background: var(--interactive-normal); + --input-height: 40px; + border: none; + max-width: 100%; +} +.is-mobile .menu-scroll { + overflow-y: auto; +} +.is-ios .menu .menu-item-icon { + order: 1; +} +.is-phone { + --menu-padding: var(--size-4-2) var(--size-4-4); +} +.is-phone .menu-grabber { + transition: width 0.15s var(--anim-motion-swing), background-color 0.3s var(--anim-motion-swing); + height: var(--size-4-1); + background: var(--text-faint); + display: flex; + width: 15%; + border-radius: var(--radius-xl); + margin: var(--size-4-2) auto var(--size-4-1); + position: relative; +} +.is-phone.hide-cursor .menu-grabber { + background: var(--text-muted); + width: 14%; +} +.is-phone .menu { + background-color: var(--background-secondary); + min-width: unset; + position: absolute; + border-radius: var(--radius-l) var(--radius-l) 0 0; + bottom: 0; + left: var(--safe-area-inset-left); + right: var(--safe-area-inset-right); + margin: 0 auto; + top: unset !important; +} +.is-phone .menu-scroll { + max-height: 60vh; + background-color: var(--background-secondary); + padding-bottom: var(--safe-area-inset-bottom) !important; +} +.is-phone .menu-group .menu-item.is-label + .menu-item:not(.is-label) { + border-top-left-radius: var(--radius-l); + border-top-right-radius: var(--radius-l); +} +.is-phone .menu-group .menu-item:first-child { + border-top-left-radius: var(--radius-l); + border-top-right-radius: var(--radius-l); +} +.is-phone .menu-group .menu-item:last-child { + border-bottom-left-radius: var(--radius-l); + border-bottom-right-radius: var(--radius-l); +} +.is-phone .menu-group .menu-item:not(:last-child) { + border-bottom: 1px solid var(--menu-background); +} +.is-phone .menu .suggestion-group .suggestion-item:first-child { + border-top-left-radius: var(--radius-l); + border-top-right-radius: var(--radius-l); +} +.is-phone .menu .suggestion-group .suggestion-item:last-child { + border-bottom-left-radius: var(--radius-l); + border-bottom-right-radius: var(--radius-l); +} +.is-phone .menu .suggestion-group .suggestion-item, +.is-phone .menu-item { + transition: background-color 0.1s ease-in-out; + padding: var(--size-4-3) var(--size-4-3); + height: unset; + line-height: unset; + border-radius: 0; +} +.is-phone .menu .suggestion-group .suggestion-item:not(.is-label), +.is-phone .menu-item:not(.is-label) { + background-color: var(--interactive-normal); +} +.is-phone .menu .suggestion-group .suggestion-item.mobile-tap:not(.is-disabled), +.is-phone .menu-item.mobile-tap:not(.is-disabled) { + background-color: var(--interactive-hover); +} +.is-phone .menu-separator { + margin: var(--size-4-1) 0; + border: 0; +} +.is-phone .menu-item.is-label .menu-item-title { + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} +.is-mobile .modal { + border: none; +} +.is-mobile .modal-button-container { + display: flex; + flex-direction: column; +} +.is-mobile .mod-confirmation .modal-close-button { + display: none; +} +.is-mobile button.mod-warning { + background-color: var(--interactive-normal); + font-weight: calc(var(--font-weight) + var(--bold-modifier)); + color: var(--text-error); +} +.is-phone .modal, +.is-phone .prompt { + border: none; + width: 100vw; + max-width: 100vw; + min-width: unset; + left: 0; + right: 0; +} +.is-phone .modal { + border-radius: var(--radius-m); + max-height: calc(100vh - var(--safe-area-inset-top)); + padding: 0 var(--safe-area-inset-right) 0 var(--safe-area-inset-left); + bottom: 0; +} +.is-phone .modal .modal-close-button { + top: var(--size-4-3); + z-index: var(--layer-modal); +} +.is-phone .modal .modal:not(.mod-lg) { + --interactive-normal: var(--background-modifier-hover); + background-color: var(--background-secondary); +} +.is-phone .modal-container.mod-confirmation { + align-items: flex-end; +} +.is-phone .modal-container.mod-confirmation .modal { + border-radius: var(--radius-m) var(--radius-m) 0 0; +} +.is-phone .modal-container.mod-confirmation .modal-header { + border-bottom: var(--border-width) solid var(--background-modifier-border); +} +.is-phone .modal-sidebar { + background-color: var(--background-primary); +} +.is-phone .modal-content { + display: flex; + position: relative; + flex-direction: column; + margin-top: 0; + overflow: auto; + padding: var(--size-4-3); +} +.is-phone .modal-button-container { + width: 100%; + padding: var(--size-4-3); + margin-top: 0; + margin-bottom: var(--safe-area-inset-bottom); +} +.is-phone .modal-button-container button.mod-cancel { + margin-top: var(--size-4-1); +} +.is-phone .modal-header { + margin-bottom: 0; + padding: var(--size-4-4) 0; + position: relative; + width: 100%; +} +.is-phone .modal-title { + display: block; + font-size: var(--font-ui-medium); + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 70vw; +} +.is-phone .modal-cta-button { + color: var(--text-accent); + font-weight: var(--font-semibold); + position: absolute; + right: 0; + top: 0; + margin: var(--size-4-4); +} +.is-phone .modal-cta-button.mobile-tap { + color: var(--text-accent-hover); +} +.is-phone .modal.mod-lg, +.is-phone .modal.mod-sidebar-layout { + bottom: 0; + top: 0; + border-radius: 0; + height: 100%; + max-height: 100%; + margin: 0; + padding: 0 var(--safe-area-inset-right) 0 var(--safe-area-inset-left); + box-shadow: none; + width: 100vw; +} +.is-phone .modal.mod-lg .search-input-container, +.is-phone .modal.mod-sidebar-layout .search-input-container { + flex-grow: 1; +} +.is-phone .modal.mod-lg .modal-header, +.is-phone .modal.mod-sidebar-layout .modal-header { + border-bottom: var(--border-width) solid var(--background-modifier-border); + display: block; + padding-top: calc(var(--safe-area-inset-top) + var(--size-4-3)); + padding-bottom: var(--size-4-3); + margin-bottom: 0; +} +.is-phone .modal.mod-lg .modal-close-button, +.is-phone .modal.mod-sidebar-layout .modal-close-button { + top: calc(var(--safe-area-inset-top) + 10px); + inset-inline-end: var(--size-4-5); +} +.is-phone .modal.mod-sidebar-layout .modal-content > * { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + padding: 0 var(--safe-area-inset-right) 0 var(--safe-area-inset-left); +} +.is-phone .error-container { + height: 100%; + justify-content: center; +} +.mobile-navbar { + background-color: var(--background-primary); + padding-top: var(--size-4-2); + padding-bottom: calc(var(--safe-area-inset-bottom) - var(--keyboard-height) - var(--keyboard-height)); + padding-right: calc(var(--size-4-2) + var(--safe-area-inset-right)); + padding-left: calc(var(--size-4-2) + var(--safe-area-inset-left)); +} +body.is-tablet .mobile-navbar { + display: none; +} +.mobile-navbar-text { + font-size: var(--font-ui-small); + padding: var(--size-4-1) 0; + white-space: nowrap; + text-overflow: clip; + width: 100%; + -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) var(--size-4-4), #000000 var(--size-4-8)); +} +.mobile-navbar-actions { + --icon-size: 26px; + --icon-stroke: var(--icon-l-stroke-width); + --icon-color: var(--interactive-accent); + --icon-color-hover: var(--interactive-accent); + --icon-color-active: var(--interactive-accent-hover); + --icon-color-focus: var(--interactive-accent-hover); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0; +} +.mobile-navbar-action { + flex-grow: 1; + transition: opacity 0.1s ease-in-out; +} +.mobile-navbar-action.mobile-tap { + opacity: var(--icon-opacity-hover); +} +.mobile-navbar-action .clickable-icon, +.mobile-navbar-action button { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.mobile-navbar-action-tabs { + position: relative; +} +.mobile-navbar-action-tabs .mobile-navbar-tabs-number { + position: absolute; + align-items: center; + display: flex; + font-size: calc(var(--icon-size) * 0.55); + font-weight: var(--bold-weight); + justify-content: center; + text-align: center; + height: 100%; + width: var(--icon-size); + top: 0; + bottom: 0; + margin: auto; +} +.mobile-navbar-action.has-longpress-menu { + position: relative; +} +.mobile-navbar-action.has-longpress-menu .navbar-action-flair { + --icon-size: 12px; + --icon-stroke: 3px; + opacity: var(--icon-opacity); + color: var(--interactive-accent); + position: absolute; + left: 0; + right: 0; + top: 0; + margin: 0 auto; + height: 100%; + align-items: center; + display: flex; + width: fit-content; + transform: translateX(calc(var(--icon-size) * -1 - 6px)); +} +.is-phone .notice-container { + padding: 0; + top: auto; + bottom: max(var(--size-4-1),var(--safe-area-inset-bottom)); + left: 0; + right: 0; + max-width: 100%; + margin: 0 auto 48px; + display: flex; + width: 100%; + flex-direction: column-reverse; + padding-right: max(var(--size-4-3), var(--safe-area-inset-right)); + padding-left: max(var(--size-4-3), var(--safe-area-inset-left)); + gap: var(--size-4-1); +} +.is-phone .notice { + border-radius: var(--radius-m); + margin: 0 auto; + max-width: 100%; + width: 100%; + box-shadow: none; + font-weight: var(--font-medium); + font-size: var(--font-ui-smaller); + border: var(--border-width) solid var(--background-modifier-border); + padding: 1em; + flex-direction: row; + align-items: center; + justify-content: space-between; +} +.is-mobile .prompt { + border: none; +} +.theme-dark.is-mobile .prompt { + background-color: var(--background-secondary); +} +.theme-dark.is-mobile .prompt input.prompt-input { + background-color: var(--background-secondary); +} +.is-mobile .prompt-input-cta { + --icon-color: var(--interactive-accent); + position: absolute; + top: 0; + bottom: 0px; + inset-inline-end: var(--size-4-8); + line-height: 0; + display: flex; + align-items: center; + height: var(--input-height); + margin: auto; + padding: 0 var(--size-4-3); + justify-content: center; + flex: 0 1 auto; +} +.is-mobile .prompt-input[type=text] { + padding: var(--size-4-4); +} +.is-mobile .prompt { + --prompt-top: calc(var(--safe-area-inset-top) + var(--header-height) + var(--size-4-2)); + top: var(--prompt-top); + max-height: min(var(--prompt-max-height), calc(100vh - var(--prompt-top) - var(--safe-area-inset-bottom))); +} +.is-ios.is-tablet .prompt { + transform: translateZ(0); +} +.is-phone .prompt { + margin: 0 auto; + width: calc(100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)); + border-radius: var(--radius-l) var(--radius-l) 0 0; + min-width: unset; + box-shadow: none; + padding-bottom: var(--safe-area-inset-bottom); + max-height: 100vh; + height: calc(100vh - var(--prompt-top)); +} +.is-phone .prompt .suggestion-hotkey { + display: none; +} +.is-phone .prompt-input-container { + border-bottom: var(--border-width) solid var(--background-modifier-border); +} +.is-phone .prompt-input[type=text] { + border: none; + padding-inline-end: var(--size-4-12); +} +.is-phone .prompt-instructions { + display: none; +} +.pull-action { + position: absolute; + background-color: var(--background-secondary); + z-index: var(--layer-popover); + color: var(--text-muted); + font-size: var(--font-ui-smaller); + transition: background-color ease-in-out 150ms; +} +.pull-action.mod-activated { + background-color: var(--interactive-accent); + color: var(--text-on-accent); +} +.pull-down-action { + top: 0; + left: 0; + right: 0; + width: 96%; + max-width: 500px; + margin: var(--safe-area-inset-top) auto 0 auto; + padding: var(--size-4-3) var(--size-4-4); + text-align: center; + border-radius: 40px; +} +.pull-out-action { + top: 50%; + padding: var(--size-4-3) var(--size-4-4); + border-radius: 40px; + margin: 0 var(--size-4-4); +} +.is-phone { + --toolbar-option-width: 40px; +} +.is-tablet { + --toolbar-option-width: 50px; +} +.mobile-toolbar { + -webkit-app-region: drag; + flex: 0 0 auto; + position: absolute; + width: 100%; + overflow-y: hidden; + top: calc(100vh - var(--keyboard-height) - var(--mobile-toolbar-height)); + padding-left: var(--safe-area-inset-left); + padding-bottom: var(--safe-area-inset-bottom); + padding-right: var(--safe-area-inset-right); + background-color: var(--background-primary); + z-index: var(--layer-menu); +} +.mobile-toolbar-spacer { + background-color: var(--background-primary); + height: var(--mobile-toolbar-height); + display: flex; + width: 100%; +} +.mobile-toolbar-options-container { + --scroll-fade-offset-right: var(--toolbar-option-width); + height: var(--mobile-toolbar-height); + display: flex; + width: 100%; +} +.mobile-toolbar-options-list { + display: flex; + width: 100%; + overflow-x: auto; + overflow-y: hidden; + padding: 0 10px; + scrollbar-width: none !important; + /* Firefox */ + -ms-overflow-style: none !important; + /* Internet Explorer 10+ */ +} +.mobile-toolbar-options-list::-webkit-scrollbar { + width: 0 !important; + height: 0 !important; +} +.mobile-toolbar-floating-options { + display: flex; +} +.mobile-toolbar-floating-options .mobile-toolbar-option { + min-width: var(--toolbar-option-width); + color: var(--text-accent); +} +.mobile-toolbar-option { + display: flex; + font-size: var(--font-ui-medium); + color: var(--text-muted); + font-family: var(--font-monospace); + justify-content: center; + align-items: center; + min-width: var(--toolbar-option-width); +} +.mobile-tab-switcher { + background-color: var(--tab-switcher-background); + position: absolute; + display: flex; + flex-direction: column; + height: 100vh; + width: 100vw; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: var(--layer-modal); +} +.mobile-tab-switcher-scroll { + padding-top: var(--safe-area-inset-top); + background-color: var(--tab-switcher-background); + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + overflow-y: auto; +} +.mobile-tab-switcher-inner-scroll { + flex: 1 0 auto; + min-height: 100%; + display: flex; + flex-direction: column-reverse; +} +body.is-ios .mobile-tab-switcher-inner-scroll { + min-height: calc(100% + 1px); +} +.mobile-tab-switcher-menubar { + --icon-size: 26px; + --icon-stroke: var(--icon-l-stroke-width); + --icon-color: var(--interactive-accent); + --icon-color-hover: var(--interactive-accent); + --icon-color-active: var(--interactive-accent-hover); + --icon-color-focus: var(--interactive-accent-hover); + background-color: var(--tab-switcher-menubar-background); + display: flex; + border-top: var(--border-width) solid var(--background-modifier-border); + align-items: center; + justify-content: space-between; + padding-top: var(--size-4-2); + padding-bottom: max(var(--size-4-2), var(--safe-area-inset-bottom)); + padding-left: max(var(--safe-area-inset-left), var(--size-4-4)); + padding-right: max(var(--safe-area-inset-right), var(--size-4-4)); + font-weight: var(--font-semibold); +} +.mobile-tab-switcher-menu-button { + display: flex; + align-items: center; + gap: var(--size-4-1); + transition: opacity 0.1s ease-in-out; +} +.mobile-tab-switcher-menu-button.mobile-tap { + opacity: var(--icon-opacity-hover); +} +.mobile-tab-switcher-menu-button-chevron { + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + color: var(--text-faint); + display: flex; + align-items: center; +} +.mobile-tab-switcher-menu-spacer { + display: flex; + flex: 1 0 0; +} +.mobile-tab-switcher-menu-spacer:first-child { + justify-content: flex-start; +} +.mobile-tab-switcher-menu-spacer:last-child { + justify-content: flex-end; +} +.mobile-tab-switcher-search { + margin: var(--size-4-4); + margin-top: 50px; +} +.mobile-tab-group-container { + display: flex; + align-items: center; + align-content: flex-start; + gap: var(--size-4-4); + row-gap: var(--size-4-6); + justify-content: flex-start; + margin: var(--size-4-4); + flex-wrap: wrap; +} +.mobile-tab-wrapper { + display: flex; + flex-direction: column; + width: calc(50% - var(--size-4-2)); +} +.mobile-tab { + gap: var(--size-4-2); + flex-direction: column; + display: flex; + scroll-margin: var(--size-4-3); +} +.mobile-tab.is-active .mobile-tab-preview-empty, +.mobile-tab.is-active .mobile-tab-preview-embed { + box-shadow: var(--tab-switcher-preview-shadow-active); +} +.mobile-tab .mobile-tab-pin, +.mobile-tab .close-button { + --icon-size: var(--icon-m); + background-color: var(--background-primary-alt); + position: absolute; + top: var(--size-4-2); + inset-inline-end: var(--size-4-2); + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + border-radius: var(--radius-xl); +} +.mobile-tab .mobile-tab-pin { + color: var(--interactive-accent); +} +.mobile-tab-footer { + display: flex; + gap: var(--size-4-1); +} +.mobile-tab-title { + font-size: var(--font-ui-smaller); + font-weight: var(--font-medium); + color: var(--text-normal); + text-overflow: ellipsis; + white-space: pre; + overflow: hidden; + unicode-bidi: plaintext; + text-align: center; +} +.mobile-tab-preview { + position: relative; + height: 200px; + background-color: var(--background-primary); + border-radius: var(--tab-switcher-preview-radius); +} +.mobile-tab-preview:before { + position: absolute; + content: ''; + width: 100%; + height: 100%; + display: block; + box-shadow: var(--tab-switcher-preview-background-shadow); + border-radius: var(--tab-switcher-preview-radius); +} +.mobile-tab-preview-empty { + --icon-size: var(--icon-xl); + --icon-stroke: var(--icon-xl-stroke-width); + z-index: 1; + position: absolute; + box-shadow: var(--tab-switcher-preview-shadow); + background-color: var(--background-primary); + color: var(--text-faint); + border-radius: var(--tab-switcher-preview-radius); + overflow: hidden; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.mobile-tab-preview-embed { + z-index: 1; + position: absolute; + box-shadow: var(--tab-switcher-preview-shadow); + background-color: var(--background-primary); + overflow: hidden; + height: 100%; + width: 100%; + object-fit: cover; + object-position: top left; + border-radius: var(--tab-switcher-preview-radius); + pointer-events: none; +} +.mobile-tab-preview-embed ::-webkit-scrollbar { + display: none; +} +.is-mobile .suggestion-item { + padding: var(--size-4-2) var(--size-4-3); +} +.is-tablet.theme-dark .suggestion-container { + background-color: var(--background-secondary); +} +.is-phone .suggestion-item.mod-group { + border-radius: 0; +} +.is-mobile .publish-changes-info-publishing-to { + display: none; +} +.is-mobile .publish-changes-add-linked-btn { + width: auto; +} +.is-mobile .file-tree .tree-item-self { + font-size: var(--font-ui-small); +} +.is-phone .modal.mod-publish { + border-radius: 0; +} +.is-phone .modal.mod-publish .modal-button-container { + background-color: var(--modal-background); + position: fixed; +} +.is-phone .modal.mod-publish .modal-content { + display: unset; +} +.is-phone .publish-changes-info { + flex-wrap: wrap; +} +.is-phone .publish-changes-info .search-input-container { + width: auto; +} +.is-mobile .sync-history-list { + padding-left: max(var(--size-4-5), var(--safe-area-inset-left)); + padding-right: max(var(--size-4-5), var(--safe-area-inset-right)); + padding-bottom: max(var(--size-4-2), var(--safe-area-inset-bottom)); +} +.is-mobile .sync-history-list-item-header { + margin-bottom: 0; +} +.is-mobile .sync-history-list-item-details { + padding: var(--size-4-1) var(--size-4-4); +} +.is-mobile .sync-history-content-container { + display: flex; + flex-direction: column; + max-width: unset; +} +.is-mobile .sync-history-content { + flex: 1 1 auto; + border-radius: 0; + border: none; +} +.is-phone .modal.mod-sync-log .modal-content { + margin-inline-start: 0; + margin-inline-end: 0; + padding-inline-start: 0; + padding-inline-end: 0; +} +.is-phone .modal.mod-sync-log .modal-content > .setting-item { + padding: var(--size-4-3); +} +.is-phone .modal.mod-sync-log .modal-content .sync-log-container { + flex: 1 1 auto; + border: none; + border-radius: 0; +} +.is-phone .sync-history-list-item:not(:first-child) { + border-top: var(--border-width) solid var(--background-modifier-border); +} +.is-phone .sync-history-list-item-header { + margin: 0; + border-radius: 0; +} +.is-phone .modal.mod-sync-history .search-input-container { + width: 100%; + margin-bottom: 0; +} +.is-phone .sync-history-list-container { + border: none; + background-color: var(--background-primary); + display: block; +} +.is-phone .sync-history-preview { + padding-bottom: max(var(--size-4-6), var(--safe-area-inset-bottom)); +} +.is-phone .sync-history-content .modal-setting-title { + display: none; +} +.is-phone .sync-history-content .setting-item { + flex-direction: column; + align-items: start; +} +.is-phone .sync-history-content .setting-item:first-child { + padding: 0 var(--size-4-6) var(--size-4-4); +} +.is-phone .sync-history-content .setting-item-name { + font-weight: var(--font-semibold); + font-size: var(--font-ui-large); + white-space: normal; +} +.is-phone .sync-history-content .setting-item-control { + padding-inline-end: 0; +} +.is-phone .sync-history-content .setting-item-control label { + min-width: fit-content; +} +.is-phone .sync-history-content .modal-setting-titlebar { + padding-inline-end: var(--size-4-4); +} +.is-phone .sync-vault-share-container .setting-item-control { + flex-direction: column; +} +.mobile-vault-chooser { + width: 100%; + height: 100%; + background-color: var(--background-primary); + position: relative; +} +.mobile-vault-chooser hr { + margin: 12px 0; + border-width: var(--border-width); +} +.mobile-vault-chooser-screen { + background-color: var(--background-primary); + display: flex; + flex-direction: column; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + padding-top: var(--safe-area-inset-top); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); +} +.mobile-vault-chooser-header { + display: flex; + background-color: var(--background-primary); + border-bottom: var(--border-width) solid var(--background-modifier-border); + color: var(--text-muted); + flex: 0 0 50px; + font-size: 18px; + align-items: center; +} +.mobile-vault-chooser-header-icon { + display: flex; + margin: 0 6px 0 10px; +} +.mobile-vault-chooser-content { + flex: 1 0 0; + padding: 20px; + height: 100%; + overflow-y: auto; + scrollbar-gutter: stable both-edges; + max-width: 800px; + width: 100%; + margin: 0 auto; + padding-bottom: var(--safe-area-inset-bottom); +} +.mobile-vault-chooser-logo-container { + margin: 40px 0; + text-align: center; + color: var(--text-muted); +} +.mobile-vault-logo-text { + margin-top: 10px; + margin-bottom: 10px; + color: white; +} +.mobile-vault-chooser-load-text { + margin: 20px 0; + text-align: center; +} +.mobile-vault-chooser-version { + font-size: var(--font-ui-small); + color: var(--text-faint); +} +.mobile-vault-chooser-empty-state { + margin: 20px 0; + font-size: 17px; + color: var(--text-muted); +} +.mobile-vault-chooser-actions { + padding-bottom: 40px; +} +.mobile-vault-chooser-action-icon { + color: var(--text-muted); + display: flex; + padding: 10px; + margin: -10px 0; +} +.mobile-vault-chooser-action { + border-radius: var(--radius-s); + display: flex; + padding: 14px 0; + align-items: center; + font-size: 18px; +} +.mobile-vault-chooser-action.mobile-tap { + background-color: var(--background-modifier-hover); +} +.mobile-vault-chooser-action-name { + flex: 1 0 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.mobile-vault-chooser-action-description { + color: var(--text-muted); + font-size: 17px; + overflow: hidden; + text-overflow: ellipsis; + max-width: calc(100vw - 110px); + white-space: nowrap; +} +.mobile-vault-chooser-field-name { + color: var(--text-muted); + margin: 20px 0 10px 0; + font-size: 18px; +} +input.mobile-vault-chooser-field-input { + width: 100%; + font-size: var(--font-ui-medium); + padding: 8px 12px; + height: auto; +} +.mobile-vault-chooser-button-container { + margin: 20px 0; +} +.mobile-vault-chooser-button-container button { + padding: 10px 20px; + font-size: var(--font-ui-medium); + width: 100%; +} +.mobile-vault-chooser-load-button button { + margin-top: var(--size-4-3); + width: 100%; +} +.mobile-vault-chooser-load-callout { + text-align: start; + background-color: var(--background-primary-alt); + border-radius: var(--radius-m); + padding: var(--size-4-4) var(--size-4-6); +} +.mobile-vault-chooser-load-callout .mobile-vault-chooser-callout-title { + color: var(--text-normal); + font-size: var(--font-ui-small); + font-weight: var(--font-medium); +} +.mobile-vault-chooser-load-callout p { + color: var(--text-muted); + font-size: var(--font-ui-smaller); + line-height: var(--line-height-normal); +} + diff --git a/scripts/esbuild.config.mjs b/scripts/esbuild.config.mjs index c2e788d..184c445 100644 --- a/scripts/esbuild.config.mjs +++ b/scripts/esbuild.config.mjs @@ -88,6 +88,13 @@ const buildOptions = { name: "Move output", setup(build) { build.onEnd(() => { + // Always copy main.css → styles.css locally so Obsidian loads current styles + try { + copyFileSync("main.css", "styles.css"); + } catch (error) { + console.error("Failed to copy main.css → styles.css:", error); + } + setTimeout( () => { try { diff --git a/src/ui/components/settingTabComponent.tsx b/src/ui/components/settingTabComponent.tsx index 6153dc6..04c7c14 100644 --- a/src/ui/components/settingTabComponent.tsx +++ b/src/ui/components/settingTabComponent.tsx @@ -113,6 +113,7 @@ export default function settingTabComponent({ await plugin.saveSettings(); }} /> + ), }, @@ -254,6 +255,7 @@ export default function settingTabComponent({ ), }, + { name: Platform.isMobile ? "Mobile Toolbar" : "Toolbar", tab: ,