a98dc18fc6
- Initially, we did a bunch of forceful CSS to make the ad tile resize properly when the browser resizes. This was causing the EU ad to display incorrectly. Turns out, that css is no longer needed after the BEM-style re-write. - Changed the floating ad selector to cover both EU and non-EU version. It's probably still not the best given it relies on style rather than ID, but the ID seems dynamic.
185 lines
3.8 KiB
SCSS
185 lines
3.8 KiB
SCSS
.ads-wrapper {
|
|
@extend .navigation;
|
|
background-color: var(--color-ads-background);
|
|
padding-top: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
|
|
p {
|
|
margin-left: 0.4rem; // The ads provider adds weird padding to their wrapper
|
|
font-size: var(--font-xsmall);
|
|
color: var(--color-ads-text);
|
|
}
|
|
|
|
.button--link {
|
|
color: var(--color-ads-link);
|
|
}
|
|
}
|
|
|
|
// Inline Video Ads
|
|
// The default is coded for list-layout;
|
|
// --tile and other modifiers adjust accordingly.
|
|
.ads__claim-item {
|
|
border-bottom: 1px solid var(--color-border);
|
|
margin-top: var(--spacing-m);
|
|
margin-bottom: var(--spacing-m);
|
|
padding: var(--spacing-m);
|
|
background-color: var(--color-ads-background);
|
|
border-radius: var(--border-radius);
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
|
|
.ad__container {
|
|
aspect-ratio: 16 / 9;
|
|
$minWidth: calc(var(--file-list-thumbnail-width) * 0.8);
|
|
min-width: $minWidth;
|
|
|
|
video {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
$width: calc(var(--file-list-thumbnail-width) * 0.8);
|
|
width: $width;
|
|
}
|
|
|
|
@media (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
|
|
$width: calc(var(--file-list-thumbnail-width) * 1.2);
|
|
width: $width;
|
|
}
|
|
|
|
@media (min-width: $breakpoint-large) {
|
|
$width: calc(var(--file-list-thumbnail-width) * 1.2);
|
|
width: $width;
|
|
}
|
|
|
|
div[style*='transform-origin: left bottom;'] {
|
|
// [Floating ad]
|
|
// Hide for now since can't get it to work in a consistent manner between:
|
|
// - EU and non-EU version
|
|
// - issues in Firefox
|
|
display: none !important;
|
|
}
|
|
|
|
#aniBox {
|
|
transition: unset !important;
|
|
}
|
|
|
|
#aniBox,
|
|
#av-container {
|
|
width: 100% !important;
|
|
height: unset !important;
|
|
aspect-ratio: 16 / 9 !important;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.avp-p-wrapper > div {
|
|
border-radius: var(--border-radius) !important; // Needed for EU only
|
|
}
|
|
}
|
|
}
|
|
|
|
.ads__claim-item--tile {
|
|
@extend .card;
|
|
@extend .claim-preview--tile;
|
|
flex-direction: column;
|
|
|
|
padding: 0;
|
|
background-color: unset;
|
|
border-bottom: unset;
|
|
|
|
.ads__claim-text {
|
|
margin: var(--spacing-s) 0 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ad__container {
|
|
width: 100%;
|
|
}
|
|
|
|
.ads__claim-text {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.ads__claim-item--recommended {
|
|
padding: var(--spacing-s);
|
|
|
|
@media (min-width: $breakpoint-medium) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.ads__claim-text {
|
|
overflow: hidden;
|
|
max-width: 50%;
|
|
margin: var(--spacing-m) 0 var(--spacing-m) var(--spacing-s);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
color: var(--color-text-subtitle);
|
|
}
|
|
|
|
.ads__claim-text--small {
|
|
font-size: var(--font-small);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
font-size: var(--font-xsmall);
|
|
}
|
|
}
|
|
|
|
// Pre-roll ads
|
|
.ads__video-nudge,
|
|
.ads__video-notify {
|
|
position: absolute;
|
|
z-index: 3;
|
|
}
|
|
|
|
.ads__video-nudge {
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
background-color: var(--color-primary);
|
|
color: var(--color-white);
|
|
font-weight: bold;
|
|
padding: var(--spacing-xs);
|
|
}
|
|
|
|
.ads__video-notify {
|
|
display: flex;
|
|
align-items: center;
|
|
right: 0;
|
|
top: 0;
|
|
background-color: black;
|
|
border-bottom-left-radius: var(--border-radius);
|
|
color: var(--color-white);
|
|
font-size: var(--font-small);
|
|
padding: var(--spacing-xs);
|
|
}
|
|
|
|
.ads__video-link.button--secondary {
|
|
font-size: var(--font-small);
|
|
padding: var(--spacing-xs);
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.ads__video-close {
|
|
margin-left: var(--spacing-s);
|
|
border-radius: var(--border-radius);
|
|
|
|
.icon {
|
|
stroke: var(--color-white);
|
|
|
|
&:hover {
|
|
stroke: var(--color-black);
|
|
background-color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
|
|
.exp-ui__logo {
|
|
display: none;
|
|
}
|