Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200/* Reroute options — a quiet routing-table workbench. Palette: graphite ink on cool paper, one signal-green accent for "live" routes, mono type for anything that is literally a URL. */
:root { --paper: #f3f4f2; --card: #ffffff; --ink: #21262b; --ink-soft: #5c646d; --line: #dcdfda; --accent: #146b52; /* signal green: a rule that is switched on */ --accent-soft: #e3efe9; --danger: #a33025; --danger-soft: #f7e7e4; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;}
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 760px; padding: 0 20px 48px; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans);}
h1, h2 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }h1 { font-size: 20px; }h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.masthead { padding: 28px 0 4px; }.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.wordmark { display: flex; align-items: center; gap: 10px; color: var(--accent); }.wordmark h1 { color: var(--ink); }.tagline { margin: 6px 0 20px; color: var(--ink-soft); font-size: 13.5px; max-width: 56ch; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px;}.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }.panel-actions { display: flex; gap: 8px; }.hint { color: var(--ink-soft); font-size: 13px; margin: 6px 0 12px; }.empty { color: var(--ink-soft); font-size: 14px; margin: 16px 0 4px; }
/* Buttons */button { font: 600 13.5px/1 var(--sans); border-radius: 7px; padding: 9px 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer;}button:hover { border-color: #b9beb4; }button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }button.primary:hover { background: #0f5942; }button.ghost { background: transparent; }button.danger-link { border: none; background: none; color: var(--danger); padding: 6px 8px; }button.link { border: none; background: none; color: var(--ink-soft); padding: 6px 8px; }button.link:hover, button.danger-link:hover { text-decoration: underline; border: none; }:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Global toggle */.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }.switch input { position: absolute; opacity: 0; }.switch .track { width: 38px; height: 22px; border-radius: 999px; background: #c9cdc4; position: relative; transition: background 0.15s; flex: none;}.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s;}.switch input:checked + .track { background: var(--accent); }.switch input:checked + .track::after { transform: translateX(16px); }.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }.switch-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); min-width: 22px; }
/* Rule list */.rule-list { list-style: none; margin: 0; padding: 0; }.rule { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--line);}.rule:first-child { border-top: none; }.rule-name { font-weight: 600; font-size: 14px; }.rule-route { grid-column: 2; font: 12.5px/1.6 var(--mono); color: var(--ink-soft); overflow-wrap: anywhere;}.rule-route .arrow { color: var(--accent); font-weight: 700; padding: 0 2px; }.rule.off .rule-name, .rule.off .rule-route { color: #a2a8ad; }.rule.off .rule-route .arrow { color: #a2a8ad; }.rule-tools { display: flex; align-items: center; gap: 2px; }.rule-kind { font: 600 10.5px/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 3px 6px; margin-left: 8px; vertical-align: 2px;}.rule.off .rule-kind { color: var(--ink-soft); background: #eceee9; }.rule-error { grid-column: 2 / -1; font-size: 12.5px; color: var(--danger); background: var(--danger-soft); border-radius: 6px; padding: 5px 9px; margin-top: 2px;}
/* Editor */.editor .field { margin: 14px 0; }.field label, .field .label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 5px; }.field .sub { font-weight: 400; color: var(--ink-soft); }.field input[type="text"], .field input[type="url"], .test-row input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; font: 14px/1.4 var(--sans); background: #fbfcfa; color: var(--ink);}input.mono { font-family: var(--mono); font-size: 13px; }.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }.checkline label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 13.5px; }.checkline input { margin-top: 2px; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }.segmented label { margin: 0; }.segmented input { position: absolute; opacity: 0; }.segmented span { display: inline-block; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; background: var(--card);}.segmented input:checked + span { background: var(--accent); color: #fff; }.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.error { color: var(--danger); background: var(--danger-soft); border-radius: 7px; padding: 8px 11px; font-size: 13.5px; }.editor-actions { display: flex; gap: 8px; margin-top: 16px; }
/* Test box */.test-result { margin-top: 12px; font: 13px/1.7 var(--mono); overflow-wrap: anywhere; border-left: 3px solid var(--line); padding: 4px 12px; color: var(--ink-soft);}.test-result.match { border-left-color: var(--accent); color: var(--ink); }.test-result .via { font: 12px/1.6 var(--sans); color: var(--ink-soft); display: block; }.test-result .to { color: var(--accent); font-weight: 600; }
footer { color: var(--ink-soft); font-size: 12.5px; padding-top: 4px; }
@media (max-width: 560px) { .rule { grid-template-columns: auto 1fr; } .rule-tools { grid-column: 1 / -1; justify-content: flex-end; }}@media (prefers-reduced-motion: reduce) { .switch .track, .switch .track::after { transition: none; }}
.inline-mono { font-family: var(--mono); font-size: 0.92em; }
/* Health-check probe results in the host-rule editor */.probe-results { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; font: 13px/1.6 var(--mono);}.probe-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }.probe-host { color: var(--ink-soft); overflow-wrap: anywhere; }.probe-status { font-weight: 600; white-space: nowrap; }.probe-status.up { color: var(--accent); }.probe-status.down { color: var(--danger); }