Jonttu/HeliosLauncher
1
0
Fork 1
mirror of https://github.com/dscalzi/HeliosLauncher.git synced 2024-12-22 11:42:14 -08:00
Code Issues Projects Releases Wiki Activity

Added an edit overlay to the user avatar.

Browse Source
This commit is contained in:
Daniel Scalzi 2018-01-22 01:17:56 -05:00
parent aee8f016bf
commit d96766528e
2 changed files with 40 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/assets/css/launcher.css
View File

@ -286,14 +286,48 @@ p {
height: 75px; height: 75px;
} }
/* User profile avater. */ /* User profile avatar container. */
#user_avatar { #avatarContainer {
border-radius: 50%; border-radius: 50%;
border: 2px solid #cad7e1; border: 2px solid #cad7e1;
background: rgba(1, 2, 1, 0.5); background: rgba(1, 2, 1, 0.5);
height: 70px; height: 70px;
width: 70px;
width: auto; width: auto;
box-shadow: 0px 0px 10px 0px rgb(0, 0, 0); box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
overflow: hidden;
position: relative;
}
/* Avatar edit overlay. */
#avatarOverlay {
opacity: 0;
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Avenir Book';
color: #fff;
transition: 0.25s ease;
font-weight: bold;
letter-spacing: 2px;
background: linear-gradient(65deg, rgba(0, 0, 0, 0.4), rgba(136, 77, 77, 0.4) 60%);
-webkit-user-select: none;
cursor: pointer;
}
#avatarOverlay:hover {
opacity: 1;
}
/* User profile avater image. */
#avatarImage {
height: 100%;
width: auto;
} }
/* User profile name text. */ /* User profile name text. */

5
app/index.ejs
View File

@ -25,7 +25,10 @@
<div id="rightContainer"> <div id="rightContainer">
<div id="user_content"> <div id="user_content">
<span id="user_text">Username</span> <span id="user_text">Username</span>
<img id="user_avatar" src="https://cdn.discordapp.com/avatars/169197209630277642/6650b5a50e1cb3d00a79b9b88b9a0cd4.png"/> <div id="avatarContainer">
<div id="avatarOverlay">Edit</div>
<img id="avatarImage" src="https://cdn.discordapp.com/avatars/169197209630277642/6650b5a50e1cb3d00a79b9b88b9a0cd4.png"/>
</div>
</div> </div>
<div id="mediaContent"> <div id="mediaContent">
<div id="internalMedia"> <div id="internalMedia">