a9f0d61daa
BadgeSkeleton is the twin of Badge: the real Badge frame, as tall as an interactive one (the settings values are buttons), with a placeholder for its value. Permissions, resource caps, internet and allowed domains use it in place of their "loading…" text, the details popover shows lines of text, and the AGENTS.md editor a block, in place of theirs. SkeletonLines is a few stacked lines for such blocks.
88 lines
2.3 KiB
CSS
88 lines
2.3 KiB
CSS
/* <Skeleton>: a tinted shape with a light band moving across it. Motion
|
|
follows the page's setting, the same three rules the page switch uses
|
|
(`shell/Shell.css`): off for an OS that asks for less motion, off when the
|
|
setting says reduce, back on when the setting says allow. Where it is off
|
|
the shape is a plain tinted block. */
|
|
.ui-skeleton {
|
|
display: block;
|
|
border-radius: 0.3em;
|
|
background-color: color-mix(in srgb, var(--muted) 22%, transparent);
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
transparent 0,
|
|
color-mix(in srgb, var(--fg) 12%, transparent) 50%,
|
|
transparent 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 150% 0;
|
|
animation: ui-skeleton-shimmer 1.4s ease-in-out infinite;
|
|
}
|
|
.ui-skeleton-line {
|
|
height: 1em;
|
|
max-width: 100%;
|
|
}
|
|
.ui-skeleton-circle {
|
|
border-radius: 50%;
|
|
}
|
|
.ui-skeleton-block {
|
|
border-radius: 0.5em;
|
|
}
|
|
@keyframes ui-skeleton-shimmer {
|
|
to {
|
|
background-position: -50% 0;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ui-skeleton {
|
|
animation: none;
|
|
background-image: none;
|
|
}
|
|
}
|
|
:root[data-motion="reduce"] .ui-skeleton {
|
|
animation: none;
|
|
background-image: none;
|
|
}
|
|
:root[data-motion="allow"] .ui-skeleton {
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
transparent 0,
|
|
color-mix(in srgb, var(--fg) 12%, transparent) 50%,
|
|
transparent 100%
|
|
);
|
|
animation: ui-skeleton-shimmer 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
/* The words a screen reader gets, out of sight. */
|
|
.ui-skeleton-label {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
}
|
|
.ui-skeleton-region {
|
|
display: contents;
|
|
}
|
|
|
|
/* Lines of text stacked with a line's own spacing. */
|
|
.ui-skeleton-lines {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.6em;
|
|
}
|
|
|
|
/* A badge placeholder as tall and wide-set as an interactive Badge
|
|
(`.ui-badge-interactive` in @hive/shared's Badge.css: the settings values
|
|
are all buttons), so the pill does not change size when its value lands. */
|
|
.ui-skeleton-badge {
|
|
box-sizing: border-box; /* as the button it stands in for */
|
|
min-height: 2.75em;
|
|
padding-inline: 0.8em;
|
|
border-radius: 999px;
|
|
}
|
|
.ui-skeleton-badge .ui-skeleton {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|