mirror of
https://github.com/cloudmaker97/DurstRechner.git
synced 2025-12-06 07:58:39 +00:00
65 lines
No EOL
1.3 KiB
CSS
65 lines
No EOL
1.3 KiB
CSS
:root {
|
|
--header-background-color: #171717;
|
|
--header-text-color: white;
|
|
--header-button-background-color: #676767;
|
|
--header-button-color: #eaeaea;
|
|
--aside-background-color: #dfdfdf;
|
|
--aside-text-color: #000;
|
|
--box-padding: 1em;
|
|
}
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
header {
|
|
display: flex;
|
|
background-color: var(--header-background-color);
|
|
color: var(--header-text-color);
|
|
padding: .5em;
|
|
}
|
|
header h1 {
|
|
margin: 0;
|
|
padding: 0;
|
|
transform: translateY(-.1em);
|
|
user-select: none;
|
|
font-size: 1.1em;
|
|
}
|
|
header button {
|
|
margin-left: auto;
|
|
background-color: var(--header-button-background-color);
|
|
color: var(--header-button-color);
|
|
}
|
|
header h1 > span.emoji {
|
|
padding-right: .4em;
|
|
}
|
|
header h1 > span.emoji:before {
|
|
content: "🍺";
|
|
}
|
|
.slot {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
aside.calculator {
|
|
display: flex;
|
|
flex: 1 0 0;
|
|
background-color: var(--aside-background-color);
|
|
height: 100%;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
|
}
|
|
main.controls {
|
|
display: flex;
|
|
flex: 4 0 0;
|
|
}
|
|
aside.calculator > div,
|
|
main.controls > div {
|
|
padding: var(--box-padding);
|
|
box-sizing: border-box;
|
|
} |