mirror of
https://github.com/dscalzi/HeliosLauncher.git
synced 2024-12-22 11:42:14 -08:00
Added social media icons (tweaking/changes still needed). Initial work on organization of main css file.
This commit is contained in:
Daniel Scalzi
parent
e7785fa603
commit
a6184c81d5
@ -1,8 +1,20 @@
|
||||
/*******************************************************************************
|
||||
* *
|
||||
* Fonts *
|
||||
* *
|
||||
******************************************************************************/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Avenir Book';
|
||||
src: url('../fonts/Avenir.ttc');
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
* *
|
||||
* Element Styles *
|
||||
* *
|
||||
******************************************************************************/
|
||||
|
||||
/* Reset body, html, and div presets. */
|
||||
body, html, div {
|
||||
margin: 0px;
|
||||
@ -23,7 +35,7 @@ p {
|
||||
|
||||
/*******************************************************************************
|
||||
* *
|
||||
* frame.ejs *
|
||||
* Frame Styles (frame.ejs) *
|
||||
* *
|
||||
******************************************************************************/
|
||||
|
||||
@ -82,7 +94,7 @@ p {
|
||||
|
||||
/*******************************************************************************
|
||||
* *
|
||||
* login.ejs *
|
||||
* Login View (login.ejs) *
|
||||
* *
|
||||
******************************************************************************/
|
||||
|
||||
@ -161,53 +173,52 @@ p {
|
||||
letter-spacing: 0.3em;
|
||||
}*/
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* *
|
||||
* index.ejs *
|
||||
* Landing View (Structural Styles) *
|
||||
* *
|
||||
******************************************************************************/
|
||||
|
||||
/* Main content container. */
|
||||
#main {
|
||||
height: calc(100% - 22px);
|
||||
}
|
||||
|
||||
/* Upper content container. */
|
||||
#main > #upper {
|
||||
height: 77%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#main > #lower {
|
||||
height: 23%;
|
||||
display: flex;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
#main > #upper > #left {
|
||||
display: inline-flex;
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#main > #upper > #content {
|
||||
display: inline-flex;
|
||||
width: 59%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main > #upper > #right {
|
||||
display: inline-flex;
|
||||
width: 26%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Lower content container. */
|
||||
#main > #lower {
|
||||
height: 23%;
|
||||
display: flex;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
|
||||
}
|
||||
#main > #lower > #left {
|
||||
height: 100%;
|
||||
width: 33%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#main > #lower > #left #content {
|
||||
position: relative;
|
||||
top: 25px;
|
||||
@ -215,32 +226,33 @@ p {
|
||||
line-height: 24px;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
#main > #lower > #center {
|
||||
height: 100%;
|
||||
width: 34%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#main > #lower > #center #content {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#main > #lower > #right {
|
||||
height: 100%;
|
||||
width: 33%;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#main > #lower > #right #launch_content {
|
||||
position: relative;
|
||||
top: 25px;
|
||||
display: inline-flex;
|
||||
line-height: 24px;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* *
|
||||
* Landing View (Top Styles) *
|
||||
* *
|
||||
******************************************************************************/
|
||||
|
||||
/* * *
|
||||
* Landing View (Top Styles) | Left Content
|
||||
* * */
|
||||
|
||||
/* Logo image. */
|
||||
#image_seal {
|
||||
height: 70px;
|
||||
width: auto;
|
||||
@ -248,24 +260,43 @@ p {
|
||||
margin-top: 50px;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
#user_content > #top {
|
||||
/* * *
|
||||
* Landing View (Bottom Styles) | Right Content
|
||||
* * */
|
||||
|
||||
/* Wrapper container for top, right content. */
|
||||
#rightContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
align-items: flex-end;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
/* Right hand user content container. */
|
||||
#user_content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
box-sizing: border-box;
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
/* User profile avater. */
|
||||
#user_avatar {
|
||||
border-radius: 50%;
|
||||
border: 2px solid #cad7e1;
|
||||
background: rgba(1, 2, 1, 0.5);
|
||||
height: 70px;
|
||||
width: auto;
|
||||
box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
/* User profile name text. */
|
||||
#user_text {
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 12px;
|
||||
@ -278,75 +309,38 @@ p {
|
||||
right: 25px;
|
||||
text-align: right;
|
||||
}
|
||||
/*
|
||||
#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;
|
||||
background-image: -webkit-linear-gradient(-45deg,
|
||||
transparent 33%, rgba(0, 0, 0, .1) 33%,
|
||||
rgba(0,0, 0, .1) 66%, transparent 66%),
|
||||
-webkit-linear-gradient(top,
|
||||
rgba(255, 255, 255, .25),
|
||||
rgba(0, 0, 0, .25)),
|
||||
-webkit-linear-gradient(left, #09c, #f44);
|
||||
border-radius: 20px 0px 0px 20px;
|
||||
background-size: 35px 20px, 100% 100%, 100% 100%;
|
||||
}
|
||||
|
||||
#launch_area_container {
|
||||
/* Social media icon content container. */
|
||||
#media_container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 32px;
|
||||
flex-direction: column;
|
||||
right: 25px;
|
||||
align-items: flex-end;
|
||||
margin-top: 40px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
/* Social Media Icon division containers. */
|
||||
#internalMedia, #externalMedia {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home_btn:focus {
|
||||
outline: 0px;
|
||||
/* Social media icon shared styles. */
|
||||
.mediaSVG {
|
||||
fill: #ffffff;
|
||||
margin-top: 15px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
#mojang_btn {
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
}
|
||||
|
||||
#mojang_btn:before {
|
||||
color: #93b253;
|
||||
content: '\2022 ';
|
||||
line-height: 20px;
|
||||
} */
|
||||
/*******************************************************************************
|
||||
* *
|
||||
* Landing View (Bottom Styles) *
|
||||
* *
|
||||
******************************************************************************/
|
||||
|
||||
/* Style for a general label on the bottom of the landing view. */
|
||||
.bot_label {
|
||||
color: white;
|
||||
font-family: 'Avenir Book';
|
||||
@ -356,6 +350,20 @@ p {
|
||||
text-shadow: 0px 0px 0px #bebcbb;
|
||||
}
|
||||
|
||||
/* Divider used on the bottom of the landing view. */
|
||||
.bot_divider {
|
||||
height: 25px;
|
||||
width: 2px;
|
||||
background: rgba(107, 105, 105, 0.7);
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/* * *
|
||||
* Landing View (Bottom Styles) | Left Content
|
||||
* * */
|
||||
|
||||
/* Span which displays the player count of the selected server. */
|
||||
#player_count {
|
||||
color: #949494;
|
||||
font-family: 'Avenir Book';
|
||||
@ -365,20 +373,18 @@ p {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.bot_divider {
|
||||
height: 25px;
|
||||
width: 2px;
|
||||
background: rgba(107, 105, 105, 0.7);
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/* Icon which displays the status of the mojang services. */
|
||||
#mojang_status_icon {
|
||||
font-size: 30px;
|
||||
color: #848484;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
/* * *
|
||||
* Landing View (Bottom Styles) | Center Content
|
||||
* * */
|
||||
|
||||
/* Button which opens the menu view. */
|
||||
#menu_button {
|
||||
font-family: 'Avenir Book';
|
||||
background: none;
|
||||
@ -386,11 +392,13 @@ p {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Arrow image which floats above the menu button. */
|
||||
#menu_img {
|
||||
height: 11px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
/* Span which contains the menu button text. */
|
||||
#menu_text {
|
||||
color: white;
|
||||
font-weight: 900;
|
||||
@ -401,6 +409,19 @@ p {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* * *
|
||||
* Landing View (Bottom Styles) | Right Content
|
||||
* * */
|
||||
|
||||
/* Main launch content container. */
|
||||
#main > #lower > #right #launch_content {
|
||||
position: relative;
|
||||
top: 25px;
|
||||
display: inline-flex;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* The launch button. */
|
||||
#launch_button {
|
||||
font-family: 'Avenir Book';
|
||||
background: none;
|
||||
@ -414,44 +435,19 @@ p {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/* Launch details main container, hidden until launch processing begins. */
|
||||
#launch_details {
|
||||
position: relative;
|
||||
top: 25px;
|
||||
/*display: flex;*/
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Left side of launch details container, displays percentage and a divider. */
|
||||
#launch_details_left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#launch_details_right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#launch_progress[value] {
|
||||
height: 3px;
|
||||
width: 265px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#launch_progress[value]::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#launch_progress[value]::-webkit-progress-value {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#launch_details_text {
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Span which displays percentage complete. */
|
||||
#launch_progress_label {
|
||||
color: white;
|
||||
font-family: 'Avenir Book';
|
||||
@ -463,3 +459,31 @@ p {
|
||||
max-width: 53.21px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Right side of launch details container, displays progress bar and details. */
|
||||
#launch_details_right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Progress bar styles. */
|
||||
#launch_progress[value] {
|
||||
height: 3px;
|
||||
width: 265px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
#launch_progress[value]::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
#launch_progress[value]::-webkit-progress-value {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Span which displays information about the status of the launch process. */
|
||||
#launch_details_text {
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -22,12 +22,48 @@
|
||||
<div id="content">
|
||||
</div>
|
||||
<div id="right">
|
||||
<div id="user_content">
|
||||
<div id="top">
|
||||
<div id="rightContainer">
|
||||
<div id="user_content">
|
||||
<span id="user_text">Username</span>
|
||||
<img id="user_avatar" src="https://cdn.discordapp.com/avatars/169197209630277642/6650b5a50e1cb3d00a79b9b88b9a0cd4.png"/>
|
||||
</div>
|
||||
<div id="bottom">
|
||||
<div id="media_container">
|
||||
<div id="internalMedia">
|
||||
<svg id="newsSVG" class="mediaSVG" x="0px" y="0px" viewBox="0 0 297 297" height="20px" width="25px">
|
||||
<g>
|
||||
<path d="M286.933,262.429c5.56,0,10.067-4.508,10.067-10.068V44.64c0-5.56-4.508-10.068-10.067-10.068H44.677c-5.56,0-10.067,4.508-10.067,10.068v24.553H10.067C4.508,69.192,0,73.7,0,79.261v173.1c0,5.561,4.508,10.068,10.067,10.068 H286.933z M20.136,89.328h14.474v152.965H20.136V89.328z M276.864,242.293H54.745V54.707h222.119V242.293z"/>
|
||||
<path d="M165.804,193.189h86.52c5.56,0,10.067-4.508,10.067-10.067V96.572c0-5.56-4.508-10.068-10.067-10.068h-86.52c-5.56,0-10.067,4.509-10.067,10.068v86.549C155.736,188.681,160.244,193.189,165.804,193.189z M175.872,106.64h66.383v66.413h-66.383V106.64z"/>
|
||||
<path d="M79.284,227.808h173.039c5.56,0,10.067-4.508,10.067-10.068c0-5.56-4.508-10.067-10.067-10.067H79.284c-5.561,0-10.068,4.508-10.068,10.067C69.216,223.3,73.724,227.808,79.284,227.808z"/>
|
||||
<path d="M79.284,106.64h51.913c5.56,0,10.067-4.508,10.067-10.067c0-5.56-4.508-10.068-10.067-10.068H79.284c-5.561,0-10.068,4.509-10.068,10.068C69.216,102.132,73.724,106.64,79.284,106.64z"/>
|
||||
<path d="M79.284,141.26h51.913c5.56,0,10.067-4.508,10.067-10.067c0-5.561-4.508-10.068-10.067-10.068H79.284c-5.561,0-10.068,4.508-10.068,10.068C69.216,136.752,73.724,141.26,79.284,141.26z"/>
|
||||
<path d="M79.284,175.876h51.913c5.56,0,10.067-4.508,10.067-10.068c0-5.56-4.508-10.067-10.067-10.067H79.284c-5.561,0-10.068,4.508-10.068,10.067C69.216,171.368,73.724,175.876,79.284,175.876z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="externalMedia">
|
||||
<svg id="linkSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
|
||||
<g>
|
||||
<path d="M75.37,65.51a3.85,3.85,0,0,0-1.73.42,8.22,8.22,0,0,1,.94,3.76A8.36,8.36,0,0,1,66.23,78H46.37a8.35,8.35,0,1,1,0-16.7h9.18a21.51,21.51,0,0,1,6.65-8.72H46.37a17.07,17.07,0,1,0,0,34.15H66.23A17,17,0,0,0,82.77,65.51Z"/>
|
||||
<path d="M66,73.88a3.85,3.85,0,0,0,1.73-.42,8.22,8.22,0,0,1-.94-3.76,8.36,8.36,0,0,1,8.35-8.35H95A8.35,8.35,0,1,1,95,78H85.8a21.51,21.51,0,0,1-6.65,8.72H95a17.07,17.07,0,0,0,0-34.15H75.13A17,17,0,0,0,58.59,73.88Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg id="twitterSVG" class="mediaSVG" width="25px" height="20px" viewBox="0 0 5000 4060" preserveAspectRatio="xMidYMid meet">
|
||||
<g>
|
||||
<path d="M1210 4048 c-350 -30 -780 -175 -1124 -378 -56 -33 -86 -57 -86 -68 0 -16 7 -17 83 -9 114 12 349 1 493 -22 295 -49 620 -180 843 -341 l54 -38 -49 -7 c-367 -49 -660 -256 -821 -582 -30 -61 -53 -120 -51 -130 3 -16 12 -17 73 -13 97 7 199 5 270 -4 l60 -9 -65 -22 c-341 -117 -609 -419 -681 -769 -18 -88 -26 -226 -13 -239 4 -3 32 7 63 22 68 35 198 77 266 86 28 4 58 9 68 12 10 2 -22 -34 -72 -82 -240 -232 -353 -532 -321 -852 15 -149 79 -347 133 -418 16 -20 17 -19 49 20 377 455 913 795 1491 945 160 41 346 74 485 86 l82 7 -7 -59 c-5 -33 -7 -117 -6 -189 2 -163 31 -286 103 -430 141 -285 422 -504 708 -550 112 -19 333 -19 442 0 180 30 335 108 477 239 l58 54 95 -24 c143 -36 286 -89 427 -160 70 -35 131 -60 135 -56 19 19 -74 209 -151 312 -50 66 -161 178 -216 217 l-30 22 73 -14 c111 -21 257 -63 353 -101 99 -39 99 -39 99 -19 0 57 -237 326 -412 468 l-88 71 6 51 c4 28 1 130 -5 226 -30 440 -131 806 -333 1202 -380 745 -1036 1277 -1823 1477 -243 62 -430 81 -786 78 -134 0 -291 -5 -349 -10z"/>
|
||||
</g> </svg>
|
||||
<svg id="instagramSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
|
||||
<path d="M91.31,38.27H50a10.81,10.81,0,0,0-10.8,10.8V90.33A10.81,10.81,0,0,0,50,101.13H91.31a10.81,10.81,0,0,0,10.8-10.8V49.06A10.81,10.81,0,0,0,91.31,38.27Zm3.27,10.8v7.36H83.83V45.8h7.48A3.27,3.27,0,0,1,94.58,49.06Zm-23.9,10A10.64,10.64,0,1,1,60,69.7,10.66,10.66,0,0,1,70.68,59.05ZM91.31,93.6H50a3.27,3.27,0,0,1-3.27-3.27V63.6h6.86a18,18,0,0,0-1.13,6.1,18.17,18.17,0,1,0,36.35,0,18,18,0,0,0-1.13-6.1h6.86V90.33A3.27,3.27,0,0,1,91.31,93.6Z"/>
|
||||
</svg>
|
||||
<svg id="youtubeSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px"> <g>
|
||||
<path d="M84.8,69.52,65.88,79.76V59.27Zm23.65.59c0-5.14-.79-17.63-3.94-20.57S99,45.86,73.37,45.86s-28,.73-31.14,3.68S38.29,65,38.29,70.11s.79,17.63,3.94,20.57,5.52,3.68,31.14,3.68,28-.74,31.14-3.68,3.94-15.42,3.94-20.57"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg id="discordSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500" height="20px" width="25px">
|
||||
<g>
|
||||
<path d="M81.23,78.48a6.14,6.14,0,1,1,6.14-6.14,6.14,6.14,0,0,1-6.14,6.14M60,78.48a6.14,6.14,0,1,1,6.14-6.14A6.14,6.14,0,0,1,60,78.48M104.41,73c-.92-7.7-8.24-22.9-8.24-22.9A43,43,0,0,0,88,45.59a17.88,17.88,0,0,0-8.38-1.27l-.13,1.06a23.52,23.52,0,0,1,5.8,1.95,87.59,87.59,0,0,1,8.17,4.87s-10.32-5.63-22.27-5.63a51.32,51.32,0,0,0-23.2,5.63,87.84,87.84,0,0,1,8.17-4.87,23.57,23.57,0,0,1,5.8-1.95l-.13-1.06a17.88,17.88,0,0,0-8.38,1.27,42.84,42.84,0,0,0-8.21,4.56S37.87,65.35,37,73s-.37,11.54-.37,11.54,4.22,5.68,9.9,7.14,7.7,1.47,7.7,1.47l3.75-4.68a21.22,21.22,0,0,1-4.65-2A24.47,24.47,0,0,1,47.93,82S61.16,88.4,70.68,88.4c10,0,22.75-6.44,22.75-6.44a24.56,24.56,0,0,1-5.35,4.56,21.22,21.22,0,0,1-4.65,2l3.75,4.68s2,0,7.7-1.47,9.89-7.14,9.89-7.14.55-3.85-.37-11.54"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user