/* ========== Themes ========== * default values below are the BLUE theme (default). * Other themes override these via data-theme attribute on . */ :root { --font: 'Book Antiqua', 'Palatino Linotype', Palatino, 'URW Palladio L', Georgia, serif; /* Blue (default) — darkened */ --bg: #a5c4e0; --bg-light: #c1d6ea; --bg-white: #e0ecf6; --header-bg: #2c5f8d; --header-text: #ffffff; --accent: #2c5f8d; --accent-hover: #1f4970; --text: #1a2b3d; --text-light: #3e5468; --border: #7ba4ca; --row-odd: transparent; --row-even: #cfdfef; --row-hover: #b8cee4; --danger: #c03a36; --warn: #d99016; --done: #6c7a89; --link: #1f4a78; --modal-bg: #e8f0f8; --input-bg: #f4f8fc; --input-disabled-bg: #d0dae5; --shadow: 0 2px 8px rgba(0,0,0,0.15); } /* Gray */ [data-theme="gray"] { --bg: #eef1f5; --bg-light: #f4f6fa; --bg-white: #f9fafb; --header-bg: #4a5568; --accent: #4a5568; --accent-hover: #2d3748; --text: #2d3748; --text-light: #718096; --border: #cbd5e0; --row-odd: transparent; --row-even: #f7fafc; --row-hover: #e8edf4; --link: #4a5568; } /* Brown / Warm */ [data-theme="brown"] { --bg: #efe6d8; --bg-light: #f7f0e2; --bg-white: #fdf9f1; --header-bg: #8b6f4f; --accent: #8b6f4f; --accent-hover: #6f5638; --text: #3e2e1c; --text-light: #7a6855; --border: #d4bf9a; --row-odd: transparent; --row-even: #f7efde; --row-hover: #efe2c4; --link: #6b4f2c; } /* Dark */ [data-theme="dark"] { --bg: #1a1d23; --bg-light: #232730; --bg-white: #2a2f3a; --header-bg: #14171c; --header-text: #e8eaed; --accent: #14171c; --accent-hover: #2a2f3a; --text: #e1e3e6; --text-light: #9aa0a6; --border: #3a414c; --row-odd: transparent; /* even rows below = "нечётные строки серым" */ --row-even: #2e333d; --row-hover: #353c47; --danger: #e57373; --warn: #f1c779; --done: #6b7280; --link: #7ab0e0; --modal-bg: #2a2f3a; --input-bg: #1f232b; --input-disabled-bg: #1a1d23; --shadow: 0 2px 8px rgba(0,0,0,0.4); } /* ========== Base ========== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.45; } a { color: var(--link); } /* ========== Header ========== */ .header { background: var(--header-bg); color: var(--header-text, #fff); padding: 12px 22px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); flex-wrap: wrap; gap: 12px; } .header h1 { margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: 0.3px; } .header a { color: var(--header-text, #fff); text-decoration: none; } .header-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .header-right a { color: var(--header-text, #fff); text-decoration: none; font-size: 0.9rem; opacity: 0.92; padding: 4px 6px; border-radius: 4px; transition: background 0.15s; } .header-right a:hover { background: rgba(255,255,255,0.12); opacity: 1; } #themeSelect { padding: 4px 10px; border: 1px solid rgba(255,255,255,0.4); border-radius: 5px; background: rgba(255,255,255,0.92); color: #333; font-family: var(--font); font-size: 0.85rem; cursor: pointer; } [data-theme="dark"] #themeSelect { background: var(--bg-light); color: var(--text); border-color: var(--border); } .user-info { font-size: 0.85rem; opacity: 0.85; } .btn-logout { background: rgba(255,255,255,0.18); color: var(--header-text, #fff); border: 1px solid rgba(255,255,255,0.25); padding: 4px 12px; border-radius: 5px; cursor: pointer; font-family: var(--font); font-size: 0.85rem; transition: background 0.15s; } .btn-logout:hover { background: rgba(255,255,255,0.3); } /* ========== Main layout ========== */ .main-layout-full { padding: 18px 22px; max-width: 1600px; margin: 0 auto; } .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px 14px; background: var(--bg-light); border: 1px solid var(--border); border-radius: 8px; } .stats { display: flex; gap: 14px; font-size: 0.85rem; color: var(--text-light); } .stats b { color: var(--text); } .stats .urgent { color: var(--danger); font-weight: 500; } .search-box { flex: 1; min-width: 180px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font-family: var(--font); font-size: 0.9rem; } .toolbar select, .filter-select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font-family: var(--font); font-size: 0.9rem; cursor: pointer; min-width: 150px; } .sort-btn { padding: 7px 14px; border: 1px solid var(--border); background: var(--bg-white); color: var(--text); border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 0.88rem; transition: all 0.15s; } .sort-btn:hover { background: var(--row-hover); } .sort-btn.active { background: var(--accent); color: #fff; border-color: var(--border); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); } .btn-add { padding: 7px 16px; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 0.9rem; font-weight: 500; transition: background 0.15s; margin-left: auto; } .btn-add:hover { background: var(--accent-hover); } /* ========== Table ========== */ .table-scroll { overflow-x: auto; background: var(--bg-white); border: 1px solid var(--border); border-radius: 8px; } .tasks-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .tasks-table thead th { background: var(--header-bg); color: var(--header-text, #fff); padding: 9px 12px; text-align: left; font-weight: 600; font-size: 0.85rem; position: sticky; top: 0; z-index: 5; border-right: 1px solid rgba(255,255,255,0.1); } .tasks-table thead th:last-child { border-right: none; } .tasks-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; } .tasks-table tbody tr:nth-child(odd) { background: var(--row-odd); } .tasks-table tbody tr:nth-child(even) { background: var(--row-even); } .tasks-table tbody tr:hover { background: var(--row-hover); } .tasks-table td { padding: 9px 12px; vertical-align: top; border-right: 1px solid var(--border); } .tasks-table td:last-child { border-right: none; } .cell-num { text-align: center; color: var(--text-light); font-variant-numeric: tabular-nums; width: 54px; white-space: nowrap; /* точки и цифра — в одну строку */ } .cell-num .drag-dots { color: var(--text-light); opacity: 0.5; margin-right: 2px; font-size: 0.95rem; transition: opacity 0.15s; } .cell-num .row-num { vertical-align: middle; } .tasks-table tbody tr:hover .cell-num .drag-dots { opacity: 1; } .cell-direction { color: var(--text-light); font-size: 0.85rem; width: 140px; } /* Проект — на четверть уже (180 → 135px) */ .cell-project { font-weight: 500; width: 135px; } /* Кнопки «Архивировать» и «Удалить» — на отдельной строке под названием проекта, видны только при наведении на ячейку проекта. */ .cell-project .cell-icons { display: flex; gap: 6px; margin-top: 4px; visibility: hidden; } .cell-project:hover .cell-icons { visibility: visible; } /* Идея — в полтора раза шире (220 → 330px) */ .cell-task { width: 330px; } /* Карандаш «Изменить» — в конце текста идеи, виден только при наведении на ячейку. */ .cell-task .cell-edit-btn { margin-left: 4px; vertical-align: baseline; visibility: hidden; } .cell-task:hover .cell-edit-btn { visibility: visible; } .task-text { display: inline; } .task-text.done { font-style: italic; color: var(--done); } .task-check { width: 16px; height: 16px; margin-right: 8px; accent-color: var(--accent); vertical-align: middle; cursor: pointer; } /* Описание — самый широкий столбец (забирает ширину Проекта, Идеи и бывшего столбца действий). */ .cell-note { min-width: 380px; } .cell-due { width: 130px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; } .due-red { color: var(--danger); font-weight: 600; } .due-yellow { color: var(--warn); font-weight: 500; } .cell-actions { width: 110px; text-align: right; white-space: nowrap; } .row-action-btn { background: none; border: none; cursor: pointer; color: var(--text-light); padding: 3px 6px; font-size: 0.95rem; border-radius: 4px; transition: all 0.15s; } .row-action-btn:hover { background: var(--row-hover); color: var(--text); } .row-action-btn.danger:hover { color: var(--danger); } /* ========== Note attachments inline preview ========== */ .note-content { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; } .note-text-line { white-space: pre-wrap; word-wrap: break-word; } .note-link-line a { word-break: break-all; } .note-attachments { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .note-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); cursor: pointer; transition: transform 0.15s; } .note-thumb:hover { transform: scale(1.05); } .note-audio { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--bg-light); border: 1px solid var(--border); border-radius: 4px; font-size: 0.8rem; color: var(--text); cursor: pointer; } .note-audio::before { content: "♪"; font-size: 1rem; } /* ========== Modals ========== */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.active { display: flex; } .modal { background: var(--modal-bg); color: var(--text); padding: 24px; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; } .modal h2 { margin: 0 0 16px; font-size: 1.2rem; color: var(--text); } .modal label { display: block; margin-bottom: 4px; font-size: 0.85rem; color: var(--text-light); font-weight: 500; } .modal input[type="text"], .modal input[type="url"], .modal input[type="password"], .modal input[type="email"], .modal textarea, .modal select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font-family: var(--font); font-size: 0.9rem; margin-bottom: 12px; } .modal textarea { resize: vertical; min-height: 60px; } .modal input:focus, .modal textarea:focus, .modal select:focus { outline: none; border-color: var(--accent); } .modal-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .modal-btn { padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 0.9rem; font-weight: 500; transition: background 0.15s; } .modal-btn.primary { background: var(--accent); color: #fff; } .modal-btn.primary:hover { background: var(--accent-hover); } .modal-btn.secondary { background: var(--bg-light); color: var(--text); border: 1px solid var(--border); } .modal-btn.secondary:hover { background: var(--row-hover); } .modal-btn.danger { background: var(--danger); color: #fff; } .modal-btn.danger:hover { opacity: 0.9; } /* Project combo (input + datalist look) */ .project-combo { position: relative; } /* Attachment editor in modal */ .attach-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .attach-item { position: relative; border: 1px solid var(--border); border-radius: 6px; padding: 6px; background: var(--bg-light); display: flex; flex-direction: column; gap: 4px; align-items: center; min-width: 80px; } .attach-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; } .attach-item .att-name { font-size: 0.72rem; color: var(--text-light); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-item .att-remove { position: absolute; top: -6px; right: -6px; background: var(--danger); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 0.9rem; cursor: pointer; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; } .upload-buttons { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .upload-btn { padding: 7px 14px; border: 1px dashed var(--border); background: var(--bg-light); color: var(--text); border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 0.85rem; transition: background 0.15s; } .upload-btn:hover { background: var(--row-hover); border-style: solid; } .upload-btn input { display: none; } /* Image lightbox */ .lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 200; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; } .lightbox.active { display: flex; } .lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 4px 24px rgba(0,0,0,0.6); } /* ========== Login page ========== */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 32px 28px; max-width: 380px; width: 100%; box-shadow: var(--shadow); } .login-card h1 { margin: 0 0 6px; font-size: 1.5rem; text-align: center; } .login-card .subtitle { text-align: center; color: var(--text-light); font-size: 0.85rem; margin-bottom: 22px; } .login-card label { display: block; margin-bottom: 4px; font-size: 0.85rem; color: var(--text-light); } .login-card input[type="text"], .login-card input[type="password"] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-family: var(--font); font-size: 0.95rem; margin-bottom: 14px; background: var(--input-bg); color: var(--text); } .login-card .remember-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 0.85rem; color: var(--text-light); } .login-card button { width: 100%; padding: 10px; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 0.95rem; font-weight: 500; } .login-card button:hover { background: var(--accent-hover); } .login-error { color: var(--danger); font-size: 0.85rem; margin-bottom: 10px; min-height: 1em; } /* ========== Mobile ========== */ .mobile-list { padding: 12px; padding-bottom: 80px; } .mobile-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); } .mobile-card.done .mobile-card-task { font-style: italic; color: var(--done); } .mobile-card-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.78rem; color: var(--text-light); margin-bottom: 6px; } .mobile-card-project { font-weight: 600; color: var(--text); } .mobile-card-task { font-size: 0.95rem; margin-bottom: 6px; word-wrap: break-word; } .mobile-card-due { font-size: 0.82rem; margin-bottom: 6px; } .mobile-card-note { font-size: 0.85rem; color: var(--text-light); } .mobile-card-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .mobile-card-actions button { flex: 1; min-width: 80px; padding: 7px; border: 1px solid var(--border); background: var(--bg-light); color: var(--text); border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 0.82rem; } .mobile-card-actions .done-btn { background: var(--accent); color: #fff; border-color: var(--accent); } .mobile-card-actions .danger { color: var(--danger); } .mobile-fab { position: fixed; bottom: 22px; right: 22px; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.8rem; border: none; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 50; line-height: 1; } .mobile-toolbar { display: flex; gap: 8px; padding: 10px 12px; background: var(--bg-light); border-bottom: 1px solid var(--border); flex-wrap: wrap; align-items: center; } .mobile-toolbar select { flex: 1; min-width: 120px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text); font-size: 0.85rem; } .mobile-toolbar .sort-btn { padding: 8px 14px; font-size: 0.85rem; } /* ========== Log page ========== */ .log-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: var(--bg-white); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } .log-table th { background: var(--header-bg); color: var(--header-text, #fff); padding: 8px 12px; text-align: left; font-weight: 600; } .log-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .log-table tbody tr:nth-child(odd) { background: var(--row-odd); } .log-table tbody tr:nth-child(even) { background: var(--row-even); } /* Notifications / toast */ .toast { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg-white); padding: 10px 20px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: 300; font-size: 0.9rem; max-width: 90vw; } .toast.active { display: block; } @media (max-width: 700px) { .header { padding: 10px 14px; } .main-layout-full { padding: 12px; } .toolbar { gap: 8px; padding: 8px; } .modal { padding: 18px; } } /* ========== Group separators within tasks table ========== Когда подряд идут задачи разных проектов — выделяем границей */ .tasks-table tbody tr.group-first td { border-top: 2px solid var(--accent); } /* ========== Confirm dialog (custom) ========== */ .confirm-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; } /* ========== Timeline page ========== */ .timeline-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; padding: 10px 14px; background: var(--bg-light); border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap; } .timeline-controls label { font-size: 0.88rem; color: var(--text-light); } .timeline-container { background: var(--bg-white); border: 1px solid var(--border); border-radius: 8px; padding: 16px; overflow-x: auto; } .timeline-grid { position: relative; display: grid; /* Колонки будут заданы из JS — grid-template-columns */ } .timeline-row { display: contents; } .timeline-label { padding: 8px 12px; font-size: 0.88rem; color: var(--text); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-light); white-space: nowrap; position: sticky; left: 0; z-index: 2; min-width: 180px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; } .timeline-label .tl-direction { color: var(--text-light); font-size: 0.78rem; display: block; } .timeline-cell { position: relative; border-right: 1px dashed var(--border); border-bottom: 1px solid var(--border); min-height: 38px; background: var(--bg-white); } .timeline-cell.weekend { background: var(--bg-light); } .timeline-cell.today { background: color-mix(in srgb, var(--accent) 8%, var(--bg-white)); } .timeline-header-cell { padding: 3px 1px; font-size: 0.72rem; text-align: center; color: var(--text-light); border-right: 1px dashed var(--border); border-bottom: 2px solid var(--border); background: var(--bg-light); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; line-height: 1.15; overflow: hidden; position: relative; } .timeline-header-cell .tl-day { font-variant-numeric: tabular-nums; } .timeline-header-cell .tl-month { font-size: 0.62rem; color: var(--text-light); white-space: nowrap; } .timeline-header-cell.month-start { border-left: 2px solid var(--accent); font-weight: 600; color: var(--text); overflow: visible; /* чтобы название месяца было видно полностью */ z-index: 3; } .timeline-header-cell.month-start .tl-month { color: var(--text); font-weight: 600; background: var(--bg-light); padding: 0 3px; border-radius: 3px; } .timeline-header-cell.is-today .tl-day { color: var(--accent); font-weight: 700; } .timeline-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); z-index: 1; } .timeline-dot:hover { transform: translate(-50%, -50%) scale(1.15); } .timeline-tooltip { position: fixed; background: var(--modal-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.2); z-index: 50; font-size: 0.85rem; max-width: 340px; pointer-events: none; display: none; } .timeline-tooltip.active { display: block; } .timeline-tooltip .tt-title { font-weight: 600; margin-bottom: 4px; } .timeline-tooltip .tt-item { margin: 2px 0; color: var(--text-light); } .timeline-tooltip .tt-item b { color: var(--text); font-weight: normal; } .timeline-empty { text-align: center; padding: 60px 20px; color: var(--text-light); } /* ========== Lightbox carousel arrows / info ========== */ .lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; border: none; width: 50px; height: 80px; font-size: 2.2rem; cursor: pointer; border-radius: 6px; line-height: 1; z-index: 210; padding: 0; transition: background 0.15s; } .lb-arrow:hover { background: rgba(0,0,0,0.75); } .lb-prev { left: 12px; } .lb-next { right: 12px; } .lb-info { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.6); color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 0.85rem; z-index: 210; } @media (max-width: 700px) { .lb-arrow { width: 40px; height: 60px; font-size: 1.8rem; } } /* ========== Mobile carousel (full-screen task card) ========== */ .carousel-nav { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--bg-light); border-bottom: 1px solid var(--border); gap: 12px; } .carousel-arrow { width: 44px; height: 38px; border: 1px solid var(--border); background: var(--bg-white); color: var(--text); border-radius: 6px; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0; font-family: var(--font); } .carousel-arrow:disabled { opacity: 0.4; cursor: not-allowed; } .carousel-info { flex: 1; text-align: center; font-size: 0.92rem; color: var(--text); font-variant-numeric: tabular-nums; } .carousel-area { padding: 12px; padding-bottom: 90px; min-height: calc(100vh - 200px); touch-action: pan-y; position: relative; overflow: hidden; } .task-card-full { background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; padding: 16px; box-shadow: var(--shadow); } .tc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; font-size: 0.85rem; color: var(--text-light); gap: 12px; } .tc-project { font-weight: 600; color: var(--text); font-size: 1rem; } .tc-direction { font-size: 0.8rem; } .tc-task { font-size: 1.15rem; margin: 12px 0; word-wrap: break-word; line-height: 1.35; } .tc-task.done { font-style: italic; color: var(--done); } .tc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 0.88rem; } .tc-meta .tc-meta-item { background: var(--bg-light); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; } .tc-section { margin: 12px 0; } .tc-section-label { color: var(--text-light); font-size: 0.78rem; margin-bottom: 4px; } .tc-note-text { white-space: pre-wrap; word-wrap: break-word; font-size: 0.95rem; } .tc-attachments { display: flex; flex-wrap: wrap; gap: 8px; } .tc-attachments img { width: 90px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; } .tc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; } .tc-actions button { padding: 10px; border: 1px solid var(--border); background: var(--bg-light); color: var(--text); border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 0.9rem; } .tc-actions .done-btn { background: var(--accent); color: #fff; border-color: var(--accent); } .tc-actions .danger { color: var(--danger); } /* Compact modal buttons row to prevent overflow on mobile */ @media (max-width: 480px) { .modal-buttons { flex-wrap: wrap; } .modal-buttons .modal-btn { flex: 1 1 auto; min-width: 90px; padding: 8px 12px; font-size: 0.85rem; } } /* ========== Drag & Drop for tasks ========== Перетаскивание только за столбец нумерации (.drag-handle). Остальной текст в строке можно выделять мышью. */ .tasks-table td { user-select: text; } .cell-num.drag-handle { cursor: grab; user-select: none; } .cell-num.drag-handle:active { cursor: grabbing; } .tasks-table tbody tr.dragging { opacity: 0.4; } .tasks-table tbody tr.drag-over td { border-top: 2px solid var(--accent); } /* ========== Цвета фона идей ========== */ .color-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .color-swatch { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; padding: 0; color: var(--text-light); font-size: 0.9rem; line-height: 1; transition: transform 0.1s, box-shadow 0.1s; } .color-swatch:hover { transform: scale(1.1); } .color-swatch.selected { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); } /* Классы цвета для строк таблицы и карточек. !important — чтобы перебить чередование строк. Текст остаётся тёмным (цвета пастельные). */ .todo-color-red { background: #f8d7da !important; } .todo-color-orange { background: #ffe5cc !important; } .todo-color-yellow { background: #fff3cd !important; } .todo-color-green { background: #d4edda !important; } .todo-color-blue { background: #d1ecf1 !important; } .todo-color-purple { background: #e2d9f3 !important; } .todo-color-gray { background: #e2e3e5 !important; } /* В цветных строках текст всегда тёмный для контраста (важно для тёмной темы) */ .tasks-table tbody tr[class*="todo-color-"], .tasks-table tbody tr[class*="todo-color-"] td, .tasks-table tbody tr[class*="todo-color-"] .task-text, .tasks-table tbody tr[class*="todo-color-"] .cell-direction, .mobile-card[class*="todo-color-"], .mobile-card[class*="todo-color-"] .mobile-card-task, .task-card-full[class*="todo-color-"], .task-card-full[class*="todo-color-"] .tc-task, .task-card-full[class*="todo-color-"] .tc-project, .task-card-full[class*="todo-color-"] .tc-direction { color: #1a2b3d; } .task-card-full[class*="todo-color-"] .tc-section-label, .task-card-full[class*="todo-color-"] .tc-meta-item { color: #3e5468; } /* ========== Mobile reorder buttons inside the card ========== */ .tc-reorder { display: flex; gap: 6px; justify-content: center; margin-top: 10px; } .tc-reorder button { flex: 1; padding: 8px; border: 1px solid var(--border); background: var(--bg-light); color: var(--text); border-radius: 6px; cursor: pointer; font-size: 1rem; font-family: var(--font); } .tc-reorder button:disabled { opacity: 0.4; cursor: not-allowed; } /* ========== Fix select arrow overlap on mobile ========== */ .mobile-toolbar select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; text-overflow: ellipsis; }