mc fix + mixer bg fix

index.html

@@ -56,7 +56,7 @@
 		<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
 		<meta name="msapplication-TileColor" content="#da532c" />
 		<meta name="theme-color" content="#ffffff" />
-		<link rel="stylesheet" href="./main.css?ver=288" />
+		<link rel="stylesheet" href="./main.css?ver=289" />
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script>
 		<style id="lightbox-animations" type="text/css"></style>
 		<!-- <link rel="manifest" href="manifest.json" /> -->
@@ -83,7 +83,7 @@
 		
 		<script type="text/javascript" crossorigin="anonymous"  src="./thirdparty/CodecsHandler.js?ver=47"></script>
 		<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></script>
-		<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=607"></script>
+		<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=610"></script>
 		<input id="zoomSlider" type="range" style="display: none;" />
 		<span id="electronDragZone" style="pointer-events: none; z-index:-10; position:absolute;top:0;left:0;width:100%;height:2%;-webkit-app-region: drag;min-height:20px;"></span>
 		<div id="header">
@@ -2494,11 +2494,11 @@
 			// session.hidehome = true; // If used, 'hide home' will make the landing page inaccessible, along with hiding a few go-home elements.
 			// session.record = false; // uncomment to block users from being able to record via vdo.ninja's built in recording function
 		</script>
-		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=729"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=730"></script>
 		<!-- 
 		// If you wish to change branding, blank offers a good clean start.
 		<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
 		-->
-		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=587"></script>
+		<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=588"></script>
 	</body>
 </html>

main.css

@@ -2,6 +2,7 @@
     /* Discord Greys - Dark to Lighter */
     --discord-grey-0: #121212;
     --discord-grey-1: #1e1f22;
+	--discord-grey-1a: #1e1f22;
     --discord-grey-2: #232428;
     --discord-grey-3: #2b2d31;
     --discord-grey-4: #2e3035;
@@ -1220,6 +1221,7 @@ button.glyphicon-button.active.focus {
     display: flex;
     position: fixed;
     z-index: 995;
+    padding: 0px 10px;
     bottom: 10px;
     border: 0;
     min-height: 52px;
@@ -1245,7 +1247,7 @@ button.glyphicon-button.active.focus {
     justify-content: center;
     flex-wrap: wrap;
     bottom: 3px;
-	min-width: 230px;
+    min-width: 230px;
 }
 
 #subControlButtons:empty{
@@ -1294,7 +1296,7 @@ button.glyphicon-button.active.focus {
 
 @media only screen and (max-width: 640px){
 	#controlButtons {
-		transform: scale(0.9);
+		/* transform: scale(0.9); */
 	}
 	
 	.labelSmall {
@@ -1323,13 +1325,13 @@ button.glyphicon-button.active.focus {
 }
 @media only screen and (max-width: 400px){
 	#controlButtons {
-		transform: scale(0.8);
+		/* transform: scale(0.8); */
 	}
 	
 }
 @media only screen and (max-width: 300px){
 	#controlButtons {
-		transform: scale(0.7);
+		/* transform: scale(0.7); */
 	}	
 }
 
@@ -1402,7 +1404,7 @@ button.btnArmTransferRoom.selected{
 		height:85%
 	}
 	#controlButtons {
-        transform: scale(0.9);
+        /* transform: scale(0.9); */
 	}
 	#header{
 		min-height:0px;
@@ -1422,7 +1424,7 @@ button.btnArmTransferRoom.selected{
 		height:78%
 	}
 	#controlButtons {
-        transform: scale(0.8);
+        /* transform: scale(0.8); */
 	}
 }
 @media only screen and (max-height: 190px){
@@ -1435,7 +1437,7 @@ button.btnArmTransferRoom.selected{
 		height:70%
 	}
 	#controlButtons {
-        transform: scale(0.7);
+        /* transform: scale(0.7); */
 	}
 }
 @media only screen and (max-height: 120px){
@@ -1842,10 +1844,14 @@ input[type=range]:focus::-ms-fill-upper {
 		display: none!important;
 	}
 }
-@media only screen and (max-width: 641px) {
+@media only screen and (max-width: 700px) {
 	#fakeguest2{
 		display: none!important;
 	}
+    #subControlButtons {
+        position: unset;
+        min-width: unset;
+    }
 }
 @media only screen and (max-width: 292px) {
 	#fakeguest1{
@@ -1919,11 +1925,11 @@ input[type=range]:focus::-ms-fill-upper {
 		min-width: 90% !important;
 		overflow: hidden !important;
 	}
-	#popupSelector {
+	/* #popupSelector {
 		padding: 20px 5px 0px 15px !important;
 		font-size: 92%;
 		width: 385px !important
-	}
+	} */
 	.popupSelector_constraints{
 		margin:25px 15% 0 1%;
 	}
@@ -1944,16 +1950,16 @@ input[type=range]:focus::-ms-fill-upper {
 		margin:20px 12% 0 2%;
 	}
 
-	#popupSelector {
+	/* #popupSelector {
 		padding: 0 0 20px 0 !important;
-	}
+	} */
 }
 
-@media only screen and (max-height: 330px) {
+/* @media only screen and (max-height: 330px) {
 	#popupSelector {
 		font-size: 92%;
 	}
-}
+} */
 
 
 #popupSelector_user_settings label{
@@ -1998,13 +2004,18 @@ input[type=range]:focus::-ms-fill-upper {
 	position: fixed;
 	top: 0px;
 	height: 90%;
-	width: 505px;
+	max-width: 505px;
+    max-width: 100%;
 	right: -400px;
 	overflow: auto;
 	z-index: 4;
 	-webkit-app-region: no-drag;
 }
 
+#popupSelector div {
+    max-width: 100%;
+}
+
 #audioSourceScreenshare {
 	display:block;
 	height: 60px;
@@ -3892,7 +3903,7 @@ div#roomnotes2 {
 }
 
 .darktheme div#guestFeeds {
-    background-color: var(--discord-grey-1)
+    background-color: var(--discord-grey-1a)
 }
 
 div#guestFeeds {

main.js

@@ -1471,6 +1471,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
 		document.documentElement.style.setProperty('--background-color', '#0000');
 		document.documentElement.style.setProperty('--regular-margin', '0');
 		document.documentElement.style.setProperty('--director-margin', '0 25px 0 0');
+		document.documentElement.style.setProperty('--discord-grey-1a', '#0000');
 		getById("directorLinksButton").style.color = "black";
 		getById("main").style.overflow = "hidden";
 	}