From a7301838b92a9516455e204e7eb1ff72f977683b Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Sat, 7 Jun 2014 00:30:52 +0200 Subject: [PATCH] Update view styles. --- src/_h5ai/client/css/inc/view-details.less | 113 +++++++++------------ src/_h5ai/client/css/inc/view-grid.less | 91 +++++++---------- src/_h5ai/client/css/inc/view-icons.less | 85 ++++++++-------- src/_h5ai/client/css/inc/view.less | 17 ---- 4 files changed, 129 insertions(+), 177 deletions(-) diff --git a/src/_h5ai/client/css/inc/view-details.less b/src/_h5ai/client/css/inc/view-details.less index f1bca514..2568d96c 100644 --- a/src/_h5ai/client/css/inc/view-details.less +++ b/src/_h5ai/client/css/inc/view-details.less @@ -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) } diff --git a/src/_h5ai/client/css/inc/view-grid.less b/src/_h5ai/client/css/inc/view-grid.less index 9ba3b4fc..e4437cf0 100644 --- a/src/_h5ai/client/css/inc/view-grid.less +++ b/src/_h5ai/client/css/inc/view-grid.less @@ -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) } diff --git a/src/_h5ai/client/css/inc/view-icons.less b/src/_h5ai/client/css/inc/view-icons.less index 75f145b2..d01dda80 100644 --- a/src/_h5ai/client/css/inc/view-icons.less +++ b/src/_h5ai/client/css/inc/view-icons.less @@ -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); } } diff --git a/src/_h5ai/client/css/inc/view.less b/src/_h5ai/client/css/inc/view.less index 250e4400..8c84742e 100644 --- a/src/_h5ai/client/css/inc/view.less +++ b/src/_h5ai/client/css/inc/view.less @@ -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 {