Icontem

File: mcplayer.css

Recommend this page to a friend!
  Classes of Axel Hahn  >  AMC JavaScript Audio Player HTML5  >  mcplayer.css  >  Download  
File: mcplayer.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: AMC JavaScript Audio Player HTML5
DIsplay an audio player with surround support
Author: By
Last change:
Date: 8 months ago
Size: 19,240 bytes
 

Contents

Class file image Download
/*

    amc player DEFAULT CSS

    If you want to make changes create a new css file in the skins subdirectory
    and override the defaults.

    @author: Axel Hahn

*/

    @charset "UTF-8";
    @font-face {
        font-family: 'mcplayer_icons';
        font-style: normal;
        font-weight: normal; 
        src: url('./mcplayer_icons.ttf') format('truetype');
    }

    #mcphud, #mcpwrapper, #mcpmaximize, #mcpplaylist, #mcpabout, #mcpdownloads
    {
        box-shadow: 0 0 20px #333;
        z-index: 20000;
    }

/* ============================================================

    player

============================================================ */

    #mcpwrapper{
        background:#f0f0f0;
        background: linear-gradient(to bottom, #ddd, #fff, #ddd);
        border: 1px solid rgba(0,0,0,0.3);
        border-radius: 3px /*10px 0 0*/;
        bottom: 20px;
        color: rgba(0,0,0,0.6);
        left: 100px;
        opacity: 1;
        padding: 5px 5px 0 5px;
        position: fixed;
        transition: all 0.25s ease-out;
        width: 570px;
    }
    #mcpwrapper audio{
        display: none;
    }
    #mcplayer{
        border: 0px solid;
        clear: both;
        float: left;
        margin-top: 5px;
        width: 100%;
    }

    /* player buttons */
    #mcplayer a{
        background: linear-gradient(to bottom, #eee, #fff, #ddd);
        border-radius: 5px;
        border: 1px solid rgba(0,0,0,0.1);
        box-sizing: content-box;
        color:#56a;
        float: left;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 2px 4px;
        text-align: center;
        text-decoration: none;
        transition: all 0.2s ease-out;
        width: 20px;
    }
    #mcplayer a:hover{
        background: linear-gradient(to bottom, #ccc, #eee, #ccc);
    }

    #mcplayer #mcpplayerbtndiv>a,
    #mcplayer #mcpoptions>a{
        font-family: mcplayer_icons;
    }

    #mcpplayersonginfo{
        display:block;
    }
    #mcpplayersonginfo>div{
        background: rgba(0,0,0,0.05);
        border-bottom: 1px solid #fff;
        margin-bottom: 0.5em;
        padding: 0.5em;
    }
    #mcpplayersonginfo img{
        float: right;
        border: 1px solid rgba(0,0,0,0.5);
        box-shadow: 0 0 2em #888;
        height: 200px;
        max-height: 200px;
    }
    #mcpabout .title, 
    #mcpplayersonginfo .title{
        color:#56a;
        font-size: 200%;
        font-weight: bold;
        text-shadow: 1px 1px 0 #fff;
    }
    #mcpplayersonginfo .artist{}
    #mcpplayersonginfo .artist{}
    #mcpplayersonginfo .album{}
    #mcpplayersonginfo .year{font-size: 90%; }
    #mcpplayersonginfo .bpm{
        font-size: 90%; 
        margin-top: 1em;
    }
    #mcpplayersonginfo .genre{font-size: 90%;}
    #mcpplayersonginfo .url{
        font-size: 90%; 
        margin-top: 1em;
    }
    #mcpplayersonginfo .url a{
        background: none; 
        border: none; 
        font-style: italic; 
        float: none; 
        width: auto;
    }

/* ---------------------------------------------------------
    bars for volume and progress
--------------------------------------------------------- */

    #mcpvolumecanvas,
    #mcpprogresscanvas{
        background: linear-gradient(to bottom, #bce,#def,#bce);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 5px;
        color: #ffffff;
        cursor:pointer;
        display: block;
    }
    #mcpprogressdiv{ 
        left: 260px;
        position: absolute;
    }
    #mcpprogresscanvas{
        height: 1.5em;
        margin-top: 0;
        width: 210px;
    }

    #mcpvolumediv{
        clear: left; 
        float: left;
    }
    #mcpvolumediv a{
        float: left; 
        font-family: mcplayer_icons;
    }
    #mcpvolumecanvas{
        float: left;
        height: 1.0em;
        margin-right: 5px;
        margin-top: 3px;
        width: 100px;
    }
    #mcpprogressbar{
        background: rgba(255,255,255,0.3);
        display: none;
        height: 10px;
        width: 10px; 
    }

/* ---------------------------------------------------------
    additional buttons for channels, options, dialogs
--------------------------------------------------------- */

    #mcpchannels{
        float: left; 
        margin-left: 80px;
    }
    #mcpchannels ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #mcpchannels ul li{
        float: left;
        margin: 0 4px 0 0;
        padding: 0;
    }
    #mcpchannels a{
        padding: 2px;font-size: 90%;    
    }
    #mcpoptions{
        border: 0px solid rgba(0,0,0,0.1);
        float: right; 
    }

/* ---------------------------------------------------------
    status: current audio position, network and play status
--------------------------------------------------------- */

    #mcptime{
        position: absolute; 
        right: 10px; 
    }
    #mcpstatusbar{
        clear: left; 
        border-top: 1px solid #fff; 
        display: none;
    }
    #mcpstatusbar.active{display: block;}
    #mcpstatusbar div{
        float: left;
        width: 49%; 
    }

    /* nothing */   #mcpstatusbar .networkstate0{color: rgba(0,0,0,0.5);}
    /* idle */      #mcpstatusbar .networkstate1{color: rgba(0,0,0,0.5);}
    /* loading */   #mcpstatusbar .networkstate2{color:#060;}
    /* no source*/  #mcpstatusbar .networkstate3{background:#600; color: #fcc;}

/* ---------------------------------------------------------
    system buttons on top right + maximize on the bottom
--------------------------------------------------------- */

    .mcpsystembutton{
        border-radius: 5px;
        float: right; 
        margin-top: -15px;
    }
    .mcpsystembutton a{
        color:#89a !important;
        text-decoration: none; 
    }
    .mcpsystembutton a:hover{text-decoration: none;}

    #mcpmaximize{
        border-radius: 10px 10px 0 0 ;
        bottom: 0px;
        opacity: 1;
        position: fixed;
        right: 45%; 
        text-decoration: none;
        transition: all 0.5s ease-out;
    }
    #mcpmaximize.hidebutton{
        bottom: -30px;
        opacity: 0;
    }
    #mcpmaximize, .mcpsystembutton{
        background: rgb(255,197,120); /* Old browsers */
        background: radial-gradient(circle at center, rgba(255,220,180,1) 0%,rgba(251,157,35,1) 100%); /* W3C */
        border: 1px solid #fff;    
        padding: 0px 5px; 
    }

/* ============================================================

    boxes

============================================================ */

    #mcpabout a, #mcpdownloads a, #mcpplaylist a{color: #08c;}
    #mcpabout .amclogo{
        background-image: url("data:image/png;base64,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");
        height: 100px;
        float: left; 
        margin: 1em;
        width: 200px; 
    }
    #mcplayer .active a,
    #mcplayer a.active,
    #mcpplaylist li.active a{
        background: rgb(195,217,255); /* Old browsers */
        background: linear-gradient(to bottom, #9cf, #56a, #9cf);
        color:#fff; 
    }
    #mcplayer a.active{
        color:#fc6;
    }
    
    #mcpabout,
    #mcpdownloads,
    #mcpplaylist{
        background:#f0f0f0;
        background: linear-gradient(to bottom,#ddd,#fff,#ddd);
        border-radius: 3px;
        border: 1px solid rgba(0,0,0,0.3);
        color: rgba(0,0,0,0.6);
        opacity: 1;
        padding: 5px;
        position: fixed;
        top: 70px;
        transition: all 0.25s ease-out;
        width: 300px;
    }
    #mcpabout{
        left: 10%; 
        right: auto;
        width: 40em; 
    }
    #mcpplaylist{right: 10px;}
    #mcpdownloads{right: 370px;}

    #mcpdownloads ul,
    #mcpplaylist ul{
        background:rgba(255,255,255,0.5);
        border: 2px solid rgba(0,0,0,0.1);
        border-radius: 0 0 2px 2px;
        list-style: none;
        margin: 0px;
        max-height: 400px;
        overflow: auto; 
        padding: 5px;
    }
    #mcpplaylist li{}
    #mcpplaylist li a{
        background: none;
        border: 0px;
        display: block;
        margin: 0;
        padding: 0 5px;
        text-decoration: none;
    }
    #mcpplaylist li a:hover{
        background: rgba(0,0,0,0.05);
    }

    #mcpdownloads ul ul{border: none;}
    #mcpdownloads ul ul li{margin-left: 20px;}

/* ---------------------------------------------------------
    title bars
--------------------------------------------------------- */

    .mcpbox{
        background: linear-gradient(to bottom, #9be, #56a, #9cf);
        border-radius: 2px 2px 0 0 ;
        clear: both;
        color: #eee;
        margin: 0;
        padding: 0px 5px;
        text-align: left;
        text-shadow: 1px 1px 0 #666;
    }
    #mcptitle:before{
        content: ':: ';
    }
    #mcptitle{
        color: #fff; 
        font-weight: bold;
    }

/* ============================================================

    icons

============================================================ */

    [class^="icon-"], [class*=" icon-"] {
        display: inline-block;
        font-family: mcplayer_icons;
        font-style: normal;
        margin-right: .1em;
        text-align: center;
        width: 1.1em;
    }

    #mcppause:before,        .icon-pause:before           { content: "\2389"; } /* '\2389' */
    #mcpforward:before,      .icon-fast-fw:before         { content: "\23e9"; } /* '\23e9' */
    #mcpbackward:before,     .icon-fast-bw:before         { content: "\23ea"; } /* '\23ea' */
    #mcpjumpnext:before,     .icon-to-end:before          { content: "\23ed"; } /* '\23ed' */
    #mcpjumpprev:before,     .icon-to-start:before        { content: "\23ee"; } /* '\23ee' */
    #mcpstop:before,         .icon-stop:before            { content: "\25aa"; } /* '\25aa' */
    #mcpplay:before,         .icon-play:before            { content: "\25b6"; } /* '\25b6' */
    #mcpoptplaylist:before,  .icon-th-list:before,        .ico-playlist:before { content: "\e804"; font-family: mcplayer_icons;} /* '\2630' */
    #mcpoptrepeat:before,    .icon-cw:before              { content: "\27f3"; } /* '\27f3' */
    #mcpoptshuffle:before,   .icon-cw:before              { content: "\1f500"; } /* '\1f500' */
    #mcpminimize:before,     .icon-down-open-1:before     { content: "\e800"; font-family: mcplayer_icons;} /* '\e800' */
    #mcpmaximize:before,     .icon-up-open-1:before       { content: "\e801"; font-family: mcplayer_icons;} /* '\e801' */
    #mcpoptdownload:before,  .icon-install:before,         .ico-download:before { content: "\e778"; font-family: mcplayer_icons;} /* '\e778' */
    #mcpvolmute:before,      .icon-volume-off:before      { content: "\1f507"; } /* '\1f507' */
    #mcpvolfull:before,      .icon-volume-up:before       { content: "\1f50a"; } /* '\1f50a' */
    #mcpoptabout:before,     .icon-info-circle-1:before,  .ico-about:before { content: '\e802'; font-family: mcplayer_icons;} /* '?' */
    #mcpoptstatusbar:before, .icon-window-minimize:before { content: '\f2d1'; } /* '?' */

    .ico-playlist:before,
    .ico-download:before,
    .ico-about:before
    {font-size: 150%;}

/* ============================================================

    play buttons for hidden audio tags in the website

============================================================ */

    .songbtn, .songbtn:hover{
        background: rgba(0,0,0,0.1); 
        border: 2px solid #fff; 
        border-radius: 50%; 
        box-shadow: 0 0 10px rgba(0,0,0,0.3); 
        color:rgba(0,0,0,0.5); 
        float: left; 
        padding: 4px; 
        text-decoration: none;
    }
    .songbtn:hover{background: rgba(0,0,0,0.15); }

    .songbtnactive{
        background: rgb(255,197,120); /* Old browsers */
        background: radial-gradient(circle at center, rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%); /* W3C */
    }

/* ============================================================

    hud infobox

============================================================ */

    #mcphud{
        background:rgba(0,0,0,0.7); 
        border: 2px solid rgba(255,255,255,0.7);
        border-radius: 10px;
        bottom: 50%; 
        color: #fff; 
        display:block;
        font-size:1%;
        opacity: 0;
        padding: 10px; 
        position: fixed; 
        right: -50%;
        text-align:center; 
        transition: all 0.25s ease-out;
        width: 50%; 
    }
    #mcphud.active{
        right: 25%;
        font-size: 100%;
        opacity: 1;
    }