From d35f234fb503d6c026af2a32609fc6c24f2244d6 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 16 Aug 2022 22:42:03 -0700
Subject: [PATCH] feat: :lipstick: New note style

---
 CALCKEY.md                              |  5 +++--
 package.json                            |  2 +-
 packages/client/src/components/note.vue | 23 ++++++++++++++++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/CALCKEY.md b/CALCKEY.md
index 8ce5b42747..edc0e3f99b 100644
--- a/CALCKEY.md
+++ b/CALCKEY.md
@@ -23,7 +23,6 @@
 
 - OCR image captioning
 - Swipe through timelines on mobile
-- vue-plyr as video/audio player
 - Admin custom CSS
 - Add back time machine (jump to date)
 - Improve accesibility score
@@ -47,7 +46,6 @@
 - Self hosted, newly designed error images
   - Illustrated by [Henki](https://www.youtube.com/c/Henkiwashere)!
   - Licensed under the CC-BY-SA 4.0.
-- [Profile background as banner](https://codeberg.org/Freeplay/Misskey-Tweaks/src/branch/main/snippets/profile-background.styl)
 - Better timeline top bar
 - Mark as read from notifications widget
 - Less cluttered notification summary
@@ -62,6 +60,7 @@
 - Reply limit bug fixed
 - Make showing the update popup optional
 - Obliteration of Ai-chan
+- vue-plyr as video/audio player
 - [Make showing ads optional](https://github.com/misskey-dev/misskey/pull/8996)
 - [OAuth bearer token authentication](https://github.com/misskey-dev/misskey/pull/9021)
 - [Styled Repair Tools](https://github.com/misskey-dev/misskey/pull/8956)
@@ -93,3 +92,5 @@
 	- 30d8bc9259cb6b72ed76d67b21dbb4cdceca8327: refactor: welcome.setup.vue to composition api
 	- 751921e24f37ed707fe44a40d88eebb1299efa35: make emoji picker case insensitive
 	- 298febeb9c9501e3e3df16982c08657d1da474e0: enhance: add re-collapsing to quoted notes
+- A few changed from [Misskey-Tweaks](https://codeberg.org/Freeplay/Misskey-Tweaks)
+  - [Profile background as banner](https://codeberg.org/Freeplay/Misskey-Tweaks/src/branch/main/snippets/profile-background.styl)
diff --git a/package.json b/package.json
index f933f6d945..c8ed1e1f05 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.118.1-calc.5",
+	"version": "12.118.1-calc.6",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue
index f6f7632313..31f79f981a 100644
--- a/packages/client/src/components/note.vue
+++ b/packages/client/src/components/note.vue
@@ -340,7 +340,7 @@ function readPromo() {
 		line-height: 24px;
 		font-size: 90%;
 		white-space: pre;
-		color: #d28a3f;
+		color: #f6c177;
 
 		> i {
 			margin-right: 4px;
@@ -401,6 +401,14 @@ function readPromo() {
 				flex-shrink: 0;
 				color: inherit;
 
+				&::after {
+					content: "";
+					position: absolute;
+					inset: 0;
+					z-index: -1;
+					cursor: default;
+				}
+
 				> .dropdownIcon {
 					margin-right: 4px;
 				}
@@ -415,6 +423,12 @@ function readPromo() {
 	> .article {
 		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;
@@ -438,6 +452,11 @@ function readPromo() {
 					margin: 0;
 					padding: 0;
 					overflow-wrap: break-word;
+					background: var(--X3);
+					padding: 6px 10px;
+					width: 90%;
+					border-radius: 10px;
+					margin-top: 10px;
 
 					> .text {
 						margin-right: 8px;
@@ -445,6 +464,8 @@ function readPromo() {
 				}
 
 				> .content {
+					position: relative;
+
 					&.isLong {
 						> .showLess {
 							width: 100%;