obsidian-theme/isaacfreeman_kakano-obsidian-theme
1
0
Fork 0
mirror of https://github.com/isaacfreeman/kakano-obsidian-theme.git synced 2026-07-22 03:30:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
isaacfreeman_kakano-obsidia.../theme.css
Isaac Freeman cce2fe39e2
New roundness setting
2026-07-18 17:16:12 +12:00

10241 lines
290 KiB
CSS
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* Compiled Kakano theme */
/*
# Kakano Theme for Obsidian
Principles:
- **Strong color**
Users should be able to easily select a color for each vault and have the theme generate shades and gradients automatically.
- **Help new users**
Obsidian can be intimidating for new users. I think a good way to help with this is to clarify which parts of the window are user content (white background, strong contrast) and which are navigation and other controls (colored background, lower contrast).
- **Standardise controls**
Obsidian’s exuberant plugin scene is fantastic, but it also means that there’s a lot of inconsistency in the design of controls and modals – even between core plugins. I’ve tried to find ways to make similar controls have similar appearance. Likewise, I’ve aimed to follow conventions from the underlying OS, such as having close controls on the left on macOS.
- **Be opinionated enough**
I’d like Kakano to provide a great user experience by default without the user having to make any choices beyond their base color. It has settings, but I want each one to be there because different users genuinely have different needs, not just because I failed to make a decision.
*/
/* #region Plugin compatibility */
/* @plugins
core:
- audio-recorder
- backlink
- bases
- bookmarks
- command-palette
- daily-notes
- file-explorer
- file-recovery
- footnotes-view
- global-search
- graph
- note-composer
- outgoing-link
- outline
- page-preview
- properties-view
- random-note
- slash-commands
- starred
- switcher
- sync
- tag-pane
- templates
- word-count
- workspaces
community:
- calendar
- dataview
- folder-note-plugin
- nldates-obsidian
- obsidian-columns
- obsidian-jira-issue
- obsidian-kanban
- obsidian-map-view
- obsidian-plugin-update-tracker
- obsidian-style-settings
- obsidian-tasks-plugin
- oz-clear-unused-images
- recent-files-obsidian
- table-editor-obsidian
*/
/* #endregion */
/* #region Style Settings plugin config */
/* @settings
name: Kakano Theme
id: kakano-style
settings:
-
id: heading-baseColor
title: Base color
type: heading
level: 1
collapsed: false
-
id: infoText-baseColor
description: "The Kakano theme uses a base color for each vault, and generates different shades and gradients from it. You can either select from one of the preset colors, or specify an exact color."
type: info-text
markdown: true
-
id: theme-setting-predefinedBaseColor
title: 'Preset base color'
description: 'If you just want a quick color, choose one of these.'
type: class-select
allowEmpty: true
default: theme-setting-baseColorPreset-kahurangi
options:
-
label: 'Use accent color'
value: theme-setting-baseColorPreset-accent
-
label: 'Whero – Red'
value: theme-setting-baseColorPreset-whero
-
label: 'Karaka – Orange'
value: theme-setting-baseColorPreset-karaka
-
label: 'Kōwhai – Yellow'
value: theme-setting-baseColorPreset-koowhai
-
label: 'Kākāriki – Green'
value: theme-setting-baseColorPreset-kaakaariki
-
label: 'Kārikiōrangi – Cyan'
value: theme-setting-baseColorPreset-kaarikioorangi
-
label: 'Kahurangi – Blue'
value: theme-setting-baseColorPreset-kahurangi
-
label: 'Waiporoporo – Purple'
value: theme-setting-baseColorPreset-waiporoporo
-
label: 'Māwhero – Pink'
value: theme-setting-baseColorPreset-maawhero
-
label: 'Mangu – Black'
value: theme-setting-baseColorPreset-mangu
-
label: 'Mā – White'
value: theme-setting-baseColorPreset-maa
-
label: 'Kiwikiwi – Grey'
value: theme-setting-baseColorPreset-kiwikiwi
-
id: base
title: Exact base color
description: 'Set an exact base color. Make sure "Preset base color" is empty, and click Save to apply.'
type: variable-color
format: hsl-split
default: '#2176B0'
-
id: heading-notes
title: Notes
type: heading
level: 1
collapsed: false
-
id: heading-notes-appearance
title: Appearance
type: heading
level: 2
collapsed: true
-
id: theme-setting-lightModeNoteBg
title: 'Light mode note background'
description: 'In light mode, note backgrounds can be full white (default) or near white with a slight tint of the base color.'
type: class-select
allowEmpty: false
default: theme-setting-lightModeNoteBgFullWhite
options:
-
label: 'Near white'
value: theme-setting-lightModeNoteBgNearWhite
-
label: 'Full white'
value: theme-setting-lightModeNoteBgFullWhite
-
id: theme-value-darkModeNoteBg
title: 'Dark mode note background'
description: 'In dark mode, note backgrounds can be near black (default) or full black. Near black is a bit easier on the eyes. Full black will save a little energy on OLED screens which will switch back pixels completely off. And some people just like the way it looks.'
type: class-select
allowEmpty: false
default: theme-value-darkModeNoteBgNearBlack
options:
-
label: 'Near black (less eye strain)'
value: theme-value-darkModeNoteBgNearBlack
-
label: 'Full black (OLED screen will switch pixels off)'
value: theme-value-darkModeNoteBgFullBlack
-
id: theme-setting-distinguishNonContentTabs
title: "Distinguish non-editable tabs"
description: "Most tabs have content created by you (e.g. notes, canvases, kanban charts) but some aren't directly editable (e.g. graphs, calendars, maps). When this setting is on, the non-editable tabs are shaded differently when inactive."
default: true
type: class-toggle
-
id: theme-setting-wrapTabs
title: "Wrap Tabs"
description: "EXPERIMENTAL If there are more tabs than fit in a single row, allow them to wrap to multiple rows."
default: false
type: class-toggle
-
id: setting-properties-position
title: 'Properties position'
description: 'Place properties before or after your main note content. Note that this only applies to Live Preview mode.'
type: class-select
allowEmpty: false
default: 'setting-properties-position-above'
options:
-
label: 'Above main note content'
value: 'setting-properties-position-above'
-
label: 'Below main note content'
value: 'setting-properties-position-below'
-
id: theme-setting-embeddedNoteTitleVisibility
title: 'Embedded note titles'
description: "When a note is embedded in another note, show or hide the source note's title."
type: class-select
allowEmpty: false
default: theme-setting-embeddedNoteTitleVisibilityHover
options:
-
label: 'Always hidden'
value: theme-setting-embeddedNoteTitleVisibilityHide
-
label: 'Visible on hover'
value: theme-setting-embeddedNoteTitleVisibilityHover
-
label: 'Always visible'
value: theme-setting-embeddedNoteTitleVisibilityShow
-
id: theme-setting-stickyEmbeddedLinks
title: 'Embedded links scroll position'
description: 'EXPERIMENTAL Embedded links can be placed at the below your content (so you scroll to the bottom to see them), or pinned so they stay visible as you scroll.'
type: class-select
allowEmpty: false
default: 'theme-setting-stickyEmbeddedLinks-off'
options:
-
label: 'Place below content (scroll down to view)'
value: 'theme-setting-stickyEmbeddedLinks-off'
-
label: 'Pin (stay visible while content scrolls)'
value: 'theme-setting-stickyEmbeddedLinks-on'
-
id: heading-typographySettings
title: Typography
type: heading
level: 2
collapsed: true
-
id: theme-setting-differentiateBulletLevels
title: 'Style nested bullet levels differently'
description: "Show different bullets for different levels of nesting"
type: class-toggle
default: true
-
id: heading-HeadingSettings
title: Headings
type: heading
level: 3
collapsed: false
-
id: theme-setting-headingFont
title: Heading font
description: Font used for headings. Leave empty to use the same font as body text, as defined by `Text font` in `Appearance`.
type: variable-text
default: ""
quotes: true
-
id: theme-setting-headingScaleFactor
title: 'Heading scale factor – desktop/tablet'
description: 'Scale factor for heading sizes. Larger numbers will increase the difference between different heading sizes, smaller numbers will decrease the difference.'
type: class-select
allowEmpty: false
default: theme-setting-headingScaleFactor1point2
options:
-
label: '1.067 - Minor Second'
value: theme-setting-headingScaleFactor1point067
-
label: '1.125 - Major Second'
value: theme-setting-headingScaleFactor1point125
-
label: '1.200 - Minor Third'
value: theme-setting-headingScaleFactor1point2
-
label: '1.250 - Major Third'
value: theme-setting-headingScaleFactor1point25
-
label: '1.333 - Perfect Fourth'
value: theme-setting-headingScaleFactor1point333
-
label: '1.414 - Augmented Fourth'
value: theme-setting-headingScaleFactor1point414
-
label: '1.500 - Perfect Fifth'
value: theme-setting-headingScaleFactor1point5
-
label: '1.618 - Golden Ratio'
value: theme-setting-headingScaleFactor1point618
-
id: theme-setting-headingScaleFactorPhone
title: 'Heading scale factor – phone'
description: "Scale factor for heading sizes on smaller phone screens. With space at a premium, you'll usually want this to be smaller than the desktop scale factor"
type: class-select
allowEmpty: false
default: theme-setting-headingScaleFactorPhone1point125
options:
-
label: '1.067 - Minor Second'
value: theme-setting-headingScaleFactorPhone1point067
-
label: '1.125 - Major Second'
value: theme-setting-headingScaleFactorPhone1point125
-
label: '1.200 - Minor Third'
value: theme-setting-headingScaleFactorPhone1point2
-
label: '1.250 - Major Third'
value: theme-setting-headingScaleFactorPhone1point25
-
label: '1.333 - Perfect Fourth'
value: theme-setting-headingScaleFactorPhone1point333
-
label: '1.414 - Augmented Fourth'
value: theme-setting-headingScaleFactorPhone1point414
-
label: '1.500 - Perfect Fifth'
value: theme-setting-headingScaleFactorPhone1point5
-
label: '1.618 - Golden Ratio'
value: theme-setting-headingScaleFactorPhone1point618
-
id: heading-lineWidthSettings
title: Line length
type: heading
level: 3
collapsed: false
-
id: infoText-lineWidth
description: "Maximum line length in characters. 50-75 characters is often recommended for readability in languages with Latin scripts. 15-35 characters may be better for Chinese, Japanese and Korean characters.
<br><br>
These settings apply when the **Readable line length** setting is enabled in **Editor**"
type: info-text
markdown: true
-
id: theme-setting-lineWidth
title: 'Line length for Live Preview and Source Mode'
description: ''
type: variable-number-slider
default: 60
min: 10
max: 120
step: 5
-
id: theme-setting-lineWidthReadingView
title: 'Line length for Reading View'
description: ''
type: variable-number-slider
default: 60
min: 10
max: 120
step: 5
-
id: heading-editing
title: Editing
type: heading
level: 2
collapsed: true
-
id: infoText-editing
description: "These settings apply to the **Live Preview** and **Source** modes, but not to the **Reading** mode."
type: info-text
markdown: true
-
id: theme-setting-highlightActiveLine
title: 'Highlight active line'
description: "Show a background color behind the active line while editing."
type: class-toggle
-
id: theme-setting-codeBlockLineNumbers
title: 'Line numbers in code blocks'
description: "Show line numbers in code blocks"
type: class-toggle
default: true
-
id: heading-layout
title: Layout
type: heading
level: 2
collapsed: true
-
id: theme-setting-centerImages
title: 'Center images'
description: "Center images horizontally"
type: class-toggle
default: true
-
id: infoText-centerImages
description: "Images can also be centered individually e.g. `![[image_file_name.jpg|center]]`"
type: info-text
markdown: true
-
id: theme-setting-wideTables
title: 'Wide tables'
description: "Allow wide tables to extend left and right beyond the margins for body text."
type: class-toggle
default: true
-
id: heading-ui
title: User Interface
type: heading
level: 1
collapsed: false
-
id: heading-ui-appearance
title: Appearance
type: heading
level: 2
collapsed: true
-
id: theme-setting-roundness
title: 'Roundness'
description: 'Degree of roundness for UI elements. Zero for sharp corners, higher for more rounding.'
type: variable-number-slider
default: 0.5
min: 0
max: 2
step: 0.25
-
id: heading-ui-background
title: Background
type: heading
level: 2
collapsed: true
-
id: theme-value-gradientContrast
title: 'Background gradient contrast'
description: 'Degree of contrast for background gradients. Set to zero for a flat background color.'
type: variable-number-slider
default: 0.2
min: 0
max: 1
step: 0.1
-
id: heading-customGradient
title: Custom Gradient
type: heading
level: 3
collapsed: true
-
id: theme-setting-customGradient
title: 'Use a custom gradient for the background'
description: "Kakano normally provides a smooth gradient background using the same hue as the base color. This setting overrides that so you can have a gradient with different hues top and bottom. Note that the colors you set here won't be used directly: they'll be lightened for light mode and darkened for dark mode."
type: class-toggle
-
id: theme-color-customGradientBaseTop
title: Custom Gradient Top
description: 'Base color for the top of the gradient'
type: variable-color
format: hsl
default: '#ff0000'
-
id: theme-color-customGradientBaseBottom
title: Custom Gradient Bottom
description: 'Base color for the bottom of the gradient'
type: variable-color
format: hsl
default: '#0000ff'
-
id: heading-layout
title: Layout
type: heading
level: 2
collapsed: true
-
id: theme-setting-fullWidthStatusBar
title: 'Full width status bar'
description: "EXPERIMENTAL If you have many items in your status bar, you may find that it overflows onto the sidebars. This setting will push the main app workspace up so the status bar can use the full window width."
type: class-toggle
-
id: heading-icons
title: Icons
type: heading
level: 2
collapsed: true
-
id: theme-setting-enableIconsInSettings
title: 'Enable icons in Settings'
description: "Obsidian normally shows icons beside settings groups. If you find that distracting, this setting allows you to hide them."
type: class-toggle
default: true
-
id: theme-setting-enableIconsInMenus
title: 'Enable icons in non-native Menus'
description: "Obsidian normally shows icons for menu items. This setting does not apply if Native Menus are enabled."
type: class-toggle
default: true
-
id: heading-mobile
title: Mobile
type: heading
level: 1
collapsed: true
-
id: theme-setting-mobileHorizontalPadding
title: 'Mobile horizontal spacing'
description: "Width of space to the left and right of the note content. Set to zero if you'd like the note to extend to the full width, 0.5 or 1 if you'd like to see your background gradient."
type: variable-number-slider
default: 0.5
min: 0
max: 1
step: 0.25
-
id: theme-setting-mobileCardsUI
title: 'Mobile cards UI'
description: "EXPERIMENTAL Scale the main workspace down when there's a modal in the foreground, creating a 3D cards effect. Currently unfinished, but you can see it when you open a prompt."
type: class-toggle
-
id: heading-compatibility
title: Compatibility
type: heading
level: 1
collapsed: false
-
id: heading-compatibility-builtin
title: Built-in feature Toggles
type: heading
level: 2
collapsed: true
-
id: theme-setting-enableBuiltInAlternativeCheckboxes
title: 'Enable built-in alternative checkboxes'
description: "Kakano provides styles for some common alternative checkbox states. Different themes have built-in support for different sets of alternative checkboxes, so some users may prefer to use their own CSS snippets that work across multiple themes. If you'd like to do this, you can disable Kakano's built-in alternative checkboxes to ensure that they don't clas with the snippet."
type: class-toggle
default: true
-
id: infoText-alternativeCheckboxesReferenceSet
description: "> [!info]
> The [Alternative Checkboxes Reference Set project](https://github.com/damiankorcz/Alternative-Checkboxes-Reference-Set) is working on standardising alternative checkboxes."
type: info-text
markdown: true
-
id: theme-setting-enableImageAdjustmentWithAltText
title: 'Enable image adjustment with alt text'
description: "With this setting enabled, Kakano recognises keywords in alt text to position images left/right/center and round corners. None of these are crucial functionality, so if you need to use alt text for its real purpose of accessibility, you can disable this setting."
type: class-toggle
default: true
-
id: heading-communityPlugins
title: Community Plugin Toggles
type: heading
level: 2
collapsed: true
-
id: infoText-communityPlugins
description: "By default, Kakano changes the appearance of many community plugins to provide a more consistent appearance. If you prefer the standard appearance for a plugin you can disable Kakano's changes."
type: info-text
markdown: true
-
id: theme-setting-overrideAdvancedTables
title: 'Advanced Tables'
type: class-toggle
default: true
-
id: theme-setting-overrideCalendar
title: 'Calendar'
type: class-toggle
default: true
-
id: theme-setting-overrideClearUnusedImages
title: 'Clear Unused Images'
type: class-toggle
default: true
-
id: theme-setting-overrideColumns
title: 'Columns'
type: class-toggle
default: true
-
id: theme-setting-overrideDataview
title: 'Dataview'
type: class-toggle
default: true
-
id: theme-setting-overrideExcalidraw
title: 'Excalidraw'
type: class-toggle
default: true
-
id: theme-setting-overrideFolderNote
title: 'Folder Note'
type: class-toggle
default: true
-
id: theme-setting-overrideJiraIssue
title: 'Jira Issue'
type: class-toggle
default: true
-
id: theme-setting-overrideKanban
title: 'Kanban'
type: class-toggle
default: true
-
id: theme-setting-overrideMapView
title: 'Map View'
type: class-toggle
default: true
-
id: theme-setting-overridePluginUpdateTracker
title: 'Plugin Update Tracker'
type: class-toggle
default: true
-
id: theme-setting-overrideRecentFiles
title: 'Recent Files'
type: class-toggle
default: true
-
id: theme-setting-overrideTasks
title: 'Tasks'
type: class-toggle
default: true
-
id: theme-setting-overrideStyleSettings
title: 'Style Settings'
type: class-toggle
default: true
*/
/* #endregion */
/* #region Custom properties */
/* #region General */
body {
--background-input: light-dark(var(--theme-color-baseTransparent12), var(--theme-color-darkenTransparent06));
--background-modifier-message: var(--theme-color-noticeBg);
--background-secondary: transparent;
--bases-cards-shadow: var(--shadow-s);
--bases-cards-shadow-hover: var(--shadow-s);
--callout-padding: var(--theme-padding-block);
--checkbox-border-color-hover: var(--interactive-accent-hover);
--checkbox-border-color: var(--interactive-accent);
--checkbox-color: var(--interactive-accent);
--code-background: light-dark(var(--theme-color-darkenTransparent06),
var(--theme-color-lightenTransparent06));
--code-comment: light-dark(var(--theme-color-darkenTransparent50),
var(--theme-color-lightenTransparent50));
--code-normal: var(--text-normal);
--divider-width: 0;
--dropdown-background: var(--theme-color-controlBg);
--embed-background: var(--theme-color-baseTransparent12);
--embed-border-bottom: none;
--embed-border-left: none;
--embed-border-right: none;
--embed-border-top: none;
--embed-padding: 1em;
/* Using 0.625rem here as approximately 1ch. We can't use ch because we want line width to be constant across font sizes, so it's the same for headings and body text. */
--file-line-width: calc(0.625rem * var(--theme-setting-lineWidth));
--file-margins: 0 2em;
--flair-background: var(--theme-color-base);
--flair-color: var(--text-on-accent);
--font-ui-smaller: 0.8rem;
--header-height: calc(var(--icon-size) + 1rem);
--heading-spacing: 0.67em;
--input-border-width: 2px;
--list-marker-color: var(--text-normal);
--list-bullet-size: 0.25em;
--list-bullet-transform: none;
--list-marker-color-collapsed: var(--list-marker-color);
--list-indent: 1.5em;
--metadata-divider-width: 0;
--metadata-gap: 0.5em;
--metadata-property-box-shadow-hover: none;
--modal-border-color: black;
--modal-border-width: 0;
--modal-height: 85vh;
--modal-max-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - 2em);
--modal-max-width: calc(100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right) - 2em);
--nav-item-background-hover: var(--theme-color-baseTransparent75);
--nav-item-children-margin-start: calc(var(--size-4-4) / 2 - var(--nav-indentation-guide-width) / 2);
--nav-item-children-padding-start: calc(1em - var(--nav-indentation-guide-width) / 2);
--nav-item-color-highlighted: var(--nav-item-hover);
--nav-item-padding: 0.375em 0.75em 0.375em 0.75em;
--nav-item-parent-padding: 0.25em 0 0.25em 0;
--p-spacing: 1em;
--pill-focus-left-adjust: 0;
--pill-focus-width: 100%;
--prompt-border-color: transparent;
--prompt-border-width: 0;
--ribbon-background-collapsed: transparent;
--ribbon-background: transparent;
--ribbon-width: 3em;
--setting-group-heading-color: var(--text-normal);
--setting-group-heading-size: var(--font-ui-medium);
--setting-group-heading-weight: var(--font-semibold);
--setting-items-background: none;
--setting-items-padding: 0;
--setting-items-border-width: 0;
--setting-items-border-color: var(--background-modifier-border);
--sidebar-markdown-font-size: calc(var(--font-text-size) * var(--theme-value-sidebarFontScalingFactor));
--slider-track-background: var(--theme-color-baseTransparent50);
--status-bar-background: var(--theme-color-gradientTop);
--status-bar-text-color: var(--text-normal);
--tab-container-background: transparent;
--tab-outline-width: 0;
--tab-switcher-preview-background-shadow: var(--shadow-l);
--tab-switcher-preview-shadow: none;
--tab-switcher-preview-shadow-active: none;
--tab-text-color-focused-highlighted: var(--theme-color-base);
--tab-text-color-focused-active-current: var(--text-normal);
--tag-weight: 400;
--text-on-accent: var(--theme-color-baseLightened95);
--text-muted: color-mix(in srgb, var(--text-normal), transparent 30%);
--titlebar-background-focused: transparent;
--titlebar-background: transparent;
--vault-profile-color-hover: var(--theme-color-controlHover);
/* Roundness */
--theme-setting-roundness: 0.5;
--theme-setting-baseRadius: calc(1rem * var(--theme-setting-roundness));
--radius-xs: calc(0.25 * var(--theme-setting-baseRadius));
--radius-s: calc(0.5 * var(--theme-setting-baseRadius));
--radius-m: var(--theme-setting-baseRadius);
--radius-l: calc(1.5 * var(--theme-setting-baseRadius));
--radius-xl: calc(2 * var(--theme-setting-baseRadius));
--checkbox-radius: var(--radius-s);
--clickable-icon-radius: var(--radius-s);
--input-radius: var(--radius-s);
--modal-radius: var(--radius-m);
--search-input-radius: var(--radius-s);
--tab-curve: var(--radius-xs);
--tab-radius-active: var(--radius-s);
--tab-radius: var(--radius-s);
--toggle-radius: var(--radius-l);
--toggle-thumb-radius: var(--radius-l);
--vault-profile-radius: var(--radius-m);
--setting-items-radius: 0;
/* These are transparent for Kakano, so the radius doesn't matter. */
--list-bullet-radius: 50%;
--theme-length-fullBorderRadius: 9999px;
/* Other new variables for this theme */
--theme-color-dragTarget: var(--theme-color-baseTransparent50);
--theme-color-dragTargetBg: var(--theme-color-baseTransparent25);
--theme-color-graphViewBg: transparent;
--theme-color-tabBgInactiveHover: var(--theme-color-baseTransparent75);
--theme-color-tableHeaderBg: var(--theme-color-baseTransparent12);
--theme-color-dataviewEmpty: light-dark(var(--theme-color-baseLightened40),
var(--theme-color-baseDarkened40));
--theme-color-card: var(--nav-item-color);
--theme-color-cardBg: var(--background-primary);
--theme-color-cardHover: var(--nav-item-color-hover);
--theme-color-cardBgHover: var(--theme-color-base);
--theme-setting-lineWidth: 60;
--theme-spacing-mobileHorizontalSpacing: calc(var(--theme-setting-mobileHorizontalPadding) * 1rem);
--theme-length-checkboxBorderWidth: 1px;
--theme-length-closeButtonWidth: 1.5rem;
--theme-length-collapseIndicatorSize: 1.5rem;
--theme-length-controlSetSpacing: 0.5rem;
--theme-length-statusBarHeight: 2rem;
/* Additional radius size alongside built-in radius-x */
--theme-value-sidebarFontScalingFactor: 0.8;
--theme-length-cardMinWidth: 8em;
--theme-length-cardMaxWidth: 1fr;
--theme-grid-cardSet: repeat(auto-fit,
minmax(var(--theme-length-cardMinWidth), var(--theme-length-cardMaxWidth)));
--theme-length-cardImageHeight: 25em;
--theme-cardImageFit: contain;
--theme-cardAspectRatio: auto;
--theme-padding-block: var(--theme-padding-blockVertical) var(--theme-padding-blockHorizontal);
/* Used for callouts, embeds etc. */
--theme-padding-blockHorizontal: 1.5em;
--theme-padding-blockVertical: 0.75em;
}
/* TODO: what about other OSes */
.mod-macos:not(.is-mobile) .mod-settings {
--dropdown-background: var(--theme-color-controlBg);
--dropdown-icon-background: transparent;
}
/* #endregion */
/* #region Overrides for colour presets */
/* Tweak some colours for presets, to improve contrast. Ideally I'd liek to do this for use-selected colours too, but the browser engine doesn't yet support contrast-color() */
body.css-settings-manager.theme-setting-baseColorPreset-maa {
--text-on-accent: black;
--nav-item-color-active: black;
--icon-color: black;
--icon-color-focused: black;
--theme-color-controlLightweightActive: black;
--theme-color-controlActive: black;
--theme-color-controlHover: black;
--theme-color-controlTextHover: black;
--vault-profile-color-hover: black;
--nav-item-color-hover: black;
--interactive-accent: var(--theme-color-baseDarkened25);
--icon-color-focused: black;
}
body.css-settings-manager.theme-dark.theme-setting-baseColorPreset-maa {
--icon-color: white;
}
body.css-settings-manager.theme-dark.theme-setting-baseColorPreset-mangu {
--text-on-accent: white;
--nav-item-color-active: white;
--icon-color: white;
--icon-color-focused: white;
--theme-color-controlLightweightActive: white;
--theme-color-controlActive: white;
--theme-color-controlHover: white;
--vault-profile-color-hover: white;
--nav-item-color-hover: white;
--interactive-accent: var(--theme-color-baseLightened25);
}
/* #endregion */
/* #region Colors */
/* #region Base color */
body {
/* Base all theme colours off these */
/* The base HSL variables will be overridden by Style Settings if installed, otherwise they'll use the accent colour. */
--base-h: var(--accent-h);
--base-s: var(--accent-s);
--base-l: var(--accent-l);
/* The base color, derived from either the accent or the Style Settings base color. Note that this may be overridden by one of the preset colours below. */
--theme-color-base: hsl(var(--base-h), var(--base-s), var(--base-l));
}
/* #endregion */
/* #region Preset base colours, if users don't want to set an exact colour. */
body.css-settings-manager.theme-setting-baseColorPreset-accent {
--base-h: var(--accent-h);
--base-s: var(--accent-s);
--base-l: var(--accent-l);
}
body.css-settings-manager.theme-setting-baseColorPreset-whero {
--base-h: 0;
--base-s: 65%;
--base-l: 50%;
}
body.css-settings-manager.theme-setting-baseColorPreset-karaka {
--base-h: 30;
--base-s: 80%;
--base-l: 50%;
}
body.css-settings-manager.theme-setting-baseColorPreset-koowhai {
--base-h: 52;
--base-s: 70%;
--base-l: 45%;
}
body.css-settings-manager.theme-setting-baseColorPreset-kaakaariki {
--base-h: 90;
--base-s: 65%;
--base-l: 39%;
}
body.css-settings-manager.theme-setting-baseColorPreset-kaarikioorangi {
--base-h: 175;
--base-s: 57%;
--base-l: 40%;
}
body.css-settings-manager.theme-setting-baseColorPreset-kahurangi {
--base-h: 215;
--base-s: 67%;
--base-l: 45%;
}
body.css-settings-manager.theme-setting-baseColorPreset-waiporoporo {
--base-h: 275;
--base-s: 50%;
--base-l: 40%;
}
body.css-settings-manager.theme-setting-baseColorPreset-maawhero {
--base-h: 335;
--base-s: 60%;
--base-l: 60%;
}
body.css-settings-manager.theme-setting-baseColorPreset-mangu {
--base-h: 240;
--base-s: 5%;
--base-l: 20%;
}
body.css-settings-manager.theme-setting-baseColorPreset-maa {
--base-h: 50;
--base-s: 0%;
--base-l: 95%;
}
body.css-settings-manager.theme-setting-baseColorPreset-kiwikiwi {
--base-h: 40;
--base-s: 5%;
--base-l: 50%;
}
/* #endregion */
/* #region Base colour variants */
body {
--theme-color-baseLightened95: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * 0.95));
--theme-color-baseLightened85: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * 0.85));
--theme-color-baseLightened80: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * 0.8));
--theme-color-baseLightened70: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * 0.7));
--theme-color-baseLightened60: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * 0.6));
--theme-color-baseLightened40: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * 0.4));
--theme-color-baseLightened25: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * 0.25));
--theme-color-baseLightened12: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * 0.125));
--theme-color-baseDarkened12: color-mix(in srgb,
var(--theme-color-base),
black calc(100% * 0.125));
--theme-color-baseDarkened25: color-mix(in srgb,
var(--theme-color-base),
black calc(100% * 0.25));
--theme-color-baseDarkened40: color-mix(in srgb,
var(--theme-color-base),
black calc(100% * 0.4));
--theme-color-baseDarkened60: color-mix(in srgb,
var(--theme-color-base),
black calc(100% * 0.6));
--theme-color-baseDarkened70: color-mix(in srgb,
var(--theme-color-base),
black calc(100% * 0.7));
--theme-color-baseDarkened80: color-mix(in srgb,
var(--theme-color-base),
black calc(100% * 0.8));
--theme-color-baseDarkened85: color-mix(in srgb,
var(--theme-color-base),
black calc(100% * 0.85));
--theme-color-baseDarkened90: color-mix(in srgb,
var(--theme-color-base),
black calc(100% * 0.9));
/* Base color with transparency */
--theme-color-baseTransparent75: hsl(from var(--theme-color-base) h s l / 0.75);
--theme-color-baseTransparent50: hsl(from var(--theme-color-base) h s l / 0.5);
--theme-color-baseTransparent35: hsl(from var(--theme-color-base) h s l / 0.35);
--theme-color-baseTransparent25: hsl(from var(--theme-color-base) h s l / 0.25);
--theme-color-baseTransparent12: hsl(from var(--theme-color-base) h s l / 0.12);
--theme-color-baseTransparent06: hsl(from var(--theme-color-base) h s l / 0.06);
--theme-color-lightenTransparent75: hsl(from white h s l / 0.75);
--theme-color-lightenTransparent50: hsl(from white h s l / 0.5);
--theme-color-lightenTransparent25: hsl(from white h s l / 0.25);
--theme-color-lightenTransparent12: hsl(from white h s l / 0.12);
--theme-color-lightenTransparent06: hsl(from white h s l / 0.06);
--theme-color-darkenTransparent75: hsl(from black h s l / 0.75);
--theme-color-darkenTransparent50: hsl(from black h s l / 0.5);
--theme-color-darkenTransparent25: hsl(from black h s l / 0.25);
--theme-color-darkenTransparent12: hsl(from black h s l / 0.12);
--theme-color-darkenTransparent06: hsl(from black h s l / 0.06);
/* #endregion */
/* #region Gradients */
--theme-gradient-topToBottom: linear-gradient(0deg,
var(--theme-color-gradientTop) 0%,
var(--theme-color-gradientBottom) 100%);
--theme-gradient-bottomToTop: linear-gradient(0deg,
var(--theme-color-gradientBottom) 0%,
var(--theme-color-gradientTop) 100%);
--theme-gradient-cardSet: linear-gradient(0deg,
var(--theme-color-gradientCardSetBottom) 0%,
var(--theme-color-gradientCardSetTop) 100%);
--theme-gradient-cardSetGenerated: linear-gradient(0deg,
var(--theme-color-gradientCardSetGeneratedBottom) 0%,
var(--theme-color-gradientCardSetGeneratedTop) 100%);
--theme-gradient-DarkenedTopToBottom: linear-gradient(0deg,
var(--theme-color-gradientDarkenedTop) 0%,
var(--theme-color-gradientDarkenedBottom) 100%);
/* 0 for flat colour with no gradient. 1 for extreme gradient. Default to 0.2, */
--theme-value-gradientContrast: 0.2;
}
/* #endregion */
/* #region Hues derived from base color */
.theme-light,
.theme-dark {
--color-red: hsl(from var(--theme-color-base) 356 s l);
--color-orange: hsl(from var(--theme-color-base) 27 s l);
--color-yellow: hsl(from var(--theme-color-base) 57 s l);
--color-green: hsl(from var(--theme-color-base) 124 s l);
--color-cyan: hsl(from var(--theme-color-base) 179 s l);
--color-blue: hsl(from var(--theme-color-base) 219 s l);
--color-purple: hsl(from var(--theme-color-base) 253 s l);
--color-pink: hsl(from var(--theme-color-base) 331 s l);
--theme-color-redDarkened: hsl(from var(--color-red) h calc(s * 1.5) calc(l * 0.5));
--theme-color-redLightened: hsl(from var(--color-red) h calc(s * 1.5) calc(l * 1.5));
--theme-color-orangeDarkened: hsl(from var(--color-orange) h calc(s * 1.5) calc(l * 0.5));
--theme-color-orangeLightened: hsl(from var(--color-orange) h calc(s * 1.5) calc(l * 1.5));
--theme-color-yellowDarkened: hsl(from var(--color-yellow) h calc(s * 1.5) calc(l * 0.5));
--theme-color-yellowLightened: hsl(from var(--color-yellow) h calc(s * 1.5) calc(l * 1.5));
--theme-color-greenDarkened: hsl(from var(--color-green) h calc(s * 1.5) calc(l * 0.5));
--theme-color-greenLightened: hsl(from var(--color-green) h calc(s * 1.5) calc(l * 1.5));
--theme-color-cyanDarkened: hsl(from var(--color-cyan) h calc(s * 1.5) calc(l * 0.5));
--theme-color-cyanLightened: hsl(from var(--color-cyan) h calc(s * 1.5) calc(l * 1.5));
--theme-color-blueDarkened: hsl(from var(--color-blue) h calc(s * 1.5) calc(l * 0.5));
--theme-color-blueLightened: hsl(from var(--color-blue) h calc(s * 1.5) calc(l * 1.5));
--theme-color-purpleDarkened: hsl(from var(--color-purple) h calc(s * 1.5) calc(l * 0.5));
--theme-color-purpleLightened: hsl(from var(--color-purple) h calc(s * 1.5) calc(l * 1.5));
--theme-color-pinkDarkened: hsl(from var(--color-pink) h calc(s * 1.5) calc(l * 0.5));
--theme-color-pinkLightened: hsl(from var(--color-pink) h calc(s * 1.5) calc(l * 1.5));
--theme-color-redTransparent25: hsl(from var(--color-red) h s l / 0.25);
--theme-color-redTransparent75: hsl(from var(--color-red) h s l / 0.75);
--theme-color-orangeTransparent25: hsl(from var(--color-orange) h s l / 0.25);
--theme-color-orangeTransparent75: hsl(from var(--color-orange) h s l / 0.75);
--theme-color-yellowTransparent25: hsl(from var(--color-yellow) h s l / 0.25);
--theme-color-yellowTransparent75: hsl(from var(--color-yellow) h s l / 0.75);
--theme-color-greenTransparent25: hsl(from var(--color-green) h s l / 0.25);
--theme-color-greenTransparent75: hsl(from var(--color-green) h s l / 0.75);
}
/* #endregion */
/* #region Light mode */
.theme-light,
.theme-light .theme-dark {
/* Using `.theme-light .theme-dark` here because the Minimal Theme Settings plugin inserts `.theme-dark` into the DOM for the ribbon and left sidebar for `Light mode background contrast -> High contrast` even when the Minimal Theme isn't active. As lots of people will have Minimal Theme Settings enabled while using Kakano, I override it here. */
/* Built-in variables */
--background-modifier-active-hover-alt: var(--theme-color-baseLightened25);
--background-modifier-active-hover: var(--theme-color-baseLightened60);
--background-modifier-border-focus: var(--theme-color-base);
--background-modifier-border: var(--theme-color-baseLightened25);
--background-modifier-cover: var(--theme-color-darkenTransparent25);
--background-modifier-hover: var(--theme-color-base);
--blockquote-border-color: var(--theme-color-baseLightened80);
--caret-color: hsl(var(--accent-h), 150%, 50%);
--collapse-icon-color: var(--theme-color-base);
--collapse-icon-color-collapsed: var(--theme-color-base);
--empty-pane-color: var(--theme-color-baseDarkened70);
--icon-color-focused: white;
--icon-color-hover: hsl(var(--base-h),
calc(var(--base-s) * 0.2),
calc(var(--base-l) * 1.5));
--icon-color-hover: white;
--icon-color: var(--theme-color-base);
--modal-background: var(--theme-color-baseLightened80);
--nav-collapse-icon-color-collapsed: var(--theme-color-baseTransparent75);
--nav-collapse-icon-color: var(--theme-color-baseTransparent75);
--nav-indentation-guide-color: var(--theme-color-baseTransparent25);
--nav-item-background-active: var(--theme-color-base);
--nav-item-background-selected: var(--theme-color-baseTransparent25);
--nav-item-color-active: var(--theme-color-baseLightened80);
--nav-item-color: var(--theme-color-baseDarkened80);
--nav-item-color-hover: white;
--raised-background: var(--theme-color-baseLightened80);
--search-clear-button-color: var(--theme-color-base);
--search-icon-color: var(--theme-color-base);
--status-bar-text-color: black;
--tab-background-active: var(--background-primary);
--tab-background-inactive: var(--theme-color-baseLightened80);
--tab-text-color: var(--theme-color-baseTransparent50);
--tab-text-color-active: var(--theme-color-baseTransparent50);
--tab-text-color-focused: var(--theme-color-baseDarkened25);
--tab-text-color-focused-active: var(--theme-color-baseDarkened25);
--tag-color: hsl(var(--accent-h),
calc(var(--accent-s)),
calc(var(--accent-l) * 0.9));
--tag-background: hsl(var(--accent-h),
var(--accent-s),
var(--accent-l),
0.15);
--text-normal: var(--theme-color-baseDarkened90);
--text-faint: var(--theme-color-baseDarkened70);
--background-prompt: var(--theme-color-baseLightened95);
--interactive-accent: var(--theme-color-base);
--interactive-accent-hover: var(--theme-color-base);
--table-border-color: var(--theme-color-baseLightened60);
--table-header-border-color: var(--theme-color-baseLightened60);
--metadata-property-background: var(--theme-color-baseLightened95);
--metadata-property-background-hover: var(--theme-color-baseTransparent12);
--metadata-label-background-active: var(--theme-color-baseLightened95);
--metadata-input-background-active: var(--theme-color-baseLightened95);
/* Background for content area */
--background-primary: white;
/* Background for controls area */
--background-secondary: var(--theme-color-baseLightened60);
/* New variables for this theme */
--theme-color-activeLineHighlight: var(--theme-color-baseTransparent12);
--theme-color-audioRecordingActive: var(--theme-color-redDarkened);
--theme-color-blockId: var(--theme-color-baseLightened);
--theme-color-calendarDayBg: var(--theme-color-lightenTransparent75);
--theme-color-communityItemBg: var(--theme-color-baseLightened80);
--theme-color-communityItemBgActive: var(--theme-color-base);
--theme-color-communityItemBgHover: var(--theme-color-baseLightened60);
--theme-color-communityItemBgSelected: var(--theme-color-baseLightened12);
--theme-color-contentItemBg: var(--theme-color-lightenTransparent50);
--theme-color-contentItemBgActive: var(--theme-color-base);
--theme-color-contentItemBgHover: var(--theme-color-lightenTransparent25);
--theme-color-controlBg: var(--theme-color-baseLightened95);
--theme-color-controlLowWeightBg: var(--theme-color-lightenTransparent50);
--theme-color-controlContentArea: var(--theme-color-base);
--theme-color-controlContentAreaHover: var(--theme-color-baseLightened80);
--theme-color-controlUIHover: var(--theme-color-baseLightened60);
--theme-color-controlUISelected: var(--theme-color-baseLightened80);
--theme-color-controlSetBg: var(--theme-color-baseLightened80);
--theme-color-controlText: var(--theme-color-baseDarkened70);
--theme-color-controlTextHover: var(--theme-color-baseLightened80);
--theme-color-controlLightweightActive: var(--theme-color-baseLightened95);
--theme-color-emptyStateBg: var(--theme-color-baseLightened80);
--theme-color-graphLine: black;
/* Canvas doesn't support color-mix */
--theme-color-hotkey: var(--theme-color-base);
--theme-color-inputBorder: var(--theme-color-baseLightened25);
--theme-color-inputPlaceholder: var(--theme-color-base);
--theme-color-interactiveActive: var(--theme-color-baseLightened25);
--theme-color-kanbanLaneBg: var(--theme-color-baseLightened80);
--theme-color-log: var(--theme-color-baseDarkened80);
--theme-color-logBg: var(--theme-color-baseLightened25);
--theme-color-modalContentBg: var(--theme-color-baseLightened60);
--theme-color-menuBg: var(--theme-color-baseLightened80);
--theme-color-mobileToolbarBg: var(--theme-color-baseLightened80);
--theme-color-navFileTag: var(--theme-color-base);
--theme-color-navFileTagActive: var(--nav-item-color-active);
--theme-color-navFileTagActiveBorder: var(--nav-item-color-active);
--theme-color-navFileTagBorder: var(--theme-color-base);
--theme-color-notice: var(--theme-color-baseLightened95);
--theme-color-noticeBg: var(--theme-color-baseDarkened80);
--theme-color-promptInstructions: var(--theme-color-baseDarkened40);
--theme-color-settingsBg: var(--theme-color-baseLightened80);
--theme-color-settingsBgStripe: var(--theme-color-baseLightened95);
--theme-color-settingsGroupBg: var(--theme-color-lightenTransparent50);
--theme-color-suggestionBg: var(--theme-color-baseLightened85);
--theme-color-switcherBgActive: var(--theme-color-base);
--theme-color-tagHover: hsl(var(--accent-h),
calc(var(--accent-s) * 1.02),
calc(var(--accent-l) * 1.035));
--theme-color-tagBgHover: hsl(var(--accent-h),
calc(var(--accent-s) * 1.02),
calc(var(--accent-l) * 1.035),
0.1);
--theme-color-tagBgSidebar: hsl(var(--accent-h),
calc(var(--accent-s) * 1.2),
calc(var(--accent-l) * 1),
0.15);
--theme-color-tagBgSidebarHover: hsl(var(--accent-h),
calc(var(--accent-s) * 1.22),
calc(var(--accent-l) * 1.15),
0.15);
--theme-color-tagSidebar: hsl(var(--accent-h),
calc(var(--accent-s) * 1),
calc(var(--accent-l) * 0.4));
--theme-color-tagSidebarHover: hsl(var(--accent-h),
calc(var(--accent-s) * 1.02),
calc(var(--accent-l) * 0.46));
--theme-color-textMeta: var(--theme-color-base);
--theme-color-textSelected: var(--theme-color-baseLightened80);
--theme-color-warningBg: var(--theme-color-baseLightened95);
--theme-color-gradientCardsetTop: var(--theme-color-baseTransparent12);
--theme-color-gradientCardsetBottom: var(--theme-color-baseTransparent06);
--theme-color-gradientCardsetGeneratedTop: var(--theme-color-baseTransparent35);
--theme-color-gradientCardsetGeneratedBottom: var(--theme-color-baseTransparent12);
--theme-color-shadow: var(--theme-color-baseDarkened25);
--theme-shadow-control: 0 1px 2px hsl(var(--base-h),
calc(var(--base-s) * 1.5),
calc(var(--base-l) * 0.25),
0.5);
--theme-shadow-input: 0 1px 2px hsl(var(--base-h),
calc(var(--base-s) * 1.5),
calc(var(--base-l) * 0.25),
0.2),
0 3.4px 6.7px hsl(var(--base-h),
calc(var(--base-s) * 1),
calc(var(--base-l) * 0.25),
0.15),
0 15px 30px hsl(var(--base-h),
calc(var(--base-s) * 0.75),
calc(var(--base-l) * 0.25),
0.05);
/*
Gradient from contrast setting
At 0 contrast, this sets both ends of the gradient to base color plus 50% white
At 0.2 (default), it matches --theme-color-baseLightened60 and --theme-color-baseLightened40
At 1, the top is white, bottom is base color
*/
--theme-color-gradientTop: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * (0.5 + 0.5 * var(--theme-value-gradientContrast))));
--theme-color-gradientBottom: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * (0.5 - 0.5 * var(--theme-value-gradientContrast))));
--theme-color-gradientDarkenedTop: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * (0.5 - 0.25 * var(--theme-value-gradientContrast))));
--theme-color-gradientDarkenedBottom: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * (0.5 - 1.25 * var(--theme-value-gradientContrast))));
}
body.theme-light.theme-setting-customGradient {
--theme-color-gradientTop: color-mix(in srgb,
var(--theme-color-customGradientBaseTop),
white calc(100% * (0.5 + 0.5 * var(--theme-value-gradientContrast))));
--theme-color-gradientBottom: color-mix(in srgb,
var(--theme-color-customGradientBaseBottom),
white calc(100% * (0.5 - 0.5 * var(--theme-value-gradientContrast))));
}
.theme-light,
.theme-light .metadata-property:not([data-property-key="tags"]) {
--pill-background: var(--theme-color-baseTransparent75);
--pill-background-hover: var(--theme-color-base);
--pill-color: white;
--pill-color-hover: white;
--pill-color-remove: var(--theme-color-baseLightened80);
--pill-color-remove-hover: var(--theme-color-baseLightened80);
--pill-background-remove-hover: var(--theme-color-baseLightened25);
}
.theme-light.theme-setting-lightModeNoteBgNearWhite {
--background-primary: color-mix(in srgb,
var(--theme-color-base),
white calc(100% * 0.97));
}
/* #endregion */
/* #region Dark mode */
.theme-dark,
.theme-dark .theme-light {
/* Built-in variables */
--background-modifier-active-hover-alt: var(--theme-color-baseDarkened25);
--background-modifier-active-hover: var(--theme-color-baseDarkened70);
--background-modifier-border-focus: var(--theme-color-baseDarkened25);
--background-modifier-border: var(--theme-color-baseDarkened25);
--background-modifier-cover: var(--theme-color-darkenTransparent50);
--background-modifier-hover: var(--theme-color-base);
--blockquote-border-color: var(--theme-color-baseDarkened80);
--caret-color: hsl(var(--accent-h), 150%, 80%);
--collapse-icon-color: var(--theme-color-base);
--collapse-icon-color-collapsed: var(--theme-color-base);
--empty-pane-color: var(--theme-color-baseDarkened70);
--icon-color-focused: var(--theme-color-baseLightened80);
--icon-color-hover: hsl(var(--base-h),
calc(var(--base-s) * 0.2),
calc(var(--base-l) * 1.5));
--icon-color-hover: var(--theme-color-baseLightened80);
--icon-color: var(--theme-color-base);
--modal-background: var(--theme-color-baseDarkened80);
--nav-collapse-icon-color-collapsed: var(--theme-color-baseTransparent75);
--nav-collapse-icon-color: var(--theme-color-baseTransparent75);
--nav-indentation-guide-color: var(--theme-color-baseTransparent25);
--nav-item-background-active: var(--theme-color-base);
--nav-item-background-selected: var(--theme-color-baseTransparent25);
--nav-item-color-active: var(--theme-color-baseDarkened80);
--nav-item-color: var(--theme-color-baseLightened60);
--nav-item-color-hover: black;
--raised-background: var(--theme-color-baseDarkened80);
--search-clear-button-color: var(--theme-color-base);
--search-icon-color: var(--theme-color-base);
--tag-color: hsl(var(--accent-h),
calc(var(--accent-s) * 1.1),
calc(var(--accent-l) * 1.2));
--tag-background: hsl(var(--accent-h), var(--accent-s), var(--accent-l), 0.3);
--tab-background-active: var(--background-primary);
--tab-background-inactive: var(--theme-color-baseDarkened85);
--tab-text-color: var(--theme-color-baseTransparent50);
--tab-text-color-active: var(--theme-color-baseTransparent50);
--tab-text-color-focused: var(--theme-color-baseLightened25);
--tab-text-color-focused-active: var(--theme-color-baseLightened25);
--text-normal: var(--theme-color-baseLightened60);
--text-faint: var(--theme-color-baseLightened25);
--background-prompt: var(--theme-color-baseDarkened80);
--interactive-accent: var(--theme-color-base);
--table-border-color: var(--theme-color-baseDarkened70);
--table-header-border-color: var(--theme-color-baseDarkened70);
--metadata-property-background: var(--theme-color-baseDarkened80);
--metadata-property-background-hover: var(--theme-color-baseTransparent12);
--metadata-label-background-active: var(--theme-color-baseDarkened90);
--metadata-input-background-active: var(--theme-color-baseDarkened90);
/* Background for content area */
/* This may be overridden below by the theme-value-darkModeNoteBg style setting. */
--background-primary: color-mix(in srgb,
var(--theme-color-base),
black calc(100% * 0.95));
/* Background for controls area */
--background-secondary: var(--theme-color-baseDarkened70);
/* New variables for this theme */
--theme-color-activeLineHighlight: var(--theme-color-baseTransparent12);
--theme-color-audioRecordingActive: var(--theme-color-redLightened);
--theme-color-blockId: var(--theme-color-baseDarkened25);
--theme-color-calendarDayBg: var(--theme-color-darkenTransparent50);
--theme-color-communityItemBg: var(--theme-color-baseDarkened80);
--theme-color-communityItemBgActive: var(--theme-color-base);
--theme-color-communityItemBgHover: var(--theme-color-baseDarkened70);
--theme-color-communityItemBgSelected: var(--theme-color-baseDarkened12);
--theme-color-contentItemBg: rgb(0, 0, 0, 0.2);
--theme-color-contentItemBgActive: var(--theme-color-base);
--theme-color-contentItemBgHover: rgb(0, 0, 0, 0.1);
--theme-color-controlBg: var(--theme-color-baseDarkened25);
--theme-color-controlLowWeightBg: var(--theme-color-darkenTransparent25);
--theme-color-controlContentArea: var(--theme-color-baseLightened60);
--theme-color-controlContentAreaHover: var(--theme-color-baseDarkened80);
--theme-color-controlUIHover: var(--theme-color-baseDarkened70);
--theme-color-controlUISelected: var(--theme-color-baseDarkened70);
--theme-color-controlSetBg: var(--theme-color-baseDarkened80);
--theme-color-controlText: var(--theme-color-baseLightened60);
--theme-color-controlTextHover: var(--theme-color-baseDarkened80);
--theme-color-controlLightweightActive: var(--theme-color-baseLightened95);
--theme-color-emptyStateBg: var(--theme-color-baseDarkened80);
--theme-color-graphLine: white;
/* Canvas doesn't support color-mix */
--theme-color-hotkey: var(--theme-color-base);
--theme-color-inputBorder: var(--theme-color-baseLightened25);
--theme-color-inputPlaceholder: var(--theme-color-base);
--theme-color-interactiveActive: var(--theme-color-baseDarkened25);
--theme-color-kanbanLaneBg: var(--theme-color-baseDarkened80);
--theme-color-log: var(--theme-color-baseLightened80);
--theme-color-logBg: var(--theme-color-baseDarkened25);
--theme-color-menuBg: var(--theme-color-baseDarkened80);
--theme-color-mobileToolbarBg: var(--theme-color-baseDarkened80);
--theme-color-modalContentBg: var(--theme-color-baseDarkened70);
--theme-color-navFileTag: var(--theme-color-baseDarkened25);
--theme-color-navFileTagActive: var(--nav-item-color-active);
--theme-color-navFileTagActiveBorder: var(--nav-item-color-active);
--theme-color-navFileTagBorder: var(--theme-color-baseDarkened25);
--theme-color-notice: var(--theme-color-baseDarkened90);
--theme-color-noticeBg: var(--theme-color-baseLightened95);
--theme-color-promptInstructions: var(--theme-color-baseLightened40);
--theme-color-settingsBg: var(--theme-color-baseDarkened80);
--theme-color-settingsBgStripe: var(--theme-color-baseDarkened90);
--theme-color-settingsGroupBg: var(--theme-color-darkenTransparent50);
--theme-color-suggestionBg: var(--theme-color-baseDarkened85);
--theme-color-switcherBgActive: var(--theme-color-base);
--theme-color-tagHover: hsl(var(--accent-h),
calc(var(--accent-s) * 1.05),
calc(var(--accent-l) * 1.29));
--theme-color-tagBgHover: hsl(var(--accent-h),
calc(var(--accent-s) * 1.2),
calc(var(--accent-l) * 0.8),
0.75);
--theme-color-tagBgSidebar: hsl(var(--accent-h),
calc(var(--accent-s) * 1.2),
calc(var(--accent-l) * 0.25),
0.5);
--theme-color-tagBgSidebarHover: hsl(var(--accent-h),
calc(var(--accent-s) * 1.1),
calc(var(--accent-l) * 0.8),
0.5);
--theme-color-tagSidebar: hsl(var(--accent-h),
calc(var(--accent-s) * 1.1),
calc(var(--accent-l) * 1.2));
--theme-color-tagSidebarHover: hsl(var(--accent-h),
calc(var(--accent-s) * 1.4),
calc(var(--accent-l) * 1.3));
--theme-color-textMeta: var(--theme-color-base);
--theme-color-textSelected: var(--theme-color-baseDarkened80);
--theme-color-warningBg: var(--theme-color-baseLightened95);
--theme-color-gradientCardsetTop: var(--theme-color-baseTransparent06);
--theme-color-gradientCardsetBottom: var(--theme-color-baseTransparent12);
--theme-color-gradientCardsetGeneratedTop: var(--theme-color-baseTransparent12);
--theme-color-gradientCardsetGeneratedBottom: var(--theme-color-baseTransparent25);
--theme-color-shadow: var(--theme-color-baseDarkened90);
--theme-shadow-control: 0px 1px 2px hsl(var(--base-h),
calc(var(--base-s) * 0.1),
calc(var(--base-l) * 0.1),
0.1);
--theme-shadow-input: 0px 1px 2px hsl(var(--base-h),
calc(var(--base-s) * 0.5),
calc(var(--base-l) * 0.1),
0.5),
0px 3.4px 6.7px hsl(var(--base-h),
calc(var(--base-s) * 1),
calc(var(--base-l) * 0.1),
0.25),
0px 15px 30px hsl(var(--base-h),
calc(var(--base-s) * 0.75),
calc(var(--base-l) * 0.1),
0.15);
/*
Gradient from contrast setting
At 0 contrast, this sets both ends of the gradient to base color plus 70% black
At 0.2 (default), it matches --theme-color-baseDarkened70 and --theme-color-baseDarkened80
At 1, the top is base color, bottom pure black
*/
--theme-color-gradientTop: color-mix(in srgb,
var(--theme-color-base),
black calc(100% * (0.7 - 0.5 * var(--theme-value-gradientContrast))));
--theme-color-gradientBottom: color-mix(in srgb,
var(--theme-color-base),
black calc(100% * (0.7 + 0.5 * var(--theme-value-gradientContrast))));
}
body.theme-dark.theme-setting-customGradient {
--theme-color-gradientTop: color-mix(in srgb,
var(--theme-color-customGradientBaseTop),
black calc(100% * (0.7 - 0.5 * var(--theme-value-gradientContrast))));
--theme-color-gradientBottom: color-mix(in srgb,
var(--theme-color-customGradientBaseBottom),
black calc(100% * (0.7 + 0.5 * var(--theme-value-gradientContrast))));
}
.theme-dark,
.theme-dark .metadata-property:not([data-property-key="tags"]) {
--pill-background: var(--theme-color-baseTransparent75);
--pill-background-hover: var(--theme-color-base);
--pill-color: black;
--pill-color-hover: black;
--pill-color-remove: var(--theme-color-baseDarkened80);
--pill-color-remove-hover: var(--theme-color-baseDarkened80);
--pill-background-remove-hover: var(--theme-color-baseDarkened25);
}
.theme-dark.theme-value-darkModeNoteBgFullBlack {
/* Override note background when specified by style settings. */
/* There's no equivalent of this for light mode. */
--background-primary: black;
}
/* #endregion */
/* #region Light/dark modes */
body {
--bases-cards-cover-background: light-dark(var(--theme-color-darkenTransparent06), var(--theme-color-lightenTransparent06));
--icon-color-active: light-dark(white, black);
--theme-color-calendarBg: light-dark(var(--theme-color-baseLightened85), var(--theme-color-baseDarkened80));
--theme-color-control: light-dark(var(--theme-color-baseDarkened70),
var(--theme-color-baseLightened60));
--theme-color-controlActive: light-dark(var(--theme-color-baseLightened95), var(--theme-color-baseDarkened90));
--theme-color-controlHover: light-dark(var(--theme-color-baseLightened95), var(--theme-color-baseDarkened90));
--theme-color-controlBgActive: var(--theme-color-base);
--theme-color-controlBgHover: light-dark(var(--theme-color-baseLightened40), var(--theme-color-baseDarkened40));
--theme-color-controlHasActiveMenu: light-dark(var(--theme-color-baseLightened80), var(--theme-color-baseDarkened80));
--theme-color-jiraIssueInfoBg: light-dark(var(--theme-color-blueLightened),
var(--theme-color-blueDarkened));
--theme-color-jiraIssueWarningBg: light-dark(control var(--theme-color-yellowLightened),
var(--theme-color-yellowDarkened));
--theme-color-jiraIssueSuccessBg: light-dark(var(--theme-color-greenLightened),
var(--theme-color-greenDarkened));
--theme-color-jiraIssueStatusBg: light-dark(var(--theme-color-baseDarkened90),
var(--theme-color-baseDarkened90));
--theme-color-jiraIssueDeleteBg: var(--color-red);
--theme-color-jiraIssueStatus: var(--theme-color-baseLightened95);
--theme-color-jiraIssueDangerBg: var(--theme-color-redTransparent25);
--theme-color-jiraIssueDanger: white;
--theme-color-jiraIssueTableStripe: light-dark(var(--theme-color-lightenTransparent50),
var(--theme-color-darkenTransparent50));
--theme-color-lineNumbers: light-dark(var(--theme-color-baseLightened60), var(--theme-color-baseDarkened60));
--theme-color-navigationButtonBgHover: var(--theme-color-base);
--theme-color-queryComponentBg: var(--theme-color-baseTransparent12);
--theme-color-tabNavBg: light-dark(var(--theme-color-baseLightened60), var(--theme-color-baseDarkened60));
--theme-color-tabNavActiveBg: light-dark(var(--theme-color-baseLightened70), var(--theme-color-baseDarkened70));
}
/* #endregion */
/* #region Shadows */
body.theme-light,
.theme-light .theme-dark,
body.theme-dark,
.theme-dark .theme-light {
--input-shadow: var(--theme-shadow-control);
--shadow-l: 0 0 0.2rem color-mix(in srgb, var(--theme-color-shadow) 2%, transparent),
0 0.2rem 0.4rem color-mix(in srgb, var(--theme-color-shadow) 4%, transparent),
0 0.4rem 1.2rem color-mix(in srgb, var(--theme-color-shadow) 6%, transparent),
0 1.2rem 2rem color-mix(in srgb, var(--theme-color-shadow) 8%, transparent),
0 2rem 4rem color-mix(in srgb, var(--theme-color-shadow) 10%, transparent);
--shadow-s: 0 0 0.05rem color-mix(in srgb, var(--theme-color-shadow) 2%, transparent),
0 0.05rem 0.1rem color-mix(in srgb, var(--theme-color-shadow) 4%, transparent),
0 0.1rem 0.3rem color-mix(in srgb, var(--theme-color-shadow) 6%, transparent),
0 0.3rem 0.5rem color-mix(in srgb, var(--theme-color-shadow) 8%, transparent),
0 0.5rem 1rem color-mix(in srgb, var(--theme-color-shadow) 10%, transparent);
--theme-shadow-indent: 0 0 0.2rem color-mix(in srgb, var(--theme-color-shadow) 3%, transparent),
0 0 0.2rem color-mix(in srgb, var(--theme-color-shadow) 6%, transparent),
0 0 0.4rem color-mix(in srgb, var(--theme-color-shadow) 9%, transparent),
0 0 1.2rem color-mix(in srgb, var(--theme-color-shadow) 12%, transparent),
0 0 2rem color-mix(in srgb, var(--theme-color-shadow) 15%, transparent);
--theme-shadow-indent-small: 0 0 0.05rem color-mix(in srgb, var(--theme-color-shadow) 4%, transparent),
0 0 0.2rem color-mix(in srgb, var(--theme-color-shadow) 8%, transparent),
0 0 0.6rem color-mix(in srgb, var(--theme-color-shadow) 12%, transparent),
0 0 1rem color-mix(in srgb, var(--theme-color-shadow) 16%, transparent),
0 0 2rem color-mix(in srgb, var(--theme-color-shadow) 20%, transparent);
}
/* #endregion */
/* #endregion */
/* #endregion */
/* #region Keyframe animations */
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* #endregion */
/* #region Typography for user's content - src/typography_content.css */
/* #region Fonts */
body {
/* Use the system font by default for both text and interface, unless user has chosen something else. */
--font-default: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-monospace-default: ui-monospace, Menlo, SFMono-Regular, Consolas,
"Roboto Mono", "Source Code Pro", monospace;
--font-text-theme: var(--font-default);
/* TODO: move interface font elsewhere, and scope this indpendently i.e. not just on body */
--font-interface-theme: var(--font-default);
--font-monospace-theme: var(--font-monospace-default);
}
/* Source mode uses monospace font */
.markdown-source-view:not(.is-live-preview) .cm-scroller {
font-family: var(--font-monospace);
}
/* Apply a different font for headings if set in Style Settings */
.markdown-source-view.is-live-preview .cm-line.HyperMD-header,
.markdown-source-view.is-live-preview .HyperMD-list-line .cm-header,
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
font-family: var(--theme-setting-headingFont), var(--font-text-theme);
}
/* #endregion */
/* #region Body text */
body {
--line-height-normal: 1.6;
--link-decoration-thickness: 1px;
--link-unresolved-decoration-style: dashed;
}
/* #endregion */
/* #region Headings */
body {
/* Headings are scaled according to a scale factor, which can be change with Style Settings */
--theme-value-headingScaleFactor: 1.2;
/* Default value if Style Setting snot used */
--h1-size: calc(var(--theme-value-headingScaleFactor) * var(--h2-size));
--h2-size: calc(var(--theme-value-headingScaleFactor) * var(--h3-size));
--h3-size: calc(var(--theme-value-headingScaleFactor) * var(--h4-size));
--h4-size: calc(var(--theme-value-headingScaleFactor) * var(--h5-size));
--h5-size: calc(var(--theme-value-headingScaleFactor) * var(--h6-size));
--h6-size: var(--font-text-size);
/* Heading weights increase inversely with size, to maintain distinction from body text */
--h1-weight: 100;
--h2-weight: 200;
--h3-weight: 300;
--h4-weight: 400;
--h5-weight: 500;
--h6-weight: 500;
--h1-line-height: var(--line-height-normal);
--h2-line-height: var(--line-height-normal);
--h3-line-height: var(--line-height-normal);
--h4-line-height: var(--line-height-normal);
--h5-line-height: var(--line-height-normal);
--h6-line-height: var(--line-height-normal);
}
body.theme-setting-headingScaleFactor1point067 {
--theme-value-headingScaleFactor: 1.067;
}
body.theme-setting-headingScaleFactor1point125 {
--theme-value-headingScaleFactor: 1.125;
}
body.theme-setting-headingScaleFactor1point2 {
--theme-value-headingScaleFactor: 1.2;
}
body.theme-setting-headingScaleFactor1point25 {
--theme-value-headingScaleFactor: 1.25;
}
body.theme-setting-headingScaleFactor1point333 {
--theme-value-headingScaleFactor: 1.333;
}
body.theme-setting-headingScaleFactor1point414 {
--theme-value-headingScaleFactor: 1.414;
}
body.theme-setting-headingScaleFactor1point5 {
--theme-value-headingScaleFactor: 1.5;
}
body.theme-setting-headingScaleFactor1point618 {
--theme-value-headingScaleFactor: 1.618;
}
/* Space before headings... */
.markdown-source-view .cm-line.HyperMD-header,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header,
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
padding: var(--heading-spacing) 0 0 0;
margin: 0;
}
/* ...except when they immediately follow another heading */
.markdown-source-view :is(.cm-line.HyperMD-header-1,
.cm-line.HyperMD-header-2,
.cm-line.HyperMD-header-3,
.cm-line.HyperMD-header-4,
.cm-line.HyperMD-header-5,
.cm-line.HyperMD-header-6)+ :is(.cm-line.HyperMD-header-1,
.cm-line.HyperMD-header-2,
.cm-line.HyperMD-header-3,
.cm-line.HyperMD-header-4,
.cm-line.HyperMD-header-5,
.cm-line.HyperMD-header-6) {
/* Using padding as margin has an !important applied elsewhere */
padding-top: 0;
}
.markdown-rendered :is(.markdown-preview-section > div:has(h1),
.markdown-preview-section > div:has(h2),
.markdown-preview-section > div:has(h3),
.markdown-preview-section > div:has(h4),
.markdown-preview-section > div:has(h5),
.markdown-preview-section > div:has(h6))+ :is(.markdown-preview-section > div:has(h1),
.markdown-preview-section > div:has(h2),
.markdown-preview-section > div:has(h3),
.markdown-preview-section > div:has(h4),
.markdown-preview-section > div:has(h5),
.markdown-preview-section > div:has(h6)) :is(h1, h2, h3, h4, h5, h6) {
padding-top: 0;
}
/* ...or they're first on the page */
.markdown-source-view .cm-line.HyperMD-header:first-child,
.markdown-rendered .mod-header+div>h1 {
padding-top: 0;
}
/* #endregion */
/* #region Headings - phone */
/* More compact typography to fit more on small screens */
.is-phone {
--theme-value-headingScaleFactorPhone: 1.2;
--h1-size: calc(var(--theme-value-headingScaleFactorPhone) * var(--h2-size));
--h2-size: calc(var(--theme-value-headingScaleFactorPhone) * var(--h3-size));
--h3-size: calc(var(--theme-value-headingScaleFactorPhone) * var(--h4-size));
--h4-size: calc(var(--theme-value-headingScaleFactorPhone) * var(--h5-size));
--h5-size: calc(var(--theme-value-headingScaleFactorPhone) * var(--h6-size));
--line-height-normal: 1.5;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point067 {
--theme-value-headingScaleFactorPhone: 1.067;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point125 {
--theme-value-headingScaleFactorPhone: 1.125;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point2 {
--theme-value-headingScaleFactorPhone: 1.2;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point25 {
--theme-value-headingScaleFactorPhone: 1.25;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point333 {
--theme-value-headingScaleFactorPhone: 1.333;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point414 {
--theme-value-headingScaleFactorPhone: 1.414;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point5 {
--theme-value-headingScaleFactorPhone: 1.5;
}
body.is-phone.theme-setting-headingScaleFactorPhone1point618 {
--theme-value-headingScaleFactorPhone: 1.618;
}
/* #endregion */
/* #region Headings - sidedock */
/* Smaller font size for markdown documents in sidebar */
.mod-sidedock {
--h1-size: calc(var(--theme-value-headingScaleFactor) * var(--h2-size));
--h2-size: calc(var(--theme-value-headingScaleFactor) * var(--h3-size));
--h3-size: calc(var(--theme-value-headingScaleFactor) * var(--h4-size));
--h4-size: calc(var(--theme-value-headingScaleFactor) * var(--h5-size));
--h5-size: calc(var(--theme-value-headingScaleFactor) * var(--h6-size));
--h6-size: calc(var(--theme-value-sidebarFontScalingFactor) * var(--font-text-size));
}
/* #endregion */
/* #region Inline title */
body {
/* Inline title isn't huge, but has greater weight than headings */
--inline-title-size: var(--h3-size);
--inline-title-weight: var(--h4-weight);
--inline-title-line-height: var(--line-height-normal);
--inline-title-style: normal;
--inline-title-variant: normal;
--inline-title-font: inherit;
--inline-title-color: inherit;
}
/* #endregion */
/* #region Links */
.markdown-source-view.is-live-preview .is-unresolved .cm-link,
.markdown-reading-view h1 a {
--text-decoration-color: var(--link-color);
--text-decoration-style: dashed;
}
.markdown-source-view .cm-link .cm-underline,
.markdown-source-view .cm-hmd-internal-link .cm-underline,
.markdown-reading-view h1 a,
.markdown-reading-view h2 a,
.markdown-reading-view h3 a,
.markdown-reading-view h4 a,
.markdown-reading-view h5 a,
.markdown-reading-view h6 a {
text-underline-offset: 0.125em;
}
@media (hover: hover) {
.markdown-source-view.is-live-preview span.cm-link:hover,
.markdown-source-view.is-live-preview span.cm-hmd-internal-link:hover:has(.cm-underline) {
/* Don't add double underline */
text-decoration: none;
}
}
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-1 .cm-link,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-1 .cm-hmd-internal-link,
.markdown-reading-view h1 a {
--link-decoration-thickness: max(calc(var(--h1-weight) / 400 * 1px), 1px);
}
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-2 .cm-link,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-2 .cm-hmd-internal-link,
.markdown-reading-view h2 a {
--link-decoration-thickness: max(calc(var(--h2-weight) / 400 * 1px), 1px);
}
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-3 .cm-link,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-3 .cm-hmd-internal-link,
.markdown-reading-view h3 a {
--link-decoration-thickness: max(calc(var(--h3-weight) / 400 * 1px), 1px);
}
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-4 .cm-link,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-4 .cm-hmd-internal-link,
.markdown-reading-view h4 a {
--link-decoration-thickness: max(calc(var(--h4-weight) / 400 * 1px), 1px);
}
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-5 .cm-link,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-5 .cm-hmd-internal-link,
.markdown-reading-view h5 a {
--link-decoration-thickness: max(calc(var(--h5-weight) / 400 * 1px), 1px);
}
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-6 .cm-link,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-6 .cm-hmd-internal-link,
.markdown-reading-view h6 a {
--link-decoration-thickness: max(calc(var(--h6-weight) / 400 * 1px), 1px);
}
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-1 .is-unresolved .cm-link,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-1 .cm-hmd-internal-link .is-unresolved,
.markdown-reading-view h1 a.is-unresolved {
--link-decoration-thickness: max(calc(var(--h1-weight) / 200 * 2px), 1px);
}
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-2 .is-unresolved .cm-link,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-2 .cm-hmd-internal-link .is-unresolved,
.markdown-reading-view h2 a.is-unresolved {
--link-decoration-thickness: max(calc(var(--h2-weight) / 400 * 2px), 1px);
}
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-3 .is-unresolved .cm-link,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-3 .cm-hmd-internal-link .is-unresolved,
.markdown-reading-view h3 a.is-unresolved {
--link-decoration-thickness: max(calc(var(--h3-weight) / 400 * 2px), 1px);
}
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-4 .is-unresolved .cm-link,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-4 .cm-hmd-internal-link .is-unresolved,
.markdown-reading-view h4 a.is-unresolved {
--link-decoration-thickness: max(calc(var(--h4-weight) / 400 * 2px), 1px);
}
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-5 .is-unresolved .cm-link,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-5 .cm-hmd-internal-link .is-unresolved,
.markdown-reading-view h5 a.is-unresolved {
--link-decoration-thickness: max(calc(var(--h5-weight) / 400 * 2px), 1px);
}
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-6 .is-unresolved .cm-link,
.markdown-source-view.is-live-preview .cm-line.HyperMD-header-6 .cm-hmd-internal-link .is-unresolved,
.markdown-reading-view h6 a.is-unresolved {
--link-decoration-thickness: max(calc(var(--h6-weight) / 400 * 2px), 1px);
}
/* #endregion */
/* #region Tables */
.markdown-rendered th,
.markdown-rendered table:not(.calendar) thead tr>th:nth-child(2n + 2) {
background: var(--theme-color-tableHeaderBg);
}
.cm-html-embed td,
.markdown-rendered td,
.cm-html-embed th,
.markdown-rendered th {
padding: 0.375em 0.75em;
}
.is-mobile .cm-table-widget .markdown-rendered table:not(.calendar) thead tr>th:last-child {
/* Make room for the edit button to not overlap. */
padding-inline-end: 2em;
}
.is-mobile .markdown-source-view .cm-table-widget .edit-block-button {
top: 0;
right: 0;
}
/* #endregion */
/* #region Blocks and Callouts */
.callout {
/* Embeds and dataviews would normally have a background colour, but we skip it inside a callout because it can look messy. */
--embed-background: transparent;
display: flex;
flex-direction: column;
gap: 0.75em;
}
.callout .callout-title {
margin-inline-start: -0.5em;
}
.callout.is-collapsible .callout-title {
cursor: pointer;
}
.callout .callout-content {
margin-top: 0;
padding-top: 0;
& p:first-child {
margin-top: 0;
}
& p:last-child {
margin-bottom: 0;
}
}
@media (hover: hover) {
.callout.is-collapsible .callout-title:hover {
text-decoration: underline;
}
}
.markdown-source-view.mod-cm6 .edit-block-button,
.markdown-source-view .code-block-flair {
top: 0.25em;
right: 0.25em;
}
.markdown-source-view.mod-cm6 .code-block-flair {
width: auto;
min-width: 2em;
text-wrap: nowrap;
}
body:not(.is-mobile) {
.cm-content .cm-embed-block[contenteditable="false"]:has(.edit-block-button) {
position: relative;
}
/* Move edit controls to the sidebar outside the block */
.cm-content .cm-embed-block .edit-block-button,
.cm-content .bases-embed .edit-block-button,
.markdown-source-view.mod-cm6 .code-block-flair {
top: 0;
right: auto;
left: 100%;
}
.markdown-source-view.mod-cm6.is-readable-line-width .cm-content .cm-embed-block .edit-block-button,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-content .bases-embed .edit-block-button,
.markdown-source-view.mod-cm6.is-readable-line-width .markdown-source-view.mod-cm6 .code-block-flair {
left: calc(100% + 0.5em);
}
}
.markdown-source-view.is-live-preview span.cm-blockid {
background: transparent;
border-radius: var(--radius-s);
border: solid 1px var(--theme-color-blockId);
color: var(--theme-color-blockId);
line-height: 1.25em;
padding: 0 0.25em;
margin-top: 0;
vertical-align: baseline;
}
/* #endregion */
/* #region Lists */
.list-bullet:after {
border: solid 1px var(--list-marker-color);
}
body.theme-setting-differentiateBulletLevels {
.markdown-source-view.mod-cm6 .HyperMD-list-line-1 .list-bullet:after,
.markdown-preview-view .el-ul>ul>li>.list-bullet:after {
background-color: var(--list-marker-color);
}
.markdown-source-view.mod-cm6 .HyperMD-list-line-2 .list-bullet:after,
.markdown-preview-view .el-ul>ul>li>ul>li>.list-bullet:after {
background-color: transparent;
}
.markdown-source-view.mod-cm6 .HyperMD-list-line-3 .list-bullet:after,
.markdown-preview-view .el-ul>ul>li>ul>li>ul>li>.list-bullet:after {
border-radius: 0;
background-color: var(--list-marker-color);
}
.markdown-source-view.mod-cm6 .HyperMD-list-line-4 .list-bullet:after,
.markdown-preview-view .el-ul>ul>li>ul>li>ul>li>ul>li>.list-bullet:after {
border-radius: 0;
background-color: transparent;
}
}
/* #endregion */
/* #region Diagrams */
.mermaid {
--theme-color-mermaidBorder: black;
text-align: center;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle,
.mermaid svg[aria-roledescription="pie"] .legend rect {
stroke: var(--theme-color-mermaidBorder) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(1),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(1) rect {
fill: var(--color-red) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(2),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(2) rect {
fill: var(--color-cyan) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(3),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(3) rect {
fill: var(--color-orange) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(4),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(4) rect {
fill: var(--color-blue) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(5),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(5) rect {
fill: var(--color-yellow) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(6),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(6) rect {
fill: var(--color-purple) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(7),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(7) rect {
fill: var(--color-green) !important;
}
.mermaid svg[aria-roledescription="pie"] .pieCircle:nth-of-type(8),
.mermaid svg[aria-roledescription="pie"] .legend:nth-of-type(8) rect {
fill: var(--color-pink) !important;
}
/* #endregion */
/* #region Other typography */
::spelling-error {
text-decoration: wavy var(--color-red) underline from-font;
}
/* Horizontal rule */
.markdown-source-view.mod-cm6 hr,
.markdown-rendered hr {
display: flex;
align-items: center;
border: none;
border-top: var(--hr-thickness) solid;
border-color: var(--hr-color);
margin: 2em 0;
}
/* #endregion */
/* #region Callouts */
.markdown-source-view .HyperMD-quote,
.callout {
font-weight: 300;
}
/* #endregion */
/* #region Code */
/* Inline code */
.cm-s-obsidian .cm-inline-code:not(.cm-formatting),
.markdown-rendered code {
padding: 0.25em 0.5em;
}
/* Code blocks */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock:not(.HyperMD-list-line) {
/* Matched to --callout-padding */
padding-inline-start: 1.5em;
padding-inline-end: 1.5em;
}
body.theme-setting-codeBlockLineNumbers {
.markdown-source-view.mod-cm6 {
.cm-line.HyperMD-codeblock-begin+.cm-line.HyperMD-codeblock:not(.HyperMD-codeblock-end) {
counter-reset: codeLineCount 0;
}
.cm-line.HyperMD-codeblock-begin+.cm-line.HyperMD-codeblock,
.cm-line.HyperMD-codeblock+.cm-line.HyperMD-codeblock:not(.HyperMD-codeblock-end) {
counter-increment: codeLineCount 1;
position: relative;
padding-inline-start: 1em;
}
.cm-line.HyperMD-codeblock-begin+.cm-line.HyperMD-codeblock:before,
.cm-line.HyperMD-codeblock+.cm-line.HyperMD-codeblock:not(.HyperMD-codeblock-end):before {
content: counter(codeLineCount, decimal) " ";
text-align: right;
width: 3em;
margin-inline-end: 1em;
align-items: flex-end;
justify-content: flex-end;
opacity: 0.25;
font-size: 0.8em;
}
}
}
/* #endregion */
/* #region Invalid frontmatter */
.cm-line:has(.cm-hmd-frontmatter .is-invalid) {
background-color: rgba(var(--callout-error), 0.1);
}
.metadata-error-container {
background: none;
padding: 0;
border-radius: 0;
}
/* #endregion */
/* #region Markdown Checkboxes */
.markdown-source-view.mod-cm6 .task-list-label .task-list-item-checkbox {
border-radius: var(--checkbox-radius);
border-color: var(--theme-color-controlContentArea);
/* Needs room at left for collapse indicator */
margin-inline-start: 1em;
margin-inline-end: 0.25em;
}
@media (hover: hover) {
.markdown-source-view.mod-cm6 .task-list-label .task-list-item-checkbox:hover {
border-color: var(--theme-color-controlContentArea);
background-color: var(--theme-color-controlContentAreaHover);
}
}
/* #endregion */
/* #region Footnotes */
.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(--link-color);
}
.cm-s-obsidian span.cm-footref.cm-hmd-barelink,
.cm-s-obsidian span.cm-blockid {
color: var(--link-color);
}
.cm-s-obsidian .cm-line.HyperMD-footnote span.cm-hmd-footnote,
.cm-s-obsidian .cm-line.HyperMD-footnote span.cm-hmd-footnote .cm-underline {
color: var(--link-color);
}
/* #endregion */
/* #endregion */
/* #region Typography for markup and controls associated with user's text - src/typography_meta.css */
/* Markdown formatting shown while editing e.g. ### for headings */
.cm-formatting.cm-formatting-header {
color: var(--theme-color-textMeta);
font-weight: normal;
vertical-align: middle;
}
/* Line numbers */
.markdown-source-view.mod-cm6 .cm-gutters {
color: var(--theme-color-lineNumbers) !important;
}
/* Highlight active line setting */
body.theme-setting-highlightActiveLine {
.markdown-source-view.mod-cm6 {
.cm-active:not(.HyperMD-codeblock) {
background-color: var(--theme-color-activeLineHighlight);
border-radius: var(--radius-xs);
}
}
}
/* #region Collapse indicators */
/* TODO: re-do collapse indicators */
/* Appearance consistent with navigation controls */
/* .collapse-indicator,
.list-collapse-indicator {
background-color: var(--background-primary);
border-radius: 100%;
display: flex;
justify-content: center;
align-content: center;
width: var(--theme-length-collapseIndicatorSize);
height: var(--theme-length-collapseIndicatorSize);
border: none;
color: var(--theme-color-control);
flex-wrap: wrap;
}
@media (hover: hover) {
.collapse-indicator:hover,
.cm-fold-indicator:hover .collapse-indicator,
.list-collapse-indicator:hover,
.view-content .cm-fold-indicator:hover svg.svg-icon,
.view-content .list-collapse-indicator:hover svg.svg-icon,
.view-content .collapse-indicator:hover svg.svg-icon {
color: var(--theme-color-controlTextHover);
background-color: var(--theme-color-navigationButtonBgHover);
}
}
.markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator {
height: var(--theme-length-collapseIndicatorSize);
top: 50%;
margin-top: calc(-0.5 * var(--theme-length-collapseIndicatorSize));
padding: 0;
}
.markdown-source-view.mod-cm6.is-live-preview
.cm-line:not(.HyperMD-task-line)
.cm-fold-indicator
.collapse-indicator {
margin-inline-end: 1.75rem;
padding-inline-end: 0;
transform: translateX(1.25rem);
}
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
position: relative;
}
.markdown-preview-view .heading-collapse-indicator {
margin-inline-start: -2rem;
top: auto;
}
.markdown-preview-view h1 .heading-collapse-indicator {
bottom: 0.5em;
}
.markdown-preview-view h2 .heading-collapse-indicator {
bottom: 0.45em;
}
.markdown-preview-view h3 .heading-collapse-indicator {
bottom: 0.4em;
}
.markdown-preview-view h4 .heading-collapse-indicator {
bottom: 0.3em;
}
.markdown-preview-view h5 .heading-collapse-indicator {
bottom: 0.2em;
}
.markdown-preview-view h6 .heading-collapse-indicator {
bottom: 0.1em;
}
.markdown-rendered .list-collapse-indicator {
padding-inline-end: 0;
}
li.is-collapsed .list-bullet:after,
.is-collapsed ~ .cm-formatting-list .list-bullet:after {
box-shadow: none;
}
@media (hover: 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: none;
}
.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 {
box-shadow: none;
}
} */
/* #endregion */
/* #region Embeds */
.markdown-embed,
.bases-embed,
.pdf-embed,
.media-embed,
.internal-query {
background-color: var(--embed-background);
border-bottom: var(--embed-border-bottom);
border-inline-start: var(--embed-border-left);
border-radius: var(--radius-m);
border-inline-end: var(--embed-border-right);
border-top: var(--embed-border-top);
margin: 0;
}
/* I'm treating images as a special case, because they don't have any controls and a colored surround would often be distracting. */
.internal-embed.image-embed {
background: transparent;
border: none;
border-radius: 0;
margin: 0;
}
.markdown-embed .embed-title {
font-size: var(--font-ui-small);
font-weight: var(--nav-item-weight-hover);
color: var(--background-modifier-hover);
margin: 0 2rem 0 0;
align-items: center;
display: none;
}
body.theme-setting-embeddedNoteTitleVisibilityHide .embed-title {
display: none;
}
body.theme-setting-embeddedNoteTitleVisibilityShow .internal-embed:has(.embed-title:not(:empty)) {
padding-top: 0.5rem;
}
body.theme-setting-embeddedNoteTitleVisibilityShow .embed-title {
display: flex;
}
@media (hover: hover) {
body.theme-setting-embeddedNoteTitleVisibilityHover .internal-embed:has(.embed-title:not(:empty)) {
padding-top: 1.5rem;
}
body.theme-setting-embeddedNoteTitleVisibilityHover .internal-embed:has(.embed-title:not(:empty)):hover .embed-title {
display: flex;
position: absolute;
top: 0.5rem;
left: 1rem;
}
}
.markdown-embed .markdown-embed-content {
height: fit-content;
max-height: var(--embed-max-height);
overflow: auto;
}
.markdown-source-view.mod-cm6 .cm-content>.markdown-embed[contenteditable="false"]:has(.markdown-embed-link) {
position: relative;
}
.markdown-embed-link {
position: absolute;
top: 0;
right: auto;
left: calc(100% + 0.25em);
}
.file-embed-link {
position: absolute;
top: 0;
right: 0;
}
/* #region Image positioning and styling */
/* We'll sometimes have images inside columns, so we'd like them to fit into the available space. */
.markdown-source-view.mod-cm6 .cm-content>img,
.markdown-source-view.mod-cm6 .cm-content .image-embed img,
.markdown-source-view.mod-cm6 .cm-content>.cm-line .cm-html-embed img {
max-width: 100%;
}
body.theme-setting-enableImageAdjustmentWithAltText {
/* Center images */
.markdown-source-view.mod-cm6 .cm-content>img[alt~=center],
.markdown-source-view.mod-cm6 .cm-content .image-embed[alt~=center] img,
.markdown-source-view.mod-cm6 .cm-content>.cm-line .cm-html-embed img[alt~=center] {
display: block;
margin: 0 auto !important;
}
.markdown-preview-view img[alt~=center] {
display: block;
margin: 0 auto;
}
/* Float images left/right */
/* Unfortunately, floats make live preview mode confused about how to assign line numbers. Left/right floating only applies to reading view */
.markdown-preview-view img[alt~=right] {
margin: 0 0 1em 1em !important;
float: right;
}
.markdown-preview-view img[alt~=left] {
margin: 0 1em 1em 0 !important;
float: left;
}
/* Round corners of images */
.markdown-source-view.mod-cm6 .cm-content>img[alt~=round],
.markdown-source-view.mod-cm6 .cm-content .image-embed[alt~=round] img,
.markdown-source-view.mod-cm6 .cm-content>.cm-line .cm-html-embed img[alt~=round],
.markdown-preview-view img[alt~=round],
.markdown-preview-view .image-embed[alt~=round] img {
border-radius: 0.5em;
}
.markdown-source-view.mod-cm6 .cm-content>img[alt~=circle],
.markdown-source-view.mod-cm6 .cm-content .image-embed[alt~=circle] img,
.markdown-source-view.mod-cm6 .cm-content>.cm-line .cm-html-embed img[alt~=circle],
.markdown-preview-view img[alt~=circle],
.markdown-preview-view .image-embed[alt~=circle] img {
border-radius: var(--theme-length-fullBorderRadius);
}
}
body.theme-setting-centerImages {
.markdown-source-view.mod-cm6 .cm-content>img,
.markdown-source-view.mod-cm6 .cm-content .image-embed img,
.markdown-source-view.mod-cm6 .cm-content>.cm-line .cm-html-embed img {
display: block;
margin: 0 auto !important;
}
.markdown-preview-view img {
display: block;
margin: 0 auto;
}
}
/* #endregion */
/* Audio embed */
/* Not technically an embed, but when we've opened an audio file directly in fiule navigation we ant to see the same controls. */
.video-container>audio {
background-color: var(--embed-background);
border-bottom: var(--embed-border-bottom);
border-inline-start: var(--embed-border-left);
border-radius: var(--radius-m);
border-inline-end: var(--embed-border-right);
border-top: var(--embed-border-top);
margin: 0;
}
.markdown-source-view.mod-cm6 .cm-content>.media-embed:has(> audio) {
display: flex;
}
audio::-webkit-media-controls-enclosure {
border: none;
background: transparent;
padding: 0;
border-radius: 0;
max-height: none;
line-height: 0;
}
audio::-webkit-media-controls-panel {
background: transparent;
border: none;
padding: 0.25rem;
border-radius: var(--radius-m);
}
/* Video embed */
/* Not technically an embed, but when we've opened an audio file directly in fiule navigation we ant to see the same controls. */
.cm-html-embed>video,
.markdown-reading-view video {
background-color: var(--embed-background);
border-bottom: var(--embed-border-bottom);
border-inline-start: var(--embed-border-left);
border-radius: var(--radius-m);
border-inline-end: var(--embed-border-right);
border-top: var(--embed-border-top);
margin: 0;
}
/* Markdown embed e.g. embedded note */
.markdown-embed .markdown-rendered .mod-header {
margin-bottom: 0;
}
/* PDF embed */
.pdf-toolbar {
background-color: transparent;
border-bottom: none;
padding: 0.25em 2.25em 0.25em 0.25em;
}
.pdf-container {
background-color: var(--pdf-background);
margin: 0 0.25em 0.25em 0.25em;
border-bottom-left-radius: 0.3em;
border-bottom-right-radius: 0.3em;
}
.markdown-source-view.mod-cm6 .pdf-embed .edit-block-button {
background: transparent;
top: 0.25em;
}
/* Query embed */
.internal-query .search-result-container {
padding: 0 1em 1em 1em;
max-height: 800px;
overflow: auto;
border: none;
background-color: transparent;
border-radius: 0;
}
.internal-query .internal-query-header {
padding: 0.5em 0 0.5em 1em;
color: var(--text-normal);
display: flex;
justify-content: flex-start;
align-items: center;
}
@media (hover: hover) {
.markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget):has(> .internal-query):hover {
box-shadow: none;
}
}
/* Iframe embed */
.markdown-source-view iframe,
.markdown-reading-view iframe {
background-color: var(--embed-background);
border-bottom: var(--embed-border-bottom);
border-inline-start: var(--embed-border-left);
border-radius: var(--radius-m);
border-inline-end: var(--embed-border-right);
border-top: var(--embed-border-top);
height: 20em;
width: 100%;
}
/* #endregion */
/* #endregion */
/* #region Typography for Obsidian UI - src/typography_ui.css */
/* #region Fonts */
body {
/* Use the system font by default for both text and interface, unless user has chosen something else. */
--font-default: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-interface-theme: var(--font-default);
--font-ui-smaller: 0.7rem;
--font-ui-small: 0.8rem;
--font-ui-medium: 1rem;
--font-ui-large: 1.125rem;
--line-height-normal: 1.5;
--line-height-tight: 1.3;
}
/* #endregion */
/* #region Headings - Settings */
/* Standard size for settings headings */
.modal.mod-settings .setting-item-heading,
.modal.mod-settings h2,
.modal.mod-settings h3,
.modal.mod-settings h4,
summary.excalidraw-setting-h1 {
padding: 0;
margin: 1em 0 0.5rem 0;
font-size: var(--font-ui-large);
font-weight: var(--font-semibold);
.setting-item-name {
font-size: inherit;
}
}
/* #endregion */
/* #endregion */
/* #region Alternative Checkboxes */
body.theme-setting-enableBuiltInAlternativeCheckboxes {
/* Alternate incomplete states */
& input.task-list-item-checkbox[data-task="/"]:checked,
& input.task-list-item-checkbox[data-task="<"]:checked,
& input.task-list-item-checkbox[data-task="!"]:checked,
& input.task-list-item-checkbox[data-task="?"]:checked,
& li[data-task="/"]>input:checked,
& li[data-task="<"]>input:checked,
& li[data-task="!"]>input:checked,
& li[data-task="?"]>input:checked,
& li[data-task="/"]>p>input:checked,
& li[data-task="<"]>p>input:checked,
& li[data-task="!"]>p>input:checked,
& li[data-task="?"]>p>input:checked {
background-image: none;
background-color: transparent;
position: relative;
overflow: hidden;
}
& input[data-task="/"]:checked:after,
& input[data-task="<"]:checked:after,
& input[data-task="!"]:checked:after,
& input[data-task="?"]:checked:after,
& li[data-task="/"]>input:checked:after,
& li[data-task="<"]>input:checked:after,
& li[data-task="!"]>input:checked:after,
& li[data-task="?"]>input:checked:after,
& li[data-task="/"]>p>input:checked:after,
& li[data-task="<"]>p>input:checked:after,
& li[data-task="!"]>p>input:checked:after,
& li[data-task="?"]>p>input:checked:after {
content: "";
top: -1px;
left: -1px;
position: absolute;
width: var(--checkbox-size);
height: var(--checkbox-size);
display: block;
background-color: var(--theme-color-controlContentArea);
-webkit-mask-position: 50% 50%;
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
}
& input[data-task="/"]:checked:after,
& li[data-task="/"]>input:checked:after,
& li[data-task="/"]>p>input:checked:after {
-webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="%23000000"><polyline points="12,-12 48,-12 48,36 12,36" transform="rotate(45) translate(5,-12)"></polyline></g></g></svg>');
}
& input[data-task="<"]:checked:after,
& li[data-task="<"]>input:checked:after,
& li[data-task="<"]>p>input:checked:after {
-webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="%23000000"><polyline points="15,4.5 6,12 15,19.5 16.75,17.5 10,12 16.75,6.5"></polyline></g></g></svg>');
}
& input[data-task="!"]:checked:after,
& li[data-task="!"]>input:checked:after,
& li[data-task="!"]>p>input:checked:after {
-webkit-mask-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" x2="12" y1="5" y2="13"/><line x1="12" x2="12" y1="19" y2="19"/></svg>');
}
& input[data-task="?"]:checked:after,
& li[data-task="?"]>input:checked:after,
& li[data-task="?"]>p>input:checked:after {
-webkit-mask-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5,6.852c0.463,-1.049 1.493,-2.872 4.5,-2.852c3.957,0.026 5.001,2.617 5,4.5c-0.002,2.952 -4.963,3.463 -5,7.5"/><path d="M12.25,20l-0.443,-0"/></svg>');
}
/* Complete states */
& .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"],
& .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"],
& .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"],
.bases-tbody input[type=checkbox][data-indeterminate="true"]:not(:checked) {
text-decoration: var(--checklist-done-decoration);
color: var(--checklist-done-color);
}
& input[data-task="x"]:checked,
& li[data-task="x"]>input:checked,
& li[data-task="x"]>p>input:checked,
& input[data-task="X"]:checked,
& li[data-task="X"]>input:checked,
& li[data-task="X"]>p>input:checked,
& input.task-list-item-checkbox[data-task=">"]:checked,
& li[data-task=">"]>input:checked,
& li[data-task=">"]>p>input:checked,
& input.task-list-item-checkbox[data-task="-"]:checked,
& li[data-task="-"]>input:checked,
& li[data-task="-"]>p>input:checked,
.bases-tbody input[type=checkbox][data-indeterminate="true"]:not(:checked) {
background-image: none;
border-color: var(--theme-color-controlContentArea);
position: relative;
overflow: hidden;
background-color: var(--theme-color-controlContentArea);
color: white;
}
& input[data-task="x"]:checked:after,
& li[data-task="x"]>input:checked:after,
& li[data-task="x"]>p>input:checked:after,
& input[data-task="x"]:checked:after,
& li[data-task="x"]>input:checked:after,
& li[data-task="x"]>p>input:checked:after,
& input[data-task="-"]:checked:after,
& li[data-task="-"]>input:checked:after,
& li[data-task="-"]>p>input:checked:after,
& input[data-task=">"]:checked:after,
& li[data-task=">"]>input:checked:after,
& li[data-task=">"]>p>input:checked:after,
.bases-tbody input[type=checkbox][data-indeterminate="true"]:not(:checked):after {
content: "";
top: -1px;
left: -1px;
position: absolute;
width: var(--checkbox-size);
height: var(--checkbox-size);
display: block;
background-color: var(--checkbox-marker-color);
-webkit-mask-repeat: no-repeat;
}
& input[data-task="x"]:checked:after,
& li[data-task="x"]>input:checked:after,
& li[data-task="x"]>p>input:checked:after {
-webkit-mask-position: 52% 52%;
-webkit-mask-size: 65%;
-webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23000000"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
}
& input[data-task="-"]:checked:after,
& li[data-task="-"]>input:checked:after,
& li[data-task="-"]>p>input:checked:after,
.bases-tbody input[type=checkbox][data-indeterminate="true"]:not(:checked):after {
-webkit-mask-position: 50% 50%;
-webkit-mask-size: 100%;
-webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="%23000000"><polyline points="4,10.5 20,10.5 20,13.5 4,13.5"></polyline></g></g></svg>');
}
& input[data-task=">"]:checked:after,
& li[data-task=">"]>input:checked:after,
& li[data-task=">"]>p>input:checked:after {
-webkit-mask-position: 50% 50%;
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="%23000000"><polyline points="9,4.5 18,12 9,19.5 7.25,17.5 14,12 7.25,6.5"></polyline></g></g></svg>');
}
}
/* #endregion */
/* #region Mobile */
.is-mobile {
--file-margins: 0;
--mobile-sidebar-background: transparent;
--view-header-height: auto;
--input-radius: 0.5rem;
--clickable-icon-radius: 0.25rem;
--setting-items-radius: 0;
--setting-items-border-width: 0;
--setting-items-border-color: var(--background-modifier-border);
}
.is-mobile.is-dark,
.is-mobile.is-light {
--setting-items-background: transparent;
}
.is-phone {
/* I'm pretty sure this isn't used on mobile */
--divider-width: 0;
--metadata-divider-width: 0;
}
.is-phone .metadata-container {
--metadata-divider-width: 0;
}
/* Mobile workspace */
.is-mobile .workspace>.mod-root {
padding: var(--safe-area-inset-top) var(--safe-area-inset-right) 0 var(--safe-area-inset-left);
background: transparent;
}
.is-mobile .workspace-split.mod-root .workspace-tabs.mod-top {
padding: 0;
}
.is-mobile .view-actions {
padding: 0;
}
.is-phone .view-header .view-header-left .view-action {
/* TODO: fix position for this when there's space left/right of main tab */
}
.is-mobile .view-header-title-container {
height: auto;
padding-inline-start: 0;
}
.is-phone .workspace .mod-root .workspace-tabs .workspace-tab-container {
background: transparent;
border-radius: 0;
box-shadow: none;
}
.is-phone .workspace-fake-target-overlay:not(.is-in-sidebar) .workspace-tabs .workspace-leaf,
.is-phone .mod-root .workspace-tabs .workspace-leaf {
background: transparent;
}
.is-phone .workspace-leaf.mod-active .view-header {
background: transparent;
}
.is-phone .view-header {
padding: 0;
gap: 0 1rem;
border-bottom: none;
flex-wrap: wrap;
background: transparent;
}
.is-phone .view-header-title-container {
background-color: var(--background-primary);
border-top-left-radius: calc(var(--tab-radius) * min(var(--theme-setting-mobileHorizontalPadding), 0.5) / 0.5);
border-top-right-radius: calc(var(--tab-radius) * min(var(--theme-setting-mobileHorizontalPadding), 0.5) / 0.5);
order: 1;
width: 100%;
flex-shrink: 0;
padding: 0.5em;
}
.is-phone .workspace-split.mod-root .view-content {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: calc(var(--tab-radius) * min(var(--theme-setting-mobileHorizontalPadding), 0.5) / 0.5);
border-bottom-right-radius: calc(var(--tab-radius) * min(var(--theme-setting-mobileHorizontalPadding), 0.5) / 0.5);
margin: 0 var(--theme-spacing-mobileHorizontalSpacing);
width: auto;
}
.is-phone .markdown-source-view .cm-contentContainer {
padding-top: 0;
padding-bottom: 0;
}
.mobile-navbar {
padding-top: 0;
}
/* #region Drawers */
.workspace-drawer {
background-color: var(--background-secondary);
background: var(--theme-gradient-bottomToTop);
bottom: 0;
top: 0;
&.theme-dark {
/* Override weirdness in app theme */
background: none;
}
.nav-header {
border: none;
}
}
.is-phone .workspace-drawer {
/* & .workspace-leaf-content[data-type="file-explorer"] { */
.nav-buttons-container {
margin: 0 1rem;
padding: 0;
justify-content: space-between;
}
/* } */
}
.workspace-drawer .workspace-leaf {}
.workspace-drawer-inner {
display: flex;
gap: 1rem;
}
.workspace-drawer-active-tab-container {
gap: 1rem;
}
.workspace-drawer-tab-options,
.workspace-drawer-header,
.workspace-tab-options {
margin: 0 1rem;
padding: 0;
}
.workspace-drawer-ribbon {
border: none;
}
.workspace-drawer .nav-buttons-container .nav-action-button {
width: auto;
}
.workspace-drawer-tab-select .workspace-tab-header-inner {
border-radius: var(--input-radius);
}
.mod-tappable,
.workspace-drawer-active-tab-back-icon,
.workspace-drawer-active-tab-icon {
align-items: center;
background-color: transparent;
border-radius: var(--clickable-icon-radius);
color: var(--theme-color-control);
cursor: var(--cursor);
display: flex;
height: auto;
justify-content: center;
opacity: var(--icon-opacity);
padding: var(--size-2-2) var(--size-2-3);
transition: opacity 0.15s ease-in-out;
}
@media (hover: hover) {
.mod-tappable:hover,
.workspace-drawer-active-tab-back-icon:hover,
.workspace-drawer-active-tab-icon:hover {
/* Use hover state for feedback if using a pointing device */
color: var(--theme-color-controlHover);
background-color: var(--background-modifier-hover);
}
}
.workspace-drawer-tab-option-item {
border-radius: var(--clickable-icon-radius);
padding: var(--size-2-2) var(--size-2-3);
}
@media (hover: hover) {
.workspace-drawer-tab-option-item:hover {
color: var(--theme-color-controlHover);
background-color: var(--background-modifier-hover);
}
.workspace-drawer-tab-option-item:hover .workspace-drawer-tab-option-item-icon,
.workspace-drawer-tab-option-item:hover .workspace-drawer-tab-option-item-title {
color: var(--theme-color-controlHover);
}
}
/* These are separate elements, but I want them to look like one */
.workspace-drawer-active-tab-icon,
.workspace-drawer-active-tab-icon+.workspace-drawer-active-tab-title {
padding: var(--size-2-2) var(--size-2-3);
border-radius: var(--clickable-icon-radius);
}
/* Match height of .workspace-drawer-active-tab-icon */
.workspace-drawer-active-tab-title {
height: calc(24px + var(--size-2-2) * 2);
vertical-align: baseline;
line-height: 24px;
}
.workspace-drawer-active-tab-icon+.workspace-drawer-active-tab-title {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
/* Hide gap */
margin-inline-start: calc(-1 * var(--size-4-2));
}
.workspace-drawer-active-tab-icon:has(+ .workspace-drawer-active-tab-title) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@media (hover: hover) {
.workspace-drawer-active-tab-icon+.workspace-drawer-active-tab-title:hover,
.workspace-drawer-active-tab-icon:hover+.workspace-drawer-active-tab-title,
.workspace-drawer-active-tab-icon:has(+ .workspace-drawer-active-tab-title:hover) {
color: var(--theme-color-controlHover);
background-color: var(--background-modifier-hover);
}
}
/* #endregion */
/* #region Pull action */
.pull-action.mod-activated {
background-color: var(--interactive-accent);
color: var(--text-on-accent);
}
.pull-down-action {
top: 0.5rem;
left: 0.5rem;
right: 0.5rem;
width: auto;
max-width: 30rem;
margin: var(--safe-area-inset-top) auto 0 auto;
padding: 0.5em 1em;
text-align: center;
border-radius: var(--radius-l);
}
.pull-action {
position: absolute;
background-color: var(--background-secondary);
z-index: var(--layer-popover);
color: var(--text-muted);
font-size: 90%;
transition: background-color ease-in-out 150ms;
}
/* #endregion */
/* #region Mobile modals */
.is-phone {
--theme-length-closeButtonWidth: 2rem;
}
.is-phone .modal-container {
padding-top: max(calc(var(--safe-area-inset-top) + 2 * var(--theme-spacing-mobileHorizontalSpacing)),
calc(var(--safe-area-inset-top) + 0.5rem));
padding-bottom: max(calc(var(--safe-area-inset-bottom) + 2 * var(--theme-spacing-mobileHorizontalSpacing)),
calc(var(--safe-area-inset-bottom) + 0.5rem));
/* TODO: removing these as they spoil the slide-in effect, but need to check whether this looks right in practice before deleting */
/* padding-inline-end: max(
calc(
var(--safe-area-inset-right) + 2 *
var(--theme-spacing-mobileHorizontalSpacing)
),
calc(var(--safe-area-inset-right) + 0.5rem)
); */
/* padding-inline-start: max(
calc(
var(--safe-area-inset-left) + 2 *
var(--theme-spacing-mobileHorizontalSpacing)
),
calc(var(--safe-area-inset-left) + 0.5rem)
); */
}
.is-phone .mod-confirmation .modal {
left: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
right: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
width: min(calc(100vw - 2 * var(--theme-spacing-mobileHorizontalSpacing),
calc(100vw - 1rem)));
}
.is-phone .modal,
.is-phone .modal.mod-lg,
.is-phone .modal.mod-sidebar-layout {
border-radius: var(--modal-radius);
}
.is-phone .modal .modal-title {
margin-inline-start: 2rem;
margin-inline-end: 2rem;
}
.is-phone .modal.mod-sidebar-layout .modal-content>* {
padding: 1em calc(1em + var(--safe-area-inset-right)) 1em calc(1em + var(--safe-area-inset-left));
}
.is-phone .vertical-tab-header-group {
margin: 0 auto;
width: 100%;
.vertical-tab-header-group-items {
border-radius: var(--radius-m);
overflow: hidden;
}
}
.is-phone .modal.mod-settings .vertical-tab-header>.vertical-tab-header-group:last-child {
padding-bottom: inherit;
}
.is-phone .modal.mod-settings .vertical-tab-header {
background: transparent;
}
.is-phone .modal.mod-settings .vertical-tab-nav-item {
display: flex;
align-items: center;
height: 44px;
background-color: transparent;
padding: 0 0.75em;
margin: 0;
border-radius: 0;
border: none;
transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
}
@media (hover: hover) {
.is-phone .modal.mod-settings .vertical-tab-nav-item:hover {
background-color: var(--theme-color-controlBgHover);
.vertical-tab-nav-item-chevron {
color: var(--theme-color-controlHover);
}
}
}
.is-phone .modal.mod-sidebar-layout .modal-title {
border-bottom: none;
}
.is-phone .modal.mod-settings .vertical-tab-nav-item-chevron,
.is-phone .modal.mod-settings .vertical-tab-nav-item-title {
border-bottom: none;
}
body.is-phone.theme-setting-mobileCardsUI .modal.mod-sidebar-layout .modal-title {
padding: 0.5rem 1rem 0.5rem 1rem;
}
.is-phone .modal.mod-settings .vertical-tab-content {
background-color: var(--theme-color-settingsGroupBg);
border-radius: var(--radius-m);
padding: 0;
background: transparent;
box-shadow: none;
}
.is-phone {
& .modal .modal-nav-action {
top: 0.5rem;
}
}
.is-phone .modal .modal-nav-action.mod-cta {
color: var(--theme-color-controlText);
right: 1rem;
}
.is-phone .modal .modal-nav-action.mod-secondary {
left: 1rem;
}
.is-phone .mod-confirmation .modal .modal-title {
border-bottom: none;
}
.is-phone .modal.mod-lg .modal-close-button,
.is-phone .modal.mod-sidebar-layout .modal-close-button {
top: 0.5rem;
width: var(--theme-length-closeButtonWidth);
height: var(--theme-length-closeButtonWidth);
}
.is-phone .modal-setting-back-button {
top: 0.5rem;
padding: 0;
left: calc(2 * var(--theme-length-closeButtonWidth));
.modal-setting-back-button-icon {
width: var(--theme-length-closeButtonWidth);
height: var(--theme-length-closeButtonWidth);
}
}
body.is-phone.theme-setting-mobileCardsUI .modal.mod-sidebar-layout .modal-setting-back-button {
top: 0.5rem;
left: 2.5rem;
padding: 0;
}
body.is-phone.theme-setting-mobileCardsUI .community-modal-search-summary {
padding: 0;
}
.is-phone .modal.mod-community-modal .modal-content .modal-sidebar {
padding: 0;
}
.is-phone .mod-community-modal .community-modal-controls {
padding: 1em;
}
.is-phone .modal.mod-lg .modal-header,
.is-phone .modal.mod-sidebar-layout .modal-header {
padding: 0.5em 0;
display: flex;
justify-content: center;
border-bottom: none;
}
/* #endregion */
/* #region Mobile scaling */
/* Scale background elements smaller than foreground */
body.is-phone.theme-setting-mobileCardsUI:has(.modal-container) .workspace>.mod-root .mod-active,
body.is-phone.theme-setting-mobileCardsUI:has(.workspace-drawer) .workspace>.mod-root .mod-active {
transition: transform 0.5s ease-in-out;
transform: scale(0.95) translateY(-1.5rem);
}
body.is-phone.theme-setting-mobileCardsUI:not( :has(.modal-container:focus-within)):not(:has(.modal)) .workspace>.mod-root .mod-active {
transition: transform 0.5s ease-in-out;
transform: scale(1) translateY(0);
}
body.is-phone.theme-setting-mobileCardsUI:has(.modal-container) .workspace>.mod-root .mod-active .view-header-title-container {
border-top-left-radius: var(--tab-radius);
border-top-right-radius: var(--tab-radius);
}
body.is-phone.theme-setting-mobileCardsUI:has(.modal-container) .workspace>.mod-root .mod-active .view-content {
border-bottom-left-radius: var(--tab-radius);
border-bottom-right-radius: var(--tab-radius);
}
body.is-phone.is-phone.theme-setting-mobileCardsUI .modal-container {
padding: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
}
body.is-phone.theme-setting-mobileCardsUI .mod-confirmation .modal {
left: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
right: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
width: min(calc(100vw - 2 * var(--theme-spacing-mobileHorizontalSpacing),
calc(100vw - 1rem)));
}
/* Style similarly to mobile prompt */
body.is-phone.theme-setting-mobileCardsUI .modal.mod-sidebar-layout {
width: min(calc(100vw - 2 * var(--theme-spacing-mobileHorizontalSpacing)),
calc(100vw - 1rem));
margin-inline-end: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
margin-inline-start: max(calc(var(--theme-spacing-mobileHorizontalSpacing)), 0.5rem);
margin-top: calc(var(--safe-area-inset-top) + var(--header-height) + 1em);
border-radius: var(--radius-l) var(--radius-l) 0 0;
}
/* #endregion */
/* #region Mobile toolbar */
.mobile-toolbar {
background-color: var(--theme-color-mobileToolbarBg);
}
.mobile-toolbar-options-container.mod-fade:not(.mod-at-start):before,
.mobile-toolbar-options-container.mod-fade:not(.mod-at-end):after {
background-color: var(--theme-color-mobileToolbarBg);
background-position: 50% 50%;
background-repeat: no-repeat;
height: var(--mobile-toolbar-height);
line-height: 1em;
margin: 0;
top: 0;
width: 1rem;
z-index: 1;
}
.mobile-toolbar-options-container.mod-fade:not(.mod-at-start):before {
background-image: url('data:image/svg+xml; utf8, <svg width="8px" height="32px" viewBox="0 0 8 32" xmlns="http://www.w3.org/2000/svg" stroke="rgb(0,0,0,0.25)" fill="none" stroke-width="2"><path d="M7,1L1,16L7,31"/></svg>');
content: "";
left: 0;
}
.mobile-toolbar-options-container.mod-fade:not(.mod-at-end):after {
background-image: url('data:image/svg+xml; utf8, <svg width="8px" height="32px" viewBox="0 0 8 32" xmlns="http://www.w3.org/2000/svg" stroke="rgb(0,0,0,0.25)" fill="none" stroke-width="2"><path d="M1,1L7,16L1,31"/></svg>');
content: "";
right: var(--toolbar-option-width);
}
/* #endregion */
/* #region Mobile tab switcher */
.mobile-tab-switcher {
.mobile-tab-switcher-scroll {
background: var(--theme-gradient-DarkenedTopToBottom);
}
.mobile-tab-switcher-menubar {
border-top: 0;
background: var(--theme-color-settingsBg);
box-shadow: var(--theme-shadow-indent);
padding-top: 0;
z-index: 1;
}
.mobile-tab-group-container {
gap: 0.75em 1em;
}
}
.mobile-tab .mobile-tab-preview {
position: relative;
height: 12rem;
background-color: var(--tab-background-inactive);
border-radius: var(--tab-switcher-preview-radius);
}
.mobile-tab.is-active .mobile-tab-preview {
background-color: var(--background-primary);
}
.mobile-tab-preview-empty {
background-color: transparent;
}
/* #endregion */
/* #endregion */
/* TODO: figure out the right balance for floating nav to minimise overlap */
.is-mobile.is-floating-nav.is-phone .workspace-drawer .workspace-leaf-content .nav-header~div:last-child {
margin-bottom: calc(44px + 0.5rem);
}
.is-mobile.is-floating-nav .mod-raised {
flex-direction: column;
}
.is-mobile.is-floating-nav .mod-raised.mobiule-navbar {
flex-direction: row;
}
.is-phone .view-header .view-header-left {
height: auto;
}
.is-phone .view-header .view-action {
height: auto;
}
.is-mobile.is-floating-nav.is-ios {
--raised-mask-border-width: 0;
}
.is-phone.auto-full-screen .mod-root,
.is-phone.is-floating-nav .mod-root {
mask-image: var(--view-bottom-fade-mask);
}
.is-phone.is-floating-nav {
--view-top-fade-mask: none;
--view-bottom-fade-mask: none;
}
.is-phone.is-hidden-nav {
--view-top-fade-mask: none;
--view-bottom-fade-mask: none;
}
/* #region Workspace */
/* #region Overall workspace */
* {
scrollbar-color: var(--theme-color-baseTransparent25) transparent;
}
@media (hover: hover) {
*:hover {
scrollbar-color: var(--theme-color-baseTransparent50) transparent;
}
}
body {
position: relative;
}
.app-container {
background-color: var(--background-secondary);
background: var(--theme-gradient-bottomToTop);
}
body.theme-setting-fullWidthStatusBar .horizontal-main-container {
margin-bottom: var(--theme-length-statusBarHeight);
}
.workspace {
background: transparent;
}
.workspace-split.mod-root {
background: var(--theme-gradient-topToBottom);
padding-bottom: 1.5rem;
padding: 0 0.5em var(--theme-length-statusBarHeight) 0.5em;
}
.nav-header {
padding: 0.5rem;
}
.view-content {
position: relative;
}
/* #endregion */
/* #region Windows window frame styles */
/* #region "Obsidian frame" style */
body.mod-windows {
&.is-frameless:not(.is-hidden-frameless) {
/* Override default appearance for .mod-close, as this one simulates a system control. */
.titlebar-button.mod-close {
border-radius: 0;
width: auto;
}
}
}
/* #endregion */
/* #endregion */
/* #region Tabs */
.workspace-tabs .workspace-leaf {
background: transparent;
}
.sidebar-toggle-button,
.workspace-tabs.mod-top,
.is-focused .sidebar-toggle-button,
.is-focused .workspace-tabs.mod-top {
--tab-container-background: transparent;
}
.workspace-tab-header-container {
padding: 0;
.workspace-tab-header {
background-color: var(--tab-background-inactive);
border-radius: var(--tab-radius-active) var(--tab-radius-active) 0 0;
&.is-active {
box-shadow: var(--theme-shadow-input);
}
}
}
.workspace-tab-header-container-inner {
gap: 0.25em;
}
.workspace-tab-header-inner {
padding: 0.5rem;
}
@media (hover: hover) {
.workspace-tab-header-container {
.workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
color: var(--icon-color-focused);
background-color: var(--theme-color-tabBgInactiveHover);
}
.workspace-tab-header-inner:hover .workspace-tab-header-inner-icon {
color: var(--icon-color-focused);
opacity: var(--icon-opacity);
}
}
}
.workspace-leaf.mod-active .view-header-title {
color: var(--tab-text-color-active);
display: block;
}
.is-focused .workspace-leaf.mod-active .view-header-title {
color: var(--tab-text-color-focused-active-current);
}
.is-mobile .mod-root .workspace-tab-header-container {
min-height: 44px;
}
.workspace-split.mod-root {
.workspace-tabs.mod-top {
padding-top: 0.5rem;
}
.workspace-tab-header-container {
.workspace-tab-header::before,
.workspace-tab-header::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-inactive);
}
.workspace-tab-header.is-active::before,
.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);
}
}
}
@media (hover: hover) {
.workspace-split.mod-root {
.workspace-tab-header-container {
.workspace-tab-header:not(.is-active):hover::before,
.workspace-tab-header:not(.is-active):hover::after {
box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve) * 4) var(--background-modifier-hover);
;
}
}
}
}
.workspace .mod-root {
.workspace-tabs {
padding: 0.375em 0.5em 0.375em 0.5em;
border-radius: 0;
}
.workspace-tabs .workspace-tab-container {
background-color: var(--background-primary);
border-radius: var(--tab-radius);
box-shadow: var(--theme-shadow-input);
}
.workspace-tab-header-container-inner {
/* Define spacing on tabs to fit with radius */
padding: 0 calc(var(--tab-radius) * 2) 0 calc(var(--tab-radius) * 2);
}
.workspace-tab-header {
padding: 0;
}
.workspace-tab-header-inner::after {
/* Not sure what this is for */
background: transparent;
}
.workspace-tab-header-inner {
border-radius: var(--tab-radius-active) var(--tab-radius-active) 0 0;
container-name: root-tab;
container-type: size;
padding: 0.5rem 0.25rem 0.5rem 0.5rem;
}
.workspace-tab-header.is-active .workspace-tab-header-inner {
padding-inline-start: 0.25rem;
}
@media (hover: hover) {
.workspace-tab-header:hover .workspace-tab-header-inner {
padding-inline-start: 0.25rem;
}
}
/* Show icons for markdown tabs, unless they get too narrow. */
.workspace-tab-header[data-type="markdown"] .workspace-tab-header-inner-icon,
.workspace-tab-header[data-type="empty"] .workspace-tab-header-inner-icon {
display: none;
}
@container root-tab (min-width: 5em) {
.workspace-tab-header[data-type="markdown"] .workspace-tab-header-inner-icon,
.workspace-tab-header[data-type="empty"] .workspace-tab-header-inner-icon {
display: flex;
}
}
}
/* #region Wrap tabs setting */
body.theme-setting-wrapTabs {
.workspace-tab-header-container {
height: auto;
}
.workspace-tab-header-container-inner {
flex-wrap: wrap;
align-items: flex-start;
gap: 0.25em 0.25em;
}
.workspace .mod-root .workspace-tab-header {
min-width: 8em;
height: calc(var(--icon-size) + 1rem);
flex-basis: content;
flex-grow: 0;
order: 0;
container-type: normal;
z-index: 1;
&.is-active {
order: 1;
}
}
.workspace .mod-root .workspace-tab-header-inner {
container-type: normal;
}
}
/* #endregion */
/* #region Tabs with Obsidian navigation or data (as opposed to user content) can have a different inactive color */
body.theme-setting-distinguishNonContentTabs {
.workspace-split.mod-root {
& .workspace-tab-header-container {
.workspace-tab-header[data-type="bases"],
.workspace-tab-header[data-type="calendar"],
.workspace-tab-header[data-type="graph"],
.workspace-tab-header[data-type="localgraph"],
.workspace-tab-header[data-type="map"],
.workspace-tab-header[data-type="webviewer"] {
background-color: var(--theme-color-tabNavBg);
&:before,
&:after {
box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve)* 4) var(--theme-color-tabNavBg);
}
}
.workspace-tab-header[data-type="bases"].is-active,
.workspace-tab-header[data-type="calendar"].is-active,
.workspace-tab-header[data-type="graph"].is-active,
.workspace-tab-header[data-type="localgraph"].is-active,
.workspace-tab-header[data-type="map"].is-active,
.workspace-tab-header[data-type="webviewer"].is-active {
background-color: var(--theme-color-tabNavActiveBg);
&:before,
&:after {
box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve)* 4) var(--theme-color-tabNavActiveBg);
}
}
}
}
.workspace-leaf-content[data-type="bases"],
.workspace-leaf-content[data-type="calendar"],
.workspace-leaf-content[data-type="graph"],
.workspace-leaf-content[data-type="localgraph"],
.workspace-leaf-content[data-type="map"],
.workspace-leaf-content[data-type="webviewer"],
.is-focused .workspace-leaf.mod-active .workspace-leaf-content[data-type="bases"],
.is-focused .workspace-leaf.mod-active .workspace-leaf-content[data-type="calendar"],
.is-focused .workspace-leaf.mod-active .workspace-leaf-content[data-type="graph"],
.is-focused .workspace-leaf.mod-active .workspace-leaf-content[data-type="localgraph"],
.is-focused .workspace-leaf.mod-active .workspace-leaf-content[data-type="map"],
.is-focused .workspace-leaf.mod-active .workspace-leaf-content[data-type="webviewer"] {
.view-header {
background-color: var(--theme-color-tabNavActiveBg);
border-bottom: none;
.mod-fade:after {
display: none;
}
}
}
}
/* #endregion */
/* #endregion */
/* #region Empty state */
.workspace-leaf-content[data-type="empty"] .empty-state-title {
display: none;
}
.empty-state {
justify-content: flex-start;
padding-top: 3em;
}
.empty-state-container {
background: var(--theme-color-emptyStateBg);
border-radius: var(--radius-m);
max-height: none;
max-width: none;
padding: 1.5em 1.5em 1.5em 1.5em;
margin: 1.5em;
}
.empty-state-action-list {
display: flex;
flex-direction: column;
gap: 0.5em;
margin-top: 0;
}
.empty-state-action-list .empty-state-action {
padding: 0 1.5em;
}
.empty-state-action-list .empty-state-action.mod-close {
display: none;
}
.is-mobile {
.empty-state-action-list {
gap: 1em;
margin: 0;
}
.empty-state-action {
margin: 0;
}
}
/* #endregion */
/* #region Sidebars */
.mod-sidedock {
padding-bottom: 1em;
&:has(.workspace-sidedock-vault-profile) {
padding-bottom: 0;
}
.workspace-tabs {
gap: 0;
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
.workspace-tabs:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
}
.workspace-tab-header-container {
height: auto;
justify-content: center;
margin-top: 0;
.workspace-tab-header-container-inner {
background: var(--tab-background-inactive);
border-radius: var(--radius-s);
flex-wrap: wrap;
gap: 0;
padding: 0;
margin: 0 0 0 0;
overflow: hidden;
/* Override scrollbar color, because it forces the scrollbar to appear and we want it invisible here */
scrollbar-color: auto;
.workspace-tab-header {
border-radius: 0;
}
}
.workspace-tab-header-container-inner:has(.workspace-tab-header[data-type="markdown"].is-active:last-child) {
border-bottom-right-radius: 0;
}
.workspace-tab-header-container-inner:has(.workspace-tab-header[data-type="markdown"].is-active:first-child) {
border-bottom-left-radius: 0;
}
}
.workspace-tabs.mod-top>.workspace-tab-header-container {
margin-top: 0.5em;
}
.workspace-tab-header {
background: var(--tab-background-inactive);
}
.workspace-tab-header.has-active-menu,
.workspace-tab-header.is-active {
background: var(--theme-color-switcherBgActive);
}
.workspace-tab-header[data-type="markdown"] {
background-color: var(--tab-background-inactive);
color: var(--tab-text-color-active);
}
.workspace-tab-header[data-type="markdown"].is-active,
.workspace-tab-header[data-type="webviewer"].is-active {
color: var(--tab-text-color-active);
border-radius: var(--tab-radius-active) var(--tab-radius-active) 0 0;
.workspace-tab-header-inner-icon {
color: var(--icon-color);
}
}
.workspace-tab-header[data-type="markdown"].is-active {
background-color: var(--tab-background-active);
}
.workspace-tab-header-inner {
border-radius: 0;
}
/* TODO: this idea to show the name of the active tab got too messy in practice - is there a better way? */
/* .workspace-tab-header.is-active .workspace-tab-header-inner-title {
color: var(--icon-color-focused);
display: block;
text-overflow: ellipsis;
flex-basis: 8ch;
flex-grow: 0;
flex-shrink: 1;
} */
.workspace-tab-header-spacer {
display: none;
}
.workspace-leaf-content {
.view-content {
padding: 0.5rem 1rem 0.5rem 1rem;
}
}
.workspace-leaf-content[data-type="markdown"],
.workspace-leaf-content[data-type="webviewer"] {
padding: 0 1rem;
.view-header {
border-radius: var(--tab-radius-active) var(--tab-radius-active) 0 0;
}
.view-content {
background-color: var(--tab-background-active);
border-radius: var(--tab-radius);
}
}
}
/* Override built-in style for .is-focused */
body.is-focused {
.mod-sidedock {
.mod-active .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.workspace-tab-header.is-active .workspace-tab-header-inner-icon {
color: var(--icon-color-focused);
}
.workspace-tab-header.is-active .workspace-tab-header-inner-title {
color: var(--icon-color-focused);
}
.workspace-tab-header[data-type="markdown"].is-active {
color: var(--tab-text-color-focused-active);
.workspace-tab-header-inner-icon {
color: var(--tab-text-color-focused-active-current);
}
}
}
/* .mod-active
.workspace-tab-header.is-active
.workspace-tab-header-inner-icon {
color: var(--text-normal);
} */
}
.mod-left-split {
.workspace-leaf-content {
.view-content {
/* Reduce left padding as the sidebar also provides visual spacing */
padding-inline-start: 0.5rem;
}
}
}
/* #endregion */
/* #endregion */
/* #region Stacked tabs */
.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header {
background-color: var(--tab-background-inactive);
box-shadow: var(--theme-shadow-input);
}
.workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header.is-active {
background-color: var(--background-primary);
}
/* #endregion */
/* #region Ribbon */
.workspace-ribbon {
padding-inline-start: 0;
margin-bottom: 2.5rem;
}
.side-dock-actions {
border-top-right-radius: var(--radius-m);
border-bottom-right-radius: var(--radius-m);
padding: var(--size-2-3);
background: var(--ribbon-background);
}
.side-dock-actions .side-dock-ribbon-action {
margin: 0;
}
.side-dock-actions .side-dock-ribbon-action.clickable-icon {
color: var(--theme-color-control);
height: 2em;
width: 2em;
}
.side-dock-actions .side-dock-ribbon-action.clickable-icon.is-active {
color: var(--theme-color-controlActive);
}
/* #endregion */
/* #region Sidedock Vault Profile */
body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
background-color: transparent;
padding: 0 0.5rem 0.25em 0.5rem;
}
@media (hover: 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(--theme-color-controlHover);
}
}
body.show-ribbon:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
margin-inline-start: calc(-1 * var(--ribbon-width));
width: calc(100% + var(--ribbon-width));
}
/* #endregion */
/* #region Status bar */
.status-bar {
border: none;
border-top-left-radius: var(--radius-m);
border-top-right-radius: var(--radius-m);
gap: 1rem;
padding: 0 0.5rem 0.25em 0.5rem;
right: auto;
left: 50%;
bottom: 0;
transform: translateX(-50%);
height: var(--theme-length-statusBarHeight);
justify-content: space-between;
}
body.theme-setting-fullWidthStatusBar .status-bar {
width: 100%;
}
.status-bar-item {
line-height: 1rem;
padding: 0.25em 0.5em;
width: auto;
white-space: nowrap;
gap: 0.25em;
height: 100%;
}
.status-bar-item:has(.status-bar-item) {
padding: 0;
}
.status-bar-item.mod-clickable {
color: var(--theme-color-control);
}
@media (hover: hover) {
.status-bar-item.mod-clickable:hover {
color: var(--theme-color-controlHover);
}
}
.theme-picker-color-scheme-icon>svg {
fill: var(--theme-color-control);
}
@media (hover: hover) {
.theme-picker-color-scheme-icon:hover>svg {
fill: var(--theme-color-controlHover);
}
}
@media (hover: hover) {
.status-bar-item:hover .sync-status-icon.mod-working {
color: var(--text-normal);
}
}
.status-bar-item.plugin-editor-status,
.status-bar-item.plugin-sync {
padding: 0.25em 0.5em;
}
/* #endregion */
/* #region Panes */
.pane-empty {
color: var(--empty-pane-color);
}
/* #endregion */
/* #region. Popout windows */
body.is-popout-modal.is-frameless .titlebar {
border-bottom: none;
}
/* #endregion */
/* #endregion */
/* #region macOS window frame styles */
body.mod-macos {
/* Base CSS overrides these values, presumably to look like macOS Tahoe. I don't like the excessive rounding in macOS Tahoe, so I'm resetting radii back to standard for Kakano. */
--clickable-icon-radius: var(--radius-s);
--input-radius: var(--radius-s);
--modal-radius: var(--radius-m);
--search-input-radius: var(--radius-s);
--tab-radius: var(--radius-s);
--toggle-radius: var(--radius-l);
--toggle-thumb-radius: var(--radius-l);
--vault-profile-radius: var(--radius-m);
.workspace-tab-header-new-tab,
.workspace-tab-header-tab-list {
padding: 0;
margin: 0;
}
}
/* #region "Native frame" style */
body.mod-macos {
&:not(.is-frameless) {
&:not(.is-mobile) {
.sidebar-toggle-button.mod-left,
.sidebar-toggle-button.mod-right {
padding: 0;
position: absolute;
}
.mod-sidedock {
.workspace-tabs.mod-top-right-space .workspace-tab-header-container-inner {
margin-inline-end: 2.5em;
}
}
.mod-left-split {
.workspace-tabs.mod-top>.workspace-tab-header-container {
padding-inline-end: 1rem;
}
}
.mod-right-split {
.workspace-tabs.mod-top>.workspace-tab-header-container {
padding-inline-start: 1rem;
}
}
&:not(.is-fullscreen) {
.workspace.is-left-sidedock-open {
.sidebar-toggle-button.mod-left {
top: 0.5em;
}
}
.workspace:not(.is-left-sidedock-open) {
.sidebar-toggle-button.mod-left {
top: 0.5em;
}
}
.workspace:not(.is-right-sidedock-open) {
.sidebar-toggle-button.mod-right {
top: 0;
right: -0.5em;
}
.workspace-tab-header-container {
padding-inline-end: 1.5em;
}
}
.workspace.is-right-sidedock-open {
.sidebar-toggle-button.mod-right {
top: 0;
right: 0.5em;
}
}
}
}
&.is-tablet {
.sidebar-toggle-button.mod-left,
.sidebar-toggle-button.mod-right {
padding: 0;
}
.sidebar-toggle-button.mod-left {
top: 0;
left: 0;
}
.sidebar-toggle-button.mod-right {
top: 0;
right: 0;
}
}
}
}
/* #endregion */
/* #region "Obsidian frame" style */
body.mod-macos {
&.is-frameless:not(.is-hidden-frameless) {
--titlebar-height: 40px;
&:not(.is-mobile) {
.sidebar-toggle-button.mod-left,
.sidebar-toggle-button.mod-right {
padding: 0;
position: absolute;
}
.mod-sidedock {
.workspace-tabs.mod-top-right-space .workspace-tab-header-container-inner {
margin-inline-end: 2.5em;
}
}
.mod-left-split {
.workspace-tabs.mod-top>.workspace-tab-header-container {
padding-inline-end: 1rem;
}
}
.mod-right-split {
.workspace-tabs.mod-top>.workspace-tab-header-container {
padding-inline-start: 1rem;
}
}
&:not(.is-fullscreen) {
.workspace.is-left-sidedock-open {
.sidebar-toggle-button.mod-left {
top: 0.5em;
}
}
.workspace:not(.is-left-sidedock-open) {
.sidebar-toggle-button.mod-left {
top: 0.5em;
}
}
.workspace:not(.is-right-sidedock-open) {
.sidebar-toggle-button.mod-right {
top: 0;
right: -0.5em;
}
.workspace-tab-header-container {
padding-inline-end: 1.5em;
}
}
.workspace.is-right-sidedock-open {
.sidebar-toggle-button.mod-right {
top: 0;
right: 0.5em;
}
}
}
&.is-fullscreen {
.workspace.is-left-sidedock-open {
.sidebar-toggle-button.mod-left {
top: 0.5em;
}
}
.workspace:not(.is-left-sidedock-open) {
.sidebar-toggle-button.mod-left {
top: 0.5em;
}
}
.workspace.is-right-sidedock-open {
.sidebar-toggle-button.mod-right {
top: 0;
right: 0.5em;
}
}
.workspace:not(.is-right-sidedock-open) {
.sidebar-toggle-button.mod-right {
top: 0;
right: -0.5em;
}
.mod-root .workspace-tab-header-container {
padding-inline-end: 1.5em;
}
}
.workspace-ribbon .sidebar-toggle-button.mod-left {
left: 0;
}
}
}
&.is-tablet {
.sidebar-toggle-button.mod-left,
.sidebar-toggle-button.mod-right {
padding: 0;
}
.sidebar-toggle-button.mod-left {
top: 0;
left: 0;
}
.sidebar-toggle-button.mod-right {
top: 0;
right: 0;
}
}
}
}
/* #endregion */
/* #region "Hidden (default)" style. This is the default appearance! */
/* In this window style we need to make sure buttons don't overlap the window controls. */
body.mod-macos.is-frameless.is-hidden-frameless {
.workspace .workspace-tabs.mod-top-left-space .workspace-tab-header-container,
.workspace .workspace-tabs.mod-top-right-space .workspace-tab-header-container {
padding: 0 1rem;
}
/* This element also seems to be a handle for window dragging */
.mod-sidedock .workspace-tabs.mod-top .workspace-tab-header-container {
margin-top: calc(var(--header-height) + 0.5rem);
height: auto;
align-items: flex-end;
}
.mod-sidedock .workspace-tab-header-container-inner {
height: auto;
}
.sidebar-toggle-button.mod-left,
.sidebar-toggle-button.mod-right {
padding: 0;
position: fixed;
}
&:not(.is-fullscreen) {
.workspace-ribbon.mod-left {
margin-top: 0;
padding-top: var(--header-height);
}
.sidebar-toggle-button.mod-left {
top: 0.25rem;
left: calc(var(--ribbon-width) + var(--frame-left-space));
}
.sidebar-toggle-button.mod-right {
top: 0.25rem;
right: calc(0.25rem + var(--frame-right-space));
}
.workspace.is-left-sidedock-open {
.mod-root .sidebar-toggle-button.mod-left {
display: none;
}
}
.workspace:not(.is-left-sidedock-open) {
.mod-sidedock .sidebar-toggle-button.mod-left {
display: none;
}
}
.workspace:not(.is-left-sidedock-open) {
.mod-root .workspace-tab-header-container {
padding-inline-start: calc(var(--frame-left-space) + 0.75rem);
}
}
.workspace:not(.is-right-sidedock-open) {
.mod-root .workspace-tab-header-container {
padding-inline-end: calc(var(--frame-right-space) + 1rem);
}
}
}
&.is-fullscreen {
.sidebar-toggle-button.mod-left {
top: 0.25rem;
left: 0.25rem;
}
.sidebar-toggle-button.mod-right {
top: 0.25rem;
right: 0.25rem;
}
.workspace:not(.is-right-sidedock-open) {
.mod-root .workspace-tab-header-container {
padding-inline-end: calc(var(--frame-right-space) + 1.5rem);
}
}
}
&.is-tablet {
.sidebar-toggle-button.mod-left,
.sidebar-toggle-button.mod-right {
padding: 0;
}
.sidebar-toggle-button.mod-left {
position: absolute;
top: 0;
left: 0;
}
.sidebar-toggle-button.mod-right {
position: absolute;
top: 0;
right: 0;
}
.workspace .mod-root .workspace-tabs .workspace-tab-header-container {
padding-inline-start: calc(var(--frame-left-space) + 2rem);
padding-inline-end: calc(var(--frame-right-space) + 3rem);
}
}
&.is-phone {
.sidebar-toggle-button.mod-left {
top: 0;
left: 0;
}
}
}
/* #endregion */
/* #region Tab close button on left, macOS standard */
.mod-macos {
.workspace .mod-root {
.workspace-tab-header .workspace-tab-header-inner-close-button {
position: static;
order: 0;
}
.workspace-tab-header-inner-icon,
.workspace-tab-header-inner-title {
order: 1;
}
}
.modal-header-button,
.modal-close-button {
inset-inline-start: 0.5rem;
inset-inline-end: auto;
}
.mod-community-modal .modal-sidebar .setting-item:first-child {
margin-inline-start: auto;
}
.multi-select-pill {
padding-inline-start: 0.25em;
.multi-select-pill-remove-button {
order: 0;
}
.multi-select-pill-content {
order: 1;
margin: 0;
}
}
.modal.mod-settings {
.vertical-tab-header {
.setting-search-container {
/* Room for close button */
padding-left: 2.5rem;
}
}
}
.mod-community-modal {
.community-modal-controls {
padding-left: 2.5rem;
}
}
}
/* #endregion */
/* #endregion */
/* #region Windows window frame styles */
/* #region "Obsidian frame" style */
body.mod-windows {
&.is-frameless:not(.is-hidden-frameless) {
/* Override default appearance for .mod-close, as this one simulates a system control. */
.titlebar-button.mod-close {
border-radius: 0;
width: auto;
}
}
}
/* #endregion */
/* #region "Hidden (default)" style. This is the default appearance! */
body.mod-windows {
&.is-frameless.is-hidden-frameless:not(.is-popout-window) {
/* Override default appearance for .mod-close, as this one simulates a system control. */
.titlebar-button.mod-close {
border-radius: 0;
width: auto;
}
.titlebar-button.mod-logo {
/* This is hidden by default. I'm not sure why, as it provides access to the main menu. */
display: flex;
}
.workspace-ribbon.side-dock-ribbon.mod-left {
margin-top: calc(var(--header-height) + 2em);
}
.sidebar-toggle-button.mod-left {
top: 2em;
}
/* &:not(.is-fullscreen) {
.sidebar-toggle-button.mod-left {
position: absolute;
}
.workspace-ribbon.mod-left {
margin-top: 2.5em;
padding-top: 0;
}
.mod-right-split .mod-top .workspace-tab-header-container {
position: relative;
padding-inline-end: calc(var(--frame-right-space) + 30px);
.sidebar-toggle-button.mod-right {
position: absolute;
right: var(--frame-right-space);
}
}
.workspace.is-left-sidedock-open {
.mod-left-split .workspace-tabs {
overflow: visible;
}
.sidebar-toggle-button.mod-left {
left: var(--ribbon-width);
top: 0.5em;
padding: 0;
}
}
.workspace:not(.is-left-sidedock-open) {
.mod-root .workspace-tabs.mod-top {
overflow: visible;
}
.sidebar-toggle-button.mod-left {
left: var(--ribbon-width);
top: 0.5em;
padding: 0;
}
.mod-root .workspace-tab-header-container {
padding-inline-start: calc(var(--icon-size) + 1rem);
}
}
.workspace:not(.is-right-sidedock-open) {
}
.workspace:not(.is-right-sidedock-open) {
.sidebar-toggle-button.mod-right {
left: var(--frame-right-space);
top: -0.5em;
padding: 0;
}
}
} */
}
}
/* #endregion */
/* #endregion */
/* #region Linux window frame styles */
.mod-linux {}
/* #endregion */
/* #region Content area - src/workspace/content_area.css */
/* #region Order of items in content area */
.inline-title {
order: 0;
}
.mod-root .metadata-container,
.setting-properties-position-above .mod-root .is-live-preview .metadata-container {
order: 1;
}
.setting-properties-position-below .mod-root .is-live-preview .metadata-container {
margin-top: 1em;
order: 3;
}
.setting-properties-position-below .mod-root .is-live-preview .embedded-backlinks {
padding: 0 2rem 0.5rem 2rem;
}
body:not(.setting-properties-position-below) .mod-root .is-live-preview .embedded-backlinks {
margin-top: 1em;
}
.cm-contentContainer {
order: 2;
}
.embedded-backlinks {
order: 3;
}
/* #endregion */
/* #region Header */
.view-header {
height: auto;
/* Don't use --header-height */
justify-content: space-between;
padding: 0.5em;
}
.view-header.is-highlighted:after {
background-color: var(--theme-color-baseTransparent50);
}
.view-header-title-container {
display: none;
}
.show-inline-title .view-header-title-container {
display: flex;
}
.view-header-title {
display: none;
}
.show-inline-title.is-focused .workspace-leaf.mod-active .view-header-title {
/* Use the "Display Inline Title" setting to show/hide the title in the header. */
display: block;
}
@media (hover: hover) {
.view-header-title-parent .view-header-breadcrumb:hover {
background: transparent;
cursor: auto;
}
}
/* #endregion */
/* #region Content */
/* Reset containers so that metadata properties can go full width */
.view-content>.markdown-source-view.mod-cm6>.cm-editor>.cm-scroller {
padding: 0;
}
.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer,
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer {
margin-inline-start: 0;
margin-inline-end: 0;
max-width: none;
width: 100%;
}
.cm-contentContainer {
justify-content: center;
/* Allow space at left and right when note is narrow */
padding: 1rem calc(var(--input-width) + 0.5rem);
}
/* Override inline styles — Obsidian injects a large padding-bottom on these
as inline styles; zero it out so the page ends where content ends */
.cm-content {
padding-bottom: 0 !important;
}
.markdown-preview-sizer {
padding-bottom: 0 !important;
}
/* TODO: restore readable line width */
/* #region Inline title (i.e. filename) */
.inline-title {
width: 100%;
margin: 0 auto;
max-width: var(--file-line-width);
padding: 0 2rem;
text-align: center;
}
.view-header-title-container {
display: none;
}
.show-inline-title .view-header-title-container {
display: flex;
}
/* #endregion */
/* #endregion */
/* #region Note metadata containers */
.mod-root .metadata-container,
.embedded-backlinks {
animation: 0.5s 1 alternate fadein;
background-color: var(--metadata-property-background);
border-radius: 0;
border: 0;
font-family: var(--font-interface);
margin: 0;
padding: 0.5rem 2rem;
transform: none;
width: 100%;
&.mod-error {
background-color: rgba(var(--callout-error), 0.1);
}
}
body:not(.is-mobile) .mod-root .markdown-reading-view .metadata-container {
width: calc(100% + 4rem);
margin: 0;
}
/* #endregion */
/* #endregion */
/* #region Shared UI Elements */
/* #region Dragging */
.workspace-drop-overlay:before {
animation: 0.5s 1 alternate fadein;
background-color: var(--theme-color-dragTarget);
border-radius: var(--radius-m);
opacity: 1;
}
.workspace-fake-target-overlay {
background: transparent;
}
/* #endregion */
/* #region Menus */
/* Rendered on mobile, or if native menus are disabled */
.menu {
background-color: var(--theme-color-menuBg);
border: 0;
box-shadow: var(--shadow-l);
border-radius: var(--radius-l);
margin: 0 1rem;
padding: 0.5em;
}
.menu-item {
height: 2em;
}
.menu-item,
.menu-item-icon {
color: var(--nav-item-color);
background-color: var(--nav-item-background);
}
.menu-item-icon {
display: none;
}
body.theme-setting-enableIconsInMenus {
.menu-item-icon {
display: flex;
}
}
.menu-item.selected:not(.is-label):not(.is-disabled) {
background-color: var(--nav-item-background);
border-radius: var(--radius-s);
box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
}
.menu-item.selected:not(.is-label):not(.is-disabled):hover {
background-color: var(--nav-item-background-hover);
}
.menu-separator {
margin: 0.75em 0.5em;
}
@media (hover: hover) {
.menu-item:hover {
color: var(--nav-item-color-hover);
background-color: var(--nav-item-background-hover);
font-weight: var(--nav-item-weight-hover);
}
.menu-item:hover .menu-item-icon {
color: var(--nav-item-color-hover);
}
}
.is-phone {
.menu {
padding: 0.5rem 0.5rem var(--safe-area-inset-bottom) 0.5rem;
width: calc(100% - var(--safe-area-inset-left) - var(--safe-area-inset-right) - 2 * var(--theme-spacing-mobileHorizontalSpacing) - max(2 * var(--theme-spacing-mobileHorizontalSpacing), 1rem));
}
.menu .suggestion-group .suggestion-item:not(.is-label),
.menu-item:not(.is-label) {
background-color: transparent;
border-radius: var(--radius-s);
overflow: hidden;
}
.menu-group .menu-item:not(.is-label):after {
display: none;
}
.menu-group .menu-item:first-child,
.menu-group .menu-item:last-child {
border-radius: var(--radius-s);
}
}
/* #endregion */
/* #region Messages */
.mod-warning,
p.mod-warning,
.setting-message {
border-radius: var(--clickable-icon-radius);
font-size: var(--font-ui-small);
background: var(--theme-color-warningBg);
padding: 0.5em 1em;
}
.mod-warning:not(button) {
display: inline-block;
margin: 0.5em 0;
border: solid var(--text-error) 0.125em;
}
/* Collapse adjacent messages */
p.mod-warning~p.mod-warning,
p.setting-message~p.setting-message {
margin-bottom: 0;
padding-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
display: block;
border-top: none;
}
p.mod-warning:has(+ p.mod-warning, .setting-message),
.setting-message:has(+ p.mod-warning, .setting-message) {
border-top-left-radius: var(--clickable-icon-radius);
border-top-right-radius: var(--clickable-icon-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
margin-bottom: 0;
display: block;
}
/* #endregion */
/* #region Notices */
/* Note that Excalidraw .HintView uses a smaller version, which could be generalised */
.notice-container {
padding: 0;
right: 1rem;
top: 1rem;
}
.is-mobile .notice-container {
padding: 0.5em 0.5em 2em 0.5em;
top: var(--safe-area-inset-top);
left: auto;
right: var(--safe-area-inset-right);
}
.is-phone .notice-container {
padding: 0.5em 0.5em 2em 0.5em;
top: auto;
left: var(--safe-area-inset-left);
right: var(--safe-area-inset-right);
max-width: 100%;
margin: 0 auto;
bottom: max(3rem, var(--safe-area-inset-bottom));
}
.notice,
.is-phone .notice {
border-radius: var(--radius-xl);
background-color: var(--background-modifier-message);
color: var(--theme-color-notice);
box-shadow: var(--shadow-s);
padding: 1em 1.5em;
}
.notice {
margin: 0 0 1rem 0;
}
.is-phone .notice {
text-align: center;
max-width: none;
width: auto;
margin: 0 0.5rem 1rem 0.5rem;
}
/* #endregion */
/* #region Content references (search results, incoming/outgoing links, etc.) */
.search-result-file-matches {
background: none;
box-shadow: none;
display: flex;
gap: 0.5em;
flex-direction: column;
margin: 0;
}
.search-result-file-match,
.sync-history-list-item {
background: var(--theme-color-contentItemBg);
border: none;
border-radius: var(--radius-s);
box-shadow: none;
color: var(--nav-item-color);
font-weight: var(--nav-item-weight);
padding: 0.5em 1em;
}
@media (hover: hover) {
.search-result-file-match:hover,
.sync-history-list-item:hover {
background: var(--theme-color-contentItemBgHover);
cursor: pointer;
font-weight: var(--nav-item-weight-hover);
}
.search-result-hover-button:hover {
color: var(--theme-color-controlHover);
}
}
.sync-history-list-item:has(.sync-history-list-item-header.is-active) {
background: var(--theme-color-contentItemBgActive);
}
.search-result-file-matched-text {
font-weight: bold;
}
.search-result:not(.is-collapsed) .search-result-file-title {
color: var(--theme-color-control);
}
/* #endregion */
/* #region Trees */
.tree-item-self,
.tree-item-self.mod-collapsible {
padding-top: 0;
padding-bottom: 0;
}
.tree-item-self .tree-item-icon {
/* Icons that represent an object have the same colour as the related text */
color: inherit;
margin: 0;
position: relative;
}
.tree-item-self {
font-size: var(--nav-item-size);
}
/* #endregion */
/* #region Suggestions (Search, File Recovery, Slash commands) */
.suggestion-container,
.suggestion-container.mod-search-suggestion,
.kanban-plugin__autocomplete {
display: flex;
background-color: var(--theme-color-suggestionBg);
border: none;
border-radius: var(--radius-m);
box-shadow: var(--shadow-s);
list-style: none;
padding: 0.5rem;
margin: 0;
.search-input-container {
margin-bottom: 0.5em;
}
}
.suggestion,
.suggestion-container.mod-search-suggestion .suggestion {
background: transparent;
padding: 0;
}
.suggestion-container .prompt-instructions {
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
margin: 0.5rem -0.5rem -0.5rem -0.5rem;
padding: 0.5rem 1rem;
color: var(--theme-color-promptInstructions);
}
.suggestion-title.list-item-part {
color: var(--text-normal);
}
.suggestion-aux {
gap: 0.25em;
}
.suggestion-item,
.kanban-plugin__autocomplete-item,
.kanban-plugin__autocomplete-item-active {
border: none;
border-radius: var(--radius-m);
padding: 0.5em 1em;
}
@media (hover: hover) {
.suggestion-item:hover,
.kanban-plugin__autocomplete-item:hover,
.kanban-plugin__autocomplete-item-active:hover {
background: var(--nav-item-background-hover);
color: var(--nav-item-color-hover);
}
}
.suggestion-item.mod-group,
.suggestion-item.mod-group .suggestion-title {
color: var(--text-muted);
padding: inherit;
text-transform: lowercase;
>*,
&:first-line {
text-transform: capitalize;
}
}
.search-suggest-item.mod-group {
padding: 0 1em;
}
.search-suggest-item.mod-group:not(:first-child) {
border-top: none;
margin: 1em 0 0;
padding: 0 1em;
}
.kanban-plugin__autocomplete-item-active {
background: inherit;
color: inherit;
}
.suggestion-item.is-selected {
background-color: var(--theme-color-controlBgActive);
color: var(--theme-color-controlActive);
.suggestion-flair {
color: var(--nav-item-color-active);
}
}
.suggestion-item.mod-complex.is-selected .suggestion-action {
color: var(--theme-color-controlUISelected);
}
/* #endregion */
/* #region Hotkeys */
.suggestion-hotkey,
.setting-hotkey,
.prompt-instruction-command {
background: transparent;
border: solid 1px var(--theme-color-hotkey);
color: var(--theme-color-hotkey);
font-size: var(--font-ui-smaller);
font-family: var(--font-interface);
padding: 2px 6px;
border-radius: var(--radius-s);
}
.suggestion-item.is-selected .suggestion-hotkey {
border-color: var(--theme-color-textSelected);
color: var(--theme-color-textSelected);
}
.setting-hotkey.has-conflict {
background: transparent;
border: solid 1px var(--background-modifier-error);
color: var(--background-modifier-error);
}
/* #endregion */
/* #region Buttons */
/* #region Clickable icon buttons */
.markdown-source-view.mod-cm6 .code-block-flair,
.clickable-icon,
.setting-item-control .clickable-icon,
.mod-community-modal .modal-sidebar button.clickable-icon,
.metadata-property-icon,
.markdown-embed-link,
.file-embed-link,
.markdown-source-view.mod-cm6 .edit-block-button,
.tasks-edit,
.workspace-tab-header-tab-list .clickable-icon,
.workspace-tab-header-new-tab .clickable-icon,
.map-view-main .mv-icon-button .map-view-main .leaflet-control-container .leaflet-top.leaflet-right a,
.bases-toolbar-menu-item .clickable-icon {
align-items: center;
background-color: transparent;
border-radius: var(--clickable-icon-radius);
border: none;
box-shadow: none;
color: var(--theme-color-control);
cursor: var(--cursor);
display: flex;
height: 2em;
justify-content: center;
min-height: var(--input-height);
min-width: var(--input-height);
opacity: var(--icon-opacity);
padding: 0.25rem;
text-decoration: none;
transition: opacity 0.15s ease-in-out;
width: auto;
}
.is-mobile .clickable-icon {
min-height: 44px;
min-width: 44px;
}
@media (hover: hover) {
.markdown-source-view.mod-cm6 .code-block-flair:hover,
.clickable-icon:hover,
.side-dock-actions .side-dock-ribbon-action.clickable-icon:hover,
.mod-community-modal .modal-sidebar button.clickable-icon:hover,
.metadata-property-icon:hover,
.markdown-embed-link:hover,
.file-embed-link:hover,
.markdown-source-view.mod-cm6 .edit-block-button:hover,
.tasks-edit:hover,
.map-view-main .mv-icon-button:hover,
.bases-toolbar-menu-item .clickable-icon:hover {
color: var(--theme-color-controlHover);
background-color: var(--background-modifier-hover);
}
}
.clickable-icon.is-active,
.map-view-main .mv-icon-button.on {
opacity: var(--icon-opacity-hover);
color: var(--theme-color-controlLightweightActive);
background-color: var(--theme-color-interactiveActive);
}
@media (hover: hover) {
.clickable-icon.is-active:hover {
background-color: var(--background-modifier-hover);
color: var(--theme-color-controlHover);
}
}
/* #endregion */
/* #region Regular buttons */
button:not(.clickable-icon):not(.dropdown-menu-item),
button:not(.clickable-icon).mod-cta,
.sync-history-load-more-button,
.empty-state-action,
.is-mobile .document-search .document-search-button,
.is-mobile .document-replace .document-search-button,
.style-settings-import-label,
.style-settings-copy,
.style-settings-download,
.style-settings-import,
.style-settings-export,
.popover.hover-popover>.file-embed.mod-empty {
background-color: var(--theme-color-controlBg);
border: none;
border-radius: var(--button-radius);
box-shadow: var(--theme-shadow-control);
color: var(--theme-color-controlText);
padding: 0.25em 0.5em;
min-height: var(--input-height);
height: auto;
text-decoration: none;
}
@media (hover: hover) {
button:not(.clickable-icon):not(.dropdown-menu-item):hover,
button:not(.clickable-icon).mod-cta:hover,
.sync-history-load-more-button:hover,
.empty-state-action:hover,
.is-mobile .document-search .document-search-button:hover,
.is-mobile .document-replace .document-search-button:hover,
.style-settings-import-label:hover,
.style-settings-copy:hover,
.style-settings-download:hover,
.style-settings-import:hover,
.style-settings-export:hover,
.popover.hover-popover>.file-embed.mod-empty:hover {
border: none;
background: var(--theme-color-controlBgHover);
color: var(--theme-color-controlTextHover);
text-decoration: none;
}
}
button:not(.clickable-icon):not(.dropdown-menu-item):focus,
button:not(.clickable-icon).mod-cta:focus,
.sync-history-load-more-button:focus,
.empty-state-action:focus,
.is-mobile .document-search .document-search-button:focus,
.is-mobile .document-replace .document-search-button:focus,
.style-settings-import-label:focus,
.style-settings-copy:focus,
.style-settings-download:focus,
.style-settings-import:focus,
.style-settings-export:focus,
.popover.hover-popover>.file-embed.mod-empty:focus {
box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
}
/* Buttons - regular but small */
button.search-result-file-match-replace-button {
min-height: auto;
}
/* #endregion */
/* #region Lightweight buttons */
.search-result-file-match-destination-file,
.text-icon-button,
.query-toolbar .query-toolbar-item.mod-views .text-icon-button {
border: none;
box-shadow: var(--theme-shadow-control);
background-color: var(--theme-color-controlLowWeightBg);
color: var(--theme-color-controlText);
font-size: var(--font-ui-smaller);
line-height: var(--line-height-tight);
min-height: 1.5rem;
padding: 0.25em 0.5em;
}
.search-result-file-match-destination-file:focus,
.text-icon-button:focus,
.query-toolbar .query-toolbar-item.mod-views .text-icon-button:focus {
box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
outline: none;
}
.text-icon-button.is-active {
color: var(--theme-color-controlActive);
background-color: var(--theme-color-controlBgActive);
.text-button-icon {
color: var(--theme-color-controlActive);
background-color: var(--theme-color-controlBgActive);
}
}
.text-icon-button.has-active-menu {
color: var(--theme-color-controlHasActiveMenu);
.text-button-icon {
color: var(--theme-color-controlHasActiveMenu);
}
}
@media (hover: hover) {
.search-result-file-match:hover .search-result-file-match-destination-file:hover,
.text-icon-button:hover,
.query-toolbar .query-toolbar-item.mod-views .text-icon-button:hover {
border: none;
background-color: var(--theme-color-controlBgHover);
color: var(--theme-color-controlTextHover);
.text-button-icon {
color: var(--theme-color-controlTextHover);
}
}
.text-icon-button.is-active:hover,
.text-icon-button.has-active-menu:hover {
border: none;
background-color: var(--theme-color-controlBgHover);
color: var(--theme-color-controlTextHover);
.text-button-icon {
color: var(--theme-color-controlTextHover);
}
}
.search-result-file-match:hover .search-result-file-match-destination-file:hover .search-result-file-match-destination-file-icon {
color: var(--theme-color-controlTextHover);
}
}
/* #endregion */
/* #endregion */
/* #region Close buttons */
.mod-close,
.document-search-close-button,
.workspace-tab-header-inner-close-button,
.slides-close-btn,
.clickable-icon.kanban-plugin__search-cancel-button,
.clickable-icon.kanban-plugin__lane-settings-button[aria-label="Close"],
.mobile-tab .close-button,
.bases-toolbar-menu-container-header .close-icon,
.clickable-icon.document-search-close-button,
.modal-header-button {
background-color: transparent;
border-radius: 100%;
border: none;
color: var(--theme-color-control);
/* Above .modal-title */
z-index: 2;
width: var(--theme-length-closeButtonWidth);
height: var(--theme-length-closeButtonWidth);
min-width: var(--theme-length-closeButtonWidth);
min-height: var(--theme-length-closeButtonWidth);
display: flex;
flex-shrink: 0;
align-content: center;
justify-content: center;
padding: 0.125em;
.svg-icon {
stroke: var(--theme-color-control);
}
}
@media (hover: hover) {
.mod-close:hover,
.document-search-close-button:hover,
.workspace-tab-header-inner-close-button:hover,
.workspace-tab-header.is-active .workspace-tab-header-inner-close-button:hover,
.workspace-tab-header-inner-close-button:hover,
.slides-close-btn:hover,
.clickable-icon.kanban-plugin__search-cancel-button:hover,
.clickable-icon.kanban-plugin__lane-settings-button[aria-label="Close"]:hover,
.multi-select-pill-remove-button:hover,
.mobile-tab .close-button:hover,
.bases-toolbar-menu-container-header .close-icon:hover,
.clickable-icon.document-search-close-button:hover,
.modal-header-button:hover {
color: var(--theme-color-controlHover);
background-color: var(--theme-color-navigationButtonBgHover);
.svg-icon {
stroke: var(--theme-color-controlHover);
}
}
}
/* close buttons that use a text cross instead of an SVG */
.document-search-close-button,
.is-mobile .document-search .document-search-close-button,
.is-mobile .document-replace .document-search-close-button {
padding: var(--size-2-1);
width: 1.5rem;
height: 1.5rem;
display: flex;
align-content: center;
--icon-size: var(--icon-s);
--icon-stroke: var(--icon-s-stroke-width);
text-align: center;
justify-content: center;
line-height: var(--theme-length-closeButtonWidth);
}
.document-search-close-button:before {
/* This uses a text cross instead of an SVG. Hack for visual alignment. */
margin-top: -3px;
line-height: var(--theme-length-closeButtonWidth);
width: var(--theme-length-closeButtonWidth);
height: var(--theme-length-closeButtonWidth);
}
/* #endregion */
/* #region Navigation buttons */
/* Buttons that don't change the satete of content, just what we're currently looking at. Styled similarly to close buttons. */
.modal-setting-back-button-icon,
.view-header-nav-buttons>.clickable-icon,
.mod-root .workspace-tab-header-status-icon,
.mobile-tab .mobile-tab-pin,
.map-view-graph-controls .minimize-button.svelte-1sl5jax {
color: var(--theme-color-control);
border: none;
border-radius: 100%;
background-color: transparent;
/* Above .modal-title */
z-index: 2;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
width: 1.5rem;
height: 1.5rem;
padding: 0;
cursor: default;
.svg-icon {
stroke: var(--theme-color-control);
width: 1rem;
height: 1rem;
}
}
.mobile-tab .mobile-tab-pin,
.map-view-graph-controls .minimize-button.svelte-1sl5jax {
width: var(--theme-length-closeButtonWidth);
height: var(--theme-length-closeButtonWidth);
}
@media (hover: hover) {
.modal-setting-back-button-icon:hover,
.view-header-nav-buttons>.clickable-icon:hover,
.mod-root .workspace-tab-header-status-icon:hover,
.mobile-tab .mobile-tab-pin:hover,
.map-view-graph-controls .minimize-button.svelte-1sl5jax:hover {
color: var(--theme-color-control);
background-color: var(--theme-color-navigationButtonBgHover);
.svg-icon {
stroke: var(--theme-color-controlHover);
}
}
.mod-root .workspace-tab-header-status-icon .svg-icon {
width: 80%;
}
}
/* #endregion */
/* #region Lightweight form controls */
/* Form controls that are rendered as text until they have focus */
.metadata-property .metadata-property-key input,
.metadata-property .metadata-property-value {
border: none;
border-radius: var(--input-radius);
box-shadow: none;
display: flex;
background: transparent;
height: 100%;
padding: 0 0.5em;
}
.metadata-property .metadata-property-value input {
box-shadow: none;
}
@media (hover: hover) {
.metadata-property .metadata-property-key input:hover,
.metadata-property .metadata-property-value:hover {
background: var(--background-input);
}
}
.metadata-property .metadata-property-key input:focus,
.metadata-property .metadata-property-value:focus-within {
border: none;
background: var(--background-input);
box-shadow: 0 0 0 var(--input-border-width) var(--background-modifier-border-focus);
color: var(--text-normal);
}
/* #endregion */
/* #region Text fields */
/* This box shadow goes around the disclosure control, we want it to go just around the text. */
.tree-item-self.is-being-renamed,
body:not(.is-grabbing) .tree-item-self.has-focus.is-being-renamed,
body:not(.is-phone) .workspace-leaf.mod-active .tree-item-self.has-focus:focus-within {
box-shadow: none;
}
.search-input-container {
padding: var(--input-border-width);
}
.search-input-container input[type="search"],
input.document-search-input,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="text"],
textarea,
.tree-item-self.is-being-renamed>.tree-item-inner,
.formula-editor-container {
box-shadow: 0 0 0 var(--input-border-width) var(--theme-color-base);
border-radius: var(--radius-s);
border: none;
background: var(--background-input);
color: var(--text-normal);
}
.search-input-container input[type="search"]:active,
.search-input-container input[type="search"]:focus-visible,
.search-input-container input[type="search"]:focus,
input.document-search-input:active,
input.document-search-input:focus-visible,
input.document-search-input:focus,
input[type="email"]:active,
input[type="email"]:focus-visible,
input[type="email"]:focus,
input[type="number"]:active,
input[type="number"]:focus-visible,
input[type="number"]:focus,
input[type="password"]:active,
input[type="password"]:focus-visible,
input[type="password"]:focus,
input[type="search"]:active,
input[type="search"]:focus-visible,
input[type="search"]:focus,
input[type="text"]:active,
input[type="text"]:focus-visible,
input[type="text"]:focus,
textarea:active,
textarea:focus-visible,
textarea:focus,
body:not(.is-grabbing) .tree-item-self.has-focus.is-being-renamed>.tree-item-inner {
background: var(--background-input);
border-radius: var(--radius-s);
box-shadow: 0 0 0 var(--input-border-width) var(--background-modifier-border-focus);
color: var(--text-normal);
}
@media (hover: hover) {
.search-input-container input[type="search"]:hover,
input.document-search-input:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
textarea:hover,
body:not(.is-grabbing) .tree-item-self.has-focus.is-being-renamed:hover>.tree-item-inner {
background: var(--background-input);
border-radius: var(--radius-s);
box-shadow: 0 0 0 var(--input-border-width) var(--background-modifier-border-focus);
color: var(--text-normal);
}
}
textarea {
padding: 1em;
}
.search-input-container input::placeholder,
input.document-search-input::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="text"]::placeholder,
textarea::placeholder {
color: var(--theme-color-inputPlaceholder);
}
/* No matches state */
input.document-search-input.mod-no-match,
input.document-replace-input.mod-no-match {
background-color: color-mix(in srgb,
var(--background-input),
var(--background-modifier-error) 50%);
}
/* #endregion */
/* #region Selects – regular */
select,
.setting-item-control select .dropdown,
.workspace-drawer-active-tab-header {
-webkit-appearance: none;
appearance: none;
border: none;
box-shadow: var(--theme-shadow-control);
background-color: var(--theme-color-controlBg);
color: var(--theme-color-controlText);
padding: 0;
margin: 0 0.5rem;
&>option {
color: var(--theme-color-controlText);
}
}
@media (hover: hover) {
select:hover,
.setting-item-control select:hover,
.dropdown:hover {
border: none;
background-color: var(--theme-color-controlBgHover);
color: var(--theme-color-controlTextHover);
}
}
select:focus,
.dropdown:focus {
box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
outline: none;
}
/* #endregion */
/* #region Selects – lightweight */
.search-results-info .dropdown {
border: none;
box-shadow: var(--theme-shadow-control);
background-color: var(--theme-color-controlLowWeightBg);
}
@media (hover: hover) {
.search-results-info .dropdown:hover {
border: none;
background: var(--theme-color-controlBgHover);
color: var(--theme-color-controlTextHover);
}
}
.search-results-info .dropdown:focus {
box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
outline: none;
}
/* #endregion */
/* #region. Flair */
.flair {
background-color: var(--flair-background);
border-radius: var(--radius-s);
color: var(--flair-color);
font-size: var(--font-ui-smaller);
letter-spacing: 0.05em;
margin-inline-start: 0;
line-height: 1;
padding: 0.375em 0.75em;
text-transform: uppercase;
}
/* #endregion */
/* #region Multi-select container */
.multi-select-container,
.metadata-property .multi-select-container {
padding: 0.25em;
}
/* #endregion */
/* #region Toolbars */
.canvas-controls,
.graph-controls,
.graph-controls.is-close,
.workspace-split:not(.mod-root) .graph-controls.is-close,
.graph-controls:not(.is-close),
.canvas-card-menu,
.canvas-menu,
.canvas-submenu,
.advanced-tables-buttons {
background: var(--theme-color-controlSetBg);
border: none;
padding: 0.25rem;
gap: 0;
box-shadow: var(--theme-shadow-input);
border-radius: var(--radius-m);
width: fit-content;
}
.canvas-control-item,
.graph-controls-button,
.canvas-card-menu .canvas-card-menu-button,
[data-type="advanced-tables-toolbar"] .nav-buttons-container .nav-action-button {
--icon-size: var(--icon-s);
--icon-stroke: var(--icon-s-stroke-width);
border-radius: var(--clickable-icon-radius);
color: var(--theme-color-control);
opacity: var(--icon-opacity);
background-color: transparent;
border: none;
}
/* Active state */
.canvas-control-item.has-active-menu {
opacity: var(--icon-opacity-hover);
color: var(--theme-color-controlLightweightActive);
background-color: var(--theme-color-interactiveActive);
}
@media (hover: hover) {
.canvas-control-item.has-active-menu:hover {
background-color: var(--background-modifier-hover);
color: var(--theme-color-controlHover);
}
.canvas-control-item:hover,
.graph-controls-button:not(.mod-close):hover,
.canvas-card-menu .canvas-card-menu-button:hover,
[data-type="advanced-tables-toolbar"] .nav-buttons-container .nav-action-button:hover {
color: var(--theme-color-controlHover);
background-color: var(--background-modifier-hover);
}
}
.graph-controls .setting-item {
padding: 0.5em 0;
margin: 0;
}
/* #endregion */
/* #region Query Builders */
.query-toolbar-menu .query-toolbar-section:not(:last-child) {
border-bottom: none;
}
.bases-query-container .filter-row.mod-group,
.bases-query-container .filter-group .filter-group {
background-color: transparent;
border: none;
padding: 0;
margin-inline-start: 1em;
}
.base-toolbar-sort-item,
.bases-query-container .filter-row {
background-color: var(--theme-color-queryComponentBg);
display: flex;
align-items: center;
gap: 0.5em;
border-radius: var(--radius-s);
.combobox-button,
.combobox-button.bases-sort-direction {
background: transparent;
border: none;
border-radius: var(--button-radius);
padding: 0 1em;
}
.filter-operator {
border: none;
}
@media(hover: hover) {
.combobox-button:hover {
background-color: var(--theme-color-controlBgHover);
color: var(--theme-color-controlHover);
.combobox-button-icon {
color: var(--theme-color-controlHover);
}
}
}
}
/* #endregion */
/* #region Collapsible controls */
.metadata-properties-heading,
.embedded-backlinks .backlink-pane .tree-item-self,
.graph-controls .graph-control-section .tree-item-self,
body.theme-setting-overrideMapView .map-view-graph-controls .graph-control-div .collapsible label,
.mod-collapsible,
.search-result-file-title,
.style-settings-heading {
border-radius: var(--radius-s);
color: var(--text-faint);
font-size: var(--nav-item-size);
font-weight: var(--font-medium);
padding: 0.25em 0.5em 0.25em 0;
line-height: var(--theme-lineHeight-tight);
display: flex;
align-items: center;
width: 100%;
}
@media (hover: hover) {
.metadata-properties-heading:hover,
.embedded-backlinks .backlink-pane .tree-item-self:hover,
.graph-controls .graph-control-section .tree-item-self:hover,
body.theme-setting-overrideMapView .map-view-graph-controls .graph-control-div .collapsible label:hover,
.mod-collapsible:hover,
.search-result-file-title:hover,
.style-settings-heading:hover {
color: var(--nav-item-color-hover);
background-color: var(--nav-item-background-hover);
font-weight: var(--font-medium);
}
}
.metadata-properties-heading:before {
/* Override absolute positioning from app, so we're consistent with other collapsibles */
position: static;
}
.metadata-properties-heading .collapse-indicator,
.embedded-backlinks .backlink-pane .tree-item-self .collapse-icon,
.graph-controls .graph-control-section .collapse-icon,
.tree-item-self .tree-item-icon.collapse-icon {
color: var(--theme-color-control);
display: flex;
left: inherit;
opacity: var(--icon-opacity);
padding: 0;
position: relative;
margin: 0;
align-items: center;
justify-content: center;
}
.metadata-properties-heading .metadata-properties-title,
.embedded-backlinks .backlink-pane .tree-item-self .tree-item-inner,
.graph-controls .graph-control-section .tree-item-inner {
font-size: var(--font-ui-smaller);
font-weight: var(--font-medium);
}
@media (hover: hover) {
.metadata-properties-heading:hover .collapse-indicator svg.svg-icon,
.embedded-backlinks .backlink-pane .tree-item-self:hover .collapse-icon svg.svg-icon,
.graph-controls .graph-control-section .tree-item-self:hover .collapse-icon svg.svg-icon,
.mod-collapsible:hover .collapse-icon svg.svg-icon,
.search-result-file-title:hover .collapse-icon svg.svg-icon,
.tree-item-self:hover .tree-item-icon.collapse-icon svg.svg-icon,
.tree-item-self:hover .menu-item-icon svg.svg-icon {
color: var(--theme-color-controlHover);
}
}
.backlink-pane>.tree-item-self .collapse-icon,
.outgoing-link-pane>.tree-item-self .collapse-icon {
display: block;
margin-inline-start: 0;
position: relative;
}
.metadata-properties-heading .collapse-indicator svg,
.embedded-backlinks .backlink-pane .tree-item-self .tree-item-icon svg,
.graph-controls .graph-control-section .collapse-icon svg {
color: var(--theme-color-control);
}
.mod-root .metadata-content,
.backlink-pane .search-result-container,
.backlink-pane .search-result-file-matches,
.outgoing-link-pane .search-result-container,
.graph-control-section .tree-item-children,
body.theme-setting-overrideMapView .map-view-graph-controls .graph-control-div .collapsible .contents {
font-size: var(--font-ui-small);
padding: 0;
margin: 0.5em 0;
}
/* #endregion */
/* #region Obsidian UI Checkboxes */
.checkbox-container {
background-color: var(--background-input);
}
.checkbox-container.is-enabled {
background-color: var(--interactive-accent);
}
input[type="checkbox"] {
border: var(--theme-length-checkboxBorderWidth) solid var(--checkbox-border-color);
}
input[type="checkbox"]:checked:after {
/* Scale check mark with container in slides */
width: 100%;
height: 100%;
top: 0;
left: 0;
}
@media (hover: hover) {
input[type="checkbox"]:hover {
background-color: var(--theme-color-controlUIHover);
}
}
/* #endregion */
/* #region Obsidian UI Radio buttons */
input[type="radio"] {
-webkit-appearance: none;
appearance: none;
background-color: var(--background-input);
border-radius: 100%;
border: var(--theme-length-checkboxBorderWidth) solid var(--checkbox-border-color);
box-sizing: border-box;
color: var(--checkbox-border-color);
display: inline-grid;
font: inherit;
height: 1.15em;
margin: 0;
place-content: center;
transform: translateY(calc(-0.5 * var(--theme-length-checkboxBorderWidth)));
width: 1.15em;
}
input[type="radio"]::before {
content: "";
width: 0.65em;
height: 0.65em;
border-radius: 100%;
transform: scale(0);
transition: 120ms transform ease-in-out;
background-color: CanvasText;
/* Use box-shadow as background-color doesn't print well */
box-shadow: inset 1em 1em var(--checkbox-color);
}
input[type="radio"]:checked::before {
transform: scale(1);
}
input[type="radio"]:focus {
border: var(--theme-length-checkboxBorderWidth) solid var(--background-modifier-border-focus);
}
@media (hover: hover) {
input[type="radio"]:hover {
background-color: var(--theme-color-controlUIHover);
}
}
/* #endregion */
/* #region Item lists */
.vertical-tab-header-group-title {
color: var(--text-normal);
font-size: var(--font-ui-medium);
}
/* Special case for lists of controls */
.horizontal-tab-nav-item,
.vertical-tab-nav-item {
color: var(--theme-color-control);
border-radius: 0.5em;
padding: 0.5em 1em;
svg {
color: var(--theme-color-control);
}
}
@media (hover: hover) {
body:not(.is-grabbing) .tree-item-self.is-clickable:hover,
.horizontal-tab-nav-item:hover,
.vertical-tab-nav-item:hover {
color: var(--nav-item-color-hover);
background-color: var(--nav-item-background-hover);
font-weight: var(--nav-item-weight-hover);
svg {
color: var(--nav-item-color-hover);
}
}
}
.horizontal-tab-nav-item.is-active,
.vertical-tab-nav-item.is-active,
.nav-file-title.is-active,
.nav-folder-title.is-active {
background-color: var(--interactive-accent);
color: var(--nav-item-color-active);
svg {
color: var(--nav-item-color-active);
}
&.is-being-renamed {
background: transparent;
}
}
.nav-folder.is-being-dragged-over {
animation: 0.5s 1 alternate fadein;
border-radius: var(--radius-s);
border: solid 0.125rem var(--theme-color-dragTarget);
background-color: var(--theme-color-dragTargetBg);
}
@media (hover: hover) {
body:not(.is-grabbing) .tree-item.nav-file .tree-item-self.is-active:hover,
.horizontal-tab-nav-item.is-active:hover,
.vertical-tab-nav-item.is-active:hover,
.nav-file-title.is-active:hover,
.nav-folder-title.is-active:hover {
background-color: var(--interactive-accent);
color: var(--nav-item-color-active);
}
}
.nav-folder-title {
font-weight: var(--font-medium);
}
.nav-file-title,
.nav-folder-title {
padding: 0;
}
.tree-item-inner {
padding: var(--nav-item-padding);
}
.nav-file {
padding-inline-start: var(--size-4-4);
}
/* #endregion */
/* #region Pills (including tags) */
.multi-select-pill {
padding: var(--pill-padding-y) var(--pill-padding-x);
}
.multi-select-pill-remove-button {
margin: 0;
border-radius: 100%;
}
@media (hover: hover) {
.multi-select-pill-remove-button:hover {
background: var(--pill-background-remove-hover);
}
}
.multi-select-pill,
.metadata-property[data-property-key="tags"] .multi-select-pill {
--pill-padding-x: 1em;
--pill-padding-y: 0.25em;
--tag-padding-x: 1em;
--tag-padding-y: 0.25em;
}
.metadata-property-value .multi-select-pill,
.bases-table-cell .multi-select-pill {
--pill-color: inherit;
border-radius: var(--tag-radius);
border: var(--tag-border-width) solid var(--tag-border-color);
font-weight: var(--tag-weight);
padding: var(--tag-padding-y) var(--tag-padding-x);
vertical-align: baseline;
line-height: var(--line-height-tight);
}
body .metadata-property[data-property-key="tags"] .multi-select-pill-content:before {
content: "#";
display: inline;
}
@media (hover: hover) {
.cm-hashtag:hover,
.cm-hashtag-begin:hover+.cm-hashtag-end,
.cm-hashtag-begin:has(+ .cm-hashtag-end:hover) {
background-color: var(--theme-color-tagBgHover);
color: var(--theme-color-tagHover);
text-decoration: underline;
text-decoration-color: var(--theme-color-tagHover);
}
}
/* Tags in sidebar or metadata have adjusted colours because they sit on a different background */
body .metadata-property[data-property-key="tags"] .multi-select-pill,
.tag-pane-tag>.tree-item-inner {
background-color: var(--theme-color-tagBgSidebar);
color: var(--theme-color-tagSidebar);
}
@media (hover: hover) {
body .metadata-property[data-property-key="tags"] .multi-select-pill:hover,
.tag-pane-tag>.tree-item-inner:hover {
background-color: var(--theme-color-tagBgSidebarHover);
color: var(--theme-color-tagSidebarHover);
text-decoration: underline;
}
}
/* #endregion */
/* #region Tooltips */
.tooltip {
color: var(--theme-color-notice);
background-color: var(--theme-color-noticeBg);
padding: 0.5em 1em;
}
/* #endregion */
/* #region Remote items */
.community-modal-search-results-wrapper,
.vault-list,
.sync-file-tree-container {
background: var(--theme-gradient-DarkenedTopToBottom);
border: 0;
padding: 1.5em;
gap: 1.5em;
}
.is-phone .community-modal-search-results-wrapper {
padding: 1em;
gap: 1em;
}
.vault-list-item,
.community-item,
.sync-file-tree-container>.list-item {
background: var(--theme-color-communityItemBg);
border-radius: var(--radius-m);
border: none;
box-shadow: var(--shadow-l);
cursor: var(--cursor);
padding: var(--size-4-3);
position: relative;
}
.is-phone .vault-list-item,
.is-phone .community-item {
border-radius: var(--radius-m);
padding: 0.5em 1em;
}
@media (hover: hover) {
.sync-file-tree-container>.list-item:hover,
.community-item:hover {
background: var(--theme-color-communityItemBgHover);
color: var(--nav-item-color-hover);
font-weight: var(--nav-item-weight-hover);
}
}
.community-modal-search-results {
padding: 0;
gap: 1.5em;
}
.is-phone .community-modal-search-results {
padding: 0;
gap: 1em;
}
/* #endregion */
/* #region Properties */
.workspace>.workspace-split:not(.mod-root) .metadata-container {
--metadata-divider-width: inherit;
}
.setting-properties-position-below .mod-root .is-live-preview .metadata-container {
padding: 0.5em 2em 0 2em;
}
.setting-properties-position-below .mod-root .is-live-preview .metadata-container:has(~ .embedded-backlinks[style*="display: none"]) {
padding-bottom: 0.5em;
}
.view-content .metadata-properties-heading .collapse-indicator svg.svg-icon,
.view-content .metadata-properties-heading .is-collapsed .collapse-indicator svg.svg-icon {
color: var(--theme-color-control);
}
.metadata-properties-title {
font-size: var(--font-ui-smaller);
color: var(--text-faint);
font-weight: var(--font-semibold);
padding: 0;
user-select: none;
}
.metadata-property {
background-color: transparent;
border: none;
box-shadow: none;
display: flex;
gap: 0.5em;
padding: var(--input-border-width);
.metadata-property-key {
align-items: flex-start;
display: flex;
gap: 0.5em;
}
}
.metadata-property:focus-within {
background: var(--metadata-property-background-hover);
border-color: var(--metadata-property-background-hover);
box-shadow: none;
}
.metadata-property .metadata-property-key:focus-within {
background: transparent;
}
.metadata-property input.metadata-property-key-input {
height: var(--input-height);
color: var(--theme-color-control);
}
.metadata-property .multi-select-input {
padding: var(--pill-padding-y) 0;
}
.metadata-property-icon:before {
display: none;
}
/* #endregion */
/* #region File lists */
/* Styles used by both Files and Recent Files */
.nav-file-title {
justify-content: space-between;
padding: 0;
}
.nav-file-title-content,
.nav-folder-title-content {
flex-grow: 1;
padding: var(--nav-item-padding);
}
.nav-file-tag {
background: transparent;
border: solid 1px var(--nav-file-tag-border-color);
color: var(--theme-color-navFileTag);
}
.nav-file-title.is-active .nav-file-tag {
color: var(--theme-color-navFileTagActive);
border-color: var(--theme-color-navFileTagActiveBorder);
}
@media (hover: hover) {
/* No hover effect for vault title, as clicking doesn't do anything */
.nav-folder.mod-root>.nav-folder-title:hover {
color: inherit;
}
}
/* #endregion */
/* #region Document search */
.document-search-container,
.mod-active .document-search-container,
.is-mobile .document-search-container,
.kanban-plugin__search-wrapper {
animation: 0.5s 1 alternate fadein;
background: var(--theme-color-controlSetBg);
border: none;
border-radius: var(--radius-l);
box-shadow: var(--shadow-s);
gap: 0.5em;
margin: 0 auto;
padding: 0.5em;
width: auto;
}
.document-search,
.document-replace {
gap: 0.5em;
padding: 0;
display: flex;
align-items: center;
}
.document-search-button {
border: none;
color: var(--theme-color-control);
}
.document-search-close-button,
.is-mobile .document-search .document-search-close-button,
.is-mobile .document-replace .document-search-close-button {
top: calc(50% - 0.5em);
}
/* Close button on left for macOS */
.mod-macos .document-search-container {
.document-search {
.document-search-close-button {
order: 0;
}
.document-search-input {
order: 1;
}
.document-search-buttons {
order: 2;
}
}
.document-replace {
padding-left: calc(var(--theme-length-closeButtonWidth) + 0.5em);
}
}
/* #endregion */
/* #endregion */
/* #region Modals */
/* #region Default modal appearance */
.modal-container {
padding-top: var(--safe-area-inset-top);
padding-inline-end: var(--safe-area-inset-right);
padding-bottom: var(--safe-area-inset-bottom);
padding-inline-start: var(--safe-area-inset-left);
}
.modal {
padding: 0;
overflow: hidden;
}
.modal-title {
/* Space for modal-close-button in line with title */
padding: 0.5em calc(var(--size-2-3) + 2rem);
/* Align with top position for modal-close-button */
margin-top: 0;
margin-bottom: 0;
font-size: var(--font-ui-medium);
line-height: 1.4em;
}
.modal-bg,
.modal,
.prompt {
animation: 0.5s 1 alternate fadein;
animation-timing-function: ease-in-out;
}
.modal-content {
margin: 0 0;
/* Allow space for input borders */
padding: var(--input-border-width) 2em;
overflow: auto;
}
.modal-header:has(.modal-title:empty) {
/* The built-in styles always apply a bottom margin */
margin-bottom: 0;
}
.modal-header-button,
.modal-close-button {
position: absolute;
top: 0.5rem;
inset-inline-end: 0.5rem;
z-index: 10;
}
.modal-content p {
margin: 0 0 0.5em;
}
.modal-content p:last-child {
margin-bottom: 0;
}
.modal-content>hr {
/* Used in the Manage Workspaces modal, but there's currently no way to target that. */
border: none;
margin: 1em 0;
}
.modal-button-container {
margin-top: 0;
padding: 1em 2rem;
}
.modal-content:has(.modal-button-container),
.modal-content:has(.button-container) {
/* Sometimes the .modal-button-container is nested inside the .modal-content */
overflow: scroll;
background-color: var(--theme-color-modalContentBg);
padding: 1em 2em;
}
.modal-content .modal-button-container {
padding: 0;
}
/* #endregion */
/* #region Modals with sidebar layout */
.mod-sidebar-layout .modal-content {
padding: 0;
margin: 0;
}
.modal-sidebar,
.modal.mod-settings .vertical-tab-header {
border-inline-end: none;
padding: 0;
margin: 0;
background: var(--theme-gradient-topToBottom);
color: var(--theme-color-control);
height: 100%;
box-shadow: var(--shadow-s);
z-index: 1;
}
.modal-setting-nav-bar {
margin-inline-start: 0.5rem;
}
/* #endregion */
/* #region Prompts */
.modal-container {
padding-top: var(--safe-area-inset-top);
padding-inline-end: var(--safe-area-inset-right);
padding-bottom: var(--safe-area-inset-bottom);
padding-inline-start: var(--safe-area-inset-left);
}
.modal {
padding: 0;
overflow: hidden;
}
.modal-title {
/* Space for modal-close-button in line with title */
padding: 0.5em calc(var(--size-2-3) + 2rem);
/* Align with top position for modal-close-button */
margin-top: 0;
margin-bottom: 0;
font-size: var(--font-ui-medium);
line-height: 1.4em;
}
.modal-bg,
.modal,
.prompt {
animation: 0.5s 1 alternate fadein;
animation-timing-function: ease-in-out;
}
.modal-content {
margin: 0 0;
/* Allow space for input borders */
padding: var(--input-border-width) 2em;
overflow: auto;
}
.modal-header:has(.modal-title:empty) {
/* The built-in styles always apply a bottom margin */
margin-bottom: 0;
}
.modal-content p {
margin: 0 0 0.5em;
}
.modal-content p:last-child {
margin-bottom: 0;
}
.modal-content>hr {
/* Used in the Manage Workspaces modal, but there's currently no way to target that. */
border: none;
margin: 1em 0;
}
.modal-button-container {
margin-top: 0;
padding: 1em 2rem;
}
.modal-content:has(.modal-button-container),
.modal-content:has(.button-container) {
/* Sometimes the .modal-button-container is nested inside the .modal-content */
overflow: scroll;
background-color: var(--theme-color-modalContentBg);
padding: 1em 2em;
}
.modal-content .modal-button-container {
padding: 0;
}
/* #endregion */
/* #region Community modals */
.mod-community-modal {
.modal-sidebar {
padding: 0;
}
.community-modal-controls {
background: var(--theme-color-settingsBg);
padding: 1em 1.5em 1em 1.5em;
box-shadow: var(--shadow-s);
z-index: 1;
}
.modal-close-button {
z-index: 2;
}
.modal-sidebar .setting-item:not(.setting-item-heading),
.community-modal-controls .setting-item {
padding: 0;
margin-bottom: 0.5em;
}
.modal-sidebar .setting-item-name {
padding-inline-start: 0;
}
.community-modal-controls .setting-item:first-child .setting-item-control {
margin: 0;
}
.modal-content:has(.community-modal-details) .community-modal-controls .setting-item:first-child {
float: none;
}
}
.mod-community-modal:not(:has(.community-modal-details)) .community-modal-controls .setting-item:first-child {
/* Filter control */
max-width: 60%;
margin-bottom: 0.5em;
padding-inline-start: 2em;
float: inline-end;
}
.community-modal-search-summary {
margin: 0;
padding: 0;
}
.community-modal-details {
border: none;
}
.community-item {
display: flex;
flex-direction: column;
gap: var(--size-2-1);
padding: 0;
overflow: hidden;
}
.community-item.is-selected {
background: var(--theme-color-communityItemBgSelected);
}
.community-item.is-selected .flair.mod-pop,
.community-item.mod-active .flair.mod-pop {
display: none;
}
@media (hover: hover) {
.community-item.is-selected:hover .flair.mod-pop,
.community-item.mod-active:hover .flair.mod-pop {
display: none;
}
}
.community-item-name,
.community-item-author,
.community-item-repo,
.community-item-downloads,
.community-item-updated,
.community-item-desc,
.community-modal-info-downloads-text,
.community-modal-info-author,
.community-modal-info-repo {
color: var(--text-normal);
padding: 0 1rem;
}
.community-item-name {
font-weight: var(--font-semibold);
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.community-item .flair {
--flair-background: inherit;
--flair-color: inherit;
float: right;
margin-right: -0.5rem;
}
.community-item-desc {
padding-bottom: 1rem;
}
.community-item-author,
.community-item-repo,
.community-item-downloads,
.community-item-updated,
.community-modal-info-downloads-text,
.community-modal-info-author,
.community-modal-info-repo {
font-size: var(--font-ui-small);
}
.community-item.is-selected {
color: var(--text-on-accent);
.community-item-name,
.community-item-author,
.community-item-repo,
.community-item-downloads,
.community-item-updated {
color: var(--text-on-accent);
}
}
.community-item.mod-active {
background: var(--theme-color-communityItemBgActive);
}
.community-item.mod-active .community-item-name,
.community-item.mod-active .community-item-author,
.community-item.mod-active .community-item-repo,
.community-item.mod-active .community-item-downloads,
.community-item.mod-active .community-item-updated {
color: var(--text-on-accent);
opacity: 0.8;
}
@media (hover: hover) {
.community-item:hover {
color: var(--text-on-accent);
}
.community-item:hover .community-item-name,
.community-item:hover .community-item-author,
.community-item:hover .community-item-repo,
.community-item:hover .community-item-downloads,
.community-item:hover .community-item-updated {
opacity: 0.8;
}
.community-item.is-selected:hover {
background: var(--theme-color-communityItemBgSelected);
}
.community-item.is-selected:hover,
.community-item.is-selected:hover .community-item-name,
.community-item.is-selected:hover .community-item-author,
.community-item.is-selected:hover .community-item-repo,
.community-item.is-selected:hover .community-item-downloads,
.community-item.is-selected:hover .community-item-updated {
color: var(--text-on-accent);
}
.community-item.mod-active:hover .community-item-name,
.community-item.mod-active:hover .community-item-author,
.community-item.mod-active:hover .community-item-repo,
.community-item.mod-active:hover .community-item-downloads,
.community-item.mod-active:hover .community-item-updated {
color: var(--text-on-accent);
opacity: 0.8;
}
}
/* #endregion */
/* #region Help modal */
.modal.mod-canvas-help .modal-content {
height: 100%;
overflow: scroll;
padding-inline-end: 1em;
}
/* #endregion */
/* #region Settings modal */
.modal.mod-settings {
.vertical-tab-header-group {
border-inline-end: none;
padding: 0 0 1.5em 0;
}
.vertical-tab-header-group-title {
padding: 0 0.5em 0.5em 0.5em;
}
.vertical-tab-content {
background: var(--theme-color-settingsBg);
padding: 2em;
}
.vertical-tab-header {
.setting-search-container {
padding: 0.5rem 1rem 0.5rem 0.5rem;
}
}
}
.modal-setting-nav-bar {
border: none;
padding: 0.5em 0 0 0;
}
.setting-item {
/* Also used when editing bookmarks */
border-top: none;
padding: 0;
margin-bottom: 1.5em;
}
.setting-group {
.setting-item {
/* Also used when editing bookmarks */
border-top: none;
.search-input-container {
padding: var(--input-border-width);
}
}
.setting-item:not(.setting-item-heading)::before {
border: none;
}
.setting-items {
margin-bottom: 4em;
}
.setting-group-search {
margin-bottom: 4em;
}
}
.setting-item-name {
font-size: var(--font-ui-medium);
}
.setting-item-description {
font-size: var(--font-ui-small);
}
.vertical-tab-nav-item-icon {
display: none;
}
body.theme-setting-enableIconsInSettings {
.vertical-tab-nav-item-icon {
display: flex;
}
}
.setting-page-titlebar {
background-color: transparent;
box-shadow: var(--shadow-s);
}
/* #endregion */
/* #region Font settings modal */
.setting-font-list+.setting-item {
border: none;
}
/* #endregion */
/* #region Debug modal */
.modal-content:has(.modal-button-container):has(.debug-textarea) {
/* Show shadow below buttons */
overflow: visible;
padding: var(--input-border-width);
margin-bottom: 2.5rem;
}
.debug-textarea {
margin: 0;
border-radius: 0;
}
/* #endregion */
/* #endregion */
/* #region Helper Classes */
/* #region List Cards */
.list-cards.markdown-preview-view .el-ul {
border-bottom: var(--embed-border-bottom);
border-inline-start: var(--embed-border-left);
border-radius: var(--radius-m);
border-inline-end: var(--embed-border-right);
border-top: var(--embed-border-top);
margin: 0;
background: var(--theme-gradient-cardSet);
border: 0;
padding: 1.5em;
gap: 1.5em;
}
.list-cards.markdown-preview-view .el-ul>ul {
display: grid;
padding: 0;
line-height: var(--line-height-tight);
grid-template-columns: var(--theme-grid-cardSet);
grid-gap: 1em;
margin-block-start: 0;
--list-indent: 1em;
}
.list-cards.markdown-preview-view .el-ul>ul>li {
overflow: hidden;
margin-inline-start: 0;
background-color: var(--theme-color-cardBg);
border-radius: var(--radius-m);
border: none;
box-shadow: var(--shadow-s);
cursor: var(--cursor);
padding: 0 0.75em 0 0.75em;
position: relative;
}
.list-cards.markdown-preview-view .el-ul>ul>li>img {
margin-inline-start: -0.75em;
margin-inline-end: -0.75em;
width: calc(100% + 2 * 0.75em);
max-width: calc(100% + 2 * 0.75em);
display: block;
}
.list-cards.markdown-preview-view .el-ul>ul>li>.list-bullet,
.list-cards.markdown-preview-view .el-ul>ul>li>.list-collapse-indicator,
.list-cards.markdown-preview-view.markdown-rendered.show-indentation-guide .el-ul>ul::before {
display: none;
}
/* #endregion */
/* #endregion */
/* #region Core plugins */
/* #region Core Plugin: Audio Recorder */
/* See also Embeds for the resulting embedded audio */
.side-dock-actions .side-dock-ribbon-action.clickable-icon.is-active:has(svg.svg-icon.lucide-mic) {
animation: pulse-animation 2s infinite;
animation-timing-function: ease-in-out;
}
.side-dock-actions .side-dock-ribbon-action.clickable-icon.is-active:before {
content: "REC";
font-size: 0.8em;
color: var(--theme-color-audioRecordingActive);
}
.side-dock-actions .side-dock-ribbon-action.clickable-icon.is-active svg {
display: none;
}
@keyframes pulse-animation {
0% {
box-shadow: 0 0 0 0em var(--theme-color-redTransparent25);
}
50% {
box-shadow: 0 0 0 0.25em var(--theme-color-redTransparent75);
}
100% {
box-shadow: 0 0 0 0em var(--theme-color-);
}
}
/* #endregion */
/* #region Core Plugin: Backlinks */
.backlink-pane>.tree-item-self,
.outgoing-link-pane>.tree-item-self {
color: var(--theme-color-control);
width: inherit;
padding: 0.25em 0.5em 0.25em 0;
}
.backlink-pane .tree-item-self .tree-item-inner,
.outgoing-link-pane .tree-item-self .tree-item-inner {
padding-inline-start: 0;
}
.backlink-pane .search-result:not(.is-collapsed) .search-result-file-title {
color: var(--theme-color-control);
}
.backlink-pane .search-result-container {
margin-inline-start: 1em;
}
.search-result-file-match-replace-button {
bottom: 0.375em;
}
.embedded-backlinks .backlink-pane .search-result-file-matches {
background: none;
box-shadow: none;
}
.embedded-backlinks {
/* Terrible to use !important, but otherwise this gets an inline style enforcing a min height that can leave lots of unused space at the bottom. */
min-height: 0 !important;
}
.setting-properties-position-below .mod-root .is-live-preview .metadata-container[data-property-count="0"]~.embedded-backlinks {
padding-top: 0.5rem;
}
.embedded-backlinks .backlink-pane {
padding: 0;
}
.embedded-backlinks .backlink-pane .tree-item-self .tree-item-flair-outer {
/* Normally this would be positioned ot the right, but for embedded backlinks this overlaps with the controls */
margin-inline-start: 1em;
}
.embedded-backlinks .nav-buttons-container {
top: 0;
right: 0;
}
.embedded-backlinks .nav-header {
container-type: inline-size;
container-name: embedded-links-nav-header;
}
.embedded-backlinks .nav-buttons-container {
/* On small screens, put .nav-buttons-container on its own row so it doesn't overlap the links */
position: relative;
}
@container embedded-links-nav-header (min-width: 20rem) {
.embedded-backlinks .nav-buttons-container {
position: absolute;
}
}
.embedded-backlinks .backlink-pane .search-result-file-title .tree-item-icon {
position: relative;
padding: 0;
margin-inline-start: 0;
left: inherit;
}
.embedded-backlinks .backlink-pane .search-result-file-matches {
margin-inline-start: 1em;
}
.embedded-backlinks .backlink-pane .search-empty-state {
margin: 0;
}
.embedded-backlinks .nav-header~.search-input-container {
width: calc(100% - 150px);
margin: 0 0 0 0;
}
.embedded-backlinks .backlink-pane>.tree-item-self {
width: inherit;
}
/* stick backlinks in document to bottom */
body.theme-setting-stickyEmbeddedLinks-on .cm-sizer>.embedded-backlinks,
body.theme-setting-stickyEmbeddedLinks-on .mod-footer:has(> .embedded-backlinks) {
position: sticky;
bottom: 0;
width: 100%;
overflow-y: visible;
&>.backlink-pane,
&>.embedded-backlinks>.backlink-pane {
overflow-y: scroll;
&::-webkit-scrollbar {
width: 0;
}
}
}
body.theme-setting-stickyEmbeddedLinks-on .markdown-source-view.mod-cm6 .cm-scroller {
overflow-y: scroll;
flex-grow: 0;
flex-shrink: 1;
flex-basis: 100%;
}
body.theme-setting-stickyEmbeddedLinks-on .setting-properties-position-below .mod-root .is-live-preview .metadata-container {
position: sticky;
bottom: 0;
overflow-y: visible;
}
/* #endregion */
/* #region Core Plugin: Bases */
/* #region All bases */
.body,
.workspace-leaf-content[data-type="bases"] {
--bases-header-height: auto;
--bases-table-header-background: var(--theme-color-tabNavActiveBg);
--bases-view-padding-bottom: 0;
--bases-cards-container-background: transparent;
--bases-cards-group-padding: 0.5em 0.5em;
--bases-embed-border-width: 0;
.bases-header {
--bases-header-padding-start: 0.5em;
--bases-header-padding-end: 0.5em;
}
}
body {
--bases-header-padding-start: 0.5em;
--bases-header-padding-end: 0.5em;
}
.bases-view[data-view-type="table"] {
--bases-embed-border-width: 0;
}
.bases-view {
scrollbar-gutter: auto;
scrollbar-color: var(--theme-color-baseTransparent25) var(--bases-table-header-background);
}
.block-language-base {
background-color: var(--embed-background);
border-bottom: var(--embed-border-bottom);
border-inline-start: var(--embed-border-left);
border-radius: var(--radius-m);
border-inline-end: var(--embed-border-right);
border-top: var(--embed-border-top);
margin: 0;
}
.markdown-source-view.mod-cm6 .cm-content>.bases-embed[contenteditable=false] {
contain: layout !important;
}
.bases-header {
.query-toolbar .query-toolbar-item.mod-views {
overflow: visible;
flex-wrap: wrap;
}
}
.bases-thead {
box-shadow: var(--theme-shadow-indent);
border-radius: var(--tab-radius-active) var(--tab-radius-active) 0 0;
.bases-td {
box-shadow: none;
border-radius: var(--tab-radius-active) var(--tab-radius-active) 0 0;
}
}
.bases-tbody {
box-shadow: none;
.bases-tr {
box-shadow: none;
&:nth-child(odd) .bases-table-cell {
background-color: var(--theme-color-baseTransparent06);
}
.bases-table-cell[disabled="true"] {
background: var(--theme-color-tabNavActiveBg);
}
}
.bases-td:focus-within .bases-table-cell {
box-shadow: 0 0 0 var(--input-border-width) var(--theme-color-base);
border-radius: var(--radius-s);
border: none;
background-color: var(--background-input);
color: var(--text-normal);
}
}
@media (hover: hover) {
.bases-thead .bases-td:hover {
--bases-table-header-color: white;
.bases-table-header-label,
.bases-table-header-sort {
color: var(--bases-table-header-color);
}
background-color: var(--bases-table-header-background-hover);
}
}
/* Checkboxes styled like markdown */
.bases-tbody .metadata-input-checkbox {
border-radius: var(--checkbox-radius);
border-color: var(--theme-color-controlContentArea);
}
@media (hover: hover) {
.bases-tbody .metadata-input-checkbox:hover {
border-color: var(--theme-color-controlContentArea);
background-color: var(--theme-color-controlContentAreaHover);
}
}
.bases-toolbar-menu-container .search-input-container {
--search-icon-color: var(--theme-color-base);
border-bottom: none;
padding-bottom: 0;
}
.bases-toolbar-menu-container-header .close-icon {
align-self: center;
}
.mod-macos .bases-toolbar-menu-container-header .close-icon {
order: -1;
}
.bases-query-container {
.filter-group {
.filter-row {
.conjunction {
min-width: 4.5em;
}
}
.filter-group-actions {
display: flex;
gap: 0.5em;
}
}
.filter-expression {
background: inherit;
}
@media (hover: hover) {
.filter-expression: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);
}
}
}
.bases-sort-container .bases-sort-items {
gap: 0.5em;
}
.bases-toolbar-menu-item.is-selected {
background-color: var(--theme-color-controlBgActive);
color: var(--theme-color-controlActive);
.bases-toolbar-menu-item-info-icon,
.bases-toolbar-menu-item-icon {
color: var(--theme-color-controlActive);
}
}
@media (hover: hover) {
.bases-sort-property-container:hover {
background: transparent;
}
.bases-toolbar-menu-container-header .back-button:hover {
background-color: var(--theme-color-controlBgHover);
color: var(--theme-color-controlHover);
.back-icon {
color: var(--theme-color-controlHover);
}
}
.bases-toolbar-menu-item:hover {
background-color: var(--theme-color-controlBgHover);
color: var(--theme-color-controlHover);
.bases-toolbar-menu-item-info-icon,
.bases-toolbar-menu-item-icon {
color: var(--theme-color-controlHover);
}
}
.bases-toolbar-menu-form .input-row .help-icon {
color: var(--theme-color-controlHover);
}
}
.query-toolbar-menu.mod-filters {
.menu-scroll {
display: flex;
gap: 0.5em;
}
.query-toolbar-section-header {
--flair-background: inherit;
--flair-color: inherit;
}
@media(hover: hover) {
.query-toolbar-section-header:hover {
color: var(--nav-item-color-hover);
background-color: var(--nav-item-background-hover);
border-radius: var(--radius-s);
font-weight: var(--nav-item-weight-hover);
.collapse-icon svg {
color: var(--nav-item-color-hover);
}
}
}
}
/* #endregion */
/* #region Table View */
.bases-view[data-view-type="table"] {
background-color: var(--background-primary);
}
/* #endregion */
/* #region Card View */
.bases-cards-container {
padding-inline-start: var(--bases-header-padding-start);
padding-inline-end: var(--bases-header-padding-end);
}
.bases-cards-item {
color: var(--theme-color-card);
background-color: var(--theme-color-cardBg);
border-radius: var(--radius-m);
border: none;
box-shadow: var(--shadow-s);
padding: 0 0 0.5em;
.mod-title {
padding: 0.5em 0;
}
.bases-cards-label,
.bases-cards-line,
.bases-cards-line:empty:before {
color: var(--theme-color-card);
}
}
.bases-cards-label {
color: var(--theme-color-card);
}
@media (hover: hover) {
.bases-cards-item:hover {
color: var(--theme-color-cardHover);
background-color: var(--theme-color-cardBgHover);
.bases-cards-label,
.bases-cards-line,
.bases-cards-line input,
.bases-cards-line:empty:before {
color: var(--theme-color-cardHover);
}
.bases-cards-cover {
mix-blend-mode: screen;
}
}
}
/* #endregion */
/* #region Bases in the centre panel */
.workspace-leaf-content[data-type="bases"] {
.view-header {
border-bottom: none;
}
.bases-header {
background-color: var(--theme-color-tabNavActiveBg);
border-bottom: none;
padding-top: 0;
padding-bottom: 0.5em;
}
}
/* #endregion */
/* #region Bases in a sidebar panel */
.mod-sidedock .workspace-leaf-content[data-type="bases"] {
--bases-cards-group-padding: 0 0;
.bases-view {
background-color: transparent;
font-size: var(--font-ui-small);
}
.bases-header {
background-color: transparent;
}
.bases-tbody {
background-color: var(--background-primary);
}
}
/* #endregion */
/* #region Embedded bases */
.markdown-source-view.mod-cm6 .cm-content>.bases-embed,
.markdown-source-view.mod-cm6 .cm-content>.cm-lang-base {
--bases-header-padding-end: inherit;
}
.bases-embed {
padding: 0.5em 0 0.5em 0;
.bases-view,
.bases-thead {
background-color: transparent;
}
}
/* #endregion */
/* #endregion */
/* #region Core Plugin: Bookmarks */
.view-action.mod-bookmark {
--icon-color: transparent;
color: var(--theme-color-control);
}
.view-action.mod-bookmark:hover {
color: var(--theme-color-controlHover);
}
/* #endregion */
/* #region Core Plugin: Canvas */
body {
--embed-border-start: none;
--embed-border-end: none;
--embed-border-top: none;
--embed-border-bottom: none;
}
.canvas-submenu {
background: var(--theme-color-interactiveActive);
top: calc(100% - 0.5em);
box-shadow: none;
}
.canvas-card-menu {
bottom: var(--theme-length-controlSetSpacing);
.canvas-card-menu-button.mod-draggable:hover svg {
transform: translateY(0);
filter: none;
}
}
.canvas-controls {
gap: 0.5em;
right: var(--theme-length-controlSetSpacing);
top: var(--theme-length-controlSetSpacing);
}
.canvas-control-group {
background: transparent;
border: none;
box-shadow: none;
}
@media (hover: hover) {
/* The normal hover colour doesn't work with these icons that have a fill colour */
.canvas-card-menu .canvas-card-menu-button:hover {
color: var(--theme-color-control);
}
}
.canvas-node-content,
.canvas-node-content.markdown-embed {
background-color: var(--background-primary);
border-top: var(--embed-border-top);
border-inline-end: var(--embed-border-end);
border-bottom: var(--embed-border-bottom);
border-inline-start: var(--embed-border-start);
border-radius: var(--radius-m);
}
.canvas-node-container {
border: 0.25rem solid var(--theme-color-baseTransparent50)
}
.canvas-node.is-selected .canvas-node-container,
.canvas-node.is-focused .canvas-node-container {
border-color: var(--theme-color-base);
box-shadow: var(--shadow-stationary), 0 0 0 2px var(--themne-color-base);
}
/* #endregion */
/* #region Core Plugin: Command Palette */
/* No special styles: uses shared .prompt */
/* #endregion */
/* #region Core Plugin: Files */
.workspace-leaf-content[data-type="file-explorer"] {
.nav-header {
.nav-buttons-container {
gap: 0.25em;
/* Insert an element to force a line break in the flexbox, separating the first two controls from the others. */
.nav-action-button:has(.svg-icon.lucide-edit),
.nav-action-button:has(.svg-icon.lucide-folder-plus) {
order: 0;
}
/* Style first two controls that will create items as lightweight buttons */
.nav-action-button:has(.svg-icon.lucide-edit),
.nav-action-button:has(.svg-icon.lucide-folder-plus) {
border: none;
box-shadow: var(--theme-shadow-control);
background-color: var(--theme-color-controlLowWeightBg);
color: var(--theme-color-controlText);
font-size: var(--font-ui-smaller);
line-height: var(--line-height-tight);
min-height: 1.5rem;
padding: 0.25em 0.5em;
display: flex;
gap: 0.5em;
&:after {
content: attr(aria-label);
}
}
&:after {
order: 1;
content: "";
width: 100%
}
.nav-action-button {
order: 2;
}
}
@media (hover: hover) {
.nav-action-button:has(.svg-icon.lucide-edit):hover,
.nav-action-button:has(.svg-icon.lucide-folder-plus):hover {
border: none;
background-color: var(--theme-color-controlBgHover);
color: var(--theme-color-controlTextHover);
}
.nav-action-button:has(.svg-icon.lucide-edit).is-active:hover,
.nav-action-button:has(.svg-icon.lucide-folder-plus).has-active-menu:hover {
border: none;
background-color: var(--theme-color-controlBgHover);
color: var(--theme-color-controlTextHover);
.text-button-icon {
color: var(--theme-color-controlTextHover);
}
}
}
}
.nav-folder-title-content {
font-weight: var(--font-bold);
}
}
/* Mobile */
.workspace-drawer {
.workspace-leaf-content[data-type="file-explorer"] {
.nav-header {
.nav-action-button:has(.svg-icon.lucide-edit),
.nav-action-button:has(.svg-icon.lucide-folder-plus) {
min-height: 44px;
flex-shrink: 0;
}
}
.nav-buttons-container {
padding: 0;
}
}
}
.mod-sidedock {
.workspace-leaf-content {
.nav-files-container {
padding: 0.5rem 1rem 2rem 1rem;
}
}
}
.mod-left-split {
.workspace-leaf-content {
.nav-files-container {
/* Reduce left padding as the sidebar also provides visual spacing */
padding-inline-start: 0.5rem;
}
}
}
/* #endregion */
/* #region Core Plugin: File Recovery */
.mode-sync-history {}
.sync-history-list-container {
border: none;
}
.sync-history-list {
gap: 1em;
}
.sync-history-content-container {
background-color: var(--theme-color-settingsBg);
}
.sync-history-content .setting-item,
.sync-history-content .setting-item:first-child,
.mod-sync-history .sync-history-content-buttons {
background-color: var(--theme-color-settingsBg);
border: none;
margin: 0;
padding: 1em;
}
.sync-history-content .setting-item:first-child {
box-shadow: var(--shadow-s);
z-index: 1;
}
.sync-history-list-item-header:hover {
background: transparent;
}
/* #endregion */
/* #region Core Plugin: Footnotes View */
.footnotes-view {
.footnotes-list {
display: flex;
flex-direction: column;
gap: 1em;
.footnote-list-item {
border: 0;
padding-inline-end: 1.75em;
&.is-editing>.footnote {
box-shadow: none;
background-color: transparent;
.footnote-content {
/* TODO: style as for editing properties */
border-radius: var(--metadata-property-radius);
}
.footnote-content:focus-within {
border: none;
background: var(--background-input);
box-shadow: 0 0 0 var(--input-border-width) var(--background-modifier-border-focus);
color: var(--text-normal);
}
}
.footnote {
padding: 0;
.footnote-id {
padding-top: 0.25rem;
}
.footnote-content {
padding: var(--input-padding);
.markdown-embed {
background: transparent;
.markdown-preview-view .markdown-preview-sizer>div {
padding: 0;
}
}
.markdown-embed-link {
top: -0.25rem;
}
}
}
}
}
}
@media (hover: hover) {
.footnotes-view .footnote-content:hover {
background-color: var(--metadata-property-background-hover);
box-shadow: var(--metadata-property-box-shadow-hover);
border-radius: var(--metadata-property-radius-hover);
}
}
/* #endregion */
/* #region Core Plugin: Graph view */
.graph-controls {
min-width: 12em;
/* Make room for controls */
top: var(--theme-length-controlSetSpacing);
right: var(--theme-length-controlSetSpacing);
.graph-controls-button.mod-close,
.graph-controls-button.mod-reset {
top: 0.25rem;
}
.graph-controls-button.mod-close {
inset-inline-end: 0.25rem;
}
.graph-controls-button.mod-reset {
inset-inline-end: 2.25rem;
}
}
/* Smaller in sidebar */
.mod-sidedock {
.graph-controls {
font-size: 0.75rem;
.graph-controls-button.mod-close,
.graph-controls-button.mod-reset {
top: 0.25rem;
}
.graph-controls-button.mod-close {
right: 0.25rem;
height: var(--input-height);
width: var(--input-height);
}
.graph-controls-button.mod-reset {
right: 2.25rem;
}
.graph-control-section .tree-item-inner {
font-size: 0.75rem;
padding: 0;
}
.graph-control-section-header,
.setting-item-name,
.search-input-container input[type="search"],
button {
font-size: 0.75rem;
}
.search-input-container input[type="search"],
.mod-cta {
width: 10em;
}
}
}
.graph-control-section {
border: none;
padding: 0;
}
.graph-control-section>.tree-item-self {
padding: var(--nav-item-padding);
}
.graph-control-section:last-child .tree-item-children {
padding-bottom: 0;
}
.graph-controls .graph-controls-button {
display: none;
}
.graph-controls-button.mod-close {
border-radius: 100%;
color: var(--theme-color-control);
}
.graph-controls-button.mod-close:hover {
color: var(--theme-color-control);
}
.graph-controls .tree-item-self .tree-item-icon {
margin: 0;
}
.workspace-leaf-content[data-type="graph"],
.workspace-leaf-content[data-type="localgraph"] {
.view-header {
border-bottom: none;
}
.view-content {
overflow: hidden;
border-radius: var(--tab-radius);
background-color: var(--theme-color-graphViewBg);
}
.view-content:before,
.view-content:after {
background: transparent;
box-shadow: var(--theme-shadow-indent);
content: "";
display: block;
height: 1rem;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
width: 120%;
}
.view-content:before {
top: -1rem;
}
.view-content:after {
bottom: -1rem;
}
}
.mod-sidedock .workspace-leaf-content[data-type="graph"],
.mod-sidedock .workspace-leaf-content[data-type="localgraph"] {
margin: 0.5rem 0;
}
.graph-view.color-arrow,
.graph-view.color-line {
color: var(--theme-color-graphLine);
opacity: 0.25;
}
.graph-view.color-fill {
color: var(--theme-color-graphLine);
opacity: 0.5;
}
.graph-view.color-fill-tag {}
.graph-view.color-fill-attachment {}
.graph-view.color-circle {}
.graph-view.color-text {
color: var(--theme-color-graphLine);
opacity: 0.5;
}
.graph-view.color-fill-highlight {}
.graph-view.color-line-highlight {}
.graph-view.color-fill-unresolved {}
/* #endregion */
/* #region Core Plugin: Note composer */
/* No special styles: uses shared .prompt */
/* #endregion */
/* #region Core Plugin: Outgoing links */
.tree-item-self.is-clickable.outgoing-link-item {
cursor: var(--cursor-link);
text-decoration-line: var(--link-decoration);
text-decoration-thickness: var(--link-decoration-thickness);
color: var(--link-color);
text-underline-offset: 0.125em;
}
.tree-item-self.is-clickable.outgoing-link-item .tree-item-inner-subtext {
color: inherit;
font-size: 85%;
}
body:not(.is-grabbing) .tree-item-self.is-clickable.outgoing-link-item:hover {
background: transparent;
color: var(--link-color-hover);
font-weight: inherit;
text-decoration-line: var(--link-decoration-hover);
}
.external-link:after {
-webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="24px" height="24px" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="none" stroke-width="1"><path d="M6.125,3.938L1.313,3.938L1.313,12.688L10.063,12.688L10.063,7.875M7.875,1.75L12.25,1.75L12.25,6.125M12.25,1.75L6.125,7.875"/></svg>');
-webkit-mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
background-color: var(--link-external-color);
background-image: none;
content: "";
display: inline-block;
height: var(--font-text-size);
margin-inline-start: 0.25em;
margin-top: -0.25em;
vertical-align: middle;
width: var(--font-text-size);
}
.external-link {
background-image: none;
padding-inline-end: 0;
}
/* #endregion */
/* #region Core Plugin: Page preview */
.popover {
border: none;
box-shadow: var(--shadow-l);
padding: 0.5rem;
}
.popover.hover-popover {
padding: 0.5rem;
}
.popover.hover-popover>.markdown-embed {
background-color: var(--background-primary);
padding: 0;
.markdown-embed-content {
height: 100%;
}
.markdown-embed-link {
top: 4px;
right: auto;
left: auto;
}
}
.popover.hover-popover>.file-embed.mod-empty {
width: auto;
}
/* #endregion */
/* #region Core Plugin: Publish */
.modal.mod-publish {
padding: 0;
}
.modal.mod-publish .modal-title {
font-size: var(--font-ui-medium);
line-height: 1.4em;
margin-bottom: 0;
margin-top: 0;
padding: 0.5em calc(var(--size-2-3) + 2rem);
}
/* #endregion */
/* #region Core Plugin: Search */
.mod-sidedock {
.workspace-leaf-content[data-type="search"] {
padding: 0.5rem 1rem 2rem 1rem;
}
}
.mod-left-split {
.workspace-leaf-content[data-type="search"] {
/* Reduce left padding as the sidebar also provides visual spacing */
padding-inline-start: 0.5rem;
}
}
.workspace-leaf-content[data-type="search"] {
padding: 1rem;
}
.search-row,
.search-info-container,
.search-params,
.search-results-info {
margin: 0 0 0.5rem 0;
padding: 0;
}
.search-params .setting-item {
margin: 0;
}
.search-result-container.mod-global-search {
margin-top: 1em;
padding: 0;
}
.search-results-children {
display: flex;
flex-direction: column;
gap: 1em;
}
.search-results-children>div:first-child:not(.search-result) {
/* I'm not sure what this div is intended for, but its presence creates an extra flex gap at the top of .search-results-children */
display: none;
}
.search-results-info {
border-bottom: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5em;
margin: 0;
}
.search-results-result-count {
width: auto;
}
.search-results-info .dropdown {
max-width: 12em;
text-align-last: left;
}
/* #endregion */
/* #region Core Plugin: Slides */
body {
/* Match slide typography to regular typography */
--r-background-color: var(--background-primary);
--r-block-margin: 20px;
--r-code-font: var(--font-monospace-theme);
--r-heading-color: var(--text-normal);
--r-heading-font-weight: var(--h1-weight);
--r-heading-font: var(--font-text-theme:);
--r-heading-letter-spacing: normal;
--r-heading-line-height: 1.2;
--r-heading-margin: 0.67em 0 0 0;
--r-heading-text-shadow: none;
--r-heading-text-transform: none;
--r-heading1-size: 2.5em;
--r-heading1-text-shadow: none;
--r-heading2-size: 1.6em;
--r-heading3-size: 1.3em;
--r-heading4-size: 1em;
--r-link-color-dark: var(--link-color-active);
--r-link-color-hover: var(--link-color-hover);
--r-link-color: var(--link-color);
--r-main-color: var(--text-normal);
/* For some reason this seems to need to be in px */
--r-main-font-size: 42px;
--r-main-font: var(--font-text-theme);
}
.slides-close-btn {
line-height: 0;
width: 18px;
height: 18px;
}
.reveal-viewport {
background-color: var(--background-primary);
color: var(--text-normal);
}
.slides-close-btn>svg>rect {
display: none;
}
.slides-container .slide .controls button {
background: transparent;
border-radius: 100%;
box-shadow: none;
color: var(--theme-color-control);
display: flex;
align-content: center;
justify-content: center;
height: fit-content;
width: fit-content;
padding: 0.5rem;
}
.slides-container .slide .controls button:hover {
background: var(--theme-color-navigationButtonBgHover);
}
.slides-container .slide .controls button .controls-arrow {
width: 1.5rem;
height: 1.5rem;
}
.reveal .controls .controls-arrow:before,
.reveal .controls .controls-arrow:hover:before {
transform: translateX(0.5em) translateY(1em) rotate(45deg);
width: 1rem;
}
.reveal .controls .controls-arrow:after,
.reveal .controls .controls-arrow:hover:after {
transform: translateX(0.5em) translateY(1em) rotate(-45deg);
width: 1rem;
}
/* #endregion */
/* #region Core Plugin: Sync */
/* Deleted files modal */
.modal:has(.sync-file-tree-container) .modal-content {
/* There's no button container below the list */
padding-bottom: 0;
}
.modal .vault-list,
.modal .sync-file-tree-container {
margin: 0 -2em;
}
.modal:has(.vault-list) .modal-title {
box-shadow: var(--shadow-s);
z-index: 1;
}
.modal:has(.vault-list) .modal-button-container {
padding: 1em 0 0;
}
.is-phone .vault-list-item {
/* Fit button snugly to right */
padding-inline-end: 0.5em;
}
.sync-file-tree-container~p {
/* Targets bulk restore modal */
padding: 1em 0;
}
.modal.mod-sync-log {
padding: 0;
}
.modal.mod-sync-log .modal-title {
font-size: var(--font-ui-medium);
line-height: 1.4em;
margin-bottom: 0;
margin-top: 0;
padding: 0.5em calc(var(--size-2-3) + 2rem);
}
.modal.mod-sync-log .setting-item {
margin: 0;
}
.modal.mod-sync-log .sync-log-container {
border: none;
background: var(--theme-color-logBg);
color: var(--theme-color-log);
padding: 1.5em;
}
/* #endregion */
/* #region Core Plugin: Tags view */
@media (hover: hover) {
/* Don't use heavy background for hovering over rows */
body:not(.is-grabbing) .tag-container .tree-item-self.is-clickable:hover {
background: inherit;
}
}
/* Align collapsible tags with non-collapsible */
.tag-pane-tag {
.tree-item-inner {
margin-inline-start: 9px;
/* This matches hard-coded styles */
}
&.mod-collapsible {
.tree-item-inner {
margin-inline-start: 0;
}
}
}
.tag-pane-tag {
padding-inline-end: 0;
}
.tag-pane-tag>.tree-item-inner {
/* Tags in sidebar styled the same as in notes, but ligher/darker to sit on colored background */
border-radius: var(--tag-radius);
border: var(--tag-border-width) solid var(--tag-border-color);
font-weight: var(--tag-weight);
padding: var(--tag-padding-y) var(--tag-padding-x);
vertical-align: baseline;
}
.tag-pane-tag>.tree-item-inner:before {
content: "#";
display: inline;
}
.tag-pane-tag>.tree-item-inner>.tree-item-inner-text {
display: inline;
}
@media (hover: hover) {
.tag-pane-tag>.tree-item-inner:hover,
.cm-hashtag:hover,
.cm-hashtag-begin:hover+.cm-hashtag-end,
.cm-hashtag-begin:has(+ .cm-hashtag-end:hover) {
cursor: var(--cursor-link);
}
}
/* #endregion */
/* #region Core Plugin: Web viewer */
.workspace-leaf-content[data-type="webviewer"] {
.view-header {
border-bottom: none;
}
.view-content:before,
.view-content:after {
background: transparent;
box-shadow: var(--theme-shadow-indent);
content: "";
display: block;
height: 1rem;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
width: 120%;
}
.view-content:before {
top: -1rem;
}
.view-content:after {
bottom: -1rem;
}
.webviewer-content {
border-top: none;
overflow: hidden;
}
.reader-mode-content {
overflow: hidden;
.markdown-preview-view {
padding: 2rem;
}
}
.webviewer-address {
margin: var(--input-border-width);
}
.search-in-page {
position: absolute;
left: 50%;
top: 0.5em;
transform: translateX(-50%);
}
}
/* #endregion */
/* #endregion */
/* #region Community plugins */
/* #region Community Plugin: Advanced Tables */
/* a.k.a. table-editor-obsidian */
body.theme-setting-overrideAdvancedTables {
.workspace-leaf-content[data-type="advanced-tables-toolbar"] .view-content {
display: flex;
justify-content: center;
align-items: flex-start;
}
[data-type="advanced-tables-toolbar"] .nav-buttons-container .nav-action-button>svg {
fill: currentColor;
--text-muted: currentColor;
/* For some reason the CSV button specifies text-muted as stroke color */
}
.advanced-tables-buttons>div>.title {
font-weight: var(--font-semibold);
font-size: var(--font-ui-small);
color: var(--text-normal);
text-decoration: none;
text-align: center;
display: block;
padding-top: 0.5em;
}
.advanced-tables-row-label {
font-weight: var(--font-semibold);
font-size: var(--font-ui-small);
color: var(--text-normal);
}
[data-type="advanced-tables-toolbar"] .nav-buttons-container .nav-action-button {
margin-inline-end: 0.25em;
}
}
/* #endregion */
/* #region Community Plugin: Calendar */
body.theme-setting-overrideCalendar {
.workspace-leaf-content[data-type="calendar"] {
.view-content {
background-color: var(--theme-color-tabNavActiveBg);
.mod-fade:after {
display: none;
}
}
.container {
border-radius: 1rem;
overflow: hidden;
}
.container>.calendar {
width: 100%;
margin: 0;
}
}
.container:has(> .calendar) {
background-color: var(--theme-color-calendarBg);
margin: 0;
padding: 0 !important;
.nav {
display: flex;
justify-content: space-between;
align-items: flex-end !important;
margin: 0 !important;
padding: 1em 0.5em 0.5em 0.5em !important;
.title {
cursor: default;
line-height: 1;
padding: 0;
}
.right-nav {
align-items: center;
margin: 0;
padding: 0;
}
.arrow svg,
.reset-button {
color: var(--icon-color);
}
}
}
.calendar .day {
padding: 0.5em 1em;
min-height: 10em;
}
.container>.calendar {
table-layout: fixed;
margin: 1rem;
}
.container>.calendar thead th {
background: transparent;
border: none;
text-transform: none;
font-size: var(--font-ui-small);
font-weight: normal;
color: var(--theme-color-control);
text-align: left;
padding: 0.25em 1em;
}
.container>.calendar tbody td {
display: table-cell;
max-width: 0;
border: none;
padding: 0;
vertical-align: top;
}
/* Days for current month */
.container>.calendar tbody td {
.day {
background-color: var(--theme-color-calendarDayBg);
border-radius: 0;
margin: 0;
}
.day.today {
background-color: var(--theme-color-tabNavBg);
color: var(--text-normal);
font-weight: bold;
}
.day.active {
background-color: var(--background-primary);
color: var(--text-normal);
}
}
.container>.calendar tbody td:has(.day.today) {
background-color: var(--theme-color-calendarDayBg);
}
.container>.calendar tbody td:has(.adjacent-month) {
background-color: transparent;
.day {
background-color: transparent;
}
}
@media (hover: hover) {
.container>.calendar tbody td .day:hover {
background: transparent;
}
.container>.calendar tbody td:not(:has(.adjacent-month)) .day:hover {
background-color: var(--theme-color-controlBgHover);
color: var(--theme-color-controlHover);
}
}
.calendar .day {
text-align: left;
}
.mod-sidedock .workspace-leaf-content[data-type="calendar"] {
.view-content {
background: transparent;
}
.container {
border-radius: var(--radius-m);
overflow: hidden;
.calendar .day {
padding: 0.25em 0.25em;
min-height: 3em;
}
}
.container>.calendar {
table-layout: fixed;
width: 100%;
margin: 0.0;
}
.container>.calendar thead th {
padding: 0.25em;
}
.container>.calendar tbody td .day.today {
border-radius: 0.25em;
}
}
}
/* #endregion */
/* #region Community Plugin: Clear Unused Images */
body.theme-setting-overrideClearUnusedImages {
.modal:has(.unused-images-logs) {
padding-bottom: 1em;
}
}
/* #endregion */
/* #region Community Plugin: Columns */
body.theme-setting-overrideColumns {
/* Callout format – this also works without the plugin */
--obsidian-columns-gap: 1em;
--obsidian-columns-padding: 0 0;
--obsidian-columns-min-width: 10em;
--obsidian-columns-def-span: 1;
div[data-callout|="col"].callout {
background-color: var(--background-primary);
/* Override callout bg */
padding: 0;
border-style: none;
>div.callout-title {
display: none;
}
>div.callout-content {
>div[data-callout^="col-md"].callout {
flex-grow: var(--obsidian-columns-custom-span);
flex-basis: calc(var(--obsidian-columns-min-width) * var(--obsidian-columns-custom-span));
width: calc(var(--obsidian-columns-min-width) * var(--obsidian-columns-custom-span));
background-color: var(--background-primary);
/* Override callout bg */
padding: 0;
border-style: none;
}
>div[data-callout|="col-md"].callout {
margin-block-start: 0;
}
>div[data-callout="-0.5"].callout {
--obsidian-columns-custom-span: 0.5;
}
>div[data-callout$="-1"].callout,
>div[data-callout="col-md"].callout {
--obsidian-columns-custom-span: 1;
}
>div[data-callout$="-1.5"].callout {
--obsidian-columns-custom-span: 1.5;
}
>div[data-callout$="-2"].callout {
--obsidian-columns-custom-span: 2;
}
>div[data-callout$="-2.5"].callout {
--obsidian-columns-custom-span: 2.5;
}
>div[data-callout$="-3"].callout {
--obsidian-columns-custom-span: 3;
}
>div[data-callout$="-3.5"].callout {
--obsidian-columns-custom-span: 3.5;
}
>div[data-callout$="-4"].callout {
--obsidian-columns-custom-span: 4;
}
>div[data-callout$="-4.5"].callout {
--obsidian-columns-custom-span: 4.5;
}
>div[data-callout$="-5"].callout {
--obsidian-columns-custom-span: 5;
}
>div[data-callout$="-5.5"].callout {
--obsidian-columns-custom-span: 5.5;
}
>div[data-callout$="-6"].callout {
--obsidian-columns-custom-span: 6;
}
>div[data-callout$="-6.5"].callout {
--obsidian-columns-custom-span: 6.5;
}
>div[data-callout$="-7"].callout {
--obsidian-columns-custom-span: 7;
}
>div[data-callout$="-7.5"].callout {
--obsidian-columns-custom-span: 7.5;
}
>div[data-callout$="-8"].callout {
--obsidian-columns-custom-span: 8;
}
>div[data-callout$="-8.5"].callout {
--obsidian-columns-custom-span: 8.5;
}
>div[data-callout$="-9"].callout {
--obsidian-columns-custom-span: 9;
}
>div[data-callout$="-9.5"].callout {
--obsidian-columns-custom-span: 9.5;
}
>div[data-callout$="-10"].callout {
--obsidian-columns-custom-span: 10;
}
}
}
.columnParent,
div[data-callout="col"].callout>div.callout-content {
display: flex !important;
padding: var(--obsidian-columns-padding);
flex-wrap: wrap;
gap: var(--obsidian-columns-gap);
white-space: normal;
}
.columnChild,
div[data-callout="col"].callout>div.callout-content>* {
flex-grow: var(--obsidian-columns-def-span);
flex-basis: calc(var(--obsidian-columns-min-width) * var(--obsidian-columns-def-span));
width: calc(var(--obsidian-columns-min-width) * var(--obsidian-columns-def-span));
}
}
/* #endregion */
/* #region Community Plugin: Dataview */
body.theme-setting-overrideDataview {
/* Styled to match embeds */
.block-language-dataview {
background-color: var(--embed-background);
border-bottom: var(--embed-border-bottom);
border-inline-start: var(--embed-border-left);
border-radius: var(--radius-m);
border-inline-end: var(--embed-border-right);
border-top: var(--embed-border-top);
margin: 0;
}
@media (hover: hover) {
/* Undo hover effect styles from app. There doesn't seem to be any clickable behaviour. */
.markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget):hover {
box-shadow: none;
border-radius: inherit;
cursor: inherit;
overflow: visible;
}
}
/* List query */
.dataview.list-view-ul {
padding: var(--theme-padding-block);
margin: 0;
& li {
margin: 0 0 0 0.5em;
}
}
/* Table query */
.block-language-dataview:has(.dataview.table-view-table .dataview.table-view-table) {
border-radius: 0;
}
.dataview.table-view-table {
border-collapse: separate;
border-spacing: 0;
margin-block-start: 0;
margin-block-end: 0;
--list-indent: 1em;
}
.dataview.table-view-table th {
font-size: var(--table-header-size);
font-weight: var(--table-header-weight);
color: var(--table-header-color);
font-family: var(--table-header-font);
text-align: start;
line-height: var(--line-height-tight);
}
.dataview.table-view-table thead th:first-of-type {
border-top-left-radius: 0.5rem;
}
.dataview.table-view-table thead th:last-of-type {
border-top-right-radius: 0.5rem;
/* Make room for edit-block button */
padding-inline-end: 2.5rem;
}
.dataview.table-view-table tbody tr:last-of-type td:first-of-type {
border-bottom-left-radius: 0.5rem;
}
.dataview.table-view-table tbody tr:last-of-type td:last-of-type {
border-bottom-right-radius: 0.5rem;
}
.dataview.table-view-table>thead>tr>th,
.dataview.table-view-table>tbody>tr>td {
border: solid var(--table-header-border-width) var(--table-header-border-color);
border-left-width: 0;
border-top-width: 0;
}
.dataview.table-view-table>tbody>tr>td:first-child,
.dataview.table-view-table>thead>tr>th:first-child {
border-left-width: var(--table-header-border-width);
}
.dataview.table-view-table>thead:first-child>tr:first-child th,
.dataview.table-view-table>tbody:first-child>tr:first-child td {
border-top-width: var(--table-header-border-width);
}
/* Table query with card layout (idea borrowed from Minimal) */
.cards .block-language-dataview:has(.dataview.table-view-table) {
background: var(--theme-gradient-cardSetGenerated);
}
.cards table.dataview {
--table-width: 100%;
--table-edge-cell-padding-first: 0;
--table-edge-cell-padding-last: 0;
--table-cell-padding: 0;
line-height: 1.3;
--table-min-width: none;
margin: 0;
}
.cards table.dataview thead {
user-select: none;
width: 180px;
display: none;
float: right;
position: relative;
text-align: right;
height: 24px;
padding-bottom: 0;
}
.cards table.dataview tbody {
clear: both;
padding: 1.5em;
display: grid;
grid-template-columns: var(--theme-grid-cardSet);
grid-column-gap: 1em;
grid-row-gap: 1em;
}
.cards table.dataview tbody:empty {
padding: 0;
}
.cards table.dataview>tbody>tr {
background-color: var(--theme-color-cardBg);
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
overflow: hidden;
transition: box-shadow 0.15s linear;
max-width: var(--theme-length-cardMaxWidth);
height: auto;
border-radius: var(--radius-m);
border: none;
box-shadow: var(--shadow-s);
}
.cards table.dataview.table-view-table>tbody>tr>td,
.cards table.dataview.table-view-table>tbody>tr:last-of-type>td:first-of-type,
.cards table.dataview.table-view-table>tbody>tr:last-of-type>td:last-of-type {
border: none;
border-radius: 0;
padding: 0.5em 0.75em 0.5em 0.75em;
}
.cards table.dataview.table-view-table>tbody>tr>td:has(img) {
padding: 0;
}
.cards table.dataview tbody>tr>td img {
aspect-ratio: var(--theme-cardAspectRatio);
width: 100%;
object-fit: var(--theme-cardImageFit);
max-height: var(--theme-length-cardImageHeight);
display: inline-block;
background-color: var(--theme-color-baseTransparent12);
vertical-align: bottom;
margin: 0;
text-align: center;
}
.cards table.dataview tbody>tr>td button {
width: 100%;
}
/* Task query */
.dataview-container:has(.contains-task-list) {
padding: var(--theme-padding-block);
}
.dataview-container .contains-task-list {
padding-inline-start: 0;
margin: 0;
}
@media (hover: hover) {
/* Style as a link */
.dataview.task-list-item:hover,
.dataview.task-list-basic-item:hover {
box-shadow: none;
background-color: transparent;
cursor: var(--cursor-link);
text-decoration-line: var(--link-decoration);
color: var(--link-color);
}
}
/* Calendar query */
/* Most styles shared with Calendar plugin */
.block-language-dataview:has(.calendar) {
padding: var(--theme-padding-block);
}
/* Empty and error queries */
& div.dataview-error-box,
.dataview.dataview-error {
align-items: center;
border: 0.25rem dashed var(--theme-color-dataviewEmpty);
display: flex;
justify-content: center;
min-height: 5em;
width: 100%;
background-color: transparent;
}
.dataview-error-message,
.dataview-error {
color: var(--theme-color-dataviewEmpty);
text-align: center;
font-family: var(--font-interface);
}
/* Callouts with dataviews */
.callout .dataview.dataview-container {
padding-top: 0;
}
.callout:has(.dataview.list-view-ul) .callout-content,
.callout:has(.dataview-container > .contains-task-list) .callout-content,
.callout:has(.block-language-dataview > .container > table.calendar) .callout-content {
margin: 0 -1.5em;
}
.callout:has(.dataview.table-view-table) .callout-content {
margin: 0 -0.75em;
}
.cards .callout:has(.dataview.table-view-table) .callout-content {
margin: 0 -1.5em;
}
}
/* #endregion */
/* #region Community Plugin: Excalidraw */
body.theme-setting-overrideExcalidraw {
.workspace-leaf-content[data-type="excalidraw"] {
& .view-header {
padding-bottom: 0;
}
& .excalidraw-view {
/* I don't know why the default styles have 1px padding left and right. */
padding: 0;
}
}
.excalidraw-view {
.excalidraw {
.FixedSideContainer_side_top {
top: var(--theme-length-controlSetSpacing) !important;
right: var(--theme-length-controlSetSpacing) !important;
bottom: var(--theme-length-controlSetSpacing) !important;
left: var(--theme-length-controlSetSpacing) !important;
}
.App-bottom-bar {
gap: 0.5rem;
margin: var(--theme-length-controlSetSpacing) !important;
}
/* Control sets */
& .Island,
& .mobile-misc-tools-container {
background: var(--theme-color-controlSetBg);
border: none;
padding: 0.25rem;
gap: 0;
box-shadow: var(--theme-shadow-input);
border-radius: var(--radius-m);
}
& .mobile-misc-tools-container {
gap: 0.5rem;
right: 0;
top: 0;
}
/* Layout structures inside control sets */
.Stack,
.App-toolbar-content {
gap: 0.5em;
padding: 0;
}
.App-toolbar-content {
/* I think these are supposed to be spacers, but I don't think we need them. */
>.ToolIcon__icon:empty {
display: none;
}
/* Container div for undeo/redo, which for somer eason has no class */
>div:last-child {
display: flex;
}
}
/* Menus */
& .dropdown-menu--mobile {
width: auto;
}
& .dropdown-menu .dropdown-menu-container {
background-color: var(--theme-color-menuBg);
border: 0;
box-shadow: var(--shadow-l);
border-radius: var(--radius-l);
margin: 0 1rem;
padding: 0.5em;
&>button {
border: none;
border-color: var(--nav-item-color);
color: var(--nav-item-color);
background-color: var(--nav-item-background);
box-shadow: none;
}
/* Match other hotkeys */
& .dropdown-menu-item__shortcut {
background: transparent;
border: solid 1px var(--theme-color-hotkey);
color: var(--theme-color-hotkey);
font-size: var(--font-ui-smaller);
font-family: var(--font-interface);
padding: 2px 6px;
border-radius: var(--radius-s);
}
}
.popover {
margin: 0 1rem;
}
.context-menu {
background-color: var(--theme-color-menuBg);
border: 0;
box-shadow: var(--shadow-l);
border-radius: var(--radius-l);
padding: 0.5em;
margin: 0;
display: flex;
gap: 0;
flex-direction: column;
& button {
border: none;
border-color: var(--nav-item-color);
color: var(--nav-item-color);
background-color: var(--nav-item-background);
box-shadow: none;
}
@media (hover: hover) {
& button:hover {
border-color: var(--nav-item-color-hover);
color: var(--nav-item-color-hover);
background-color: var(--nav-item-background-hover) !important;
font-weight: var(--nav-item-weight-hover);
--icon-fill-color: var(--nav-item-color-hover);
}
}
hr {
margin: 0.5em 0;
border-top: var(--border-width) solid var(--background-modifier-border);
}
}
}
}
@media (hover: hover) {
.excalidraw-view {
& .excalidraw {
& .dropdown-menu .dropdown-menu-container {
&>button:hover {
border-color: var(--nav-item-color-hover);
color: var(--nav-item-color-hover);
background-color: var(--nav-item-background-hover) !important;
font-weight: var(--nav-item-weight-hover);
--icon-fill-color: var(--nav-item-color-hover);
}
& .dropdown-menu-item__shortcut {
color: inherit;
border-color: inherit;
}
}
}
}
}
/* Patch weird use of .is-mobile that clashes with Obsidian's use */
body:not(.is-mobile) .mobile-misc-tools-container .ToolIcon.is-mobile {
--input-height: 30px;
}
/* Buttons – duplicated from lightweight buttons above */
.excalidraw-view .excalidraw .ToolIcon,
.excalidraw-view .excalidraw .dropdown-menu-button,
.excalidraw-view .excalidraw .sidebar-trigger__label-element {
align-items: center;
background-color: transparent;
border-radius: var(--clickable-icon-radius);
border: none;
box-shadow: none;
color: var(--theme-color-control);
cursor: var(--cursor);
display: flex;
height: 2em;
justify-content: center;
min-height: var(--input-height);
opacity: var(--icon-opacity);
padding: 0.25rem;
text-decoration: none;
transition: opacity 0.15s ease-in-out;
width: 2em;
--icon-fill-color: var(--theme-color-control);
}
.is-mobile .excalidraw-view .excalidraw .ToolIcon,
.is-mobile .excalidraw-view .excalidraw .dropdown-menu-button {
min-height: 44px;
min-width: 44px;
}
.excalidraw-view .excalidraw .dropdown-menu-button:focus {
box-shadow: none;
}
@media (hover: hover) {
.excalidraw-view .excalidraw .Island .ToolIcon:hover,
.excalidraw-view .excalidraw .dropdown-menu-button:hover,
.excalidraw-view .excalidraw .sidebar-trigger__label-element:hover,
.excalidraw-view .excalidraw .mobile-misc-tools-container .ToolIcon:hover,
.excalidraw-view .excalidraw .reset-zoom-button:hover {
color: var(--theme-color-controlHover);
--icon-fill-color: var(--theme-color-controlHover);
background-color: var(--background-modifier-hover);
}
}
/* Active state */
.excalidraw-view .excalidraw .ToolIcon:has(.ToolIcon_type_radio:checked),
.excalidraw-view .excalidraw .dropdown-menu-button:has(~ .dropdown-menu) {
opacity: var(--icon-opacity-hover);
color: var(--theme-color-controlLightweightActive);
background-color: var(--theme-color-interactiveActive);
--icon-fill-color: var(--theme-color-controlLightweightActive);
}
.excalidraw-view .excalidraw .ToolIcon.fillable:has(.ToolIcon_type_radio:checked) .ToolIcon__icon,
.excalidraw-view .excalidraw .ToolIcon.fillable:has(.ToolIcon_type_radio:checked) .ToolIcon__keybinding,
.excalidraw .ToolIcon .ToolIcon_type_checkbox:checked+.ToolIcon__icon,
.excalidraw .ToolIcon .ToolIcon_type_radio:checked+.ToolIcon__icon {
color: inherit;
--icon-fill-color: inherit;
}
@media (hover: hover) {
.excalidraw-view .excalidraw .ToolIcon:hover,
.excalidraw-view .excalidraw .dropdown-menu-button:hover {
color: var(--theme-color-controlHover);
background-color: var(--background-modifier-hover);
}
.excalidraw-view .excalidraw .ToolIcon:has(.ToolIcon_type_radio:checked):hover,
.excalidraw-view .excalidraw .dropdown-menu-button:focus:hover {
background-color: var(--background-modifier-hover);
color: var(--theme-color-controlHover);
}
}
.excalidraw-view .excalidraw .ToolIcon .ToolIcon_type_checkbox:checked+.ToolIcon__icon,
.excalidraw-view .excalidraw .ToolIcon .ToolIcon_type_radio:checked+.ToolIcon__icon {
background-color: transparent;
}
/* Icons inside buttons */
.excalidraw-view .excalidraw .Island .ToolIcon__icon,
.excalidraw-view .excalidraw .Island .ToolIcon__keybinding,
.excalidraw-view .excalidraw .mobile-misc-tools-container .ToolIcon__icon {
--icon-size: var(--icon-s);
--icon-stroke: var(--icon-s-stroke-width);
border-radius: var(--clickable-icon-radius);
color: inherit;
opacity: var(--icon-opacity);
background-color: transparent;
border: none;
}
.excalidraw-view .excalidraw .sidebar-trigger {
box-shadow: none;
background: transparent;
}
.excalidraw-view .excalidraw .App-toolbar__divider {
width: 1rem;
height: 1.5rem;
align-self: center;
background-color: transparent;
margin: 0 0.25rem;
}
.excalidraw-view .excalidraw .ToolIcon {
cursor: default;
}
.excalidraw-view .excalidraw .zoom-actions,
.excalidraw-view .excalidraw .zoom-actions .Stack {
background-color: transparent;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.excalidraw-view .excalidraw .zoom-button {
background: transparent !important;
/* Ugh. */
border-radius: var(--clickable-icon-radius) !important;
font-size: inherit !important;
}
@media (hover: hover) {
.excalidraw-view .excalidraw .zoom-button:hover {
background-color: var(--background-modifier-hover) !important;
/* Ugh. */
}
}
/* Match style of small notice */
.excalidraw .HintViewer {
border-radius: var(--radius-xl);
background-color: var(--background-modifier-message);
color: var(--theme-color-notice);
box-shadow: var(--shadow-s);
padding: 0.5em 0.75em;
width: auto;
& span {
padding: 0;
}
}
.excalidraw-setting-hr {
border: none;
}
}
/* #endregion */
/* #region Community Plugin: Folder Note */
body.theme-setting-overrideFolderNote {
.block-language-ccard {
/* Styled as embed, but with gradient background to give more contrast for cards */
border-bottom: var(--embed-border-bottom);
border-inline-start: var(--embed-border-left);
border-radius: var(--radius-m);
border-inline-end: var(--embed-border-right);
border-top: var(--embed-border-top);
margin: 0;
background: var(--theme-gradient-cardSetGenerated);
border: 0;
padding: 1.5em;
gap: 1.5em;
.cute-card-band {
margin-top: 0;
grid-template-columns: var(--theme-grid-cardSet);
grid-gap: 1em;
}
.cute-card-view,
.is-phone .cute-card-view {
background-color: var(--theme-color-cardBg);
border-radius: var(--radius-m);
border: none;
box-shadow: var(--shadow-s);
cursor: var(--cursor);
padding: 0;
position: relative;
& article {
padding: 0.25em 0.75em 0.5em 0.75em;
}
& h1 {
padding: 0;
font-size: var(--font-text);
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);
margin-bottom: var(--inline-title-margin-bottom);
letter-spacing: -0.015em;
color: var(--inline-title-color);
white-space: pre-wrap;
}
& p,
& span {
color: var(--text-muted);
font-weight: normal;
margin-block-end: 0;
margin-block-start: 0;
font-size: 0.8rem;
}
.thumb-color {
display: none;
}
.thumb-color-folder {
font-weight: bold;
}
}
.cute-card-view:hover {
top: 0;
box-shadow: var(--shadow-s);
}
}
}
/* #endregion */
/* #region Community Plugin: Jira Issue */
body.theme-setting-overrideJiraIssue {
.jira-issue-container {
margin: 0 0 0.5em;
}
.jira-issue-container a {
text-decoration-line: var(--link-decoration);
text-decoration-thickness: var(--link-decoration-thickness);
}
@media (hover: hover) {
.jira-issue-container a:hover {
color: var(--link-color-hover);
text-decoration-line: var(--link-decoration-hover);
}
}
.jira-issue-container .ji-tags {
border: solid 1px var(--embed-background);
border-radius: var(--radius-s);
overflow: hidden;
width: 100%;
align-items: center;
display: flex;
gap: 0.25em;
padding: 0;
.ji-tag,
.ji-tag.is-link {
background-color: transparent;
color: inherit;
margin: 0;
}
.ji-tag.is-link {
color: var(--link-color);
font-weight: var(--link-weight);
text-decoration-line: var(--link-decoration);
text-decoration-thickness: var(--link-decoration-thickness);
cursor: var(--cursor-link);
transition: opacity 0.15s ease-in-out;
}
.ji-tag {
padding: 0.25em;
}
.ji-tag:last-child {
border-radius: var(--radius-s);
border: var(--tag-border-width) solid var(--tag-border-color);
padding: 0.25em 0.5em;
vertical-align: baseline;
line-height: var(--line-height-tight);
margin: 0.25em 0.5em;
background-color: var(--theme-color-jiraIssueStatusBg);
color: var(--theme-color-jiraIssueStatus);
text-transform: uppercase;
font-weight: 700;
}
.ji-tag.is-info {
background-color: var(--theme-color-jiraIssueInfoBg);
color: var(--text-normal);
}
.ji-tag.is-warning {
background-color: var(--theme-color-jiraIssueWarningBg);
color: var(--text-normal);
}
.ji-tag.is-success {
background-color: var(--theme-color-jiraIssueSuccessBg);
color: var(--text-normal);
}
}
.ji-inline-issue.jira-issue-container .ji-tag.ji-band,
.jira-issue-container .ji-tags .ji-tag.ji-band,
.jira-issue-container .ji-tags.has-addons .ji-tag.ji-band {
width: 1em;
height: 1em;
margin: 0 0 0 0.5em;
border-radius: 100%;
flex-shrink: 0;
flex-grow: 0;
padding: 0;
}
.jira-issue-container {
.ji-tags:has(.ji-tag.is-danger) {
border: solid 1px var(--theme-color-jiraIssueDangerBg);
.ji-tag.is-danger {
color: inherit;
flex-grow: 1;
&:last-child {
flex-grow: 0;
color: var(--theme-color-jiraIssueDanger);
background-color: var(--color-red);
border-radius: var(--radius-s);
border: var(--tag-border-width) solid var(--tag-border-color);
font-weight: var(--tag-weight);
padding: 0.25em 0.5em;
vertical-align: baseline;
line-height: var(--line-height-tight);
margin: 0.5em 0.5em 0.5em 0;
}
}
.ji-tag.is-danger.is-delete {
background-color: var(--theme-color-jiraIssueDeleteBg);
width: 1em;
height: 1em;
margin: 0 0 0 0.5em;
border-radius: 100%;
border-top-right-radius: 1em;
flex-shrink: 0;
flex-grow: 0;
padding: 0;
color: var(--theme-color-jiraIssueDanger);
}
}
}
.block-language-jira-search {
background-color: var(--embed-background);
border-bottom: var(--embed-border-bottom);
border-inline-start: var(--embed-border-left);
border-radius: var(--radius-m);
border-inline-end: var(--embed-border-right);
border-top: var(--embed-border-top);
overflow-x: auto;
.jira-issue-container .table {
color: inherit;
background-color: transparent;
}
.jira-issue-container .table td {
border-top: none;
border-bottom: none;
font-size: small;
padding: 0.5em;
border-color: var(--table-border-color);
&:first-child {
border-inline-start: none;
}
&:last-child {
border-inline-end: none;
}
}
.jira-issue-container .table th {
background: transparent;
border-top: none;
border-bottom: none;
padding: 0.5em;
color: var(--text-normal);
border-color: var(--table-border-color);
&:first-child {
border-inline-start: none;
}
&:last-child {
border-inline-end: none;
}
}
.jira-issue-container .table.is-striped tbody tr:not(.is-selected):nth-child(odd),
.jira-issue-container .table.is-striped tbody tr:not(.is-selected):nth-child(odd):hover {
background-color: var(--theme-color-jiraIssueTableStripe);
}
.jira-issue-container .table.is-striped tbody tr:not(.is-selected):nth-child(even),
.jira-issue-container .table.is-striped tbody tr:not(.is-selected):nth-child(even):hover {
background-color: transparent;
}
.jira-issue-container .search-footer {
margin-top: 0.5em;
padding: 0 0.5em 0 1em;
font-size: small;
align-items: center;
>div {
display: flex;
align-items: center;
gap: 1em;
}
}
}
.block-language-jira-count {
.jira-issue-container .ji-tags {
width: auto;
padding-inline-end: 0.5em;
.ji-tag,
.ji-tag.is-link {
text-decoration: none;
color: var(--text-normal);
cursor: default;
background-color: transparent;
&:last-child {
font-weight: bold;
}
}
}
}
}
/* #endregion */
/* #region Community Plugin: Kanban */
body.theme-setting-overrideKanban {
.kanban-plugin {
gap: 0.5rem;
background: var(--theme-gradient-cardSetGenerated);
}
.kanban-plugin__lane {
background-color: var(--theme-color-kanbanLaneBg);
border: none;
border-radius: var(--radius-m);
box-shadow: var(--shadow-s);
}
.kanban-plugin__lane-header-wrapper {
border-bottom: none;
gap: 0.5em;
padding: 0.5em;
}
.kanban-plugin__lane-grip {
margin-inline-end: 0;
color: var(--theme-color-control);
}
.kanban-plugin__lane-setting-wrapper>div {
padding: 0.5em 1em;
}
.kanban-plugin__lane-setting-wrapper>div:last-child {
border: none;
margin-bottom: 0;
}
.kanban-plugin__grow-wrap>textarea {
/* Style as regular text field */
background: var(--background-input);
border-radius: var(--input-radius);
border: none;
box-shadow: 0 0 0 var(--input-border-width) var(--theme-color-base);
font-size: var(--font-ui-small);
line-height: normal;
padding: var(--size-4-1) var(--size-4-2);
}
.kanban-plugin__grow-wrap>textarea:focus {
box-shadow: 0 0 0 var(--input-border-width) var(--theme-color-base);
}
.kanban-plugin__item-button-wrapper {
border-top: none;
}
.kanban-plugin__lane-items {
gap: 0.5em;
margin: 0;
padding: 0.5em 0.5em 0;
}
.kanban-plugin__lane-items>.kanban-plugin__item-wrapper {
margin: 0;
}
.kanban-plugin__item {
border: none;
box-shadow: var(--shadow-s);
&.is-search-hit {
box-shadow: inherit;
}
}
.kanban-plugin__item:has(.markdown-source-view) {
border: var(--input-border-width) solid var(--background-modifier-border-focus);
background-color: var(--background-input);
.kanban-plugin__item-content-wrapper {
background: transparent;
}
.kanban-plugin__item-title-wrapper {
background: transparent;
}
.cm-contentContainer {
padding: 0;
}
.kanban-plugin__item-postfix-button {
/* Style as search input clear button */
border-radius: 100%;
background-color: var(--search-clear-button-color);
color: var(--background-secondary);
cursor: var(--cursor);
line-height: 0;
height: var(--search-clear-button-size);
width: var(--search-clear-button-size);
min-height: var(--search-clear-button-size);
min-width: var(--search-clear-button-size);
margin: auto;
padding: 0 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
transition: color 0.15s ease-in-out;
.kanban-plugin__icon svg {
height: calc(0.8 * var(--search-clear-button-size));
width: calc(0.8 * var(--search-clear-button-size));
display: block;
color: inherit;
}
}
@media (hover: hover) {
.kanban-plugin__item-postfix-button:hover {
background-color: var(--text-normal);
transition: color 0.15s ease-in-out;
}
}
}
.kanban-plugin__drag-container>.kanban-plugin__item-wrapper .kanban-plugin__item {
border-color: none;
box-shadow: var(--theme-shadow-draggingItem);
}
.kanban-plugin__item-title-wrapper:not(:only-child) {
border-bottom: none;
}
.kanban-plugin__item-form {
border: none;
}
.kanban-plugin__item-form .kanban-plugin__item-input-wrapper {
padding: var(--input-border-width);
border: none;
background-color: transparent;
border-radius: 0;
min-height: var(--input-height);
}
/* Autocomplete menu when [[ is entered */
.kanban-plugin__autocomplete {
font-size: inherit;
min-width: 20ch;
max-width: 40ch;
max-height: 12rem;
}
.kanban-plugin__lane-form-wrapper {
background: var(--theme-color-controlSetBg);
border: none;
display: flex;
flex-direction: column;
padding: 0.5rem;
gap: 1rem;
box-shadow: var(--shadow-s);
border-radius: var(--radius-m);
top: 0.5em;
right: 0.5em;
width: auto;
.kanban-plugin__lane-input-wrapper {
padding: 0;
}
.kanban-plugin__checkbox-wrapper {
border: none;
margin: 0;
padding: 0;
}
.kanban-plugin__lane-input-actions {
padding: 0;
justify-content: flex-end;
}
}
.kanban-plugin__draggable-setting-container>.kanban-plugin__placeholder,
.kanban-plugin__setting-item-wrapper {
border: none;
}
.kanban-plugin__setting-item {
background: none;
padding: 1em 0 0;
}
}
/* #endregion */
/* #region Community Plugin: Map View */
body.theme-setting-overrideMapView {
.mod-sidedock .workspace-leaf-content[data-type="map"] {
margin: 0.5rem 0;
}
.view-header {
border-bottom: none;
}
.map-view-main {
overflow: hidden;
border-radius: var(--tab-radius);
background-color: var(--theme-color-graphViewBg);
}
.map-view-main:before,
.map-view-main:after {
/* Match graph view */
background: transparent;
box-shadow: var(--theme-shadow-indent);
content: "";
display: block;
height: 1rem;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
width: 120%;
z-index: 2;
}
.map-view-main:before {
top: -1rem;
}
.map-view-main:after {
bottom: -1rem;
}
.map-view-graph-controls {
background: var(--theme-color-controlSetBg);
border: none;
padding: 0.25rem;
gap: 0;
box-shadow: var(--theme-shadow-input);
border-radius: var(--radius-m);
top: var(--theme-length-controlSetSpacing);
left: var(--theme-length-controlSetSpacing);
min-width: 7em;
.graph-control-div {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
padding: 0;
.collapsible {
padding: 0;
label {
padding-inline-start: 0.5em;
}
}
}
& select,
& button {
flex-basis: calc(50% - 0.325em);
flex-shrink: 1;
flex-grow: 0;
}
.graph-control-follow-div {
display: flex;
gap: 0.5em;
align-content: baseline;
justify-content: flex-start;
padding: 0;
flex-wrap: wrap;
}
.graph-control-follow-label {
margin: 0.1875em 0 0;
}
.graph-control-content {
width: 100%;
flex-shrink: 0;
padding: 0.5em 0;
margin: 0;
gap: 0.25em;
overflow: visible;
}
/* Presets section */
.graph-control-div:last-child .graph-control-content {
/* Presets dropdown */
& .dropdown.mv-map-control:first-child {
flex-shrink: 0;
flex-basis: 100%;
}
}
.top-right-controls.svelte-1sl5jax {
padding: 0;
top: 0.25em;
right: 0.25em;
}
}
.map-view-graph-controls.minimized {
min-width: 0;
}
.map-view-graph-controls.svelte-1sl5jax:not(.minimized):has(.top-right-controls:where(.svelte-1sl5jax)) {
/* Override styles that I think are inserted by Map View. Weird thing for a plugin to do. */
padding: 0.25rem;
}
.map-view-main {
.marker-cluster-small,
.marker-cluster-small div {
background-color: var(--theme-color-greenTransparent25);
}
.marker-cluster-medium,
.marker-cluster-medium div {
background-color: var(--theme-color-yellowTransparent25);
}
.marker-cluster-large,
.marker-cluster-large div {
background-color: var(--theme-color-orangeTransparent25);
}
}
.map-view-graph-controls .lbl-triangle {
border-top-left-radius: var(--radius-s);
border-bottom-left-radius: var(--radius-s);
font-size: var(--nav-item-size);
font-weight: var(--font-medium);
gap: 0.5em;
margin: 0;
padding: 0.25em 1.5em 0.25em 0.5em;
line-height: var(--theme-lineHeight-tight);
width: 1em;
display: flex;
flex-grow: 0;
flex-shrink: 0;
transition: none;
position: relative;
color: transparent;
top: 0;
}
.map-view-graph-controls .lbl-triangle:before {
position: absolute;
top: 50%;
left: 0.5em;
content: "";
background-color: var(--theme-color-control);
display: block;
width: 10px;
height: 10px;
margin-top: -5px;
-webkit-mask-size: 100% 100%;
-webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8L12 17L21 8"></path></svg>');
transition: transform 100ms ease-in-out;
transform: rotate(-90deg);
}
.map-view-graph-controls .controls-toggle:checked+.lbl-triangle {
transform: none;
}
.map-view-graph-controls .controls-toggle:checked+.lbl-triangle:before {
transform: rotate(0deg);
}
.map-view-graph-controls .lbl-toggle {
border-top-right-radius: var(--radius-s);
border-bottom-right-radius: var(--radius-s);
color: var(--text-faint);
font-size: var(--nav-item-size);
font-weight: var(--font-medium);
gap: 0.5em;
margin: 0;
padding: 0.25em 0.5em 0.25em 0;
line-height: var(--theme-lineHeight-tight);
display: flex;
width: auto;
flex-grow: 1;
flex-shrink: 1;
transition: none;
}
@media (hover: hover) {
.map-view-graph-controls .lbl-triangle:hover,
.map-view-graph-controls .graph-control-div:has(.lbl-toggle:hover) .lbl-triangle {
background-color: var(--nav-item-background-hover);
color: transparent;
}
.map-view-graph-controls .lbl-triangle:hover:before,
.map-view-graph-controls .graph-control-div:has(.lbl-toggle:hover) .lbl-triangle:before {
background-color: var(--theme-color-controlHover);
}
.map-view-graph-controls .lbl-toggle:hover,
.map-view-graph-controls .graph-control-div:has(.lbl-triangle:hover) .lbl-toggle {
color: var(--nav-item-color-hover);
background-color: var(--nav-item-background-hover);
font-weight: var(--font-medium);
}
}
.map-view-graph-controls .controls-toggle:checked+.lbl-triangle+.lbl-toggle+.graph-control-content {
display: flex;
flex-wrap: wrap;
}
.map-view-graph-controls .search-input-container {
width: 100%;
padding: var(--input-border-width);
&:before {
top: calc((var(--input-height) - var(--search-icon-size)) / 2 + var(--input-border-width));
}
}
.map-view-main {
.leaflet-control-container {
.leaflet-top {
top: var(--theme-length-controlSetSpacing);
}
.leaflet-right {
right: var(--theme-length-controlSetSpacing);
}
.leaflet-bottom {
bottom: var(--theme-length-controlSetSpacing);
}
.leaflet-left {
left: var(--theme-length-controlSetSpacing);
}
}
}
.map-view-main .leaflet-control-container .leaflet-top.leaflet-right {
background: var(--theme-color-controlSetBg);
border: none;
padding: 0.25rem;
box-shadow: var(--theme-shadow-input);
border-radius: var(--radius-m);
display: flex;
flex-direction: column;
gap: 0.25rem;
& .leaflet-control {
border: none;
margin: 0;
}
& .leaflet-control-zoom {
padding: 0;
}
& a {
align-items: center;
background-color: transparent;
border-radius: var(--clickable-icon-radius);
border: none;
box-shadow: none;
color: var(--theme-color-control);
cursor: var(--cursor);
display: flex;
height: 2em;
justify-content: center;
min-height: var(--input-height);
opacity: var(--icon-opacity);
padding: 0.25rem;
text-decoration: none;
transition: opacity 0.15s ease-in-out;
width: 2em;
font-size: 1rem;
&.on {
opacity: var(--icon-opacity-hover);
color: var(--theme-color-controlLightweightActive);
background-color: var(--theme-color-interactiveActive);
}
}
@media (hover: hover) {
& a:hover {
color: var(--theme-color-controlHover);
background-color: var(--background-modifier-hover);
}
}
}
.leaflet-touch .leaflet-bar a:first-child,
.leaflet-touch .leaflet-bar a:last-child {
border-radius: var(--clickable-icon-radius);
}
.cm-embed-block .block-language-mapview .map-view-main {
background-color: var(--embed-background);
border-bottom: var(--embed-border-bottom);
border-inline-start: var(--embed-border-left);
border-radius: var(--radius-m);
border-inline-end: var(--embed-border-right);
border-top: var(--embed-border-top);
margin: 0;
/* Open button */
& .map-view-graph-controls>.mv-map-control.mv-control-button {
border: none;
box-shadow: var(--theme-shadow-control);
background-color: var(--theme-color-controlLowWeightBg);
color: var(--theme-color-controlText);
font-size: var(--font-ui-smaller);
line-height: var(--line-height-tight);
min-height: 0;
padding: 0.25em 0.5em;
width: 100%;
margin-bottom: 0.5em;
}
& .map-view-graph-controls>.mv-map-control.mv-control-button :focus {
box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
outline: none;
}
@media (hover: hover) {
& .map-view-graph-controls>.mv-map-control.mv-control-button :hover {
border: none;
background: var(--theme-color-controlBgHover);
color: var(--theme-color-controlTextHover);
}
}
}
/* Map view preset save-as modal */
.modal-content:has(.newPresetDialogGrid) {
padding: 1rem 1rem 1rem 2.5rem;
display: flex;
flex-direction: column;
gap: 0.5em;
.newPresetDialogLine:last-child {
display: flex;
justify-content: flex-end;
>button {
margin-inline-start: 0.5rem;
}
}
}
.geolink:has(.cm-underline) {
/* Don't make a double underline */
text-decoration-line: none;
}
}
/* #endregion */
/* #region Community Plugin: Recent Files */
body.theme-setting-overrideRecentFiles {
.recent-files-title {
align-items: center;
padding-inline-end: 0.375em;
}
}
/* #endregion */
/* #region Community Plugin: Style Settings */
body.theme-setting-overrideStyleSettings {
/* Settings modal */
.style-settings-heading {
border-bottom: none;
margin-top: 1.5em;
}
.style-settings-heading[data-level="0"] {
margin-bottom: 0;
}
.setting-item+div>.style-settings-heading[data-level="0"],
.setting-item+.style-settings-heading[data-level="0"] {
margin-top: 1.5em;
}
/* Import/export modals */
.modal-style-settings {
/* Show shadow below buttons */
overflow: visible;
& .modal-content {
padding: 1em 1em 1em;
margin-bottom: 0;
}
& .setting-item {
margin-bottom: 1em;
align-items: baseline;
}
& .setting-item:first-child {
margin-inline-start: 1.5em;
}
& textarea {
margin-top: var(--input-border-width);
margin-bottom: var(--input-border-width);
}
}
.setting-item-heading {
padding: 0 0.5em;
.style-settings-collapse-indicator,
.setting-item-name,
.extra-setting-button {
color: inherit;
}
}
.style-settings-collapse-indicator>svg {
width: 0.75rem;
height: 0.75rem;
margin-inline-start: 0.5rem;
}
.style-settings-heading[data-level="0"]+.style-settings-container,
.style-settings-heading[data-level="1"]+.style-settings-container,
.style-settings-heading[data-level="2"]+.style-settings-container,
.style-settings-heading[data-level="3"]+.style-settings-container,
.style-settings-heading[data-level="4"]+.style-settings-container,
.style-settings-heading[data-level="5"]+.style-settings-container,
.style-settings-heading[data-level="6"]+.style-settings-container {
padding-inline-start: calc(0.5em + 10px + 0.5em);
}
.style-settings-heading[data-level="0"]+.style-settings-container .style-settings-collapse-indicator {
margin-inline-start: 0;
}
&.theme-setting-enableIconsInSettings {
.setting-item.setting-item-heading.style-settings-heading[data-id="kakano-style"]+.style-settings-container {
.setting-item.setting-item-heading.style-settings-heading .style-settings-collapse-indicator:after {
margin-inline-start: 0.5em;
vertical-align: top;
display: inline-block;
width: 1rem;
height: 1rem;
margin: 0.125em 0 0 0.5em;
opacity: 75%;
}
.setting-item.setting-item-heading.style-settings-heading[data-id="heading-baseColor"] .style-settings-collapse-indicator:after {
filter: hue-rotate(0deg);
content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><g><rect x='0' y='0' width='1' height='24' style='fill:rgb(255,0,0);'/><rect x='4' y='0' width='1' height='24' style='fill:rgb(255,255,0);'/><rect x='8' y='0' width='1' height='24' style='fill:rgb(0,255,0);'/><rect x='12' y='0' width='1' height='24' style='fill:rgb(0,255,255);'/><rect x='16' y='0' width='1' height='24' style='fill:rgb(0,0,255);'/><rect x='20' y='0' width='1' height='24' style='fill:rgb(255,0,255);'/><rect x='2' y='0' width='1' height='24' style='fill:rgb(255,127,0);'/><rect x='6' y='0' width='1' height='24' style='fill:rgb(127,255,0);'/><rect x='10' y='0' width='1' height='24' style='fill:rgb(0,255,127);'/><rect x='14' y='0' width='1' height='24' style='fill:rgb(0,127,255);'/><rect x='18' y='0' width='1' height='24' style='fill:rgb(127,0,255);'/><rect x='22' y='0' width='1' height='24' style='fill:rgb(255,0,127);'/><rect x='1' y='0' width='1' height='24' style='fill:rgb(255,63,0);'/><rect x='5' y='0' width='1' height='24' style='fill:rgb(191,255,0);'/><rect x='9' y='0' width='1' height='24' style='fill:rgb(0,255,63);'/><rect x='13' y='0' width='1' height='24' style='fill:rgb(0,191,255);'/><rect x='17' y='0' width='1' height='24' style='fill:rgb(63,0,255);'/><rect x='21' y='0' width='1' height='24' style='fill:rgb(255,0,191);'/><rect x='3' y='0' width='1' height='24' style='fill:rgb(255,191,0);'/><rect x='7' y='0' width='1' height='24' style='fill:rgb(63,255,0);'/><rect x='11' y='0' width='1' height='24' style='fill:rgb(0,255,191);'/><rect x='15' y='0' width='1' height='24' style='fill:rgb(0,63,255);'/><rect x='19' y='0' width='1' height='24' style='fill:rgb(191,0,255);'/><rect x='23' y='0' width='1' height='24' style='fill:rgb(255,0,63);'/></g></svg>");
opacity: 100%;
}
}
}
}
body.theme-setting-overrideStyleSettings.theme-setting-enableIconsInSettings.theme-light {
.setting-item.setting-item-heading.style-settings-heading .style-settings-collapse-indicator:after {
filter: hue-rotate(calc(var(--base-h) * 1deg));
}
/* .setting-item.setting-item-heading.style-settings-heading[data-id="kakano-style"] .style-settings-collapse-indicator:after {
content: "TODO: logo goes here";
} */
.setting-item.setting-item-heading.style-settings-heading[data-id="kakano-style"]+.style-settings-container {
.setting-item.setting-item-heading.style-settings-heading[data-id="heading-ui-background"] .style-settings-collapse-indicator:after {
content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'><g transform='matrix(1,0,0,0.981029,0.249756,0.225573)'><path d='M23.21,0.789L23.21,23.215L0.765,23.215L0.765,0.789L23.21,0.789ZM22.19,5.886L11.988,5.886L11.988,2.828L3.826,2.828L3.826,5.886L1.786,5.886L1.786,21.176L22.19,21.176L22.19,5.886Z' style='fill:hsl(0deg,75%,5%);stroke:hsl(0deg,75%,5%);stroke-width:2.04px;'/></g></svg>");
}
.setting-item.setting-item-heading.style-settings-heading[data-id="heading-notes-appearance"] .style-settings-collapse-indicator:after {
content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'><g transform='matrix(1,0,0,1,-1,-2)'><g transform='matrix(0.913043,0,0,0.913043,1.04348,-5.63549)'><path d='M22.952,12.744L22.952,29.172L1.048,29.172L1.048,12.744L3.238,12.744L3.238,9.458L12,9.458L12,12.744L22.952,12.744Z' style='fill:none;stroke:hsl(0deg,75%,5%);stroke-width:2.19px;'/></g></g></svg>");
}
.setting-item.setting-item-heading.style-settings-heading[data-id="heading-typographySettings"] .style-settings-collapse-indicator:after {
content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='stroke:hsl(0deg,75%,5%);fill:hsl(0deg,75%,5%);fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><path d='M8.39,13.544L6.734,5.84L6.686,5.84L5.03,13.544L8.39,13.544ZM8.846,2.864L13.382,20L9.782,20L8.99,16.376L4.43,16.376L3.638,20L0.038,20L4.574,2.864L8.846,2.864Z' style='fill-rule:nonzero;'/><path d='M19.886,13.544L19.886,16.088C19.886,16.44 19.822,16.744 19.694,17C19.566,17.256 19.402,17.464 19.202,17.624C19.002,17.784 18.782,17.9 18.542,17.972C18.302,18.044 18.07,18.08 17.846,18.08C17.398,18.08 17.078,17.904 16.886,17.552C16.694,17.2 16.598,16.776 16.598,16.28C16.598,15.704 16.742,15.248 17.03,14.912C17.318,14.576 17.798,14.336 18.47,14.192C18.678,14.144 18.91,14.068 19.166,13.964C19.422,13.86 19.662,13.72 19.886,13.544ZM13.838,11.048L16.814,11.048L16.814,10.688C16.814,10.176 16.942,9.768 17.198,9.464C17.454,9.16 17.838,9.008 18.35,9.008C18.91,9.008 19.306,9.148 19.538,9.428C19.77,9.708 19.886,10.096 19.886,10.592C19.886,11.024 19.79,11.352 19.598,11.576C19.406,11.8 19.062,11.976 18.566,12.104L16.694,12.608C16.118,12.768 15.626,12.952 15.218,13.16C14.81,13.368 14.474,13.628 14.21,13.94C13.946,14.252 13.75,14.628 13.622,15.068C13.494,15.508 13.43,16.032 13.43,16.64C13.43,17.072 13.486,17.508 13.598,17.948C13.71,18.388 13.886,18.784 14.126,19.136C14.366,19.488 14.686,19.764 15.086,19.964C15.486,20.164 15.974,20.264 16.55,20.264C17.35,20.264 18.002,20.164 18.506,19.964C19.01,19.764 19.454,19.328 19.838,18.656L19.886,18.656C19.934,18.88 19.986,19.108 20.042,19.34C20.098,19.572 20.182,19.792 20.294,20L23.462,20C23.302,19.616 23.194,19.256 23.138,18.92C23.082,18.584 23.054,18.112 23.054,17.504L23.054,10.712C23.054,10.136 22.994,9.604 22.874,9.116C22.754,8.628 22.526,8.208 22.19,7.856C21.854,7.504 21.382,7.232 20.774,7.04C20.166,6.848 19.366,6.752 18.374,6.752C17.75,6.752 17.162,6.82 16.61,6.956C16.058,7.092 15.578,7.316 15.17,7.628C14.762,7.94 14.438,8.348 14.198,8.852C13.958,9.356 13.838,9.984 13.838,10.736L13.838,11.048Z' style='fill-rule:nonzero;'/></svg>");
}
.setting-item.setting-item-heading.style-settings-heading[data-id="heading-editing"] .style-settings-collapse-indicator:after {
content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'><path d='M12,20L21,20' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,75%,5%);stroke-width:2px;'/><path d='M16.5,3.5C16.898,3.102 17.438,2.879 18,2.879C19.164,2.879 20.121,3.836 20.121,5C20.121,5.562 19.898,6.102 19.5,6.5L7,19L3,20L4,16L16.5,3.5Z' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,75%,5%);stroke-width:2px;'/></svg>");
}
.setting-item.setting-item-heading.style-settings-heading[data-id="heading-mobile"] .style-settings-collapse-indicator:after {
content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'><path d='M13,10L13,20C13,21.104 12.104,22 11,22L5,22C3.896,22 3,21.104 3,20L3,10C3,8.896 3.896,8 5,8L11,8C12.104,8 13,8.896 13,10Z' style='fill:none;stroke:hsl(0deg,75%,5%);stroke-width:2px;'/><path d='M5,4C5,2.903 5.903,2 7,2L19,2C20.097,2 21,2.903 21,4L21,20C21,21.097 20.097,22 19,22L16.6,22' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,75%,5%);stroke-width:2px;'/><path d='M8,18L8.01,18' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,75%,5%);stroke-width:2px;'/></svg>");
}
}
}
body.theme-setting-overrideStyleSettings.theme-setting-enableIconsInSettings.theme-dark {
.setting-item.setting-item-heading.style-settings-heading .style-settings-collapse-indicator:after {
filter: hue-rotate(calc(var(--base-h) * 1deg));
}
.setting-item.setting-item-heading.style-settings-heading[data-id="kakano-style"]+.style-settings-container {
.setting-item.setting-item-heading.style-settings-heading[data-id="heading-background"] .style-settings-collapse-indicator:after {
content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'><g transform='matrix(1,0,0,0.981029,0.249756,0.225573)'><path d='M23.21,0.789L23.21,23.215L0.765,23.215L0.765,0.789L23.21,0.789ZM22.19,5.886L11.988,5.886L11.988,2.828L3.826,2.828L3.826,5.886L1.786,5.886L1.786,21.176L22.19,21.176L22.19,5.886Z' style='fill:hsl(0deg,86%,81%);stroke:hsl(0deg,86%,81%);stroke-width:2.04px;'/></g></svg>");
}
.setting-item.setting-item-heading.style-settings-heading[data-id="heading-notes"] .style-settings-collapse-indicator:after {
content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'><g transform='matrix(1,0,0,1,-1,-2)'><g transform='matrix(0.913043,0,0,0.913043,1.04348,-5.63549)'><path d='M22.952,12.744L22.952,29.172L1.048,29.172L1.048,12.744L3.238,12.744L3.238,9.458L12,9.458L12,12.744L22.952,12.744Z' style='fill:none;stroke:hsl(0deg,86%,81%);stroke-width:2.19px;'/></g></g></svg>");
}
.setting-item.setting-item-heading.style-settings-heading[data-id="heading-typographySettings"] .style-settings-collapse-indicator:after {
content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='stroke:hsl(0deg,86%,81%);fill:hsl(0deg,86%,81%);fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><path d='M8.39,13.544L6.734,5.84L6.686,5.84L5.03,13.544L8.39,13.544ZM8.846,2.864L13.382,20L9.782,20L8.99,16.376L4.43,16.376L3.638,20L0.038,20L4.574,2.864L8.846,2.864Z' style='fill-rule:nonzero;'/><path d='M19.886,13.544L19.886,16.088C19.886,16.44 19.822,16.744 19.694,17C19.566,17.256 19.402,17.464 19.202,17.624C19.002,17.784 18.782,17.9 18.542,17.972C18.302,18.044 18.07,18.08 17.846,18.08C17.398,18.08 17.078,17.904 16.886,17.552C16.694,17.2 16.598,16.776 16.598,16.28C16.598,15.704 16.742,15.248 17.03,14.912C17.318,14.576 17.798,14.336 18.47,14.192C18.678,14.144 18.91,14.068 19.166,13.964C19.422,13.86 19.662,13.72 19.886,13.544ZM13.838,11.048L16.814,11.048L16.814,10.688C16.814,10.176 16.942,9.768 17.198,9.464C17.454,9.16 17.838,9.008 18.35,9.008C18.91,9.008 19.306,9.148 19.538,9.428C19.77,9.708 19.886,10.096 19.886,10.592C19.886,11.024 19.79,11.352 19.598,11.576C19.406,11.8 19.062,11.976 18.566,12.104L16.694,12.608C16.118,12.768 15.626,12.952 15.218,13.16C14.81,13.368 14.474,13.628 14.21,13.94C13.946,14.252 13.75,14.628 13.622,15.068C13.494,15.508 13.43,16.032 13.43,16.64C13.43,17.072 13.486,17.508 13.598,17.948C13.71,18.388 13.886,18.784 14.126,19.136C14.366,19.488 14.686,19.764 15.086,19.964C15.486,20.164 15.974,20.264 16.55,20.264C17.35,20.264 18.002,20.164 18.506,19.964C19.01,19.764 19.454,19.328 19.838,18.656L19.886,18.656C19.934,18.88 19.986,19.108 20.042,19.34C20.098,19.572 20.182,19.792 20.294,20L23.462,20C23.302,19.616 23.194,19.256 23.138,18.92C23.082,18.584 23.054,18.112 23.054,17.504L23.054,10.712C23.054,10.136 22.994,9.604 22.874,9.116C22.754,8.628 22.526,8.208 22.19,7.856C21.854,7.504 21.382,7.232 20.774,7.04C20.166,6.848 19.366,6.752 18.374,6.752C17.75,6.752 17.162,6.82 16.61,6.956C16.058,7.092 15.578,7.316 15.17,7.628C14.762,7.94 14.438,8.348 14.198,8.852C13.958,9.356 13.838,9.984 13.838,10.736L13.838,11.048Z' style='fill-rule:nonzero;'/></svg>");
}
.setting-item.setting-item-heading.style-settings-heading[data-id="heading-editing"] .style-settings-collapse-indicator:after {
content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'><path d='M12,20L21,20' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,86%,81%);stroke-width:2px;'/><path d='M16.5,3.5C16.898,3.102 17.438,2.879 18,2.879C19.164,2.879 20.121,3.836 20.121,5C20.121,5.562 19.898,6.102 19.5,6.5L7,19L3,20L4,16L16.5,3.5Z' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,86%,81%);stroke-width:2px;'/></svg>");
}
.setting-item.setting-item-heading.style-settings-heading[data-id="heading-mobile"] .style-settings-collapse-indicator:after {
content: url("data:image/svg+xml,<svg width='100%' height='100%' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'><path d='M13,10L13,20C13,21.104 12.104,22 11,22L5,22C3.896,22 3,21.104 3,20L3,10C3,8.896 3.896,8 5,8L11,8C12.104,8 13,8.896 13,10Z' style='fill:none;stroke:hsl(0deg,86%,81%);stroke-width:2px;'/><path d='M5,4C5,2.903 5.903,2 7,2L19,2C20.097,2 21,2.903 21,4L21,20C21,21.097 20.097,22 19,22L16.6,22' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,86%,81%);stroke-width:2px;'/><path d='M8,18L8.01,18' style='fill:none;fill-rule:nonzero;stroke:hsl(0deg,86%,81%);stroke-width:2px;'/></svg>");
}
}
}
/* #endregion */
/* #region Community Plugin: Tasks */
body.theme-setting-overrideTasks {
.block-language-tasks {
background-color: var(--embed-background);
border-bottom: var(--embed-border-bottom);
border-inline-start: var(--embed-border-left);
border-radius: var(--radius-m);
border-inline-end: var(--embed-border-right);
border-top: var(--embed-border-top);
margin: 0;
padding: 0.5em;
}
.tasks-edit {
display: inline-flex;
}
.tasks-modal form {
display: flex;
flex-direction: column;
gap: 1.5em;
}
.tasks-modal-section+.tasks-modal-section {
margin: 0;
}
.tasks-modal-priorities {
gap: 1em 0.5em;
}
.tasks-modal-dates {
gap: 0.5em 0.5em;
}
.tasks-modal-priorities label {
grid-row-end: 3;
margin: 0;
padding: 0 0.25em;
}
}
/* #endregion */
/* #region Community Plugin: Plugin Update Tracker */
body.theme-setting-overridePluginUpdateTracker {
.plugin-update-tracker-icon {
background-color: var(--theme-color-baseTransparent12);
border-radius: 9999px;
padding: 0.25rem;
.plugin-update-tracker-icon-chip {
color: var(--flair-color);
font-size: var(--font-ui-smaller);
letter-spacing: 0.05em;
margin-inline-start: 0.25em;
line-height: 1;
padding: 0.375em 0.75em;
text-transform: uppercase;
width: 1rem;
height: 1rem;
border-radius: 9999px;
}
&.plugin-update-tracker-icon--updates-available .plugin-update-tracker-icon-chip {
background-color: var(--theme-color-orangeDarkened);
}
&.plugin-update-tracker-icon--no-updates-available .plugin-update-tracker-icon-chip {
background-color: var(--theme-color-greenDarkened);
}
}
@media (hover: hover) {
.plugin-update-tracker-icon:hover {
color: var(--theme-color-controlHover);
background-color: var(--background-modifier-hover);
svg.plugin-update-tracker-icon-plug-icon {
color: var(--theme-color-controlHover);
}
}
}
/* Bloody stupid HTML classes */
&.theme-setting-distinguishNonContentTabs .workspace-leaf.mod-active .workspace-leaf-content[data-type^="swar8080"],
&.theme-setting-distinguishNonContentTabs.is-focused .workspace-leaf.mod-active .workspace-leaf-content[data-type^="swar8080"] {
.view-header {
background-color: var(--theme-color-tabNavActiveBg);
border-bottom: none;
.mod-fade:after {
display: none;
}
}
.view-content {
padding: 0;
background: var(--theme-gradient-DarkenedTopToBottom);
}
}
/* TODO: Match view-header for web view */
/* Match view-header for web view */
.frrqx {
background-color: var(--theme-color-tabNavActiveBg);
border-bottom: none;
}
.frrqx:before {
content: "Select all";
margin-right: 0.5em;
}
/* Match .community-modal-search-results-wrapper */
.dZeFDr {
flex-direction: row;
flex-wrap: wrap;
border: 0;
padding: 1.5em;
gap: 1.5em;
background: transparent;
/* Match .community-item */
.dDdsrb {
margin: 0;
background: var(--theme-color-communityItemBg);
border-radius: var(--radius-m);
border: none;
box-shadow: var(--shadow-l);
cursor: var(--cursor);
padding: 0;
position: relative;
max-width: 100%;
.hjuwXh {
border: none;
align-items: center;
padding: 0.5em 0.5em 0.5em 1rem;
}
/* Match .community-item-name */
h2.iMNRsU {
font-size: var(--font-ui-medium);
text-align: left;
font-weight: var(--font-semibold);
padding: 0;
margin: 0 0.5em 0 0;
}
.emNspu {
font-size: var(--font-ui-small);
flex-direction: column;
border: none;
/* Match .community-item-author etc. */
>* {
display: block;
padding: 0 1rem;
border: none;
line-height: var(--line-height-tight);
color: var(--text-normal);
}
}
/* Match to .mod-collapsible */
.ljPreH {
border-radius: var(--radius-s);
color: var(--text-faint);
font-size: var(--nav-item-size);
font-weight: var(--font-medium);
padding: 0.25em 0.5em 0.25em 0;
line-height: var(--theme-lineHeight-tight);
display: flex;
align-items: top;
width: 100%;
background-color: transparent;
margin: 0;
.dzHLvC {
margin: 0 0 0 0.6em;
}
.hBsmvY {
font-size: var(--font-ui-medium);
font-weight: normal;
}
}
.kHzOAR {
width: calc(100% - 1.5rem);
overflow: auto;
}
}
}
}
/* #endregion */
/* #region Dev stuff */
/* Show border of content area clearly */
/* .cm-contentContainer > .cm-content {
background-color: rgba(255, 0, 0, 0.1);
} */
/* #endregion */
Reference in a new issue View git blame Copy permalink