Logon screen improvements

skins/elastic/styles/styles.less

@@ -136,10 +136,12 @@ a:hover {
     text-align: center;
     width: 100%;
     background: url(../images/watermark.jpg) center -20px no-repeat;
+    background-size: auto 40%;
 }
 
 #login-form {
     margin: auto;
+    margin-top: 35%;
     width: 95%;
     max-width: 280px;
 
@@ -151,6 +153,28 @@ a:hover {
     }
 }
 
+#login-footer {
+    flex: 1;
+    color: @color-black-shade-text;
+}
+
+#login-addon {
+    position: absolute;
+    bottom: 0;
+    max-height: 30%;
+    margin: 1rem !important;
+    width: auto !important;
+    overflow: auto;
+
+    @media screen and (min-width: (@screen-width-small + 1px)) {
+        max-width: @screen-width-small;
+        margin: auto !important;
+        bottom: 1rem;
+        left: 0;
+        right: 0;
+    }
+}
+
 
 /*** Addressbook UI ***/
 

skins/elastic/templates/login.html

@@ -6,13 +6,13 @@
 	<roundcube:form id="login-form" name="login-form" method="post" class="propform">
 	<roundcube:object name="loginform" form="login-form" size="40" submit=true />
 	</form>
-	<div id="bottomline" role="contentinfo">
+	<div id="login-footer" role="contentinfo">
 		<roundcube:object name="productname" condition="config:display_product_info &gt; 0" />
 		<roundcube:object name="version" condition="config:display_product_info == 2" />
 		<roundcube:if condition="config:support_url" />
-			&nbsp;&#9679;&nbsp; <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a>
+			&nbsp;&#9899;&nbsp; <a href="<roundcube:var name='config:support_url' />" target="_blank" class="support-link"><roundcube:label name="support" /></a>
 		<roundcube:endif />
-		<roundcube:container name="loginfooter" id="bottomline" />
+		<roundcube:container name="loginfooter" id="login-footer" />
 	</div>
 </div>