change position and add gradient to cover most content (#7)
This commit is contained in:
parent
537a4f8f44
commit
684ed0406d
|
@ -1,13 +1,13 @@
|
||||||
.custom-gated-topic-container {
|
.custom-gated-topic-container {
|
||||||
background: var(--tertiary-low);
|
background: var(--tertiary-low);
|
||||||
border-top: 5px solid var(--tertiary);
|
border-top: 5px solid var(--tertiary);
|
||||||
position: absolute;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
min-height: 68%;
|
min-height: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-gated-topic-content {
|
.custom-gated-topic-content {
|
||||||
|
@ -53,17 +53,21 @@
|
||||||
max-height: 150vh;
|
max-height: 150vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-view {
|
.container.posts::before { // ensure to cover most of the content when zoomed out
|
||||||
.custom-gated-topic-container {
|
content: "";
|
||||||
position: fixed;
|
position: absolute;
|
||||||
min-height: 50%;
|
top: 0;
|
||||||
display: grid;
|
left: 0;
|
||||||
place-items: center;
|
right: 0;
|
||||||
}
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
.custom-gated-topic-content {
|
z-index: 50;
|
||||||
margin: auto;
|
background: rgb(255,255,255);
|
||||||
|
background: linear-gradient(0deg,
|
||||||
|
rgba(255,255,255,1) 0%,
|
||||||
|
rgba(255,255,255,1) 60%,
|
||||||
|
rgba(255,255,255,1) 70%,
|
||||||
|
rgba(255,255,255,0) 100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue