Changes design.

This commit is contained in:
Lars Jung 2012-02-22 11:38:53 +01:00
parent 32023fc86e
commit bfebcb3bcd
6 changed files with 55 additions and 34 deletions

View file

@ -1,6 +1,7 @@
#context { #context {
position: fixed; position: fixed;
z-index: 1;
display: none; display: none;
right: 16px; right: 16px;
bottom: 50px; bottom: 50px;

View file

@ -1,13 +1,13 @@
body > footer { body > footer {
position: fixed; position: fixed;
z-index: 1; z-index: 5;
width: 100%; width: 100%;
left: 0; left: 0;
bottom: 0; bottom: 0;
padding: 6px 0 8px 0; padding: 6px 0 8px 0;
background-color: rgb(241,241,241); .vert-gradient(rgb(241,241,241), rgb(228,228,228));
border-top: 2px solid rgb(210,210,210); border-top: 1px solid rgb(210,210,210);
color: #999; color: #999;
font-size: 0.85em; font-size: 0.85em;

View file

@ -1,38 +1,59 @@
.border-radius (@radius) { .border-radius (@radius) {
-moz-border-radius: @radius; -webkit-border-radius: @radius; /* Saf3-4, iOS 1-3.2, Android <1.6 */
-webkit-border-radius: @radius; -moz-border-radius: @radius; /* FF1-3.6 */
border-radius: @radius; 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) { .box-shadow (@shadow) {
-moz-box-shadow: @shadow; -webkit-box-shadow: @shadow; /* Saf3-4 */
-webkit-box-shadow: @shadow; -moz-box-shadow: @shadow; /* FF3.5 - 3.6 */
box-shadow: @shadow; box-shadow: @shadow; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
} }
.transition (@transition) { .transition (@transition) {
-moz-transition: @transition; -webkit-transition: @transition; /* Saf3.2+, Chrome */
-ms-transition: @transition; -moz-transition: @transition; /* FF4+ */
-o-transition: @transition; -ms-transition: @transition; /* IE10? */
-webkit-transition: @transition; -o-transition: @transition; /* Opera 10.5+ */
transition: @transition; transition: @transition;
} }
.transform (@transform) { .transform (@transform) {
-moz-transform: @transform; -webkit-transform: @transform; /* Saf3.1+, Chrome */
-o-transform: @transform; -moz-transform: @transform; /* FF3.5+ */
-webkit-transform: @transform; -ms-transform: @transform; /* IE9 */
transform: @transform; -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) { .background-size (@size) {
-moz-background-size: @size; -webkit-background-size: @size; /* Saf3-4 */
-webkit-background-size: @size; -moz-background-size: @size; /* FF3.6 */
background-size: @size; background-size: @size; /* Opera, IE9, Saf5, Chrome, FF4 */
} }

View file

@ -1,13 +1,13 @@
body > nav { body > nav {
position: fixed; position: fixed;
z-index: 1; z-index: 5;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0; top: 0;
font-size: 0.85em; font-size: 0.85em;
background-color: rgb(241,241,241); .vert-gradient(rgb(241,241,241), rgb(228,228,228));
border-bottom: 2px solid rgb(210,210,210); border-bottom: 1px solid rgb(210,210,210);
span.jsDisabledFallback { span.jsDisabledFallback {
display: block; display: block;
@ -51,7 +51,7 @@ body > nav {
} }
.crumb { .crumb {
float: left; float: left;
border-right: 1px solid rgb(231,231,231); border-right: 1px solid rgba(0,0,0,0.05);
.hint { .hint {
margin-left: 8px; margin-left: 8px;
font-style: italic; font-style: italic;
@ -64,12 +64,12 @@ body > nav {
} }
.view { .view {
float: right; float: right;
border-left: 1px solid rgb(231,231,231); border-left: 1px solid rgba(0,0,0,0.05);
} }
#download { #download {
display: none; display: none;
float: right; 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); .transition(all 0.2s ease-in-out);
&.zipping { &.zipping {
@ -81,7 +81,7 @@ body > nav {
} }
#filter { #filter {
float: right; float: right;
border-left: 1px solid rgb(231,231,231); border-left: 1px solid rgba(0,0,0,0.05);
input { input {
border: none; border: none;

View file

@ -3,15 +3,14 @@
display: none; display: none;
position: fixed; position: fixed;
left: 0; left: 0;
top: 62px; top: 31px;
height: 100%;
z-index: 1; z-index: 1;
overflow: auto; overflow: auto;
font-size: 0.85em; font-size: 0.85em;
padding: 8px; padding: 8px;
background-color: rgb(241,241,241); background-color: rgb(241,241,241);
border: 1px solid rgb(210,210,210); border-right: 2px solid rgb(221,221,221);
border-left: none;
.border-radius(0 10px 10px 0);
> .scrollbar { > .scrollbar {
margin: 8px 8px 8px 0; margin: 8px 8px 8px 0;

View file

@ -90,7 +90,7 @@
navHeight = $("body > nav").outerHeight(), navHeight = $("body > nav").outerHeight(),
footerHeight = $("body > footer").outerHeight(), footerHeight = $("body > footer").outerHeight(),
contentSpacing = 50, contentSpacing = 50,
treeSpacing = 30; treeSpacing = 0;
$body.css({ $body.css({
"margin-top": navHeight + contentSpacing, "margin-top": navHeight + contentSpacing,
@ -99,7 +99,7 @@
$tree.css({ $tree.css({
top: navHeight + treeSpacing, top: navHeight + treeSpacing,
height: winHeight - navHeight - footerHeight - 18 - 2 * treeSpacing height: winHeight - navHeight - footerHeight - 16 - 2 * treeSpacing
}); });
try { try {