mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-02 10:53:33 +00:00
68 lines
1.2 KiB
CSS
68 lines
1.2 KiB
CSS
|
.container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
pointer-events: auto;
|
||
|
|
|
||
|
|
&:global(.card-controls) {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.container.hidden {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-container {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
aspect-ratio: 1/1;
|
||
|
|
overflow: hidden;
|
||
|
|
background: var(--theme-card-default-bg);
|
||
|
|
border-radius: var(--theme-card-poster-radius);
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
user-select: none;
|
||
|
|
content: '';
|
||
|
|
background: linear-gradient(0deg, rgb(0 0 0 / 100%) 35%, rgb(0 0 0 / 0%) 100%);
|
||
|
|
opacity: 0;
|
||
|
|
transition: all 0.2s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
&::before {
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover:global(.card-controls) {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.image {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
height: 100% !important;
|
||
|
|
max-height: 100%;
|
||
|
|
border: 0;
|
||
|
|
|
||
|
|
img {
|
||
|
|
height: 100%;
|
||
|
|
object-fit: var(--theme-image-fit);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-container {
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
}
|