mirror of
https://github.com/libretro/RetroArch
synced 2025-01-17 10:18:17 +00:00
121 lines
1.8 KiB
CSS
121 lines
1.8 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;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
}
|
|
|
|
/**
|
|
* Toggle Top Navigation
|
|
*/
|
|
.toggleMenu {
|
|
float: right;
|
|
}
|
|
.showMenu {
|
|
position: absolute;
|
|
right: 0;
|
|
cursor: pointer;
|
|
}
|
|
#icnShowMenu {
|
|
color: #565656 !important;
|
|
}
|
|
|
|
.navbar {
|
|
box-shadow: none;
|
|
}
|