Bring note style closer to Firefish

packages/frontend/src/components/MkAchievements.vue

@@ -120,8 +120,8 @@ onMounted(() => {
 
 .iconFrame {
 	position: relative;
-	width: 58px;
+	width: var(--avatar);
-	height: 58px;
+	height: var(--avatar);
 	padding: 6px;
 	border-radius: var(--radius-full);
 	box-sizing: border-box;

packages/frontend/src/components/MkNote.vue

@@ -986,8 +986,8 @@ function emitUpdReaction(emoji: string, delta: number) {
 	flex-shrink: 0;
 	display: block !important;
 	margin: 0 14px 0 0;
-	width: 58px;
+	width: var(--avatar);
-	height: 58px;
+	height: var(--avatar);
 	position: sticky !important;
 	top: calc(22px + var(--stickyTop, 0px));
 	left: 0;

packages/frontend/src/components/MkNoteDetailed.vue

@@ -871,8 +871,8 @@ function animatedMFM() {
 .noteHeaderAvatar {
 	display: block;
 	flex-shrink: 0;
-	width: 58px;
+	width: var(--avatar);
-	height: 58px;
+	height: var(--avatar);
 }
 
 .noteHeaderBody {

packages/frontend/src/components/MkUserInfo.vue

@@ -65,8 +65,8 @@ defineProps<{
 	top: 62px;
 	left: 13px;
 	z-index: 2;
-	width: 58px;
+	width: var(--avatar);
-	height: 58px;
+	height: var(--avatar);
 	border: solid 4px var(--panel);
 }
 

packages/frontend/src/components/MkUserPopup.vue

@@ -199,8 +199,8 @@ onMounted(() => {
 	right: 0;
 	margin: 0 auto;
 	z-index: 2;
-	width: 58px;
+	width: var(--avatar);
-	height: 58px;
+	height: var(--avatar);
 }
 
 .title {

packages/frontend/src/components/MkUserSetupDialog.User.vue

@@ -59,8 +59,8 @@ async function follow() {
 	top: 30px;
 	left: 13px;
 	z-index: 2;
-	width: 58px;
+	width: var(--avatar);
-	height: 58px;
+	height: var(--avatar);
 	border: solid 4px var(--panel);
 }
 

packages/frontend/src/components/SkInstanceTicker.vue

@@ -46,7 +46,6 @@ const bg = {
 	align-items: center;
 	height: 1.5ex;
 	border-radius: var(--radius-xl);
-	margin-top: 5px;
 	padding: 4px;
 	overflow: clip;
 	color: #fff;

packages/frontend/src/components/SkNote.vue

@@ -882,7 +882,6 @@ function emitUpdReaction(emoji: string, delta: number) {
 }
 
 .replyTo {
-	opacity: 0.7;
 	padding-bottom: 0;
 }
 
@@ -890,11 +889,28 @@ function emitUpdReaction(emoji: string, delta: number) {
 	position: relative;
 	display: flex;
 	align-items: center;
-	padding: 24px 38px 16px;
+	padding: 24px 32px 16px calc(32px + var(--avatar) + 14px);
 	line-height: 28px;
 	white-space: pre;
 	color: var(--renote);
 
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: calc(32px + .5 * var(--avatar));
+		bottom: -8px;
+		border-left: var(--thread-width) solid var(--thread);
+	}
+
+	&:first-child {
+		padding-left: 32px;
+
+		&::before {
+			display: none;
+		}
+	}
+
 	& + .article {
 		padding-top: 8px;
 	}
@@ -906,7 +922,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 
 .renoteAvatar {
 	flex-shrink: 0;
-	display: inline-block;
+	display: none; /* same as Firefish, but keeping the element around in case someone wants to add it back via CSS override */
 	width: 28px;
 	height: 28px;
 	margin: 0 8px 0 0;
@@ -987,8 +1003,8 @@ function emitUpdReaction(emoji: string, delta: number) {
 	display: block !important;
 	position: sticky !important;
 	margin: 0 14px 0 0;
-	width: 58px;
+	width: var(--avatar);
-	height: 58px;
+	height: var(--avatar);
 	position: sticky !important;
 	top: calc(22px + var(--stickyTop, 0px));
 	left: 0;

packages/frontend/src/components/SkNoteDetailed.vue

@@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-if="!repliesLoaded" style="padding: 16px">
 				<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
 			</div>
-			<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" />
+			<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
 		</div>
 		<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
 			<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@@ -807,12 +807,11 @@ function animatedMFM() {
 }
 
 .replyTo {
-	opacity: 0.7;
 	padding-bottom: 0;
 }
 
 .replyToMore {
-	opacity: 0.7;
+	
 }
 
 .renote {
@@ -879,8 +878,8 @@ function animatedMFM() {
 .noteHeaderAvatar {
 	display: block;
 	flex-shrink: 0;
-	width: 58px;
+	width: var(--avatar);
-	height: 58px;
+	height: var(--avatar);
 }
 
 .noteHeaderBody {

packages/frontend/src/components/SkNoteHeader.vue

@@ -116,6 +116,8 @@ const mock = inject<boolean>('mock', false);
 .root {
 	display: flex;
 	cursor: auto; /* not clickToOpen-able */
+	min-height: 100%;
+	align-items: center;
 }
 
 .classicRoot {
@@ -135,6 +137,7 @@ const mock = inject<boolean>('mock', false);
 			display: flex;
 			align-items: flex-end;
 			margin-left: auto;
+			margin-bottom: auto;
 			padding-left: 10px;
 			overflow: clip;
 		}
@@ -143,10 +146,9 @@ const mock = inject<boolean>('mock', false);
 .name {
 	flex-shrink: 1;
 	display: block;
-	// note, these margin top values were done by hand may need futher checking if it actualy aligns pixel perfect
+	margin: 0 .5em 0 0;
-	margin: 3px .5em 0 0;
 	padding: 0;
-	overflow: scroll;
+	overflow: hidden;
 	overflow-wrap: anywhere;
 	font-size: 1em;
 	font-weight: bold;
@@ -192,8 +194,7 @@ const mock = inject<boolean>('mock', false);
 
 .username {
 	flex-shrink: 9999999;
-	// note these top margins were made to align with the instance ticker
+	margin: 0 .5em 0 0;
-	margin: 4px .5em 0 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	font-size: .95em;

packages/frontend/src/components/SkNoteSub.vue

@@ -426,22 +426,22 @@ if (props.detail) {
 <style lang="scss" module>
 .root {
 	padding: 28px 32px;
-	font-size: 0.9em;
 	position: relative;
 
+	--reply-indent: calc(.5 * var(--avatar));
+
 	&.children {
 		padding: 10px 0 0 16px;
-		font-size: 1em;
 	}
 }
 
 .line {
 	position: absolute;
-	height: calc(100% - 58px); // 58px of avatar height (see SkNote)
+	left: calc(32px + .5 * var(--avatar));
-	left: 60px;
 	// using solid instead of dotted, stylelistic choice
-	border-left: 2.5px solid rgb(174, 174, 174);
+	border-left: var(--thread-width) solid var(--thread);
-	top: 86px; // 28px of .root padding, plus 58px of avatar height (see SkNote)
+	top: calc(28px + var(--avatar)); // 28px of .root padding, plus 58px of avatar height (see SkNote)
+	bottom: -28px;
 }
 
 .footer {
@@ -471,8 +471,8 @@ if (props.detail) {
 	flex-shrink: 0;
 	display: block;
 	margin: 0 14px 0 0;
-	width: 58px;
+	width: var(--avatar);
-	height: 58px;
+	height: var(--avatar);
 	border-radius: var(--radius-sm);
 }
 
@@ -521,15 +521,11 @@ if (props.detail) {
 @container (max-width: 580px) {
 	.root {
 		padding: 28px 26px 0;
+		--avatar: 46px;
 	}
 
 	.line {
-		left: 50.5px;
+		left: calc(26px + .5 * var(--avatar));
-	}
-
-	.avatar {
-		width: 50px;
-		height: 50px;
 	}
 }
 
@@ -537,6 +533,11 @@ if (props.detail) {
 	.root {
 		padding: 23px 25px;
 	}
+
+	.line {
+		top: calc(23px + var(--avatar));
+		left: calc(25px + .5 * var(--avatar));
+	}
 }
 
 @container (max-width: 400px) {
@@ -586,16 +587,16 @@ if (props.detail) {
 			padding: 10px 0 0 8px;
 		}
 	}
+
+	.line {
+		top: calc(22px + var(--avatar));
+		left: calc(24px + .5 * var(--avatar));
+	}
 }
 
 @container (max-width: 450px) {
-	.line {
+	.root {
-		left: 46px;
+		--avatar: 44px;
-	}
-
-	.avatar {
-		width: 46px;
-		height: 46px;
 	}
 }
 
@@ -616,19 +617,19 @@ if (props.detail) {
 .threadLine {
 	width: 0;
 	flex-grow: 1;
-	border-left: 2.5px solid rgb(174, 174, 174);
+	border-left: var(--thread-width) solid var(--thread);
-	margin-left: 29px;
+	margin-left: var(--reply-indent);
 }
 
 .reply {
-	margin-left: 29px;
+	margin-left: var(--reply-indent);
 }
 
 .reply:not(:last-child) {
-	border-left: 2.5px solid rgb(174, 174, 174);
+	border-left: var(--thread-width) solid var(--thread);
 
 	&::before {
-		left: -2px;
+		left: calc(-1 * var(--thread-width));
 	}
 }
 
@@ -637,10 +638,10 @@ if (props.detail) {
 	content: '';
 	left: 0px;
 	top: -10px;
-	height: 49px;
+	height: calc(10px + 10px + .5 * var(--avatar));
 	width: 15px;
-	border-left: 2.5px solid rgb(174, 174, 174);
+	border-left: var(--thread-width) solid var(--thread);
-	border-bottom: 2.5px solid rgb(174, 174, 174);
+	border-bottom: var(--thread-width) solid var(--thread);
 	border-bottom-left-radius: 15px;
 }
 
@@ -649,7 +650,7 @@ if (props.detail) {
 	padding-left: 0 !important;
 
 	&::before {
-		left: 29px;
+		left: var(--reply-indent);
 		width: 0;
 		border-bottom: unset;
 	}

packages/frontend/src/components/SkOldNoteWindow.vue

@@ -177,8 +177,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 .noteHeaderAvatar {
 	display: block;
 	flex-shrink: 0;
-	width: 58px;
+	width: var(--avatar);
-	height: 58px;
+	height: var(--avatar);
 }
 
 .noteHeaderBody {

packages/frontend/src/style.scss

@@ -37,6 +37,9 @@
 		--margin: var(--marginHalf);
 	}
 
+	--avatar: 48px;
+	--thread-width: 2px;
+
 	//--ad: rgb(255 169 0 / 10%);
 }
 

packages/frontend/src/themes/_dark.json5

@@ -30,6 +30,7 @@
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--divider)',
+		thread: ':lighten<12<@panel',
 		acrylicPanel: ':alpha<0.5<@panel',
 		windowHeader: ':alpha<0.85<@panel',
 		popup: ':lighten<3<@panel',

packages/frontend/src/themes/_light.json5

@@ -30,6 +30,7 @@
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--divider)',
+		thread: ':darken<12<@panel',
 		acrylicPanel: ':alpha<0.5<@panel',
 		windowHeader: ':alpha<0.85<@panel',
 		popup: ':lighten<3<@panel',