diff --git a/HKCheckCompletion.js b/HKCheckCompletion.js index 3cac168..bfa331c 100644 --- a/HKCheckCompletion.js +++ b/HKCheckCompletion.js @@ -16,6 +16,10 @@ let divStart = [ "
" ].join("\n"); +let divStartCenter = [ + "
" +].join("\n"); + let divEnd = [ "
" ].join("\n"); @@ -813,7 +817,7 @@ function CheckHealthMasks(divId, masks, permadeathMode) { maskImages += maskImg; } - document.getElementById(divId.id).innerHTML += divStart + icon + textFill + maskImages + divEnd; + document.getElementById(divId.id).innerHTML += divStartCenter + icon + textFill + maskImages + divEnd; } /** @@ -833,7 +837,7 @@ function CheckSoulOrbs(divId, totalSoul) { soulImages += soulImg; } - document.getElementById(divId.id).innerHTML += divStart + icon + textFill + soulImages + divEnd; + document.getElementById(divId.id).innerHTML += divStartCenter + icon + textFill + soulImages + divEnd; } /** @@ -846,7 +850,7 @@ function CheckGeo(divId, geoValue) { let icon = SYMBOL_EMPTY; let textFill = "Geo:" + geoValue + ""; - document.getElementById(divId.id).innerHTML += divStart + icon + textFill + divEnd; + document.getElementById(divId.id).innerHTML += divStartCenter + icon + textFill + divEnd; } /** diff --git a/img/hk-background.jpg b/img/hk-background.jpg index 3904062..b472e9c 100644 Binary files a/img/hk-background.jpg and b/img/hk-background.jpg differ diff --git a/img/scrollbar-track.png b/img/scrollbar-track.png new file mode 100644 index 0000000..6212bff Binary files /dev/null and b/img/scrollbar-track.png differ diff --git a/index.html b/index.html index 38679b0..52beaaa 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@

Please check the [ Official Steam Guide ] on how to use this Tool.
Shortcuts: [ Decode ] your Hollow Knight user*.dat [ Save File ]
- Paste the decoded text into the text box below. [ Decoded 5% Save Example ]
+ [ Decoded 5% Save Example ]
Support Tool development 🉑 Youtube 🉑 Source Code

diff --git a/style.css b/style.css index b9c1f2b..fce3ed2 100644 --- a/style.css +++ b/style.css @@ -30,34 +30,34 @@ html { body { font-family: 'Heebo', sans-serif; color: #fff; - background-color: #050d18; + background-color: #050d19; margin: 0; + overflow: auto; } -body::-webkit-scrollbar, -textarea::-webkit-scrollbar { +::-webkit-scrollbar { width: 8px; height: 8px; } -body::-webkit-scrollbar-track, -textarea::-webkit-scrollbar-track, -body::-webkit-scrollbar-track-piece, -textarea::-webkit-scrollbar-track-piece, -textarea::-webkit-resizer { - background-color: #050d18; -} - -body::-webkit-scrollbar-thumb, -textarea::-webkit-scrollbar-thumb { +::-webkit-scrollbar-thumb { background-color: #1e4d6c; } -body::-webkit-scrollbar-thumb:hover, -textarea::-webkit-scrollbar-thumb:hover { +::-webkit-scrollbar-thumb:hover { background-color: #2e5d7c; } +::-webkit-scrollbar-track, +::-webkit-scrollbar-track-piece { + background: url("img/scrollbar-track.png") repeat-y !important; +} + +::-webkit-resizer { + background-color: #050d19; + color: #1e4d6c; +} + #background { position: fixed; padding: 0; @@ -70,12 +70,14 @@ textarea::-webkit-scrollbar-thumb:hover { background-size: auto 100%; background-position: center top; background-repeat: no-repeat; + background-attachment: fixed; z-index: 1; } #content { max-width: 550px; margin: 0 auto; + padding: 0 .6rem; position: relative; z-index: 1000; } @@ -112,6 +114,11 @@ textarea { background-color: rgba(0, 0, 0, 0); color: #fff; border: 1px solid #e3ebf7; + padding: 0; + margin: 2px; + overflow-x: hidden; + overflow-y: scroll; + overflow-wrap: normal; } textarea::placeholder { @@ -122,7 +129,8 @@ textarea::placeholder { #save-area { width: 100%; - margin: .5rem 0 .3rem 0; + height: 5.65rem; + margin: .5rem 2px .3rem 2px; } .buttons { @@ -202,8 +210,9 @@ a:hover { .flex-container { display: flex; + flex-wrap: wrap; flex-direction: row; - align-items: center; + align-items: normal; justify-content: left; } @@ -211,6 +220,10 @@ a:hover { flex-direction: row; } +.align-center { + align-items: center; +} + .health-mask, .soul-orb, .geo-symbol {