/* timeclock dashboard — pure black-and-white, follows the system color scheme. */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #000; --fg: #fff; --muted: #666; --rule: rgba(128, 128, 128, 0.25); --field: rgba(255, 255, 255, 0.04); --backdrop: rgba(0, 0, 0, 0.7); } @media (prefers-color-scheme: light) { :root { --bg: #fff; --fg: #000; --muted: #999; --rule: rgba(128, 128, 128, 0.3); --field: rgba(0, 0, 0, 0.04); --backdrop: rgba(255, 255, 255, 0.7); } } /* Manual overrides — the theme-toggle button stamps html.light / html.dark on , which beats both the default and the system media query. */ html.light { --bg: #fff; --fg: #000; --muted: #999; --rule: rgba(128, 128, 128, 0.3); --field: rgba(0, 0, 0, 0.04); --backdrop: rgba(255, 255, 255, 0.7); } html.dark { --bg: #000; --fg: #fff; --muted: #666; --rule: rgba(128, 128, 128, 0.25); --field: rgba(255, 255, 255, 0.04); --backdrop: rgba(0, 0, 0, 0.7); } html { color-scheme: dark light; } html.light { color-scheme: light; } html.dark { color-scheme: dark; } body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; font-weight: 300; font-size: 14px; line-height: 1.5; background: var(--bg); color: var(--fg); min-height: 100dvh; transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease; } /* ── Header ─────────────────────────────────────────────────────────── */ header { display: flex; align-items: baseline; gap: 1rem; padding: 1.25rem 2rem; border-bottom: 1px solid var(--rule); } header h1 { font-size: 1rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .dim { flex: 1; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.05em; } /* Theme toggle: a single-char glyph that flips between sun/moon. */ .theme-toggle { background: transparent; border: none; color: var(--muted); font-size: 0.95rem; line-height: 1; padding: 0.25rem 0.5rem; min-height: auto; letter-spacing: 0; text-transform: none; cursor: pointer; transition: color 0.2s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .theme-toggle:hover { color: var(--fg); transform: rotate(15deg); } html.dark .theme-toggle::before { content: "☾"; } html.light .theme-toggle::before { content: "☀"; } /* When neither class is forced, fall back to system preference. */ html:not(.dark):not(.light) .theme-toggle::before { content: "◐"; } /* ── Layout ─────────────────────────────────────────────────────────── */ section { padding: 2rem; max-width: 1200px; margin: 0 auto; } .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.5rem; } .row h2 { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* ── Buttons ────────────────────────────────────────────────────────── */ button { background: transparent; color: var(--fg); border: 1px solid var(--rule); border-radius: 0; padding: 0.5rem 1.25rem; font: inherit; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; min-height: 36px; } button:hover, button:focus-visible { border-color: var(--fg); outline: none; } button[value="cancel"], button[type="button"][data-act] { border: none; padding: 0.25rem 0.5rem; font-size: 0.7rem; color: var(--muted); min-height: auto; } button[value="cancel"]:hover, button[type="button"][data-act]:hover { color: var(--fg); } /* ── Forms ──────────────────────────────────────────────────────────── */ form label { display: block; margin: 1rem 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } form input[type=text], form input[type=password], form input[type=url], form input[type=number], form input[type=email], form textarea, form select { display: block; width: 100%; margin-top: 0.4rem; background: transparent; color: var(--fg); border: none; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 0.5rem 0; font: inherit; font-size: 0.95rem; font-weight: 400; letter-spacing: -0.01em; text-transform: none; outline: none; transition: border-color 0.2s ease; } form textarea { font-family: ui-monospace, SFMono-Regular, "Menlo", monospace; font-size: 0.85rem; line-height: 1.45; resize: vertical; } form select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) center, calc(100% - 9px) center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 1.5rem; } form input:focus, form textarea:focus, form select:focus { border-bottom-color: var(--fg); } form .cb { display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } form .cb input { width: auto; margin: 0; accent-color: var(--fg); } form .actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); /* When a dialog form is taller than the viewport and scrolls, keep the Cancel/Save bar pinned in view rather than below the fold. The -2rem offsets the dialog's own padding so the bar hugs the dialog edge with no strip of scrolled content showing beneath it. */ position: sticky; bottom: -2rem; margin-bottom: -2rem; padding-bottom: 1rem; background: var(--bg); } .error { color: var(--fg); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.05em; min-height: 1em; margin: 0.5rem 0 0; } .error:not(:empty)::before { content: "✗ "; margin-right: 0.25rem; } /* ── Tables ─────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: middle; } th { color: var(--muted); font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; } td { font-weight: 400; font-size: 0.9rem; } tr.disabled td { opacity: 0.4; } .url-cell { font-family: ui-monospace, SFMono-Regular, "Menlo", monospace; font-size: 0.8rem; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); } .actions-cell { text-align: right; white-space: nowrap; } .actions-cell button { margin-left: 0.25rem; } td code { font-family: ui-monospace, SFMono-Regular, "Menlo", monospace; font-size: 0.85rem; font-weight: 400; } /* ── Status indicators ──────────────────────────────────────────────── */ /* In a B&W palette we differentiate status by weight rather than hue. */ .status-ok { font-weight: 400; } .status-err { font-weight: 700; } .status-err::before { content: "✗ "; } /* ── Dialog ─────────────────────────────────────────────────────────── */ dialog { /* The global reset zeroes margins, which kills the UA default `dialog { margin: auto }` that centers modals — restore it. */ margin: auto; background: var(--bg); color: var(--fg); border: 1px solid var(--rule); border-radius: 0; padding: 2rem; min-width: 520px; max-width: min(90vw, 720px); max-height: min(90dvh, 100%); overflow-y: auto; font-family: inherit; } dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } dialog h3 { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; } dialog pre { font-family: ui-monospace, SFMono-Regular, "Menlo", monospace; font-size: 0.75rem; line-height: 1.45; color: var(--muted); white-space: pre-wrap; word-break: break-word; max-height: 8rem; overflow-y: auto; } /* ── Login ──────────────────────────────────────────────────────────── */ #login { max-width: 360px; margin: 8vh auto; } #login h2 { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; } #login form button { width: 100%; margin-top: 1rem; } /* Demo call-to-action under the sign-in form. */ #demo-cta { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); } #demo-cta button { width: 100%; } #demo-cta .demo-note { margin-top: 0.75rem; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.02em; } /* ── Mobile ─────────────────────────────────────────────────────────── */ @media (max-width: 640px) { header, section { padding: 1rem; } dialog { min-width: 0; width: 92vw; padding: 1.25rem; } th, td { padding: 0.5rem 0.5rem; } .url-cell { max-width: 160px; } }