change console and stdin row styling to make them look better and more

functional

Author: Sturdyfool11

src/html_src/index.js

@@ -108,7 +108,7 @@ function addServerDropdown(serverName, inactive) {
       titleText +
       '</p>   <a href="#" class="button dropdownArrow"><svg clip-rule="evenodd" class="bloom" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">  <path d="m16.843 10.211c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291zm-7.564.289h5.446l-2.718 3.522z" fill-rule="nonzero"/>  </svg><svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m16.843 10.211c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291zm-7.564.289h5.446l-2.718 3.522z" fill-rule="nonzero"/></svg></a></div><div class="dropdownDrop" style: "display: none;"><div class="serverSTDOut ' +
       serverName +
-      'Out"></div><div class="serverSTDIn"><input class="STDInInput" placeholder="place input for STDIn here..."></input><a href="#" class="STDInSubmit">Submit</a></div></div></div>',
+      'Out"></div><div class="serverSTDIn"><div class="STDInRow"><input class="STDInInput" placeholder="place input for STDIn here..."></input><button type="button" class="STDInSubmit">Submit</button></div></div></div></div>',
   );
   var arrow = dropdown.find(".dropdownArrow").children().css({
     transform: "rotate(-180deg)",

src/html_src/style.css

@@ -260,55 +260,98 @@ h1 {
 }
 .serverSTDOut {
     position: relative;
-    top: 0px;
-    left: 0px;
     width: 100%;
     height: 40vh;
-    border-bottom-color: var(--border-muted);
-    border-bottom-width: 3px;
-    border-bottom-style: solid;
+    background-color: var(--bg-dark);
+    border: 2px solid var(--border);
+    border-radius: 8px 8px 0 0;
     overflow: auto;
+    box-sizing: border-box;
+    margin-bottom: 0;
+    z-index: 1;
+    display: block;
 }
 .serverSTDIn {
+    width: 100%;
+    background: var(--bg-dark);
+    margin-top: 0.5em;
+    border-radius: 0 0 8px 8px;
     position: relative;
-    top: 0px;
-    left: 0px;
+    z-index: 2;
+    overflow: visible;
+    box-sizing: border-box;
+    padding: 0;
+}
+.STDInRow {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 0.6em;
     width: 100%;
-    height: 3vh;
+    padding: 0.4em 0.6em;
+    box-sizing: border-box;
+    overflow: hidden;
+    min-width: 0;
 }
+
 .STDInInput {
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: 100%;
     background-color: var(--bg-dark);
     color: var(--text);
-    padding-left: 2vw;
-    position: relative;
-    left: 0px;
-    top: 0px;
-    width: 90%;
-    height: calc(100% - 6px);
-    font-family: "Roboto", sans-serif;
+    border: 1.5px solid var(--border-muted);
+    border-radius: 6px;
+    padding: 0.5em 1em;
+    font-family: "Fira Code", "Roboto", "monospace", sans-serif;
+    font-size: 1em;
+    outline: none;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+.STDInInput:focus {
+    border-color: var(--primary);
 }
+
 .STDInSubmit {
-    left: calc(90% + 9px);
+    flex: 0 0 auto;
+    width: 110px;
+    min-width: 80px;
+    max-width: 140px;
     display: flex;
     align-items: center;
-    /* Vertical alignment */
     justify-content: center;
-    /* Horizontal alignment */
     text-decoration: none;
-    /* Remove underline */
     background-color: var(--primary);
     color: var(--text);
-    width: calc(10% - 9px);
+    border: none;
+    border-radius: 6px;
+    padding: 0.5em 1.2em;
     font-family: "Roboto", sans-serif;
+    font-size: 1em;
+    cursor: pointer;
+    transition:
+        background-color 0.2s,
+        color 0.2s;
+    box-sizing: border-box;
+    overflow: hidden;
+    white-space: nowrap;
 }
-.STDInSubmit:hover {
+.STDInSubmit:hover,
+.STDInSubmit:focus {
     background-color: color-mix(in srgb, var(--primary) 80%, var(--bg) 20%);
+    color: var(--bg-dark);
+    outline: none;
 }
 .STDOutMessage {
     position: relative;
     padding-left: 2%;
     color: var(--text);
     font-family: "Roboto", sans-serif;
+    background-color: transparent;
+    padding-top: 2px;
+    padding-bottom: 2px;
 }
 .ConfigEditor {
     position: absolute;