You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
2.6 KiB
CSS
162 lines
2.6 KiB
CSS
:root {
|
|
--black: #000;
|
|
--white: #FFF;
|
|
--red: #800;
|
|
--cyan: #AFE;
|
|
--violet: #C4C;
|
|
--green: #0C5;
|
|
--blue: #00A;
|
|
--yellow: #EE7;
|
|
--orange: #D85;
|
|
--brown: #640;
|
|
--light-red: #F77;
|
|
--light-green: #AF6;
|
|
--light-blue: #08F;
|
|
--grey-1: #333;
|
|
--grey-2: #777;
|
|
--grey-3: #BBB;
|
|
--crt-frame: #BFBCAD;
|
|
}
|
|
|
|
@keyframes scanline {
|
|
0% {
|
|
top: 0;
|
|
}
|
|
|
|
30% {
|
|
top: 100%;
|
|
}
|
|
|
|
100% {
|
|
top: 100%;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
|
|
body {
|
|
background: var(--cyan);
|
|
color: var(--blue);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1280px) {
|
|
#app {
|
|
width: 90vw;
|
|
height: 90vh;
|
|
}
|
|
}
|
|
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: VT323, monospace;
|
|
font-size: 24px;
|
|
background: var(--black);
|
|
}
|
|
|
|
#app {
|
|
position: relative;
|
|
z-index: 10;
|
|
background: var(--crt-frame);
|
|
width: 1280px;
|
|
height: 900px;
|
|
max-width: 1280px;
|
|
max-height: 1024px;
|
|
box-shadow: inset 0.25em 0.25em 2px rgba(255, 255, 255, 0.4), inset -0.25em -0.25em 2px rgba(0, 0, 0, 0.4);
|
|
user-select: none;
|
|
transform: translate3d(0, 0, 0);
|
|
backface-visibility: hidden;
|
|
perspective: 1000;
|
|
color: var(--cyan);
|
|
text-shadow: 0 0 2px yellow;
|
|
}
|
|
|
|
#screen.enhanced-readability {
|
|
text-shadow: none;
|
|
}
|
|
|
|
#screen {
|
|
width: calc(100% - 2.4em);
|
|
height: calc(100% - 2.4em);
|
|
overflow: hidden;
|
|
margin: 1.2em;
|
|
z-index: 20;
|
|
box-shadow: 0 0 1px 3px #0A0A0AB2;
|
|
background: var(--blue);
|
|
}
|
|
|
|
#app,
|
|
#screen {
|
|
border-radius: 1em;
|
|
}
|
|
|
|
#wrap {
|
|
position: relative;
|
|
height: 100%;
|
|
padding: 1.5em;
|
|
background: radial-gradient(ellipse at center, #FFF2 0%, #0003 100%);
|
|
}
|
|
|
|
#interlace {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: linear-gradient(#888 50%, #000 0);
|
|
background-repeat: repeat-y;
|
|
background-size: 100% 4px;
|
|
opacity: .1;
|
|
z-index: 21;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#scanline {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1em;
|
|
background: linear-gradient(180deg, transparent 0, #EEE 50%, navy 0, transparent);
|
|
opacity: .1;
|
|
animation: scanline 6s linear infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#inner {
|
|
height: 100%;
|
|
background: #0003;
|
|
border-radius: .5em;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#inner::selection {
|
|
color: var(--blue);
|
|
background: var(--cyan);
|
|
}
|
|
|
|
#inner>textarea {
|
|
width: 100%;
|
|
height: calc(100% - 1.5em);
|
|
padding: 0 1em;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
#inner>footer {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
height: 1.5em;
|
|
line-height: 1.5em;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
#inner>footer>a {
|
|
padding: 0 1em;
|
|
margin-right: 1em;
|
|
background: var(--cyan);
|
|
color: var(--blue);
|
|
} |