mirror of
https://github.com/speatzle/nfsense.git
synced 2025-05-11 19:08:20 +00:00
get new color system working
This commit is contained in:
parent
8f3ba4ebe5
commit
39e7dfa267
3 changed files with 118 additions and 132 deletions
|
|
@ -128,7 +128,7 @@ onMounted(async() => {
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<div class="login" v-if="authState === AuthState.Unauthenticated">
|
<div class="login" v-if="authState === AuthState.Unauthenticated">
|
||||||
<FocusTrap>
|
<FocusTrap>
|
||||||
<form @submit="$event => $event.preventDefault()" :disabled="loginDisabled">
|
<form @submit="$event => $event.preventDefault()" :disabled="loginDisabled" class="cl-side">
|
||||||
<h1>nfSense Login</h1>
|
<h1>nfSense Login</h1>
|
||||||
<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" />
|
||||||
|
|
@ -149,7 +149,7 @@ onMounted(async() => {
|
||||||
left: 0px; right: 0px; top: 0px; bottom: 0px;
|
left: 0px; right: 0px; top: 0px; bottom: 0px;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
background-color: var(--cl-background);
|
background-color: var(--cl-bg);
|
||||||
}
|
}
|
||||||
.layout {
|
.layout {
|
||||||
grid-template-rows: auto 1fr;
|
grid-template-rows: auto 1fr;
|
||||||
|
|
|
||||||
|
|
@ -1,127 +1,113 @@
|
||||||
/* Coloring */
|
/* --- YACS --- */
|
||||||
:root {
|
:root {
|
||||||
/* Color Definitions */
|
/* Light/Dark-Agnostic Base Tints, defined as HSL */
|
||||||
--cl-md-p-10: #21005E;
|
--cl-base-0-h: 260;
|
||||||
--cl-md-p-20: #371E73;
|
/* Color 0 Base Hue */
|
||||||
--cl-md-p-30: #4F378B;
|
--cl-base-0-s: 20%;
|
||||||
--cl-md-p-40: #6750A4;
|
/* Color 0 Base Saturation */
|
||||||
--cl-md-p-80: #D0BCFF;
|
--cl-base-0-l: 100%;
|
||||||
--cl-md-p-90: #EADDFF;
|
/* Color 0 Base Lightness (Only usefull for darkening really) */
|
||||||
--cl-md-p-100: #FFFFFF;
|
--cl-base-1-h: 260;
|
||||||
|
/* Same definitions for another tint */
|
||||||
|
--cl-base-1-s: 50%;
|
||||||
|
--cl-base-1-l: 100%;
|
||||||
|
|
||||||
--cl-md-s-10: #1E192B;
|
/* --- Linear Scaling with buffer --- */
|
||||||
--cl-md-s-20: #332D41;
|
--lin-0-buf: 5%;
|
||||||
--cl-md-s-30: #4A4458;
|
/* Edge-Buffer for lightness spectrum, reduces contrast */
|
||||||
--cl-md-s-40: #625B71;
|
--lin-0-flux: calc(var(--cl-base-0-l) - var(--lin-0-buf) * 2);
|
||||||
--cl-md-s-80: #CCC2DC;
|
/* Variable Lightness Space */
|
||||||
--cl-md-s-90: #E8DEF8;
|
--lin-0-step: calc(var(--lin-0-flux) / 7);
|
||||||
--cl-md-s-100: #FFFFFF;
|
/* Increment per Step, 8 steps - 1 = 7 increments */
|
||||||
|
/* Actual color steps */
|
||||||
|
--cl-base-0-1: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 0));
|
||||||
|
--cl-base-0-2: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 1));
|
||||||
|
--cl-base-0-3: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 2));
|
||||||
|
--cl-base-0-4: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 3));
|
||||||
|
--cl-base-0-5: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 4));
|
||||||
|
--cl-base-0-6: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 5));
|
||||||
|
--cl-base-0-7: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 6));
|
||||||
|
--cl-base-0-8: hsl(var(--cl-base-0-h), var(--cl-base-0-s), calc(var(--lin-0-buf) + var(--lin-0-step) * 7));
|
||||||
|
|
||||||
--cl-md-t-10: #370B1E;
|
/* Repeated for another Tint */
|
||||||
--cl-md-t-20: #492532;
|
--lin-1-buf: 5%;
|
||||||
--cl-md-t-30: #633B48;
|
--lin-1-flux: calc(var(--cl-base-1-l) - var(--lin-1-buf) * 2);
|
||||||
--cl-md-t-40: #7D5260;
|
--lin-1-step: calc(var(--lin-1-flux) / 7);
|
||||||
--cl-md-t-80: #EFB8C8;
|
--cl-base-1-1: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 0));
|
||||||
--cl-md-t-90: #FFD8E4;
|
--cl-base-1-2: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 1));
|
||||||
--cl-md-t-100: #FFFFFF;
|
--cl-base-1-3: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 2));
|
||||||
|
--cl-base-1-4: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 3));
|
||||||
|
--cl-base-1-5: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 4));
|
||||||
|
--cl-base-1-6: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 5));
|
||||||
|
--cl-base-1-7: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 6));
|
||||||
|
--cl-base-1-8: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 7));
|
||||||
|
|
||||||
--cl-md-e-10: #410E0B;
|
/* Dark Mode Colors*/
|
||||||
--cl-md-e-20: #601410;
|
--cl-0-1: var(--cl-base-0-1);
|
||||||
--cl-md-e-30: #8C1D18;
|
--cl-0-2: var(--cl-base-0-2);
|
||||||
--cl-md-e-40: #B3261E;
|
--cl-0-3: var(--cl-base-0-3);
|
||||||
--cl-md-e-80: #F2B8B5;
|
--cl-0-4: var(--cl-base-0-4);
|
||||||
--cl-md-e-90: #F9DEDC;
|
--cl-0-5: var(--cl-base-0-5);
|
||||||
--cl-md-e-100: #FFFFFF;
|
--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-md-n-10: #1C1B1F;
|
--cl-1-1: var(--cl-base-1-1);
|
||||||
--cl-md-n-90: #E6E1E5;
|
--cl-1-2: var(--cl-base-1-2);
|
||||||
--cl-md-n-99: #FFFBFE;
|
--cl-1-3: var(--cl-base-1-3);
|
||||||
|
--cl-1-4: var(--cl-base-1-4);
|
||||||
--cl-md-nv-30: #49454F;
|
--cl-1-5: var(--cl-base-1-5);
|
||||||
--cl-md-nv-50: #79747E;
|
--cl-1-6: var(--cl-base-1-6);
|
||||||
--cl-md-nv-60: #938F99;
|
--cl-1-7: var(--cl-base-1-7);
|
||||||
--cl-md-nv-80: #CAC4D0;
|
--cl-1-8: var(--cl-base-1-8);
|
||||||
--cl-md-nv-90: #E7E0EC;
|
|
||||||
|
|
||||||
/* Color Uses */
|
|
||||||
--cl-bg: var(--cl-error);
|
|
||||||
--cl-bg-mid: var(--cl-error);
|
|
||||||
--cl-bg-low: var(--cl-error);
|
|
||||||
--cl-fg: var(--cl-error);
|
|
||||||
|
|
||||||
/* Dark Theme */
|
|
||||||
--cl-primary: var(--cl-md-p-80);
|
|
||||||
--cl-on-primary: var(--cl-md-p-20);
|
|
||||||
--cl-primary-container: var(--cl-md-p-30);
|
|
||||||
--cl-on-primary-container: var(--cl-md-p-90);
|
|
||||||
|
|
||||||
--cl-secondary: var(--cl-md-s-80);
|
|
||||||
--cl-on-secondary: var(--cl-md-s-20);
|
|
||||||
--cl-secondary-container: var(--cl-md-s-30);
|
|
||||||
--cl-on-secondary-container: var(--cl-md-s-90);
|
|
||||||
|
|
||||||
--cl-tertiary: var(--cl-md-t-80);
|
|
||||||
--cl-on-tertiary: var(--cl-md-t-20);
|
|
||||||
--cl-tertiary-container: var(--cl-md-t-30);
|
|
||||||
--cl-on-tertiary-container: var(--cl-md-t-90);
|
|
||||||
|
|
||||||
--cl-error: var(--cl-md-e-80);
|
|
||||||
--cl-on-error: var(--cl-md-e-20);
|
|
||||||
--cl-error-container: var(--cl-md-e-30);
|
|
||||||
--cl-on-error-container: var(--cl-md-e-90);
|
|
||||||
|
|
||||||
--cl-background: var(--cl-md-n-10);
|
|
||||||
--cl-on-background: var(--cl-md-n-90);
|
|
||||||
|
|
||||||
--cl-surface: var(--cl-md-n-10);
|
|
||||||
--cl-on-surface: var(--cl-md-n-90);
|
|
||||||
|
|
||||||
--cl-surface-variant: var(--cl-md-nv-30);
|
|
||||||
--cl-on-surface-variant: var(--cl-md-nv-80);
|
|
||||||
|
|
||||||
--cl-outline: var(--cl-md-nv-60);
|
|
||||||
--cl-outline-variant: var(--cl-md-nv-30);
|
|
||||||
|
|
||||||
|
|
||||||
/* Apply as default */
|
|
||||||
background-color: var(--cl-background);
|
|
||||||
color: var(--cl-on-background);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Changes for light mode */
|
@media only screen and (prefers-color-scheme: light) {
|
||||||
@media screen and (prefers-color-scheme: light) {
|
|
||||||
|
/* Light Mode Colors, simply inverts the spectrum */
|
||||||
:root {
|
:root {
|
||||||
/* Light Theme */
|
--cl-0-1: var(--cl-base-0-8);
|
||||||
--cl-primary: var(--cl-md-p-40);
|
--cl-0-2: var(--cl-base-0-7);
|
||||||
--cl-on-primary: var(--cl-md-p-100);
|
--cl-0-3: var(--cl-base-0-6);
|
||||||
--cl-primary-container: var(--cl-md-p-90);
|
--cl-0-4: var(--cl-base-0-5);
|
||||||
--cl-on-primary-container: var(--cl-md-p-10);
|
--cl-0-5: var(--cl-base-0-4);
|
||||||
|
--cl-0-6: var(--cl-base-0-3);
|
||||||
--cl-secondary: var(--cl-md-s-40);
|
--cl-0-7: var(--cl-base-0-2);
|
||||||
--cl-on-secondary: var(--cl-md-s-100);
|
--cl-0-8: var(--cl-base-0-1);
|
||||||
--cl-secondary-container: var(--cl-md-s-90);
|
|
||||||
--cl-on-secondary-container: var(--cl-md-s-10);
|
--cl-1-1: var(--cl-base-1-8);
|
||||||
|
--cl-1-2: var(--cl-base-1-7);
|
||||||
--cl-tertiary: var(--cl-md-t-40);
|
--cl-1-3: var(--cl-base-1-6);
|
||||||
--cl-on-tertiary: var(--cl-md-t-100);
|
--cl-1-4: var(--cl-base-1-5);
|
||||||
--cl-tertiary-container: var(--cl-md-t-90);
|
--cl-1-5: var(--cl-base-1-4);
|
||||||
--cl-on-tertiary-container: var(--cl-md-t-10);
|
--cl-1-6: var(--cl-base-1-3);
|
||||||
|
--cl-1-7: var(--cl-base-1-2);
|
||||||
--cl-error: var(--cl-md-e-40);
|
--cl-1-8: var(--cl-base-1-1);
|
||||||
--cl-on-error: var(--cl-md-e-100);
|
|
||||||
--cl-error-container: var(--cl-md-e-90);
|
|
||||||
--cl-on-error-container: var(--cl-md-e-10);
|
|
||||||
|
|
||||||
--cl-background: var(--cl-md-n-99);
|
|
||||||
--cl-on-background: var(--cl-md-n-10);
|
|
||||||
|
|
||||||
--cl-surface: var(--cl-md-n-99);
|
|
||||||
--cl-on-surface: var(--cl-md-n-10);
|
|
||||||
|
|
||||||
--cl-surface-variant: var(--cl-md-nv-90);
|
|
||||||
--cl-on-surface-variant: var(--cl-md-nv-30);
|
|
||||||
|
|
||||||
--cl-outline: var(--cl-md-nv-50);
|
|
||||||
--cl-outline-variant: var(--cl-md-nv-80);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Color Contexts --- */
|
||||||
|
/* These Contexts are meant to make it easy to shift all color assignments for differentiated areas, like navigation bars or context menus */
|
||||||
|
/* Main Color Context */
|
||||||
|
:root, .cl-main {
|
||||||
|
/* 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) */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Secondary Color Context, in this case for the sidebar */
|
||||||
|
.cl-side {
|
||||||
|
/* You can replace the base-tint on a per-assignment basis, though one tint per context is usual */
|
||||||
|
--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);
|
||||||
|
}
|
||||||
|
|
@ -14,15 +14,15 @@ button, .button {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: var(--cl-on-primary);
|
color: var(--cl-fg);
|
||||||
background-color: var(--cl-primary);
|
background-color: var(--cl-bg-el);
|
||||||
}
|
}
|
||||||
.button > svg, button > svg {
|
.button > svg, button > svg {
|
||||||
min-width: 1.5rem;
|
min-width: 1.5rem;
|
||||||
min-height: 1.5rem;
|
min-height: 1.5rem;
|
||||||
}
|
}
|
||||||
.button:hover, button:hover {
|
.button:hover, button:hover {
|
||||||
background-color: var(--cl-primary);
|
background-color: var(--cl-bg-hl);
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
|
|
@ -31,14 +31,14 @@ form {
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
|
|
||||||
background-color: var(--cl-secondary-container);
|
background-color: var(--cl-bg);
|
||||||
}
|
}
|
||||||
form > :is(button, .button, h1) {
|
form > :is(button, .button, h1) {
|
||||||
grid-column: 1 / 3;
|
grid-column: 1 / 3;
|
||||||
}
|
}
|
||||||
form button, form .button, form input {
|
form button, form .button, form input {
|
||||||
color: var(--cl-on-secondary);
|
color: var(--cl-fg);
|
||||||
background-color: var(--cl-secondary);
|
background-color: var(--cl-bg-el);
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
|
|
@ -46,15 +46,15 @@ table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
thead {
|
thead {
|
||||||
background-color: var(--cl-secondary-container);
|
background-color: var(--cl-bg-el);
|
||||||
}
|
}
|
||||||
th:hover {
|
th:hover {
|
||||||
background-color: var(--cl-secondary);
|
background-color: var(--cl-bg-hl);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
th, td {
|
th, td {
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
border: 0.125rem solid var(--cl-outline);
|
border: 0.125rem solid var(--cl-fg);
|
||||||
}
|
}
|
||||||
th > *{
|
th > *{
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -64,13 +64,13 @@ th svg {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
}
|
}
|
||||||
tbody tr:nth-child(even) {
|
tbody tr:nth-child(even) {
|
||||||
background-color: var(--cl-surface-variant)
|
background-color: var(--cl-bg-el)
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-bar {
|
.search-bar {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0.4rem;
|
padding: 0.4rem;
|
||||||
background-color: var(--cl-secondary-container);
|
background-color: var(--cl-bg-el);
|
||||||
color: var(--cl-on-secondary-container);
|
color: var(--cl-fg);
|
||||||
border: 1px solid var(--cl-outline);
|
border: 1px solid var(--cl-fg);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue