Added more UI elements.
Daniel Scalzi
parent
0d013f7d6f
commit
02758b27b2
|
|
@ -1,3 +1,8 @@
|
|||
@font-face {
|
||||
font-family: 'Avenir Book';
|
||||
src: url('../fonts/Avenir.ttc');
|
||||
}
|
||||
|
||||
/* Reset body, html, and div presets. */
|
||||
body, html, div {
|
||||
margin: 0px;
|
||||
|
|
@ -75,24 +80,26 @@ body {
|
|||
|
||||
#main > #upper > #left {
|
||||
display: inline-flex;
|
||||
width: 25%;
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#main > #upper > #content {
|
||||
display: inline-flex;
|
||||
width: 50%;
|
||||
width: 62%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main > #upper > #right {
|
||||
display: inline-flex;
|
||||
width: 25%;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main > #lower > #top {
|
||||
height: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main > #lower > #bottom {
|
||||
|
|
@ -104,10 +111,141 @@ body {
|
|||
height: 100%;
|
||||
width: 50%;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#main > #lower > #bottom > #right {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#image_seal {
|
||||
height: 100px;
|
||||
width: auto;
|
||||
margin-top: 12px;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#user_content > #top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#user_avatar {
|
||||
border-radius: 50%;
|
||||
border: 2px solid #cad7e1;
|
||||
background: rgba(1, 2, 1, 0.5);
|
||||
height: 70px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#user_text {
|
||||
margin-right: 15px;
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu_container {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin-right: 22px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.bar1, .bar2, .bar3 {
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
background-color: #d5d7df;
|
||||
margin: 6px auto;
|
||||
transition: 0.4s;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.bar2 {
|
||||
width: 25px !important;
|
||||
}
|
||||
|
||||
#launch_btn {
|
||||
background-color: #4f771d;
|
||||
color: white;
|
||||
border: none;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding-left: 26px;
|
||||
padding-right: 20px;
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 16px;
|
||||
border-radius: 0px 20px 20px 0px;
|
||||
}
|
||||
|
||||
#launch_btn:focus {
|
||||
outline: 0px;
|
||||
}
|
||||
|
||||
#main_progress[value] {
|
||||
height: 32px;
|
||||
width: 245px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#main_progress[value]:before {
|
||||
position: absolute;
|
||||
content: attr(data-label);
|
||||
color: white;
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 15px;
|
||||
line-height: 32px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
#main_progress[value]::-webkit-progress-bar {
|
||||
border-radius: 20px 0px 0px 20px;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#main_progress[value]::-webkit-progress-value {
|
||||
background-color: black;
|
||||
border-radius: 20px 0px 0px 20px;
|
||||
background-size: 35px 20px, 100% 100%, 100% 100%;
|
||||
}
|
||||
|
||||
#launch_area_container {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 32px;
|
||||
}
|
||||
|
||||
.home_btn {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: 'Avenir Book';
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
height: 20px;
|
||||
padding: 0px 17px 0px 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.home_btn:focus {
|
||||
outline: 0px;
|
||||
}
|
||||
|
||||
#mojang_btn {
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
}
|
||||
|
||||
#mojang_btn:before {
|
||||
color: #93b253;
|
||||
content: '\2022 ';
|
||||
line-height: 20px;
|
||||
}
|
||||
Binary file not shown.
|
|
@ -10,18 +10,36 @@
|
|||
<div id="main">
|
||||
<div id="upper">
|
||||
<div id="left">
|
||||
<img id="image_seal" src="assets/images/WesterosSealCircle.png"/>
|
||||
</div>
|
||||
<div id="content">
|
||||
</div>
|
||||
<div id="right">
|
||||
<div id="user_content">
|
||||
<div id="top">
|
||||
<span id="user_text">Username</span>
|
||||
<img id="user_avatar" src="https://cdn.discordapp.com/avatars/169197209630277642/6650b5a50e1cb3d00a79b9b88b9a0cd4.png"/>
|
||||
</div>
|
||||
<div id="bottom">
|
||||
<div class="menu_container">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lower">
|
||||
<div id="top">
|
||||
<!-- Progress area/play button -->
|
||||
<div id="launch_area_container">
|
||||
<progress id="main_progress" max=100 value=20 data-label="•  Westeroscraft Production Server"></progress>
|
||||
<button id="launch_btn">LAUNCH</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bottom">
|
||||
<div id="left">
|
||||
<button class="home_btn" id="mojang_btn" status="#93b253">Mojang Status</button>
|
||||
</div>
|
||||
<div id="right">
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue