mikl/hollow-knight-silksong-completion-check
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve mobile look, background image edit

Browse source
This commit is contained in:
ReznoRMichael 2020-10-19 16:39:58 +02:00
parent 145fdccf01
commit 6f36105e6a
5 changed files with 38 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
HKCheckCompletion.js
View file

@ -16,6 +16,10 @@ let divStart = [
"<div class='flex-container'>"
].join("\n");
let divStartCenter = [
"<div class='flex-container align-center'>"
].join("\n");
let divEnd = [
"</div>"
].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 = "<span>Geo:</span><img src='img/geo.png' class='geo-symbol'><b>" + geoValue + "</b>";
document.getElementById(divId.id).innerHTML += divStart + icon + textFill + divEnd;
document.getElementById(divId.id).innerHTML += divStartCenter + icon + textFill + divEnd;
}
/**

BIN
img/hk-background.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 255 KiB

After

Width:  |  Height:  |  Size: 250 KiB

BIN
img/scrollbar-track.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 106 B

2
index.html
View file

@ -46,7 +46,7 @@
<p class="smalltext">
Please check the <a href="https://steamcommunity.com/sharedfiles/filedetails/?id=2209910193" target="_blank">[ Official Steam Guide ]</a> on how to use this Tool.<br>
Shortcuts: <a href="https://bloodorca.github.io/hollow/" target="_blank">[ Decode ]</a> your Hollow Knight user*.dat <a href="https://store.steampowered.com/account/remotestorageapp/?appid=367520" target="_blank">[ Save File ]</a><br>
Paste the decoded text into the text box below. <a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br>
<a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br>
<a href="https://www.paypal.me/ReznoRMichael" target="_blank">Support Tool development</a> 🉑 <a href="https://www.youtube.com/c/MichaelReznoR" target="_blank">Youtube</a> 🉑 <a href="https://github.com/ReznoRMichael/hollow-knight-completion-check" target="_blank">Source Code</a>
</p>

47
style.css
View file

@ -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 {