mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-29 06:25:18 -04:00
Changes design.
This commit is contained in:
parent
32023fc86e
commit
bfebcb3bcd
6 changed files with 55 additions and 34 deletions
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue