From b390b9fc420219112ab9c81cdeb3e28549098f6a Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Thu, 27 Nov 2014 01:30:54 +0100 Subject: [PATCH] Style changes. --- src/_h5ai/client/css/inc/general.less | 6 +++--- src/_h5ai/client/css/inc/topbar.less | 6 ++++-- src/_h5ai/client/css/inc/tree.less | 22 +++++++++++++--------- src/_h5ai/client/css/inc/view-details.less | 3 ++- src/_h5ai/client/css/inc/view-grid.less | 4 +++- src/_h5ai/client/css/inc/view-icons.less | 15 +++++++++++++++ src/_h5ai/client/css/inc/view.less | 10 +++++++--- src/_h5ai/client/css/styles.less | 5 ++++- src/_h5ai/conf/options.json | 4 ++-- 9 files changed, 53 insertions(+), 22 deletions(-) diff --git a/src/_h5ai/client/css/inc/general.less b/src/_h5ai/client/css/inc/general.less index 2c43a33b..a57e43a4 100644 --- a/src/_h5ai/client/css/inc/general.less +++ b/src/_h5ai/client/css/inc/general.less @@ -1,7 +1,7 @@ @col: rgb(85,85,85); // @col-back: rgb(255,255,255); -@col-back: rgb(245,245,245); +@col-back: #eeeeee; @col-hover: rgb(29,119,194); @col-border: rgba(0,0,0,0.05); @col-border-strong: rgba(0,0,0,0.15); @@ -28,8 +28,8 @@ @border-widget: 1px solid @col-border; @border-widget-sep: 1px solid @col-widget-sep; -@font-family: Ubuntu, Helvetica, Arial, sans-serif; -@font-weight: 300; +@font-family: Roboto, Ubuntu, Helvetica, Arial, sans-serif; +@font-weight: 400; @font-family-mono: "Ubuntu Mono", monospace; diff --git a/src/_h5ai/client/css/inc/topbar.less b/src/_h5ai/client/css/inc/topbar.less index 4bf0a2d7..d29e0029 100644 --- a/src/_h5ai/client/css/inc/topbar.less +++ b/src/_h5ai/client/css/inc/topbar.less @@ -8,11 +8,12 @@ top: 0; background-color: @col-widget-back; border-bottom: @border-widget; + font-weight: lighter; } .topbar-highlight { - background-color: @col-widget-back-highlight; + // background-color: @col-widget-back-highlight; opacity: 1.0; } @@ -42,7 +43,7 @@ color: @col; cursor: pointer; text-decoration: none; - opacity: 0.7; + // opacity: 0.7; .transition(all 0.2s ease-in-out); display: block; @@ -55,6 +56,7 @@ } } .current { + font-weight: bold; a, span.element { .topbar-highlight; } diff --git a/src/_h5ai/client/css/inc/tree.less b/src/_h5ai/client/css/inc/tree.less index 09c712cc..1acc838e 100644 --- a/src/_h5ai/client/css/inc/tree.less +++ b/src/_h5ai/client/css/inc/tree.less @@ -8,8 +8,11 @@ z-index: 3; overflow: auto; padding: 8px; - background-color: @col-widget-back; - border-right: @border-widget; + // background-color: @col-widget-back; + // border-right: @border-widget; + background: #eee; + border-right: 2px solid @col-border; + font-weight: lighter; .sp-scrollbar { width: 6px; @@ -31,7 +34,7 @@ width: 16px; height: 22px; float: left; - opacity: 0.7; + // opacity: 0.7; cursor: pointer; img { @@ -62,12 +65,12 @@ border: 1px solid rgba(0,0,0,0); border-radius: 3px; text-decoration: none; - opacity: 0.7; + // opacity: 0.7; &:hover, &.hover { color: @col-hover; - background-color: @col-widget-back-hover; - opacity: 1; + // background-color: @col-widget-back-hover; + // opacity: 1; } } .icon { @@ -97,9 +100,10 @@ } .current { > a, > a:active, > a:visited { - background-color: @col-widget-back-sel; - border-color: @col-widget-sep; - opacity: 1; + // background-color: @col-widget-back-sel; + // border-color: @col-widget-sep; + // opacity: 1; + font-weight: bold; } } .error { diff --git a/src/_h5ai/client/css/inc/view-details.less b/src/_h5ai/client/css/inc/view-details.less index 5f8f00c8..f51ea486 100644 --- a/src/_h5ai/client/css/inc/view-details.less +++ b/src/_h5ai/client/css/inc/view-details.less @@ -33,6 +33,7 @@ #view.view-details { li { + border-bottom: 1px solid rgba(0,0,0,0.065); &.header { display: list-item; @@ -42,7 +43,7 @@ background: #fff; a, a:active, a:visited { - border-bottom: 1px solid @item-border-col-sep; + // border-bottom: 1px solid @item-border-col-sep; &:hover, &.hover { border-color: @item-border-col-hover; diff --git a/src/_h5ai/client/css/inc/view-grid.less b/src/_h5ai/client/css/inc/view-grid.less index 6a47438d..3b1fd0bf 100644 --- a/src/_h5ai/client/css/inc/view-grid.less +++ b/src/_h5ai/client/css/inc/view-grid.less @@ -37,8 +37,10 @@ &.item { float: left; - margin: 2px; + // margin: 2px; + margin: 4px; background: #fff; + box-shadow: 0 1px 1px 0 rgba(0,0,0,.2); a, a:active, a:visited { border: 1px solid rgba(0,0,0,0); diff --git a/src/_h5ai/client/css/inc/view-icons.less b/src/_h5ai/client/css/inc/view-icons.less index 075de1c4..99e7c1bb 100644 --- a/src/_h5ai/client/css/inc/view-icons.less +++ b/src/_h5ai/client/css/inc/view-icons.less @@ -28,6 +28,9 @@ } +@minsize: 64px; + + #view.view-icons { li { @@ -40,6 +43,8 @@ a, a:active, a:visited { padding: 8px; border: 1px solid rgba(0,0,0,0); + min-width: @minsize * 4/3; + min-height: @minsize + 28px; &:hover, &.hover { border-color: @item-border-col-hover; @@ -50,6 +55,16 @@ .icon.rational { display: block; margin-bottom: 6px; + + min-height: @minsize; + + img { + min-height: @minsize; + } + + .thumb { + min-width: @minsize * 4/3; + } } .label { diff --git a/src/_h5ai/client/css/inc/view.less b/src/_h5ai/client/css/inc/view.less index da4fcfe0..b295d278 100644 --- a/src/_h5ai/client/css/inc/view.less +++ b/src/_h5ai/client/css/inc/view.less @@ -16,7 +16,7 @@ position: absolute; left: 0; top: 0; - z-index: 10; + z-index: 2; border: 1px dashed @col-border-strong; background-color: rgba(0,0,0,0.01); } @@ -45,9 +45,11 @@ &.header { display: none; font-size: 13px; + background: #fafafa; a, a:active, a:visited { - padding: 6px 6px 18px 6px; + // padding: 6px 6px 18px 6px; + padding: 12px 8px; opacity: 0.4; .transition(all 0.2s ease-in-out); @@ -130,6 +132,7 @@ img { vertical-align: top; max-width: 64px; + // max-width: 32px; } .thumb { @@ -140,7 +143,8 @@ border-radius: 1px; background: #fff; overflow: hidden; - box-shadow: 0 1px rgba(0,0,0,0.1), 1px 0 rgba(0,0,0,0.02), -1px 0 rgba(0,0,0,0.02); + // box-shadow: 0 1px rgba(0,0,0,0.1), 1px 0 rgba(0,0,0,0.02), -1px 0 rgba(0,0,0,0.02); + box-shadow: 0 1px 1px 0 rgba(0,0,0,.2); } } diff --git a/src/_h5ai/client/css/styles.less b/src/_h5ai/client/css/styles.less index 16ddb183..c4c2560d 100644 --- a/src/_h5ai/client/css/styles.less +++ b/src/_h5ai/client/css/styles.less @@ -2,7 +2,7 @@ @import "lib/h5bp-normalize"; @import "lib/h5bp-main-header"; -@import "inc/fonts"; +// @import "inc/fonts"; @import "inc/general"; @import "inc/topbar"; @import "inc/bottombar"; @@ -31,3 +31,6 @@ @import "inc/h5ai-info"; @import "lib/h5bp-main-footer"; + +@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,700); +@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700); diff --git a/src/_h5ai/conf/options.json b/src/_h5ai/conf/options.json index 1fd9c342..5e454cc5 100644 --- a/src/_h5ai/conf/options.json +++ b/src/_h5ai/conf/options.json @@ -17,7 +17,7 @@ Options "bottom": 50, "left": "auto", "right": "auto", - "maxWidth": 1024 + "maxWidth": 1400 }, /* @@ -52,7 +52,7 @@ Options "hideParentFolder": false, "modes": ["details", "grid", "icons"], "setParentFolderLabels": true, - "sizes": [24, 32, 48, 64, 96, 128, 192, 256, 384], + "sizes": [16, 24, 32, 48, 64, 96, 128, 192, 256, 384], "smartBrowsing": true, "theme": "", "unmanaged": ["index.html", "index.htm", "index.php"],