67 lines
1.4 KiB
JavaScript
67 lines
1.4 KiB
JavaScript
|
import {
|
||
|
|
component_styles_default
|
||
|
|
} from "./chunk.K23QWHWK.js";
|
||
|
|
import {
|
||
|
|
i
|
||
|
|
} from "./chunk.CXZZ2LVK.js";
|
||
|
|
|
||
|
|
// src/components/animated-image/animated-image.styles.ts
|
||
|
|
var animated_image_styles_default = i`
|
||
|
|
${component_styles_default}
|
||
|
|
|
||
|
|
: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;
|
||
|
|
}
|
||
|
|
|
||
|
|
:host([play]:not(:hover)) .animated-image__control-box {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
:host([play]) slot[name='play-icon'],
|
||
|
|
:host(:not([play])) slot[name='pause-icon'] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export {
|
||
|
|
animated_image_styles_default
|
||
|
|
};
|