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

66
style.css
View file

@ -1,8 +1,17 @@
body { :root {
background-color: #25333f; --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: var(--b1);
}
body>* {
margin: 0.5rem; margin: 0.5rem;
} }
@ -14,11 +23,11 @@ body > * {
list-style-type: none; list-style-type: none;
} }
.container.firstchildlarge > :first-child { .container.firstchildlarge> :first-child {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.container > * { .container>* {
display: block; display: block;
margin: 0.5rem; margin: 0.5rem;
} }
@ -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,14 +53,14 @@ 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 {
display: inline-block display: inline-block
} }
nav > :last-child { nav> :last-child {
float: right; float: right;
padding-right: 0; padding-right: 0;
} }
@ -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,18 +81,18 @@ 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;
} }
form.creation > h3 { form.creation>h3 {
margin: 5px; margin: 5px;
margin-right: 2em; margin-right: 2em;
} }
input { input {
color: #2e3d4d; color: var(--b2);
} }
input[type="text"] { input[type="text"] {
@ -90,7 +100,7 @@ input[type="text"] {
min-width: 10em; min-width: 10em;
} }
form.creation > * { form.creation>* {
display: inline-block; display: inline-block;
margin-right: 1.5em; margin-right: 1.5em;
} }
@ -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;
@ -167,7 +178,7 @@ input.button {
border-radius: 4px; border-radius: 4px;
} }
.amount-presets > form > input { .amount-presets>form>input {
width: 6em; width: 6em;
margin: 1em; margin: 1em;
} }
@ -208,11 +219,11 @@ h3 {
.backgroundbox { .backgroundbox {
width: fit-content; width: fit-content;
background-color: #1d2832; background-color: var(--b0);
padding: 1em; padding: 1em;
} }
.transactions.container > :first-child { .transactions.container> :first-child {
width: 36em; width: 36em;
} }
@ -225,11 +236,12 @@ 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;
} }
form.box > * { form.box>* {
margin: .3em; margin: .3em;
width: auto; width: auto;
} }
@ -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;
} }