nolanlawson
/
pinafore
forked from cybrespace/pinafore
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix z-index on profile

This commit is contained in:
Nolan Lawson 2018-01-28 14:17:37 -08:00
parent 8d5eadf734
commit 3896717c8c
1 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
routes/_components/AccountProfile.html
View File

@ -1,4 +1,6 @@
<div class="account-profile {{headerIsMissing ? 'header-is-missing' : ''}}" style="background-image: url({{profile.header}});">
<div class="account-profile-grid-wrapper">
<div class="account-profile-backdrop"></div>
<div class="account-profile-grid">
<div class="account-profile-avatar">
<img src="{{profile.avatar}}" aria-hidden="true">
@ -26,7 +28,7 @@
{{{profile.note}}}
</div>
</div>
<div class="account-profile-background"></div>
</div>
</div>
<style>
.account-profile {
@ -41,7 +43,7 @@
background-color: #ccc;
}
.account-profile-background {
.account-profile-backdrop {
position: absolute;
left: 0;
top: 0;
@ -59,10 +61,12 @@
grid-row-gap: 2px;
padding: 10px;
justify-content: center;
z-index: 10;
position: relative;
}
@supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
:global(.account-profile-grid) {
:global(.account-profile-grid-wrapper) {
-webkit-backdrop-filter: blur(7px) saturate(110%);
backdrop-filter: blur(7px) saturate(110%);
background-color: rgba(255, 255, 255, 0.7);
@ -70,13 +74,12 @@
}
@supports not ((-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%))) {
:global(.account-profile-grid) {
:global(.account-profile-grid-wrapper) {
background-color: rgba(255, 255, 255, 0.9);
}
}
.account-profile-followed-by, .account-profile-avatar, .account-profile-follow,
.account-profile-name, .account-profile-username, .account-profile-note {
.account-profile-grid {
z-index: 10;
}