rothmanandClaude Opus 5.5
be80288a6e
With no address on any interface (cable out, no wifi) the kiosk now switches to the offline screen right away and returns when the network and server are back. An unreachable server with the network up still leaves the page running for InfoFlow's offline cache. The panel on the local pages loses its blue top edge. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
41 lines
2.7 KiB
CSS
41 lines
2.7 KiB
CSS
/* Local pages shown on the kiosk screen itself (file://). Same look as the InfoFlow
|
|
display (dark theme): flat dark grey, white type, plain panels. */
|
|
:root {
|
|
color-scheme: dark;
|
|
--bg: #111827;
|
|
--panel: rgba(0, 0, 0, .2);
|
|
--line: rgba(255, 255, 255, .1);
|
|
--accent: #2563eb;
|
|
--muted: rgba(255, 255, 255, .7);
|
|
--faint: rgba(255, 255, 255, .45);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; height: 100%; overflow: hidden; cursor: none; user-select: none; }
|
|
body { font-family: ui-sans-serif, system-ui, "DejaVu Sans", "Liberation Sans", Arial, sans-serif; background: var(--bg); color: #fff; }
|
|
|
|
.screen { display: flex; flex-direction: column; height: 100%; padding: 4vmin; transition: transform 2s ease; }
|
|
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4vmin; }
|
|
.name { font-size: clamp(20px, 3.4vmin, 44px); font-weight: 600; }
|
|
.when { text-align: right; }
|
|
.date { font-size: clamp(18px, 3.6vmin, 44px); color: var(--muted); }
|
|
.clock { font-size: clamp(36px, 8vmin, 110px); font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
|
|
|
|
.middle { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3vmin 0; }
|
|
.panel { width: min(100%, 1100px); background: var(--panel); border-radius: 8px; padding: 4.5vmin 5vmin; }
|
|
h1 { font-size: clamp(26px, 4.6vmin, 64px); font-weight: 600; margin: 0 0 1.5vmin; }
|
|
p { font-size: clamp(16px, 2.6vmin, 34px); color: var(--muted); margin: 0 0 1vmin; }
|
|
.link { margin-top: 3.5vmin; padding-top: 2.5vmin; border-top: 1px solid var(--line); font-size: clamp(14px, 2.2vmin, 28px); color: var(--muted); overflow-wrap: anywhere; }
|
|
.link .url { font-family: "DejaVu Sans Mono", ui-monospace, monospace; color: #fff; }
|
|
|
|
.bottom { display: flex; justify-content: space-between; gap: 4vmin; font-size: clamp(12px, 1.9vmin, 24px); color: var(--faint); }
|
|
|
|
.progress { height: 4px; margin-top: 4vmin; background: var(--line); border-radius: 2px; overflow: hidden; }
|
|
.progress span { display: block; width: 30%; height: 100%; background: var(--accent); animation: slide 1.8s ease-in-out infinite; }
|
|
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
|
|
|
|
/* setup page */
|
|
.urls { list-style: none; padding: 0; margin: 1.5vmin 0 3vmin; }
|
|
.urls li { font-family: "DejaVu Sans Mono", ui-monospace, monospace; font-size: clamp(18px, 3.2vmin, 44px); margin: .8vmin 0; }
|
|
.code { display: inline-block; font-family: "DejaVu Sans Mono", ui-monospace, monospace; font-size: clamp(40px, 9vmin, 130px); font-weight: 700; letter-spacing: .1em; padding: 1.5vmin 3vmin; margin: 1.5vmin 0 3vmin; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
|
|
.hint { font-size: clamp(14px, 2vmin, 26px); color: var(--faint); }
|