Initial move from angular shell to vue

dashboard/src/style.css

@@ -1,9 +1,26 @@
+:root {
+  --pankow-color-primary: #0073cf;
+  --font-family: "Noto Sans",Helvetica,Arial,sans-serif;
+  --font-family--header: "Noto Sans Light",Helvetica,Arial,sans-serif;
+  --card-background: #f7f7f8;
+  --navbar-background: #f3f4f6;
+/*  --pankow-body-background-color: var(--body-background);*/
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --card-background: #15181f;
+    --navbar-background: #11161f;
+/*    --pankow-body-background-color: var(--body-background);*/
+    --pankow-dialog-background-color: var(--navbar-background);
+    --pankow-color-background: var(--navbar-background);
+    --pankow-text-color: white;
+  }
+}
 
 html, body {
-  --pankow-color-primary: #0073cf;
-
   font-size: 14px; /* this also defines the overall widget size as all sizes are in rem */
-  font-family: "Noto Sans";
+  font-family: var(--font-family);
   font-weight: 300;
   height: 100%;
   width: 100%;
@@ -19,12 +36,6 @@ html, body {
   }
 }
 
-@media (max-width: 576px) {
-  .hide-mobile {
-    display: none;
-  }
-}
-
 .shadow {
   box-shadow: 0 2px 5px rgba(0,0,0,.1);
 }
@@ -33,8 +44,12 @@ html, body {
   height: 100%;
 }
 
-h2 {
+h1, h2, h3, h4, h5 {
+  font-family: var(--font-family--header);
   font-weight: 400;
+}
+
+h2 {
   font-size: 24px;
 }
 
@@ -43,6 +58,17 @@ a {
   color: var(--pankow-color-primary);
 }
 
+fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid rgb(238.425,238.425,238.425);
+}
+
 footer {
   display: block;
   width: 100%;