diff --git a/index.html b/index.html index d77a4ef..94f1de4 100644 --- a/index.html +++ b/index.html @@ -4,24 +4,13 @@ Семейные задачи - diff --git a/style.css b/style.css index 37d10a4..331f518 100644 --- a/style.css +++ b/style.css @@ -1,25 +1,37 @@ -:root{--ink:#0F1218;--accent:#00E5FF;--accent-50:#E8FCFF;--muted:#5B6573;--line:#F2F4F7} +/* ===== Семейный таск-менеджер — стили (без 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} +*{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;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-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} +.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:#ffffff80;border-bottom:3px solid transparent;transition:.15s} +.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} +.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} @@ -29,13 +41,13 @@ textarea.field{resize:vertical} .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} +.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:16px;transition:.15s} +.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} @@ -55,3 +67,106 @@ textarea.field{resize:vertical} ::-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} +}