lbry-desktop/ui/scss/component/_ads.scss

135 lines
2.4 KiB
SCSS
Raw Normal View History

2020-01-24 19:31:49 +01:00
.ads-wrapper {
@extend .navigation;
background-color: var(--color-ads-background);
padding-top: 0.5rem;
padding-right: 0.5rem;
2020-01-24 19:31:49 +01:00
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);
2020-01-24 19:31:49 +01:00
}
}
2020-03-26 22:47:07 +01:00
// Inline Video Ads
.ads__claim-item {
border-bottom: 1px solid var(--color-border);
2020-06-01 19:03:19 +02:00
padding: var(--spacing-m);
2020-03-26 22:47:07 +01:00
background-color: var(--color-ads-background);
display: flex;
2020-10-20 23:52:44 +02:00
flex-direction: row;
flex-wrap: wrap;
2020-10-19 23:32:28 +02:00
width: 100%;
2020-03-26 22:47:07 +01:00
2021-01-22 00:57:29 +01:00
> div,
ins {
2020-10-19 23:32:28 +02:00
width: 100%;
2020-03-26 22:47:07 +01:00
position: relative !important;
2020-10-20 23:52:44 +02:00
max-width: 30rem;
min-width: 15rem;
2020-03-26 22:47:07 +01:00
}
.avp-p-gui {
z-index: 1 !important;
}
2020-03-30 14:57:15 +02:00
@media (max-width: $breakpoint-small) {
flex-direction: column;
> div {
width: 100%;
}
2020-03-26 22:47:07 +01:00
}
}
2021-01-22 00:57:29 +01:00
// Related list ads
.ads__related--google {
border-bottom: 1px solid var(--color-border);
//padding: var(--spacing-s);
background-color: var(--color-card-background);
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
> div,
ins {
width: 100%;
position: relative !important;
max-width: 30rem;
min-width: 15rem;
margin: var(--spacing-s);
}
@media (max-width: $breakpoint-small) {
flex-direction: column;
> div {
width: 100%;
}
}
}
2020-03-26 22:47:07 +01:00
.ads__claim-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.ads__claim-text--small {
font-size: var(--font-small);
}
2021-03-11 22:27:03 +01:00
// 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);
}
}
}