jochen
7e83b99615
ADR 0515 §6: /static/app.js and /static/app.css are built in and served with their types and nosniff; the policy allows script and style from the origin alone and connect-src 'self'; no page carries an inline script, a style or a handler. The script posts the page's forms without a reload and says a failure on the page.
75 lines
4.5 KiB
CSS
75 lines
4.5 KiB
CSS
/* The mail page's one stylesheet (novox/hq ADR 0515 §3, §6; issue 1859): phone first, one column; a wide
|
|
screen adds the reading pane beside the list. The mockup kept with design 63 is its direction. */
|
|
:root{--bg:#f5f5f2;--panel:#fff;--ink:#1c1c1a;--muted:#6b6b66;--line:#e2e1dc;--accent:#2f5bd3;--due:#b0124e;
|
|
--chip:#ecebe6;--hi:#fff7dc;--scam:#b3261e;--scam-bg:#fde8e6;--ok:#2e9d5b}
|
|
@media (prefers-color-scheme:dark){:root{--bg:#131313;--panel:#1c1c1c;--ink:#ebebe8;--muted:#9b9b95;--line:#2d2d2b;
|
|
--accent:#86a8ff;--due:#ff7aa6;--chip:#292927;--hi:#2b2616;--scam:#ff8a80;--scam-bg:#3a1c1a;--ok:#5fd38a}}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
|
|
a{color:var(--accent);text-decoration:none}
|
|
.muted{color:var(--muted)}
|
|
form{margin:0}
|
|
button{font:inherit;color:inherit;cursor:pointer}
|
|
ul{list-style:none;margin:0;padding:0}
|
|
|
|
/* the bar on top: the page's name, the modes, All mail */
|
|
.topbar{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 12px;
|
|
background:var(--panel);border-bottom:1px solid var(--line)}
|
|
.topbar .logo{font-weight:700;font-size:17px;color:var(--ink)}
|
|
.modes{display:flex;gap:6px;overflow-x:auto;flex:1}
|
|
.modes form{flex:none}
|
|
.mode{padding:4px 12px;border-radius:99px;border:2px solid var(--line);background:var(--panel);font-size:14px;opacity:.6}
|
|
.mode.on{opacity:1;border-color:var(--accent);background:var(--hi)}
|
|
.btn{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:7px;font-size:13px;color:var(--ink);
|
|
background:var(--panel);white-space:nowrap}
|
|
.btn.p{background:var(--accent);border-color:var(--accent);color:#fff}
|
|
|
|
/* the list */
|
|
.page{display:block}
|
|
.list{padding:14px 16px 48px;max-width:760px;margin:0 auto;min-width:0}
|
|
.greet h1{font-size:26px;margin:4px 0}
|
|
.lede{color:var(--muted);margin:2px 0 6px}
|
|
.told li{padding:2px 0}
|
|
.notice{padding:9px 12px;border-radius:8px;margin:10px 0;font-size:14px;background:var(--hi)}
|
|
.notice.failed{background:var(--scam-bg);color:var(--scam)}
|
|
.sec h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:24px 0 4px;
|
|
display:flex;justify-content:space-between}
|
|
.cnt{font-size:11px;background:var(--chip);color:var(--muted);border-radius:99px;padding:0 7px}
|
|
.empty{font-size:14px;margin:6px 2px}
|
|
.tk{display:flex;gap:12px;align-items:flex-start;padding:12px 2px;border-bottom:1px solid var(--line)}
|
|
.box{flex:none;width:30px;height:30px;border-radius:8px;border:2.5px solid var(--line);background:var(--panel);
|
|
font-size:0;margin-top:1px}
|
|
.box:hover{border-color:var(--ink)}
|
|
.box.done{background:var(--ink);border-color:var(--ink)}
|
|
.box.done::after{content:"\2713";color:var(--bg);font-size:16px;font-weight:800;line-height:24px}
|
|
.tb{min-width:0;flex:1}
|
|
.tt{display:block;font-size:17px;line-height:1.3;color:var(--ink)}
|
|
#handled-today .tt{text-decoration:line-through;color:var(--muted)}
|
|
.tm{display:block;font-size:13px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
|
|
.due{color:var(--due);font-weight:600}
|
|
.why{display:block;font-size:13px;color:var(--scam)}
|
|
#scam-warnings .tk{background:var(--scam-bg);border-radius:8px;padding:10px}
|
|
.later{flex:none;font-size:12px;padding:4px 8px}
|
|
.reminded .tt::before{content:"\23F0 "}
|
|
|
|
/* the reading pane: over the list on a phone, beside it on a wide screen */
|
|
.pane{background:var(--panel);padding:14px 16px 48px;min-width:0}
|
|
.pane h1{font-size:20px;margin:4px 0 6px;line-height:1.25}
|
|
.pane .bar{display:flex;gap:8px;align-items:center;margin-bottom:10px}
|
|
.meta{font-size:13px;color:var(--muted)}
|
|
.body{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.5 system-ui,sans-serif;margin:14px 0}
|
|
.items li{padding:4px 0;display:flex;gap:8px;align-items:center;justify-content:space-between}
|
|
.fix{margin-top:16px;border-top:1px solid var(--line);padding-top:10px}
|
|
.fix h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:8px 0}
|
|
.fix form{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
|
|
.fix select,.fix input,.fix button{font:inherit;font-size:13px;padding:4px 7px;border:1px solid var(--line);
|
|
border-radius:6px;background:var(--panel);color:var(--ink)}
|
|
.atts li{padding:3px 0}
|
|
.with-pane .list{display:none}
|
|
.owly:empty{display:none}
|
|
@media (min-width:900px){
|
|
.with-pane{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px)}
|
|
.with-pane .list{display:block}
|
|
.pane{border-left:1px solid var(--line);position:sticky;top:49px;height:calc(100vh - 49px);overflow:auto}
|
|
}
|