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

26
build/main.css
View file

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

7
src/index.html
View file

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