137 lines
2.1 KiB
CSS
137 lines
2.1 KiB
CSS
/**
|
|
* RetroArch Web Player
|
|
*
|
|
* This provides the basic styling for the RetroArch web player.
|
|
*/
|
|
|
|
/**
|
|
* Make sure the background of the player is black.
|
|
* Also make sure line height is 0 so there's no extra space on the bottom.
|
|
*/
|
|
.webplayer-container {
|
|
background-color: black;
|
|
line-height: 0;
|
|
}
|
|
|
|
/**
|
|
* Webplayer Preview when not loaded.
|
|
*/
|
|
.webplayer-preview {
|
|
margin: 0 auto;
|
|
cursor: wait;
|
|
opacity: 0.2;
|
|
transition: all 0.8s;
|
|
-webkit-animation: loading 0.8s ease-in-out infinite alternate;
|
|
-moz-animation: loading 0.8s ease-in-out infinite alternate;
|
|
animation: loading 0.8s ease-in-out infinite alternate;
|
|
}
|
|
.webplayer-preview.loaded {
|
|
cursor: pointer;
|
|
opacity: 1;
|
|
-webkit-animation: loaded 0.8s ease-in-out;
|
|
-moz-animation: loaded 0.8s ease-in-out;
|
|
animation: loaded 0.8s ease-in-out;
|
|
}
|
|
@keyframes loaded {
|
|
from {
|
|
opacity: 0.2;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-moz-keyframes loaded {
|
|
from {
|
|
opacity: 0.2;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes loaded {
|
|
from {
|
|
opacity: 0.2;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes loading{
|
|
from {
|
|
opacity: 0.2;
|
|
}
|
|
to {
|
|
opacity: 0.35;
|
|
}
|
|
}
|
|
@-moz-keyframes loading{
|
|
from {
|
|
opacity: 0.2;
|
|
}
|
|
to {
|
|
opacity: 0.35;
|
|
}
|
|
}
|
|
@-webkit-keyframes loading {
|
|
from {
|
|
opacity: 0.2;
|
|
}
|
|
to {
|
|
opacity: 0.35;
|
|
}
|
|
}
|
|
|
|
canvas.webplayer {
|
|
border: none;
|
|
outline: none;
|
|
width: 800px;
|
|
height: 600px;
|
|
}
|
|
|
|
#canvas_div {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
|
|
/**
|
|
* Hack to make emscripten stop messing with the canvas size while in fullscreen.
|
|
* Foiled again!
|
|
*/
|
|
:fullscreen canvas.webplayer {
|
|
min-width: 100vw;
|
|
max-width: 100vw;
|
|
min-height: 100vh;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
textarea {
|
|
font-family: monospace;
|
|
font-size: 0.7em;
|
|
height: 95%;
|
|
width: 95%;
|
|
border-style: none;
|
|
border-color: transparent;
|
|
overflow: auto;
|
|
resize: none;
|
|
}
|
|
|
|
/**
|
|
* Toggle Top Navigation
|
|
*/
|
|
.toggleMenu {
|
|
float: right;
|
|
}
|
|
.showMenu {
|
|
position: absolute;
|
|
right: 0;
|
|
cursor: pointer;
|
|
}
|
|
#icnShowMenu {
|
|
color: #565656 !important;
|
|
}
|
|
|
|
.navbar {
|
|
box-shadow: none;
|
|
}
|