heboba/goodgarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

planten class V1.1

Browse Source
This commit is contained in:
Renzo
2024-03-20 13:26:00 +01:00
parent d9504f5e7c 35717dad89
commit 4e7fae5943
60 changed files with 6458 additions and 3480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/css/style.css
View File

@@ -1,32 +1,26 @@
@import url("https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap");
h1, h2, h3, h4, h5 {
h1,
h2,
h3,
h4,
h5 {
font-family: "Akaya Kanadaka", system-ui;
margin: 0;
}
p, td {
p,
td {
font-family: "Afacad", sans-serif;
color: black;
}
.containers-articles, body .mainContainer .mainBorder .content .kant-rechts #sensor-2, body .mainContainer .mainBorder .content .kant-links #sensor-1, body .mainContainer .mainBorder .content .kant-links #planten td article {
height: 7rem;
width: 10rem;
padding: 0.6rem;
margin: 0.1rem;
margin-left: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: solid 3px rgb(171, 211, 174);
border-radius: 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: white;
a {
text-decoration: none;
}
body {
background-image: url("../images/achtergrond.png");
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
@@ -40,7 +34,7 @@ body {
body .mainContainer {
width: 85vw;
height: 38rem;
background-color: rgba(255, 255, 255, 0.95);
background-color: rgba(255, 255, 255, 0.85);
border-radius: 40px;
padding: 2rem;
}
@@ -81,6 +75,7 @@ body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht {
border-radius: 40px;
padding: 1rem;
margin-top: 1rem;
background-color: white;
}
body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht {
border: solid 2px rgb(171, 211, 174);
@@ -101,6 +96,7 @@ body .mainContainer .mainBorder #sectie-1 .grafiek {
border-radius: 40px;
padding: 1rem;
position: relative;
background-color: white;
}
body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox {
border: solid 2px rgb(171, 211, 174);
@@ -133,6 +129,20 @@ body .mainContainer .mainBorder .content .kant-links #planten {
width: 100%;
border-collapse: collapse;
}
body .mainContainer .mainBorder .content .kant-links #planten td article {
height: 7rem;
width: 10rem;
padding: 0.6rem;
margin: 0.1rem;
margin-left: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: solid 3px rgb(171, 211, 174);
border-radius: 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
body .mainContainer .mainBorder .content .kant-links #planten td article #toevoegen {
height: 5rem;
width: 5rem;
@@ -143,15 +153,8 @@ body .mainContainer .mainBorder .content .kant-links #planten td article h2 {
body .mainContainer .mainBorder .content .kant-links #planten td article:hover {
background-color: lightgray;
}
body .mainContainer .mainBorder .content .kant-links #sensor-1 {
border: none;
border-radius: 40px 0px 0px 40px;
width: 30vw;
margin-top: 10vh;
}
body .mainContainer .mainBorder .content .kant-rechts {
grid-column: 3;
margin-right: 2rem;
}
body .mainContainer .mainBorder .content .kant-rechts #metingen {
border: solid 3px rgb(171, 211, 174);
@@ -169,16 +172,12 @@ body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes ta
justify-content: space-between;
width: 100%;
}
body .mainContainer .mainBorder .content .kant-rechts #sensor-2 {
border-radius: 0px 40px 40px 0px;
width: 30vw;
margin-top: 10vh;
}
body .mainContainer .mainBorder .grid-column-2 {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 40px;
padding: 1rem;
margin: 3.25rem 1rem 1.25rem 1rem;
background-color: white;
}
body .mainContainer .mainBorder .grid-column-2 .grid-2-child {
border: solid 2px rgb(171, 211, 174);
@@ -189,9 +188,17 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table {
padding: 1.5rem 2rem;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2.5rem;
justify-content: space-around;
height: 90%;
}
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table table tr td {
font-size: 1.05rem;
}
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-1 tr td {
font-size: 1.25rem;
}
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2 {
position: relative;
}
@@ -211,7 +218,6 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
top: -20px;
}
/* Divider */
.divider {
display: flex;
justify-content: center;
@@ -221,7 +227,6 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
margin: 0 auto;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
@@ -234,17 +239,168 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 30vw;
height: auto;
border: solid 2px black;
border: solid 2px #abd3ae;
border-radius: 10px;
}
.modal .close {
color: #aaa;
float: right;
font-size: 1.75rem;
font-weight: bold;
}
.modal .close:hover, .modal .close:active {
.modal .close:hover,
.modal .close:active {
color: black;
text-decoration: none;
cursor: pointer;
}
#myModal select,
#myModal input {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 15px;
border: 2px solid #abd3ae;
border-radius: 5px;
box-sizing: border-box;
}
#myModal .knop {
display: flex;
justify-content: space-between;
}
#myModal button {
width: 48%;
padding: 10px;
box-sizing: border-box;
height: 40px;
}
#myModal .knop-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
#myModal .knop-container input,
#myModal .knop-container button {
flex: 1;
margin: 0 5px;
padding: 10px;
box-sizing: border-box;
}
#myModal input[type=text],
#myModal select {
border: 2px solid #abd3ae;
padding: 10px;
border-radius: 17px;
box-sizing: border-box;
}
#myModal input[type=submit],
#myModal button {
color: #fff;
border: none;
border-radius: 15px;
cursor: pointer;
}
#myModal input[type=submit] {
background-color: white;
}
#myModal button {
background-color: white;
color: black;
}
.toevoeging {
background: linear-gradient(45deg, #abd3ae, #2ecc71);
}
.annulatie-knop {
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;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
transition: 0.4s;
}
input:checked + .slider {
background-color: #2ecc71;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.rechterkant {
display: flex;
justify-content: end;
}
.plant-container,
#modalButton {
background-color: white;
}/*# sourceMappingURL=style.css.map */