From bfa519d1ac3cd063793efd3821a965da95aa16fc Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Sat, 15 Apr 2023 02:13:48 +0200
Subject: [PATCH 1/5] Initial changes (Dark mode only)

---
 index.html | 213 ++++++++++++++++++++++++-----------------------------
 lib.js     |   2 +-
 main.css   |  76 ++++++++++++-------
 3 files changed, 146 insertions(+), 145 deletions(-)

diff --git a/index.html b/index.html
index 61a1256..0991e70 100644
--- a/index.html
+++ b/index.html
@@ -1351,7 +1351,6 @@
 					</div>
 				</a>
 			</div>
-			<div></div>
 			<div id='guestFeeds' style="display:none">
 				<div id='deleteme'>
 					<div class='vidcon directorMargins' id='fakeguest1' style='min-height: 300px;text-align: center;'><h2><span data-translate="guest-1">Guest 1</span></h2><i class='las la-user-circle' style='font-size:8em; margin: 20px 0px;' aria-hidden='true'></i></div>
@@ -1372,12 +1371,30 @@
 		<!-- Guest & Director Control-Buttons Box -->
 		<div id="controls_blank" class="hidden controlCenterBox">
 			<div class="controlsGrid">
+				<!-- Volume & Mute Controls -->
+				<div class="row fourth">
+					<span class="tooltip" style="border: 0;">
+						<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest; updates on release. Dbl-click to reset." oninput="remoteVolumeUI(this)" onchange="remoteVolume(this);" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" />
+						<span class="tooltiptext" style='overflow: auto;left: 35%;width: 3em;top: -15px;margin: 0;position: absolute;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span>
+					</span>
+					<button data-action-type="mute-guest" class="center" value="0" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
+						<i class="las la-microphone-slash"></i>
+					</button>
+				</div>
 				<!-- General Controls -->
 				<div class="row two"> 
-					<button data-action-type="forward" class="mainonly advanced" title="Move the user to another room, controlled by another director" onclick="directMigrate(this, event);">
-						<i class="las la-paper-plane"></i>
-						<span data-translate="forward-to-room">Transfer</span>
-					</button>
+                    <!-- Video Feed Quality -->
+                    <div class="row three">
+                        <button class="" data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
+                            <i class="las la-video-slash"></i>
+                        </button>
+                        <button class="pressed" data-action-type="change-quality2" title="Low-Quality Preview" onclick="toggleQualityDirector(50, this.dataset.UUID, this);">
+                            <i class="las la-video"></i>
+                        </button>
+                        <button class="" data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, this.dataset.UUID, this);">
+                            <i class="las la-binoculars"></i>
+                        </button>
+                    </div>
 					<button data-action-type="direct-chat" class="mainonly" title="Send a Direct Message to this user." onclick="directorSendMessage(this);">
 						<i class="las la-envelope"></i>
 						<span data-translate="send-direct-chat">Message</span>
@@ -1400,50 +1417,66 @@
 						</button>
 					</span>	
 
+					<button data-action-type="forward" class="mainonly advanced" title="Move the user to another room, controlled by another director" onclick="directMigrate(this, event);">
+						<i class="las la-paper-plane"></i>
+						<span data-translate="forward-to-room">Transfer</span>
+					</button>
 					<button data-action-type="hangup" class="mainonly"  title="Force the user to Disconnect. They can always reconnect." onclick="directHangup(this, event);">
 						<i class="las la-sign-out-alt"></i>
 						<span data-translate="disconnect-guest">Hangup</span>
-
 					</button>
+                </div>
+                <div class="flexBreak"><span>Guest Toggle</span></div>
+				<div class="row two"> 
 					<button data-action-type="solo-chat" class="mainonly advanced" title="Toggle solo voice chat or hold CTRL/CMD when selecting to make it two-way private." onclick="session.toggleSoloChat(this.dataset.UUID, event);">
 						<i class="las la-microphone"></i>
 						<span data-translate="voice-chat">Solo Talk</span>
 					</button>
-
 					<button data-action-type="solo-video" class="advanced" title="Solo this video everywhere. (Hold CTRL/CMD to just make video larger)" onclick="requestInfocus(this, event);">
 						<i class="las la-user"></i>
 						<span data-translate="solo-video">Highlight guest</span>
 					</button>
-					<button data-action-type="addToScene" class="btn-HL-peach advanced" title="Add this Video to any remote '&scene=1'" data-scene="1" onclick="directEnable(this, event);">
-						<i class="las la-plus-square"></i>
-						<span data-translate="add-to-scene">add to scene 1</span>
-					</button>
-				</div>
-				
-				<!-- Volume & Mute Controls -->
-				<div class="row fourth">
-					<span class="tooltip" style="border: 0;">
-						<input data-action-type="volume" type="range" min="0" max="200" value="100" title="Remotely change the volume of this guest; updates on release. Dbl-click to reset." oninput="remoteVolumeUI(this)" onchange="remoteVolume(this);" ondblclick="this.value=100;remoteVolume(this);remoteVolumeUI(this);" />
-						<span class="tooltiptext" style='overflow: auto;left: 35%;width: 3em;top: -15px;margin: 0;position: absolute;font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus,Code2000, Code2001, Code2002, Musica, serif, LastResort;' >100</span>
-					</span>
-					<button data-action-type="mute-guest" class="center" value="0" title="Mute this guest everywhere" onclick="remoteMute(this, event);">
-						<i class="las la-microphone-slash"></i>
-					</button>
-				</div>
-				
-
-				<!----	  /////// DROPDOWN BREAK ////////			-->
-				<span class="hideDropMenu" onclick="toggleByDataset('1');getById('chevarrow3').classList.toggle('bottom');getById('chevarrow3').classList.toggle('right');">
+                    <button data-action-type="mute-video-guest" title="Disable this guest's video track" onclick="remoteMuteVideo(this, event);">
+                        <i class="las la-video-slash"></i>
+                        <span data-translate="mute-video-guest">disable video</span>
+                    </button>
+                    <button data-action-type="hide-guest" title="Hide this guest everywhere" onclick="remoteHideVideo(this, event);">
+                        <i class="las la-user-slash"></i>
+                        <span data-translate="hide-guest">hide guest</span>
+                    </button>
+                    <button class="mainonly" data-action-type="toggle-remote-speaker" title="Toggle the remote guest's speaker output" onclick="remoteSpeakerMute(this, event);">
+                        <i class="las la-volume-off"></i> <span data-translate="toggle-remote-speaker">Deafen Guest</span>
+                    </button>
+                    <button class="mainonly" data-action-type="toggle-remote-display" title="Toggle the remote guest's display output" onclick="remoteDisplayMute(this, event);">
+                        <i class="las la-eye-slash"></i> <span data-translate="toggle-remote-display">Blind Guest</span>
+                    </button>
+                </div>
+                <div class="flexBreak"><span>Settings</span></div>
+				<div class="row two"> 
+                    <!-- Further Audio/Video Settings -->
+                    <div class="row two" data-cluster="3">
+                        <button data-action-type="advanced-audio-settings" data-active="false" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
+                            <i class="las la-sliders-h"></i>
+                            <span data-translate="advanced-audio-settings">Audio</span>
+                        </button>
+                        <button class="mainonly" data-action-type="advanced-camera-settings" data-active="false" title="Advanced Video Settings" onclick="requestVideoSettings(this);">
+                            <i class="las la-sliders-h"></i>
+                            <span data-translate="advanced-camera-settings">Video</span>
+                        </button>
+                    </div>
+				</div>				
+                <div class="flexBreak"><span>More</span></div>
+				<button class="hideDropMenu" onclick="toggleByDataset('1');getById('chevarrow3').classList.toggle('bottom');getById('chevarrow3').classList.toggle('right');">
 					<i id="chevarrow3" style="padding:0px 7px 0 3px;" class="chevron right" aria-hidden="true"></i>
-					<span data-translate="More-scene-options">More scene options</span>
-				</span>
+					<span data-translate="More-scene-options">Scene options</span>
+				</button>
 				<div class="group hidden" data-cluster="1">
-					<!-- General Controls -->
+					<!-- Scene Controls -->
 					<div class="row two">
-						<button data-action-type="stats-remote" title="Request the statistics of this video in any active scene" onclick="toggleSceneStats(this);">
-							<i class="las la-info-circle"></i>
-							<span data-translate="stats-remote">Scene Stats</span>
-						</button>
+                        <button data-action-type="addToScene" class="advanced" title="Add this Video to any remote '&scene=1'" data-scene="1" onclick="directEnable(this, event);">
+                            <i class="las la-plus-square"></i>
+                            <span data-translate="add-to-scene">add to scene 1</span>
+                        </button>
 						<button data-action-type="mute-scene" title="Remotely Mute this Audio in all remote '&scene' views" onclick="directMute(this, event);">
 							<i class="las la-microphone-slash"></i>
 							<span data-translate="mute-scene">mute in scenes</span>
@@ -1451,7 +1484,7 @@
 					</div>
 
 					<!-- Row of Scenes -->
-					<div class="row four advanced">
+					<div class="row six advanced">
 						<button class="btn-HL-peach" data-action-type="addToScene" data-scene="2" title="Add to Scene 2" onclick="directEnable(this, event);">
 							<span>S2</span>
 						</button>
@@ -1464,22 +1497,19 @@
 						<button class="btn-HL-peach" data-action-type="addToScene" data-scene="5" title="Add to Scene 5" onclick="directEnable(this, event);">
 							<span>S5</span>
 						</button>
-
 						<button class="btn-HL-peach" data-action-type="addToScene" data-scene="6" title="Add to Scene 6" onclick="directEnable(this, event);">
 							<span>S6</span>
 						</button>
 						<button class="btn-HL-peach" data-action-type="addToScene" data-scene="7" title="Add to Scene 7" onclick="directEnable(this, event);">
 							<span>S7</span>
 						</button>
-						<button class="btn-HL-peach" data-action-type="addToScene" data-scene="8" title="Add to Scene 8" onclick="directEnable(this, event);">
-							<span>S8</span>
-						</button>
-						<button class="btn-HL-peach" data-action-type="addToScene" data-scene="9" title="Add to Scene 9" onclick="directEnable(this, event);">
-							<span>S9</span>
-						</button>
 					</div>
+
+                    <button data-action-type="stats-remote" title="Request the statistics of this video in any active scene" onclick="toggleSceneStats(this);">
+                        <i class="las la-info-circle"></i>
+                        <span data-translate="stats-remote">Scene Stats</span>
+                    </button>
                     <!-- Graph Section for Scenes -->
-                    
 					<div class="row two advanced">
                         <span class="graphSection hidden" data-action-type="stats-graphs-bitrate" >
                             <span class="hidden" data-message="true" data-no-scenes="true">No scenes active</span>
@@ -1496,35 +1526,30 @@
                     </div>
                 </div>
 				
-
-				<!----	  /////// DROPDOWN BREAK ////////			-->
-				<span class="hideDropMenu" onclick="toggleByDataset('2');getById('chevarrow4').classList.toggle('bottom');getById('chevarrow4').classList.toggle('right');">
+				<button class="hideDropMenu" onclick="toggleByDataset('2');getById('chevarrow4').classList.toggle('bottom');getById('chevarrow4').classList.toggle('right');">
 					<i id="chevarrow4" class="chevron right" aria-hidden="true" style="padding:0px 7px 0 3px;" ></i>
-					<span data-translate="additional-controls">Additional controls</span>
-				</span>
+					<span data-translate="additional-controls">Controls</span>
+				</button>
 				<div class="group hidden" data-cluster="2">
 					<!-- General Controls -->
 					<div class="row two">
-						<button data-action-type="hide-guest" title="Hide this guest everywhere" onclick="remoteHideVideo(this, event);">
-							<i class="las la-user-slash"></i>
-							<span data-translate="hide-guest">hide guest</span>
+						<!-- Mix Order Control -->
+						<span class="row three advanced" data-action-type="ordering">
+							<button class="center" data-action-type="order-down" title="Shift this Video Down in Order" onclick="changeOrder(-1,this.dataset.UUID);">
+								<span data-translate="order-down"><i class="las la-minus"></i></span>
+							</button>
+							<span class="orderspan">
+								<p style="text-align: center;font-size: 150%;" data-action-type="order-value" title="Current Index Order of this Video">0</p>
+								<p class="order-label">Mix Order</p>
+							</span>
+							<button class="center" data-action-type="order-up" title="Shift this Video Up in Order" onclick="changeOrder(1,this.dataset.UUID);">
+								<i class="las la-plus"></i>
+							</button>
+						</span>
+						<button class="mainonly" data-action-type="create-timer"  title="Set a countdown timer that this guest sees. CTRL (cmd) + click to pause." onclick="directTimer(this, event);">
+							<i class="las la-clock"></i>
+							<span data-translate="create-timer">Create Timer</span>
 						</button>
-						<button data-action-type="mute-video-guest" title="Disable this guest's video track" onclick="remoteMuteVideo(this, event);">
-							<i class="las la-video-slash"></i>
-							<span data-translate="mute-video-guest">disable video</span>
-						</button>
-						<button class="mainonly" data-action-type="toggle-remote-speaker" title="Toggle the remote guest's speaker output" onclick="remoteSpeakerMute(this, event);">
-							<i class="las la-volume-off"></i> <span data-translate="toggle-remote-speaker">Deafen Guest</span>
-						</button>
-						
-						<button class="mainonly" data-action-type="toggle-remote-display" title="Toggle the remote guest's display output" onclick="remoteDisplayMute(this, event);">
-							<i class="las la-eye-slash"></i> <span data-translate="toggle-remote-display">Blind Guest</span>
-						</button>
-						<button class="mainonly" data-action-type="change-url" title="Remotely reload the guest's page with a new URL" onclick="directPageReload(this, event);">
-							<i class="las la-sync"></i>
-							<span data-translate="change-url">Change URL</span>
-						</button>
-
 						<button data-action-type="recorder-local" title="Start Recording this remote stream to this local drive. *experimental*'" onclick="recordVideo(this, event)">
 							<i class="las la-compact-disc"></i>
 							<span data-translate="record-local"> Record Local</span>
@@ -1533,21 +1558,18 @@
 							<i class="las la-compact-disc"></i>
 							<span data-translate="record-remote"> Record Remote</span>
 						</button>
-						
 						<button  class="mainonly" data-action-type="change-params" style="display:none" title="Change user parameters" onclick="promptUser('transferSettingsTemplate', this.dataset.UUID);">
 							<i class="las la-cog"></i>
 							<span data-translate="change-params">URL Params</span>
 						</button>
-						
+						<button class="mainonly" data-action-type="change-url" title="Remotely reload the guest's page with a new URL" onclick="directPageReload(this, event);">
+							<i class="las la-sync"></i>
+							<span data-translate="change-url">Change URL</span>
+						</button>
 						<button  class="mainonly" data-action-type="open-file-share"  title="Allow the guest to select a file to upload to the director. Once shared, it will show in the chat as a download link." onclick="requestFileUpload(this)">
 							<i class="las la-file-upload"></i>
 							<span data-translate="request-upload"> Request File</span>
 						</button>
-						
-						<button class="mainonly" data-action-type="create-timer"  title="Set a countdown timer that this guest sees. CTRL (cmd) + click to pause." onclick="directTimer(this, event);">
-							<i class="las la-clock"></i>
-							<span data-translate="create-timer">Create Timer</span>
-						</button>
 					</div>
 					
 					<!-- Row of Channels -->
@@ -1593,49 +1615,6 @@
 							<span>G6</span>
 						</button>
 					</div>
-
-					<!-- General Controls -->
-					<div class="row two">
-						<!-- Mix Order Control -->
-						<span class="row three advanced" data-action-type="ordering">
-							<button class="center" data-action-type="order-down" title="Shift this Video Down in Order" onclick="changeOrder(-1,this.dataset.UUID);">
-								<span data-translate="order-down"><i class="las la-minus"></i></span>
-							</button>
-							<span class="orderspan">
-								<p style="text-align: center;font-size: 150%;" data-action-type="order-value" title="Current Index Order of this Video">0</p>
-								<p class="order-label">Mix Order</p>
-							</span>
-							<button class="center" data-action-type="order-up" title="Shift this Video Up in Order" onclick="changeOrder(1,this.dataset.UUID);">
-								<i class="las la-plus"></i>
-							</button>
-						</span>
-
-						<!-- Video Feed Quality -->
-						<div class="row three">
-							<button class="center" data-action-type="change-quality1" title="Disable Video Preview" onclick="toggleQualityDirector(0, this.dataset.UUID, this);">
-								<i class="las la-video-slash"></i>
-							</button>
-							<button class="pressed" data-action-type="change-quality2" title="Low-Quality Preview" onclick="toggleQualityDirector(50, this.dataset.UUID, this);">
-								<i class="las la-video"></i>
-							</button>
-							<button class="center" data-action-type="change-quality3" title="High-Quality Preview" onclick="toggleQualityDirector(1200, this.dataset.UUID, this);">
-								<i class="las la-binoculars"></i>
-							</button>
-						</div>
-					</div>
-					 
-					<!-- Further Audio/Video Settings -->
-					<div class="row two" data-cluster="3">
-						<button data-action-type="advanced-audio-settings" data-active="false" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
-							<i class="las la-sliders-h"></i>
-							<span data-translate="advanced-audio-settings">Audio Settings</span>
-						</button>
-						<button class="mainonly" data-action-type="advanced-camera-settings" data-active="false" title="Advanced Video Settings" onclick="requestVideoSettings(this);">
-							<i class="las la-sliders-h"></i>
-							<span data-translate="advanced-camera-settings">Video Settings</span>
-						</button>
-					</div>
-
 				</div>
 			</div>
 		</div>
diff --git a/lib.js b/lib.js
index ad792a3..f93dd6d 100644
--- a/lib.js
+++ b/lib.js
@@ -16568,7 +16568,7 @@ function createControlBox(UUID, soloLink, streamID) {
 
 	var handsID = "hands_" + UUID;
 
-	controls.innerHTML += "<div>";
+	controls.innerHTML += "<div class='flexBreak'><span>Links</span></div>"; //Seems to create an empty div.
 	
 	if (session.hidesololinks==false){
 		controls.innerHTML += "<div class='soloButton' title='A direct solo view of the video/audio stream with nothing else. Its audio can be remotely controlled from here'> \
diff --git a/main.css b/main.css
index 43f7631..e327f64 100644
--- a/main.css
+++ b/main.css
@@ -9,6 +9,7 @@
     --discord-grey-5: #313338;
     --discord-grey-6: #383a40;
     --discord-grey-7: #404249; 
+    --discord-grey-8: #5e6064; 
     --discord-text: hsl( 210 calc(1 * 9.1%) 87.1% /1);
 
     --darktheme-blue: rgb(33 69 114);
@@ -610,19 +611,19 @@ body.darktheme .credits>a:visited {
 	height: 0.32em;
 	left: 0.15em;
 	position: relative;
-	top: .43em;
+	/* top: .43em; */
 	transform: rotate(-45deg);
 	vertical-align: top;
 	width: 0.32em;
 }
 
 .chevron.bottom::before {
-	top: .28em;
+	/* top: .28em; */
 	transform: rotate(135deg);
 }
 
 .chevron.right::before {
-	top: .28em;
+	/* top: .28em; */
 	transform: rotate(45deg);
 }
 
@@ -648,9 +649,9 @@ body.darktheme .credits>a:visited {
     display: flex;
     flex-direction: column;
     padding: 5px;
-    max-height: 400px;
+    max-height: 220px;
     overflow-y: auto;
-    border-radius: 0px 0px 4px 4px;
+    border-radius: 4px;
     background-color: #ccc;
     width: 100%;
     gap: 4px;
@@ -3526,7 +3527,6 @@ div#chatBody a {
 }
 a.task {
 	width: 100%;
-	margin-top: 10px;
 }
 .directorBlock h2 {
 	text-transform: uppercase;
@@ -3595,9 +3595,9 @@ div#roomnotes2 {
 }
 
 .darktheme .controlsGrid .group {
-    background-color: var(--discord-grey-2);
-    border: 1px solid var(--discord-grey-6);
-    border-top: 1px solid var(--discord-grey-0);
+    background-color: var(--discord-grey-3);
+    border: 1px solid var(--discord-grey-8);
+    border-top: 1px solid var(--discord-grey-2);
 }
 
 .controlsGrid .group {
@@ -3677,11 +3677,12 @@ div#roomnotes2 {
 
 /* Specitic CSS for different elements inside the guest control-buttons */
 .darktheme .controlsGrid .director-message-box {
-    background-color: var(--discord-grey-1);
+    background-color: var(--discord-grey-3);
+    border: 1px solid var(--discord-grey-8);
 }
 
 .darktheme .controlsGrid .director-message-box button {
-    background-color: var(--discord-grey-3);
+    background-color: var(--discord-grey-6);
 }
 
 .controlsGrid .director-message-box {
@@ -3696,7 +3697,8 @@ div#roomnotes2 {
 }
 
 .darktheme .controlsGrid .director-message-box textarea {
-    background-color: var(--discord-grey-4);
+    background-color: var(--discord-grey-6);
+    border: 1px solid var(--discord-grey-7);
     color: var(--discord-text);
 }
 
@@ -3734,7 +3736,7 @@ div#roomnotes2 {
     font-size: 12px;
 }
 
-.darktheme .controlsGrid .hideDropMenu:hover {
+/* .darktheme .controlsGrid .hideDropMenu:hover {
     filter: brightness(1.2);
     background-color: var(--discord-grey-2);
 }
@@ -3742,23 +3744,16 @@ div#roomnotes2 {
 .darktheme .controlsGrid .hideDropMenu {
     background-color: var(--discord-grey-2);
     border: 1px solid var(--discord-grey-6);
-}
+} */
 
-.controlsGrid .hideDropMenu:hover {
+/* .controlsGrid .hideDropMenu:hover {
     background-color: white;
-}
+} */
 
 .controlsGrid .hideDropMenu{
-    user-select: none;
     width: 100%;
-    font-size: 80%;
-    cursor: pointer;
-    background-color: #bbb;
-    border-radius: 4px;
-    padding: 4px 4px 5px 4px;
-    margin-bottom: 0px;
-    border: 1px solid #ddd;
-    box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
+    border: 1px solid var(--discord-grey-8);
+    background-color: var(--discord-grey-5) !important;
 }
 .controlsGrid .orderspan {
 	font-size: 50%;
@@ -3776,8 +3771,8 @@ div#roomnotes2 {
 }
 
 /* Hightlight */
-[data-action-type="solo-video"] {
-    box-shadow: 0 0 3px rgb(175 165 122), inset 0 0 2px yellow;
+.controlsGrid button[data-action-type="solo-video"] {
+    box-shadow: 1px 1px 3px rgba(0,0,0,0.75), inset 0px 0px 3px rgb(255,255,0,0.5);
 }
 
 /* Hightlights for buttons in the guest control-buttons */
@@ -3831,9 +3826,36 @@ div#roomnotes2 {
 	right: 10px;
 }
 .controlCenterBox{
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
     padding: 5px;
 }
 
+.darktheme .controlCenterBox .flexBreak {
+    border-bottom: 1px double var(--discord-grey-7);
+}
+
+.controlCenterBox .flexBreak {
+    width: 100%;
+    border-bottom: 1px #ccc double;
+    margin: 4px 0px;
+    position: relative;
+    user-select: none;
+}
+
+.controlCenterBox .flexBreak span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-transform: uppercase;
+    font-size: 10px;
+    text-shadow: 0px 0px 1px var(--discord-text);
+    background-color: var(--discord-grey-3);
+    padding: 0px 4px;
+}
+
 .contolboxLabel {
 	float: left;
 	top: 2px;

From 4941f7df645cd8b46a1a52d023d70951918f74df Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Sat, 15 Apr 2023 02:22:50 +0200
Subject: [PATCH 2/5] Now includes working &lightmode

---
 main.css | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/main.css b/main.css
index e327f64..525d554 100644
--- a/main.css
+++ b/main.css
@@ -3736,24 +3736,14 @@ div#roomnotes2 {
     font-size: 12px;
 }
 
-/* .darktheme .controlsGrid .hideDropMenu:hover {
-    filter: brightness(1.2);
-    background-color: var(--discord-grey-2);
-}
 
 .darktheme .controlsGrid .hideDropMenu {
-    background-color: var(--discord-grey-2);
-    border: 1px solid var(--discord-grey-6);
-} */
-
-/* .controlsGrid .hideDropMenu:hover {
-    background-color: white;
-} */
+    border: 1px solid var(--discord-grey-8);
+    background-color: var(--discord-grey-5);
+}
 
 .controlsGrid .hideDropMenu{
     width: 100%;
-    border: 1px solid var(--discord-grey-8);
-    background-color: var(--discord-grey-5) !important;
 }
 .controlsGrid .orderspan {
 	font-size: 50%;
@@ -3844,6 +3834,12 @@ div#roomnotes2 {
     user-select: none;
 }
 
+.darktheme .controlCenterBox .flexBreak span {
+    text-shadow: 0px 0px 1px var(--discord-text);
+    background-color: var(--discord-grey-3);
+	color: var(--discord-text);
+}
+
 .controlCenterBox .flexBreak span {
     position: absolute;
     top: 50%;
@@ -3852,7 +3848,8 @@ div#roomnotes2 {
     text-transform: uppercase;
     font-size: 10px;
     text-shadow: 0px 0px 1px var(--discord-text);
-    background-color: var(--discord-grey-3);
+	color: var(--discord-text);
+    background-color: #7E7E7E;
     padding: 0px 4px;
 }
 
@@ -5089,7 +5086,6 @@ body.darktheme select{
 } */
 body.darktheme .directorsgrid .vidcon {
     background-color: var(--discord-grey-3);
-	color: var(--discord-text);
 }
 body.darktheme .promptModal {
     background-color: var(--discord-grey-5);

From 40ba5bc6c50f54af00f3f67c77d7ffb674b94822 Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Sat, 15 Apr 2023 02:31:55 +0200
Subject: [PATCH 3/5] Two additional color fixes.

---
 main.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/main.css b/main.css
index 525d554..7b172af 100644
--- a/main.css
+++ b/main.css
@@ -3579,6 +3579,10 @@ div#roomnotes2 {
 	text-transform: capitalize;
 }
 
+#yourDirectorStatus {
+    color: var(--discord-text);
+}
+
 /* ---- DIRECTORS PAGE - Guest Controls Box ---- */
 .darktheme .controlCenterBox button {
     background-color: var(--discord-grey-7);
@@ -3644,7 +3648,6 @@ div#roomnotes2 {
     padding: 5px;
     border-radius: 4px;
     gap: 2px;
-    /* background-color: white; */
     box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
 }
 
@@ -3745,6 +3748,11 @@ div#roomnotes2 {
 .controlsGrid .hideDropMenu{
     width: 100%;
 }
+
+.darktheme .controlsGrid .orderspan {
+    color: var(--discord-text);
+}
+
 .controlsGrid .orderspan {
 	font-size: 50%;
 	display: flex;

From bfa4bc835884c5be2797533adff6139456f29c4d Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Sat, 15 Apr 2023 02:32:24 +0200
Subject: [PATCH 4/5] Director colorscheme on bnts (was still previous)

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 0991e70..7eae275 100644
--- a/index.html
+++ b/index.html
@@ -1632,11 +1632,11 @@
 						<i class="las la-microphone-slash"></i>
 						<span data-translate="mute-scene">mute in scene</span>
 					</button>
-					<button data-action-type="solo-video" class="btn-HL-yellow" title="Solo this video everywhere. (Hold CTRL/CMD to just make video larger)" onclick="requestInfocus(this, event);">
+					<button data-action-type="solo-video" class="" title="Solo this video everywhere. (Hold CTRL/CMD to just make video larger)" onclick="requestInfocus(this, event);">
 						<i class="las la-user"></i>
 						<span data-translate="solo-video-director">Highlight</span>
 					</button>
-					<button data-action-type="addToScene" data-scene="1" class="btn-HL-peach" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event, true);">
+					<button data-action-type="addToScene" data-scene="1" class="" title="Add this Video to any remote '&scene=1'" onclick="directEnable(this, event, true);">
 						<i class="las la-plus-square"></i>
 						<span data-translate="add-to-scene">add to scene 1</span>
 					</button>

From 76a1a3ef3501856921f449978f0ba66943d6ecfb Mon Sep 17 00:00:00 2001
From: lindenkron <lindenkron@hotmail.com>
Date: Sat, 15 Apr 2023 02:56:27 +0200
Subject: [PATCH 5/5] settingsWrapper for audio/video settings

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 7eae275..e8e7881 100644
--- a/index.html
+++ b/index.html
@@ -1454,7 +1454,7 @@
                 <div class="flexBreak"><span>Settings</span></div>
 				<div class="row two"> 
                     <!-- Further Audio/Video Settings -->
-                    <div class="row two" data-cluster="3">
+                    <div class="row two settingsWrapper" data-cluster="3">
                         <button data-action-type="advanced-audio-settings" data-active="false" title="Remote Audio Settings" onclick="requestAudioSettings(this);">
                             <i class="las la-sliders-h"></i>
                             <span data-translate="advanced-audio-settings">Audio</span>