change position and add gradient to cover most content (#7)

This commit is contained in:
Ella E 2022-04-14 14:51:40 -06:00 committed by GitHub
parent 537a4f8f44
commit 684ed0406d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 13 deletions

View File

@ -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%);
} }
} }