6c48395868
in dev mode always pull manifest on each request add manifest build to gulp build task add react bundle to manifest generation
98 lines
1.6 KiB
CSS
98 lines
1.6 KiB
CSS
.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);
|
|
}
|
|
}
|