mirror of
https://github.com/kbenestad/reimburse.git
synced 2026-06-18 08:04:31 +00:00
Add subtle app bar with reimburse glyph
Thin 34px strip at the top of the page — the reimburse icon (card/ banknote outline glyph from dev/design_assets/reimburse-glyph.svg) at 16px, 50% opacity, in var(--text-muted). One hairline border below. aria-hidden so it is invisible to screen readers. https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
This commit is contained in:
parent
345e285d30
commit
3f7fcf47ed
1 changed files with 14 additions and 0 deletions
|
|
@ -332,6 +332,13 @@ body{
|
|||
.kb-footer a:hover{color:var(--accent);text-decoration:underline;}
|
||||
.kb-footer .sep{opacity:.45;}
|
||||
|
||||
/* ── App bar ──────────────────────────────────────────────────────────────── */
|
||||
.app-bar{
|
||||
height:34px;display:flex;align-items:center;padding:0 20px;
|
||||
border-bottom:1px solid var(--border);background:var(--surface);
|
||||
}
|
||||
.app-bar svg{width:16px;height:16px;color:var(--text-muted);opacity:.5;}
|
||||
|
||||
/* ── Loading ──────────────────────────────────────────────────────────────── */
|
||||
.kb-loading{text-align:center;padding:80px;color:var(--text-muted);}
|
||||
|
||||
|
|
@ -345,6 +352,13 @@ body{
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="app-bar" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="7.5" y="14" width="33" height="20" rx="3.2" stroke-width="2.8"/>
|
||||
<circle cx="24" cy="24" r="4.6" stroke-width="2.6"/>
|
||||
<path d="M12.7 21.4V26.6M35.3 21.4V26.6" stroke-width="2.6"/>
|
||||
</svg>
|
||||
</header>
|
||||
<div id="app"><p class="kb-loading">Loading configuration…</p></div>
|
||||
<footer class="kb-footer">
|
||||
<span>© 2026 Kristian Benestad</span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue