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

tooltips for copied text

Browse source
This commit is contained in:
ReznoRMichael 2021-01-30 23:57:05 +01:00
commit 5321cf3649
6 changed files with 122 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/app.js
View file

File diff suppressed because one or more lines are too long

10
docs/index.html
View file

@ -46,9 +46,13 @@
<a class="link-social" href="https://github.com/ReznoRMichael/hollow-knight-completion-check" target="_blank"><i class="simpleicon-github"></i>GitHub</a>
<br>
<!-- <a href="https://pastebin.com/raw/shfZ4Vqs" target="_blank">[ Decoded 5% Save Example ]</a><br> -->
<input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
<br>
Choose a HK user*.dat save OR paste a <a href="https://bloodorca.github.io/hollow/" target="_blank">decoded save</a>.
<div class="tooltip">
<input type="text" id="save-location-input" size="57" value="%USERPROFILE%\AppData\LocalLow\Team Cherry\Hollow Knight\" readonly>
<span class="tooltip-text" id="save-location-input-tooltip">Click once to copy to clipboard</span>
</div>
<p class="smalltext">
Choose a HK user*.dat save OR paste a <a href="https://bloodorca.github.io/hollow/" target="_blank">decoded save</a>.
</p>
</p>
<div>

46
docs/main.css
View file

@ -220,9 +220,9 @@ h2 {
text-align: center;
width: max-content;
color: #fff;
display: inline-block;
display: block;
background-color: rgba(128, 128, 128, 0.5);
margin: 0.4rem 0 0.6rem 0;
margin: 0.4rem auto 0.6rem auto;
padding: 0.16rem 0.5rem 0.25rem 0.5rem;
border: 1px solid rgba(231, 251, 255, 0.6);
border-radius: 3px;
@ -251,7 +251,7 @@ textarea {
margin: 0.5rem 2px 0.5rem 2px;
overflow-x: hidden;
overflow-y: scroll;
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
@ -363,14 +363,17 @@ input[type="file"] {
flex-direction: column;
align-items: center;
}
.input-buttons {
align-items: center;
justify-content: center;
}
.centered {
flex-direction: column;
align-items: flex-start;
}
.checkboxes {
margin-top: 0.8rem;
}
@ -640,3 +643,40 @@ input[type="radio"] {
border-radius: 50%;
background: #000;
}
.tooltip {
position: relative;
}
.tooltip .tooltip-text {
visibility: hidden;
width: max-content;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}