Improve styling

booky10 · May 12, 2024 · cf05846 · cf05846
1 parent 431ab35
commit cf05846
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 52 deletions.
diff --git a/web/src/main/resources/public/index.html b/web/src/main/resources/public/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <link href="style.css?v=5" rel="stylesheet" type="text/css"/>
+    <link href="style.css?v=9" rel="stylesheet" type="text/css"/>
     <script defer src="script.js?v=6" type="text/javascript"></script>
 
-    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta charset="UTF-8">
 
@@ -30,52 +30,55 @@
         </span>
     </header>
     <main class="flex flex-vert" style="flex-grow: 1;">
-        <div>
+        <div style="">
             <label>
             <textarea autocomplete="off" autocorrect="off" autofocus id="input" placeholder="Insert Stacktrace here"
-                      rows="30" spellcheck="false"></textarea>
+                      rows="30" spellcheck="false" class="border-box"></textarea>
             </label>
         </div>
 
-        <div>
-            <label>
-                <input autocomplete="off" autocorrect="off" id="urlinput"
-                       placeholder="Insert Log URL here (WARNING: WILL REPLACE TEXT INPUT)"
-                       spellcheck="false" style="width: 100%; max-width: 35em;">
-            </label>
-        </div>
-
-        <label class="flex">
-            <span>Mappings:</span>
-            <select id="mappings">
-                <option value="yarn">Yarn</option>
-                <option value="quilt">Quilt</option>
-                <option value="mojang">Mojang</option>
-            </select>
-        </label>
-        <div class="flex flex-long">
-            <label class="flex">
-                <span>Version:</span>
-                <select id="version">
-                    <option value="-1">Loading...</option>
-                </select>
-            </label>
-            <label>
-                <input checked id="stableversions" onclick="updateVersions()" type="checkbox">
-                <span>Only stable versions</span>
-            </label>
-        </div>
-        <label class="flex">
-            <span>Environment:</span>
-            <select id="environment">
-                <option value="client">Client</option>
-                <option value="server">Server</option>
-            </select>
-        </label>
+        <div class="flex flex-vert" style="align-items: center; margin-top: 0.5em;">
+            <div class="flex flex-vert">
+                <div>
+                    <label>
+                        <input autocomplete="off" autocorrect="off" id="urlinput"
+                               placeholder="Insert Log URL here (WARNING: WILL REPLACE TEXT INPUT)"
+                               spellcheck="false">
+                    </label>
+                </div>
+                <label class="flex">
+                    <span>Mappings:</span>
+                    <select id="mappings">
+                        <option value="mojang">Mojang</option>
+                        <option value="yarn">Yarn</option>
+                        <option value="quilt">Quilt</option>
+                    </select>
+                </label>
+                <div class="flex flex-long">
+                    <label class="flex">
+                        <span>Version:</span>
+                        <select id="version" style="max-width: 10em;">
+                            <option value="-1">Loading...</option>
+                        </select>
+                    </label>
+                    <label>
+                        <input checked id="stableversions" onclick="updateVersions()" type="checkbox">
+                        <span>Only stable versions</span>
+                    </label>
+                </div>
+                <label class="flex">
+                    <span>Environment:</span>
+                    <select id="environment">
+                        <option value="client">Client</option>
+                        <option value="server">Server</option>
+                    </select>
+                </label>
 
-        <div class="flex">
-            <button id="deobfuscate">Deobfuscate</button>
-            <button id="copy">Copy</button>
+                <div class="flex" style="justify-content: space-around; margin-top: 1em;">
+                    <button class="big-btn" id="deobfuscate">Deobfuscate</button>
+                    <button class="big-btn" id="copy">Copy</button>
+                </div>
+            </div>
         </div>
 
         <div class="flex flex-vert" style="margin-top: 1em;">

diff --git a/web/src/main/resources/public/style.css b/web/src/main/resources/public/style.css
@@ -2,46 +2,70 @@ html {
     background-color: #161819;
     color: white;
     margin: 1em;
+    color-scheme: dark !important;
+    font-family: 'Liberation Sans', 'Open Sans', 'Arial', 'Verdana', 'Helvetica', 'sans-serif';
 }
 
 .flex {
     display: flex;
     gap: 0.42em;
+    align-items: stretch;
 }
 
 .flex-vert {
     flex-direction: column;
 }
 
 .flex-root {
-    min-height: calc(100vh - 2.8em);
+    min-height: 95vh;
     align-items: stretch;
 }
 
+.big-btn {
+    padding: 0.75em;
+    font-weight: bold;
+    font-size: 1.125em;
+}
+
+.border-box {
+    /* https://stackoverflow.com/a/39068185 */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
 #input {
-    background-color: #161819;
-    color: white;
     width: 100%;
 
-    border: 1px solid white;
-    border-radius: 5px;
-    border-width: 2px;
-
 	white-space: pre;
 	overflow-wrap: normal;
 	overflow-x: auto;
+	resize: none;
 }
 
 header.flex {
     align-items: center;
 }
 
+footer {
+    margin-top: 3em;
+}
+
 footer.flex {
     justify-content: center;
 }
 
+#urlinput {
+    width: 30em;
+    max-width: 35em;
+}
+
 @media screen and (max-width: 518px) {
-  .flex-long {
-    flex-direction: column;
-  }
+    .flex-long {
+        flex-direction: column;
+    }
+
+    #urlinput {
+        width: 25em;
+    }
 }