lbry-desktop/ui/scss/component/_ads.scss
2021-01-23 12:57:09 -05:00

85 lines
1.5 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
.ads__claim-item {
border-bottom: 1px solid var(--color-border);
padding: var(--spacing-m);
background-color: var(--color-ads-background);
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
> div,
ins {
width: 100%;
position: relative !important;
max-width: 30rem;
min-width: 15rem;
}
.avp-p-gui {
z-index: 1 !important;
}
@media (max-width: $breakpoint-small) {
flex-direction: column;
> div {
width: 100%;
}
}
}
// 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%;
}
}
}
.ads__claim-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.ads__claim-text--small {
font-size: var(--font-small);
}