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
This commit is contained in:
adroslice 2023-03-26 20:23:45 +02:00
parent 89933d4986
commit 3a0d094e7b
5 changed files with 75 additions and 38 deletions

View file

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

View file

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

View file

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

View file

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

View file

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