Fijxu/h5ai
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update layout.

Browse source
This commit is contained in:
Lars Jung 2014-12-10 02:22:28 +01:00
parent 23fd639512
commit f5993a6ce7
6 changed files with 95 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/_h5ai/client/css/inc/general.less
View file

@ -1,16 +1,32 @@
// @col-blue: #2196F3;
@col-blue: #42a5f5;
@col-green: #4caf50;
@col-red: #f44336;
@col: #333; @col-light: #ffffff;
@col-back: #eee; @col-lightgray: #fafafa;
@col-hover: #42a5f5; @col-darkgray: #eeeeee;
// @col-dark: #333;
@col-dark: #212121;
@col-font-light: @col-light;
@col-font-dark: @col-dark;
@col-back-light: @col-lightgray;
@col-back-dark: @col-darkgray;
@col: @col-dark;
@col-back: @col-back-dark;
@col-hover: @col-blue;
@col-border: rgba(0,0,0,0.05); @col-border: rgba(0,0,0,0.05);
@col-border-strong: rgba(0,0,0,0.15); @col-border-strong: rgba(0,0,0,0.15);
@col-border-stronger: rgba(0,0,0,0.3); @col-border-stronger: rgba(0,0,0,0.3);
@col-okay: #689f38; @col-okay: @col-green;
@col-error: #d32f2f; @col-error: @col-red;
@col-link: #42a5f5; @col-link: @col-blue;
@col-link-hover: #42a5f5; @col-link-hover: @col-blue;
@col-widget-back: rgb(245,245,245); @col-widget-back: rgb(245,245,245);
@col-widget-back-highlight: rgba(255,255,255,0.8); @col-widget-back-highlight: rgba(255,255,255,0.8);
@ -34,8 +50,8 @@
@font-family-mono: monospace; @font-family-mono: monospace;
::-moz-selection { background: #42a5f5; color: #fff; text-shadow: none; } ::-moz-selection { background: @col-blue; color: @col-font-light; text-shadow: none; }
::selection { background: #42a5f5; color: #fff; text-shadow: none; } ::selection { background: @col-blue; color: @col-font-light; text-shadow: none; }
.transition (@transition) { .transition (@transition) {
-webkit-transition: @transition; -webkit-transition: @transition;
@ -49,6 +65,49 @@
zoom: 1; zoom: 1;
} }
.card() {
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
}
.raised() {
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
}
.rounded() {
overflow: hidden;
border-radius: 2px;
}
.el-button() {
.card();
.rounded();
.transition(all 0.2s ease-in-out);
color: @col-light;
background: @col-blue;
border-radius: 2px;
cursor: pointer;
text-decoration: none;
&:hover {
.raised();
}
}
.el-input() {
.card();
.rounded();
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
font-family: @font-family;
font-weight: @font-weight;
color: @col-dark;
background: @col-light;
border: none;
outline: none;
}
html { html {
min-height: 100%; min-height: 100%;
overflow: auto; overflow: auto;
@ -97,6 +156,6 @@ body {
height: 0; height: 0;
} }
*:focus { // *:focus {
outline: 1px solid #42a5f5; // outline: 1px solid #42a5f5;
} // }

33
src/_h5ai/client/css/inc/h5ai-info.less
View file

@ -46,42 +46,20 @@ body#h5ai-info {
} }
#pass { #pass {
-moz-appearance: none; .el-input();
-ms-appearance: none;
-webkit-appearance: none;
font-family: @font-family;
font-weight: @font-weight;
color: @col;
background: #fff;
border: none;
outline: none;
display: inline-block; display: inline-block;
width: 200px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
border-radius: 2px;
margin: 8px; margin: 8px;
padding: 0 12px; padding: 0 12px;
line-height: 28px; line-height: 28px;
width: 200px;
} }
#login, #logout { #login, #logout {
.el-button();
display: inline-block; display: inline-block;
margin: 8px; margin: 8px;
padding: 0 12px; padding: 0 12px;
background: #42a5f5;
color: #fff;
line-height: 28px; line-height: 28px;
cursor: pointer;
border-radius: 2px;
cursor: pointer;
text-decoration: none;
.transition(all 0.2s ease-in-out);
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
&:hover {
box-shadow: 0 1px 8px 0px rgba(0,0,0,0.5);
}
} }
#hint { #hint {
@ -98,11 +76,10 @@ body#h5ai-info {
padding: 0; padding: 0;
.test { .test {
.card();
.rounded();
margin: 12px 0 0 0; margin: 12px 0 0 0;
padding: 8px; padding: 8px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
background: #fff;
border-radius: 2px;
} }
.label { .label {
display: inline-block; display: inline-block;

8
src/_h5ai/client/css/inc/view-details.less
View file

@ -27,6 +27,7 @@
margin: 16px; margin: 16px;
#items { #items {
.rounded();
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
} }
@ -65,10 +66,11 @@
} }
.item { .item {
overflow: hidden;
border-bottom: 1px solid rgba(0,0,0,0.07); border-bottom: 1px solid rgba(0,0,0,0.07);
&:hover { &:hover {
box-shadow: 0 1px 10px 0px rgba(0,0,0,0.5); .raised();
z-index: 1; z-index: 1;
} }
} }
@ -81,6 +83,7 @@
padding: 8px; padding: 8px;
.thumb { .thumb {
.rounded();
box-shadow: 0 0 1px 0 rgba(0,0,0,0.2); box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);
} }
} }
@ -102,7 +105,8 @@
} }
.selector { .selector {
margin-top: -1px; left: -2px;
top: -2px;
} }
.view-details-sized(16px) .view-details-sized(16px)

7
src/_h5ai/client/css/inc/view-grid.less
View file

@ -21,12 +21,13 @@
margin: 8px; margin: 8px;
.item { .item {
.card();
.rounded();
float: left; float: left;
margin: 8px; margin: 8px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
&:hover, &.hover { &:hover {
box-shadow: 0 1px 10px 0px rgba(0,0,0,0.5); .raised();
} }
} }

7
src/_h5ai/client/css/inc/view-icons.less
View file

@ -24,12 +24,13 @@
margin: 8px; margin: 8px;
.item { .item {
.card();
.rounded();
float: left; float: left;
margin: 8px; margin: 8px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
&:hover, &.hover { &:hover {
box-shadow: 0 1px 12px 0px rgba(0,0,0,0.5); .raised();
} }
} }

10
src/_h5ai/client/css/inc/view.less
View file

@ -112,16 +112,16 @@
.selector { .selector {
display: none; display: none;
position: absolute; position: absolute;
left: -4px; left: 0;
top: 4px; top: 0;
width: 22px; width: 22px;
height: 22px; height: 22px;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
border-radius: 0 20px 20px 0; border-radius: 0 0 12px 0;
opacity: 0.6; opacity: 0.6;
padding: 2px; padding: 0px;
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;