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,
.watch-live-modal-dialog {
border: none;
padding: 0;
border-radius: var(--border-radius-large);
background: var(--newtab-background-color-secondary);
color: var(--text-color);
box-shadow: var(--box-shadow-level-2);
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
width: 437px;
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
height: 367px;
overflow: hidden;
&::backdrop {
background: var(--background-color-overlay);
}
.watch-live-modal-content {
height: 100%;
display: flex;
flex-direction: column;
}
.watch-live-modal-header {
flex: 0 0 auto;
padding: var(--space-large) var(--space-large) var(--space-medium);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-medium);
}
.watch-live-modal-title {
font-size: var(--font-size-large);
font-weight: var(--font-weight-bold);
margin: 0;
}
.watch-live-modal-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
padding: 0 var(--space-large) var(--space-large);
}
.watch-live-modal-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.watch-live-modal-row-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-medium);
padding: var(--space-small) var(--space-medium);
border-radius: var(--border-radius-medium);
color: inherit;
text-decoration: none;
&:hover {
background: var(--newtab-element-hover-color);
}
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
}
}
.watch-live-modal-row-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.watch-live-modal-product {
font-weight: var(--font-weight-bold);
}
.watch-live-modal-entitlement {
font-size: var(--font-size-small);
color: var(--text-color-deemphasized);
}
.watch-live-modal-play {
flex: 0 0 auto;
width: var(--icon-size-large);
height: var(--icon-size-large);
border-radius: var(--border-radius-circle);
border: var(--border-width) solid currentColor;
background:
url('chrome://global/skin/media/play-fill.svg') center / var(--icon-size-xsmall) no-repeat;
color: var(--color-accent-primary, AccentColor);
-moz-context-properties: fill;
fill: currentColor;
}
.watch-live-modal-separator {
border: none;
border-block-start: var(--border-width) solid var(--border-color);
margin: var(--space-medium) 0;
}
.watch-live-modal-other-regions-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: none;
border: none;
color: inherit;
padding: var(--space-small) var(--space-medium);
border-radius: var(--border-radius-medium);
font: inherit;
cursor: pointer;
&:hover {
background: var(--newtab-element-hover-color);
}
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
}
}
.watch-live-modal-chevron {
width: var(--icon-size-small);
height: var(--icon-size-small);
-moz-context-properties: fill;
fill: currentColor;
}
.watch-live-modal-other-regions {
display: flex;
flex-direction: column;
gap: var(--space-medium);
margin-block-start: var(--space-medium);
}
.watch-live-modal-region-title {
font-size: var(--font-size-root);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--space-xsmall);
padding-inline: var(--space-medium);
}
}