140 lines
3.5 KiB
CSS
140 lines
3.5 KiB
CSS
body {
|
|
background: transparent;
|
|
overflow: hidden;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.debug {
|
|
position: absolute;
|
|
top: 0;
|
|
display: none;
|
|
width: 100vw;
|
|
font-size: 60px;
|
|
color: red;
|
|
line-height: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.no-gamepad {
|
|
position: absolute;
|
|
top: 20px;
|
|
display: none;
|
|
width: 100vw;
|
|
line-height: 2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.gamepad {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.help {
|
|
background: whitesmoke;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
|
|
box-sizing: border-box;
|
|
display: none;
|
|
font-size: 0.9em;
|
|
left: 50%;
|
|
min-width: 400px;
|
|
padding: 20px;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.help.active {
|
|
display: block;
|
|
}
|
|
|
|
.help h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.help h3 {
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
.help p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.help table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.help th {
|
|
text-align: left;
|
|
}
|
|
|
|
.help th,
|
|
.help td {
|
|
border-top: 1px solid #ddd;
|
|
line-height: 1.42857143;
|
|
padding: 8px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.help table>thead>tr>th {
|
|
border-bottom: 2px solid #ddd;
|
|
border-top: 0;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
kbd {
|
|
display: inline;
|
|
display: inline-block;
|
|
min-width: 1em;
|
|
padding: .2em .3em;
|
|
margin: 0 .2em;
|
|
font: normal 1em monospace;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
-moz-border-radius: .3em;
|
|
-webkit-border-radius: .3em;
|
|
border-radius: .3em;
|
|
border: none;
|
|
cursor: default;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
kbd[title],
|
|
.key[title] {
|
|
cursor: help;
|
|
}
|
|
|
|
kbd,
|
|
kbd.dark {
|
|
background: rgb(80, 80, 80);
|
|
background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
|
|
background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
|
|
color: rgb(250, 250, 250);
|
|
text-shadow: -1px -1px 0 rgb(70, 70, 70);
|
|
-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
|
|
-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
|
|
box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
|
|
}
|
|
|
|
kbd.light {
|
|
background: rgb(250, 250, 250);
|
|
background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
|
|
background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
|
|
color: rgb(50, 50, 50);
|
|
text-shadow: 0 0 2px rgb(255, 255, 255);
|
|
-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
|
|
-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
|
|
box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
|
|
}
|