magnus/routeros_dns
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added headers and table for records

Browse source
This commit is contained in:
Magnus Åhall 2026-02-25 16:43:41 +01:00
parent 567133df67
commit ad7bc0345a
2 changed files with 139 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

129
static/css/index.css
View file

@ -2,9 +2,6 @@
--line-color: #ccc;
--line-color-record: #eee;
--type-background: #ddd;
--type-foreground: #000;
--label-first: #800033;
--label-rest: #666;
@ -12,6 +9,16 @@
--label-border: #ccc;
--copy-color: #d48700;
--header-line: #d0d0d0;
--record-A: #89a02c;
--record-AAAA: #2f4858;
--record-CNAME: #f6ae2d;
--record-FWD: #f26419;
--record-TXT: #86bbd8;
--record-NXDOMAIN: #aa0000;
--record-other: #888;
}
html {
@ -149,17 +156,52 @@ button {
&>.records {
padding-left: 30px;
padding-top: 8px;
padding-bottom: 8px;
margin-left: 10px;
display: grid;
grid-template-columns: repeat(3, min-content) 1fr;
grid-gap: 4px 10px;
grid-template-columns: repeat(5, min-content);
width: min-content;
/*grid-gap: 4px 10px;*/
align-items: center;
border-left: 1px solid var(--line-color);
&>img {
display: block;
padding-left: 4px;
.header {
font-weight: bold;
font-size: 0.75em;
background: #eee;
padding: 2px 8px;
border-left: 1px solid var(--header-line);
border-top: 1px solid var(--header-line);
border-bottom: 1px solid var(--header-line);
&:first-child {
grid-column: 1 / 3;
border-top-left-radius: 4px;
}
&.last {
border-right: 1px solid var(--header-line);
border-top-right-radius: 4px;
}
}
&>:not(.header) {
height: 40px;
}
&>.record-icon {
border-left: 1px solid var(--header-line);
align-content: center;
padding-left: 8px;
border-bottom: 1px solid var(--header-line);
img {
display: block;
padding-left: 4px;
}
}
.copy {
@ -174,6 +216,10 @@ button {
cursor: pointer;
user-select: none;
display: flex;
padding: 0 16px 0 8px;
border-bottom: 1px solid var(--header-line);
height: 100%;
align-items: center;
&.created {
* {
@ -202,20 +248,69 @@ button {
}
.type {
background-color: var(--type-background);
color: var(--type-foreground);
padding: 4px 8px;
border-radius: 4px;
margin-top: 2px;
margin-bottom: 2px;
width: min-content;
font-weight: bold;
font-size: 0.85em;
padding: 2px 8px;
border-bottom: 1px solid var(--header-line);
border-left: 1px solid var(--header-line);
align-content: center;
cursor: pointer;
div {
background-color: var(--record-other);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
width: min-content;
height: min-content;
font-weight: bold;
font-size: 0.85em;
}
&.A div {
background-color: var(--record-A);
}
&.AAAA div {
background-color: var(--record-AAAA);
}
&.CNAME div {
background-color: var(--record-CNAME);
color: #000;
}
&.FWD div {
background-color: var(--record-FWD);
}
&.TXT div {
background-color: var(--record-TXT);
color: #000;
}
&.NXDOMAIN div {
background-color: var(--record-NXDOMAIN);
}
}
.value {
cursor: pointer;
user-select: none;
border-left: 1px solid var(--header-line);
border-bottom: 1px solid var(--header-line);
padding: 0px 8px;
height: 100%;
align-content: center;
}
.ttl {
cursor: pointer;
border-left: 1px solid var(--header-line);
border-right: 1px solid var(--header-line);
border-bottom: 1px solid var(--header-line);
padding: 0px 8px;
height: 100%;
align-content: center;
}
.separator {