feat: 💄 New note style

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)

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",

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%;