better label placement on toggle box

This commit is contained in:
simon 2021-12-18 18:22:57 +07:00
parent bf0b07f3d7
commit 2d6cc43a9e
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
7 changed files with 42 additions and 48 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -69,10 +69,12 @@
<div class="toggle"> <div class="toggle">
<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" <input id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox" {% if hide_watched %}checked{% endif %}>
{% if hide_watched %}checked{% endif %}> {% if hide_watched %}
<label for="" class="onbtn">On</label>
<label for="" class="ofbtn">Off</label> <label for="" class="ofbtn">Off</label>
{% else %}
<label for="" class="onbtn">On</label>
{% endif %}
</div> </div>
</div> </div>
<div class="view-icons"> <div class="view-icons">

View File

@ -200,14 +200,16 @@ button:hover {
} }
.toggleBox > .onbtn { .toggleBox > .onbtn {
bottom: 15px; right: 35%;
left: 15px; top: 45%;
transform: translate(50%,-50%);
font-family: Sen-Regular, sans-serif; font-family: Sen-Regular, sans-serif;
} }
.toggleBox > .ofbtn { .toggleBox > .ofbtn {
bottom: 15px; left: 0;
right: 15px; top: 45%;
transform: translate(50%,-50%);
font-family: Sen-Regular, sans-serif; font-family: Sen-Regular, sans-serif;
color: var(--main-font); color: var(--main-font);
} }