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-face {
|
||||||
font-family: "Heebo";
|
font-family: "Heebo";
|
||||||
|
/* src: url( "Heebo-Regular.ttf" ); */
|
||||||
src: url( "Heebo-Bold.ttf" );
|
src: url( "Heebo-Bold.ttf" );
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-family: 'Heebo', Verdana, Geneva, Tahoma, sans-serif;
|
font-family: 'Heebo', Verdana, Geneva, Tahoma, sans-serif;
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
|
/* color: rgb(216, 74, 17); temp */
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radar_container {
|
.radar_container {
|
||||||
width: 660px;
|
width: 670px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
|
|
||||||
/* Temp centre */
|
/* Temp centre */
|
||||||
@@ -69,7 +71,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 45px 50px 150px 30px auto;
|
grid-template-columns: auto 50px 150px 35px 50px 135px 35px 135px;
|
||||||
}
|
}
|
||||||
#radar .label {
|
#radar .label {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
@@ -119,8 +121,23 @@
|
|||||||
#radar .modes_container .modes p {
|
#radar .modes_container .modes p {
|
||||||
margin: auto;
|
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 {
|
#radar .speeds_container {
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
@@ -139,7 +156,6 @@
|
|||||||
grid-row-start: 1;
|
grid-row-start: 1;
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
|
|
||||||
font-family: 'Seg-7';
|
|
||||||
font-size: 70px;
|
font-size: 70px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
@@ -150,14 +166,24 @@
|
|||||||
|
|
||||||
margin-right: -6px;
|
margin-right: -6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#radar .speeds_container .display .ghost {
|
#radar .speeds_container .fast {
|
||||||
color: rgb(90, 35, 1);
|
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 {
|
#radar .speeds_container .fast_top {
|
||||||
color: rgb(252, 113, 1);;
|
margin-top: 27px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#radar .speeds_container .fast_bottom {
|
||||||
|
margin-bottom: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
#radar .speed_arrows_container {
|
#radar .speed_arrows_container {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -172,4 +198,62 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
margin: auto 0;
|
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="speeds_container">
|
||||||
<div class="display">
|
<div class="display">
|
||||||
<p class="ghost">000</p>
|
<p class="ghost_speed">000</p>
|
||||||
<p class="speed" id="frontSpeed">¦27</p>
|
<p class="speed" id="frontSpeed">¦44</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="display">
|
<div class="display">
|
||||||
<p class="ghost">000</p>
|
<p class="ghost_speed">000</p>
|
||||||
<p class="speed" id="rearSpeed">118</p>
|
<p class="speed" id="rearSpeed">¦53</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -53,6 +53,55 @@
|
|||||||
</div>
|
</div>
|
||||||
</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 class="label labelbottom">REAR ANTENNA</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user