add video css
parent
ac35b4bf73
commit
94ed227aeb
|
@ -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
|
||||
html(ng-app='profileValidation', lang='en')
|
||||
head
|
||||
include partials/universal-head
|
||||
include partials/small-head
|
||||
body.top-and-bottom-margins
|
||||
.container
|
||||
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', href='/bower_components/font-awesome/css/font-awesome.min.css')
|
||||
link(rel='stylesheet', href='/css/main.css')
|
||||
link(rel='stylesheet', href='/css/lib/Vimeo.css')
|
||||
// End **REQUIRED** includes
|
||||
|
||||
include meta
|
||||
|
|
Loading…
Reference in New Issue