Schaffenburg/abrechenbarkeit
3
0
Fork 0
mirror of https://codeberg.org/metamuffin/abrechenbarkeit.git synced 2025-01-31 02:51:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

format css and variablize colors

Browse source
This commit is contained in:
metamuffin 2024-11-03 22:52:18 +01:00
parent 9f453051c7
commit 8f1b230e63
No known key found for this signature in database
GPG key ID: 718F9749DCDBD654
1 changed files with 101 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
style.css
View file

@ -1,5 +1,14 @@
:root {
--hue: 280;
--b0: hsl(var(--hue), 27%, 15%);
--b1: hsl(var(--hue), 26%, 20%);
--b2: hsl(var(--hue), 25%, 24%);
--t0: hsl(var(--hue), 00%, 89%);
--t1: hsl(var(--hue), 13%, 51%);
}
body { body {
background-color: #25333f; background-color: var(--b1);
} }
body>* { body>* {
@ -28,13 +37,14 @@ h1 {
} }
/* nav bar */ /* nav bar */
*, .logo { *,
color: #e2e2e2; .logo {
color: var(--t0);
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
nav { nav {
background-color: #1d2832; background-color: var(--b0);
margin: 0; margin: 0;
padding: 1em; padding: 1em;
font-size: 1.2em; font-size: 1.2em;
@ -43,7 +53,7 @@ nav {
nav a { nav a {
padding-right: 1em; padding-right: 1em;
text-decoration: none; text-decoration: none;
color: rgb(65, 89, 110); color: var(--t1);
} }
nav h2 { nav h2 {
@ -58,7 +68,7 @@ nav > :last-child {
/* notification stuff */ /* notification stuff */
.notif { .notif {
padding: 0.5em; padding: 0.5em;
background-color: #1d2832; background-color: var(--b0);
} }
.notif.error { .notif.error {
@ -71,7 +81,7 @@ nav > :last-child {
/* landing page */ /* landing page */
form.creation { form.creation {
background-color: #2e3d4d; background-color: var(--b2);
padding: 1em; padding: 1em;
margin-top: 2em; margin-top: 2em;
} }
@ -82,7 +92,7 @@ form.creation > h3 {
} }
input { input {
color: #2e3d4d; color: var(--b2);
} }
input[type="text"] { input[type="text"] {
@ -111,7 +121,7 @@ ul {
} }
li { li {
background-color: #2e3d4d; background-color: var(--b2);
width: 6em; width: 6em;
height: 3.5em; height: 3.5em;
padding: 1em; padding: 1em;
@ -160,6 +170,7 @@ h1 {
grid-template-columns: repeat(6, 6em); grid-template-columns: repeat(6, 6em);
list-style-type: none; list-style-type: none;
} }
input.button { input.button {
place-content: center; place-content: center;
padding: 0.8em 0.5em; padding: 0.8em 0.5em;
@ -208,7 +219,7 @@ h3 {
.backgroundbox { .backgroundbox {
width: fit-content; width: fit-content;
background-color: #1d2832; background-color: var(--b0);
padding: 1em; padding: 1em;
} }
@ -225,7 +236,8 @@ h3 {
grid-template-columns: auto 10em; grid-template-columns: auto 10em;
} }
form.box > :first-child, form.box > :last-child { form.box> :first-child,
form.box> :last-child {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
@ -247,7 +259,7 @@ td {
} }
tr:nth-child(2n) { tr:nth-child(2n) {
background-color: #1d2832; background-color: var(--b0);
} }
input { input {
@ -257,11 +269,14 @@ input {
input:not([type=submit]) { input:not([type=submit]) {
border: none; border: none;
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid var(--t0);
} }
@media print { @media print {
nav, .container, h1 {
nav,
.container,
h1 {
display: none; display: none;
} }
@ -285,7 +300,8 @@ input:not([type=submit]) {
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
*, body { *,
body {
background-color: white; background-color: white;
color: black; color: black;
} }