redid styling
This commit is contained in:
@@ -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 */
|
||||||
@@ -123,3 +129,4 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user