/home/arranoyd/magicraft/wp-content/themes/massive-dynamic/lib/shortcodes/md_music/style.css
/* -------------------------------------------------
Music
----------------------------------------------------*/
.music-sc {
right: 0;
position: relative;
max-width: 1243px;
padding: 0 5px;
transform:translateX(-80px);
}
.music-sc.left-music-panel{
transform:translateX(55px);
}
.music-sc.md-align-left{margin-left: 0}
.music-sc.md-align-center{margin: 0 auto;}
.music-sc.md-align-right{margin-left:auto; margin-right: 0}
.music-sc .music-main-container {
width: 44%;
float: left;
/*margin-right: 3%;*/
margin-left: 10%;
padding-bottom: 32px;
}
.music-sc.left .music-main-container {
margin-left: 0;
}
/* track link */
.music-sc .tracks{
margin-top: 0;
}
.jp-state-playing .track-album-name {
opacity: .3;
}
.music-sc .track .link {
cursor: pointer;
left: 20px;
position: relative;
}
.music-sc .track:hover .track-name {
opacity: 0.6;
}
.music-sc .track-name {
font-size: 16px;
display: block;
transition: opacity .2s;
}
.music-sc .track-album-name {
font-size: 13px;
opacity: 0.4;
}
.music-sc .track:first-child {
border-top: 1px solid rgba(255,255,255,0.3);
}
.music-sc .track {
/* list-style: none; */
padding-bottom: 20px;
/*color: #fff;*/
padding-top: 22px;
position: relative;
font-size: 12px;
transition: all .1s;
}
.music-sc .track.music-played{
list-style: none!important;
}
.music-sc .track.music-played .icon-play {
opacity:1!important;
left:0!important;
}
li.track .music-hoverd {
width: 10px;
height: 10px;
display: block;
position: absolute;
margin: auto;
bottom: 0;
top: 0;
list-style: none;
left: -5px;
margin-top: 27px;
opacity: 0;
transition: all .4s;
}
.music-sc .image-album {
position: relative;
width: 100%;
height: 100%;
margin-bottom: 25px;
display: block;
}
.wrap-image {
display: inline-block;
width: 38%;
}
.wrap-image .btnSimulate {
width: 70px;
height: 70px;
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0;
left: 0;
}
.music-sc .image-album .image {
width: 100%;
height: 100%;
display: inline-block;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 25px;
background-position: center;
}
.music-sc .image-album .image-shadow {
width: 115%;
height: 47px;
position: absolute;
bottom: -27px;
right: -8%;
max-width: none;
z-index: -1;
}
.music-sc .image-album .disc-image {
width: 317px;
height: 317px;
display: inline-block;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 25px;
position: absolute;
background-position: center;
top: 5%;
z-index: -1;
right: 0;
transition: right 1s linear;
animation-name: rotate;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: paused;
margin-right: 24px;
}
@keyframes rotateLeft {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.music-sc .image-album .disc-image-state {
animation-play-state: running;
right: -43% !important;
}
.music-sc.left-music-panel .image-album .disc-image-state {
animation-play-state: running;
right: 43% !important;
}
.wrap-image > div {
font-weight: 300;
font-family: "Roboto";
}
.music-sc .main-album-name {
font-size: 21px;
}
.music-sc .artist {
font-size: 13px;
}
/* jPlayer */
.jp-audio {
font-size: 14px;
}
.jp-audio-stream {
width: 182px;
}
.jp-interface {
position: relative;
}
.jp-audio-stream .jp-interface {
height: 80px;
}
/* @group CONTROLS */
.music-sc .jp-controls {
position: absolute;
top: 0;
}
.music-sc .play-pause {
width: 70px;
height: 70px;
border: none;
font-size: 33px;
background-color: rgba(0, 0, 0, 0.6);
background-position: center;
border-radius: 50%;
outline: none;
color: #fff
}
.play-pause-state-remove {
animation-name: playToPause;
animation-direction: reverse;
}
.music-sc .musicBtnClicked {
font-size: 14px !important;
}
/* Progress */
.music-sc .jp-progress {
position: absolute;
top: 16px;
height: 1px;
}
.music-sc .jp-type-single .jp-progress {
width: 100%;
}
.music-sc .jp-type-playlist .jp-progress {
left: 166px;
width: 130px;
}
.music-sc .jp-seek-bar {
width: 0;
height: 100%;
cursor: pointer;
}
.music-sc .jp-seek-bar:after {
content: "";
width: 100%;
margin-top: -11px;
height: 18px;
opacity: 0.2;
display: block;
}
.music-sc .jp-play-bar {
background-color: #fff;
width: 0;
height: 4px;
top: -4px;
margin-top: -3px;
}
.music-sc .seekRefine {
width: 0 !important;
}
/* The seeking class is added/removed inside jPlayer */
.music-sc .jp-duration {
position: relative;
margin-top: -32px;
float: right;
right: 0;
transition: all .1s;
}
.music-sc .jp-audio .music-bar {
background-repeat: no-repeat;
background-size: cover;
width: 14px;
height: 11px;
margin-top: -27px;
float: right;
display: none;
}
.video.md-align-left > div:first-child{}
/* Responsive */
.col-sm-6 .music-sc {
overflow: hidden;
}
.col-sm-12 .wrap-image {
width: 350px !important;
height: 350px !important;
}
.col-sm-6 .music-sc .music-main-container {
margin-right: 5%;
margin-left: 3%;
}
.col-sm-4 .music-sc .music-main-container , .col-sm-3 .music-sc .music-main-container {
margin-left: 3%;
}
.col-sm-6 .music-sc .image-album .disc-image {
top: 6%;
margin-right: 42px;
}
/* Left Alignment */
.music-sc.left-music-panel .music-main-container {
margin-left: 0;
}
.music-sc.left-music-panel .wrap-image {
float: left;
margin-left: 10%;
}
.music-sc.right-music-panel .wrap-image{
float: right;
margin-right: 10%;
}