From 5ff6bc595c95a53e08b8d5bacbb771dbbb9c3f37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 25 Jun 2024 11:12:40 +0200
Subject: [PATCH] Background image in default_light theme

---
 static/css/default_light/default_light.css |   3 +
 static/css/gruvbox/default_light.css       |   3 +
 static/images/default_light/background.svg | 198 +++++++++++++++++++++
 static/less/default_light.less             |   3 +
 4 files changed, 207 insertions(+)
 create mode 100644 static/images/default_light/background.svg

diff --git a/static/css/default_light/default_light.css b/static/css/default_light/default_light.css
index 778c5cb..3f82b2b 100644
--- a/static/css/default_light/default_light.css
+++ b/static/css/default_light/default_light.css
@@ -1,5 +1,6 @@
 body {
   background-color: #f8f8f8;
+  background-image: url('/images/v0/default_light/background.svg');
 }
 .widgets .action #run-result {
   background-color: #fff !important;
@@ -30,6 +31,7 @@ button:focus {
 #areas .area {
   background: #fff !important;
   border: 1px solid #2979b8;
+  box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.25);
 }
 #areas .area .name {
   border-top-left-radius: unset;
@@ -43,4 +45,5 @@ button:focus {
 #acknowledged-list {
   background-color: #fff !important;
   border: 1px solid #ddd;
+  box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.25);
 }
diff --git a/static/css/gruvbox/default_light.css b/static/css/gruvbox/default_light.css
index c6c66ca..e568ca8 100644
--- a/static/css/gruvbox/default_light.css
+++ b/static/css/gruvbox/default_light.css
@@ -1,5 +1,6 @@
 body {
   background-color: #f8f8f8;
+  background-image: url('/images/v0/default_light/background.svg');
 }
 .widgets .action #run-result {
   background-color: #fff !important;
@@ -30,6 +31,7 @@ button:focus {
 #areas .area {
   background: #fff !important;
   border: 1px solid #333;
+  box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.25);
 }
 #areas .area .name {
   border-top-left-radius: unset;
@@ -43,4 +45,5 @@ button:focus {
 #acknowledged-list {
   background-color: #fff !important;
   border: 1px solid #ddd;
+  box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.25);
 }
diff --git a/static/images/default_light/background.svg b/static/images/default_light/background.svg
new file mode 100644
index 0000000..59e6fff
--- /dev/null
+++ b/static/images/default_light/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="1"
+     inkscape:cx="202.5"
+     inkscape:cy="194"
+     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:#f8f8f8;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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:#eaeaea;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>
diff --git a/static/less/default_light.less b/static/less/default_light.less
index cda1760..543778b 100644
--- a/static/less/default_light.less
+++ b/static/less/default_light.less
@@ -2,6 +2,7 @@
 
 body {
 	background-color: #f8f8f8;
+	background-image: url('/images/v0/default_light/background.svg');
 }
 
 .widgets {
@@ -44,6 +45,7 @@ button {
 	.area {
 		background: #fff !important;
 		border: 1px solid @bg3;
+		box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.25);
 
 		.name {
 			border-top-left-radius: unset;
@@ -59,4 +61,5 @@ button {
 #datapoints, #problems-list, #acknowledged-list {
 	background-color: #fff !important;
 	border: 1px solid #ddd;
+	box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.25);
 }