Monitor websites uptime using Cloudflare Workers
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654/* ========================================================================= *//* Status Pages: List & Editor *//* ========================================================================= */.status-pages-page { display: flex; flex-direction: column; gap: var(--space-12); width: 100%;}
@media (max-width: 640px) { .status-pages-page { gap: var(--space-8); }}
.status-page-list { display: flex; flex-direction: column; border: none; border-top: 1px solid var(--rule); border-radius: 0; background: transparent; overflow: visible;}
.status-page-list__row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); gap: var(--space-4); box-sizing: border-box; background: transparent;}
.status-page-list__row:last-child { border-bottom: 1px solid var(--rule);}
.status-page-list__row:hover { background: var(--sunken);}
.status-page-list__details { display: flex; align-items: baseline; gap: var(--space-4); flex: 1; text-decoration: none; color: var(--ink); min-width: 0;}
.status-page-list__details strong { font-weight: 600; font-size: var(--text-body-size);}
.status-page-list__details span { font-size: var(--text-body-sm-size); color: var(--muted);}
.status-page-list__details small { font-size: var(--text-body-sm-size); color: var(--muted); margin-left: auto;}
.status-page-list__external { color: var(--accent); text-decoration: none; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-body-sm-size);}
.status-page-list__external:hover { background: var(--sunken);}
/* Two-column Status Page Editor */.status-page-editor { display: flex; flex-direction: column; gap: var(--space-12);}
@media (max-width: 640px) { .status-page-editor { gap: var(--space-8); }}
.status-page-editor__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--space-12); align-items: start;}
@media (max-width: 800px) { .status-page-editor__layout { grid-template-columns: 1fr; gap: var(--space-8); }}
.status-page-editor__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start;}
.status-page-editor__groups > .button,.status-group-editor--full { grid-column: 1 / -1;}
.status-page-editor__groups > .button { justify-self: start;}
.status-group-editor--half { grid-column: span 1;}
@media (max-width: 640px) { .status-page-editor__groups { grid-template-columns: 1fr; }
.status-group-editor--half { grid-column: 1 / -1; }}
.status-page-editor__available { background: transparent; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: var(--space-4);}
.status-page-editor__available h2 { font-size: var(--text-heading-size); line-height: var(--text-heading-line-height); font-weight: var(--text-heading-weight); margin: 0; color: var(--ink);}
.status-page-editor__available p { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); color: var(--muted); margin: 0;}
.status-group-editor { background: transparent; border: none; border-top: 1px solid var(--rule); border-radius: 0; padding: var(--space-6) 0 0 0; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0;}
.status-group-editor--collapsed { border-top-style: dashed;}
.status-group-editor__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;}
.status-group-editor__head input { flex: 1; min-width: 140px; font-family: var(--font-body); font-size: var(--text-heading-size); font-weight: 600; padding: var(--space-1) var(--space-2); border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--ink); transition: border-color 120ms, box-shadow 120ms;}
.status-group-editor__head input:hover { border-color: var(--rule-strong);}
.status-group-editor__head input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--focus-halo); outline: none;}
.status-group-editor__actions { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap;}
.status-group-editor__monitors { display: flex; flex-direction: column; gap: var(--space-2); min-height: 48px; padding: var(--space-2); background: var(--sunken); border-radius: var(--radius-sm); border: 1px dashed var(--rule);}
.status-monitor-editor { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); cursor: grab;}
.status-monitor-editor:active { cursor: grabbing;}
.status-monitor-editor .drag-handle { color: var(--muted); cursor: grab; user-select: none;}
.status-monitor-editor button { background: transparent; border: none; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; padding: var(--space-1); font-size: var(--text-heading-size); line-height: 1; transition: color 120ms, background-color 120ms;}
.status-monitor-editor button:hover { background: var(--sunken); color: var(--down);}
.status-monitor-editor button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px;}
/* ========================================================================= *//* Notifications: Rows & History *//* ========================================================================= */.notifications-page { display: flex; flex-direction: column; gap: var(--space-12); width: 100%;}
@media (max-width: 640px) { .notifications-page { gap: var(--space-8); }}
.notification-list { display: flex; flex-direction: column; border: none; border-top: 1px solid var(--rule); border-radius: 0; background: transparent; overflow: visible;}
.notification-card { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); gap: var(--space-4); flex-wrap: wrap; background: transparent;}
.notification-card:last-child { border-bottom: 1px solid var(--rule);}
.notification-card > div:first-child { display: flex; flex-direction: column; gap: var(--space-1);}
.notification-card h2 { font-size: var(--text-heading-size); line-height: var(--text-heading-line-height); font-weight: 600; margin: 0; color: var(--ink);}
.notification-card p { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); color: var(--muted); margin: 0;}
.notification-card__delivery { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); color: var(--muted);}
.notification-feedback { margin: 0;}
.notification-card__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;}
.notification-enabled { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); color: var(--ink-soft); cursor: pointer; margin-right: var(--space-2);}
.notification-editor { padding: 0; border: none; border-radius: 0; background: transparent; display: grid; gap: var(--space-6);}
.notification-editor h2 { border-bottom: 1px solid var(--rule); padding-bottom: var(--space-3); margin-bottom: var(--space-2);}
/* Delivery History */.notification-history { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-12); border-top: 1px solid var(--rule); padding-top: var(--space-8);}
@media (max-width: 640px) { .notification-history { margin-top: var(--space-8); padding-top: var(--space-6); }}
.notification-history__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4);}
.notification-history__list { list-style: none; margin: 0; padding: 0; border: none; border-top: 1px solid var(--rule); border-radius: 0; background: transparent; overflow: visible;}
.notification-history__item { border-bottom: 1px solid var(--rule);}
.notification-history__item:last-child { border-bottom: 1px solid var(--rule);}
.notification-history__row summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; cursor: pointer; user-select: none; font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height);}
.notification-history__row summary:hover { background: var(--sunken);}
.notification-history__row summary::-webkit-details-marker { display: none;}
.notification-history__chevron { color: var(--muted); font-size: var(--text-body-sm-size); transition: transform 150ms ease;}
details[open] .notification-history__chevron { transform: rotate(90deg);}
.notification-history__destination { display: inline-flex; align-items: center; gap: var(--space-2);}
.notification-history__row-monitor { font-weight: 500; color: var(--ink);}
.notification-history__row time { margin-left: auto; color: var(--muted); font-size: var(--text-data-size); line-height: var(--text-data-line-height); font-family: var(--font-mono);}
.notification-history__entry { padding: var(--space-4); background: var(--sunken); border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--space-3);}
.notification-preview { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--space-3);}
/* ========================================================================= *//* Settings & Workspace Panels *//* ========================================================================= */.settings-page { display: flex; flex-direction: column; gap: var(--space-12); width: 100%;}
@media (max-width: 640px) { .settings-page { gap: var(--space-8); }}
.settings-page .page-head { padding-bottom: var(--space-6); border-bottom: 1px solid var(--rule); margin-bottom: 0;}
.settings-page .settings-card,.admin-content .settings-card { border: none; border-radius: 0; background: transparent; padding: 0; overflow: visible; display: grid; gap: var(--space-4);}
.settings-page .settings-card + .settings-card,.settings-page .settings-card + section,.settings-page section + .settings-card,.settings-page section + section,.admin-content .settings-card + .settings-card { border-top: 1px solid var(--rule); padding-top: var(--space-8);}
.settings-card h2 { font-size: var(--text-heading-size); line-height: var(--text-heading-line-height); font-weight: var(--text-heading-weight); color: var(--ink); margin: 0;}
.operator-budget__summary,.operator-budget__coverage { margin: 0;}
.operator-controls { display: grid; justify-items: start; gap: var(--space-3); min-width: 0;}
.operator-controls > label:not(.operator-controls__admission),.operator-controls > .field { display: grid; gap: var(--space-2); width: 100%; min-width: 0;}
.operator-controls > .operator-controls__admission { display: inline-flex; align-items: center; gap: var(--space-2);}
.operator-controls > .button { margin-top: var(--space-1);}
.operator-collapsible > summary { cursor: pointer;}
.operator-collapsible > summary strong { margin-inline-end: var(--space-3);}
.operator-collapsible > :not(summary) { margin-top: var(--space-4);}
.operator-slots-grid { display: grid; gap: var(--space-6);}
.operator-slot-card { display: grid; justify-items: start; gap: var(--space-3); min-width: 0; padding-block: var(--space-4); border-top: 1px solid var(--rule);}
.operator-slot-card > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); min-width: 0;}
.operator-slot-card > div:first-child strong { overflow-wrap: anywhere;}
.operator-slot-card > div:first-child small { color: var(--muted);}
.slot-assignment { width: 100%;}
.member-list { display: flex; flex-direction: column; border: none; border-top: 1px solid var(--rule); border-radius: 0; overflow: visible;}
.member-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); gap: var(--space-3); flex-wrap: wrap; background: transparent;}
.member-row:last-child { border-bottom: 1px solid var(--rule);}
.member-row:hover { background: var(--sunken);}
.member-invite { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; padding-top: var(--space-6); border-top: 1px solid var(--rule);}