mirror of
https://github.com/libretro/RetroArch
synced 2025-01-01 12:11:47 +00:00
100 lines
1.5 KiB
CSS
100 lines
1.5 KiB
CSS
/**
|
|
* RetroArch Web Player
|
|
*
|
|
* This provides the basic styling for the RetroArch web player.
|
|
*/
|
|
|
|
/**
|
|
* Make sure the background of the player is black.
|
|
*/
|
|
.webplayer-container {
|
|
background-color: black;
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Disable the border around the player.
|
|
*/
|
|
canvas.webplayer {
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
textarea {
|
|
font-family: monospace;
|
|
font-size: 0.7em;
|
|
height: 95%;
|
|
width: 95%;
|
|
border-style: none;
|
|
border-color: transparent;
|
|
overflow: auto;
|
|
resize: none;
|
|
}
|