mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 12:30:12 +02:00
redesign feature carousel to be more compact
This commit is contained in:
jeffvli
@@ -1,29 +1,29 @@
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: var(--theme-spacing-xl);
|
||||
margin-bottom: var(--theme-spacing-md);
|
||||
container-type: inline-size;
|
||||
overflow: hidden;
|
||||
border-radius: var(--theme-radius-lg);
|
||||
border-radius: var(--theme-radius-md);
|
||||
}
|
||||
|
||||
.carousel {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--items-per-row, 1), 1fr);
|
||||
gap: var(--theme-spacing-md);
|
||||
gap: var(--theme-spacing-sm);
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
padding: 0 var(--theme-spacing-xl);
|
||||
min-height: 280px;
|
||||
padding: 0 var(--theme-spacing-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 440px;
|
||||
min-height: 280px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--theme-radius-lg);
|
||||
border-radius: var(--theme-radius-md);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
@@ -44,13 +44,13 @@
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--theme-spacing-md);
|
||||
gap: var(--theme-spacing-xs);
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 440px;
|
||||
padding: var(--theme-spacing-xl);
|
||||
min-height: 280px;
|
||||
padding: var(--theme-spacing-md);
|
||||
}
|
||||
|
||||
.title-section {
|
||||
@@ -59,9 +59,9 @@
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
min-height: 60px;
|
||||
max-height: 60px;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
max-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -72,9 +72,9 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
min-height: 250px;
|
||||
max-height: 250px;
|
||||
height: 160px;
|
||||
min-height: 160px;
|
||||
max-height: 160px;
|
||||
}
|
||||
|
||||
.play-button-overlay {
|
||||
@@ -100,9 +100,9 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
max-height: 100px;
|
||||
height: 60px;
|
||||
min-height: 60px;
|
||||
max-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -122,10 +122,10 @@
|
||||
.album-image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 180px;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--theme-radius-lg);
|
||||
filter: drop-shadow(0 10px 30px rgb(0 0 0 / 50%)) drop-shadow(0 4px 12px rgb(0 0 0 / 40%));
|
||||
border-radius: var(--theme-radius-md);
|
||||
filter: drop-shadow(0 6px 20px rgb(0 0 0 / 50%)) drop-shadow(0 2px 8px rgb(0 0 0 / 40%));
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -139,7 +139,7 @@
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
border-radius: var(--theme-radius-lg);
|
||||
border-radius: var(--theme-radius-md);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -151,7 +151,7 @@
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
border-radius: var(--theme-radius-lg);
|
||||
border-radius: var(--theme-radius-md);
|
||||
}
|
||||
|
||||
.carousel-item:hover .album-image-container,
|
||||
@@ -171,14 +171,14 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: var(--theme-spacing-xs);
|
||||
margin-bottom: 0;
|
||||
color: white;
|
||||
text-shadow: 0 0 10px rgb(0 0 0 / 50%);
|
||||
text-shadow: 0 0 8px rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.artist {
|
||||
color: white;
|
||||
text-shadow: 0 0 10px rgb(0 0 0 / 50%);
|
||||
text-shadow: 0 0 8px rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.nav-arrow-left,
|
||||
@@ -214,11 +214,111 @@
|
||||
|
||||
@container (min-width: $mantine-breakpoint-xs) {
|
||||
.carousel-item {
|
||||
min-height: 480px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 480px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 45px;
|
||||
min-height: 45px;
|
||||
max-height: 45px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 180px;
|
||||
min-height: 180px;
|
||||
max-height: 180px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
height: 65px;
|
||||
min-height: 65px;
|
||||
max-height: 65px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-sm) {
|
||||
.carousel {
|
||||
gap: var(--theme-spacing-md);
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 50px;
|
||||
min-height: 50px;
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
height: 70px;
|
||||
min-height: 70px;
|
||||
max-height: 70px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-md) {
|
||||
.carousel-item {
|
||||
min-height: 340px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 340px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 55px;
|
||||
min-height: 55px;
|
||||
max-height: 55px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 220px;
|
||||
min-height: 220px;
|
||||
max-height: 220px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
height: 75px;
|
||||
min-height: 75px;
|
||||
max-height: 75px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-xl) {
|
||||
.carousel-item {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
@@ -228,9 +328,9 @@
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 300px;
|
||||
min-height: 300px;
|
||||
max-height: 300px;
|
||||
height: 240px;
|
||||
min-height: 240px;
|
||||
max-height: 240px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
@@ -239,107 +339,7 @@
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-sm) {
|
||||
.carousel {
|
||||
gap: var(--theme-spacing-lg);
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 70px;
|
||||
min-height: 70px;
|
||||
max-height: 70px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 280px;
|
||||
min-height: 280px;
|
||||
max-height: 280px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
height: 110px;
|
||||
min-height: 110px;
|
||||
max-height: 110px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-md) {
|
||||
.carousel-item {
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 80px;
|
||||
min-height: 80px;
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 320px;
|
||||
min-height: 320px;
|
||||
max-height: 320px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
height: 120px;
|
||||
min-height: 120px;
|
||||
max-height: 120px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-xl) {
|
||||
.carousel-item {
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 90px;
|
||||
min-height: 90px;
|
||||
max-height: 90px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 360px;
|
||||
min-height: 360px;
|
||||
max-height: 360px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
height: 130px;
|
||||
min-height: 130px;
|
||||
max-height: 130px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user