mirrors/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2024-09-20 04:38:51 -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
Show stats 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) {
li {
@ -95,6 +31,55 @@
#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 {
.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) {
li {
@ -84,6 +32,45 @@
#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 {
.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 {
li {
@ -11,8 +41,6 @@
a, a:active, a:visited {
padding: 8px;
min-width: 96px;
width: @icon-size * 2;
height: @icon-size + 72px;
border: 1px solid rgba(0,0,0,0);
&:hover, &.hover {
@ -23,13 +51,7 @@
.icon.rational {
display: block;
height: @icon-size;
margin-bottom: 6px;
img {
max-width: @icon-size * 2;
max-height: @icon-size;
}
}
.label {
@ -48,71 +70,46 @@
padding: 16px;
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 {
.view-icons-sized(16px)
.view-icons-sized(16px);
}
&.size-24 {
.view-icons-sized(24px)
.view-icons-sized(24px);
}
&.size-32 {
.view-icons-sized(32px)
.view-icons-sized(32px);
}
&.size-48 {
.view-icons-sized(48px)
.view-icons-sized(48px);
}
&.size-64 {
.view-icons-sized(64px)
.view-icons-sized(64px);
}
&.size-96 {
.view-icons-sized(96px)
.view-icons-sized(96px);
}
&.size-128 {
.view-icons-sized(128px)
.view-icons-sized(128px);
}
&.size-192 {
.view-icons-sized(192px)
.view-icons-sized(192px);
}
&.size-256 {
.view-icons-sized(256px)
.view-icons-sized(256px);
}
&.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 {
.date, .size {