rays
43ffafe7ac
Measured every theme's palette against WCAG AA. The unread badge's count on its --accent2 fill fell as low as 2.6:1 (Flat Remix light), and the unread dot with it; each theme's --accent2 is taken down until white on it clears 4.5. Tags were --warn or --bad on --raise, short of AA in most light themes, so they are outlined on the row's own ground instead. Nordic dark had --line equal to --panel2, so bordered buttons on a panel2 ground drew no edge at all. Classic's selected row left the row's icon buttons grey on the blue. A zero badge on a selected row was --raise on --raise and vanished. login.html never had a doctype or viewport meta, so it rendered in quirks mode and at desktop width on a phone, and its light palette sat under data-theme="light", which nothing ever set. It follows prefers-color-scheme now, signed out having no account to ask. Dropped the unused log and users icons. The Classic theme's label is now just "Classic". Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
87 lines
3.4 KiB
HTML
87 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="dark light">
|
|
<title>Sign in — iPodderX</title>
|
|
<link rel="icon" type="image/png" sizes="128x128" href="/favicon.png">
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
<style>
|
|
/* Inter, from ipx itself; see the same rule in index.html. */
|
|
@font-face{font-family:Inter;src:url(/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
|
|
:root {
|
|
--bg:#0e131b; /* the screen's navy (#314B74), taken right down */
|
|
--panel:#151c27;
|
|
--panel2:#1c2431;
|
|
--raise:#25303f;
|
|
--line:#2c3849;
|
|
--fg:#f5f5f5; /* #F5F5F5 device highlight */
|
|
--dim:#95a0b1; /* #95A0B1 straight from the icon's blue-grey */
|
|
--faint:#7a8799; /* lifted from the icon ramp until it clears AA at small sizes */
|
|
--accent:#92b2e6; /* #92B2E6 the screen blue */
|
|
--accent2:#f49e2c; /* #F49E2C the EQ bars */
|
|
--ink:#0e131b; /* text on an accent fill */
|
|
--good:#6fbf8b;
|
|
--warn:#f49e2c; /* the amber doubles as the pending colour */
|
|
--bad:#e2705f;
|
|
--shadow:0 8px 28px rgba(6,10,16,.55);
|
|
--r:10px;
|
|
}
|
|
/* Signed out, there is no account to take a theme from, so this follows the system. */
|
|
@media (prefers-color-scheme:light){:root {
|
|
--bg:#f2f4f7;
|
|
--panel:#ffffff; /* #FFFFFF device body */
|
|
--panel2:#e9edf3;
|
|
--raise:#dde3ec;
|
|
--line:#d6d6d6; /* #D6D6D6 device edge */
|
|
--fg:#1a1a1a; /* #1A1A1A icon outline */
|
|
--dim:#606060; /* #606060 */
|
|
--faint:#6b6b6b;
|
|
--accent:#2d5391; /* #2D5391 the deep screen blue reads better on white */
|
|
--accent2:#985e0a;
|
|
--ink:#ffffff;
|
|
--good:#2f7d4f;
|
|
--warn:#985e0a;
|
|
--bad:#b3402f;
|
|
--shadow:0 8px 28px rgba(45,83,145,.14);
|
|
}}
|
|
*{box-sizing:border-box}
|
|
html,body{height:100%}
|
|
body{
|
|
margin:0;display:grid;place-items:center;background:var(--bg);color:var(--fg);
|
|
font:14.5px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:20px;
|
|
}
|
|
form{
|
|
width:min(360px,100%);background:var(--panel);border:1px solid var(--line);
|
|
border-radius:14px;padding:22px;box-shadow:var(--shadow);
|
|
}
|
|
/* The one place the 2004 icon is shown at the size it was drawn for. */
|
|
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:20px}
|
|
.brand img{width:96px;height:auto}
|
|
h1{font-size:21px;margin:0;font-weight:650;letter-spacing:-.01em}
|
|
label{display:block;font-size:12px;color:var(--dim);margin:0 0 4px}
|
|
input{
|
|
width:100%;background:var(--bg);border:1px solid var(--line);color:var(--fg);
|
|
border-radius:8px;padding:9px 11px;font:inherit;margin-bottom:13px;
|
|
}
|
|
input:focus{outline:0;border-color:var(--accent)}
|
|
button{
|
|
width:100%;font:inherit;font-weight:600;cursor:pointer;color:var(--ink);
|
|
background:var(--accent);border:0;border-radius:8px;padding:10px;
|
|
}
|
|
.msg{color:var(--bad);font-size:13px;min-height:19px;margin:10px 0 0;text-align:center}
|
|
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
|
|
</style>
|
|
|
|
<form id="f">
|
|
<div class="brand"><img src="/icon.png" alt=""><h1>iPodderX</h1></div>
|
|
<label for="name">Name</label>
|
|
<input id="name" name="name" autocomplete="username" autofocus required>
|
|
<label for="pw">Password</label>
|
|
<input id="pw" name="password" type="password" autocomplete="current-password" required>
|
|
<button type="submit">Sign in</button>
|
|
<p class="msg" id="msg"></p>
|
|
</form>
|
|
|
|
<script data-src="web/src"></script>
|