From 64df9b142d6c532687bdb1a05abfc66be87a633c Mon Sep 17 00:00:00 2001
From: PeekabooSteam <matthew.lindley001+github@gmail.com>
Date: Wed, 15 Mar 2023 15:47:11 +0000
Subject: [PATCH] First pass at re-organising the CSS.

---
 .../stylesheets/connectionstatuspanel.css     |  29 ++
 client/public/stylesheets/contextmenus.css    |  18 +-
 client/public/stylesheets/layout.css          | 263 +-----------------
 client/public/stylesheets/mouseinfopanel.css  |  83 ++++++
 client/public/stylesheets/olympus.css         |  58 ++--
 .../public/stylesheets/unitcontrolpanel.css   |  46 +++
 client/public/stylesheets/unitinfopanel.css   |  60 ++++
 client/public/themes/olympus/olympus.css      |   3 +
 client/views/connectionstatuspanel.ejs        |   2 +-
 client/views/mouseinfopanel.ejs               |   6 +-
 client/views/uikit.ejs                        |   4 +-
 client/views/unitcontrolpanel.ejs             |   4 +-
 client/views/unitinfopanel.ejs                |   2 +-
 13 files changed, 268 insertions(+), 310 deletions(-)
 create mode 100644 client/public/stylesheets/connectionstatuspanel.css
 create mode 100644 client/public/stylesheets/mouseinfopanel.css
 create mode 100644 client/public/stylesheets/unitcontrolpanel.css
 create mode 100644 client/public/stylesheets/unitinfopanel.css

diff --git a/client/public/stylesheets/connectionstatuspanel.css b/client/public/stylesheets/connectionstatuspanel.css
new file mode 100644
index 00000000..362657cf
--- /dev/null
+++ b/client/public/stylesheets/connectionstatuspanel.css
@@ -0,0 +1,29 @@
+#connection-status-panel {
+	bottom: 20px;
+	font-size:12px;
+	position: absolute;
+	right: 10px;
+	width: 160px;
+	z-index: 1000;
+}
+
+#connection-status-panel dt::before {
+	content: "No connection";
+}
+
+#connection-status-panel dd::after {
+	border-radius: 50%;
+	background: red;
+	content: " ";
+	height:12px;
+	width:12px;
+}
+
+
+#connection-status-panel[data-is-connected] dt::before {
+	content: "Connected";
+}
+
+#connection-status-panel[data-is-connected] dd::after {
+	background:var( --accent-green );
+}
\ No newline at end of file
diff --git a/client/public/stylesheets/contextmenus.css b/client/public/stylesheets/contextmenus.css
index 722a07ab..475f7e9a 100644
--- a/client/public/stylesheets/contextmenus.css
+++ b/client/public/stylesheets/contextmenus.css
@@ -1,10 +1,10 @@
 #map-contextmenu {
-    position: absolute;
     display: flex;
     flex-direction: column;
+    height: fit-content;
+    position: absolute;
     row-gap: 5px;
     width: 230px;
-    height: fit-content;
     z-index: 1000;
 }
 
@@ -22,9 +22,7 @@
     border-radius: 999px;
     width: fit-content;
     height: fit-content;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 3px;
+    padding: 3px 10px;
     padding-bottom: 3px;
     font-weight: 600;
     color: var(--nav-text);
@@ -36,10 +34,10 @@
 }
 
 #map-contextmenu>div:nth-child(2){
+    align-items: center;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
     padding-right: 0px;
 }
 
@@ -59,10 +57,10 @@
 }
 
 #map-contextmenu>div:nth-child(n+3){
+    align-items: center;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    align-items: center;
     row-gap: 5px;
 }
 
@@ -100,12 +98,12 @@
 }
 
 .unit-spawn-button {
+    border-radius: 0px;
     border: none;
     height: 48px;
-    width: 48px;
-    margin-top: -10px;
     margin-bottom: -10px;
-    border-radius: 0px;
+    margin-top: -10px;
+    width: 48px;
 }
 
 .unit-spawn-button:last-of-type {
diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css
index 0b5c1145..53a9863c 100644
--- a/client/public/stylesheets/layout.css
+++ b/client/public/stylesheets/layout.css
@@ -1,28 +1,5 @@
 
 /* Page style */
-* {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-
-html {
-    font-family: 'Open Sans', sans-serif;
-}
-
-body {
-	display:grid;
-	margin: 0;
-	padding: 0;
-}
-
-html,
-body {
-	height: 100%;
-	width: 100%;
-}
-
 #map-container {
 	height: 100%;
 	min-width: 820px;
@@ -48,56 +25,7 @@ body {
 
 
 
-
-#unit-control-panel {
-	height: fit-content;
-	left: 10px;
-	position: absolute;
-	top: 80px;
-	width: 250px;
-	z-index: 1000;
-}
-
-#unit-control-panel h4 {
-	margin-bottom:8px;
-	margin-top:20px;
-}
-
-body.feature-forceShowUnitControlPanel #unit-control-panel {
-	display:block !important;
-}
-
-#unit-control-panel #selected-units-container {
-	align-items: center;
-	border-radius: var( --border-radius-md );
-	display:flex;
-	flex-direction: column;
-	row-gap: 4px;
-}
-
-#unit-control-panel #selected-units-container button {
-	font-size: 12px;
-	padding:8px 0;
-	position: relative;
-	width:90%;
-}
-
-#unit-control-panel #selected-units-container button::before {
-	background-color: var( --accent-light-blue );
-	border-radius: var( --border-radius-sm );
-	content: attr( data-short-label );
-	padding:4px;
-	position: absolute;
-	translate:-40px -4px;
-}
-
-#unit-control-panel #selected-units-container button::after {
-	content: attr( data-callsign );
-}
-
-
-
-dl.data-grid {
+dl.ol-data-grid {
 	align-items: center;
 	display:flex;
 	flex-direction: row;
@@ -106,20 +34,20 @@ dl.data-grid {
 	row-gap: 4px;
 }
 
-dl.data-grid dt {
+dl.ol-data-grid dt {
 	width:60%;
 }
 
-dl.data-grid dd {
+dl.ol-data-grid dd {
 	width:40%;
 }
 
 
-dl.data-grid dt.icon {
+dl.ol-data-grid dt.icon {
 	text-indent: 10px;
 }
 
-dl.data-grid dt.icon::before {
+dl.ol-data-grid dt.icon::before {
 	content: url( /images/icons/speed.svg );
 	display:inline-block;
 	filter:invert(100%);
@@ -128,17 +56,17 @@ dl.data-grid dt.icon::before {
 }
 
 
-dl.data-grid dt.icon-speed::before {
+dl.ol-data-grid dt.icon-speed::before {
 	content: url( /images/icons/speed.svg );
 }
 
 
-dl.data-grid dt.icon-altitude::before {
+dl.ol-data-grid dt.icon-altitude::before {
 	content: url( /images/icons/altitude.svg );
 }
 
 
-dl.data-grid dd {
+dl.ol-data-grid dd {
 	display: flex;
 	justify-content: flex-end;
 	margin-left: auto;
@@ -171,183 +99,8 @@ dl.data-grid dd {
 }
 
 
-#unit-info-panel {
-	bottom: 20px;
-	font-size:12px;
-	position: absolute;
-	left: 10px;
-	width: fit-content;
-	z-index: 1000;
-}
 
 
-#unit-info-panel #unit-name {
-    line-height: 18px;
-	margin-bottom:10px;
-}
-
-#unit-info-panel #current-task {
-	border-radius: var( --border-radius-lg );
-	margin-top:15px;
-}
-
-#unit-info-panel #current-task::after {
-	content: attr( data-current-task );
-	display:block;
-}
-
-
-#unit-info-panel #loadout-data {
-	max-width: 250px;
-}
-
-#unit-info-panel #loadout-data .data-grid {
-	margin: 6px 0;
-}
-
-#unit-info-panel #loadout-data .data-grid dt:first-child {
-	text-indent: 5px;
-}
-
-#unit-info-panel #loadout-data .data-grid dt:first-child::before {
-	content: url( /images/icons/fuel.svg );
-	display:inline-block;
-	filter:invert(100%);
-	height:16px;
-	text-indent:5px;
-	translate:-10px 5%;
-	width:16px;
-}
-
-#unit-info-panel #loadout-fuel-level::after {
-	content: attr( data-fuel-level ) "%";
-}
-
-#unit-info-panel #loadout-container .loadout-item {
-	background-color: black;
-}
-
-#unit-info-panel #loadout-container .loadout-item::before {
-	content: attr( data-loadout-item ) ' \d7  ' attr( data-loadout-qty );
-}
-
-
-
-#connection-status-panel {
-	bottom: 20px;
-	font-size:12px;
-	position: absolute;
-	right: 10px;
-	width: 160px;
-	z-index: 1000;
-}
-
-#connection-status-panel dt::before {
-	content: "No connection";
-}
-
-#connection-status-panel dd::after {
-	border-radius: 50%;
-	background: red;
-	content: " ";
-	height:12px;
-	width:12px;
-}
-
-
-#connection-status-panel[data-is-connected] dt::before {
-	content: "Connected";
-}
-
-#connection-status-panel[data-is-connected] dd::after {
-	background:var( --accent-green );
-}
-
-
-#mouse-info-panel {
-	bottom: 60px;
-	display:flex;
-	flex-direction: column;
-	height: fit-content;
-	position: absolute;
-	right: 10px;
-	row-gap: 10px;
-	width: 160px;
-	z-index: 1000;
-}
-
-
-#mouse-info-panel > * {
-	background-color: var( --background-grey );
-	border-radius: var( --border-radius-sm );
-	padding:6px;
-}
-
-
-#mouse-info-panel dl {
-	margin-bottom:4px;
-	row-gap: 8px;
-}
-
-#mouse-info-panel dt {
-	height:20px;
-	width:40%;
-}
-
-#mouse-info-panel dt::after {
-	align-items: center;
-	background-color: white;
-	border-radius: var( --border-radius-sm );
-	color: var( --background-steel );
-	display:flex;
-	font-size:15.6px;
-	font-weight: bolder;
-	height:16px;
-	justify-content: center;
-	line-height: 16px;
-	padding:4px;
-	text-transform: uppercase;
-	width:16px;
-}
-
-#mouse-info-panel dt#ref-measure-position::after {
-	background-image: url( "/images/icons/ruler.svg" );
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	background-size:16px 16px;
-	content: " ";
-}
-
-
-#mouse-info-panel dt[data-label]::after {
-	content: attr( data-label );
-}
-
-#mouse-info-panel dt[data-coalition="blue"]::after {
-	background-color: var( --primary-blue );
-}
-
-#mouse-info-panel dt[data-coalition="red"]::after {
-	background-color: var( --primary-red );
-}
-
-
-#mouse-info-panel dt[data-tooltip]:hover::before {
-	background-color: var( --background-grey );
-	border-radius: 5px;
-	content: attr( data-tooltip );
-	display:flex;
-	flex-wrap: nowrap;
-	padding: 5px;
-	position: absolute;
-	translate: calc( -100% - 15px ) 0;
-	white-space: nowrap;
-}
-
-#mouse-info-panel dd {
-	width:60%;
-}
-
 
 .ol-dialog {
 	align-self: center;
diff --git a/client/public/stylesheets/mouseinfopanel.css b/client/public/stylesheets/mouseinfopanel.css
new file mode 100644
index 00000000..c571e514
--- /dev/null
+++ b/client/public/stylesheets/mouseinfopanel.css
@@ -0,0 +1,83 @@
+#mouse-info-panel {
+	bottom: 60px;
+	display:flex;
+	flex-direction: column;
+	height: fit-content;
+	position: absolute;
+	right: 10px;
+	row-gap: 10px;
+	width: 160px;
+	z-index: 1000;
+}
+
+
+#mouse-info-panel > * {
+	background-color: var( --background-grey );
+	border-radius: var( --border-radius-sm );
+	padding:6px;
+}
+
+
+#mouse-info-panel dl {
+	margin-bottom:4px;
+	row-gap: 8px;
+}
+
+#mouse-info-panel dt {
+	height:20px;
+	width:40%;
+}
+
+#mouse-info-panel dt::after {
+	align-items: center;
+	background-color: white;
+	border-radius: var( --border-radius-sm );
+	color: var( --background-steel );
+	display:flex;
+	font-size:15.6px;
+	font-weight: bolder;
+	height:16px;
+	justify-content: center;
+	line-height: 16px;
+	padding:4px;
+	text-transform: uppercase;
+	width:16px;
+}
+
+#mouse-info-panel dt#ref-measure-position::after {
+	background-image: url( "/images/icons/ruler.svg" );
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	background-size:16px 16px;
+	content: " ";
+}
+
+
+#mouse-info-panel dt[data-label]::after {
+	content: attr( data-label );
+}
+
+#mouse-info-panel dt[data-coalition="blue"]::after {
+	background-color: var( --primary-blue );
+}
+
+#mouse-info-panel dt[data-coalition="red"]::after {
+	background-color: var( --primary-red );
+}
+
+
+#mouse-info-panel dt[data-tooltip]:hover::before {
+	background-color: var( --background-grey );
+	border-radius: 5px;
+	content: attr( data-tooltip );
+	display:flex;
+	flex-wrap: nowrap;
+	padding: 5px;
+	position: absolute;
+	translate: calc( -100% - 15px ) 0;
+	white-space: nowrap;
+}
+
+#mouse-info-panel dd {
+	width:60%;
+}
\ No newline at end of file
diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index 45bb8864..fb6e64c5 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -1,38 +1,12 @@
 @import url("layout.css");
 @import url("airbase.css");
+@import url("connectionstatuspanel.css");
 @import url("contextmenus.css");
+@import url("mouseinfopanel.css");
 @import url("units.css");
+@import url("unitcontrolpanel.css");
+@import url("unitinfopanel.css");
 
-/* Variables definitions */
-:root {
-    --accent-green: #8bff63;
-    --accent-light-blue: #5ca7ff;
-    --background-grey: #3d4651;
-    --background-offwhite: #f2f2f3;
-    --background-steel: #202831;
-    --primary-blue: #247be2;
-    --primary-grey: #CFD9E8;
-    --primary-red: #ff5858;
-    --secondary-blue-outline: #082e44;
-    --secondary-dark-steel: #181e25;
-    --secondary-gunmetal-grey: #2f2f2f;
-    --secondary-light-grey: #797e83;
-    --secondary-neutral: #111111;
-    --secondary-red-outline: #262222;
-    --secondary-yellow: #ffd46893;
-    --nav-text: #ECECEC;
-
-    --ol-select-secondary: #545F6C;
-
-    --border-radius-xs: 2px;
-    --border-radius-sm: 5px;
-    --border-radius-md: 10px;
-    --border-radius-lg: 15px;
-
-    --font-weight-bolder: 600;
-
-
-}
 
 
 * {
@@ -42,6 +16,23 @@
 }
 
 
+html {
+    font-family: 'Open Sans', sans-serif;
+}
+
+body {
+	display:grid;
+	margin: 0;
+	padding: 0;
+}
+
+html,
+body {
+	height: 100%;
+	width: 100%;
+}
+
+
 a {
     text-decoration: none;
 }
@@ -51,11 +42,6 @@ a:hover {
 }
 
 
-html {
-    font-family: 'Open Sans', sans-serif;
-}
-
-
 button {
     background-color: var(--background-steel);
     border: 1px solid var(--background-steel);
@@ -453,7 +439,7 @@ nav.ol-panel> :last-child {
     filter: invert(100%);
 }
 
-.data-grid {
+.ol-data-grid {
     display: flex;
     flex-direction: column;
 }
diff --git a/client/public/stylesheets/unitcontrolpanel.css b/client/public/stylesheets/unitcontrolpanel.css
new file mode 100644
index 00000000..ddb5143d
--- /dev/null
+++ b/client/public/stylesheets/unitcontrolpanel.css
@@ -0,0 +1,46 @@
+body.feature-forceShowUnitControlPanel #unit-control-panel {
+	display:block !important;
+}
+
+
+#unit-control-panel {
+	height: fit-content;
+	left: 10px;
+	position: absolute;
+	top: 80px;
+	width: 250px;
+	z-index: 1000;
+}
+
+#unit-control-panel #selected-units-container {
+	align-items: center;
+	border-radius: var( --border-radius-md );
+	display:flex;
+	flex-direction: column;
+	row-gap: 4px;
+}
+
+#unit-control-panel #selected-units-container button {
+	font-size: 12px;
+	padding:8px 0;
+	position: relative;
+	width:90%;
+}
+
+#unit-control-panel #selected-units-container button::before {
+	background-color: var( --accent-light-blue );
+	border-radius: var( --border-radius-sm );
+	content: attr( data-short-label );
+	padding:4px;
+	position: absolute;
+	translate:-40px -4px;
+}
+
+#unit-control-panel #selected-units-container button::after {
+	content: attr( data-callsign );
+}
+
+#unit-control-panel h4 {
+	margin-bottom:8px;
+	margin-top:20px;
+}
\ No newline at end of file
diff --git a/client/public/stylesheets/unitinfopanel.css b/client/public/stylesheets/unitinfopanel.css
new file mode 100644
index 00000000..3c9be34b
--- /dev/null
+++ b/client/public/stylesheets/unitinfopanel.css
@@ -0,0 +1,60 @@
+
+#unit-info-panel {
+	bottom: 20px;
+	font-size:12px;
+	position: absolute;
+	left: 10px;
+	width: fit-content;
+	z-index: 1000;
+}
+
+
+#unit-info-panel #unit-name {
+    line-height: 18px;
+	margin-bottom:10px;
+}
+
+#unit-info-panel #current-task {
+	border-radius: var( --border-radius-lg );
+	margin-top:15px;
+}
+
+#unit-info-panel #current-task::after {
+	content: attr( data-current-task );
+	display:block;
+}
+
+
+#unit-info-panel #loadout-data {
+	max-width: 250px;
+}
+
+#unit-info-panel #loadout-data .ol-data-grid {
+	margin: 6px 0;
+}
+
+#unit-info-panel #loadout-data .ol-data-grid dt:first-child {
+	text-indent: 5px;
+}
+
+#unit-info-panel #loadout-data .ol-data-grid dt:first-child::before {
+	content: url( /images/icons/fuel.svg );
+	display:inline-block;
+	filter:invert(100%);
+	height:16px;
+	text-indent:5px;
+	translate:-10px 5%;
+	width:16px;
+}
+
+#unit-info-panel #loadout-fuel-level::after {
+	content: attr( data-fuel-level ) "%";
+}
+
+#unit-info-panel #loadout-container .loadout-item {
+	background-color: black;
+}
+
+#unit-info-panel #loadout-container .loadout-item::before {
+	content: attr( data-loadout-item ) ' \d7  ' attr( data-loadout-qty );
+}
\ No newline at end of file
diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css
index 766710c0..7e4986c3 100644
--- a/client/public/themes/olympus/olympus.css
+++ b/client/public/themes/olympus/olympus.css
@@ -32,6 +32,9 @@
 
     --nav-text : #ECECEC;
 
+    
+    --ol-select-secondary: #545F6C;
+
 
     /*** General border radii  **/
 
diff --git a/client/views/connectionstatuspanel.ejs b/client/views/connectionstatuspanel.ejs
index 81b7f8ba..b0c7df1b 100644
--- a/client/views/connectionstatuspanel.ejs
+++ b/client/views/connectionstatuspanel.ejs
@@ -1,5 +1,5 @@
 <div id="connection-status-panel" class="ol-panel">
-    <dl class="data-grid">
+    <dl class="ol-data-grid">
         <dt></dt>
         <dd></dd>
     </dl>
diff --git a/client/views/mouseinfopanel.ejs b/client/views/mouseinfopanel.ejs
index 8298bb2b..935e1694 100644
--- a/client/views/mouseinfopanel.ejs
+++ b/client/views/mouseinfopanel.ejs
@@ -1,14 +1,14 @@
 <div id="mouse-info-panel" class="ol-panel">
 
     <div>
-        <dl class="data-grid">
+        <dl class="ol-data-grid">
             <dt id="ref-measure-position" data-tooltip="CTRL-click on the map to activate the measuring tool."></dt>
             <dd id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
         </dl>
     </div>
 
     <div>
-        <dl class="data-grid">
+        <dl class="ol-data-grid">
             <dt id="ref-bullseye-2" data-label="BE" data-coalition="blue"></dt>
             <dd id="bullseye-2" class="br-info" data-bearing="---" data-distance="---" data-distance-units="nm"></dd>
             <dt id="ref-bullseye-1" data-label="BE" data-coalition="red"></dt>
@@ -17,7 +17,7 @@
     </div>
  
     <div>
-        <dl class="data-grid">
+        <dl class="ol-data-grid">
             <dt id="ref-mouse-position-latitude" data-label="N"></dt>
             <dd id="mouse-position-latitude" class="coordinates" data-dd="---" data-mm="---" data-ss="--" data-sss="--"></dd>
             <dt id="ref-mouse-position-longitude" data-label="E"></dt>
diff --git a/client/views/uikit.ejs b/client/views/uikit.ejs
index 3786e2ba..8cea83f6 100644
--- a/client/views/uikit.ejs
+++ b/client/views/uikit.ejs
@@ -993,7 +993,7 @@
 
                             <div id="airbase-contextmenu" class="ol-panel">
                                 <h3 id="airbase-name">Al Alhambra</h3>
-                                <dl id="airbase-properties" class="data-grid">
+                                <dl id="airbase-properties" class="ol-data-grid">
                                     <dt>Runway 1</dt>
                                     <dd>31 / 13</dd>
                                     <dt>Runway 2</dt>
@@ -1005,7 +1005,7 @@
                                 </dl>
                                 <hr />
                                 <h4>Parking available:</h4> 
-                                <dl id="airbase-parking" class="data-grid">
+                                <dl id="airbase-parking" class="ol-data-grid">
                                     <dt>Shelters</dt>
                                     <dd>2</dd>
                                     <dt>Open air</dt>
diff --git a/client/views/unitcontrolpanel.ejs b/client/views/unitcontrolpanel.ejs
index ca818dc4..7686b2b3 100644
--- a/client/views/unitcontrolpanel.ejs
+++ b/client/views/unitcontrolpanel.ejs
@@ -21,7 +21,7 @@
         <div id="flight-data">
             <h4>Flight controls</h4>
             <div class="slider-container flight-control-slider" id="airspeed-slider">
-                <dl class="data-grid">
+                <dl class="ol-data-grid">
                     <dt>Speed</dt>
                     <dd class="flight-control-value" id="value">451kts</dd>
                 </dl>
@@ -29,7 +29,7 @@
             </div>
 
             <div class="slider-container flight-control-slider" id="altitude-slider">
-                <dl class="data-grid">
+                <dl class="ol-data-grid">
                     <dt>Altitude</dt>
                     <dd class="flight-control-value" id="value">21,594ft</dd>
                 </dl>
diff --git a/client/views/unitinfopanel.ejs b/client/views/unitinfopanel.ejs
index 73c37155..0e4dd390 100644
--- a/client/views/unitinfopanel.ejs
+++ b/client/views/unitinfopanel.ejs
@@ -16,7 +16,7 @@
             
             <h4 id="loadout-label">Loadout</h4>
             
-            <dl class="data-grid">
+            <dl class="ol-data-grid">
                 <dt>Fuel</dt>
                 <dd id="loadout-fuel-level" data-fuel-level="69"></dd>
             </dl>