Abstract more skin sprites

This commit is contained in:
Jordan Eldredge 2015-02-07 22:37:12 -08:00
parent cbae6b3e50
commit 24eca69581
3 changed files with 36 additions and 40 deletions

View file

@ -414,45 +414,32 @@
.actions #previous {
top: 88px;
left: 16px;
background-position: 0 0;
}
.actions #previous:active { background-position: 0 -18px; }
.actions #play {
top: 88px;
left: 39px;
background-position: -23px 0;
}
.actions #play:active { background-position: -23px -18px; }
.actions #pause {
top: 88px;
left: 62px;
background-position: -46px 0;
}
.actions #pause:active { background-position: -46px -18px; }
.actions #stop {
top: 88px;
left: 85px;
background-position: -69px 0;
}
.actions #stop:active { background-position: -69px -18px; }
.actions #next {
top: 88px;
left: 108px;
background-position: -92px 0;
width: 22px;
}
.actions #next:active { background-position: -92px -18px; }
#eject {
position: absolute;
top: 89px;
left: 136px;
/* background-image: CBUTTONS.BMP via Javascript */
height: 16px;
width: 22px;
}
#eject { background-position: -114px 0; }
#eject:active { background-position: -114px -16px; }
.shuffle-repeat {
position: absolute;
@ -464,38 +451,16 @@
.shuffle-repeat div {
position: absolute;
height: 15px;
/* background-image: SHUFREP.BMP via Javascript */
}
.shuffle-repeat #shuffle {
width: 47px;
background-position: -28px 0;
}
.shuffle-repeat #shuffle:active {
background-position: -28px -15px;
}
.shuffle-repeat #shuffle.selected {
background-position: -28px -30px;
}
.shuffle-repeat #shuffle.selected:active {
background-position: -28px -45px;
}
.shuffle-repeat #repeat {
left: 46px;
width: 28px;
}
.shuffle-repeat #repeat:active {
background-position: 0 -15px;
}
.shuffle-repeat #repeat.selected {
background-position: 0 -30px;
}
.shuffle-repeat #repeat.selected:active {
background-position: 0 -45px;
}
#about {
position: absolute;

View file

@ -7,6 +7,23 @@ var SKIN_SPRITES = [
{ selectors: ["#balance::-webkit-slider-thumb:active", "#balance::-moz-range-thumb:active"], x: 0, y: 422, width: 14, height: 11},
]
},
{
img: "CBUTTONS",
sprites: [
{ selectors: [".actions #previous"], x: 0, y: 0, width: 23, height: 18},
{ selectors: [".actions #previous:active"], x: 0, y: 18, width: 23, height: 18},
{ selectors: [".actions #play"], x: 23, y: 0, width: 23, height: 18},
{ selectors: [".actions #play:active"], x: 23, y: 18, width: 23, height: 18},
{ selectors: [".actions #pause"], x: 46, y: 0, width: 23, height: 18},
{ selectors: [".actions #pause:active"], x: 46, y: 18, width: 23, height: 18},
{ selectors: [".actions #stop"], x: 69, y: 0, width: 23, height: 18},
{ selectors: [".actions #stop:active"], x: 69, y: 18, width: 23, height: 18},
{ selectors: [".actions #next"], x: 92, y: 0, width: 23, height: 18},
{ selectors: [".actions #next:active"], x: 92, y: 18, width: 22, height: 18},
{ selectors: ["#eject"], x: 114, y: 0, width: 22, height: 16},
{ selectors: ["#eject:active"], x: 114, y: 16, width: 22, height: 16},
]
},
{
img: "MAIN",
sprites: [
@ -77,6 +94,25 @@ var SKIN_SPRITES = [
{ selectors: ["#playlist.shade"], x: 72, y: 57, width: 25, height: 14}
]
}, */
{
img: "SHUFREP",
sprites: [
{ selectors: ["#shuffle"], x: 28, y: 0, width: 47, height: 15},
{ selectors: ["#shuffle:active"], x: 28, y: 15, width: 47, height: 15},
{ selectors: ["#shuffle.selected"], x: 28, y: 30, width: 47, height: 15},
{ selectors: ["#shuffle.selected:active"], x: 28, y: 45, width: 47, height: 15},
{ selectors: ["#repeat"], x: 0, y: 0, width: 28, height: 15},
{ selectors: ["#repeat:active"], x: 0, y: 15, width: 28, height: 15},
{ selectors: ["#repeat.selected"], x: 0, y: 30, width: 28, height: 15},
{ selectors: ["#repeat.selected:active"], x: 0, y: 45, width: 28, height: 15},
]
},
{
img: "TEXT",
sprites: [
{ selectors: [".character"], x: 0, y: 0, width: 155, height: 74},
]
},
{
img: "TITLEBAR",
sprites: [

View file

@ -8,14 +8,9 @@ SkinManager = {
},
_skinImages: {
".windows div": "SHUFREP.BMP",
"#position": "POSBAR.BMP",
"#position::-webkit-slider-thumb": "POSBAR.BMP",
"#position::-moz-range-thumb": "POSBAR.BMP",
".actions div": "CBUTTONS.BMP",
"#eject": "CBUTTONS.BMP",
".shuffle-repeat div": "SHUFREP.BMP",
".character": "TEXT.BMP",
// Put this second, since it will trump .digit
".digit-ex": "NUMS_EX.BMP"
},