Add /access
This commit is contained in:
@ -1,4 +1,6 @@
|
||||
|
||||
/**** Shared ****/
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -7,7 +9,8 @@
|
||||
font-family: 'Arial', sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
--main-color: #A040C0;
|
||||
--light-color: #C0F080;
|
||||
--light-color: #D098E0;
|
||||
--accent-color: #C0F080;
|
||||
--bg-color: #EBEFE7;
|
||||
--blur-color: #60804020;
|
||||
--blur: 16px;
|
||||
@ -15,6 +18,12 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body.header-footer {
|
||||
min-height: calc(100vh + 8em);
|
||||
padding: 3em 0 8em 0;
|
||||
}
|
||||
|
||||
header {
|
||||
@ -43,6 +52,10 @@ nav > *:last-child {
|
||||
flex: 100px 1 1;
|
||||
}
|
||||
|
||||
nav > *:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
@ -53,16 +66,23 @@ nav ul {
|
||||
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 a:hover,
|
||||
nav li.active a{
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
/**** Index ****/
|
||||
|
||||
main span[id] {
|
||||
position: relative;
|
||||
top: -8em;
|
||||
@ -209,7 +229,7 @@ main .clients .container {
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
justify-content: center;
|
||||
--img: url("/res/images/Italien-2.jpg");
|
||||
--img: url("/res/images/Italien-3.jpg");
|
||||
}
|
||||
|
||||
main .clients .container .filling {
|
||||
@ -285,10 +305,32 @@ main .clients .link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table td {
|
||||
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;
|
||||
@ -299,7 +341,8 @@ footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2em;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
footer img {
|
||||
@ -341,10 +384,14 @@ footer a {
|
||||
footer > *:not(:first-child) {
|
||||
width: 300px;
|
||||
}
|
||||
body.header-footer {
|
||||
min-height: calc(100vh + 20em);
|
||||
padding-bottom: 20em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
nav li:first-child {
|
||||
nav.index li:first-child {
|
||||
display: none;
|
||||
}
|
||||
.home {
|
||||
@ -353,7 +400,7 @@ footer a {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
nav li:nth-child(2) {
|
||||
nav.index li:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
.home {
|
||||
@ -362,7 +409,7 @@ footer a {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
nav li:nth-child(3) {
|
||||
nav.index li:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
.home {
|
||||
@ -375,3 +422,197 @@ footer a {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user