DenozordecandClaude Sonnet 5.5
d2b05a1037
Radios (PanelForm) is ReUI's RadioGroup; Check takes rich text; a bare Tick covers the table-cell ticks and the list-row switch. Settings IPv6 mode, Change Theme and all Zones modals no longer draw their own native inputs. Matrix and the data-grid's own selection stay as they are. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
125 lines
6.3 KiB
CSS
125 lines
6.3 KiB
CSS
/* Section header */
|
|
.tags { composes: tags from '../../ui/SectionHeader.module.css'; }
|
|
.acts { display:flex; gap: var(--s-4); flex-wrap:wrap; justify-content:flex-end; }
|
|
|
|
/* Breadcrumbs: back to the list from a zone */
|
|
|
|
/* Filter bar */
|
|
.flt { display:flex; gap: var(--s-7); align-items:flex-end; flex-wrap:wrap; margin-bottom: var(--gap-block); }
|
|
.filterWide { flex:1; min-width:220px; }
|
|
.filterMedium { width:190px; }
|
|
.fltShort { width:120px; }
|
|
|
|
/* Count and pagination */
|
|
/* The count is `ui/count.module.css`'s: see there for why. */
|
|
.count { composes: bar above from '../../ui/count.module.css'; }
|
|
.countFoot { margin-top: var(--gap-group); margin-bottom: 0; }
|
|
.mono { composes: mono from '../../ui/text.module.css'; white-space: nowrap; }
|
|
|
|
/* Table */
|
|
.num2 { color:var(--faint); font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
|
|
|
|
/* A zone's name is a domain: that part does belong here, and it goes on the cell
|
|
so the button inherits it. It wraps at its dots (`ui/DomainName`), and the
|
|
minimum keeps a short name whole: at 390 px the table is already wider than
|
|
the screen and gives each column only its narrowest, so `example.net` came out
|
|
in two lines. A long name still breaks, at a dot. */
|
|
.zoneCell { font-family: var(--font-mono); min-width: 14ch; }
|
|
.zoneLink { composes: entityLink from '../../ui/Table.module.css'; }
|
|
|
|
/* A record's Data. Its key/value list lets the value column go down to nothing
|
|
(`ui/kv.module.css`, so a DNSSEC key cannot push it out of the table), and at
|
|
390 px the table gave it exactly that: the SOA's `ns1.example.net` stood one
|
|
letter per line and its row ran past a thousand pixels. The minimum leaves the
|
|
value room for a name. Where the table no longer fits, the rows stack (`stack`
|
|
in ui/Table) and this minimum, like the zone's, stands down. */
|
|
.dataCell { min-width: 40ch; }
|
|
|
|
.ttl { composes: ttl from '../../ui/record.module.css'; }
|
|
|
|
.kv { composes: kv from '../../ui/kv.module.css'; }
|
|
.val { font:var(--t-4)/1.45 var(--font-mono); color:var(--ink); word-break:break-word; }
|
|
.key { composes: key from '../../ui/record.module.css'; }
|
|
.showIt { composes: showIt from '../../ui/record.module.css'; }
|
|
.meta { composes: meta from '../../ui/record.module.css'; }
|
|
|
|
/* Dropdown menu for row and header actions */
|
|
|
|
.paragraph { composes: paragraph from '../../ui/text.module.css'; }
|
|
.output { margin: 0; padding: var(--s-8) var(--s-8); background:var(--field); border:1px solid var(--line); border-radius: var(--r-3); font:var(--t-3)/1.7 var(--font-mono); color:var(--mute); white-space:pre-wrap; word-break:break-all; max-height:320px; overflow:auto; }
|
|
|
|
/* Modal forms */
|
|
.fields { display:flex; flex-direction:column; gap: var(--s-8); }
|
|
.inline { composes: inline from '../../ui/PanelForm.module.css'; }
|
|
.suffix { composes: trailer from '../../ui/text.module.css'; }
|
|
/* The same role as the `.help` of Settings, DHCP and Administration: same colour
|
|
and same line height. With `--faint` it read at 4.64:1 and the others at 5.90:1. */
|
|
.help { font-size: var(--t-3); color:var(--mute); line-height:1.55; }
|
|
.group { border:1px solid var(--line); border-radius: var(--r-3); padding: var(--s-8); display:flex; flex-direction:column; gap: var(--s-7); }
|
|
.groupTitle { font-size: var(--t-2); text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight: 600; }
|
|
.short { width:110px; }
|
|
.medium { width:190px; }
|
|
.area { min-height:110px; resize:vertical; }
|
|
.areaTall { min-height:180px; resize:vertical; }
|
|
/* The two zone-file editors do not wrap (`white-space: nowrap` on
|
|
`txtEditZoneFileText` and `txtImportZoneText`, index.html:5098 and 5186 in
|
|
v15.5.1): a zone file is read by columns. Measured in Chromium, a textarea
|
|
keeps its spaces with `nowrap` (same scroll width as `pre`), so it is copied
|
|
as is. */
|
|
.noWrap { white-space: nowrap; }
|
|
|
|
/* The permissions matrix's checkbox is 18 px tall. `.hitArea` enlarges the target
|
|
without moving the drawing, just as in Administration's matrix. */
|
|
.chkPerm { composes: hitArea from '../../ui/interaction.module.css'; margin: 0 auto; display: block; }
|
|
|
|
/*
|
|
Stale data: the list is still there, and **you can see it is no longer current**.
|
|
|
|
It is a decision of the Zones design and a design rule: "old data must not look
|
|
like new data". The three pieces go together and none is spare:
|
|
|
|
· `--dim` over the rows: they are there, they read, and they are not current. It
|
|
is the same token the Dashboard dims a switched-off series with.
|
|
· a `--dan` border: the refresh also FAILED, which is different from being old.
|
|
· and selection disabled, done on the `input` itself: acting in bulk on a list
|
|
that no longer reflects the server is how the wrong zone gets deleted.
|
|
|
|
The header is NOT dimmed: the labels and the order are still true.
|
|
What is stale is the data, not the table.
|
|
*/
|
|
.stale { border-color: var(--dan); }
|
|
.stale tbody { opacity: var(--dim); }
|
|
|
|
/*
|
|
The selection bar: the count on the left, the verb that acts on it on the right.
|
|
|
|
It is the count bar's geometry (the same padding and the same muted type), with the
|
|
button at the other end. It is not a `Panel`: a bar with a border and a background
|
|
would read as a region of the screen, and this is a strip between the filter and
|
|
the table.
|
|
*/
|
|
.selection {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--s-8);
|
|
padding: var(--s-5) 0;
|
|
font-size: var(--t-4);
|
|
color: var(--mute);
|
|
}
|
|
|
|
|
|
/* The canvas's page tab (an underline with the count) and the panel's own bars. */
|
|
.pageTabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin: 0 0 var(--s-10); }
|
|
.pageTab { display:inline-flex; gap:6px; align-items:center; padding:10px 16px; border:0; border-bottom:2px solid var(--ink); margin-bottom:-1px; background:transparent; color:var(--ink); font:500 14px/1.4 var(--font-ui); cursor:default; }
|
|
.pageTab em { font:400 var(--t-1)/1 var(--font-mono); opacity:.6; font-style:normal; }
|
|
.views { padding: var(--s-7) var(--s-10) 0; }
|
|
.fltIn { padding: var(--s-8) var(--s-10); margin-bottom: 0; }
|
|
.foot { padding: var(--s-7) var(--s-10); }
|
|
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right: var(--s-5); background: var(--mute); vertical-align: middle; }
|
|
.dot[data-tone='ok'] { background: var(--ok); }
|
|
.dot[data-tone='warn'] { background: var(--warn); }
|
|
.dot[data-tone='dan'] { background: var(--dan); }
|
|
|
|
.sub { margin-top: 2px; font: 400 12px/1.3 var(--font-mono); color: var(--mute); }
|