551c13251a
- This increases the amount of ads, filling up the entire width. No more need to restrict with `max-width` ourself. - Changed the ad-driver to top-right since the "Powered by Outbrain" text is now locked in bottom-right. Also made the container having a minimum height, as the method to "display the driver after ads are loaded" is not future proof -- it depends on the IDs being used by the ad. Reserving some space seems to be easiest, and it also reduces shifts as well.
446 lines
10 KiB
SCSS
446 lines
10 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');
|
|
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;
|
|
}
|
|
|
|
// ****************************************************************************
|
|
// Banner
|
|
// ****************************************************************************
|
|
|
|
$BANNER_BORDER: 1px;
|
|
|
|
.banner-ad {
|
|
margin-top: var(--spacing-l);
|
|
background-color: var(--color-ads-background);
|
|
border: $BANNER_BORDER solid var(--color-border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.banner-ad__container {
|
|
min-height: 250px;
|
|
|
|
padding: var(--spacing-xxs) var(--spacing-m);
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: var(--spacing-xxs) var(--spacing-xxs);
|
|
}
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
margin: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: $breakpoint-xlarge) {
|
|
max-width: calc(#{$breakpoint-xlarge} * 3 / 4);
|
|
}
|
|
}
|
|
|
|
.banner-ad__driver {
|
|
display: flex;
|
|
flex-direction: row;
|
|
max-width: 50%;
|
|
|
|
border-left: $BANNER_BORDER solid var(--color-border);
|
|
border-bottom: $BANNER_BORDER solid var(--color-border);
|
|
border-radius: 0 var(--border-radius) 0 var(--border-radius);
|
|
float: right;
|
|
|
|
font-size: var(--font-xsmall);
|
|
@media (max-width: $breakpoint-small) {
|
|
font-size: var(--font-xxsmall);
|
|
}
|
|
|
|
> * {
|
|
padding: 0 var(--spacing-xxxs);
|
|
}
|
|
}
|
|
|
|
.banner-ad__driver-label {
|
|
color: var(--color-text-subtitle);
|
|
}
|
|
|
|
.banner-ad__driver-value {
|
|
color: var(--color-text-subtitle);
|
|
border-left: $BANNER_BORDER solid var(--color-border);
|
|
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
@supports (-webkit-line-clamp: 3) {
|
|
white-space: initial;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
line-height: 1.2;
|
|
padding: calc(var(--spacing-xxxs) / 2) var(--spacing-xxxs);
|
|
}
|
|
}
|