dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-07-06 19:40:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

experimenting with new backdrop blur

Browse source
This commit is contained in:
supertiger1234 2019-09-05 20:19:39 +01:00
parent 4acb26142c
commit b77ab9b1f9
1 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/app/Popouts/Popouts/userInformationPopout.vue
View file

@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<div class="about-me" v-if="aboutMe"> <div class="about-me" v-if="aboutMe">
<div class="title">About Me</div> <div class="title">Profile</div>
<div class="about-item" v-for="(aboutItem) of aboutMe" :key="aboutItem.name" :class="{infoAboutMe: aboutItem.key === 'About me'}"> <div class="about-item" v-for="(aboutItem) of aboutMe" :key="aboutItem.name" :class="{infoAboutMe: aboutItem.key === 'About me'}">
<div class="key">{{aboutItem.key}}: </div> <div class="key">{{aboutItem.key}}: </div>
<div class="emoji" v-if="aboutItem.emoji" v-html="aboutItem.emoji"></div> <div class="emoji" v-if="aboutItem.emoji" v-html="aboutItem.emoji"></div>
@ -188,9 +188,10 @@ export default {
color: white; color: white;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background: rgba(22, 22, 22, 0.853);
border-radius: 10px; border-radius: 10px;
position: relative; position: relative;
background: rgba(0, 0, 0, 0.349);
backdrop-filter: blur(10px)
} }
.spinner { .spinner {
@ -220,7 +221,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-content: center; align-content: center;
border-bottom: solid 1px rgba(255, 255, 255, 0.733); border-bottom: solid 1px rgba(255, 255, 255, 0.15);
width: 100%; width: 100%;
align-items: center; align-items: center;
align-content: center; align-content: center;
@ -280,7 +281,7 @@ export default {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
margin-top: 3px; margin-top: 3px;
border-bottom: solid 1px rgba(255, 255, 255, 0.733); border-bottom: solid 1px rgba(255, 255, 255, 0.15);
padding-bottom: 10px; padding-bottom: 10px;
user-select: none; user-select: none;
cursor: default; cursor: default;
@ -308,11 +309,17 @@ export default {
.badge { .badge {
border: solid 1px white; border: solid 1px white;
padding: 5px; padding: 5px;
border-radius: 5px; padding-left: 5px;
padding-right: 6px;
padding-right: 0.25rem;
border-radius: 6px;
margin: 3px; margin: 3px;
display: flex; display: flex;
flex-shrink: 0 flex-shrink: 0
} }
.badge .name {
margin-top: 1px;
}
.badge div { .badge div {
align-self: center; align-self: center;
@ -330,7 +337,7 @@ export default {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
margin-bottom: 5px; margin-bottom: 5px;
border-bottom: solid 1px rgba(255, 255, 255, 0.733); border-bottom: solid 1px rgba(255, 255, 255, 0.15);
padding-bottom: 10px; padding-bottom: 10px;
cursor: default; cursor: default;
flex-shrink: 0 flex-shrink: 0