Skip to content

Commit

Permalink
Added SASS code as per jplayer#260
Browse files Browse the repository at this point in the history
  • Loading branch information
@thepag
thepag committed Dec 14, 2014
1 parent 25a29db commit 4c05012
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 78 deletions.
72 changes: 37 additions & 35 deletions src/skin/blue.monday/jplayer.blue.monday.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
* Date: 13th November 2014
*/

$jplayer-images-base-url: "" !default;

.jp-audio *:focus,
.jp-audio-stream *:focus,
.jp-video *:focus {
Expand Down Expand Up @@ -160,16 +162,16 @@
}

.jp-play {
background: url("jplayer.blue.monday.jpg") 0 0 no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 0 no-repeat;
}
.jp-play:focus {
background: url("jplayer.blue.monday.jpg") -41px 0 no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -41px 0 no-repeat;
}
.jp-state-playing .jp-play {
background: url("jplayer.blue.monday.jpg") 0 -42px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -42px no-repeat;
}
.jp-state-playing .jp-play:focus {
background: url("jplayer.blue.monday.jpg") -41px -42px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -41px -42px no-repeat;
}

.jp-stop, .jp-previous, .jp-next {
Expand All @@ -179,26 +181,26 @@
}

.jp-stop {
background: url("jplayer.blue.monday.jpg") 0 -83px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -83px no-repeat;
margin-left:10px;
}

.jp-stop:focus {
background: url("jplayer.blue.monday.jpg") -29px -83px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -29px -83px no-repeat;
}

.jp-previous {
background: url("jplayer.blue.monday.jpg") 0 -112px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -112px no-repeat;
}
.jp-previous:focus {
background: url("jplayer.blue.monday.jpg") -29px -112px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -29px -112px no-repeat;
}

.jp-next {
background: url("jplayer.blue.monday.jpg") 0 -141px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -141px no-repeat;
}
.jp-next:focus {
background: url("jplayer.blue.monday.jpg") -29px -141px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -29px -141px no-repeat;
}

/* @end */
Expand Down Expand Up @@ -229,20 +231,20 @@
height:10px;
}
.jp-seek-bar {
background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -202px repeat-x;
width:0px;
height:100%;
cursor: pointer;
}
.jp-play-bar {
background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -218px repeat-x ;
width:0px;
height:100%;
}

/* The seeking class is added/removed inside jPlayer */
.jp-seeking-bg {
background: url("jplayer.blue.monday.seeking.gif");
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.seeking.gif");
}

/* @end */
Expand Down Expand Up @@ -286,36 +288,36 @@
}

.jp-mute {
background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -170px no-repeat;
}
.jp-mute:focus {
background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -19px -170px no-repeat;
}
.jp-state-muted .jp-mute {
background: url("jplayer.blue.monday.jpg") -60px -170px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -60px -170px no-repeat;
}
.jp-state-muted .jp-mute:focus {
background: url("jplayer.blue.monday.jpg") -79px -170px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -79px -170px no-repeat;
}
.jp-volume-max {
background: url("jplayer.blue.monday.jpg") 0 -186px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -186px no-repeat;
}
.jp-volume-max:focus {
background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -19px -186px no-repeat;
}

.jp-volume-bar {
position: absolute;
overflow:hidden;
background: url("jplayer.blue.monday.jpg") 0 -250px repeat-x;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -250px repeat-x;
top:5px;
left:22px;
width:46px;
height:5px;
cursor: pointer;
}
.jp-volume-bar-value {
background: url("jplayer.blue.monday.jpg") 0 -256px repeat-x;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -256px repeat-x;
width:0px;
height:5px;
}
Expand Down Expand Up @@ -485,13 +487,13 @@ span.jp-artist {
left:50%;
top:50%;

background: url("jplayer.blue.monday.video.play.png") 0 0 no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.video.play.png") 0 0 no-repeat;
text-indent:-9999px;
border:none;
cursor:pointer;
}
.jp-video-play-icon:focus {
background: url("jplayer.blue.monday.video.play.png") 0 -100px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.video.play.png") 0 -100px no-repeat;
}


Expand Down Expand Up @@ -548,53 +550,53 @@ span.jp-artist {
}

.jp-full-screen {
background: url("jplayer.blue.monday.jpg") 0 -310px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -310px no-repeat;
margin-left: 20px;
}

.jp-full-screen:focus {
background: url("jplayer.blue.monday.jpg") -30px -310px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -30px -310px no-repeat;
}

.jp-state-full-screen .jp-full-screen {
background: url("jplayer.blue.monday.jpg") -60px -310px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -60px -310px no-repeat;
}

.jp-state-full-screen .jp-full-screen:focus {
background: url("jplayer.blue.monday.jpg") -90px -310px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -90px -310px no-repeat;
}

.jp-repeat {
background: url("jplayer.blue.monday.jpg") 0 -290px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -290px no-repeat;
}

.jp-repeat:focus {
background: url("jplayer.blue.monday.jpg") -30px -290px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -30px -290px no-repeat;
}

.jp-state-looped .jp-repeat {
background: url("jplayer.blue.monday.jpg") -60px -290px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -60px -290px no-repeat;
}

.jp-state-looped .jp-repeat:focus {
background: url("jplayer.blue.monday.jpg") -90px -290px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -90px -290px no-repeat;
}

.jp-shuffle {
background: url("jplayer.blue.monday.jpg") 0 -270px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") 0 -270px no-repeat;
margin-left: 5px;
}

.jp-shuffle:focus {
background: url("jplayer.blue.monday.jpg") -30px -270px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -30px -270px no-repeat;
}

.jp-state-shuffled .jp-shuffle {
background: url("jplayer.blue.monday.jpg") -60px -270px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -60px -270px no-repeat;
}

.jp-state-shuffled .jp-shuffle:focus {
background: url("jplayer.blue.monday.jpg") -90px -270px no-repeat;
background: url("#{$jplayer-images-base-url}jplayer.blue.monday.jpg") -90px -270px no-repeat;
}


Expand Down
Loading

0 comments on commit 4c05012

Please sign in to comment.