speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-10 18:38:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #8 from speatzle/main

Browse source 
Merge Colors
This commit is contained in:
Samuel Lorch 2023-03-15 00:43:02 +01:00 • committed by GitHub
commit dd2db438f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 142 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client/src/App.vue
View file

@ -97,14 +97,14 @@ onMounted(async() => {
'nav-state-collapsed': navState === NavState.Collapsed,
'nav-state-reduced': navState === NavState.Reduced,
}">
<button class="nav-head" @click="toggleNavState">
<button class="nav-head cl-secondary" @click="toggleNavState">
<i-mdi-hamburger-menu/>
<h1>nfSense</h1>
</button>
<Portal from="page-header" class="page-header pad gap"/>
<div class="nav-body">
<div class="nav-body cl-secondary">
<template v-for="(options, route) in navRoutes" :key="route">
<router-link :to="route" class="button" @click="collapseNavIfMobile">
<component :is="options.icon"/>
@ -118,6 +118,7 @@ onMounted(async() => {
<button @click="tryLogout"><i-material-symbols-logout/></button>
</div>
</div>
<router-view v-slot="{ Component, route }" v-if="authState === AuthState.Authenticated">
<Transition name="fade">
<component :is="Component" :key="{route}" class="page-content pad gap"/>
@ -128,7 +129,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-secondary">
<h1>nfSense Login</h1>
<h2 :hidden="!loginDisabled">Logging in...</h2>
<label for="username" v-text="'Username'" :hidden="loginDisabled" />
@ -149,7 +150,6 @@ onMounted(async() => {
left: 0px; right: 0px; top: 0px; bottom: 0px;
display: grid;
background-color: var(--cl-bg);
}
.layout {
grid-template-rows: auto 1fr;
@ -165,9 +165,6 @@ onMounted(async() => {
.page-header { grid-area: PH; }
.page-content { grid-area: PC; }
/* Navigation */
.nav-head, .nav-body { background: var(--cl-bg-low); }
.nav-head { font-weight: bold; }
.nav-head > svg { display: none; }
.nav-head > h1 { flex-grow: 1; }
@ -181,7 +178,6 @@ onMounted(async() => {
align-items: center;
}
.page-header button svg { margin: -0.25rem; }
.page-content { background: var(--cl-bg); }
/* Nav-Body-Collapsing */
.nav-body, .page-header, .page-content {

139
client/src/global-styles/colors.css
View file

@ -1,34 +1,121 @@
/* Coloring */
/* --- YACS --- */
:root {
/* Color Definitions */
--cl-md-50: #FAFAFA;
--cl-md-100: #F5F5F5;
--cl-md-200: #EEEEEE;
--cl-md-300: #E0E0E0;
--cl-md-400: #BDBDBD;
--cl-md-500: #9E9E9E;
--cl-md-600: #757575;
--cl-md-700: #616161;
--cl-md-800: #424242;
--cl-md-900: #212121;
/* 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%;
/* Color Uses */
--cl-bg: var(--cl-md-900);
--cl-bg-mid: var(--cl-md-800);
--cl-bg-low: var(--cl-md-700);
--cl-fg: var(--cl-md-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-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));
/* Apply as default */
/* 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));
/* 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-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);
}
@media only screen and (prefers-color-scheme: light) {
/* Light Mode Colors, simply inverts the spectrum */
:root {
--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) */
/* Set Default Colors */
background-color: var(--cl-bg);
color: var(--cl-fg);
}
/* Changes for light mode */
@media screen and (prefers-color-scheme: light) {
:root {
--cl-bg: var(--cl-md-100);
--cl-bg-mid: var(--cl-md-200);
--cl-bg-low: var(--cl-md-300);
--cl-fg: var(--cl-md-900);
}
/* 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 */
--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);
/* Set Default Colors */
background-color: var(--cl-bg);
color: var(--cl-fg);
}

46
client/src/global-styles/components.css
View file

@ -14,16 +14,11 @@ button, .button {
align-items: center;
justify-content: center;
white-space: nowrap;
background-color: var(--cl-bg-low);
}
.button > svg, button > svg {
min-width: 1.5rem;
min-height: 1.5rem;
}
.button:hover, button:hover {
background-color: var(--cl-bg-mid);
}
form {
display: grid;
@ -31,29 +26,21 @@ form {
padding: 0.5rem;
gap: 0.5rem;
background-color: var(--cl-bg-low);
}
form > :is(button, .button, h1) {
grid-column: 1 / 3;
}
form button, form .button {
background-color: var(--cl-bg);
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
background-color: var(--cl-bg-low);
}
th:hover {
background-color: var(--cl-bg-mid);
cursor: pointer;
}
th, td {
padding: 0.5rem;
border: 0.125rem solid var(--cl-bg-mid);
border: 0.125rem solid var(--cl-fg);
}
th > *{
justify-content: center;
@ -62,18 +49,35 @@ th > *{
th svg {
height: 1rem;
}
tbody tr:nth-child(even) {
background-color: var(--cl-bg-mid)
}
.search-bar {
display: block;
padding: 0.4rem;
background-color: var(--cl-bg-low);
color: inherit;
border: 1px solid var(--cl-fg);
}
.multiselect, .multiselect * {
all: initial;
/* Coloring */
button, .button {
background-color: var(--cl-bg-el);
}
.button:hover, button:hover {
background-color: var(--cl-bg-hl);
}
input {
background-color: var(--cl-bg-el);
border: 1px solid var(--cl-fg);
}
th {
background-color: var(--cl-bg-el);
}
tbody tr:hover, th:hover {
background-color: var(--cl-bg-hl);
}
/* Button Background Exception for Nav Menu */
.nav-body > button, .button {
background-color: var(--cl-bg);
}