221 lines
6.3 KiB
Django/Jinja
221 lines
6.3 KiB
Django/Jinja
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<title>{{ title or "Port Report" }}</title>
|
|
|
|
<style>
|
|
/* Reset-ish */
|
|
html, body { margin:0; padding:0; }
|
|
body {
|
|
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans",
|
|
"Liberation Sans", sans-serif, "Apple Color Emoji","Segoe UI Emoji";
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.45;
|
|
font-size: 14px;
|
|
}
|
|
table { border-collapse: collapse; width: 100%; }
|
|
th, td { vertical-align: top; }
|
|
|
|
/* Include palette */
|
|
{% if dark_mode %}
|
|
{% include "palettes/dark.css.j2" %}
|
|
{% else %}
|
|
{% include "palettes/light.css.j2" %}
|
|
{% endif %}
|
|
|
|
/* Layout & components */
|
|
.container { max-width: 900px; margin: 24px auto; padding: 0 12px; }
|
|
|
|
.card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
}
|
|
.header {
|
|
background: var(--card-bg);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.muted { color: var(--muted); }
|
|
.dash { color: var(--muted); } /* for em-dash placeholder */
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
line-height: 1.6;
|
|
border: 1px solid transparent;
|
|
margin-left: 6px;
|
|
}
|
|
.badge.ok { background: var(--ok); color: var(--ok-on); }
|
|
.badge.issue { background: var(--issue); color: var(--issue-on); }
|
|
|
|
.chip { display:inline-block; background: var(--chip-bg); padding: 2px 6px; border-radius: 6px; }
|
|
|
|
.section { margin: 0 0 18px 0; }
|
|
.table-clean { width:100%; }
|
|
.table-clean td { padding: 8px 10px; }
|
|
|
|
.host-title { font-size: 14px; }
|
|
.summary-row { padding: 10px; }
|
|
|
|
/* Utility helpers referenced by report_body.html.j2 */
|
|
.title-xl { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
|
|
.meta { font-size: 12px; }
|
|
.note { margin: 6px 0 12px 0; font-size: 12px; }
|
|
.subhead { font-weight: 600; margin: 8px 0; }
|
|
.pad-s { padding: 10px; }
|
|
.footer { margin-top: 18px; font-size: 11px; }
|
|
|
|
/* ===== Summary Bar (prominent) ===== */
|
|
.summary-row {
|
|
position: relative;
|
|
background: var(--summary-bg, var(--card-bg));
|
|
border: 1px solid var(--summary-border, var(--border));
|
|
border-radius: 12px;
|
|
padding: 14px 16px;
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
box-shadow:
|
|
0 0 0 1px var(--summary-border, var(--border)) inset,
|
|
0 8px 24px var(--summary-shadow, rgba(0,0,0,0.25));
|
|
}
|
|
|
|
/* left accent bar */
|
|
.summary-row::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; top: 0; bottom: 0;
|
|
width: 6px;
|
|
border-radius: 12px 0 0 12px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
color-mix(in srgb, var(--accent) 90%, transparent) 0%,
|
|
color-mix(in srgb, var(--accent) 60%, transparent) 100%
|
|
);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* tighten spacing between metrics */
|
|
.summary-row strong { margin-right: 8px; }
|
|
|
|
/* KPI “chips” for the numbers (no HTML changes needed) */
|
|
.text-strong,
|
|
.text-ok,
|
|
.text-issue {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
font-weight: 700;
|
|
line-height: 1.6;
|
|
border: 1px solid transparent;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Neutral total */
|
|
.text-strong {
|
|
background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, transparent));
|
|
border-color: color-mix(in srgb, var(--accent) 45%, var(--summary-border, var(--border)));
|
|
}
|
|
|
|
/* OK / Issue map to your existing status colors */
|
|
.text-ok {
|
|
color: var(--text);
|
|
background: var(--ok-bg-soft, color-mix(in srgb, var(--ok) 18%, transparent));
|
|
border-color: color-mix(in srgb, var(--ok) 45%, var(--summary-border, var(--border)));
|
|
}
|
|
|
|
.text-issue {
|
|
color: var(--text);
|
|
background: var(--issue-bg-soft, color-mix(in srgb, var(--issue) 18%, transparent));
|
|
border-color: color-mix(in srgb, var(--issue) 45%, var(--summary-border, var(--border)));
|
|
}
|
|
|
|
/* ===== Port Table Card (bordered) ===== */
|
|
.table-ports {
|
|
position: relative;
|
|
margin-bottom: 24px;
|
|
border: 1px solid var(--card-border, var(--border));
|
|
border-radius: 12px;
|
|
background: var(--card-bg);
|
|
box-shadow:
|
|
0 0 0 1px var(--card-border, var(--border)) inset,
|
|
0 4px 12px rgba(0,0,0,0.25);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-ports th,
|
|
.table-ports td {
|
|
border: 1px solid var(--border);
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.table-ports .th {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
border-bottom: 2px solid var(--border);
|
|
}
|
|
|
|
.table-ports .td {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.table-ports .td.num { white-space: nowrap; }
|
|
.table-ports .td.proto,
|
|
.table-ports .td.state,
|
|
.table-ports .td.expect {
|
|
text-align: center;
|
|
}
|
|
|
|
/* optional: subtle row separation */
|
|
.table-ports tr:nth-child(even) {
|
|
background: color-mix(in srgb, var(--card-bg) 92%, var(--border) 8%);
|
|
}
|
|
|
|
/* ===== Host Header Row (within table-ports) ===== */
|
|
.table-ports .header {
|
|
position: relative;
|
|
background: var(--header-bg, var(--card-bg));
|
|
color: var(--header-text, var(--text));
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
border-radius: 10px 10px 0 0;
|
|
padding: 12px 14px;
|
|
border-bottom: 2px solid var(--header-border, var(--border));
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.25);
|
|
box-shadow: 0 2px 8px var(--header-shadow, rgba(0,0,0,0.2));
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
/* Subtle left accent stripe (matches summary style) */
|
|
.table-ports .header::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; bottom: 0; left: 0;
|
|
width: 5px;
|
|
border-radius: 10px 0 0 0;
|
|
background: linear-gradient(
|
|
180deg,
|
|
color-mix(in srgb, var(--accent) 85%, transparent) 0%,
|
|
color-mix(in srgb, var(--accent) 55%, transparent) 100%
|
|
);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
{% block body %}{% endblock %}
|
|
</div>
|
|
</body>
|
|
</html>
|