Update site style (#4)

* Give the site a makeover

* Remove comments

* Fix phantom scrollbar

* Fix tooltip wrapping

* Fix tooltip overlap

* Nicer drag-n-drop

css/file.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="file-binary" horiz-adv-x="768" d="M0 0v896h576l192-192v-704h-768zM704 640l-192 192h-448v-768h640v576zM320 448h-192v256h192v-256zM256 640h-64v-128h64v128zM256 192h64v-64h-192v64h64v128h-64v64h128v-192zM512 512h64v-64h-192v64h64v128h-64v64h128v-192zM576 128h-192v256h192v-256zM512 320h-64v-128h64v128z" />
+</font></defs></svg>

css/style.css

@@ -1,32 +1,67 @@
+@import url('https://fonts.googleapis.com/css?family=PT+Sans');
+@font-face {
+  font-family: 'file';
+  src:  url('file.eot?abyff3');
+  src:  url('file.eot?abyff3#iefix') format('embedded-opentype'),
+    url('file.ttf?abyff3') format('truetype'),
+    url('file.woff?abyff3') format('woff'),
+    url('file.svg?abyff3#file') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
 .icons {
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
+    margin: 0 auto;
+    text-align: center;
+    justify-content: center;
+}
+
+.gameicon,
+.patchContainer {
+    border-radius: 2px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+    color: inherit;
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+    background: #fff;
 }
 
 .gameicon {
-    border-radius:18px;
-    box-shadow:0px 0px 10px 2px #888888;
-    float: left;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    text-align: center;
-    color: inherit;
     text-decoration: none;
-    margin: 5px;
+    margin: 15px;
-    width: 150px;
+    width: 144px;
+    padding: 10px;
+    justify-content: center;
 }
 
-.gameicon:hover {
+.gameicon:hover,
-    box-shadow:0px 0px 10px 1px #000000;
+.dragover {
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 }
 
 .gameicon img {
-    margin: 10px;
+    margin-bottom: 10px;
-    border-radius: 18px;
+    border-radius: 2px;
-    width:128px;
+    width: 128px;
     height: 128px;
+    box-shadow: 0 2px 1px rgba(0, 0, 0, .24), 0 0px 1px rgba(0, 0, 0, 0.48);
+    align-self: center;
+    margin-top: 5px;
+}
+
+.gameicon>div>div {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.gameicon>div {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .tagline {
@@ -55,52 +90,189 @@
 
 .patchContainer {
     background-color: white;
-}
+    padding: 20px;
-
+    max-width: 650px;
-.dragover {
+    margin: 0 auto 2em;
-    background-color: rgb(200,200,200);
+    position: relative;
 }
 
 .tooltip {
     visibility: hidden;
     font-size: 14px;
-    margin-left: 6px;
+    margin-left: 8px;
-    padding: 5px;
+    padding: 8px;
-    border: 1px solid black;
     border-radius: 4px;
+    position: relative;
+    background: grey;
+    white-space: nowrap;
+    cursor: pointer;
 }
 
-.tooltip:hover, .tooltip:focus, .tooltip:active{
+.tooltip:hover,
+.tooltip:focus,
+.tooltip:active {
     visibility: visible;
+    color: white;
+    border: none;
+    margin-top: 0px;
+    position: absolute;
+    padding: 3px 16px;
+    white-space: normal;
+    max-width: 300px;
+    z-index: 11;
 }
 
 .tooltip:before {
     visibility: visible;
-    content: ' ? ';
+    content: '?';
-    font-size: 20px;
+    font-size: 18px;
-    margin-right: 10px;
+    margin-right: 8px;
-    background: #eee;
+    background: gray;
-    border-radius: 10px;
+    border-radius: 50%;
+    padding: 2px 9px;
+    margin-left: -8px;
+    color: white;
+    cursor: pointer;
+    z-index: 10;
 }
 
-.tooltip:hover:before, .tooltip:focus:before, .tooltip:active:before{
+.tooltip:hover:before,
-    background: inherit;
+.tooltip:focus:before,
+.tooltip:active:before {
+    color: black;
+    display: none;
 }
 
 body {
     margin: 40px auto;
-    max-width: 650px;
+    max-width: 900px;
     line-height: 1.6;
     font-size: 18px;
-    color: #444;
+    color: #000;
     padding: 0 10px;
+    background: #e2e1e0;
+    font-family: 'PT Sans', 'Source Sans Pro', Helvetica, Arial, sans-serif;
 }
 
-h1,h2,h3{
+h1,
+h2,
+h3 {
     line-height: 1.2;
 }
 
-h1 a{
+h1 a {
     color: inherit;
     text-decoration: inherit;
+}
+
+button {
+    transition-duration: 0.2s;
+    transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1);
+    position: relative;
+    padding: 0 16px;
+    height: 36px;
+    border: none;
+    border-radius: 2px;
+    outline: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    line-height: 2.25rem;
+    color: rgba(0, 0, 0, 0.73);
+    transition-property: box-shadow, background;
+    background-color: #40b31a;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25), 0px 0px 2px rgba(0, 0, 0, 0.125);
+    color: white;
+    cursor: pointer;
+}
+
+button:disabled {
+    background-color: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.38);
+    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+    cursor: default;
+}
+
+button:hover:enabled {
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 0px 4px rgba(0, 0, 0, 0.125);
+    background-color: #5dbe3c;
+}
+
+.patches {
+    margin: 1em auto;
+}
+
+input[type=checkbox],
+input[type=radio] {
+    vertical-align: middle;
+    position: relative;
+    bottom: 1px;
+}
+
+input[type=radio] {
+    bottom: 2px;
+}
+
+.patches label {
+    margin-left: 4px;
+}
+
+.dragover>* {
+    filter: blur(5px);
+}
+
+.dragover::before {
+    content: '';
+    display: block;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    z-index: 10;
+    outline: dashed 10px;
+}
+
+.dragover::after {
+    content: "\e900";
+    font-family: 'file' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    
+    display: block;
+    height: auto;
+    position: absolute;
+    top: calc(50% - 3rem);
+    left: 0;
+    width: 100%;
+    text-align: center;
+    z-index: 11;
+    font-size: 8rem;
+}
+
+.tooltip:not(:hover) {
+    font-size: 0px;
+    padding: 0;
+    margin-left: 16px;
+}
+
+.tooltip {
+    visibility: hidden;
+    font-size: 14px;
+    margin-left: 8px;
+    padding: 8px;
+    border-radius: 4px;
+    position: relative;
+    background: gray;
+    white-space: nowrap;
+    cursor: pointer;
+    display: inline-block;
 }

js/dllpatcher.js

@@ -17,7 +17,7 @@ StandardPatch.prototype.createUI = function(parent) {
     var patch = $('<div>', {'class' : 'patch'});
     patch.append('<input type="checkbox" id="' + id + '"><label for="' + id + '">' + label + '</label>');
     if(this.tooltip) {
-        patch.append('<span class="tooltip">' + this.tooltip + '</div>');
+        patch.append('<div class="tooltip">' + this.tooltip + '</div>');
     }
     parent.append(patch);
 };
@@ -97,7 +97,7 @@ UnionPatch.prototype.createUI = function(parent) {
         var patchDiv = $('<div>', {'class' : 'patch'});
         patchDiv.append('<input type="radio" id="' + id + '" name="' + this.shortname + '"><label for="' + id + '">' + label + '</label>');
         if(patch.tooltip) {
-            patchDiv.append('<span class="tooltip">' + patch.tooltip + '</div>');
+            patchDiv.append('<div class="tooltip">' + patch.tooltip + '</div>');
         }
         container.append(patchDiv);
     }
@@ -162,44 +162,46 @@ DllPatcher.prototype.createUI = function() {
     var self = this;
     var container = $("<div>", {"class": "patchContainer"});
     container.html('<h3>' + this.filename + '.dll</h3>');
-    
+
-    container.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
+    $('html').on('dragover dragenter', function() {
-        e.preventDefault();
+        container.addClass('dragover');
-        e.stopPropagation();
+        return true;
     })
-    .on('drop', function(e) {
+    .on('dragleave dragend drop', function() {
+        container.removeClass('dragover');
+        return true;
+    })
+    .on('dragover dragenter dragleave dragend drop', function(e) {
+        e.preventDefault();
+    });
+    
+    container.on('drop', function(e) {
         var files = e.originalEvent.dataTransfer.files;
         if(files && files.length > 0)
             self.loadFile(files[0]);
     })
-    .on('dragover dragenter', function() {
+
-        container.addClass('dragover');
-    })
-    .on('dragleave dragend drop', function() {
-        container.removeClass('dragover');
-    });
-    
     this.fileInput = $("<input>",
         {"class": "fileInput",
          "id" : this.filename + '-file',
          "type" : 'file'});
     var label = $("<label>", {"class": "fileLabel", "for": this.filename + '-file'});
     label.html('<strong>Choose a file</strong> or drag and drop.');
-    
+
     this.fileInput.on('change', function(e) {
         if(this.files && this.files.length > 0)
             self.loadFile(this.files[0]);
     });
-    
+
     this.successDiv = $("<div>", {"class": "success"});
     this.errorDiv = $("<div>", {"class": "error"});
     this.patchDiv = $("<div>", {"class": "patches"});
-    
+
     var saveButton = $("<button disabled>");
     saveButton.text('Load DLL First');
     saveButton.on('click', this.saveDll.bind(this));
     this.saveButton = saveButton;
-    
+
     container.append(this.fileInput);
     container.append(label);
     container.append(this.successDiv);
@@ -212,7 +214,7 @@ DllPatcher.prototype.createUI = function() {
 DllPatcher.prototype.loadFile = function(file) {
     var reader = new FileReader();
     var self = this;
-    
+
     reader.onload = function(e) {
         self.dllFile = new Uint8Array(e.target.result);
         if(self.validatePatches()) {
@@ -235,7 +237,7 @@ DllPatcher.prototype.saveDll = function() {
     if(!this.dllFile || !this.mods || !this.filename)
         return;
     var fname = this.filename;
-    
+
     for(var i = 0; i < this.mods.length; i++) {
         var enabledStr = this.mods[i].applyPatch(this.dllFile);
         /* disabled as it can get kinda hectic with many patches
@@ -244,7 +246,7 @@ DllPatcher.prototype.saveDll = function() {
         } */
     }
     fname += '.dll';
-    
+
     var blob = new Blob([this.dllFile], {type: "application/octet-stream"});
     saveAs(blob, fname);
 }