errors gefixed | modal | form | dynamische paginas

This commit is contained in:
Atilla
2024-04-07 19:18:53 +02:00
parent 70e5633ce6
commit 6df64fd3a0
22 changed files with 795 additions and 1936 deletions

View File

@@ -59,11 +59,12 @@ body .mainContainer .mainBorder {
body .mainContainer .mainBorder .pagina-titel {
font-size: 2rem;
margin-left: 1.5rem;
margin-bottom: 1rem;
}
body .mainContainer .mainBorder #sectie-1 {
display: flex;
flex-direction: column;
gap: 1rem;
gap: 0.75rem;
padding: 0 2.5rem 0 1rem;
position: relative;
}
@@ -74,7 +75,6 @@ body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 40px;
padding: 1rem;
margin-top: 1rem;
background-color: white;
}
body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht {
@@ -152,6 +152,7 @@ body .mainContainer .mainBorder .content .kant-links #planten td article h2 {
}
body .mainContainer .mainBorder .content .kant-links #planten td article:hover {
background-color: lightgray;
cursor: pointer;
}
body .mainContainer .mainBorder .content .kant-rechts {
grid-column: 3;
@@ -243,11 +244,16 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
border-radius: 10px;
}
.modal #plant-id {
font-size: 1.5rem;
}
.modal .close {
color: #aaa;
float: right;
font-size: 1.75rem;
font-size: 2rem;
font-weight: bold;
margin-top: -35px;
}
.modal .close:hover,
@@ -310,7 +316,7 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
}
#myModal input[type=submit] {
background-color: white;
background: linear-gradient(45deg, #abd3ae, #6ebf7d);
}
#myModal button {
@@ -326,25 +332,6 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
background: linear-gradient(45deg, #ffcc00, #ff6600);
}
#myModal button:hover {
background: linear-gradient(45deg, #abd3ae, #fff);
color: #000;
}
.modal .close {
color: #aaa;
float: right;
font-size: 1.75rem;
font-weight: bold;
}
.modal .close:hover,
.modal .close:active {
color: black;
text-decoration: none;
cursor: pointer;
}
.switch-container {
display: flex;
align-items: end;
@@ -356,14 +343,12 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
width: 60px;
height: 30px;
}
.switch input {
.switch .switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
.switch .slider {
position: absolute;
cursor: pointer;
top: 0;
@@ -374,8 +359,7 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
border-radius: 34px;
transition: 0.4s;
}
.slider:before {
.switch .slider:before {
position: absolute;
content: "";
height: 26px;
@@ -386,21 +370,77 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
border-radius: 50%;
transition: 0.4s;
}
input:checked + .slider {
.switch input:checked + .slider {
background-color: #2ecc71;
}
input:checked + .slider:before {
.switch input:checked + .slider:before {
transform: translateX(26px);
}
.rechterkant {
.switch .rechterkant {
display: flex;
justify-content: end;
}
.plant-container,
#modalButton {
.switch .plant-container,
.switch #modalButton {
background-color: white;
}
.switch .switch-container {
position: absolute;
}
.pagina-container {
position: relative;
align-items: end;
}
.close-button:hover {
background-color: rgb(171, 211, 174); /* Aangepaste hover kleur */
color: white; /* Tekstkleur wit op hover voor betere zichtbaarheid */
}
.container {
position: relative;
align-items: end;
}
.close-button {
position: absolute;
top: -90px;
right: -35px;
transform: translate(100%, 0%);
width: 50px;
height: 50px;
background-color: white;
color: rgb(171, 211, 174);
border-radius: 50%; /* Aangepast voor perfecte cirkel */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 50px;
border: solid rgb(171, 211, 174) 2px;
font-weight: bold;
}
.back-button {
position: absolute;
top: -90px;
right: -25px;
width: 50px;
height: 50px;
background-color: white;
color: rgb(171, 211, 174);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 35px;
border: solid rgb(171, 211, 174) 2px;
font-weight: bold;
}
.back-button:hover {
background-color: rgb(171, 211, 174);
color: white;
}/*# sourceMappingURL=style.css.map */