From ece5113bf6a893a1ddc42ed8a450eda18dde0998 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Fri, 5 Oct 2012 21:24:32 +0200
Subject: worked on stylesheet

---
 module/web/static/css/default/style.less | 381 ++++++++++++++++---------------
 1 file changed, 203 insertions(+), 178 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 180c763a2..a2701bbc7 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -1,7 +1,6 @@
-
 /*
-    Definitions
- */
+   Definitions
+*/
 
 @min-width: 1000px;
 @header-height: 70px;
@@ -15,14 +14,14 @@
 @blue: #3a79aa;
 @lightblue: lighten(spin(@blue, 5), 10%);
 @darkblue: darken(spin(@blue, -5), 10%);
+@darkerblue: darken(spin(@blue, -10), 20%);
 @emph: #FF7637;
 
 /*
   Mixins
 */
 
-
-.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
+.gradient(@origin: left, @start: #ffffff, @stop: #000000) {
   background-color: @start;
   background-image: -webkit-linear-gradient(@origin, @start, @stop);
   background-image: -moz-linear-gradient(@origin, @start, @stop);
@@ -31,7 +30,7 @@
   background-image: linear-gradient(@origin, @start, @stop);
 }
 
-.transition (@prop: all, @time: 1s, @ease: linear) {
+.transition(@prop: all, @time: 1s, @ease: linear) {
   -webkit-transition: @prop @time @ease;
   -moz-transition: @prop @time @ease;
   -o-transition: @prop @time @ease;
@@ -39,58 +38,57 @@
   transition: @prop @time @ease;
 }
 
-
 /*
-    General
- */
+   General
+*/
 
 * {
-    margin: 0;
+  margin: 0;
 }
 
 html, body {
-    height: 100%;
+  height: 100%;
 }
 
 body {
-    margin: 0;
-    padding: 0;
-    font-family: 'Abel', sans-serif;
-    font-size: 16px;
-    background: url("../../img/default/bgpattern.png") repeat scroll 0 0 transparent;
-    min-width: @min-width;
+  margin: 0;
+  padding: 0;
+  font-family: 'Abel', sans-serif;
+  font-size: 16px;
+  background: url("../../img/default/bgpattern.png") repeat scroll 0 0 transparent;
+  min-width: @min-width;
 }
 
 h1, h2, h3 {
-	margin: 0;
-	padding: 0;
-	font-weight: normal;
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
 }
 
 a {
-	text-decoration: none;
-	color: @blue;
+  text-decoration: none;
+  color: @blue;
 }
 
 a:hover {
-    text-decoration: none;
-    color: @emph;
+  text-decoration: none;
+  color: @emph;
 }
 
 #wrap {
-    min-height: 100%;
+  min-height: 100%;
 }
 
 #content {
-    margin-left: @margin-side;
-    margin-right: @margin-side ;
-    padding-bottom: @footer-height;
+  margin-left: @margin-side;
+  margin-right: @margin-side;
+  padding-bottom: @footer-height;
 }
 
 #content:before {
-    display: block;
-    content: " ";
-    height: @header-height;
+  display: block;
+  content: " ";
+  height: @header-height;
 }
 
 /*
@@ -98,213 +96,217 @@ a:hover {
 */
 
 header {
-    background: url("../../img/default/main-wrapper-bg.png") repeat-x;
-    height: @header-height;
-    position: fixed;
-    top: 0;
-    vertical-align: top;
-    width: 100%;
-    z-index: 10;
-    min-width: @min-width;
-    color: #ffffff;
+  background: url("../../img/default/main-wrapper-bg.png") repeat-x;
+  height: @header-height;
+  position: fixed;
+  top: 0;
+  vertical-align: top;
+  width: 100%;
+  z-index: 10;
+  min-width: @min-width;
+  color: #ffffff;
 }
 
 header a {
-    color: #ffffff;
+  color: #ffffff;
 }
 
 header:before {
-    position: absolute;
-    content: ' ';
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: transparent;
-    box-shadow: 0 0 5px black;
-    z-index: -1;
+  position: absolute;
+  content: ' ';
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: transparent;
+  box-shadow: 0 0 5px black;
+  z-index: -1;
 }
 
 header div.center {
-    position: relative;
-    padding-left: 20px;
-    padding-right: 20px;
+  position: relative;
+  padding-left: 20px;
+  padding-right: 20px;
 }
+
 header div.center span.title {
-    color: white;
-    float: left;
-    font-family: SansationRegular, sans-serif;
-    font-size: 40px;
-    cursor: default;
-    margin-top: 24px;
+  color: white;
+  float: left;
+  font-family: SansationRegular, sans-serif;
+  font-size: 40px;
+  cursor: default;
+  margin-top: 24px;
 }
+
 header .logo {
-    float: left;
-    margin-right: 10px;
-    margin-top: 6px;
-    width: 120px;
-    height: 120px;
-    background: url("../../img/default/logo.png")no-repeat;
+  float: left;
+  margin-right: 10px;
+  margin-top: 6px;
+  width: 120px;
+  height: 120px;
+  background: url("../../img/default/logo.png") no-repeat;
 }
 
 .header_block {
-    float: right;
-    margin: 12px 12px 0;
-    font-family: SansationRegular, sans-serif;
+  float: right;
+  margin: 12px 12px 0;
+  font-family: SansationRegular, sans-serif;
 }
+
 .header_icon {
-    padding-top: 2px;
-    padding-bottom: 5px;
-	padding-left: 25px;
-	height: 20px;
+  padding-top: 2px;
+  padding-bottom: 5px;
+  padding-left: 25px;
+  height: 20px;
 }
 
 .header_text {
-    text-align: center;
+  text-align: center;
 }
 
 .icon_info img {
-    margin-bottom: -4px;
-    padding-right: 5px;
+  margin-bottom: -4px;
+  padding-right: 5px;
 }
 
 #notification_div {
-    position: absolute;
-    left: 50%;
-    width: 28%;
-    height: 45px;
-    margin-left: -14%;
-    margin-top: 12px;
-    text-align: center;
+  position: absolute;
+  left: 50%;
+  width: 28%;
+  height: 45px;
+  margin-left: -14%;
+  margin-top: 12px;
+  text-align: center;
 }
 
 #globalprogress {
-    height: 8px;
-    margin: 8px 5px 0;
+  height: 8px;
+  margin: 8px 5px 0;
 }
 
 #globalprogress .bar {
-    background-color: @yellow;
+  background-color: @yellow;
 }
 
 #speedgraph {
-    float: right;
-    height: 45px;
-    width: 14%;
-    margin-top: 12px;
-    font-family: sans-serif
+  float: right;
+  height: 45px;
+  width: 14%;
+  margin-top: 12px;
+  font-family: sans-serif
 }
 
 #header_user {
-    background: url("../../img/default/icon_user_small_white.png")no-repeat;
+  background: url("../../img/default/icon_user_small_white.png") no-repeat;
 }
 
 #header_speed {
-    background: url("../../img/default/icon_speed_small_white.png")no-repeat;
+  background: url("../../img/default/icon_speed_small_white.png") no-repeat;
 }
 
 #header_qeuue {
-    background: url("../../img/default/icon_clock_small_white.png")no-repeat;
+  background: url("../../img/default/icon_clock_small_white.png") no-repeat;
 }
 
 /*
     Login
 */
 .login {
-    vertical-align: middle;
-    border: 2px solid @dark;
-    padding: 15px 50px;
-	font-size: 17px;
-    border-radius: 15px;
-    -moz-border-radius: 15px;
-	-webkit-border-radius: 15px;
+  vertical-align: middle;
+  border: 2px solid @dark;
+  padding: 15px 50px;
+  font-size: 17px;
+  border-radius: 15px;
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
 }
+
 /*
     Footer
 */
 footer {
-    background: url("../../img/default/main-wrapper-bg.png") repeat-x;
-    color: @grey;
-    height: @footer-height;
-    margin-top: -@footer-height;
-    position: relative;
-    width: 100%;
-    line-height: 16px;
-    z-index: 10;
+  background: url("../../img/default/main-wrapper-bg.png") repeat-x;
+  color: @grey;
+  height: @footer-height;
+  margin-top: -@footer-height;
+  position: relative;
+  width: 100%;
+  line-height: 16px;
+  z-index: 10;
 }
 
 footer .logo {
-    background: url(../../img/default/logo_grey.png) no-repeat;
-    float: left;
-    width: 60px;
-    height: 60px;
-    margin-top: 12px;
-    margin-right: 12px;
+  background: url(../../img/default/logo_grey.png) no-repeat;
+  float: left;
+  width: 60px;
+  height: 60px;
+  margin-top: 12px;
+  margin-right: 12px;
 }
 
 footer div.center {
-    padding-top: 8px;
-    width: 900px;
-    margin-left: auto;
-    margin-right: auto;
+  padding-top: 8px;
+  width: 900px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 footer:before {
-    position: absolute;
-    content: ' ';
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: transparent;
-    box-shadow: 0 0 5px black;
-    z-index: -1;
+  position: absolute;
+  content: ' ';
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: transparent;
+  box-shadow: 0 0 5px black;
+  z-index: -1;
 }
 
 footer .block {
-    font-size: 12px;
-    float: left;
-    margin: 0;
-    width: 150px;
-    padding-top: 6px;
-    padding-right: 30px;
+  font-size: 12px;
+  float: left;
+  margin: 0;
+  width: 150px;
+  padding-top: 6px;
+  padding-right: 30px;
 }
 
 footer .copyright {
-    text-align: center;
-    width: auto;
-    padding-top: 22px;
+  text-align: center;
+  width: auto;
+  padding-top: 22px;
 }
 
 footer h2 {
-    background: url("../../img/default/double-line.gif") repeat-x scroll center bottom transparent !important;
-    color: #FFFFFF;
-    font-family: SansationLight, sans-serif;
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 16px;
-    margin: 0;
-    padding-bottom: 6px;
+  background: url("../../img/default/double-line.gif") repeat-x scroll center bottom transparent !important;
+  color: #FFFFFF;
+  font-family: SansationLight, sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 16px;
+  margin: 0;
+  padding-bottom: 6px;
 }
 
 /*
    Modal Overlay
 */
 #modal-overlay {
-    content: " ";
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    background: -moz-radial-gradient(center, ellipse cover,  rgba(236,208,66,0) 0%, rgba(40,119,171,0.9) 100%);
-    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(236,208,66,0)), color-stop(100%,rgba(40,119,171,0.9)));
-    background: -webkit-radial-gradient(center, ellipse cover,  rgba(236,208,66,0) 0%,rgba(40,119,171,0.9) 100%);
-    background: -o-radial-gradient(center, ellipse cover,  rgba(236,208,66,0) 0%,rgba(40,119,171,0.9) 100%);
-    background: -ms-radial-gradient(center, ellipse cover,  rgba(236,208,66,0) 0%,rgba(40,119,171,0.9) 100%);
-    background: radial-gradient(center, ellipse cover,  rgba(236,208,66,0) 0%,rgba(40,119,171,0.9) 100%);
-    z-index: 50;
-    opacity: 0;
+  content: " ";
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: -moz-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(236, 208, 66, 0)), color-stop(100%, rgba(40, 119, 171, 0.9)));
+  background: -webkit-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%);
+  background: -o-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%);
+  background: -ms-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%);
+  background: radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%);
+  z-index: 50;
+  opacity: 0;
 }
 
 /*
@@ -312,38 +314,38 @@ footer h2 {
 */
 
 .nav > li > a:hover {
-    color: @blue;
+  color: @blue;
 }
 
 #dash-nav {
-    border-bottom: 1px dashed @grey;
-    padding-bottom: 2px;
-    margin-bottom: 5px;
+  border-bottom: 1px dashed @grey;
+  padding-bottom: 2px;
+  margin-bottom: 5px;
 }
 
 #dash-nav > li > a {
-    margin-top: 5px;
+  margin-top: 5px;
 }
 
 #dash-nav .breadcrumb {
-    margin: 0;
-    padding-top: 10px;
-    padding-bottom: 0;
+  margin: 0;
+  padding-top: 10px;
+  padding-bottom: 0;
 
-    .active {
-      color: @grey;
-    }
+  .active {
+    color: @grey;
+  }
 
 }
 
 #dash-nav form {
-    margin-top: 8px;
-    margin-bottom: 0;
+  margin-top: 8px;
+  margin-bottom: 0;
 }
 
 #dash-nav input, #dash-nav button {
-    padding-top: 2px;
-    padding-bottom: 2px;
+  padding-top: 2px;
+  padding-bottom: 2px;
 }
 
 #dash-nav .dropdown-menu i {
@@ -351,7 +353,6 @@ footer h2 {
   padding-right: 5px;
 }
 
-
 #dashboard ul {
   margin: 0;
   list-style: none;
@@ -361,24 +362,48 @@ footer h2 {
   height: 30px;
   width: 100%;
   color: @light;
-  .gradient(top, @blue, @darkblue);
-//  background-color: @blue;
+  .gradient(top, @blue, @lightblue); //  background-color: @blue;
   font-weight: bold;
   border-radius: 5px;
   margin-bottom: 3px;
 }
 
+.package-view > div {
+  height: 100%;
+}
+
 .package-view:hover {
-  .gradient(top, @blue, @lightblue);
+  .gradient(top, @blue, @darkblue);
+}
+
+.package-view .package-row {
+  display: inline-block;
+  height: 100%;
+//  padding-top: 4px;
+  padding-left: 8px;
+}
+
+.package-view .first {
+  width: 50%;
 }
 
+// TODO: bad scaling and positioning
+.package-view .second {
+  width: 30%;
+  .gradient(top, @darkblue, @darkerblue);
+
+  span {
+    margin-top: 4px;
+    display: block;
+  }
+}
 
 .package-view a {
   color: @light;
 }
 
 .package-graph {
-  display: inline;
+  display: none;
   width: 20px;
   height: 20px;
 }
\ No newline at end of file
-- 
cgit v1.2.3