.ascribe-media-player { margin-bottom: 1em; video, img { display: block; height: auto; margin: 0 auto; max-height: 640px; max-width: 100%; width: auto; } .media-other { color: #cccccc; font-size: 500%; } .audiojs { background-image: none; margin: 50px auto; * { box-sizing: content-box; } .loaded { background-color: $ascribe-color-green; background-image: none; } .progress { background-color: rgba(255, 255, 255, .8); background-image: none; } } .video-js, .vjs-poster { background-color: transparent; } .video-js .vjs-tech { position: relative; } .vjs-fullscreen { padding-top: 0; video { max-height: 100%; } } .vjs-default-skin .vjs-play-progress, .vjs-default-skin .vjs-volume-level { background: $ascribe-color-green; } .vjs-default-skin .vjs-big-play-button { background-color: rgba(0, 0, 0, .8); border: 0; -moz-border-radius: 6px; -o-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; height: 60px; left: 50%; margin: -30px -50px; top: 50%; width: 100px; } .vjs-default-skin:hover .vjs-big-play-button, .vjs-default-skin .vjs-big-play-button:focus { background-color: rgba(0, 0, 0, .9); border-color: #fff; -moz-box-shadow: none; -o-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-transition: all 0s; -o-transition: all 0s; -webkit-transition: all 0s; transition: all 0s; } .vjs-default-skin .vjs-big-play-button:before { line-height: 60px; } .vjs-default-skin .vjs-slider-handle:before, .vjs-default-skin .vjs-big-play-button:before { text-shadow: none; } .vjs-default-skin .vjs-volume-bar { height: .5em; } .vjs-default-skin .vjs-control-bar { background-color: rgba(0, 0, 0, .7); } }