162 lines
No EOL
3.2 KiB
CSS
162 lines
No EOL
3.2 KiB
CSS
.hover-card-container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"hover-card-metadata"
|
|
"hover-card-overlay"
|
|
"hover-card-picture";
|
|
margin-right: 1rem;
|
|
margin-left: 1rem;
|
|
width: var(--content-3-width);
|
|
height: var(--content-3-width);
|
|
box-shadow: var(--shadow);
|
|
transition: var(--transition);
|
|
cursor: pointer;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-card-container:hover {
|
|
transform: translateY(-0.3rem) scale(102%);
|
|
box-shadow: var(--shadow-hover);
|
|
}
|
|
|
|
.hover-card-container:active {
|
|
transform: translateY(0.3rem) scale(100%);
|
|
box-shadow: var(--shadow-active);
|
|
}
|
|
|
|
.hover-card-container img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.hover-card {
|
|
grid-area: overlay;
|
|
width: var(--content-3-width);
|
|
height: var(--content-3-width);
|
|
}
|
|
|
|
.hover-card-overlay {
|
|
grid-area: overlay;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: linear-gradient(0deg, #120e14 0%, #120e14dc 30%, #120e1491 35%, rgba(0, 0, 0, 0) 45%);
|
|
opacity: 0;
|
|
}
|
|
|
|
.hover-card-tip {
|
|
color: var(--color-background);
|
|
background-color: #120e14b0;
|
|
width: fit-content;
|
|
margin: 0.4rem;
|
|
padding: 0.4rem;
|
|
padding-right: 0.6rem;
|
|
padding-left: 0.6rem;
|
|
border-radius: 3rem;
|
|
box-shadow: var(--shadow);
|
|
opacity: 0;
|
|
}
|
|
|
|
.hover-card-tip svg {
|
|
width: 1.4rem;
|
|
height: auto;
|
|
}
|
|
|
|
.hover-card-tip span {
|
|
font-family: 'JetBrains Mono';
|
|
font-weight: 400;
|
|
font-size: 0.8rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.hover-card-metadata {
|
|
width: 100%;
|
|
height: 8rem;
|
|
color: var(--color-background);
|
|
opacity: 0;
|
|
}
|
|
|
|
.hover-card-metadata h1 {
|
|
/* Animation */
|
|
opacity: 0;
|
|
font-family: 'JetBrains Mono';
|
|
font-weight: 800;
|
|
font-size: 1.3rem;
|
|
margin: 1rem;
|
|
margin-bottom: 0;
|
|
user-select: none;
|
|
/* Overflow */
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
}
|
|
|
|
.hover-card-metadata p {
|
|
/* Animation */
|
|
font-family: 'JetBrains Mono';
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
font-size: 0.8rem;
|
|
margin-right: 1rem;
|
|
/* Overflow */
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
}
|
|
|
|
.hover-card-metadata svg {
|
|
margin-left: 1rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* Pop-up Hover Card */
|
|
|
|
.hover-card-popup-container {
|
|
width: 100%;
|
|
/* Idk why, but height is not calculated on the parent div, css being weird */
|
|
height: calc(100% - 32px - 1.2rem);
|
|
}
|
|
|
|
.hover-card-popup-text {
|
|
width: 30%;
|
|
margin: 1rem;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.hover-card-popup-text h1 {
|
|
font-family: "Gabarito";
|
|
}
|
|
|
|
.hover-card-popup-text svg {
|
|
margin-right: 0.6rem;
|
|
}
|
|
|
|
.hover-card-popup-text span {
|
|
font-family: "JetBrains Mono";
|
|
font-size: 1rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.hover-card-popup-text p {
|
|
font-family: "JetBrains Mono";
|
|
font-size: 1.1rem;
|
|
text-align: justify;
|
|
}
|
|
|
|
.hover-card-popup-picture {
|
|
width: 70%;
|
|
margin: 1rem;
|
|
}
|
|
|
|
.hover-card-popup-picture img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
} |