From c5b75d1bbe9d7b6c2314f1452066a840d6cc999d Mon Sep 17 00:00:00 2001 From: Isaac Drew Date: Sat, 16 Dec 2017 13:58:59 +0800 Subject: [PATCH] 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.eot | Bin 0 -> 1324 bytes css/file.svg | 11 +++ css/file.ttf | Bin 0 -> 1160 bytes css/file.woff | Bin 0 -> 1236 bytes css/style.css | 236 ++++++++++++++++++++++++++++++++++++++++------- js/dllpatcher.js | 44 ++++----- 6 files changed, 238 insertions(+), 53 deletions(-) create mode 100644 css/file.eot create mode 100644 css/file.svg create mode 100644 css/file.ttf create mode 100644 css/file.woff diff --git a/css/file.eot b/css/file.eot new file mode 100644 index 0000000000000000000000000000000000000000..32d36bea1a0a4638af681468c19bf9508739275d GIT binary patch literal 1324 zcmaJ>O-vI(7=5$51zNON1u;s@5^U5&D_B8IG}(h8K_MD6Bp!?`Wob#;-KIYY7!G?< zV@%}Q8wXDwIO&bU#)BtL9z2_PBAz{&Qs2xjg_6dvotgK&d9&ZlH$T^6z*_?l(9mfD zn?f?PPda(24Xu&hDID(ul2}C!9!e}8Tndtyhl4!oD8fdC%vmgush~=&)R>q+2IES5 zd^AZJupd5jj6Z&Q=;dr&!7KWo>7OXsYh^Bo zQ`G|crfZj+#>4nu`ac=tb=j-dI8T}(b7Ml+e6a~;S!-y!WIlwg_>HUx14(gcg46Ca z3)q7mv;tT<3p)>zFLkD@R5TfJgnePFE7b@L+##PpA2(McXYQfZY_;T|HWsa4!v@D4 z{jPwZYTyXR!*Tnrk{s&(&-KY5I&`12h~p$uxPUaS;yS;S8XZpQmq$~hVl0*I9UID~ zvO{B&*-4gk8=Z;zpjm+x>|2_@?+1ZJW918|#!?KU1WgKpCWP$q_oakC{+od$+IcJN zq#G{>?)^c(At#6*v*+YFX}4;|JU7f&Xk4$#KbIkm2|mm~sECC?U!x>gSdzl zH6q3Xu5!};ayTHYlh}^FE6__SjG+-PMp!4Fim*Xkk8q4PV<^HsRG9A6?r~1u6k^2)YvYQ ZTf#c)8TCxfMbA`*S#NLL(XBbe{{RSDyr2L8 literal 0 HcmV?d00001 diff --git a/css/file.svg b/css/file.svg new file mode 100644 index 0000000..55f885b --- /dev/null +++ b/css/file.svg @@ -0,0 +1,11 @@ + + + +Generated by IcoMoon + + + + + + + \ No newline at end of file diff --git a/css/file.ttf b/css/file.ttf new file mode 100644 index 0000000000000000000000000000000000000000..805576d9cfe7a52a902418525f0d9918edd5e23f GIT binary patch literal 1160 zcmaJ=O=uHA6#iy+(>AH5Mq49VWJ@jT!I~Od6%_U$g{noUQt%*ln{JarvK#UPsr0ZX z1rhX`TMwQ*^rW{Q77w0!^59wUR6Kik?)l}cP;(7`5Z9r zlh2hX416)al5de;DpeY-Bmwz0U!&!q;Nl8il7AvUQE^*Uq>&?!$Zg-Pcv#9n|caEF!%`A`{;JMT{Y_vi|)^?#d-bf3J7M6^l1ig>yAq4<^5k9 zl2uHYA-hQ8Br>>wDO|-hu9TU`X3WbInF%qO$q!DBiR@$9vzZkju8^e}t5Z@o2li$ga zR~_@a;d#Zz{i^flHl*=@dnXWQB;rU+sWEg zD>ln+jYT~++C&*HYR6{I2Y$mYdcIe48{V3|x@j*If<^W=jd@kO!RkdW*4Egnps=Sv)l#TZ@E~@ZZj(Z?Tk->2@sN{> z2=>~W2TvY)(pwLUhV+*4FN9}ioinmIxME}0%(EQiuMXx5@Hhswz9VnL9m&tu1-VuHE z;LTRa_m%*2gZ`9g`a|Pki6pr%^v{a+e6&87D)lvTzvv$qO>!uQ1?E{qIIQ$Mo>aUw z*0scUl%_Ercom=AMb>^Mx_LYKXEm(V+3)-PJXyvvo5ltbtg~tE(0?6U<0o>46zmjZ zpwkoV0=uxHb_Ca=l2K<$E8?h8RUsN?Oz<#A$r^@@>$EAJl*!M4vx|1C-6qGm8XN5& zL$;ow0vrq&%<5OG#GDCSyP--S)c-#xx5H(vCU=p<5oB;0qqu-eTq!d$l(Ei@WJZi^ zCfA!C%w=+e*~#1_b#xyc(=nKCf|Oo&=AB+}fI6n^}* zA|dwAt+YM5`KbTqZ}i!+L43b^l6QMx)sE$Du{$N~SDioG5a9tIoPc7Gh$FEh)8rDA zr1-ARU|G#bU`)MOK7@ba4x7f7Ue`b``M8Ejyr8i~Jf*Qs+|W3|f7hVKJ>>6boWd!* zlzX+4WYUbp*d#7$Y!Tnm*d~6eaRMjcXxu}7PU94=;_XTytb}2J6%-JnLJbkj`_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; -} - -.dragover { - background-color: rgb(200,200,200); + padding: 20px; + max-width: 650px; + margin: 0 auto 2em; + position: relative; } .tooltip { visibility: hidden; font-size: 14px; - margin-left: 6px; - padding: 5px; - border: 1px solid black; + margin-left: 8px; + padding: 8px; 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: ' ? '; - font-size: 20px; - margin-right: 10px; - background: #eee; - border-radius: 10px; + content: '?'; + font-size: 18px; + margin-right: 8px; + background: gray; + 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{ - background: inherit; +.tooltip:hover:before, +.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; } \ No newline at end of file diff --git a/js/dllpatcher.js b/js/dllpatcher.js index af6450c..121b0bb 100644 --- a/js/dllpatcher.js +++ b/js/dllpatcher.js @@ -17,7 +17,7 @@ StandardPatch.prototype.createUI = function(parent) { var patch = $('
', {'class' : 'patch'}); patch.append(''); if(this.tooltip) { - patch.append('' + this.tooltip + '
'); + patch.append('
' + this.tooltip + '
'); } parent.append(patch); }; @@ -97,7 +97,7 @@ UnionPatch.prototype.createUI = function(parent) { var patchDiv = $('
', {'class' : 'patch'}); patchDiv.append(''); if(patch.tooltip) { - patchDiv.append('' + patch.tooltip + '
'); + patchDiv.append('
' + patch.tooltip + '
'); } container.append(patchDiv); } @@ -162,44 +162,46 @@ DllPatcher.prototype.createUI = function() { var self = this; var container = $("
", {"class": "patchContainer"}); container.html('

' + this.filename + '.dll

'); - - container.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) { - e.preventDefault(); - e.stopPropagation(); + + $('html').on('dragover dragenter', function() { + container.addClass('dragover'); + 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 = $("", {"class": "fileInput", "id" : this.filename + '-file', "type" : 'file'}); var label = $("