/* ===================================================================== Bundesjugendspiele - Designsystem Schwarz-Weiss ("Trueathletes"), Informationsdichte wie leichtathletik.de. Keine externen Schriften oder Bilder: laeuft auch ohne Internet im Schulnetz. Drei Zielgeraete ueber EINE Codebasis: - Smartphone (Kampfrichter, Schueler) -> Basis, mobile first - Grosser Monitor (Admin) -> ab 900px - Fernseher quer (Ergebnisse) -> , skaliert mit vw ===================================================================== */ :root { --ink: #000; --paper: #fff; --line: #d5d5d5; --line-hard: #000; --muted: #6b6b6b; --zebra: #f4f4f4; --hover: #ebebeb; --bar: #000; --bar-ink: #fff; --ok: #1a7f37; --warn: #8a6d00; --bad: #b3261e; --gap: 12px; --radius: 0; /* Kanten bleiben hart - Wettkampfliste, kein Web 2.0 */ --fs: 16px; /* nie kleiner: unter 16px zoomt iOS beim Fokus rein */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs); line-height: 1.4; color: var(--ink); background: var(--paper); /* Ziffern in Tabellen muessen untereinander stehen */ font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- Layout */ .wrap { max-width: 1400px; margin: 0 auto; padding: var(--gap); } .wrap--narrow { max-width: 640px; } .stack > * + * { margin-top: var(--gap); } .row { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; } .row--between { justify-content: space-between; } .grow { flex: 1 1 auto; min-width: 0; } /* ------------------------------------------------------------ Kopfzeile */ .topbar { display: flex; align-items: center; gap: var(--gap); padding: 10px var(--gap); background: var(--bar); color: var(--bar-ink); position: sticky; top: 0; z-index: 20; } .topbar a { color: var(--bar-ink); } .topbar__title { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; white-space: nowrap; } .topbar__meta { margin-left: auto; font-size: .78rem; opacity: .8; } /* Reiter wie auf der Wettkampfseite */ .tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line-hard); overflow-x: auto; } .tabs a { padding: 8px 14px; text-decoration: none; color: var(--ink); background: var(--zebra); white-space: nowrap; font-size: .9rem; } .tabs a[aria-current="page"] { background: var(--ink); color: var(--paper); font-weight: 600; } /* ----------------------------------------------------------- Kartenbloecke */ .panel { border: 1px solid var(--line-hard); background: var(--paper); } .panel__head { background: var(--bar); color: var(--bar-ink); padding: 7px 10px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; } .panel__head .grow { font-weight: 700; } .panel__body { padding: var(--gap); } .panel__body--flush { padding: 0; } /* ---------------------------------------------------------------- Tabellen */ table.data { width: 100%; border-collapse: collapse; font-size: .9rem; } table.data th, table.data td { padding: 6px 8px; text-align: left; vertical-align: top; } table.data thead th { background: var(--zebra); border-bottom: 2px solid var(--line-hard); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } table.data tbody tr { border-bottom: 1px solid var(--line); } table.data tbody tr:nth-child(even) { background: var(--zebra); } table.data tbody tr:hover { background: var(--hover); } .num { text-align: right; font-variant-numeric: tabular-nums; } .rank { width: 3.5em; font-weight: 700; } .sub { display: block; font-size: .78rem; color: var(--muted); } /* Breite Tabellen scrollen in sich, nie die Seite */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------------------------------------------------------------- Formulare */ label { display: block; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } input[type="text"], input[type="password"], input[type="number"], input[type="search"], select, textarea { width: 100%; padding: 10px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line-hard); border-radius: var(--radius); } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; font: inherit; font-weight: 600; border: 1px solid var(--line-hard); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer; min-height: 44px; /* Daumengroesse, Handschuhe im Herbst */ text-decoration: none; } .btn:hover { background: var(--hover); } .btn--primary { background: var(--ink); color: var(--paper); } .btn--primary:hover { background: #222; } .btn--block { width: 100%; } .btn--lg { min-height: 60px; font-size: 1.15rem; } .btn:disabled { opacity: .4; cursor: not-allowed; } /* --------------------------------------------------------------- Marker */ .pill { display: inline-block; padding: 2px 8px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line-hard); } .pill--solid { background: var(--ink); color: var(--paper); } .pill--ok { border-color: var(--ok); color: var(--ok); } .pill--warn { border-color: var(--warn); color: var(--warn); } .pill--bad { border-color: var(--bad); color: var(--bad); } .pill--muted { border-color: var(--line); color: var(--muted); } .mono { font-family: var(--mono); } .muted { color: var(--muted); } .small { font-size: .8rem; } .nowrap { white-space: nowrap; } .notice { border: 1px solid var(--line-hard); border-left-width: 6px; padding: 10px 12px; } .notice--bad { border-left-color: var(--bad); } .notice--ok { border-left-color: var(--ok); } .notice--warn { border-left-color: var(--warn); } /* ===================================================================== KAMPFRICHTER - Schnelleingabe Alles auf einen Daumen und einen Blick ausgelegt. ===================================================================== */ .entry { display: flex; flex-direction: column; min-height: 100dvh; } .entry__head { background: var(--bar); color: var(--bar-ink); padding: 10px var(--gap); display: flex; align-items: baseline; gap: 10px; } .entry__disc { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; } .entry__progress { margin-left: auto; font-size: .8rem; opacity: .85; font-variant-numeric: tabular-nums; } /* Der aktuelle Schueler - gross genug, um ihn im Gehen zu lesen */ .entry__athlete { padding: 18px var(--gap) 10px; border-bottom: 2px solid var(--line-hard); } .entry__bib { font-size: 3rem; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .entry__name { font-size: 1.25rem; font-weight: 600; margin-top: 4px; } .entry__class { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .entry__pass { font-size: .8rem; margin-top: 6px; } .entry__form { padding: var(--gap); } /* Das Eingabefeld ist das wichtigste Element der ganzen App */ #valueInput { width: 100%; padding: 14px 12px; font-family: var(--mono); font-size: 2.4rem; font-weight: 700; text-align: center; letter-spacing: .04em; border: 3px solid var(--line-hard); } #valueInput::placeholder { color: #bbb; font-weight: 400; } .entry__unit { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .08em; } /* Schnelltasten, damit fuer x / dnf / leer nichts getippt werden muss */ .quickkeys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; } .quickkeys .btn { padding: 8px 4px; font-size: .85rem; min-height: 48px; } .entry__actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 12px; } .entry__foot { margin-top: auto; padding: var(--gap); border-top: 1px solid var(--line); } /* Synchronisationsanzeige: der Kampfrichter muss sehen, ob Daten drausen sind */ .sync { display: flex; align-items: center; gap: 8px; font-size: .82rem; } .sync__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; } .sync--pending .sync__dot { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; } .sync--offline .sync__dot { background: var(--bad); } @keyframes pulse { 50% { opacity: .25; } } /* Zuletzt eingetragene Werte als Kontrollstreifen */ .recent { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; } .recent__item { border: 1px solid var(--line-hard); padding: 4px 8px; font-size: .8rem; white-space: nowrap; font-family: var(--mono); } .recent__item b { font-family: var(--font); } /* Startliste zum Nachschlagen und Anspringen */ .startlist { max-height: 45vh; overflow-y: auto; } .startlist button { display: flex; width: 100%; gap: 10px; align-items: baseline; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--line); background: var(--paper); font: inherit; text-align: left; cursor: pointer; min-height: 44px; } .startlist button:hover { background: var(--hover); } .startlist button[aria-current="true"] { background: var(--ink); color: var(--paper); } .startlist .b { font-weight: 700; font-variant-numeric: tabular-nums; width: 3.2em; flex: none; } .startlist .v { margin-left: auto; font-family: var(--mono); } .startlist .absent { opacity: .45; text-decoration: line-through; } /* ===================================================================== ADMIN - ab 900px zweispaltig ===================================================================== */ @media (min-width: 900px) { :root { --gap: 16px; } .cols { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); align-items: start; } .cols--even { grid-template-columns: 1fr 1fr; } table.data { font-size: .86rem; } table.data th, table.data td { padding: 5px 10px; } } @media (min-width: 1300px) { .cols--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; } } /* Token-Anzeige: erscheint genau einmal, muss vorlesbar sein */ .tokenbox { border: 3px solid var(--line-hard); padding: 18px; text-align: center; } .tokenbox__code { font-family: var(--mono); font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 800; letter-spacing: .12em; word-break: break-all; } .tokenbox__url { font-family: var(--mono); font-size: .8rem; word-break: break-all; margin-top: 8px; } /* ===================================================================== FERNSEHER - Querformat, Lesbarkeit aus 5 Metern setzen. Alles skaliert mit der Viewportbreite. ===================================================================== */ body.tv { --gap: 1.2vw; font-size: 1.5vw; height: 100dvh; overflow: hidden; padding: 1.2vw; } body.tv .panel__head { font-size: 1.15vw; padding: .6vw 1vw; } body.tv table.data { font-size: 1.45vw; } body.tv table.data th, body.tv table.data td { padding: .45vw .8vw; } body.tv table.data thead th { font-size: 1vw; } body.tv .tv-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); height: calc(100dvh - 2.4vw); } body.tv .tv-scroll { overflow: hidden; } /* Highlights: bester Junge / bestes Maedchen */ .highlight { border: 2px solid var(--line-hard); padding: 1vw; } .highlight__label { font-size: 1vw; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .highlight__name { font-size: 2.2vw; font-weight: 800; line-height: 1.1; margin-top: .3vw; } .highlight__meta { font-size: 1.2vw; color: var(--muted); } .highlight__pts { font-size: 1.6vw; font-weight: 700; } /* Sehr breite Fernseher nicht ins Leere laufen lassen */ @media (min-aspect-ratio: 21/9) { body.tv { font-size: 1.1vw; } body.tv table.data { font-size: 1.1vw; } } /* --------------------------------------------------------------- Drucken */ @media print { .topbar, .tabs, .btn, .entry__form, .quickkeys { display: none !important; } body { font-size: 11pt; } .panel { border: 1px solid #000; break-inside: avoid; } } /* ------------------------------------------------- Bedienhilfen / Motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }