Refactor launcher profiles and port automation

app/assets/css/launcher.css

@@ -3283,8 +3283,10 @@ input:checked + .toggleSwitchSlider:before {
 
 /* Maintains maximum width on the status bar. */
 #server_status_wrapper {
+    position: relative;
     display: inline-flex;
-    width: 180px;
+    align-items: center;
+    width: 240px;
 }
 
 /* Span which displays the player count of the selected server. */
@@ -3297,6 +3299,61 @@ input:checked + .toggleSwitchSlider:before {
     white-space: nowrap;
 }
 
+#player_count[data-tone="success"] {
+    color: #8ce6a4;
+    text-shadow: 0px 0px 20px rgba(140, 230, 164, 0.6);
+}
+
+#player_count[data-tone="error"] {
+    color: #ff8f8f;
+    text-shadow: 0px 0px 20px rgba(255, 143, 143, 0.6);
+}
+
+#player_count[data-tone="info"] {
+    color: #f0d28a;
+    text-shadow: 0px 0px 20px rgba(240, 210, 138, 0.45);
+}
+
+#portStatusTooltip {
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    width: 260px;
+    min-height: 56px;
+    background-color: rgba(0, 0, 0, 0.82);
+    color: #fff;
+    border-radius: 4px;
+    padding: 10px 12px;
+    z-index: 1;
+    font-family: 'Pretendard Medium';
+    font-size: 13px;
+    line-height: 1.5;
+    transition: visibility 0s linear 0.25s, opacity 0.25s ease;
+    bottom: calc(100% + 15px);
+    left: 50%;
+    transform: translateX(-50%);
+    box-shadow: 0px 0px 20px rgb(0, 0, 0);
+    cursor: default;
+    white-space: normal;
+}
+
+#portStatusTooltip:after {
+    content: " ";
+    position: absolute;
+    left: 50%;
+    top: 100%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: rgba(0, 0, 0, 0.82) transparent transparent transparent;
+}
+
+#server_status_wrapper:hover #portStatusTooltip {
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 0s;
+}
+
 /* Wrapper container for the mojang status bar. */
 #mojangStatusWrapper {
     position: relative;
@@ -4400,6 +4457,12 @@ input:checked + .toggleSwitchSlider:before {
     gap: 8px;
 }
 
+.launcherCardContent {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
 .launcherFormGrid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -4444,6 +4507,12 @@ input:checked + .toggleSwitchSlider:before {
     font: inherit;
 }
 
+.launcherFieldHint {
+    font-size: 13px;
+    line-height: 1.5;
+    color: rgba(255, 255, 255, 0.6);
+}
+
 .launcherCheckboxRow {
     display: inline-flex;
     align-items: center;