mirror of
https://github.com/speatzle/nfsense.git
synced 2025-05-11 02:48:21 +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">
|
||||
<div class="login" v-if="authState === AuthState.Unauthenticated">
|
||||
<FocusTrap>
|
||||
<form @submit="$event => $event.preventDefault()" :disabled="loginDisabled">
|
||||
<form @submit="$event => $event.preventDefault()" :disabled="loginDisabled" class="cl-side">
|
||||
<h1>nfSense Login</h1>
|
||||
<h2 :hidden="!loginDisabled">Logging in...</h2>
|
||||
<label for="username" v-text="'Username'" :hidden="loginDisabled" />
|
||||
|
|
@ -149,7 +149,7 @@ onMounted(async() => {
|
|||
left: 0px; right: 0px; top: 0px; bottom: 0px;
|
||||
|
||||
display: grid;
|
||||
background-color: var(--cl-background);
|
||||
background-color: var(--cl-bg);
|
||||
}
|
||||
.layout {
|
||||
grid-template-rows: auto 1fr;
|
||||
|
|
|
|||
|
|
@ -1,127 +1,113 @@
|
|||
/* Coloring */
|
||||
/* --- YACS --- */
|
||||
:root {
|
||||
/* Color Definitions */
|
||||
--cl-md-p-10: #21005E;
|
||||
--cl-md-p-20: #371E73;
|
||||
--cl-md-p-30: #4F378B;
|
||||
--cl-md-p-40: #6750A4;
|
||||
--cl-md-p-80: #D0BCFF;
|
||||
--cl-md-p-90: #EADDFF;
|
||||
--cl-md-p-100: #FFFFFF;
|
||||
/* 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-1-s: 50%;
|
||||
--cl-base-1-l: 100%;
|
||||
|
||||
--cl-md-s-10: #1E192B;
|
||||
--cl-md-s-20: #332D41;
|
||||
--cl-md-s-30: #4A4458;
|
||||
--cl-md-s-40: #625B71;
|
||||
--cl-md-s-80: #CCC2DC;
|
||||
--cl-md-s-90: #E8DEF8;
|
||||
--cl-md-s-100: #FFFFFF;
|
||||
/* --- 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-step: calc(var(--lin-0-flux) / 7);
|
||||
/* 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;
|
||||
--cl-md-t-20: #492532;
|
||||
--cl-md-t-30: #633B48;
|
||||
--cl-md-t-40: #7D5260;
|
||||
--cl-md-t-80: #EFB8C8;
|
||||
--cl-md-t-90: #FFD8E4;
|
||||
--cl-md-t-100: #FFFFFF;
|
||||
/* Repeated for another Tint */
|
||||
--lin-1-buf: 5%;
|
||||
--lin-1-flux: calc(var(--cl-base-1-l) - var(--lin-1-buf) * 2);
|
||||
--lin-1-step: calc(var(--lin-1-flux) / 7);
|
||||
--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-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-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;
|
||||
--cl-md-e-20: #601410;
|
||||
--cl-md-e-30: #8C1D18;
|
||||
--cl-md-e-40: #B3261E;
|
||||
--cl-md-e-80: #F2B8B5;
|
||||
--cl-md-e-90: #F9DEDC;
|
||||
--cl-md-e-100: #FFFFFF;
|
||||
/* Dark Mode Colors*/
|
||||
--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-md-n-10: #1C1B1F;
|
||||
--cl-md-n-90: #E6E1E5;
|
||||
--cl-md-n-99: #FFFBFE;
|
||||
|
||||
--cl-md-nv-30: #49454F;
|
||||
--cl-md-nv-50: #79747E;
|
||||
--cl-md-nv-60: #938F99;
|
||||
--cl-md-nv-80: #CAC4D0;
|
||||
--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);
|
||||
--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);
|
||||
}
|
||||
|
||||
/* Changes for light mode */
|
||||
@media screen and (prefers-color-scheme: light) {
|
||||
@media only screen and (prefers-color-scheme: light) {
|
||||
|
||||
/* Light Mode Colors, simply inverts the spectrum */
|
||||
:root {
|
||||
/* Light Theme */
|
||||
--cl-primary: var(--cl-md-p-40);
|
||||
--cl-on-primary: var(--cl-md-p-100);
|
||||
--cl-primary-container: var(--cl-md-p-90);
|
||||
--cl-on-primary-container: var(--cl-md-p-10);
|
||||
|
||||
--cl-secondary: var(--cl-md-s-40);
|
||||
--cl-on-secondary: var(--cl-md-s-100);
|
||||
--cl-secondary-container: var(--cl-md-s-90);
|
||||
--cl-on-secondary-container: var(--cl-md-s-10);
|
||||
|
||||
--cl-tertiary: var(--cl-md-t-40);
|
||||
--cl-on-tertiary: var(--cl-md-t-100);
|
||||
--cl-tertiary-container: var(--cl-md-t-90);
|
||||
--cl-on-tertiary-container: var(--cl-md-t-10);
|
||||
|
||||
--cl-error: var(--cl-md-e-40);
|
||||
--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);
|
||||
--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 */
|
||||
/* 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;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
color: var(--cl-on-primary);
|
||||
background-color: var(--cl-primary);
|
||||
color: var(--cl-fg);
|
||||
background-color: var(--cl-bg-el);
|
||||
}
|
||||
.button > svg, button > svg {
|
||||
min-width: 1.5rem;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
.button:hover, button:hover {
|
||||
background-color: var(--cl-primary);
|
||||
background-color: var(--cl-bg-hl);
|
||||
}
|
||||
|
||||
form {
|
||||
|
|
@ -31,14 +31,14 @@ form {
|
|||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
background-color: var(--cl-secondary-container);
|
||||
background-color: var(--cl-bg);
|
||||
}
|
||||
form > :is(button, .button, h1) {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
form button, form .button, form input {
|
||||
color: var(--cl-on-secondary);
|
||||
background-color: var(--cl-secondary);
|
||||
color: var(--cl-fg);
|
||||
background-color: var(--cl-bg-el);
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -46,15 +46,15 @@ table {
|
|||
border-collapse: collapse;
|
||||
}
|
||||
thead {
|
||||
background-color: var(--cl-secondary-container);
|
||||
background-color: var(--cl-bg-el);
|
||||
}
|
||||
th:hover {
|
||||
background-color: var(--cl-secondary);
|
||||
background-color: var(--cl-bg-hl);
|
||||
cursor: pointer;
|
||||
}
|
||||
th, td {
|
||||
padding: 0.5rem;
|
||||
border: 0.125rem solid var(--cl-outline);
|
||||
border: 0.125rem solid var(--cl-fg);
|
||||
}
|
||||
th > *{
|
||||
justify-content: center;
|
||||
|
|
@ -64,13 +64,13 @@ th svg {
|
|||
height: 1rem;
|
||||
}
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: var(--cl-surface-variant)
|
||||
background-color: var(--cl-bg-el)
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: block;
|
||||
padding: 0.4rem;
|
||||
background-color: var(--cl-secondary-container);
|
||||
color: var(--cl-on-secondary-container);
|
||||
border: 1px solid var(--cl-outline);
|
||||
background-color: var(--cl-bg-el);
|
||||
color: var(--cl-fg);
|
||||
border: 1px solid var(--cl-fg);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue