update style

diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css
index 055f8e9b6379117345f1094e57467b0cd5722ddb..ec5231290580ac3fcc0737a5d361a9904e5dc1b8 100644 (file)
--- a/view/theme/quattro/style.css
+++ b/view/theme/quattro/style.css
@@ -2,27 +2,9 @@
  * Fabio Comuni <http://kirgroup.com/profile/fabrixxm>
  **/
 /* 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;
-}
 /* 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: #2d2d2d;
@@ -41,37 +23,81 @@ a:hover {
 .right {
   float: right;
 }
+/* icons */
+.icon {
+  background-color: transparent ;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: block;
+  overflow: hidden;
+  text-indent: -9999px;
+}
+.icon.s22 {
+  width: 22px;
+  height: 22px;
+  padding: 1px;
+}
+.icon.s22.notify {
+  background-image: url("../../../images/icons/notify_off_22.png");
+}
+.icon.s22.gear {
+  background-image: url("../../../images/icons/gear_22.png");
+}
+/* header */
+header {
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  height: 12px;
+  color: #FFFFFF;
+}
+header #site-location {
+  /*font-size:8px;
+               float:left;
+               background-color: @Metalic3;
+               padding: 1px 5px;
+               margin-left: 20px;
+               .roundbottom()*/
+
+  display: none;
+}
 /* nav */
 nav {
   width: 100%;
-  height: 50px;
+  height: 32px;
+  position: fixed;
+  left: 0px;
+  top: 0px;
   background-color: #0e232e;
   color: #FFFFFF;
 }
 nav a,
+nav a:active,
 nav a:visited,
 nav a:link,
 nav a:hover {
   color: #FFFFFF;
   text-decoration: none;
+  outline: none;
 }
-nav #site-location {
-  font-size: 8px;
-  float: left;
-  background-color: #364e59;
-  padding: 1px 5px;
-  margin-left: 20px;
-  -moz-border-radius: 0 0 5px 5px;
-  -webkit-border-radius: 0 0 5px 5px;
-  border-radius: 0 0 5px 5px;
-}
-nav #nav {
-  clear: both;
+nav ul {
+  margin: 0px;
   padding: 0px 20px;
-  height: auto;
-  padding-top: 6px;
 }
-nav #nav .nav-menu-icon {
+nav ul li {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+  float: left;
+}
+nav ul li .menu-popup {
+  left: 0px;
+  right: auto;
+}
+nav .nav-menu-icon {
   position: relative;
   height: 22px;
   padding: 5px;
@@ -80,14 +106,17 @@ nav #nav .nav-menu-icon {
   -webkit-border-radius: 5px 5px 0 0;
   border-radius: 5px 5px 0 0;
 }
-nav #nav .nav-menu-icon.selected {
+nav .nav-menu-icon.selected {
   background-color: #364e59;
 }
-nav #nav .nav-menu-icon img {
+nav .nav-menu-icon img {
   width: 22px;
   height: 22px;
 }
-nav #nav .nav-menu {
+nav .nav-menu-icon .nav-notify {
+  top: 3px;
+}
+nav .nav-menu {
   position: relative;
   height: 16px;
   padding: 5px;
@@ -95,10 +124,11 @@ nav #nav .nav-menu {
   font-size: 14px;
   border-bottom: 3px solid #0e232e;
 }
-nav #nav .nav-menu.selected {
+nav .nav-menu.selected {
   border-bottom: 3px solid #9eabb0;
 }
-nav #nav .nav-menu .nav-notify {
+nav .nav-notify {
+  display: none;
   position: absolute;
   background-color: #19aeff;
   -moz-border-radius: 5px 5px 5px 5px;
@@ -111,10 +141,22 @@ nav #nav .nav-menu .nav-notify {
   min-width: 15px;
   text-align: right;
 }
+nav .nav-notify.show {
+  display: block;
+}
+nav #nav-site-link {
+  float: right;
+}
+nav #nav-site-link .menu-popup {
+  right: 0px;
+  left: auto;
+}
+nav #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: #2d2d2d;
@@ -135,34 +177,26 @@ ul.menu-popup a:hover {
 ul.menu-popup .menu-sep {
   border-top: 1px solid #9eabb0;
 }
-.left .menu-popup {
-  left: 0px;
-}
-.right .menu-popup {
-  right: 0px;
-}
-/* icons */
-.icon {
-  background-color: transparent ;
-  background-repeat: no-repeat;
-  background-position: center center;
+ul.menu-popup li {
+  float: none;
+  overflow: auto;
+  height: auto;
   display: block;
 }
-.icon.s22 {
-  width: 22px;
-  height: 22px;
+#nav-notifications-menu {
+  width: 400px;
 }
-.icon.s22.notify_off {
-  background-image: url("../../../images/icons/notify_off_22.png");
+#nav-notifications-menu img {
+  float: left;
+  margin-right: 5px;
 }
-.icon.s22.notify_on {
-  background-image: url("../../../images/icons/notify_on_22.png");
+#nav-notifications-menu .contactname {
+  font-weight: bold;
 }
-/* aside */
-aside {
-  display: none;
+#nav-notifications-menu .notif-when {
+  font-size: 10px;
+  color: #9eabb0;
+  display: block;
 }
+/* aside */
 /* section */
-section {
-  display: none;
-}

diff --git a/view/theme/quattro/style.less b/view/theme/quattro/style.less
index e267834a693d6b3a2d03ea8e1aff4723ab26ac98..53f833cfd654ef1a49ee72573efdea0207b50642 100644 (file)
--- 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;}