Smikkelbakje/J1B3-Sensor-boxes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redid styling

Browse Source
This commit is contained in:
Sam Hos
2024-03-27 20:48:40 +01:00
parent e920298df8
commit d54c020144
1 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/new website/style.css
View File

@@ -9,10 +9,13 @@ body {
height: 100vh; height: 100vh;
margin: 0; margin: 0;
background-color: #f0f0f0; background-color: #f0f0f0;
flex-direction: column;
background-color: #afafaf;
} }
.gaugeGroup { .gaugeGroup {
width: 70vw; width: 98vw;
height: 20vh; height: 20vh;
display: flex; display: flex;
flex-direction: column; /* Keep as column */ flex-direction: column; /* Keep as column */
@@ -22,6 +25,8 @@ body {
padding: 10px; padding: 10px;
border-radius: 50px; border-radius: 50px;
border: 2px solid #333; border: 2px solid #333;
clear: both;
margin-bottom: 10px;
} }
.groupTitle { .groupTitle {
width: 100%; width: 100%;
@@ -44,7 +49,7 @@ body {
justify-content: space-around; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
width: 20%; width: 20%;
height: 100%; height: 110%;
background-color: #ddd; background-color: #ddd;
color: #333; color: #333;
padding: 10px; padding: 10px;
@@ -70,12 +75,13 @@ body {
.gaugeImage { .gaugeImage {
width: 100%; width: 100%;
height: auto; height: auto;
max-height: 100%; max-height: 180%;
object-fit: contain; object-fit: contain;
position: absolute; /* Make the image position absolute */ position: absolute; /* Make the image position absolute */
top: 0; top: 0;
left: 0; left: 0;
z-index: 1; /* Make the image display below the needle */ z-index: 1; /* Make the image display below the needle */
bottom: 0;
} }
.gaugeValue, .gaugeText { .gaugeValue, .gaugeText {
@@ -91,7 +97,7 @@ body {
font-size: 24px; font-size: 24px;
z-index: 2; z-index: 2;
position: absolute; position: absolute;
bottom: -30px; /* Adjust this value to move the text further down */ bottom: -50px; /* Adjust this value to move the text further down */
} }
@@ -108,10 +114,10 @@ body {
.needle { .needle {
position: absolute; position: absolute;
margin-bottom: 2%; /* Lower the needle to the bottom */ bottom: -40%; /* Lower the needle to the bottom */
left: 50%; left: 50%;
width: 2px; width: 2px;
height: 70%; height: 110%;
background-color: black; background-color: black;
transform-origin: bottom; transform-origin: bottom;
z-index: 3; /* Make the needle display above the image */ z-index: 3; /* Make the needle display above the image */
@@ -122,4 +128,5 @@ body {
flex-direction: row; /* Layout children side by side */ flex-direction: row; /* Layout children side by side */
width: 100%; width: 100%;
height: 100%; height: 100%;
} }