From bfebcb3bcdc7a8682b3d43ac148c61e5fb2a63ef Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Wed, 22 Feb 2012 11:38:53 +0100 Subject: [PATCH] Changes design. --- src/_h5ai/css/inc/context.less | 1 + src/_h5ai/css/inc/footer.less | 6 ++-- src/_h5ai/css/inc/mixins.less | 57 +++++++++++++++++++++++----------- src/_h5ai/css/inc/nav.less | 14 ++++----- src/_h5ai/css/inc/tree.less | 7 ++--- src/_h5ai/js/inc/Core.js | 4 +-- 6 files changed, 55 insertions(+), 34 deletions(-) diff --git a/src/_h5ai/css/inc/context.less b/src/_h5ai/css/inc/context.less index 08c8ecc9..62db2474 100644 --- a/src/_h5ai/css/inc/context.less +++ b/src/_h5ai/css/inc/context.less @@ -1,6 +1,7 @@ #context { position: fixed; + z-index: 1; display: none; right: 16px; bottom: 50px; diff --git a/src/_h5ai/css/inc/footer.less b/src/_h5ai/css/inc/footer.less index 5a00fffe..2e0498c9 100644 --- a/src/_h5ai/css/inc/footer.less +++ b/src/_h5ai/css/inc/footer.less @@ -1,13 +1,13 @@ body > footer { position: fixed; - z-index: 1; + z-index: 5; width: 100%; left: 0; bottom: 0; padding: 6px 0 8px 0; - background-color: rgb(241,241,241); - border-top: 2px solid rgb(210,210,210); + .vert-gradient(rgb(241,241,241), rgb(228,228,228)); + border-top: 1px solid rgb(210,210,210); color: #999; font-size: 0.85em; diff --git a/src/_h5ai/css/inc/mixins.less b/src/_h5ai/css/inc/mixins.less index 4e2f8847..a9691734 100644 --- a/src/_h5ai/css/inc/mixins.less +++ b/src/_h5ai/css/inc/mixins.less @@ -1,38 +1,59 @@ + .border-radius (@radius) { - -moz-border-radius: @radius; - -webkit-border-radius: @radius; - border-radius: @radius; + -webkit-border-radius: @radius; /* Saf3-4, iOS 1-3.2, Android <1.6 */ + -moz-border-radius: @radius; /* FF1-3.6 */ + border-radius: @radius; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ +} + + +.background-clip () { + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .box-shadow (@shadow) { - -moz-box-shadow: @shadow; - -webkit-box-shadow: @shadow; - box-shadow: @shadow; + -webkit-box-shadow: @shadow; /* Saf3-4 */ + -moz-box-shadow: @shadow; /* FF3.5 - 3.6 */ + box-shadow: @shadow; /* Opera 10.5, IE9, FF4+, Chrome 10+ */ } .transition (@transition) { - -moz-transition: @transition; - -ms-transition: @transition; - -o-transition: @transition; - -webkit-transition: @transition; - transition: @transition; + -webkit-transition: @transition; /* Saf3.2+, Chrome */ + -moz-transition: @transition; /* FF4+ */ + -ms-transition: @transition; /* IE10? */ + -o-transition: @transition; /* Opera 10.5+ */ + transition: @transition; } .transform (@transform) { - -moz-transform: @transform; - -o-transform: @transform; - -webkit-transform: @transform; - transform: @transform; + -webkit-transform: @transform; /* Saf3.1+, Chrome */ + -moz-transform: @transform; /* FF3.5+ */ + -ms-transform: @transform; /* IE9 */ + -o-transform: @transform; /* Opera 10.5 */ + transform: @transform; + zoom: 1; +} + + +.vert-gradient (@top, @bottom) { + background-color: @top; + background-image: -webkit-gradient(linear, left top, left bottom, from(@top), to(@bottom)); /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(top, @top, @bottom); /* Chrome 10+, Saf5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(top, @top, @bottom); /* FF3.6 */ + background-image: -ms-linear-gradient(top, @top, @bottom); /* IE10 */ + background-image: -o-linear-gradient(top, @top, @bottom); /* Opera 11.10+ */ + background-image: linear-gradient(top, @top, @bottom); } .background-size (@size) { - -moz-background-size: @size; - -webkit-background-size: @size; - background-size: @size; + -webkit-background-size: @size; /* Saf3-4 */ + -moz-background-size: @size; /* FF3.6 */ + background-size: @size; /* Opera, IE9, Saf5, Chrome, FF4 */ } diff --git a/src/_h5ai/css/inc/nav.less b/src/_h5ai/css/inc/nav.less index 4c753f82..b3d94681 100644 --- a/src/_h5ai/css/inc/nav.less +++ b/src/_h5ai/css/inc/nav.less @@ -1,13 +1,13 @@ body > nav { position: fixed; - z-index: 1; + z-index: 5; width: 100%; left: 0; top: 0; font-size: 0.85em; - background-color: rgb(241,241,241); - border-bottom: 2px solid rgb(210,210,210); + .vert-gradient(rgb(241,241,241), rgb(228,228,228)); + border-bottom: 1px solid rgb(210,210,210); span.jsDisabledFallback { display: block; @@ -51,7 +51,7 @@ body > nav { } .crumb { float: left; - border-right: 1px solid rgb(231,231,231); + border-right: 1px solid rgba(0,0,0,0.05); .hint { margin-left: 8px; font-style: italic; @@ -64,12 +64,12 @@ body > nav { } .view { float: right; - border-left: 1px solid rgb(231,231,231); + border-left: 1px solid rgba(0,0,0,0.05); } #download { display: none; float: right; - border-left: 1px solid rgb(231,231,231); + border-left: 1px solid rgba(0,0,0,0.05); .transition(all 0.2s ease-in-out); &.zipping { @@ -81,7 +81,7 @@ body > nav { } #filter { float: right; - border-left: 1px solid rgb(231,231,231); + border-left: 1px solid rgba(0,0,0,0.05); input { border: none; diff --git a/src/_h5ai/css/inc/tree.less b/src/_h5ai/css/inc/tree.less index c4d2845b..656a4f93 100644 --- a/src/_h5ai/css/inc/tree.less +++ b/src/_h5ai/css/inc/tree.less @@ -3,15 +3,14 @@ display: none; position: fixed; left: 0; - top: 62px; + top: 31px; + height: 100%; z-index: 1; overflow: auto; font-size: 0.85em; padding: 8px; background-color: rgb(241,241,241); - border: 1px solid rgb(210,210,210); - border-left: none; - .border-radius(0 10px 10px 0); + border-right: 2px solid rgb(221,221,221); > .scrollbar { margin: 8px 8px 8px 0; diff --git a/src/_h5ai/js/inc/Core.js b/src/_h5ai/js/inc/Core.js index 666f707d..ad48cda2 100644 --- a/src/_h5ai/js/inc/Core.js +++ b/src/_h5ai/js/inc/Core.js @@ -90,7 +90,7 @@ navHeight = $("body > nav").outerHeight(), footerHeight = $("body > footer").outerHeight(), contentSpacing = 50, - treeSpacing = 30; + treeSpacing = 0; $body.css({ "margin-top": navHeight + contentSpacing, @@ -99,7 +99,7 @@ $tree.css({ top: navHeight + treeSpacing, - height: winHeight - navHeight - footerHeight - 18 - 2 * treeSpacing + height: winHeight - navHeight - footerHeight - 16 - 2 * treeSpacing }); try {