data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix z-index on profile

Browse source
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 {{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-grid">
<div class="account-profile-avatar"> <div class="account-profile-avatar">
<img src="{{profile.avatar}}" aria-hidden="true"> <img src="{{profile.avatar}}" aria-hidden="true">
@ -26,7 +28,7 @@
{{{profile.note}}} {{{profile.note}}}
</div> </div>
</div> </div>
<div class="account-profile-background"></div> </div>
</div> </div>
<style> <style>
.account-profile { .account-profile {
@ -41,7 +43,7 @@
background-color: #ccc; background-color: #ccc;
} }
.account-profile-background { .account-profile-backdrop {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -59,10 +61,12 @@
grid-row-gap: 2px; grid-row-gap: 2px;
padding: 10px; padding: 10px;
justify-content: center; justify-content: center;
z-index: 10;
position: relative;
} }
@supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) { @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%); -webkit-backdrop-filter: blur(7px) saturate(110%);
backdrop-filter: blur(7px) saturate(110%); backdrop-filter: blur(7px) saturate(110%);
background-color: rgba(255, 255, 255, 0.7); 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%))) { @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); background-color: rgba(255, 255, 255, 0.9);
} }
} }
.account-profile-followed-by, .account-profile-avatar, .account-profile-follow, .account-profile-grid {
.account-profile-name, .account-profile-username, .account-profile-note {
z-index: 10; z-index: 10;
} }