Managing of problems

static/less/datapoints.less

@@ -29,10 +29,10 @@
 	}
 
 	.datapoints {
-		font: "Roboto Mono", monospace;
 		display: grid;
 		grid-template-columns: min-content 1fr;
 		gap: 6px 8px;
+		font-family: "Roboto Mono", monospace;
 		margin-bottom: 8px;
 	}
 

static/less/problems.less

@@ -0,0 +1,31 @@
+@import "theme.less";
+
+#problems-list, #acknowledged-list {
+	display: grid;
+	grid-template-columns: repeat(5, min-content);
+	grid-gap: 4px 16px;
+	margin-bottom: 32px;
+
+	div {
+		white-space: nowrap;
+	}
+
+	.header {
+		font-weight: @bold;
+	}
+
+	.trigger {
+		color: @color1;
+		font-weight: @bold;
+	}
+
+	.acknowledge {
+		img {
+			height: 16px;
+		}
+	}
+}
+
+#acknowledged-list.hidden{
+	display: none;
+}

static/less/theme.less

@@ -14,12 +14,18 @@
 
 @bold: 500;
 
-html {
-  box-sizing: border-box;
+.lighterOrDarker(@color, @amount) {
+	@result: lighten(@color, @amount);
 }
 
-*, *:before, *:after {
-  box-sizing: inherit;
+html {
+	box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
 }
 
 *:focus {
@@ -27,7 +33,7 @@ html {
 }
 
 [onClick] {
-        cursor: pointer;
+	cursor: pointer;
 }
 
 html,
@@ -44,7 +50,8 @@ body {
 	font-size: 11pt;
 }
 
-h1, h2 {
+h1,
+h2 {
 	margin-top: 0px;
 	margin-bottom: 4px;
 }
@@ -83,7 +90,9 @@ b {
 	font-style: normal;
 }
 
-input[type="text"], textarea, select {
+input[type="text"],
+textarea,
+select {
 	font-family: "Roboto Mono", monospace;
 	background: @bg2;
 	color: @text1;
@@ -104,3 +113,26 @@ button {
 		background: @bg3;
 	}
 }
+
+.line {
+	grid-column: 1 / -1;
+	border-bottom: 1px solid .lighterOrDarker(@bg1, 15%)[@result];
+}
+
+span.date {
+	color: @text1;
+	font-weight: @bold;
+}
+
+span.time {
+	font-size: 0.9em;
+	color: @text1;
+}
+
+span.seconds {
+	display: none;
+}
+
+label {
+	user-select: none;
+}