duplicate styling to css file, comment out in js

2025-03-24 14:29:51 +01:00
parent cd22739e4a
commit 729a471294
2 changed files with 182 additions and 37 deletions
--- a/ui-style.css
+++ b/ui-style.css
@@ -0,0 +1,128 @@
+:root {
+    --background: ivory;
+    --active: royalblue;
+    --nonactive: lightsteelblue;
+    --alert: red;
+    --textcolor: #737373;
+}
+
+html {
+    background-color: var(--background);
+}
+
+/*navigation*/
+#nav,
+#navPlayers {
+    z-index: 99;
+    display: flex !important;
+    flex-flow: row nowrap;
+    position: relative;
+}
+
+#navPlayers>button {
+    width: 24.9vw;
+    color: var(--nonactive);
+}
+
+#navPlayers>button:active {
+    color: var(--active);
+}
+
+.menu {
+    background-color: var(--background);
+    border: 1px solid + var(--active);
+    color: var(--active);
+    padding: 5px 5px;
+    text-align: left;
+    display: inline-block;
+    font-size: 12px;
+    margin: 4px 2px;
+}
+
+.but {
+    background-color: var(--background);
+    border: 1px solid + var(--active);
+    color: var(--active);
+    padding: 4px 0;
+    text-align: center;
+    display: inline-block;
+    font-size: 11px;
+    margin: 4px 0px;
+    width: 20vw;
+}
+
+.toggle {
+    background-color: var(--background);
+    border: 1px solid + var(--active);
+    color: var(--active);
+    padding: 4px 7.8px;
+    margin: 4px 0px;
+}
+
+.slider {
+    -webkit-appearance: none;
+    height: 6px;
+    border-radius: 6px;
+    background: #737373;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+
+    position: absolute;
+    left: 135px;
+    width: 170px;
+}
+
+.slider:hover {
+    opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: active;
+}
+
+label {
+    position: absolute;
+    font-family: Arial;
+    font-size: 10;
+    color: var(--textcolor);
+}
+
+input[type=text] {
+    position: absolute;
+    color: var(--textcolor);
+}
+
+input[type=checkbox] {
+    position: absolute;
+    border: none;
+    width: 20px;
+    height: 20px;
+}
+
+#updateheader,
+#shutdownheader {
+    left: 10px;
+    font-family: Arial;
+    margin-left: 10px;
+}
+
+#update,
+#shutdown {
+    left: 10px;
+    font-family: Arial;
+    font-size: 12;
+    margin-left: 10px;
+}
+
+iframe #manualdoc {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}