invert the hide button to more clearly show what it is currently set as. (#150)

This commit is contained in:
Laurant Marijnissen 2022-01-15 08:18:23 +01:00 committed by GitHub
parent b7922d171d
commit 385771cba0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 13 additions and 12 deletions

View File

@ -24,7 +24,7 @@
<span>Show subscribed only:</span> <span>Show subscribed only:</span>
<div class="toggleBox"> <div class="toggleBox">
<input id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_subed_only %}checked{% endif %}> <input id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_subed_only %}checked{% endif %}>
{% if show_subed_only %} {% if not show_subed_only %}
<label for="" class="ofbtn">Off</label> <label for="" class="ofbtn">Off</label>
{% else %} {% else %}
<label for="" class="onbtn">On</label> <label for="" class="onbtn">On</label>

View File

@ -71,7 +71,7 @@
<span>Hide watched videos:</span> <span>Hide watched videos:</span>
<div class="toggleBox"> <div class="toggleBox">
<input id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox" {% if hide_watched %}checked{% endif %}> <input id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox" {% if hide_watched %}checked{% endif %}>
{% if hide_watched %} {% if not hide_watched %}
<label for="" class="ofbtn">Off</label> <label for="" class="ofbtn">Off</label>
{% else %} {% else %}
<label for="" class="onbtn">On</label> <label for="" class="onbtn">On</label>

View File

@ -33,7 +33,7 @@
<span>Show only ignored videos:</span> <span>Show only ignored videos:</span>
<div class="toggleBox"> <div class="toggleBox">
<input id="show_ignored_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_ignored_only %}checked{% endif %}> <input id="show_ignored_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_ignored_only %}checked{% endif %}>
{% if show_ignored_only %} {% if not show_ignored_only %}
<label for="" class="ofbtn">Off</label> <label for="" class="ofbtn">Off</label>
{% else %} {% else %}
<label for="" class="onbtn">On</label> <label for="" class="onbtn">On</label>

View File

@ -10,7 +10,7 @@
<span>Hide watched:</span> <span>Hide watched:</span>
<div class="toggleBox"> <div class="toggleBox">
<input id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox" {% if hide_watched %}checked{% endif %}> <input id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox" {% if hide_watched %}checked{% endif %}>
{% if hide_watched %} {% if not hide_watched %}
<label for="" class="ofbtn">Off</label> <label for="" class="ofbtn">Off</label>
{% else %} {% else %}
<label for="" class="onbtn">On</label> <label for="" class="onbtn">On</label>

View File

@ -23,7 +23,7 @@
<span>Show subscribed only:</span> <span>Show subscribed only:</span>
<div class="toggleBox"> <div class="toggleBox">
<input id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_subed_only %}checked{% endif %}> <input id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_subed_only %}checked{% endif %}>
{% if show_subed_only %} {% if not show_subed_only %}
<label for="" class="ofbtn">Off</label> <label for="" class="ofbtn">Off</label>
{% else %} {% else %}
<label for="" class="onbtn">On</label> <label for="" class="onbtn">On</label>

View File

@ -68,7 +68,7 @@
<span>Hide watched videos:</span> <span>Hide watched videos:</span>
<div class="toggleBox"> <div class="toggleBox">
<input id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox" {% if hide_watched %}checked{% endif %}> <input id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox" {% if hide_watched %}checked{% endif %}>
{% if hide_watched %} {% if not hide_watched %}
<label for="" class="ofbtn">Off</label> <label for="" class="ofbtn">Off</label>
{% else %} {% else %}
<label for="" class="onbtn">On</label> <label for="" class="onbtn">On</label>

View File

@ -155,8 +155,8 @@ button:hover {
position: relative; position: relative;
width: 70px; width: 70px;
height: 30px; height: 30px;
background-color: var(--accent-font-dark); background-color: var(--accent-font-light);
border-color: var(--accent-font-dark); border-color: var(--accent-font-light);
appearance: none; appearance: none;
border-radius: 15px; border-radius: 15px;
transition: 0.4s; transition: 0.4s;
@ -165,8 +165,8 @@ button:hover {
} }
.toggleBox > input:checked[type="checkbox"] { .toggleBox > input:checked[type="checkbox"] {
background-color: var(--accent-font-light); background-color: var(--accent-font-dark);
border-color: var(--accent-font-light); border-color: var(--accent-font-dark);
} }
.toggleBox > input[type="checkbox"]::before { .toggleBox > input[type="checkbox"]::before {
@ -200,14 +200,15 @@ button:hover {
} }
.toggleBox > .onbtn { .toggleBox > .onbtn {
right: 35%; right: 70%;
top: 45%; top: 45%;
transform: translate(50%,-50%); transform: translate(50%,-50%);
font-family: Sen-Regular, sans-serif; font-family: Sen-Regular, sans-serif;
} }
.toggleBox > .ofbtn { .toggleBox > .ofbtn {
left: 0; left: 37%;
top: 45%; top: 45%;
transform: translate(50%,-50%); transform: translate(50%,-50%);
font-family: Sen-Regular, sans-serif; font-family: Sen-Regular, sans-serif;