Misc theme fixes

static/css/default_light/datapoints.css

@@ -3,6 +3,11 @@
   grid-template-columns: repeat(6, min-content);
   grid-gap: 8px 16px;
   margin-top: 16px;
+  background-color: #2979b8;
+  padding: 16px;
+  width: min-content;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
 #datapoints .group {
   font-size: 1.1em;
@@ -17,7 +22,7 @@
 #datapoints .header {
   font-weight: 800;
   font-size: 0.85em;
-  color: #333;
+  color: #555;
 }
 #datapoints div {
   white-space: nowrap;

static/css/default_light/default_light.css

@@ -1,3 +1,6 @@
+body {
+  background-color: #f8f8f8;
+}
 .widgets .action #run-result {
   background-color: #fff !important;
   border: 1px solid #ccc;
@@ -35,3 +38,9 @@ button:focus {
 #areas .area .section .name {
   font-weight: normal;
 }
+#datapoints,
+#problems-list,
+#acknowledged-list {
+  background-color: #fff !important;
+  border: 1px solid #ddd;
+}

static/css/default_light/gruvbox.css

@@ -0,0 +1,6 @@
+body {
+  background-image: url(/images/v0/gruvbox/background.svg);
+}
+#areas .area {
+  box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.5);
+}

static/css/default_light/main.css

@@ -72,7 +72,7 @@ html {
 #areas {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 24px;
   margin-top: 16px;
 }
 #areas .area {
@@ -110,7 +110,7 @@ html {
 dialog {
   background: #1b4e78;
   border: 1px solid #3f90d4;
-  color: #333;
+  color: #555;
   box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);
 }
 html,
@@ -122,7 +122,7 @@ body {
   background: #fff;
   font-family: sans-serif;
   font-weight: 300;
-  color: #333;
+  color: #555;
   font-size: 11pt;
 }
 h1,
@@ -159,7 +159,7 @@ textarea,
 select {
   font-family: monospace;
   background: #fff;
-  color: #333;
+  color: #555;
   padding: 4px 8px;
   border: 1px solid #484848;
   font-size: 1em;
@@ -167,7 +167,7 @@ select {
 }
 button {
   background: #1b4e78;
-  color: #333;
+  color: #555;
   padding: 8px 32px;
   border: 1px solid #2e84cb;
   font-size: 1em;
@@ -181,12 +181,12 @@ button:focus {
   border-bottom: 1px solid #d9d9d9;
 }
 span.date {
-  color: #333;
+  color: #555;
   font-weight: 800;
 }
 span.time {
   font-size: 0.9em;
-  color: #333;
+  color: #555;
 }
 span.seconds {
   display: none;

static/css/default_light/problems.css

@@ -3,7 +3,13 @@
   display: grid;
   grid-template-columns: repeat(6, min-content);
   grid-gap: 4px 16px;
+  margin-top: 32px;
   margin-bottom: 32px;
+  background-color: #2979b8;
+  padding: 16px;
+  width: min-content;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
 #problems-list div,
 #acknowledged-list div {
@@ -29,7 +35,7 @@
 #areas {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 24px;
   margin-top: 16px;
 }
 #areas .area .section {

static/css/default_light/trigger_edit.css

@@ -37,7 +37,7 @@
   min-height: 8em;
 }
 .widgets .action #run-result.ok {
-  color: #333;
+  color: #555;
 }
 .widgets .action #run-result.error {
   color: #fb4934;

static/css/gruvbox/datapoints.css

@@ -3,6 +3,11 @@
   grid-template-columns: repeat(6, min-content);
   grid-gap: 8px 16px;
   margin-top: 16px;
+  background-color: #333;
+  padding: 16px;
+  width: min-content;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
 #datapoints .group {
   font-size: 1.1em;

static/css/gruvbox/default_light.css

@@ -1,3 +1,6 @@
+body {
+  background-color: #f8f8f8;
+}
 .widgets .action #run-result {
   background-color: #fff !important;
   border: 1px solid #ccc;
@@ -35,3 +38,9 @@ button:focus {
 #areas .area .section .name {
   font-weight: normal;
 }
+#datapoints,
+#problems-list,
+#acknowledged-list {
+  background-color: #fff !important;
+  border: 1px solid #ddd;
+}

static/css/gruvbox/gruvbox.css

@@ -0,0 +1,6 @@
+body {
+  background-image: url(/images/v0/gruvbox/background.svg);
+}
+#areas .area {
+  box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.5);
+}

static/css/gruvbox/main.css

@@ -72,7 +72,7 @@ html {
 #areas {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 24px;
   margin-top: 16px;
 }
 #areas .area {

static/css/gruvbox/problems.css

@@ -3,7 +3,13 @@
   display: grid;
   grid-template-columns: repeat(6, min-content);
   grid-gap: 4px 16px;
+  margin-top: 32px;
   margin-bottom: 32px;
+  background-color: #333;
+  padding: 16px;
+  width: min-content;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }
 #problems-list div,
 #acknowledged-list div {
@@ -29,7 +35,7 @@
 #areas {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 24px;
   margin-top: 16px;
 }
 #areas .area .section {

static/images/default_light/acknowledge-filled.svg

@@ -62,6 +62,6 @@
     <path
        d="m 98.424959,151.89488 c 0,-0.42719 -0.346361,-0.7697 -0.769692,-0.7697 h -2.432224 l 0.369452,-1.75874 c 0.0077,-0.0385 0.01149,-0.0809 0.01149,-0.1232 0,-0.15778 -0.06542,-0.30402 -0.169332,-0.40794 l -0.407941,-0.40408 -2.532284,2.53229 c -0.142399,0.1424 -0.227059,0.33482 -0.227059,0.54648 v 3.84845 a 0.76969147,0.76969147 0 0 0 0.769691,0.7697 h 3.463611 c 0.319422,0 0.592664,-0.19242 0.708117,-0.46951 l 1.162234,-2.71317 c 0.03463,-0.0884 0.05388,-0.18087 0.05388,-0.28093 v -0.7697 m -8.466606,4.23331 h 1.539382 v -4.61815 h -1.539382 z"
        id="path1"
-       style="stroke-width:0.384845;fill:#fb4934;fill-opacity:1" />
+       style="stroke-width:0.384845;fill:#1b4e78;fill-opacity:1" />
   </g>
 </svg>

static/images/default_light/acknowledge-outline.svg

@@ -64,6 +64,6 @@
     <path
        d="m 91.497681,151.50999 v 4.61815 h -1.539385 v -4.61815 h 1.539385 m 1.539383,4.61815 a 0.76969186,0.76969186 0 0 1 -0.769692,-0.76969 v -3.84846 c 0,-0.21166 0.08467,-0.40408 0.22706,-0.54263 l 2.532286,-2.53614 0.407936,0.40794 c 0.103912,0.10385 0.169333,0.24631 0.169333,0.40408 l -0.01149,0.1232 -0.365604,1.75875 h 2.428378 c 0.42718,0 0.769693,0.34636 0.769693,0.76969 v 0.76969 c 0,0.10008 -0.01924,0.19242 -0.05388,0.28095 l -1.162236,2.71316 c -0.115446,0.27709 -0.388694,0.46951 -0.708116,0.46951 h -3.463613 m 0,-0.7697 h 3.47516 l 1.142991,-2.69392 v -0.76969 h -3.382795 l 0.434876,-2.04738 -1.670232,1.67408 z"
        id="path1"
-       style="stroke-width:0.384845;fill:#fb4934;fill-opacity:1" />
+       style="stroke-width:0.384845;fill:#1b4e78;fill-opacity:1" />
   </g>
 </svg>

static/images/gruvbox/background.svg

@@ -0,0 +1,198 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="257"
+   height="256"
+   viewBox="0 0 67.997915 67.733336"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"
+   sodipodi:docname="background.svg"
+   inkscape:export-filename="gruvbox.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#282828"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="99.127532"
+     inkscape:cy="57.982756"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="2190"
+     inkscape:window-height="1404"
+     inkscape:window-x="1463"
+     inkscape:window-y="16"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="true"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d6d6d6"
+     showborder="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="color:#000000;overflow:visible;fill:#282828;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264584;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000"
+       id="rect40644"
+       width="67.733337"
+       height="67.73333"
+       x="0"
+       y="0" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667, 0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 17.065625,0.1322915 V 67.601042"
+       id="path37309" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667, 0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 8.5989583,0.1322915 V 67.601042"
+       id="path37610" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667, 0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 25.532292,0.1322915 V 67.601042"
+       id="path37612" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667, 0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 33.998959,0.1322915 V 67.601042"
+       id="path37616" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667, 0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 42.465625,0.1322915 V 67.601042"
+       id="path37618" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667, 0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 50.932292,0.1322915 V 67.601042"
+       id="path37620" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667, 0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 59.398959,0.1322915 V 67.601042"
+       id="path37622" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.26458334;stroke-linecap:round;stroke-dasharray:0.5291667, 0.5291667;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 67.865626,0.1322915 V 67.601042"
+       id="path37626" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,50.932293 H 67.601042"
+       id="path43996" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,59.39896 H 67.601042"
+       id="path43998" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,42.465626 H 67.601042"
+       id="path44000" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,33.998959 H 67.601042"
+       id="path44002" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,25.532293 H 67.601042"
+       id="path44004" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,17.065626 H 67.601042"
+       id="path44006" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,8.598959 H 67.601042"
+       id="path44008" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,0.132292 H 67.601042"
+       id="path44010" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,55.165625 H 67.601042"
+       id="path44772" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,63.632292 H 67.601042"
+       id="path44774" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,46.698958 H 67.601042"
+       id="path44776" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,38.232291 H 67.601042"
+       id="path44778" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,29.765625 H 67.601042"
+       id="path44780" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,21.298958 H 67.601042"
+       id="path44782" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,12.832291 H 67.601042"
+       id="path44784" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 0.1322915,4.365624 H 67.601042"
+       id="path44786" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 12.832292,0.1322915 V 67.601042"
+       id="path44813" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 4.3656249,0.1322915 V 67.601042"
+       id="path44815" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 21.298959,0.1322915 V 67.601042"
+       id="path44817" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 29.765626,0.1322915 V 67.601042"
+       id="path44819" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 38.232292,0.1322915 V 67.601042"
+       id="path44821" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 46.698959,0.1322915 V 67.601042"
+       id="path44823" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 55.165626,0.1322915 V 67.601042"
+       id="path44825" />
+    <path
+       style="color:#000000;overflow:visible;fill:#d9664d;fill-opacity:0.97101426;fill-rule:evenodd;stroke:#363231;stroke-width:0.264583;stroke-linecap:round;stroke-dasharray:0.52916598, 0.52916598;stroke-opacity:1;paint-order:markers stroke fill;stop-color:#000000;stroke-dashoffset:0"
+       d="M 63.632293,0.1322915 V 67.601042"
+       id="path44827" />
+  </g>
+</svg>

static/js/trigger_edit.mjs

@@ -1,5 +1,5 @@
 export class UI {
-	constructor(version) {//{{{
+	constructor(version, theme) {//{{{
 		document.getElementById('button-run').
 			addEventListener('click', evt => evt.preventDefault())
 
@@ -8,6 +8,7 @@ export class UI {
 		document.querySelector('input[name="name"]').focus()
 
 		this.version = version
+		this.theme = theme
 		this.datapoints = []
 	}//}}}
 	render() {//{{{
@@ -18,7 +19,7 @@ export class UI {
 		let html = Object.keys(this.trigger.datapoints).sort().map(dpName => {
 			const dp = this.trigger.datapoints[dpName]
 			return `
-				<div class="datapoint delete"><a href="#" onclick="_ui.deleteDatapoint('${dp.Name}')"><img src="/images/${this.version}/delete.svg"></a></div>
+				<div class="datapoint delete"><a href="#" onclick="_ui.deleteDatapoint('${dp.Name}')"><img src="/images/${this.version}/${this.theme}/delete.svg"></a></div>
 				<div class="datapoint name ${dp.Found ? 'valid' : 'invalid'}"><b>${dp.Name}</b></div>
 				<div class="datapoint value">${dp.Found ? dp.LastDatapointValue.TemplateValue : ''}</div>
 			`

static/less/datapoints.less

@@ -5,6 +5,11 @@
 	grid-template-columns: repeat(6, min-content);
 	grid-gap: 8px 16px;
 	margin-top: 16px;
+	background-color: @bg3;
+	padding: 16px;
+	width: min-content;
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
 
 	.group {
 		font-size: 1.10em;

static/less/default_light.less

@@ -1,5 +1,9 @@
 @import "theme-@{THEME}.less";
 
+body {
+	background-color: #f8f8f8;
+}
+
 .widgets {
 	.action {
 		#run-result {
@@ -51,3 +55,8 @@ button {
 		}
 	}
 }
+
+#datapoints, #problems-list, #acknowledged-list {
+	background-color: #fff !important;
+	border: 1px solid #ddd;
+}

static/less/gruvbox.less

@@ -1 +1,11 @@
 @import "theme-@{THEME}.less";
+
+body {
+	background-image: url(/images/v0/gruvbox/background.svg);
+}
+
+#areas {
+	.area {
+		box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.5);
+	}
+}

static/less/main.less

@@ -91,7 +91,7 @@ html {
 #areas {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 12px;
+	gap: 24px;
 	margin-top: 16px;
 
 	.area {

static/less/problems.less

@@ -4,7 +4,13 @@
 	display: grid;
 	grid-template-columns: repeat(6, min-content);
 	grid-gap: 4px 16px;
+	margin-top: 32px;
 	margin-bottom: 32px;
+	background-color: @bg3;
+	padding: 16px;
+	width: min-content;
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
 
 	div {
 		white-space: nowrap;
@@ -34,7 +40,7 @@
 #areas {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 12px;
+	gap: 24px;
 	margin-top: 16px;
 
 	.area {

static/less/theme-default_light.less

@@ -2,7 +2,7 @@
 @bg2: #1b4e78;
 @bg3: #2979b8;
 
-@text1: #333;
+@text1: #555;
 @text2: #000;
 @text3: #7bb8eb;
 

views/pages/datapoints.gotmpl

@@ -8,7 +8,7 @@
 	<a href="/datapoint/edit/0">Create</a>
 
 	<div id="datapoints">
-		{{ $prevGroup := "kalle" }}
+		{{ $prevGroup := "15ecfcc0-b1aa-45cd-af9c-74146a7e7f56-not-very-likely" }}
 		{{ range .Data.Datapoints }}
 			{{ if ne $prevGroup .Group }}
 			<h2 class="line">{{ .Group }}</h2>

views/pages/problems.gotmpl

@@ -1,5 +1,6 @@
 {{ define "page" }}
 	{{ $version := .VERSION }}
+	{{ $theme := .CONFIG.THEME }}
 	<script type="module" defer>
 		import {UI} from "/js/{{ .VERSION }}/problems.mjs"
 
@@ -16,7 +17,7 @@
 
 	<div class="display-list hidden">
 		<div id="problems-list">
-			<div style="grid-column: 1/-1; margin-top: 32px;"><h2>Current</h2></div>
+			<div style="grid-column: 1/-1;"><h2>Current</h2></div>
 			
 			<div class="header">Trigger</div>
 			<div class="header">Area</div>
@@ -33,13 +34,13 @@
 					<div class="area">{{ .AreaName }}</div>
 					<div class="section">{{ .SectionName }}</div>
 					<div class="start"></div>
-					<div class="acknowledge"><img src="/images/{{ $version }}/acknowledge.svg"></div>
+					<div class="acknowledge"><img src="/images/{{ $version }}/{{ $theme }}/acknowledge.svg"></div>
 				{{ else }}
 					<div class="trigger"><a href="/trigger/edit/{{ .TriggerID }}">{{ .TriggerName }}</a></div>
 					<div class="area">{{ .AreaName }}</div>
 					<div class="section">{{ .SectionName }}</div>
 					<div class="start">{{ format_time .Start }}</div>
-					<div class="acknowledge"><a href="/problem/acknowledge/{{ .ID }}"><img src="/images/{{ $version }}/acknowledge-filled.svg"></a></div>
+					<div class="acknowledge"><a href="/problem/acknowledge/{{ .ID }}"><img src="/images/{{ $version }}/{{ $theme }}/acknowledge-filled.svg"></a></div>
 				{{ end }}
 			{{ end }}
 		</div>
@@ -47,7 +48,7 @@
 		<input type="checkbox" id="show-acked" onclick="_ui.toggleAcknowledged(event)"> <label for="show-acked">Show acknowledged</label>
 
 		<div id="acknowledged-list" class="hidden">
-			<div style="grid-column: 1/-1; margin-top: 32px;"><h2>Acknowledged</h2></div>
+			<div style="grid-column: 1/-1;"><h2>Acknowledged</h2></div>
 			<div class="header">Trigger</div>
 			<div class="header">Area</div>
 			<div class="header">Section</div>
@@ -62,7 +63,7 @@
 				<div class="area">{{ .AreaName }}</div>
 				<div class="section">{{ .SectionName }}</div>
 				<div class="start">{{ format_time .Start }}</div>
-				<div class="acknowledge"><a href="/problem/unacknowledge/{{ .ID }}"><img src="/images/{{ $version }}/acknowledge-outline.svg"></a></div>
+				<div class="acknowledge"><a href="/problem/unacknowledge/{{ .ID }}"><img src="/images/{{ $version }}/{{ $theme }}/acknowledge-outline.svg"></a></div>
 			{{ end }}
 		</div>
 	</div>

views/pages/trigger_edit.gotmpl

@@ -2,7 +2,7 @@
 	<script type="module" defer>
 		import {UI, Trigger} from "/js/{{ .VERSION }}/trigger_edit.mjs"
 
-		window._ui = new UI({{ .VERSION }})
+		window._ui = new UI({{ .VERSION }}, {{ .CONFIG.THEME }})
 		let trigger = new Trigger(
 			{{ .Data.Trigger.ID }},
 			'{{ .Data.Trigger.Name }}',