speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-09-13 15:19:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

correctly style most things

Browse source
This commit is contained in:
Samuel Lorch 2023-03-15 00:40:12 +01:00
parent 607dea9725
commit eba5d94f71
3 changed files with 42 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -88,8 +88,8 @@
/* --- 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 {
/* 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);
@ -100,14 +100,22 @@
/* 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);
}
/* Secondary Color Context, in this case for the sidebar */
.cl-side {
.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);
}

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

@ -14,16 +14,11 @@ button, .button {
align-items: center;
justify-content: center;
white-space: nowrap;
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-bg-hl);
}
form {
display: grid;
@ -31,25 +26,16 @@ form {
padding: 0.5rem;
gap: 0.5rem;
background-color: var(--cl-bg);
}
form > :is(button, .button, h1) {
grid-column: 1 / 3;
}
form button, form .button, form input {
color: var(--cl-fg);
background-color: var(--cl-bg-el);
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
background-color: var(--cl-bg-el);
}
th:hover {
background-color: var(--cl-bg-hl);
cursor: pointer;
}
th, td {
@ -63,14 +49,35 @@ th > *{
th svg {
height: 1rem;
}
tbody tr:nth-child(even) {
background-color: var(--cl-bg-el)
}
.search-bar {
display: block;
padding: 0.4rem;
background-color: var(--cl-bg-el);
color: var(--cl-fg);
border: 1px solid var(--cl-fg);
}
/* 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);
}