/*
Notebook Navigator - Plugin for Obsidian
Copyright (c) 2025-2026 Johan Sanneblad
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see .
=========================================================================
GENERATED FILE - DO NOT EDIT styles.css
=========================================================================
Edit the CSS sources instead:
- src/styles/index.css (import order + per-file descriptions)
- src/styles/sections/*
Generated by: scripts/build-styles.mjs
*/
/* Source: src/styles/sections/core-variables.css */
/* ========================================================================
CSS Variables - Defined at body level for Style Settings compatibility
======================================================================== */
/* Utility class for text that should only be exposed to assistive tech */
.nn-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/**
* Hidden element used to resolve CSS variable colors to computed RGBA values.
* Positioned offscreen and invisible to avoid layout impact while allowing getComputedStyle access.
*/
.nn-color-resolver {
position: absolute;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
visibility: hidden;
z-index: -1;
margin: 0;
padding: 0;
color: var(--nn-color-resolver-value, transparent);
background-color: var(--nn-color-resolver-value, transparent);
}
body {
/* ========================================================================
Padding Variables for Items and Containers
======================================================================== */
/* Container/Scroller padding */
--nn-scroller-padding: 10px; /* Horizontal padding for scroll containers */
/* Navigation item padding */
--nn-nav-item-padding-horizontal: 8px; /* Horizontal padding for navigation items */
/* File item padding */
--nn-file-item-padding-horizontal: 12px; /* Horizontal padding for file items and date headers */
--nn-file-row-gap: 4px; /* Gap between columns inside a file row */
--nn-file-icon-size: 16px; /* Leading icon size for file rows and pinned headers */
--nn-file-icon-slot-width: var(--nn-file-icon-size); /* Leading icon slot width */
--nn-file-icon-slot-gap: 6px; /* Space between leading icon slot and text (matches pinned header) */
--nn-file-name-size-mobile: var(--nn-file-name-size); /* Mobile font size override */
--nn-file-small-size-mobile: var(--nn-file-small-size); /* Mobile small font override */
--nn-file-padding-vertical-mobile: var(--nn-file-padding-vertical); /* Mobile padding per side */
--nn-file-padding-total-mobile: var(--nn-file-padding-total); /* Mobile total padding */
--nn-file-icon-size-mobile: var(--nn-file-icon-size); /* Mobile icon size */
--nn-file-icon-slot-width-mobile: var(--nn-file-icon-slot-width); /* Mobile icon slot width */
/* ========================================================================
Fixed Height Variables for Pixel-Perfect Rendering
======================================================================== */
/* File item heights - fixed pixel values to prevent fractional rendering */
--nn-file-title-line-height: 20px; /* Height of file title text */
--nn-file-padding-vertical: 8px; /* 8px */
--nn-file-padding-vertical-compact: 4px; /* Desktop compact mode padding */
--nn-file-padding-vertical-compact-mobile: 8px; /* Mobile compact mode padding */
--nn-file-padding-total: calc(var(--nn-file-padding-vertical) * 2); /* Total vertical padding (top + bottom) */
--nn-file-single-text-line-height: 19px; /* Height for single-line text (metadata, date, or single preview) */
--nn-file-multiline-text-line-height: 18px; /* Height for multi-line preview text */
--nn-file-title-line-height-mobile: 21px; /* Mobile title text height */
--nn-file-single-text-line-height-mobile: 20px; /* Mobile single-line text height */
--nn-file-multiline-text-line-height-mobile: 19px; /* Mobile preview text height */
--nn-file-thumbnail-min-size: 42px; /* Minimum size for file thumbnails */
--nn-file-thumbnail-max-size: 64px; /* Maximum size for file thumbnails */
/* Font sizes - fixed pixel values to prevent scaling with Obsidian font size */
--nn-file-name-size: 14px; /* Fixed 14px */
--nn-file-small-size: 13px; /* Fixed 13px */
--nn-compact-font-size: 13px; /* Compact mode desktop font size */
--nn-compact-font-size-mobile: 15px; /* Compact mode mobile font size */
/* List group header heights and spacing */
--nn-list-group-header-height: 27px; /* Header row and sticky header */
--nn-list-group-progress-gap-after: 5px; /* Space below manual sort progress bars */
--nn-list-group-goal-header-height: calc(var(--nn-list-group-header-height) + var(--nn-list-group-progress-gap-after));
--nn-list-group-header-spacer-before: 20px; /* Spacer before subsequent headers */
--nn-list-group-header-height-mobile: var(--nn-list-group-header-height);
--nn-list-group-goal-header-height-mobile: var(--nn-list-group-goal-header-height);
/* Navigation item heights - fixed pixel values to prevent fractional rendering */
--nn-nav-line-height: 18px; /* Fixed line height for folder/tag names */
--nn-navitem-count-font-size: 11px; /* Desktop count font size */
--nn-navitem-count-font-size-mobile: 13px; /* Mobile count font size */
/* Note: The following are dynamically set by JavaScript based on user settings:
--nn-setting-nav-item-height
--nn-setting-nav-item-height-mobile
--nn-setting-nav-font-size
--nn-setting-nav-font-size-mobile
--nn-setting-nav-indent
*/
/* Navigation icon size */
--nn-nav-icon-size: 16px; /* Fixed icon size */
/* List title area */
--nn-list-title-padding-block: 8px; /* Vertical padding around list title */
--nn-list-title-font-size: 16px; /* Desktop list title text size */
--nn-file-tag-row-height-base: 22px;
--nn-file-tag-row-gap-base: 4px;
--nn-file-tag-row-height: var(--nn-file-tag-row-height-base);
--nn-file-tag-row-gap: var(--nn-file-tag-row-gap-base);
/* ========================================================================
Header Font Sizes
======================================================================== */
/* Header font sizes */
--nn-desktop-header-font-size: 13px; /* Fixed desktop header font size */
--nn-mobile-header-font-size: 17px; /* Fixed mobile header font size */
--nn-root-reorder-hint-font-size: var(--font-ui-smaller);
--nn-root-reorder-hint-font-size-mobile: var(--font-ui-small);
/* ========================================================================
Pane Width Constraints
======================================================================== */
/* Minimum widths for panes */
--nn-navigation-pane-min-width: 150px; /* Minimum width for navigation pane */
--nn-list-pane-min-width: 150px; /* Minimum width for list pane */
--nn-navigation-pane-min-height: 160px; /* Minimum height for navigation pane (vertical split) */
--nn-list-pane-min-height: 250px; /* Minimum height for list pane (vertical split) */
/* ========================================================================
Notebook Navigator Theme Variables
======================================================================== */
/* -- Foreground colors -- */
--nn-theme-foreground: var(--text-normal);
--nn-theme-foreground-muted: color-mix(in srgb, var(--nn-theme-foreground) 70%, transparent);
--nn-theme-foreground-faded: color-mix(in srgb, var(--nn-theme-foreground) 50%, transparent);
--nn-theme-foreground-faint: color-mix(in srgb, var(--nn-theme-foreground) 10%, transparent);
/* -- Navigation pane -- */
--nn-theme-nav-bg: var(--background-secondary);
--nn-theme-nav-separator-color: var(--nn-theme-foreground);
--nn-theme-nav-separator-background: linear-gradient(
90deg,
transparent 0%,
var(--nn-theme-nav-separator-color) 15%,
var(--nn-theme-nav-separator-color) 85%,
transparent 100%
);
--nn-theme-nav-separator-height: 1px;
--nn-theme-nav-separator-opacity: 0.3;
--nn-theme-nav-indent-guide-color: var(--nn-theme-foreground-faded);
--nn-theme-nav-leader-color: var(--nn-theme-foreground-faded);
--nn-theme-pinned-shortcut-shadow-color: rgba(0, 0, 0, 0.03);
/* -- Navigation items -- */
--nn-theme-navitem-chevron-color: var(--nn-theme-foreground-muted);
--nn-theme-navitem-icon-color: var(--nn-theme-foreground-muted);
--nn-theme-navitem-name-color: var(--nn-theme-foreground);
--nn-theme-navitem-file-name-color: var(--nn-theme-navitem-name-color);
--nn-theme-navitem-name-font-weight: 400;
--nn-theme-navitem-custom-color-name-font-weight: 600;
--nn-theme-navitem-folder-note-name-decoration: underline;
--nn-theme-navitem-folder-note-name-hover-decoration: underline;
--nn-theme-navitem-border-radius: 4px;
--nn-theme-navitem-border-width: 0px;
--nn-theme-navitem-custom-border-color: transparent;
--nn-theme-navitem-hover-bg: var(--background-modifier-hover);
--nn-theme-navitem-hover-border-color: transparent;
--nn-theme-tag-positive-bg: #00800033;
--nn-theme-tag-negative-bg: #ff000033;
/* -- Navigation selection -- */
--nn-theme-navitem-selected-bg: var(--text-selection);
--nn-theme-navitem-selected-border-color: transparent;
--nn-theme-navitem-selected-chevron-color: var(--nn-theme-navitem-chevron-color);
--nn-theme-navitem-selected-icon-color: var(--nn-theme-navitem-icon-color);
--nn-theme-navitem-selected-name-color: var(--nn-theme-navitem-name-color);
--nn-theme-navitem-selected-inactive-bg: var(--background-modifier-hover);
--nn-theme-navitem-selected-inactive-border-color: var(--nn-theme-navitem-selected-border-color);
--nn-theme-navitem-selected-inactive-chevron-color: var(--nn-theme-navitem-selected-chevron-color);
--nn-theme-navitem-selected-inactive-icon-color: var(--nn-theme-navitem-selected-icon-color);
--nn-theme-navitem-selected-inactive-name-color: var(--nn-theme-navitem-name-color);
/* -- File counts -- */
--nn-theme-navitem-count-color: var(--nn-theme-foreground-muted);
--nn-theme-navitem-count-font-weight: 400;
--nn-theme-navitem-count-bg: transparent;
--nn-theme-navitem-count-border-radius: 8px;
--nn-theme-navitem-count-border-width: 0px;
--nn-theme-navitem-count-border-color: transparent;
--nn-theme-navitem-selected-count-color: var(--nn-theme-navitem-count-color);
--nn-theme-navitem-selected-count-bg: var(--nn-theme-navitem-count-bg);
--nn-theme-navitem-selected-count-border-color: var(--nn-theme-navitem-count-border-color);
--nn-theme-navitem-selected-inactive-count-color: var(--nn-theme-navitem-selected-count-color);
--nn-theme-navitem-selected-inactive-count-bg: var(--nn-theme-navitem-selected-count-bg);
--nn-theme-navitem-selected-inactive-count-border-color: var(--nn-theme-navitem-selected-count-border-color);
/* -- List pane -- */
--nn-theme-list-bg: var(--background-primary);
--nn-theme-list-search-active-bg: var(--text-highlight-bg);
--nn-theme-list-search-border-color: var(--background-modifier-border);
--nn-theme-list-separator-color: var(--background-modifier-border);
/* -- Group headers -- */
--nn-theme-list-group-header-color: var(--nn-theme-foreground-muted);
--nn-theme-list-group-header-font-weight: 600;
/* -- File items -- */
--nn-theme-file-name-color: var(--nn-theme-foreground);
--nn-theme-file-name-font-weight: 600;
--nn-theme-file-compact-name-font-weight: 400;
--nn-theme-file-preview-color: var(--nn-theme-foreground-muted);
--nn-theme-file-preview-font-weight: 400;
/* --nn-theme-file-task-color and --nn-theme-file-task-complete-color are
intentionally not declared here: task progress and replacement icon rules use var() fallbacks
to detect whether a theme or Style Settings set them, so customized colors can persist on selected rows. */
--nn-theme-file-task-font-weight: 400;
--nn-theme-file-task-complete-font-weight: 400;
--nn-theme-file-date-color: var(--nn-theme-foreground-faded);
--nn-theme-file-date-font-weight: 400;
--nn-theme-file-word-count-color: var(--nn-theme-foreground-faded);
--nn-theme-file-word-count-font-weight: 400;
--nn-theme-file-parent-color: var(--nn-theme-foreground-faded);
--nn-theme-file-parent-font-weight: 400;
--nn-theme-file-feature-border-radius: 4px;
--nn-theme-file-border-radius: 8px;
/* -- File selection -- */
--nn-theme-file-selected-bg: var(--text-selection);
--nn-theme-file-border-width: 0px;
--nn-theme-file-selected-border-color: transparent;
--nn-theme-file-selected-name-color: var(--nn-theme-file-name-color);
--nn-theme-file-selected-preview-color: var(--nn-theme-file-preview-color);
--nn-theme-file-selected-date-color: var(--nn-theme-foreground-muted);
--nn-theme-file-selected-word-count-color: var(--nn-theme-foreground-muted);
--nn-theme-file-selected-parent-color: var(--nn-theme-foreground-muted);
--nn-theme-file-selected-inactive-bg: var(--background-modifier-hover);
--nn-theme-file-selected-inactive-border-color: var(--nn-theme-file-selected-border-color);
--nn-theme-file-selected-inactive-name-color: var(--nn-theme-file-selected-name-color);
--nn-theme-file-selected-inactive-preview-color: var(--nn-theme-file-selected-preview-color);
--nn-theme-file-selected-inactive-date-color: var(--nn-theme-file-selected-date-color);
--nn-theme-file-selected-inactive-word-count-color: var(--nn-theme-file-selected-word-count-color);
--nn-theme-file-selected-inactive-parent-color: var(--nn-theme-file-selected-parent-color);
/* -- Tag and property pills -- */
--nn-theme-file-tag-color: var(--nn-theme-foreground-faded);
--nn-theme-file-tag-custom-color-text-color: var(--nn-theme-navitem-name-color);
--nn-theme-file-property-color: var(--nn-theme-foreground-faded);
--nn-theme-file-tag-font-weight: 400;
--nn-theme-file-tag-bg: transparent;
--nn-theme-file-tag-border-radius: 10px;
--nn-theme-file-property-bg: transparent;
--nn-theme-file-property-border-radius: 10px;
--nn-theme-file-pill-border-width: 1px;
--nn-theme-file-tag-border-color: color-mix(in srgb, var(--nn-theme-foreground) 30%, transparent);
--nn-theme-file-property-border-color: var(--nn-theme-file-tag-border-color);
--nn-theme-file-selected-tag-color: var(--nn-theme-foreground-muted);
--nn-theme-file-selected-tag-bg: var(--nn-theme-file-tag-bg);
--nn-theme-file-selected-tag-border-color: var(--nn-theme-file-tag-border-color);
--nn-theme-file-selected-property-color: var(--nn-theme-foreground-muted);
--nn-theme-file-selected-property-bg: var(--nn-theme-file-property-bg);
--nn-theme-file-selected-property-border-color: var(--nn-theme-file-property-border-color);
--nn-theme-file-selected-inactive-tag-color: var(--nn-theme-file-selected-tag-color);
--nn-theme-file-selected-inactive-tag-bg: var(--nn-theme-file-tag-bg);
--nn-theme-file-selected-inactive-property-color: var(--nn-theme-file-selected-property-color);
--nn-theme-file-selected-inactive-property-bg: var(--nn-theme-file-property-bg);
/* -- Quick actions -- */
--nn-theme-quick-actions-bg: color-mix(in srgb, var(--background-primary) 95%, transparent);
--nn-theme-quick-actions-border: var(--background-modifier-border);
--nn-theme-quick-actions-border-radius: 4px;
--nn-theme-quick-actions-icon-color: var(--nn-theme-foreground-muted);
--nn-theme-quick-actions-icon-hover-color: var(--nn-theme-foreground);
--nn-theme-quick-actions-separator-color: var(--background-modifier-border);
/* -- Pane headers and titles -- */
/* Pane titles */
--nn-theme-list-heading-color: var(--nn-theme-foreground-muted);
--nn-theme-list-heading-font-weight: 600;
/* Pane headers */
--nn-theme-list-header-icon-color: var(--nn-theme-foreground-muted);
--nn-theme-list-header-breadcrumb-color: var(--nn-theme-foreground-muted);
--nn-theme-list-header-breadcrumb-font-weight: 600;
/* Header buttons */
--nn-theme-header-button-icon-color: var(--icon-color);
--nn-theme-header-button-hover-bg: var(--background-modifier-hover);
--nn-theme-header-button-active-bg: var(--background-modifier-hover);
--nn-theme-header-button-active-icon-color: var(--text-normal);
--nn-theme-header-button-disabled-icon-color: var(--icon-color);
/* -- Calendar -- */
/* Calendar labels */
--nn-theme-calendar-header-color: var(--nn-theme-foreground);
--nn-theme-calendar-weekday-color: var(--nn-theme-foreground-muted);
--nn-theme-calendar-week-color: var(--nn-theme-foreground-muted);
--nn-theme-calendar-day-in-month-color: var(--nn-theme-foreground);
--nn-theme-calendar-day-outside-month-color: var(--nn-theme-foreground-faded);
/* Day states */
--nn-theme-calendar-weekend-bg: color-mix(in srgb, var(--nn-theme-foreground) 10%, transparent);
--nn-theme-calendar-hover-bg: var(--background-modifier-hover);
--nn-theme-calendar-day-today-color: var(--nn-theme-calendar-day-in-month-color);
--nn-theme-calendar-day-today-bg: var(--text-selection);
--nn-theme-calendar-day-active-border-color: var(--interactive-accent);
--nn-theme-calendar-day-active-border-width: 3px;
/* Indicators and feature images */
--nn-theme-calendar-note-indicator-color: var(--nn-theme-foreground-faded);
--nn-theme-calendar-unfinished-task-indicator-color: var(--nn-theme-calendar-note-indicator-color);
--nn-theme-calendar-feature-image-text-color: white;
--nn-theme-calendar-feature-image-overlay-color: rgb(0 0 0 / 0.05);
/* -- Pane divider -- */
--nn-theme-divider-border-color: var(--divider-color);
--nn-theme-divider-resize-handle-hover-bg: var(--interactive-accent);
/* -- Mobile -- */
--nn-theme-mobile-bg: var(--mobile-sidebar-background);
--nn-theme-mobile-list-header-link-color: var(--link-color);
--nn-theme-mobile-list-header-breadcrumb-color: var(--nn-theme-foreground);
--nn-theme-mobile-list-header-breadcrumb-font-weight: 600;
--nn-theme-mobile-toolbar-glass-bg: var(--background-primary);
--nn-theme-mobile-toolbar-button-icon-color: var(--link-color);
--nn-theme-mobile-toolbar-button-active-bg: var(--background-modifier-hover);
--nn-theme-mobile-toolbar-button-active-icon-color: var(--link-color);
/* -- File Separator -- */
--nn-separator-height: 1px;
}
.theme-dark {
--nn-theme-pinned-shortcut-shadow-color: rgba(0, 0, 0, 0.18);
--nn-theme-calendar-feature-image-overlay-color: rgb(0 0 0 / 0.3);
}
/* Source: src/styles/sections/layout-base.css */
/* ========================================================================
Base Layout & Container Styles
======================================================================== */
/* Inline match highlight in file names while search is active */
.nn-search-highlight {
background-color: var(--nn-theme-list-search-active-bg);
color: inherit;
border-radius: 3px;
padding: 0;
font-weight: 600;
}
/* Resets Obsidian's default view-content padding for cleaner integration */
.view-content.notebook-navigator {
padding: 0;
border: none;
}
/* Main container - establishes the plugin's layout foundation */
.notebook-navigator {
height: 100%;
display: flex;
flex-direction: column;
background-color: var(--background-primary);
font-family: var(--font-interface);
}
.nn-svg-filters {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
opacity: 0;
}
/* Removes focus outline on main container for cleaner appearance */
.notebook-navigator:focus {
outline: none;
}
/* Split container - creates the two-pane layout structure */
.nn-split-container {
display: flex;
height: 100%;
overflow: hidden;
position: relative;
--nn-pane-transition-duration: 0.15s;
--nn-pane-transition-timing: ease-in-out;
--nn-selected-file-bg-color: var(--nn-computed-file-selected-bg, var(--nn-theme-file-selected-bg));
--nn-selected-file-name-color: var(--nn-theme-file-selected-name-color);
--nn-selected-file-preview-color: var(--nn-theme-file-selected-preview-color);
--nn-selected-file-date-color: var(--nn-theme-file-selected-date-color);
--nn-selected-file-word-count-color: var(--nn-theme-file-selected-word-count-color);
--nn-selected-file-parent-color: var(--nn-theme-file-selected-parent-color);
--nn-selected-file-tag-color: var(--nn-theme-file-selected-tag-color);
--nn-selected-file-tag-bg: var(--nn-theme-file-selected-tag-bg);
--nn-selected-file-property-color: var(--nn-theme-file-selected-property-color);
--nn-selected-file-property-bg: var(--nn-theme-file-selected-property-bg);
--nn-selected-file-border-color: var(--nn-theme-file-selected-border-color);
--nn-selected-navitem-bg-color: var(--nn-computed-navitem-selected-bg, var(--nn-theme-navitem-selected-bg));
--nn-selected-navitem-name-color: var(--nn-theme-navitem-selected-name-color);
--nn-selected-navitem-chevron-color: var(--nn-theme-navitem-selected-chevron-color);
--nn-selected-navitem-icon-color: var(--nn-theme-navitem-selected-icon-color);
--nn-selected-navitem-count-color: var(--nn-theme-navitem-selected-count-color);
--nn-selected-navitem-count-bg: var(--nn-theme-navitem-selected-count-bg);
--nn-selected-navitem-border-color: var(--nn-theme-navitem-selected-border-color);
--nn-selected-navitem-count-border-color: var(--nn-theme-navitem-selected-count-border-color);
}
.nn-split-container:is([data-navigator-focused='false'], [data-focus-pane='navigation'], [data-focus-pane='search']) {
--nn-selected-file-bg-color: var(--nn-computed-file-selected-inactive-bg, var(--nn-theme-file-selected-inactive-bg));
--nn-selected-file-name-color: var(--nn-theme-file-selected-inactive-name-color);
--nn-selected-file-preview-color: var(--nn-theme-file-selected-inactive-preview-color);
--nn-selected-file-date-color: var(--nn-theme-file-selected-inactive-date-color);
--nn-selected-file-word-count-color: var(--nn-theme-file-selected-inactive-word-count-color);
--nn-selected-file-parent-color: var(--nn-theme-file-selected-inactive-parent-color);
--nn-selected-file-tag-color: var(--nn-theme-file-selected-inactive-tag-color);
--nn-selected-file-tag-bg: var(--nn-theme-file-selected-inactive-tag-bg);
--nn-selected-file-property-color: var(--nn-theme-file-selected-inactive-property-color);
--nn-selected-file-property-bg: var(--nn-theme-file-selected-inactive-property-bg);
--nn-selected-file-border-color: var(--nn-theme-file-selected-inactive-border-color);
}
.nn-split-container:is([data-navigator-focused='false'], [data-focus-pane='files'], [data-focus-pane='search']) {
--nn-selected-navitem-bg-color: var(--nn-computed-navitem-selected-inactive-bg, var(--nn-theme-navitem-selected-inactive-bg));
--nn-selected-navitem-name-color: var(--nn-theme-navitem-selected-inactive-name-color);
--nn-selected-navitem-chevron-color: var(--nn-theme-navitem-selected-inactive-chevron-color);
--nn-selected-navitem-icon-color: var(--nn-theme-navitem-selected-inactive-icon-color);
--nn-selected-navitem-count-color: var(--nn-theme-navitem-selected-inactive-count-color);
--nn-selected-navitem-count-bg: var(--nn-theme-navitem-selected-inactive-count-bg);
--nn-selected-navitem-border-color: var(--nn-theme-navitem-selected-inactive-border-color);
--nn-selected-navitem-count-border-color: var(--nn-theme-navitem-selected-inactive-count-border-color);
}
.nn-scale-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.nn-scale-wrapper > .nn-split-container {
width: 100%;
height: 100%;
transform-origin: top left;
}
.nn-scale-wrapper[data-ui-scale] > .nn-split-container {
width: calc(100% / var(--nn-ui-scale, 1));
height: calc(100% / var(--nn-ui-scale, 1));
transform: scale(var(--nn-ui-scale, 1));
}
/* Source: src/styles/sections/ui-update-notice.css */
/* ========================================================================
Update notice banner
======================================================================== */
.nn-update-banner {
position: absolute;
top: calc(var(--nn-list-group-header-height-mobile, var(--nn-list-group-header-height)) + 8px);
left: 50%;
transform: translate(-50%, 0);
z-index: 10;
min-width: 220px;
max-width: calc(100% - 32px);
background-color: var(--interactive-accent);
color: var(--text-on-accent);
padding: 12px 20px;
height: auto;
border-radius: 10px;
border: none;
cursor: pointer;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font: inherit;
text-align: left;
opacity: 1;
transition:
opacity 0.4s ease,
transform 0.4s ease;
}
.nn-split-container .nn-update-banner {
background: var(--interactive-accent);
border: none;
color: var(--text-on-accent);
padding: 12px 20px;
appearance: none;
}
.nn-update-banner:focus-visible {
outline: none;
box-shadow:
0 0 0 2px var(--background-primary),
0 0 0 4px var(--interactive-accent),
0 8px 18px rgba(0, 0, 0, 0.18);
}
.nn-update-banner.fade-out {
opacity: 0;
transform: translate(-50%, -18px);
}
.nn-update-banner__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.nn-update-banner__label {
font-weight: 600;
font-size: 12px;
}
.nn-update-banner__instruction {
font-size: 11px;
color: var(--text-on-accent);
opacity: 0.9;
}
.nn-update-status {
margin-top: 6px;
font-weight: 600;
color: var(--color-red);
}
.nn-update-status.is-hidden {
display: none;
}
@media (max-width: 600px) {
.nn-update-banner {
left: 8px;
right: 8px;
transform: none;
max-width: none;
width: auto;
justify-content: center;
top: 8px;
}
.nn-update-banner__text {
align-items: center;
text-align: center;
}
.nn-update-banner.fade-out {
transform: translateY(-12px);
}
}
/* Source: src/styles/sections/ui-notices.css */
/* ========================================================================
Notices
======================================================================== */
.nn-cache-rebuild-notice {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
box-sizing: border-box;
}
.nn-cache-rebuild-notice-container {
width: 100%;
box-sizing: border-box;
}
.nn-cache-rebuild-notice-message {
width: 100%;
min-width: 0;
flex: 1 1 auto;
box-sizing: border-box;
}
.nn-cache-rebuild-notice-title {
font-weight: 600;
line-height: 1.25;
}
.nn-cache-rebuild-notice-description {
font-size: 13px;
line-height: 1.25;
opacity: 0.85;
}
.nn-cache-rebuild-notice-progress-bar {
display: block;
width: 100%;
max-width: none;
height: 6px;
border-radius: 999px;
overflow: hidden;
}
.nn-cache-rebuild-notice-progress-bar::-webkit-progress-bar {
background-color: var(--background-modifier-border);
border-radius: 999px;
}
.nn-cache-rebuild-notice-progress-bar::-webkit-progress-value {
background-color: var(--interactive-accent);
border-radius: 999px;
}
@media (max-width: 600px) {
.nn-cache-rebuild-notice-description {
font-size: 14px;
}
}
/* Source: src/styles/sections/layout-panes.css */
/* ========================================================================
Pane Layout
======================================================================== */
/* Navigation pane - contains the folder tree navigation */
.nn-navigation-pane {
flex: 0 0 auto; /* Don't grow or shrink, use explicit width */
min-width: var(--nn-navigation-pane-min-width);
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--nn-theme-nav-bg);
border-right: 1px solid var(--nn-theme-divider-border-color);
position: relative; /* Enables absolute positioning for resize handles */
/* Performance optimization for virtualized content */
contain: layout style;
}
/* Right pane - contains the file list */
.nn-list-pane {
flex: 1;
min-width: var(--nn-list-pane-min-width);
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--nn-theme-list-bg);
position: relative; /* Enable absolute positioning for resize handle */
/* Performance optimization for virtualized content */
contain: layout style;
}
/* Override backgrounds when desktop background mode is set to primary or secondary */
/* Primary mode: use list background for navigation pane */
.nn-split-container.nn-desktop.nn-bg-primary {
--nn-theme-nav-bg: var(--nn-theme-list-bg);
}
/* Secondary mode: use navigation background for list pane */
.nn-split-container.nn-desktop.nn-bg-secondary {
--nn-theme-list-bg: var(--nn-theme-nav-bg);
}
/* Mobile pane backgrounds follow --nn-theme-mobile-bg */
.nn-split-container.nn-mobile {
--nn-theme-nav-bg: var(--nn-theme-mobile-bg);
--nn-theme-list-bg: var(--nn-theme-mobile-bg);
}
.nn-split-container.nn-orientation-vertical {
flex-direction: column;
}
.nn-split-container.nn-orientation-vertical .nn-navigation-pane {
width: 100%;
min-width: 0;
min-height: var(--nn-navigation-pane-min-height);
flex: 0 1 auto;
border-right: none;
}
.nn-split-container.nn-orientation-vertical .nn-list-pane {
min-width: 0;
width: 100%;
min-height: var(--nn-list-pane-min-height);
}
.nn-split-container.nn-orientation-vertical:not(.nn-single-pane) .nn-navigation-pane {
border-bottom: 1px solid var(--nn-theme-divider-border-color);
}
/* Pane divider resize handle - overlay on the left edge of list pane */
.nn-resize-handle {
width: 3px;
background-color: transparent;
cursor: col-resize;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 300;
touch-action: none;
-webkit-tap-highlight-color: transparent;
}
.nn-split-container.nn-orientation-vertical .nn-resize-handle {
width: 100%;
height: 3px;
cursor: row-resize;
bottom: auto;
right: 0;
}
/* Pane divider resize handle hover state - provides visual feedback */
.nn-resize-handle:hover {
background-color: var(--nn-theme-divider-resize-handle-hover-bg);
}
/* Pane divider resize handle active state - maintains visibility during resize */
.nn-split-container.nn-resizing .nn-resize-handle {
background-color: var(--nn-theme-divider-resize-handle-hover-bg);
}
/* ========================================================================
Single-pane Layout
======================================================================== */
/* Single-pane container - use grid for consistent structure while allowing sliding */
.nn-split-container.nn-single-pane {
display: grid;
grid-template-columns: 100%;
grid-template-rows: minmax(0, 1fr) auto;
position: relative;
overflow: hidden;
height: 100%;
}
/* Single-pane panes - positioned in grid and animated with transforms */
.nn-split-container.nn-single-pane .nn-navigation-pane,
.nn-split-container.nn-single-pane .nn-list-pane {
width: 100%;
max-width: 100%;
height: 100%;
grid-column: 1;
grid-row: 1;
min-height: 0;
transition: transform var(--nn-pane-transition-duration) var(--nn-pane-transition-timing);
}
.nn-split-container.nn-single-pane .nn-single-pane-calendar {
grid-column: 1;
grid-row: 2;
}
/* Disable transitions for one-frame mode changes (dual-pane -> single-pane) */
.nn-split-container.nn-single-pane.nn-suppress-pane-transitions .nn-navigation-pane,
.nn-split-container.nn-single-pane.nn-suppress-pane-transitions .nn-list-pane {
transition: none;
}
.nn-split-container.nn-single-pane.nn-pane-transitioning .nn-navigation-pane,
.nn-split-container.nn-single-pane.nn-pane-transitioning .nn-list-pane {
will-change: transform;
}
/* Single-pane view states - show navigation view */
.nn-split-container.nn-single-pane.show-navigation .nn-navigation-pane {
transform: none;
}
.nn-split-container.nn-single-pane.show-navigation .nn-list-pane {
transform: translateX(100%);
}
/* Single-pane view states - show files view */
.nn-split-container.nn-single-pane.show-files .nn-navigation-pane {
transform: translateX(-100%);
}
.nn-split-container.nn-single-pane.show-files .nn-list-pane {
transform: none;
}
/* ========================================================================
Mobile Layout
======================================================================== */
/* Widen the divider hit area for touch dragging. The handle only renders in
dual pane mode, which is limited to tablets on mobile. */
.notebook-navigator-mobile .nn-resize-handle {
width: 12px;
}
.notebook-navigator-mobile .nn-split-container.nn-orientation-vertical .nn-resize-handle {
width: 100%;
height: 12px;
}
/* Add touch-action to prevent browser gestures interfering */
.notebook-navigator-mobile .nn-split-container {
touch-action: pan-y;
}
/* Source: src/styles/sections/ui-headers.css */
/* ========================================================================
Header Styles
======================================================================== */
/* Pane headers - consistent header styling for both panes */
.nn-pane-header {
padding: 8px;
display: flex;
justify-content: flex-end;
align-items: center;
min-height: 32px;
height: 32px;
}
/* File pane header needs flex layout for title and buttons */
.nn-list-pane .nn-pane-header > .nn-header-actions {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
/* Navigation pane header - matches folder tree background for visual consistency */
.nn-navigation-pane .nn-pane-header {
background-color: var(--nn-theme-nav-bg);
}
/* File list pane header */
.nn-list-pane .nn-pane-header {
background-color: var(--nn-theme-list-bg);
}
/* Header actions container - groups action buttons in headers */
.nn-header-actions {
display: flex;
gap: 2px;
align-items: center;
}
.nn-header-actions-profile {
gap: 8px;
flex: 1 1 auto;
overflow: hidden;
}
.nn-pane-header-profile {
gap: 4px;
padding-right: 0;
justify-content: flex-start;
display: inline-flex;
align-items: center;
}
.nn-pane-header-profile[role='button'] {
cursor: pointer;
}
.nn-pane-header-profile:focus-visible {
outline: 1px solid var(--interactive-accent);
outline-offset: 1px;
border-radius: 6px;
}
.nn-pane-header-profile-chevron {
width: var(--nn-nav-icon-size);
height: var(--nn-nav-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--nn-theme-list-header-breadcrumb-color);
}
.nn-pane-header-title {
font-size: var(--nn-desktop-header-font-size);
font-weight: var(--nn-theme-list-header-breadcrumb-font-weight);
color: var(--nn-theme-list-header-breadcrumb-color);
padding-left: 12px;
flex: 1;
min-width: 0;
display: flex;
align-items: center;
}
.nn-pane-header-title.nn-pane-header-profile {
padding-left: 0;
}
.nn-single-pane .nn-list-pane .nn-pane-header-title {
padding-left: 2px;
}
.nn-pane-header-icon {
width: var(--nn-nav-icon-size);
height: var(--nn-nav-icon-size);
margin-inline-end: 8px;
flex-shrink: 0;
display: flex;
align-items: center;
color: var(--nn-theme-list-header-icon-color);
overflow: visible;
}
.nn-pane-header-icon svg {
width: var(--nn-nav-icon-size);
height: var(--nn-nav-icon-size);
}
.nn-pane-header-icon.nn-emoji-icon {
font-size: var(--nn-nav-icon-size);
line-height: var(--nn-nav-icon-size);
text-align: center;
justify-content: center;
}
.nn-pane-header-icon.nn-iconfont {
font-size: var(--nn-nav-icon-size);
line-height: var(--nn-nav-icon-size);
}
.nn-pane-header-text {
line-height: var(--nn-nav-line-height);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--nn-theme-list-header-breadcrumb-color);
flex: 1;
min-width: 0;
}
.nn-pane-header-profile .nn-pane-header-text {
flex: 0 1 auto;
}
.nn-pane-header .nn-pane-header-folder-note {
text-decoration: var(--nn-theme-navitem-folder-note-name-decoration);
}
.nn-pane-header .nn-pane-header-folder-note:hover {
cursor: pointer;
text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration);
}
/* ========================================================================
Mobile Headers + Breadcrumb
======================================================================== */
/* Simplified mobile headers. Keyed on the phone chrome header class so the desktop
headers rendered on tablets keep the desktop height and per-pane backgrounds. */
.notebook-navigator-mobile .nn-pane-header-simple {
flex-shrink: 0;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 var(--nn-file-item-padding-horizontal);
background-color: var(--nn-theme-list-bg);
}
.notebook-navigator-mobile .nn-pane-header-simple .nn-pane-header-profile {
width: 100%;
flex: 1 1 auto;
justify-content: center;
text-align: center;
}
.notebook-navigator-mobile .nn-pane-header-simple .nn-pane-header-title {
font-size: var(--nn-mobile-header-font-size);
font-weight: var(--nn-theme-mobile-list-header-breadcrumb-font-weight);
color: var(--nn-theme-mobile-list-header-breadcrumb-color);
width: 100%;
text-align: center;
}
.notebook-navigator-mobile .nn-pane-header-simple .nn-pane-header-profile .nn-pane-header-text {
color: var(--nn-theme-mobile-list-header-breadcrumb-color);
}
/* Mobile header container */
.notebook-navigator-mobile .nn-mobile-header {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
/* Scrollable breadcrumb container */
.notebook-navigator-mobile .nn-breadcrumb-scroll {
flex: 1;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
margin-left: 44px; /* Start right after the arrow button */
}
/* Add right margin when no icon for centering */
.notebook-navigator-mobile .nn-mobile-header-no-icon .nn-breadcrumb-scroll {
margin-right: 44px;
}
.notebook-navigator-mobile .nn-breadcrumb-scroll::-webkit-scrollbar {
display: none;
}
/* Fade overlay positioned just right of back arrow */
.notebook-navigator-mobile .nn-breadcrumb-fade {
position: absolute;
left: 44px; /* Position just right of the back arrow */
top: 0;
bottom: 0;
width: 24px;
background: linear-gradient(to right, var(--nn-theme-list-bg) 0%, transparent 100%);
pointer-events: none;
z-index: 1;
}
/* Mobile back button */
.notebook-navigator-mobile button.nn-back-button {
position: absolute;
left: 0;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 10px;
z-index: 1;
opacity: 1;
}
/* Increase stroke width for back button arrow and apply link color */
.notebook-navigator-mobile button.nn-back-button svg {
stroke: var(--nn-theme-mobile-list-header-link-color);
width: 20px; /* Default size for Android */
height: 20px;
}
/* iOS/iPadOS-specific back button adjustments */
.notebook-navigator-mobile:not(.notebook-navigator-android) button.nn-back-button {
padding: 4px; /* Reduce padding to allow larger icon (44px - 8px padding = 36px space) */
}
/* iOS/iPadOS-specific back button chevron styling (36px actual, ~32px visual due to Lucide padding) */
.notebook-navigator-mobile:not(.notebook-navigator-android) button.nn-back-button svg {
width: 36px;
height: 36px;
}
/* Mobile header title */
.notebook-navigator-mobile .nn-mobile-title {
font-weight: var(--nn-theme-mobile-list-header-breadcrumb-font-weight);
font-size: var(--nn-mobile-header-font-size);
color: var(--nn-theme-mobile-list-header-breadcrumb-color);
white-space: nowrap;
padding-left: 12px; /* Standard padding for snap position */
}
/* Breadcrumb current segment - desktop uses list header color, mobile uses navitem color */
.nn-path-current {
color: var(--nn-theme-list-header-breadcrumb-color);
}
/* Mobile breadcrumb current segment - use mobile-specific theme color */
.notebook-navigator-mobile .nn-path-current {
color: var(--nn-theme-mobile-list-header-breadcrumb-color);
}
/* Mobile breadcrumb separator - use same color as current segment */
.notebook-navigator-mobile .nn-path-separator {
color: var(--nn-theme-mobile-list-header-breadcrumb-color);
}
/* Search bar container */
.nn-search-bar-container {
height: 0;
overflow: hidden;
background-color: var(--nn-theme-list-bg);
}
.nn-search-bar-container.nn-search-bar-visible {
height: 44px;
}
/* Search input wrapper */
.nn-search-input-wrapper {
display: flex;
align-items: center;
height: 44px;
padding: 0 10px 6px;
background-color: var(--nn-theme-list-bg);
}
/* Search input container */
.nn-search-input-container {
position: relative;
width: 100%;
height: 32px;
}
/* Search icon (clickable toggle between search providers) */
.nn-search-input-icon {
position: absolute;
left: 10px;
top: 8px;
width: 16px;
height: 16px;
font-size: 16px;
line-height: 16px;
color: var(--nn-theme-list-header-icon-color);
cursor: pointer;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nn-search-input-icon:focus-visible {
outline: 2px solid var(--interactive-accent);
outline-offset: 2px;
}
.nn-search-input-icon svg {
width: 16px;
height: 16px;
display: block;
}
/* Search input field */
input.nn-search-input {
width: 100%;
height: 32px;
padding: 4px 60px 4px 36px;
font-size: 13px;
color: var(--nn-theme-file-selected-name-color);
background: var(--nn-theme-list-bg);
border: 1px solid var(--nn-theme-list-search-border-color);
border-radius: 999px;
outline: none;
box-sizing: border-box;
}
.nn-search-input-container--has-shortcut input.nn-search-input {
padding-right: 84px;
}
/* Active search state - when there's a search query */
input.nn-search-input.nn-search-active {
background: var(--nn-theme-list-search-active-bg);
}
/* Maintain highlight background on hover when search is active */
input.nn-search-input.nn-search-active:hover {
background: var(--nn-theme-list-search-active-bg);
}
/* Focus state */
input.nn-search-input:focus {
border-color: var(--nn-theme-list-search-border-color);
box-shadow: 0 0 0 2px var(--nn-theme-list-search-border-color);
}
input.nn-search-input::placeholder {
color: var(--nn-theme-list-header-breadcrumb-color);
}
/* Search tag suggestion popover */
.nn-search-tag-suggestion {
display: flex;
align-items: center;
padding: 4px 10px;
min-height: 28px;
}
.nn-search-tag-suggestion__label {
display: flex;
align-items: baseline;
width: 100%;
min-width: 0;
font-size: var(--nn-file-name-size-mobile, var(--nn-file-name-size));
color: var(--nn-theme-file-name-color);
gap: 6px;
}
.nn-search-tag-suggestion__prefix {
font-size: var(--nn-file-small-size-mobile, var(--nn-file-small-size));
color: var(--nn-theme-list-header-breadcrumb-color);
flex-shrink: 0;
}
.nn-search-tag-suggestion__text {
flex: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nn-search-tag-suggestion__text .suggestion-highlight {
background-color: var(--nn-theme-list-search-active-bg);
color: var(--nn-theme-file-name-color);
border-radius: 3px;
padding: 0 1px;
}
/* Clear button */
/* Hide webkit search cancel button */
.nn-search-input::-webkit-search-cancel-button {
display: none;
}
/* Source: src/styles/sections/ui-search.css */
/* ========================================================================
Mobile Search Styles
======================================================================== */
/* Mobile search input wrapper - inherits padding from base styles */
.notebook-navigator-mobile .nn-search-input-wrapper {
height: 48px;
background-color: var(--nn-theme-list-bg);
}
/* Mobile search bar container */
.notebook-navigator-mobile .nn-search-bar-container {
background-color: var(--nn-theme-list-bg);
}
.notebook-navigator-mobile .nn-search-bar-container.nn-search-bar-visible {
height: 48px;
}
/* Mobile search input container */
.notebook-navigator-mobile .nn-search-input-container {
height: 36px;
}
/* Mobile search input field */
.notebook-navigator-mobile input.nn-search-input {
height: 36px;
font-size: 16px; /* Prevent zoom on iOS */
padding: 4px 60px 4px 36px;
border-radius: 999px;
}
.nn-search-clear-button,
.nn-search-star-button,
.nn-search-help-button {
position: absolute;
top: 8px;
cursor: pointer;
color: var(--nn-theme-foreground-muted);
display: inline-flex;
align-items: center;
justify-content: center;
}
.nn-search-clear-button:focus-visible,
.nn-search-star-button:focus-visible,
.nn-search-help-button:focus-visible {
outline: 2px solid var(--interactive-accent);
outline-offset: 2px;
}
.nn-search-clear-button > span,
.nn-search-star-button > span,
.nn-search-help-button > span {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.nn-search-clear-button svg,
.nn-search-star-button svg,
.nn-search-help-button svg {
width: 16px;
height: 16px;
display: block;
}
.nn-search-clear-button {
right: 10px;
}
.nn-search-star-button {
right: 34px;
}
.nn-search-help-button {
right: 10px;
}
.nn-search-star-button--active {
color: var(--interactive-accent);
}
.notebook-navigator-mobile .nn-search-clear-button {
top: 0;
height: 36px;
right: 10px;
}
.notebook-navigator-mobile .nn-search-star-button {
top: 0;
height: 36px;
right: 44px;
}
.notebook-navigator-mobile .nn-search-help-button {
top: 0;
height: 36px;
right: 10px;
}
.notebook-navigator-mobile .nn-search-input-container--has-shortcut input.nn-search-input {
padding-right: 94px;
}
/* Clickable path segments in header */
.nn-path-segment {
cursor: pointer;
}
/* On mobile, use link color for clickable segments */
.is-mobile .nn-path-segment {
color: var(--nn-theme-mobile-list-header-link-color);
text-decoration: none;
}
/* Prevent underline on mobile tap/active state */
.is-mobile .nn-path-segment:active,
.is-mobile .nn-path-segment:focus {
text-decoration: none;
}
/* Mobile search icon touch target */
.notebook-navigator-mobile .nn-search-input-icon {
top: 0;
height: 36px;
width: 36px;
left: 0;
}
/* Hover effects only apply on hover-capable devices (prevents "stuck hover" on touch). */
@media (hover: hover) and (pointer: fine) {
.nn-search-input-icon:hover {
color: var(--nn-theme-header-button-active-icon-color);
}
.nn-search-clear-button:hover,
.nn-search-star-button:hover,
.nn-search-help-button:hover {
color: var(--nn-theme-header-button-active-icon-color);
opacity: 1;
}
.nn-path-segment:hover {
text-decoration: underline;
}
}
/* Source: src/styles/sections/ui-buttons.css */
/* ========================================================================
Button Styles
======================================================================== */
/* Icon button base style - transparent buttons matching Obsidian's design */
button.nn-icon-button {
background: transparent;
background-color: transparent;
border: none;
border-radius: var(--radius-s);
padding: 0 8px;
color: var(--nn-theme-header-button-icon-color);
opacity: 0.85;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
outline: none;
}
/* Desktop pane header buttons - enforce Obsidian-muted icon color */
.nn-desktop .nn-pane-header .nn-icon-button {
color: var(--nn-theme-header-button-icon-color);
}
.nn-desktop .nn-pane-header .nn-icon-button svg:not(.nn-vault-icon-svg) {
stroke: currentColor;
}
/* Header buttons - match Obsidian's standard dimensions */
.nn-header-actions button.nn-icon-button {
padding: 0 8px;
width: auto;
min-width: 34px;
height: 25px;
}
/* Icon button hover state - subtle background on hover - desktop only */
.nn-desktop button.nn-icon-button:hover {
background-color: var(--nn-theme-header-button-hover-bg);
opacity: 1;
}
/* Icon button active state - feedback on click */
.nn-icon-button:active {
opacity: 0.8;
}
/* Icon button active state - for toggle buttons that are "ON" */
button.nn-icon-button.nn-icon-button-active {
background-color: var(--nn-theme-header-button-active-bg);
color: var(--nn-theme-header-button-active-icon-color);
}
/* Active button icon color */
button.nn-icon-button.nn-icon-button-active svg:not(.nn-vault-icon-svg) {
stroke: var(--nn-theme-header-button-active-icon-color);
}
/* Icon button disabled state - visual indicator for unavailable actions */
.nn-icon-button:disabled {
opacity: 0.5;
cursor: not-allowed;
color: var(--nn-theme-header-button-disabled-icon-color);
}
/* Disabled icon svg stroke color */
.nn-icon-button:disabled svg:not(.nn-vault-icon-svg) {
stroke: currentColor;
}
/* Disabled hover state - no hover effect when disabled */
.nn-desktop .nn-icon-button:disabled:hover {
background-color: transparent;
color: var(--nn-theme-header-button-disabled-icon-color);
}
/* Disabled icon color - maintains muted appearance */
.nn-desktop .nn-icon-button:disabled:hover svg:not(.nn-vault-icon-svg) {
stroke: currentColor;
}
/* Icon styling - consistent size and appearance for all button icons */
.nn-icon-button > span {
color: inherit;
}
.nn-icon-button > span > svg {
color: inherit;
}
.nn-icon-button svg {
width: 16px;
height: 16px;
}
.nn-icon-button svg:not(.nn-vault-icon-svg) {
stroke: currentColor;
stroke-width: 2;
fill: none;
}
/* Source: src/styles/sections/layout-spacers.css */
/* ========================================================================
Pane Spacers
======================================================================== */
/* Navigation pane spacers - provide visual breathing room in the list */
.nn-nav-top-spacer {
height: 8px;
flex-shrink: 0;
position: relative;
}
.nn-nav-bottom-spacer {
height: 20px;
flex-shrink: 0;
}
.nn-nav-list-spacer {
height: 8px;
flex-shrink: 0;
position: relative;
}
.nn-nav-root-spacer {
height: var(--nn-nav-root-spacing, 0px);
flex-shrink: 0;
pointer-events: none;
}
.nn-nav-spacer--with-separator::after {
content: '';
position: absolute;
left: calc(-1 * var(--nn-scroller-padding));
right: calc(-1 * var(--nn-scroller-padding));
top: calc(50% - (var(--nn-theme-nav-separator-height, 1px) / 2));
height: var(--nn-theme-nav-separator-height, 1px);
background: var(
--nn-theme-nav-separator-background,
linear-gradient(
90deg,
transparent 0%,
var(--nn-theme-nav-separator-color) 15%,
var(--nn-theme-nav-separator-color) 85%,
transparent 100%
)
);
opacity: var(--nn-theme-nav-separator-opacity, 0.3);
}
/* List pane spacers - match navigation pane for consistency */
.nn-list-top-spacer {
height: 8px;
}
.nn-list-bottom-spacer {
height: 20px;
}
/* Source: src/styles/sections/navigation-scroller.css */
/* ========================================================================
Navigation Pane Scroller
======================================================================== */
/* Scroller container for both folder tree and tag list */
.nn-navigation-pane-chrome {
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.nn-navigation-pane-panel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.nn-navigation-pane-scroller {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
padding: 0 var(--nn-scroller-padding);
line-height: 1; /* Reset to 1 - we'll use fixed line-heights on individual elements */
background-color: var(--nn-theme-nav-bg); /* Opaque background for GPU scroll layer optimization */
/* Ensure scroll events work properly with virtualization */
position: relative;
}
.nn-navigation-pane-content {
flex: 1 0 auto;
}
.nn-navigation-pane-scroller[data-banner='true'] {
/* Classic Windows scrollbars consume layout width when they appear. Setting a stable gutter
keeps the width constant so TanStack Virtual's ResizeObserver doesn't retrigger endlessly
when the navigation banner forces the content to overflow during resizing. */
scrollbar-gutter: stable;
}
/* Container for pinned shortcuts displayed above the scrollable navigation tree */
.nn-shortcut-pinned {
flex: 0 1 auto;
border-bottom: 1px solid var(--nn-theme-divider-border-color);
background-color: var(--nn-theme-nav-bg);
position: relative;
z-index: 1;
overflow: visible;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.nn-shortcut-pinned-scroll {
flex: 0 1 auto;
min-height: 0;
padding: 8px var(--nn-scroller-padding) 4px;
overflow-x: hidden;
overflow-y: hidden;
}
.nn-shortcut-pinned[data-scroll='true'] .nn-shortcut-pinned-scroll {
overflow-y: auto;
overscroll-behavior: contain;
}
/* Remove top padding when banner is present to avoid double spacing */
.nn-shortcut-pinned[data-has-banner='true'] .nn-shortcut-pinned-scroll {
padding-top: 0;
}
/* Add top margin to banner inside pinned shortcuts area for consistent spacing */
.nn-shortcut-pinned[data-has-banner='true'] .nn-nav-banner {
margin-top: 8px;
}
/* Inner wrapper for pinned shortcut items */
.nn-shortcut-pinned-inner {
display: flex;
flex-direction: column;
gap: 0;
}
.nn-shortcut-pinned::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: calc(100% + 1px);
height: 4px;
pointer-events: none;
background: linear-gradient(to bottom, var(--nn-theme-pinned-shortcut-shadow-color) 0%, transparent 100%);
}
.nn-shortcuts-resize-handle {
height: 3px;
cursor: row-resize;
background-color: transparent;
touch-action: none;
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
user-select: none;
-webkit-tap-highlight-color: transparent;
z-index: 2;
}
.nn-shortcuts-resize-handle:hover {
background-color: var(--nn-theme-divider-resize-handle-hover-bg);
}
.nn-navigation-pane[data-shortcuts-resizing='true'] .nn-shortcuts-resize-handle {
background-color: var(--nn-theme-divider-resize-handle-hover-bg);
}
.notebook-navigator-mobile .nn-shortcuts-resize-handle {
height: 14px;
position: relative;
left: auto;
right: auto;
bottom: auto;
width: 100%;
flex-shrink: 0;
z-index: 0;
}
.notebook-navigator-mobile .nn-navigation-pane[data-shortcuts-resizing='true'] .nn-shortcuts-resize-handle {
background-color: transparent;
}
.notebook-navigator-mobile .nn-shortcuts-resize-handle:hover {
background-color: transparent;
}
@media (hover: none) {
.nn-shortcuts-resize-handle:hover {
background-color: transparent;
}
}
.notebook-navigator-mobile .nn-shortcuts-resize-handle::before {
content: '';
position: absolute;
left: 20%;
right: 20%;
bottom: 3px;
height: 5px;
background-color: var(--nn-theme-divider-border-color);
border-radius: 3px;
pointer-events: none;
}
.notebook-navigator-mobile .nn-shortcut-pinned {
background-color: var(--nn-theme-nav-bg);
border-bottom: none;
}
/* Vault title displayed below the navigation header (desktop only). */
.nn-vault-title-area {
background-color: var(--nn-theme-nav-bg);
padding: var(--nn-list-title-padding-block) var(--nn-scroller-padding) 8px;
}
.nn-vault-title-content {
display: inline-flex;
align-items: center;
padding: 0 var(--nn-nav-item-padding-horizontal);
font-size: var(--nn-list-title-font-size);
font-weight: var(--nn-theme-list-heading-font-weight);
color: var(--nn-theme-list-heading-color);
gap: 4px;
max-width: 100%;
}
.nn-vault-title-trigger {
cursor: pointer;
}
.nn-vault-title-trigger:focus-visible {
outline: 1px solid var(--interactive-accent);
outline-offset: 1px;
border-radius: 6px;
}
.nn-vault-title-text {
line-height: 1.2;
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nn-vault-title-chevron {
width: var(--nn-nav-icon-size);
height: var(--nn-nav-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--nn-theme-list-heading-color);
}
/* Mobile-only: hide the pinned shortcuts shadow overlay. */
.notebook-navigator-mobile .nn-shortcut-pinned::after {
content: none;
}
/* Navigation banner displayed above tree items */
.nn-nav-banner {
padding: var(--nn-nav-banner-padding-vertical, 8px) var(--nn-nav-item-padding-horizontal);
box-sizing: border-box;
}
.nn-navigation-pane-banner {
margin-inline-start: calc(-1 * var(--nn-scroller-padding));
margin-inline-end: calc(-1 * var(--nn-scroller-padding));
}
.nn-nav-banner-image {
display: block;
width: 100%;
height: auto;
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
background-color: var(--background-tertiary);
}
/* Source: src/styles/sections/navigation-tree.css */
/* ========================================================================
Folder Tree Styles
======================================================================== */
/* Note: Navigation pane scroller styles are defined above in the Navigation Pane Scroller section */
/* Navigation item - container for each folder/tag in the tree */
.nn-navitem {
--nn-navitem-background-bottom-overdraw: 0px;
-webkit-user-select: none;
user-select: none;
background: transparent;
display: flex;
align-items: center;
margin: 0;
padding: 0;
min-width: 0; /* Allow folder items to shrink below min-content width */
height: var(--nn-setting-nav-item-height); /* Fixed height for virtualizer accuracy */
box-sizing: border-box;
padding-inline-start: calc(var(--level, 0) * var(--nn-setting-nav-indent));
/* Isolate layout and style calculations per item while allowing ::before/::after to extend beyond bounds */
contain: layout style;
}
/* Touch-friendly tap targets on mobile */
.notebook-navigator-mobile .nn-navitem {
height: var(--nn-setting-nav-item-height-mobile); /* Fixed height for virtualizer accuracy */
}
/* Nav rows that display a background overlay need positioning for the pseudo elements */
.nn-navitem.nn-has-custom-background,
.nn-navitem.nn-has-search-match,
.nn-navitem.nn-selected {
position: relative;
}
.nn-navigation-pane[data-shortcut-sorting='true'] .nn-navitem:not(.nn-shortcut-item) {
pointer-events: none;
}
/* Render the custom background color behind the nav item content */
.nn-navitem.nn-has-custom-background::before {
content: '';
position: absolute;
top: 0px;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: var(--nn-navitem-background-bottom-overdraw);
background-color: var(--nn-navitem-custom-bg-color);
border-top-left-radius: var(--nn-navitem-top-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
border-top-right-radius: var(--nn-navitem-top-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
border-bottom-left-radius: var(--nn-navitem-bottom-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
border-bottom-right-radius: var(--nn-navitem-bottom-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
box-shadow: inset 0 0 0 var(--nn-theme-navitem-border-width) var(--nn-theme-navitem-custom-border-color);
z-index: 0;
pointer-events: none;
}
.nn-navitem.nn-has-custom-background > .nn-navitem-content {
position: relative;
z-index: 2;
}
/* Overdraw and zero shared corners only between adjacent filled backgrounds */
.nn-navitem.nn-navitem-has-filled-next {
--nn-navitem-background-bottom-overdraw: -0.5px;
--nn-navitem-bottom-left-radius: 0;
--nn-navitem-bottom-right-radius: 0;
}
.nn-navitem.nn-navitem-has-filled-previous {
--nn-navitem-top-left-radius: 0;
--nn-navitem-top-right-radius: 0;
}
/* Folder content - contains folder UI elements */
.nn-navitem-content {
display: flex;
align-items: center;
height: 100%;
padding: 0 var(--nn-nav-item-padding-horizontal);
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
margin: 0;
background: transparent;
position: relative;
flex: 1;
min-width: 0; /* Critical: allows flex children to shrink below their min-content width */
box-sizing: border-box;
}
/* Indent guide columns shown on rows inside expanded subtrees */
.nn-navitem-indent-guide {
--nn-indent-guide-line-width: 0.5px;
--nn-indent-guide-padding-inline-start: var(--nn-nav-item-padding-horizontal);
--nn-indent-guide-chevron-slot-width: var(--nn-nav-icon-size);
--nn-indent-guide-chevron-center-origin: calc(
var(--nn-indent-guide-padding-inline-start) + (var(--nn-indent-guide-chevron-slot-width) / 2)
);
position: absolute;
top: 0;
bottom: 0;
inset-inline-start: calc(
(var(--nn-indent-guide-level, 0) - var(--level, 0)) * var(--nn-setting-nav-indent) + var(--nn-indent-guide-chevron-center-origin)
);
width: var(--nn-indent-guide-line-width);
transform: translateX(-50%);
background-color: var(--nn-theme-nav-indent-guide-color);
pointer-events: none;
z-index: 0;
}
.mod-rtl .nn-navitem-indent-guide {
inset-inline-start: auto;
inset-inline-end: calc(
(var(--level, 0) - var(--nn-indent-guide-level, 0)) * var(--nn-setting-nav-indent) + var(--nn-indent-guide-chevron-center-origin)
);
}
.nn-navitem-content--search-include,
.nn-navitem-content--search-exclude {
position: relative;
z-index: 1;
}
.nn-navitem-content--search-include::before,
.nn-navitem-content--search-exclude::before {
content: '';
position: absolute;
top: 0px;
bottom: var(--nn-navitem-background-bottom-overdraw);
inset-inline-end: 0;
inset-inline-start: calc(var(--level, 0) * var(--nn-setting-nav-indent) * -1);
border-top-left-radius: var(--nn-navitem-top-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
border-top-right-radius: var(--nn-navitem-top-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
border-bottom-left-radius: var(--nn-navitem-bottom-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
border-bottom-right-radius: var(--nn-navitem-bottom-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
pointer-events: none;
z-index: -1;
}
/* Pre-composited solid color prevents hairlines by blending alpha with pane background */
.nn-navitem-content--search-include::before {
background-color: var(--nn-computed-tag-positive-bg, var(--nn-theme-tag-positive-bg));
}
/* Pre-composited solid color prevents hairlines by blending alpha with pane background */
.nn-navitem-content--search-exclude::before {
background-color: var(--nn-computed-tag-negative-bg, var(--nn-theme-tag-negative-bg));
}
/* Folder hover state - desktop only, using pseudo-element for padding control */
.nn-desktop .nn-navitem:hover {
position: relative;
}
.nn-desktop .nn-navitem:not([data-search-match]):hover::after {
content: '';
position: absolute;
top: 0px;
bottom: var(--nn-navitem-background-bottom-overdraw);
inset-inline-start: 0;
inset-inline-end: 0;
background-color: var(--nn-theme-navitem-hover-bg);
border-top-left-radius: var(--nn-navitem-top-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
border-top-right-radius: var(--nn-navitem-top-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
border-bottom-left-radius: var(--nn-navitem-bottom-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
border-bottom-right-radius: var(--nn-navitem-bottom-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
box-shadow: inset 0 0 0 var(--nn-theme-navitem-border-width) var(--nn-theme-navitem-hover-border-color);
z-index: 1;
pointer-events: none;
}
/* Ensure content appears above hover background */
.nn-desktop .nn-navitem:hover > .nn-navitem-content {
position: relative;
z-index: 2;
}
.nn-split-container.nn-resizing .nn-navitem:hover::after {
content: none;
background-color: transparent;
}
/* Folder chevron - expand/collapse indicator */
.nn-navitem-chevron {
width: var(--nn-nav-icon-size);
height: var(--nn-nav-icon-size);
margin-inline-end: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--nn-theme-navitem-chevron-color);
}
/* Larger touch targets for chevrons on mobile */
.notebook-navigator-mobile .nn-navitem-chevron {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
/* Chevron states for folders without children */
.nn-navitem-chevron--no-children {
visibility: hidden;
cursor: default;
}
/* Chevron states for folders with children */
.nn-navitem-chevron--has-children {
visibility: visible;
}
/* Folder icon - displays folder open/closed or custom icons */
.nn-navitem-icon {
width: var(--nn-nav-icon-size);
height: var(--nn-nav-icon-size);
margin-inline-end: 8px;
flex-shrink: 0;
color: var(--nn-theme-navitem-icon-color);
display: flex;
align-items: center;
}
.nn-navitem-icon svg {
width: var(--nn-nav-icon-size);
height: var(--nn-nav-icon-size);
}
.nn-navitem-icon.nn-iconfont {
font-size: var(--nn-nav-icon-size);
line-height: var(--nn-nav-icon-size);
}
/* Folder name text - truncates with ellipsis on overflow */
.nn-navitem-name {
font-size: var(--nn-setting-nav-font-size);
font-weight: var(--nn-theme-navitem-name-font-weight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: normal;
color: var(--nn-theme-navitem-name-color);
}
.nn-navitem[data-nav-item-type='note'] .nn-navitem-name {
color: var(--nn-theme-navitem-file-name-color);
}
/* Custom colored folder names */
.nn-navitem-name.nn-has-custom-color {
font-weight: var(--nn-theme-navitem-custom-color-name-font-weight);
}
/* Folder with folder note */
.nn-navitem-name.nn-has-folder-note {
text-decoration: var(--nn-theme-navitem-folder-note-name-decoration);
}
/* Folder with folder note - show pointer cursor on hover */
.nn-navitem-name.nn-has-folder-note:hover {
cursor: pointer;
text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration);
}
/* Spacer element to push count to the end */
.nn-navitem-spacer {
--nn-nav-leader-color: var(--nn-theme-nav-leader-color);
--nn-nav-count-leader-bottom-offset: calc((var(--nn-setting-nav-item-height) - var(--nn-nav-line-height)) / 2 + 4px);
flex: 1;
min-width: 8px; /* Minimum space between name and count */
}
.notebook-navigator-mobile .nn-navitem-spacer {
--nn-nav-count-leader-bottom-offset: calc((var(--nn-setting-nav-item-height-mobile) - var(--nn-nav-line-height)) / 2 + 5px);
}
[data-nav-count-leader-style='dots'] .nn-navitem-spacer--leader,
[data-nav-count-leader-style='dashes'] .nn-navitem-spacer--leader,
[data-nav-count-leader-style='line'] .nn-navitem-spacer--leader {
position: relative;
align-self: stretch;
margin-inline: 8px;
min-width: 16px;
}
[data-nav-count-leader-style='dots'] .nn-navitem-spacer--leader::after,
[data-nav-count-leader-style='dashes'] .nn-navitem-spacer--leader::after,
[data-nav-count-leader-style='line'] .nn-navitem-spacer--leader::after {
content: '';
position: absolute;
inset-inline: 0;
bottom: var(--nn-nav-count-leader-bottom-offset);
pointer-events: none;
}
[data-nav-count-leader-style='dots'] .nn-navitem-spacer--leader::after {
height: 2px;
background-image: radial-gradient(circle, var(--nn-nav-leader-color) 0, var(--nn-nav-leader-color) 1px, transparent 1px);
background-repeat: repeat-x;
background-position: center;
background-size: 6px 2px;
}
[data-nav-count-leader-style='dashes'] .nn-navitem-spacer--leader::after {
height: 1px;
background-image: repeating-linear-gradient(
to right,
var(--nn-nav-leader-color) 0,
var(--nn-nav-leader-color) 6px,
transparent 6px,
transparent 10px
);
}
[data-nav-count-leader-style='line'] .nn-navitem-spacer--leader::after {
height: 1px;
background-color: var(--nn-nav-leader-color);
}
/* Folder file count - shows number of files in folder */
.nn-navitem-count {
font-size: var(--nn-navitem-count-font-size);
font-weight: var(--nn-theme-navitem-count-font-weight);
color: var(--nn-theme-navitem-count-color);
background-color: var(--nn-theme-navitem-count-bg);
flex-shrink: 0;
/* Dynamic margin that increases with navitem border radius for better visual balance */
margin-inline-end: calc(-2px + max(0px, calc(min(14px, var(--nn-theme-navitem-border-radius)) - 4px) * 0.3));
/* Pill style when background is set */
border-radius: min(8px, var(--nn-theme-navitem-count-border-radius));
padding: 0 6px;
height: 16px;
line-height: 16px;
min-width: 20px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 var(--nn-theme-navitem-count-border-width) var(--nn-theme-navitem-count-border-color);
}
.nn-navitem-operator-indicator {
padding-inline: 4px;
}
.nn-navitem-operator-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.nn-navitem-operator-icon svg {
width: 12px;
height: 12px;
}
/* Hover action button - replaces badge/count on hover */
.nn-navitem-hover-action-slot {
position: relative;
flex-shrink: 0;
}
.nn-navitem-hover-action-slot--overlay {
width: 0;
min-width: 0;
overflow: visible;
}
button.nn-icon-button.nn-navitem-hover-action-button {
position: absolute;
top: 50%;
inset-inline-end: 0;
transform: translateY(-50%);
visibility: hidden;
pointer-events: none;
cursor: pointer;
height: 18px;
width: 18px;
min-height: 0;
min-width: 0;
padding: 0;
border-radius: 50%;
z-index: 1;
}
.nn-navitem-hover-action-button svg {
width: 14px;
height: 14px;
}
.nn-navitem-hover-action-placeholder {
visibility: hidden;
}
.nn-desktop .nn-shortcut-item--removable:hover .nn-navitem-hover-action-button,
.nn-desktop .nn-shortcut-header-item:hover .nn-navitem-hover-action-button,
.nn-desktop .nn-properties-header-item:hover .nn-navitem-hover-action-button {
visibility: visible;
pointer-events: auto;
}
.nn-desktop .nn-shortcut-item--removable:hover .nn-navitem-hover-action-slot--overlay,
.nn-desktop .nn-shortcut-header-item:hover .nn-navitem-hover-action-slot--overlay,
.nn-desktop .nn-properties-header-item:hover .nn-navitem-hover-action-slot--overlay {
width: 18px;
}
.nn-desktop .nn-shortcut-item--removable:hover .nn-navitem-hover-action-count,
.nn-desktop .nn-shortcut-header-item:hover .nn-navitem-hover-action-count,
.nn-desktop .nn-properties-header-item:hover .nn-navitem-hover-action-count {
opacity: 0;
}
/* Shortcut section styling */
.nn-shortcut-header-item .nn-navitem-count {
font-size: var(--nn-navitem-count-font-size);
}
.nn-drag-item {
position: relative;
}
.nn-drag-item .nn-navitem-name {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.nn-drag-item .nn-shortcut-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nn-shortcut-item--missing .nn-shortcut-label {
text-decoration: line-through;
}
/* Underline only the label, not the trailing description, for shortcuts with folder notes. */
.nn-shortcut-item .nn-navitem-name.nn-has-folder-note .nn-shortcut-label {
text-decoration: var(--nn-theme-navitem-folder-note-name-decoration);
}
/* Pointer cursor on hover for clickable folder note shortcuts */
.nn-shortcut-item .nn-navitem-name.nn-has-folder-note:hover .nn-shortcut-label {
cursor: pointer;
text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration);
}
.nn-drag-item .nn-shortcut-description {
flex-shrink: 0;
}
.nn-navitem-accessory {
display: flex;
gap: 0.25rem;
margin-inline-start: 0.5rem;
}
.nn-drag-item-has-handle .nn-navitem-content {
gap: 0.25rem;
}
.nn-drag-handle {
width: 28px;
height: calc(var(--nn-setting-nav-item-height) - 4px);
margin-inline-start: 0;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: grab;
touch-action: none;
color: var(--nn-theme-navitem-icon-color);
flex-shrink: 0;
}
.nn-drag-handle:active,
.nn-drag-handle-active {
cursor: grabbing;
}
.nn-drag-handle-disabled {
color: var(--nn-theme-header-button-disabled-icon-color);
opacity: 0.4;
cursor: default;
}
.nn-drag-handle:focus {
outline: none;
}
.nn-drag-handle .nn-iconfont,
.nn-drag-handle svg {
width: 16px;
height: 16px;
}
.nn-root-reorder-panel {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.75rem 0;
}
.nn-root-reorder-header {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: center;
}
.nn-root-reorder-title {
font-size: var(--nn-desktop-header-font-size);
font-weight: var(--nn-theme-list-header-breadcrumb-font-weight);
line-height: 1.3;
}
.notebook-navigator-mobile .nn-root-reorder-title {
font-size: var(--nn-mobile-header-font-size);
}
.nn-root-reorder-title,
.nn-root-reorder-hint {
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nn-root-reorder-hint {
font-size: var(--nn-root-reorder-hint-font-size);
color: var(--nn-theme-foreground-muted);
line-height: 1.25;
}
.notebook-navigator-mobile .nn-root-reorder-hint {
font-size: var(--nn-root-reorder-hint-font-size-mobile);
}
.nn-root-reorder-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.nn-root-reorder-section {
display: flex;
flex-direction: column;
position: relative;
}
.nn-root-reorder-item {
cursor: default;
}
.nn-root-reorder-item .nn-shortcut-label {
font-weight: var(--nn-theme-navitem-name-font-weight);
}
.nn-root-reorder-item .nn-shortcut-label[data-has-color='true'] {
font-weight: var(--nn-theme-navitem-custom-color-name-font-weight);
}
.nn-root-reorder-item--missing .nn-shortcut-label {
text-decoration: line-through;
color: var(--nn-theme-foreground-muted);
}
.nn-root-reorder-actions {
margin-top: 0.75rem;
display: flex;
justify-content: center;
}
.nn-root-reorder-remove {
color: var(--text-accent);
font-size: var(--nn-setting-nav-font-size);
font-weight: var(--font-semibold);
cursor: pointer;
display: inline;
text-decoration: underline;
}
.nn-root-reorder-remove:hover,
.nn-root-reorder-remove:focus {
color: var(--text-accent);
text-decoration: underline;
}
.nn-root-reorder-remove:focus-visible {
outline: none;
}
.nn-root-reorder-reset {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0 1rem;
cursor: pointer;
}
.nn-root-reorder-reset-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.nn-root-reorder-section-controls {
display: flex;
gap: 0.25rem;
}
.nn-root-reorder-section-button {
width: 28px;
height: 28px;
padding: 0;
border-radius: 6px;
color: var(--nn-theme-header-button-icon-color);
flex-shrink: 0;
}
.nn-root-reorder-section-button svg {
width: 16px;
height: 16px;
}
.nn-desktop .nn-root-reorder-section-button:hover {
background-color: var(--nn-theme-header-button-hover-bg);
}
.nn-root-reorder-section-button:disabled {
color: var(--nn-theme-header-button-disabled-icon-color);
opacity: 0.4;
cursor: not-allowed;
}
.nn-shortcut-disabled {
--nn-theme-navitem-chevron-color: var(--nn-theme-foreground);
--nn-theme-navitem-icon-color: var(--nn-theme-foreground);
--nn-theme-navitem-name-color: var(--nn-theme-foreground);
--nn-theme-navitem-file-name-color: var(--nn-theme-foreground);
--nn-theme-navitem-count-color: var(--nn-theme-foreground);
opacity: 0.5;
pointer-events: none;
}
/* Source: src/styles/sections/navigation-properties.css */
/* ========================================================================
Navigation Properties
======================================================================== */
/* Property tree rows reuse the shared navigation row layout from navigation-tree.css. */
.nn-navitem.nn-property .nn-navitem-name {
unicode-bidi: plaintext;
}
/* Source: src/styles/sections/calendar.css */
/* ========================================================================
Section index
1. Shared tokens and shell (overlay + right sidebar)
2. Header controls (shared)
3. Header mode: split
4. Year panel (shared)
5. Month grid and day cells
6. Hover and day-state styling
7. Hover tooltip
8. Right sidebar shell
9. Header mode: compact yearly (right sidebar)
======================================================================== */
/* ========================================================================
Shared tokens and shell (overlay + right sidebar)
======================================================================== */
:is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar) {
/* Shared calendar sizing and spacing tokens for overlay and sidebar layouts. */
--nn-calendar-week-count: 6;
--nn-calendar-scrollbar-gap: var(--scrollbar-size, 12px);
--nn-calendar-week-gap: 1px;
--nn-calendar-weekday-row-height: 14px;
--nn-calendar-header-row-height: 28px;
--nn-calendar-header-font-size: 12px;
--nn-calendar-nav-button-size: 28px;
--nn-calendar-nav-icon-size: 18px;
--nn-calendar-today-height: 28px;
--nn-calendar-today-font-size: 12px;
--nn-calendar-weekday-font-size: 11px;
--nn-calendar-weeknumber-font-size: var(--nn-calendar-day-font-size);
--nn-calendar-day-font-size: 12px;
--nn-calendar-section-gap: 6px;
--nn-calendar-year-panel-padding-top: 8px;
--nn-calendar-padding: 8px;
--nn-calendar-safe-area: 0px;
--nn-calendar-border-width: 1px;
--nn-calendar-weeknumber-column-width: 28px;
--nn-calendar-weeknumber-padding-right: 4px;
--nn-calendar-note-indicator-size: 15%;
--nn-calendar-note-indicator-max-size: 5px;
--nn-calendar-note-indicator-center-offset: clamp(6px, calc(var(--nn-calendar-day-font-size) * 0.65), 12px);
--nn-calendar-task-indicator-offset-x: clamp(5px, calc(var(--nn-calendar-day-font-size) * 0.42), 9px);
--nn-calendar-weekend-corner-radius: 6px;
--nn-calendar-cell-radius: 6px;
--nn-calendar-header-chip-bg: var(--nn-theme-nav-bg);
--nn-calendar-note-indicator-color: var(--nn-theme-calendar-note-indicator-color);
--nn-calendar-task-indicator-color: var(--nn-theme-calendar-unfinished-task-indicator-color);
--nn-calendar-active-editor-border-color: var(--nn-theme-calendar-day-active-border-color);
--nn-calendar-active-editor-border-width: var(--nn-theme-calendar-day-active-border-width);
--nn-calendar-active-editor-gap-color: var(--nn-theme-nav-bg);
/* Opaque surface behind day cells; underlays translucent cell fills so overdrawn neighbors composite identically */
--nn-calendar-cell-surface-bg: var(--nn-theme-nav-bg);
}
.notebook-navigator-mobile :is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar) {
--nn-calendar-safe-area: var(--nn-mobile-safe-area-bottom);
--nn-calendar-scrollbar-gap: 0px;
--nn-calendar-border-width: 0px;
--nn-calendar-weekday-row-height: 16px;
--nn-calendar-header-row-height: 32px;
--nn-calendar-header-font-size: 14px;
--nn-calendar-nav-button-size: 32px;
--nn-calendar-nav-icon-size: 18px;
--nn-calendar-today-height: 32px;
--nn-calendar-today-font-size: 14px;
--nn-calendar-weekday-font-size: 12px;
--nn-calendar-weeknumber-font-size: var(--nn-calendar-day-font-size);
--nn-calendar-day-font-size: 13px;
}
.nn-single-pane-calendar,
.nn-navigation-calendar-overlay {
flex-shrink: 0;
box-sizing: border-box;
padding: var(--nn-calendar-padding) calc(var(--nn-scroller-padding) + var(--nn-calendar-scrollbar-gap))
calc(var(--nn-calendar-padding) + var(--nn-calendar-safe-area)) var(--nn-scroller-padding);
border-top: var(--nn-calendar-border-width) solid var(--nn-theme-divider-border-color);
background-color: var(--nn-theme-nav-bg);
}
.nn-navigation-calendar {
height: auto;
container-type: inline-size;
--nn-calendar-day-font-size: clamp(9px, 4.6cqw, 12px);
--nn-calendar-weekday-font-size: clamp(8px, 3.6cqw, 12px);
--nn-calendar-weeknumber-font-size: var(--nn-calendar-day-font-size);
--nn-calendar-weeknumber-column-width: clamp(20px, 9cqw, 44px);
--nn-calendar-weeknumber-padding-right: clamp(2px, 1.2cqw, 8px);
--nn-calendar-note-indicator-center-offset: clamp(4px, calc(var(--nn-calendar-day-font-size) * 0.65), 12px);
display: flex;
flex-direction: column;
gap: var(--nn-calendar-section-gap);
user-select: none;
}
.nn-navigation-calendar-grid {
position: relative;
display: flex;
flex-direction: column;
gap: var(--nn-calendar-section-gap);
}
/* ========================================================================
Header controls (shared)
======================================================================== */
.nn-navigation-calendar-header {
height: var(--nn-calendar-header-row-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.nn-navigation-calendar-month {
font-size: var(--nn-calendar-header-font-size);
font-weight: 600;
color: var(--nn-theme-calendar-header-color);
flex: 0 1 auto;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 2px;
line-height: 1;
white-space: nowrap;
min-width: 0;
overflow: hidden;
position: relative;
z-index: 1;
}
.nn-navigation-calendar-month .nn-navigation-calendar-period-month {
flex: 0 1 auto;
display: block;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.nn-navigation-calendar-month .nn-navigation-calendar-period-year {
flex: 0 0 auto;
}
.nn-navigation-calendar-month .nn-navigation-calendar-quarter-button {
flex: 0 0 auto;
}
:is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar) .nn-navigation-calendar-month {
flex-wrap: nowrap;
white-space: nowrap;
overflow: visible;
z-index: 0;
}
:is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar) .nn-navigation-calendar-month .nn-navigation-calendar-period-month {
max-width: none;
overflow: visible;
text-overflow: clip;
white-space: nowrap;
}
button.nn-navigation-calendar-period-button,
button.nn-navigation-calendar-nav-button,
button.nn-navigation-calendar-today,
button.nn-navigation-calendar-year-month,
button.nn-navigation-calendar-weeknumber-button,
button.nn-navigation-calendar-day {
-webkit-appearance: none;
appearance: none;
border: none;
border-radius: var(--nn-calendar-cell-radius);
cursor: pointer;
box-shadow: none;
outline: none;
}
.nn-navigation-calendar-period-button,
.nn-navigation-calendar-weeknumber {
position: relative;
}
button.nn-navigation-calendar-period-button {
background: var(--nn-calendar-header-chip-bg);
color: var(--nn-theme-calendar-header-color);
font: inherit;
box-sizing: border-box;
height: var(--nn-calendar-today-height);
padding: 0 1px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nn-navigation-calendar-period-button.has-period-note::after {
content: '';
position: absolute;
left: 3px;
right: 3px;
bottom: 2px;
height: 1px;
background-color: currentColor;
pointer-events: none;
z-index: 1;
}
.nn-navigation-calendar-period-button.is-active-editor-file .nn-navigation-calendar-active-outline,
.nn-navigation-calendar-weeknumber.is-active-editor-file .nn-navigation-calendar-active-outline {
display: block;
}
.nn-navigation-calendar button.nn-navigation-calendar-period-button {
color: var(--nn-theme-calendar-header-color);
}
.nn-navigation-calendar-nav {
display: inline-flex;
align-items: center;
gap: 4px;
position: relative;
}
:is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar) .nn-navigation-calendar-nav {
flex: 0 0 auto;
margin-left: auto;
position: relative;
z-index: 2;
}
.nn-navigation-calendar-help-inline {
position: static;
right: auto;
top: auto;
transform: none;
color: var(--nn-theme-foreground-muted);
z-index: 0;
flex: 0 0 auto;
}
.nn-navigation-calendar-month-help {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: var(--nn-theme-foreground-muted);
z-index: 0;
}
.nn-navigation-calendar-month.has-inline-month-nav {
display: grid;
grid-template-columns: var(--nn-calendar-nav-button-size) minmax(0, 1fr) var(--nn-calendar-nav-button-size);
align-items: center;
gap: 0;
}
.nn-navigation-calendar-inline-month-center {
display: inline-flex;
align-items: center;
gap: 2px;
min-width: 0;
}
.nn-navigation-calendar-month.has-inline-month-nav .nn-navigation-calendar-inline-month-center {
grid-column: 2;
justify-self: center;
}
.nn-navigation-calendar-month.has-inline-help .nn-navigation-calendar-inline-month-center {
position: relative;
overflow: visible;
}
.nn-navigation-calendar-month.has-inline-help:not(.has-inline-month-nav) .nn-navigation-calendar-inline-help {
position: static;
right: auto;
top: auto;
transform: none;
width: 0;
min-width: 0;
height: 20px;
margin-left: 0;
padding: 0;
overflow: hidden;
flex: 0 0 auto;
}
.nn-navigation-calendar-month.has-inline-month-nav .nn-navigation-calendar-inline-month-center .nn-navigation-calendar-period-month {
padding-inline: 1px;
}
.nn-navigation-calendar-month.has-inline-help.has-inline-month-nav .nn-navigation-calendar-inline-help {
position: absolute;
left: calc(100% + 2px);
right: auto;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
}
.nn-navigation-calendar-quarter-inline {
flex: 0 0 auto;
}
.nn-navigation-calendar-month.has-inline-month-nav .nn-navigation-calendar-year-nav-button {
position: static;
top: auto;
transform: none;
z-index: 1;
}
.nn-navigation-calendar-month.has-inline-month-nav .nn-navigation-calendar-inline-month-nav-prev {
grid-column: 1;
justify-self: start;
}
.nn-navigation-calendar-month.has-inline-month-nav .nn-navigation-calendar-inline-month-nav-next {
grid-column: 3;
justify-self: end;
}
button.nn-navigation-calendar-nav-button.nn-navigation-calendar-nav-prev {
width: 24px;
justify-content: flex-start;
}
button.nn-navigation-calendar-nav-button.nn-navigation-calendar-nav-next {
width: 24px;
justify-content: flex-end;
}
button.nn-navigation-calendar-nav-button {
width: var(--nn-calendar-nav-button-size);
height: var(--nn-calendar-nav-button-size);
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--nn-theme-foreground-muted);
padding: 0;
line-height: 0;
}
button.nn-navigation-calendar-today {
background: transparent;
color: var(--nn-theme-foreground-muted);
font: inherit;
font-size: var(--nn-calendar-today-font-size);
font-weight: 600;
height: var(--nn-calendar-today-height);
padding: 0 1px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.nn-navigation-calendar button:is(.nn-navigation-calendar-nav-button, .nn-navigation-calendar-today) {
color: var(--nn-theme-foreground-muted);
}
/* ========================================================================
Header mode: split
======================================================================== */
.nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-header {
position: relative;
height: var(--nn-calendar-header-row-height);
min-height: var(--nn-calendar-header-row-height);
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
overflow: hidden;
}
.nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-nav {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-left: 0;
z-index: 3;
background-color: var(--nn-calendar-header-chip-bg);
border-radius: 8px;
padding: 0 2px;
}
.nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-month {
flex: 1 1 auto;
max-width: none;
overflow: hidden;
z-index: 1;
}
.nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-month .nn-navigation-calendar-period-month {
flex: 0 0 auto;
max-width: none;
overflow: visible;
text-overflow: clip;
}
/* ========================================================================
Year panel (shared)
======================================================================== */
.nn-navigation-calendar-year-panel {
display: flex;
flex-direction: column;
gap: var(--nn-calendar-section-gap);
padding-top: var(--nn-calendar-year-panel-padding-top);
}
.nn-navigation-calendar-year-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
button.nn-navigation-calendar-nav-button.nn-navigation-calendar-year-nav-button {
width: 24px;
height: var(--nn-calendar-nav-button-size);
}
button.nn-navigation-calendar-year-label {
color: var(--nn-theme-foreground-muted);
font-size: var(--nn-calendar-today-font-size);
font-weight: 600;
height: var(--nn-calendar-today-height);
line-height: 1;
min-width: 64px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
}
.nn-navigation-calendar-year-label.nn-navigation-calendar-period-button {
color: var(--nn-theme-calendar-header-color);
}
.nn-navigation-calendar-year-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
gap: 1px;
aspect-ratio: 16 / 9;
}
button.nn-navigation-calendar-year-month {
position: relative;
background-color: transparent;
color: var(--nn-theme-calendar-day-in-month-color);
font: inherit;
font-size: var(--nn-calendar-day-font-size);
line-height: 1;
min-height: 0;
padding: 6px;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-variant-numeric: tabular-nums;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.nn-navigation-calendar-day.has-feature-image::before,
.nn-navigation-calendar-year-month.has-feature-image::before {
content: '';
position: absolute;
/* Extends 0.5px past the cell so the highlight ring covers the antialiased edge of the background image. */
inset: -0.5px;
border-radius: calc(var(--nn-calendar-cell-radius) + 0.5px);
background:
linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03) 24%, rgba(255, 255, 255, 0) 48%),
linear-gradient(
var(--nn-theme-calendar-feature-image-overlay-color, rgb(0 0 0 / 0.05)),
var(--nn-theme-calendar-feature-image-overlay-color, rgb(0 0 0 / 0.05))
);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 -1px 0 rgba(255, 255, 255, 0.05);
pointer-events: none;
z-index: 0;
}
.nn-navigation-calendar-active-outline {
display: none;
position: absolute;
/* Extends 0.5px past the cell so the border covers the antialiased edge of the background image. */
inset: -0.5px;
box-sizing: border-box;
border: var(--nn-calendar-active-editor-border-width) solid var(--nn-calendar-active-editor-border-color);
border-radius: calc(var(--nn-calendar-cell-radius) + 0.5px);
box-shadow: inset 0 0 0 1px var(--nn-calendar-active-editor-gap-color);
pointer-events: none;
z-index: 2;
}
.nn-navigation-calendar-year-month-label {
position: relative;
z-index: 1;
display: block;
max-width: 100%;
/* Keeps Windows interface-font descenders inside the clipped label used for horizontal ellipsis. */
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
}
.nn-navigation-calendar-year-month.has-daily-note:not(.has-feature-image):not(.has-feature-image-key)::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, var(--nn-calendar-note-indicator-center-offset));
height: min(var(--nn-calendar-note-indicator-size), var(--nn-calendar-note-indicator-max-size));
aspect-ratio: 1 / 1;
width: auto;
border-radius: 999px;
background-color: var(--nn-calendar-note-indicator-color);
z-index: 1;
pointer-events: none;
}
.nn-navigation-calendar-year-month.has-daily-note.has-unfinished-tasks:not(.has-feature-image):not(.has-feature-image-key)::after {
transform: translate(calc(-50% - (var(--nn-calendar-task-indicator-offset-x) / 2)), var(--nn-calendar-note-indicator-center-offset));
}
.nn-navigation-calendar-year-month-unfinished-task-indicator {
display: none;
}
.nn-navigation-calendar-year-month.has-unfinished-tasks .nn-navigation-calendar-year-month-unfinished-task-indicator {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, var(--nn-calendar-note-indicator-center-offset));
height: min(var(--nn-calendar-note-indicator-size), var(--nn-calendar-note-indicator-max-size));
aspect-ratio: 1 / 1;
width: auto;
border-radius: 999px;
border: 1px solid var(--nn-calendar-task-indicator-color);
background-color: transparent;
z-index: 1;
pointer-events: none;
display: block;
}
.nn-navigation-calendar-year-month.has-daily-note.has-unfinished-tasks:not(.has-feature-image):not(.has-feature-image-key)
.nn-navigation-calendar-year-month-unfinished-task-indicator {
transform: translate(calc(-50% + (var(--nn-calendar-task-indicator-offset-x) / 2)), var(--nn-calendar-note-indicator-center-offset));
}
.nn-navigation-calendar-year-month.has-unfinished-tasks.has-feature-image .nn-navigation-calendar-year-month-unfinished-task-indicator,
.nn-navigation-calendar-year-month.has-unfinished-tasks.has-feature-image-key .nn-navigation-calendar-year-month-unfinished-task-indicator {
border-color: currentColor;
}
.nn-navigation-calendar-year-month.is-selected-month {
color: var(--nn-theme-calendar-day-in-month-color);
}
.nn-navigation-calendar-year-month.is-selected-month .nn-navigation-calendar-active-outline {
display: block;
}
.nn-navigation-calendar-year-month.is-selected-month.has-feature-image {
color: var(--nn-theme-calendar-feature-image-text-color);
}
.nn-navigation-calendar[data-highlight-today='true']
.nn-navigation-calendar-year-month.is-current-month:not(.has-feature-image):not(.has-feature-image-key) {
background-color: var(--nn-theme-calendar-day-today-bg);
color: var(--nn-theme-calendar-day-today-color);
}
.nn-navigation-calendar button.nn-navigation-calendar-year-month {
color: var(--nn-theme-calendar-day-in-month-color);
}
.nn-navigation-calendar button.nn-navigation-calendar-year-month.has-feature-image {
color: var(--nn-theme-calendar-feature-image-text-color);
}
.nn-navigation-calendar button.nn-navigation-calendar-year-month.is-selected-month {
color: var(--nn-theme-calendar-day-in-month-color);
}
.nn-navigation-calendar button.nn-navigation-calendar-year-month.is-selected-month.has-feature-image {
color: var(--nn-theme-calendar-feature-image-text-color);
}
.nn-navigation-calendar[data-highlight-today='true']
button.nn-navigation-calendar-year-month.is-current-month:not(.has-feature-image):not(.has-feature-image-key) {
color: var(--nn-theme-calendar-day-today-color);
}
.nn-navigation-calendar[data-highlight-today='true']
button.nn-navigation-calendar-year-month.is-current-month.is-selected-month:not(.has-feature-image):not(.has-feature-image-key) {
color: var(--nn-theme-calendar-day-today-color);
}
/* Calendar month navigation icon sizing (ServiceIcon renders an SVG). */
.nn-navigation-calendar-nav-button svg {
width: var(--nn-calendar-nav-icon-size);
height: var(--nn-calendar-nav-icon-size);
stroke-width: 2.5;
}
.nn-navigation-calendar-help svg,
.nn-navigation-calendar-month-help svg {
width: 16px;
height: 16px;
stroke-width: 2;
}
/* ========================================================================
Month grid and day cells
======================================================================== */
.nn-navigation-calendar-weekdays {
min-height: var(--nn-calendar-weekday-row-height);
display: grid;
align-items: center;
gap: 0 1px;
grid-template-columns: repeat(7, minmax(0, 1fr));
color: var(--nn-theme-calendar-weekday-color);
font-size: var(--nn-calendar-weekday-font-size);
line-height: 1;
}
.nn-navigation-calendar-weekdays[data-weeknumbers='true'] {
grid-template-columns: var(--nn-calendar-weeknumber-column-width) 1px repeat(7, minmax(0, 1fr));
}
.nn-navigation-calendar-weekday,
.nn-navigation-calendar-weeknumber-spacer {
text-align: center;
}
.nn-navigation-calendar-weekdays[data-weeknumbers='true'] .nn-navigation-calendar-weeknumber-spacer {
text-align: right;
padding-right: var(--nn-calendar-weeknumber-padding-right);
}
.nn-navigation-calendar-weeks {
display: flex;
flex-direction: column;
gap: var(--nn-calendar-week-gap);
}
.nn-navigation-calendar-week {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0 1px;
align-items: center;
}
.nn-navigation-calendar-weeks[data-weeknumbers='true'] .nn-navigation-calendar-week {
grid-template-columns: var(--nn-calendar-weeknumber-column-width) 1px repeat(7, minmax(0, 1fr));
}
.nn-navigation-calendar-week-spacer {
pointer-events: none;
}
.nn-navigation-calendar-weeknumber-divider {
width: 1px;
height: 100%;
background-color: var(--nn-theme-calendar-hover-bg);
pointer-events: none;
}
.nn-navigation-calendar-week.has-next-week .nn-navigation-calendar-weeknumber-divider {
position: relative;
}
.nn-navigation-calendar-week.has-next-week .nn-navigation-calendar-weeknumber-divider::after {
content: '';
position: absolute;
inset-inline: 0;
top: 100%;
height: var(--nn-calendar-week-gap);
background-color: var(--nn-theme-calendar-hover-bg);
pointer-events: none;
}
.nn-navigation-calendar-weekdays .nn-navigation-calendar-weeknumber-divider {
background-color: transparent;
}
.nn-navigation-calendar-weeknumber {
height: auto;
align-self: stretch;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: var(--nn-calendar-weeknumber-padding-right);
color: var(--nn-theme-calendar-week-color);
font-size: var(--nn-calendar-weeknumber-font-size);
font-weight: 400;
line-height: 1;
font-variant-numeric: tabular-nums;
}
button.nn-navigation-calendar-weeknumber-button {
width: 100%;
background-color: transparent;
}
.nn-navigation-calendar button.nn-navigation-calendar-weeknumber {
color: var(--nn-theme-calendar-week-color);
}
.nn-navigation-calendar-weeknumber-button.has-period-note {
text-decoration: none;
}
.nn-navigation-calendar-weeknumber-spacer-row {
visibility: hidden;
}
.nn-navigation-calendar-weeknumber-value {
display: inline-block;
position: relative;
}
.nn-navigation-calendar-weeknumber.has-period-note .nn-navigation-calendar-weeknumber-value::after {
content: '';
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
margin-top: 2px;
width: clamp(2px, 1.9cqw, var(--nn-calendar-note-indicator-max-size));
height: clamp(2px, 1.9cqw, var(--nn-calendar-note-indicator-max-size));
border-radius: 999px;
background-color: var(--nn-calendar-note-indicator-color);
pointer-events: none;
}
.nn-navigation-calendar-weeknumber.has-period-note.has-unfinished-tasks .nn-navigation-calendar-weeknumber-value::after {
transform: translateX(calc(-50% - (var(--nn-calendar-task-indicator-offset-x) / 2)));
}
.nn-navigation-calendar-weeknumber.has-unfinished-tasks .nn-navigation-calendar-weeknumber-value::before {
content: '';
position: absolute;
left: 50%;
top: 100%;
transform: translateX(calc(-50% + (var(--nn-calendar-task-indicator-offset-x) / 2)));
margin-top: 2px;
width: clamp(2px, 1.9cqw, var(--nn-calendar-note-indicator-max-size));
height: clamp(2px, 1.9cqw, var(--nn-calendar-note-indicator-max-size));
box-sizing: border-box;
border-radius: 999px;
border: 1px solid var(--nn-calendar-task-indicator-color);
background-color: transparent;
pointer-events: none;
}
.nn-navigation-calendar-day-cell {
position: relative;
min-width: 0;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
.nn-navigation-calendar-day-cell.is-weekend::before {
content: '';
position: absolute;
inset: 0;
/* Opaque surface underlay with the translucent weekend color layered on top. This makes the
painted result opaque, so the 1px overdraw into gaps shared with adjacent weekend cells
overlaps invisibly. Without the underlay, overlapping translucent fills double-composite
into darker seams, and half-pixel overdraw leaves hairline gaps on fractional-DPR displays. */
background-color: var(--nn-calendar-cell-surface-bg);
background-image: linear-gradient(var(--nn-theme-calendar-weekend-bg), var(--nn-theme-calendar-weekend-bg));
border-radius: 0;
pointer-events: none;
z-index: 0;
}
.nn-navigation-calendar-day-cell.is-weekend.has-weekend-before::before {
inset-inline-start: -1px;
}
.nn-navigation-calendar-day-cell.is-weekend.has-weekend-after::before {
inset-inline-end: -1px;
}
.nn-navigation-calendar-day-cell.is-weekend.has-weekend-above::before {
inset-block-start: -1px;
}
.nn-navigation-calendar-day-cell.is-weekend.has-weekend-below::before {
inset-block-end: -1px;
}
.nn-navigation-calendar-day-cell.is-weekend.round-weekend-top-left::before {
border-top-left-radius: var(--nn-calendar-weekend-corner-radius);
}
.nn-navigation-calendar-day-cell.is-weekend.round-weekend-top-right::before {
border-top-right-radius: var(--nn-calendar-weekend-corner-radius);
}
.nn-navigation-calendar-day-cell.is-weekend.round-weekend-bottom-left::before {
border-bottom-left-radius: var(--nn-calendar-weekend-corner-radius);
}
.nn-navigation-calendar-day-cell.is-weekend.round-weekend-bottom-right::before {
border-bottom-right-radius: var(--nn-calendar-weekend-corner-radius);
}
button.nn-navigation-calendar-day {
position: relative;
height: auto;
aspect-ratio: 1 / 1;
box-sizing: border-box;
min-width: 0;
width: 100%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: var(--nn-theme-calendar-day-in-month-color);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.nn-navigation-calendar-day-spacer {
min-width: 0;
width: 100%;
aspect-ratio: 1 / 1;
pointer-events: none;
}
/* ========================================================================
Hover and day-state styling
======================================================================== */
/* Hover effects only apply on hover-capable devices (prevents "stuck hover" on touch). */
@media (hover: hover) and (pointer: fine) {
.nn-navigation-calendar-nav-button:hover {
background-color: var(--nn-theme-calendar-hover-bg);
}
.nn-navigation-calendar-help:hover {
background-color: transparent;
}
.nn-navigation-calendar-month-help:hover {
background-color: transparent;
}
.nn-navigation-calendar-month.has-inline-help .nn-navigation-calendar-inline-help {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.nn-navigation-calendar-month.has-inline-help:hover .nn-navigation-calendar-inline-help,
.nn-navigation-calendar-month.has-inline-help:focus-within .nn-navigation-calendar-inline-help {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.nn-navigation-calendar-month.has-inline-help:not(.has-inline-month-nav):hover .nn-navigation-calendar-inline-help,
.nn-navigation-calendar-month.has-inline-help:not(.has-inline-month-nav):focus-within .nn-navigation-calendar-inline-help {
width: 20px;
min-width: 20px;
margin-left: 2px;
}
:is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar) .nn-navigation-calendar-header .nn-navigation-calendar-help-inline {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
:is(.nn-navigation-pane, .nn-list-pane, .nn-single-pane-calendar)
.nn-navigation-calendar-header:is(:hover, :focus-within)
.nn-navigation-calendar-help-inline {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-header .nn-navigation-calendar-help-inline {
width: 0;
min-width: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-header:hover .nn-navigation-calendar-help-inline,
.nn-navigation-calendar[data-split-header='true'] .nn-navigation-calendar-header:focus-within .nn-navigation-calendar-help-inline {
width: var(--nn-calendar-nav-button-size);
min-width: var(--nn-calendar-nav-button-size);
}
.nn-navigation-calendar-today:hover {
background-color: var(--nn-theme-calendar-hover-bg);
}
.nn-navigation-calendar-period-button:hover,
.nn-navigation-calendar-weeknumber-button:hover {
filter: brightness(1.05);
background-color: var(--nn-theme-calendar-hover-bg);
}
.nn-navigation-calendar-day:hover {
filter: brightness(1.05);
}
.nn-navigation-calendar-day:hover:not(.has-feature-image):not(.has-feature-image-key) {
background-color: var(--nn-theme-calendar-hover-bg);
}
.nn-navigation-calendar-year-month:hover {
filter: brightness(1.05);
}
.nn-navigation-calendar-year-month:hover:not(.is-selected-month):not(.has-feature-image):not(.has-feature-image-key) {
background-color: var(--nn-theme-calendar-hover-bg);
}
}
.nn-navigation-calendar-day.is-outside-month:not(.has-feature-image):not(.has-feature-image-key) {
color: var(--nn-theme-calendar-day-outside-month-color);
}
.nn-navigation-calendar[data-highlight-today='true']
.nn-navigation-calendar-day.is-today:not(.has-feature-image):not(.has-feature-image-key) {
color: var(--nn-theme-calendar-day-today-color);
}
.nn-navigation-calendar[data-highlight-today='true']
.nn-navigation-calendar-day.is-today:not(.has-feature-image):not(.has-feature-image-key)::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background-color: var(--nn-theme-calendar-day-today-bg);
z-index: 0;
}
.nn-navigation-calendar-day.has-daily-note:not(.has-feature-image):not(.has-feature-image-key)::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, var(--nn-calendar-note-indicator-center-offset));
height: min(var(--nn-calendar-note-indicator-size), var(--nn-calendar-note-indicator-max-size));
aspect-ratio: 1 / 1;
width: auto;
border-radius: 999px;
background-color: var(--nn-calendar-note-indicator-color);
z-index: 1;
pointer-events: none;
}
.nn-navigation-calendar-day.is-active-editor-file .nn-navigation-calendar-active-outline {
display: block;
}
/* Center the two-indicator group horizontally when both note and unfinished-task indicators are visible. */
.nn-navigation-calendar-day.has-daily-note.has-unfinished-tasks:not(.has-feature-image):not(.has-feature-image-key)::after {
transform: translate(calc(-50% - (var(--nn-calendar-task-indicator-offset-x) / 2)), var(--nn-calendar-note-indicator-center-offset));
}
.nn-navigation-calendar-day-unfinished-task-indicator {
display: none;
}
.nn-navigation-calendar-day.has-unfinished-tasks .nn-navigation-calendar-day-unfinished-task-indicator {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, var(--nn-calendar-note-indicator-center-offset));
height: min(var(--nn-calendar-note-indicator-size), var(--nn-calendar-note-indicator-max-size));
aspect-ratio: 1 / 1;
width: auto;
border-radius: 999px;
border: 1px solid var(--nn-calendar-task-indicator-color);
background-color: transparent;
z-index: 1;
pointer-events: none;
display: block;
}
.nn-navigation-calendar-day.has-daily-note.has-unfinished-tasks:not(.has-feature-image):not(.has-feature-image-key)
.nn-navigation-calendar-day-unfinished-task-indicator {
transform: translate(calc(-50% + (var(--nn-calendar-task-indicator-offset-x) / 2)), var(--nn-calendar-note-indicator-center-offset));
}
.nn-navigation-calendar-day.has-unfinished-tasks.has-feature-image .nn-navigation-calendar-day-unfinished-task-indicator,
.nn-navigation-calendar-day.has-unfinished-tasks.has-feature-image-key .nn-navigation-calendar-day-unfinished-task-indicator {
border-color: currentColor;
}
.nn-navigation-calendar-day.is-today .nn-navigation-calendar-day-number,
.nn-navigation-calendar-day.has-feature-image .nn-navigation-calendar-day-number,
.nn-navigation-calendar-day.has-feature-image-key .nn-navigation-calendar-day-number {
font-weight: 600;
}
.nn-navigation-calendar-day.has-feature-image {
color: var(--nn-theme-calendar-feature-image-text-color);
}
.nn-navigation-calendar-year-month.has-feature-image {
color: var(--nn-theme-calendar-feature-image-text-color);
}
.nn-navigation-calendar-day.has-feature-image .nn-navigation-calendar-day-number {
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.88),
0 2px 8px rgba(0, 0, 0, 0.65);
}
.nn-navigation-calendar-year-month.has-feature-image .nn-navigation-calendar-year-month-label {
font-weight: 600;
overflow: visible;
text-overflow: clip;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.88),
0 2px 8px rgba(0, 0, 0, 0.65);
}
.nn-navigation-calendar-year-month.has-feature-image-key .nn-navigation-calendar-year-month-label {
font-weight: 600;
}
.nn-navigation-calendar-day-number {
font-size: var(--nn-calendar-day-font-size);
line-height: 1;
font-variant-numeric: tabular-nums;
position: relative;
z-index: 1;
}
/* ========================================================================
Hover tooltip
======================================================================== */
.nn-navigation-calendar-hover-tooltip {
position: fixed;
z-index: 1000;
pointer-events: none;
width: 240px;
max-width: min(260px, calc(100vw - 16px));
padding: 8px;
display: flex;
flex-direction: column;
border-radius: 10px;
background: var(--background-secondary);
border: 1px solid var(--background-modifier-border);
box-shadow: var(--shadow-s, 0 6px 18px rgba(0, 0, 0, 0.2));
}
.nn-navigation-calendar-hover-tooltip-image {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
border-radius: 8px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* ========================================================================
Right sidebar shell
======================================================================== */
.nn-calendar-right-sidebar {
--nn-calendar-right-sidebar-bg: var(--background-secondary);
overflow: auto;
background-color: var(--nn-calendar-right-sidebar-bg);
}
.nn-calendar-right-sidebar .nn-navigation-calendar {
--nn-calendar-header-chip-bg: var(--nn-calendar-right-sidebar-bg);
--nn-calendar-active-editor-gap-color: var(--nn-calendar-right-sidebar-bg);
--nn-calendar-cell-surface-bg: var(--nn-calendar-right-sidebar-bg);
--nn-calendar-header-font-size: 16px;
--nn-calendar-today-font-size: 13px;
}
.notebook-navigator-mobile .nn-calendar-right-sidebar .nn-navigation-calendar {
--nn-calendar-header-font-size: 18px;
--nn-calendar-today-font-size: 14px;
}
.nn-calendar-right-sidebar .nn-navigation-calendar-year-grid {
width: 100%;
}
.nn-calendar-right-sidebar .nn-navigation-calendar-year-month {
width: 100%;
height: 100%;
}
.is-mobile .nn-calendar-right-sidebar {
--nn-calendar-right-sidebar-bg: var(--mobile-sidebar-background);
}
.nn-calendar-right-sidebar-content {
padding: 10px 12px;
}
/* Source: src/styles/sections/list-files.css */
/* ========================================================================
File List Styles
======================================================================== */
/* File list container - scrollable area for files */
.nn-list-pane-chrome {
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.nn-list-pane-panel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.nn-list-pane-scroller {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 0 var(--nn-scroller-padding);
background-color: var(--nn-theme-list-bg); /* Opaque background for GPU scroll layer optimization */
position: relative;
}
.nn-list-pane-content {
flex: 1 0 auto;
}
.nn-list-title-area {
background-color: var(--nn-theme-list-bg);
padding: var(--nn-list-title-padding-block) var(--nn-scroller-padding) 8px;
}
.nn-list-title-content {
display: flex;
align-items: center;
padding: 0 var(--nn-file-item-padding-horizontal);
font-size: var(--nn-list-title-font-size);
font-weight: var(--nn-theme-list-heading-font-weight);
color: var(--nn-theme-list-heading-color);
}
.nn-list-title-text {
line-height: 1.2;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nn-list-title-label--folder-note {
text-decoration: var(--nn-theme-navitem-folder-note-name-decoration);
}
.nn-list-title-label--folder-note:hover {
cursor: pointer;
text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration);
}
/* File - container for each file in the list */
.nn-file {
--nn-file-item-border-radius: min(16px, var(--nn-theme-file-border-radius));
background: transparent;
padding: 0;
-webkit-user-select: none;
user-select: none;
position: relative;
height: 100%;
/* CSS Custom Properties for file items - themes can override these */
contain: layout style paint;
}
/* Remove shadows */
.nn-file,
.nn-desktop .nn-file:hover {
box-shadow: none;
}
/* File content wrapper - contains all file information */
.nn-file-content {
padding: var(--nn-file-padding-vertical-mobile, var(--nn-file-padding-vertical)) var(--nn-file-item-padding-horizontal);
margin: 0;
border-radius: var(--nn-file-item-border-radius);
background: transparent;
position: relative; /* For absolute positioning of reveal overlay */
height: 100%;
box-sizing: border-box;
}
.nn-file.nn-has-custom-background::before {
content: '';
position: absolute;
top: 0px;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
background-color: var(--nn-file-custom-bg-color);
border-top-left-radius: var(--nn-file-top-left-radius, var(--nn-file-item-border-radius));
border-top-right-radius: var(--nn-file-top-right-radius, var(--nn-file-item-border-radius));
border-bottom-left-radius: var(--nn-file-bottom-left-radius, var(--nn-file-item-border-radius));
border-bottom-right-radius: var(--nn-file-bottom-right-radius, var(--nn-file-item-border-radius));
box-shadow: inset 0 0 0 var(--nn-theme-file-border-width) transparent;
z-index: 0;
pointer-events: none;
}
.nn-file.nn-has-custom-background > .nn-file-content {
z-index: 2;
}
.nn-virtual-file-item-has-filled-background-previous > .nn-file,
.nn-virtual-file-item-has-custom-background-previous > .nn-file.nn-has-custom-background {
--nn-file-top-left-radius: 0;
--nn-file-top-right-radius: 0;
}
.nn-virtual-file-item-has-filled-background-next > .nn-file,
.nn-virtual-file-item-has-custom-background-next > .nn-file.nn-has-custom-background {
--nn-file-bottom-left-radius: 0;
--nn-file-bottom-right-radius: 0;
}
/* File inner content - flex container for actual content */
.nn-file-inner-content {
display: flex;
flex-direction: row;
gap: var(--nn-file-row-gap);
align-items: flex-start;
position: relative;
height: 100%;
}
.nn-file-icon-slot {
width: var(--nn-file-icon-slot-width-mobile, var(--nn-file-icon-slot-width));
flex: 0 0 var(--nn-file-icon-slot-width-mobile, var(--nn-file-icon-slot-width));
display: flex;
align-items: center;
align-self: flex-start;
justify-content: center;
margin-inline-end: max(0px, calc(var(--nn-file-icon-slot-gap) - var(--nn-file-row-gap)));
margin-top: max(0px, calc((var(--nn-file-title-line-height) - var(--nn-file-icon-size-mobile, var(--nn-file-icon-size))) / 2));
}
.nn-file-icon-rectangle {
min-width: 18px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline: 4px;
border-radius: 4px;
background-color: var(--background-secondary);
box-sizing: border-box;
}
.nn-file-icon-rectangle-text {
font-family: var(--font-monospace);
font-size: 9px;
font-weight: 700;
color: var(--nn-theme-foreground-muted);
text-transform: uppercase;
letter-spacing: 0.1px;
line-height: 1;
}
/* Virtual list file separator */
.nn-virtual-file-item:not(.nn-last-file)::after {
content: '';
position: absolute;
bottom: 0;
inset-inline-start: calc(
var(--nn-file-item-padding-horizontal) + var(--nn-file-icon-slot-width-mobile, var(--nn-file-icon-slot-width)) +
var(--nn-file-icon-slot-gap)
);
inset-inline-end: var(--nn-file-item-padding-horizontal);
height: var(--nn-separator-height);
background-color: var(--nn-theme-list-separator-color);
z-index: 100; /* Very high to ensure it's always on top */
pointer-events: none; /* Ensure it doesn't interfere with clicks */
}
/* Hide separator when flagged by renderer (selection) or context menu */
.nn-virtual-file-item.nn-hide-separator-selection::after,
.nn-virtual-file-item.nn-hide-separator-context-menu::after,
.nn-virtual-file-item.nn-virtual-file-item-has-filled-background::after,
.nn-virtual-file-item.nn-virtual-file-item-has-filled-background-next::after,
.nn-virtual-file-item.nn-virtual-file-item-has-custom-background::after,
.nn-virtual-file-item.nn-virtual-file-item-has-custom-background-next::after {
display: none;
}
/* Hide separators in compact mode */
.nn-compact-mode .nn-virtual-file-item::after {
display: none;
}
/* File text content - left side container for name and preview */
.nn-file-text-content {
flex: 1;
min-width: 0; /* Enable text truncation */
display: flex;
flex-direction: column;
gap: 0;
order: 1; /* Ensure it appears on the left */
height: 100%;
min-height: 0;
justify-content: flex-start;
}
/* Compact mode file text content - same as above but without min-height */
.nn-compact-file-text-content {
flex: 1;
min-width: 0; /* Enable text truncation */
display: flex;
flex-direction: column;
gap: 0;
order: 1; /* Ensure it appears on the left */
justify-content: flex-start; /* Top-align content */
}
/* Manual property sort editing */
.nn-manual-sort-scroller {
padding: 0 var(--nn-scroller-padding);
}
.nn-manual-sort-panel {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.75rem 0 1rem;
}
.nn-manual-sort-header {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0 var(--nn-file-item-padding-horizontal);
}
.nn-manual-sort-header-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.nn-manual-sort-title {
font-size: var(--nn-desktop-header-font-size);
font-weight: var(--nn-theme-list-header-breadcrumb-font-weight);
line-height: 1.3;
color: var(--nn-theme-list-heading-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nn-manual-sort-hint {
font-size: var(--nn-root-reorder-hint-font-size);
color: var(--nn-theme-foreground-muted);
line-height: 1.25;
}
.nn-manual-sort-done {
flex-shrink: 0;
padding: 0 0.75rem;
cursor: pointer;
}
.nn-manual-sort-done:disabled {
cursor: default;
}
.nn-manual-sort-list {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
}
.nn-manual-sort-section-header {
margin-top: var(--nn-list-group-header-spacer-before);
}
.nn-manual-sort-list > .nn-manual-sort-section-header:first-child {
margin-top: 0;
}
.nn-manual-sort-sortable-item {
position: relative;
width: 100%;
}
.nn-manual-sort-sortable-item-sorting {
z-index: 2;
}
.nn-manual-sort-row {
display: flex;
align-items: stretch;
min-width: 0;
cursor: grab;
position: relative;
width: 100%;
box-sizing: border-box;
}
.nn-manual-sort-row-sorting {
z-index: 2;
}
.nn-manual-sort-row-sorting::after {
display: none;
}
.nn-manual-sort-row-has-filled-background-previous .nn-file,
.nn-manual-sort-row-has-custom-background-previous .nn-file.nn-has-custom-background {
--nn-file-top-left-radius: 0;
--nn-file-top-right-radius: 0;
}
.nn-manual-sort-row-has-filled-background-next .nn-file,
.nn-manual-sort-row-has-custom-background-next .nn-file.nn-has-custom-background {
--nn-file-bottom-left-radius: 0;
--nn-file-bottom-right-radius: 0;
}
.nn-manual-sort-row-drag-block .nn-file.nn-selected .nn-file-content::before {
box-shadow: inset 0 0 0 2px var(--interactive-accent);
}
.nn-manual-sort-row-disabled {
cursor: default;
}
.nn-manual-sort-row:not(.nn-manual-sort-row-last)::after {
content: '';
position: absolute;
bottom: 0;
inset-inline-start: calc(
var(--nn-file-item-padding-horizontal) + var(--nn-file-icon-slot-width-mobile, var(--nn-file-icon-slot-width)) +
var(--nn-file-icon-slot-gap)
);
inset-inline-end: var(--nn-file-item-padding-horizontal);
height: var(--nn-separator-height);
background-color: var(--nn-theme-list-separator-color);
z-index: 100;
pointer-events: none;
}
.nn-manual-sort-row.nn-manual-sort-row-hide-separator::after,
.nn-manual-sort-row.nn-manual-sort-row-has-filled-background::after,
.nn-manual-sort-row.nn-manual-sort-row-has-filled-background-next::after,
.nn-manual-sort-row.nn-manual-sort-row-has-custom-background::after,
.nn-manual-sort-row.nn-manual-sort-row-has-custom-background-next::after {
display: none;
}
.nn-manual-sort-file {
flex: 1;
min-width: 0;
}
.nn-manual-sort-file .nn-file,
.nn-manual-sort-file .nn-file-content,
.nn-manual-sort-file .nn-file-inner-content {
height: auto;
}
.nn-file-manual-sort-disabled {
opacity: 0.55;
}
.notebook-navigator-mobile .nn-manual-sort-title {
font-size: var(--nn-mobile-header-font-size);
}
.notebook-navigator-mobile .nn-manual-sort-hint {
font-size: var(--nn-root-reorder-hint-font-size-mobile);
}
.notebook-navigator-mobile .nn-manual-sort-row {
cursor: default;
}
.notebook-navigator-mobile .nn-manual-sort-row-draggable:not(.nn-manual-sort-row-last)::after {
inset-inline-start: calc(
var(--nn-file-item-padding-horizontal) + var(--nn-file-icon-slot-width-mobile, var(--nn-file-icon-slot-width)) +
var(--nn-file-icon-slot-gap)
);
inset-inline-end: calc(var(--nn-file-item-padding-horizontal) + 28px + var(--nn-file-item-padding-horizontal));
}
.notebook-navigator-mobile .nn-manual-sort-row .nn-drag-handle {
align-self: center;
width: calc(28px + var(--nn-file-item-padding-horizontal));
padding-inline-end: var(--nn-file-item-padding-horizontal);
box-sizing: border-box;
}
/* File name - primary text with ellipsis overflow */
.nn-file-name {
font-size: var(--nn-file-name-size-mobile, var(--nn-file-name-size));
font-weight: var(--nn-theme-file-name-font-weight);
color: var(--nn-theme-file-name-color);
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: var(--filename-rows, 1);
-webkit-box-orient: vertical;
line-height: var(--nn-file-title-line-height);
word-break: break-word;
max-height: calc(var(--nn-file-title-line-height) * var(--filename-rows, 1));
}
.nn-file-name[data-title-rows='1'] {
display: block;
white-space: nowrap;
word-break: normal;
}
.nn-file-name[data-has-color='true'] {
color: var(--nn-file-name-custom-color);
}
.nn-file-name-suffix {
color: var(--nn-theme-file-word-count-color);
font-weight: var(--nn-theme-file-word-count-font-weight);
}
/* Keep aliases in normal text flow so title clamping can reveal or wrap each value independently. */
.nn-file-alias-match {
display: inline;
margin-inline-start: 5px;
color: var(--nn-theme-foreground-muted);
font-size: 0.85em;
font-weight: normal;
vertical-align: baseline;
}
.nn-file-alias-match-icon {
display: inline-flex;
width: 1em;
height: 1em;
margin-inline-end: 2px;
vertical-align: -0.125em;
}
.nn-file-alias-match-icon svg {
width: 1em;
height: 1em;
}
/* Property evidence appears only while an internal property search is active. */
.nn-file-property-search-evidence {
display: inline;
margin-inline-start: 5px;
color: var(--nn-theme-foreground-muted);
font-size: 0.85em;
font-weight: normal;
vertical-align: baseline;
}
.nn-file-property-search-evidence-key {
font-weight: 600;
}
.nn-file-property-search-evidence-icon {
display: inline-flex;
width: 1em;
height: 1em;
margin-inline-end: 2px;
vertical-align: -0.125em;
}
.nn-file-property-search-evidence-icon svg {
width: 1em;
height: 1em;
}
.nn-file-icon {
width: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
height: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--nn-theme-navitem-icon-color);
}
.nn-file-icon svg {
width: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
height: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
}
.nn-file-icon.nn-emoji-icon,
.nn-file-icon .nn-emoji-icon {
font-size: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
width: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
height: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
line-height: var(--nn-file-icon-size-mobile, var(--nn-file-icon-size));
display: flex;
align-items: center;
justify-content: center;
}
.nn-file-icon[data-has-color='false'] {
color: var(--nn-theme-navitem-icon-color);
}
.nn-file.nn-selected .nn-file-icon[data-has-color='false'] {
color: var(--nn-theme-navitem-selected-icon-color);
}
/* A configured task color remains stable across selection states. Without one, the replacement
follows the same normal and selected colors as the file icon it replaces. */
.nn-file-icon.nn-file-icon-unfinished-task[data-has-color='false'] {
color: var(--nn-theme-file-task-color, var(--nn-theme-navitem-icon-color));
}
.nn-file.nn-selected .nn-file-icon.nn-file-icon-unfinished-task[data-has-color='false'] {
color: var(--nn-theme-file-task-color, var(--nn-theme-navitem-selected-icon-color));
}
/* Quick actions panel - horizontal container for action icons */
.nn-quick-actions-panel {
position: absolute;
top: 8px; /* Default: 8px for normal mode */
inset-inline-end: 8px;
height: 20px;
display: flex;
background: var(--nn-theme-quick-actions-bg);
border: 1px solid var(--nn-theme-quick-actions-border);
border-radius: min(12px, var(--nn-theme-quick-actions-border-radius));
z-index: 10;
flex-direction: row;
align-items: center;
/* Dynamic padding that scales with border radius for better visual balance (clamped to max 6px at 12px radius) */
padding: 0 max(4px, calc(min(12px, var(--nn-theme-quick-actions-border-radius)) * 0.5));
gap: 0;
}
/* Individual quick action items */
.nn-quick-action-item {
width: 16px;
height: 16px;
cursor: pointer;
color: var(--nn-theme-quick-actions-icon-color);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Icon highlights when hovering directly on it */
.nn-quick-action-item:hover {
color: var(--nn-theme-quick-actions-icon-hover-color);
}
/* Separator between quick actions */
.nn-quick-action-separator {
width: 1px;
height: 14px;
background: var(--nn-theme-quick-actions-separator-color);
margin: 0 4px;
flex-shrink: 0;
}
/* Compact mode with 1 title row and no tags: center vertically */
.nn-quick-actions-panel.nn-compact-mode[data-title-rows='1'][data-has-tags='false'] {
top: max(0px, calc((var(--nn-file-title-line-height) + var(--nn-file-padding-vertical-compact) * 2 - 20px) / 2));
}
/* Compact mode with tags or more than 1 title row: align with compact padding */
.nn-quick-actions-panel.nn-compact-mode:not([data-title-rows='1']),
.nn-quick-actions-panel.nn-compact-mode[data-has-tags='true'] {
top: var(--nn-file-padding-vertical-compact);
}
/* Second line container - holds date and preview text */
.nn-file-second-line {
display: flex;
align-items: center; /* Center align for better icon/text alignment */
gap: 4px;
}
/* File date - modification date display */
.nn-file-date {
font-size: var(--nn-file-small-size-mobile, var(--nn-file-small-size));
font-weight: var(--nn-theme-file-date-font-weight);
color: var(--nn-theme-file-date-color);
flex-shrink: 0;
white-space: nowrap;
margin-inline-end: 0;
overflow: hidden;
text-overflow: ellipsis;
min-width: auto;
line-height: var(--nn-file-single-text-line-height);
}
/* Task progress - task icon with optional fixed-width bar and completed/total task count.
The container color drives the dot separator, icon, and count; track and fill read the same variable.
The task color variables are intentionally unset by default: the var() fallbacks detect whether a
theme or Style Settings customized them. Customized colors persist on selected rows (see list-tags.css),
while the uncustomized default follows the date color in each selection state. */
.nn-file-task-progress {
--nn-file-task-progress-current-color: var(--nn-theme-file-task-color, var(--nn-theme-file-date-color));
--nn-file-task-progress-current-weight: var(--nn-theme-file-task-font-weight);
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
line-height: var(--nn-file-single-text-line-height);
color: var(--nn-file-task-progress-current-color);
}
/* All tasks completed: color and weight default to the unfinished values, so completion reads
only from the count showing equal numbers unless a theme customizes the complete variables. */
.nn-file-task-progress--complete {
--nn-file-task-progress-current-color: var(
--nn-theme-file-task-complete-color,
var(--nn-theme-file-task-color, var(--nn-theme-file-date-color))
);
--nn-file-task-progress-current-weight: var(--nn-theme-file-task-complete-font-weight);
}
/* Task icon inherits the current color so it reflects the complete state when bar and count are hidden. */
.nn-file-task-progress-icon {
width: calc(var(--icon-size) * 0.8);
height: calc(var(--icon-size) * 0.8);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Emoji and icon-font providers render the glyph on the container instead of adding an SVG,
so they need an explicit font size to match the task indicator box. */
.nn-file-task-progress-icon.nn-emoji-icon,
.nn-file-task-progress-icon.nn-iconfont {
font-size: calc(var(--icon-size) * 0.8);
line-height: calc(var(--icon-size) * 0.8);
}
/* The icon has no font weight, so its stroke width tracks the state weight variable instead:
weight 400 maps to the lucide default stroke of 2, weight 600 to 2.5, keeping the icon's
visual boldness in sync with the count text. */
.nn-file-task-progress-icon svg {
width: 100%;
height: 100%;
stroke-width: calc(2px + (var(--nn-file-task-progress-current-weight) - 400) * 0.0025px);
}
/* Bar width stays fixed regardless of task count; only the fill percentage changes. */
.nn-file-task-progress-track {
position: relative;
width: 44px;
height: 4px;
border-radius: 999px;
overflow: hidden;
}
/* Track background derives from the current color so themed colors tint track, fill, and count together. */
.nn-file-task-progress-track::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background-color: var(--nn-file-task-progress-current-color);
opacity: 0.25;
}
.nn-file-task-progress-fill {
position: relative;
width: var(--nn-file-task-progress-width, 0%);
height: 100%;
border-radius: inherit;
background-color: var(--nn-file-task-progress-current-color);
}
.nn-file-task-progress-count {
font-size: var(--nn-file-small-size-mobile, var(--nn-file-small-size));
font-weight: var(--nn-file-task-progress-current-weight);
white-space: nowrap;
}
/* Task progress followed by the date: trailing dot separator. The dot is a flex item inside
the task element - the same mechanism as the parent folder's leading dot - so both dots get
identical box geometry and flex centering. Placing it inside the date's inline text instead
would tie it to baseline math and misalign it against the flex-centered folder dot. */
.nn-file-task-progress[data-dot-separator='true']::after {
content: '•';
flex-shrink: 0;
font-size: 0.65em;
color: var(--nn-theme-file-date-color);
}
/* Parent folder after date or task progress (same line): match legacy spacing when dot separator is disabled. */
.nn-file-second-line > .nn-file-date + .nn-parent-folder[data-dot-separator='false'],
.nn-file-second-line > .nn-file-task-progress + .nn-parent-folder[data-dot-separator='false'] {
margin-inline-start: 8px;
}
/* Parent folder after date or task progress (same line): dot separator */
.nn-file-second-line > .nn-file-date + .nn-parent-folder[data-dot-separator='true']::before,
.nn-file-second-line > .nn-file-task-progress + .nn-parent-folder[data-dot-separator='true']::before {
content: '•';
flex-shrink: 0;
margin-inline-end: 4px;
font-size: 0.65em;
}
.nn-file-second-line .nn-parent-folder {
flex: 0 1 auto;
}
/* File preview text - secondary line showing file content */
.nn-file-preview {
font-size: var(--nn-file-small-size-mobile, var(--nn-file-small-size));
font-weight: var(--nn-theme-file-preview-font-weight);
color: var(--nn-theme-file-preview-color);
line-height: var(--nn-file-multiline-text-line-height);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: var(--preview-rows, 1);
-webkit-box-orient: vertical;
word-break: break-word;
max-height: calc(var(--nn-file-multiline-text-line-height) * var(--preview-rows, 1));
}
/* Pinned task progress and preview share one secondary row. */
.nn-file-second-line--pinned {
overflow: hidden;
}
.nn-file-second-line--pinned .nn-file-preview {
display: block;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
}
/* Parent folder indicator shown under file names */
.nn-parent-folder {
font-size: var(--nn-file-small-size-mobile, var(--nn-file-small-size));
font-weight: var(--nn-theme-file-parent-font-weight);
color: var(--nn-theme-file-parent-color);
display: flex;
align-items: center;
overflow: hidden;
line-height: var(--nn-file-single-text-line-height); /* Use second line height for consistent spacing */
flex: 1;
min-width: 0;
}
.nn-parent-folder-content {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 1 auto;
max-width: 100%;
min-width: 0;
}
.nn-parent-folder-content[data-has-background='true'] {
box-sizing: border-box;
height: var(--nn-file-single-text-line-height);
line-height: calc(var(--nn-file-single-text-line-height) - 2px);
border-radius: 4px;
padding: 1px 4px;
}
.nn-parent-folder-content[data-reveal='true'] {
cursor: pointer;
user-select: none;
}
.nn-parent-folder-content[data-reveal='true']:hover .nn-parent-folder-label,
.nn-parent-folder-content[data-reveal='true']:focus-visible .nn-parent-folder-label {
text-decoration: underline;
}
.nn-parent-folder-content[data-reveal='true']:focus-visible {
outline: 1px solid var(--interactive-accent);
outline-offset: 2px;
}
/* Folder indicator text */
.nn-parent-folder span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Folder icon styling */
.nn-parent-folder-icon {
width: calc(var(--icon-size) * 0.8);
height: calc(var(--icon-size) * 0.8);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nn-parent-folder-label {
font-weight: var(--nn-theme-file-parent-font-weight);
}
.nn-parent-folder-label.nn-parent-folder-label--colored {
font-weight: var(--nn-theme-navitem-custom-color-name-font-weight);
}
/* Source: src/styles/sections/list-tags.css */
/* ========================================================================
Tag & Property Value Display Styles
======================================================================== */
/* Tag container */
.nn-file-tags,
.nn-file-property-row {
display: flex;
flex-wrap: nowrap;
gap: var(--nn-file-tag-row-gap);
margin-top: var(--nn-file-tag-row-gap);
overflow-x: auto;
overflow-y: hidden;
height: var(--nn-file-tag-row-height);
position: relative;
scrollbar-width: none;
-ms-overflow-style: none;
}
.nn-file-tags::-webkit-scrollbar,
.nn-file-property-row::-webkit-scrollbar {
display: none;
}
/* Individual tag pill */
.nn-file-tag {
--nn-file-pill-border-color-resolved: var(--nn-theme-file-tag-border-color);
display: inline-flex;
align-items: center;
box-sizing: border-box;
height: var(--nn-file-tag-row-height);
line-height: 1;
padding: 0 8px;
background-color: var(--nn-theme-file-tag-bg);
color: var(--nn-theme-file-tag-color);
border-radius: min(10px, var(--nn-theme-file-tag-border-radius));
border-style: solid;
border-width: var(--nn-theme-file-pill-border-width);
border-color: var(--nn-file-pill-border-color-resolved);
font-size: 12px;
font-weight: var(--nn-theme-file-tag-font-weight);
white-space: nowrap;
flex-shrink: 0;
}
.nn-file-pill-inline-icon {
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 4px;
color: currentColor;
flex-shrink: 0;
}
.nn-file-pill-inline-icon svg {
width: 12px;
height: 12px;
}
.nn-file-tag[data-has-color='true'],
.nn-file-tag[data-has-background='true'] {
--nn-file-pill-border-color-resolved: color-mix(in srgb, currentColor 30%, transparent);
}
.nn-file-property {
--nn-file-pill-border-color-resolved: var(--nn-theme-file-property-border-color);
background-color: var(--nn-theme-file-property-bg);
color: var(--nn-theme-file-property-color);
border-radius: min(10px, var(--nn-theme-file-property-border-radius));
}
.nn-file-tag[data-has-background='true'] {
background-color: var(--nn-theme-nav-bg);
background-image: linear-gradient(var(--nn-file-tag-custom-bg, transparent), var(--nn-file-tag-custom-bg, transparent));
}
.nn-file-tag[data-has-color='true'] {
font-weight: var(--nn-theme-navitem-custom-color-name-font-weight);
}
.nn-file-tag[data-has-color='true']:not([data-has-background='true']) {
background-color: var(--nn-theme-list-bg);
background-image: linear-gradient(color-mix(in srgb, currentColor 10%, transparent), color-mix(in srgb, currentColor 10%, transparent));
}
.nn-file-tag[data-has-background='true']:not([data-has-color='true']) {
color: var(--nn-theme-file-tag-custom-color-text-color);
}
/* Tag pill hover effect - darken/lighten all tags on hover */
.nn-file-tag.nn-clickable-tag:hover {
filter: brightness(0.9);
}
/* Clickable tag styling */
.nn-file-tag.nn-clickable-tag {
cursor: pointer;
}
/* Underline property pills that render clickable link values */
.nn-file-tag.nn-file-property.nn-file-property-link {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Dark mode tag hover - lighten instead of darken */
.theme-dark .nn-file-tag.nn-clickable-tag:hover {
filter: brightness(1.05);
}
/* Selected file tag styles - only for tags without custom colors */
.nn-file.nn-selected .nn-file-tag:not(.nn-file-property):not([data-has-color='true']):not([data-has-background='true']) {
--nn-file-pill-border-color-resolved: var(--nn-theme-file-selected-tag-border-color);
background-color: var(--nn-selected-file-tag-bg);
color: var(--nn-selected-file-tag-color);
}
.nn-file.nn-selected .nn-file-tag.nn-file-property:not([data-has-color='true']):not([data-has-background='true']) {
--nn-file-pill-border-color-resolved: var(--nn-theme-file-selected-property-border-color);
background-color: var(--nn-selected-file-property-bg);
color: var(--nn-selected-file-property-color);
}
/* Selected file text colors */
.nn-file.nn-selected .nn-file-name {
color: var(--nn-selected-file-name-color);
}
.nn-file.nn-selected .nn-file-name[data-has-color='true'] {
color: var(--nn-file-name-custom-color);
}
.nn-file.nn-selected .nn-file-preview {
color: var(--nn-selected-file-preview-color);
}
.nn-file.nn-selected .nn-file-date {
color: var(--nn-selected-file-date-color);
}
/* Selected rows: customized task colors persist (like custom tag colors); only the
uncustomized default falls back to the selected date color. */
.nn-file.nn-selected .nn-file-task-progress {
--nn-file-task-progress-current-color: var(--nn-theme-file-task-color, var(--nn-selected-file-date-color));
}
/* The trailing dot separator stays neutral like the date, not the task color. */
.nn-file.nn-selected .nn-file-task-progress[data-dot-separator='true']::after {
color: var(--nn-selected-file-date-color);
}
.nn-file.nn-selected .nn-file-task-progress--complete {
--nn-file-task-progress-current-color: var(
--nn-theme-file-task-complete-color,
var(--nn-theme-file-task-color, var(--nn-selected-file-date-color))
);
}
.nn-file.nn-selected .nn-file-name-suffix {
color: var(--nn-selected-file-word-count-color);
}
.nn-file.nn-selected .nn-parent-folder {
color: var(--nn-selected-file-parent-color);
}
/* Source: src/styles/sections/list-compact-mode.css */
/* ========================================================================
Compact Mode Styles
======================================================================== */
/* Compact file item - more compact list appearance */
.nn-file.nn-compact {
--nn-file-item-border-radius: min(14px, var(--nn-theme-navitem-border-radius));
}
.nn-file.nn-compact .nn-file-content {
padding: var(--nn-file-padding-vertical-compact) var(--nn-file-item-padding-horizontal); /* Reduced vertical padding */
}
/* Mobile compact file items use larger touch targets. */
.notebook-navigator-mobile .nn-file.nn-compact .nn-file-content {
padding: var(--nn-file-padding-vertical-compact-mobile) var(--nn-file-item-padding-horizontal);
}
/* Compact file name - no bold, smaller font like folder items */
.nn-file.nn-compact .nn-file-name {
font-size: var(--nn-compact-font-size, var(--nn-file-small-size-mobile, var(--nn-file-small-size)));
font-weight: var(--nn-theme-file-compact-name-font-weight);
margin-bottom: 0;
line-height: var(--nn-file-title-line-height);
}
/* Mobile compact mode file names use the mobile compact font variable. */
.notebook-navigator-mobile .nn-file.nn-compact .nn-file-name {
font-size: var(--nn-compact-font-size-mobile, var(--nn-compact-font-size, 15px));
}
/* Apply standard font weight to colored file names in compact mode */
.nn-file.nn-compact .nn-file-name[data-has-color='true'] {
font-weight: var(--nn-theme-file-name-font-weight);
}
.nn-compact-file-header {
display: flex;
align-items: center;
gap: 8px;
}
.nn-compact-file-header .nn-file-name {
flex: 1;
min-width: 0;
}
.nn-compact-extension-badge {
margin-left: auto;
display: flex;
}
/* Selected compact file - maintain selection styles */
.nn-file.nn-compact.nn-selected .nn-file-name {
color: var(--nn-selected-file-name-color);
}
/* Preserve custom color for colored file names even when selected in compact mode */
.nn-file.nn-compact.nn-selected .nn-file-name[data-has-color='true'] {
color: var(--nn-file-name-custom-color);
}
/* Source: src/styles/sections/list-file-thumbnails.css */
/* ========================================================================
File Thumbnail Styles
======================================================================== */
/* File thumbnail container - right-aligned thumbnail slot */
.nn-file-thumbnail {
flex-shrink: 0;
border-radius: min(32px, var(--nn-theme-file-feature-border-radius));
overflow: hidden;
background-color: transparent;
position: relative;
order: 2; /* Ensure it appears on the right */
align-self: center;
}
.nn-file-thumbnail--square {
width: var(--nn-file-thumbnail-min-size);
height: var(--nn-file-thumbnail-min-size);
}
.nn-file-thumbnail--natural {
width: auto;
height: var(--nn-file-thumbnail-min-size);
aspect-ratio: var(--nn-file-thumbnail-aspect-ratio, 1);
}
.nn-file-thumbnail--hidden {
display: none;
}
/* Dynamic sizing based on calculated item height */
.nn-virtual-file-item .nn-file-thumbnail {
/* Size based on the same padded content box as the text stack. */
--image-size: clamp(
var(--nn-file-thumbnail-min-size),
calc(var(--item-height) - var(--nn-file-padding-total-mobile, var(--nn-file-padding-total))),
var(--nn-file-thumbnail-max-size)
);
}
.nn-virtual-file-item .nn-file-thumbnail--square {
width: var(--image-size);
height: var(--image-size);
}
.nn-virtual-file-item .nn-file-thumbnail--extension-badge {
width: var(--nn-file-thumbnail-min-size);
height: var(--nn-file-thumbnail-min-size);
}
.nn-virtual-file-item .nn-file-thumbnail--natural {
height: var(--image-size);
max-height: var(--image-size);
}
/* Thumbnail image element - covers container with proper aspect ratio */
.nn-file-thumbnail-img {
width: 100%;
height: 100%;
}
/* Inset highlight overlay - masked by the thumbnail image so it only covers opaque pixels */
.nn-file-thumbnail--inset-highlight::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 -1px 0 rgba(255, 255, 255, 0.05);
pointer-events: none;
z-index: 1;
mask-image: var(--nn-file-thumbnail-mask-image, none);
mask-repeat: no-repeat;
}
/* Mask geometry mirrors the img object-fit and object-position per variant */
.nn-file-thumbnail--square.nn-file-thumbnail--inset-highlight::before {
mask-size: cover;
mask-position: center top;
}
.nn-file-thumbnail--natural.nn-file-thumbnail--inset-highlight::before {
mask-size: contain;
mask-position: center;
}
.nn-file-thumbnail--square .nn-file-thumbnail-img {
object-fit: cover;
object-position: center top;
}
.nn-file-thumbnail--natural .nn-file-thumbnail-img {
object-fit: contain;
object-position: center;
}
/* Selected file image - slightly transparent when selected */
.nn-file.nn-selected .nn-file-thumbnail {
opacity: 0.9;
}
/* File extension badge - shown for non-markdown/non-image files */
.nn-file-extension-badge {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--background-secondary);
font-family: var(--font-monospace);
padding: 2px;
box-sizing: border-box;
}
.nn-file-extension-text {
font-size: 9px;
font-weight: 700;
color: var(--nn-theme-foreground-muted);
text-transform: uppercase;
letter-spacing: 0.1px;
}
.nn-file-extension-icon {
width: min(24px, 42%);
height: min(24px, 42%);
color: var(--nn-theme-foreground-muted);
}
/* Source: src/styles/sections/list-group-headers.css */
/* ========================================================================
List Group Headers
======================================================================== */
/* List group headers for grouped files */
.nn-list-group-header {
height: var(--nn-list-group-header-height-mobile, var(--nn-list-group-header-height));
box-sizing: border-box;
padding: 0 var(--nn-file-item-padding-horizontal);
font-size: var(--nn-file-small-size-mobile, var(--nn-file-small-size));
font-weight: var(--nn-theme-list-group-header-font-weight);
color: var(--nn-theme-list-group-header-color);
background-color: transparent;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 6px;
}
/* The whole header row toggles collapse, not just the chevron button */
.nn-list-group-header--collapsible {
cursor: pointer;
}
.nn-list-group-header-spacer {
height: var(--item-height);
}
.nn-list-sticky-header {
position: sticky;
top: 0;
/* Keep the sticky copy out of layout so it overlays the virtualized list rows. */
height: 0;
flex: 0 0 0;
overflow: visible;
z-index: 200;
pointer-events: none;
}
.nn-list-pane-scroller .nn-virtual-list-group-header:not(.nn-hide-list-group-header-separator)::after {
content: '';
position: absolute;
bottom: 0;
inset-inline-start: var(--nn-file-item-padding-horizontal);
inset-inline-end: var(--nn-file-item-padding-horizontal);
height: var(--nn-separator-height);
background-color: var(--nn-theme-list-separator-color);
z-index: 100;
pointer-events: none;
}
.nn-list-pane-scroller .nn-virtual-list-group-header.nn-hide-separator-selection::after {
display: none;
}
.nn-list-sticky-header .nn-list-group-header {
position: relative;
overflow: visible;
background-color: var(--nn-theme-list-bg);
pointer-events: auto;
}
.nn-list-sticky-header .nn-list-group-header::before {
content: '';
position: absolute;
top: -1px;
bottom: 0;
inset-inline-start: calc(-1 * var(--nn-scroller-padding));
inset-inline-end: calc(-1 * var(--nn-scroller-padding));
background-color: var(--nn-theme-list-bg);
z-index: -1;
}
.nn-list-sticky-header .nn-manual-sort-group-header-shell {
overflow: visible;
background-color: var(--nn-theme-list-bg);
pointer-events: auto;
}
.nn-list-sticky-header .nn-manual-sort-group-header-shell::before {
content: '';
position: absolute;
top: -1px;
bottom: 0;
inset-inline-start: calc(-1 * var(--nn-scroller-padding));
inset-inline-end: calc(-1 * var(--nn-scroller-padding));
background-color: var(--nn-theme-list-bg);
z-index: -1;
}
.nn-list-sticky-header .nn-manual-sort-group-header-shell .nn-list-group-header {
background-color: transparent;
}
.nn-list-sticky-header .nn-manual-sort-group-header-shell .nn-list-group-header::before {
content: none;
}
.nn-list-group-header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--nn-list-group-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
height: var(--nn-list-group-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
color: var(--nn-theme-list-group-header-color);
flex: 0 0 auto;
}
.nn-list-group-header-icon svg {
width: 100%;
height: 100%;
}
.nn-list-group-header--manual-sort {
--nn-manual-sort-group-header-accent: var(--interactive-accent);
}
.nn-manual-sort-group-header-shell {
--nn-manual-sort-group-header-accent: var(--interactive-accent);
height: var(--nn-list-group-goal-header-height-mobile, var(--nn-list-group-goal-header-height));
position: relative;
overflow: hidden;
background-color: var(--nn-theme-list-bg);
}
.nn-manual-sort-group-header-content {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 5px;
}
.nn-manual-sort-group-header-content--accent-all {
color: var(--nn-manual-sort-group-header-accent);
}
.nn-manual-sort-group-header-custom-icon {
flex: 0 0 auto;
width: var(--nn-list-group-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
height: var(--nn-list-group-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
color: currentColor;
}
.nn-manual-sort-group-header-content--accent-icon .nn-manual-sort-group-header-custom-icon {
color: var(--nn-manual-sort-group-header-accent);
}
.nn-manual-sort-group-header-custom-icon svg {
width: 100%;
height: 100%;
}
.nn-manual-sort-group-header-title {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.nn-manual-sort-group-header-count {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
color: var(--nn-theme-foreground-muted);
}
.nn-manual-sort-group-header-content--accent-all .nn-manual-sort-group-header-count {
color: inherit;
}
.nn-manual-sort-group-header-percent {
flex: 0 0 auto;
margin-inline-start: auto;
font-weight: 600;
color: var(--nn-manual-sort-group-header-accent);
}
.nn-manual-sort-group-header-progress {
position: relative;
width: 100%;
height: 3px;
overflow: hidden;
border-radius: 999px;
}
.nn-manual-sort-group-header-progress::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background-color: var(--nn-manual-sort-group-header-accent);
opacity: 0.1;
}
.nn-manual-sort-group-header-progress-fill {
position: relative;
width: var(--nn-manual-sort-group-header-progress);
height: 100%;
border-radius: inherit;
background-color: var(--nn-manual-sort-group-header-accent);
}
.nn-manual-sort-group-header-progress-row {
box-sizing: border-box;
position: absolute;
z-index: 1;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: var(--nn-list-group-progress-gap-after);
height: 3px;
display: flex;
align-items: center;
padding: 0 var(--nn-file-item-padding-horizontal);
pointer-events: none;
}
.nn-list-group-header-text {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.nn-list-group-header-text--custom-color {
font-weight: var(--nn-theme-navitem-custom-color-name-font-weight);
}
.nn-list-group-header-item-count {
flex: 0 0 auto;
font-weight: 400;
color: var(--nn-theme-foreground-muted);
}
.nn-list-group-header-path {
display: inline-flex;
align-items: center;
}
.nn-list-group-header-folder-segment {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.nn-list-group-header-folder-segment:not(:last-child) {
flex-shrink: 0;
}
.nn-list-group-header-folder-segment:last-child {
flex: 1 1 auto;
}
.nn-list-group-header-path-separator {
flex: 0 0 auto;
padding-inline: 4px;
}
button.nn-list-group-header-collapse-button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: var(--nn-list-group-header-height-mobile, var(--nn-list-group-header-height));
height: var(--nn-list-group-header-height-mobile, var(--nn-list-group-header-height));
margin-inline-start: auto;
margin-inline-end: -6px;
padding: 0;
border: 0;
border-radius: 4px;
color: var(--nn-theme-list-group-header-color);
background: transparent;
box-shadow: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
button.nn-list-group-header-collapse-button:focus-visible {
color: var(--text-normal);
background-color: var(--background-modifier-hover);
}
button.nn-list-group-header-collapse-button .nn-list-group-header-icon {
width: var(--nn-list-group-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
height: var(--nn-list-group-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
}
.nn-list-group-header-text--folder-note {
text-decoration: var(--nn-theme-navitem-folder-note-name-decoration);
}
.nn-list-group-header-text--folder-note:hover {
cursor: pointer;
text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration);
}
.nn-pinned-section-header {
align-items: center;
user-select: none;
}
/* Virtual list item - absolute positioning for list pane items */
.nn-list-pane-scroller .nn-virtual-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
/* Skeleton view - minimal loading state */
.nn-skeleton-navigation-pane {
background-color: var(--nn-theme-nav-bg);
height: 100%;
display: flex;
flex-direction: column;
}
.nn-skeleton-list-pane {
background-color: var(--nn-theme-list-bg);
width: 100%;
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
.nn-skeleton-navigation-pane-vertical {
width: 100%;
min-height: var(--nn-navigation-pane-min-height);
flex: 0 1 auto;
}
.nn-skeleton-list-pane-vertical {
min-height: var(--nn-list-pane-min-height);
}
.nn-skeleton-nav-header {
height: 32px;
background-color: var(--nn-theme-nav-bg);
flex-shrink: 0;
}
/* Add right border to nav header in dual pane mode */
.nn-split-container.nn-orientation-horizontal:not(.nn-single-pane) .nn-skeleton-nav-header {
border-right: 1px solid var(--nn-theme-divider-border-color);
}
.nn-split-container.nn-orientation-vertical:not(.nn-single-pane) .nn-skeleton-nav-header {
border-right: none;
border-bottom: 1px solid var(--nn-theme-divider-border-color);
}
.nn-skeleton-list-header {
height: 32px;
background-color: var(--nn-theme-list-bg);
flex-shrink: 0;
}
.nn-skeleton-content {
flex: 1;
overflow: hidden;
background-color: inherit;
}
.nn-skeleton-search-bar {
height: 40px;
background-color: var(--nn-theme-list-bg);
flex-shrink: 0;
}
/* Add right border only to nav content area in dual pane mode */
.nn-split-container.nn-orientation-horizontal:not(.nn-single-pane) .nn-skeleton-navigation-pane .nn-skeleton-content {
border-right: 1px solid var(--nn-theme-divider-border-color);
}
.nn-split-container.nn-orientation-vertical:not(.nn-single-pane) .nn-skeleton-navigation-pane .nn-skeleton-content {
border-right: none;
border-bottom: 1px solid var(--nn-theme-divider-border-color);
}
/* Source: src/styles/sections/inline-rename.css */
/* ========================================================================
Inline Rename Styles
======================================================================== */
.nn-inline-rename-input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
box-sizing: border-box;
padding: 0 6px;
border: 1px solid var(--interactive-accent);
border-radius: 4px;
background-color: var(--background-primary);
color: var(--text-normal);
font: inherit;
line-height: normal;
}
.nn-inline-rename-input:focus {
outline: 2px solid var(--interactive-accent);
outline-offset: -2px;
}
.nn-inline-rename-input:disabled {
opacity: 0.75;
}
.nn-navitem-inline-rename {
height: calc(var(--nn-setting-nav-item-height) - 8px);
font-size: var(--nn-setting-nav-font-size);
font-weight: var(--nn-theme-navitem-name-font-weight);
}
.notebook-navigator-mobile .nn-navitem-inline-rename {
height: calc(var(--nn-setting-nav-item-height-mobile) - 10px);
}
.nn-file-name--inline-renaming {
display: flex;
align-items: center;
gap: 0;
max-height: none;
overflow: visible;
white-space: nowrap;
word-break: normal;
}
.nn-file-name--inline-renaming .nn-file-ext-suffix {
flex-shrink: 0;
}
.nn-file-inline-rename {
height: var(--nn-file-title-line-height);
font-size: var(--nn-file-name-size-mobile, var(--nn-file-name-size));
font-weight: var(--nn-theme-file-name-font-weight);
}
/* Source: src/styles/sections/ui-empty-state.css */
/* ========================================================================
Empty State
======================================================================== */
/* Empty state container - shown when no files in folder */
.nn-empty-state {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 40px 20px;
text-align: center;
color: var(--nn-theme-foreground-muted);
font-size: 14px;
}
/* Empty state message text */
.nn-empty-message {
text-align: center;
}
/* Source: src/styles/sections/state-selection.css */
/* ========================================================================
Selection States
======================================================================== */
/* Selected file background pseudo-element - better control over styling */
.nn-file.nn-selected .nn-file-content::before {
content: '';
position: absolute;
top: 0px;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
/* Pre-composited solid color prevents hairlines by blending alpha with pane background */
background-color: var(--nn-selected-file-bg-color);
border-top-left-radius: var(--nn-file-top-left-radius, var(--nn-file-item-border-radius));
border-top-right-radius: var(--nn-file-top-right-radius, var(--nn-file-item-border-radius));
border-bottom-left-radius: var(--nn-file-bottom-left-radius, var(--nn-file-item-border-radius));
border-bottom-right-radius: var(--nn-file-bottom-right-radius, var(--nn-file-item-border-radius));
box-shadow: inset 0 0 0 var(--nn-theme-file-border-width) var(--nn-selected-file-border-color);
z-index: 0; /* Below separator lines */
}
/* Adjust rounded corners for multiselection */
.nn-file.nn-selected.nn-has-selected-above .nn-file-content::before {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.nn-file.nn-selected.nn-has-selected-below .nn-file-content::before {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.nn-navitem.nn-selected > .nn-navitem-content:not(.nn-navitem-content--search-include):not(.nn-navitem-content--search-exclude) {
background: transparent;
}
/* Selection overlay lives above the custom background while mirroring trimmed corners */
.nn-navitem.nn-selected::after {
content: '';
position: absolute;
top: 0px;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: var(--nn-navitem-background-bottom-overdraw);
/* Pre-composited solid color prevents hairlines by blending alpha with pane background */
background-color: var(--nn-selected-navitem-bg-color);
border-top-left-radius: var(--nn-navitem-top-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
border-top-right-radius: var(--nn-navitem-top-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
border-bottom-left-radius: var(--nn-navitem-bottom-left-radius, min(14px, var(--nn-theme-navitem-border-radius)));
border-bottom-right-radius: var(--nn-navitem-bottom-right-radius, min(14px, var(--nn-theme-navitem-border-radius)));
box-shadow: inset 0 0 0 var(--nn-theme-navitem-border-width) var(--nn-selected-navitem-border-color);
z-index: 1;
pointer-events: none;
}
.nn-navitem.nn-selected > .nn-navitem-content {
position: relative;
z-index: 2;
}
/* Selected file inner content z-index - ensures content above background */
.nn-file.nn-selected .nn-file-inner-content {
position: relative;
z-index: 5; /* Above selection background but below separators */
}
/* Source: src/styles/sections/state-focus.css */
/* ========================================================================
Focus States
======================================================================== */
/* Navigation selection adornments follow the container focus state */
.nn-navitem.nn-selected .nn-navitem-chevron {
color: var(--nn-selected-navitem-chevron-color);
}
.nn-navitem.nn-selected .nn-navitem-icon {
color: var(--nn-selected-navitem-icon-color);
}
.nn-navitem.nn-selected .nn-navitem-name {
color: var(--nn-selected-navitem-name-color);
}
.nn-navitem.nn-selected[data-nav-item-type='note'] .nn-navitem-name {
color: var(--nn-selected-file-name-color);
}
.nn-navitem.nn-selected .nn-navitem-count {
color: var(--nn-selected-navitem-count-color);
background-color: var(--nn-selected-navitem-count-bg);
box-shadow: inset 0 0 0 var(--nn-theme-navitem-count-border-width) var(--nn-selected-navitem-count-border-color);
}
/* Source: src/styles/sections/state-hover.css */
/* ========================================================================
Hover States
======================================================================== */
/* File rows intentionally keep their existing styling on hover. */
/* Source: src/styles/sections/state-drag-and-drop.css */
/* ========================================================================
Drag and Drop States
======================================================================== */
/* Dragging state - visual feedback during drag operations */
.nn-dragging {
opacity: 0.5;
}
/* Resizing state - prevents text selection during pane resize */
body.nn-resizing {
-webkit-user-select: none;
user-select: none;
}
/* Drag over state - highlights valid drop targets */
.nn-navitem.nn-drag-over {
background-color: var(--text-selection);
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
}
.nn-list-pane-scroller.nn-drag-over {
outline: 2px solid var(--text-selection);
outline-offset: -2px;
}
/* Special visual feedback for tag drop zones - uses pre-composited solid color */
[data-drop-zone='tag'].nn-drag-over {
background-color: var(--nn-computed-tag-positive-bg, var(--nn-theme-tag-positive-bg));
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
}
[data-drop-zone='tag-root'].nn-drag-over {
background-color: var(--nn-computed-tag-positive-bg, var(--nn-theme-tag-positive-bg));
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
}
/* Different style for untagged drop zone - uses pre-composited solid color */
[data-drop-zone='tag'][data-tag='__untagged__'].nn-drag-over {
background-color: var(--nn-computed-tag-negative-bg, var(--nn-theme-tag-negative-bg));
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
}
/* Disable drag and drop feedback on mobile */
.notebook-navigator-mobile [draggable='true'] {
cursor: default;
}
.notebook-navigator-mobile .nn-navitem.nn-drag-over,
.notebook-navigator-mobile [data-drop-zone].nn-drag-over {
background-color: transparent;
}
.notebook-navigator-mobile .nn-list-pane-scroller.nn-drag-over {
outline: none;
}
/* Offscreen element used as the browser-native drag image */
.nn-drag-native-preview {
position: fixed;
left: -1000px;
top: -1000px;
display: inline-flex;
padding: 10px 0 0 12px;
pointer-events: none;
z-index: 999999;
opacity: 0.9;
}
/* Badge shown in the native drag image for multiple files */
.nn-drag-preview-badge {
background-color: #dc3545;
color: white;
font-weight: bold;
font-size: 14px;
min-width: 24px;
height: 24px;
padding: 0 8px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Icon shown in the native drag image for single items */
.nn-drag-preview-icon {
background-color: #000000; /* Default black for light mode */
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Dark mode: use dark gray background */
.theme-dark .nn-drag-preview-icon {
background-color: var(--background-modifier-border-hover);
}
/* Style the Lucide icon inside the drag preview */
.nn-drag-preview-icon svg {
width: 16px;
height: 16px;
color: #ffffff;
stroke: #ffffff;
stroke-width: 2.5;
fill: none;
}
/* Header actions layout variations
Different layouts are needed for mobile vs desktop views:
- space-between: Mobile file pane (back button + folder name + actions)
*/
.nn-header-actions--space-between {
width: 100%;
justify-content: space-between;
}
/* Source: src/styles/sections/state-context-menu.css */
/* ========================================================================
Context Menu States
======================================================================== */
/* Context menu active folder - prepares for outline */
.nn-navitem.nn-context-menu-active {
position: relative;
}
/* Context menu outline for folders - shows which item menu affects */
.nn-navitem.nn-context-menu-active:not(.nn-selected)::after {
content: '';
position: absolute;
top: 0;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
/* Use pre-composited solid color for consistent border appearance */
border: 2px solid var(--nn-computed-navitem-selected-bg, var(--nn-theme-navitem-selected-bg));
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
pointer-events: none;
z-index: 10;
}
/* Context menu active file - prepares for outline */
.nn-file.nn-context-menu-active .nn-file-content {
position: relative;
}
/* Context menu outline for files - shows which item menu affects */
.nn-file.nn-context-menu-active:not(.nn-selected) .nn-file-content::after {
content: '';
position: absolute;
top: 0;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0; /* Extend to bottom edge to cover separator space */
/* Use pre-composited solid color for consistent border appearance */
border: 2px solid var(--nn-computed-navitem-selected-bg, var(--nn-theme-navitem-selected-bg));
border-radius: min(16px, var(--nn-theme-file-border-radius));
pointer-events: none;
z-index: 10;
}
.nn-file.nn-compact.nn-context-menu-active:not(.nn-selected) .nn-file-content::after {
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
}
/* Appearance menu entries holding a per-selection custom value are marked in bold */
.nn-menu-title-custom {
font-weight: 600;
}
/* Source: src/styles/sections/state-hidden-items.css */
/* ========================================================================
Hidden Items - Dimmed appearance for hidden folders and tags
======================================================================== */
/* Hidden items (folders and tags) - dimmed appearance */
.nn-navitem.nn-excluded {
--nn-theme-navitem-chevron-color: var(--nn-theme-foreground);
--nn-theme-navitem-icon-color: var(--nn-theme-foreground);
--nn-theme-navitem-count-color: var(--nn-theme-foreground);
--nn-theme-navitem-selected-chevron-color: var(--nn-theme-foreground);
--nn-theme-navitem-selected-icon-color: var(--nn-theme-foreground);
--nn-theme-navitem-selected-count-color: var(--nn-theme-foreground);
--nn-theme-navitem-selected-inactive-chevron-color: var(--nn-theme-foreground);
--nn-theme-navitem-selected-inactive-icon-color: var(--nn-theme-foreground);
--nn-theme-navitem-selected-inactive-count-color: var(--nn-theme-foreground);
}
.nn-navitem.nn-excluded .nn-navitem-chevron,
.nn-navitem.nn-excluded .nn-navitem-icon,
.nn-navitem.nn-excluded .nn-navitem-name,
.nn-navitem.nn-excluded .nn-navitem-count {
opacity: 0.5;
}
/* Hidden files surfaced via "show hidden" toggle */
.nn-file.nn-hidden-file {
--nn-theme-file-name-color: var(--nn-theme-foreground);
--nn-theme-file-preview-color: var(--nn-theme-foreground);
--nn-theme-file-date-color: var(--nn-theme-foreground);
--nn-theme-file-word-count-color: var(--nn-theme-foreground);
--nn-theme-file-parent-color: var(--nn-theme-foreground);
--nn-theme-file-tag-color: var(--nn-theme-foreground);
--nn-theme-file-property-color: var(--nn-theme-foreground);
--nn-theme-file-selected-name-color: var(--nn-theme-foreground);
--nn-theme-file-selected-preview-color: var(--nn-theme-foreground);
--nn-theme-file-selected-date-color: var(--nn-theme-foreground);
--nn-theme-file-selected-word-count-color: var(--nn-theme-foreground);
--nn-theme-file-selected-parent-color: var(--nn-theme-foreground);
--nn-theme-file-selected-tag-color: var(--nn-theme-foreground);
--nn-theme-file-selected-property-color: var(--nn-theme-foreground);
--nn-theme-file-selected-inactive-name-color: var(--nn-theme-foreground);
--nn-theme-file-selected-inactive-preview-color: var(--nn-theme-foreground);
--nn-theme-file-selected-inactive-date-color: var(--nn-theme-foreground);
--nn-theme-file-selected-inactive-word-count-color: var(--nn-theme-foreground);
--nn-theme-file-selected-inactive-parent-color: var(--nn-theme-foreground);
--nn-theme-file-selected-inactive-tag-color: var(--nn-theme-foreground);
--nn-theme-file-selected-inactive-property-color: var(--nn-theme-foreground);
--nn-theme-navitem-icon-color: var(--nn-theme-foreground);
--nn-theme-navitem-selected-icon-color: var(--nn-theme-foreground);
--nn-theme-navitem-selected-inactive-icon-color: var(--nn-theme-foreground);
opacity: 0.5;
}
/* Source: src/styles/sections/modal-base.css */
/* ========================================================================
Modal Styles
======================================================================== */
/* Modal input field - used in rename/create dialogs */
.nn-input {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-s);
background-color: var(--background-primary);
color: var(--nn-theme-foreground);
font-size: 14px;
margin: 16px 0;
}
/* Modal input focus state */
.nn-input:focus {
outline: none;
border-color: var(--interactive-accent);
}
.nn-input-description {
color: var(--nn-theme-foreground-muted);
font-size: var(--font-ui-small);
margin-top: 12px;
}
.nn-merge-notes-summary {
margin-bottom: 8px;
}
.nn-merge-notes-details {
color: var(--nn-theme-foreground-muted);
font-size: var(--font-ui-small);
unicode-bidi: plaintext;
}
.nn-merge-notes-warning {
color: var(--text-error);
font-weight: 700;
unicode-bidi: plaintext;
}
.nn-input-checkbox-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
cursor: pointer;
font-size: var(--font-ui-small);
}
.nn-input-checkbox-row input[type='checkbox'] {
margin: 0;
}
/* Modal button container - right-aligned button group */
.nn-button-container {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
}
/* YouTube play overlay shared by modal thumbnail links */
.nn-youtube-play {
position: absolute;
top: var(--nn-youtube-play-y, 50%);
left: var(--nn-youtube-play-x, 50%);
width: 52px;
height: 36px;
transform: translate(-50%, -50%) scale(var(--nn-youtube-play-scale, 1));
border-radius: 8px;
background-color: #ff0000;
opacity: 0.9;
pointer-events: none;
}
.nn-youtube-play::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 14px;
border-color: transparent transparent transparent #ffffff;
}
.nn-folder-note-type-modal .modal-content {
padding-top: 16px;
}
.nn-folder-note-type-modal .modal-title {
width: 100%;
text-align: center;
}
.nn-folder-note-type-info {
margin-bottom: 4px;
color: var(--nn-theme-foreground-muted);
text-align: center;
}
.nn-folder-note-type-buttons {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.nn-folder-note-type-buttons button {
width: 100%;
}
/* ========================================================================
Search help modal
======================================================================== */
.modal.nn-search-help-modal {
/* Desktop layout with bounded width while keeping viewport margins */
width: min(600px, calc(100vw - 80px));
max-width: min(600px, calc(100vw - 80px));
/* Shorter desktop layout so the modal does not dominate vertical space */
max-height: min(70vh, 640px);
}
.modal.nn-search-help-modal .modal-content {
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal.nn-search-help-modal .nn-search-help-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 8px;
}
.modal.nn-search-help-modal strong {
font-size: inherit;
font-weight: 600;
}
.is-mobile .modal.nn-search-help-modal {
max-height: min(560px, calc(100vh - 24px));
max-width: calc(100vw - 24px);
}
.is-mobile .modal.nn-search-help-modal .modal-content {
padding-right: 12px;
}
/* Source: src/styles/sections/modal-select-vault-profile.css */
/* ========================================================================
Select Vault Profile Modal
======================================================================== */
.modal.nn-select-profile-modal .modal-content {
display: flex;
flex-direction: column;
gap: var(--size-2-3);
padding: var(--size-4-4);
}
.nn-select-profile-list {
display: flex;
flex-direction: column;
gap: var(--size-2-2);
width: 100%;
}
.nn-select-profile-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--size-2-3) var(--size-4-2);
border-radius: var(--radius-m);
background-color: transparent;
color: var(--nn-theme-foreground);
cursor: pointer;
transition: background-color 120ms ease;
}
.nn-select-profile-item:focus {
outline: none;
}
.nn-select-profile-item:focus-visible {
box-shadow: 0 0 0 2px var(--interactive-accent);
}
.nn-select-profile-item:hover {
background-color: var(--background-modifier-hover);
}
.nn-select-profile-item.is-selected {
background-color: var(--background-modifier-hover);
}
.nn-select-profile-item.is-current .nn-select-profile-item-name {
color: var(--interactive-accent);
}
.nn-select-profile-item-name {
font-size: var(--font-ui-medium);
}
.nn-select-profile-item-badge {
font-size: var(--font-ui-small);
color: var(--nn-theme-foreground-muted);
font-weight: var(--font-semibold);
}
.nn-select-profile-empty {
margin: 0;
padding: var(--size-4-4) 0;
color: var(--nn-theme-foreground-muted);
font-size: var(--font-ui-small);
text-align: center;
}
/* Source: src/styles/sections/modal-action-button.css */
/* ========================================================================
Shared Modal Action Button
======================================================================== */
.nn-action-btn {
width: 32px;
height: 32px;
padding: 0;
background-color: transparent;
color: var(--nn-theme-foreground-muted);
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-s);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.nn-action-btn:hover:not(:disabled):not(.mod-warning) {
background: var(--background-modifier-hover);
color: var(--nn-theme-foreground);
border-color: var(--background-modifier-border-hover);
}
.nn-action-btn:disabled {
color: var(--nn-theme-foreground);
opacity: 0.4;
cursor: not-allowed;
}
.nn-action-btn.mod-warning:disabled {
color: var(--text-error);
}
.nn-action-btn.mod-warning {
background: transparent;
color: var(--text-error);
border-color: var(--background-modifier-border);
}
.nn-action-btn.mod-warning:hover:not(:disabled) {
background: var(--background-modifier-error);
color: var(--text-error);
border-color: var(--background-modifier-error-hover);
}
.nn-action-btn svg {
width: 16px;
height: 16px;
}
/* Source: src/styles/sections/modal-edit-vault-profiles.css */
/* ========================================================================
Edit Vault Profiles Modal
======================================================================== */
.modal.nn-edit-profiles-modal .modal-content {
display: flex;
flex-direction: column;
gap: var(--size-2-2);
padding: var(--size-4-4);
}
.nn-edit-profiles-list {
display: flex;
flex-direction: column;
gap: var(--size-1-5);
width: 100%;
}
.nn-edit-profiles-row {
display: flex;
align-items: center;
gap: var(--size-2-1);
}
.nn-edit-profiles-row .nn-input {
flex: 1;
min-width: 0;
}
.nn-edit-profiles-actions {
display: flex;
gap: var(--size-1-5);
flex-shrink: 0;
}
/* Source: src/styles/sections/modal-file-icon-rule-editor.css */
/* ========================================================================
File Icon Rule Editor Modal
======================================================================== */
.modal.nn-file-icon-rule-editor-modal {
width: 420px;
max-width: calc(100vw - 40px);
max-height: 500px;
}
.modal.nn-file-icon-rule-editor-modal .modal-content {
display: flex;
flex-direction: column;
gap: var(--size-2-2);
padding: var(--size-4-4);
overflow: hidden;
}
.nn-file-icon-rule-editor-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 4px;
padding-bottom: var(--size-1-5);
}
.nn-file-icon-rule-editor-list {
display: flex;
flex-direction: column;
gap: var(--size-1-5);
width: 100%;
}
.nn-file-icon-rule-editor-footer {
flex-shrink: 0;
margin-top: 0;
padding-top: var(--size-2-2);
border-top: 1px solid var(--background-modifier-border);
}
.nn-file-icon-rule-row {
display: flex;
align-items: center;
gap: var(--size-2-2);
}
.nn-file-icon-rule-key {
flex: 1;
min-width: 0;
}
.nn-file-icon-rule-row-invalid .nn-file-icon-rule-key {
border-color: var(--background-modifier-error);
}
/* Source: src/styles/sections/modal-ux-icon-map.css */
/* ========================================================================
UX Icon Map Modal
======================================================================== */
.modal.nn-ux-icon-map-modal {
width: 520px;
max-width: calc(100vw - 40px);
max-height: 500px;
}
.is-mobile .modal.nn-ux-icon-map-modal {
width: 560px;
max-width: calc(100vw - 24px);
max-height: min(560px, calc(100vh - 24px));
}
.modal.nn-ux-icon-map-modal .modal-content {
display: flex;
flex-direction: column;
gap: var(--size-2-2);
padding: var(--size-4-4);
overflow: hidden;
}
.is-mobile .modal.nn-ux-icon-map-modal .modal-content {
gap: var(--size-2-3);
padding: var(--size-4-6);
}
.nn-ux-icon-map-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 4px;
padding-bottom: var(--size-1-5);
}
.is-mobile .modal.nn-ux-icon-map-modal .nn-ux-icon-map-scroll {
padding-bottom: var(--size-2-2);
}
.nn-ux-icon-map-list {
display: flex;
flex-direction: column;
gap: var(--size-1-5);
width: 100%;
}
.is-mobile .modal.nn-ux-icon-map-modal .nn-ux-icon-map-list {
gap: var(--size-2-2);
}
.nn-ux-icon-map-footer {
flex-shrink: 0;
margin-top: 0;
padding-top: var(--size-2-2);
border-top: 1px solid var(--background-modifier-border);
}
.is-mobile .modal.nn-ux-icon-map-modal .nn-ux-icon-map-footer {
padding-top: var(--size-2-3);
}
.nn-ux-icon-map-row {
display: flex;
align-items: center;
gap: var(--size-2-2);
}
.is-mobile .modal.nn-ux-icon-map-modal .nn-ux-icon-map-row {
gap: var(--size-2-3);
}
.nn-ux-icon-map-label {
flex: 1;
min-width: 0;
}
.is-mobile .modal.nn-ux-icon-map-modal .nn-ux-icon-map-label {
font-size: 1.05em;
}
.is-mobile .modal.nn-ux-icon-map-modal .nn-action-btn {
min-width: 36px;
min-height: 36px;
}
.nn-ux-icon-map-group-heading {
margin: 0;
font-size: 0.95em;
font-weight: 600;
color: var(--nn-theme-foreground);
}
.is-mobile .modal.nn-ux-icon-map-modal .nn-ux-icon-map-group-heading {
font-size: 1em;
}
.nn-ux-icon-map-group-heading--spaced {
margin-top: var(--size-4-4);
}
/* Source: src/styles/sections/modal-welcome.css */
/* ========================================================================
Welcome Modal
======================================================================== */
.modal.nn-welcome-modal {
width: 620px;
max-width: calc(100vw - 40px);
}
.modal.nn-welcome-modal .modal-content {
padding: 16px;
}
.modal.nn-welcome-modal .modal-title {
width: 100%;
text-align: center;
}
.modal.nn-welcome-modal .modal-close-button {
z-index: 10;
pointer-events: auto;
}
.nn-welcome-body {
display: flex;
flex-direction: column;
gap: 12px;
align-items: stretch;
text-align: left;
}
.nn-welcome-text {
margin: 0;
color: var(--nn-theme-foreground);
line-height: 1.5;
font-size: 14px;
}
.nn-welcome-thumbnail-link {
display: block;
width: 100%;
max-width: 560px;
align-self: center;
}
.nn-welcome-thumbnail-frame {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--background-secondary);
border-radius: var(--radius-m);
border: 1px solid var(--background-modifier-border);
overflow: hidden;
}
.nn-welcome-thumbnail {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.nn-welcome-youtube-play {
--nn-youtube-play-x: 80%;
--nn-youtube-play-y: 49%;
--nn-youtube-play-scale: 1.8;
}
.nn-welcome-thumbnail-link:hover .nn-welcome-youtube-play {
background-color: #cc0000;
}
.nn-welcome-buttons {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
@media (max-width: 768px) {
.modal.nn-welcome-modal {
width: calc(100vw - 40px);
max-width: calc(100vw - 40px);
margin: 0 auto;
}
.modal.nn-welcome-modal .modal-content {
padding: 12px;
}
.nn-welcome-text {
font-size: 15px;
line-height: 1.6;
}
}
/* Source: src/styles/sections/modal-whats-new.css */
/* ========================================================================
What's New Modal
======================================================================== */
/* What's new modal width */
.modal.nn-whats-new-modal {
width: 600px;
max-width: calc(100vw - 40px);
overflow: hidden;
}
/* What's new content layout */
.modal.nn-whats-new-modal .modal-content {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
padding: 16px;
}
.modal.nn-whats-new-modal .modal-close-button {
z-index: 10;
pointer-events: auto;
}
/* What's new scrollable container */
.nn-whats-new-scroll {
flex: 1 1 auto;
min-height: 0;
max-height: min(70vh, 520px);
overflow-y: auto;
margin-bottom: 0;
padding-right: 8px;
padding-bottom: 16px;
}
/* Version container */
.nn-whats-new-version {
margin-bottom: 16px;
}
/* Version container - last child no margin */
.nn-whats-new-version:last-child {
margin-bottom: 0;
}
/* Version header */
.nn-whats-new-version h3 {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--nn-theme-foreground);
background: var(--background-secondary);
margin: 0 0 4px;
padding: 6px 10px;
border-radius: 6px;
}
/* Feature list */
.nn-whats-new-features {
margin-left: 16px;
}
/* Category headers */
.nn-whats-new-category {
font-weight: bold;
margin-top: 8px;
margin-bottom: 4px;
}
/* Info text */
.nn-whats-new-info {
margin-bottom: 12px;
color: var(--nn-theme-foreground);
line-height: 1.5;
/* Match list item text size on desktop */
font-size: 14px;
}
/* What's new divider */
.nn-whats-new-divider {
border-top: 1px solid var(--background-modifier-border);
margin-top: 0;
margin-bottom: 16px;
}
/* Release banner image */
.nn-whats-new-banner {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
background: var(--background-secondary);
border: 1px solid var(--background-modifier-border);
margin-bottom: 12px;
text-decoration: none;
}
.nn-whats-new-banner:focus-visible {
outline: 2px solid var(--interactive-accent);
outline-offset: 2px;
}
.nn-whats-new-banner-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Release video */
.nn-whats-new-video-frame {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
background: var(--background-secondary);
border: 1px solid var(--background-modifier-border);
margin-bottom: 12px;
}
.nn-whats-new-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
background: #000000;
}
.nn-whats-new-video-open {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--text-normal);
background: var(--background-primary);
border: 1px solid var(--background-modifier-border);
border-radius: 6px;
opacity: 0.9;
text-decoration: none;
}
.nn-whats-new-video-open:hover {
color: var(--text-normal);
background: var(--background-secondary);
}
.nn-whats-new-video-open:focus-visible {
outline: 2px solid var(--interactive-accent);
outline-offset: 2px;
}
.nn-whats-new-video-open svg {
width: 16px;
height: 16px;
}
/* YouTube link preview */
.nn-whats-new-youtube-link {
display: block;
width: 100%;
margin-bottom: 12px;
text-decoration: none;
}
.nn-whats-new-youtube-link:focus-visible .nn-whats-new-youtube-thumbnail {
outline: 2px solid var(--interactive-accent);
outline-offset: 2px;
}
.nn-whats-new-youtube-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
background: var(--background-secondary);
border: 1px solid var(--background-modifier-border);
}
.nn-whats-new-youtube-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.nn-whats-new-youtube-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--nn-theme-foreground-muted);
font-size: 13px;
}
.nn-whats-new-youtube-link:hover .nn-youtube-play {
background-color: #cc0000;
}
/* Feature list */
.nn-whats-new-version ul {
list-style: disc;
margin: 0;
padding-left: 16px;
}
/* Feature list item */
.nn-whats-new-version li {
margin-bottom: 4px;
color: var(--nn-theme-foreground);
font-size: 14px;
line-height: 1.5;
}
/* Highlight emphasis */
.nn-highlight {
background-color: var(--text-highlight-bg);
color: var(--nn-theme-foreground);
padding: 0 2px;
border-radius: 3px;
font-weight: 600;
}
.nn-whats-new-info code,
.nn-whats-new-version li code {
color: var(--code-normal);
background-color: var(--code-background);
padding: 0.1em 0.35em;
border-radius: 4px;
font-size: 0.9em;
}
/* Support container */
.nn-whats-new-support {
margin-top: 0;
padding-top: 0;
}
/* Support text */
.nn-whats-new-support-text {
color: var(--nn-theme-foreground-muted);
font-size: 14px;
margin-bottom: 12px;
}
/* Button container */
.nn-whats-new-buttons {
display: flex;
gap: 8px;
margin-top: 12px;
justify-content: center;
}
/* Support button styling */
.nn-support-button-small {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
}
.nn-support-button-icon {
display: inline-flex;
font-size: 14px;
line-height: 1;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.modal.nn-whats-new-modal {
width: calc(100vw - 40px);
max-width: calc(100vw - 40px);
margin: 0 auto;
}
.modal.nn-whats-new-modal .modal-content {
padding: 12px;
}
.nn-whats-new-scroll {
max-height: min(60vh, 360px);
padding-right: 4px;
}
/* Use standard text sizing for readability on mobile */
.nn-whats-new-info,
.nn-whats-new-version li,
.nn-whats-new-category {
font-size: 15px;
line-height: 1.6;
}
/* Version header size on mobile */
.nn-whats-new-version h3 {
font-size: 15px;
}
}
/* Obsidian mobile app adjustments */
.is-mobile {
/* Body text and labels */
.nn-whats-new-info,
.nn-whats-new-version li,
.nn-whats-new-category {
font-size: 15px;
line-height: 1.6;
}
/* Version header */
.nn-whats-new-version h3 {
font-size: 15px;
}
}
/* Source: src/styles/sections/modal-icon-picker.css */
/* ========================================================================
Icon Picker Modal
======================================================================== */
/* Icon picker modal width - adjust for mobile */
.modal.nn-icon-picker-modal {
width: 480px;
max-width: calc(100vw - 40px);
height: auto;
}
/* Icon picker content layout */
.modal.nn-icon-picker-modal .modal-content {
padding: 0;
height: 100%;
min-height: 380px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal.nn-icon-picker-modal .modal-close-button {
z-index: 10;
pointer-events: auto;
}
/* Icon search container with bottom border */
.nn-icon-search-container {
padding: 12px;
border-bottom: 1px solid var(--background-modifier-border);
}
/* Icon search input field */
.nn-icon-search-input {
width: 100%;
padding: 8px 12px;
font-size: 14px;
background: var(--background-primary);
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-s);
}
/* Icon search input focus */
.nn-icon-search-input:focus {
outline: none;
border-color: var(--interactive-accent);
}
/* Icon results scrollable container */
.nn-icon-results-container {
height: 240px;
min-height: 240px;
overflow-y: auto;
padding: 8px;
flex: 0 0 auto;
}
.nn-icon-button-container {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--background-modifier-border);
}
/* Icon category headers */
.nn-icon-section-header {
font-size: var(--font-ui-small);
font-weight: 600;
color: var(--nn-theme-foreground-muted);
letter-spacing: 0.5px;
margin-top: 12px;
margin-bottom: 4px;
}
.nn-icon-section-header:first-child {
margin-top: 0;
}
/* Icon grid layout - 5 columns */
.nn-icon-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
}
/* Individual icon item */
.nn-icon-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
border-radius: var(--radius-s);
}
.nn-icon-recent-remove-button {
position: absolute;
top: 2px;
right: 2px;
z-index: 1;
width: 16px;
height: 16px;
padding: 0;
border-radius: 999px;
border: 1px solid var(--background-modifier-border);
background: var(--background-primary);
color: var(--nn-theme-foreground-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.nn-icon-recent-remove-button {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 120ms ease;
}
.nn-icon-item:hover .nn-icon-recent-remove-button,
.nn-icon-item:focus-within .nn-icon-recent-remove-button {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
.nn-icon-recent-remove-button:hover {
color: var(--nn-theme-foreground);
border-color: var(--interactive-accent);
}
.nn-icon-recent-remove-button:focus-visible {
outline: 2px solid var(--interactive-accent);
outline-offset: 1px;
}
.nn-icon-recent-remove-glyph {
font-size: 11px;
line-height: 1;
transform: translateY(-1px);
pointer-events: none;
}
/* Icon item hover/focus states */
.nn-icon-item:hover,
.nn-icon-item:focus {
background-color: var(--background-modifier-hover);
outline: none;
}
/* Icon item keyboard focus indicator */
.nn-icon-item:focus-visible {
box-shadow: 0 0 0 2px var(--interactive-accent);
}
/* Icon preview container */
.nn-icon-item-preview {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-bottom: 4px;
color: var(--nn-theme-foreground-muted);
}
/* Icon SVG size */
.nn-icon-item-preview svg {
width: 24px;
height: 24px;
}
.nn-icon-item-preview.nn-iconfont {
font-size: 28px;
line-height: 1;
}
.nn-icon-item-preview.nn-emoji-icon {
font-size: 24px;
line-height: 1;
}
/* Icon name label */
.nn-icon-item-name {
font-size: 11px;
color: var(--nn-theme-foreground-muted);
text-align: center;
word-break: break-word;
line-height: 1.2;
max-width: 100%;
}
/* Empty search and additional icons messages */
.nn-icon-empty-message,
.nn-icon-more-message {
text-align: center;
color: var(--nn-theme-foreground-muted);
padding: 24px;
font-size: 14px;
}
/* Source: src/styles/sections/modal-property-keys.css */
/* ========================================================================
Property Keys Modal
======================================================================== */
.modal.nn-property-keys-modal {
width: 560px;
max-width: calc(100vw - 40px);
height: min(580px, calc(100vh - 40px));
}
.is-mobile .modal.nn-property-keys-modal {
max-width: calc(100vw - 24px);
height: min(520px, calc(100vh - 24px));
}
.modal.nn-property-keys-modal .modal-content {
display: flex;
flex-direction: column;
padding: var(--size-4-4);
gap: var(--size-2-2);
overflow: hidden;
}
.modal.nn-property-keys-modal .modal-title {
width: 100%;
text-align: center;
}
.nn-property-keys-description {
text-align: center;
color: var(--nn-theme-foreground-muted);
font-size: var(--font-smallest);
margin: var(--size-4-2) 0 0;
line-height: 1.4;
}
.is-mobile .modal.nn-property-keys-modal .modal-content {
gap: var(--size-2-3);
padding: var(--size-4-6);
}
.modal.nn-property-keys-modal .nn-property-keys-search-container {
position: relative;
}
.modal.nn-property-keys-modal input.nn-property-keys-search {
margin: 0;
height: 32px;
padding: 4px 36px 4px 12px;
border-radius: 999px;
border: 1px solid var(--nn-theme-list-search-border-color);
}
.modal.nn-property-keys-modal input.nn-property-keys-search.is-active {
background: var(--nn-theme-list-search-active-bg);
}
.modal.nn-property-keys-modal input.nn-property-keys-search:focus {
border-color: var(--nn-theme-list-search-border-color);
box-shadow: 0 0 0 2px var(--nn-theme-list-search-border-color);
}
.modal.nn-property-keys-modal .nn-property-keys-search-clear {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 0;
background: transparent;
box-shadow: none;
padding: 0;
color: var(--nn-theme-foreground-muted);
display: none;
align-items: center;
justify-content: center;
z-index: 1;
cursor: pointer;
}
.modal.nn-property-keys-modal .nn-property-keys-search-clear.is-visible {
display: inline-flex;
}
.modal.nn-property-keys-modal .nn-property-keys-search-clear:focus-visible {
outline: 2px solid var(--interactive-accent);
outline-offset: 2px;
}
.modal.nn-property-keys-modal .nn-property-keys-search-clear svg {
width: 16px;
height: 16px;
}
.modal.nn-property-keys-modal .nn-property-keys-search-clear:hover:not(:disabled) {
color: var(--nn-theme-foreground);
}
.nn-property-keys-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
margin-top: var(--size-4-2);
padding-right: 4px;
padding-bottom: var(--size-1-5);
}
.is-mobile .modal.nn-property-keys-modal .nn-property-keys-scroll {
padding-bottom: var(--size-2-2);
}
.nn-property-keys-list {
display: flex;
flex-direction: column;
gap: var(--size-1-5);
width: 100%;
}
.is-mobile .modal.nn-property-keys-modal .nn-property-keys-list {
gap: var(--size-2-2);
}
.nn-property-keys-row {
display: flex;
align-items: center;
gap: var(--size-2-2);
padding-left: var(--size-2-2);
padding-right: var(--size-2-2);
border-radius: var(--radius-s);
transition: background-color 120ms ease;
}
.is-mobile .modal.nn-property-keys-modal .nn-property-keys-row {
gap: var(--size-2-3);
}
.modal.nn-property-keys-modal .nn-property-keys-list .nn-property-keys-row:hover {
background: var(--nn-theme-foreground-faint);
}
.nn-property-keys-label {
flex: 1;
min-width: 0;
color: var(--nn-theme-foreground-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nn-property-keys-row.is-enabled .nn-property-keys-label {
color: var(--nn-theme-foreground);
}
.nn-property-keys-row.is-enabled {
font-weight: var(--font-semibold);
}
.nn-property-keys-row.is-enabled .nn-property-keys-count {
color: var(--nn-theme-foreground);
}
.nn-property-keys-header-row {
margin-bottom: var(--size-1-2);
background: var(--nn-theme-foreground-faint);
border-radius: var(--radius-s);
}
.nn-property-keys-select-all-row {
margin-top: var(--size-1-2);
padding-top: var(--size-2-2);
border-top: 1px solid var(--background-modifier-border);
}
.nn-property-keys-count {
color: var(--nn-theme-foreground-muted);
}
.nn-property-keys-actions {
display: flex;
align-items: center;
gap: var(--size-1-3);
}
.is-mobile .modal.nn-property-keys-modal .nn-property-keys-toggle {
min-width: 36px;
min-height: 36px;
}
.modal.nn-property-keys-modal .nn-property-keys-toggle {
border: 0;
background: transparent;
box-shadow: none;
color: var(--nn-theme-foreground-muted);
}
.modal.nn-property-keys-modal .nn-property-keys-toggle:focus-visible {
outline: 1px solid var(--interactive-accent);
outline-offset: 1px;
}
.modal.nn-property-keys-modal .nn-property-keys-toggle:hover:not(:disabled) {
background: var(--background-modifier-hover);
}
.modal.nn-property-keys-modal .nn-property-keys-toggle.is-enabled {
color: var(--nn-theme-foreground);
background: transparent;
}
.nn-property-keys-header-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
pointer-events: none;
}
.nn-property-keys-header-icon svg {
width: 16px;
height: 16px;
}
.nn-property-keys-empty {
padding: var(--size-2-3);
text-align: center;
color: var(--nn-theme-foreground-muted);
}
.nn-property-keys-footer {
flex-shrink: 0;
margin-top: var(--size-2-2);
padding-top: var(--size-2-2);
border-top: 1px solid var(--background-modifier-border);
}
.is-mobile .modal.nn-property-keys-modal .nn-property-keys-footer {
padding-top: var(--size-2-3);
}
/* Source: src/styles/sections/modal-manual-sort-group-header.css */
/* ========================================================================
Manual Sort Group Header Modal
======================================================================== */
.modal.nn-manual-sort-group-header-modal {
width: min(360px, calc(100vw - 32px));
}
.modal.nn-manual-sort-group-header-modal .modal-content {
display: flex;
flex-direction: column;
gap: 18px;
}
.nn-manual-sort-header-description {
margin: 0;
}
.nn-manual-sort-header-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.nn-manual-sort-header-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.nn-manual-sort-header-field-label {
color: var(--text-muted);
font-size: var(--font-ui-smaller);
}
.nn-manual-sort-header-input {
width: 100%;
}
.nn-manual-sort-header-appearance-actions {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
}
.nn-manual-sort-header-action-row {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.nn-manual-sort-header-style-button {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.nn-manual-sort-header-style-preview {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--text-muted);
}
.nn-manual-sort-header-style-preview svg {
width: 16px;
height: 16px;
}
.nn-manual-sort-header-style-preview.nn-color-swatch {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid var(--background-modifier-border);
background-color: var(--nn-manual-sort-header-preview-color);
}
.nn-manual-sort-header-style-preview.is-empty.nn-color-swatch {
background-color: transparent;
}
.nn-manual-sort-header-style-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nn-manual-sort-header-toggle-setting {
border: 0;
padding: 0;
}
/* Source: src/styles/sections/modal-settings-transfer.css */
/* ========================================================================
Settings transfer modal
======================================================================== */
.modal.nn-settings-transfer-modal {
width: min(720px, calc(100vw - 80px));
max-width: min(720px, calc(100vw - 80px));
}
.modal.nn-settings-transfer-modal .modal-content {
display: flex;
flex-direction: column;
}
.nn-settings-transfer-editor-setting {
margin-bottom: 0;
}
.nn-settings-transfer-editor {
min-height: 280px;
margin-top: 8px;
margin-bottom: 0;
resize: vertical;
font-family: var(--font-monospace);
line-height: 1.5;
}
.is-mobile .modal.nn-settings-transfer-modal {
max-width: calc(100vw - 24px);
}
.is-mobile .modal.nn-settings-transfer-modal .nn-settings-transfer-editor {
min-height: 220px;
}
/* Source: src/styles/sections/layout-virtual-list.css */
/* ========================================================================
Virtual List Styles
======================================================================== */
/* Virtual container wrapper - ensures proper absolute positioning context */
.nn-navigation-pane-scroller > .nn-virtual-container,
.nn-list-pane-scroller > .nn-virtual-container {
position: relative;
}
/* Virtual list container - holds all virtual items */
.nn-virtual-container {
width: 100%;
position: relative;
}
/* Virtual items container */
.nn-navigation-pane-scroller [data-index],
.nn-list-pane-scroller [data-index] {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
/* Virtual navigation item (folders and tags) */
.nn-virtual-nav-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
/* Virtual file item wrapper - position relative for separator positioning */
.nn-virtual-file-item {
position: relative;
height: var(--item-height);
contain: layout style paint;
}
/* Source: src/styles/sections/settings-page.css */
/* ========================================================================
Settings Page Styles
======================================================================== */
/* Settings layout root */
.nn-settings-tab-root {
display: block;
min-height: 0;
}
.nn-settings-tab-root .setting-group.nn-settings-lifecycle-group {
display: none;
}
.nn-settings-tab-root .setting-group.nn-settings-lifecycle-group + .setting-group {
margin-top: 0;
padding-top: 0;
border-top: none;
}
/* Settings section header spacing */
.nn-settings-tab-root .setting-item-heading {
margin-top: 30px;
}
/* First settings header - no top margin */
.nn-settings-tab-root .setting-item-heading:first-child {
margin-top: 0;
}
.nn-settings-legacy-titlebar {
padding-inline: 0;
}
.nn-settings-legacy-titlebar .setting-item-name {
display: flex;
align-items: center;
gap: var(--size-2-2);
}
.nn-settings-legacy-page-link:focus-visible {
outline: 2px solid var(--background-modifier-border-focus);
outline-offset: -2px;
}
/* Utility class for conditionally hidden settings */
.nn-setting-hidden {
display: none;
}
.nn-setting-warning {
color: var(--text-error);
font-weight: 600;
}
.nn-setting-calendar-pattern-example-text {
font-size: inherit;
font-weight: var(--font-semibold);
}
.nn-setting-property-keys-count-line {
margin-top: var(--size-2-1);
}
.nn-setting-property-keys-summary-text {
font-size: inherit;
font-weight: var(--font-semibold);
}
/* Sync mode toggle button (cloud/device) */
.nn-setting-sync-toggle {
color: var(--text-muted);
opacity: 0.85;
}
.nn-setting-sync-toggle:hover {
color: var(--text-normal);
opacity: 1;
}
/* Container for additional info below settings */
.nn-setting-info-container {
margin-top: 8px;
margin-bottom: 8px;
}
.nn-setting-info-list ol {
margin: 6px 0 0 1.5em;
padding: 0;
}
.nn-setting-info-list li + li {
margin-top: 4px;
}
/* Wider text inputs for settings that benefit from more space */
.nn-setting-wide-input input[type='text'],
.nn-setting-wide-input textarea {
width: 300px;
max-width: 100%;
}
.nn-toolbar-visibility-control {
width: 100%;
}
.nn-setting-color-preview {
display: inline-flex;
align-items: center;
gap: 6px;
margin-inline-end: var(--size-2-2);
}
.nn-setting-color-swatch-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-width: 32px;
padding: 0;
border: 1px solid var(--background-modifier-border);
border-radius: 6px;
background: transparent;
cursor: pointer;
}
.nn-setting-color-swatch-button:hover {
border-color: var(--text-muted);
}
.nn-setting-color-swatch-button.nn-setting-color-swatch-button-dark {
background: #111827;
border-color: #374151;
}
.nn-setting-color-swatch-button.nn-setting-color-swatch-button-dark:hover {
border-color: #4b5563;
}
.nn-setting-color-copy-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 28px;
padding: 0;
border: 0;
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.nn-setting-color-copy-button:hover {
color: var(--text-normal);
}
.nn-setting-color-swatch {
width: 24px;
height: 24px;
border-radius: 4px;
border: 1px solid var(--background-modifier-border);
box-sizing: border-box;
}
.nn-toolbar-visibility-grid {
display: flex;
flex-wrap: wrap;
gap: var(--size-2-3);
}
.nn-quick-actions-control {
display: flex;
align-items: center;
gap: 0;
}
.nn-quick-actions-buttons,
.nn-toolbar-visibility-grid-scroll {
flex-wrap: nowrap;
overflow-x: auto;
}
.nn-toolbar-visibility-grid-scroll {
justify-content: flex-end;
}
.nn-quick-actions-buttons.is-disabled {
opacity: 0.4;
pointer-events: none;
}
.nn-quick-actions-master-toggle {
margin-inline-start: auto;
}
button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button {
position: relative;
padding: 0;
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
}
button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button:not(.nn-mobile-toolbar-button-active) {
opacity: 0.6;
}
button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button.nn-mobile-toolbar-button-active {
color: var(--nn-theme-mobile-toolbar-button-active-icon-color);
background-color: var(--nn-theme-mobile-toolbar-button-active-bg);
}
button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button.nn-mobile-toolbar-button-active .nn-toolbar-visibility-icon {
color: var(--nn-theme-mobile-toolbar-button-active-icon-color);
}
button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button.nn-mobile-toolbar-button-active svg:not(.nn-vault-icon-svg) {
stroke: var(--nn-theme-mobile-toolbar-button-active-icon-color);
stroke-width: 2;
}
.nn-toolbar-visibility-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--nn-theme-foreground);
}
.nn-toolbar-visibility-icon svg:not(.nn-vault-icon-svg) {
width: 18px;
height: 18px;
stroke-width: 1.5;
}
.nn-toolbar-visibility-icon svg.nn-vault-icon-svg {
width: 18px;
height: 18px;
}
/* Mobile-specific toolbar visibility button styles */
.is-mobile .nn-toolbar-visibility-control {
width: 100%;
}
.is-mobile .nn-toolbar-visibility-sections {
width: 100%;
}
.is-mobile .nn-toolbar-visibility-group {
width: 100%;
}
.is-mobile .nn-toolbar-visibility-group-label {
text-align: center;
}
.is-mobile .nn-toolbar-visibility-grid {
width: 100%;
display: flex;
flex-wrap: nowrap;
gap: 0;
justify-content: space-between;
}
/* YouTube-style play button used in settings */
button.nn-youtube-button {
background-color: #ff0000;
border: none;
color: #ffffff;
min-width: 54px;
}
button.nn-youtube-button:hover {
background-color: #cc0000;
}
button.nn-youtube-button svg {
color: #ffffff;
fill: #ffffff;
stroke: none;
}
.is-mobile button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
}
.is-mobile .nn-toolbar-visibility-icon {
width: 24px;
height: 24px;
}
.is-mobile .nn-toolbar-visibility-icon svg {
width: 24px;
height: 24px;
}
/* Android-specific adjustments for smaller buttons */
.notebook-navigator-android button.nn-toolbar-visibility-toggle.nn-mobile-toolbar-button {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
}
.notebook-navigator-android .nn-toolbar-visibility-icon {
width: 22px;
height: 22px;
}
.notebook-navigator-android .nn-toolbar-visibility-icon svg {
width: 22px;
height: 22px;
}
.nn-setting-profile-dropdown select {
width: 160px;
max-width: 100%;
}
.is-mobile .nn-setting-profile-dropdown select {
width: 100%;
max-width: none;
}
.nn-slider-control {
display: flex;
align-items: center;
gap: 8px;
}
.nn-slider-control input[type='range'] {
flex: 0 0 100px;
}
.nn-slider-value {
flex: 0 0 48px;
font-size: var(--font-ui-smaller);
color: var(--nn-theme-foreground-muted);
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Cards linking to the author's other plugins on the settings start page */
.setting-item.nn-plugin-cards {
display: block;
}
/* One column when the settings pane is narrow, because the description needs the width */
.nn-plugin-card-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
gap: var(--size-4-2);
margin-top: var(--size-4-2);
}
/* A button so the whole card can be reached from the keyboard. The declarations before the
layout undo the button styling a theme applies. */
.nn-plugin-card {
height: auto;
padding: var(--size-4-3);
background-color: var(--background-secondary);
box-shadow: none;
text-align: start;
white-space: normal;
display: flex;
align-items: flex-start;
gap: var(--size-4-3);
width: 100%;
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-m);
cursor: pointer;
}
.nn-plugin-card:hover {
border-color: var(--background-modifier-border-hover);
background-color: var(--background-modifier-hover);
}
.nn-plugin-card-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: var(--size-4-8);
height: var(--size-4-8);
border-radius: var(--radius-m);
background-color: var(--background-primary);
color: var(--text-accent);
}
/* min-width lets a long word wrap instead of stretching the card past its column */
.nn-plugin-card-details {
display: flex;
flex-direction: column;
gap: var(--size-2-1);
min-width: 0;
}
.nn-plugin-card-name {
color: var(--text-normal);
font-size: var(--font-ui-small);
font-weight: var(--font-semibold);
line-height: 1.3;
}
/* One line whatever the language, cut with an ellipsis, so every card is the same height */
.nn-plugin-card-description {
color: var(--text-muted);
font-size: var(--font-ui-smaller);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Sits at the far edge, the way Obsidian marks a row that opens somewhere else. It keeps to
the middle of the card while the icon and the name line up at the top. */
.nn-plugin-card-arrow {
display: flex;
align-items: center;
align-self: center;
flex: 0 0 auto;
margin-inline-start: auto;
color: var(--text-faint);
}
.nn-plugin-card-arrow .svg-icon {
width: var(--icon-s);
height: var(--icon-s);
}
.nn-plugin-card:hover .nn-plugin-card-arrow {
color: var(--text-muted);
}
/* Source: src/styles/sections/settings-sponsor-button.css */
/* ========================================================================
Sponsor Button Styles
======================================================================== */
/* Support button hover - subtle opacity change */
.nn-support-button:hover {
opacity: 0.8;
}
/* Source: src/styles/sections/settings-mobile.css */
/* ========================================================================
Mobile Styles
======================================================================== */
/* Mobile-specific wide input fields - full width on mobile */
.is-mobile .nn-setting-wide-input input[type='text'],
.is-mobile .nn-setting-wide-input textarea {
width: 100%;
}
/* Source: src/styles/sections/settings-database-statistics.css */
/* ========================================================================
Database Statistics Section
======================================================================== */
/* Container for database statistics */
.nn-database-stats {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--background-modifier-border);
}
/* Statistics text styling */
.nn-stats-text {
font-size: var(--font-ui-smaller);
color: var(--nn-theme-foreground-muted);
line-height: 1.5;
}
/* Remove default setting item chrome when statistics are displayed */
.nn-stats-section.setting-item {
border: none;
padding: 0;
margin-top: 0;
}
/* Source: src/styles/sections/modal-color-picker.css */
/* ========================================================================
Color Picker Modal - Compact Mobile-Friendly Design
======================================================================== */
/* Modal size - use natural width */
.modal.nn-color-picker-modal {
max-height: 80vh;
}
/* Modal content padding */
.modal.nn-color-picker-modal .modal-content {
padding: 16px;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 16px;
overflow: hidden;
}
.modal.nn-color-picker-modal .modal-close-button {
z-index: 10;
pointer-events: auto;
}
/* Header */
.nn-color-picker-header,
.nn-icon-picker-header {
margin-bottom: 16px;
text-align: center;
}
.nn-color-picker-header h3,
.nn-icon-picker-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--nn-theme-foreground);
}
/* Two column layout */
.nn-color-picker-content {
display: flex;
gap: 20px;
flex: 1 1 auto;
overflow-y: auto;
padding-bottom: 8px;
}
.nn-color-picker-left,
.nn-color-picker-right {
display: flex;
flex-direction: column;
}
.nn-color-picker-left {
flex: 0 1 250px;
min-width: 180px;
}
.nn-color-picker-right {
flex: 1 1 200px;
min-width: 0;
}
/* Preview section */
.nn-color-preview-section {
margin-bottom: auto; /* Push preset colors to bottom */
}
.nn-color-preview-container {
display: flex;
align-items: center;
gap: 12px;
}
.nn-preview-current,
.nn-preview-new {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.nn-preview-label,
.nn-hex-title {
font-size: 11px;
color: var(--nn-theme-foreground-muted);
font-weight: 500;
}
.nn-preview-color {
width: 100%;
height: 50px;
border-radius: var(--radius-m);
border: 1px solid var(--background-modifier-border);
}
.nn-color-swatch {
position: relative;
overflow: hidden;
}
.nn-color-swatch::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--nn-color-swatch-color, transparent);
pointer-events: none;
}
.nn-checkerboard,
.nn-preview-color.nn-no-color {
background-image:
linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%, #cccccc),
linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%, #cccccc);
background-size: 10px 10px;
background-position:
0 0,
5px 5px;
background-color: #ffffff;
}
.theme-dark .nn-checkerboard,
.theme-dark .nn-preview-color.nn-no-color {
background-image:
linear-gradient(45deg, #444444 25%, transparent 25%, transparent 75%, #444444 75%, #444444),
linear-gradient(45deg, #444444 25%, transparent 25%, transparent 75%, #444444 75%, #444444);
background-color: #222222;
}
.nn-preview-arrow {
width: 20px;
height: 20px;
color: var(--nn-theme-foreground-muted);
flex-shrink: 0;
margin-top: 18px;
}
.nn-preview-arrow svg {
width: 16px;
height: 16px;
}
/* Visual color picker section */
.nn-color-area-section,
.nn-color-preview-section {
padding-bottom: 15px;
}
.nn-color-area-section {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: auto; /* Push everything below to the bottom */
}
.nn-color-controls {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Header above the saturation/value area; matches the preset header height so the picker
lines up with the swatch grid in the left column. Hidden on mobile where the area sits
beside the sliders. */
.nn-sv-header {
display: flex;
align-items: center;
min-height: 20px;
margin-bottom: 8px;
}
.nn-sv-area {
position: relative;
width: 100%;
height: 150px;
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-m);
background-color: var(--nn-sv-hue, #ff0000);
background-image: linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
cursor: crosshair;
touch-action: none;
}
.nn-sv-thumb {
position: absolute;
width: 14px;
height: 14px;
border: 2px solid #ffffff;
border-radius: 50%;
background: var(--nn-thumb-color, #ffffff);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
pointer-events: none;
transform: translate(-50%, -50%);
}
.nn-color-slider {
position: relative;
width: calc(100% - 16px);
height: 14px;
margin: 0 8px;
border-radius: 7px;
cursor: pointer;
touch-action: none;
}
.nn-hue-slider {
background: linear-gradient(
to right,
#ff0000 0%,
#ffff00 16.66%,
#00ff00 33.33%,
#00ffff 50%,
#0000ff 66.66%,
#ff00ff 83.33%,
#ff0000 100%
);
}
.nn-alpha-gradient {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--nn-alpha-color, #000000));
pointer-events: none;
}
.nn-color-slider .nn-slider-thumb {
position: absolute;
top: 50%;
z-index: 1;
width: 16px;
height: 16px;
border: 2px solid #ffffff;
border-radius: 50%;
background: transparent;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
pointer-events: none;
transform: translate(-50%, -50%);
}
/* Hex input section - sits at the bottom of the picker, below the alpha slider */
.nn-hex-section {
margin-bottom: 0;
}
.nn-hex-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.nn-hex-title {
display: block;
height: 17px; /* Match the preview label height for alignment */
margin-bottom: 0;
}
.nn-hex-container {
display: flex;
align-items: center;
gap: 6px;
}
.nn-hex-label {
font-size: 14px;
color: var(--nn-theme-foreground);
font-weight: 500;
}
.nn-hex-input {
flex: 1;
padding: 6px 8px;
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-s);
background: var(--background-primary);
color: var(--nn-theme-foreground);
font-family: var(--font-monospace);
font-size: 13px;
}
.nn-hex-input:focus {
outline: none;
border-color: var(--interactive-accent);
box-shadow: 0 0 0 2px var(--interactive-accent-hover);
}
/* Recent colors header */
.nn-preset-header,
.nn-recent-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.nn-section-label {
font-size: 12px;
color: var(--nn-theme-foreground-muted);
font-weight: 500;
}
.nn-preset-buttons {
display: flex;
gap: 4px;
}
.nn-preset-toggle {
display: flex;
align-items: center;
gap: 6px;
}
.nn-preset-toggle-label {
background: none;
border: none;
padding: 0;
font-size: 12px;
color: var(--nn-theme-foreground-muted);
cursor: pointer;
font-weight: 500;
}
.nn-preset-toggle-label.nn-preset-toggle-active {
color: var(--nn-theme-foreground);
font-weight: 700;
}
.nn-preset-toggle-separator {
color: var(--nn-theme-foreground-muted);
font-size: 12px;
line-height: 1;
}
.nn-preset-action-button,
.nn-clear-recent {
width: 20px;
height: 20px;
padding: 0;
background: transparent;
color: var(--nn-theme-foreground-muted);
border: 1px solid var(--background-modifier-border);
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
}
.nn-preset-action-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.nn-preset-action-hidden {
display: none;
}
.nn-preset-action-button:hover,
.nn-clear-recent:hover {
background: var(--background-modifier-hover);
color: var(--nn-theme-foreground);
border-color: var(--background-modifier-border-hover);
}
.nn-preset-action-button svg {
width: 14px;
height: 14px;
}
/* Preset and Recent colors sections */
.nn-preset-section {
margin-top: auto; /* Align to bottom */
}
.nn-recent-section {
margin-top: 0;
}
.nn-preset-colors,
.nn-recent-colors {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
overflow: hidden;
}
.nn-recent-colors {
grid-template-columns: repeat(10, 36px);
}
.nn-recent-colors .nn-color-dot {
width: 36px;
height: 36px;
aspect-ratio: auto;
}
.nn-preset-colors {
margin-top: 8px;
}
/* Color dots */
.nn-color-dot {
aspect-ratio: 1;
border-radius: var(--radius-s);
cursor: pointer;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.nn-recent-remove-button {
position: absolute;
top: 2px;
right: 2px;
z-index: 1;
width: 16px;
height: 16px;
padding: 0;
border-radius: 999px;
border: 1px solid var(--background-modifier-border);
background: var(--background-primary);
color: var(--nn-theme-foreground-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.nn-recent-remove-button {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 120ms ease;
}
.nn-color-dot:hover .nn-recent-remove-button,
.nn-color-dot:focus-within .nn-recent-remove-button {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
.nn-recent-remove-button:hover {
color: var(--nn-theme-foreground);
border-color: var(--interactive-accent);
}
.nn-recent-remove-button:focus-visible {
outline: 2px solid var(--interactive-accent);
outline-offset: 1px;
}
.nn-recent-remove-glyph {
font-size: 11px;
line-height: 1;
transform: translateY(-1px);
pointer-events: none;
}
/* Touch target enhancement for mobile */
.nn-color-dot::before {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
}
.nn-color-dot:hover::after {
outline: 3px solid var(--interactive-accent);
outline-offset: -3px;
}
.nn-user-color-selected::after {
outline: 2px solid var(--interactive-accent);
outline-offset: -2px;
}
/* Empty color slot */
.nn-color-dot.nn-color-empty {
background: var(--background-secondary);
border: 1px dashed var(--background-modifier-border);
cursor: default;
opacity: 0.3;
}
.nn-color-dot.nn-color-empty:hover::after {
outline: none;
}
.nn-color-dot.nn-drop-hover {
outline: 3px solid var(--interactive-accent);
outline-offset: -3px;
}
.nn-drag-preview {
width: 36px;
height: 36px;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
/* Button container */
.nn-color-button-container {
display: flex;
gap: 12px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--background-modifier-border);
justify-content: center;
}
/* Dark theme adjustments */
.theme-dark .nn-preview-color {
border-color: rgba(255, 255, 255, 0.1);
}
/* Mobile responsiveness */
@media (max-width: 600px) {
.nn-color-picker-content {
flex-direction: column;
gap: 16px;
padding-bottom: 0;
overflow-y: hidden;
overflow-x: hidden;
touch-action: none;
}
.nn-color-picker-left,
.nn-color-picker-right {
flex: 1 1 auto;
width: 100%;
}
.nn-preset-colors,
.nn-recent-colors {
grid-template-columns: repeat(8, 1fr);
}
.nn-sv-header {
display: none;
}
/* Saturation/value area on the left, hue + transparency + hex stacked on the right.
The SV area stretches to match the height of that stack. */
.nn-color-area-section {
flex-direction: row;
align-items: stretch;
gap: 14px;
}
.nn-sv-area {
flex: 1 1 0;
width: auto;
height: auto;
}
.nn-color-controls {
flex: 1 1 0;
min-width: 0;
}
.modal.nn-color-picker-modal .modal-content {
padding: 16px 16px 12px;
gap: 12px;
}
.nn-color-button-container {
margin-top: 12px;
padding-top: 12px;
}
}
/* Source: src/styles/sections/modal-appearance.css */
/* ========================================================================
Appearance Modal - icon, foreground color, and background color editor
======================================================================== */
.modal.nn-appearance-modal {
width: 620px;
max-width: calc(100vw - 40px);
max-height: 86vh;
}
.modal.nn-appearance-modal .modal-content {
display: flex;
flex-direction: column;
gap: 12px;
box-sizing: border-box;
width: 100%;
padding: 16px;
overflow: hidden;
}
.modal.nn-appearance-modal .modal-close-button {
z-index: 10;
pointer-events: auto;
}
.nn-appearance-header {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 14px 16px;
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-m);
background: var(--background-secondary);
}
@media (hover: hover) and (pointer: fine) {
.nn-appearance-preview-item:hover .nn-appearance-clear-button,
.nn-appearance-preview-item:focus-within .nn-appearance-clear-button {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
.nn-appearance-clear-button.nn-appearance-clear-hidden {
display: none;
}
.nn-appearance-preview-item {
position: relative;
display: inline-flex;
align-items: center;
max-width: 100%;
gap: 8px;
padding: 6px 14px;
border-radius: var(--radius-s);
background: var(--nn-preview-bg, var(--background-secondary));
color: var(--nn-preview-fg, var(--nn-theme-foreground));
font-size: 14px;
font-weight: 600;
}
.nn-appearance-preview-icon {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.nn-appearance-preview-icon svg {
width: 18px;
height: 18px;
}
.nn-appearance-preview-icon-empty {
display: none;
}
.nn-appearance-preview-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nn-appearance-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--background-modifier-border);
}
.nn-appearance-tab {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 7px 12px;
margin: 0 0 -1px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: transparent;
color: var(--nn-theme-foreground-muted);
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.nn-appearance-tab:hover {
color: var(--nn-theme-foreground);
}
.nn-appearance-tab.nn-active {
border-bottom-color: var(--interactive-accent);
color: var(--nn-theme-foreground);
}
.nn-appearance-tab-chip {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
overflow: hidden;
border: 1px solid var(--background-modifier-border);
}
.nn-appearance-tab-icon-chip {
width: 24px;
height: 24px;
border-radius: var(--radius-s);
color: var(--nn-theme-foreground);
}
.nn-appearance-tab-icon-chip svg {
width: 16px;
height: 16px;
}
.nn-appearance-tab-color-chip {
width: 32px;
height: 18px;
border-radius: 4px;
}
.nn-appearance-tab-chip-empty {
opacity: 0.55;
}
.nn-appearance-tab-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nn-appearance-body {
flex: 1 1 auto;
height: 360px;
overflow-y: auto;
overflow-x: hidden;
}
.nn-appearance-panel {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
min-height: 0;
}
.nn-appearance-panel-hidden {
display: none;
}
.nn-appearance-reset-button {
padding: 4px 10px;
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-s);
background: transparent;
color: var(--nn-theme-foreground-muted);
font-size: 12px;
cursor: pointer;
}
.nn-appearance-reset-button:hover {
border-color: var(--background-modifier-border-hover);
color: var(--nn-theme-foreground);
}
.nn-appearance-reset-button.nn-appearance-reset-active {
border-color: var(--interactive-accent);
color: var(--interactive-accent);
}
.nn-appearance-picker-host {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1 1 auto;
min-height: 0;
}
.nn-appearance-picker-host .nn-icon-provider-tabs {
margin-bottom: 0;
}
.nn-appearance-picker-host .nn-icon-search-container {
padding: 0 8px;
border-bottom: 0;
}
.nn-appearance-picker-host .nn-icon-results-container {
flex: 1 1 auto;
height: auto;
min-height: 0;
}
.nn-appearance-picker-host .nn-color-picker-content {
gap: 16px;
padding-bottom: 0;
overflow: visible;
}
.nn-appearance-picker-host .nn-color-picker-left {
flex-basis: 220px;
}
.nn-appearance-picker-host .nn-color-picker-left-no-preview .nn-preset-section {
margin-top: 0;
}
.nn-appearance-picker-host .nn-recent-section {
margin-top: 4px;
}
.nn-appearance-picker-host .nn-preset-header,
.nn-appearance-picker-host .nn-hex-header,
.nn-appearance-picker-host .nn-recent-header {
justify-content: flex-start;
gap: 8px;
}
.nn-appearance-picker-host .nn-recent-colors {
grid-template-columns: repeat(5, 1fr);
}
.nn-appearance-picker-host .nn-recent-colors .nn-color-dot {
width: auto;
height: auto;
aspect-ratio: 1;
}
.nn-icon-item.nn-icon-item-selected {
outline: 2px solid var(--interactive-accent);
outline-offset: -2px;
}
.nn-appearance-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--background-modifier-border);
}
.nn-appearance-footer-actions {
display: flex;
gap: 8px;
}
@media (max-width: 600px) {
.modal.nn-appearance-modal {
width: 100%;
max-width: calc(100vw - 20px);
}
.nn-appearance-tabs {
overflow-x: auto;
}
.nn-appearance-tab {
flex: 0 0 auto;
}
/* Size the body to its content rather than a fixed height so the modal adapts to large
fonts and display scaling. The base max-height caps it to the viewport and the body
scrolls instead of clipping. The modal resizes between tabs because each tab fits its
own content. */
.nn-appearance-body {
height: auto;
min-height: 0;
}
.nn-appearance-picker-host .nn-icon-results-container {
flex: 0 0 auto;
height: 240px;
min-height: 240px;
}
.nn-appearance-picker-host .nn-recent-colors {
grid-template-columns: repeat(8, 1fr);
}
}
/* Source: src/styles/sections/theme-folder-colors.css */
/* ========================================================================
Folder Color Styles
======================================================================== */
/* Source: src/styles/sections/mobile-variables.css */
/* ========================================================================
Mobile-specific Folder Text Size
======================================================================== */
/* Mobile root variables */
.nn-mobile {
--nn-nav-icon-size: 20px;
--nn-file-name-size-mobile: 16px;
--nn-file-small-size-mobile: 15px;
--nn-file-padding-vertical-mobile: calc(var(--nn-file-padding-vertical) + 4px);
--nn-file-padding-total-mobile: calc(var(--nn-file-padding-vertical-mobile) * 2);
--nn-file-icon-size-mobile: calc(var(--nn-file-icon-size) + 4px);
--nn-file-icon-slot-width-mobile: var(--nn-file-icon-size-mobile);
--nn-file-title-line-height: var(--nn-file-title-line-height-mobile);
--nn-file-single-text-line-height: var(--nn-file-single-text-line-height-mobile);
--nn-file-multiline-text-line-height: var(--nn-file-multiline-text-line-height-mobile);
--nn-list-group-header-height-mobile: calc(var(--nn-list-group-header-height) + 8px);
--nn-list-group-goal-header-height-mobile: calc(var(--nn-list-group-header-height-mobile) + var(--nn-list-group-progress-gap-after));
}
/* Folder text size on mobile */
.notebook-navigator-mobile .nn-navitem-name {
font-size: var(--nn-setting-nav-font-size-mobile);
}
/* Increase folder count size on mobile to match folder text */
.notebook-navigator-mobile .nn-navitem-count {
font-size: var(--nn-navitem-count-font-size-mobile);
}
/* Mobile folder content padding adjustment for proper selection height */
.notebook-navigator-mobile .nn-navitem-content {
padding: 0 var(--nn-nav-item-padding-horizontal);
padding-inline-start: 4px;
height: 100%;
}
.notebook-navigator-mobile .nn-navitem-indent-guide {
--nn-indent-guide-padding-inline-start: 4px;
--nn-indent-guide-chevron-slot-width: 32px;
}
.notebook-navigator-mobile .nn-root-reorder-remove {
font-size: var(--nn-setting-nav-font-size-mobile);
}
/* Source: src/styles/sections/mobile-panes.css */
/* ========================================================================
Mobile Pane Layout
======================================================================== */
/* Make panes flex containers on mobile to accommodate mobile toolbars. */
.notebook-navigator-mobile .nn-navigation-pane {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
border-right: none;
background-color: var(--nn-theme-nav-bg);
}
/* Horizontal dual pane on tablets sizes the navigation pane from the dragged divider width.
Without restoring flex: 0 0 auto, the flex: 1 above zeroes the flex basis so both panes
stay evenly split regardless of the stored width. The divider border returns because the
resize handle is transparent when idle. */
.notebook-navigator-mobile .nn-dual-pane.nn-orientation-horizontal .nn-navigation-pane {
flex: 0 0 auto;
border-right: 1px solid var(--nn-theme-divider-border-color);
}
.notebook-navigator-mobile .nn-list-pane {
display: flex;
flex-direction: column;
height: 100%;
}
/* Ensure scrollers take remaining space. */
.notebook-navigator-mobile .nn-navigation-pane-scroller {
flex: 1;
min-height: 0; /* Important for proper scrolling */
-webkit-overflow-scrolling: touch;
/* Keep horizontal pane bounce/chaining disabled while allowing native vertical edge feedback. */
overscroll-behavior-x: none;
overscroll-behavior-y: contain;
}
/* Mobile list pane scroller uses the mobile list surface. */
.notebook-navigator-mobile .nn-list-pane-scroller {
flex: 1;
min-height: 0; /* Important for proper scrolling */
-webkit-overflow-scrolling: touch;
/* Keep horizontal pane bounce/chaining disabled while allowing native vertical edge feedback. */
overscroll-behavior-x: none;
overscroll-behavior-y: contain;
background-color: var(--nn-theme-list-bg); /* Opaque background on scroller for GPU scroll layer (see .nn-list-pane-scroller) */
}
/* Source: src/styles/sections/mobile-tab-bars.css */
/* ========================================================================
Mobile Tab Bars - iOS-style bottom navigation
======================================================================== */
/* Mobile toolbar container */
.nn-mobile-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--nn-theme-list-bg);
flex-shrink: 0;
padding: 0 8px;
/* Use platform-specific safe area variable */
padding-bottom: var(--nn-mobile-safe-area-bottom);
/* Adjust height to include safe area padding */
height: calc(49px + var(--nn-mobile-safe-area-bottom));
min-height: calc(49px + var(--nn-mobile-safe-area-bottom));
}
/* Mobile toolbars: distribute buttons evenly; iOS floating toolbars override this via platform stylesheet. */
.notebook-navigator-mobile .nn-mobile-toolbar {
justify-content: space-evenly;
}
.nn-pane-bottom-toolbar {
flex-shrink: 0;
}
/* Mobile toolbar grouping containers */
.nn-mobile-toolbar-left {
display: flex;
flex: 1;
min-width: 0;
}
.nn-mobile-toolbar-right {
display: flex;
flex: 0 0 auto;
}
/* Mobile toolbar button grouping container */
.nn-mobile-toolbar-pill {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
.nn-mobile-toolbar-circle {
display: flex;
align-items: center;
justify-content: center;
}
/* Mobile toolbar buttons */
button.nn-mobile-toolbar-button {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
background: transparent;
border: none;
border-radius: var(--radius-m);
color: var(--nn-theme-mobile-toolbar-button-icon-color);
transition:
background-color 0.15s ease,
color 0.15s ease;
cursor: pointer;
padding: 0;
box-shadow: none;
}
.nn-mobile-toolbar-button-circle {
border-radius: 999px;
}
/* Mobile toolbar button icons */
.nn-mobile-toolbar-button svg {
width: 24px;
height: 24px;
}
.nn-mobile-toolbar-button svg:not(.nn-vault-icon-svg) {
stroke-width: 1.5;
stroke: var(--nn-theme-mobile-toolbar-button-icon-color);
}
/* Mobile toolbar button tap feedback */
.nn-mobile-toolbar-button:active {
opacity: 0.7;
}
/* Active mobile toolbar button state - toggled on */
.notebook-navigator-mobile button.nn-mobile-toolbar-button.nn-mobile-toolbar-button-active {
color: var(--nn-theme-mobile-toolbar-button-active-icon-color);
background-color: var(--nn-theme-mobile-toolbar-button-active-bg);
}
.notebook-navigator-mobile button.nn-mobile-toolbar-button.nn-mobile-toolbar-button-active svg:not(.nn-vault-icon-svg) {
stroke: var(--nn-theme-mobile-toolbar-button-active-icon-color);
stroke-width: 2;
}
/* Disabled mobile toolbar button */
.nn-mobile-toolbar-button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Source: src/styles/sections/platform-ios.css */
/* ========================================================================
iOS Platform Overrides
======================================================================== */
.notebook-navigator-ios {
/* Obsidian accounts for iOS safe areas in the view chrome. */
--nn-mobile-safe-area-bottom: 0px;
}
/* iOS: view container background */
/* Targets Obsidian's `.view-content` wrapper to ensure the area behind the navigator matches the mobile pane background. */
.view-content.notebook-navigator.notebook-navigator-ios {
background-color: var(--nn-theme-mobile-bg);
}
/* iOS: bottom padding inside the navigator viewport */
/* Applied to the internal split container so the bottom edge doesn't touch the view chrome and the toolbar shadow can render into the padding (8px matches the top spacer). */
/* Scoped to body.is-phone (Obsidian keeps the class current on resize) because tablets render the desktop headers and no floating toolbars. */
body.is-phone .notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-split-container {
padding-bottom: 8px;
box-sizing: border-box;
}
/* iOS: allow the glass toolbar shadow to render into the split container padding */
body.is-phone .notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane,
body.is-phone .notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane {
overflow: visible;
}
/* iOS: anchor floating toolbar to the panel (above the calendar). */
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane-panel,
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane-panel {
position: relative;
}
/* iOS: bottom overlays are positioned above the scroller. */
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-pane-bottom-toolbar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
}
/* iOS: reserve scroll space for the floating toolbar so rows can scroll under it. */
/* Scoped to body.is-phone because tablets never render the floating toolbars. */
body.is-phone .notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane-scroller,
body.is-phone .notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane-scroller {
padding-bottom: var(--nn-ios-pane-bottom-overlay-height);
}
/* iOS: navigation pane calendar safe area */
.notebook-navigator-ios .nn-navigation-pane,
.notebook-navigator-ios .nn-list-pane {
/* Obsidian accounts for iOS safe areas in the view chrome. */
--nn-calendar-safe-area: 0px;
}
/* iOS glass toolbar */
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar {
pointer-events: none;
justify-content: space-between;
align-items: flex-start;
background-color: transparent;
border-top: none;
/* 2px for border effect + 2px to match Obsidian view selector dropdown */
padding-left: calc(var(--nn-scroller-padding) + 4px); /* 4px horizontal spacer for glass pill */
padding-right: calc(var(--nn-scroller-padding) + 4px); /* 4px horizontal spacer for glass pill */
padding-bottom: 0; /* No extra bottom padding in iOS */
/* The glass outline is painted via box-shadow and extends outside the pill/circle box. Add a small top spacer so
auto-revealed rows are not positioned behind the outline. */
padding-top: var(--nn-ios-toolbar-glass-visual-overlap-top);
/* Adds an invisible spacer under the glass pills to create the visual bottom gap without shifting sticky positioning. */
height: calc(
var(--nn-ios-toolbar-height) + var(--nn-ios-toolbar-bottom-offset) + var(--nn-ios-toolbar-glass-visual-overlap-top)
); /* Includes bottom offset spacer + top overlap */
min-height: calc(
var(--nn-ios-toolbar-height) + var(--nn-ios-toolbar-bottom-offset) + var(--nn-ios-toolbar-glass-visual-overlap-top)
); /* Match toolbar box height */
}
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-left,
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-right {
display: flex;
pointer-events: auto;
flex: 0 0 auto;
}
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars {
--nn-theme-mobile-toolbar-button-icon-color: var(--nn-theme-foreground);
--nn-ios-toolbar-glass-bg: color-mix(in srgb, var(--nn-theme-mobile-toolbar-glass-bg) 45%, transparent);
--nn-ios-toolbar-glass-outline: rgba(255, 255, 255, 0.6);
--nn-ios-toolbar-glass-shadow: 0 0 0 2px var(--nn-ios-toolbar-glass-outline), 0 16px 32px rgba(0, 0, 0, 0.09);
--nn-ios-toolbar-glass-filter: blur(3px) saturate(160%);
--nn-theme-mobile-toolbar-button-active-bg: transparent;
/* Visual overflow above the pills caused by the glass outline (box-shadow spread). */
--nn-ios-toolbar-glass-visual-overlap-top: 2px;
/* Visual bottom gap between the glass pills and the view edge (implemented via toolbar height + fade, not sticky offset). */
--nn-ios-toolbar-bottom-offset: 12px;
--nn-ios-toolbar-height: 44px; /* 38px button + (1px padding + 2px border) * 2 */
--nn-ios-pane-bottom-fade-height: 64px; /* Fade height behind the toolbar */
--nn-ios-pane-bottom-fade-opacity: 0.8; /* Fade opacity behind the toolbar */
--nn-ios-pane-bottom-overlay-height: calc(
var(--nn-ios-toolbar-height) + var(--nn-ios-toolbar-bottom-offset) + var(--nn-ios-toolbar-glass-visual-overlap-top)
);
}
.theme-dark .notebook-navigator-ios.notebook-navigator-ios-floating-toolbars {
--nn-ios-toolbar-glass-outline: rgba(255, 255, 255, 0.1);
--nn-ios-toolbar-glass-shadow: 0 0 0 2px var(--nn-ios-toolbar-glass-outline), 0 16px 32px rgba(0, 0, 0, 0.3);
}
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-pill,
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle {
display: flex;
position: relative;
z-index: 0;
border-radius: 999px;
background: var(--nn-ios-toolbar-glass-bg);
border: 2px solid transparent; /* Glass outline thickness */
-webkit-backdrop-filter: var(--nn-ios-toolbar-glass-filter);
backdrop-filter: var(--nn-ios-toolbar-glass-filter);
box-shadow: var(--nn-ios-toolbar-glass-shadow);
overflow: hidden;
/*
* Warped glass (disabled)
* Enable when WebKit supports SVG `url(#...)` values for `-webkit-backdrop-filter`.
*
* Requirements:
* - Inject the SVG filter defs into the document (filter id: `notebook-navigator-frosted`)
* - Set:
* -webkit-backdrop-filter: url(#notebook-navigator-frosted);
* backdrop-filter: url(#notebook-navigator-frosted);
*/
}
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-pill > .nn-mobile-toolbar-button,
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle > .nn-mobile-toolbar-button {
position: relative;
z-index: 1;
}
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-pill {
width: auto;
justify-content: flex-start;
gap: 6px; /* Spacing between buttons inside the pill */
padding: 1px 10px; /* 1px vertical + 10px horizontal pill inset */
}
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle {
padding: 1px; /* 1px inset around the circular button */
}
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-button {
width: 38px; /* Button diameter inside the glass pill */
height: 38px; /* Button diameter inside the glass pill */
min-width: 38px; /* Prevent button shrink */
min-height: 38px; /* Prevent button shrink */
border-radius: 999px;
}
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-button svg:not(.nn-vault-icon-svg) {
stroke-width: 2;
}
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane-content,
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane-content {
position: relative;
z-index: 1;
}
/* iOS: bottom fade layer */
.notebook-navigator-ios.notebook-navigator-ios-floating-toolbars .nn-pane-bottom-toolbar::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
/* Covers the toolbar height plus the visual bottom gap so the fade reaches the edge below. */
height: calc(var(--nn-ios-pane-bottom-fade-height) + var(--nn-ios-toolbar-bottom-offset));
pointer-events: none;
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--nn-theme-mobile-bg) 0%, transparent),
color-mix(in srgb, var(--nn-theme-mobile-bg) calc(var(--nn-ios-pane-bottom-fade-opacity) * 100%), transparent)
);
z-index: -1;
}
/*
* iOS: WebKit paint workaround for virtualized lists.
*
* Symptom:
* - The list can render blank (rows not visible) after preview text / feature image updates when the list is short
* enough that the scroller does not overflow (scrollHeight === clientHeight).
* - The DOM still contains the virtualized row elements and TanStack Virtual still reports virtual items, but the
* scroll layer does not repaint until a user interaction (tap) or a layout-triggering event (rotation).
*
* Workaround:
* - Force each rendered virtual row wrapper onto its own composited layer. This makes WebKit repaint the rows
* reliably when the virtualizer remeasures and updates absolute positioning.
*/
.notebook-navigator-ios .nn-list-pane .nn-virtual-item {
transform: translateZ(0);
}
/*
* iOS/iPadOS: WebKit paint workaround for pinned navigation shortcuts.
*
* Pinned shortcuts can remain mounted and measurable while their row contents stop repainting after the mobile
* single-pane transform finishes. Keep the pinned shortcut surface and its rows on composited layers.
*/
.notebook-navigator-ios .nn-shortcut-pinned,
.notebook-navigator-ios .nn-shortcut-pinned-scroll,
.notebook-navigator-ios .nn-shortcut-pinned .nn-navitem {
transform: translateZ(0);
}
/* Source: src/styles/sections/platform-android.css */
/* ========================================================================
Android Platform Overrides
======================================================================== */
.notebook-navigator-android {
/* Declared so calc() uses of the variable stay valid; an undefined variable drops the
whole padding/height declaration at computed-value time. Obsidian accounts for
Android safe areas in the view chrome. */
--nn-mobile-safe-area-bottom: 0px;
}
/* Android: match the view container background to mobile pane surfaces */
.view-content.notebook-navigator.notebook-navigator-android {
background-color: var(--nn-theme-mobile-bg);
}
/* Android: match the split container background to mobile pane surfaces */
.notebook-navigator-android .nn-split-container {
background-color: var(--nn-theme-mobile-bg);
}
/* Android: bottom padding inside the navigator viewport */
/* Applied to the internal split container so the bottom edge doesn't touch the view chrome (8px matches the top spacer). */
/* Scoped to body.is-phone to match the iOS rule; tablets render the desktop chrome without the inset. */
body.is-phone .notebook-navigator-android .nn-split-container {
padding-bottom: 8px;
box-sizing: border-box;
}
/* Source: src/styles/sections/android-toolbar.css */
/* ========================================================================
Android Toolbar Positioning
Android displays toolbar at top, iOS at bottom
======================================================================== */
/* Android: toolbar at top with reduced height */
.notebook-navigator-mobile.notebook-navigator-android .nn-mobile-toolbar {
background-color: var(--nn-theme-list-bg);
border: none;
padding-bottom: 0;
justify-content: center;
gap: 16px;
height: 44px;
min-height: 44px;
}
/* Android: smaller toolbar buttons */
.notebook-navigator-android .nn-mobile-toolbar-button {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
}
/* Source: src/styles/sections/android-textzoom.css */
/* ========================================================================
Android textZoom Compensation
Android WebView scales text via textZoom property. This affects font-size
and line-height at the rendering level. We detect the scale factor in JS
and set --nn-android-font-scale, then CSS compensates by dividing values
by that factor so Android scaling produces correct final sizes.
Font-size compensation is handled via inline styles in androidFontScale.ts.
Line-height compensation is handled here in CSS because the .nn-mobile class
redefines variables and would override inline styles on the outer container.
======================================================================== */
/* Override line-height variables with compensated values
Note: We use a reciprocal variable for division since calc(x / var) can have issues */
.notebook-navigator-android .nn-mobile {
--nn-android-font-scale-reciprocal: calc(1 / var(--nn-android-font-scale, 1));
--nn-file-title-line-height: calc(var(--nn-file-title-line-height-mobile) * var(--nn-android-font-scale-reciprocal, 1));
--nn-file-single-text-line-height: calc(var(--nn-file-single-text-line-height-mobile) * var(--nn-android-font-scale-reciprocal, 1));
--nn-file-multiline-text-line-height: calc(
var(--nn-file-multiline-text-line-height-mobile) * var(--nn-android-font-scale-reciprocal, 1)
);
/* Note: Do NOT compensate icon size variables - they're used for SVG width/height
which Android doesn't scale. Only compensate font-size on emoji elements directly. */
}
/* Note counts in navigation pane */
.notebook-navigator-android .nn-mobile .nn-navitem-count {
font-size: calc(
var(--nn-navitem-count-font-size-mobile, var(--nn-navitem-count-font-size)) * var(--nn-android-font-scale-reciprocal, 1)
);
}
/* Root reorder panel text */
.notebook-navigator-android .nn-mobile .nn-root-reorder-hint {
font-size: calc(
var(--nn-root-reorder-hint-font-size-mobile, var(--nn-root-reorder-hint-font-size)) * var(--nn-android-font-scale-reciprocal, 1)
);
}
/* Emoji and webfont icons - Android scales font-size but not SVG dimensions.
Only apply to .nn-emoji-icon and .nn-iconfont to avoid breaking Lucide SVG icons. */
.notebook-navigator-android .nn-mobile .nn-emoji-icon,
.notebook-navigator-android .nn-mobile .nn-iconfont {
font-size: calc(var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)) * var(--nn-android-font-scale-reciprocal, 1));
}
/* Task indicators are smaller than file icons, so preserve their 80% size while compensating
for Android textZoom. Without this override, the general icon rule above enlarges them. */
.notebook-navigator-android .nn-mobile .nn-file-task-progress-icon.nn-emoji-icon,
.notebook-navigator-android .nn-mobile .nn-file-task-progress-icon.nn-iconfont {
font-size: calc(var(--icon-size) * 0.8 * var(--nn-android-font-scale-reciprocal, 1));
}
/* Clamp height compensation - Android doesn't scale max-height, so match the compensated line-height after textZoom applies. */
.notebook-navigator-android .nn-file-name {
max-height: calc(var(--nn-file-title-line-height) * var(--filename-rows, 1) * var(--nn-android-font-scale, 1));
}
.notebook-navigator-android .nn-file-preview {
max-height: calc(var(--nn-file-multiline-text-line-height) * var(--preview-rows, 1) * var(--nn-android-font-scale, 1));
}
/* Icon vertical centering - line-height is pre-compensated, icon size is not */
.notebook-navigator-android .nn-file-icon-slot {
margin-top: max(
0px,
calc(
(
var(--nn-file-title-line-height) * var(--nn-android-font-scale, 1) -
var(--nn-file-icon-size-mobile, var(--nn-file-icon-size))
) /
2
)
);
}
/* Source: src/styles/sections/rtl-support.css */
/* ========================================================================
RTL (Right-to-Left) Support
======================================================================== */
/* Single-pane slide animations for RTL */
.mod-rtl .nn-split-container.nn-single-pane.show-navigation .nn-list-pane {
transform: translateX(-100%);
}
.mod-rtl .nn-split-container.nn-single-pane.show-files .nn-navigation-pane {
transform: translateX(100%);
}
.mod-rtl .nn-file-name,
.mod-rtl .nn-file-preview {
text-align: right;
}
/* Bidi-safe text runs */
.nn-navitem-name,
.nn-file-name,
.nn-file-preview,
.nn-file-date,
.nn-parent-folder,
.nn-list-group-header {
unicode-bidi: plaintext;
}
/* Fix icon mirroring - Obsidian auto-mirrors icons, but we may need to prevent it for some icons */
/* Currently, all our icons (chevrons, folders, etc.) should be mirrored in RTL, so no overrides needed */
/* Source: src/styles/sections/icons-system.css */
/* =================================================================================
Icon System
================================================================================= */
/* Plugin icon - ensure transparent background */
.svg-icon.notebook-navigator {
background: transparent;
overflow: visible;
}
/* Emoji icon styles */
.nn-emoji-icon {
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
font-style: normal;
font-weight: normal;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
text-align: center;
text-decoration: none;
/* Prevent text selection of emoji icons */
user-select: none;
-webkit-user-select: none;
}
/* Ensure emojis in navigation items display properly */
.nn-navitem-icon.nn-emoji-icon {
font-size: var(--nn-nav-icon-size);
width: var(--nn-nav-icon-size);
height: var(--nn-nav-icon-size);
line-height: var(--nn-nav-icon-size);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
/* Ensure proper sizing when used in buttons */
.nn-icon-button .nn-emoji-icon {
width: 1em;
height: 1em;
font-size: inherit;
}
/* ========================================================================
ServiceIcon Alignment
======================================================================== */
/*
* `ServiceIcon` renders into a `` container and injects an inline SVG.
* Ensure the span/SVG don't participate in baseline alignment, so icons stay vertically centered inside flex buttons.
*/
.nn-icon-button > span,
.nn-mobile-toolbar-button > span,
.nn-navigation-calendar-nav-button > span {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.nn-icon-button > span > svg,
.nn-mobile-toolbar-button > span > svg,
.nn-navigation-calendar-nav-button > span > svg {
display: block;
}
/* Icon font styles */
.nn-iconfont {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
user-select: none;
-webkit-user-select: none;
text-rendering: optimizeLegibility;
}
.nn-iconfont-fa-solid,
.nn-iconfont-rpg-awesome,
.nn-iconfont-bootstrap-icons,
.nn-iconfont-material-icons,
.nn-iconfont-phosphor,
.nn-iconfont-simple-icons {
font-style: normal;
}
.nn-iconfont-fa-solid {
font-weight: 900;
font-family: 'NotebookNavigatorFontAwesomeSolid', 'Font Awesome 7 Free', sans-serif;
}
.nn-iconfont-rpg-awesome,
.nn-iconfont-bootstrap-icons,
.nn-iconfont-material-icons,
.nn-iconfont-phosphor,
.nn-iconfont-simple-icons {
font-weight: 400;
}
.nn-iconfont-rpg-awesome {
font-family: 'NotebookNavigatorRpgAwesome', 'RPG Awesome', sans-serif;
}
.nn-iconfont-bootstrap-icons {
font-family: 'NotebookNavigatorBootstrapIcons', 'Bootstrap Icons', sans-serif;
}
.nn-iconfont-material-icons {
font-family: 'NotebookNavigatorMaterialIcons', 'Material Icons', sans-serif;
}
.nn-iconfont-phosphor {
font-family: 'NotebookNavigatorPhosphorIcons', 'Phosphor', sans-serif;
}
.nn-iconfont-simple-icons {
font-family: 'NotebookNavigatorSimpleIcons', 'Simple Icons', sans-serif;
}
.nn-vault-icon-svg {
display: block;
width: 100%;
height: 100%;
}
.nn-icon-provider-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 8px;
border-bottom: 1px solid var(--background-modifier-border);
padding-bottom: 2px;
}
.nn-icon-provider-link-row {
padding: 8px 12px 0;
text-align: center;
}
.nn-icon-provider-link-row-hidden {
display: none;
}
.nn-icon-provider-link-row a {
display: inline-flex;
align-items: center;
color: var(--text-accent);
font-size: 12px;
text-decoration: none;
}
.nn-icon-provider-link-row a:hover {
text-decoration: underline;
}
.nn-icon-provider-tab {
padding: 4px 12px;
border-radius: var(--radius-s);
color: var(--nn-theme-foreground-muted);
white-space: nowrap;
}
.nn-icon-provider-tab:hover {
background-color: var(--background-modifier-hover);
color: var(--nn-theme-foreground);
}
.nn-icon-provider-tab.nn-active {
background-color: var(--interactive-accent);
color: var(--text-on-accent);
}
/* Emoji preview in icon picker */
.nn-icon-item-preview.nn-emoji-preview {
font-size: 24px;
}
/* Source: src/styles/sections/settings-metadata-info.css */
/* ========================================================================
Metadata Info Styles
======================================================================== */
/* Error text styling */
.nn-metadata-error-text {
color: var(--text-error);
font-weight: bold;
}
/* Source: src/styles/sections/settings-style-settings.css */
/* @settings
name: Notebook Navigator
id: notebook-navigator-style-settings
settings:
-
id: nn-theme-foreground-heading
title: Foreground colors
description: Base colors for text, icons, and lines. Most other colors default to these.
type: heading
level: 1
collapsed: true
-
id: nn-theme-foreground
title: Base foreground color
description: Base foreground color.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-foreground-muted
title: Muted foreground color
description: Muted foreground color.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-foreground-faded
title: Faded foreground color
description: Faded foreground color.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-foreground-faint
title: Faint foreground color
description: Faint foreground color.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-nav-pane-heading
title: Navigation pane
description: Customize the background and items within the navigation pane.
type: heading
level: 1
collapsed: true
-
id: nn-theme-nav-bg
title: Navigation pane background
description: Background color of the navigation pane (desktop only).
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-nav-separator-color
title: Navigation separator color
description: Line color for separators rendered inside navigation spacers.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-nav-indent-guide-color
title: Indent guide color
description: Line color for navigation indent guides.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-nav-leader-color
title: Leader color
description: Color for leaders between item names and trailing values.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-pinned-shortcut-shadow-color
title: Pinned shortcut shadow color
description: Gradient overlay color rendered beneath pinned shortcuts.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-nav-pane-items-heading
title: Navigation items
description: Custom-color weight and folder-note decoration also apply when these items appear in the list pane.
type: heading
level: 2
collapsed: false
-
id: nn-theme-navitem-chevron-color
title: Item expand/collapse arrow color
description: Color for expand/collapse arrows.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-icon-color
title: Item icon color
description: Icon color for navigation items.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-name-color
title: Item name color
description: Text color for navigation item names.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-file-name-color
title: File name color
description: Text color for file shortcuts and recent files. Defaults to the navigation item text color.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-name-font-weight
title: Item name font weight
description: Font weight of folder, tag, property, note, and section names, including shortcuts and recent files.
type: variable-number-slider
default: 400
min: 100
max: 900
step: 100
-
id: nn-theme-navitem-custom-color-name-font-weight
title: Custom color text weight
description: Font weight for custom or rainbow-colored names, group headers, parent folders, and tag pills.
type: variable-number-slider
default: 600
min: 100
max: 900
step: 100
-
id: nn-theme-navitem-folder-note-name-decoration
title: Folder note text decoration
description: Text decoration for folder note names wherever they are shown.
type: variable-select
default: underline
options:
-
label: None
value: none
-
label: Underline
value: underline
-
label: Dotted underline
value: underline dotted
-
id: nn-theme-navitem-folder-note-name-hover-decoration
title: Folder note text decoration (hover)
description: Text decoration when hovering folder note names.
type: variable-select
default: underline
options:
-
label: None
value: none
-
label: Underline
value: underline
-
label: Dotted underline
value: underline dotted
-
id: nn-theme-navitem-border-radius
title: Item border radius
description: Corner radius for navigation items.
type: variable-number-slider
default: 4
format: px
min: 0
max: 14
step: 1
-
id: nn-theme-navitem-border-width
title: Item border width
description: Border width on navigation item backgrounds, hover state, and selection.
type: variable-number-slider
default: 0
format: px
min: 0
max: 4
step: 1
-
id: nn-theme-navitem-custom-border-color
title: Item border color (custom background)
description: Border color on navigation items with custom backgrounds.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-hover-bg
title: Item background (hover)
description: Item hover background color (desktop only).
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-hover-border-color
title: Item border color (hover)
description: Border color on hovered navigation items.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-tag-positive-bg
title: Tag highlight background (include)
description: Background color for positive tag highlights and tag drop targets.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-tag-negative-bg
title: Tag highlight background (exclude)
description: Background color for negative tag highlights and the untagged drop target.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-nav-selection-heading
title: Navigation selection
type: heading
level: 2
collapsed: false
-
id: nn-theme-navitem-selected-bg
title: Selected item background
description: Selected item background color.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-border-color
title: Selected item border color
description: Border color on selected navigation items.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-chevron-color
title: Selected item expand/collapse arrow color
description: Expand/collapse arrow color when item is selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-icon-color
title: Selected item icon color
description: Icon color when item is selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-name-color
title: Selected item name color
description: Name color when selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-inactive-bg
title: Selected item background (inactive)
description: Selected item background color when pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-inactive-border-color
title: Selected item border color (inactive)
description: Border color on selected navigation items when pane is inactive.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-inactive-chevron-color
title: Selected item expand/collapse arrow color (inactive)
description: Expand/collapse arrow color when item is selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-inactive-icon-color
title: Selected item icon color (inactive)
description: Icon color when item is selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-inactive-name-color
title: Selected item name color (inactive)
description: Name color when selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-nav-file-counts-heading
title: File counts
type: heading
level: 2
collapsed: false
-
id: nn-theme-navitem-count-color
title: File count text color
description: Text color for file count badges.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-count-font-weight
title: File count font weight
description: Font weight for file count badges.
type: variable-number-slider
default: 400
min: 100
max: 900
step: 100
-
id: nn-theme-navitem-count-bg
title: File count background
description: Background color for file count badges.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-count-border-radius
title: File count border radius
description: Corner radius for file count badges.
type: variable-number-slider
default: 8
format: px
min: 0
max: 8
step: 1
-
id: nn-theme-navitem-count-border-width
title: File count border width
description: Border width on navigation file count badges.
type: variable-number-slider
default: 0
format: px
min: 0
max: 4
step: 1
-
id: nn-theme-navitem-count-border-color
title: File count border color
description: Border color on navigation file count badges.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-count-color
title: Selected file count text color
description: File count text color when item is selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-count-bg
title: Selected file count background
description: File count background color when selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-count-border-color
title: Selected file count border color
description: Border color on file count badges when selected.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-inactive-count-color
title: Selected file count text color (inactive)
description: File count text color when item is selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-inactive-count-bg
title: Selected file count background (inactive)
description: File count background color when item is selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-navitem-selected-inactive-count-border-color
title: Selected file count border color (inactive)
description: Border color on file count badges when selected and pane is inactive.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-file-list-heading
title: List pane
description: Customize the file list appearance. Search icon and supporting text are under Pane headers and titles.
type: heading
level: 1
collapsed: true
-
id: nn-theme-list-bg
title: List pane background
description: Background color of the list pane (desktop only).
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-list-search-active-bg
title: Search field background (active)
description: Background color for the search field when a search query is active.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-list-search-border-color
title: Search field border color
description: Border and focus ring color for the search field.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-list-separator-color
title: File separator color
description: Divider line color between files.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-list-group-headers-heading
title: Group headers
type: heading
level: 2
collapsed: false
-
id: nn-theme-list-group-header-color
title: Group header text color
description: Text color for date groups and pinned section.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-list-group-header-font-weight
title: Group header text font weight
description: Font weight for date groups and pinned section.
type: variable-number-slider
default: 600
min: 100
max: 900
step: 100
-
id: nn-file-list-items-heading
title: File items
type: heading
level: 2
collapsed: false
-
id: nn-theme-file-name-color
title: File name color
description: Text color for file names.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-name-font-weight
title: File name font weight
description: Font weight for file names.
type: variable-number-slider
default: 600
min: 100
max: 900
step: 100
-
id: nn-theme-file-compact-name-font-weight
title: File name font weight (compact mode)
description: Font weight for file names in compact mode.
type: variable-number-slider
default: 400
min: 100
max: 900
step: 100
-
id: nn-theme-file-preview-color
title: File preview color
description: Text color for content preview.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-preview-font-weight
title: File preview font weight
description: Font weight for file preview text.
type: variable-number-slider
default: 400
min: 100
max: 900
step: 100
-
id: nn-theme-file-task-color
title: File task color
description: Color for the task display and replacement file icon in notes with unfinished tasks.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-task-font-weight
title: File task weight
description: Weight for task counts and icons in notes with unfinished tasks.
type: variable-number-slider
default: 400
min: 100
max: 900
step: 100
-
id: nn-theme-file-task-complete-color
title: File task color (complete)
description: Icon, bar, and count color when all tasks in a note are completed.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-task-complete-font-weight
title: File task weight (complete)
description: Weight for task counts and icons when all tasks in a note are completed.
type: variable-number-slider
default: 400
min: 100
max: 900
step: 100
-
id: nn-theme-file-date-color
title: File date color
description: Text color for creation or modification dates.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-date-font-weight
title: File date font weight
description: Font weight for file dates.
type: variable-number-slider
default: 400
min: 100
max: 900
step: 100
-
id: nn-theme-file-word-count-color
title: File word count color
description: Text color for word count suffixes.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-word-count-font-weight
title: File word count font weight
description: Font weight for word count suffixes.
type: variable-number-slider
default: 400
min: 100
max: 900
step: 100
-
id: nn-theme-file-parent-color
title: File parent folder color
description: Text color for parent folder path (when showing subfolders).
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-parent-font-weight
title: File parent folder font weight
description: Font weight for parent folder path.
type: variable-number-slider
default: 400
min: 100
max: 900
step: 100
-
id: nn-theme-file-feature-border-radius
title: Feature image border radius
description: Corner radius for feature images.
type: variable-number-slider
default: 4
format: px
min: 0
max: 32
step: 1
-
id: nn-theme-file-border-radius
title: File item border radius
description: Corner radius for file items.
type: variable-number-slider
default: 8
format: px
min: 0
max: 16
step: 1
-
id: nn-list-selection-heading
title: File selection
type: heading
level: 2
collapsed: false
-
id: nn-theme-file-selected-bg
title: Selected file background
description: Selected file background color.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-border-width
title: Selected file border width
description: Border width on selected file items.
type: variable-number-slider
default: 0
format: px
min: 0
max: 4
step: 1
-
id: nn-theme-file-selected-border-color
title: Selected file border color
description: Border color on selected file items.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-name-color
title: Selected file name color
description: Text color for file names when selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-preview-color
title: Selected file preview color
description: Text color for content preview when selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-date-color
title: Selected file date color
description: Text color for file dates when selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-word-count-color
title: Selected file word count color
description: Text color for word count suffixes when selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-parent-color
title: Selected file parent folder color
description: Text color for parent folder path when selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-inactive-bg
title: Selected file background (inactive)
description: Selected file background color when pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-inactive-border-color
title: Selected file border color (inactive)
description: Border color on selected file items when pane is inactive.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-inactive-name-color
title: Selected file name color (inactive)
description: File name color when selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-inactive-preview-color
title: Selected file preview color (inactive)
description: Content preview color when file is selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-inactive-date-color
title: Selected file date color (inactive)
description: File date color when selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-inactive-word-count-color
title: Selected file word count color (inactive)
description: Word count suffix color when file is selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-inactive-parent-color
title: Selected file parent folder color (inactive)
description: Parent folder color when file is selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-list-pills-heading
title: Tag and property pills
type: heading
level: 2
collapsed: false
-
id: nn-theme-file-tag-color
title: Tag pill text color
description: Default text color for tag pills without custom colors.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-tag-custom-color-text-color
title: Tag pill text color (custom background)
description: Text color for tag pills with a custom background but no custom text color.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-property-color
title: Property pill text color
description: Default text color for property pills.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-tag-font-weight
title: Tag and property pill text font weight
description: Font weight for tag and property pill text without custom text colors.
type: variable-number-slider
default: 400
min: 100
max: 900
step: 100
-
id: nn-theme-file-tag-bg
title: Tag pill background
description: Default background color for tag pills without custom backgrounds.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-tag-border-radius
title: Tag pill border radius
description: Corner radius for tag pills.
type: variable-number-slider
default: 10
format: px
min: 0
max: 10
step: 1
-
id: nn-theme-file-property-bg
title: Property pill background
description: Default background color for property pills.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-property-border-radius
title: Property pill border radius
description: Corner radius for custom property pills.
type: variable-number-slider
default: 10
format: px
min: 0
max: 10
step: 1
-
id: nn-theme-file-pill-border-width
title: Tag and property pill border width
description: Border width on tag and custom property pills.
type: variable-number-slider
default: 1
format: px
min: 0
max: 4
step: 1
-
id: nn-theme-file-tag-border-color
title: Tag pill border color
description: Border color on tag pills without custom colors.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-property-border-color
title: Property pill border color
description: Border color on property pills without custom colors.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-tag-color
title: Selected tag pill text color
description: Text color for tag pills when selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-tag-bg
title: Selected tag pill background
description: Background color for tag pills when selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-tag-border-color
title: Selected tag pill border color
description: Border color on tag pills without custom colors in selected files.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-property-color
title: Selected property pill text color
description: Text color for property pills when selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-property-bg
title: Selected property pill background
description: Background color for property pills when selected.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-property-border-color
title: Selected property pill border color
description: Border color on property pills without custom colors in selected files.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-inactive-tag-color
title: Selected tag pill text color (inactive)
description: Tag text color when file is selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-inactive-tag-bg
title: Selected tag pill background (inactive)
description: Tag background color when file is selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-inactive-property-color
title: Selected property pill text color (inactive)
description: Text color for property pills when file is selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-file-selected-inactive-property-bg
title: Selected property pill background (inactive)
description: Background color for property pills when file is selected and pane is inactive.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-quick-actions-heading
title: Quick actions
description: Quick actions are shown on desktop.
type: heading
level: 2
collapsed: false
-
id: nn-theme-quick-actions-bg
title: Quick actions toolbar background
description: Background color of quick actions toolbar (supports transparency).
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-quick-actions-border
title: Quick actions toolbar border color
description: Border color of quick actions toolbar.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-quick-actions-border-radius
title: Quick actions toolbar border radius
description: Corner radius for quick actions panel.
type: variable-number-slider
default: 4
format: px
min: 0
max: 12
step: 1
-
id: nn-theme-quick-actions-icon-color
title: Quick actions toolbar icon color
description: Icon color for quick action buttons.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-quick-actions-icon-hover-color
title: Quick actions toolbar icon color (hover)
description: Icon color when hovering quick action buttons.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-quick-actions-separator-color
title: Quick actions toolbar separator color
description: Divider color between quick action buttons.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-pane-headings-heading
title: Pane headers and titles
description: Shared titles, headers, and header buttons in the navigation and list panes.
type: heading
level: 1
collapsed: true
-
id: nn-pane-titles-heading
title: Pane titles
type: heading
level: 2
collapsed: false
-
id: nn-theme-list-heading-color
title: Pane title text color
description: Text color for the list pane title and navigation pane vault title.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-list-heading-font-weight
title: Pane title font weight
description: Font weight for the list pane title and navigation pane vault title.
type: variable-number-slider
default: 600
min: 100
max: 900
step: 100
-
id: nn-list-header-heading
title: Pane headers
type: heading
level: 2
collapsed: false
-
id: nn-theme-list-header-icon-color
title: Pane header icon color
description: Color for folder, tag, and property icons in pane headers and for the search field icon.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-list-header-breadcrumb-color
title: Pane header text color
description: Text color for pane header titles, breadcrumbs, and search field supporting text.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-list-header-breadcrumb-font-weight
title: Pane header text font weight
description: Font weight for pane header titles and breadcrumbs.
type: variable-number-slider
default: 600
min: 100
max: 900
step: 100
-
id: nn-header-heading
title: Header buttons
type: heading
level: 2
collapsed: false
-
id: nn-theme-header-button-icon-color
title: Header button icon color
description: Default icon color for header buttons.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-header-button-hover-bg
title: Header button background (hover)
description: Background color when hovering header buttons.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-header-button-active-bg
title: Header button background (active)
description: Background color for active header buttons.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-header-button-active-icon-color
title: Header button icon color (active)
description: Icon color for active header buttons.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-header-button-disabled-icon-color
title: Header button icon color (disabled)
description: Icon color for disabled header buttons.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-calendar-heading
title: Calendar
description: Customize the daily notes calendar.
type: heading
level: 1
collapsed: true
-
id: nn-calendar-labels-heading
title: Calendar labels
type: heading
level: 2
collapsed: false
-
id: nn-theme-calendar-header-color
title: Header text color
description: Text color for month/year and header buttons.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-calendar-weekday-color
title: Weekday label text color
description: Text color for weekday labels (Mon, Tue, Wed...).
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-calendar-week-color
title: Week number text color
description: Text color for week numbers.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-calendar-day-in-month-color
title: Day text color (current month)
description: Text color for days within the current month.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-calendar-day-outside-month-color
title: Day text color (outside month)
description: Text color for days outside the current month.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-calendar-day-states-heading
title: Day states
type: heading
level: 2
collapsed: false
-
id: nn-theme-calendar-weekend-bg
title: Weekend day background
description: Background color for weekend day cells.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-calendar-hover-bg
title: Hover background
description: Background color when hovering calendar buttons and days.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-calendar-day-today-color
title: Day text color (today)
description: Text color for today's date.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-calendar-day-today-bg
title: Today highlight background
description: Background color for today's date highlight.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-calendar-day-active-border-color
title: Selection outline color
description: Border color for active calendar outlines.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-calendar-day-active-border-width
title: Selection outline thickness
description: Border width for active calendar outlines.
type: variable-number-slider
default: 3
format: px
min: 1
max: 4
step: 1
-
id: nn-calendar-indicators-heading
title: Indicators and feature images
type: heading
level: 2
collapsed: false
-
id: nn-theme-calendar-note-indicator-color
title: Daily note indicator color
description: Color for the dot indicator shown on dates with a daily note.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-calendar-unfinished-task-indicator-color
title: Unfinished task indicator color
description: Color for the hollow indicator shown on dates with unfinished tasks.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-calendar-feature-image-text-color
title: Feature image text color
description: Text color for dates with feature images.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-calendar-feature-image-overlay-color
title: Feature image overlay color
description: Adds a color overlay to darken or tint feature images in calendar days and months. Set separate colors for light and dark mode.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-pane-divider-heading
title: Pane divider
description: Divider between navigation and file list panes in dual-pane layouts.
type: heading
level: 1
collapsed: true
-
id: nn-theme-divider-border-color
title: Pane divider border color
description: Border color between panes in horizontal and vertical split layouts.
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-divider-resize-handle-hover-bg
title: Pane divider resize handle background (hover)
description: Background color when hovering the pane divider to resize.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-mobile-heading
title: Mobile
description: Customize mobile interface elements.
type: heading
level: 1
collapsed: true
-
id: nn-theme-mobile-bg
title: Pane background
description: Background color of navigation and list panes on mobile.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-mobile-list-header-link-color
title: Header link color
description: Color for back button and clickable breadcrumb segments on mobile.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-mobile-list-header-breadcrumb-color
title: Header breadcrumb color
description: Color for current folder and separators in breadcrumb on mobile.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-mobile-list-header-breadcrumb-font-weight
title: Header breadcrumb font weight
description: Font weight for mobile header breadcrumb.
type: variable-number-slider
default: 600
min: 100
max: 900
step: 100
-
id: nn-theme-mobile-toolbar-glass-bg
title: iOS glass toolbar background
description: Background color of the iOS glass toolbar (used for border and background, supports transparency).
type: variable-themed-color
opacity: true
format: rgb
default-light: '#'
default-dark: '#'
-
id: nn-theme-mobile-toolbar-button-icon-color
title: Toolbar button icon color
description: Icon color in mobile toolbar.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-mobile-toolbar-button-active-bg
title: Toolbar button background (active)
description: Background color for active toolbar button.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
-
id: nn-theme-mobile-toolbar-button-active-icon-color
title: Toolbar button icon color (active)
description: Icon color for active toolbar button.
type: variable-themed-color
format: hex
default-light: '#'
default-dark: '#'
*/