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,
/* stylelint-disable stylelint-plugin-mozilla/use-design-tokens */
.sports {
border-radius: var(--border-radius-large);
padding: var(--space-medium);
display: flex;
flex-direction: column;
box-shadow: var(--box-shadow-level-2);
height: 100%;
position: relative;
@include widget-base-style;
&:hover,
&:has(:focus-visible) {
outline: 1px solid var(--border-color-deemphasized);
box-shadow: var(--card-box-shadow-hover);
}
&.is-followed-highlight {
&::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px; /* stylelint-disable-line declaration-property-value-disallowed-list */
background: var(--sports-followed-gradient);
// Cuts a hole in the middle so only the 2px outer ring shows,
// turning the gradient fill into a gradient border.
mask:
linear-gradient(#FFF 0 0) content-box,
linear-gradient(#FFF 0 0);
mask-composite: exclude;
pointer-events: none;
}
}
&.medium-widget {
.sports-title-wrapper {
align-items: center;
margin-block-end: 0;
}
.sports-intro-wrapper > .sports-intro-lede {
margin: 0;
}
.sports-intro-title {
font-size: var(--font-size-root);
}
.sports-buttons-wrapper {
margin-block-start: var(--space-medium);
}
.sports-body {
padding-block-end: 0;
justify-content: space-between;
}
.match-highlight-view {
align-self: first baseline;
margin-block-end: auto;
}
}
&.large-widget {
.sports-intro-wrapper {
margin-block-start: var(--space-large);
}
.sports-buttons-wrapper {
margin-block-start: var(--space-large);
}
}
&.sports-intro {
position: relative;
overflow: hidden;
.sports-intro-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom center;
pointer-events: none;
}
> .sports-title-wrapper,
> .sports-body {
position: relative;
z-index: 1;
}
}
&.sports-follow-state {
.sports-title-wrapper {
padding: var(--space-small);
}
}
&.sports-matches {
.sports-title-wrapper {
grid-template-columns: auto 1fr auto;
}
}
&.sports-key-dates {
.sports-title-wrapper {
grid-template-columns: auto 1fr auto;
> h3 {
font-size: var(--font-size-small);
margin-block: 0;
justify-self: start;
align-self: center;
margin-inline-start: var(--space-small);
font-weight: var(--font-weight);
color: var(--text-color-deemphasized);
}
}
}
}
.sports-title-wrapper {
display: grid;
grid-template-columns: 1fr auto 1fr;
margin-block-end: var(--space-xsmall);
.sports-intro-title {
margin-block: 0;
max-width: 250px;
}
.sports-intro-lede {
margin-block-end: var(--space-small);
}
}
.sports-context-menu-wrapper {
grid-column: 3;
justify-self: end;
opacity: 0;
pointer-events: none;
}
.sports:hover,
.sports:has(:focus-visible) {
.sports-context-menu-wrapper {
opacity: 1;
pointer-events: auto;
}
}
// Handles keyboard focus on moz-button, since :has(:focus-visible) doesn't include shadow DOM
.sports-context-menu-wrapper:focus-within,
.sports-context-menu-wrapper:has(panel-list[open]) {
opacity: 1;
pointer-events: auto;
}
.sports-body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-small);
overflow-y: auto;
scrollbar-width: none;
overflow-x: hidden;
padding-inline: var(--space-small);
padding-block: var(--space-xsmall) var(--space-small);
}
.sports-live-scores {
display: flex;
flex-direction: column;
gap: var(--space-xsmall);
}
.sports-intro-wrapper {
text-align: center;
}
.sports-intro-title {
margin-block: 0;
font-size: var(--font-size-heading-xlarge);
font-weight: var(--font-weight-heading);
}
.sports-buttons-wrapper {
display: flex;
flex-direction: column;
align-items: center;
.sports-view-matches {
margin-block-end: var(--space-small);
}
.sports-follow-teams-btn {
background: var(--newtab-background-color-secondary);
border-radius: var(--border-radius-xlarge);
}
}
.sports-follow-teams {
display: flex;
flex-direction: column;
gap: var(--space-small);
flex: 1;
}
.sports-country-search {
margin-block-end: var(--space-xsmall);
}
.sports-follow-teams-title {
font-size: var(--font-size-small);
align-self: center;
}
.sports-follow-teams-list {
display: flex;
flex-direction: column;
padding: var(--space-xsmall);
gap: var(--space-medium);
flex: 1;
overflow-y: auto;
}
.sports-follow-teams-row {
display: flex;
align-items: center;
gap: var(--space-small);
cursor: pointer;
&.is-disabled {
cursor: not-allowed;
opacity: 0.5;
moz-checkbox {
// Lets the row's not-allowed cursor show through; we can't reach the cursor on the input in the shadow DOM from outside.
pointer-events: none;
}
.sports-team-flag,
.sports-team-name {
cursor: not-allowed;
}
}
}
.sports-team-flag {
width: 30px;
height: var(--dimension-20);
object-fit: cover;
flex-shrink: 0;
}
.sports-team-name {
flex: 1;
min-width: 0;
font-size: var(--font-size-root);
color: var(--text-color);
}
.sports-back-button {
grid-column: 1;
justify-self: start;
&:dir(rtl) {
transform: scaleX(-1);
}
}
.sports-matches-tabs {
display: flex;
}
.sports-matches-view {
height: 100%;
display: flex;
align-items: center;
}
.sports-matches-tab-panel {
width: 100%;
height: 100%;
}
.sports-matches-view > div > moz-button {
display: block;
margin-inline: auto;
}
.sports-matches-list-section > ul {
list-style: none;
padding-inline-start: 0;
margin-block: 0;
}
.sports-matches-list {
margin-block-start: var(--space-medium);
}
.sports-section-label {
color: var(--text-color-deemphasized);
font-size: var(--font-size-small);
}
.sports-matches-list-section {
display: flex;
flex-direction: column;
gap: var(--space-large);
}
@keyframes sports-section-label-live-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.sports-section-label-live {
color: var(--text-color-error);
font-weight: var(--font-weight-heading);
animation: sports-section-label-live-pulse 1.6s ease-in-out infinite;
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
.sports-matches-list-section {
& + & {
border-block-start: 1px solid var(--border-color-deemphasized);
padding-block-start: calc(var(--space-large) + var(--space-xsmall));
margin-block-start: calc(var(--space-large) + var(--space-xsmall));
}
}
.sports-followed-only-toggle {
display: block;
margin-block-end: var(--space-small);
}
// This rule applies to the "Show less" button only when the full list of upcoming games or previous results is shown
.sports-matches-tab-panel:not(:has(.match-highlight-view)) > moz-button {
margin-block-start: var(--space-medium);
padding-block-end: var(--space-small);
}
.sports-matches-tab-panel:has(.match-highlight-view) {
height: 100%;
position: relative;
display: flex;
flex-direction: column;
}
.sports-matches-tab-panel:has(.match-highlight-view) > .sports-section-label {
position: absolute;
margin-block-start: var(--space-medium);
}
.large-widget
.sports-matches-tab-panel:has(.match-highlight-view)
> .match-highlight-view {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.sports-matches-tab-panel:has(.match-highlight-view) > moz-button {
position: absolute;
inset-block-end: 0;
inset-inline: 0;
width: fit-content;
}
.sports-matches-tab {
flex: 1;
padding-block: var(--space-small);
border: none;
border-block-end: 2px solid transparent;
font-size: var(--font-size-small);
&:focus-visible {
outline: var(--focus-outline);
}
&.is-active {
font-weight: var(--font-weight-semibold);
border-block-end-color: var(--color-accent-primary);
}
&.is-disabled {
color: var(--text-color-disabled);
cursor: not-allowed;
pointer-events: none;
}
}
.sports-cancel-button {
grid-column: 3;
justify-self: end;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--newtab-primary-action-background);
font-size: var(--font-size-small);
text-decoration: underline;
}
.sports-done-button {
margin-inline-start: auto;
position: sticky;
inset-inline-end: 0;
inset-block-end: var(--space-xxsmall);
}
// Key dates state
.sports-key-dates {
display: flex;
flex-direction: column;
.sports-key-dates-list {
list-style: none;
padding-inline-start: var(--space-xsmall);
margin-block-start: 0;
.sports-key-dates-item {
display: flex;
justify-content: space-between;
margin-block-end: var(--space-medium);
font-size: var(--font-size-small);
&:last-of-type {
margin-block-end: 0;
}
}
}
moz-button {
align-self: center;
}
}