Koppers Reply CSS

custom/assets/instance.css

@@ -59,6 +59,7 @@ div.emojis:nth-child(6) {
 #iceshrimp_app #maincontent div div div._root_b6w6v_1 div._content_b6w6v_6 div.cmuxhskf div.tl._block div.swiper.swiper-virtual.swiper-initialized.swiper-horizontal.swiper-watch-progress div.swiper-wrapper div.swiper-slide.swiper-slide-visible div.new button._buttonPrimary._shadow {
 	border-radius: var(--radius)
 }
+
 #iceshrimp_app div.mk-deck div.main div.columns.left section.dnpfarvg._narrow_.paged.active.column div div div div._root_b6w6v_1 div._content_b6w6v_6 div.cmuxhskf div.tl._block div.swiper.swiper-virtual.swiper-initialized.swiper-horizontal.swiper-watch-progress div.swiper-wrapper div.swiper-slide.swiper-slide-visible div.new button._buttonPrimary._shadow {
 	border-radius: var(--radius)
 }
@@ -134,9 +135,18 @@ html body div#iceshrimp_app div.mk-app div.main div.contents main div div.rsqzvs
 	border-top-right-radius: var(--radius);
 }
 
-.list .notes button.muted { display: none; } /* hide muted posts in tl */
+.list .notes button.muted {
+	display: none;
+}
 
-._shadow, #iceshrimp_app > div > ._button { --shadow: rgba(0, 0, 0, 0.5); } /* add missing shadows */
+/* hide muted posts in tl */
+
+._shadow,
+#iceshrimp_app>div>._button {
+	--shadow: rgba(0, 0, 0, 0.5);
+}
+
+/* add missing shadows */
 
 /* navbar stuff? */
 header>.body>.top {
@@ -157,67 +167,85 @@ header.sidebar {
 	border-left: none;
 }
 
-._root_b6w6v_1 { padding: var(--thePadding) !important; }
+._root_b6w6v_1 {
+	padding: var(--thePadding) !important;
+}
 
-a.mention > .main > .host { display: none; } /* hide instance in all mentions */
+a.mention>.main>.host {
+	display: none;
+}
 
-section.modal._popup > div.form > textarea { resize: vertical !important; } /*  resize fix */
+/* hide instance in all mentions */
+
+section.modal._popup>div.form>textarea {
+	resize: vertical !important;
+}
+
+/*  resize fix */
 
 
 /** ThatOneCalculator MisskeyTweaks **/
 .profile .banner::after,
 ._popup .banner::after {
-  content: "";
+	content: "";
-  background-image: inherit;
+	background-image: inherit;
-  position: fixed;
+	position: fixed;
-  inset: 0;
+	inset: 0;
-  background-size: cover;
+	background-size: cover;
-  background-position: center;
+	background-position: center;
-  pointer-events: none;
+	pointer-events: none;
-  opacity: 0.1;
+	opacity: 0.1;
-  filter: blur(10px);
+	filter: blur(10px);
 }
 
 /*** BETTER PROFILES ***/
 .narrow {
 	position: relative;
-  }
+}
-  .wide > .main + .sub {
+
+.wide>.main+.sub {
 	position: sticky;
 	height: max-content;
 	min-height: calc(100vh - 35px);
 	bottom: 15px;
 	align-self: flex-end;
-  }
+}
-  .profile {
+
+.profile {
 	margin-bottom: var(--margin);
-  }
+}
-  .profile .banner-container,
+
-  .profile .banner,
+.profile .banner-container,
-  .profile .fade {
+.profile .banner,
+.profile .fade {
 	border-bottom-left-radius: var(--radius) !important;
 	border-bottom-right-radius: var(--radius) !important;
-  }
+}
-  .profile ~ .contents {
+
+.profile~.contents {
 	position: relative;
-  }
+}
-  .profile ~ .contents > div > ._panel .content.omitted > div {
+
+.profile~.contents>div>._panel .content.omitted>div {
 	padding-inline: 0;
-  }
+}
-  .profile ~ .contents > div > ._panel .content.omitted .stream {
+
+.profile~.contents>div>._panel .content.omitted .stream {
 	display: flex;
 	overflow-x: auto;
 	scroll-padding: 24px;
 	padding-left: 24px;
 	scrollbar-color: transparent transparent;
-	mask: linear-gradient(to right, #000 calc(100% - 400px), rgba(0,0,0,0.4), transparent);
+	mask: linear-gradient(to right, #000 calc(100% - 400px), rgba(0, 0, 0, 0.4), transparent);
-  }
+}
-  .profile ~ .contents > div > ._panel .content.omitted .stream a {
+
+.profile~.contents>div>._panel .content.omitted .stream a {
 	min-width: max-content;
 	scroll-snap-align: start;
 	height: 100px;
-  }
+}
-  .profile ~ .contents > div > ._panel .content.omitted button.fade {
+
+.profile~.contents>div>._panel .content.omitted button.fade {
 	background: linear-gradient(to right, transparent, var(--panel));
 	background: none;
 	top: 0;
@@ -227,25 +255,130 @@ section.modal._popup > div.form > textarea { resize: vertical !important; } /*
 	height: unset;
 	width: auto;
 	padding: 24px;
-  }
+}
-  .profile ~ .contents > div > ._panel .content:not(.omitted) {
+
+.profile~.contents>div>._panel .content:not(.omitted) {
 	padding: 0 14px !important;
 	padding: 0 !important;
 	padding-top: 14px !important;
-  }
+}
-  .profile ~ .contents > div > ._panel .content:not(.omitted) > div {
+
+.profile~.contents>div>._panel .content:not(.omitted)>div {
 	padding: 0;
-  }
+}
-  .profile ~ .contents > div > ._panel .content:not(.omitted) .stream {
+
+.profile~.contents>div>._panel .content:not(.omitted) .stream {
 	display: flex;
 	flex-wrap: wrap;
-  }
+}
-  .profile ~ .contents > div > ._panel .content:not(.omitted) .stream a {
+
+.profile~.contents>div>._panel .content:not(.omitted) .stream a {
 	flex-grow: 1;
 	height: auto;
 	max-height: 60vh;
 	border-radius: 0;
-  }
+}
-  .profile ~ .contents > div > ._panel .content:not(.omitted) .empty {
+
+.profile~.contents>div>._panel .content:not(.omitted) .empty {
 	display: none;
-  }
+}
+
+/* Koppers Reply */
+:root {
+	--originalAvatarSize: var(--avatarSize);
+}
+
+.list .note-container .reply-to {
+	--avatarSize: 16px;
+
+	.avatar-container {
+		margin-left: calc((var(--originalAvatarSize) - var(--avatarSize)) / 2);
+		align-self: center;
+	}
+
+	.cat:before,
+	.cat:after {
+		margin-bottom: 5px;
+	}
+
+	.body {
+		display: flex;
+		align-items: baseline;
+		overflow-x: hidden;
+
+		>.header {
+			align-items: initial;
+
+			.user-info {
+
+				>div>.name,
+				.info {
+					display: none;
+				}
+
+				&,
+				>div:first-child {
+					width: auto;
+				}
+			}
+
+			div:has(> .hpaizdrt) {
+				display: none
+			}
+		}
+
+		>.body {
+			flex-grow: 1;
+			max-height: 32px;
+
+			br,
+			.files,
+			.reply-icon,
+			&:has(.cw:not(._cw_style_modern)) .wrmlmaau,
+			.showMoreButton,
+			.rp,
+			.cw button {
+				display: none
+			}
+
+			.mfm-object :not(br) {
+				display: inline;
+			}
+
+			.mfm-object,
+			.mfm-object * {
+				--mfm-zoom-size: 100% !important;
+
+				white-space: nowrap;
+				word-break: keep-all;
+			}
+		}
+
+		.content {
+			&.collapsed>.body {
+				mask: none;
+				-webkit-mask: none;
+			}
+
+			&._cw_style_modern.showContent {
+				min-height: initial;
+
+				>.hiddenNote {
+					text-align: left;
+					font-weight: inherit;
+					font-size: inherit;
+					padding: 0;
+				}
+
+				>button,
+				>.body {
+					display: none;
+				}
+			}
+		}
+
+		.footer {
+			display: none !important;
+		}
+	}
+}