This patch adds styling for the new graph time range buttons
and loads the Javascript in the HTML head.

Signed-off-by: Leo-Andres Hofmann <hofmann(a)leo-andres.de>
---
 html/html/themes/ipfire/include/css/style.css | 37 +++++++++++++++++--
 html/html/themes/ipfire/include/functions.pl  |  1 +
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index 9421fc111..10644a9f8 100644
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -328,7 +328,38 @@ table.fw-nat tbody tr td {
 	height: 2.25em;
 }
 
-iframe.graph {
-	width: 100%;
-	min-height: 300px;
+/* RRD graph images */
+
+div.rrdimage > ul {
+	list-style-type: none;
+	margin: 0;
+	display: flex;
+	justify-content: center;
+}
+.rrdimage li:not(:first-child)::before {
+	content: "-";
+	padding: 0 0.3em;
+}
+
+.rrdimage button {
+	padding: 0.3em;
+	font-weight: 700;
+	color: #d90000; /* link color */
+	border: none;
+	background: none;
+	cursor: pointer;
+	text-decoration: underline;
+}
+.rrdimage button:focus {
+	outline: none;
+	box-shadow: none;
+}
+.rrdimage button.selected {
+	background-color: rgba(135, 203, 0, 0.2);
+}
+
+div.rrdimage > img {
+	box-sizing: border-box;
+	max-width: 100%;
+	min-height: 290px;
 }
diff --git a/html/html/themes/ipfire/include/functions.pl b/html/html/themes/ipfire/include/functions.pl
index 9aec77497..c76af336d 100644
--- a/html/html/themes/ipfire/include/functions.pl
+++ b/html/html/themes/ipfire/include/functions.pl
@@ -128,6 +128,7 @@ print <<END;
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 	<link rel="shortcut icon" href="/favicon.ico" />
 	<script type="text/javascript" src="/include/jquery.js"></script>
+	<script src="/include/rrdimage.js"></script>
 
 	<script type="text/javascript">
 		function swapVisibility(id) {
-- 
2.27.0.windows.1