mirror of
https://github.com/Michatec/wk_wars2x.git
synced 2026-04-01 00:16:27 +02:00
Finished first ui version
This commit is contained in:
Dan
106
nui/radar.css
106
nui/radar.css
@@ -10,17 +10,19 @@
|
||||
|
||||
@font-face {
|
||||
font-family: "Heebo";
|
||||
/* src: url( "Heebo-Regular.ttf" ); */
|
||||
src: url( "Heebo-Bold.ttf" );
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Heebo', Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
/* color: rgb(216, 74, 17); temp */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.radar_container {
|
||||
width: 660px;
|
||||
width: 670px;
|
||||
height: 200px;
|
||||
|
||||
/* Temp centre */
|
||||
@@ -69,7 +71,7 @@
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 45px 50px 150px 30px auto;
|
||||
grid-template-columns: auto 50px 150px 35px 50px 135px 35px 135px;
|
||||
}
|
||||
#radar .label {
|
||||
font-size: 15px;
|
||||
@@ -119,8 +121,23 @@
|
||||
#radar .modes_container .modes p {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#radar .modes_container .fast_top {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#radar .modes_container .fast_bottom {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#radar .speeds_container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -139,7 +156,6 @@
|
||||
grid-row-start: 1;
|
||||
grid-column-start: 1;
|
||||
|
||||
font-family: 'Seg-7';
|
||||
font-size: 70px;
|
||||
text-align: center;
|
||||
|
||||
@@ -150,14 +166,24 @@
|
||||
|
||||
margin-right: -6px;
|
||||
}
|
||||
|
||||
#radar .speeds_container .display .ghost {
|
||||
color: rgb(90, 35, 1);
|
||||
|
||||
#radar .speeds_container .fast {
|
||||
height: 60px;
|
||||
background-color: rgb(50, 0, 0)
|
||||
}
|
||||
#radar .speeds_container .fast p {
|
||||
font-size: 60px;
|
||||
line-height: 106%;
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
#radar .speeds_container .display .speed {
|
||||
color: rgb(252, 113, 1);;
|
||||
}
|
||||
#radar .speeds_container .fast_top {
|
||||
margin-top: 27px;
|
||||
}
|
||||
|
||||
#radar .speeds_container .fast_bottom {
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
|
||||
#radar .speed_arrows_container {
|
||||
display: flex;
|
||||
@@ -172,4 +198,62 @@
|
||||
justify-content: center;
|
||||
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
#radar .speed_arrows_container .fast_top {
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
#radar .speed_arrows_container .fast_bottom {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
#radar .patrol_and_logo_container {
|
||||
display: grid;
|
||||
grid-template-rows: repeat( 3, 1fr );
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
#radar .patrol_and_logo_container .logo {
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#radar .patrol_and_logo_container .display {
|
||||
background-color: rgb(0, 57, 35);
|
||||
}
|
||||
|
||||
#radar .patrol_and_logo_container .speed_label {
|
||||
color: white;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* Colours and fonts used in multiple areas that are similar */
|
||||
#radar .display p {
|
||||
font-family: 'Seg-7';
|
||||
}
|
||||
|
||||
#radar .display .ghost_speed {
|
||||
color: rgb(90, 35, 1);
|
||||
}
|
||||
|
||||
#radar .display .speed {
|
||||
color: rgb(252, 113, 1);;
|
||||
}
|
||||
|
||||
#radar .display .fast_ghost_speed {
|
||||
color: rgb(70, 0, 0);
|
||||
}
|
||||
|
||||
#radar .display .fast_speed {
|
||||
color: rgb(243, 12, 10);
|
||||
}
|
||||
|
||||
#radar .display .patrol_ghost_speed {
|
||||
color: rgb(0, 91, 68);
|
||||
}
|
||||
|
||||
#radar .display .patrol_speed {
|
||||
color: rgb(15, 244, 57);
|
||||
}
|
||||
@@ -31,13 +31,13 @@
|
||||
|
||||
<div class="speeds_container">
|
||||
<div class="display">
|
||||
<p class="ghost">000</p>
|
||||
<p class="speed" id="frontSpeed">¦27</p>
|
||||
<p class="ghost_speed">000</p>
|
||||
<p class="speed" id="frontSpeed">¦44</p>
|
||||
</div>
|
||||
|
||||
<div class="display">
|
||||
<p class="ghost">000</p>
|
||||
<p class="speed" id="rearSpeed">118</p>
|
||||
<p class="ghost_speed">000</p>
|
||||
<p class="speed" id="rearSpeed">¦53</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -53,6 +53,55 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modes_container">
|
||||
<div class="modes fast_top">
|
||||
<p id="frontFast">FAST</p>
|
||||
<p id="frontFastLock">LOCK</p>
|
||||
</div>
|
||||
|
||||
<div class="modes fast_bottom">
|
||||
<p id="rearFast">FAST</p>
|
||||
<p id="rearFastLock">LOCK</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="speeds_container">
|
||||
<div class="display fast fast_top">
|
||||
<p class="fast_ghost_speed">000</p>
|
||||
<p class="fast_speed" id="frontFastSpeed">¦89</p>
|
||||
</div>
|
||||
|
||||
<div class="display fast fast_bottom">
|
||||
<p class="fast_ghost_speed">000</p>
|
||||
<p class="fast_speed" id="rearFastSpeed">117</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="speed_arrows_container">
|
||||
<div class="speed_arrows fast_top">
|
||||
<div class="arrow" id="frontFastDirAway"></div>
|
||||
<div class="arrow arrow_down" id="frontFastDirTowards"></div>
|
||||
</div>
|
||||
|
||||
<div class="speed_arrows fast_bottom">
|
||||
<div class="arrow" id="rearFastDirTowards"></div>
|
||||
<div class="arrow arrow_down" id="rearFastDirAway"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="patrol_and_logo_container">
|
||||
<div class="logo">WraithRS 2</div>
|
||||
|
||||
<div class="speeds_container">
|
||||
<div class="display fast">
|
||||
<p class="patrol_ghost_speed">000</p>
|
||||
<p class="patrol_speed" id="patrolSpeed">¦54</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="speed_label">PATROL SPEED</div>
|
||||
</div>
|
||||
|
||||
<div class="label labelbottom">REAR ANTENNA</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user