mirror of
https://github.com/captbaritone/webamp.git
synced 2026-01-23 02:15:01 +00:00
Update CSS prefix
This commit is contained in:
Jordan Eldredge
parent
d20f1cae42
commit
545c22a3fc
10 changed files with 235 additions and 233 deletions
|
|
@ -1,14 +1,14 @@
|
|||
/* Styles */
|
||||
#winamp2-js #equalizer-window {
|
||||
#webamp #equalizer-window {
|
||||
height: 116px;
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-window.shade {
|
||||
#webamp #equalizer-window.shade {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-volume {
|
||||
#webamp #equalizer-volume {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 4px;
|
||||
|
|
@ -17,25 +17,25 @@
|
|||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-volume::-webkit-slider-thumb {
|
||||
#webamp #equalizer-volume::-webkit-slider-thumb {
|
||||
height: 7px;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-volume::-moz-range-thumb {
|
||||
#webamp #equalizer-volume::-moz-range-thumb {
|
||||
height: 7px;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-volume.center::-webkit-slider-thumb {
|
||||
#webamp #equalizer-volume.center::-webkit-slider-thumb {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-volume.center::-moz-range-thumb {
|
||||
#webamp #equalizer-volume.center::-moz-range-thumb {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-balance {
|
||||
#webamp #equalizer-balance {
|
||||
position: absolute;
|
||||
left: 164px;
|
||||
top: 4px;
|
||||
|
|
@ -44,31 +44,31 @@
|
|||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-balance::-webkit-slider-thumb {
|
||||
#webamp #equalizer-balance::-webkit-slider-thumb {
|
||||
height: 7px;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-balance::-moz-range-thumb {
|
||||
#webamp #equalizer-balance::-moz-range-thumb {
|
||||
height: 7px;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-balance.center::-webkit-slider-thumb {
|
||||
#webamp #equalizer-balance.center::-webkit-slider-thumb {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-balance.center::-moz-range-thumb {
|
||||
#webamp #equalizer-balance.center::-moz-range-thumb {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#winamp2-js .equalizer-top {
|
||||
#webamp .equalizer-top {
|
||||
height: 14px;
|
||||
width: 275px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-close {
|
||||
#webamp #equalizer-close {
|
||||
position: absolute;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
top: 3px;
|
||||
}
|
||||
|
||||
#winamp2-js #equalizer-shade {
|
||||
#webamp #equalizer-shade {
|
||||
position: absolute;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
top: 3px;
|
||||
}
|
||||
|
||||
#winamp2-js #on {
|
||||
#webamp #on {
|
||||
position: absolute;
|
||||
width: 26px;
|
||||
height: 12px;
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
left: 14px;
|
||||
}
|
||||
|
||||
#winamp2-js #auto {
|
||||
#webamp #auto {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 12px;
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
left: 40px;
|
||||
}
|
||||
|
||||
#winamp2-js #presets-context {
|
||||
#webamp #presets-context {
|
||||
position: absolute;
|
||||
width: 44px;
|
||||
height: 12px;
|
||||
|
|
@ -108,12 +108,12 @@
|
|||
left: 217px;
|
||||
}
|
||||
|
||||
#winamp2-js #presets {
|
||||
#webamp #presets {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#winamp2-js #eqGraph {
|
||||
#webamp #eqGraph {
|
||||
position: absolute;
|
||||
width: 113px;
|
||||
height: 19px;
|
||||
|
|
@ -121,13 +121,13 @@
|
|||
left: 86px;
|
||||
}
|
||||
|
||||
#winamp2-js #preamp {
|
||||
#webamp #preamp {
|
||||
position: absolute;
|
||||
left: 21px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#winamp2-js #plus12db {
|
||||
#webamp #plus12db {
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
top: 36px;
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
height: 8px;
|
||||
}
|
||||
|
||||
#winamp2-js #zerodb {
|
||||
#webamp #zerodb {
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
top: 64px;
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
height: 8px;
|
||||
}
|
||||
|
||||
#winamp2-js #minus12db {
|
||||
#webamp #minus12db {
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
top: 95px;
|
||||
|
|
@ -151,78 +151,78 @@
|
|||
height: 8px;
|
||||
}
|
||||
|
||||
#winamp2-js #band-60 {
|
||||
#webamp #band-60 {
|
||||
position: absolute;
|
||||
left: 78px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#winamp2-js #band-170 {
|
||||
#webamp #band-170 {
|
||||
position: absolute;
|
||||
left: 96px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#winamp2-js #band-310 {
|
||||
#webamp #band-310 {
|
||||
position: absolute;
|
||||
left: 114px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#winamp2-js #band-600 {
|
||||
#webamp #band-600 {
|
||||
position: absolute;
|
||||
left: 132px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#winamp2-js #band-1000 {
|
||||
#webamp #band-1000 {
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#winamp2-js #band-3000 {
|
||||
#webamp #band-3000 {
|
||||
position: absolute;
|
||||
left: 168px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#winamp2-js #band-6000 {
|
||||
#webamp #band-6000 {
|
||||
position: absolute;
|
||||
left: 186px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#winamp2-js #band-12000 {
|
||||
#webamp #band-12000 {
|
||||
position: absolute;
|
||||
left: 204px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#winamp2-js #band-14000 {
|
||||
#webamp #band-14000 {
|
||||
position: absolute;
|
||||
left: 222px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#winamp2-js #band-16000 {
|
||||
#webamp #band-16000 {
|
||||
position: absolute;
|
||||
left: 240px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#winamp2-js .band {
|
||||
#webamp .band {
|
||||
width: 14px;
|
||||
height: 63px;
|
||||
}
|
||||
|
||||
#winamp2-js .band .rc-slider {
|
||||
#webamp .band .rc-slider {
|
||||
height: 51px;
|
||||
width: 14px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
#winamp2-js .band .rc-slider .rc-slider-handle {
|
||||
#webamp .band .rc-slider .rc-slider-handle {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin: -6px 0 0 1px;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
#winamp2-js .gen-text-space {
|
||||
#webamp .gen-text-space {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-text-letter {
|
||||
#webamp .gen-text-letter {
|
||||
height: 7px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-window {
|
||||
#webamp .gen-window {
|
||||
/* Default size */
|
||||
width: 275px;
|
||||
height: 116px;
|
||||
|
|
@ -15,45 +15,45 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-top {
|
||||
#webamp .gen-top {
|
||||
height: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-top-left {
|
||||
#webamp .gen-top-left {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-top-title {
|
||||
#webamp .gen-top-title {
|
||||
line-height: 7px;
|
||||
margin-top: 2px;
|
||||
/* TODO: This should be a conciquence of the repeating tiles, not hard coded */
|
||||
padding: 0 3px 0 4px;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-top-left-right-fill {
|
||||
#webamp .gen-top-left-right-fill {
|
||||
flex-grow: 1;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-top-left-end {
|
||||
#webamp .gen-top-left-end {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-top-right {
|
||||
#webamp .gen-top-right {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-top-right-end {
|
||||
#webamp .gen-top-right-end {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-close {
|
||||
#webamp .gen-close {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
|
|
@ -61,53 +61,53 @@
|
|||
top: 3px;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-middle {
|
||||
#webamp .gen-middle {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-middle-left {
|
||||
#webamp .gen-middle-left {
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-middle-left-bottom {
|
||||
#webamp .gen-middle-left-bottom {
|
||||
width: 11px;
|
||||
height: 24px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-middle-center {
|
||||
#webamp .gen-middle-center {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-middle-right {
|
||||
#webamp .gen-middle-right {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-middle-right-bottom {
|
||||
#webamp .gen-middle-right-bottom {
|
||||
width: 8px;
|
||||
height: 24px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-bottom {
|
||||
#webamp .gen-bottom {
|
||||
height: 14px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-bottom-left {
|
||||
#webamp .gen-bottom-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 125px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#winamp2-js .gen-bottom-right {
|
||||
#webamp .gen-bottom-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 125px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Styles */
|
||||
#winamp2-js #main-window {
|
||||
#webamp #main-window {
|
||||
position: absolute;
|
||||
height: 116px;
|
||||
width: 275px;
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
|
||||
}
|
||||
|
||||
#winamp2-js #title-bar {
|
||||
#webamp #title-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -19,34 +19,34 @@
|
|||
width: 275px;
|
||||
}
|
||||
|
||||
#option-context,
|
||||
#winamp2-js #minimize,
|
||||
#winamp2-js #shade,
|
||||
#winamp2-js #close {
|
||||
#webamp #option-context,
|
||||
#webamp #minimize,
|
||||
#webamp #shade,
|
||||
#webamp #close {
|
||||
position: absolute;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
#winamp2-js #title-bar #option {
|
||||
#webamp #title-bar #option {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#winamp2-js #title-bar #option-context {
|
||||
#webamp #title-bar #option-context {
|
||||
left: 6px;
|
||||
}
|
||||
#winamp2-js #title-bar #minimize {
|
||||
#webamp #title-bar #minimize {
|
||||
left: 244px;
|
||||
}
|
||||
#winamp2-js #title-bar #shade {
|
||||
#webamp #title-bar #shade {
|
||||
left: 254px;
|
||||
}
|
||||
#winamp2-js #title-bar #close {
|
||||
#webamp #title-bar #close {
|
||||
left: 264px;
|
||||
}
|
||||
#winamp2-js #clutter-bar {
|
||||
#webamp #clutter-bar {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 10px;
|
||||
|
|
@ -54,32 +54,32 @@
|
|||
width: 8px;
|
||||
}
|
||||
|
||||
#winamp2-js #clutter-bar div {
|
||||
#webamp #clutter-bar div {
|
||||
position: absolute;
|
||||
height: 7px;
|
||||
width: 8px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#winamp2-js #clutter-bar #button-o {
|
||||
#webamp #clutter-bar #button-o {
|
||||
top: 3px;
|
||||
height: 8px;
|
||||
}
|
||||
#winamp2-js #clutter-bar #button-a {
|
||||
#webamp #clutter-bar #button-a {
|
||||
top: 11px;
|
||||
}
|
||||
#winamp2-js #clutter-bar #button-i {
|
||||
#webamp #clutter-bar #button-i {
|
||||
top: 18px;
|
||||
}
|
||||
#winamp2-js #clutter-bar #button-d {
|
||||
#webamp #clutter-bar #button-d {
|
||||
top: 25px;
|
||||
height: 8px;
|
||||
}
|
||||
#winamp2-js #clutter-bar #button-v {
|
||||
#webamp #clutter-bar #button-v {
|
||||
top: 33px;
|
||||
}
|
||||
|
||||
#winamp2-js #play-pause {
|
||||
#webamp #play-pause {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 26px;
|
||||
|
|
@ -88,15 +88,15 @@
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#winamp2-js .play #work-indicator,
|
||||
#winamp2-js #work-indicator.selected {
|
||||
#webamp .play #work-indicator,
|
||||
#webamp #work-indicator.selected {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 24px;
|
||||
height: 9px;
|
||||
width: 3px;
|
||||
}
|
||||
#winamp2-js .status #time {
|
||||
#webamp .status #time {
|
||||
position: absolute;
|
||||
left: 39px;
|
||||
top: 26px;
|
||||
|
|
@ -105,15 +105,15 @@
|
|||
width: 59px;
|
||||
}
|
||||
|
||||
#winamp2-js .stop .status #time {
|
||||
#webamp .stop .status #time {
|
||||
display: none;
|
||||
}
|
||||
#winamp2-js .pause .status #time {
|
||||
#webamp .pause .status #time {
|
||||
animation: blink 2s step-start 1s infinite;
|
||||
-webkit-animation: blink 2s step-start 1s infinite;
|
||||
}
|
||||
|
||||
#winamp2-js .status #time #minus-sign {
|
||||
#webamp .status #time #minus-sign {
|
||||
/* Note that this get's augmented by the skin CSS if NUM_EX.BMP is present */
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
|
|
@ -122,28 +122,28 @@
|
|||
height: 1px;
|
||||
}
|
||||
|
||||
#winamp2-js .status #time #minute-first-digit {
|
||||
#webamp .status #time #minute-first-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 9px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
#winamp2-js .status #time #minute-second-digit {
|
||||
#webamp .status #time #minute-second-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 21px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
#winamp2-js .status #time #second-first-digit {
|
||||
#webamp .status #time #second-first-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 39px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
#winamp2-js .status #time #second-second-digit {
|
||||
#webamp .status #time #second-second-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 51px;
|
||||
|
|
@ -151,26 +151,26 @@
|
|||
width: 9px;
|
||||
}
|
||||
|
||||
#winamp2-js #visualizer {
|
||||
#webamp #visualizer {
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
#winamp2-js .shade #visualizer {
|
||||
#webamp .shade #visualizer {
|
||||
top: 5px;
|
||||
left: 79px;
|
||||
}
|
||||
|
||||
#winamp2-js .stop #visualizer {
|
||||
#webamp .stop #visualizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#winamp2-js .text {
|
||||
#webamp .text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#winamp2-js #marquee {
|
||||
#webamp #marquee {
|
||||
position: absolute;
|
||||
left: 111px;
|
||||
top: 24px;
|
||||
|
|
@ -181,7 +181,7 @@
|
|||
padding: 3px 1px; /* Ensure the target is correct for the cursor */
|
||||
}
|
||||
|
||||
#winamp2-js .media-info #kbps {
|
||||
#webamp .media-info #kbps {
|
||||
position: absolute;
|
||||
left: 111px;
|
||||
top: 43px;
|
||||
|
|
@ -190,11 +190,11 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
#winamp2-js .stop .media-info #kbps {
|
||||
#webamp .stop .media-info #kbps {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#winamp2-js .media-info #khz {
|
||||
#webamp .media-info #khz {
|
||||
position: absolute;
|
||||
left: 156px;
|
||||
top: 43px;
|
||||
|
|
@ -203,11 +203,11 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
#winamp2-js .stop .media-info #khz {
|
||||
#webamp .stop .media-info #khz {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#winamp2-js .media-info .mono-stereo {
|
||||
#webamp .media-info .mono-stereo {
|
||||
position: absolute;
|
||||
left: 212px;
|
||||
top: 41px;
|
||||
|
|
@ -215,21 +215,21 @@
|
|||
height: 12px;
|
||||
}
|
||||
|
||||
#winamp2-js .media-info .mono-stereo div {
|
||||
#webamp .media-info .mono-stereo div {
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
#winamp2-js .media-info .mono-stereo #mono {
|
||||
#webamp .media-info .mono-stereo #mono {
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
#winamp2-js .media-info .mono-stereo #stereo {
|
||||
#webamp .media-info .mono-stereo #stereo {
|
||||
left: 27px;
|
||||
width: 29px;
|
||||
}
|
||||
|
||||
#winamp2-js #volume {
|
||||
#webamp #volume {
|
||||
position: absolute;
|
||||
left: 107px;
|
||||
top: 57px;
|
||||
|
|
@ -238,7 +238,7 @@
|
|||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#winamp2-js #volume input {
|
||||
#webamp #volume input {
|
||||
height: 13px;
|
||||
/* The input itself, is actually 3px shorter than the background
|
||||
* https://twitter.com/LuigiHann/status/959275940688867328
|
||||
|
|
@ -246,18 +246,18 @@
|
|||
width: 65px;
|
||||
display: block;
|
||||
}
|
||||
#winamp2-js #volume input::-webkit-slider-thumb {
|
||||
#webamp #volume input::-webkit-slider-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
}
|
||||
#winamp2-js #volume input::-moz-range-thumb {
|
||||
#webamp #volume input::-moz-range-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
#winamp2-js #balance {
|
||||
#webamp #balance {
|
||||
position: absolute;
|
||||
left: 177px;
|
||||
top: 57px;
|
||||
|
|
@ -266,18 +266,18 @@
|
|||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#winamp2-js #balance::-webkit-slider-thumb {
|
||||
#webamp #balance::-webkit-slider-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
}
|
||||
#winamp2-js #balance::-moz-range-thumb {
|
||||
#webamp #balance::-moz-range-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
#winamp2-js .windows {
|
||||
#webamp .windows {
|
||||
position: absolute;
|
||||
left: 219px;
|
||||
top: 58px;
|
||||
|
|
@ -285,21 +285,21 @@
|
|||
height: 12px;
|
||||
}
|
||||
|
||||
#winamp2-js .windows div {
|
||||
#webamp .windows div {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
#winamp2-js .windows #equalizer-button {
|
||||
#webamp .windows #equalizer-button {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#winamp2-js .windows #playlist-button {
|
||||
#webamp .windows #playlist-button {
|
||||
left: 23px;
|
||||
}
|
||||
|
||||
#winamp2-js #position {
|
||||
#webamp #position {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 72px;
|
||||
|
|
@ -307,7 +307,7 @@
|
|||
height: 10px;
|
||||
}
|
||||
|
||||
#winamp2-js #position::-webkit-slider-thumb {
|
||||
#webamp #position::-webkit-slider-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
/*
|
||||
|
|
@ -318,55 +318,55 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#winamp2-js #position::-moz-range-thumb {
|
||||
#webamp #position::-moz-range-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
}
|
||||
|
||||
/* For some reason, we can't use display: none here */
|
||||
#winamp2-js .stop #position::-webkit-slider-thumb {
|
||||
#webamp .stop #position::-webkit-slider-thumb {
|
||||
visibility: hidden;
|
||||
}
|
||||
#winamp2-js .stop #position::-moz-range-thumb {
|
||||
#webamp .stop #position::-moz-range-thumb {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* For some reason this is needed for the position slider to show up now that
|
||||
* we are using React.
|
||||
*/
|
||||
#winamp2-js .play #position::-webkit-slider-thumb {
|
||||
#webamp .play #position::-webkit-slider-thumb {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#winamp2-js .actions div {
|
||||
#webamp .actions div {
|
||||
height: 18px;
|
||||
width: 23px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#winamp2-js .actions #previous {
|
||||
#webamp .actions #previous {
|
||||
top: 88px;
|
||||
left: 16px;
|
||||
}
|
||||
#winamp2-js .actions #play {
|
||||
#webamp .actions #play {
|
||||
top: 88px;
|
||||
left: 39px;
|
||||
}
|
||||
#winamp2-js .actions #pause {
|
||||
#webamp .actions #pause {
|
||||
top: 88px;
|
||||
left: 62px;
|
||||
}
|
||||
#winamp2-js .actions #stop {
|
||||
#webamp .actions #stop {
|
||||
top: 88px;
|
||||
left: 85px;
|
||||
}
|
||||
#winamp2-js .actions #next {
|
||||
#webamp .actions #next {
|
||||
top: 88px;
|
||||
left: 108px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
#winamp2-js #eject {
|
||||
#webamp #eject {
|
||||
position: absolute;
|
||||
top: 89px;
|
||||
left: 136px;
|
||||
|
|
@ -374,28 +374,28 @@
|
|||
width: 22px;
|
||||
}
|
||||
|
||||
#winamp2-js .shuffle-repeat {
|
||||
#webamp .shuffle-repeat {
|
||||
position: absolute;
|
||||
top: 89px;
|
||||
left: 164px;
|
||||
width: 74px;
|
||||
}
|
||||
|
||||
#winamp2-js .shuffle-repeat div {
|
||||
#webamp .shuffle-repeat div {
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
#winamp2-js .shuffle-repeat #shuffle {
|
||||
#webamp .shuffle-repeat #shuffle {
|
||||
width: 47px;
|
||||
}
|
||||
|
||||
#winamp2-js .shuffle-repeat #repeat {
|
||||
#webamp .shuffle-repeat #repeat {
|
||||
left: 46px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
#winamp2-js #about {
|
||||
#webamp #about {
|
||||
position: absolute;
|
||||
top: 91px;
|
||||
left: 253px;
|
||||
|
|
@ -403,7 +403,7 @@
|
|||
width: 13px;
|
||||
}
|
||||
|
||||
#winamp2-js .digit {
|
||||
#webamp .digit {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
|
|
@ -413,66 +413,66 @@
|
|||
}
|
||||
|
||||
/* Shade View */
|
||||
#winamp2-js #main-window.shade {
|
||||
#webamp #main-window.shade {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#winamp2-js .shade .media-info,
|
||||
#winamp2-js .shade .windows,
|
||||
#winamp2-js .shade #volume,
|
||||
#winamp2-js .shade #balance,
|
||||
#winamp2-js .shade .shuffle-repeat,
|
||||
#winamp2-js .shade .status {
|
||||
#webamp .shade .media-info,
|
||||
#webamp .shade .windows,
|
||||
#webamp .shade #volume,
|
||||
#webamp .shade #balance,
|
||||
#webamp .shade .shuffle-repeat,
|
||||
#webamp .shade .status {
|
||||
display: none;
|
||||
}
|
||||
#winamp2-js .shade #title-bar {
|
||||
#webamp .shade #title-bar {
|
||||
}
|
||||
|
||||
#winamp2-js .shade .actions div {
|
||||
#webamp .shade .actions div {
|
||||
position: absolute;
|
||||
}
|
||||
#winamp2-js .shade .actions #previous,
|
||||
#winamp2-js .shade .actions #previous:active {
|
||||
#webamp .shade .actions #previous,
|
||||
#webamp .shade .actions #previous:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 7px;
|
||||
top: 2px;
|
||||
left: 169px;
|
||||
}
|
||||
#winamp2-js .shade .actions #play,
|
||||
#winamp2-js .shade .actions #play:active {
|
||||
#webamp .shade .actions #play,
|
||||
#webamp .shade .actions #play:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 176px;
|
||||
}
|
||||
#winamp2-js .shade .actions #pause,
|
||||
#winamp2-js .shade .actions #pause:active {
|
||||
#webamp .shade .actions #pause,
|
||||
#webamp .shade .actions #pause:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 186px;
|
||||
}
|
||||
#winamp2-js .shade .actions #stop,
|
||||
#winamp2-js .shade .actions #stop:active {
|
||||
#webamp .shade .actions #stop,
|
||||
#webamp .shade .actions #stop:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 195px;
|
||||
}
|
||||
#winamp2-js .shade .actions #next,
|
||||
#winamp2-js .shade .actions #next:active {
|
||||
#webamp .shade .actions #next,
|
||||
#webamp .shade .actions #next:active {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 204px;
|
||||
}
|
||||
#winamp2-js .shade #eject,
|
||||
#winamp2-js .shade #eject:active {
|
||||
#webamp .shade #eject,
|
||||
#webamp .shade #eject:active {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
|
|
@ -480,7 +480,7 @@
|
|||
background: none;
|
||||
}
|
||||
|
||||
#winamp2-js .shade #position {
|
||||
#webamp .shade #position {
|
||||
position: absolute;
|
||||
left: 226px;
|
||||
top: 4px;
|
||||
|
|
@ -488,21 +488,21 @@
|
|||
height: 7px;
|
||||
}
|
||||
|
||||
#winamp2-js .shade #position::-webkit-slider-thumb {
|
||||
#webamp .shade #position::-webkit-slider-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
/* This make it appear. Not sure why */
|
||||
background: none;
|
||||
}
|
||||
|
||||
#winamp2-js .shade #position::-moz-range-thumb {
|
||||
#webamp .shade #position::-moz-range-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
/* This make it appear. Not sure why */
|
||||
background: none;
|
||||
}
|
||||
|
||||
#winamp2-js #main-window .mini-time {
|
||||
#webamp #main-window .mini-time {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 127px;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
#winamp2-js .mini-time {
|
||||
#webamp .mini-time {
|
||||
display: block;
|
||||
height: 6px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
#winamp2-js .mini-time.blinking .character:not(.background-character) {
|
||||
#webamp .mini-time.blinking .character:not(.background-character) {
|
||||
animation: blink 2s step-start 1s infinite;
|
||||
-webkit-animation: blink 2s step-start 1s infinite;
|
||||
}
|
||||
|
||||
#winamp2-js .mini-time .background-character {
|
||||
#webamp .mini-time .background-character {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#winamp2-js .mini-time .character {
|
||||
#webamp .mini-time .character {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
/* Styles */
|
||||
#winamp2-js #playlist-window {
|
||||
#webamp #playlist-window {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-top {
|
||||
#webamp .playlist-top {
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
max-height: 20px;
|
||||
|
|
@ -12,63 +12,63 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-top-left {
|
||||
#webamp .playlist-top-left {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-top-left-spacer {
|
||||
#webamp .playlist-top-left-spacer {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-top-left-fill {
|
||||
#webamp .playlist-top-left-fill {
|
||||
flex-grow: 1;
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-top-right-spacer {
|
||||
#webamp .playlist-top-right-spacer {
|
||||
/* This goes to the right of the center */
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-top-right-fill {
|
||||
#webamp .playlist-top-right-fill {
|
||||
flex-grow: 1;
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-top-title {
|
||||
#webamp .playlist-top-title {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-top-right {
|
||||
#webamp .playlist-top-right {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-middle {
|
||||
#webamp .playlist-middle {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-middle-left {
|
||||
#webamp .playlist-middle-left {
|
||||
background-repeat: repeat-y;
|
||||
width: 12px;
|
||||
min-width: 12px;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-middle-center {
|
||||
#webamp .playlist-middle-center {
|
||||
flex-grow: 1;
|
||||
padding: 3px 0;
|
||||
min-width: 0; /* Not sure why this is needed */
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-tracks {
|
||||
#webamp .playlist-tracks {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-tracks .track-cell {
|
||||
#webamp .playlist-tracks .track-cell {
|
||||
height: 13px;
|
||||
line-height: 13px;
|
||||
font-size: 9px;
|
||||
|
|
@ -79,28 +79,28 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-track-numbers > div,
|
||||
#winamp2-js .playlist-track-durations > div {
|
||||
#webamp .playlist-track-numbers > div,
|
||||
#webamp .playlist-track-durations > div {
|
||||
padding-right: 3px;
|
||||
text-align: right;
|
||||
}
|
||||
#winamp2-js .playlist-track-numbers > div {
|
||||
#webamp .playlist-track-numbers > div {
|
||||
text-align: center;
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-track-titles {
|
||||
#webamp .playlist-track-titles {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-track-titles > div {
|
||||
#webamp .playlist-track-titles > div {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-middle-right {
|
||||
#webamp .playlist-middle-right {
|
||||
background-repeat: repeat-y;
|
||||
background-position: top right;
|
||||
width: 20px;
|
||||
|
|
@ -109,18 +109,18 @@
|
|||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-scrollbar {
|
||||
#webamp .playlist-scrollbar {
|
||||
height: 100%;
|
||||
width: 8px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-scrollbar-handle {
|
||||
#webamp .playlist-scrollbar-handle {
|
||||
width: 8x;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-bottom {
|
||||
#webamp .playlist-bottom {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
min-height: 38px;
|
||||
|
|
@ -128,13 +128,13 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-bottom-left {
|
||||
#webamp .playlist-bottom-left {
|
||||
width: 125px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-menu li {
|
||||
#webamp .playlist-menu li {
|
||||
list-style: none;
|
||||
display: none;
|
||||
width: 22px;
|
||||
|
|
@ -143,22 +143,22 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-menu li > div {
|
||||
#webamp .playlist-menu li > div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-menu ul {
|
||||
#webamp .playlist-menu ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-menu.selected li {
|
||||
#webamp .playlist-menu.selected li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-menu .bar {
|
||||
#webamp .playlist-menu .bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -3px;
|
||||
|
|
@ -166,7 +166,7 @@
|
|||
height: 54px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-add-menu {
|
||||
#webamp #playlist-add-menu {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 14px;
|
||||
|
|
@ -174,11 +174,11 @@
|
|||
height: 18px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-remove-menu.playlist-menu .bar {
|
||||
#webamp #playlist-remove-menu.playlist-menu .bar {
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-remove-menu {
|
||||
#webamp #playlist-remove-menu {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 43px;
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
height: 18px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-selection-menu {
|
||||
#webamp #playlist-selection-menu {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 72px;
|
||||
|
|
@ -194,7 +194,7 @@
|
|||
height: 18px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-misc-menu {
|
||||
#webamp #playlist-misc-menu {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 101px;
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
height: 18px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-list-menu {
|
||||
#webamp #playlist-list-menu {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 22px;
|
||||
|
|
@ -210,33 +210,33 @@
|
|||
height: 18px;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-bottom-right {
|
||||
#webamp .playlist-bottom-right {
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-running-time-display {
|
||||
#webamp .playlist-running-time-display {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 7px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-action-buttons {
|
||||
#webamp .playlist-action-buttons {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 3px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#winamp2-js .playlist-action-buttons > div {
|
||||
#webamp .playlist-action-buttons > div {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-window .playlist-visualizer {
|
||||
#webamp #playlist-window .playlist-visualizer {
|
||||
width: 75px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -244,17 +244,17 @@
|
|||
display: none; /* Only show if the window is wide enough */
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-window.wide .playlist-visualizer {
|
||||
#webamp #playlist-window.wide .playlist-visualizer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-window .mini-time {
|
||||
#webamp #playlist-window .mini-time {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 66px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-window #playlist-resize-target {
|
||||
#webamp #playlist-window #playlist-resize-target {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -262,7 +262,7 @@
|
|||
width: 20px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-close-button {
|
||||
#webamp #playlist-close-button {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
height: 9px;
|
||||
|
|
@ -270,7 +270,7 @@
|
|||
top: 3px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-shade-button {
|
||||
#webamp #playlist-shade-button {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
height: 9px;
|
||||
|
|
@ -278,37 +278,37 @@
|
|||
top: 3px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-window-shade {
|
||||
#webamp #playlist-window-shade {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-window-shade .left {
|
||||
#webamp #playlist-window-shade .left {
|
||||
height: 14px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-window-shade .right {
|
||||
#webamp #playlist-window-shade .right {
|
||||
height: 14px;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: right;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-window #playlist-scroll-up-button,
|
||||
#winamp2-js #playlist-window #playlist-scroll-down-button {
|
||||
#webamp #playlist-window #playlist-scroll-up-button,
|
||||
#webamp #playlist-window #playlist-scroll-down-button {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 5px;
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-window #playlist-scroll-up-button {
|
||||
#webamp #playlist-window #playlist-scroll-up-button {
|
||||
top: 2px;
|
||||
}
|
||||
#winamp2-js #playlist-window #playlist-scroll-down-button {
|
||||
#webamp #playlist-window #playlist-scroll-down-button {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-window-shade #playlist-resize-target {
|
||||
#webamp #playlist-window-shade #playlist-resize-target {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 3px;
|
||||
|
|
@ -316,13 +316,13 @@
|
|||
width: 9px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-shade-track-title {
|
||||
#webamp #playlist-shade-track-title {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
#winamp2-js #playlist-shade-time {
|
||||
#webamp #playlist-shade-time {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 30px;
|
||||
|
|
|
|||
|
|
@ -8,36 +8,36 @@ canvas {
|
|||
}
|
||||
|
||||
/* Range input css reset */
|
||||
#winamp2-js input[type="range"] {
|
||||
#webamp input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
#winamp2-js input[type="range"]::-webkit-slider-thumb {
|
||||
#webamp input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
#winamp2-js input[type="range"]::-moz-range-thumb {
|
||||
#webamp input[type="range"]::-moz-range-thumb {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
#winamp2-js input[type="range"]::-moz-range-track {
|
||||
#webamp input[type="range"]::-moz-range-track {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
#winamp2-js input[type="range"]:focus {
|
||||
#webamp input[type="range"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
#winamp2-js input[type="range"]::-moz-focus-outer {
|
||||
#webamp input[type="range"]::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#winamp2-js a:focus {
|
||||
#webamp a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -65,7 +65,7 @@ canvas {
|
|||
}
|
||||
}
|
||||
|
||||
#winamp2-js .character {
|
||||
#webamp .character {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 5px;
|
||||
|
|
@ -74,7 +74,7 @@ canvas {
|
|||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
#winamp2-js .window {
|
||||
#webamp .window {
|
||||
position: absolute;
|
||||
/* Ask the browser to scale showing large pixels if possible */
|
||||
image-rendering: -moz-crisp-edges; /* Firefox */
|
||||
|
|
@ -84,11 +84,11 @@ canvas {
|
|||
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
|
||||
}
|
||||
|
||||
#winamp2-js .window {
|
||||
#webamp .window {
|
||||
/* Work around rendering bug with clip-path */
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
#winamp2-js .window.doubled {
|
||||
#webamp .window.doubled {
|
||||
-moz-transform: translateZ(0) scale(2);
|
||||
-moz-transform-origin: top left;
|
||||
-webkit-transform: translateZ(0) scale(2);
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ The parsing of skin files is handed in [skinParser.js](../js/skinParser.js). Ren
|
|||
|
||||
## CSS
|
||||
|
||||
CSS style sheets are imported by the components which use them. Each rule is individually prefixed with the id `#winamp2-js` to prevent our style rules from "leaking" out onto other potential elements. For example, [98.js.org], includes Webamp on a page along with many other elements, and we want to be sure our rules for `.selected` elements do not apply to any elements outside of `#winamp2-js`.
|
||||
CSS style sheets are imported by the components which use them. Each rule is individually prefixed with the id `#webamp` to prevent our style rules from "leaking" out onto other potential elements. For example, [98.js.org], includes Webamp on a page along with many other elements, and we want to be sure our rules for `.selected` elements do not apply to any elements outside of `#webamp`.
|
||||
|
||||
The nature of Winamp skins is such that most elements are absolutely positioned, and have an explicit size. There are a few down sides to our current approach:
|
||||
|
||||
|
|
|
|||
|
|
@ -222,7 +222,7 @@ unsubscribe();
|
|||
## Notes
|
||||
|
||||
* Internet Explorer is not supported.
|
||||
* Webamp injects CSS into the page. The CSS is namespaced (every CSS selector is prefixed with `#winamp2-js`), so it should not interfere with anything on the host page.
|
||||
* Webamp injects CSS into the page. The CSS is namespaced (every CSS selector is prefixed with `#webamp`), so it should not interfere with anything on the host page.
|
||||
* Webamp HTML contains somewhat generic IDs and class names. If you have CSS on your page that is not namespaced, it may accidently be applied to Webamp. If this happens please reach out. I may be able to resolve it.
|
||||
* Skin and audio URLs are subject to [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). Please ensure they are either served from the same domain, or that the other domain is served with the correct headers.
|
||||
* Please reach out to me. I'd love to help you set it up, and understand how it's being used. I plan to expand this API as I learn how people want to use it.
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const App = ({
|
|||
);
|
||||
});
|
||||
return (
|
||||
<div role="application" id="winamp2-js">
|
||||
<div role="application" id="webamp">
|
||||
<Skin />
|
||||
<WindowManager windows={windows} container={container} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import { connect } from "react-redux";
|
|||
import { LETTERS } from "../constants";
|
||||
import { imageSelectors, cursorSelectors } from "../skinSelectors";
|
||||
|
||||
const CSS_PREFIX = "#webamp";
|
||||
|
||||
const mapRegionNamesToIds = {
|
||||
normal: "mainWindowClipPath",
|
||||
windowshade: "shadeMainWindowClipPath",
|
||||
|
|
@ -85,7 +87,7 @@ const Skin = props => {
|
|||
if (imageUrl) {
|
||||
imageSelectors[imageName].forEach(selector => {
|
||||
cssRules.push(
|
||||
`#winamp2-js ${selector} {background-image: url(${imageUrl})}`
|
||||
`${CSS_PREFIX} ${selector} {background-image: url(${imageUrl})}`
|
||||
);
|
||||
});
|
||||
}
|
||||
|
|
@ -97,10 +99,10 @@ const Skin = props => {
|
|||
const selectedWidth =
|
||||
skinGenLetterWidths[`GEN_LETTER_SELECTED_${letter}`];
|
||||
cssRules.push(
|
||||
`#winamp2-js .gen-text-${letter.toLowerCase()} {width: ${width}px;}`
|
||||
`${CSS_PREFIX} .gen-text-${letter.toLowerCase()} {width: ${width}px;}`
|
||||
);
|
||||
cssRules.push(
|
||||
`#winamp2-js .selected .gen-text-${letter.toLowerCase()} {width: ${selectedWidth}px;}`
|
||||
`${CSS_PREFIX} .selected .gen-text-${letter.toLowerCase()} {width: ${selectedWidth}px;}`
|
||||
);
|
||||
});
|
||||
}
|
||||
|
|
@ -109,7 +111,7 @@ const Skin = props => {
|
|||
if (cursorUrl) {
|
||||
cursorSelectors[cursorName].forEach(selector => {
|
||||
cssRules.push(
|
||||
`#winamp2-js ${selector} {cursor: url(${cursorUrl}), auto}`
|
||||
`${CSS_PREFIX} ${selector} {cursor: url(${cursorUrl}), auto}`
|
||||
);
|
||||
});
|
||||
}
|
||||
|
|
@ -119,7 +121,7 @@ const Skin = props => {
|
|||
// This alternate number file requires that the minus sign be
|
||||
// formatted differently.
|
||||
cssRules.push(
|
||||
"#winamp2-js .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }"
|
||||
`${CSS_PREFIX} .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -129,7 +131,7 @@ const Skin = props => {
|
|||
const matcher = mapRegionNamesToMatcher[regionName];
|
||||
const id = mapRegionNamesToIds[regionName];
|
||||
clipPaths[id] = polygons;
|
||||
cssRules.push(`#winamp2-js ${matcher} { clip-path: url(#${id}); }`);
|
||||
cssRules.push(`${CSS_PREFIX} ${matcher} { clip-path: url(#${id}); }`);
|
||||
}
|
||||
}
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue