/* ======================================================== Kanban Board — Telegram Mini App styles Mobile-first, Telegram theme-aware ======================================================== */ /* ===== Theme system ===== Light (default, iCloud-Notes aesthetic) + dark (selectable). Theme is chosen via and persisted in localStorage — independent of Telegram's own theme so the cabinet looks consistent. Same token names are reused everywhere. */ :root, :root[data-theme="light"] { --page: #f2f2f7; /* app background behind cards */ --bg: #ffffff; /* cards, sheets, inputs */ --bg2: #e6e6eb; /* hairlines / secondary surfaces */ --section-bg: #ffffff; /* grouped white cards */ --header-bg: rgba(249,249,251,0.86); --text: #1c1c1e; --hint: #8e8e93; --accent: #007aff; /* iOS system blue */ --accent-text: #ffffff; --danger: #ff3b30; --success: #34c759; --warning: #ff9500; --separator: rgba(60,60,67,0.13); --shadow: 0 1px 2px rgba(0,0,0,0.06); --radius: 13px; --radius-sm: 9px; } :root[data-theme="dark"] { --page: #000000; --bg: #1c1c1e; --bg2: #2c2c2e; --section-bg: #1c1c1e; --header-bg: rgba(28,28,30,0.86); --text: #f2f2f7; --hint: #8e8e93; --accent: #0a84ff; --accent-text: #ffffff; --danger: #ff453a; --success: #30d158; --warning: #ff9f0a; --separator: rgba(84,84,88,0.55); --shadow: 0 1px 3px rgba(0,0,0,0.4); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--page); color: var(--text); -webkit-font-smoothing: antialiased; } /* ---- Layout ---- */ #app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; } header#header { display: flex; align-items: center; padding: 8px 12px; background: var(--header-bg); border-bottom: 1px solid var(--bg2); min-height: 48px; gap: 8px; flex-shrink: 0; } #header-title { flex: 1; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #header-actions { display: flex; gap: 6px; align-items: center; } .header-btn { background: none; border: none; color: var(--accent); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); } .header-btn:active { background: var(--bg2); } main#main { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* ---- Bottom Navigation ---- */ nav#bottom-nav { display: flex; background: var(--bg); border-top: 1px solid var(--bg2); padding: 6px 0; padding-bottom: env(safe-area-inset-bottom, 6px); flex-shrink: 0; } .nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; color: var(--hint); font-size: 10px; padding: 4px; } .nav-btn.active { color: var(--accent); } .nav-icon { font-size: 20px; } .nav-label { font-size: 10px; } /* ---- Utility ---- */ .hidden { display: none !important; } /* ---- Board List ---- */ .screen-boards { padding: 12px; } .board-card { background: var(--section-bg); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow); transition: transform 0.1s; } .board-card:active { transform: scale(0.98); } /* Header row: info area (clickable) + gear button */ .board-card-header { display: flex; align-items: flex-start; gap: 8px; } .board-card-info { flex: 1; cursor: pointer; min-width: 0; } /* Gear button for board settings */ .board-card-gear { flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--bg); color: var(--hint); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .board-card-gear:hover, .board-card-gear:active { background: var(--accent); color: var(--accent-text); } .board-card-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .board-card-meta { font-size: 13px; color: var(--hint); } .board-card-role { font-size: 12px; color: var(--accent); margin-top: 4px; } /* Board settings modal extras */ .board-settings-stats { display: flex; gap: 16px; font-size: 13px; color: var(--hint); margin: 12px 0; padding: 8px 0; border-top: 1px solid var(--bg2); } .board-settings-danger { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--danger); } .danger-zone-title { font-size: 13px; font-weight: 600; color: var(--danger); margin-bottom: 12px; } .board-settings-danger .btn { width: 100%; margin-bottom: 8px; } /* ---- Dashboard ---- */ .screen-dashboard { padding: 12px; padding-bottom: 80px; } .dashboard-greeting { font-size: 20px; font-weight: 700; margin-bottom: 16px; } .dashboard-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 20px; } .metric-card { background: var(--section-bg); border-radius: var(--radius-sm); padding: 12px 10px; border-left: 3px solid var(--accent); display: flex; flex-direction: column; gap: 4px; } .metric-icon { font-size: 18px; } .metric-value { font-size: 22px; font-weight: 800; line-height: 1; } .metric-label { font-size: 11px; color: var(--hint); text-transform: uppercase; letter-spacing: 0.3px; } .dashboard-section { margin-bottom: 16px; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .section-title { font-size: 16px; font-weight: 700; } .dashboard-projects { display: flex; flex-direction: column; gap: 6px; } .project-item { background: var(--section-bg); border-radius: var(--radius-sm); padding: 12px; cursor: pointer; transition: transform 0.1s; } .project-item:active { transform: scale(0.98); } .project-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; } .project-role { font-size: 14px; } .project-meta { font-size: 13px; color: var(--hint); margin-top: 4px; } .create-board-btn { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: var(--accent-text); border: none; border-radius: var(--radius); padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; margin-bottom: 12px; } .create-board-btn:active { opacity: 0.85; } /* ---- Kanban Board ---- */ .screen-board { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; height: 100%; gap: 0; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .kanban-column { min-width: 260px; max-width: 340px; width: 88vw; flex-shrink: 0; display: flex; flex-direction: column; height: 100%; scroll-snap-align: start; border-right: 1px solid var(--bg2); } .column-header { padding: 12px 12px; background: var(--bg2); border-bottom: 1px solid var(--bg2); display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 48px; } .column-color { width: 6px; height: 32px; border-radius: 3px; flex-shrink: 0; } .column-title { flex: 1; font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .column-count { font-size: 12px; color: var(--hint); background: var(--bg); padding: 2px 8px; border-radius: 10px; flex-shrink: 0; } .column-cards { flex: 1; overflow-y: auto; padding: 8px; } .column-add-btn { margin: 0 8px 8px; padding: 8px; background: var(--bg2); border: 1px dashed var(--hint); border-radius: var(--radius-sm); color: var(--hint); font-size: 13px; cursor: pointer; text-align: center; } .column-add-btn:active { background: var(--section-bg); } /* ---- Card ---- */ .kanban-card { background: var(--bg); border-radius: var(--radius-sm); padding: 10px 12px 10px 30px; /* left room for the drag handle */ margin-bottom: 8px; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.1s, box-shadow 0.15s; /* Allow vertical scrolling of the column by touch; dragging is started only from the dedicated handle (see .card-drag-handle), so scroll no longer fights drag. */ touch-action: pan-y; user-select: none; -webkit-tap-highlight-color: transparent; position: relative; } /* Dedicated drag handle (the only place a drag can begin) */ .card-drag-handle { position: absolute; left: 0; top: 0; bottom: 0; width: 26px; display: flex; align-items: center; justify-content: center; color: var(--hint); font-size: 15px; line-height: 1; cursor: grab; touch-action: none; /* this element claims the gesture for dragging */ border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .card-drag-handle:active { cursor: grabbing; background: var(--bg2); } .kanban-card.dragging .card-drag-handle { cursor: grabbing; } .kanban-card:active { transform: scale(0.98); background: var(--section-bg); } .kanban-card.dragging { opacity: 0.6; transform: rotate(2deg) scale(1.03); box-shadow: 0 4px 16px rgba(0,0,0,0.15); z-index: 100; position: relative; } .card-priority { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .card-priority.critical { background: var(--danger); } .card-priority.high { background: #f57c00; } .card-priority.medium { background: var(--warning); } .card-priority.low { background: var(--success); } .card-title { font-size: 14px; font-weight: 500; line-height: 1.3; margin-bottom: 6px; } .card-badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .card-badge { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--bg2); color: var(--hint); display: flex; align-items: center; gap: 3px; } .card-badge.overdue { background: #fde8e8; color: var(--danger); } .card-labels { display: flex; gap: 4px; margin-bottom: 6px; } .card-label { width: 28px; height: 6px; border-radius: 3px; } .card-assignees { display: flex; margin-top: 6px; } .card-assignee { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 10px; display: flex; align-items: center; justify-content: center; margin-right: -4px; border: 2px solid var(--bg); } /* ---- Card Detail ---- */ .screen-card { padding: 12px; padding-bottom: 80px; } .detail-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; } .detail-priority { margin-top: 3px; } .detail-title { flex: 1; font-size: 18px; font-weight: 600; } .detail-section { margin-bottom: 16px; } .detail-section-title { font-size: 12px; font-weight: 600; color: var(--hint); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; } /* Compact status section (no label, just select) */ .detail-status-section { margin-bottom: 8px; } /* Labels row — compact, always visible */ .detail-labels-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .label-chip { font-size: 12px; padding: 2px 8px; } /* ===== Collapsible sections ===== */ .collapsible-section { border-top: 1px solid var(--bg2); margin-top: 4px; } /* Header — clickable toggle */ .collapsible-header { display: flex; align-items: center; gap: 6px; padding: 10px 0; cursor: pointer; user-select: none; -webkit-user-select: none; } .collapsible-header:active { opacity: 0.7; } .collapsible-arrow { font-size: 12px; color: var(--hint); width: 14px; text-align: center; transition: transform 0.15s; } .collapsible-title { font-size: 14px; font-weight: 600; color: var(--text); } .collapsible-badge { font-size: 11px; background: var(--bg2); color: var(--hint); padding: 1px 7px; border-radius: 10px; margin-left: auto; } /* Body — hidden by default, shown when .open */ .collapsible-body { display: none; padding-bottom: 12px; } .collapsible-section.open .collapsible-body { display: block; } .detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .meta-chip { display: flex; align-items: center; gap: 4px; background: var(--bg2); padding: 4px 10px; border-radius: 20px; font-size: 13px; } .detail-description { font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; } /* Subtasks */ .subtask-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--bg2); } .subtask-checkbox { width: 28px; height: 28px; border-radius: 50%; /* iOS-style round check */ border: 2px solid var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg); color: var(--accent); font-size: 16px; font-weight: 700; touch-action: manipulation; transition: transform 0.1s, background 0.15s; -webkit-tap-highlight-color: transparent; } .subtask-checkbox:active { transform: scale(0.88); } .subtask-checkbox.checked { background: var(--success); border-color: var(--success); color: white; } .subtask-title { flex: 1; font-size: 14px; } .subtask-title.completed { text-decoration: line-through; color: var(--hint); } .subtask-add { display: flex; gap: 6px; margin-top: 8px; } .subtask-add input { flex: 1; padding: 8px 12px; border: 1px solid var(--bg2); border-radius: var(--radius-sm); font-size: 14px; background: var(--bg); color: var(--text); } /* Comments */ .comment-item { padding: 8px 0; border-bottom: 1px solid var(--bg2); } .comment-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .comment-author { font-size: 13px; font-weight: 600; } .comment-time { font-size: 11px; color: var(--hint); } .comment-text { font-size: 14px; line-height: 1.4; white-space: pre-wrap; } .comment-add { display: flex; gap: 6px; margin-top: 8px; } .comment-add textarea { flex: 1; padding: 8px 12px; border: 1px solid var(--bg2); border-radius: var(--radius-sm); font-size: 14px; resize: none; min-height: 60px; background: var(--bg); color: var(--text); font-family: inherit; } /* ---- Buttons ---- */ .btn { padding: 8px 16px; border: none; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; font-weight: 500; } .btn-primary { background: var(--accent); color: var(--accent-text); } .btn-primary:active { opacity: 0.85; } .btn-danger { background: var(--danger); color: white; } .btn-ghost { background: var(--bg2); color: var(--text); } .btn-sm { padding: 4px 10px; font-size: 12px; } /* ---- Modal ---- */ #modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; } #modal { background: var(--bg); border-radius: 16px 16px 0 0; width: 100%; max-width: 100%; max-height: 85vh; overflow-y: auto; padding: 20px; -webkit-overflow-scrolling: touch; } #modal h3 { margin-bottom: 12px; font-size: 17px; } #modal label { display: block; font-size: 13px; color: var(--hint); margin-bottom: 4px; margin-top: 10px; } #modal input, #modal textarea, #modal select { width: 100%; padding: 10px 12px; border: 1px solid var(--bg2); border-radius: var(--radius-sm); font-size: 15px; background: var(--bg); color: var(--text); font-family: inherit; } #modal textarea { resize: none; min-height: 80px; } .modal-actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; } /* ---- Activity ---- */ .activity-item { display: flex; gap: 8px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--bg2); } .activity-user { font-weight: 600; color: var(--accent); } .activity-action { color: var(--hint); } .activity-time { color: var(--hint); font-size: 11px; margin-left: auto; white-space: nowrap; } /* ---- My Tasks ---- */ .screen-my-tasks { padding: 12px; } .my-task-group-title { font-size: 14px; font-weight: 600; color: var(--accent); margin: 12px 0 6px; } /* ---- Notifications ---- */ .screen-notifications { padding: 12px; } .notif-item { padding: 10px; background: var(--section-bg); border-radius: var(--radius-sm); margin-bottom: 6px; } .notif-item.unread { border-left: 3px solid var(--accent); } .notif-text { font-size: 14px; line-height: 1.4; } .notif-time { font-size: 11px; color: var(--hint); margin-top: 4px; } /* ---- Empty state ---- */ .empty-state { text-align: center; padding: 40px 20px; color: var(--hint); } .empty-state-icon { font-size: 40px; margin-bottom: 8px; } .empty-state-text { font-size: 15px; } /* ---- Inline edit ---- */ .inline-edit { width: 100%; padding: 4px 8px; border: 1px solid var(--accent); border-radius: var(--radius-sm); font-size: inherit; font-weight: inherit; background: var(--bg); color: var(--text); font-family: inherit; } /* Drop target highlight */ .column-cards.drag-over { background: var(--section-bg); border-radius: var(--radius-sm); } /* Dark theme fixes */ @media (prefers-color-scheme: dark) { :root { --shadow: 0 1px 3px rgba(0,0,0,0.25); } } /* ---- Card expand / collapse ---- */ .card-expand { float: right; font-size: 14px; color: var(--hint); padding: 2px 4px; transition: transform 0.2s; } .kanban-card.expanded .card-expand { transform: rotate(180deg); } .card-expanded { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bg2); animation: fadeIn 0.15s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .card-inline-subtasks { margin-bottom: 6px; } .inline-subtask { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 13px; } .card-inline-comments { margin-bottom: 6px; } .inline-comment { font-size: 12px; color: var(--hint); padding: 2px 0; } .inline-comment-author { font-weight: 600; color: var(--accent); } .inline-comment-more { font-size: 11px; color: var(--accent); padding: 2px 0; } .card-open-detail { width: 100%; margin-top: 6px; } /* ---- Status select in card detail ---- */ .status-select { width: 100%; padding: 10px 12px; border: 1px solid var(--bg2); border-radius: var(--radius-sm); font-size: 15px; background: var(--bg); color: var(--text); font-family: inherit; } /* ---- Clickable meta chips ---- */ .meta-chip.clickable { cursor: pointer; transition: background 0.15s; } .meta-chip.clickable:active { background: var(--accent); color: var(--accent-text); } .meta-chip.overdue-chip { background: #fde8e8; color: var(--danger); } /* ---- Deadline presets ---- */ .deadline-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } /* ---- Subtask content (title + deadline) ---- */ .subtask-content { flex: 1; display: flex; flex-direction: column; gap: 2px; } .subtask-deadline { font-size: 11px; color: var(--hint); } .subtask-deadline.overdue { color: var(--danger); font-weight: 600; } /* ---- Subtask progress bar ---- */ .subtask-progress-bar { width: 100%; height: 4px; background: var(--bg2); border-radius: 2px; margin-bottom: 8px; overflow: hidden; } .subtask-progress-fill { height: 100%; background: var(--success); border-radius: 2px; transition: width 0.3s; } /* ---- Column manager (mobile-friendly cards) ---- */ .col-mgr-block { background: var(--section-bg); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; } .col-mgr-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .col-mgr-swatch { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; } .col-mgr-pos { font-size: 13px; color: var(--hint); font-weight: 600; flex: 1; } .col-mgr-del { font-size: 12px; padding: 4px 10px; } /* Badge for system columns (Inbox/Done) that cannot be deleted */ .col-mgr-system-badge { font-size: 11px; padding: 3px 8px; background: var(--bg2); color: var(--hint); border-radius: 10px; margin-left: auto; } .col-mgr-input { width: 100%; padding: 10px 12px; border: 1px solid var(--bg2); border-radius: var(--radius-sm); font-size: 16px; /* 16px prevents iOS zoom */ background: var(--bg); color: var(--text); font-family: inherit; margin-bottom: 8px; } .col-mgr-bottom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .col-mgr-color-wrap { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 8px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--bg2); } .col-mgr-color { width: 0; height: 0; padding: 0; border: none; opacity: 0; position: absolute; } .col-mgr-color-preview { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; border: 2px solid rgba(0,0,0,0.1); } .col-mgr-color-label { font-size: 13px; color: var(--text); } .col-mgr-reorder { display: flex; gap: 4px; margin-left: auto; } .col-mgr-reorder .btn { font-size: 12px; padding: 6px 10px; white-space: nowrap; } .col-mgr-reorder .btn:disabled { opacity: 0.3; } /* Add new column block */ .col-mgr-add { background: var(--bg2); border: 2px dashed var(--hint); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; } .col-mgr-add-label { font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 8px; } .col-mgr-add-color-row { margin-bottom: 8px; } .col-mgr-add-btn { width: 100%; padding: 10px; font-size: 15px; } /* ---- Picker option (priority, etc.) ---- */ .picker-option { width: 100%; padding: 12px; background: var(--bg); border: 1px solid var(--bg2); border-radius: var(--radius-sm); font-size: 15px; cursor: pointer; text-align: left; margin-bottom: 4px; color: var(--text); } .picker-option.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } /* ---- Assignee picker ---- */ .picker-option .assignee-initial { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 13px; font-weight: 600; margin-right: 8px; flex-shrink: 0; } .picker-option.active .assignee-initial { background: var(--accent-text); color: var(--accent); } .assignee-role { font-size: 11px; color: var(--hint); margin-left: 6px; } .picker-option.active .assignee-role { color: var(--accent-text); opacity: 0.7; } /* ===== Light-theme polish (iCloud Notes feel) ===== */ header#header { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--separator); } nav#bottom-nav { background: var(--header-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 0.5px solid var(--separator); } /* Cards: soft white surfaces with a hairline (instead of muddy gray) */ .board-card, .metric-card, .project-item, .kanban-card, .notif-item, .col-mgr-block { border: 0.5px solid var(--separator); } /* Hairline separators everywhere use the iOS separator colour */ .subtask-item, .comment-item, .activity-item, .collapsible-section { border-color: var(--separator); } .column-header { background: var(--page); border-bottom: 0.5px solid var(--separator); } .kanban-column { border-right: 0.5px solid var(--separator); } /* Theme toggle chip (in the Overview header) */ .theme-toggle { border: 0.5px solid var(--separator); background: var(--bg); color: var(--text); border-radius: 18px; padding: 5px 12px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .theme-toggle:active { background: var(--bg2); } /* ===== Notes (Obsidian-style) ===== */ .screen-notes { padding: 10px 12px 80px; } .screen-note { padding: 10px 12px 80px; display: flex; flex-direction: column; height: 100%; } .notes-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .notes-board-title { flex: 1; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notes-search { width: 100%; padding: 9px 12px; margin-bottom: 10px; font-size: 15px; border: 0.5px solid var(--separator); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); } .notes-list { display: flex; flex-direction: column; } .note-row { display: flex; align-items: center; gap: 6px; padding: 10px; border-bottom: 0.5px solid var(--separator); } .note-row-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; } .note-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; } .note-icon { flex-shrink: 0; } .note-row-btn { flex-shrink: 0; border: none; background: none; color: var(--hint); font-size: 15px; padding: 4px 8px; cursor: pointer; border-radius: 6px; } .note-row-btn:active { background: var(--bg2); } .note-save-status { flex: 1; font-size: 12px; color: var(--hint); } .note-title-input { width: 100%; padding: 8px 0; margin-bottom: 6px; font-size: 20px; font-weight: 700; border: none; background: none; color: var(--text); } .note-title-input:focus { outline: none; } .note-editor { width: 100%; flex: 1; min-height: 240px; resize: none; padding: 10px 0; border: none; background: none; color: var(--text); font-family: -apple-system, 'SF Mono', ui-monospace, Menlo, monospace; font-size: 15px; line-height: 1.55; } .note-editor:focus { outline: none; } .note-preview { flex: 1; font-size: 15px; line-height: 1.6; overflow-y: auto; } .note-preview h1 { font-size: 22px; margin: 12px 0 6px; } .note-preview h2 { font-size: 19px; margin: 12px 0 6px; } .note-preview h3 { font-size: 16px; margin: 10px 0 5px; } .note-preview ul, .note-preview ol { padding-left: 22px; margin: 6px 0; } .note-preview li { margin: 3px 0; } .note-preview code { background: var(--bg2); padding: 1px 5px; border-radius: 5px; font-size: 13px; } .note-preview pre { background: var(--bg2); padding: 10px; border-radius: var(--radius-sm); overflow-x: auto; } .note-preview pre code { background: none; padding: 0; } .note-preview blockquote { border-left: 3px solid var(--accent); padding-left: 10px; color: var(--hint); margin: 6px 0; } .note-preview a { color: var(--accent); } .wikilink { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 4px; padding: 0 4px; cursor: pointer; } .note-meta { margin-top: 14px; padding-top: 12px; border-top: 0.5px solid var(--separator); } .note-meta-title { font-size: 12px; color: var(--hint); font-weight: 600; margin: 8px 0 6px; } .note-link-chip { display: inline-block; background: var(--bg2); border-radius: 8px; padding: 5px 10px; margin: 0 6px 6px 0; font-size: 13px; cursor: pointer; } .note-link-chip:active { background: var(--accent); color: var(--accent-text); } /* ===== Auth gate + in-app login screen ===== */ #auth-loader { display: none; } body.pre-auth #app { display: none; } body.pre-auth #auth-loader { display: flex; position: fixed; inset: 0; align-items: center; justify-content: center; background: var(--page); z-index: 5; } .auth-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--bg2); border-top-color: var(--accent); animation: auth-spin 0.8s linear infinite; } @keyframes auth-spin { to { transform: rotate(360deg); } } /* On the login screen, hide the bottom nav + back button (no app yet) */ body.auth-screen #bottom-nav, body.auth-screen #btn-back { display: none !important; } .auth-card { max-width: 380px; margin: 28px auto; background: var(--bg); border: 0.5px solid var(--separator); border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); padding: 28px 24px; text-align: center; } .auth-logo { font-size: 22px; font-weight: 800; margin-bottom: 6px; } .auth-sub { color: var(--hint); font-size: 14px; line-height: 1.45; margin-bottom: 22px; } .auth-btn { width: 100%; padding: 13px; font-size: 15px; font-weight: 600; } .auth-status { min-height: 18px; font-size: 13px; color: var(--accent); margin-top: 12px; } .auth-or { color: var(--hint); font-size: 12px; margin: 16px 0 10px; } .auth-widget { display: flex; justify-content: center; min-height: 48px; } .auth-hint { color: var(--hint); font-size: 12px; line-height: 1.4; margin-top: 18px; }