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:
metamuffin
parent
9f453051c7
commit
8f1b230e63
1 changed files with 101 additions and 85 deletions
186
style.css
186
style.css
|
|
@ -1,40 +1,50 @@
|
|||
body {
|
||||
background-color: #25333f;
|
||||
: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 > * {
|
||||
margin: 0.5rem;
|
||||
body {
|
||||
background-color: var(--b1);
|
||||
}
|
||||
|
||||
body>* {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
flex-direction: column;
|
||||
justify-content: left;
|
||||
grid-template-columns: auto auto;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.container.firstchildlarge > :first-child {
|
||||
grid-column: 1 / -1;
|
||||
.container.firstchildlarge> :first-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
display: block;
|
||||
margin: 0.5rem;
|
||||
.container>* {
|
||||
display: block;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
/* 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,22 +53,22 @@ nav {
|
|||
nav a {
|
||||
padding-right: 1em;
|
||||
text-decoration: none;
|
||||
color: rgb(65, 89, 110);
|
||||
color: var(--t1);
|
||||
}
|
||||
|
||||
nav h2 {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
nav > :last-child {
|
||||
float: right;
|
||||
padding-right: 0;
|
||||
nav> :last-child {
|
||||
float: right;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* notification stuff */
|
||||
.notif {
|
||||
padding: 0.5em;
|
||||
background-color: #1d2832;
|
||||
background-color: var(--b0);
|
||||
}
|
||||
|
||||
.notif.error {
|
||||
|
|
@ -71,18 +81,18 @@ nav > :last-child {
|
|||
|
||||
/* landing page */
|
||||
form.creation {
|
||||
background-color: #2e3d4d;
|
||||
background-color: var(--b2);
|
||||
padding: 1em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
form.creation > h3 {
|
||||
form.creation>h3 {
|
||||
margin: 5px;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
input {
|
||||
color: #2e3d4d;
|
||||
color: var(--b2);
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
|
|
@ -90,7 +100,7 @@ input[type="text"] {
|
|||
min-width: 10em;
|
||||
}
|
||||
|
||||
form.creation > * {
|
||||
form.creation>* {
|
||||
display: inline-block;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
|
@ -111,7 +121,7 @@ ul {
|
|||
}
|
||||
|
||||
li {
|
||||
background-color: #2e3d4d;
|
||||
background-color: var(--b2);
|
||||
width: 6em;
|
||||
height: 3.5em;
|
||||
padding: 1em;
|
||||
|
|
@ -129,13 +139,13 @@ li {
|
|||
|
||||
/* user page */
|
||||
.balance {
|
||||
display: block;
|
||||
line-break: normal;
|
||||
display: block;
|
||||
line-break: normal;
|
||||
}
|
||||
|
||||
.balance-value {
|
||||
padding-left: 1rem;
|
||||
font-size: 2em;
|
||||
padding-left: 1rem;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -160,14 +170,15 @@ h1 {
|
|||
grid-template-columns: repeat(6, 6em);
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
input.button {
|
||||
place-content: center;
|
||||
padding: 0.8em 0.5em;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
place-content: center;
|
||||
padding: 0.8em 0.5em;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.amount-presets > form > input {
|
||||
.amount-presets>form>input {
|
||||
width: 6em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
|
@ -177,7 +188,7 @@ input.button {
|
|||
}
|
||||
|
||||
.amount-pos {
|
||||
color: rgb(0, 204, 29);
|
||||
color: rgb(0, 204, 29);
|
||||
}
|
||||
|
||||
input.amount-pos {
|
||||
|
|
@ -202,95 +213,100 @@ input.amount-ntr {
|
|||
}
|
||||
|
||||
h3 {
|
||||
margin: 4px;
|
||||
margin-left: 0;
|
||||
margin: 4px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.backgroundbox {
|
||||
width: fit-content;
|
||||
background-color: #1d2832;
|
||||
padding: 1em;
|
||||
width: fit-content;
|
||||
background-color: var(--b0);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.transactions.container > :first-child {
|
||||
width: 36em;
|
||||
.transactions.container> :first-child {
|
||||
width: 36em;
|
||||
}
|
||||
|
||||
/* create transaction box */
|
||||
.box {
|
||||
display: grid;
|
||||
display: grid;
|
||||
justify-content: left;
|
||||
/* grid-auto-rows: minmax(5em, 2); */
|
||||
/* grid-template-columns: repeat(2, calc(50% - 2em)); */
|
||||
grid-template-columns: auto 10em;
|
||||
}
|
||||
|
||||
form.box > :first-child, form.box > :last-child {
|
||||
grid-column: 1 / -1;
|
||||
form.box> :first-child,
|
||||
form.box> :last-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
form.box > * {
|
||||
margin: .3em;
|
||||
width: auto;
|
||||
form.box>* {
|
||||
margin: .3em;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
padding: 1em;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: 1em;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: .3em;
|
||||
min-width: 5em;
|
||||
padding: .3em;
|
||||
min-width: 5em;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: #1d2832;
|
||||
background-color: var(--b0);
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: inherit;
|
||||
color: white;
|
||||
background-color: inherit;
|
||||
color: white;
|
||||
}
|
||||
|
||||
input:not([type=submit]) {
|
||||
border: none;
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--t0);
|
||||
}
|
||||
|
||||
@media print {
|
||||
nav, .container, h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table.log:before {
|
||||
content: "Abrechenbarkeit Log";
|
||||
font-size: 2em;
|
||||
text-decoration: underline;
|
||||
}
|
||||
nav,
|
||||
.container,
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table.productlist:before {
|
||||
content: "Produkt Liste";
|
||||
font-size: 2em;
|
||||
text-decoration: underline;
|
||||
}
|
||||
table.log:before {
|
||||
content: "Abrechenbarkeit Log";
|
||||
font-size: 2em;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
tr :last-child {
|
||||
display: none;
|
||||
}
|
||||
table.productlist:before {
|
||||
content: "Produkt Liste";
|
||||
font-size: 2em;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
tr :last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
*, body {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
td {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
form {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
*,
|
||||
body {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
form {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue