mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-21 00:59:29 +00:00
Namespace css rules
This commit is contained in:
Jordan Eldredge
parent
624292e457
commit
abd342dc90
6 changed files with 134 additions and 137 deletions
|
|
@ -1,6 +1,5 @@
|
|||
#context-menu,
|
||||
#context-menu ul
|
||||
{
|
||||
#winamp2-js #context-menu,
|
||||
#winamp2-js #context-menu ul {
|
||||
display: none;
|
||||
z-index: 50; /* Gross */
|
||||
background-color: #FFFFFF;
|
||||
|
|
@ -13,7 +12,7 @@
|
|||
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
#context-menu li {
|
||||
#winamp2-js #context-menu li {
|
||||
position: relative;
|
||||
font-family: 'Tahoma';
|
||||
font-size: 11px;
|
||||
|
|
@ -23,31 +22,31 @@
|
|||
padding: 1px 18px 3px 18px;
|
||||
display: block;
|
||||
}
|
||||
#context-menu li.parent:after {
|
||||
#winamp2-js #context-menu li.parent:after {
|
||||
text-align: right;
|
||||
/* content: '\25b8'; */
|
||||
}
|
||||
#context-menu li a {
|
||||
#winamp2-js #context-menu li a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#context-menu li:hover,
|
||||
#context-menu li:hover a {
|
||||
#winamp2-js #context-menu li:hover,
|
||||
#winamp2-js #context-menu li:hover a {
|
||||
background-color: #224EB7;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
#context-menu li.hr {
|
||||
#winamp2-js #context-menu li.hr {
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
#context-menu li.hr:hover {
|
||||
#winamp2-js #context-menu li.hr:hover {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
#context-menu li.hr hr {
|
||||
#winamp2-js #context-menu li.hr hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: #A7A394;
|
||||
|
|
@ -55,11 +54,11 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
#context-menu ul {
|
||||
#winamp2-js #context-menu ul {
|
||||
left: 100%;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
#context-menu li:hover ul {
|
||||
#winamp2-js #context-menu li:hover ul {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
219
css/main.css
219
css/main.css
|
|
@ -1,10 +1,5 @@
|
|||
/* Styles */
|
||||
#main-window-parent {
|
||||
height: 116px;
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
#main-window {
|
||||
#winamp2-js #main-window {
|
||||
position: absolute;
|
||||
height: 116px;
|
||||
width: 275px;
|
||||
|
|
@ -17,31 +12,31 @@
|
|||
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
|
||||
}
|
||||
|
||||
#main-window.doubled {
|
||||
#winamp2-js #main-window.doubled {
|
||||
-moz-transform: scale(2);
|
||||
-moz-transform-origin: top left;
|
||||
-webkit-transform: scale(2);
|
||||
-webkit-transform-origin: top left;
|
||||
}
|
||||
|
||||
#main-window.doubled #context-menu {
|
||||
#winamp2-js #main-window.doubled #context-menu {
|
||||
-moz-transform: scale(.5);
|
||||
-moz-transform-origin: top left;
|
||||
-webkit-transform: scale(.5);
|
||||
-webkit-transform-origin: top left;
|
||||
}
|
||||
|
||||
#main-window.loading {
|
||||
#winamp2-js #main-window.loading {
|
||||
background-image: none;
|
||||
background-color: #FFFFFF;
|
||||
border: 2px solid #dddddd;
|
||||
}
|
||||
/* Hide everything whil we are loading */
|
||||
#main-window.loading * {
|
||||
#winamp2-js #main-window.loading * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#loading {
|
||||
#winamp2-js #loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
|
|
@ -52,13 +47,13 @@
|
|||
}
|
||||
|
||||
/* Only show loading div while we are loading */
|
||||
#main-window.loading #loading {
|
||||
#winamp2-js #main-window.loading #loading {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#main-window.closed { display: none; }
|
||||
#winamp2-js #main-window.closed { display: none; }
|
||||
|
||||
#title-bar {
|
||||
#winamp2-js #title-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -67,10 +62,10 @@
|
|||
cursor:url('../cursors/TITLEBAR.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#option,
|
||||
#minimize,
|
||||
#shade,
|
||||
#close {
|
||||
#winamp2-js #option,
|
||||
#winamp2-js #minimize,
|
||||
#winamp2-js #shade,
|
||||
#winamp2-js #close {
|
||||
position: absolute;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
|
|
@ -78,31 +73,30 @@
|
|||
cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#title-bar #option {
|
||||
#winamp2-js #title-bar #option {
|
||||
left: 6px;
|
||||
}
|
||||
#title-bar #option #context-menu {
|
||||
#winamp2-js #title-bar #option #context-menu {
|
||||
display: none;
|
||||
top: 12px;
|
||||
left: 0px;
|
||||
}
|
||||
#title-bar #option:active #context-menu,
|
||||
#title-bar #option.selected #context-menu
|
||||
{
|
||||
#winamp2-js #title-bar #option:active #context-menu,
|
||||
#winamp2-js #title-bar #option.selected #context-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#title-bar #minimize {
|
||||
#winamp2-js #title-bar #minimize {
|
||||
left: 244px;
|
||||
}
|
||||
#title-bar #shade {
|
||||
#winamp2-js #title-bar #shade {
|
||||
left: 254px;
|
||||
}
|
||||
#title-bar #close {
|
||||
#winamp2-js #title-bar #close {
|
||||
left: 264px;
|
||||
cursor:url('../cursors/CLOSE.PNG?inline'), auto;
|
||||
}
|
||||
#clutter-bar {
|
||||
#winamp2-js #clutter-bar {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 10px;
|
||||
|
|
@ -110,32 +104,32 @@
|
|||
width: 8px;
|
||||
}
|
||||
|
||||
#clutter-bar div {
|
||||
#winamp2-js #clutter-bar div {
|
||||
position: absolute;
|
||||
height: 7px;
|
||||
width: 8px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#clutter-bar #button-o {
|
||||
#winamp2-js #clutter-bar #button-o {
|
||||
top: 3px;
|
||||
height: 8px;
|
||||
}
|
||||
#clutter-bar #button-a {
|
||||
#winamp2-js #clutter-bar #button-a {
|
||||
top: 11px;
|
||||
}
|
||||
#clutter-bar #button-i {
|
||||
#winamp2-js #clutter-bar #button-i {
|
||||
top: 18px;
|
||||
}
|
||||
#clutter-bar #button-d {
|
||||
#winamp2-js #clutter-bar #button-d {
|
||||
top: 25px;
|
||||
height: 8px;
|
||||
}
|
||||
#clutter-bar #button-v {
|
||||
#winamp2-js #clutter-bar #button-v {
|
||||
top: 33px;
|
||||
}
|
||||
|
||||
#play-pause {
|
||||
#winamp2-js #play-pause {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 26px;
|
||||
|
|
@ -144,14 +138,14 @@
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.play #work-indicator {
|
||||
#winamp2-js .play #work-indicator {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 24px;
|
||||
height: 9px;
|
||||
width: 3px;
|
||||
}
|
||||
.status #time {
|
||||
#winamp2-js .status #time {
|
||||
position: absolute;
|
||||
left: 39px;
|
||||
top: 26px;
|
||||
|
|
@ -160,13 +154,13 @@
|
|||
width: 59px;
|
||||
}
|
||||
|
||||
.stop .status #time { display:none; }
|
||||
.pause .status #time {
|
||||
#winamp2-js .stop .status #time { display:none; }
|
||||
#winamp2-js .pause .status #time {
|
||||
animation: blink 2s step-start 1s infinite;
|
||||
-webkit-animation: blink 2s step-start 1s infinite;
|
||||
}
|
||||
|
||||
.status #time #minus-sign {
|
||||
#winamp2-js .status #time #minus-sign {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: -1px;
|
||||
|
|
@ -175,35 +169,35 @@
|
|||
}
|
||||
|
||||
/* Alternate format for minus sign, when skin supports it */
|
||||
.status #time.ex #minus-sign {
|
||||
#winamp2-js .status #time.ex #minus-sign {
|
||||
top: 0px;
|
||||
left: -1px;
|
||||
width: 9px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.status #time #minute-first-digit {
|
||||
#winamp2-js .status #time #minute-first-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 9px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
.status #time #minute-second-digit {
|
||||
#winamp2-js .status #time #minute-second-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 21px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
.status #time #second-first-digit {
|
||||
#winamp2-js .status #time #second-first-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 39px;
|
||||
height: 13px;
|
||||
width: 9px;
|
||||
}
|
||||
.status #time #second-second-digit {
|
||||
#winamp2-js .status #time #second-second-digit {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 51px;
|
||||
|
|
@ -211,7 +205,7 @@
|
|||
width: 9px;
|
||||
}
|
||||
|
||||
#visualizer {
|
||||
#winamp2-js #visualizer {
|
||||
position: absolute;
|
||||
width: 76px;
|
||||
height: 16px;
|
||||
|
|
@ -219,12 +213,12 @@
|
|||
left: 24px;
|
||||
}
|
||||
|
||||
.stop #visualizer {
|
||||
#winamp2-js .stop #visualizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.text {
|
||||
#winamp2-js .text {
|
||||
position: absolute;
|
||||
left: 112px;
|
||||
top: 27px;
|
||||
|
|
@ -234,11 +228,11 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
#song-title {
|
||||
#winamp2-js #song-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-info #kbps {
|
||||
#winamp2-js .media-info #kbps {
|
||||
position: absolute;
|
||||
left: 111px;
|
||||
top: 43px;
|
||||
|
|
@ -247,9 +241,9 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stop .media-info #kbps { display: none; }
|
||||
#winamp2-js .stop .media-info #kbps { display: none; }
|
||||
|
||||
.media-info #khz {
|
||||
#winamp2-js .media-info #khz {
|
||||
position: absolute;
|
||||
left: 156px;
|
||||
top: 43px;
|
||||
|
|
@ -258,9 +252,9 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stop .media-info #khz { display: none; }
|
||||
#winamp2-js .stop .media-info #khz { display: none; }
|
||||
|
||||
.media-info .mono-stereo {
|
||||
#winamp2-js .media-info .mono-stereo {
|
||||
position: absolute;
|
||||
left: 212px;
|
||||
top: 41px;
|
||||
|
|
@ -268,17 +262,17 @@
|
|||
height: 12px;
|
||||
}
|
||||
|
||||
.media-info .mono-stereo div {
|
||||
#winamp2-js .media-info .mono-stereo div {
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
width: 29px;
|
||||
}
|
||||
|
||||
.media-info .mono-stereo #stereo {
|
||||
#winamp2-js .media-info .mono-stereo #stereo {
|
||||
left: 27px;
|
||||
}
|
||||
|
||||
#volume {
|
||||
#winamp2-js #volume {
|
||||
position: absolute;
|
||||
left: 107px;
|
||||
top: 57px;
|
||||
|
|
@ -287,21 +281,21 @@
|
|||
background-position: 0 0;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
#volume::-webkit-slider-thumb {
|
||||
#winamp2-js #volume::-webkit-slider-thumb {
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
#volume::-moz-range-thumb {
|
||||
#winamp2-js #volume::-moz-range-thumb {
|
||||
margin-top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#balance {
|
||||
#winamp2-js #balance {
|
||||
position: absolute;
|
||||
left: 177px;
|
||||
top: 57px;
|
||||
|
|
@ -311,20 +305,20 @@
|
|||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#balance::-webkit-slider-thumb {
|
||||
#winamp2-js #balance::-webkit-slider-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
#balance::-moz-range-thumb {
|
||||
#winamp2-js #balance::-moz-range-thumb {
|
||||
top: 1px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
.windows {
|
||||
#winamp2-js .windows {
|
||||
position: absolute;
|
||||
left: 219px;
|
||||
top: 58px;
|
||||
|
|
@ -332,21 +326,21 @@
|
|||
height: 12px;
|
||||
}
|
||||
|
||||
.windows div {
|
||||
#winamp2-js .windows div {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.windows #equalizer-button {
|
||||
#winamp2-js .windows #equalizer-button {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.windows #playlist-button {
|
||||
#winamp2-js .windows #playlist-button {
|
||||
left: 23px;
|
||||
}
|
||||
|
||||
#position {
|
||||
#winamp2-js #position {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 72px;
|
||||
|
|
@ -355,7 +349,7 @@
|
|||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
#position::-webkit-slider-thumb {
|
||||
#winamp2-js #position::-webkit-slider-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
|
|
@ -367,45 +361,45 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#position::-moz-range-thumb {
|
||||
#winamp2-js #position::-moz-range-thumb {
|
||||
height: 10px;
|
||||
width: 29px;
|
||||
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
/* For some reason, we can't use display: none here */
|
||||
.stop #position::-webkit-slider-thumb { visibility: hidden; }
|
||||
.stop #position::-moz-range-thumb { visibility: hidden; }
|
||||
#winamp2-js .stop #position::-webkit-slider-thumb { visibility: hidden; }
|
||||
#winamp2-js .stop #position::-moz-range-thumb { visibility: hidden; }
|
||||
|
||||
.actions div {
|
||||
#winamp2-js .actions div {
|
||||
height: 18px;
|
||||
width: 23px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.actions #previous {
|
||||
#winamp2-js .actions #previous {
|
||||
top: 88px;
|
||||
left: 16px;
|
||||
}
|
||||
.actions #play {
|
||||
#winamp2-js .actions #play {
|
||||
top: 88px;
|
||||
left: 39px;
|
||||
}
|
||||
.actions #pause {
|
||||
#winamp2-js .actions #pause {
|
||||
top: 88px;
|
||||
left: 62px;
|
||||
}
|
||||
.actions #stop {
|
||||
#winamp2-js .actions #stop {
|
||||
top: 88px;
|
||||
left: 85px;
|
||||
}
|
||||
.actions #next {
|
||||
#winamp2-js .actions #next {
|
||||
top: 88px;
|
||||
left: 108px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
#eject {
|
||||
#winamp2-js #eject {
|
||||
position: absolute;
|
||||
top: 89px;
|
||||
left: 136px;
|
||||
|
|
@ -413,28 +407,28 @@
|
|||
width: 22px;
|
||||
}
|
||||
|
||||
.shuffle-repeat {
|
||||
#winamp2-js .shuffle-repeat {
|
||||
position: absolute;
|
||||
top: 89px;
|
||||
left: 163px;
|
||||
width: 74px;
|
||||
}
|
||||
|
||||
.shuffle-repeat div {
|
||||
#winamp2-js .shuffle-repeat div {
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.shuffle-repeat #shuffle {
|
||||
#winamp2-js .shuffle-repeat #shuffle {
|
||||
width: 47px;
|
||||
}
|
||||
|
||||
.shuffle-repeat #repeat {
|
||||
#winamp2-js .shuffle-repeat #repeat {
|
||||
left: 46px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
#about {
|
||||
#winamp2-js #about {
|
||||
position: absolute;
|
||||
top: 91px;
|
||||
left: 253px;
|
||||
|
|
@ -442,7 +436,7 @@
|
|||
width: 13px;
|
||||
}
|
||||
|
||||
.digit {
|
||||
#winamp2-js .digit {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
|
|
@ -452,67 +446,66 @@
|
|||
}
|
||||
|
||||
/* Shade View */
|
||||
#main-window.shade {
|
||||
#winamp2-js #main-window.shade {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#shade-time {
|
||||
#winamp2-js #shade-time {
|
||||
cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
|
||||
.shade .media-info,
|
||||
.shade .windows,
|
||||
.shade #volume,
|
||||
.shade #balance,
|
||||
.shade .shuffle-repeat,
|
||||
.shade .status
|
||||
{
|
||||
#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 {
|
||||
display: none;
|
||||
}
|
||||
.shade #title-bar {
|
||||
#winamp2-js .shade #title-bar {
|
||||
cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
|
||||
}
|
||||
|
||||
.shade .actions div {
|
||||
#winamp2-js .shade .actions div {
|
||||
position: absolute;
|
||||
}
|
||||
.shade .actions #previous {
|
||||
#winamp2-js .shade .actions #previous {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 7px;
|
||||
top: 2px;
|
||||
left: 169px;
|
||||
}
|
||||
.shade .actions #play {
|
||||
#winamp2-js .shade .actions #play {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 176px;
|
||||
}
|
||||
.shade .actions #pause {
|
||||
#winamp2-js .shade .actions #pause {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 186px;
|
||||
}
|
||||
.shade .actions #stop {
|
||||
#winamp2-js .shade .actions #stop {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 9px;
|
||||
top: 2px;
|
||||
left: 195px;
|
||||
}
|
||||
.shade .actions #next {
|
||||
#winamp2-js .shade .actions #next {
|
||||
background: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
left: 204px;
|
||||
}
|
||||
.shade #eject {
|
||||
#winamp2-js .shade #eject {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 2px;
|
||||
|
|
@ -520,7 +513,7 @@
|
|||
background: none;
|
||||
}
|
||||
|
||||
.shade #position {
|
||||
#winamp2-js .shade #position {
|
||||
position: absolute;
|
||||
left: 226px;
|
||||
top: 4px;
|
||||
|
|
@ -528,25 +521,25 @@
|
|||
height: 7px;
|
||||
}
|
||||
|
||||
.shade #position::-webkit-slider-thumb {
|
||||
#winamp2-js .shade #position::-webkit-slider-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
/* This make it appear. Not sure why */
|
||||
background: none;
|
||||
}
|
||||
|
||||
.shade #position::-moz-range-thumb {
|
||||
#winamp2-js .shade #position::-moz-range-thumb {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
/* This make it appear. Not sure why */
|
||||
background: none;
|
||||
}
|
||||
|
||||
#shade-time {
|
||||
#winamp2-js #shade-time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shade #shade-time {
|
||||
#winamp2-js .shade #shade-time {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
|
|
@ -555,30 +548,30 @@
|
|||
width: 25px;
|
||||
}
|
||||
|
||||
.stop.shade #shade-time { display:none; }
|
||||
.pause.shade #shade-time {
|
||||
#winamp2-js .stop.shade #shade-time { display:none; }
|
||||
#winamp2-js .pause.shade #shade-time {
|
||||
animation: blink 2s step-start 1s infinite;
|
||||
-webkit-animation: blink 2s step-start 1s infinite;
|
||||
}
|
||||
|
||||
.shade #shade-time .character {
|
||||
#winamp2-js .shade #shade-time .character {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.shade #shade-minus-sign {
|
||||
#winamp2-js .shade #shade-minus-sign {
|
||||
left: 0px;
|
||||
}
|
||||
.shade #shade-minute-first-digit {
|
||||
#winamp2-js .shade #shade-minute-first-digit {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.shade #shade-minute-second-digit {
|
||||
#winamp2-js .shade #shade-minute-second-digit {
|
||||
left: 11px;
|
||||
}
|
||||
.shade #shade-second-first-digit {
|
||||
#winamp2-js .shade #shade-second-first-digit {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.shade #shade-second-second-digit {
|
||||
#winamp2-js .shade #shade-second-second-digit {
|
||||
left: 25px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,21 @@
|
|||
@import url("context-menu.css");
|
||||
|
||||
/* Rules used by all windows */
|
||||
#winamp2-js {
|
||||
height: 116px;
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
|
||||
/* Range input css reset */
|
||||
input[type=range]{ -webkit-appearance: none; margin: 0; padding: 0; background: none; }
|
||||
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; border-radius: 0; background: none; }
|
||||
input[type=range]::-moz-range-thumb { border: none; border-radius: 0; background: none; }
|
||||
input[type=range]::-moz-range-track { border: none; background: none; }
|
||||
input[type=range]:focus { outline: none; }
|
||||
input[type=range]::-moz-focus-outer { border: 0; }
|
||||
#winamp2-js input[type=range]{ -webkit-appearance: none; margin: 0; padding: 0; background: none; border: none; }
|
||||
#winamp2-js input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; border-radius: 0; background: none; }
|
||||
#winamp2-js input[type=range]::-moz-range-thumb { border: none; border-radius: 0; background: none; }
|
||||
#winamp2-js input[type=range]::-moz-range-track { border: none; background: none; }
|
||||
#winamp2-js input[type=range]:focus { outline: none; }
|
||||
#winamp2-js input[type=range]::-moz-focus-outer { border: 0; }
|
||||
|
||||
a:focus { outline: none; }
|
||||
#winamp2-js a:focus { outline: none; }
|
||||
|
||||
/* Animation */
|
||||
@keyframes blink {
|
||||
|
|
@ -25,7 +30,7 @@ a:focus { outline: none; }
|
|||
100% { opacity: 1.0; }
|
||||
}
|
||||
|
||||
.character {
|
||||
#winamp2-js .character {
|
||||
display: block;
|
||||
float: left; /* Safari does not do inline-block well */
|
||||
width: 5px;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<script data-main='js/main' src="js/require.js"></script>
|
||||
<div id='main-window-parent'></div>
|
||||
<div id='winamp2-js'></div>
|
||||
<div id='browser-compatibility'>
|
||||
<p>Your browser does not support the features we need</p>
|
||||
<p>Try using the most recent version of Chrome, Firefox or Safari</p>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ require([
|
|||
if(Browser.isCompatible()) {
|
||||
var mainWindowElement = document.createElement('div');
|
||||
mainWindowElement.innerHTML = mainWindowHtml;
|
||||
document.getElementById('main-window-parent').appendChild(mainWindowElement);
|
||||
document.getElementById('winamp2-js').appendChild(mainWindowElement);
|
||||
|
||||
var winamp = Winamp.init({
|
||||
'volume': 50,
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ return {
|
|||
context.drawImage(skinImage, -sprite.x, -sprite.y);
|
||||
var value = "background-image: url(" + canvas.toDataURL() + ")";
|
||||
sprite.selectors.forEach(function(selector) {
|
||||
cssRules += selector + "{" + value + "}\n";
|
||||
cssRules += "#winamp2-js " + selector + "{" + value + "}\n";
|
||||
});
|
||||
});
|
||||
resolve(cssRules);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue