sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[wip] darkmode

Browse Source
This commit is contained in:
syuilo
2018-04-20 03:41:24 +09:00
parent d4a2c6cef4
commit f2fea7f3cd
11 changed files with 130 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/client/app/desktop/views/components/notes.note.vue
View File

@@ -291,11 +291,11 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.note
root(isDark)
margin 0
padding 0
background #fff
border-bottom solid 1px #eaeaea
background isDark ? #282C37 : #fff
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
&:first-child
border-top-left-radius 6px
@@ -374,7 +374,7 @@ export default Vue.extend({
&:hover
> .main > footer > button
color #888
color isDark ? #707b97 : #888
> .avatar-anchor
display block
@@ -407,7 +407,7 @@ export default Vue.extend({
margin 0 .5em 0 0
padding 0
overflow hidden
color #627079
color isDark ? #fff : #627079
font-size 1em
font-weight bold
text-decoration none
@@ -426,7 +426,7 @@ export default Vue.extend({
> .username
margin 0 .5em 0 0
color #ccc
color isDark ? #606984 : #ccc
> .info
margin-left auto
@@ -443,7 +443,7 @@ export default Vue.extend({
border-right solid 1px #eaeaea
> .created-at
color #c0c0c0
color isDark ? #606984 : #c0c0c0
> .body
@@ -454,7 +454,7 @@ export default Vue.extend({
padding 0
overflow-wrap break-word
font-size 1.1em
color #717171
color isDark ? #fff : #717171
>>> .title
display block
@@ -462,7 +462,7 @@ export default Vue.extend({
padding 4px
font-size 90%
text-align center
background #eef1f3
background isDark ? #2f3944 : #eef1f3
border-radius 4px
>>> .code
@@ -471,12 +471,12 @@ export default Vue.extend({
>>> .quote
margin 8px
padding 6px 12px
color #aaa
border-left solid 3px #eee
color isDark ? #6f808e : #aaa
border-left solid 3px isDark ? #637182 : #eee
> .reply
margin-right 8px
color #717171
color isDark ? #99abbf : #717171
> .rp
margin-left 4px
@@ -547,13 +547,13 @@ export default Vue.extend({
padding 0 8px
line-height 32px
font-size 1em
color #ddd
color isDark ? #606984 : #ddd
background transparent
border none
cursor pointer
&:hover
color #666
color isDark ? #9198af : #666
> .count
display inline
@@ -572,6 +572,12 @@ export default Vue.extend({
padding-top 4px
background rgba(0, 0, 0, 0.0125)
.note[data-darkmode]
root(true)
.note:not([data-darkmode])
root(false)
</style>
<style lang="stylus" module>

16
src/client/app/desktop/views/components/notes.vue
View File

@@ -50,17 +50,16 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-notes
root(isDark)
> .date
display block
margin 0
line-height 32px
font-size 14px
text-align center
color #aaa
background #fdfdfd
border-bottom solid 1px #eaeaea
color isDark ? #666b79 : #aaa
background isDark ? #242731 : #fdfdfd
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
span
margin 0 16px
@@ -86,4 +85,11 @@ export default Vue.extend({
&:active
background #eee
.mk-notes[data-darkmode]
root(true)
.mk-notes:not([data-darkmode])
root(false)
</style>

16
src/client/app/desktop/views/components/settings.vue
View File

@@ -37,14 +37,17 @@
<section class="web" v-show="page == 'web'">
<h1>デザインと表示</h1>
<div class="div">
<button class="ui button" @click="customizeHome">ホームをカスタマイズ</button>
<button class="ui button" @click="customizeHome" style="margin-bottom: 16px">ホームをカスタマイズ</button>
</div>
<div class="div">
<mk-switch v-model="os.i.clientSettings.dark" @change="onChangeDark" text="ダークモード"/>
<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
</div>
<mk-switch v-model="os.i.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
<mk-switch v-model="os.i.clientSettings.showReplyTarget" @change="onChangeShowReplyTarget" text="リプライ先を表示する"/>
<mk-switch v-model="os.i.clientSettings.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
<span>位置情報が添付された投稿のマップを自動的に展開します。</span>
</mk-switch>
<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
</section>
<section class="web" v-show="page == 'web'">
@@ -298,6 +301,12 @@ export default Vue.extend({
autoWatch: v
});
},
onChangeDark(v) {
(this as any).api('i/update_client_setting', {
name: 'dark',
value: v
});
},
onChangeShowPostFormOnTopOfTl(v) {
(this as any).api('i/update_client_setting', {
name: 'showPostFormOnTopOfTl',
@@ -431,7 +440,6 @@ export default Vue.extend({
> .web
> .div
border-bottom solid 1px #eee
padding 0 0 16px 0
margin 0 0 16px 0
margin 16px 0
</style>

16
src/client/app/desktop/views/components/timeline.vue
View File

@@ -66,14 +66,16 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-timeline
background #fff
root(isDark)
background isDark ? #282C37 : #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> header
padding 0 8px
z-index 10
background isDark ? #313543 : #fff
border-radius 6px 6px 0 0
box-shadow 0 1px rgba(0, 0, 0, 0.08)
> span
@@ -99,10 +101,16 @@ export default Vue.extend({
background $theme-color
&:not([data-is-active])
color #6f7477
color isDark ? #9aa2a7 : #6f7477
cursor pointer
&:hover
color #525a5f
color isDark ? #d9dcde : #525a5f
.mk-timeline[data-darkmode]
root(true)
.mk-timeline:not([data-darkmode])
root(false)
</style>

4
src/client/app/desktop/views/components/ui.header.vue
View File

@@ -169,10 +169,10 @@ root(isDark)
> .mk-ui-header-search
display none
.header[data-is-darkmode]
.header[data-darkmode]
root(true)
.header
.header:not([data-darkmode])
root(false)
</style>

23
src/client/app/desktop/views/components/widget-container.vue
View File

@@ -34,8 +34,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-widget-container
background #fff
root(isDark)
background isDark ? #282C37 : #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
overflow hidden
@@ -45,6 +45,8 @@ export default Vue.extend({
border none !important
> header
background isDark ? #313543 : #fff
> .title
z-index 1
margin 0
@@ -52,7 +54,7 @@ export default Vue.extend({
line-height 42px
font-size 0.9em
font-weight bold
color #888
color isDark ? #e3e5e8 : #888
box-shadow 0 1px rgba(0, 0, 0, 0.07)
> [data-fa]
@@ -70,16 +72,23 @@ export default Vue.extend({
width 42px
font-size 0.9em
line-height 42px
color #ccc
color isDark ? #9baec8 : #ccc
&:hover
color #aaa
color isDark ? #b2c1d5 : #aaa
&:active
color #999
color isDark ? #b2c1d5 : #999
&.withGradient
> .title
background linear-gradient(to bottom, #fff, #ececec)
background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
box-shadow 0 1px rgba(#000, 0.11)
.mk-widget-container[data-darkmode]
root(true)
.mk-widget-container:not([data-darkmode])
root(false)
</style>

22
src/client/app/desktop/views/components/window.vue
View File

@@ -465,7 +465,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-window
root(isDark)
display block
> .bg
@@ -559,7 +559,7 @@ export default Vue.extend({
> .body
height 100%
overflow hidden
background #fff
background isDark ? #282C37 : #fff
border-radius 6px
box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
@@ -571,12 +571,12 @@ export default Vue.extend({
overflow hidden
white-space nowrap
cursor move
background #fff
background isDark ? #313543 : #fff
border-radius 6px 6px 0 0
box-shadow 0 1px 0 rgba(#000, 0.1)
&.withGradient
background linear-gradient(to bottom, #fff, #ececec)
background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
box-shadow 0 1px 0 rgba(#000, 0.15)
&, *
@@ -593,7 +593,7 @@ export default Vue.extend({
font-size 1em
line-height $header-height
font-weight normal
color #666
color isDark ? #e3e5e8 : #666
> div:last-child
position absolute
@@ -608,16 +608,16 @@ export default Vue.extend({
padding 0
cursor pointer
font-size 1em
color rgba(#000, 0.4)
color isDark ? #9baec8 : rgba(#000, 0.4)
border none
outline none
background transparent
&:hover
color rgba(#000, 0.6)
color isDark ? #b2c1d5 : rgba(#000, 0.6)
&:active
color darken(#000, 30%)
color isDark ? #b2c1d5 : darken(#000, 30%)
> [data-fa]
padding 0
@@ -632,4 +632,10 @@ export default Vue.extend({
> .main > .body > .content
height calc(100% - 40px)
.mk-window[data-darkmode]
root(true)
.mk-window:not([data-darkmode])
root(false)
</style>