mirror of
https://github.com/tubearchivist/tubearchivist-frontend.git
synced 2024-11-16 17:10:12 +00:00
better label placement on toggle box
This commit is contained in:
parent
bf0b07f3d7
commit
2d6cc43a9e
@ -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">
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user