refactor: 优化界面样式
This commit is contained in:
@@ -134,27 +134,21 @@
|
||||
}
|
||||
|
||||
.primaryCta {
|
||||
width: fit-content;
|
||||
max-width: calc(100% - var(--app-safe-left, 0px) - var(--app-safe-right, 0px) - clamp(36px, 10.37vw, 56px));
|
||||
align-self: flex-start;
|
||||
margin:
|
||||
0
|
||||
calc(var(--app-safe-right, 0px) + clamp(18px, 5.185vw, 28px))
|
||||
0
|
||||
calc(var(--app-safe-left, 0px) + clamp(18px, 5.185vw, 28px));
|
||||
min-height: 36px;
|
||||
padding: 0 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.62);
|
||||
width: calc(100% - var(--app-safe-left, 0px) - var(--app-safe-right, 0px) - clamp(36px, 10.37vw, 56px));
|
||||
align-self: center;
|
||||
margin: 0 auto;
|
||||
min-height: 50px;
|
||||
padding: 0 clamp(20px, 5.185vw, 28px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.48);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(129, 125, 119, 0.94), rgba(104, 101, 96, 0.92)),
|
||||
rgba(116, 112, 106, 0.9);
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 38%),
|
||||
linear-gradient(90deg, #ff67e0, var(--color-accent, #f84d96));
|
||||
color: #ffffff;
|
||||
font-size: clamp(11px, 2.963vw, 14px);
|
||||
font-size: clamp(14px, 3.333vw, 16px);
|
||||
line-height: 1.2;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
||||
0 10px 22px rgba(47, 35, 40, 0.12);
|
||||
backdrop-filter: blur(14px);
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.24),
|
||||
0 14px 30px rgba(248, 77, 150, 0.26);
|
||||
}
|
||||
|
||||
.primaryCta span {
|
||||
@@ -291,23 +285,29 @@
|
||||
}
|
||||
|
||||
.lockedPreview {
|
||||
display: grid;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
aspect-ratio: 4 / 5;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
justify-content: center;
|
||||
margin-top: 14px;
|
||||
padding: clamp(16px, 4.074vw, 22px);
|
||||
border: 1px solid rgba(255, 116, 159, 0.24);
|
||||
border-radius: clamp(20px, 5.185vw, 28px);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 246, 239, 0.98), rgba(255, 231, 240, 0.9)),
|
||||
radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.94), transparent 29%),
|
||||
radial-gradient(circle at 82% 82%, rgba(255, 103, 224, 0.18), transparent 35%),
|
||||
linear-gradient(145deg, rgba(255, 246, 239, 0.98), rgba(255, 225, 239, 0.94)),
|
||||
#ffffff;
|
||||
color: #21171b;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 28px rgba(255, 116, 159, 0.12);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.82),
|
||||
0 14px 32px rgba(255, 116, 159, 0.14);
|
||||
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
@@ -316,22 +316,35 @@
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.lockedPreviewContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
max-width: 260px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.previewIcon {
|
||||
display: grid;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
place-items: center;
|
||||
border-radius: 17px;
|
||||
background: linear-gradient(135deg, #ff7aa9, #ffb36d);
|
||||
border: 1px solid rgba(255, 255, 255, 0.68);
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(135deg, #ff7ac3, var(--color-accent, #f84d96));
|
||||
color: #ffffff;
|
||||
box-shadow: 0 12px 24px rgba(255, 104, 146, 0.24);
|
||||
box-shadow: 0 14px 28px rgba(248, 77, 150, 0.26);
|
||||
}
|
||||
|
||||
.previewText {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.previewText strong {
|
||||
@@ -350,26 +363,63 @@
|
||||
.previewText small {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
color: #a94c64;
|
||||
font-size: clamp(12px, 2.963vw, 15px);
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.imageGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||||
gap: 10px;
|
||||
.mediaCover {
|
||||
position: relative;
|
||||
margin-top: 14px;
|
||||
overflow: hidden;
|
||||
border-radius: clamp(20px, 5.185vw, 28px);
|
||||
background: #f3eef0;
|
||||
box-shadow: 0 14px 32px rgba(131, 72, 85, 0.14);
|
||||
}
|
||||
|
||||
.unlockedImage {
|
||||
.momentCoverImage {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 22px;
|
||||
aspect-ratio: 4 / 5;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 14px 32px rgba(131, 72, 85, 0.14);
|
||||
}
|
||||
|
||||
.mediaCountBadge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
display: inline-flex;
|
||||
min-height: 30px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 11px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 999px;
|
||||
background: rgba(28, 19, 23, 0.72);
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 8px 18px rgba(28, 19, 23, 0.18);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.emptyMediaCover {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 5;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
border: 1px solid rgba(44, 29, 34, 0.08);
|
||||
border-radius: clamp(20px, 5.185vw, 28px);
|
||||
background: linear-gradient(145deg, #f7f2ef, #efe7e9);
|
||||
color: #8d747c;
|
||||
font-size: 14px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.statusCard {
|
||||
|
||||
Reference in New Issue
Block a user