@charset "utf-8"; /* panel.forked.net — customer server panel (IPAM Stage 22). forked.net's "Lithograph" look (warm paper, ink, burnished gold; sharp corners, hairlines, no shadows) with the admin server page's building blocks: cards, label/value rows, lamps, a wiring path, polled power card. Palette tokens mirror forked.net/css/style.css. Theme: light by default, dark when the OS prefers it, or as picked with the toggle (, set before paint by js/theme.js). */ /* ---- fonts (self-hosted copies of forked.net's, latin subset) ---- */ @font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/crimsonpro-400-normal-latin.woff2) format('woff2'); } @font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/crimsonpro-500-normal-latin.woff2) format('woff2'); } @font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 500; font-display: swap; src: url(/fonts/crimsonpro-500-italic-latin.woff2) format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/newsreader-400-normal-latin.woff2) format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/newsreader-500-normal-latin.woff2) format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/newsreader-400-italic-latin.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibmplexmono-400-normal-latin.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibmplexmono-500-normal-latin.woff2) format('woff2'); } :root { --bg: #f5f5f2; --bg-2: #eeeeea; --bg-3: #e7e7e1; --fg: oklch(26% 0.018 60); --fg-2: oklch(43% 0.018 60); --fg-3: oklch(52% 0.020 65); --rule: oklch(87% 0.014 80); --rule-2: oklch(78% 0.018 80); --accent: oklch(50% 0.12 65); --on-accent: #f5f5f2; --ok: oklch(62% 0.14 150); --ok-ink: oklch(45% 0.11 150); --bad: oklch(55% 0.17 28); --warn: oklch(52% 0.12 60); --serif: "Crimson Pro", "Newsreader", "Iowan Old Style", Georgia, serif; --body: "Newsreader", "Iowan Old Style", Georgia, serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --maxw: 1180px; color-scheme: light; } :root[data-theme="dark"] { --bg: oklch(16% 0.012 60); --bg-2: oklch(20% 0.014 60); --bg-3: oklch(25% 0.015 60); --fg: oklch(94% 0.02 80); --fg-2: oklch(70% 0.025 80); --fg-3: oklch(62% 0.02 80); --rule: oklch(32% 0.015 60); --rule-2: oklch(44% 0.02 60); --accent: oklch(80% 0.11 75); --on-accent: oklch(16% 0.012 60); --ok: oklch(74% 0.15 150); --ok-ink: oklch(80% 0.13 150); --bad: oklch(70% 0.15 28); --warn: oklch(80% 0.12 75); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: oklch(16% 0.012 60); --bg-2: oklch(20% 0.014 60); --bg-3: oklch(25% 0.015 60); --fg: oklch(94% 0.02 80); --fg-2: oklch(70% 0.025 80); --fg-3: oklch(62% 0.02 80); --rule: oklch(32% 0.015 60); --rule-2: oklch(44% 0.02 60); --accent: oklch(80% 0.11 75); --on-accent: oklch(16% 0.012 60); --ok: oklch(74% 0.15 150); --ok-ink: oklch(80% 0.13 150); --bad: oklch(70% 0.15 28); --warn: oklch(80% 0.12 75); color-scheme: dark; } } /* ---- base ---- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } p { margin: 0 0 .8rem; } .pn-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .pn-mono { font-family: var(--mono); font-size: .8em; letter-spacing: 0; } .pn-muted { color: var(--fg-3); } .pn-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); } .pn-skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; z-index: 100; } .pn-skip:focus { left: 0; } .pn-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .35rem; overflow-wrap: anywhere; } .pn-h2 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.15; letter-spacing: -.01em; margin: 0; } .pn-h3 { font-family: var(--mono); font-weight: 500; font-size: 14px; margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .pn-lede { color: var(--fg-2); font-size: 1.05rem; margin-bottom: 1.4rem; } /* ---- top bar ---- */ .pn-top { border-bottom: 1px solid var(--rule); background: var(--bg); } .pn-top-in { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; } .pn-logo { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--accent); font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1; color: var(--fg); text-decoration: none; } .pn-logo:hover { text-decoration: none; color: var(--fg); background: var(--bg-2); } .pn-logo .dn { font-style: normal; color: var(--accent); } .pn-app { display: flex; flex-direction: column; line-height: 1.15; } .pn-app-name { font-family: var(--serif); font-size: 1.35rem; } .pn-acct { display: flex; flex-direction: column; line-height: 1.25; padding-left: 22px; border-left: 1px solid var(--rule); min-width: 0; } .pn-acct b { font-weight: 500; overflow-wrap: anywhere; } .pn-acct-who { font-family: var(--mono); font-size: 12px; color: var(--fg-2); overflow-wrap: anywhere; } .pn-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .pn-inline { display: inline; margin: 0; } .pn-linkbtn { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--accent); cursor: pointer; } .pn-linkbtn:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .pn-theme { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: none; border: 1px solid var(--rule); color: var(--fg-2); cursor: pointer; padding: 0; } .pn-theme:hover { color: var(--accent); border-color: var(--rule-2); } .pn-theme svg { width: 16px; height: 16px; display: block; } .pn-theme .sun { display: none; } :root[data-theme="dark"] .pn-theme .sun { display: block; } :root[data-theme="dark"] .pn-theme .moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pn-theme .sun { display: block; } :root:not([data-theme="light"]) .pn-theme .moon { display: none; } } .pn-imp { background: color-mix(in oklch, var(--accent) 16%, var(--bg)); border-bottom: 1px solid var(--accent); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; padding: 8px 0; } /* ---- page ---- */ .pn-main { flex: 1; padding-top: 34px; padding-bottom: 56px; } .pn-crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; } .pn-crumbs span:last-child { color: var(--fg-2); } .pn-head { display: flex; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); } .pn-head-main { flex: 1 1 320px; min-width: 0; } .pn-sub { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--fg-2); } .pn-sub > span + span::before { content: ""; } .pn-head .pn-pill { margin-top: 14px; } .pn-head-actions { display: flex; gap: 10px; margin-top: 8px; } .pn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; } .pn-col, .pn-rail { display: grid; gap: 22px; min-width: 0; } .pn-card { border: 1px solid var(--rule); background: var(--bg); padding: 20px 22px 22px; min-width: 0; } .pn-card-h { display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; } .pn-card-link { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .pn-progress-card { margin-bottom: 22px; background: var(--bg-2); } /* label / value rows */ .pn-kv { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); margin: 0; } .pn-kv dt, .pn-kv dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--rule); } .pn-kv dt:first-of-type, .pn-kv dt:first-of-type + dd { border-top: 0; } .pn-kv dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); padding-top: 12px; } .pn-kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; overflow-wrap: anywhere; } .pn-kv .pn-mono { font-size: 14px; } .pn-kv-tail { margin-top: 10px; border-top: 1px solid var(--rule-2); } .pn-kv-tail dt:first-of-type, .pn-kv-tail dt:first-of-type + dd { border-top: 0; } .pn-block { padding: 14px 0 6px; border-top: 1px solid var(--rule-2); } .pn-block:first-of-type { border-top: 0; } .pn-tag { padding: 1px 7px; border: 1px solid var(--rule); background: var(--bg-2); } /* lamps + pills */ .pn-lamp { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--fg-3); flex: none; } .pn-lamp.is-on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok) 24%, transparent); } .pn-lamp.is-off { background: var(--bad); } .pn-lamp.is-unknown { background: transparent; border: 1.5px solid var(--fg-3); } .pn-pill { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border: 1px solid currentColor; white-space: nowrap; } .pn-pill.is-active { color: var(--ok-ink); } .pn-pill.is-installing { color: var(--accent); } .pn-pill.is-suspended { color: var(--bad); } /* buttons */ .pn-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 14px; border: 1px solid var(--fg); background: transparent; color: var(--fg); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .pn-btn:hover { background: var(--fg); color: var(--bg); text-decoration: none; } .pn-btn.pn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .pn-btn.pn-primary:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); } .pn-btn.is-disabled { border-color: var(--rule-2); color: var(--fg-3); cursor: not-allowed; } .pn-btn.is-disabled:hover { background: transparent; color: var(--fg-3); } .pn-soon { font-size: 10px; letter-spacing: .1em; padding: 1px 5px; border: 1px dashed var(--rule-2); } .pn-copy { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; background: none; border: 1px solid transparent; color: var(--fg-3); cursor: pointer; } .pn-copy:hover, .pn-copy:focus-visible { color: var(--accent); border-color: var(--rule); } .pn-copy.is-copied { color: var(--ok-ink); border-color: var(--ok); } /* banners, notes, messages */ .pn-banner { border: 1px solid var(--rule-2); border-left: 3px solid var(--accent); padding: 12px 16px; margin: -6px 0 22px; background: var(--bg-2); } .pn-banner.is-warn { border-left-color: var(--bad); } .pn-banner p { margin: 0; } .pn-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--rule-2); font-size: 15px; color: var(--fg-2); } .pn-warn { color: var(--bad); } .pn-msg { max-width: 620px; padding: 28px 0; } .pn-msg p { font-size: 1.1rem; color: var(--fg-2); } .pn-empty { border: 1px dashed var(--rule-2); padding: 22px 24px; max-width: 720px; } /* My Servers list */ .pn-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); } .pn-item { display: grid; grid-template-columns: 14px minmax(0, 1.6fr) minmax(0, 1fr) 7.4rem 8.8rem 18px; align-items: center; gap: 6px 18px; padding: 16px 6px; border-bottom: 1px solid var(--rule); color: var(--fg); text-decoration: none; } .pn-item:hover { background: var(--bg-2); color: var(--fg); text-decoration: none; } .pn-item-name { display: flex; flex-direction: column; min-width: 0; } .pn-item-name b { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; } .pn-item-ip { font-size: 14px; } .pn-item .pn-pill { justify-self: start; } .pn-item-svc { font-family: var(--mono); font-size: 12px; color: var(--fg-3); } .pn-chev { color: var(--accent); font-family: var(--mono); } /* wiring path: server → routed subnet → upstream */ .pn-path { display: flex; align-items: stretch; margin: 2px 0 18px; overflow-x: auto; padding-bottom: 2px; } .pn-node { flex: 1 1 0; min-width: 150px; border: 1px solid var(--rule-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--bg-2); } .pn-node b { font-weight: 500; font-size: 15px; overflow-wrap: anywhere; } .pn-node b.pn-mono { font-size: 13.5px; } .pn-node.is-dim { background: transparent; border-style: dashed; } .pn-node.is-dim b { color: var(--fg-2); } .pn-node.is-missing b { color: var(--fg-3); font-style: italic; } .pn-node-s { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); } .pn-wire { flex: 0 0 26px; align-self: center; height: 0; border-top: 2px solid var(--rule-2); } .pn-wire.is-live { border-top-color: var(--ok); } .pn-wire.is-dim { border-top-style: dashed; } /* power card */ .pn-pwr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--rule); } .pn-pwr-row:first-child { border-top: 0; padding-top: 0; } .pn-pwr-name { display: flex; align-items: center; gap: 8px; font-weight: 500; } .pn-pwr-name .pn-kicker { font-size: 10px; } .pn-pwr-state { font-family: var(--mono); font-size: 14px; text-align: right; } .pn-pwr-meta { grid-column: 1 / -1; font-size: 14px; color: var(--fg-3); } /* install progress */ .pn-prog .pn-h2 { margin-bottom: 12px; } .pn-steps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; } .pn-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 0; color: var(--fg-3); } .pn-steps .pn-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--rule-2); font-family: var(--mono); font-size: 11px; } .pn-steps li.is-done { color: var(--fg); } .pn-steps li.is-done .pn-dot { border-color: var(--ok); color: var(--ok-ink); } .pn-steps li.is-current { color: var(--fg); font-weight: 500; } .pn-steps li.is-current .pn-dot { border-color: var(--accent); color: var(--accent); animation: pn-pulse 1.4s ease-in-out infinite; } .pn-steps li.is-failed { color: var(--bad); } .pn-steps li.is-failed .pn-dot { border-color: var(--bad); } .pn-steps time { font-size: 12px; } @keyframes pn-pulse { 50% { background: color-mix(in oklch, var(--accent) 22%, transparent); } } @media (prefers-reduced-motion: reduce) { .pn-steps li.is-current .pn-dot { animation: none; } } /* footer */ .pn-foot { border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); } .pn-foot-in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 22px; } /* ---- narrow screens ---- */ @media (max-width: 900px) { .pn-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .pn-wrap { padding: 0 16px; } .pn-main { padding-top: 22px; } .pn-acct { order: 3; flex-basis: 100%; padding-left: 0; border-left: 0; padding-top: 10px; border-top: 1px solid var(--rule); } .pn-actions { gap: 14px; } .pn-item { grid-template-columns: 14px minmax(0, 1fr) auto; } .pn-item-ip { grid-column: 2; grid-row: 2; } .pn-item .pn-pill { grid-column: 3; grid-row: 1; justify-self: end; } .pn-item-svc { grid-column: 3; grid-row: 2; text-align: right; } .pn-chev { display: none; } .pn-kv { grid-template-columns: 7.5rem minmax(0, 1fr); } .pn-card { padding: 16px 16px 18px; } .pn-path { flex-direction: column; } .pn-node { min-width: 0; } .pn-wire { flex-basis: 14px; width: 0; height: auto; border-top: 0; border-left: 2px solid var(--rule-2); margin-left: 18px; align-self: flex-start; } .pn-wire.is-live { border-left-color: var(--ok); } .pn-wire.is-dim { border-left-style: dashed; } } @media (max-width: 520px) { .pn-app .pn-kicker { display: none; } .pn-actions { flex-basis: 100%; margin-left: 0; justify-content: space-between; order: 4; } }