From fe7a273aeeb03b309362d20e65526cd08263d91b Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 16 Aug 2022 22:47:18 -0700
Subject: [PATCH] fix: :lipstick: style

---
 CALCKEY.md                                   |  1 +
 package.json                                 |  2 +-
 packages/client/src/components/cw-button.vue |  1 +
 packages/client/src/components/note.vue      | 23 +++++++++++---------
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/CALCKEY.md b/CALCKEY.md
index edc0e3f99b..efa7e8ad44 100644
--- a/CALCKEY.md
+++ b/CALCKEY.md
@@ -21,6 +21,7 @@
 
 ## Work in progress
 
+- New note style
 - OCR image captioning
 - Swipe through timelines on mobile
 - Admin custom CSS
diff --git a/package.json b/package.json
index c8ed1e1f05..fe766e9190 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.118.1-calc.6",
+	"version": "12.118.1-calc.6.1",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/cw-button.vue b/packages/client/src/components/cw-button.vue
index dd906f9bf3..8cec6c1a9d 100644
--- a/packages/client/src/components/cw-button.vue
+++ b/packages/client/src/components/cw-button.vue
@@ -42,6 +42,7 @@ const toggle = () => {
 	color: var(--cwFg);
 	background: var(--cwBg);
 	border-radius: 2px;
+	transition: background-color 0.25s ease-in-out;
 
 	&:hover {
 		background: var(--cwHoverBg);
diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue
index 31f79f981a..746b5b23c5 100644
--- a/packages/client/src/components/note.vue
+++ b/packages/client/src/components/note.vue
@@ -298,6 +298,11 @@ function readPromo() {
 	font-size: 1.05em;
 	overflow: clip;
 	contain: content;
+	transition: background-color 0.25s ease-in-out;
+
+	&:hover {
+		background-color: var(--panelHighlight);
+	}
 
 	// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
 	// 下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう
@@ -424,11 +429,6 @@ function readPromo() {
 		display: flex;
 		padding: 28px 32px 18px;
 		pointer-events: all;
-		transition: background-color 0.25s ease-in-out;
-
-		&:hover {
-			background-color: var(--panelHighlight);
-		}
 
 		> .avatar {
 			flex-shrink: 0;
@@ -452,11 +452,14 @@ function readPromo() {
 					margin: 0;
 					padding: 0;
 					overflow-wrap: break-word;
-					background: var(--X3);
-					padding: 6px 10px;
-					width: 90%;
-					border-radius: 10px;
-					margin-top: 10px;
+
+					> .button {
+						background: var(--X3);
+						padding: 6px 10px;
+						width: 90%;
+						border-radius: 10px;
+						margin-top: 10px;
+					}
 
 					> .text {
 						margin-right: 8px;