Redesign UI color system: neutral ink chrome, sources own the chroma
The light lavender theme carried its color in decoration -- four colored background blobs, a conic-gradient brand mark, gradient-clipped wordmark, a four-color animated button, a spinning conic empty mark, and a five-color spectrum rail. All of that competed with the only color on screen that carries meaning: which source a story came from. - One indigo-slate ink ramp (bg / surface / line / ink) carries every neutral surface; the only saturated hues are the three sources, used strictly as signals -- filter pill, card spine, source chip, timestamp, feed health. - Rule for every filled state: bright fill, deep ink type. Source tokens kept in sync between :root and View::sourceColor(). - Signature "signal bars": a CSS brand mark of three ascending bars in the source hues, and the header rail re-cut into three wire segments that double as the palette legend. The empty state reuses the mark, unlit and static. - Bootstrap switched to data-bs-theme="dark" with matching form controls, alerts, and focus rings; --ink-faint recalibrated so small text clears WCAG 4.5:1 on every surface. Reduced-motion behavior unchanged. - README documents the two rules next to View::sourceColor().
This commit is contained in:
@@ -39,7 +39,7 @@ $errors = $refresh['errors'] ?? [];
|
||||
$total = (int) $page['total'];
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="light">
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
@@ -69,7 +69,7 @@ $total = (int) $page['total'];
|
||||
<a class="manage-link" href="manage.php">Manage</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spectrum-rail" aria-hidden="true"></div>
|
||||
<div class="wire-rail" aria-hidden="true"></div>
|
||||
</header>
|
||||
|
||||
<main class="container-xxl py-4">
|
||||
@@ -151,7 +151,7 @@ $total = (int) $page['total'];
|
||||
<div class="text-center mt-5">
|
||||
<button id="load-more"
|
||||
type="button"
|
||||
class="btn btn-energy <?= $page['has_more'] ? '' : 'd-none' ?>">
|
||||
class="btn btn-tally <?= $page['has_more'] ? '' : 'd-none' ?>">
|
||||
<span class="spinner-border spinner-border-sm me-2 d-none" role="status" aria-hidden="true"></span>
|
||||
Load more stories
|
||||
</button>
|
||||
|
||||
@@ -19,7 +19,7 @@ foreach ($feeds as $feed) {
|
||||
$actionUrl = 'manage.php';
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="light">
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
@@ -44,7 +44,7 @@ $actionUrl = 'manage.php';
|
||||
<a class="manage-link" href="index.php">← Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spectrum-rail" aria-hidden="true"></div>
|
||||
<div class="wire-rail" aria-hidden="true"></div>
|
||||
</header>
|
||||
|
||||
<main class="container-xxl py-4 manage-main">
|
||||
@@ -70,7 +70,7 @@ $actionUrl = 'manage.php';
|
||||
<input type="hidden" name="csrf" value="<?= $csrf ?>">
|
||||
<input type="hidden" name="action" value="login">
|
||||
<input type="password" name="input" class="form-control mono" placeholder="Password" required autofocus autocomplete="current-password">
|
||||
<button type="submit" class="btn btn-energy btn-compact">Sign in</button>
|
||||
<button type="submit" class="btn btn-tally btn-compact">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
@@ -91,7 +91,7 @@ $actionUrl = 'manage.php';
|
||||
<input type="text" name="input" class="form-control mono" inputmode="url"
|
||||
placeholder="r/homelab · homelab · reddit.com/r/homelab"
|
||||
required maxlength="300" autocomplete="off">
|
||||
<button type="submit" class="btn btn-energy btn-compact">Add</button>
|
||||
<button type="submit" class="btn btn-tally btn-compact">Add</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,7 +104,7 @@ $actionUrl = 'manage.php';
|
||||
<input type="text" name="input" class="form-control mono" inputmode="url"
|
||||
placeholder="@handle · UC… channel ID · channel URL"
|
||||
required maxlength="300" autocomplete="off">
|
||||
<button type="submit" class="btn btn-energy btn-compact">Add</button>
|
||||
<button type="submit" class="btn btn-tally btn-compact">Add</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user