Frank
7c14ab3331
Lets players leave the tutorial at any time via a top-left link back to the game session. Once the tutorial finishes and the input field is disabled, the button relocates into the input row so it's the obvious next action.
101 lines
1.7 KiB
CSS
101 lines
1.7 KiB
CSS
/* Styles for the pregame (commandline tutorial) terminal, mirroring game1's look */
|
|
|
|
html::-webkit-scrollbar,
|
|
body::-webkit-scrollbar {
|
|
width: 1px;
|
|
}
|
|
|
|
html::-webkit-scrollbar-track,
|
|
body::-webkit-scrollbar-track {
|
|
background: #000;
|
|
}
|
|
|
|
html::-webkit-scrollbar-thumb,
|
|
body::-webkit-scrollbar-thumb {
|
|
background: #F00;
|
|
}
|
|
|
|
body {
|
|
background-color: #000;
|
|
min-height: 100vh;
|
|
font-family: monospace;
|
|
margin: 0;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #F00 #000;
|
|
}
|
|
|
|
div#message-container {
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
min-height: calc(100vh - 80px);
|
|
box-sizing: border-box;
|
|
font-size: 14px;
|
|
}
|
|
|
|
div.message {
|
|
color: #C0C0C0;
|
|
white-space: pre-wrap;
|
|
line-height: 1.35;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
div.message-mainframe {
|
|
color: #0F0;
|
|
}
|
|
|
|
div.message-virus {
|
|
color: #F00;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.message-hint {
|
|
color: #FF0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div#input {
|
|
padding: 20px;
|
|
}
|
|
|
|
input#input-message {
|
|
width: 100%;
|
|
padding: 6px 10px;
|
|
background: #111;
|
|
border: 1px solid #A00000;
|
|
color: #C0C0C0;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
font-family: monospace;
|
|
}
|
|
|
|
a#back-button {
|
|
position: fixed;
|
|
top: 16px;
|
|
left: 16px;
|
|
padding: 6px 14px;
|
|
background: #111;
|
|
border: 1px solid #A00000;
|
|
color: #C0C0C0;
|
|
font-size: 13px;
|
|
font-family: monospace;
|
|
text-decoration: none;
|
|
z-index: 200;
|
|
}
|
|
|
|
a#back-button:hover {
|
|
background: #1a1a1a;
|
|
color: #FFF;
|
|
}
|
|
|
|
a#back-button.docked {
|
|
position: static;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 6px 10px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|