|
|
| (7 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| − | /* CSS placed here will be applied to all skins */
| |
| − | /*SoundCloud Widget Styles*/
| |
| | | | |
| − | .sc-player{
| |
| − | width: 175px;
| |
| − | height: 20px;
| |
| − | position: relative;
| |
| − | margin: 20px 5px;
| |
| − | background: rgba(191, 89, 42, 0.54);
| |
| − | border: 1px solid #666;
| |
| − | border-radius: 2px;
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | .sc-player:hover{
| |
| − | background: rgba(233, 97, 43, 0.54);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .sc-player ol, .sc-player li{
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | list-style-position: inside;
| |
| − | }
| |
| − |
| |
| − | /* Artworks */
| |
| − |
| |
| − | .sc-player .sc-artwork-list{
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-artwork-list li{
| |
| − | list-style-type: none;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-artwork-list li.active{
| |
| − | list-style-type: none;
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-artwork-list li img, .sc-player .sc-artwork-list li div{
| |
| − | list-style-type: none;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | }
| |
| − |
| |
| − | /* controls */
| |
| − |
| |
| − | .sc-player .sc-controls{
| |
| − | position: absolute;
| |
| − | width: 16px;
| |
| − | height: 16px;
| |
| − | top: 2px;
| |
| − | left: 2px;
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-controls a{
| |
| − | display: block;
| |
| − | width: 16px;
| |
| − | height: 16px;
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-controls a.sc-play, .sc-player .sc-controls a.sc-pause{
| |
| − | text-indent: -3000px;
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-controls a.sc-pause{
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .sc-player.playing .sc-controls a.sc-play{
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .sc-player.playing .sc-controls a.sc-pause{
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | /* scrubber */
| |
| − |
| |
| − | .sc-scrubber {
| |
| − | position: absolute;
| |
| − | left: -5000px;
| |
| − | bottom: 10px;
| |
| − | height: 40px;
| |
| − | width: 95.5%;
| |
| − | display: none;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .sc-player:hover .sc-scrubber, .sc-player.playing .sc-scrubber {
| |
| − | /*display: block;*/
| |
| − | left: 45px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .sc-scrubber .sc-time-span{
| |
| − | height: 30px;
| |
| − | margin: 5px;
| |
| − | position: relative;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .sc-scrubber .sc-buffer, .sc-scrubber .sc-played{
| |
| − | height: 30px;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | width: 0;
| |
| − | -webkit-transition: width 0.1s linear;
| |
| − | }
| |
| − |
| |
| − | .sc-scrubber .sc-time-indicators{
| |
| − | position: absolute;
| |
| − | right: 0;
| |
| − | top: -20px;
| |
| − | }
| |
| − |
| |
| − | /* tracks */
| |
| − |
| |
| − | /* Track listings*/
| |
| − |
| |
| − | .sc-player ol.sc-trackslist{
| |
| − | position: absolute;
| |
| − | /*float: left;
| |
| − | width: 92%;*/
| |
| − | height: 100%;
| |
| − | left: 25px;
| |
| − | overflow: auto;
| |
| − | line-height: 2px !important;
| |
| − | }
| |
| − |
| |
| − | .sc-player ol.sc-trackslist li{
| |
| − | cursor: pointer;
| |
| − | margin: 5px;
| |
| − | padding: 5px;
| |
| − | list-style: none;
| |
| − | }
| |
| − |
| |
| − | /* Track info*/
| |
| − |
| |
| − | .sc-player .sc-info{
| |
| − | position: absolute;
| |
| − | top: 10px;
| |
| − | left: -5000px;
| |
| − | width : 200px;
| |
| − | padding: 5px;
| |
| − | height: 450px;
| |
| − | z-index: 500;
| |
| − | margin-left: -40px;
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-info.active{
| |
| − | left: 25%;
| |
| − | top: 5%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .sc-player .sc-info-toggle{
| |
| − | position: absolute;
| |
| − | top: 10px;
| |
| − | left: 10px;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-info-toggle.active{
| |
| − | left: -5000px;
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-info-close{
| |
| − | position: absolute;
| |
| − | top: 10px;
| |
| − | right: 20px;
| |
| − | }
| |
| − |
| |
| − | /* utilities */
| |
| − |
| |
| − | .sc-player .hidden {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .sc-player-engine-container{
| |
| − | width: 1px;
| |
| − | height: 1px;
| |
| − | position: fixed;
| |
| − | top: 2px;
| |
| − | left: 2px;
| |
| − | }
| |
| − |
| |
| − | .sc-player {
| |
| − | font-family: 'Roboto', Arial, sans-serif;
| |
| − | font-weight: 200;
| |
| − | color: #333;
| |
| − | font-size: 12px;
| |
| − | }
| |
| − |
| |
| − | .sc-player.special {
| |
| − | /*border: 2px solid #ff3300;*/
| |
| − | -moz-border-radius: 15px;
| |
| − | -webkit-border-radius: 15px;
| |
| − | border-radius: 15px;
| |
| − | padding: 5px;
| |
| − | }
| |
| − |
| |
| − | .sc-player a {
| |
| − | text-decoration: none;
| |
| − | color: #333;
| |
| − | }
| |
| − |
| |
| − | /* scrubber */
| |
| − |
| |
| − | .sc-scrubber {
| |
| − | background-color: #e5e5e5;
| |
| − | -moz-border-radius: 8px;
| |
| − | -webkit-border-radius: 8px;
| |
| − | }
| |
| − |
| |
| − | .sc-scrubber .sc-time-span {
| |
| − | background-color: #fff;
| |
| − | }
| |
| − |
| |
| − | .sc-scrubber .sc-time-span img {
| |
| − | height: 30px;
| |
| − | width: 100%;
| |
| − | background-color: #000;
| |
| − | }
| |
| − |
| |
| − | .sc-scrubber .sc-buffer, .sc-scrubber .sc-played {
| |
| − | background-color: #fff;
| |
| − | opacity: 0.4;
| |
| − | }
| |
| − |
| |
| − | .sc-scrubber .sc-played {
| |
| − | background-color: #000;
| |
| − | opacity: 0.4;
| |
| − | }
| |
| − |
| |
| − | /* controls */
| |
| − |
| |
| − | .sc-player .sc-controls a {
| |
| − | color: transparent;
| |
| − | background: url('img/play.png');
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-controls a:hover {
| |
| − | background: url('img/play-hover.png');
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-controls a.sc-pause {
| |
| − | background: url('img/play.png');
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-controls a.sc-pause:hover{
| |
| − | background: url('img/play-hover.png');
| |
| − | }
| |
| − |
| |
| − | .sc-player.playing .sc-controls a.sc-pause{
| |
| − | background: url('img/pause.png');
| |
| − | }
| |
| − |
| |
| − | .sc-player.playing .sc-controls a.sc-pause:hover{
| |
| − | background: url('img/pause-hover.png');
| |
| − | }
| |
| − |
| |
| − | .sc-scrubber .sc-time-indicators{
| |
| − | background: #fff;
| |
| − | color: #fff;
| |
| − | -moz-border-radius: 4px;
| |
| − | -webkit-border-radius: 4px;
| |
| − | padding: 2px;
| |
| − | font-size: 0.4em;
| |
| − | font-weight: normal;
| |
| − | line-height: 1em;
| |
| − | }
| |
| − |
| |
| − | /* Track listings*/
| |
| − |
| |
| − | .sc-player ol.sc-trackslist li.active, .sc-player ol.sc-trackslist li:hover {
| |
| − | /*background-color: #fff;*/
| |
| − | padding: 4px;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | .sc-player ol.sc-trackslist li.active a {
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | .sc-track-duration {
| |
| − | text-align: right;
| |
| − | float: right;
| |
| − | padding: 0 5px;
| |
| − | margin-left: 5px;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* Track info*/
| |
| − |
| |
| − | .sc-player .sc-info{
| |
| − | background: #fff;
| |
| − | opacity: 0.9;
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-info-toggle{
| |
| − | background: #fff;
| |
| − | color: #003399;
| |
| − | -moz-border-radius: 4px;
| |
| − | -webkit-border-radius: 4px;
| |
| − | -moz-box-shadow: 1px 1px 4px #ccc;
| |
| − | -webkit-box-shadow: 1px 1px 4px #ccc;
| |
| − | padding: 4px;
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-info-toggle:hover{
| |
| − | background: #003399;
| |
| − | color: #eee;
| |
| − | }
| |
| − |
| |
| − | .sc-player .sc-info-close{
| |
| − | background: #003399;
| |
| − | color: #fff;
| |
| − | -moz-border-radius: 4px;
| |
| − | -webkit-border-radius: 4px;
| |
| − | padding: 2px 4px;
| |
| − | font-weight: bold;
| |
| − | }
| |
