forked from CCTF/DCTF
1
0
Fork 0
DCTF/frontend/style.css

361 lines
7.1 KiB
CSS

body {
margin: 0;
overflow: hidden;
font-family: 'Roboto Mono', monospace;
color: #FFFFFF;
}
.top {
background: #45484d;
background: linear-gradient(to right, #000000 220px,#2D3436 50%,#2D3436 calc(50% + 220px),#000000 100%);
position: absolute;
display: flex;
width: 100%;
height: 70px;
}
.top_logo {
width: 220px;
align-items: center;
display: flex;
font-size: 32px;
justify-content: center;
}
.top_left {
width: calc(50% - 205px);
align-items: center;
display: flex;
}
.top_center {
width: 190px;
align-items: center;
display: flex;
justify-content: center;
}
.top_right {
width: calc(50% - 205px);
align-items: center;
display: flex;
justify-content: flex-end;
}
.left {
background-color: #000000;
position: absolute;
left: 0; top: 70px; bottom: 0;
width: 220px;
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.left::-webkit-scrollbar {
display: none;
}
.main {
background: #bcbfbe;
background: radial-gradient(ellipse at center, #2D3436 0%,#000000 100%);
position: absolute;
left: 220px; top: 70px; right: 0; bottom: 0;
}
.left .activated {
border: 1px solid #2FA232;
background: #FFFFFF;
color: #2FA232;
}
.topitem {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
#playerName {
border: 0;
border-radius: 0.25rem;
font-family: 'Roboto Mono', monospace;
line-height: 1.5;
white-space: nowrap;
text-decoration: none;
margin: 10px 0;
padding: 0.25rem 0.5rem;
width: 93%;
}
#register {
border: 0;
border-radius: 0.25rem;
color: #FFFFFF;
background: #2FA232;
background: linear-gradient(225deg, #166D3B 0%, #2FA232 100%);
font-family: 'Roboto Mono', monospace;
font-size: 1rem;
line-height: 1.5;
white-space: nowrap;
text-decoration: none;
margin: 10px 0;
padding: 0.25rem 0.5rem;
width: 100%;
cursor: pointer;
}
#register:hover {
background: #2FA232;
background: linear-gradient(45deg, #166D3B 0%, #2FA232 100%);
}
.left-content {
margin: 14px;
}
#header_uppercase {
font-size: 13px;
color: #CCCCCC;
font-family: monospace;
white-space: nowrap;
}
#account_enable {
border: 1px solid #dcdcdc;
border-radius: 0.25rem;
background: #f4f6f7;
font-family: 'Roboto Mono', monospace;
font-size: 1rem;
white-space: nowrap;
text-decoration: none;
padding: 0.25rem 0.5rem;
margin: 10px 0;
width: 100%;
cursor: pointer;
}
#account_enable:hover {
background: #fafafb;
border-color: #2FA232;
color: #2FA232;
}
#metamask {
width: 20px;
vertical-align: text-top;
padding-right: 10px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #000000;
margin: 70px auto;
padding: 0;
max-width: 800px;
border: 3px solid #2FA232;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
float: right;
font-size: 28px;
}
.close:hover,
.close:focus {
color: #BBBBBB;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 1px 12px 1px 24px;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 16px;
}
.top a:link, .top a:visited, .top a:hover, .top a:active {
color: white;
text-decoration: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #d8dadb;
margin-top: 1em;
padding: 0;
}
.buttons {
text-align: center;
}
.buttons i {
font-size: 24px;
margin: 2px 0;
background-color: #2FA232;
background-image: linear-gradient(45deg, #8929AD 0%, #2FA232 50%, #43B7B8 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
li {
padding-bottom: 10px;
}
.form-switch {
display: inline-block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.form-switch i {
position: relative;
display: inline-block;
width: 46px;
height: 26px;
background-color: #e6e6e6;
border-radius: 23px;
vertical-align: text-bottom;
transition: all 0.3s linear;
}
.form-switch i::before {
content: "";
position: absolute;
left: 0;
width: 42px;
height: 22px;
background-color: #fff;
border-radius: 11px;
transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
transition: all 0.25s linear;
}
.form-switch i::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 11px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
transform: translate3d(2px, 2px, 0);
transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
width: 28px;
transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
.form-switch input { display: none; }
.form-switch input:checked + i { background-color: #2FA232; }
.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }
h1 {
font-size: 16px;
margin-top: 1em;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
color: #2FA232;
}
#loading {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
text-shadow: 2px 2px 4px #FFFFFF;
}
.dropdown-p {
text-align: center;
}
#rank_list {
width: 90%;
border-collapse: collapse;
border-style: hidden;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#rank_list th {
border: 1px solid #5f5f5f;
padding: 8px;
min-width: 40px;
}
#rank_list td {
border: 1px solid #5f5f5f;
padding: 8px;
min-width: 40px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
#rules {
color: #cccccc;
font-size: 14px;
}