/* Tabule — vzhled přístrojové desky: světlé pozadí, bílé karty, modrý akcent. Písmo je systémové — nic se nestahuje. Na Windows vyjde Segoe UI, na Applu SF, na Androidu Roboto; kresba se liší, ale stránka se vykreslí okamžitě a ušetří to půl megabajtu, což bylo víc než celý jízdní řád. Barvy jdou přes proměnné, aby noční režim byl jen jejich přepsání. Výchozí je systémové nastavení; ruční volba ho přebije atributem data-tema na . */ :root { --pozadi: #f4f6f8; --karta: #ffffff; --karta2: #f8fafc; /* jemné odlišení uvnitř karty */ --ram: #e3e8ee; --ram2: #eef2f6; /* slabší předěl mezi řádky */ --text: #111827; --text2: #6b7280; /* popisky, vysvětlivky */ --text3: #9ca3af; /* nejtišší */ --akcent: #2563eb; --akcent-tlum: #eff6ff; /* podklad pod akcentem */ --dobra: #16a34a; --spatna: #dc2626; --stin: 0 1px 2px rgba(16, 24, 40, .05); --stin2: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06); --radius: 10px; --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* noční varianta — jednou pro systémové nastavení, jednou pro ruční volbu */ @media (prefers-color-scheme: dark) { :root:not([data-tema='svetlo']) { --pozadi: #070a0e; --karta: #10151c; --karta2: #151b23; --ram: #242c38; --ram2: #1b222b; --text: #e8ecf1; --text2: #9aa5b4; --text3: #6b7684; --akcent: #60a5fa; --akcent-tlum: #16243b; --dobra: #4ade80; --spatna: #f87171; --stin: none; --stin2: none; } } :root[data-tema='tma'] { --pozadi: #070a0e; --karta: #10151c; --karta2: #151b23; --ram: #242c38; --ram2: #1b222b; --text: #e8ecf1; --text2: #9aa5b4; --text3: #6b7684; --akcent: #60a5fa; --akcent-tlum: #16243b; --dobra: #4ade80; --spatna: #f87171; --stin: none; --stin2: none; } * { box-sizing: border-box; margin: 0; padding: 0 } html { color-scheme: light dark } html[data-tema='svetlo'] { color-scheme: light } html[data-tema='tma'] { color-scheme: dark } body { background: var(--pozadi); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; padding: 20px 16px 32px; display: flex; justify-content: center; min-height: 100vh; } .shell { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px } .card { background: var(--karta); border: 1px solid var(--ram); border-radius: var(--radius); box-shadow: var(--stin); } /* malý velkými písmeny nad hodnotou — nosný prvek téhle grafiky */ .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none } button:focus-visible, input:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: 6px; } /* ─────────── hlavička ─────────── */ .masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px } .masthead h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em } .masthead .vpravo { display: flex; align-items: center; gap: 12px } #clock { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text2) } #tema { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--ram); background: var(--karta); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; } #tema:hover { border-color: var(--akcent); color: var(--akcent) } /* ─────────── načtení balíčku ─────────── */ /* Než se zjistí, jestli je ke stránce přibalený jízdní řád, návod k jeho načtení se neukazuje — jinak by na Pages problikl při každém otevření. */ body.zjistuji #loader { display: none } .load { padding: 24px } .load h2 { font-size: 18px; font-weight: 600; margin-bottom: 6px; letter-spacing: -.01em } .load p { font-size: 14px; color: var(--text2); margin-bottom: 16px; max-width: 52ch } .load code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; background: var(--karta2); border: 1px solid var(--ram2); border-radius: 5px; padding: 1px 5px; } .load p.pozor { font-size: 13px; background: var(--akcent-tlum); border: 1px solid var(--ram); border-radius: 8px; padding: 12px 14px; color: var(--text2); } .kroky { list-style: none; counter-reset: k; margin: 0 0 18px } .kroky li { counter-increment: k; position: relative; padding: 0 0 12px 30px } .kroky li:last-child { padding-bottom: 0 } .kroky li::before { content: counter(k); position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--akcent-tlum); color: var(--akcent); border-radius: 50%; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; } .kroky li code { display: inline-block; word-break: break-all } .kroky li span { display: block; font-size: 12.5px; color: var(--text2); margin-top: 3px } .pick { display: inline-block; background: var(--akcent); color: #fff; font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 8px; } .pick:hover { filter: brightness(1.08) } #status { font-size: 13px; color: var(--text2); margin-top: 14px; min-height: 1.4em; white-space: pre-line; } .err { color: var(--spatna) !important } #filterRow { margin-top: 16px; display: none; gap: 8px; align-items: center; flex-wrap: wrap } input[type=text] { font: inherit; font-size: 14.5px; padding: 10px 12px; background: var(--karta); border: 1px solid var(--ram); border-radius: 8px; color: var(--text); width: 100%; } input[type=text]::placeholder { color: var(--text3) } /* ─────────── výběr zastávky ─────────── */ #picker { display: none; flex-direction: column; gap: 12px } .stoplist { max-height: 60vh; overflow-y: auto; background: var(--karta); border: 1px solid var(--ram); border-radius: var(--radius); box-shadow: var(--stin); } .stoprow { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-bottom: 1px solid var(--ram2); } .stoprow:last-child { border-bottom: none } .stoprow:hover { background: var(--karta2) } .stoprow .nazev { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 2px } .stoprow .jmeno { font-weight: 500 } .stoprow .pesky { font-size: 12px; color: var(--text2) } .skupina { padding: 10px 14px 6px; border-bottom: 1px solid var(--ram2); background: var(--karta2) } .star { font-size: 16px; color: var(--text3); padding: 6px; line-height: 1; border-radius: 6px } .star:hover { background: var(--karta2) } .star.on { color: var(--akcent) } /* ─────────── tabule ─────────── */ #board { display: none; flex-direction: column } .bhead { padding: 18px 20px 14px; border-bottom: 1px solid var(--ram2) } .bhead .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px } .bhead h2 { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em } .nastroje { display: flex; align-items: center; gap: 4px; flex-shrink: 0 } .bhead .star { font-size: 18px } .back { font-size: 13px; color: var(--text2); white-space: nowrap; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--ram); } .back:hover { color: var(--akcent); border-color: var(--akcent) } .dirs { padding: 14px 20px 4px } .dirs .eyebrow { display: block; margin-bottom: 9px } .dirs .chips { display: flex; flex-wrap: wrap; gap: 7px } .dirs button { font-size: 13px; line-height: 1.2; padding: 7px 12px; border: 1px solid var(--ram); border-radius: 999px; color: var(--text2); background: var(--karta); max-width: 100%; text-align: left; } .dirs button:hover { border-color: var(--akcent); color: var(--akcent) } .dirs button.on { background: var(--akcent); border-color: var(--akcent); color: #fff } .dirs .cnt { font-size: 11px; opacity: .65; margin-left: 6px; font-variant-numeric: tabular-nums } /* drát s korálky: kde v okně ten odjezd leží */ .wire { position: relative; height: 66px; margin: 18px 20px 2px } .wire .line { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--ram); border-radius: 2px } .wire .pole { position: absolute; top: 5px; width: 2px; height: 12px; background: var(--ram); border-radius: 2px } .wire .pole.l { left: 0 } .wire .pole.r { right: 0 } .hanger { position: absolute; top: 12px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; } .hanger .drop { width: 1px; height: 14px; background: var(--ram) } /* korálek je silueta prostředku — barví se přes currentColor, tvar dodá ikony.ts */ .hanger .bead { display: block; width: 19px; height: 19px; margin-top: -1px; color: var(--text3); } .hanger .lab { font-size: 12px; font-weight: 600; margin-top: 4px; line-height: 1; color: var(--text2) } .hanger.soon .drop { background: var(--akcent) } .hanger.soon .bead { color: var(--akcent) } .hanger.soon .lab { color: var(--akcent) } .hanger.nestihnes { opacity: .38 } .ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 14px } .tick { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--text3) } .tick.l { transform: none; left: 0 } .tick.r { transform: none; right: 0 } .deps { padding: 4px 0 } .dep { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--ram2); } .dep:first-child { border-top: none } .badge { font-size: 15px; font-weight: 600; line-height: 1; min-width: 46px; background: var(--karta2); color: var(--text); border: 1px solid var(--ram); padding: 8px 6px; text-align: center; border-radius: 8px; font-variant-numeric: tabular-nums; } .dep.soon .badge { background: var(--akcent); border-color: var(--akcent); color: #fff } .dep.nestihnes { opacity: .45 } .dest { flex: 1; min-width: 0 } .dest .to { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .dest .meta { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .when { text-align: right; flex-shrink: 0 } .when .min { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15 } .dep.soon .when .min { color: var(--akcent) } .when .abs { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums } .empty { padding: 26px 20px; color: var(--text2); font-size: 14px } .bfoot { display: flex; align-items: center; gap: 7px; padding: 13px 20px; border-top: 1px solid var(--ram2); flex-wrap: wrap; } .win { font-size: 13px; padding: 5px 11px; border: 1px solid var(--ram); border-radius: 999px; color: var(--text2); font-variant-numeric: tabular-nums; } .win:hover { border-color: var(--akcent); color: var(--akcent) } .win.on { background: var(--akcent); border-color: var(--akcent); color: #fff } /* «kolik mi to trvá dojít» — posouvá hranici „jdi teď" tam, kam u téhle zastávky patří; při nule se tabule chová jako bez toho */ .walk { display: flex; align-items: center; gap: 7px; margin-left: auto } .walk input { font: inherit; font-size: 13px; width: 3.4em; padding: 5px 8px; background: var(--karta); border: 1px solid var(--ram); border-radius: 7px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; } .walk .unit { font-size: 12px; color: var(--text2) } /* Vlastní banner dole — vlastní soubor, ne reklamní síť (viz index.html) */ .reklama { display: block; border: 1px solid var(--ram); border-radius: var(--radius); overflow: hidden; background: var(--karta); box-shadow: var(--stin); } .reklama img { display: block; width: 100%; height: auto } .reklama:hover { border-color: var(--akcent) } .note { font-size: 12px; color: var(--text3); text-align: center; padding: 0 8px; line-height: 1.6 } /* Nabídka instalace. Pořadí pravidel je tu podstatné: .install má display:flex, což by přebilo prohlížečové [hidden]{display:none} — skrytí proto musí být napsané výslovně, jinak by pruh svítil pořád. */ .install { display: flex; align-items: center; gap: 12px; background: var(--karta); border: 1px solid var(--ram); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--stin); } .install[hidden] { display: none } .install .text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0 } .install .text strong { font-size: 14px; font-weight: 600; color: var(--text) } .install .text span { font-size: 12px; color: var(--text2); line-height: 1.4 } .install .ano { flex: none; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--akcent); color: #fff; border: none; border-radius: 8px; padding: 9px 14px; } .install .ne { flex: none; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; background: none; border: none; color: var(--text3); padding: 6px 4px; } .install .ne:hover { color: var(--text) } @media (prefers-reduced-motion: no-preference) { /* Kroužek kolem korálku by u siluety obkresloval čtverec, ne tvar — pulzuje se proto měřítkem a září se přes drop-shadow, který kopíruje obrys. */ .hanger.soon .bead { animation: pulse 2.2s ease-in-out infinite; transform-origin: 50% 50% } @keyframes pulse { 0%, 100% { transform: scale(1); filter: none } 50% { transform: scale(1.16); filter: drop-shadow(0 0 4px var(--akcent)) } } } @media (max-width: 440px) { body { padding: 14px 10px 24px } .masthead h1 { font-size: 20px } .bhead { padding: 15px 15px 12px } .bhead h2 { font-size: 19px } .dirs, .bfoot { padding-left: 15px; padding-right: 15px } .dep { padding: 12px 15px; gap: 11px } .wire { margin-left: 15px; margin-right: 15px } }