84 lines
1.4 KiB
CSS
84 lines
1.4 KiB
CSS
* {box-sizing: border-box; margin: 0; padding: 0}
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-family: "Noto Sans", Roboto, "Droid Sans", sans-serif;
|
|
font-size: 12pt;
|
|
text-align: center;
|
|
background: #111;
|
|
color: #eee;
|
|
}
|
|
|
|
#workspace {
|
|
padding: 1rem 0.6rem;
|
|
}
|
|
|
|
#screenfield {
|
|
display: inline-block;
|
|
min-width: 240px;
|
|
height: 50vh;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
font-family: "Fira Code", "Droid Sans Mono", monospace;
|
|
font-size: inherit;
|
|
border: 1px solid #ccc;
|
|
border-radius: 2px;
|
|
overflow-y: scroll;
|
|
text-align: left;
|
|
text-wrap: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
#keypad {
|
|
display: inline-block;
|
|
width: 50vw;
|
|
min-width: 206px;
|
|
max-width: 400px;
|
|
height: 20vh;
|
|
min-height: 180px;
|
|
}
|
|
|
|
@media only screen and (max-width: 320px) {
|
|
#keypad, #keypad * {
|
|
display:none!important;
|
|
}
|
|
#workspace {
|
|
padding: 0.5rem 0!important;
|
|
}
|
|
}
|
|
|
|
#keypad div {
|
|
padding: 1px 0;
|
|
height: 25%;
|
|
}
|
|
|
|
#keypad button {
|
|
background: inherit;
|
|
color: inherit;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
border: 1px solid #ddd;
|
|
border-radius: 3px;
|
|
width: calc(25% - 4px);
|
|
height: calc(100% - 4px);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#keypad button:hover {
|
|
color: cyan;
|
|
border-color: cyan;
|
|
}
|
|
|
|
#keypad #bspc {
|
|
width: calc(50% - 4px);
|
|
}
|
|
|
|
header {padding: 0.6rem 0}
|
|
footer {padding-top: 0.6rem}
|
|
footer div {padding: 0.6em 0}
|
|
|
|
#programloadfield {display:none}
|
|
|
|
a,a:active,a:visited {color: inherit}
|
|
a:hover {color:cyan}
|