4898 lines
131 KiB
CSS
4898 lines
131 KiB
CSS
/* ========================================================================
|
|
CSS Variables - Defined at body level for Style Settings compatibility
|
|
======================================================================== */
|
|
|
|
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 */
|
|
|
|
/* ========================================================================
|
|
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-slim: 5px; /* Reduced padding for slim mode */
|
|
--nn-file-padding-vertical-slim-mobile: 8px; /* Mobile slim mode padding for touch targets */
|
|
--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-feature-image-min-size: 42px; /* Minimum size for feature images */
|
|
--nn-feature-image-max-size: 64px; /* Maximum size for feature images */
|
|
|
|
/* 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 */
|
|
|
|
/* 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 */
|
|
|
|
/* Navigation item heights - fixed pixel values to prevent fractional rendering */
|
|
--nn-nav-line-height: 18px; /* Fixed line height for folder/tag names */
|
|
/* Note: The following are dynamically set by JavaScript based on user settings:
|
|
--nn-setting-nav-padding-vertical
|
|
--nn-setting-nav-padding-vertical-mobile
|
|
--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: 12px; /* Vertical padding around list title */
|
|
--nn-list-title-font-size: 16px; /* Desktop list title text size */
|
|
|
|
/* ========================================================================
|
|
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 */
|
|
|
|
/* ========================================================================
|
|
Pane Width Constraints
|
|
======================================================================== */
|
|
|
|
/* Minimum widths for panes */
|
|
--nn-navigation-pane-min-width: 150px; /* Minimum width for navigation pane */
|
|
--nn-list-pane-min-width: 250px; /* Minimum width for list pane */
|
|
|
|
/* ========================================================================
|
|
Notebook Navigator Theme Variables
|
|
======================================================================== */
|
|
|
|
/* -- Navigation Pane -- */
|
|
--nn-theme-nav-bg: var(--background-secondary);
|
|
--nn-theme-pinned-shortcut-shadow-color: rgba(0, 0, 0, 0.05);
|
|
|
|
/* -- Folder & Tag Items -- */
|
|
--nn-theme-navitem-chevron-color: var(--text-muted);
|
|
--nn-theme-navitem-icon-color: var(--text-muted);
|
|
--nn-theme-navitem-name-color: var(--text-normal);
|
|
--nn-theme-navitem-count-color: var(--text-muted);
|
|
--nn-theme-navitem-count-bg: transparent;
|
|
--nn-theme-navitem-count-border-radius: 8px;
|
|
--nn-theme-navitem-border-radius: 4px;
|
|
--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);
|
|
|
|
/* -- 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: 600;
|
|
--nn-theme-navitem-folder-note-name-decoration: underline;
|
|
|
|
/* -- Pane Divider -- */
|
|
--nn-theme-divider-border-color: var(--background-modifier-border);
|
|
--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(--text-muted);
|
|
--nn-theme-list-header-breadcrumb-color: var(--text-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(--text-muted);
|
|
--nn-theme-list-heading-font-weight: 600;
|
|
--nn-theme-list-group-header-color: var(--text-muted);
|
|
--nn-theme-list-separator-color: var(--background-modifier-border);
|
|
|
|
/* -- File Items -- */
|
|
--nn-theme-file-name-color: var(--text-normal);
|
|
--nn-theme-file-preview-color: var(--text-muted);
|
|
--nn-theme-file-feature-border-radius: 4px;
|
|
--nn-theme-file-date-color: var(--text-normal);
|
|
--nn-theme-file-parent-color: var(--text-muted);
|
|
--nn-theme-file-tag-color: var(--text-muted);
|
|
--nn-theme-file-tag-custom-color-text-color: white;
|
|
--nn-theme-file-tag-bg: var(--background-modifier-border);
|
|
--nn-theme-file-tag-border-radius: 10px;
|
|
--nn-theme-file-border-radius: 8px;
|
|
--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-file-date-color);
|
|
--nn-theme-file-selected-parent-color: var(--nn-theme-file-parent-color);
|
|
--nn-theme-file-selected-tag-color: var(--nn-theme-file-tag-color);
|
|
--nn-theme-file-selected-tag-bg: var(--nn-theme-file-tag-bg);
|
|
--nn-theme-file-selected-inactive-bg: var(--background-modifier-hover);
|
|
|
|
/* -- File Item Text Styling -- */
|
|
--nn-theme-list-group-header-font-weight: 600;
|
|
--nn-theme-file-name-font-weight: 600;
|
|
--nn-theme-file-slim-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(--text-muted);
|
|
--nn-theme-quick-actions-icon-hover-color: var(--text-normal);
|
|
--nn-theme-quick-actions-separator-color: var(--background-modifier-border);
|
|
|
|
/* -- Header Buttons -- */
|
|
--nn-theme-header-button-icon-color: var(--text-muted);
|
|
--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(--text-muted);
|
|
|
|
/* -- Mobile Styles -- */
|
|
--nn-theme-mobile-nav-bg: var(--background-primary);
|
|
--nn-theme-mobile-list-header-link-color: var(--link-color);
|
|
--nn-theme-mobile-list-header-breadcrumb-color: var(--text-normal);
|
|
--nn-theme-mobile-list-header-breadcrumb-font-weight: 600;
|
|
--nn-theme-mobile-toolbar-bg: var(--background-secondary);
|
|
--nn-theme-mobile-toolbar-border-color: var(--background-modifier-border);
|
|
--nn-theme-mobile-toolbar-button-icon-color: var(--link-color);
|
|
--nn-theme-mobile-toolbar-button-active-bg: var(--background-modifier-hover);
|
|
--nn-theme-mobile-toolbar-button-active-icon-color: var(--link-color);
|
|
|
|
/* -- File Separator -- */
|
|
--nn-separator-height: 1px;
|
|
}
|
|
|
|
.theme-dark {
|
|
--nn-theme-pinned-shortcut-shadow-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* ========================================================================
|
|
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);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Update notice banner
|
|
======================================================================== */
|
|
|
|
.nn-update-banner {
|
|
position: absolute;
|
|
top: calc(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: 10px 16px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
opacity: 1;
|
|
transition:
|
|
opacity 0.4s ease,
|
|
transform 0.4s ease;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
/* ========================================================================
|
|
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);
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* ========================================================================
|
|
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);
|
|
}
|
|
|
|
/* Add right border to nav header in dual pane mode */
|
|
:not(.nn-single-pane) .nn-navigation-pane .nn-pane-header {
|
|
border-right: 1px solid var(--nn-theme-divider-border-color);
|
|
}
|
|
|
|
/* 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-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-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;
|
|
}
|
|
|
|
/* 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 */
|
|
.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);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.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: 5px;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Clear button */
|
|
/* Hide webkit search cancel button */
|
|
.nn-search-input::-webkit-search-cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
/* ========================================================================
|
|
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: 8px;
|
|
}
|
|
|
|
/* 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 {
|
|
position: absolute;
|
|
top: 8px;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nn-search-clear-button:hover,
|
|
.nn-search-star-button:hover {
|
|
color: var(--nn-theme-header-button-active-icon-color);
|
|
}
|
|
|
|
.nn-search-clear-button:focus-visible,
|
|
.nn-search-star-button:focus-visible {
|
|
outline: 2px solid var(--interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.nn-search-clear-button svg,
|
|
.nn-search-star-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.nn-search-clear-button {
|
|
right: 10px;
|
|
}
|
|
|
|
.nn-search-star-button {
|
|
right: 34px;
|
|
}
|
|
|
|
.nn-search-star-button--active {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-search-clear-button,
|
|
.notebook-navigator-mobile .nn-search-star-button {
|
|
top: 0;
|
|
height: 36px;
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-search-clear-button {
|
|
right: 10px;
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-search-star-button {
|
|
right: 44px;
|
|
}
|
|
|
|
/* Clickable path segments in header */
|
|
.nn-path-segment {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nn-path-segment:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* ========================================================================
|
|
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;
|
|
}
|
|
|
|
/* 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: var(--nn-theme-header-button-disabled-icon-color);
|
|
}
|
|
|
|
/* 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: var(--nn-theme-header-button-disabled-icon-color);
|
|
}
|
|
|
|
/* Icon styling - consistent size and appearance for all button icons */
|
|
.nn-icon-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
stroke: var(--nn-theme-header-button-icon-color);
|
|
stroke-width: 2;
|
|
fill: none;
|
|
}
|
|
|
|
/* Remove line-height from icon span to prevent vertical offset */
|
|
.nn-icon-button > span {
|
|
line-height: 0;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Pane Spacers
|
|
======================================================================== */
|
|
|
|
/* Navigation pane spacers - provide visual breathing room in the list */
|
|
.nn-nav-top-spacer {
|
|
height: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nn-nav-bottom-spacer {
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nn-nav-list-spacer {
|
|
height: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* List pane spacers - match navigation pane for consistency */
|
|
.nn-list-top-spacer {
|
|
height: 8px;
|
|
}
|
|
|
|
.nn-list-bottom-spacer {
|
|
height: 20px;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Navigation Pane Scroller
|
|
======================================================================== */
|
|
|
|
/* Scroller container for both folder tree and tag list */
|
|
|
|
.nn-navigation-pane-scroller {
|
|
flex: 1;
|
|
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 */
|
|
border-right: 1px solid var(--nn-theme-divider-border-color);
|
|
background-color: var(--nn-theme-nav-bg); /* Opaque background for GPU scroll layer optimization */
|
|
|
|
/* Ensure scroll events work properly with virtualization */
|
|
position: relative;
|
|
}
|
|
|
|
/* Container for pinned shortcuts displayed above the scrollable navigation tree */
|
|
.nn-shortcut-pinned {
|
|
flex-shrink: 0;
|
|
padding: 8px var(--nn-scroller-padding) 4px;
|
|
border-bottom: 1px solid var(--nn-theme-divider-border-color);
|
|
border-right: 1px solid var(--nn-theme-divider-border-color);
|
|
background-color: var(--nn-theme-nav-bg);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Remove top padding when banner is present to avoid double spacing */
|
|
.nn-shortcut-pinned[data-has-banner='true'] {
|
|
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: 8px;
|
|
pointer-events: none;
|
|
background: linear-gradient(to bottom, var(--nn-theme-pinned-shortcut-shadow-color) 0%, transparent 100%);
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-shortcut-pinned {
|
|
background-color: var(--nn-theme-mobile-nav-bg);
|
|
border-bottom: 1px solid var(--nn-theme-divider-border-color);
|
|
border-right: 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-nav-banner-image {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
|
|
background-color: var(--background-tertiary);
|
|
}
|
|
|
|
/* ========================================================================
|
|
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));
|
|
contain: paint; /* Isolate per-item painting */
|
|
}
|
|
|
|
.nn-navitem.nn-has-custom-background {
|
|
position: relative;
|
|
}
|
|
|
|
.nn-navitem.nn-has-custom-background:not(.nn-selected)::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
bottom: 0;
|
|
background-color: var(--nn-navitem-custom-bg-color);
|
|
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.nn-navitem.nn-has-custom-background > .nn-navitem-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.nn-navitem.nn-has-custom-background > .nn-navitem-content > * {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Folder content - contains folder UI elements */
|
|
.nn-navitem-content {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--nn-setting-nav-padding-vertical) 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;
|
|
}
|
|
|
|
/* Folder hover state - desktop only, using pseudo-element for padding control */
|
|
.nn-desktop .nn-navitem:hover {
|
|
position: relative;
|
|
}
|
|
|
|
.nn-desktop .nn-navitem: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));
|
|
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;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* 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,
|
|
.nn-tag-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,
|
|
.nn-tag-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: var(--nn-nav-line-height);
|
|
color: var(--nn-theme-navitem-name-color);
|
|
unicode-bidi: plaintext; /* Proper bidirectional text handling */
|
|
}
|
|
|
|
/* 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 - show pointer cursor on hover */
|
|
.nn-navitem-name.nn-has-folder-note:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 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: 11px;
|
|
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;
|
|
}
|
|
|
|
/* Shortcut section styling */
|
|
.nn-shortcut-header-item .nn-navitem-name {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.nn-shortcut-header-item .nn-navitem-count {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.nn-drag-item {
|
|
position: relative;
|
|
}
|
|
|
|
.nn-shortcut-drag-source {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.nn-drag-item[data-reorder-drop-before='true'] .nn-navitem-content::before,
|
|
.nn-drag-item[data-reorder-drop-after='true'] .nn-navitem-content::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
height: 2px;
|
|
background-color: var(--interactive-accent);
|
|
border-radius: 999px;
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
}
|
|
|
|
.nn-drag-item[data-reorder-drop-before='true'] .nn-navitem-content::before {
|
|
top: 0;
|
|
}
|
|
|
|
.nn-drag-item[data-reorder-drop-after='true'] .nn-navitem-content::after {
|
|
bottom: 0;
|
|
}
|
|
|
|
.nn-desktop .nn-drag-item[data-reorder-drop-before='true']::before,
|
|
.nn-desktop .nn-drag-item[data-reorder-drop-after='true']::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
height: 3px;
|
|
background-color: var(--interactive-accent);
|
|
border-radius: 999px;
|
|
pointer-events: none;
|
|
z-index: 5;
|
|
}
|
|
|
|
.nn-desktop .nn-drag-item[data-reorder-drop-before='true']::before {
|
|
top: -1px;
|
|
}
|
|
|
|
.nn-desktop .nn-drag-item[data-reorder-drop-after='true']::after {
|
|
bottom: -1px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.nn-drag-item .nn-shortcut-description {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nn-shortcut-actions {
|
|
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 {
|
|
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(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-root-reorder-hint {
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.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-section[data-reorder-drop-after='true']::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
bottom: 0;
|
|
height: 2px;
|
|
background-color: var(--interactive-accent);
|
|
border-radius: 999px;
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
}
|
|
|
|
.nn-desktop .nn-root-reorder-section[data-reorder-drop-after='true']::after {
|
|
height: 3px;
|
|
bottom: -1px;
|
|
z-index: 5;
|
|
}
|
|
|
|
.nn-root-reorder-section-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.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(--text-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-shortcut-disabled {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ========================================================================
|
|
File List Styles
|
|
======================================================================== */
|
|
|
|
/* File list container - scrollable area for files */
|
|
.nn-list-pane-scroller {
|
|
flex: 1;
|
|
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-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;
|
|
}
|
|
|
|
/* File - container for each file in the list */
|
|
.nn-file {
|
|
background: transparent;
|
|
padding: 0;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
position: relative;
|
|
|
|
/* CSS Custom Properties for file items - themes can override these */
|
|
contain: paint; /* Isolate per-item painting */
|
|
}
|
|
|
|
/* 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) var(--nn-file-item-padding-horizontal);
|
|
margin: 0;
|
|
border-radius: min(16px, var(--nn-theme-file-border-radius));
|
|
background: transparent;
|
|
position: relative; /* For absolute positioning of reveal overlay */
|
|
}
|
|
|
|
/* File inner content - flex container for actual content */
|
|
.nn-file-inner-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 4px;
|
|
align-items: center; /* Center items vertically */
|
|
position: relative;
|
|
}
|
|
|
|
/* Virtual list file separator */
|
|
|
|
.nn-virtual-file-item:not(.nn-last-file)::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
inset-inline-start: 20px;
|
|
inset-inline-end: 20px;
|
|
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 slim mode */
|
|
.nn-slim-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-feature-image-min-size); /* Minimum height to match minimum image size */
|
|
justify-content: flex-start; /* Top-align content */
|
|
/* No align-self - let it stretch naturally */
|
|
}
|
|
|
|
/* Slim mode file text content - same as above but without min-height */
|
|
.nn-slim-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);
|
|
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;
|
|
unicode-bidi: plaintext; /* Proper bidirectional text handling */
|
|
|
|
/* Fixed height: always take up configured number of lines */
|
|
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-has-color='true'] {
|
|
color: var(--nn-file-name-custom-color);
|
|
}
|
|
|
|
.nn-file-name-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.nn-file-name-wrapper[data-multiline='true'] {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.nn-file-name-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.nn-file-name-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nn-file-name-row .nn-file-name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.nn-file-external-icon {
|
|
margin-inline-end: 4px;
|
|
}
|
|
|
|
.nn-file-external-icon svg,
|
|
.nn-slim-file-type-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.nn-file-icon {
|
|
width: var(--nn-nav-icon-size);
|
|
height: var(--nn-nav-icon-size);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
color: var(--nn-theme-navitem-icon-color);
|
|
}
|
|
|
|
.nn-file-name-wrapper[data-multiline='true'] .nn-file-icon {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.nn-file-icon svg {
|
|
width: var(--nn-nav-icon-size);
|
|
height: var(--nn-nav-icon-size);
|
|
}
|
|
|
|
.nn-file-icon.nn-emoji-icon,
|
|
.nn-file-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);
|
|
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[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: 24px;
|
|
display: none;
|
|
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;
|
|
}
|
|
|
|
/* Slim mode with 1 title row and no tags: center vertically (4px offset) */
|
|
.nn-quick-actions-panel.nn-slim-mode[data-title-rows='1'][data-has-tags='false'] {
|
|
top: 3px; /* (20px line height + 10px padding - 24px icon) / 2 = 3px */
|
|
}
|
|
|
|
/* Slim mode with tags or 2 title rows: use default slim padding (6px) */
|
|
.nn-quick-actions-panel.nn-slim-mode[data-title-rows='2'],
|
|
.nn-quick-actions-panel.nn-slim-mode[data-has-tags='true'] {
|
|
top: 5px; /* Match slim mode padding */
|
|
}
|
|
|
|
/* Panel appears when hovering anywhere on file row */
|
|
.nn-desktop .nn-file:hover .nn-quick-actions-panel,
|
|
.nn-desktop.nn-single-pane .nn-file:hover .nn-quick-actions-panel {
|
|
display: flex;
|
|
}
|
|
|
|
/* 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);
|
|
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: 8px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-width: auto;
|
|
line-height: var(--nn-file-single-text-line-height);
|
|
}
|
|
|
|
/* File preview text - secondary line showing file content */
|
|
.nn-file-preview {
|
|
font-size: 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);
|
|
}
|
|
|
|
/* Folder indicator - shows parent folder for files from subfolders */
|
|
.nn-file-folder {
|
|
font-size: 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;
|
|
gap: 4px;
|
|
overflow: hidden;
|
|
line-height: var(--nn-file-single-text-line-height); /* Use second line height for consistent spacing */
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Folder indicator text */
|
|
.nn-file-folder span {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Folder icon styling */
|
|
.nn-file-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;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Tag Display Styles
|
|
======================================================================== */
|
|
|
|
/* Tag container */
|
|
.nn-file-tags {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 4px;
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
height: 22px; /* Fixed height for single row */
|
|
position: relative;
|
|
}
|
|
|
|
/* Individual tag pill */
|
|
.nn-file-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 20px;
|
|
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));
|
|
font-size: 12px;
|
|
font-weight: var(--nn-theme-file-tag-font-weight);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* When tag has custom color, use custom color text variable */
|
|
.nn-file-tag[style*='background-color'] {
|
|
color: var(--nn-theme-file-tag-custom-color-text-color);
|
|
}
|
|
|
|
/* Tag pill hover effect - darken/lighten all tags on hover */
|
|
.nn-file-tag:hover {
|
|
filter: brightness(0.9);
|
|
}
|
|
|
|
/* Custom colored tag hover - slightly darken/lighten the background */
|
|
.nn-file-tag[style*='background-color']:hover {
|
|
filter: brightness(0.9);
|
|
color: var(--nn-theme-file-tag-custom-color-text-color);
|
|
}
|
|
|
|
/* Clickable tag styling */
|
|
.nn-file-tag.nn-clickable-tag {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Dark mode tag hover - lighten instead of darken */
|
|
.theme-dark .nn-file-tag:hover {
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
/* Selected file tag styles - only for tags without custom colors */
|
|
.nn-file.nn-selected .nn-file-tag:not([style*='background-color']) {
|
|
background-color: var(--nn-theme-file-selected-tag-bg);
|
|
color: var(--nn-theme-file-selected-tag-color);
|
|
}
|
|
|
|
/* Ensure custom color tags keep their text color when selected */
|
|
.nn-file.nn-selected .nn-file-tag[style*='background-color'] {
|
|
color: var(--nn-theme-file-tag-custom-color-text-color);
|
|
}
|
|
|
|
/* Selected file text colors */
|
|
.nn-file.nn-selected .nn-file-name {
|
|
color: var(--nn-theme-file-selected-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-theme-file-selected-preview-color);
|
|
}
|
|
|
|
.nn-file.nn-selected .nn-file-date {
|
|
color: var(--nn-theme-file-selected-date-color);
|
|
}
|
|
|
|
.nn-file.nn-selected .nn-file-parent {
|
|
color: var(--nn-theme-file-selected-parent-color);
|
|
}
|
|
|
|
/* ========================================================================
|
|
Slim Mode Styles - When date, preview, and image are all disabled
|
|
======================================================================== */
|
|
|
|
/* Slim file item - more compact list appearance */
|
|
.nn-file.nn-slim .nn-file-content {
|
|
padding: var(--nn-file-padding-vertical-slim) var(--nn-file-item-padding-horizontal); /* Reduced vertical padding */
|
|
}
|
|
|
|
/* Slim file name - no bold, smaller font like folder items */
|
|
.nn-file.nn-slim .nn-file-name {
|
|
font-size: var(--nn-file-small-size);
|
|
font-weight: var(--nn-theme-file-slim-name-font-weight);
|
|
margin-bottom: 0;
|
|
line-height: var(--nn-file-title-line-height);
|
|
}
|
|
|
|
/* Apply standard font weight to colored file names in slim mode */
|
|
.nn-file.nn-slim .nn-file-name[data-has-color='true'] {
|
|
font-weight: var(--nn-theme-file-name-font-weight);
|
|
}
|
|
|
|
.nn-slim-file-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.nn-slim-file-header .nn-file-name-wrapper {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Selected slim file - maintain selection styles */
|
|
.nn-file.nn-slim.nn-selected .nn-file-name {
|
|
color: var(--nn-theme-file-selected-name-color);
|
|
}
|
|
|
|
/* Preserve custom color for colored file names even when selected in slim mode */
|
|
.nn-file.nn-slim.nn-selected .nn-file-name[data-has-color='true'] {
|
|
color: var(--nn-file-name-custom-color);
|
|
}
|
|
|
|
/* ========================================================================
|
|
Feature Image Styles
|
|
======================================================================== */
|
|
|
|
/* Feature image container - right-aligned image thumbnail */
|
|
.nn-feature-image {
|
|
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 */
|
|
}
|
|
|
|
.nn-feature-image--square {
|
|
width: var(--nn-feature-image-min-size);
|
|
height: var(--nn-feature-image-min-size);
|
|
}
|
|
|
|
.nn-feature-image--natural {
|
|
width: auto;
|
|
height: var(--nn-feature-image-min-size);
|
|
aspect-ratio: var(--nn-feature-image-aspect-ratio, 1);
|
|
}
|
|
|
|
/* Dynamic sizing based on calculated item height */
|
|
.nn-virtual-file-item .nn-feature-image {
|
|
/* Size based on item height minus total padding */
|
|
--image-size: clamp(
|
|
var(--nn-feature-image-min-size),
|
|
calc(var(--item-height) - var(--nn-file-padding-total)),
|
|
var(--nn-feature-image-max-size)
|
|
);
|
|
}
|
|
|
|
.nn-virtual-file-item .nn-feature-image--square {
|
|
width: var(--image-size);
|
|
height: var(--image-size);
|
|
}
|
|
|
|
.nn-virtual-file-item .nn-feature-image--natural {
|
|
height: var(--image-size);
|
|
max-height: var(--image-size);
|
|
}
|
|
|
|
/* Feature image element - covers container with proper aspect ratio */
|
|
.nn-feature-image-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.nn-feature-image--square .nn-feature-image-img {
|
|
object-fit: cover;
|
|
object-position: center top;
|
|
}
|
|
|
|
.nn-feature-image--natural .nn-feature-image-img {
|
|
object-fit: contain;
|
|
object-position: center;
|
|
}
|
|
|
|
/* Selected file image - slightly transparent when selected */
|
|
.nn-file.nn-selected .nn-feature-image {
|
|
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(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1px;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Date Group Headers
|
|
======================================================================== */
|
|
|
|
/* Date group headers - sticky headers for grouped files */
|
|
.nn-date-group-header {
|
|
height: var(--nn-date-header-height-subsequent);
|
|
box-sizing: border-box;
|
|
padding: var(--nn-date-header-padding-top) var(--nn-file-item-padding-horizontal) var(--nn-date-header-padding-bottom)
|
|
var(--nn-file-item-padding-horizontal);
|
|
font-size: 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;
|
|
}
|
|
|
|
/* 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);
|
|
padding: 0 var(--nn-file-item-padding-horizontal);
|
|
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-nav-header {
|
|
height: 32px;
|
|
background-color: var(--nn-theme-nav-bg);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Add right border to nav header in dual pane mode */
|
|
:not(.nn-single-pane) .nn-skeleton-nav-header {
|
|
border-right: 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 */
|
|
:not(.nn-single-pane) .nn-skeleton-navigation-pane .nn-skeleton-content {
|
|
border-right: 1px solid var(--nn-theme-divider-border-color);
|
|
}
|
|
|
|
/* ========================================================================
|
|
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(--text-muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Empty state message text */
|
|
.nn-empty-message {
|
|
text-align: center;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Selection States
|
|
======================================================================== */
|
|
|
|
/* Selected file background pseudo-element - better control over styling */
|
|
.nn-file.nn-selected .nn-file-content::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
bottom: 0; /* Extend all the way down */
|
|
background-color: var(--nn-theme-navitem-selected-bg);
|
|
border-radius: min(16px, var(--nn-theme-file-border-radius));
|
|
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;
|
|
}
|
|
|
|
/* Selected folder - transparent background for pseudo-element approach */
|
|
.nn-navitem.nn-selected {
|
|
position: relative;
|
|
}
|
|
|
|
.nn-navitem.nn-selected > .nn-navitem-content {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Selected folder background - uses pseudo-element for better control */
|
|
.nn-navitem.nn-selected::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
bottom: 0;
|
|
background-color: var(--nn-theme-navitem-selected-bg);
|
|
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Selected folder content z-index - ensures text appears above background */
|
|
.nn-navitem.nn-selected > .nn-navitem-content > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 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 */
|
|
}
|
|
|
|
/* ========================================================================
|
|
Focus States
|
|
======================================================================== */
|
|
|
|
/* Dimmed selections - apply to all these cases:
|
|
1. Navigator unfocused (all selections dimmed)
|
|
2. Navigator focused but inactive pane (cross-pane dimming)
|
|
3. Search field is focused (both panes dimmed) */
|
|
.nn-split-container[data-navigator-focused='false'] .nn-file.nn-selected .nn-file-content::before,
|
|
.nn-split-container[data-navigator-focused='false'] .nn-navitem.nn-selected::before,
|
|
.nn-split-container[data-navigator-focused='true'][data-focus-pane='navigation'] .nn-file.nn-selected .nn-file-content::before,
|
|
.nn-split-container[data-navigator-focused='true'][data-focus-pane='files'] .nn-navitem.nn-selected::before,
|
|
.nn-split-container[data-navigator-focused='true'][data-focus-pane='search'] .nn-file.nn-selected .nn-file-content::before,
|
|
.nn-split-container[data-navigator-focused='true'][data-focus-pane='search'] .nn-navitem.nn-selected::before {
|
|
background-color: var(--nn-theme-navitem-selected-inactive-bg);
|
|
}
|
|
|
|
/* Active navigation item selection styles - only when navigation pane is focused */
|
|
.nn-split-container[data-navigator-focused='true'][data-focus-pane='navigation'] .nn-navitem.nn-selected .nn-navitem-chevron {
|
|
color: var(--nn-theme-navitem-selected-chevron-color);
|
|
}
|
|
|
|
.nn-split-container[data-navigator-focused='true'][data-focus-pane='navigation'] .nn-navitem.nn-selected .nn-navitem-icon {
|
|
color: var(--nn-theme-navitem-selected-icon-color);
|
|
}
|
|
|
|
.nn-split-container[data-navigator-focused='true'][data-focus-pane='navigation'] .nn-navitem.nn-selected .nn-navitem-name {
|
|
color: var(--nn-theme-navitem-selected-name-color);
|
|
}
|
|
|
|
.nn-split-container[data-navigator-focused='true'][data-focus-pane='navigation'] .nn-navitem.nn-selected .nn-navitem-count {
|
|
color: var(--nn-theme-navitem-selected-count-color);
|
|
background-color: var(--nn-theme-navitem-selected-count-bg);
|
|
}
|
|
|
|
/* ========================================================================
|
|
Hover States
|
|
======================================================================== */
|
|
|
|
/* File hover states - maintains transparency - desktop only */
|
|
.nn-desktop .nn-file:hover .nn-file-content {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.nn-desktop .nn-file.nn-selected:hover .nn-file-content,
|
|
.theme-dark .nn-desktop .nn-file.nn-selected:hover .nn-file-content {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Drag and Drop States
|
|
======================================================================== */
|
|
|
|
/* Dragging state - visual feedback during drag operations */
|
|
.nn-dragging {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Resizing state - prevents text selection during pane resize */
|
|
body.nn-resizing {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Drag over state - highlights valid drop targets */
|
|
.nn-navitem.nn-drag-over {
|
|
background-color: var(--text-selection);
|
|
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
|
|
}
|
|
|
|
.nn-list-pane-scroller.nn-drag-over {
|
|
outline: 2px solid var(--text-selection);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Special visual feedback for tag drop zones */
|
|
[data-drop-zone='tag'].nn-drag-over {
|
|
background-color: var(--background-modifier-success);
|
|
border-radius: min(14px, var(--nn-theme-navitem-border-radius));
|
|
}
|
|
|
|
/* Different style for untagged drop zone */
|
|
[data-drop-zone='tag'][data-tag='__untagged__'].nn-drag-over {
|
|
background-color: var(--background-modifier-error-hover);
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Featured image in drag ghost - circular */
|
|
.nn-drag-ghost-icon.nn-drag-ghost-featured-image {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
border: 2px solid #000000;
|
|
}
|
|
|
|
/* Dark mode: use dark gray border for featured image */
|
|
.theme-dark .nn-drag-ghost-icon.nn-drag-ghost-featured-image {
|
|
border-color: var(--background-modifier-border);
|
|
}
|
|
|
|
.nn-drag-ghost-icon.nn-drag-ghost-featured-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
/* Header actions layout variations
|
|
Different layouts are needed for mobile vs desktop views:
|
|
- space-between: Mobile file pane (back button + folder name + actions)
|
|
- flex-end: Mobile folder pane (actions only, aligned right)
|
|
*/
|
|
.nn-header-actions--space-between {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.nn-header-actions--flex-end {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* ========================================================================
|
|
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;
|
|
border: 2px solid 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 */
|
|
border: 2px solid var(--nn-theme-navitem-selected-bg);
|
|
border-radius: min(16px, var(--nn-theme-file-border-radius));
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Hidden Items - Dimmed appearance for hidden folders and tags
|
|
======================================================================== */
|
|
|
|
/* Hidden items (folders and tags) - dimmed appearance */
|
|
.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;
|
|
}
|
|
|
|
/* ========================================================================
|
|
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(--text-normal);
|
|
font-size: 14px;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
/* Modal input focus state */
|
|
.nn-input:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
/* Modal button container - right-aligned button group */
|
|
.nn-button-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/* ========================================================================
|
|
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: 400px;
|
|
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(--text-normal);
|
|
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(--text-normal);
|
|
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(--text-muted);
|
|
font-size: 12px;
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* 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(--text-normal);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Highlight emphasis */
|
|
.nn-highlight {
|
|
background-color: var(--text-highlight-bg);
|
|
color: var(--text-normal);
|
|
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(--text-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: 300px;
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* ========================================================================
|
|
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: 280px;
|
|
min-height: 280px;
|
|
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(--text-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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 8px 8px;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
/* 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(--text-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(--text-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(--text-muted);
|
|
padding: 24px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* ========================================================================
|
|
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;
|
|
contain: paint; /* Isolate per-item painting */
|
|
}
|
|
|
|
/* ========================================================================
|
|
Settings Page Styles
|
|
======================================================================== */
|
|
|
|
/* Settings page indentation for sub-settings */
|
|
.nn-sub-settings {
|
|
margin-inline-start: 20px;
|
|
padding-left: 1em;
|
|
border-left: 2px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* Settings tabs layout and navigation */
|
|
.nn-settings-tabs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-4);
|
|
}
|
|
|
|
.nn-settings-tabs-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-2-3);
|
|
}
|
|
|
|
.nn-settings-tab-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 6px 12px;
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.nn-settings-tabs-content {
|
|
position: relative;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Informational text in settings */
|
|
.nn-setting-info {
|
|
margin-top: 4px;
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-normal);
|
|
font-weight: var(--font-semibold);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Container for additional info below settings */
|
|
.nn-setting-info-container {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Wider text inputs for settings that benefit from more space */
|
|
.nn-setting-wide-input input[type='text'] {
|
|
width: 300px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Sponsor Button Styles
|
|
======================================================================== */
|
|
|
|
/* Support button hover - subtle opacity change */
|
|
.nn-support-button:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Mobile Styles
|
|
======================================================================== */
|
|
|
|
/* Mobile-specific wide input fields - full width on mobile */
|
|
.is-mobile .nn-setting-wide-input input[type='text'] {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ========================================================================
|
|
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(--text-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;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Mobile container - use grid for consistent structure while allowing sliding */
|
|
.notebook-navigator-mobile .nn-split-container {
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Mobile panes - maintain flex structure like desktop but positioned in grid */
|
|
.notebook-navigator-mobile .nn-navigation-pane,
|
|
.notebook-navigator-mobile .nn-list-pane {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
height: 100%;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: transform 0.2s ease-out;
|
|
will-change: transform;
|
|
}
|
|
|
|
/* Make navigation pane flexible on mobile to handle resize gracefully */
|
|
.notebook-navigator-mobile .nn-navigation-pane {
|
|
flex: 1;
|
|
background-color: var(--nn-theme-mobile-nav-bg) !important;
|
|
}
|
|
|
|
/* Hide resize handle on mobile */
|
|
.notebook-navigator-mobile .nn-resize-handle {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Mobile view states - show navigation view */
|
|
.notebook-navigator-mobile .nn-split-container.show-navigation .nn-navigation-pane {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-split-container.show-navigation .nn-list-pane {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
/* Mobile view states - show files view */
|
|
.notebook-navigator-mobile .nn-split-container.show-files .nn-navigation-pane {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-split-container.show-files .nn-list-pane {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
/* Add touch-action to prevent browser gestures interfering */
|
|
.notebook-navigator-mobile .nn-split-container {
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
/* 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-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;
|
|
}
|
|
|
|
/* 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(--background-primary) 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 */
|
|
}
|
|
|
|
/* Mobile breadcrumb icon */
|
|
.notebook-navigator-mobile .nn-mobile-breadcrumb-icon {
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
color: var(--nn-theme-navitem-name-color);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Ensure scrollers fill available space on mobile */
|
|
.notebook-navigator-mobile .nn-navigation-pane-scroller,
|
|
.notebook-navigator-mobile .nn-list-pane-scroller {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Hide navigation pane border on mobile and use mobile background */
|
|
.notebook-navigator-mobile .nn-navigation-pane-scroller {
|
|
border-right: none;
|
|
background-color: var(
|
|
--nn-theme-mobile-nav-bg
|
|
); /* Opaque background on scroller for GPU scroll layer (see .nn-navigation-pane-scroller) */
|
|
}
|
|
|
|
/* Note: Bottom spacing is handled by a spacer item in the virtualized list */
|
|
|
|
/* Desktop single-pane mode styles */
|
|
|
|
/* Desktop single-pane - show navigation view (hide files) */
|
|
.nn-desktop.nn-single-pane.show-navigation .nn-list-pane {
|
|
position: absolute;
|
|
contain: layout style paint; /* Exclude 'size' to allow virtualizer to measure properly */
|
|
content-visibility: hidden; /* Modern optimization */
|
|
}
|
|
|
|
/* Desktop single-pane - show files view (hide navigation) */
|
|
.nn-desktop.nn-single-pane.show-files .nn-navigation-pane {
|
|
position: absolute;
|
|
contain: layout style paint; /* Exclude 'size' to allow virtualizer to measure properly */
|
|
content-visibility: hidden; /* Modern optimization */
|
|
}
|
|
|
|
/* Disable drag and drop cursors on mobile */
|
|
.notebook-navigator-mobile [draggable='true'] {
|
|
cursor: default !important;
|
|
}
|
|
|
|
/* Disable drag-over states on mobile */
|
|
.notebook-navigator-mobile .nn-drag-over {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Touch-friendly tap targets on mobile */
|
|
.notebook-navigator-mobile .nn-navitem {
|
|
height: var(--nn-setting-nav-item-height-mobile); /* Fixed height instead of min-height */
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* ========================================================================
|
|
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(--text-normal);
|
|
}
|
|
|
|
/* 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 0 250px;
|
|
}
|
|
|
|
.nn-color-picker-right {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
/* 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(--text-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(--text-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(--text-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(--text-normal);
|
|
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(--text-normal);
|
|
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-recent-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.nn-section-label {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nn-clear-recent {
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: var(--text-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-clear-recent:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
border-color: var(--background-modifier-border-hover);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.nn-preset-colors {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Color dots */
|
|
.nn-color-dot {
|
|
aspect-ratio: 1;
|
|
border-radius: var(--radius-s);
|
|
cursor: pointer;
|
|
border: 1px solid var(--background-modifier-border);
|
|
transition: transform 0.1s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.nn-recent-remove-button {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 0;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
background: var(--background-primary);
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nn-recent-remove-button:hover {
|
|
color: var(--text-normal);
|
|
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 {
|
|
transform: scale(1.1);
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
.nn-color-dot:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Empty color slot */
|
|
.nn-color-dot.nn-color-empty {
|
|
background: var(--background-secondary);
|
|
border-style: dashed;
|
|
cursor: default;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.nn-color-dot.nn-color-empty:hover {
|
|
transform: none;
|
|
border-color: var(--background-modifier-border);
|
|
}
|
|
|
|
/* 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,
|
|
.theme-dark .nn-color-dot {
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.theme-dark .nn-color-dot:hover {
|
|
border-color: var(--interactive-accent);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/* ========================================================================
|
|
Folder Color Styles
|
|
======================================================================== */
|
|
|
|
/* ========================================================================
|
|
Mobile-specific Folder Text Size
|
|
======================================================================== */
|
|
|
|
/* Mobile root variables */
|
|
.notebook-navigator-mobile {
|
|
--nn-nav-icon-size: 20px;
|
|
}
|
|
|
|
/* 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: 13px;
|
|
}
|
|
|
|
/* Mobile folder content padding adjustment for proper selection height */
|
|
.notebook-navigator-mobile .nn-navitem-content {
|
|
padding: var(--nn-setting-nav-padding-vertical-mobile) var(--nn-nav-item-padding-horizontal);
|
|
padding-inline-start: 4px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.notebook-navigator-mobile .nn-root-reorder-remove {
|
|
font-size: var(--nn-setting-nav-font-size-mobile);
|
|
}
|
|
|
|
/* ========================================================================
|
|
Mobile Tab Bars - iOS-style bottom navigation
|
|
======================================================================== */
|
|
|
|
/* Mobile toolbar container */
|
|
.nn-mobile-toolbar {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background-color: var(--nn-theme-list-bg);
|
|
border-top: 1px solid var(--nn-theme-mobile-toolbar-border-color);
|
|
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 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;
|
|
}
|
|
|
|
/* 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: 1.5;
|
|
}
|
|
|
|
/* Disabled mobile toolbar button */
|
|
.nn-mobile-toolbar-button:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ========================================================================
|
|
Android Toolbar Positioning
|
|
Android displays toolbar at top, iOS at bottom
|
|
======================================================================== */
|
|
|
|
/* Android: toolbar at top with reduced height */
|
|
.notebook-navigator-android .nn-mobile-toolbar {
|
|
background-color: var(--nn-theme-list-bg);
|
|
border-top: none;
|
|
border-bottom: 1px solid var(--nn-theme-mobile-toolbar-border-color);
|
|
padding-bottom: 0;
|
|
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 */
|
|
}
|
|
|
|
/* 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 slim file items - larger touch targets */
|
|
.notebook-navigator-mobile .nn-file.nn-slim .nn-file-content {
|
|
padding: var(--nn-file-padding-vertical-slim-mobile) var(--nn-file-item-padding-horizontal);
|
|
}
|
|
|
|
/* Mobile slim mode file names - larger font for better readability */
|
|
.notebook-navigator-mobile .nn-file.nn-slim .nn-file-name {
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ========================================================================
|
|
RTL (Right-to-Left) Support
|
|
======================================================================== */
|
|
|
|
/* Mobile slide animations for RTL */
|
|
.mod-rtl .notebook-navigator-mobile .nn-split-container.show-navigation .nn-navigation-pane {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
.mod-rtl .notebook-navigator-mobile .nn-split-container.show-navigation .nn-list-pane {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.mod-rtl .notebook-navigator-mobile .nn-split-container.show-files .nn-navigation-pane {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.mod-rtl .notebook-navigator-mobile .nn-split-container.show-files .nn-list-pane {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
/* Ensure proper text direction for file preview and dates */
|
|
.nn-file-preview,
|
|
.nn-file-date,
|
|
.nn-file-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 */
|
|
|
|
/* =================================================================================
|
|
Icon System
|
|
================================================================================= */
|
|
|
|
/* 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,
|
|
.nn-tag-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;
|
|
}
|
|
|
|
/* 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-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-tab {
|
|
padding: 4px 12px;
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nn-icon-provider-tab:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.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(--text-muted);
|
|
margin-top: 12px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.nn-icon-section-header:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* ========================================================================
|
|
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;
|
|
}
|
|
|
|
/* Settings subsetting indentation */
|
|
.notebook-navigator-subsetting {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* ========================================================================
|
|
Transparency Toggles
|
|
======================================================================== */
|
|
|
|
/* Navigation pane transparency - applied when toggle is enabled */
|
|
body.nn-navigation-pane-transparent .notebook-navigator {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body.nn-navigation-pane-transparent .nn-navigation-pane {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body.nn-navigation-pane-transparent .nn-navigation-pane .nn-pane-header {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body.nn-navigation-pane-transparent .nn-shortcut-pinned {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body.nn-navigation-pane-transparent .nn-navigation-pane-scroller {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* List pane transparency - applied when toggle is enabled */
|
|
body.nn-list-pane-transparent .notebook-navigator {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body.nn-list-pane-transparent .nn-list-pane {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body.nn-list-pane-transparent .nn-list-pane .nn-pane-header {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body.nn-list-pane-transparent .nn-list-pane-scroller {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body.nn-list-pane-transparent .nn-list-title-area {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
body.nn-list-pane-transparent .nn-search-bar-container,
|
|
body.nn-list-pane-transparent .nn-search-input-wrapper {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* @settings
|
|
|
|
name: Notebook Navigator
|
|
id: notebook-navigator-style-settings
|
|
settings:
|
|
-
|
|
-
|
|
id: nn-nav-pane-heading
|
|
title: Navigation pane (folders & tags)
|
|
description: Customize the background, items, and interactions 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. See Mobile navigation background for mobile.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
-
|
|
id: nn-navigation-pane-transparent
|
|
title: Navigation pane transparency
|
|
description: Make the navigation pane transparent (removes background).
|
|
type: class-toggle
|
|
-
|
|
-
|
|
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-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-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-navitem-text-styling-heading
|
|
title: Text styling
|
|
description: Font weight and text decoration for navigation items. Values 100-900 (400 = regular, 600 = bold). Priority - folder notes > custom colors > default.
|
|
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 notes.
|
|
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: 600
|
|
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-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
|
|
format: hex
|
|
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-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.
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
-
|
|
id: nn-list-pane-transparent
|
|
title: List pane transparency
|
|
description: Make the list pane transparent (removes background).
|
|
type: class-toggle
|
|
-
|
|
-
|
|
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
|
|
format: hex
|
|
default-light: '#'
|
|
default-dark: '#'
|
|
-
|
|
-
|
|
id: nn-theme-list-heading-color
|
|
title: List heading text color
|
|
description: Text color for the list pane overlay heading.
|
|
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 overlay heading.
|
|
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-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-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-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-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-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-slim-name-font-weight
|
|
title: File name font weight (slim mode)
|
|
description: Font weight for file names in slim 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
|
|
description: Hover toolbar for file 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
|
|
format: hex
|
|
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-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-mobile-heading
|
|
title: Mobile styles
|
|
description: Customize mobile interface elements.
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
-
|
|
-
|
|
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-border-color
|
|
title: Mobile toolbar border color
|
|
description: Border color of the mobile toolbar.
|
|
type: variable-themed-color
|
|
format: hex
|
|
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: '#'
|
|
|
|
*/
|