keith/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey synced 2024-11-25 05:55:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2018-05-23 15:48:41 +09:00
parent eb23be979c
commit e476647ab8
2 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/title-dark.svg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

34
src/client/app/desktop/views/pages/welcome.vue
View file

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