add faded edges to swiper + shadows :3

packages/client/src/components/MkRemoteCaution.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="jmgmzlwq _block">
+	<div class="caution _block">
 		{{ i18n.ts.remoteUserCaution
 		}}<a
 			class="link"
@@ -20,7 +20,7 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
-.jmgmzlwq {
+.caution {
 	padding: 16px;
 	font-size: 90%;
 	background: var(--infoWarnBg);

packages/client/src/pages/timeline.vue

@@ -354,7 +354,6 @@ onMounted(() => {
 	> .tl {
 		background: none;
 		border-radius: var(--radius);
-		overflow: clip;
 	}
 }
 </style>

packages/client/src/style.scss

@@ -107,6 +107,12 @@ html, body {
 	padding: 0;
 }
 
+.swiper {
+	margin-inline: -24px !important;
+	padding-inline: 24px !important;
+	mask: linear-gradient(to right, transparent, black 24px calc(100% - 24px), transparent);
+	-webkit-mask: linear-gradient(to right, transparent, black 24px calc(100% - 24px), transparent);
+}
 .swiper-slide {
 	min-height: 100vh;
 }
@@ -348,7 +354,9 @@ hr {
 }
 
 ._block {
-	@extend ._panel;
+	background: var(--panel);
+	border-radius: var(--radius);
+	overflow: visible;
 
 	& + ._block {
 		margin-top: var(--margin);
@@ -625,6 +633,20 @@ hr {
 	outline: none;
 }
 
+:not(.noGap):not(._block) > {
+	.note-container, .cmuxhskf > section, ._gap > ._block, .noGap, .profile, .card {
+		&:not(.caution)
+		{
+			box-shadow: 0 4px 25px rgba(0,0,0,0.04);
+			border-radius: var(--radius);
+			overflow: clip;
+		}
+	}
+}
+.widgets ._panel {
+	box-shadow: none !important;
+}
+
 ._zoom {
 	transition-duration: 0.5s, 0.5s;
 	transition-property: opacity, transform;