wip
This commit is contained in:
syuilo
parent
7b8a2aef0f
commit
9e319006f3
7 changed files with 27 additions and 106 deletions
|
|
@ -134,7 +134,7 @@ root(isDark)
|
|||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
color #9eaba8
|
||||
color var(--desktopHeaderFg)
|
||||
border none
|
||||
background transparent
|
||||
cursor pointer
|
||||
|
|
@ -144,14 +144,11 @@ root(isDark)
|
|||
|
||||
&:hover
|
||||
&[data-active='true']
|
||||
color isDark ? #fff : darken(#9eaba8, 20%)
|
||||
color var(--desktopHeaderHoverFg)
|
||||
|
||||
> .avatar
|
||||
filter saturate(150%)
|
||||
|
||||
&:active
|
||||
color isDark ? #fff : darken(#9eaba8, 30%)
|
||||
|
||||
> .username
|
||||
display block
|
||||
float left
|
||||
|
|
|
|||
|
|
@ -95,9 +95,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
|
||||
root(isDark)
|
||||
.nav
|
||||
display inline-block
|
||||
margin 0
|
||||
padding 0
|
||||
|
|
@ -129,7 +127,7 @@ root(isDark)
|
|||
padding 0 24px
|
||||
font-size 13px
|
||||
font-variant small-caps
|
||||
color isDark ? #b8c5ca : #9eaba8
|
||||
color var(--desktopHeaderFg)
|
||||
text-decoration none
|
||||
transition none
|
||||
cursor pointer
|
||||
|
|
@ -138,7 +136,7 @@ root(isDark)
|
|||
pointer-events none
|
||||
|
||||
&:hover
|
||||
color isDark ? #fff : darken(#9eaba8, 20%)
|
||||
color var(--desktopHeaderHoverFg)
|
||||
text-decoration none
|
||||
|
||||
> [data-fa]:first-child
|
||||
|
|
@ -162,10 +160,4 @@ root(isDark)
|
|||
@media (max-width 700px)
|
||||
padding 0 12px
|
||||
|
||||
.nav[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.nav:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -61,16 +61,13 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
|
||||
root(isDark)
|
||||
|
||||
.notifications
|
||||
> button
|
||||
display block
|
||||
margin 0
|
||||
padding 0
|
||||
width 32px
|
||||
color #9eaba8
|
||||
color var(--desktopHeaderFg)
|
||||
border none
|
||||
background transparent
|
||||
cursor pointer
|
||||
|
|
@ -80,10 +77,7 @@ root(isDark)
|
|||
|
||||
&:hover
|
||||
&[data-active='true']
|
||||
color isDark ? #fff : darken(#9eaba8, 20%)
|
||||
|
||||
&:active
|
||||
color isDark ? #fff : darken(#9eaba8, 30%)
|
||||
color var(--desktopHeaderHoverFg)
|
||||
|
||||
> [data-fa].bell
|
||||
font-size 1.2em
|
||||
|
|
@ -135,10 +129,4 @@ root(isDark)
|
|||
font-size 1rem
|
||||
overflow auto
|
||||
|
||||
.notifications[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.notifications:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,8 +28,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
root(isDark)
|
||||
.search
|
||||
> [data-fa]
|
||||
display block
|
||||
position absolute
|
||||
|
|
@ -38,7 +37,7 @@ root(isDark)
|
|||
width 48px
|
||||
text-align center
|
||||
line-height 48px
|
||||
color #9eaba8
|
||||
color var(--desktopHeaderFg)
|
||||
pointer-events none
|
||||
|
||||
> *
|
||||
|
|
@ -52,26 +51,20 @@ root(isDark)
|
|||
width 14em
|
||||
height 32px
|
||||
font-size 1em
|
||||
background rgba(#000, 0.05)
|
||||
background var(--desktopHeaderSearchBg)
|
||||
outline none
|
||||
//border solid 1px #ddd
|
||||
border none
|
||||
border-radius 16px
|
||||
transition color 0.5s ease, border 0.5s ease
|
||||
color isDark ? #fff : #000
|
||||
color var(--desktopHeaderSearchFg)
|
||||
|
||||
&::placeholder
|
||||
color #9eaba8
|
||||
color var(--desktopHeaderFg)
|
||||
|
||||
&:hover
|
||||
background isDark ? rgba(#fff, 0.04) : rgba(#000, 0.08)
|
||||
background var(--desktopHeaderSearchHoverBg)
|
||||
|
||||
&:focus
|
||||
box-shadow 0 0 0 2px var(--primaryAlpha05) !important
|
||||
|
||||
.search[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.search:not([data-darkmode])
|
||||
root(false)
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<div class="main" ref="main">
|
||||
<div class="backdrop"></div>
|
||||
<div class="main">
|
||||
<p ref="welcomeback" v-if="$store.getters.isSignedIn">%i18n:@welcome-back%<b>{{ $store.state.i | userName }}</b>%i18n:@adjective%</p>
|
||||
<div class="container" ref="mainContainer">
|
||||
<div class="left">
|
||||
<x-nav/>
|
||||
|
|
@ -64,55 +63,6 @@ export default Vue.extend({
|
|||
|
||||
mounted() {
|
||||
this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
|
||||
|
||||
if (this.$store.getters.isSignedIn) {
|
||||
const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
|
||||
const isHisasiburi = ago >= 3600;
|
||||
this.$store.state.i.lastUsedAt = new Date();
|
||||
|
||||
if (isHisasiburi) {
|
||||
(this.$refs.welcomeback as any).style.display = 'block';
|
||||
(this.$refs.main as any).style.overflow = 'hidden';
|
||||
|
||||
anime({
|
||||
targets: this.$refs.welcomeback,
|
||||
top: '0',
|
||||
opacity: 1,
|
||||
delay: 1000,
|
||||
duration: 500,
|
||||
easing: 'easeOutQuad'
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: this.$refs.mainContainer,
|
||||
opacity: 0,
|
||||
delay: 1000,
|
||||
duration: 500,
|
||||
easing: 'easeOutQuad'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
anime({
|
||||
targets: this.$refs.welcomeback,
|
||||
top: '-48px',
|
||||
opacity: 0,
|
||||
duration: 500,
|
||||
complete: () => {
|
||||
(this.$refs.welcomeback as any).style.display = 'none';
|
||||
(this.$refs.main as any).style.overflow = 'initial';
|
||||
},
|
||||
easing: 'easeInQuad'
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: this.$refs.mainContainer,
|
||||
opacity: 1,
|
||||
duration: 500,
|
||||
easing: 'easeInQuad'
|
||||
});
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -161,17 +111,6 @@ root(isDark)
|
|||
font-size 0.9rem
|
||||
user-select none
|
||||
|
||||
> p
|
||||
display none
|
||||
position absolute
|
||||
top 48px
|
||||
width 100%
|
||||
line-height 48px
|
||||
margin 0
|
||||
text-align center
|
||||
color isDark ? #fff : #888
|
||||
opacity 0
|
||||
|
||||
> .container
|
||||
display flex
|
||||
width 100%
|
||||
|
|
@ -190,7 +129,7 @@ root(isDark)
|
|||
display block
|
||||
width 48px
|
||||
height 48px
|
||||
background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg')
|
||||
background-image var(--desktopHeaderIcon)
|
||||
background-size 24px
|
||||
background-position center
|
||||
background-repeat no-repeat
|
||||
|
|
|
|||
|
|
@ -49,6 +49,12 @@
|
|||
"cwButtonHoverBg": "#707b97",
|
||||
"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
|
||||
"desktopHeaderBg": "#313543",
|
||||
"desktopHeaderFg": "#b8c5ca",
|
||||
"desktopHeaderHoverFg": "#fff",
|
||||
"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
|
||||
"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
|
||||
"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
|
||||
"desktopHeaderSearchFg": "#fff",
|
||||
"desktopPostFormBg": "@face",
|
||||
"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
|
||||
"desktopPostFormTextareaFg": "#fff",
|
||||
|
|
|
|||
|
|
@ -49,6 +49,12 @@
|
|||
"cwButtonHoverBg": "#bbc4ce",
|
||||
"reactionPickerButtonHoverBg": "#eee",
|
||||
"desktopHeaderBg": "#f7f7f7",
|
||||
"desktopHeaderFg": "#9eaba8",
|
||||
"desktopHeaderHoverFg": "#7b8c88",
|
||||
"desktopHeaderIcon": "url('/assets/desktop/header-icon.light.svg')",
|
||||
"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
|
||||
"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
|
||||
"desktopHeaderSearchFg": "#000",
|
||||
"desktopPostFormBg": "#fff6f6",
|
||||
"desktopPostFormTextareaBg": "#fff",
|
||||
"desktopPostFormTextareaFg": "#333",
|
||||
|
|
|
|||
Loading…
Reference in a new issue