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

86 lines
1.5 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);
}