173 lines
9.7 KiB
CSS
173 lines
9.7 KiB
CSS
/* ===== Семейный таск-менеджер — стили (без Tailwind CDN) ===== */
|
|
:root{
|
|
--ink:#0F1218; --accent:#00E5FF; --accent-50:#E8FCFF;
|
|
--muted:#5B6573; --line:#F2F4F7; --white:#fff;
|
|
--amber-50:#fffbeb; --amber-100:#fef3c7; --amber-600:#d97706; --amber-700:#b45309;
|
|
--emerald-100:#d1fae5; --emerald-600:#059669; --emerald-700:#047857;
|
|
--sky-100:#e0f2fe; --sky-700:#0369a1;
|
|
--gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-600:#4b5563;
|
|
--red-50:#fef2f2; --red-100:#fee2e2; --red-600:#dc2626; --red-700:#b91c1c;
|
|
}
|
|
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--line)}
|
|
|
|
/* ---------- компоненты ---------- */
|
|
.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;border:none;cursor:pointer;transition:filter .15s;display:inline-block;text-align:center}
|
|
.btn-primary:hover{filter:brightness(1.06)}
|
|
.btn-primary:active{filter:brightness(.94)}
|
|
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
|
|
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line);padding:9px 18px;border-radius:8px;font-weight:600;cursor:pointer}
|
|
.btn-ghost:hover{background:var(--line)}
|
|
.btn-danger{background:#fee2e2;color:#b91c1c;padding:11px 18px;border-radius:8px;font-weight:700;border:none;cursor:pointer}
|
|
.btn-danger:hover{background:#fecaca}
|
|
|
|
.navtab{white-space:nowrap;padding:10px 14px;font-size:14px;font-weight:600;color:rgba(255,255,255,.5);border:none;background:none;border-bottom:3px solid transparent;cursor:pointer;transition:.15s;font-family:inherit}
|
|
.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;line-height:1}
|
|
|
|
.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;display:inline-block}
|
|
|
|
.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:15px;cursor:pointer;transition:.15s;font-family:inherit;color:var(--ink)}
|
|
.iconbtn:hover{background:var(--line)}
|
|
.iconbtn.primary{background:var(--accent);border-color:var(--accent)}
|
|
.iconbtn:disabled{opacity:.5;cursor:not-allowed}
|
|
|
|
.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}
|
|
|
|
/* ---------- утилиты (вместо Tailwind) ---------- */
|
|
.hidden{display:none!important}
|
|
.block{display:block}
|
|
.flex{display:flex}
|
|
.inline-flex{display:inline-flex}
|
|
.grid{display:grid}
|
|
.flex-1{flex:1 1 0%}
|
|
.flex-col{flex-direction:column}
|
|
.flex-wrap{flex-wrap:wrap}
|
|
.items-center{align-items:center}
|
|
.items-start{align-items:flex-start}
|
|
.items-end{align-items:flex-end}
|
|
.justify-center{justify-content:center}
|
|
.justify-between{justify-content:space-between}
|
|
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
|
|
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
|
|
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
|
|
.space-y-1>*+*{margin-top:.25rem}
|
|
.space-y-2>*+*{margin-top:.5rem}
|
|
.space-y-3>*+*{margin-top:.75rem}
|
|
.space-y-4>*+*{margin-top:1rem}
|
|
.min-h-screen{min-height:100vh}
|
|
.min-w-0{min-width:0}
|
|
.w-full{width:100%}.w-60{width:15rem}.w-8{width:2rem}.w-9{width:2.25rem}
|
|
.h-8{height:2rem}.h-9{height:2.25rem}
|
|
.max-w-6xl{max-width:72rem}.max-w-lg{max-width:32rem}.max-w-xs{max-width:20rem}
|
|
.max-w-\[90px\]{max-width:90px}
|
|
.max-h-72{max-height:18rem}.max-h-\[92vh\]{max-height:92vh}
|
|
.mx-auto{margin-left:auto;margin-right:auto}
|
|
.ml-auto{margin-left:auto}
|
|
.mb-1{margin-bottom:.25rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}
|
|
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}
|
|
.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-7{padding:1.75rem}
|
|
.px-2{padding-left:.5rem;padding-right:.5rem}
|
|
.px-3{padding-left:.75rem;padding-right:.75rem}
|
|
.px-4{padding-left:1rem;padding-right:1rem}
|
|
.px-5{padding-left:1.25rem;padding-right:1.25rem}
|
|
.py-1{padding-top:.25rem;padding-bottom:.25rem}
|
|
.py-2{padding-top:.5rem;padding-bottom:.5rem}
|
|
.py-3{padding-top:.75rem;padding-bottom:.75rem}
|
|
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
|
|
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
|
|
.pt-1{padding-top:.25rem}.pt-3{padding-top:.75rem}
|
|
.pl-1{padding-left:.25rem}.pr-3{padding-right:.75rem}
|
|
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
|
|
.top-0{top:0}.bottom-0{bottom:0}.bottom-5{bottom:1.25rem}.right-0{right:0}.left-1\/2{left:50%}
|
|
.inset-0{top:0;right:0;bottom:0;left:0}
|
|
.-translate-x-1\/2{transform:translateX(-50%)}
|
|
.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}
|
|
.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}
|
|
.rounded-lg{border-radius:8px}.rounded-xl{border-radius:12px}.rounded-2xl{border-radius:16px}
|
|
.rounded-t-2xl{border-radius:16px 16px 0 0}.rounded-full{border-radius:9999px}
|
|
.shadow-xl{box-shadow:0 10px 30px rgba(15,18,24,.12)}
|
|
.shadow-2xl{box-shadow:0 20px 50px rgba(15,18,24,.25)}
|
|
.border{border:1px solid var(--line)}.border-t{border-top:1px solid var(--line)}.border-b{border-bottom:1px solid var(--line)}.border-line{border-color:var(--line)}
|
|
.text-2xl{font-size:24px}.text-5xl{font-size:48px}.text-xl{font-size:20px}.text-lg{font-size:18px}
|
|
.text-base{font-size:16px}.text-sm{font-size:14px}.text-xs{font-size:12px}.text-\[11px\]{font-size:11px}
|
|
.font-sans{font-family:inherit}
|
|
.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
|
|
.leading-tight{line-height:1.1}.leading-none{line-height:1}
|
|
.text-center{text-align:center}.text-left{text-align:left}
|
|
.capitalize{text-transform:capitalize}
|
|
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.underline{text-decoration:underline}
|
|
.opacity-60{opacity:.6}
|
|
.transition{transition:.15s}
|
|
|
|
/* цвета текста */
|
|
.text-ink{color:var(--ink)}.text-muted{color:var(--muted)}.text-white{color:#fff}
|
|
.text-amber-600{color:var(--amber-600)}.text-emerald-600{color:var(--emerald-600)}
|
|
.text-red-600{color:var(--red-600)}.text-gray-300{color:var(--gray-300)}.text-gray-600{color:var(--gray-600)}
|
|
.text-amber-700{color:var(--amber-700)}.text-emerald-700{color:var(--emerald-700)}.text-sky-700{color:var(--sky-700)}.text-red-700{color:var(--red-700)}
|
|
.text-white\/50{color:rgba(255,255,255,.5)}.text-white\/60{color:rgba(255,255,255,.6)}.text-white\/80{color:rgba(255,255,255,.8)}
|
|
|
|
/* цвета фона */
|
|
.bg-ink{background:var(--ink)}.bg-white{background:#fff}.bg-line{background:var(--line)}.bg-accent-50{background:var(--accent-50)}
|
|
.bg-black\/50{background:rgba(0,0,0,.5)}.bg-white\/10{background:rgba(255,255,255,.1)}.bg-white\/20{background:rgba(255,255,255,.2)}
|
|
.bg-amber-50{background:var(--amber-50)}.bg-amber-100{background:var(--amber-100)}
|
|
.bg-emerald-100{background:var(--emerald-100)}.bg-sky-100{background:var(--sky-100)}
|
|
.bg-gray-100{background:var(--gray-100)}.bg-gray-200{background:var(--gray-200)}
|
|
.bg-red-50{background:var(--red-50)}.bg-red-100{background:var(--red-100)}
|
|
|
|
/* hover */
|
|
.hover\:bg-line:hover{background:var(--line)}
|
|
.hover\:bg-white\/20:hover{background:rgba(255,255,255,.2)}
|
|
.hover\:text-ink:hover{color:var(--ink)}
|
|
|
|
/* important-override */
|
|
.\!w-auto{width:auto!important}
|
|
.\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
|
|
.\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}
|
|
|
|
/* адаптив (sm: 640px+) */
|
|
@media(min-width:640px){
|
|
.sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
|
|
.sm\:hidden{display:none!important}
|
|
.sm\:inline-flex{display:inline-flex}
|
|
.sm\:items-center{align-items:center}
|
|
.sm\:max-w-lg{max-width:32rem}
|
|
.sm\:p-4{padding:1rem}
|
|
.sm\:rounded-2xl{border-radius:16px}
|
|
}
|