Created
October 1, 2014 20:05
-
-
Save awbauer/83567e4a6bd253f054d3 to your computer and use it in GitHub Desktop.
Flexi additions for Media Player
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #content .mejs-overlay-button { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 100px; | |
| height: 100px; | |
| margin: -50px 0 0 -50px; | |
| background: url(bigplay.svg) no-repeat; | |
| } | |
| #content .no-svg .mejs-overlay-button { | |
| background-image: url(bigplay.png); | |
| } | |
| #content .mejs-overlay:hover .mejs-overlay-button { | |
| background-position: 0 -100px; | |
| } | |
| #content .mejs-controls .mejs-button button { | |
| cursor: pointer; | |
| display: block; | |
| font-size: 0; | |
| line-height: 0; | |
| text-decoration: none; | |
| margin: 7px 5px; | |
| padding: 0; | |
| position: absolute; | |
| height: 16px; | |
| width: 16px; | |
| border: 0; | |
| background: transparent url(controls.svg) no-repeat; | |
| } | |
| #content .no-svg .mejs-controls .mejs-button button { | |
| background-image: url(controls.png); | |
| } | |
| #content .mejs-controls .mejs-button button:focus { | |
| outline: solid 1px yellow; | |
| } | |
| #content .mejs-controls .mejs-play button { | |
| background-position: 0 0; | |
| } | |
| #content .mejs-controls .mejs-pause button { | |
| background-position: 0 -16px; | |
| } | |
| #content .mejs-controls .mejs-stop button { | |
| background-position: -112px 0; | |
| } | |
| #content .mejs-controls .mejs-fullscreen-button button { | |
| background-position: -32px 0; | |
| } | |
| #content .mejs-controls .mejs-unfullscreen button { | |
| background-position: -32px -16px; | |
| } | |
| #content .mejs-controls .mejs-mute button { | |
| background-position: -16px -16px; | |
| } | |
| #content .mejs-controls .mejs-unmute button { | |
| background-position: -16px 0; | |
| } | |
| #content .mejs-controls .mejs-volume-button { | |
| position: relative; | |
| } | |
| #content .mejs-controls .mejs-volume-button .mejs-volume-slider { | |
| display: none; | |
| height: 115px; | |
| width: 25px; | |
| background: url(background.png); | |
| background: rgba(50, 50, 50, 0.7); | |
| -webkit-border-radius: 0; | |
| -moz-border-radius: 0; | |
| border-radius: 0; | |
| top: -115px; | |
| left: 0; | |
| z-index: 1; | |
| position: absolute; | |
| margin: 0; | |
| } | |
| #content .mejs-controls .mejs-volume-button:hover { | |
| -webkit-border-radius: 0 0 4px 4px; | |
| -moz-border-radius: 0 0 4px 4px; | |
| border-radius: 0 0 4px 4px; | |
| } | |
| #content .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total { | |
| position: absolute; | |
| left: 11px; | |
| top: 8px; | |
| width: 2px; | |
| height: 100px; | |
| background: #ddd; | |
| background: rgba(255, 255, 255, 0.5); | |
| margin: 0; | |
| } | |
| #content .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current { | |
| position: absolute; | |
| left: 11px; | |
| top: 8px; | |
| width: 2px; | |
| height: 100px; | |
| background: #ddd; | |
| background: rgba(255, 255, 255, 0.9); | |
| margin: 0; | |
| } | |
| #content .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle { | |
| position: absolute; | |
| left: 4px; | |
| top: -3px; | |
| width: 16px; | |
| height: 6px; | |
| background: #ddd; | |
| background: rgba(255, 255, 255, 0.9); | |
| cursor: N-resize; | |
| -webkit-border-radius: 1px; | |
| -moz-border-radius: 1px; | |
| border-radius: 1px; | |
| margin: 0; | |
| } | |
| #content .mejs-controls .mejs-captions-button { | |
| position: relative; | |
| } | |
| #content .mejs-controls .mejs-captions-button button { | |
| background-position: -48px 0; | |
| } | |
| #content .mejs-controls .mejs-captions-button .mejs-captions-selector { | |
| visibility: hidden; | |
| position: absolute; | |
| bottom: 26px; | |
| right: -10px; | |
| width: 130px; | |
| height: 100px; | |
| background: url(background.png); | |
| background: rgba(50, 50, 50, 0.7); | |
| border: solid 1px transparent; | |
| padding: 10px; | |
| overflow: hidden; | |
| -webkit-border-radius: 0; | |
| -moz-border-radius: 0; | |
| border-radius: 0; | |
| } | |
| #content .mejs-controls .mejs-captions-button .mejs-captions-selector ul { | |
| margin: 0; | |
| padding: 0; | |
| display: block; | |
| list-style-type: none!important; | |
| overflow: hidden; | |
| } | |
| #content .mejs-controls .mejs-captions-button .mejs-captions-selector ul li { | |
| margin: 0 0 6px 0; | |
| padding: 0; | |
| list-style-type: none!important; | |
| display: block; | |
| color: #fff; | |
| overflow: hidden; | |
| } | |
| #content .mejs-controls .mejs-captions-button .mejs-captions-selector ul li input { | |
| clear: both; | |
| float: left; | |
| margin: 3px 3px 0 5px; | |
| } | |
| #content .mejs-controls .mejs-captions-button .mejs-captions-selector ul li label { | |
| width: 100px; | |
| float: left; | |
| padding: 4px 0 0 0; | |
| line-height: 15px; | |
| font-family: helvetica,arial; | |
| font-size: 10px; | |
| } | |
| #content .mejs-controls .mejs-captions-button .mejs-captions-translations { | |
| font-size: 10px; | |
| margin: 0 0 5px 0; | |
| } | |
| #content .mejs-controls .mejs-loop-off button { | |
| background-position: -64px -16px; | |
| } | |
| #content .mejs-controls .mejs-loop-on button { | |
| background-position: -64px 0; | |
| } | |
| #content .mejs-controls .mejs-backlight-off button { | |
| background-position: -80px -16px; | |
| } | |
| #content .mejs-controls .mejs-backlight-on button { | |
| background-position: -80px 0; | |
| } | |
| #content .mejs-controls .mejs-picturecontrols-button { | |
| background-position: -96px 0; | |
| } | |
| #content .mejs-controls .mejs-sourcechooser-button { | |
| position: relative; | |
| } | |
| #content .mejs-controls .mejs-sourcechooser-button button { | |
| background-position: -128px 0; | |
| } | |
| #content .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector { | |
| visibility: hidden; | |
| position: absolute; | |
| bottom: 26px; | |
| right: -10px; | |
| width: 130px; | |
| height: 100px; | |
| background: url(background.png); | |
| background: rgba(50, 50, 50, 0.7); | |
| border: solid 1px transparent; | |
| padding: 10px; | |
| overflow: hidden; | |
| -webkit-border-radius: 0; | |
| -moz-border-radius: 0; | |
| border-radius: 0; | |
| } | |
| #content .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul { | |
| margin: 0; | |
| padding: 0; | |
| display: block; | |
| list-style-type: none!important; | |
| overflow: hidden; | |
| } | |
| #content .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li { | |
| margin: 0 0 6px 0; | |
| padding: 0; | |
| list-style-type: none!important; | |
| display: block; | |
| color: #fff; | |
| overflow: hidden; | |
| } | |
| #content .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input { | |
| clear: both; | |
| float: left; | |
| margin: 3px 3px 0 5px; | |
| } | |
| #content .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label { | |
| width: 100px; | |
| float: left; | |
| padding: 4px 0 0 0; | |
| line-height: 15px; | |
| font-family: helvetica,arial; | |
| font-size: 10px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #content .mejs-overlay-button{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 0 -50px;background:url(bigplay.svg) no-repeat}#content .no-svg .mejs-overlay-button{background-image:url(bigplay.png)}#content .mejs-overlay:hover .mejs-overlay-button{background-position:0 -100px}#content .mejs-controls .mejs-button button{cursor:pointer;display:block;font-size:0;line-height:0;text-decoration:none;margin:7px 5px;padding:0;position:absolute;height:16px;width:16px;border:0;background:url(controls.svg) no-repeat}#content .no-svg .mejs-controls .mejs-button button{background-image:url(controls.png)}#content .mejs-controls .mejs-button button:focus{outline:#ff0 solid 1px}#content .mejs-controls .mejs-play button{background-position:0 0}#content .mejs-controls .mejs-pause button{background-position:0 -16px}#content .mejs-controls .mejs-stop button{background-position:-112px 0}#content .mejs-controls .mejs-fullscreen-button button{background-position:-32px 0}#content .mejs-controls .mejs-unfullscreen button{background-position:-32px -16px}#content .mejs-controls .mejs-mute button{background-position:-16px -16px}#content .mejs-controls .mejs-unmute button{background-position:-16px 0}#content .mejs-controls .mejs-volume-button{position:relative}#content .mejs-controls .mejs-volume-button .mejs-volume-slider{display:none;height:115px;width:25px;background:url(background.png);background:rgba(50,50,50,.7);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:-115px;left:0;z-index:1;position:absolute;margin:0}#content .mejs-controls .mejs-volume-button:hover{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}#content .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255,255,255,.5);margin:0}#content .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255,255,255,.9);margin:0}#content .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle{position:absolute;left:4px;top:-3px;width:16px;height:6px;background:#ddd;background:rgba(255,255,255,.9);cursor:N-resize;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;margin:0}#content .mejs-controls .mejs-captions-button{position:relative}#content .mejs-controls .mejs-captions-button button{background-position:-48px 0}#content .mejs-controls .mejs-captions-button .mejs-captions-selector{visibility:hidden;position:absolute;bottom:26px;right:-10px;width:130px;height:100px;background:url(background.png);background:rgba(50,50,50,.7);border:1px solid transparent;padding:10px;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}#content .mejs-controls .mejs-captions-button .mejs-captions-selector ul{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}#content .mejs-controls .mejs-captions-button .mejs-captions-selector ul li{margin:0 0 6px;padding:0;list-style-type:none!important;display:block;color:#fff;overflow:hidden}#content .mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px}#content .mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{width:100px;float:left;padding:4px 0 0;line-height:15px;font-family:helvetica,arial;font-size:10px}#content .mejs-controls .mejs-captions-button .mejs-captions-translations{font-size:10px;margin:0 0 5px}#content .mejs-controls .mejs-loop-off button{background-position:-64px -16px}#content .mejs-controls .mejs-loop-on button{background-position:-64px 0}#content .mejs-controls .mejs-backlight-off button{background-position:-80px -16px}#content .mejs-controls .mejs-backlight-on button{background-position:-80px 0}#content .mejs-controls .mejs-picturecontrols-button{background-position:-96px 0}#content .mejs-controls .mejs-sourcechooser-button{position:relative}#content .mejs-controls .mejs-sourcechooser-button button{background-position:-128px 0}#content .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector{visibility:hidden;position:absolute;bottom:26px;right:-10px;width:130px;height:100px;background:url(background.png);background:rgba(50,50,50,.7);border:1px solid transparent;padding:10px;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}#content .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}#content .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li{margin:0 0 6px;padding:0;list-style-type:none!important;display:block;color:#fff;overflow:hidden}#content .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px}#content .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label{width:100px;float:left;padding:4px 0 0;line-height:15px;font-family:helvetica,arial;font-size:10px} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment