Add professional CSS stylesheet for reports
This commit is contained in:
319
src/py_dvt_ate/reporting/templates/styles.css
Normal file
319
src/py_dvt_ate/reporting/templates/styles.css
Normal file
@@ -0,0 +1,319 @@
|
||||
/* Professional report stylesheet for py_dvt_ate
|
||||
* Optimised for A4 PDF output via WeasyPrint
|
||||
*/
|
||||
|
||||
/* Page setup for A4 */
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 20mm 15mm 25mm 15mm;
|
||||
|
||||
@bottom-center {
|
||||
content: "Page " counter(page) " of " counter(pages);
|
||||
font-size: 9pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@bottom-right {
|
||||
content: "py_dvt_ate Report";
|
||||
font-size: 9pt;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 10pt;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
h1 {
|
||||
font-size: 20pt;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 10mm 0;
|
||||
padding-bottom: 3mm;
|
||||
border-bottom: 2px solid #2563eb;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 14pt;
|
||||
color: #1a1a1a;
|
||||
margin: 8mm 0 4mm 0;
|
||||
padding-bottom: 2mm;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 12pt;
|
||||
color: #374151;
|
||||
margin: 6mm 0 3mm 0;
|
||||
}
|
||||
|
||||
/* Report header section */
|
||||
.report-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 8mm;
|
||||
padding-bottom: 5mm;
|
||||
border-bottom: 3px solid #2563eb;
|
||||
}
|
||||
|
||||
.report-header .logo {
|
||||
max-height: 20mm;
|
||||
max-width: 50mm;
|
||||
}
|
||||
|
||||
.report-header .title-block {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.report-header .title-block h1 {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.report-header .title-block .subtitle {
|
||||
font-size: 11pt;
|
||||
color: #6b7280;
|
||||
margin-top: 2mm;
|
||||
}
|
||||
|
||||
/* Metadata section */
|
||||
.metadata {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 3mm;
|
||||
margin-bottom: 6mm;
|
||||
padding: 4mm;
|
||||
background-color: #f9fafb;
|
||||
border-radius: 2mm;
|
||||
}
|
||||
|
||||
.metadata-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.metadata-item .label {
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
min-width: 35mm;
|
||||
}
|
||||
|
||||
.metadata-item .value {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* Summary cards */
|
||||
.summary-cards {
|
||||
display: flex;
|
||||
gap: 4mm;
|
||||
margin: 6mm 0;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
flex: 1;
|
||||
padding: 5mm;
|
||||
border-radius: 2mm;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.summary-card.pass {
|
||||
background-color: #dcfce7;
|
||||
border: 1px solid #86efac;
|
||||
}
|
||||
|
||||
.summary-card.fail {
|
||||
background-color: #fee2e2;
|
||||
border: 1px solid #fca5a5;
|
||||
}
|
||||
|
||||
.summary-card.info {
|
||||
background-color: #dbeafe;
|
||||
border: 1px solid #93c5fd;
|
||||
}
|
||||
|
||||
.summary-card .count {
|
||||
font-size: 24pt;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.summary-card.pass .count {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.summary-card.fail .count {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.summary-card.info .count {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.summary-card .label {
|
||||
font-size: 9pt;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Status badges */
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 1mm 3mm;
|
||||
border-radius: 1mm;
|
||||
font-size: 9pt;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-badge.pass {
|
||||
background-color: #dcfce7;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.status-badge.fail {
|
||||
background-color: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.status-badge.error {
|
||||
background-color: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.status-badge.pending {
|
||||
background-color: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 4mm 0;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 2.5mm 3mm;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f9fafb;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
border-bottom: 2px solid #d1d5db;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* Numeric columns right-aligned */
|
||||
td.numeric {
|
||||
text-align: right;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
/* Results table specific */
|
||||
.results-table .status-cell {
|
||||
text-align: center;
|
||||
width: 15mm;
|
||||
}
|
||||
|
||||
.results-table .value-cell {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.results-table .limit-cell {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
text-align: right;
|
||||
color: #6b7280;
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
/* Charts section */
|
||||
.chart-container {
|
||||
margin: 6mm 0;
|
||||
text-align: center;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.chart-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 2mm;
|
||||
}
|
||||
|
||||
.chart-container .caption {
|
||||
font-size: 9pt;
|
||||
color: #6b7280;
|
||||
margin-top: 2mm;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Configuration section */
|
||||
.config-section {
|
||||
background-color: #f9fafb;
|
||||
padding: 4mm;
|
||||
border-radius: 2mm;
|
||||
margin: 4mm 0;
|
||||
}
|
||||
|
||||
.config-section pre {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 8pt;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Page break utilities */
|
||||
.page-break-before {
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
.page-break-after {
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
.avoid-break {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.report-footer {
|
||||
margin-top: 10mm;
|
||||
padding-top: 4mm;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
font-size: 8pt;
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Print optimisations */
|
||||
@media print {
|
||||
body {
|
||||
print-color-adjust: exact;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user