Merge pull request 'Fix z-index's, better clipping in notes' (#10185) from Freeplay/calckey:notes into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10185

packages/client/src/components/MkMention.vue

@@ -5,7 +5,6 @@
 		class="akbvjaqn"
 		:class="{ isMe }"
 		:to="url"
-		:style="{ background: bgCss }"
 		@click.stop
 	>
 		<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
@@ -37,7 +36,6 @@
 <script lang="ts" setup>
 import { toUnicode } from "punycode";
 import {} from "vue";
-import tinycolor from "tinycolor2";
 import { host as localHost } from "@/config";
 import { $i } from "@/account";
 
@@ -58,17 +56,11 @@ const isMe =
 	`@${props.username}@${toUnicode(props.host)}` ===
 		`@${$i.username}@${toUnicode(localHost)}`.toLowerCase();
 
-const bg = tinycolor(
-	getComputedStyle(document.documentElement).getPropertyValue(
-		isMe ? "--mentionMe" : "--mention"
-	)
-);
-bg.setAlpha(0.1);
-const bgCss = bg.toRgbString();
 </script>
 
 <style lang="scss" scoped>
 .akbvjaqn {
+	position: relative;
 	display: inline-block;
 	padding: 2px 8px 2px 2px;
 	margin-block: 2px;
@@ -78,8 +70,18 @@ const bgCss = bg.toRgbString();
 	text-overflow: ellipsis;
 	color: var(--mention);
 
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: var(--mention);
+		opacity: 0.1;
+		z-index: -1;
+	}
+
 	&.isMe {
-		color: var(--mentionMe);
+		--mention: var(--mentionMe);
 	}
 
 	> .icon {

packages/client/src/components/MkNote.vue

@@ -575,6 +575,8 @@ defineExpose({
 	}
 
 	.note-context {
+		position: relative;
+		z-index: 2;
 		padding: 0 32px 0 32px;
 		display: flex;
 		&:first-child {
@@ -587,6 +589,8 @@ defineExpose({
 			line-height: 28px;
 		}
 		> .line {
+			position: relative;
+			z-index: 2;
 			width: var(--avatarSize);
 			display: flex;
 			margin-right: 14px;
@@ -655,9 +659,15 @@ defineExpose({
 	}
 
 	> .article {
+		overflow: hidden;
 		padding: 4px 32px 10px;
 		cursor: pointer;
 
+		&:first-child, &:nth-child(2) {
+			margin-top: -100px;
+			padding-top: 104px;
+		}
+
 		@media (pointer: coarse) {
 			cursor: default;
 		}
@@ -721,7 +731,8 @@ defineExpose({
 				flex-wrap: wrap;
 				pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
 				margin-top: 0.4em;
-				> .button {
+				> :deep(.button) {
+					position: relative;
 					margin: 0;
 					padding: 8px;
 					opacity: 0.7;
@@ -730,9 +741,27 @@ defineExpose({
 					width: max-content;
 					min-width: max-content;
 					pointer-events: all;
+					height: auto;
 					transition: opacity 0.2s;
+					&::before {
+						content: "";
+						position: absolute;
+						inset: 0;
+						bottom: 2px;
+						background: var(--panel);
+						z-index: -1;
+						transition: background .2s;
+					}
 					&:first-of-type {
 						margin-left: -0.5em;
+						&::before {
+							border-radius: 100px 0 0 100px;
+						}
+					}
+					&:last-of-type {
+						&::before {
+							border-radius: 0 100px 100px 0;
+						}
 					}
 					&:hover {
 						color: var(--fgHighlighted);
@@ -778,6 +807,9 @@ defineExpose({
 		}
 		> .article {
 			padding: 4px 16px 8px;
+			&:first-child, &:nth-child(2) {
+				padding-top: 104px;
+			}
 			> .main > .header-container > .avatar {
 				margin-right: 10px;
 				// top: calc(14px + var(--stickyTop, 0px));

packages/client/src/components/MkNoteDetailed.vue

@@ -595,6 +595,7 @@ onUnmounted(() => {
 		}
 		&:hover,
 		&:focus-within {
+			--panel: var(--panelHighlight);
 			&::before {
 				opacity: 1;
 			}

packages/client/src/components/MkNoteSub.vue

@@ -395,7 +395,8 @@ function noteClick(e) {
 				flex-wrap: wrap;
 				pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
 
-				> .button {
+				> :deep(.button) {
+					position: relative;
 					margin: 0;
 					padding: 8px;
 					opacity: 0.7;
@@ -404,9 +405,27 @@ function noteClick(e) {
 					width: max-content;
 					min-width: max-content;
 					pointer-events: all;
+					height: auto;
 					transition: opacity 0.2s;
+					&::before {
+						content: "";
+						position: absolute;
+						inset: 0;
+						bottom: 2px;
+						background: var(--panel);
+						z-index: -1;
+						transition: background .2s;
+					}
 					&:first-of-type {
 						margin-left: -0.5em;
+						&::before {
+							border-radius: 100px 0 0 100px;
+						}
+					}
+					&:last-of-type {
+						&::before {
+							border-radius: 0 100px 100px 0;
+						}
 					}
 					&:hover {
 						color: var(--fgHighlighted);
@@ -425,9 +444,24 @@ function noteClick(e) {
 			}
 		}
 	}
-	&:first-child > .main > .body {
+
-		margin-top: -200px;
+	&.reply > .main {
-		padding-top: 200px;
+		margin-inline: -200px;
+		padding-inline: 200px;
+		&::before {
+			inset-inline: 176px !important;
+		}
+	}
+	&.reply, &.reply-to {
+		> .main > .body {
+			margin-right: -24px;
+			padding-right: 24px;
+			margin-top: -12px;
+			padding-top: 12px;
+			margin-left: calc(0px - var(--avatarSize) - 32px);
+			padding-left: calc(var(--avatarSize) + 32px);
+			border-radius: var(--radius);
+		}
 	}
 	&.reply {
 		--avatarSize: 38px;
@@ -451,6 +485,8 @@ function noteClick(e) {
 		padding-block: 10px;
 		font-weight: 600;
 		> .line {
+			position: relative;
+			z-index: 2;
 			flex-grow: 0 !important;
 			margin-top: -10px !important;
 			margin-bottom: 10px !important;
@@ -520,6 +556,7 @@ function noteClick(e) {
 		}
 		.line {
 			position: relative;
+			z-index: 2;
 			width: var(--avatarSize);
 			display: flex;
 			flex-grow: 1;
@@ -562,6 +599,7 @@ function noteClick(e) {
 		position: relative;
 		> .line {
 			position: absolute;
+			z-index: 2;
 			left: 0;
 			top: 0;
 			&::after {
@@ -635,6 +673,10 @@ function noteClick(e) {
 		> .main > .avatar-container {
 			margin-right: 10px;
 		}
+		&:first-child > .main > .body {
+			margin-top: -20px;
+			padding-top: 22px;
+		}
 	}
 }
 

packages/client/src/components/MkRenoteButton.vue

@@ -3,7 +3,7 @@
 		v-if="canRenote"
 		ref="buttonRef"
 		v-tooltip.noDelay.bottom="i18n.ts.renote"
-		class="eddddedb _button canRenote"
+		class="button _button canRenote"
 		@click="renote(false, $event)"
 	>
 		<i class="ph-repeat ph-bold ph-lg"></i>
@@ -248,25 +248,12 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 </script>
 
 <style lang="scss" scoped>
-.eddddedb {
+.button {
-	display: inline-block;
-	height: 32px;
-	margin: 2px;
-	padding: 0 6px;
-	border-radius: 4px;
-
 	&:not(.canRenote) {
 		cursor: default;
 	}
-
 	&.renoted {
 		background: var(--accent);
 	}
-
-	> .count {
-		display: inline;
-		margin-left: 8px;
-		opacity: 0.7;
-	}
 }
 </style>

packages/client/src/components/MkStarButton.vue

@@ -1,7 +1,7 @@
 <template>
 	<button
 		v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
-		class="skdfgljsdkf _button"
+		class="button _button"
 		@click="star($event)"
 	>
 		<svg
@@ -70,12 +70,3 @@ function star(ev?: MouseEvent): void {
 	}
 }
 </script>
-
-<style lang="scss" scoped>
-.skdfgljsdkf {
-	display: inline-block;
-	height: 32px;
-	margin: 2px;
-	padding: 0 6px;
-}
-</style>

packages/client/src/components/MkStarButtonNoEmoji.vue

@@ -1,7 +1,7 @@
 <template>
 	<button
 		v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
-		class="_button"
+		class="button _button"
 		:class="$style.root"
 		ref="buttonRef"
 		@click="toggleStar($event)"
@@ -110,13 +110,6 @@ useTooltip(buttonRef, async (showing) => {
 </script>
 
 <style lang="scss" module>
-.root {
-	display: inline-block;
-	height: 32px;
-	margin: 2px;
-	padding: 0 6px;
-}
-
 .yellow {
 	color: var(--warn);
 }
@@ -124,10 +117,4 @@ useTooltip(buttonRef, async (showing) => {
 .red {
 	color: var(--error);
 }
-
-.count {
-	display: inline;
-	margin: 0 0 0 8px;
-	opacity: 0.7;
-}
 </style>

packages/client/src/components/MkSubNoteContent.vue

@@ -243,6 +243,10 @@ function focusFooter(ev) {
 </script>
 
 <style lang="scss" scoped>
+:deep(a) {
+	position: relative;
+	z-index: 2;
+}
 .reply-icon {
 	display: inline-block;
 	border-radius: 6px;

packages/client/src/components/global/MkPageHeader.vue

@@ -518,6 +518,9 @@ onUnmounted(() => {
 			transparent
 		);
 		scrollbar-width: none;
+		&::-webkit-scrollbar {
+			display: none;
+		}
 
 		&.collapse {
 			--width: 38px;
@@ -541,7 +544,7 @@ onUnmounted(() => {
 			opacity: 0.7;
 			overflow: hidden;
 			transition: color 0.2s, opacity 0.2s, width 0.2s, min-width 0.2s;
-			--width: max-content;
+			--width: 38px;
 
 			&:hover {
 				opacity: 1;