Update UI

This commit is contained in:
Dan
2019-11-13 17:16:23 +00:00
parent 085fadb633
commit 3bb27e0697
3 changed files with 63 additions and 13 deletions

BIN
nui/digital-7.regular.ttf Normal file

Binary file not shown.

View File

@@ -1,3 +1,13 @@
@font-face {
font-family: "Seg-7";
src: url( "Segment7Standard.otf" );
}
@font-face {
font-family: "Digital-7";
src: url( "digital-7.regular.ttf" );
}
/* Set all div elements to use the box-sizing property of border-box */ /* Set all div elements to use the box-sizing property of border-box */
div { div {
box-sizing: border-box; box-sizing: border-box;
@@ -21,13 +31,14 @@ div {
right: 0; right: 0;
background-color: rgb(30, 33, 38); background-color: rgb(30, 33, 38);
/* background-color: rgb(58, 63, 71); */
display: grid; display: grid;
grid-template-columns: 40px 160px auto; grid-template-columns: 40px 160px auto;
column-gap: 5px; column-gap: 5px;
} }
#radar > div { #radar > div {
border: 1px solid orange; /* border: 1px solid orange; */
margin: 0; margin: 0;
} }
@@ -41,7 +52,7 @@ div {
margin: 15px 0; margin: 15px 0;
border: 1px dotted red; /* border: 1px dotted red; */
} }
#radar .modes .mode_text { #radar .modes .mode_text {
@@ -62,15 +73,48 @@ div {
grid-template-rows: 50% 50%; grid-template-rows: 50% 50%;
} }
#radar .speeds .speed_display { #radar .speeds .speed_display {
display: flex; position: relative;
margin: 15px 0; display: flex;
background-color: orange; justify-content: center;
align-items: center;
margin: 10px 0;
background-color: rgb(61, 18, 0);
border: 3px solid black;
} }
#radar .speeds .speed_display .speed_number { #radar .speeds .speed_display span {
/* width: 100%; position: absolute;
margin: 0; */
display: block;
width: 93%;
height: 65px;
line-height: 108%;
margin: auto; margin: auto;
font-size: 50px;
font-family: 'Seg-7';
font-size: 70px;
text-align: center; text-align: center;
letter-spacing: 10px;
}
#radar .speeds .speed_display .ghost {
/* position: absolute; */
color: rgb(90, 35, 1);
}
#radar .speeds .speed_display .speed_number {
color: rgb(252, 113, 1);
}
#radar .main_area {
display: grid;
grid-template-rows: 10% 80% 10%;
}
* {
overflow: hidden;
} }

View File

@@ -22,13 +22,19 @@
<div class="speeds"> <div class="speeds">
<div class="speed_display"> <div class="speed_display">
<p class="speed_number">000</p> <span class="ghost">888</span>
<span class="speed_number">¦27</span>
</div> </div>
<div class="speed_display"> <div class="speed_display">
<p class="speed_number">000</p> <span class="ghost">888</span>
<span class="speed_number">000</span>
</div> </div>
</div> </div>
<div class="main_area">
<div class="header">FRONT ANTENNA</div>
</div>
</div> </div>
</body> </body>
</html> </html>