From 2c8bbea65d0b0d75bfa3ab4eadcc5ae5bfad8663 Mon Sep 17 00:00:00 2001
From: fabrixxm <fabrix.xm@gmail.com>
Date: Wed, 17 Jan 2018 16:01:34 +0100
Subject: [PATCH] frio: tweak login template, fix style

move lost pwd link and register to submit wrapper,
use flexbox for submit row in login form,
show register link as button
fix form label colors in mobile
---
 view/theme/frio/css/style.css       | 31 +++++++++++++++++++----------
 view/theme/frio/templates/login.tpl | 12 +++++------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index eb08deea4..f6f6ad9de 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -3008,6 +3008,14 @@ section .profile-match-wrapper {
 /** 
  * Login page
  */
+#login-submit-wrapper {
+	display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+}
+#lost-password-link { flex-grow: 2; }
+
 .mod-home.is-not-singleuser,
 .mod-login {
     background-image: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.4)), url($login_bg_image);
@@ -3030,10 +3038,11 @@ section .profile-match-wrapper {
 	margin-top: 2.5%;
 }
 
-.mod-home.is-not-singleuser .login-form > #login-form,
-.mod-login .login-form > #login-form {
+.mod-home.is-not-singleuser .login-form > #login-form label,
+.mod-login #content #login-form label {
 	color: #eee;  
 }
+
 	
 .mod-home.is-not-singleuser .login-panel-content,
 .mod-login .login-panel-content { 
@@ -3046,20 +3055,22 @@ section .profile-match-wrapper {
     .mod-login #content {
 		margin-top: 100px!important;
 	}    
-	
-	
 
 	.mod-home.is-not-singleuser .login-form > #login-form,
-    .mod-login .login-form > #login-form {    
+    .mod-login #content #login-form {    
         background-color: #fff;
-        color: #444;
         padding: 1em;
         position: relative;
         margin-top: 4em;
     }
 
-    .mod-home.is-not-singleuser .login-form > #login-form:before,
-    .mod-login .login-form > #login-form:before {
+	.mod-home.is-not-singleuser .login-form > #login-form label,
+	.mod-login #content #login-form label {
+		color: #444;  
+	}
+
+    .mod-home.is-not-singleuser .login-form > #login-form::before,
+    .mod-login #content #login-form::before {
         display: block;
         position: absolute;
         content: " ";
@@ -3071,8 +3082,8 @@ section .profile-match-wrapper {
         z-index: -1;
     }
 
-    .mod-home.is-not-singleuser .login-form > #login-form:after,
-    .mod-login .login-form > #login-form:after {
+    .mod-home.is-not-singleuser .login-form > #login-form::after,
+    .mod-login #content #login-form::after {
         display: block;
         position: absolute;
         content: " ";
diff --git a/view/theme/frio/templates/login.tpl b/view/theme/frio/templates/login.tpl
index 1f818f524..aaa42d24b 100644
--- a/view/theme/frio/templates/login.tpl
+++ b/view/theme/frio/templates/login.tpl
@@ -18,15 +18,15 @@
 
 		{{include file="field_checkbox.tpl" field=$lremember}}
 
-		<div id="login-extra-links" class="list-unstyled">
-			{{if $register}}<a href="register" title="{{$register.title|escape:'html'}}" id="register-link">{{$register.desc}}</a>{{/if}}
+		<div id="login-submit-wrapper">
 			<a href="lostpass" title="{{$lostpass|escape:'html'}}" id="lost-password-link">{{$lostlink}}</a>
+
+			<div class="pull-right" >
+				{{if $register}}<a href="register" title="{{$register.title|escape:'html'}}" id="register-link" class="btn btn-default">{{$register.desc}}</a>{{/if}}
+				<button type="submit" name="submit" id="login-submit-button" class="btn btn-primary" value="{{$login|escape:'html'}}">{{$login|escape:'html'}}</button>
+			</div>
 		</div>
 
-		<div id="login-submit-wrapper" class="pull-right" >
-			<button type="submit" name="submit" id="login-submit-button" class="btn btn-primary" value="{{$login|escape:'html'}}">{{$login|escape:'html'}}</button>
-		</div>
-		<div class="clear"></div>
 
 		{{foreach $hiddens as $k=>$v}}
 			<input type="hidden" name="{{$k}}" value="{{$v|escape:'html'}}" />