/* ============================================================ To Do App — Blueprint Drafting Board Theme Design tokens shared across Revconn / Narendra's personal apps ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { --navy-deep: #0a1420; --navy: #101f36; --navy-line: #1c3358; --cyan: #00d4ff; --amber: #ffb627; --coral: #ff6b6b; --mint: #3ddc97; --paper: #eef3f9; --paper-dim: #a9b8cc; --ink: #0a1420; --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* ---------- base / blueprint backdrop ---------- */ html, body { height: 100%; } /* NOTE: body keeps its own background (default here, but the Settings panel lets the user override it via inline style / changeBG()). The blueprint grid lives on a fixed ::before overlay on so it never fights with that feature. */ html { background-color: var(--navy-deep); position: relative; } html::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(0, 212, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.06) 1px, transparent 1px), linear-gradient(rgba(0, 212, 255, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.14) 1px, transparent 1px); background-size: 16px 16px, 16px 16px, 80px 80px, 80px 80px; background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px; } body { position: relative; z-index: 1; margin: 0; font-family: var(--font-body); color: var(--paper); background-color: var(--navy-deep); min-height: 100vh; } /* ---------- loading spinner ---------- */ #loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy-deep); } /* ---------- navbar ---------- */ #navbar nav.navbar { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%) !important; border-bottom: 1px solid var(--navy-line); box-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); padding: 0.6rem 1.25rem; } .navbar-brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; color: var(--paper) !important; display: flex; align-items: center; gap: 0.6rem; } .navbar-brand img { border: 2px solid var(--cyan); box-shadow: 0 0 14px rgba(0, 212, 255, 0.35); } .navbar-nav .nav-link { font-family: var(--font-body); font-weight: 500; color: var(--paper-dim) !important; border-radius: 6px; padding: 0.4rem 0.8rem !important; margin: 0 0.15rem; transition: color 0.15s ease, background 0.15s ease; background: transparent; border: none; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { color: var(--cyan) !important; background: rgba(0, 212, 255, 0.08); } .navbar-nav .nav-link.active { color: var(--amber) !important; } .dropdown-menu { background: var(--navy); border: 1px solid var(--navy-line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .dropdown-item { font-family: var(--font-body); color: var(--paper-dim); } .dropdown-item:hover, .dropdown-item:focus { background: rgba(0, 212, 255, 0.1); color: var(--cyan); } .dropdown-item.disabled { color: var(--mint) !important; font-weight: 600; } .dropdown-divider { border-color: var(--navy-line); } .navbar-toggler { border-color: var(--navy-line); } .navbar-toggler-icon { filter: invert(1); } /* ---------- main board (title-block sheet) ---------- */ #main { padding-top: 90px; padding-bottom: 2rem; } #board { position: relative; max-width: 1040px; background: linear-gradient(180deg, rgba(16, 31, 54, 0.92) 0%, rgba(10, 20, 32, 0.92) 100%) !important; border: 1px solid var(--navy-line); border-radius: 4px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 212, 255, 0.04); } /* corner crop marks — the signature drafting-sheet detail */ #board::before, #board::after, #board > h2::before, #board > h2::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 2; } #board::before { top: 10px; left: 10px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); } #board::after { bottom: 10px; right: 10px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); } #board > h2.btn { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper) !important; background: transparent !important; border: 1px solid var(--navy-line); border-radius: 4px; padding: 0.6rem 1.4rem; position: relative; } #board > h2.btn::before, #board > h2.btn::after { display: none; } /* ---------- profile / greeting ---------- */ #profile h1 { color: var(--amber) !important; font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: 0.01em; text-shadow: 0 0 24px rgba(255, 182, 39, 0.25); } #profile #userimg { border: 3px solid var(--cyan); box-shadow: 0 0 18px rgba(0, 212, 255, 0.3); background: var(--navy); } /* ---------- add-task form ---------- */ #add-form { background: rgba(10, 20, 32, 0.5); border: 1px dashed var(--navy-line); border-radius: 6px; padding: 1rem !important; } #add-form .form-control, #add-form .form-select { background: var(--navy-deep); border: 1px solid var(--navy-line); color: var(--paper); font-family: var(--font-body); border-radius: 4px; } #add-form .form-control::placeholder { color: var(--paper-dim); } #add-form .form-control:focus, #add-form .form-select:focus { background: var(--navy-deep); color: var(--paper); border-color: var(--cyan); box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.2); } #add-form .form-control[type="date"] { font-family: var(--font-mono); color-scheme: dark; } #add-form button.btn-warning { font-family: var(--font-body); font-weight: 600; background: var(--amber); border-color: var(--amber); color: var(--ink); border-radius: 4px; transition: transform 0.12s ease, box-shadow 0.12s ease; } #add-form button.btn-warning:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 182, 39, 0.3); } /* ---------- task table (spec sheet) ---------- */ .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(0, 212, 255, 0.04); --bs-table-hover-bg: rgba(0, 212, 255, 0.09); color: var(--paper); border-color: var(--navy-line); font-family: var(--font-body); margin-top: 0.5rem; } .table thead th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); background: rgba(0, 212, 255, 0.06); border-bottom: 1px solid var(--navy-line); border-top: none; padding: 0.65rem 0.75rem; } .table tbody td { border-color: var(--navy-line); vertical-align: middle; padding: 0.65rem 0.75rem; color: var(--paper); } .table tbody td:first-child { font-family: var(--font-mono); color: var(--paper-dim); width: 3rem; } /* deadline cell tends to hold a date string */ .table td:nth-child(3) { font-family: var(--font-mono); font-size: 0.9rem; color: var(--mint); } #deleteAll { font-family: var(--font-body); font-weight: 600; background: var(--coral); border-color: var(--coral); border-radius: 4px; } #deleteAll:hover { background: #ff4d4d; border-color: #ff4d4d; } /* generic action buttons rendered by JS inside table rows */ .table .btn { font-family: var(--font-body); border-radius: 4px; } /* ---------- install toast ---------- */ .toast { background: var(--navy); border: 1px solid var(--navy-line); color: var(--paper); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } .toast-header { background: var(--navy-deep) !important; color: var(--paper) !important; border-bottom: 1px solid var(--navy-line); font-family: var(--font-body); } .toast-body { font-family: var(--font-body); } .toast-body .list-group-item { background: transparent; color: var(--paper-dim); border-color: var(--navy-line); } button[onclick="viewInstallToast()"] { font-family: var(--font-body); font-weight: 600; border-radius: 4px; } /* ---------- footer ---------- */ footer { background: var(--navy) !important; border: 1px solid var(--navy-line); font-family: var(--font-mono); font-size: 0.78rem; max-width: fit-content; } footer > div { border-radius: 10px; padding: 0.4rem 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--paper-dim); white-space: nowrap; } footer a { color: var(--cyan) !important; text-decoration: none; } footer a:hover { color: var(--amber) !important; } .footer-dot { color: var(--navy-line); } .footer-made { color: var(--paper-dim); } /* ---------- modals ---------- */ .modal-content { background: var(--navy); color: var(--paper); border: 1px solid var(--navy-line); border-radius: 8px; } .modal-header, .modal-footer { border-color: var(--navy-line); } .modal-title { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; } .modal-body label { font-family: var(--font-body); font-weight: 500; color: var(--paper-dim); } .modal-body input.form-inline { background: var(--navy-deep); border: 1px solid var(--navy-line); color: var(--paper); border-radius: 4px; padding: 0.35rem 0.6rem; margin: 0 0.4rem 0.4rem 0; } .modal-body p { color: var(--paper-dim); font-size: 0.9rem; } .modal-body hr { border-color: var(--navy-line); opacity: 1; } .btn-close { filter: invert(1); } /* ---------- formfacade / ff- widget (kept, just unhidden cleanly) ---------- */ .ff-powered-img, .ff-title, .ff-description, .ff-watermark { visibility: hidden; } /* ---------- responsive ---------- */ @media (max-width: 767px) { #main { padding-top: 96px; } #board { border-radius: 0 !important; } .table-responsive { overflow-x: auto; } } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .form-group { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; } .form-group label { font-size: .8rem; color: var(--muted); font-weight: 500; letter-spacing: .04em; } .form-group input, .form-group textarea { background: var(--navy); border: 1px solid var(--navy-border); border-radius: 8px; padding: .75rem 1rem; color: var(--white); font-family: var(--font-body); font-size: .95rem; outline: none; transition: border-color .2s, box-shadow .2s; width: 100%; } .form-group input:focus, .form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.1); } .form-group textarea { resize: vertical; min-height: 120px; } .form-submit { background: var(--blue); color: #fff; border: none; cursor: pointer; padding: .85rem 2rem; border-radius: 8px; font-size: .95rem; font-weight: 600; font-family: var(--font-body); width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: opacity .2s, transform .2s; box-shadow: 0 0 24px rgba(59,130,246,.25); } .form-submit:hover { opacity: .88; transform: translateY(-1px); } .form-success { display: none; text-align: center; padding: 2rem; color: var(--blue); } .form-success .check { font-size: 2.5rem; margin-bottom: .8rem; } .form-success p { color: var(--muted); }