307 lines
6.9 KiB
CSS
307 lines
6.9 KiB
CSS
table {
|
|
xxborder:2px solid;
|
|
xxborder-collapse:collapse;
|
|
}
|
|
|
|
|
|
tr.row-total, tr.row-percent , td.col-15, td.col-16 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
table {
|
|
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.headerpanel {
|
|
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
|
|
border:1px solid;
|
|
width:98%;
|
|
}
|
|
|
|
.innerheaderpanel {
|
|
padding:10px;
|
|
}
|
|
|
|
tr,td,th {
|
|
border:1px solid;
|
|
}
|
|
|
|
.mailstats-detail-1stcol{
|
|
width:174px;
|
|
}
|
|
|
|
thead tr {
|
|
border-bottom :2px solid;
|
|
color:black;
|
|
background-color:darkgrey;
|
|
}
|
|
|
|
tfoot tr {
|
|
border-top:2px solid;
|
|
color:black;
|
|
font-weight: bold;
|
|
background-color:darkgrey;
|
|
}
|
|
|
|
.stripes tbody tr:nth-child(odd) {background-color: #dfdfdf}
|
|
|
|
.no-stripes tbody tr:nth-child(odd) {
|
|
background-color: transparent; /* or whatever background color you want */
|
|
}
|
|
|
|
|
|
div.linksattop {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
a.prevlink {
|
|
text-align: left;
|
|
}
|
|
|
|
div.divshowindex {
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
a.nextlink {
|
|
text-align: right;
|
|
}
|
|
/* Basic styling for the tab container */
|
|
.tab-container {
|
|
display: flex;
|
|
border-bottom: 1px solid #ccc;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Styling for the tabs */
|
|
.tab {
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
border: 1px solid #ccc;
|
|
border-bottom: none;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
/* Styling for the active tab */
|
|
.tab-active {
|
|
background-color: #ffffff;
|
|
border-top: 2px solid #007bff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Hide all content sections by default */
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
/* Display the active content section */
|
|
.tab-content-active {
|
|
display: block;
|
|
}
|
|
|
|
.cssclass1 {background-color:#ffff99;}
|
|
.cssclass2 {background-color:lightcoral;}
|
|
.cssclass3 {background-color:lightcyan;}
|
|
.cssclass4 {background-color:lightgoldenrodyellow;}
|
|
.cssclass5 {background-color:lightgray;}
|
|
.cssclass6 {background-color:lightgreen;}
|
|
.cssclass7 {background-color:lightpink;}
|
|
.cssclass8 {background-color:lightsalmon;}
|
|
.cssclass9 {background-color:lightseagreen;}
|
|
.cssclass10 {background-color:lightskyblue;}
|
|
.cssclass11 {background-color:lightslategray;}
|
|
.cssclass12 {background-color:lightsteelblue;}
|
|
|
|
p.cssvalid,p.htmlvalid {float:left;margin-right:20px}
|
|
|
|
.maintable {}
|
|
|
|
.subtables {
|
|
display: flex;
|
|
flex-wrap: nowrap; /* Use wrap if you want the tables to wrap to the next line when the screen is too narrow */
|
|
gap: 10px; /* Optional: Adds space between the tables */
|
|
}
|
|
.subtables > div {
|
|
flex: 1; /* Equal width tables, remove or adjust based on your preference */
|
|
margin-left:0px;
|
|
}
|
|
|
|
.footer {}
|
|
|
|
.iframe-container {
|
|
width: 100%;
|
|
height: 500px; /* Adjust as needed */
|
|
border: none;
|
|
}
|
|
|
|
.parent-container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.greyed-out {
|
|
color: grey;
|
|
}
|
|
|
|
.subtables {
|
|
display: flex;
|
|
flex-wrap: wrap; /* Allows the items to wrap onto the next line */
|
|
justify-content: space-between; /* Distributes space between the tables */
|
|
margin: -10px; /* Negative margin to offset the table margins */
|
|
}
|
|
|
|
.table-container {
|
|
display: flex;
|
|
flex-wrap: wrap; /* Allowing wrapping of the tables */
|
|
width: 100%; /* Makes the container full width */
|
|
box-sizing: border-box; /* Adjust size calculations to include padding and borders */
|
|
}
|
|
|
|
.Incoming, .Junk, .Geoip, .Qpsmtpd, .Viruses, .Blacklist {
|
|
flex: 0 1 calc(25% - 20px); /* Each table will take 25% of the width minus margins */
|
|
margin: 10px; /* Margin for spacing */
|
|
box-sizing: border-box; /* Include padding and border in the element's total width and height */
|
|
}
|
|
|
|
/* Ensure tables adapt on smaller screens */
|
|
/* Default styling for large screens (5 columns) */
|
|
.Incoming, .Junk, .Geoip, .Qpsmtpd, .Viruses, .Blacklist {
|
|
flex: 0 1 calc(20% - 20px); /* 20% width for 5 columns */
|
|
margin: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 4 columns layout */
|
|
@media (max-width: 1600px) {
|
|
.Incoming, .Junk, .Geoip, .Qpsmtpd, .Viruses, .Blacklist {
|
|
flex: 0 1 calc(25% - 20px); /* 25% width for 4 columns */
|
|
}
|
|
}
|
|
|
|
/* 3 columns layout */
|
|
@media (max-width: 1200px) {
|
|
.Incoming, .Junk, .Geoip, .Qpsmtpd, .Viruses, .Blacklist {
|
|
flex: 0 1 calc(33.333% - 20px); /* 33.333% width for 3 columns */
|
|
}
|
|
}
|
|
|
|
/* 2 columns layout */
|
|
@media (max-width: 600px) {
|
|
.Incoming, .Junk, .Geoip, .Qpsmtpd, .Viruses, .Blacklist {
|
|
flex: 0 1 calc(50% - 20px); /* 50% width for 2 columns */
|
|
}
|
|
}
|
|
|
|
/* 1 column layout for mobile */
|
|
@media (max-width: 300px) {
|
|
.Incoming, .Junk, .Geoip, .Qpsmtpd, .Viruses, .Blacklist{
|
|
flex: 0 1 100%; /* 100% width for 1 column */
|
|
}
|
|
}
|
|
|
|
/* Taken from inline in the chameleon templates */
|
|
.maindiv {width:100%;overflow-x:auto;font-size:1cqw}
|
|
.traffictable {border-collapse:collapse;width:98%}
|
|
.divseeinbrowser{text-align:center;}
|
|
.bordercollapse{border-collapse:collapse;}
|
|
|
|
/* ==============================================
|
|
Summary Logs Section (scoped under .mailstats-summary)
|
|
============================================== */
|
|
.mailstats-summary .summary-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
font-size: 0.85vw;
|
|
}
|
|
|
|
/* Table styling */
|
|
.mailstats-summary .summary-table {
|
|
border-collapse: collapse;
|
|
width: 98%;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.mailstats-summary .summary-table th {
|
|
text-align: left;
|
|
padding: 0.5em;
|
|
border-bottom: 2px solid #ddd;
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.mailstats-summary .summary-table td {
|
|
padding: 0.5em;
|
|
border-bottom: 1px solid #ddd;
|
|
word-break: break-word; /* Allows breaking long words at arbitrary points */
|
|
overflow-wrap: break-word; /* Modern standard for breaking long words */
|
|
hyphens: auto; /* Optionally adds hyphenation if supported */
|
|
}
|
|
|
|
/* Zebra striping */
|
|
.mailstats-summary .summary-table tbody tr:nth-child(even) {
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
/* Pagination */
|
|
.mailstats-summary .pagination {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.mailstats-summary .pagination a {
|
|
text-decoration: none;
|
|
color: #0066cc;
|
|
padding: 0.3em 0.6em;
|
|
}
|
|
|
|
.mailstats-summary .pagination a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.mailstats-summary table.stripes {
|
|
border-collapse: collapse;
|
|
width: 95%;
|
|
overflow-x: auto;
|
|
margin: 0.6% auto;
|
|
}
|
|
|
|
/* Optional zebra striping */
|
|
.mailstats-summary table.stripes tbody tr:nth-child(even) {
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
/* ==============================================
|
|
Log Detail Page (scoped under .mailstats-detail)
|
|
============================================== */
|
|
.mailstats-detail .detail-container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 1em auto;
|
|
padding: 0 1em;
|
|
}
|
|
|
|
/* Preformatted log box */
|
|
.mailstats-detail .log {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
background: #111;
|
|
color: #eee;
|
|
padding: 1em;
|
|
border-radius: 6px;
|
|
font-family: monospace, monospace;
|
|
font-size: 0.95em;
|
|
line-height: 1.4;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* Back link styling */
|
|
.mailstats-detail a {
|
|
color: #0066cc;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.mailstats-detail a:hover {
|
|
text-decoration: underline;
|
|
} |