dns-witch/nomilo
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

css refactoring

Browse source
This commit is contained in:
Hannaeko 2023-02-25 22:42:51 +01:00
parent d06d745dcb
commit 0801e83d3e
2 changed files with 40 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/scripts/records.js
View file

@ -174,15 +174,15 @@ function FriendlyRecord({type, record}) {
function RecordsByName({ name, recordSets }) {
return html`
<article>
<h3>${name}</h4>
<div>
<article class="rrsets-per-name">
<h3 class="record-name">${name}</h4>
<div class="rrsets-per-type">
${Object.entries(recordSets).map(
([type, records]) => {
return html`
<article>
<h4>${recordTypeNames[type]}</h4>
<ul>
<article class="rrset-per-type">
<h4 class="record-type">${recordTypeNames[type]}</h4>
<ul class="rrset-rdata">
${records.map(record => html`<li><${FriendlyRecord} type=${type} record=${record}/></li>`)}
</ul>
</article>

59
public/styles/zone.css
View file

@ -22,55 +22,64 @@ h2 {
margin: 0;
flex-grow: 1;
}
header > :not(:last-of-type) {
margin-right: 2ch;
}
.zone-content h3, .zone-content h4 {
margin: 0;
font-weight: normal;
font-size: 1rem;
width: 30%;
}
.zone-content article {
display: flex;
flex-wrap: wrap;
}
.zone-content > article > div {
flex-grow: 1;
}
.zone-content > article {
.zone-content article.rrsets-per-name {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 2ch;
margin: .5rem 0;
position: relative;
}
.zone-content > article:not(:last-of-type) {
.zone-content article.rrsets-per-name:not(:last-of-type) {
border-bottom: 2px solid rgb(var(--color-hightlight-2));
}
.zone-content article > *{
margin-right: 2ch;
.zone-content h3.record-name,
.zone-content h4.record-type {
margin: 0;
font-weight: normal;
font-size: 1rem;
}
.zone-content article ul {
.zone-content h3.record-name {
grid-column: 1 / 3;
}
.zone-content div.rrsets-per-type {
grid-column: 3 / 7;
}
.zone-content article.rrset-per-type {
grid-template-columns: repeat(4, 1fr);
display: grid;
grid-gap: 2ch;
}
.zone-content h4.record-type {
grid-column: 1 / 2;
}
.zone-content ul.rrset-rdata {
padding: 0;
margin: 0;
list-style-type: none;
grid-column: 2 / 5;
}
.zone-content article dl {
.zone-content ul.rrset-rdata dl {
display: grid;
grid-template: auto / max-content 1fr;
}
.zone-content article dd {
.zone-content ul.rrset-rdata dd {
margin: 0;
}
.zone-content article dt span {
.zone-content ul.rrset-rdata dt span {
display: inline-block;
background-color: rgb(var(--color-hightlight-1));
padding: 0.1em 0.5em;