/* ===================================================== CloudNotes - Custom Application Styles ===================================================== */ /* CSS Variables for theming */ :root { --sidebar-width-notebooks: 220px; --sidebar-width-notes: 280px; --header-height: 64px; --editor-toolbar-height: auto; --border-color: #e0e0e0; --bg-primary: #ffffff; --bg-secondary: #f5f5f5; --bg-selected: #e3f2fd; --text-primary: #212121; --text-secondary: #757575; --accent-color: #1976d2; } /* Dark mode variables — applied to by settings.js on load, toggled by cloudnotesSettings.setDarkMode() */ .app-dark { --border-color: #424242; --bg-primary: #1e1e1e; --bg-secondary: #2d2d2d; --bg-selected: #1a3a5c; --text-primary: #f5f5f5; --text-secondary: #aaaaaa; } /* ===================================================== Main Notes Layout - Three Column ===================================================== */ .notes-layout { display: flex; height: calc(100vh - var(--header-height)); overflow: hidden; background: var(--bg-primary); } /* Notebooks Sidebar */ .notebooks-sidebar { width: var(--sidebar-width-notebooks); min-width: var(--sidebar-width-notebooks); max-width: var(--sidebar-width-notebooks); height: 100%; overflow-y: auto; background: var(--bg-secondary); flex-shrink: 0; transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease; } .notebooks-sidebar.collapsed { width: 36px !important; min-width: 36px !important; max-width: 36px !important; overflow: hidden; } .notebooks-sidebar .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; } .notebooks-sidebar.collapsed .sidebar-header { justify-content: center; padding: 4px 2px; } /* Notebook tree */ .notebook-group-header { display: flex; align-items: center; padding: 4px 8px 4px 6px; cursor: pointer; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); user-select: none; } .notebook-group-header:hover { background: rgba(128, 128, 128, 0.1); } .notebook-group-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notebook-child-item { padding-left: 36px !important; } .note-dates { opacity: 0.7; font-size: 0.72rem; letter-spacing: 0.01em; } /* Note List Sidebar */ .note-list-sidebar { width: var(--sidebar-width-notes); min-width: var(--sidebar-width-notes); max-width: var(--sidebar-width-notes); height: 100%; overflow: hidden; background: var(--bg-primary); flex-shrink: 0; display: flex; flex-direction: column; transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease; } .note-list-sidebar.collapsed { width: 36px !important; min-width: 36px !important; max-width: 36px !important; } /* Panel header strip for collapsible note list */ .sidebar-panel-header { display: flex; align-items: center; padding: 2px 4px 2px 10px; flex-shrink: 0; border-bottom: 1px solid var(--border-color); } /* Expand button shown when a sidebar is collapsed */ .sidebar-collapsed-handle { display: flex; justify-content: center; padding: 8px 0; } /* Make NoteList fill remaining space below the panel header */ .note-list-sidebar .note-list-container { flex: 1; min-height: 0; } /* Note List Container */ .note-list-container { display: flex; flex-direction: column; height: 100%; } .note-list-header { padding: 4px 12px 12px 12px; flex-shrink: 0; } .note-list-items { flex: 1; overflow-y: auto; } /* Note List Items */ .note-list-item { cursor: pointer; transition: background-color 0.15s ease; padding: 5px 12px !important; border-bottom: 1px solid var(--border-color); } .note-list-item:hover { background-color: var(--bg-secondary) !important; } .note-list-item.selected, .note-list-item.mud-list-item--selected { background-color: var(--bg-selected) !important; border-left: 3px solid var(--accent-color); } .note-list-item.multi-selected { background-color: var(--bg-selected) !important; } .note-item-content { display: flex; flex-direction: column; gap: 2px; width: 100%; } .note-item-header { display: flex; align-items: center; justify-content: space-between; } .note-item-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .delete-btn { visibility: hidden; padding: 0 !important; } .note-list-item:hover .delete-btn { visibility: visible; } .notebook-delete-btn { visibility: hidden; position: absolute; right: 0; } .notebook-list-row:hover .notebook-delete-btn { visibility: visible; } .notebook-list-row { position: relative; } .note-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .note-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; opacity: 0.75; } .note-date { font-size: 0.7rem; opacity: 0.6; } /* ===================================================== Column Resize Handles ===================================================== */ .resize-handle { width: 4px; flex-shrink: 0; cursor: col-resize; background: transparent; transition: background 0.15s ease; z-index: 10; } .resize-handle:hover, .resize-handle:active { background: var(--accent-color); } /* ===================================================== Editor Area ===================================================== */ .editor-area { flex: 1; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-primary); } .editor-toolbar { padding: 8px 12px; flex-shrink: 0; background: var(--bg-primary); } .toolbar-danger-sep { width: 1px; height: 20px; background: var(--border-color); flex-shrink: 0; align-self: center; margin: 0 2px; } /* Remove MudBlazor's reserved helper-text/validation space from header inputs */ .editor-toolbar .mud-input-control-helper-container, .note-list-header .mud-input-control-helper-container { display: none; } /* Pin all MudDividers inside flex column containers to 1px */ .editor-area .mud-divider, .note-list-container .mud-divider { flex: 0 0 1px !important; height: 1px !important; margin: 0 !important; } .editor-content { flex: 1; overflow: hidden; position: relative; } .attachment-panel-container { flex-shrink: 0; max-height: 200px; overflow-y: auto; background: var(--bg-secondary); } /* Attachment Panel */ .attachment-panel { width: 100%; } /* ===================================================== Full-page Editor Layout ===================================================== */ .full-editor-layout { display: flex; flex-direction: column; height: calc(100vh - var(--header-height)); overflow: hidden; } .full-editor-header { flex-shrink: 0; background: var(--bg-primary); padding: 12px 16px; } .full-editor-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .full-editor-attachments { flex-shrink: 0; max-height: 200px; overflow-y: auto; background: var(--bg-secondary); } .editor-drawer-toggle { display: flex; align-items: center; flex-shrink: 0; padding: 6px 16px; cursor: pointer; background: var(--bg-secondary); border-top: 1px solid var(--mud-palette-divider); user-select: none; gap: 4px; } .editor-drawer-toggle:hover { background: var(--mud-palette-action-hover); } .editor-drawer-chevron { transition: transform 0.2s ease; } .editor-drawer-chevron.rotated { transform: rotate(180deg); } .editor-drawer-body { background: var(--bg-secondary); border-top: 1px solid var(--mud-palette-divider); } /* ===================================================== TipTap / ProseMirror Editor ===================================================== */ .markdown-editor-wrapper { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; } .tiptap-editor-host { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .ProseMirror { flex: 1; overflow-y: auto; padding: 16px; outline: none; line-height: 1.7; font-family: Roboto, sans-serif; font-size: 15px; color: var(--text-primary); background: var(--bg-primary); min-height: 0; } .ProseMirror > * + * { margin-top: 0.5em; } .ProseMirror p { margin: 0 0 0.6em; } .ProseMirror h1 { font-size: 1.7em; font-weight: 700; margin: 1em 0 0.4em; } .ProseMirror h2 { font-size: 1.4em; font-weight: 700; margin: 0.9em 0 0.35em; } .ProseMirror h3 { font-size: 1.15em; font-weight: 700; margin: 0.8em 0 0.3em; } .ProseMirror ul, .ProseMirror ol { padding-left: 1.5em; margin: 0.4em 0; } .ProseMirror li { margin: 0.15em 0; } .ProseMirror blockquote { border-left: 3px solid var(--accent-color); margin: 0.5em 0; padding: 4px 12px; color: var(--text-secondary); } .ProseMirror code { background: var(--bg-secondary); padding: 2px 4px; border-radius: 3px; font-size: 0.875em; font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; } .ProseMirror pre { background: var(--bg-secondary); padding: 12px; border-radius: 4px; overflow-x: auto; margin: 0.5em 0; } .ProseMirror pre code { background: none; padding: 0; font-size: 0.875em; } .ProseMirror hr { border: none; border-top: 2px solid var(--border-color); margin: 1em 0; } .ProseMirror a { color: var(--accent-color); } .ProseMirror img { max-width: 100%; max-height: 600px; object-fit: contain; display: block; cursor: pointer; margin: 0.5em 0; } .ProseMirror img.ProseMirror-selectednode { outline: 2px solid var(--accent-color); } /* Task list */ .ProseMirror ul[data-type="taskList"] { list-style: none; padding-left: 0.5em; } .ProseMirror ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 8px; } .ProseMirror ul[data-type="taskList"] li > label { flex-shrink: 0; margin-top: 3px; } .ProseMirror ul[data-type="taskList"] li > div { flex: 1; } /* Placeholder */ .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--text-secondary); opacity: 0.5; pointer-events: none; float: left; height: 0; } /* Toolbar */ .tiptap-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 4px 8px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .tiptap-toolbar-btn { border: none; background: transparent; color: var(--text-primary); padding: 4px 8px; border-radius: 4px; font-size: 13px; cursor: pointer; line-height: 1; min-width: 28px; display: flex; align-items: center; justify-content: center; font-family: inherit; transition: background 0.1s; } .tiptap-toolbar-btn:hover { background: rgba(128, 128, 128, 0.15); } .tiptap-toolbar-btn.active { background: var(--bg-selected); color: var(--accent-color); } .tiptap-toolbar-sep { width: 1px; height: 20px; background: var(--border-color); margin: 0 2px; flex-shrink: 0; align-self: center; } /* Dark mode */ .app-dark .ProseMirror { background: var(--bg-primary); color: var(--text-primary); } .app-dark .ProseMirror code, .app-dark .ProseMirror pre { background: var(--bg-secondary); } .app-dark .tiptap-toolbar { background: var(--bg-secondary); border-color: var(--border-color); } .app-dark .tiptap-toolbar-btn { color: var(--text-primary); } /* ===================================================== Empty State ===================================================== */ .empty-state { opacity: 0.6; } /* ===================================================== Scrollbar Styling ===================================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #bdbdbd; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #9e9e9e; } /* ===================================================== Mobile layout — bottom nav, single panel at a time ===================================================== */ .mobile-bottom-nav { display: none; } @media (max-width: 768px) { /* Reserve space for the bottom nav */ .notes-layout { height: calc(100vh - var(--header-height) - 56px); position: relative; } /* Hide resize handles */ .resize-handle { display: none !important; } /* Hide desktop collapse buttons */ .sidebar-panel-header .mud-icon-button, .sidebar-collapsed-handle { display: none; } /* Each panel fills the container, hidden by default */ .notebooks-sidebar, .note-list-sidebar, .editor-area { position: absolute !important; inset: 0 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; display: none !important; transition: none !important; } /* Only the active panel is shown */ .notebooks-sidebar.mobile-active, .note-list-sidebar.mobile-active, .editor-area.mobile-active { display: flex !important; flex-direction: column !important; } /* Undo collapsed state on mobile — panels are always full-width when active */ .notebooks-sidebar.collapsed.mobile-active, .note-list-sidebar.collapsed.mobile-active { overflow: visible !important; } /* Bottom nav bar — must sit above #blazor-error-ui (z-index 1000) */ .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--bg-secondary); border-top: 1px solid var(--border-color); z-index: 1100; } /* Push the Blazor error banner above the nav bar */ #blazor-error-ui { bottom: 56px; } .mobile-nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: none; background: transparent; color: var(--text-secondary); font-size: 0.65rem; cursor: pointer; padding: 4px 0; transition: color 0.15s ease; } .mobile-nav-btn.active { color: var(--accent-color); } .mobile-nav-btn .mud-icon-root { font-size: 1.4rem !important; } } /* ===================================================== Blazor error UI ===================================================== */ #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }