forked from FoundKeyGang/FoundKey
[wip] darkmode
This commit is contained in:
syuilo
parent
9b3ee877a6
commit
8daa9c8062
31 changed files with 448 additions and 490 deletions
|
|
@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
|
|||
customize: "Customize"
|
||||
settings: "Settings"
|
||||
signout: "Sign out"
|
||||
dark: "Fall in dark"
|
||||
|
||||
desktop/views/components/ui.header.nav.vue:
|
||||
home: "Home"
|
||||
|
|
|
|||
|
|
@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
|
|||
customize: "Modifications"
|
||||
settings: "Réglages"
|
||||
signout: "Déconnexion"
|
||||
dark: "Fall in dark"
|
||||
|
||||
desktop/views/components/ui.header.nav.vue:
|
||||
home: "Accueil"
|
||||
|
|
|
|||
|
|
@ -370,6 +370,7 @@ desktop/views/components/ui.header.account.vue:
|
|||
customize: "カスタマイズ"
|
||||
settings: "設定"
|
||||
signout: "サインアウト"
|
||||
dark: "闇に飲まれる"
|
||||
|
||||
desktop/views/components/ui.header.nav.vue:
|
||||
home: "ホーム"
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.mk-messaging
|
||||
root(isDark)
|
||||
|
||||
&[data-compact]
|
||||
font-size 0.8em
|
||||
|
|
@ -209,7 +209,7 @@ export default Vue.extend({
|
|||
|
||||
> .form
|
||||
padding 8px
|
||||
background #f7f7f7
|
||||
background isDark ? #282c37 : #f7f7f7
|
||||
|
||||
> label
|
||||
display block
|
||||
|
|
@ -241,13 +241,14 @@ export default Vue.extend({
|
|||
line-height 38px
|
||||
color #000
|
||||
outline none
|
||||
border solid 1px #eee
|
||||
background isDark ? #191b22 : #fff
|
||||
border solid 1px isDark ? #495156 : #eee
|
||||
border-radius 5px
|
||||
box-shadow none
|
||||
transition color 0.5s ease, border 0.5s ease
|
||||
|
||||
&:hover
|
||||
border solid 1px #ddd
|
||||
border solid 1px isDark ? #b0b0b0 : #ddd
|
||||
transition border 0.2s ease
|
||||
|
||||
&:focus
|
||||
|
|
@ -328,21 +329,21 @@ export default Vue.extend({
|
|||
> a
|
||||
display block
|
||||
text-decoration none
|
||||
background #fff
|
||||
border-bottom solid 1px #eee
|
||||
background isDark ? #282c37 : #fff
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
|
||||
*
|
||||
pointer-events none
|
||||
user-select none
|
||||
|
||||
&:hover
|
||||
background #fafafa
|
||||
background isDark ? #1e2129 : #fafafa
|
||||
|
||||
> .avatar
|
||||
filter saturate(200%)
|
||||
|
||||
&:active
|
||||
background #eee
|
||||
background isDark ? #14161b : #eee
|
||||
|
||||
&[data-is-read]
|
||||
&[data-is-me]
|
||||
|
|
@ -382,17 +383,17 @@ export default Vue.extend({
|
|||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
font-size 1em
|
||||
color rgba(0, 0, 0, 0.9)
|
||||
color isDark ? #fff : rgba(0, 0, 0, 0.9)
|
||||
font-weight bold
|
||||
transition all 0.1s ease
|
||||
|
||||
> .username
|
||||
margin 0 8px
|
||||
color rgba(0, 0, 0, 0.5)
|
||||
color isDark ? #606984 : rgba(0, 0, 0, 0.5)
|
||||
|
||||
> .mk-time
|
||||
margin 0 0 0 auto
|
||||
color rgba(0, 0, 0, 0.5)
|
||||
color isDark ? #606984 : rgba(0, 0, 0, 0.5)
|
||||
font-size 80%
|
||||
|
||||
> .avatar
|
||||
|
|
@ -412,10 +413,10 @@ export default Vue.extend({
|
|||
overflow hidden
|
||||
overflow-wrap break-word
|
||||
font-size 1.1em
|
||||
color rgba(0, 0, 0, 0.8)
|
||||
color isDark ? #fff : rgba(0, 0, 0, 0.8)
|
||||
|
||||
.me
|
||||
color rgba(0, 0, 0, 0.4)
|
||||
color isDark ? rgba(#fff, 0.7) : rgba(0, 0, 0, 0.4)
|
||||
|
||||
> .image
|
||||
display block
|
||||
|
|
@ -460,4 +461,10 @@ export default Vue.extend({
|
|||
> .avatar
|
||||
margin 0 12px 0 0
|
||||
|
||||
.mk-messaging[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-messaging:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ export default Vue.extend({
|
|||
|
||||
$border-color = rgba(27, 31, 35, 0.15)
|
||||
|
||||
.mk-reaction-picker
|
||||
root(isDark)
|
||||
position initial
|
||||
|
||||
> .backdrop
|
||||
|
|
@ -124,9 +124,10 @@ $border-color = rgba(27, 31, 35, 0.15)
|
|||
opacity 0
|
||||
|
||||
> .popover
|
||||
$bgcolor = isDark ? #2c303c : #fff
|
||||
position absolute
|
||||
z-index 10001
|
||||
background #fff
|
||||
background $bgcolor
|
||||
border 1px solid $border-color
|
||||
border-radius 4px
|
||||
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
|
||||
|
|
@ -159,15 +160,15 @@ $border-color = rgba(27, 31, 35, 0.15)
|
|||
border-top solid $balloon-size transparent
|
||||
border-left solid $balloon-size transparent
|
||||
border-right solid $balloon-size transparent
|
||||
border-bottom solid $balloon-size #fff
|
||||
border-bottom solid $balloon-size $bgcolor
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 0
|
||||
padding 8px 10px
|
||||
font-size 14px
|
||||
color #586069
|
||||
border-bottom solid 1px #e1e4e8
|
||||
color isDark ? #d6dce2 : #586069
|
||||
border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
|
||||
|
||||
> div
|
||||
padding 4px
|
||||
|
|
@ -182,10 +183,16 @@ $border-color = rgba(27, 31, 35, 0.15)
|
|||
border-radius 2px
|
||||
|
||||
&:hover
|
||||
background #eee
|
||||
background isDark ? #252731 : #eee
|
||||
|
||||
&:active
|
||||
background $theme-color
|
||||
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
|
||||
|
||||
.mk-reaction-picker[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-reaction-picker:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<template>
|
||||
<div class="mk-reactions-viewer">
|
||||
<template v-if="reactions">
|
||||
<span v-if="reactions.like"><mk-reaction-icon reaction='like'/><span>{{ reactions.like }}</span></span>
|
||||
<span v-if="reactions.love"><mk-reaction-icon reaction='love'/><span>{{ reactions.love }}</span></span>
|
||||
<span v-if="reactions.laugh"><mk-reaction-icon reaction='laugh'/><span>{{ reactions.laugh }}</span></span>
|
||||
<span v-if="reactions.hmm"><mk-reaction-icon reaction='hmm'/><span>{{ reactions.hmm }}</span></span>
|
||||
<span v-if="reactions.surprise"><mk-reaction-icon reaction='surprise'/><span>{{ reactions.surprise }}</span></span>
|
||||
<span v-if="reactions.congrats"><mk-reaction-icon reaction='congrats'/><span>{{ reactions.congrats }}</span></span>
|
||||
<span v-if="reactions.angry"><mk-reaction-icon reaction='angry'/><span>{{ reactions.angry }}</span></span>
|
||||
<span v-if="reactions.confused"><mk-reaction-icon reaction='confused'/><span>{{ reactions.confused }}</span></span>
|
||||
<span v-if="reactions.pudding"><mk-reaction-icon reaction='pudding'/><span>{{ reactions.pudding }}</span></span>
|
||||
<span v-if="reactions.like"><mk-reaction-icon reaction="like"/><span>{{ reactions.like }}</span></span>
|
||||
<span v-if="reactions.love"><mk-reaction-icon reaction="love"/><span>{{ reactions.love }}</span></span>
|
||||
<span v-if="reactions.laugh"><mk-reaction-icon reaction="laugh"/><span>{{ reactions.laugh }}</span></span>
|
||||
<span v-if="reactions.hmm"><mk-reaction-icon reaction="hmm"/><span>{{ reactions.hmm }}</span></span>
|
||||
<span v-if="reactions.surprise"><mk-reaction-icon reaction="surprise"/><span>{{ reactions.surprise }}</span></span>
|
||||
<span v-if="reactions.congrats"><mk-reaction-icon reaction="congrats"/><span>{{ reactions.congrats }}</span></span>
|
||||
<span v-if="reactions.angry"><mk-reaction-icon reaction="angry"/><span>{{ reactions.angry }}</span></span>
|
||||
<span v-if="reactions.confused"><mk-reaction-icon reaction="confused"/><span>{{ reactions.confused }}</span></span>
|
||||
<span v-if="reactions.pudding"><mk-reaction-icon reaction="pudding"/><span>{{ reactions.pudding }}</span></span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -27,9 +27,10 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-reactions-viewer
|
||||
border-top dashed 1px #eee
|
||||
border-bottom dashed 1px #eee
|
||||
root(isDark)
|
||||
$borderColor = isDark ? #5e6673 : #eee
|
||||
border-top dashed 1px $borderColor
|
||||
border-bottom dashed 1px $borderColor
|
||||
margin 4px 0
|
||||
|
||||
&:empty
|
||||
|
|
@ -44,6 +45,12 @@ export default Vue.extend({
|
|||
> span
|
||||
margin-left 4px
|
||||
font-size 1.2em
|
||||
color #444
|
||||
color isDark ? #d1d5dc : #444
|
||||
|
||||
.mk-reactions-viewer[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-reactions-viewer:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -50,8 +50,6 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-twitter-setting
|
||||
color #4a535a
|
||||
|
||||
.account
|
||||
border solid 1px #e1e8ed
|
||||
border-radius 4px
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@ export default define({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mkw-donation
|
||||
background #fff
|
||||
border solid 1px #ead8bb
|
||||
root(isDark)
|
||||
background isDark ? #282c37 : #fff
|
||||
border solid 1px isDark ? #c3831c : #ead8bb
|
||||
border-radius 6px
|
||||
|
||||
> article
|
||||
|
|
@ -30,7 +30,7 @@ export default define({
|
|||
> h1
|
||||
margin 0 0 5px 0
|
||||
font-size 1em
|
||||
color #888
|
||||
color isDark ? #b2bac1 : #888
|
||||
|
||||
> [data-fa]
|
||||
margin-right 0.25em
|
||||
|
|
@ -40,7 +40,7 @@ export default define({
|
|||
z-index 1
|
||||
margin 0
|
||||
font-size 0.8em
|
||||
color #999
|
||||
color isDark ? #a1a6ab : #999
|
||||
|
||||
&[data-mobile]
|
||||
border none
|
||||
|
|
@ -55,4 +55,10 @@ export default define({
|
|||
> p
|
||||
color #777d71
|
||||
|
||||
.mkw-donation[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-donation:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="mkw-nav">
|
||||
<mk-widget-container>
|
||||
<div :class="$style.body">
|
||||
<div class="mkw-nav--body">
|
||||
<mk-nav/>
|
||||
</div>
|
||||
</mk-widget-container>
|
||||
|
|
@ -15,17 +15,24 @@ export default define({
|
|||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.body
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mkw-nav--body
|
||||
padding 16px
|
||||
font-size 12px
|
||||
color #aaa
|
||||
background #fff
|
||||
color isDark ? #9aa4b3 : #aaa
|
||||
background isDark ? #282c37 : #fff
|
||||
|
||||
a
|
||||
color #999
|
||||
color isDark ? #9aa4b3 : #999
|
||||
|
||||
i
|
||||
color #ccc
|
||||
color isDark ? #9aa4b3 : #ccc
|
||||
|
||||
.mkw-nav[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-nav:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,12 @@
|
|||
<template slot="header">%fa:rss-square%RSS</template>
|
||||
<button slot="func" title="設定" @click="setting">%fa:cog%</button>
|
||||
|
||||
<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
<div :class="$style.feed" v-else>
|
||||
<div class="mkw-rss--body">
|
||||
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
<div class="feed" v-else>
|
||||
<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</mk-widget-container>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -56,21 +58,23 @@ export default define({
|
|||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.feed
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mkw-rss--body
|
||||
.feed
|
||||
padding 12px 16px
|
||||
font-size 0.9em
|
||||
|
||||
> a
|
||||
display block
|
||||
padding 4px 0
|
||||
color #666
|
||||
border-bottom dashed 1px #eee
|
||||
color isDark ? #9aa4b3 : #666
|
||||
border-bottom dashed 1px isDark ? #1c2023 : #eee
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
|
||||
.fetching
|
||||
.fetching
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
|
|
@ -79,7 +83,7 @@ export default define({
|
|||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
&[data-mobile]
|
||||
&[data-mobile]
|
||||
.feed
|
||||
padding 0
|
||||
font-size 1em
|
||||
|
|
@ -90,4 +94,10 @@ export default define({
|
|||
&:nth-child(even)
|
||||
background rgba(0, 0, 0, 0.05)
|
||||
|
||||
.mkw-rss[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-rss:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.cpu-memory
|
||||
root(isDark)
|
||||
> svg
|
||||
display block
|
||||
padding 10px
|
||||
|
|
@ -115,7 +115,7 @@ export default Vue.extend({
|
|||
|
||||
> text
|
||||
font-size 5px
|
||||
fill rgba(0, 0, 0, 0.55)
|
||||
fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
|
||||
|
||||
> tspan
|
||||
opacity 0.5
|
||||
|
|
@ -124,4 +124,11 @@ export default Vue.extend({
|
|||
content ""
|
||||
display block
|
||||
clear both
|
||||
|
||||
.cpu-memory[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.cpu-memory:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -65,20 +65,6 @@ button.ui
|
|||
background $theme-color
|
||||
border-color $theme-color
|
||||
|
||||
html[data-darkmode] button.ui
|
||||
html[data-darkmode] .button.ui
|
||||
color #fff
|
||||
background linear-gradient(to bottom, #313543 0%, #282c37 100%)
|
||||
border-color #1c2023
|
||||
|
||||
&:hover
|
||||
background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
|
||||
border-color #151a1d
|
||||
|
||||
&:active
|
||||
background #22262f
|
||||
border-color #151a1d
|
||||
|
||||
input:not([type]).ui
|
||||
input[type='text'].ui
|
||||
input[type='password'].ui
|
||||
|
|
@ -137,3 +123,59 @@ textarea.ui
|
|||
font-size 90%
|
||||
font-weight bold
|
||||
color rgba(#373a3c, 0.9)
|
||||
|
||||
html[data-darkmode]
|
||||
button.ui
|
||||
.button.ui
|
||||
color #fff
|
||||
background linear-gradient(to bottom, #313543 0%, #282c37 100%)
|
||||
border-color #1c2023
|
||||
|
||||
&:hover
|
||||
background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
|
||||
border-color #151a1d
|
||||
|
||||
&:active
|
||||
background #22262f
|
||||
border-color #151a1d
|
||||
|
||||
&.primary
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
|
||||
input:not([type]).ui
|
||||
input[type='text'].ui
|
||||
input[type='password'].ui
|
||||
input[type='email'].ui
|
||||
input[type='date'].ui
|
||||
input[type='number'].ui
|
||||
textarea.ui
|
||||
display block
|
||||
padding 10px
|
||||
width 100%
|
||||
height 40px
|
||||
font-family sans-serif
|
||||
font-size 16px
|
||||
color #dee4e8
|
||||
background #191b22
|
||||
border solid 1px #495156
|
||||
border-radius 4px
|
||||
|
||||
&:hover
|
||||
border-color #b0b0b0
|
||||
|
||||
&:focus
|
||||
border-color $theme-color
|
||||
|
||||
.ui.from.group
|
||||
> p:first-child
|
||||
color #c0c7cc
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.menu
|
||||
root(isDark)
|
||||
$width = 240px
|
||||
$item-height = 38px
|
||||
$padding = 10px
|
||||
|
|
@ -46,7 +46,7 @@ export default Vue.extend({
|
|||
&.divider
|
||||
margin-top $padding
|
||||
padding-top $padding
|
||||
border-top solid 1px #eee
|
||||
border-top solid 1px isDark ? #1c2023 : #eee
|
||||
|
||||
&.nest
|
||||
> p
|
||||
|
|
@ -75,7 +75,7 @@ export default Vue.extend({
|
|||
margin 0
|
||||
padding 0 32px 0 38px
|
||||
line-height $item-height
|
||||
color #868C8C
|
||||
color isDark ? #c8cece : #868C8C
|
||||
text-decoration none
|
||||
cursor pointer
|
||||
|
||||
|
|
@ -104,11 +104,17 @@ export default Vue.extend({
|
|||
left $width
|
||||
margin-top -($padding)
|
||||
width $width
|
||||
background #fff
|
||||
background isDark ? #282c37 :#fff
|
||||
border-radius 0 4px 4px 4px
|
||||
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
|
||||
transition visibility 0s linear 0.2s
|
||||
|
||||
.menu[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.menu:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="stylus" module>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.context-menu
|
||||
root(isDark)
|
||||
$width = 240px
|
||||
$item-height = 38px
|
||||
$padding = 10px
|
||||
|
|
@ -66,9 +66,15 @@ export default Vue.extend({
|
|||
z-index 4096
|
||||
width $width
|
||||
font-size 0.8em
|
||||
background #fff
|
||||
background isDark ? #282c37 : #fff
|
||||
border-radius 0 4px 4px 4px
|
||||
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
|
||||
opacity 0
|
||||
|
||||
.context-menu[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.context-menu:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.root.file
|
||||
root(isDark)
|
||||
padding 8px 0 0 0
|
||||
height 180px
|
||||
border-radius 4px
|
||||
|
|
@ -308,10 +308,16 @@ export default Vue.extend({
|
|||
font-size 0.8em
|
||||
text-align center
|
||||
word-break break-all
|
||||
color #444
|
||||
color isDark ? #fff : #444
|
||||
overflow hidden
|
||||
|
||||
> .ext
|
||||
opacity 0.5
|
||||
|
||||
.root.file[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.root.file:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -577,7 +577,7 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.mk-drive
|
||||
root(isDark)
|
||||
|
||||
> nav
|
||||
display block
|
||||
|
|
@ -585,9 +585,8 @@ export default Vue.extend({
|
|||
width 100%
|
||||
overflow auto
|
||||
font-size 0.9em
|
||||
color #555
|
||||
background #fff
|
||||
//border-bottom 1px solid #dfdfdf
|
||||
color isDark ? #d2d9dc : #555
|
||||
background isDark ? #282c37 : #fff
|
||||
box-shadow 0 1px 0 rgba(0, 0, 0, 0.05)
|
||||
|
||||
&, *
|
||||
|
|
@ -665,6 +664,7 @@ export default Vue.extend({
|
|||
padding 8px
|
||||
height calc(100% - 38px)
|
||||
overflow auto
|
||||
background isDark ? #191b22 : #fff
|
||||
|
||||
&, *
|
||||
user-select none
|
||||
|
|
@ -770,4 +770,10 @@ export default Vue.extend({
|
|||
> input
|
||||
display none
|
||||
|
||||
.mk-drive[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-drive:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.mk-follow-button
|
||||
root(isDark)
|
||||
display block
|
||||
cursor pointer
|
||||
padding 0
|
||||
|
|
@ -121,17 +121,17 @@ export default Vue.extend({
|
|||
border-radius 8px
|
||||
|
||||
&.follow
|
||||
color #888
|
||||
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
|
||||
border solid 1px #e2e2e2
|
||||
color isDark ? #fff : #888
|
||||
background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
|
||||
border solid 1px isDark ? #1c2023 : #e2e2e2
|
||||
|
||||
&:hover
|
||||
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
|
||||
border-color #dcdcdc
|
||||
background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
|
||||
border-color isDark ? #151a1d : #dcdcdc
|
||||
|
||||
&:active
|
||||
background #ececec
|
||||
border-color #dcdcdc
|
||||
background isDark ? #22262f : #ececec
|
||||
border-color isDark ? #151a1d : #dcdcdc
|
||||
|
||||
&.unfollow
|
||||
color $theme-color-foreground
|
||||
|
|
@ -161,4 +161,10 @@ export default Vue.extend({
|
|||
i
|
||||
margin-right 8px
|
||||
|
||||
.mk-follow-button[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-follow-button:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,19 +33,14 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-note-preview
|
||||
root(isDark)
|
||||
font-size 0.9em
|
||||
background #fff
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
clear both
|
||||
|
||||
&:hover
|
||||
> .main > footer > button
|
||||
color #888
|
||||
|
||||
> .avatar-anchor
|
||||
display block
|
||||
float left
|
||||
|
|
@ -70,7 +65,7 @@ export default Vue.extend({
|
|||
> .name
|
||||
margin 0 .5em 0 0
|
||||
padding 0
|
||||
color #607073
|
||||
color isDark ? #fff : #607073
|
||||
font-size 1em
|
||||
font-weight bold
|
||||
text-decoration none
|
||||
|
|
@ -81,11 +76,11 @@ export default Vue.extend({
|
|||
|
||||
> .username
|
||||
margin 0 .5em 0 0
|
||||
color #d1d8da
|
||||
color isDark ? #606984 : #d1d8da
|
||||
|
||||
> .time
|
||||
margin-left auto
|
||||
color #b2b8bb
|
||||
color isDark ? #606984 : #b2b8bb
|
||||
|
||||
> .body
|
||||
|
||||
|
|
@ -94,6 +89,12 @@ export default Vue.extend({
|
|||
margin 0
|
||||
padding 0
|
||||
font-size 1.1em
|
||||
color #717171
|
||||
color isDark ? #959ba7 : #717171
|
||||
|
||||
.mk-note-preview[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-note-preview:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.sub
|
||||
root(isDark)
|
||||
margin 0
|
||||
padding 16px
|
||||
font-size 0.9em
|
||||
|
|
@ -43,10 +43,6 @@ export default Vue.extend({
|
|||
display block
|
||||
clear both
|
||||
|
||||
&:hover
|
||||
> .main > footer > button
|
||||
color #888
|
||||
|
||||
> .avatar-anchor
|
||||
display block
|
||||
float left
|
||||
|
|
@ -75,7 +71,7 @@ export default Vue.extend({
|
|||
margin 0 .5em 0 0
|
||||
padding 0
|
||||
overflow hidden
|
||||
color #607073
|
||||
color isDark ? #fff : #607073
|
||||
font-size 1em
|
||||
font-weight bold
|
||||
text-decoration none
|
||||
|
|
@ -86,11 +82,11 @@ export default Vue.extend({
|
|||
|
||||
> .username
|
||||
margin 0 .5em 0 0
|
||||
color #d1d8da
|
||||
color isDark ? #606984 : #d1d8da
|
||||
|
||||
> .created-at
|
||||
margin-left auto
|
||||
color #b2b8bb
|
||||
color isDark ? #606984 : #b2b8bb
|
||||
|
||||
> .body
|
||||
max-height 128px
|
||||
|
|
@ -101,10 +97,16 @@ export default Vue.extend({
|
|||
margin 0
|
||||
padding 0
|
||||
font-size 1.1em
|
||||
color #717171
|
||||
color isDark ? #959ba7 : #717171
|
||||
|
||||
pre
|
||||
max-height 120px
|
||||
font-size 80%
|
||||
|
||||
.sub[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.sub:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -297,6 +297,7 @@ root(isDark)
|
|||
background isDark ? #282C37 : #fff
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
|
||||
|
||||
&[data-round]
|
||||
&:first-child
|
||||
border-top-left-radius 6px
|
||||
border-top-right-radius 6px
|
||||
|
|
@ -324,7 +325,7 @@ root(isDark)
|
|||
|
||||
> .renote
|
||||
color #9dbb00
|
||||
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||
|
||||
> p
|
||||
margin 0
|
||||
|
|
@ -434,7 +435,7 @@ root(isDark)
|
|||
|
||||
> .mobile
|
||||
margin-right 8px
|
||||
color #ccc
|
||||
color isDark ? #606984 : #ccc
|
||||
|
||||
> .app
|
||||
margin-right 8px
|
||||
|
|
|
|||
|
|
@ -185,14 +185,14 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-notifications
|
||||
root(isDark)
|
||||
> .notifications
|
||||
> .notification
|
||||
margin 0
|
||||
padding 16px
|
||||
overflow-wrap break-word
|
||||
font-size 0.9em
|
||||
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
||||
border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
|
|
@ -203,7 +203,7 @@ export default Vue.extend({
|
|||
top 16px
|
||||
right 12px
|
||||
vertical-align top
|
||||
color rgba(0, 0, 0, 0.6)
|
||||
color isDark ? #606984 : rgba(0, 0, 0, 0.6)
|
||||
font-size small
|
||||
|
||||
&:after
|
||||
|
|
@ -238,10 +238,10 @@ export default Vue.extend({
|
|||
margin-right 4px
|
||||
|
||||
.note-preview
|
||||
color rgba(0, 0, 0, 0.7)
|
||||
color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
|
||||
|
||||
.note-ref
|
||||
color rgba(0, 0, 0, 0.7)
|
||||
color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
|
||||
|
||||
[data-fa]
|
||||
font-size 1em
|
||||
|
|
@ -268,9 +268,9 @@ export default Vue.extend({
|
|||
line-height 32px
|
||||
text-align center
|
||||
font-size 0.8em
|
||||
color #aaa
|
||||
background #fdfdfd
|
||||
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
||||
color isDark ? #666b79 : #aaa
|
||||
background isDark ? #242731 : #fdfdfd
|
||||
border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
|
||||
|
||||
span
|
||||
margin 0 16px
|
||||
|
|
@ -312,4 +312,10 @@ export default Vue.extend({
|
|||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
.mk-notifications[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-notifications:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -341,7 +341,7 @@ root(isDark)
|
|||
> .medias
|
||||
margin 0
|
||||
padding 0
|
||||
background lighten($theme-color, 98%)
|
||||
background isDark ? #181b23 : lighten($theme-color, 98%)
|
||||
border solid 1px rgba($theme-color, 0.1)
|
||||
border-top none
|
||||
border-radius 0 0 4px 4px
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<template v-if="!quote">
|
||||
<footer>
|
||||
<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
|
||||
<button class="cancel" @click="cancel">%i18n:@cancel%</button>
|
||||
<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!@reposting%' : '%i18n:!@renote%' }}</button>
|
||||
<button class="ui cancel" @click="cancel">%i18n:@cancel%</button>
|
||||
<button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!@reposting%' : '%i18n:!@renote%' }}</button>
|
||||
</footer>
|
||||
</template>
|
||||
<template v-if="quote">
|
||||
|
|
@ -59,14 +59,14 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.mk-renote-form
|
||||
root(isDark)
|
||||
|
||||
> .mk-note-preview
|
||||
margin 16px 22px
|
||||
|
||||
> footer
|
||||
height 72px
|
||||
background lighten($theme-color, 95%)
|
||||
background isDark ? #313543 : lighten($theme-color, 95%)
|
||||
|
||||
> .quote
|
||||
position absolute
|
||||
|
|
@ -78,54 +78,19 @@ export default Vue.extend({
|
|||
display block
|
||||
position absolute
|
||||
bottom 16px
|
||||
cursor pointer
|
||||
padding 0
|
||||
margin 0
|
||||
width 120px
|
||||
height 40px
|
||||
font-size 1em
|
||||
outline none
|
||||
border-radius 4px
|
||||
|
||||
&:focus
|
||||
&:after
|
||||
content ""
|
||||
pointer-events none
|
||||
position absolute
|
||||
top -5px
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border-radius 8px
|
||||
|
||||
> .cancel
|
||||
&.cancel
|
||||
right 148px
|
||||
color #888
|
||||
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
|
||||
border solid 1px #e2e2e2
|
||||
|
||||
&:hover
|
||||
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
|
||||
border-color #dcdcdc
|
||||
|
||||
&:active
|
||||
background #ececec
|
||||
border-color #dcdcdc
|
||||
|
||||
> .ok
|
||||
&.ok
|
||||
right 16px
|
||||
font-weight bold
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
|
||||
&:hover
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
.mk-renote-form[data-darkmode]
|
||||
root(true)
|
||||
|
||||
&:active
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
.mk-renote-form:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,131 +0,0 @@
|
|||
<template>
|
||||
<div class="mk-renote-form">
|
||||
<mk-note-preview :note="note"/>
|
||||
<template v-if="!quote">
|
||||
<footer>
|
||||
<a class="quote" v-if="!quote" @click="onQuote">%i18n:desktop.tags.mk-renote-form.quote%</a>
|
||||
<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-renote-form.cancel%</button>
|
||||
<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:!desktop.tags.mk-renote-form.reposting%' : '%i18n:!desktop.tags.mk-renote-form.renote%' }}</button>
|
||||
</footer>
|
||||
</template>
|
||||
<template v-if="quote">
|
||||
<mk-post-form ref="form" :renote="note" @posted="onChildFormPosted"/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['note'],
|
||||
data() {
|
||||
return {
|
||||
wait: false,
|
||||
quote: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
ok() {
|
||||
this.wait = true;
|
||||
(this as any).api('notes/create', {
|
||||
renoteId: this.note.id
|
||||
}).then(data => {
|
||||
this.$emit('posted');
|
||||
(this as any).apis.notify('%i18n:!desktop.tags.mk-renote-form.success%');
|
||||
}).catch(err => {
|
||||
(this as any).apis.notify('%i18n:!desktop.tags.mk-renote-form.failure%');
|
||||
}).then(() => {
|
||||
this.wait = false;
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('canceled');
|
||||
},
|
||||
onQuote() {
|
||||
this.quote = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
(this.$refs.form as any).focus();
|
||||
});
|
||||
},
|
||||
onChildFormPosted() {
|
||||
this.$emit('posted');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.mk-renote-form
|
||||
|
||||
> .mk-note-preview
|
||||
margin 16px 22px
|
||||
|
||||
> footer
|
||||
height 72px
|
||||
background lighten($theme-color, 95%)
|
||||
|
||||
> .quote
|
||||
position absolute
|
||||
bottom 16px
|
||||
left 28px
|
||||
line-height 40px
|
||||
|
||||
button
|
||||
display block
|
||||
position absolute
|
||||
bottom 16px
|
||||
cursor pointer
|
||||
padding 0
|
||||
margin 0
|
||||
width 120px
|
||||
height 40px
|
||||
font-size 1em
|
||||
outline none
|
||||
border-radius 4px
|
||||
|
||||
&:focus
|
||||
&:after
|
||||
content ""
|
||||
pointer-events none
|
||||
position absolute
|
||||
top -5px
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border-radius 8px
|
||||
|
||||
> .cancel
|
||||
right 148px
|
||||
color #888
|
||||
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
|
||||
border solid 1px #e2e2e2
|
||||
|
||||
&:hover
|
||||
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
|
||||
border-color #dcdcdc
|
||||
|
||||
&:active
|
||||
background #ececec
|
||||
border-color #dcdcdc
|
||||
|
||||
> .ok
|
||||
right 16px
|
||||
font-weight bold
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
|
||||
&:hover
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
|
||||
&:active
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
|
||||
</style>
|
||||
|
|
@ -29,8 +29,6 @@ export default Vue.extend({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
.root.api
|
||||
color #4a535a
|
||||
|
||||
code
|
||||
display inline-block
|
||||
padding 4px 6px
|
||||
|
|
|
|||
|
|
@ -434,8 +434,8 @@ root(isDark)
|
|||
margin 0 0 1em 0
|
||||
padding 0 0 8px 0
|
||||
font-size 1em
|
||||
color #555
|
||||
border-bottom solid 1px #eee
|
||||
color isDark ? #e3e7ea : #555
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
|
||||
> .web
|
||||
> .div
|
||||
|
|
|
|||
|
|
@ -8,23 +8,28 @@
|
|||
<div class="menu" v-if="isOpen">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="`/@${ os.i.username }`">%fa:user%%i18n:@profile%%fa:angle-right%</router-link>
|
||||
<router-link :to="`/@${ os.i.username }`">%fa:user%<span>%i18n:@profile%</span>%fa:angle-right%</router-link>
|
||||
</li>
|
||||
<li @click="drive">
|
||||
<p>%fa:cloud%%i18n:@drive%%fa:angle-right%</p>
|
||||
<p>%fa:cloud%<span>%i18n:@drive%</span>%fa:angle-right%</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/i/customize-home">%fa:wrench%%i18n:@customize%%fa:angle-right%</a>
|
||||
<a href="/i/customize-home">%fa:wrench%<span>%i18n:@customize%</span>%fa:angle-right%</a>
|
||||
</li>
|
||||
<li @click="settings">
|
||||
<p>%fa:cog%%i18n:@settings%%fa:angle-right%</p>
|
||||
<p>%fa:cog%<span>%i18n:@settings%</span>%fa:angle-right%</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li @click="signout">
|
||||
<p>%fa:power-off%%i18n:@signout%%fa:angle-right%</p>
|
||||
<p>%fa:power-off%<span>%i18n:@signout%</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li @click="dark">
|
||||
<p><span>%i18n:@dark%</span><template v-if="_darkmode_">%fa:moon%</template><template v-else>%fa:R moon%</template></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -78,6 +83,12 @@ export default Vue.extend({
|
|||
},
|
||||
signout() {
|
||||
(this as any).os.signout();
|
||||
},
|
||||
dark() {
|
||||
(this as any).api('i/update_client_setting', {
|
||||
name: 'dark',
|
||||
value: !(this as any)._darkmode_
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -86,7 +97,7 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.account
|
||||
root(isDark)
|
||||
> .header
|
||||
display block
|
||||
margin 0
|
||||
|
|
@ -101,13 +112,13 @@ export default Vue.extend({
|
|||
|
||||
&:hover
|
||||
&[data-active='true']
|
||||
color darken(#9eaba8, 20%)
|
||||
color isDark ? #fff : darken(#9eaba8, 20%)
|
||||
|
||||
> .avatar
|
||||
filter saturate(150%)
|
||||
|
||||
&:active
|
||||
color darken(#9eaba8, 30%)
|
||||
color isDark ? #fff : darken(#9eaba8, 30%)
|
||||
|
||||
> .username
|
||||
display block
|
||||
|
|
@ -134,13 +145,14 @@ export default Vue.extend({
|
|||
transition filter 100ms ease
|
||||
|
||||
> .menu
|
||||
$bgcolor = isDark ? #282c37 : #fff
|
||||
display block
|
||||
position absolute
|
||||
top 56px
|
||||
right -2px
|
||||
width 230px
|
||||
font-size 0.8em
|
||||
background #fff
|
||||
background $bgcolor
|
||||
border-radius 4px
|
||||
box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
|
||||
|
||||
|
|
@ -165,7 +177,7 @@ export default Vue.extend({
|
|||
right 12px
|
||||
border-top solid 14px transparent
|
||||
border-right solid 14px transparent
|
||||
border-bottom solid 14px #fff
|
||||
border-bottom solid 14px $bgcolor
|
||||
border-left solid 14px transparent
|
||||
|
||||
ul
|
||||
|
|
@ -176,7 +188,7 @@ export default Vue.extend({
|
|||
|
||||
& + ul
|
||||
padding-top 10px
|
||||
border-top solid 1px #eee
|
||||
border-top solid 1px isDark ? #1c2023 : #eee
|
||||
|
||||
> li
|
||||
display block
|
||||
|
|
@ -190,16 +202,20 @@ export default Vue.extend({
|
|||
padding 0 28px
|
||||
margin 0
|
||||
line-height 40px
|
||||
color #868C8C
|
||||
color isDark ? #c8cece : #868C8C
|
||||
cursor pointer
|
||||
|
||||
*
|
||||
pointer-events none
|
||||
|
||||
> [data-fa]:first-of-type
|
||||
margin-right 6px
|
||||
> span:first-child
|
||||
padding-left 16px
|
||||
|
||||
> [data-fa]:last-of-type
|
||||
> [data-fa]:first-child
|
||||
margin-right 6px
|
||||
width 16px
|
||||
|
||||
> [data-fa]:last-child
|
||||
display block
|
||||
position absolute
|
||||
top 0
|
||||
|
|
@ -222,4 +238,10 @@ export default Vue.extend({
|
|||
transform-origin: center -16px;
|
||||
}
|
||||
|
||||
.account[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.account:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
.notifications
|
||||
root(isDark)
|
||||
|
||||
> button
|
||||
display block
|
||||
|
|
@ -101,10 +101,10 @@ export default Vue.extend({
|
|||
|
||||
&:hover
|
||||
&[data-active='true']
|
||||
color darken(#9eaba8, 20%)
|
||||
color isDark ? #fff : darken(#9eaba8, 20%)
|
||||
|
||||
&:active
|
||||
color darken(#9eaba8, 30%)
|
||||
color isDark ? #fff : darken(#9eaba8, 30%)
|
||||
|
||||
> [data-fa].bell
|
||||
font-size 1.2em
|
||||
|
|
@ -117,12 +117,13 @@ export default Vue.extend({
|
|||
color $theme-color
|
||||
|
||||
> .pop
|
||||
$bgcolor = isDark ? #282c37 : #fff
|
||||
display block
|
||||
position absolute
|
||||
top 56px
|
||||
right -72px
|
||||
width 300px
|
||||
background #fff
|
||||
background $bgcolor
|
||||
border-radius 4px
|
||||
box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
|
||||
|
||||
|
|
@ -147,7 +148,7 @@ export default Vue.extend({
|
|||
right 74px
|
||||
border-top solid 14px transparent
|
||||
border-right solid 14px transparent
|
||||
border-bottom solid 14px #fff
|
||||
border-bottom solid 14px $bgcolor
|
||||
border-left solid 14px transparent
|
||||
|
||||
> .mk-notifications
|
||||
|
|
@ -155,4 +156,10 @@ export default Vue.extend({
|
|||
font-size 1rem
|
||||
overflow auto
|
||||
|
||||
.notifications[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.notifications:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<div class="mkw-messaging">
|
||||
<p class="title" v-if="props.design == 0">%fa:comments%%i18n:@title%</p>
|
||||
<mk-widget-container :show-header="props.design == 0">
|
||||
<template slot="header">%fa:comments%%i18n:@title%</template>
|
||||
|
||||
<mk-messaging ref="index" compact @navigate="navigate"/>
|
||||
</mk-widget-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -34,24 +37,6 @@ export default define({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
.mkw-messaging
|
||||
overflow hidden
|
||||
background #fff
|
||||
border solid 1px rgba(0, 0, 0, 0.075)
|
||||
border-radius 6px
|
||||
|
||||
> .title
|
||||
z-index 2
|
||||
margin 0
|
||||
padding 0 16px
|
||||
line-height 42px
|
||||
font-size 0.9em
|
||||
font-weight bold
|
||||
color #888
|
||||
box-shadow 0 1px rgba(0, 0, 0, 0.07)
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
> .mk-messaging
|
||||
max-height 250px
|
||||
overflow auto
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
<template>
|
||||
<div class="mkw-trends">
|
||||
<template v-if="!props.compact">
|
||||
<p class="title">%fa:fire%%i18n:@title%</p>
|
||||
<button @click="fetch" title="%i18n:@refresh%">%fa:sync%</button>
|
||||
</template>
|
||||
<mk-widget-container :show-header="!props.compact">
|
||||
<template slot="header">%fa:fire%%i18n:@title%</template>
|
||||
<button slot="func" title="%i18n:@refresh%" @click="fetch">%fa:sync%</button>
|
||||
|
||||
<div class="mkw-trends--body">
|
||||
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
<div class="note" v-else-if="note != null">
|
||||
<p class="text"><router-link :to="note | notePage">{{ note.text }}</router-link></p>
|
||||
<p class="author">―<router-link :to="note.user | userPage">@{{ note.user | acct }}</router-link></p>
|
||||
</div>
|
||||
<p class="empty" v-else>%i18n:@nothing%</p>
|
||||
</div>
|
||||
</mk-widget-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -63,40 +66,8 @@ export default define({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mkw-trends
|
||||
background #fff
|
||||
border solid 1px rgba(0, 0, 0, 0.075)
|
||||
border-radius 6px
|
||||
|
||||
> .title
|
||||
margin 0
|
||||
padding 0 16px
|
||||
line-height 42px
|
||||
font-size 0.9em
|
||||
font-weight bold
|
||||
color #888
|
||||
border-bottom solid 1px #eee
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
> button
|
||||
position absolute
|
||||
z-index 2
|
||||
top 0
|
||||
right 0
|
||||
padding 0
|
||||
width 42px
|
||||
font-size 0.9em
|
||||
line-height 42px
|
||||
color #ccc
|
||||
|
||||
&:hover
|
||||
color #aaa
|
||||
|
||||
&:active
|
||||
color #999
|
||||
|
||||
root(isDark)
|
||||
.mkw-trends--body
|
||||
> .note
|
||||
padding 16px
|
||||
font-size 12px
|
||||
|
|
@ -126,4 +97,10 @@ export default define({
|
|||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
.mkw-trends[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-trends:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<template slot="header">%fa:users%%i18n:@title%</template>
|
||||
<button slot="func" title="%i18n:@refresh%" @click="refresh">%fa:sync%</button>
|
||||
|
||||
<div class="mkw-users--body" :data-darkmode="_darkmode_">
|
||||
<div class="mkw-users--body">
|
||||
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
<template v-else-if="users.length != 0">
|
||||
<div class="user" v-for="_user in users">
|
||||
|
|
@ -75,6 +75,7 @@ export default define({
|
|||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
.mkw-users--body
|
||||
> .user
|
||||
padding 16px
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
|
|
@ -137,10 +138,10 @@ root(isDark)
|
|||
> [data-fa]
|
||||
margin-right 4px
|
||||
|
||||
.mkw-users--body[data-darkmode]
|
||||
.mkw-users[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-users--body:not([data-darkmode])
|
||||
.mkw-users:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue