From b1465e346a6d89a2bb9442e4470b8f37198244e7 Mon Sep 17 00:00:00 2001 From: syuilo Date: Wed, 22 Mar 2017 14:13:03 +0900 Subject: [PATCH] [Client] Dark header --- .../app/desktop/resources/header-logo-white.svg | 7 +++++++ src/web/app/desktop/tags/ui-header-account.tag | 15 +++------------ src/web/app/desktop/tags/ui-header-clock.tag | 2 +- src/web/app/desktop/tags/ui-header-nav.tag | 6 +++--- .../app/desktop/tags/ui-header-notifications.tag | 9 ++------- src/web/app/desktop/tags/ui-header.tag | 4 ++-- src/web/app/mobile/tags/ui-header.tag | 4 ++-- 7 files changed, 20 insertions(+), 27 deletions(-) create mode 100644 src/web/app/desktop/resources/header-logo-white.svg diff --git a/src/web/app/desktop/resources/header-logo-white.svg b/src/web/app/desktop/resources/header-logo-white.svg new file mode 100644 index 000000000..f31d6a7a6 --- /dev/null +++ b/src/web/app/desktop/resources/header-logo-white.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/src/web/app/desktop/tags/ui-header-account.tag b/src/web/app/desktop/tags/ui-header-account.tag index 8a683c550..e47572edb 100644 --- a/src/web/app/desktop/tags/ui-header-account.tag +++ b/src/web/app/desktop/tags/ui-header-account.tag @@ -28,7 +28,7 @@ display block margin 0 padding 0 - color #9eaba8 + color #dbe2e0 border none background transparent cursor pointer @@ -37,20 +37,11 @@ pointer-events none &:hover - color darken(#9eaba8, 20%) - - &:active - color darken(#9eaba8, 30%) - &[data-active='true'] - color darken(#9eaba8, 20%) + color #fff > .avatar - $saturate = 150% - filter saturate($saturate) - -webkit-filter saturate($saturate) - -moz-filter saturate($saturate) - -ms-filter saturate($saturate) + filter saturate(150%) > .username display block diff --git a/src/web/app/desktop/tags/ui-header-clock.tag b/src/web/app/desktop/tags/ui-header-clock.tag index 3c81f963f..8480cccdf 100644 --- a/src/web/app/desktop/tags/ui-header-clock.tag +++ b/src/web/app/desktop/tags/ui-header-clock.tag @@ -43,7 +43,7 @@ display table-cell vertical-align middle height 48px - color #9eaba8 + color #dbe2e0 > .yyyymmdd opacity 0.7 diff --git a/src/web/app/desktop/tags/ui-header-nav.tag b/src/web/app/desktop/tags/ui-header-nav.tag index 5ad0c9359..447dcf238 100644 --- a/src/web/app/desktop/tags/ui-header-nav.tag +++ b/src/web/app/desktop/tags/ui-header-nav.tag @@ -57,9 +57,9 @@ z-index 1 height 100% padding 0 24px - font-size 1em + font-size 13px font-variant small-caps - color #9eaba8 + color #dbe2e0 text-decoration none transition none cursor pointer @@ -68,7 +68,7 @@ pointer-events none &:hover - color darken(#9eaba8, 20%) + color #fff text-decoration none > i:first-child diff --git a/src/web/app/desktop/tags/ui-header-notifications.tag b/src/web/app/desktop/tags/ui-header-notifications.tag index 8afa6c534..1284f078b 100644 --- a/src/web/app/desktop/tags/ui-header-notifications.tag +++ b/src/web/app/desktop/tags/ui-header-notifications.tag @@ -13,7 +13,7 @@ margin 0 padding 0 width 32px - color #9eaba8 + color #dbe2e0 border none background transparent cursor pointer @@ -22,13 +22,8 @@ pointer-events none &:hover - color darken(#9eaba8, 20%) - - &:active - color darken(#9eaba8, 30%) - &[data-active='true'] - color darken(#9eaba8, 20%) + color #fff > i font-size 1.2em diff --git a/src/web/app/desktop/tags/ui-header.tag b/src/web/app/desktop/tags/ui-header.tag index 5547574f9..5eb715662 100644 --- a/src/web/app/desktop/tags/ui-header.tag +++ b/src/web/app/desktop/tags/ui-header.tag @@ -38,14 +38,14 @@ height 48px backdrop-filter blur(12px) //background-color rgba(255, 255, 255, 0.75) - background #fff + background #313a40 &:after content "" display block width 100% height 48px - background-image url(/resources/desktop/header-logo.svg) + background-image url(/resources/desktop/header-logo-white.svg) background-size 64px background-position center background-repeat no-repeat diff --git a/src/web/app/mobile/tags/ui-header.tag b/src/web/app/mobile/tags/ui-header.tag index 7d822cf6c..004b4f797 100644 --- a/src/web/app/mobile/tags/ui-header.tag +++ b/src/web/app/mobile/tags/ui-header.tag @@ -20,7 +20,7 @@ box-shadow 0 1px 0 rgba(#000, 0.075) > .main - color rgba(#000, 0.6) + color rgba(#fff, 0.9) > .backdrop position absolute @@ -30,7 +30,7 @@ height $height -webkit-backdrop-filter blur(12px) backdrop-filter blur(12px) - background-color rgba(#fff, 0.75) + background-color rgba(#313a40, 0.75) > .content z-index 1024