ui/panels/infopanel.razor.scss
InfoPanel {
position: absolute;
width: 280px;
left: 20px;
bottom: 20px;
top: 20px;
align-self: flex-end;
pointer-events: none;
justify-content: flex-start;
flex-direction: column-reverse;
gap: 10px;
//background-color: red;
.info_dash_container {
width: 100%;
//flex-direction: column-reverse;
flex-direction: row;
align-items: center;
gap: 8px;
}
.dash {
position: relative;
flex-shrink: 1;
width: 100%;
height: 28px;
background-color: #0005;
}
.info_bar {
position: relative;
width: 100%;
overflow: hidden;
height: 28px;
background-color: #00000099;
//border-left: 2px solid #fff;
//border-right: 2px solid #fff;
flex-shrink: 1;
//border: 2px solid black;
.info_bar_overlay {
position: absolute;
left: 0px;
width: 100%;
height: 100%;
}
}
.data_container {
width: 100%;
height: 100%;
flex-direction: row-reverse;
}
.info_bar_label {
position: absolute;
color: #fff;
font-size: 26px;
align-items: center;
font-weight: bolder;
font-family: "Mini Pixel-7";
//width: 100%;
left: 0px;
justify-content: flex-start;
padding-left: 5px;
padding-top: 1px;
text-stroke: 5px black;
opacity: 0.7;
}
.data {
position: relative;
color: #ffffffaa;
font-size: 26px;
align-items: center;
font-family: "Mini Pixel-7";
//left: 0px;
padding-right: 5px;
padding-top: 1px;
text-stroke: 5px black;
opacity: 0.9;
//letter-spacing: 1px;
}
//.data_center {
// position: absolute;
// color: #ffffff88;
// font-size: 26px;
// align-items: center;
// justify-content: center;
// font-family: "Mini Pixel-7";
//left: 0px;
// width: 100%;
// padding-left: 5px;
// padding-top: 1px;
// text-stroke: 3px #00000099;
// opacity: 0.9;
//}
}