From dc85bc4d5cc6380eee501a46b154c49bf407be28 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Sat, 6 Jul 2013 02:31:55 +0200 Subject: [PATCH] Some new styles. --- src/_h5ai/client/css/inc/bottombar.less | 7 +++++-- src/_h5ai/client/css/inc/general.less | 1 + src/_h5ai/client/css/inc/l10n.less | 9 ++++++--- src/_h5ai/client/css/inc/qrcode.less | 7 +++++-- src/_h5ai/client/css/inc/responsive.less | 11 +++++++---- src/_h5ai/client/css/inc/topbar.less | 14 +++++++++----- src/_h5ai/client/css/inc/tree.less | 19 +++++++++++++------ src/_h5ai/client/images/page.png | Bin 564 -> 317 bytes src/_h5ai/index.html.jade | 2 +- src/_h5ai/server/php/inc/page.php.jade | 2 +- 10 files changed, 48 insertions(+), 24 deletions(-) diff --git a/src/_h5ai/client/css/inc/bottombar.less b/src/_h5ai/client/css/inc/bottombar.less index 74c3ef69..e9f0a58d 100644 --- a/src/_h5ai/client/css/inc/bottombar.less +++ b/src/_h5ai/client/css/inc/bottombar.less @@ -7,8 +7,11 @@ left: 0; bottom: 0; padding: 6px 0 8px 0; - .vert-gradient(rgb(241,241,241), rgb(228,228,228)); - border-top: 1px solid rgb(210,210,210); + // .vert-gradient(rgb(241,241,241), rgb(228,228,228)); + // border-top: 1px solid rgb(210,210,210); + background-color: rgb(245,245,245); + border-top: 1px solid rgba(0,0,0,0.05); + // .box-shadow(0 -2px 4px 0 rgba(0, 0, 0, 0.15); color: #999; text-align: center; diff --git a/src/_h5ai/client/css/inc/general.less b/src/_h5ai/client/css/inc/general.less index bd6c3a16..2d6f4ac2 100644 --- a/src/_h5ai/client/css/inc/general.less +++ b/src/_h5ai/client/css/inc/general.less @@ -9,6 +9,7 @@ html { overflow-y: auto; } body { font-family: @font-family; + font-weight: 300; font-size: 13px; color: #555; background-color: #fff; diff --git a/src/_h5ai/client/css/inc/l10n.less b/src/_h5ai/client/css/inc/l10n.less index 4ece6ed8..e13d5620 100644 --- a/src/_h5ai/client/css/inc/l10n.less +++ b/src/_h5ai/client/css/inc/l10n.less @@ -11,8 +11,10 @@ right: 0; top: 0; max-height: 200px; - background-color: rgb(241,241,241); - border: 1px solid rgb(210,210,210); + // background-color: rgb(241,241,241); + // border: 1px solid rgb(210,210,210); + background-color: rgb(245,245,245); + border: 1px solid rgba(0,0,0,0.05); .sp-scrollbar { margin: 0; @@ -38,7 +40,8 @@ li { padding: 8px 24px 10px 24px; white-space: nowrap; - border-top: 1px solid rgb(231,231,231); + // border-top: 1px solid rgb(231,231,231); + border-top: 1px solid rgba(0,0,0,0.05); .transition(all 0.2s ease-in-out); &.current { diff --git a/src/_h5ai/client/css/inc/qrcode.less b/src/_h5ai/client/css/inc/qrcode.less index 8fa52c13..26459295 100644 --- a/src/_h5ai/client/css/inc/qrcode.less +++ b/src/_h5ai/client/css/inc/qrcode.less @@ -6,8 +6,11 @@ bottom: 50px; z-index: 1; - background-color: #fff; - border: 2px solid #ddd; + // background-color: #fff; + // border: 2px solid #ddd; + // background-color: rgb(245,245,245); + background-color: rgb(255,255,255); + border: 1px solid rgba(0,0,0,0.05); padding: 8px; canvas { diff --git a/src/_h5ai/client/css/inc/responsive.less b/src/_h5ai/client/css/inc/responsive.less index 86d9c1da..8d365590 100644 --- a/src/_h5ai/client/css/inc/responsive.less +++ b/src/_h5ai/client/css/inc/responsive.less @@ -1,8 +1,5 @@ -@media only screen and (max-width: 500px) { -body { - margin: 8px; -} +@media only screen and (max-width: 700px) { #topbar { .crumb { display: none; @@ -31,6 +28,12 @@ body { display: none; } } +} + +@media only screen and (max-width: 500px) { +body { + margin: 8px; +} #tree { display: none !important; } diff --git a/src/_h5ai/client/css/inc/topbar.less b/src/_h5ai/client/css/inc/topbar.less index 048f0959..eb4a46ad 100644 --- a/src/_h5ai/client/css/inc/topbar.less +++ b/src/_h5ai/client/css/inc/topbar.less @@ -6,13 +6,17 @@ min-height: 30px; left: 0; top: 0; - .vert-gradient(rgb(241,241,241), rgb(228,228,228)); - border-bottom: 1px solid rgb(210,210,210); + // .vert-gradient(rgb(241,241,241), rgb(228,228,228)); + // border-bottom: 1px solid rgb(210,210,210); + background-color: rgb(245,245,245); + border-bottom: 1px solid rgba(0,0,0,0.05); + // .box-shadow(0 2px 4px 0 rgba(0, 0, 0, 0.15); } .topbar-highlight { - background-color: rgba(255,255,255,0.5); + // background-color: rgba(255,255,255,0.5); + background-color: rgba(255,255,255,0.8); opacity: 1.0; } @@ -78,8 +82,8 @@ color: #999; } img.hint { - width: 14px; - height: 14px; + // width: 14px; + // height: 14px; opacity: 0.8; } } diff --git a/src/_h5ai/client/css/inc/tree.less b/src/_h5ai/client/css/inc/tree.less index 75d0a7d8..99a104d1 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: rgb(241,241,241); - border-right: 2px solid rgb(221,221,221); + // background-color: rgb(241,241,241); + // border-right: 2px solid rgb(221,221,221); + // border-right: 1px solid rgb(216,216,216); + background-color: rgb(245,245,245); + border-right: 1px solid rgba(0,0,0,0.05); .sp-scrollbar { margin: 8px 8px 8px 0; @@ -63,13 +66,15 @@ padding: 4px 6px; color: #555; border: 1px solid rgba(0,0,0,0); - .border-radius(5px); + .border-radius(3px); text-decoration: none; opacity: 0.7; &:hover, &.hover { color: #e80; - background-color: rgba(255,255,255,0.5); + // background-color: rgba(255,255,255,0.5); + background-color: rgba(255,255,255,0.8); + // border-color: rgba(0,0,0,0.05); opacity: 1; } } @@ -100,8 +105,10 @@ } .current { > a, > a:active, > a:visited { - background-color: rgba(255,255,255,0.5); - border-color: rgb(221,221,221); + // background-color: rgba(255,255,255,0.5); + // border-color: rgb(221,221,221); + background-color: rgba(255,255,255,0.8); + border-color: rgba(0,0,0,0.05); opacity: 1; } } diff --git a/src/_h5ai/client/images/page.png b/src/_h5ai/client/images/page.png index 24655400bab7e0b71a2252ba56638baaa5986f3e..4612fd03c9e0fe88f232669b7dd5e20fd0903b80 100644 GIT binary patch delta 247 zcmVq93yNmjhK)`TNehFWta@J8)9bMsoXYw-zSMu%Dpd&0_(a005Xrq z5sY2e?If-B-e-ZwD1fIgk`jQF63enUwqqhe0cOT93~1Zdj@~hmZ9F7EM5yZ;N-2EF zFE6LGfL*N+0>&7WWeKe{wrz{A(RWZ)73O(%=BW@Lz5}HcnAt(7vY3OWX+T5{E(Bnkm@Qb$4nuFf3kks&aD+yoC6EEds)!CwFX0kla(K~y-)eUq`y z5>XI^zuDbiFo4CprAFrf|Z5Q#)^uHQ27E@^cKE>vGoDu1uQ5q!Agk= zY-Cy1W8qw~A-_(sbLZZ+eA2=f8db1RQ`<;!U^P?RJ`f z=lLrj@`k1ZwSafP8$bY^PDk7AHU)kl2}$>Wx4?ZM0nAy&o<9IDeQiJ_>5e2KXJEiJ z@ClGd+3)u&r@wEtTF-%}&JdS#F1Ah=Ns*b6Wf`m0%DnMwp65Rsjm8TH(Ivnwpc5WY z60_ON27>`{9GmZdE{b9cJOQ2oM|>iGlCFXGK-B=P06-K)!Liqpnvw`E?13UQ zI*5%%Bb8-Inx^b_J2smQ%jNRq&Lo77M-gl?GrHZb*6TI3N0uba%v^2**w+CLfo_md zzkE?2&ay5T5Ex`xhM8ez@=VRX%4Odu!6b#LAzw1c|HU944u`5;rtZRYIt}$%neCZD z9LJ}ssva&Di;rd&K(3r_7$o39k|e+U=PCk##^dp7KA%529*>XtPb5jA$z<{c*x`D^ kS+FL=H{h=4o5BG70V-9xHS4%+ng9R*07*qoM6N<$f}&pPz5oCK diff --git a/src/_h5ai/index.html.jade b/src/_h5ai/index.html.jade index 8503be40..e408b1a5 100644 --- a/src/_h5ai/index.html.jade +++ b/src/_h5ai/index.html.jade @@ -13,7 +13,7 @@ html.no-js( lang="en" ) meta( name="viewport", content="width=device-width" ) link( rel="shortcut icon", href="client/images/app-16x16.ico" ) link( rel="apple-touch-icon", type="image/png", href="client/images/app-48x48.png" ) - link( rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:400,700,400italic,700italic" ) + link( rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:300,400,700,300italic,400italic,700italic" ) link( rel="stylesheet", href="client/css/styles.css" ) script( src="client/js/scripts.js", data-mode="info" ) diff --git a/src/_h5ai/server/php/inc/page.php.jade b/src/_h5ai/server/php/inc/page.php.jade index f1c94557..71d8c00f 100644 --- a/src/_h5ai/server/php/inc/page.php.jade +++ b/src/_h5ai/server/php/inc/page.php.jade @@ -17,7 +17,7 @@ html.no-js( lang="en" ) meta( name="viewport", content="width=device-width" ) link( rel="shortcut icon", href!="#{href}client/images/app-16x16.ico" ) link( rel="apple-touch-icon", type="image/png", href!="#{href}client/images/app-48x48.png" ) - link( rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:400,700,400italic,700italic" ) + link( rel="stylesheet", href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:300,400,700,300italic,400italic,700italic" ) link( rel="stylesheet", href!="#{href}client/css/styles.css" ) script( src!="#{href}client/js/scripts.js" )