From 5a251db2f62e35831fb1d3b2737b574547dc2fb2 Mon Sep 17 00:00:00 2001 From: Aleix Soler Date: Wed, 23 Jul 2025 21:11:51 +0200 Subject: [PATCH] chore: add v2 and build styles --- README.md | 36 +- manifest.json | 2 +- package.json | 6 +- styles.css | 1054 +------------------------------------------------ 4 files changed, 33 insertions(+), 1065 deletions(-) diff --git a/README.md b/README.md index c90b03f..697bd25 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ Track the status of your notes with a powerful, customizable status management system. Mark notes as active, completed, on hold, or create your own custom workflows. ![Status assignment workflow demonstration](images/status-assignment-demo.png) + _Alt: Demonstration of assigning status to a note using the toolbar dropdown_ ## 🎯 Features @@ -26,13 +27,17 @@ _Alt: Demonstration of assigning status to a note using the toolbar dropdown_ - **🚀 Performance Optimized** - Works with large vaults (40k+ notes tested) ![File explorer with status icons](images/file-explorer-status-icons.png) + _Alt: File explorer showing multiple notes with different status icons positioned next to note names and the tooltip with status overview_ ![Status dashboard with vault statistics](images/status-dashboard-overview1.png) + _Alt: Status dashboard showing current note information, vault statistics with total notes and coverage percentages_ ![Status dashboard with vault statistics](images/status-dashboard-overview2.png) + _Alt: Status distribution chart showing different statuses with colored bars and note counts for each status type_ ![Status dashboard with vault statistics](images/status-dashboard-overview3.png) + _Alt: Quick actions panel with organized sections for views, current note operations, clipboard actions, and tools_ ## 💻 Technology Stack @@ -63,19 +68,32 @@ Built with modern web technologies for performance and reliability: ### Quick Start 1. **Assign Status**: + 1. Click the "No status" in toolbar - ![Status toolbar](images/no-status-toolbar.png) - _Alt: Editor toolbar showing "No status" button for status assignment_ + + ![Status toolbar](images/no-status-toolbar.png) + + _Alt: Editor toolbar showing "No status" button for status assignment_ + 2. → Select a status + 2. **View in Explorer**: Status icons appear next to note names - ![File explorer item](images/file-explorer-item.png) - _Alt: Single file explorer item showing a note with status icon positioned next to the filename_ + + ![File explorer item](images/file-explorer-item.png) + + _Alt: Single file explorer item showing a note with status icon positioned next to the filename_ + 3. **Browse by Status or open the Dashboard**: Open from left sidebar - ![Open status view](images/open-view-buttons.png) - _Alt: Left sidebar showing ribbon buttons for opening grouped status view and status dashboard_ + + ![Open status view](images/open-view-buttons.png) + + _Alt: Left sidebar showing ribbon buttons for opening grouped status view and status dashboard_ + 4. **Batch Update**: Select multiple files → Right-click → Change status - ![Multiple status context](images/change-multiple-statuses.png) - _Alt: Context menu appearing when right-clicking multiple selected files, showing "Change note status" option_ + + ![Multiple status context](images/change-multiple-statuses.png) + + _Alt: Context menu appearing when right-clicking multiple selected files, showing "Change note status" option_ ### Example Workflows @@ -98,6 +116,7 @@ Built with modern web technologies for performance and reliability: ``` ![Grouped status view with filtering](images/grouped-status-filtering.png) + _Alt: Grouped status view showing notes organized by status with template filtering and search functionality_ ### Custom Statuses @@ -119,6 +138,7 @@ Description: Requires immediate attention ``` ![Custom statuses](images/custom-status-change.png) + _Alt: Status selection modal showing custom and template statuses with icons, names, and selection interface_ ## 📋 Data Format diff --git a/manifest.json b/manifest.json index 8f2e588..e845277 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "note-status", "name": "Note Status", - "version": "1.0.14", + "version": "2.0.0", "minAppVersion": "0.15.0", "description": "Enhance your note organization with a status management system. Assign and track statuses (active, on hold, completed, dropped) for your notes with a customizable interface including status pane, dropdown, and file explorer integration.", "author": "Aleix Soler", diff --git a/package.json b/package.json index ab21ca3..bf836e7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "obsidian-sample-plugin", - "version": "1.0.14", - "description": "This is a sample plugin for Obsidian (https://obsidian.md)", + "name": "obsidian-note-status", + "version": "2.0.0", + "description": "Enhance your note organization with a status management system. Assign and track statuses (active, on hold, completed, dropped) for your notes with a customizable interface including status pane, dropdown, and file explorer integration.", "main": "main.js", "scripts": { "dev": "node esbuild.config.mjs", diff --git a/styles.css b/styles.css index 5ef03fa..899f724 100644 --- a/styles.css +++ b/styles.css @@ -1,1053 +1 @@ -/* styles/components/setting-item.css */ -.setting-item-full { - width: 100%; -} -.setting-item-vertical { - flex-direction: column; - align-items: start; - gap: 4px; -} - -/* styles/components/template-status-chip.css */ -.template-status-chip { - display: inline-flex; - align-items: center; - padding: 2px 8px; - border-radius: var(--radius-xl); - background: var(--background-secondary); - font-size: 0.85em; - border: 1px solid var(--color-base-30); - gap: 4px; -} -.template-status-color-dot { - display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - background-color: var(--dot-color, --color-base-30); -} - -/* styles/components/template-item.css */ -.template-item { - border: var(--border-width) solid var(--color-base-30); - border-radius: var(--radius-xl); - margin-bottom: var(--size-4-2); - padding: var(--size-4-3); - background: var(--background-primary-alt); - cursor: pointer; - transition: background-color 0.1s ease; -} -.template-item:hover { - background: var(--background-modifier-hover); -} -.template-item.enabled { - background: var(--background-modifier-success-hover); -} -.template-item.enabled:hover { - background: var(--background-modifier-success); -} -.template-header { - display: flex; - align-items: center; -} -.template-checkbox { - pointer-events: none; -} -.template-statuses { - margin-top: 7px; - display: flex; - flex-wrap: wrap; - gap: 5px; -} - -/* styles/components/custom-status-item.css */ -.custom-status-card { - background: var(--background-secondary); - border-radius: var(--radius-m); - padding: var(--size-4-3); - margin-bottom: var(--size-4-2); -} -.custom-status-preview { - display: flex; - align-items: center; - gap: var(--size-4-2); - padding: var(--size-4-2); - background: var(--background-primary-alt); - border-radius: var(--radius-s); - border-left: 4px solid var(--text-muted); -} -.custom-status-icon-input { - width: 40px; - text-align: center; - font-size: 1.2em; - background: transparent; - border: none; - padding: 2px; -} -.custom-status-text-inputs { - flex: 1; -} -.custom-status-name-input { - background: transparent; - border: none; - color: var(--text-normal); - font-weight: var(--font-semibold); - font-size: var(--font-ui-medium); - width: 100%; - margin-bottom: 2px; -} -.custom-status-description-input { - background: transparent; - border: none; - color: var(--text-muted); - font-size: var(--font-ui-smaller); - width: 100%; -} -.custom-status-controls { - display: flex; - align-items: center; - gap: var(--size-4-2); -} -.custom-status-color-input { - width: 32px; - height: 32px; - border-radius: var(--radius-s); - cursor: pointer; -} -.custom-status-remove-btn { - font-size: 16px; -} - -/* styles/components/quick-commands-settings.css */ -.quick-commands-container { - margin-top: 1em; -} - -/* styles/components/status-group.css */ -.status-group { - margin-bottom: 1.5em; -} -.status-group-description { - font-size: 0.85em; - opacity: 0.7; -} -.status-group-items { - margin-left: 1em; -} - -/* styles/components/status-bar-enable-button.css */ -.status-bar-enable-button { - opacity: var(--icon-opacity); -} -.status-bar-enable-button:hover { - opacity: var(--icon-opacity-hover); - background: var(--background-modifier-active); -} - -/* styles/components/status-badge.css */ -.status-badge-container { - display: inline-flex; - flex-direction: column; - align-items: center; - border-radius: var(--radius-s); - transition: all var(--anim-duration-moderate) var(--anim-motion-smooth); - overflow: hidden; - min-width: auto; - max-width: none; -} -.status-badge-item { - display: flex; - align-items: center; - gap: var(--size-2-1); - padding: var(--size-2-1) var(--size-2-3); - transition: all var(--anim-duration-fast) ease; -} -.status-badge-icon { - transition: transform var(--anim-duration-fast) ease; -} -.status-badge-text { - font-weight: var(--font-weight-medium); -} - -/* styles/components/status-bar-group.css */ -.status-bar-group-container { - display: flex; - gap: var(--size-2-1); - flex-wrap: wrap; - align-items: center; -} -@keyframes status-slide-in { - from { - opacity: 0; - transform: scale(0.8) translateY(4px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -/* styles/components/status-bar.css */ -.status-bar-group-row { - display: flex; - align-items: center; - gap: var(--size-4-2); -} - -/* styles/components/collapsible-counter.css */ -.collapsible-counter-container { - color: var(--text-muted); - padding: var(--size-2-1) var(--size-2-3); - border-radius: var(--radius-s); - background-color: var(--background-modifier-border); - border: 1px solid var(--background-modifier-border-hover); - font-weight: var(--font-weight-medium); - transition: all var(--anim-duration-fast) ease; - min-width: 20px; - text-align: center; -} - -/* styles/components/group-label.css */ -.group-label-container { - font-size: var(--font-text-size); - text-transform: uppercase; - letter-spacing: 0.8px; - font-weight: var(--font-weight-semibold); - transition: color var(--anim-duration-fast) ease; -} - -/* styles/components/file-explorer-icon.css */ -.status-wrapper { - position: relative; - display: inline-block; -} -.status-minimal { - display: inline-flex; - align-items: center; - gap: 2px; - margin-left: 6px; - cursor: pointer; - opacity: 0.6; - transition: all 0.2s ease; - padding: 2px; - border-radius: var(--radius-s); -} -.status-minimal:hover { - opacity: 1; - background: color-mix(in srgb, var(--primary-color) 10%, transparent); - transform: scale(1.05); -} -.status-icon { - font-size: 11px; - line-height: 1; - filter: grayscale(0.4); - transition: filter 0.2s ease; -} -.status-minimal:hover .status-icon { - filter: grayscale(0); -} -.status-count { - background: var(--primary-color); - color: var(--text-on-accent); - font-size: var(--font-smaller); - font-weight: var(--font-semibold); - min-width: 12px; - height: 12px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin-left: 1px; - box-shadow: var(--shadow-s); - border: 1px solid var(--background-primary); -} -.status-modal { - position: fixed; - left: 50%; - transform: translateX(-50%); - background: var(--background-primary); - border: var(--border-width) solid var(--background-modifier-border); - border-radius: var(--radius-l); - box-shadow: var(--shadow-l); - z-index: var(--layer-tooltip); - min-width: 280px; - max-width: 360px; - animation: modalIn 0.15s ease-out; - backdrop-filter: blur(8px); -} -.status-modal.bottom { - top: calc(100% + 8px); -} -.status-modal.top { - bottom: calc(100% + 8px); -} -@keyframes modalIn { - from { - opacity: 0; - transform: translateX(-50%) scale(0.95); - } - to { - opacity: 1; - transform: translateX(-50%) scale(1); - } -} -.modal-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: var(--size-4-4) var(--size-4-4) var(--size-4-2) var(--size-4-4); - border-bottom: var(--border-width) solid var(--background-modifier-border); -} -.modal-title { - font-size: var(--font-ui-medium); - font-weight: var(--font-semibold); - color: var(--text-normal); -} -.modal-total { - background: var(--background-modifier-hover); - color: var(--text-muted); - font-size: var(--font-smallest); - font-weight: var(--font-medium); - padding: var(--size-2-1) var(--size-2-3); - border-radius: var(--radius-m); -} -.status-group:not(:last-child) { - margin-bottom: var(--size-4-4); -} -.group-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: var(--size-2-3); -} -.group-name { - font-size: var(--font-ui-small); - font-weight: var(--font-semibold); - color: var(--text-normal); - text-transform: capitalize; -} -.group-count { - background: var(--background-modifier-hover); - color: var(--text-muted); - font-size: var(--font-smallest); - font-weight: var(--font-medium); - padding: var(--size-2-1) var(--size-2-2); - border-radius: var(--radius-s); - min-width: 16px; - text-align: center; -} -.status-list { - display: flex; - flex-direction: column; - gap: var(--size-2-2); -} -.status-item { - display: flex; - align-items: center; - gap: var(--size-4-2); - padding: var(--size-2-3) var(--size-4-2); - background: color-mix(in srgb, var(--item-color) 8%, transparent); - border: var(--border-width) solid color-mix(in srgb, var(--item-color) 20%, transparent); - border-radius: var(--radius-s); - transition: all 0.2s ease; - cursor: pointer; -} -.status-item:hover { - background: color-mix(in srgb, var(--item-color) 12%, transparent); - border-color: color-mix(in srgb, var(--item-color) 35%, transparent); - transform: translateX(2px); -} -.item-icon { - font-size: var(--font-ui-medium); - flex-shrink: 0; -} -.item-info { - display: flex; - flex-direction: column; - gap: var(--size-2-1); - min-width: 0; -} -.item-name { - font-size: var(--font-ui-small); - font-weight: var(--font-medium); - color: var(--text-normal); -} -.item-description { - font-size: var(--font-smallest); - color: var(--text-muted); - line-height: var(--line-height-tight); -} -.modal-arrow { - position: absolute; - left: 50%; - transform: translateX(-50%); - width: 10px; - height: 10px; - background: var(--background-primary); - border: var(--border-width) solid var(--background-modifier-border); - rotate: 45deg; -} -.status-modal.bottom .modal-arrow { - top: -5px; - border-bottom: none; - border-right: none; -} -.status-modal.top .modal-arrow { - bottom: -5px; - border-top: none; - border-left: none; -} - -/* styles/components/status-file-info-popup.css */ -.status-info-popup { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 1000; - background: var(--background-primary); - border: var(--border-width) solid var(--background-modifier-border); - border-radius: var(--radius-l); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); - min-width: 280px; - max-width: 400px; - pointer-events: none; - overflow: hidden; - backdrop-filter: blur(8px); -} -.status-popup-header { - background: linear-gradient(135deg, var(--background-secondary) 0%, var(--background-modifier-hover) 100%); - border-bottom: var(--border-width) solid var(--background-modifier-border); - padding: var(--size-4-2) var(--size-4-3); - font-weight: var(--font-weight-semibold); - color: var(--text-normal); - font-size: var(--font-ui-small); - display: flex; - align-items: center; - gap: var(--size-2-2); -} -.status-header-icon { - font-size: var(--font-ui-medium); - opacity: 0.8; -} -.status-popup-content { - padding: var(--size-4-2); - max-height: none; - overflow: visible; -} -.status-popup-empty { - padding: var(--size-4-4) var(--size-4-3); - text-align: center; - color: var(--text-muted); - font-size: var(--font-ui-smaller); - background: var(--background-primary); - border: var(--border-width) solid var(--background-modifier-border); - border-radius: var(--radius-l); - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 1000; - pointer-events: none; - display: flex; - flex-direction: column; - align-items: center; - gap: var(--size-2-2); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); -} -.status-empty-icon { - font-size: var(--font-ui-large); - opacity: 0.6; -} -.status-group { - margin-bottom: var(--size-4-3); - background: var(--background-secondary); - border-radius: var(--radius-m); - border: var(--border-width) solid var(--background-modifier-border-hover); - overflow: hidden; -} -.status-group:last-child { - margin-bottom: 0; -} -.status-group-header { - padding: var(--size-2-3) var(--size-4-2); - background: linear-gradient(90deg, var(--interactive-accent-hover) 0%, var(--interactive-accent) 100%); - color: var(--text-on-accent); - font-size: var(--font-ui-smaller); - font-weight: var(--font-weight-medium); - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: var(--border-width) solid var(--background-modifier-border); -} -.status-group-name { - text-transform: capitalize; - letter-spacing: 0.3px; -} -.status-group-count { - background: rgba(255, 255, 255, 0.2); - color: var(--text-on-accent); - font-size: var(--font-ui-smaller); - font-weight: var(--font-weight-semibold); - padding: var(--size-2-1) var(--size-2-3); - border-radius: var(--radius-s); - min-width: var(--size-4-3); - text-align: center; - backdrop-filter: blur(4px); -} -.status-group-items { - padding: var(--size-2-3); - display: grid; - grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); - gap: var(--size-2-2); - background: var(--background-primary); -} -.status-item { - display: flex; - flex-direction: column; - gap: var(--size-2-1); - padding: var(--size-2-2) var(--size-2-3); - background: var(--background-modifier-hover); - border-radius: var(--radius-s); - border: var(--border-width) solid var(--background-modifier-border); - transition: all 0.15s ease; - min-width: 0; -} -.status-item:hover { - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - border-color: var(--interactive-accent); -} -.status-description { - color: var(--text-muted); - font-size: var(--font-ui-smaller); - line-height: 1.3; - background: var(--background-primary-alt); - padding: var(--size-2-1) var(--size-2-2); - border-radius: var(--radius-s); - border-left: 2px solid var(--interactive-accent); - font-style: italic; - opacity: 0.8; - word-wrap: break-word; - hyphens: auto; -} - -/* styles/components/grouped-status-view.css */ -.grouped-status-view-container { - height: 100%; - overflow: hidden; -} -.grouped-status-view { - height: 100%; - display: flex; - flex-direction: column; - background-color: var(--background-primary); -} -.grouped-status-header { - padding: var(--size-4-2) var(--size-4-3); - border-bottom: 1px solid var(--background-modifier-border); - background-color: var(--background-secondary); - flex-shrink: 0; -} -.grouped-status-filters { - display: flex; - flex-direction: column; - gap: var(--size-4-2); -} -.grouped-status-note-filter { - display: flex; - flex-direction: column; -} -.grouped-status-note-input { - width: 100%; - padding: var(--size-2-1) var(--size-2-3); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-s); - background: var(--background-primary); - color: var(--text-normal); - font-size: var(--font-ui-medium); - transition: border-color var(--anim-duration-fast) var(--anim-motion-smooth); -} -.groupped-status-note-input:focus { - outline: none; - border-color: var(--interactive-accent); - box-shadow: 0 0 0 2px var(--interactive-accent-hover); -} -.groupped-status-note-input::placeholder { - color: var(--text-muted); -} -.groupped-status-title { - margin: 0 0 var(--size-4-2) 0; - font-size: var(--font-ui-large); - font-weight: var(--font-weight-semibold); - color: var(--text-normal); -} -.groupped-status-content { - flex: 1; - overflow-y: auto; - padding: var(--size-4-2); - max-height: calc(100vh - 120px); -} -.groupped-status-tag-section { - margin-bottom: var(--size-4-4); -} -.groupped-status-tag-section:last-child { - margin-bottom: 0; -} -.groupped-status-tag-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--size-4-2) var(--size-4-3); - cursor: pointer; - transition: background-color var(--anim-duration-fast) var(--anim-motion-smooth); - border-radius: var(--radius-m); - background-color: var(--background-secondary); - border: 1px solid var(--background-modifier-border); - margin-bottom: var(--size-4-2); -} -.groupped-status-tag-header:hover { - background-color: var(--background-modifier-hover); -} -.groupped-status-tag-content { - padding-left: var(--size-4-2); -} -.groupped-status-group { - margin-bottom: var(--size-4-2); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-m); - background-color: var(--background-primary); - overflow: hidden; -} -.groupped-status-group-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--size-4-2) var(--size-4-3); - cursor: pointer; - transition: background-color var(--anim-duration-fast) var(--anim-motion-smooth); - border-bottom: 1px solid transparent; -} -.groupped-status-group-header:hover { - background-color: var(--background-modifier-hover); -} -.groupped-status-group-header:active { - background-color: var(--background-modifier-active); -} -.groupped-status-group-info { - display: flex; - align-items: center; - gap: var(--size-2-1); -} -.groupped-status-files { - border-top: 1px solid var(--background-modifier-border); - background-color: var(--background-secondary); -} -.groupped-status-files-list { - max-height: 300px; - overflow-y: auto; -} -.groupped-status-file-item { - display: flex; - flex-direction: column; - padding: var(--size-2-3) var(--size-4-3); - cursor: pointer; - transition: background-color var(--anim-duration-fast) var(--anim-motion-smooth); - border-bottom: 1px solid var(--background-modifier-border-hover); -} -.groupped-status-file-item:last-child { - border-bottom: none; -} -.groupped-status-file-item:hover { - background-color: var(--background-modifier-hover); -} -.groupped-status-file-item:active { - background-color: var(--background-modifier-active); -} -.groupped-status-file-name { - font-weight: var(--font-weight-medium); - color: var(--text-normal); - margin-bottom: var(--size-2-1); - font-size: var(--font-ui-medium); -} -.groupped-status-file-path { - font-size: var(--font-ui-small); - color: var(--text-muted); - opacity: 0.8; -} -.groupped-status-loading { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - font-size: var(--font-ui-medium); - color: var(--text-muted); -} -.groupped-status-empty { - display: flex; - align-items: center; - justify-content: center; - padding: var(--size-4-6); - font-size: var(--font-ui-medium); - color: var(--text-muted); - text-align: center; -} -@media (max-width: 768px) { - .groupped-status-header { - padding: var(--size-4-1) var(--size-4-2); - } - .groupped-status-content { - padding: var(--size-4-1); - } - .groupped-status-group-header { - padding: var(--size-4-1) var(--size-4-2); - } - .groupped-status-file-item { - padding: var(--size-2-2) var(--size-4-2); - } -} -.theme-dark .groupped-status-view { - border-color: var(--background-modifier-border); -} -.theme-dark .groupped-status-group { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -} -.theme-light .groupped-status-group { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); -} -.groupped-status-content::-webkit-scrollbar { - width: var(--scrollbar-width); -} -.groupped-status-content::-webkit-scrollbar-track { - background: var(--background-secondary); -} -.groupped-status-content::-webkit-scrollbar-thumb { - background: var(--scrollbar-thumb-bg); - border-radius: var(--radius-s); -} -.groupped-status-content::-webkit-scrollbar-thumb:hover { - background: var(--scrollbar-thumb-bg-hover); -} -.groupped-status-load-more { - display: flex; - justify-content: center; - padding: var(--size-4-2); - border-top: 1px solid var(--background-modifier-border-hover); -} -.groupped-status-load-btn { - padding: var(--size-2-2) var(--size-4-2); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-s); - background-color: var(--interactive-normal); - color: var(--text-normal); - cursor: pointer; - transition: all var(--anim-duration-fast) var(--anim-motion-smooth); - font-size: var(--font-ui-small); - font-weight: var(--font-weight-medium); -} -.groupped-status-load-btn:hover { - background-color: var(--interactive-hover); - transform: translateY(-1px); -} -.groupped-status-load-btn:active { - background-color: var(--interactive-active); - transform: translateY(0); -} -.groupped-status-files-list::-webkit-scrollbar { - width: var(--scrollbar-width); -} -.groupped-status-files-list::-webkit-scrollbar-track { - background: var(--background-secondary); -} -.groupped-status-files-list::-webkit-scrollbar-thumb { - background: var(--scrollbar-thumb-bg); - border-radius: var(--radius-s); -} -.groupped-status-files-list::-webkit-scrollbar-thumb:hover { - background: var(--scrollbar-thumb-bg-hover); -} - -/* styles/components/status-dashboard.css */ -.status-dashboard-view-container { - height: 100%; - overflow: hidden; -} -.status-dashboard { - height: 100%; - display: flex; - flex-direction: column; - background-color: var(--background-primary); -} -.status-dashboard-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--size-4-3) var(--size-4-4); - border-bottom: 1px solid var(--background-modifier-border); - background-color: var(--background-secondary); - flex-shrink: 0; -} -.status-dashboard-title { - margin: 0; - font-size: var(--font-ui-larger); - font-weight: var(--font-weight-bold); - color: var(--text-normal); -} -.status-dashboard-refresh { - padding: var(--size-2-2) var(--size-2-3); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-s); - background-color: var(--interactive-normal); - color: var(--text-normal); - cursor: pointer; - transition: all var(--anim-duration-fast) var(--anim-motion-smooth); - font-size: var(--font-ui-medium); -} -.status-dashboard-refresh:hover { - background-color: var(--interactive-hover); - transform: rotate(90deg); -} -.status-dashboard-loading { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - font-size: var(--font-ui-medium); - color: var(--text-muted); -} -.status-dashboard-content { - flex: 1; - overflow-y: auto; - padding: var(--size-4-3); - display: flex; - flex-direction: column; - gap: var(--size-4-4); - max-height: calc(100vh - 80px); -} -.status-dashboard-section { - background-color: var(--background-secondary); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-m); - overflow: hidden; -} -.status-dashboard-section-header { - padding: var(--size-4-2) var(--size-4-3); - background-color: var(--background-modifier-hover); - border-bottom: 1px solid var(--background-modifier-border); -} -.status-dashboard-section-header h3 { - margin: 0; - font-size: var(--font-ui-large); - font-weight: var(--font-weight-semibold); - color: var(--text-normal); -} -.status-dashboard-current-note { - padding: var(--size-4-3); -} -.current-note-info { - margin-bottom: var(--size-4-3); - padding-bottom: var(--size-4-2); - border-bottom: 1px solid var(--background-modifier-border-hover); -} -.current-note-name { - font-size: var(--font-ui-large); - font-weight: var(--font-weight-semibold); - color: var(--text-normal); - margin-bottom: var(--size-2-1); -} -.current-note-path { - font-size: var(--font-ui-small); - color: var(--text-muted); - margin-bottom: var(--size-2-1); - font-family: var(--font-monospace); -} -.current-note-modified { - font-size: var(--font-ui-smaller); - color: var(--text-faint); - font-style: italic; -} -.current-note-statuses { - display: flex; - flex-direction: column; - gap: var(--size-4-2); -} -.current-note-tag-group { - display: flex; - flex-direction: column; - gap: var(--size-2-2); -} -.current-note-status-list { - display: flex; - flex-wrap: wrap; - gap: var(--size-2-2); -} -.current-note-no-status { - font-size: var(--font-ui-small); - color: var(--text-muted); - font-style: italic; - padding: var(--size-2-1) var(--size-2-3); - background-color: var(--background-modifier-border-hover); - border-radius: var(--radius-s); -} -.current-note-empty { - text-align: center; - color: var(--text-muted); - font-style: italic; - padding: var(--size-4-4); -} -.vault-overview { - padding: var(--size-4-3); -} -.vault-stats-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: var(--size-4-2); -} -.vault-stat-card { - text-align: center; - padding: var(--size-4-2); - background-color: var(--background-primary); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-m); - transition: all var(--anim-duration-fast) var(--anim-motion-smooth); -} -.vault-stat-card:hover { - background-color: var(--background-modifier-hover); - transform: translateY(-2px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); -} -.vault-stat-number { - font-size: var(--font-ui-largest); - font-weight: var(--font-weight-bold); - color: var(--interactive-accent); - margin-bottom: var(--size-2-1); -} -.vault-stat-label { - font-size: var(--font-ui-small); - color: var(--text-muted); - font-weight: var(--font-weight-medium); - text-transform: uppercase; - letter-spacing: 0.5px; -} -.status-distribution { - padding: var(--size-4-3); -} -.status-chart { - display: flex; - flex-direction: column; - gap: var(--size-4-2); -} -.status-chart-item { - display: flex; - flex-direction: column; - gap: var(--size-2-1); -} -.status-chart-info { - display: flex; - align-items: center; - gap: var(--size-2-3); -} -.status-chart-count { - font-size: var(--font-ui-small); - color: var(--text-muted); - font-weight: var(--font-weight-medium); -} -.status-chart-bar { - height: 8px; - background-color: var(--background-modifier-border); - border-radius: var(--radius-s); - overflow: hidden; - position: relative; -} -.status-chart-fill { - height: 100%; - transition: width var(--anim-duration-moderate) var(--anim-motion-smooth); - border-radius: var(--radius-s); -} -.status-distribution-empty { - text-align: center; - color: var(--text-muted); - font-style: italic; - padding: var(--size-4-4); -} -.quick-actions { - padding: var(--size-4-3); - display: flex; - flex-wrap: wrap; - gap: var(--size-4-2); -} -.quick-action-btn { - padding: var(--size-2-3) var(--size-4-2); - border: 1px solid var(--background-modifier-border); - border-radius: var(--radius-m); - background-color: var(--interactive-normal); - color: var(--text-normal); - cursor: pointer; - transition: all var(--anim-duration-fast) var(--anim-motion-smooth); - font-size: var(--font-ui-medium); - font-weight: var(--font-weight-medium); - text-decoration: none; - flex: 1; - min-width: 200px; - text-align: center; -} -.quick-action-btn:hover { - background-color: var(--interactive-hover); - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} -.quick-action-btn:active { - background-color: var(--interactive-active); - transform: translateY(0); -} -@media (max-width: 768px) { - .status-dashboard-header { - padding: var(--size-4-2) var(--size-4-3); - } - .status-dashboard-content { - padding: var(--size-4-2); - } - .status-dashboard-current-note { - padding: var(--size-4-2); - } - .vault-overview { - padding: var(--size-4-2); - } - .vault-stats-grid { - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); - gap: var(--size-4-1); - } - .quick-actions { - flex-direction: column; - } - .quick-action-btn { - min-width: auto; - } -} -.theme-dark .status-dashboard-section { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -} -.theme-dark .vault-stat-card:hover { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); -} -.theme-light .status-dashboard-section { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -} -.theme-light .vault-stat-card:hover { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); -} -.status-dashboard-content::-webkit-scrollbar { - width: var(--scrollbar-width); -} -.status-dashboard-content::-webkit-scrollbar-track { - background: var(--background-secondary); -} -.status-dashboard-content::-webkit-scrollbar-thumb { - background: var(--scrollbar-thumb-bg); - border-radius: var(--radius-s); -} -.status-dashboard-content::-webkit-scrollbar-thumb:hover { - background: var(--scrollbar-thumb-bg-hover); -} - -/* styles/index.css */ +.status-bar-enable-button{cursor:pointer;opacity:var(--icon-opacity);transition:opacity var(--anim-duration-fast) ease}.status-bar-enable-button:hover{opacity:var(--icon-opacity-hover)}.status-bar-group-row{display:flex;align-items:center;gap:var(--size-4-2)}.status-bar-group-container{display:flex;gap:var(--size-2-1);flex-wrap:wrap;align-items:center}@keyframes status-slide-in{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.setting-item-full{width:100%}.setting-item-vertical{flex-direction:column;align-items:flex-start;gap:var(--size-2-2)}.template-item{border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);margin-bottom:var(--size-4-2);padding:var(--size-4-3);background:var(--background-primary-alt);cursor:pointer;transition:all var(--anim-duration-fast) ease}.template-item:hover{background:var(--background-modifier-hover)}.template-item.enabled{background:var(--background-modifier-success);border-color:var(--interactive-success)}.template-checkbox{pointer-events:none}.template-statuses{margin-top:var(--size-2-2);display:flex;flex-wrap:wrap;gap:var(--size-2-1)}.custom-status-item{background:var(--background-secondary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);padding:var(--size-4-3);margin-bottom:var(--size-4-2);transition:all var(--anim-duration-fast) ease}.custom-status-item:hover{border-color:var(--interactive-hover)}.custom-status-item__row{display:flex;align-items:end;gap:var(--size-4-2);margin-bottom:var(--size-4-2)}.custom-status-item__field{display:flex;flex-direction:column;gap:var(--size-2-1)}.custom-status-item__field--name,.custom-status-item__field--description{flex:2;min-width:120px}.custom-status-item__field--color{flex:0 0 auto}.custom-status-item__field--reorder,.custom-status-item__field--actions{flex:0 0 auto;padding-top:var(--size-4-1)}.custom-status-item__label{font-size:var(--font-ui-smaller);font-weight:var(--font-medium);color:var(--text-muted);margin-bottom:var(--size-2-1)}.custom-status-item__label--required{color:var(--text-error)}.custom-status-item__input--icon{width:50px!important;text-align:center;font-size:1.2em}.custom-status-item__input--name{font-weight:var(--font-medium)}.custom-status-item__input--name.custom-status-item__input--invalid{border-color:var(--text-error)!important;background:var(--background-modifier-error)!important}.custom-status-item__input--description{color:var(--text-muted)}.custom-status-item__input--color{width:40px!important;height:32px!important;border-radius:var(--radius-s);cursor:pointer;border:2px solid var(--background-modifier-border)!important}.custom-status-item__input--color:hover{border-color:var(--interactive-hover)!important}.custom-status-item__remove-btn{width:32px;height:32px;border-radius:var(--radius-s);background:var(--background-modifier-error);color:var(--text-on-accent);border:none;cursor:pointer;font-size:18px;font-weight:700;transition:all var(--anim-duration-fast) ease}.custom-status-item__remove-btn:hover{background:var(--text-error);transform:scale(1.05)}.custom-status-item__reorder-buttons{display:flex;flex-direction:column;gap:2px}.custom-status-item__reorder-btn{width:24px;height:24px;border-radius:var(--radius-s);background:var(--background-modifier-border);color:var(--text-normal);border:none;cursor:pointer;font-size:12px;font-weight:700;transition:all var(--anim-duration-fast) ease;display:flex;align-items:center;justify-content:center;line-height:1}.custom-status-item__reorder-btn:hover:not(:disabled){background:var(--interactive-hover);transform:scale(1.05)}.custom-status-item__reorder-btn:disabled{opacity:.5;cursor:not-allowed}.custom-status-item__preview{display:flex;align-items:center;gap:var(--size-2-2);padding:var(--size-2-3) var(--size-4-2);background:var(--background-primary-alt);border-radius:var(--radius-s);border-left:3px solid var(--background-modifier-border);font-size:var(--font-ui-small)}.custom-status-item__preview-icon{font-size:1.1em;min-width:20px;text-align:center}.custom-status-item__preview-text{font-weight:var(--font-medium)}.custom-status-item__preview-desc{color:var(--text-muted);font-style:italic}.custom-status-item__preview-desc:before{content:"\2014 "}.custom-status-item__error{color:var(--text-error);font-size:var(--font-ui-smaller);margin-top:var(--size-2-1);padding:var(--size-2-1) var(--size-2-2);background:var(--background-modifier-error);border-radius:var(--radius-s);border-left:3px solid var(--text-error)}.custom-status-list__empty{text-align:center;padding:var(--size-4-4) var(--size-4-2);color:var(--text-muted);font-style:italic;border:2px dashed var(--background-modifier-border);border-radius:var(--radius-m);background:var(--background-primary-alt)}.custom-status-list__empty p{margin:0}.status-group{margin-bottom:var(--size-4-4);padding:var(--size-4-3);background:var(--background-primary-alt);border-radius:var(--radius-m);border:1px solid var(--background-modifier-border)}.status-group__header{margin-bottom:var(--size-4-2);padding-bottom:var(--size-2-2);border-bottom:1px solid var(--background-modifier-border)}.status-group__title{font-weight:var(--font-semibold);color:var(--text-normal);font-size:var(--font-ui-medium)}.status-group__description{font-size:var(--font-ui-smaller);color:var(--text-muted);margin-top:var(--size-2-1);line-height:var(--line-height-tight)}.status-group__items{display:flex;flex-direction:column;gap:var(--size-2-2)}.status-selector{display:flex;align-items:center;justify-content:space-between;padding:var(--size-2-3) var(--size-4-2);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);background:var(--background-primary);cursor:pointer;transition:all var(--anim-duration-fast) ease;position:relative}.status-selector:hover{background:var(--background-modifier-hover);border-color:var(--background-modifier-border-hover)}.status-selector--selected{background:var(--background-modifier-success);border-color:var(--interactive-success)}.status-selector--selected:hover{background:var(--background-modifier-success-hover)}.status-selector__content{flex:1;min-width:0}.status-selector__status{display:flex;align-items:center;gap:var(--size-2-2);margin-bottom:var(--size-2-1)}.status-selector__icon{font-size:var(--font-ui-medium);width:var(--size-4-3);text-align:center;flex-shrink:0}.status-selector__name{font-weight:var(--font-medium);color:var(--text-normal)}.status-selector__description{font-size:var(--font-ui-smaller);color:var(--text-muted);line-height:var(--line-height-tight)}.status-selector__checkbox{margin-left:var(--size-4-2);pointer-events:none;flex-shrink:0}.quick-commands-container{margin-top:var(--size-4-2)}.note-status-options{max-height:300px;overflow-y:auto;border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);background:var(--background-primary)}.note-status-chips{display:flex;flex-wrap:wrap;gap:var(--size-2-2);min-height:32px;align-items:center}.selectable-list-item{display:flex;align-items:center;gap:var(--size-4-2);padding:var(--size-2-3) var(--size-4-2);cursor:pointer;border-bottom:1px solid var(--background-modifier-border);transition:background var(--anim-duration-fast) ease}.selectable-list-item:hover{background:var(--background-modifier-hover)}.selectable-list-item[data-focused=true]{outline:2px solid var(--interactive-accent);outline-offset:-2px}.selectable-list-item[data-selected=true]{background:var(--background-modifier-hover)}.selectable-list-item-icon{font-size:16px;min-width:20px}.selectable-list-item-content{flex:1;font-size:var(--font-ui-small)}.selectable-list-item-check{color:var(--interactive-accent)}.status-dashboard-view-container{height:100%;overflow:hidden}.status-dashboard{background:var(--background-primary)}.status-dashboard-header{display:flex;justify-content:space-between;align-items:center;padding:var(--size-4-3) var(--size-4-4);background:var(--background-secondary);border-bottom:1px solid var(--background-modifier-border)}.status-dashboard-title{margin:0;font-size:var(--font-ui-larger);font-weight:var(--font-bold)}.status-dashboard-refresh{padding:var(--size-2-2) var(--size-2-3);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);background:var(--interactive-normal);color:var(--text-normal);cursor:pointer;font-size:var(--font-ui-medium);transition:all var(--anim-duration-fast) ease}.status-dashboard-refresh:hover{background:var(--interactive-hover);transform:rotate(90deg)}.status-dashboard-content{flex:1;overflow-y:auto;padding:var(--size-4-3);display:flex;flex-direction:column;gap:var(--size-4-4)}.status-dashboard-section{background:var(--background-secondary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);overflow:hidden}.status-dashboard-section-header{padding:var(--size-4-2) var(--size-4-3);background:var(--background-modifier-hover);border-bottom:1px solid var(--background-modifier-border)}.status-dashboard-section-header h3{margin:0;font-size:var(--font-ui-large);font-weight:var(--font-semibold)}.status-dashboard-current-note{padding:var(--size-4-3)}.current-note-info{margin-bottom:var(--size-4-3);padding-bottom:var(--size-4-2);border-bottom:1px solid var(--background-modifier-border)}.current-note-name{font-size:var(--font-ui-large);font-weight:var(--font-semibold);margin-bottom:var(--size-2-1)}.current-note-path{font-size:var(--font-ui-small);color:var(--text-muted);font-family:var(--font-monospace);margin-bottom:var(--size-2-1)}.current-note-modified{font-size:var(--font-ui-smaller);color:var(--text-faint);font-style:italic}.current-note-statuses{display:flex;flex-direction:column;gap:var(--size-4-2)}.current-note-tag-group{display:flex;flex-direction:column;gap:var(--size-2-2)}.current-note-status-list{display:flex;flex-wrap:wrap;gap:var(--size-2-2)}.current-note-no-status{font-size:var(--font-ui-small);color:var(--text-muted);font-style:italic;padding:var(--size-2-1) var(--size-2-3);background:var(--background-modifier-border);border-radius:var(--radius-s)}.current-note-empty{text-align:center;color:var(--text-muted);font-style:italic;padding:var(--size-4-4)}.vault-overview{padding:var(--size-4-3)}.vault-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--size-4-2)}.vault-stat-card{text-align:center;padding:var(--size-4-2);background:var(--background-primary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);transition:all var(--anim-duration-fast) ease}.vault-stat-card:hover{background:var(--background-modifier-hover);transform:translateY(-2px);box-shadow:var(--shadow-s)}.vault-stat-number{font-size:var(--font-ui-largest);font-weight:var(--font-bold);color:var(--interactive-accent);margin-bottom:var(--size-2-1)}.vault-stat-label{font-size:var(--font-ui-small);color:var(--text-muted);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.05em}.status-distribution{padding:var(--size-4-3)}.status-chart{display:flex;flex-direction:column;gap:var(--size-4-2)}.status-chart-item{display:flex;flex-direction:column;gap:var(--size-2-1)}.status-chart-item--clickable{cursor:pointer;transition:all var(--anim-duration-fast) ease;padding:var(--size-2-2);border-radius:var(--radius-s)}.status-chart-item--clickable:hover{background:var(--background-modifier-hover);transform:translateY(-1px)}.status-chart-info{display:flex;align-items:center;gap:var(--size-2-3)}.status-chart-count{font-size:var(--font-ui-small);color:var(--text-muted);font-weight:var(--font-medium)}.status-chart-bar{height:8px;background:var(--background-modifier-border);border-radius:var(--radius-s);overflow:hidden}.status-chart-fill{height:100%;transition:width var(--anim-duration-moderate) ease}.status-distribution-empty{text-align:center;color:var(--text-muted);font-style:italic;padding:var(--size-4-4)}.quick-actions{padding:var(--size-4-3);display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--size-4-3)}.quick-actions-group{display:flex;flex-direction:column;gap:var(--size-2-2)}.quick-actions-group-title{font-size:var(--font-ui-small);font-weight:var(--font-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;padding-bottom:var(--size-2-1);border-bottom:1px solid var(--background-modifier-border);margin-bottom:var(--size-2-1)}.quick-action-btn{width:100%;padding:var(--size-2-3) var(--size-4-2);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);background:var(--interactive-normal);color:var(--text-normal);cursor:pointer;font-size:var(--font-ui-medium);font-weight:var(--font-medium);text-align:left;display:flex;align-items:center;gap:var(--size-2-2);transition:all var(--anim-duration-fast) ease}.quick-action-btn:hover:not(:disabled){background:var(--interactive-hover);transform:translateY(-1px);box-shadow:var(--shadow-s)}.quick-action-btn:disabled{opacity:.5;cursor:not-allowed;background:var(--background-modifier-border);color:var(--text-faint)}@media (max-width: 768px){.quick-actions{grid-template-columns:1fr}}.status-dashboard-loading{display:flex;align-items:center;justify-content:center;height:100%;font-size:var(--font-ui-medium);color:var(--text-muted)}.status-dashboard-disabled{display:flex;align-items:center;justify-content:center;height:100%;padding:var(--size-4-4);text-align:center;font-size:var(--font-ui-medium);color:var(--text-muted);background:var(--background-secondary);border:2px dashed var(--background-modifier-border);border-radius:var(--radius-m);margin:var(--size-4-4)}.status-dashboard-content::-webkit-scrollbar{width:var(--scrollbar-width)}.status-dashboard-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:var(--radius-s)}.status-dashboard-content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-active-bg)}.grouped-status-view-container{height:100%;overflow:hidden}.grouped-status-header{padding:var(--size-4-2) var(--size-4-3);background:var(--background-secondary);border-bottom:1px solid var(--background-modifier-border)}.grouped-status-title{margin:0 0 var(--size-4-2) 0;font-size:var(--font-ui-large);font-weight:var(--font-semibold)}.grouped-status-filters{display:flex;flex-direction:column;gap:var(--size-4-2)}.grouped-status-note-input{width:100%;padding:var(--size-2-2) var(--size-2-3);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);background:var(--background-primary);color:var(--text-normal);font-size:var(--font-ui-medium)}.grouped-status-note-input:focus{outline:none;border-color:var(--interactive-accent);box-shadow:0 0 0 2px var(--background-modifier-accent)}.grouped-status-content{flex:1;overflow-y:auto;padding:var(--size-4-2)}.grouped-status-tag-section{margin-bottom:var(--size-4-3)}.grouped-status-tag-header{display:flex;justify-content:space-between;align-items:center;padding:var(--size-4-2) var(--size-4-3);background:var(--background-secondary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);cursor:pointer;transition:all var(--anim-duration-fast) ease;margin-bottom:var(--size-4-2)}.grouped-status-tag-header:hover{background:var(--background-modifier-hover)}.grouped-status-tag-content{padding-left:var(--size-4-2)}.grouped-status-group{margin-bottom:var(--size-4-2);background:var(--background-primary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);overflow:hidden;box-shadow:0 1px 3px #0000001a;transition:box-shadow var(--anim-duration-fast) ease}.grouped-status-group:hover{box-shadow:0 2px 8px #00000026}.grouped-status-group__header{display:flex;justify-content:space-between;align-items:center;padding:var(--size-4-2) var(--size-4-3);cursor:pointer;transition:background var(--anim-duration-fast) ease;position:relative}.grouped-status-group__header:hover{background:var(--background-modifier-hover)}.grouped-status-group__header:focus{outline:2px solid var(--color-accent);outline-offset:-2px}.grouped-status-group__status{display:flex;align-items:center;gap:var(--size-2-2);min-width:0;flex:1}.grouped-status-group__template-badge{display:inline-flex;align-items:center;padding:var(--size-2-1) var(--size-2-2);background:var(--background-modifier-border);border-radius:var(--radius-s);font-size:var(--font-ui-smaller);color:var(--text-muted);font-weight:var(--font-medium)}.grouped-status-group__info{display:flex;align-items:center;gap:var(--size-2-2);margin-left:auto}.grouped-status-files{background:var(--background-secondary);border-top:1px solid var(--background-modifier-border)}.grouped-status-files-list{max-height:300px;overflow-y:auto}.grouped-status-file-item{padding:var(--size-2-3) var(--size-4-3);cursor:pointer;transition:background var(--anim-duration-fast) ease;border-bottom:1px solid var(--background-modifier-border-hover)}.grouped-status-file-item:hover{background:var(--background-modifier-hover)}.grouped-status-file-item:last-child{border-bottom:none}.grouped-status-file-name{font-weight:var(--font-medium);color:var(--text-normal);margin-bottom:2px}.grouped-status-file-path{font-size:var(--font-ui-small);color:var(--text-muted);opacity:.8}.grouped-status-load-more{display:flex;justify-content:center;padding:var(--size-4-2);border-top:1px solid var(--background-modifier-border)}.grouped-status-load-btn{padding:var(--size-2-2) var(--size-4-2);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);background:var(--interactive-normal);color:var(--text-normal);cursor:pointer;font-size:var(--font-ui-small);font-weight:var(--font-medium);transition:all var(--anim-duration-fast) ease}.grouped-status-load-btn:hover{background:var(--interactive-hover);transform:translateY(-1px)}.grouped-status-loading,.grouped-status-empty{display:flex;align-items:center;justify-content:center;padding:var(--size-4-6);color:var(--text-muted);font-size:var(--font-ui-medium)}.grouped-status-view-disabled{display:flex;align-items:center;justify-content:center;height:100%;padding:var(--size-4-4);text-align:center;font-size:var(--font-ui-medium);color:var(--text-muted);background:var(--background-secondary);border:2px dashed var(--background-modifier-border);border-radius:var(--radius-m);margin:var(--size-4-4)}.grouped-status-content::-webkit-scrollbar,.grouped-status-files-list::-webkit-scrollbar{width:var(--scrollbar-width)}.grouped-status-content::-webkit-scrollbar-thumb,.grouped-status-files-list::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:var(--radius-s)}.grouped-status-content::-webkit-scrollbar-thumb:hover,.grouped-status-files-list::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-active-bg)}.grouped-status-filters__template{display:flex;flex-direction:column;gap:var(--size-2-1)}.grouped-status-filters__template-select{width:100%;padding:var(--size-2-2) var(--size-2-3);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);background:var(--background-primary);color:var(--text-normal);font-size:var(--font-ui-small);cursor:pointer}.grouped-status-filters__template-select:focus{outline:none;border-color:var(--interactive-accent);box-shadow:0 0 0 2px var(--background-modifier-accent)}.grouped-status-filters__note{display:flex;flex-direction:column;gap:var(--size-2-1)}.grouped-status-filters__note-input{width:100%;padding:var(--size-2-2) var(--size-2-3);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);background:var(--background-primary);color:var(--text-normal);font-size:var(--font-ui-small)}.grouped-status-filters__note-input:focus{outline:none;border-color:var(--interactive-accent);box-shadow:0 0 0 2px var(--background-modifier-accent)}.grouped-status-group__status{display:flex;align-items:center;gap:var(--size-2-2)}.grouped-status-group__template-badge{background:var(--background-modifier-border);color:var(--text-muted);padding:var(--size-2-1) var(--size-2-2);border-radius:var(--radius-s);font-size:var(--font-ui-smaller);font-weight:var(--font-medium);text-transform:capitalize;white-space:nowrap}.custom-icon{display:inline-flex}.custom-icon__absolute-right{position:absolute;right:0}.status-wrapper{position:relative;display:inline-block}.status-minimal{display:inline-flex;align-items:center;gap:2px;margin-left:var(--size-2-2);padding:2px;border-radius:var(--radius-s);cursor:pointer;opacity:.7;transition:all var(--anim-duration-fast) ease}.status-minimal:hover{opacity:1;background:var(--background-modifier-hover);transform:scale(1.05)}.status-minimal[data-status-color] .status-minimal__count{background:var(--interactive-accent)}.status-minimal__icon{font-size:11px;line-height:1;filter:grayscale(.2);transition:filter var(--anim-duration-fast) ease}.status-minimal:hover .status-minimal__icon{filter:grayscale(0)}.status-minimal__count{min-width:14px;height:14px;padding:0 3px;background:var(--interactive-accent);color:var(--text-on-accent);font-size:var(--font-ui-smaller);font-weight:var(--font-semibold);border-radius:var(--radius-m);display:flex;align-items:center;justify-content:center}.status-info-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:var(--layer-popover);background:var(--background-primary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);box-shadow:var(--shadow-l);min-width:280px;max-width:400px;overflow:hidden;pointer-events:none}.status-popup-header{display:flex;align-items:center;gap:var(--size-2-2);padding:var(--size-4-2) var(--size-4-3);background:var(--background-secondary);border-bottom:1px solid var(--background-modifier-border);font-weight:var(--font-semibold);font-size:var(--font-ui-small)}.status-popup-content{padding:var(--size-4-2)}.status-popup-empty{padding:var(--size-4-4);text-align:center;color:var(--text-muted);font-style:italic}.status-group{margin-bottom:var(--size-4-2)}.status-group:last-child{margin-bottom:0}.status-group__header{display:flex;justify-content:space-between;align-items:center;padding:var(--size-2-2) var(--size-2-3);background:var(--background-secondary-alt);border-radius:var(--radius-s);margin-bottom:var(--size-2-2);border:1px solid var(--background-modifier-border);transition:background var(--anim-duration-fast) ease}.status-group__header:hover{background:var(--background-modifier-hover)}.status-group__name{text-transform:capitalize;font-weight:var(--font-medium);font-size:var(--font-ui-smaller);color:var(--text-normal)}.status-group__count{display:inline-flex;align-items:center;padding:var(--size-2-1) var(--size-2-2);background:var(--background-modifier-border);border-radius:var(--radius-s);font-size:var(--font-ui-smaller);color:var(--text-muted);font-weight:var(--font-medium);min-width:20px;justify-content:center}.status-group__items{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--size-2-2);padding:0 var(--size-2-1)}.status-item{display:flex;flex-direction:column;gap:var(--size-2-1);padding:var(--size-2-2);background:var(--background-primary-alt);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s)}.status-description{font-size:var(--font-ui-smaller);color:var(--text-muted);line-height:1.4}.group-label-container{display:flex;align-items:center;gap:var(--size-2-2);font-size:var(--font-ui-small);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);transition:color var(--anim-duration-fast) ease}.group-label-container--highlighted{color:var(--text-normal)}.group-label-container svg{width:16px;height:16px;opacity:.8}.collapsible-counter-container{padding:var(--size-2-1) var(--size-2-3);border-radius:var(--radius-s);background:var(--background-modifier-border);border:1px solid var(--background-modifier-border-hover);color:var(--text-muted);font-weight:var(--font-medium);font-size:var(--font-ui-smaller);cursor:pointer;transition:all var(--anim-duration-fast) ease;min-width:28px;text-align:center}.collapsible-counter-container:hover{background:var(--background-modifier-border-hover);color:var(--text-normal)}.note-status-chip{display:inline-flex;align-items:center;gap:var(--size-2-2);padding:var(--size-2-1) var(--size-2-3);background:var(--interactive-accent);color:var(--text-on-accent);border-radius:var(--radius-s);font-size:var(--font-ui-smaller);cursor:pointer;transition:all var(--anim-duration-fast) ease}.note-status-chip:hover{opacity:.9;transform:translateY(-1px)}.note-status-chip--removing{opacity:.5;transform:scale(.95)}.note-status-chip__icon{font-size:1em}.note-status-chip__text{font-weight:var(--font-medium)}.note-status-chip__remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;margin-left:var(--size-2-1)}.note-status-chip__remove:hover{background:rgba(255,255,255,.3)}.status-badge-container{display:inline-flex;align-items:center;padding:var(--size-2-1) var(--size-2-3);border-radius:var(--radius-s);transition:all var(--anim-duration-fast) ease;cursor:pointer}.status-badge-item{display:flex;align-items:center;gap:var(--size-2-1)}.status-badge-icon{font-size:var(--font-ui-small)}.status-badge-text{font-weight:var(--font-medium);font-size:var(--font-ui-small)}.template-status-chip{display:inline-flex;align-items:center;gap:var(--size-2-1);padding:var(--size-2-1) var(--size-2-3);background:var(--background-secondary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);font-size:var(--font-ui-smaller)}.template-status-color-dot{width:8px;height:8px;border-radius:50%;background-color:var(--dot-color)}