mirrors/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2025-05-25 20:44:53 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update view styles.

Browse source
This commit is contained in:
Lars Jung 2014-06-07 00:30:52 +02:00
parent 9a76c81e7d
commit a7301838b9
4 changed files with 129 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,68 +1,4 @@
#view.view-details {
li {
&.header {
display: list-item;
}
&.item {
a, a:active, a:visited {
border-bottom: 1px solid @item-border-col-sep;
height: @icon-size + 6px;
&:hover, &.hover {
border-color: @item-border-col-hover;
}
}
// needs to be here, to not conflict with header fields
.icon {
padding: 8px;
}
.label, .date, .size {
padding: ((@icon-size - 16px)/2) 8px;
}
}
.icon.square {
display: inline-block;
position: absolute;
left: 0;
top: -4px;
width: @icon-size;
img {
width: @icon-size;
height: @icon-size;
}
}
.label {
margin: 0 230px 0 (@icon-size + 16px);
}
.date {
position: absolute;
right: 100px;
top: 0;
}
.size {
position: absolute;
right: 0;
top: 0;
}
.selector {
margin-top: -1px;
}
}
}
.view-details-sized(@size) { .view-details-sized(@size) {
li { li {
@ -95,6 +31,55 @@
#view.view-details { #view.view-details {
li {
&.header {
display: list-item;
}
&.item {
a, a:active, a:visited {
border-bottom: 1px solid @item-border-col-sep;
&:hover, &.hover {
border-color: @item-border-col-hover;
}
}
// needs to be here, to not conflict with header fields
.icon {
padding: 8px;
}
}
.icon.square {
display: inline-block;
position: absolute;
left: 0;
top: -4px;
}
.date {
position: absolute;
right: 100px;
top: 0;
}
.size {
position: absolute;
right: 0;
top: 0;
}
.selector {
margin-top: -1px;
}
}
.view-details-sized(@icon-size);
&.size-16 { &.size-16 {
.view-details-sized(16px) .view-details-sized(16px)
} }

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

@ -1,56 +1,4 @@
#view.view-grid {
li {
&.item {
float: left;
margin: 2px;
a, a:active, a:visited {
width: @icon-size + 182px;
height: @icon-size + 6px;
border: 1px solid rgba(0,0,0,0);
&:hover, &.hover {
border-color: @item-border-col-hover;
}
}
// needs to be here, to not conflict with header fields
.icon {
padding: 8px;
}
.label, .date, .size {
padding: ((@icon-size - 16px)/2) 8px;
}
}
.icon.square {
display: inline-block;
position: absolute;
left: 0;
top: -4px;
width: @icon-size;
img {
width: @icon-size;
height: @icon-size;
}
}
.label {
display: block;
margin: 0 0 0 (@icon-size + 8px);
}
.date, .size {
display: none;
}
}
}
.view-grid-sized(@size) { .view-grid-sized(@size) {
li { li {
@ -84,6 +32,45 @@
#view.view-grid { #view.view-grid {
li {
&.item {
float: left;
margin: 2px;
a, a:active, a:visited {
border: 1px solid rgba(0,0,0,0);
&:hover, &.hover {
border-color: @item-border-col-hover;
}
}
// needs to be here, to not conflict with header fields
.icon {
padding: 8px;
}
}
.icon.square {
display: inline-block;
position: absolute;
left: 0;
top: -4px;
}
.label {
display: block;
}
.date, .size {
display: none;
}
}
.view-grid-sized(@icon-size);
&.size-16 { &.size-16 {
.view-grid-sized(16px) .view-grid-sized(16px)
} }

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

@ -1,4 +1,34 @@
.view-icons-sized(@size) {
li {
&.item {
a, a:active, a:visited {
width: @size * 2;
height: @size + 72px;
}
}
.icon.rational {
height: @size;
img {
width: @size;
height: @size;
}
img.thumb {
width: auto;
height: auto;
max-width: @size * 2;
max-height: @size;
}
}
}
}
#view.view-icons { #view.view-icons {
li { li {
@ -11,8 +41,6 @@
a, a:active, a:visited { a, a:active, a:visited {
padding: 8px; padding: 8px;
min-width: 96px; min-width: 96px;
width: @icon-size * 2;
height: @icon-size + 72px;
border: 1px solid rgba(0,0,0,0); border: 1px solid rgba(0,0,0,0);
&:hover, &.hover { &:hover, &.hover {
@ -23,13 +51,7 @@
.icon.rational { .icon.rational {
display: block; display: block;
height: @icon-size;
margin-bottom: 6px; margin-bottom: 6px;
img {
max-width: @icon-size * 2;
max-height: @icon-size;
}
} }
.label { .label {
@ -48,71 +70,46 @@
padding: 16px; padding: 16px;
height: 120px; height: 120px;
} }
}
.view-icons-sized(@icon-size);
.view-icons-sized(@size) {
li {
&.item {
a, a:active, a:visited {
width: @size * 2;
height: @size + 72px;
}
}
.icon.rational {
height: @size;
img {
max-width: @size * 2;
max-height: @size;
}
}
}
}
#view.view-icons {
&.size-16 { &.size-16 {
.view-icons-sized(16px) .view-icons-sized(16px);
} }
&.size-24 { &.size-24 {
.view-icons-sized(24px) .view-icons-sized(24px);
} }
&.size-32 { &.size-32 {
.view-icons-sized(32px) .view-icons-sized(32px);
} }
&.size-48 { &.size-48 {
.view-icons-sized(48px) .view-icons-sized(48px);
} }
&.size-64 { &.size-64 {
.view-icons-sized(64px) .view-icons-sized(64px);
} }
&.size-96 { &.size-96 {
.view-icons-sized(96px) .view-icons-sized(96px);
} }
&.size-128 { &.size-128 {
.view-icons-sized(128px) .view-icons-sized(128px);
} }
&.size-192 { &.size-192 {
.view-icons-sized(192px) .view-icons-sized(192px);
} }
&.size-256 { &.size-256 {
.view-icons-sized(256px) .view-icons-sized(256px);
} }
&.size-384 { &.size-384 {
.view-icons-sized(384px) .view-icons-sized(384px);
} }
} }

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

@ -115,23 +115,6 @@
} }
} }
&.error {
a, a:active, a:visited {
color: #aaa;
&:hover, &.hover {
color: @col-hover;
}
}
.label .hint {
padding: 0 6px;
font-size: 0.9em;
color: #c55;
}
}
&.folder-parent { &.folder-parent {
.date, .size { .date, .size {