mirror of
https://github.com/MeshTender/MeshTender.git
synced 2026-09-02 10:03:43 +00:00
114 lines
4.8 KiB
CSS
114 lines
4.8 KiB
CSS
/* MeshTender app-specific styles layered on top of Tabler.
|
|
Everything generic (cards, forms, buttons, tables, badges, dropdowns) comes
|
|
from Tabler; this file only covers things Tabler has no component for: the
|
|
live console/event log, the Leaflet map, and the public-key code block. */
|
|
|
|
/* ---------- Back links (icon + text, plain link — not a button) ----------
|
|
These are navigational "← All organizations" links. Styling them as a plain
|
|
link (rather than .btn .btn-link) avoids the button's inline-flex box being
|
|
icon-height tall but text-width wide, which made the focus/hover state show
|
|
asymmetric padding (flush left/right, padded top/bottom). */
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: var(--tblr-link-color);
|
|
text-decoration: none;
|
|
}
|
|
/* a.back-link beats Tabler's `a:hover:has(.icon){text-decoration:none}`. */
|
|
a.back-link:hover {
|
|
color: var(--tblr-link-hover-color);
|
|
text-decoration: underline;
|
|
}
|
|
.back-link .icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
/* ---------- Public-key / monospace code blocks ---------- */
|
|
code.pk,
|
|
code.pubkey {
|
|
display: block;
|
|
word-break: break-all;
|
|
background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.2));
|
|
border: 1px solid var(--tblr-border-color);
|
|
border-radius: var(--tblr-border-radius);
|
|
padding: 0.5rem 0.625rem;
|
|
font-size: 0.8125rem;
|
|
/* gray-400, not --tblr-secondary (#6b7280): the latter is only 3.67:1 on the
|
|
near-black panel bg and fails WCAG AA for this key/data text. */
|
|
color: var(--tblr-gray-400);
|
|
}
|
|
|
|
/* ---------- Live event / console log ---------- */
|
|
.evlog {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0.75rem;
|
|
background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.25));
|
|
border: 1px solid var(--tblr-border-color);
|
|
border-radius: var(--tblr-border-radius);
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
font-family: var(--tblr-font-monospace);
|
|
font-size: 0.8125rem;
|
|
}
|
|
.evlog:empty { display: none; }
|
|
.evlog.console { max-height: 320px; }
|
|
.ev { padding: 0.15rem 0; border-bottom: 1px solid var(--tblr-border-color-translucent, rgba(255, 255, 255, 0.05)); }
|
|
.ev:last-child { border-bottom: none; }
|
|
/* Colors chosen for WCAG AA (≥4.5:1) on the near-black log background:
|
|
--tblr-secondary (#6b7280) and --tblr-danger (#d63939) only reach ~3.7:1,
|
|
so info uses the lighter gray-400 and errors the lighter danger emphasis. */
|
|
.ev-info { color: var(--tblr-gray-400); }
|
|
.ev-confirmed { color: var(--tblr-success); font-weight: 600; }
|
|
.ev-error, .ev-timeout { color: var(--tblr-danger-text-emphasis); }
|
|
.ev-warning, .ev-denied, .ev-noreply { color: var(--tblr-warning); }
|
|
.ev-debug { color: var(--tblr-info); word-break: break-all; }
|
|
.ev-sent { color: var(--tblr-azure); }
|
|
.ev-reply { color: var(--tblr-body-color); white-space: pre-wrap; }
|
|
|
|
/* ---------- Badge contrast (dark) ----------
|
|
Tabler's light "-lt" badges set their text to the full-strength brand color
|
|
over a 10%-opacity tint. On the dark theme purple (#ae3ec9 → 2.80:1) and
|
|
secondary (#6b7280 → 2.74:1) fall below WCAG AA for this small status text;
|
|
lighten just those two. success/azure/warning/yellow already pass. */
|
|
.badge.bg-purple-lt { color: #d98fe6 !important; }
|
|
.badge.bg-secondary-lt { color: var(--tblr-secondary-text-emphasis) !important; }
|
|
|
|
/* ---------- Step indicator (.steps) ----------
|
|
Tabler ships two unrelated components under the same `.steps` class: the
|
|
horizontal step indicator (ul.steps > li.step-item) we use on the add/added
|
|
wizards, and a numbered documentation list (div.steps > h3). The latter's
|
|
rule sets border-left + a left margin/padding, which also lands on the step
|
|
indicator — drawing a stray vertical line and an empty gap before the first
|
|
step. Undo those just for the indicator usage. */
|
|
.steps:has(> .step-item) {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
border-left: 0;
|
|
}
|
|
|
|
/* ---------- Leaflet map (dark) ---------- */
|
|
#map {
|
|
height: 360px;
|
|
border-radius: var(--tblr-border-radius);
|
|
border: 1px solid var(--tblr-border-color);
|
|
}
|
|
.leaflet-container { background: #14171c; }
|
|
/* Scoped under .leaflet-popup so these beat Leaflet's own defaults, which load
|
|
after app.css (leaflet.css is pulled in per-page in the map card body). */
|
|
.leaflet-popup .leaflet-popup-content-wrapper,
|
|
.leaflet-popup .leaflet-popup-tip {
|
|
background: var(--tblr-bg-surface, #1a1d24);
|
|
color: var(--tblr-body-color, #e6edf3);
|
|
box-shadow: var(--tblr-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.4));
|
|
}
|
|
.leaflet-popup .leaflet-popup-content { color: var(--tblr-body-color, #e6edf3); }
|
|
.leaflet-container .leaflet-bar a,
|
|
.leaflet-container .leaflet-control-zoom a {
|
|
background: var(--tblr-bg-surface, #1a1d24);
|
|
color: var(--tblr-body-color, #e6edf3);
|
|
border-bottom-color: var(--tblr-border-color, #2b2f36);
|
|
}
|
|
.leaflet-container .leaflet-bar a:hover { background: var(--tblr-bg-surface-secondary, #22262e); }
|