redesign log parser upload page

This makes the instructions much more clear and prominent, so it should be more intuitive for players. The previous design often confused users because they saw the big textbox and ignored the little instructions above it.

1 files changed, 17 insertions, 93 deletions

diff --git a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
index 25e874ac..482fc780 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css
@@ -1,14 +1,6 @@
 /*********
 ** Main layout
 *********/
-input[type="button"] {
-    font-size: 20px;
-    border-radius: 5px;
-    outline: none;
-    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .2);
-    cursor: pointer;
-}
-
 caption {
     text-align: left;
     padding-top: 2px;
@@ -20,15 +12,6 @@ caption {
     font-family: monospace;
 }
 
-input#upload-button {
-    background: #ccf;
-    border: 1px solid #000088;
-}
-
-input#upload-button {
-    background: #eef;
-}
-
 table caption {
     font-weight: bold;
 }
@@ -262,88 +245,19 @@ table#metadata, table#mods {
 
 
 /*********
-** Upload popup
+** Upload form
 *********/
-#upload-area .popup,
-#upload-area #uploader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, .33);
-    z-index: 2;
-    display: none;
-    padding: 5px;
-}
-
-#upload-area #uploader:after {
-    content: attr(data-text);
-    display: block;
-    width: 100px;
-    height: 24px;
-    line-height: 25px;
-    border: 1px solid #000;
-    background: #fff;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -12px -50px 0 0;
-    font-size: 18px;
-    font-weight: bold;
-    text-align: center;
-    border-radius: 5px;
-}
-
-#upload-area .popup h1 {
-    position: absolute;
-    top: 10%;
-    left: 50%;
-    margin-left: -150px;
-    text-align: center;
-    width: 300px;
-    border: 1px solid #008;
-    border-radius: 5px;
-    background: #fff;
-    font-family: sans-serif;
-    font-size: 40px;
-    margin-top: -25px;
-    z-index: 10;
-    border-bottom: 0;
-}
-
-#upload-area .frame {
-    margin: auto;
-    margin-top: 25px;
-    padding: 2em;
-    position: absolute;
-    top: 10%;
-    left: 10%;
-    right: 10%;
-    bottom: 10%;
-    padding-bottom: 30px;
-    background: #FFF;
-    border-radius: 5px;
-    border: 1px solid #008;
-}
-
-#upload-area #cancel {
-    border: 1px solid #880000;
-    background-color: #fcc;
+#os-list {
+    list-style: none;
 }
 
-#upload-area #submit {
-    border: 1px solid #008800;
-    background-color: #cfc;
-}
-
-#upload-area #submit:hover {
-    background-color: #efe;
+div[data-os] {
+    display: none;
 }
 
-#upload-area #input {
+#input {
     width: 100%;
-    height: 30em;
+    height: 20em;
     max-height: 70%;
     margin: auto;
     box-sizing: border-box;
@@ -352,3 +266,13 @@ table#metadata, table#mods {
     outline: none;
     box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 192, .2);
 }
+
+#submit {
+    font-size: 1.5em;
+    border-radius: 5px;
+    outline: none;
+    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .2);
+    cursor: pointer;
+    border: 1px solid #008800;
+    background-color: #cfc;
+}