* { margin: 0; padding: 0; box-sizing: border-box; }
/* Убираем подсветку тапа и фокусные рамки у кнопок */
button,
.btn,
.auth-btn,
.fab-btn,
.section-tab,
.list-chip,
.goal-filter,
.task-action-btn,
.task-menu-btn,
.goal-category-btn,
.list-delete-btn,
.icon-btn-header,
.planner-nav-btn,
.weekday-btn,
.priority-pill,
.duration-preset,
.period-btn,
.add-list-btn,
.empty-state-action {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
outline: none;
}
button:focus,
button:focus-visible,
.btn:focus,
.btn:focus-visible {
outline: none;
box-shadow: none;
}
body {
font-family: var(--font-sans);
background-color: var(--paper-bg);
background-image: var(--paper-texture);
color: var(--text-primary);
transition: var(--transition);
height: 100vh;
height: 100dvh;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.app-container {
display: flex;
height: 100vh;
height: 100dvh;
overflow: hidden; /* ← добавить */
}
/* ===== SIDEBAR ===== */
.sidebar {
width: 280px;
background: var(--bg-secondary);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
}
.sidebar-header {
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border-color);
}
.logo { font-size: 22px; font-weight: 500; color: var(--accent-color); }
.sidebar-actions { display: flex; gap: 4px; }
.icon-btn-header {
background: none;
border: none;
cursor: pointer;
font-size: 20px;
padding: 8px;
border-radius: 50%;
transition: var(--transition);
color: var(--text-secondary);
}
.icon-btn-header:hover { background: var(--bg-hover); color: var(--text-primary); }
.lists-container { flex: 1; overflow-y: auto; padding: 8px; }
.list-item {
display: flex;
align-items: center;
padding: 12px 16px;
margin: 2px 0;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
}
.list-item:hover { background: var(--bg-hover); }
.list-item.active { background: var(--accent-color); color: var(--paper-800); }
.list-item.active .list-icon,
.list-item.active .task-count { color: var(--paper-800); }
.list-icon { margin-right: 12px; font-size: 20px; color: var(--text-secondary); }
.list-name { flex: 1; font-size: 14px; font-weight: 500; }
.task-count { font-size: 12px; color: var(--text-secondary); }
.sidebar-section {
padding: 8px;
border-top: 1px solid var(--border-color);
}
.sidebar-action-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.sidebar-action-item:hover { background: var(--bg-hover); }
.sidebar-action-item .list-icon { margin: 0; }
/* ===== СТРОКА ПОЛЬЗОВАТЕЛЯ В САЙДБАРЕ ===== */
.user-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
margin: 8px;
border-top: 1px solid #E5E9F0;
padding-top: 14px;
}
/* Email + зелёная точка */
.user-info {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #5A6270;
font-weight: 500;
overflow: hidden;
flex: 1;
min-width: 0;
}
.user-info .user-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #2FA96B; /* зелёный — «онлайн» */
flex-shrink: 0;
}
.user-info .user-dot.guest {
background: #F59E0B; /* оранжевый — «гость» */
}
/* Email — обрезается многоточием */
.user-info span:last-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Иконки настроек и выхода */
.user-actions {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
}
.user-action-btn {
width: 28px;
height: 28px;
border: none;
background: transparent;
color: #9AA3B2;
cursor: pointer;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background 0.15s ease, color 0.15s ease;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.user-action-btn:hover {
background: #EEF1F6;
color: #1A1D23;
}
.user-action-btn:active {
background: #E5E9F0;
}
/* Выход — краснеет при hover */
.user-action-btn#logoutBtn:hover {
background: #FDE8E8;
color: #EF4444;
}
.user-action-btn#logoutBtn:active {
background: #FBD5D5;
}
/* ===== MAIN CONTENT ===== */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
max-width: 800px;
margin: 0 auto;
padding: 24px;
width: 100%;
min-height: 0; /* ← добавить */
overflow: hidden; /* ← добавить */
position: relative;
}
/* ===== LISTS SCROLL ===== */
.lists-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 12px;
margin-bottom: 16px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.lists-scroll.dragging {
cursor: grabbing;
}
.lists-scroll::-webkit-scrollbar { display: none; }
.list-chip {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 20px;
background: var(--bg-secondary);
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: var(--transition);
border: 1px solid transparent;
flex-shrink: 0;
user-select: none;
}
.list-chip:hover { background: var(--bg-hover); }
.list-chip.active { background: var(--accent-color); color: var(--paper-800); }
.list-chip.active .chip-count { background: rgba(255,255,255,0.55); color: var(--paper-800); }
.chip-icon { font-size: 16px; }
.chip-count {
background: var(--bg-hover);
color: var(--text-secondary);
font-size: 11px;
font-weight: 500;
padding: 2px 7px;
border-radius: 10px;
min-width: 20px;
text-align: center;
}
.chip-add {
background: none;
border: 1px dashed var(--border-color);
color: var(--accent-color);
font-weight: 500;
}
.chip-add:hover { background: var(--bg-hover); border-color: var(--accent-color); }
/* ===== TASKS ===== */
.tasks-list {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
min-height: 0; /* ← добавить, если нет */
padding-bottom: 80px;
}
.task-item {
display: flex;
align-items: center;
padding: 12px;
margin: 4px 0;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: var(--paper-shadow);
cursor: pointer;
transition: var(--transition);
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent; /* ← убирает серую подсветку */
-webkit-touch-callout: none; /* ← убирает меню по долгому тапу */
touch-action: pan-y; /* ← разрешает вертикальный скролл */
}
.task-item:hover { box-shadow: var(--shadow); background: var(--bg-hover); }
.task-item:active { transform: scale(0.99); }
.task-item.not-today { opacity: 0.5; background: var(--bg-secondary); }
.task-item.not-today .task-title { color: var(--text-secondary); }
.task-item.future-task { opacity: 0.55; background: var(--bg-secondary); }
.task-item.overdue-task {
background: #fef7f6;
border-color: #f4c7c3;
}
.task-item.overdue-task .task-title { color: #a50e0e; }
.task-checkbox {
width: 20px;
height: 20px;
margin-right: 12px;
cursor: pointer;
border: 2px solid var(--checkbox-border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: var(--transition);
}
.task-checkbox.checked { background: var(--accent-color); border-color: var(--accent-color); }
.task-checkbox.checked::after { content: '✓'; color: white; font-size: 12px; }
.task-checkbox.disabled { opacity: 0.4; cursor: not-allowed; }
.task-content { flex: 1; min-width: 0; }
.task-title { font-size: 14px; color: var(--text-primary); word-break: break-word; }
.task-title.completed { text-decoration: line-through; color: var(--text-secondary); }
.task-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: 12px;
color: var(--text-secondary);
flex-wrap: wrap;
}
.task-priority { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.priority-high { background: #fce8e6; color: #d93025; }
.priority-medium { background: #fef7e0; color: #f9ab00; }
.priority-low { background: #e6f4ea; color: #137333; }
.task-recurrence {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
background: #e8f0fe;
color: var(--accent-color);
}
.task-recurrence.not-today { background: var(--bg-hover); color: var(--text-secondary); }
.task-due-date {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
background: var(--bg-hover);
color: var(--text-secondary);
}
.task-due-date.overdue { background: #fce8e6; color: #d93025; }
.task-due-date.today { background: #e6f4ea; color: #137333; }
/* Действия задачи — только на ПК */
.task-actions {
display: none;
gap: 4px;
align-items: center;
flex-shrink: 0;
}
.task-action-btn {
background: none;
border: none;
cursor: pointer;
padding: 6px 12px;
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
transition: var(--transition);
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.task-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.task-action-btn.edit-btn:hover { background: var(--accent-color); color: white; }
.task-action-btn.stats-btn {
padding: 6px 10px;
font-size: 16px;
}
.task-action-btn.stats-btn:hover { background: var(--bg-hover); }
/* На ПК — показываем действия всегда */
@media (min-width: 481px) {
.task-actions { display: flex; }
}
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-secondary); }
.empty-state-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state-text { font-size: 16px; }
/* ===== COMPLETED TASKS ACCORDION (внутри списка) ===== */
.completed-accordion {
margin-top: 16px;
padding-top: 8px;
border-top: 1px solid var(--border-color);
}
.completed-toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
background: none;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
transition: var(--transition);
text-align: left;
font-family: inherit;
}
.completed-toggle:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.completed-arrow {
font-size: 11px;
transition: transform 0.2s ease;
display: inline-block;
color: var(--text-secondary);
}
.completed-arrow.open {
transform: rotate(90deg);
}
.completed-text {
flex: 1;
}
.completed-count {
background: var(--bg-hover);
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
min-width: 24px;
text-align: center;
}
.completed-list {
margin-top: 4px;
}
/* Выполненные задачи в аккордеоне — приглушённые */
.completed-list .task-item {
opacity: 0.7;
background: var(--bg-secondary);
}
.completed-list .task-item:hover {
opacity: 1;
}
.completed-list .task-title {
color: var(--text-secondary);
}
/* ===== FAB ===== */
.fab-btn {
position: fixed;
bottom: calc(20px + env(safe-area-inset-bottom));
right: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--accent-color);
color: white;
border: none;
font-size: 28px;
font-weight: 300;
line-height: 1;
cursor: pointer;
box-shadow: var(--shadow-fab);
transition: var(--transition);
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 3px;
}
.fab-btn:hover {
background: var(--accent-hover);
transform: scale(1.05);
}
.fab-btn:active { transform: scale(0.95); }
/* ===== MODAL ===== */
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.modal {
background: var(--bg-primary);
border-radius: 12px;
padding: 24px;
width: 400px;
max-width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow);
}
.modal-wide { width: 500px; max-width: 95%; }
.modal-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.modal-header-row .modal-title { margin-bottom: 0; }
.modal-title { font-size: 18px; font-weight: 500; margin-bottom: 16px; }
.modal-input {
width: 100%;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-secondary);
color: var(--text-primary);
margin-bottom: 16px;
font-size: 14px;
font-family: inherit;
}
.modal-input:focus { outline: none; border-color: var(--accent-color); }
.form-group { margin-bottom: 16px; }
.form-label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 8px;
}
.priority-radios { display: flex; gap: 8px; }
.priority-radio { flex: 1; cursor: pointer; }
.priority-radio input[type="radio"] { display: none; }
.priority-pill {
display: block;
padding: 10px 12px;
text-align: center;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
border: 2px solid transparent;
transition: var(--transition);
}
.priority-radio input[type="radio"]:checked + .priority-pill {
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.modal-actions-spread {
justify-content: space-between;
align-items: center;
}
.modal-actions-right {
display: flex;
gap: 8px;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: var(--transition);
}
.btn-primary { background: var(--accent-color); color: white; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--bg-hover); color: var(--text-primary); }
.btn-secondary:hover { background: var(--border-color); }
.btn-danger-outline {
background: none;
border: 1px solid var(--border-color);
color: var(--danger-color);
}
.btn-danger-outline:hover {
background: #fce8e6;
border-color: var(--danger-color);
}
/* ===== COMPACT STATS в окне задачи ===== */
.edit-stats-compact {
display: flex;
gap: 12px;
}
.edit-stat-block {
flex: 1;
background: var(--bg-secondary);
border-radius: 8px;
padding: 12px;
text-align: center;
}
.edit-stat-value {
font-size: 22px;
font-weight: 600;
color: var(--accent-color);
line-height: 1;
margin-bottom: 4px;
}
.edit-stat-label {
font-size: 11px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ===== WEEKDAY BUTTONS ===== */
.weekday-buttons {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.weekday-btn {
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: var(--bg-primary);
color: var(--text-primary);
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: var(--transition);
min-width: 42px;
}
.weekday-btn:hover { background: var(--bg-hover); }
.weekday-btn.selected {
background: var(--accent-color);
color: white;
border-color: var(--accent-color);
}
/* ===== STATS ===== */
.stats-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
gap: 12px;
}
.stats-header .modal-title { margin-bottom: 4px; }
.stats-subtitle { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.stats-periods {
display: flex;
gap: 4px;
background: var(--bg-secondary);
padding: 4px;
border-radius: 8px;
margin-bottom: 20px;
}
.period-btn {
flex: 1;
padding: 8px 12px;
background: none;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
transition: var(--transition);
}
.period-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.period-btn.active {
background: var(--bg-primary);
color: var(--text-primary);
box-shadow: var(--shadow);
}
.stats-summary {
display: flex;
gap: 12px;
margin-bottom: 20px;
}
.stats-summary-3 .stat-card {
flex: 1;
min-width: 0;
}
.stats-summary-3 .stat-value {
font-size: 26px;
}
.stats-summary-3 .stat-card.primary .stat-value {
font-size: 34px;
}
.stat-card {
flex: 1;
background: var(--bg-secondary);
border-radius: 12px;
padding: 16px;
text-align: center;
}
.stat-card.primary { background: var(--accent-color); color: white; }
.stat-value { font-size: 32px; font-weight: 600; line-height: 1; margin-bottom: 6px; }
.stat-card.primary .stat-value { font-size: 40px; }
.stat-label {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
}
.stat-card.primary .stat-label { color: rgba(255,255,255,0.9); }
.stat-detail { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.stat-card.primary .stat-detail { color: rgba(255,255,255,0.75); }
.stats-calendar {
background: var(--bg-secondary);
border-radius: 12px;
padding: 16px;
}
.calendar-title {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 8px;
}
.calendar-weekday {
text-align: center;
font-size: 11px;
font-weight: 500;
color: var(--text-secondary);
padding: 4px 0;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
background: var(--bg-primary);
transition: var(--transition);
position: relative;
}
.calendar-day.empty { background: transparent; color: transparent; pointer-events: none; }
.calendar-day.not-scheduled { background: var(--bg-primary); color: var(--text-secondary); opacity: 0.5; }
.calendar-day.completed { background: #34a853; color: white; }
.calendar-day.missed { background: #fce8e6; color: #d93025; font-weight: 600; }
.calendar-day.today { outline: 2px solid var(--accent-color); outline-offset: -2px; }
.year-months {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.year-month {
background: var(--bg-primary);
border-radius: 8px;
padding: 8px;
}
.year-month-title {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
text-align: center;
margin-bottom: 6px;
}
.year-month-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.year-month-day {
aspect-ratio: 1;
border-radius: 3px;
background: var(--bg-secondary);
min-height: 8px;
}
.year-month-day.empty { background: transparent; }
.year-month-day.not-scheduled { background: var(--bg-secondary); opacity: 0.4; }
.year-month-day.completed { background: #34a853; }
.year-month-day.missed { background: #f28b82; }
.year-month-day.today { outline: 1.5px solid var(--accent-color); outline-offset: -1.5px; }
.year-month-day.future { background: transparent; }
.stats-legend {
display: flex;
gap: 16px;
margin-top: 12px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary);
}
.legend-dot {
width: 12px;
height: 12px;
border-radius: 3px;
flex-shrink: 0;
}
.legend-dot.completed { background: #34a853; }
.legend-dot.missed { background: #fce8e6; border: 1px solid #d93025; }
.legend-dot.not-scheduled { background: var(--bg-primary); border: 1px solid var(--border-color); opacity: 0.5; }
.stats-section {
background: var(--bg-secondary);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.stats-section-title {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stats-task-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 14px;
border-bottom: 1px solid var(--border-color);
}
.stats-task-row:last-child { border-bottom: none; }
.stats-task-medal { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; }
.stats-task-name {
flex: 1;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stats-task-percent {
font-weight: 600;
font-size: 14px;
padding: 2px 8px;
border-radius: 6px;
}
.stats-task-percent.best { background: #e6f4ea; color: #137333; }
.stats-task-percent.worst { background: #fce8e6; color: #d93025; }
.stats-task-streak { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.stats-task-progress { margin-bottom: 12px; }
.stats-task-progress:last-child { margin-bottom: 0; }
.stats-progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
font-size: 13px;
}
.stats-progress-name {
color: var(--text-primary);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
margin-right: 8px;
}
.stats-progress-value { font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.stats-progress-bar {
height: 8px;
background: var(--bg-hover);
border-radius: 4px;
overflow: hidden;
}
.stats-progress-fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
}
.task-item.dragging { opacity: 0.5; }
.task-item.drag-over { border-top: 2px solid var(--accent-color); }
#syncIndicator {
position: fixed;
bottom: calc(20px + env(safe-area-inset-bottom));
left: 20px;
background: var(--accent-color);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
opacity: 0;
transition: opacity 0.3s;
z-index: 9999;
pointer-events: none;
}
/* ===== AUTH SCREEN ===== */
.auth-screen {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
background: var(--bg-secondary);
padding: 20px;
padding-top: calc(20px + env(safe-area-inset-top));
padding-bottom: calc(20px + env(safe-area-inset-bottom));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.auth-box {
background: var(--bg-primary);
border-radius: 16px;
padding: 32px 28px;
width: 100%;
max-width: 420px;
box-shadow: var(--shadow);
text-align: center;
}
.auth-logo { font-size: 28px; font-weight: 500; color: var(--accent-color); margin-bottom: 16px; }
.auth-title { font-size: 20px; font-weight: 500; margin-bottom: 20px; color: var(--text-primary); }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-input {
padding: 14px 16px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-secondary);
color: var(--text-primary);
font-size: 15px;
transition: var(--transition);
}
.auth-input:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}
.auth-btn {
padding: 14px;
background: var(--accent-color);
color: white;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
margin-top: 8px;
}
.auth-btn:hover { background: var(--accent-hover); box-shadow: var(--shadow); }
.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-error {
padding: 10px 14px;
background: #fce8e6;
color: #d93025;
border-radius: 8px;
font-size: 13px;
text-align: left;
margin-top: -4px;
}
.auth-success {
padding: 10px 14px;
background: #e6f4ea;
color: #137333;
border-radius: 8px;
font-size: 13px;
text-align: left;
margin-top: -4px;
}
.auth-switch { margin-top: 14px; font-size: 13px; color: var(--text-secondary); }
.auth-link {
background: none;
border: none;
color: var(--accent-color);
cursor: pointer;
font-size: 14px;
font-weight: 500;
padding: 4px;
margin-left: 4px;
}
.auth-link:hover { text-decoration: underline; }
.auth-hint {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border-color);
font-size: 12px;
color: var(--text-secondary);
line-height: 1.4;
}
/* ===== MOBILE MENU ===== */
.mobile-menu-btn {
display: none;
position: fixed;
top: calc(16px + env(safe-area-inset-top));
left: 16px;
z-index: 1001;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 8px;
width: 44px;
height: 44px;
font-size: 22px;
cursor: pointer;
box-shadow: var(--shadow);
color: var(--text-primary);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.mobile-menu-btn.hidden {
opacity: 0;
pointer-events: none;
transform: scale(0.9);
}
.sidebar-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 999;
}
/* ===== MOBILE ===== */
@media (max-width: 480px) {
.main-content {
padding: 12px;
padding-top: calc(68px + env(safe-area-inset-top));
padding-bottom: 0;
}
.mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
.sidebar {
position: fixed;
top: 0;
left: -100%;
height: 100vh;
height: 100dvh;
width: 280px;
max-width: 85%;
z-index: 1000;
transition: left 0.3s ease;
box-shadow: 2px 0 8px rgba(0,0,0,0.15);
padding-top: env(safe-area-inset-top);
}
.sidebar.open { left: 0; }
#closeMenuBtn { display: block !important; }
.sidebar-overlay.active { display: block; }
.list-chip { padding: 10px 18px; font-size: 15px; }
.user-row { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.fab-btn {
bottom: calc(16px + env(safe-area-inset-bottom));
right: 16px;
}
.year-months { grid-template-columns: repeat(2, 1fr); }
.stats-summary { flex-direction: column; }
.modal-wide { width: 100%; }
.task-actions { display: none !important; }
}
/* ===== АНИМАЦИИ ПЕРЕХОДОВ ЗАДАЧ ===== */
.task-item {
transition: background 0.2s ease, box-shadow 0.2s ease;
user-select: none;
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Задача "ждёт" перемещения после изменения */
.task-item.task-pending {
position: relative;
}
.task-item.task-pending::after {
content: '';
position: absolute;
inset: 0;
border-radius: 8px;
pointer-events: none;
animation: pendingPulse 0.8s ease;
}
@keyframes pendingPulse {
0% { box-shadow: 0 0 0 0 rgba(26,115,232,0.4); }
70% { box-shadow: 0 0 0 6px rgba(26,115,232,0); }
100% { box-shadow: 0 0 0 0 rgba(26,115,232,0); }
}
/* Задача плавно исчезает */
.task-item.task-fading-out {
opacity: 0;
transform: translateX(20px) scale(0.95);
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
border-width: 0;
transition: opacity 0.3s ease, transform 0.3s ease,
max-height 0.4s ease 0.3s,
padding 0.4s ease 0.3s,
margin 0.4s ease 0.3s,
border-width 0.4s ease 0.3s;
}
/* Задача плавно появляется */
.task-item.task-appearing {
animation: taskAppear 0.4s ease;
}
@keyframes taskAppear {
0% {
opacity: 0;
transform: translateY(-8px);
max-height: 0;
}
100% {
opacity: 1;
transform: translateY(0);
max-height: 200px;
}
}
/* Плавный переезд — через FLIP-анимацию (реализуется в JS) */
.task-item.task-moving {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
/* Аккордеон выполненных — плавно раскрывается */
.completed-list {
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
/* Кнопка «Выполненные задачи» — плавно пульсирует, когда туда что-то добавили */
.completed-toggle.just-updated {
animation: completedPulse 1s ease;
}
@keyframes completedPulse {
0%, 100% { background: transparent; }
50% { background: rgba(26,115,232,0.1); }
}
/* Плавное появление/исчезновение задач в списке */
.task-item {
will-change: transform;
}
/* Ускорение аппаратного рендеринга */
.tasks-list {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.completed-accordion {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* ===== ПЕРЕКЛЮЧАТЕЛЬ РАЗДЕЛОВ (Задачи / Цели) ===== */
.section-switcher {
display: flex;
gap: 4px;
padding: 8px;
border-bottom: 1px solid var(--border-color);
}
.section-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 12px;
background: none;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
transition: var(--transition);
font-family: inherit;
}
.section-tab:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.section-tab.active {
background: var(--accent-color);
color: var(--paper-800);
border-color: var(--accent-color);
}
/* ===== ПЕРЕКЛЮЧАТЕЛЬ СЕКЦИЙ В ОСНОВНОЙ ОБЛАСТИ ===== */
.main-section-switcher {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 6px;
padding: 6px;
margin-bottom: 12px;
background: var(--bg-secondary);
border-radius: 12px;
flex-shrink: 0;
}
.main-section-switcher .section-tab {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-section-switcher.hidden {
display: none !important;
}
@media (max-width: 480px) {
.main-section-switcher {
position: fixed;
top: calc(16px + env(safe-area-inset-top));
left: 68px;
right: 12px;
z-index: 1001;
margin: 0;
padding: 3px;
gap: 3px;
height: 44px;
border-radius: 10px;
box-shadow: var(--shadow);
}
.main-section-switcher .section-tab {
font-size: 12px;
padding: 0 4px;
gap: 3px;
border-radius: 7px;
}
}
.sidebar-content {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
/* ===== КАТЕГОРИИ ЦЕЛЕЙ ===== */
.goal-categories-container {
flex: 1;
overflow-y: auto;
padding: 8px;
}
.goal-category-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin: 2px 0;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
}
.goal-category-item:hover { background: var(--bg-hover); }
.goal-category-item.active {
background: var(--accent-color);
color: var(--paper-800);
}
.goal-category-item.active .goal-category-count {
color: var(--paper-800);
}
.goal-category-icon {
font-size: 20px;
flex-shrink: 0;
}
.goal-category-name {
flex: 1;
font-size: 14px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-category-count {
font-size: 12px;
color: var(--text-secondary);
flex-shrink: 0;
}
/* ===== ЦЕЛИ — ГЛАВНАЯ ===== */
.goals-header {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
flex-shrink: 0;
}
.goals-title {
font-size: 24px;
font-weight: 500;
color: var(--text-primary);
}
.goals-filters {
display: flex;
gap: 4px;
background: var(--bg-secondary);
padding: 4px;
border-radius: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.goals-filters::-webkit-scrollbar { display: none; }
.goal-filter {
padding: 8px 14px;
background: none;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
transition: var(--transition);
white-space: nowrap;
font-family: inherit;
}
.goal-filter:hover { color: var(--text-primary); }
.goal-filter.active {
background: var(--bg-primary);
color: var(--text-primary);
box-shadow: var(--shadow);
}
.goals-list {
flex: 1;
overflow-y: auto;
padding-bottom: 80px;
}
/* ===== КАРТОЧКА ЦЕЛИ ===== */
.goal-card {
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
cursor: pointer;
transition: var(--transition);
position: relative;
box-shadow: var(--paper-shadow);
}
.goal-card:hover {
box-shadow: var(--shadow);
background: var(--bg-hover);
}
.goal-card.completed {
opacity: 0.6;
background: var(--bg-secondary);
}
.goal-card.completed .goal-card-title {
text-decoration: line-through;
color: var(--text-secondary);
}
.goal-card.overdue {
border-color: #f4c7c3;
background: #fef7f6;
}
.goal-card.overdue .goal-card-date {
color: #a50e0e;
font-weight: 500;
}
.goal-card-header {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 8px;
}
.goal-card-category {
font-size: 12px;
font-weight: 500;
padding: 2px 8px;
border-radius: 10px;
background: var(--bg-secondary);
color: var(--text-secondary);
white-space: nowrap;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 4px;
}
.goal-card.completed .goal-card-category {
background: var(--bg-hover);
}
.goal-card-title {
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 8px;
line-height: 1.3;
}
.goal-card-description {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.4;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.goal-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.goal-card-date {
font-size: 12px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 4px;
}
.goal-progress-wrap {
flex: 1;
min-width: 100px;
display: flex;
align-items: center;
gap: 8px;
}
.goal-progress-bar {
flex: 1;
height: 6px;
background: var(--bg-hover);
border-radius: 3px;
overflow: hidden;
}
.goal-progress-fill {
height: 100%;
background: var(--accent-color);
border-radius: 3px;
transition: width 0.3s ease;
}
.goal-card.completed .goal-progress-fill {
background: #34a853;
}
.goal-progress-value {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
flex-shrink: 0;
min-width: 36px;
text-align: right;
}
.goal-completed-badge {
font-size: 12px;
color: #137333;
background: #e6f4ea;
padding: 2px 8px;
border-radius: 10px;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
}
/* FAB для целей */
.fab-goals {
background: #34a853;
}
.fab-goals:hover {
background: #2d9249;
}
/* ===== МОДАЛКИ ЦЕЛЕЙ ===== */
.modal-textarea {
resize: vertical;
min-height: 80px;
font-family: inherit;
line-height: 1.4;
}
.modal-range {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--bg-hover);
border-radius: 3px;
outline: none;
cursor: pointer;
}
.modal-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent-color);
cursor: pointer;
box-shadow: var(--shadow);
}
.modal-range::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent-color);
cursor: pointer;
border: none;
box-shadow: var(--shadow);
}
.icon-picker {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.icon-pick {
width: 44px;
height: 44px;
border: 2px solid var(--border-color);
border-radius: 8px;
background: var(--bg-secondary);
font-size: 20px;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.icon-pick:hover {
background: var(--bg-hover);
border-color: var(--text-secondary);
}
.icon-pick.selected {
border-color: var(--accent-color);
background: rgba(26,115,232,0.1);
box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}
.goal-complete-toggle {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: var(--bg-secondary);
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
}
.goal-complete-toggle input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #34a853;
}
/* Мобильные */
@media (max-width: 480px) {
.goals-title { font-size: 20px; }
.goal-card { padding: 14px; }
.goal-card-title { font-size: 15px; }
.goal-filter { padding: 6px 12px; font-size: 12px; }
.icon-pick { width: 40px; height: 40px; font-size: 18px; }
}
/* ===== КНОПКА УДАЛЕНИЯ КАТЕГОРИИ ЦЕЛЕЙ ===== */
.goal-category-item {
position: relative;
padding-right: 44px;
/* Место для кнопки */
}
.goal-category-delete {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
flex-shrink: 0;
z-index: 2;
}
.goal-category-delete:hover {
background: #fce8e6;
color: var(--danger-color);
transform: translateY(-50%) scale(1.1);
}
.goal-category-item.active .goal-category-delete {
color: rgba(255, 255, 255, 0.85);
}
.goal-category-item.active .goal-category-delete:hover {
background: rgba(255, 255, 255, 0.25);
color: white;
}
@media (max-width: 480px) {
/* ... существующие стили ... */
.stats-summary { flex-direction: column; }
.stats-summary-3 { flex-direction: column; }
}
/* ===== КЛИКАБЕЛЬНЫЕ ДНИ В СТАТИСТИКЕ ===== */
.calendar-day.clickable {
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.calendar-day.clickable:hover {
transform: scale(1.15);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
z-index: 2;
position: relative;
}
.calendar-day.clickable:active {
transform: scale(0.95);
}
.year-month-day.clickable {
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.year-month-day.clickable:hover {
transform: scale(1.3);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
z-index: 2;
position: relative;
}
.year-month-day.clickable:active {
transform: scale(0.9);
}
/* Анимация при изменении */
.calendar-day.just-changed,
.year-month-day.just-changed {
animation: dayChangePulse 0.6s ease;
}
@keyframes dayChangePulse {
0% { transform: scale(1); }
30% { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(26,115,232,0.25); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(26,115,232,0); }
}
/* ===== ТИП ЗАДАЧИ (радиокнопки) ===== */
.task-type-radios {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.task-type-radio {
flex: 1;
min-width: 100px;
cursor: pointer;
}
.task-type-radio input[type="radio"] {
display: none;
}
.task-type-pill {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 8px;
border-radius: 8px;
background: var(--bg-secondary);
border: 2px solid transparent;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
transition: var(--transition);
text-align: center;
}
.task-type-icon {
font-size: 18px;
}
.task-type-radio input[type="radio"]:checked + .task-type-pill {
background: #e8f0fe;
border-color: var(--accent-color);
color: var(--accent-color);
}
.task-type-radio:hover .task-type-pill {
background: var(--bg-hover);
}
/* ===== ВЫБОР ЦЕЛЕЙ ===== */
.goals-select {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 200px;
overflow-y: auto;
padding: 4px;
background: var(--bg-secondary);
border-radius: 8px;
min-height: 48px;
}
.goals-select-empty {
padding: 12px;
text-align: center;
font-size: 13px;
color: var(--text-secondary);
font-style: italic;
}
.goal-checkbox {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: var(--transition);
font-size: 13px;
background: var(--bg-primary);
}
.goal-checkbox:hover {
background: var(--bg-hover);
}
.goal-checkbox input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--accent-color);
flex-shrink: 0;
}
.goal-checkbox-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-checkbox-cat {
font-size: 11px;
color: var(--text-secondary);
flex-shrink: 0;
}
/* ===== КНОПКА 📊 НА КАРТОЧКЕ ЦЕЛИ ===== */
.goal-card-actions {
position: absolute;
top: 12px;
right: 12px;
display: flex;
gap: 4px;
opacity: 0;
transition: var(--transition);
}
.goal-card:hover .goal-card-actions {
opacity: 1;
}
.goal-card-btn {
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 6px 10px;
cursor: pointer;
font-size: 14px;
transition: var(--transition);
color: var(--text-secondary);
}
.goal-card-btn:hover {
background: var(--accent-color);
color: white;
border-color: var(--accent-color);
}
/* На мобильных — всегда видна кнопка статистики */
@media (max-width: 480px) {
.goal-card-actions {
opacity: 1;
position: static;
margin-top: 8px;
justify-content: flex-end;
}
}
/* ===== СТАТИСТИКА ЦЕЛИ ===== */
.goal-stats-summary {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.goal-stat-block {
background: var(--bg-secondary);
border-radius: 10px;
padding: 14px;
text-align: center;
}
.goal-stat-block.primary {
background: var(--accent-color);
color: white;
grid-column: 1 / -1;
}
.goal-stat-block-value {
font-size: 24px;
font-weight: 600;
line-height: 1;
margin-bottom: 6px;
}
.goal-stat-block.primary .goal-stat-block-value {
font-size: 32px;
}
.goal-stat-block-label {
font-size: 11px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.goal-stat-block.primary .goal-stat-block-label {
color: rgba(255,255,255,0.85);
}
.goal-stat-block-detail {
font-size: 11px;
color: var(--text-secondary);
margin-top: 4px;
}
.goal-stat-block.primary .goal-stat-block-detail {
color: rgba(255,255,255,0.75);
}
/* Разбивка по типам задач */
.goal-stats-by-type {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.goal-type-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg-secondary);
border-radius: 8px;
font-size: 13px;
}
.goal-type-icon {
font-size: 18px;
flex-shrink: 0;
}
.goal-type-label {
flex: 1;
font-weight: 500;
color: var(--text-primary);
}
.goal-type-count {
font-size: 14px;
font-weight: 600;
color: var(--accent-color);
flex-shrink: 0;
}
.goal-type-detail {
font-size: 11px;
color: var(--text-secondary);
flex-shrink: 0;
margin-left: 8px;
}
/* ===== БЕЙДЖ ТИПА ЗАДАЧИ ===== */
.task-type-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
}
.task-type-badge.reminder {
background: #fef7e0;
color: #b06000;
}
/* ===== БЕЙДЖ ЦЕЛИ ЗАДАЧИ ===== */
.task-goal-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
background: #e6f4ea;
color: #137333;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Секции внутри .main-content */
.main-section {
flex: 1 1 0%;
display: flex;
flex-direction: column;
min-height: 0;
height: 0;
overflow: hidden;
}
/* ===== FAB С МЕНЮ ТИПОВ ===== */
.fab-container {
position: fixed;
bottom: calc(20px + env(safe-area-inset-bottom));
right: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
z-index: 500;
}
.fab-menu {
display: flex;
flex-direction: column;
gap: 8px;
animation: fabMenuIn 0.2s ease;
}
@keyframes fabMenuIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fab-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: var(--shadow-fab);
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
transition: var(--transition);
white-space: nowrap;
font-family: inherit;
}
.fab-menu-item:hover {
background: var(--bg-hover);
transform: translateX(-4px);
box-shadow: 0 6px 16px rgba(60,64,67,.25);
}
.fab-menu-item:active {
transform: translateX(-4px) scale(0.98);
}
.fab-menu-icon {
font-size: 18px;
}
.fab-menu-label {
flex: 1;
text-align: left;
}
/* Позиция FAB — теперь внутри .fab-container */
.fab-container .fab-btn {
position: static;
bottom: auto;
right: auto;
}
/* ===== ЗАГОЛОВОК ТИПА В МОДАЛКЕ ===== */
.task-type-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--bg-secondary);
border-radius: 8px;
font-size: 14px;
font-weight: 500;
}
.task-type-header-icon {
font-size: 20px;
}
.task-type-header-label {
color: var(--text-primary);
}
/* ===== ИКОНКА ТИПА В КАРТОЧКЕ ЗАДАЧИ ===== */
.task-type-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
font-size: 14px;
border-radius: 50%;
flex-shrink: 0;
cursor: help;
transition: var(--transition);
position: relative;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.task-type-icon:hover {
background: var(--bg-hover);
transform: scale(1.15);
}
.task-type-icon.single {
background: rgba(26,115,232,0.1);
}
.task-type-icon.recurring {
background: rgba(52,168,83,0.12);
}
.task-type-icon.reminder {
background: rgba(249,171,0,0.15);
}
/* Подсказка (tooltip) */
.task-type-tooltip {
position: fixed;
background: rgba(32,33,36,0.95);
color: white;
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
line-height: 1.4;
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
max-width: 240px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.task-type-tooltip.show {
opacity: 1;
}
.task-type-tooltip-title {
font-weight: 600;
margin-bottom: 2px;
}
.task-type-tooltip-desc {
color: rgba(255,255,255,0.85);
font-size: 11px;
}
/* Мобильная версия FAB */
@media (max-width: 480px) {
.fab-container {
bottom: calc(16px + env(safe-area-inset-bottom));
right: 16px;
}
.fab-menu-item {
padding: 14px 16px;
font-size: 15px;
}
}
/* Плавное появление иконки в карточке */
.task-item .task-type-icon {
animation: typeIconIn 0.3s ease;
}
@keyframes typeIconIn {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
.task-title-row {
display: flex;
align-items: center;
gap: 8px;
}
/* ===== ПЛАНИРОВЩИК ДНЯ ===== */
/* FAB планировщика */
.fab-planner {
background: #8b6e4e;
}
.fab-planner:hover {
background: #6b5238;
}
/* Секция планировщика в сайдбаре */
.planner-sidebar-header {
padding: 12px 16px;
border-bottom: 1px solid var(--border-color);
}
.planner-sidebar-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.planner-sidebar-hint {
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
}
.planner-lists {
flex: 1;
overflow-y: auto;
padding: 8px;
min-width: 0;
}
/* Список задач в планировщике */
.planner-list-group {
margin-bottom: 8px;
border-radius: 8px;
overflow: hidden;
min-width: 0;
}
.planner-list-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--bg-secondary);
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: var(--transition);
user-select: none;
}
.planner-list-header:hover {
background: var(--bg-hover);
}
.planner-list-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.planner-list-count {
font-size: 11px;
color: var(--text-secondary);
}
.planner-list-arrow {
font-size: 10px;
color: var(--text-secondary);
transition: transform 0.2s ease;
}
.planner-list-arrow.open {
transform: rotate(90deg);
}
.planner-list-tasks {
display: none;
padding: 4px 0;
min-width: 0;
}
.planner-list-tasks.open {
display: block;
}
.planner-task {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
margin: 2px 4px;
font-size: 13px;
cursor: grab;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid transparent;
transition: background 0.15s ease, border-color 0.15s ease;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
min-width: 0;
}
.planner-task:hover {
background: #F9FAFC;
border-color: #E5E9F0;
}
.planner-task:active {
cursor: grabbing;
}
.planner-task.dragging {
opacity: 0.5;
}
/* Название — обрезается корректно */
.planner-task-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #1A1D23;
font-weight: 500;
line-height: 1.3;
}
/* Точка приоритета */
.planner-priority-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
.planner-priority-dot.high {
background: #EF4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}
.planner-priority-dot.medium {
background: #F59E0B;
}
/* Подсветка задач, размещённых на ленте */
.planner-task.scheduled {
background: #E6F7ED;
border-color: #B7E4C7;
}
.planner-task.scheduled:hover {
background: #D8F1E2;
border-color: #9BD8B5;
}
/* ===== Раскрытие подзадач в десктопном планировщике ===== */
.planner-task-expand {
width: 20px;
height: 20px;
flex-shrink: 0;
border: none;
background: transparent;
color: #9AA3B2;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 4px;
transition: transform 0.15s ease, background 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.planner-task-expand .ph {
font-size: 12px;
}
.planner-task-expand.open {
transform: rotate(90deg);
}
.planner-task-expand:hover {
background: #EEF1F6;
color: #1A1D23;
}
.planner-task-expand-placeholder {
width: 20px;
flex-shrink: 0;
}
/* Подзадача в десктопном списке планировщика */
.planner-subtask {
display: flex;
align-items: center;
gap: 8px;
margin: 2px 4px 2px 30px;
padding: 7px 10px;
font-size: 13px;
cursor: grab;
border-radius: 8px;
background: #FAFBFC;
border: 1px solid #F0F2F7;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
min-width: 0;
}
.planner-subtask:hover {
background: #F3F5F9;
}
.planner-subtask.dragging {
opacity: 0.5;
}
.planner-subtask.completed .planner-subtask-title {
text-decoration: line-through;
color: #9AA3B2;
}
.planner-subtask-check {
width: 16px;
height: 16px;
flex-shrink: 0;
border: 1.5px solid #C7CEDB;
border-radius: 50%;
background: #FFFFFF;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, border-color 0.15s ease;
}
.planner-subtask-check.checked {
background: #2FA96B;
border-color: #2FA96B;
}
.planner-subtask-check.checked::after {
content: '✓';
color: #FFFFFF;
font-size: 10px;
font-weight: 700;
}
.planner-subtask-title {
flex: 1;
min-width: 0;
color: #1A1D23;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
/* Главная секция планировщика */
.planner-header {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
flex-shrink: 0;
}
/* Переключатель дней */
.planner-day-nav {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
padding: 8px;
background: var(--bg-secondary);
border-radius: 12px;
}
.planner-nav-btn {
width: 40px;
height: 40px;
border: none;
border-radius: 8px;
background: var(--bg-primary);
color: var(--text-primary);
cursor: pointer;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
flex-shrink: 0;
}
.planner-nav-btn:hover:not(:disabled) {
background: var(--accent-color);
color: white;
transform: scale(1.05);
}
.planner-nav-btn:active:not(:disabled) {
transform: scale(0.95);
}
.planner-nav-btn:disabled,
.planner-nav-btn.hidden {
opacity: 0;
pointer-events: none;
}
.planner-day-display {
flex: 1;
max-width: 320px;
padding: 10px 16px;
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--bg-primary);
color: var(--text-primary);
cursor: pointer;
font-size: 15px;
font-weight: 600;
font-family: inherit;
transition: var(--transition);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.planner-day-display:hover {
background: var(--bg-hover);
border-color: var(--accent-color);
color: var(--accent-color);
}
.planner-day-display:active {
transform: scale(0.98);
}
.planner-current-date {
font-size: 13px;
color: var(--text-secondary);
text-align: center;
font-weight: 500;
margin-top: 8px;
}
.planner-day-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.planner-day-btn.active {
background: var(--bg-primary);
color: var(--text-primary);
box-shadow: var(--shadow);
}
.planner-current-date {
font-size: 14px;
color: var(--text-secondary);
text-align: center;
font-weight: 500;
}
/* Временная лента */
.planner-body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
padding: 12px 0;
}
.planner-timeline {
flex: 1;
overflow-y: auto;
position: relative;
background: #F5F7FA;
border-radius: 12px;
padding: 16px 0;
min-height: 0;
box-sizing: border-box;
}
.timeline-hour {
display: flex;
min-height: 60px;
position: relative;
border-bottom: 1px solid var(--border-color);
}
.timeline-hour:last-child {
border-bottom: none;
}
.timeline-hour-label {
width: 60px;
flex-shrink: 0;
font-size: 12px;
color: var(--text-secondary);
padding: 4px 8px;
text-align: right;
font-weight: 500;
}
.timeline-hour-content {
flex: 1;
position: relative;
min-height: 60px;
}
.timeline-half {
position: absolute;
left: 0;
right: 0;
top: 30px;
border-bottom: 1px dashed var(--border-color);
opacity: 0.4;
}
.timeline-task {
position: absolute;
left: 8px;
right: 8px;
background: var(--accent-color);
color: white;
border-radius: 8px;
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
cursor: grab;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: var(--transition);
overflow: hidden;
z-index: 2;
touch-action: pan-y; /* ← лента скроллится, drag берём только после long-press */
user-select: none;
-webkit-user-select: none;
}
.timeline-task.dragging {
opacity: 1;
cursor: grabbing;
box-shadow:
0 0 0 2px #2F6BFF,
0 12px 32px rgba(47, 107, 255, 0.35),
0 4px 12px rgba(20, 30, 60, 0.15);
transform: scale(1.03);
z-index: 30;
/* Плавная подсветка при захвате */
transition:
box-shadow 0.2s ease,
transform 0.15s ease,
background 0.15s ease;
background: linear-gradient(135deg, #4A85FF 0%, #2F6BFF 100%);
outline: none;
}
/* Дополнительный внутренний glow */
.timeline-task.dragging::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
/* Плавное появление/исчезновение */
.timeline-task {
transition:
box-shadow 0.2s ease,
transform 0.2s ease,
background 0.2s ease,
top 0.05s linear; /* чтобы движение было мгновенным, без анимации top */
}
/* На мобильных чуть плавнее */
@media (max-width: 1023px) {
.timeline-task.dragging {
/* На тач-устройствах увеличение поменьше, чтобы не перекрывать соседей */
transform: scale(1.02);
}
}
.timeline-task:hover {
transform: translateX(2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.timeline-task.completed {
background: #34a853;
opacity: 0.85;
}
.timeline-task-title {
font-size: 12px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 2px;
}
.timeline-task-time {
font-size: 10px;
opacity: 0.9;
}
.timeline-now {
position: absolute;
left: 60px;
right: 0;
height: 2px;
background: #d93025;
z-index: 10;
pointer-events: none;
}
.timeline-now::before {
content: '';
position: absolute;
left: -6px;
top: -5px;
width: 12px;
height: 12px;
background: #d93025;
border-radius: 50%;
}
.timeline-now-label {
position: absolute;
left: -50px;
top: -8px;
background: #d93025;
color: white;
font-size: 10px;
padding: 2px 4px;
border-radius: 4px;
font-weight: 600;
}
/* ===== КАЛЕНДАРЬ МЕСЯЦА В ПЛАНИРОВЩИКЕ ===== */
.planner-calendar {
flex: 1;
overflow-y: auto;
background: var(--bg-secondary);
border-radius: 12px;
padding: 16px;
min-height: 0;
}
.planner-calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
}
.planner-calendar-title {
flex: 1;
text-align: center;
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.planner-calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 6px;
}
.planner-calendar-weekday {
text-align: center;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
padding: 4px 0;
}
.planner-calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.planner-calendar-cell {
position: relative;
aspect-ratio: 1;
border: 1px solid transparent;
border-radius: 8px;
background: var(--bg-primary);
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
font-family: inherit;
}
.planner-calendar-cell.empty {
background: transparent;
cursor: default;
pointer-events: none;
}
.planner-calendar-cell:hover {
background: var(--bg-hover);
border-color: var(--border-color);
}
.planner-calendar-cell.today {
border-color: var(--accent-color);
font-weight: 700;
}
.planner-calendar-cell.selected {
background: var(--accent-color);
color: white;
border-color: var(--accent-color);
}
.planner-calendar-cell.has-schedule::after {
content: '';
position: absolute;
bottom: 4px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent-color);
}
.planner-calendar-cell.selected.has-schedule::after {
background: white;
}
.planner-nav-btn.active {
background: var(--accent-color);
color: white;
}
.planner-nav-btn.active:hover:not(:disabled) {
background: var(--accent-color);
color: white;
}
@media (max-width: 480px) {
.planner-day-btn {
padding: 6px 10px;
font-size: 12px;
}
.timeline-hour-label {
width: 48px;
font-size: 11px;
}
.timeline-task {
left: 4px;
right: 4px;
padding: 4px 8px;
}
.timeline-task-title {
font-size: 11px;
}
}
/* ============================================================
===== ИТЕРАЦИЯ 1: ЛОГОТИП iSticker =========================
============================================================ */
/* ----- Логотип в сайдбаре ----- */
.sidebar-header .logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 22px;
font-weight: 600;
color: #5D4037; /* тёмно-коричневый, в тон галочке */
letter-spacing: -0.3px;
user-select: none;
-webkit-user-select: none;
}
.logo-img {
width: 32px;
height: 32px;
flex-shrink: 0;
display: block;
transition: transform 0.25s ease;
}
.sidebar-header .logo:hover .logo-img {
transform: rotate(-6deg) scale(1.05);
}
.logo-text {
line-height: 1;
padding-top: 2px; /* визуально выравниваем с иконкой */
}
/* ----- Логотип на экране входа ----- */
.auth-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.auth-logo-img {
width: 56px;
height: 56px;
display: block;
filter: none;
animation: logoFloatIn 0.5s ease;
}
.auth-logo-text {
font-size: 22px;
font-weight: 600;
color: #5D4037;
letter-spacing: -0.4px;
line-height: 1;
}
@keyframes logoFloatIn {
from {
opacity: 0;
transform: translateY(-8px) scale(0.92);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ----- Плавающий iSticker (заглушка, включится в Итерации 3) ----- */
.isticker-floating {
position: fixed;
bottom: calc(88px + env(safe-area-inset-bottom)); /* выше FAB «+» */
right: 20px;
width: 52px;
height: 52px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--bg-primary);
box-shadow: var(--shadow-fab);
cursor: pointer;
z-index: 499; /* под FAB-контейнером (z-index: 500) */
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.isticker-floating img {
width: 34px;
height: 34px;
display: block;
pointer-events: none;
transition: transform 0.3s ease;
}
.isticker-floating:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 16px rgba(60,64,67,.35), 0 8px 24px rgba(60,64,67,.2);
}
.isticker-floating:hover img {
transform: rotate(-6deg);
}
.isticker-floating:active {
transform: scale(0.94);
}
/* Пульсация, чтобы привлечь внимание (включим класс из JS в Итерации 3) */
.isticker-floating.pulse {
animation: istickerPulse 2s ease-in-out infinite;
}
@keyframes istickerPulse {
0%, 100% {
box-shadow: var(--shadow-fab);
transform: scale(1);
}
50% {
box-shadow: 0 6px 20px rgba(255, 193, 7, 0.55), 0 8px 24px rgba(255, 193, 7, 0.3);
transform: scale(1.06);
}
}
/* ----- Мобильная адаптация ----- */
@media (max-width: 480px) {
.sidebar-header .logo {
font-size: 20px;
gap: 8px;
}
.logo-img {
width: 28px;
height: 28px;
}
.auth-logo-img {
width: 64px;
height: 64px;
}
.auth-logo-text {
font-size: 24px;
}
.isticker-floating {
bottom: calc(80px + env(safe-area-inset-bottom));
right: 16px;
width: 46px;
height: 46px;
}
.isticker-floating img {
width: 30px;
height: 30px;
}
}
/* ============================================================
===== ИТЕРАЦИЯ 2: ОНБОРДИНГ ================================
============================================================ */
.onboarding-overlay {
position: fixed;
inset: 0;
z-index: 2000;
pointer-events: none; /* клики проходят только через карточку */
}
.onboarding-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 15, 5, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
transition: opacity 0.3s ease;
pointer-events: auto;
}
/* Spotlight — вырез вокруг целевого элемента */
.onboarding-spotlight {
position: fixed;
border-radius: 12px;
box-shadow:
0 0 0 4px rgba(255, 213, 79, 0.9),
0 0 0 9999px rgba(20, 15, 5, 0.55);
background: transparent;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 2001;
}
/* Стрелка-указатель */
.onboarding-arrow {
position: fixed;
font-size: 32px;
color: #FFD54F;
z-index: 2002;
pointer-events: none;
animation: onbArrowBounce 1.2s ease-in-out infinite;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
@keyframes onbArrowBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Карточка с текстом */
.onboarding-card {
position: fixed;
width: 340px;
max-width: calc(100vw - 32px);
background: var(--bg-primary);
border-radius: 16px;
padding: 20px;
box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);
z-index: 2003;
pointer-events: auto;
transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Центральное положение (для слайдов) */
.onboarding-card.centered {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.onboarding-progress {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.onboarding-step {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.onboarding-skip {
background: none;
border: none;
cursor: pointer;
font-size: 13px;
color: var(--text-secondary);
padding: 4px 8px;
border-radius: 6px;
transition: var(--transition);
font-family: inherit;
}
.onboarding-skip:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.onboarding-icon {
font-size: 40px;
line-height: 1;
margin-bottom: 12px;
text-align: center;
}
.onboarding-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
line-height: 1.25;
}
.onboarding-text {
font-size: 14px;
line-height: 1.5;
color: var(--text-secondary);
margin-bottom: 20px;
}
.onboarding-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.onboarding-btn-next {
padding: 10px 22px;
background: #FFC107;
color: #5D4037;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
font-family: inherit;
box-shadow: 0 2px 6px rgba(255, 193, 7, 0.35);
}
.onboarding-btn-next:hover {
background: #FFB300;
box-shadow: 0 4px 10px rgba(255, 193, 7, 0.45);
transform: translateY(-1px);
}
.onboarding-btn-next:active {
transform: translateY(0);
}
.onboarding-btn-back {
padding: 10px 16px;
background: none;
border: none;
color: var(--text-secondary);
font-size: 14px;
cursor: pointer;
border-radius: 8px;
transition: var(--transition);
font-family: inherit;
}
.onboarding-btn-back:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
/* Мобильная адаптация */
@media (max-width: 480px) {
.onboarding-card {
width: calc(100vw - 24px);
padding: 18px;
}
.onboarding-icon { font-size: 34px; }
.onboarding-title { font-size: 18px; }
.onboarding-text { font-size: 13px; }
.onboarding-arrow { font-size: 26px; }
}
/* ============================================================
===== СТАТИСТИКА В МОДАЛКЕ ЦЕЛИ ============================
============================================================ */
.goal-stats-inline {
background: var(--bg-secondary);
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
}
.goal-stats-inline-header {
margin-bottom: 16px;
}
.goal-stats-inline-cat {
display: inline-block;
font-size: 12px;
font-weight: 500;
padding: 2px 10px;
border-radius: 10px;
background: var(--bg-primary);
color: var(--text-secondary);
margin-bottom: 8px;
}
.goal-stats-inline-title {
display: block;
font-size: 17px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
/* Три карточки с датами */
.goal-dates-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 16px;
}
.goal-date-card {
background: var(--bg-primary);
border-radius: 10px;
padding: 12px 8px;
text-align: center;
border: 1px solid var(--border-color);
}
.goal-date-card.accent {
background: #FFF8E1;
border-color: #FFD54F;
}
.goal-date-value {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
margin-bottom: 4px;
}
.goal-date-card.accent .goal-date-value {
color: #5D4037;
font-size: 17px;
}
.goal-date-label {
font-size: 10px;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Типы задач — компактные строки */
.goal-types-inline {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 12px;
border-top: 1px solid var(--border-color);
}
.goal-types-inline:empty {
display: none;
}
.goal-type-row-inline {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
padding: 6px 10px;
background: var(--bg-primary);
border-radius: 8px;
}
.goal-type-row-inline .goal-type-icon {
font-size: 16px;
flex-shrink: 0;
}
.goal-type-row-inline .goal-type-label {
flex: 1;
color: var(--text-primary);
font-weight: 500;
}
.goal-type-row-inline .goal-type-count {
font-weight: 700;
color: var(--accent-color);
font-size: 13px;
flex-shrink: 0;
}
.goal-type-row-inline .goal-type-detail {
font-size: 11px;
color: var(--text-secondary);
flex-shrink: 0;
margin-left: 6px;
}
/* Разделитель перед редактированием */
.goal-edit-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 20px 0 16px;
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.goal-edit-divider::before,
.goal-edit-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-color);
}
/* ============================================================
===== ВРЕМЕННАЯ ЛИНЕЙКА ЦЕЛИ ===============================
============================================================ */
.goal-time-line {
background: var(--bg-primary);
border-radius: 10px;
padding: 14px;
margin-bottom: 16px;
border: 1px solid var(--border-color);
}
/* Заголовки Прошло / Осталось */
.goal-time-headers {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.goal-time-label-left,
.goal-time-label-right {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.goal-time-label-left {
color: #5D4037;
}
.goal-time-label-right {
color: var(--text-secondary);
}
.goal-time-line.overdue .goal-time-label-right {
color: #D93025;
}
.goal-time-line.completed .goal-time-label-right {
color: #137333;
}
/* Полоска с датами по краям */
.goal-time-track-wrap {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.goal-time-date {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
flex-shrink: 0;
}
.goal-time-date-start {
color: #5D4037;
}
.goal-time-date-end {
color: var(--text-primary);
}
.goal-time-track {
flex: 1;
height: 10px;
background: var(--bg-hover);
border-radius: 5px;
overflow: hidden;
position: relative;
}
.goal-time-fill {
height: 100%;
background: linear-gradient(90deg, #FFD54F, #FFC107);
border-radius: 5px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.goal-time-line.overdue .goal-time-fill {
background: linear-gradient(90deg, #F28B82, #D93025);
}
.goal-time-line.completed .goal-time-fill {
background: linear-gradient(90deg, #81C995, #34A853);
}
/* Подпись под полоской */
.goal-time-detail {
font-size: 11px;
color: var(--text-secondary);
text-align: center;
}
.goal-time-line.overdue .goal-time-detail {
color: #D93025;
font-weight: 500;
}
.goal-time-line.completed .goal-time-detail {
color: #137333;
font-weight: 500;
}
/* ============================================================
===== ПРОГРЕСС ВЫПОЛНЕНИЯ ЦЕЛИ =============================
============================================================ */
.goal-progress-block {
background: var(--bg-primary);
border-radius: 10px;
padding: 14px;
margin-bottom: 16px;
border: 1px solid var(--border-color);
}
.goal-progress-block-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.goal-progress-block-label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.goal-progress-block-percent {
font-size: 16px;
font-weight: 700;
color: var(--accent-color);
flex-shrink: 0;
}
.goal-progress-block-bar {
height: 10px;
background: var(--bg-hover);
border-radius: 5px;
overflow: hidden;
margin-bottom: 8px;
}
.goal-progress-block-fill {
height: 100%;
background: linear-gradient(90deg, #64B5F6, #1A73E8);
border-radius: 5px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.goal-progress-block-detail {
font-size: 11px;
color: var(--text-secondary);
text-align: center;
}
/* Мобильная адаптация */
@media (max-width: 480px) {
.goal-time-line,
.goal-progress-block {
padding: 12px;
}
.goal-time-label-left,
.goal-time-label-right,
.goal-progress-block-label {
font-size: 11px;
}
.goal-progress-block-percent {
font-size: 15px;
}
.goal-time-date {
font-size: 10px;
}
.goal-time-track,
.goal-progress-block-bar {
height: 8px;
}
.goal-time-detail,
.goal-progress-block-detail {
font-size: 10px;
}
}
/* ============================================================
===== РЕДАКТИРУЕМАЯ ШКАЛА ПРОГРЕССА ЦЕЛИ ===================
============================================================ */
.goal-progress-slider-wrap {
margin: 8px 0 10px;
}
/* Стилизуем range как «шкалу прогресса» */
.goal-progress-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
outline: none;
cursor: pointer;
/* Серый фон + залитая часть через линейный градиент */
background: linear-gradient(to right,
#1A73E8 0%,
#1A73E8 var(--progress, 0%),
var(--bg-hover) var(--progress, 0%),
var(--bg-hover) 100%);
transition: background 0.15s ease;
}
/* Ползунок */
.goal-progress-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
border: 3px solid #1A73E8;
cursor: grab;
box-shadow: 0 2px 6px rgba(26, 115, 232, 0.35);
transition: transform 0.15s ease;
margin-top: 0;
}
.goal-progress-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 3px 10px rgba(26, 115, 232, 0.5);
}
.goal-progress-slider::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.05);
}
.goal-progress-slider::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
border: 3px solid #1A73E8;
cursor: grab;
box-shadow: 0 2px 6px rgba(26, 115, 232, 0.35);
}
.goal-progress-slider::-moz-range-track {
height: 10px;
border-radius: 5px;
background: var(--bg-hover);
}
.goal-progress-slider::-moz-range-progress {
height: 10px;
border-radius: 5px;
background: #1A73E8;
}
/* Подсказка */
.goal-progress-hint {
margin-top: 10px;
padding: 8px 10px;
font-size: 11px;
line-height: 1.4;
color: #5D4037;
background: #FFF8E1;
border-radius: 6px;
border-left: 3px solid #FFC107;
text-align: left;
}
/* Анимация привлекающая внимание при первом открытии */
.goal-progress-slider.pulse-hint::-webkit-slider-thumb {
animation: progressThumbPulse 1.2s ease 0.4s 2;
}
@keyframes progressThumbPulse {
0%,
100% {
box-shadow: 0 2px 6px rgba(26, 115, 232, 0.35);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 8px rgba(26, 115, 232, 0.2),
0 2px 6px rgba(26, 115, 232, 0.35);
transform: scale(1.15);
}
}
@media (max-width: 480px) {
.goal-progress-hint {
font-size: 10px;
padding: 6px 8px;
}
.goal-progress-slider::-webkit-slider-thumb {
width: 24px;
height: 24px;
}
}
/* ============================================================
ИТЕРАЦИЯ 2: КНОПКИ, ИНПУТЫ, ФОРМЫ
Единый API. Все кнопки и поля используют токены из tokens.css
============================================================ */
/* ==================== КНОПКИ ==================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 40px;
padding: 0 var(--space-5);
border: 1px solid transparent;
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--text-base);
font-weight: var(--weight-medium);
line-height: 1;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
white-space: nowrap;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Primary — жёлтая, тёмный текст */
.btn-primary {
background: var(--brand-400);
color: var(--paper-800);
box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
background: var(--brand-500);
color: var(--paper-900);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: var(--shadow-xs);
}
/* Secondary — нейтральная бумага */
.btn-secondary {
background: var(--paper-200);
color: var(--paper-800);
border-color: var(--paper-300);
}
.btn-secondary:hover {
background: var(--paper-300);
border-color: var(--paper-400);
}
/* Ghost — прозрачная */
.btn-ghost {
background: transparent;
color: var(--paper-700);
}
.btn-ghost:hover {
background: var(--paper-200);
}
/* Danger outline — красная рамка на бумаге */
.btn-danger-outline {
background: transparent;
color: var(--danger-500);
border-color: var(--paper-300);
}
.btn-danger-outline:hover {
background: var(--danger-50);
border-color: var(--danger-500);
color: var(--danger-700);
}
/* Размеры */
.btn-sm {
height: 32px;
padding: 0 var(--space-4);
font-size: var(--text-sm);
border-radius: var(--radius-sm);
}
.btn-lg {
height: 48px;
padding: 0 var(--space-6);
font-size: var(--text-md);
border-radius: var(--radius-lg);
}
/* Авторизация */
.auth-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 40px;
padding: 0 20px;
background: #2F6BFF;
color: #FFFFFF;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition:
background-color 0.15s ease,
transform 0.15s ease,
box-shadow 0.15s ease;
box-shadow: 0 1px 2px rgba(20, 30, 60, 0.04);
margin-top: 6px;
}
.auth-btn:hover:not(:disabled) {
background: #2458D6;
}
.auth-btn:active:not(:disabled) {
background: #1B44A8;
transform: translateY(1px);
}
.auth-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ==================== АКТИВНЫЕ ТАБЫ / СЕКЦИИ ==================== */
/* Переключатель в сайдбаре */
.section-tab.active {
background: var(--brand-400);
color: var(--paper-800);
border-color: var(--brand-400);
box-shadow: var(--shadow-xs);
}
/* Основной переключатель сверху */
.main-section-switcher .section-tab.active {
background: var(--brand-400);
color: var(--paper-800);
border-color: transparent;
}
/* Чипы списков */
.list-chip.active {
background: var(--brand-400);
color: var(--paper-800);
}
.list-chip.active .chip-count {
background: rgba(255, 255, 255, 0.55);
color: var(--paper-800);
}
/* Список в сайдбаре */
.list-item.active {
background: var(--brand-400);
color: var(--paper-800);
}
.list-item.active .list-icon,
.list-item.active .task-count {
color: var(--paper-800);
}
/* Категории целей */
.goal-category-item.active {
background: var(--brand-400);
color: var(--paper-800);
}
.goal-category-item.active .goal-category-count {
color: var(--paper-800);
}
.goal-category-item.active .goal-category-drag-handle {
color: var(--paper-700);
}
/* Фильтры целей */
.goal-filter.active {
background: var(--brand-100);
color: var(--paper-800);
box-shadow: none;
}
/* ==================== FAB ==================== */
.fab-btn {
background: var(--brand-400);
color: var(--paper-800);
font-weight: var(--weight-semibold);
box-shadow: var(--shadow-lg), var(--shadow-sticker);
}
.fab-btn:hover {
background: var(--brand-500);
transform: scale(1.06);
}
.fab-btn:active {
transform: scale(0.96);
}
/* Отдельные FAB по типам — вернуть семантические цвета */
.fab-goals {
background: var(--brand-400);
color: var(--paper-800);
}
.fab-goals:hover {
background: var(--brand-500);
}
/* ==================== ЧЕКБОКСЫ / РАДИО ==================== */
.task-checkbox.checked {
background: #2FA96B;
border-color: #2FA96B;
}
.task-checkbox.checked::after {
color: #FFFFFF;
font-weight: var(--weight-bold);
}
/* Тумблер «Достигнута» */
.goal-complete-toggle input[type="checkbox"] {
accent-color: var(--brand-400);
}
/* Радио приоритета */
.priority-radio input[type="radio"]:checked + .priority-pill {
border-color: var(--brand-400);
box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.25);
}
/* Радио дней недели */
.weekday-btn.selected {
background: var(--brand-400);
color: var(--paper-800);
border-color: var(--brand-400);
}
/* ==================== ИНПУТЫ / ФОРМЫ ==================== */
.modal-input,
.auth-input {
width: 100%;
height: 44px;
padding: 0 var(--space-4);
background: var(--paper-50);
color: var(--text-primary);
border: 1px solid var(--paper-300);
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--text-base);
line-height: 1;
transition:
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
outline: none;
margin-bottom: var(--space-3);
}
/* Компактные инпуты авторизации (не затрагивает .modal-input) */
.auth-input {
height: 42px;
margin-bottom: 0;
}
.modal-input:hover,
.auth-input:hover {
border-color: var(--paper-400);
}
.modal-input:focus,
.auth-input:focus {
border-color: var(--brand-400);
box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.20);
background: var(--paper-50);
}
.modal-input::placeholder,
.auth-input::placeholder {
color: var(--paper-500);
}
/* Select */
select.modal-input {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
padding-right: var(--space-8);
cursor: pointer;
}
/* Textarea */
textarea.modal-input {
height: auto;
min-height: 90px;
padding: var(--space-3) var(--space-4);
line-height: var(--leading-normal);
resize: vertical;
}
/* Дата и время */
input[type="date"].modal-input,
input[type="time"].modal-input {
padding-right: var(--space-3);
}
/* ==================== ФОРМА (label + control) ==================== */
.form-group {
margin-bottom: var(--space-4);
}
.form-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--paper-700);
margin-bottom: var(--space-2);
letter-spacing: 0.1px;
}
/* ==================== КНОПКИ МОДАЛОК (футер) ==================== */
.modal-actions {
display: flex;
gap: var(--space-2);
justify-content: flex-end;
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--paper-200);
}
.modal-actions-spread {
justify-content: space-between;
align-items: center;
}
.modal-actions-right {
display: flex;
gap: var(--space-2);
}
/* ==================== МЕЛКИЕ КНОПКИ ==================== */
.icon-btn-header {
background: transparent;
border: none;
cursor: pointer;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
font-size: 18px;
color: var(--paper-600);
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--transition);
-webkit-tap-highlight-color: transparent;
}
.icon-btn-header:hover {
background: var(--paper-200);
color: var(--paper-800);
}
.icon-btn-header:active {
transform: scale(0.94);
}
/* ==================== МОБИЛЬНЫЕ ==================== */
@media (max-width: 480px) {
.btn {
height: 44px;
padding: 0 var(--space-5);
}
.btn-sm {
height: 36px;
padding: 0 var(--space-4);
}
.modal-input,
.auth-input {
height: 46px;
font-size: 16px; /* чтобы iOS не зумил при фокусе */
}
.modal-actions {
flex-direction: column-reverse;
}
.modal-actions .btn,
.modal-actions-right .btn {
width: 100%;
}
.modal-actions-right {
width: 100%;
flex-direction: column-reverse;
}
}
/* ============================================================
ИТЕРАЦИЯ 3: КАРТОЧКИ ЗАДАЧ И ЦЕЛЕЙ
Бумажная фактура, тёплые пастельные бейджи
============================================================ */
/* ==================== КАРТОЧКА ЗАДАЧИ ==================== */
.task-item {
padding: var(--space-3) var(--space-4);
margin: var(--space-1) 0;
background: var(--paper-50);
border: 1px solid var(--paper-200);
border-radius: var(--radius-md);
box-shadow: var(--shadow-paper);
transition:
box-shadow var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out),
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.task-item:hover {
background: var(--paper-50);
border-color: var(--paper-300);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.task-item:active {
transform: translateY(0) scale(0.995);
box-shadow: var(--shadow-xs);
}
/* Не-сегодня и будущие — приглушённые */
.task-item.not-today,
.task-item.future-task {
background: var(--paper-100);
border-color: var(--paper-200);
opacity: 0.6;
}
.task-item.not-today:hover,
.task-item.future-task:hover {
opacity: 1;
}
/* Просрочено — терракотовая рамка */
.task-item.overdue-task {
background: #FCF3F0;
border-color: #E8C4B8;
}
.task-item.overdue-task:hover {
border-color: #D9A593;
}
.task-item.overdue-task .task-title {
color: #A8442B;
}
/* Заголовок */
.task-title {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--paper-900);
line-height: var(--leading-snug);
}
.task-title.completed {
text-decoration: line-through;
text-decoration-color: var(--paper-500);
color: var(--paper-500);
}
/* Чекбокс */
.task-checkbox {
width: 22px;
height: 22px;
margin-right: var(--space-3);
border: 2px solid var(--paper-400);
background: var(--paper-50);
transition: var(--transition);
}
.task-checkbox:hover {
border-color: var(--brand-400);
}
.task-checkbox.checked {
background: #2FA96B;
border-color: #2FA96B;
}
.task-checkbox.checked::after {
content: '✓';
color: #FFFFFF;
font-size: 13px;
font-weight: var(--weight-bold);
}
/* ==================== БЕЙДЖИ В КАРТОЧКЕ ЗАДАЧИ ==================== */
/* Приоритеты — тёплая пастель */
.priority-high {
background: #F9DDD4;
color: #9B3B1F;
}
.priority-medium {
background: #FBEFC9;
color: #8A6100;
}
.priority-low {
background: #E1EDD9;
color: #3F6E3A;
}
/* Повторение — спокойный сине-серый */
.task-recurrence {
background: #E2E8EE;
color: #4A6478;
}
.task-recurrence.not-today {
background: var(--paper-200);
color: var(--paper-600);
}
/* Дата — бумажный */
.task-due-date {
background: var(--paper-200);
color: var(--paper-700);
}
.task-due-date.today {
background: #E1EDD9;
color: #3F6E3A;
}
.task-due-date.overdue {
background: #F9DDD4;
color: #9B3B1F;
}
/* Бейдж цели — мягкий зелёный */
.task-goal-badge {
background: #E1EDD9;
color: #3F6E3A;
}
/* Иконка типа задачи — тёплые подложки */
.task-type-icon.single {
background: rgba(255, 193, 7, 0.18);
}
.task-type-icon.recurring {
background: rgba(123, 143, 163, 0.18);
}
.task-type-icon.reminder {
background: rgba(249, 171, 0, 0.18);
}
/* Tooltip на тёплом фоне */
.task-type-tooltip {
background: var(--paper-800);
color: var(--paper-50);
box-shadow: var(--shadow-lg);
}
.task-type-tooltip-desc {
color: var(--paper-300);
}
/* ==================== КАРТОЧКА ЦЕЛИ ==================== */
.goal-card {
padding: var(--space-4);
margin-bottom: var(--space-3);
background: var(--paper-50);
border: 1px solid var(--paper-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-paper);
transition:
box-shadow var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
cursor: pointer;
}
.goal-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--paper-300);
}
.goal-card:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
/* Достигнута */
.goal-card.completed {
opacity: 0.6;
background: var(--paper-100);
}
.goal-card.completed:hover {
opacity: 0.85;
}
.goal-card.completed .goal-card-title {
text-decoration: line-through;
text-decoration-color: var(--paper-500);
color: var(--paper-500);
}
.goal-card.completed .goal-progress-fill {
background: var(--success-500);
}
/* Просрочена */
.goal-card.overdue {
background: #FCF3F0;
border-color: #E8C4B8;
}
.goal-card.overdue .goal-card-date {
color: #A8442B;
font-weight: var(--weight-medium);
}
/* Категория — бейдж */
.goal-card-category {
padding: 3px 10px;
background: var(--paper-200);
color: var(--paper-700);
border-radius: var(--radius-full);
font-size: 12px;
}
.goal-card.completed .goal-card-category {
background: var(--paper-200);
}
/* Название */
.goal-card-title {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--paper-900);
line-height: var(--leading-snug);
margin-bottom: var(--space-2);
}
/* Описание */
.goal-card-description {
font-size: var(--text-sm);
color: var(--paper-600);
line-height: var(--leading-normal);
margin-bottom: var(--space-3);
}
/* Дата */
.goal-card-date {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--paper-600);
}
/* Прогресс-бар */
.goal-progress-bar {
height: 6px;
background: var(--paper-200);
}
.goal-progress-fill {
background: linear-gradient(90deg, var(--brand-300), var(--brand-400));
}
.goal-card.completed .goal-progress-fill {
background: var(--success-500);
}
.goal-progress-value {
color: var(--paper-700);
font-weight: var(--weight-semibold);
}
/* Бейдж «Достигнута» */
.goal-completed-badge {
background: var(--success-50);
color: var(--success-700);
}
/* ==================== EMPTY STATES ==================== */
.empty-state {
padding: var(--space-10) var(--space-5);
color: var(--paper-500);
}
.empty-state-icon {
font-size: 56px;
margin-bottom: var(--space-4);
opacity: 0.85;
}
.empty-state-text {
font-size: var(--text-md);
font-weight: var(--weight-medium);
color: var(--paper-600);
}
/* ==================== АККОРДЕОН ВЫПОЛНЕННЫХ ==================== */
.completed-accordion {
margin-top: var(--space-5);
padding-top: var(--space-3);
border-top: 1px solid var(--paper-200);
}
.completed-toggle {
padding: var(--space-3);
border-radius: var(--radius-md);
color: var(--paper-600);
font-weight: var(--weight-medium);
}
.completed-toggle:hover {
background: var(--paper-200);
color: var(--paper-800);
}
.completed-count {
background: var(--paper-200);
color: var(--paper-700);
font-weight: var(--weight-semibold);
}
.completed-list .task-item {
background: var(--paper-100);
border-color: var(--paper-200);
}
/* ==================== АНИМАЦИИ ==================== */
.task-item.task-pending::after {
border-radius: var(--radius-md);
animation: pendingPulse 0.8s var(--ease-out);
}
@keyframes pendingPulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
}
70% {
box-shadow: 0 0 0 6px rgba(255, 193, 7, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
}
}
/* ==================== ТЕНИ/ЦВЕТА — точечные фиксы ==================== */
/* Hover задачи — плавнее */
.task-item:hover {
will-change: transform;
}
/* Заголовки целей в шапке */
.goals-title {
color: var(--paper-900);
font-weight: var(--weight-semibold);
}
/* Планировщик — задачи на ленте */
.planner-list-header {
background: var(--paper-100);
}
.planner-list-header:hover {
background: var(--paper-200);
}
/* Задачи на временной ленте */
.timeline-task {
background: var(--brand-400);
color: var(--paper-800);
font-weight: var(--weight-semibold);
box-shadow: 0 2px 6px rgba(255, 193, 7, 0.35);
}
.timeline-task:hover {
background: var(--brand-500);
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.45);
}
.timeline-task.completed {
background: var(--success-500);
color: white;
opacity: 0.9;
}
/* Календарь планировщика */
.planner-calendar-cell.selected {
background: var(--brand-400);
color: var(--paper-800);
border-color: var(--brand-400);
}
.planner-calendar-cell.today {
border-color: var(--brand-500);
font-weight: var(--weight-bold);
}
.planner-calendar-cell.has-schedule::after {
background: var(--brand-500);
}
.planner-calendar-cell.selected.has-schedule::after {
background: var(--paper-800);
}
/* Кнопки навигации планировщика */
.planner-nav-btn:hover:not(:disabled) {
background: #EEF1F6;
color: #1A1D23;
}
.planner-nav-btn.active {
background: var(--brand-400);
color: var(--paper-800);
}
/* ==================== МОБИЛЬНЫЕ ==================== */
@media (max-width: 480px) {
.task-item {
padding: var(--space-3);
border-radius: var(--radius-md);
}
.goal-card {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
}
.goal-card-title {
font-size: var(--text-base);
}
.empty-state-icon {
font-size: 48px;
}
}
/* ============================================================
ВЕРСИЯ 2: Clean Blue — финальные правки под референс
============================================================ */
/* Фон приложения — холодный светло-серый, без текстуры */
body {
background: var(--paper-100);
background-image: none;
}
/* Сайдбар — белый, тонкая граница, без тени */
.sidebar {
background: var(--paper-50);
border-right: 1px solid var(--paper-300);
box-shadow: none;
width: var(--sidebar-width);
}
/* Активный пункт меню — голубая плашка */
.list-item.active,
.goal-category-item.active {
background: var(--brand-100);
color: var(--brand-400);
font-weight: 600;
}
.list-item.active .list-icon,
.list-item.active .task-count,
.goal-category-item.active .goal-category-count {
color: var(--brand-400);
}
/* Счётчик справа — без фона, синий */
.task-count,
.goal-category-count {
background: none;
color: var(--text-secondary);
font-weight: 600;
}
.list-item.active .task-count {
color: var(--brand-400);
}
/* Заголовки страниц */
.goals-title,
.planner-sidebar-title {
font-size: 24px;
font-weight: 700;
color: var(--paper-900);
letter-spacing: -0.3px;
}
/* Задача: круглый чекбокс, воздух, без жёстких рамок */
.task-item {
background: var(--paper-50);
border: none;
border-bottom: 1px solid var(--paper-200);
border-radius: 0;
box-shadow: none;
padding: 14px 8px;
margin: 0;
}
.task-item:hover {
background: var(--paper-50);
box-shadow: none;
transform: none;
}
.task-item:last-child {
border-bottom: none;
}
.task-item.overdue-task {
background: #FFF5F5;
border-bottom-color: #FBD5D5;
}
.task-checkbox {
width: 20px;
height: 20px;
border: 1.5px solid var(--paper-400);
border-radius: 50%;
background: transparent;
}
.task-checkbox:hover {
border-color: var(--brand-400);
}
.task-checkbox.checked {
background: #2FA96B;
border-color: #2FA96B;
}
/* Название задачи — 14/500 */
.task-title {
font-size: 14px;
font-weight: 500;
color: var(--paper-900);
}
.task-title.completed {
color: var(--paper-500);
text-decoration-color: var(--paper-400);
}
/* Мета-строка — 12px, приглушённая */
.task-meta {
font-size: 12px;
color: var(--paper-600);
gap: 8px;
margin-top: 6px;
}
/* Пилюли-теги — 999px, фон = 12% от цвета текста */
.task-priority,
.task-recurrence,
.task-due-date,
.task-goal-badge {
padding: 3px 9px;
border-radius: var(--radius-full);
font-size: 12px;
font-weight: 500;
line-height: 1.4;
border: none;
}
.priority-high { background: #FDE8E8; color: #EF4444; }
.priority-medium { background: #E8F0FE; color: #2F6BFF; }
.priority-low { background: #F0F2F7; color: #5A6270; }
.task-recurrence {
background: #E8F0FE;
color: #2F6BFF;
}
.task-recurrence.not-today {
background: #F0F2F7;
color: #9AA3B2;
}
.task-due-date { background: #F0F2F7; color: #5A6270; }
.task-due-date.today { background: #E6F7EE; color: #2FA96B; }
.task-due-date.overdue { background: #FDE8E8; color: #EF4444; }
.task-goal-badge {
background: #E6F7EE;
color: #2FA96B;
}
/* Иконка типа задачи — круглая цветная плашка */
.task-type-icon {
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 12px;
}
.task-type-icon.single { background: #EEF2FF; color: #4F46E5; }
.task-type-icon.recurring { background: #E6F7EE; color: #2FA96B; }
.task-type-icon.reminder { background: #FFF4E5; color: #F59E0B; }
/* Кнопка «+ Новая задача» — синяя, скруглённая 10px */
.fab-btn {
background: var(--brand-400);
color: #fff;
box-shadow: 0 8px 20px rgba(47, 107, 255, 0.35);
}
.fab-btn:hover {
background: var(--brand-500);
}
/* Плавающая кнопка-планер — нейтральная */
.fab-planner {
background: var(--paper-50);
color: var(--brand-400);
border: 1px solid var(--paper-300);
box-shadow: var(--shadow-sm);
}
.fab-planner:hover {
background: var(--brand-50);
}
/* Кнопка-цель — тоже синяя (в референсе один акцент) */
.fab-goals {
background: var(--brand-400);
color: #fff;
}
.fab-goals:hover {
background: var(--brand-500);
}
/* Модалка — 16px радиус, мягкая тень */
.modal {
background: var(--paper-50);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: 24px;
}
/* Инпут названия — без рамки, только нижняя линия */
#newTaskTitle,
#editTaskTitle,
#newGoalTitle,
#editGoalTitle,
#listNameInput {
border: none;
border-bottom: 1px solid var(--paper-300);
border-radius: 0;
background: transparent;
padding: 10px 0;
font-size: 16px;
font-weight: 500;
margin-bottom: 20px;
}
#newTaskTitle:focus,
#editTaskTitle:focus,
#newGoalTitle:focus,
#editGoalTitle:focus,
#listNameInput:focus {
border-bottom-color: var(--brand-400);
box-shadow: none;
}
/* Остальные инпуты — светлый фон, тонкая рамка, 10px */
.modal-input {
background: var(--paper-100);
border: 1px solid var(--paper-300);
border-radius: var(--radius-md);
height: 44px;
font-size: 14px;
}
.modal-input:focus {
border-color: var(--brand-400);
box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12);
background: var(--paper-50);
}
/* Пилюли приоритетов в модалке */
.priority-pill {
border-radius: var(--radius-full);
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
border: none;
background: var(--paper-100);
color: var(--paper-600);
transition: var(--transition);
}
.priority-radio input:checked + .priority-pill.priority-low { background: #F0F2F7; color: #5A6270; }
.priority-radio input:checked + .priority-pill.priority-medium { background: #E8F0FE; color: #2F6BFF; }
.priority-radio input:checked + .priority-pill.priority-high { background: #FFF4E5; color: #F59E0B; }
/* Кнопки */
.btn {
border-radius: var(--radius-md);
height: 40px;
font-weight: 600;
font-size: 14px;
}
.btn-primary {
background: var(--brand-400);
color: #fff;
}
.btn-primary:hover {
background: var(--brand-500);
transform: none;
box-shadow: none;
}
.btn-secondary {
background: var(--paper-100);
color: var(--paper-700);
border: 1px solid var(--paper-300);
}
/* Активный таб секции */
.section-tab.active {
background: var(--brand-100);
color: var(--brand-400);
font-weight: 600;
border-color: transparent;
}
.main-section-switcher {
background: var(--paper-100);
border: 1px solid var(--paper-300);
}
.main-section-switcher .section-tab.active {
background: var(--brand-400);
color: #fff;
}
/* Чипы списков */
.list-chip {
background: var(--paper-100);
border: 1px solid var(--paper-300);
color: var(--paper-700);
border-radius: var(--radius-full);
}
.list-chip.active {
background: var(--brand-400);
color: #fff;
border-color: var(--brand-400);
}
.list-chip.active .chip-count {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* Карточка цели */
.goal-card {
background: var(--paper-50);
border: 1px solid var(--paper-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
padding: 18px 20px;
}
.goal-card:hover {
box-shadow: var(--shadow-sm);
border-color: var(--paper-300);
transform: none;
}
.goal-card-title {
font-size: 15px;
font-weight: 600;
color: var(--paper-900);
}
.goal-card-category {
background: var(--paper-100);
color: var(--paper-600);
border-radius: var(--radius-full);
font-weight: 500;
}
.goal-progress-bar {
height: 6px;
background: var(--paper-200);
border-radius: var(--radius-full);
}
.goal-progress-fill {
background: var(--brand-400);
border-radius: var(--radius-full);
}
/* Планировщик: лента времени */
.planner-timeline {
background: #F5F7FA;
border: none;
border-radius: 12px;
}
.timeline-hour {
border-bottom: 1px solid var(--paper-200);
}
.timeline-task {
background: #E8F0FE;
color: #1D4ED8;
border: 1px solid #C7D8FF;
border-radius: var(--radius-sm);
box-shadow: 0 1px 3px rgba(47, 107, 255, 0.12);
}
.timeline-task:hover {
background: #DCE7FF;
border-color: #ADC6FF;
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.18);
}
.timeline-task.completed {
background: #E6F7ED;
color: #2FA96B;
border-color: #B7E4C7;
}
/* Выбранный день в календаре */
.planner-calendar-cell {
border-radius: var(--radius-md);
}
.planner-calendar-cell.selected {
background: var(--brand-400);
color: #fff;
border-color: var(--brand-400);
}
.planner-calendar-cell.today {
border-color: var(--brand-400);
color: var(--brand-400);
font-weight: 700;
}
.planner-calendar-cell.has-schedule::after {
background: var(--brand-400);
}
.planner-calendar-cell.selected.has-schedule::after {
background: #fff;
}
/* «Планы на неделю» / дни в шапке планировщика */
.planner-day-display {
background: transparent;
border: none;
font-size: 20px;
font-weight: 700;
color: var(--paper-900);
}
.planner-day-display:hover {
background: var(--paper-100);
color: var(--paper-900);
border-color: transparent;
}
/* Скроллбары — тонкие, светлые */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--paper-300);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--paper-400);
}
/* ============================================================
ИТЕРАЦИЯ 4: МИНИМАЛИЗМ — 3 колонки, строки-задачи, меню «три точки»
============================================================ */
/* 1. Desktop — 3 колонки */
@media (min-width: 1024px) {
.app-container {
display: grid;
grid-template-columns: 240px 1fr 320px;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.sidebar {
grid-column: 1;
width: 240px;
border-right: 1px solid var(--paper-300);
}
.main-content {
grid-column: 2;
max-width: none;
margin: 0;
padding: 20px 28px;
overflow-y: auto;
border-right: 1px solid var(--paper-300);
}
.right-rail {
grid-column: 3;
padding: 20px 24px;
overflow-y: auto;
background: var(--paper-50);
}
}
@media (max-width: 1023px) {
.right-rail { display: none; }
}
/* 6. Скрыть чипы списков на десктопе (оставить на мобильных) */
@media (min-width: 1024px) {
.lists-scroll { display: none !important; }
}
/* 2. Задачи — строки без рамки */
.tasks-list {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.task-item {
display: flex;
align-items: center;
padding: 14px 4px;
margin: 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--paper-200);
border-radius: 0;
box-shadow: none;
transition: background 0.15s ease;
}
.task-item:hover {
background: var(--paper-100);
box-shadow: none;
transform: none;
}
.task-item:last-child {
border-bottom: none;
}
/* 3. Кнопка «три точки» и контекстное меню */
.task-actions { display: flex; }
.task-menu-btn {
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: var(--radius-sm);
color: var(--paper-500);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: var(--transition);
}
.task-menu-btn:hover {
background: var(--paper-200);
color: var(--paper-700);
}
.task-context-menu {
position: fixed;
z-index: 1200;
min-width: 180px;
background: var(--paper-50);
border: 1px solid var(--paper-300);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 6px;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.task-context-menu.show {
opacity: 1;
transform: translateY(0);
}
.ctx-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
border: none;
background: transparent;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: var(--paper-800);
cursor: pointer;
text-align: left;
transition: var(--transition);
}
.ctx-item:hover {
background: var(--paper-100);
}
.ctx-item i { font-size: 16px; color: var(--paper-500); }
.ctx-danger { color: var(--danger-500); }
.ctx-danger i { color: var(--danger-500); }
.ctx-danger:hover { background: var(--danger-50); }
.ctx-divider {
height: 1px;
background: var(--paper-200);
margin: 4px 0;
}
/* 4. Иконки типов задач — цветные круглые плашки */
.task-type-icon {
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
background: transparent;
border: 1.5px solid var(--paper-300);
color: var(--paper-500);
}
.task-type-icon.single {
border-color: #C7D2FE;
color: #4F46E5;
background: #EEF2FF;
}
.task-type-icon.recurring {
border-color: #BBE7CD;
color: #2FA96B;
background: #E6F7EE;
}
.task-type-icon.reminder {
border-color: #FBDCA1;
color: #F59E0B;
background: #FFF4E5;
}
/* 5. Плоские табы в шапке (десктоп/планшет) */
@media (min-width: 481px) {
.main-section-switcher {
display: flex;
gap: 4px;
padding: 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--paper-200);
border-radius: 0;
margin-bottom: 16px;
}
.main-section-switcher .section-tab {
padding: 12px 16px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--paper-500);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.main-section-switcher .section-tab:hover {
color: var(--paper-800);
background: transparent;
}
.main-section-switcher .section-tab.active {
color: var(--brand-400);
border-bottom-color: var(--brand-400);
background: transparent;
font-weight: 600;
}
}
/* 7. Правая колонка — календарь и события */
.right-rail { font-family: inherit; }
.rail-section { margin-bottom: 28px; }
.rail-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.rail-title {
font-size: 14px;
font-weight: 600;
color: var(--paper-900);
margin: 0;
}
.rail-month {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--paper-600);
font-weight: 500;
}
.rail-nav {
width: 24px;
height: 24px;
border: none;
background: transparent;
color: var(--paper-500);
cursor: pointer;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.rail-nav:hover { background: var(--paper-100); color: var(--paper-800); }
.mini-cal-weekdays,
.mini-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.mini-cal-wd {
text-align: center;
font-size: 11px;
font-weight: 500;
color: var(--paper-500);
padding: 4px 0;
}
.mini-cal-cell {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 500;
color: var(--paper-700);
border-radius: 50%;
cursor: pointer;
transition: background 0.15s ease;
}
.mini-cal-cell:hover { background: var(--paper-100); }
.mini-cal-cell.today {
background: var(--brand-400);
color: #fff;
font-weight: 600;
}
.mini-cal-cell.empty { cursor: default; }
.rail-events { display: flex; flex-direction: column; gap: 12px; }
.rail-event {
display: flex;
gap: 12px;
align-items: flex-start;
}
.rail-event-time {
min-width: 48px;
font-size: 13px;
font-weight: 600;
color: var(--paper-900);
flex-shrink: 0;
}
.rail-event-body { flex: 1; min-width: 0; }
.rail-event-title {
font-size: 13px;
font-weight: 500;
color: var(--paper-900);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 3px;
}
.rail-event-tag {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
font-weight: 500;
border-radius: var(--radius-full);
background: var(--brand-100);
color: var(--brand-400);
}
.rail-empty {
padding: 16px;
text-align: center;
color: var(--paper-500);
font-size: 13px;
}
/* ============================================================
ИТЕРАЦИЯ 5: БЕЛЫЙ ЦЕНТР / СЕРЫЙ САЙДБАР, КАРТОЧКА-РЕЙЛ, ВЕРТИКАЛЬНЫЙ САЙДБАР
============================================================ */
/* 1. Инверсия фонов */
body {
background: #FFFFFF;
background-image: none;
background-color: #FFFFFF;
}
.sidebar {
width: 240px;
background: #F5F7FA;
border-right: 1px solid #E5E9F0;
display: flex;
flex-direction: column;
background-image: none;
mask-image: none;
-webkit-mask-image: none;
}
.sidebar-header {
background: #F5F7FA;
border-bottom: 1px solid #E5E9F0;
}
.main-content {
background: #FFFFFF;
}
/* 2. Grid: 240 | 1fr | 340, без линии между центром и рейлом */
@media (min-width: 1024px) {
.app-container {
display: grid;
grid-template-columns: 240px minmax(0, 1fr) 340px;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.sidebar {
grid-column: 1;
width: 240px;
border-right: 1px solid #E5E9F0;
background: #F5F7FA;
}
.main-content {
grid-column: 2;
max-width: none;
margin: 0;
padding: 20px 28px;
background: #FFFFFF;
overflow-y: auto;
border-right: none;
}
.right-rail {
grid-column: 3;
background: #FFFFFF;
padding: 20px 20px 20px 0;
}
}
/* Правая колонка — карточка */
.right-rail {
background: #FFFFFF;
padding: 20px 20px 20px 0;
overflow-y: auto;
}
.rail-card {
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 16px;
padding: 20px;
box-shadow: 0 1px 2px rgba(20, 30, 60, 0.04);
position: sticky;
top: 20px;
max-height: calc(100vh - 40px);
overflow-y: auto;
display: flex;
flex-direction: column;
}
.rail-divider {
height: 1px;
background: #E5E9F0;
margin: 20px -20px;
}
.rail-section { display: flex; flex-direction: column; gap: 12px; }
.rail-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.rail-title {
font-size: 15px;
font-weight: 700;
color: #1A1D23;
margin: 0;
}
.rail-month {
display: flex;
align-items: center;
gap: 2px;
font-size: 12px;
color: #5A6270;
font-weight: 500;
}
.rail-nav {
width: 22px;
height: 22px;
border: none;
background: transparent;
color: #9AA3B2;
cursor: pointer;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.rail-nav:hover { background: #EEF1F6; color: #1A1D23; }
/* 3. Сайдбар — вертикальные разделы */
.sidebar-scroll {
flex: 1;
overflow-y: auto;
padding: 8px 8px 16px;
}
.sidebar-nav-group {
display: flex;
flex-direction: column;
margin-bottom: 6px;
}
.sidebar-nav-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
background: transparent;
border: none;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: #5A6270;
cursor: pointer;
text-align: left;
transition: background 0.15s ease, color 0.15s ease;
flex: 0 0 auto;
justify-content: flex-start;
}
.sidebar-nav-item:hover {
background: #EEF1F6;
color: #1A1D23;
}
.sidebar-nav-item.active {
background: #FFFFFF;
color: #2F6BFF;
font-weight: 600;
box-shadow: 0 1px 2px rgba(20, 30, 60, 0.04);
}
.sidebar-nav-item i {
font-size: 18px;
color: inherit;
}
.sidebar-content.nested {
padding: 4px 0 8px 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.lists-container {
display: flex;
flex-direction: column;
gap: 2px;
}
.list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
color: #3A4150;
transition: background 0.15s ease;
}
.list-item:hover { background: #EEF1F6; }
.list-item.active { background: #FFFFFF; color: #2F6BFF; font-weight: 600; }
.list-item .list-icon { font-size: 16px; color: inherit; }
.list-item .task-count {
margin-left: auto;
font-size: 12px;
color: #9AA3B2;
font-weight: 500;
}
.list-item.active .task-count { color: #2F6BFF; }
.add-list-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-top: 2px;
background: transparent;
border: none;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: #9AA3B2;
cursor: pointer;
text-align: left;
transition: background 0.15s ease, color 0.15s ease;
}
.add-list-btn:hover { background: #EEF1F6; color: #2F6BFF; }
.add-list-btn i { font-size: 14px; }
.section-switcher { display: none; }
/* 4. Шапка центра */
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 16px;
}
.page-title {
font-size: 24px;
font-weight: 700;
color: #1A1D23;
margin: 0 0 4px;
letter-spacing: -0.3px;
}
.page-subtitle {
font-size: 13px;
color: #9AA3B2;
font-weight: 400;
}
#newTaskHeaderBtn {
height: 40px;
padding: 0 16px;
font-weight: 600;
border-radius: 10px;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ============================================================
ИТЕРАЦИЯ 6: ГОЛУБЫЕ АКТИВНЫЕ, ЛЕНТА НЕДЕЛИ, СКРУГЛЁННАЯ КАРТОЧКА, ГРАДИЕНТ САЙДБАРА
============================================================ */
/* 1. Активные состояния — голубая плашка */
.sidebar-nav-item.active {
background: #E8F0FE;
color: #2F6BFF;
font-weight: 600;
box-shadow: none;
}
.list-item.active {
background: #E8F0FE;
color: #2F6BFF;
font-weight: 600;
box-shadow: none;
}
.list-item.active .task-count { color: #2F6BFF; }
.goal-category-item.active {
background: #E8F0FE;
color: #2F6BFF;
font-weight: 600;
}
.goal-category-item.active .goal-category-count { color: #2F6BFF; }
/* 3. Планы на неделю */
.week-plans {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #E5E9F0;
flex-shrink: 0;
}
.week-plans-title {
font-size: 15px;
font-weight: 700;
color: #1A1D23;
margin: 0 0 12px;
letter-spacing: -0.2px;
}
.week-plans-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
}
.week-plan-day {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 10px 4px;
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
transition: all 0.15s ease;
}
.week-plan-day:hover {
border-color: #C7CEDB;
background: #F9FAFC;
}
.week-plan-wd {
font-size: 11px;
font-weight: 500;
color: #9AA3B2;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.week-plan-num {
font-size: 17px;
font-weight: 600;
color: #1A1D23;
line-height: 1;
}
.week-plan-day.today {
background: transparent;
border-color: transparent;
padding: 0;
}
.week-plan-day.today .week-plan-wd {
color: #2F6BFF;
font-weight: 600;
}
.week-plan-day.today .week-plan-num {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2F6BFF;
color: #FFFFFF;
font-weight: 700;
}
/* 4. Скруглённая карточка приложения на сером фоне */
body {
background: #F0F2F6;
background-image: none;
}
@media (min-width: 1024px) {
.app-container {
display: grid;
grid-template-columns: 240px minmax(0, 1fr) 340px;
height: calc(100vh - 24px);
height: calc(100dvh - 24px);
margin: 12px;
background: #FFFFFF;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(20, 30, 60, 0.04), 0 12px 40px rgba(20, 30, 60, 0.06);
}
}
/* 5. Сайдбар — градиент белый → серый сверху вниз */
.sidebar {
background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 35%, #F5F7FA 100%);
border-right: 1px solid #E5E9F0;
}
.sidebar-header {
background: transparent;
border-bottom: 1px solid rgba(229, 233, 240, 0.6);
}
/* 6. Разделитель в правой карточке */
.right-rail {
background: transparent;
padding: 16px;
overflow-y: auto;
min-height: 0;
}
.rail-card {
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 16px;
padding: 20px;
display: flex;
flex-direction: column;
box-shadow: 0 1px 2px rgba(20, 30, 60, 0.04);
min-height: 0;
position: static;
top: auto;
max-height: none;
overflow: visible;
}
.rail-section { display: flex; flex-direction: column; gap: 12px; }
.rail-divider {
height: 1px;
background: #E5E9F0;
margin: 16px -20px;
}
/* 7. События — время + название + тег */
.rail-events { display: flex; flex-direction: column; gap: 14px; }
.rail-event {
display: flex;
align-items: flex-start;
gap: 12px;
}
.rail-event-time {
min-width: 48px;
flex-shrink: 0;
font-size: 13px;
font-weight: 600;
color: #1A1D23;
line-height: 1.4;
padding-top: 1px;
}
.rail-event-body { flex: 1; min-width: 0; }
.rail-event-title {
font-size: 13px;
font-weight: 500;
color: #1A1D23;
line-height: 1.4;
margin-bottom: 4px;
word-break: break-word;
}
.rail-event-tag {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
font-weight: 500;
border-radius: 999px;
background: #E8F0FE;
color: #2F6BFF;
}
.rail-empty {
padding: 16px 0;
text-align: center;
color: #9AA3B2;
font-size: 13px;
}
/* ============================================================
ИТЕРАЦИЯ 7: СКРУГЛЁННЫЕ КАРТОЧКИ КОЛОНОК, СИНЯЯ ПЛАШКА СЕГОДНЯ, КАРТОЧКИ РЕЙЛА
============================================================ */
/* 1. Закругления внизу у центра и правой колонки */
@media (min-width: 1024px) {
.app-container {
display: grid;
grid-template-columns: 240px minmax(0, 1fr) 340px;
height: calc(100vh - 24px);
height: calc(100dvh - 24px);
margin: 12px;
background: #F5F7FA;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(20, 30, 60, 0.04), 0 12px 40px rgba(20, 30, 60, 0.06);
padding: 0;
gap: 0;
}
.main-content {
grid-column: 2;
background: #FFFFFF;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
overflow: hidden;
padding: 20px 28px;
display: flex;
flex-direction: column;
}
.right-rail {
grid-column: 3;
background: #FFFFFF;
border-bottom-right-radius: 20px;
border-top-right-radius: 0;
overflow: hidden;
padding: 16px;
}
.sidebar {
grid-column: 1;
background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 40%, #F5F7FA 100%);
border-right: 1px solid #E5E9F0;
border-radius: 20px 0 0 20px;
overflow: hidden;
}
}
/* 2. Планы на неделю — сегодня синяя плашка */
.week-plan-day {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 10px 4px;
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
transition: all 0.15s ease;
min-height: 60px;
}
.week-plan-day:hover {
border-color: #C7CEDB;
background: #F9FAFC;
}
.week-plan-wd {
font-size: 11px;
font-weight: 500;
color: #9AA3B2;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.week-plan-num {
font-size: 17px;
font-weight: 600;
color: #1A1D23;
line-height: 1;
}
.week-plan-day.today {
background: #2F6BFF;
border-color: #2F6BFF;
padding: 10px 4px;
}
.week-plan-day.today .week-plan-wd {
color: rgba(255, 255, 255, 0.85);
font-weight: 600;
}
.week-plan-day.today .week-plan-num {
display: block;
width: auto;
height: auto;
border-radius: 0;
background: transparent;
color: #FFFFFF;
font-weight: 700;
}
.week-plan-day.today:hover {
background: #4A85FF;
border-color: #4A85FF;
}
/* 3. Календарь и события — отдельные белые карточки */
.right-rail {
background: #F5F7FA;
padding: 12px;
overflow-y: auto;
}
.rail-card {
display: flex;
flex-direction: column;
gap: 12px;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
min-height: 0;
}
.rail-section {
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 14px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.rail-divider {
display: none;
}
/* ============================================================
ИТЕРАЦИЯ 8: КОМПАКТНАЯ ПРАВАЯ КОЛОНКА, СКРЫТЬ FAB НА ПК
============================================================ */
@media (min-width: 1024px) {
/* 1. Календарь и события — компактнее, влезают на один экран */
.right-rail {
background: #F5F7FA;
padding: 10px;
overflow-y: auto;
display: flex;
flex-direction: column;
min-height: 0;
}
.rail-card {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
flex: 1;
}
.rail-section {
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 14px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.rail-section:first-child {
flex: 0 0 auto;
}
.rail-section:last-child {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.rail-events {
overflow-y: auto;
min-height: 0;
flex: 1;
gap: 10px;
padding-right: 4px;
}
.mini-cal-weekdays,
.mini-cal-grid {
gap: 2px;
}
.mini-cal-wd {
padding: 2px 0;
font-size: 10px;
}
.mini-cal-cell {
font-size: 12px;
}
.rail-header {
margin-bottom: 4px;
}
.rail-title {
font-size: 14px;
margin-bottom: 2px;
}
/* 2. Скрыть FAB на ПК — дублируют шапку */
.fab-container,
.fab-goals {
display: none !important;
}
}
/* Бонус: кнопка «Новая цель» в шапке целей (вместо FAB на ПК) */
.goals-header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#newGoalHeaderBtn {
height: 40px;
padding: 0 16px;
font-weight: 600;
border-radius: 10px;
display: none;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
@media (min-width: 1024px) {
#newGoalHeaderBtn {
display: inline-flex;
}
}
/* ============================================================
ИТЕРАЦИЯ 9: ОТСТУПЫ СПИСКОВ, САЙДБАР «ПРОЕКТЫ», ФОКУС-ОБНУЛЕНИЕ
============================================================ */
/* 2. Одинаковые отступы списков и кнопки «Создать список» */
.lists-container {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 0;
}
.list-item {
margin: 0;
}
.add-list-btn {
margin: 0;
}
.sidebar-content.nested {
display: flex;
flex-direction: column;
gap: 2px;
}
/* 4. Категории проектов в сайдбаре */
.goal-categories-container {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0;
margin: 0;
}
.goal-category-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
margin: 0;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #3A4150;
background: transparent;
border: none;
outline: none;
transition: background 0.15s ease, color 0.15s ease;
position: relative;
}
.goal-category-item:hover {
background: #EEF1F6;
}
.goal-category-item.active {
background: #E8F0FE;
color: #2F6BFF;
font-weight: 600;
}
.goal-category-item.active .goal-category-name,
.goal-category-item.active .goal-category-count {
color: #2F6BFF;
}
.goal-category-drag-handle {
display: none;
width: 14px;
height: 14px;
align-items: center;
justify-content: center;
color: #C7CEDB;
font-size: 14px;
cursor: grab;
flex-shrink: 0;
}
.goal-category-item:hover .goal-category-drag-handle {
display: inline-flex;
}
.goal-category-drag-handle:active {
cursor: grabbing;
}
.goal-category-icon {
font-size: 16px;
width: 18px;
text-align: center;
flex-shrink: 0;
line-height: 1;
}
.goal-category-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: inherit;
}
.goal-category-count {
font-size: 12px;
font-weight: 500;
color: #9AA3B2;
background: transparent;
padding: 0;
flex-shrink: 0;
}
.goal-category-actions {
display: none;
align-items: center;
gap: 2px;
margin-left: 4px;
}
.goal-category-item:hover .goal-category-actions {
display: inline-flex;
}
.goal-category-btn {
width: 24px;
height: 24px;
border: none;
background: transparent;
color: #9AA3B2;
cursor: pointer;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: background 0.15s ease, color 0.15s ease;
}
.goal-category-btn:hover {
background: #FFFFFF;
color: #2F6BFF;
}
.goal-category-btn.delete:hover {
color: #EF4444;
}
.goal-category-item[data-category-id="all"] {
font-weight: 600;
color: #1A1D23;
}
/* Убираем синюю рамку фокуса у кнопок сайдбара */
.sidebar button:focus,
.sidebar .goal-category-item:focus {
outline: none;
box-shadow: none;
}
/* Разделитель перед «Общая статистика» — мягче */
.sidebar-section {
border-top: 1px solid rgba(229, 233, 240, 0.7);
padding: 8px;
margin-top: 8px;
}
/* ============================================================
ИТЕРАЦИЯ 10: КАТЕГОРИИ ПРОЕКТОВ БЕЗ СДВИГА ПРИ HOVER
============================================================ */
/* 1+2. Категории проектов — как список задач, без layout-сдвига */
.goal-categories-container {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0;
margin: 0;
}
.goal-category-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin: 0;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #3A4150;
background: transparent;
border: none;
outline: none;
transition: background 0.15s ease, color 0.15s ease;
position: relative;
}
.goal-category-item:hover {
background: #EEF1F6;
}
.goal-category-item.active {
background: #E8F0FE;
color: #2F6BFF;
font-weight: 600;
}
.goal-category-item.active .goal-category-name,
.goal-category-item.active .goal-category-count {
color: #2F6BFF;
}
/* Drag-handle — всегда занимает место, невидим без hover */
.goal-category-drag-handle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
color: #C7CEDB;
font-size: 14px;
cursor: grab;
flex-shrink: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
}
.goal-category-item:hover .goal-category-drag-handle {
opacity: 1;
visibility: visible;
}
.goal-category-drag-handle:active {
cursor: grabbing;
}
.goal-category-icon {
font-size: 16px;
width: 18px;
line-height: 1;
text-align: center;
flex-shrink: 0;
}
.goal-category-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: inherit;
}
.goal-category-count {
font-size: 12px;
font-weight: 500;
color: #9AA3B2;
background: transparent;
padding: 0;
flex-shrink: 0;
min-width: 16px;
text-align: right;
}
/* Кнопки действий — всегда занимают место, невидимы без hover */
.goal-category-actions {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 4px;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
}
.goal-category-item:hover .goal-category-actions {
opacity: 1;
visibility: visible;
}
.goal-category-btn {
width: 22px;
height: 22px;
border: none;
background: transparent;
color: #9AA3B2;
cursor: pointer;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: background 0.15s ease, color 0.15s ease;
}
.goal-category-btn:hover {
background: #FFFFFF;
color: #2F6BFF;
}
.goal-category-btn.delete:hover {
color: #EF4444;
}
/* Фокусная рамка */
.goal-category-item:focus,
.goal-category-item:focus-visible {
outline: none;
box-shadow: none;
}
/* 3. Кнопка «Новая категория» — как «Создать список» */
.add-list-btn,
.add-goal-category-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin: 0;
background: transparent;
border: none;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: #9AA3B2;
cursor: pointer;
text-align: left;
transition: background 0.15s ease, color 0.15s ease;
}
.add-list-btn:hover,
.add-goal-category-btn:hover {
background: #EEF1F6;
color: #2F6BFF;
}
.add-list-btn i,
.add-goal-category-btn i {
font-size: 14px;
}
/* ============================================================
ИТЕРАЦИЯ 11: PHOSPHOR-ИКОНКИ КАТЕГОРИЙ, TAIL-КОНТЕЙНЕР, БЕЗ DRAG-HANDLE
============================================================ */
/* Иконка категории — контурная Phosphor */
.goal-category-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 17px;
color: #5A6270;
flex-shrink: 0;
line-height: 1;
}
.goal-category-item.active .goal-category-icon {
color: #2F6BFF;
}
.goal-category-item:hover .goal-category-icon {
color: #1A1D23;
}
/* Хвост строки: счётчик и кнопки — на одном месте */
.goal-category-tail {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-end;
min-width: 44px;
height: 22px;
flex-shrink: 0;
}
.goal-category-count {
font-size: 12px;
font-weight: 500;
color: #9AA3B2;
text-align: right;
transition: opacity 0.15s ease;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.goal-category-item.active .goal-category-count {
color: #2F6BFF;
}
.goal-category-actions {
display: inline-flex;
align-items: center;
gap: 2px;
margin: 0;
opacity: 0;
visibility: visible;
transition: opacity 0.15s ease;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
/* При наведении: счётчик гаснет, кнопки появляются */
.goal-category-item:hover .goal-category-count {
opacity: 0;
}
.goal-category-item:hover .goal-category-actions {
opacity: 1;
}
.goal-category-btn {
width: 22px;
height: 22px;
border: none;
background: transparent;
color: #9AA3B2;
cursor: pointer;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: background 0.15s ease, color 0.15s ease;
}
.goal-category-btn:hover {
background: #FFFFFF;
color: #2F6BFF;
}
.goal-category-btn.delete:hover {
color: #EF4444;
}
/* Drag-handle больше не используется — нейтрализуем */
.goal-category-drag-handle {
display: none;
}
/* ============================================================
ИТЕРАЦИЯ 12: ЦВЕТНЫЕ ТОЧКИ ВМЕСТО ИКОНОК КАТЕГОРИЙ
============================================================ */
.goal-category-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
/* ============================================================
ИТЕРАЦИЯ 13: ГОСТЕВОЙ РЕЖИМ, ПОДТВЕРЖДЕНИЕ ПАРОЛЯ
============================================================ */
.auth-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0 12px;
color: #9AA3B2;
font-size: 12px;
text-transform: lowercase;
letter-spacing: 0.2px;
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: #E5E9F0;
}
.auth-guest-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
padding: 0 20px;
background: #F5F7FA;
color: #3A4150;
border: 1px solid #E5E9F0;
border-radius: 10px;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.auth-guest-btn:hover {
background: #EEF1F6;
border-color: #C7CEDB;
color: #1A1D23;
}
.auth-guest-btn:active {
background: #E5E9F0;
transform: translateY(1px);
}
.user-dot.guest {
background: #F59E0B;
}
/* ============================================================
КОМПАКТНЫЕ ИКОНКИ ЦЕЛЕЙ (Phosphor)
============================================================ */
.goal-card-category {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 8px;
background: #F5F7FA;
color: #5A6270;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
}
.goal-card-category i {
font-size: 13px;
color: #2F6BFF;
display: inline-flex;
align-items: center;
}
.goal-card-date {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: #5A6270;
}
.goal-card-date i {
font-size: 14px;
color: #9AA3B2;
}
.goal-card.overdue .goal-card-date {
color: #EF4444;
}
.goal-card.overdue .goal-card-date i {
color: #EF4444;
}
/* Кликабельные дни в статистике */
.calendar-day.clickable {
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.calendar-day.clickable:hover {
transform: scale(1.12);
box-shadow: 0 2px 8px rgba(20, 30, 60, 0.15);
z-index: 2;
position: relative;
}
.calendar-day.clickable:active {
transform: scale(0.94);
}
/* Будущие дни — нельзя кликать */
.calendar-day.future {
cursor: not-allowed;
opacity: 0.6;
}
/* Мини-версия для годового календаря */
.year-month-day.clickable {
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.year-month-day.clickable:hover {
transform: scale(1.35);
box-shadow: 0 2px 6px rgba(20, 30, 60, 0.18);
z-index: 2;
position: relative;
}
.year-month-day.clickable:active {
transform: scale(0.92);
}
/* Пульс при изменении */
.calendar-day.just-changed,
.year-month-day.just-changed {
animation: dayChangePulse 0.5s ease;
}
@keyframes dayChangePulse {
0% { transform: scale(1); }
40% { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(47, 107, 255, 0.25); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47, 107, 255, 0); }
}
/* ===== ВРЕМЕННАЯ ШКАЛА В КАРТОЧКЕ ПРОЕКТА ===== */
.goal-card-timeline {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid #F0F2F7;
}
.goal-card-dates {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
gap: 12px;
}
.goal-card-date-col {
display: flex;
flex-direction: column;
gap: 2px;
}
.goal-card-date-col.right {
align-items: flex-end;
text-align: right;
}
/* Подписи «Начало» / «Окончание» — одинаковые */
.goal-card-date-label {
font-size: 10px;
font-weight: 500;
color: #9AA3B2;
text-transform: uppercase;
letter-spacing: 0.4px;
}
/* Значения дат — одинаковые */
.goal-card-date-value {
font-size: 12px;
font-weight: 600;
color: #1A1D23;
}
/* Шкала */
.goal-card-track {
height: 6px;
background: #EEF1F6;
border-radius: 999px;
overflow: hidden;
margin-bottom: 6px;
}
.goal-card-fill {
height: 100%;
background: linear-gradient(90deg, #A9C4FF, #2F6BFF);
border-radius: 999px;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Подпись под шкалой — «прошло X из Y дней» + «осталось Z» */
.goal-card-time-detail {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 11px;
color: #9AA3B2;
font-weight: 500;
margin-top: 6px;
}
.goal-card-time-left {
text-align: left;
}
.goal-card-time-right {
text-align: right;
color: #5A6270;
font-weight: 600;
}
/* Просрочен */
.goal-card-timeline.overdue .goal-card-fill {
background: linear-gradient(90deg, #FCA5A5, #EF4444);
}
.goal-card-timeline.overdue .goal-card-time-right {
color: #EF4444;
}
.goal-card-timeline.overdue .goal-card-time-left {
color: #EF4444;
}
/* Выполнен */
.goal-card-timeline.completed .goal-card-fill {
background: linear-gradient(90deg, #86EFAC, #2FA96B);
}
.goal-card-timeline.completed .goal-card-time-left,
.goal-card-timeline.completed .goal-card-time-right {
color: #2FA96B;
}
/* Пустая лента — заглушка */
.planner-timeline.empty {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
height: 100%;
min-height: 300px;
background: #FFFFFF;
border: 2px dashed #E5E9F0;
border-radius: 12px;
padding: 40px 20px;
box-sizing: border-box;
}
.timeline-empty {
text-align: center;
max-width: 320px;
}
.timeline-empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #F5F7FA;
color: #9AA3B2;
font-size: 24px;
margin-bottom: 16px;
}
.timeline-empty-title {
font-size: 15px;
font-weight: 600;
color: #1A1D23;
margin-bottom: 6px;
}
.timeline-empty-text {
font-size: 13px;
color: #9AA3B2;
line-height: 1.5;
}
/* ===== УДАЛЕНИЕ СПИСКА (иконка мусорки + модалка) ===== */
/* Контейнер пункта списка */
.list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #3A4150;
background: transparent;
transition: background 0.15s ease, color 0.15s ease;
position: relative;
}
.list-item:hover { background: #EEF1F6; }
.list-item.active {
background: #E8F0FE;
color: #2F6BFF;
font-weight: 600;
}
.list-item .list-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Хвост: счётчик + кнопка удаления — на одном месте */
.list-item-tail {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-end;
min-width: 22px;
height: 22px;
flex-shrink: 0;
}
.list-item .task-count {
font-size: 12px;
font-weight: 500;
color: #9AA3B2;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.15s ease;
}
.list-item.active .task-count { color: #2F6BFF; }
/* Кнопка удаления — показывается при hover вместо счётчика */
.list-delete-btn {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border: none;
background: transparent;
color: #9AA3B2;
cursor: pointer;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
opacity: 0;
transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.list-item:hover .task-count { opacity: 0; }
.list-item:hover .list-delete-btn { opacity: 1; }
.list-delete-btn:hover {
background: #FFFFFF;
color: #EF4444;
}
/* Скрываем у "Мои задачи" (default) — его удалять нельзя */
.list-item[data-list-id="default"] .list-delete-btn { display: none; }
.list-item[data-list-id="default"]:hover .task-count { opacity: 1; }
/* ===== Модалка удаления ===== */
.delete-list-message {
font-size: 14px;
color: #5A6270;
line-height: 1.5;
margin-bottom: 16px;
}
.delete-list-move-block {
background: #F5F7FA;
border-radius: 10px;
padding: 14px;
margin-bottom: 16px;
}
.delete-list-move-block .form-label {
display: block;
font-size: 13px;
font-weight: 500;
color: #5A6270;
margin-bottom: 8px;
}
.delete-list-move-block .modal-input {
margin-bottom: 12px;
background: #FFFFFF;
}
.delete-list-option {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #5A6270;
cursor: pointer;
padding: 6px 0;
}
.delete-list-option input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #EF4444;
cursor: pointer;
}
.delete-list-option:hover {
color: #1A1D23;
}
/* Кнопка «Удалить» в модалке (залитая красная) */
.btn-danger {
background: var(--danger-500);
color: #FFFFFF;
border-color: var(--danger-500);
}
.btn-danger:hover {
background: var(--danger-700);
border-color: var(--danger-700);
color: #FFFFFF;
}
/* ===== ГЛОБАЛЬНЫЙ СБРОС ФОКУСА И ЦВЕТА КНОПОК ===== */
/* 2. .btn-primary — синяя с белым текстом во всех состояниях */
.btn-primary {
background: #2F6BFF;
color: #FFFFFF;
box-shadow: 0 1px 2px rgba(20, 30, 60, 0.04);
}
.btn-primary:hover:not(:disabled) {
background: #4A85FF;
color: #FFFFFF;
}
.btn-primary:active:not(:disabled) {
background: #1B44A8;
color: #FFFFFF;
transform: translateY(1px);
box-shadow: 0 1px 2px rgba(20, 30, 60, 0.04);
}
.btn-primary:focus:not(:disabled),
.btn-primary:focus-visible:not(:disabled) {
background: #2F6BFF;
color: #FFFFFF;
outline: none;
box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.25);
}
.btn-primary:disabled {
background: #A9C4FF;
color: #FFFFFF;
opacity: 0.7;
cursor: not-allowed;
}
/* 3. Синие кнопки с белым текстом — закрепляем цвет */
.auth-btn,
.fab-btn,
#newTaskHeaderBtn,
#newGoalHeaderBtn,
.empty-state-action {
color: #FFFFFF;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.auth-btn:hover:not(:disabled),
.fab-btn:hover:not(:disabled),
#newTaskHeaderBtn:hover:not(:disabled) {
background: #4A85FF;
color: #FFFFFF;
}
.auth-btn:active:not(:disabled),
.fab-btn:active:not(:disabled),
#newTaskHeaderBtn:active:not(:disabled) {
color: #FFFFFF;
transform: translateY(1px);
}
.auth-btn:focus:not(:disabled),
.fab-btn:focus:not(:disabled),
#newTaskHeaderBtn:focus:not(:disabled) {
color: #FFFFFF;
outline: none;
}
/* Кнопка пустого состояния — синяя, как .btn-primary */
.empty-state-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 40px;
padding: 0 16px;
background: #2F6BFF;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.empty-state-action:hover:not(:disabled) { background: #2458D6; }
.empty-state-action:active:not(:disabled) { background: #1B44A8; }
/* 4. Красные и серые кнопки */
.btn-danger {
background: #EF4444;
color: #FFFFFF;
}
.btn-danger:hover:not(:disabled) { background: #DC2626; color: #FFFFFF; }
.btn-danger:active:not(:disabled) { background: #B91C1C; color: #FFFFFF; }
.btn-danger:focus:not(:disabled) { color: #FFFFFF; outline: none; }
.btn-secondary {
background: #F5F7FA;
color: #3A4150;
border: 1px solid #E5E9F0;
}
.btn-secondary:hover:not(:disabled) { background: #EEF1F6; color: #1A1D23; }
.btn-secondary:active:not(:disabled) { background: #E5E9F0; color: #1A1D23; }
.btn-secondary:focus:not(:disabled) { color: #1A1D23; outline: none; }
/* ===== МОБИЛЬНЫЕ: корзина всегда видна ===== */
@media (max-width: 1023px) {
/* Не прячем счётчик, но корзину показываем всегда */
.list-item .task-count {
opacity: 1;
position: static; /* снимаем absolute */
transform: none;
margin-right: 4px; /* отступ от корзины */
}
.list-delete-btn {
opacity: 1; /* всегда видна */
position: static; /* снимаем absolute */
transform: none;
}
/* Убираем hover-логику — она конфликтует с тачем */
.list-item:hover .task-count {
opacity: 1;
}
.list-item:hover .list-delete-btn {
opacity: 1;
}
/* Хвост — горизонтальный flex, чтобы счётчик и корзина шли рядом */
.list-item-tail {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: auto;
position: static;
}
/* Корзина приглушённая, чтобы не отвлекала */
.list-delete-btn {
color: #C7CEDB;
font-size: 15px;
}
.list-delete-btn:hover,
.list-delete-btn:active {
color: #EF4444;
background: transparent; /* на мобильных фон не нужен */
}
}
/* ===== МОДАЛКА ПЛАНИРОВАНИЯ ЗАДАЧИ ===== */
.duration-modal-task {
font-size: 13px;
font-weight: 500;
color: #5A6270;
line-height: 1.4;
margin-bottom: 16px;
word-break: break-word;
}
.schedule-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 16px;
}
.schedule-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.schedule-label {
font-size: 12px;
font-weight: 500;
color: #9AA3B2;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.schedule-input {
margin-bottom: 0 !important; /* убираем дефолтный отступ .modal-input */
height: 44px;
font-size: 15px;
font-weight: 600;
color: #1A1D23;
background: #F5F7FA;
border: 1px solid #E5E9F0;
border-radius: 10px;
padding: 0 12px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.schedule-input:focus {
border-color: #2F6BFF;
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12);
}
/* Поле «Длительность» с единицей измерения «мин» */
.duration-input-wrap {
position: relative;
}
.duration-input-wrap .schedule-input {
padding-right: 44px;
}
.duration-unit {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
font-weight: 500;
color: #9AA3B2;
pointer-events: none;
}
/* Убираем спиннеры у number-инпута */
.schedule-input[type="number"]::-webkit-outer-spin-button,
.schedule-input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.schedule-input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
/* ===== БЫСТРЫЕ ПРЕСЕТЫ ===== */
.duration-presets {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
padding: 12px;
background: #F5F7FA;
border-radius: 10px;
}
.duration-preset {
flex: 1 0 auto;
min-width: 64px;
padding: 8px 12px;
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 8px;
font-family: inherit;
font-size: 12px;
font-weight: 500;
color: #5A6270;
cursor: pointer;
transition: all 0.15s ease;
text-align: center;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.duration-preset:hover {
background: #F9FAFC;
border-color: #C7CEDB;
color: #1A1D23;
}
.duration-preset.active {
background: #E8F0FE;
border-color: #2F6BFF;
color: #2F6BFF;
font-weight: 600;
}
.duration-preset:active {
transform: scale(0.97);
}
/* Мобильная адаптация */
@media (max-width: 480px) {
.schedule-form {
grid-template-columns: 1fr;
gap: 10px;
}
.duration-preset {
min-width: 56px;
padding: 7px 10px;
font-size: 11px;
}
}
/* Аккуратный выпадающий список времени */
.schedule-input-wrap {
position: relative;
}
select.schedule-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0 32px;
cursor: pointer;
}
/* Кнопка-переключатель времени */
.schedule-time-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 8px;
text-align: left;
cursor: pointer;
}
.schedule-chevron {
color: #9AA3B2;
font-size: 14px;
flex-shrink: 0;
pointer-events: none;
}
/* Выпадающий список времени — ограничен по высоте, со скроллом */
.schedule-time-dropdown {
position: fixed;
max-height: 280px; /* ~10 строк */
overflow-y: auto;
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(20, 30, 60, 0.12);
z-index: 9999;
display: none;
}
.schedule-time-dropdown.open {
display: block;
}
.schedule-time-option {
padding: 8px 12px;
font-size: 14px;
font-weight: 500;
color: #3A4150;
cursor: pointer;
text-align: center;
font-variant-numeric: tabular-nums;
}
.schedule-time-option:hover {
background: #F5F7FA;
}
.schedule-time-option.active {
background: #E8F0FE;
color: #2F6BFF;
font-weight: 600;
}
/* Кнопка «Убрать из расписания» — иконка в общем ряду */
.schedule-remove-btn {
margin-right: auto;
width: 40px;
padding: 0;
flex-shrink: 0;
}
/* ===== НАВИГАЦИЯ ДНЯ ПЛАНИРОВЩИКА ===== */
.planner-nav-btn {
width: 40px;
height: 40px;
border: none;
border-radius: 10px;
background: #FFFFFF;
color: #5A6270;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.planner-nav-btn:hover:not(:disabled) {
background: #EEF1F6;
color: #1A1D23;
}
.planner-nav-btn:active:not(:disabled) {
transform: scale(0.94);
}
/* Активное состояние (кнопка календаря) — мягкая голубая, в тон остальным */
.planner-nav-btn.active {
background: #E8F0FE;
color: #2F6BFF;
}
.planner-nav-btn.active:hover:not(:disabled) {
background: #DCE7FF;
color: #2F6BFF;
}
/* Кнопка «Сегодня» */
.planner-day-display {
flex: 1;
max-width: 320px;
height: 40px;
padding: 0 16px;
border: 1px solid #E5E9F0;
border-radius: 10px;
background: #FFFFFF;
color: #1A1D23;
cursor: pointer;
font-size: 15px;
font-weight: 600;
font-family: inherit;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.planner-day-display:hover {
background: #F5F7FA;
border-color: #C7D8FF;
color: #2F6BFF;
}
.planner-day-display:active {
transform: scale(0.98);
}
/* ===== КАЛЕНДАРЬ В ПЛАНИРОВЩИКЕ ===== */
.planner-calendar {
flex: 1;
overflow-y: auto;
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 14px;
padding: 16px;
min-height: 0;
}
.pc-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 14px;
}
.pc-title {
flex: 1;
text-align: center;
font-size: 15px;
font-weight: 700;
color: #1A1D23;
}
.pc-nav {
width: 32px;
height: 32px;
border: none;
background: transparent;
color: #9AA3B2;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: background 0.15s ease, color 0.15s ease;
}
.pc-nav:hover { background: #F5F7FA; color: #1A1D23; }
.pc-nav:active { background: #EEF1F6; }
.pc-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 6px;
}
.pc-wd {
text-align: center;
font-size: 11px;
font-weight: 500;
color: #9AA3B2;
padding: 4px 0;
}
.pc-wd.weekend { color: #C7CEDB; }
.pc-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.pc-cell {
position: relative;
aspect-ratio: 1;
border: none;
background: transparent;
color: #1A1D23;
font-family: inherit;
font-size: 13px;
font-weight: 500;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.pc-cell.empty {
background: transparent;
cursor: default;
pointer-events: none;
}
.pc-cell:hover:not(.empty):not(:disabled) {
background: #F5F7FA;
}
.pc-cell:active:not(.empty):not(:disabled) {
transform: scale(0.94);
}
.pc-cell.weekend {
color: #9AA3B2;
}
.pc-cell.past {
color: #C7CEDB;
cursor: not-allowed;
opacity: 0.7;
}
.pc-cell.today {
color: #2F6BFF;
font-weight: 700;
box-shadow: inset 0 0 0 1.5px #2F6BFF;
}
.pc-cell.selected {
background: #2F6BFF !important;
color: #FFFFFF !important;
font-weight: 700;
box-shadow: none;
}
.pc-cell.has-schedule::after {
content: '';
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: #2F6BFF;
}
.pc-cell.selected.has-schedule::after {
background: #FFFFFF;
}
.pc-cell.past.has-schedule::after {
background: #C7CEDB;
}
/* ===== КАЛЕНДАРЬ СТАТИСТИКИ (неделя / месяц) ===== */
.stats-calendar {
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 14px;
padding: 16px;
}
.calendar-title {
font-size: 13px;
font-weight: 600;
color: #1A1D23;
margin-bottom: 12px;
letter-spacing: -0.1px;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 6px;
}
.calendar-weekday {
text-align: center;
font-size: 11px;
font-weight: 500;
color: #9AA3B2;
padding: 4px 0;
}
.calendar-weekday:nth-child(6),
.calendar-weekday:nth-child(7) {
color: #C7CEDB;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.calendar-day {
position: relative;
aspect-ratio: 1;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 500;
color: #1A1D23;
background: #F5F7FA;
transition: transform 0.12s ease, background 0.12s ease;
}
.calendar-day.empty {
background: transparent;
color: transparent;
pointer-events: none;
}
.calendar-day.not-scheduled {
background: #F5F7FA;
color: #C7CEDB;
}
.calendar-day.completed {
background: #2FA96B;
color: #FFFFFF;
font-weight: 600;
}
.calendar-day.missed {
background: #FDE8E8;
color: #EF4444;
font-weight: 600;
}
.calendar-day.today {
box-shadow: inset 0 0 0 1.5px #2F6BFF;
}
.calendar-day.future {
background: #FAFBFC;
color: #C7CEDB;
cursor: not-allowed;
}
.calendar-day.clickable {
cursor: pointer;
}
.calendar-day.clickable:hover {
transform: scale(1.12);
box-shadow: 0 2px 8px rgba(20, 30, 60, 0.15);
z-index: 2;
}
.calendar-day.clickable:active {
transform: scale(0.94);
}
/* ===== ГОДОВОЙ КАЛЕНДАРЬ ===== */
.year-months {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.year-month {
background: #F9FAFC;
border-radius: 10px;
padding: 10px;
}
.year-month-title {
font-size: 11px;
font-weight: 600;
color: #5A6270;
text-align: center;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.year-month-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.year-month-day {
aspect-ratio: 1;
border-radius: 4px;
background: #EEF1F6;
min-height: 8px;
position: relative;
}
.year-month-day.empty { background: transparent; }
.year-month-day.not-scheduled { background: #EEF1F6; opacity: 0.5; }
.year-month-day.completed { background: #2FA96B; }
.year-month-day.missed { background: #FCA5A5; }
.year-month-day.today { box-shadow: inset 0 0 0 1.5px #2F6BFF; }
.year-month-day.future { background: transparent; }
.year-month-day.clickable {
cursor: pointer;
}
.year-month-day.clickable:hover {
transform: scale(1.35);
box-shadow: 0 2px 6px rgba(20, 30, 60, 0.18);
z-index: 2;
}
/* Легенда */
.stats-legend {
display: flex;
gap: 16px;
margin-top: 14px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #5A6270;
}
.legend-dot {
width: 12px;
height: 12px;
border-radius: 4px;
flex-shrink: 0;
}
.legend-dot.completed { background: #2FA96B; }
.legend-dot.missed { background: #FDE8E8; border: 1px solid #EF4444; }
.legend-dot.not-scheduled { background: #F5F7FA; border: 1px solid #E5E9F0; }
/* ===== ПАНЕЛЬ НАВИГАЦИИ СТАТИСТИКИ ===== */
.stats-period-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 4px;
margin-bottom: 12px;
}
.stats-period-label {
flex: 1;
text-align: center;
font-size: 14px;
font-weight: 600;
color: #1A1D23;
}
.stats-nav-btn {
width: 32px;
height: 32px;
border: 1px solid #E5E9F0;
background: #FFFFFF;
border-radius: 8px;
color: #5A6270;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: background 0.15s ease, border-color 0.15s ease;
}
.stats-nav-btn:hover:not(:disabled) {
background: #F5F7FA;
border-color: #C7CEDB;
}
.stats-nav-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ===== ФИНАЛ: круглые ячейки календарей, масштаб, выходные фоном ===== */
/* Планировщик: уменьшаем масштаб — календарь по центру, ограниченная ширина */
.planner-calendar {
align-self: center;
width: 100%;
max-width: 400px;
}
.pc-title {
font-size: 14px;
}
/* Ячейки — круглые */
.pc-cell {
border-radius: 50%;
font-size: 12px;
}
/* Выходные — серый фон (не серый текст) */
.pc-cell.weekend {
background: #F5F7FA;
color: #1A1D23;
}
.pc-cell:hover:not(.empty):not(:disabled) {
background: #EEF1F6;
}
/* Календарь статистики — круглые ячейки */
.calendar-day {
border-radius: 50%;
}
/* Годовой календарь — круглые ячейки */
.year-month-day {
border-radius: 50%;
}
/* ===== МЯГКИЕ МОДАЛКИ: убираем ярко-синие выделения ===== */
/* Фокус инпута — нейтральная обводка без синего свечения */
.modal-input:focus,
.auth-input:focus {
border-color: #C7CEDB;
box-shadow: 0 0 0 3px rgba(20, 30, 60, 0.06);
}
/* Приоритеты — без жёсткой обводки и свечения */
.priority-radio input[type="radio"]:checked + .priority-pill {
border-color: #C7CEDB;
box-shadow: none;
}
/* Дни недели — мягкая голубая вместо сплошной синей */
.weekday-btn.selected {
background: #E8F0FE;
color: #2F6BFF;
border-color: #C7D8FF;
}
/* ============================================================
МОБИЛЬНЫЙ LAYOUT — bottom tab bar
============================================================ */
/* По умолчанию (ПК) — tab bar скрыт */
.mobile-tabbar {
display: none;
}
@media (max-width: 1023px) {
/* ---- Общая структура ---- */
body {
background: #FFFFFF;
}
.app-container {
display: block;
height: 100dvh;
margin: 0;
border-radius: 0;
overflow: hidden;
box-shadow: none;
}
/* Сайдбар и правая колонка — полностью скрыты */
.sidebar,
.right-rail,
.sidebar-overlay,
.mobile-menu-btn,
.main-section-switcher {
display: none !important;
}
/* Центр — на всю ширину, с отступом под tab bar */
.main-content {
display: block;
width: 100%;
max-width: none;
height: 100dvh;
padding: 16px;
padding-top: calc(16px + env(safe-area-inset-top));
padding-bottom: calc(88px + env(safe-area-inset-bottom));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #FFFFFF;
}
/* Секции переключаются вкладками */
.main-section {
display: none !important;
height: auto !important;
overflow: visible !important;
}
.main-section.mobile-active {
display: block !important;
}
/* Чипы списков — sticky сверху */
.lists-scroll {
display: flex !important;
position: sticky;
top: 0;
z-index: 5;
background: #FFFFFF;
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 1px solid #E5E9F0;
}
/* Заголовок страницы — компактнее */
.page-header {
padding-bottom: 8px;
margin-bottom: 12px;
}
.page-header #newTaskHeaderBtn {
display: none; /* кнопка + теперь в tab bar */
}
.page-title { font-size: 22px !important; }
.page-subtitle { font-size: 12px !important; }
/* FAB-контейнер и fab-goals — не нужны (заменены на tab bar) */
.fab-container,
.fab-goals,
.isticker-floating {
display: none !important;
}
/* ---- TAB BAR ---- */
.mobile-tabbar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 68px;
padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid #E5E9F0;
z-index: 900;
justify-content: space-around;
align-items: center;
}
.tabbar-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 4px 0;
background: transparent;
border: none;
font-family: inherit;
font-size: 10px;
font-weight: 500;
color: #9AA3B2;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
outline: none;
transition: color 0.15s ease;
min-width: 0;
}
.tabbar-item i {
font-size: 22px;
transition: color 0.15s ease;
}
.tabbar-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.tabbar-item.active {
color: #2F6BFF;
}
/* Центральная FAB-кнопка */
.tabbar-item.tabbar-fab {
flex: 0 0 auto;
width: 54px;
height: 54px;
margin-top: -22px;
border-radius: 50%;
background: #2F6BFF;
color: #FFFFFF;
box-shadow: 0 8px 20px rgba(47, 107, 255, 0.35);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.15s ease, background 0.15s ease;
}
.tabbar-item.tabbar-fab i {
font-size: 26px;
}
.tabbar-item.tabbar-fab:active {
transform: scale(0.92);
background: #2458D6;
}
.tabbar-item.tabbar-fab.active {
color: #FFFFFF;
}
/* ---- ПРИВЕТСТВИЕ ---- */
.mobile-hello {
padding: 4px 0 16px;
}
.hello-title {
font-size: 22px;
font-weight: 700;
color: #1A1D23;
margin: 0 0 4px;
}
.hello-subtitle {
font-size: 13px;
color: #5A6270;
margin: 0;
line-height: 1.4;
}
/* ---- МОДАЛКИ: bottom sheet ---- */
.modal-overlay {
align-items: flex-end !important;
padding: 0 !important;
}
.modal {
width: 100% !important;
max-width: 100% !important;
border-radius: 20px 20px 0 0 !important;
max-height: 92dvh !important;
padding: 20px !important;
padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
animation: modalSlideUp 0.25s ease;
}
@keyframes modalSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
}
/* Приветствие и profileMain на ПК — не показываем */
@media (min-width: 1024px) {
.mobile-hello { display: none; }
#profileMain { display: none !important; }
}
/* ============================================================
ЭКРАН ПРОФИЛЯ (внутри mobile layout)
============================================================ */
.profile-header {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 4px;
margin-bottom: 12px;
border-bottom: 1px solid #E5E9F0;
}
.profile-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: #E8F0FE;
color: #2F6BFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
flex-shrink: 0;
}
.profile-info { flex: 1; min-width: 0; }
.profile-email {
font-size: 15px;
font-weight: 600;
color: #1A1D23;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-subtitle {
font-size: 12px;
color: #9AA3B2;
margin-top: 2px;
}
.profile-menu {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 8px;
}
.profile-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 12px;
background: transparent;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 15px;
font-weight: 500;
color: #1A1D23;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.profile-menu-item:hover,
.profile-menu-item:active {
background: #F5F7FA;
}
.profile-menu-item i:first-child {
font-size: 20px;
color: #9AA3B2;
flex-shrink: 0;
}
.profile-menu-item i:last-child {
margin-left: auto;
font-size: 16px;
color: #C7CEDB;
}
.profile-logout {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 32px;
padding: 14px;
background: #FDE8E8;
color: #EF4444;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.profile-logout:active {
background: #FBD5D5;
}
/* ============================================================
ЛЕНТА КАТЕГОРИЙ В ПРОЕКТАХ (мобильные)
============================================================ */
.goal-categories-scroll {
display: none;
}
@media (max-width: 1023px) {
.goal-categories-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 0 0 12px;
margin-bottom: 12px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid #E5E9F0;
position: sticky;
top: 0;
background: #FFFFFF;
z-index: 5;
padding-top: 8px;
}
.goal-categories-scroll::-webkit-scrollbar { display: none; }
.goal-chip {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
padding: 8px 14px;
background: #F5F7FA;
border: 1px solid #E5E9F0;
border-radius: 999px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: #5A6270;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.goal-chip i {
font-size: 15px;
color: inherit;
}
.goal-chip-count {
font-size: 11px;
font-weight: 600;
color: #9AA3B2;
margin-left: 2px;
}
.goal-chip:hover,
.goal-chip:active {
background: #EEF1F6;
}
.goal-chip.active {
background: #2F6BFF;
border-color: #2F6BFF;
color: #FFFFFF;
}
.goal-chip.active .goal-chip-count {
color: rgba(255, 255, 255, 0.8);
}
.goal-chip-add {
background: transparent;
border: 1px dashed #C7CEDB;
color: #2F6BFF;
}
}
/* ============================================================
СПИСОК ЗАДАЧ ДЛЯ ПЛАНИРОВЩИКА (только мобильные)
============================================================ */
.planner-lists-mobile {
display: none;
}
@media (max-width: 1023px) {
.planner-lists-mobile {
display: block;
margin-bottom: 16px;
padding: 12px;
background: #F5F7FA;
border-radius: 12px;
}
.planner-list-group-mobile {
margin-bottom: 4px;
}
.planner-list-header-mobile {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
background: #FFFFFF;
border: none;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: #1A1D23;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.planner-list-header-mobile .planner-list-count {
margin-left: auto;
font-size: 12px;
color: #9AA3B2;
}
.planner-list-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
font-size: 10px;
color: #9AA3B2;
transition: transform 0.2s ease;
}
.planner-list-arrow.open {
transform: rotate(90deg);
}
.planner-list-tasks-mobile {
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px 4px 4px;
}
.planner-task-mobile {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 8px;
font-size: 13px;
cursor: grab;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.planner-task-mobile:active {
cursor: grabbing;
}
.planner-task-mobile.dragging {
opacity: 0.4;
}
.planner-task-mobile.scheduled {
background: #E6F7ED;
border-color: #B7E4C7;
}
.planner-task-mobile.scheduled:active {
background: #D8F1E2;
border-color: #9BD8B5;
}
.planner-task-mobile .planner-task-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #1A1D23;
font-weight: 500;
}
/* ===== Раскрытие задачи в планировщике ===== */
.planner-task-mobile {
display: flex;
align-items: center;
gap: 6px;
}
.planner-task-expand {
width: 20px;
height: 20px;
flex-shrink: 0;
border: none;
background: transparent;
color: #9AA3B2;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 4px;
transition: transform 0.15s ease, background 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.planner-task-expand .ph {
font-size: 12px;
}
.planner-task-expand.open {
transform: rotate(90deg);
}
.planner-task-expand:hover,
.planner-task-expand:active {
background: #EEF1F6;
color: #1A1D23;
}
.planner-task-expand-placeholder {
width: 20px;
flex-shrink: 0;
}
/* Бейдж времени запланированной задачи/подзадачи */
.planner-task-scheduled {
display: inline-flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
font-size: 11px;
font-weight: 600;
color: #2FA96B;
background: #E6F7ED;
border-radius: 6px;
padding: 2px 6px;
white-space: nowrap;
}
/* ===== Подзадачи в списке планировщика ===== */
.planner-subtask-mobile {
display: flex;
align-items: center;
gap: 8px;
margin-left: 26px;
padding: 10px 12px;
background: #FAFBFC;
border: 1px solid #F0F2F7;
border-radius: 8px;
font-size: 13px;
cursor: grab;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}
.planner-subtask-mobile.dragging {
opacity: 0.5;
}
.planner-subtask-mobile.completed {
opacity: 0.6;
}
.planner-subtask-mobile.completed .planner-subtask-title {
text-decoration: line-through;
text-decoration-color: #9AA3B2;
color: #9AA3B2;
}
/* Чекбокс подзадачи */
.planner-subtask-check {
width: 16px;
height: 16px;
flex-shrink: 0;
border: 1.5px solid #C7CEDB;
border-radius: 50%;
background: #FFFFFF;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, border-color 0.15s ease;
}
.planner-subtask-check.checked {
background: #2FA96B;
border-color: #2FA96B;
}
.planner-subtask-check.checked::after {
content: '✓';
color: #FFFFFF;
font-size: 10px;
font-weight: 700;
}
.planner-subtask-title {
flex: 1;
min-width: 0;
color: #1A1D23;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.planner-lists-empty {
padding: 16px;
text-align: center;
color: #9AA3B2;
font-size: 13px;
}
/* Лента времени — теперь ниже списка */
.planner-body {
flex-direction: column;
min-height: 60vh;
}
.planner-timeline {
min-height: 50vh;
}
}
/* ============================================================
ИТЕРАЦИЯ 14-15: НЕДЕЛЯ В ПЛАНИРОВЩИКЕ (mobile only)
============================================================ */
/* По умолчанию (ПК) — неделя скрыта, работает старый planner-header */
.planner-week {
display: none;
}
.planner-header-desktop {
display: flex;
}
/* Заголовок месяца — скрыт по умолчанию */
.planner-week-title {
display: none;
}
.planner-week-row {
display: contents;
}
/* ==================== МОБИЛЬНАЯ ВЕРСИЯ ==================== */
@media (max-width: 1023px) {
/* Скрываем старую навигацию по дням */
.planner-header-desktop {
display: none !important;
}
/* Показываем неделю — вертикальный контейнер */
.planner-week {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 0 12px;
margin-bottom: 12px;
border-bottom: 1px solid var(--paper-300);
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 10;
background: #FFFFFF;
}
/* Заголовок месяца */
.planner-week-title {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--paper-900);
text-align: left;
padding-left: 4px;
letter-spacing: -0.2px;
line-height: 1.2;
}
/* Строка с кнопками и днями */
.planner-week-row {
display: flex;
align-items: center;
gap: 4px;
}
/* Ячейки дней — 7 штук в ряд */
.planner-week-days {
flex: 1;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
min-width: 0;
overflow: hidden;
touch-action: pan-y; /* вертикальный скролл — ок, горизонтальный — обрабатываем сами */
transition: transform 0.2s ease;
}
/* Плавная анимация свайпа */
.planner-week-days.swiping {
transition: none;
}
/* Ячейка дня */
.planner-week-day {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 6px 2px;
min-height: 52px;
background: transparent;
border: 1.5px solid transparent;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
transform 0.1s ease;
-webkit-tap-highlight-color: transparent;
outline: none;
user-select: none;
-webkit-user-select: none;
}
.planner-week-day:active {
transform: scale(0.94);
}
/* День недели (Пн, Вт...) */
.planner-week-wd {
font-size: 10px;
font-weight: 500;
color: var(--paper-500);
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1;
}
/* Число месяца */
.planner-week-num {
font-size: 15px;
font-weight: 600;
color: var(--paper-900);
line-height: 1;
}
/* Сегодняшний день — синяя плашка (если не выбран) */
.planner-week-day.today:not(.selected) {
background: var(--brand-400);
}
.planner-week-day.today:not(.selected) .planner-week-wd {
color: rgba(255, 255, 255, 0.85);
}
.planner-week-day.today:not(.selected) .planner-week-num {
color: #FFFFFF;
font-weight: 700;
}
/* Выбранный день, но не сегодня — синяя обводка */
.planner-week-day.selected:not(.today) {
border-color: var(--brand-400);
background: #FFFFFF;
}
.planner-week-day.selected:not(.today) .planner-week-wd {
color: var(--brand-400);
}
.planner-week-day.selected:not(.today) .planner-week-num {
color: var(--brand-400);
font-weight: 700;
}
/* Сегодня И выбран — та же синяя плашка */
.planner-week-day.today.selected {
background: var(--brand-400);
}
.planner-week-day.today.selected .planner-week-wd {
color: rgba(255, 255, 255, 0.85);
}
.planner-week-day.today.selected .planner-week-num {
color: #FFFFFF;
font-weight: 700;
}
/* Кнопки навигации по неделе — с лёгким фоном */
.planner-week-nav {
width: 34px;
height: 52px;
flex-shrink: 0;
border: none;
background: #F5F7FA;
color: #5A6270;
font-size: 14px;
cursor: pointer;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.planner-week-nav:hover {
background: #EEF1F6;
color: #1A1D23;
}
.planner-week-nav:active {
background: #E8F0FE;
color: var(--brand-400);
transform: scale(0.94);
}
/* Кнопка календаря месяца — тоже с фоном, прижата ближе */
.planner-week-calendar {
width: 34px;
height: 52px;
flex-shrink: 0;
border: none;
background: #F5F7FA;
color: #5A6270;
font-size: 16px;
cursor: pointer;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
-webkit-tap-highlight-color: transparent;
outline: none;
margin-left: 0;
}
.planner-week-calendar:hover {
background: #EEF1F6;
color: #1A1D23;
}
.planner-week-calendar:active {
background: #E8F0FE;
color: var(--brand-400);
transform: scale(0.94);
}
.planner-week-calendar.active {
background: #E8F0FE;
color: var(--brand-400);
}
}
/* ============================================================
ИТЕРАЦИЯ 16: ВЫЕЗЖАЮЩАЯ ПАНЕЛЬ СПИСКОВ (mobile only)
============================================================ */
/* По умолчанию (ПК) — всё скрыто */
.planner-drawer-handle,
.planner-drawer-overlay,
.planner-drawer {
display: none;
}
/* ==================== МОБИЛЬНАЯ ВЕРСИЯ ==================== */
@media (max-width: 1023px) {
/* Планировщик — родитель для absolute-позиционированной ручки */
#plannerMain {
position: relative;
}
/* ==================== РУЧКА ==================== */
.planner-drawer-handle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
position: absolute;
right: -22px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 68px;
padding: 0;
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-left: none;
border-radius: 0 12px 12px 0;
box-shadow: 2px 2px 8px rgba(20, 30, 60, 0.06);
cursor: pointer;
z-index: 10;
-webkit-tap-highlight-color: transparent;
outline: none;
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.planner-drawer-handle i {
font-size: 14px;
color: #5A6270;
transform: rotate(90deg);
transition: color 0.15s ease;
}
.planner-drawer-handle:active {
background: #F5F7FA;
}
.planner-drawer-handle.open {
background: #E8F0FE;
border-color: #C7D8FF;
box-shadow: 2px 2px 12px rgba(47, 107, 255, 0.15);
}
.planner-drawer-handle.open i {
color: #2F6BFF;
}
/* Бейдж — количество незапланированных задач */
.planner-drawer-handle-badge {
position: absolute;
top: -6px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: #2F6BFF;
color: #FFFFFF;
font-size: 10px;
font-weight: 700;
line-height: 18px;
text-align: center;
border-radius: 9px;
box-shadow: 0 2px 6px rgba(47, 107, 255, 0.35);
pointer-events: none;
}
/* ==================== OVERLAY ==================== */
.planner-drawer-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(20, 30, 60, 0.45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 300;
opacity: 0;
transition: opacity 0.25s ease;
}
.planner-drawer-overlay.show {
display: block;
opacity: 1;
}
/* ==================== ПАНЕЛЬ ==================== */
.planner-drawer {
display: flex;
flex-direction: column;
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 264px;
max-width: 74vw;
background: #FFFFFF;
border-right: 1px solid #E5E9F0;
box-shadow: 4px 0 24px rgba(20, 30, 60, 0.12);
z-index: 400;
transform: translateX(-100%);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.planner-drawer.show {
transform: translateX(0);
}
/* Шапка панели */
.planner-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 16px 16px 12px;
border-bottom: 1px solid #E5E9F0;
flex-shrink: 0;
}
.planner-drawer-title {
font-size: 16px;
font-weight: 700;
color: #1A1D23;
margin: 0;
letter-spacing: -0.2px;
}
.planner-drawer-close {
width: 32px;
height: 32px;
border: none;
background: transparent;
color: #5A6270;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
-webkit-tap-highlight-color: transparent;
outline: none;
transition: background 0.15s ease, color 0.15s ease;
}
.planner-drawer-close:hover,
.planner-drawer-close:active {
background: #F5F7FA;
color: #1A1D23;
}
/* Тело панели — со скроллом */
.planner-drawer-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 12px;
-webkit-overflow-scrolling: touch;
}
/* Списки внутри панели — убираем их собственный отступ */
.planner-drawer-body .planner-lists-mobile {
margin-bottom: 0;
padding: 0;
background: transparent;
}
}
/* ============================================================
ИТЕРАЦИЯ 17: КОЛЕСО ВРЕМЕНИ (wheel picker)
============================================================ */
.time-wheel {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 180px;
margin: 2px 0 0;
user-select: none;
-webkit-user-select: none;
}
/* Полоса-подсветка выбранного значения */
.time-wheel::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 40px;
background: #F5F7FA;
border-radius: 10px;
z-index: 0;
pointer-events: none;
}
.time-wheel-col {
position: relative;
z-index: 1;
height: 100%;
flex: 1;
max-width: 76px;
overflow-y: auto;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior: contain;
touch-action: pan-y;
}
.time-wheel-col::-webkit-scrollbar {
display: none;
}
.time-wheel-spacer {
height: 70px;
flex-shrink: 0;
scroll-snap-align: none;
}
.time-wheel-item {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 600;
color: #B6BEC9;
scroll-snap-align: center;
transition: color 0.12s ease, font-weight 0.12s ease;
}
.time-wheel-item.selected {
color: #1A1D23;
font-weight: 700;
}
.time-wheel-sep {
position: relative;
z-index: 1;
font-size: 22px;
font-weight: 700;
color: #1A1D23;
}
.time-wheel-duration .time-wheel-col {
max-width: 120px;
}
.time-wheel-unit {
position: relative;
z-index: 1;
font-size: 14px;
font-weight: 600;
color: #9AA3B2;
}
/* ============================================================
ИТЕРАЦИЯ 17: НАТИВНЫЙ ПИКЕР ВРЕМЕНИ
============================================================ */
/* Поле времени — большое, центральное, tabular-nums */
.schedule-time-native {
position: relative;
width: 100%;
height: 60px;
padding: 0 12px;
margin-bottom: 0 !important;
font-size: 22px;
font-weight: 700;
text-align: center;
font-variant-numeric: tabular-nums;
letter-spacing: 1px;
font-family: inherit;
color: #1A1D23;
background: #F5F7FA;
border: 1px solid #E5E9F0;
border-radius: 12px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
outline: none;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.schedule-time-native:hover {
border-color: #C7D8FF;
background: #F9FAFC;
}
.schedule-time-native:focus {
border-color: #2F6BFF;
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12);
}
/* Скрываем системный «значок часов», растягиваем его на всё поле — так клик
в любую точку поля открывает нативный пикер */
.schedule-time-native::-webkit-calendar-picker-indicator {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
}
/* Скрываем стрелки вверх/вниз в Safari (на некоторых версиях бывает) */
.schedule-time-native::-webkit-inner-spin-button,
.schedule-time-native::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Подпись «= X минут» под полем длительности */
.duration-hint {
margin-top: 6px;
font-size: 12px;
font-weight: 500;
color: #5A6270;
text-align: center;
font-variant-numeric: tabular-nums;
}
@media (max-width: 1023px) {
.schedule-time-native {
height: 64px;
font-size: 24px;
}
.duration-hint {
font-size: 13px;
}
}
/* ============================================================
ИТЕРАЦИЯ 18: КОМПАКТНЫЙ WHEEL PICKER (только mobile)
============================================================ */
.schedule-form-mobile {
display: none;
}
@media (max-width: 1023px) {
.schedule-form-desktop {
display: none !important;
}
.schedule-form-mobile {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 20px;
}
}
.wheel-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.wheel-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #9AA3B2;
padding-left: 2px;
}
.wheel-picker {
position: relative;
height: 44px;
overflow: hidden;
background: #F5F7FA;
border: 1px solid #E5E9F0;
border-radius: 12px;
touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
cursor: grab;
}
.wheel-picker:active {
cursor: grabbing;
}
.wheel-picker::before,
.wheel-picker::after {
content: '';
position: absolute;
left: 10px;
right: 10px;
height: 1px;
background: #2F6BFF;
opacity: 0.5;
z-index: 2;
pointer-events: none;
}
.wheel-picker::before { top: 0; }
.wheel-picker::after { bottom: 0; }
.wheel-track {
position: absolute;
left: 0;
right: 0;
top: 0;
display: flex;
flex-direction: column;
will-change: transform;
transform: translateY(0);
transition: none;
}
.wheel-item {
height: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.5px;
font-variant-numeric: tabular-nums;
color: #1A1D23;
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.wheel-item.active { opacity: 1; }
.wheel-picker.scrolling .wheel-item { opacity: 0.6; }
.wheel-picker.scrolling .wheel-item.active { opacity: 1; }
.wheel-picker.snapping .wheel-track {
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.wheel-picker.snapping .wheel-item {
transition: opacity 0.28s ease;
}
/* ============================================================
ИТЕРАЦИЯ 19: раздельные барабаны часов/минут + статичная подпись
============================================================ */
/* ==================== ВРЕМЯ: часы : минуты ==================== */
.wheel-time-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* Узкие барабаны для часов и минут */
.wheel-picker-sm {
flex: 1;
max-width: 90px;
}
/* Двоеточие между барабанами — статичное */
.wheel-colon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 44px;
width: 12px;
font-size: 22px;
font-weight: 700;
color: #1A1D23;
opacity: 0.5;
font-variant-numeric: tabular-nums;
user-select: none;
-webkit-user-select: none;
}
/* ==================== ДЛИТЕЛЬНОСТЬ: барабан + «мин» ==================== */
.wheel-duration-row {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.wheel-duration-row .wheel-picker {
flex: 1;
max-width: 120px;
}
/* Статичная подпись «мин» — не крутится */
.wheel-unit {
flex-shrink: 0;
font-size: 15px;
font-weight: 600;
color: #5A6270;
letter-spacing: 0.3px;
user-select: none;
-webkit-user-select: none;
padding-bottom: 2px;
}
/* Мобильные — чуть компактнее */
@media (max-width: 1023px) {
.wheel-colon {
font-size: 20px;
width: 10px;
}
.wheel-unit {
font-size: 14px;
}
}
/* ============================================================
ИТЕРАЦИЯ 20: ПОДЗАДАЧИ (чеклист внутри задачи)
============================================================ */
.subtasks-editor {
background: #F5F7FA;
border: 1px solid #E5E9F0;
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.subtasks-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 260px;
overflow-y: auto;
/* Если пусто — не показываем пустую область */
}
.subtasks-list:empty {
display: none;
}
/* Одна подзадача */
.subtask-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 8px;
transition: background 0.15s ease, border-color 0.15s ease;
}
.subtask-item:hover {
border-color: #C7CEDB;
}
/* Чекбокс */
.subtask-checkbox {
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid #C7CEDB;
background: #FFFFFF;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, border-color 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.subtask-checkbox:hover {
border-color: #2F6BFF;
}
.subtask-checkbox.checked {
background: #2FA96B;
border-color: #2FA96B;
}
.subtask-checkbox.checked::after {
content: '✓';
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
}
/* Поле ввода (режим редактирования названия) */
.subtask-title {
flex: 1;
min-width: 0;
font-size: 14px;
font-weight: 500;
color: #1A1D23;
line-height: 1.35;
word-break: break-word;
cursor: text;
padding: 2px 0;
border: none;
background: transparent;
outline: none;
font-family: inherit;
resize: none;
}
.subtask-title.completed {
text-decoration: line-through;
text-decoration-color: #9AA3B2;
color: #9AA3B2;
}
/* Кнопка удаления подзадачи */
.subtask-remove {
flex-shrink: 0;
width: 26px;
height: 26px;
border: none;
background: transparent;
color: #C7CEDB;
cursor: pointer;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: background 0.15s ease, color 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.subtask-remove:hover {
background: #FDE8E8;
color: #EF4444;
}
/* Кнопка «+ Добавить подзадачу» */
.subtask-add-btn {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
padding: 8px 12px;
background: transparent;
border: 1px dashed #C7CEDB;
border-radius: 8px;
color: #2F6BFF;
font-family: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.subtask-add-btn:hover {
background: #E8F0FE;
border-color: #2F6BFF;
}
.subtask-add-btn i {
font-size: 14px;
}
/* Счётчик в заголовке модалки редактирования */
.subtasks-count {
font-size: 11px;
font-weight: 600;
color: #5A6270;
margin-left: 4px;
}
/* Пустое состояние — не нужно, просто скрывается */
.subtasks-editor.empty .subtasks-list {
display: none;
}
/* На мобильных — компактнее */
@media (max-width: 1023px) {
.subtasks-editor {
padding: 8px;
}
.subtask-item {
padding: 8px;
}
.subtask-title {
font-size: 14px;
}
.subtask-add-btn {
width: 100%;
justify-content: center;
}
}
/* ============================================================
ИТЕРАЦИЯ 21: ПРОГРЕСС ПОДЗАДАЧ НА КАРТОЧКЕ + АККОРДЕОН
============================================================ */
/* ==================== БЕЙДЖ ПРОГРЕССА НА КАРТОЧКЕ ==================== */
.subtask-progress-badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 4px 10px 4px 8px;
background: #F5F7FA;
border: 1px solid #E5E9F0;
border-radius: 8px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
font-size: 12px;
font-weight: 600;
color: #5A6270;
transition: background 0.15s ease, border-color 0.15s ease;
}
.subtask-progress-badge:hover {
background: #EEF1F6;
border-color: #C7CEDB;
}
/* Иконка чеклиста */
.subtask-progress-badge .ph {
font-size: 13px;
color: #9AA3B2;
}
/* Полоска прогресса */
.subtask-progress-bar {
display: inline-block;
width: 60px;
height: 4px;
background: #E5E9F0;
border-radius: 2px;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.subtask-progress-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #2FA96B;
border-radius: 2px;
transition: width 0.3s ease;
}
/* Полностью выполнено — зелёная подсветка */
.subtask-progress-badge.all-done {
background: #E6F7EE;
border-color: #B7E4C7;
color: #1E7A4A;
}
.subtask-progress-badge.all-done .ph {
color: #2FA96B;
}
.subtask-progress-badge.all-done .subtask-progress-fill {
background: #2FA96B;
}
/* Счётчик */
.subtask-progress-count {
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* Стрелка (▼ / ▲) при раскрытии */
.subtask-progress-arrow {
font-size: 10px;
color: #9AA3B2;
margin-left: 2px;
transition: transform 0.2s ease;
}
.subtask-progress-badge.expanded .subtask-progress-arrow {
transform: rotate(180deg);
}
/* ==================== РАСКРЫТЫЙ СПИСОК НА КАРТОЧКЕ ==================== */
.task-subtasks-expanded {
margin-top: 10px;
padding: 8px 10px;
background: #F5F7FA;
border: 1px solid #E5E9F0;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 4px;
animation: subtasksExpand 0.2s ease;
}
@keyframes subtasksExpand {
from {
opacity: 0;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
}
to {
opacity: 1;
max-height: 400px;
}
}
.task-subtask-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border-radius: 6px;
transition: background 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.task-subtask-row:hover {
background: rgba(47, 107, 255, 0.05);
}
/* Чекбокс — компактнее, чем в модалке */
.task-subtask-checkbox {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid #C7CEDB;
background: #FFFFFF;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, border-color 0.15s ease;
}
.task-subtask-checkbox:hover {
border-color: #2FA96B;
}
.task-subtask-checkbox.checked {
background: #2FA96B;
border-color: #2FA96B;
}
.task-subtask-checkbox.checked::after {
content: '✓';
color: #FFFFFF;
font-size: 10px;
font-weight: 700;
}
/* Текст подзадачи */
.task-subtask-title {
flex: 1;
min-width: 0;
font-size: 13px;
font-weight: 500;
color: #1A1D23;
line-height: 1.35;
word-break: break-word;
}
.task-subtask-title.completed {
text-decoration: line-through;
text-decoration-color: #9AA3B2;
color: #9AA3B2;
}
/* ==================== ПРОГРЕСС В ПЛАНИРОВЩИКЕ ==================== */
.timeline-task-subtasks {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 2px;
font-size: 10px;
opacity: 0.9;
font-weight: 500;
}
.timeline-task-subtasks .ph {
font-size: 10px;
}
/* ==================== МОДАЛКА ВНИМАНИЯ ==================== */
.subtask-warning-list {
margin: 12px 0;
padding: 10px 12px;
background: #F5F7FA;
border-radius: 8px;
max-height: 180px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
}
.subtask-warning-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #5A6270;
}
.subtask-warning-item::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: #F59E0B;
}
.subtask-warning-actions {
flex-direction: column;
gap: 8px;
}
.subtask-warning-actions .btn {
width: 100%;
}
@media (min-width: 481px) {
.subtask-warning-actions {
flex-direction: row;
}
.subtask-warning-actions .btn {
width: auto;
flex: 1;
}
}
/* На мобильных — компактнее */
@media (max-width: 1023px) {
.subtask-progress-badge {
font-size: 12px;
padding: 5px 10px 5px 8px;
gap: 6px;
}
.subtask-progress-bar {
width: 44px;
}
.task-subtask-title {
font-size: 13px;
}
}
/* ============================================================
ИТЕРАЦИЯ 22: МОДАЛКИ В СТИЛЕ iOS (только мобильные)
============================================================ */
/* ==================== По умолчанию (ПК) — как было ==================== */
.modal-header-mobile {
display: none;
}
/* ==================== МОБИЛЬНЫЕ ==================== */
@media (max-width: 1023px) {
/* ---------- Модалка — bottom sheet ---------- */
.modal-overlay {
align-items: flex-end !important;
padding: 0 !important;
}
.modal {
width: 100% !important;
max-width: 100% !important;
border-radius: 20px 20px 0 0 !important;
max-height: 94dvh !important;
padding: 0 !important;
padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
overflow-y: auto;
animation: modalSlideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
background: #FFFFFF;
}
@keyframes modalSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* ---------- Шапка модалки ---------- */
.modal-header-desktop {
display: none !important;
}
.modal-header-mobile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
position: sticky;
top: 0;
z-index: 5;
padding: 14px 16px;
background: #FFFFFF;
border-bottom: 1px solid #F0F2F7;
}
.modal-header-title {
flex: 1;
margin: 0;
font-size: 16px;
font-weight: 600;
color: #1A1D23;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modal-header-btn {
flex-shrink: 0;
min-width: 72px;
padding: 6px 4px;
background: transparent;
border: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
outline: none;
transition: opacity 0.15s ease;
}
.modal-header-btn:active {
opacity: 0.5;
}
.modal-header-cancel {
color: #5A6270;
text-align: left;
}
.modal-header-save {
color: #2F6BFF;
font-weight: 600;
text-align: right;
}
.modal-header-save:disabled {
color: #C7CEDB;
cursor: not-allowed;
}
}
/* ============================================================
ВЕРНУТЬ СТАРЫЕ СТИЛИ ДЛЯ ПК (>1023)
============================================================ */
@media (min-width: 1024px) {
/* ПК-версия modal-actions — как было */
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.modal-actions-spread {
justify-content: space-between;
}
}
/* ============================================================
ИТЕРАЦИЯ 23: FORM-ROWS в стиле iOS
============================================================ */
/* По умолчанию (ПК) — скрываем новые form-rows, показываем старые form-group */
.form-row {
display: none;
}
/* ==================== МОБИЛЬНЫЕ ==================== */
@media (max-width: 1023px) {
/* Скрываем form-group только в task-модалках (они перешли на form-row) */
#newTaskModalOverlay .form-group,
#editTaskModalOverlay .form-group {
display: none !important;
}
/* Поле названия — белое с рамкой */
#newTaskTitle,
#editTaskTitle {
margin: 16px;
padding: 14px 16px;
width: calc(100% - 32px);
min-height: 52px;
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 14px;
font-size: 16px;
font-weight: 500;
color: #1A1D23;
box-shadow: 0 1px 2px rgba(20, 30, 60, 0.02);
}
#newTaskTitle:focus,
#editTaskTitle:focus {
background: #FFFFFF;
border-color: #2F6BFF;
box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12);
}
/* ===== КОНТЕЙНЕР ДЛЯ ГРУППЫ СТРОК ===== */
.form-block {
margin: 0 16px;
}
/* Все form-row — в одном визуальном блоке */
.form-row {
display: block;
margin: 0;
padding: 0;
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 0;
border-bottom: none;
box-shadow: none;
}
/* Первая строка — скругление сверху */
.form-row:first-of-type {
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
/* Последняя строка — скругление снизу и обёртка отступа */
.form-row:last-of-type {
border-bottom: 1px solid #E5E9F0;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
margin-bottom: 16px;
}
/* Разделитель между строками */
.form-row + .form-row {
border-top: 1px solid #F0F2F7;
}
/* ===== HEADER СТРОКИ ===== */
.form-row-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
background: transparent;
transition: background 0.15s ease;
}
.form-row-header:active {
background: #F9FAFC;
}
/* ===== ЛЕВАЯ ЧАСТЬ ===== */
.form-row-left {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
min-width: 0;
}
.form-row-icon {
font-size: 18px;
color: #9AA3B2;
flex-shrink: 0;
width: 20px;
text-align: center;
}
.form-row-label {
font-size: 15px;
font-weight: 500;
color: #1A1D23;
white-space: nowrap;
}
/* ===== ПРАВАЯ ЧАСТЬ ===== */
.form-row-right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
min-width: 0;
margin-left: auto;
}
.form-row-value {
font-size: 15px;
font-weight: 400;
color: #9AA3B2;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 180px;
}
.form-row-value.has-value {
color: #1A1D23;
font-weight: 400;
}
.form-row-chevron {
font-size: 14px;
color: #C7CEDB;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.form-row.expanded .form-row-chevron {
transform: rotate(90deg);
}
/* ===== РАСКРЫВАЮЩИЙСЯ КОНТЕНТ ===== */
.form-row-content {
display: none;
padding: 0 16px 14px;
background: transparent;
}
.form-row.expanded .form-row-content {
display: block;
animation: rowContentIn 0.2s ease;
}
@keyframes rowContentIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Поля внутри раскрытой строки */
.form-row-content .modal-input,
.form-row-content select.modal-input,
.form-row-content input[type="date"],
.form-row-content input[type="time"],
.form-row-content textarea.modal-input {
width: 100%;
margin: 0;
padding: 12px 14px;
background: #F5F7FA;
border: 1px solid #E5E9F0;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
color: #1A1D23;
height: auto;
min-height: 44px;
-webkit-appearance: none;
appearance: none;
font-family: inherit;
}
.form-row-content textarea.modal-input {
min-height: 80px;
padding: 12px 14px;
line-height: 1.5;
resize: vertical;
}
.form-row-content .modal-input:focus,
.form-row-content select.modal-input:focus,
.form-row-content input:focus,
.form-row-content textarea:focus {
background: #FFFFFF;
border-color: #2F6BFF;
box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12);
outline: none;
}
/* Скрываем form-label внутри раскрытого (там уже есть заголовок строки) */
.form-row-content > .form-label:first-child {
display: none;
}
/* ===== Приоритет — чипы ===== */
.form-row[data-row="priority"] .priority-radios {
display: flex;
gap: 6px;
}
.form-row[data-row="priority"] .priority-radio {
flex: 1;
min-width: 0;
}
.form-row[data-row="priority"] .priority-pill {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 8px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
background: #F5F7FA;
border: 1.5px solid transparent;
color: #5A6270;
text-align: center;
transition: all 0.15s ease;
}
.form-row[data-row="priority"] .priority-radio input:checked + .priority-pill.priority-low {
background: #F0F2F7;
border-color: #5A6270;
color: #1A1D23;
font-weight: 600;
}
.form-row[data-row="priority"] .priority-radio input:checked + .priority-pill.priority-medium {
background: #E8F0FE;
border-color: #2F6BFF;
color: #2F6BFF;
font-weight: 600;
}
.form-row[data-row="priority"] .priority-radio input:checked + .priority-pill.priority-high {
background: #FFF4E5;
border-color: #F59E0B;
color: #B45309;
font-weight: 600;
}
/* ===== Дни недели ===== */
.form-row-content .weekday-buttons {
display: flex;
gap: 6px;
margin-bottom: 8px;
}
.form-row-content .weekday-btn {
flex: 1;
min-width: 0;
padding: 10px 4px;
background: #FFFFFF;
border: 1.5px solid #E5E9F0;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
color: #1A1D23;
}
.form-row-content .weekday-btn.selected {
background: #E8F0FE;
border-color: #2F6BFF;
color: #2F6BFF;
font-weight: 600;
}
/* ===== Подзадачи, цели ===== */
.form-row-content .subtasks-editor {
background: transparent;
border: none;
padding: 0;
gap: 6px;
}
.form-row-content .subtask-item {
background: #F5F7FA;
border: 1px solid #E5E9F0;
padding: 10px 12px;
border-radius: 10px;
}
.form-row-content .subtask-add-btn {
width: 100%;
justify-content: center;
background: #F5F7FA;
border: 1px dashed #C7CEDB;
padding: 10px;
font-size: 13px;
border-radius: 10px;
}
.form-row-content .goals-select {
background: transparent;
padding: 0;
gap: 4px;
max-height: 240px;
}
.form-row-content .goal-checkbox {
background: #F5F7FA;
border-radius: 10px;
padding: 10px 12px;
font-size: 14px;
}
/* ===== Кнопка удаления ===== */
.modal-delete-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: calc(100% - 32px);
margin: 16px 16px 8px;
padding: 14px;
background: transparent;
border: none;
border-radius: 14px;
font-family: inherit;
font-size: 15px;
font-weight: 500;
color: #EF4444;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease;
}
.modal-delete-btn:active {
background: #FDE8E8;
}
/* ===== Футер ===== */
.modal-actions {
margin: 8px 0 0;
padding: 16px;
border-top: none;
flex-direction: column !important;
gap: 0 !important;
}
.modal-actions .btn-secondary {
display: none !important;
}
.modal-actions-right {
width: 100% !important;
flex-direction: column !important;
}
.modal-actions .btn-primary {
width: 100% !important;
height: 52px;
font-size: 16px;
font-weight: 600;
border-radius: 14px;
background: #2F6BFF;
color: #FFFFFF;
box-shadow: 0 2px 8px rgba(47, 107, 255, 0.25);
}
.modal-actions .btn-primary:active {
background: #2458D6;
transform: scale(0.99);
}
}
/* ============================================================
ИТЕРАЦИЯ 23: ВОЗВРАТ form-row НА ПК
============================================================ */
@media (min-width: 1024px) {
/* На ПК показываем form-row в виде старых form-group */
.form-row {
display: block;
margin-bottom: 16px;
}
.form-row-header {
display: block;
padding: 0;
margin-bottom: 8px;
cursor: default;
}
.form-row-left {
display: block;
}
.form-row-icon {
display: none;
}
.form-row-label {
font-size: 13px;
font-weight: 500;
color: #5A6270;
}
.form-row-right {
display: none;
}
.form-row-chevron {
display: none;
}
.form-row-content {
display: block !important;
}
.form-row-static {
display: block;
margin-bottom: 16px;
}
}
/* ============================================================
ФИКС: показ строки статистики на мобильных
Перебивает любые display:none !important из старых правил
============================================================ */
/* По умолчанию — скрыта, но без !important */
#editTaskStatsGroup {
display: none;
}
/* Явно видима — с !important, чтобы победить любые правила */
#editTaskStatsGroup.visible {
display: block !important;
}
@media (max-width: 1023px) {
#editTaskStatsGroup.visible {
display: block !important;
}
}
/* ============================================================
ИТЕРАЦИЯ 25.1: Статистика — новая шапка + круглый прогресс
============================================================ */
/* По умолчанию (ПК) — показываем старую шапку */
.stats-header-mobile {
display: none;
}
.stats-task-card {
display: none;
}
/* ==================== МОБИЛЬНЫЕ ==================== */
@media (max-width: 1023px) {
/* Модалка статистики на всю высоту, снизу отступ под таб-бар */
#statsModalOverlay .modal {
padding: 0 !important;
padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
max-height: 94dvh;
background: #FFFFFF;
}
/* Скрываем десктопную шапку и старый футер */
.stats-header-desktop,
.modal-actions-desktop {
display: none !important;
}
/* ===== НОВАЯ ШАПКА ===== */
.stats-header-mobile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
position: sticky;
top: 0;
z-index: 5;
padding: 14px 16px;
background: #FFFFFF;
border-bottom: 1px solid #F0F2F7;
}
.stats-header-back,
.stats-header-close {
width: 36px;
height: 36px;
flex-shrink: 0;
border: none;
background: transparent;
border-radius: 10px;
color: #1A1D23;
font-size: 20px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease;
}
.stats-header-back:active,
.stats-header-close:active {
background: #F5F7FA;
}
.stats-header-back .ph {
font-size: 18px;
}
.stats-header-close .ph {
font-size: 16px;
color: #9AA3B2;
}
.stats-header-title {
flex: 1;
margin: 0;
font-size: 16px;
font-weight: 600;
color: #1A1D23;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===== КАРТОЧКА ЗАДАЧИ ===== */
.stats-task-card {
display: flex;
align-items: center;
gap: 12px;
margin: 16px;
padding: 14px 16px;
background: #F5F7FA;
border-radius: 14px;
}
.stats-task-icon {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 12px;
background: #E8F0FE;
color: #2F6BFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stats-task-info {
flex: 1;
min-width: 0;
}
.stats-task-title {
font-size: 15px;
font-weight: 600;
color: #1A1D23;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.stats-task-subtitle {
font-size: 13px;
font-weight: 500;
color: #5A6270;
margin-top: 2px;
}
/* ===== PILL-ТАБЫ ===== */
.stats-periods {
display: flex;
gap: 8px;
margin: 0;
padding: 4px 16px 16px;
background: transparent;
border-radius: 0;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
/* Для авто-скролла к активной кнопке */
scroll-behavior: smooth;
scroll-padding: 0 16px;
/* Плавное затухание по краям */
-webkit-mask-image: linear-gradient(
to right,
transparent 0,
#000 16px,
#000 calc(100% - 16px),
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0,
#000 16px,
#000 calc(100% - 16px),
transparent 100%
);
}
.stats-periods::-webkit-scrollbar { display: none; }
.period-btn {
flex-shrink: 0;
padding: 10px 18px;
border-radius: 999px;
background: #F5F7FA;
border: none;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: #5A6270;
white-space: nowrap;
cursor: pointer;
transition: all 0.15s ease;
-webkit-tap-highlight-color: transparent;
box-shadow: none;
}
.period-btn:hover {
background: #EEF1F6;
}
.period-btn.active {
background: #2F6BFF;
color: #FFFFFF;
font-weight: 600;
box-shadow: 0 2px 8px rgba(47, 107, 255, 0.25);
}
/* ===== ГЛАВНАЯ КАРТОЧКА (круг) ===== */
#statsContent {
padding: 0 16px;
}
/* ===== СТАРЫЕ КАРТОЧКИ (stat-card) — если ещё используются ===== */
.stats-summary {
display: flex;
gap: 10px;
margin-bottom: 14px;
}
.stat-card {
flex: 1;
background: #F5F7FA;
border-radius: 14px;
padding: 14px 12px;
text-align: center;
box-shadow: none;
}
.stat-card.primary {
background: linear-gradient(135deg, #2F6BFF 0%, #1B44A8 100%);
color: #FFFFFF;
}
.stat-value {
font-size: 24px;
font-weight: 700;
line-height: 1;
margin-bottom: 4px;
color: #1A1D23;
}
.stat-card.primary .stat-value {
color: #FFFFFF;
font-size: 28px;
}
.stat-label {
font-size: 11px;
font-weight: 500;
color: #5A6270;
text-transform: none;
letter-spacing: 0;
}
.stat-card.primary .stat-label {
color: rgba(255, 255, 255, 0.85);
}
.stat-detail {
font-size: 11px;
color: #9AA3B2;
margin-top: 2px;
}
.stat-card.primary .stat-detail {
color: rgba(255, 255, 255, 0.7);
}
/* ===== Раздел статистики ===== */
.stats-section {
background: #F5F7FA;
border-radius: 14px;
padding: 16px;
margin-bottom: 12px;
}
.stats-section-title {
font-size: 14px;
font-weight: 600;
color: #1A1D23;
margin-bottom: 12px;
text-transform: none;
letter-spacing: 0;
}
/* ===== BAR CHART: динамика ===== */
.stats-chart-card {
background: #F5F7FA;
border-radius: 14px;
padding: 16px;
margin-bottom: 12px;
}
.stats-chart-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #1A1D23;
margin-bottom: 16px;
}
.stats-chart-title .ph {
font-size: 16px;
color: #9AA3B2;
}
/* Контейнер столбиков */
.stats-chart-bars {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 6px;
height: 120px;
padding: 0 2px;
}
/* Один столбик */
.stats-chart-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
height: 100%;
justify-content: flex-end;
min-width: 0;
}
.stats-chart-bar-wrap {
width: 100%;
flex: 1;
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
}
.stats-chart-bar {
width: 100%;
max-width: 26px;
min-height: 4px;
background: #2F6BFF;
border-radius: 6px 6px 4px 4px;
transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
}
.stats-chart-bar.empty {
background: #E5E9F0;
}
/* Значение над столбиком */
.stats-chart-value {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
font-weight: 600;
color: #5A6270;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Подпись под столбиком */
.stats-chart-label {
font-size: 10px;
font-weight: 500;
color: #9AA3B2;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
flex-shrink: 0;
}
.stats-chart-col.today .stats-chart-label {
color: #2F6BFF;
font-weight: 600;
}
/* ===== ПЛИТКИ КАТЕГОРИЙ ===== */
.stats-categories-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.stats-category-tile {
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 14px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color 0.15s ease;
}
.stats-category-tile:active {
border-color: #C7CEDB;
}
.stats-category-head {
display: flex;
align-items: center;
gap: 8px;
}
.stats-category-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 8px;
background: #E8F0FE;
color: #2F6BFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.stats-category-name {
font-size: 13px;
font-weight: 600;
color: #1A1D23;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.stats-category-count {
font-size: 12px;
font-weight: 500;
color: #5A6270;
}
.stats-category-percent {
font-size: 20px;
font-weight: 700;
color: #1A1D23;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.stats-category-bar {
height: 4px;
background: #E5E9F0;
border-radius: 2px;
overflow: hidden;
}
.stats-category-bar-fill {
height: 100%;
background: #2F6BFF;
border-radius: 2px;
transition: width 0.5s ease;
}
/* Бледная плитка, если 0 задач */
.stats-category-tile.empty {
opacity: 0.5;
}
/* ===== Анимация появления столбиков ===== */
.stats-chart-bar {
transform-origin: bottom;
transform: scaleY(0);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.stats-chart-bars.animated .stats-chart-bar {
transform: scaleY(1);
}
/* Точка "сегодня" под подписью */
.stats-chart-col.today .stats-chart-label::after {
content: '';
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #2F6BFF;
margin: 3px auto 0;
}
/* ===== TOOLTIP НА СТОЛБИК ===== */
.stats-chart-tooltip {
position: fixed;
z-index: 9999;
background: #1A1D23;
color: #FFFFFF;
padding: 8px 12px;
border-radius: 10px;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
pointer-events: none;
white-space: nowrap;
opacity: 0;
transform: translate(-50%, -8px);
transition: opacity 0.15s ease, transform 0.15s ease;
box-shadow: 0 8px 24px rgba(20, 30, 60, 0.2);
}
.stats-chart-tooltip.show {
opacity: 1;
transform: translate(-50%, -12px);
}
.stats-chart-tooltip::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: #1A1D23;
}
.stats-chart-tooltip-date {
font-weight: 700;
margin-bottom: 2px;
}
.stats-chart-tooltip-detail {
font-size: 11px;
color: rgba(255, 255, 255, 0.75);
}
/* ===== SKELETON ЗАГРУЗКА ===== */
.stats-skeleton {
padding: 0 16px;
}
.stats-skeleton-card {
background: #F5F7FA;
border-radius: 20px;
height: 140px;
margin-bottom: 14px;
position: relative;
overflow: hidden;
}
.stats-skeleton-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.6) 50%,
transparent 100%
);
animation: skeletonShine 1.4s ease infinite;
}
@keyframes skeletonShine {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
.stats-skeleton-row {
display: flex;
gap: 6px;
height: 100px;
align-items: flex-end;
padding: 0 16px;
}
.stats-skeleton-bar {
flex: 1;
background: #E5E9F0;
border-radius: 6px;
min-height: 20px;
}
/* ===== ПУСТОЕ СОСТОЯНИЕ ГРАФИКА ===== */
.stats-chart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
text-align: center;
gap: 8px;
}
.stats-chart-empty-icon {
font-size: 32px;
color: #C7CEDB;
}
.stats-chart-empty-text {
font-size: 13px;
color: #9AA3B2;
font-weight: 500;
}
}
/* ============================================================
ФИКС C6: скрыть старые .stats-summary на мобильных
============================================================ */
@media (max-width: 1023px) {
.stats-summary {
display: none !important;
}
}
/* ============================================================
ИТЕРАЦИЯ 25.4: компактная карточка статистики (внутри form-row)
============================================================ */
@media (max-width: 1023px) {
/* Компактная версия главной карточки статистики (внутри form-row) */
.stat-main-card-compact {
padding: 16px;
margin-bottom: 0;
border-radius: 16px;
box-shadow: none;
}
.stat-main-card-compact .stat-circle-wrap {
gap: 16px;
}
.stat-main-card-compact .stat-circle {
width: 88px;
height: 88px;
}
.stat-main-card-compact .stat-circle-percent {
font-size: 22px;
}
.stat-main-card-compact .stat-circle-label {
font-size: 9px;
}
.stat-main-card-compact .stat-meta-value {
font-size: 15px;
}
.stat-main-card-compact .stat-meta-label {
font-size: 10px;
}
.stat-main-card-compact .stat-meta-list {
gap: 8px;
}
/* Статистика в модалке задачи — на всю ширину */
.form-row[data-row="stats"] .form-row-content {
padding-left: 0;
padding-right: 0;
padding-bottom: 12px;
}
.form-row[data-row="stats"] .form-row-content .stat-main-card-compact {
margin: 0 14px 12px;
width: calc(100% - 28px);
}
.form-row[data-row="stats"] .form-row-content .subtask-add-btn {
margin: 0 14px;
width: calc(100% - 28px);
}
}
/* ============================================================
ИТЕРАЦИЯ 26: Дружелюбная модалка подтверждения
============================================================ */
/* Логотип iSticker вместо иконки warning */
.confirm-icon.has-logo {
background: transparent;
padding: 0;
}
.confirm-icon.has-logo img {
width: 56px;
height: 56px;
display: block;
border-radius: 14px;
filter: drop-shadow(0 4px 12px rgba(255, 193, 7, 0.25));
}
/* Нейтральный фон для info-иконок */
.confirm-icon.icon-info {
background: #E8F0FE;
}
.confirm-icon.icon-info .ph {
color: #2F6BFF;
}
/* Дружелюбный стиль для warning — жёлтый, не красный */
.confirm-icon.icon-warning-friendly {
background: #FFF8E1;
}
.confirm-icon.icon-warning-friendly .ph {
color: #F59E0B;
}
/* ============================================================
КРУГ СТАТИСТИКИ — базовые стили (работают и на ПК, и на мобильных)
============================================================ */
.stat-circle-wrap {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
}
.stat-circle {
position: relative;
width: 100px;
height: 100px;
flex-shrink: 0;
}
.stat-circle svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
display: block;
}
.stat-circle-track {
fill: none;
stroke: rgba(255, 255, 255, 0.20);
stroke-width: 7;
}
.stat-circle-fill {
fill: none;
stroke: #FFFFFF;
stroke-width: 7;
stroke-linecap: round;
transition: stroke-dasharray 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-circle-value {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #FFFFFF;
pointer-events: none;
}
.stat-circle-percent {
font-size: 24px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.5px;
}
.stat-circle-label {
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.85;
margin-top: 3px;
}
/* Главная карточка с кругом — базовый стиль */
.stat-main-card {
background: linear-gradient(135deg, #2F6BFF 0%, #1B44A8 100%);
color: #FFFFFF;
border-radius: 20px;
padding: 20px;
margin-bottom: 14px;
display: flex;
align-items: center;
box-shadow: 0 8px 24px rgba(47, 107, 255, 0.20);
}
/* Метрики справа */
.stat-meta-list {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.stat-meta-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.stat-meta-value {
font-size: 16px;
font-weight: 700;
line-height: 1.1;
color: #FFFFFF;
font-variant-numeric: tabular-nums;
}
.stat-meta-value .ph {
font-size: 14px;
margin-right: 4px;
opacity: 0.9;
}
.stat-meta-label {
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
line-height: 1.3;
}
/* Компактная версия — для модалки задачи */
.stat-main-card-compact {
padding: 16px;
margin-bottom: 0;
border-radius: 16px;
box-shadow: none;
}
.stat-main-card-compact .stat-circle {
width: 88px;
height: 88px;
}
.stat-main-card-compact .stat-circle-percent {
font-size: 22px;
}
.stat-main-card-compact .stat-circle-label {
font-size: 9px;
}
.stat-main-card-compact .stat-meta-value {
font-size: 15px;
}
.stat-main-card-compact .stat-meta-label {
font-size: 10px;
}
.stat-main-card-compact .stat-meta-list {
gap: 8px;
}
/* ============================================================
Pill-табы на ПК — как было
============================================================ */
@media (min-width: 1024px) {
.stats-periods {
display: flex;
gap: 4px;
background: #F5F7FA;
padding: 4px;
border-radius: 8px;
margin-bottom: 20px;
/* Убираем горизонтальный скролл для ПК */
overflow: visible;
flex-wrap: wrap;
}
.period-btn {
flex: 1;
padding: 8px 12px;
background: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: #5A6270;
box-shadow: none;
text-align: center;
flex-shrink: 1;
}
.period-btn:hover {
background: #EEF1F6;
color: #1A1D23;
}
.period-btn.active {
background: #FFFFFF;
color: #1A1D23;
box-shadow: var(--shadow);
}
}
/* ============================================================
ПК: короткая статистика в модалке задачи — на всю ширину
============================================================ */
@media (min-width: 1024px) {
/* Внутри form-row-content — карточка без дополнительных ограничений */
.form-row[data-row="stats"] .form-row-content .stat-main-card {
margin: 0;
width: 100%;
box-sizing: border-box;
}
/* Кнопка "Подробная статистика" — тоже на всю ширину */
.form-row[data-row="stats"] .form-row-content .subtask-add-btn {
margin: 0;
width: 100%;
box-sizing: border-box;
}
/* form-row-content без боковых отступов на ПК */
.form-row-content {
padding-left: 0;
padding-right: 0;
}
}
/* ============================================================
Мобильные: скрыть планы на неделю (только для ПК)
============================================================ */
@media (max-width: 1023px) {
.week-plans {
display: none !important;
}
}
/* ============================================================
ИТЕРАЦИЯ 29: Минималистичная модалка подтверждения
============================================================ */
.modal-confirm {
width: 340px;
max-width: calc(100vw - 32px);
padding: 32px 24px 20px;
text-align: center;
background: #FFFFFF;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(20, 30, 60, 0.15);
}
/* ===== Иконка / Логотип ===== */
.confirm-icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
width: 44px;
height: 44px;
}
.confirm-icon img {
width: 44px;
height: 44px;
display: block;
border-radius: 10px;
}
.confirm-icon .ph {
font-size: 28px;
color: #F59E0B;
}
/* Скрываем/показываем через JS:
- id="confirmIconImg" — логотип
- id="confirmIconPh" — Phosphor-иконка */
/* Убираем старые фоны .icon-warning / .icon-info / .has-logo */
.confirm-icon.has-logo,
.confirm-icon.icon-warning,
.confirm-icon.icon-info,
.confirm-icon.icon-warning-friendly {
background: transparent;
border-radius: 0;
}
/* ===== Заголовок ===== */
.confirm-title {
font-size: 18px;
font-weight: 600;
color: #1A1D23;
line-height: 1.3;
margin: 0 0 8px;
text-align: center;
}
/* ===== Сообщение ===== */
.confirm-message {
font-size: 15px;
font-weight: 400;
color: #5A6270;
line-height: 1.45;
margin: 0 0 24px;
text-align: center;
}
.confirm-message:empty {
display: none;
margin: 0;
}
/* ===== Кнопки ===== */
.confirm-actions {
display: flex;
gap: 10px;
margin-top: 8px;
}
.confirm-btn {
flex: 1;
height: 46px;
padding: 0 16px;
border: none;
border-radius: 12px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
outline: none;
transition: background 0.15s ease, transform 0.1s ease;
}
.confirm-btn:active {
transform: scale(0.97);
}
/* Отмена — нейтральная */
.confirm-btn-cancel {
background: #F5F7FA;
color: #5A6270;
}
.confirm-btn-cancel:hover {
background: #EEF1F6;
color: #1A1D23;
}
/* Основная (удалить / подтвердить) — мягкая, не кричащая */
.confirm-btn-ok {
background: #FDE8E8;
color: #C0392B;
}
.confirm-btn-ok:hover {
background: #FBD5D5;
color: #A93226;
}
/* Если okStyle = primary (для info-модалок, например logout) */
.confirm-btn-ok.is-primary {
background: #E8F0FE;
color: #2F6BFF;
}
.confirm-btn-ok.is-primary:hover {
background: #DCE7FF;
color: #1B44A8;
}
/* ==================== МОБИЛЬНЫЕ ==================== */
@media (max-width: 1023px) {
.modal-confirm {
width: calc(100% - 32px);
max-width: 400px;
border-radius: 20px;
padding: 28px 20px 18px;
}
.confirm-title {
font-size: 17px;
}
.confirm-message {
font-size: 14px;
margin-bottom: 20px;
}
.confirm-btn {
height: 48px;
}
}
/* Название задачи в модалке планирования — две строки */
.duration-modal-parent {
font-size: 12px;
color: #9AA3B2;
font-weight: 500;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.duration-modal-main {
font-size: 15px;
color: #1A1D23;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ============================================================
ИТЕРАЦИЯ 32: Подзадача на ленте времени
============================================================ */
.timeline-task.timeline-task-subtask {
background: linear-gradient(135deg, #E8F0FE 0%, #DCE7FF 100%);
color: #1B44A8;
border: 1px solid #C7D8FF;
box-shadow: 0 1px 3px rgba(47, 107, 255, 0.10);
padding: 6px 10px;
}
.timeline-task.timeline-task-subtask:hover {
background: linear-gradient(135deg, #DCE7FF 0%, #CFDBFF 100%);
border-color: #ADC6FF;
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.18);
}
.timeline-task.timeline-task-subtask.completed {
background: #E6F7EE;
color: #1E7A4A;
border-color: #B7E4C7;
opacity: 0.85;
}
/* Название родительской задачи — мелко, бледно */
.timeline-task-parent {
font-size: 10px;
font-weight: 500;
opacity: 0.7;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 1px;
text-decoration: none;
}
/* Название подзадачи — крупнее */
.timeline-task-subtask .timeline-task-title {
font-size: 12px;
font-weight: 600;
margin-bottom: 1px;
}
/* Подсветка drag для подзадачи */
.timeline-task-subtask.dragging {
background: linear-gradient(135deg, #4A85FF 0%, #2F6BFF 100%);
color: #FFFFFF;
box-shadow:
0 0 0 2px #2F6BFF,
0 12px 32px rgba(47, 107, 255, 0.35);
transform: scale(1.03);
}
.timeline-task-subtask.dragging .timeline-task-parent {
color: rgba(255, 255, 255, 0.85);
opacity: 0.9;
}
/* На мобильных — чуть компактнее */
@media (max-width: 1023px) {
.timeline-task.timeline-task-subtask {
padding: 5px 8px;
}
.timeline-task-parent {
font-size: 9px;
}
.timeline-task-subtask .timeline-task-title {
font-size: 11px;
}
}
/* ============================================================
ИТЕРАЦИЯ 33: Восстановление и смена пароля
============================================================ */
/* Обёртка поля с иконкой-глазом */
.auth-password-wrap {
position: relative;
width: 100%;
margin-bottom: 8px;
}
.auth-password-wrap .auth-input {
margin-bottom: 0;
padding-right: 44px;
}
/* Кнопка-глаз */
.auth-eye {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
padding: 0;
border: none;
background: transparent;
border-radius: 8px;
color: #9AA3B2;
font-size: 18px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
outline: none;
transition: background 0.15s ease, color 0.15s ease;
}
.auth-eye:hover,
.auth-eye:active {
background: #F5F7FA;
color: #1A1D23;
}
.auth-eye .ph {
font-size: 18px;
}
/* Ссылка "Забыли пароль?" */
.auth-forgot-link {
display: block;
width: 100%;
margin-top: 12px;
padding: 8px 0;
background: transparent;
border: none;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: #2F6BFF;
text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color 0.15s ease;
}
.auth-forgot-link:hover,
.auth-forgot-link:active {
color: #1B44A8;
text-decoration: underline;
}
/* Текст-подсказка в модалках восстановления */
.forgot-password-hint {
font-size: 14px;
color: #5A6270;
line-height: 1.5;
text-align: left;
margin: 0 0 16px;
padding: 0;
}
/* Кнопка на всю ширину */
.btn-full {
width: 100%;
height: 48px;
font-size: 15px;
font-weight: 600;
border-radius: 12px;
margin-top: 8px;
}
/* ===== Список настроек ===== */
.settings-list {
display: flex;
flex-direction: column;
gap: 2px;
margin: 8px 0 0;
}
.settings-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 14px 12px;
background: transparent;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: 15px;
font-weight: 500;
color: #1A1D23;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
outline: none;
transition: background 0.15s ease;
}
.settings-item:hover:not(:disabled),
.settings-item:active:not(:disabled) {
background: #F5F7FA;
}
.settings-item .ph:first-child {
font-size: 20px;
color: #9AA3B2;
flex-shrink: 0;
width: 22px;
text-align: center;
}
.settings-item .ph:last-child {
margin-left: auto;
font-size: 16px;
color: #C7CEDB;
}
.settings-item-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.settings-badge {
margin-left: auto;
padding: 2px 8px;
background: #E8F0FE;
color: #2F6BFF;
font-size: 11px;
font-weight: 600;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
@media (max-width: 1023px) {
.auth-eye {
width: 40px;
height: 40px;
right: 4px;
}
.auth-eye .ph {
font-size: 20px;
}
.btn-full {
height: 52px;
font-size: 16px;
}
}
/* ============================================================
ИТЕРАЦИЯ 34: Подсветка после клика по уведомлению
============================================================ */
.task-item.highlighted,
.timeline-task.highlighted {
animation: highlightPulse 2s ease-in-out 2;
z-index: 50;
}
@keyframes highlightPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(47, 107, 255, 0);
}
50% {
box-shadow: 0 0 0 8px rgba(47, 107, 255, 0.35),
0 0 24px rgba(47, 107, 255, 0.4);
}
}
/* ============================================================
ИТЕРАЦИЯ 37: Настройки уведомлений
============================================================ */
/* Переключатель (switch) */
.settings-switch {
position: relative;
display: inline-block;
width: 44px;
height: 26px;
flex-shrink: 0;
margin-left: auto;
}
.settings-switch input {
opacity: 0;
width: 0;
height: 0;
}
.settings-switch-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: #E5E9F0;
border-radius: 999px;
transition: background 0.2s ease;
}
.settings-switch-slider::before {
content: '';
position: absolute;
left: 3px;
top: 3px;
width: 20px;
height: 20px;
background: #FFFFFF;
border-radius: 50%;
transition: transform 0.2s ease;
box-shadow: 0 1px 3px rgba(20, 30, 60, 0.15);
}
.settings-switch input:checked + .settings-switch-slider {
background: #2F6BFF;
}
.settings-switch input:checked + .settings-switch-slider::before {
transform: translateX(18px);
}
/* Настройка с toggle — не кликается целиком */
.settings-item-toggle {
cursor: default;
}
.settings-item-toggle > span:first-of-type {
flex: 1;
}
/* Настройка с select */
.settings-item-select {
cursor: default;
}
.settings-item-select > span:first-of-type {
flex: 1;
}
.settings-select {
padding: 6px 28px 6px 10px;
background: #F5F7FA;
border: 1px solid #E5E9F0;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: #1A1D23;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
outline: none;
margin-left: auto;
}
/* Блок "Тихие часы" */
.quiet-hours-block {
padding: 12px 14px;
background: #F5F7FA;
border-radius: 10px;
margin: 4px 0 8px;
}
.quiet-hours-row {
display: flex;
align-items: center;
gap: 8px;
}
.quiet-hours-label {
font-size: 14px;
font-weight: 500;
color: #5A6270;
flex-shrink: 0;
}
.quiet-hours-input {
flex: 1;
margin-bottom: 0 !important;
padding: 8px 12px;
text-align: center;
font-size: 14px;
font-weight: 600;
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 8px;
}
.quiet-hours-hint {
margin: 8px 0 0;
font-size: 12px;
color: #9AA3B2;
text-align: center;
}
/* Блок разрешения */
.push-permission-block {
padding: 14px;
background: #FFF8E1;
border: 1px solid #FFE88A;
border-radius: 12px;
margin-bottom: 12px;
}
.push-permission-hint {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: #5D4037;
margin-bottom: 12px;
line-height: 1.4;
}
.push-permission-hint .ph {
font-size: 18px;
color: #F59E0B;
flex-shrink: 0;
}
/* Кнопка "Тестовое уведомление" */
#testPushBtn .ph {
font-size: 16px;
margin-right: 6px;
}
/* Скрытие блока настроек, если нет разрешения */
#pushSettingsList {
margin-top: 8px;
}
/* ============================================================
Выбор типа задачи в модалке создания
============================================================ */
.type-options {
display: flex;
flex-direction: column;
gap: 6px;
padding: 4px 0;
}
.type-option {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
background: #F5F7FA;
border: 1px solid #E5E9F0;
border-radius: 10px;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: #1A1D23;
text-align: left;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.type-option .ph {
font-size: 16px;
color: #9AA3B2;
flex-shrink: 0;
}
.type-option:hover {
background: #EEF1F6;
}
.type-option.active {
background: #E8F0FE;
border-color: #ADC6FF;
color: #1B44A8;
}
.type-option.active .ph {
color: #2F6BFF;
}
/* ===== Поповер выбора типа задачи (для ПК) ===== */
.task-type-popover {
position: fixed;
z-index: 1200;
min-width: 220px;
background: #FFFFFF;
border: 1px solid #E5E9F0;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(20, 30, 60, 0.10);
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
animation: taskTypePopoverIn 0.15s ease;
}
@keyframes taskTypePopoverIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.task-type-popover .type-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
background: transparent;
border: none;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: #1A1D23;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.task-type-popover .type-option:hover {
background: #F5F7FA;
}
.task-type-popover .type-option i {
font-size: 16px;
color: #9AA3B2;
flex-shrink: 0;
}