sim1222/test1
1
0
Fork 0
Code Issues Pull Requests 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/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>