update style

1 files changed, 113 insertions, 74 deletions

diff --git a/view/theme/quattro/style.less b/view/theme/quattro/style.less
index e267834a6..53f833cfd 100644
--- a/view/theme/quattro/style.less
+++ b/view/theme/quattro/style.less
@@ -37,25 +37,27 @@
 
  
 /* fonts */
-@font-face {  
-  font-family: "LiberationSans";  
-  src: local("Liberation Sans"), url( LiberationSans-Regular.ttf ) format("truetype");
-  font-weight: normal; font-style: normal;
-}
-@font-face {  
-  font-family: "LiberationSans";  
-  src: local("Liberation Sans"), url( LiberationSans-Bold.ttf ) format("truetype");
-  font-weight: bold; font-style: normal;
-}
-@font-face {  
-  font-family: "LiberationSans";  
-  src: local("Liberation Sans"), url( LiberationSans-Italic.ttf ) format("truetype");
-  font-weight: normal; font-style: italic;
-}
- 
+// @font-face {  
+//   font-family: "LiberationSans";  
+//   src: local("Liberation Sans"),url( LiberationSans-Regular.ttf ) format("truetype");
+//   font-weight: bold; font-style: italic;
+// }
+// 
+// @font-face {  
+//   font-family: "LiberationSans";  
+//   src: local("Liberation Sans"),url( LiberationSans-Bold.ttf ) format("truetype");
+//   font-weight: bold; font-style: normal;
+// }
+// @font-face {  
+//   font-family: "LiberationSans";  
+//   src:  local("Liberation Sans"),url( LiberationSans-Italic.ttf ) format("truetype");
+//   font-weight: normal; font-style: italic;
+// }
+
+
 /* global */
 body {
-	font-family: LiberationSans,helvetica,arial,freesans,clean,sans-serif;
+	font-family: Liberation Sans,helvetica,arial,clean,sans-serif;
 	font-size: 12px;
 	background-color: #FFFFFF;
 	color: @Grey5;
@@ -77,28 +79,70 @@ a:hover {text-decoration: underline; }
 .left { float: left; }
 .right { float: right; }
 
-/* nav */
-nav { 
-	width: 100%; height: 50px; 
-	background-color: @Metalic4;
-	color: #FFFFFF;
-	a, a:visited, a:link, a:hover { color: #FFFFFF; text-decoration: none; }
+/* icons */
+
+
+.icons(@size: 22) {
+	&.notify { background-image: url("../../../images/icons/notify_off_@{size}.png"); }
+	&.gear 	 { background-image: url("../../../images/icons/gear_@{size}.png"); }
+}
+
+
+.icon {
+	background-color: transparent ;
+	background-repeat: no-repeat;
+	background-position: center center;
+	display: block;
+	overflow: hidden;
+	text-indent: -9999px;
+
+	&.s22 {
+		width:22px; height: 22px;
+		padding: 1px;
+		.icons(22);
+	}
+	
+}
+
 
+
+/* header */
+header {
+	position: fixed; left: 0px; top: 0px;
+	margin: 0px; padding: 0px;
+	width: 100%; height: 12px; 
+	color: #FFFFFF;
 	#site-location {
-		font-size:8px;
+		/*font-size:8px;
 		float:left;
 		background-color: @Metalic3;
 		padding: 1px 5px;
 		margin-left: 20px;
-		.roundbottom()
+		.roundbottom()*/
+		display: none;
 	}
+}
+/* nav */
+nav { 
+	width: 100%; height: 32px;
+	position: fixed; left: 0px; top: 0px;
+	background-color: @Metalic4;
+	color: #FFFFFF;
+
+		a, a:active, a:visited, a:link, a:hover { color: #FFFFFF; text-decoration: none; outline: none;  }
+
+		ul {
+			margin: 0px;
+			padding: 0px 20px;
+			li { 
+				list-style: none; 
+				margin: 0px; padding: 0px;
+				float: left;
+				.menu-popup{ left: 0px; right: auto; }
+			}
+			
+		}
 
-	#nav {
-		clear: both;
-		padding: 0px 20px;
-		height: auto;
-		padding-top: 6px;
-	
 		.nav-menu-icon {
 			position: relative;
 			height: 22px;
@@ -110,7 +154,8 @@ nav {
 				background-color: @Metalic3;
 			}
 			
-			img { width: 22px; height: 22px; }
+				img { width: 22px; height: 22px; }
+				.nav-notify { top: 3px; }
 		}
 
 		.nav-menu {
@@ -124,26 +169,37 @@ nav {
 				border-bottom: 3px solid @Metalic2;
 			}
 			
-			.nav-notify {
-				position: absolute;
-				background-color: @Blue1;
-				.rounded();
-				font-size: 10px;
-				padding: 1px 3px;
-				top: 0px;
-				right: -10px;
-				min-width: 15px;
-			    text-align: right;
-			}
+		}
+
+		.nav-notify {
+			display: none;
+			position: absolute;
+			background-color: @Blue1;
+			.rounded();
+			font-size: 10px;
+			padding: 1px 3px;
+			top: 0px;
+			right: -10px;
+			min-width: 15px;
+			text-align: right;
 			
+				&.show{ display: block; }
 		}
 		
-	}
+		
+		
+		#nav-site-link { 
+			float: right;
+			.menu-popup{ right: 0px; left: auto; }
+		}
+	
+		#nav-notifications-link.selected .icon.s22.notify { background-image: url("../../../images/icons/notify_on_22.png") }
+		
 }
 
 ul.menu-popup {
 	position: absolute;
-	/*display: none;*/
+	display: none;
 	width: auto;
 	background: #FFFFFF;
 	color: @Grey5;
@@ -151,43 +207,26 @@ ul.menu-popup {
 	padding: 0px;
 	list-style: none;
 	border: 3px solid @Metalic3;
-	a { display: block; color: @Grey5; padding: 5px 10px;}
-	a:hover { background-color: @Metalic1; }
 	z-index: 100000;
-	
-	.menu-sep  {
-		border-top: 1px solid @Metalic2;
-	}
+		
+		a { display: block; color: @Grey5; padding: 5px 10px;}
+		a:hover { background-color: @Metalic1; }
+		.menu-sep  { border-top: 1px solid @Metalic2; }
+		li { float: none;  overflow: auto; height: auto; display: block; }
 }
-.left .menu-popup{ left: 0px; }
-.right .menu-popup{ right: 0px; }
-
-/* icons */
 
-
-.icons(@size: 22) {
-	&.notify_off { background-image: url("../../../images/icons/notify_off_@{size}.png"); }
-	&.notify_on  { background-image: url("../../../images/icons/notify_on_@{size}.png"); }
+#nav-notifications-menu {
+	width: 400px;
+	img { float: left; margin-right: 5px; }
+	.contactname { font-weight: bold; }
+	.notif-when { font-size: 10px; color: @Metalic2; display: block; }
 }
 
 
-.icon {
-	background-color: transparent ;
-	background-repeat: no-repeat;
-	background-position: center center;
-	display: block;
-
-	&.s22 {
-		width:22px; height: 22px;
-		.icons(22);
-	}
-	
-}
-
 
 
 /* aside */
-aside { display: none; }
+// aside { display: none; }
 
 /* section */
-section { display: none;}
+// section { display: none;}