From 97eea6ecd60ef9cafaec8e91a902c7d3b88758da Mon Sep 17 00:00:00 2001 From: Fabio Comuni Date: Fri, 29 Jul 2011 16:24:18 +0200 Subject: style update --- view/theme/quattro/style.css | 61 ++++++++++++++++++++++++++++++++++++------- view/theme/quattro/style.less | 56 +++++++++++++++++++++++++++++---------- 2 files changed, 93 insertions(+), 24 deletions(-) diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css index 9ded41721..9b4005037 100644 --- a/view/theme/quattro/style.css +++ b/view/theme/quattro/style.css @@ -1,14 +1,14 @@ /** * Fabio Comuni **/ -/* fonts */ /* global */ body { font-family: Liberation Sans, helvetica, arial, clean, sans-serif; font-size: 12px; - background-color: #FFFFFF; + background-color: #ffffff; color: #2d2d2d; margin: 0px; + display: table-row; } a, a:visited, a:link { color: #005c94; @@ -46,13 +46,15 @@ a:hover { /* header */ header { position: fixed; - left: 0px; + left: 43%; + right: 43%; top: 0px; margin: 0px; padding: 0px; - width: 100%; - height: 12px; - color: #FFFFFF; + /*width: 100%; height: 12px; */ + + z-index: 110; + color: #ffffff; } header #site-location { /*font-size:8px; @@ -64,6 +66,27 @@ header #site-location { display: none; } +header #banner { + text-align: center; + width: 100%; +} +header #banner a, +header #banner a:active, +header #banner a:visited, +header #banner a:link, +header #banner a:hover { + color: #ffffff; + text-decoration: none; + outline: none; + vertical-align: bottom; +} +header #banner #logo-img { + height: 22px; + margin-top: 5px; +} +header #banner #logo-text { + font-size: 22px; +} /* nav */ nav { width: 100%; @@ -71,15 +94,20 @@ nav { position: fixed; left: 0px; top: 0px; + padding: 0px; background-color: #0e232e; - color: #FFFFFF; + color: #ffffff; + z-index: 100; + -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); + -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); } nav a, nav a:active, nav a:visited, nav a:link, nav a:hover { - color: #FFFFFF; + color: #ffffff; text-decoration: none; outline: none; } @@ -157,14 +185,17 @@ nav #nav-notifications-linkmenu.selected .icon.s22.notify { ul.menu-popup { position: absolute; display: none; - width: auto; - background: #FFFFFF; + width: 10em; + background: #ffffff; color: #2d2d2d; margin: 0px; padding: 0px; list-style: none; border: 3px solid #364e59; z-index: 100000; + -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); + -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); } ul.menu-popup a { display: block; @@ -204,4 +235,14 @@ ul.menu-popup .empty { display: block; } /* aside */ +aside { + display: table-cell; + width: 200px; + padding: 50px 10px 0px 20px; +} /* section */ +section { + display: table-cell; + width: 800px; + padding: 50px 20px 0px 10px; +} diff --git a/view/theme/quattro/style.less b/view/theme/quattro/style.less index a2c1a1eae..1444ffdc1 100644 --- a/view/theme/quattro/style.less +++ b/view/theme/quattro/style.less @@ -34,9 +34,7 @@ @Grey4:rgb(102,102,102); @Grey5:rgb(45,45,45); - - -/* fonts */ +///* fonts */ // @font-face { // font-family: "LiberationSans"; // src: local("Liberation Sans"),url( LiberationSans-Regular.ttf ) format("truetype"); @@ -59,9 +57,16 @@ body { font-family: Liberation Sans,helvetica,arial,clean,sans-serif; font-size: 12px; - background-color: #FFFFFF; + background-color: @Grey1; color: @Grey5; margin: 0px; + display:table-row; +} + +.shadow(@x: 0px, @y: 5px){ + -webkit-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7); + -moz-box-shadow:@x @y 10px rgba(0, 0, 0, 0.7); + box-shadow:@x @y 10px rgba(0, 0, 0, 0.7); } .rounded(@tr: 5px, @tl: 5px, @bl: 5px, @br: 5px){ @@ -108,10 +113,11 @@ a:hover {text-decoration: underline; } /* header */ header { - position: fixed; left: 0px; top: 0px; + position: fixed; left: 43%; right: 43%; top: 0px; margin: 0px; padding: 0px; - width: 100%; height: 12px; - color: #FFFFFF; + /*width: 100%; height: 12px; */ + z-index: 110; + color: @Grey1; #site-location { /*font-size:8px; float:left; @@ -121,15 +127,27 @@ header { .roundbottom()*/ display: none; } + + #banner { + + text-align: center; + width: 100%; + a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; } + #logo-img { height: 22px; margin-top:5px;} + #logo-text { font-size: 22px } + } } /* nav */ nav { width: 100%; height: 32px; position: fixed; left: 0px; top: 0px; + padding: 0px; background-color: @Metalic4; - color: #FFFFFF; + color: @Grey1; + z-index: 100; + .shadow(0px, 0px); - a, a:active, a:visited, a:link, a:hover { color: #FFFFFF; text-decoration: none; outline: none; } + a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; } ul { margin: 0px; @@ -200,15 +218,17 @@ nav { ul.menu-popup { position: absolute; display: none; - width: auto; - background: #FFFFFF; + width: 10em; + background: @Grey1; color: @Grey5; margin: 0px; padding: 0px; list-style: none; border: 3px solid @Metalic3; z-index: 100000; - + + .shadow(); + a { display: block; color: @Grey5; padding: 5px 10px;} a:hover { background-color: @Metalic1; } .menu-sep { border-top: 1px solid @Metalic2; } @@ -232,7 +252,15 @@ ul.menu-popup { /* aside */ -// aside { display: none; } +aside { + display: table-cell; + width: 200px; + padding:50px 10px 0px 20px; +} /* section */ -// section { display: none;} +section { + display: table-cell; + width: 800px; + padding:50px 20px 0px 10px; +} -- cgit v1.2.3