Merge pull request #9 from taiyme/taiyme

DA-TENSHI · Nov 13, 2024 · d6578de · d6578de
2 parents db0113a + 62c1de2
commit d6578de
Showing 1 changed file with 53 additions and 29 deletions.
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@click="toggleReaction()"
 	@contextmenu.prevent.stop="menu"
 >
-	<MkReactionIcon :class="defaultStore.state.limitWidthOfReaction ? $style.limitWidth : ''" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
+	<MkReactionIcon :class="[$style.icon, { [$style.limitWidth]: defaultStore.state.limitWidthOfReaction }]" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
 	<span :class="$style.count">{{ count }}</span>
 </button>
 </template>
@@ -170,60 +170,75 @@ if (!mock) {
 
 <style lang="scss" module>
 .root {
+	box-sizing: border-box;
+	overflow: clip;
 	display: inline-flex;
-	height: 42px;
-	margin: 2px;
-	padding: 0 6px;
-	font-size: 1.5em;
+	height: 34px;
+	margin: 3px;
 	border-radius: 6px;
 	align-items: center;
 	justify-content: center;
+	background-color: var(--MI_THEME-panel);
+	color: var(--MI_THEME-fg);
+	transition: background-color 0.1s ease, outline-color 0.1s ease;
 
 	&.canToggle {
-		background: var(--MI_THEME-buttonBg);
+		box-shadow: 0 4px 14px -8px var(--MI_THEME-shadow);
+		outline: rgb(from var(--MI_THEME-fg) r g b / 0.5) solid 0.5px;
 
 		&:hover {
-			background: rgba(0, 0, 0, 0.1);
+			background-color: hsl(from var(--MI_THEME-panel) h s calc(l - (var(--TMS-hsl-base-l) * 2)));
+			outline: rgb(from var(--MI_THEME-fg) r g b / 0.8) solid 0.5px;
+		}
+	}
+
+	&.reacted {
+		background-color: var(--MI_THEME-accent);
+		color: var(--MI_THEME-fgOnAccent);
+		outline: var(--MI_THEME-accent) solid 0.5px;
+
+		&:hover {
+			background-color: hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5)));
+			outline: hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))) solid 0.5px;
 		}
 	}
 
 	&:not(.canToggle) {
 		cursor: default;
+		outline: rgb(from var(--MI_THEME-fg) r g b / 0.5) dashed 1px;
 	}
 
 	&.small {
-		height: 32px;
-		font-size: 1em;
+		height: 24px;
+		margin: 2px;
 		border-radius: 4px;
 
+		> .icon {
+			height: 24px;
+			font-size: 1em;
+		}
+
 		> .count {
+			padding: 0 3px;
 			font-size: 0.9em;
-			line-height: 32px;
+			line-height: 24px;
 		}
 	}
 
 	&.large {
-		height: 52px;
-		font-size: 2em;
+		height: 44px;
+		margin: 4px;
 		border-radius: 8px;
 
-		> .count {
-			font-size: 0.6em;
-			line-height: 52px;
+		> .icon {
+			height: 44px;
+			font-size: 2em;
 		}
-	}
-
-	&.reacted, &.reacted:hover {
-		background: var(--MI_THEME-accentedBg);
-		color: var(--MI_THEME-accent);
-		box-shadow: 0 0 0 1px var(--MI_THEME-accent) inset;
 
 		> .count {
-			color: var(--MI_THEME-accent);
-		}
-
-		> .icon {
-			filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
+			padding: 0 6px;
+			font-size: 1.2em;
+			line-height: 44px;
 		}
 	}
 }
@@ -233,9 +248,18 @@ if (!mock) {
 	object-fit: contain;
 }
 
+.icon {
+	box-sizing: border-box;
+	padding: 4px;
+	height: 34px;
+	font-size: 1.5em;
+	background-color: #ffffff;
+}
+
 .count {
-	font-size: 0.7em;
-	line-height: 42px;
-	margin: 0 0 0 4px;
+	box-sizing: border-box;
+	padding: 0 6px;
+	font-size: 0.9em;
+	line-height: 34px;
 }
 </style>