Added dropdown for choosing theme. Did some refactoring and bug fixing.

common/main.css

@@ -2,17 +2,14 @@
   --accent-color-dark: #045d56;
   --button-color-dark: #045d56;
   --text-accent-color-dark: #1eb980;
-  --table-border-dark: #00000000;
+  --table-border-dark: #1b1b1b;
   --tr-color-dark: #1b1b1b;
   --tr-nth-color-dark: #121212;
   --table-highlight-dark: #616161;
   --dark-background-color: #121212;
   --dark-text-color: #eeeeee;
 }
-body.theme-dark {
+
-  --background-color: var(--dark-background-color);
-  --text-color: var(dark-text-color);
-}
 
 body{
   --accent-color:#303f9f;
@@ -29,9 +26,18 @@ body{
   background-color: var(--background-color);
   color: var(--text-color);
   font-size: 1.1rem;
-  min-height: 100vw;
 }
-
+body.theme-dark {
+  --background-color: var(--dark-background-color);
+  --text-color: var(--dark-text-color);
+  --tr-nth-color: var(--tr-nth-color-dark);
+  --table-border: var(--table-border-dark);
+  --table-highlight: var(--table-highlight-dark);
+  --accent-color: var(--accent-color-dark);
+  --text-accent-color: var(--text-accent-color-dark);
+  --tr-color: var(--tr-color-dark);
+  --button-color: var(--button-color-dark);
+}
 header {
   display: flex;
   justify-content: space-between;
@@ -64,6 +70,9 @@ table {
   font-weight: 410;
   margin: 0.8rem;
   border-radius: 0.4rem;
+  outline-style: solid;
+  outline-width: thin;
+  outline-color: var(--table-border);
 }
 
 td, th {
@@ -78,7 +87,7 @@ tr {
 tr:nth-child(even){background-color: var(--tr-nth-color);}
 
 tr:hover {
-  background-color: var(--table-highlight);
+  background-color: var(--table-highlight) !important;
 }
 tr:visited {
   background-color:var(--table-highlight);    
@@ -96,6 +105,7 @@ th {
   background-color: #4CAF50;
   color: white;
 }
+
 h4 {
   font-size: 20px;
   margin-bottom: auto;
@@ -116,12 +126,15 @@ h4 {
 
 
 .all-result{
+  margin-left: auto;
+  margin-right: auto;
   display: flex;
   flex-flow: column wrap;
-  align-content: space-between;
+  align-content: center;
+  gap: 1rem;
   /* Your container needs a fixed height, and it 
    * needs to be taller than your tallest column. */
-  height: 700rem; 
+  height: 400rem; 
 }
 .all-result::before,
 .all-result::after {
@@ -131,7 +144,6 @@ h4 {
   order: 2;
 }
 .all-result-div{
-  width: 32%;
   margin-bottom: 2%; /* Optional */
 }
 .all-result-div:nth-child(3n+1) { order: 1; }
@@ -162,10 +174,48 @@ h4 {
   body{
     font-size: 1rem;
   }
+}
+@media only screen and (max-width:1920px){
+  .all-result{
+    display: flex;
+    flex-flow: column wrap;
+    /* Your container needs a fixed height, and it 
+    * needs to be taller than your tallest column. */
+    height: 700rem; 
+  }
+  .all-result::before,
+  .all-result::after {
+    content: "";
+    flex-basis: 100%;
+    width: 0;
+    order: 2;
+  }
+  .all-result-div{
+    margin-bottom: 2%; /* Optional */
+  }
   .all-result-div:nth-child(2n+1) { order: 1; }
   .all-result-div:nth-child(2n) { order: 2; }
 }
-.hiddendiv {
+.theme-select {
+  margin-left: 2rem;
+}
+@media only screen and (max-width:1200px){
+  .all-result{
+    flex-direction: column;
+    width: fit-content;
+    align-content: unset;
+    height: max-content;
+    margin: auto;
+  }
+  .all-result-div{
+    max-width: 100%;
+  }
+  .all-result-div:nth-child(n) { order: 1; }
+  .theme-select {
+    margin-left: unset;
+  }
+}
+  .hiddendiv {
   display:none;
 }
 .nav-link {
@@ -191,6 +241,11 @@ h4 {
   color: #fff;
   background-color: var(--button-color);
 }
+.nav-link:focus{
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  outline: none;
+  box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important; 
+}
 .result-div{
   width: max-content;
   margin: auto;
@@ -231,7 +286,7 @@ h4 {
   border: thin solid #3c4043;
   font-weight: 700;
   border-radius: 0.25rem;
-  transition: all 0.2s ease 0s;;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   margin: 0.4rem;
   padding-top: 0.2rem;
   padding-bottom: 0.2rem;
@@ -245,19 +300,21 @@ h4 {
   background-color: var(--button-color);
   border: thin solid var(--button-color);
   font-weight: 700;
-  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
+  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
   transition: all 0.4s ease 0s;
 }
 }
 
 .fancy-button:active{
    background-color: var(--accent-color);
-   box-shadow:0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 20px 31px 3px rgba(0, 0, 0, 0.14),0px 8px 38px 7px rgba(0,0,0,.12);
-   transform: translateY(3px);
    color: var(--dark-text-color);
+   transition: 0.1s ease-out;
+
 }
 .fancy-button:focus{
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   outline: none;
+  box-shadow: 0 0 2px 2px var(--button-color), 0 .5rem 1rem rgba(0,0,0,.15);
 }
 
 
@@ -267,7 +324,10 @@ h4 {
     flex-wrap: wrap;
     padding-left: 0.2rem;
     padding-right: 0.2rem;
-    max-height: 5rem;
+    max-height: 7rem;
+  }
+  header select{
+    margin-left: auto;
   }
   .header-column{
     display: flex;
@@ -287,6 +347,8 @@ h4 {
   .ResultTable{
     width: 100%;
     margin: 0px;
+    margin-bottom: 0.1rem;
+    margin-top: 0.1rem;
     border-radius: .4rem;
   }
   .result-div{
@@ -298,18 +360,6 @@ h4 {
     margin: 0px;
     width: 100%;
   }
-  .all-result{
-    flex-direction: column;
-    width: 100vw;
-    align-content: unset;
-  }
-  .all-result-div{
-    width: 100vh;
-    max-width: 100%;
-    padding: 0px;
-    margin-left: 0;
-    margin-right: 0;
-  }
   .club-collum{
     display: none;
   }
@@ -323,6 +373,12 @@ h4 {
     width: 100%;
     min-width: 0;
   }
+  .all-result{
+    width: 100%;
+  }
+  .all-result-div {
+    width: 100%;
+  }
 }
 @media (prefers-color-scheme: dark) {
     body.theme-auto {

index.php

@@ -23,6 +23,14 @@
   <div class='header-column'>
       <div class="status-div" id="lastUpdate">status</div>
       <div class="status-div" id="lastMessage">status</div>
+      <div class="theme-select">
+      Farger:
+        <select id="theme">
+          <option value="auto">Automatisk</option>
+          <option value="light">Lyst</option>
+          <option value="dark">Mørkt</option>
+        </select>
+      </div>
   </div>
 </header>
 

liveresults.js

@@ -24,7 +24,6 @@ function TimeFormater(stamp) {
   else{
     hourString = '';
   }
-  
   return hourString +("0" + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2);
 }
 
@@ -89,7 +88,7 @@ function loadresults() {
       //create tables
       for (let i = 0; i < xmlObj.ClassResult.length; i++) {
         let resultTable = "";
-        let splitTimes = '<table class="ResultTable splits-table shadow-2" id="'+classesArray[i]+'-splits">' + '<tr class="splits-labels">';
+        let splitTimes = `<table class="ResultTable splits-table" id="${classesArray[i]}-splits"><tr class="splits-labels">`;
         let winnerTime;
         let controlArray = [];
 
@@ -97,7 +96,7 @@ function loadresults() {
           splitTimes += '<td></td>'
           controlArray = Array.from(xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime);
           for (let s = 0; s < xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime.length; s++){
-            splitTimes += '<td ctrlcode="'+xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode+'">' + (s+1) + '-' + xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode +'</td>';
+            splitTimes += `<td ctrlcode="${xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode}">${(s+1)}-${xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode}</td>`;
           }
         }
         
@@ -167,7 +166,7 @@ function loadresults() {
             let controlTimeDelta = 0;
 
             for (let t = 0; t < controlArray.length; t++) {
-              if (typeof(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)!=='undefined'){
+              if (typeof(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime && typeof(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)!=='undefined')!== 'undefined'){
                 controlTime = parseInt(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time, 10)-controlTimeDelta
                 controlTimeDelta += controlTime;
                 splitTimes +=  '<td>'+ TimeFormater(controlTime) +'<br>'+ TimeFormater(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)+'</td>'
@@ -184,9 +183,15 @@ function loadresults() {
         splitTimes += "</table></div>"
 
         let pClassName = classesArray[i].replace(/ |\//g, "_");
-
+        let classTitle;
-        resultTableA = '<div class="result-div"><h4>'+xmlObj.ClassResult[i].Class.Name+'</h4><table class="ResultTable shadow-2" id="'+classesArray[i]+'-table">'+'<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>'+resultTable;
+        if(typeof(xmlObj.ClassResult[i].Course)!=="undefined"){
-        let resultTableB = '<div class="result-header"><h4>'+xmlObj.ClassResult[i].Class.Name+'</h4><button class="fancy-button" onclick="showHideSplits(\''+pClassName+'\')">Vis/skjul Strekktider</button></div><div class="result-div"><table class="ResultTable shadow-2" id="'+classesArray[i]+'-table">'+'<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>'+resultTable;
+          classTitle = '<h4>'+xmlObj.ClassResult[i].Class.Name+' ('+xmlObj.ClassResult[i].Course.Length+'m)</h4>'
+        }
+        else{
+          classTitle = '<h4>'+xmlObj.ClassResult[i].Class.Name+'</h4>'
+        }
+        resultTableA = '<div class="result-div">'+'<h4>'+xmlObj.ClassResult[i].Class.Name+'</h4>'+'<table class="ResultTable" id="'+classesArray[i]+'-table">'+'<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>'+resultTable;
+        let resultTableB = '<div class="result-header">'+classTitle+'<button class="fancy-button" onclick="showHideSplits(\''+pClassName+'\')">Vis/skjul Strekktider</button></div><div class="result-div"><table class="ResultTable" id="'+classesArray[i]+'-table">'+'<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>'+resultTable;
         splitTimes = '<div class="result-div">'+splitTimes;
 
         document.getElementById(pClassName).innerHTML = resultTableB+splitTimes;
@@ -273,12 +278,39 @@ function showHideSplits(className) {
   let x = document.getElementById(className+'-table');
   let y = document.getElementById(className+'-splits');
   if (x.style.display === "none") {
-    x.style.display = "block";
+    x.style.display = "table";
     y.style.display = "none";
   } else {
     x.style.display = "none";
-    y.style.display = "block";
+    y.style.display = "table";
   }
 } 
 
 var interval = setInterval(checkConnection, 10000);
+
+//theme
+function applyTheme(theme) {
+    document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
+    document.body.classList.add(`theme-${theme}`);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+   document.querySelector("#theme").addEventListener("change", function() {
+        applyTheme(this.value);
+   });
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+  const savedTheme = localStorage.getItem("theme") || "auto";
+
+  applyTheme(savedTheme);
+
+  for (const optionElement of document.querySelectorAll("#theme option")) {
+      optionElement.selected = savedTheme === optionElement.value;
+  }
+
+  document.querySelector("#theme").addEventListener("change", function () {
+      localStorage.setItem("theme", this.value);
+      applyTheme(this.value);
+  });
+});