Update CSS prefix

This commit is contained in:
Jordan Eldredge 2018-04-13 16:39:43 -07:00
parent d20f1cae42
commit 545c22a3fc
10 changed files with 235 additions and 233 deletions

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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);