Color changes, fix login password box

- type=password was on the wrong element
- New color assignments for tables
- Only uses one palette for now
- Changed input bg to highlight color
- Forced dark mode on sidebar
- Moved some table coloring to components.css
- Fixed some comments being out-of-line

client/src/App.vue

@@ -97,14 +97,14 @@ onMounted(async() => {
     'nav-state-collapsed': navState === NavState.Collapsed,
     'nav-state-reduced': navState === NavState.Reduced,
   }">
-    <button class="nav-head cl-secondary" @click="toggleNavState">
+    <button class="nav-head cl-secondary cl-force-dark" @click="toggleNavState">
       <i-mdi-hamburger-menu/>
       <h1>nfSense</h1>
     </button>
 
     <Portal from="page-header" class="page-header pad gap"/>
 
-    <div class="nav-body cl-secondary">
+    <div class="nav-body cl-secondary cl-force-dark">
       <template v-for="(options, route) in navRoutes" :key="route">
         <router-link :to="route" class="button" @click="collapseNavIfMobile">
           <component :is="options.icon"/>
@@ -134,8 +134,8 @@ onMounted(async() => {
           <h2 :hidden="!loginDisabled">Logging in...</h2>
           <label for="username" v-text="'Username'" :hidden="loginDisabled" />
           <input name="username" v-model="username" :hidden="loginDisabled" :disabled="loginDisabled"/>
-          <label for="password" v-text="'Password'" type="password" :hidden="loginDisabled"/>
-          <input name="password" v-model="password" :hidden="loginDisabled" :disabled="loginDisabled"/>
+          <label for="password" v-text="'Password'" :hidden="loginDisabled"/>
+          <input name="password" type="password" v-model="password" :hidden="loginDisabled" :disabled="loginDisabled"/>
           <button @click="tryLogin">Login</button>
         </form>
       </FocusTrap>

client/src/components/NiceTable.vue

@@ -144,10 +144,6 @@ function dragDropRow() {
 </template>
 
 <style scoped>
-.selected {
-  background-color: red;
-}
-
 .dragged-over-before {
   border-top: 0.25rem solid var(--cl-fg);
 }

client/src/global-styles/colors.css

@@ -1,22 +1,16 @@
 /* --- YACS --- */
 :root {
   /* Light/Dark-Agnostic Base Tints, defined as HSL */
-  --cl-base-0-h: 260;
-  /* Color 0 Base Hue */
-  --cl-base-0-s: 20%;
-  /* Color 0 Base Saturation */
-  --cl-base-0-l: 100%;
-  /* Color 0 Base Lightness (Only usefull for darkening really) */
-  --cl-base-1-h: 260;
-  /* Same definitions for another tint */
+  --cl-base-0-h: 260; /* Color 0 Base Hue */
+  --cl-base-0-s: 20%; /* Color 0 Base Saturation */
+  --cl-base-0-l: 100%; /* Color 0 Base Lightness (Only usefull for darkening really) */
+  --cl-base-1-h: 260; /* Same definitions for another tint */
   --cl-base-1-s: 50%;
   --cl-base-1-l: 100%;
 
   /* --- Linear Scaling with buffer --- */
-  --lin-0-buf: 5%;
-  /* Edge-Buffer for lightness spectrum, reduces contrast */
-  --lin-0-flux: calc(var(--cl-base-0-l) - var(--lin-0-buf) * 2);
-  /* Variable Lightness Space */
+  --lin-0-buf: 5%; /* Edge-Buffer for lightness spectrum, reduces contrast */
+  --lin-0-flux: calc(var(--cl-base-0-l) - var(--lin-0-buf) * 2); /* Variable Lightness Space */
   --lin-0-step: calc(var(--lin-0-flux) / 7);
   /* Increment per Step, 8 steps - 1 = 7 increments */
   /* Actual color steps */
@@ -86,20 +80,62 @@
   }
 }
 
+.cl-force-dark {
+  --cl-0-1: var(--cl-base-0-1);
+  --cl-0-2: var(--cl-base-0-2);
+  --cl-0-3: var(--cl-base-0-3);
+  --cl-0-4: var(--cl-base-0-4);
+  --cl-0-5: var(--cl-base-0-5);
+  --cl-0-6: var(--cl-base-0-6);
+  --cl-0-7: var(--cl-base-0-7);
+  --cl-0-8: var(--cl-base-0-8);
+
+  --cl-1-1: var(--cl-base-1-1);
+  --cl-1-2: var(--cl-base-1-2);
+  --cl-1-3: var(--cl-base-1-3);
+  --cl-1-4: var(--cl-base-1-4);
+  --cl-1-5: var(--cl-base-1-5);
+  --cl-1-6: var(--cl-base-1-6);
+  --cl-1-7: var(--cl-base-1-7);
+  --cl-1-8: var(--cl-base-1-8);
+}
+
+.cl-force-light {
+  --cl-0-1: var(--cl-base-0-8);
+  --cl-0-2: var(--cl-base-0-7);
+  --cl-0-3: var(--cl-base-0-6);
+  --cl-0-4: var(--cl-base-0-5);
+  --cl-0-5: var(--cl-base-0-4);
+  --cl-0-6: var(--cl-base-0-3);
+  --cl-0-7: var(--cl-base-0-2);
+  --cl-0-8: var(--cl-base-0-1);
+
+  --cl-1-1: var(--cl-base-1-8);
+  --cl-1-2: var(--cl-base-1-7);
+  --cl-1-3: var(--cl-base-1-6);
+  --cl-1-4: var(--cl-base-1-5);
+  --cl-1-5: var(--cl-base-1-4);
+  --cl-1-6: var(--cl-base-1-3);
+  --cl-1-7: var(--cl-base-1-2);
+  --cl-1-8: var(--cl-base-1-1);
+}
+
 /* --- Color Contexts --- */
 /* These Contexts are meant to make it easy to shift all color assignments for differentiated areas, like navigation bars or context menus */
 /* Primary Color Context */
 :root, .cl-primary {
   /* Color assignments, these finally have semantic value and will be used to style components. */
   /* More can be added as needed. */
-  --cl-fg: var(--cl-0-8);
-  /* Foreground (Text, outlines) */
-  --cl-bg: var(--cl-0-1);
-  /* Background */
-  --cl-bg-hl: var(--cl-1-2);
-  /* Highlight Background (Component on Hover, select, ...) */
-  --cl-bg-el: var(--cl-1-3);
-  /* Element Background (Component) */
+  --cl-fg: var(--cl-1-8); /* Foreground (Text, outlines) */
+  --cl-bg: var(--cl-1-1); /* Background */
+  --cl-bg-hl: var(--cl-1-2); /* Highlight Background (Component on Hover, select, ...) */
+  --cl-bg-el: var(--cl-1-3); /* Element Background (Component) */
+
+  /* Table Color Assignments */
+  --cl-table-body: var(--cl-1-1);
+  --cl-table-head: var(--cl-1-2);
+  --cl-table-hl: var(--cl-1-3);
+  --cl-table-sl: var(--cl-1-4);
 
   /* Set Default Colors */
   background-color: var(--cl-bg);
@@ -109,16 +145,18 @@
 /* Secondary Color Context, in this case for the sidebar */
 .cl-secondary {
   /* You can replace the base-tint on a per-assignment basis, though one tint per context is usual */
+  /* Just shift up all non-fg colors to create a lower-contrast/importance context */
   --cl-fg: var(--cl-1-8);
   --cl-bg: var(--cl-1-2);
-  /* Just shift up all non-fg colors to create a lower-contrast/importance context */
   --cl-bg-hl: var(--cl-1-3);
   --cl-bg-el: var(--cl-1-4);
 
+  --cl-table-body: var(--cl-1-2);
+  --cl-table-head: var(--cl-1-3);
+  --cl-table-hl: var(--cl-1-4);
+  --cl-table-sl: var(--cl-1-5);
+  
   /* Set Default Colors */
   background-color: var(--cl-bg);
   color: var(--cl-fg);
 }
-
-.cl-p-3 { background-color: var(--cl-0-1); }
-.cl-s-3 { background-color: var(--cl-1-1);}

client/src/global-styles/components.css

@@ -25,7 +25,6 @@ form {
   grid-template-columns: auto 1fr;
   padding: 0.5rem;
   gap: 0.5rem;
-
 }
 form > :is(button, .button, h1) {
   grid-column: 1 / 3;
@@ -70,18 +69,22 @@ button, .button {
 }
 
 input {
-  background-color: var(--cl-bg-el);
+  background-color: var(--cl-bg-hl);
   border: 1px solid var(--cl-fg);
 }
 
 table {
-  background-color: var(--cl-bg);
+  background-color: var(--cl-table-body);
 }
 
 th {
-  background-color: var(--cl-bg-el);
+  background-color: var(--cl-table-head);
 }
 
 tbody tr:hover, th:hover {
-  background-color: var(--cl-bg-hl);
+  background-color: var(--cl-table-hl);
+}
+
+tbody tr.selected {
+  background-color: var(--cl-table-sl)
 }

client/src/pages/firewall/Rules.vue

@@ -33,6 +33,6 @@ onMounted(async() => {
     <PageHeader title="Forward Rules">
       <button @click="loadRules">Load Rules</button>
     </PageHeader>
-    <NiceTable class="cl-secondary" :columns="columns" v-model:data="rules"/>
+    <NiceTable :columns="columns" v-model:data="rules"/>
   </div>
 </template>