125 lines
2.3 KiB
CSS
125 lines
2.3 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.gaugeGroup {
|
|
width: 70vw;
|
|
height: 20vh;
|
|
display: flex;
|
|
flex-direction: column; /* Keep as column */
|
|
justify-content: flex-start;
|
|
background-color: #333;
|
|
color: #fff;
|
|
padding: 10px;
|
|
border-radius: 50px;
|
|
border: 2px solid #333;
|
|
}
|
|
.groupTitle {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.Node {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.Sensorvalues {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
width: 20%;
|
|
height: 100%;
|
|
background-color: #ddd;
|
|
color: #333;
|
|
padding: 10px;
|
|
margin: 5px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
position: relative;
|
|
padding-bottom: 50px; /* Increase bottom padding */
|
|
|
|
}
|
|
|
|
.gaugeContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 80%; /* Increase the height from 70% to 80% */
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
|
|
.gaugeImage {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
position: absolute; /* Make the image position absolute */
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1; /* Make the image display below the needle */
|
|
}
|
|
|
|
.gaugeValue, .gaugeText {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gaugeText {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
z-index: 2;
|
|
position: absolute;
|
|
bottom: -30px; /* Adjust this value to move the text further down */
|
|
|
|
}
|
|
|
|
|
|
.valueContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#valueText {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.needle {
|
|
position: absolute;
|
|
margin-bottom: 2%; /* Lower the needle to the bottom */
|
|
left: 50%;
|
|
width: 2px;
|
|
height: 70%;
|
|
background-color: black;
|
|
transform-origin: bottom;
|
|
z-index: 3; /* Make the needle display above the image */
|
|
}
|
|
|
|
.contentContainer {
|
|
display: flex;
|
|
flex-direction: row; /* Layout children side by side */
|
|
width: 100%;
|
|
height: 100%;
|
|
} |