poseidon.css

/* bug: pseudo selectors for :fullscreen, :-moz-full-screen, and :-webkit-full-screen cannot be grouped together */

/* styles for container div */

div.mse-container {
    position: relative;
    float: left;
    display: inline-block;
    background: linear-gradient(black, grey, black);
    border: 1px solid white;
}

div.mse-container:fullscreen {
    width: 100%;
    height: 100%;
}

div.mse-container:-ms-fullscreen {
    width: 100%;
    height: 100%;
}

div.mse-container:-moz-full-screen {
    width: 100%;
    height: 100%;
}

div.mse-container:-webkit-full-screen {
    width: 100%;
    height: 100%;
}

div.mse-container.disabled {
    pointer-events: none;
    opacity: 0.4;
}

/* styles for video */

video.mse-video {
    pointer-events: none;
    cursor: none;
}

div.mse-container:fullscreen video {
    width: 100%;
    height: 100%;
}

div.mse-container:-ms-fullscreen video {
    width: 100%;
    height: 100%;
}

div.mse-container:-moz-full-screen video {
    width: 100%;
    height: 100%;
}

div.mse-container:-webkit-full-screen video {
    width: 100%;
    height: 100%;
}

/* styles for controls div */

div.mse-controls {
    position: absolute;
    background: black;
    border: 1px solid white;
    left: 5px;
    right: 5px;
    bottom: 5px;
    padding: 3px;
    border-radius: 5px;
    opacity: 0;
}

div.mse-controls:hover {
    opacity: 0.8;
}

div.mse-container:fullscreen div {
    border: 2px solid white;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 6px;
    border-radius: 10px;
}

div.mse-container:-ms-fullscreen div {
    border: 2px solid white;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 6px;
    border-radius: 10px;
}

div.mse-container:-moz-full-screen div {
    border: 2px solid white;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 6px;
    border-radius: 10px;
}

div.mse-container:-webkit-full-screen div {
    border: 2px solid white;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 6px;
    border-radius: 10px;
}

/* styles for buttons */

div.mse-container button {
    background-color: transparent;
    border: none;
    outline: none;
    opacity: 0.8;
    cursor: pointer;
    color: white;
    font-size: 16px;
    margin: 1px;
}

div.mse-container button:hover {
    opacity: 1;
}

div.mse-container button:active {
    opacity: 0.6;
}

div.mse-container:fullscreen button {
    font-size: 32px;
}

div.mse-container:-ms-fullscreen button {
    font-size: 32px;
}

div.mse-container:-moz-full-screen button {
    font-size: 32px;
}

div.mse-container:-webkit-full-screen button {
    font-size: 32px;
}

button.mse-start, button.mse-stop, button.mse-snapshot {
    float: left;
}

button.mse-fullscreen, button.mse-cycle {
    float: right;
}

button.mse-start:before {
    font-family: FontAwesome;
    content: "\f04b";
}

button.mse-stop:before {
    font-family: FontAwesome;
    content: "\f04d";
}

button.mse-snapshot:before {
    font-family: FontAwesome;
    content: "\f030";
}

button.mse-fullscreen:before {
    font-family: FontAwesome;
    content: "\f065";
}

button.mse-stop.cycling {
    pointer-events: none;
    cursor: none;
    opacity: 0.2;
}

div.mse-container:fullscreen button.mse-fullscreen:before {
    font-family: FontAwesome;
    content: "\f066";
}

div.mse-container:-ms-fullscreen button.mse-fullscreen:before {
    font-family: FontAwesome;
    content: "\f066";
}

div.mse-container:-moz-full-screen button.mse-fullscreen:before {
    font-family: FontAwesome;
    content: "\f066";
}

div.mse-container:-webkit-full-screen button.mse-fullscreen:before {
    font-family: FontAwesome;
    content: "\f066";
}

button.mse-cycle:before {
    font-family: FontAwesome;
    content: "\f021";/* other cycle icon options : f021 f110 f01e f1ce */
}

button.mse-cycle.animated {
    -webkit-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;
}

/* SPIN animation for cycle button */

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        -ms-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}