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 {