mirror of
https://github.com/dscalzi/HeliosLauncher.git
synced 2024-10-31 19:36:39 -07:00
5fe43ac8e9
Basic selection and updating of the selected server has been added. There are a few subtle mechanics which need to be added still, such as keybind shortcuts (enter to submit, etc). In addition, functionality still needs to be added to generate the list of servers from the manifest file. Fixed a minor issue with the login view. Updated play button styles. Updated dependencies.
1717 lines
37 KiB
CSS
1717 lines
37 KiB
CSS
/*******************************************************************************
|
|
* *
|
|
* Fonts *
|
|
* *
|
|
******************************************************************************/
|
|
|
|
@font-face {
|
|
font-family: 'Avenir Book';
|
|
src: url('../fonts/Avenir-Book.ttf');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Avenir Medium';
|
|
src: url('../fonts/Avenir-Medium.ttf');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Ringbearer';
|
|
src: url('../fonts/Ringbearer.ttf');
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Element Styles *
|
|
* *
|
|
******************************************************************************/
|
|
|
|
/* Reset body, html, and div presets. */
|
|
body, html, div {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
/* Reset p presets. */
|
|
p {
|
|
-webkit-margin-before: 0em;
|
|
-webkit-margin-after: 0em;
|
|
}
|
|
|
|
|
|
/*body {
|
|
background: url('./../images/backgrounds/0.jpg') no-repeat center center fixed;
|
|
background-size: cover;
|
|
}*/
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Frame Styles (frame.ejs) *
|
|
* *
|
|
******************************************************************************/
|
|
|
|
/* Frame Bar */
|
|
#frameBar {
|
|
position: relative;
|
|
z-index: 100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: rgba(1, 2, 1, 0.5);
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
/* Undraggable region on the top of the frame. */
|
|
#frameResizableTop {
|
|
height: 2px;
|
|
width: 100%;
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/* Flexbox to wrap the main frame content. */
|
|
#frameMain {
|
|
display: flex;
|
|
height: 20px
|
|
}
|
|
|
|
/* Undraggable region on the left and right of the frame. */
|
|
.frameResizableVert {
|
|
width: 2px;
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/* Main frame content for windows. */
|
|
#frameContentWin {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
/* Main frame content for darwin. */
|
|
#frameContentDarwin {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 100%;
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
/* Frame logo (windows only). */
|
|
#frameImageDock {
|
|
width: 100px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
#frameImage {
|
|
height: 15px;
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
/* Windows frame button dock. */
|
|
#frameButtonDockWin {
|
|
-webkit-app-region: no-drag !important;
|
|
position: relative;
|
|
top: -2px;
|
|
right: -2px;
|
|
height: 22px;
|
|
}
|
|
#frameButtonDockWin > .frameButton:not(:first-child) {
|
|
margin-left: -4px;
|
|
}
|
|
|
|
/* Darwin frame button dock: NaN; */
|
|
#frameButtonDockDarwin {
|
|
-webkit-app-region: no-drag !important;
|
|
position: relative;
|
|
top: -1px;
|
|
right: -1px;
|
|
}
|
|
|
|
/* Windows Frame Button Styles. */
|
|
.frameButton {
|
|
background: none;
|
|
border: none;
|
|
height: 22px;
|
|
width: 39px;
|
|
cursor: pointer;
|
|
}
|
|
.frameButton:hover,
|
|
.frameButton:focus {
|
|
background: rgba(189, 189, 189, 0.43);
|
|
}
|
|
.frameButton:active {
|
|
background: rgba(156, 156, 156, 0.43);
|
|
}
|
|
.frameButton:focus {
|
|
outline: 0px;
|
|
}
|
|
|
|
/* Close button is red. */
|
|
#frameButton_close:hover,
|
|
#frameButton_close:focus {
|
|
background: rgba(255, 53, 53, 0.61) !important;
|
|
}
|
|
#frameButton_close:active {
|
|
background: rgba(235, 0, 0, 0.61) !important;
|
|
}
|
|
|
|
/* Darwin Frame Button Styles. */
|
|
.frameButtonDarwin {
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 50%;
|
|
border: 0px;
|
|
margin-left: 5px;
|
|
-webkit-app-region: no-drag !important;
|
|
cursor: pointer;
|
|
}
|
|
.frameButtonDarwin:focus {
|
|
outline: 0px;
|
|
}
|
|
|
|
#frameButtonDarwin_close {
|
|
background-color: #e74c32;
|
|
}
|
|
#frameButtonDarwin_close:hover,
|
|
#frameButtonDarwin_close:focus {
|
|
background-color: #FF9A8A;
|
|
}
|
|
#frameButtonDarwin_close:active {
|
|
background-color: #ff8d7b;
|
|
}
|
|
|
|
#frameButtonDarwin_minimize {
|
|
background-color: #fed045;
|
|
}
|
|
#frameButtonDarwin_minimize:hover,
|
|
#frameButtonDarwin_minimize:focus {
|
|
background-color: #FFE9A9;
|
|
}
|
|
#frameButtonDarwin_minimize:active {
|
|
background-color: #ffde7b;
|
|
}
|
|
|
|
#frameButtonDarwin_restoredown {
|
|
background-color: #96e734;
|
|
}
|
|
#frameButtonDarwin_restoredown:hover,
|
|
#frameButtonDarwin_restoredown:focus {
|
|
background-color: #D6FFA6;
|
|
}
|
|
#frameButtonDarwin_restoredown:active {
|
|
background-color: #bfff76;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Welcome View (welcome.ejs) *
|
|
* *
|
|
******************************************************************************/
|
|
|
|
#welcomeContainer {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
transition: 0.25s ease;
|
|
}
|
|
|
|
#welcomeContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 50%;
|
|
top: -10%;
|
|
position: relative;
|
|
}
|
|
|
|
/*
|
|
.cloudDiv {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cloudTop {
|
|
height: 50%;
|
|
width: 100%;
|
|
background-image: url('../images/cloudTrans.png');
|
|
animation: clouds1 80s linear infinite;
|
|
background-size: cover;
|
|
}
|
|
|
|
.cloudBottom {
|
|
height: 50%;
|
|
width: 100%;
|
|
background-image: url('../images/cloudTrans2.png');
|
|
animation: clouds2 70s linear infinite;
|
|
background-size: cover;
|
|
}
|
|
|
|
@keyframes clouds1 {
|
|
to {
|
|
background-position: 200%;
|
|
}
|
|
}
|
|
@keyframes clouds2 {
|
|
to {
|
|
background-position: 230%;
|
|
}
|
|
}
|
|
*/
|
|
|
|
#welcomeImageSeal {
|
|
border-radius: 50%;
|
|
border: 2px solid #cad7e1;
|
|
background: rgba(1, 2, 1, 0.5);
|
|
height: 125px;
|
|
width: 125px;
|
|
box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
|
|
margin-bottom: 5%;
|
|
margin-top: 10%;
|
|
}
|
|
|
|
#welcomeHeader {
|
|
font-family: 'Avenir Medium';
|
|
text-align: center;
|
|
color: white;
|
|
margin-bottom: 25px;
|
|
letter-spacing: 1px;
|
|
font-size: 20px;
|
|
text-shadow: white 0px 0px 0px;
|
|
}
|
|
|
|
#welcomeDescription {
|
|
font-family: 'Avenir Book';
|
|
text-align: justify;
|
|
color: white;
|
|
font-size: 13px;
|
|
font-weight: 100;
|
|
text-shadow: rgba(255, 255, 255, 0.75) 0px 0px 20px
|
|
}
|
|
|
|
#welcomeDescCTA {
|
|
font-family: 'Avenir Book';
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: 100;
|
|
text-shadow: rgba(255, 255, 255, 0.75) 0px 0px 20px
|
|
}
|
|
|
|
/* Login button styles. */
|
|
#welcomeButton {
|
|
background: none;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-family: 'Avenir Book';
|
|
letter-spacing: 2px;
|
|
border: none;
|
|
padding: 15px 5px;
|
|
margin: 10px 0px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
right: -20px;
|
|
transition: 0.5s ease;
|
|
margin-top: 5%;
|
|
margin-bottom: -5%;
|
|
}
|
|
#welcomeButton:disabled {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
pointer-events: none;
|
|
}
|
|
#welcomeButton:hover,
|
|
#welcomeButton:focus {
|
|
text-shadow: 0px 0px 20px #fff;
|
|
outline: none;
|
|
}
|
|
#welcomeButton:active {
|
|
color: #c7c7c7;
|
|
text-shadow: 0px 0px 20px #c7c7c7;
|
|
}
|
|
#welcomeSVG {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
overflow: visible;
|
|
transform: rotate(90deg);
|
|
margin-left: 20px;
|
|
transition: 0.25s ease;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
#welcomeButton:hover #welcomeSVG,
|
|
#welcomeButton:focus #welcomeSVG {
|
|
-webkit-filter: drop-shadow(0px 0px 2px #fff);
|
|
}
|
|
#welcomeButton:active #welcomeSVG .arrowLine {
|
|
stroke: #c7c7c7;
|
|
}
|
|
#welcomeButton:active #welcomeSVG {
|
|
-webkit-filter: drop-shadow(0px 0px 2px #c7c7c7);
|
|
}
|
|
#welcomeButton:disabled #welcomeSVG .arrowLine {
|
|
stroke: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
#welcomeButtonContent {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Login View (login.ejs) *
|
|
* *
|
|
******************************************************************************/
|
|
|
|
/* Login span styles. */
|
|
.loginSpan {
|
|
font-family: 'Avenir Book';
|
|
font-size: 14px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Styles for dimmer login span. */
|
|
.loginSpanDim {
|
|
font-family: 'Avenir Book';
|
|
font-size: 12px;
|
|
color: #848484;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Main login container. */
|
|
#loginContainer {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
transition: filter 0.25s ease;
|
|
}
|
|
|
|
/* Login content wrapper. */
|
|
#loginContent {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
padding: 0px 25px;
|
|
}
|
|
|
|
/* Login form. */
|
|
#loginForm {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Login form anchor styles. */
|
|
#loginForm a {
|
|
font-family: 'Avenir Book';
|
|
font-size: 12px;
|
|
color: #848484;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
transition: 0.25s ease;
|
|
}
|
|
#loginForm a:hover,
|
|
#loginForm a:focus {
|
|
color: #a2a2a2;
|
|
outline: none;
|
|
}
|
|
#loginForm a:active {
|
|
color: #8b8b8b;
|
|
}
|
|
|
|
/* Logo on login form. */
|
|
#loginImageSeal {
|
|
border-radius: 50%;
|
|
border: 2px solid #cad7e1;
|
|
background: rgba(1, 2, 1, 0.5);
|
|
height: 125px;
|
|
width: 125px;
|
|
box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Header on login view. */
|
|
#loginSubheader {
|
|
font-family: 'Avenir Medium';
|
|
margin-bottom: 25px;
|
|
font-size: 12px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Container to organize login field elements. */
|
|
.loginFieldContainer {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* SVG icons on the login view. */
|
|
.loginSVG {
|
|
fill: #fff;
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
|
|
/* Span which displays errors related to login field content. */
|
|
.loginErrorSpan {
|
|
font-family: 'Avenir Medium';
|
|
font-weight: bold;
|
|
font-size: 8px;
|
|
color: #ff1b0c;
|
|
width: 100%;
|
|
text-align: right;
|
|
position: absolute;
|
|
top: 7px;
|
|
opacity: 0;
|
|
transition: 0.25s ease;
|
|
}
|
|
|
|
.shake {
|
|
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
|
|
}
|
|
|
|
@keyframes shake {
|
|
10%, 90% {
|
|
transform: translate3d(-1px, 0, 0);
|
|
}
|
|
|
|
20%, 80% {
|
|
transform: translate3d(2px, 0, 0);
|
|
}
|
|
|
|
30%, 50%, 70% {
|
|
transform: translate3d(-4px, 0, 0);
|
|
}
|
|
|
|
40%, 60% {
|
|
transform: translate3d(4px, 0, 0);
|
|
}
|
|
}
|
|
|
|
/* Login text input styles. */
|
|
.loginField {
|
|
font-family: 'Avenir Book';
|
|
background: none;
|
|
border-width: 1.5px 0px 0px 0px;
|
|
border-style: solid;
|
|
width: 250px;
|
|
margin-bottom: 20px;
|
|
border-color: #fff;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
font-weight: bold;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
padding: 7.5px;
|
|
font-size: 10px;
|
|
letter-spacing: 1px;
|
|
}
|
|
.loginField:focus {
|
|
outline: none;
|
|
}
|
|
.loginField:disabled {
|
|
color: rgba(255, 255, 255, 0.50);
|
|
}
|
|
.loginField::-webkit-input-placeholder {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
font-size: 10px;
|
|
letter-spacing: 1px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
.loginField:focus::-webkit-input-placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
/* Add spacing between password field and options bar. */
|
|
#labelPassword {
|
|
margin-bottom: 13px;
|
|
}
|
|
|
|
/* Container which contains the forgot and remember options. */
|
|
#loginOptions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Remember option text. */
|
|
#loginRememberText {
|
|
padding-right: 10px;
|
|
transition: 0.25s ease;
|
|
}
|
|
|
|
/* Login button styles. */
|
|
#loginButton {
|
|
background: none;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-family: 'Avenir Book';
|
|
letter-spacing: 2px;
|
|
border: none;
|
|
padding: 15px 5px;
|
|
margin: 10px 0px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
right: -20px;
|
|
transition: 0.5s ease;
|
|
}
|
|
#loginButton:disabled {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
pointer-events: none;
|
|
}
|
|
#loginButton[loading] {
|
|
color: #fff;
|
|
}
|
|
#loginButton:hover,
|
|
#loginButton:focus {
|
|
text-shadow: 0px 0px 20px #fff;
|
|
outline: none;
|
|
}
|
|
#loginButton:active {
|
|
color: #c7c7c7;
|
|
text-shadow: 0px 0px 20px #c7c7c7;
|
|
}
|
|
#loginSVG {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
overflow: visible;
|
|
transform: rotate(90deg);
|
|
margin-left: 20px;
|
|
transition: 0.25s ease;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
#loginButton:hover #loginSVG,
|
|
#loginButton:focus #loginSVG {
|
|
-webkit-filter: drop-shadow(0px 0px 2px #fff);
|
|
}
|
|
#loginButton:active #loginSVG .arrowLine {
|
|
stroke: #c7c7c7;
|
|
}
|
|
#loginButton:active #loginSVG {
|
|
-webkit-filter: drop-shadow(0px 0px 2px #c7c7c7);
|
|
}
|
|
#loginButton:disabled #loginSVG .arrowLine {
|
|
stroke: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
#loginButtonContent {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#loginButton .circle-loader,
|
|
#loginButton[loading] #loginSVG {
|
|
display: none;
|
|
}
|
|
#loginButton[loading] .circle-loader,
|
|
#loginButton #loginSVG {
|
|
display: initial;
|
|
}
|
|
|
|
|
|
.circle-loader {
|
|
margin-left: 20px;
|
|
border: 2px solid rgba(255, 255, 255, 0.5);
|
|
border-left-color: #ffffff;
|
|
animation-name: loader-spin;
|
|
animation-duration: 1s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
border-radius: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.load-complete {
|
|
animation: none;
|
|
border-color: #ffffff;
|
|
transition: border 500ms ease-out;
|
|
}
|
|
.checkmark {
|
|
display: none;
|
|
}
|
|
.checkmark.draw:after {
|
|
animation-duration: 800ms;
|
|
animation-timing-function: ease;
|
|
animation-name: checkmark;
|
|
transform: scaleX(-1) rotate(135deg);
|
|
}
|
|
.checkmark:after {
|
|
opacity: 1;
|
|
height: 8px;
|
|
width: 4px;
|
|
transform-origin: left top;
|
|
border-right: 2px solid #ffffff;
|
|
border-top: 2px solid #ffffff;
|
|
content: '';
|
|
left: 2px;
|
|
top: 8px;
|
|
position: absolute;
|
|
}
|
|
@keyframes loader-spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes checkmark {
|
|
0% {
|
|
height: 0;
|
|
width: 0;
|
|
opacity: 1;
|
|
}
|
|
20% {
|
|
height: 0;
|
|
width: 4px;
|
|
opacity: 1;
|
|
}
|
|
40% {
|
|
height: 8px;
|
|
width: 4px;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
height: 8px;
|
|
width: 4px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*.spinningCircle {
|
|
margin-left: 20px;
|
|
height: 16px;
|
|
width: 16px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(255,255,255,0);
|
|
border-top-color: #ffffff;
|
|
border-right-color: #ffffff;
|
|
border-left-color: rgba(255, 255, 255, 0.50);
|
|
border-bottom-color: rgba(255, 255, 255, 0.50);
|
|
animation: single2 4s infinite linear;
|
|
}
|
|
|
|
@keyframes single2 {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(720deg);
|
|
}
|
|
}*/
|
|
|
|
/* Disclaimer container. */
|
|
#loginDisclaimer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Add spacing between register anchor and disclaimer. */
|
|
#loginRegisterSpan {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* Disclaimer text styles. */
|
|
.loginDisclaimerText {
|
|
font-family: 'Avenir Book';
|
|
font-size: 7px;
|
|
color: #848484;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
/* * *
|
|
* Login View | Custom Checkbox
|
|
* * */
|
|
|
|
/* Checkbox container. */
|
|
#checkmarkContainer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-size: 22px;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
/* Hide the default checkbox. */
|
|
#checkmarkContainer input {
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
}
|
|
|
|
/* Create a custom checkbox. */
|
|
.loginCheckmark {
|
|
position: relative;
|
|
height: 10px;
|
|
width: 10px;
|
|
border: 1px solid #848484;
|
|
border-radius: 1px;
|
|
background: none;
|
|
transition: 0.25s ease;
|
|
}
|
|
/* On hover and focus, add a grey border color. */
|
|
#checkmarkContainer:hover input ~ *,
|
|
#checkmarkContainer input:focus ~ * {
|
|
color: #a2a2a2;
|
|
border-color: #a2a2a2;
|
|
}
|
|
/* On keydown, darken the checkbox a bit. */
|
|
#checkmarkContainer input:active ~ *:not(#loginRememberText) {
|
|
color: #8d8d8d;
|
|
border-color: #8d8d8d;
|
|
}
|
|
#checkmarkContainer[disabled] {
|
|
pointer-events: none;
|
|
}
|
|
/* For checked -> #checkmarkContainer input:checked ~ * */
|
|
/* Create the checkmark/indicator (hidden when not checked). */
|
|
.loginCheckmark:after {
|
|
content: "";
|
|
display: none;
|
|
}
|
|
/* Show the checkmark when checked. */
|
|
#checkmarkContainer input:checked ~ .loginCheckmark:after {
|
|
display: block;
|
|
}
|
|
/* Style the checkmark/indicator. */
|
|
#checkmarkContainer .loginCheckmark:after {
|
|
position: absolute;
|
|
left: 3.5px;
|
|
top: 0.5px;
|
|
width: 2px;
|
|
height: 6px;
|
|
border: solid #a2a2a2;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* * *
|
|
* Login View | Loader
|
|
* * */
|
|
/* Will reuse this elsewhere down the line.
|
|
#loginLoading {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.80);
|
|
}
|
|
|
|
#loginLoadingContent {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#loadSpinnerContainer {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#loadCenterImage {
|
|
position: absolute;
|
|
width: 200px;
|
|
height: auto;
|
|
}
|
|
|
|
#loadSpinnerImage {
|
|
width: 280px;
|
|
height: auto;
|
|
}
|
|
|
|
#loadDescText {
|
|
color: #f1eada;
|
|
font-family: 'Avenir Medium';
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
@keyframes rotating {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.rotating {
|
|
animation: rotating 10s linear infinite;
|
|
}*/
|
|
|
|
/*
|
|
#login_filter {
|
|
height: calc(100% - 22px);
|
|
width: 100%;
|
|
z-index: 9000;
|
|
position: absolute;
|
|
filter: blur(8px) contrast(0.9) brightness(1.0);
|
|
background: url('./../images/backgrounds/0.jpg') no-repeat center center fixed;
|
|
transform: scale(1.2);
|
|
background-size: cover;
|
|
}
|
|
*/
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Landing View (Structural Styles) *
|
|
* *
|
|
******************************************************************************/
|
|
|
|
/* Main content container. */
|
|
#landingContainer {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
/* Upper content container. */
|
|
#landingContainer > #upper {
|
|
position: relative;
|
|
transition: top 2s ease;
|
|
top: 0px;
|
|
height: 77%;
|
|
display: flex;
|
|
}
|
|
#landingContainer > #upper > #left {
|
|
display: inline-flex;
|
|
width: 15%;
|
|
height: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
#landingContainer > #upper > #content {
|
|
display: inline-flex;
|
|
width: 59%;
|
|
height: 100%;
|
|
}
|
|
#landingContainer > #upper > #right {
|
|
display: inline-flex;
|
|
width: 26%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Lower content container. */
|
|
#landingContainer > #lower {
|
|
height: 23%;
|
|
display: flex;
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
|
|
}
|
|
#landingContainer > #lower > #left {
|
|
position: relative;
|
|
transition: top 2s ease;
|
|
top: 0px;
|
|
height: 100%;
|
|
width: 33%;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
}
|
|
#landingContainer > #lower > #left #content {
|
|
position: relative;
|
|
top: 25px;
|
|
display: inline-flex;
|
|
line-height: 24px;
|
|
left: 50px;
|
|
}
|
|
#landingContainer > #lower > #center {
|
|
position: relative;
|
|
transition: top 2s ease;
|
|
top: 0px;
|
|
height: 100%;
|
|
width: 34%;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
}
|
|
#landingContainer > #lower > #center #content {
|
|
position: relative;
|
|
transition: top 2s ease;
|
|
top: 10px;
|
|
}
|
|
#landingContainer > #lower > #right {
|
|
position: relative;
|
|
transition: top 2s ease;
|
|
top: 0px;
|
|
height: 100%;
|
|
width: 33%;
|
|
display: inline-flex;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Landing View (Top Styles) *
|
|
* *
|
|
******************************************************************************/
|
|
|
|
/* * *
|
|
* Landing View (Top Styles) | Left Content
|
|
* * */
|
|
|
|
/* Logo image. */
|
|
#image_seal {
|
|
height: 70px;
|
|
width: auto;
|
|
position: relative;
|
|
margin-top: 50px;
|
|
border: 2px solid white;
|
|
border-radius: 50%;
|
|
box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
|
|
}
|
|
|
|
/* * *
|
|
* 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;
|
|
box-sizing: border-box;
|
|
height: 75px;
|
|
}
|
|
|
|
/* User profile avatar container. */
|
|
#avatarContainer {
|
|
border-radius: 50%;
|
|
border: 2px solid #cad7e1;
|
|
background: rgba(1, 2, 1, 0.5);
|
|
height: 70px;
|
|
width: 70px;
|
|
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_text {
|
|
font-family: 'Avenir Book';
|
|
font-size: 12px;
|
|
min-width: 112px;
|
|
font-weight: 900;
|
|
letter-spacing: 1px;
|
|
color: white;
|
|
text-shadow: 0px 0px 20px black;
|
|
position: relative;
|
|
right: 25px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Social media icon content container. */
|
|
#mediaContent {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
right: 25px;
|
|
align-items: flex-end;
|
|
margin-top: 40px;
|
|
height: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Social Media Icon division containers. */
|
|
#internalMedia, #externalMedia {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Container object which wraps an icon to ensure fluid transitions. */
|
|
.mediaContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 27px;
|
|
}
|
|
|
|
/* Divider bar between the external and internal icons. */
|
|
.mediaDivider {
|
|
height: 1px;
|
|
width: 14px;
|
|
background: rgb(255, 255, 255);
|
|
margin: 10px 0px;
|
|
}
|
|
|
|
/* Social media icon shared styles. */
|
|
.mediaSVG {
|
|
fill: #ffffff;
|
|
height: 12px;
|
|
transition: 0.25s ease;
|
|
cursor: pointer;
|
|
height: 12px;
|
|
width: 25px;
|
|
}
|
|
.mediaSVG:hover, .mediaSVG:active {
|
|
height: 20px;
|
|
}
|
|
|
|
/* News icon colors. */
|
|
#newsSVG {
|
|
stroke: #ffffff;
|
|
}
|
|
|
|
/* Twitter icon colors. */
|
|
#twitterSVG:hover {
|
|
fill: #1da1f2;
|
|
}
|
|
#twitterSVG:active {
|
|
fill: #1b8dd4;
|
|
}
|
|
|
|
/* Instagram icon colors. */
|
|
#instagramSVG:hover {
|
|
fill: url('#instaFill')
|
|
/*fill: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); */
|
|
}
|
|
#instagramSVG:active {
|
|
fill: url('#instaFill')
|
|
}
|
|
|
|
/* Youtube icon colors. */
|
|
#youtubeSVG:hover {
|
|
fill: #f00;
|
|
}
|
|
#youtubeSVG:active {
|
|
fill: #ea0202;
|
|
}
|
|
|
|
/* Discord icon colors. */
|
|
#discordSVG:hover {
|
|
fill: #7288d9;
|
|
}
|
|
#discordSVG:active {
|
|
fill: #657ac4;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Landing View (Bottom Styles) *
|
|
* *
|
|
******************************************************************************/
|
|
|
|
/* Style for a general label on the bottom of the landing view. */
|
|
.bot_label {
|
|
color: white;
|
|
font-family: 'Avenir Book';
|
|
font-size: 9px;
|
|
letter-spacing: 1px;
|
|
font-weight: bold;
|
|
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
|
|
* * */
|
|
|
|
/* Maintains maximum width on the status bar. */
|
|
#server_status_wrapper {
|
|
display: inline-flex;
|
|
width: 75px;
|
|
}
|
|
|
|
/* Span which displays the player count of the selected server. */
|
|
#player_count {
|
|
color: #949494;
|
|
font-family: 'Avenir Book';
|
|
font-size: 8px;
|
|
font-weight: 900;
|
|
text-shadow: 0px 0px 20px #949494;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* 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;
|
|
border: none;
|
|
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;
|
|
letter-spacing: 2px;
|
|
text-shadow: 0px 0px 0px #bebcbb;
|
|
font-size: 11px;
|
|
line-height: 30px;
|
|
display: flex;
|
|
}
|
|
|
|
/* * *
|
|
* Landing View (Bottom Styles) | Right Content
|
|
* * */
|
|
|
|
/* Main launch content container. */
|
|
#landingContainer > #lower > #right #launch_content {
|
|
position: relative;
|
|
top: 25px;
|
|
display: inline-flex;
|
|
}
|
|
|
|
/* The launch button. */
|
|
#launch_button {
|
|
font-family: 'Avenir Book';
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
font-weight: 900;
|
|
letter-spacing: 2px;
|
|
text-shadow: 0px 0px 0px #bebcbb;
|
|
font-size: 20px;
|
|
padding: 0px;
|
|
transition: 0.25s ease;
|
|
outline: none;
|
|
}
|
|
#launch_button:hover,
|
|
#launch_button:focus {
|
|
text-shadow: 0px 0px 20px #fff, 0px 0px 20px #fff;
|
|
}
|
|
#launch_button:active {
|
|
color: #c7c7c7;
|
|
text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7;
|
|
}
|
|
#launch_button:disabled {
|
|
color: #c7c7c7;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Launch details main container, hidden until launch processing begins. */
|
|
#launch_details {
|
|
position: relative;
|
|
top: 25px;
|
|
display: none;
|
|
}
|
|
|
|
/* Left side of launch details container, displays percentage and a divider. */
|
|
#launch_details_left {
|
|
display: flex;
|
|
}
|
|
|
|
/* Span which displays percentage complete. */
|
|
#launch_progress_label {
|
|
color: white;
|
|
font-family: 'Avenir Book';
|
|
font-weight: 900;
|
|
letter-spacing: 1px;
|
|
text-shadow: 0px 0px 0px #bebcbb;
|
|
font-size: 20px;
|
|
min-width: 53.21px;
|
|
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;
|
|
}
|
|
|
|
/* Button which opens the server selection view. */
|
|
#server_selection_button {
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
line-height: 24px;
|
|
padding: 0px;
|
|
transition: 0.25s ease;
|
|
}
|
|
#server_selection_button:hover,
|
|
#server_selection_button:focus {
|
|
text-shadow: 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff;
|
|
}
|
|
#server_selection_button:active {
|
|
color: #c7c7c7;
|
|
text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/*******************************************************************************
|
|
* *
|
|
* Overlay View (overlay.ejs) *
|
|
* *
|
|
******************************************************************************/
|
|
|
|
/* * *
|
|
* Overlay View (Main Content)
|
|
* * */
|
|
|
|
/* Overlay container, placed over the main div. */
|
|
#overlayContainer {
|
|
position: absolute;
|
|
z-index: 500;
|
|
top: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: calc(100% - 22px);
|
|
background: rgba(0, 0, 0, 0.50);
|
|
}
|
|
|
|
/* Main overlay content. */
|
|
#overlayContent {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/*justify-content: space-between;*/
|
|
width: 300px;
|
|
/*height: 35%;*/
|
|
box-sizing: border-box;
|
|
padding: 15px 0px;
|
|
/* background-color: #424242; */
|
|
text-align: center;
|
|
}
|
|
|
|
/* Main overlay content anchor styles. */
|
|
#overlayContent a,
|
|
#overlayDismiss {
|
|
color: rgba(202, 202, 202, 0.75);
|
|
transition: 0.25s ease;
|
|
}
|
|
#overlayContent a:hover,
|
|
#overlayDismiss {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
#overlayContent a:active,
|
|
#overlayDismiss {
|
|
color: rgba(165, 165, 165, 0.75);
|
|
}
|
|
|
|
/* Add spacing between overlay content elements. */
|
|
#overlayContent > *:first-child {
|
|
margin-top: 0px !important;
|
|
}
|
|
#overlayContent > *:last-child {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
#overlayContent > * {
|
|
margin: 8px 0px;
|
|
}
|
|
|
|
/* Overlay title styles. */
|
|
#overlayTitle {
|
|
font-family: 'Avenir Medium';
|
|
font-size: 20px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Overlay description styles. */
|
|
#overlayDesc {
|
|
font-family: 'Avenir Book';
|
|
font-size: 12px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Div which contains action buttons. */
|
|
#overlayActionContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Overlay acknowledge button styles. */
|
|
#overlayAcknowledge {
|
|
background: none;
|
|
border: 1px solid #ffffff;
|
|
color: white;
|
|
font-family: 'Avenir Medium';
|
|
font-weight: bold;
|
|
border-radius: 2px;
|
|
padding: 0px 8.1px;
|
|
cursor: pointer;
|
|
transition: 0.25s ease;
|
|
}
|
|
#overlayAcknowledge:hover,
|
|
#overlayAcknowledge:focus {
|
|
box-shadow: 0px 0px 10px 0px #fff;
|
|
outline: none;
|
|
}
|
|
#overlayAcknowledge:active {
|
|
border-color: rgba(255, 255, 255, 0.75);
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
/* Overlay dismiss option styles. */
|
|
#overlayDismiss {
|
|
font-family: 'Avenir Book';
|
|
font-weight: bold;
|
|
font-size: 10px;
|
|
text-decoration: none;
|
|
padding-top: 2.5px;
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
#overlayDismiss:hover {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
#overlayDismiss:active {
|
|
color: rgba(165, 165, 165, 0.75);
|
|
}
|
|
|
|
/* * *
|
|
* Overlay View (Server Selection Content)
|
|
* * */
|
|
|
|
/* Server selection content container. */
|
|
#serverSelectContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 75%;
|
|
}
|
|
|
|
/* Server selection header. */
|
|
#serverSelectHeader {
|
|
font-family: 'Avenir Medium';
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
/* Wrapper div for the list of available servers. */
|
|
#serverSelectList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-height: 65%;
|
|
min-height: 40%;
|
|
}
|
|
|
|
/* Scrollable div which lists the available servers. */
|
|
#serverSelectListScrollable {
|
|
padding: 0px 5px;
|
|
overflow-y: scroll;
|
|
}
|
|
#serverSelectListScrollable::-webkit-scrollbar {
|
|
width: 2px;
|
|
}
|
|
#serverSelectListScrollable::-webkit-scrollbar-track {
|
|
display: none;
|
|
}
|
|
#serverSelectListScrollable::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
|
|
}
|
|
|
|
/* Content container for a server listing. */
|
|
.serverListing {
|
|
border: none;
|
|
padding: 0px;
|
|
width: 375px;
|
|
min-height: 60px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
opacity: 0.6;
|
|
transition: 0.25s ease;
|
|
cursor: pointer;
|
|
position: relative;
|
|
background: rgba(131, 131, 131, 0.25);
|
|
}
|
|
.serverListing[selected] {
|
|
cursor: default;
|
|
opacity: 1.0;
|
|
}
|
|
.serverListing:hover,
|
|
.serverListing:focus {
|
|
outline: none;
|
|
opacity: 1.0;
|
|
}
|
|
|
|
/* Add spacing between server listings. */
|
|
#serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child) {
|
|
margin: 5px 0px;
|
|
}
|
|
#serverSelectListScrollable > .serverListing:first-child {
|
|
margin-bottom: 5px;
|
|
}
|
|
#serverSelectListScrollable > .serverListing:last-child {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Server listing image. */
|
|
.serverListingImg {
|
|
margin: 0px 10px 0px 5px;
|
|
border: 1px solid #fff;
|
|
height: 50px;
|
|
width: auto;
|
|
}
|
|
|
|
/* Content container for the server listing's details. */
|
|
.serverListingDetails {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
height: 50px;
|
|
}
|
|
|
|
/* The name of the server listing. */
|
|
.serverListingName {
|
|
font-family: 'Avenir Book';
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Description for the server listing. */
|
|
.serverListingDescription {
|
|
font-family: 'Avenir Book';
|
|
font-size: 10px;
|
|
line-height: 10px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Content container for the server listing's information. */
|
|
.serverListingInfo {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
/* The minecraft version of the server listing. */
|
|
.serverListingVersion {
|
|
font-size: 10px;
|
|
color: #fff;
|
|
font-family: 'Avenir Book';
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
line-height: 12px;
|
|
height: 12px;
|
|
border-radius: 2px;
|
|
background: rgba(31, 140, 11, 0.8);
|
|
padding: 0px 2px;
|
|
}
|
|
|
|
/* The revision version of the server's manifest. */
|
|
.serverListingRevision {
|
|
font-family: 'Avenir Book';
|
|
color: #969696;
|
|
font-size: 10px;
|
|
line-height: 12px;
|
|
padding: 0px 5px;
|
|
}
|
|
|
|
/* Star which indicates the default (main) server. */
|
|
.serverListingStarWrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
height: 12px;
|
|
position: relative;
|
|
}
|
|
/* Tooltip which displays when hovering over the star. */
|
|
.serverListingStarTooltip {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
width: 65px;
|
|
background-color: rgba(0, 0, 0, 0.40);
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 130%;
|
|
font-family: 'Avenir Book';
|
|
font-size: 10px;
|
|
transition: visibility 0s linear 0.25s, opacity 0.25s ease;
|
|
}
|
|
.serverListingStarTooltip::after {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 100%; /* To the left of the tooltip */
|
|
margin-top: -5px;
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
border-color: transparent rgba(0, 0, 0, 0.40) transparent transparent;
|
|
}
|
|
#serverListingStarWrapper:hover .serverListingStarTooltip {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition-delay:0s;
|
|
}
|
|
|
|
/* Content container which contains the server select actions. */
|
|
#serverSelectActions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
/* Server selection confirm button styles. */
|
|
#serverSelectConfirm {
|
|
background: none;
|
|
border: 1px solid #ffffff;
|
|
color: white;
|
|
font-family: 'Avenir Medium';
|
|
font-weight: bold;
|
|
border-radius: 2px;
|
|
padding: 0px 8.1px;
|
|
cursor: pointer;
|
|
transition: 0.25s ease;
|
|
min-height: 20.67px;
|
|
}
|
|
#serverSelectConfirm:hover,
|
|
#serverSelectConfirm:focus {
|
|
box-shadow: 0px 0px 10px 0px #fff;
|
|
outline: none;
|
|
}
|
|
#serverSelectConfirm:active {
|
|
border-color: rgba(255, 255, 255, 0.75);
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
/* Server selection cancel button styles. */
|
|
#serverSelectCancel {
|
|
font-family: 'Avenir Book';
|
|
font-weight: bold;
|
|
font-size: 10px;
|
|
text-decoration: none;
|
|
padding-top: 2.5px;
|
|
color: rgba(202, 202, 202, 0.75);
|
|
transition: 0.25s ease;
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
#serverSelectCancel:hover {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
#serverSelectCancel:active {
|
|
color: rgba(165, 165, 165, 0.75);
|
|
} |