Make options page text copy pastable and searchable

This commit is contained in:
Ajay Ramachandran
2021-06-18 00:42:30 -04:00
parent 8da238f52a
commit a12ef41060
2 changed files with 78 additions and 18 deletions

View File

@@ -66,14 +66,22 @@ body {
display: inline-block;
}
.switch-container:after {
.switch-container {
content: attr(label-name);
position: absolute;
padding: 4px;
width: max-content;
font-size: 14px;
color: white;
display: table;
}
.switch-container .switch-label {
display: table-cell;
vertical-align: middle;
padding: 4px;
}
.text-label-container {

View File

@@ -33,19 +33,23 @@
<br/>
<div id="support-invidious" option-type="toggle" sync-option="supportInvidious">
<label class="switch-container" label-name="__MSG_supportOtherSites__">
<label class="switch-container">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_supportOtherSites__
</div>
</label>
<br/>
<br/>
<br/>
<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
<br/>
<div class="small-description">__MSG_supportOtherSitesDescription__ </div>
<span class="small-description">__MSG_supportOtherSitesDescription__ </span>
</div>
<br/>
@@ -151,7 +155,7 @@
<br/>
<div option-type="number-change" sync-option="minDuration">
<label class="number-container" label-name="__MSG_minDuration__">
<label class="number-container">
<input type="number" step="0.1" min="0">
</label>
@@ -165,25 +169,33 @@
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="dontShowNotice">
<label class="switch-container" label-name="__MSG_showSkipNotice__">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showSkipNotice__
</div>
</label>
</div>
<br/>
<br/>
<br/>
<div option-type="toggle" sync-option="forceChannelCheck">
<label class="switch-container" label-name="__MSG_forceChannelCheck__">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_forceChannelCheck__
</div>
</label>
<br/>
<br/>
<br/>
@@ -194,13 +206,17 @@
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="hideVideoPlayerControls">
<label class="switch-container" label-name="__MSG_showButtons__">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showButtons__
</div>
</label>
<br/>
<br/>
<br/>
@@ -211,13 +227,17 @@
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="hideInfoButtonPlayerControls">
<label class="switch-container" label-name="__MSG_showInfoButton__">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showInfoButton__
</div>
</label>
<br/>
<br/>
<br/>
@@ -228,16 +248,20 @@
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="hideDeleteButtonPlayerControls">
<label class="switch-container" label-name="__MSG_showDeleteButton__">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showDeleteButton__
</div>
</label>
<br/>
<br/>
<br/>
<div class="small-description">__MSG_whatDeleteButton__</div>
</div>
@@ -245,13 +269,17 @@
<br/>
<div option-type="toggle" toggle-type="reverse" sync-option="hideUploadButtonPlayerControls">
<label class="switch-container" label-name="__MSG_showUploadButton__">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showUploadButton__
</div>
</label>
<br/>
<br/>
<br/>
@@ -262,13 +290,17 @@
<br/>
<div option-type="toggle" sync-option="audioNotificationOnSkip">
<label class="switch-container" label-name="__MSG_audioNotification__">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_audioNotification__
</div>
</label>
<br/>
<br/>
<br/>
@@ -279,13 +311,17 @@
<br/>
<div option-type="toggle" sync-option="showTimeWithSkips">
<label class="switch-container" label-name="__MSG_showTimeWithSkips__">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_showTimeWithSkips__
</div>
</label>
<br/>
<br/>
<br/>
@@ -296,13 +332,17 @@
<br/>
<div option-type="toggle" sync-option="trackViewCount">
<label class="switch-container" label-name="__MSG_enableViewTracking__">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_enableViewTracking__
</div>
</label>
<br/>
<br/>
<br/>
@@ -313,26 +353,34 @@
<br/>
<div option-type="toggle" sync-option="trackViewCountInPrivate" private-mode-only="true">
<label class="switch-container" label-name="__MSG_enableViewTrackingInPrivate__">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_enableViewTrackingInPrivate__
</div>
</label>
<br/>
<br/>
<br/>
<br/>
</div>
<div option-type="toggle" sync-option="refetchWhenNotFound">
<label class="switch-container" label-name="__MSG_enableRefetchWhenNotFound__">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_enableRefetchWhenNotFound__
</div>
</label>
<br/>
<br/>
<br/>
@@ -408,13 +456,17 @@
<br/>
<div option-type="toggle" sync-option="testingServer" confirm-message="testingServerWarning">
<label class="switch-container" label-name="__MSG_enableTestingServer__">
<label class="switch-container">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_enableTestingServer__
</div>
</label>
<br/>
<br/>
<br/>