fix(coverflow): reduce shadow and reflection intensity
This commit is contained in:
1 parent
9099f94904
commit
4e8c2f5a9b
1 file changed
+8
-10
@@ -190,12 +190,12 @@
|
|||||||
height: min(38vh, 300px);
|
height: min(38vh, 300px);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
||||||
transition: box-shadow 300ms ease;
|
transition: box-shadow 300ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.coverflow-item:not(:disabled):hover .cover-wrapper {
|
.coverflow-item:not(:disabled):hover .cover-wrapper {
|
||||||
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cover-image {
|
.cover-image {
|
||||||
@@ -207,18 +207,18 @@
|
|||||||
|
|
||||||
.cover-reflection {
|
.cover-reflection {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -60%;
|
bottom: -40%;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 60%;
|
height: 40%;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to bottom,
|
to bottom,
|
||||||
rgba(255, 255, 255, 0.1) 0%,
|
rgba(255, 255, 255, 0.05) 0%,
|
||||||
transparent 100%
|
transparent 100%
|
||||||
);
|
);
|
||||||
transform: scaleY(-1);
|
transform: scaleY(-1);
|
||||||
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 50%);
|
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, transparent 40%);
|
||||||
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 50%);
|
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, transparent 40%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
@@ -232,9 +232,7 @@
|
|||||||
.coverflow-item.center .cover-wrapper {
|
.coverflow-item.center .cover-wrapper {
|
||||||
width: min(45vh, 360px);
|
width: min(45vh, 360px);
|
||||||
height: min(45vh, 360px);
|
height: min(45vh, 360px);
|
||||||
box-shadow:
|
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
|
||||||
0 8px 32px rgba(0, 0, 0, 0.5),
|
|
||||||
0 20px 60px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Left items */
|
/* Left items */
|
||||||
|
|||||||
Reference in new issue
Block a user