kopia lustrzana https://github.com/shoelace-style/shoelace
53 wiersze
1.2 KiB
TypeScript
53 wiersze
1.2 KiB
TypeScript
import { css } from 'lit';
|
|
import componentStyles from '~/styles/component.styles';
|
|
|
|
export default css`
|
|
${componentStyles}
|
|
|
|
:host {
|
|
--control-box-size: 3rem;
|
|
--icon-size: calc(var(--control-box-size) * 0.625);
|
|
display: inline-flex;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
img[aria-hidden='true'] {
|
|
display: none;
|
|
}
|
|
|
|
.animated-image__control-box {
|
|
display: flex;
|
|
position: absolute;
|
|
align-items: center;
|
|
justify-content: center;
|
|
top: calc(50% - var(--control-box-size) / 2);
|
|
right: calc(50% - var(--control-box-size) / 2);
|
|
width: var(--control-box-size);
|
|
height: var(--control-box-size);
|
|
font-size: var(--icon-size);
|
|
background: none;
|
|
border: solid 2px currentColor;
|
|
background-color: rgb(0 0 0 /50%);
|
|
border-radius: var(--sl-border-radius-circle);
|
|
color: white;
|
|
pointer-events: none;
|
|
transition: var(--sl-transition-fast) opacity;
|
|
}
|
|
|
|
:host([play]:hover) .animated-image__control-box {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
:host([play]:not(:hover)) .animated-image__control-box {
|
|
opacity: 0;
|
|
}
|
|
`;
|