Clean styles.

This commit is contained in:
Lars Jung 2014-12-05 21:44:13 +01:00
parent 70e348ac50
commit aa4b1a8acd
7 changed files with 21 additions and 37 deletions

View file

@ -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;

View file

@ -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;

View file

@ -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 {

View file

@ -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 {

View file

@ -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%;
} }

View file

@ -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);
} }
}); });
} }

View file

@ -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"/>' +