Scaffold Docker-only Node 24 + TypeScript EJS web backend
This commit is contained in:
735
html-css-foundation/App Shell.html
Normal file
735
html-css-foundation/App Shell.html
Normal file
@@ -0,0 +1,735 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>App Shell — Template</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ============ ICON SPRITE — Lucide (https://lucide.dev, ISC license) ============
|
||||
Official Lucide paths, inlined as <symbol> so usage stays zero-JS:
|
||||
<svg class="ico"><use href="#i-name"/></svg>. Stroke + currentColor are
|
||||
applied via the .ico class, matching Lucide's 24-grid / round-cap style. -->
|
||||
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
|
||||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></symbol>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></symbol>
|
||||
<symbol id="i-x" viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></symbol>
|
||||
<symbol id="i-menu" viewBox="0 0 24 24"><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="18" y2="18"/></symbol>
|
||||
<symbol id="i-kebab" viewBox="0 0 24 24"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></symbol>
|
||||
<symbol id="i-sort" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></symbol>
|
||||
<symbol id="i-up" viewBox="0 0 24 24"><path d="m18 15-6-6-6 6"/></symbol>
|
||||
<symbol id="i-cal" viewBox="0 0 24 24"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></symbol>
|
||||
<symbol id="i-sliders" viewBox="0 0 24 24"><line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/></symbol>
|
||||
<symbol id="i-cols" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/></symbol>
|
||||
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5v14"/></symbol>
|
||||
<symbol id="i-download" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></symbol>
|
||||
<symbol id="i-grid" viewBox="0 0 24 24"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></symbol>
|
||||
<symbol id="i-box" viewBox="0 0 24 24"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></symbol>
|
||||
<symbol id="i-layers" viewBox="0 0 24 24"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></symbol>
|
||||
<symbol id="i-chart" viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></symbol>
|
||||
<symbol id="i-users" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></symbol>
|
||||
<symbol id="i-gear" viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></symbol>
|
||||
<symbol id="i-user" viewBox="0 0 24 24"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
|
||||
<symbol id="i-bell" viewBox="0 0 24 24"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></symbol>
|
||||
<symbol id="i-edit" viewBox="0 0 24 24"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></symbol>
|
||||
<symbol id="i-copy" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></symbol>
|
||||
<symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></symbol>
|
||||
<symbol id="i-logout" viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></symbol>
|
||||
<symbol id="i-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></symbol>
|
||||
</svg>
|
||||
|
||||
<!-- nav-toggle drives the mobile overlay (pure CSS) -->
|
||||
<input type="checkbox" id="nav-toggle" aria-hidden="true" tabindex="-1">
|
||||
|
||||
<div class="app">
|
||||
|
||||
<!-- =================== SIDEBAR =================== -->
|
||||
<aside class="sidebar" aria-label="Primary">
|
||||
<div class="brand">
|
||||
<span class="brand-mark"><svg class="ico ico-sm"><use href="#i-box"/></svg></span>
|
||||
<span class="brand-name">Console</span>
|
||||
<span class="brand-sub">v0.1</span>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
UNIFIED NAV TREE — every item uses the SAME node markup.
|
||||
HEADER → node has a <details class="nav-disc"> toggle + <ul class="nav-children">
|
||||
LEAF → node has a <span class="nav-spacer"> instead of a toggle
|
||||
CLICKABLE → label is <a class="nav-self" href>
|
||||
STATIC → label is <span class="nav-self">
|
||||
Mix freely: a node can be header+clickable, header+static,
|
||||
leaf+clickable, or leaf+static. Workspace / Insights below are
|
||||
simply header + static nodes — nothing special about them.
|
||||
==================================================== -->
|
||||
<nav class="nav" aria-label="Main navigation">
|
||||
<ul class="nav-tree">
|
||||
|
||||
<!-- leaf + clickable -->
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<span class="nav-spacer" aria-hidden="true"></span>
|
||||
<a class="nav-self" href="#"><svg class="ico"><use href="#i-grid"/></svg><span class="nav-label">Overview</span></a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- header + STATIC (was the "Workspace" group label) -->
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<details class="nav-disc" open>
|
||||
<summary class="nav-tog" aria-label="Toggle Workspace"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
|
||||
</details>
|
||||
<span class="nav-self"><span class="nav-label">Workspace</span></span>
|
||||
</div>
|
||||
<ul class="nav-children">
|
||||
|
||||
<!-- header + CLICKABLE -->
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<details class="nav-disc" open>
|
||||
<summary class="nav-tog" aria-label="Toggle Directory"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
|
||||
</details>
|
||||
<a class="nav-self" href="#"><svg class="ico"><use href="#i-users"/></svg><span class="nav-label">Directory</span><span class="nav-count">4</span></a>
|
||||
</div>
|
||||
<ul class="nav-children">
|
||||
|
||||
<!-- leaf + clickable (active) -->
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<span class="nav-spacer" aria-hidden="true"></span>
|
||||
<a class="nav-self" href="#" aria-current="page"><span class="nav-label">People</span><span class="nav-count">1,284</span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<span class="nav-spacer" aria-hidden="true"></span>
|
||||
<a class="nav-self" href="#"><span class="nav-label">Teams</span></a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- header + CLICKABLE -->
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<details class="nav-disc" open>
|
||||
<summary class="nav-tog" aria-label="Toggle Roles & Access"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
|
||||
</details>
|
||||
<a class="nav-self" href="#"><span class="nav-label">Roles & Access</span></a>
|
||||
</div>
|
||||
<ul class="nav-children">
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Roles</span></a></div></li>
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Permission sets</span></a></div></li>
|
||||
|
||||
<!-- header + CLICKABLE (level 4) -->
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<details class="nav-disc" open>
|
||||
<summary class="nav-tog" aria-label="Toggle Policies"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
|
||||
</details>
|
||||
<a class="nav-self" href="#"><span class="nav-label">Policies</span></a>
|
||||
</div>
|
||||
<ul class="nav-children">
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Password policy</span></a></div></li>
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Session limits</span></a></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- header + STATIC (level 4) -->
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<details class="nav-disc">
|
||||
<summary class="nav-tog" aria-label="Toggle Scopes"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
|
||||
</details>
|
||||
<span class="nav-self"><span class="nav-label">Scopes</span></span>
|
||||
</div>
|
||||
<ul class="nav-children">
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Read scopes</span></a></div></li>
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Write scopes</span></a></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- header + STATIC -->
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<details class="nav-disc">
|
||||
<summary class="nav-tog" aria-label="Toggle Segments"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
|
||||
</details>
|
||||
<span class="nav-self"><span class="nav-label">Segments</span></span>
|
||||
</div>
|
||||
<ul class="nav-children">
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Active users</span></a></div></li>
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Invited</span></a></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- header + STATIC -->
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<details class="nav-disc" open>
|
||||
<summary class="nav-tog" aria-label="Toggle Resources"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
|
||||
</details>
|
||||
<span class="nav-self"><svg class="ico"><use href="#i-box"/></svg><span class="nav-label">Resources</span></span>
|
||||
</div>
|
||||
<ul class="nav-children">
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Projects</span></a></div></li>
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Environments</span></a></div></li>
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">API keys</span></a></div></li>
|
||||
<!-- leaf + STATIC (no link → not a navigation target) -->
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><span class="nav-self"><span class="nav-label">Webhooks (soon)</span></span></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- header + STATIC (was the "Insights" group label) -->
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<details class="nav-disc" open>
|
||||
<summary class="nav-tog" aria-label="Toggle Insights"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
|
||||
</details>
|
||||
<span class="nav-self"><span class="nav-label">Insights</span></span>
|
||||
</div>
|
||||
<ul class="nav-children">
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<span class="nav-spacer" aria-hidden="true"></span>
|
||||
<a class="nav-self" href="#"><svg class="ico"><use href="#i-chart"/></svg><span class="nav-label">Reports</span></a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- header + CLICKABLE -->
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<details class="nav-disc">
|
||||
<summary class="nav-tog" aria-label="Toggle Activity"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
|
||||
</details>
|
||||
<a class="nav-self" href="#"><svg class="ico"><use href="#i-bell"/></svg><span class="nav-label">Activity</span></a>
|
||||
</div>
|
||||
<ul class="nav-children">
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Audit log</span></a></div></li>
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Notifications</span></a></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- header + STATIC -->
|
||||
<li class="nav-node">
|
||||
<div class="nav-row">
|
||||
<details class="nav-disc">
|
||||
<summary class="nav-tog" aria-label="Toggle Catalog"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
|
||||
</details>
|
||||
<span class="nav-self"><svg class="ico"><use href="#i-layers"/></svg><span class="nav-label">Catalog</span></span>
|
||||
</div>
|
||||
<ul class="nav-children">
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Items</span></a></div></li>
|
||||
<li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Categories</span></a></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- ---- sidebar footer: theme + profile + settings ---- -->
|
||||
<div class="side-footer">
|
||||
<!-- theme switcher: Light / Auto / Dark (Auto = follow system) -->
|
||||
<div class="theme-switch" role="radiogroup" aria-label="Color theme">
|
||||
<label>
|
||||
<input type="radio" name="theme" id="theme-light">
|
||||
<span>Light</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="theme" id="theme-auto" checked>
|
||||
<span>Auto</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="theme" id="theme-dark">
|
||||
<span>Dark</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="footer-actions">
|
||||
<!-- profile (opens a menu) -->
|
||||
<details class="menu" style="flex:1 1 auto">
|
||||
<summary class="profile">
|
||||
<span class="avatar" aria-hidden="true">AK</span>
|
||||
<span class="profile-meta">
|
||||
<span class="profile-name">Avery Kline</span>
|
||||
<span class="profile-mail"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f7e697a6d665f7e7c727a317670">[email protected]</a></span>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="menu-pop left" style="bottom:calc(100% + 6px); top:auto; min-width:220px">
|
||||
<div class="menu-head">Signed in as Avery</div>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-user"/></svg>Profile</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-globe"/></svg>Language — English</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-bell"/></svg>Notifications</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-logout"/></svg>Sign out</button>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- settings -->
|
||||
<details class="menu">
|
||||
<summary class="btn icon-btn" aria-label="Settings">
|
||||
<svg class="ico"><use href="#i-gear"/></svg>
|
||||
</summary>
|
||||
<div class="menu-pop" style="bottom:calc(100% + 6px); top:auto">
|
||||
<div class="menu-head">Settings</div>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-gear"/></svg>Preferences</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-users"/></svg>Members</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-globe"/></svg>Region & language</button>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- scrim closes the mobile menu (label toggles the checkbox) -->
|
||||
<label class="scrim" for="nav-toggle" aria-label="Close menu"></label>
|
||||
|
||||
<!-- =================== CONTENT =================== -->
|
||||
<main class="content">
|
||||
|
||||
<!-- topbar -->
|
||||
<header class="topbar">
|
||||
<label class="btn icon-btn hamburger" for="nav-toggle" aria-label="Open menu">
|
||||
<svg class="ico"><use href="#i-menu"/></svg>
|
||||
</label>
|
||||
<div>
|
||||
<div class="page-title">People</div>
|
||||
</div>
|
||||
<nav class="crumbs" aria-label="Breadcrumb">
|
||||
<a href="#">Directory</a><span class="sep">/</span><span>People</span>
|
||||
</nav>
|
||||
<div class="topbar-spacer"></div>
|
||||
<button class="btn"><svg class="ico ico-sm"><use href="#i-download"/></svg>Export</button>
|
||||
<button class="btn btn-primary"><svg class="ico ico-sm"><use href="#i-plus"/></svg>Add person</button>
|
||||
</header>
|
||||
|
||||
<!-- ============ FILTER BAR ============
|
||||
A real GET form: selections submit as query params (?q=…&status=…)
|
||||
so filtering is server-side and works with zero JavaScript.
|
||||
Every control has a name + associated label; related controls are
|
||||
grouped in <fieldset>/<legend>; Apply submits, Reset clears. -->
|
||||
<form class="filters" method="get" aria-label="Filter people">
|
||||
<!-- row 1: search + status + team + column/extra menus -->
|
||||
<div class="filter-row">
|
||||
<label class="search">
|
||||
<span class="sr-only">Search people</span>
|
||||
<svg class="ico ico-sm" aria-hidden="true"><use href="#i-search"/></svg>
|
||||
<input type="search" name="q" placeholder="Search people…">
|
||||
</label>
|
||||
|
||||
<fieldset class="filter-field">
|
||||
<legend class="sr-only">Status</legend>
|
||||
<div class="segmented">
|
||||
<label><input type="radio" name="status" value="all" checked><span>All</span><span class="seg-count">1,284</span></label>
|
||||
<label><input type="radio" name="status" value="active"><span>Active</span></label>
|
||||
<label><input type="radio" name="status" value="archived"><span>Archived</span></label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<span class="filter">
|
||||
<label class="sr-only" for="f-team">Team</label>
|
||||
<span class="select">
|
||||
<select id="f-team" name="team">
|
||||
<option value="">All teams</option>
|
||||
<option value="engineering">Engineering</option>
|
||||
<option value="design">Design</option>
|
||||
<option value="operations">Operations</option>
|
||||
<option value="sales">Sales</option>
|
||||
</select>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<!-- column visibility (display preference, also persisted via the form) -->
|
||||
<details class="menu">
|
||||
<summary class="btn"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-cols"/></svg>Columns</summary>
|
||||
<div class="menu-pop">
|
||||
<fieldset class="menu-field">
|
||||
<legend class="menu-head">Visible columns</legend>
|
||||
<label class="menu-check"><input type="checkbox" name="col" value="name" checked>Name</label>
|
||||
<label class="menu-check"><input type="checkbox" name="col" value="email" checked>Email</label>
|
||||
<label class="menu-check"><input type="checkbox" name="col" value="role" checked>Role</label>
|
||||
<label class="menu-check"><input type="checkbox" name="col" value="team" checked>Team</label>
|
||||
<label class="menu-check"><input type="checkbox" name="col" value="status" checked>Status</label>
|
||||
<label class="menu-check"><input type="checkbox" name="col" value="last_active" checked>Last active</label>
|
||||
<label class="menu-check"><input type="checkbox" name="col" value="created">Created</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="menu">
|
||||
<summary class="btn"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-sliders"/></svg>More filters</summary>
|
||||
<div class="menu-pop" style="min-width:240px">
|
||||
<fieldset class="menu-field">
|
||||
<legend class="menu-head">Role</legend>
|
||||
<label class="menu-check"><input type="radio" name="role" value="" checked>Any role</label>
|
||||
<label class="menu-check"><input type="radio" name="role" value="admin">Admin</label>
|
||||
<label class="menu-check"><input type="radio" name="role" value="member">Member</label>
|
||||
<label class="menu-check"><input type="radio" name="role" value="viewer">Viewer</label>
|
||||
</fieldset>
|
||||
<div class="menu-sep"></div>
|
||||
<fieldset class="menu-field">
|
||||
<legend class="menu-head">Flags</legend>
|
||||
<label class="menu-check"><input type="checkbox" name="flag" value="2fa">2FA enabled</label>
|
||||
<label class="menu-check"><input type="checkbox" name="flag" value="pending">Pending invite</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- row 2: tags + joined date range -->
|
||||
<div class="filter-row">
|
||||
<fieldset class="filter-field">
|
||||
<legend class="sr-only">Tags</legend>
|
||||
<span class="filter-legend" aria-hidden="true">Tags</span>
|
||||
<div class="chips">
|
||||
<label class="chip"><span class="chip-dot" aria-hidden="true"></span><input type="checkbox" name="tag" value="engineering" checked>Engineering</label>
|
||||
<label class="chip"><span class="chip-dot" aria-hidden="true"></span><input type="checkbox" name="tag" value="design">Design</label>
|
||||
<label class="chip"><span class="chip-dot" aria-hidden="true"></span><input type="checkbox" name="tag" value="oncall" checked>On-call</label>
|
||||
<label class="chip"><span class="chip-dot" aria-hidden="true"></span><input type="checkbox" name="tag" value="contractor">Contractor</label>
|
||||
<label class="chip"><span class="chip-dot" aria-hidden="true"></span><input type="checkbox" name="tag" value="remote">Remote</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<fieldset class="filter-field">
|
||||
<legend class="sr-only">Joined</legend>
|
||||
<span class="filter-legend" aria-hidden="true">Joined</span>
|
||||
<div class="daterange">
|
||||
<svg class="ico ico-sm" aria-hidden="true"><use href="#i-cal"/></svg>
|
||||
<label class="sr-only" for="f-from">Joined from</label>
|
||||
<input type="date" id="f-from" name="joined_from" value="2026-01-01">
|
||||
<span class="to" aria-hidden="true">to</span>
|
||||
<label class="sr-only" for="f-to">Joined to</label>
|
||||
<input type="date" id="f-to" name="joined_to" value="2026-06-14">
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- row 3: applied filters (server-rendered) + form actions -->
|
||||
<div class="filter-row filter-foot">
|
||||
<div class="active-pills" aria-label="Applied filters">
|
||||
<span class="filter-legend">Applied</span>
|
||||
<span class="pill"><b>Team:</b> Engineering <a class="pill-x" href="?tag=oncall&joined_from=2026-01-01" aria-label="Remove Team filter"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-x"/></svg></a></span>
|
||||
<span class="pill"><b>Tag:</b> On-call <a class="pill-x" href="?team=engineering&joined_from=2026-01-01" aria-label="Remove On-call filter"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-x"/></svg></a></span>
|
||||
<span class="pill"><b>Joined:</b> 2026 <a class="pill-x" href="?team=engineering&tag=oncall" aria-label="Remove Joined filter"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-x"/></svg></a></span>
|
||||
<a class="pill-clear" href="?">Clear all</a>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<button type="reset" class="btn">Reset</button>
|
||||
<button type="submit" class="btn btn-primary"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-search"/></svg>Apply filters</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- ============ TABLE ============ -->
|
||||
<div class="table-wrap">
|
||||
<table class="table">
|
||||
<caption class="sr-only">People in the directory</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-check" scope="col">
|
||||
<input type="checkbox" aria-label="Select all rows">
|
||||
</th>
|
||||
<th scope="col" aria-sort="ascending">
|
||||
<button class="th-sort">Name <svg class="ico ico-sm sort-ico"><use href="#i-up"/></svg></button>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<button class="th-sort">Email <svg class="ico ico-sm sort-ico"><use href="#i-sort"/></svg></button>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<button class="th-sort">Role <svg class="ico ico-sm sort-ico"><use href="#i-sort"/></svg></button>
|
||||
</th>
|
||||
<th scope="col">Team</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">
|
||||
<button class="th-sort">Last active <svg class="ico ico-sm sort-ico"><use href="#i-sort"/></svg></button>
|
||||
</th>
|
||||
<th class="col-actions" scope="col"><span class="sr-only">Actions</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row template, repeated -->
|
||||
<tr>
|
||||
<td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Mara Delgado"></td>
|
||||
<td><span class="cell-user"><span class="avatar" aria-hidden="true">MD</span><span class="cell-strong">Mara Delgado</span></span></td>
|
||||
<td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80ede1f2e1aee4e5ece7e1e4efc0e1e3ede5aee9ef">[email protected]</a></td>
|
||||
<td>Admin</td>
|
||||
<td class="cell-muted">Engineering</td>
|
||||
<td><span class="badge pos"><span class="dot"></span>Active</span></td>
|
||||
<td class="cell-muted">2 min ago</td>
|
||||
<td class="col-actions">
|
||||
<details class="menu kebab">
|
||||
<summary aria-label="Row actions for Mara Delgado"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
|
||||
<div class="menu-pop">
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Soren Vance"></td>
|
||||
<td><span class="cell-user"><span class="avatar" aria-hidden="true">SV</span><span class="cell-strong">Soren Vance</span></span></td>
|
||||
<td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b3824392e25653d2a25282e0b2a28262e652224">[email protected]</a></td>
|
||||
<td>Member</td>
|
||||
<td class="cell-muted">Design</td>
|
||||
<td><span class="badge warn"><span class="dot"></span>Idle</span></td>
|
||||
<td class="cell-muted">3 hours ago</td>
|
||||
<td class="col-actions">
|
||||
<details class="menu kebab">
|
||||
<summary aria-label="Row actions for Soren Vance"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
|
||||
<div class="menu-pop">
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Priya Nair"></td>
|
||||
<td><span class="cell-user"><span class="avatar" aria-hidden="true">PN</span><span class="cell-strong">Priya Nair</span></span></td>
|
||||
<td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f2f2d36263e71313e362d1f3e3c323a713630">[email protected]</a></td>
|
||||
<td>Admin</td>
|
||||
<td class="cell-muted">Operations</td>
|
||||
<td><span class="badge pos"><span class="dot"></span>Active</span></td>
|
||||
<td class="cell-muted">just now</td>
|
||||
<td class="col-actions">
|
||||
<details class="menu kebab">
|
||||
<summary aria-label="Row actions for Priya Nair"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
|
||||
<div class="menu-pop">
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Eli Brandt"></td>
|
||||
<td><span class="cell-user"><span class="avatar" aria-hidden="true">EB</span><span class="cell-strong">Eli Brandt</span></span></td>
|
||||
<td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d5dcd99ed2c2d1ded4c4f0d1d3ddd59ed9df">[email protected]</a></td>
|
||||
<td>Viewer</td>
|
||||
<td class="cell-muted">Sales</td>
|
||||
<td><span class="badge neg"><span class="dot"></span>Suspended</span></td>
|
||||
<td class="cell-muted">6 days ago</td>
|
||||
<td class="col-actions">
|
||||
<details class="menu kebab">
|
||||
<summary aria-label="Row actions for Eli Brandt"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
|
||||
<div class="menu-pop">
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Tomas Lindqvist"></td>
|
||||
<td><span class="cell-user"><span class="avatar" aria-hidden="true">TL</span><span class="cell-strong">Tomas Lindqvist</span></span></td>
|
||||
<td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9adb6b4b8aaf7b599b8bab4bcf7b0b6">[email protected]</a></td>
|
||||
<td>Member</td>
|
||||
<td class="cell-muted">Engineering</td>
|
||||
<td><span class="badge info"><span class="dot"></span>Invited</span></td>
|
||||
<td class="cell-muted">—</td>
|
||||
<td class="col-actions">
|
||||
<details class="menu kebab">
|
||||
<summary aria-label="Row actions for Tomas Lindqvist"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
|
||||
<div class="menu-pop">
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Hana Osei"></td>
|
||||
<td><span class="cell-user"><span class="avatar" aria-hidden="true">HO</span><span class="cell-strong">Hana Osei</span></span></td>
|
||||
<td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e28a838c83cc8d91878ba283818f87cc8b8d">[email protected]</a></td>
|
||||
<td>Member</td>
|
||||
<td class="cell-muted">Design</td>
|
||||
<td><span class="badge pos"><span class="dot"></span>Active</span></td>
|
||||
<td class="cell-muted">21 min ago</td>
|
||||
<td class="col-actions">
|
||||
<details class="menu kebab">
|
||||
<summary aria-label="Row actions for Hana Osei"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
|
||||
<div class="menu-pop">
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Rafael Costa"></td>
|
||||
<td><span class="cell-user"><span class="avatar" aria-hidden="true">RC</span><span class="cell-strong">Rafael Costa</span></span></td>
|
||||
<td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd8f9c9b9c9891d39e928e899cbd9c9e9098d39492">[email protected]</a></td>
|
||||
<td>Admin</td>
|
||||
<td class="cell-muted">Operations</td>
|
||||
<td><span class="badge warn"><span class="dot"></span>Idle</span></td>
|
||||
<td class="cell-muted">1 hour ago</td>
|
||||
<td class="col-actions">
|
||||
<details class="menu kebab">
|
||||
<summary aria-label="Row actions for Rafael Costa"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
|
||||
<div class="menu-pop">
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Wen Li"></td>
|
||||
<td><span class="cell-user"><span class="avatar" aria-hidden="true">WL</span><span class="cell-strong">Wen Li</span></span></td>
|
||||
<td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfa8bab1f1b3b69fbebcb2baf1b6b0">[email protected]</a></td>
|
||||
<td>Viewer</td>
|
||||
<td class="cell-muted">Sales</td>
|
||||
<td><span class="badge pos"><span class="dot"></span>Active</span></td>
|
||||
<td class="cell-muted">44 min ago</td>
|
||||
<td class="col-actions">
|
||||
<details class="menu kebab">
|
||||
<summary aria-label="Row actions for Wen Li"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
|
||||
<div class="menu-pop">
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Nadia Farouk"></td>
|
||||
<td><span class="cell-user"><span class="avatar" aria-hidden="true">NF</span><span class="cell-strong">Nadia Farouk</span></span></td>
|
||||
<td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4826292c2129662e293a273d2308292b252d662127">[email protected]</a></td>
|
||||
<td>Member</td>
|
||||
<td class="cell-muted">Engineering</td>
|
||||
<td><span class="badge neg"><span class="dot"></span>Suspended</span></td>
|
||||
<td class="cell-muted">12 days ago</td>
|
||||
<td class="col-actions">
|
||||
<details class="menu kebab">
|
||||
<summary aria-label="Row actions for Nadia Farouk"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
|
||||
<div class="menu-pop">
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Otto Berg"></td>
|
||||
<td><span class="cell-user"><span class="avatar" aria-hidden="true">OB</span><span class="cell-strong">Otto Berg</span></span></td>
|
||||
<td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a253e3e2564282f382d0a2b29272f642325">[email protected]</a></td>
|
||||
<td>Member</td>
|
||||
<td class="cell-muted">Design</td>
|
||||
<td><span class="badge info"><span class="dot"></span>Invited</span></td>
|
||||
<td class="cell-muted">—</td>
|
||||
<td class="col-actions">
|
||||
<details class="menu kebab">
|
||||
<summary aria-label="Row actions for Otto Berg"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
|
||||
<div class="menu-pop">
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Greta Holm"></td>
|
||||
<td><span class="cell-user"><span class="avatar" aria-hidden="true">GH</span><span class="cell-strong">Greta Holm</span></span></td>
|
||||
<td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2047524554410e484f4c4d6041434d450e494f">[email protected]</a></td>
|
||||
<td>Admin</td>
|
||||
<td class="cell-muted">Operations</td>
|
||||
<td><span class="badge pos"><span class="dot"></span>Active</span></td>
|
||||
<td class="cell-muted">8 min ago</td>
|
||||
<td class="col-actions">
|
||||
<details class="menu kebab">
|
||||
<summary aria-label="Row actions for Greta Holm"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
|
||||
<div class="menu-pop">
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Yusuf Demir"></td>
|
||||
<td><span class="cell-user"><span class="avatar" aria-hidden="true">YD</span><span class="cell-strong">Yusuf Demir</span></span></td>
|
||||
<td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2059555355460e44454d49526041434d450e494f">[email protected]</a></td>
|
||||
<td>Viewer</td>
|
||||
<td class="cell-muted">Sales</td>
|
||||
<td><span class="badge warn"><span class="dot"></span>Idle</span></td>
|
||||
<td class="cell-muted">5 hours ago</td>
|
||||
<td class="col-actions">
|
||||
<details class="menu kebab">
|
||||
<summary aria-label="Row actions for Yusuf Demir"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
|
||||
<div class="menu-pop">
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
|
||||
<button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
|
||||
<div class="menu-sep"></div>
|
||||
<button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
|
||||
</div>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- ============ PAGINATION ============ -->
|
||||
<footer class="pager">
|
||||
<span>1–12 of <b>1,284</b></span>
|
||||
<div class="pager-rows">
|
||||
<label for="rows">Rows</label>
|
||||
<div class="select">
|
||||
<select id="rows" aria-label="Rows per page">
|
||||
<option>12</option><option>25</option><option>50</option><option>100</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<nav class="page-nums" aria-label="Pagination">
|
||||
<button class="page-btn" disabled aria-label="Previous page"><svg class="ico ico-sm" style="transform:rotate(180deg)"><use href="#i-chev"/></svg></button>
|
||||
<button class="page-btn" aria-current="page">1</button>
|
||||
<button class="page-btn">2</button>
|
||||
<button class="page-btn">3</button>
|
||||
<button class="page-btn">…</button>
|
||||
<button class="page-btn">107</button>
|
||||
<button class="page-btn" aria-label="Next page"><svg class="ico ico-sm"><use href="#i-chev"/></svg></button>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
|
||||
</html>
|
||||
216
html-css-foundation/Auth.html
Normal file
216
html-css-foundation/Auth.html
Normal file
@@ -0,0 +1,216 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sign in — Console</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="auth.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ============ ICON SPRITE — Lucide (ISC) ============ -->
|
||||
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
|
||||
<symbol id="i-box" viewBox="0 0 24 24"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></symbol>
|
||||
<symbol id="i-mail" viewBox="0 0 24 24"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></symbol>
|
||||
<symbol id="i-lock" viewBox="0 0 24 24"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></symbol>
|
||||
<symbol id="i-user" viewBox="0 0 24 24"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
|
||||
<symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></symbol>
|
||||
<symbol id="i-check-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></symbol>
|
||||
<symbol id="i-alert" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></symbol>
|
||||
</svg>
|
||||
|
||||
<main class="auth-stage">
|
||||
<div class="auth">
|
||||
|
||||
<div class="auth-brand">
|
||||
<span class="brand-mark"><svg class="ico ico-sm"><use href="#i-box"/></svg></span>
|
||||
<span class="brand-name">Console</span>
|
||||
</div>
|
||||
|
||||
<!-- =================== LOGIN =================== -->
|
||||
<section id="login" class="auth-view" aria-labelledby="login-title">
|
||||
<form class="auth-card" method="post" action="#">
|
||||
<div class="auth-head">
|
||||
<h1 id="login-title">Sign in</h1>
|
||||
<p class="auth-sub">Welcome back. Enter your details to continue.</p>
|
||||
</div>
|
||||
|
||||
<!-- SSO section (toggle on/off) -->
|
||||
<div class="sso" aria-label="Single sign-on options">
|
||||
<ul class="sso-list">
|
||||
<!-- add a provider: copy one <li> and change the logo + label -->
|
||||
<li><button type="button" class="sso-btn"><span class="sso-logo" aria-hidden="true">G</span><span class="sso-label">Continue with Google</span></button></li>
|
||||
<li><button type="button" class="sso-btn"><span class="sso-logo" aria-hidden="true">M</span><span class="sso-label">Continue with Microsoft</span></button></li>
|
||||
<li><button type="button" class="sso-btn"><span class="sso-logo" aria-hidden="true"><svg class="ico ico-sm"><use href="#i-shield"/></svg></span><span class="sso-label">Continue with SAML SSO</span></button></li>
|
||||
</ul>
|
||||
<div class="auth-divider">or</div>
|
||||
</div>
|
||||
|
||||
<div class="auth-form">
|
||||
<div class="field">
|
||||
<label for="login-email">Email</label>
|
||||
<div class="input-wrap">
|
||||
<svg class="ico ico-sm input-ico" aria-hidden="true"><use href="#i-mail"/></svg>
|
||||
<input class="input has-ico" id="login-email" name="email" type="email" autocomplete="email" placeholder="you@company.com" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="field-top">
|
||||
<label for="login-password">Password</label>
|
||||
<a class="field-link" href="#forgot">Forgot password?</a>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<svg class="ico ico-sm input-ico" aria-hidden="true"><use href="#i-lock"/></svg>
|
||||
<input class="input has-ico" id="login-password" name="password" type="password" autocomplete="current-password" placeholder="••••••••" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="check remember"><input type="checkbox" name="remember" value="1"> Keep me signed in</label>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
|
||||
</div>
|
||||
|
||||
<p class="auth-alt">Don't have an account? <a href="#register">Create one</a></p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- =================== REGISTER =================== -->
|
||||
<section id="register" class="auth-view" aria-labelledby="register-title">
|
||||
<form class="auth-card" method="post" action="#">
|
||||
<div class="auth-head">
|
||||
<h1 id="register-title">Create account</h1>
|
||||
<p class="auth-sub">Get started — it only takes a minute.</p>
|
||||
</div>
|
||||
|
||||
<div class="sso" aria-label="Single sign-on options">
|
||||
<ul class="sso-list">
|
||||
<li><button type="button" class="sso-btn"><span class="sso-logo" aria-hidden="true">G</span><span class="sso-label">Sign up with Google</span></button></li>
|
||||
<li><button type="button" class="sso-btn"><span class="sso-logo" aria-hidden="true">M</span><span class="sso-label">Sign up with Microsoft</span></button></li>
|
||||
<li><button type="button" class="sso-btn"><span class="sso-logo" aria-hidden="true"><svg class="ico ico-sm"><use href="#i-shield"/></svg></span><span class="sso-label">Sign up with SAML SSO</span></button></li>
|
||||
</ul>
|
||||
<div class="auth-divider">or</div>
|
||||
</div>
|
||||
|
||||
<div class="auth-form">
|
||||
<div class="register-alert alert alert-neg" role="alert">
|
||||
<svg class="ico ico-sm" aria-hidden="true"><use href="#i-alert"/></svg>
|
||||
<div class="alert-body"><strong>Please fix the highlighted fields</strong><span>A couple of details need your attention before we can create your account.</span></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field-top">
|
||||
<label for="reg-name">Name</label>
|
||||
<span class="optional">Optional</span>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<svg class="ico ico-sm input-ico" aria-hidden="true"><use href="#i-user"/></svg>
|
||||
<input class="input has-ico" id="reg-name" name="name" type="text" autocomplete="name" placeholder="Avery Kline">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="reg-email">Email</label>
|
||||
<div class="input-wrap">
|
||||
<svg class="ico ico-sm input-ico" aria-hidden="true"><use href="#i-mail"/></svg>
|
||||
<input class="input has-ico" id="reg-email" name="email" type="email" autocomplete="email" placeholder="you@company.com" aria-describedby="reg-email-err" required>
|
||||
</div>
|
||||
<p class="field-error err-email" id="reg-email-err" role="alert">
|
||||
<svg class="ico ico-sm" aria-hidden="true"><use href="#i-alert"/></svg>
|
||||
<span>This email is already used by another account. <a href="#login">Sign in instead</a>.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="reg-password">Password</label>
|
||||
<div class="input-wrap">
|
||||
<svg class="ico ico-sm input-ico" aria-hidden="true"><use href="#i-lock"/></svg>
|
||||
<input class="input has-ico" id="reg-password" name="password" type="password" autocomplete="new-password" placeholder="At least 8 characters" minlength="8" aria-describedby="reg-password-err" required>
|
||||
</div>
|
||||
<span class="field-hint">Use 8 or more characters.</span>
|
||||
<p class="field-error err-password" id="reg-password-err" role="alert">
|
||||
<svg class="ico ico-sm" aria-hidden="true"><use href="#i-alert"/></svg>
|
||||
<span>Password must be at least 8 characters.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block">Create account</button>
|
||||
</div>
|
||||
|
||||
<p class="auth-alt">Already have an account? <a href="#login">Sign in</a></p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- =================== FORGOT PASSWORD =================== -->
|
||||
<section id="forgot" class="auth-view" aria-labelledby="forgot-title">
|
||||
<form class="auth-card" method="post">
|
||||
<div class="auth-head">
|
||||
<a class="auth-back" href="#login"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-arrow-left"/></svg>Back to sign in</a>
|
||||
<h1 id="forgot-title">Reset password</h1>
|
||||
<p class="auth-sub">Enter your email and we'll send you a reset link.</p>
|
||||
</div>
|
||||
|
||||
<!-- feedback (shown by server via .state-sent / .state-error on #forgot) -->
|
||||
<div class="forgot-alert is-sent alert alert-pos" role="status">
|
||||
<svg class="ico ico-sm" aria-hidden="true"><use href="#i-check-circle"/></svg>
|
||||
<div class="alert-body"><strong>Check your email</strong><span>If an account exists for that address, a reset link is on its way.</span></div>
|
||||
</div>
|
||||
<div class="forgot-alert is-error alert alert-neg" role="alert">
|
||||
<svg class="ico ico-sm" aria-hidden="true"><use href="#i-alert"/></svg>
|
||||
<div class="alert-body"><strong>Couldn't send the link</strong><span>Something went wrong on our end. Please try again.</span></div>
|
||||
</div>
|
||||
|
||||
<div class="auth-form">
|
||||
<div class="field">
|
||||
<label for="forgot-email">Email</label>
|
||||
<div class="input-wrap">
|
||||
<svg class="ico ico-sm input-ico" aria-hidden="true"><use href="#i-mail"/></svg>
|
||||
<input class="input has-ico" id="forgot-email" name="email" type="email" autocomplete="email" placeholder="you@company.com" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block">Send reset link</button>
|
||||
</div>
|
||||
|
||||
<p class="auth-alt">Remembered it? <a href="#login">Sign in</a></p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- ============ TEMPLATE PREVIEW CONTROLS (remove for production) ============ -->
|
||||
<div class="tpl-controls" role="group" aria-label="Template preview controls">
|
||||
<span class="tpl-label">Preview</span>
|
||||
<div class="theme-switch" role="radiogroup" aria-label="Color theme">
|
||||
<label><input type="radio" name="theme" id="theme-light"><span>Light</span></label>
|
||||
<label><input type="radio" name="theme" id="theme-auto" checked><span>Auto</span></label>
|
||||
<label><input type="radio" name="theme" id="theme-dark"><span>Dark</span></label>
|
||||
</div>
|
||||
<span class="tpl-sep" aria-hidden="true"></span>
|
||||
<label class="tpl-toggle">
|
||||
<input type="checkbox" id="sso-toggle" checked>
|
||||
<span class="tpl-track" aria-hidden="true"></span>
|
||||
SSO
|
||||
</label>
|
||||
<span class="tpl-sep tpl-forgot" aria-hidden="true"></span>
|
||||
<div class="tpl-forgot">
|
||||
<div class="segmented" role="radiogroup" aria-label="Forgot-password state (preview)">
|
||||
<label><input type="radio" name="fstate" id="fstate-default" checked><span>Default</span></label>
|
||||
<label><input type="radio" name="fstate" id="fstate-sent"><span>Sent</span></label>
|
||||
<label><input type="radio" name="fstate" id="fstate-error"><span>Error</span></label>
|
||||
</div>
|
||||
</div>
|
||||
<span class="tpl-sep tpl-register" aria-hidden="true"></span>
|
||||
<div class="tpl-register">
|
||||
<div class="segmented" role="radiogroup" aria-label="Register state (preview)">
|
||||
<label><input type="radio" name="rstate" id="rstate-default" checked><span>Default</span></label>
|
||||
<label><input type="radio" name="rstate" id="rstate-taken"><span>Email taken</span></label>
|
||||
<label><input type="radio" name="rstate" id="rstate-combined"><span>Multiple</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
232
html-css-foundation/auth.css
Normal file
232
html-css-foundation/auth.css
Normal file
@@ -0,0 +1,232 @@
|
||||
/* =============================================================
|
||||
Auth flow — login / register / forgot password
|
||||
Built on the shared tokens in styles.css. Pure HTML/CSS:
|
||||
- screens switch via :target (no JS)
|
||||
- SSO is a config section toggled by a class/checkbox; providers
|
||||
are a <ul> you extend by adding one <li class="sso-item">.
|
||||
============================================================= */
|
||||
|
||||
.auth-stage {
|
||||
min-height: 100dvh;
|
||||
display: grid; place-items: center;
|
||||
padding: 40px 20px 96px;
|
||||
background: var(--bg);
|
||||
}
|
||||
.auth {
|
||||
width: 100%; max-width: 408px;
|
||||
display: flex; flex-direction: column; gap: 22px;
|
||||
}
|
||||
|
||||
/* brand */
|
||||
.auth-brand {
|
||||
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||
}
|
||||
.auth-brand .brand-name { font-size: 16px; }
|
||||
|
||||
/* ---- screen switching via :target (login is the default) ---- */
|
||||
.auth-view { display: none; }
|
||||
#login { display: block; }
|
||||
#register:target, #forgot:target { display: block; }
|
||||
body:has(#register:target) #login,
|
||||
body:has(#forgot:target) #login { display: none; }
|
||||
|
||||
/* card */
|
||||
.auth-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: calc(var(--radius) + 3px);
|
||||
padding: 24px;
|
||||
display: flex; flex-direction: column; gap: 16px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06);
|
||||
}
|
||||
.auth-head { display: flex; flex-direction: column; gap: 4px; }
|
||||
.auth-head h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
|
||||
.auth-sub { margin: 0; color: var(--text-muted); font-size: var(--fz); }
|
||||
.auth-back {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
font-size: var(--fz-sm); color: var(--text-muted); width: fit-content;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.auth-back:hover { color: var(--text); }
|
||||
|
||||
/* ---- SSO section (toggle on/off via #sso-toggle) ---- */
|
||||
.sso { display: flex; flex-direction: column; gap: 10px; }
|
||||
body:not(:has(#sso-toggle:checked)) .sso { display: none; }
|
||||
|
||||
.sso-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.sso-btn {
|
||||
display: flex; align-items: center; gap: 11px; width: 100%;
|
||||
height: 40px; padding: 0 12px;
|
||||
background: var(--surface); color: var(--text);
|
||||
border: 1px solid var(--border-2); border-radius: var(--radius);
|
||||
font: inherit; font-size: var(--fz-sm); font-weight: 550;
|
||||
cursor: pointer; text-align: left;
|
||||
}
|
||||
.sso-btn:hover { background: var(--surface-2); }
|
||||
/* logo slot — swap the initial for an <img class="sso-logo"> later */
|
||||
.sso-logo {
|
||||
width: 22px; height: 22px; flex: 0 0 auto;
|
||||
display: grid; place-items: center; border-radius: 5px;
|
||||
background: var(--surface-2); border: 1px solid var(--border);
|
||||
color: var(--text-muted); font-size: 11px; font-weight: 700;
|
||||
}
|
||||
.sso-logo .ico { color: var(--text-muted); }
|
||||
.sso-btn .sso-label { flex: 1 1 auto; }
|
||||
|
||||
/* divider */
|
||||
.auth-divider {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
color: var(--text-faint); font-size: var(--fz-xs);
|
||||
text-transform: uppercase; letter-spacing: .07em;
|
||||
}
|
||||
.auth-divider::before, .auth-divider::after {
|
||||
content: ""; flex: 1 1 auto; height: 1px; background: var(--border);
|
||||
}
|
||||
|
||||
/* ---- form fields ---- */
|
||||
.auth-form { display: flex; flex-direction: column; gap: 14px; }
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
|
||||
.field label { font-size: var(--fz-sm); font-weight: 550; color: var(--text); }
|
||||
.field .optional { font-size: var(--fz-xs); color: var(--text-faint); font-weight: 400; }
|
||||
.field-link { font-size: var(--fz-xs); color: var(--accent); }
|
||||
.field-link:hover { text-decoration: underline; }
|
||||
|
||||
.input-wrap { position: relative; display: flex; }
|
||||
.input-ico {
|
||||
position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
|
||||
color: var(--text-faint); pointer-events: none;
|
||||
}
|
||||
.input {
|
||||
width: 100%; height: 40px; padding: 0 12px;
|
||||
background: var(--surface-3); color: var(--text);
|
||||
border: 1px solid var(--border-2); border-radius: var(--radius);
|
||||
font: inherit; font-size: var(--fz);
|
||||
}
|
||||
.input.has-ico { padding-left: 36px; }
|
||||
.input::placeholder { color: var(--text-faint); }
|
||||
.input:focus { outline: none; border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px var(--accent-bg); }
|
||||
/* gentle validation feedback only after the user has interacted */
|
||||
.input:user-invalid { border-color: var(--neg); }
|
||||
.input:user-invalid:focus { box-shadow: 0 0 0 2px var(--neg-bg); }
|
||||
|
||||
.field-hint { font-size: var(--fz-xs); color: var(--text-faint); }
|
||||
|
||||
.remember { margin-top: 2px; }
|
||||
|
||||
/* full-width primary button (extends .btn / .btn-primary from styles.css) */
|
||||
.btn-block { width: 100%; justify-content: center; height: 40px; font-size: var(--fz); }
|
||||
|
||||
/* alternate action line */
|
||||
.auth-alt { margin: 0; text-align: center; font-size: var(--fz-sm); color: var(--text-muted); }
|
||||
.auth-alt a { color: var(--accent); font-weight: 550; }
|
||||
.auth-alt a:hover { text-decoration: underline; }
|
||||
|
||||
/* legal footnote */
|
||||
.auth-foot { margin: 0; text-align: center; font-size: var(--fz-xs); color: var(--text-faint); }
|
||||
.auth-foot a { color: var(--text-muted); text-decoration: underline; }
|
||||
|
||||
/* =============================================================
|
||||
Template preview controls (delete this block + its markup for
|
||||
production). Drives theme + SSO on/off with zero JS.
|
||||
============================================================= */
|
||||
.tpl-controls {
|
||||
position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
|
||||
z-index: 50;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 6px 8px 6px 14px;
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 99px; box-shadow: 0 6px 22px rgba(0,0,0,.12);
|
||||
}
|
||||
.tpl-label { font-size: var(--fz-xs); color: var(--text-faint);
|
||||
text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
|
||||
.tpl-sep { width: 1px; height: 20px; background: var(--border); }
|
||||
.tpl-controls .theme-switch { width: 156px; }
|
||||
|
||||
/* on/off switch */
|
||||
.tpl-toggle { display: inline-flex; align-items: center; gap: 8px;
|
||||
font-size: var(--fz-sm); color: var(--text-muted); cursor: pointer; }
|
||||
.tpl-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
|
||||
.tpl-track { width: 32px; height: 18px; border-radius: 99px;
|
||||
background: var(--border-2); position: relative; transition: background .15s ease; }
|
||||
.tpl-track::after { content: ""; position: absolute; top: 2px; left: 2px;
|
||||
width: 14px; height: 14px; border-radius: 50%; background: #fff;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s ease; }
|
||||
.tpl-toggle:has(input:checked) .tpl-track { background: var(--accent); }
|
||||
.tpl-toggle:has(input:checked) .tpl-track::after { transform: translateX(14px); }
|
||||
.tpl-toggle:has(input:focus-visible) .tpl-track {
|
||||
outline: 2px solid var(--focus); outline-offset: 2px; }
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.tpl-label { display: none; }
|
||||
.tpl-controls { gap: 10px; padding: 6px 10px; }
|
||||
}
|
||||
|
||||
/* =============================================================
|
||||
Forgot-password feedback (Post/Redirect/Get, no JS).
|
||||
The form POSTs to its own URL; on the redirect-GET the server
|
||||
re-renders #forgot with a state class so the matching alert shows:
|
||||
<section id="forgot" class="auth-view state-sent"> … </section>
|
||||
(state-sent | state-error). No extra view is added.
|
||||
The preview radios below demonstrate the same states live.
|
||||
============================================================= */
|
||||
.forgot-alert { display: none; }
|
||||
#forgot.state-sent .forgot-alert.is-sent,
|
||||
body:has(#fstate-sent:checked) #forgot .forgot-alert.is-sent { display: flex; }
|
||||
#forgot.state-error .forgot-alert.is-error,
|
||||
body:has(#fstate-error:checked) #forgot .forgot-alert.is-error { display: flex; }
|
||||
|
||||
/* the Forgot-state control only appears while the forgot view is open */
|
||||
.tpl-forgot { display: none; }
|
||||
body:has(#forgot:target) .tpl-forgot { display: flex; }
|
||||
.tpl-controls .segmented { padding: 1px; }
|
||||
.tpl-controls .segmented label { padding: 3px 8px; }
|
||||
|
||||
/* =============================================================
|
||||
Field-level errors (e.g. "email already used"), server-driven.
|
||||
The server re-renders the field's form with a state class and
|
||||
adds aria-invalid="true" to the input:
|
||||
<section id="register" class="auth-view state-email-taken"> … </section>
|
||||
Reusable: drop a <p class="field-error"> under any field and gate
|
||||
it on whatever state your server sets.
|
||||
============================================================= */
|
||||
.field-error {
|
||||
display: none; align-items: center; gap: 6px; margin: 0;
|
||||
font-size: var(--fz-xs); color: var(--neg);
|
||||
}
|
||||
.field-error > .ico { flex: 0 0 auto; color: var(--neg); }
|
||||
.field-error a { color: var(--neg); font-weight: 600; text-decoration: underline; }
|
||||
|
||||
/* register form-level error banner (pairs with field-level errors) */
|
||||
.register-alert { display: none; }
|
||||
|
||||
/* --- state A: email already taken — field-level error only --- */
|
||||
#register.state-email-taken .err-email,
|
||||
body:has(#rstate-taken:checked) #register .err-email { display: flex; }
|
||||
#register.state-email-taken #reg-email,
|
||||
body:has(#rstate-taken:checked) #register #reg-email { border-color: var(--neg); }
|
||||
|
||||
/* --- state B: multiple errors — banner + several field errors together --- */
|
||||
#register.state-invalid .register-alert,
|
||||
body:has(#rstate-combined:checked) #register .register-alert { display: flex; }
|
||||
#register.state-invalid .err-email,
|
||||
#register.state-invalid .err-password,
|
||||
body:has(#rstate-combined:checked) #register .err-email,
|
||||
body:has(#rstate-combined:checked) #register .err-password { display: flex; }
|
||||
#register.state-invalid #reg-email,
|
||||
#register.state-invalid #reg-password,
|
||||
body:has(#rstate-combined:checked) #register #reg-email,
|
||||
body:has(#rstate-combined:checked) #register #reg-password { border-color: var(--neg); }
|
||||
|
||||
/* red focus ring on any invalid register input */
|
||||
#register.state-email-taken #reg-email:focus,
|
||||
#register.state-invalid #reg-email:focus,
|
||||
#register.state-invalid #reg-password:focus,
|
||||
body:has(#rstate-taken:checked) #register #reg-email:focus,
|
||||
body:has(#rstate-combined:checked) #register #reg-email:focus,
|
||||
body:has(#rstate-combined:checked) #register #reg-password:focus { box-shadow: 0 0 0 2px var(--neg-bg); }
|
||||
|
||||
/* the Register-state control only appears while the register view is open */
|
||||
.tpl-register { display: none; }
|
||||
body:has(#register:target) .tpl-register { display: flex; }
|
||||
639
html-css-foundation/styles.css
Normal file
639
html-css-foundation/styles.css
Normal file
@@ -0,0 +1,639 @@
|
||||
/* =============================================================
|
||||
App Shell Template — pure HTML/CSS, no JavaScript
|
||||
-------------------------------------------------------------
|
||||
Architecture
|
||||
- Design tokens via light-dark() so theme follows system by
|
||||
default and can be forced Light / Dark via radio + :has().
|
||||
- Everything is a reusable "block": .nav-item, .filter,
|
||||
.chip, .badge, .btn, .menu, .table — combine freely.
|
||||
============================================================= */
|
||||
|
||||
/* ---------- 1. TOKENS ----------------------------------------
|
||||
Two raw palettes (--l-* light, --d-* dark) are defined once.
|
||||
A small mapping (--bg: var(--l-bg) ...) picks the active set.
|
||||
Theme resolution (no JS):
|
||||
• default + @media(dark) → follows the OS (Auto)
|
||||
• html:has(#theme-light) → force light
|
||||
• html:has(#theme-dark) → force dark
|
||||
We avoid light-dark()/color-scheme for app colors because their
|
||||
resolution is unreliable across engines; :has() variable swaps
|
||||
are rock-solid. color-scheme is still set as a hint for native
|
||||
widgets (date picker, scrollbars, selects).
|
||||
------------------------------------------------------------- */
|
||||
:root {
|
||||
/* ---- raw LIGHT palette ---- */
|
||||
--l-bg:#f3f3f4; --l-surface:#ffffff; --l-surface-2:#f6f6f7; --l-surface-3:#fbfbfc;
|
||||
--l-border:#e5e5e8; --l-border-2:#d6d6da;
|
||||
--l-text:#18181b; --l-text-muted:#6b6b73; --l-text-faint:#9a9aa2;
|
||||
--l-accent:oklch(0.52 0.12 256); --l-accent-bg:oklch(0.96 0.03 256);
|
||||
--l-accent-bd:oklch(0.82 0.07 256); --l-focus:oklch(0.52 0.14 256);
|
||||
--l-pos:oklch(0.54 0.13 150); --l-pos-bg:oklch(0.95 0.03 150); --l-pos-bd:oklch(0.83 0.07 150);
|
||||
--l-neg:oklch(0.55 0.18 25); --l-neg-bg:oklch(0.96 0.03 25); --l-neg-bd:oklch(0.85 0.08 25);
|
||||
--l-warn:oklch(0.55 0.12 75); --l-warn-bg:oklch(0.96 0.04 85); --l-warn-bd:oklch(0.84 0.08 85);
|
||||
--l-info:oklch(0.54 0.12 245);--l-info-bg:oklch(0.96 0.03 245);--l-info-bd:oklch(0.83 0.07 245);
|
||||
|
||||
/* ---- raw DARK palette ---- */
|
||||
--d-bg:#0d0d0f; --d-surface:#161619; --d-surface-2:#1d1d22; --d-surface-3:#1a1a1e;
|
||||
--d-border:#2a2a31; --d-border-2:#3a3a43;
|
||||
--d-text:#ededf0; --d-text-muted:#9b9ba6; --d-text-faint:#6a6a74;
|
||||
--d-accent:oklch(0.70 0.12 256); --d-accent-bg:oklch(0.32 0.06 256);
|
||||
--d-accent-bd:oklch(0.48 0.08 256); --d-focus:oklch(0.74 0.13 256);
|
||||
--d-pos:oklch(0.74 0.14 150); --d-pos-bg:oklch(0.30 0.05 150); --d-pos-bd:oklch(0.45 0.07 150);
|
||||
--d-neg:oklch(0.74 0.16 25); --d-neg-bg:oklch(0.30 0.07 25); --d-neg-bd:oklch(0.47 0.10 25);
|
||||
--d-warn:oklch(0.80 0.13 85); --d-warn-bg:oklch(0.31 0.05 80); --d-warn-bd:oklch(0.48 0.07 80);
|
||||
--d-info:oklch(0.74 0.12 245);--d-info-bg:oklch(0.31 0.06 245);--d-info-bd:oklch(0.47 0.08 245);
|
||||
|
||||
/* ---- active mapping: default = LIGHT ---- */
|
||||
--bg:var(--l-bg); --surface:var(--l-surface); --surface-2:var(--l-surface-2); --surface-3:var(--l-surface-3);
|
||||
--border:var(--l-border); --border-2:var(--l-border-2);
|
||||
--text:var(--l-text); --text-muted:var(--l-text-muted); --text-faint:var(--l-text-faint);
|
||||
--accent:var(--l-accent); --accent-bg:var(--l-accent-bg); --accent-bd:var(--l-accent-bd); --focus:var(--l-focus);
|
||||
--pos:var(--l-pos); --pos-bg:var(--l-pos-bg); --pos-bd:var(--l-pos-bd);
|
||||
--neg:var(--l-neg); --neg-bg:var(--l-neg-bg); --neg-bd:var(--l-neg-bd);
|
||||
--warn:var(--l-warn); --warn-bg:var(--l-warn-bg); --warn-bd:var(--l-warn-bd);
|
||||
--info:var(--l-info); --info-bg:var(--l-info-bg); --info-bd:var(--l-info-bd);
|
||||
color-scheme: light;
|
||||
|
||||
/* layout + density (compact) */
|
||||
--radius: 5px;
|
||||
--nav-w: 264px;
|
||||
--row-h: 34px;
|
||||
--pad-x: 12px;
|
||||
--fz: 13px;
|
||||
--fz-sm: 12px;
|
||||
--fz-xs: 11px;
|
||||
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: var(--fz);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* shared DARK mapping, applied to Auto-via-OS and forced-dark */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(:has(#theme-light:checked)):not(:has(#theme-dark:checked)) {
|
||||
--bg:var(--d-bg); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --surface-3:var(--d-surface-3);
|
||||
--border:var(--d-border); --border-2:var(--d-border-2);
|
||||
--text:var(--d-text); --text-muted:var(--d-text-muted); --text-faint:var(--d-text-faint);
|
||||
--accent:var(--d-accent); --accent-bg:var(--d-accent-bg); --accent-bd:var(--d-accent-bd); --focus:var(--d-focus);
|
||||
--pos:var(--d-pos); --pos-bg:var(--d-pos-bg); --pos-bd:var(--d-pos-bd);
|
||||
--neg:var(--d-neg); --neg-bg:var(--d-neg-bg); --neg-bd:var(--d-neg-bd);
|
||||
--warn:var(--d-warn); --warn-bg:var(--d-warn-bg); --warn-bd:var(--d-warn-bd);
|
||||
--info:var(--d-info); --info-bg:var(--d-info-bg); --info-bd:var(--d-info-bd);
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
/* forced DARK (overrides everything) */
|
||||
html:has(#theme-dark:checked) {
|
||||
--bg:var(--d-bg); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --surface-3:var(--d-surface-3);
|
||||
--border:var(--d-border); --border-2:var(--d-border-2);
|
||||
--text:var(--d-text); --text-muted:var(--d-text-muted); --text-faint:var(--d-text-faint);
|
||||
--accent:var(--d-accent); --accent-bg:var(--d-accent-bg); --accent-bd:var(--d-accent-bd); --focus:var(--d-focus);
|
||||
--pos:var(--d-pos); --pos-bg:var(--d-pos-bg); --pos-bd:var(--d-pos-bd);
|
||||
--neg:var(--d-neg); --neg-bg:var(--d-neg-bg); --neg-bd:var(--d-neg-bd);
|
||||
--warn:var(--d-warn); --warn-bg:var(--d-warn-bg); --warn-bd:var(--d-warn-bd);
|
||||
--info:var(--d-info); --info-bg:var(--d-info-bg); --info-bd:var(--d-info-bd);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* forced LIGHT (overrides the OS-dark media query) */
|
||||
html:has(#theme-light:checked) {
|
||||
--bg:var(--l-bg); --surface:var(--l-surface); --surface-2:var(--l-surface-2); --surface-3:var(--l-surface-3);
|
||||
--border:var(--l-border); --border-2:var(--l-border-2);
|
||||
--text:var(--l-text); --text-muted:var(--l-text-muted); --text-faint:var(--l-text-faint);
|
||||
--accent:var(--l-accent); --accent-bg:var(--l-accent-bg); --accent-bd:var(--l-accent-bd); --focus:var(--l-focus);
|
||||
--pos:var(--l-pos); --pos-bg:var(--l-pos-bg); --pos-bd:var(--l-pos-bd);
|
||||
--neg:var(--l-neg); --neg-bg:var(--l-neg-bg); --neg-bd:var(--l-neg-bd);
|
||||
--warn:var(--l-warn); --warn-bg:var(--l-warn-bg); --warn-bd:var(--l-warn-bd);
|
||||
--info:var(--l-info); --info-bg:var(--l-info-bg); --info-bd:var(--l-info-bd);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
/* ---------- 2. RESET ---------------------------------------- */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; background: var(--bg); color: var(--text);
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
button { font: inherit; color: inherit; }
|
||||
ul { list-style: none; margin: 0; padding: 0; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
summary::-webkit-details-marker { display: none; }
|
||||
summary { list-style: none; cursor: pointer; }
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: 1px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.sidebar, .scrim, summary, .nav-item, .btn, .chip { transition: .15s ease; }
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
|
||||
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
||||
}
|
||||
|
||||
/* tiny icon helper */
|
||||
.ico { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor;
|
||||
stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.ico-sm { width: 14px; height: 14px; }
|
||||
|
||||
/* ---------- 3. APP GRID ------------------------------------- */
|
||||
.app {
|
||||
display: grid;
|
||||
grid-template-columns: var(--nav-w) minmax(0, 1fr);
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ---------- 4. SIDEBAR -------------------------------------- */
|
||||
.sidebar {
|
||||
grid-column: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
background: var(--surface);
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
.brand {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
height: 48px; padding: 0 14px; flex: 0 0 auto;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.brand-mark {
|
||||
width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto;
|
||||
background: var(--accent);
|
||||
display: grid; place-items: center; color: #fff;
|
||||
}
|
||||
.brand-mark .ico { stroke: #fff; }
|
||||
.brand-name { font-weight: 650; letter-spacing: -.01em; }
|
||||
.brand-sub { color: var(--text-faint); font-size: var(--fz-xs); margin-left: auto; }
|
||||
|
||||
/* nav scroll region */
|
||||
.nav {
|
||||
flex: 1 1 auto; min-height: 0; overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
/* ============================================================
|
||||
UNIFIED NAV NODE — ONE component for every menu item.
|
||||
A node is a row: [ toggle | spacer ] + [ label ]
|
||||
• HEADER = the node HAS children → renders the chevron toggle.
|
||||
Childless nodes render a spacer so labels stay aligned.
|
||||
• CLICKABLE = label is <a href> → navigates on click.
|
||||
STATIC = label is <span> → not a navigation target.
|
||||
So "header" and "clickable" are independent: any combination works.
|
||||
Children sit in a sibling <ul class="nav-children">, revealed by
|
||||
:has() on THIS row's own <details open> (scoped with > so a node
|
||||
only ever controls its own subtree — infinite depth, no JS).
|
||||
============================================================ */
|
||||
.nav-row { display: flex; align-items: center; gap: 2px; }
|
||||
|
||||
/* toggle — only present on nodes that have children */
|
||||
.nav-disc { display: flex; flex: 0 0 auto; }
|
||||
.nav-tog {
|
||||
width: 22px; height: 30px; flex: 0 0 auto;
|
||||
display: grid; place-items: center;
|
||||
border-radius: var(--radius); color: var(--text-faint); cursor: pointer;
|
||||
}
|
||||
.nav-tog .chev { width: 14px; height: 14px; transition: transform .15s ease; }
|
||||
.nav-tog:hover { background: var(--surface-2); color: var(--text); }
|
||||
.nav-disc[open] .nav-tog .chev { transform: rotate(90deg); }
|
||||
/* spacer keeps childless rows aligned under their siblings' labels */
|
||||
.nav-spacer { width: 22px; flex: 0 0 auto; }
|
||||
|
||||
/* the label element — <a> when clickable, <span> when static */
|
||||
.nav-self {
|
||||
flex: 1 1 auto; min-width: 0;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
min-height: 30px; padding: 4px 8px;
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-muted); font-size: var(--fz);
|
||||
position: relative; user-select: none;
|
||||
}
|
||||
a.nav-self:hover { background: var(--surface-2); color: var(--text); }
|
||||
.nav-self .ico { color: var(--text-faint); }
|
||||
a.nav-self:hover .ico { color: var(--text-muted); }
|
||||
span.nav-self { cursor: default; } /* static / non-clickable */
|
||||
.nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden;
|
||||
text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* active item */
|
||||
.nav-self[aria-current="page"] {
|
||||
background: var(--accent-bg); color: var(--text); font-weight: 550;
|
||||
}
|
||||
.nav-self[aria-current="page"]::before {
|
||||
content: ""; position: absolute; left: -2px; top: 6px; bottom: 6px;
|
||||
width: 2px; border-radius: 2px; background: var(--accent);
|
||||
}
|
||||
.nav-self[aria-current="page"] .ico { color: var(--accent); }
|
||||
|
||||
/* children + infinite indentation with a guide line per level */
|
||||
.nav-node > .nav-children { display: none; }
|
||||
.nav-node:has(> .nav-row > .nav-disc[open]) > .nav-children { display: block; }
|
||||
.nav-children { padding-left: 22px; position: relative; }
|
||||
.nav-children::before {
|
||||
content: ""; position: absolute; left: 10px; top: 2px; bottom: 2px;
|
||||
width: 1px; background: var(--border);
|
||||
}
|
||||
|
||||
/* count pill on any row */
|
||||
.nav-count {
|
||||
margin-left: auto; font-size: var(--fz-xs); color: var(--text-faint);
|
||||
background: var(--surface-2); border: 1px solid var(--border);
|
||||
border-radius: 99px; padding: 0 6px; line-height: 16px; min-width: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---------- 5. SIDEBAR FOOTER ------------------------------- */
|
||||
.side-footer {
|
||||
flex: 0 0 auto; border-top: 1px solid var(--border);
|
||||
padding: 8px; display: flex; flex-direction: column; gap: 6px;
|
||||
}
|
||||
|
||||
/* theme segmented control */
|
||||
.theme-switch {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2px; padding: 2px;
|
||||
background: var(--surface-3); border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.theme-switch label {
|
||||
display: flex; align-items: center; justify-content: center; gap: 5px;
|
||||
font-size: var(--fz-xs); color: var(--text-muted);
|
||||
padding: 4px 2px; border-radius: 3px; cursor: pointer; position: relative;
|
||||
}
|
||||
.theme-switch label:hover { color: var(--text); }
|
||||
.theme-switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
|
||||
.theme-switch label:has(input:checked) {
|
||||
background: var(--surface); color: var(--text);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.06); font-weight: 550;
|
||||
}
|
||||
.theme-switch label:has(input:focus-visible) {
|
||||
outline: 2px solid var(--focus); outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* profile / settings row */
|
||||
.footer-actions { display: flex; align-items: center; gap: 4px; }
|
||||
.profile {
|
||||
display: flex; align-items: center; gap: 9px; flex: 1 1 auto;
|
||||
padding: 5px 8px; border-radius: var(--radius); cursor: pointer;
|
||||
background: transparent; border: 1px solid transparent; text-align: left;
|
||||
min-width: 0;
|
||||
}
|
||||
.profile:hover { background: var(--surface-2); border-color: var(--border); }
|
||||
.avatar {
|
||||
width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
|
||||
background: var(--accent-bg); color: var(--accent);
|
||||
display: grid; place-items: center; font-size: var(--fz-xs); font-weight: 650;
|
||||
border: 1px solid var(--accent-bd);
|
||||
}
|
||||
.profile-meta { min-width: 0; line-height: 1.2; }
|
||||
.profile-name { font-size: var(--fz-sm); font-weight: 550;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.profile-mail { font-size: var(--fz-xs); color: var(--text-faint);
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* ---------- 6. BUTTONS / ICON BUTTONS ----------------------- */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
height: 30px; padding: 0 10px;
|
||||
background: var(--surface); color: var(--text);
|
||||
border: 1px solid var(--border-2); border-radius: var(--radius);
|
||||
font-size: var(--fz-sm); cursor: pointer; white-space: nowrap;
|
||||
}
|
||||
.btn:hover { background: var(--surface-2); }
|
||||
.btn-primary { background: var(--accent); border-color: var(--accent);
|
||||
color: #fff; font-weight: 550; }
|
||||
.btn-primary:hover { filter: brightness(1.06); }
|
||||
.btn-ghost { background: transparent; border-color: transparent; }
|
||||
.btn-ghost:hover { background: var(--surface-2); }
|
||||
.icon-btn {
|
||||
width: 30px; height: 30px; padding: 0; justify-content: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.icon-btn:hover { color: var(--text); }
|
||||
|
||||
/* ---------- 7. CONTENT AREA -------------------------------- */
|
||||
.content {
|
||||
grid-column: 2;
|
||||
display: flex; flex-direction: column;
|
||||
min-width: 0; min-height: 0;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* topbar (page title + hamburger on mobile) */
|
||||
.topbar {
|
||||
flex: 0 0 auto; height: 48px;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 0 16px; border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
.hamburger { display: none; } /* shown only on narrow */
|
||||
.page-title { font-weight: 600; letter-spacing: -.01em; font-size: 14px; }
|
||||
.page-sub { color: var(--text-faint); font-size: var(--fz-sm); }
|
||||
.topbar-spacer { flex: 1 1 auto; }
|
||||
.crumbs { display: flex; align-items: center; gap: 6px;
|
||||
color: var(--text-faint); font-size: var(--fz-sm); }
|
||||
.crumbs a:hover { color: var(--text); }
|
||||
.crumbs .sep { color: var(--border-2); }
|
||||
|
||||
/* ---------- 8. FILTER BAR (lego blocks) -------------------- */
|
||||
.filters {
|
||||
flex: 0 0 auto; background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 10px 16px;
|
||||
display: flex; flex-direction: column; gap: 9px;
|
||||
}
|
||||
.filter-row {
|
||||
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
||||
}
|
||||
.filter-row .spacer { flex: 1 1 auto; }
|
||||
|
||||
/* generic filter shell so blocks line up */
|
||||
.filter {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
height: 30px;
|
||||
}
|
||||
.filter-label { font-size: var(--fz-xs); color: var(--text-faint);
|
||||
text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
|
||||
|
||||
/* fieldset wrappers reset to behave as inline groups */
|
||||
.filter-field {
|
||||
border: 0; margin: 0; padding: 0; min-width: 0;
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.filter-legend {
|
||||
padding: 0; font-size: var(--fz-xs); color: var(--text-faint);
|
||||
text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
|
||||
}
|
||||
.menu-field { border: 0; margin: 0; padding: 0; min-width: 0; }
|
||||
|
||||
/* form action footer */
|
||||
.filter-foot { padding-top: 2px; }
|
||||
.filter-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
|
||||
|
||||
/* search */
|
||||
.search {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
height: 30px; padding: 0 9px; min-width: 220px;
|
||||
background: var(--surface-3); border: 1px solid var(--border-2);
|
||||
border-radius: var(--radius); color: var(--text-faint);
|
||||
}
|
||||
.search:focus-within { border-color: var(--accent); color: var(--text-muted); }
|
||||
.search input {
|
||||
border: 0; background: transparent; outline: none; color: var(--text);
|
||||
font: inherit; font-size: var(--fz-sm); width: 100%;
|
||||
}
|
||||
|
||||
/* select */
|
||||
.select {
|
||||
position: relative; display: inline-flex; align-items: center;
|
||||
}
|
||||
.select select {
|
||||
appearance: none; height: 30px; padding: 0 26px 0 9px;
|
||||
background: var(--surface); color: var(--text);
|
||||
border: 1px solid var(--border-2); border-radius: var(--radius);
|
||||
font: inherit; font-size: var(--fz-sm); cursor: pointer;
|
||||
}
|
||||
.select::after {
|
||||
content: ""; position: absolute; right: 10px; pointer-events: none;
|
||||
width: 7px; height: 7px; border-right: 1.5px solid var(--text-faint);
|
||||
border-bottom: 1.5px solid var(--text-faint); transform: translateY(-2px) rotate(45deg);
|
||||
}
|
||||
.select select:focus-visible { border-color: var(--accent); outline: none;
|
||||
box-shadow: 0 0 0 2px var(--accent-bg); }
|
||||
|
||||
/* segmented toggle (radios) */
|
||||
.segmented {
|
||||
display: inline-flex; padding: 2px; gap: 2px;
|
||||
background: var(--surface-3); border: 1px solid var(--border-2);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.segmented label {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
font-size: var(--fz-sm); color: var(--text-muted);
|
||||
padding: 3px 10px; border-radius: 3px; cursor: pointer; position: relative;
|
||||
}
|
||||
.segmented label:hover { color: var(--text); }
|
||||
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
|
||||
.segmented label:has(input:checked) {
|
||||
background: var(--surface); color: var(--text); font-weight: 550;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.06);
|
||||
}
|
||||
.segmented label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
|
||||
.seg-count { font-size: var(--fz-xs); color: var(--text-faint); }
|
||||
|
||||
/* chips (multi-select checkboxes) */
|
||||
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
|
||||
.chip {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
height: 26px; padding: 0 10px;
|
||||
background: var(--surface); border: 1px solid var(--border-2);
|
||||
border-radius: 99px; font-size: var(--fz-sm); color: var(--text-muted);
|
||||
cursor: pointer; position: relative; white-space: nowrap;
|
||||
}
|
||||
.chip:hover { background: var(--surface-2); color: var(--text); }
|
||||
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
|
||||
.chip .chip-dot { width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--border-2); }
|
||||
.chip:has(input:checked) {
|
||||
background: var(--accent-bg); border-color: var(--accent-bd);
|
||||
color: var(--text); font-weight: 550;
|
||||
}
|
||||
.chip:has(input:checked) .chip-dot { background: var(--accent); }
|
||||
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
|
||||
|
||||
/* date range */
|
||||
.daterange {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
height: 30px; padding: 0 9px;
|
||||
background: var(--surface); border: 1px solid var(--border-2);
|
||||
border-radius: var(--radius); color: var(--text-faint);
|
||||
}
|
||||
.daterange input[type="date"] {
|
||||
border: 0; background: transparent; color: var(--text); font: inherit;
|
||||
font-size: var(--fz-sm); outline: none; min-width: 116px;
|
||||
}
|
||||
.daterange .to { color: var(--text-faint); font-size: var(--fz-xs); }
|
||||
.daterange:focus-within { border-color: var(--accent); }
|
||||
|
||||
/* checkbox / radio primitives (reusable) */
|
||||
.check, .radio {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
font-size: var(--fz-sm); color: var(--text-muted); cursor: pointer;
|
||||
}
|
||||
.check input, .radio input { width: 15px; height: 15px; accent-color: var(--accent);
|
||||
margin: 0; cursor: pointer; }
|
||||
.check:hover, .radio:hover { color: var(--text); }
|
||||
|
||||
/* popover menu (column settings, kebab, etc.) — pure <details> */
|
||||
.menu { position: relative; display: inline-flex; }
|
||||
.menu > summary { display: inline-flex; }
|
||||
.menu > summary::after { content: none; }
|
||||
.menu-pop {
|
||||
position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
|
||||
min-width: 210px; padding: 6px;
|
||||
background: var(--surface); border: 1px solid var(--border-2);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 8px 28px rgba(0,0,0,.16);
|
||||
}
|
||||
.menu-pop.left { right: auto; left: 0; }
|
||||
.menu-head { font-size: var(--fz-xs); text-transform: uppercase;
|
||||
letter-spacing: .05em; color: var(--text-faint); font-weight: 600;
|
||||
padding: 5px 8px; }
|
||||
.menu-item {
|
||||
display: flex; align-items: center; gap: 9px; width: 100%;
|
||||
padding: 6px 8px; border-radius: 4px; font-size: var(--fz-sm);
|
||||
color: var(--text); background: transparent; border: 0; cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.menu-item:hover { background: var(--surface-2); }
|
||||
.menu-item.danger { color: var(--neg); }
|
||||
.menu-item .ico { color: var(--text-faint); }
|
||||
.menu-item.danger .ico { color: var(--neg); }
|
||||
.menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
|
||||
.menu-check { display: flex; align-items: center; gap: 9px; width: 100%;
|
||||
padding: 6px 8px; border-radius: 4px; font-size: var(--fz-sm); cursor: pointer; }
|
||||
.menu-check:hover { background: var(--surface-2); }
|
||||
.menu-check input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
|
||||
|
||||
/* active filter pills */
|
||||
.active-pills { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
|
||||
.pill {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
height: 24px; padding: 0 4px 0 9px;
|
||||
background: var(--surface-2); border: 1px solid var(--border);
|
||||
border-radius: 99px; font-size: var(--fz-xs); color: var(--text-muted);
|
||||
}
|
||||
.pill b { color: var(--text); font-weight: 600; }
|
||||
.pill .pill-x {
|
||||
display: grid; place-items: center; width: 16px; height: 16px;
|
||||
border-radius: 50%; color: var(--text-faint); background: transparent;
|
||||
border: 0; cursor: pointer;
|
||||
}
|
||||
.pill .pill-x:hover { background: var(--border-2); color: var(--text); }
|
||||
.pill-clear { font-size: var(--fz-xs); color: var(--accent); cursor: pointer;
|
||||
background: 0; border: 0; padding: 0 4px; }
|
||||
.pill-clear:hover { text-decoration: underline; }
|
||||
|
||||
/* ---------- 9. TABLE --------------------------------------- */
|
||||
.table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
|
||||
table.table {
|
||||
width: 100%; border-collapse: separate; border-spacing: 0;
|
||||
font-size: var(--fz); font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.table thead th {
|
||||
position: sticky; top: 0; z-index: 10;
|
||||
background: var(--surface-3);
|
||||
border-bottom: 1px solid var(--border-2);
|
||||
color: var(--text-muted); font-weight: 600; font-size: var(--fz-xs);
|
||||
text-transform: uppercase; letter-spacing: .04em;
|
||||
text-align: left; padding: 0 var(--pad-x); height: var(--row-h);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table tbody td {
|
||||
padding: 0 var(--pad-x); height: var(--row-h);
|
||||
border-bottom: 1px solid var(--border);
|
||||
white-space: nowrap; color: var(--text);
|
||||
}
|
||||
.table tbody tr:hover td { background: var(--surface-2); }
|
||||
.table tbody tr:has(.row-select:checked) td { background: var(--accent-bg); }
|
||||
.col-check { width: 36px; text-align: center; padding: 0; }
|
||||
.col-check input { accent-color: var(--accent); width: 15px; height: 15px;
|
||||
margin: 0; vertical-align: middle; }
|
||||
.col-num { text-align: right; }
|
||||
.cell-strong { font-weight: 550; }
|
||||
.cell-muted { color: var(--text-muted); }
|
||||
.cell-mono { font-variant-numeric: tabular-nums;
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fz-sm); }
|
||||
|
||||
/* sortable header button */
|
||||
.th-sort {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
background: 0; border: 0; cursor: pointer; padding: 0; font: inherit;
|
||||
color: inherit; text-transform: inherit; letter-spacing: inherit;
|
||||
}
|
||||
.th-sort:hover { color: var(--text); }
|
||||
.th-sort .sort-ico { color: var(--text-faint); opacity: .5; }
|
||||
th[aria-sort="ascending"] .th-sort,
|
||||
th[aria-sort="descending"] .th-sort { color: var(--text); }
|
||||
th[aria-sort="ascending"] .sort-ico,
|
||||
th[aria-sort="descending"] .sort-ico { opacity: 1; color: var(--accent); }
|
||||
th[aria-sort="descending"] .sort-ico { transform: rotate(180deg); }
|
||||
|
||||
/* mini avatar cell */
|
||||
.cell-user { display: inline-flex; align-items: center; gap: 8px; }
|
||||
.cell-user .avatar { width: 22px; height: 22px; font-size: 9px; }
|
||||
|
||||
/* badges (semantic) */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
height: 19px; padding: 0 8px; border-radius: 99px;
|
||||
font-size: var(--fz-xs); font-weight: 550; line-height: 1;
|
||||
border: 1px solid var(--border-2); background: var(--surface-2);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||||
.badge.pos { color: var(--pos); background: var(--pos-bg); border-color: var(--pos-bd); }
|
||||
.badge.neg { color: var(--neg); background: var(--neg-bg); border-color: var(--neg-bd); }
|
||||
.badge.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
|
||||
.badge.info { color: var(--info); background: var(--info-bg); border-color: var(--info-bd); }
|
||||
|
||||
/* row kebab */
|
||||
.col-actions { width: 44px; text-align: center; }
|
||||
.kebab summary { width: 26px; height: 26px; border-radius: var(--radius);
|
||||
display: grid; place-items: center; color: var(--text-faint); margin: 0 auto; }
|
||||
.kebab summary:hover { background: var(--surface-2); color: var(--text); }
|
||||
.kebab[open] summary { background: var(--surface-2); color: var(--text); }
|
||||
|
||||
/* ---------- 10. PAGINATION --------------------------------- */
|
||||
.pager {
|
||||
flex: 0 0 auto;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 8px 16px; border-top: 1px solid var(--border);
|
||||
background: var(--surface); font-size: var(--fz-sm); color: var(--text-muted);
|
||||
}
|
||||
.pager .spacer { flex: 1 1 auto; }
|
||||
.pager-rows { display: inline-flex; align-items: center; gap: 7px; }
|
||||
.page-nums { display: inline-flex; gap: 3px; }
|
||||
.page-btn {
|
||||
min-width: 28px; height: 28px; padding: 0 6px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
border: 1px solid var(--border-2); background: var(--surface);
|
||||
border-radius: var(--radius); cursor: pointer; font-size: var(--fz-sm);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.page-btn:hover { background: var(--surface-2); color: var(--text); }
|
||||
.page-btn[aria-current="page"] { background: var(--accent); border-color: var(--accent);
|
||||
color: #fff; font-weight: 600; }
|
||||
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
|
||||
|
||||
/* ---------- 11. RESPONSIVE / HAMBURGER --------------------- */
|
||||
.scrim { display: none; }
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.app { grid-template-columns: minmax(0, 1fr); }
|
||||
.sidebar {
|
||||
position: fixed; inset: 0 auto 0 0; width: min(86vw, var(--nav-w));
|
||||
z-index: 60; transform: translateX(-100%);
|
||||
box-shadow: 2px 0 24px rgba(0,0,0,.18);
|
||||
}
|
||||
.content { grid-column: 1; }
|
||||
.hamburger { display: inline-flex; }
|
||||
|
||||
/* checkbox-driven open state */
|
||||
body:has(#nav-toggle:checked) .sidebar { transform: translateX(0); }
|
||||
body:has(#nav-toggle:checked) .scrim {
|
||||
display: block; position: fixed; inset: 0; z-index: 50;
|
||||
background: rgba(0,0,0,.42);
|
||||
}
|
||||
.search { min-width: 150px; flex: 1 1 auto; }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.crumbs, .page-sub { display: none; }
|
||||
.filter-label { display: none; }
|
||||
}
|
||||
|
||||
/* the nav-toggle checkbox itself is visually hidden but focusable */
|
||||
#nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
|
||||
Reference in New Issue
Block a user