From c40dd130d11a768941e264bc7fbb270f859b3239 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Sat, 22 Dec 2012 14:36:17 +0100
Subject: updated header, more responsive for smaller width

---
 module/web/static/css/default/style.less | 99 ++++++++++++++++++++++++--------
 1 file changed, 76 insertions(+), 23 deletions(-)

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

diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index 4ad4d5f19..79fbbe1e8 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -2,17 +2,28 @@
    Definitions
 */
 
-@min-width: 1000px;
-@header-height: 62px;
-// 62:38 = 100 -> Golden ratio
+/*
+  Bootstrap size: Phones to tablets, min value when scrollbar appears
+*/
+@min-width: 767px;
+
+/*
+  Threshold for slightly larger screen
+*/
+@large-screen: 1150px;
+
+@header-height: 75px;
 @footer-height: 100px;
+
 @margin-side: 100px;
 
-@dark: #333333;
 @light: #ffffff;
+@dark: #333333;
+
 @grey: #757575;
 @greyLight: #E5E5E5;
 @greyLighter: #F5F5F5;
+@greyDark: #111113;
 
 @yellow: #fee247;
 @yellowLighter: lighten(spin(@yellow, 10), 20%);
@@ -101,6 +112,25 @@ a:hover {
   height: @header-height;
 }
 
+/*
+  Additional Responsive Class for larger desktop
+*/
+
+.visible-large-screen {
+  display: inherit !important;
+}
+
+@media (max-width: @large-screen) {
+  .visible-large-screen {
+    display: none !important;
+  }
+
+  #content {
+    margin-left: @margin-side / 2;
+    margin-right: @margin-side / 2;
+  }
+}
+
 .btn-blue {
   background-color: hsl(206, 49%, 35%) !important;
   background-repeat: repeat-x;
@@ -139,10 +169,6 @@ a:hover {
   -webkit-font-smoothing: antialiased;
 }
 
-.label-info, .badge-info {
-  background-color: @blue;
-}
-
 /*
     Header
 */
@@ -178,7 +204,6 @@ header:before {
 header div.left {
   position: relative;
   padding-left: 20px;
-  width: 32%;
   height: @header-height;
   float: left; //  border-right: 1px solid;
 }
@@ -187,6 +212,10 @@ header div.right {
   padding-right: 20px;
 }
 
+header .pull-right {
+  color: #fee267;
+}
+
 header span.title {
   color: white;
   float: left;
@@ -199,7 +228,7 @@ header span.title {
 header .logo {
   float: left;
   margin-right: 10px;
-  margin-top: 4px;
+  margin-top: 12px;
   width: 105px;
   height: 105px;
   background: url("../../img/default/logo.png") no-repeat;
@@ -208,8 +237,8 @@ header .logo {
 .header_block {
   float: right;
   font-family: SansationRegular, sans-serif;
-  margin: 5px 8px 0;
-  line-height: 17px;
+  margin: 10px 8px 0;
+  line-height: 18px;
   font-size: small;
 
   i {
@@ -217,31 +246,55 @@ header .logo {
     vertical-align: text-bottom;
   }
 
+  .btn {
+    margin-top: 8px;
+  }
+
 }
 
 #notification_div {
-  position: absolute;
-  left: 50%;
+/*position: absolute;*/
+/* left: 50%;*/
+  float: right;
   width: 26%;
-  height: 45px;
-  margin-left: -13%;
-  margin-top: 8px;
-  text-align: center;
+  margin-right: 15px;
+  text-align: left;
+}
+
+.notifications-area {
+  display: inline;
+  color: #fff;
+  height: 14px;
+  line-height: 14px;
+  font-size: small;
+  background-color: @grey;
+  border: 5px solid @grey;
+  border-radius: 0 0 5px 5px;
 }
 
 #globalprogress {
-  height: 8px;
+  background-color: @grey;
+  background-image: none;
+  height: 15px;
   margin: 8px 5px 0;
-}
+  line-height: 15px;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+  border: 3px solid #242424;
+
+  .bar {
+    color: @dark;
+    background-image: none;
+    background-color: @yellow;
+  }
 
-#globalprogress .bar {
-  background-color: @yellow;
 }
 
 #speedgraph {
   float: right;
-  height: 45px;
   width: 14%;
+  height: 60px;
   margin-top: 8px;
   font-family: sans-serif
 }
-- 
cgit v1.2.3