From f2874d778a089c9825360857a4f2363f4aff2e45 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sun, 29 Apr 2018 08:51:17 +0900 Subject: [PATCH] wip --- src/client/app/auth/views/form.vue | 4 +- src/client/app/auth/views/index.vue | 2 +- .../common/views/components/autocomplete.vue | 12 +- .../components/messaging-room.message.vue | 8 +- .../views/components/messaging-room.vue | 16 +-- .../app/common/views/components/messaging.vue | 18 +-- .../app/common/views/components/note-menu.vue | 2 +- .../app/common/views/components/poll.vue | 4 +- .../app/common/views/components/signin.vue | 4 +- .../app/common/views/components/signup.vue | 4 +- .../views/components/stream-indicator.vue | 2 +- .../views/components/visibility-chooser.vue | 18 ++- .../views/components/welcome-timeline.vue | 2 +- .../app/common/views/widgets/access-log.vue | 2 +- .../app/common/views/widgets/calendar.vue | 4 +- .../app/common/views/widgets/donation.vue | 2 +- src/client/app/common/views/widgets/rss.vue | 2 +- .../app/common/views/widgets/server.pie.vue | 4 +- .../app/common/views/widgets/slideshow.vue | 4 +- .../views/components/activity.calendar.vue | 2 +- .../app/desktop/views/components/calendar.vue | 12 +- .../views/components/context-menu.menu.vue | 2 +- .../desktop/views/components/context-menu.vue | 2 +- .../app/desktop/views/components/dialog.vue | 2 +- .../desktop/views/components/drive.file.vue | 4 +- .../app/desktop/views/components/drive.vue | 4 +- .../views/components/ellipsis-icon.vue | 2 +- .../app/desktop/views/components/home.vue | 2 +- .../views/components/media-image-dialog.vue | 2 +- .../views/components/media-video-dialog.vue | 2 +- .../app/desktop/views/components/mentions.vue | 2 +- .../views/components/note-detail.sub.vue | 1 + .../desktop/views/components/note-detail.vue | 3 +- .../desktop/views/components/notes.note.vue | 2 +- .../views/components/notifications.vue | 16 +-- .../desktop/views/components/post-form.vue | 3 +- .../app/desktop/views/components/timeline.vue | 2 +- .../views/components/ui.header.account.vue | 4 +- .../components/ui.header.notifications.vue | 4 +- .../views/components/ui.header.search.vue | 4 +- .../desktop/views/components/ui.header.vue | 2 +- .../desktop/views/components/user-preview.vue | 2 +- .../desktop/views/components/users-list.vue | 2 +- .../views/components/widget-container.vue | 4 +- .../app/desktop/views/components/window.vue | 26 ++-- src/client/app/desktop/views/pages/search.vue | 2 +- .../pages/user/user.followers-you-know.vue | 4 +- .../desktop/views/pages/user/user.friends.vue | 4 +- .../desktop/views/pages/user/user.header.vue | 6 +- .../desktop/views/pages/user/user.home.vue | 4 +- .../desktop/views/pages/user/user.photos.vue | 4 +- .../desktop/views/pages/user/user.profile.vue | 2 +- .../app/desktop/views/pages/welcome.vue | 4 +- .../app/desktop/views/widgets/channel.vue | 4 +- .../app/desktop/views/widgets/post-form.vue | 4 +- .../app/desktop/views/widgets/profile.vue | 8 +- .../views/components/drive-file-chooser.vue | 2 +- .../views/components/drive-folder-chooser.vue | 2 +- .../views/components/drive.file-detail.vue | 4 +- .../app/mobile/views/components/drive.vue | 6 +- .../mobile/views/components/friends-maker.vue | 2 +- .../mobile/views/components/note-detail.vue | 1 + .../mobile/views/components/notifications.vue | 7 +- .../app/mobile/views/components/post-form.vue | 114 +++++++++++++----- .../mobile/views/components/users-list.vue | 8 +- .../views/components/widget-container.vue | 2 +- src/client/app/mobile/views/pages/home.vue | 2 +- .../mobile/views/pages/profile-setting.vue | 4 +- src/client/app/mobile/views/pages/search.vue | 2 +- .../app/mobile/views/pages/selectdrive.vue | 2 +- .../app/mobile/views/pages/settings.vue | 4 +- src/client/app/mobile/views/pages/signup.vue | 2 +- src/client/app/mobile/views/pages/welcome.vue | 8 +- .../app/mobile/views/widgets/profile.vue | 6 +- src/renderers/get-note-summary.ts | 4 + 75 files changed, 265 insertions(+), 190 deletions(-) diff --git a/src/client/app/auth/views/form.vue b/src/client/app/auth/views/form.vue index b323907eb..152b90042 100644 --- a/src/client/app/auth/views/form.vue +++ b/src/client/app/auth/views/form.vue @@ -94,13 +94,13 @@ export default Vue.extend({ margin 0 auto -38px auto border solid 5px #fff border-radius 100% - box-shadow 0 2px 2px rgba(0, 0, 0, 0.1) + box-shadow 0 2px 2px rgba(#000, 0.1) > .app padding 44px 16px 0 16px color #555 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 content '' diff --git a/src/client/app/auth/views/index.vue b/src/client/app/auth/views/index.vue index e1e1b265e..0fcd9bfe5 100644 --- a/src/client/app/auth/views/index.vue +++ b/src/client/app/auth/views/index.vue @@ -94,7 +94,7 @@ export default Vue.extend({ margin 0 auto text-align center background #fff - box-shadow 0px 4px 16px rgba(0, 0, 0, 0.2) + box-shadow 0px 4px 16px rgba(#000, 0.2) > .fetching margin 0 diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue index 5c8f61a2a..84173d20b 100644 --- a/src/client/app/common/views/components/autocomplete.vue +++ b/src/client/app/common/views/components/autocomplete.vue @@ -234,7 +234,7 @@ export default Vue.extend({ margin-top calc(1em + 8px) overflow hidden background #fff - border solid 1px rgba(0, 0, 0, 0.1) + border solid 1px rgba(#000, 0.1) border-radius 4px transition top 0.1s ease, left 0.1s ease @@ -253,7 +253,7 @@ export default Vue.extend({ white-space nowrap overflow hidden font-size 0.9em - color rgba(0, 0, 0, 0.8) + color rgba(#000, 0.8) cursor default &, * @@ -285,10 +285,10 @@ export default Vue.extend({ .name margin 0 8px 0 0 - color rgba(0, 0, 0, 0.8) + color rgba(#000, 0.8) .username - color rgba(0, 0, 0, 0.3) + color rgba(#000, 0.3) > .emojis > li @@ -298,10 +298,10 @@ export default Vue.extend({ width 24px .name - color rgba(0, 0, 0, 0.8) + color rgba(#000, 0.8) .alias margin 0 0 0 8px - color rgba(0, 0, 0, 0.3) + color rgba(#000, 0.3) </style> diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue index afd700e77..70df899f5 100644 --- a/src/client/app/common/views/components/messaging-room.message.vue +++ b/src/client/app/common/views/components/messaging-room.message.vue @@ -134,7 +134,7 @@ export default Vue.extend({ bottom -4px left -12px margin 0 - color rgba(0, 0, 0, 0.5) + color rgba(#000, 0.5) font-size 11px > .content @@ -146,7 +146,7 @@ export default Vue.extend({ overflow hidden overflow-wrap break-word font-size 1em - color rgba(0, 0, 0, 0.5) + color rgba(#000, 0.5) > .text display block @@ -155,7 +155,7 @@ export default Vue.extend({ overflow hidden overflow-wrap break-word font-size 1em - color rgba(0, 0, 0, 0.8) + color rgba(#000, 0.8) & + .file > a @@ -195,7 +195,7 @@ export default Vue.extend({ display block margin 2px 0 0 0 font-size 10px - color rgba(0, 0, 0, 0.4) + color rgba(#000, 0.4) > [data-fa] margin-left 4px diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue index 38202d758..a45114e6b 100644 --- a/src/client/app/common/views/components/messaging-room.vue +++ b/src/client/app/common/views/components/messaging-room.vue @@ -256,7 +256,7 @@ export default Vue.extend({ padding 16px 8px 8px 8px text-align center font-size 0.8em - color rgba(0, 0, 0, 0.4) + color rgba(#000, 0.4) [data-fa] margin-right 4px @@ -267,7 +267,7 @@ export default Vue.extend({ padding 16px 8px 8px 8px text-align center font-size 0.8em - color rgba(0, 0, 0, 0.4) + color rgba(#000, 0.4) [data-fa] margin-right 4px @@ -278,7 +278,7 @@ export default Vue.extend({ padding 16px text-align center font-size 0.8em - color rgba(0, 0, 0, 0.4) + color rgba(#000, 0.4) [data-fa] margin-right 4px @@ -289,14 +289,14 @@ export default Vue.extend({ padding 0 12px line-height 24px color #fff - background rgba(0, 0, 0, 0.3) + background rgba(#000, 0.3) border-radius 12px &:hover - background rgba(0, 0, 0, 0.4) + background rgba(#000, 0.4) &:active - background rgba(0, 0, 0, 0.5) + background rgba(#000, 0.5) &.fetching cursor wait @@ -322,7 +322,7 @@ export default Vue.extend({ left 0 right 0 margin 0 auto - background rgba(0, 0, 0, 0.1) + background rgba(#000, 0.1) > span display inline-block @@ -330,7 +330,7 @@ export default Vue.extend({ padding 0 16px //font-weight bold line-height 32px - color rgba(0, 0, 0, 0.3) + color rgba(#000, 0.3) background #fff > footer diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue index 6f799b34b..6f8fcb3a7 100644 --- a/src/client/app/common/views/components/messaging.vue +++ b/src/client/app/common/views/components/messaging.vue @@ -205,7 +205,7 @@ root(isDark) z-index 1 width 100% background #fff - box-shadow 0 0px 2px rgba(0, 0, 0, 0.2) + box-shadow 0 0px 2px rgba(#000, 0.2) > .form padding 8px @@ -279,7 +279,7 @@ root(isDark) vertical-align top white-space nowrap overflow hidden - color rgba(0, 0, 0, 0.8) + color rgba(#000, 0.8) text-decoration none transition none cursor pointer @@ -318,11 +318,11 @@ root(isDark) margin 0 8px 0 0 /*font-weight bold*/ font-weight normal - color rgba(0, 0, 0, 0.8) + color rgba(#000, 0.8) .username font-weight normal - color rgba(0, 0, 0, 0.3) + color rgba(#000, 0.3) > .history @@ -383,17 +383,17 @@ root(isDark) overflow hidden text-overflow ellipsis font-size 1em - color isDark ? #fff : rgba(0, 0, 0, 0.9) + color isDark ? #fff : rgba(#000, 0.9) font-weight bold transition all 0.1s ease > .username margin 0 8px - color isDark ? #606984 : rgba(0, 0, 0, 0.5) + color isDark ? #606984 : rgba(#000, 0.5) > .mk-time margin 0 0 0 auto - color isDark ? #606984 : rgba(0, 0, 0, 0.5) + color isDark ? #606984 : rgba(#000, 0.5) font-size 80% > .avatar @@ -413,10 +413,10 @@ root(isDark) overflow hidden overflow-wrap break-word font-size 1.1em - color isDark ? #fff : rgba(0, 0, 0, 0.8) + color isDark ? #fff : rgba(#000, 0.8) .me - color isDark ? rgba(#fff, 0.7) : rgba(0, 0, 0, 0.4) + color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4) > .image display block diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue index 3e4be425d..88dc22aaf 100644 --- a/src/client/app/common/views/components/note-menu.vue +++ b/src/client/app/common/views/components/note-menu.vue @@ -105,7 +105,7 @@ $border-color = rgba(27, 31, 35, 0.15) z-index 10000 width 100% height 100% - background rgba(0, 0, 0, 0.1) + background rgba(#000, 0.1) opacity 0 > .popover diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue index de4373f56..46e41cbcd 100644 --- a/src/client/app/common/views/components/poll.vue +++ b/src/client/app/common/views/components/poll.vue @@ -88,10 +88,10 @@ root(isDark) cursor pointer &:hover - background rgba(0, 0, 0, 0.05) + background rgba(#000, 0.05) &:active - background rgba(0, 0, 0, 0.1) + background rgba(#000, 0.1) > .backdrop position absolute diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue index 25f90a2f1..7fb9fc3fd 100644 --- a/src/client/app/common/views/components/signin.vue +++ b/src/client/app/common/views/components/signin.vue @@ -91,7 +91,7 @@ export default Vue.extend({ width 100% line-height 44px font-size 1em - color rgba(0, 0, 0, 0.7) + color rgba(#000, 0.7) background #fff outline none border solid 1px #eee @@ -117,7 +117,7 @@ export default Vue.extend({ margin -6px 0 0 0 width 100% font-size 1.2em - color rgba(0, 0, 0, 0.5) + color rgba(#000, 0.5) outline none border none border-radius 0 diff --git a/src/client/app/common/views/components/signup.vue b/src/client/app/common/views/components/signup.vue index 33a559ff8..516979acd 100644 --- a/src/client/app/common/views/components/signup.vue +++ b/src/client/app/common/views/components/signup.vue @@ -234,13 +234,13 @@ export default Vue.extend({ color #333 !important background #fff !important outline none - border solid 1px rgba(0, 0, 0, 0.1) + border solid 1px rgba(#000, 0.1) border-radius 4px box-shadow 0 0 0 114514px #fff inset transition all .3s ease &:hover - border-color rgba(0, 0, 0, 0.2) + border-color rgba(#000, 0.2) transition all .1s ease &:focus diff --git a/src/client/app/common/views/components/stream-indicator.vue b/src/client/app/common/views/components/stream-indicator.vue index 93758102d..d573db32e 100644 --- a/src/client/app/common/views/components/stream-indicator.vue +++ b/src/client/app/common/views/components/stream-indicator.vue @@ -73,7 +73,7 @@ export default Vue.extend({ padding 6px 12px font-size 0.9em color #fff - background rgba(0, 0, 0, 0.8) + background rgba(#000, 0.8) border-radius 4px > p diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue index dd36d32e7..50f0877ae 100644 --- a/src/client/app/common/views/components/visibility-chooser.vue +++ b/src/client/app/common/views/components/visibility-chooser.vue @@ -53,18 +53,28 @@ export default Vue.extend({ const width = popover.offsetWidth; const height = popover.offsetHeight; + let left; + let top; + if (this.compact) { const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2); - popover.style.left = (x - (width / 2)) + 'px'; - popover.style.top = (y - (height / 2)) + 'px'; + left = (x - (width / 2)); + top = (y - (height / 2)); } else { const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); const y = rect.top + window.pageYOffset + this.source.offsetHeight; - popover.style.left = (x - (width / 2)) + 'px'; - popover.style.top = y + 'px'; + left = (x - (width / 2)); + top = y; } + if (left + width > window.innerWidth) { + left = window.innerWidth - width; + } + + popover.style.left = left + 'px'; + popover.style.top = top + 'px'; + anime({ targets: this.$refs.backdrop, opacity: 1, diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue index a80bc04f7..349797690 100644 --- a/src/client/app/common/views/components/welcome-timeline.vue +++ b/src/client/app/common/views/components/welcome-timeline.vue @@ -62,7 +62,7 @@ export default Vue.extend({ overflow-wrap break-word font-size .9em color #4C4C4C - border-bottom 1px solid rgba(0, 0, 0, 0.05) + border-bottom 1px solid rgba(#000, 0.05) &:after content "" diff --git a/src/client/app/common/views/widgets/access-log.vue b/src/client/app/common/views/widgets/access-log.vue index 637ba328c..0b1c7fe2d 100644 --- a/src/client/app/common/views/widgets/access-log.vue +++ b/src/client/app/common/views/widgets/access-log.vue @@ -78,7 +78,7 @@ export default define({ color #555 &:nth-child(odd) - background rgba(0, 0, 0, 0.025) + background rgba(#000, 0.025) > b margin-right 4px diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue index b3b5b3583..0bb503759 100644 --- a/src/client/app/common/views/widgets/calendar.vue +++ b/src/client/app/common/views/widgets/calendar.vue @@ -113,7 +113,7 @@ root(isDark) padding 16px 0 color isDark ? #c5ced6 :#777 background isDark ? #282C37 : #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px &[data-special='on-new-years-day'] @@ -126,7 +126,7 @@ root(isDark) &[data-mobile] border none 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 content "" diff --git a/src/client/app/common/views/widgets/donation.vue b/src/client/app/common/views/widgets/donation.vue index 1063c2c27..e35462611 100644 --- a/src/client/app/common/views/widgets/donation.vue +++ b/src/client/app/common/views/widgets/donation.vue @@ -46,7 +46,7 @@ root(isDark) border none background #ead8bb 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 > h1 diff --git a/src/client/app/common/views/widgets/rss.vue b/src/client/app/common/views/widgets/rss.vue index 1a6336252..f0ba11678 100644 --- a/src/client/app/common/views/widgets/rss.vue +++ b/src/client/app/common/views/widgets/rss.vue @@ -92,7 +92,7 @@ root(isDark) padding 8px 16px &:nth-child(even) - background rgba(0, 0, 0, 0.05) + background rgba(#000, 0.05) .mkw-rss[data-darkmode] root(true) diff --git a/src/client/app/common/views/widgets/server.pie.vue b/src/client/app/common/views/widgets/server.pie.vue index 16859fe07..532041ae7 100644 --- a/src/client/app/common/views/widgets/server.pie.vue +++ b/src/client/app/common/views/widgets/server.pie.vue @@ -5,7 +5,7 @@ cx="50%" cy="50%" fill="none" stroke-width="0.1" - stroke="rgba(0, 0, 0, 0.05)"/> + stroke="rgba(#000, 0.05)"/> <circle :r="r" cx="50%" cy="50%" @@ -56,7 +56,7 @@ root(isDark) > text 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] root(true) diff --git a/src/client/app/common/views/widgets/slideshow.vue b/src/client/app/common/views/widgets/slideshow.vue index ad32299f3..95be4b94f 100644 --- a/src/client/app/common/views/widgets/slideshow.vue +++ b/src/client/app/common/views/widgets/slideshow.vue @@ -122,13 +122,13 @@ export default define({ .mkw-slideshow overflow hidden background #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px &[data-mobile] border none 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 width 100% diff --git a/src/client/app/desktop/views/components/activity.calendar.vue b/src/client/app/desktop/views/components/activity.calendar.vue index 8b43536c2..e48857107 100644 --- a/src/client/app/desktop/views/components/activity.calendar.vue +++ b/src/client/app/desktop/views/components/activity.calendar.vue @@ -61,6 +61,6 @@ svg &.day &:hover - fill rgba(0, 0, 0, 0.05) + fill rgba(#000, 0.05) </style> diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue index 483a4c718..1d8cc4f3a 100644 --- a/src/client/app/desktop/views/components/calendar.vue +++ b/src/client/app/desktop/views/components/calendar.vue @@ -136,7 +136,7 @@ export default Vue.extend({ root(isDark) color isDark ? #c5ced6 : #777 background isDark ? #282C37 : #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px &[data-melt] @@ -152,7 +152,7 @@ root(isDark) font-size 0.9em font-weight bold color #888 - box-shadow 0 1px rgba(0, 0, 0, 0.07) + box-shadow 0 1px rgba(#000, 0.07) > [data-fa] margin-right 4px @@ -214,10 +214,10 @@ root(isDark) border-radius 6px &:hover > div - background rgba(0, 0, 0, 0.025) + background rgba(#000, 0.025) &:active > div - background rgba(0, 0, 0, 0.05) + background rgba(#000, 0.05) &[data-is-donichi] color #ef95a0 @@ -233,10 +233,10 @@ root(isDark) font-weight bold > div - background rgba(0, 0, 0, 0.025) + background rgba(#000, 0.025) &:active > div - background rgba(0, 0, 0, 0.05) + background rgba(#000, 0.05) &[data-today] > div diff --git a/src/client/app/desktop/views/components/context-menu.menu.vue b/src/client/app/desktop/views/components/context-menu.menu.vue index 3d884e0b8..843604a05 100644 --- a/src/client/app/desktop/views/components/context-menu.menu.vue +++ b/src/client/app/desktop/views/components/context-menu.menu.vue @@ -106,7 +106,7 @@ root(isDark) width $width background isDark ? #282c37 :#fff 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 .menu[data-darkmode] diff --git a/src/client/app/desktop/views/components/context-menu.vue b/src/client/app/desktop/views/components/context-menu.vue index d7548c441..60a33f9c9 100644 --- a/src/client/app/desktop/views/components/context-menu.vue +++ b/src/client/app/desktop/views/components/context-menu.vue @@ -68,7 +68,7 @@ root(isDark) font-size 0.8em background isDark ? #282c37 : #fff 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 .context-menu[data-darkmode] diff --git a/src/client/app/desktop/views/components/dialog.vue b/src/client/app/desktop/views/components/dialog.vue index fa17e4a9d..aff21c175 100644 --- a/src/client/app/desktop/views/components/dialog.vue +++ b/src/client/app/desktop/views/components/dialog.vue @@ -102,7 +102,7 @@ export default Vue.extend({ left 0 width 100% height 100% - background rgba(0, 0, 0, 0.7) + background rgba(#000, 0.7) opacity 0 pointer-events none diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue index a683af68a..39881711f 100644 --- a/src/client/app/desktop/views/components/drive.file.vue +++ b/src/client/app/desktop/views/components/drive.file.vue @@ -195,7 +195,7 @@ root(isDark) cursor pointer &:hover - background rgba(0, 0, 0, 0.05) + background rgba(#000, 0.05) > .label &:before @@ -203,7 +203,7 @@ root(isDark) background #0b65a5 &:active - background rgba(0, 0, 0, 0.1) + background rgba(#000, 0.1) > .label &:before diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue index aebface11..973df1014 100644 --- a/src/client/app/desktop/views/components/drive.vue +++ b/src/client/app/desktop/views/components/drive.vue @@ -587,7 +587,7 @@ root(isDark) font-size 0.9em color isDark ? #d2d9dc : #555 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 @@ -733,7 +733,7 @@ root(isDark) display inline-block position absolute top 0 - background-color rgba(0, 0, 0, 0.3) + background-color rgba(#000, 0.3) border-radius 100% animation sk-bounce 2.0s infinite ease-in-out diff --git a/src/client/app/desktop/views/components/ellipsis-icon.vue b/src/client/app/desktop/views/components/ellipsis-icon.vue index c54a7db29..4a5a0f23d 100644 --- a/src/client/app/desktop/views/components/ellipsis-icon.vue +++ b/src/client/app/desktop/views/components/ellipsis-icon.vue @@ -14,7 +14,7 @@ display inline-block width 18px height 18px - background-color rgba(0, 0, 0, 0.3) + background-color rgba(#000, 0.3) border-radius 100% animation bounce 1.4s infinite ease-in-out both diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue index 5c5b46217..4343a7fb7 100644 --- a/src/client/app/desktop/views/components/home.vue +++ b/src/client/app/desktop/views/components/home.vue @@ -251,7 +251,7 @@ root(isDark) height 48px color isDark ? #fff : #000 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 display block diff --git a/src/client/app/desktop/views/components/media-image-dialog.vue b/src/client/app/desktop/views/components/media-image-dialog.vue index dec140d1c..026522d90 100644 --- a/src/client/app/desktop/views/components/media-image-dialog.vue +++ b/src/client/app/desktop/views/components/media-image-dialog.vue @@ -52,7 +52,7 @@ export default Vue.extend({ left 0 width 100% height 100% - background rgba(0, 0, 0, 0.7) + background rgba(#000, 0.7) > img position fixed diff --git a/src/client/app/desktop/views/components/media-video-dialog.vue b/src/client/app/desktop/views/components/media-video-dialog.vue index cbf862cd1..959cefa42 100644 --- a/src/client/app/desktop/views/components/media-video-dialog.vue +++ b/src/client/app/desktop/views/components/media-video-dialog.vue @@ -54,7 +54,7 @@ export default Vue.extend({ left 0 width 100% height 100% - background rgba(0, 0, 0, 0.7) + background rgba(#000, 0.7) > video position fixed diff --git a/src/client/app/desktop/views/components/mentions.vue b/src/client/app/desktop/views/components/mentions.vue index 53d08a0ec..66bdab5c0 100644 --- a/src/client/app/desktop/views/components/mentions.vue +++ b/src/client/app/desktop/views/components/mentions.vue @@ -85,7 +85,7 @@ export default Vue.extend({ .mk-mentions background #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px > header diff --git a/src/client/app/desktop/views/components/note-detail.sub.vue b/src/client/app/desktop/views/components/note-detail.sub.vue index fb3342130..5175c8bd4 100644 --- a/src/client/app/desktop/views/components/note-detail.sub.vue +++ b/src/client/app/desktop/views/components/note-detail.sub.vue @@ -17,6 +17,7 @@ </header> <div class="body"> <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"/> </div> <div class="media" v-if="note.mediaIds.length > 0"> diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue index eb12ea109..525023349 100644 --- a/src/client/app/desktop/views/components/note-detail.vue +++ b/src/client/app/desktop/views/components/note-detail.vue @@ -39,6 +39,7 @@ </header> <div class="body"> <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"/> </div> <div class="media" v-if="p.media.length > 0"> @@ -222,7 +223,7 @@ root(isDark) overflow hidden text-align left background isDark ? #282C37 : #fff - border solid 1px rgba(0, 0, 0, 0.1) + border solid 1px rgba(#000, 0.1) border-radius 8px > .read-more diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue index e8fabe3c6..4d7e6ee8b 100644 --- a/src/client/app/desktop/views/components/notes.note.vue +++ b/src/client/app/desktop/views/components/notes.note.vue @@ -607,7 +607,7 @@ root(isDark) > .detail padding-top 4px - background rgba(0, 0, 0, 0.0125) + background rgba(#000, 0.0125) .note[data-darkmode] root(true) diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue index 47463b8b5..36e9dce6a 100644 --- a/src/client/app/desktop/views/components/notifications.vue +++ b/src/client/app/desktop/views/components/notifications.vue @@ -204,7 +204,7 @@ root(isDark) padding 16px overflow-wrap break-word 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 border-bottom none @@ -215,7 +215,7 @@ root(isDark) top 16px right 12px vertical-align top - color isDark ? #606984 : rgba(0, 0, 0, 0.6) + color isDark ? #606984 : rgba(#000, 0.6) font-size small &:after @@ -250,10 +250,10 @@ root(isDark) margin-right 4px .note-preview - color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7) + color isDark ? #c2cad4 : rgba(#000, 0.7) .note-ref - color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7) + color isDark ? #c2cad4 : rgba(#000, 0.7) [data-fa] font-size 1em @@ -282,7 +282,7 @@ root(isDark) font-size 0.8em color isDark ? #666b79 : #aaa 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 margin 0 16px @@ -295,13 +295,13 @@ root(isDark) width 100% padding 16px color #555 - border-top solid 1px rgba(0, 0, 0, 0.05) + border-top solid 1px rgba(#000, 0.05) &:hover - background rgba(0, 0, 0, 0.025) + background rgba(#000, 0.025) &:active - background rgba(0, 0, 0, 0.05) + background rgba(#000, 0.05) &.fetching cursor wait diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue index d704cdc3c..92a7f9ada 100644 --- a/src/client/app/desktop/views/components/post-form.vue +++ b/src/client/app/desktop/views/components/post-form.vue @@ -364,7 +364,6 @@ root(isDark) clear both > .content - > input > textarea display block @@ -585,7 +584,7 @@ root(isDark) color rgba($theme-color, 0.6) background isDark ? transparent : linear-gradient(to bottom, lighten($theme-color, 80%) 0%, lighten($theme-color, 90%) 100%) 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 &:after diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue index 2047b5dce..bcfce299f 100644 --- a/src/client/app/desktop/views/components/timeline.vue +++ b/src/client/app/desktop/views/components/timeline.vue @@ -59,7 +59,7 @@ export default Vue.extend({ root(isDark) background isDark ? #282C37 : #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px > header diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue index 5148c5b96..145666b4b 100644 --- a/src/client/app/desktop/views/components/ui.header.account.vue +++ b/src/client/app/desktop/views/components/ui.header.account.vue @@ -165,7 +165,7 @@ root(isDark) font-size 0.8em background $bgcolor border-radius 4px - box-shadow 0 1px 4px rgba(0, 0, 0, 0.25) + box-shadow 0 1px 4px rgba(#000, 0.25) &:before content "" @@ -176,7 +176,7 @@ root(isDark) right 12px border-top 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 &:after diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue index 5326f9283..ea814dd7a 100644 --- a/src/client/app/desktop/views/components/ui.header.notifications.vue +++ b/src/client/app/desktop/views/components/ui.header.notifications.vue @@ -125,7 +125,7 @@ root(isDark) width 300px background $bgcolor border-radius 4px - box-shadow 0 1px 4px rgba(0, 0, 0, 0.25) + box-shadow 0 1px 4px rgba(#000, 0.25) &:before content "" @@ -136,7 +136,7 @@ root(isDark) right 74px border-top 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 &:after diff --git a/src/client/app/desktop/views/components/ui.header.search.vue b/src/client/app/desktop/views/components/ui.header.search.vue index 3167aab8a..1ed28ba3a 100644 --- a/src/client/app/desktop/views/components/ui.header.search.vue +++ b/src/client/app/desktop/views/components/ui.header.search.vue @@ -50,7 +50,7 @@ export default Vue.extend({ width 14em height 32px font-size 1em - background rgba(0, 0, 0, 0.05) + background rgba(#000, 0.05) outline none //border solid 1px #ddd border none @@ -62,7 +62,7 @@ export default Vue.extend({ color #9eaba8 &:hover - background rgba(0, 0, 0, 0.08) + background rgba(#000, 0.08) &:focus box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue index 7ce85d4c3..353fd5856 100644 --- a/src/client/app/desktop/views/components/ui.header.vue +++ b/src/client/app/desktop/views/components/ui.header.vue @@ -103,7 +103,7 @@ root(isDark) top 0 z-index 1000 width 100% - box-shadow 0 1px 1px rgba(0, 0, 0, 0.075) + box-shadow 0 1px 1px rgba(#000, 0.075) > .main height 48px diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue index 2e1870800..d0111d7dc 100644 --- a/src/client/app/desktop/views/components/user-preview.vue +++ b/src/client/app/desktop/views/components/user-preview.vue @@ -94,7 +94,7 @@ root(isDark) width 250px background isDark ? #282c37 : #fff background-clip content-box - border solid 1px rgba(0, 0, 0, 0.1) + border solid 1px rgba(#000, 0.1) border-radius 4px overflow hidden opacity 0 diff --git a/src/client/app/desktop/views/components/users-list.vue b/src/client/app/desktop/views/components/users-list.vue index e8f4c94d4..13d0d07bb 100644 --- a/src/client/app/desktop/views/components/users-list.vue +++ b/src/client/app/desktop/views/components/users-list.vue @@ -119,7 +119,7 @@ export default Vue.extend({ overflow auto > * - border-bottom solid 1px rgba(0, 0, 0, 0.05) + border-bottom solid 1px rgba(#000, 0.05) > * max-width 600px diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue index 926d7702b..2edba5a23 100644 --- a/src/client/app/desktop/views/components/widget-container.vue +++ b/src/client/app/desktop/views/components/widget-container.vue @@ -36,7 +36,7 @@ export default Vue.extend({ <style lang="stylus" scoped> root(isDark) background isDark ? #282C37 : #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px overflow hidden @@ -55,7 +55,7 @@ root(isDark) font-size 0.9em font-weight bold color isDark ? #e3e5e8 : #888 - box-shadow 0 1px rgba(0, 0, 0, 0.07) + box-shadow 0 1px rgba(#000, 0.07) > [data-fa] margin-right 6px diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue index 3de1413ac..c9820f869 100644 --- a/src/client/app/desktop/views/components/window.vue +++ b/src/client/app/desktop/views/components/window.vue @@ -17,14 +17,16 @@ <slot></slot> </div> </div> - <div class="handle top" v-if="canResize" @mousedown.prevent="onTopHandleMousedown"></div> - <div class="handle right" v-if="canResize" @mousedown.prevent="onRightHandleMousedown"></div> - <div class="handle bottom" v-if="canResize" @mousedown.prevent="onBottomHandleMousedown"></div> - <div class="handle left" v-if="canResize" @mousedown.prevent="onLeftHandleMousedown"></div> - <div class="handle top-left" v-if="canResize" @mousedown.prevent="onTopLeftHandleMousedown"></div> - <div class="handle top-right" v-if="canResize" @mousedown.prevent="onTopRightHandleMousedown"></div> - <div class="handle bottom-right" v-if="canResize" @mousedown.prevent="onBottomRightHandleMousedown"></div> - <div class="handle bottom-left" v-if="canResize" @mousedown.prevent="onBottomLeftHandleMousedown"></div> + <template v-if="canResize"> + <div class="handle top" @mousedown.prevent="onTopHandleMousedown"></div> + <div class="handle right" @mousedown.prevent="onRightHandleMousedown"></div> + <div class="handle bottom" @mousedown.prevent="onBottomHandleMousedown"></div> + <div class="handle left" @mousedown.prevent="onLeftHandleMousedown"></div> + <div class="handle top-left" @mousedown.prevent="onTopLeftHandleMousedown"></div> + <div class="handle top-right" @mousedown.prevent="onTopRightHandleMousedown"></div> + <div class="handle bottom-right" @mousedown.prevent="onBottomRightHandleMousedown"></div> + <div class="handle bottom-left" @mousedown.prevent="onBottomLeftHandleMousedown"></div> + </template> </div> </div> </template> @@ -85,7 +87,7 @@ export default Vue.extend({ computed: { isFlexible(): boolean { - return this.height == null; + return this.height == 'auto'; }, canResize(): boolean { return !this.isFlexible; @@ -476,7 +478,7 @@ root(isDark) left 0 width 100% height 100% - background rgba(0, 0, 0, 0.7) + background rgba(#000, 0.7) opacity 0 pointer-events none @@ -493,7 +495,7 @@ root(isDark) &:focus &:not([data-is-modal]) > .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 $size = 8px @@ -561,7 +563,7 @@ root(isDark) overflow hidden background isDark ? #282C37 : #fff 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-height = 40px diff --git a/src/client/app/desktop/views/pages/search.vue b/src/client/app/desktop/views/pages/search.vue index 698154e66..67e1e3bfe 100644 --- a/src/client/app/desktop/views/pages/search.vue +++ b/src/client/app/desktop/views/pages/search.vue @@ -114,7 +114,7 @@ export default Vue.extend({ .notes max-width 600px margin 0 auto - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px overflow hidden diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue index 9ccbc7a31..4c1b91e7a 100644 --- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue +++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue @@ -38,7 +38,7 @@ export default Vue.extend({ <style lang="stylus" scoped> .followers-you-know background #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px > .title @@ -49,7 +49,7 @@ export default Vue.extend({ font-size 0.9em font-weight bold color #888 - box-shadow 0 1px rgba(0, 0, 0, 0.07) + box-shadow 0 1px rgba(#000, 0.07) > i margin-right 4px diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue index 203f93647..161b08d1d 100644 --- a/src/client/app/desktop/views/pages/user/user.friends.vue +++ b/src/client/app/desktop/views/pages/user/user.friends.vue @@ -44,7 +44,7 @@ export default Vue.extend({ <style lang="stylus" scoped> .friends background #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px > .title @@ -55,7 +55,7 @@ export default Vue.extend({ font-size 0.9em font-weight bold color #888 - box-shadow 0 1px rgba(0, 0, 0, 0.07) + box-shadow 0 1px rgba(#000, 0.07) > i margin-right 4px diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue index 8f72fd716..99fe0b18d 100644 --- a/src/client/app/desktop/views/pages/user/user.header.vue +++ b/src/client/app/desktop/views/pages/user/user.header.vue @@ -72,7 +72,7 @@ export default Vue.extend({ overflow hidden 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-remote @@ -99,7 +99,7 @@ export default Vue.extend({ background-color #383838 > .fade - background linear-gradient(transparent, rgba(0, 0, 0, 0.7)) + background linear-gradient(transparent, rgba(#000, 0.7)) > .container > .title @@ -142,7 +142,7 @@ export default Vue.extend({ margin 0 border solid 3px #fff border-radius 8px - box-shadow 1px 1px 3px rgba(0, 0, 0, 0.2) + box-shadow 1px 1px 3px rgba(#000, 0.2) > .title position absolute diff --git a/src/client/app/desktop/views/pages/user/user.home.vue b/src/client/app/desktop/views/pages/user/user.home.vue index 7ca520ea7..6b242a612 100644 --- a/src/client/app/desktop/views/pages/user/user.home.vue +++ b/src/client/app/desktop/views/pages/user/user.home.vue @@ -65,7 +65,7 @@ export default Vue.extend({ width calc(100% - 275px * 2) > .timeline - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px > div @@ -91,7 +91,7 @@ export default Vue.extend({ font-size 12px color #aaa background #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px a diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue index 9f749d5cc..01c4c7b31 100644 --- a/src/client/app/desktop/views/pages/user/user.photos.vue +++ b/src/client/app/desktop/views/pages/user/user.photos.vue @@ -41,7 +41,7 @@ export default Vue.extend({ <style lang="stylus" scoped> .photos background #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px > .title @@ -52,7 +52,7 @@ export default Vue.extend({ font-size 0.9em font-weight bold color #888 - box-shadow 0 1px rgba(0, 0, 0, 0.07) + box-shadow 0 1px rgba(#000, 0.07) > i margin-right 4px diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue index 64acbd86b..29e49f36a 100644 --- a/src/client/app/desktop/views/pages/user/user.profile.vue +++ b/src/client/app/desktop/views/pages/user/user.profile.vue @@ -118,7 +118,7 @@ export default Vue.extend({ <style lang="stylus" scoped> .profile background #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px > *:first-child diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue index 6bda29326..223be8301 100644 --- a/src/client/app/desktop/views/pages/welcome.vue +++ b/src/client/app/desktop/views/pages/welcome.vue @@ -231,14 +231,14 @@ export default Vue.extend({ width 410px background #fff 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 > header z-index 1 padding 12px 16px color #888d94 - box-shadow 0 1px 0px rgba(0, 0, 0, 0.1) + box-shadow 0 1px 0px rgba(#000, 0.1) > div position absolute diff --git a/src/client/app/desktop/views/widgets/channel.vue b/src/client/app/desktop/views/widgets/channel.vue index 7e96f8ee3..600cdd531 100644 --- a/src/client/app/desktop/views/widgets/channel.vue +++ b/src/client/app/desktop/views/widgets/channel.vue @@ -61,7 +61,7 @@ export default define({ <style lang="stylus" scoped> .mkw-channel background #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px overflow hidden @@ -73,7 +73,7 @@ export default define({ font-size 0.9em font-weight bold color #888 - box-shadow 0 1px rgba(0, 0, 0, 0.07) + box-shadow 0 1px rgba(#000, 0.07) > [data-fa] margin-right 4px diff --git a/src/client/app/desktop/views/widgets/post-form.vue b/src/client/app/desktop/views/widgets/post-form.vue index 627943588..9c2d60f9b 100644 --- a/src/client/app/desktop/views/widgets/post-form.vue +++ b/src/client/app/desktop/views/widgets/post-form.vue @@ -59,7 +59,7 @@ export default define({ .mkw-post-form background #fff overflow hidden - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px > .title @@ -70,7 +70,7 @@ export default define({ font-size 0.9em font-weight bold color #888 - box-shadow 0 1px rgba(0, 0, 0, 0.07) + box-shadow 0 1px rgba(#000, 0.07) > [data-fa] margin-right 4px diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue index ba66b703b..7958b4829 100644 --- a/src/client/app/desktop/views/widgets/profile.vue +++ b/src/client/app/desktop/views/widgets/profile.vue @@ -45,7 +45,7 @@ export default define({ root(isDark) overflow hidden background isDark ? #282c37 : #fff - border solid 1px rgba(0, 0, 0, 0.075) + border solid 1px rgba(#000, 0.075) border-radius 6px &[data-compact] @@ -54,14 +54,14 @@ root(isDark) display block width 100% height 100% - background rgba(0, 0, 0, 0.5) + background rgba(#000, 0.5) > .avatar top ((100px - 58px) / 2) left ((100px - 58px) / 2) border none border-radius 100% - box-shadow 0 0 16px rgba(0, 0, 0, 0.5) + box-shadow 0 0 16px rgba(#000, 0.5) > .name position absolute @@ -70,7 +70,7 @@ root(isDark) margin 0 line-height 100px color #fff - text-shadow 0 0 8px rgba(0, 0, 0, 0.5) + text-shadow 0 0 8px rgba(#000, 0.5) > .username display none diff --git a/src/client/app/mobile/views/components/drive-file-chooser.vue b/src/client/app/mobile/views/components/drive-file-chooser.vue index 41536afbd..d95d5fa22 100644 --- a/src/client/app/mobile/views/components/drive-file-chooser.vue +++ b/src/client/app/mobile/views/components/drive-file-chooser.vue @@ -54,7 +54,7 @@ export default Vue.extend({ width 100% height 100% padding 8px - background rgba(0, 0, 0, 0.2) + background rgba(#000, 0.2) > .body width 100% diff --git a/src/client/app/mobile/views/components/drive-folder-chooser.vue b/src/client/app/mobile/views/components/drive-folder-chooser.vue index bfd8fbda6..7934fb781 100644 --- a/src/client/app/mobile/views/components/drive-folder-chooser.vue +++ b/src/client/app/mobile/views/components/drive-folder-chooser.vue @@ -38,7 +38,7 @@ export default Vue.extend({ width 100% height 100% padding 8px - background rgba(0, 0, 0, 0.2) + background rgba(#000, 0.2) > .body width 100% diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue index c7be7d187..764822e98 100644 --- a/src/client/app/mobile/views/components/drive.file-detail.vue +++ b/src/client/app/mobile/views/components/drive.file-detail.vue @@ -139,7 +139,7 @@ export default Vue.extend({ max-width 100% max-height 300px margin 0 auto - box-shadow 1px 1px 4px rgba(0, 0, 0, 0.2) + box-shadow 1px 1px 4px rgba(#000, 0.2) > footer padding 8px 8px 0 8px @@ -226,7 +226,7 @@ export default Vue.extend({ background-color #767676 background-image none 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] margin-right 4px diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue index 7aa666e1b..ef3432a3e 100644 --- a/src/client/app/mobile/views/components/drive.vue +++ b/src/client/app/mobile/views/components/drive.vue @@ -474,11 +474,11 @@ export default Vue.extend({ overflow auto white-space nowrap font-size 0.9em - color rgba(0, 0, 0, 0.67) + color rgba(#000, 0.67) -webkit-backdrop-filter blur(12px) backdrop-filter blur(12px) 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 > a @@ -555,7 +555,7 @@ export default Vue.extend({ display inline-block position absolute top 0 - background rgba(0, 0, 0, 0.2) + background rgba(#000, 0.2) border-radius 100% animation sk-bounce 2.0s infinite ease-in-out diff --git a/src/client/app/mobile/views/components/friends-maker.vue b/src/client/app/mobile/views/components/friends-maker.vue index 961a5f568..ba4abe341 100644 --- a/src/client/app/mobile/views/components/friends-maker.vue +++ b/src/client/app/mobile/views/components/friends-maker.vue @@ -57,7 +57,7 @@ export default Vue.extend({ .mk-friends-maker background #fff 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 margin 0 diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue index 3c7d225ca..36c3f30c6 100644 --- a/src/client/app/mobile/views/components/note-detail.vue +++ b/src/client/app/mobile/views/components/note-detail.vue @@ -35,6 +35,7 @@ </header> <div class="body"> <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"/> </div> <div class="tags" v-if="p.tags && p.tags.length > 0"> diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue index a0d893864..8ab66940c 100644 --- a/src/client/app/mobile/views/components/notifications.vue +++ b/src/client/app/mobile/views/components/notifications.vue @@ -107,10 +107,11 @@ root(isDark) margin 0 auto background isDark ? #282C37 :#fff 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) - box-shadow 0 8px 32px rgba(0, 0, 0, 0.1) + box-shadow 0 8px 32px rgba(#000, 0.1) .transition .mk-notifications-enter @@ -147,7 +148,7 @@ root(isDark) width 100% padding 16px color #555 - border-top solid 1px rgba(0, 0, 0, 0.05) + border-top solid 1px rgba(#000, 0.05) > [data-fa] margin-right 4px diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue index 7b8a52f06..ec1611979 100644 --- a/src/client/app/mobile/views/components/post-form.vue +++ b/src/client/app/mobile/views/components/post-form.vue @@ -10,6 +10,10 @@ </header> <div class="form"> <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="内容への注釈 (オプション)"> <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"> @@ -27,6 +31,7 @@ <button class="poll" @click="poll = true">%fa:chart-pie%</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="visibility" @click="setVisibility" ref="visibilityButton">%fa:lock%</button> <input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/> </div> </div> @@ -35,11 +40,13 @@ <script lang="ts"> import Vue from 'vue'; import * as XDraggable from 'vuedraggable'; +import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue'; import getKao from '../../../common/scripts/get-kao'; export default Vue.extend({ components: { - XDraggable + XDraggable, + MkVisibilityChooser }, props: ['reply'], @@ -52,6 +59,8 @@ export default Vue.extend({ files: [], poll: false, geo: null, + visibility: 'public', + visibleUsers: [], useCw: false, cw: null }; @@ -121,6 +130,33 @@ export default Vue.extend({ 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() { this.text = ''; this.files = []; @@ -145,6 +181,8 @@ export default Vue.extend({ heading: isNaN(this.geo.heading) ? null : this.geo.heading, speed: this.geo.speed, } : null, + visibility: this.visibility, + visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined, viaMobile: viaMobile }).then(data => { this.$emit('note'); @@ -169,33 +207,33 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.mk-post-form +root(isDark) max-width 500px width calc(100% - 16px) margin 8px auto - background #fff + background isDark ? #282C37 : #fff 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) margin 16px auto 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) margin 32px auto > header - z-index 1 + z-index 1000 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 padding 0 width 50px line-height 50px font-size 24px - color #555 + color isDark ? #9baec8 : #555 > div position absolute @@ -229,6 +267,38 @@ export default Vue.extend({ > .mk-note-preview 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 > .files @@ -262,31 +332,12 @@ export default Vue.extend({ > .file 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 > .drive > .kao > .poll > .geo + > .visibility display inline-block padding 0 margin 0 @@ -300,5 +351,10 @@ export default Vue.extend({ border-radius 0 box-shadow none -</style> +.mk-post-form[data-darkmode] + root(true) +.mk-post-form:not([data-darkmode]) + root(false) + +</style> diff --git a/src/client/app/mobile/views/components/users-list.vue b/src/client/app/mobile/views/components/users-list.vue index 67a38a895..617506745 100644 --- a/src/client/app/mobile/views/components/users-list.vue +++ b/src/client/app/mobile/views/components/users-list.vue @@ -74,7 +74,7 @@ export default Vue.extend({ justify-content center margin 0 auto max-width 600px - border-bottom solid 1px rgba(0, 0, 0, 0.2) + border-bottom solid 1px rgba(#000, 0.2) > span display block @@ -97,7 +97,7 @@ export default Vue.extend({ font-size 12px line-height 1 color #fff - background rgba(0, 0, 0, 0.3) + background rgba(#000, 0.3) border-radius 20px > .users @@ -106,14 +106,14 @@ export default Vue.extend({ width calc(100% - 16px) background #fff 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) margin 16px auto width calc(100% - 32px) > * - border-bottom solid 1px rgba(0, 0, 0, 0.05) + border-bottom solid 1px rgba(#000, 0.05) > .no margin 0 diff --git a/src/client/app/mobile/views/components/widget-container.vue b/src/client/app/mobile/views/components/widget-container.vue index 7319c9084..1bdc87576 100644 --- a/src/client/app/mobile/views/components/widget-container.vue +++ b/src/client/app/mobile/views/components/widget-container.vue @@ -28,7 +28,7 @@ export default Vue.extend({ .mk-widget-container background #eee 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 &.hideHeader diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue index e43c5876e..f69c4d9c6 100644 --- a/src/client/app/mobile/views/pages/home.vue +++ b/src/client/app/mobile/views/pages/home.vue @@ -121,7 +121,7 @@ root(isDark) margin 0 auto background isDark ? #272f3a : #fff 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 diff --git a/src/client/app/mobile/views/pages/profile-setting.vue b/src/client/app/mobile/views/pages/profile-setting.vue index d0b9095ce..7048cdef3 100644 --- a/src/client/app/mobile/views/pages/profile-setting.vue +++ b/src/client/app/mobile/views/pages/profile-setting.vue @@ -136,7 +136,7 @@ export default Vue.extend({ .form position relative 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 &:before @@ -145,7 +145,7 @@ export default Vue.extend({ position absolute bottom -20px 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-bottom solid 10px transparent border-left solid 10px transparent diff --git a/src/client/app/mobile/views/pages/search.vue b/src/client/app/mobile/views/pages/search.vue index 6c80de3aa..f038a6f81 100644 --- a/src/client/app/mobile/views/pages/search.vue +++ b/src/client/app/mobile/views/pages/search.vue @@ -84,7 +84,7 @@ export default Vue.extend({ width calc(100% - 16px) background #fff 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) margin 16px auto diff --git a/src/client/app/mobile/views/pages/selectdrive.vue b/src/client/app/mobile/views/pages/selectdrive.vue index 741559ed0..d730e4fcf 100644 --- a/src/client/app/mobile/views/pages/selectdrive.vue +++ b/src/client/app/mobile/views/pages/selectdrive.vue @@ -62,7 +62,7 @@ export default Vue.extend({ width 100% z-index 1000 background #fff - box-shadow 0 1px rgba(0, 0, 0, 0.1) + box-shadow 0 1px rgba(#000, 0.1) > h1 margin 0 diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue index ebf14f68f..0e9c5ea96 100644 --- a/src/client/app/mobile/views/pages/settings.vue +++ b/src/client/app/mobile/views/pages/settings.vue @@ -62,7 +62,7 @@ export default Vue.extend({ width calc(100% - 32px) list-style none background #fff - border solid 1px rgba(0, 0, 0, 0.2) + border solid 1px rgba(#000, 0.2) border-radius $radius > li @@ -70,7 +70,7 @@ export default Vue.extend({ border-bottom solid 1px #ddd &:hover - background rgba(0, 0, 0, 0.1) + background rgba(#000, 0.1) &:first-child border-top-left-radius $radius diff --git a/src/client/app/mobile/views/pages/signup.vue b/src/client/app/mobile/views/pages/signup.vue index 9dc07a4b8..b8245beb0 100644 --- a/src/client/app/mobile/views/pages/signup.vue +++ b/src/client/app/mobile/views/pages/signup.vue @@ -40,7 +40,7 @@ export default Vue.extend({ .form background #fff - border solid 1px rgba(0, 0, 0, 0.2) + border solid 1px rgba(#000, 0.2) border-radius 8px overflow hidden diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue index 1bc7ffd86..485996870 100644 --- a/src/client/app/mobile/views/pages/welcome.vue +++ b/src/client/app/mobile/views/pages/welcome.vue @@ -108,7 +108,7 @@ export default Vue.extend({ .form margin-bottom 16px background #fff - border solid 1px rgba(0, 0, 0, 0.2) + border solid 1px rgba(#000, 0.2) border-radius 8px overflow hidden @@ -131,7 +131,7 @@ export default Vue.extend({ margin 0 0 16px 0 width 100% font-size 1em - color rgba(0, 0, 0, 0.7) + color rgba(#000, 0.7) background #fff outline none border solid 1px #ddd @@ -156,7 +156,7 @@ export default Vue.extend({ background-color #767676 background-image none 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 padding 16px @@ -164,7 +164,7 @@ export default Vue.extend({ > .tl background #fff - border solid 1px rgba(0, 0, 0, 0.2) + border solid 1px rgba(#000, 0.2) border-radius 8px overflow hidden diff --git a/src/client/app/mobile/views/widgets/profile.vue b/src/client/app/mobile/views/widgets/profile.vue index 502f886ce..59c1ec7c0 100644 --- a/src/client/app/mobile/views/widgets/profile.vue +++ b/src/client/app/mobile/views/widgets/profile.vue @@ -34,7 +34,7 @@ export default define({ display block width 100% height 100% - background rgba(0, 0, 0, 0.5) + background rgba(#000, 0.5) .avatar display block @@ -47,7 +47,7 @@ export default define({ left ((100px - 58px) / 2) border none border-radius 100% - box-shadow 0 0 16px rgba(0, 0, 0, 0.5) + box-shadow 0 0 16px rgba(#000, 0.5) .name display block @@ -58,6 +58,6 @@ export default define({ line-height 100px color #fff font-weight bold - text-shadow 0 0 8px rgba(0, 0, 0, 0.5) + text-shadow 0 0 8px rgba(#000, 0.5) </style> diff --git a/src/renderers/get-note-summary.ts b/src/renderers/get-note-summary.ts index fc7482ca1..dfc05ebfd 100644 --- a/src/renderers/get-note-summary.ts +++ b/src/renderers/get-note-summary.ts @@ -3,6 +3,10 @@ * @param {*} note 投稿 */ const summarize = (note: any): string => { + if (note.isHidden) { + return '(非公開の投稿)'; + } + let summary = ''; // チャンネル