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

Merge pull request #2781 from syuilo/theme

Browse Source 
Theme
This commit is contained in:
syuilo
2018-09-29 00:48:56 +09:00
committed by GitHub
parent d5818214f3 f26e641905
commit 8b68c5da37
191 changed files with 2147 additions and 3369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/client/app/mobile/style.styl
View File

@@ -8,12 +8,4 @@
html
height 100%
background #ececed !important
&[data-darkmode]
background #191B22 !important
body
display flex
flex-direction column
min-height 100%
background var(--bg)

10
src/client/app/mobile/views/components/dialog.vue
View File

@@ -91,7 +91,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-dialog
> .bg
@@ -145,20 +145,20 @@ export default Vue.extend({
margin 0 0.375em
&:hover
color $theme-color
color var(--primary)
&:active
color darken($theme-color, 10%)
color var(--primaryDarken10)
transition color 0s ease
</style>
<style lang="stylus" module>
@import '~const.styl'
.header
margin 0 0 1em 0
color $theme-color
color var(--primary)
// color #43A4EC
font-weight bold

14
src/client/app/mobile/views/components/drive-file-chooser.vue
View File

@@ -46,7 +46,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.cdxzvcfawjxdyxsekbxbfgtplebnoneb
position fixed
z-index 20000
top 0
@@ -59,11 +59,11 @@ root(isDark)
> .body
width 100%
height 100%
background isDark ? #282c37 : #fff
background var(--faceHeader)
> header
border-bottom solid 1px isDark ? #1b1f29 : #eee
color isDark ? #fff : #111
border-bottom solid 1px var(--faceDivider)
color var(--text)
> h1
margin 0
@@ -96,10 +96,4 @@ root(isDark)
overflow scroll
-webkit-overflow-scrolling touch
.cdxzvcfawjxdyxsekbxbfgtplebnoneb[data-darkmode]
root(true)
.cdxzvcfawjxdyxsekbxbfgtplebnoneb:not([data-darkmode])
root(false)
</style>

42
src/client/app/mobile/views/components/drive.file-detail.vue
View File

@@ -134,10 +134,10 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.pyvicwrksnfyhpfgkjwqknuururpaztw
> .preview
padding 8px
background isDark ? #191b22 : #f0f0f0
background var(--bg)
> img
display block
@@ -148,9 +148,10 @@ root(isDark)
> footer
padding 8px 8px 0 8px
font-size 0.8em
color isDark ? #606984 : #888
text-align center
font-size 0.8em
color var(--text)
opacity 0.7
> .separator
display inline
@@ -178,12 +179,12 @@ root(isDark)
> .info
padding 14px
font-size 0.8em
border-top solid 1px isDark ? #1c2023 : #dfdfdf
border-top solid 1px var(--faceDivider)
> div
max-width 500px
margin 0 auto
color isDark ? #9397a2 : #9d9d9d
color var(--text)
> .separator
padding 0 4px
@@ -198,7 +199,7 @@ root(isDark)
> .menu
padding 14px
border-top solid 1px isDark ? #1c2023 : #dfdfdf
border-top solid 1px var(--faceDivider)
> div
max-width 500px
@@ -209,31 +210,26 @@ root(isDark)
width 100%
padding 10px 16px
margin 0 0 12px 0
color isDark ? #dfe3e8 : #333
color var(--primaryForeground)
font-size 0.9em
text-align center
text-decoration none
text-shadow 0 1px 0 isDark ? rgba(0, 0, 0, 0.9) : rgba(255, 255, 255, 0.9)
background-image isDark ? linear-gradient(#292f3c, #1b2025) : linear-gradient(#fafafa, #eaeaea)
border 1px solid isDark ? #121417 : #ddd
border-bottom-color isDark ? #060606 : #cecece
background var(--primary)
border none
border-radius 3px
&:last-child
margin-bottom 0
&:active
background-color #767676
background-image none
border-color #444
box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
background var(--primaryDarken10)
> [data-fa]
margin-right 4px
> .hash
padding 14px
border-top solid 1px isDark ? #1c2023 : #dfdfdf
border-top solid 1px var(--faceDivider)
> div
max-width 500px
@@ -243,7 +239,7 @@ root(isDark)
display block
margin 0
padding 0
color isDark ? #a8b7d0 : #555
color var(--text)
font-size 0.9em
> [data-fa]
@@ -264,7 +260,7 @@ root(isDark)
> .exif
padding 14px
border-top solid 1px isDark ? #1c2023 : #dfdfdf
border-top solid 1px var(--faceDivider)
> div
max-width 500px
@@ -274,7 +270,7 @@ root(isDark)
display block
margin 0
padding 0
color isDark ? #a8b7d0 : #555
color var(--text)
font-size 0.9em
> [data-fa]
@@ -292,10 +288,4 @@ root(isDark)
border-radius 2px
background #f5f5f5
.pyvicwrksnfyhpfgkjwqknuururpaztw[data-darkmode]
root(true)
.pyvicwrksnfyhpfgkjwqknuururpaztw:not([data-darkmode])
root(false)
</style>

21
src/client/app/mobile/views/components/drive.file.vue
View File

@@ -63,9 +63,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
.vupkuhvjnjyqaqhsiogfbywvjxynrgsm
display block
text-decoration none !important
@@ -103,7 +101,7 @@ root(isDark)
padding 0
font-size 0.9em
font-weight bold
color isDark ? #fff : #555
color var(--text)
text-overflow ellipsis
overflow-wrap break-word
@@ -127,21 +125,22 @@ root(isDark)
display block
margin 4px 0 0 0
font-size 0.7em
color var(--text)
> .separator
padding 0 4px
> .type
color #9D9D9D
opacity 0.7
> .mk-file-type-icon
margin-right 4px
> .data-size
color #9D9D9D
opacity 0.7
> .created-at
color #BDBDBD
opacity 0.7
> [data-fa]
margin-right 2px
@@ -150,15 +149,9 @@ root(isDark)
color #bf4633
&[data-is-selected]
background $theme-color
background var(--primary)
&, *
color #fff !important
.vupkuhvjnjyqaqhsiogfbywvjxynrgsm[data-darkmode]
root(true)
.vupkuhvjnjyqaqhsiogfbywvjxynrgsm:not([data-darkmode])
root(false)
</style>

10
src/client/app/mobile/views/components/drive.folder.vue
View File

@@ -24,9 +24,9 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.jvwxssxsytqlqvrpiymarjlzlsxskqsr
display block
color isDark ? #fff : #777
color var(--text)
text-decoration none !important
*
@@ -55,10 +55,4 @@ root(isDark)
> *
height 100%
.jvwxssxsytqlqvrpiymarjlzlsxskqsr[data-darkmode]
root(true)
.jvwxssxsytqlqvrpiymarjlzlsxskqsr:not([data-darkmode])
root(false)
</style>

22
src/client/app/mobile/views/components/drive.vue
View File

@@ -473,8 +473,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
background isDark ? #282c37 : #fff
.kmmwchoexgckptowjmjgfsygeltxfeqs
background var(--face)
> nav
display block
@@ -487,10 +487,10 @@ root(isDark)
overflow auto
white-space nowrap
font-size 0.9em
color rgba(isDark ? #fff : #000, 0.67)
color var(--text)
-webkit-backdrop-filter blur(12px)
backdrop-filter blur(12px)
background-color rgba(isDark ? #313543 : #fff, 0.75)
background-color var(--mobileDriveNavBg)
border-bottom solid 1px rgba(#000, 0.13)
> p
@@ -516,7 +516,7 @@ root(isDark)
opacity 0.5
> .info
border-bottom solid 1px isDark ? #1c2023 : #eee
border-bottom solid 1px var(--faceDivider)
&:empty
display none
@@ -527,15 +527,15 @@ root(isDark)
margin 0 auto
padding 4px 16px
font-size 10px
color isDark ? #606984 : #777
color var(--text)
> .folders
> .folder
border-bottom solid 1px isDark ? #1c2023 : #eee
border-bottom solid 1px var(--faceDivider)
> .files
> .file
border-bottom solid 1px isDark ? #1c2023 : #eee
border-bottom solid 1px var(--faceDivider)
> .more
display block
@@ -591,10 +591,4 @@ root(isDark)
> .file
display none
.kmmwchoexgckptowjmjgfsygeltxfeqs[data-darkmode]
root(true)
.kmmwchoexgckptowjmjgfsygeltxfeqs:not([data-darkmode])
root(false)
</style>

22
src/client/app/mobile/views/components/follow-button.vue
View File

@@ -93,7 +93,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-follow-button
display block
@@ -105,29 +105,29 @@ export default Vue.extend({
line-height 36px
font-size 14px
font-weight bold
color $theme-color
color var(--primary)
background transparent
outline none
border solid 1px $theme-color
border solid 1px var(--primary)
border-radius 36px
&:hover
background rgba($theme-color, 0.1)
background var(--primaryAlpha01)
&:active
background rgba($theme-color, 0.2)
background var(--primaryAlpha02)
&.active
color $theme-color-foreground
background $theme-color
color var(--primaryForeground)
background var(--primary)
&:hover
background lighten($theme-color, 10%)
border-color lighten($theme-color, 10%)
background var(--primaryLighten10)
border-color var(--primaryLighten10)
&:active
background darken($theme-color, 10%)
border-color darken($theme-color, 10%)
background var(--primaryDarken10)
border-color var(--primaryDarken10)
&.wait
cursor wait !important

24
src/client/app/mobile/views/components/mute-button.vue
View File

@@ -41,11 +41,11 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-mute-button
display block
user-select none
user-select none
cursor pointer
padding 0 16px
margin 0
@@ -53,27 +53,27 @@ export default Vue.extend({
line-height 36px
font-size 14px
font-weight bold
color $theme-color
color var(--primary)
background transparent
outline none
border solid 1px $theme-color
border solid 1px var(--primary)
border-radius 36px
&:hover
background rgba($theme-color, 0.1)
background var(--primaryAlpha01)
&:active
background rgba($theme-color, 0.2)
background var(--primaryAlpha02)
&.active
color $theme-color-foreground
background $theme-color
color var(--primaryForeground)
background var(--primary)
&:hover
background lighten($theme-color, 10%)
border-color lighten($theme-color, 10%)
background var(--primaryLighten10)
border-color var(--primaryLighten10)
&:active
background darken($theme-color, 10%)
border-color darken($theme-color, 10%)
background var(--primaryDarken10)
border-color var(--primaryDarken10)
</style>

15
src/client/app/mobile/views/components/note-card.vue
View File

@@ -27,17 +27,18 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.mk-note-card
display inline-block
width 150px
//height 120px
font-size 12px
background isDark ? #282c37 : #fff
background var(--face)
border-radius 4px
box-shadow 0 2px 8px rgba(0, 0, 0, 0.2)
> a
display block
color isDark ? #fff : #2c3940
color var(--noteText)
&:hover
text-decoration none
@@ -75,17 +76,11 @@ root(isDark)
left 0
width 100%
height 20px
background isDark ? linear-gradient(to bottom, rgba(#282c37, 0) 0%, #282c37 100%) : linear-gradient(to bottom, rgba(#fff, 0) 0%, #fff 100%)
background linear-gradient(to bottom, transparent 0%, var(--face) 100%)
> .mk-time
display inline-block
padding 8px
color #aaa
.mk-note-card[data-darkmode]
root(true)
.mk-note-card:not([data-darkmode])
root(false)
</style>

50
src/client/app/mobile/views/components/note-detail.vue
View File

@@ -223,13 +223,11 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
.mk-note-detail
overflow hidden
width 100%
text-align left
background isDark ? #282C37 : #fff
background var(--face)
border-radius 8px
box-shadow 0 0 2px rgba(#000, 0.1)
@@ -248,26 +246,26 @@ root(isDark)
text-align center
color #999
cursor pointer
background isDark ? #21242d : #fafafa
background var(--subNoteBg)
outline none
border none
border-bottom solid 1px isDark ? #1c2023 : #eef0f2
border-bottom solid 1px var(--faceDivider)
border-radius 6px 6px 0 0
box-shadow none
&:hover
background isDark ? #16181d : #f6f6f6
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
&:disabled
color #ccc
&:active
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
> .conversation
> *
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
border-bottom 1px solid var(--faceDivider)
> .renote
color #9dbb00
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
color var(--renoteText)
background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
> p
margin 0
@@ -290,7 +288,7 @@ root(isDark)
padding-top 8px
> .reply-to
border-bottom 1px solid isDark ? #1c2023 : #eef0f2
border-bottom 1px solid var(--faceDivider)
> article
padding 14px 16px 9px 16px
@@ -323,7 +321,7 @@ root(isDark)
> .name
display inline-block
margin .4em 0
color isDark ? #fff : #627079
color var(--noteHeaderName)
font-size 16px
font-weight bold
text-align left
@@ -336,7 +334,7 @@ root(isDark)
display block
text-align left
margin 0
color isDark ? #606984 : #ccc
color var(--noteHeaderAcct)
> .body
padding 8px 0
@@ -347,7 +345,7 @@ root(isDark)
margin 0
padding 0
overflow-wrap break-word
color isDark ? #fff : #717171
color var(--noteText)
> .text
margin-right 8px
@@ -360,7 +358,7 @@ root(isDark)
padding 0
overflow-wrap break-word
font-size 16px
color isDark ? #fff : #717171
color var(--noteText)
@media (min-width 500px)
font-size 24px
@@ -370,7 +368,7 @@ root(isDark)
> *
padding 16px
border dashed 1px #c0dac6
border dashed 1px var(--quoteBorder)
border-radius 8px
> .location
@@ -395,7 +393,7 @@ root(isDark)
> .time
font-size 16px
color isDark ? #606984 : #c0c0c0
color var(--noteHeaderInfo)
> footer
font-size 1.2em
@@ -407,14 +405,14 @@ root(isDark)
border none
box-shadow none
font-size 1em
color isDark ? #606984 : #ddd
color var(--noteActions)
cursor pointer
&:not(:last-child)
margin-right 28px
&:hover
color isDark ? #9198af : #666
color var(--noteActionsHover)
> .count
display inline
@@ -422,16 +420,10 @@ root(isDark)
color #999
&.reacted
color $theme-color
color var(--primary)
> .replies
> *
border-top 1px solid isDark ? #1c2023 : #eef0f2
.mk-note-detail[data-darkmode]
root(true)
.mk-note-detail:not([data-darkmode])
root(false)
border-top 1px solid var(--faceDivider)
</style>

12
src/client/app/mobile/views/components/note-preview.vue
View File

@@ -36,7 +36,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.yohlumlkhizgfkvvscwfcrcggkotpvry
display flex
margin 0
padding 0
@@ -88,7 +88,7 @@ root(isDark)
margin 0
padding 0
overflow-wrap break-word
color isDark ? #fff : #717171
color var(--noteText)
> .text
margin-right 8px
@@ -98,12 +98,6 @@ root(isDark)
cursor default
margin 0
padding 0
color isDark ? #959ba7 : #717171
.yohlumlkhizgfkvvscwfcrcggkotpvry[data-darkmode]
root(true)
.yohlumlkhizgfkvvscwfcrcggkotpvry:not([data-darkmode])
root(false)
color var(--subNoteText)
</style>

14
src/client/app/mobile/views/components/note.sub.vue
View File

@@ -41,11 +41,11 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.zlrxdaqttccpwhpaagdmkawtzklsccam
display flex
padding 16px
font-size 10px
background isDark ? #21242d : #fcfcfc
background var(--subNoteBg)
@media (min-width 350px)
font-size 12px
@@ -95,7 +95,7 @@ root(isDark)
margin 0
padding 0
overflow-wrap break-word
color isDark ? #fff : #717171
color var(--noteText)
> .text
margin-right 8px
@@ -104,16 +104,10 @@ root(isDark)
> .text
margin 0
padding 0
color isDark ? #959ba7 : #717171
color var(--subNoteText)
pre
max-height 120px
font-size 80%
.zlrxdaqttccpwhpaagdmkawtzklsccam[data-darkmode]
root(true)
.zlrxdaqttccpwhpaagdmkawtzklsccam:not([data-darkmode])
root(false)
</style>

42
src/client/app/mobile/views/components/note.vue
View File

@@ -228,11 +228,9 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
.note
font-size 12px
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
border-bottom solid 1px var(--faceDivider)
&:last-of-type
border-bottom none
@@ -256,8 +254,8 @@ root(isDark)
padding 8px 16px
line-height 28px
white-space pre
color #9dbb00
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
color var(--renoteText)
background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
@media (min-width 500px)
padding 16px
@@ -349,7 +347,7 @@ root(isDark)
margin 0
padding 0
overflow-wrap break-word
color isDark ? #fff : #717171
color var(--noteText)
> .text
margin-right 8px
@@ -361,7 +359,7 @@ root(isDark)
margin 0
padding 0
overflow-wrap break-word
color isDark ? #fff : #717171
color var(--noteText)
>>> .title
display block
@@ -369,7 +367,7 @@ root(isDark)
padding 4px
font-size 90%
text-align center
background isDark ? #2f3944 : #eef1f3
background var(--mfmTitleBg)
border-radius 4px
>>> .code
@@ -378,25 +376,25 @@ root(isDark)
>>> .quote
margin 8px
padding 6px 12px
color isDark ? #6f808e : #aaa
border-left solid 3px isDark ? #637182 : #eee
color var(--mfmQuote)
border-left solid 3px var(--mfmQuoteLine)
> .reply
margin-right 8px
color isDark ? #99abbf : #717171
color var(--noteText)
> .rp
margin-left 4px
font-style oblique
color #a0bf46
color var(--renoteText)
[data-is-me]:after
content "you"
padding 0 4px
margin-left 4px
font-size 80%
color $theme-color-foreground
background $theme-color
color var(--primaryForeground)
background var(--primary)
border-radius 4px
.mk-url-preview
@@ -427,7 +425,7 @@ root(isDark)
> *
padding 16px
border dashed 1px isDark ? #4e945e : #c0dac6
border dashed 1px var(--quoteBorder)
border-radius 8px
> .app
@@ -442,14 +440,14 @@ root(isDark)
border none
box-shadow none
font-size 1em
color isDark ? #606984 : #ddd
color var(--noteActions)
cursor pointer
&:not(:last-child)
margin-right 28px
&:hover
color isDark ? #9198af : #666
color var(--noteActionsHover)
> .count
display inline
@@ -457,13 +455,7 @@ root(isDark)
color #999
&.reacted
color $theme-color
.note[data-darkmode]
root(true)
.note:not([data-darkmode])
root(false)
color var(--primary)
</style>

20
src/client/app/mobile/views/components/notes.vue
View File

@@ -217,11 +217,9 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
.mk-notes
overflow hidden
background isDark ? #282C37 : #fff
background var(--face)
border-radius 8px
box-shadow 0 0 2px rgba(#000, 0.1)
@@ -243,9 +241,9 @@ root(isDark)
line-height 32px
text-align center
font-size 0.9em
color isDark ? #666b79 : #aaa
background isDark ? #242731 : #fdfdfd
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
color var(--dateDividerFg)
background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider)
span
margin 0 16px
@@ -276,7 +274,7 @@ root(isDark)
> footer
text-align center
border-top solid 1px isDark ? #1c2023 : #eaeaea
border-top solid 1px var(--faceDivider)
&:empty
display none
@@ -293,10 +291,4 @@ root(isDark)
&:disabled
opacity 0.7
.mk-notes[data-darkmode]
root(true)
.mk-notes:not([data-darkmode])
root(false)
</style>

14
src/client/app/mobile/views/components/notification.vue
View File

@@ -105,7 +105,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.mk-notification
> .notification
padding 16px
font-size 12px
@@ -154,14 +154,14 @@ root(isDark)
> .mk-time
margin-left auto
color isDark ? #606984 : #c0c0c0
color var(--noteHeaderInfo)
font-size 0.9em
> .note-preview
color isDark ? #fff : #717171
color var(--noteText)
> .note-ref
color isDark ? #fff : #717171
color var(--noteText)
[data-fa]
font-size 1em
@@ -182,10 +182,4 @@ root(isDark)
> div > header i
color #888
.mk-notification[data-darkmode]
root(true)
.mk-notification:not([data-darkmode])
root(false)
</style>

18
src/client/app/mobile/views/components/notifications.vue
View File

@@ -104,9 +104,9 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.mk-notifications
margin 0 auto
background isDark ? #282C37 :#fff
background var(--face)
border-radius 8px
box-shadow 0 0 2px rgba(#000, 0.1)
overflow hidden
@@ -126,7 +126,7 @@ root(isDark)
> .notifications
> .mk-notification:not(:last-child)
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
border-bottom solid 1px var(--faceDivider)
> .date
display block
@@ -134,9 +134,9 @@ root(isDark)
line-height 32px
text-align center
font-size 0.8em
color isDark ? #666b79 : #aaa
background isDark ? #242731 : #fdfdfd
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
color var(--dateDividerFg)
background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider)
span
margin 0 16px
@@ -169,10 +169,4 @@ root(isDark)
> [data-fa]
margin-right 4px
.mk-notifications[data-darkmode]
root(true)
.mk-notifications:not([data-darkmode])
root(false)
</style>

30
src/client/app/mobile/views/components/post-form.vue
View File

@@ -336,9 +336,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
.mk-post-form
max-width 500px
width calc(100% - 16px)
margin 8px auto
@@ -354,27 +352,27 @@ root(isDark)
margin 32px auto
> .form
background isDark ? #282C37 : #fff
background var(--face)
border-radius 8px
box-shadow 0 0 2px rgba(#000, 0.1)
> header
z-index 1000
height 50px
box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
box-shadow 0 1px 0 0 var(--mobilePostFormDivider)
> .cancel
padding 0
width 50px
line-height 50px
font-size 24px
color isDark ? #9baec8 : #555
color var(--text)
> div
position absolute
top 0
right 0
color #657786
color var(--text)
> .text-count
line-height 50px
@@ -388,8 +386,8 @@ root(isDark)
padding 0 16px
line-height 34px
vertical-align bottom
color $theme-color-foreground
background $theme-color
color var(--primaryForeground)
background var(--primary)
border-radius 4px
&:disabled
@@ -408,7 +406,7 @@ root(isDark)
> span
margin-right 16px
color isDark ? #fff : #666
color var(--text)
> input
z-index 1
@@ -420,11 +418,11 @@ root(isDark)
margin 0
width 100%
font-size 16px
color isDark ? #fff : #333
background isDark ? #191d23 : #fff
color var(--inputText)
background var(--mobilePostFormTextareaBg)
border none
border-radius 0
box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
box-shadow 0 1px 0 0 var(--mobilePostFormDivider)
&:disabled
opacity 0.5
@@ -493,10 +491,4 @@ root(isDark)
> *
margin-right 8px
.mk-post-form[data-darkmode]
root(true)
.mk-post-form:not([data-darkmode])
root(false)
</style>

2
src/client/app/mobile/views/components/sub-note-content.vue
View File

@@ -37,7 +37,7 @@ export default Vue.extend({
> .rp
margin-left 4px
font-style oblique
color #a0bf46
color var(--renoteText)
mk-poll
font-size 80%

79
src/client/app/mobile/views/components/ui.header.vue
View File

@@ -4,7 +4,6 @@
<mk-special-message/>
<div class="main" ref="main">
<div class="backdrop"></div>
<p ref="welcomeback" v-if="$store.getters.isSignedIn">%i18n:@welcome-back%<b>{{ $store.state.i | userName }}</b>%i18n:@adjective%</p>
<div class="content" ref="mainContainer">
<button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button>
<template v-if="hasUnreadNotification || hasUnreadMessagingMessage || hasGameInvitation">%fa:circle%</template>
@@ -50,53 +49,6 @@ export default Vue.extend({
this.connection.on('reversi_invited', this.onReversiInvited);
this.connection.on('reversi_no_invites', this.onReversiNoInvites);
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);
}
}
},
beforeDestroy() {
@@ -118,9 +70,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
.header
$height = 48px
position fixed
@@ -134,7 +84,7 @@ root(isDark)
> .indicator
height 3px
background $theme-color
background var(--primary)
> .warn
display block
@@ -146,7 +96,7 @@ root(isDark)
color #fff
> .main
color rgba(#fff, 0.9)
color var(--mobileHeaderFg)
> .backdrop
position absolute
@@ -156,20 +106,7 @@ root(isDark)
height $height
-webkit-backdrop-filter blur(12px)
backdrop-filter blur(12px)
//background-color rgba(#1b2023, 0.75)
background-color isDark ? #313543 : #595f6f
> p
display none
position absolute
z-index 1002
top $height
width 100%
line-height $height
margin 0
text-align center
color #fff
opacity 0
background-color var(--mobileHeaderBg)
> .content
z-index 1001
@@ -216,7 +153,7 @@ root(isDark)
left 8px
pointer-events none
font-size 10px
color $theme-color
color var(--primary)
> button:last-child
display block
@@ -231,10 +168,4 @@ root(isDark)
line-height $height
border-left solid 1px rgba(#000, 0.1)
.header[data-darkmode]
root(true)
.header:not([data-darkmode])
root(false)
</style>

28
src/client/app/mobile/views/components/ui.nav.vue
View File

@@ -121,10 +121,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
$color = isDark ? #c9d2e0 : #777
.nav
$color = var(--text)
.backdrop
position fixed
@@ -133,7 +131,7 @@ root(isDark)
z-index 1025
width 100%
height 100%
background isDark ? rgba(#000, 0.7) : rgba(#000, 0.2)
background var(--mobileNavBackdrop)
.body
position fixed
@@ -144,7 +142,7 @@ root(isDark)
height 100%
overflow auto
-webkit-overflow-scrolling touch
background isDark ? #16191f : #fff
background var(--secondary)
.me
display block
@@ -198,11 +196,11 @@ root(isDark)
text-decoration none
&[data-active]
color $theme-color-foreground
background $theme-color
color var(--primaryForeground)
background var(--primary)
> [data-fa]:last-child
color $theme-color-foreground
color var(--primaryForeground)
> [data-fa]:first-child
margin-right 0.5em
@@ -212,7 +210,7 @@ root(isDark)
> [data-fa].circle
margin-left 6px
font-size 10px
color $theme-color
color var(--primary)
> [data-fa]:last-child
position absolute
@@ -226,8 +224,8 @@ root(isDark)
.announcements
> article
background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
color isDark ? #fff : #3f4967
background var(--mobileAnnouncement)
color var(--mobileAnnouncementFg)
padding 16px
margin 8px 0
font-size 12px
@@ -265,10 +263,4 @@ root(isDark)
opacity: 0;
}
.nav[data-darkmode]
root(true)
.nav:not([data-darkmode])
root(false)
</style>

6
src/client/app/mobile/views/components/users-list.vue
View File

@@ -65,7 +65,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.mk-users-list
@@ -87,8 +87,8 @@ export default Vue.extend({
&[data-active]
font-weight bold
color $theme-color
border-color $theme-color
color var(--primary)
border-color var(--primary)
> span
display inline-block

17
src/client/app/mobile/views/components/widget-container.vue
View File

@@ -25,8 +25,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
background isDark ? #21242f : #eee
.mk-widget-container
background var(--face)
border-radius 8px
box-shadow 0 4px 16px rgba(#000, 0.1)
overflow hidden
@@ -35,17 +35,14 @@ root(isDark)
background transparent !important
box-shadow none !important
&.hideHeader
background isDark ? #21242f : #fff
> header
> .title
margin 0
padding 8px 10px
font-size 15px
font-weight normal
color isDark ? #b8c5cc : #465258
background isDark ? #282c37 : #fff
color var(--faceHeaderText)
background var(--faceHeader)
border-radius 8px 8px 0 0
> [data-fa]
@@ -65,10 +62,4 @@ root(isDark)
font-size 15px
color #465258
.mk-widget-container[data-darkmode]
root(true)
.mk-widget-container:not([data-darkmode])
root(false)
</style>

2
src/client/app/mobile/views/pages/favorites.vue
View File

@@ -71,7 +71,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
main
width 100%

32
src/client/app/mobile/views/pages/home.vue
View File

@@ -22,7 +22,7 @@
<button @click="fn">%fa:pencil-alt%</button>
</template>
<main :data-darkmode="$store.state.device.darkmode">
<main>
<div class="nav" v-if="showNav">
<div class="bg" @click="showNav = false"></div>
<div class="pointer"></div>
@@ -154,9 +154,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
main
> .nav
> .pointer
position fixed
@@ -176,7 +174,7 @@ root(isDark)
border-top solid $size transparent
border-left solid $size transparent
border-right solid $size transparent
border-bottom solid $size isDark ? #272f3a : #fff
border-bottom solid $size var(--popupBg)
> .bg
position fixed
@@ -198,7 +196,7 @@ root(isDark)
margin 0 auto
overflow auto
-webkit-overflow-scrolling touch
background isDark ? #272f3a : #fff
background var(--popupBg)
border-radius 8px
box-shadow 0 0 16px rgba(#000, 0.1)
@@ -207,24 +205,24 @@ root(isDark)
> .hr
margin 8px 0
border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
border-top solid 1px var(--faceDivider)
> *:not(.hr)
display block
padding 8px 16px
color isDark ? #cdd0d8 : #666
color var(--text)
&[data-active]
color $theme-color-foreground
background $theme-color
color var(--primaryForeground)
background var(--primary)
&:not([data-active]):hover
background isDark ? #353e4a : #eee
background var(--mobileHomeTlItemHover)
> .badge
margin-left 6px
font-size 10px
color $theme-color
color var(--primary)
> .tl
max-width 680px
@@ -237,17 +235,9 @@ root(isDark)
@media (min-width 600px)
padding 32px
main[data-darkmode]
root(true)
main:not([data-darkmode])
root(false)
</style>
<style lang="stylus" module>
@import '~const.styl'
.title
i
margin-right 4px
@@ -255,7 +245,7 @@ main:not([data-darkmode])
.badge
margin-left 6px
font-size 10px
color $theme-color
color var(--primary)
vertical-align middle
</style>

2
src/client/app/mobile/views/pages/notifications.vue
View File

@@ -34,7 +34,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
main
width 100%

4
src/client/app/mobile/views/pages/received-follow-requests.vue
View File

@@ -52,8 +52,6 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
main
width 100%
max-width 680px
@@ -69,7 +67,7 @@ main
> div
display flex
padding 16px
border solid 1px isDark ? #1c2023 : #eee
border solid 1px var(--faceDivider)
border-radius 4px
> span

28
src/client/app/mobile/views/pages/settings.vue
View File

@@ -1,7 +1,7 @@
<template>
<mk-ui>
<span slot="header"><span style="margin-right:4px;">%fa:cog%</span>%i18n:@settings%</span>
<main :data-darkmode="$store.state.device.darkmode">
<main>
<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${name}</b>`)"></div>
<div>
@@ -23,6 +23,13 @@
<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
</section>
<section>
<header>%i18n:@theme%</header>
<div>
<mk-theme/>
</div>
</section>
<section>
<header>%i18n:@timeline%</header>
<div>
@@ -322,7 +329,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
main
margin 0 auto
max-width 600px
width 100%
@@ -331,27 +338,22 @@ root(isDark)
margin 16px
padding 16px
text-align center
color isDark ? #49ab63 : #2c662d
background isDark ? #273c34 : #fcfff5
color var(--mobileSignedInAsFg)
background var(--mobileSignedInAsBg)
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
> .signout
margin 16px
padding 16px
text-align center
color isDark ? #ff5f56 : #cc2727
background isDark ? #652222 : #fff6f5
color var(--mobileSignedInAsFg)
background var(--mobileSignedInAsBg)
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
> footer
margin 16px
text-align center
color isDark ? #c9d2e0 : #888
main[data-darkmode]
root(true)
main:not([data-darkmode])
root(false)
color var(--text)
opacity 0.7
</style>

2
src/client/app/mobile/views/pages/user-list.vue
View File

@@ -53,7 +53,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
main
width 100%

2
src/client/app/mobile/views/pages/user-lists.vue
View File

@@ -51,7 +51,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
main
width 100%

40
src/client/app/mobile/views/pages/user.vue
View File

@@ -1,7 +1,7 @@
<template>
<mk-ui>
<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">{{ user | userName }}</template>
<main v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
<main v-if="!fetching">
<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
<header>
@@ -115,10 +115,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
$bg = isDark ? #22252f : #f7f7f7
main
$bg = var(--face)
> .is-suspended
> .is-remote
@@ -148,7 +146,7 @@ root(isDark)
> .banner
padding-bottom 33.3%
background-color isDark ? #5f7273 : #cacaca
background-color rgba(0, 0, 0, 0.1)
background-size cover
background-position center
@@ -198,26 +196,26 @@ root(isDark)
margin 0
line-height 22px
font-size 20px
color isDark ? #fff : #757c82
color var(--mobileUserPageName)
> .username
display inline-block
line-height 20px
font-size 16px
font-weight bold
color isDark ? #657786 : #969ea5
color var(--mobileUserPageAcct)
> .followed
margin-left 8px
padding 2px 4px
font-size 12px
color isDark ? #657786 : #fff
background isDark ? #f8f8f8 : #a7bec7
color var(--mobileUserPageFollowedFg)
background var(--mobileUserPageFollowedBg)
border-radius 4px
> .description
margin 8px 0
color isDark ? #fff : #757c82
color var(--mobileUserPageDescription)
> .info
margin 8px 0
@@ -225,14 +223,14 @@ root(isDark)
> p
display inline
margin 0 16px 0 0
color isDark ? #a9b9c1 : #90989c
color var(--text)
> i
margin-right 4px
> .status
> a
color isDark ? #657786 : #818a92
color var(--text)
&:not(:last-child)
margin-right 16px
@@ -240,7 +238,7 @@ root(isDark)
> b
margin-right 4px
font-size 16px
color isDark ? #fff : #787e86
color var(--mobileUserPageStatusHighlight)
> i
font-size 14px
@@ -249,7 +247,7 @@ root(isDark)
position -webkit-sticky
position sticky
top 47px
box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
box-shadow 0 4px 4px var(--mobileUserPageHeaderShadow)
background-color $bg
z-index 2
@@ -266,7 +264,7 @@ root(isDark)
line-height 48px
font-size 12px
text-decoration none
color isDark ? #657786 : #9ca1a5
color var(--text)
border-bottom solid 2px transparent
@media (min-width 400px)
@@ -275,8 +273,8 @@ root(isDark)
&[data-active]
font-weight bold
color $theme-color
border-color $theme-color
color var(--primary)
border-color var(--primary)
> .body
max-width 680px
@@ -289,10 +287,4 @@ root(isDark)
@media (min-width 600px)
padding 32px
main[data-darkmode]
root(true)
main:not([data-darkmode])
root(false)
</style>

16
src/client/app/mobile/views/pages/user/home.vue
View File

@@ -54,7 +54,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.root.home
max-width 600px
margin 0 auto
@@ -65,7 +65,7 @@ root(isDark)
margin 0 0 16px 0
> section
background isDark ? #21242f : #eee
background var(--face)
border-radius 8px
box-shadow 0 4px 16px rgba(#000, 0.1)
@@ -80,8 +80,8 @@ root(isDark)
padding 8px 10px
font-size 15px
font-weight normal
color isDark ? #b8c5cc : #465258
background isDark ? #282c37 : #fff
color var(--text)
background var(--faceHeader)
border-radius 8px 8px 0 0
@media (min-width 500px)
@@ -98,12 +98,6 @@ root(isDark)
display block
margin 16px
text-align center
color isDark ? #cad2da : #929aa0
.root.home[data-darkmode]
root(true)
.root.home:not([data-darkmode])
root(false)
color var(--text)
</style>

40
src/client/app/mobile/views/pages/welcome.vue
View File

@@ -3,7 +3,7 @@
<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
<div>
<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name">
<img svg-inline src="../../../../assets/title.svg" :alt="name">
<p class="host">{{ host }}</p>
<div class="about">
<h2>{{ name }}</h2>
@@ -122,9 +122,8 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
root(isDark)
.wgwfgvvimdjvhjfwxropcwksnzftjqes
text-align center
//background #fff
> .banner
position absolute
@@ -144,16 +143,17 @@ root(isDark)
left 0
width 100%
height 100px
background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
background linear-gradient(transparent, var(--bg))
> div:not(.banner)
padding 32px
margin 0 auto
max-width 500px
> img
> svg
display block
max-width 200px
width 200px
height 50px
margin 0 auto
> .host
@@ -169,8 +169,8 @@ root(isDark)
> .about
margin-top 16px
padding 16px
color #555
background #fff
color var(--text)
background var(--face)
border-radius 6px
> h2
@@ -238,7 +238,7 @@ root(isDark)
margin 16px 0
padding 8px
font-size 14px
color #444
color var(--text)
background rgba(#000, 0.1)
border-radius 6px
@@ -249,9 +249,9 @@ root(isDark)
margin 16px 0
> article
background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
background var(--mobileAnnouncement)
border-radius 6px
color isDark ? #fff : #3f4967
color var(--mobileAnnouncementFg)
padding 16px
margin 8px 0
font-size 12px
@@ -263,10 +263,10 @@ root(isDark)
margin 16px 0
padding 32px
font-size 14px
background #fff
background var(--face)
border-radius 6px
overflow hidden
color #3a3e46
color var(--text)
> h1
margin 0
@@ -279,12 +279,12 @@ root(isDark)
> section
> h2
border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
border-bottom 1px solid var(--faceDivider)
> section
margin-bottom 16px
padding-bottom 16px
border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
border-bottom 1px solid var(--faceDivider)
> h3
margin-bottom 8px
@@ -301,7 +301,7 @@ root(isDark)
> .info
padding 16px 0
border solid 2px #ddd
border solid 2px rgba(0, 0, 0, 0.1)
border-radius 8px
> *
@@ -309,17 +309,11 @@ root(isDark)
> footer
text-align center
color #444
color var(--text)
> small
display block
margin 16px 0 0 0
opacity 0.7
.wgwfgvvimdjvhjfwxropcwksnzftjqes[data-darkmode]
root(true)
.wgwfgvvimdjvhjfwxropcwksnzftjqes:not([data-darkmode])
root(false)
</style>