UI Tweaks

2 files changed, 17 insertions, 6 deletions

diff --git a/public/index.php b/public/index.php
index 1fb9479..b5135e9 100644
--- a/public/index.php
+++ b/public/index.php
@@ -75,12 +75,11 @@ if (isset($_POST["code"]) && strlen($_POST["code"]) <= 16383) {
     <p>Powered by Eclipse Temurin</p>
     <form method="POST">
         <textarea maxlength="16383" id="editor" name="code" rows="20"><?= htmlentities($code ?? $defaultCode) ?></textarea>
-        <br>
-        <button type="submit">&#9654;&nbsp;Compile &amp; run</button>
+        <div id="toolbar">
+            <button type="submit">&#9654;&nbsp;Compile &amp; run</button>
+        </div>
     </form>
-    <div id="output" style="display: none;">
-        
-    </div>
+    <div id="output" style="display: none;"></div>
 
     <script>
         $(function() {
@@ -93,7 +92,7 @@ if (isset($_POST["code"]) && strlen($_POST["code"]) <= 16383) {
                 smartIndent: true,
                 indentUnit: 4
             });
-            editor.setSize(900, 500);
+            editor.setSize(898, 500);
 
             $("form").on("submit", function(e) {
                 e.preventDefault();
diff --git a/public/site.css b/public/site.css
index b6178fd..8599a93 100644
--- a/public/site.css
+++ b/public/site.css
@@ -25,6 +25,18 @@ pre {
        -moz-box-sizing: border-box;
             box-sizing: border-box;
 }
+#toolbar {
+    border: 1px solid #ccc;
+    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff));
+    background: -webkit-linear-gradient(#eee, #fff);
+    background: -moz-linear-gradient(#eee, #fff);
+    background: -o-linear-gradient(#eee, #fff);
+    background: linear-gradient(#eee, #fff);
+    border-top: none;
+}
+#toolbar button {
+    margin: -1px 0 -1px -1px;
+}
 button {
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
     background: -webkit-linear-gradient(#fff, #eee);