mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-28 14:04:45 -04:00
Clean styles.
This commit is contained in:
parent
70e348ac50
commit
aa4b1a8acd
7 changed files with 21 additions and 37 deletions
|
@ -4,9 +4,8 @@
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
order: 99;
|
order: 99;
|
||||||
|
|
||||||
height: 18px;
|
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
// background: #fafafa;
|
background: #fafafa;
|
||||||
background: #eee;
|
background: #eee;
|
||||||
box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
|
box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
@ -14,11 +13,8 @@
|
||||||
color: #999;
|
color: #999;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
> * {
|
|
||||||
margin: 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, a:active, a:visited {
|
a, a:active, a:visited {
|
||||||
|
margin: 0 8px;
|
||||||
color: #999;
|
color: #999;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
.transition(all 0.2s ease-in-out);
|
.transition(all 0.2s ease-in-out);
|
||||||
|
@ -30,6 +26,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.noJsMsg, .noBrowserMsg {
|
.noJsMsg, .noBrowserMsg {
|
||||||
|
margin: 0 8px;
|
||||||
color: @col-error;
|
color: @col-error;
|
||||||
a, a:active, a:visited {
|
a, a:active, a:visited {
|
||||||
color: @col-error;
|
color: @col-error;
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon.square {
|
.square {
|
||||||
width: @size;
|
width: @size;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
@ -66,7 +66,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon.square {
|
.square {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 16px;
|
left: 16px;
|
||||||
|
|
|
@ -2,10 +2,10 @@
|
||||||
.view-grid-sized(@size) {
|
.view-grid-sized(@size) {
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
padding: (@size/2 - 9px) 8px;
|
line-height: @size;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon.square {
|
.square {
|
||||||
width: @size;
|
width: @size;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
@ -30,7 +30,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon.square {
|
.square {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
|
@ -40,6 +40,7 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
|
padding: 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date, .size {
|
.date, .size {
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
width: @size * 4/3;
|
width: @size * 4/3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon.rational {
|
.landscape {
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: @size;
|
width: @size;
|
||||||
|
@ -33,13 +33,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon.rational {
|
.landscape {
|
||||||
display: block;
|
display: block;
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
padding: 4px 6px;
|
padding: 0 6px;
|
||||||
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date, .size {
|
.date, .size {
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
|
|
||||||
|
|
||||||
@item-col-hover: @col-hover;
|
@item-col-hover: @col-hover;
|
||||||
@item-background-col-hover: #fafafa;
|
@item-background-col-hover: #fafafa;
|
||||||
@item-border-col-hover: @col-border;
|
@item-border-col-hover: @col-border;
|
||||||
|
@ -67,10 +66,7 @@
|
||||||
|
|
||||||
.selector {
|
.selector {
|
||||||
display: block;
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
img {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -88,19 +84,12 @@
|
||||||
|
|
||||||
img {
|
img {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
// max-width: 64px;
|
|
||||||
max-width: 32px;
|
max-width: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumb {
|
.thumb {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.rational {
|
|
||||||
img {
|
|
||||||
min-width: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
@ -123,26 +112,22 @@
|
||||||
.selector {
|
.selector {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
// left: 0;
|
left: -4px;
|
||||||
// top: 0;
|
|
||||||
// width: 18px;
|
|
||||||
// height: 18px;
|
|
||||||
left: 4px;
|
|
||||||
top: 4px;
|
top: 4px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.transition(all 0.2s ease-in-out);
|
|
||||||
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: 40px;
|
border-radius: 0 20px 20px 0;
|
||||||
|
opacity: 0.6;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
box-shadow: 0 0 16px 0 rgba(0,0,0,0.3);
|
box-shadow: 0 0 16px 0 rgba(0,0,0,0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
opacity: 0.2;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -50,13 +50,13 @@ modulejs.define('ext/thumbnails', ['_', 'core/settings', 'core/event', 'core/ser
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (item.thumbRational) {
|
if (item.thumbRational) {
|
||||||
item.$view.find('.icon.rational img').addClass('thumb').attr('src', item.thumbRational);
|
item.$view.find('.icon.landscape img').addClass('thumb').attr('src', item.thumbRational);
|
||||||
} else {
|
} else {
|
||||||
requestThumb(type, item.absHref, 4/3, function (src) {
|
requestThumb(type, item.absHref, 4/3, function (src) {
|
||||||
|
|
||||||
if (src && item.$view) {
|
if (src && item.$view) {
|
||||||
item.thumbRational = src;
|
item.thumbRational = src;
|
||||||
item.$view.find('.icon.rational img').addClass('thumb').attr('src', src);
|
item.$view.find('.icon.landscape img').addClass('thumb').attr('src', src);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,7 +10,7 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
|
||||||
'<li class="item">' +
|
'<li class="item">' +
|
||||||
'<a>' +
|
'<a>' +
|
||||||
'<span class="icon square"><img/></span>' +
|
'<span class="icon square"><img/></span>' +
|
||||||
'<span class="icon rational"><img/></span>' +
|
'<span class="icon landscape"><img/></span>' +
|
||||||
'<span class="label"/>' +
|
'<span class="label"/>' +
|
||||||
'<span class="date"/>' +
|
'<span class="date"/>' +
|
||||||
'<span class="size"/>' +
|
'<span class="size"/>' +
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue