From 90996e299c05e43958bca9b5f0714b6cdb517d08 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Sat, 27 Oct 2012 14:54:33 +0200
Subject: improved header layout

---
 module/web/static/css/default/settings.less |  6 +-
 module/web/static/css/default/style.less    | 92 ++++++++++++-----------------
 2 files changed, 42 insertions(+), 56 deletions(-)

(limited to 'module/web/static/css/default')

diff --git a/module/web/static/css/default/settings.less b/module/web/static/css/default/settings.less
index 8b6662343..fde0b9215 100644
--- a/module/web/static/css/default/settings.less
+++ b/module/web/static/css/default/settings.less
@@ -4,15 +4,15 @@
 	Settings
 */
 .settings-menu {
-  background-color: @lightestyellow;
+  background-color: @yellowLightest;
 }
 
 .setting-box {
 
   margin-top: 20px;
 
-  border-color: @lighterblue;
-  .gradient(top, @lightergrey, @lighteryellow);
+  border-color: @blueLighter;
+  .gradient(top, @greyLighter, @yellowLighter);
   box-shadow: 0 0 5px @blue;
 
   .page-header {
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index 157b3feb7..d5ac08b85 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -3,26 +3,26 @@
 */
 
 @min-width: 1000px;
-@header-height: 70px;
+@header-height: 62px; // 62:38 = 100 -> Golden ratio
 @footer-height: 100px;
 @margin-side: 100px;
 
 @dark: #333333;
 @light: #ffffff;
 @grey: #757575;
-@lightgrey: #E5E5E5;
-@lightergrey: #F5F5F5;
+@greyLight: #E5E5E5;
+@greyLighter: #F5F5F5;
 
 @yellow: #fee247;
-@lighteryellow: lighten(spin(@yellow, 10), 20%);
-@lightestyellow: lighten(spin(@yellow, 15), 30%);
+@yellowLighter: lighten(spin(@yellow, 10), 20%);
+@yellowLightest: lighten(spin(@yellow, 15), 30%);
 
 @blue: #3a79aa;
-@lightblue: lighten(spin(@blue, 5), 10%);
-@lighterblue: lighten(spin(@blue, 10), 20%);
-@lightestblue: lighten(spin(@blue, 20), 40%);
-@darkblue: darken(spin(@blue, -5), 10%);
-@darkerblue: darken(spin(@blue, -10), 20%);
+@blueLight: lighten(spin(@blue, 5), 10%);
+@blueLighter: lighten(spin(@blue, 10), 20%);
+@blueLightest: lighten(spin(@blue, 20), 40%);
+@blueDark: darken(spin(@blue, -5), 10%);
+@blueDarker: darken(spin(@blue, -10), 20%);
 
 @emph: #FF7637;
 
@@ -164,59 +164,58 @@ header:before {
   z-index: -1;
 }
 
-header div.center {
+header div.left {
   position: relative;
   padding-left: 20px;
+  width: 32%;
+  height: @header-height;
+  float: left;
+//  border-right: 1px solid;
+}
+
+header div.right {
   padding-right: 20px;
 }
 
-header div.center span.title {
+header span.title {
   color: white;
   float: left;
   font-family: SansationRegular, sans-serif;
   font-size: 40px;
+  line-height: @header-height;
   cursor: default;
-  margin-top: 24px;
 }
 
 header .logo {
   float: left;
   margin-right: 10px;
-  margin-top: 6px;
-  width: 120px;
-  height: 120px;
+  margin-top: 4px;
+  width: 105px;
+  height: 105px;
   background: url("../../img/default/logo.png") no-repeat;
 }
 
 .header_block {
   float: right;
-  margin: 12px 12px 0;
   font-family: SansationRegular, sans-serif;
-}
+  margin: 5px 8px 0;
+  line-height: 17px;
+  font-size: small;
 
-.header_icon {
-  padding-top: 2px;
-  padding-bottom: 5px;
-  padding-left: 25px;
-  height: 20px;
-}
+  i {
+    margin-top: 0;
+    vertical-align: text-bottom;
+  }
 
-.header_text {
-  text-align: center;
-}
-
-.icon_info img {
-  margin-bottom: -4px;
-  padding-right: 5px;
 }
 
 #notification_div {
   position: absolute;
   left: 50%;
-  width: 28%;
+  width: 26%;
   height: 45px;
-  margin-left: -14%;
-  margin-top: 12px;
+  margin-left: -13%;
+  margin-top: 8px;
   text-align: center;
 }
 
@@ -233,22 +232,9 @@ header .logo {
   float: right;
   height: 45px;
   width: 14%;
-  margin-top: 12px;
+  margin-top: 8px;
   font-family: sans-serif
 }
-
-#header_user {
-  background: url("../../img/default/icon_user_small_white.png") no-repeat;
-}
-
-#header_speed {
-  background: url("../../img/default/icon_speed_small_white.png") no-repeat;
-}
-
-#header_qeuue {
-  background: url("../../img/default/icon_clock_small_white.png") no-repeat;
-}
-
 /*
     Login
 */
@@ -409,14 +395,14 @@ footer h2 {
 
 .package-view > div {
   color: @light;
-  .gradient(top, @blue, @lightblue); //  background-color: @blue;
+  .gradient(top, @blue, @blueLight); //  background-color: @blue;
   font-weight: bold;
   border-radius: 5px;
   line-height: 28px;
 }
 
 .package-view > div:hover {
-  .gradient(top, @blue, @darkblue);
+  .gradient(top, @blue, @blueDark);
 }
 
 .package-row {
@@ -431,7 +417,7 @@ footer h2 {
 
 .package-row.second {
   width: 30%;
-  .gradient(top, @darkblue, @darkerblue);
+  .gradient(top, @blueDark, @blueDarker);
 
 }
 
@@ -459,12 +445,12 @@ footer h2 {
 
 .file-view > div {
   border-radius: 5px;
-  .gradient(top,  @lighterblue, @lightestblue);
+  .gradient(top,  @blueLighter, @blueLightest);
   line-height: 26px;
 }
 
 .file-view > div:hover {
-  .gradient(top, @blue, @lightblue)
+  .gradient(top, @blue, @blueLight)
 }
 
 .file-row {
-- 
cgit v1.2.3