commit
						1625b37b44
					
				
					 86 changed files with 791 additions and 281 deletions
				
			
		| 
						 | 
				
			
			@ -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 ''
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										223
									
								
								src/client/app/common/views/components/visibility-chooser.vue
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										223
									
								
								src/client/app/common/views/components/visibility-chooser.vue
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,223 @@
 | 
			
		|||
<template>
 | 
			
		||||
<div class="mk-visibility-chooser">
 | 
			
		||||
	<div class="backdrop" ref="backdrop" @click="close"></div>
 | 
			
		||||
	<div class="popover" :class="{ compact }" ref="popover">
 | 
			
		||||
		<div @click="choose('public')" :class="{ active: v == 'public' }">
 | 
			
		||||
			<div>%fa:globe%</div>
 | 
			
		||||
			<div>
 | 
			
		||||
				<span>公開</span>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
		<div @click="choose('home')" :class="{ active: v == 'home' }">
 | 
			
		||||
			<div>%fa:home%</div>
 | 
			
		||||
			<div>
 | 
			
		||||
				<span>ホーム</span>
 | 
			
		||||
				<span>ホームタイムラインにのみ公開</span>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
		<div @click="choose('followers')" :class="{ active: v == 'followers' }">
 | 
			
		||||
			<div>%fa:unlock%</div>
 | 
			
		||||
			<div>
 | 
			
		||||
				<span>フォロワー</span>
 | 
			
		||||
				<span>自分のフォロワーにのみ公開</span>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
		<div @click="choose('specified')" :class="{ active: v == 'specified' }">
 | 
			
		||||
			<div>%fa:envelope%</div>
 | 
			
		||||
			<div>
 | 
			
		||||
				<span>ダイレクト</span>
 | 
			
		||||
				<span>指定したユーザーにのみ公開</span>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
		<div @click="choose('private')" :class="{ active: v == 'private' }">
 | 
			
		||||
			<div>%fa:lock%</div>
 | 
			
		||||
			<div>
 | 
			
		||||
				<span>非公開</span>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
	</div>
 | 
			
		||||
</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
import Vue from 'vue';
 | 
			
		||||
import * as anime from 'animejs';
 | 
			
		||||
 | 
			
		||||
export default Vue.extend({
 | 
			
		||||
	props: ['source', 'compact', 'v'],
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.$nextTick(() => {
 | 
			
		||||
			const popover = this.$refs.popover as any;
 | 
			
		||||
 | 
			
		||||
			const rect = this.source.getBoundingClientRect();
 | 
			
		||||
			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);
 | 
			
		||||
				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;
 | 
			
		||||
				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,
 | 
			
		||||
				duration: 100,
 | 
			
		||||
				easing: 'linear'
 | 
			
		||||
			});
 | 
			
		||||
 | 
			
		||||
			anime({
 | 
			
		||||
				targets: this.$refs.popover,
 | 
			
		||||
				opacity: 1,
 | 
			
		||||
				scale: [0.5, 1],
 | 
			
		||||
				duration: 500
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		choose(visibility) {
 | 
			
		||||
			this.$emit('chosen', visibility);
 | 
			
		||||
			this.$destroy();
 | 
			
		||||
		},
 | 
			
		||||
		close() {
 | 
			
		||||
			(this.$refs.backdrop as any).style.pointerEvents = 'none';
 | 
			
		||||
			anime({
 | 
			
		||||
				targets: this.$refs.backdrop,
 | 
			
		||||
				opacity: 0,
 | 
			
		||||
				duration: 200,
 | 
			
		||||
				easing: 'linear'
 | 
			
		||||
			});
 | 
			
		||||
 | 
			
		||||
			(this.$refs.popover as any).style.pointerEvents = 'none';
 | 
			
		||||
			anime({
 | 
			
		||||
				targets: this.$refs.popover,
 | 
			
		||||
				opacity: 0,
 | 
			
		||||
				scale: 0.5,
 | 
			
		||||
				duration: 200,
 | 
			
		||||
				easing: 'easeInBack',
 | 
			
		||||
				complete: () => this.$destroy()
 | 
			
		||||
			});
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="stylus" scoped>
 | 
			
		||||
@import '~const.styl'
 | 
			
		||||
 | 
			
		||||
$border-color = rgba(27, 31, 35, 0.15)
 | 
			
		||||
 | 
			
		||||
root(isDark)
 | 
			
		||||
	position initial
 | 
			
		||||
 | 
			
		||||
	> .backdrop
 | 
			
		||||
		position fixed
 | 
			
		||||
		top 0
 | 
			
		||||
		left 0
 | 
			
		||||
		z-index 10000
 | 
			
		||||
		width 100%
 | 
			
		||||
		height 100%
 | 
			
		||||
		background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
 | 
			
		||||
		opacity 0
 | 
			
		||||
 | 
			
		||||
	> .popover
 | 
			
		||||
		$bgcolor = isDark ? #2c303c : #fff
 | 
			
		||||
		position absolute
 | 
			
		||||
		z-index 10001
 | 
			
		||||
		width 240px
 | 
			
		||||
		padding 8px 0
 | 
			
		||||
		background $bgcolor
 | 
			
		||||
		border 1px solid $border-color
 | 
			
		||||
		border-radius 4px
 | 
			
		||||
		box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
 | 
			
		||||
		transform scale(0.5)
 | 
			
		||||
		opacity 0
 | 
			
		||||
 | 
			
		||||
		$balloon-size = 10px
 | 
			
		||||
 | 
			
		||||
		&:not(.compact)
 | 
			
		||||
			margin-top $balloon-size
 | 
			
		||||
			transform-origin center -($balloon-size)
 | 
			
		||||
 | 
			
		||||
			&:before
 | 
			
		||||
				content ""
 | 
			
		||||
				display block
 | 
			
		||||
				position absolute
 | 
			
		||||
				top -($balloon-size * 2)
 | 
			
		||||
				left s('calc(50% - %s)', $balloon-size)
 | 
			
		||||
				border-top solid $balloon-size transparent
 | 
			
		||||
				border-left solid $balloon-size transparent
 | 
			
		||||
				border-right solid $balloon-size transparent
 | 
			
		||||
				border-bottom solid $balloon-size $border-color
 | 
			
		||||
 | 
			
		||||
			&:after
 | 
			
		||||
				content ""
 | 
			
		||||
				display block
 | 
			
		||||
				position absolute
 | 
			
		||||
				top -($balloon-size * 2) + 1.5px
 | 
			
		||||
				left s('calc(50% - %s)', $balloon-size)
 | 
			
		||||
				border-top solid $balloon-size transparent
 | 
			
		||||
				border-left solid $balloon-size transparent
 | 
			
		||||
				border-right solid $balloon-size transparent
 | 
			
		||||
				border-bottom solid $balloon-size $bgcolor
 | 
			
		||||
 | 
			
		||||
		> div
 | 
			
		||||
			display flex
 | 
			
		||||
			padding 8px 14px
 | 
			
		||||
			font-size 12px
 | 
			
		||||
			color isDark ? #fff : #666
 | 
			
		||||
			cursor pointer
 | 
			
		||||
 | 
			
		||||
			&:hover
 | 
			
		||||
				background isDark ? #252731 : #eee
 | 
			
		||||
 | 
			
		||||
			&:active
 | 
			
		||||
				background isDark ? #21242b : #ddd
 | 
			
		||||
 | 
			
		||||
			&.active
 | 
			
		||||
				color $theme-color-foreground
 | 
			
		||||
				background $theme-color
 | 
			
		||||
 | 
			
		||||
			> *
 | 
			
		||||
				user-select none
 | 
			
		||||
				pointer-events none
 | 
			
		||||
 | 
			
		||||
			> *:first-child
 | 
			
		||||
				display flex
 | 
			
		||||
				justify-content center
 | 
			
		||||
				align-items center
 | 
			
		||||
				margin-right 10px
 | 
			
		||||
 | 
			
		||||
			> *:last-child
 | 
			
		||||
				flex 1 1 auto
 | 
			
		||||
 | 
			
		||||
				> span:first-child
 | 
			
		||||
					display block
 | 
			
		||||
					font-weight bold
 | 
			
		||||
 | 
			
		||||
				> span:last-child:not(:first-child)
 | 
			
		||||
					opacity 0.6
 | 
			
		||||
 | 
			
		||||
.mk-visibility-chooser[data-darkmode]
 | 
			
		||||
	root(true)
 | 
			
		||||
 | 
			
		||||
.mk-visibility-chooser:not([data-darkmode])
 | 
			
		||||
	root(false)
 | 
			
		||||
 | 
			
		||||
</style>
 | 
			
		||||
| 
						 | 
				
			
			@ -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 ""
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 ""
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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)
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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)
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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%
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -61,6 +61,6 @@ svg
 | 
			
		|||
 | 
			
		||||
		&.day
 | 
			
		||||
			&:hover
 | 
			
		||||
				fill rgba(0, 0, 0, 0.05)
 | 
			
		||||
				fill rgba(#000, 0.05)
 | 
			
		||||
 | 
			
		||||
</style>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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]
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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]
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -7,9 +7,18 @@
 | 
			
		|||
		<header>
 | 
			
		||||
			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
 | 
			
		||||
			<span class="username">@{{ note.user | acct }}</span>
 | 
			
		||||
			<div class="info">
 | 
			
		||||
				<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
 | 
			
		||||
				<router-link class="created-at" :to="note | notePage">
 | 
			
		||||
					<mk-time :time="note.createdAt"/>
 | 
			
		||||
				</router-link>
 | 
			
		||||
				<span class="visibility" v-if="note.visibility != 'public'">
 | 
			
		||||
					<template v-if="note.visibility == 'home'">%fa:home%</template>
 | 
			
		||||
					<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
 | 
			
		||||
					<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
 | 
			
		||||
					<template v-if="note.visibility == 'private'">%fa:lock%</template>
 | 
			
		||||
				</span>
 | 
			
		||||
			</div>
 | 
			
		||||
		</header>
 | 
			
		||||
		<div class="body">
 | 
			
		||||
			<mk-sub-note-content class="text" :note="note"/>
 | 
			
		||||
| 
						 | 
				
			
			@ -85,10 +94,19 @@ root(isDark)
 | 
			
		|||
				margin 0 .5em 0 0
 | 
			
		||||
				color isDark ? #606984 : #d1d8da
 | 
			
		||||
 | 
			
		||||
			> .created-at
 | 
			
		||||
			> .info
 | 
			
		||||
				margin-left auto
 | 
			
		||||
				font-size 0.9em
 | 
			
		||||
 | 
			
		||||
				> *
 | 
			
		||||
					color isDark ? #606984 : #b2b8bb
 | 
			
		||||
 | 
			
		||||
				> .mobile
 | 
			
		||||
					margin-right 6px
 | 
			
		||||
 | 
			
		||||
				> .visibility
 | 
			
		||||
					margin-left 6px
 | 
			
		||||
 | 
			
		||||
		> .body
 | 
			
		||||
			max-height 128px
 | 
			
		||||
			overflow hidden
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -28,6 +28,12 @@
 | 
			
		|||
					<router-link class="created-at" :to="p | notePage">
 | 
			
		||||
						<mk-time :time="p.createdAt"/>
 | 
			
		||||
					</router-link>
 | 
			
		||||
					<span class="visibility" v-if="p.visibility != 'public'">
 | 
			
		||||
						<template v-if="p.visibility == 'home'">%fa:home%</template>
 | 
			
		||||
						<template v-if="p.visibility == 'followers'">%fa:unlock%</template>
 | 
			
		||||
						<template v-if="p.visibility == 'specified'">%fa:envelope%</template>
 | 
			
		||||
						<template v-if="p.visibility == 'private'">%fa:lock%</template>
 | 
			
		||||
					</span>
 | 
			
		||||
				</div>
 | 
			
		||||
			</header>
 | 
			
		||||
			<div class="body">
 | 
			
		||||
| 
						 | 
				
			
			@ -40,6 +46,7 @@
 | 
			
		|||
				</p>
 | 
			
		||||
				<div class="content" v-show="p.cw == null || showContent">
 | 
			
		||||
					<div class="text">
 | 
			
		||||
						<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
 | 
			
		||||
						<a class="reply" v-if="p.reply">%fa:reply%</a>
 | 
			
		||||
						<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
 | 
			
		||||
						<a class="rp" v-if="p.renote">RP:</a>
 | 
			
		||||
| 
						 | 
				
			
			@ -441,18 +448,19 @@ root(isDark)
 | 
			
		|||
					margin-left auto
 | 
			
		||||
					font-size 0.9em
 | 
			
		||||
 | 
			
		||||
					> *
 | 
			
		||||
						color isDark ? #606984 : #c0c0c0
 | 
			
		||||
 | 
			
		||||
					> .mobile
 | 
			
		||||
						margin-right 8px
 | 
			
		||||
						color isDark ? #606984 : #ccc
 | 
			
		||||
 | 
			
		||||
					> .app
 | 
			
		||||
						margin-right 8px
 | 
			
		||||
						padding-right 8px
 | 
			
		||||
						color #ccc
 | 
			
		||||
						border-right solid 1px #eaeaea
 | 
			
		||||
 | 
			
		||||
					> .created-at
 | 
			
		||||
						color isDark ? #606984 : #c0c0c0
 | 
			
		||||
					> .visibility
 | 
			
		||||
						margin-left 8px
 | 
			
		||||
 | 
			
		||||
			> .body
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -606,7 +614,7 @@ root(isDark)
 | 
			
		|||
 | 
			
		||||
	> .detail
 | 
			
		||||
		padding-top 4px
 | 
			
		||||
		background rgba(0, 0, 0, 0.0125)
 | 
			
		||||
		background rgba(#000, 0.0125)
 | 
			
		||||
 | 
			
		||||
.note[data-darkmode]
 | 
			
		||||
	root(true)
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -6,6 +6,10 @@
 | 
			
		|||
	@drop.stop="onDrop"
 | 
			
		||||
>
 | 
			
		||||
	<div class="content">
 | 
			
		||||
		<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 :class="{ with: (files.length != 0 || poll) }"
 | 
			
		||||
			ref="text" v-model="text" :disabled="posting"
 | 
			
		||||
| 
						 | 
				
			
			@ -30,7 +34,8 @@
 | 
			
		|||
	<button class="poll" title="%i18n:@create-poll%" @click="poll = true">%fa:chart-pie%</button>
 | 
			
		||||
	<button class="poll" title="内容を隠す" @click="useCw = !useCw">%fa:eye-slash%</button>
 | 
			
		||||
	<button class="geo" title="位置情報を添付する" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
 | 
			
		||||
	<p class="text-count" :class="{ over: text.length > 1000 }">{{ '%i18n:!@text-remain%'.replace('{}', 1000 - text.length) }}</p>
 | 
			
		||||
	<button class="visibility" title="公開範囲" @click="setVisibility" ref="visibilityButton">%fa:lock%</button>
 | 
			
		||||
	<p class="text-count" :class="{ over: text.length > 1000 }">{{ 1000 - text.length }}</p>
 | 
			
		||||
	<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
 | 
			
		||||
		{{ posting ? '%i18n:!@posting%' : submitText }}<mk-ellipsis v-if="posting"/>
 | 
			
		||||
	</button>
 | 
			
		||||
| 
						 | 
				
			
			@ -43,10 +48,12 @@
 | 
			
		|||
import Vue from 'vue';
 | 
			
		||||
import * as XDraggable from 'vuedraggable';
 | 
			
		||||
import getKao from '../../../common/scripts/get-kao';
 | 
			
		||||
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
 | 
			
		||||
 | 
			
		||||
export default Vue.extend({
 | 
			
		||||
	components: {
 | 
			
		||||
		XDraggable
 | 
			
		||||
		XDraggable,
 | 
			
		||||
		MkVisibilityChooser
 | 
			
		||||
	},
 | 
			
		||||
 | 
			
		||||
	props: ['reply', 'renote'],
 | 
			
		||||
| 
						 | 
				
			
			@ -61,6 +68,8 @@ export default Vue.extend({
 | 
			
		|||
			useCw: false,
 | 
			
		||||
			cw: null,
 | 
			
		||||
			geo: null,
 | 
			
		||||
			visibility: 'public',
 | 
			
		||||
			visibleUsers: [],
 | 
			
		||||
			autocomplete: null,
 | 
			
		||||
			draghover: false
 | 
			
		||||
		};
 | 
			
		||||
| 
						 | 
				
			
			@ -246,6 +255,32 @@ export default Vue.extend({
 | 
			
		|||
			this.$emit('geo-dettached');
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		setVisibility() {
 | 
			
		||||
			const w = (this as any).os.new(MkVisibilityChooser, {
 | 
			
		||||
				source: this.$refs.visibilityButton,
 | 
			
		||||
				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);
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
		post() {
 | 
			
		||||
			this.posting = true;
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -256,6 +291,8 @@ export default Vue.extend({
 | 
			
		|||
				renoteId: this.renote ? this.renote.id : undefined,
 | 
			
		||||
				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
 | 
			
		||||
				cw: this.useCw ? this.cw || '' : undefined,
 | 
			
		||||
				visibility: this.visibility,
 | 
			
		||||
				visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
 | 
			
		||||
				geo: this.geo ? {
 | 
			
		||||
					coordinates: [this.geo.longitude, this.geo.latitude],
 | 
			
		||||
					altitude: this.geo.altitude,
 | 
			
		||||
| 
						 | 
				
			
			@ -328,7 +365,6 @@ root(isDark)
 | 
			
		|||
		clear both
 | 
			
		||||
 | 
			
		||||
	> .content
 | 
			
		||||
 | 
			
		||||
		> input
 | 
			
		||||
		> textarea
 | 
			
		||||
			display block
 | 
			
		||||
| 
						 | 
				
			
			@ -381,6 +417,14 @@ root(isDark)
 | 
			
		|||
				border-bottom solid 1px rgba($theme-color, 0.1) !important
 | 
			
		||||
				border-radius 4px 4px 0 0
 | 
			
		||||
 | 
			
		||||
		> .visibleUsers
 | 
			
		||||
			margin-bottom 8px
 | 
			
		||||
			font-size 14px
 | 
			
		||||
 | 
			
		||||
			> span
 | 
			
		||||
				margin-right 16px
 | 
			
		||||
				color isDark ? #fff : #666
 | 
			
		||||
 | 
			
		||||
		> .medias
 | 
			
		||||
			margin 0
 | 
			
		||||
			padding 0
 | 
			
		||||
| 
						 | 
				
			
			@ -450,19 +494,6 @@ root(isDark)
 | 
			
		|||
	input[type='file']
 | 
			
		||||
		display none
 | 
			
		||||
 | 
			
		||||
	.text-count
 | 
			
		||||
		pointer-events none
 | 
			
		||||
		display block
 | 
			
		||||
		position absolute
 | 
			
		||||
		bottom 16px
 | 
			
		||||
		right 138px
 | 
			
		||||
		margin 0
 | 
			
		||||
		line-height 40px
 | 
			
		||||
		color rgba($theme-color, 0.5)
 | 
			
		||||
 | 
			
		||||
		&.over
 | 
			
		||||
			color #ec3828
 | 
			
		||||
 | 
			
		||||
	.submit
 | 
			
		||||
		display block
 | 
			
		||||
		position absolute
 | 
			
		||||
| 
						 | 
				
			
			@ -527,11 +558,25 @@ root(isDark)
 | 
			
		|||
				from {background-position: 0 0;}
 | 
			
		||||
				to   {background-position: -64px 32px;}
 | 
			
		||||
 | 
			
		||||
	> .text-count
 | 
			
		||||
		pointer-events none
 | 
			
		||||
		display block
 | 
			
		||||
		position absolute
 | 
			
		||||
		bottom 16px
 | 
			
		||||
		right 138px
 | 
			
		||||
		margin 0
 | 
			
		||||
		line-height 40px
 | 
			
		||||
		color rgba($theme-color, 0.5)
 | 
			
		||||
 | 
			
		||||
		&.over
 | 
			
		||||
			color #ec3828
 | 
			
		||||
 | 
			
		||||
	> .upload
 | 
			
		||||
	> .drive
 | 
			
		||||
	> .kao
 | 
			
		||||
	> .poll
 | 
			
		||||
	> .geo
 | 
			
		||||
	> .visibility
 | 
			
		||||
		display inline-block
 | 
			
		||||
		cursor pointer
 | 
			
		||||
		padding 0
 | 
			
		||||
| 
						 | 
				
			
			@ -553,7 +598,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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,6 +1,7 @@
 | 
			
		|||
<template>
 | 
			
		||||
<div class="mk-sub-note-content">
 | 
			
		||||
	<div class="body">
 | 
			
		||||
		<span v-if="note.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
 | 
			
		||||
		<a class="reply" v-if="note.replyId">%fa:reply%</a>
 | 
			
		||||
		<mk-note-html :text="note.text" :i="os.i"/>
 | 
			
		||||
		<a class="rp" v-if="note.renoteId" :href="`/note:${note.renoteId}`">RP: ...</a>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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%
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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%
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -27,7 +27,7 @@ export default Vue.extend({
 | 
			
		|||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="stylus" scoped>
 | 
			
		||||
.mk-note-preview
 | 
			
		||||
root(isDark)
 | 
			
		||||
	margin 0
 | 
			
		||||
	padding 0
 | 
			
		||||
	font-size 0.9em
 | 
			
		||||
| 
						 | 
				
			
			@ -37,10 +37,6 @@ export default Vue.extend({
 | 
			
		|||
		display block
 | 
			
		||||
		clear both
 | 
			
		||||
 | 
			
		||||
	&:hover
 | 
			
		||||
		> .main > footer > button
 | 
			
		||||
			color #888
 | 
			
		||||
 | 
			
		||||
	> .avatar-anchor
 | 
			
		||||
		display block
 | 
			
		||||
		float left
 | 
			
		||||
| 
						 | 
				
			
			@ -68,7 +64,7 @@ export default Vue.extend({
 | 
			
		|||
				margin 0 .5em 0 0
 | 
			
		||||
				padding 0
 | 
			
		||||
				overflow hidden
 | 
			
		||||
				color #607073
 | 
			
		||||
				color isDark ? #fff : #607073
 | 
			
		||||
				font-size 1em
 | 
			
		||||
				font-weight 700
 | 
			
		||||
				text-align left
 | 
			
		||||
| 
						 | 
				
			
			@ -81,11 +77,11 @@ export default Vue.extend({
 | 
			
		|||
			> .username
 | 
			
		||||
				text-align left
 | 
			
		||||
				margin 0 .5em 0 0
 | 
			
		||||
				color #d1d8da
 | 
			
		||||
				color isDark ? #606984 : #d1d8da
 | 
			
		||||
 | 
			
		||||
			> .time
 | 
			
		||||
				margin-left auto
 | 
			
		||||
				color #b2b8bb
 | 
			
		||||
				color isDark ? #606984 : #b2b8bb
 | 
			
		||||
 | 
			
		||||
		> .body
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -94,6 +90,12 @@ export default Vue.extend({
 | 
			
		|||
				margin 0
 | 
			
		||||
				padding 0
 | 
			
		||||
				font-size 1.1em
 | 
			
		||||
				color #717171
 | 
			
		||||
				color isDark ? #959ba7 : #717171
 | 
			
		||||
 | 
			
		||||
.mk-note-preview[data-darkmode]
 | 
			
		||||
	root(true)
 | 
			
		||||
 | 
			
		||||
.mk-note-preview:not([data-darkmode])
 | 
			
		||||
	root(false)
 | 
			
		||||
 | 
			
		||||
</style>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -7,9 +7,18 @@
 | 
			
		|||
		<header>
 | 
			
		||||
			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
 | 
			
		||||
			<span class="username">@{{ note.user | acct }}</span>
 | 
			
		||||
			<div class="info">
 | 
			
		||||
				<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
 | 
			
		||||
				<router-link class="created-at" :to="note | notePage">
 | 
			
		||||
					<mk-time :time="note.createdAt"/>
 | 
			
		||||
				</router-link>
 | 
			
		||||
				<span class="visibility" v-if="note.visibility != 'public'">
 | 
			
		||||
					<template v-if="note.visibility == 'home'">%fa:home%</template>
 | 
			
		||||
					<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
 | 
			
		||||
					<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
 | 
			
		||||
					<template v-if="note.visibility == 'private'">%fa:lock%</template>
 | 
			
		||||
				</span>
 | 
			
		||||
			</div>
 | 
			
		||||
		</header>
 | 
			
		||||
		<div class="body">
 | 
			
		||||
			<mk-sub-note-content class="text" :note="note"/>
 | 
			
		||||
| 
						 | 
				
			
			@ -92,10 +101,19 @@ root(isDark)
 | 
			
		|||
				margin 0
 | 
			
		||||
				color isDark ? #606984 : #d1d8da
 | 
			
		||||
 | 
			
		||||
			> .created-at
 | 
			
		||||
			> .info
 | 
			
		||||
				margin-left auto
 | 
			
		||||
				font-size 0.9em
 | 
			
		||||
 | 
			
		||||
				> *
 | 
			
		||||
					color isDark ? #606984 : #b2b8bb
 | 
			
		||||
 | 
			
		||||
				> .mobile
 | 
			
		||||
					margin-right 6px
 | 
			
		||||
 | 
			
		||||
				> .visibility
 | 
			
		||||
					margin-left 6px
 | 
			
		||||
 | 
			
		||||
		> .body
 | 
			
		||||
			max-height 128px
 | 
			
		||||
			overflow hidden
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -27,6 +27,12 @@
 | 
			
		|||
					<router-link class="created-at" :to="p | notePage">
 | 
			
		||||
						<mk-time :time="p.createdAt"/>
 | 
			
		||||
					</router-link>
 | 
			
		||||
					<span class="visibility" v-if="p.visibility != 'public'">
 | 
			
		||||
						<template v-if="p.visibility == 'home'">%fa:home%</template>
 | 
			
		||||
						<template v-if="p.visibility == 'followers'">%fa:unlock%</template>
 | 
			
		||||
						<template v-if="p.visibility == 'specified'">%fa:envelope%</template>
 | 
			
		||||
						<template v-if="p.visibility == 'private'">%fa:lock%</template>
 | 
			
		||||
					</span>
 | 
			
		||||
				</div>
 | 
			
		||||
			</header>
 | 
			
		||||
			<div class="body">
 | 
			
		||||
| 
						 | 
				
			
			@ -37,9 +43,8 @@
 | 
			
		|||
				</p>
 | 
			
		||||
				<div class="content" v-show="p.cw == null || showContent">
 | 
			
		||||
					<div class="text">
 | 
			
		||||
						<a class="reply" v-if="p.reply">
 | 
			
		||||
							%fa:reply%
 | 
			
		||||
						</a>
 | 
			
		||||
						<span v-if="p.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
 | 
			
		||||
						<a class="reply" v-if="p.reply">%fa:reply%</a>
 | 
			
		||||
						<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
 | 
			
		||||
						<a class="rp" v-if="p.renote != null">RP:</a>
 | 
			
		||||
					</div>
 | 
			
		||||
| 
						 | 
				
			
			@ -380,12 +385,14 @@ root(isDark)
 | 
			
		|||
					margin-left auto
 | 
			
		||||
					font-size 0.9em
 | 
			
		||||
 | 
			
		||||
					> .mobile
 | 
			
		||||
						margin-right 6px
 | 
			
		||||
					> *
 | 
			
		||||
						color isDark ? #606984 : #c0c0c0
 | 
			
		||||
 | 
			
		||||
					> .created-at
 | 
			
		||||
						color isDark ? #606984 : #c0c0c0
 | 
			
		||||
					> .mobile
 | 
			
		||||
						margin-right 6px
 | 
			
		||||
 | 
			
		||||
					> .visibility
 | 
			
		||||
						margin-left 6px
 | 
			
		||||
 | 
			
		||||
			> .body
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,6 +1,7 @@
 | 
			
		|||
<template>
 | 
			
		||||
<div class="mk-sub-note-content">
 | 
			
		||||
	<div class="body">
 | 
			
		||||
		<span v-if="note.isHidden" style="opacity: 0.5">(この投稿は非公開です)</span>
 | 
			
		||||
		<a class="reply" v-if="note.replyId">%fa:reply%</a>
 | 
			
		||||
		<mk-note-html v-if="note.text" :text="note.text" :i="os.i"/>
 | 
			
		||||
		<a class="rp" v-if="note.renoteId">RP: ...</a>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -12,6 +12,7 @@ import NoteWatching, { deleteNoteWatching } from './note-watching';
 | 
			
		|||
import NoteReaction from './note-reaction';
 | 
			
		||||
import Favorite, { deleteFavorite } from './favorite';
 | 
			
		||||
import Notification, { deleteNotification } from './notification';
 | 
			
		||||
import Following from './following';
 | 
			
		||||
 | 
			
		||||
const Note = db.get<INote>('notes');
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -46,7 +47,18 @@ export type INote = {
 | 
			
		|||
	repliesCount: number;
 | 
			
		||||
	reactionCounts: any;
 | 
			
		||||
	mentions: mongo.ObjectID[];
 | 
			
		||||
	visibility: 'public' | 'unlisted' | 'private' | 'direct';
 | 
			
		||||
 | 
			
		||||
	/**
 | 
			
		||||
	 * public ... 公開
 | 
			
		||||
	 * home ... ホームタイムライン(ユーザーページのタイムライン含む)のみに流す
 | 
			
		||||
	 * followers ... フォロワーのみ
 | 
			
		||||
	 * specified ... visibleUserIds で指定したユーザーのみ
 | 
			
		||||
	 * private ... 自分のみ
 | 
			
		||||
	 */
 | 
			
		||||
	visibility: 'public' | 'home' | 'followers' | 'specified' | 'private';
 | 
			
		||||
 | 
			
		||||
	visibleUserIds: mongo.ObjectID[];
 | 
			
		||||
 | 
			
		||||
	geo: {
 | 
			
		||||
		coordinates: number[];
 | 
			
		||||
		altitude: number;
 | 
			
		||||
| 
						 | 
				
			
			@ -151,9 +163,9 @@ export const pack = async (
 | 
			
		|||
		detail: boolean
 | 
			
		||||
	}
 | 
			
		||||
) => {
 | 
			
		||||
	const opts = options || {
 | 
			
		||||
		detail: true,
 | 
			
		||||
	};
 | 
			
		||||
	const opts = Object.assign({
 | 
			
		||||
		detail: true
 | 
			
		||||
	}, options);
 | 
			
		||||
 | 
			
		||||
	// Me
 | 
			
		||||
	const meId: mongo.ObjectID = me
 | 
			
		||||
| 
						 | 
				
			
			@ -181,12 +193,61 @@ export const pack = async (
 | 
			
		|||
 | 
			
		||||
	if (!_note) throw `invalid note arg ${note}`;
 | 
			
		||||
 | 
			
		||||
	let hide = false;
 | 
			
		||||
 | 
			
		||||
	// visibility が private かつ投稿者のIDが自分のIDではなかったら非表示
 | 
			
		||||
	if (_note.visibility == 'private' && (meId == null || !meId.equals(_note.userId))) {
 | 
			
		||||
		hide = true;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	// visibility が specified かつ自分が指定されていなかったら非表示
 | 
			
		||||
	if (_note.visibility == 'specified') {
 | 
			
		||||
		if (meId == null) {
 | 
			
		||||
			hide = true;
 | 
			
		||||
		} else if (meId.equals(_note.userId)) {
 | 
			
		||||
			hide = false;
 | 
			
		||||
		} else {
 | 
			
		||||
			// 指定されているかどうか
 | 
			
		||||
			const specified = _note.visibleUserIds.some(id => id.equals(meId));
 | 
			
		||||
 | 
			
		||||
			if (specified) {
 | 
			
		||||
				hide = false;
 | 
			
		||||
			} else {
 | 
			
		||||
				hide = true;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	// visibility が followers かつ自分が投稿者のフォロワーでなかったら非表示
 | 
			
		||||
	if (_note.visibility == 'followers') {
 | 
			
		||||
		if (meId == null) {
 | 
			
		||||
			hide = true;
 | 
			
		||||
		} else if (meId.equals(_note.userId)) {
 | 
			
		||||
			hide = false;
 | 
			
		||||
		} else {
 | 
			
		||||
			// フォロワーかどうか
 | 
			
		||||
			const following = await Following.findOne({
 | 
			
		||||
				followeeId: _note.userId,
 | 
			
		||||
				followerId: meId
 | 
			
		||||
			});
 | 
			
		||||
 | 
			
		||||
			if (following == null) {
 | 
			
		||||
				hide = true;
 | 
			
		||||
			} else {
 | 
			
		||||
				hide = false;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	const id = _note._id;
 | 
			
		||||
 | 
			
		||||
	// Rename _id to id
 | 
			
		||||
	_note.id = _note._id;
 | 
			
		||||
	delete _note._id;
 | 
			
		||||
 | 
			
		||||
	delete _note._user;
 | 
			
		||||
	delete _note._reply;
 | 
			
		||||
	delete _note.repost;
 | 
			
		||||
	delete _note.mentions;
 | 
			
		||||
	if (_note.geo) delete _note.geo.type;
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -204,11 +265,9 @@ export const pack = async (
 | 
			
		|||
	}
 | 
			
		||||
 | 
			
		||||
	// Populate media
 | 
			
		||||
	if (_note.mediaIds) {
 | 
			
		||||
		_note.media = Promise.all(_note.mediaIds.map(fileId =>
 | 
			
		||||
	_note.media = hide ? [] : Promise.all(_note.mediaIds.map(fileId =>
 | 
			
		||||
		packFile(fileId)
 | 
			
		||||
	));
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	// When requested a detailed note data
 | 
			
		||||
	if (opts.detail) {
 | 
			
		||||
| 
						 | 
				
			
			@ -263,7 +322,7 @@ export const pack = async (
 | 
			
		|||
		}
 | 
			
		||||
 | 
			
		||||
		// Poll
 | 
			
		||||
		if (meId && _note.poll) {
 | 
			
		||||
		if (meId && _note.poll && !hide) {
 | 
			
		||||
			_note.poll = (async (poll) => {
 | 
			
		||||
				const vote = await PollVote
 | 
			
		||||
					.findOne({
 | 
			
		||||
| 
						 | 
				
			
			@ -304,5 +363,12 @@ export const pack = async (
 | 
			
		|||
	// resolve promises in _note object
 | 
			
		||||
	_note = await rap(_note);
 | 
			
		||||
 | 
			
		||||
	if (hide) {
 | 
			
		||||
		_note.mediaIds = [];
 | 
			
		||||
		_note.text = null;
 | 
			
		||||
		_note.poll = null;
 | 
			
		||||
		_note.isHidden = true;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	return _note;
 | 
			
		||||
};
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -5,6 +5,7 @@ import post from '../../../../services/note/create';
 | 
			
		|||
import { IRemoteUser } from '../../../../models/user';
 | 
			
		||||
import { IAnnounce, INote } from '../../type';
 | 
			
		||||
import { fetchNote, resolveNote } from '../../models/note';
 | 
			
		||||
import { resolvePerson } from '../../models/person';
 | 
			
		||||
 | 
			
		||||
const log = debug('misskey:activitypub');
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -30,16 +31,22 @@ export default async function(resolver: Resolver, actor: IRemoteUser, activity:
 | 
			
		|||
 | 
			
		||||
	//#region Visibility
 | 
			
		||||
	let visibility = 'public';
 | 
			
		||||
	if (!activity.to.includes('https://www.w3.org/ns/activitystreams#Public')) visibility = 'unlisted';
 | 
			
		||||
	if (activity.cc.length == 0) visibility = 'private';
 | 
			
		||||
	// TODO
 | 
			
		||||
	if (visibility != 'public') throw new Error('unspported visibility');
 | 
			
		||||
	let visibleUsers = [];
 | 
			
		||||
	if (!note.to.includes('https://www.w3.org/ns/activitystreams#Public')) {
 | 
			
		||||
		if (note.cc.includes('https://www.w3.org/ns/activitystreams#Public')) {
 | 
			
		||||
			visibility = 'home';
 | 
			
		||||
		} else {
 | 
			
		||||
			visibility = 'specified';
 | 
			
		||||
			visibleUsers = await Promise.all(note.to.map(uri => resolvePerson(uri)));
 | 
			
		||||
		}
 | 
			
		||||
	}	if (activity.cc.length == 0) visibility = 'followers';
 | 
			
		||||
	//#endergion
 | 
			
		||||
 | 
			
		||||
	await post(actor, {
 | 
			
		||||
		createdAt: new Date(activity.published),
 | 
			
		||||
		renote,
 | 
			
		||||
		visibility,
 | 
			
		||||
		visibleUsers,
 | 
			
		||||
		uri
 | 
			
		||||
	});
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -65,10 +65,16 @@ export async function createNote(value: any, resolver?: Resolver, silent = false
 | 
			
		|||
 | 
			
		||||
	//#region Visibility
 | 
			
		||||
	let visibility = 'public';
 | 
			
		||||
	if (!note.to.includes('https://www.w3.org/ns/activitystreams#Public')) visibility = 'unlisted';
 | 
			
		||||
	if (note.cc.length == 0) visibility = 'private';
 | 
			
		||||
	// TODO
 | 
			
		||||
	if (visibility != 'public') return null;
 | 
			
		||||
	let visibleUsers = [];
 | 
			
		||||
	if (!note.to.includes('https://www.w3.org/ns/activitystreams#Public')) {
 | 
			
		||||
		if (note.cc.includes('https://www.w3.org/ns/activitystreams#Public')) {
 | 
			
		||||
			visibility = 'home';
 | 
			
		||||
		} else {
 | 
			
		||||
			visibility = 'specified';
 | 
			
		||||
			visibleUsers = await Promise.all(note.to.map(uri => resolvePerson(uri)));
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	if (note.cc.length == 0) visibility = 'followers';
 | 
			
		||||
	//#endergion
 | 
			
		||||
 | 
			
		||||
	// 添付メディア
 | 
			
		||||
| 
						 | 
				
			
			@ -99,6 +105,7 @@ export async function createNote(value: any, resolver?: Resolver, silent = false
 | 
			
		|||
		viaMobile: false,
 | 
			
		||||
		geo: undefined,
 | 
			
		||||
		visibility,
 | 
			
		||||
		visibleUsers,
 | 
			
		||||
		uri: note.id
 | 
			
		||||
	}, silent);
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -3,6 +3,10 @@
 | 
			
		|||
 * @param {*} note 投稿
 | 
			
		||||
 */
 | 
			
		||||
const summarize = (note: any): string => {
 | 
			
		||||
	if (note.isHidden) {
 | 
			
		||||
		return '(非公開の投稿)';
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	let summary = '';
 | 
			
		||||
 | 
			
		||||
	// チャンネル
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -3,7 +3,7 @@
 | 
			
		|||
 */
 | 
			
		||||
import $ from 'cafy'; import ID from '../../../../cafy-id';
 | 
			
		||||
import Note, { INote, isValidText, isValidCw, pack } from '../../../../models/note';
 | 
			
		||||
import { ILocalUser } from '../../../../models/user';
 | 
			
		||||
import User, { ILocalUser } from '../../../../models/user';
 | 
			
		||||
import Channel, { IChannel } from '../../../../models/channel';
 | 
			
		||||
import DriveFile from '../../../../models/drive-file';
 | 
			
		||||
import create from '../../../../services/note/create';
 | 
			
		||||
| 
						 | 
				
			
			@ -14,9 +14,20 @@ import { IApp } from '../../../../models/app';
 | 
			
		|||
 */
 | 
			
		||||
module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res, rej) => {
 | 
			
		||||
	// Get 'visibility' parameter
 | 
			
		||||
	const [visibility = 'public', visibilityErr] = $(params.visibility).optional.string().or(['public', 'unlisted', 'private', 'direct']).get();
 | 
			
		||||
	const [visibility = 'public', visibilityErr] = $(params.visibility).optional.string().or(['public', 'home', 'followers', 'specified', 'private']).get();
 | 
			
		||||
	if (visibilityErr) return rej('invalid visibility');
 | 
			
		||||
 | 
			
		||||
	// Get 'visibleUserIds' parameter
 | 
			
		||||
	const [visibleUserIds, visibleUserIdsErr] = $(params.visibleUserIds).optional.array($().type(ID)).unique().min(1).get();
 | 
			
		||||
	if (visibleUserIdsErr) return rej('invalid visibleUserIds');
 | 
			
		||||
 | 
			
		||||
	let visibleUsers = [];
 | 
			
		||||
	if (visibleUserIds !== undefined) {
 | 
			
		||||
		visibleUsers = await Promise.all(visibleUserIds.map(id => User.findOne({
 | 
			
		||||
			_id: id
 | 
			
		||||
		})));
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	// Get 'text' parameter
 | 
			
		||||
	const [text = null, textErr] = $(params.text).optional.nullable.string().pipe(isValidText).get();
 | 
			
		||||
	if (textErr) return rej('invalid text');
 | 
			
		||||
| 
						 | 
				
			
			@ -191,6 +202,7 @@ module.exports = (params, user: ILocalUser, app: IApp) => new Promise(async (res
 | 
			
		|||
		app,
 | 
			
		||||
		viaMobile,
 | 
			
		||||
		visibility,
 | 
			
		||||
		visibleUsers,
 | 
			
		||||
		geo
 | 
			
		||||
	});
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -30,6 +30,7 @@ export default async (user: IUser, data: {
 | 
			
		|||
	tags?: string[];
 | 
			
		||||
	cw?: string;
 | 
			
		||||
	visibility?: string;
 | 
			
		||||
	visibleUsers?: IUser[];
 | 
			
		||||
	uri?: string;
 | 
			
		||||
	app?: IApp;
 | 
			
		||||
}, silent = false) => new Promise<INote>(async (res, rej) => {
 | 
			
		||||
| 
						 | 
				
			
			@ -57,6 +58,10 @@ export default async (user: IUser, data: {
 | 
			
		|||
		});
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	if (data.visibleUsers) {
 | 
			
		||||
		data.visibleUsers = data.visibleUsers.filter(x => x != null);
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	const insert: any = {
 | 
			
		||||
		createdAt: data.createdAt,
 | 
			
		||||
		mediaIds: data.media ? data.media.map(file => file._id) : [],
 | 
			
		||||
| 
						 | 
				
			
			@ -71,6 +76,11 @@ export default async (user: IUser, data: {
 | 
			
		|||
		geo: data.geo || null,
 | 
			
		||||
		appId: data.app ? data.app._id : null,
 | 
			
		||||
		visibility: data.visibility,
 | 
			
		||||
		visibleUserIds: data.visibility == 'specified'
 | 
			
		||||
			? data.visibleUsers
 | 
			
		||||
				? data.visibleUsers.map(u => u._id)
 | 
			
		||||
				: []
 | 
			
		||||
			: [],
 | 
			
		||||
 | 
			
		||||
		// 以下非正規化データ
 | 
			
		||||
		_reply: data.reply ? { userId: data.reply.userId } : null,
 | 
			
		||||
| 
						 | 
				
			
			@ -113,16 +123,34 @@ export default async (user: IUser, data: {
 | 
			
		|||
	if (note.channelId == null) {
 | 
			
		||||
		if (!silent) {
 | 
			
		||||
			if (isLocalUser(user)) {
 | 
			
		||||
				if (note.visibility == 'private' || note.visibility == 'followers' || note.visibility == 'specified') {
 | 
			
		||||
					// Publish event to myself's stream
 | 
			
		||||
					stream(note.userId, 'note', await pack(note, user, {
 | 
			
		||||
						detail: true
 | 
			
		||||
					}));
 | 
			
		||||
				} else {
 | 
			
		||||
					// Publish event to myself's stream
 | 
			
		||||
					stream(note.userId, 'note', noteObj);
 | 
			
		||||
 | 
			
		||||
					// Publish note to local timeline stream
 | 
			
		||||
					if (note.visibility != 'home') {
 | 
			
		||||
						publishLocalTimelineStream(noteObj);
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
			// Publish note to global timeline stream
 | 
			
		||||
			publishGlobalTimelineStream(noteObj);
 | 
			
		||||
 | 
			
		||||
			if (note.visibility == 'specified') {
 | 
			
		||||
				data.visibleUsers.forEach(async u => {
 | 
			
		||||
					stream(u._id, 'note', await pack(note, u, {
 | 
			
		||||
						detail: true
 | 
			
		||||
					}));
 | 
			
		||||
				});
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
			if (note.visibility == 'public' || note.visibility == 'home' || note.visibility == 'followers') {
 | 
			
		||||
				// フォロワーに配信
 | 
			
		||||
				Following.find({
 | 
			
		||||
					followeeId: note.userId
 | 
			
		||||
| 
						 | 
				
			
			@ -149,6 +177,7 @@ export default async (user: IUser, data: {
 | 
			
		|||
						}
 | 
			
		||||
					});
 | 
			
		||||
				});
 | 
			
		||||
			}
 | 
			
		||||
 | 
			
		||||
			// リストに配信
 | 
			
		||||
			UserList.find({
 | 
			
		||||
| 
						 | 
				
			
			@ -160,7 +189,7 @@ export default async (user: IUser, data: {
 | 
			
		|||
			});
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		//#region AP配送
 | 
			
		||||
		//#region リプライとAnnounceのAP配送
 | 
			
		||||
		const render = async () => {
 | 
			
		||||
			const content = data.renote && data.text == null
 | 
			
		||||
				? renderAnnounce(data.renote.uri ? data.renote.uri : await renderNote(data.renote))
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue