diff --git a/public/css/lib/Vimeo.css b/public/css/lib/Vimeo.css new file mode 100644 index 00000000000..1bdb4b99bdc --- /dev/null +++ b/public/css/lib/Vimeo.css @@ -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); + } +} diff --git a/server/views/layout-react.jade b/server/views/layout-react.jade index 07a318ab6ff..ae5ca9890cd 100644 --- a/server/views/layout-react.jade +++ b/server/views/layout-react.jade @@ -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 diff --git a/server/views/partials/small-head.jade b/server/views/partials/small-head.jade index 36b7c88c869..552b9d815b3 100644 --- a/server/views/partials/small-head.jade +++ b/server/views/partials/small-head.jade @@ -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