Created
April 8, 2017 15:39
-
-
Save jasonhobbsllc/0936128f0ad994d51178b2c3d14e9873 to your computer and use it in GitHub Desktop.
Copy and paste of player css from inspecting the player on my site, where I use the Sixteen - Nine Pro theme. (just fyi)
This file contains hidden or 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
/* Podcast player */ | |
.site-container .rm-player { | |
font-family: Helvetica, sans-serif; | |
margin-bottom: 25px; | |
margin-top: 25px; | |
} | |
.site-container .rm-player .audio-title { | |
color: #333; | |
font-size: 22px; | |
margin-bottom: 10px; | |
line-height: 1.35; | |
overflow: hidden; | |
} | |
.site-container .rm-player .audio-title small { | |
color: #aaa; | |
display: block; | |
font-size: 11px; | |
font-weight: bold; | |
letter-spacing: 2px; | |
margin-bottom: 5px; | |
margin-top: 7px; | |
text-transform: uppercase; | |
} | |
.site-container .rm-player .rm-player-image { | |
float: left; | |
height: 100px; | |
clear: both; | |
margin: 0 20px 0 0; | |
padding: 0; | |
line-height: 0; | |
width: 100px; | |
} | |
.site-container .rm-player .rm-player-image img { | |
height: auto; | |
max-width: 100%; | |
} | |
.site-container .rm-player .rm-player-controls { | |
display: block; | |
position: relative; | |
} | |
.site-container .rm-player button { | |
box-shadow: none; | |
margin: 0; | |
text-shadow: none; | |
} | |
.site-container .rm-player .share-button { | |
background: #f5f5f5; | |
border-radius: 0px; | |
border: none; | |
bottom: 0; | |
color: #aaa; | |
font-family: Helvetica, sans-serif; | |
font-size: 12px; | |
font-weight: normal; | |
height: 50px; | |
outline: none; | |
line-height: 1; | |
letter-spacing: 0; | |
padding: 0; | |
position: absolute; | |
right: 0px; | |
text-align: center; | |
text-transform: lowercase; | |
width: 9.5%; | |
} | |
.site-container .rm-player .share-button:before { | |
content: "\f242"; | |
color: #333; | |
display: block; | |
font-family: "dashicons"; | |
font-size: 24px; | |
font-weight: normal; | |
margin-bottom: 2px; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.site-container .rm-player .share-button:hover { | |
background: #eee; | |
} | |
.site-container .rm-player .share-button.opened:before { | |
content: "\f335"; | |
} | |
.site-container .rm-player .audio-share { | |
background: #f5f5f5; | |
border-bottom: 2px solid #fff; | |
bottom: 50px; | |
display: none; | |
padding: 10px 20px; | |
position: absolute; | |
right: 0px; | |
width: 100%; | |
z-index: 9999; | |
} | |
.site-container .rm-player .audio-share ul, | |
.site-container .rm-player .audio-share ul li { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
.site-container .rm-player .audio-share ul li { | |
display: block; | |
border-bottom: 1px solid #ddd; | |
vertical-align: middle; | |
padding: 10px 0; | |
} | |
.site-container .rm-player .audio-share ul li:last-child { | |
border-bottom: none; | |
} | |
.site-container .rm-player .audio-share ul li span { | |
color: #aaa; | |
display: inline-block; | |
font-size: 12px; | |
font-weight: bold; | |
letter-spacing: 2px; | |
text-transform: uppercase; | |
width: 15%; | |
} | |
.site-container .rm-player .audio-share ul li input[type=text] { | |
cursor: text; | |
padding: 5px; | |
margin: 0 5% 0 0; | |
width: 75%; | |
} | |
.site-container .rm-player .audio-share .share-player-share { | |
display: inline-block; | |
height: 22px; | |
margin: 0 5px; | |
padding: 0; | |
position: relative; | |
top: 5px; | |
width: 75%; | |
} | |
.site-container .rm-podcast footer { | |
margin-bottom: 25px; | |
} | |
.site-container .mejs-container { | |
background: none; | |
min-height: 50px; | |
margin-bottom: 0; | |
} | |
.site-container .rm-player-controls > .mejs-container { | |
overflow: hidden; | |
width: 90% !important; | |
} | |
.site-container .mejs-container .mejs-controls, | |
.site-container .mejs-container .mejs-inner { | |
overflow: hidden; | |
width: 100%; | |
} | |
.site-container .mejs-container .mejs-controls { | |
background: #f5f5f5; | |
color: #333; | |
height: 50px !important; | |
} | |
.site-container .mejs-container .mejs-controls .mejs-play, | |
.site-container .mejs-container .mejs-controls .mejs-pause, | |
.site-container .mejs-controls .mejs-volume-button { | |
border: none !important; | |
height: 50px; | |
width: 45px; | |
} | |
.site-container .mejs-controls .mejs-volume-button, | |
.site-container .mejs-controls .mejs-fullscreen-button{ | |
width: 30px; | |
} | |
.site-container .mejs-container .mejs-controls .mejs-play button, | |
.site-container .mejs-container .mejs-controls .mejs-pause button, | |
.site-container .mejs-controls .mejs-volume-button button, | |
.site-container .mejs-controls .mejs-fullscreen-button button { | |
background-image: url(../images/player-icons.png); | |
background-position: 0px 0px; | |
background-size: 130px 71px; | |
border: none !important; | |
margin: 8px; | |
height: 34px; | |
opacity: 0.7; | |
width: 34px; | |
box-shadow: none; | |
-moz-box-shadow: none; | |
-webkit-box-shadow: none; | |
-webkit-transition: opacity 0.5s ease-in-out; | |
-moz-transition: opacity 0.5s ease-in-out; | |
-ms-transition: opacity 0.5s ease-in-out; | |
-o-transition: opacity 0.5s ease-in-out; | |
transition: opacity 0.5s ease-in-out; | |
} | |
.site-container .mejs-container .mejs-controls .mejs-pause button { | |
background-position: -37px 0px; | |
} | |
.site-container .mejs-controls .mejs-volume-button button { | |
background-position: -71px 0px; | |
height: 30px; | |
margin: 9px 2px; | |
width: 28px; | |
} | |
.site-container .mejs-controls .mejs-fullscreen-button button { | |
background-position: -100px 0px; | |
height: 30px; | |
margin: 9px 0px; | |
width: 28px; | |
} | |
.site-container .mejs-container .mejs-controls .mejs-play button:hover, | |
.site-container .mejs-container .mejs-controls .mejs-pause button:hover, | |
.site-container .mejs-controls .mejs-volume-button button:hover, | |
.site-container .mejs-controls .mejs-fullscreen-button button:hover { | |
opacity: 1; | |
} | |
.site-container .mejs-controls .mejs-volume-button.mejs-unmute button { | |
opacity: 0.3; | |
} | |
.site-container .mejs-controls .mejs-button button:focus { | |
outline: none !important; | |
} | |
.site-container .mejs-container .mejs-controls .mejs-time { | |
height: 50px; | |
line-height: 50px; | |
padding: 0; | |
text-align: center; | |
width: 60px; | |
} | |
.site-container .mejs-container .mejs-controls .mejs-time span { | |
color: #aaa; | |
float: none; | |
font-size: 13px; | |
line-height: 53px; | |
margin-right: 0; | |
text-align: center; | |
} | |
.site-container .mejs-controls div.mejs-time-rail { | |
height: 50px; | |
padding: 0; | |
} | |
.site-container .mejs-controls .mejs-time-rail .mejs-time-total, | |
.site-container .mejs-controls .mejs-time-rail .mejs-time-loaded, | |
.site-container .mejs-controls .mejs-time-rail .mejs-time-current, | |
.site-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, | |
.site-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { | |
border-radius: 10px; | |
height: 7px; | |
} | |
.site-container .mejs-controls .mejs-time-rail .mejs-time-total { | |
background: #ccc; | |
margin-top: 23px; | |
line-height: 50px; | |
} | |
.site-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { | |
background: #ccc; | |
margin-top: 12px; | |
} | |
.site-container .mejs-controls div.mejs-horizontal-volume-slider { | |
height: 50px; | |
overflow: hidden; | |
} | |
.site-container .mejs-controls .mejs-time-rail .mejs-time-loaded { | |
background: #fff; | |
} | |
.site-container .mejs-controls .mejs-time-rail .mejs-time-current { | |
background: #333; | |
position: relative; | |
-webkit-transition: all 0.5s ease-in-out; | |
-moz-transition: all 0.5s ease-in-out; | |
-ms-transition: all 0.5s ease-in-out; | |
-o-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
.site-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { | |
background: #333; | |
margin-top: 12px; | |
} | |
.site-container .mejs-controls .mejs-time-rail .mejs-time-current:after { | |
background: #333; | |
border-radius: 50%; | |
display: block; | |
content: ""; | |
position: absolute; | |
right: -8px; | |
top: -2px; | |
height: 11px; | |
width: 11px; | |
z-index: 999; | |
} | |
.site-container .mejs-controls .mejs-time-rail .mejs-time-float { | |
background: none; | |
border: none; | |
color: #aaa; | |
top: -35px; | |
} | |
.site-container .mejs-controls .mejs-time-rail .mejs-time-float-current { | |
margin: 0; | |
} | |
.site-container .mejs-controls .mejs-time-rail .mejs-time-float-corner { | |
display: none; | |
} | |
.rm-podcast .buttons { | |
margin-bottom: 30px; | |
} | |
.rm-podcast .buttons .button { | |
margin-right: 10px; | |
} | |
.rm-podcast .buttons .button span { | |
font-size: 16px; | |
margin-right: 15px; | |
line-height: 1.5; | |
} | |
.sidebar .rm-player .rm-player-image, | |
.sidebar .rm-player .mejs-container .mejs-time-rail, | |
.sidebar .rm-player .mejs-container .mejs-duration-container { | |
display: none; | |
} | |
.sidebar .rm-player-controls > .mejs-container { | |
width: 75% !important; | |
} | |
.sidebar .rm-player .share-button { | |
width: 25% !important; | |
} | |
.sidebar .rm-player .audio-share ul li span, | |
.sidebar .rm-player .audio-share ul li input[type=text], | |
.sidebar .rm-player .audio-share .share-player-share { | |
float: none; | |
width: 100%; | |
} | |
.site-container .rm-player .audio-share { | |
padding: 0; | |
} | |
.site-container .rm-player .audio-share ul li { | |
padding: 5px 10px; | |
} | |
.site-container .rm-player .audio-share ul li span { | |
font-size: 10px; | |
width: 17%; | |
} | |
.site-container .rm-player .audio-share ul li input[type=text] { | |
margin: 0; | |
width: 60%; | |
} | |
.podcast-player-embed .site-container .rm-player .audio-title { | |
min-height: 90px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment