[Client] Dark header

This commit is contained in:
syuilo 2017-03-22 14:13:03 +09:00
parent 57dc370a19
commit b1465e346a
7 changed files with 20 additions and 27 deletions

View file

@ -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>

After

Width:  |  Height:  |  Size: 643 B

View file

@ -28,7 +28,7 @@
display block display block
margin 0 margin 0
padding 0 padding 0
color #9eaba8 color #dbe2e0
border none border none
background transparent background transparent
cursor pointer cursor pointer
@ -37,20 +37,11 @@
pointer-events none pointer-events none
&:hover &:hover
color darken(#9eaba8, 20%)
&:active
color darken(#9eaba8, 30%)
&[data-active='true'] &[data-active='true']
color darken(#9eaba8, 20%) color #fff
> .avatar > .avatar
$saturate = 150% filter saturate(150%)
filter saturate($saturate)
-webkit-filter saturate($saturate)
-moz-filter saturate($saturate)
-ms-filter saturate($saturate)
> .username > .username
display block display block

View file

@ -43,7 +43,7 @@
display table-cell display table-cell
vertical-align middle vertical-align middle
height 48px height 48px
color #9eaba8 color #dbe2e0
> .yyyymmdd > .yyyymmdd
opacity 0.7 opacity 0.7

View file

@ -57,9 +57,9 @@
z-index 1 z-index 1
height 100% height 100%
padding 0 24px padding 0 24px
font-size 1em font-size 13px
font-variant small-caps font-variant small-caps
color #9eaba8 color #dbe2e0
text-decoration none text-decoration none
transition none transition none
cursor pointer cursor pointer
@ -68,7 +68,7 @@
pointer-events none pointer-events none
&:hover &:hover
color darken(#9eaba8, 20%) color #fff
text-decoration none text-decoration none
> i:first-child > i:first-child

View file

@ -13,7 +13,7 @@
margin 0 margin 0
padding 0 padding 0
width 32px width 32px
color #9eaba8 color #dbe2e0
border none border none
background transparent background transparent
cursor pointer cursor pointer
@ -22,13 +22,8 @@
pointer-events none pointer-events none
&:hover &:hover
color darken(#9eaba8, 20%)
&:active
color darken(#9eaba8, 30%)
&[data-active='true'] &[data-active='true']
color darken(#9eaba8, 20%) color #fff
> i > i
font-size 1.2em font-size 1.2em

View file

@ -38,14 +38,14 @@
height 48px height 48px
backdrop-filter blur(12px) backdrop-filter blur(12px)
//background-color rgba(255, 255, 255, 0.75) //background-color rgba(255, 255, 255, 0.75)
background #fff background #313a40
&:after &:after
content "" content ""
display block display block
width 100% width 100%
height 48px height 48px
background-image url(/resources/desktop/header-logo.svg) background-image url(/resources/desktop/header-logo-white.svg)
background-size 64px background-size 64px
background-position center background-position center
background-repeat no-repeat background-repeat no-repeat

View file

@ -20,7 +20,7 @@
box-shadow 0 1px 0 rgba(#000, 0.075) box-shadow 0 1px 0 rgba(#000, 0.075)
> .main > .main
color rgba(#000, 0.6) color rgba(#fff, 0.9)
> .backdrop > .backdrop
position absolute position absolute
@ -30,7 +30,7 @@
height $height height $height
-webkit-backdrop-filter blur(12px) -webkit-backdrop-filter blur(12px)
backdrop-filter blur(12px) backdrop-filter blur(12px)
background-color rgba(#fff, 0.75) background-color rgba(#313a40, 0.75)
> .content > .content
z-index 1024 z-index 1024