From 1abf71f569f228ac3f2befb78e9a1b568aa257ef Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Sat, 17 Jun 2023 00:51:38 -0400
Subject: [PATCH] add faded edges to swiper + shadows :3

---
 .../client/src/components/MkRemoteCaution.vue |  4 ++--
 packages/client/src/pages/timeline.vue        |  1 -
 packages/client/src/style.scss                | 24 ++++++++++++++++++-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/MkRemoteCaution.vue b/packages/client/src/components/MkRemoteCaution.vue
index f8a84e81e2..23a7a731b5 100644
--- a/packages/client/src/components/MkRemoteCaution.vue
+++ b/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);
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 8aec6496d9..2633d0e0b5 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -354,7 +354,6 @@ onMounted(() => {
 	> .tl {
 		background: none;
 		border-radius: var(--radius);
-		overflow: clip;
 	}
 }
 </style>
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 7bf18abfea..6855d6f9b3 100644
--- a/packages/client/src/style.scss
+++ b/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;