dashboard: icon fallback on real img load failure, not container-state guess
This commit is contained in:
parent
16f614f45d
commit
ab1f8d6e33
3 changed files with 42 additions and 23 deletions
|
|
@ -89,17 +89,26 @@ a:hover {
|
|||
gap: 0.7em;
|
||||
}
|
||||
.container-row:not(.tombstone) > .container-icon {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 6px;
|
||||
background-color: rgba(17, 17, 27, 0.6);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
/* Stopped / mid-transient container: the dimmed hyperhive mark stands
|
||||
in for the unreachable agent icon (issue #195). */
|
||||
/* The icon image fills the square wrapper and is taken out of flow
|
||||
(absolute) so its load state — pending, loaded, broken — can never
|
||||
contribute intrinsic size or reflow the row. (issue #177) */
|
||||
.container-row:not(.tombstone) > .container-icon > .container-icon-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
/* When the <img> fails to load it falls back to the dimmed hyperhive
|
||||
mark, standing in for the unreachable agent icon (issues #195, #202). */
|
||||
.container-row:not(.tombstone) > .container-icon.icon-unreachable {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.4;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue