feat: enhance notes list UI with improved visual hierarchy
- Added new folder creation endpoint with support for path or parent/name parameters - Updated notes list styling with consistent row cards and active state indicators - Improved theme-aware color variables for better light/dark mode contrast - Added visual depth with subtle gradient overlays and active item highlighting - Implemented consistent styling between virtual and standard note list views - Enhanced new note button styling for better visibility
This commit is contained in:
+112
-34
@@ -114,12 +114,12 @@ html:not(.dark)[data-theme="light"] {
|
||||
--border: #e5e7eb;
|
||||
|
||||
/* Brand colors */
|
||||
--primary: #3b82f6;
|
||||
--brand: #3a68d1;
|
||||
--brand-700: #2f56ab;
|
||||
--brand-800: #254487;
|
||||
--secondary: #8b5cf6;
|
||||
--accent: #22c55e;
|
||||
--primary: #666666;
|
||||
--brand: #666666;
|
||||
--brand-700: #555555;
|
||||
--brand-800: #444444;
|
||||
--secondary: #888888;
|
||||
--accent: #999999;
|
||||
|
||||
/* Status colors */
|
||||
--success: #22c55e;
|
||||
@@ -153,6 +153,84 @@ html:not(.dark)[data-theme="light"] {
|
||||
--md-table-row-alt: color-mix(in oklab, var(--surface-1) 96%, white 0%);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
THÈME PURE WHITE - DARK (theme id is "light")
|
||||
============================================================================ */
|
||||
html.dark[data-theme="light"] {
|
||||
color-scheme: dark;
|
||||
|
||||
/* Fonts — Pure White */
|
||||
--font-ui: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
|
||||
|
||||
/* Backgrounds - Dark version for readability */
|
||||
--bg: #0f0f0f;
|
||||
--bg-main: #6d6c6c;
|
||||
--bg-muted: #262626;
|
||||
--card: #6d6c6c;
|
||||
--card-bg: #6d6c6c;
|
||||
--elevated: #262626;
|
||||
--sidebar-bg: #0f0f0f;
|
||||
--surface-1: #0f0f0f;
|
||||
--surface-2: #6d6c6c;
|
||||
|
||||
/* Text */
|
||||
--fg: #cccccc;
|
||||
--text-main: #cccccc;
|
||||
--text-muted: #aaaaaa;
|
||||
--muted: #b3b1b1;
|
||||
|
||||
/* Borders */
|
||||
--border: #333333;
|
||||
|
||||
/* Brand colors - Changed to grays */
|
||||
--primary: #afafaf;
|
||||
--brand: #888888;
|
||||
--brand-700: #666666;
|
||||
--brand-800: #555555;
|
||||
--secondary: #777777;
|
||||
--accent: #555555;
|
||||
|
||||
/* Status colors */
|
||||
--success: #4ade80;
|
||||
--warning: #fbbf24;
|
||||
--danger: #f87171;
|
||||
--info: #60a5fa;
|
||||
|
||||
/* UI elements */
|
||||
--chip-bg: #333333;
|
||||
--link: #cccccc;
|
||||
--link-hover: #ffffff;
|
||||
--ring: #888888;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-color: rgba(0, 0, 0, 0.5);
|
||||
--scrollbar-thumb: rgba(136, 136, 136, 0.6);
|
||||
|
||||
/* Editor */
|
||||
--editor-bg: #1a1a1a;
|
||||
--editor-fg: #ffffff;
|
||||
--editor-selection: rgba(255, 255, 255, 0.2);
|
||||
--editor-gutter-bg: #0f0f0f;
|
||||
--editor-gutter-fg: #cccccc;
|
||||
--editor-cursor: #ffffff;
|
||||
|
||||
/* Markdown overrides */
|
||||
--md-h1: #ffffff;
|
||||
--md-h2: #cccccc;
|
||||
--md-h3: #aaaaaa;
|
||||
--md-quote-bar: #cccccc;
|
||||
--md-quote-bg: color-mix(in oklab, #1a1a1a 92%, black 0%);
|
||||
--md-table-head-bg: color-mix(in oklab, #262626 90%, black 0%);
|
||||
--md-table-row-alt: color-mix(in oklab, #0f0f0f 85%, black 0%);
|
||||
--md-pre-bg: #0f0f0f;
|
||||
--md-pre-border: #333333;
|
||||
--md-syntax-1: #cccccc;
|
||||
--md-syntax-2: #aaaaaa;
|
||||
--md-syntax-3: #888888;
|
||||
--md-syntax-4: #666666;
|
||||
--md-syntax-5: #999999;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
THÈME DARK (baseline dark)
|
||||
============================================================================ */
|
||||
@@ -238,14 +316,14 @@ html:not(.dark)[data-theme="blue"] {
|
||||
|
||||
/* Backgrounds */
|
||||
--bg: #ffffff;
|
||||
--bg-main: #f7faff;
|
||||
--bg-muted: #eef2ff;
|
||||
--card: #ffffff;
|
||||
--bg-main: #fbfdff; /* overall app background (lightest after card) */
|
||||
--bg-muted: #f2f6ff; /* subtle blue tint for muted areas */
|
||||
--card: #ffffff; /* view note / cards: lightest */
|
||||
--card-bg: #ffffff;
|
||||
--elevated: #ffffff;
|
||||
--sidebar-bg: #f1f5ff;
|
||||
--surface-1: #f1f5ff;
|
||||
--surface-2: #e6edff;
|
||||
--sidebar-bg: #eef4ff; /* sidebar: slightly darker */
|
||||
--surface-1: #f3f7ff; /* notes list container: intermediate */
|
||||
--surface-2: #e9f1ff; /* secondary surfaces */
|
||||
|
||||
/* Text */
|
||||
--fg: #0f172a;
|
||||
@@ -254,15 +332,15 @@ html:not(.dark)[data-theme="blue"] {
|
||||
--muted: #64748b;
|
||||
|
||||
/* Borders */
|
||||
--border: #dbeafe;
|
||||
--border: #e3eeff;
|
||||
|
||||
/* Brand colors */
|
||||
--primary: #2563eb;
|
||||
--brand: #2563eb;
|
||||
--brand-700: #1d4ed8;
|
||||
--brand-800: #1e40af;
|
||||
--secondary: #7c3aed;
|
||||
--accent: #06b6d4;
|
||||
--primary: #6BA7F7; /* softer, brighter blue */
|
||||
--brand: #6BA7F7;
|
||||
--brand-700: #4A90E2; /* hover/focus */
|
||||
--brand-800: #2F6BD6; /* active */
|
||||
--secondary: #8FB7FF; /* badges/labels */
|
||||
--accent: #5FC8E8; /* info accents */
|
||||
|
||||
/* Status */
|
||||
--success: #16a34a;
|
||||
@@ -271,40 +349,40 @@ html:not(.dark)[data-theme="blue"] {
|
||||
--info: #0ea5e9;
|
||||
|
||||
/* UI */
|
||||
--chip-bg: #e2e8f0;
|
||||
--link: #1d4ed8;
|
||||
--link-hover: #1e40af;
|
||||
--ring: #2563eb;
|
||||
--chip-bg: #eaf2ff;
|
||||
--link: #4A90E2;
|
||||
--link-hover: #2F6BD6;
|
||||
--ring: #6BA7F7;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-color: rgba(15, 23, 42, 0.08);
|
||||
--scrollbar-thumb: rgba(59, 130, 246, 0.35);
|
||||
--scrollbar-thumb: rgba(125, 155, 195, 0.35); /* light gray-blue */
|
||||
|
||||
/* Editor */
|
||||
--editor-bg: #ffffff;
|
||||
--editor-fg: #0f172a;
|
||||
--editor-selection: rgba(37, 99, 235, 0.2);
|
||||
--editor-selection: color-mix(in srgb, var(--primary) 22%, transparent);
|
||||
--editor-gutter-bg: #f1f5ff;
|
||||
--editor-gutter-fg: #64748b;
|
||||
--editor-cursor: #0f172a;
|
||||
|
||||
/* Markdown overrides */
|
||||
--md-h1: #0f172a;
|
||||
--md-h2: #1d4ed8;
|
||||
--md-h3: #2563eb;
|
||||
--md-h4: #7c3aed;
|
||||
--md-h2: #4A90E2;
|
||||
--md-h3: #6BA7F7;
|
||||
--md-h4: #5FC8E8;
|
||||
--md-h5: #475569;
|
||||
--md-h6: #64748b;
|
||||
--md-quote-bar: #2563eb;
|
||||
--md-quote-bg: color-mix(in oklab, #e6edff 92%, white 0%);
|
||||
--md-table-head-bg: color-mix(in oklab, #e6edff 90%, white 0%);
|
||||
--md-table-row-alt: color-mix(in oklab, #f1f5ff 96%, white 0%);
|
||||
--md-quote-bar: #4A90E2;
|
||||
--md-quote-bg: color-mix(in oklab, #e9f1ff 92%, white 0%);
|
||||
--md-table-head-bg: color-mix(in oklab, #e9f1ff 90%, white 0%);
|
||||
--md-table-row-alt: color-mix(in oklab, #f3f7ff 96%, white 0%);
|
||||
--md-pre-bg: #f1f5ff;
|
||||
--md-pre-border: #dbeafe;
|
||||
--md-syntax-1: #ef4444;
|
||||
--md-syntax-2: #7c3aed;
|
||||
--md-syntax-2: #4A90E2;
|
||||
--md-syntax-3: #16a34a;
|
||||
--md-syntax-4: #2563eb;
|
||||
--md-syntax-4: #6BA7F7;
|
||||
--md-syntax-5: #0f172a;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user