/* Допълнителни стилове само за облачната версия (login екран, sync индикатор) */ .auth-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 500; background: radial-gradient(circle at 30% 20%, rgba(139,92,246,0.18), transparent 60%), var(--paper, #12142B); } .auth-card { width: 100%; max-width: 360px; padding: 28px 26px; background: var(--glass-bg, rgba(29,33,66,0.9)); border: 1px solid var(--line, rgba(var(--tint-rgb),0.08)); border-radius: 18px; backdrop-filter: blur(12px); } .auth-error { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.4); color: var(--bad, #F87171); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; } .sync-indicator { font-size: 11.5px; text-align: center; padding: 4px 0 8px 0; opacity: 0.75; letter-spacing: 0.2px; color: var(--text-dim, #8B90B8); } .sync-indicator.saving { color: #FB923C; } .sync-indicator.saved { color: var(--ok, #34D399); } .sync-indicator.error { color: var(--bad, #F87171); } .sync-indicator.offline { color: var(--ink, #6366F1); opacity: 0.9; } /* Toast с бутон "Отмени" при изтриване (Gmail-стил) — .toast базовите стилове са в style.css, тук само разширяваме за режима с действие. */ .toast.with-action{ pointer-events: auto; display: flex; align-items: center; gap: 14px; white-space: nowrap; } .toast.with-action #toastUndoBtn{ background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: 20px; padding: 5px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; flex-shrink: 0; } .toast.with-action #toastUndoBtn:hover{ background: rgba(255,255,255,0.28); } /* Компактен селектор за месец (Табло → "Разходи по категория"), споделен между desktop и mobile визията. */ .mini-select{ background: rgba(var(--tint-rgb),0.06); border: 1px solid var(--line, rgba(var(--tint-rgb),0.09)); color: var(--text, #F3F4FB); border-radius: 9px; padding: 6px 10px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; flex-shrink: 0; max-width: 42%; } .mini-select:focus{ outline: none; border-color: var(--ink, #6366F1); } /* Стиловете на затворения в приложението, не само за .mini-select), за да не се налага да го поправяме компонент по компонент всеки път, когато добавим нов dropdown (напр. picker-а за свързани задачи). */ select option{ background: var(--paper, #12142B); color: var(--text, #F3F4FB); } /* ============ iOS safe area (notch / status bar / home indicator) ============ */ /* apple-mobile-web-app-status-bar-style сам по себе си се оказа ненадежден на инсталираната от началния екран версия (кешира се при "Add to Home Screen" и не се обновява дори след премахване/повторно добавяне). env() от друга страна се преизчислява на всяко зареждане и е 0 навсякъде, където няма реално застъпване — затова е безопасно да се прилага навсякъде, не само в медия заявката за телефони. */ .sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .sticky-head { top: env(safe-area-inset-top); } .auth-screen { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* ============ Desktop slide-in меню (Настройки/Търсене/Експорт/Импорт/Изход) ============ Визуално огледален на мобилното слайд-меню (js/mobile.js), но написан отделно тук с различни класове/ID-та, за да не се пипа мобилният файл. */ .d-menu-overlay{ position:fixed; inset:0; background:rgba(6,7,18,0.55); z-index:70; display:none; } .d-menu-overlay.show{ display:block; } .d-menu-panel{ position:absolute; top:0; right:0; bottom:0; width:280px; background:var(--glass-bg-2); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-left:1px solid var(--line); padding:56px 18px 20px 18px; transform:translateX(100%); transition:transform .25s ease; } .d-menu-overlay.show .d-menu-panel{ transform:translateX(0); } .d-menu-item{ display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:12px; color:var(--text); font-size:14px; font-weight:600; cursor:pointer; margin-bottom:3px; } .d-menu-item:hover{ background:rgba(var(--tint-rgb),0.06); } .d-menu-close{ position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:10px; background:rgba(var(--tint-rgb),0.08); border:none; color:var(--text); font-size:15px; cursor:pointer; } /* ============ ТЕЛЕФОН (iPhone и по-тесни) ============ */ /* Оригиналният @media(max-width:980px) в style.css смалява sidebar до икони, но не пипа sidebar-footer/stat-grid — на реален телефон бутоните за търсене/настройки/експорт се точат в текстова колона, а числата в статистиките на Таблото прелива извън картите. Тук поправяме двете, без да пипаме оригиналния файл. */ @media (max-width: 600px) { .sidebar-footer { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px 6px; } .iconbtn { width: auto; flex: 1 1 30%; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 4px; font-size: 18px; text-align: center; } .iconbtn .lb { font-size: 9.5px; font-weight: 600; line-height: 1.15; white-space: normal; } .sync-indicator { flex-basis: 100%; padding: 0 0 4px 0; } .stat-grid { grid-template-columns: 1fr; } .stat-card .value { font-size: 22px; overflow-wrap: anywhere; } main { padding: 24px 16px 50px 16px; } .sticky-head { margin: -24px -16px 18px -16px; padding: 22px 16px 16px 16px; } .section-title { font-size: 26px; } } /* ============ По-широк модал (само десктоп) — записките с rich text се нуждаят от повече хоризонтално място за лентата с инструменти. На мобилния bottom sheet винаги е на цяла ширина, затова тук не пипаме. */ @media (min-width: 769px) { .modal.wide { max-width: 720px; } } /* ============ Quill rich text редактор за записки — препокриваме светлата "snow" тема по подразбиране, за да пасне на тъмната визия на приложението. */ .note-editor-wrap .ql-toolbar.ql-snow{ border-color: var(--line); border-radius: 11px 11px 0 0; background: rgba(var(--tint-rgb),0.03); } .note-editor-wrap .ql-container.ql-snow{ border-color: var(--line); border-radius: 0 0 11px 11px; background: rgba(var(--tint-rgb),0.04); font-family: var(--font-body); font-size: 14.5px; min-height: 220px; } .note-editor-wrap .ql-editor{ color: var(--text); min-height: 220px; } .note-editor-wrap .ql-editor.ql-blank::before{ color: var(--text-dim); font-style: normal; } .note-editor-wrap .ql-snow .ql-stroke{ stroke: var(--text-dim); } .note-editor-wrap .ql-snow .ql-fill{ fill: var(--text-dim); } .note-editor-wrap .ql-snow .ql-picker{ color: var(--text-dim); } .note-editor-wrap .ql-snow .ql-picker-options{ background: var(--paper); border-color: var(--line); } .note-editor-wrap .ql-toolbar.ql-snow .ql-formats{ margin-right: 10px; } .note-editor-wrap .ql-snow.ql-toolbar button:hover, .note-editor-wrap .ql-snow .ql-toolbar button:hover, .note-editor-wrap .ql-snow.ql-toolbar button.ql-active, .note-editor-wrap .ql-snow .ql-toolbar button.ql-active{ color: var(--ink); } .note-editor-wrap .ql-snow.ql-toolbar button:hover .ql-stroke, .note-editor-wrap .ql-snow .ql-toolbar button:hover .ql-stroke, .note-editor-wrap .ql-snow.ql-toolbar button.ql-active .ql-stroke, .note-editor-wrap .ql-snow .ql-toolbar button.ql-active .ql-stroke{ stroke: var(--ink); } .note-editor-wrap .ql-snow.ql-toolbar button.ql-active .ql-fill{ fill: var(--ink); } /* Rich text съдържание в прегледа на картата на записката (само за четене). Добавяме и класа .ql-editor (без реален Quill instance), за да наследим list-style/bullet CSS-а на Quill — списъците (bullet/numbered) се пазят и от двата вида като
    с data-list="bullet|ordered" (Quill го прави така и за двата случая), а разликата в изгледа идва изцяло от .ql-editor CSS-а; извън него браузърът показва номерация по подразбиране за
      , независимо от избрания формат. Тук неутрализираме частта от .ql-editor, която е специфична за реален редактируем кутия (padding/height), не за preview. */ .li-note-rich{ margin-top: 10px; color: var(--text); opacity: 0.85; line-height: 1.5; max-height: 140px; overflow: hidden; } .li-note-rich.ql-editor{ padding: 0; height: auto; overflow-y: visible; } .li-note-rich p{ margin: 0 0 6px 0; } .li-note-rich h1, .li-note-rich h2, .li-note-rich h3{ margin: 0 0 6px 0; font-size: 15px; font-weight: 700; opacity: 1; } .li-note-rich ul, .li-note-rich ol{ margin: 0 0 6px 0; padding-left: 20px; } .li-note-rich blockquote{ margin: 0 0 6px 0; padding-left: 10px; border-left: 2px solid var(--line); opacity: 0.8; } /* ============ Архив (Задачи/Записки) — бутон за архивиране/връщане в долния десен ъгъл на плочката, до датата. ============ */ .li-archive-btn{ background:none; border:none; color: var(--text-dim); cursor:pointer; font-size: 14px; padding: 5px 7px; line-height:1; border-radius:8px; flex-shrink:0; } .li-archive-btn:hover{ color: var(--ink); background: rgba(99,102,241,0.14); } /* ============ Резултати от глобалното търсене — кликаеми, водят до съответния елемент и го отварят за редакция. ============ */ .search-result{ cursor:pointer; border-radius:10px; margin: 0 -6px; padding: 10px 6px; transition: background .12s ease; } .search-result:hover{ background: rgba(var(--tint-rgb),0.05); } /* ============ Дедлайн бадж (Задачи/Записки) ============ */ .deadline-badge{ margin-top:8px; font-size:12px; font-weight:600; color: var(--text-dim); } .deadline-badge.soon{ color: var(--amber-2, #FB923C); } .deadline-badge.overdue{ color: var(--bad, #F87171); font-weight:700; } /* ============ Клик върху цяла плочка = редакция (Задачи/Записки/Финанси, desktop) — премахва нуждата от отделна ✎ иконка. ============ */ [data-card-open]{ cursor:pointer; transition: background .12s ease; } .card[data-card-open]:hover{ background: rgba(var(--tint-rgb),0.03); } .list-item[data-card-open]:hover{ background: rgba(var(--tint-rgb),0.04); border-radius:10px; } /* ============ Календар (месечен грид, споделен desktop/mobile) ============ Огледален на .dp-grid/.dp-day (custom date picker), но за постоянен изглед на цял екран вместо малък popup — по-големи клетки + точка-индикатор за дни със събития. */ /* Замества статичното h1.section-title заглавие — изглежда еднакво, но всяка част е кликаем