Files
gameyfin/frontend/src/app/components/game-cover/game-cover.component.scss
T
2022-08-18 22:17:13 +02:00

60 lines
908 B
SCSS

@use '@angular/material' as mat;
.game-cover-container {
height: 352px;
width: 264px;
background-repeat: no-repeat;
background-position: center bottom;
@include mat.elevation(4);
}
.enlarge {
transition: transform 280ms ease-out;
&:hover,
&:focus {
transform: scale(1.05);
}
}
.shine {
position: relative;
overflow: hidden;
&::before {
background: linear-gradient(
to right,
fade_out(#fff, 1) 0%,
fade_out(#fff, 0.7) 100%
);
content: "";
display: block;
height: 100%;
left: -100%;
position: absolute;
top: 0;
transform: skewX(-25deg);
width: 50%;
z-index: 2;
}
&:hover,
&:focus {
&::before {
animation: shine 0.85s;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
}
.no-link-styling a:hover, a:visited, a:link, a:active {
text-decoration: none;
color: black;
}