help button for extended login box; 'dark-skin', 'light-skin' auto-assign;

Author: fquirin

www/css/sepiaFW-style.css

@@ -481,6 +481,11 @@ body {
 	text-align: center;
 	z-index: 10;
 }
+@media (max-height: 530px) {
+	#sepiaFW-login-box {
+		top: 4%;
+	}
+}
 #sepiaFW-login-box h2 {
 	font-weight: normal;
 }
@@ -539,6 +544,28 @@ body {
     color: inherit !important;
 	margin: 4px 0 0 0 !important;
 }
+#sepiaFW-login-help-btn {
+	position: absolute;
+    bottom: -50px;
+    right: calc(50% - 24px);
+    height: auto;
+	width: auto !important;
+	background: transparent !important;
+	display: none;
+}
+html.light-skin #sepiaFW-login-help-btn {
+	color: #111 !important;
+}
+html.dark-skin #sepiaFW-login-help-btn {
+	color: #eee !important;
+}
+/*@media (max-height: 480px) {
+	#sepiaFW-login-help-btn {
+		position: fixed;
+		bottom: 0;
+		right: 0;
+	}
+}*/
 
 #sepiaFW-main-window input, #sepiaFW-main-window button, #sepiaFW-main-window article {
 	border-radius: 3px;

www/index.html

@@ -103,6 +103,8 @@ <h2><!--Welcome--><script>SepiaFW.local.w('welcome')</script></h2>
 		</div>
 		<!-- extend button -->
 		<div id="sepiaFW-login-extend-box"><button id="sepiaFW-login-extend-btn"><i class="material-icons md-btn2">arrow_drop_down</i></button></div>
+		<!-- help button -->
+		<button id="sepiaFW-login-help-btn" onclick="SepiaFW.ui.actions.openUrlAutoTarget('https://github.com/SEPIA-Framework/sepia-docs#welcome-to-the-documentation-page-for-sepia');"><i class="material-icons md-mnu">help</i></button></div>
 	</div>
 	<!-- Main -->
 	<div id="sepiaFW-main-window" class="sepiaFW-translucent-10 sepiaFW-skin-mod">

www/scripts/sepiaFW.account.js

@@ -603,8 +603,10 @@ function sepiaFW_build_account(){
 			$('#sepiaFW-login-box').find('.extended-controls').each(function(){
 				if (isVisible){
 					$(this).fadeOut(150);
+					$('#sepiaFW-login-help-btn').fadeOut(150);
 				}else{
 					$(this).fadeIn(300);
+					$('#sepiaFW-login-help-btn').fadeIn(300);
 				}
 			});
 			if (isVisible){

www/scripts/sepiaFW.ui.js

@@ -124,6 +124,7 @@ function sepiaFW_build_ui(){
 	UI.loadingColor = '#b4b4b4';
 	UI.assistantColor = '';
 	UI.micBackgroundColor = '#fff';  //reassigned during UI setup
+	UI.htmlBackgroundColor = window.getComputedStyle(document.documentElement).getPropertyValue("background-color") || "#fff";
 
 	UI.isMenuOpen = false;
 	UI.lastInput = "";
@@ -144,9 +145,21 @@ function sepiaFW_build_ui(){
 		UI.awaitDialogColor = adC? window.getComputedStyle(adC, null).getPropertyValue("background-color"): 'gold';
 		UI.assistantColor =	 asC? window.getComputedStyle(asC, null).getPropertyValue("background-color"): UI.primaryColor;
 		UI.loadingColor =	 lC? window.getComputedStyle(lC, null).getPropertyValue("background-color"): 'rgba(180, 180, 180, 1.0)';
+		UI.htmlBackgroundColor = window.getComputedStyle(document.documentElement).getPropertyValue("background-color") || "#fff";
 		//UI.assistantColor = $('#sepiaFW-chat-output').find('article.chatAssistant').first().css("background-color");
 		//refresh theme-color
 		$('meta[name="theme-color"]').replaceWith('<meta name="theme-color" content="' + UI.primaryColor + '">');
+		//set general skin style
+		var backColor = UI.htmlBackgroundColor;
+		if ((backColor + '').indexOf('rgb') === 0){
+			var rgbBack = SepiaFW.tools.convertRgbColorStringToRgbArray(backColor);
+			backColor = SepiaFW.tools.rgbToHex(rgbBack[0], rgbBack[1], rgbBack[2]);
+		}
+		if (SepiaFW.tools.getBestContrast(backColor) === 'white'){
+			$(document.documentElement).removeClass('light-skin').addClass("dark-skin");
+		}else{
+			$(document.documentElement).removeClass('dark-skin').addClass("light-skin");			
+		}
 		//update statusbar
 		if ('StatusBar' in window){
 			var colorString = UI.primaryColor;