/* ============================================================ Todo-Life Dashboard — Custom Styles Light / Dark mode via .dark class on . ============================================================ */ /* ── CSS Variables — Light ── */ :root { --bg-page: #e0e7ff; /* indigo-100 */ --bg-page-mid: #f0f9ff; /* sky-50 */ --bg-page-end: #ecfdf5; /* emerald-50 */ --bg-card: #ffffff; --bg-input: #f8fafc; --bg-input-focus: #ffffff; --bg-task: #f8fafc; --bg-task-hover: #f1f5f9; --bg-task-done: #f0fdf4; --bg-header: #ffffff; --navbar-solid: rgba(255,255,255,0.92); --footer-bg: rgba(255,255,255,0.88); --border: #e2e8f0; --border-hover: #cbd5e1; --border-done: #bbf7d0; --border-focus: #3b82f6; --text-base: #1e293b; --text-task: #334155; --text-muted: #64748b; --text-faint: #94a3b8; --text-done: #94a3b8; --text-title: #475569; --text-heading: #1e293b; --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06); --shadow-card-hv: 0 2px 6px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.08); --btn-slate-bg: #e2e8f0; --btn-slate-text: #475569; --btn-slate-hv: #cbd5e1; --link-btn-bg: #eff6ff; --link-btn-text: #2563eb; --link-btn-bdr: #bfdbfe; --link-btn-hv: #dbeafe; --link-btn-hv-bdr:#93c5fd; --toast-bg: #1e293b; } /* ── CSS Variables — Dark ── */ html.dark { --bg-page: #0f172a; /* slate-900 */ --bg-page-mid: #1a1035; /* deep indigo */ --bg-page-end: #0d2137; /* deep blue */ --bg-card: #1e293b; --bg-input: #0f172a; --bg-input-focus: #1e293b; --bg-task: #0f172a; --bg-task-hover: #1e293b; --bg-task-done: #052e16; --bg-header: #1e293b; --navbar-solid: rgba(15,23,42,0.92); --footer-bg: rgba(15,23,42,0.92); --border: #334155; --border-hover: #475569; --border-done: #166534; --border-focus: #60a5fa; --text-base: #e2e8f0; --text-task: #cbd5e1; --text-muted: #94a3b8; --text-faint: #64748b; --text-done: #64748b; --text-title: #94a3b8; --text-heading: #f1f5f9; --shadow-card: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); --shadow-card-hv: 0 2px 6px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3); --btn-slate-bg: #334155; --btn-slate-text: #cbd5e1; --btn-slate-hv: #475569; --link-btn-bg: #1e3a5f; --link-btn-text: #93c5fd; --link-btn-bdr: #1d4ed8; --link-btn-hv: #1e40af; --link-btn-hv-bdr:#3b82f6; --toast-bg: #334155; } /* ── Base ── */ body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 16px; color: var(--text-base); /* Rich gradient page background */ background: linear-gradient(135deg, var(--bg-page) 0%, var(--bg-page-mid) 50%, var(--bg-page-end) 100%); background-attachment: fixed; min-height: 100vh; transition: background 0.3s ease, color 0.3s ease; } /* ── Navbar ── */ /* Default (not scrolled): transparent background, no shadow. .scrolled (added by JS on scroll): solid gradient background + shadow. */ .navbar { /* transparent when at top */ background: transparent; box-shadow: none; color: var(--text-heading); backdrop-filter: none; -webkit-backdrop-filter: none; transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease; } .navbar.scrolled { background: var(--navbar-solid); box-shadow: 0 2px 12px rgba(0,0,0,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ── Footer ── */ .footer { background: var(--footer-bg); border-top: 1px solid var(--border); color: var(--text-muted); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ── Card ── */ .card { background: var(--bg-card); border-radius: 1rem; box-shadow: var(--shadow-card); padding: 1.5rem; transition: box-shadow 0.2s ease, background 0.3s ease; } .card:hover { box-shadow: var(--shadow-card-hv); } /* ── Section title ── */ .section-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; color: var(--text-title); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; } /* ── Muted text helper ── */ .muted { color: var(--text-muted); } /* ── Input ── */ .input { border: 1.5px solid var(--border); border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.9375rem; color: var(--text-base); background: var(--bg-input); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.3s ease; min-width: 0; } .input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(59,130,246,.15); background: var(--bg-input-focus); } .input::placeholder { color: var(--text-faint); } /* Select inherits .input */ select.input { cursor: pointer; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } .btn-blue { background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,.30); } .btn-blue:hover { background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); box-shadow: 0 4px 14px rgba(99,102,241,.42); } .btn-green { background: linear-gradient(135deg, #22c55e 0%, #10b981 100%); color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,.30); } .btn-green:hover { background: linear-gradient(135deg, #16a34a 0%, #059669 100%); box-shadow: 0 4px 14px rgba(16,185,129,.42); } .btn-amber { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); color: #fff; box-shadow: 0 2px 8px rgba(249,115,22,.30); } .btn-amber:hover { background: linear-gradient(135deg, #d97706 0%, #ea580c 100%); box-shadow: 0 4px 14px rgba(249,115,22,.42); } .btn-slate { background: var(--btn-slate-bg); color: var(--btn-slate-text); } .btn-slate:hover { background: var(--btn-slate-hv); } /* ── Icon buttons ── */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.375rem; border: none; cursor: pointer; font-size: 0.875rem; transition: background-color 0.15s ease, transform 0.1s ease; flex-shrink: 0; } .btn-icon:active { transform: scale(0.93); } .btn-icon:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } .btn-icon-edit { background: #eff6ff; color: #3b82f6; } .btn-icon-edit:hover { background: #dbeafe; } .btn-icon-delete { background: #fff1f2; color: #f43f5e; } .btn-icon-delete:hover { background: #ffe4e6; } .btn-icon-check { background: #f0fdf4; color: #22c55e; border: 1.5px solid #bbf7d0; } .btn-icon-check:hover { background: #dcfce7; } .btn-icon-check.checked { background: #22c55e; color: #fff; border-color: #22c55e; } /* Dark overrides for icon buttons */ html.dark .btn-icon-edit { background: #1e3a5f; color: #93c5fd; } html.dark .btn-icon-edit:hover { background: #1e40af; } html.dark .btn-icon-delete { background: #3b0a14; color: #fb7185; } html.dark .btn-icon-delete:hover { background: #4c0519; } html.dark .btn-icon-check { background: #052e16; color: #4ade80; border-color: #166534; } html.dark .btn-icon-check:hover { background: #14532d; } /* Theme toggle button */ .btn-icon-theme { background: transparent; color: var(--text-muted); font-size: 1rem; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; } .btn-icon-theme:hover { background: var(--bg-task); } /* ── Task item ── */ .task-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 0.625rem; background: var(--bg-task); border: 1.5px solid var(--border); transition: border-color 0.15s ease, background 0.15s ease; } .task-item:hover { border-color: var(--border-hover); background: var(--bg-task-hover); } .task-item.completed { background: var(--bg-task-done); border-color: var(--border-done); } .task-text { flex: 1; font-size: 0.9375rem; color: var(--text-task); word-break: break-word; min-width: 0; } .task-text.line-through { text-decoration: line-through; color: var(--text-done); } .task-edit-input { flex: 1; border: 1.5px solid var(--border-focus); border-radius: 0.375rem; padding: 0.25rem 0.5rem; font-size: 0.9375rem; color: var(--text-base); background: var(--bg-input-focus); outline: none; min-width: 0; } /* ── Quick link button ── */ .link-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.875rem; border-radius: 9999px; background: var(--link-btn-bg); color: var(--link-btn-text); font-size: 0.875rem; font-weight: 500; border: 1.5px solid var(--link-btn-bdr); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; position: relative; } .link-btn:hover { background: var(--link-btn-hv); border-color: var(--link-btn-hv-bdr); } .link-btn:active { transform: scale(0.96); } .link-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } .link-delete-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; border-radius: 9999px; background: #f43f5e; color: #fff; font-size: 0.625rem; border: none; cursor: pointer; margin-left: 0.125rem; transition: background-color 0.15s ease; flex-shrink: 0; } .link-delete-btn:hover { background: #e11d48; } /* ── Placeholder ── */ .placeholder-msg { color: var(--text-faint); font-size: 0.875rem; text-align: center; padding: 1.5rem 0; font-style: italic; } /* ── Toast ── */ .toast-bg { background: var(--toast-bg); color: #fff; } .toast-header { background: rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.10); } #toast { transform: translateX(1rem); } #toast.show { opacity: 1; pointer-events: auto; transform: translateX(0); } /* ── Timer status ── */ #timer-status { font-size: 0.75rem; color: var(--text-faint); } /* ── Loading screen ── */ #loading-screen { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 50%, #0d2137 100%); transition: opacity 0.5s ease, visibility 0.5s ease; } #loading-screen.hide { opacity: 0; visibility: hidden; pointer-events: none; } .loader-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 2rem; } /* Animated logo icon */ .loader-logo { width: 5rem; height: 5rem; border-radius: 1.25rem; background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); display: flex; align-items: center; justify-content: center; font-size: 2.25rem; color: #ffffff; box-shadow: 0 0 32px rgba(99,102,241,.6), 0 0 64px rgba(59,130,246,.3); animation: loader-pulse 1.8s ease-in-out infinite; } @keyframes loader-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 32px rgba(99,102,241,.6), 0 0 64px rgba(59,130,246,.3); } 50% { transform: scale(1.08); box-shadow: 0 0 48px rgba(99,102,241,.8), 0 0 96px rgba(59,130,246,.5); } } .loader-title { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; color: #f1f5f9; letter-spacing: -0.01em; margin-top: 0.25rem; } /* Progress bar */ .loader-bar-track { width: 14rem; height: 4px; background: rgba(255,255,255,.12); border-radius: 9999px; overflow: hidden; margin-top: 0.5rem; } .loader-bar-fill { height: 100%; width: 0%; border-radius: 9999px; background: linear-gradient(90deg, #3b82f6, #6366f1, #a78bfa); background-size: 200% 100%; animation: loader-progress 1.4s ease-out forwards, loader-shimmer 1.4s linear infinite; } @keyframes loader-progress { 0% { width: 0%; } 60% { width: 80%; } 100% { width: 100%; } } @keyframes loader-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .loader-sub { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 0.8125rem; color: #64748b; letter-spacing: 0.04em; animation: loader-blink 1.4s ease-in-out infinite; } @keyframes loader-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── Scroll-to-top button ── */ .scroll-top-btn { position: fixed; bottom: 1.25rem; right: 1.5rem; z-index: 60; width: 2.75rem; height: 2.75rem; border-radius: 9999px; border: none; cursor: pointer; background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); color: #ffffff; font-size: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(99,102,241,.45); opacity: 0; transform: translateY(12px) scale(0.85); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease; } .scroll-top-btn.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .scroll-top-btn:hover { background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); box-shadow: 0 6px 20px rgba(99,102,241,.55); transform: translateY(-2px) scale(1.05); } .scroll-top-btn:active { transform: scale(0.95); } .scroll-top-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; } /* ── Responsive ── */ /* ── Desktop (≥ 1280px) — baseline, already handled above ── */ @media (min-width: 1280px) { #main-content { padding-left: 1.5rem; padding-right: 1.5rem; } } /* ── Large tablet (1024px – 1279px) ── */ @media (max-width: 1279px) and (min-width: 1024px) { #main-content { max-width: 90%; } #timer-display { font-size: 5rem; } } /* ── Small tablet (768px – 1023px) ── */ @media (max-width: 1023px) and (min-width: 768px) { #main-content { max-width: 95%; padding-left: 1rem; padding-right: 1rem; } .card { padding: 1.25rem; } #timer-display { font-size: 4.5rem; } #time { font-size: 4rem; } #greeting-text { font-size: 2.25rem; } } /* ── Large phone (480px – 767px) ── */ @media (max-width: 767px) and (min-width: 480px) { #main-content { padding-left: 0.875rem; padding-right: 0.875rem; margin-top: 1.25rem; } .card { padding: 1.125rem; } #timer-display { font-size: 3.75rem; } #time { font-size: 3.25rem; } #greeting-text { font-size: 1.875rem; } /* Timer controls — stack vertically */ #focus-timer .flex.gap-3[role="group"] { flex-direction: column; align-items: stretch; width: 100%; max-width: 14rem; } #focus-timer .flex.gap-3[role="group"] .btn { display: flex; justify-content: center; width: 100%; } /* Duration row — wrap */ #focus-timer .flex.items-center.gap-2:first-child { flex-wrap: wrap; justify-content: center; } /* Add-task form — stack */ #add-task-form { flex-direction: column; } #add-task-form .btn { display: flex; justify-content: center; width: 100%; } /* Add-link form — already flex-col on sm, reinforce */ #add-link-form { flex-direction: column; } #add-link-form .btn { display: flex; justify-content: center; width: 100%; } /* Name input row — stack */ #name-input-row { flex-direction: column; } #name-input-row .btn { display: flex; justify-content: center; width: 100%; } #name-input-row .input { width: 100%; } } /* ── Small phone (≤ 479px) ── */ @media (max-width: 479px) { #main-content { padding-left: 0.625rem; padding-right: 0.625rem; margin-top: 1rem; } .card { padding: 1rem; border-radius: 0.75rem; } #timer-display { font-size: 3rem; } #time { font-size: 2.75rem; } #greeting-text { font-size: 1.625rem; } #username-display { font-size: 1rem; } .section-title { font-size: 0.8125rem; } /* Timer controls — stack vertically, full width */ #focus-timer .flex.gap-3[role="group"] { flex-direction: column; align-items: stretch; width: 100%; } #focus-timer .flex.gap-3[role="group"] .btn { display: flex; justify-content: center; width: 100%; } /* Duration row — wrap and center */ #focus-timer .flex.items-center.gap-2:first-child { flex-wrap: wrap; justify-content: center; gap: 0.5rem; } /* Add-task form — stack */ #add-task-form { flex-direction: column; } #add-task-form .btn { display: flex; justify-content: center; width: 100%; } /* Add-link form — stack */ #add-link-form { flex-direction: column; } #add-link-form .btn { display: flex; justify-content: center; width: 100%; } /* Name input row — stack */ #name-input-row { flex-direction: column; } #name-input-row .btn { display: flex; justify-content: center; width: 100%; } #name-input-row .input { width: 100%; } /* Task item — tighten spacing */ .task-item { padding: 0.5rem 0.625rem; gap: 0.5rem; } .task-text { font-size: 0.875rem; } /* Quick link pills — full width on tiny screens */ .link-btn { width: 100%; justify-content: space-between; border-radius: 0.625rem; } /* Footer text */ .footer .text-sm { font-size: 0.8125rem; } .footer .text-xs { font-size: 0.6875rem; text-align: center; } /* Navbar title — shrink slightly */ header h1 { font-size: 1rem; } }