Added “Offline copy” banner in the login page

frontend/delta/css/clipperz.css

@@ -119,6 +119,7 @@ http://jonibologna.com/flexbox-cheatsheet/
     -ms-transform: rotate(0deg) translate(0, 0);
     -o-transform: rotate(0deg) translate(0, 0);
     transform: rotate(0deg) translate(0, 0); }
+
   100% {
     -webkit-transform: rotate(359deg) translate(0, 0);
     -moz-transform: rotate(359deg) translate(0, 0);
@@ -132,6 +133,7 @@ http://jonibologna.com/flexbox-cheatsheet/
     -ms-transform: rotate(0deg) translate(0, 0);
     -o-transform: rotate(0deg) translate(0, 0);
     transform: rotate(0deg) translate(0, 0); }
+
   100% {
     -webkit-transform: rotate(359deg) translate(0, 0);
     -moz-transform: rotate(359deg) translate(0, 0);
@@ -145,6 +147,7 @@ http://jonibologna.com/flexbox-cheatsheet/
     -ms-transform: rotate(0deg) translate(0, 0);
     -o-transform: rotate(0deg) translate(0, 0);
     transform: rotate(0deg) translate(0, 0); }
+
   100% {
     -webkit-transform: rotate(359deg) translate(0, 0);
     -moz-transform: rotate(359deg) translate(0, 0);
@@ -158,6 +161,7 @@ http://jonibologna.com/flexbox-cheatsheet/
     -ms-transform: rotate(0deg) translate(0, 0);
     -o-transform: rotate(0deg) translate(0, 0);
     transform: rotate(0deg) translate(0, 0); }
+
   100% {
     -webkit-transform: rotate(359deg) translate(0, 0);
     -moz-transform: rotate(359deg) translate(0, 0);
@@ -475,61 +479,73 @@ div.overlay {
 @-webkit-keyframes overlay-spin {
   from {
     opacity: 1; }
+
   to {
     opacity: 0.25; } }
 @-moz-keyframes overlay-spin {
   from {
     opacity: 1; }
+
   to {
     opacity: 0.25; } }
 @-ms-keyframes overlay-spin {
   from {
     opacity: 1; }
+
   to {
     opacity: 0.25; } }
 @keyframes overlay-spin {
   from {
     opacity: 1; }
+
   to {
     opacity: 0.25; } }
 @-webkit-keyframes ios-overlay-show {
   0% {
     opacity: 0; }
+
   100% {
     opacity: 1; } }
 @-moz-keyframes ios-overlay-show {
   0% {
     opacity: 0; }
+
   100% {
     opacity: 1; } }
 @-ms-keyframes ios-overlay-show {
   0% {
     opacity: 0; }
+
   100% {
     opacity: 1; } }
 @keyframes ios-overlay-show {
   0% {
     opacity: 0; }
+
   100% {
     opacity: 1; } }
 @-webkit-keyframes ios-overlay-hide {
   0% {
     opacity: 1; }
+
   100% {
     opacity: 0; } }
 @-moz-keyframes ios-overlay-hide {
   0% {
     opacity: 1; }
+
   100% {
     opacity: 0; } }
 @-ms-keyframes ios-overlay-hide {
   0% {
     opacity: 1; }
+
   100% {
     opacity: 0; } }
 @keyframes ios-overlay-hide {
   0% {
     opacity: 1; }
+
   100% {
     opacity: 0; } }
 /*
@@ -1579,11 +1595,11 @@ div.help {
         flex: 1;
         font-size: 8pt; }
         #loginPage div.loginForm footer .applicationVersion span {
-          color: #999; }
+          color: #999999; }
           #loginPage div.loginForm footer .applicationVersion span:after {
             content: ":"; }
         #loginPage div.loginForm footer .applicationVersion a {
-          color: #999;
+          color: #999999;
           text-decoration: none;
           padding-left: 5px;
           font-weight: bold; }
@@ -2210,13 +2226,13 @@ span.count {
   #extraFeaturesPanel .extraFeatureIndex footer {
     font-size: 8pt;
     padding: 5px 5px 5px 5px;
-    border-top: 1px solid #999; }
+    border-top: 1px solid #999999; }
     #extraFeaturesPanel .extraFeatureIndex footer span {
-      color: #999; }
+      color: #999999; }
       #extraFeaturesPanel .extraFeatureIndex footer span:after {
         content: ":"; }
     #extraFeaturesPanel .extraFeatureIndex footer a {
-      color: #999;
+      color: #999999;
       text-decoration: none;
       padding-left: 5px;
       font-weight: bold; }
@@ -2876,7 +2892,7 @@ span.count {
     color: white;
     padding: 8px 10px 6px 10px;
     font-size: 9pt; }
-    .miscInfo .proxyInfo.OFFLINE_COPY .proxyDescription:after {
+    .miscInfo .proxyInfo.OFFLINE_COPY.withReferenceDate .proxyDescription:after {
       content: ':'; }
     .miscInfo .proxyInfo.OFFLINE_COPY .referenceDate {
       padding-left: 10px; }
@@ -2885,6 +2901,9 @@ span.count {
   background-color: green;
   padding: 3px;
   font-size: 10pt; }
+  .miscInfo .accountStatus.undefined {
+    display: none;
+    visibility: hidden; }
   .miscInfo .accountStatus.FULL {
     display: none;
     visibility: hidden; }
@@ -2927,7 +2946,7 @@ div.cardList ul {
       padding-right: 0px;
       box-shadow: -4px 0px 3px -1px rgba(0, 0, 0, 0.2); }
     div.cardList ul li.archived {
-      background-color: #eee;
+      background-color: #eeeeee;
       color: #999; }
     div.cardList ul li .favicon {
       width: 48px;
@@ -3014,7 +3033,7 @@ div.cardList.narrow {
     content: ""; }
 
 #cardDetailPage .view.archived, .cardDetail .view.archived {
-  background-color: #eee; }
+  background-color: #eeeeee; }
 #cardDetailPage .view .cardDetailToolbar, .cardDetail .view .cardDetailToolbar {
   background-color: #1863a1;
   color: white; }
@@ -3224,7 +3243,7 @@ div.cardList.narrow {
       cursor: grab;
       cursor: -moz-grab;
       cursor: -webkit-grab;
-      background: repeating-linear-gradient(0deg, white, white 2px, #ddd 2px, #ddd 3px);
+      background: repeating-linear-gradient(0deg, white, white 2px, #dddddd 2px, #dddddd 3px);
       width: 28px;
       height: 20px;
       margin-left: 6px;
@@ -3449,7 +3468,7 @@ div.cardList.narrow {
     min-width: 220px;
     width: 80%;
     max-width: 400px;
-    background-color: #333;
+    background-color: #333333;
     color: #fff;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
@@ -3464,7 +3483,7 @@ div.cardList.narrow {
       margin-left: 0px;
       width: 0;
       height: 0;
-      border-top: 5px solid #333;
+      border-top: 5px solid #333333;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent; }
     .passwordGenerator .passwordGeneratorBaloon form span {

frontend/delta/js/Clipperz/PM/UI/Components/AccountStatus.js

@@ -52,6 +52,7 @@ Clipperz.PM.UI.Components.AccountStatusClass = React.createClass({
 			'proxyInfo':	true
 		}
 		proxyInfoClasses[this.props['proxyType']] = true;
+		proxyInfoClasses['withReferenceDate'] = (this.props['referenceDate'] != null);
 
 		return	React.DOM.div({'className':'miscInfo'}, [
 			React.DOM.div({'className':Clipperz.PM.UI.Components.classNames(proxyInfoClasses)}, [

frontend/delta/js/Clipperz/PM/UI/Components/Pages/LoginPage.js

@@ -168,8 +168,8 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
 //								]);
 
 		var	registrationLink = React.DOM.a({'key':'signup', 'className':'registrationLink', 'onClick':this.handleRegistrationLinkClick}, "Sign up");
-
 		return React.DOM.div({'key':'loginForm', 'className':'loginForm ' + this.props['style']}, [
+			Clipperz.PM.UI.Components.AccountStatus(MochiKit.Base.update(this.props['proxyInfo'])),
 			React.DOM.header({'key':'header'}, [
 				React.DOM.h3({}, 'clipperz'),
 				React.DOM.h5({}, 'keep it to yourself'),

frontend/delta/js/Clipperz/PM/UI/MainController.js

@@ -1011,8 +1011,8 @@ console.log("THE BROWSER IS OFFLINE");
 			'proxyType':			Clipperz.PM.Proxy.defaultProxy.type(),
 			'proxyTypeDescription':	Clipperz.PM.Proxy.defaultProxy.typeDescription()
 		}
-		
 	},
+
 	//-------------------------------------------------------------------------
 
 	messageBoxContent: function () {
@@ -1054,6 +1054,7 @@ console.log("THE BROWSER IS OFFLINE");
 				'mode':								'CREDENTIALS',
 				'isNewUserRegistrationAvailable':	Clipperz.PM.Proxy.defaultProxy.canRegisterNewUsers(),
 				'disabled':							false,
+				'proxyInfo':						this.proxyInfo(),
 			};
 		} else if (aPageName == 'registrationPage') {
 		} else if (aPageName == 'mainPage') {

frontend/delta/scss/style/accountStatus.scss

@@ -37,9 +37,11 @@ refer to http://www.clipperz.com.
 			padding: 8px 10px 6px 10px;
 			font-size: 9pt;
 
+			&.withReferenceDate {
 				.proxyDescription:after {
 					content: ':';
 				}
+			}
 
 			.referenceDate {
 				padding-left: 10px;
@@ -53,6 +55,11 @@ refer to http://www.clipperz.com.
 		padding: 3px;
 		font-size: 10pt;
 	
+		&.undefined {
+			display: none;
+			visibility: hidden;
+		}
+
 		&.FULL {
 			display: none;
 			visibility: hidden;