Michatec/wk_wars2x
1
1
Fork 0
mirror of https://github.com/Michatec/wk_wars2x.git synced 2026-04-01 08:26:27 +02:00
Code Issues Packages Projects Releases Activity

Main antenna buttons added

Browse Source
This commit is contained in:
Dan
2019-11-24 14:30:55 +00:00
parent 974f995968
commit ca608d6e62
2 changed files with 111 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
nui/radar.css
View File

@@ -320,21 +320,6 @@
text-shadow: 0 0 8px rgba( 15, 244, 57, 0.65 );
}
button {
border: none;
margin: 0;
padding: 0;
/* Turn bg colour into a gradient */
background-color: rgb( 200, 200, 200 );
font-family: 'Heebo-Regular';
}
button:hover {
background-color: rgb( 220, 220, 220 );
}
#rc {
width: 275px;
height: 600px;
@@ -358,6 +343,20 @@ button:hover {
z-index: 15;
}
/* Button template classes */
#rc button {
border: none;
margin: 0;
padding: 0;
background-color: rgb( 200, 200, 200 );
font-family: 'Heebo-Regular';
}
#rc button:hover {
background-color: rgb( 220, 220, 220 );
}
#rc .rounded_btn {
border-radius: 30px;
}
@@ -367,6 +366,47 @@ button:hover {
height: 65px;
}
#rc .xmit_btn {
width: 65px;
height: 80px;
position: relative;
}
#rc .xmit_top {
clip-path: polygon( 0 15px, 50% 0, 100% 15px, 100% 100%, 0 100% );
border-radius: 0 0 7px 7px;
}
#rc .xmit_bottom {
clip-path: polygon( 0 65px, 0 0, 100% 0, 100% 65px, 50% 100% );
border-radius: 7px 7px 0 0;
}
#rc .xmit_btn {
background-color: rgb( 200, 200, 200 );
}
#rc .xmit_btn:hover {
background-color: rgb( 220, 220, 220 );
}
#rc .xmit_btn .arrow {
width: 40px;
height: 20px;
position: absolute;
left: 0;
right: 0;
clip-path: polygon( 50% 0, 100% 60%, 70% 60%, 70% 100%, 30% 100%, 30% 60%, 0 60% );
background-color: rgb( 0, 0, 0 );
}
#rc .xmit_btn .arrow_top {
/* margin: 10px auto 0 auto; */
}
#rc .xmit_btn .arrow_bottom {
transform: rotate( 180deg );
bottom: 0;
}
/* Buttons and remote control elements */
#rc .toggle_display {
width: 130px;
@@ -389,23 +429,55 @@ button:hover {
#rc .antenna_btns_container .btns {
display: flex;
justify-content: space-evenly;
align-items: flex-end;
}
#rc .antenna_btns_container .btns .top_left {
border-radius: 35px 5px 5px 5px;
#rc .antenna_btns_container .btns_top {
align-items: flex-end;
}
#rc .antenna_btns_container .btns .top_middle {
height: 80px;
clip-path: polygon( 0 15px, 50% 0, 100% 15px, 100% 100%, 0 100% );
#rc .antenna_btns_container .btns_bottom {
align-items: flex-start;
}
/* Style for the button inside the div, this is so the button still works */
#rc .antenna_btns_container .btns .xmit_btn button {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: transparent;
}
#rc .antenna_btns_container .btns .top_left {
border-radius: 35px 7px 7px 7px;
}
#rc .antenna_btns_container .btns .xmit_btn .top_middle {
padding-top: 25px;
}
#rc .antenna_btns_container .btns .top_right {
border-radius: 5px 35px 5px 5px;
border-radius: 7px 35px 7px 7px;
}
#rc .antenna_btns_container .btns .bottom_left {
border-radius: 7px 7px 7px 35px;
}
#rc .antenna_btns_container .btns .xmit_btn .bottom_middle {
padding-bottom: 25px;
}
#rc .antenna_btns_container .btns .bottom_right {
border-radius: 7px 7px 35px 7px;
}
#rc .antenna_btns_container .breaker {
width: 100%;
width: 95%;
height: 5px;
margin: auto;
background-color: white;
}

22
nui/radar.html
View File

@@ -118,18 +118,28 @@
<p class="label">FRONT ANTENNA</p>
<div class="antenna_btns_container">
<div class="btns">
<div class="btns btns_top">
<button class="zone_btn top_left" id="frontOppBtn">OPP</button>
<button class="zone_btn top_middle" id="frontXmitBtn">XMIT</button>
<div class="xmit_btn xmit_top">
<div class="arrow arrow_top"></div>
<button class="top_middle">XMIT</button>
</div>
<button class="zone_btn top_right" id="frontSameBtn">SAME</button>
</div>
<div class="breaker"></div>
<div class="btns">
<button class="zone_btn" id="rearOppBtn">OPP</button>
<button class="zone_btn" id="rearXmitBtn">XMIT</button>
<button class="zone_btn" id="rearSameBtn">SAME</button>
<div class="btns btns_bottom">
<button class="zone_btn bottom_left" id="rearOppBtn">OPP</button>
<div class="xmit_btn xmit_bottom">
<div class="arrow arrow_bottom"></div>
<button class="bottom_middle">XMIT</button>
</div>
<button class="zone_btn bottom_right" id="rearSameBtn">SAME</button>
</div>
</div>
</div>