reorganizing buttons

This commit is contained in:
ReznoRMichael 2021-01-23 15:40:26 +01:00
parent e6bd87a866
commit b216b1c5a9
2 changed files with 27 additions and 11 deletions

View file

@ -141,7 +141,7 @@ textarea::placeholder {
} }
input[type="file"] { input[type="file"] {
max-width: 14rem; max-width: 500px;
margin: 0.5rem; margin: 0.5rem;
} }
@ -154,7 +154,7 @@ input[type="file"] {
.buttons { .buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-end; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
@ -164,17 +164,14 @@ input[type="file"] {
} }
.checkboxes { .checkboxes {
margin-top: 1rem; margin-top: 0rem;
margin-bottom: 0.4rem;
margin-left: -1rem;
padding-left: 1.5rem;
} }
.button { .button {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%; width: max-content;
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
font-family: 'Heebo', sans-serif; font-family: 'Heebo', sans-serif;
@ -187,7 +184,7 @@ input[type="file"] {
} }
.button:first-child { .button:first-child {
margin-left: 0; margin-left: 0.25rem;
} }
.button:hover { .button:hover {
@ -201,6 +198,11 @@ input[type="file"] {
outline-offset: -2px; outline-offset: -2px;
} }
.centered {
flex-direction: column;
align-items: center;
}
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.buttons { .buttons {
flex-direction: column; flex-direction: column;
@ -210,6 +212,13 @@ input[type="file"] {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.centered {
flex-direction: row;
align-items: flex-start;
}
.checkboxes {
margin-top: 0.8rem;
}
} }
p { p {

View file

@ -38,19 +38,26 @@
<p class="smalltext"> <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> 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> Choose a Hollow Knight user*.dat save OR <a href="https://bloodorca.github.io/hollow/" target="_blank">[ Decode ]</a> it from your <a href="https://store.steampowered.com/account/remotestorageapp/?appid=367520" target="_blank">[ Steam Cloud ]</a><br>
<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> <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> </p>
<div> <div>
<textarea name="save-area" id="save-area" rows="6" spellcheck="false" placeholder="Paste (Ctrl + V) your decoded save here..." autofocus></textarea> <div class="buttons centered">
<div class="input-buttons">
<input id="save-area-file" class="" type="file" name="file" accept=".dat,.bak*" onchange="LoadSaveFile(this)">
</div>
</div>
<textarea name="save-area" id="save-area" rows="6" spellcheck="false" placeholder="Choose a user*.dat save file OR paste (Ctrl + V) your decoded save here manually..." autofocus></textarea>
<div class="buttons"> <div class="buttons">
<div class="input-buttons"> <div class="input-buttons">
<!-- <button id="save-area-file" class="button" onclick="">Load Save</button> --> <!-- <button id="save-area-file" class="button" onclick="">Load Save</button> -->
<input id="save-area-file" class="" type="file" name="file" accept=".dat,.bak*" onchange="LoadSaveFile(this)"> <!-- <input id="save-area-file" class="" type="file" name="file" accept=".dat,.bak*" onchange="LoadSaveFile(this)"> -->
<button id="save-area-read" class="button" onclick="HKReadTextArea();">Analyze Text</button> <button id="save-area-read" class="button" onclick="HKReadTextArea();">Analyze Text</button>
</div> </div>