Something went wrong. Try again.
An easy to set up and operate PDS admin panel. forked from brookie.blog/pds-operator
Something went wrong. Try again.
20 kB · 1138 lines
CSS
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139:root { --bg: #fafafa; --surface: #ffffff; --border: #d8d8d8; --text: #161616; --text-dim: #6b6b6b; --ok: #1a7a4c; --warn: #a5690a; --error: #b0281f; --accent: #161616; --radius: 2px; --shadow: rgba(0, 0, 0, 0.18);}
@media (prefers-color-scheme: dark) { :root { --bg: #101112; --surface: #16181a; --border: #2c2f33; --text: #e7e7e7; --text-dim: #8a8f94; --ok: #4fbf85; --warn: #d9a441; --error: #e2685c; --accent: #e7e7e7; --shadow: rgba(0, 0, 0, 0.5); }}
* { box-sizing: border-box;}
html,body,#root { height: 100%;}
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", "Menlo", monospace; font-size: 14px; line-height: 1.5;}
a { color: var(--text);}
button,input,select { font-family: inherit; font-size: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px;}
input { font-size: 16px; /* below 16 iOS Safari zooms on focus */}
button { cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease;}
button:hover:not(:disabled) { border-color: var(--text);}
button:focus-visible,input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px;}
button:disabled { opacity: 0.5; cursor: not-allowed;}
button.danger:hover:not(:disabled) { border-color: var(--error); color: var(--error);}
.app { max-width: 1000px; margin: 0 auto; padding: 24px 16px 64px;}
.header { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; margin-bottom: 24px;}
.header h1 { font-size: 15px; font-weight: 500; margin: 0; text-transform: lowercase;}
.header .sub { color: var(--text-dim);}
.panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 16px; margin-bottom: 16px;}
/* relay stats sit directly on the page, no panel chrome; side padding lines the stats up with the panels' inner content (16px panel + 10px cell padding) */.status-panel { padding: 8px 16px; margin-bottom: 24px;}
.header-actions { display: flex; align-items: center; gap: 10px;}
/* request crawl lives in the nav on desktop, above the stats on mobile */.crawl-row.nav-crawl { margin-top: 0; flex-direction: row-reverse; /* feedback message to the button's left */ white-space: nowrap;}
.crawl-row.panel-crawl { display: none; margin-top: 16px;}
@media (max-width: 640px) { .crawl-row.nav-crawl { display: none; }
.crawl-row.panel-crawl { display: flex; /* full-width button; message wraps below */ }}
/* type scale: 3 sizes only. 14 body and labels, 15 section titles, 16 panel titles and stat values (inputs pinned at 16 so iOS Safari does not zoom on focus) */.panel h2 { font-size: 16px; color: var(--text-dim); margin: 0 0 12px; font-weight: 500;}
.status-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding-left: 10px;}
.skeleton { display: inline-block; width: 4em; height: 1.2em; margin: 0.15em 0; /* fill out the line box so nothing shifts when real values land */ border-radius: var(--radius); background: color-mix(in srgb, var(--text) 8%, transparent); animation: skeleton-pulse 1.2s ease-in-out infinite;}
@keyframes skeleton-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; }}
.sync-footer { margin-top: 24px; text-align: center; color: var(--text-dim); font-size: 14px;}
.crawl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px;}
/* request crawl is a split button: main action + chevron sharing one outline. .menu-wrap sets inline-block later in the file, so match its specificity */.menu-wrap.crawl-split { display: inline-flex;}
.crawl-split > button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;}
.crawl-split > button.chevron { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0; width: 35px; /* button height: 21px line + 12px padding + 2px border */ display: inline-flex; align-items: center; justify-content: center;}
.crawl-split .menu .relay-form { display: flex; gap: 6px; padding: 4px;}
.crawl-split .menu .relay-form input { width: 170px; min-width: 0; padding: 4px 8px;}
.crawl-split .menu .relay-form button { border: 1px solid var(--border); text-align: center;}
.stat { display: flex; flex-direction: column; gap: 4px;}
.stat .label { color: var(--text-dim); font-size: 14px;}
.stat .value { font-size: 20px; /* display tier: the relay numbers are the page's headline */ font-variant-numeric: tabular-nums;}
.stat .value.ok { color: var(--ok);}
.stat .value.warn { color: var(--warn);}
.stat .value.error { color: var(--error);}
/* inline value-label pairs, e.g. "3 ACTIVE 307 DORMANT" */.stats-strip { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline; margin-bottom: 24px;}
.stats-strip .pair { display: inline-flex; gap: 8px; align-items: baseline;}
.stats-strip .value { font-size: 15px; font-variant-numeric: tabular-nums;}
.stats-strip .label { color: var(--text-dim); font-size: 14px;}
/* section titles inside panels */.chart-title { display: block; color: var(--text-dim); font-size: 15px; font-weight: 500; margin-bottom: 8px;}
.chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 72px;}
.chart-bars.dense { gap: 1px;}
.panel-head { display: flex; align-items: baseline; justify-content: space-between;}
.chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px;}
.chart-bar { flex: 1; border-radius: 1px; background: color-mix(in srgb, var(--text) 35%, transparent); transition: background-color 120ms ease;}
/* click pops the period's count as a toast */.chart-bar:hover { background: color-mix(in srgb, var(--text) 60%, transparent);}
.chart-bar.zero:hover { background: color-mix(in srgb, var(--text) 25%, transparent);}
.chart-bar.zero { background: color-mix(in srgb, var(--text) 10%, transparent);}
.chart-months { display: flex; gap: 4px; margin-top: 4px;}
.chart-months span { flex: 1; min-width: 0; /* shrinkable, so a dozen labels never widen the page */ text-align: center; font-size: 14px; color: var(--text-dim);}
.inline-counts { margin-top: 24px;}
/* name in text color, count dim — same treatment as most active */.inline-counts .inline-count { display: inline-block; font-size: 14px; color: var(--text); margin-right: 16px;}
.inline-counts .inline-count b { color: var(--text-dim); font-weight: 400; font-variant-numeric: tabular-nums;}
.inline-count.with-avatar { display: inline-flex; align-items: center; gap: 6px;}
.inline-count.with-avatar .avatar { width: 16px; height: 16px;}
/* most-active entries are buttons that search the accounts panel */button.inline-count { background: none; border: none; padding: 0; cursor: pointer;}
button.inline-count:hover { text-decoration: underline;}
.chart { margin-top: 24px;}
.chart-empty { color: var(--text-dim); font-size: 14px;}
/* second year of the split 24-month mobile view */.chart-half { margin-top: 12px;}
.charts-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px;}
@media (max-width: 640px) { .charts-row { grid-template-columns: minmax(0, 1fr); /* min-content of labels must not widen the page */ }}
/* thin out month labels when they crowd: 24-month view, or any view on mobile. sparse day labels are already thinned, so they keep every mark */.chart-months.dense span:nth-child(even) { visibility: hidden;}
.chart-months.sparse span { white-space: nowrap; overflow: visible;}
@media (max-width: 640px) { .chart-months:not(.sparse) span:nth-child(even) { visibility: hidden; }}
table { width: 100%; border-collapse: collapse;}
th,td { text-align: left; padding: 8px 10px; font-variant-numeric: tabular-nums;}
th { color: var(--text-dim); font-weight: 400; font-size: 14px;}
tr:hover td { background: color-mix(in srgb, var(--text) 4%, transparent);}
.login-screen { height: 100%; display: flex; align-items: center; justify-content: center;}
.login-form { display: flex; flex-direction: column; gap: 10px; width: 240px;}
.error-text { color: var(--error); font-size: 14px;}
.mono-dim { color: var(--text-dim);}
/* line empty-state copy up with table cell text (th/td have 10px side padding) */.empty-state { padding-left: 10px;}
@media (max-width: 640px) { .empty-state { padding-left: 0; /* mobile cards are flush left */ }}
.handle-cell { display: flex; align-items: center; gap: 8px;}
.handle-link { text-decoration: none;}
.handle-link:hover { text-decoration: underline;}
/* handle buttons (open the stats modal) look like the handle links */button.handle-link { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer;}
.labels { color: var(--error); font-size: 14px; margin-left: 28px; /* align under the handle text, past the avatar */ overflow-wrap: anywhere;}
.avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--border); flex-shrink: 0;}
/* storage column header doubles as the sort toggle */button.th-sort { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; white-space: nowrap; /* keep the sort arrow beside the label */}
button.th-sort:hover { text-decoration: underline;}
td.storage-cell { white-space: nowrap;}
td.status-cell { max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
td.status-cell.ok { color: var(--ok);}
td.status-cell.warn { color: var(--warn);}
td.status-cell.error { color: var(--error);}
.menu-wrap { position: relative; display: inline-block;}
button.kebab { padding: 2px 8px; line-height: 1.4;}
.menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 160px; z-index: 20; display: flex; flex-direction: column; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 14px var(--shadow);}
.menu button { border: none; background: none; text-align: left; padding: 6px 10px; white-space: nowrap;}
.menu button:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 6%, transparent);}
.menu button.danger { color: var(--error);}
.menu-sep { height: 1px; background: var(--border); margin: 4px 2px;}
/* checkbox rows inside the accounts filters menu */.menu label.menu-check { display: flex; align-items: center; gap: 8px; padding: 6px 10px; white-space: nowrap; cursor: pointer;}
.menu label.menu-check:hover { background: color-mix(in srgb, var(--text) 6%, transparent);}
.accounts-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px;}
.page-size { display: flex; align-items: center; gap: 8px; color: var(--text-dim);}
.toast { position: fixed; transform: translateX(-50%); padding: 6px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 14px var(--shadow); z-index: 30; max-width: calc(100vw - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: toast-in 150ms ease-out; transition: transform 450ms ease, opacity 450ms ease, top 300ms ease; pointer-events: none;}
.toast.leaving { transform: translateX(-50%) translateY(-16px); opacity: 0;}
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); }}
/* sits above menus (20) but below the toast (30) so "copied" feedback shows */.modal-backdrop { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--shadow) 55%, transparent);}
.modal { width: 100%; max-width: 28rem; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 14px var(--shadow);}
.modal h3 { margin: 0 0 12px; overflow-wrap: anywhere;}
.password-box { font-family: monospace; font-size: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--text) 4%, transparent); overflow-wrap: anywhere; user-select: all;}
.modal-warn { color: var(--text-dim); font-size: 14px; margin: 10px 0 14px;}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end;}
/* per-account stats modal, wider than the password one so the chart has room */.modal.stats-modal { max-width: 36rem;}
.account-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px;}
.account-head .avatar { width: 36px; height: 36px; flex-shrink: 0;}
.account-head h3 { margin: 0;}
.account-head-text { min-width: 0; /* shrinkable flex child, so long lines clip instead of overflowing */}
.account-sub { font-size: 13px;}
/* dids and emails clip with an ellipsis rather than wrap mid-string on small screens */.account-sub.clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* invite codes move to their own line whole rather than break at a hyphen */.account-sub .no-break { white-space: nowrap;}
/* phones: avatar centered on top, text gets the full modal width so dids fit */@media (max-width: 640px) { .account-head { flex-direction: column; align-items: center; text-align: center; }
.account-head .avatar { width: 48px; height: 48px; }
.account-head-text { width: 100%; }}
.account-status { font-size: 14px; font-weight: 400;}
.account-status.takendown { color: var(--error);}
.account-status.deactivated { color: var(--warn);}
.stats-modal .stats-strip { margin-bottom: 0;}
.stats-modal .chart { margin-top: 20px;}
.stats-modal .modal-actions { margin-top: 16px;}
.account-actions { list-style: none; margin: 0; padding: 0; font-size: 14px;}
.account-actions li { margin-bottom: 2px;}
.invite-actions { display: flex; gap: 6px; justify-content: flex-end;}
.panel-note { font-size: 13px; margin: 10px 0 0;}
.passkey-row { display: flex; align-items: center; gap: 16px; padding: 6px 10px 6px 10px;}
@media (max-width: 640px) { .passkey-row { padding-left: 0; padding-right: 0; }}
.passkey-row span:first-child { flex: 1;}
.passkey-add { display: flex; gap: 10px; margin-top: 12px;}
.passkey-add input { flex: 1;}
.did-cell .email { overflow-wrap: anywhere; color: var(--text);}
.accounts-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px;}
.search-wrap { position: relative; display: flex; flex: 1;}
.search-wrap input { width: 100%;}
/* custom clear button replaces the browser's built-in one */.search-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none;}
.clear-search { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: none; padding: 2px 6px; color: var(--text-dim);}
.clear-search:hover:not(:disabled) { border: none; color: var(--text);}
/* stack account rows into cards: handle / did / status+indexed+menu */@media (max-width: 640px) { /* key-value list: label left, value right */ .status-grid { display: flex; flex-direction: column; gap: 0; padding-left: 0; }
/* stats strip becomes the same key-value list */ .stats-strip { flex-direction: column; align-items: stretch; /* full-width rows so the leader line has room */ gap: 0; }
/* shared key-value row: value left, leader line, label right */ .kv { display: flex; flex-direction: row; align-items: center; width: 100%; gap: 0; margin: 0; padding: 4px 0; }
.kv::after { content: ""; flex: 1; height: 1px; background: var(--border); margin: 0 8px; order: 1; }
.kv .value { order: 0; font-size: 14px; }
.kv .label { order: 2; font-size: 14px; }
.crawl-row .crawl-split { display: flex; width: 100%; }
.crawl-row .crawl-split > button:first-child { flex: 1; }
.accounts-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
.accounts-footer { flex-direction: column; align-items: stretch; gap: 10px; }
.accounts-footer button { width: 100%; }
.accounts-footer .page-size { justify-content: flex-end; }
button.wide-mobile { width: 100%; }
thead { display: none; }
table, tbody { display: block; }
tbody tr { display: grid; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 0; }
tbody td { display: block; border-left: none; padding: 0; }
tbody tr:hover td { background: none; }
/* accounts: handle / did+email / status+indexed+storage+menu */ .accounts-table tbody tr { grid-template-columns: max-content max-content 1fr max-content; grid-template-areas: "handle handle handle handle" "did did did did" "status indexed storage menu"; }
.accounts-table tbody td:nth-child(1) { grid-area: handle; }
/* indent under the handle text: avatar 20px + 8px gap. Off-scale 13px so the full DID fits a phone width; ellipsis catches the narrowest screens */ .accounts-table tbody td:nth-child(2) { grid-area: did; font-size: 13px; margin-left: 28px; min-width: 0; }
.accounts-table tbody td:nth-child(2) div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accounts-table tbody td:nth-child(3) { grid-area: status; max-width: none; margin-left: 28px; }
.accounts-table tbody td:nth-child(4) { grid-area: indexed; }
.accounts-table tbody td:nth-child(5) { grid-area: storage; }
.accounts-table tbody td:nth-child(6) { grid-area: menu; justify-self: end; }
/* invites: code / uses+created+actions — actions at the right edge like the accounts context menu */ .invites-table tbody tr { grid-template-columns: max-content 1fr max-content; grid-template-areas: "code code code" "uses created actions"; }
.invites-table tbody td:nth-child(1) { grid-area: code; overflow-wrap: anywhere; }
.invites-table tbody td:nth-child(2) { grid-area: uses; }
.invites-table tbody td:nth-child(3) { grid-area: created; }
.invites-table tbody td:nth-child(4) { grid-area: actions; justify-self: end; }
/* audit log: action+when / target / operator */ .audit-table tbody tr { grid-template-columns: 1fr max-content; grid-template-areas: "action when" "target target" "operator operator"; }
.audit-table tbody td:nth-child(1) { grid-area: when; justify-self: end; }
.audit-table tbody td:nth-child(2) { grid-area: action; }
.audit-table tbody td:nth-child(3) { grid-area: target; overflow-wrap: anywhere; font-size: 14px; }
.audit-table tbody td:nth-child(4) { grid-area: operator; font-size: 14px; }}