New: On phones, faded the backdrop itself rather than overlaying gradients over it
This commit is contained in:
parent
e54feb79e8
commit
6a157db8e5
1 changed files with 4 additions and 11 deletions
|
|
@ -427,12 +427,12 @@ html {
|
||||||
margin-top: unset;
|
margin-top: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* This adds a light tint on the backdrop on phones */
|
||||||
.layout-mobile .detailPageWrapperContainer {
|
.layout-mobile .detailPageWrapperContainer {
|
||||||
background: var(--darkerGradientPointAlpha);
|
background: rgb(17 24 39 / 40%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-desktop .detailPageWrapperContainer {
|
.layout-desktop .detailPageWrapperContainer {
|
||||||
/* background: linear-gradient(0deg, var(--darkerGradientPoint) 80%, transparent); */
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
min-height: calc(100vh - 13em);
|
min-height: calc(100vh - 13em);
|
||||||
}
|
}
|
||||||
|
|
@ -448,18 +448,10 @@ html {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-mobile .detailPagePrimaryContainer {
|
|
||||||
background: linear-gradient(0deg, var(--darkerGradientPoint) 70%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-desktop .detailPagePrimaryContainer {
|
.layout-desktop .detailPagePrimaryContainer {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-mobile .detailPageSecondaryContainer {
|
|
||||||
background-color: var(--darkerGradientPoint);
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-desktop .detailPageSecondaryContainer {
|
.layout-desktop .detailPageSecondaryContainer {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
@ -656,7 +648,8 @@ html {
|
||||||
.layout-mobile .itemBackdrop {
|
.layout-mobile .itemBackdrop {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: -10%;
|
top: -30%;
|
||||||
|
mask: linear-gradient(180deg, black 50%, transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-tv .itemBackdrop {
|
.layout-tv .itemBackdrop {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue