Source code
Revision control
Copy as Markdown
Other Tools
// This file owns only the shared hover-card frame; each content card owns its
// own inner styles. A new content variant follows the same split.
@import 'CardWebNotifications/CardWebNotifications';
.top-sites-hover-card {
position: absolute;
pointer-events: none;
transform: translate(-50%, calc(-1 * var(--space-xsmall)));
z-index: 3;
padding: var(--space-medium);
opacity: 0;
transition: opacity 150ms ease-out;
inset-block-start: calc(100% + var(--space-xsmall));
inset-inline-start: 50%;
// inset-inline-start flips to the right edge in RTL, but the centering
// translate is physical; flip its X so the card stays centered on the tile
// instead of being pushed a full half-width off-screen.
&:dir(rtl) {
transform: translate(50%, calc(-1 * var(--space-xsmall)));
}
.top-site-outer:is(:hover, :focus-within, :focus, .active) & {
pointer-events: initial;
opacity: 1;
}
// With the pointer active anywhere in the list, a card kept open only by
// keyboard focus (its tile not hovered) yields to the hovered tile's card, so
// at most one card shows and overlapping cards can't both take the pointer.
// Pointer away from the list -> focus alone still shows it, so keyboard-only
// users are unaffected.
.top-sites-list:hover .top-site-outer:focus-within:not(:hover) & {
pointer-events: none;
opacity: 0;
}
}
.top-sites-hover-card-inner {
box-sizing: border-box;
inline-size: var(--size-layout-medium);
max-block-size: 60vh;
overflow-y: auto;
padding: var(--space-small);
background: var(--newtab-background-color-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-medium);
box-shadow: var(--popup-box-shadow);
text-align: start;
display: flex;
flex-direction: column;
gap: var(--space-medium);
cursor: default;
}