2017-05-16 23:26:46 -07:00
|
|
|
/*******************************************************************************
|
|
|
|
* *
|
|
|
|
* Fonts *
|
|
|
|
* *
|
|
|
|
******************************************************************************/
|
|
|
|
|
|
|
|
/* Primary font for the application, found on http://www.dafont.com/ringbearer.font */
|
|
|
|
@font-face {
|
|
|
|
font-family: ringbearer;
|
|
|
|
src: url('../fonts/ringbearer.ttf');
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Logger font, found on https://fonts.google.com/specimen/Inconsolata?selection.family=Inconsolata */
|
|
|
|
@font-face {
|
|
|
|
font-family: inconsolata;
|
2017-05-17 14:44:46 -07:00
|
|
|
src: url('../fonts/Inconsolata-Regular.ttf');
|
2017-05-16 23:26:46 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
/*******************************************************************************
|
|
|
|
* *
|
|
|
|
* Body *
|
|
|
|
* *
|
|
|
|
******************************************************************************/
|
|
|
|
|
|
|
|
/* Reset body, html, and div presets. */
|
|
|
|
body, html, div {
|
|
|
|
margin: 0px;
|
|
|
|
padding: 0px;
|
|
|
|
}
|
|
|
|
|
2017-05-17 14:44:46 -07:00
|
|
|
html, body {
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
2017-05-16 23:26:46 -07:00
|
|
|
html {
|
|
|
|
background: url('../images/BrownWithWignette.jpg') no-repeat center center fixed;
|
|
|
|
background-size: cover;
|
|
|
|
}
|
|
|
|
|
2017-05-17 14:44:46 -07:00
|
|
|
#main_content {
|
|
|
|
height: calc(100% - 90px);
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
2017-05-17 11:51:49 -07:00
|
|
|
button {
|
|
|
|
background-color: #a02d2a;
|
|
|
|
color: #ffffff;
|
|
|
|
border: none;
|
|
|
|
padding: 7px 10px;
|
|
|
|
text-align: center;
|
|
|
|
text-decoration: none;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
|
|
|
|
button:hover {
|
|
|
|
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
|
|
|
|
}
|
|
|
|
|
2017-05-17 14:44:46 -07:00
|
|
|
::selection {
|
|
|
|
background-color: #a02d2a;
|
|
|
|
color: #ffffff;
|
|
|
|
}
|
|
|
|
|
2017-05-16 23:26:46 -07:00
|
|
|
/*******************************************************************************
|
|
|
|
* *
|
|
|
|
* Header *
|
|
|
|
* *
|
|
|
|
******************************************************************************/
|
|
|
|
|
|
|
|
/* Main div header container. */
|
|
|
|
#header_container {
|
|
|
|
background-color: black;
|
|
|
|
padding: 5px;
|
|
|
|
font-size: 0px;
|
|
|
|
text-align: center;
|
|
|
|
border-bottom: thick solid #a02d2a;
|
|
|
|
border-bottom-width: 5px;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Div container for the seal image. */
|
|
|
|
#header_seal_container {
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Div container for the header image. */
|
|
|
|
#header_img_container {
|
|
|
|
display: inline-block;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Seal and header images. */
|
|
|
|
#header_seal,
|
|
|
|
#header_img {
|
|
|
|
height: 75px;
|
|
|
|
width: auto;
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Div container for the social buttons. */
|
|
|
|
#header_social_container {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0px;
|
|
|
|
right: 0px;
|
|
|
|
margin-bottom: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Social buttons. */
|
|
|
|
.header_social_img {
|
|
|
|
height: 25px;
|
|
|
|
width: auto;
|
|
|
|
display: inline-block;
|
|
|
|
cursor: pointer;
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
|
2017-05-17 02:03:09 -07:00
|
|
|
/*******************************************************************************
|
|
|
|
* *
|
|
|
|
* Toggle Buttons *
|
|
|
|
* *
|
|
|
|
******************************************************************************/
|
|
|
|
|
|
|
|
.toggle-btn {
|
|
|
|
color: #000000;
|
|
|
|
font-size: 15px;
|
|
|
|
font-family: 'ringbearer';
|
|
|
|
user-select: none;
|
|
|
|
background-color: transparent;
|
|
|
|
display: inline-flex;
|
|
|
|
cursor: pointer;
|
|
|
|
width: 90px;
|
|
|
|
height: 35px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.toggle-btn-grp .toggle-btn {
|
|
|
|
border-radius: 0;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.toggle-btn:not(.success):hover {
|
|
|
|
box-shadow: inset 0 -4.5px 0 0 #000000;
|
|
|
|
}
|
|
|
|
|
|
|
|
.toggle-btn.success {
|
|
|
|
background: #a02d2a;
|
|
|
|
color: #ffffff;
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
|
|
|
|
.visuallyhidden {
|
|
|
|
border: 0;
|
|
|
|
clip: rect(0 0 0 0);
|
|
|
|
height: 1px;
|
|
|
|
margin: -1px;
|
|
|
|
overflow: hidden;
|
|
|
|
padding: 0;
|
|
|
|
position: absolute;
|
|
|
|
width: 1px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
|
|
|
|
clip: auto;
|
|
|
|
height: auto;
|
|
|
|
margin: 0;
|
|
|
|
overflow: visible;
|
|
|
|
position: static;
|
|
|
|
width: auto;
|
|
|
|
}
|
|
|
|
|
2017-05-16 23:26:46 -07:00
|
|
|
/*******************************************************************************
|
|
|
|
* *
|
|
|
|
* Left Body Container *
|
|
|
|
* *
|
|
|
|
******************************************************************************/
|
|
|
|
|
2017-05-17 02:03:09 -07:00
|
|
|
#left_pane {
|
|
|
|
float: left;
|
|
|
|
width: 30%;
|
2017-05-16 23:26:46 -07:00
|
|
|
}
|
|
|
|
|
2017-05-22 22:45:20 -07:00
|
|
|
#welcome_text_container {
|
|
|
|
display: table;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
|
2017-05-17 11:51:49 -07:00
|
|
|
#welcome_text {
|
|
|
|
font-family: 'ringbearer';
|
|
|
|
font-size: 16px;
|
2017-05-22 22:45:20 -07:00
|
|
|
display: table-cell;
|
2017-05-17 11:51:49 -07:00
|
|
|
text-align: center;
|
2017-05-22 22:45:20 -07:00
|
|
|
vertical-align: middle;
|
|
|
|
height: 35px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#login_pane {
|
|
|
|
background: linear-gradient(141deg, #000000 -5%, #a02d2a 120%, #000000 150%);
|
|
|
|
padding-top: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.28);
|
|
|
|
width: 97%;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
#login_pane_header_container {
|
|
|
|
margin-left: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.login_pane_header {
|
|
|
|
font-size: 14px;
|
|
|
|
font-family: 'Segoe UI';
|
|
|
|
font-weight: 500;
|
|
|
|
color: white;
|
2017-05-17 11:51:49 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
#login_container {
|
|
|
|
display: inline-flex;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
#login_image {
|
|
|
|
height: 85px;
|
|
|
|
width: auto;
|
|
|
|
display: block;
|
|
|
|
border: 3px solid #000000;
|
|
|
|
}
|
|
|
|
|
|
|
|
#login_container_right input,
|
|
|
|
#login_container_right label {
|
|
|
|
display: flex;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
#login_container_left {
|
|
|
|
padding: 10px 0 10px 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#login_container_right {
|
|
|
|
padding: 10px;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.login_field {
|
|
|
|
font-size: 12px;
|
|
|
|
font-family: 'Segoe UI';
|
|
|
|
font-weight: 500;
|
2017-05-22 22:45:20 -07:00
|
|
|
color: white;
|
|
|
|
/* new */
|
|
|
|
display: table;
|
2017-05-17 11:51:49 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
#button_login {
|
|
|
|
float: right;
|
2017-05-22 22:45:20 -07:00
|
|
|
margin-top: 10px;
|
2017-05-17 11:51:49 -07:00
|
|
|
}
|
|
|
|
|
2017-05-16 23:26:46 -07:00
|
|
|
/*******************************************************************************
|
|
|
|
* *
|
|
|
|
* Right Body Container *
|
|
|
|
* *
|
|
|
|
******************************************************************************/
|
|
|
|
|
2017-05-17 02:03:09 -07:00
|
|
|
#right_pane {
|
|
|
|
float: right;
|
|
|
|
width: 70%;
|
2017-05-16 23:26:46 -07:00
|
|
|
}
|
|
|
|
|
2017-05-17 02:03:09 -07:00
|
|
|
#content_container {
|
|
|
|
border: 3px solid #a02d2a;
|
2017-05-17 14:44:46 -07:00
|
|
|
height: calc(98% - 41.33px);
|
2017-05-17 02:03:09 -07:00
|
|
|
width: 98%;
|
2017-05-17 14:44:46 -07:00
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
#launcher-log {
|
|
|
|
font-family: 'inconsolata';
|
|
|
|
font-size: 12px;
|
|
|
|
color: #ffffff;
|
|
|
|
background-color: #1a1b1c;
|
|
|
|
border: none;
|
|
|
|
outline: none;
|
|
|
|
overflow-y: scroll;
|
|
|
|
display: block;
|
|
|
|
align-items: stretch;
|
|
|
|
width: 100%;
|
|
|
|
resize: none;
|
|
|
|
padding: 5px 10px;
|
|
|
|
text-shadow: 0.01px 0.01px 0.01px #ffffff;
|
|
|
|
line-height: 1.2em;
|
|
|
|
}
|
|
|
|
|
|
|
|
#launcher-log::selection {
|
|
|
|
background: rgba(160, 45, 42, .9);
|
|
|
|
color: #ffffff;
|
|
|
|
}
|
|
|
|
|
|
|
|
#launcher-log::-webkit-scrollbar {
|
|
|
|
background-color: #a02d2a;
|
|
|
|
}
|
|
|
|
|
|
|
|
#launcher-log::-webkit-scrollbar-thumb:window-inactive,
|
|
|
|
#launcher-log::-webkit-scrollbar-thumb {
|
|
|
|
background: black
|
2017-05-22 22:45:20 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
.log_debug {
|
|
|
|
color: blue;
|
|
|
|
}
|
|
|
|
|
|
|
|
/*******************************************************************************
|
|
|
|
* *
|
|
|
|
* Login View *
|
|
|
|
* *
|
|
|
|
******************************************************************************/
|
|
|
|
|
|
|
|
#login_view {
|
|
|
|
background: rgba(0, 0, 0, 0.76);
|
|
|
|
height: calc(100% - 90px);
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
#login_content {
|
|
|
|
width: 50%;
|
|
|
|
height: 75%;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
#login_view #content_main {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
#login_view #login_content_image {
|
|
|
|
height: 125px;
|
|
|
|
width: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
#login_view #content_main #right {
|
|
|
|
margin-left: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.login_input {
|
|
|
|
background-color: #a02d2a;
|
|
|
|
}
|
|
|
|
|
|
|
|
.login_input::-webkit-input-placeholder {
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|