diff --git a/client/public/stylesheets/panels/unitcontrol.css b/client/public/stylesheets/panels/unitcontrol.css
index 902622e6..7c7917a4 100644
--- a/client/public/stylesheets/panels/unitcontrol.css
+++ b/client/public/stylesheets/panels/unitcontrol.css
@@ -264,41 +264,33 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
content: "GS";
}
-#unit-control-panel .switch-control .ol-switch {
+.switch-control .ol-switch {
height: 23px;
width: 40px;
}
-#unit-control-panel .switch-control .ol-switch[data-value="true"]>.ol-switch-fill::before {
- content: "YES";
-}
-#unit-control-panel .switch-control .ol-switch[data-value="false"]>.ol-switch-fill::before {
- content: "NO";
-}
-
-
-#unit-control-panel .ol-slider-value {
+.ol-slider-value {
color: var(--accent-light-blue);
cursor: pointer;
font-size: 14px;
font-weight: bold;
}
-#unit-control-panel .switch-control {
+.switch-control {
align-items: center;
display: flex;
width: 100%;
justify-content: space-between;
}
-#unit-control-panel .switch-control h4 {
+.switch-control h4 {
margin: 0px;
display: flex;
align-items: center;
}
-#unit-control-panel .switch-control h4 img {
+.switch-control h4 img {
height: 15px;
margin-left: 10px;
cursor: pointer;
@@ -316,6 +308,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
#advanced-settings-div > button {
background-color: var(--background-grey);
+ box-shadow: 0px 2px 5px #000A;
font-size:13px;
height: 40px;
padding:0 20px;
diff --git a/client/public/stylesheets/style/style.css b/client/public/stylesheets/style/style.css
index 1bd3c351..c9269623 100644
--- a/client/public/stylesheets/style/style.css
+++ b/client/public/stylesheets/style/style.css
@@ -232,7 +232,6 @@ form {
.ol-select>.ol-select-options>div {
background-color: var(--background-grey);
- box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
display: flex;
justify-content: left;
padding: 2px 15px;
@@ -1496,15 +1495,19 @@ input[type=number]::-webkit-outer-spin-button {
}
.switch-control.coalition [data-value="undefined"] .ol-switch-fill {
- background-color: var(--ol-switch-undefined);
+ background-color: var(--primary-neutral);
}
-.switch-control.coalition [data-value="true"]>.ol-switch-fill::before {
- content: "BLUE" !important;
+.switch-control.coalition [data-value="true"] .ol-switch-fill::before {
+ content: "BLUE";
}
-.switch-control.coalition [data-value="false"]>.ol-switch-fill::before {
- content: "RED" !important;
+.switch-control.coalition [data-value="false"] .ol-switch-fill::before {
+ content: "RED";
+}
+
+.switch-control.no-label [data-value] .ol-switch-fill::before {
+ content:"";
}
.ol-context-menu>ul {
diff --git a/client/src/contextmenus/mapcontextmenu.ts b/client/src/contextmenus/mapcontextmenu.ts
index 866e2543..d7619c99 100644
--- a/client/src/contextmenus/mapcontextmenu.ts
+++ b/client/src/contextmenus/mapcontextmenu.ts
@@ -30,7 +30,7 @@ export class MapContextMenu extends ContextMenu {
/* Create the coalition switch */
this.#coalitionSwitch = new Switch("coalition-switch", (value: boolean) => this.#onSwitchClick(value));
- this.#coalitionSwitch.setValue(false);
+ this.#coalitionSwitch.setValue(true);
this.#coalitionSwitch.getContainer()?.addEventListener("contextmenu", (e) => this.#onSwitchRightClick());
/* Create the spawn menus for the different unit types */
@@ -128,9 +128,9 @@ export class MapContextMenu extends ContextMenu {
this.getContainer()?.querySelectorAll('[data-coalition]').forEach((element: any) => { element.setAttribute("data-coalition", getApp().getActiveCoalition()) });
if (getApp().getActiveCoalition() == "blue")
- this.#coalitionSwitch.setValue(false);
- else if (getApp().getActiveCoalition() == "red")
this.#coalitionSwitch.setValue(true);
+ else if (getApp().getActiveCoalition() == "red")
+ this.#coalitionSwitch.setValue(false);
else
this.#coalitionSwitch.setValue(undefined);
@@ -232,10 +232,10 @@ export class MapContextMenu extends ContextMenu {
/** Callback called when the user left clicks on the coalition switch
*
- * @param value Switch position (false: "blue", true: "red")
+ * @param value Switch position (true: "blue", false: "red")
*/
#onSwitchClick(value: boolean) {
- value ? getApp().setActiveCoalition("red") : getApp().setActiveCoalition("blue");
+ value ? getApp().setActiveCoalition("blue") : getApp().setActiveCoalition("red");
this.getContainer()?.querySelectorAll('[data-coalition]').forEach((element: any) => { element.setAttribute("data-coalition", getApp().getActiveCoalition()) });
this.#aircraftSpawnMenu.setCountries();
this.#helicopterSpawnMenu.setCountries();
diff --git a/client/views/contextmenus/map.ejs b/client/views/contextmenus/map.ejs
index 3e37ba57..aecd99c6 100644
--- a/client/views/contextmenus/map.ejs
+++ b/client/views/contextmenus/map.ejs
@@ -1,7 +1,7 @@