@font-face { font-family: 'Guifx v2 Transports'; font-style: normal; font-weight: 400; src: url('Guifx_v2_Transports.woff') format('woff'); } .mejs-ted .mejs-controls { background: #eee; height: 65px } .mejs-ted .mejs-button,.mejs-ted .mejs-time { position: absolute; background: #ddd } .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-loaded,.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-total { background: url(controls-ted.png) 0 -52px repeat-x; height: 6px } .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-buffering { height: 6px } .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-loaded { width: 0 } .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; height: 6px; background: url(controls-ted.png) 0 -59px repeat-x } .mejs-ted .mejs-controls .mejs-time-rail .mejs-time-handle { display: block; margin: 0; width: 14px; height: 21px; top: -7px; border: 0; background: url(controls-ted.png) no-repeat } .mejs-ted .mejs-controls .mejs-captions-button,.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-float,.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-handle { display: none } .mejs-ted .mejs-controls .mejs-playpause-button { top: 29px; left: 9px; width: 49px; height: 28px } .mejs-ted .mejs-controls .mejs-playpause-button button { width: 49px; height: 28px; background: url(controls-ted.png) -50px -23px no-repeat; margin: 0; padding: 0 } .mejs-ted .mejs-controls .mejs-pause button { background-position: 0 -23px } .mejs-ted .mejs-controls .mejs-fullscreen-button { top: 34px; right: 9px; width: 17px; height: 15px; background: 0 0 } .mejs-ted .mejs-controls .mejs-fullscreen-button button { width: 19px; height: 17px; background: url(controls-ted.png) 0 -66px no-repeat; margin: 0; padding: 0 } .mejs-ted .mejs-controls .mejs-unfullscreen button { background: url(controls-ted.png) -21px -66px no-repeat; margin: 0; padding: 0 } .mejs-ted .mejs-controls .mejs-volume-button { top: 30px; right: 35px; width: 24px; height: 22px } .mejs-ted .mejs-controls .mejs-mute button { background: url(controls-ted.png) -15px 0 no-repeat; width: 24px; height: 22px; margin: 0; padding: 0 } .mejs-ted .mejs-controls .mejs-unmute button { background: url(controls-ted.png) -40px 0 no-repeat; width: 24px; height: 22px; margin: 0; padding: 0 } .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-slider { background: #fff; border: 1px solid #aaa; border-width: 1px 1px 0; width: 22px; height: 65px; top: -65px } .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-total { background: url(controls-ted.png) -41px -66px repeat-y; left: 8px; width: 6px; height: 50px } .mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-current { left: 8px; width: 6px; background: url(controls-ted.png) -48px -66px repeat-y; height: 50px } .mejs-ted .mejs-controls .mejs-time span { color: #333 } .mejs-ted .mejs-controls .mejs-currenttime-container { position: absolute; top: 32px; right: 100px; border: 1px solid #999; background: #fff; padding-top: 2px; border-radius: 3px; color: #333 } .mejs-ted .mejs-controls .mejs-duration-container { position: absolute; top: 32px; right: 65px; border: 1px solid #999; background: #fff; padding-top: 2px; border-radius: 3px; color: #333 } .mejs-ted .mejs-controls .mejs-time button { color: #333 } .mejs-wmp .mejs-controls { background: transparent; height: 65px } .mejs-wmp .mejs-controls::before{ height: 30px; content:" "; width: 200px; display:inline-block; position:absolute; background:#1111119e; left:50%; top:24px; transform:translateX(-50%); border-radius:50px } .mejs-wmp .mejs-button,.mejs-wmp .mejs-time { position: absolute; background: 0 0 } .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-total { background-color: transparent; border: 1px solid #ccc; height: 3px } .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-buffering { height: 3px } .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-loaded { background-color: rgba(255,255,255,.3); width: 0; height: 3px } .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; height: 1px; background-color: #014CB6; border: 1px solid #7FC9FA; border-width: 1px 0; border-color: #7FC9FA #fff #619FF2 } .mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-handle { display: block; margin: 0; width: 16px; height: 9px; top: -4px; background: rgb(128,181,234); background: linear-gradient(180deg, rgba(128,181,234,1) 0%, rgba(2,111,226,1) 42%, rgba(98,213,252,1) 100%); border-radius:3px; border:1px solid; box-sizing:border-box; } .mejs-wmp .mejs-controls .mejs-captions-button,.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-float { display: none } .mejs-wmp .mejs-controls .mejs-playpause-button { top: 10px; left: 50%; margin: 10px 0 0 -20px; width: 40px; height: 40px } .mejs-wmp .mejs-controls .mejs-playpause-button button { width: 36px; height: 36px; margin: 0; padding: 0; left:2px; top:2px; background: rgb(128,181,234); background: linear-gradient(180deg, rgba(128,181,234,1) 0%, rgba(5,56,110,1) 45%, rgba(98,213,252,1) 100%); border-radius: 50px; border:2px solid #545856; outline:2px solid #8987879e; -webkit-box-shadow: inset 0px 2px 5px 0px rgba(99,214,252,1); -moz-box-shadow: inset 0px 2px 5px 0px rgba(99,214,252,1); box-shadow: inset 0px 2px 5px 0px rgba(99,214,252,1); outline-offset:0 !important; box-sizing:border-box; position:relative; } .mejs-wmp .mejs-controls .mejs-pause button {} .mejs-wmp .mejs-controls .mejs-playpause-button button::before { display: inline-block; content: "1"; font-family: "Guifx v2 Transports"; width: 36px; height: 36px; text-align: center; line-height: 36px; color: white; font-size: 22px; position: absolute; left: -2px; top: -2px; text-shadow: 1px 1px 2px rgb(5 56 110); opacity:0.9; font-weight:normal !important; } .mejs-wmp .mejs-controls .mejs-pause button::before { content: "2"; } .mejs-wmp .mejs-controls .mejs-currenttime-container { position: absolute; top: 25px; left: 50%; margin-left: -93px } .mejs-wmp .mejs-controls .mejs-duration-container { position: absolute; top: 25px; left: 50%; margin-left: -58px } .mejs-wmp .mejs-controls .mejs-volume-button { top: 32px; right: 50%; margin-right: -55px; width: 20px; height: 15px } .mejs-wmp .mejs-controls .mejs-volume-button button { margin: 0; padding: 0; width: 20px; height: 15px; background: transparent !important; } .mejs-wmp .mejs-controls .mejs-volume-button button::before{ content: "$"; font-family: 'Guifx v2 Transports'; font-size: 14px; position: absolute; left: 0; top: 0; line-height: 15px; color: white; text-shadow: 1px 1px 1px #333333; font-weight:normal !important; } .mejs-wmp .mejs-controls .mejs-volume-button.mejs-unmute button::before{ content: "!"; } .mejs-wmp .mejs-controls .mejs-unmute button { margin: 0; padding: 0; background: url(controls-wmp.png) -42px 0 no-repeat; width: 20px; height: 15px } .mejs-wmp .mejs-controls .mejs-volume-button .mejs-volume-slider { background: rgba(102,102,102,.6) } .mejs-wmp .mejs-controls .mejs-fullscreen-button { top: 32px; right: 50%; margin-right: -82px; width: 15px; height: 14px } .mejs-wmp .mejs-controls .mejs-fullscreen-button button { margin: 0; padding: 0; background: url(controls-wmp.png) -63px 0 no-repeat; width: 15px; height: 14px }