Main antenna buttons added

nui/radar.css

@@ -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;
+        }
+            #rc .antenna_btns_container .btns_top {
                 align-items: flex-end;
             }
-            #rc .antenna_btns_container .btns .top_left {
+
-                border-radius: 35px 5px 5px 5px;
+            #rc .antenna_btns_container .btns_bottom {
+                align-items: flex-start;
             }
 
-            #rc .antenna_btns_container .btns .top_middle {
+            /* Style for the button inside the div, this is so the button still works */
-                height: 80px;
+            #rc .antenna_btns_container .btns .xmit_btn button {
-                clip-path: polygon( 0 15px, 50% 0, 100% 15px, 100% 100%, 0 100% );
+                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; 
         }

nui/radar.html

@@ -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">
+				<div class="btns btns_bottom">
-					<button class="zone_btn" id="rearOppBtn">OPP</button>
+					<button class="zone_btn bottom_left" id="rearOppBtn">OPP</button>
-					<button class="zone_btn" id="rearXmitBtn">XMIT</button>
+
-					<button class="zone_btn" id="rearSameBtn">SAME</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>