Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
// Flag dimensions and raw mascot/gradient values have no design-system tokens.
/* stylelint-disable stylelint-plugin-mozilla/use-design-tokens */
.sports {
--sports-result-flag-width: 86px;
--sports-result-flag-height: 60px;
.sports-result-flag-wrapper {
display: inline-block;
line-height: 0;
}
.sports-result-flag {
inline-size: var(--sports-result-flag-width);
block-size: var(--sports-result-flag-height);
display: block;
border-radius: var(--border-radius-medium);
box-shadow: var(--box-shadow-level-2);
object-fit: cover;
}
.sports-result-text {
display: flex;
flex-direction: column;
gap: var(--space-small);
align-items: center;
}
.sports-result-name {
font-size: var(--font-size-xlarge);
font-weight: var(--font-weight-semibold);
color: var(--text-color);
line-height: 1.1;
text-align: center;
}
.sports-result-placement {
font-size: var(--font-size-root);
color: var(--text-color);
line-height: 1.2;
max-inline-size: 10em;
}
.sports-result-team {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-small);
text-align: center;
}
.sports-result-surface {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
inline-size: 100%;
block-size: 100%;
background: var(--background-color-box);
border-radius: var(--border-radius-xlarge);
box-shadow: var(--box-shadow-level-2);
padding: var(--space-medium);
}
// Full-widget-frame overlay: the fox is pre-composited in the asset, so the
// video fills the widget and the asset itself places kit. object-position
// keeps it bottom-anchored when scaled down (e.g. the medium widget).
.sports-result-mascot {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
object-position: center bottom;
z-index: 2;
pointer-events: none;
}
}
.sports-result-card {
position: relative;
flex: 1;
display: flex;
}
// Large champion: the champion+ball asset is centered in its frame, so the
// full-frame overlay would sit it dead-center over the flag + copy. Override it
// to a smaller kit pinned in the bottom-inline-end corner. Not cropped:
// block-size sets the size; inset-inline-end sets how far right.
.sports.large-widget .sports-result-mascot-champion {
inset-block: auto -5%;
inset-inline: auto -20%;
inline-size: auto;
block-size: 75%;
}
// Medium champion: short, wide widget, so pin the full-frame champion+ball asset
// smaller in the bottom-inline-end corner (logical insets keep it RTL-safe).
.sports.medium-widget .sports-result-mascot-champion {
inset-block: auto -52.5%;
inset-inline: auto -20%;
inline-size: auto;
block-size: 155%;
}
// Third place: the full-body kit-default fox dropped below the bottom edge so
// the widget's overflow:hidden crops it to head + shoulders in the
// bottom-inline-end corner. block-size sets the kit size; inset-block-end sets
// the crop line (less negative shows more of him, down toward the body).
.sports.large-widget .sports-result-mascot-third {
inset-block: auto -30%;
inset-inline: auto -17.5%;
inline-size: auto;
block-size: 70%;
}
// The medium widget is shorter, so the third kit needs a larger block-size to
// read at a comparable size, and less inline offset to sit further left.
.sports.medium-widget .sports-result-mascot-third {
inset-block: auto -70%;
inset-inline: auto -15%;
inline-size: auto;
block-size: 140%;
}
.sports-result-card-medium {
.sports-result-surface {
align-items: flex-start;
justify-content: center;
}
.sports-result-team {
flex-direction: row;
align-items: center;
gap: var(--space-medium);
text-align: start;
}
}
.sports-result-card-third.sports-result-card-large .sports-result-surface {
align-items: center;
justify-content: flex-start;
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
padding-block-start: 32px;
}
.sports-result-final {
inline-size: 100%;
margin-block-start: auto;
.sports-match-row .sports-match-team {
flex-direction: row;
align-items: center;
gap: var(--space-small);
}
.sports-match-row .sports-match-team:first-child {
flex-direction: row-reverse;
}
.sports-match-row .sports-match-upcoming .sports-match-time {
font-size: var(--font-size-root);
}
.sports-match-row .sports-match-upcoming .sports-match-date {
font-size: var(--font-size-small);
}
}
.sports-result-final-label {
margin: 0 0 var(--space-xxsmall);
color: var(--text-color-deemphasized);
font-size: var(--font-size-root);
}
.sports-podium {
position: relative;
flex: 1;
display: flex;
}
.sports .sports-podium-surface {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
'champion champion'
'runner-up third';
align-content: space-between;
justify-items: center;
gap: var(--space-small);
}
.sports-result-team-podium-champion {
grid-area: champion;
--sports-result-flag-width: 86px;
--sports-result-flag-height: 60px;
}
.sports-result-team-podium-runner-up,
.sports-result-team-podium-third {
--sports-result-flag-width: 52px;
--sports-result-flag-height: 36px;
}
.sports-result-team-podium-runner-up {
grid-area: runner-up;
justify-self: start;
}
.sports-result-team-podium-third {
grid-area: third;
justify-self: end;
}
// The podium reuses the full-frame kit-default asset, but here the fox is
// bottom-centered in the gap between the two lower flags rather than filling the
// widget, so override the full-frame overlay with a scaled, centered video
// (RTL-safe centering via auto inline margins). Not cropped: block-size alone
// sets the size.
.sports.large-widget .sports-result-mascot-podium {
inset-block: auto -35%;
inset-inline: 0;
margin-inline: auto;
inline-size: auto;
block-size: 80%;
}
.sports.is-result-view {
overflow: hidden;
border: none;
&:hover,
&:has(:focus-visible) {
outline: none;
}
--confetti-duration-scale: 1;
--confetti-delay-scale: 1.8;
--firework-start-delay: 2500ms;
--widget-celebration-hold-duration: 7600ms;
padding: calc(var(--space-small) + var(--space-xxsmall));
background: radial-gradient(
135% 115% at 50% 118%,
#592ACB 0%,
#834FCA 11%,
#AC74C8 22%,
#D698C7 33%,
#FFBDC5 44%,
#CC98AD 58%,
#98748F 72%,
#654F7C 86%,
#312A64 100%
);
> .sports-title-wrapper {
position: absolute;
inset-block-start: calc(var(--space-small) + var(--space-xxsmall));
inset-inline: calc(var(--space-small) + var(--space-xxsmall));
margin: 0;
z-index: 2;
}
> .sports-body {
position: relative;
z-index: 1;
margin: 0;
padding: 0;
overflow: visible;
}
}
.sports-result-card-champion.sports-result-card-large .sports-result-surface {
justify-content: flex-start;
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
padding-block-start: 52px;
}