1 files changed, 173 insertions, 0 deletions
diff --git a/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.css b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.css
new file mode 100644
index 0000000000..dd24e5dffc
--- /dev/null
+++ b/applications/luci-app-nlbwmon/htdocs/luci-static/resources/view/nlbw.css
@@ -0,0 +1,173 @@
+#chartjs-tooltip {
+	opacity: 0;
+	position: absolute;
+	background: rgba(0, 0, 0, .7);
+	color: white;
+	padding: 3px;
+	border-radius: 3px;
+	transition: all .1s ease;
+	pointer-events: none;
+	transform: translate(-50%, 0);
+	z-index: 20000;
+}
+
+#chartjs-tooltip.above {
+	transform: translate(-50%, -100%);
+}
+
+#chartjs-tooltip.above:before {
+	border: solid;
+	border-color: #111 transparent;
+	border-color: rgba(0, 0, 0, .8) transparent;
+	border-width: 8px 8px 0 8px;
+	bottom: 1em;
+	content: "";
+	display: block;
+	left: 50%;
+	top: 100%;
+	position: absolute;
+	z-index: 99;
+	transform: translate(-50%, 0);
+}
+
+.pie label {
+	font-weight: bold;
+	font-size: 14px;
+	display: block;
+	margin-bottom: 10px;
+	text-align: center;
+}
+
+.kpi ul {
+	list-style: none;
+}
+
+.kpi li {
+	margin: 10px;
+	display: none;
+}
+
+.kpi big {
+	font-weight: bold;
+}
+
+.head {
+	text-align: center;
+	position: relative;
+	display: flex;
+	flex-wrap: wrap;
+	white-space: normal;
+}
+
+.head .pie {
+	min-width: 200px;
+	padding: 5px;
+	flex: 1 1 30%;
+}
+
+.cbi-tooltip .head .pie {
+	min-width: 100px;
+}
+
+.head .kpi {
+	padding: 5px;
+	font-size: smaller;
+	text-align: left;
+	align-self: center;
+	flex: 1 0 33%;
+	min-width: 150px;
+	display: flex;
+	justify-content: center;
+}
+
+.head .kpi ul {
+	margin: 0;
+}
+
+.table .th,
+.table .td {
+	padding: 1px 3px !important;
+	border: 1px solid #ddd;
+}
+
+.table .td > a {
+	display: block;
+}
+
+.table .placeholder .td {
+	border: none;
+}
+
+.table .td.double {
+	padding: 0 !important;
+}
+
+.table .td.double > span {
+	display: block;
+	padding: 1px 3px;
+}
+
+.table .td.double > span:first-child {
+	border-bottom: 1px solid #ddd;
+}
+
+.cbi-tooltip {
+	box-shadow: 0 0 5px #000;
+}
+
+@media screen and (max-width: 992px) {
+	.table .tr {
+		margin-bottom: 10px;
+	}
+
+	.table .th,
+	.table .td, .table .td.double {
+		padding: 1px 3px !important;
+		flex-basis: 50%;
+	}
+
+	.table .td, .table .td::before,
+	.table .th, .table .th::before {
+		text-align: left !important;
+		font-size: 14px;
+		border: none;
+	}
+
+	#host-data .td.hostname {
+		flex-basis: 100%;
+	}
+
+	#ipv6-data .td.double > span {
+		padding: 0;
+		border-bottom: none;
+	}
+
+	#ipv6-data .td.double > span:first-child::before {
+		content: "IPv4: ";
+		font-style: italic;
+		font-size: 13px;
+	}
+
+	#ipv6-data .td.double > span:last-child::before {
+		content: "IPv6: ";
+		font-style: italic;
+		font-size: 13px;
+	}
+
+	.cbi-tooltip {
+		width: 100%;
+		pointer-events: auto;
+		box-shadow: 0 0 10px 5px #000;
+		border-radius: 0;
+	}
+
+	.cbi-tooltip .table .th,
+	.cbi-tooltip .table .td {
+		flex-basis: 16%;
+		min-width: 100px;
+	}
+
+	.head .kpi {
+		font-size: 14px;
+	}
+}