137 lines
2.5 KiB
CSS
137 lines
2.5 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
font-family: "Roboto", sans-serif;
|
|
|
|
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
background-color: #f0f0f0;
|
|
flex-direction: column;
|
|
background-color: #afafaf;
|
|
|
|
}
|
|
|
|
.gaugeGroup {
|
|
width: 98vw;
|
|
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;
|
|
clear: both;
|
|
margin-bottom: 10px;
|
|
}
|
|
.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: 15%;
|
|
height: 110%;
|
|
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: 180%;
|
|
object-fit: contain;
|
|
position: absolute; /* Make the image position absolute */
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1; /* Make the image display below the needle */
|
|
bottom: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.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: -50px; /* 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;
|
|
bottom: -40%; /* Lower the needle to the bottom */
|
|
left: 50%;
|
|
width: 2px;
|
|
height: 110%;
|
|
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%;
|
|
}
|
|
|