From 86289de489181a6338bf051f15507e55f8064d45 Mon Sep 17 00:00:00 2001 From: Sigrunixia Date: Tue, 4 Aug 2026 09:41:21 -0500 Subject: [PATCH 1/6] Add test split workflow --- .github/workflows/scss-sync-notify.yml | 64 + .github/workflows/sync-app-css.yml | 106 + .gitignore | 3 + package.json | 3 +- src/app-css/app-1.13.4.css | 18776 +++++++++++++++++++++++ sync-app-css.mjs | 419 + 6 files changed, 19370 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/scss-sync-notify.yml create mode 100644 .github/workflows/sync-app-css.yml create mode 100644 src/app-css/app-1.13.4.css create mode 100644 sync-app-css.mjs diff --git a/.github/workflows/scss-sync-notify.yml b/.github/workflows/scss-sync-notify.yml new file mode 100644 index 0000000..bf2b18a --- /dev/null +++ b/.github/workflows/scss-sync-notify.yml @@ -0,0 +1,64 @@ +name: Notify SCSS nesting sync + +# src/app-css/scss-sync-report.md is a checklist of changes that were +# applied to the flat src/css/*.css files and still need to be hand-ported +# into the nested src/scss/*.scss partials (the "Sync app.css changes" +# workflow writes to it, but a human may also edit it directly, e.g. to +# check items off). This workflow doesn't touch the SCSS itself — nesting +# decisions are made by hand — it just keeps a standing PR comment in sync +# with the current checklist so it isn't easy to lose track of. + +on: + pull_request: + branches: ['**'] + paths: + - 'src/app-css/scss-sync-report.md' + +permissions: + pull-requests: write + +jobs: + notify: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v7 + + - uses: actions/github-script@v8 + with: + script: | + const fs = require('fs'); + const marker = ''; + let report; + try { + report = fs.readFileSync('src/app-css/scss-sync-report.md', 'utf8').trim(); + } catch { + return; + } + + const remaining = (report.match(/^- \[ \]/gm) || []).length; + const body = remaining === 0 + ? `${marker}\nAll items in \`src/app-css/scss-sync-report.md\` are checked off.` + : `${marker}\n**${remaining} item(s) pending** in \`src/app-css/scss-sync-report.md\` — port these into the nested \`src/scss/*.scss\` partials, then check them off:\n\n${report}`; + + const { data: comments } = await github.rest.issues.listComments({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + }); + const existing = comments.find((c) => c.body.includes(marker)); + + if (existing) { + await github.rest.issues.updateComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: existing.id, + body, + }); + } else { + await github.rest.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + body, + }); + } diff --git a/.github/workflows/sync-app-css.yml b/.github/workflows/sync-app-css.yml new file mode 100644 index 0000000..4ea60bc --- /dev/null +++ b/.github/workflows/sync-app-css.yml @@ -0,0 +1,106 @@ +name: Sync app.css changes + +# When a PR adds a new src/app-css/app-x.y.z.css snapshot, diff it against +# the previous snapshot and apply the same additions/removals/changes to +# the flat src/css/*.css files. src/scss/*.scss is hand-nested and not +# safe to auto-edit, so instead this appends a checklist to +# src/app-css/scss-sync-report.md for a human to port by hand (see the +# separate "Notify SCSS nesting sync" workflow). + +on: + pull_request: + branches: ['**'] + paths: + - 'src/app-css/app-*.css' + +permissions: + contents: write + pull-requests: write + +jobs: + sync: + runs-on: ubuntu-latest + if: github.event.pull_request.head.repo.full_name == github.repository + steps: + - uses: actions/checkout@v7 + with: + ref: ${{ github.event.pull_request.head.ref }} + fetch-depth: 0 + + - uses: actions/setup-node@v7 + with: + node-version: '24.x' + + - name: Find newly added app-*.css snapshots + id: added + run: | + FILES=$(git diff --name-only --diff-filter=A "${{ github.event.pull_request.base.sha }}" "${{ github.event.pull_request.head.sha }}" -- 'src/app-css/app-*.css') + if [ -z "$FILES" ]; then + echo "No new app-*.css snapshot added in this PR — nothing to sync." + echo "found=false" >> "$GITHUB_OUTPUT" + else + echo "found=true" >> "$GITHUB_OUTPUT" + echo "files<> "$GITHUB_OUTPUT" + echo "$FILES" >> "$GITHUB_OUTPUT" + echo "EOF" >> "$GITHUB_OUTPUT" + fi + + - name: Run sync for each new snapshot + if: steps.added.outputs.found == 'true' + run: | + while IFS= read -r file; do + [ -z "$file" ] && continue + echo "::group::sync-app-css.mjs --new $file" + node sync-app-css.mjs --new "$file" + echo "::endgroup::" + done <<< "${{ steps.added.outputs.files }}" + + - name: Commit and push updates + if: steps.added.outputs.found == 'true' + id: commit + run: | + git config user.name "github-actions[bot]" + git config user.email "github-actions[bot]@users.noreply.github.com" + if git status --porcelain -- src/css src/app-css | grep -q .; then + git add src/css src/app-css + git commit -m "Sync src/css with $(basename "$(echo "${{ steps.added.outputs.files }}" | head -n1)")" + git push origin "HEAD:${{ github.event.pull_request.head.ref }}" + echo "committed=true" >> "$GITHUB_OUTPUT" + else + echo "committed=false" >> "$GITHUB_OUTPUT" + fi + + - name: Comment on PR + if: steps.added.outputs.found == 'true' + uses: actions/github-script@v8 + with: + script: | + const fs = require('fs'); + let summary; + try { + summary = JSON.parse(fs.readFileSync('sync-summary.json', 'utf8')); + } catch { + return; + } + const lines = [ + `**app.css sync**: \`${summary.oldVersion}\` → \`${summary.newVersion}\``, + '', + `- Changed selectors applied to \`src/css/*.css\`: ${summary.changed}`, + `- Removed selectors applied to \`src/css/*.css\`: ${summary.removed}`, + `- New selectors staged in \`src/app-css/_new-selectors.css\`: ${summary.added}`, + ]; + if (summary.notFoundLocally > 0) { + lines.push(`- ${summary.notFoundLocally} changed/removed selector(s) from the old baseline were not found in any \`src/css/*.css\` file (already customized or removed by hand) — check the workflow log.`); + } + if (summary.scssReportUpdated) { + lines.push('', '`src/app-css/scss-sync-report.md` was updated with a checklist for porting these changes into the hand-nested `src/scss/*.scss` partials.'); + } + if (summary.added > 0) { + lines.push('', 'New selectors need a manual home in `src/css/` before they can be ported to SCSS — see `src/app-css/_new-selectors.css`.'); + } + await github.rest.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + body: lines.join('\n'), + }); diff --git a/.gitignore b/.gitignore index 7cf97fe..c6ceb34 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,6 @@ node_modules # Mac .DS_Store + +# sync-app-css.mjs output +sync-summary.json diff --git a/package.json b/package.json index 059dfb8..1b89628 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "1.0.0", "scripts": { "version": "node version-bump.mjs && git add manifest.json versions.json", - "lint": "stylelint \"**/*.css\"" + "lint": "stylelint \"**/*.css\"", + "sync-app-css": "node sync-app-css.mjs" }, "devDependencies": { "stylelint": "^17.0.0", diff --git a/src/app-css/app-1.13.4.css b/src/app-css/app-1.13.4.css new file mode 100644 index 0000000..6bd6dd3 --- /dev/null +++ b/src/app-css/app-1.13.4.css @@ -0,0 +1,18776 @@ +:root { + --h1-weight: 700; + --h2-weight: 600; + --h3-weight: 600; + --h4-weight: 600; + --h5-weight: 600; + --h6-weight: 600; +} +@supports (font-variation-settings: normal) { + :root { + --h1-weight: 700; + --h2-weight: 680; + --h3-weight: 660; + --h4-weight: 640; + --h5-weight: 620; + --h6-weight: 600; + } +} +body { + --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-header-border-width: 0 0 var(--border-width) 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-filter-input-background: var(--background-modifier-form-field); + --bases-group-heading-property-size: var(--font-ui-smaller); + --bases-group-heading-property-weight: var(--font-normal); + --bases-group-heading-property-color: var(--text-muted); + --bases-group-heading-value-size: var(--font-smaller); + --bases-group-heading-value-weight: var(--font-semibold); + --bases-group-heading-property-display: block; + --bases-table-container-border-width: var(--border-width); + --bases-table-container-border-radius: var(--radius-s); + --bases-table-group-background: var(--background-primary-alt); + --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-summary-background: var(--background-primary); + --bases-table-summary-background-hover: var(--background-modifier-hover); + --bases-table-border-color: var(--table-border-color); + --bases-table-column-border-width: var(--border-width); + --bases-table-group-gap: 10px; + --bases-table-row-border-width: var(--border-width); + --bases-table-row-background-hover: var(--table-row-background-hover); + --bases-table-row-height: 30px; + --bases-table-font-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(--background-modifier-border-focus); + --bases-table-cell-radius-focus: 2px; + --bases-table-cell-shadow-focus: 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-table-cell-background-selected: var(--table-selection); + --bases-cards-background: var(--background-primary); + --bases-cards-border-width: var(--border-width); + --bases-cards-container-background: transparent; + --bases-cards-corner-shape: var(--corner-shape); + --bases-cards-cover-background: var(--background-primary-alt); + --bases-cards-font-size: var(--font-smaller); + --bases-cards-line-height: 24px; + --bases-cards-radius: var(--radius-m); + --bases-cards-scale: 1; + --bases-cards-shadow-hover: 0 0 0 1px var(--background-modifier-border-hover); + --bases-cards-shadow: 0 0 0 1px var(--background-modifier-border); + --blockquote-border-thickness: 2px; + --blockquote-border-color: var(--interactive-accent); + --blockquote-font-style: normal; + --blockquote-color: inherit; + --blockquote-background-color: transparent; + --bold-modifier: 200; + --bold-color: inherit; + --bold-weight: calc(var(--font-weight) + var(--bold-modifier)); + --border-width: 1px; + --button-radius: var(--input-radius); + --button-corner-shape: var(--corner-shape); + --blur-background: color-mix(in srgb, var(--background-primary) var(--blur-opacity-s), transparent) linear-gradient(var(--background-primary), color-mix(in srgb, var(--background-primary) var(--blur-opacity-s), transparent)); + --blur-opacity-s: 65%; + --blur-opacity-m: 90%; + --blur-brightness: 1.15; + --blur-saturation: 1.5; + --blur-radius-s: 6px; + --blur-radius-m: 10px; + --blur-radius-l: 16px; + --blur-s: blur(var(--blur-radius-s)) saturate(var(--blur-saturation)) brightness(var(--blur-brightness)); + --blur-m: blur(var(--blur-radius-m)) saturate(var(--blur-saturation)) brightness(var(--blur-brightness)); + --blur-l: blur(var(--blur-radius-l)) saturate(var(--blur-saturation)) brightness(var(--blur-brightness)); + --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); + --callout-default: var(--color-blue); + --callout-error: var(--color-red); + --callout-example: var(--color-purple); + --callout-fail: var(--color-red); + --callout-important: var(--color-cyan); + --callout-info: var(--color-blue); + --callout-question: var(--color-orange); + --callout-success: var(--color-green); + --callout-summary: var(--color-cyan); + --callout-tip: var(--color-cyan); + --callout-todo: var(--color-blue); + --callout-warning: var(--color-orange); + --callout-quote: #9e9e9e; + --canvas-background: var(--background-primary); + --canvas-card-label-color: var(--text-faint); + --canvas-color-1: var(--color-red); + --canvas-color-2: var(--color-orange); + --canvas-color-3: var(--color-yellow); + --canvas-color-4: var(--color-green); + --canvas-color-5: var(--color-cyan); + --canvas-color-6: var(--color-purple); + --canvas-controls-radius: var(--radius-s); + --canvas-controls-icon-size: var(--icon-s); + --canvas-controls-icon-stroke: var(--icon-s-stroke-width); + --canvas-dot-pattern: var(--color-base-30); + --caret-color: var(--text-normal); + --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-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-icon-color: var(--text-faint); + --collapse-icon-color-collapsed: var(--text-accent); + --cursor: default; + --cursor-link: pointer; + --dialog-width: 560px; + --dialog-max-width: 80vw; + --dialog-max-height: 85vh; + --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)); + --drag-ghost-background: rgba(0, 0, 0, 0.85); + --drag-ghost-text-color: #fff; + --drag-item-background: var(--background-primary); + --drag-item-shadow: 0 2px 8px var(--background-modifier-box-shadow); + --dropdown-background: var(--interactive-normal); + --dropdown-background-hover: var(--interactive-hover); + --dropdown-background-blend-mode: hard-light, normal; + --dropdown-background-position: var(--inset-end) var(--dropdown-icon-inset) top 50%, var(--inset-end) 0.15em top 50%, 0 0; + --dropdown-background-size: var(--dropdown-icon-width) auto, 2em 2em, 100%; + --dropdown-icon-background: transparent; + --dropdown-icon-width: 1em; + --dropdown-icon-inset: 0.65em; + --dropdown-padding: 0 var(--dropdown-padding-end) 0 var(--dropdown-padding-start); + --dropdown-padding-start: 0.8em; + --dropdown-padding-end: 2.4em; + --dropdown-text-align: start; + --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; + --embed-actions-background: color-mix(in srgb, var(--background-primary) 80%, transparent); + --embed-actions-blur: var(--blur-s); + --embed-actions-corner-shape: var(--corner-shape); + --embed-actions-padding: var(--size-2-1); + --embed-actions-radius: calc(var(--embed-action-radius) + var(--embed-actions-padding)); + --embed-actions-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 0 6px 0 rgba(0, 0, 0, 0.05); + --embed-action-color: var(--text-normal); + --embed-action-radius: var(--clickable-icon-radius); + --embed-block-shadow-hover: 0 0 0 1px var(--background-modifier-border), inset 0 0 0 1px var(--background-modifier-border); + --file-line-width: 700px; + --file-folding-offset: 24px; + --file-margins: var(--file-margins-y) var(--file-margins-x); + --file-margins-x: var(--size-4-8); + --file-margins-y: 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-background: var(--background-primary); + --file-header-background-focused: var(--background-primary); + --file-header-border: var(--border-width) solid transparent; + --file-header-justify: center; + --header-height: 40px; + --font-smallest: 0.8em; + --font-smaller: 0.875em; + --font-small: 0.933em; + --flair-background: var(--interactive-normal); + --flair-color: var(--text-normal); + --font-ui-smaller: 12px; + --font-ui-small: 13px; + --font-ui-medium: 15px; + --font-ui-large: 20px; + --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; + --footnote-divider-color-active: var(--metadata-divider-color-focus); + --footnote-divider-color: var(--metadata-divider-color); + --footnote-divider-width: var(--border-width); + --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); + --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); + --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-letter-spacing: -0.015em; + --h2-letter-spacing: -0.011em; + --h3-letter-spacing: -0.008em; + --h4-letter-spacing: -0.005em; + --h5-letter-spacing: -0.002em; + --h6-letter-spacing: 0em; + --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.618em; + --h2-size: 1.462em; + --h3-size: 1.318em; + --h4-size: 1.188em; + --h5-size: 1.076em; + --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; + --hr-color: var(--background-modifier-border); + --hr-thickness: 2px; + --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); + --image-radius: 4px; + --indent-size: 4; + --indent-unit: 0.5625em; + --indentation-guide-width: var(--border-width); + --indentation-guide-width-active: var(--border-width); + --indentation-guide-color: color-mix(in oklch, var(--mono-100) 12%, transparent); + --indentation-guide-color-active: color-mix(in oklch, var(--mono-100) 30%, transparent); + --indentation-guide-editing-indent: 0.85em; + --indentation-guide-reading-indent: -0.85em; + --indentation-guide-source-indent: 0.25em; + --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; + --input-height: 30px; + --input-padding: var(--size-4-1) var(--size-4-2); + --input-radius: 5px; + --input-corner-shape: var(--corner-shape); + --input-font-weight: var(--font-normal); + --input-border-width: var(--border-width); + --input-border-width-focus: 2px; + --input-placeholder-color: var(--text-faint); + --input-date-separator: var(--text-faint); + --input-icon-inset: var(--size-4-1); + --italic-color: inherit; + --italic-weight: inherit; + --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; + --lightbox-background: black; + --lightbox-titlebar-color: white; + --lightbox-titlebar-display: flex; + --line-height-normal: 1.5; + --line-height-tight: 1.3; + --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: color-mix(in oklch, var(--interactive-accent) 30%, transparent); + --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; + --nav-item-size: var(--font-ui-small); + --nav-item-radius: var(--radius-s); + --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: color-mix(in oklch, var(--color-accent) 15%, transparent); + --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-margin-bottom: var(--size-2-1); + --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); + --nav-tag-background: transparent; + --nav-tag-radius: var(--radius-s); + --nav-tag-color: var(--text-faint); + --nav-tag-color-hover: var(--text-muted); + --nav-tag-color-active: var(--text-muted); + --nav-tag-weight: var(--font-semibold); + --menu-padding: var(--size-2-3); + --menu-shadow: var(--shadow-s); + --menu-radius: var(--radius-m); + --menu-corner-shape: var(--corner-shape); + --menu-background: var(--background-secondary); + --menu-border-color: var(--background-modifier-border-hover); + --menu-border-width: var(--border-width); + --menu-backdrop-filter: none; + --menu-scroll-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 48px); + --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-corner-shape: var(--corner-shape); + --metadata-property-corner-shape-hover: var(--corner-shape); + --metadata-property-corner-shape-focus: var(--corner-shape); + --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 var(--border-width) 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-input-padding: var(--size-4-1) var(--size-4-2); + --metadata-sidebar-label-font-size: var(--font-ui-small); + --metadata-sidebar-input-font-size: var(--font-ui-small); + --modal-background: var(--background-primary); + --modal-sidebar-background: var(--modal-background); + --modal-width: 90vw; + --modal-header-height: auto; + --modal-height: 85vh; + --modal-max-width: 1100px; + --modal-max-height: 1000px; + --modal-max-width-narrow: 800px; + --modal-shadow: none; + --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; + --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; + --p-spacing: 1rem; + --p-spacing-empty: 0rem; + --popover-width: 450px; + --popover-height: 400px; + --popover-max-height: 95vh; + --popover-font-size: var(--font-text-size); + --prompt-background: var(--background-primary); + --prompt-backdrop-filter: none; + --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)); + --corner-shape: round; + --radius-s: 4px; + --radius-m: 8px; + --radius-l: 12px; + --radius-xl: 24px; + --raised-background: var(--blur-background); + --raised-blur: var(--blur-s); + --raised-shadow: var(--shadow-xs); + --raised-mask-display: block; + --raised-mask-border-width: 0; + --raised-mask-background: linear-gradient(to bottom left, white, transparent, white) border-box no-repeat; + --raised-mask: linear-gradient(white, white) padding-box, linear-gradient(white, white) border-box; + --raised-mask-composite: exclude, add; + --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); + --scrollbar-width: 12px; + --scrollbar-height: 12px; + --scrollbar-border-width: 3px 3px 3px 2px; + --scrollbar-radius: var(--radius-l); + --scrollbar-active-thumb-bg: color-mix(in oklch, var(--mono-100) 20%, transparent); + --scrollbar-bg: transparent; + --scrollbar-thumb-bg: color-mix(in oklch, var(--mono-100) 10%, transparent); + --scrollbar-native-width: auto; + --search-clear-button-color: var(--text-muted); + --search-clear-button-size: 13px; + --search-icon-color: var(--text-muted); + --search-icon-size: 16px; + --search-input-corner-shape: var(--input-corner-shape); + --search-input-radius: var(--input-radius); + --search-result-background: var(--background-primary); + --settings-background: var(--modal-background); + --setting-group-heading-color: var(--text-normal); + --setting-group-heading-size: var(--font-ui-medium); + --setting-group-heading-weight: var(--font-semibold); + --setting-group-max-width: 700px; + --setting-items-background: var(--background-primary-alt); + --setting-items-padding-x: var(--size-4-5); + --setting-items-padding-y: var(--size-4-5); + --setting-items-radius: var(--radius-l); + --setting-items-border-width: 0; + --setting-items-border-color: var(--background-modifier-border); + --setting-items-divider-width: 1px; + --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-markdown-font-size: calc(var(--font-text-size) * 0.9); + --sidebar-tab-text-display: none; + --sidebar-left-toggle-inner-width: 8.33%; + --sidebar-right-toggle-inner-width: 8.33%; + --sidebar-left-toggle-inner-width-open: 24%; + --sidebar-right-toggle-inner-width-open: 24%; + --slider-thumb-border-width: 0.5px; + --slider-thumb-border-color: var(--background-modifier-border-hover); + --slider-thumb-background: white; + --slider-thumb-background-hover: white; + --slider-thumb-height: 18px; + --slider-thumb-width: 18px; + --slider-thumb-height-active: var(--slider-thumb-height); + --slider-thumb-width-active: var(--slider-thumb-width); + --slider-thumb-y: -6px; + --slider-thumb-y-active: var(--slider-thumb-y); + --slider-thumb-radius: var(--slider-thumb-height); + --slider-thumb-shadow: 0 0px 2px 0px rgba(0, 0, 0, 0.1), 0 2px 6px 0px rgba(0, 0, 0, 0.1); + --slider-thumb-shadow-hover: var(--slider-thumb-shadow); + --slider-thumb-shadow-active: var(--slider-thumb-shadow); + --slider-thumb-shadow-focus: var(--slider-thumb-shadow-active), 0 0px 0px 2px var(--background-modifier-border-focus); + --slider-s-thumb-size: 15px; + --slider-s-thumb-position: -5px; + --slider-track-background: var(--background-modifier-border-hover); + --slider-track-height: 4px; + --slider-value-font-size: var(--font-ui-small); + --slider-value-font-weight: var(--input-font-weight); + --status-bar-background: var(--background-secondary); + --status-bar-border-color: var(--divider-color); + --status-bar-border-width: var(--border-width) 0 0 var(--border-width); + --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; + --suggestion-background: var(--background-primary); + --suggestion-backdrop-filter: none; + --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-radius: 14px; + --swatch-height: 22px; + --swatch-width: 22px; + --swatch-shadow: inset 0 0 0 1px color-mix(in oklch, var(--mono-100) 15%, transparent); + --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; + --tab-switcher-menubar-background: linear-gradient(to top, var(--background-secondary), transparent); + --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 color-mix(in oklch, var(--mono-100) 5%, transparent); + --tab-switcher-preview-shadow-active: 0 0 0 2px var(--color-accent); + --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); + --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: color-mix(in oklch, var(--color-accent) 10%, transparent); + --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); + --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: color-mix(in oklch, var(--interactive-accent) 10%, transparent); + --tag-background-hover: color-mix(in oklch, var(--interactive-accent) 20%, transparent); + --tag-border-color: color-mix(in oklch, var(--interactive-accent) 15%, transparent); + --tag-border-color-hover: color-mix(in oklch, var(--interactive-accent) 15%, transparent); + --tag-border-width: 0px; + --tag-padding-x: 0.65em; + --tag-padding-y: 0.25em; + --tag-radius: 2em; + --tag-corner-shape: round; + --tag-weight: inherit; + --traffic-lights-offset-x: var(--header-height); + --traffic-lights-offset-y: var(--header-height); + --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); + --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-thumb-opacity-active: 1; + --toggle-s-border-width: 2px; + --toggle-s-width: 34px; + --toggle-s-thumb-height: 15px; + --toggle-s-thumb-width: 15px; + --touch-size-xxs: 24px; + --touch-size-xs: 30px; + --touch-size-s: 40px; + --touch-size-m: 44px; + --touch-size-l: 52px; + --touch-size-xl: 60px; + --touch-radius-xxs: var(--touch-size-xxs); + --touch-radius-xs: var(--touch-size-xs); + --touch-radius-s: var(--touch-size-s); + --touch-radius-m: var(--touch-size-m); + --touch-radius-l: var(--touch-size-l); + --touch-radius-xl: var(--touch-size-xl); + --vault-profile-display: flex; + --vault-profile-order: 2; + --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); + --vault-profile-radius: var(--radius-s); + --workspace-background-translucent: color-mix(in oklch, var(--mono-0) 60%, transparent); + --accent-h: 258; + --accent-s: 88%; + --accent-l: 66%; + --background-primary: var(--color-base-00); + --background-primary-alt: var(--color-base-10); + --background-secondary: var(--color-base-20); + --background-modifier-hover: color-mix(in oklch, var(--mono-100) 6.7%, transparent); + --background-modifier-active-hover: color-mix(in oklch, var(--interactive-accent) 10%, transparent); + --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: var(--color-red); + --background-modifier-warning: var(--color-orange); + --background-modifier-error-hover: var(--color-red); + --background-modifier-warning-hover: var(--color-orange); + --background-modifier-success: var(--color-green); + --background-modifier-message: color-mix(in oklch, black 90%, transparent); + --background-modifier-form-field: var(--color-base-00); + --background-modifier-form-field-hover: var(--background-modifier-form-field); + --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: color-mix(in oklch, var(--interactive-accent) 20%, transparent); + --text-highlight-bg: rgba(255, 208, 0, 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: var(--color-accent-1); + --interactive-accent-hover: var(--color-accent-2); + --interactive-accent-hsl: var(--color-accent-hsl); + --background-modifier-error-rgb: var(--color-red-rgb); + --background-modifier-success-rgb: var(--color-green-rgb); + --text-highlight-bg-rgb: 255, 208, 0; +} +.theme-light { + color-scheme: light; + --highlight-mix-blend-mode: darken; + --mono-0: white; + --mono-100: black; + --color-red: #e93147; + --color-orange: #ec7500; + --color-yellow: #e0ac00; + --color-green: #08b94e; + --color-cyan: #00bfbc; + --color-blue: #086ddd; + --color-purple: #7852ee; + --color-pink: #d53984; + --color-base-00: #ffffff; + --color-base-05: #fcfcfc; + --color-base-10: #fafafa; + --color-base-20: #f6f6f6; + --color-base-25: #efefef; + --color-base-30: #e4e4e4; + --color-base-35: #dadada; + --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-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 1px 2px 0 rgba(0, 0, 0, 0.065), 0 0 0 0 transparent; + --input-shadow-hover: inset 0 0 0 1px rgba(0, 0, 0, 0.17), 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 0 0 0 transparent; + --shadow-edges: 0 0 transparent; + --shadow-xs: 0 1px 6px rgba(0, 0, 0, 0.015), 0 4px 24px rgba(0, 0, 0, 0.065), var(--shadow-edges); + --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); + --mono-rgb-0: 255, 255, 255; + --mono-rgb-100: 0, 0, 0; + --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); + --color-red-rgb: 233, 49, 71; + --color-orange-rgb: 236, 117, 0; + --color-yellow-rgb: 224, 172, 0; + --color-green-rgb: 8, 185, 78; + --color-cyan-rgb: 0, 191, 188; + --color-blue-rgb: 8, 109, 221; + --color-purple-rgb: 120, 82, 238; + --color-pink-rgb: 213, 57, 132; +} +.theme-dark { + color-scheme: dark; + --highlight-mix-blend-mode: lighten; + --mono-0: black; + --mono-100: white; + --color-red: #fb464c; + --color-orange: #e9973f; + --color-yellow: #e0de71; + --color-green: #44cf6e; + --color-cyan: #53dfdd; + --color-blue: #027aff; + --color-purple: #a882ff; + --color-pink: #fa99cd; + --color-base-00: #1C1C1C; + --color-base-05: #212121; + --color-base-10: #232323; + --color-base-20: #282828; + --color-base-25: #2e2e2e; + --color-base-30: #333333; + --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-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)); + --blur-background: color-mix(in srgb, var(--interactive-normal) var(--blur-opacity-s), transparent) linear-gradient(var(--interactive-normal), color-mix(in srgb, var(--interactive-normal) var(--blur-opacity-s), transparent)); + --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); + --raised-mask-background: transparent; + --text-selection: color-mix(in oklch, var(--interactive-accent) 33%, transparent); + --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-xs: 0 1px 6px rgba(0, 0, 0, 0.045), 0 4px 24px rgba(0, 0, 0, 0.195), var(--shadow-edges); + --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); + --mono-rgb-0: 0, 0, 0; + --mono-rgb-100: 255, 255, 255; + --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); + --color-red-rgb: 251, 70, 76; + --color-orange-rgb: 233, 151, 63; + --color-yellow-rgb: 224, 222, 113; + --color-green-rgb: 68, 207, 110; + --color-cyan-rgb: 83, 223, 221; + --color-blue-rgb: 2, 122, 255; + --color-purple-rgb: 168, 130, 255; + --color-pink-rgb: 250, 153, 205; +} +.mod-macos { + --clickable-icon-radius: var(--radius-m); + --corner-shape: superellipse(1.33); + --input-radius: var(--radius-m); + --input-icon-inset: var(--size-4-2); + --input-shadow: none; + --input-shadow-hover: none; + --interactive-normal: var(--background-modifier-border); + --interactive-hover: var(--background-modifier-border); + --modal-radius: var(--radius-xl); + --scrollbar-thumb-bg: gray; + --search-input-radius: 100px; + --search-input-corner-shape: round; + --slider-thumb-border-width: 0; + --slider-thumb-width: 30px; + --slider-thumb-opacity-active: 0.7; + --slider-thumb-height-active: calc(var(--slider-thumb-height) + 4px); + --slider-thumb-width-active: calc(var(--slider-thumb-width) + 4px); + --slider-thumb-y-active: calc(var(--slider-thumb-y) - 2px); + --tab-radius: var(--radius-m); + --toggle-width: 44px; + --toggle-radius: 24px; + --toggle-thumb-radius: 24px; + --toggle-thumb-height: 16px; + --toggle-thumb-width: 26px; + --toggle-thumb-opacity-active: 0.6; + --toggle-s-width: 36px; + --toggle-s-thumb-height: 12px; + --toggle-s-thumb-width: 20px; + --vault-profile-radius: var(--radius-m); +} +iframe { + color-scheme: normal; +} +@media print { + .theme-dark { + --highlight-mix-blend-mode: darken; + } +} +@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: "Inter"; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url(public/fonts/c504db5c06caaf7cdfba.woff2); +} +@font-face { + font-family: "Inter"; + font-style: italic; + font-weight: 100 900; + font-display: swap; + src: url(public/fonts/01dcbad1bac635f9c9cd.woff2); +} +@font-face { + font-family: '??'; + unicode-range: U+0; +} +body { + --font-default: ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Google Sans Flex", Roboto, "Inter Variable", "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; /* kept !important because Obsidian app.css uses !important here */ + overflow: auto !important; /* kept !important because Obsidian app.css uses !important here */ + height: auto !important; /* kept !important because Obsidian app.css uses !important here */ + contain: initial !important; /* kept !important because Obsidian app.css uses !important here */ + } + iframe, + .titlebar, + .app-container, + .progress-bar, + .popover, + .markdown-embed-link, + .suggestion-container, + .cm-tooltip.cm-tooltip-autocomplete { + display: none !important; /* kept !important because Obsidian app.css uses !important here */ + } + body > :not(.print) { + display: none !important; /* kept !important because Obsidian app.css uses !important here */ + } + .print .markdown-preview-view { + -webkit-print-color-adjust: exact; + color: initial; + height: unset !important; /* kept !important because Obsidian app.css uses !important here */ + } + .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; /* kept !important because Obsidian app.css uses !important here */ + } + .print .bases-toolbar svg.lucide-chevrons-up-down { + display: none; + } + .print .bases-toolbar .bases-toolbar-item.bases-toolbar-sort-menu, + .print .bases-toolbar .bases-toolbar-item.bases-toolbar-filter-menu, + .print .bases-toolbar .bases-toolbar-item.bases-toolbar-properties-menu, + .print .bases-toolbar .bases-toolbar-item.bases-toolbar-new-item-menu { + display: none; + } + .print .external-link { + background: none; + padding-right: 0; + } + * { + text-shadow: none !important; /* kept !important because Obsidian app.css uses !important here */ + } + webview { + display: none; + } + ::-webkit-scrollbar { + display: none; + } + body { + --font-text: var(--font-print) !important; /* kept !important because Obsidian app.css uses !important here */ + } +} +* { + 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; /* kept !important because Obsidian app.css uses !important here */ + 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; /* kept !important because Obsidian app.css uses !important here */ + cursor: -webkit-grabbing !important; /* kept !important because Obsidian app.css uses !important here */ + cursor: grabbing !important; /* kept !important because Obsidian app.css uses !important here */ +} +body.is-grabbing { + --no-tooltip: true; +} +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; /* kept !important because Obsidian app.css uses !important here */ +} +.app-container.mod-loading .clickable-icon { + pointer-events: none; + touch-action: none; +} +.app-container.mod-loading .view-header .loader-spinner { + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); + margin: var(--size-4-3) var(--size-4-2); +} +.app-container.mod-loading .view-header .loader-spinner svg { + animation: spin 0.9s ease infinite; +} +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; /* kept !important because Obsidian app.css uses !important here */ + line-height: 1.45em !important; /* kept !important because Obsidian app.css uses !important here */ +} +.modal.mod-file-browser .modal-content { + display: flex; + flex-direction: column; + overflow: hidden; +} +.file-browser-description { + flex-shrink: 0; +} +.modal-view-options-toolbar { + display: flex; + gap: var(--size-4-1); + margin-bottom: var(--size-4-2); + justify-content: center; + flex-shrink: 0; +} +.modal-view-option.is-active { + color: var(--icon-color-active); +} +.file-browser-views { + flex: 1 1 auto; + min-height: 200px; + overflow: auto; +} +.attachments-gallery { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--size-4-1); +} +.attachments-gallery .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); +} +.attachments-gallery .download-attachment-item:before { + content: ''; + position: absolute; + box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--mono-100) 20%, transparent); + 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%); +} +.attachments-gallery .download-attachment-item:hover:before { + box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--mono-100) 30%, transparent); +} +.attachments-gallery .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; +} +.attachments-gallery .download-attachment-item input[type=checkbox]:not(:checked) { + background-color: var(--background-primary); +} +.attachments-gallery .download-attachment-item .download-attachment-embed { + overflow: hidden; + pointer-events: none; + border-radius: var(--radius-s); + width: 100%; + height: 100%; +} +.attachments-gallery .download-attachment-item img, +.attachments-gallery .download-attachment-item video { + object-fit: cover; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; +} +.attachments-gallery .download-attachment-item video::-webkit-media-controls { + display: none; +} +.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); +} +.cm-force-border { + padding-right: 0.1px; +} +.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); + corner-shape: var(--corner-shape); + z-index: var(--layer-dragged-item); + pointer-events: none; +} +.drag-reorder-ghost > .mod-dragged-item { + background-color: var(--drag-item-background); + box-shadow: var(--drag-item-shadow); +} +.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: color-mix(in oklch, var(--interactive-accent) 30%, transparent); +} +.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.mod-image-selected .cm-cursorLayer { + display: none; +} +.markdown-source-view.mod-cm6.mod-image-selected .cm-content { + caret-color: transparent; +} +.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; /* kept !important because Obsidian app.css uses !important here */ + 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; /* kept !important because Obsidian app.css uses !important here */ + display: block; +} +.markdown-source-view.mod-cm6 .cm-content > .image-embed { + display: flex; +} +.markdown-source-view.mod-cm6 .cm-content > [contenteditable=false] { + contain: paint !important; /* kept !important because Obsidian app.css uses !important here */ +} +.markdown-source-view.mod-cm6 .cm-gutters { + flex: 0 0 auto; + background-color: transparent; + color: var(--text-faint) !important; /* kept !important because Obsidian app.css uses !important here */ + border-right: none !important; /* kept !important because Obsidian app.css uses !important here */ + 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; /* kept !important because Obsidian app.css uses !important here */ + 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; /* kept !important because Obsidian app.css uses !important here */ +} +.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 { + opacity: 1; +} +@media (hover: hover) { + .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 .embed-actions { + position: absolute; + top: var(--size-2-2); + inset-inline-end: var(--size-2-2); + display: flex; + gap: var(--size-2-1); + opacity: 0; + transition: opacity 0.07s ease-out; +} +.markdown-source-view.mod-cm6 .embed-action { + padding: var(--size-2-2) var(--size-2-3); + display: flex; + color: var(--embed-action-color); + border-radius: var(--embed-action-radius); + corner-shape: var(--embed-actions-corner-shape); + cursor: var(--cursor); +} +@media (hover: hover) { + .markdown-source-view.mod-cm6 .embed-action: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; /* kept !important because Obsidian app.css uses !important here */ + width: 0 !important; /* kept !important because Obsidian app.css uses !important here */ + border: 0 !important; /* kept !important because Obsidian app.css uses !important here */ + margin: 0 !important; /* kept !important because Obsidian app.css uses !important here */ + padding: 0 !important; /* kept !important because Obsidian app.css uses !important here */ +} +.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; + padding-top: var(--size-4-5); + padding-bottom: var(--size-4-2); + padding-right: max(var(--size-4-4), var(--safe-area-inset-right)); + padding-left: max(var(--size-4-4), var(--safe-area-inset-left)); +} +body.is-phone .feedback-banner-container { + display: block; +} +.feedback-banner { + position: relative; +} +.feedback-banner-title { + color: var(--text-muted); + font-weight: var(--font-semibold); + font-size: var(--font-ui-small); + margin-bottom: var(--size-4-4); + padding-inline-start: var(--size-4-4); +} +.feedback-banner-content { + font-size: var(--font-ui-small); + display: flex; + flex-direction: column; + row-gap: var(--size-4-4); + background-color: var(--setting-items-background); + padding: var(--size-4-4); + border-radius: var(--setting-items-radius); + border: var(--setting-items-border-width) solid var(--setting-items-border-color); + corner-shape: var(--corner-shape); +} +.feedback-banner-dismiss-button { + position: absolute; + font-weight: var(--font-semibold); + top: -8px; + inset-inline-end: var(--size-4-2); + padding: var(--size-4-2) var(--size-4-1); + color: var(--interactive-accent); + font-size: var(--font-ui-smaller); +} +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.is-hidden-frameless.starter, +body.is-frameless.is-hidden-frameless.is-popout-modal:not(.is-fullscreen), +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.is-hidden-frameless.starter .titlebar, +body.is-frameless.is-hidden-frameless.is-popout-modal:not(.is-fullscreen) .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.is-hidden-frameless.starter:not(.is-maximized) .titlebar, +body.is-frameless.is-hidden-frameless.is-popout-modal:not(.is-fullscreen):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); +} +.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, .is-popout-modal) .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(--file-header-background); + 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(--file-header-background-focused); +} +.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: color-mix(in oklch, var(--interactive-accent) 50%, transparent); +} +.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; + --scrollbar-native-width: none; + scroll-padding-inline-end: 20px; + text-overflow: ellipsis; + white-space: pre; +} +.view-header-title::-webkit-scrollbar { + display: none; +} +.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-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 > :first-child { + margin-top: 0; +} +.markdown-rendered > :last-child { + margin-bottom: 0; +} +.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; +} +.workspace-ribbon.mod-left { + margin-top: var(--header-height); +} +.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, +body:not(.show-ribbon) .side-dock-ribbon { + display: none; +} +.workspace-ribbon { + --drag-item-background: var(--ribbon-background); + 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; +} +.is-phone .view-header { + direction: ltr; +} +.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; +} +body, +[dir='ltr'] { + --direction: 1; + --inset-start: left; + --inset-end: right; +} +.mod-rtl, +[dir='rtl'] { + --direction: -1; + --inset-start: right; + --inset-end: left; +} +@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); + --dropdown-padding: 0 var(--dropdown-padding-start) 0 var(--dropdown-padding-end); +} +.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; +} +.mod-rtl .bases-embed, +.is-rtl .bases-embed, +.rtl .bases-embed { + direction: rtl; +} +@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; +} +@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); + } +} +.mod-rtl { + --tab-stacked-text-transform: rotate(180deg); +} +.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 .embed-actions, +.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 .bases-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( + .check-small, + .lucide-binary, + .lucide-check, + .lucide-check-square, + .lucide-clock, + .lucide-code-2, + .lucide-square-function, + .lucide-timer, + .sidebar-toggle-button-icon + ) { + transform: scale(-1, 1); +} +[lang="he"] svg.svg-icon:is( + .lucide-help-circle, + .help + ) { + transform: scale(1, 1); +} +.mod-macos:not(.is-mobile) .mod-settings { + --dropdown-background: transparent; + --dropdown-background-hover: var(--interactive-hover); + --dropdown-icon-background: var(--interactive-normal); + --dropdown-text-align: end; +} +.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-small); + 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 { + background-color: var(--settings-background); + --setting-group-center-offset: calc((100% - var(--setting-group-max-width)) / 2); +} +.modal.mod-settings .vertical-tab-header { + flex: 0 0 25%; + min-width: 200px; + max-width: 250px; + display: flex; + flex-direction: column; + overflow: hidden; + border-inline-end: var(--border-width) solid var(--divider-color); +} +.modal.mod-settings .vertical-tab-header .setting-search-container { + flex-shrink: 0; + padding: var(--size-4-3) var(--size-4-3) 0 var(--size-4-3); +} +.modal.mod-settings .vertical-tab-header .setting-search-results { + overflow-y: auto; + flex: 1; + min-height: 0; + padding: var(--size-4-3); +} +.modal.mod-settings .vertical-tab-header .vertical-tab-header-group-container { + padding: 0 var(--size-4-3) var(--size-4-3); + overflow-y: auto; + flex: 1; + min-height: 0; +} +.modal.mod-settings .modal-content { + margin-top: 0; + overflow: hidden; +} +.modal.mod-settings .vertical-tab-content:not(.setting-page) { + padding-inline: max(var(--size-4-8), var(--setting-group-center-offset)); +} +.modal.mod-settings .setting-page.vertical-tab-content { + padding-inline: 0; +} +.modal.mod-settings .setting-page.vertical-tab-content > .setting-page-titlebar { + padding-inline: max(var(--size-4-3), var(--setting-group-center-offset)); +} +.modal.mod-settings .setting-page.vertical-tab-content > .setting-page-content { + padding-inline: max(var(--size-4-8), var(--setting-group-center-offset)); +} +.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); +} +.form-field-help { + color: var(--text-faint); + font-size: var(--font-ui-small); +} +.setting-group { + width: 100%; + max-width: var(--setting-group-max-width); + margin-inline: auto; +} +.setting-group + .setting-group { + margin-top: var(--size-4-6); +} +.setting-group .setting-group-search { + background-color: var(--setting-items-background); + padding: var(--setting-items-padding-y) 0; + border-top-left-radius: var(--setting-items-radius); + border-top-right-radius: var(--setting-items-radius); + border: var(--setting-items-border-width) solid var(--setting-items-border-color); + border-bottom: none; +} +.setting-group .setting-group-search:empty { + display: none; +} +.setting-group .setting-group-search:focus-visible { + outline: 2px solid var(--background-modifier-border-focus); + outline-offset: -2px; +} +.setting-group .setting-group-search:not(:empty) + .setting-items { + border-top-left-radius: 0; + border-top-right-radius: 0; + padding-top: 0; + border-top: none; +} +.setting-group .setting-group-search:not(:empty) + .setting-items > .setting-item:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.setting-group .setting-items { + background-color: var(--setting-items-background); + border-radius: var(--setting-items-radius); + corner-shape: var(--corner-shape); + border: var(--setting-items-border-width) solid var(--setting-items-border-color); +} +.setting-group .setting-items:empty { + display: none; +} +.setting-group .setting-item:not(.setting-item-heading) { + border: none; + background-color: transparent; + border-radius: 0; + padding: var(--setting-items-padding-y) var(--setting-items-padding-x); + margin-bottom: 0; +} +.setting-group .setting-item:not(.setting-item-heading)::before { + content: ''; + position: absolute; + top: calc(-1 * var(--border-width)); + left: var(--setting-items-padding-x); + right: var(--setting-items-padding-x); + border-top: var(--setting-items-divider-width) solid var(--background-modifier-border); +} +.setting-group .setting-item:not(.setting-item-heading):first-child { + border-top-left-radius: var(--setting-items-radius); + border-top-right-radius: var(--setting-items-radius); +} +.setting-group .setting-item:not(.setting-item-heading):first-child::before { + content: none; +} +.setting-group .setting-item:not(.setting-item-heading):last-child { + border-bottom-left-radius: var(--setting-items-radius); + border-bottom-right-radius: var(--setting-items-radius); +} +.setting-group .setting-item-heading { + padding: 0 var(--size-4-4); + flex-wrap: wrap; + background-color: transparent; + margin-bottom: var(--size-4-4); +} +.setting-item { + position: relative; + display: flex; + align-items: flex-start; + row-gap: var(--size-4-3); + border-radius: var(--setting-items-radius); + background-color: var(--setting-items-background); + padding: var(--size-4-4); + margin-bottom: var(--size-4-2); + border: var(--setting-items-border-width) solid var(--setting-items-border-color); +} +.setting-item:focus-visible { + --setting-items-radius: var(--radius-s); + --setting-items-divider-width: 0; + outline: none; +} +.setting-item:focus-visible:after { + display: block; + content: ""; + position: absolute; + top: 0; + left: 0; + box-shadow: inset 0 0 0 2px var(--background-modifier-border-focus); + width: 100%; + height: 100%; + border-radius: var(--radius-m); + corner-shape: var(--corner-shape); + user-select: none; + pointer-events: none; + z-index: 1; +} +.setting-item + div > .setting-item-heading, +.setting-item + .setting-item-heading { + margin-top: 0.75em; +} +.setting-item > *:first-child { + margin-inline-end: var(--size-4-4); +} +.setting-item > *:last-child { + margin-inline-end: 0; +} +@media (forced-colors: active) { + .setting-item:focus-visible, + .setting-group-search:focus-visible { + outline-color: Highlight; + background-color: unset; + } +} +.modal:not(.mod-settings) .setting-item:not(.setting-item-heading):where(:not(.setting-group *)) { + padding: var(--size-4-4) 0; + border-top: var(--border-width) solid var(--background-modifier-border); + background-color: transparent; + border-radius: 0; + margin-bottom: 0; +} +.modal:not(.mod-settings) .setting-item:not(.setting-item-heading):where(:not(.setting-group *)):first-child { + border-top: none; + padding-top: 0; +} +.modal:not(.mod-settings) .setting-item:not(.setting-item-heading):where(:not(.setting-group *)):last-child { + padding-bottom: 0; +} +@container (max-width: 400px) { + .setting-item:not(:is(.mod-toggle, .mod-navigable, .mod-action, .setting-item-heading)) { + flex-direction: column; + } + .setting-item:not(:is(.mod-toggle, .mod-navigable, .mod-action, .setting-item-heading)) .setting-item-info { + margin-inline-end: 0; + align-self: flex-start; + } + .setting-item:not(:is(.mod-toggle, .mod-navigable, .mod-action, .setting-item-heading)) .setting-item-control { + width: 100%; + justify-content: flex-start; + } + .setting-item:not(:is(.mod-toggle, .mod-navigable, .mod-action, .setting-item-heading)) .setting-item-control button:not(.clickable-icon), + .setting-item:not(:is(.mod-toggle, .mod-navigable, .mod-action, .setting-item-heading)) .setting-item-control input, + .setting-item:not(:is(.mod-toggle, .mod-navigable, .mod-action, .setting-item-heading)) .setting-item-control select { + width: 100%; + max-width: 100%; + } + .setting-item:not(:is(.mod-toggle, .mod-navigable, .mod-action, .setting-item-heading)).is-invalid .setting-item-control { + max-width: unset; + } +} +.setting-item.mod-cta { + justify-content: center; +} +.setting-item a:focus-visible { + border-radius: var(--radius-s); + box-shadow: 0 0 0 2px var(--background-modifier-border-focus); +} +.setting-item-heading { + align-items: center; + border: none; + background-color: transparent; + color: var(--setting-group-heading-color); + font-size: var(--setting-group-heading-size); + font-weight: var(--setting-group-heading-weight); + padding: 0 var(--size-4-4); + margin: 0 0 var(--size-4-4); +} +.setting-item-heading .setting-item-name { + color: var(--setting-group-heading-color); + font-size: var(--setting-group-heading-size); + font-weight: var(--setting-group-heading-weight); +} +.setting-item-heading .setting-item-info { + flex-grow: 0; + margin-inline-end: 0; +} +.setting-item-heading .setting-item-description { + font-weight: var(--font-normal); + flex-basis: 100%; + padding-top: 0; + font-size: var(--font-ui-small); +} +.vertical-tab-content h1, +.vertical-tab-content h2, +.vertical-tab-content h3, +.vertical-tab-content h4 { + color: var(--setting-group-heading-color); + font-size: var(--setting-group-heading-size); + font-weight: var(--setting-group-heading-weight); + padding: 0 var(--size-4-4); + margin: 0 0 var(--size-4-4); +} +.vertical-tab-content .setting-item ~ :is(h1, h2, h3, h4, .setting-item-heading) { + margin-top: var(--size-4-6); +} +.setting-item.mod-navigable { + align-items: center; + cursor: var(--cursor); + transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; +} +.setting-item.mod-navigable .setting-item-control { + max-width: 40%; +} +.setting-item.mod-navigable.mobile-tap { + background-color: var(--background-modifier-hover); +} +.setting-item.mod-action { + align-items: center; + cursor: var(--cursor); +} +.setting-item.mod-action .setting-item-name { + color: var(--text-accent); +} +@media (hover: hover) { + .setting-item.mod-action:hover { + background-color: var(--background-modifier-hover); + } +} +.setting-item.mod-action.mobile-tap { + background-color: var(--background-modifier-hover); +} +.setting-item.mod-empty-state { + --setting-items-padding-y: var(--size-4-4); +} +.setting-item.mod-empty-state .setting-item-name { + font-size: var(--font-ui-small); + color: var(--text-muted); +} +.setting-item.mod-add-item .setting-item-name { + display: flex; + align-items: center; + gap: var(--size-4-2); +} +.setting-item.mod-add-item .mod-add-item-icon { + display: inline-flex; + align-items: center; +} +.setting-group.mod-list { + --setting-items-padding-x: var(--size-4-4); + --setting-items-padding-y: var(--size-4-2); +} +.setting-group.mod-list .setting-item { + align-items: center; +} +.setting-item-chevron { + display: flex; + align-items: center; + color: var(--text-faint); + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); +} +.setting-item-value { + color: var(--text-muted); + font-size: var(--font-ui-small); + text-align: end; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.setting-item-status { + display: flex; + align-items: center; + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); +} +.setting-item-status.mod-warning { + color: var(--text-warning); +} +.setting-page-titlebar { + position: sticky; + top: 0; + z-index: 1; + display: flex; + align-items: center; + gap: var(--size-4-1); + padding: var(--size-4-3) var(--size-4-3) 0 var(--size-4-3); + background-color: var(--settings-background); + box-shadow: 0 var(--size-4-2) var(--size-4-2) 0 var(--settings-background); +} +.setting-page-content { + margin-top: var(--size-4-3); +} +.setting-page.vertical-tab-content { + padding-top: 0; +} +.setting-page-back-button { + color: var(--text-muted); +} +.setting-page-title { + font-size: var(--font-ui-small); + font-weight: var(--font-semibold); +} +.setting-page-desc { + padding: var(--size-4-2); +} +.setting-item-info { + flex: 1 1 auto; + min-width: 0; +} +.setting-item.is-invalid .setting-item-control { + flex-wrap: wrap; + max-width: 50%; + row-gap: var(--size-4-1); +} +.setting-item-error { + flex: 0 1 100%; + min-width: 0; + color: var(--text-warning); + font-size: var(--font-ui-smaller); + line-height: var(--line-height-tight); + text-align: end; +} +.setting-item-error:empty { + display: none; +} +.setting-item-description { + --link-color: var(--text-muted); + --link-color-hover: var(--text-normal); + color: var(--text-muted); + font-size: var(--font-ui-smaller); + padding-top: var(--size-4-1); + line-height: var(--line-height-tight); + overflow: hidden; + text-overflow: ellipsis; +} +.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); + corner-shape: var(--corner-shape); + 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-small); + 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:empty { + display: none; +} +.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-item-control select.dropdown { + width: var(--dropdown-fitted-width, inherit); +} +.setting-item-control .combobox-button { + max-width: 250px; +} +.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-smaller); + background-color: var(--background-modifier-hover); + border-radius: var(--radius-m); + corner-shape: var(--corner-shape); + 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-password { + white-space: nowrap; + text-overflow: ellipsis; + max-width: 10ch; + overflow: hidden; +} +.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); + corner-shape: var(--corner-shape); + 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); +} +.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; +} +.input-right-decorator { + position: absolute; + transform: translateY(-50%); + top: 50%; + inset-inline-end: var(--input-icon-inset); +} +.setting-group .setting-group-search { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: var(--size-4-2); + padding-top: var(--size-4-4); +} +.setting-group .setting-group-search > .search-input-container { + flex: 1; + margin-inline: var(--setting-items-padding-x); + min-width: 0; +} +.setting-group .setting-group-search-control { + flex: 1 0 100%; + margin: var(--size-4-1) 0; + overflow: hidden; + padding-inline: var(--setting-items-padding-x); +} +.setting-group-filters { + display: flex; + gap: var(--size-2-3); + margin-inline-end: calc(var(--setting-items-padding-x) * -1); + min-width: 0; + overflow-x: auto; + padding-inline-end: var(--setting-items-padding-x); + --scrollbar-native-width: none; +} +.setting-group-filters::-webkit-scrollbar { + display: none; +} +.setting-group-filter { + display: inline-flex; + align-items: center; + gap: var(--size-2-2); + background-color: transparent; + border: var(--border-width) solid var(--background-modifier-border); + border-radius: var(--pill-radius); + color: var(--text-muted); + cursor: var(--cursor); + flex-shrink: 0; + font-size: var(--font-ui-smaller); + padding: var(--size-4-1) var(--size-4-2); + white-space: nowrap; +} +@media (hover: hover) { + .setting-group-filter:hover { + border-color: var(--background-modifier-border-hover); + color: var(--text-normal); + } +} +.setting-group-filter:focus-visible { + outline: 2px solid var(--background-modifier-border-focus); + outline-offset: -2px; +} +.setting-group-filter.is-active { + background-color: var(--interactive-accent); + border-color: var(--interactive-accent); + color: var(--text-on-accent); +} +@media (hover: hover) { + .setting-group-filter.is-active:hover { + background-color: var(--interactive-accent); + border-color: var(--interactive-accent); + color: var(--text-on-accent); + } +} +.setting-group-filter.mod-error { + border-color: color-mix(in oklch, var(--background-modifier-error) 15%, transparent); + background-color: color-mix(in oklch, var(--background-modifier-error) 10%, transparent); + color: var(--text-error); +} +@media (hover: hover) { + .setting-group-filter.mod-error:hover { + border-color: color-mix(in oklch, var(--background-modifier-error) 25%, transparent); + color: var(--text-error); + } +} +.setting-group-filter.mod-error.is-active { + background-color: var(--background-modifier-error); + border-color: var(--background-modifier-error); + color: var(--text-on-accent); +} +@media (hover: hover) { + .setting-group-filter.mod-error.is-active:hover { + background-color: var(--background-modifier-error-hover); + border-color: var(--background-modifier-error-hover); + color: var(--text-on-accent); + } +} +.setting-group-filter-badge { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.15em 0.5em; + border-radius: var(--pill-radius); + font-size: var(--font-small); + line-height: 1; + background-color: color-mix(in oklch, var(--background-modifier-error) 15%, transparent); +} +.is-active .setting-group-filter-badge { + background-color: var(--text-on-accent); + color: var(--background-modifier-error); +} +.search-input-container.mod-hotkey .clickable-icon { + padding: var(--size-2-1); +} +.search-input-container.mod-hotkey .input-right-decorator.mod-active-hotkey-filter { + align-items: center; + background-color: var(--background-modifier-hover); + border-radius: var(--radius-s); + corner-shape: var(--corner-shape); + display: flex; + font-size: var(--font-ui-small); + gap: var(--size-2-1); + padding: var(--size-2-1) var(--size-2-1) var(--size-2-1) var(--size-4-1); +} +.search-input-container.mod-hotkey .input-right-decorator.mod-active-hotkey-filter .hotkey-filter-clear { + align-items: center; + border-radius: var(--radius-s); + color: var(--text-muted); + corner-shape: var(--corner-shape); + cursor: var(--cursor); + display: flex; + padding: var(--size-2-1); + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); +} +@media (hover: hover) { + .search-input-container.mod-hotkey .input-right-decorator.mod-active-hotkey-filter .hotkey-filter-clear: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(--input-icon-inset); +} +.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 { + border-radius: var(--search-input-radius); +} +.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(--input-icon-inset) + 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); +} +.modal.mod-secret .suggestion-filter-toolbar { + display: flex; + padding: var(--size-4-4) var(--size-4-4) 0 var(--size-4-4); + gap: var(--size-4-2); +} +.modal.mod-secret .suggestion-filter-toolbar .search-input-container { + flex: 1; +} +.modal.mod-secret .modal-content.keychain-list-results { + border-top: var(--border-width) solid var(--background-modifier-border); + padding: var(--size-4-1) var(--size-4-4); + height: 300px; +} +.suggestion-item.mod-complex.suggestion-secret-key { + --checkbox-size: 18px; + align-items: center; + gap: var(--size-4-1); +} +.suggestion-item.mod-complex.suggestion-secret-key.is-selected { + background-color: color-mix(in oklch, var(--color-accent) 15%, transparent); +} +.suggestion-item.mod-complex.suggestion-secret-key .flair { + color: var(--text-accent); +} +.suggestion-item.mod-complex.suggestion-secret-key .suggestion-content { + align-items: center; + flex-direction: row; +} +.suggestion-item.mod-complex.suggestion-secret-key .suggestion-secret-text { + margin: 0 var(--size-4-1); +} +body.is-popout-modal { + --traffic-lights-offset-x: 32px; + --traffic-lights-offset-y: 32px; +} +body.is-popout-modal.is-frameless .titlebar { + border-bottom: var(--border-width) solid var(--divider-color); +} +body.is-popout-modal > .modal.mod-community-modal, +body.is-popout-modal > .modal.mod-settings { + width: 100%; + height: 100%; + max-width: none; + max-height: none; + border: none; + border-radius: 0; + box-shadow: none; +} +body.is-popout-modal > .modal.mod-community-modal .modal-header-button, +body.is-popout-modal > .modal.mod-settings .modal-header-button, +body.is-popout-modal > .modal.mod-community-modal .modal-close-button, +body.is-popout-modal > .modal.mod-settings .modal-close-button { + display: none; +} +.mod-community-modal .modal-sidebar .setting-item:not(.setting-item-heading) { + max-width: var(--modal-community-sidebar-width); + padding: 0 var(--size-4-3) var(--size-4-1); + border: none; + gap: var(--size-4-2); + background-color: transparent; +} +.mod-community-modal .modal-sidebar .community-modal-search { + display: flex; + align-items: center; + gap: var(--size-4-2); + max-width: 500px; + padding: 0 var(--size-4-3) var(--size-4-1); + 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); + 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-search-results-status { + position: absolute; + bottom: max(var(--size-4-3), var(--safe-area-inset-bottom)); + margin-left: max(var(--size-4-2), var(--safe-area-inset-left)); + margin-right: max(var(--size-4-2), var(--safe-area-inset-right)); + left: 0; + right: 0; + display: flex; + justify-content: center; +} +.community-modal-search-results-status-content { + background-color: var(--background-primary); + text-align: center; + padding: var(--size-4-2) var(--size-4-3); + border: var(--border-width) solid var(--background-modifier-border); + border-radius: var(--radius-l); + display: flex; + align-items: center; + gap: var(--size-4-2); +} +.community-modal-search-results-cta { + display: flex; + align-items: center; + justify-content: center; + color: var(--text-accent); + white-space: nowrap; + cursor: var(--cursor); +} +@media (hover: hover) { + .community-modal-search-results-cta:hover { + color: var(--text-accent-hover); + } +} +.community-modal-search-results-cta.mobile-tap { + color: var(--text-accent-hover); +} +.community-modal-empty-state { + color: var(--text-muted); + display: flex; + align-items: center; + justify-content: center; + height: 100%; + flex-direction: column; +} +body .community-item:focus-visible { + box-shadow: 0 0 0 3px var(--background-modifier-border-focus); +} +body .community-item.is-selected { + border-color: var(--interactive-normal); + background-color: var(--interactive-normal); +} +body .community-item.is-selected .community-item-author, +body .community-item.is-selected .community-item-repo, +body .community-item.is-selected .community-item-downloads, +body .community-item.is-selected .community-item-updated { + color: var(--text-muted); +} +@media (hover: hover) { + body .community-item:hover.is-selected:hover { + border-color: var(--interactive-normal); + background-color: var(--interactive-normal); + } + body .community-item:hover.is-selected:hover .community-item-author, + body .community-item:hover.is-selected:hover .community-item-repo, + body .community-item:hover.is-selected:hover .community-item-downloads, + body .community-item:hover.is-selected:hover .community-item-updated { + color: var(--text-muted); + } +} +.community-item { + position: relative; + background-color: var(--background-primary); + padding: var(--size-4-3); + cursor: var(--cursor); + border-radius: var(--radius-m); + border: var(--border-width) 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); + } +} +.community-item.mobile-tap { + background-color: var(--background-modifier-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); + display: flex; + align-items: center; + gap: var(--size-2-2); + --icon-color: var(--text-faint); + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); +} +.community-item-downloads svg { + display: block; +} +.community-item-updated { + font-size: var(--font-ui-smaller); + color: var(--text-muted); + margin-bottom: var(--size-4-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: var(--border-width) 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); + display: flex; + flex-direction: column; + gap: var(--size-4-4); +} +.community-readme { + overflow-x: hidden; + overflow-y: visible; + height: auto; + padding: var(--size-4-4) 0; +} +.community-readme video, +.community-readme svg, +.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-top: var(--size-4-4); +} +.community-modal-info-downloads { + color: var(--text-muted); + margin-top: var(--size-4-1); + display: inline-flex; + align-items: center; + gap: var(--size-4-1); + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); +} +.community-modal-info-downloads svg { + display: block; +} +.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; +} +.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); +} +.community-plugins-banner { + --link-external-color: var(--text-muted); + --link-external-color-hover: var(--text-normal); +} +.community-plugins-banner .setting-item.community-plugins-intro .setting-item-control, +.community-plugins-banner .setting-item.community-plugins-learn-more-row .setting-item-control { + display: none; +} +.community-plugins-features { + color: var(--text-normal); + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--size-4-4) var(--size-4-5); + margin-top: var(--setting-items-padding-y); +} +@container (max-width: 400px) { + .community-plugins-features { + grid-template-columns: 1fr; + } +} +.community-plugins-feature { + display: flex; + align-items: flex-start; + gap: var(--size-4-3); +} +.community-plugins-feature-icon { + flex-shrink: 0; + --icon-size: var(--icon-m); +} +.community-plugins-feature-text { + display: flex; + flex-direction: column; + gap: var(--size-2-1); +} +.community-plugins-feature-name { + font-size: var(--font-ui-medium); + font-weight: var(--font-medium); + line-height: var(--line-height-tight); +} +.community-plugins-feature-desc { + font-size: var(--font-ui-small); + color: var(--text-muted); + line-height: var(--line-height-tight); +} +.community-plugins-debug-list { + margin: 0; + padding-left: var(--size-4-5); + font-family: var(--font-monospace); + font-size: var(--font-ui-small); + max-height: 50vh; + overflow-y: auto; +} +.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); + corner-shape: var(--corner-shape); + 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); + display: flex; + align-items: center; + gap: var(--size-2-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); +} +body.is-frameless.is-hidden-frameless:not(.in-progress, .starter, .is-popout-modal) { + padding-top: 0 !important; /* kept !important because Obsidian app.css uses !important here */ +} +.is-hidden-frameless:not(.starter, .is-popout-modal).mod-macos .titlebar { + display: none; +} +.is-hidden-frameless:not(.starter, .is-popout-modal).mod-windows .titlebar, +.is-hidden-frameless:not(.starter, .is-popout-modal).mod-linux .titlebar { + background: transparent; + border: none; + z-index: var(--layer-popover); + pointer-events: none; +} +.is-hidden-frameless:not(.starter, .is-popout-modal).mod-windows .titlebar-button.mod-back, +.is-hidden-frameless:not(.starter, .is-popout-modal).mod-linux .titlebar-button.mod-back, +.is-hidden-frameless:not(.starter, .is-popout-modal).mod-windows .titlebar-button.mod-forward, +.is-hidden-frameless:not(.starter, .is-popout-modal).mod-linux .titlebar-button.mod-forward, +.is-hidden-frameless:not(.starter, .is-popout-modal).mod-windows .titlebar-text, +.is-hidden-frameless:not(.starter, .is-popout-modal).mod-linux .titlebar-text { + display: none; +} +.is-hidden-frameless:not(.starter, .is-popout-modal).mod-windows .titlebar-button-container, +.is-hidden-frameless:not(.starter, .is-popout-modal).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: color-mix(in oklch, var(--mono-100) 30%, transparent); + --nav-collapse-icon-color-collapsed: color-mix(in oklch, var(--mono-100) 30%, transparent); + --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; /* kept !important because Obsidian app.css uses !important here */ +} +.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(--vault-profile-radius); + corner-shape: var(--corner-shape); + 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; /* kept !important because Obsidian app.css uses !important here */ + 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: color-mix(in oklch, var(--interactive-accent) 25%, transparent); + z-index: var(--layer-popover); + pointer-events: none; +} +.workspace > .workspace-leaf, +.workspace > .workspace-split { + height: 100%; + width: 100%; +} +.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; + touch-action: none; +} +.workspace-leaf-resize-handle.is-active { + background-color: var(--color-accent); + border-color: var(--color-accent); +} +.workspace-leaf-resize-handle.mobile-tap { + background-color: var(--divider-color-hover); + border-color: var(--divider-color-hover); +} +@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); +} +.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 { + --scrollbar-native-width: none; + -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; +} +.workspace-tab-header-container-inner::-webkit-scrollbar { + display: none; +} +.mod-root .workspace-tab-header-container-inner { + padding: 1px 15px 0; +} +.workspace-tab-header-inner-icon { + flex: 0 0 auto; + display: flex; +} +.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; +} +body.is-focused .workspace-tab-header-container .workspace-tab-header { + color: var(--tab-text-color-focused); +} +body.is-focused .workspace-tab-header-container .workspace-tab-header.is-active { + color: var(--tab-text-color-focused-active); +} +body.is-focused .mod-active .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner-icon, +body.is-focused .mod-active .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner-title { + color: var(--tab-text-color-focused-active-current); +} +body.is-focused .mod-active .workspace-tab-header-container .workspace-tab-header.is-active.is-highlighted .workspace-tab-header-inner-icon, +body.is-focused .mod-active .workspace-tab-header-container .workspace-tab-header.is-active.is-highlighted .workspace-tab-header-inner-title { + color: var(--tab-text-color-focused-highlighted); +} +body.is-focused .workspace-tab-header-container .workspace-tab-header.is-highlighted .workspace-tab-header-inner-icon, +body.is-focused .workspace-tab-header-container .workspace-tab-header.is-highlighted .workspace-tab-header-inner-title { + color: var(--tab-text-color-focused-highlighted); +} +.workspace-tab-header-container .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); + corner-shape: var(--corner-shape); +} +@media (hover: hover) { + .workspace-tab-header-container .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner { + background-color: var(--background-modifier-hover); + } +} +.workspace-tab-header-container .workspace-tab-header:not(.is-active).mobile-tap .workspace-tab-header-inner { + background-color: var(--background-modifier-hover); +} +.workspace-tab-header-container .workspace-tab-header::before, +.workspace-tab-header-container .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-container .workspace-tab-header::before { + left: calc(var(--tab-curve) * -2); + clip-path: inset(50% calc(var(--tab-curve) * -1) 0 50%); +} +.workspace-tab-header-container .workspace-tab-header::after { + right: calc(var(--tab-curve) * -2); + clip-path: inset(50% 50% 0 calc(var(--tab-curve) * -1)); +} +.workspace-tab-header-container .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-container .workspace-tab-header.is-active::before, +.workspace-split.mod-root .workspace-tab-header-container .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-container .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); + corner-shape: var(--corner-shape); + 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); + corner-shape: var(--corner-shape); + 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); +} +.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); +} +.mod-left-split .workspace-tab-header-container .workspace-tab-header-container-inner, +.mod-right-split .workspace-tab-header-container .workspace-tab-header-container-inner { + -webkit-app-region: no-drag; + padding: 1px 0 7px; + margin: 6px 0 0 0; + gap: 3px; +} +.mod-left-split .workspace-tab-header-container .workspace-tab-header, +.mod-right-split .workspace-tab-header-container .workspace-tab-header { + box-shadow: none; + background-color: transparent; + padding: 0; + margin: 0; + border-radius: var(--tab-radius); + corner-shape: var(--corner-shape); +} +.mod-left-split .workspace-tab-header-container .workspace-tab-header:before, +.mod-right-split .workspace-tab-header-container .workspace-tab-header:before, +.mod-left-split .workspace-tab-header-container .workspace-tab-header:after, +.mod-right-split .workspace-tab-header-container .workspace-tab-header:after { + display: none; +} +.mod-left-split .workspace-tab-header-container .workspace-tab-header:active .workspace-tab-header-inner-icon, +.mod-right-split .workspace-tab-header-container .workspace-tab-header:active .workspace-tab-header-inner-icon { + color: var(--icon-color-focused); +} +.mod-left-split .workspace-tab-header-container .workspace-tab-header.has-active-menu, +.mod-right-split .workspace-tab-header-container .workspace-tab-header.has-active-menu, +.mod-left-split .workspace-tab-header-container .workspace-tab-header.is-active, +.mod-right-split .workspace-tab-header-container .workspace-tab-header.is-active { + background-color: var(--background-modifier-hover); +} +@media (hover: hover) { + .mod-left-split .workspace-tab-header-container .workspace-tab-header.has-active-menu:hover, + .mod-right-split .workspace-tab-header-container .workspace-tab-header.has-active-menu:hover, + .mod-left-split .workspace-tab-header-container .workspace-tab-header.is-active:hover, + .mod-right-split .workspace-tab-header-container .workspace-tab-header.is-active:hover { + background-color: var(--background-modifier-hover); + } +} +.mod-left-split .workspace-tab-header-container .workspace-tab-header.has-active-menu .workspace-tab-header-inner-icon, +.mod-right-split .workspace-tab-header-container .workspace-tab-header.has-active-menu .workspace-tab-header-inner-icon, +.mod-left-split .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner-icon, +.mod-right-split .workspace-tab-header-container .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; + } +} +.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); + corner-shape: var(--corner-shape); +} +@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); + 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; +} +.sidebar-toggle-button.mod-left .sidebar-toggle-icon-inner { + width: var(--sidebar-left-toggle-inner-width); +} +.workspace.is-left-sidedock-open .sidebar-toggle-button.mod-left .sidebar-toggle-icon-inner { + --sidebar-left-toggle-inner-width: var(--sidebar-left-toggle-inner-width-open); +} +.sidebar-toggle-button.mod-right .clickable-icon { + transform: scale(-1, 1); +} +.sidebar-toggle-button.mod-right .clickable-icon .sidebar-toggle-icon-inner { + width: var(--sidebar-right-toggle-inner-width); +} +.workspace.is-right-sidedock-open .sidebar-toggle-button.mod-right .clickable-icon .sidebar-toggle-icon-inner { + --sidebar-right-toggle-inner-width: var(--sidebar-right-toggle-inner-width-open); +} +.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; + } +} +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.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); + corner-shape: var(--button-corner-shape); + 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-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); + background-color: color-mix(in oklch, var(--background-modifier-error) 10%, transparent); +} +button.mod-destructive.mod-cta { + background-color: var(--background-modifier-error); + --text-color: var(--text-on-accent); +} +button.mod-destructive.mod-cta.mobile-tap { + background-color: var(--background-modifier-error-hover); +} +@media (hover: hover) { + button.mod-destructive.mod-cta:hover { + background-color: var(--background-modifier-error-hover); + } +} +.card-container { + display: flex; +} +.card-container.mod-horizontal { + flex-direction: column; +} +.card { + background-color: var(--background-secondary-alt); + border-radius: 4px; + border: var(--border-width) 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: var(--border-width) solid var(--interactive-accent); + background-color: color-mix(in oklch, var(--interactive-accent) 10%, transparent); + } +} +.card.is-selected { + border: var(--border-width) solid var(--interactive-accent); + background-color: color-mix(in oklch, var(--interactive-accent) 20%, transparent); +} +.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; +} +.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); + corner-shape: var(--corner-shape); + 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); +} +.u-numeric { + font-variant-numeric: tabular-nums; +} +.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: color-mix(in oklch, var(--background-modifier-error) 20%, transparent); +} +.diff-line.mod-left .diff-changed { + background-color: color-mix(in oklch, var(--background-modifier-error) 40%, transparent); +} +.diff-line.mod-right { + background-color: color-mix(in oklch, var(--background-modifier-success) 20%, transparent); +} +.diff-line.mod-right .diff-changed { + background-color: color-mix(in oklch, var(--background-modifier-success) 40%, transparent); +} +.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); + } +} +.markdown-reading-view.is-searching, +.markdown-source-view.is-replacing, +.markdown-source-view.is-searching { + flex-direction: column-reverse; +} +.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[type=text] { + flex-grow: 1; + border-radius: var(--search-input-radius); + corner-shape: var(--search-input-corner-shape); +} +.document-search-input.mod-no-match, +.document-replace-input[type=text].mod-no-match { + background-color: color-mix(in oklch, var(--background-modifier-error) 20%, transparent); +} +@media (hover: hover) { + .document-search-input.mod-no-match:hover, + .document-replace-input[type=text].mod-no-match:hover { + background-color: color-mix(in oklch, var(--background-modifier-error) 20%, transparent); + } +} +.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); +} +.search-input-clear-button ~ .document-search-count { + inset-inline-end: var(--size-4-8); +} +.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); +} +.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; +} +.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); +} +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%; + box-sizing: border-box; + margin: 0; + border: 0; + box-shadow: var(--input-shadow); + border-radius: var(--input-radius); + corner-shape: var(--input-corner-shape); + -webkit-appearance: none; + appearance: none; + background-color: var(--dropdown-background); + padding: var(--dropdown-padding); + background-repeat: no-repeat, no-repeat, repeat; + background-position: var(--dropdown-background-position); + background-size: var(--dropdown-background-size); + background-blend-mode: var(--dropdown-background-blend-mode); + text-align: var(--dropdown-text-align); + corner-shape: var(--corner-shape); +} +@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-visible, +.combobox-button:focus-visible, +.dropdown:focus-visible { + box-shadow: 0 0 0px 3px var(--background-modifier-border-focus); + outline: none; +} +select.mouse-focus:focus-visible, +.combobox-button.mouse-focus:focus-visible, +.dropdown.mouse-focus:focus-visible { + outline: none; + box-shadow: var(--input-shadow-hover); +} +@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"), radial-gradient(ellipse, var(--dropdown-icon-background) 48%, transparent 50%); +} +.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"), radial-gradient(ellipse, var(--dropdown-icon-background) 48%, transparent 50%); +} +.dropdown option { + font-weight: normal; + background-color: var(--background-primary); +} +.dropdown.is-measuring { + position: absolute; + visibility: hidden; + pointer-events: none; + width: max-content !important; /* kept !important because Obsidian app.css uses !important here */ + max-width: none !important; /* kept !important because Obsidian app.css uses !important here */ +} +.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 { + --dropdown-padding: 0 var(--size-2-3) 0 var(--size-4-2); + display: flex; + align-items: center; + gap: var(--size-2-2); + min-height: var(--input-height); + 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.mod-file .combobox-button-label { + display: flex; + min-width: 0; +} +.combobox-button.mod-file .combobox-button-label .file-combobox-dir { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 2ch; +} +.combobox-button.mod-file .combobox-button-label .file-combobox-dir.mod-first, +.combobox-button.mod-file .combobox-button-label .file-combobox-sep, +.combobox-button.mod-file .combobox-button-label .file-combobox-name { + flex-shrink: 0; + white-space: nowrap; +} +.combobox-button.mod-file .combobox-button-label:empty:before { + color: var(--text-faint); +} +.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-visible { + 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 { + --dropdown-padding: 0 var(--size-4-4) 0 var(--size-4-4); + 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.suggestion-container.has-input-focus { + max-height: unset; + 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); + corner-shape: var(--corner-shape); + 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; +} +.cm-fold-indicator .collapse-indicator, +.cm-gutterElement .collapse-indicator, +.collapse-indicator, +.fold-gutter { + opacity: 0; +} +.is-collapsed .collapse-indicator, +.cm-fold-indicator.is-collapsed .collapse-indicator, +.cm-gutterElement .is-collapsed .collapse-indicator, +.fold-gutter.is-collapsed { + opacity: 1; +} +@media (hover: hover) { + 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, + .cm-gutterElement:hover .collapse-indicator, + .cm-line:hover .cm-fold-indicator .collapse-indicator, + .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-fold-indicator.is-collapsed .collapse-indicator { + opacity: 1; +} +@media (hover: hover) { + .markdown-source-view.mod-cm6 .cm-line:hover .cm-fold-indicator .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:before { + content: '\200B'; +} +.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; +} +svg.svg-icon { + height: var(--icon-size); + width: var(--icon-size); + stroke-width: var(--icon-stroke); +} +.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); +} +.is-ios .lucide-more-vertical, +.mod-macos .lucide-more-vertical { + transform: rotate(90deg); +} +.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); + height: auto; + corner-shape: var(--corner-shape); +} +.clickable-icon svg { + opacity: var(--icon-opacity); + transition: opacity var(--anim-duration-fast) ease-in-out; +} +@media (hover: hover) { + .clickable-icon:hover { + box-shadow: none; + color: var(--icon-color-hover); + background-color: var(--background-modifier-hover); + } + .clickable-icon:hover svg { + opacity: var(--icon-opacity-hover); + } + .clickable-icon.has-active-menu, + .clickable-icon:active { + color: var(--icon-color-focused); + background-color: var(--background-modifier-hover); + } + .clickable-icon.has-active-menu svg, + .clickable-icon:active svg { + opacity: var(--icon-opacity-hover); + } +} +.clickable-icon.is-active { + color: var(--icon-color-active); + background-color: var(--background-modifier-active-hover); +} +.clickable-icon.is-active svg { + opacity: var(--icon-opacity-hover); +} +@media (hover: hover) { + .clickable-icon.is-active:hover { + background-color: var(--background-modifier-active-hover); + } +} +.clickable-icon:focus-visible { + box-shadow: 0 0 0 3px var(--background-modifier-border-focus); +} +.is-mobile .clickable-icon { + transition: opacity 0.1s ease-in-out; +} +.clickable-icon.mobile-tap svg { + 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-warning); +} +.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); + corner-shape: var(--button-corner-shape); + 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; + corner-shape: var(--corner-shape); +} +.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); + corner-shape: var(--input-corner-shape); + 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); +} +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 { + line-height: var(--line-height-tight); + border-radius: var(--textarea-radius, var(--input-radius)); + padding: var(--textarea-padding, var(--input-padding)); +} +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; +} +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']:not([disabled="true"])::-webkit-calendar-picker-indicator, +input[type='datetime-local']:not([disabled="true"])::-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-left: var(--size-4-6); +} +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: var(--slider-thumb-background); + 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: var(--slider-thumb-shadow); +} +input[type='range']::-webkit-slider-thumb:hover, +input[type='range']::-webkit-slider-thumb:active { + background: var(--slider-thumb-background-hover); + border-color: var(--background-modifier-border-focus); + box-shadow: var(--slider-thumb-shadow-hover); + transition: all 0.1s linear; +} +input[type='range']::-webkit-slider-thumb:active { + width: var(--slider-thumb-width-active); + height: var(--slider-thumb-height-active); + opacity: var(--slider-thumb-opacity-active); + top: var(--slider-thumb-y-active); +} +body:not(.is-mobile) input[type=range]:focus { + box-shadow: none; +} +body:not(.is-mobile) input[type=range]:focus::-webkit-slider-thumb { + box-shadow: var(--slider-thumb-shadow-active); +} +body:not(.is-mobile) input[type=range]:focus-visible::-webkit-slider-thumb { + border-color: var(--background-modifier-border-focus); + box-shadow: var(--slider-thumb-shadow-focus); +} +.slider-value { + font-size: var(--slider-value-font-size); + font-weight: var(--slider-value-font-weight); + color: var(--text-normal); + font-variant-numeric: tabular-nums; +} +.slider-value:empty { + display: none; +} +input[type="color"] { + -webkit-appearance: none; + height: var(--swatch-height); + 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 color-mix(in oklch, var(--mono-100) 25%, transparent), 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 { + width: 100%; +} +.formula-editor { + padding: 0; + border-radius: var(--textarea-radius, var(--input-radius)); + background-color: var(--background-modifier-form-field); + border: var(--input-border-width) solid var(--background-modifier-border); + display: flex; + align-items: center; + min-height: var(--input-height); + width: 100%; +} +@media (hover: hover) { + .formula-editor: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:active, +.formula-editor:focus, +.formula-editor: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:active, +.formula-editor:focus, +.formula-editor:focus-visible, +.formula-editor:focus-within { + box-shadow: 0 0 0 var(--input-border-width-focus) var(--background-modifier-border-focus); +} +.formula-editor::placeholder { + color: var(--input-placeholder-color); +} +.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-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); +} +.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); +} +.lightbox { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: var(--layer-modal); + padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left); +} +.lightbox .modal-close-button { + --icon-stroke: var(--icon-s-stroke-width); + inset-inline-end: var(--size-4-3); + color: white; +} +.lightbox .modal-close-button::before { + content: none; +} +.is-mobile .lightbox .modal-close-button { + color: var(--icon-color); + top: max(var(--safe-area-inset-top), var(--size-4-3)); + inset-inline-end: var(--size-4-3); +} +.lightbox-titlebar { + --lightbox-close-top: var(--size-2-3); + --lightbox-close-size: calc(var(--icon-m) + var(--size-2-2) * 2); + position: absolute; + top: 0; + left: 0; + right: 0; + padding-top: var(--lightbox-close-top); + min-height: calc(var(--lightbox-close-top) + var(--lightbox-close-size)); + display: var(--lightbox-titlebar-display); + justify-content: center; + align-items: center; + pointer-events: none; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent); + color: var(--lightbox-titlebar-color); + font-size: var(--font-ui-small); + transition: opacity 150ms ease; +} +.is-mobile .lightbox-titlebar { + --lightbox-close-top: max(var(--safe-area-inset-top), var(--size-4-3)); + --lightbox-close-size: var(--touch-size-m); +} +.lightbox-titlebar-text { + max-width: calc(100% - var(--size-4-12) * 2); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; +} +.lightbox.is-zoomed .lightbox-titlebar, +.lightbox.is-dismissing .lightbox-titlebar { + opacity: 0; +} +.lightbox.is-dismissing .modal-close-button { + transition: none; +} +.lightbox-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--lightbox-background); +} +.lightbox-content { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + overflow: visible; +} +.lightbox-media { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + min-height: 0; + overflow: visible; + position: relative; + touch-action: none; +} +.lightbox.is-zoomed .media-wrapper img { + cursor: grab; +} +.lightbox .media-wrapper { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + position: relative; +} +.lightbox .media-wrapper img { + padding: var(--size-4-2); + box-sizing: border-box; + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + object-fit: contain; + will-change: transform; +} +.lightbox .media-wrapper.is-sliding { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.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.is-loading { + overflow: hidden; +} +.notice progress { + width: 100%; +} +.theme-light .notice progress[value]::-webkit-progress-bar { + background-color: #262626; + box-shadow: inset 0px 0px 0px 1px #363636; +} +.notice-button-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + column-gap: var(--size-4-3); + row-gap: var(--size-4-1); +} +.notice-cta { + display: flex; + align-items: center; + color: var(--text-accent); + white-space: nowrap; +} +.notice-cta.mobile-tap { + color: var(--text-accent-hover); +} +@media (hover: hover) { + .notice-cta:hover { + 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); + overflow: hidden; + padding: 0; + border-radius: var(--menu-radius); + corner-shape: var(--menu-corner-shape); + 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: var(--border-width) 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); + corner-shape: var(--corner-shape); + 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:not(.is-label):not(.is-disabled).mobile-tap, +.menu-item:not(.is-label):not(.is-disabled).selected { + 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 { + color: var(--text-normal); + font-family: var(--font-monospace); + opacity: 1; + tab-size: 4; + width: 100%; + min-height: 50vh; + height: 100%; + max-height: 80vh; + 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 .modal { + corner-shape: var(--corner-shape); + position: relative; +} +.modal-container.mod-dim .modal { + box-shadow: var(--shadow-l); +} +.modal-container.is-being-dragged { + pointer-events: none !important; /* kept !important because Obsidian app.css uses !important here */ +} +.modal-container.is-being-dragged .prompt, +.modal-container.is-being-dragged .modal { + pointer-events: none; + opacity: 0.25; +} +.modal-container.is-being-dragged .modal-bg { + opacity: 0 !important; /* kept !important because Obsidian app.css uses !important here */ +} +.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); + 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 { + 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; +} +.modal-sidebar.mod-history { + flex: 0 0 250px; + min-width: 0; + padding: 0; +} +.modal-sidebar-inner { + --modal-sidebar-inset: var(--size-4-2); + flex: 1 1 auto; + display: flex; + flex-direction: column; + min-height: 0; + border-inline-end: 1px solid var(--background-modifier-border); + background-color: var(--background-secondary); +} +.modal-sidebar-inner .search-input-container { + margin: var(--modal-sidebar-inset) var(--modal-sidebar-inset) 0; +} +.modal-sidebar-list { + overflow: auto; + flex: 1 1 0; + display: flex; + flex-direction: column; + padding: var(--size-4-2) var(--modal-sidebar-inset); +} +.modal-sidebar-list-item { + display: flex; + align-items: center; + padding: var(--size-4-2); + margin-bottom: var(--size-4-1); + border-radius: var(--radius-s); +} +.modal-sidebar-list-item:last-child { + margin-bottom: 0; +} +.modal-sidebar-list-item.is-active, +.modal-sidebar-list-item.is-active:hover { + background-color: var(--interactive-accent); + color: var(--text-on-accent); +} +.modal-sidebar-list-item.is-active .u-muted, +.modal-sidebar-list-item.is-active:hover .u-muted { + color: var(--text-on-accent); + opacity: 0.8; +} +@media (hover: hover) { + .modal-sidebar-list-item:hover { + background-color: var(--background-modifier-hover); + } +} +.modal-sidebar-list-item:focus-visible { + box-shadow: 0 0 0 var(--input-border-width-focus) var(--background-modifier-border-focus); + outline: none; +} +@media (forced-colors: active) { + .modal-sidebar-list-item:focus-visible { + box-shadow: inset 0 0 0 2px Highlight; + } +} +.modal-sidebar-list-item-details { + flex-grow: 1; + cursor: var(--cursor); + font-size: var(--font-ui-small); +} +body.styled-scrollbars .modal-header-button, +body.styled-scrollbars .modal-close-button { + inset-inline-end: 12px; +} +.modal-header-button, +.modal-close-button { + position: absolute; + top: var(--size-2-3); + inset-inline-end: var(--size-2-3); + padding: var(--size-2-2); + z-index: var(--layer-modal); +} +.modal-header-button.mod-cta, +.modal-close-button.mod-cta { + color: var(--color-accent); +} +.modal-header-button.mod-start, +.modal-close-button.mod-start { + inset-inline-end: unset; + inset-inline-start: var(--size-2-3); +} +.modal-header { + margin-bottom: 0.75em; + height: var(--modal-header-height); +} +.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; +} +.modal.mod-uri-action { + max-width: 500px; +} +.mod-uri-action-params { + display: grid; + grid-template-columns: auto 1fr; + gap: var(--size-2-2) var(--size-4-3); + margin: 0 0 var(--size-4-2) 0; + padding: var(--size-4-2) var(--size-4-3); + background-color: var(--background-secondary); + border-radius: var(--radius-s); + font-size: var(--font-ui-smaller); + max-height: 140px; + overflow-y: auto; +} +.mod-uri-action-params dt { + color: var(--text-muted); + font-family: var(--font-monospace); +} +.mod-uri-action-params dd { + margin: 0; + font-family: var(--font-monospace); +} +.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); + corner-shape: var(--corner-shape); +} +.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-warning); +} +.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 .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); +} +.nav-buttons-container .nav-action-button.is-active { + color: var(--icon-color-focused); + background-color: var(--background-modifier-hover); +} +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 { + word-break: break-word; + margin-inline-start: var(--pill-padding-x); + overflow: hidden; +} +.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); + corner-shape: var(--corner-shape); + 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; + word-break: break-word; + --scrollbar-native-width: none; +} +.multi-select-input::-webkit-scrollbar { + display: none; +} +.multi-select-input:empty:before { + content: attr(placeholder, '\200B'); + 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, +.suggestion-container, +.cm-tooltip.cm-tooltip-autocomplete { + display: flex; + position: absolute; + z-index: var(--layer-popover); + background-color: var(--background-primary); + border: var(--border-width) 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 > .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; + width: 100%; + transform-origin: left center; +} +.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: transform 150ms ease-in-out; +} +@keyframes increase { + from { + transform: translateX(-5%) scaleX(0.05); + } + to { + transform: translateX(130%) scaleX(1); + } +} +@keyframes decrease { + from { + transform: translateX(-80%) scaleX(0.8); + } + to { + transform: translateX(110%) scaleX(0.1); + } +} +.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(--prompt-background); + box-shadow: var(--shadow-l); + backdrop-filter: var(--prompt-backdrop-filter); + 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; + corner-shape: var(--corner-shape); +} +.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: transparent; + font-size: var(--font-ui-medium); + border: none; + height: var(--prompt-input-height); + border-radius: 0; + border-bottom: var(--border-width) solid var(--background-secondary); +} +input.prompt-input:hover, +input.prompt-input:focus, +input.prompt-input:focus-visible { + border-bottom: var(--border-width) solid var(--background-secondary); + box-shadow: none; + background-color: transparent; +} +.prompt-results { + list-style: none; + margin: 0; + padding: var(--size-4-3); + overflow-y: auto; +} +.prompt-instructions { + 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-height: 5px; + --scrollbar-radius: 0; +} +* { + scrollbar-width: var(--scrollbar-native-width); +} +body:not(.styled-scrollbars) { + scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-bg); +} +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); + } +} +.suggestion-bg { + display: none; +} +.suggestion-container { + background-color: var(--suggestion-background); + backdrop-filter: var(--suggestion-backdrop-filter); + 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; +} +.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); + corner-shape: var(--corner-shape); + 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; +} +.cm-tooltip.cm-tooltip-autocomplete { + background-color: var(--suggestion-background); + backdrop-filter: var(--suggestion-backdrop-filter); + 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 .cm-tooltip.cm-tooltip-autocomplete { + max-width: calc(100vw - 20px - var(--safe-area-inset-left) - var(--safe-area-inset-right)); + max-height: 240px; +} +.cm-tooltip.cm-tooltip-autocomplete .cm-completionLabel { + flex-grow: 1; +} +.cm-tooltip.cm-tooltip-autocomplete .cm-completionLabel .cm-completionMatchedText { + font-weight: bold; + text-decoration: none; +} +.cm-tooltip.cm-tooltip-autocomplete .cm-completionDetail { + display: none; +} +.cm-tooltip.cm-tooltip-autocomplete > ul[role="listbox"] { + padding: var(--size-2-3); +} +.cm-tooltip.cm-tooltip-autocomplete > ul > li[role="option"] { + 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); + corner-shape: var(--corner-shape); + color: var(--text-normal); + font-family: var(--font-interface); + font-size: var(--font-ui-small); + padding-inline-start: var(--size-4-2); +} +.cm-tooltip.cm-tooltip-autocomplete > ul > li[role="option"].is-selected, +.cm-tooltip.cm-tooltip-autocomplete > ul > li[role="option"].mobile-tap { + background-color: var(--background-modifier-hover); +} +.cm-tooltip.cm-tooltip-autocomplete > ul > li[role="option"].is-being-dragged { + pointer-events: auto; + background-color: var(--background-modifier-hover); +} +.cm-tooltip.cm-tooltip-autocomplete > ul > li[role="option"].mod-downranked { + color: var(--text-muted); +} +.cm-tooltip.cm-tooltip-autocomplete > ul > li[role="option"].mod-complex .suggestion-icon .suggestion-flair { + margin: 0; + margin-inline-end: var(--size-4-2); +} +.cm-tooltip.cm-tooltip-autocomplete > ul > li[role="option"][aria-selected] { + background-color: var(--background-modifier-hover); +} +.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); + corner-shape: var(--corner-shape); +} +.suggestion-item.is-selected, +.suggestion-item.mobile-tap { + background-color: var(--background-modifier-hover); +} +.suggestion-item.is-being-dragged { + pointer-events: auto; + 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: var(--font-ui-small); + border-radius: var(--radius-m); + corner-shape: var(--corner-shape); +} +body:not(.is-phone) .horizontal-tab-nav-item.is-active, +body:not(.is-phone) .vertical-tab-nav-item.is-active { + background-color: var(--background-modifier-hover); +} +.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); +} +.vertical-tab-nav-item { + display: flex; +} +.vertical-tab-nav-item-chevron { + display: none; +} +.vertical-tab-nav-item-icon { + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-s); + margin-inline-end: var(--size-4-2); + flex-shrink: 0; + color: var(--text-muted); +} +.vertical-tab-nav-item-title { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: pre; +} +.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 { + background-color: var(--modal-sidebar-background); +} +.setting-search-results, +.vertical-tab-header-group-items { + display: flex; + flex-direction: column; + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); +} +.setting-search-results[data-section="community-plugins"] .vertical-tab-nav-item-icon, +.vertical-tab-header-group-items[data-section="community-plugins"] .vertical-tab-nav-item-icon { + display: none; +} +.setting-search-empty { + color: var(--text-muted); + font-size: var(--font-ui-small); + padding: var(--size-4-2); +} +.setting-search-results { + gap: var(--size-4-1); + padding: var(--size-4-3) 0; +} +.setting-search-results .setting-search-result-group { + flex-shrink: 0; +} +.setting-search-results .setting-search-result-item { + font-size: var(--font-ui-small); + padding-inline-start: var(--size-4-8); +} +.setting-search-results .setting-search-result-tab-text { + flex-grow: 1; + min-width: 0; +} +.setting-search-results .setting-search-result-tab-label, +.setting-search-results .setting-search-result-tab-sublabel { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.setting-search-results .setting-search-result-tab-sublabel { + color: var(--text-muted); + font-size: 75%; +} +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 { + position: relative; + overflow: hidden; + flex-grow: 1; +} +.vertical-tab-content { + overflow-y: auto; + height: 100%; + padding-top: var(--size-4-12); + padding-bottom: max(var(--keyboard-height), var(--size-4-16)); + scroll-padding-block: var(--size-4-4); +} +.vertical-tab-content h1 { + display: none; +} +.vertical-tab-content h2 { + font-size: var(--font-ui-medium); + font-weight: var(--font-semibold); +} +.vertical-tab-nav-item:focus-visible { + box-shadow: 0 0 0 var(--input-border-width-focus) var(--background-modifier-border-focus); + outline: none; +} +@media (forced-colors: active) { + .horizontal-tab-nav-item, + .vertical-tab-nav-item { + --interactive-accent: SelectedItem; + } + .vertical-tab-nav-item:focus-visible { + box-shadow: inset 0 0 0 2px Highlight; + } +} +.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; + position: relative; + user-select: none; + box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.07); + 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); + width: var(--toggle-s-width); + height: calc(var(--toggle-s-thumb-height) + var(--toggle-s-border-width) * 2); +} +.checkbox-container input[type='checkbox'] { + position: absolute; + opacity: 0; + left: 0; +} +.checkbox-container.is-enabled { + background-color: var(--interactive-accent); +} +.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); + border-radius: var(--toggle-thumb-radius); + transition: transform 0.15s ease-in-out, width 0.1s ease-in-out 0.05s, height 0.1s ease-in-out 0.05s, margin-top 0.1s ease-in-out 0.05s, left 0.1s ease-in-out 0.05s, opacity 0.1s ease-in-out 0.05s; + left: 0; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); +} +.checkbox-container:focus-visible { + outline: var(--toggle-s-border-width) solid var(--background-modifier-border-focus); +} +.checkbox-container: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.is-enabled:after { + transform: translate3d(calc(var(--toggle-s-width) - var(--toggle-s-thumb-width) - var(--toggle-s-border-width)), 0, 0); +} +.checkbox-container:active:after { + opacity: var(--toggle-thumb-opacity-active); + width: calc(var(--toggle-s-thumb-width) + var(--toggle-s-border-width) * 2); + height: calc(var(--toggle-s-thumb-height) + var(--toggle-s-border-width) * 2); + margin-top: 0; +} +.modal .checkbox-container { + width: var(--toggle-width); + height: calc(var(--toggle-thumb-height) + var(--toggle-border-width) * 2); +} +.modal .checkbox-container:focus-visible { + outline: var(--toggle-border-width) solid var(--background-modifier-border-focus); +} +.modal .checkbox-container:after { + width: var(--toggle-thumb-width); + height: var(--toggle-thumb-height); + margin: var(--toggle-border-width) 0 0 0; + transform: translate3d(var(--toggle-border-width), 0, 0); +} +.modal .checkbox-container.is-enabled:after { + transform: translate3d(calc(var(--toggle-width) - var(--toggle-thumb-width) - var(--toggle-border-width)), 0, 0); +} +.modal .checkbox-container.is-enabled:active:after { + left: -4px; +} +.modal .checkbox-container:active:after { + opacity: var(--toggle-thumb-opacity-active); + width: calc(var(--toggle-thumb-width) + var(--toggle-border-width) * 4); + height: calc(var(--toggle-thumb-height) + var(--toggle-border-width) * 4); + margin-top: calc(var(--toggle-border-width) * -1); +} +body:not(.is-mobile) .setting-group.mod-list .checkbox-container { + width: var(--toggle-s-width); + height: calc(var(--toggle-s-thumb-height) + var(--toggle-s-border-width) * 2); +} +body:not(.is-mobile) .setting-group.mod-list .checkbox-container:focus-visible { + outline: var(--toggle-s-border-width) solid var(--background-modifier-border-focus); +} +body:not(.is-mobile) .setting-group.mod-list .checkbox-container: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); +} +body:not(.is-mobile) .setting-group.mod-list .checkbox-container.is-enabled:after { + transform: translate3d(calc(var(--toggle-s-width) - var(--toggle-s-thumb-width) - var(--toggle-s-border-width)), 0, 0); +} +body:not(.is-mobile) .setting-group.mod-list .checkbox-container:active:after { + opacity: var(--toggle-thumb-opacity-active); + width: calc(var(--toggle-s-thumb-width) + var(--toggle-s-border-width) * 2); + height: calc(var(--toggle-s-thumb-height) + var(--toggle-s-border-width) * 2); + margin-top: 0; +} +.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-visible { + 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 { + opacity: var(--toggle-thumb-opacity-active); + width: calc(var(--toggle-s-thumb-width) + var(--toggle-s-border-width) * 2); + height: calc(var(--toggle-s-thumb-height) + var(--toggle-s-border-width) * 2); + margin-top: 0; +} +@media (forced-colors: active) { + .checkbox-container { + outline: 1px ButtonBorder solid; + } + .checkbox-container:after { + outline: 1px ButtonBorder solid; + } + .checkbox-container.is-enabled { + background-color: SelectedItem; + } +} +.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; +} +.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(--nav-item-radius); + corner-shape: var(--corner-shape); + 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(--nav-item-margin-bottom); + padding: var(--nav-item-padding); + position: relative; +} +.is-mobile .tree-item-self { + transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; +} +.tree-item-self:before { + content: '\200B'; +} +.tree-item-self.mod-collapsible { + padding: var(--nav-item-parent-padding); +} +.tree-item-self.is-cut { + opacity: 0.5; +} +.tree-item-self.is-being-dragged-over { + color: var(--nav-item-color-highlighted); + background: color-mix(in oklch, var(--interactive-accent) 10%, transparent); +} +.tree-item-self.is-being-dragged-over .collapse-icon { + color: var(--nav-item-color-highlighted); +} +.tree-item-self.mobile-tap { + color: var(--nav-item-color-hover); + font-weight: var(--nav-item-weight-hover); + background-color: var(--nav-item-background-hover); +} +.tree-item-self.has-active-menu { + box-shadow: 0 0 0 2px var(--background-modifier-border-focus); +} +.tree-item-self.is-cut { + opacity: 0.5; +} +.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); + } +} +.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); +} +.tree-item-self.is-selected { + color: var(--nav-item-color-selected); + background-color: var(--nav-item-background-selected); +} +.tree-item-self.is-being-dragged { + color: var(--text-on-accent); + background-color: var(--interactive-accent); +} +.tree-item-self.is-being-dragged .tree-item-icon { + color: var(--text-on-accent); +} +@media (hover: hover) { + body:not(.is-grabbing) .tree-item-self.is-active:hover { + 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 { + color: var(--nav-item-color-selected); + background-color: var(--nav-item-background-selected); + } + body:not(.is-grabbing) .tree-item-self.is-being-dragged:hover { + color: var(--text-on-accent); + background-color: var(--interactive-accent); + } + body:not(.is-grabbing) .tree-item-self.is-being-dragged:hover .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)); + 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: var(--border-width) 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; +} +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +.textLayer .mod-focused { + background-color: #ffd000; + 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(255, 208, 0, 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(255, 208, 0, 0.8); + padding: var(--size-4-1); +} +.annotationLayer .boundingRect { + z-index: 2000; + position: absolute; + pointer-events: none; +} +.annotationLayer .boundingRect > * { + pointer-events: initial; +} +.popupWrapper { + 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; +} +.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; + --bases-table-header-background: transparent; + --bases-table-header-background-hover: color-mix(in oklch, var(--callout-color) 10%, transparent); + --bases-embed-border-color: color-mix(in oklch, var(--callout-color) 25%, var(--background-primary) 50%); + --bases-table-border-color: color-mix(in oklch, var(--callout-color) 25%, var(--background-primary) 50%); + --table-border-color: color-mix(in oklch, 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: color-mix(in oklch, var(--callout-color) calc(var(--callout-border-opacity) * 100%), transparent); + border-width: var(--callout-border-width); + border-radius: var(--callout-radius); + margin: 1em 0; + mix-blend-mode: var(--callout-blend-mode); + background-color: color-mix(in oklch, var(--callout-color) 10%, transparent); + 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: 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: 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); +} +.mermaid-wrapper { + display: flex; + flex-direction: column; +} +.mermaid-wrapper.is-guarded { + overflow: hidden; + border: var(--border-width) solid var(--background-modifier-border); + border-radius: var(--radius-m); +} +.mermaid-guard-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--size-4-3); + padding: var(--size-4-2) var(--size-4-4); +} +@supports not (anchor-name: --x) { + .cm-embed-block .mermaid-guard-header { + padding-inline-end: var(--size-4-9); + } +} +.mermaid-guard-text { + display: flex; + flex-direction: column; + gap: var(--size-2-1); + min-width: 0; +} +.mermaid-guard-title { + font-weight: var(--font-semibold); + font-size: var(--font-ui-small); +} +.mermaid-guard-description { + color: var(--text-muted); + font-size: var(--font-ui-smaller); +} +.mermaid-guard-actions { + display: flex; + align-items: center; + gap: var(--size-4-2); + flex-shrink: 0; +} +.mermaid-guard-source { + border-top: var(--border-width) solid var(--background-modifier-border); +} +.mermaid-guard-source pre { + margin: 0; + border: none; + border-radius: 0; + background-color: var(--code-background); +} +@supports (anchor-name: --x) { + .mermaid-guard-source { + anchor-name: --mermaid-guard-source; + } + .mermaid-wrapper.is-guarded ~ .embed-actions { + position-anchor: --mermaid-guard-source; + top: calc(anchor(top) + var(--size-2-2)); + } +} +.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; +} +.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; +} +.image-embed .embed-actions { + corner-shape: var(--embed-actions-corner-shape); + box-shadow: var(--embed-actions-shadow); + background-color: var(--embed-actions-background); + border-radius: var(--embed-actions-radius); + padding: var(--embed-actions-padding); + backdrop-filter: var(--embed-actions-blur); +} +.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 img { + border-radius: var(--image-radius); +} +.internal-embed.query-embed .embed-actions { + 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; +} +.cm-content .image-embed { + vertical-align: bottom; +} +.cm-content .image-embed, +.cm-image-reveal-tooltip .image-embed { + width: fit-content; +} +.cm-content .image-embed .image-wrapper, +.cm-image-reveal-tooltip .image-embed .image-wrapper { + display: flex; + position: relative; +} +.cm-content .image-embed .image-wrapper img, +.cm-image-reveal-tooltip .image-embed .image-wrapper img { + border-radius: var(--image-radius); +} +.cm-content .image-embed .image-wrapper img:not([width]), +.cm-image-reveal-tooltip .image-embed .image-wrapper img:not([width]) { + width: 100%; +} +.cm-content .image-embed .image-resize-corner, +.cm-image-reveal-tooltip .image-embed .image-resize-corner { + display: block; + position: absolute; + z-index: 1; + cursor: nwse-resize; + bottom: 0; + inset-inline-end: 0; + width: 30px; + height: 30px; +} +.mod-rtl .cm-content .image-embed .image-resize-corner, +.mod-rtl .cm-image-reveal-tooltip .image-embed .image-resize-corner, +.is-rtl .cm-content .image-embed .image-resize-corner, +.is-rtl .cm-image-reveal-tooltip .image-embed .image-resize-corner { + direction: rtl; +} +.cm-content .image-embed .image-resize-corner:dir(rtl), +.cm-image-reveal-tooltip .image-embed .image-resize-corner:dir(rtl), +.mod-rtl .cm-content .image-embed .image-resize-corner, +.mod-rtl .cm-image-reveal-tooltip .image-embed .image-resize-corner, +.is-rtl .cm-content .image-embed .image-resize-corner, +.is-rtl .cm-image-reveal-tooltip .image-embed .image-resize-corner { + cursor: nesw-resize; +} +.cm-content .image-embed .image-resize-corner::after, +.cm-image-reveal-tooltip .image-embed .image-resize-corner::after { + position: absolute; + display: block; + content: ""; + width: 10px; + height: 10px; + border-bottom: var(--icon-stroke) solid var(--text-muted); + border-inline-end: var(--icon-stroke) solid var(--text-muted); + border-end-end-radius: 4px; + inset-inline-end: 6px; + bottom: 6px; + opacity: 0; +} +.is-mobile .cm-content .image-embed.is-selected img, +.is-mobile .cm-image-reveal-tooltip .image-embed.is-selected img, +.is-mobile .cm-content .image-embed.is-selected .embed-actions, +.is-mobile .cm-image-reveal-tooltip .image-embed.is-selected .embed-actions { + -webkit-user-select: none; + user-select: none; +} +.cm-content .image-embed .embed-actions, +.cm-image-reveal-tooltip .image-embed .embed-actions { + inset-inline-end: 8px; + top: var(--size-4-2); + z-index: 2; +} +@media (hover: hover) { + .cm-content .image-embed .embed-action:hover, + .cm-image-reveal-tooltip .image-embed .embed-action:hover { + background-color: var(--background-modifier-hover); + } +} +.is-mobile .cm-content .image-embed .embed-action, +.is-mobile .cm-image-reveal-tooltip .image-embed .embed-action { + --icon-size: var(--icon-l); + padding: var(--size-4-2); +} +@media (hover: hover) { + .cm-content .image-embed:hover .embed-actions, + .cm-image-reveal-tooltip .image-embed:hover .embed-actions { + opacity: 1; + } + .cm-content .image-embed:hover .image-resize-corner::after, + .cm-image-reveal-tooltip .image-embed:hover .image-resize-corner::after { + opacity: 1; + } +} +.cm-content .image-embed.is-resizing .embed-actions, +.cm-image-reveal-tooltip .image-embed.is-resizing .embed-actions { + opacity: 1; +} +.cm-content .image-embed.is-resizing .image-resize-corner::after, +.cm-image-reveal-tooltip .image-embed.is-resizing .image-resize-corner::after { + opacity: 1; +} +.cm-content .image-embed.is-resizing .image-resize-corner::after, +.cm-image-reveal-tooltip .image-embed.is-resizing .image-resize-corner::after { + border-color: var(--color-accent); +} +.cm-content .image-embed.is-selected ::selection, +.cm-image-reveal-tooltip .image-embed.is-selected ::selection { + background-color: transparent; +} +.cm-content .image-embed.is-selected .embed-actions, +.cm-image-reveal-tooltip .image-embed.is-selected .embed-actions { + opacity: 1; +} +.cm-content .image-embed.no-hover-actions:not(.is-selected) .embed-actions, +.cm-image-reveal-tooltip .image-embed.no-hover-actions:not(.is-selected) .embed-actions { + opacity: 0; + pointer-events: none; +} +.cm-editor.cm-focused .image-embed.is-selected { + --image-radius: 8px; +} +.cm-editor.cm-focused .image-embed.is-selected .image-wrapper { + border-radius: var(--image-radius); + cursor: zoom-in; +} +.cm-editor.cm-focused .image-embed.is-selected .image-wrapper::after { + pointer-events: none; + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + width: 100%; + height: 100%; + border-radius: var(--image-radius); + box-shadow: inset 0 0 0 2px var(--text-muted), inset 0 0 0 4px var(--background-primary); +} +.cm-line > .image-embed { + position: relative; + display: inline-flex; +} +.cm-line > .image-embed .image-wrapper { + display: inline-flex; +} +.cm-tooltip.cm-image-reveal-tooltip { + border: none; + background: transparent; + padding: 0; + pointer-events: none; +} +.cm-tooltip.cm-image-reveal-tooltip .image-embed { + position: relative; + display: inline-flex; +} +.cm-image-reveal-spacer { + display: inline-block; + width: 0; + vertical-align: bottom; + user-select: none; + pointer-events: none; +} +.cm-image-reveal-gap { + user-select: none; + pointer-events: none; +} +.cm-editor.cm-focused .cm-vimMode .image-embed.is-selected .image-wrapper::after { + background-color: var(--text-selection); +} +.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 .embed-actions { + opacity: 1; + } +} +.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); +} +@media (hover: hover) { + .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: 2rem; +} +.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); + corner-shape: var(--metadata-property-corner-shape); + 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: color-mix(in oklch, var(--text-error) 10%, transparent); +} +.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 { + color: var(--text-accent-hover); +} +@media (hover: hover) { + .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); + corner-shape: var(--metadata-property-corner-shape); + 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); + corner-shape: var(--metadata-property-corner-shape-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); + corner-shape: var(--metadata-property-corner-shape-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); + padding: var(--metadata-input-padding); + 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: color-mix(in oklch, var(--color-orange) 15%, transparent); + } +} +.metadata-property-value { + --input-padding: var(--metadata-input-padding); + 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.is-being-dragged-over { + position: relative; +} +.metadata-property-value.is-being-dragged-over:after { + content: ''; + position: absolute; + pointer-events: none; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: color-mix(in oklch, var(--interactive-accent) 10%, transparent); + z-index: var(--layer-cover); +} +.metadata-property-value .metadata-input-text, +.metadata-property-value .metadata-input-number, +.metadata-property-value .multi-select-container { + background-color: transparent; +} +@media (hover: hover) { + .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; + overflow: hidden; +} +.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; +} +@media (hover: hover) { + .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); +} +.metadata-property-value[data-property-type="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-corner-shape: var(--tag-corner-shape); + --pill-weight: var(--tag-weight); + --pill-focus-width: 100%; + --pill-focus-left-adjust: 0; + cursor: var(--cursor-link); + line-height: 1; +} +.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-blockquote,.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: var(--h1-letter-spacing); + 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: var(--h2-letter-spacing); + 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: var(--h3-letter-spacing); + 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: var(--h4-letter-spacing); + 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: var(--h5-letter-spacing); + 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: var(--h6-letter-spacing); + 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: var(--h1-letter-spacing); + 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: var(--h2-letter-spacing); + 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: var(--h3-letter-spacing); + 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); + letter-spacing: var(--h4-letter-spacing); + 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); + letter-spacing: var(--h5-letter-spacing); + 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: var(--h6-letter-spacing); + 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; /* kept !important because Obsidian app.css uses !important here */ +} +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; + max-width: 100%; +} +.markdown-preview-view img:not([width]), +.markdown-rendered img:not([width]) { + 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 img { + max-width: 100%; +} +.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: 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: '"'; +} +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); +} +.markdown-rendered ul, +.markdown-rendered ol { + padding-inline-start: 0; + margin-block-start: var(--p-spacing); + margin-block-end: var(--p-spacing); +} +.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); +} +.cm-line.HyperMD-list-line { + tab-size: var(--list-indent); +} +.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); +} +.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; +} +.markdown-rendered ul.has-list-bullet { + list-style-type: '\200B'; +} +.markdown-rendered ul.has-list-bullet > li::marker { + color: transparent; +} +.list-bullet { + 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; /* kept !important because Obsidian app.css uses !important here */ +} +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); +} +.markdown-source-view.mod-cm6.is-live-preview { +} +.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); + --font-weight: var(--link-weight); + 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 { + 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-ios .markdown-source-view.mod-cm6 .cm-editor:not(.cm-focused) .cm-underline { + user-select: none; + -webkit-user-select: none; + -webkit-user-modify: read-only; +} +.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; /* kept !important because Obsidian app.css uses !important here */ + letter-spacing: -1ch; + font-family: monospace; + color: transparent; +} +.cm-s-obsidian { +} +.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; /* kept !important because Obsidian app.css uses !important here */ + 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; /* kept !important because Obsidian app.css uses !important here */ +} +.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; /* kept !important because Obsidian app.css uses !important here */ + 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 { +} +.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; +} +.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); + corner-shape: var(--tag-corner-shape); + 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); + corner-shape: var(--tag-corner-shape); + 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); + corner-start-start-shape: var(--tag-corner-shape); + corner-end-start-shape: var(--tag-corner-shape); + 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); + corner-start-end-shape: var(--tag-corner-shape); + corner-end-end-shape: var(--tag-corner-shape); + 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="radio"], +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="radio"][disabled=true], +input[type=checkbox][disabled=true] { + pointer-events: none; +} +input[type="radio"]:active, +input[type=checkbox]:active, +input[type="radio"]:focus, +input[type=checkbox]:focus { + outline: 0; + border-color: var(--checkbox-border-color-hover); +} +@media (hover: hover) { + input[type="radio"]:hover, + input[type=checkbox]:hover { + outline: 0; + border-color: var(--checkbox-border-color-hover); + } +} +input[type="radio"]:focus-visible, +input[type=checkbox]:focus-visible { + box-shadow: 0 0 0 2px var(--background-modifier-border-focus); +} +input[type="radio"]:checked:after, +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="radio"]:checked, +input[type=checkbox]:checked { + background-color: var(--checkbox-color); + border-color: var(--checkbox-color); +} +@media (hover: hover) { + input[type="radio"]:checked:hover, + input[type=checkbox]:checked:hover { + background-color: var(--checkbox-color-hover); + border-color: var(--checkbox-color-hover); + } +} +input[type="radio"][data-indeterminate="true"]:not(:checked):after, +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); +} +input[type="radio"] { + border-radius: 50%; +} +input[type="radio"]:checked { + background-color: var(--interactive-accent); + border-color: var(--interactive-accent); +} +input[type="radio"]:checked::after { + -webkit-mask-size: 50%; + -webkit-mask-position: 50% 50%; + -webkit-mask-image: url("data:image/svg+xml; utf8, "); +} +.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; /* kept !important because Obsidian app.css uses !important here */ +} +.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 { +} +.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)); + --link-weight: calc(var(--font-weight) + var(--bold-modifier)); + color: var(--bold-color); +} +.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)); +} +.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); + } +} +.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 { + 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; +} +.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: 0 0 60px; + --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: var(--bases-view-padding); + scrollbar-gutter: stable; +} +.bases-view.is-being-dragged-over { + position: relative; +} +.bases-view.is-being-dragged-over:after { + content: ''; + pointer-events: none; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: color-mix(in oklch, var(--interactive-accent) 10%, transparent); + z-index: var(--layer-cover); +} +.bases-error { + padding: 0 var(--size-4-2); + color: var(--text-warning); + font-size: var(--font-ui-small); + text-align: center; +} +.bases-error .formula-preview { + background-color: var(--background-secondary); + padding: var(--size-4-2); +} +.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; + overflow: hidden; +} +.bases-formula-error .warning-icon { + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); + color: color-mix(in oklch, var(--background-modifier-error) 60%, transparent); + display: flex; + align-items: center; + margin-inline-end: var(--size-4-1); +} +.bases-formula-error .bases-formula-error-message { + overflow: hidden; + text-overflow: ellipsis; +} +.block-language-base, +.bases-embed { + cursor: var(--cursor); + height: var(--bases-embed-height, auto); + overflow: hidden; +} +.app-container .block-language-base, +.app-container .bases-embed { + --bases-header-border-width: 0; +} +.markdown-reading-view .bases-embed { + width: var(--bases-embed-width, 100%); + transform: var(--bases-embed-transform, none); +} +.workspace-leaf-content[data-type="markdown"] .block-language-base .bases-view, +.workspace-leaf-content[data-type="markdown"] .bases-embed .bases-view { + border-width: var(--bases-embed-border-width); + border-style: solid; + border-color: var(--bases-embed-border-color); + border-radius: var(--bases-embed-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; +} +.markdown-source-view.mod-cm6 .cm-content > .bases-embed, +.markdown-source-view.mod-cm6 .cm-content > .cm-lang-base { + width: var(--bases-embed-width, 100%); + transform: var(--bases-embed-transform, none); + --bases-header-padding-end: calc(var(--icon-m) + var(--size-4-4)); +} +.markdown-source-view.mod-cm6 .cm-content > .bases-embed .embed-actions, +.markdown-source-view.mod-cm6 .cm-content > .cm-lang-base .embed-actions { + opacity: 1; + top: calc(var(--bases-header-height) / 2 - var(--icon-m) / 2 - var(--size-2-2)); +} +.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 .bases-embed { + --bases-embed-border-width: 0; + --bases-embed-border-radius: 0; + --bases-header-border-width: 0 0 var(--border-width) 0; +} +.canvas-node-content.bases-embed { + width: 100%; + height: 100%; + padding: 0; + display: flex; + flex-direction: column; + overflow: hidden; +} +.bases-rendered-value { + --input-border-width: 0; + padding: var(--metadata-input-padding); + font-size: var(--bases-table-font-size); + text-overflow: ellipsis; + overflow: hidden; +} +.bases-rendered-value input { + background: transparent; + padding: 0; +} +.bases-rendered-value input[disabled=true] { + pointer-events: none; + min-height: 0; +} +.bases-rendered-value input[disabled=true][type=date], +.bases-rendered-value input[disabled=true][type=datetime-local] { + width: auto; +} +.bases-rendered-value img { + width: auto; + max-height: 100%; +} +.bases-group-heading { + --link-color: var(--bases-group-heading-value-color); + --link-unresolved-color: var(--bases-group-heading-value-color); + --link-unresolved-opacity: 1; + --link-decoration: none; + --link-weight: var(--bases-group-heading-value-weight); + --link-color-hover: var(--bases-group-heading-value-color); + display: flex; + align-items: baseline; + line-height: var(--bases-table-row-height); + gap: var(--size-4-1); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 100%; +} +.bases-group-heading .bases-group-property { + font-size: var(--bases-group-heading-property-size); + font-weight: var(--bases-group-heading-property-weight); + color: var(--bases-group-heading-property-color); + display: var(--bases-group-heading-property-display); +} +.bases-group-heading .bases-group-value { + font-size: var(--bases-group-heading-value-size); + font-weight: var(--bases-group-heading-value-weight); + overflow: hidden; + text-overflow: ellipsis; +} +.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 < 540px) { + .bases-header .bases-toolbar-item:not(.bases-toolbar-result-count) { + --bases-toolbar-label-display: none; + --bases-toolbar-badge-display: none; + } +} +.bases-toolbar-menu-container-header { + display: flex; + padding: 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); + corner-shape: var(--corner-shape); + 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); +} +body:not(.is-phone) .base-toolbar-sort-item, +body:not(.is-phone) .base-toolbar-groupby-item { + --metadata-property-box-shadow: 0 0 0 1px var(--background-modifier-border-hover); +} +.bases-toolbar { + align-items: center; + position: relative; + display: flex; + column-gap: var(--size-2-2); + width: 100%; +} +.bases-toolbar .text-icon-button { + margin: 2px; +} +.bases-toolbar .bases-toolbar-item { + margin: 0 -2px; + display: flex; +} +.bases-toolbar .bases-toolbar-item:not(.bases-toolbar-views-menu, .bases-toolbar-result-count) .text-button-label { + display: var(--bases-toolbar-label-display); +} +.bases-toolbar .bases-toolbar-result-count { + color: var(--text-muted); + user-select: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-inline-end: auto; +} +.bases-toolbar .bases-toolbar-result-count .text-button-icon { + display: none; +} +.bases-toolbar .bases-toolbar-result-count .text-button-label { + font-size: var(--font-ui-smaller); + unicode-bidi: plaintext; +} +.bases-toolbar .bases-toolbar-result-count .text-icon-button.is-active { + color: var(--icon-color-active); +} +.bases-toolbar .bases-toolbar-item.bases-toolbar-views-menu { + overflow: hidden; + display: flex; +} +.bases-toolbar .bases-toolbar-item.bases-toolbar-views-menu .text-icon-button { + --icon-color-hover: var(--text-normal); + color: var(--text-normal); +} +.bases-toolbar .bases-toolbar-item.bases-toolbar-views-menu .text-icon-button .mod-aux { + margin-inline-start: auto; +} +.bases-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); +} +.bases-toolbar .mod-error { + --flair-background: var(--text-error); + --flair-color: var(--text-on-accent); + color: var(--text-error); +} +.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-top: var(--size-4-1); + padding-bottom: var(--size-2-1); + border-radius: 0; + 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; + padding: var(--size-2-3); +} +.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: var(--size-4-1); +} +.bases-toolbar-menu { + --input-height: 28px; + z-index: var(--layer-modal); + min-width: 220px; + max-width: 100vw; +} +.bases-toolbar-menu .modal-header { + display: none; +} +.bases-toolbar-menu .menu-scroll { + overflow-y: auto; + padding: 0; +} +.bases-toolbar-menu.bases-toolbar-filter-menu { + width: var(--bases-filter-menu-width); +} +.bases-toolbar-menu .bases-toolbar-section { + padding: var(--size-2-1); +} +.bases-toolbar-menu .bases-toolbar-section:not(:last-child) { + border-bottom: var(--border-width) solid var(--background-modifier-border); +} +.bases-toolbar-menu .bases-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-normal); + font-weight: var(--font-medium); + font-size: var(--font-ui-small); + gap: var(--size-4-1); +} +.bases-toolbar-menu .bases-toolbar-section-header:hover { + color: var(--text-normal); +} +.bases-toolbar-menu .bases-toolbar-section-header .flair { + margin-inline-start: var(--size-4-1); +} +.bases-toolbar-menu .bases-sort-container .bases-toolbar-items, +.bases-toolbar-menu .bases-groupby-container .bases-toolbar-items { + gap: var(--size-2-3); + padding: var(--size-4-1) 0 var(--size-4-2); +} +.bases-toolbar-menu .bases-sort-container .bases-toolbar-section-content, +.bases-toolbar-menu .bases-groupby-container .bases-toolbar-section-content { + padding: 0 var(--size-4-2); +} +.bases-toolbar-menu .bases-sort-container .bases-sort-property-container.mod-error, +.bases-toolbar-menu .bases-groupby-container .bases-sort-property-container.mod-error, +.bases-toolbar-menu .bases-sort-container .bases-groupby-property-container.mod-error, +.bases-toolbar-menu .bases-groupby-container .bases-groupby-property-container.mod-error { + box-shadow: 0 0 0 var(--border-width) var(--background-modifier-error); +} +.bases-toolbar-menu .bases-sort-container .bases-sort-property-container .bases-sort-property, +.bases-toolbar-menu .bases-groupby-container .bases-sort-property-container .bases-sort-property, +.bases-toolbar-menu .bases-sort-container .bases-groupby-property-container .bases-sort-property, +.bases-toolbar-menu .bases-groupby-container .bases-groupby-property-container .bases-sort-property, +.bases-toolbar-menu .bases-sort-container .bases-sort-property-container .bases-groupby-property, +.bases-toolbar-menu .bases-groupby-container .bases-sort-property-container .bases-groupby-property, +.bases-toolbar-menu .bases-sort-container .bases-groupby-property-container .bases-groupby-property, +.bases-toolbar-menu .bases-groupby-container .bases-groupby-property-container .bases-groupby-property { + flex-grow: 1; +} +.bases-toolbar-menu .bases-sort-container .bases-sort-property-container .bases-sort-direction, +.bases-toolbar-menu .bases-groupby-container .bases-sort-property-container .bases-sort-direction, +.bases-toolbar-menu .bases-sort-container .bases-groupby-property-container .bases-sort-direction, +.bases-toolbar-menu .bases-groupby-container .bases-groupby-property-container .bases-sort-direction { + min-width: 5.25em; + border-left: var(--border-width) solid var(--background-modifier-border); + padding-inline-start: var(--size-2-3); +} +.bases-toolbar-menu .bases-sort-container .bases-sort-property-container .bases-sort-direction .combobox-button-label, +.bases-toolbar-menu .bases-groupby-container .bases-sort-property-container .bases-sort-direction .combobox-button-label, +.bases-toolbar-menu .bases-sort-container .bases-groupby-property-container .bases-sort-direction .combobox-button-label, +.bases-toolbar-menu .bases-groupby-container .bases-groupby-property-container .bases-sort-direction .combobox-button-label { + margin-inline-end: 0; + margin-inline-start: auto; +} +.bases-toolbar-menu .bases-sort-container .text-icon-button, +.bases-toolbar-menu .bases-groupby-container .text-icon-button { + width: 100%; + margin-bottom: var(--size-4-2); +} +.base-toolbar-sort-item, +.base-toolbar-groupby-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); + corner-shape: var(--corner-shape); + background-color: var(--menu-background); +} +.base-toolbar-sort-item .combobox-button, +.base-toolbar-groupby-item .combobox-button { + box-shadow: none; + border-radius: 0; + background-color: var(--background-modifier-form-field); +} +.base-toolbar-sort-item .combobox-button.has-focus, +.base-toolbar-groupby-item .combobox-button.has-focus, +.base-toolbar-sort-item .combobox-button:focus, +.base-toolbar-groupby-item .combobox-button:focus, +.base-toolbar-sort-item .combobox-button:hover, +.base-toolbar-groupby-item .combobox-button:hover { + box-shadow: none; +} +.base-toolbar-sort-item .metadata-property, +.base-toolbar-groupby-item .metadata-property { + flex: 1 1 auto; +} +.base-toolbar-sort-item .bases-sort-property, +.base-toolbar-groupby-item .bases-sort-property, +.base-toolbar-sort-item .filter-property-select, +.base-toolbar-groupby-item .filter-property-select { + max-width: 14em; +} +.bases-toolbar-menu-form { + display: flex; + flex-direction: column; + gap: var(--size-4-2); + padding: var(--size-4-1) var(--size-4-2) var(--size-4-2); + font-size: var(--font-ui-small); + overflow-y: auto; + min-height: 0; +} +.bases-toolbar-menu-form.view-config-menu .formula-editor .cm-content { + min-height: var(--input-height); +} +.bases-toolbar-menu-form .formula-editor { + resize: both; + overflow: auto; + min-width: 100%; + max-width: 260px; +} +.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-group-container { + display: flex; + flex-direction: column; + gap: var(--size-4-2); +} +.bases-toolbar-menu-form .input-group-divider { + margin-left: calc(var(--size-4-2) * -1); + margin-right: calc(var(--size-4-2) * -1); + border-top: var(--border-width) solid var(--background-modifier-border); + width: calc(100% + var(--size-4-4)); +} +.bases-toolbar-menu-form .input-row + .input-group-divider { + margin-top: var(--size-4-1); +} +.bases-toolbar-menu-form .input-group-header { + align-items: center; + display: flex; + font-size: var(--font-ui-small); + font-weight: var(--font-semibold); + gap: var(--size-4-2); +} +.bases-toolbar-menu-form .input-group-content { + display: flex; + flex-direction: column; + gap: var(--size-2-3); +} +.bases-toolbar-menu-form .input-row .input-row-label { + color: var(--text-normal); + 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 .formula-editor-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 .formula-editor-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 .formula-editor-status.mod-empty { + color: var(--text-faint); +} +.bases-toolbar-menu-form .input-row .formula-editor-status.mod-error { + color: var(--text-error); +} +.view-config-menu .formula-editor-status:not(.mod-error) { + display: none; +} +.bases-toolbar-menu-actions { + padding: 0 var(--size-4-1) 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); + corner-shape: var(--corner-shape); + 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; +} +.bases-search-row { + --input-border-width: 0; + --input-border-width-focus: 0; + --background-modifier-form-field: transparent; + --background-modifier-form-field-hover: transparent; + display: flex; + align-items: center; + padding: var(--size-2-2) var(--bases-header-padding-end) var(--size-2-2) var(--bases-header-padding-start); + border-width: var(--bases-header-border-width); + border-color: var(--bases-table-border-color); + border-style: solid; +} +.bases-search-row .search-input-container { + flex-grow: 1; + display: flex; + align-items: center; + gap: var(--size-4-1); +} +.bases-search-row .search-input-container input { + flex: 1; + min-width: 0; +} +.bases-search-row .search-input-container input:not(:placeholder-shown) { + padding-inline-end: 0; +} +.bases-search-row .search-input-container .search-input-clear-button { + position: static; + flex-shrink: 0; +} +.bases-search-row .document-search-count { + flex-shrink: 0; +} +.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-operator, +.bases-query-container .filter-property-select { + background-color: var(--bases-filter-input-background); +} +.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(--bases-filter-input-background); + 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; + word-break: break-word; +} +.bases-query-container .filter-rhs-container .metadata-link-inner { + width: auto; +} +.bases-query-container .filter-rhs-container .metadata-link-flair { + display: none; +} +.tooltip.bases-filter-query-message { + animation: none; + z-index: var(--layer-popover); +} +.hover-popover.bases-new-item-popover .markdown-source-view.is-live-preview .metadata-container { + display: var(--metadata-display-editing); +} +.bases-view[data-view-type="cards"] { + --bases-view-padding: var(--size-4-3); + --bases-embed-padding: var(--size-4-1) 1px; +} +.is-phone .bases-view[data-view-type="cards"] { + --bases-embed-padding: var(--size-4-2); +} +.bases-cards-container { + background-color: var(--bases-cards-container-background); + position: relative; + width: 100%; + gap: var(--size-4-2); +} +.is-grouped .bases-cards-container .bases-group-heading { + position: absolute; + padding: var(--size-4-1) 0 var(--size-4-2); +} +.is-grouped .bases-cards-container .bases-cards-group { + padding: 0 0 var(--size-4-4) 0; + border-color: var(--background-modifier-border); + border-width: 0 0 1px 0; + border-style: solid; +} +.bases-cards-group { + position: absolute; + gap: var(--size-4-3); +} +.bases-cards-item { + position: absolute; + cursor: var(--cursor-link); + user-select: none; + border-radius: var(--bases-cards-radius); + corner-shape: var(--bases-cards-corner-shape); + 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 .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); +} +.bases-view[data-view-type="list"] { + --bases-view-padding: var(--size-4-2) var(--size-4-4) 60px var(--size-4-2); + --bases-embed-padding: 0; +} +.bases-view[data-view-type="list"].is-grouped { + --bases-view-padding: 0 var(--size-4-4) 60px var(--size-4-4); +} +.bases-list-container { + position: relative; + user-select: text; + cursor: text; + min-height: 100px; +} +.bases-list-group { + position: absolute; + width: 100%; +} +.bases-list-group-list { + position: relative; +} +.bases-list-item { + position: absolute; + gap: var(--size-2-2); + padding-inline-start: var(--list-indent-editing); + margin-inline-start: 2ch; + padding-top: var(--list-spacing); + padding-bottom: var(--list-spacing); +} +.bases-list-item .list-number { + font-size: var(--bases-table-font-size); + color: var(--list-marker-color); + text-align: end; + display: inline-block; + padding-inline-end: 0.25em; + width: 3em; + margin-inline-start: -3em; + font-variant: tabular-nums; +} +.bases-list-item .list-bullet { + font-size: var(--bases-table-font-size); + padding-inline-end: 0.25em; + margin-inline-start: -0.8em; + width: 0.8em; + float: none; +} +.bases-list-item .list-bullet + .bases-rendered-value { + overflow: visible; +} +.bases-list-item .bases-rendered-value { + padding: 0; + word-break: break-word; +} +.bases-list-item .bases-rendered-value .value-list-container { + display: inline; +} +.bases-list-item .bases-list-item-properties { + position: relative; +} +.bases-list-item .bases-list-item-properties.nested { + padding-inline-start: var(--list-indent); +} +.bases-list-item .bases-list-item-properties.nested .bases-list-property { + display: block; +} +.bases-list-item .bases-list-property { + padding: 0; + cursor: text; +} +.bases-list-item .bases-list-property p { + margin-block-start: 0; + margin-block-end: 0; +} +.bases-list-item .bases-list-property a { + user-select: text; +} +.bases-list-item .bases-list-separator { + font-size: var(--bases-table-font-size); + color: var(--text-muted); +} +.show-indentation-guide .bases-list-item-properties.nested:before { + content: "\200b"; + position: absolute; + display: block; + inset-inline-start: -0.5em; + top: 0; + bottom: 0; + border-inline-end: var(--indentation-guide-width) solid var(--indentation-guide-color); +} +.bases-view[data-view-type="table"] { + --bases-view-padding: 0; + --bases-embed-border-width: var(--border-width); + position: relative; +} +.mod-sidedock { + --bases-table-header-background: var(--background-secondary); +} +.bases-table-container { + position: relative; + min-width: 100%; + background: var(--bases-table-group-background); + --metadata-input-font-size: var(--bases-table-font-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-table .bases-group-heading { + width: 100%; + height: var(--bases-table-row-height); + padding-inline-start: var(--size-4-2); +} +.bases-thead { + position: sticky; + width: 100%; + height: var(--bases-table-row-height); + top: 0; + z-index: var(--layer-cover); + 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); +} +.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; +} +@media (hover: hover) { + .bases-thead .bases-td:hover { + background-color: var(--bases-table-header-background-hover); + } +} +.bases-thead .bases-td.has-active-menu { + 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-font-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: var(--layer-cover); + touch-action: none; +} +body.mod-rtl .bases-table-header-resizer { + right: unset; + left: -1px; +} +.bases-table-header-resizer.is-active { + background-color: var(--color-accent); +} +@media (hover: hover) { + .bases-table-header-resizer:hover { + background-color: var(--divider-color-hover); + } +} +.bases-tbody { + position: relative; + width: 100%; + background: var(--background-primary); + 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-table-footer { + position: sticky !important; /* kept !important because Obsidian app.css uses !important here */ + bottom: 0; + background-color: var(--bases-table-summary-background); + width: 100%; + z-index: var(--layer-sidedock); +} +.bases-table-footer .bases-td { + box-shadow: none; +} +.bases-table-group-summary-row.bases-tr { + position: relative !important; /* kept !important because Obsidian app.css uses !important here */ + background-color: var(--bases-table-group-background); +} +.bases-table-group-summary-row.bases-tr .summary-function-value { + color: var(--text-muted); +} +.bases-table-summary-cell { + display: flex; + min-width: 100%; + height: 100%; + padding-inline-end: var(--size-4-2); + padding-inline-start: var(--size-2-1); + justify-content: flex-end; + --icon-size: var(--icon-xs); + --icon-stroke: var(--icon-xs-stroke-width); +} +@media (hover: hover) { + .bases-table-summary-cell:hover { + background-color: var(--bases-table-summary-background-hover); + } + .bases-table-summary-cell:hover .summary-expand-button { + opacity: 1; + display: flex; + } + .bases-table-summary-cell:hover .placeholder { + opacity: 1; + color: var(--text-faint); + } +} +.bases-table-summary-cell.has-active-menu { + background-color: var(--bases-table-summary-background-hover); +} +.bases-table-summary-cell.has-active-menu .summary-expand-button { + opacity: 1; + display: flex; +} +.bases-table-summary-cell.has-active-menu .placeholder { + opacity: 1; + color: var(--text-faint); +} +.bases-table-summary-cell .placeholder { + opacity: 0; + font-size: var(--font-ui-smaller); + overflow: hidden; + text-overflow: ellipsis; + unicode-bidi: plaintext; + padding-inline-start: var(--size-2-1); +} +.bases-table-summary-cell .summary-content { + --input-placeholder-color: var(--text-faint); + cursor: var(--cursor); + color: var(--text-muted); + flex-grow: 0; + display: flex; + align-items: center; + justify-content: flex-end; + font-size: var(--font-ui-small); + line-height: var(--line-height-tight); + gap: var(--size-2-3); + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.bases-table-summary-cell .summary-function-name { + color: var(--text-muted); + font-size: var(--font-smaller); + padding-inline-start: var(--size-2-2); + overflow: hidden; + text-overflow: ellipsis; + unicode-bidi: plaintext; +} +.bases-table-summary-cell .summary-expand-button { + display: none; + opacity: 0; + align-items: center; + color: var(--text-faint); + margin-inline-start: auto; +} +.bases-summary-menu-item .bases-toolbar-menu-item-name { + flex-grow: 1; +} +.bases-summary-menu-item .bases-toolbar-menu-item-value { + color: var(--text-muted); + font-variant-numeric: tabular-nums; +} +.bases-footer-suggestion-item { + display: flex; + justify-content: space-between; +} +.bases-footer-suggestion-item .value { + color: var(--text-muted); +} +.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-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.is-measuring * { + overflow: visible !important; /* kept !important because Obsidian app.css uses !important here */ +} +.bases-td.is-measuring *:not(input, select, textarea) { + width: max-content !important; /* kept !important because Obsidian app.css uses !important here */ +} +.bases-td:focus-within { + background-color: var(--bases-table-cell-background-active); + border-radius: var(--bases-table-cell-radius-focus); + box-shadow: var(--bases-table-cell-shadow-focus); + z-index: 1; + height: fit-content; + min-height: var(--bases-table-row-height); +} +.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-cell[data-property-type="checkbox"] { + justify-content: center; +} +.bases-table-cell .metadata-input-number, +.bases-table-cell[data-property-type="number"] { + justify-content: flex-end; + text-align: right; + font-variant-numeric: tabular-nums; +} +.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) .metadata-link { + overflow: hidden; +} +.bases-table-container:not(.mod-multiline) .multi-select-container:not(:focus-within) { + flex: 0 0 auto; + flex-wrap: nowrap; +} +.bases-table-active-cell, +.bases-table-selection { + position: absolute; + display: flex; + pointer-events: none; +} +.bases-table-container.is-selecting .bases-table-cell { + pointer-events: none; +} +.bases-table-container:focus .bases-table-active-cell { + box-shadow: var(--bases-table-cell-shadow-active); + border-radius: var(--bases-table-cell-radius-active); +} +.bases-table-container:focus .bases-table-active-cell.mod-selection { + box-shadow: var(--bases-table-cell-shadow-focus); +} +.bases-table-container:focus .bases-table-selection { + background-color: var(--bases-table-cell-background-selected); + mix-blend-mode: var(--table-selection-blend-mode); +} +.bases-table-container.mod-multiline .bases-table-cell { + align-items: start; +} +.bases-table-container.mod-multiline .metadata-input-longtext { + overflow-y: auto; +} +.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); +} +.view-action.mod-bookmarked { + --icon-color: var(--icon-color-active); + --icon-color-hover: var(--icon-color-active); +} +.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%; +} +.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-files-container:not(.show-unsupported) .is-unsupported { + display: none; +} +.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-file-tag { + background-color: var(--nav-tag-background); + border-radius: var(--nav-tag-radius); + color: var(--nav-tag-color); + font-size: 9px; + font-weight: var(--nav-tag-weight); + 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; +} +@media (hover: hover) { + .tree-item-self:hover .nav-file-tag { + color: var(--nav-tag-color-hover); + } +} +.tree-item-self.is-active .nav-file-tag { + color: var(--nav-tag-color-active); +} +.tree-item-self.is-being-dragged .nav-file-tag { + color: var(--text-normal); +} +.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: color-mix(in oklch, var(--interactive-accent) 10%, transparent); +} +.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); +} +.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: color-mix(in oklch, var(--interactive-accent) 20%, transparent); +} +.file-tree .mod-changed .tree-item-flair { + color: var(--text-accent-hover); +} +.file-tree .mod-new.is-selected { + background-color: color-mix(in oklch, var(--background-modifier-success) 20%, transparent); +} +.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: color-mix(in oklch, var(--background-modifier-error) 20%, transparent); +} +.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-header.mobile-tap { + background-color: var(--background-modifier-hover); +} +.file-recovery-list-item-header .collapse-indicator { + min-width: var(--size-4-6); + padding-inline-start: var(--size-4-2); + opacity: 1; +} +.is-mobile .file-recovery-list-item-header { + transition: background-color 200ms ease-in-out, color 200ms ease-in-out; +} +.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(--menu-radius); + corner-shape: var(--menu-corner-shape); + position: absolute; + inset-inline-end: var(--size-4-3); + top: var(--size-4-3); + padding: 0; + background-color: var(--menu-background); + width: var(--graph-controls-width); + overflow: auto; + --scrollbar-native-width: none; +} +.graph-controls::-webkit-scrollbar { + display: none; +} +.graph-controls:not(.is-close) { + max-height: calc(100% - var(--size-4-4)); + border: var(--menu-border-width) solid var(--menu-border-color); + box-shadow: var(--shadow-s); +} +.graph-controls.is-close { + min-width: inherit; + width: auto; + background-color: var(--background-primary); + border: var(--menu-border-width) 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 { + background-color: transparent; + padding: var(--size-2-3) 0; + margin-bottom: var(--size-4-1); + 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-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-2-3); + 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-medium); + 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-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; +} +@media (hover: hover) { + .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; +} +@media (hover: hover) { + .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: color-mix(in oklch, var(--background-modifier-success) 20%, transparent); + 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: color-mix(in oklch, var(--background-modifier-error) 20%, transparent); +} +.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: calc(var(--search-icon-size) * 2 - 2px); + border-radius: var(--search-input-radius); + corner-shape: var(--search-input-corner-shape); +} +.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:active { + color: var(--text-normal); + transition: color var(--anim-duration-fast) ease-in-out; +} +@media (hover: hover) { + .search-input-clear-button:hover { + 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: var(--border-width) 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 var(--border-width) 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: var(--border-width) 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-container:empty { + display: none; +} +.search-info-children { + padding-inline-start: 20px; + border-inline-start: var(--border-width) 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: var(--border-width) 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); + align-items: center; +} +.search-params { + margin: var(--size-4-1) var(--size-4-4); + gap: var(--size-4-2); + display: flex; + flex-direction: column; + --scrollbar-native-width: none; +} +.search-params::-webkit-scrollbar { + display: none; +} +.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: 0; + border: none; + background-color: transparent; +} +.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); +} +.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); +} +.is-mobile .search-params { + background: var(--background-secondary); + border-radius: var(--touch-size-xxs); + margin: var(--size-4-1) var(--size-4-3) var(--size-4-2); + padding: var(--size-4-4) var(--size-4-4) var(--size-4-3); +} +.is-mobile .search-row > .clickable-icon { + width: var(--touch-size-s); + height: var(--touch-size-s); +} +.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-container .controls button { + box-shadow: none; +} +.slides-close-btn { + display: inline-block; + position: absolute; + top: calc(var(--safe-area-inset-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; +} +.is-phone .slides-close-btn { + --icon-size: var(--icon-l); + inset-inline-end: var(--size-4-4); +} +.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-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); + } +} +.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 color-mix(in oklch, var(--mono-100) 20%, transparent); +} +.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 .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-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; + } +} +.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; +} +.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; /* kept !important because Obsidian app.css uses !important here */ +} +.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: #c0c0c0; +} +body.theme-dark { + --canvas-color: #7e7e7e; +} +.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: var(--shadow-l); + --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; /* kept !important because Obsidian app.css uses !important here */ +} +.canvas-wrapper.is-screenshotting * { + pointer-events: none !important; /* kept !important because Obsidian app.css uses !important here */ +} +.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: color-mix(in oklch, var(--color-accent) 10%, transparent); + border: 2px solid var(--color-accent); + z-index: -1; +} +.canvas-selection.mod-group-selection { + border-width: 3px; + border-radius: 3px; + background-color: color-mix(in oklch, var(--color-accent) 3%, transparent); + border-color: color-mix(in oklch, var(--color-accent) 30%, transparent); + 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 { + inset-inline-end: var(--size-4-2); + top: var(--size-4-2); + gap: var(--size-4-2); + display: flex; + flex-direction: column; +} +.is-mobile .canvas-controls { + inset-inline-end: var(--size-4-3); +} +.canvas-control-group { + border-radius: var(--canvas-controls-radius); + background-color: var(--interactive-normal); + border: 1px solid var(--background-modifier-border); + box-shadow: var(--input-shadow); + display: flex; + flex-direction: column; + overflow: hidden; +} +.is-mobile .canvas-control-group { + border: none; +} +.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); + background-color: var(--background-primary); + border-bottom: 1px solid var(--background-modifier-border); + color: var(--text-muted); + --icon-size: var(--canvas-controls-icon-size); + --icon-stroke: var(--canvas-controls-icon-stroke); +} +.is-mobile .canvas-control-item { + border: none; + background-color: transparent; +} +.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 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); + background-color: color-mix(in oklch, var(--canvas-color) 10%, transparent); +} +.canvas-icon-placeholder { + display: flex; + width: 40%; + height: 40%; +} +.canvas-icon-placeholder svg { + opacity: 0.3; + color: 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 var(--canvas-color); + --shadow-border-themed: 0 0 0 2px 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: color-mix(in oklch, var(--canvas-color) 70%, transparent); + box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--canvas-color) 70%, transparent), var(--shadow-stationary); +} +.canvas-node.is-selected.is-themed .canvas-node-container, +.canvas-node.is-focused.is-themed .canvas-node-container { + border-color: 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: color-mix(in oklch, var(--color-accent) 20%, transparent); +} +.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: color-mix(in oklch, var(--canvas-color) 7%, transparent); +} +.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: color-mix(in oklch, var(--canvas-color) 10%, transparent); + 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 var(--canvas-color); + color: var(--text-normal); + text-overflow: initial; +} +.canvas-node-group.is-themed .canvas-group-label:not([contenteditable="true"]) { + background-color: 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: color-mix(in oklch, var(--canvas-color) 7%, transparent); +} +.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: 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: var(--canvas-color); + fill: 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: color-mix(in oklch, var(--canvas-color) 10%, transparent); +} +.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: var(--canvas-color); + box-shadow: var(--shadow-stationary), 0 0 0 calc(3px * var(--zoom-multiplier)) 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: var(--canvas-color); +} +.canvas-color-picker-item.is-active { + box-shadow: 0 0 0 2px var(--canvas-color); +} +@media (hover: hover) { + .canvas-color-picker-item:hover { + box-shadow: 0 0 0 2px 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: color-mix(in oklch, var(--color-accent) 10%, transparent); + 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: var(--canvas-color); + fill: var(--canvas-color); + fill-opacity: 0.5; +} +.canvas-minimap path { + stroke: #c0c0c0; + fill: none; +} +.canvas-minimap path.is-themed { + stroke: 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; /* kept !important because Obsidian app.css uses !important here */ +} +.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; /* kept !important because Obsidian app.css uses !important here */ +} +.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 { + background: transparent !important; /* kept !important because Obsidian app.css uses !important here */ +} +.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: var(--border-width) 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 { + background-image: none; + padding-right: 0; +} +.webviewer-content .error-notice { + max-width: var(--file-line-width); + margin: 25% auto 0; + padding: var(--file-margins); +} +.webviewer-history-view-item { + text-wrap: nowrap; + overflow: hidden; +} +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 { + -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 0; + --scrollbar-native-width: none; +} +.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; + max-width: 540px; + --scrollbar-native-width: none; +} +.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); + border-radius: var(--radius-s); + corner-shape: var(--corner-shape); + padding: 0 var(--size-4-3) var(--size-4-2); + font-size: var(--font-ui-small); +} +@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-normal); + align-self: flex-start; +} +.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); + corner-shape: var(--corner-shape); + 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); + --preferred-text-scale: env(preferred-text-scale); + --keyboard-height: 0px; +} +.is-mobile { + --ribbon-width: var(--touch-size-xl); + --view-header-height: var(--touch-size-l); + --view-header-action-radius: var(--view-header-height); + --bases-header-height: var(--touch-size-l); + --mobile-toolbar-height: var(--touch-size-l); + --autoscroll-padding: 20px; + --system-status-background: var(--background-primary); + --canvas-controls-radius: var(--touch-radius-s); + --canvas-controls-icon-size: var(--icon-l); + --canvas-controls-icon-stroke: var(--icon-l-stroke-width); + --caret-color: var(--text-accent); + --clickable-icon-radius: var(--touch-size-m); + --dropdown-padding-end: var(--size-4-8); + --dropdown-padding-start: var(--size-4-4); + --dropdown-icon-inset: var(--size-4-3); + --embed-actions-padding: 0; + --embed-actions-corner-shape: 0; + --embed-actions-radius: var(--touch-size-l); + --embed-actions-shadow: none; + --embed-action-radius: var(--touch-size-l); + --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-xs: 18px; + --icon-s: 18px; + --icon-m: 20px; + --icon-l: 24px; + --icon-opacity: 1; + --icon-opacity-hover: 0.65; + --input-height: var(--touch-size-m); + --input-shadow: none; + --input-shadow-hover: none; + --input-font-weight: var(--font-medium); + --input-border-width: 0px; + --input-radius: var(--touch-radius-m); + --input-padding: var(--size-4-1) var(--size-4-4); + --input-icon-inset: var(--size-4-2); + --interactive-normal: var(--background-secondary); + --interactive-hover: var(--background-modifier-border); + --menu-divider-width: var(--border-width); + --menu-divider-color: var(--background-modifier-border); + --menu-backdrop-filter: var(--blur-m); + --mobile-sidebar-width: 84vw; + --mobile-sidebar-width-pinned: 350px; + --mobile-sidebar-min-width: 300px; + --mobile-sidebar-max-width: 450px; + --mobile-sidebar-background: var(--background-primary); + --mobile-sidebar-radius: 0; + --modal-sidebar-background: transparent; + --modal-background: var(--background-primary); + --modal-radius: var(--touch-radius-xs); + --navbar-bottom-offset: max(var(--safe-area-inset-bottom), var(--size-4-3)); + --navbar-height: 80px; + --navbar-radius: 0; + --navbar-width: 100%; + --navbar-max-width: 100%; + --nav-item-padding: var(--size-4-2) var(--size-4-2) var(--size-4-2) var(--size-4-6); + --nav-item-margin-bottom: 0; + --nav-item-color: var(--text-normal); + --nav-item-radius: var(--touch-radius-xs); + --nav-item-size: var(--font-ui-medium); + --prompt-background: var(--background-secondary); + --prompt-backdrop-filter: var(--blur-m); + --prompt-input-height: var(--touch-size-l); + --radius-xl: 18px; + --search-clear-button-size: 16px; + --search-icon-size: 20px; + --settings-background: var(--background-secondary); + --setting-items-background: var(--background-secondary); + --setting-items-radius: var(--touch-radius-xs); + --setting-group-heading-color: var(--text-muted); + --setting-group-heading-weight: var(--font-semibold); + --setting-group-heading-size: var(--font-ui-small); + --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; + --suggestion-background: var(--background-secondary); + --suggestion-backdrop-filter: var(--blur-m); + --swatch-shadow: none; + --swatch-height: var(--touch-size-s); + --swatch-width: var(--touch-size-s); + --swatch-radius: var(--touch-size-s); + --textarea-radius: var(--touch-radius-xxs); + --textarea-padding: var(--size-4-3) var(--size-4-4); + --toggle-width: 52px; + --toggle-radius: 26px; + --toggle-thumb-radius: 26px; + --toggle-thumb-height: 26px; + --toggle-thumb-width: 26px; + --file-margins-y: var(--size-4-2); + --file-margins-x: var(--size-4-6); + --background-modifier-cover: rgba(0, 0, 0, 0.15); + --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 .mod-settings, +.is-mobile .mod-community-modal { + --setting-items-background: var(--background-primary); +} +.is-mobile.theme-dark { + --color-base-00: #000; + --color-base-10: #111; + --color-base-20: #1e1e1e; + --tag-background: color-mix(in oklch, var(--interactive-accent) 20%, transparent); + --search-result-background: var(--background-secondary); + --background-modifier-form-field: var(--background-modifier-border); + --background-modifier-cover: color-mix(in oklch, var(--background-secondary) 35%, transparent); + --background-modifier-hover: color-mix(in oklch, var(--mono-100) 15%, transparent); + --background-modifier-message: var(--background-secondary); + --modal-border-color: var(--background-modifier-border); + --settings-home-background: var(--background-primary); + --settings-background: var(--background-primary); + --setting-items-background: var(--background-secondary); + --menu-divider-color: var(--background-modifier-border-hover); + --mobile-sidebar-background: var(--background-secondary); + --modal-background: var(--background-secondary); + --interactive-normal: var(--background-modifier-border); + --interactive-hover: var(--background-modifier-border-hover); +} +.is-mobile.theme-dark.is-tablet { + --settings-background: var(--background-primary-alt); +} +.is-mobile.theme-dark .mod-settings, +.is-mobile.theme-dark .mod-community-modal { + --setting-items-background: var(--background-secondary); +} +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-phone { + --nav-item-size: var(--font-ui-medium); + --metadata-label-width: 7.5em; + --modal-community-sidebar-width: 100%; + --modal-border-width: 0; + --prompt-border-width: 0; + --view-bottom-spacing: 0; + --view-bottom-fade-opacity: 0.5; + --view-bottom-fade-mask: linear-gradient(to top, #000 0%, #000 1px); + --view-top-fade-opacity: 0.25; + --view-top-fade-mask: linear-gradient(to bottom, #000 0%, #000 1px); + --view-top-spacing-markdown: var(--size-4-2); + --view-top-spacing: 0; + --view-header-height: var(--touch-size-m); + --view-header-top-offset: max(var(--safe-area-inset-top), var(--size-4-3)); + --view-header-position: static; +} +.is-phone .markdown-source-view.mod-cm6 .cm-gutters { + margin-inline-start: -18px; +} +@media (min-resolution: 2dppx), (min-resolution: 192dpi) { + .is-phone { + --border-width: 0.5px; + --divider-width: 0.5px; + --tab-outline-width: 0.5px; + } +} +@media (max-width: 380px) { + .is-phone.is-mobile { + --mobile-sidebar-min-width: 200px; + --mobile-sidebar-width: 100vw; + --mobile-sidebar-radius: 0; + } +} +.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); + --mobile-sidebar-radius: 24px; +} +.is-tablet.theme-dark { + --titlebar-background: var(--background-primary); + --titlebar-background-focused: var(--background-primary); +} +.is-tablet button:not(.clickable-icon) { + padding: var(--size-4-1) var(--size-4-5); +} +.is-phone.theme-dark { + --modal-sidebar-background: var(--background-primary); +} +.is-ios { + --slider-thumb-width: 36px; + --toggle-width: 62px; + --toggle-radius: 24px; + --toggle-thumb-radius: 24px; + --toggle-thumb-height: 24px; + --toggle-thumb-width: 36px; + --toggle-thumb-opacity-active: 0.6; + --toggle-s-width: 48px; + --toggle-s-thumb-height: 15px; + --toggle-s-thumb-width: 28px; +} +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 .tappable, +body.emulate-mobile .suggestion-bg, +body.emulate-mobile .text-icon-button, +body.emulate-mobile .tappable, +body.emulate-mobile .is-clickable, +body.emulate-mobile .clickable-icon { + touch-action: manipulation; +} +body.hide-cursor { + caret-color: transparent !important; /* kept !important because Obsidian app.css uses !important here */ +} +body.is-screenshotting .mod-raised { + visibility: hidden; +} +body.is-screenshotting *::-webkit-scrollbar { + display: none; +} +.is-phone { + --metadata-property-box-shadow: none; + --bases-embed-width: calc(100% + var(--file-margins-x) * 2); + --bases-embed-border-radius: 0; + --bases-embed-border-width: var(--border-width) 0; + --bases-embed-transform: translateX(calc(-1 * var(--file-margins-x))); +} +.is-phone .bases-header .bases-toolbar-item { + --bases-toolbar-label-display: none; +} +.is-phone .callout-content { + --bases-embed-transform: none; + --bases-embed-width: 100%; +} +.is-phone .workspace-leaf-content[data-type=bases] .bases-cards-container, +.is-phone .workspace-leaf-content[data-type=bases] .bases-table-container { + margin-bottom: var(--view-bottom-spacing); +} +.is-phone .workspace-leaf-content[data-type=bases] .bases-tr.bases-table-footer { + height: calc(var(--view-bottom-spacing) + var(--bases-table-row-height)); +} +.is-phone .bases-toolbar-views-menu .search-input-container, +.is-phone .bases-toolbar-properties-menu .search-input-container { + width: calc(100% - var(--size-4-6)); + margin-left: auto; + margin-right: auto; + border: none; + position: absolute; + left: var(--size-4-3); + bottom: var(--safe-area-inset-bottom); + z-index: 1; +} +.is-phone .bases-toolbar-views-menu .suggestion-group[data-group="actions"], +.is-phone .bases-toolbar-properties-menu .suggestion-group[data-group="actions"] { + order: -1; + flex-direction: row; + gap: var(--size-4-3); + border: none; +} +.is-phone .bases-toolbar-views-menu .suggestion-group[data-group="actions"] .suggestion-item, +.is-phone .bases-toolbar-properties-menu .suggestion-group[data-group="actions"] .suggestion-item { + border-radius: var(--touch-radius-xxs); +} +.is-phone .bases-toolbar-items .suggestion-group[data-group="views"], +.is-phone .bases-toolbar-items .suggestion-group[data-group="properties"] { + padding-bottom: calc(var(--safe-area-inset-bottom) + var(--input-height) + var(--size-4-2)); +} +.is-phone .bases-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; + height: calc(100vh - var(--safe-area-inset-top)); + bottom: 0; + left: 0; + right: 0; + margin: 0 auto; +} +.is-phone .bases-toolbar-menu .modal-header { + display: block; +} +.is-phone .bases-toolbar-menu .modal-header-button, +.is-phone .bases-toolbar-menu .modal-close-button { + top: var(--size-4-2); + inset-inline-end: var(--size-4-4); +} +.is-phone .bases-toolbar-menu .menu-scroll { + max-height: unset; +} +.is-phone .base-toolbar-sort-item .bases-sort-property, +.is-phone .base-toolbar-groupby-item .bases-sort-property, +.is-phone .base-toolbar-sort-item .filter-property-select, +.is-phone .base-toolbar-groupby-item .filter-property-select { + max-width: unset; +} +.is-phone .bases-toolbar-menu-item { + padding: var(--size-4-2) var(--size-4-3); +} +.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-xl); + 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: var(--border-width) 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 { + 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 .bases-toolbar-section { + padding: var(--size-4-1); +} +.is-mobile .bases-toolbar-filter-menu .menu-scroll { + padding-bottom: var(--safe-area-inset-bottom); +} +.is-mobile .view-content > .bases-view { + overscroll-behavior: none; +} +.is-mobile .workspace-leaf-content[data-type=bases-query] { + --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 .bases-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-3); + border-bottom: var(--border-width) solid var(--background-modifier-border); + padding-top: var(--view-top-spacing-markdown); +} +.is-mobile .document-search-container.mod-replace-mode { + height: auto; +} +.is-mobile .document-search-container + .markdown-preview-view, +.is-mobile .document-search-container + .cm-editor { + --view-top-spacing-markdown: var(--size-4-3); +} +.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); + justify-content: flex-end; +} +.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 .language-dropdown-icon { + display: flex; + align-items: center; +} +.mobile-onboarding .language-dropdown { + display: flex; + align-items: center; + width: 100%; + gap: var(--size-4-2); + margin-bottom: var(--4-3); +} +.mobile-onboarding .language-dropdown select { + background-color: transparent; + box-shadow: none; + width: 100%; +} +.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 { + 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: color-mix(in oklch, var(--color-green) 30%, transparent); +} +.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 .modal-header-button, +.is-mobile .modal-close-button, +.is-mobile .modal-setting-back-button, +.is-mobile .view-header-nav-buttons, +.is-mobile .view-header .view-action { + --icon-color: var(--text-normal); + --icon-color-hover: var(--text-normal); + --icon-color-active: var(--text-normal); + --icon-color-focus: var(--text-normal); + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); +} +.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.5em; +} +.is-mobile .view-header-title-container { + height: var(--view-header-height); +} +.is-mobile .view-header-title-container:after { + display: none; +} +.is-mobile .view-header-left { + flex: 0; + align-items: center; + display: flex; +} +.is-mobile .view-actions { + justify-content: flex-end; + padding: var(--size-4-2) 0; + gap: var(--size-2-1); +} +.is-mobile .view-action { + margin: auto 0; + width: auto; +} +.is-tablet .mod-left-split-toggle { + display: none; +} +.is-phone.is-hidden-nav .view-header { + --hidden-nav-offset: calc(var(--view-header-height) + var(--view-header-top-offset)); + transform: translateY(calc(var(--hidden-nav-offset) * -1)); + opacity: 0; +} +.is-phone.is-hidden-nav .view-header:after { + content: ''; + top: 0; + position: absolute; + height: calc(var(--hidden-nav-offset) + var(--view-header-height)); + width: 100%; +} +.is-phone .view-header { + position: var(--view-header-position); + padding-top: var(--view-header-top-offset); + gap: var(--size-4-3); + margin-top: 0; + height: auto; + width: 100%; + transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out; +} +.is-phone .view-header .view-header-left .view-action { + margin: 0; + padding: 0; + z-index: 1; +} +.is-phone .view-header .view-header-left { + height: var(--view-header-height); +} +.is-phone .view-header .view-actions { + border-radius: var(--view-header-action-radius); + margin: 0; + padding: 0; + flex-grow: 0; + z-index: 1; + margin-left: auto; + height: var(--view-header-height); +} +.is-phone .view-header .view-action { + height: 100%; + width: var(--view-header-height); + border-radius: var(--view-header-action-radius); +} +.is-phone.show-inline-title .workspace-leaf-content[data-type="markdown"] .view-header-title-container { + display: none; +} +.is-phone .view-header-title { + display: block; + text-overflow: ellipsis; + color: var(--text-normal); + font-size: var(--font-ui-medium); + font-weight: var(--font-semibold); +} +.is-phone .view-header-title:focus-within { + text-overflow: unset; + opacity: 1; +} +body.is-screenshotting .view-header { + visibility: hidden; +} +.is-mobile .modal.mod-settings .vertical-tab-content { + background-color: var(--settings-background); +} +.is-mobile .modal.mod-settings .setting-group.mod-hotkeys .setting-item { + flex-direction: row; + align-items: stretch; +} +.is-mobile .modal.mod-settings .setting-group.mod-hotkeys .setting-item .setting-item-control { + align-items: center; + width: unset; +} +.is-mobile .modal.mod-settings .setting-group.mod-hotkeys .setting-command-hotkeys { + flex: 1 0 auto; + justify-content: flex-end; +} +.is-mobile .modal.mod-settings .setting-group.mod-hotkeys .setting-hotkey { + align-self: flex-start; +} +.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 .setting-item-name { + font-weight: var(--font-medium); +} +.is-tablet .horizontal-tab-nav-item, +.is-tablet .vertical-tab-nav-item { + padding: var(--size-4-2) var(--size-4-3); + border-radius: var(--touch-radius-m); +} +.is-tablet .modal.mod-settings .vertical-tab-header { + max-width: none; +} +.is-tablet.theme-dark .vertical-tab-content { + background-color: var(--modal-background); +} +.is-phone .extra-setting-button.mod-hotkeys { + display: none; +} +.is-phone .setting-page-titlebar { + display: none; +} +.is-phone .vertical-tab-header-group-title { + padding: var(--size-4-2) 0 var(--size-4-2); + padding-inline-start: var(--size-4-4); + margin-bottom: var(--size-4-2); +} +.is-phone .modal .vertical-tab-header-group-title { + color: var(--setting-group-heading-color); + font-size: var(--setting-group-heading-size); + font-weight: var(--setting-group-heading-weight); +} +.is-phone .modal .setting-item { + gap: var(--size-4-4); +} +.is-phone .modal .setting-item-info { + min-width: 0; +} +.is-phone .modal .setting-item:not(:is(.mod-toggle, .mod-navigable, .mod-action, .setting-item-heading)) { + flex-direction: column; + align-items: flex-start; +} +.is-phone .modal .setting-item:not(:is(.mod-toggle, .mod-navigable, .mod-action, .setting-item-heading)) .setting-item-control { + width: 100%; +} +.is-phone .modal .setting-item:not(:is(.mod-toggle, .mod-navigable, .mod-action, .setting-item-heading)).is-invalid .setting-item-control { + max-width: unset; +} +.is-phone .modal .setting-group.mod-list { + --setting-items-padding-x: var(--size-4-5); + --setting-items-padding-y: var(--size-4-3); +} +.is-phone .modal .setting-group.mod-list .setting-item { + flex-direction: row; + align-items: center; +} +.is-phone .modal .setting-group.mod-list .setting-items .setting-item-control { + flex: 0 1 auto; + width: auto; +} +.is-phone .modal .setting-icon { + display: inline-flex; + vertical-align: middle; + margin-inline-end: 8px; +} +.is-phone .modal .setting-item-control select, +.is-phone .modal .setting-item-control input, +.is-phone .modal .setting-item-control .combobox-button, +.is-phone .modal .setting-item-control button:not(.clickable-icon) { + width: 100%; + margin: 0; +} +.is-phone .modal .setting-item-control .combobox-button { + max-width: unset; +} +.is-phone .modal .setting-item-control button { + padding: 10px; +} +.is-phone .modal .setting-item-control select { + max-width: 100%; +} +.is-phone .search-input-container.mod-raised { + --background-modifier-form-field: var(--background-primary); + border-radius: var(--touch-radius-m); + padding-bottom: 0; +} +.theme-dark.is-phone .search-input-container.mod-raised { + --background-modifier-form-field: transparent; +} +.is-phone .modal.mod-settings .setting-search-container { + padding: 0; + padding-right: max(var(--size-4-4), var(--safe-area-inset-right)); + padding-left: max(var(--size-4-4), var(--safe-area-inset-left)); +} +.is-phone .modal.mod-settings .setting-search-results { + flex: 0 0 auto; + padding-right: max(var(--size-4-4), var(--safe-area-inset-right)); + padding-left: max(var(--size-4-4), var(--safe-area-inset-left)); + gap: var(--size-4-2); +} +.is-phone .modal.mod-settings .vertical-tabs-container { + display: block; + overflow-y: auto; +} +.is-phone .modal.mod-settings .vertical-tab-header-group { + padding-right: max(var(--size-4-4), var(--safe-area-inset-right)); + padding-left: max(var(--size-4-4), var(--safe-area-inset-left)); +} +.is-phone .modal.mod-settings .vertical-tab-header-group-items, +.is-phone .modal.mod-settings .setting-search-result-group { + --icon-size: var(--icon-m); + --icon-stroke: var(--icon-m-stroke-width); + background-color: var(--setting-items-background); + border-radius: var(--setting-items-radius); + border: var(--setting-items-border-width) solid var(--setting-items-border-color); + corner-shape: var(--corner-shape); + overflow: hidden; +} +.is-phone .modal.mod-settings .vertical-tab-header { + overflow: auto; + 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 { + will-change: transform; + padding-right: max(var(--size-4-4), var(--safe-area-inset-right)); + padding-left: max(var(--size-4-4), var(--safe-area-inset-left)); + padding-bottom: max(100px, var(--safe-area-inset-bottom)); +} +.is-phone .modal.mod-settings .vertical-tab-content .vertical-tab-content-inner { + border-radius: var(--setting-items-radius); + background-color: var(--setting-items-background); + padding-left: var(--size-4-4); + padding-right: var(--size-4-4); +} +.is-phone .modal.mod-settings .setting-page > .setting-page-content { + padding-inline: 0; +} +.is-phone .modal.mod-settings .vertical-tab-header::after { + content: ""; + display: block; + flex: 0 0 auto; + height: max(var(--keyboard-height), 100px); +} +.is-phone .modal.mod-settings .vertical-tab-header-group-container { + flex: 0 0 auto; + overflow: initial; + padding: 0; +} +.is-phone .modal.mod-settings .vertical-tab-nav-item-icon { + color: var(--text-normal); + margin-inline-end: var(--size-4-3); +} +.is-phone .modal.mod-settings .vertical-tab-nav-item-chevron, +.is-phone .modal.mod-settings .vertical-tab-nav-item-title, +.is-phone .modal.mod-settings .setting-search-result-tab-text { + align-self: stretch; + border-bottom: var(--border-width) solid var(--background-modifier-border); +} +.is-phone .modal.mod-settings .vertical-tab-nav-item-chevron, +.is-phone .modal.mod-settings .setting-search-result-tab-text { + display: flex; + align-items: center; +} +.is-phone .modal.mod-settings .vertical-tab-nav-item-title { + line-height: var(--touch-size-l); +} +.is-phone .modal.mod-settings .setting-search-result-tab-text { + flex-direction: column; + align-items: flex-start; + justify-content: center; +} +.is-phone .modal.mod-settings .setting-search-result-tab, +.is-phone .modal.mod-settings .setting-search-result-item { + height: auto; + min-height: var(--touch-size-l); +} +.is-phone .modal.mod-settings .vertical-tab-nav-item { + display: flex; + align-items: center; + height: var(--touch-size-l); + padding: 0 var(--size-4-5); + border-radius: 0; + position: relative; + 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 .vertical-tab-nav-item-chevron, +.is-phone .modal.mod-settings .vertical-tab-nav-item:last-child .vertical-tab-nav-item-title, +.is-phone .modal.mod-settings .vertical-tab-nav-item:last-child .setting-search-result-tab-text { + border-bottom: none; +} +.is-phone .modal.mod-settings .vertical-tab-nav-item-chevron { + display: flex; + margin-inline-start: auto; + color: var(--text-faint); + --icon-stroke: 2.25px; +} +.is-phone .vertical-tab-header-title { + font-weight: var(--font-semibold); +} +.is-mobile .mod-community-modal { + --modal-background: var(--settings-background); +} +.is-mobile .community-item { + border-width: 0; + border-radius: var(--touch-radius-xxs); + padding: var(--size-4-4); + background-color: var(--setting-items-background); + corner-shape: var(--corner-shape); +} +.is-mobile .community-item.mobile-tap { + background-color: var(--background-modifier-hover); +} +.is-mobile .community-item.is-selected { + background-color: var(--background-modifier-hover); +} +.is-mobile .community-modal-meta, +.is-mobile .community-modal-readme { + padding: var(--size-4-5); + border-radius: var(--touch-radius-xs); + background-color: var(--setting-items-background); + corner-shape: var(--corner-shape); +} +.is-mobile .community-modal-button-container { + width: 100%; +} +.is-phone .community-modal-sidebar { + background-color: var(--background-primary); +} +.is-phone .community-modal-controls { + padding-top: var(--size-4-18); + background-color: transparent; +} +.is-phone .community-modal-controls .setting-item { + flex: 0 0 auto; + padding: 0.25em 0; +} +.is-phone .community-modal-controls .community-modal-search { + flex: 0 0 auto; +} +.is-phone .community-modal-controls .search-input-container { + width: 100%; +} +.is-phone .community-modal-search-results { + gap: var(--size-4-2); + padding: var(--size-4-4); +} +.is-phone .community-modal-info { + padding: var(--size-4-18) var(--size-4-4) var(--size-4-4); +} +.is-phone .community-item-info { + padding: var(--size-4-5); +} +.is-phone .community-modal-details { + padding: var(--size-4-4); + border: none; + background-color: var(--modal-background); +} +.is-phone .community-modal-search-summary { + padding: var(--size-4-1) var(--size-4-4) var(--size-4-4); +} +.is-phone .mod-community-modal { + box-shadow: var(--shadow-l); +} +.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; + justify-content: flex-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; + padding: var(--size-4-1) 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: var(--mobile-sidebar-radius); + background-color: var(--mobile-sidebar-background); + contain: layout style paint; +} +.workspace-drawer .nav-folder.mod-root > .nav-folder-title { + display: none; +} +.workspace-drawer .nav-header { + padding: var(--size-4-1) var(--size-4-4) 0; +} +.workspace-drawer .workspace-leaf { + background-color: transparent; +} +.workspace-drawer .search-input-container { + --background-modifier-form-field: transparent; + --background-modifier-form-field-hover: transparent; + --search-input-radius: 0; + --input-border-width-focus: 0; + margin: var(--size-4-1) var(--size-4-1) 0; +} +.workspace-drawer .search-input-container input { + border-width: 0 0 var(--border-width) 0; +} +.is-tablet .workspace-drawer { + margin: var(--size-4-8) var(--size-4-4) 0; + height: calc(100vh - var(--size-4-12)); +} +.workspace-drawer.is-pinned { + height: 100%; + position: relative; + padding-bottom: 0; + width: var(--mobile-sidebar-width-pinned); + min-width: 0; + max-width: none; + flex-shrink: 0; + z-index: var(--layer-cover); + margin: 0; + box-shadow: none; +} +.workspace-drawer.is-pinned .workspace-drawer-header-icon.mod-pin { + color: var(--color-accent); +} +.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: none; +} +.workspace-drawer.mod-left.is-pinned .workspace-drawer-header-info div { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +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 .workspace-drawer-header-name-text { + font-size: var(--font-ui-small); +} +.workspace-drawer.mod-right.is-pinned { + --mobile-sidebar-radius: 0; + border-left: none; +} +.workspace-drawer.mod-right.is-pinned .workspace-drawer-header-name-text { + display: none; +} +.workspace-drawer.is-collapsed { + overflow: hidden; +} +.workspace-drawer .nav-buttons-container { + background-color: var(--mobile-sidebar-background); + gap: var(--size-4-2); + padding: var(--size-4-1) 0 var(--size-4-2) 0; + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); + --icon-color: var(--text-muted); + --icon-color-hover: var(--text-muted); + --icon-color-active: var(--text-normal); + --icon-color-focus: var(--text-muted); + --icon-opacity-hover: 1; +} +.workspace-drawer .nav-buttons-container .nav-action-button { + background-color: transparent; + padding: var(--size-4-2); + height: var(--touch-size-m); + width: var(--touch-size-m); + z-index: 1; +} +.workspace-drawer .workspace-drawer-actions, +.workspace-drawer .nav-buttons-container { + 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.is-pinned > .workspace-leaf-resize-handle { + top: 0; + bottom: 0; + width: var(--divider-width-hover); +} +.workspace-drawer.is-pinned > .workspace-leaf-resize-handle.is-active { + cursor: col-resize; +} +.workspace-drawer.mod-left.is-pinned > .workspace-leaf-resize-handle { + right: 0; + border-right-style: solid; + border-right-width: var(--divider-width); +} +.workspace-drawer.mod-right.is-pinned > .workspace-leaf-resize-handle { + left: 0; + border-left-style: solid; + border-left-width: var(--divider-width); +} +.workspace-drawer-inner { + flex: 1 1 auto; + overflow: hidden; + display: flex; + flex-direction: column; + background-color: var(--mobile-sidebar-background); + padding-top: max(var(--size-4-2), var(--safe-area-inset-top)); + padding-bottom: calc(max(var(--safe-area-inset-bottom), var(--size-4-4)) - var(--keyboard-height)); + position: relative; + transition: width ease-out 150ms; + contain: layout style paint; +} +.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; + contain: layout paint; +} +.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(--safe-area-inset-top) 0 var(--safe-area-inset-bottom); + border-inline-end: var(--border-width) solid var(--background-modifier-border); +} +.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 { + align-items: center; + display: flex; + order: var(--vault-profile-order); + padding-inline-end: var(--size-4-4); + padding-inline-start: var(--size-4-8); + padding-top: var(--size-4-3); + gap: var(--size-4-2); +} +.workspace-drawer-header-left { + display: flex; + flex-direction: column; + flex: 1 1 auto; + overflow: hidden; + position: relative; +} +.workspace-drawer-header-name { + display: flex; +} +.workspace-drawer-header-switcher { + display: flex; + flex: 0 1 auto; + overflow: hidden; +} +.workspace-drawer-header-switcher select { + opacity: 0; + position: absolute; + padding: 0; + width: 100%; +} +.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 0 0; + font-size: var(--font-ui-smaller); +} +.workspace-drawer-header-icon { + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); + width: var(--touch-size-m); + height: var(--touch-size-m); + padding-top: var(--size-2-2); + color: var(--text-normal); + flex-shrink: 0; +} +.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-options { + --no-tooltip: true; + --icon-color: var(--text-muted); + display: flex; + position: relative; + flex-direction: column; + margin: 0 var(--size-4-3); + color: var(--text-muted); +} +.workspace-drawer-tab-options .workspace-tab-header { + user-select: none; + padding: 0; +} +.workspace-drawer-tab-options .workspace-tab-header .workspace-tab-header-inner-close-button { + display: none; +} +.workspace-drawer-tab-options .workspace-tab-header::before, +.workspace-drawer-tab-options .workspace-tab-header::after { + display: none; +} +.workspace-drawer-tab-options .workspace-tab-header.is-swiping .workspace-tab-header-inner, +.workspace-drawer-tab-options .workspace-tab-header.mobile-tap .workspace-tab-header-inner { + --icon-color: var(--text-normal); + background-color: var(--nav-item-background-hover); + color: var(--text-normal); +} +.workspace-drawer-tab-options .workspace-tab-header.is-active { + --icon-color: var(--text-normal); + color: var(--text-normal); +} +.workspace-drawer-tab-options .workspace-tab-header-inner { + font-weight: var(--font-semibold); + align-items: center; + flex-shrink: 0; + gap: var(--size-4-2); + padding: var(--size-4-2) var(--size-4-3); + border-radius: var(--touch-radius-xs); +} +.workspace-drawer-tab-options .workspace-tab-header-inner-icon { + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); + display: flex; +} +.workspace-drawer-tab-options .workspace-tab-header-inner-chevron { + color: var(--text-faint); + --icon-size: var(--icon-s); + --icon-stroke: var(--icon-s-stroke-width); + display: flex; + align-items: center; +} +.workspace-drawer-tab-options .workspace-tab-header-inner-title { + font-size: var(--font-ui-medium); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + flex-grow: 1; +} +.workspace-drawer-tab-options.is-collapsed .workspace-drawer-tab-select { + --icon-color: var(--text-normal); + color: var(--text-normal); +} +.workspace-drawer-tab-options:not(.has-swipe) .workspace-tab-header.is-active .workspace-tab-header-inner { + background-color: var(--nav-item-background-hover); +} +.workspace-drawer-tab-options:not(.has-swipe) .workspace-tab-header.is-active .workspace-tab-header-inner.has-active-menu { + background-color: var(--nav-item-background-selected); +} +.workspace-drawer-tab-options:not(.has-swipe) .workspace-tab-header.has-active-menu .workspace-tab-header-inner { + background-color: var(--nav-item-background-selected); +} +.workspace-drawer-tab-options-list { + position: absolute; + top: 0; + inset-inline-start: 0; + width: 100%; + display: flex; + flex-direction: column; + padding: var(--size-4-2); + padding-top: var(--touch-size-l); + overflow-y: auto; + max-height: 400px; + opacity: 1; + z-index: 1; + border-radius: var(--touch-radius-xs); + scrollbar-gutter: stable; + background-color: var(--interactive-normal); + transition: max-height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1), opacity 0.15s ease; +} +.is-phone .workspace-drawer-tab-options-list { + box-shadow: 0 -12px 12px 0 var(--mobile-sidebar-background); +} +.workspace-drawer-tab-options-list .workspace-drawer-tab-select { + pointer-events: none; + order: 0; +} +.workspace-drawer-tab-options-list .workspace-drawer-tab-select .workspace-tab-header-inner { + padding: var(--size-4-1) var(--size-4-3) var(--size-4-3); +} +.workspace-drawer-tab-options.is-collapsed .workspace-drawer-tab-options-list { + transition: max-height 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.1), opacity 0.15s ease; + pointer-events: none; + opacity: 0; + max-height: 0; +} +.workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-tab-header { + animation: slideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards; +} +.workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-tab-header:nth-child(1) { + animation-delay: 0s; +} +.workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-tab-header:nth-child(2) { + animation-delay: 0.01s; +} +.workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-tab-header:nth-child(3) { + animation-delay: 0.02s; +} +.workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-tab-header:nth-child(4) { + animation-delay: 0.03s; +} +.workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-tab-header:nth-child(5) { + animation-delay: 0.04s; +} +.workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-tab-header:nth-child(6) { + animation-delay: 0.05s; +} +.workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-tab-header:nth-child(7) { + animation-delay: 0.06s; +} +.workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-tab-header:nth-child(8) { + animation-delay: 0.07s; +} +.workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-tab-header:nth-child(9) { + animation-delay: 0.08s; +} +.workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-tab-header:nth-child(10) { + animation-delay: 0.09s; +} +.workspace-drawer-tab-options:not(.is-collapsed) .workspace-drawer-tab-options-list .workspace-drawer-tab-select { + animation: none; +} +.is-phone .workspace-drawer-tab-options { + order: 2; +} +.is-phone .workspace-drawer-tab-select { + order: 2; +} +.is-phone .workspace-drawer-tab-options-list .workspace-drawer-tab-select { + order: 2; +} +.is-phone .workspace-drawer-tab-options-list { + padding-top: var(--size-4-2); + padding-bottom: var(--touch-size-l); + bottom: 0; + top: unset; +} +@keyframes slideIn { + 0% { + opacity: 0; + transform: translateY(-8px) scale(0.97); + transform-origin: bottom; + } + 70% { + opacity: 1; + transform: scaleY(1.02); + transform-origin: bottom; + } + 100% { + opacity: 1; + transform: scaleY(1); + transform-origin: bottom; + } +} +.workspace-drawer-tab-select { + touch-action: none; + z-index: var(--layer-cover); + height: var(--touch-size-l); + color: var(--text-faint); + --icon-color: var(--text-faint); +} +.workspace-drawer-tab-select .workspace-tab-header-inner { + background-color: var(--interactive-normal); + border-radius: var(--touch-radius-xs); + padding: var(--size-4-3) var(--size-4-5); +} +.workspace-drawer-tab-select .workspace-tab-header-inner .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; + display: flex; + align-items: center; +} +.workspace-drawer-tab-container { + 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; + padding: 0; +} +.workspace-drawer-active-tab-content > * { + flex: 1 0 0; + width: 100%; + height: 100%; +} +.workspace-drawer-active-tab-content .view-header { + display: none !important; /* kept !important because Obsidian app.css uses !important here */ +} +.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 .workspace-drawer .nav-buttons-container { + position: absolute; + bottom: 0; + top: auto; + left: 0; + right: 0; + z-index: 1; +} +.is-phone .mod-root .workspace-split:not(.mod-visible), +.is-phone .mod-root .workspace-tabs:not(.mod-visible) { + display: none; +} +.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 .cm-scroller { + scroll-padding-bottom: var(--autoscroll-padding); +} +.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); + corner-shape: var(--button-corner-shape); + text-align: center; +} +.is-mobile .markdown-rendered .heading-collapse-indicator { + margin-inline-start: -20px; +} +.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-phone .workspace > .mod-root { + padding-top: 0; +} +.is-phone .mod-root .workspace-leaf-content[data-type="markdown"] { + --view-top-spacing: 0; +} +.is-phone .mod-root .workspace-leaf-content .view-content { + margin-top: var(--view-top-spacing); +} +.is-phone .mod-root .workspace-leaf-content .view-content .markdown-reading-view > .markdown-preview-view, +.is-phone .mod-root .workspace-leaf-content .view-content .markdown-source-view > .cm-editor > .cm-scroller { + padding-top: var(--view-top-spacing-markdown); +} +body.is-tablet .sidebar-toggle-button { + --icon-color: var(--text-normal); + --icon-color-hover: var(--text-normal); + --icon-color-active: var(--text-normal); + --icon-color-focus: var(--text-normal); + --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 .metadata-content { + transform: translateX(-12px); + width: calc(100% + var(--size-4-6)); + background-color: var(--background-primary-alt); + border-radius: var(--touch-radius-xxs); + padding: var(--size-4-2) var(--size-4-3); + corner-shape: var(--corner-shape); +} +.is-mobile.mod-rtl .metadata-content { + transform: translateX(12px); +} +.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%; + background-color: color-mix(in srgb, var(--menu-background) var(--blur-opacity-m), transparent); +} +.is-mobile .menu-scroll { + overflow-y: auto; + padding: var(--menu-padding); +} +.is-mobile .menu-item { + font-size: var(--font-ui-medium); +} +.is-phone { + --menu-padding: var(--size-4-2) var(--size-4-4) var(--safe-area-inset-bottom); +} +.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 { + min-width: unset; + position: absolute; + border-radius: var(--touch-radius-s) var(--touch-radius-s) 0 0; + bottom: 0; + left: var(--safe-area-inset-left); + right: var(--safe-area-inset-right); + margin: 0 auto; + top: unset !important; /* kept !important because Obsidian app.css uses !important here */ +} +.is-phone .menu-scroll { + max-height: 60vh; + --scrollbar-native-width: none; +} +.is-phone .menu-scroll.is-scrolled { + mask-image: var(--menu-scroll-mask); +} +.is-phone .menu-scroll::-webkit-scrollbar { + display: none !important; /* kept !important because Obsidian app.css uses !important here */ +} +.is-phone .menu-group .menu-item.is-label + .menu-item:not(.is-label) { + border-top-left-radius: var(--touch-radius-xxs); + border-top-right-radius: var(--touch-radius-xxs); +} +.is-phone .menu-group .menu-item { + position: relative; +} +.is-phone .menu-group .menu-item:not(.is-label):after { + content: ''; + display: block; + position: absolute; + bottom: 0; + left: var(--size-4-4); + width: calc(100% - var(--size-4-8)); + height: var(--menu-divider-width); + background-color: var(--menu-divider-color); +} +.is-phone .menu-group .menu-item:first-child { + border-top-left-radius: var(--touch-radius-xxs); + border-top-right-radius: var(--touch-radius-xxs); +} +.is-phone .menu-group .menu-item:last-child { + border-bottom-left-radius: var(--touch-radius-xxs); + border-bottom-right-radius: var(--touch-radius-xxs); +} +.is-phone .menu-group .menu-item:last-child:after { + display: none; +} +.is-phone .menu-group .menu-item:only-child { + border-radius: var(--touch-radius-xl); +} +.is-phone .menu .suggestion-group .suggestion-item:first-child { + border-top-left-radius: var(--touch-radius-xxs); + border-top-right-radius: var(--touch-radius-xxs); +} +.is-phone .menu .suggestion-group .suggestion-item:last-child { + border-bottom-left-radius: var(--touch-radius-xxs); + border-bottom-right-radius: var(--touch-radius-xxs); +} +.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-4); + 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-2) 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-phone .menu-item-title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.is-mobile .modal-sidebar-inner { + --modal-sidebar-inset: max(var(--size-4-5), var(--safe-area-inset-left), var(--safe-area-inset-right)); +} +.is-mobile .modal-sidebar-list { + padding-bottom: max(var(--size-4-2), var(--safe-area-inset-bottom)); +} +.is-mobile .modal-sidebar-list-item-details { + padding: var(--size-4-1) var(--size-4-4); +} +.is-mobile .modal-header-button, +.is-mobile .modal-close-button { + top: var(--size-4-3); + inset-inline-end: var(--size-4-4); +} +.is-mobile .modal-header-button.mod-start, +.is-mobile .modal-close-button.mod-start { + inset-inline-end: unset; + inset-inline-start: var(--size-4-4); +} +.is-mobile .modal-button-container { + display: flex; + flex-direction: column-reverse; +} +.is-mobile .modal-button-container .mod-cancel { + order: -1; +} +.is-mobile .mod-confirmation .modal-header-button, +.is-mobile .mod-confirmation .modal-close-button { + display: none; +} +.is-mobile .mod-confirmation .modal-title { + max-width: 100%; +} +.is-mobile button.mod-warning { + background-color: var(--interactive-normal); + font-weight: calc(var(--font-weight) + var(--bold-modifier)); + color: var(--text-error); +} +.is-mobile .message-container { + text-align: center; + margin: 0 auto; +} +.is-phone .modal-sidebar-inner { + border: none; + background-color: var(--background-primary); +} +.is-phone .modal-container { + --dialog-max-height: calc(100vh - var(--safe-area-inset-top)); + --dialog-max-width: calc(100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right) - var(--size-4-6)); + --dialog-width: 100vw; + --modal-width: 100vw; + --modal-radius: var(--touch-radius-xs); + --modal-max-height: calc(100vh - var(--safe-area-inset-top)); + --prompt-max-width: 100vw; +} +.is-phone .modal, +.is-phone .prompt { + min-width: unset; + left: 0; + right: 0; +} +.is-phone .modal { + padding: 0 var(--safe-area-inset-right) 0 var(--safe-area-inset-left); +} +.is-phone .modal .modal-setting-back-button { + position: absolute; + bottom: var(--size-4-1); + inset-inline-start: var(--size-4-4); + padding: var(--size-2-2); + height: var(--touch-size-m); + width: var(--touch-size-m); +} +.is-phone .modal .modal:not(.mod-lg) { + --interactive-normal: var(--background-modifier-hover); + background-color: var(--background-secondary); +} +.is-phone .modal-header-button, +.is-phone .modal-close-button { + z-index: var(--layer-modal); + height: var(--touch-size-m); + width: var(--touch-size-m); +} +.is-phone .modal-container.mod-confirmation { + align-items: flex-end; +} +.is-phone .modal-container.mod-confirmation .modal, +.is-phone .modal.mod-lg, +.is-phone .modal.mod-sidebar-layout { + --modal-radius: var(--touch-radius-s) var(--touch-radius-s) 0 0; + --dialog-max-height: calc(100vh - var(--safe-area-inset-top)); + --dialog-max-width: 100vw; + --dialog-width: 100vw; + margin-top: auto; +} +.is-phone .modal.mod-lg, +.is-phone .modal.mod-sidebar-layout { + height: 100%; +} +.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-sidebar-inner .search-input-container, +.is-phone .modal.mod-sidebar-layout .modal-sidebar-inner .search-input-container { + flex-grow: 0; +} +.is-phone .modal-content { + display: flex; + position: relative; + flex-direction: column; + margin-top: 0; + overflow: auto; + padding: var(--size-4-4); +} +.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-6) var(--size-4-5) var(--size-4-4); + position: relative; + width: 100%; + display: flex; + align-items: flex-end; +} +.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-settings.mod-sidebar-layout, +.is-phone .modal.mod-community-modal .community-modal-details { + --modal-header-height: calc(var(--safe-area-inset-top) + var(--size-4-12)); + --modal-radius: 0; + top: 0; + max-height: 100%; +} +.is-phone .modal.mod-settings.mod-sidebar-layout .modal-header-button, +.is-phone .modal.mod-community-modal .community-modal-details .modal-header-button, +.is-phone .modal.mod-settings.mod-sidebar-layout .modal-close-button, +.is-phone .modal.mod-community-modal .community-modal-details .modal-close-button { + top: var(--safe-area-inset-top); + inset-inline-end: var(--size-4-3); +} +.is-phone .modal.mod-settings .modal-header, +.is-phone .modal.mod-community-modal .modal-header { + margin-bottom: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 2; + width: 100%; +} +.is-phone .modal.mod-settings .modal-header:after, +.is-phone .modal.mod-community-modal .modal-header:after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 130%; + width: 100%; + margin: 0 auto; + content: ""; + background-color: var(--settings-background); + mask: linear-gradient(to bottom, black 20%, transparent); + inset: 0; + z-index: -2; + pointer-events: none; +} +.is-phone .modal.mod-settings .modal-content, +.is-phone .modal.mod-community-modal .modal-content { + padding-top: calc(var(--modal-header-height) + var(--size-4-4)); +} +.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 .modal.mod-sidebar-layout .modal-content .vertical-tab-content { + padding-top: calc(var(--modal-header-height) + var(--size-4-4)); +} +.is-phone .modal.mod-sidebar-layout .modal-content .vertical-tab-header { + padding-top: calc(var(--modal-header-height) + var(--size-4-4)); +} +.is-phone .error-container { + height: 100%; + justify-content: center; +} +.mobile-navbar { + background-color: var(--background-primary); + position: var(--navbar-position); + bottom: 0; + width: var(--navbar-width); + max-width: var(--navbar-max-width); + height: var(--navbar-height); + display: flex; + margin: 0 auto; + left: 0; + right: 0; + padding: 0 var(--size-4-2) var(--navbar-bottom-offset); + border-radius: var(--navbar-radius); + transition: opacity 0.2s ease-in-out, margin-bottom 0.25s ease-in-out, transform 0.3s ease-out; +} +body.is-tablet .mobile-navbar { + display: none; +} +.is-floating-nav .mobile-navbar { + margin-bottom: calc(var(--navbar-bottom-offset) - var(--keyboard-height) - 2px); + padding-bottom: 0; +} +.is-hidden-nav .mobile-navbar { + --hidden-nav-navbar-transform: translateY(calc(var(--navbar-height) + var(--navbar-bottom-offset))); + transform: var(--hidden-nav-navbar-transform); + opacity: 0; +} +.mobile-navbar-text { + font-size: var(--font-ui-small); + padding: 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(--text-normal); + --icon-color-hover: var(--text-normal); + --icon-color-active: var(--text-normal); + --icon-color-focus: var(--text-normal); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0; + width: 100%; +} +.mobile-navbar-action { + flex-grow: 1; + width: var(--navbar-height); + transition: opacity 0.1s ease-in-out; + height: 100%; +} +.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; + height: 100%; + border-radius: var(--touch-size-l); +} +.mobile-navbar-action-tabs { + position: relative; +} +.mobile-navbar-action-tabs .mobile-navbar-tabs-number { + position: absolute; + align-items: center; + display: flex; + opacity: var(--icon-opacity); + 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; +} +@media (hover: hover) { + .mobile-navbar-action-tabs:hover .mobile-navbar-tabs-number { + opacity: var(--icon-opacity-hover); + } +} +.mobile-navbar-action.has-longpress-menu { + position: relative; + margin-inline-start: var(--size-4-2); +} +.mobile-navbar-action.has-longpress-menu .navbar-action-flair { + --icon-size: 12px; + --icon-stroke: 3px; + opacity: var(--icon-opacity); + color: var(--text-faint); + 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; + bottom: auto; + top: max(var(--size-4-1),var(--safe-area-inset-top)); + 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(--touch-radius-xxs); + 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 1.5em; + flex-direction: row; + align-items: center; + justify-content: space-between; +} +.is-mobile .prompt { + --prompt-top: calc(var(--safe-area-inset-top) + var(--header-height) + var(--size-4-4)); + top: var(--prompt-top); + max-height: min(var(--prompt-max-height), calc(100vh - var(--prompt-top) - var(--safe-area-inset-bottom))); + border-radius: var(--touch-radius-xxs); + background-color: color-mix(in srgb, var(--prompt-background) var(--blur-opacity-m), transparent); +} +.is-mobile .prompt-input-cta { + --icon-color: var(--text-muted); + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); + position: absolute; + top: 0; + bottom: 0px; + inset-inline-end: var(--size-4-10); + 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-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(--touch-radius-xs) var(--touch-radius-xs) 0 0; + min-width: unset; + padding-bottom: var(--safe-area-inset-bottom); + max-height: 100vh; + height: calc(100vh - var(--prompt-top)); + box-shadow: var(--shadow-s); +} +.is-phone .prompt .suggestion-hotkey { + display: none; +} +.is-phone .prompt-input-container { + order: 3; + padding: 0; + width: calc(100% - var(--size-4-4)); + margin: auto auto var(--size-4-2); + border-radius: var(--touch-size-m); +} +.is-phone .prompt-input[type=text] { + border: var(--border-width) solid var(--background-modifier-border); + padding-inline-end: var(--size-4-12); + border-radius: var(--touch-size-m); +} +.is-phone .prompt-instructions { + display: none; +} +.pull-action { + position: absolute; + background-color: var(--background-primary); + z-index: var(--layer-popover); + color: var(--text-muted); + font-size: var(--font-ui-small); + transition: background-color ease-in-out 150ms; +} +.pull-action.mod-activated { + color: var(--text-accent); +} +.pull-down-action { + top: 0; + left: 0; + right: 0; + width: 100%; + margin: 0 auto 0 auto; + background: linear-gradient(to bottom, color-mix(in srgb, var(--background-primary) 90%, transparent) 40%, transparent 100%); + padding: calc(var(--safe-area-inset-top) + var(--size-4-3)) var(--size-4-6) var(--size-4-16); + text-align: center; +} +.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%; + top: calc(100vh - var(--keyboard-height) - var(--mobile-toolbar-height)); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); + z-index: var(--layer-menu); + background-color: var(--background-primary); +} +.is-floating-nav .mobile-toolbar { + background-color: transparent; + box-shadow: 0 0 8px var(--background-primary); +} +.mobile-toolbar-spacer { + background-color: var(--background-primary); + height: var(--mobile-toolbar-height); + display: flex; + width: 100%; +} +.mobile-toolbar-options-container { + --icon-size: var(--icon-l); + --icon-stroke: var(--icon-l-stroke-width); + --scroll-fade-offset-right: var(--toolbar-option-width); + position: relative; + gap: var(--size-4-2); + margin: var(--size-4-1) auto; + width: 100%; + display: flex; + justify-content: center; +} +.is-floating-nav .mobile-toolbar-options-container { + margin: 0 auto; + width: calc(100% - var(--size-4-4)); +} +.mobile-toolbar-options-list-container { + border-radius: var(--touch-size-m); + overflow: hidden; +} +.mobile-toolbar-options-list { + display: flex; + width: 100%; + overflow-x: auto; + overflow-y: hidden; + background-color: var(--touch-background); + border-radius: var(--touch-size-m); + padding: 0 var(--size-4-1); + height: var(--touch-size-m); + scrollbar-width: none !important; /* kept !important because Obsidian app.css uses !important here */ +} +.mobile-toolbar-options-list::-webkit-scrollbar { + width: 0 !important; /* kept !important because Obsidian app.css uses !important here */ + height: 0 !important; /* kept !important because Obsidian app.css uses !important here */ +} +.mobile-toolbar-floating-options { + display: flex; + height: var(--touch-size-m); + width: var(--touch-size-m); + min-width: var(--touch-size-m); + justify-content: center; + border-radius: var(--touch-size-m); + background-color: var(--touch-background); +} +.mobile-toolbar-floating-options .mobile-toolbar-option { + min-width: var(--toolbar-option-width); + color: var(--text-normal); +} +.mobile-toolbar-option { + display: flex; + font-size: var(--font-ui-medium); + color: var(--text-normal); + 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); + padding-bottom: calc(var(--size-4-12) + var(--safe-area-inset-bottom)); + background-color: var(--tab-switcher-background); + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + overflow-y: auto; + mask: var(--view-bottom-fade-mask); +} +.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(--text-normal); + --icon-color-hover: var(--text-normal); + --icon-color-active: var(--text-normal); + --icon-color-focus: var(--text-normal); + position: fixed; + width: 100%; + bottom: 0; + background: var(--tab-switcher-menubar-background); + display: flex; + 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 { + --drag-item-background: transparent; + --drag-item-shadow: none; + gap: var(--size-4-2); + flex-direction: column; + display: flex; + scroll-margin: var(--size-4-3); + width: calc(50% - var(--size-4-2)); +} +.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; + --scrollbar-native-width: none; +} +.mobile-tab-preview-embed ::-webkit-scrollbar { + display: none; +} +.is-mobile .suggestion-container { + border-radius: calc(var(--touch-radius-xs) - var(--size-2-3)); + background-color: color-mix(in srgb, var(--suggestion-background) var(--blur-opacity-m), transparent); +} +.is-mobile .suggestion-item { + padding: var(--size-4-2) var(--size-4-3); + border-radius: var(--touch-radius-xxs); +} +.is-mobile .suggestion-flair { + position: relative; + margin-inline-end: 6px; + inset-inline-start: 0; + top: 0; +} +.is-phone .suggestion-bg { + display: block; + z-index: var(--layer-modal); +} +.is-phone .suggestion-item.mod-group { + border-radius: 0; +} +.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 .mod-raised { + background: var(--raised-background); +} +.is-phone.is-floating-nav, +.is-phone.auto-full-screen { + --navbar-position: fixed; + --view-header-position: fixed; + --view-top-spacing: calc(var(--safe-area-inset-top) + var(--view-header-height) + 8px); + --view-top-spacing-markdown: calc(var(--safe-area-inset-top) + var(--view-header-height) + 16px); + --view-bottom-spacing: calc(var(--safe-area-inset-bottom) - var(--keyboard-height) + var(--navbar-height)); +} +.is-mobile.is-floating-nav { + --navbar-max-width: 316px; + --navbar-width: fit-content; + --navbar-height: var(--touch-size-l); + --navbar-radius: var(--touch-size-l); + --navbar-position: fixed; +} +.is-mobile.is-floating-nav .mod-raised { + backdrop-filter: var(--raised-blur); + box-shadow: var(--raised-shadow); + background-clip: padding-box; + border: var(--raised-mask-border-width) solid transparent; +} +.is-mobile.is-floating-nav.is-ios { + --raised-mask-border-width: 0.5px; +} +.is-mobile.is-floating-nav.is-ios.theme-light { + --shadow-edges: inset 1px 1px 2px rgba(255, 255, 255, 0.5), inset -1px -1px 2px rgba(255, 255, 255, 0.5), inset 0 4px 16px rgba(255, 255, 255, 0.025); +} +.is-mobile.is-floating-nav.is-ios.theme-dark { + --shadow-edges: inset 0px 0 0 0.5px rgba(255, 255, 255, 0.065); +} +.is-mobile.is-floating-nav.is-ios .mod-raised:after { + display: var(--raised-mask-display); + position: absolute; + content: ""; + backdrop-filter: brightness(var(--blur-brightness)); + background: var(--raised-mask-background); + mask: var(--raised-mask); + mask-composite: var(--raised-mask-composite); + inset: 0; + border: var(--raised-mask-border-width) solid transparent; + border-radius: inherit; + pointer-events: none; + z-index: 1; +} +.is-mobile.is-floating-nav .workspace-drawer .workspace-leaf-content:after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + margin: 0 auto; + width: calc(100% - var(--size-4-6)); + height: 48px; + background: linear-gradient(to top, var(--mobile-sidebar-background), transparent); + pointer-events: none; +} +.is-mobile.is-floating-nav .workspace-drawer .nav-buttons-container { + background-color: transparent; +} +.is-mobile.is-floating-nav .workspace-drawer .nav-buttons-container:after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: 0 auto; + width: calc(100% - var(--size-4-6)); + height: 72px; + background: linear-gradient(to bottom, var(--mobile-sidebar-background) 30%, transparent); + pointer-events: none; +} +.is-mobile.is-floating-nav.is-phone .view-header { + margin-top: var(--view-header-top-offset); + padding-top: 0; + background-color: transparent; + left: 0; + right: 0; +} +.is-mobile.is-floating-nav.is-phone .workspace-drawer .workspace-leaf-content .nav-header ~ div:last-child { + padding-bottom: 96px; + padding-top: var(--size-4-2); +} +.is-mobile.is-floating-nav.is-phone .workspace-drawer .nav-buttons-container:after { + top: auto; + height: 120px; + background: linear-gradient(to top, var(--mobile-sidebar-background) 30%, transparent); +} +.is-phone.auto-full-screen .mod-root, +.is-phone.is-floating-nav .mod-root { + mask-image: var(--view-bottom-fade-mask); +} +.is-phone.auto-full-screen .mod-root .workspace-leaf-content[data-type="markdown"] .view-content, +.is-phone.is-floating-nav .mod-root .workspace-leaf-content[data-type="markdown"] .view-content { + mask-image: var(--view-top-fade-mask); +} +.is-phone.is-floating-nav { + --view-top-fade-mask: linear-gradient(to bottom, rgba(0, 0, 0, var(--view-top-fade-opacity)) 0%, #000000 calc(var(--safe-area-inset-top) + var(--view-header-height) + 12px)); + --view-bottom-fade-mask: linear-gradient(to top, rgba(0, 0, 0, var(--view-bottom-fade-opacity)) 0%, #000000 calc(var(--safe-area-inset-bottom) - var(--keyboard-height) + 12px)); +} +.is-phone.is-hidden-nav { + --view-top-fade-mask: linear-gradient(to bottom, rgba(0, 0, 0, var(--view-top-fade-opacity)) 0%, #000000 var(--safe-area-inset-top)); + --view-bottom-fade-mask: linear-gradient(to top, #000 0%, #000 1px); +} +.is-phone:not(.is-floating-nav) .workspace-drawer, +.is-phone:not(.is-floating-nav) .view-header { + --raised-background: transparent; +} +.is-phone:not(.is-floating-nav) .mobile-navbar { + --raised-background: var(--background-primary); +} +.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-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-content-container { + background-color: var(--modal-background); +} +.is-phone .sync-history-preview, +.is-phone .sync-history-diff, +.is-phone .file-recovery-diff, +.is-phone .file-recovery-text { + background-color: transparent; +} +.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.is-warning { + color: var(--text-error); +} +.mobile-vault-chooser-action.is-warning .mobile-vault-chooser-action-icon { + color: var(--text-error); +} +.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/sync-app-css.mjs b/sync-app-css.mjs new file mode 100644 index 0000000..05323a5 --- /dev/null +++ b/sync-app-css.mjs @@ -0,0 +1,419 @@ +/** + * When Obsidian ships a new version, its app.css changes. This repo keeps a + * copy of every raw app.css it has seen (as src/app-css/app-x.y.z.css) and + * the same content split by topic into src/css/*.css (a plain mirror) and + * src/scss/_*.scss (a hand-nested, human-maintained mirror). + * + * This script diffs the newest src/app-css/app-x.y.z.css against the + * previous one and applies the same additions/removals/changes to the flat + * src/css/*.css files. It cannot safely do the same for src/scss/*.scss, + * since those have been manually restructured with nesting/variables/mixins, + * so instead it writes src/app-css/scss-sync-report.md: a checklist of what + * changed, for a human (or a separate workflow) to port over by hand. + * + * Usage: `node sync-app-css.mjs --new src/app-css/app-1.13.5.css [--old src/app-css/app-1.13.4.css]` + * If --old is omitted, the highest-versioned app-*.css file in src/app-css/ + * other than --new is used. + */ + +import { readFileSync, writeFileSync, existsSync, readdirSync } from "fs"; +import { join, basename } from "path"; + +const ROOT = process.cwd(); +const APP_CSS_DIR = join(ROOT, "src/app-css"); +const CSS_DIR = join(ROOT, "src/css"); +const SCSS_DIR = join(ROOT, "src/scss"); +const NEW_SELECTORS_FILE = join(APP_CSS_DIR, "_new-selectors.css"); +const REPORT_FILE = join(APP_CSS_DIR, "scss-sync-report.md"); + +const VERSION_RE = /^app-(\d+)[.-](\d+)[.-](\d+)\.css$/; + +function parseVersion(filename) { + const match = VERSION_RE.exec(basename(filename)); + if (!match) return null; + return match.slice(1, 4).map(Number); +} + +function compareVersions(a, b) { + for (let i = 0; i < 3; i++) { + if (a[i] !== b[i]) return a[i] - b[i]; + } + return 0; +} + +function parseArgs(argv) { + const args = {}; + for (let i = 0; i < argv.length; i++) { + if (argv[i] === "--new") args.new = argv[++i]; + else if (argv[i] === "--old") args.old = argv[++i]; + } + return args; +} + +function resolveOldFile(newFile) { + const candidates = readdirSync(APP_CSS_DIR) + .filter((f) => f !== basename(newFile) && VERSION_RE.test(f)) + .map((f) => ({ file: join(APP_CSS_DIR, f), version: parseVersion(f) })) + .sort((a, b) => compareVersions(b.version, a.version)); + return candidates.length ? candidates[0].file : null; +} + +// --- CSS block tokenizer ----------------------------------------------- +// +// Parses top-level blocks only. At-rules with nested rule sets (@media, +// @supports, @container, @keyframes, ...) are captured as a single opaque +// block rather than recursed into — this repo's src/css/*.css files store +// them the same way, and diffing inside them isn't needed for this script +// to do its job. + +function skipString(text, i) { + const quote = text[i]; + i++; + while (i < text.length) { + if (text[i] === "\\") { i += 2; continue; } + if (text[i] === quote) return i + 1; + i++; + } + return i; +} + +function skipComment(text, i) { + const end = text.indexOf("*/", i + 2); + return end === -1 ? text.length : end + 2; +} + +function splitTopLevelCommas(s) { + const parts = []; + let depth = 0; + let cur = ""; + for (let i = 0; i < s.length; i++) { + const ch = s[i]; + if (ch === "(") depth++; + else if (ch === ")") depth--; + if (ch === "," && depth === 0) { + parts.push(cur); + cur = ""; + } else { + cur += ch; + } + } + parts.push(cur); + return parts; +} + +function normalizeKey(prelude) { + return splitTopLevelCommas(prelude) + .map((s) => s.trim().replace(/\s+/g, " ")) + .sort() + .join(","); +} + +function normalizeBody(body) { + if (body == null) return null; + return body.replace(/\s+/g, " ").trim(); +} + +/** Returns an array of { key, prelude, body, rawBlock, start, end } in file order. */ +function parseCss(text) { + const rules = []; + let i = 0; + const n = text.length; + + while (i < n) { + while (i < n) { + if (/\s/.test(text[i])) { i++; continue; } + if (text[i] === "/" && text[i + 1] === "*") { i = skipComment(text, i); continue; } + break; + } + if (i >= n) break; + + const preludeStart = i; + while (i < n) { + const ch = text[i]; + if (ch === "/" && text[i + 1] === "*") { i = skipComment(text, i); continue; } + if (ch === '"' || ch === "'") { i = skipString(text, i); continue; } + if (ch === "{" || ch === ";") break; + i++; + } + if (i >= n) break; + + if (text[i] === ";") { + i++; + const rawBlock = text.slice(preludeStart, i); + rules.push({ + key: normalizeKey(text.slice(preludeStart, i - 1).trim()), + prelude: text.slice(preludeStart, i - 1).trim(), + body: null, + rawBlock, + start: preludeStart, + end: i, + }); + continue; + } + + // text[i] === "{" + const prelude = text.slice(preludeStart, i).trim(); + i++; // consume '{' + let depth = 1; + const bodyStart = i; + while (i < n && depth > 0) { + const ch = text[i]; + if (ch === "/" && text[i + 1] === "*") { i = skipComment(text, i); continue; } + if (ch === '"' || ch === "'") { i = skipString(text, i); continue; } + if (ch === "{") depth++; + else if (ch === "}") depth--; + i++; + } + const bodyEnd = i - 1; + const body = text.slice(bodyStart, bodyEnd); + const end = i; + rules.push({ + key: normalizeKey(prelude), + prelude, + body, + rawBlock: text.slice(preludeStart, end), + start: preludeStart, + end, + }); + } + + return rules; +} + +function groupByKey(rules) { + const map = new Map(); + for (const rule of rules) { + if (!map.has(rule.key)) map.set(rule.key, []); + map.get(rule.key).push(rule); + } + return map; +} + +// --- diff old vs new baseline ------------------------------------------ + +function diffRules(oldRules, newRules) { + const oldMap = groupByKey(oldRules); + const newMap = groupByKey(newRules); + const allKeys = new Set([...oldMap.keys(), ...newMap.keys()]); + + const changed = []; // { key, oldRule, newRule } + const removed = []; // { key, oldRule } + const added = []; // { key, newRule } + + for (const key of allKeys) { + const oldList = oldMap.get(key) || []; + const newList = newMap.get(key) || []; + const pairCount = Math.min(oldList.length, newList.length); + + for (let i = 0; i < pairCount; i++) { + if (normalizeBody(oldList[i].body) !== normalizeBody(newList[i].body)) { + changed.push({ key, oldRule: oldList[i], newRule: newList[i] }); + } + } + for (let i = pairCount; i < oldList.length; i++) { + removed.push({ key, oldRule: oldList[i] }); + } + for (let i = pairCount; i < newList.length; i++) { + // Only a genuinely new selector if the key didn't exist in the old + // baseline at all. A count increase on an existing key (a duplicated + // selector block) is treated the same way, since there's no existing + // src/css home for the extra occurrence either. + added.push({ key, newRule: newList[i] }); + } + } + + return { changed, removed, added }; +} + +// --- apply changed/removed to src/css/*.css ----------------------------- + +function loadCssFiles() { + const files = readdirSync(CSS_DIR).filter((f) => f.endsWith(".css")); + const parsed = new Map(); // filename -> { text, rules } + for (const file of files) { + const path = join(CSS_DIR, file); + const text = readFileSync(path, "utf8"); + parsed.set(file, { text, rules: parseCss(text) }); + } + return parsed; +} + +function buildFileIndex(cssFiles) { + const index = new Map(); // key -> [{ file, rule }] + for (const [file, { rules }] of cssFiles) { + for (const rule of rules) { + if (!index.has(rule.key)) index.set(rule.key, []); + index.get(rule.key).push({ file, rule }); + } + } + return index; +} + +function cssFileForScss(cssFile) { + return `_${cssFile.replace(/\.css$/, ".scss")}`; +} + +function applyEdits(cssFiles, edits) { + // edits: Map> + for (const [file, fileEdits] of edits) { + const entry = cssFiles.get(file); + if (!entry) continue; + let text = entry.text; + const sorted = [...fileEdits].sort((a, b) => b.start - a.start); + for (const { start, end, replacement } of sorted) { + text = text.slice(0, start) + replacement + text.slice(end); + } + text = text.replace(/\n{3,}/g, "\n\n"); + entry.text = text; + } +} + +function makeDiffSnippet(oldBody, newBody) { + const lines = []; + if (oldBody != null) lines.push(`- ${oldBody.trim().replace(/\n/g, "\n- ")}`); + if (newBody != null) lines.push(`+ ${newBody.trim().replace(/\n/g, "\n+ ")}`); + return lines.join("\n"); +} + +function run() { + const args = parseArgs(process.argv.slice(2)); + if (!args.new) { + console.error("Usage: node sync-app-css.mjs --new src/app-css/app-x.y.z.css [--old src/app-css/app-x.y.z.css]"); + process.exit(1); + } + + const newFile = args.new; + const oldFile = args.old || resolveOldFile(newFile); + + if (!oldFile) { + console.log(`No prior app-*.css baseline found to diff ${basename(newFile)} against. Nothing to sync — this file is now the baseline for future runs.`); + return; + } + + const newVersion = parseVersion(newFile); + const oldVersion = parseVersion(oldFile); + if (!newVersion) { + console.error(`Could not parse a version from ${basename(newFile)} (expected app-x.y.z.css)`); + process.exit(1); + } + + console.log(`Diffing ${basename(oldFile)} -> ${basename(newFile)}`); + + const oldRules = parseCss(readFileSync(oldFile, "utf8")); + const newRules = parseCss(readFileSync(newFile, "utf8")); + const { changed, removed, added } = diffRules(oldRules, newRules); + + const cssFiles = loadCssFiles(); + const fileIndex = buildFileIndex(cssFiles); + const edits = new Map(); // file -> [{start,end,replacement}] + const scssTodo = []; // { file, scssFile, selector, oldBody, newBody } + const notFoundLocally = []; + + for (const { key, oldRule, newRule } of changed) { + const occurrences = fileIndex.get(key); + if (!occurrences || !occurrences.length) { + notFoundLocally.push({ type: "changed", key, oldRule, newRule }); + continue; + } + const { file, rule: localRule } = occurrences[0]; + if (!edits.has(file)) edits.set(file, []); + edits.get(file).push({ start: localRule.start, end: localRule.end, replacement: newRule.rawBlock }); + scssTodo.push({ + file, + scssFile: cssFileForScss(file), + selector: newRule.prelude, + oldBody: oldRule.body, + newBody: newRule.body, + }); + } + + for (const { key, oldRule } of removed) { + const occurrences = fileIndex.get(key); + if (!occurrences || !occurrences.length) { + notFoundLocally.push({ type: "removed", key, oldRule }); + continue; + } + const { file, rule: localRule } = occurrences[0]; + if (!edits.has(file)) edits.set(file, []); + edits.get(file).push({ start: localRule.start, end: localRule.end, replacement: "" }); + scssTodo.push({ + file, + scssFile: cssFileForScss(file), + selector: oldRule.prelude, + oldBody: oldRule.body, + newBody: null, + removed: true, + }); + } + + applyEdits(cssFiles, edits); + for (const [file, { text }] of cssFiles) { + writeFileSync(join(CSS_DIR, file), text); + } + + const versionLabel = `app-${newVersion.join(".")} (vs app-${oldVersion.join(".")})`; + + if (added.length) { + const header = `/* New in ${versionLabel} — not yet placed in any src/css/*.css file. Move each\n * block below into the appropriate topic file, then add the matching\n * nested rule to that file's src/scss/_*.scss partner by hand. */\n\n`; + const block = added.map((a) => a.newRule.rawBlock).join("\n\n"); + const existing = existsSync(NEW_SELECTORS_FILE) ? readFileSync(NEW_SELECTORS_FILE, "utf8") + "\n\n" : ""; + writeFileSync(NEW_SELECTORS_FILE, existing + header + block + "\n"); + } + + const reportSections = []; + if (scssTodo.length) { + const byFile = new Map(); + for (const item of scssTodo) { + if (!byFile.has(item.scssFile)) byFile.set(item.scssFile, []); + byFile.get(item.scssFile).push(item); + } + for (const [scssFile, items] of byFile) { + const entries = items + .map( + (item) => `- [ ] \`${item.selector}\` (${item.removed ? "removed" : "changed"} in \`src/css/${item.file}\`)\n\n \`\`\`diff\n${makeDiffSnippet(item.oldBody, item.newBody)}\n \`\`\`` + ) + .join("\n\n"); + reportSections.push(`### \`src/scss/${scssFile}\`\n\n${entries}`); + } + } + if (added.length) { + reportSections.push( + `### New selectors\n\n- [ ] ${added.length} new selector(s) staged in \`src/app-css/_new-selectors.css\` — place them in a topic file under \`src/css/\`, then add the matching nested rule to the corresponding \`src/scss/_*.scss\` partial.` + ); + } + + if (reportSections.length) { + const heading = `## ${versionLabel}\n\nPort each item below into the matching nested SCSS partial, then delete its line.\n\n`; + const existing = existsSync(REPORT_FILE) + ? readFileSync(REPORT_FILE, "utf8") + : "# SCSS nesting sync checklist\n"; + writeFileSync(REPORT_FILE, existing + "\n" + heading + reportSections.join("\n\n") + "\n"); + } + + console.log(`Changed: ${changed.length}, removed: ${removed.length}, added: ${added.length}`); + if (notFoundLocally.length) { + console.log(`${notFoundLocally.length} rule(s) from the old baseline were not found in any src/css/*.css file (already removed/customized by hand) — skipped:`); + for (const item of notFoundLocally) { + console.log(` - [${item.type}] ${item.key.slice(0, 80)}`); + } + } + + writeFileSync( + join(ROOT, "sync-summary.json"), + JSON.stringify( + { + oldVersion: oldVersion.join("."), + newVersion: newVersion.join("."), + changed: changed.length, + removed: removed.length, + added: added.length, + notFoundLocally: notFoundLocally.length, + scssReportUpdated: reportSections.length > 0, + }, + null, + 2 + ) + ); +} + +run(); From a7bdc32d355804f3440e1f7dfea717a11a7002a3 Mon Sep 17 00:00:00 2001 From: Sigrunixia Date: Tue, 4 Aug 2026 09:46:03 -0500 Subject: [PATCH 2/6] Trim comments to one line each --- .github/workflows/scss-sync-notify.yml | 8 +------ .github/workflows/sync-app-css.yml | 7 +----- sync-app-css.mjs | 31 +++----------------------- 3 files changed, 5 insertions(+), 41 deletions(-) diff --git a/.github/workflows/scss-sync-notify.yml b/.github/workflows/scss-sync-notify.yml index bf2b18a..5a70663 100644 --- a/.github/workflows/scss-sync-notify.yml +++ b/.github/workflows/scss-sync-notify.yml @@ -1,12 +1,6 @@ name: Notify SCSS nesting sync -# src/app-css/scss-sync-report.md is a checklist of changes that were -# applied to the flat src/css/*.css files and still need to be hand-ported -# into the nested src/scss/*.scss partials (the "Sync app.css changes" -# workflow writes to it, but a human may also edit it directly, e.g. to -# check items off). This workflow doesn't touch the SCSS itself — nesting -# decisions are made by hand — it just keeps a standing PR comment in sync -# with the current checklist so it isn't easy to lose track of. +# Mirrors src/app-css/scss-sync-report.md into a standing PR comment; never touches the SCSS itself, since nesting is done by hand. on: pull_request: diff --git a/.github/workflows/sync-app-css.yml b/.github/workflows/sync-app-css.yml index 4ea60bc..a117ec4 100644 --- a/.github/workflows/sync-app-css.yml +++ b/.github/workflows/sync-app-css.yml @@ -1,11 +1,6 @@ name: Sync app.css changes -# When a PR adds a new src/app-css/app-x.y.z.css snapshot, diff it against -# the previous snapshot and apply the same additions/removals/changes to -# the flat src/css/*.css files. src/scss/*.scss is hand-nested and not -# safe to auto-edit, so instead this appends a checklist to -# src/app-css/scss-sync-report.md for a human to port by hand (see the -# separate "Notify SCSS nesting sync" workflow). +# Diffs a newly-added src/app-css/app-x.y.z.css against the previous one and applies the changes to src/css/*.css; src/scss/*.scss is hand-nested, so those get logged to src/app-css/scss-sync-report.md instead (see the "Notify SCSS nesting sync" workflow). on: pull_request: diff --git a/sync-app-css.mjs b/sync-app-css.mjs index 05323a5..438106d 100644 --- a/sync-app-css.mjs +++ b/sync-app-css.mjs @@ -1,20 +1,4 @@ -/** - * When Obsidian ships a new version, its app.css changes. This repo keeps a - * copy of every raw app.css it has seen (as src/app-css/app-x.y.z.css) and - * the same content split by topic into src/css/*.css (a plain mirror) and - * src/scss/_*.scss (a hand-nested, human-maintained mirror). - * - * This script diffs the newest src/app-css/app-x.y.z.css against the - * previous one and applies the same additions/removals/changes to the flat - * src/css/*.css files. It cannot safely do the same for src/scss/*.scss, - * since those have been manually restructured with nesting/variables/mixins, - * so instead it writes src/app-css/scss-sync-report.md: a checklist of what - * changed, for a human (or a separate workflow) to port over by hand. - * - * Usage: `node sync-app-css.mjs --new src/app-css/app-1.13.5.css [--old src/app-css/app-1.13.4.css]` - * If --old is omitted, the highest-versioned app-*.css file in src/app-css/ - * other than --new is used. - */ +// Diffs a new src/app-css/app-x.y.z.css against the previous one and applies the changes to src/css/*.css; src/scss/*.scss is hand-nested, so those get logged to scss-sync-report.md instead. Usage: node sync-app-css.mjs --new [--old ]. import { readFileSync, writeFileSync, existsSync, readdirSync } from "fs"; import { join, basename } from "path"; @@ -58,13 +42,7 @@ function resolveOldFile(newFile) { return candidates.length ? candidates[0].file : null; } -// --- CSS block tokenizer ----------------------------------------------- -// -// Parses top-level blocks only. At-rules with nested rule sets (@media, -// @supports, @container, @keyframes, ...) are captured as a single opaque -// block rather than recursed into — this repo's src/css/*.css files store -// them the same way, and diffing inside them isn't needed for this script -// to do its job. +// --- CSS block tokenizer: top-level blocks only, @media/@supports/@keyframes etc. captured as one opaque block rather than recursed into --- function skipString(text, i) { const quote = text[i]; @@ -214,10 +192,7 @@ function diffRules(oldRules, newRules) { removed.push({ key, oldRule: oldList[i] }); } for (let i = pairCount; i < newList.length; i++) { - // Only a genuinely new selector if the key didn't exist in the old - // baseline at all. A count increase on an existing key (a duplicated - // selector block) is treated the same way, since there's no existing - // src/css home for the extra occurrence either. + // Treated as "added" whether the key is brand new or just has more occurrences than before — neither has an existing src/css home. added.push({ key, newRule: newList[i] }); } } From c6c8c557adb0f06837a391e434cb5fe892c3b2be Mon Sep 17 00:00:00 2001 From: Rebbecca Bishop <68425372+sigrunixia@users.noreply.github.com> Date: Tue, 4 Aug 2026 09:57:26 -0500 Subject: [PATCH 3/6] Update .github/workflows/scss-sync-notify.yml --- .github/workflows/scss-sync-notify.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/scss-sync-notify.yml b/.github/workflows/scss-sync-notify.yml index 5a70663..fc9b046 100644 --- a/.github/workflows/scss-sync-notify.yml +++ b/.github/workflows/scss-sync-notify.yml @@ -1,6 +1,6 @@ name: Notify SCSS nesting sync -# Mirrors src/app-css/scss-sync-report.md into a standing PR comment; never touches the SCSS itself, since nesting is done by hand. +# Turns src/app-css/scss-sync-report.md into a standing PR comment. on: pull_request: From 4951c5fc3565459cb1be2b771208902724e28ea0 Mon Sep 17 00:00:00 2001 From: Rebbecca Bishop <68425372+sigrunixia@users.noreply.github.com> Date: Tue, 4 Aug 2026 09:57:33 -0500 Subject: [PATCH 4/6] Update .github/workflows/sync-app-css.yml --- .github/workflows/sync-app-css.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/sync-app-css.yml b/.github/workflows/sync-app-css.yml index a117ec4..ff8153b 100644 --- a/.github/workflows/sync-app-css.yml +++ b/.github/workflows/sync-app-css.yml @@ -1,6 +1,7 @@ name: Sync app.css changes -# Diffs a newly-added src/app-css/app-x.y.z.css against the previous one and applies the changes to src/css/*.css; src/scss/*.scss is hand-nested, so those get logged to src/app-css/scss-sync-report.md instead (see the "Notify SCSS nesting sync" workflow). +# Diffs a newly-added src/app-css/app-x.y.z.css against the previous one and applies the changes to src/css/*.css. +# src/scss/*.scss is hand-nested, so those get logged to src/app-css/scss-sync-report.md instead. on: pull_request: From 0e5e5db0499d1f32d63e92d5da1063ca78eb03ce Mon Sep 17 00:00:00 2001 From: Rebbecca Bishop <68425372+sigrunixia@users.noreply.github.com> Date: Tue, 4 Aug 2026 09:57:40 -0500 Subject: [PATCH 5/6] Update sync-app-css.mjs --- sync-app-css.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sync-app-css.mjs b/sync-app-css.mjs index 438106d..a5855c4 100644 --- a/sync-app-css.mjs +++ b/sync-app-css.mjs @@ -1,4 +1,4 @@ -// Diffs a new src/app-css/app-x.y.z.css against the previous one and applies the changes to src/css/*.css; src/scss/*.scss is hand-nested, so those get logged to scss-sync-report.md instead. Usage: node sync-app-css.mjs --new [--old ]. +// Diffs the app.css against the prior one. Usage: node sync-app-css.mjs --new [--old ]. import { readFileSync, writeFileSync, existsSync, readdirSync } from "fs"; import { join, basename } from "path"; From 819df2b6c968d5c6ad096c7fdd182793f23864c8 Mon Sep 17 00:00:00 2001 From: Sigrunixia Date: Tue, 4 Aug 2026 09:59:55 -0500 Subject: [PATCH 6/6] Restrict app-css sync workflows to PRs from the maintenance branch --- .github/workflows/scss-sync-notify.yml | 1 + .github/workflows/sync-app-css.yml | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/scss-sync-notify.yml b/.github/workflows/scss-sync-notify.yml index fc9b046..9f28316 100644 --- a/.github/workflows/scss-sync-notify.yml +++ b/.github/workflows/scss-sync-notify.yml @@ -14,6 +14,7 @@ permissions: jobs: notify: runs-on: ubuntu-latest + if: github.head_ref == 'maintenance' steps: - uses: actions/checkout@v7 diff --git a/.github/workflows/sync-app-css.yml b/.github/workflows/sync-app-css.yml index ff8153b..ee4fbb1 100644 --- a/.github/workflows/sync-app-css.yml +++ b/.github/workflows/sync-app-css.yml @@ -16,7 +16,7 @@ permissions: jobs: sync: runs-on: ubuntu-latest - if: github.event.pull_request.head.repo.full_name == github.repository + if: github.event.pull_request.head.repo.full_name == github.repository && github.head_ref == 'maintenance' steps: - uses: actions/checkout@v7 with: