178b0d751d
1. Hardcoding breaks any image changes done on dev instances or locally. 2. The relative path is bad, and there are few more instances of it. But continue as is for now, will file a ticket to fix this. 3. Fix caching.
368 lines
8.4 KiB
SCSS
368 lines
8.4 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;
|
|
background-color: #283263;
|
|
background-image: url('../../ui/component/membershipSplash/astronaut_n_friends.png'); // TODO fix relative path for all url('')
|
|
background-size: 100%;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 0.1) inset;
|
|
|
|
video {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
border-radius: var(--border-radius) !important;
|
|
border: 1px solid rgba(var(--color-primary-dynamic), 0.1);
|
|
}
|
|
|
|
@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'],
|
|
div[style*='transform-origin: right 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
|
|
// - floater not taking browser zoom levels into account (close button off screen).
|
|
// - many more...
|
|
display: none !important;
|
|
}
|
|
|
|
#aniBox {
|
|
transition: unset !important;
|
|
}
|
|
|
|
#aniBox[style*='height: 1px'] {
|
|
display: none;
|
|
}
|
|
|
|
#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
|
|
}
|
|
|
|
#av-container #av-inner #gui #close-btn {
|
|
// The current version started displaying the close button on video ads.
|
|
// It closes the video but leaves the container behind. Since there will
|
|
// be changes in the near future which the end result won't have this
|
|
// issue, just hide it for now.
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.ad__container {
|
|
box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 1) inset;
|
|
}
|
|
video {
|
|
border: 1px solid rgba(var(--color-primary-dynamic), 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-list {
|
|
.ads__claim-item--tile {
|
|
background-color: var(--color-ads-background);
|
|
margin-left: unset;
|
|
margin-bottom: var(--spacing-xxs);
|
|
width: 100%;
|
|
padding: var(--spacing-m);
|
|
flex: 1;
|
|
flex-direction: row;
|
|
|
|
.ad__container {
|
|
width: calc(var(--file-list-thumbnail-width) * 1.2);
|
|
// margin-left: var(--spacing-s);
|
|
margin-right: var(--spacing-s);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-xs) 0 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.ads__title {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.ads__subtitle {
|
|
margin-top: var(--spacing-s);
|
|
color: rgba(var(--color-text-base), 0.6);
|
|
font-weight: var(--font-weight-bold);
|
|
line-height: 1rem;
|
|
font-size: var(--font-xsmall);
|
|
|
|
.icon {
|
|
color: var(--color-text);
|
|
width: 2.1rem;
|
|
height: 2.1rem;
|
|
float: left;
|
|
margin-right: var(--spacing-s);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ad__container {
|
|
width: 100%;
|
|
}
|
|
|
|
.ads__claim-text {
|
|
max-width: 100%;
|
|
}
|
|
|
|
#close-btn {
|
|
left: unset !important;
|
|
right: 0 !important;
|
|
border: none !important;
|
|
border-radius: 0 var(--border-radius) 0 var(--border-radius) !important;
|
|
background-color: var(--color-primary) !important;
|
|
}
|
|
|
|
.visible {
|
|
display: none !important;
|
|
position: absolute !important;
|
|
top: 0px !important;
|
|
z-index: 99 !important;
|
|
width: 3rem !important;
|
|
height: 3rem !important;
|
|
background-color: var(--color-primary) !important;
|
|
border-radius: 0 var(--border-radius) 0 var(--border-radius) !important;
|
|
background-size: 60% !important;
|
|
}
|
|
}
|
|
|
|
.ads__claim-item--recommended {
|
|
// padding: var(--spacing-s);
|
|
padding: 0;
|
|
margin-top: var(--spacing-m);
|
|
border-radius: var(--border-radius);
|
|
border-bottom: unset;
|
|
|
|
.ad__container {
|
|
// width:100%;
|
|
width: var(--file-list-thumbnail-width);
|
|
}
|
|
|
|
.ads__claim-text {
|
|
margin: 0;
|
|
padding-left: var(--spacing-s);
|
|
|
|
.ads__title {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
display: none;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
// ****************************************************************************
|
|
// Outbrain
|
|
// ****************************************************************************
|
|
|
|
.OUTBRAIN {
|
|
border-radius: var(--border-radius) 0 0 0 !important;
|
|
height: unset !important;
|
|
|
|
.ob-widget .ob-unit.ob-rec-text {
|
|
font-size: 12px !important;
|
|
}
|
|
}
|
|
|
|
.closeButton {
|
|
background-color: var(--color-primary) !important;
|
|
color: var(--color-primary-contrast) !important;
|
|
border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
|
|
top: -27px !important;
|
|
width: 2rem !important;
|
|
padding-top: 3px;
|
|
// padding-bottom:4px !important;
|
|
height: 27px !important;
|
|
}
|
|
|
|
.ob-widget-footer {
|
|
position: absolute !important;
|
|
right: 32px;
|
|
top: -27px;
|
|
|
|
background: black;
|
|
border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
|
|
padding-left: 4px;
|
|
padding-right: 6px;
|
|
padding-top: 3px;
|
|
padding-bottom: 0px;
|
|
|
|
.ob_what_resp {
|
|
padding: unset !important;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.ob-widget-items-container {
|
|
padding-left: var(--spacing-xs);
|
|
padding-right: var(--spacing-xs);
|
|
border-radius: var(--border-radius) 0 0 0;
|
|
}
|
|
|
|
// ****************************************************************************
|
|
// Neko Patch
|
|
// ****************************************************************************
|
|
|
|
.ad__container {
|
|
div {
|
|
max-width: unset !important;
|
|
}
|
|
}
|
|
|
|
#av-container #av-inner #gui::before {
|
|
background: unset !important;
|
|
#timeline #timeline-progress {
|
|
background: var(--color-primary) !important;
|
|
}
|
|
}
|
|
|
|
#av-container #av-inner #gui #timeline #timeline-progress {
|
|
background: var(--color-primary) !important;
|
|
}
|