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

css checkboxes fix

Browse source
This commit is contained in:
ReznoRMichael 2021-08-04 21:26:27 +02:00
parent af0509b30f
commit e18f24bc24
5 changed files with 39 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
build/index.html
View file

@ -228,18 +228,21 @@
</div>
<div class="checkboxes">
<input type="checkbox" name="checkboxes" id="checkbox-hints" value="hints-off">
<label for="checkbox-hints" class="checkbox-label"
title="Check to see an optional clue for your first playthrough based on your save's progress.">
<!-- <input type="checkbox" name="checkboxes" id="checkbox-hints" value="hints-off" onclick="CheckboxHintsToggle();"> -->
<input type="checkbox" name="checkboxes" id="checkbox-hints" value="hints-off">
<span class="checkmark"></span>Hints
</label>
<input type="checkbox" name="checkboxes" id="checkbox-spoilers" value="spoilers-off">
<label for="checkbox-spoilers" class="checkbox-label"
title="Check to show every item's locations and costs. Hidden by default.">
<!-- <input type="checkbox" name="checkboxes" id="checkbox-spoilers" value="spoilers-off" onclick="CheckboxSpoilersToggle();"> -->
<input type="checkbox" name="checkboxes" id="checkbox-spoilers" value="spoilers-off">
<span class="checkmark"></span>Spoilers
</label>
</div>
</div>

26
build/main.css
View file

@ -818,6 +818,7 @@ input[type="radio"] {
-ms-user-select: none;
user-select: none;
width: max-content;
transition: all 0.3s ease;
}
.checkbox-label:last-child {
@ -834,6 +835,7 @@ input[type="radio"] {
background-color: #aac7d4;
border: 1px solid #1e4d6c;
border: 1px solid var(--rt-main);
transition: all 0.3s ease;
}
.radiomark {
@ -841,8 +843,8 @@ input[type="radio"] {
}
/* Hide the browser's default checkbox */
.radio-label input,
.checkbox-label input {
input[type="checkbox"],
input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
@ -851,21 +853,21 @@ input[type="radio"] {
}
/* On mouse-over change background color */
.radio-label:hover input~.radiomark,
.checkbox-label:hover input~.checkmark {
.radio-label:hover .radiomark,
.checkbox-label:hover .checkmark {
background-color: #d9f3ff;
}
/* When the checkbox is checked change background color */
.radio-label input:checked~.radiomark,
.checkbox-label input:checked~.checkmark {
input:checked + label .radiomark,
input:checked + label .checkmark {
background-color: #1e4d6c;
background-color: var(--rt-main);
}
/* When the checkbox is checked change background color on hover */
.radio-label:hover input:checked~.radiomark,
.checkbox-label:hover input:checked~.checkmark {
input:checked + label:hover .radiomark,
input:checked + label:hover .checkmark {
background-color: #2e5d7c;
border-color: #2e5d7c;
}
@ -879,8 +881,8 @@ input[type="radio"] {
}
/* Show the checkmark when checked */
.radio-label input:checked~.radiomark:after,
.checkbox-label input:checked~.checkmark:after {
input:checked + label .radiomark:after,
input:checked + label .checkmark:after {
display: block;
}
@ -916,7 +918,7 @@ input[type="radio"]:focus + label {
input[type="checkbox"]:focus:not(:focus-visible) + label,
input[type="radio"]:focus:not(:focus-visible) + label {
outline: 0;
/* box-shadow: 0 0 0.2rem #aac7d4; */
box-shadow: none;
}
.tooltip {
@ -941,7 +943,7 @@ input[type="radio"]:focus:not(:focus-visible) + label {
left: 50%;
margin-left: -108.5px;
opacity: 0;
transition: opacity 0.3s;
transition: all 0.3s ease;
}
.tooltip .tooltip-text::after {

2
build/main.css.map
View file

File diff suppressed because one or more lines are too long

26
src/css/style.css
View file

@ -710,6 +710,7 @@ input[type="radio"] {
-ms-user-select: none;
user-select: none;
width: max-content;
transition: all 0.3s ease;
}
.checkbox-label:last-child {
@ -726,6 +727,7 @@ input[type="radio"] {
background-color: #aac7d4;
border: 1px solid #1e4d6c;
border: 1px solid var(--rt-main);
transition: all 0.3s ease;
}
.radiomark {
@ -733,8 +735,8 @@ input[type="radio"] {
}
/* Hide the browser's default checkbox */
.radio-label input,
.checkbox-label input {
input[type="checkbox"],
input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
@ -743,21 +745,21 @@ input[type="radio"] {
}
/* On mouse-over change background color */
.radio-label:hover input~.radiomark,
.checkbox-label:hover input~.checkmark {
.radio-label:hover .radiomark,
.checkbox-label:hover .checkmark {
background-color: #d9f3ff;
}
/* When the checkbox is checked change background color */
.radio-label input:checked~.radiomark,
.checkbox-label input:checked~.checkmark {
input:checked + label .radiomark,
input:checked + label .checkmark {
background-color: #1e4d6c;
background-color: var(--rt-main);
}
/* When the checkbox is checked change background color on hover */
.radio-label:hover input:checked~.radiomark,
.checkbox-label:hover input:checked~.checkmark {
input:checked + label:hover .radiomark,
input:checked + label:hover .checkmark {
background-color: #2e5d7c;
border-color: #2e5d7c;
}
@ -771,8 +773,8 @@ input[type="radio"] {
}
/* Show the checkmark when checked */
.radio-label input:checked~.radiomark:after,
.checkbox-label input:checked~.checkmark:after {
input:checked + label .radiomark:after,
input:checked + label .checkmark:after {
display: block;
}
@ -808,7 +810,7 @@ input[type="radio"]:focus + label {
input[type="checkbox"]:focus:not(:focus-visible) + label,
input[type="radio"]:focus:not(:focus-visible) + label {
outline: 0;
/* box-shadow: 0 0 0.2rem #aac7d4; */
box-shadow: none;
}
.tooltip {
@ -833,7 +835,7 @@ input[type="radio"]:focus:not(:focus-visible) + label {
left: 50%;
margin-left: -108.5px;
opacity: 0;
transition: opacity 0.3s;
transition: all 0.3s ease;
}
.tooltip .tooltip-text::after {

7
src/index.html
View file

@ -113,18 +113,21 @@
</div>
<div class="checkboxes">
<input type="checkbox" name="checkboxes" id="checkbox-hints" value="hints-off">
<label for="checkbox-hints" class="checkbox-label"
title="Check to see an optional clue for your first playthrough based on your save's progress.">
<!-- <input type="checkbox" name="checkboxes" id="checkbox-hints" value="hints-off" onclick="CheckboxHintsToggle();"> -->
<input type="checkbox" name="checkboxes" id="checkbox-hints" value="hints-off">
<span class="checkmark"></span>Hints
</label>
<input type="checkbox" name="checkboxes" id="checkbox-spoilers" value="spoilers-off">
<label for="checkbox-spoilers" class="checkbox-label"
title="Check to show every item's locations and costs. Hidden by default.">
<!-- <input type="checkbox" name="checkboxes" id="checkbox-spoilers" value="spoilers-off" onclick="CheckboxSpoilersToggle();"> -->
<input type="checkbox" name="checkboxes" id="checkbox-spoilers" value="spoilers-off">
<span class="checkmark"></span>Spoilers
</label>
</div>
</div>