/* Tissue Mast web app. Every colour is a --tissue-* token from /css/tokens.css, so a dark stamp on repaints the whole app. Square corners, one weight of hairline, no masks, filters or blurs (Safari). */ *, *::before, *::after { box-sizing: border-box } html, body { margin: 0; min-height: 100% } body { font-family: var(--tissue-font-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace); font-size: 13px; line-height: 1.55; color: var(--tissue-ink); background: var(--tissue-bg); -webkit-text-size-adjust: 100%; } [hidden] { display: none !important } a { color: var(--tissue-accent) } a:hover { color: var(--tissue-accent-dp) } :focus-visible { outline: 2px solid var(--tissue-accent); outline-offset: 2px } h1 { font-size: 24px; font-weight: 500; margin: 0; line-height: 1.25; overflow-wrap: anywhere } h2 { font-size: 15px; font-weight: 500; margin: 0 } p { margin: 0 } p + p { margin-top: 8px } em { font-style: italic } ol, ul { margin: 0; padding-left: 20px } .boot { padding: 40px } /* text */ .sage { color: var(--tissue-ink-2) } .dim { color: var(--tissue-ink-3) } .num { font-variant-numeric: tabular-nums } .help { font-size: 12px; font-style: italic; color: var(--tissue-ink-2); margin-top: 6px } .err { color: var(--tissue-danger) } .ok-text { color: var(--tissue-accent) } code { background: var(--tissue-panel); font-family: inherit; font-size: 12.5px; padding: 0 3px } pre { background: var(--tissue-panel); border: 1px solid var(--tissue-line); padding: 12px 14px; font-size: 12.5px; margin: 6px 0 0; font-family: inherit; white-space: pre-wrap; overflow-wrap: anywhere; } .mono-big { font-size: 34px; font-weight: 500; letter-spacing: .08em } /* controls */ input, select, textarea, button { font: inherit; color: inherit } input[type=text], input[type=email], input[type=search], input[type=number], input[type=url], input[type=date], select, textarea { border: 1px solid var(--tissue-line-2); background: var(--tissue-bg); padding: 7px 10px; border-radius: 0; max-width: 100%; } textarea { width: 100%; resize: vertical } input[type=checkbox], input[type=radio] { accent-color: var(--tissue-accent); margin: 3px 0 0 } input.short { width: 7em } input.mid { width: 14em } input.wide, select.wide { width: 100% } .btn, .btn2, .btn3, .btnd { display: inline-block; cursor: pointer; text-decoration: none; border-radius: 0; font-size: 13px; line-height: 1.4; } .btn { background: var(--tissue-accent); color: var(--tissue-on-accent); border: 1px solid var(--tissue-accent); padding: 8px 14px; font-weight: 500 } .btn:hover { color: var(--tissue-on-accent); background: var(--tissue-accent-dp) } .btn2 { background: var(--tissue-bg); color: var(--tissue-ink); border: 1px solid var(--tissue-line-2); padding: 7px 13px } .btn2:hover { color: var(--tissue-ink); border-color: var(--tissue-ink-3) } .btn3 { background: none; border: 0; padding: 0; color: var(--tissue-ink-2); text-decoration: underline; text-underline-offset: 2px } .btn3:hover { color: var(--tissue-ink) } .btnd { background: var(--tissue-bg); color: var(--tissue-danger); border: 1px solid var(--tissue-danger); padding: 7px 13px } button:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed } .actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 12px } .inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center } /* state tags */ .st { display: inline-block; padding: 0 6px; font-size: 12px; font-weight: 500; border: 1px solid; line-height: 18px; white-space: nowrap } .st-ok { color: var(--tissue-accent); border-color: var(--tissue-accent) } .st-late { color: var(--tissue-amber); border-color: var(--tissue-amber) } .st-flat { color: var(--tissue-on-accent); background: var(--tissue-danger); border-color: var(--tissue-danger) } .st-mute { color: var(--tissue-ink-3); border-color: var(--tissue-line-2) } .st-blk { color: var(--tissue-plate-ink); background: var(--tissue-plate-paper); border-color: var(--tissue-rail) } /* tables: each sits in its own scroller, so a phone never scrolls the page sideways */ .tw { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch } table { border-collapse: collapse; width: 100%; font-size: 13px } th { font-size: 12px; font-weight: 400; color: var(--tissue-ink-2); text-align: left; border-bottom: 1px solid var(--tissue-line-2); padding: 0 12px 6px 0; white-space: nowrap } td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--tissue-line); vertical-align: top } tr.sel td { background: var(--tissue-panel) } td.out { max-width: 32em; overflow-wrap: anywhere } /* shell */ .skip { position: absolute; left: -9999px } .skip:focus { left: 8px; top: 8px; background: var(--tissue-bg); padding: 6px 10px; z-index: 10 } .top { height: 48px; display: flex; align-items: center; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--tissue-line); } .crumb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .crumb a { color: var(--tissue-ink); text-decoration: none } .crumb .brand { font-weight: 600 } .top-r { display: flex; gap: 16px; align-items: center; white-space: nowrap } .top-r a { color: var(--tissue-ink-2) } .menu { display: none } .body { display: flex; min-height: calc(100vh - 48px) } .nav { width: 216px; flex: none; background: var(--tissue-panel); border-right: 1px solid var(--tissue-line); padding-bottom: 24px } .nav .grp { padding: 16px 16px 4px; font-size: 11px; color: var(--tissue-ink-3) } .nav a { display: block; padding: 5px 16px 5px 22px; color: var(--tissue-ink-2); text-decoration: none; border-left: 2px solid transparent } .nav a:hover { color: var(--tissue-ink) } .nav a.on { color: var(--tissue-ink); background: var(--tissue-bg); border-left-color: var(--tissue-accent) } main { flex: 1; min-width: 0; padding: 30px 40px 40px; display: flex; flex-direction: column; gap: 28px } main:focus { outline: none } /* page furniture */ .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap } .head > div:first-child { max-width: 46em; display: flex; flex-direction: column; gap: 6px } .head-side { display: flex; gap: 10px; align-items: center; flex-wrap: wrap } .sec { font-size: 15px; font-weight: 500; padding-bottom: 8px; border-bottom: 1px solid var(--tissue-line-2); margin-bottom: 4px } .sec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--tissue-line-2); padding-bottom: 8px; margin-bottom: 4px } .sec-row .sec { border: 0; padding: 0; margin: 0 } .row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--tissue-line) } .row > :last-child { text-align: right; overflow-wrap: anywhere } .cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start } .cols-even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start } .stack { display: flex; flex-direction: column; gap: 24px; min-width: 0 } .stack-s { display: flex; flex-direction: column; gap: 8px; min-width: 0 } .panel { background: var(--tissue-panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px } .panel-title { font-weight: 500 } .note { border-left: 2px solid var(--tissue-rail); background: var(--tissue-panel); padding: 10px 14px; max-width: 52em } .note-err { border-left-color: var(--tissue-danger) } .unbuilt { font-size: 12px; color: var(--tissue-ink-2); border-left: 2px solid var(--tissue-amber); padding: 2px 0 2px 10px } .filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center } .loading { padding: 8px 0 } .msg-line { min-height: 1.55em } /* stat grid on the overview */ .stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--tissue-line) } .budget { margin: 10px 0 0 } .evidence { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 0 } .evidence dt { color: var(--tissue-sage, inherit) } .evidence dd { margin: 0 } .stats > div { padding: 14px 16px; border-right: 1px solid var(--tissue-line); display: flex; flex-direction: column; gap: 2px; min-width: 0 } .stats > div:last-child { border-right: 0 } .stats .big { font-size: 26px; font-weight: 500; line-height: 1.2 } .stats .big.alarm { color: var(--tissue-danger) } /* forms */ .fld { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 28px; padding: 16px 0; border-bottom: 1px solid var(--tissue-line) } .lbl { font-weight: 500; padding-top: 8px } .radio { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; cursor: pointer } .radios { display: flex; flex-direction: column; gap: 2px } .pair { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 8px 12px; align-items: center } /* charts */ .spark { display: block; overflow: visible } .tk { stroke-width: 1.5 } .tk-ok { stroke: var(--tissue-accent) } .tk-fail, .tk-down, .tk-page { stroke: var(--tissue-danger) } .tk-late, .tk-slow, .tk-tls, .tk-loud { stroke: var(--tissue-amber) } .tk-blocked { stroke: var(--tissue-rail) } .tk-quiet, .tk-start { stroke: var(--tissue-ink-3) } .tk-base { stroke: var(--tissue-line-2); stroke-width: 1 } .axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--tissue-ink-3); margin-top: 4px } .bars { display: flex; gap: 1px; height: 26px; align-items: stretch; min-width: 0 } .bar { flex: 1; min-width: 1px } .bar-ok { background: var(--tissue-accent) } .bar-late { background: var(--tissue-amber) } .bar-down { background: var(--tissue-danger) } .bar-none { background: var(--tissue-line) } .meter { display: inline-block; width: 140px; height: 6px; background: var(--tissue-line); vertical-align: middle; margin-right: 10px } .meter > span { display: block; height: 100%; background: var(--tissue-accent) } .usage-row { display: grid; grid-template-columns: 9em minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--tissue-line); align-items: center } .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--tissue-line) } .week > div { padding: 8px; border-right: 1px solid var(--tissue-line); min-width: 0; overflow-wrap: anywhere } .week > div:last-child { border-right: 0 } .phone-card { border: 1px solid var(--tissue-line-2); padding: 12px 14px; max-width: 30em; display: flex; flex-direction: column; gap: 6px } /* policy step grid */ .steps { display: grid; grid-template-columns: 5em 11em minmax(0, 1fr) 7em 5em; gap: 8px 12px; align-items: center } .steps .h { font-size: 12px; color: var(--tissue-ink-2) } .order-item { display: flex; gap: 12px; align-items: center; padding: 5px 0 } /* public status page */ .pub { max-width: 820px; margin: 0 auto; padding: 40px 16px 60px; display: flex; flex-direction: column; gap: 24px } .pub-comp { display: grid; grid-template-columns: 11em minmax(0, 1fr) 5em; gap: 12px; align-items: center; padding: 8px 0 } .banner { padding: 12px 16px; border: 1px solid var(--tissue-line-2) } .banner-ok { border-color: var(--tissue-accent) } .banner-degraded { border-color: var(--tissue-amber) } .banner-down { border-color: var(--tissue-danger) } @media (max-width: 960px) { .cols, .cols-even { grid-template-columns: minmax(0, 1fr) } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } .stats > div:nth-child(2n) { border-right: 0 } .stats > div:nth-child(-n+4) { border-bottom: 1px solid var(--tissue-line) } } @media (max-width: 720px) { .top { padding: 0 16px; gap: 12px } .menu { display: inline-block } .top-r a:not(:first-child) { display: none } .body { display: block } .nav { display: none; width: auto; border-right: 0; border-bottom: 1px solid var(--tissue-line) } body.nav-open .nav { display: block } main { padding: 20px 16px 32px; gap: 22px } h1 { font-size: 21px } .fld { grid-template-columns: minmax(0, 1fr); gap: 6px } .lbl { padding-top: 0 } .pair { grid-template-columns: minmax(0, 1fr) } .usage-row { grid-template-columns: minmax(0, 1fr) } .steps { grid-template-columns: minmax(0, 1fr) } .steps .h { display: none } .week { grid-template-columns: repeat(4, minmax(0, 1fr)) } .pub-comp { grid-template-columns: minmax(0, 1fr) 4em } .pub-comp .bars { grid-column: 1 / -1; grid-row: 2 } .meter { width: 90px } .mono-big { font-size: 28px } } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }