619 lines
11 KiB
CSS
619 lines
11 KiB
CSS
|
|
/**** Shared ****/
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
font-family: 'Arial', sans-serif;
|
|
scroll-behavior: smooth;
|
|
--main-color: #A040C0;
|
|
--light-color: #D098E0;
|
|
--accent-color: #C0F080;
|
|
--bg-color: #EBEFE7;
|
|
--blur-color: #60804020;
|
|
--blur: 16px;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
position: relative;
|
|
}
|
|
|
|
body.header-footer {
|
|
min-height: calc(100vh + 8em);
|
|
padding: 3em 0 8em 0;
|
|
}
|
|
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 3em;
|
|
box-shadow: 0 0 0.5em #00000060;
|
|
background-color: #FFFFFF;
|
|
z-index: 10;
|
|
}
|
|
|
|
header img {
|
|
height: 2.5em;
|
|
margin: 0.25em;
|
|
}
|
|
|
|
nav {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
nav > *:first-child,
|
|
nav > *:last-child {
|
|
flex: 100px 1 1;
|
|
}
|
|
|
|
nav > *:last-child {
|
|
text-align: right;
|
|
}
|
|
|
|
nav ul {
|
|
display: flex;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
nav li {
|
|
flex: 100px 1 1;
|
|
}
|
|
|
|
nav li a {
|
|
text-decoration: none;
|
|
padding: 1em 2em;
|
|
color: #808080;
|
|
}
|
|
|
|
nav li a:hover,
|
|
nav li.active a{
|
|
color: var(--main-color);
|
|
}
|
|
|
|
/**** Index ****/
|
|
|
|
main span[id] {
|
|
position: relative;
|
|
top: -8em;
|
|
}
|
|
|
|
p a,
|
|
table a {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
main .background {
|
|
background-image: var(--img);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
main .background {
|
|
background-attachment: unset;
|
|
}
|
|
}
|
|
|
|
main .home {
|
|
height: calc(100vh + 2rem);
|
|
--img: url("/res/images/Italien-1.jpg");
|
|
}
|
|
|
|
main .picture-1 {
|
|
width: 100%;
|
|
margin: 0;
|
|
--img: url("/res/images/Italien-2.jpg");
|
|
height: calc(24em + 4rem);
|
|
}
|
|
|
|
main .picture-2 {
|
|
width: 100%;
|
|
margin: 0;
|
|
--img: url("/res/images/Italien-3.jpg");
|
|
height: calc(24em + 2rem);
|
|
}
|
|
|
|
main .home a {
|
|
text-decoration: none;
|
|
color: #000000;
|
|
top: calc(30vh - 1em);
|
|
position: relative;
|
|
font-size: 1.25em;
|
|
transition: top 0.25s, font-size 0.25s;
|
|
display: block;
|
|
width: fit-content;
|
|
margin: auto;
|
|
}
|
|
|
|
main .home a > div {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: fit-content;
|
|
margin: auto;
|
|
backdrop-filter: blur(var(--blur));
|
|
background-color: var(--blur-color);
|
|
box-shadow: 0 0 1rem #00000060;
|
|
padding: 1.5em 1em;
|
|
border-radius: 3em;
|
|
}
|
|
|
|
main .home a:hover {
|
|
font-size: 1.375em;
|
|
top: calc(30vh - 1.25em);
|
|
}
|
|
|
|
main .home img {
|
|
width: 8em;
|
|
height: 8em;
|
|
}
|
|
|
|
main .home h1 {
|
|
font-size: 4em;
|
|
margin: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
main .home h2 {
|
|
font-size: 1.125em;
|
|
margin: 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
main div.blur {
|
|
width: 100%;
|
|
height: 2rem;
|
|
position: absolute;
|
|
backdrop-filter: blur(var(--blur));
|
|
background-color: var(--blur-color);
|
|
}
|
|
main div.blur.top {
|
|
top: 0;
|
|
box-shadow: 0 0.5rem 1rem -0.5rem #00000060;
|
|
}
|
|
main div.blur.bottom {
|
|
bottom: 0;
|
|
box-shadow: 0 -0.5rem 1rem -0.5rem #00000060;
|
|
}
|
|
|
|
main section {
|
|
padding: 1em 0 2em 0;
|
|
position: relative;
|
|
}
|
|
|
|
main section p,
|
|
main section table {
|
|
max-width: 1000px;
|
|
margin: 1em auto;
|
|
}
|
|
|
|
main section p {
|
|
text-align: justify;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
main section h3 {
|
|
text-align: center;
|
|
font-size: 2em;
|
|
}
|
|
|
|
main .about {
|
|
padding: 0 0 1em 0;
|
|
}
|
|
|
|
main .clients {
|
|
padding: 0 1em 2em 1em;
|
|
}
|
|
|
|
main .clients .container-background {
|
|
}
|
|
|
|
main .clients .container {
|
|
display: flex;
|
|
max-width: 1400px;
|
|
margin: auto;
|
|
justify-content: center;
|
|
--img: url("/res/images/Italien-3.jpg");
|
|
}
|
|
|
|
main .clients .container .filling {
|
|
min-width: 2em;
|
|
min-height: 2em;
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
main .clients .container > *:not(.filling) {
|
|
flex: 100px 1 1;
|
|
/*border-radius: 1em;*/
|
|
padding: 1.5em 1em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
backdrop-filter: blur(var(--blur));
|
|
background-color: var(--blur-color);
|
|
position: relative;
|
|
}
|
|
|
|
main .clients .container .edge {
|
|
position: absolute;
|
|
background-color: var(--bg-color);
|
|
width: 1em;
|
|
height: 1em;
|
|
clip-path: polygon(0% 0%, 0% 100%, 2% 80%, 7% 63%, 14% 49%, 22% 38%, 29% 29%, 38% 22%, 49% 14%, 63% 7%, 80% 2%, 100% 0%);
|
|
}
|
|
main .clients .container .edge:nth-last-child(1) {top: 0; left: 0; transform: rotate(0deg);}
|
|
main .clients .container .edge:nth-last-child(2) {top: 0; right: 0; transform: rotate(90deg);}
|
|
main .clients .container .edge:nth-last-child(3) {bottom: 0; right: 0; transform: rotate(180deg);}
|
|
main .clients .container .edge:nth-last-child(4) {bottom: 0; left: 0; transform: rotate(270deg);}
|
|
|
|
@media screen and (max-width: 1000px) {
|
|
main .clients .container {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
main .clients .container h4,
|
|
main .clients .container h5,
|
|
main .clients .container h6 {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
main .clients .container h4 {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
main .clients .container h5 {
|
|
font-size: 0.875em;
|
|
line-height: 1em;
|
|
font-weight: normal;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
main .clients .container h5 span {
|
|
white-space: pre;
|
|
}
|
|
|
|
main .clients .container h6 {
|
|
font-size: 0.875em;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
main .clients .container .branches {
|
|
font-size: 1em;
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
|
|
main .clients .link {
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table td,
|
|
table th {
|
|
padding: 0.125em 0.5em;
|
|
}
|
|
|
|
table thead th {
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
text-align: left;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
table thead tr:first-child th:not([rowspan="2"]) {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
table .unit {
|
|
font-size: 0.75em;
|
|
text-align: center;
|
|
padding-top: 0;
|
|
}
|
|
|
|
footer {
|
|
height: 8em;
|
|
padding: 1em;
|
|
width: 100%;
|
|
box-shadow: 0 0 0.5rem #00000060;
|
|
background-color: #404040;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2em;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
footer img {
|
|
height: 4em;
|
|
width: 4em;
|
|
}
|
|
|
|
footer a {
|
|
align-self: center;
|
|
}
|
|
|
|
@media screen and (min-width: 1921px) {
|
|
main .picture-1 {
|
|
height: calc(36em + 4rem);
|
|
}
|
|
main .picture-2 {
|
|
height: calc(36em + 2rem);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1032px) {
|
|
nav li a {
|
|
padding: 1em;
|
|
}
|
|
main section p,
|
|
main section table {
|
|
margin: 1em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
footer {
|
|
flex-direction: column;
|
|
height: unset;
|
|
align-items: center;
|
|
gap: 1em;
|
|
padding-top: 3em;
|
|
}
|
|
footer > *:not(:first-child) {
|
|
width: 300px;
|
|
}
|
|
body.header-footer {
|
|
min-height: calc(100vh + 20em);
|
|
padding-bottom: 20em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 650px) {
|
|
nav.index li:first-child {
|
|
display: none;
|
|
}
|
|
.home {
|
|
font-size: 0.875em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 550px) {
|
|
nav.index li:nth-child(2) {
|
|
display: none;
|
|
}
|
|
.home {
|
|
font-size: 0.75em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 500px) {
|
|
nav.index li:nth-child(3) {
|
|
display: none;
|
|
}
|
|
.home {
|
|
font-size: 0.675em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 400px) {
|
|
.home {
|
|
font-size: 0.5em;
|
|
}
|
|
}
|
|
|
|
/**** Access ****/
|
|
|
|
main#access {
|
|
width: calc(100% - 2em);
|
|
max-width: 1200px;
|
|
margin: 4em auto 4em auto;
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 0.5em #00000060;
|
|
padding: 1em 2em;
|
|
}
|
|
|
|
main#access h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
main#access.login {
|
|
max-width: 500px;
|
|
}
|
|
|
|
main#access.login h1 {
|
|
margin: 1rem 0 1rem 0;
|
|
}
|
|
|
|
main#access.login form {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 1em;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
main#access.login form input,
|
|
main#access.login form button {
|
|
font-size: 1em;
|
|
border: 1px solid #C0C0C0;
|
|
border-radius: 4px;
|
|
padding: 0.25em 0.5em;
|
|
}
|
|
|
|
main#access.login form .error {
|
|
font-size: 1em;
|
|
color: #C00000;
|
|
border: 1px solid #C00000;
|
|
border-radius: 4px;
|
|
padding: 0.25em 0.5em;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
#user {
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
position: absolute;
|
|
right: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
#user:hover {
|
|
color: var(--main-color);
|
|
}
|
|
|
|
#usertext {
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
#usertext > div {
|
|
font-size: 0.75em;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
main .number {
|
|
text-align: right;
|
|
}
|
|
|
|
main.deliveries form {
|
|
margin: 1em;
|
|
display: flex;
|
|
align-items: center;
|
|
align-content: center;
|
|
gap: 1em;
|
|
}
|
|
|
|
.abgewertet {
|
|
color: #C00000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
main.overview .day {
|
|
border-radius: 4px;
|
|
padding-left: 1.5em;
|
|
background: #E0E0E0;
|
|
margin: 1em 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 2em;
|
|
height: 10em;
|
|
}
|
|
|
|
main.overview .day.today {
|
|
background-color: var(--light-color);
|
|
}
|
|
|
|
main.overview .schedule-container {
|
|
background: #00000020;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
main.overview .schedule-container a {
|
|
border-radius: 4px;
|
|
color: unset;
|
|
text-decoration: none;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 1em;
|
|
transition: background-color 0.125s;
|
|
}
|
|
|
|
main.overview .schedule-container a.cancelled > div {
|
|
color: #A00000;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
main.overview .schedule-container a.cancelled > span {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
main.overview .schedule-container a:hover {
|
|
background-color: #00000020;
|
|
}
|
|
|
|
.min-percent {
|
|
min-width: 2.625em;
|
|
display: inline-block;
|
|
text-align: right;
|
|
}
|
|
|
|
.min-kg {
|
|
min-width: 5em;
|
|
display: inline-block;
|
|
text-align: right;
|
|
}
|
|
|
|
@media screen and (max-width: 1000px) {
|
|
main#access {
|
|
padding: 1em 0.5em;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
main.overview .day {
|
|
flex-direction: column;
|
|
height: unset;
|
|
padding-left: 0;
|
|
gap: 0.5em;
|
|
padding-top: 0.5em;
|
|
}
|
|
main.overview .day > div:first-child {
|
|
text-align: center;
|
|
}
|
|
main.overview .schedule-container {
|
|
height: unset;
|
|
width: 100%;
|
|
}
|
|
main.overview .schedule-container a {
|
|
padding: 1em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 650px) {
|
|
main.overview .schedule-container a {
|
|
flex-direction: column;
|
|
}
|
|
main.overview .schedule-container a > *:first-child {
|
|
width: 100%;
|
|
}
|
|
main.overview .schedule-container a > *:last-child {
|
|
width: 100%;
|
|
text-align: right;
|
|
}
|
|
}
|