mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-22 17:47:16 +00:00
Abstract more skin sprites
This commit is contained in:
parent
cbae6b3e50
commit
24eca69581
3 changed files with 36 additions and 40 deletions
35
css/main.css
35
css/main.css
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue