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

184
style.css
View file

@ -1,40 +1,50 @@
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 {
margin: 0.5rem; background-color: var(--b1);
}
body>* {
margin: 0.5rem;
} }
.container { .container {
display: grid; display: grid;
flex-direction: column; flex-direction: column;
justify-content: left; justify-content: left;
grid-template-columns: auto auto; grid-template-columns: auto auto;
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;
} }
h1 { h1 {
font-size: 3em; font-size: 3em;
} }
/* 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,22 +53,22 @@ 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;
} }
/* 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;
@ -129,13 +139,13 @@ li {
/* user page */ /* user page */
.balance { .balance {
display: block; display: block;
line-break: normal; line-break: normal;
} }
.balance-value { .balance-value {
padding-left: 1rem; padding-left: 1rem;
font-size: 2em; font-size: 2em;
} }
h1 { h1 {
@ -160,14 +170,15 @@ 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;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
} }
.amount-presets > form > input { .amount-presets>form>input {
width: 6em; width: 6em;
margin: 1em; margin: 1em;
} }
@ -177,7 +188,7 @@ input.button {
} }
.amount-pos { .amount-pos {
color: rgb(0, 204, 29); color: rgb(0, 204, 29);
} }
input.amount-pos { input.amount-pos {
@ -202,95 +213,100 @@ input.amount-ntr {
} }
h3 { h3 {
margin: 4px; margin: 4px;
margin-left: 0; margin-left: 0;
} }
.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;
} }
/* create transaction box */ /* create transaction box */
.box { .box {
display: grid; display: grid;
justify-content: left; justify-content: left;
/* grid-auto-rows: minmax(5em, 2); */ /* grid-auto-rows: minmax(5em, 2); */
/* grid-template-columns: repeat(2, calc(50% - 2em)); */ /* grid-template-columns: repeat(2, calc(50% - 2em)); */
grid-template-columns: auto 10em; grid-template-columns: auto 10em;
} }
form.box > :first-child, form.box > :last-child { form.box> :first-child,
grid-column: 1 / -1; form.box> :last-child {
grid-column: 1 / -1;
} }
form.box > * { form.box>* {
margin: .3em; margin: .3em;
width: auto; width: auto;
} }
table { table {
padding: 1em; padding: 1em;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
td { td {
padding: .3em; padding: .3em;
min-width: 5em; min-width: 5em;
} }
tr:nth-child(2n) { tr:nth-child(2n) {
background-color: #1d2832; background-color: var(--b0);
} }
input { input {
background-color: inherit; background-color: inherit;
color: white; color: white;
} }
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 {
display: none;
}
table.log:before { nav,
content: "Abrechenbarkeit Log"; .container,
font-size: 2em; h1 {
text-decoration: underline; display: none;
} }
table.productlist:before { table.log:before {
content: "Produkt Liste"; content: "Abrechenbarkeit Log";
font-size: 2em; font-size: 2em;
text-decoration: underline; text-decoration: underline;
} }
tr :last-child { table.productlist:before {
display: none; content: "Produkt Liste";
} font-size: 2em;
text-decoration: underline;
}
td { tr :last-child {
border-bottom: 1px solid black; display: none;
} }
*, body { td {
background-color: white; border-bottom: 1px solid black;
color: black; }
}
form { *,
display: none; body {
} background-color: white;
color: black;
}
form {
display: none;
}
} }