From ed9a0b3d9304442f801bedaf4dc0d4f7094b354a Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Wed, 19 Apr 2023 03:15:21 +0200
Subject: [PATCH] Replaced background-images due to lackin darktheme

---
 index.html | 59 +++++++++++++++++++++++++++++-------------------------
 main.css   | 39 +++++++++++++++++++++++++++++-------
 2 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/index.html b/index.html
index bfa072e..cb808c6 100644
--- a/index.html
+++ b/index.html
@@ -271,11 +271,12 @@
 		</span>
 		<div id="mainmenu" class="row" style="opacity: 0;">
 			
-			<div id="container-1" title="Add Group Chat to OBS"  alt="Add Group Chat to OBS" tabindex="2" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="column columnfade pointer rounded card" style=" overflow-y: auto;">
+			<div id="container-1" title="Add Group Chat to OBS"  alt="Add Group Chat to OBS" tabindex="2" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="column columnfade pointer rounded card">
 				
 					<h2>
 						<span data-translate="add-group-chat">Create a Room</span>
 					</h2>
+                    <i class="las la-th-large"></i>
 					<div class="container-inner">
 						<br />
 						<br />
@@ -393,10 +394,11 @@
 						</div>
 					</div>
 			</div>
-			<div id="container-3"  title="Add your Camera to OBS" onkeyup="enterPressedClick(event,this);"  alt="Add your Camera to OBS" tabindex="3" role="button" aria-pressed="false" class="column columnfade pointer rounded card" onclick="previewWebcam()" style=" overflow-y: auto;">
+			<div id="container-3"  title="Add your Camera to OBS" onkeyup="enterPressedClick(event,this);"  alt="Add your Camera to OBS" tabindex="3" role="button" aria-pressed="false" class="column columnfade pointer rounded card" onclick="previewWebcam()">
 				<h2 id="add_camera">
 					<span data-translate="add-your-camera">Add your Camera to OBS</span>
 				</h2>
+                <i class="las la-video"></i>
 				<div class="container-inner" id="add_camera_inner">
 					<br />
 					<p>
@@ -565,10 +567,11 @@
 					</div>
 				</div>
 			</div>
-			<div id="container-3a"  title="Add your Microphone to OBS" onkeyup="enterPressedClick(event,this);"  alt="Add your Microphone to OBS" tabindex="3" role="button" aria-pressed="false" class="microphoneBackground column columnfade pointer rounded card hidden" onclick="previewWebcam(true)" style=" overflow-y: auto;">
+			<div id="container-3a"  title="Add your Microphone to OBS" onkeyup="enterPressedClick(event,this);"  alt="Add your Microphone to OBS" tabindex="3" role="button" aria-pressed="false" class="microphoneBackground column columnfade pointer rounded card hidden" onclick="previewWebcam(true)">
 				<h2 id="add_microphone">
 					<span data-translate="add-your-microphone">Add your Microphone to OBS</span>
 				</h2>
+                <i class="las la-microphone"></i>
 				<div class="outer close">
 					<div class="inner">
 						<label class="labelclass">
@@ -577,10 +580,11 @@
 					</div>
 				</div>
 			</div>
-			<div id="container-2" title="Remote Screenshare into OBS" onkeyup="enterPressedClick(event,this);"  alt="Remote Screenshare into OBS"  tabindex="4" role="button" aria-pressed="false" class="column columnfade pointer rounded card" style=" overflow-y: auto;">
+			<div id="container-2" title="Remote Screenshare into OBS" onkeyup="enterPressedClick(event,this);"  alt="Remote Screenshare into OBS"  tabindex="4" role="button" aria-pressed="false" class="column columnfade pointer rounded card">
 				<h2 id="add_screen">
 					<span data-translate="remote-screenshare-obs">Remote Screenshare into OBS</span>
 				</h2>
+                <i class="las la-desktop"></i>
 				<div class="container-inner">
 					<span>
 						<video id="screenshare" autoplay="true" muted="true" loop src="./media/screenshare.webm" class="lazy" style='background-image: unset;'></video>
@@ -656,10 +660,11 @@
 					</div>
 				</div>
 			</div>
-			<div id="container-4" tabindex="5" alt="Create Reusable Invite" onkeyup="enterPressedClick(event,this);" onclick="loadQR();" title="Create Reusable Invite" role="button" aria-pressed="false" class="column columnfade pointer rounded card" style=" overflow-y: auto;">
+			<div id="container-4" tabindex="5" alt="Create Reusable Invite" onkeyup="enterPressedClick(event,this);" onclick="loadQR();" title="Create Reusable Invite" role="button" aria-pressed="false" class="column columnfade pointer rounded card">
 				<h2>
 					<span data-translate="create-reusable-invite">Create Reusable Invite</span>
 				</h2>
+                <i class="las la-paper-plane"></i>
 				<div id="gencontent2" style="display:none; max-height: 100%;min-height: 90%;"></div>
 				<div id="gencontent" class="container-inner">
 					
@@ -785,10 +790,10 @@
 			
 			<div id="dropButton" onclick="dropDownButtonAction()" title="More Options"><i class="las la-chevron-down" ></i></div>
 			
-			<div id="container-5" class="column columnfade pointer rounded card hidden" style=" overflow-y: auto;">
+			<div id="container-5" class="column columnfade pointer rounded card hidden">
 				<h2><span data-translate="share-local-video-file">Stream Media File</span></h2>
+				<i class="las la-file-video"></i>
 				<div class="container-inner">
-					
 					<br /><br />
 					<span data-translate="select-the-video-files-to-share">SELECT THE VIDEO FILES TO SHARE</span><br /><br />
 					<input id="fileselector" onchange="session.publishFile(this,event);" type="file" accept="video/*,audio/*" alt="Hold CTRL (or CMD) to select multiple files" title="Hold CTRL (or CMD) to select multiple files" multiple/>
@@ -819,9 +824,9 @@
 				</div>
 			</div>
 			
-			<div id="container-6" class="column columnfade pointer rounded card hidden" style=" overflow-y: auto;">
+			<div id="container-6" class="column columnfade pointer rounded card hidden">
 				<h2><span data-translate="share-website-iframe">Share Website</span></h2>
-				<i style="margin-top:30px;font-size:560%;overflow:hidden;" class="las la-broadcast-tower"></i>
+				<i class="las la-broadcast-tower"></i>
 				<div class="container-inner">
 					<br />
 					<div id="previewIframe"></div>
@@ -850,49 +855,49 @@
 
 			</div>
 			
-			<div id="container-7" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = './speedtest.html';">
+			<div id="container-7" class="column columnfade pointer rounded card hidden" onclick="window.location = './speedtest.html';">
 				<h2><span data-translate="run-a-speed-test">Run a Speed Test</span></h2>
-				<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-tachometer-alt"></i>
+				<i class="las la-tachometer-alt"></i>
 			</div>
 			
-			<div id="container-8" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = './mixer.html';">
+			<div id="container-8" class="column columnfade pointer rounded card hidden" onclick="window.location = './mixer.html';">
 				<h2><span data-translate="try-the-mixer-out">Custom Mixed Layouts</span></h2>
-				<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-blender"></i>
+				<i class="las la-blender"></i>
 			</div>
 			
-			<div id="container-14" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = 'https://versus.cam';">
+			<div id="container-14" class="column columnfade pointer rounded card hidden" onclick="window.location = 'https://versus.cam';">
 				<h2><span data-translate="try-out-versus-cam">Multi-Stream Monitor</span></h2>
-				<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-gamepad"></i>
+				<i class="las la-gamepad"></i>
 			</div>
 			
-			<div id="container-15" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = './comms.html';">
+			<div id="container-15" class="column columnfade pointer rounded card hidden" onclick="window.location = './comms.html';">
 				<h2><span data-translate="voice-comms-app">Group Voice Comms</span></h2>
-				<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-comments"></i>
+				<i class="las la-comments"></i>
 			</div>
 			
-			<div id="container-9" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = 'https://guides.vdo.ninja';">
+			<div id="container-9" class="column columnfade pointer rounded card hidden" onclick="window.location = 'https://guides.vdo.ninja';">
 				<h2><span data-translate="read-the-guides">Basic Usage Guides</span></h2>
-				<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-book-open"></i>
+				<i class="las la-book-open"></i>
 			</div>
 			
-			<div id="container-13" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = 'https://linkgen.vdo.ninja';">
+			<div id="container-13" class="column columnfade pointer rounded card hidden" onclick="window.location = 'https://linkgen.vdo.ninja';">
 				<h2><span data-translate="wizard-link-generator">Wizard Link Generator</span></h2>
-				<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-hat-wizard"></i>
+				<i class="las la-hat-wizard"></i>
 			</div>
 			
-			<div id="container-10" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = 'https://docs.vdo.ninja';">
+			<div id="container-10" class="column columnfade pointer rounded card hidden" onclick="window.location = 'https://docs.vdo.ninja';">
 				<h2><span data-translate="get-full-documentation">Full Documentation</span></h2>
-				<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-info"></i>
+				<i class="las la-info"></i>
 			</div>
 			
-			<div id="container-11" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = 'https://github.vdo.ninja';">
+			<div id="container-11" class="column columnfade pointer rounded card hidden" onclick="window.location = 'https://github.vdo.ninja';">
 				<h2><span data-translate="get-the-source-code">Source Code</span></h2>
-				<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-code-branch"></i>
+				<i class="las la-code-branch"></i>
 			</div>
 			
-			<div id="container-12" class="column columnfade pointer rounded card hidden" style="overflow: hidden;" onclick="window.location = 'https://docs.vdo.ninja/getting-started/sponsor';">
+			<div id="container-12" class="column columnfade pointer rounded card hidden" onclick="window.location = 'https://docs.vdo.ninja/getting-started/sponsor';">
 				<h2><span data-translate="show-your-support">Show Your Support</span></h2>
-				<i style="margin-top:30px;font-size:600%;overflow:hidden;" class="las la-heartbeat"></i>
+				<i class="las la-heartbeat"></i>
 			</div>
 			
 			<p></p>
diff --git a/main.css b/main.css
index 734d47f..603e329 100644
--- a/main.css
+++ b/main.css
@@ -2140,9 +2140,9 @@ label {
 .outer:hover .inner:after {
 	bottom: 0;
 }
-.microphoneBackground{
+/* .microphoneBackground{
 	background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 13 4 C 11.90625 4 11 4.90625 11 6 L 11 18 C 11 19.09375 11.90625 20 13 20 L 19 20 C 20.09375 20 21 19.09375 21 18 L 21 6 C 21 4.90625 20.09375 4 19 4 Z M 13 6 L 19 6 L 19 18 L 13 18 Z M 7 14 L 7 18 C 7 21.300781 9.699219 24 13 24 L 15 24 L 15 26 L 11 26 L 11 28 L 21 28 L 21 26 L 17 26 L 17 24 L 19 24 C 22.300781 24 25 21.300781 25 18 L 25 14 L 23 14 L 23 18 C 23 20.21875 21.21875 22 19 22 L 13 22 C 10.78125 22 9 20.21875 9 18 L 9 14 Z'/%3E%3C/svg%3E")!important;
-}
+} */
 
 #dropButton{
 	font-size: 2em;
@@ -2256,7 +2256,7 @@ span[data-action-type="stats-graphs-details-container"]>span{
 	margin: 1.8%;
 	text-align: center;
 }
-#container-1 {
+/* #container-1 {
 	background-repeat: no-repeat;
 	background-size: 80px;
 	background-position: 50% 65%;
@@ -2294,7 +2294,7 @@ span[data-action-type="stats-graphs-details-container"]>span{
 	background-size: 80px;
 	background-position: 50% 65%;
 	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgogIDxnPgogICAgPGc+CiAgICAgIDxwYXRoIGQ9Im0xOC43LDEyMi41aDkxLjZjMi4zLDAgNC4xLTEuOCA0LjEtNC4xdi0xMDcuOWMwLTIuMy0xLjgtNC4xLTQuMS00LjFoLTY4LjdjLTAuMywwLTAuNywwLTEsMC4xLTAuMSwwLTAuMiwwLjEtMC4yLDAuMS0wLjMsMC4xLTAuNSwwLjItMC44LDAuMy0wLjEsMC4xLTAuMiwwLjEtMC4zLDAuMi0wLjMsMC4yLTAuNiwwLjQtMC44LDAuN2wtMjIuOSwyN2MtMC4zLDAuMy0wLjUsMC43LTAuNywxLjEtMC4xLDAuMS0wLjEsMC4zLTAuMSwwLjQtMC4xLDAuMy0wLjEsMC42LTAuMiwwLjkgMCwwLjEgMCwwLjEgMCwwLjJ2ODAuOWMtMS4wNjU4MWUtMTQsMi40IDEuOSw0LjIgNC4xLDQuMnptMTguOC0xMDAuOHYxMS44aC0xMGwxMC0xMS44em0tMTQuNywxOS45aDE4LjhjMi4zLDAgNC4xLTEuOCA0LjEtNC4xdi0yMi45aDYwLjV2OTkuN2gtODMuNHYtNzIuN3oiIGZpbGw9IiMwMDAwMDAiLz4KICAgICAgPHBhdGggZD0ibTk0LDUwLjVoLTU5Yy0yLjMsMC00LjEsMS44LTQuMSw0LjEgMCwyLjMgMS44LDQuMSA0LjEsNC4xaDU5YzIuMywwIDQuMS0xLjggNC4xLTQuMSAwLTIuMy0xLjgtNC4xLTQuMS00LjF6IiBmaWxsPSIjMDAwMDAwIi8+CiAgICAgIDxwYXRoIGQ9Im05NCw3MC4zaC01OWMtMi4zLDAtNC4xLDEuOC00LjEsNC4xIDAsMi4zIDEuOCw0LjEgNC4xLDQuMWg1OWMyLjMsMCA0LjEtMS44IDQuMS00LjEgMC0yLjItMS44LTQuMS00LjEtNC4xeiIgZmlsbD0iIzAwMDAwMCIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==)
-}
+} */
 
 .controlVideoBox {
 	position:relative;
@@ -2314,9 +2314,6 @@ span[data-action-type="stats-graphs-details-container"]>span{
     padding: 1px 4px;
 }
 
-#add_screen {
-	padding-bottom: 20px;
-}
 .soloButton{
     display: flex;
     flex-wrap: wrap;
@@ -4698,6 +4695,8 @@ input:checked + .slider:before {
 	content: "\f51f"; }
 .la-random:before {
 	content: "\f074"; }
+.la-file-video:before {
+	content: "\f1c8"; }
 
 body.darktheme {
 	color: white;
@@ -5151,6 +5150,32 @@ input[type='range'] {
     display: none;
 }
 
+/* Main page icons */
+#container-1 > i,
+#container-2 > i,
+#container-3 > i,
+#container-3a > i,
+#container-4 > i,
+#container-5 > i,
+#container-6 > i,
+#container-7 > i,
+#container-8 > i,
+#container-9 > i,
+#container-10 > i,
+#container-11 > i,
+#container-12 > i,
+#container-13 > i,
+#container-14 > i,
+#container-15 > i {
+    margin-top: 20px;
+    font-size: 530%;
+    overflow: hidden;
+}
+
+.card {
+    overflow: hidden;
+}
+
 #passwordBasicInput {
     width: 100%;
 }