9398 lines
276 KiB
CSS
9398 lines
276 KiB
CSS
/*
|
|
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 <https://www.gnu.org/licenses/>.
|
|
|
|
=========================================================================
|
|
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 */
|
|
|
|
/* Date header heights and padding */
|
|
--nn-date-header-height: 35px; /* First header */
|
|
--nn-date-header-height-subsequent: 50px; /* Headers with margin */
|
|
--nn-date-header-padding-top: 24px; /* Top padding for subsequent headers */
|
|
--nn-date-header-padding-bottom: 6px; /* Bottom padding for subsequent headers */
|
|
--nn-date-header-height-mobile: var(--nn-date-header-height);
|
|
--nn-date-header-height-subsequent-mobile: var(--nn-date-header-height-subsequent);
|
|
--nn-date-header-padding-top-mobile: var(--nn-date-header-padding-top);
|
|
--nn-date-header-padding-bottom-mobile: var(--nn-date-header-padding-bottom);
|
|
|
|
/* 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
|
|
======================================================================== */
|
|
|
|
/* -- Theme Foreground -- */
|
|
--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-pinned-shortcut-shadow-color: rgba(0, 0, 0, 0.03);
|
|
|
|
/* -- Navigation Calendar -- */
|
|
--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);
|
|
--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-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);
|
|
--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(--nn-theme-foreground-faded);
|
|
|
|
/* -- Folder & Tag 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-count-color: var(--nn-theme-foreground-muted);
|
|
--nn-theme-navitem-count-bg: transparent;
|
|
--nn-theme-navitem-count-border-radius: 8px;
|
|
--nn-theme-navitem-border-radius: 4px;
|
|
--nn-theme-navitem-border-width: 0px;
|
|
--nn-theme-navitem-count-border-width: 0px;
|
|
--nn-theme-navitem-custom-border-color: transparent;
|
|
--nn-theme-navitem-hover-border-color: transparent;
|
|
--nn-theme-navitem-selected-border-color: transparent;
|
|
--nn-theme-navitem-selected-inactive-border-color: var(--nn-theme-navitem-selected-border-color);
|
|
--nn-theme-navitem-count-border-color: transparent;
|
|
--nn-theme-navitem-selected-count-border-color: var(--nn-theme-navitem-count-border-color);
|
|
--nn-theme-navitem-selected-inactive-count-border-color: var(--nn-theme-navitem-selected-count-border-color);
|
|
--nn-theme-navitem-hover-bg: var(--background-modifier-hover);
|
|
--nn-theme-navitem-selected-bg: var(--text-selection);
|
|
--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-count-color: var(--nn-theme-navitem-count-color);
|
|
--nn-theme-navitem-selected-count-bg: var(--nn-theme-navitem-count-bg);
|
|
--nn-theme-navitem-selected-inactive-bg: var(--background-modifier-hover);
|
|
--nn-theme-navitem-selected-inactive-name-color: var(--nn-theme-navitem-name-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-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-tag-positive-bg: #00800033;
|
|
--nn-theme-tag-negative-bg: #ff000033;
|
|
|
|
/* -- Navigation Item Text Styling -- */
|
|
--nn-theme-navitem-file-name-font-weight: 400;
|
|
--nn-theme-navitem-name-font-weight: 400;
|
|
--nn-theme-navitem-count-font-weight: 400;
|
|
--nn-theme-navitem-custom-color-file-name-font-weight: 600;
|
|
--nn-theme-navitem-custom-color-name-font-weight: 600;
|
|
--nn-theme-navitem-folder-note-name-font-weight: 400;
|
|
--nn-theme-navitem-folder-note-name-decoration: underline;
|
|
--nn-theme-navitem-folder-note-name-hover-decoration: underline;
|
|
|
|
/* -- Pane Divider -- */
|
|
--nn-theme-divider-border-color: var(--divider-color);
|
|
--nn-theme-divider-resize-handle-hover-bg: var(--interactive-accent);
|
|
|
|
/* -- List Pane (Files) -- */
|
|
--nn-theme-list-bg: var(--background-primary);
|
|
--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;
|
|
--nn-theme-list-search-active-bg: var(--text-highlight-bg);
|
|
--nn-theme-list-search-border-color: var(--background-modifier-border);
|
|
--nn-theme-list-heading-color: var(--nn-theme-foreground-muted);
|
|
--nn-theme-list-heading-font-weight: 600;
|
|
--nn-theme-list-group-header-color: var(--nn-theme-foreground-muted);
|
|
--nn-theme-list-separator-color: var(--background-modifier-border);
|
|
|
|
/* -- File Items -- */
|
|
--nn-theme-file-name-color: var(--nn-theme-foreground);
|
|
--nn-theme-file-preview-color: var(--nn-theme-foreground-muted);
|
|
--nn-theme-file-task-icon-color: var(--nn-theme-navitem-icon-color);
|
|
--nn-theme-file-feature-border-radius: 4px;
|
|
--nn-theme-file-date-color: var(--nn-theme-foreground-faded);
|
|
--nn-theme-file-parent-color: var(--nn-theme-foreground-faded);
|
|
--nn-theme-file-tag-color: var(--nn-theme-foreground-faded);
|
|
--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-border-color: var(--nn-theme-file-tag-border-color);
|
|
--nn-theme-file-selected-property-border-color: var(--nn-theme-file-property-border-color);
|
|
--nn-theme-file-tag-custom-color-text-color: var(--nn-theme-navitem-name-color);
|
|
--nn-theme-file-tag-bg: transparent;
|
|
--nn-theme-file-property-color: var(--nn-theme-foreground-faded);
|
|
--nn-theme-file-property-bg: transparent;
|
|
--nn-theme-file-tag-border-radius: 10px;
|
|
--nn-theme-file-property-border-radius: 10px;
|
|
--nn-theme-file-border-radius: 8px;
|
|
--nn-theme-file-border-width: 0px;
|
|
--nn-theme-file-pill-border-width: 1px;
|
|
--nn-theme-file-selected-border-color: transparent;
|
|
--nn-theme-file-selected-inactive-border-color: var(--nn-theme-file-selected-border-color);
|
|
--nn-theme-file-selected-bg: var(--text-selection);
|
|
--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-parent-color: var(--nn-theme-foreground-muted);
|
|
--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-property-color: var(--nn-theme-foreground-muted);
|
|
--nn-theme-file-selected-property-bg: var(--nn-theme-file-property-bg);
|
|
--nn-theme-file-selected-inactive-bg: var(--background-modifier-hover);
|
|
--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-parent-color: var(--nn-theme-file-selected-parent-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);
|
|
|
|
/* -- File Item Text Styling -- */
|
|
--nn-theme-list-group-header-font-weight: 600;
|
|
--nn-theme-file-name-font-weight: 600;
|
|
--nn-theme-file-compact-name-font-weight: 400;
|
|
--nn-theme-file-preview-font-weight: 400;
|
|
--nn-theme-file-date-font-weight: 400;
|
|
--nn-theme-file-parent-font-weight: 400;
|
|
--nn-theme-file-tag-font-weight: 400;
|
|
|
|
/* -- 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);
|
|
|
|
/* -- 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);
|
|
|
|
/* -- Mobile Styles -- */
|
|
--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-bg: var(--background-secondary);
|
|
--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);
|
|
--nn-theme-mobile-toolbar-glass-bg: var(--background-primary);
|
|
|
|
/* -- 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;
|
|
}
|
|
|
|
/* 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-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-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-date-header-height-mobile, var(--nn-date-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);
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-navigation-pane {
|
|
border-right: none;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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 .nn-navigation-pane {
|
|
border-right: none;
|
|
}
|
|
|
|
.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: 10;
|
|
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% !important;
|
|
max-width: 100% !important;
|
|
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
|
|
======================================================================== */
|
|
|
|
/* Make navigation pane flexible on mobile to handle resize gracefully */
|
|
.notebook-navigator-mobile .nn-navigation-pane {
|
|
flex: 1;
|
|
background-color: var(--nn-theme-nav-bg) !important;
|
|
}
|
|
|
|
/* Hide resize handle on mobile */
|
|
.notebook-navigator-mobile .nn-resize-handle {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 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 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-icon[data-has-color='true'] svg {
|
|
stroke-width: 2.4;
|
|
}
|
|
|
|
.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-folder-note {
|
|
text-decoration: var(--nn-theme-navitem-folder-note-name-decoration) !important;
|
|
}
|
|
|
|
.nn-pane-header-folder-note:hover {
|
|
cursor: pointer;
|
|
text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration) !important;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Mobile Headers + Breadcrumb
|
|
======================================================================== */
|
|
|
|
/* Mobile header - adjust for back button */
|
|
.notebook-navigator-mobile .nn-pane-header {
|
|
flex-shrink: 0;
|
|
min-height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 var(--nn-file-item-padding-horizontal);
|
|
background-color: var(--nn-theme-list-bg);
|
|
}
|
|
|
|
/* Simplified mobile headers */
|
|
.notebook-navigator-mobile .nn-pane-header-simple {
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-navigation-pane .nn-pane-header-simple {
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.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 .nn-back-button {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 44px;
|
|
height: 44px;
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
padding: 10px;
|
|
z-index: 1;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Increase stroke width for back button arrow and apply link color */
|
|
.notebook-navigator-mobile .nn-back-button svg {
|
|
stroke: var(--nn-theme-mobile-list-header-link-color) !important;
|
|
width: 20px !important; /* Default size for Android */
|
|
height: 20px !important;
|
|
}
|
|
|
|
/* iOS/iPadOS-specific back button adjustments */
|
|
.notebook-navigator-mobile:not(.notebook-navigator-android) .nn-back-button {
|
|
padding: 4px !important; /* 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) .nn-back-button svg {
|
|
width: 36px !important;
|
|
height: 36px !important;
|
|
}
|
|
|
|
/* 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 10px;
|
|
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 */
|
|
.nn-search-input {
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 4px 60px 4px 36px !important;
|
|
font-size: 13px;
|
|
color: var(--nn-theme-file-selected-name-color) !important;
|
|
background: var(--nn-theme-list-bg) !important;
|
|
border: 1px solid var(--nn-theme-list-search-border-color) !important;
|
|
border-radius: 999px !important;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.nn-search-input-container--has-shortcut .nn-search-input {
|
|
padding-right: 84px !important;
|
|
}
|
|
|
|
/* Active search state - when there's a search query */
|
|
.nn-search-input.nn-search-active {
|
|
background: var(--nn-theme-list-search-active-bg) !important;
|
|
}
|
|
|
|
/* Maintain highlight background on hover when search is active */
|
|
.nn-search-input.nn-search-active:hover {
|
|
background: var(--nn-theme-list-search-active-bg) !important;
|
|
}
|
|
|
|
/* Focus state */
|
|
.nn-search-input:focus {
|
|
border-color: var(--nn-theme-list-search-border-color) !important;
|
|
box-shadow: 0 0 0 2px var(--nn-theme-list-search-border-color) !important;
|
|
}
|
|
|
|
.nn-search-input::placeholder {
|
|
color: var(--nn-theme-list-header-breadcrumb-color) !important;
|
|
}
|
|
|
|
/* 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 .nn-search-input {
|
|
height: 36px;
|
|
font-size: 16px; /* Prevent zoom on iOS */
|
|
padding: 4px 60px 4px 36px !important;
|
|
border-radius: 999px !important;
|
|
}
|
|
|
|
/* Mobile search icon */
|
|
.notebook-navigator-mobile .nn-search-input-icon {
|
|
top: 10px;
|
|
}
|
|
|
|
/* Mobile clear button */
|
|
.notebook-navigator-mobile .nn-search-clear-button {
|
|
top: 0;
|
|
}
|
|
|
|
.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 svg,
|
|
.nn-search-star-button svg,
|
|
.nn-search-help-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.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,
|
|
.notebook-navigator-mobile .nn-search-star-button,
|
|
.notebook-navigator-mobile .nn-search-help-button {
|
|
top: 0;
|
|
height: 36px;
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-search-clear-button {
|
|
right: 10px;
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-search-star-button {
|
|
right: 44px;
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-search-help-button {
|
|
right: 10px;
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-search-input-container--has-shortcut .nn-search-input {
|
|
padding-right: 94px !important;
|
|
}
|
|
|
|
/* 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 */
|
|
.nn-icon-button {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
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 !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* 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 {
|
|
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;
|
|
}
|
|
|
|
/* iPad-specific adjustment for icon buttons in headers */
|
|
@media (min-width: 768px) {
|
|
.notebook-navigator-mobile .nn-header-actions button.nn-icon-button {
|
|
/* Maintain same dimensions as desktop for consistency */
|
|
padding: 0 8px;
|
|
width: auto;
|
|
min-width: 34px;
|
|
height: 25px;
|
|
}
|
|
}
|
|
|
|
/* Icon button hover state - subtle background on hover - desktop only */
|
|
.nn-desktop .nn-icon-button:hover {
|
|
background-color: var(--nn-theme-header-button-hover-bg) !important;
|
|
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" */
|
|
.nn-icon-button-active {
|
|
background-color: var(--nn-theme-header-button-active-bg) !important;
|
|
color: var(--nn-theme-header-button-active-icon-color) !important;
|
|
}
|
|
|
|
/* Active button icon color */
|
|
.nn-icon-button-active svg {
|
|
stroke: var(--nn-theme-header-button-active-icon-color) !important;
|
|
}
|
|
|
|
/* 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 {
|
|
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 {
|
|
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;
|
|
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 {
|
|
-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;
|
|
/* Extend slightly beyond bottom item bounds (height rounding issue) to prevent hairline gaps when zoomed */
|
|
bottom: -0.2px;
|
|
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;
|
|
}
|
|
|
|
/* Zero shared corners when consecutive background overlays touch */
|
|
.nn-navitem:is(.nn-has-custom-background, .nn-has-search-match) + .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match) {
|
|
--nn-navitem-top-left-radius: 0;
|
|
--nn-navitem-top-right-radius: 0;
|
|
}
|
|
|
|
.nn-navitem:is(.nn-has-custom-background, .nn-has-search-match):has(+ .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match)) {
|
|
--nn-navitem-bottom-left-radius: 0;
|
|
--nn-navitem-bottom-right-radius: 0;
|
|
}
|
|
|
|
/* Apply the same corner trimming within the virtualized row wrapper */
|
|
.nn-virtual-nav-item:has(> .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match))
|
|
+ .nn-virtual-nav-item:has(> .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match))
|
|
> .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match) {
|
|
--nn-navitem-top-left-radius: 0;
|
|
--nn-navitem-top-right-radius: 0;
|
|
}
|
|
|
|
.nn-virtual-nav-item:has(> .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match)):has(
|
|
+ .nn-virtual-nav-item > .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match)
|
|
)
|
|
> .nn-navitem:is(.nn-has-custom-background, .nn-has-search-match) {
|
|
--nn-navitem-bottom-left-radius: 0;
|
|
--nn-navitem-bottom-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-foreground-faint);
|
|
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;
|
|
/* Extend slightly beyond bottom item bounds (height rounding issue) to prevent hairline gaps when zoomed */
|
|
bottom: -0.2px;
|
|
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: 0;
|
|
bottom: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
background-color: var(--nn-theme-navitem-hover-bg);
|
|
border-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);
|
|
}
|
|
|
|
.nn-navitem-icon[data-has-color='true'] svg {
|
|
stroke-width: 2.4;
|
|
}
|
|
|
|
/* 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) !important;
|
|
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) !important;
|
|
}
|
|
|
|
/* Folder with folder note */
|
|
.nn-navitem-name.nn-has-folder-note {
|
|
font-weight: var(--nn-theme-navitem-folder-note-name-font-weight) !important;
|
|
text-decoration: var(--nn-theme-navitem-folder-note-name-decoration) !important;
|
|
}
|
|
|
|
/* Folder with folder note and custom color uses custom color weight */
|
|
.nn-navitem-name.nn-has-folder-note.nn-has-custom-color {
|
|
font-weight: var(--nn-theme-navitem-custom-color-name-font-weight) !important;
|
|
}
|
|
|
|
/* 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) !important;
|
|
}
|
|
|
|
/* Spacer element to push count to the end */
|
|
.nn-navitem-spacer {
|
|
flex: 1;
|
|
min-width: 8px; /* Minimum space between name and count */
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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 !important;
|
|
width: 18px !important;
|
|
min-height: 0 !important;
|
|
min-width: 0 !important;
|
|
padding: 0 !important;
|
|
border-radius: 50% !important;
|
|
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-name {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.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 .nn-shortcut-label {
|
|
font-weight: var(--nn-theme-navitem-file-name-font-weight);
|
|
}
|
|
|
|
.nn-shortcut-item .nn-shortcut-label[data-has-color='true'] {
|
|
font-weight: var(--nn-theme-navitem-custom-color-file-name-font-weight) !important;
|
|
}
|
|
|
|
.nn-shortcut-item--missing .nn-shortcut-label {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* Styles for shortcut labels that have an associated folder note */
|
|
.nn-shortcut-item .nn-navitem-name.nn-has-folder-note .nn-shortcut-label {
|
|
font-weight: var(--nn-theme-navitem-folder-note-name-font-weight) !important;
|
|
text-decoration: var(--nn-theme-navitem-folder-note-name-decoration) !important;
|
|
}
|
|
|
|
/* Folder note shortcuts with custom color use custom color weight */
|
|
.nn-shortcut-item .nn-navitem-name.nn-has-folder-note.nn-has-custom-color .nn-shortcut-label {
|
|
font-weight: var(--nn-theme-navitem-custom-color-file-name-font-weight) !important;
|
|
}
|
|
|
|
/* 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) !important;
|
|
}
|
|
|
|
.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) !important;
|
|
}
|
|
|
|
.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-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);
|
|
}
|
|
|
|
.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,
|
|
.nn-navigation-calendar-month .nn-navigation-calendar-quarter-label {
|
|
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;
|
|
}
|
|
|
|
.nn-navigation-calendar-period-button,
|
|
.nn-navigation-calendar-nav-button,
|
|
.nn-navigation-calendar-today,
|
|
.nn-navigation-calendar-year-month,
|
|
.nn-navigation-calendar-weeknumber-button,
|
|
.nn-navigation-calendar-day {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border: none !important;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
box-shadow: none !important;
|
|
outline: none;
|
|
}
|
|
|
|
.nn-navigation-calendar-period-button {
|
|
background: var(--nn-calendar-header-chip-bg) !important;
|
|
color: var(--nn-theme-calendar-header-color);
|
|
font: inherit;
|
|
padding: 2px 1px;
|
|
line-height: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nn-navigation-calendar-period-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 1px;
|
|
border-radius: 6px;
|
|
background-color: var(--nn-calendar-header-chip-bg);
|
|
line-height: 1;
|
|
}
|
|
|
|
.nn-navigation-calendar-period-button.has-period-note {
|
|
text-decoration-line: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.nn-navigation-calendar-quarter-button.has-period-note {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nn-navigation-calendar-quarter-button.has-period-note .nn-navigation-calendar-quarter-value {
|
|
text-decoration-line: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.nn-navigation-calendar-period-button.is-active-editor-file,
|
|
.nn-navigation-calendar-weeknumber.is-active-editor-file {
|
|
box-shadow: inset 0 0 0 2px var(--nn-calendar-active-editor-border-color) !important;
|
|
}
|
|
|
|
.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-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 !important;
|
|
height: 20px !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.nn-navigation-calendar-nav-prev {
|
|
width: 24px !important;
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
.nn-navigation-calendar-nav-next {
|
|
width: 24px !important;
|
|
justify-content: flex-end !important;
|
|
}
|
|
|
|
.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 !important;
|
|
color: var(--nn-theme-foreground-muted);
|
|
padding: 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
.nn-navigation-calendar-today {
|
|
background: transparent !important;
|
|
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;
|
|
}
|
|
|
|
.nn-navigation-calendar-year-nav-button {
|
|
width: 24px !important;
|
|
height: var(--nn-calendar-nav-button-size) !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.nn-navigation-calendar-year-month {
|
|
position: relative;
|
|
background-color: transparent !important;
|
|
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;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
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-year-month-label {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
max-width: 100%;
|
|
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 {
|
|
box-shadow: inset 0 0 0 2px var(--nn-calendar-active-editor-border-color) !important;
|
|
color: var(--nn-theme-calendar-day-in-month-color);
|
|
}
|
|
|
|
.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) !important;
|
|
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;
|
|
column-gap: 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));
|
|
column-gap: 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;
|
|
}
|
|
|
|
.nn-navigation-calendar-weeknumber-button {
|
|
width: 100%;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.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;
|
|
background-color: 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: -0.5px;
|
|
}
|
|
|
|
.nn-navigation-calendar-day-cell.is-weekend.has-weekend-after::before {
|
|
inset-inline-end: -0.5px;
|
|
}
|
|
|
|
.nn-navigation-calendar-day-cell.is-weekend.has-weekend-above::before {
|
|
inset-block-start: -0.5px;
|
|
}
|
|
|
|
.nn-navigation-calendar-day-cell.is-weekend.has-weekend-below::before {
|
|
inset-block-end: -0.5px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.nn-navigation-calendar-day {
|
|
position: relative;
|
|
height: auto;
|
|
aspect-ratio: 1 / 1;
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
width: 100%;
|
|
padding: 0 !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: transparent !important;
|
|
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) !important;
|
|
}
|
|
|
|
.nn-navigation-calendar-help:hover {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.nn-navigation-calendar-month-help:hover {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
: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 !important;
|
|
min-width: 0 !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
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) !important;
|
|
min-width: var(--nn-calendar-nav-button-size) !important;
|
|
}
|
|
|
|
.nn-navigation-calendar-today:hover {
|
|
background-color: var(--nn-theme-calendar-hover-bg) !important;
|
|
}
|
|
|
|
.nn-navigation-calendar-period-button:hover,
|
|
.nn-navigation-calendar-weeknumber-button:hover {
|
|
filter: brightness(1.05);
|
|
background-color: var(--nn-theme-calendar-hover-bg) !important;
|
|
}
|
|
|
|
.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) !important;
|
|
}
|
|
|
|
.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) !important;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
box-shadow: inset 0 0 0 2px var(--nn-calendar-active-editor-border-color) !important;
|
|
}
|
|
|
|
.nn-navigation-calendar[data-highlight-today='true']
|
|
.nn-navigation-calendar-day.is-today.is-active-editor-file:not(.has-feature-image):not(.has-feature-image-key)::before {
|
|
box-shadow: inset 0 0 0 2px var(--nn-calendar-active-editor-border-color);
|
|
}
|
|
|
|
/* 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 !important;
|
|
}
|
|
|
|
.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-right-sidebar .nn-navigation-calendar-year-grid {
|
|
width: 100%;
|
|
}
|
|
|
|
.nn-calendar-right-sidebar .nn-navigation-calendar-year-month {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Header mode: compact yearly (right sidebar)
|
|
======================================================================== */
|
|
|
|
.nn-calendar-right-sidebar .nn-navigation-calendar[data-compact-header='true'] .nn-navigation-calendar-header {
|
|
height: auto;
|
|
min-height: var(--nn-calendar-header-row-height);
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.nn-calendar-right-sidebar .nn-navigation-calendar[data-compact-header='true'] .nn-navigation-calendar-month {
|
|
width: 100%;
|
|
justify-content: center;
|
|
font-size: calc(var(--nn-calendar-header-font-size) + 2px);
|
|
}
|
|
|
|
.nn-calendar-right-sidebar
|
|
.nn-navigation-calendar[data-compact-header='true']
|
|
.nn-navigation-calendar-month
|
|
.nn-navigation-calendar-period-month {
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.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) !important;
|
|
}
|
|
|
|
.nn-list-title-label--folder-note:hover {
|
|
cursor: pointer;
|
|
text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration) !important;
|
|
}
|
|
|
|
/* 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;
|
|
|
|
/* CSS Custom Properties for file items - themes can override these */
|
|
/* Isolate layout and style calculations per item while allowing ::before to extend beyond bounds */
|
|
contain: layout style;
|
|
}
|
|
|
|
/* 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 */
|
|
}
|
|
|
|
.nn-file.nn-has-custom-background::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0px;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
/* Extend slightly beyond bottom item bounds (height rounding issue) to prevent hairline gaps when zoomed */
|
|
bottom: -0.2px;
|
|
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(> .nn-file.nn-has-custom-background)::after,
|
|
.nn-virtual-file-item:has(+ .nn-virtual-file-item > .nn-file.nn-has-custom-background)::after {
|
|
display: none;
|
|
}
|
|
|
|
.nn-virtual-file-item:has(> .nn-file.nn-has-custom-background)
|
|
+ .nn-virtual-file-item:has(> .nn-file.nn-has-custom-background)
|
|
> .nn-file.nn-has-custom-background {
|
|
--nn-file-top-left-radius: 0;
|
|
--nn-file-top-right-radius: 0;
|
|
}
|
|
|
|
.nn-virtual-file-item:has(> .nn-file.nn-has-custom-background):has(+ .nn-virtual-file-item > .nn-file.nn-has-custom-background)
|
|
> .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;
|
|
}
|
|
|
|
.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 {
|
|
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 */
|
|
min-height: var(--nn-file-thumbnail-min-size); /* Minimum height to match minimum thumbnail size */
|
|
justify-content: flex-start; /* Top-align content */
|
|
/* No align-self - let it stretch naturally */
|
|
}
|
|
|
|
/* 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 */
|
|
}
|
|
|
|
/* 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;
|
|
min-height: calc(var(--nn-file-title-line-height) * var(--filename-rows, 1));
|
|
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-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);
|
|
}
|
|
|
|
.nn-file-icon.nn-file-icon-unfinished-task[data-has-color='false'] {
|
|
color: var(--nn-theme-file-task-icon-color);
|
|
}
|
|
|
|
.nn-file.nn-selected .nn-file-icon.nn-file-icon-unfinished-task[data-has-color='false'] {
|
|
color: var(--nn-theme-file-task-icon-color);
|
|
}
|
|
|
|
.nn-file-icon[data-has-color='true'] svg {
|
|
stroke-width: 2.4;
|
|
}
|
|
|
|
/* 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 2 title rows: align with compact padding */
|
|
.nn-quick-actions-panel.nn-compact-mode[data-title-rows='2'],
|
|
.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);
|
|
}
|
|
|
|
/* Date + preview (same line): match legacy spacing. */
|
|
.nn-file-second-line > .nn-file-date + .nn-file-preview {
|
|
margin-inline-start: 8px;
|
|
}
|
|
|
|
/* Date + parent folder (same line): match legacy spacing when dot separator is disabled. */
|
|
.nn-file-second-line > .nn-file-date + .nn-parent-folder[data-dot-separator='false'] {
|
|
margin-inline-start: 8px;
|
|
}
|
|
|
|
/* Date + parent folder (same line): dot separator */
|
|
.nn-file-second-line > .nn-file-date + .nn-parent-folder[data-dot-separator='true']::before {
|
|
content: '•';
|
|
flex-shrink: 0;
|
|
margin-inline-end: 4px;
|
|
font-size: 0.65em;
|
|
}
|
|
|
|
/* 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;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Multi-line preview - always take up configured number of lines */
|
|
.nn-file-preview:not(.nn-file-second-line .nn-file-preview) {
|
|
min-height: calc(var(--nn-file-multiline-text-line-height) * var(--preview-rows, 1));
|
|
height: calc(var(--nn-file-multiline-text-line-height) * var(--preview-rows, 1));
|
|
}
|
|
|
|
/* Preview on same line as date - match date line-height for alignment */
|
|
.nn-file-second-line .nn-file-preview {
|
|
line-height: var(--nn-file-single-text-line-height);
|
|
display: block;
|
|
white-space: nowrap;
|
|
word-break: normal;
|
|
}
|
|
|
|
/* 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'] {
|
|
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-icon[data-has-color='true'] svg {
|
|
stroke-width: 2.4;
|
|
}
|
|
|
|
.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;
|
|
height: 20px;
|
|
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);
|
|
}
|
|
|
|
.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 - When date, preview, and image are all disabled
|
|
======================================================================== */
|
|
|
|
/* 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 */
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* 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 item height minus total padding */
|
|
--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--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%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
/* Source: src/styles/sections/list-date-headers.css */
|
|
|
|
/* ========================================================================
|
|
Date Group Headers
|
|
======================================================================== */
|
|
|
|
/* Date group headers for grouped files */
|
|
.nn-date-group-header {
|
|
height: var(--nn-date-header-height-subsequent-mobile, var(--nn-date-header-height-subsequent));
|
|
box-sizing: border-box;
|
|
padding: var(--nn-date-header-padding-top-mobile, var(--nn-date-header-padding-top)) var(--nn-file-item-padding-horizontal)
|
|
var(--nn-date-header-padding-bottom-mobile, var(--nn-date-header-padding-bottom)) 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 !important;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* First date header - no top margin or extra padding for first group */
|
|
.nn-date-group-header.nn-first-header {
|
|
height: var(--nn-date-header-height-mobile, var(--nn-date-header-height));
|
|
padding: 0 var(--nn-file-item-padding-horizontal);
|
|
align-items: center;
|
|
}
|
|
|
|
.nn-date-group-header-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--nn-date-header-icon-size, var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)));
|
|
height: var(--nn-date-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-date-group-header-icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.nn-date-group-header-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.nn-date-group-header-text--folder-note {
|
|
text-decoration: var(--nn-theme-navitem-folder-note-name-decoration) !important;
|
|
}
|
|
|
|
.nn-date-group-header-text--folder-note:hover {
|
|
cursor: pointer;
|
|
text-decoration: var(--nn-theme-navitem-folder-note-name-hover-decoration) !important;
|
|
}
|
|
|
|
.nn-pinned-section-header {
|
|
align-items: center;
|
|
}
|
|
|
|
/* 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/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;
|
|
/* Extend slightly beyond bottom item bounds (height rounding issue) to prevent hairline gaps when zoomed */
|
|
bottom: -0.2px;
|
|
/* Pre-composited solid color prevents hairlines by blending alpha with pane background */
|
|
background-color: var(--nn-selected-file-bg-color);
|
|
border-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;
|
|
/* Extend slightly beyond bottom item bounds (height rounding issue) to prevent hairline gaps when zoomed */
|
|
bottom: -0.2px;
|
|
/* 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;
|
|
}
|
|
|
|
/* Disable drag and drop feedback on mobile */
|
|
.notebook-navigator-mobile [draggable='true'] {
|
|
cursor: default !important;
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-drag-over {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* 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));
|
|
}
|
|
|
|
/* Empty placeholder to hide browser's default drag preview */
|
|
.nn-drag-empty-placeholder {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
left: -9999px;
|
|
top: -9999px;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Drag ghost element - follows the cursor during drag */
|
|
.nn-drag-ghost {
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 999999;
|
|
opacity: 0.9;
|
|
will-change: transform;
|
|
left: 0;
|
|
top: 0;
|
|
transform: translate(var(--nn-drag-ghost-x, -1000px), var(--nn-drag-ghost-y, -1000px));
|
|
}
|
|
|
|
/* Badge shown on drag ghost for multiple files - Apple-style red badge */
|
|
.nn-drag-ghost-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 on drag ghost for single file/folder - dark circular background */
|
|
.nn-drag-ghost-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-ghost-icon {
|
|
background-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
/* Style the Lucide icon inside drag ghost - white icon */
|
|
.nn-drag-ghost-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));
|
|
}
|
|
/* 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-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-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-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-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;
|
|
}
|
|
|
|
.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 {
|
|
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-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);
|
|
}
|
|
|
|
/* What's new content layout */
|
|
.modal.nn-whats-new-modal .modal-content {
|
|
padding: 16px;
|
|
}
|
|
|
|
.modal.nn-whats-new-modal .modal-close-button {
|
|
z-index: 10;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* What's new header */
|
|
.nn-whats-new-header {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* What's new scrollable container */
|
|
.nn-whats-new-scroll {
|
|
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;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* Version container - last child no border */
|
|
.nn-whats-new-version:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* Version header */
|
|
.nn-whats-new-version h3 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--nn-theme-foreground);
|
|
margin: 0 0 4px 0;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Version date */
|
|
.nn-whats-new-date {
|
|
color: var(--nn-theme-foreground-muted);
|
|
font-size: 12px;
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Release banner image */
|
|
.nn-whats-new-banner {
|
|
position: relative;
|
|
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-banner-image {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* 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-play {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 52px;
|
|
height: 36px;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 8px;
|
|
background-color: #ff0000;
|
|
opacity: 0.9;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.nn-whats-new-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-whats-new-youtube-link:hover .nn-whats-new-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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Mobile header size for the modal title */
|
|
.nn-whats-new-header {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Version header and date sizes on mobile */
|
|
.nn-whats-new-version h3 {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.nn-whats-new-date {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/* Obsidian mobile app adjustments */
|
|
.is-mobile {
|
|
/* Modal title */
|
|
.nn-whats-new-header {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Date line */
|
|
.nn-whats-new-date {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
/* 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);
|
|
}
|
|
|
|
/* Icon picker content layout */
|
|
.modal.nn-icon-picker-modal .modal-content {
|
|
padding: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Icon picker modal height control */
|
|
.modal.nn-icon-picker-modal {
|
|
height: auto;
|
|
}
|
|
|
|
/* Prevent icon picker content overflow */
|
|
.modal.nn-icon-picker-modal .modal-content {
|
|
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: 13px;
|
|
font-weight: 400;
|
|
color: var(--nn-theme-foreground-muted);
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* 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 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 .nn-property-keys-search {
|
|
margin: 0;
|
|
height: 32px;
|
|
padding: 4px 36px 4px 12px !important;
|
|
border-radius: 999px !important;
|
|
border: 1px solid var(--nn-theme-list-search-border-color) !important;
|
|
}
|
|
|
|
.modal.nn-property-keys-modal .nn-property-keys-search.is-active {
|
|
background: var(--nn-theme-list-search-active-bg) !important;
|
|
}
|
|
|
|
.modal.nn-property-keys-modal .nn-property-keys-search:focus {
|
|
border-color: var(--nn-theme-list-search-border-color) !important;
|
|
box-shadow: 0 0 0 2px var(--nn-theme-list-search-border-color) !important;
|
|
}
|
|
|
|
.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-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;
|
|
/* Isolate layout and style calculations per item while allowing overlays to extend beyond bounds */
|
|
contain: layout style;
|
|
}
|
|
/* Source: src/styles/sections/settings-page.css */
|
|
|
|
/* ========================================================================
|
|
Settings Page Styles
|
|
======================================================================== */
|
|
|
|
/* Settings page indentation for sub-settings */
|
|
.nn-sub-settings {
|
|
margin-inline-start: 20px;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
/* Restore bottom padding on last setting inside sub-settings containers
|
|
(Obsidian's .setting-item:last-child removes it, but nested containers need it) */
|
|
.nn-sub-settings > .setting-item:last-child {
|
|
padding-bottom: var(--size-4-4);
|
|
}
|
|
|
|
/* Settings layout root */
|
|
.nn-settings-tab-root {
|
|
display: block;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Settings tabs layout and navigation */
|
|
.nn-settings-tabs {
|
|
display: block;
|
|
min-height: 0;
|
|
}
|
|
|
|
.nn-settings-tabs-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-2-3);
|
|
flex-shrink: 0;
|
|
margin-bottom: var(--size-4-4);
|
|
}
|
|
|
|
.nn-settings-tabs-nav-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-2-3);
|
|
}
|
|
|
|
.nn-settings-tabs-nav-row.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.nn-settings-tabs-nav-row.is-icons-hidden .nn-settings-tab-icon {
|
|
display: none;
|
|
}
|
|
|
|
/* Separator between primary and secondary tab rows */
|
|
.nn-settings-tabs-nav-secondary {
|
|
gap: var(--size-2-2);
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
padding-top: var(--size-2-3);
|
|
}
|
|
|
|
.nn-settings-tab-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--size-2-2);
|
|
padding: 6px 12px;
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
/* Icon inside settings tab buttons */
|
|
.nn-settings-tab-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nn-settings-tab-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.nn-settings-tab-button.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.nn-settings-tab-button-primary.is-group-active {
|
|
background-color: transparent;
|
|
color: var(--interactive-accent);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.nn-settings-tab-button-primary.is-group-active:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
opacity: 1;
|
|
}
|
|
|
|
.nn-settings-tab-button-secondary {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.nn-settings-tab-button-secondary.is-active {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.nn-settings-tabs-content {
|
|
position: static;
|
|
min-height: 0;
|
|
overflow: visible;
|
|
box-sizing: border-box;
|
|
padding-inline-end: 0;
|
|
}
|
|
|
|
/* Hide tabs by default, show only active tab */
|
|
.nn-settings-tab {
|
|
display: none;
|
|
}
|
|
|
|
.nn-settings-tab.is-active {
|
|
display: block;
|
|
}
|
|
|
|
/* Settings section header spacing */
|
|
.setting-item-heading {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
/* First settings header - no top margin */
|
|
.setting-item-heading:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Setting name marker appended to setting names */
|
|
.nn-settings-tab-root .setting-item-name.nn-setting-name-marker::after {
|
|
content: ' ' attr(data-nn-setting-marker);
|
|
color: var(--text-muted);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.mod-rtl .nn-settings-tab-root .setting-item-name.nn-setting-name-marker::after {
|
|
content: '';
|
|
}
|
|
|
|
.mod-rtl .nn-settings-tab-root .setting-item-name.nn-setting-name-marker::before {
|
|
content: attr(data-nn-setting-marker) ' ';
|
|
color: var(--text-muted);
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Dim disabled calendar pattern text inputs */
|
|
.nn-settings-tab-root .setting-item.nn-setting-disabled input[type='text']:disabled {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Container for additional info below settings */
|
|
.nn-setting-info-container {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.nn-setting-info-container.nn-setting-info-centered.setting-item {
|
|
justify-content: center;
|
|
}
|
|
|
|
.nn-setting-info-container.nn-setting-info-centered .setting-item-info,
|
|
.nn-setting-info-container.nn-setting-info-centered .setting-item-description {
|
|
text-align: center;
|
|
}
|
|
|
|
.nn-sub-settings > .setting-item.nn-setting-property-keys-info:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* 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-sections {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-4);
|
|
}
|
|
|
|
.nn-toolbar-visibility-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-2-2);
|
|
}
|
|
|
|
.nn-toolbar-visibility-group-label {
|
|
font-size: var(--font-ui-small);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--nn-theme-foreground-muted);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.nn-toolbar-visibility-toggle {
|
|
position: relative;
|
|
padding: 0;
|
|
/* Override mobile toolbar button dimensions for settings */
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
min-width: 32px !important;
|
|
min-height: 32px !important;
|
|
}
|
|
|
|
.nn-toolbar-visibility-toggle:not(.nn-mobile-toolbar-button-active) {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.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 {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
/* 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 */
|
|
.nn-youtube-button {
|
|
background-color: #ff0000 !important;
|
|
border: none !important;
|
|
color: #ffffff !important;
|
|
min-width: 54px;
|
|
}
|
|
|
|
.nn-youtube-button:hover {
|
|
background-color: #cc0000 !important;
|
|
}
|
|
|
|
.nn-youtube-button svg {
|
|
color: #ffffff !important;
|
|
fill: #ffffff !important;
|
|
stroke: none !important;
|
|
}
|
|
|
|
.is-mobile .nn-toolbar-visibility-toggle {
|
|
width: 44px !important;
|
|
height: 44px !important;
|
|
min-width: 44px !important;
|
|
min-height: 44px !important;
|
|
}
|
|
|
|
.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 .nn-toolbar-visibility-toggle {
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
min-width: 40px !important;
|
|
min-height: 40px !important;
|
|
}
|
|
|
|
.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-value {
|
|
margin-left: 12px;
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--nn-theme-foreground-muted);
|
|
min-width: 48px;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* 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);
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Remove duplicate borders when statistics are displayed */
|
|
.nn-stats-section {
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Ensure proper spacing from previous sections */
|
|
.nn-stats-section.setting-item {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Advanced > Local cache: center text by removing the empty control column */
|
|
.nn-local-cache-stats-setting .setting-item-control {
|
|
display: none;
|
|
}
|
|
|
|
.nn-local-cache-stats-setting .setting-item-info {
|
|
width: 100%;
|
|
}
|
|
|
|
.nn-local-cache-stats-setting .nn-stats-text {
|
|
text-align: center;
|
|
}
|
|
/* 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-rgb-label,
|
|
.nn-rgb-title,
|
|
.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, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
|
|
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
|
|
background-size: 10px 10px;
|
|
background-position:
|
|
0 0,
|
|
5px 5px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.theme-dark .nn-checkerboard,
|
|
.theme-dark .nn-preview-color.nn-no-color {
|
|
background-image:
|
|
linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444),
|
|
linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444);
|
|
background-color: #222;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* RGB sliders section */
|
|
.nn-rgb-section,
|
|
.nn-color-preview-section {
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.nn-rgb-section {
|
|
margin-bottom: auto; /* Push everything below to the bottom */
|
|
}
|
|
|
|
.nn-rgb-title {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.nn-rgb-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.nn-rgb-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.nn-rgb-label {
|
|
width: 16px;
|
|
}
|
|
|
|
.nn-rgb-slider {
|
|
flex: 1;
|
|
height: 4px;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: var(--background-modifier-border);
|
|
border-radius: 2px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Slider thumb */
|
|
.nn-rgb-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: var(--interactive-accent);
|
|
cursor: pointer;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.nn-rgb-slider::-moz-range-thumb {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: var(--interactive-accent);
|
|
cursor: pointer;
|
|
border: none;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* RGB value display */
|
|
.nn-rgb-value {
|
|
width: 32px;
|
|
text-align: right;
|
|
font-size: 11px;
|
|
color: var(--nn-theme-foreground-muted);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
/* Color gradients for sliders */
|
|
.nn-rgb-slider-r {
|
|
background: linear-gradient(to right, #000000, #ff0000);
|
|
}
|
|
|
|
.nn-rgb-slider-g {
|
|
background: linear-gradient(to right, #000000, #00ff00);
|
|
}
|
|
|
|
.nn-rgb-slider-b {
|
|
background: linear-gradient(to right, #000000, #0000ff);
|
|
}
|
|
|
|
/* Hex input section */
|
|
.nn-hex-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.nn-hex-title {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
height: 17px; /* Match the preview label height for alignment */
|
|
}
|
|
|
|
.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,
|
|
.nn-recent-section {
|
|
margin-top: auto; /* Align to bottom */
|
|
}
|
|
|
|
.nn-preset-colors,
|
|
.nn-recent-colors {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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/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-date-header-height-mobile: calc(var(--nn-date-header-height) + 8px);
|
|
--nn-date-header-height-subsequent-mobile: calc(var(--nn-date-header-height-subsequent) + 8px);
|
|
--nn-date-header-padding-top-mobile: calc(var(--nn-date-header-padding-top) + 4px);
|
|
--nn-date-header-padding-bottom-mobile: calc(var(--nn-date-header-padding-bottom) + 2px);
|
|
}
|
|
|
|
/* 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-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; Obsidian 1.11+ iOS overrides this via platform stylesheet. */
|
|
.notebook-navigator-mobile .nn-mobile-toolbar {
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.nn-pane-bottom-toolbar {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-mobile-toolbar-left,
|
|
.notebook-navigator-mobile .nn-mobile-toolbar-right,
|
|
.notebook-navigator-mobile .nn-mobile-toolbar-pill,
|
|
.notebook-navigator-mobile .nn-mobile-toolbar-circle {
|
|
display: contents;
|
|
}
|
|
|
|
/* 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 */
|
|
.nn-mobile-toolbar-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
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 !important;
|
|
}
|
|
|
|
.nn-mobile-toolbar-button-circle {
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* Mobile toolbar button icons */
|
|
.nn-mobile-toolbar-button svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
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 */
|
|
.nn-mobile-toolbar-button-active {
|
|
color: var(--nn-theme-mobile-toolbar-button-active-icon-color) !important;
|
|
background-color: var(--nn-theme-mobile-toolbar-button-active-bg) !important;
|
|
}
|
|
|
|
.nn-mobile-toolbar-button-active svg {
|
|
stroke: var(--nn-theme-mobile-toolbar-button-active-icon-color) !important;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
/* Disabled mobile toolbar button */
|
|
.nn-mobile-toolbar-button:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
/* Source: src/styles/sections/platform-ios-obsidian-1-11.css */
|
|
|
|
/* ========================================================================
|
|
iOS + Obsidian 1.11+ iOS Platform Overrides
|
|
======================================================================== */
|
|
|
|
/* Platform-specific safe area definitions */
|
|
.notebook-navigator-ios {
|
|
/* iOS uses env() for dynamic safe areas (notch, home indicator) */
|
|
--nn-mobile-safe-area-bottom: env(safe-area-inset-bottom, 8px);
|
|
}
|
|
|
|
.notebook-navigator-obsidian-1-11-plus-ios {
|
|
/* Obsidian 1.11+ already accounts for iOS safe areas in the view chrome. */
|
|
--nn-mobile-safe-area-bottom: 0px;
|
|
}
|
|
|
|
.notebook-navigator-ios:not(.notebook-navigator-obsidian-1-11-plus-ios)
|
|
.nn-navigation-pane[data-calendar='true']
|
|
.nn-pane-bottom-toolbar
|
|
.nn-mobile-toolbar,
|
|
.notebook-navigator-ios:not(.notebook-navigator-obsidian-1-11-plus-ios)
|
|
.nn-list-pane[data-calendar='true']
|
|
.nn-pane-bottom-toolbar
|
|
.nn-mobile-toolbar {
|
|
padding-bottom: 0;
|
|
height: 49px;
|
|
min-height: 49px;
|
|
}
|
|
|
|
/* Obsidian 1.11+ 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-obsidian-1-11-plus-ios {
|
|
background-color: var(--nn-theme-mobile-bg);
|
|
}
|
|
|
|
/* Obsidian 1.11+ 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). */
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-split-container {
|
|
padding-bottom: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* iOS (Obsidian 1.11+): allow the glass toolbar shadow to render into the split container padding */
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane,
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* iOS (Obsidian 1.11+): anchor floating toolbar to the panel (above the calendar). */
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane-panel,
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane-panel {
|
|
position: relative;
|
|
}
|
|
|
|
/* iOS (Obsidian 1.11+): bottom overlays are positioned above the scroller. */
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-pane-bottom-toolbar {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* iOS (Obsidian 1.11+): reserve scroll space for the floating toolbar so rows can scroll under it. */
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane-scroller,
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane-scroller {
|
|
padding-bottom: var(--nn-ios-pane-bottom-overlay-height);
|
|
}
|
|
|
|
/* Navigation pane calendar safe area for Obsidian 1.11+ iOS */
|
|
.notebook-navigator-obsidian-1-11-plus-ios .nn-navigation-pane,
|
|
.notebook-navigator-obsidian-1-11-plus-ios .nn-list-pane {
|
|
/* Obsidian 1.11+ already accounts for iOS safe areas in the view chrome. */
|
|
--nn-calendar-safe-area: 0px;
|
|
}
|
|
|
|
/* Obsidian 1.11+ iOS glass toolbar */
|
|
.notebook-navigator-obsidian-1-11-plus-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 1.11+ */
|
|
/* 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-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-left,
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-right {
|
|
display: flex;
|
|
pointer-events: auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-pill,
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle {
|
|
display: flex;
|
|
}
|
|
|
|
.notebook-navigator-obsidian-1-11-plus-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-obsidian-1-11-plus-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-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-pill,
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle {
|
|
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-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-pill > .nn-mobile-toolbar-button,
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle > .nn-mobile-toolbar-button {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.notebook-navigator-obsidian-1-11-plus-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-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-circle {
|
|
padding: 1px; /* 1px inset around the circular button */
|
|
}
|
|
|
|
.notebook-navigator-obsidian-1-11-plus-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-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-mobile-toolbar-button svg {
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-navigation-pane-content,
|
|
.notebook-navigator-obsidian-1-11-plus-ios.notebook-navigator-ios-floating-toolbars .nn-list-pane-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Obsidian 1.11+ iOS: bottom fade layer */
|
|
.notebook-navigator-obsidian-1-11-plus-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 + Obsidian 1.11+: 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-obsidian-1-11-plus-ios .nn-list-pane .nn-virtual-item {
|
|
transform: translateZ(0);
|
|
}
|
|
/* Source: src/styles/sections/platform-android-obsidian-1-11.css */
|
|
|
|
/* ========================================================================
|
|
Android + Obsidian 1.11+ Platform Overrides
|
|
======================================================================== */
|
|
|
|
/* Obsidian 1.11+ Android: match the view container background to mobile pane surfaces */
|
|
.view-content.notebook-navigator.notebook-navigator-obsidian-1-11-plus-android {
|
|
background-color: var(--nn-theme-mobile-bg);
|
|
}
|
|
|
|
/* Obsidian 1.11+ 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). */
|
|
.notebook-navigator-obsidian-1-11-plus-android .nn-split-container {
|
|
background-color: var(--nn-theme-mobile-bg);
|
|
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;
|
|
}
|
|
|
|
/* Make panes flex containers on mobile to accommodate tab bars */
|
|
.notebook-navigator-mobile .nn-navigation-pane,
|
|
.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,
|
|
.notebook-navigator-mobile .nn-list-pane-scroller {
|
|
flex: 1;
|
|
min-height: 0; /* Important for proper scrolling */
|
|
-webkit-overflow-scrolling: touch;
|
|
/* Prevent the rubber-band/glow overscroll effect on mobile. */
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* Mobile list pane scroller - use mobile background */
|
|
.notebook-navigator-mobile .nn-list-pane-scroller {
|
|
background-color: var(--nn-theme-list-bg); /* Opaque background on scroller for GPU scroll layer (see .nn-list-pane-scroller) */
|
|
}
|
|
|
|
/* Mobile compact file items - 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);
|
|
}
|
|
|
|
/* Mobile compact mode file names - use dedicated 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));
|
|
}
|
|
/* 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 - !important needed to override other rules */
|
|
.notebook-navigator-android .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)
|
|
) !important;
|
|
}
|
|
|
|
/* Root reorder panel text */
|
|
.notebook-navigator-android .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)
|
|
) !important;
|
|
}
|
|
|
|
/* 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-emoji-icon,
|
|
.notebook-navigator-android .nn-iconfont {
|
|
font-size: calc(var(--nn-file-icon-size-mobile, var(--nn-file-icon-size)) * var(--nn-android-font-scale-reciprocal, 1)) !important;
|
|
}
|
|
|
|
/* Height compensation - Android doesn't scale height/min-height, but we need them
|
|
to match the (now compensated) line-height after Android applies textZoom.
|
|
Since line-height var is pre-divided by scale, multiplying by scale here gives
|
|
the original value (21px, 20px, 19px) which matches the scaled line-height. */
|
|
.notebook-navigator-android .nn-file-name {
|
|
min-height: calc(var(--nn-file-title-line-height) * var(--filename-rows, 1) * var(--nn-android-font-scale, 1));
|
|
height: calc(var(--nn-file-title-line-height) * var(--filename-rows, 1) * var(--nn-android-font-scale, 1));
|
|
}
|
|
|
|
.notebook-navigator-android .nn-file-preview:not(.nn-file-second-line .nn-file-preview) {
|
|
min-height: calc(var(--nn-file-multiline-text-line-height) * var(--preview-rows, 1) * var(--nn-android-font-scale, 1));
|
|
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-date-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;
|
|
line-height: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Prevent emoji icons from being affected by text styles */
|
|
.nn-emoji-icon {
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* 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 `<span>` 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 Picker Modal Styles */
|
|
.modal.nn-icon-picker-modal .modal-content {
|
|
min-height: 380px;
|
|
}
|
|
|
|
/* 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 12px;
|
|
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;
|
|
}
|
|
|
|
/* Icon section headers for categories */
|
|
.nn-icon-section-header {
|
|
font-size: var(--font-ui-small);
|
|
font-weight: 600;
|
|
color: var(--nn-theme-foreground-muted);
|
|
margin-top: 12px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.nn-icon-section-header:first-child {
|
|
margin-top: 0;
|
|
}
|
|
/* Source: src/styles/sections/settings-metadata-info.css */
|
|
|
|
/* ========================================================================
|
|
Metadata Info Styles
|
|
======================================================================== */
|
|
|
|
/* Container for metadata parsing info - flex row layout */
|
|
.nn-metadata-info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Text container - takes up available space */
|
|
.nn-metadata-info-text {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Error text styling */
|
|
.nn-metadata-error-text {
|
|
color: var(--text-error);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Export button - stays on the right */
|
|
.nn-metadata-export-button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Make delete menu items red (items with trash icon) */
|
|
.menu-item:has(.menu-item-icon svg.lucide-trash) {
|
|
color: var(--text-error);
|
|
}
|
|
.menu-item:has(.menu-item-icon svg.lucide-trash) .menu-item-icon {
|
|
color: var(--text-error);
|
|
}
|
|
/* Source: src/styles/sections/settings-style-settings.css */
|
|
|
|
/* @settings
|
|
|
|
name: Notebook Navigator
|
|
id: notebook-navigator-style-settings
|
|
settings:
|
|
-
|
|
id: nn-theme-foreground-heading
|
|
title: Theme foreground
|
|
description: Base foreground color variables used by Notebook Navigator.
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
-
|
|
id: nn-theme-foreground-colors-heading
|
|
title: Foreground colors
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
id: nn-theme-foreground
|
|
title: Base foreground
|
|
description: Base foreground color.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-foreground-muted
|
|
title: Muted foreground
|
|
description: Muted foreground color.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-foreground-faded
|
|
title: Faded foreground
|
|
description: Faded foreground color.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-foreground-faint
|
|
title: Faint foreground
|
|
description: Faint foreground color.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-borders-heading
|
|
title: Borders
|
|
description: Border colors and border widths on navigation and file items.
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
-
|
|
id: nn-border-nav-heading
|
|
title: Navigation borders
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
id: nn-theme-navitem-border-width
|
|
title: Navigation 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: Custom background border color
|
|
description: Border color on folders and tags with custom backgrounds.
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: rgb
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-navitem-hover-border-color
|
|
title: Hover border color
|
|
description: Border color on hovered navigation items.
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: rgb
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-navitem-selected-border-color
|
|
title: Selection 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-inactive-border-color
|
|
title: Selection 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-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-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-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-border-file-heading
|
|
title: File item borders
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
id: nn-theme-file-border-width
|
|
title: Selection 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: Selection 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-inactive-border-color
|
|
title: Selection 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-border-pill-heading
|
|
title: Pill borders
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
id: nn-theme-file-pill-border-width
|
|
title: 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: Custom property pill border color
|
|
description: Border color on custom property pills without custom colors.
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: rgb
|
|
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-border-color
|
|
title: Selected custom property pill border color
|
|
description: Border color on custom property pills without custom colors in selected files.
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: rgb
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-header-heading
|
|
title: Headers
|
|
description: Customize pane header appearance.
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
-
|
|
id: nn-header-actions-heading
|
|
title: Header action buttons
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
id: nn-theme-header-button-icon-color
|
|
title: 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: Button hover background
|
|
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: Button active background
|
|
description: Background color for active/toggled header buttons.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-header-button-active-icon-color
|
|
title: Button active icon color
|
|
description: Icon color for active/toggled header buttons.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-header-button-disabled-icon-color
|
|
title: Button disabled icon color
|
|
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-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-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-note-indicator-color
|
|
title: Daily note indicator
|
|
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
|
|
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-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: Active day outline color
|
|
description: Border color for the outline shown on the active day in the calendar.
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: rgb
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-nav-pane-heading
|
|
title: Navigation pane (folders, tags, shortcuts)
|
|
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-nav-pane-items-heading
|
|
title: Folder & tag items
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
id: nn-theme-navitem-chevron-color
|
|
title: 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: Icon color
|
|
description: Icon color for folders and tags.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-navitem-name-color
|
|
title: Text color
|
|
description: Text color for folder and tag names.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-navitem-file-name-color
|
|
title: File text color
|
|
description: Text color for file shortcuts and recent files. Defaults to folder/tag text color.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
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-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-border-radius
|
|
title: Item border radius
|
|
description: Corner radius for folder and tag items.
|
|
type: variable-number-slider
|
|
default: 4
|
|
format: px
|
|
min: 0
|
|
max: 14
|
|
step: 1
|
|
-
|
|
id: nn-theme-navitem-hover-bg
|
|
title: Hover background
|
|
description: Item hover background color.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-navitem-selected-bg
|
|
title: Selection background
|
|
description: Selected item background color.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-navitem-selected-chevron-color
|
|
title: Selected chevron 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 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 name color
|
|
description: Folder/tag name color when selected.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-navitem-selected-count-color
|
|
title: Selected 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 count background
|
|
description: File count background color when selected.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-navitem-selected-inactive-chevron-color
|
|
title: Selected chevron 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 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-count-color
|
|
title: Selected 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 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-bg
|
|
title: Selection 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-name-color
|
|
title: Selected name color (inactive)
|
|
description: Folder/tag name color when selected and pane is inactive.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-tag-positive-bg
|
|
title: Tag highlight (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 (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-navitem-text-styling-heading
|
|
title: Text styling
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
id: nn-theme-navitem-file-name-font-weight
|
|
title: Default file name weight
|
|
description: Default font weight for file names in shortcuts and recent files.
|
|
type: variable-number-slider
|
|
default: 400
|
|
min: 100
|
|
max: 900
|
|
step: 100
|
|
-
|
|
id: nn-theme-navitem-name-font-weight
|
|
title: Default folder/tag weight
|
|
description: Default font weight for folder and tag names.
|
|
type: variable-number-slider
|
|
default: 400
|
|
min: 100
|
|
max: 900
|
|
step: 100
|
|
-
|
|
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-custom-color-file-name-font-weight
|
|
title: Custom color file name weight
|
|
description: Font weight for file names with custom colors (overrides default file weight).
|
|
type: variable-number-slider
|
|
default: 600
|
|
min: 100
|
|
max: 900
|
|
step: 100
|
|
-
|
|
id: nn-theme-navitem-custom-color-name-font-weight
|
|
title: Custom color folder/tag weight
|
|
description: Font weight for folders and tags with custom colors (overrides default folder/tag weight).
|
|
type: variable-number-slider
|
|
default: 600
|
|
min: 100
|
|
max: 900
|
|
step: 100
|
|
-
|
|
id: nn-theme-navitem-folder-note-name-font-weight
|
|
title: Folder note weight
|
|
description: Font weight for folders with notes (overrides all others).
|
|
type: variable-number-slider
|
|
default: 400
|
|
min: 100
|
|
max: 900
|
|
step: 100
|
|
-
|
|
id: nn-theme-navitem-folder-note-name-decoration
|
|
title: Folder note decoration
|
|
description: Text decoration for folders with notes.
|
|
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 hover decoration
|
|
description: Text decoration when hovering folders with notes.
|
|
type: variable-select
|
|
default: underline
|
|
options:
|
|
-
|
|
label: None
|
|
value: none
|
|
-
|
|
label: Underline
|
|
value: underline
|
|
-
|
|
label: Dotted underline
|
|
value: underline dotted
|
|
-
|
|
id: nn-pinned-shortcuts-heading
|
|
title: Pinned shortcuts
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
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-file-list-heading
|
|
title: List pane (files)
|
|
description: Customize the file list appearance.
|
|
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 active background
|
|
description: Background color for the search field when a search query is active (desktop only).
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-list-search-border-color
|
|
title: Search 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-heading-color
|
|
title: List heading text color
|
|
description: Text color for the list pane title area and vault title.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-list-heading-font-weight
|
|
title: List heading font weight
|
|
description: Font weight for the list pane title area and vault title.
|
|
type: variable-number-slider
|
|
default: 600
|
|
min: 100
|
|
max: 900
|
|
step: 100
|
|
-
|
|
id: nn-theme-list-header-icon-color
|
|
title: List header icon color
|
|
description: Color for the folder/tag icon shown beside the desktop list header breadcrumb.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-list-header-breadcrumb-color
|
|
title: List header breadcrumb color
|
|
description: Text color for the breadcrumb path in the desktop list header.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-list-header-breadcrumb-font-weight
|
|
title: List header breadcrumb font weight
|
|
description: Font weight for breadcrumb text in the desktop list header.
|
|
type: variable-number-slider
|
|
default: 600
|
|
min: 100
|
|
max: 900
|
|
step: 100
|
|
-
|
|
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-separator-color
|
|
title: List separator color
|
|
description: Divider line color between files.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-file-list-items-heading
|
|
title: File items
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
id: nn-theme-file-task-icon-color
|
|
title: Unfinished task icon color
|
|
description: Icon color for notes with unfinished tasks.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
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-preview-color
|
|
title: File preview text color
|
|
description: Text color for content preview.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
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-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-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-tag-color
|
|
title: File tag text color
|
|
description: Text color for tag pills.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-file-tag-custom-color-text-color
|
|
title: Custom tag text color
|
|
description: Text color for tags with custom colors.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-file-tag-bg
|
|
title: File tag background
|
|
description: Background color for tag pills.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-file-property-color
|
|
title: Custom property text color
|
|
description: Text color for custom property pill.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-file-property-bg
|
|
title: Custom property background
|
|
description: Background color for custom property pill.
|
|
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-border-radius
|
|
title: Custom 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-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-theme-file-selected-bg
|
|
title: Selection background
|
|
description: Selected file background color.
|
|
type: variable-themed-color
|
|
format: hex
|
|
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-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-tag-color
|
|
title: Selected file tag 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 file tag background
|
|
description: Background color for tag pills when selected.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-file-selected-property-color
|
|
title: Selected custom property text color
|
|
description: Text color for custom property pill when selected.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-file-selected-property-bg
|
|
title: Selected custom property background
|
|
description: Background color for custom property pill when selected.
|
|
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-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-theme-file-selected-inactive-tag-color
|
|
title: Selected file tag 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 file tag 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 custom property text color (inactive)
|
|
description: Text color for custom property pill 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 custom property background (inactive)
|
|
description: Background color for custom property pill when file is selected and pane is inactive.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-file-selected-inactive-bg
|
|
title: Selection 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-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-file-text-styling-heading
|
|
title: Text styling
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
id: nn-theme-list-group-header-font-weight
|
|
title: Group header 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-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-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-date-font-weight
|
|
title: 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-parent-font-weight
|
|
title: 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-tag-font-weight
|
|
title: Tag text font weight
|
|
description: Font weight for tag pill text.
|
|
type: variable-number-slider
|
|
default: 400
|
|
min: 100
|
|
max: 900
|
|
step: 100
|
|
-
|
|
id: nn-theme-quick-actions-heading
|
|
title: Quick actions
|
|
type: heading
|
|
level: 2
|
|
collapsed: false
|
|
-
|
|
id: nn-theme-quick-actions-bg
|
|
title: 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: 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: 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: 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: Icon hover color
|
|
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: Separator color
|
|
description: Divider color between quick action buttons.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-pane-divider-heading
|
|
title: Pane divider
|
|
description: Vertical divider between navigation and file list panes.
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
-
|
|
id: nn-theme-divider-border-color
|
|
title: Divider border color
|
|
description: Color of the vertical border between panes.
|
|
type: variable-themed-color
|
|
opacity: true
|
|
format: rgb
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-divider-resize-handle-hover-bg
|
|
title: Resize handle hover background
|
|
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 styles
|
|
description: Customize mobile interface elements.
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
-
|
|
id: nn-theme-mobile-bg
|
|
title: Mobile 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: Mobile 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: Mobile 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: Mobile 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-bg
|
|
title: Mobile toolbar background
|
|
description: Background color of the mobile toolbar.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
id: nn-theme-mobile-toolbar-glass-bg
|
|
title: iOS glass toolbar background
|
|
description: Background color of the Obsidian 1.11+ 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 active background
|
|
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 active icon color
|
|
description: Icon color for active toolbar button.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
|
|
*/
|