58 lines
3.4 KiB
CSS
58 lines
3.4 KiB
CSS
:root{--ink:#0F1218;--accent:#00E5FF;--accent-50:#E8FCFF;--muted:#5B6573;--line:#F2F4F7}
|
|
|
|
*{box-sizing:border-box}
|
|
.field{width:100%;border:2px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink);outline:none;transition:border .15s}
|
|
.field:focus{border-color:var(--accent)}
|
|
textarea.field{resize:vertical}
|
|
|
|
.btn-primary{background:var(--accent);color:var(--ink);padding:11px 20px;border-radius:8px;font-weight:700;transition:filter .15s}
|
|
.btn-primary:hover{filter:brightness(1.05)}
|
|
.btn-primary:active{filter:brightness(.95)}
|
|
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line);padding:9px 18px;border-radius:8px;font-weight:600}
|
|
.btn-ghost:hover{background:var(--line)}
|
|
.btn-danger{background:#fee2e2;color:#b91c1c;padding:11px 18px;border-radius:8px;font-weight:700}
|
|
.btn-danger:hover{background:#fecaca}
|
|
|
|
.navtab{white-space:nowrap;padding:10px 14px;font-size:14px;font-weight:600;color:#ffffff80;border-bottom:3px solid transparent;transition:.15s}
|
|
.navtab:hover{color:#fff}
|
|
.navtab.active{color:var(--accent);border-bottom-color:var(--accent)}
|
|
|
|
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:800;color:#fff;user-select:none;flex-shrink:0}
|
|
|
|
/* карточка задачи */
|
|
.task{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:box-shadow .15s,border-color .15s}
|
|
.task:hover{box-shadow:0 6px 20px rgba(15,18,24,.07)}
|
|
.task.done{opacity:.6}
|
|
.task.done .t-title{text-decoration:line-through}
|
|
.task.cancelled{opacity:.5}
|
|
.task.cancelled .t-title{text-decoration:line-through}
|
|
.task.overdue:not(.done):not(.cancelled){border-color:#fca5a5;box-shadow:0 0 0 1px #fca5a5 inset}
|
|
|
|
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
|
|
.badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.02em}
|
|
|
|
.iconbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:16px;transition:.15s}
|
|
.iconbtn:hover{background:var(--line)}
|
|
.iconbtn.primary{background:var(--accent);border-color:var(--accent)}
|
|
|
|
/* календарь */
|
|
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
|
|
.cal-dow{text-align:center;font-size:12px;font-weight:700;color:var(--muted);padding:6px 0}
|
|
.cal-day{min-height:96px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;overflow:hidden}
|
|
.cal-day.off{background:#fafbfc;color:#c2c8d2}
|
|
.cal-day.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-50) inset}
|
|
.cal-dnum{font-size:12px;font-weight:700;margin-bottom:4px}
|
|
.cal-task{font-size:11px;font-weight:600;border-radius:5px;padding:2px 5px;margin-bottom:3px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
|
|
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
|
|
.empty .big{font-size:48px;margin-bottom:8px}
|
|
|
|
.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
|
|
|
|
.menu-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:.12s}
|
|
.menu-row:hover{background:var(--line)}
|
|
.menu-row.active{background:var(--accent-50)}
|
|
|
|
::-webkit-scrollbar{width:10px;height:10px}
|
|
::-webkit-scrollbar-thumb{background:#d6dbe2;border-radius:10px}
|