Make options page text copy pastable and searchable

2 files changed, 78 insertions, 18 deletions

diff --git a/public/options/options.css b/public/options/options.css
index 27cb1174..ddce689c 100644
--- a/public/options/options.css
+++ b/public/options/options.css
@@ -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 {
diff --git a/public/options/options.html b/public/options/options.html
index 7d2a4397..c7a3578b 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -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,27 +169,35 @@
 			<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/>
 	
 				<div class="small-description">__MSG_whatForceChannelCheck__</div>
 			</div>
@@ -194,15 +206,19 @@
 			<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/>
 	
 				<div class="small-description">__MSG_hideButtonsDescription__</div>
 			</div>
@@ -211,15 +227,19 @@
 			<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/>
 	
 				<div class="small-description">__MSG_whatInfoButton__</div>
 			</div>
@@ -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,15 +269,19 @@
 			<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/>
 	
 				<div class="small-description">__MSG_whatUploadButton__</div>
 			</div>
@@ -262,15 +290,19 @@
 			<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/>
 	
 				<div class="small-description">__MSG_audioNotificationDescription__</div>
 			</div>
@@ -279,15 +311,19 @@
 			<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/>
 	
 				<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
 			</div>
@@ -296,15 +332,19 @@
 			<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/>
 	
 				<div class="small-description">__MSG_whatViewTracking__</div>
 			</div>
@@ -313,28 +353,36 @@
 			<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/>
 	
 				<div class="small-description">__MSG_whatRefetchWhenNotFound__</div>
 			</div>
@@ -408,15 +456,19 @@
 			<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/>
 	
 				<div class="small-description">__MSG_whatEnableTestingServer__</div>
 			</div>