Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-04-29 08:51:17 +09:00
parent e9940c9221
commit f2874d778a
75 changed files with 265 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/client/app/auth/views/form.vue
View file

@ -94,13 +94,13 @@ export default Vue.extend({
margin 0 auto -38px auto margin 0 auto -38px auto
border solid 5px #fff border solid 5px #fff
border-radius 100% border-radius 100%
box-shadow 0 2px 2px rgba(0, 0, 0, 0.1) box-shadow 0 2px 2px rgba(#000, 0.1)
> .app > .app
padding 44px 16px 0 16px padding 44px 16px 0 16px
color #555 color #555
background #eee background #eee
box-shadow 0 2px 2px rgba(0, 0, 0, 0.1) inset box-shadow 0 2px 2px rgba(#000, 0.1) inset
&:after &:after
content '' content ''

2
src/client/app/auth/views/index.vue
View file

@ -94,7 +94,7 @@ export default Vue.extend({
margin 0 auto margin 0 auto
text-align center text-align center
background #fff background #fff
box-shadow 0px 4px 16px rgba(0, 0, 0, 0.2) box-shadow 0px 4px 16px rgba(#000, 0.2)
> .fetching > .fetching
margin 0 margin 0

12
src/client/app/common/views/components/autocomplete.vue
View file

@ -234,7 +234,7 @@ export default Vue.extend({
margin-top calc(1em + 8px) margin-top calc(1em + 8px)
overflow hidden overflow hidden
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.1) border solid 1px rgba(#000, 0.1)
border-radius 4px border-radius 4px
transition top 0.1s ease, left 0.1s ease transition top 0.1s ease, left 0.1s ease
@ -253,7 +253,7 @@ export default Vue.extend({
white-space nowrap white-space nowrap
overflow hidden overflow hidden
font-size 0.9em font-size 0.9em
color rgba(0, 0, 0, 0.8) color rgba(#000, 0.8)
cursor default cursor default
&, * &, *
@ -285,10 +285,10 @@ export default Vue.extend({
.name .name
margin 0 8px 0 0 margin 0 8px 0 0
color rgba(0, 0, 0, 0.8) color rgba(#000, 0.8)
.username .username
color rgba(0, 0, 0, 0.3) color rgba(#000, 0.3)
> .emojis > li > .emojis > li
@ -298,10 +298,10 @@ export default Vue.extend({
width 24px width 24px
.name .name
color rgba(0, 0, 0, 0.8) color rgba(#000, 0.8)
.alias .alias
margin 0 0 0 8px margin 0 0 0 8px
color rgba(0, 0, 0, 0.3) color rgba(#000, 0.3)
</style> </style>

8
src/client/app/common/views/components/messaging-room.message.vue
View file

@ -134,7 +134,7 @@ export default Vue.extend({
bottom -4px bottom -4px
left -12px left -12px
margin 0 margin 0
color rgba(0, 0, 0, 0.5) color rgba(#000, 0.5)
font-size 11px font-size 11px
> .content > .content
@ -146,7 +146,7 @@ export default Vue.extend({
overflow hidden overflow hidden
overflow-wrap break-word overflow-wrap break-word
font-size 1em font-size 1em
color rgba(0, 0, 0, 0.5) color rgba(#000, 0.5)
> .text > .text
display block display block
@ -155,7 +155,7 @@ export default Vue.extend({
overflow hidden overflow hidden
overflow-wrap break-word overflow-wrap break-word
font-size 1em font-size 1em
color rgba(0, 0, 0, 0.8) color rgba(#000, 0.8)
& + .file & + .file
> a > a
@ -195,7 +195,7 @@ export default Vue.extend({
display block display block
margin 2px 0 0 0 margin 2px 0 0 0
font-size 10px font-size 10px
color rgba(0, 0, 0, 0.4) color rgba(#000, 0.4)
> [data-fa] > [data-fa]
margin-left 4px margin-left 4px

16
src/client/app/common/views/components/messaging-room.vue
View file

@ -256,7 +256,7 @@ export default Vue.extend({
padding 16px 8px 8px 8px padding 16px 8px 8px 8px
text-align center text-align center
font-size 0.8em font-size 0.8em
color rgba(0, 0, 0, 0.4) color rgba(#000, 0.4)
[data-fa] [data-fa]
margin-right 4px margin-right 4px
@ -267,7 +267,7 @@ export default Vue.extend({
padding 16px 8px 8px 8px padding 16px 8px 8px 8px
text-align center text-align center
font-size 0.8em font-size 0.8em
color rgba(0, 0, 0, 0.4) color rgba(#000, 0.4)
[data-fa] [data-fa]
margin-right 4px margin-right 4px
@ -278,7 +278,7 @@ export default Vue.extend({
padding 16px padding 16px
text-align center text-align center
font-size 0.8em font-size 0.8em
color rgba(0, 0, 0, 0.4) color rgba(#000, 0.4)
[data-fa] [data-fa]
margin-right 4px margin-right 4px
@ -289,14 +289,14 @@ export default Vue.extend({
padding 0 12px padding 0 12px
line-height 24px line-height 24px
color #fff color #fff
background rgba(0, 0, 0, 0.3) background rgba(#000, 0.3)
border-radius 12px border-radius 12px
&:hover &:hover
background rgba(0, 0, 0, 0.4) background rgba(#000, 0.4)
&:active &:active
background rgba(0, 0, 0, 0.5) background rgba(#000, 0.5)
&.fetching &.fetching
cursor wait cursor wait
@ -322,7 +322,7 @@ export default Vue.extend({
left 0 left 0
right 0 right 0
margin 0 auto margin 0 auto
background rgba(0, 0, 0, 0.1) background rgba(#000, 0.1)
> span > span
display inline-block display inline-block
@ -330,7 +330,7 @@ export default Vue.extend({
padding 0 16px padding 0 16px
//font-weight bold //font-weight bold
line-height 32px line-height 32px
color rgba(0, 0, 0, 0.3) color rgba(#000, 0.3)
background #fff background #fff
> footer > footer

18
src/client/app/common/views/components/messaging.vue
View file

@ -205,7 +205,7 @@ root(isDark)
z-index 1 z-index 1
width 100% width 100%
background #fff background #fff
box-shadow 0 0px 2px rgba(0, 0, 0, 0.2) box-shadow 0 0px 2px rgba(#000, 0.2)
> .form > .form
padding 8px padding 8px
@ -279,7 +279,7 @@ root(isDark)
vertical-align top vertical-align top
white-space nowrap white-space nowrap
overflow hidden overflow hidden
color rgba(0, 0, 0, 0.8) color rgba(#000, 0.8)
text-decoration none text-decoration none
transition none transition none
cursor pointer cursor pointer
@ -318,11 +318,11 @@ root(isDark)
margin 0 8px 0 0 margin 0 8px 0 0
/*font-weight bold*/ /*font-weight bold*/
font-weight normal font-weight normal
color rgba(0, 0, 0, 0.8) color rgba(#000, 0.8)
.username .username
font-weight normal font-weight normal
color rgba(0, 0, 0, 0.3) color rgba(#000, 0.3)
> .history > .history
@ -383,17 +383,17 @@ root(isDark)
overflow hidden overflow hidden
text-overflow ellipsis text-overflow ellipsis
font-size 1em font-size 1em
color isDark ? #fff : rgba(0, 0, 0, 0.9) color isDark ? #fff : rgba(#000, 0.9)
font-weight bold font-weight bold
transition all 0.1s ease transition all 0.1s ease
> .username > .username
margin 0 8px margin 0 8px
color isDark ? #606984 : rgba(0, 0, 0, 0.5) color isDark ? #606984 : rgba(#000, 0.5)
> .mk-time > .mk-time
margin 0 0 0 auto margin 0 0 0 auto
color isDark ? #606984 : rgba(0, 0, 0, 0.5) color isDark ? #606984 : rgba(#000, 0.5)
font-size 80% font-size 80%
> .avatar > .avatar
@ -413,10 +413,10 @@ root(isDark)
overflow hidden overflow hidden
overflow-wrap break-word overflow-wrap break-word
font-size 1.1em font-size 1.1em
color isDark ? #fff : rgba(0, 0, 0, 0.8) color isDark ? #fff : rgba(#000, 0.8)
.me .me
color isDark ? rgba(#fff, 0.7) : rgba(0, 0, 0, 0.4) color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4)
> .image > .image
display block display block

2
src/client/app/common/views/components/note-menu.vue
View file

@ -105,7 +105,7 @@ $border-color = rgba(27, 31, 35, 0.15)
z-index 10000 z-index 10000
width 100% width 100%
height 100% height 100%
background rgba(0, 0, 0, 0.1) background rgba(#000, 0.1)
opacity 0 opacity 0
> .popover > .popover

4
src/client/app/common/views/components/poll.vue
View file

@ -88,10 +88,10 @@ root(isDark)
cursor pointer cursor pointer
&:hover &:hover
background rgba(0, 0, 0, 0.05) background rgba(#000, 0.05)
&:active &:active
background rgba(0, 0, 0, 0.1) background rgba(#000, 0.1)
> .backdrop > .backdrop
position absolute position absolute

4
src/client/app/common/views/components/signin.vue
View file

@ -91,7 +91,7 @@ export default Vue.extend({
width 100% width 100%
line-height 44px line-height 44px
font-size 1em font-size 1em
color rgba(0, 0, 0, 0.7) color rgba(#000, 0.7)
background #fff background #fff
outline none outline none
border solid 1px #eee border solid 1px #eee
@ -117,7 +117,7 @@ export default Vue.extend({
margin -6px 0 0 0 margin -6px 0 0 0
width 100% width 100%
font-size 1.2em font-size 1.2em
color rgba(0, 0, 0, 0.5) color rgba(#000, 0.5)
outline none outline none
border none border none
border-radius 0 border-radius 0

4
src/client/app/common/views/components/signup.vue
View file

@ -234,13 +234,13 @@ export default Vue.extend({
color #333 !important color #333 !important
background #fff !important background #fff !important
outline none outline none
border solid 1px rgba(0, 0, 0, 0.1) border solid 1px rgba(#000, 0.1)
border-radius 4px border-radius 4px
box-shadow 0 0 0 114514px #fff inset box-shadow 0 0 0 114514px #fff inset
transition all .3s ease transition all .3s ease
&:hover &:hover
border-color rgba(0, 0, 0, 0.2) border-color rgba(#000, 0.2)
transition all .1s ease transition all .1s ease
&:focus &:focus

2
src/client/app/common/views/components/stream-indicator.vue
View file

@ -73,7 +73,7 @@ export default Vue.extend({
padding 6px 12px padding 6px 12px
font-size 0.9em font-size 0.9em
color #fff color #fff
background rgba(0, 0, 0, 0.8) background rgba(#000, 0.8)
border-radius 4px border-radius 4px
> p > p

18
src/client/app/common/views/components/visibility-chooser.vue
View file

@ -53,18 +53,28 @@ export default Vue.extend({
const width = popover.offsetWidth; const width = popover.offsetWidth;
const height = popover.offsetHeight; const height = popover.offsetHeight;
let left;
let top;
if (this.compact) { if (this.compact) {
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2); const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
popover.style.left = (x - (width / 2)) + 'px'; left = (x - (width / 2));
popover.style.top = (y - (height / 2)) + 'px'; top = (y - (height / 2));
} else { } else {
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
const y = rect.top + window.pageYOffset + this.source.offsetHeight; const y = rect.top + window.pageYOffset + this.source.offsetHeight;
popover.style.left = (x - (width / 2)) + 'px'; left = (x - (width / 2));
popover.style.top = y + 'px'; top = y;
} }
if (left + width > window.innerWidth) {
left = window.innerWidth - width;
}
popover.style.left = left + 'px';
popover.style.top = top + 'px';
anime({ anime({
targets: this.$refs.backdrop, targets: this.$refs.backdrop,
opacity: 1, opacity: 1,

2
src/client/app/common/views/components/welcome-timeline.vue
View file

@ -62,7 +62,7 @@ export default Vue.extend({
overflow-wrap break-word overflow-wrap break-word
font-size .9em font-size .9em
color #4C4C4C color #4C4C4C
border-bottom 1px solid rgba(0, 0, 0, 0.05) border-bottom 1px solid rgba(#000, 0.05)
&:after &:after
content "" content ""

2
src/client/app/common/views/widgets/access-log.vue
View file

@ -78,7 +78,7 @@ export default define({
color #555 color #555
&:nth-child(odd) &:nth-child(odd)
background rgba(0, 0, 0, 0.025) background rgba(#000, 0.025)
> b > b
margin-right 4px margin-right 4px

4
src/client/app/common/views/widgets/calendar.vue
View file

@ -113,7 +113,7 @@ root(isDark)
padding 16px 0 padding 16px 0
color isDark ? #c5ced6 :#777 color isDark ? #c5ced6 :#777
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
&[data-special='on-new-years-day'] &[data-special='on-new-years-day']
@ -126,7 +126,7 @@ root(isDark)
&[data-mobile] &[data-mobile]
border none border none
border-radius 8px border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) box-shadow 0 0 0 1px rgba(#000, 0.2)
&:after &:after
content "" content ""

2
src/client/app/common/views/widgets/donation.vue
View file

@ -46,7 +46,7 @@ root(isDark)
border none border none
background #ead8bb background #ead8bb
border-radius 8px border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) box-shadow 0 0 0 1px rgba(#000, 0.2)
> article > article
> h1 > h1

2
src/client/app/common/views/widgets/rss.vue
View file

@ -92,7 +92,7 @@ root(isDark)
padding 8px 16px padding 8px 16px
&:nth-child(even) &:nth-child(even)
background rgba(0, 0, 0, 0.05) background rgba(#000, 0.05)
.mkw-rss[data-darkmode] .mkw-rss[data-darkmode]
root(true) root(true)

4
src/client/app/common/views/widgets/server.pie.vue
View file

@ -5,7 +5,7 @@
cx="50%" cy="50%" cx="50%" cy="50%"
fill="none" fill="none"
stroke-width="0.1" stroke-width="0.1"
stroke="rgba(0, 0, 0, 0.05)"/> stroke="rgba(#000, 0.05)"/>
<circle <circle
:r="r" :r="r"
cx="50%" cy="50%" cx="50%" cy="50%"
@ -56,7 +56,7 @@ root(isDark)
> text > text
font-size 0.15px font-size 0.15px
fill isDark ? rgba(#fff, 0.6) : rgba(0, 0, 0, 0.6) fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6)
svg[data-darkmode] svg[data-darkmode]
root(true) root(true)

4
src/client/app/common/views/widgets/slideshow.vue
View file

@ -122,13 +122,13 @@ export default define({
.mkw-slideshow .mkw-slideshow
overflow hidden overflow hidden
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
&[data-mobile] &[data-mobile]
border none border none
border-radius 8px border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) box-shadow 0 0 0 1px rgba(#000, 0.2)
> div > div
width 100% width 100%

2
src/client/app/desktop/views/components/activity.calendar.vue
View file

@ -61,6 +61,6 @@ svg
&.day &.day
&:hover &:hover
fill rgba(0, 0, 0, 0.05) fill rgba(#000, 0.05)
</style> </style>

12
src/client/app/desktop/views/components/calendar.vue
View file

@ -136,7 +136,7 @@ export default Vue.extend({
root(isDark) root(isDark)
color isDark ? #c5ced6 : #777 color isDark ? #c5ced6 : #777
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
&[data-melt] &[data-melt]
@ -152,7 +152,7 @@ root(isDark)
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(#000, 0.07)
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px
@ -214,10 +214,10 @@ root(isDark)
border-radius 6px border-radius 6px
&:hover > div &:hover > div
background rgba(0, 0, 0, 0.025) background rgba(#000, 0.025)
&:active > div &:active > div
background rgba(0, 0, 0, 0.05) background rgba(#000, 0.05)
&[data-is-donichi] &[data-is-donichi]
color #ef95a0 color #ef95a0
@ -233,10 +233,10 @@ root(isDark)
font-weight bold font-weight bold
> div > div
background rgba(0, 0, 0, 0.025) background rgba(#000, 0.025)
&:active > div &:active > div
background rgba(0, 0, 0, 0.05) background rgba(#000, 0.05)
&[data-today] &[data-today]
> div > div

2
src/client/app/desktop/views/components/context-menu.menu.vue
View file

@ -106,7 +106,7 @@ root(isDark)
width $width width $width
background isDark ? #282c37 :#fff background isDark ? #282c37 :#fff
border-radius 0 4px 4px 4px border-radius 0 4px 4px 4px
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2) box-shadow 2px 2px 8px rgba(#000, 0.2)
transition visibility 0s linear 0.2s transition visibility 0s linear 0.2s
.menu[data-darkmode] .menu[data-darkmode]

2
src/client/app/desktop/views/components/context-menu.vue
View file

@ -68,7 +68,7 @@ root(isDark)
font-size 0.8em font-size 0.8em
background isDark ? #282c37 : #fff background isDark ? #282c37 : #fff
border-radius 0 4px 4px 4px border-radius 0 4px 4px 4px
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2) box-shadow 2px 2px 8px rgba(#000, 0.2)
opacity 0 opacity 0
.context-menu[data-darkmode] .context-menu[data-darkmode]

2
src/client/app/desktop/views/components/dialog.vue
View file

@ -102,7 +102,7 @@ export default Vue.extend({
left 0 left 0
width 100% width 100%
height 100% height 100%
background rgba(0, 0, 0, 0.7) background rgba(#000, 0.7)
opacity 0 opacity 0
pointer-events none pointer-events none

4
src/client/app/desktop/views/components/drive.file.vue
View file

@ -195,7 +195,7 @@ root(isDark)
cursor pointer cursor pointer
&:hover &:hover
background rgba(0, 0, 0, 0.05) background rgba(#000, 0.05)
> .label > .label
&:before &:before
@ -203,7 +203,7 @@ root(isDark)
background #0b65a5 background #0b65a5
&:active &:active
background rgba(0, 0, 0, 0.1) background rgba(#000, 0.1)
> .label > .label
&:before &:before

4
src/client/app/desktop/views/components/drive.vue
View file

@ -587,7 +587,7 @@ root(isDark)
font-size 0.9em font-size 0.9em
color isDark ? #d2d9dc : #555 color isDark ? #d2d9dc : #555
background isDark ? #282c37 : #fff background isDark ? #282c37 : #fff
box-shadow 0 1px 0 rgba(0, 0, 0, 0.05) box-shadow 0 1px 0 rgba(#000, 0.05)
&, * &, *
user-select none user-select none
@ -733,7 +733,7 @@ root(isDark)
display inline-block display inline-block
position absolute position absolute
top 0 top 0
background-color rgba(0, 0, 0, 0.3) background-color rgba(#000, 0.3)
border-radius 100% border-radius 100%
animation sk-bounce 2.0s infinite ease-in-out animation sk-bounce 2.0s infinite ease-in-out

2
src/client/app/desktop/views/components/ellipsis-icon.vue
View file

@ -14,7 +14,7 @@
display inline-block display inline-block
width 18px width 18px
height 18px height 18px
background-color rgba(0, 0, 0, 0.3) background-color rgba(#000, 0.3)
border-radius 100% border-radius 100%
animation bounce 1.4s infinite ease-in-out both animation bounce 1.4s infinite ease-in-out both

2
src/client/app/desktop/views/components/home.vue
View file

@ -251,7 +251,7 @@ root(isDark)
height 48px height 48px
color isDark ? #fff : #000 color isDark ? #fff : #000
background isDark ? #313543 : #f7f7f7 background isDark ? #313543 : #f7f7f7
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075) box-shadow 0 1px 1px rgba(#000, 0.075)
> a > a
display block display block

2
src/client/app/desktop/views/components/media-image-dialog.vue
View file

@ -52,7 +52,7 @@ export default Vue.extend({
left 0 left 0
width 100% width 100%
height 100% height 100%
background rgba(0, 0, 0, 0.7) background rgba(#000, 0.7)
> img > img
position fixed position fixed

2
src/client/app/desktop/views/components/media-video-dialog.vue
View file

@ -54,7 +54,7 @@ export default Vue.extend({
left 0 left 0
width 100% width 100%
height 100% height 100%
background rgba(0, 0, 0, 0.7) background rgba(#000, 0.7)
> video > video
position fixed position fixed

2
src/client/app/desktop/views/components/mentions.vue
View file

@ -85,7 +85,7 @@ export default Vue.extend({
.mk-mentions .mk-mentions
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
> header > header

1
src/client/app/desktop/views/components/note-detail.sub.vue
View file

@ -17,6 +17,7 @@
</header> </header>
<div class="body"> <div class="body">
<div class="text"> <div class="text">
<span v-if="note.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
<mk-note-html v-if="note.text" :text="note.text" :i="os.i"/> <mk-note-html v-if="note.text" :text="note.text" :i="os.i"/>
</div> </div>
<div class="media" v-if="note.mediaIds.length > 0"> <div class="media" v-if="note.mediaIds.length > 0">

3
src/client/app/desktop/views/components/note-detail.vue
View file

@ -39,6 +39,7 @@
</header> </header>
<div class="body"> <div class="body">
<div class="text"> <div class="text">
<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/> <mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
</div> </div>
<div class="media" v-if="p.media.length > 0"> <div class="media" v-if="p.media.length > 0">
@ -222,7 +223,7 @@ root(isDark)
overflow hidden overflow hidden
text-align left text-align left
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
border solid 1px rgba(0, 0, 0, 0.1) border solid 1px rgba(#000, 0.1)
border-radius 8px border-radius 8px
> .read-more > .read-more

2
src/client/app/desktop/views/components/notes.note.vue
View file

@ -607,7 +607,7 @@ root(isDark)
> .detail > .detail
padding-top 4px padding-top 4px
background rgba(0, 0, 0, 0.0125) background rgba(#000, 0.0125)
.note[data-darkmode] .note[data-darkmode]
root(true) root(true)

16
src/client/app/desktop/views/components/notifications.vue
View file

@ -204,7 +204,7 @@ root(isDark)
padding 16px padding 16px
overflow-wrap break-word overflow-wrap break-word
font-size 0.9em font-size 0.9em
border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05) border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
&:last-child &:last-child
border-bottom none border-bottom none
@ -215,7 +215,7 @@ root(isDark)
top 16px top 16px
right 12px right 12px
vertical-align top vertical-align top
color isDark ? #606984 : rgba(0, 0, 0, 0.6) color isDark ? #606984 : rgba(#000, 0.6)
font-size small font-size small
&:after &:after
@ -250,10 +250,10 @@ root(isDark)
margin-right 4px margin-right 4px
.note-preview .note-preview
color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7) color isDark ? #c2cad4 : rgba(#000, 0.7)
.note-ref .note-ref
color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7) color isDark ? #c2cad4 : rgba(#000, 0.7)
[data-fa] [data-fa]
font-size 1em font-size 1em
@ -282,7 +282,7 @@ root(isDark)
font-size 0.8em font-size 0.8em
color isDark ? #666b79 : #aaa color isDark ? #666b79 : #aaa
background isDark ? #242731 : #fdfdfd background isDark ? #242731 : #fdfdfd
border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05) border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
span span
margin 0 16px margin 0 16px
@ -295,13 +295,13 @@ root(isDark)
width 100% width 100%
padding 16px padding 16px
color #555 color #555
border-top solid 1px rgba(0, 0, 0, 0.05) border-top solid 1px rgba(#000, 0.05)
&:hover &:hover
background rgba(0, 0, 0, 0.025) background rgba(#000, 0.025)
&:active &:active
background rgba(0, 0, 0, 0.05) background rgba(#000, 0.05)
&.fetching &.fetching
cursor wait cursor wait

3
src/client/app/desktop/views/components/post-form.vue
View file

@ -364,7 +364,6 @@ root(isDark)
clear both clear both
> .content > .content
> input > input
> textarea > textarea
display block display block
@ -585,7 +584,7 @@ root(isDark)
color rgba($theme-color, 0.6) color rgba($theme-color, 0.6)
background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%) background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%)
border-color rgba($theme-color, 0.5) border-color rgba($theme-color, 0.5)
box-shadow 0 2px 4px rgba(0, 0, 0, 0.15) inset box-shadow 0 2px 4px rgba(#000, 0.15) inset
&:focus &:focus
&:after &:after

2
src/client/app/desktop/views/components/timeline.vue
View file

@ -59,7 +59,7 @@ export default Vue.extend({
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
> header > header

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

@ -165,7 +165,7 @@ root(isDark)
font-size 0.8em font-size 0.8em
background $bgcolor background $bgcolor
border-radius 4px border-radius 4px
box-shadow 0 1px 4px rgba(0, 0, 0, 0.25) box-shadow 0 1px 4px rgba(#000, 0.25)
&:before &:before
content "" content ""
@ -176,7 +176,7 @@ root(isDark)
right 12px right 12px
border-top solid 14px transparent border-top solid 14px transparent
border-right solid 14px transparent border-right solid 14px transparent
border-bottom solid 14px rgba(0, 0, 0, 0.1) border-bottom solid 14px rgba(#000, 0.1)
border-left solid 14px transparent border-left solid 14px transparent
&:after &:after

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

@ -125,7 +125,7 @@ root(isDark)
width 300px width 300px
background $bgcolor background $bgcolor
border-radius 4px border-radius 4px
box-shadow 0 1px 4px rgba(0, 0, 0, 0.25) box-shadow 0 1px 4px rgba(#000, 0.25)
&:before &:before
content "" content ""
@ -136,7 +136,7 @@ root(isDark)
right 74px right 74px
border-top solid 14px transparent border-top solid 14px transparent
border-right solid 14px transparent border-right solid 14px transparent
border-bottom solid 14px rgba(0, 0, 0, 0.1) border-bottom solid 14px rgba(#000, 0.1)
border-left solid 14px transparent border-left solid 14px transparent
&:after &:after

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

@ -50,7 +50,7 @@ export default Vue.extend({
width 14em width 14em
height 32px height 32px
font-size 1em font-size 1em
background rgba(0, 0, 0, 0.05) background rgba(#000, 0.05)
outline none outline none
//border solid 1px #ddd //border solid 1px #ddd
border none border none
@ -62,7 +62,7 @@ export default Vue.extend({
color #9eaba8 color #9eaba8
&:hover &:hover
background rgba(0, 0, 0, 0.08) background rgba(#000, 0.08)
&:focus &:focus
box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important

2
src/client/app/desktop/views/components/ui.header.vue
View file

@ -103,7 +103,7 @@ root(isDark)
top 0 top 0
z-index 1000 z-index 1000
width 100% width 100%
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075) box-shadow 0 1px 1px rgba(#000, 0.075)
> .main > .main
height 48px height 48px

2
src/client/app/desktop/views/components/user-preview.vue
View file

@ -94,7 +94,7 @@ root(isDark)
width 250px width 250px
background isDark ? #282c37 : #fff background isDark ? #282c37 : #fff
background-clip content-box background-clip content-box
border solid 1px rgba(0, 0, 0, 0.1) border solid 1px rgba(#000, 0.1)
border-radius 4px border-radius 4px
overflow hidden overflow hidden
opacity 0 opacity 0

2
src/client/app/desktop/views/components/users-list.vue
View file

@ -119,7 +119,7 @@ export default Vue.extend({
overflow auto overflow auto
> * > *
border-bottom solid 1px rgba(0, 0, 0, 0.05) border-bottom solid 1px rgba(#000, 0.05)
> * > *
max-width 600px max-width 600px

4
src/client/app/desktop/views/components/widget-container.vue
View file

@ -36,7 +36,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
overflow hidden overflow hidden
@ -55,7 +55,7 @@ root(isDark)
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color isDark ? #e3e5e8 : #888 color isDark ? #e3e5e8 : #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(#000, 0.07)
> [data-fa] > [data-fa]
margin-right 6px margin-right 6px

26
src/client/app/desktop/views/components/window.vue
View file

@ -17,14 +17,16 @@
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
<div class="handle top" v-if="canResize" @mousedown.prevent="onTopHandleMousedown"></div> <template v-if="canResize">
<div class="handle right" v-if="canResize" @mousedown.prevent="onRightHandleMousedown"></div> <div class="handle top" @mousedown.prevent="onTopHandleMousedown"></div>
<div class="handle bottom" v-if="canResize" @mousedown.prevent="onBottomHandleMousedown"></div> <div class="handle right" @mousedown.prevent="onRightHandleMousedown"></div>
<div class="handle left" v-if="canResize" @mousedown.prevent="onLeftHandleMousedown"></div> <div class="handle bottom" @mousedown.prevent="onBottomHandleMousedown"></div>
<div class="handle top-left" v-if="canResize" @mousedown.prevent="onTopLeftHandleMousedown"></div> <div class="handle left" @mousedown.prevent="onLeftHandleMousedown"></div>
<div class="handle top-right" v-if="canResize" @mousedown.prevent="onTopRightHandleMousedown"></div> <div class="handle top-left" @mousedown.prevent="onTopLeftHandleMousedown"></div>
<div class="handle bottom-right" v-if="canResize" @mousedown.prevent="onBottomRightHandleMousedown"></div> <div class="handle top-right" @mousedown.prevent="onTopRightHandleMousedown"></div>
<div class="handle bottom-left" v-if="canResize" @mousedown.prevent="onBottomLeftHandleMousedown"></div> <div class="handle bottom-right" @mousedown.prevent="onBottomRightHandleMousedown"></div>
<div class="handle bottom-left" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
</template>
</div> </div>
</div> </div>
</template> </template>
@ -85,7 +87,7 @@ export default Vue.extend({
computed: { computed: {
isFlexible(): boolean { isFlexible(): boolean {
return this.height == null; return this.height == 'auto';
}, },
canResize(): boolean { canResize(): boolean {
return !this.isFlexible; return !this.isFlexible;
@ -476,7 +478,7 @@ root(isDark)
left 0 left 0
width 100% width 100%
height 100% height 100%
background rgba(0, 0, 0, 0.7) background rgba(#000, 0.7)
opacity 0 opacity 0
pointer-events none pointer-events none
@ -493,7 +495,7 @@ root(isDark)
&:focus &:focus
&:not([data-is-modal]) &:not([data-is-modal])
> .body > .body
box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.2) box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(#000, 0.2)
> .handle > .handle
$size = 8px $size = 8px
@ -561,7 +563,7 @@ root(isDark)
overflow hidden overflow hidden
background isDark ? #282C37 : #fff background isDark ? #282C37 : #fff
border-radius 6px border-radius 6px
box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2) box-shadow 0 2px 6px 0 rgba(#000, 0.2)
> header > header
$header-height = 40px $header-height = 40px

2
src/client/app/desktop/views/pages/search.vue
View file

@ -114,7 +114,7 @@ export default Vue.extend({
.notes .notes
max-width 600px max-width 600px
margin 0 auto margin 0 auto
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
overflow hidden overflow hidden

4
src/client/app/desktop/views/pages/user/user.followers-you-know.vue
View file

@ -38,7 +38,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.followers-you-know .followers-you-know
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
> .title > .title
@ -49,7 +49,7 @@ export default Vue.extend({
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(#000, 0.07)
> i > i
margin-right 4px margin-right 4px

4
src/client/app/desktop/views/pages/user/user.friends.vue
View file

@ -44,7 +44,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.friends .friends
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
> .title > .title
@ -55,7 +55,7 @@ export default Vue.extend({
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(#000, 0.07)
> i > i
margin-right 4px margin-right 4px

6
src/client/app/desktop/views/pages/user/user.header.vue
View file

@ -72,7 +72,7 @@ export default Vue.extend({
overflow hidden overflow hidden
background #f7f7f7 background #f7f7f7
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075) box-shadow 0 1px 1px rgba(#000, 0.075)
> .is-suspended > .is-suspended
> .is-remote > .is-remote
@ -99,7 +99,7 @@ export default Vue.extend({
background-color #383838 background-color #383838
> .fade > .fade
background linear-gradient(transparent, rgba(0, 0, 0, 0.7)) background linear-gradient(transparent, rgba(#000, 0.7))
> .container > .container
> .title > .title
@ -142,7 +142,7 @@ export default Vue.extend({
margin 0 margin 0
border solid 3px #fff border solid 3px #fff
border-radius 8px border-radius 8px
box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2) box-shadow 1px 1px 3px rgba(#000, 0.2)
> .title > .title
position absolute position absolute

4
src/client/app/desktop/views/pages/user/user.home.vue
View file

@ -65,7 +65,7 @@ export default Vue.extend({
width calc(100% - 275px * 2) width calc(100% - 275px * 2)
> .timeline > .timeline
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
> div > div
@ -91,7 +91,7 @@ export default Vue.extend({
font-size 12px font-size 12px
color #aaa color #aaa
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
a a

4
src/client/app/desktop/views/pages/user/user.photos.vue
View file

@ -41,7 +41,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.photos .photos
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
> .title > .title
@ -52,7 +52,7 @@ export default Vue.extend({
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(#000, 0.07)
> i > i
margin-right 4px margin-right 4px

2
src/client/app/desktop/views/pages/user/user.profile.vue
View file

@ -118,7 +118,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.profile .profile
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
> *:first-child > *:first-child

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

@ -231,14 +231,14 @@ export default Vue.extend({
width 410px width 410px
background #fff background #fff
border-radius 8px border-radius 8px
box-shadow 0 0 0 12px rgba(0, 0, 0, 0.1) box-shadow 0 0 0 12px rgba(#000, 0.1)
overflow hidden overflow hidden
> header > header
z-index 1 z-index 1
padding 12px 16px padding 12px 16px
color #888d94 color #888d94
box-shadow 0 1px 0px rgba(0, 0, 0, 0.1) box-shadow 0 1px 0px rgba(#000, 0.1)
> div > div
position absolute position absolute

4
src/client/app/desktop/views/widgets/channel.vue
View file

@ -61,7 +61,7 @@ export default define({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mkw-channel .mkw-channel
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
overflow hidden overflow hidden
@ -73,7 +73,7 @@ export default define({
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(#000, 0.07)
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px

4
src/client/app/desktop/views/widgets/post-form.vue
View file

@ -59,7 +59,7 @@ export default define({
.mkw-post-form .mkw-post-form
background #fff background #fff
overflow hidden overflow hidden
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
> .title > .title
@ -70,7 +70,7 @@ export default define({
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color #888 color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07) box-shadow 0 1px rgba(#000, 0.07)
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px

8
src/client/app/desktop/views/widgets/profile.vue
View file

@ -45,7 +45,7 @@ export default define({
root(isDark) root(isDark)
overflow hidden overflow hidden
background isDark ? #282c37 : #fff background isDark ? #282c37 : #fff
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(#000, 0.075)
border-radius 6px border-radius 6px
&[data-compact] &[data-compact]
@ -54,14 +54,14 @@ root(isDark)
display block display block
width 100% width 100%
height 100% height 100%
background rgba(0, 0, 0, 0.5) background rgba(#000, 0.5)
> .avatar > .avatar
top ((100px - 58px) / 2) top ((100px - 58px) / 2)
left ((100px - 58px) / 2) left ((100px - 58px) / 2)
border none border none
border-radius 100% border-radius 100%
box-shadow 0 0 16px rgba(0, 0, 0, 0.5) box-shadow 0 0 16px rgba(#000, 0.5)
> .name > .name
position absolute position absolute
@ -70,7 +70,7 @@ root(isDark)
margin 0 margin 0
line-height 100px line-height 100px
color #fff color #fff
text-shadow 0 0 8px rgba(0, 0, 0, 0.5) text-shadow 0 0 8px rgba(#000, 0.5)
> .username > .username
display none display none

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

@ -54,7 +54,7 @@ export default Vue.extend({
width 100% width 100%
height 100% height 100%
padding 8px padding 8px
background rgba(0, 0, 0, 0.2) background rgba(#000, 0.2)
> .body > .body
width 100% width 100%

2
src/client/app/mobile/views/components/drive-folder-chooser.vue
View file

@ -38,7 +38,7 @@ export default Vue.extend({
width 100% width 100%
height 100% height 100%
padding 8px padding 8px
background rgba(0, 0, 0, 0.2) background rgba(#000, 0.2)
> .body > .body
width 100% width 100%

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

@ -139,7 +139,7 @@ export default Vue.extend({
max-width 100% max-width 100%
max-height 300px max-height 300px
margin 0 auto margin 0 auto
box-shadow 1px 1px 4px rgba(0, 0, 0, 0.2) box-shadow 1px 1px 4px rgba(#000, 0.2)
> footer > footer
padding 8px 8px 0 8px padding 8px 8px 0 8px
@ -226,7 +226,7 @@ export default Vue.extend({
background-color #767676 background-color #767676
background-image none background-image none
border-color #444 border-color #444
box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2) box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px

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

@ -474,11 +474,11 @@ export default Vue.extend({
overflow auto overflow auto
white-space nowrap white-space nowrap
font-size 0.9em font-size 0.9em
color rgba(0, 0, 0, 0.67) color rgba(#000, 0.67)
-webkit-backdrop-filter blur(12px) -webkit-backdrop-filter blur(12px)
backdrop-filter blur(12px) backdrop-filter blur(12px)
background-color rgba(#fff, 0.75) background-color rgba(#fff, 0.75)
border-bottom solid 1px rgba(0, 0, 0, 0.13) border-bottom solid 1px rgba(#000, 0.13)
> p > p
> a > a
@ -555,7 +555,7 @@ export default Vue.extend({
display inline-block display inline-block
position absolute position absolute
top 0 top 0
background rgba(0, 0, 0, 0.2) background rgba(#000, 0.2)
border-radius 100% border-radius 100%
animation sk-bounce 2.0s infinite ease-in-out animation sk-bounce 2.0s infinite ease-in-out

2
src/client/app/mobile/views/components/friends-maker.vue
View file

@ -57,7 +57,7 @@ export default Vue.extend({
.mk-friends-maker .mk-friends-maker
background #fff background #fff
border-radius 8px border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) box-shadow 0 0 0 1px rgba(#000, 0.2)
> .title > .title
margin 0 margin 0

1
src/client/app/mobile/views/components/note-detail.vue
View file

@ -35,6 +35,7 @@
</header> </header>
<div class="body"> <div class="body">
<div class="text"> <div class="text">
<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
<mk-note-html v-if="p.text" :text="p.text" :i="os.i"/> <mk-note-html v-if="p.text" :text="p.text" :i="os.i"/>
</div> </div>
<div class="tags" v-if="p.tags && p.tags.length > 0"> <div class="tags" v-if="p.tags && p.tags.length > 0">

7
src/client/app/mobile/views/components/notifications.vue
View file

@ -107,10 +107,11 @@ root(isDark)
margin 0 auto margin 0 auto
background isDark ? #282C37 :#fff background isDark ? #282C37 :#fff
border-radius 8px border-radius 8px
box-shadow 0 0 2px rgba(0, 0, 0, 0.1) box-shadow 0 0 2px rgba(#000, 0.1)
overflow hidden
@media (min-width 500px) @media (min-width 500px)
box-shadow 0 8px 32px rgba(0, 0, 0, 0.1) box-shadow 0 8px 32px rgba(#000, 0.1)
.transition .transition
.mk-notifications-enter .mk-notifications-enter
@ -147,7 +148,7 @@ root(isDark)
width 100% width 100%
padding 16px padding 16px
color #555 color #555
border-top solid 1px rgba(0, 0, 0, 0.05) border-top solid 1px rgba(#000, 0.05)
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px

114
src/client/app/mobile/views/components/post-form.vue
View file

@ -10,6 +10,10 @@
</header> </header>
<div class="form"> <div class="form">
<mk-note-preview v-if="reply" :note="reply"/> <mk-note-preview v-if="reply" :note="reply"/>
<div v-if="visibility == 'specified'" class="visibleUsers">
<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
<a @click="addVisibleUser">+ユーザーを追加</a>
</div>
<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)"> <input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
<textarea v-model="text" ref="text" :disabled="posting" :placeholder="reply ? '%i18n:!@reply-placeholder%' : '%i18n:!@note-placeholder%'"></textarea> <textarea v-model="text" ref="text" :disabled="posting" :placeholder="reply ? '%i18n:!@reply-placeholder%' : '%i18n:!@note-placeholder%'"></textarea>
<div class="attaches" v-show="files.length != 0"> <div class="attaches" v-show="files.length != 0">
@ -27,6 +31,7 @@
<button class="poll" @click="poll = true">%fa:chart-pie%</button> <button class="poll" @click="poll = true">%fa:chart-pie%</button>
<button class="poll" @click="useCw = !useCw">%fa:eye-slash%</button> <button class="poll" @click="useCw = !useCw">%fa:eye-slash%</button>
<button class="geo" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button> <button class="geo" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
<button class="visibility" @click="setVisibility" ref="visibilityButton">%fa:lock%</button>
<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/> <input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
</div> </div>
</div> </div>
@ -35,11 +40,13 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import * as XDraggable from 'vuedraggable'; import * as XDraggable from 'vuedraggable';
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
import getKao from '../../../common/scripts/get-kao'; import getKao from '../../../common/scripts/get-kao';
export default Vue.extend({ export default Vue.extend({
components: { components: {
XDraggable XDraggable,
MkVisibilityChooser
}, },
props: ['reply'], props: ['reply'],
@ -52,6 +59,8 @@ export default Vue.extend({
files: [], files: [],
poll: false, poll: false,
geo: null, geo: null,
visibility: 'public',
visibleUsers: [],
useCw: false, useCw: false,
cw: null cw: null
}; };
@ -121,6 +130,33 @@ export default Vue.extend({
this.geo = null; this.geo = null;
}, },
setVisibility() {
const w = (this as any).os.new(MkVisibilityChooser, {
source: this.$refs.visibilityButton,
compact: true,
v: this.visibility
});
w.$once('chosen', v => {
this.visibility = v;
});
},
addVisibleUser() {
(this as any).apis.input({
title: 'ユーザー名を入力してください'
}).then(username => {
(this as any).api('users/show', {
username
}).then(user => {
this.visibleUsers.push(user);
});
});
},
removeVisibleUser(user) {
this.visibleUsers = this.visibleUsers.filter(u => u != user);
},
clear() { clear() {
this.text = ''; this.text = '';
this.files = []; this.files = [];
@ -145,6 +181,8 @@ export default Vue.extend({
heading: isNaN(this.geo.heading) ? null : this.geo.heading, heading: isNaN(this.geo.heading) ? null : this.geo.heading,
speed: this.geo.speed, speed: this.geo.speed,
} : null, } : null,
visibility: this.visibility,
visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
viaMobile: viaMobile viaMobile: viaMobile
}).then(data => { }).then(data => {
this.$emit('note'); this.$emit('note');
@ -169,33 +207,33 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-post-form root(isDark)
max-width 500px max-width 500px
width calc(100% - 16px) width calc(100% - 16px)
margin 8px auto margin 8px auto
background #fff background isDark ? #282C37 : #fff
border-radius 8px border-radius 8px
box-shadow 0 0 2px rgba(0, 0, 0, 0.1) box-shadow 0 0 2px rgba(#000, 0.1)
@media (min-width 500px) @media (min-width 500px)
margin 16px auto margin 16px auto
width calc(100% - 32px) width calc(100% - 32px)
box-shadow 0 8px 32px rgba(0, 0, 0, 0.1) box-shadow 0 8px 32px rgba(#000, 0.1)
@media (min-width 600px) @media (min-width 600px)
margin 32px auto margin 32px auto
> header > header
z-index 1 z-index 1000
height 50px height 50px
box-shadow 0 1px 0 0 rgba(0, 0, 0, 0.1) box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
> .cancel > .cancel
padding 0 padding 0
width 50px width 50px
line-height 50px line-height 50px
font-size 24px font-size 24px
color #555 color isDark ? #9baec8 : #555
> div > div
position absolute position absolute
@ -229,6 +267,38 @@ export default Vue.extend({
> .mk-note-preview > .mk-note-preview
padding 16px padding 16px
> .visibleUsers
margin-bottom 8px
font-size 14px
> span
margin-right 16px
color isDark ? #fff : #666
> input
z-index 1
> input
> textarea
display block
padding 12px
margin 0
width 100%
font-size 16px
color isDark ? #fff : #333
background isDark ? #191d23 : #fff
border none
border-radius 0
box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
&:disabled
opacity 0.5
> textarea
max-width 100%
min-width 100%
min-height 80px
> .attaches > .attaches
> .files > .files
@ -262,31 +332,12 @@ export default Vue.extend({
> .file > .file
display none display none
> input
> textarea
display block
padding 12px
margin 0
width 100%
font-size 16px
color #333
border none
border-bottom solid 1px #ddd
border-radius 0
&:disabled
opacity 0.5
> textarea
max-width 100%
min-width 100%
min-height 80px
> .upload > .upload
> .drive > .drive
> .kao > .kao
> .poll > .poll
> .geo > .geo
> .visibility
display inline-block display inline-block
padding 0 padding 0
margin 0 margin 0
@ -300,5 +351,10 @@ export default Vue.extend({
border-radius 0 border-radius 0
box-shadow none box-shadow none
</style> .mk-post-form[data-darkmode]
root(true)
.mk-post-form:not([data-darkmode])
root(false)
</style>

8
src/client/app/mobile/views/components/users-list.vue
View file

@ -74,7 +74,7 @@ export default Vue.extend({
justify-content center justify-content center
margin 0 auto margin 0 auto
max-width 600px max-width 600px
border-bottom solid 1px rgba(0, 0, 0, 0.2) border-bottom solid 1px rgba(#000, 0.2)
> span > span
display block display block
@ -97,7 +97,7 @@ export default Vue.extend({
font-size 12px font-size 12px
line-height 1 line-height 1
color #fff color #fff
background rgba(0, 0, 0, 0.3) background rgba(#000, 0.3)
border-radius 20px border-radius 20px
> .users > .users
@ -106,14 +106,14 @@ export default Vue.extend({
width calc(100% - 16px) width calc(100% - 16px)
background #fff background #fff
border-radius 8px border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) box-shadow 0 0 0 1px rgba(#000, 0.2)
@media (min-width 500px) @media (min-width 500px)
margin 16px auto margin 16px auto
width calc(100% - 32px) width calc(100% - 32px)
> * > *
border-bottom solid 1px rgba(0, 0, 0, 0.05) border-bottom solid 1px rgba(#000, 0.05)
> .no > .no
margin 0 margin 0

2
src/client/app/mobile/views/components/widget-container.vue
View file

@ -28,7 +28,7 @@ export default Vue.extend({
.mk-widget-container .mk-widget-container
background #eee background #eee
border-radius 8px border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) box-shadow 0 0 0 1px rgba(#000, 0.2)
overflow hidden overflow hidden
&.hideHeader &.hideHeader

2
src/client/app/mobile/views/pages/home.vue
View file

@ -121,7 +121,7 @@ root(isDark)
margin 0 auto margin 0 auto
background isDark ? #272f3a : #fff background isDark ? #272f3a : #fff
border-radius 8px border-radius 8px
box-shadow 0 0 16px rgba(0, 0, 0, 0.1) box-shadow 0 0 16px rgba(#000, 0.1)
$balloon-size = 16px $balloon-size = 16px

4
src/client/app/mobile/views/pages/profile-setting.vue
View file

@ -136,7 +136,7 @@ export default Vue.extend({
.form .form
position relative position relative
background #fff background #fff
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) box-shadow 0 0 0 1px rgba(#000, 0.2)
border-radius 8px border-radius 8px
&:before &:before
@ -145,7 +145,7 @@ export default Vue.extend({
position absolute position absolute
bottom -20px bottom -20px
left calc(50% - 10px) left calc(50% - 10px)
border-top solid 10px rgba(0, 0, 0, 0.2) border-top solid 10px rgba(#000, 0.2)
border-right solid 10px transparent border-right solid 10px transparent
border-bottom solid 10px transparent border-bottom solid 10px transparent
border-left solid 10px transparent border-left solid 10px transparent

2
src/client/app/mobile/views/pages/search.vue
View file

@ -84,7 +84,7 @@ export default Vue.extend({
width calc(100% - 16px) width calc(100% - 16px)
background #fff background #fff
border-radius 8px border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) box-shadow 0 0 0 1px rgba(#000, 0.2)
@media (min-width 500px) @media (min-width 500px)
margin 16px auto margin 16px auto

2
src/client/app/mobile/views/pages/selectdrive.vue
View file

@ -62,7 +62,7 @@ export default Vue.extend({
width 100% width 100%
z-index 1000 z-index 1000
background #fff background #fff
box-shadow 0 1px rgba(0, 0, 0, 0.1) box-shadow 0 1px rgba(#000, 0.1)
> h1 > h1
margin 0 margin 0

4
src/client/app/mobile/views/pages/settings.vue
View file

@ -62,7 +62,7 @@ export default Vue.extend({
width calc(100% - 32px) width calc(100% - 32px)
list-style none list-style none
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.2) border solid 1px rgba(#000, 0.2)
border-radius $radius border-radius $radius
> li > li
@ -70,7 +70,7 @@ export default Vue.extend({
border-bottom solid 1px #ddd border-bottom solid 1px #ddd
&:hover &:hover
background rgba(0, 0, 0, 0.1) background rgba(#000, 0.1)
&:first-child &:first-child
border-top-left-radius $radius border-top-left-radius $radius

2
src/client/app/mobile/views/pages/signup.vue
View file

@ -40,7 +40,7 @@ export default Vue.extend({
.form .form
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.2) border solid 1px rgba(#000, 0.2)
border-radius 8px border-radius 8px
overflow hidden overflow hidden

8
src/client/app/mobile/views/pages/welcome.vue
View file

@ -108,7 +108,7 @@ export default Vue.extend({
.form .form
margin-bottom 16px margin-bottom 16px
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.2) border solid 1px rgba(#000, 0.2)
border-radius 8px border-radius 8px
overflow hidden overflow hidden
@ -131,7 +131,7 @@ export default Vue.extend({
margin 0 0 16px 0 margin 0 0 16px 0
width 100% width 100%
font-size 1em font-size 1em
color rgba(0, 0, 0, 0.7) color rgba(#000, 0.7)
background #fff background #fff
outline none outline none
border solid 1px #ddd border solid 1px #ddd
@ -156,7 +156,7 @@ export default Vue.extend({
background-color #767676 background-color #767676
background-image none background-image none
border-color #444 border-color #444
box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2) box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
> div > div
padding 16px padding 16px
@ -164,7 +164,7 @@ export default Vue.extend({
> .tl > .tl
background #fff background #fff
border solid 1px rgba(0, 0, 0, 0.2) border solid 1px rgba(#000, 0.2)
border-radius 8px border-radius 8px
overflow hidden overflow hidden

6
src/client/app/mobile/views/widgets/profile.vue
View file

@ -34,7 +34,7 @@ export default define({
display block display block
width 100% width 100%
height 100% height 100%
background rgba(0, 0, 0, 0.5) background rgba(#000, 0.5)
.avatar .avatar
display block display block
@ -47,7 +47,7 @@ export default define({
left ((100px - 58px) / 2) left ((100px - 58px) / 2)
border none border none
border-radius 100% border-radius 100%
box-shadow 0 0 16px rgba(0, 0, 0, 0.5) box-shadow 0 0 16px rgba(#000, 0.5)
.name .name
display block display block
@ -58,6 +58,6 @@ export default define({
line-height 100px line-height 100px
color #fff color #fff
font-weight bold font-weight bold
text-shadow 0 0 8px rgba(0, 0, 0, 0.5) text-shadow 0 0 8px rgba(#000, 0.5)
</style> </style>

4
src/renderers/get-note-summary.ts
View file

@ -3,6 +3,10 @@
* @param {*} note 投稿 * @param {*} note 投稿
*/ */
const summarize = (note: any): string => { const summarize = (note: any): string => {
if (note.isHidden) {
return '(非公開の投稿)';
}
let summary = ''; let summary = '';
// チャンネル // チャンネル