Spaces:
Running
Running
| :root { | |
| color-scheme: light; | |
| --page: #f9f9f7; | |
| --surface: #fcfcfb; | |
| --ink: #0b0b0b; | |
| --ink-2: #52514e; | |
| --muted: #898781; | |
| --grid: #e1e0d9; | |
| --axis: #c3c2b7; | |
| --border: rgba(11, 11, 11, 0.10); | |
| --accent: #2a78d6; | |
| --series-1: #2a78d6; | |
| --series-2: #eb6834; | |
| --series-3: #1baf7a; | |
| --zone: rgba(27, 175, 122, 0.12); | |
| --warn: #fab219; | |
| --warn-ink: #7a5200; | |
| --danger: #c62828; | |
| --ok: #1b7f4b; | |
| --medal-gold: #b8860b; | |
| --medal-gold-ink: #7a5a00; | |
| --medal-silver: #8a8f98; | |
| --medal-silver-ink: #52565c; | |
| --medal-bronze: #a9673a; | |
| --medal-bronze-ink: #7a4522; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root:not([data-theme="light"]) { | |
| color-scheme: dark; | |
| --page: #0d0d0d; | |
| --surface: #1a1a19; | |
| --ink: #ffffff; | |
| --ink-2: #c3c2b7; | |
| --muted: #898781; | |
| --grid: #2c2c2a; | |
| --axis: #383835; | |
| --border: rgba(255, 255, 255, 0.10); | |
| --accent: #3987e5; | |
| --series-1: #3987e5; | |
| --series-2: #d95926; | |
| --series-3: #199e70; | |
| --zone: rgba(76, 195, 138, 0.14); | |
| --warn-ink: #fab219; | |
| --danger: #ef5350; | |
| --ok: #4cc38a; | |
| --medal-gold-ink: #e8c547; | |
| --medal-silver-ink: #c7ccd1; | |
| --medal-bronze-ink: #d99a6c; | |
| } | |
| } | |
| * { box-sizing: border-box; } | |
| body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; } | |
| /* Links: Inhalt in Textfarbe, Akzent erst beim Überfahren; Nebenlinks klein und grau */ | |
| a { color: var(--ink); text-decoration: none; text-underline-offset: 2px; } | |
| a:hover { color: var(--accent); text-decoration: underline; } | |
| .sub a, a.secondary { font-size: 12px; color: var(--muted); } | |
| .sub a:hover, a.secondary:hover { color: var(--accent); } | |
| a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { | |
| outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; | |
| } | |
| .top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); } | |
| .brand { font-weight: 600; color: var(--ink); } | |
| .brand:hover { text-decoration: none; } | |
| nav { display: flex; flex-wrap: wrap; gap: 4px; } | |
| nav a { padding: 6px 10px; color: var(--ink-2); border-bottom: 2px solid transparent; } | |
| nav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--border); } | |
| nav a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } | |
| main { max-width: 1400px; margin: 0 auto; padding: 16px; } | |
| h1 { font-size: 20px; margin: 8px 0 16px; overflow-wrap: anywhere; } | |
| h2 { font-size: 16px; margin: 24px 0 8px; } | |
| h3 { font-size: 13px; margin: 8px 0 4px; color: var(--ink-2); } | |
| .toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 12px 0; } | |
| .segmented a, .segmented button { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); color: var(--ink-2); } | |
| .segmented button { background: none; border-radius: 0; font: inherit; } | |
| .segmented a:hover, .segmented button:hover { text-decoration: none; color: var(--ink); } | |
| .segmented a:first-child, .segmented button:first-child { border-radius: 6px 0 0 6px; } | |
| .segmented a:last-child, .segmented button:last-child { border-radius: 0 6px 6px 0; } | |
| .segmented a.active, .segmented button.active { background: var(--surface); color: var(--ink); font-weight: 600; } | |
| [hidden] { display: none ; } | |
| button { font: inherit; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; } | |
| button:disabled { opacity: 0.5; cursor: default; } | |
| button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } | |
| button.danger { color: var(--danger); border-color: var(--danger); } | |
| button.danger:hover:not(:disabled) { background: var(--danger); color: #fff; } | |
| .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; } | |
| .actions form, .inline-form { display: inline; margin: 0; } | |
| input, select { font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--page); color: var(--ink); min-width: 0; } | |
| .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; } | |
| table { border-collapse: collapse; width: 100%; } | |
| th, td { padding: 8px 10px; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: top; white-space: nowrap; } | |
| th { font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: normal; vertical-align: bottom; } | |
| th[data-sort] { cursor: pointer; user-select: none; } | |
| th[aria-sort="ascending"]::after { content: " ▲"; } | |
| th[aria-sort="descending"]::after { content: " ▼"; } | |
| .num { text-align: right; font-variant-numeric: tabular-nums; } | |
| .strong { font-weight: 600; } | |
| .sub { font-size: 12px; color: var(--muted); } | |
| .wrap { white-space: normal; max-width: 420px; } | |
| .muted { color: var(--muted); } | |
| .badge { display: inline-block; margin-top: 4px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 10px; font-size: 11px; color: var(--ink-2); } | |
| .badge.warn, .warn-text { color: var(--warn-ink); border-color: var(--warn); } | |
| .hint { font-size: 12px; color: var(--ink-2); } | |
| .flash { padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 6px; } | |
| .empty { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; } | |
| .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } | |
| .charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 16px; margin-top: 16px; } | |
| .chart-card { margin: 0 0 16px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; } | |
| figcaption { font-weight: 600; margin-bottom: 8px; } | |
| .chart-box { position: relative; width: 100%; } | |
| .thresholds { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0; } | |
| .thresholds label { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); } | |
| .thresholds input { width: 6em; } | |
| .meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; } | |
| .meta dt { color: var(--ink-2); } | |
| .meta dd { margin: 0; overflow-wrap: anywhere; } | |
| details { margin: 12px 0; } | |
| pre { margin: 0; padding: 8px; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--page); border-radius: 6px; } | |
| pre.log { max-height: 320px; font-size: 12px; } | |
| .answer { margin: 12px 0; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; } | |
| .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-top: 8px; } | |
| .pager a { margin-right: 16px; color: var(--accent); } | |
| .compare td.best { font-weight: 600; } | |
| .compare td.greyed { color: var(--muted); } | |
| .compare tr.total td { font-weight: 600; background: var(--page); } | |
| .medal { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid var(--border); border-radius: 10px; font-size: 10px; font-weight: 600; line-height: 14px; } | |
| .medal.gold { color: var(--medal-gold-ink); border-color: var(--medal-gold); } | |
| .medal.silver { color: var(--medal-silver-ink); border-color: var(--medal-silver); } | |
| .medal.bronze { color: var(--medal-bronze-ink); border-color: var(--medal-bronze); } | |
| /* Seite Betrieb */ | |
| .status { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); } | |
| .status.ok::before { content: "● "; color: var(--ok); } | |
| .status.bad { border-color: var(--danger); } | |
| .status.bad::before { content: "▲ "; color: var(--danger); } | |
| .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px; } | |
| .card { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; } | |
| .card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; overflow-wrap: anywhere; } | |
| .card p { margin: 6px 0; } | |
| progress { width: 100%; height: 8px; accent-color: var(--accent); } | |
| .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; } | |
| .form-grid .wide { grid-column: 1 / -1; } | |
| .form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); } | |
| .form-grid label.inline { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); } | |
| fieldset { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; border: 1px solid var(--border); border-radius: 6px; } | |
| legend { font-size: 12px; color: var(--ink-2); } | |
| .top-end { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; } | |
| .worker-status { font-size: 12px; color: var(--ink-2); white-space: nowrap; cursor: default; } | |
| .worker-status.ok::before { content: "● "; color: var(--ok); } | |
| .worker-status.bad { color: var(--danger); font-weight: 600; } | |
| .worker-status.bad::before { content: "▲ "; } | |
| .tabs { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 0 16px; border-bottom: 1px solid var(--border); } | |
| .tabs [role="tab"] { flex: none; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--ink-2); } | |
| .tabs [role="tab"]:hover { color: var(--ink); border-bottom-color: var(--border); } | |
| .tabs [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } | |
| .tab-count { font-size: 12px; font-weight: 400; color: var(--muted); } | |
| .tab-count:empty { display: none; } | |
| .tab-count.warn { color: var(--warn-ink); font-weight: 600; } | |
| .tab-panel > h2:first-child { margin-top: 0; } | |
| /* Ergänzungen für die veröffentlichte statische Seite (bench publish) */ | |
| .lead { max-width: 820px; color: var(--ink-2); } | |
| .prose { max-width: 820px; } | |
| .prose p, .prose li { color: var(--ink-2); } | |
| section + section { margin-top: 24px; } | |
| .page-foot { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); } | |
| p.segmented { display: flex; flex-wrap: wrap; margin: 12px 0; } | |