Updated login and registration page to behave correctly when displayed on devices with small screens

frontend/delta/scss/core/layout.scss

@@ -629,23 +629,20 @@ div.help {
 
 
 #loginPage, #registrationPage, #unlockPage {
-	@include overflow-auto;
 
 	.content {
 		@include flexbox();
 		@include flex-direction(column);
-//		@include align-items(stretch);
 
+		@include overflow-auto;
 		height: 100%;
 
 		.miscInfo {
 			@include flex(0);
-//			background-color: green;
 		}
 	
 		header {
 			@include flex(auto);
-//			background-color: yellow;
 
 			@include flexbox();
 			.headerContent {
@@ -654,36 +651,38 @@ div.help {
 		}
 	
 		.body {
-			@include flex(auto);
-//			background-color: green;
-
+			@include flex(none);
+//			width: 100%;
 			@include flexbox();
+
 			.bodyContent {
+				@include flex(auto);
 				margin-left: auto;
 				margin-right: auto;
 			}
 		}
-	
-		.other {
+
+		.afterBody {
 			@include flex(auto);
-//			background-color: yellow;
+		}
+
+		.other {
+			@include flex(none);
 
 			@include flexbox();
 			@include align-items(center);
 			.otherContent {
+				@include flex(auto);
 				width: 100%;
 			}
 		}
 
 		footer {
-			@include flex(auto);
-//			background-color: green;
-
-			@include flexbox();
-			@include align-items(flex-end);
+			@include flex(none);
 
 			.footerContent {
 				width: 100%;
+
 				.links {
 				}
 

frontend/delta/scss/style/loginPage.scss

@@ -31,11 +31,11 @@ refer to http://www.clipperz.com.
 
 		.other {
 			color: $main-alternate-text-color;
-			background-color: $main-alternate-color;
+//			background-color: $main-alternate-color;
 
 			a {
 				&:before {
-					content: "> ";
+//					content: "> ";
 				};
 			}
 		}
@@ -56,12 +56,13 @@ refer to http://www.clipperz.com.
 		}
 
 		.other {
-			color: $main-text-color;
-			background-color: $main-color;
+			color: $main-alternate-text-color;
+//			color: $main-text-color;
+//			background-color: $main-color;
 
 			a {
 				&:before {
-					content: "< ";
+//					content: "< ";
 				};
 			}
 		}
@@ -90,6 +91,7 @@ refer to http://www.clipperz.com.
 //==============================================================
 
 #loginPage, #registrationPage, #unlockPage {
+	background-color: black;
 
 	.content {
 		text-align: center;
@@ -306,7 +308,6 @@ refer to http://www.clipperz.com.
 				}
 			}
 
-
 			.pinForm {
 /*
 				.pinContainer {
@@ -323,6 +324,7 @@ refer to http://www.clipperz.com.
 				label {
 					display: inherit;
 					text-align: left;
+					color: #666;
 				}
 
 				.pinValue {
@@ -342,20 +344,65 @@ refer to http://www.clipperz.com.
 
 			}
 
+			.registrationLink, .loginLink {
+				display: inline-block;
+				margin-top: 25px;
+				margin-bottom: 25px;
+				line-height: 34pt;
+
+				font-family: "clipperz-font";
+				min-height: 46px;
+				min-width: 46px;
+
+				color: white;
+				font-size: 24pt;
+				font-weight: 500;
+				border: 0px;
+
+				padding: 10px 25px;
+
+//				border: 1px solid white;
+				background-color: #c0c0c0;
+				@include transition(background-color font-weight, 0.5s, linear);
+
+				cursor: pointer;
+
+//				&:hover {
+//					background-color: black;
+//				};
+
+				&:disabled {
+					font-weight: 100;
+					background-color: #c0c0c0;
+					cursor: default;
+
+					&:hover {
+					};
+				}
+			}
+
+			.registrationLink {
+				&:hover {
+					background-color: black;
+				};
+			}
+
+			.loginLink {
+				&:hover {
+					background-color: $main-color;
+				};
+			}
+
 		}
 
 		.other {
-			font-size: 24pt;
-			padding: 20px;
-			max-height: 20%;
+//			font-size: 24pt;
+//			padding: 20px;
+//			max-height: 20%;
 
 			a {
 				cursor: pointer;
 			}
-		}
-
-		footer {
-			max-height: 50px;
 
 			.links {
 				ul {
@@ -381,8 +428,11 @@ refer to http://www.clipperz.com.
 					}
 				}
 			}
+		}
+
+		footer {
+			max-height: 50px;
 
-			
 			.applicationVersion {
 				padding: 2px;
 				font-size: 8pt;

frontend/delta/scss/style/settingsPanel.scss

@@ -727,6 +727,10 @@ refer to http://www.clipperz.com.
 			:enabled {
 				border:2px solid $clipperz-orange;
 			}
+			
+			.content {
+				@include flex(none);
+			}
 		}
 
 		.dataImport {