add video css
This commit is contained in:
97
public/css/lib/Vimeo.css
Normal file
97
public/css/lib/Vimeo.css
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
.vimeo-image,
|
||||||
|
.vimeo-image:after,
|
||||||
|
.vimeo-embed {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.vimeo {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 56.25%;
|
||||||
|
background: #e2e2e2;
|
||||||
|
}
|
||||||
|
.vimeo iframe {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.vimeo-image {
|
||||||
|
background-position: center center;
|
||||||
|
background-size: 100% auto;
|
||||||
|
}
|
||||||
|
.vimeo-image:after {
|
||||||
|
z-index: 1;
|
||||||
|
display: block;
|
||||||
|
content: '';
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
.vimeo-play-button,
|
||||||
|
.vimeo-loading {
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
|
.vimeo-play-button {
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
padding: 0;
|
||||||
|
width: 70px;
|
||||||
|
border: 0;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.vimeo-play-button:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.vimeo-play-button svg {
|
||||||
|
fill: #fff;
|
||||||
|
-webkit-filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8));
|
||||||
|
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8));
|
||||||
|
}
|
||||||
|
.vimeo-loading {
|
||||||
|
z-index: 4;
|
||||||
|
position: absolute;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
.vimeo-loading svg {
|
||||||
|
fill: #000;
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
-webkit-animation: spinner 0.8s infinite linear;
|
||||||
|
animation: spinner 0.8s infinite linear;
|
||||||
|
}
|
||||||
|
.vimeo-embed iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
@-moz-keyframes spinner {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes spinner {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-o-keyframes spinner {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes spinner {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
@@ -1,7 +1,7 @@
|
|||||||
doctype html
|
doctype html
|
||||||
html(ng-app='profileValidation', lang='en')
|
html(ng-app='profileValidation', lang='en')
|
||||||
head
|
head
|
||||||
include partials/universal-head
|
include partials/small-head
|
||||||
body.top-and-bottom-margins
|
body.top-and-bottom-margins
|
||||||
.container
|
.container
|
||||||
include partials/flash
|
include partials/flash
|
||||||
|
@@ -3,6 +3,7 @@ script(src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstra
|
|||||||
link(rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:400|Inconsolata")
|
link(rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:400|Inconsolata")
|
||||||
link(rel='stylesheet', href='/bower_components/font-awesome/css/font-awesome.min.css')
|
link(rel='stylesheet', href='/bower_components/font-awesome/css/font-awesome.min.css')
|
||||||
link(rel='stylesheet', href='/css/main.css')
|
link(rel='stylesheet', href='/css/main.css')
|
||||||
|
link(rel='stylesheet', href='/css/lib/Vimeo.css')
|
||||||
// End **REQUIRED** includes
|
// End **REQUIRED** includes
|
||||||
|
|
||||||
include meta
|
include meta
|
||||||
|
Reference in New Issue
Block a user