mirror of
https://gitlab.com/ArkHost/HelixNotes.git
synced 2026-07-24 07:45:57 +02:00
Yuri Karamian
f688cf4bd4
- Quick Access drag-to-reorder: drag notes to rearrange, order persists - Quick Access preserves order when moving notes between notebooks - In-note search: debounced input, proper scroll-to-match - Panel resize: RAF-batched updates, editor containment during resize - Thinner resize handles (3px) - Note list: removed transition, added CSS containment for 1200+ notes - Escape closes Settings and Info panels - Fix Quick Access cache invalidation on remove
161 lines
3.3 KiB
CSS
161 lines
3.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
src: local("Inter");
|
|
}
|
|
|
|
:root {
|
|
/* Light theme */
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #f8f9fa;
|
|
--bg-tertiary: #f0f1f3;
|
|
--bg-hover: #e9ecef;
|
|
--bg-active: #dde1e6;
|
|
--bg-editor: #ffffff;
|
|
--text-primary: #1a1a2e;
|
|
--text-secondary: #495057;
|
|
--text-tertiary: #868e96;
|
|
--text-accent: #5b6abf;
|
|
--border-color: #e2e5e9;
|
|
--border-light: #f0f1f3;
|
|
--accent: #5b6abf;
|
|
--accent-hover: #4a59b0;
|
|
--accent-light: #eef0f9;
|
|
--danger: #e55353;
|
|
--danger-hover: #d43d3d;
|
|
--success: #40c057;
|
|
--warning: #fab005;
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
--sidebar-width: 220px;
|
|
--notelist-width: 280px;
|
|
--panel-resize-handle: 3px;
|
|
}
|
|
|
|
:root.dark {
|
|
--bg-primary: #1a1b26;
|
|
--bg-secondary: #1f2029;
|
|
--bg-tertiary: #24253a;
|
|
--bg-hover: #2a2b3d;
|
|
--bg-active: #33354a;
|
|
--bg-editor: #1a1b26;
|
|
--text-primary: #cdd6f4;
|
|
--text-secondary: #a6adc8;
|
|
--text-tertiary: #6c7086;
|
|
--text-accent: #89b4fa;
|
|
--border-color: #2a2b3d;
|
|
--border-light: #24253a;
|
|
--accent: #89b4fa;
|
|
--accent-hover: #74a8f7;
|
|
--accent-light: #1e2640;
|
|
--danger: #f38ba8;
|
|
--danger-hover: #eba0ac;
|
|
--success: #a6e3a1;
|
|
--warning: #f9e2af;
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
-webkit-user-select: none !important;
|
|
user-select: none !important;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-family: var(
|
|
--editor-font-family,
|
|
"Inter",
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
sans-serif
|
|
);
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--editor-font-size, 14px);
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--text-tertiary);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-secondary);
|
|
}
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
/* Focus ring */
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Allow text selection in editor and source view */
|
|
.editor-content,
|
|
.editor-content *,
|
|
.source-editor {
|
|
-webkit-user-select: text !important;
|
|
user-select: text !important;
|
|
}
|
|
|
|
/* Transitions */
|
|
.transition-colors {
|
|
transition:
|
|
color 0.15s ease,
|
|
background-color 0.15s ease,
|
|
border-color 0.15s ease;
|
|
}
|
|
|
|
/* Panel resize handle */
|
|
.resize-handle {
|
|
width: var(--panel-resize-handle);
|
|
cursor: col-resize;
|
|
background: var(--border-color);
|
|
transition: background 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.resize-handle:hover,
|
|
.resize-handle.active {
|
|
background: var(--accent);
|
|
}
|
|
|
|
body.resizing .ProseMirror {
|
|
pointer-events: none;
|
|
contain: strict;
|
|
}
|
|
|
|
body.resizing {
|
|
user-select: none;
|
|
}
|