From b1465e346a6d89a2bb9442e4470b8f37198244e7 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> 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 0000000000..f31d6a7a6b --- /dev/null +++ b/src/web/app/desktop/resources/header-logo-white.svg @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="utf-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" + y="0px" width="1024px" height="512px" viewBox="0 256 1024 512" enable-background="new 0 256 1024 512" xml:space="preserve"> +<polyline opacity="0.5" fill="none" stroke="#fff" stroke-width="34" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" + 896.5,608.5 800.5,416.5 704.5,608.5 608.5,416.5 512.5,608.5 416.5,416.5 320.5,608.5 224.5,416.5 128.5,608.5 "/> +</svg> diff --git a/src/web/app/desktop/tags/ui-header-account.tag b/src/web/app/desktop/tags/ui-header-account.tag index 8a683c5500..e47572edb5 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 3c81f963f3..8480cccdf0 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 5ad0c93596..447dcf2388 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 8afa6c5346..1284f078bb 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 5547574f94..5eb7156622 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 7d822cf6c8..004b4f7978 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