shkim/photo-req
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up wedding upload background

Browse Source
This commit is contained in:
DESKTOP-KSVGT20\shkim
2026-05-10 23:27:51 +09:00
parent 4525476945
commit 49766d149e
2 changed files with 47 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/public/upload.css
+47 -64
View File
@@ -24,10 +24,7 @@ body {
min-height: 100vh;
margin: 0 auto;
padding: 0;
background:
radial-gradient(ellipse at 50% 22%, rgba(214, 214, 208, 0.28), transparent 56%),
radial-gradient(ellipse at 50% 54%, rgba(235, 235, 230, 0.34), transparent 62%),
linear-gradient(180deg, #ffffff 0%, #fbfbfa 74%, #ffffff 100%);
background: #ffffff;
}
.wedding-card {
@@ -35,10 +32,7 @@ body {
min-height: 100vh;
margin: 0 auto;
padding: 0 0 38px;
background:
radial-gradient(ellipse at 50% 30%, rgba(218, 218, 212, 0.28), transparent 58%),
radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.7), transparent 48%),
linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fbfbfa 82%, #ffffff 100%);
background: #ffffff;
text-align: center;
}
@@ -52,15 +46,7 @@ body {
}
.poster::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: 0 0 22px 22px;
background: rgba(232, 232, 226, 0.38);
filter: blur(24px);
transform: translateY(12px) scale(0.96);
pointer-events: none;
content: none;
}
.poster__gate,
@@ -74,37 +60,37 @@ body {
position: absolute;
inset: 0 50% 0 auto;
z-index: 3;
width: 212%;
width: 103%;
height: 100%;
max-width: none;
object-fit: cover;
object-fit: contain;
object-position: center top;
transform: translateX(50%);
opacity: 1;
filter: saturate(0.88) contrast(0.92) brightness(1.04) drop-shadow(0 18px 30px rgba(88, 88, 80, 0.05));
filter: none;
}
.poster__portrait {
position: absolute;
z-index: 2;
left: 18%;
right: 18%;
top: 13%;
bottom: 24.8%;
left: 24.5%;
right: 24.5%;
top: 18.4%;
bottom: 27%;
overflow: hidden;
background: #ffffff;
border-radius: 50% 50% 4px 4px / 14% 14% 4px 4px;
background: transparent;
border-radius: 0;
}
.poster__couple {
position: absolute;
left: 51.5%;
top: 14%;
width: 145%;
left: 52%;
top: 9%;
width: 132%;
height: auto;
max-width: none;
transform: translateX(-50%);
filter: drop-shadow(0 12px 18px rgba(65, 65, 58, 0.08));
filter: none;
}
.poster__plate {
@@ -114,10 +100,9 @@ body {
right: 8.5%;
bottom: 10.5%;
padding: clamp(16px, 3.5vw, 25px) 12px clamp(13px, 2.6vw, 20px);
background: rgba(255, 255, 255, 0.78);
border-top: 1px solid rgba(55, 55, 55, 0.12);
border-bottom: 1px solid rgba(55, 55, 55, 0.12);
backdrop-filter: blur(2px);
background: rgba(255, 255, 255, 0.9);
border: 0;
backdrop-filter: none;
}
h1 {
@@ -157,6 +142,18 @@ h1 {
margin: clamp(-58px, -6vw, -34px) auto 0;
}
.upload-panel::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: -18px;
bottom: -28px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #ffffff 34%, #ffffff 100%);
pointer-events: none;
}
.upload-panel__today {
display: flex;
align-items: center;
@@ -207,10 +204,7 @@ h1 {
radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.13), transparent 58%),
linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 30% 70%, rgba(255, 255, 255, 0.05)),
linear-gradient(180deg, #1c5d57 0%, #155149 100%);
box-shadow:
0 14px 24px rgba(22, 72, 67, 0.17),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -8px 16px rgba(0, 0, 0, 0.09);
box-shadow: none;
color: #ffffff;
font: inherit;
font-size: clamp(27px, 5.2vw, 37px);
@@ -223,12 +217,8 @@ h1 {
.select-button {
margin-bottom: 14px;
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.2), transparent 58%),
linear-gradient(180deg, #f8f8f6 0%, #eeeee9 100%);
box-shadow:
0 9px 18px rgba(85, 85, 85, 0.11),
inset 0 0 0 1px rgba(83, 83, 83, 0.14);
background: #ffffff;
box-shadow: none;
color: #565656;
font-size: clamp(24px, 4.6vw, 32px);
}
@@ -247,8 +237,8 @@ h1 {
padding: 16px 18px;
border: 1px solid rgba(137, 166, 158, 0.35);
border-radius: 8px;
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 8px 18px rgba(55, 55, 55, 0.06);
background: #ffffff;
box-shadow: none;
text-align: left;
}
@@ -401,18 +391,12 @@ h1 {
@media (max-width: 760px) {
.upload-page {
background:
radial-gradient(ellipse at 50% 18%, rgba(214, 214, 208, 0.26), transparent 58%),
radial-gradient(ellipse at 50% 52%, rgba(235, 235, 230, 0.32), transparent 64%),
linear-gradient(180deg, #ffffff 0%, #fbfbfa 78%, #ffffff 100%);
background: #ffffff;
}
.wedding-card {
padding: 0 0 30px;
background:
radial-gradient(ellipse at 50% 30%, rgba(218, 218, 212, 0.24), transparent 58%),
radial-gradient(circle at 50% 33%, rgba(255, 255, 255, 0.66), transparent 48%),
linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fbfbfa 82%, #ffffff 100%);
background: #ffffff;
}
.poster {
@@ -422,26 +406,25 @@ h1 {
}
.poster::before {
inset: 0 8px;
filter: blur(18px);
content: none;
}
.poster__gate {
width: 212%;
width: 103%;
opacity: 1;
}
.poster__portrait {
left: 18%;
right: 18%;
top: 13%;
bottom: 24.8%;
left: 24.5%;
right: 24.5%;
top: 18.4%;
bottom: 27%;
}
.poster__couple {
top: 14%;
left: 51.5%;
width: 145%;
top: 9%;
left: 52%;
width: 132%;
}
.poster__plate {