CSS Color Palette

# Changes

* Centralized CSS color definitions to top of css file in var()'s to make an easily adjusted palette.
* Moved table css out of individual files and into global css.

Author: Volte6

_datafiles/html/public/online.html

@@ -1,34 +1,14 @@
 {{template "header" .}}
 
 <style>
-    .online td {
-        font-size: 1.5em;
-    }
-    table.online  {
-        width: 100%;
-    }
-    table.online th {
-        background-color:#ccc;
-        color:#000;
-    }
-    table.online tr {
-        border-bottom: 1px solid #ddd;
-        background-color: #ffffff;
-    }
-    table.online tr:nth-child(even) {
-        background-color: #D6EEEE;
-    }
-    table.online td {
-        font-family: monospace;
-        color:#000;
-    }
+
 </style>
 
     <div class="overlay">
         <h3>Users Online: </h3>
 
         {{if gt (len .OnlineUsers) 0 }}
-        <table class="online" border="1" cellspacing="0" cellpadding="3">
+        <table>
             <tr>
                 <th>#</th>
                 <th>Character</th>

_datafiles/html/public/viewconfig.html

@@ -1,34 +1,9 @@
 {{template "header" .}}
 
-<style>
-    .config td {
-        font-size: 1.5em;
-    }
-    table.config  {
-        width: 100%;
-    }
-    table.config th {
-        background-color:#ccc;
-        color:#000;
-    }
-    table.config tr {
-        border-bottom: 1px solid #ddd;
-        background-color: #ffffff;
-    }
-    table.config tr:nth-child(even) {
-        background-color: #D6EEEE;
-    }
-    table.config td {
-        font-family: monospace;
-        color:#000;
-    }
-
-</style>
-
     <div class="overlay">
         <h3>Server Config: </h3>
 
-        <table class="config" border="1" cellspacing="0" cellpadding="3">
+        <table>
             <tr>
                 <th>Name</th>
                 <th>Value</th>

_datafiles/html/static/public/css/gomud.css

@@ -1,8 +1,25 @@
+:root {
+  --header-background: #495659;
+  --nav-background: #6c7682;
+  --footer-background: #495659;
+  --button-background: #6c7682;;
+  --button-background-hover: #80a5a9;
+  --button-shadow: #80a5a9;
+  --text-primary-color: #c9e2db;
+  --text-secondary-color: #6c869f;
+  /* Table Specific Colors */
+  --table-border-color: #000;
+  --table-header-color: var(--header-background);
+  --table-text-color: #000;
+  --table-cell-color: #c9e2db;
+  --table-cell-alt-color: #80a5a9;
+}
+
 body {
   margin: 0;
   padding: 0;
   background: url('/static/public/images/gomud_bg.webp') center center / cover no-repeat fixed;
-  color: #c9e2db;
+  color: var(--text-primary-color);
   font-family: 'Press Start 2P', monospace;
   display: flex;
   flex-direction: column;
@@ -15,7 +32,7 @@ a {
 }
 
 header {
-  background-color: #495659;
+  background-color: var(--header-background);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -25,21 +42,21 @@ header {
 .gomud-btn {
   font-size: 1.5rem;
   padding: 6px 10px;
-  color: #c9e2db;
-  background-color: #6c7682;
-  border: 2px solid #c9e2db;
+  color: var(--text-primary-color);
+  background-color: var(--button-background);
+  border: 2px solid var(--text-primary-color);
   text-transform: uppercase;
   letter-spacing: 2px;
   transition: all 0.2s ease; 
 }
 
 .gomud-btn:hover {
-  box-shadow: 6px 6px 0px 0px #80a5a9;
-  color: #80a5a9;
+  box-shadow: 6px 6px 0px 0px var(--button-shadow);
+  color: var(--button-background-hover);
 }
 
 nav {
-  background-color: #6c7682;
+  background-color: var(--nav-background);
   padding: 12px 0;
 }
 
@@ -54,16 +71,16 @@ nav {
 }
 
 .nav-container a {
-  color: #c9e2db;
+  color: var(--text-primary-color);
   text-decoration: none;
   padding: 8px 16px;
   border-radius: 4px;
   background-color: rgba(255, 255, 255, 0.1);
-  box-shadow: 2px 2px 0px 0px #80a5a9;
+  box-shadow: 2px 2px 0px 0px var(--button-shadow);
 }
 
 .nav-container a:hover {
-  color: #80a5a9;
+  color: var(--button-background-hover);
   background-color: rgba(255, 255, 255, 0.2);
 }
 
@@ -77,7 +94,7 @@ nav {
 .nav-toggle div {
   width: 30px;
   height: 4px;
-  background: #c9e2db;
+  background: var(--text-primary-color);
   margin: 5px;
 }
 
@@ -135,18 +152,40 @@ nav {
 }
 
 footer {
-  background-color: #495659;
+  background-color: var(--header-background);
   text-align: center;
-  color: #c9e2db;
+  color: var(--text-primary-color);
   padding: 16px 0;
   font-size: 0.875rem;
 }
 
 footer a {
-  color: #6c869f;
+  color: var(--text-secondary-color);
   text-decoration: none;
 }
 
 footer a:hover {
   text-decoration: underline;
 }
+
+
+table  {
+  width: 100%;
+  color:var(--table-text-color)
+}
+table th {
+  background-color:var(--header-background);
+  padding:1em;
+}
+table tr {
+  background-color: var(--table-cell-color);
+}
+table tr:nth-child(even) {
+  background-color: var(--table-cell-alt-color);
+}
+table td {
+  font-size: 1.5em;
+  padding:.1em;
+  font-family: monospace;
+  text-align:left;
+}