From aa7507f98fb202506a9e36e3df7b590913129ca0 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Tue, 30 Apr 2013 21:56:46 +0200 Subject: cleaned header + more responsive --- module/web/static/css/default/base.less | 1 - module/web/static/css/default/common.less | 6 +- module/web/static/css/default/dashboard.less | 4 ++ module/web/static/css/default/style.less | 90 +++++++--------------------- 4 files changed, 26 insertions(+), 75 deletions(-) (limited to 'module/web/static/css/default') diff --git a/module/web/static/css/default/base.less b/module/web/static/css/default/base.less index f3be924c6..46275c8ed 100644 --- a/module/web/static/css/default/base.less +++ b/module/web/static/css/default/base.less @@ -18,7 +18,6 @@ body { 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 { diff --git a/module/web/static/css/default/common.less b/module/web/static/css/default/common.less index a6b9a1e21..1383af75f 100644 --- a/module/web/static/css/default/common.less +++ b/module/web/static/css/default/common.less @@ -2,17 +2,13 @@ Definitions */ -/* - Bootstrap size: Phones to tablets, min value when scrollbar appears -*/ -@min-width: 767px; /* Threshold for slightly larger screen */ @large-screen: 1150px; -@header-height: 75px; +@header-height: 70px; @actionbar-height: 40px; @footer-height: 100px; diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less index cf6e0d410..db92c3118 100644 --- a/module/web/static/css/default/dashboard.less +++ b/module/web/static/css/default/dashboard.less @@ -54,6 +54,10 @@ cursor: pointer; } + & > i { + vertical-align: middle; + } + .progress { position: absolute; height: @frame-bottom; diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less index 4a195542e..9357ba83a 100644 --- a/module/web/static/css/default/style.less +++ b/module/web/static/css/default/style.less @@ -6,19 +6,22 @@ */ header { // background-color: @greyDark; - background: url("../../img/default/bgpatterndark.png") repeat; + .gradient(to bottom, #222222, #111111); 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; + a { + color: #ffffff; + } + .container-fluid, .row-fluid { + height: @header-height; + } + } header:before { @@ -33,17 +36,6 @@ header:before { .default-shadow; } -header div.left { - position: relative; - padding-left: 20px; - height: @header-height; - float: left; // border-right: 1px solid; -} - -header div.right { - padding-right: 20px; -} - header span.title { color: white; float: left; @@ -56,69 +48,31 @@ header span.title { header .logo { float: left; margin-right: 10px; - margin-top: 12px; + margin-top: 10px; width: 105px; height: 107px; background: url("../../img/default/logo.png") no-repeat; } -.header_block { - float: right; // font-family: SansationRegular, sans-serif; - margin: 10px 8px 0; +.header-block { + float: left; line-height: 18px; font-size: small; - - .btn { - margin-top: 6px; - } - -} - -.iconbar { - display: inline-block; - width: 100%; - text-align: center; - text-shadow: @blue 2px 2px 2px; - - i { - cursor: pointer; - } - - i:hover { - color: @yellow; - } - + margin-top: 6px; } -// Responsive Borders -.header_block.left-border { - background: url("../../img/default/box-separator.png") repeat-y; - padding-left: 1%; +.status-block { + float: right !important; } -.header_block.right-border { - background: url("../../img/default/box-separator.png") repeat-y right; - padding-right: 1%; - - .pull-right { - color: @yellow; - } - -} - -@media (max-width: @large-screen) { - .header_block { - background: none !important; - padding: 0 !important; - } +// Right left buttons +.pull-right .btn { + margin-top: 6px; } #progress-area { position: relative; - float: right; - width: 26%; - margin-top: 12px; - margin-right: 15px; + margin-top: 8px; line-height: 16px; #progress-info { @@ -207,8 +161,8 @@ header .logo { #speedgraph { float: right; - width: 14%; - height: 60px; // similiar as header_box + width: 40%; + height: @header-height - 16px; margin: 8px 8px 0 8px; font-family: sans-serif } @@ -324,11 +278,9 @@ header .logo { */ footer { // Same gradient as navbar -// .gradient(top, #222222, #111111); - background: url("../../img/default/bgpatterndark.png") repeat; + .gradient(top, #222222, #111111); color: @grey; min-height: @footer-height; - min-width: @min-width; margin-top: -@footer-height; position: relative; width: 100%; -- cgit v1.2.3