Fixed OTP rendering

frontend/delta/css/clipperz.css

@@ -795,9 +795,6 @@ input[type=text] {
     z-index: 10;
     background-color: rgba(0, 0, 0, 0.5); }
 
-.mainPage.narrow #extraFeaturesPanel.fullOpen .extraFeatureIndex {
-  width: 0px; }
-
 #extraFeaturesPanel {
   position: fixed;
   z-index: 20;
@@ -824,7 +821,17 @@ input[type=text] {
   #extraFeaturesPanel.fullOpen {
     width: 100%; }
     #extraFeaturesPanel.fullOpen .extraFeatureContent {
-      display: block; }
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -moz-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-direction: normal;
+      -webkit-box-orient: vertical;
+      -webkit-flex-direction: column;
+      -moz-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column; }
   #extraFeaturesPanel .extraFeatureIndex {
     -webkit-box-flex: none;
     -webkit-flex: none;
@@ -875,10 +882,16 @@ input[type=text] {
     -moz-flex: auto;
     -ms-flex: auto;
     flex: auto;
-    width: 100%;
-    height: 100%;
     background-color: black; }
     #extraFeaturesPanel .extraFeatureContent .extraFeature {
+      -webkit-box-flex: auto;
+      -webkit-flex: auto;
+      -moz-box-flex: auto;
+      -moz-flex: auto;
+      -ms-flex: auto;
+      flex: auto;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
       display: -webkit-box;
       display: -webkit-flex;
       display: -moz-flex;
@@ -889,8 +902,7 @@ input[type=text] {
       -webkit-flex-direction: column;
       -moz-flex-direction: column;
       -ms-flex-direction: column;
-      flex-direction: column;
+      flex-direction: column; }
-      height: 100%; }
       #extraFeaturesPanel .extraFeatureContent .extraFeature .header {
         -webkit-box-flex: none;
         -webkit-flex: none;
@@ -910,6 +922,18 @@ input[type=text] {
         overflow: auto;
         -webkit-overflow-scrolling: touch; }
 
+.mainPage.narrow #extraFeaturesPanel.fullOpen .extraFeatureIndex {
+  width: 0px; }
+.mainPage.narrow #extraFeaturesPanel.fullOpen .extraFeatureContent header {
+  -webkit-box-flex: none;
+  -webkit-flex: none;
+  -moz-box-flex: none;
+  -moz-flex: none;
+  -ms-flex: none;
+  flex: none;
+  display: block;
+  height: 48px; }
+
 .container {
   height: 100%;
   width: 100%; }
@@ -2323,17 +2347,102 @@ span.count {
     #extraFeaturesPanel .extraFeatureContent .extraFeature .button.disabled {
       background-color: #c0c0c0;
       cursor: default; }
-  #extraFeaturesPanel .extraFeatureContent .OTP {
+  #extraFeaturesPanel .extraFeatureContent .preferences h3 {
-    height: 100%; }
+    border-bottom: 1px solid white; }
-    #extraFeaturesPanel .extraFeatureContent .OTP .header .description {
+  #extraFeaturesPanel .extraFeatureContent .preferences .row {
+    padding-top: 4px; }
+    #extraFeaturesPanel .extraFeatureContent .preferences .row.one {
+      padding-left: 40px; }
+    #extraFeaturesPanel .extraFeatureContent .preferences .row.two {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -moz-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-direction: normal;
+      -webkit-box-orient: horizontal;
+      -webkit-flex-direction: row;
+      -moz-flex-direction: row;
+      -ms-flex-direction: row;
+      flex-direction: row; }
+      #extraFeaturesPanel .extraFeatureContent .preferences .row.two .col.one {
+        -webkit-box-flex: none;
+        -webkit-flex: none;
+        -moz-box-flex: none;
+        -moz-flex: none;
+        -ms-flex: none;
+        flex: none;
+        width: 40px; }
+      #extraFeaturesPanel .extraFeatureContent .preferences .row.two .col.two {
+        -webkit-box-flex: auto;
+        -webkit-flex: auto;
+        -moz-box-flex: auto;
+        -moz-flex: auto;
+        -ms-flex: auto;
+        flex: auto; }
+    #extraFeaturesPanel .extraFeatureContent .preferences .row.lockEnabled input {
+      margin-left: auto;
+      margin-right: auto;
+      display: block; }
+    #extraFeaturesPanel .extraFeatureContent .preferences .row.lockTimeout span:after {
+      content: ": "; }
+    #extraFeaturesPanel .extraFeatureContent .preferences .row.lockTimeout input {
+      width: 50px;
+      align: right; }
+  #extraFeaturesPanel .extraFeatureContent .preferences span {
+    vertical-align: middle; }
+  #extraFeaturesPanel .extraFeatureContent .preferences input {
+    vertical-align: middle; }
+  #extraFeaturesPanel .extraFeatureContent .OTP .header .description {
+    padding-bottom: 0px; }
+    #extraFeaturesPanel .extraFeatureContent .OTP .header .description p {
+      margin-bottom: 0px;
       padding-bottom: 0px; }
-      #extraFeaturesPanel .extraFeatureContent .OTP .header .description p {
+  #extraFeaturesPanel .extraFeatureContent .OTP .actions {
-        margin-bottom: 0px;
+    padding-left: 6px;
-        padding-bottom: 0px; }
+    padding-top: 6px; }
-    #extraFeaturesPanel .extraFeatureContent .OTP .actions {
+    #extraFeaturesPanel .extraFeatureContent .OTP .actions a {
-      padding-left: 6px;
+      font-family: 'clipperz-icons';
-      padding-top: 6px; }
+      -webkit-font-feature-settings: "liga" 1, "dlig" 1;
-      #extraFeaturesPanel .extraFeatureContent .OTP .actions a {
+      -moz-font-feature-settings: "liga" 1, "dlig" 1;
+      -ms-font-feature-settings: "liga" 1, "dlig" 1;
+      -o-font-feature-settings: "liga" 1, "dlig" 1;
+      font-feature-settings: "liga" 1, "dlig" 1;
+      -webkit-font-smoothing: antialiased;
+      text-rendering: optimizeLegibility;
+      cursor: pointer;
+      font-size: 18pt;
+      line-height: 1.1em; }
+      #extraFeaturesPanel .extraFeatureContent .OTP .actions a:hover {
+        color: green; }
+  #extraFeaturesPanel .extraFeatureContent .OTP .selectMenu {
+    margin-top: 1em; }
+    #extraFeaturesPanel .extraFeatureContent .OTP .selectMenu li {
+      display: inline-block;
+      margin-right: 1em;
+      padding: 1em 0; }
+  #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -webkit-flex-direction: row;
+    -moz-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    border: 1px solid #222;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    padding: 5px 0;
+    margin: 4px 0; }
+    #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpAction {
+      width: 40px;
+      text-align: center; }
+      #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpAction a {
         font-family: 'clipperz-icons';
         -webkit-font-feature-settings: "liga" 1, "dlig" 1;
         -moz-font-feature-settings: "liga" 1, "dlig" 1;
@@ -2343,17 +2452,23 @@ span.count {
         -webkit-font-smoothing: antialiased;
         text-rendering: optimizeLegibility;
         cursor: pointer;
-        font-size: 18pt;
+        font-size: 16pt;
         line-height: 1.1em; }
-        #extraFeaturesPanel .extraFeatureContent .OTP .actions a:hover {
+        #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpAction a:hover {
-          color: green; }
+          color: red; }
-    #extraFeaturesPanel .extraFeatureContent .OTP .selectMenu {
+    #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpPassword {
-      margin-top: 1em; }
+      font-size: 14pt;
-      #extraFeaturesPanel .extraFeatureContent .OTP .selectMenu li {
+      line-height: 1.3em;
-        display: inline-block;
+      -webkit-user-select: text;
-        margin-right: 1em;
+      /* Chrome all / Safari all */
-        padding: 1em 0; }
+      -moz-user-select: text;
-    #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail {
+      /* Firefox all */
+      -ms-user-select: text;
+      /* IE 10+ */
+      /* No support for these yet, use at own risk */
+      -o-user-select: text;
+      user-select: text; }
+    #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel {
       display: -webkit-box;
       display: -webkit-flex;
       display: -moz-flex;
@@ -2365,132 +2480,83 @@ span.count {
       -moz-flex-direction: row;
       -ms-flex-direction: row;
       flex-direction: row;
-      border: 1px solid #222;
+      margin-right: 5px; }
-      -webkit-border-radius: 5px;
+      #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel:before {
-      -moz-border-radius: 5px;
+        -webkit-box-flex: none;
-      border-radius: 5px;
+        -webkit-flex: none;
-      padding: 5px 0;
+        -moz-box-flex: none;
-      margin: 4px 0; }
+        -moz-flex: none;
-      #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpAction {
+        -ms-flex: none;
-        width: 40px;
+        flex: none;
-        text-align: center; }
+        content: 'label';
-        #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpAction a {
+        font-family: 'clipperz-icons';
-          font-family: 'clipperz-icons';
+        -webkit-font-feature-settings: "liga" 1, "dlig" 1;
-          -webkit-font-feature-settings: "liga" 1, "dlig" 1;
+        -moz-font-feature-settings: "liga" 1, "dlig" 1;
-          -moz-font-feature-settings: "liga" 1, "dlig" 1;
+        -ms-font-feature-settings: "liga" 1, "dlig" 1;
-          -ms-font-feature-settings: "liga" 1, "dlig" 1;
+        -o-font-feature-settings: "liga" 1, "dlig" 1;
-          -o-font-feature-settings: "liga" 1, "dlig" 1;
+        font-feature-settings: "liga" 1, "dlig" 1;
-          font-feature-settings: "liga" 1, "dlig" 1;
+        -webkit-font-smoothing: antialiased;
-          -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
-          text-rendering: optimizeLegibility;
+        font-style: normal;
-          cursor: pointer;
+        padding-right: 4px;
-          font-size: 16pt;
+        color: gray;
-          line-height: 1.1em; }
+        line-height: 20pt; }
-          #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpAction a:hover {
+      #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel span {
-            color: red; }
+        -webkit-box-flex: auto;
-      #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpPassword {
+        -webkit-flex: auto;
-        font-size: 14pt;
+        -moz-box-flex: auto;
+        -moz-flex: auto;
+        -ms-flex: auto;
+        flex: auto;
+        font-size: 12pt;
+        color: #333;
+        padding: 4px 0px 4px 0px;
         line-height: 1.3em;
-        -webkit-user-select: text;
+        cursor: pointer;
-        /* Chrome all / Safari all */
+        font-style: italic; }
-        -moz-user-select: text;
+        #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel span.customLabel {
-        /* Firefox all */
-        -ms-user-select: text;
-        /* IE 10+ */
-        /* No support for these yet, use at own risk */
-        -o-user-select: text;
-        user-select: text; }
-      #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -moz-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-direction: normal;
-        -webkit-box-orient: horizontal;
-        -webkit-flex-direction: row;
-        -moz-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        margin-right: 5px; }
-        #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel:before {
-          -webkit-box-flex: none;
-          -webkit-flex: none;
-          -moz-box-flex: none;
-          -moz-flex: none;
-          -ms-flex: none;
-          flex: none;
-          content: 'label';
-          font-family: 'clipperz-icons';
-          -webkit-font-feature-settings: "liga" 1, "dlig" 1;
-          -moz-font-feature-settings: "liga" 1, "dlig" 1;
-          -ms-font-feature-settings: "liga" 1, "dlig" 1;
-          -o-font-feature-settings: "liga" 1, "dlig" 1;
-          font-feature-settings: "liga" 1, "dlig" 1;
-          -webkit-font-smoothing: antialiased;
-          text-rendering: optimizeLegibility;
-          font-style: normal;
-          padding-right: 4px;
           color: gray;
-          line-height: 20pt; }
+          font-style: normal; }
-        #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel span {
+      #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input {
-          -webkit-box-flex: auto;
+        -webkit-box-flex: auto;
-          -webkit-flex: auto;
+        -webkit-flex: auto;
-          -moz-box-flex: auto;
+        -moz-box-flex: auto;
-          -moz-flex: auto;
+        -moz-flex: auto;
-          -ms-flex: auto;
+        -ms-flex: auto;
-          flex: auto;
+        flex: auto;
-          font-size: 12pt;
+        font-size: 12pt;
-          color: #333;
+        color: gray;
-          padding: 4px 0px 4px 0px;
+        width: 100%;
-          line-height: 1.3em;
+        border: 0px;
-          cursor: pointer;
+        padding: 2px;
-          font-style: italic; }
+        padding-left: 0px;
-          #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel span.customLabel {
+        margin: 0px;
-            color: gray;
+        margin-bottom: 1px;
-            font-style: normal; }
+        background-color: #333; }
-        #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input {
+        #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input::-webkit-input-placeholder {
-          -webkit-box-flex: auto;
+          font-style: italic;
-          -webkit-flex: auto;
+          color: #444; }
-          -moz-box-flex: auto;
+        #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input:-moz-placeholder {
-          -moz-flex: auto;
+          font-style: italic;
-          -ms-flex: auto;
+          color: #444; }
-          flex: auto;
+        #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input::-moz-placeholder {
-          font-size: 12pt;
+          font-style: italic;
-          color: gray;
+          color: #444; }
-          width: 100%;
+        #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input:-ms-input-placeholder {
-          border: 0px;
+          font-style: italic;
-          padding: 2px;
+          color: #444; }
-          padding-left: 0px;
+    #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpStatusInfo {
-          margin: 0px;
+      font-size: 8pt;
-          margin-bottom: 1px;
+      color: gray; }
-          background-color: #333; }
+      #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpStatusInfo span {
-          #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input::-webkit-input-placeholder {
+        padding-right: 10px; }
-            font-style: italic;
+    #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail.REQUESTED, #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail.USED {
-            color: #444; }
+      background-color: #222; }
-          #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input:-moz-placeholder {
+  #extraFeaturesPanel .extraFeatureContent .OTP table tr td a {
-            font-style: italic;
+    font-size: small;
-            color: #444; }
+    padding: 0 1em;
-          #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input::-moz-placeholder {
+    text-decoration: underline;
-            font-style: italic;
+    cursor: pointer; }
-            color: #444; }
-          #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpLabel input:-ms-input-placeholder {
-            font-style: italic;
-            color: #444; }
-      #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpStatusInfo {
-        font-size: 8pt;
-        color: gray; }
-        #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail .otpInfo .otpStatusInfo span {
-          padding-right: 10px; }
-      #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail.REQUESTED, #extraFeaturesPanel .extraFeatureContent .OTP .otpList .otpDetail.USED {
-        background-color: #222; }
-    #extraFeaturesPanel .extraFeatureContent .OTP .button {
-      margin: 1em 1em 0 0; }
-    #extraFeaturesPanel .extraFeatureContent .OTP table tr td a {
-      font-size: small;
-      padding: 0 1em;
-      text-decoration: underline;
-      cursor: pointer; }
   #extraFeaturesPanel .extraFeatureContent .dataImport .content {
     display: block;
     height: 100%;
@@ -2819,8 +2885,6 @@ span.count {
     visibility: hidden; }
 
 .mainPage.narrow #extraFeaturesPanel .extraFeatureContent header {
-  display: block;
-  height: 48px;
   border-bottom: 1px solid white; }
   .mainPage.narrow #extraFeaturesPanel .extraFeatureContent header .button {
     font-family: 'clipperz-icons';

frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/OTP.js

@@ -214,16 +214,19 @@ Clipperz.PM.UI.Components.ExtraFeatures.OTPClass = React.createClass({
 		return	React.DOM.div({'className':'extraFeature OTP'}, [
 			React.DOM.div({'className':'header'}, [
 				React.DOM.h1({}, "One-Time Passwords"),
-				React.DOM.div({'className':'description'}, [
-					React.DOM.p({}, "A one-time password works like your regular passphrase, but it can be used only once. Strongly recommended when accessing your Clipperz account from unsecure devices where keyloggers may be installed."),
-				]),
-				React.DOM.a({'className':'button', 'onClick':this.handlePrint}, "Print")
 			]),
 			React.DOM.div({'className':'content'}, [
-				React.DOM.ul({'className':'otpList'}, this.renderOtpRows()),
+				React.DOM.div({},[
-				React.DOM.div({'className':'actions'}, [
+					React.DOM.div({'className':'description'}, [
-					React.DOM.a({'onClick': this.handleNew}, "create new OTP"),
+						React.DOM.p({}, "A one-time password works like your regular passphrase, but it can be used only once. Strongly recommended when accessing your Clipperz account from unsecure devices where keyloggers may be installed."),
-				]),
+					]),
+					React.DOM.a({'className':'button', 'onClick':this.handlePrint}, "Print"),
+
+					React.DOM.ul({'className':'otpList'}, this.renderOtpRows()),
+					React.DOM.div({'className':'actions'}, [
+						React.DOM.a({'onClick': this.handleNew}, "create new OTP"),
+					]),
+				])
 			])
 		]);
 	},

frontend/delta/js/Clipperz/PM/UI/Components/Panels/ExtraFeaturesPanel.js

@@ -303,8 +303,8 @@ Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanelClass = React.createClass({
 			React.DOM.header({}, [
 				React.DOM.div({'className':'button', 'onClick':this.hideExtraFeatureContent}, "close")
 			]),
-			// this.state['extraFeatureContent']
+			this.state['extraFeatureContentComponent'] ? this.state['extraFeatureContentComponent'](this.props) : null,
-			this.state['extraFeatureContentComponent'] ? this.state['extraFeatureContentComponent'](this.props) : null
+//			React.DOM.footer({}, "")
 		]);
 	},
 

frontend/delta/scss/core/layout.scss

@@ -169,28 +169,11 @@ input[type=text] {
 
 }
 
-.mainPage.narrow {
+//=============================================================================
-	#extraFeaturesPanel {
-		&.fullOpen {
-			.extraFeatureIndex {
-				width: 0px;
-			}
-		}
-
-		.extraFeatureContent {
-			.extraFeature {
-//				height: calc(100% - $mainCardToolbarHeight);
-			}
-		}
-		
-	}
-}
 
 #extraFeaturesPanel {
 	@include sliding-panel(right, $settingsPanelWidth);
 
-//	transition: right 0.3s ease-in-out;
-
 	&.open {
 		@include sliding-panel-open(right, $settingsPanelWidth);
 	}
@@ -200,10 +183,11 @@ input[type=text] {
 	}
 
 	&.fullOpen {
-//		right: 0px;
 		width: 100%;
+
 		.extraFeatureContent {
-			display: block;
+			@include flexbox();
+			@include flex-direction(column);
 		}
 	}
 
@@ -224,10 +208,7 @@ input[type=text] {
 	
 		& > div {
 			@include flex(auto);
-		
 			@include overflow-auto();
-//			overflow: auto;
-		
 		}
 
 		footer {
@@ -236,32 +217,62 @@ input[type=text] {
 	}
 
 	.extraFeatureContent {
-//		display: none;
 		@include flex(auto);
-		width: 100%;
-		height: 100%;
-//		background-color: rgba( 0, 0, 0, 0.95);
 		background-color: black;
 
+		header {
+		}
+
 		.extraFeature {
+			@include flex(auto);
+			@include overflow-auto();
+
 			@include flexbox();
 			@include flex-direction(column);
-			height: 100%;
-		
 			.header {
 				@include flex(none);
 				padding: 20px;
 			}
 			.content {
 				@include flex(auto);
-//				height: 100%;
 				padding: 0px 20px 20px 20px;
 				@include overflow-auto();
 			}
 		}
+
+//		footer {
+//			@include flex(none);
+//			height: 48px;
+//			width: 100%;
+//		}
 	}
 }
 
+//.............................................................................
+
+.mainPage.narrow {
+	#extraFeaturesPanel.fullOpen {
+
+		.extraFeatureIndex {
+			width: 0px;
+		}
+
+		.extraFeatureContent {
+			header {
+				@include flex(none);
+				display: block;
+				height: 48px;
+			}
+			
+			.extraFeature {
+				
+			}
+		}
+	}
+}
+
+//=============================================================================
+
 .container {
 	height: 100%;
 	width: 100%;

frontend/delta/scss/style/settingsPanel.scss

@@ -236,7 +236,6 @@ refer to http://www.clipperz.com.
 	.extraFeatureContent {
 		border-right: 1px solid #222;
 		color: white;
-//		padding: 20px;
 
 		header {
 			display: none;
@@ -244,7 +243,6 @@ refer to http://www.clipperz.com.
 		
 		.extraFeature {
 			.header {
-//				padding-bottom: 20px;
 
 				h1 {
 					font-size: 20pt;
@@ -387,10 +385,63 @@ refer to http://www.clipperz.com.
 			}
 		}
 
+		.preferences {
+			h3 {
+				border-bottom: 1px solid white;
+			}
+			
+			.row {
+				$firstColumnWidth: 40px;
+				padding-top: 4px;
+				
+				&.one {
+					padding-left: $firstColumnWidth;
+				}
+				
+				&.two {
+					@include flexbox();
+					@include flex-direction(row);
+
+					.col.one {
+						@include flex(none);
+						width: $firstColumnWidth;
+					}
+					
+					.col.two {
+						@include flex(auto);
+					}
+				}
+
+				&.lockEnabled {
+					input {
+						margin-left: auto;
+						margin-right: auto;
+						display: block;
+					}
+				}
+
+				&.lockTimeout {
+					span {
+						&:after {
+							content: ": ";
+						};
+					}
+					input {
+						width: 50px;
+						align: right;
+					}
+				}
+			}
+
+			span {
+				vertical-align: middle;
+			}
+			input {
+				vertical-align: middle;
+			}
+		}
 
 		.OTP {
-			height: 100%;
-
 			.header {
 				.description {
 					padding-bottom: 0px;
@@ -417,6 +468,7 @@ refer to http://www.clipperz.com.
 					};
 				}
 			}
+
 			.selectMenu {
 				margin-top: 1em;
 
@@ -550,7 +602,7 @@ refer to http://www.clipperz.com.
 				}
 			}
 			.button {
-				margin:1em 1em 0 0;
+//				margin:1em 1em 0 0;
 			}
 
 			table {
@@ -980,8 +1032,6 @@ refer to http://www.clipperz.com.
 	#extraFeaturesPanel {
 		.extraFeatureContent {
 			header {
-				display: block;
-				height: 48px;
 				border-bottom : 1px solid white;
 
 				.button {
@@ -994,6 +1044,14 @@ refer to http://www.clipperz.com.
 					padding-left: 10px;
 				}
 			}
+			
+			.extraFeature {
+			}
+		}
+		
+		&.fullOpen {
+			.extraFeatureContent {
+			}
 		}
 	}
 }