wip

src/client/app/desktop/script.ts

@@ -29,7 +29,6 @@ import MkUser from './views/pages/user/user.vue';
 import MkFavorites from './views/pages/favorites.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
-import MkUserList from './views/pages/user-list.vue';
 import MkHomeCustomize from './views/pages/home-customize.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkNote from './views/pages/note.vue';
@@ -63,7 +62,6 @@ init(async (launch) => {
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
-			{ path: '/i/lists/:list', component: MkUserList },
 			{ path: '/selectdrive', component: MkSelectDrive },
 			{ path: '/search', component: MkSearch },
 			{ path: '/tags/:tag', component: MkTag },

src/client/app/desktop/views/components/received-follow-requests-window.vue

@@ -47,8 +47,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.slpqaxdoxhvglersgjukmvizkqbmbokc
-root(isDark)
 	padding 16px
 
 	> button
@@ -57,16 +56,10 @@ root(isDark)
 	> div
 		display flex
 		padding 16px
-		border solid 1px isDark ? #1c2023 : #eee
+		border solid 1px var(--faceDivider)
 		border-radius 4px
 
 		> span
 			margin 0 0 0 auto
 
-.slpqaxdoxhvglersgjukmvizkqbmbokc[data-darkmode]
-	root(true)
-
-.slpqaxdoxhvglersgjukmvizkqbmbokc:not([data-darkmode])
-	root(false)
-
 </style>

src/client/app/desktop/views/components/renote-form.vue

@@ -57,16 +57,13 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.mk-renote-form
-
-root(isDark)
-
 	> .preview
 		margin 16px 22px
 
 	> footer
 		height 72px
-		background isDark ? #313543 : var(--primaryLighten95)
+		background var(--desktopRenoteFormFooter)
 
 		> .quote
 			position absolute
@@ -87,10 +84,4 @@ root(isDark)
 			&.ok
 				right 16px
 
-.mk-renote-form[data-darkmode]
-	root(true)
-
-.mk-renote-form:not([data-darkmode])
-	root(false)
-
 </style>

src/client/app/desktop/views/components/ui-notification.vue

@@ -36,7 +36,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-ui-notification
 	display block
 	position fixed
 	z-index 10000
@@ -46,10 +46,10 @@ root(isDark)
 	margin 0 auto
 	padding 128px 0 0 0
 	width 500px
-	color rgba(isDark ? #fff : #000, 0.6)
+	color var(--desktopNotificationFg)
-	//background rgba(var(--face), 0.9)
+	background var(--desktopNotificationBg)
 	border-radius 0 0 8px 8px
-	box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2)
+	box-shadow 0 2px 4px var(--desktopNotificationShadow)
 	transform translateY(-64px)
 	opacity 0
 
@@ -58,10 +58,4 @@ root(isDark)
 		line-height 64px
 		text-align center
 
-.mk-ui-notification[data-darkmode]
-	root(true)
-
-.mk-ui-notification:not([data-darkmode])
-	root(false)
-
 </style>

src/client/app/desktop/views/components/user-lists-window.vue

@@ -47,8 +47,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.xkxvokkjlptzyewouewmceqcxhpgzprp
-root(isDark)
 	padding 16px
 
 	> button
@@ -57,13 +56,7 @@ root(isDark)
 	> a
 		display block
 		padding 16px
-		border solid 1px isDark ? #1c2023 : #eee
+		border solid 1px var(--faceDivider)
 		border-radius 4px
 
-.xkxvokkjlptzyewouewmceqcxhpgzprp[data-darkmode]
-	root(true)
-
-.xkxvokkjlptzyewouewmceqcxhpgzprp:not([data-darkmode])
-	root(false)
-
 </style>

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

@@ -83,9 +83,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.mk-user-preview
-
-root(isDark)
 	position absolute
 	z-index 2048
 	margin-top -8px
@@ -99,7 +97,7 @@ root(isDark)
 
 	> .banner
 		height 84px
-		background-color isDark ? #1c1e26 : #f5f5f5
+		background-color rgba(0, 0, 0, 0.1)
 		background-size cover
 		background-position center
 
@@ -123,19 +121,20 @@ root(isDark)
 			margin 0
 			font-weight bold
 			line-height 16px
-			color isDark ? #fff : #656565
+			color var(--text)
 
 		> .username
 			display block
 			margin 0
 			line-height 16px
 			font-size 0.8em
-			color isDark ? #606984 : #999
+			color var(--text)
+			opacity 0.7
 
 	> .description
 		padding 0 16px
 		font-size 0.7em
-		color isDark ? #9ea4ad : #555
+		color var(--text)
 
 	> .status
 		padding 8px 16px
@@ -147,7 +146,7 @@ root(isDark)
 			> p
 				margin 0
 				font-size 0.7em
-				color #aaa
+				color var(--text)
 
 			> span
 				font-size 1em
@@ -158,10 +157,4 @@ root(isDark)
 		top 92px
 		right 8px
 
-.mk-user-preview[data-darkmode]
-	root(true)
-
-.mk-user-preview:not([data-darkmode])
-	root(false)
-
 </style>

src/client/app/desktop/views/pages/deck/deck.column.vue

@@ -269,9 +269,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs
-
-root(isDark)
 	$header-height = 42px
 
 	width 330px
@@ -301,7 +299,7 @@ root(isDark)
 		min-width 285px
 
 	&.naked
-		background rgba(#000, isDark ? 0.25 : 0.1)
+		background var(--deckAcrylicColumnBg)
 
 		> header
 			background transparent
@@ -350,7 +348,7 @@ root(isDark)
 				color var(--faceTextButtonHover)
 
 			&:active
-				color isDark ? #b2c1d5 : #999
+				color var(--faceTextButtonActive)
 
 		> .toggleActive
 			margin-left -16px
@@ -364,10 +362,4 @@ root(isDark)
 		overflow auto
 		overflow-x hidden
 
-.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs[data-darkmode]
-	root(true)
-
-.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs:not([data-darkmode])
-	root(false)
-
 </style>

src/client/app/desktop/views/pages/deck/deck.note.vue

@@ -214,9 +214,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.srwrkujossgfuhrbnvqkybtzxpblgchi
-
-mediaRoot(isDark)
 	font-size 13px
 	margin 4px 12px
 
@@ -226,7 +224,7 @@ mediaRoot(isDark)
 	&:last-child
 		margin-bottom 12px
 
-root(isDark)
+.zyjjkidcqjnlegkqebitfviomuqmseqk
 	font-size 13px
 	border-bottom solid 1px var(--faceDivider)
 
@@ -409,7 +407,7 @@ root(isDark)
 						margin-right 28px
 
 					&:hover
-						color isDark ? #9198af : #666
+						color var(--noteActionsHover)
 
 					> .count
 						display inline
@@ -419,16 +417,4 @@ root(isDark)
 					&.reacted
 						color var(--primary)
 
-.zyjjkidcqjnlegkqebitfviomuqmseqk[data-darkmode]
-	root(true)
-
-.zyjjkidcqjnlegkqebitfviomuqmseqk:not([data-darkmode])
-	root(false)
-
-.srwrkujossgfuhrbnvqkybtzxpblgchi[data-darkmode]
-	mediaRoot(true)
-
-.srwrkujossgfuhrbnvqkybtzxpblgchi:not([data-darkmode])
-	mediaRoot(false)
-
 </style>

src/client/app/desktop/views/pages/deck/deck.notes.vue

@@ -195,9 +195,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.eamppglmnmimdhrlzhplwpvyeaqmmhxu
-
-root(isDark)
 	.transition
 		.mk-notes-enter
 		.mk-notes-leave-to
@@ -238,15 +236,9 @@ root(isDark)
 			border-bottom-right-radius 6px
 
 			&:hover
-				background isDark ? #2e3440 : #f5f5f5
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 			&:active
-				background isDark ? #21242b : #eee
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
-
-.eamppglmnmimdhrlzhplwpvyeaqmmhxu[data-darkmode]
-	root(true)
-
-.eamppglmnmimdhrlzhplwpvyeaqmmhxu:not([data-darkmode])
-	root(false)
 
 </style>

src/client/app/desktop/views/pages/deck/deck.notification.vue

@@ -142,7 +142,7 @@ root(isDark)
 
 				> .mk-time
 					margin-left auto
-					color isDark ? #606984 : #c0c0c0
+					color var(--noteHeaderInfo)
 					font-size 0.9em
 
 			> .note-preview

src/client/app/desktop/views/pages/deck/deck.vue

@@ -221,9 +221,7 @@ export default Vue.extend({
 </style>
 
 <style lang="stylus" scoped>
-
+.qlvquzbjribqcaozciifydkngcwtyzje
-
-root(isDark)
 	display flex
 	flex 1
 	padding 16px 0 16px 16px
@@ -251,18 +249,12 @@ root(isDark)
 
 	> button
 		padding 0 16px
-		color isDark ? #93a0a5 : #888
+		color var(--faceTextButton)
 
 		&:hover
-			color isDark ? #b8c5ca : #777
+			color var(--faceTextButtonHover)
 
 		&:active
-			color isDark ? #fff : #555
+			color var(--faceTextButtonActive)
-
-.qlvquzbjribqcaozciifydkngcwtyzje[data-darkmode]
-	root(true)
-
-.qlvquzbjribqcaozciifydkngcwtyzje:not([data-darkmode])
-	root(false)
 
 </style>

src/client/app/desktop/views/pages/deck/deck.widgets-column.vue

@@ -135,9 +135,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
+.wtdtxvecapixsepjtcupubtsmometobz
-
-root(isDark)
 	.gqpwvtwtprsbmnssnbicggtwqhmylhnq
 		> header
 			padding 16px
@@ -169,14 +167,5 @@ root(isDark)
 				background rgba(#000, 0.7)
 				border-radius 4px
 
-		> header
-			color isDark ? #fff : #000
-
-.wtdtxvecapixsepjtcupubtsmometobz[data-darkmode]
-	root(true)
-
-.wtdtxvecapixsepjtcupubtsmometobz:not([data-darkmode])
-	root(false)
-
 </style>
 

src/client/app/desktop/views/pages/user-list.users.vue

@@ -1,125 +0,0 @@
-<template>
-<div>
-	<mk-widget-container>
-		<template slot="header">%fa:users% %i18n:@users%</template>
-		<button slot="func" title="%i18n:@add-user%" @click="add">%fa:plus%</button>
-
-		<div data-id="d0b63759-a822-4556-a5ce-373ab966e08a">
-			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw% %i18n:common.loading%<mk-ellipsis/></p>
-			<template v-else-if="users.length != 0">
-				<div class="user" v-for="_user in users">
-					<mk-avatar class="avatar" :user="_user"/>
-					<div class="body">
-						<router-link class="name" :to="_user | userPage" v-user-preview="_user.id">{{ _user | userName }}</router-link>
-						<p class="username">@{{ _user | acct }}</p>
-					</div>
-				</div>
-			</template>
-			<p class="empty" v-else>%i18n:@no-one%</p>
-		</div>
-	</mk-widget-container>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: {
-		list: {
-			type: Object,
-			required: true
-		}
-	},
-	data() {
-		return {
-			fetching: true,
-			users: []
-		};
-	},
-	mounted() {
-		(this as any).api('users/show', {
-			userIds: this.list.userIds
-		}).then(users => {
-			this.users = users;
-			this.fetching = false;
-		});
-	},
-	methods: {
-		add() {
-			(this as any).apis.input({
-				title: '%i18n:@username%',
-			}).then(async (username: string) => {
-				if (username.startsWith('@')) username = username.slice(1);
-				const user = await (this as any).api('users/show', {
-					username
-				});
-
-				(this as any).api('users/lists/push', {
-					listId: this.list.id,
-					userId: user.id
-				});
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-root(isDark)
-	> .user
-		padding 16px
-		border-bottom solid 1px isDark ? #1c2023 : #eee
-
-		&:last-child
-			border-bottom none
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		> .avatar
-			display block
-			float left
-			margin 0 12px 0 0
-			width 42px
-			height 42px
-			border-radius 8px
-
-		> .body
-			float left
-			width calc(100% - 54px)
-
-			> .name
-				margin 0
-				font-size 16px
-				line-height 24px
-				color isDark ? #fff : #555
-
-			> .username
-				display block
-				margin 0
-				font-size 15px
-				line-height 16px
-				color isDark ? #606984 : #ccc
-
-	> .empty
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-	> .fetching
-		margin 0
-		padding 16px
-		text-align center
-		color #aaa
-
-[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"][data-darkmode]
-	root(true)
-
-[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"]:not([data-darkmode])
-	root(false)
-
-</style>

src/client/app/desktop/views/pages/user-list.vue

@@ -1,71 +0,0 @@
-<template>
-<mk-ui>
-	<div v-if="!fetching" data-id="02010e15-cc48-4245-8636-16078a9b623c">
-		<div>
-			<div><h1>{{ list.title }}</h1></div>
-			<x-users :list="list"/>
-		</div>
-		<main>
-			<mk-user-list-timeline :list="list"/>
-		</main>
-	</div>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XUsers from './user-list.users.vue';
-
-export default Vue.extend({
-	components: {
-		XUsers
-	},
-	data() {
-		return {
-			fetching: true,
-			list: null
-		};
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	mounted() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this as any).api('users/lists/show', {
-				listId: this.$route.params.list
-			}).then(list => {
-				this.list = list;
-				this.fetching = false;
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-[data-id="02010e15-cc48-4245-8636-16078a9b623c"]
-	display flex
-	justify-content center
-	margin 0 auto
-	max-width 1200px
-
-	> main
-	> div > div
-		> *:not(:last-child)
-			margin-bottom 16px
-
-	> main
-		padding 16px
-		width calc(100% - 275px * 2)
-
-	> div
-		width 275px
-		margin 0
-		padding 16px 0 16px 16px
-
-</style>

src/client/theme/dark.json

@@ -126,9 +126,13 @@
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
 	"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
 	"desktopHeaderSearchFg": "#fff",
+	"desktopNotificationBg": ":alpha<0.9<$secondary",
+	"desktopNotificationFg": ":alpha<0.7<$text",
+	"desktopNotificationShadow": "rgba(0, 0, 0, 0.4)",
 	"desktopPostFormBg": "@face",
 	"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
 	"desktopPostFormTextareaFg": "#fff",
+	"desktopRenoteFormFooter": ":lighten<5<$secondary",
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
@@ -136,6 +140,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"deckAcrylicColumnBg": "rgba(0, 0, 0, 0.25)",
+
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",

src/client/theme/light.json

@@ -126,9 +126,13 @@
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
 	"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
 	"desktopHeaderSearchFg": "#000",
-	"desktopPostFormBg": "#fff6f6",
+	"desktopNotificationBg": ":alpha<0.9<$secondary",
+	"desktopNotificationFg": ":alpha<0.7<$text",
+	"desktopNotificationShadow": "rgba(0, 0, 0, 0.2)",
+	"desktopPostFormBg": ":lighten<33<$primary",
 	"desktopPostFormTextareaBg": "#fff",
 	"desktopPostFormTextareaFg": "#333",
+	"desktopRenoteFormFooter": ":lighten<33<$primary",
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
@@ -136,6 +140,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"deckAcrylicColumnBg": "rgba(0, 0, 0, 0.1)",
+
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",