fix list color

src/components/PlayerList.vue

@@ -13,7 +13,7 @@
         :class="sortingData.argument == 'avg_distance' ? 'selected' : ''">average distance</span>
     </div>
     <VirtualList :list="playerList" :row-height="32" v-slot="slotProps">
-      <div :class="'playerRow ' + (slotProps.data.id === $props.playerHighlighted ? 'selected' : '')" v-on:click="$emit('highlightPlayer', slotProps.data.id)">
+      <div :class="'playerRow ' + (slotProps.data.id === $props.playerHighlighted ? 'selected ' : '') + ((slotProps.index + 1)%2 ? 'odd ':'uneven ')" v-on:click="$emit('highlightPlayer', slotProps.data.id)">
         <div><span>{{ slotProps.index+1 }}</span></div>
         <div><span>{{ slotProps.data.value.username }}</span></div>
         <div><span>{{ slotProps.data.value.kills }}</span></div>
@@ -179,11 +179,11 @@ export default defineComponent({
   height: 2em;
 }
 
-.playerRow:nth-child(2n+1) {
+.playerRow.odd {
   background: var(--accent);
 }
 
-.playerRow:nth-child(2n) {
+.playerRow.uneven {
   background: var(--bg-color);
 }
 

src/views/ServerView.vue

@@ -5,7 +5,7 @@
 
   <VirtualList :list="serverList" :row-height="100" v-slot="slotProps">
     <div
-      :class="'serverRow ' + (!nsServersByName[slotProps.data.name] ? 'offline ' : ' ') + (!nsServersByName[slotProps.data.name]?.playerCount ? 'inactive' : '')">
+      :class="'serverRow ' + (!nsServersByName[slotProps.data.name] ? 'offline ' : '') + (!nsServersByName[slotProps.data.name]?.playerCount ? 'inactive ' : '') + ((slotProps.index + 1)%2 ? 'odd ':'uneven ')">
       <div><span>{{ slotProps.index + 1 }}</span></div>
       <div><span>{{ slotProps.data.name }}</span></div>
       <div><span>{{ slotProps.data._value.kills }}</span></div>
@@ -92,11 +92,11 @@ export default defineComponent({
   height: 100px;
 }
 
-.serverRow:nth-child(2n+1) {
+.serverRow.odd {
   background: var(--accent);
 }
 
-.serverRow:nth-child(2n) {
+.serverRow.uneven {
   background: var(--bg-color);
 }