removed 2px gap between menus and controls

Author: fquirin

www/css/sepiaFW-skin-grid.css

@@ -32,10 +32,13 @@ html {
 	margin-top: 1px;
 }
 #sepiaFW-chat-controls {
-	background: linear-gradient(rgba(5,25,45,0), #051525, #051525);
+	background: linear-gradient(rgba(5,25,45,0), #051525, #051525) !important;
 	border-bottom: 1px solid #051525;
 	overflow: visible;
 }
+#sepiaFW-chat-controls.chat-menu {
+	background: #051525;
+}
 
 #sepiaFW-main-window {
 	color: #fff;
@@ -46,7 +49,7 @@ html {
 
 #sepiaFW-main-window button,
 .sepiaFW-touch-device #sepiaFW-main-window button:hover {
-	background: rgba(16, 32, 48, 0.75);;
+	background: transparent;
 	color: #15abc3;
 }
 .sepiaFW-notouch-device #sepiaFW-main-window button:hover {
@@ -57,7 +60,7 @@ html {
 .sepiaFW-notouch-device #sepiaFW-chat-controls button:hover,
 .sepiaFW-notouch-device #sepiaFW-nav-bar button:hover {
 	background: transparent;
-	text-shadow: 0px 0px 2px #fff
+	text-shadow: 0px 0px 2px #fff;
 }
 #sepiaFW-login-form button {
 	background: rgba(20, 163, 187, 0.66);
@@ -101,6 +104,11 @@ html {
 #sepiaFW-chat-menu {
 	background: rgba(21, 171, 195, 1.00); 
 	color: #fff;
+	box-shadow: inset 0 0 5px 1px #fff;
+	height: calc(100% - 106px);
+}
+#sepiaFW-chat-menu:not(.full-screen) {
+	padding-bottom: 4px;
 }
 #sepiaFW-chat-menu-head-border {
     background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.5) 60%,rgba(0,0,0,0) 100%);
@@ -122,6 +130,11 @@ html {
 	background: #102030;
 	color: #fff;
 }
+#sepiaFW-chat-controls-more-menu {
+	box-shadow: inset 0 0 5px 1px #fff;
+	bottom: 56px;
+	padding-bottom: 4px;
+}
 #sepiaFW-chat-controls-more-menu button {
 	background: #102030;
 	color: #ECEBE7;
@@ -141,20 +154,23 @@ html {
 	border: 1px solid #15abc3;
 	box-shadow: 0 0 5px #15abc3;
 	color: #fff;
+	background: rgba(16, 32, 48, 0.75);
 }
 
+/*
 #sepiaFW-myEvents-buttons button,
 #sepiaFW-myEvents-buttons-replaced button,
 .sepiaFW-touch-device #sepiaFW-myEvents-buttons button {
-    background: #102030;
+    background: rgba(16, 32, 48, 0.75);
 	color: #fff;
-	border: 1px solid #fff !important;
+	border: 1px solid #15abc3 !important;
     box-shadow: 0 0 5px #fff !important;
 }
 #sepiaFW-myEvents-buttons button:hover {
 	background: #fff;
 	color: #102030;
 }
+*/
 /*
 #sepiaFW-main-window .chat-buttons-area button,
 .sepiaFW-touch-device #sepiaFW-main-window .chat-buttons-area button {

www/css/sepiaFW-skin-neo-sepia-dark.css

@@ -135,12 +135,12 @@ html {
 }
 
 .sepiaFW-notouch-device #sepiaFW-main-window .chat-buttons-area button:hover {
-    background-color: #b4df18 !important;
+    background-color: #ceff1a !important;
 	color: #101418 !important;
 }
 #sepiaFW-main-window .chat-buttons-area button {
-    background: #ceff1a !important;
-	color: #101418 !important
+    background: #2d3034 !important;
+	color: #fff !important
 }
 #sepiaFW-main-window .chat-buttons-area .my-view-custom-button {
 	background-color: #08a0c8 !important;

www/css/sepiaFW-skin-study.css

@@ -72,7 +72,7 @@ html {
 	border-color: #23292e;
 }
 #sepiaFW-assist-btn {
-	background: linear-gradient(to right, #999 0%, #222 100%) !important;
+	background: linear-gradient(to right, #999 0%, #405365 100%) !important;
 	/*background: linear-gradient(to right, #CEFF1A 0%, #16ABC3 100%) !important;*/
 }
 .sepiaFW-notouch-device #sepiaFW-assist-btn:hover {

www/css/sepiaFW-style.css

@@ -646,20 +646,20 @@ body {
 	    -ms-flex-direction: column;
 	        flex-direction: column;
     position: absolute;
-    left: 2px;
-	top: 52px;
-    padding: 4px 8px 4px 8px;
-    height: calc(100% - 109px);
-	width: calc(100% - 4px);
+    left: 0px;
+	top: 50px;
+    padding: 4px 8px 59px 8px;
+    height: calc(100% - 50px);
+	width: calc(100% - 0px);
 	overflow: auto;
 	-webkit-overflow-scrolling: touch;
 	font-size: 21px;
 	text-align: center;
 	z-index: 5;
 }
 #sepiaFW-chat-menu.full-screen {
-	top: 2px !important;
-	height: calc(100% - 59px) !important;
+	top: 0px !important;
+	height: calc(100% - 0px) !important;
 }
 #sepiaFW-chat-menu button {
 	background: rgba(255, 255, 255, 0.95);
@@ -885,15 +885,15 @@ body {
 #sepiaFW-chat-controls-more-menu {
 	display: none;
 	position: absolute;
-	border-radius: 3px 3px 3px 0;
-	bottom: 57px;
-	left: 2px;
+	border-radius: 3px 3px 0px 0px;
+	bottom: 0px;
+	left: 0px;
 	/*width: auto;*/
-	width: calc(100% - 4px);
-	max-width: 372px;
+	width: calc(100% - 0px);
+	max-width: 375px;
 	min-width: 100px;
 	/*max-height: calc(100% - 59px);*/
-    padding: 5px 5px 0 5px;
+    padding: 5px 5px 55px 5px;
 	overflow: auto;
 	text-align: right;
 	z-index: 3;
@@ -1186,6 +1186,8 @@ body {
 
 #sepiaFW-chat-controls {
 	background: linear-gradient(rgba(255,255,255,0), #fff);
+	transition: background 275ms;
+    transition-timing-function: ease-in-out;
 	position: absolute;
     bottom: 0px;			/* note that 'sepiaFW-chat-controls-speech-box' depends on that as well */
     z-index: 5;
@@ -1201,6 +1203,15 @@ body {
 	display: flex;
 	overflow: hidden;		/* better dont use position fixed inside */
 }
+/*#sepiaFW-chat-controls.full-screen.chat-controls-more-menu {
+	max-width: 375px;
+}*/
+#sepiaFW-chat-controls.chat-menu {
+	background: transparent;
+}
+#sepiaFW-chat-controls.chat-controls-more-menu {
+	background: transparent;
+}
 #sepiaFW-chat-controls-more-btn {
 	padding-left: 0px !important;
 	padding-right: 0px !important;

www/scripts/sepiaFW.ui.build.js

@@ -128,15 +128,17 @@ function sepiaFW_build_ui_build(){
 				}
 			});
 		}
-		//kind'a clumsy way to catch the main menue close/open event
+		//kind'a tricky way to catch the main menue close/open event
 		$('#sepiaFW-main-window').on("sepiaFwOpen-sepiaFW-chat-menu", function(){
 			//open
 			SepiaFW.ui.switchSwipeBars('menu');
+			$('#sepiaFW-chat-controls').addClass('chat-menu');
 			SepiaFW.ui.isMenuOpen = true;
 			if (SepiaFW.ui.soc) SepiaFW.ui.soc.refresh();
 		}).on("sepiaFwClose-sepiaFW-chat-menu", function(){
 			//close
 			SepiaFW.ui.switchSwipeBars('chat');
+			$('#sepiaFW-chat-controls').removeClass('chat-menu');
 			SepiaFW.ui.isMenuOpen = false;
 		});
 
@@ -313,9 +315,11 @@ function sepiaFW_build_ui_build(){
 		//catch the shortcuts menue close/open event
 		$('#sepiaFW-main-window').on("sepiaFwOpen-sepiaFW-chat-controls-more-menu", function(){
 			//open
+			$('#sepiaFW-chat-controls').addClass('chat-controls-more-menu');
 			SepiaFW.ui.isControlsMenuOpen = true;
 		}).on("sepiaFwClose-sepiaFW-chat-controls-more-menu", function(){
 			//close
+			$('#sepiaFW-chat-controls').removeClass('chat-controls-more-menu');
 			SepiaFW.ui.isControlsMenuOpen = false;
 		});
 

www/scripts/sepiaFW.ui.js

@@ -1333,12 +1333,14 @@ function sepiaFW_build_ui(){
 			$inputBar.fadeIn(300);
 			$('.sepiaFW-carousel-pane').removeClass('full-screen');
 			$('#sepiaFW-chat-menu').removeClass('full-screen');
+			$('#sepiaFW-chat-controls').removeClass('full-screen');
 			UI.isInterfaceFullscreen = false;
 		}else{
 			$navBar.fadeOut(300);
 			$inputBar.fadeOut(300);
 			$('.sepiaFW-carousel-pane').addClass('full-screen');
 			$('#sepiaFW-chat-menu').addClass('full-screen');
+			$('#sepiaFW-chat-controls').addClass('full-screen');
 			UI.isInterfaceFullscreen = true;
 		}
 		setTimeout(function(){