307 lines
13 KiB
CSS
307 lines
13 KiB
CSS
/** MUSIC
|
|
home-theme-music.html
|
|
page-music.html
|
|
********************************************* **/
|
|
.font-cinzel-decorative {
|
|
font-family: "Cinzel Decorative" !important;
|
|
}
|
|
|
|
|
|
.slider .font-cinzel-decorative {
|
|
font-size:110px;
|
|
text-shadow: 0px 2px 5px rgba(0,0,0,0.5);
|
|
}
|
|
.music-album-title {
|
|
padding: 14px 24px;
|
|
|
|
-webkit-transition: all .300s;
|
|
-moz-transition: all .300s;
|
|
-o-transition: all .300s;
|
|
transition: all .300s;
|
|
}
|
|
.music-album-title i.album-play {
|
|
width:16px;
|
|
height:16px;
|
|
}
|
|
.music-album-title i.fa {
|
|
margin-right:10px;
|
|
}
|
|
|
|
.music-album-title i.album-play.active {
|
|
display:inline-block;
|
|
background:url('../images/_smarty/playing.gif') no-repeat center;
|
|
}
|
|
.music-album-title i.album-play.active:before {
|
|
display:none;
|
|
}
|
|
|
|
|
|
.music-album-download {
|
|
margin-top:10px;
|
|
}
|
|
.music-album-download>a {
|
|
float:right;
|
|
width:25px;
|
|
height: 20px;
|
|
}
|
|
|
|
|
|
.box-gradient.box-gray {
|
|
background-color: #333;
|
|
}
|
|
|
|
|
|
/* music player */
|
|
#music-player {
|
|
color:#fff;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
height:70px;
|
|
z-index: 9999;
|
|
border-top: 1px solid #535353;
|
|
|
|
/* BG GRADIENT GENERATOR USED:
|
|
http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%2876\%2C76\%2C76\%2C1\%29\%200\%25\%2C\%20rgba\%28102\%2C102\%2C102\%2C1\%29\%200\%25\%2C\%20rgba\%2889\%2C89\%2C89\%2C1\%29\%2039\%25\%2C\%20rgba\%2871\%2C71\%2C71\%2C1\%29\%2099\%25\%2C\%20rgba\%280\%2C0\%2C0\%2C1\%29\%20100\%25\%29\%3B'
|
|
*/
|
|
background: rgba(76,76,76,1);
|
|
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(102,102,102,1) 0%, rgba(89,89,89,1) 39%, rgba(71,71,71,1) 99%, rgba(0,0,0,1) 100%);
|
|
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(39%, rgba(89,89,89,1)), color-stop(99%, rgba(71,71,71,1)), color-stop(100%, rgba(0,0,0,1)));
|
|
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(102,102,102,1) 0%, rgba(89,89,89,1) 39%, rgba(71,71,71,1) 99%, rgba(0,0,0,1) 100%);
|
|
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(102,102,102,1) 0%, rgba(89,89,89,1) 39%, rgba(71,71,71,1) 99%, rgba(0,0,0,1) 100%);
|
|
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(102,102,102,1) 0%, rgba(89,89,89,1) 39%, rgba(71,71,71,1) 99%, rgba(0,0,0,1) 100%);
|
|
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%, rgba(102,102,102,1) 0%, rgba(89,89,89,1) 39%, rgba(71,71,71,1) 99%, rgba(0,0,0,1) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#000000', GradientType=0 );
|
|
}
|
|
#music-player a {
|
|
color:#fbfbfb;
|
|
}
|
|
|
|
#music-player .music-open-float-player.music-now-playing{ background-image: url('../images/_smarty/playing-dark.gif'); background-repeat: no-repeat; background-position: center; }
|
|
#music-player .music-open-float-player.music-now-playing i{ display: none; }
|
|
#music-player .music-float-top-player.music-item{ margin-bottom: 0px; }
|
|
#music-player .music-float-top-player > .music-top-player-title,
|
|
#music-player .music-float-top-player > .music-top-player-thumbnail,
|
|
#music-player .music-float-top-player > .music-top-player-download{ display: none; }
|
|
#music-player .mejs-container { background: transparent; }
|
|
#music-player .mejs-container .mejs-controls { height: 70px; position: relative; bottom: auto; background: transparent; }
|
|
#music-player .mejs-controls .mejs-button button:focus { outline: none; }
|
|
#music-player .mejs-container .mejs-controls .music-play-control { width: 120px; height: 70px; margin-right: 30px; padding: 15px 0px; }
|
|
#music-player .mejs-container .mejs-controls .mejs-playpause-button.mejs-pause .icon-play:before{ content: "\f04c"; }
|
|
#music-player .mejs-container .mejs-controls .music-next-button{ font-size: 12px; width: 11px; height: 12px; margin-top: 5px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }
|
|
#music-player .mejs-container .mejs-controls .music-previous-button{ font-size: 12px; width: 11px; height: 12px; margin-top: 5px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }
|
|
#music-player .mejs-container .mejs-controls .mejs-playpause-button,
|
|
#music-player .mejs-container .mejs-controls .music-next-button,
|
|
#music-player .mejs-container .mejs-controls .music-previous-button{ cursor: pointer; opacity: 0.8; filter: alpha(opacity:80); transition: opacity 300ms; -moz-transition: opacity 300ms; -o-transition: opacity 300ms; -webkit-transition: opacity 300ms; background-color:#dadada; color:#3b3b3b; width:30px; height:30px; line-height:30px; text-align:center !important; padding:0; }
|
|
#music-player .mejs-container .mejs-controls .mejs-playpause-button{ font-size: 14px; width:40px; height:40px; line-height:40px; margin: 0px 8px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
|
|
#music-player .mejs-container .mejs-controls .mejs-playpause-button:hover,
|
|
#music-player .mejs-container .mejs-controls .music-next-button:hover,
|
|
#music-player .mejs-container .mejs-controls .music-previous-button:hover{ opacity: 1; filter: alpha(opacity:100); }
|
|
#music-player .mejs-container .mejs-controls .mejs-time-rail { padding: 17px 81px 18px 75px; height: 70px; position: relative; border-left:rgba(255,255,255,0.1) 1px solid; }
|
|
#music-player .mejs-controls .mejs-time-rail .mejs-time-total{ margin: 0px; }
|
|
#music-player .mejs-container .mejs-controls .music-time-elapse { width: 76px; position: absolute; right: 0px; float: none; top: 39px; }
|
|
#music-player .mejs-container .mejs-controls .music-time-elapse .mejs-time { padding: 0px; margin: 0px; display: inline; float: none; }
|
|
#music-player .mejs-container .mejs-controls .music-time-elapse span { position: relative; display: inline; float: none; margin: 0px; }
|
|
#music-player .mejs-container .mejs-controls .music-top-player-thumbnail { max-width: 35px; width: 35px; height: 35px; position: absolute; top: 17px; left: 20px; border: 1px solid #fff; overflow:hidden; }
|
|
#music-player .mejs-container .mejs-controls .music-top-player-title { font-size: 12px; height:15px; width: auto; margin-bottom: 6px; font-weight: bold; float:none; }
|
|
#music-player .mejs-controls .mejs-time-rail span.music-song-title-info { display: inline; position: relative; font-weight: normal; }
|
|
#music-player .music-top-player-download a{ opacity: 0.6; filter: alpha(opacity=60); }
|
|
#music-player .music-top-player-download a:hover{ opacity: 1; filter: alpha(opacity=100); }
|
|
#music-player .music-top-player-download i.icon-list-ul { font-size: 16px; margin-right: 20px; }
|
|
#music-player .mejs-container .mejs-controls .music-top-player-download { width: 148px; height:70px; padding: 34px 0 0 15px; font-size: 16px; line-height: 20px; border-left:rgba(255,255,255,0.1) 1px solid; border-right:rgba(255,255,255,0.1) 1px solid; }
|
|
#music-player .mejs-container .mejs-controls .music-top-player-download>a { width:20px; display:inline-block; text-align:center; }
|
|
#music-player .mejs-container .mejs-controls .music-top-player-download>.top-player-list { margin-right:30px; }
|
|
#music-player .mejs-container .mejs-controls .music-volumn-bar { float: left; width: 126px; height:70px; padding: 22px 6px; }
|
|
#music-player .mejs-controls .mejs-horizontal-volume-slider{ width: 80px; float: left; clear: none; top: auto; }
|
|
#music-player .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total{ width: 80px; background-color:#0b0b0b !important; }
|
|
#music-player .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
|
|
#music-player .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current{ top: 11px;-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; margin-left: 5px; }
|
|
#music-player .mejs-container .mejs-controls .music-hide-float-bar { height: 70px; padding-top:28px; text-align: center; width:34px; text-align:center; cursor: pointer; background: rgba(255,255,255,0.1); }
|
|
#music-player .mejs-container .mejs-controls .music-hide-float-bar i { font-size: 17px; color: #ffffff; }
|
|
#music-player .music-player-list { display:none; list-style: none; position: absolute;background: rgba(61,61,61,0.9); margin: 0px; left:165px; right:175px; }
|
|
#music-player .music-player-list li{ cursor: pointer; padding: 14px 25px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #161616; font-size:12px; }
|
|
#music-player .music-player-list li:before { content: "\f04b"; font-family: FontAwesome; color: #fff; font-size: 12px; width: 13px; height: 13px; margin-left: 3px; margin-right: 15px; display: inline-block; }
|
|
#music-player .music-player-list li.active:before{ background-image: url('../images/_smarty/playing.gif'); background-repeat: no-repeat; background-position: 95% center; content: ' '; width: 16px; margin-left: 0px; }
|
|
#music-player .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current{ background-color:#7facb7 !important; }
|
|
#music-player.position-bottom .music-player-list {
|
|
bottom: 71px;
|
|
}
|
|
#music-player.position-top .music-player-list {
|
|
top: 71px;
|
|
}
|
|
|
|
#music-player .mejs-controls .mejs-time-rail .mejs-time-total {
|
|
background:#0b0b0b;
|
|
}
|
|
#music-player .mejs-controls .mejs-time-rail .mejs-time-loaded {
|
|
background:#353535;
|
|
}
|
|
#music-player .mejs-controls .mejs-time-rail .mejs-time-current,
|
|
#music-player .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
|
|
background:transparent;
|
|
background-color: #7facb7;
|
|
}
|
|
#music-player .mejs-controls .mejs-time-rail span,
|
|
#music-player .mejs-controls .mejs-time-rail a {
|
|
-webkit-border-radius: 0;
|
|
-moz-border-radius: 0;
|
|
border-radius: 0;
|
|
}
|
|
#music-player .mejs-playpause-button>i:before {
|
|
content: "\f04b";
|
|
font-family: FontAwesome;
|
|
}
|
|
#music-player .mejs-playpause-button.mejs-pause>i:before {
|
|
content: "\f04c";
|
|
}
|
|
|
|
.music-album-thumbnail,
|
|
.music-album-list {
|
|
display:none;
|
|
}
|
|
|
|
|
|
/* playlist */
|
|
.music-album-song-list {
|
|
margin: 0px 0px 40px;
|
|
}
|
|
.music-album-song-list li {
|
|
background-color: rgba(0,0,0,0.8);
|
|
margin-bottom: 1px;
|
|
padding: 13px 22px;
|
|
line-height: 22px;
|
|
font-size:14px;
|
|
color:#eaeaea;
|
|
}
|
|
section.dark .music-album-song-list li {
|
|
background-color: rgba(0,0,0,0.2);
|
|
}
|
|
.music-album-song-list li .music-list-icon:before {
|
|
content: "\f04b";
|
|
font-family: FontAwesome;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
width: 13px;
|
|
height: 13px;
|
|
margin-left: 3px;
|
|
margin-right: 15px;
|
|
display: inline-block;
|
|
}
|
|
.music-album-song-list li.active .music-list-icon:before {
|
|
background-image: url('../images/_smarty/playing.gif');
|
|
background-repeat: no-repeat;
|
|
background-position: 95% center;
|
|
content: ' ';
|
|
width: 16px;
|
|
margin-left: 0px;
|
|
}
|
|
.music-album-song-list .music-album-song-download a {
|
|
display: inline-block;
|
|
max-width: 19px;
|
|
margin-left: 7px;
|
|
opacity: 0.6;
|
|
filter: alpha(opacity=60);
|
|
font-size:18px;
|
|
}
|
|
.music-album-song-list .music-album-song-download a:hover {
|
|
opacity: 1;
|
|
filter: alpha(opacity=1);
|
|
}
|
|
|
|
.music-album-song-download a {
|
|
color:#fff !important;
|
|
}
|
|
|
|
|
|
#music-player-open {
|
|
height: 35px;
|
|
width: 40px;
|
|
background:url('../images/_smarty/playing-dark.gif') no-repeat center;
|
|
background-color:rgba(255,255,255,0.7);
|
|
position:fixed;
|
|
right:53px;
|
|
bottom:-70px;
|
|
z-index: 1000;
|
|
opacity: 0.9;
|
|
filter: alpha(opacity=90);
|
|
|
|
-webkit-border-radius: 2px !important;
|
|
-moz-border-radius: 2px !important;
|
|
border-radius: 2px !important;
|
|
|
|
-webkit-transition: all 0.2s;
|
|
-moz-transition: all 0.2s;
|
|
-o-transition: all 0.2s;
|
|
transition: all 0.2s;
|
|
}
|
|
#music-player-open:hover {
|
|
opacity: 1;
|
|
filter: alpha(opacity=100);
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
#music-player>.container {
|
|
padding:0;
|
|
}
|
|
#music-player {
|
|
height:140px;
|
|
}
|
|
#music-player .mejs-time-rail {
|
|
position:relative;
|
|
display:block;
|
|
margin-top:70px;
|
|
}
|
|
|
|
#music-player .mejs-container .mejs-controls .music-top-player-download>.top-player-list,
|
|
#music-player .mejs-time-rail>.music-time-elapse,
|
|
#music-player .music-volumn-bar {
|
|
display:none;
|
|
}
|
|
#music-player .mejs-container .mejs-controls .music-top-player-download {
|
|
position:absolute;
|
|
top:0; right:34px;
|
|
background-color:rgba(0,0,0,0.07);
|
|
width:100px;
|
|
}
|
|
#music-player .mejs-container .mejs-controls .mejs-time-rail {
|
|
background-color:transparent;
|
|
position: absolute;
|
|
top: 70px;
|
|
left:0;
|
|
margin:0;
|
|
padding-right:0;
|
|
width:auto !important;
|
|
display:block !important;
|
|
}
|
|
#music-player-close {
|
|
position:absolute;
|
|
top:0; right:0;
|
|
}
|
|
#music-player .mejs-container .mejs-controls {
|
|
padding-left:20px;
|
|
background-color:rgba(0,0,0,0.07);
|
|
}
|
|
#music-player .mejs-controls .mejs-time-rail .mejs-time-loaded {
|
|
background:#252525;
|
|
}
|
|
#music-player-open {
|
|
right:auto;
|
|
left:6px;
|
|
}
|
|
|
|
#music-player .mejs-controls .mejs-time-rail .mejs-time-total {
|
|
width:100% !important;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 482px) {
|
|
#music-player .mejs-container .mejs-controls .mejs-time-rail {
|
|
width:auto !important;
|
|
max-width:250px !important;
|
|
}
|
|
#music-player .mejs-controls .mejs-time-rail .mejs-time-total {
|
|
width:200px !important;
|
|
}
|
|
}
|
|
|
|
|