Reversi (#6765)

* wip

* wip

* wip

* wip

* Update game.setting.vue

* wip

* wip

* Update game.setting.vue

* wip

* Update game.board.vue

* wip

* Update sidebar.ts

6 files changed, 10 insertions, 9 deletions

diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index e79f3c9292..431edf6d18 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -185,7 +185,7 @@ export default defineComponent({
 			transition: color 0.2s ease;
 
 			&:hover {
-				color: var(--textHighlighted);
+				color: var(--fgHighlighted);
 				transition: color 0s;
 			}
 
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index db6d8ad167..c85457a56d 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -20,7 +20,7 @@
 		<header>
 			<MkA v-if="notification.user" class="name" :to="userPage(notification.user)" v-user-preview="notification.user.id"><MkUserName :user="notification.user"/></MkA>
 			<span v-else>{{ notification.header }}</span>
-			<MkTime :time="notification.createdAt" v-if="withTime"/>
+			<MkTime :time="notification.createdAt" v-if="withTime" class="time"/>
 		</header>
 		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<Fa :icon="faQuoteLeft"/>
@@ -260,7 +260,7 @@ export default defineComponent({
 				overflow: hidden;
 			}
 
-			> .mk-time {
+			> .time {
 				margin-left: auto;
 				font-size: 0.9em;
 			}
diff --git a/src/client/components/time.vue b/src/client/components/time.vue
index 3219373739..544746c24b 100644
--- a/src/client/components/time.vue
+++ b/src/client/components/time.vue
@@ -1,5 +1,5 @@
 <template>
-<time class="mk-time" :title="absolute">
+<time :title="absolute">
 	<template v-if="mode == 'relative'">{{ relative }}</template>
 	<template v-else-if="mode == 'absolute'">{{ absolute }}</template>
 	<template v-else-if="mode == 'detail'">{{ absolute }} ({{ relative }})</template>
diff --git a/src/client/components/ui/radio.vue b/src/client/components/ui/radio.vue
index 890ff08751..79715593d0 100644
--- a/src/client/components/ui/radio.vue
+++ b/src/client/components/ui/radio.vue
@@ -52,6 +52,7 @@ export default defineComponent({
 	position: relative;
 	display: inline-block;
 	margin: 16px 32px 0 0;
+	text-align: left;
 	cursor: pointer;
 	transition: all 0.3s;
 
diff --git a/src/client/components/user-info.vue b/src/client/components/user-info.vue
index 09736b1a2c..205a991e63 100644
--- a/src/client/components/user-info.vue
+++ b/src/client/components/user-info.vue
@@ -96,7 +96,7 @@ export default defineComponent({
 			margin: 0;
 			line-height: 16px;
 			font-size: 0.8em;
-			color: var(--text);
+			color: var(--fg);
 			opacity: 0.7;
 		}
 	}
@@ -125,7 +125,7 @@ export default defineComponent({
 			> p {
 				margin: 0;
 				font-size: 0.7em;
-				color: var(--text);
+				color: var(--fg);
 			}
 
 			> span {
diff --git a/src/client/components/user-preview.vue b/src/client/components/user-preview.vue
index d258489860..bc41cc822f 100644
--- a/src/client/components/user-preview.vue
+++ b/src/client/components/user-preview.vue
@@ -151,7 +151,7 @@ export default defineComponent({
 				margin: 0;
 				line-height: 16px;
 				font-size: 0.8em;
-				color: var(--text);
+				color: var(--fg);
 				opacity: 0.7;
 			}
 		}
@@ -159,7 +159,7 @@ export default defineComponent({
 		> .description {
 			padding: 0 16px;
 			font-size: 0.8em;
-			color: var(--text);
+			color: var(--fg);
 		}
 
 		> .status {
@@ -172,7 +172,7 @@ export default defineComponent({
 				> p {
 					margin: 0;
 					font-size: 0.7em;
-					color: var(--text);
+					color: var(--fg);
 				}
 
 				> span {