This commit is contained in:
parent
eb23be979c
commit
e476647ab8
Binary file not shown.
After Width: | Height: | Size: 13 KiB |
|
@ -1,7 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-welcome">
|
<div class="mk-welcome">
|
||||||
|
<button @click="dark">
|
||||||
|
<template v-if="_darkmode_">%fa:moon%</template>
|
||||||
|
<template v-else>%fa:R moon%</template>
|
||||||
|
</button>
|
||||||
<main>
|
<main>
|
||||||
<img src="assets/title.svg" alt="Misskey">
|
<img :src="_darkmode_ ? 'assets/title-dark.svg' : 'assets/title.svg'" alt="Misskey">
|
||||||
<p><button class="signup" @click="signup">%i18n:@signup-button%</button><button class="signin" @click="signin">%i18n:@signin-button%</button></p>
|
<p><button class="signup" @click="signup">%i18n:@signup-button%</button><button class="signin" @click="signin">%i18n:@signin-button%</button></p>
|
||||||
|
|
||||||
<div class="tl">
|
<div class="tl">
|
||||||
|
@ -44,6 +48,9 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
signin() {
|
signin() {
|
||||||
this.$modal.show('signin');
|
this.$modal.show('signin');
|
||||||
|
},
|
||||||
|
dark() {
|
||||||
|
(this as any)._updateDarkmode_(!(this as any)._darkmode_);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -59,18 +66,25 @@ export default Vue.extend({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
@import '~const.styl'
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css?family=Sarpanch:700')
|
root(isDark)
|
||||||
|
|
||||||
.mk-welcome
|
|
||||||
display flex
|
display flex
|
||||||
flex-direction column
|
flex-direction column
|
||||||
flex 1
|
flex 1
|
||||||
|
|
||||||
|
> button
|
||||||
|
position absolute
|
||||||
|
z-index 1
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
padding 16px
|
||||||
|
font-size 18px
|
||||||
|
color isDark ? #fff : #555
|
||||||
|
|
||||||
> main
|
> main
|
||||||
flex 1
|
flex 1
|
||||||
padding 64px 0 0 0
|
padding 64px 0 0 0
|
||||||
text-align center
|
text-align center
|
||||||
color #555
|
color isDark ? #9aa4b3 : #555
|
||||||
|
|
||||||
> img
|
> img
|
||||||
width 350px
|
width 350px
|
||||||
|
@ -102,7 +116,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
.signin
|
.signin
|
||||||
&:hover
|
&:hover
|
||||||
color #000
|
color isDark ? #fff : #000
|
||||||
|
|
||||||
> .tl
|
> .tl
|
||||||
margin 32px auto 0 auto
|
margin 32px auto 0 auto
|
||||||
|
@ -149,7 +163,7 @@ export default Vue.extend({
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color #949ea5
|
color isDark ? #949ea5 : #737c82
|
||||||
|
|
||||||
> div
|
> div
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
@ -161,6 +175,12 @@ export default Vue.extend({
|
||||||
font-size 10px
|
font-size 10px
|
||||||
opacity 0.7
|
opacity 0.7
|
||||||
|
|
||||||
|
.mk-welcome[data-darkmode]
|
||||||
|
root(true)
|
||||||
|
|
||||||
|
.mk-welcome:not([data-darkmode])
|
||||||
|
root(false)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="stylus" module>
|
<style lang="stylus" module>
|
||||||
|
|
Loading…
Reference in New Issue