Source code
Revision control
Copy as Markdown
Other Tools
.nova-enabled {
.omc-highlight-slot {
grid-column: 1 / -1;
// The popover floats up out of the widgets section toward the search bar,
// so it needs to sit above the search bar (z-index 3) to stay fully
// visible. Known edge case: on taller screens (height > 700px) the search
// bar becomes sticky, and the popover will render over it rather than
// tucking underneath as the page scrolls.
.feature-highlight {
z-index: 4;
}
}
.feature-highlight .widgets-callout {
@include nova-feature-highlight-border;
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
width: 360px;
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
max-width: calc(100vw - var(--space-large) * 2);
padding: calc(var(--space-large) + var(--space-xsmall));
.message-icon {
display: none;
}
.content-wrapper {
width: 100%;
}
> moz-button {
position: absolute;
inset-inline-end: var(--space-small);
inset-block-start: var(--space-small);
}
&::after {
background:
linear-gradient(
var(--background-color-box),
var(--background-color-box)
)
padding-box,
linear-gradient(
90deg,
var(--nova-highlight-border-gradient-start),
var(--nova-highlight-border-gradient-end)
)
border-box;
border: var(--border-width) solid var(--border-color-transparent);
border-end-end-radius: var(--border-radius-small);
box-shadow: none;
clip-path: polygon(100% 100%, 100% 2%, 2% 100%);
// Sub-pixel anti-aliasing nudge so the V's top overlaps the card's
// bottom gradient border without a hairline gap.
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens, declaration-property-value-disallowed-list */
inset-block-end: calc(var(--space-medium) * -1 + 0.125px);
inset-inline-start: 50%;
transform: translateX(-50%) rotate(45deg);
}
}
.highlight-popover-body .title {
font-size: var(--font-size-root);
}
}