mirror of
https://codeberg.org/metamuffin/abrechenbarkeit.git
synced 2025-01-31 02:51:42 +00:00
format css and variablize colors
This commit is contained in:
parent
9f453051c7
commit
8f1b230e63
1 changed files with 101 additions and 85 deletions
46
style.css
46
style.css
|
@ -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 {
|
||||
background-color: #25333f;
|
||||
background-color: var(--b1);
|
||||
}
|
||||
|
||||
body>* {
|
||||
|
@ -28,13 +37,14 @@ h1 {
|
|||
}
|
||||
|
||||
/* nav bar */
|
||||
*, .logo {
|
||||
color: #e2e2e2;
|
||||
*,
|
||||
.logo {
|
||||
color: var(--t0);
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: #1d2832;
|
||||
background-color: var(--b0);
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
font-size: 1.2em;
|
||||
|
@ -43,7 +53,7 @@ nav {
|
|||
nav a {
|
||||
padding-right: 1em;
|
||||
text-decoration: none;
|
||||
color: rgb(65, 89, 110);
|
||||
color: var(--t1);
|
||||
}
|
||||
|
||||
nav h2 {
|
||||
|
@ -58,7 +68,7 @@ nav > :last-child {
|
|||
/* notification stuff */
|
||||
.notif {
|
||||
padding: 0.5em;
|
||||
background-color: #1d2832;
|
||||
background-color: var(--b0);
|
||||
}
|
||||
|
||||
.notif.error {
|
||||
|
@ -71,7 +81,7 @@ nav > :last-child {
|
|||
|
||||
/* landing page */
|
||||
form.creation {
|
||||
background-color: #2e3d4d;
|
||||
background-color: var(--b2);
|
||||
padding: 1em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
@ -82,7 +92,7 @@ form.creation > h3 {
|
|||
}
|
||||
|
||||
input {
|
||||
color: #2e3d4d;
|
||||
color: var(--b2);
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
|
@ -111,7 +121,7 @@ ul {
|
|||
}
|
||||
|
||||
li {
|
||||
background-color: #2e3d4d;
|
||||
background-color: var(--b2);
|
||||
width: 6em;
|
||||
height: 3.5em;
|
||||
padding: 1em;
|
||||
|
@ -160,6 +170,7 @@ h1 {
|
|||
grid-template-columns: repeat(6, 6em);
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
input.button {
|
||||
place-content: center;
|
||||
padding: 0.8em 0.5em;
|
||||
|
@ -208,7 +219,7 @@ h3 {
|
|||
|
||||
.backgroundbox {
|
||||
width: fit-content;
|
||||
background-color: #1d2832;
|
||||
background-color: var(--b0);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
|
@ -225,7 +236,8 @@ h3 {
|
|||
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;
|
||||
}
|
||||
|
||||
|
@ -247,7 +259,7 @@ td {
|
|||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: #1d2832;
|
||||
background-color: var(--b0);
|
||||
}
|
||||
|
||||
input {
|
||||
|
@ -257,11 +269,14 @@ input {
|
|||
|
||||
input:not([type=submit]) {
|
||||
border: none;
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
border-bottom: 1px solid var(--t0);
|
||||
}
|
||||
|
||||
@media print {
|
||||
nav, .container, h1 {
|
||||
|
||||
nav,
|
||||
.container,
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -285,7 +300,8 @@ input:not([type=submit]) {
|
|||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
*, body {
|
||||
*,
|
||||
body {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue