mirror of
https://github.com/simon987/Much-Assembly-Required-Frontend.git
synced 2025-12-20 01:26:00 +00:00
Major refactor of the console screen, game code rewritten in Typescript, users can now change their passwords
This commit is contained in:
simon
254
mar/console.css
Normal file
254
mar/console.css
Normal file
@@ -0,0 +1,254 @@
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#console-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#console-wrapper-left {
|
||||
|
||||
width: 870px;
|
||||
height: 400px;
|
||||
|
||||
position: relative;
|
||||
|
||||
line-height: 1.2;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
|
||||
.piece {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.noclick {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#console-wrapper-side {
|
||||
width: 120px;
|
||||
height: 400px;
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#shadow-wrapper {
|
||||
display: inline-block;
|
||||
-webkit-box-shadow: 0 0 1rem black;
|
||||
box-shadow: 0 0 1rem black;
|
||||
border-radius: 2rem;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.sideFrame {
|
||||
background-color: #e7e7e7;
|
||||
border-radius: 0 2rem 2rem 0;
|
||||
border: 1rem solid #e7e7e7;
|
||||
border-left: hidden;
|
||||
border-bottom-color: #E3E3E3;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.frame {
|
||||
background-color: transparent;
|
||||
border-radius: 2rem 0 0 2rem;
|
||||
border: 1rem solid #e7e7e7;
|
||||
border-bottom-color: #E3E3E3;
|
||||
-webkit-box-shadow: inset 0 0 4rem black, inset 0 0 3rem black;
|
||||
box-shadow: inset 0 0 4rem black, inset 0 0 3rem black;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.vertical-text {
|
||||
position: absolute;
|
||||
font-family: fixedsys;
|
||||
font-size: 16pt;
|
||||
|
||||
left: -4px;
|
||||
top: 125px;
|
||||
|
||||
-webkit-transform: rotate(270deg);
|
||||
-moz-transform: rotate(270deg);
|
||||
-ms-transform: rotate(270deg);
|
||||
-o-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
-webkit-transform-origin: 0 0;
|
||||
-moz-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
-o-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
#consoleText {
|
||||
font-family: 'fixedsys';
|
||||
font-size: 24px;
|
||||
white-space: pre-wrap;
|
||||
-webkit-animation: crt-output 10ms infinite;
|
||||
animation: crt-output 10ms infinite;
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
padding: 3rem 2rem;
|
||||
pointer-events: auto;
|
||||
text-align: left;
|
||||
text-shadow: 0 0.2rem 1rem #0c7b46;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#consoleText::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@-webkit-keyframes crt-output {
|
||||
0% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes crt-output {
|
||||
0% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.scanlines {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(70%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.6)));
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.6));
|
||||
background-size: 100% 0.3rem;
|
||||
border-radius: 2rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.glow {
|
||||
-webkit-animation: crt-glow 20s infinite;
|
||||
animation: crt-glow 20s infinite;
|
||||
background: radial-gradient(circle at 50% 50%, #1bd459 0%, rgba(27, 212, 89, 0.88) 58%, rgba(21, 235, 92, 0.57) 80%, rgba(19, 94, 29, 0.27) 93%, rgba(10, 23, 12, 0) 100%);
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@-webkit-keyframes crt-glow {
|
||||
0% {
|
||||
opacity: 0.1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes crt-glow {
|
||||
0% {
|
||||
opacity: 0.1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.ctr-selection::-moz-selection {
|
||||
background-color: #14fdce;
|
||||
color: #031e11;
|
||||
}
|
||||
|
||||
.ctr-selection::selection {
|
||||
background-color: #14fdce;
|
||||
color: #031e11;
|
||||
}
|
||||
|
||||
.ctr-selection-inverted::-moz-selection {
|
||||
background-color: #031e11;
|
||||
color: #14fdce;
|
||||
}
|
||||
|
||||
.ctr-selection-inverted::selection {
|
||||
background-color: #031e11;
|
||||
color: #14fdce;
|
||||
}
|
||||
|
||||
.ctr-text {
|
||||
color: #14fdce;
|
||||
background-color: #031e11;
|
||||
}
|
||||
|
||||
.ctr-text-inverted {
|
||||
color: #031e11;
|
||||
background-color: #14fdce;
|
||||
}
|
||||
|
||||
/*Buttons*/
|
||||
|
||||
.pdp8Button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
width: 24px;
|
||||
height: 55px;
|
||||
display: inline-block;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.pdp8Button:focus {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
.dial-backPlate {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 60%;
|
||||
|
||||
height: 83px;
|
||||
|
||||
}
|
||||
|
||||
.dial {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
position: absolute;
|
||||
left: 27px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.dial-lines {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user