frontend overhaul, minor backend bugfixes

frontend/vju_display/src/assets/main.css

@@ -1,7 +1,47 @@
-@import './base.css';
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+:root {
+  --color-text: #000;
+  --color-background: #EEE;
+
+  --color-brand-ul-red: #e03127;
+  --color-brand-ul-light-grey: #E6E7E8;
+  --color-brand-ul-medium-grey: #A7A8AA;
+  --color-brand-ul-dark-grey: #58595b;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+          color 0.5s,
+          background-color 0.5s;
+  line-height: 1.6;
+  font-family: "Noto Sans", sans-serif;
+  font-size: 17px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+* {
+  user-select: none;
+}
+html, body {
+  touch-action: manipulation;
+}
 
 #app {
   max-width: 1280px;
+  height: 100vh;
   margin: 0 auto;
 }
 
@@ -26,12 +66,46 @@ a,
   }
 }
 
-button {
-  border: none;
-  background-color: #aaa;
-  cursor: pointer;
+
+.mstatus {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-button:hover, button:focus, button:active {
-  background-color: #ccc;
+button {
+  background: lightgray;
+  font-size: 1.3em;
+  font-weight: bold;
 }
+
+button:focus:not(:active) {
+  background: lightgray;
+}
+
+button:focus-visible(:active) {
+  background: gray;
+}
+
+
+
+button {
+  border: none;
+  background-color: lightgray;
+}
+
+button:active {
+  background: gray;
+}
+
+
+h1 {
+  text-align: center;
+}
+h3 {
+  font-weight: bold;
+}
+
+.currentlyActive {
+  background-color: orange !important
+}