Node.js transition is completed!

client/public/stylesheets/elements.css

@@ -0,0 +1,14 @@
+.olympus-element-1 {
+    background-color: #247be2;
+    height: 28;
+    border-radius: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 14px;
+}
+
+.bottom-separator {
+    border-bottom: 1px solid gray;
+}

client/public/stylesheets/layout.css

@@ -55,31 +55,39 @@ body {
 	padding-right: 10px;
 }
 
-#unit-control-panel {
+#unit-control-buttons {
 	position: absolute;
-	left: 50%;
-	margin-left: -60px;
-	height: 30px;
-	width: 120px;
 	top: 10px;
+	height: fit-content;
+	width: fit-content;
+	right: 10px;
+	z-index: 1000;
+}
+
+#unit-control-panel {
+	display: none;
+	position: absolute;
+	top: 10px;
+	height: fit-content;
+	width: 250px;
+	right: 10px;
 	z-index: 1000;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding-left: 10px;
-	padding-right: 10px;
 }
 
 #connection-status-panel {
 	position: absolute;
 	height: 30px;
 	width: 140px;
-	top: 10px;
+	bottom: 10px;
 	right: 10px;
 	z-index: 1000;
 }
 
-@media only screen and (max-width: 1440px) {
+@media only screen and (max-width: 1000px) {
+	#unit-control-buttons {
+		top: 50px;
+	}
+
 	#unit-control-panel {
 		top: 50px;
 	}

client/public/stylesheets/selectionscroll.css

@@ -1,25 +1,91 @@
 .olympus-selection-scroll-container {
-    margin: 0 auto;
     position: fixed;
-    z-index: 1000;
-    width: 220px;
-    height: 220px;
-    overflow: visible;
-    overflow-y: scroll;
     background-color: var(--background-color-dark);
-    opacity: 0.8;
+    font-size: 12px;
+    transition: bottom 0.2s;
+    border-radius: 15px;
+    box-shadow: 0px 2px 5px #000A;
+    width: 180px;
+    height: fit-content;
+    z-index: 1000;
+    max-height: 400px;
+    padding: 10px;
 }
 
+.olympus-selection-scroll {
+    overflow-y: auto;
+    max-height: calc(400px - 60px);
+}
+
+.olympus-selection-scroll::-webkit-scrollbar {
+    width: 10px;
+}
+  
+.olympus-selection-scroll::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 100px;
+}
+
+.olympus-selection-scroll::-webkit-scrollbar-thumb {
+    background-color: white;
+    border-radius: 100px;
+    opacity: 0.8;
+    margin-top: 10px;
+}
+  
 .olympus-selection-scroll-element {
     margin: 2px;
     color: white;
-    text-shadow: 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
     cursor: pointer;
-    font-size: 12px;
+    font-size: 14px;
     opacity: 1;
-    font-family: "Lucida Console", "Courier New", monospace !important;
+    border-radius: 5px;
+    margin: 5px;
+    padding: 5px;
+    padding-left: 15px;
 }
 
 .olympus-selection-scroll-element:hover {
     background-color: var(--highlight-color);
+}
+
+.olympus-selection-scroll-container label {
+    width: 0;
+    height: 0;
+}
+
+.olympus-selection-scroll-container input {
+    width: 0;
+    height: 0;
+}
+
+.olympus-selection-scroll-switch {
+    position: relative;
+    display: inline-block;
+    left: calc(50% - 10px); 
+    width: 60px;
+    height: 34px;
+    background-color: var(--active-coalition-color);
+    border-radius: 999px;
+    cursor: pointer;
+    margin-left: -30px;
+}
+
+.olympus-selection-scroll-switch:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: 0.2s;
+    transition: 0.2s;
+    border-radius: 999px;
+}
+
+input:checked+.olympus-selection-scroll-switch:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
 }

client/public/stylesheets/style.css

@@ -39,6 +39,10 @@ html {
 	font-family: 'Open Sans', sans-serif;
 }
 
+.leaflet-container.crosshair-cursor-enabled {
+    cursor:crosshair;
+}
+
 .rectangular-container {
 	padding: 0.5em;
 	background-color: gray;

client/public/stylesheets/unitcontrolpanel.css

@@ -1,4 +1,41 @@
-#unit-control-panel .olympus-button {
+#unit-control-buttons {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    padding: 10px;
+    border-radius: 999px;
+}
+
+#unit-control-buttons>div {
     filter: invert(100%);
     opacity: 0.8;
+}
+
+#unit-control-panel {
+	display: flex;
+    flex-wrap: wrap;
+	justify-content: space-between;
+	align-content: flex-start;
+    row-gap: 5px;
+	padding-left: 30px;
+    padding-right: 30px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+/* Common */
+#unit-info-panel>div {
+    height: 100%;
+    width: 100%;
+}
+
+#unit-control-panel .rounded-container {
+    width: 100%; 
+}
+
+#unit-control-panel #title-label {
+    color: white;
+    font-size: 14px;
+    width: 100%;
+    font-weight: 600;
 }

client/public/stylesheets/unitinfopanel.css

@@ -51,7 +51,7 @@
 }
 
 /* General section */
-#general #name {
+#general #unit-name {
     color: white;
     font-size: 18px;
     width: 100%;

client/public/stylesheets/unitmarker.css

@@ -21,26 +21,36 @@
     align-items: center;
 }
 
-
-
 .unit-marker-selected {
-    animation-name: flash;
-    animation-duration: 0.3s;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-    animation-timing-function: linear;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
 }
 
-@keyframes flash {
-    from {
-        filter: brightness(100%);
-    }
-
-    to {
-        filter: brightness(130%);
-    }
+#ring {
+    top: 0px;
+    position: absolute;
+    display: inline-block;
+    -webkit-mask: radial-gradient(transparent 60%, #000 61%);
+    mask: radial-gradient(transparent 60%, #000 61%);
 }
 
+#background {
+    top: 0px;
+    position: absolute;
+    display: inline-block;
+    opacity: 0.2;
+}
+
+.blue.unit-marker-selected {
+    background-color: var(--blue-coalition-color);
+}
+
+.red.unit-marker-selected {
+    background-color: var(--red-coalition-color);
+}
+
+
 .unit-marker-hovered {
     filter: brightness(130%);
 }