56 lines
1.1 KiB
SCSS
56 lines
1.1 KiB
SCSS
:host {
|
|
width: intrinsic;
|
|
height: intrinsic;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
pointer-events: none;
|
|
|
|
// The rotating icon's bounding box oscillates as it turns; clip it here so
|
|
// it cannot grow ancestor scrollable overflow (flickering scrollbars).
|
|
overflow: hidden;
|
|
|
|
background-color: var(--advanced-camera-card-loading-background-color);
|
|
color: var(--advanced-camera-card-loading-foreground-color);
|
|
|
|
transition: opacity 1.5s ease-in;
|
|
opacity: 1;
|
|
}
|
|
|
|
:host([loaded]) {
|
|
opacity: 0;
|
|
}
|
|
|
|
// The hidden element stays mounted: without this the icon would rotate
|
|
// invisibly forever.
|
|
:host([loaded]) advanced-camera-card-icon {
|
|
animation: none;
|
|
}
|
|
|
|
advanced-camera-card-icon {
|
|
// The icon's own box sets the size; the inner `ha-icon` machinery sizes
|
|
// itself from `--mdc-icon-size`, which needs a definite box to fill.
|
|
--mdc-icon-size: 100%;
|
|
|
|
margin-bottom: 20px;
|
|
height: 25%;
|
|
aspect-ratio: 1;
|
|
animation: rotate 8s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
span {
|
|
font-size: x-large;
|
|
}
|