admin/memby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.2.77

Browse Source
This commit is contained in:
ponzischeme89
2026-08-19 06:57:59 +12:00
parent 8c847c59b8
commit 2b43b9ef12
94 changed files with 6359 additions and 778 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-ui/src/styles.css
+94 -25
View File
@@ -1881,12 +1881,19 @@ select {
font: 12px/1.5 var(--sans);
contain: layout paint style;
}
/* Every track but the event is a fixed width, and that is the whole of why the columns
line up. A row is its own grid container — there are twenty thousand of them and no
shared table — so a `minmax()` track sized from its own content gave each row a slightly
different Service and Result column, and the Result column moved as the widest verdict
on screen changed. Fixed tracks cannot move; content inside them truncates instead.
Vertical rhythm is set here too: cells start at the top of the row rather than being
centred in it, so the Time, Level, Service and Result of a two-line event sit on the
same line as its summary instead of dropping half a line to the middle of the pair. */
.loghead,
.logrow {
display: grid;
grid-template-columns:
92px 52px minmax(150px, 190px) minmax(240px, 1fr)
minmax(96px, 150px) 68px;
grid-template-columns: 92px 52px 190px minmax(240px, 1fr) 150px 68px;
gap: 12px;
padding: 0 12px;
}
@@ -1942,15 +1949,26 @@ select {
background: var(--line-soft);
}
/* The figures below are the twin of the row geometry in `pages/Logs.tsx`: 7px of padding,
a 16px first line, a 2px gap and a 15px second line, over a 1px hairline. The row's
height is set inline from those constants, so a cell drawn taller than its share here is
text sliced through the middle rather than a row that grows. Every first-line cell is
therefore given `line-height: 16px` explicitly, whatever its font size. */
.logrow {
position: absolute;
top: 0;
right: 0;
left: 0;
align-items: center;
align-items: start;
padding-top: 7px;
padding-bottom: 7px;
border-bottom: 1px solid rgba(255, 255, 255, .03);
contain: strict;
}
.logrow > *,
.logrow-line {
line-height: 16px;
}
.logrow:hover {
background: rgba(255, 255, 255, .035);
}
@@ -1971,7 +1989,7 @@ select {
.logrow-time {
color: var(--quiet);
font: 11px/1 var(--mono);
font: 11px/16px var(--mono);
font-variant-numeric: tabular-nums;
}
@@ -2003,7 +2021,7 @@ select {
.logrow-level {
color: var(--quiet);
font: 700 10px/1 var(--sans);
font: 700 10px/16px var(--sans);
letter-spacing: .06em;
}
.logrow-level[data-level="ERROR"] { color: var(--danger-ink); }
@@ -2019,16 +2037,18 @@ select {
on every other page and must not start meaning "playback" on this one. */
.logrow-place {
display: flex;
align-items: baseline;
align-items: center;
gap: 5px;
min-width: 0;
height: 16px;
overflow: hidden;
}
.logrow-service {
flex: 0 0 auto;
max-width: 96px;
overflow: hidden;
color: var(--quiet);
font: 700 10px/1.4 var(--sans);
font: 700 10px/16px var(--sans);
letter-spacing: .07em;
text-overflow: ellipsis;
text-transform: uppercase;
@@ -2047,6 +2067,7 @@ select {
flex: 1 1 auto;
color: var(--quiet);
font-size: 11.5px;
line-height: 16px;
}
/* The summary is the row. It is a button because selecting the row is what opens the
@@ -2055,9 +2076,9 @@ select {
display: flex;
flex-direction: column;
gap: 2px;
justify-content: center;
align-items: stretch;
justify-content: flex-start;
width: 100%;
height: 100%;
min-width: 0;
padding: 0;
overflow: hidden;
@@ -2079,11 +2100,12 @@ select {
align-items: baseline;
gap: 8px;
min-width: 0;
height: 16px;
}
.logrow-action {
flex: 0 0 auto;
color: var(--muted);
font: 600 10.5px/1.4 var(--mono);
font: 600 10.5px/16px var(--mono);
letter-spacing: .04em;
}
.logrow-action[data-method="POST"],
@@ -2098,15 +2120,13 @@ select {
text-overflow: ellipsis;
white-space: nowrap;
}
/* The reason a failure needs no drawer. */
.logrow-error {
overflow: hidden;
color: var(--danger-ink);
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.logrow-context {
/* Identity on a request row, kept on the summary's own line. It gives way before the path
does — knowing which route was called matters more than which television called it, and
the drawer holds both either way. */
.logrow-trail {
flex: 0 1 auto;
min-width: 0;
max-width: 38%;
overflow: hidden;
color: var(--quiet);
font-size: 11px;
@@ -2114,21 +2134,42 @@ select {
white-space: nowrap;
}
/* The second line: the reason a failure needs no drawer, or the person and position that
make an application event mean something. Exactly one line tall, 15px, which is the
figure the row was measured with — it can truncate but it can never wrap, because a wrap
is a row overflowing into the one below it. */
.logrow-second {
height: 15px;
overflow: hidden;
color: var(--quiet);
font-size: 11px;
line-height: 15px;
text-overflow: ellipsis;
white-space: nowrap;
}
.logrow-second[data-tone="error"] {
color: var(--danger-ink);
}
/* A result is a word, not a badge. A success is understated to the point of being ignorable
— which is the correct amount of attention for the four hundredth 200 in a row — and only
a failure is given a fill. */
.logrow-result {
min-width: 0;
height: 16px;
overflow: hidden;
}
.logrow-verdict {
display: inline-block;
max-width: 100%;
color: var(--quiet);
font: 500 11px/1.5 var(--mono);
font: 500 11px/14px var(--mono);
}
.logrow-verdict[data-tone="ok"] { color: var(--muted); }
.logrow-verdict[data-tone="info"] { color: var(--info-ink); }
.logrow-verdict[data-tone="data"] { color: var(--data-ink); }
/* A fill still has to fit the row's line box: 14px of text and 1px either side is the
16px every other cell on the line occupies. */
.logrow-verdict[data-tone="warn"],
.logrow-verdict[data-tone="bad"] {
padding: 1px 6px;
@@ -2146,7 +2187,7 @@ select {
.logrow-duration {
color: var(--quiet);
font: 11px/1 var(--mono);
font: 11px/16px var(--mono);
font-variant-numeric: tabular-nums;
text-align: right;
}
@@ -2283,7 +2324,7 @@ select {
@media (max-width: 1180px) {
.loghead,
.logrow {
grid-template-columns: 84px 46px minmax(130px, 170px) minmax(200px, 1fr) minmax(88px, 130px);
grid-template-columns: 84px 46px 170px minmax(200px, 1fr) 130px;
gap: 10px;
}
.loghead > :last-child,
@@ -2292,13 +2333,13 @@ select {
}
.loghead,
.logbody {
min-width: 640px;
min-width: 680px;
}
}
@media (max-width: 900px) {
.loghead,
.logrow {
grid-template-columns: 46px minmax(110px, 140px) minmax(180px, 1fr) minmax(72px, 110px);
grid-template-columns: 46px 140px minmax(180px, 1fr) 110px;
gap: 8px;
}
.loghead > :first-child,
@@ -3513,3 +3554,31 @@ details summary {
background: inherit;
}
}
/* The notification history's detail row.
*
* The drawer is a row inside the table rather than a panel beside it, so the record stays
* under the row it belongs to while an operator reads down a filtered list. It borrows the
* log viewer's drawer vocabulary wholesale — the two answer the same shape of question and
* a second look for it would be a second thing to keep in step. */
.detail-row > td {
padding: 0 0 12px;
background: var(--surface-sunken, transparent);
}
.logdrawer-raw h4 {
margin: 0 0 6px;
color: var(--quiet);
font: 700 10px/1 var(--sans);
letter-spacing: .08em;
text-transform: uppercase;
}
/* The message is the one thing on the page rendered as prose rather than as a field: it is
the sentence a viewer actually read, and setting it in the mono field type would make it
look like a value rather than like the notification it is. */
.notification-body {
max-width: 70ch;
margin: 0;
color: var(--text);
font: 13px/1.6 var(--sans);
overflow-wrap: anywhere;
}